From c08278431f1cbbc0d2fbb51510c0e9de227c0790 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Fri, 11 Aug 2017 10:55:42 -0700 Subject: [PATCH 1/6] make toasts prettier, add better documentation on usage --- .../dist/ui_framework_theme_light.css | 54 ++++++++++++------- .../doc_site/src/views/toast/danger.js | 6 +-- .../doc_site/src/views/toast/default.js | 22 ++------ ui_framework/doc_site/src/views/toast/info.js | 16 ++---- .../doc_site/src/views/toast/success.js | 10 ++-- .../doc_site/src/views/toast/toast_example.js | 11 ++++ .../doc_site/src/views/toast/warning.js | 20 +------ .../components/toast/_global_toast_list.scss | 20 ++++--- ui_framework/src/components/toast/_index.scss | 2 + ui_framework/src/components/toast/_toast.scss | 17 ++++-- 10 files changed, 90 insertions(+), 88 deletions(-) diff --git a/ui_framework/dist/ui_framework_theme_light.css b/ui_framework/dist/ui_framework_theme_light.css index 16ab59bd5a5ea..39e5b46182d52 100644 --- a/ui_framework/dist/ui_framework_theme_light.css +++ b/ui_framework/dist/ui_framework_theme_light.css @@ -2039,6 +2039,8 @@ table { /** * 1. Allow list to expand as items are added, but cap it at the screen height. + * 2. Only show the scroll on hover. Generally, scrolling is bad for toasts. + * 3. Allow some padding if a scroll shows up. */ .kuiGlobalToastList { display: -webkit-box; @@ -2058,9 +2060,9 @@ table { z-index: 5000; bottom: 0; right: 0; - width: 320px; - overflow-x: hidden; - overflow-y: scroll; + width: 336px; + /* 3 */ + padding-right: 16px; max-height: 100vh; /* 1 */ } .kuiGlobalToastList::-webkit-scrollbar { @@ -2072,11 +2074,15 @@ table { background-clip: content-box; } .kuiGlobalToastList::-webkit-scrollbar-track { background-color: transparent; } + .kuiGlobalToastList:hover { + overflow-y: auto; + /* 2 */ } .kuiGlobalToastListItem { - margin-bottom: 12px; - -webkit-animation: 0.5s kuiShowToast; - animation: 0.5s kuiShowToast; + margin-bottom: 16px; + margin-right: 16px; + -webkit-animation: 250ms kuiShowToast cubic-bezier(0.694, 0.0482, 0.335, 1); + animation: 250ms kuiShowToast cubic-bezier(0.694, 0.0482, 0.335, 1); opacity: 1; /** * 1. justify-content: flex-end interferes with overflowing content, so we'll use this to push @@ -2091,43 +2097,48 @@ table { @-webkit-keyframes kuiShowToast { from { - -webkit-transform: translateX(30px); - transform: translateX(30px); + -webkit-transform: translateY(24px) scale(0.9); + transform: translateY(24px) scale(0.9); opacity: 0; } to { - -webkit-transform: translateX(0); - transform: translateX(0); + -webkit-transform: translateY(0) scale(1); + transform: translateY(0) scale(1); opacity: 1; } } @keyframes kuiShowToast { from { - -webkit-transform: translateX(30px); - transform: translateX(30px); + -webkit-transform: translateY(24px) scale(0.9); + transform: translateY(24px) scale(0.9); opacity: 0; } to { - -webkit-transform: translateX(0); - transform: translateX(0); + -webkit-transform: translateY(0) scale(1); + transform: translateY(0) scale(1); opacity: 1; } } .kuiToast { box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1); position: relative; - padding: 12px; + padding: 16px; background-color: #FFF; - border: 1px solid #D9D9D9; } + border: 1px solid #D9D9D9; + width: 320px; } + .kuiToast:hover .kuiToast__closeButton { + opacity: 1; } /** * 1. Fit button to icon. */ .kuiToast__closeButton { position: absolute; - top: 4px; - right: 4px; + top: 16px; + right: 16px; line-height: 0; /* 1 */ -webkit-appearance: none; -moz-appearance: none; - appearance: none; } + appearance: none; + opacity: 0; + transition: opacity 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); } .kuiToast__closeButton svg { fill: gray; } .kuiToast__closeButton:hover svg { @@ -2152,11 +2163,14 @@ table { /** * 1. Align icon with first line of title text if it wraps. * 2. Apply margin to all but last item in the flex. + * 3. Account for close button. */ .kuiToastHeader { font-size: 16px; font-size: 1rem; line-height: 24px; + padding-right: 24px; + /* 3 */ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2188,7 +2202,7 @@ table { font-weight: 300; } .kuiToastHeader--withBody { - margin-bottom: 9px; } + margin-bottom: 12px; } .kuiTitle { font-size: 24px; diff --git a/ui_framework/doc_site/src/views/toast/danger.js b/ui_framework/doc_site/src/views/toast/danger.js index 7f45694851be5..f52b2690c679a 100644 --- a/ui_framework/doc_site/src/views/toast/danger.js +++ b/ui_framework/doc_site/src/views/toast/danger.js @@ -8,14 +8,12 @@ import { export default () => (

- Here’s some stuff that you need to know. We can make this text really long so that, - when viewed within a browser that’s fairly narrow, it will wrap, too. + Check your form for validation errors.

diff --git a/ui_framework/doc_site/src/views/toast/default.js b/ui_framework/doc_site/src/views/toast/default.js index a5a8d4ca00464..f8cd29f0475a5 100644 --- a/ui_framework/doc_site/src/views/toast/default.js +++ b/ui_framework/doc_site/src/views/toast/default.js @@ -1,7 +1,6 @@ import React from 'react'; import { - KuiLink, KuiText, KuiToast, } from '../../../../components'; @@ -9,30 +8,15 @@ import { export default () => (
window.alert('Dismiss toast')} > - -

- Here’s some stuff that you need to know. We can make this text really long so that, - when viewed within a browser that’s fairly narrow, it will wrap, too. -

- -

- And some other stuff on another line, just for kicks. And here’s a link. + A good toast message is short and to the point. It should very rarely include multiple + paragraphs.

- -
- - window.alert('Dismiss toast')} - />
); diff --git a/ui_framework/doc_site/src/views/toast/info.js b/ui_framework/doc_site/src/views/toast/info.js index 74f23b49c7c59..074601214d47c 100644 --- a/ui_framework/doc_site/src/views/toast/info.js +++ b/ui_framework/doc_site/src/views/toast/info.js @@ -1,29 +1,23 @@ import React from 'react'; import { - KuiLink, KuiText, KuiToast, } from '../../../../components'; export default () => ( window.alert('Dismiss toast')} > - -

- Here’s some stuff that you need to know. We can make this text really long so that, - when viewed within a browser that’s fairly narrow, it will wrap, too. -

- -

- And some other stuff on another line, just for kicks. And here’s a link. + Icons should be used rarely. They're good for warnings, but when paired with + long titles they look out of place.

+ ); diff --git a/ui_framework/doc_site/src/views/toast/success.js b/ui_framework/doc_site/src/views/toast/success.js index 6ed77c84173fa..a7b4560d503bc 100644 --- a/ui_framework/doc_site/src/views/toast/success.js +++ b/ui_framework/doc_site/src/views/toast/success.js @@ -1,27 +1,27 @@ import React from 'react'; import { - KuiLink, KuiText, KuiToast, } from '../../../../components'; export default () => (

- Here’s some stuff that you need to know. We can make this text really long so that, - when viewed within a browser that’s fairly narrow, it will wrap, too. + While the layout will adjust properly for wrapping titles, they don't look particularly good. + Similarily, don't use a whole lot of text in your body either. At a certain point people won't + have enough time to read these things. Like, you probably aren't even reading this now.

- And some other stuff on another line, just for kicks. And here’s a link. + You shouldn't even need a second paragraph. Again, we're getting long winded here.

diff --git a/ui_framework/doc_site/src/views/toast/toast_example.js b/ui_framework/doc_site/src/views/toast/toast_example.js index 4d6a21ff36d3c..931e621a37c34 100644 --- a/ui_framework/doc_site/src/views/toast/toast_example.js +++ b/ui_framework/doc_site/src/views/toast/toast_example.js @@ -6,6 +6,7 @@ import { GuideDemo, GuidePage, GuideSection, + GuideText, GuideSectionTypes, } from '../../components'; @@ -42,6 +43,16 @@ export default props => ( }]} > + +

+ Toasts are small notes that appear in the bottom right of the screen. They should be used for + emphemeral, live actions (think "save complete" or "something just finished right now"). They + should not be used for historical actions ("your report built 30 minutes ago"). This means that + a user should never be greated with toasts when starting a session. Toasts should be brief and + avoid long paragraphs of text or titling. +

+
+ diff --git a/ui_framework/doc_site/src/views/toast/warning.js b/ui_framework/doc_site/src/views/toast/warning.js index f0636dd519135..5fff502e4180f 100644 --- a/ui_framework/doc_site/src/views/toast/warning.js +++ b/ui_framework/doc_site/src/views/toast/warning.js @@ -1,28 +1,12 @@ import React from 'react'; import { - KuiLink, - KuiText, KuiToast, } from '../../../../components'; export default () => ( - -

- Here’s some stuff that you need to know. We can make this text really long so that, - when viewed within a browser that’s fairly narrow, it will wrap, too. -

- - - -

- And some other stuff on another line, just for kicks. And here’s a link. -

- - + /> ); diff --git a/ui_framework/src/components/toast/_global_toast_list.scss b/ui_framework/src/components/toast/_global_toast_list.scss index 214dd9d777e9a..91328ee272941 100644 --- a/ui_framework/src/components/toast/_global_toast_list.scss +++ b/ui_framework/src/components/toast/_global_toast_list.scss @@ -1,5 +1,7 @@ /** * 1. Allow list to expand as items are added, but cap it at the screen height. + * 2. Only show the scroll on hover. Generally, scrolling is bad for toasts. + * 3. Allow some padding if a scroll shows up. */ .kuiGlobalToastList { @include kuiScrollBar; @@ -11,15 +13,19 @@ z-index: $kuiZToastList; bottom: 0; right: 0; - width: 320px; - overflow-x: hidden; - overflow-y: scroll; + width: $kuiToastWidth + $kuiSize; /* 3 */ + padding-right: $kuiSize; max-height: 100vh; /* 1 */ + + &:hover { + overflow-y: auto; /* 2 */ + } } .kuiGlobalToastListItem { - margin-bottom: $kuiSizeM; - animation: 0.5s kuiShowToast; + margin-bottom: $kuiSize; + margin-right: $kuiSize; + animation: $kuiAnimSpeedNormal kuiShowToast $kuiAnimSlightResistance; opacity: 1; /** @@ -38,12 +44,12 @@ @keyframes kuiShowToast { from { - transform: translateX(30px); + transform: translateY($kuiSizeL) scale(.9); opacity: 0; } to { - transform: translateX(0); + transform: translateY(0) scale(1); opacity: 1; } } diff --git a/ui_framework/src/components/toast/_index.scss b/ui_framework/src/components/toast/_index.scss index 7d2197e77410d..c4b7876770dfb 100644 --- a/ui_framework/src/components/toast/_index.scss +++ b/ui_framework/src/components/toast/_index.scss @@ -1,2 +1,4 @@ +$kuiToastWidth: $kuiSize * 20; + @import 'global_toast_list'; @import 'toast'; diff --git a/ui_framework/src/components/toast/_toast.scss b/ui_framework/src/components/toast/_toast.scss index f46211d2516df..56203d5ca9653 100644 --- a/ui_framework/src/components/toast/_toast.scss +++ b/ui_framework/src/components/toast/_toast.scss @@ -2,9 +2,14 @@ @include kuiBottomShadow; position: relative; - padding: $kuiSizeM; + padding: $kuiSize; background-color: $kuiColorEmptyShade; border: $kuiBorderThin; + width: $kuiToastWidth; + + &:hover .kuiToast__closeButton { + opacity: 1; + } } /** @@ -12,10 +17,12 @@ */ .kuiToast__closeButton { position: absolute; - top: $kuiSizeXS; - right: $kuiSizeXS; + top: $kuiSize; + right: $kuiSize; line-height: 0; /* 1 */ appearance: none; + opacity: 0; + transition: opacity $kuiAnimSpeedFast $kuiAnimSlightResistance; svg { fill: tintOrShade($kuiTitleColor, 50%, 70%); @@ -54,9 +61,11 @@ $toastTypes: ( /** * 1. Align icon with first line of title text if it wraps. * 2. Apply margin to all but last item in the flex. + * 3. Account for close button. */ .kuiToastHeader { @include kuiFontSizeM; + padding-right: $kuiSizeL; /* 3 */ display: flex; align-items: baseline; /* 1 */ @@ -81,5 +90,5 @@ $toastTypes: ( } .kuiToastHeader--withBody { - margin-bottom: $kuiVerticalRhythmS; + margin-bottom: $kuiSizeM; } From c45869bdef0a6d591a9f27a9f16687ba7ddf1da9 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Fri, 11 Aug 2017 11:06:15 -0700 Subject: [PATCH 2/6] make toasts work responsively, clean up animation and documentation --- ui_framework/dist/ui_framework_theme_light.css | 18 ++++++++++++++++++ .../components/toast/_global_toast_list.scss | 12 ++++++++++++ ui_framework/src/components/toast/_toast.scss | 9 +++++++++ 3 files changed, 39 insertions(+) diff --git a/ui_framework/dist/ui_framework_theme_light.css b/ui_framework/dist/ui_framework_theme_light.css index 39e5b46182d52..3b1d18e63275b 100644 --- a/ui_framework/dist/ui_framework_theme_light.css +++ b/ui_framework/dist/ui_framework_theme_light.css @@ -2115,6 +2115,16 @@ table { transform: translateY(0) scale(1); opacity: 1; } } +@media only screen and (max-width: 768px) { + /** + * 1. Mobile we make these 100%. Matching change happens on the item as well. + */ + .kuiGlobalToastList { + left: 0; + padding-left: 16px; + width: 100%; + /* 1 */ } } + .kuiToast { box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1); position: relative; @@ -2204,6 +2214,14 @@ table { .kuiToastHeader--withBody { margin-bottom: 12px; } +@media only screen and (max-width: 768px) { + /** + * 1. Mobile we make these 100%. Matching change happens on the list as well. + */ + .kuiToast { + width: 100%; + /* 1 */ } } + .kuiTitle { font-size: 24px; font-size: 1.5rem; diff --git a/ui_framework/src/components/toast/_global_toast_list.scss b/ui_framework/src/components/toast/_global_toast_list.scss index 91328ee272941..e84db26945804 100644 --- a/ui_framework/src/components/toast/_global_toast_list.scss +++ b/ui_framework/src/components/toast/_global_toast_list.scss @@ -53,3 +53,15 @@ opacity: 1; } } + +@include screenXSmall { + /** + * 1. Mobile we make these 100%. Matching change happens on the item as well. + */ + .kuiGlobalToastList { + left: 0; + padding-left: $kuiSize; + width: 100%; /* 1 */ + } +} + diff --git a/ui_framework/src/components/toast/_toast.scss b/ui_framework/src/components/toast/_toast.scss index 56203d5ca9653..750799e467912 100644 --- a/ui_framework/src/components/toast/_toast.scss +++ b/ui_framework/src/components/toast/_toast.scss @@ -92,3 +92,12 @@ $toastTypes: ( .kuiToastHeader--withBody { margin-bottom: $kuiSizeM; } + +@include screenXSmall { + /** + * 1. Mobile we make these 100%. Matching change happens on the list as well. + */ + .kuiToast { + width: 100%; /* 1 */ + } +} From 30d998375df9d2d625263529c65bc95bab83e8a9 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Fri, 11 Aug 2017 11:20:25 -0700 Subject: [PATCH 3/6] remove flex sizing on kui guide wrapper so responsive checks work --- ui_framework/doc_site/src/components/guide/_guide.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/ui_framework/doc_site/src/components/guide/_guide.scss b/ui_framework/doc_site/src/components/guide/_guide.scss index b366f6da7317d..19ea433f4c2d1 100644 --- a/ui_framework/doc_site/src/components/guide/_guide.scss +++ b/ui_framework/doc_site/src/components/guide/_guide.scss @@ -2,12 +2,7 @@ height: 100%; } -/** - * 1. Expand container to fit the page if the content is shorter than the page, or expand with the - * content if it's taller than the page. - */ .guide { - display: flex; min-height: 100%; /* 1 */ } From 42a3dbd5d001e129c06ebf7fca1ba458b6690ac7 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Mon, 14 Aug 2017 10:51:27 -0700 Subject: [PATCH 4/6] address feedback --- .../dist/ui_framework_theme_light.css | 13 +++--------- .../doc_site/src/views/toast/toast_example.js | 20 ++++++++++++++----- ui_framework/src/components/toast/_toast.scss | 14 +++---------- 3 files changed, 21 insertions(+), 26 deletions(-) diff --git a/ui_framework/dist/ui_framework_theme_light.css b/ui_framework/dist/ui_framework_theme_light.css index 3b1d18e63275b..c70e4b182acb1 100644 --- a/ui_framework/dist/ui_framework_theme_light.css +++ b/ui_framework/dist/ui_framework_theme_light.css @@ -2131,8 +2131,9 @@ table { padding: 16px; background-color: #FFF; border: 1px solid #D9D9D9; - width: 320px; } - .kuiToast:hover .kuiToast__closeButton { + width: 100%; } + .kuiToast:hover .kuiToast__closeButton, + .kuiToast:focus .kuiToast__closeButton { opacity: 1; } /** @@ -2214,14 +2215,6 @@ table { .kuiToastHeader--withBody { margin-bottom: 12px; } -@media only screen and (max-width: 768px) { - /** - * 1. Mobile we make these 100%. Matching change happens on the list as well. - */ - .kuiToast { - width: 100%; - /* 1 */ } } - .kuiTitle { font-size: 24px; font-size: 1.5rem; diff --git a/ui_framework/doc_site/src/views/toast/toast_example.js b/ui_framework/doc_site/src/views/toast/toast_example.js index 931e621a37c34..889014e2d7f47 100644 --- a/ui_framework/doc_site/src/views/toast/toast_example.js +++ b/ui_framework/doc_site/src/views/toast/toast_example.js @@ -53,7 +53,9 @@ export default props => (


- +
+ +
@@ -68,7 +70,9 @@ export default props => ( }]} > - +
+ +
@@ -83,7 +87,9 @@ export default props => ( }]} > - +
+ +
@@ -98,7 +104,9 @@ export default props => ( }]} > - +
+ +
@@ -113,7 +121,9 @@ export default props => ( }]} > - +
+ +
diff --git a/ui_framework/src/components/toast/_toast.scss b/ui_framework/src/components/toast/_toast.scss index 750799e467912..6404cb4c76521 100644 --- a/ui_framework/src/components/toast/_toast.scss +++ b/ui_framework/src/components/toast/_toast.scss @@ -5,9 +5,10 @@ padding: $kuiSize; background-color: $kuiColorEmptyShade; border: $kuiBorderThin; - width: $kuiToastWidth; + width: 100%; - &:hover .kuiToast__closeButton { + &:hover .kuiToast__closeButton, + &:focus .kuiToast__closeButton, { opacity: 1; } } @@ -92,12 +93,3 @@ $toastTypes: ( .kuiToastHeader--withBody { margin-bottom: $kuiSizeM; } - -@include screenXSmall { - /** - * 1. Mobile we make these 100%. Matching change happens on the list as well. - */ - .kuiToast { - width: 100%; /* 1 */ - } -} From da49181287db3fb617c12d6c3441a7b2c8c397a5 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Mon, 14 Aug 2017 11:05:02 -0700 Subject: [PATCH 5/6] update dark theme css with toast stuff --- ui_framework/dist/ui_framework_theme_dark.css | 65 +++++++++++++------ 1 file changed, 45 insertions(+), 20 deletions(-) diff --git a/ui_framework/dist/ui_framework_theme_dark.css b/ui_framework/dist/ui_framework_theme_dark.css index 7e76a5876e99b..eedbc9238a830 100644 --- a/ui_framework/dist/ui_framework_theme_dark.css +++ b/ui_framework/dist/ui_framework_theme_dark.css @@ -2039,6 +2039,8 @@ table { /** * 1. Allow list to expand as items are added, but cap it at the screen height. + * 2. Only show the scroll on hover. Generally, scrolling is bad for toasts. + * 3. Allow some padding if a scroll shows up. */ .kuiGlobalToastList { display: -webkit-box; @@ -2058,9 +2060,9 @@ table { z-index: 5000; bottom: 0; right: 0; - width: 320px; - overflow-x: hidden; - overflow-y: scroll; + width: 336px; + /* 3 */ + padding-right: 16px; max-height: 100vh; /* 1 */ } .kuiGlobalToastList::-webkit-scrollbar { @@ -2072,11 +2074,15 @@ table { background-clip: content-box; } .kuiGlobalToastList::-webkit-scrollbar-track { background-color: transparent; } + .kuiGlobalToastList:hover { + overflow-y: auto; + /* 2 */ } .kuiGlobalToastListItem { - margin-bottom: 12px; - -webkit-animation: 0.5s kuiShowToast; - animation: 0.5s kuiShowToast; + margin-bottom: 16px; + margin-right: 16px; + -webkit-animation: 250ms kuiShowToast cubic-bezier(0.694, 0.0482, 0.335, 1); + animation: 250ms kuiShowToast cubic-bezier(0.694, 0.0482, 0.335, 1); opacity: 1; /** * 1. justify-content: flex-end interferes with overflowing content, so we'll use this to push @@ -2091,43 +2097,59 @@ table { @-webkit-keyframes kuiShowToast { from { - -webkit-transform: translateX(30px); - transform: translateX(30px); + -webkit-transform: translateY(24px) scale(0.9); + transform: translateY(24px) scale(0.9); opacity: 0; } to { - -webkit-transform: translateX(0); - transform: translateX(0); + -webkit-transform: translateY(0) scale(1); + transform: translateY(0) scale(1); opacity: 1; } } @keyframes kuiShowToast { from { - -webkit-transform: translateX(30px); - transform: translateX(30px); + -webkit-transform: translateY(24px) scale(0.9); + transform: translateY(24px) scale(0.9); opacity: 0; } to { - -webkit-transform: translateX(0); - transform: translateX(0); + -webkit-transform: translateY(0) scale(1); + transform: translateY(0) scale(1); opacity: 1; } } +@media only screen and (max-width: 768px) { + /** + * 1. Mobile we make these 100%. Matching change happens on the item as well. + */ + .kuiGlobalToastList { + left: 0; + padding-left: 16px; + width: 100%; + /* 1 */ } } + .kuiToast { box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1); position: relative; - padding: 12px; + padding: 16px; background-color: #222; - border: 1px solid #444; } + border: 1px solid #444; + width: 100%; } + .kuiToast:hover .kuiToast__closeButton, + .kuiToast:focus .kuiToast__closeButton { + opacity: 1; } /** * 1. Fit button to icon. */ .kuiToast__closeButton { position: absolute; - top: 4px; - right: 4px; + top: 16px; + right: 16px; line-height: 0; /* 1 */ -webkit-appearance: none; -moz-appearance: none; - appearance: none; } + appearance: none; + opacity: 0; + transition: opacity 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); } .kuiToast__closeButton svg { fill: #4d4d4d; } .kuiToast__closeButton:hover svg { @@ -2152,11 +2174,14 @@ table { /** * 1. Align icon with first line of title text if it wraps. * 2. Apply margin to all but last item in the flex. + * 3. Account for close button. */ .kuiToastHeader { font-size: 16px; font-size: 1rem; line-height: 24px; + padding-right: 24px; + /* 3 */ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2188,7 +2213,7 @@ table { font-weight: 300; } .kuiToastHeader--withBody { - margin-bottom: 9px; } + margin-bottom: 12px; } .kuiTitle { font-size: 24px; From a28101c988f272da16e82377b154ecd5921fdf10 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Mon, 14 Aug 2017 15:19:22 -0700 Subject: [PATCH 6/6] fix opacity bug in toasts --- ui_framework/dist/ui_framework_theme_dark.css | 3 ++- ui_framework/dist/ui_framework_theme_light.css | 3 ++- ui_framework/src/components/toast/_toast.scss | 1 + 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/ui_framework/dist/ui_framework_theme_dark.css b/ui_framework/dist/ui_framework_theme_dark.css index eedbc9238a830..a8e3d93d7e77b 100644 --- a/ui_framework/dist/ui_framework_theme_dark.css +++ b/ui_framework/dist/ui_framework_theme_dark.css @@ -2155,7 +2155,8 @@ table { .kuiToast__closeButton:hover svg { fill: #FFF; } .kuiToast__closeButton:focus { - background-color: #275160; } + background-color: #275160; + opacity: 1; } .kuiToast__closeButton:focus svg { fill: #4da1c0; } diff --git a/ui_framework/dist/ui_framework_theme_light.css b/ui_framework/dist/ui_framework_theme_light.css index c70e4b182acb1..1237453bc1f39 100644 --- a/ui_framework/dist/ui_framework_theme_light.css +++ b/ui_framework/dist/ui_framework_theme_light.css @@ -2155,7 +2155,8 @@ table { .kuiToast__closeButton:hover svg { fill: #000; } .kuiToast__closeButton:focus { - background-color: #e6f2f6; } + background-color: #e6f2f6; + opacity: 1; } .kuiToast__closeButton:focus svg { fill: #0079a5; } diff --git a/ui_framework/src/components/toast/_toast.scss b/ui_framework/src/components/toast/_toast.scss index 6404cb4c76521..d561031607e7d 100644 --- a/ui_framework/src/components/toast/_toast.scss +++ b/ui_framework/src/components/toast/_toast.scss @@ -37,6 +37,7 @@ &:focus { background-color: $kuiFocusBackgroundColor; + opacity: 1; svg { fill: $kuiColorPrimary;