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

improve layout

Browse Source
This commit is contained in:
James Collins
2023-02-21 13:10:57 +10:00
parent 4123845783
commit 8e4044dffb
1 changed files with 49 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
resources/js/components/SMMessage.vue
View File

@@ -1,7 +1,9 @@
<template>
<div :class="['message', type]">
<ion-icon v-if="icon" :name="icon"></ion-icon>
<p>{{ message }}</p>
<div class="sm-message message-outer">
<div :class="['message', type]">
<ion-icon v-if="icon" :name="icon"></ion-icon>
<p>{{ message }}</p>
</div>
</div>
</template>
@@ -23,48 +25,53 @@ defineProps({
</script>
<style lang="scss">
.message {
display: flex;
padding: map-get($spacer, 2) map-get($spacer, 3);
margin-bottom: map-get($spacer, 4);
text-align: center;
font-size: 90%;
word-break: break-word;
&.primary {
background-color: $primary-color-lighter;
color: $primary-color-darker;
border: 1px solid $primary-color-lighter;
border-radius: 12px;
}
&.success {
background-color: $success-color-lighter;
color: $success-color-darker;
border: 1px solid $success-color-lighter;
border-radius: 12px;
}
&.error {
background-color: $danger-color-lighter;
color: $danger-color-darker;
border: 1px solid $danger-color-lighter;
border-radius: 12px;
}
ion-icon {
height: 1.3em;
width: 1.3em;
.sm-message {
&.message-outer {
justify-content: center;
align-self: center;
}
p {
flex: 1;
margin-bottom: 0;
justify-content: center;
align-self: center;
white-space: pre-wrap;
.message {
display: inline-flex;
padding: map-get($spacer, 2) map-get($spacer, 3);
margin-bottom: map-get($spacer, 4);
text-align: center;
font-size: 90%;
word-break: break-word;
&.primary {
background-color: $primary-color-lighter;
color: $primary-color-darker;
border: 1px solid $primary-color-lighter;
border-radius: 12px;
}
&.success {
background-color: $success-color-lighter;
color: $success-color-darker;
border: 1px solid $success-color-lighter;
border-radius: 12px;
}
&.error {
background-color: $danger-color-lighter;
color: $danger-color-darker;
border: 1px solid $danger-color-lighter;
border-radius: 12px;
}
ion-icon {
height: 1.3em;
width: 1.3em;
margin-right: map-get($spacer, 1);
}
p {
margin-bottom: 0;
justify-content: center;
align-self: center;
white-space: pre-wrap;
}
}
}
}
</style>