v1/web/modules/contrib/gin_lb/styles/components/_messages.scss

124 lines
2.9 KiB
SCSS

.glb-messages-list {
display: none;
}
.glb-form .glb-messages-list {
display: block;
}
.glb-messages {
padding: 1em !important;
border: 2px solid transparent !important;
border-radius: $borderMedium !important;
box-shadow: 10px 10px 30px #c1c1d2,
-6px -6px 16px scale-color($colorAppBackgroundShadow, $lightness: -2%) !important;
font-family: Inter, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
.gin--dark-mode & {
box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.05) !important;
}
&, &-list {
margin: 20px auto !important;
max-width: 960px !important;
padding-left: 20px;
padding-right: 20px;
}
a {
&,
&:hover,
&:active {
color: #fff !important;
}
}
&__title {
font-weight: 600 !important;
}
&__title,
&__content {
margin-left: 2.125em !important;
}
.glb-messages__header {
position: relative !important;
background-image: none !important;
margin-bottom: .5em !important;
&:before {
content: "" !important;
display: block !important;
position: absolute !important;
top: 2px !important;
left: 0 !important;
width: 24px !important;
height: 24px !important;
}
}
&.glb-messages--info {
color: var(--gin-color-info-light) !important;
background-color: var(--gin-bg-info) !important;
border-color: var(--gin-bg-info) !important;
.glb-messages__header {
background: none !important;
&:before {
background-color: var(--gin-color-info-light) !important;
mask-image: icon('info') !important;
mask-repeat: no-repeat !important;
mask-position: center left !important;
}
}
}
&.glb-messages--status {
color: var(--gin-color-green-light) !important;
background-color: var(--gin-bg-green) !important;
.glb-messages__header {
&:before {
background-color: var(--gin-color-green-light) !important;
mask-image: icon('status');
mask-repeat: no-repeat;
mask-position: center left;
}
}
}
&.glb-messages--warning {
color: var(--gin-color-warning-light);
background-color: var(--gin-bg-warning) !important;
.glb-messages__header {
&:before {
background-color: var(--gin-color-warning-light) !important;
mask-image: icon('warning') !important;
mask-repeat: no-repeat !important;
mask-position: center left !important;
}
}
}
&--error {
div {
color: var(--gin-color-danger-light) !important;
}
color: var(--gin-color-danger-light) !important;
background-color: var(--gin-bg-danger) !important;
.glb-messages__header {
&:before {
background-color: var(--gin-color-danger-light) !important;
mask-image: icon('error') !important;
mask-repeat: no-repeat !important;
mask-position: center left !important;
}
}
}
}