diff options
Diffstat (limited to 'app/assets/stylesheets/framework/flash.scss')
-rw-r--r-- | app/assets/stylesheets/framework/flash.scss | 89 |
1 files changed, 24 insertions, 65 deletions
diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss index 8fc2fd5f53b..657e7023111 100644 --- a/app/assets/stylesheets/framework/flash.scss +++ b/app/assets/stylesheets/framework/flash.scss @@ -1,7 +1,7 @@ $notification-box-shadow-color: rgba(0, 0, 0, 0.25); .flash-container { - margin: 0; + margin-top: 10px; margin-bottom: $gl-padding; font-size: 14px; position: relative; @@ -12,17 +12,22 @@ $notification-box-shadow-color: rgba(0, 0, 0, 0.25); position: -webkit-sticky; top: $flash-container-top; z-index: 251; + } - .flash-content { - box-shadow: 0 2px 4px 0 $notification-box-shadow-color; - } + &.flash-container-page { + margin-bottom: 0; + } + + &:empty { + margin: 0; } .close-icon-wrapper { - padding: ($gl-btn-padding + $gl-padding-4) $gl-padding $gl-btn-padding; + padding: ($gl-padding + $gl-padding-4) $gl-padding $gl-padding; position: absolute; right: 0; top: 0; + bottom: 0; cursor: pointer; .close-icon { @@ -31,13 +36,11 @@ $notification-box-shadow-color: rgba(0, 0, 0, 0.25); } } - .flash-notice, .flash-alert, + .flash-notice, .flash-success, .flash-warning { - border-radius: $border-radius-default; - color: $white-light; - padding-right: $gl-padding * 2; + padding: $gl-padding $gl-padding-32 $gl-padding ($gl-padding + $gl-padding-4); .container-fluid, .container-fluid.container-limited { @@ -45,75 +48,31 @@ $notification-box-shadow-color: rgba(0, 0, 0, 0.25); } } - .flash-notice { - @extend .alert; - background-color: $blue-500; - margin: 0; - - &.flash-notice-persistent { - background-color: $blue-100; - color: $gl-text-color; + .flash-alert { + background-color: $red-100; + color: $red-700; + } - a { - color: $blue-600; + .flash-notice { + background-color: $blue-100; + color: $blue-700; + } - &:hover { - color: $blue-800; - text-decoration: none; - } - } - } + .flash-success { + background-color: $theme-green-100; + color: $green-700; } .flash-warning { - @extend .alert; background-color: $orange-100; - color: $orange-900; + color: $orange-800; cursor: default; - margin: 0; } .flash-text, .flash-action { display: inline-block; } - - .flash-alert { - @extend .alert; - background-color: $red-500; - margin: 0; - - .flash-action { - margin-left: 5px; - text-decoration: none; - font-weight: $gl-font-weight-normal; - border-bottom: 1px solid; - - &:hover { - border-color: transparent; - } - } - } - - .flash-success { - @extend .alert; - background-color: $green-500; - margin: 0; - } - - &.flash-container-page { - margin-bottom: 0; - - .flash-notice, - .flash-alert, - .flash-success { - border-radius: 0; - } - } - - &:empty { - margin: 0; - } } @include media-breakpoint-down(sm) { |