From 1dc7744afb86691c662bf88f62511b826ae18724 Mon Sep 17 00:00:00 2001 From: vanillaSlice Date: Sun, 23 Sep 2018 19:27:18 +0100 Subject: [PATCH 1/5] Created dismissible alerts --- docs/content/docs/components/alerts.md | 64 ++++++++++++++++++++++++++ src/components/_alerts.scss | 40 ++++++++++++++++ 2 files changed, 104 insertions(+) diff --git a/docs/content/docs/components/alerts.md b/docs/content/docs/components/alerts.md index 1c76c5b..f3bc7a5 100644 --- a/docs/content/docs/components/alerts.md +++ b/docs/content/docs/components/alerts.md @@ -2,6 +2,8 @@ title: Alerts description: PaperCSS Alerts --- +### Simple alerts +
Alert-primary @@ -31,3 +33,65 @@ description: PaperCSS Alerts
Alert-danger
``` + +### Dismissible alerts + +
+ +
+ Alert-primary + +
+ +
+ Alert-secondary + +
+ +
+ Alert-success + +
+ +
+ Alert-warning + +
+ +
+ Alert-danger + +
+
+ +#### Code: + +```html +
+ +
+ Alert-primary + +
+ +
+ Alert-secondary + +
+ +
+ Alert-success + +
+ +
+ Alert-warning + +
+ +
+ Alert-danger + +
+
+``` diff --git a/src/components/_alerts.scss b/src/components/_alerts.scss index fc027fe..c7c9fc7 100644 --- a/src/components/_alerts.scss +++ b/src/components/_alerts.scss @@ -4,6 +4,28 @@ margin-bottom: 20px; padding: 15px; width: 100%; + + &.dismissible { + -webkit-box-pack: justify; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-pack: justify; + justify-content: space-between; + } + + .btn-close { + @include transition; + color: lighten($primary, 10%); + cursor: pointer; + margin-left: 1rem; + + &:hover, + &:active, + &:focus { + color: darken($primary, 10%); + } + } } @each $colorName, $color, $color-light in $colors { @@ -11,5 +33,23 @@ background-color: $color-light; border-color: $color; color: $color; + + .btn-close { + color: lighten($color, 10%); + + &:hover, + &:active, + &:focus { + color: darken($color, 10%); + } + } + } +} + +.alert-state { + display: none; + + &:checked+.dismissible { + display: none; } } From 5c8f389ec923a5e1a552e8fb9013e7a4c2ad9c75 Mon Sep 17 00:00:00 2001 From: vanillaSlice Date: Sat, 29 Sep 2018 11:17:01 +0100 Subject: [PATCH 2/5] Fade out on dismiss --- src/components/_alerts.scss | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/_alerts.scss b/src/components/_alerts.scss index c7c9fc7..f2e7548 100644 --- a/src/components/_alerts.scss +++ b/src/components/_alerts.scss @@ -6,12 +6,16 @@ width: 100%; &.dismissible { + @include transition; -webkit-box-pack: justify; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; + max-height: 48rem; + opacity: 1; + overflow: hidden; } .btn-close { @@ -50,6 +54,11 @@ display: none; &:checked+.dismissible { - display: none; + border-width: 0; + margin: 0; + max-height: 0; + opacity: 0; + padding-bottom: 0; + padding-top: 0; } } From b82a7610de7fdcbd8d2627a6e8985b8e2236dea3 Mon Sep 17 00:00:00 2001 From: vanillaSlice Date: Mon, 1 Oct 2018 04:00:11 +0100 Subject: [PATCH 3/5] Removed prefixes --- src/components/_alerts.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/_alerts.scss b/src/components/_alerts.scss index f2e7548..a75a288 100644 --- a/src/components/_alerts.scss +++ b/src/components/_alerts.scss @@ -7,11 +7,7 @@ &.dismissible { @include transition; - -webkit-box-pack: justify; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -ms-flex-pack: justify; justify-content: space-between; max-height: 48rem; opacity: 1; From 8df804254b459bbf03cc93d5776e53292b2848bf Mon Sep 17 00:00:00 2001 From: vanillaSlice Date: Mon, 1 Oct 2018 04:08:30 +0100 Subject: [PATCH 4/5] Extract btn-close-color mixin --- src/components/_alerts.scss | 26 ++++++++++++-------------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/src/components/_alerts.scss b/src/components/_alerts.scss index a75a288..5d90a25 100644 --- a/src/components/_alerts.scss +++ b/src/components/_alerts.scss @@ -1,3 +1,13 @@ +@mixin btn-close-color($base-color) { + color: lighten($base-color, 10%); + + &:hover, + &:active, + &:focus { + color: darken($base-color, 10%); + } +} + .alert { @include border-style(); border: 2px solid $primary; @@ -16,15 +26,9 @@ .btn-close { @include transition; - color: lighten($primary, 10%); + @include btn-close-color($primary); cursor: pointer; margin-left: 1rem; - - &:hover, - &:active, - &:focus { - color: darken($primary, 10%); - } } } @@ -35,13 +39,7 @@ color: $color; .btn-close { - color: lighten($color, 10%); - - &:hover, - &:active, - &:focus { - color: darken($color, 10%); - } + @include btn-close-color($color); } } } From d9e9a88dd5a0e4203fa703ff1b87e6bd51ac4112 Mon Sep 17 00:00:00 2001 From: vanillaSlice Date: Fri, 5 Oct 2018 10:15:02 +0100 Subject: [PATCH 5/5] Removed unnecessary properties --- src/components/_alerts.scss | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/_alerts.scss b/src/components/_alerts.scss index 5d90a25..9677f0f 100644 --- a/src/components/_alerts.scss +++ b/src/components/_alerts.scss @@ -20,7 +20,6 @@ display: flex; justify-content: space-between; max-height: 48rem; - opacity: 1; overflow: hidden; } @@ -28,7 +27,7 @@ @include transition; @include btn-close-color($primary); cursor: pointer; - margin-left: 1rem; + margin-left: 0.75rem; } } @@ -47,7 +46,7 @@ .alert-state { display: none; - &:checked+.dismissible { + &:checked + .dismissible { border-width: 0; margin: 0; max-height: 0;