From bb615378f2cdbed9d142f9f1c1b616e4a076c113 Mon Sep 17 00:00:00 2001 From: Christoph Haas Date: Tue, 29 May 2018 16:49:47 +0200 Subject: [PATCH] Flash/callouts more sublte now --- app/assets/stylesheets/customisations.scss | 46 ++++++++++++++++++++++ app/views/layouts/_messages.slim | 9 ++--- 2 files changed, 49 insertions(+), 6 deletions(-) diff --git a/app/assets/stylesheets/customisations.scss b/app/assets/stylesheets/customisations.scss index 56a6e2e..1c3323b 100644 --- a/app/assets/stylesheets/customisations.scss +++ b/app/assets/stylesheets/customisations.scss @@ -392,4 +392,50 @@ a.black .menu .menu-text { font-size: 2.5rem; + +// Nicer callouts +// https://foundation.zurb.com/building-blocks/blocks/alert-callout-subtle.html +$alert-callout-subtle-border-left-width: rem-calc(5); +$alert-callout-subtle-radius: 0.6rem; + +.alert-callout-subtle { + width: 100%; + background: $light-gray; + color: $dark-gray; + border: 0; + border-left: $alert-callout-subtle-border-left-width solid $dark-gray; + box-shadow: 0 5px 8px -6px rgba(0,0,0, 0.2); + + &.success { + background: $light-gray; + color: $dark-gray; + border-left: $alert-callout-subtle-border-left-width solid $success-color; + } + + &.alert { + background: $light-gray; + color: $dark-gray; + border-left: $alert-callout-subtle-border-left-width solid $alert-color; + } + + &.warning { + background: $light-gray; + color: $dark-gray; + border-left: $alert-callout-subtle-border-left-width solid $warning-color; + } + + &.primary { + background: $light-gray; + color: $dark-gray; + border-left: $alert-callout-subtle-border-left-width solid $primary-color; + } + + .close-button { + font-size: 2rem; + @include vertical-center; + } + + &.radius { + border-radius: $alert-callout-subtle-radius; + } } diff --git a/app/views/layouts/_messages.slim b/app/views/layouts/_messages.slim index c8e7206..f469d12 100644 --- a/app/views/layouts/_messages.slim +++ b/app/views/layouts/_messages.slim @@ -7,14 +7,11 @@ / Workaround for Devise sometimes sending "true" - next - when 'notice' - .callout.warning data-closable=true - = fa_icon 'info-circle wobble' + .callout.warning.alert-callout-subtle.radius data-closable=true strong< = msg - when 'error' - .callout.alert data-closable=true - = fa_icon 'meh-o wobble' + .callout.alert.alert-callout-subtle.radius data-closable=true strong< = msg - else - .callout.primary data-closable=true - = fa_icon 'info-circle wobble' + .callout.primary.alert-callout-subtle.radius data-closable=true strong< = msg