STEMMechanics/Website
1
0
Fork 0
Code Issues 4 Pull Requests 1 Actions Packages Projects Releases 3 Wiki Activity

fix styling

Browse Source
This commit is contained in:
James Collins
2023-04-26 18:52:16 +10:00
parent 4cbde00ef3
commit 77b8f60cb1
1 changed files with 9 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
resources/js/components/SMLoading.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div :class="['loading-background', { overlay: props.overlay }]"> <div :class="['loading-background', { overlay: props.overlay }]">
<div :class="{ 'loading-box': props.overlay }"> <div :class="{ 'loading-box': props.overlay, large: props.large }">
<SMLoadingIcon v-bind="{ large: props.large }" /> <SMLoadingIcon v-bind="{ large: props.large }" />
<p v-if="props.text" class="loading-text">{{ props.text }}</p> <p v-if="props.text" class="loading-text">{{ props.text }}</p>
</div> </div>
@@ -57,12 +57,19 @@ const props = defineProps({
.loading-box { .loading-box {
background-color: #fff; background-color: #fff;
padding: 48px 48px 16px 48px; padding: 24px 48px;
border-radius: 10px; border-radius: 10px;
box-shadow: var(--base-shadow); box-shadow: var(--base-shadow);
.loading-text { .loading-text {
font-size: 120%;
margin-top: #{map-get($spacing, 2)};
margin-bottom: 0;
}
&.large .loading-text {
font-size: 150%; font-size: 150%;
margin-top: #{map-get($spacing, 3)};
} }
} }
} }