diff options
Diffstat (limited to 'app/assets/stylesheets/components/toast.scss')
-rw-r--r-- | app/assets/stylesheets/components/toast.scss | 54 |
1 files changed, 52 insertions, 2 deletions
diff --git a/app/assets/stylesheets/components/toast.scss b/app/assets/stylesheets/components/toast.scss index 91d16c8e98d..33e1c4e5349 100644 --- a/app/assets/stylesheets/components/toast.scss +++ b/app/assets/stylesheets/components/toast.scss @@ -1,3 +1,53 @@ -.toast-close { - font-size: $default-icon-size !important; +/* +* These styles are specific to the gl-toast component. +* Documentation: https://design.gitlab.com/components/toasts +* Note: Styles below are nested in order to override some of vue-toasted's default styling +*/ +.toasted-container { + + max-width: $toast-max-width; + + @include media-breakpoint-down(xs) { + width: 100%; + padding-right: $toast-padding-right; + } + + .toasted.gl-toast { + border-radius: $border-radius-default; + font-size: $gl-font-size; + padding: $gl-padding-8 $gl-padding-24; + margin-top: $toast-default-margin; + line-height: $gl-line-height; + background-color: rgba($gray-900, $toast-background-opacity); + + @include media-breakpoint-down(xs) { + .action:first-child { + // Ensures actions buttons are right aligned on mobile + margin-left: auto; + } + } + + .action { + color: $blue-300; + margin: 0 0 0 $toast-action-margin-left; + text-transform: none; + font-size: $gl-font-size; + + &:first-child { + padding-right: 0; + } + } + + .toast-close { + font-size: $default-icon-size; + margin-left: $toast-default-margin; + padding-left: $gl-padding; + } + } +} + +// Overrides the default positioning of toasts +body .toasted-container.bottom-left { + bottom: $toast-offset; + left: $toast-offset; } |