From f2bbe04eb51c600c8d967edf16366e5bcef82731 Mon Sep 17 00:00:00 2001 From: Jordan-Tompit Date: Wed, 21 Dec 2022 16:07:30 +0100 Subject: [PATCH] Change Alert justification --- .../Styles/components/_alert.scss | 154 +++++++++--------- 1 file changed, 77 insertions(+), 77 deletions(-) diff --git a/src/Connected.Components/Styles/components/_alert.scss b/src/Connected.Components/Styles/components/_alert.scss index c33f82b..c10e24d 100644 --- a/src/Connected.Components/Styles/components/_alert.scss +++ b/src/Connected.Components/Styles/components/_alert.scss @@ -1,107 +1,107 @@ -@import '../abstracts/variables'; +@import "../abstracts/variables"; .alert { - display: flex; - padding: 6px 16px; - border-radius: var(--default-borderradius); - background-color: transparent; - transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - - &.square { - border-radius: 0px; - } - - &.dense { - padding: 0px 12px; - } + display: flex; + padding: 6px 16px; + border-radius: var(--default-borderradius); + background-color: transparent; + transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + + &.square { + border-radius: 0px; + } + + &.dense { + padding: 0px 12px; + } } .alert-text { - &-normal { - color: var(--palette-text-primary); - background-color: var(--palette-dark-hover); - } - - @each $color in $palette-colors { - &-#{$color} { - color: var(--palette-#{$color}-darken); - background-color: var(--palette-#{$color}-hover); - - & .alert-icon { - color: var(--palette-#{$color}); - } - } + &-normal { + color: var(--palette-text-primary); + background-color: var(--palette-dark-hover); + } + + @each $color in $palette-colors { + &-#{$color} { + color: var(--palette-#{$color}-darken); + background-color: var(--palette-#{$color}-hover); + + & .alert-icon { + color: var(--palette-#{$color}); + } } + } } .alert-outlined { - &-normal { - color: var(--palette-text-primary); - border: 1px solid var(--palette-text-primary); - } - - @each $color in $palette-colors { - &-#{$color} { - color: var(--palette-#{$color}-darken); - border: 1px solid var(--palette-#{$color}); - - & .alert-icon { - color: var(--palette-#{$color}); - } - } + &-normal { + color: var(--palette-text-primary); + border: 1px solid var(--palette-text-primary); + } + + @each $color in $palette-colors { + &-#{$color} { + color: var(--palette-#{$color}-darken); + border: 1px solid var(--palette-#{$color}); + + & .alert-icon { + color: var(--palette-#{$color}); + } } + } } .alert-filled { - &-normal { - color: var(--palette-dark-text); - font-weight: 500; - background-color: var(--palette-dark); - } - - @each $color in $palette-colors { - &-#{$color} { - color: var(--palette-#{$color}-text); - font-weight: 500; - background-color: var(--palette-#{$color}); - } + &-normal { + color: var(--palette-dark-text); + font-weight: 500; + background-color: var(--palette-dark); + } + + @each $color in $palette-colors { + &-#{$color} { + color: var(--palette-#{$color}-text); + font-weight: 500; + background-color: var(--palette-#{$color}); } + } } .alert-icon { - display: flex; - opacity: 0.9; - padding: 7px 0; - font-size: 22px; + display: flex; + opacity: 0.9; + padding: 7px 0; + font-size: 22px; + margin-right: 12px; + margin-inline-end: 12px; + margin-inline-start: unset; + + &.alert-icon-left { margin-right: 12px; margin-inline-end: 12px; margin-inline-start: unset; + } - &.alert-icon-left { - margin-right: 12px; - margin-inline-end: 12px; - margin-inline-start: unset; - } - - &.alert-icon-right { - margin-left: 12px; - margin-inline-start: 12px; - margin-inline-end: unset; - } + &.alert-icon-right { + margin-left: 12px; + margin-inline-start: 12px; + margin-inline-end: unset; + } } .alert-message { - padding: 9px 0; + padding: 9px 0; } .alert-position { - flex: 1; - display: flex; + //flex: 1; + display: flex; } .alert-close { - display: flex; - flex: 0; - align-items: center; - margin-left: 8px; -} \ No newline at end of file + display: flex; + flex: 0; + align-items: center; + margin-left: 8px; +}