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> <template>
<div :class="['message', type]"> <div class="sm-message message-outer">
<ion-icon v-if="icon" :name="icon"></ion-icon> <div :class="['message', type]">
<p>{{ message }}</p> <ion-icon v-if="icon" :name="icon"></ion-icon>
<p>{{ message }}</p>
</div>
</div> </div>
</template> </template>
@@ -23,48 +25,53 @@ defineProps({
</script> </script>
<style lang="scss"> <style lang="scss">
.message { .sm-message {
display: flex; &.message-outer {
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;
justify-content: center; justify-content: center;
align-self: center; align-self: center;
}
p { .message {
flex: 1; display: inline-flex;
margin-bottom: 0; padding: map-get($spacer, 2) map-get($spacer, 3);
justify-content: center; margin-bottom: map-get($spacer, 4);
align-self: center; text-align: center;
white-space: pre-wrap; 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> </style>