From 331a96f7b6e329640d0c318674b0fa48b3139c4d Mon Sep 17 00:00:00 2001 From: Emily Brick Date: Tue, 2 Jul 2019 10:39:48 -0400 Subject: [PATCH] changed border to inset box shadow and fixed vertical alignment --- pages/css/components/toasts.md | 128 +++++++++++++++++++-------------- src/toasts/toasts.scss | 47 +++++------- 2 files changed, 94 insertions(+), 81 deletions(-) diff --git a/pages/css/components/toasts.md b/pages/css/components/toasts.md index 41569362..8ffbb062 100644 --- a/pages/css/components/toasts.md +++ b/pages/css/components/toasts.md @@ -14,88 +14,112 @@ To create a default toast, use `.Toast` ## Default style ```html title="Block style" -
- - - - Submitting issue to github/github -
-
- - - - Submitting issue to github/github -
-
- - - - Submitting issue to github/github -
-
- - - - Submitting issue to github/github +
+
+ + + + Submitting issue to github/github +
+
+ + + + Submitting issue to github/github +
+
+ + + + Submitting issue to github/github +
+
+ + + + Submitting issue to github/github +
``` ## Toast with dismiss ```html title="Toast with dismiss" -
- - - - Submitting issue to github/github. - +
+
+ + + + Submitting issue to github/github. + +
- ``` ## Toast with link ```html title="Toast with link" -
- - - - Submitting issue to github/github. Try again. +
+
+ + + + Submitting issue to github/github. Try again. +
- ``` ## Toast with link and dismiss ```html title="Toast with action and dismiss" -
- - - - Submitting issue to github/github. Try again. - +
+
+ + + + Submitting issue to github/github. Try again. + +
``` ## Toast animating ```html title="Toast animating" -
- - - - Submitting issue to github/github +
+
+ + + + Submitting issue to github/github +
``` ## Toast with long text ```html title="Toast with long text" -
- - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
+
+ + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
+
+``` + +## Toast with long text and a dismiss + +```html title="Toast with long text" +
+
+ + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + +
``` diff --git a/src/toasts/toasts.scss b/src/toasts/toasts.scss index 72cdb6fc..cf5f44a1 100644 --- a/src/toasts/toasts.scss +++ b/src/toasts/toasts.scss @@ -1,14 +1,18 @@ // Toast +// just for the documentation, remove before shipping +.Toast-wrapper { + padding: 30px; +} + .Toast { display: flex; background-color: white; color: $black; padding: $spacer-3; - border-radius: 3px; - border: 1px solid $black-fade-15; + border-radius: $border-radius; + box-shadow: inset 0 0 0 1px $border-gray-dark, $box-shadow-medium; margin: $spacer-2; - box-shadow: $box-shadow-medium; transition: 0.2s ease; @include breakpoint(sm) { @@ -20,20 +24,8 @@ .Toast-octicon { margin-right: $spacer-2; -} - -.Toast-action { - margin-top: $spacer-2; -} - -.Toast-dismiss { - margin-left: $spacer-3; - color: $text-gray; - - &:hover { - cursor: pointer; - color: $text-gray-dark; - } + display: flex; + align-items: center; } @@ -58,8 +50,6 @@ 100% {bottom:-100px;} } -// 4. Block style - .Toast-block-default, .Toast-block-error, .Toast-block-warning, @@ -71,11 +61,8 @@ padding: $spacer-3; margin-right: 0; fill: white; - - svg { - width: 18px; - height: 18px; - } + border-top-left-radius: inherit; + border-bottom-left-radius: inherit; } .Toast-content { @@ -83,16 +70,18 @@ } .Toast-dismiss { - padding: $spacer-3 $spacer-3 $spacer-3 0; - margin: 0; - } + padding: $spacer-3; + align-self: center; - .Toast-action { - margin: auto $spacer-3 auto $spacer-2; + &:hover { + cursor: pointer; + fill: $text-gray; + } } } .Toast-block-default { + .Toast-octicon { background-color: $blue-500; }