From 570adff2844c49dd94f714155c02b2e7ee0917b5 Mon Sep 17 00:00:00 2001 From: Ian McBurnie Date: Tue, 5 Jan 2021 19:50:22 -0800 Subject: [PATCH] Keyboard focus indicator changes #1321 --- dist/breadcrumbs/ds4/breadcrumbs.css | 9 ++++++ dist/breadcrumbs/ds6/breadcrumbs.css | 9 ++++++ dist/button/ds4/button.css | 9 ++++++ dist/button/ds6/button.css | 9 ++++++ dist/carousel/ds4/carousel.css | 14 +++++++++ dist/carousel/ds6/carousel.css | 14 +++++++++ dist/checkbox/ds4/checkbox.css | 10 ++++-- dist/checkbox/ds6/checkbox.css | 10 ++++-- dist/cta-button/ds4/cta-button.css | 7 +++++ dist/cta-button/ds6/cta-button.css | 7 +++++ dist/details/ds4/details.css | 6 ++++ dist/details/ds6/details.css | 6 ++++ dist/drawer-dialog/ds4/drawer-dialog.css | 6 ++++ dist/drawer-dialog/ds6/drawer-dialog.css | 6 ++++ dist/expand-button/ds4/expand-button.css | 7 +++++ dist/expand-button/ds6/expand-button.css | 7 +++++ dist/filter-button/ds4/filter-button.css | 11 +++++++ dist/filter-button/ds6/filter-button.css | 11 +++++++ dist/global/ds4/global.css | 4 +++ dist/global/ds6/global.css | 4 +++ dist/icon-button/ds4/icon-button.css | 8 +++++ dist/icon-button/ds6/icon-button.css | 8 +++++ dist/listbox-button/ds4/listbox-button.css | 6 ++++ dist/listbox-button/ds6/listbox-button.css | 6 ++++ dist/listbox/ds4/listbox.css | 6 ++++ dist/listbox/ds6/listbox.css | 6 ++++ dist/menu-button/ds4/menu-button.css | 6 ++++ dist/menu-button/ds6/menu-button.css | 6 ++++ dist/menu/ds4/menu.css | 6 ++++ dist/menu/ds6/menu.css | 6 ++++ dist/mixins/button/base/button-mixins.less | 10 ++++++ .../mixins/carousel/base/carousel-mixins.less | 10 ++++++ dist/pagination/ds4/pagination.css | 9 ++++++ dist/pagination/ds6/pagination.css | 9 ++++++ dist/radio/ds4/radio.css | 10 ++++-- dist/radio/ds6/radio.css | 10 ++++-- dist/select/ds4/select.css | 9 ++++-- dist/select/ds6/select.css | 9 ++++-- dist/switch/ds4/switch.css | 23 ++++++++++---- dist/switch/ds6/switch.css | 23 ++++++++++---- dist/tabs/ds4/tabs.css | 8 +++++ dist/tabs/ds6/tabs.css | 8 +++++ dist/toast-dialog/ds4/toast-dialog.css | 10 +++--- dist/toast-dialog/ds6/toast-dialog.css | 10 +++--- dist/variables/ds4/checkbox-variables.less | 2 +- dist/variables/ds4/radio-variables.less | 2 +- dist/variables/ds6/checkbox-variables.less | 2 +- dist/variables/ds6/radio-variables.less | 2 +- docs/src/less/base/index.less | 2 +- docs/static/ds4/docs.min.css | 2 +- docs/static/ds6/docs.min.css | 2 +- src/less/breadcrumbs/base/breadcrumbs.less | 10 ++++++ src/less/carousel/base/carousel.less | 9 ++++++ src/less/checkbox/base/checkbox.less | 14 ++++++--- src/less/details/base/details.less | 9 ++++++ .../drawer-dialog/base/drawer-dialog.less | 8 +++++ .../filter-button/base/filter-button.less | 15 +++++++++ src/less/global/base/global.less | 5 +++ src/less/icon-button/base/icon-button.less | 9 ++++++ .../listbox-button/base/listbox-button.less | 9 ++++++ src/less/listbox/base/listbox.less | 9 ++++++ src/less/menu-button/base/menu-button.less | 9 ++++++ src/less/menu/base/menu.less | 9 ++++++ .../mixins/button/base/button-mixins.less | 10 ++++++ .../mixins/carousel/base/carousel-mixins.less | 10 ++++++ src/less/pagination/base/pagination.less | 11 +++++++ src/less/radio/base/radio.less | 14 ++++++--- src/less/select/base/select.less | 11 ++++--- src/less/switch/base/switch.less | 31 ++++++++++++++----- src/less/tabs/base/tabs.less | 10 ++++++ src/less/toast-dialog/base/toast-dialog.less | 5 +-- .../variables/ds4/checkbox-variables.less | 2 +- src/less/variables/ds4/radio-variables.less | 2 +- .../variables/ds6/checkbox-variables.less | 2 +- src/less/variables/ds6/radio-variables.less | 2 +- 75 files changed, 552 insertions(+), 75 deletions(-) diff --git a/dist/breadcrumbs/ds4/breadcrumbs.css b/dist/breadcrumbs/ds4/breadcrumbs.css index 43279708dd..bfabaa9c7f 100644 --- a/dist/breadcrumbs/ds4/breadcrumbs.css +++ b/dist/breadcrumbs/ds4/breadcrumbs.css @@ -58,6 +58,15 @@ nav.breadcrumbs button[aria-current] { color: var(--breadcrumbs-item-current-foreground-color, #767676); text-decoration: none; } +nav.breadcrumbs a:focus, +nav.breadcrumbs button:focus { + outline: 1px auto #767676; + outline-offset: 1px; +} +nav.breadcrumbs a:focus:not(:focus-visible), +nav.breadcrumbs button:focus:not(:focus-visible) { + outline: none; +} @media (min-width: 601px) { nav.breadcrumbs { margin: 16px 0; diff --git a/dist/breadcrumbs/ds6/breadcrumbs.css b/dist/breadcrumbs/ds6/breadcrumbs.css index 2adfefe0d4..4d34a3acd5 100644 --- a/dist/breadcrumbs/ds6/breadcrumbs.css +++ b/dist/breadcrumbs/ds6/breadcrumbs.css @@ -65,6 +65,15 @@ nav.breadcrumbs button[aria-current] { color: var(--breadcrumbs-item-current-foreground-color, #767676); text-decoration: none; } +nav.breadcrumbs a:focus, +nav.breadcrumbs button:focus { + outline: 1px auto #767676; + outline-offset: 1px; +} +nav.breadcrumbs a:focus:not(:focus-visible), +nav.breadcrumbs button:focus:not(:focus-visible) { + outline: none; +} @media (min-width: 601px) { nav.breadcrumbs { margin: 16px 0; diff --git a/dist/button/ds4/button.css b/dist/button/ds4/button.css index 896ea6f451..6d242dca0b 100644 --- a/dist/button/ds4/button.css +++ b/dist/button/ds4/button.css @@ -38,6 +38,15 @@ a.fake-btn--truncated span { text-overflow: ellipsis; white-space: nowrap; } +button.btn:focus, +a.fake-btn:focus { + outline: 1px auto #767676; + outline-offset: 2px; +} +button.btn:focus:not(:focus-visible), +a.fake-btn:focus:not(:focus-visible) { + outline: none; +} button.btn--wide, a.fake-btn--wide { padding-left: 48px; diff --git a/dist/button/ds6/button.css b/dist/button/ds6/button.css index 00ebea9fc1..7604faf478 100644 --- a/dist/button/ds6/button.css +++ b/dist/button/ds6/button.css @@ -59,6 +59,15 @@ a.fake-btn--truncated span { text-overflow: ellipsis; white-space: nowrap; } +button.btn:focus, +a.fake-btn:focus { + outline: 1px auto #767676; + outline-offset: 2px; +} +button.btn:focus:not(:focus-visible), +a.fake-btn:focus:not(:focus-visible) { + outline: none; +} button.btn--wide, a.fake-btn--wide { padding-left: 48px; diff --git a/dist/carousel/ds4/carousel.css b/dist/carousel/ds4/carousel.css index 36a70f8a7e..b93bf5355d 100644 --- a/dist/carousel/ds4/carousel.css +++ b/dist/carousel/ds4/carousel.css @@ -118,6 +118,13 @@ div.carousel { color: #333; color: var(--carousel-paddle-foreground-color, #333); } +.carousel__control:focus { + outline: 1px auto #767676; + outline-offset: 2px; +} +.carousel__control:focus:not(:focus-visible) { + outline: none; +} @media (min-width: 601px) { .carousel:focus-within .carousel__control { opacity: 0.92; @@ -152,6 +159,13 @@ div.carousel { .carousel__control:active { background-color: #333; } +.carousel__playback:focus { + outline: 1px auto #767676; + outline-offset: 1px; +} +.carousel__playback:focus:not(:focus-visible) { + outline: none; +} span.carousel, span.carousel__container { display: inline-block; diff --git a/dist/carousel/ds6/carousel.css b/dist/carousel/ds6/carousel.css index 92db59f54d..2f479d96e0 100644 --- a/dist/carousel/ds6/carousel.css +++ b/dist/carousel/ds6/carousel.css @@ -126,6 +126,13 @@ div.carousel { color: #111820; color: var(--carousel-paddle-foreground-color, #111820); } +.carousel__control:focus { + outline: 1px auto #767676; + outline-offset: 2px; +} +.carousel__control:focus:not(:focus-visible) { + outline: none; +} @media (min-width: 601px) { .carousel:focus-within .carousel__control { opacity: 0.92; @@ -160,6 +167,13 @@ div.carousel { .carousel__control:active { background-color: #414141; } +.carousel__playback:focus { + outline: 1px auto #767676; + outline-offset: 1px; +} +.carousel__playback:focus:not(:focus-visible) { + outline: none; +} span.carousel, span.carousel__container { display: inline-block; diff --git a/dist/checkbox/ds4/checkbox.css b/dist/checkbox/ds4/checkbox.css index 8a9d5a5829..8580ac05d1 100644 --- a/dist/checkbox/ds4/checkbox.css +++ b/dist/checkbox/ds4/checkbox.css @@ -65,12 +65,16 @@ input.checkbox__control[type="checkbox"]:checked + span.checkbox__icon svg.check input.checkbox__control[type="checkbox"]:checked + span.checkbox__icon svg.checkbox__unchecked { display: none; } -input.checkbox__control[type="checkbox"]:focus + span.checkbox__icon { - outline: 1px dotted #767676; -} input.checkbox__control[type="checkbox"][disabled] + span.checkbox__icon { opacity: 1; } input.checkbox__control[type="checkbox"][disabled] + span.checkbox__icon svg { fill: #ccc; } +input.checkbox__control[type="checkbox"]:focus + span.checkbox__icon { + outline: 1px auto #767676; + outline-offset: 2px; +} +input.checkbox__control[type="checkbox"]:focus:not(:focus-visible) + span.checkbox__icon { + outline: none; +} diff --git a/dist/checkbox/ds6/checkbox.css b/dist/checkbox/ds6/checkbox.css index fbf8f43853..a683694f0a 100644 --- a/dist/checkbox/ds6/checkbox.css +++ b/dist/checkbox/ds6/checkbox.css @@ -71,12 +71,16 @@ input.checkbox__control[type="checkbox"]:checked + span.checkbox__icon svg.check input.checkbox__control[type="checkbox"]:checked + span.checkbox__icon svg.checkbox__unchecked { display: none; } -input.checkbox__control[type="checkbox"]:focus + span.checkbox__icon { - outline: 1px dotted #767676; -} input.checkbox__control[type="checkbox"][disabled] + span.checkbox__icon { opacity: 1; } input.checkbox__control[type="checkbox"][disabled] + span.checkbox__icon svg { fill: #c7c7c7; } +input.checkbox__control[type="checkbox"]:focus + span.checkbox__icon { + outline: 1px auto #767676; + outline-offset: 2px; +} +input.checkbox__control[type="checkbox"]:focus:not(:focus-visible) + span.checkbox__icon { + outline: none; +} diff --git a/dist/cta-button/ds4/cta-button.css b/dist/cta-button/ds4/cta-button.css index 0289ec07f9..fe90948b26 100644 --- a/dist/cta-button/ds4/cta-button.css +++ b/dist/cta-button/ds4/cta-button.css @@ -33,6 +33,13 @@ a.cta-btn--truncated span { text-overflow: ellipsis; white-space: nowrap; } +a.cta-btn:focus { + outline: 1px auto #767676; + outline-offset: 2px; +} +a.cta-btn:focus:not(:focus-visible) { + outline: none; +} a.cta-btn:visited { color: #333; color: var(--cta-button-visited-foreground-color, #333); diff --git a/dist/cta-button/ds6/cta-button.css b/dist/cta-button/ds6/cta-button.css index 4b00a09340..5a91fd6d86 100644 --- a/dist/cta-button/ds6/cta-button.css +++ b/dist/cta-button/ds6/cta-button.css @@ -43,6 +43,13 @@ a.cta-btn--truncated span { text-overflow: ellipsis; white-space: nowrap; } +a.cta-btn:focus { + outline: 1px auto #767676; + outline-offset: 2px; +} +a.cta-btn:focus:not(:focus-visible) { + outline: none; +} a.cta-btn:visited { color: #111820; color: var(--cta-button-visited-foreground-color, #111820); diff --git a/dist/details/ds4/details.css b/dist/details/ds4/details.css index 947e9700b9..033934a6a9 100644 --- a/dist/details/ds4/details.css +++ b/dist/details/ds4/details.css @@ -43,3 +43,9 @@ details.details[open] span.details__icon { details.details[open] summary.details__summary::before { content: none; } +details.details summary:focus { + outline: 1px auto #767676; +} +details.details summary:focus:not(:focus-visible) { + outline: none; +} diff --git a/dist/details/ds6/details.css b/dist/details/ds6/details.css index 1aa0f5eb17..3792381ff6 100644 --- a/dist/details/ds6/details.css +++ b/dist/details/ds6/details.css @@ -48,3 +48,9 @@ details.details[open] span.details__icon { details.details[open] summary.details__summary::before { content: none; } +details.details summary:focus { + outline: 1px auto #767676; +} +details.details summary:focus:not(:focus-visible) { + outline: none; +} diff --git a/dist/drawer-dialog/ds4/drawer-dialog.css b/dist/drawer-dialog/ds4/drawer-dialog.css index d50f00aee3..f4c602d6da 100644 --- a/dist/drawer-dialog/ds4/drawer-dialog.css +++ b/dist/drawer-dialog/ds4/drawer-dialog.css @@ -185,3 +185,9 @@ button.drawer-dialog__close { -webkit-transform: translateX(0); transform: translateX(0); } +.drawer-dialog__handle:focus { + outline: 1px auto #767676; +} +.drawer-dialog__handle:focus:not(:focus-visible) { + outline: none; +} diff --git a/dist/drawer-dialog/ds6/drawer-dialog.css b/dist/drawer-dialog/ds6/drawer-dialog.css index 88c1430048..6c52e39c19 100644 --- a/dist/drawer-dialog/ds6/drawer-dialog.css +++ b/dist/drawer-dialog/ds6/drawer-dialog.css @@ -190,3 +190,9 @@ button.drawer-dialog__close { -webkit-transform: translateX(0); transform: translateX(0); } +.drawer-dialog__handle:focus { + outline: 1px auto #767676; +} +.drawer-dialog__handle:focus:not(:focus-visible) { + outline: none; +} diff --git a/dist/expand-button/ds4/expand-button.css b/dist/expand-button/ds4/expand-button.css index ca38f1acbb..0905b93136 100644 --- a/dist/expand-button/ds4/expand-button.css +++ b/dist/expand-button/ds4/expand-button.css @@ -31,6 +31,13 @@ button.expand-btn--truncated span { text-overflow: ellipsis; white-space: nowrap; } +button.expand-btn:focus { + outline: 1px auto #767676; + outline-offset: 2px; +} +button.expand-btn:focus:not(:focus-visible) { + outline: none; +} button.expand-btn:hover, button.expand-btn:focus { border-color: #00489f; diff --git a/dist/expand-button/ds6/expand-button.css b/dist/expand-button/ds6/expand-button.css index e92aaa4f5a..ee002b1b9a 100644 --- a/dist/expand-button/ds6/expand-button.css +++ b/dist/expand-button/ds6/expand-button.css @@ -51,6 +51,13 @@ button.expand-btn--truncated span { text-overflow: ellipsis; white-space: nowrap; } +button.expand-btn:focus { + outline: 1px auto #767676; + outline-offset: 2px; +} +button.expand-btn:focus:not(:focus-visible) { + outline: none; +} button.expand-btn:hover, button.expand-btn:focus { border-color: #2b0eaf; diff --git a/dist/filter-button/ds4/filter-button.css b/dist/filter-button/ds4/filter-button.css index 177eb173d5..afae96cc5f 100644 --- a/dist/filter-button/ds4/filter-button.css +++ b/dist/filter-button/ds4/filter-button.css @@ -116,3 +116,14 @@ a.filter-link--selected:not([href]):hover, a.filter-link--selected[aria-disabled="true"]:hover { background-color: #dbeafe; } +/* stylelint-disable no-descending-specificity */ +button.filter-button:focus, +a.filter-link:focus { + outline: 1px auto #767676; + outline-offset: 2px; +} +button.filter-button:focus:not(:focus-visible), +a.filter-link:focus:not(:focus-visible) { + outline: none; +} +/* stylelint-enable no-descending-specificity */ diff --git a/dist/filter-button/ds6/filter-button.css b/dist/filter-button/ds6/filter-button.css index 11bc5f61c0..2151127095 100644 --- a/dist/filter-button/ds6/filter-button.css +++ b/dist/filter-button/ds6/filter-button.css @@ -127,3 +127,14 @@ a.filter-link--selected:not([href]):hover, a.filter-link--selected[aria-disabled="true"]:hover { background-color: #e1e8fd; } +/* stylelint-disable no-descending-specificity */ +button.filter-button:focus, +a.filter-link:focus { + outline: 1px auto #767676; + outline-offset: 2px; +} +button.filter-button:focus:not(:focus-visible), +a.filter-link:focus:not(:focus-visible) { + outline: none; +} +/* stylelint-enable no-descending-specificity */ diff --git a/dist/global/ds4/global.css b/dist/global/ds4/global.css index c89a4ea5ab..18525a3ecb 100644 --- a/dist/global/ds4/global.css +++ b/dist/global/ds4/global.css @@ -26,3 +26,7 @@ a:hover { color: #00489f; color: var(--color-link-hover, #00489f); } +a:focus { + outline: 1px auto #767676; + outline-offset: 2px; +} diff --git a/dist/global/ds6/global.css b/dist/global/ds6/global.css index 0d245c8ec8..546d262a12 100644 --- a/dist/global/ds6/global.css +++ b/dist/global/ds6/global.css @@ -26,3 +26,7 @@ a:hover { color: #2b0eaf; color: var(--color-link-hover, #2b0eaf); } +a:focus { + outline: 1px auto #767676; + outline-offset: 2px; +} diff --git a/dist/icon-button/ds4/icon-button.css b/dist/icon-button/ds4/icon-button.css index 927610469c..81e8671da2 100644 --- a/dist/icon-button/ds4/icon-button.css +++ b/dist/icon-button/ds4/icon-button.css @@ -101,3 +101,11 @@ button.img-btn:not([disabled]):focus { button.img-btn:not([disabled]):active { border-color: #767676; } +button.icon-btn:focus, +a.icon-link:focus { + outline: 1px auto #767676; +} +button.icon-btn:focus:not(:focus-visible), +a.icon-link:focus:not(:focus-visible) { + outline: none; +} diff --git a/dist/icon-button/ds6/icon-button.css b/dist/icon-button/ds6/icon-button.css index a3547a80ec..6d6df910f5 100644 --- a/dist/icon-button/ds6/icon-button.css +++ b/dist/icon-button/ds6/icon-button.css @@ -110,3 +110,11 @@ button.img-btn:not([disabled]):focus { button.img-btn:not([disabled]):active { border-color: #767676; } +button.icon-btn:focus, +a.icon-link:focus { + outline: 1px auto #767676; +} +button.icon-btn:focus:not(:focus-visible), +a.icon-link:focus:not(:focus-visible) { + outline: none; +} diff --git a/dist/listbox-button/ds4/listbox-button.css b/dist/listbox-button/ds4/listbox-button.css index ebaeb8bb9c..2d0d3626c1 100644 --- a/dist/listbox-button/ds4/listbox-button.css +++ b/dist/listbox-button/ds4/listbox-button.css @@ -136,3 +136,9 @@ span.listbox-button__value { -webkit-box-flex: 1; flex: 1 0 auto; } +.listbox-button__options:focus { + outline: 1px auto #767676; +} +.listbox-button__options:focus:not(:focus-visible) { + outline: none; +} diff --git a/dist/listbox-button/ds6/listbox-button.css b/dist/listbox-button/ds6/listbox-button.css index 80a3890bbd..c750fdc137 100644 --- a/dist/listbox-button/ds6/listbox-button.css +++ b/dist/listbox-button/ds6/listbox-button.css @@ -146,3 +146,9 @@ span.listbox-button__value { -webkit-box-flex: 1; flex: 1 0 auto; } +.listbox-button__options:focus { + outline: 1px auto #767676; +} +.listbox-button__options:focus:not(:focus-visible) { + outline: none; +} diff --git a/dist/listbox/ds4/listbox.css b/dist/listbox/ds4/listbox.css index 0548885512..d5dc820410 100644 --- a/dist/listbox/ds4/listbox.css +++ b/dist/listbox/ds4/listbox.css @@ -94,3 +94,9 @@ div.listbox__option[role="option"]:active svg.icon { color: #ccc; color: var(--dropdown-item-active-status-color, #ccc); } +.listbox__options:focus { + outline: 1px auto #767676; +} +.listbox__options:focus:not(:focus-visible) { + outline: none; +} diff --git a/dist/listbox/ds6/listbox.css b/dist/listbox/ds6/listbox.css index fd88b7d1db..ff875cd1f1 100644 --- a/dist/listbox/ds6/listbox.css +++ b/dist/listbox/ds6/listbox.css @@ -104,3 +104,9 @@ div.listbox__option[role="option"]:active svg.icon { color: #fff; color: var(--dropdown-item-active-status-color, #fff); } +.listbox__options:focus { + outline: 1px auto #767676; +} +.listbox__options:focus:not(:focus-visible) { + outline: none; +} diff --git a/dist/menu-button/ds4/menu-button.css b/dist/menu-button/ds4/menu-button.css index 6a185f8fff..15ff5e33cb 100644 --- a/dist/menu-button/ds4/menu-button.css +++ b/dist/menu-button/ds4/menu-button.css @@ -265,3 +265,9 @@ hr.menu-button__separator { border-width: 1px; margin: 0; } +div.menu-button__item[role^="menuitem"]:focus { + outline: 1px auto #767676; +} +div.menu-button__item[role^="menuitem"]:focus:not(:focus-visible) { + outline: none; +} diff --git a/dist/menu-button/ds6/menu-button.css b/dist/menu-button/ds6/menu-button.css index 3b8afde06a..a2b886a828 100644 --- a/dist/menu-button/ds6/menu-button.css +++ b/dist/menu-button/ds6/menu-button.css @@ -274,3 +274,9 @@ hr.menu-button__separator { border-width: 1px; margin: 0; } +div.menu-button__item[role^="menuitem"]:focus { + outline: 1px auto #767676; +} +div.menu-button__item[role^="menuitem"]:focus:not(:focus-visible) { + outline: none; +} diff --git a/dist/menu/ds4/menu.css b/dist/menu/ds4/menu.css index bdc7da44b4..9ec05a9aa6 100644 --- a/dist/menu/ds4/menu.css +++ b/dist/menu/ds4/menu.css @@ -169,3 +169,9 @@ hr.menu__separator { border-style: solid; border-width: 1px; } +div.menu__item[role^="menuitem"]:focus { + outline: 1px auto #767676; +} +div.menu__item[role^="menuitem"]:focus:not(:focus-visible) { + outline: none; +} diff --git a/dist/menu/ds6/menu.css b/dist/menu/ds6/menu.css index 2113e6b95e..b1fa0fcfc1 100644 --- a/dist/menu/ds6/menu.css +++ b/dist/menu/ds6/menu.css @@ -178,3 +178,9 @@ hr.menu__separator { border-style: solid; border-width: 1px; } +div.menu__item[role^="menuitem"]:focus { + outline: 1px auto #767676; +} +div.menu__item[role^="menuitem"]:focus:not(:focus-visible) { + outline: none; +} diff --git a/dist/mixins/button/base/button-mixins.less b/dist/mixins/button/base/button-mixins.less index 81231e2bf4..fe1636f0f6 100644 --- a/dist/mixins/button/base/button-mixins.less +++ b/dist/mixins/button/base/button-mixins.less @@ -16,6 +16,16 @@ height: 40px; } + + // https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/ + &:focus { + outline: 1px auto @color-text-secondary; + outline-offset: 2px; + + &:not(:focus-visible) { + outline: none; + } + } } .btn-icon-base() { diff --git a/dist/mixins/carousel/base/carousel-mixins.less b/dist/mixins/carousel/base/carousel-mixins.less index 2dd35ca0bd..17b949e103 100644 --- a/dist/mixins/carousel/base/carousel-mixins.less +++ b/dist/mixins/carousel/base/carousel-mixins.less @@ -47,6 +47,16 @@ .customColorProperty(carousel-paddle-foreground-color); } + // https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/ + &:focus { + outline: 1px auto @color-text-secondary; + outline-offset: 2px; + + &:not(:focus-visible) { + outline: none; + } + } + // progressive enhancement for browsers with support // :focus-within and :hover cannot be combined as // IE/Edge will discard the entire rule diff --git a/dist/pagination/ds4/pagination.css b/dist/pagination/ds4/pagination.css index f9c7468db9..84e9c1a13f 100644 --- a/dist/pagination/ds4/pagination.css +++ b/dist/pagination/ds4/pagination.css @@ -111,6 +111,15 @@ nav.pagination--fluid ol.pagination__items li { -webkit-box-flex: 1; flex: 1 0 48px; } +a.pagination__item:focus, +button.pagination__item:focus { + outline: 1px auto #767676; + outline-offset: -2px; +} +a.pagination__item:focus:not(:focus-visible), +button.pagination__item:focus:not(:focus-visible) { + outline: none; +} @media (min-width: 601px) { nav.pagination { margin: 16px 0; diff --git a/dist/pagination/ds6/pagination.css b/dist/pagination/ds6/pagination.css index 11fc2b2e75..b8d1eb77cc 100644 --- a/dist/pagination/ds6/pagination.css +++ b/dist/pagination/ds6/pagination.css @@ -117,6 +117,15 @@ nav.pagination--fluid ol.pagination__items li { -webkit-box-flex: 1; flex: 1 0 48px; } +a.pagination__item:focus, +button.pagination__item:focus { + outline: 1px auto #767676; + outline-offset: -2px; +} +a.pagination__item:focus:not(:focus-visible), +button.pagination__item:focus:not(:focus-visible) { + outline: none; +} @media (min-width: 601px) { nav.pagination { margin: 16px 0; diff --git a/dist/radio/ds4/radio.css b/dist/radio/ds4/radio.css index f029befb50..8b47560317 100644 --- a/dist/radio/ds4/radio.css +++ b/dist/radio/ds4/radio.css @@ -65,12 +65,16 @@ input.radio__control[type="radio"]:checked + span.radio__icon svg.radio__checked input.radio__control[type="radio"]:checked + span.radio__icon svg.radio__unchecked { display: none; } -input.radio__control[type="radio"]:focus + span.radio__icon { - outline: 1px dotted #767676; -} input.radio__control[type="radio"][disabled] + span.radio__icon { opacity: 1; } input.radio__control[type="radio"][disabled] + span.radio__icon svg { fill: #ccc; } +input.radio__control[type="radio"]:focus + span.radio__icon { + outline: 1px auto #767676; + outline-offset: 2px; +} +input.radio__control[type="radio"]:focus:not(:focus-visible) + span.radio__icon { + outline: none; +} diff --git a/dist/radio/ds6/radio.css b/dist/radio/ds6/radio.css index d2599612d5..af0c3469a7 100644 --- a/dist/radio/ds6/radio.css +++ b/dist/radio/ds6/radio.css @@ -71,12 +71,16 @@ input.radio__control[type="radio"]:checked + span.radio__icon svg.radio__checked input.radio__control[type="radio"]:checked + span.radio__icon svg.radio__unchecked { display: none; } -input.radio__control[type="radio"]:focus + span.radio__icon { - outline: 1px dotted #767676; -} input.radio__control[type="radio"][disabled] + span.radio__icon { opacity: 1; } input.radio__control[type="radio"][disabled] + span.radio__icon svg { fill: #c7c7c7; } +input.radio__control[type="radio"]:focus + span.radio__icon { + outline: 1px auto #767676; + outline-offset: 2px; +} +input.radio__control[type="radio"]:focus:not(:focus-visible) + span.radio__icon { + outline: none; +} diff --git a/dist/select/ds4/select.css b/dist/select/ds4/select.css index 2c0d8f4a78..c3d1556a54 100644 --- a/dist/select/ds4/select.css +++ b/dist/select/ds4/select.css @@ -58,6 +58,7 @@ span.select { background-color: #fff; background-color: var(--select-focus-background-color, #fff); outline: 0; + text-decoration: underline; } .select select::-ms-expand { display: none; @@ -90,6 +91,10 @@ span.select { border-style: solid; border-width: 1px; } +.select select[disabled] + svg { + color: #ccc; +} +/* stylelint-disable no-descending-specificity */ [dir="rtl"] .select > select { padding-left: 30px; padding-right: 16px; @@ -102,6 +107,4 @@ span.select { left: 0; right: auto; } -.select select[disabled] + svg { - color: #ccc; -} +/* stylelint-enable no-descending-specificity */ diff --git a/dist/select/ds6/select.css b/dist/select/ds6/select.css index e9c455e133..6248b18d2d 100644 --- a/dist/select/ds6/select.css +++ b/dist/select/ds6/select.css @@ -74,6 +74,7 @@ span.select { background-color: #fff; background-color: var(--select-focus-background-color, #fff); outline: 0; + text-decoration: underline; } .select select::-ms-expand { display: none; @@ -106,6 +107,10 @@ span.select { border-style: solid; border-width: 1px; } +.select select[disabled] + svg { + color: #a2a2a2; +} +/* stylelint-disable no-descending-specificity */ [dir="rtl"] .select > select { padding-left: 30px; padding-right: 16px; @@ -118,6 +123,4 @@ span.select { left: 0; right: auto; } -.select select[disabled] + svg { - color: #a2a2a2; -} +/* stylelint-enable no-descending-specificity */ diff --git a/dist/switch/ds4/switch.css b/dist/switch/ds4/switch.css index ab904bca7d..17a6dac487 100644 --- a/dist/switch/ds4/switch.css +++ b/dist/switch/ds4/switch.css @@ -54,12 +54,6 @@ span.switch__control { width: 40px; z-index: 1; } -input.switch__control { - opacity: 0; -} -input.switch__control:focus + span.switch__button { - outline: 1px dotted #767676; -} input.switch__control[disabled] + span.switch__button { background-color: #ccc; background-color: var(--switch-disabled-background-color, #ccc); @@ -71,6 +65,16 @@ span.switch__control[aria-disabled="true"] + span.switch__button { background-color: #ccc; background-color: var(--switch-disabled-background-color, #ccc); } +input.switch__control { + opacity: 0; +} +input.switch__control:focus + span.switch__button { + outline: 1px auto #767676; + outline-offset: 2px; +} +input.switch__control:focus:not(:focus-visible) + span.switch__button { + outline: none; +} span.switch__control[aria-checked="true"] + span.switch__button::after { left: 19px; } @@ -79,6 +83,13 @@ span.switch__control:not([aria-disabled="true"])[aria-checked="true"] + span.swi background-color: #0654ba; background-color: var(--switch-checked-background-color, #0654ba); } +span.switch__control:focus { + outline: 1px auto #767676; + outline-offset: 2px; +} +span.switch__control:focus:not(:focus-visible) { + outline: none; +} @media screen and (-ms-high-contrast: active) { input.switch__control { opacity: 1; diff --git a/dist/switch/ds6/switch.css b/dist/switch/ds6/switch.css index 7b53968d75..0daec5b56c 100644 --- a/dist/switch/ds6/switch.css +++ b/dist/switch/ds6/switch.css @@ -59,12 +59,6 @@ span.switch__control { width: 40px; z-index: 1; } -input.switch__control { - opacity: 0; -} -input.switch__control:focus + span.switch__button { - outline: 1px dotted #767676; -} input.switch__control[disabled] + span.switch__button { background-color: #c7c7c7; background-color: var(--switch-disabled-background-color, #c7c7c7); @@ -76,6 +70,16 @@ span.switch__control[aria-disabled="true"] + span.switch__button { background-color: #c7c7c7; background-color: var(--switch-disabled-background-color, #c7c7c7); } +input.switch__control { + opacity: 0; +} +input.switch__control:focus + span.switch__button { + outline: 1px auto #767676; + outline-offset: 2px; +} +input.switch__control:focus:not(:focus-visible) + span.switch__button { + outline: none; +} span.switch__control[aria-checked="true"] + span.switch__button::after { left: 19px; } @@ -84,6 +88,13 @@ span.switch__control:not([aria-disabled="true"])[aria-checked="true"] + span.swi background-color: #3665f3; background-color: var(--switch-checked-background-color, #3665f3); } +span.switch__control:focus { + outline: 1px auto #767676; + outline-offset: 2px; +} +span.switch__control:focus:not(:focus-visible) { + outline: none; +} @media screen and (-ms-high-contrast: active) { input.switch__control { opacity: 1; diff --git a/dist/tabs/ds4/tabs.css b/dist/tabs/ds4/tabs.css index f0de5ff162..e9a7aefdf1 100644 --- a/dist/tabs/ds4/tabs.css +++ b/dist/tabs/ds4/tabs.css @@ -83,3 +83,11 @@ li.fake-tabs__item--current > a[aria-current="page"] { position: relative; top: -1px; } +div.tabs__item[role="tab"]:focus, +li.fake-tabs__item a:focus { + outline: 1px auto #767676; +} +div.tabs__item[role="tab"]:focus:not(:focus-visible), +li.fake-tabs__item a:focus:not(:focus-visible) { + outline: none; +} diff --git a/dist/tabs/ds6/tabs.css b/dist/tabs/ds6/tabs.css index 4287a4f86a..b6f2193b22 100644 --- a/dist/tabs/ds6/tabs.css +++ b/dist/tabs/ds6/tabs.css @@ -92,3 +92,11 @@ li.fake-tabs__item--current > a[aria-current="page"] { position: relative; top: -1px; } +div.tabs__item[role="tab"]:focus, +li.fake-tabs__item a:focus { + outline: 1px auto #767676; +} +div.tabs__item[role="tab"]:focus:not(:focus-visible), +li.fake-tabs__item a:focus:not(:focus-visible) { + outline: none; +} diff --git a/dist/toast-dialog/ds4/toast-dialog.css b/dist/toast-dialog/ds4/toast-dialog.css index 60581ef658..c50cc7170d 100644 --- a/dist/toast-dialog/ds4/toast-dialog.css +++ b/dist/toast-dialog/ds4/toast-dialog.css @@ -25,8 +25,7 @@ .toast-dialog a:focus { outline-color: #fff; outline-color: var(--toast-dialog-foreground-color, #fff); - outline-offset: -8px; - outline-style: dotted; + outline-style: auto; outline-width: 1px; } .toast-dialog--transition { @@ -77,9 +76,9 @@ button.toast-dialog__close:focus > svg { button.toast-dialog__close:focus { outline-color: #fff; outline-color: var(--toast-dialog-foreground-color, #fff); - outline-offset: -8px; - outline-style: dotted; + outline-style: auto; outline-width: 1px; + outline-offset: -8px; } .toast-dialog__footer { display: -webkit-box; @@ -108,8 +107,7 @@ button.toast-dialog__close:focus { .toast-dialog__footer .btn--secondary:focus { outline-color: #fff; outline-color: var(--toast-dialog-foreground-color, #fff); - outline-offset: -8px; - outline-style: dotted; + outline-style: auto; outline-width: 1px; } .toast-dialog__footer .btn--primary:focus, diff --git a/dist/toast-dialog/ds6/toast-dialog.css b/dist/toast-dialog/ds6/toast-dialog.css index 83f7c2295e..cc9e5af1fb 100644 --- a/dist/toast-dialog/ds6/toast-dialog.css +++ b/dist/toast-dialog/ds6/toast-dialog.css @@ -25,8 +25,7 @@ .toast-dialog a:focus { outline-color: #fff; outline-color: var(--toast-dialog-foreground-color, #fff); - outline-offset: -8px; - outline-style: dotted; + outline-style: auto; outline-width: 1px; } .toast-dialog--transition { @@ -77,9 +76,9 @@ button.toast-dialog__close:focus > svg { button.toast-dialog__close:focus { outline-color: #fff; outline-color: var(--toast-dialog-foreground-color, #fff); - outline-offset: -8px; - outline-style: dotted; + outline-style: auto; outline-width: 1px; + outline-offset: -8px; } .toast-dialog__footer { display: -webkit-box; @@ -108,8 +107,7 @@ button.toast-dialog__close:focus { .toast-dialog__footer .btn--secondary:focus { outline-color: #fff; outline-color: var(--toast-dialog-foreground-color, #fff); - outline-offset: -8px; - outline-style: dotted; + outline-style: auto; outline-width: 1px; } .toast-dialog__footer .btn--primary:focus, diff --git a/dist/variables/ds4/checkbox-variables.less b/dist/variables/ds4/checkbox-variables.less index 3d00b2bcc6..e0e0be2207 100644 --- a/dist/variables/ds4/checkbox-variables.less +++ b/dist/variables/ds4/checkbox-variables.less @@ -6,4 +6,4 @@ @checkbox-unchecked-color: @color-text-default; @checkbox-disabled-opacity: 1; @checkbox-disabled-color: @color-action-disabled; -@checkbox-custom-outline-color: @color-text-secondary; +@checkbox-custom-outline: 1px auto @color-text-secondary; diff --git a/dist/variables/ds4/radio-variables.less b/dist/variables/ds4/radio-variables.less index 3843572648..e048eb60b6 100644 --- a/dist/variables/ds4/radio-variables.less +++ b/dist/variables/ds4/radio-variables.less @@ -6,4 +6,4 @@ @radio-unchecked-color: @color-text-default; @radio-disabled-opacity: 1; @radio-disabled-color: @color-disabled; -@radio-custom-outline-color: @color-text-secondary; +@radio-custom-outline: 1px auto @color-text-secondary; diff --git a/dist/variables/ds6/checkbox-variables.less b/dist/variables/ds6/checkbox-variables.less index 3d00b2bcc6..e0e0be2207 100644 --- a/dist/variables/ds6/checkbox-variables.less +++ b/dist/variables/ds6/checkbox-variables.less @@ -6,4 +6,4 @@ @checkbox-unchecked-color: @color-text-default; @checkbox-disabled-opacity: 1; @checkbox-disabled-color: @color-action-disabled; -@checkbox-custom-outline-color: @color-text-secondary; +@checkbox-custom-outline: 1px auto @color-text-secondary; diff --git a/dist/variables/ds6/radio-variables.less b/dist/variables/ds6/radio-variables.less index 3843572648..e048eb60b6 100644 --- a/dist/variables/ds6/radio-variables.less +++ b/dist/variables/ds6/radio-variables.less @@ -6,4 +6,4 @@ @radio-unchecked-color: @color-text-default; @radio-disabled-opacity: 1; @radio-disabled-color: @color-disabled; -@radio-custom-outline-color: @color-text-secondary; +@radio-custom-outline: 1px auto @color-text-secondary; diff --git a/docs/src/less/base/index.less b/docs/src/less/base/index.less index e5b74e18cd..18e5d89be0 100644 --- a/docs/src/less/base/index.less +++ b/docs/src/less/base/index.less @@ -144,7 +144,7 @@ main > div > h2 { } .app-bar__links a:focus { - outline: 2px dotted white; + outline: 1px auto white; } .app-bar__links a:visited { diff --git a/docs/static/ds4/docs.min.css b/docs/static/ds4/docs.min.css index 64a0f0c3ce..79cc73dff3 100644 --- a/docs/static/ds4/docs.min.css +++ b/docs/static/ds4/docs.min.css @@ -1,5 +1,5 @@ /*! Wombat VIM theme */ -figure .highlight,.highlight pre,.highlight table{background:#242424!important;color:#f6f3e8!important}.highlight .hll{background-color:#ffc!important}.highlight .c{color:#99968b!important;font-style:italic!important}.highlight .err{color:#f6f3e8!important}.highlight .g{color:#f6f3e8!important}.highlight .k{color:#8ac6f2!important}.highlight .l{color:#f6f3e8!important}.highlight .n,.highlight .h{color:#f6f3e8!important}.highlight .o{color:#f6f3e8!important}.highlight .x{color:#f6f3e8!important}.highlight .p{color:#f6f3e8!important}.highlight .cm{color:#99968b!important;font-style:italic!important}.highlight .cp{color:#e5786d!important}.highlight .c1{color:#99968b!important;font-style:italic!important}.highlight .cs{color:#99968b!important;font-style:italic!important}.highlight .gd{color:#f6f3e8!important}.highlight .ge{color:#f6f3e8!important}.highlight .gr{color:#f6f3e8!important}.highlight .gh{color:#f6f3e8!important;font-weight:bold!important}.highlight .gi{color:#f6f3e8!important}.highlight .go{color:#808080!important;background-color:#303030!important}.highlight .gp{color:#f6f3e8!important}.highlight .gs{color:#f6f3e8!important}.highlight .gu{color:#f6f3e8!important;font-weight:bold!important}.highlight .gt{color:#f6f3e8!important}.highlight .kc{color:#8ac6f2!important}.highlight .kd{color:#8ac6f2!important}.highlight .kn{color:#8ac6f2!important}.highlight .kp{color:#8ac6f2!important}.highlight .kr{color:#8ac6f2!important}.highlight .kt{color:#cae682!important}.highlight .ld{color:#f6f3e8!important}.highlight .m{color:#e5786d!important}.highlight .s{color:#95e454!important;font-style:italic!important}.highlight .na{color:#cae682!important}.highlight .nb{color:#f6f3e8!important}.highlight .nc{color:#f6f3e8!important}.highlight .no{color:#e5786d!important}.highlight .nd{color:#f6f3e8!important}.highlight .ni{color:#e7f6da!important}.highlight .ne{color:#f6f3e8!important}.highlight .nf{color:#cae682!important}.highlight .nl{color:#f6f3e8!important}.highlight .nn{color:#f6f3e8!important}.highlight .nx{color:#f6f3e8!important}.highlight .py{color:#f6f3e8!important}.highlight .nt{color:#8ac6f2!important}.highlight .nv{color:#cae682!important}.highlight .ow{color:#f6f3e8!important}.highlight .w{color:#f6f3e8!important}.highlight .mf{color:#e5786d!important}.highlight .mh{color:#e5786d!important}.highlight .mi{color:#e5786d!important}.highlight .mo{color:#e5786d!important}.highlight .sb{color:#95e454!important;font-style:italic!important}.highlight .sc{color:#95e454!important;font-style:italic!important}.highlight .sd{color:#95e454!important;font-style:italic!important}.highlight .s2{color:#95e454!important;font-style:italic!important}.highlight .se{color:#95e454!important;font-style:italic!important}.highlight .sh{color:#95e454!important;font-style:italic!important}.highlight .si{color:#95e454!important;font-style:italic!important}.highlight .sx{color:#95e454!important;font-style:italic!important}.highlight .sr{color:#95e454!important;font-style:italic!important}.highlight .s1{color:#95e454!important;font-style:italic!important}.highlight .ss{color:#95e454!important;font-style:italic!important}.highlight .bp{color:#f6f3e8!important}.highlight .vc{color:#cae682!important}.highlight .vg{color:#cae682!important}.highlight .vi{color:#cae682!important}.highlight .il{color:#e5786d!important}span.highlight{background-color:#eee;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace}span.highlight .s{word-break:break-all;word-wrap:break-word}figure.highlight{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:12px;margin:8px 0;width:100%}figure.highlight pre{font-family:monospace;margin:0;padding:8px 8px 0}figure.highlight code{white-space:pre-wrap}body{margin:0}header{background-color:#0654ba}footer{margin-top:32px}main > div > h2{margin-bottom:12px;margin-top:24px;padding-top:8px}.page-grid{padding:8px}.skin-graphic{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;margin:48px auto 0 auto;max-width:600px;width:100%}.modules-expander{background:#eee;padding:4px}.modules-expander__tip{color:#767676;margin:4px 8px;text-align:center}.modules-expander__list{-webkit-column-count:2;-moz-column-count:2;column-count:2;font-size:20px;line-height:1.75em;list-style-type:none;margin:0;width:100%}.modules-expander[open]{padding-bottom:32px}.modules-expander__list a{text-decoration:none}.modules-expander .details__summary{padding:8px 0}.app-bar{-webkit-box-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;color:white;display:-webkit-box;display:flex;-webkit-box-pack:justify;justify-content:space-between;margin:0 8px;padding:16px 0}.app-bar__title{font-size:26px;font-weight:bold;margin:0}.app-bar__links{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;flex-shrink:0;list-style-type:none;margin-left:8px;padding:0}.app-bar__links li:not(:last-child)::after{content:'';margin:0 8px}.app-bar__links a{color:white;text-decoration:none}.modules-expander__list a:visited{color:#0654ba}.app-bar__links a:hover{text-decoration:underline}.app-bar__links a:focus{outline:2px dotted white}.app-bar__links a:visited{color:white}.section-header{display:-webkit-box;display:flex;margin:16px 0}.section-header h2{margin:0}.section-header__version{align-self:flex-end;background-color:#eee;margin-left:auto;padding:2px 4px}#about dl{margin:16px 0 32px 0}#about dt{font-weight:bold;margin:0 0 12px 0}#about dd{margin:0 0 12px 0}.demo{background-color:#fff;background-color:var(--color-background-default,#fff);border:1px dashed #ddd}.demo--dark-mode{background-color:#fff;border:1px dashed #eee;color:#333}.demo__inner{margin:8px}span.demo,span.demo__inner{display:inline-block}@media (prefers-color-scheme:dark){.skin-experiment-dark-mode header{background-color:#0654ba;background-color:var(--color-link-default,#0654ba)}.skin-experiment-dark-mode a.demo-link-visited{color:#6a29b9;color:var(--color-link-visited,#6a29b9)}.skin-experiment-dark-mode a.demo-link-visited:link,.skin-experiment-dark-mode a.demo-link-visited:visited{color:#6a29b9;color:var(--color-link-visited,#6a29b9)}.skin-experiment-dark-mode .section-header__version,.skin-experiment-dark-mode span.highlight{background-color:#333}.skin-experiment-dark-mode .site-nav a,.skin-experiment-dark-mode .site-nav a:visited{color:#333;color:var(--color-text-default,#333)}.skin-experiment-dark-mode .site-nav a:hover{color:#333;color:var(--color-text-default,#333)}}.carousel__list--default-demo li{background-color:rgba(6,84,186,0.2);color:#333;font-size:24px;font-weight:bold;height:120px;line-height:120px;margin-right:16px;text-align:center;width:200px}.carousel__list--discrete-demo li{background-color:rgba(6,84,186,0.2);-webkit-box-sizing:border-box;box-sizing:border-box;color:#333;font-size:24px;font-weight:bold;height:120px;line-height:120px;margin-right:16px;text-align:center;width:calc(25% - 24px)}.carousel__list--slideshow-demo li{background-color:rgba(6,84,186,0.2);color:#333;font-size:36px;font-weight:bold;height:300px;line-height:300px;margin-right:16px;text-align:center;width:100%}.carousel__list--discrete-demo li:last-child{margin-right:0}.carousel__list--slideshow-demo li:last-child{margin-right:0}.demo-colors{list-style:none;margin:0;padding:0}.demo-colors li{margin:1rem 0}.demo-colors li::before{content:'';display:block;height:1.25rem;margin-bottom:0.25rem;margin-right:1rem;vertical-align:middle;width:100%}a.demo-link-visited{color:#6a29b9}a.demo-link-visited:link,a.demo-link-visited:visited{color:#6a29b9}.utility-table{border:1px solid #eee;width:100%}.utility-table th{text-transform:uppercase}.utility-table th,.utility-table td{padding:8px 16px;text-align:left}.utility-table tbody tr:nth-child(odd){background-color:#eee}.utility-table td{border-top:1px solid #eee}span.icon{background-repeat:no-repeat;background-size:contain;display:inline-block;vertical-align:middle}.icon-table{margin:32px 0;width:100%}.icon-table th{background-color:#eee;padding:8px 6px;text-align:left}.icon-table th:first-child{width:100%}.icon-table th:not(:first-child){min-width:100px}.icon-table td{border-bottom:1px solid #eee;padding:4px 6px;text-align:left}.demo-color-white::before{background-color:#fff;outline:1px dashed #ccc}.demo-color-grey1::before{background-color:#eee}.demo-color-grey2::before{background-color:#ddd}.demo-color-grey3::before{background-color:#ccc}.demo-color-grey4::before{background-color:#999}.demo-color-grey5::before{background-color:#767676}.demo-color-grey6::before{background-color:#333}.demo-color-black::before{background-color:#000}.demo-color-background-default::before{background-color:#fff;outline:1px dashed #ccc}.demo-color-background-default-dark-mode::before{background-color:#fff;outline:1px dashed #333}.demo-color-text-default::before{background-color:#333}.demo-color-text-default-dark-mode::before{background-color:#333}.demo-color-text-secondary::before{background-color:#767676}.demo-color-text-secondary-dark-mode::before{background-color:#767676}.demo-color-text-disabled::before{background-color:#999}.demo-color-text-disabled-dark-mode::before{background-color:#999}.demo-color-text-confirmation::before{background-color:#457016}.demo-color-text-confirmation-dark-mode::before{background-color:#457016}.demo-color-action-secondary::before{background-color:#767676}.demo-color-action-secondary-dark-mode::before{background-color:#767676}.demo-color-action-disabled::before{background-color:#ccc}.demo-color-action-disabled-dark-mode::before{background-color:#ccc}.demo-color-link-default::before{background-color:#0654ba}.demo-color-link-default-dark-mode::before{background-color:#0654ba}.demo-color-link-hover::before{background-color:#00489f}.demo-color-link-hover-dark-mode::before{background-color:#00489f}.demo-color-link-visited::before{background-color:#6a29b9}.demo-color-link-visited-dark-mode::before{background-color:#6a29b9}.demo-color-action-primary::before{background-color:#0654ba}.demo-color-action-primary-dark-mode::before{background-color:#0654ba}.demo-color-action-hover::before{background-color:#00489f}.demo-color-action-hover-dark-mode::before{background-color:#00489f}.demo-color-action-destroy::before{background-color:#dd1e31}.demo-color-action-destroy-dark-mode::before{background-color:#dd1e31}.demo-color-status-information::before{background-color:#0654ba}.demo-color-status-information-dark-mode::before{background-color:#0654ba}.demo-color-status-confirmation::before{background-color:#5ba71b}.demo-color-status-confirmation-dark-mode::before{background-color:#5ba71b}.demo-color-status-attention::before{background-color:#dd1e31}.demo-color-status-attention-dark-mode::before{background-color:#dd1e31}.demo-color-separator::before{background-color:#eee}.demo-color-separator-dark-mode::before{background-color:#eee}.demo-color-image-border::before{background-color:#eee}.demo-color-image-border-dark-mode::before{background-color:#eee}.demo-typography{list-style:none;margin:0;padding:0}.demo-typography li{margin:1rem 0}@media only screen and (min-width:601px){.page-grid{display:grid;margin:0 auto;max-width:600px;width:100%}header{background-color:#0654ba;padding:0 8px}main{grid-column-end:2;grid-column-start:2;grid-row-end:1;grid-row-start:1;overflow-x:hidden;padding-left:8px}footer{grid-column-end:2;grid-column-start:2;grid-row-end:2;grid-row-start:2}.app-bar{margin:0 auto;max-width:600px;padding-left:8px;width:100%}.site-nav{grid-column-end:1;grid-column-start:1;grid-row-end:1;grid-row-start:1;height:100vh;overflow-y:scroll;padding-left:8px;padding-right:24px;position:-webkit-sticky;position:sticky;top:0}.site-nav h2{color:#767676;margin-bottom:12px;margin-top:24px;text-transform:uppercase}.site-nav h2:first-of-type{margin-top:32px}.site-nav ul{line-height:1.5em;list-style-type:none;margin:0;padding:0}.site-nav ul:last-child{padding-bottom:32px}.site-nav a{text-decoration:none}.site-nav a:visited{color:#0654ba}.demo-colors li::before{display:inline-block;width:10rem}}@media only screen and (min-width:961px){#about dl{-webkit-column-count:2;-moz-column-count:2;column-count:2}.app-bar{max-width:960px}.page-grid{grid-column-gap:16px;max-width:960px}}@media only screen and (min-width:1281px){.app-bar{max-width:1280px}.page-grid{grid-column-gap:32px;max-width:1280px}}.demo-color-b1::before{background-color:rgba(6,84,186,0.2)}.demo-color-b3::before{background-color:rgba(6,84,186,0.6)}.demo-color-b4::before{background-color:#0654ba}.demo-color-b6::before{background-color:#00489f}.demo-color-r1::before{background-color:rgba(221,30,49,0.2)}.demo-color-r3::before{background-color:rgba(221,30,49,0.6)}.demo-color-r4::before{background-color:#dd1e31}.demo-color-r6::before{background-color:#ad1f3a}.demo-color-g1::before{background-color:rgba(91,167,27,0.2)}.demo-color-g3::before{background-color:rgba(91,167,27,0.6)}.demo-color-g4::before{background-color:#5ba71b}.demo-color-g6::before{background-color:#457016}.demo-color-m1::before{background-color:rgba(106,41,185,0.2)}.demo-color-m3::before{background-color:rgba(106,41,185,0.6)}.demo-color-m4::before{background-color:#6a29b9}.demo-color-o1::before{background-color:rgba(241,142,12,0.2)}.demo-color-o3::before{background-color:rgba(241,142,12,0.6)}.demo-color-o4::before{background-color:#f18e0c}.demo-color-o6::before{background-color:#d36c07} +figure .highlight,.highlight pre,.highlight table{background:#242424!important;color:#f6f3e8!important}.highlight .hll{background-color:#ffc!important}.highlight .c{color:#99968b!important;font-style:italic!important}.highlight .err{color:#f6f3e8!important}.highlight .g{color:#f6f3e8!important}.highlight .k{color:#8ac6f2!important}.highlight .l{color:#f6f3e8!important}.highlight .n,.highlight .h{color:#f6f3e8!important}.highlight .o{color:#f6f3e8!important}.highlight .x{color:#f6f3e8!important}.highlight .p{color:#f6f3e8!important}.highlight .cm{color:#99968b!important;font-style:italic!important}.highlight .cp{color:#e5786d!important}.highlight .c1{color:#99968b!important;font-style:italic!important}.highlight .cs{color:#99968b!important;font-style:italic!important}.highlight .gd{color:#f6f3e8!important}.highlight .ge{color:#f6f3e8!important}.highlight .gr{color:#f6f3e8!important}.highlight .gh{color:#f6f3e8!important;font-weight:bold!important}.highlight .gi{color:#f6f3e8!important}.highlight .go{color:#808080!important;background-color:#303030!important}.highlight .gp{color:#f6f3e8!important}.highlight .gs{color:#f6f3e8!important}.highlight .gu{color:#f6f3e8!important;font-weight:bold!important}.highlight .gt{color:#f6f3e8!important}.highlight .kc{color:#8ac6f2!important}.highlight .kd{color:#8ac6f2!important}.highlight .kn{color:#8ac6f2!important}.highlight .kp{color:#8ac6f2!important}.highlight .kr{color:#8ac6f2!important}.highlight .kt{color:#cae682!important}.highlight .ld{color:#f6f3e8!important}.highlight .m{color:#e5786d!important}.highlight .s{color:#95e454!important;font-style:italic!important}.highlight .na{color:#cae682!important}.highlight .nb{color:#f6f3e8!important}.highlight .nc{color:#f6f3e8!important}.highlight .no{color:#e5786d!important}.highlight .nd{color:#f6f3e8!important}.highlight .ni{color:#e7f6da!important}.highlight .ne{color:#f6f3e8!important}.highlight .nf{color:#cae682!important}.highlight .nl{color:#f6f3e8!important}.highlight .nn{color:#f6f3e8!important}.highlight .nx{color:#f6f3e8!important}.highlight .py{color:#f6f3e8!important}.highlight .nt{color:#8ac6f2!important}.highlight .nv{color:#cae682!important}.highlight .ow{color:#f6f3e8!important}.highlight .w{color:#f6f3e8!important}.highlight .mf{color:#e5786d!important}.highlight .mh{color:#e5786d!important}.highlight .mi{color:#e5786d!important}.highlight .mo{color:#e5786d!important}.highlight .sb{color:#95e454!important;font-style:italic!important}.highlight .sc{color:#95e454!important;font-style:italic!important}.highlight .sd{color:#95e454!important;font-style:italic!important}.highlight .s2{color:#95e454!important;font-style:italic!important}.highlight .se{color:#95e454!important;font-style:italic!important}.highlight .sh{color:#95e454!important;font-style:italic!important}.highlight .si{color:#95e454!important;font-style:italic!important}.highlight .sx{color:#95e454!important;font-style:italic!important}.highlight .sr{color:#95e454!important;font-style:italic!important}.highlight .s1{color:#95e454!important;font-style:italic!important}.highlight .ss{color:#95e454!important;font-style:italic!important}.highlight .bp{color:#f6f3e8!important}.highlight .vc{color:#cae682!important}.highlight .vg{color:#cae682!important}.highlight .vi{color:#cae682!important}.highlight .il{color:#e5786d!important}span.highlight{background-color:#eee;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace}span.highlight .s{word-break:break-all;word-wrap:break-word}figure.highlight{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:12px;margin:8px 0;width:100%}figure.highlight pre{font-family:monospace;margin:0;padding:8px 8px 0}figure.highlight code{white-space:pre-wrap}body{margin:0}header{background-color:#0654ba}footer{margin-top:32px}main > div > h2{margin-bottom:12px;margin-top:24px;padding-top:8px}.page-grid{padding:8px}.skin-graphic{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;margin:48px auto 0 auto;max-width:600px;width:100%}.modules-expander{background:#eee;padding:4px}.modules-expander__tip{color:#767676;margin:4px 8px;text-align:center}.modules-expander__list{-webkit-column-count:2;-moz-column-count:2;column-count:2;font-size:20px;line-height:1.75em;list-style-type:none;margin:0;width:100%}.modules-expander[open]{padding-bottom:32px}.modules-expander__list a{text-decoration:none}.modules-expander .details__summary{padding:8px 0}.app-bar{-webkit-box-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;color:white;display:-webkit-box;display:flex;-webkit-box-pack:justify;justify-content:space-between;margin:0 8px;padding:16px 0}.app-bar__title{font-size:26px;font-weight:bold;margin:0}.app-bar__links{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;flex-shrink:0;list-style-type:none;margin-left:8px;padding:0}.app-bar__links li:not(:last-child)::after{content:'';margin:0 8px}.app-bar__links a{color:white;text-decoration:none}.modules-expander__list a:visited{color:#0654ba}.app-bar__links a:hover{text-decoration:underline}.app-bar__links a:focus{outline:1px auto white}.app-bar__links a:visited{color:white}.section-header{display:-webkit-box;display:flex;margin:16px 0}.section-header h2{margin:0}.section-header__version{align-self:flex-end;background-color:#eee;margin-left:auto;padding:2px 4px}#about dl{margin:16px 0 32px 0}#about dt{font-weight:bold;margin:0 0 12px 0}#about dd{margin:0 0 12px 0}.demo{background-color:#fff;background-color:var(--color-background-default,#fff);border:1px dashed #ddd}.demo--dark-mode{background-color:#fff;border:1px dashed #eee;color:#333}.demo__inner{margin:8px}span.demo,span.demo__inner{display:inline-block}@media (prefers-color-scheme:dark){.skin-experiment-dark-mode header{background-color:#0654ba;background-color:var(--color-link-default,#0654ba)}.skin-experiment-dark-mode a.demo-link-visited{color:#6a29b9;color:var(--color-link-visited,#6a29b9)}.skin-experiment-dark-mode a.demo-link-visited:link,.skin-experiment-dark-mode a.demo-link-visited:visited{color:#6a29b9;color:var(--color-link-visited,#6a29b9)}.skin-experiment-dark-mode .section-header__version,.skin-experiment-dark-mode span.highlight{background-color:#333}.skin-experiment-dark-mode .site-nav a,.skin-experiment-dark-mode .site-nav a:visited{color:#333;color:var(--color-text-default,#333)}.skin-experiment-dark-mode .site-nav a:hover{color:#333;color:var(--color-text-default,#333)}}.carousel__list--default-demo li{background-color:rgba(6,84,186,0.2);color:#333;font-size:24px;font-weight:bold;height:120px;line-height:120px;margin-right:16px;text-align:center;width:200px}.carousel__list--discrete-demo li{background-color:rgba(6,84,186,0.2);-webkit-box-sizing:border-box;box-sizing:border-box;color:#333;font-size:24px;font-weight:bold;height:120px;line-height:120px;margin-right:16px;text-align:center;width:calc(25% - 24px)}.carousel__list--slideshow-demo li{background-color:rgba(6,84,186,0.2);color:#333;font-size:36px;font-weight:bold;height:300px;line-height:300px;margin-right:16px;text-align:center;width:100%}.carousel__list--discrete-demo li:last-child{margin-right:0}.carousel__list--slideshow-demo li:last-child{margin-right:0}.demo-colors{list-style:none;margin:0;padding:0}.demo-colors li{margin:1rem 0}.demo-colors li::before{content:'';display:block;height:1.25rem;margin-bottom:0.25rem;margin-right:1rem;vertical-align:middle;width:100%}a.demo-link-visited{color:#6a29b9}a.demo-link-visited:link,a.demo-link-visited:visited{color:#6a29b9}.utility-table{border:1px solid #eee;width:100%}.utility-table th{text-transform:uppercase}.utility-table th,.utility-table td{padding:8px 16px;text-align:left}.utility-table tbody tr:nth-child(odd){background-color:#eee}.utility-table td{border-top:1px solid #eee}span.icon{background-repeat:no-repeat;background-size:contain;display:inline-block;vertical-align:middle}.icon-table{margin:32px 0;width:100%}.icon-table th{background-color:#eee;padding:8px 6px;text-align:left}.icon-table th:first-child{width:100%}.icon-table th:not(:first-child){min-width:100px}.icon-table td{border-bottom:1px solid #eee;padding:4px 6px;text-align:left}.demo-color-white::before{background-color:#fff;outline:1px dashed #ccc}.demo-color-grey1::before{background-color:#eee}.demo-color-grey2::before{background-color:#ddd}.demo-color-grey3::before{background-color:#ccc}.demo-color-grey4::before{background-color:#999}.demo-color-grey5::before{background-color:#767676}.demo-color-grey6::before{background-color:#333}.demo-color-black::before{background-color:#000}.demo-color-background-default::before{background-color:#fff;outline:1px dashed #ccc}.demo-color-background-default-dark-mode::before{background-color:#fff;outline:1px dashed #333}.demo-color-text-default::before{background-color:#333}.demo-color-text-default-dark-mode::before{background-color:#333}.demo-color-text-secondary::before{background-color:#767676}.demo-color-text-secondary-dark-mode::before{background-color:#767676}.demo-color-text-disabled::before{background-color:#999}.demo-color-text-disabled-dark-mode::before{background-color:#999}.demo-color-text-confirmation::before{background-color:#457016}.demo-color-text-confirmation-dark-mode::before{background-color:#457016}.demo-color-action-secondary::before{background-color:#767676}.demo-color-action-secondary-dark-mode::before{background-color:#767676}.demo-color-action-disabled::before{background-color:#ccc}.demo-color-action-disabled-dark-mode::before{background-color:#ccc}.demo-color-link-default::before{background-color:#0654ba}.demo-color-link-default-dark-mode::before{background-color:#0654ba}.demo-color-link-hover::before{background-color:#00489f}.demo-color-link-hover-dark-mode::before{background-color:#00489f}.demo-color-link-visited::before{background-color:#6a29b9}.demo-color-link-visited-dark-mode::before{background-color:#6a29b9}.demo-color-action-primary::before{background-color:#0654ba}.demo-color-action-primary-dark-mode::before{background-color:#0654ba}.demo-color-action-hover::before{background-color:#00489f}.demo-color-action-hover-dark-mode::before{background-color:#00489f}.demo-color-action-destroy::before{background-color:#dd1e31}.demo-color-action-destroy-dark-mode::before{background-color:#dd1e31}.demo-color-status-information::before{background-color:#0654ba}.demo-color-status-information-dark-mode::before{background-color:#0654ba}.demo-color-status-confirmation::before{background-color:#5ba71b}.demo-color-status-confirmation-dark-mode::before{background-color:#5ba71b}.demo-color-status-attention::before{background-color:#dd1e31}.demo-color-status-attention-dark-mode::before{background-color:#dd1e31}.demo-color-separator::before{background-color:#eee}.demo-color-separator-dark-mode::before{background-color:#eee}.demo-color-image-border::before{background-color:#eee}.demo-color-image-border-dark-mode::before{background-color:#eee}.demo-typography{list-style:none;margin:0;padding:0}.demo-typography li{margin:1rem 0}@media only screen and (min-width:601px){.page-grid{display:grid;margin:0 auto;max-width:600px;width:100%}header{background-color:#0654ba;padding:0 8px}main{grid-column-end:2;grid-column-start:2;grid-row-end:1;grid-row-start:1;overflow-x:hidden;padding-left:8px}footer{grid-column-end:2;grid-column-start:2;grid-row-end:2;grid-row-start:2}.app-bar{margin:0 auto;max-width:600px;padding-left:8px;width:100%}.site-nav{grid-column-end:1;grid-column-start:1;grid-row-end:1;grid-row-start:1;height:100vh;overflow-y:scroll;padding-left:8px;padding-right:24px;position:-webkit-sticky;position:sticky;top:0}.site-nav h2{color:#767676;margin-bottom:12px;margin-top:24px;text-transform:uppercase}.site-nav h2:first-of-type{margin-top:32px}.site-nav ul{line-height:1.5em;list-style-type:none;margin:0;padding:0}.site-nav ul:last-child{padding-bottom:32px}.site-nav a{text-decoration:none}.site-nav a:visited{color:#0654ba}.demo-colors li::before{display:inline-block;width:10rem}}@media only screen and (min-width:961px){#about dl{-webkit-column-count:2;-moz-column-count:2;column-count:2}.app-bar{max-width:960px}.page-grid{grid-column-gap:16px;max-width:960px}}@media only screen and (min-width:1281px){.app-bar{max-width:1280px}.page-grid{grid-column-gap:32px;max-width:1280px}}.demo-color-b1::before{background-color:rgba(6,84,186,0.2)}.demo-color-b3::before{background-color:rgba(6,84,186,0.6)}.demo-color-b4::before{background-color:#0654ba}.demo-color-b6::before{background-color:#00489f}.demo-color-r1::before{background-color:rgba(221,30,49,0.2)}.demo-color-r3::before{background-color:rgba(221,30,49,0.6)}.demo-color-r4::before{background-color:#dd1e31}.demo-color-r6::before{background-color:#ad1f3a}.demo-color-g1::before{background-color:rgba(91,167,27,0.2)}.demo-color-g3::before{background-color:rgba(91,167,27,0.6)}.demo-color-g4::before{background-color:#5ba71b}.demo-color-g6::before{background-color:#457016}.demo-color-m1::before{background-color:rgba(106,41,185,0.2)}.demo-color-m3::before{background-color:rgba(106,41,185,0.6)}.demo-color-m4::before{background-color:#6a29b9}.demo-color-o1::before{background-color:rgba(241,142,12,0.2)}.demo-color-o3::before{background-color:rgba(241,142,12,0.6)}.demo-color-o4::before{background-color:#f18e0c}.demo-color-o6::before{background-color:#d36c07} diff --git a/docs/static/ds6/docs.min.css b/docs/static/ds6/docs.min.css index 4235a368ca..4a3805a0b2 100644 --- a/docs/static/ds6/docs.min.css +++ b/docs/static/ds6/docs.min.css @@ -1,5 +1,5 @@ /*! Wombat VIM theme */ -figure .highlight,.highlight pre,.highlight table{background:#242424!important;color:#f6f3e8!important}.highlight .hll{background-color:#ffc!important}.highlight .c{color:#99968b!important;font-style:italic!important}.highlight .err{color:#f6f3e8!important}.highlight .g{color:#f6f3e8!important}.highlight .k{color:#8ac6f2!important}.highlight .l{color:#f6f3e8!important}.highlight .n,.highlight .h{color:#f6f3e8!important}.highlight .o{color:#f6f3e8!important}.highlight .x{color:#f6f3e8!important}.highlight .p{color:#f6f3e8!important}.highlight .cm{color:#99968b!important;font-style:italic!important}.highlight .cp{color:#e5786d!important}.highlight .c1{color:#99968b!important;font-style:italic!important}.highlight .cs{color:#99968b!important;font-style:italic!important}.highlight .gd{color:#f6f3e8!important}.highlight .ge{color:#f6f3e8!important}.highlight .gr{color:#f6f3e8!important}.highlight .gh{color:#f6f3e8!important;font-weight:bold!important}.highlight .gi{color:#f6f3e8!important}.highlight .go{color:#808080!important;background-color:#303030!important}.highlight .gp{color:#f6f3e8!important}.highlight .gs{color:#f6f3e8!important}.highlight .gu{color:#f6f3e8!important;font-weight:bold!important}.highlight .gt{color:#f6f3e8!important}.highlight .kc{color:#8ac6f2!important}.highlight .kd{color:#8ac6f2!important}.highlight .kn{color:#8ac6f2!important}.highlight .kp{color:#8ac6f2!important}.highlight .kr{color:#8ac6f2!important}.highlight .kt{color:#cae682!important}.highlight .ld{color:#f6f3e8!important}.highlight .m{color:#e5786d!important}.highlight .s{color:#95e454!important;font-style:italic!important}.highlight .na{color:#cae682!important}.highlight .nb{color:#f6f3e8!important}.highlight .nc{color:#f6f3e8!important}.highlight .no{color:#e5786d!important}.highlight .nd{color:#f6f3e8!important}.highlight .ni{color:#e7f6da!important}.highlight .ne{color:#f6f3e8!important}.highlight .nf{color:#cae682!important}.highlight .nl{color:#f6f3e8!important}.highlight .nn{color:#f6f3e8!important}.highlight .nx{color:#f6f3e8!important}.highlight .py{color:#f6f3e8!important}.highlight .nt{color:#8ac6f2!important}.highlight .nv{color:#cae682!important}.highlight .ow{color:#f6f3e8!important}.highlight .w{color:#f6f3e8!important}.highlight .mf{color:#e5786d!important}.highlight .mh{color:#e5786d!important}.highlight .mi{color:#e5786d!important}.highlight .mo{color:#e5786d!important}.highlight .sb{color:#95e454!important;font-style:italic!important}.highlight .sc{color:#95e454!important;font-style:italic!important}.highlight .sd{color:#95e454!important;font-style:italic!important}.highlight .s2{color:#95e454!important;font-style:italic!important}.highlight .se{color:#95e454!important;font-style:italic!important}.highlight .sh{color:#95e454!important;font-style:italic!important}.highlight .si{color:#95e454!important;font-style:italic!important}.highlight .sx{color:#95e454!important;font-style:italic!important}.highlight .sr{color:#95e454!important;font-style:italic!important}.highlight .s1{color:#95e454!important;font-style:italic!important}.highlight .ss{color:#95e454!important;font-style:italic!important}.highlight .bp{color:#f6f3e8!important}.highlight .vc{color:#cae682!important}.highlight .vg{color:#cae682!important}.highlight .vi{color:#cae682!important}.highlight .il{color:#e5786d!important}span.highlight{background-color:#eee;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace}span.highlight .s{word-break:break-all;word-wrap:break-word}figure.highlight{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:12px;margin:8px 0;width:100%}figure.highlight pre{font-family:monospace;margin:0;padding:8px 8px 0}figure.highlight code{white-space:pre-wrap}body{margin:0}header{background-color:#3665f3}footer{margin-top:32px}main > div > h2{margin-bottom:12px;margin-top:24px;padding-top:8px}.page-grid{padding:8px}.skin-graphic{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;margin:48px auto 0 auto;max-width:600px;width:100%}.modules-expander{background:#eee;padding:4px}.modules-expander__tip{color:#767676;margin:4px 8px;text-align:center}.modules-expander__list{-webkit-column-count:2;-moz-column-count:2;column-count:2;font-size:20px;line-height:1.75em;list-style-type:none;margin:0;width:100%}.modules-expander[open]{padding-bottom:32px}.modules-expander__list a{text-decoration:none}.modules-expander .details__summary{padding:8px 0}.app-bar{-webkit-box-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;color:white;display:-webkit-box;display:flex;-webkit-box-pack:justify;justify-content:space-between;margin:0 8px;padding:16px 0}.app-bar__title{font-size:26px;font-weight:bold;margin:0}.app-bar__links{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;flex-shrink:0;list-style-type:none;margin-left:8px;padding:0}.app-bar__links li:not(:last-child)::after{content:'';margin:0 8px}.app-bar__links a{color:white;text-decoration:none}.modules-expander__list a:visited{color:#3665f3}.app-bar__links a:hover{text-decoration:underline}.app-bar__links a:focus{outline:2px dotted white}.app-bar__links a:visited{color:white}.section-header{display:-webkit-box;display:flex;margin:16px 0}.section-header h2{margin:0}.section-header__version{align-self:flex-end;background-color:#f5f5f5;margin-left:auto;padding:2px 4px}#about dl{margin:16px 0 32px 0}#about dt{font-weight:bold;margin:0 0 12px 0}#about dd{margin:0 0 12px 0}.demo{background-color:#fff;background-color:var(--color-background-default,#fff);border:1px dashed #e5e5e5}.demo--dark-mode{background-color:#171717;border:1px dashed #393939;color:#dcdcdc}.demo__inner{margin:8px}span.demo,span.demo__inner{display:inline-block}@media (prefers-color-scheme:dark){.skin-experiment-dark-mode header{background-color:#3665f3;background-color:var(--color-link-default,#3665f3)}.skin-experiment-dark-mode a.demo-link-visited{color:#82187c;color:var(--color-link-visited,#82187c)}.skin-experiment-dark-mode a.demo-link-visited:link,.skin-experiment-dark-mode a.demo-link-visited:visited{color:#82187c;color:var(--color-link-visited,#82187c)}.skin-experiment-dark-mode .section-header__version,.skin-experiment-dark-mode span.highlight{background-color:#414141}.skin-experiment-dark-mode .site-nav a,.skin-experiment-dark-mode .site-nav a:visited{color:#111820;color:var(--color-text-default,#111820)}.skin-experiment-dark-mode .site-nav a:hover{color:#111820;color:var(--color-text-default,#111820)}}.carousel__list--default-demo li{background-color:#f1f8fe;color:#111820;font-size:24px;font-weight:bold;height:120px;line-height:120px;margin-right:16px;text-align:center;width:200px}.carousel__list--discrete-demo li{background-color:#f1f8fe;-webkit-box-sizing:border-box;box-sizing:border-box;color:#111820;font-size:24px;font-weight:bold;height:120px;line-height:120px;margin-right:16px;text-align:center;width:calc(25% - 24px)}.carousel__list--slideshow-demo li{background-color:#f1f8fe;color:#111820;font-size:36px;font-weight:bold;height:300px;line-height:300px;margin-right:16px;text-align:center;width:100%}.carousel__list--discrete-demo li:last-child{margin-right:0}.carousel__list--slideshow-demo li:last-child{margin-right:0}.demo-colors{list-style:none;margin:0;padding:0}.demo-colors li{margin:1rem 0}.demo-colors li::before{content:'';display:block;height:1.25rem;margin-bottom:0.25rem;margin-right:1rem;vertical-align:middle;width:100%}a.demo-link-visited{color:#82187c}a.demo-link-visited:link,a.demo-link-visited:visited{color:#82187c}.utility-table{border:1px solid #e5e5e5;width:100%}.utility-table th{text-transform:uppercase}.utility-table th,.utility-table td{padding:8px 16px;text-align:left}.utility-table tbody tr:nth-child(odd){background-color:#f5f5f5}.utility-table td{border-top:1px solid #e5e5e5}span.icon{background-repeat:no-repeat;background-size:contain;display:inline-block;vertical-align:middle}.icon-table{margin:32px 0;width:100%}.icon-table th{background-color:#eee;padding:8px 6px;text-align:left}.icon-table th:first-child{width:100%}.icon-table th:not(:first-child){min-width:100px}.icon-table td{border-bottom:1px solid #eee;padding:4px 6px;text-align:left}.demo-color-white::before{background-color:#fff;outline:1px dashed #c7c7c7}.demo-color-grey1::before{background-color:#f5f5f5}.demo-color-grey2::before{background-color:#e5e5e5}.demo-color-grey3::before{background-color:#c7c7c7}.demo-color-grey4::before{background-color:#a2a2a2}.demo-color-grey5::before{background-color:#767676}.demo-color-grey6::before{background-color:#414141}.demo-color-black::before{background-color:#111820}.demo-color-background-default::before{background-color:#fff;outline:1px dashed #c7c7c7}.demo-color-background-default-dark-mode::before{background-color:#171717;outline:1px dashed #dcdcdc}.demo-color-text-default::before{background-color:#111820}.demo-color-text-default-dark-mode::before{background-color:#dcdcdc}.demo-color-text-secondary::before{background-color:#767676}.demo-color-text-secondary-dark-mode::before{background-color:#9c9c9c}.demo-color-text-disabled::before{background-color:#c7c7c7}.demo-color-text-disabled-dark-mode::before{background-color:#4d4d4d}.demo-color-text-confirmation::before{background-color:#05823f}.demo-color-text-confirmation-dark-mode::before{background-color:#24bc6b}.demo-color-action-secondary::before{background-color:#767676}.demo-color-action-secondary-dark-mode::before{background-color:#9c9c9c}.demo-color-action-disabled::before{background-color:#c7c7c7}.demo-color-action-disabled-dark-mode::before{background-color:#4d4d4d}.demo-color-link-default::before{background-color:#3665f3}.demo-color-link-default-dark-mode::before{background-color:#5192ff}.demo-color-link-hover::before{background-color:#2b0eaf}.demo-color-link-hover-dark-mode::before{background-color:#94bcff}.demo-color-link-visited::before{background-color:#82187c}.demo-color-link-visited-dark-mode::before{background-color:#d2a4cf}.demo-color-action-primary::before{background-color:#3665f3}.demo-color-action-primary-dark-mode::before{background-color:#5192ff}.demo-color-action-hover::before{background-color:#2b0eaf}.demo-color-action-hover-dark-mode::before{background-color:#94bcff}.demo-color-action-destroy::before{background-color:#e62048}.demo-color-action-destroy-dark-mode::before{background-color:#e75064}.demo-color-status-information::before{background-color:#3665f3}.demo-color-status-information-dark-mode::before{background-color:#5192ff}.demo-color-status-confirmation::before{background-color:#28a443}.demo-color-status-confirmation-dark-mode::before{background-color:#24bc6b}.demo-color-status-attention::before{background-color:#e62048}.demo-color-status-attention-dark-mode::before{background-color:#e75064}.demo-color-separator::before{background-color:#e5e5e5}.demo-color-separator-dark-mode::before{background-color:#393939}.demo-color-image-border::before{background-color:#e5e5e5}.demo-color-image-border-dark-mode::before{background-color:#393939}.demo-typography{list-style:none;margin:0;padding:0}.demo-typography li{margin:1rem 0}@media only screen and (min-width:601px){.page-grid{display:grid;margin:0 auto;max-width:600px;width:100%}header{background-color:#3665f3;padding:0 8px}main{grid-column-end:2;grid-column-start:2;grid-row-end:1;grid-row-start:1;overflow-x:hidden;padding-left:8px}footer{grid-column-end:2;grid-column-start:2;grid-row-end:2;grid-row-start:2}.app-bar{margin:0 auto;max-width:600px;padding-left:8px;width:100%}.site-nav{grid-column-end:1;grid-column-start:1;grid-row-end:1;grid-row-start:1;height:100vh;overflow-y:scroll;padding-left:8px;padding-right:24px;position:-webkit-sticky;position:sticky;top:0}.site-nav h2{color:#767676;margin-bottom:12px;margin-top:24px;text-transform:uppercase}.site-nav h2:first-of-type{margin-top:32px}.site-nav ul{line-height:1.5em;list-style-type:none;margin:0;padding:0}.site-nav ul:last-child{padding-bottom:32px}.site-nav a{text-decoration:none}.site-nav a:visited{color:#3665f3}.demo-colors li::before{display:inline-block;width:10rem}}@media only screen and (min-width:961px){#about dl{-webkit-column-count:2;-moz-column-count:2;column-count:2}.app-bar{max-width:960px}.page-grid{grid-column-gap:16px;max-width:960px}}@media only screen and (min-width:1281px){.app-bar{max-width:1280px}.page-grid{grid-column-gap:32px;max-width:1280px}}.demo-color-b1::before{background-color:#c5e5fb}.demo-color-b3::before{background-color:#659eff}.demo-color-b4::before{background-color:#3665f3}.demo-color-b6::before{background-color:#2b0eaf}.demo-color-r1::before{background-color:#ffd1dd}.demo-color-r3::before{background-color:#ff6383}.demo-color-r4::before{background-color:#e62048}.demo-color-r6::before{background-color:#a00739}.demo-color-g1::before{background-color:#ccfdce}.demo-color-g3::before{background-color:#5ee471}.demo-color-g4::before{background-color:#28a443}.demo-color-g6::before{background-color:#05823f}.demo-color-m1::before{background-color:#fad8f0}.demo-color-m3::before{background-color:#ea5fbc}.demo-color-m4::before{background-color:#82187c}.demo-color-o1::before{background-color:#ffdec7}.demo-color-o3::before{background-color:#ff8559}.demo-color-o4::before{background-color:#ff6932}.demo-color-o6::before{background-color:#b03005}.demo-color-b2::before{background-color:#93c9ff}.demo-color-b5::before{background-color:#382aef}.demo-color-b7::before{background-color:#121258}.demo-color-r2::before{background-color:#ffa2b6}.demo-color-r5::before{background-color:#c4003a}.demo-color-r7::before{background-color:#680226}.demo-color-y1::before{background-color:#fcf2bd}.demo-color-y2::before{background-color:#f7e376}.demo-color-y3::before{background-color:#fbcd25}.demo-color-y4::before{background-color:#f7b100}.demo-color-y5::before{background-color:#e58c02}.demo-color-y6::before{background-color:#aa5404}.demo-color-y7::before{background-color:#592e13}.demo-color-g2::before{background-color:#9ef4a6}.demo-color-g5::before{background-color:#1bab49}.demo-color-g7::before{background-color:#07522c}.demo-color-o2::before{background-color:#feb786}.demo-color-o5::before{background-color:#db3c07}.demo-color-o6::before{background-color:#b03005}.demo-color-o7::before{background-color:#5c1b05}.demo-color-m2::before{background-color:#f5a0d9}.demo-color-m5::before{background-color:#a60d8a}.demo-color-m6::before{background-color:#82187c}.demo-color-m7::before{background-color:#500750}.demo-color-t1::before{background-color:#c2f2ef}.demo-color-t2::before{background-color:#71e3e2}.demo-color-t3::before{background-color:#1dcbca}.demo-color-t4::before{background-color:#02a2ac}.demo-color-t5::before{background-color:#01718f}.demo-color-t6::before{background-color:#0e4a6c}.demo-color-t7::before{background-color:#003147}.demo-color-l1::before{background-color:#f4fabe}.demo-color-l2::before{background-color:#e9f577}.demo-color-l3::before{background-color:#c9e43b}.demo-color-l4::before{background-color:#accf02}.demo-color-l5::before{background-color:#86b300}.demo-color-l6::before{background-color:#4b7d06}.demo-color-l7::before{background-color:#364f03}.carousel__list--default-demo li{border-radius:8px}.carousel__list--discrete-demo li{border-radius:8px}.carousel__list--slideshow-demo li{border-radius:8px} +figure .highlight,.highlight pre,.highlight table{background:#242424!important;color:#f6f3e8!important}.highlight .hll{background-color:#ffc!important}.highlight .c{color:#99968b!important;font-style:italic!important}.highlight .err{color:#f6f3e8!important}.highlight .g{color:#f6f3e8!important}.highlight .k{color:#8ac6f2!important}.highlight .l{color:#f6f3e8!important}.highlight .n,.highlight .h{color:#f6f3e8!important}.highlight .o{color:#f6f3e8!important}.highlight .x{color:#f6f3e8!important}.highlight .p{color:#f6f3e8!important}.highlight .cm{color:#99968b!important;font-style:italic!important}.highlight .cp{color:#e5786d!important}.highlight .c1{color:#99968b!important;font-style:italic!important}.highlight .cs{color:#99968b!important;font-style:italic!important}.highlight .gd{color:#f6f3e8!important}.highlight .ge{color:#f6f3e8!important}.highlight .gr{color:#f6f3e8!important}.highlight .gh{color:#f6f3e8!important;font-weight:bold!important}.highlight .gi{color:#f6f3e8!important}.highlight .go{color:#808080!important;background-color:#303030!important}.highlight .gp{color:#f6f3e8!important}.highlight .gs{color:#f6f3e8!important}.highlight .gu{color:#f6f3e8!important;font-weight:bold!important}.highlight .gt{color:#f6f3e8!important}.highlight .kc{color:#8ac6f2!important}.highlight .kd{color:#8ac6f2!important}.highlight .kn{color:#8ac6f2!important}.highlight .kp{color:#8ac6f2!important}.highlight .kr{color:#8ac6f2!important}.highlight .kt{color:#cae682!important}.highlight .ld{color:#f6f3e8!important}.highlight .m{color:#e5786d!important}.highlight .s{color:#95e454!important;font-style:italic!important}.highlight .na{color:#cae682!important}.highlight .nb{color:#f6f3e8!important}.highlight .nc{color:#f6f3e8!important}.highlight .no{color:#e5786d!important}.highlight .nd{color:#f6f3e8!important}.highlight .ni{color:#e7f6da!important}.highlight .ne{color:#f6f3e8!important}.highlight .nf{color:#cae682!important}.highlight .nl{color:#f6f3e8!important}.highlight .nn{color:#f6f3e8!important}.highlight .nx{color:#f6f3e8!important}.highlight .py{color:#f6f3e8!important}.highlight .nt{color:#8ac6f2!important}.highlight .nv{color:#cae682!important}.highlight .ow{color:#f6f3e8!important}.highlight .w{color:#f6f3e8!important}.highlight .mf{color:#e5786d!important}.highlight .mh{color:#e5786d!important}.highlight .mi{color:#e5786d!important}.highlight .mo{color:#e5786d!important}.highlight .sb{color:#95e454!important;font-style:italic!important}.highlight .sc{color:#95e454!important;font-style:italic!important}.highlight .sd{color:#95e454!important;font-style:italic!important}.highlight .s2{color:#95e454!important;font-style:italic!important}.highlight .se{color:#95e454!important;font-style:italic!important}.highlight .sh{color:#95e454!important;font-style:italic!important}.highlight .si{color:#95e454!important;font-style:italic!important}.highlight .sx{color:#95e454!important;font-style:italic!important}.highlight .sr{color:#95e454!important;font-style:italic!important}.highlight .s1{color:#95e454!important;font-style:italic!important}.highlight .ss{color:#95e454!important;font-style:italic!important}.highlight .bp{color:#f6f3e8!important}.highlight .vc{color:#cae682!important}.highlight .vg{color:#cae682!important}.highlight .vi{color:#cae682!important}.highlight .il{color:#e5786d!important}span.highlight{background-color:#eee;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace}span.highlight .s{word-break:break-all;word-wrap:break-word}figure.highlight{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:12px;margin:8px 0;width:100%}figure.highlight pre{font-family:monospace;margin:0;padding:8px 8px 0}figure.highlight code{white-space:pre-wrap}body{margin:0}header{background-color:#3665f3}footer{margin-top:32px}main > div > h2{margin-bottom:12px;margin-top:24px;padding-top:8px}.page-grid{padding:8px}.skin-graphic{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;margin:48px auto 0 auto;max-width:600px;width:100%}.modules-expander{background:#eee;padding:4px}.modules-expander__tip{color:#767676;margin:4px 8px;text-align:center}.modules-expander__list{-webkit-column-count:2;-moz-column-count:2;column-count:2;font-size:20px;line-height:1.75em;list-style-type:none;margin:0;width:100%}.modules-expander[open]{padding-bottom:32px}.modules-expander__list a{text-decoration:none}.modules-expander .details__summary{padding:8px 0}.app-bar{-webkit-box-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;color:white;display:-webkit-box;display:flex;-webkit-box-pack:justify;justify-content:space-between;margin:0 8px;padding:16px 0}.app-bar__title{font-size:26px;font-weight:bold;margin:0}.app-bar__links{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;flex-shrink:0;list-style-type:none;margin-left:8px;padding:0}.app-bar__links li:not(:last-child)::after{content:'';margin:0 8px}.app-bar__links a{color:white;text-decoration:none}.modules-expander__list a:visited{color:#3665f3}.app-bar__links a:hover{text-decoration:underline}.app-bar__links a:focus{outline:1px auto white}.app-bar__links a:visited{color:white}.section-header{display:-webkit-box;display:flex;margin:16px 0}.section-header h2{margin:0}.section-header__version{align-self:flex-end;background-color:#f5f5f5;margin-left:auto;padding:2px 4px}#about dl{margin:16px 0 32px 0}#about dt{font-weight:bold;margin:0 0 12px 0}#about dd{margin:0 0 12px 0}.demo{background-color:#fff;background-color:var(--color-background-default,#fff);border:1px dashed #e5e5e5}.demo--dark-mode{background-color:#171717;border:1px dashed #393939;color:#dcdcdc}.demo__inner{margin:8px}span.demo,span.demo__inner{display:inline-block}@media (prefers-color-scheme:dark){.skin-experiment-dark-mode header{background-color:#3665f3;background-color:var(--color-link-default,#3665f3)}.skin-experiment-dark-mode a.demo-link-visited{color:#82187c;color:var(--color-link-visited,#82187c)}.skin-experiment-dark-mode a.demo-link-visited:link,.skin-experiment-dark-mode a.demo-link-visited:visited{color:#82187c;color:var(--color-link-visited,#82187c)}.skin-experiment-dark-mode .section-header__version,.skin-experiment-dark-mode span.highlight{background-color:#414141}.skin-experiment-dark-mode .site-nav a,.skin-experiment-dark-mode .site-nav a:visited{color:#111820;color:var(--color-text-default,#111820)}.skin-experiment-dark-mode .site-nav a:hover{color:#111820;color:var(--color-text-default,#111820)}}.carousel__list--default-demo li{background-color:#f1f8fe;color:#111820;font-size:24px;font-weight:bold;height:120px;line-height:120px;margin-right:16px;text-align:center;width:200px}.carousel__list--discrete-demo li{background-color:#f1f8fe;-webkit-box-sizing:border-box;box-sizing:border-box;color:#111820;font-size:24px;font-weight:bold;height:120px;line-height:120px;margin-right:16px;text-align:center;width:calc(25% - 24px)}.carousel__list--slideshow-demo li{background-color:#f1f8fe;color:#111820;font-size:36px;font-weight:bold;height:300px;line-height:300px;margin-right:16px;text-align:center;width:100%}.carousel__list--discrete-demo li:last-child{margin-right:0}.carousel__list--slideshow-demo li:last-child{margin-right:0}.demo-colors{list-style:none;margin:0;padding:0}.demo-colors li{margin:1rem 0}.demo-colors li::before{content:'';display:block;height:1.25rem;margin-bottom:0.25rem;margin-right:1rem;vertical-align:middle;width:100%}a.demo-link-visited{color:#82187c}a.demo-link-visited:link,a.demo-link-visited:visited{color:#82187c}.utility-table{border:1px solid #e5e5e5;width:100%}.utility-table th{text-transform:uppercase}.utility-table th,.utility-table td{padding:8px 16px;text-align:left}.utility-table tbody tr:nth-child(odd){background-color:#f5f5f5}.utility-table td{border-top:1px solid #e5e5e5}span.icon{background-repeat:no-repeat;background-size:contain;display:inline-block;vertical-align:middle}.icon-table{margin:32px 0;width:100%}.icon-table th{background-color:#eee;padding:8px 6px;text-align:left}.icon-table th:first-child{width:100%}.icon-table th:not(:first-child){min-width:100px}.icon-table td{border-bottom:1px solid #eee;padding:4px 6px;text-align:left}.demo-color-white::before{background-color:#fff;outline:1px dashed #c7c7c7}.demo-color-grey1::before{background-color:#f5f5f5}.demo-color-grey2::before{background-color:#e5e5e5}.demo-color-grey3::before{background-color:#c7c7c7}.demo-color-grey4::before{background-color:#a2a2a2}.demo-color-grey5::before{background-color:#767676}.demo-color-grey6::before{background-color:#414141}.demo-color-black::before{background-color:#111820}.demo-color-background-default::before{background-color:#fff;outline:1px dashed #c7c7c7}.demo-color-background-default-dark-mode::before{background-color:#171717;outline:1px dashed #dcdcdc}.demo-color-text-default::before{background-color:#111820}.demo-color-text-default-dark-mode::before{background-color:#dcdcdc}.demo-color-text-secondary::before{background-color:#767676}.demo-color-text-secondary-dark-mode::before{background-color:#9c9c9c}.demo-color-text-disabled::before{background-color:#c7c7c7}.demo-color-text-disabled-dark-mode::before{background-color:#4d4d4d}.demo-color-text-confirmation::before{background-color:#05823f}.demo-color-text-confirmation-dark-mode::before{background-color:#24bc6b}.demo-color-action-secondary::before{background-color:#767676}.demo-color-action-secondary-dark-mode::before{background-color:#9c9c9c}.demo-color-action-disabled::before{background-color:#c7c7c7}.demo-color-action-disabled-dark-mode::before{background-color:#4d4d4d}.demo-color-link-default::before{background-color:#3665f3}.demo-color-link-default-dark-mode::before{background-color:#5192ff}.demo-color-link-hover::before{background-color:#2b0eaf}.demo-color-link-hover-dark-mode::before{background-color:#94bcff}.demo-color-link-visited::before{background-color:#82187c}.demo-color-link-visited-dark-mode::before{background-color:#d2a4cf}.demo-color-action-primary::before{background-color:#3665f3}.demo-color-action-primary-dark-mode::before{background-color:#5192ff}.demo-color-action-hover::before{background-color:#2b0eaf}.demo-color-action-hover-dark-mode::before{background-color:#94bcff}.demo-color-action-destroy::before{background-color:#e62048}.demo-color-action-destroy-dark-mode::before{background-color:#e75064}.demo-color-status-information::before{background-color:#3665f3}.demo-color-status-information-dark-mode::before{background-color:#5192ff}.demo-color-status-confirmation::before{background-color:#28a443}.demo-color-status-confirmation-dark-mode::before{background-color:#24bc6b}.demo-color-status-attention::before{background-color:#e62048}.demo-color-status-attention-dark-mode::before{background-color:#e75064}.demo-color-separator::before{background-color:#e5e5e5}.demo-color-separator-dark-mode::before{background-color:#393939}.demo-color-image-border::before{background-color:#e5e5e5}.demo-color-image-border-dark-mode::before{background-color:#393939}.demo-typography{list-style:none;margin:0;padding:0}.demo-typography li{margin:1rem 0}@media only screen and (min-width:601px){.page-grid{display:grid;margin:0 auto;max-width:600px;width:100%}header{background-color:#3665f3;padding:0 8px}main{grid-column-end:2;grid-column-start:2;grid-row-end:1;grid-row-start:1;overflow-x:hidden;padding-left:8px}footer{grid-column-end:2;grid-column-start:2;grid-row-end:2;grid-row-start:2}.app-bar{margin:0 auto;max-width:600px;padding-left:8px;width:100%}.site-nav{grid-column-end:1;grid-column-start:1;grid-row-end:1;grid-row-start:1;height:100vh;overflow-y:scroll;padding-left:8px;padding-right:24px;position:-webkit-sticky;position:sticky;top:0}.site-nav h2{color:#767676;margin-bottom:12px;margin-top:24px;text-transform:uppercase}.site-nav h2:first-of-type{margin-top:32px}.site-nav ul{line-height:1.5em;list-style-type:none;margin:0;padding:0}.site-nav ul:last-child{padding-bottom:32px}.site-nav a{text-decoration:none}.site-nav a:visited{color:#3665f3}.demo-colors li::before{display:inline-block;width:10rem}}@media only screen and (min-width:961px){#about dl{-webkit-column-count:2;-moz-column-count:2;column-count:2}.app-bar{max-width:960px}.page-grid{grid-column-gap:16px;max-width:960px}}@media only screen and (min-width:1281px){.app-bar{max-width:1280px}.page-grid{grid-column-gap:32px;max-width:1280px}}.demo-color-b1::before{background-color:#c5e5fb}.demo-color-b3::before{background-color:#659eff}.demo-color-b4::before{background-color:#3665f3}.demo-color-b6::before{background-color:#2b0eaf}.demo-color-r1::before{background-color:#ffd1dd}.demo-color-r3::before{background-color:#ff6383}.demo-color-r4::before{background-color:#e62048}.demo-color-r6::before{background-color:#a00739}.demo-color-g1::before{background-color:#ccfdce}.demo-color-g3::before{background-color:#5ee471}.demo-color-g4::before{background-color:#28a443}.demo-color-g6::before{background-color:#05823f}.demo-color-m1::before{background-color:#fad8f0}.demo-color-m3::before{background-color:#ea5fbc}.demo-color-m4::before{background-color:#82187c}.demo-color-o1::before{background-color:#ffdec7}.demo-color-o3::before{background-color:#ff8559}.demo-color-o4::before{background-color:#ff6932}.demo-color-o6::before{background-color:#b03005}.demo-color-b2::before{background-color:#93c9ff}.demo-color-b5::before{background-color:#382aef}.demo-color-b7::before{background-color:#121258}.demo-color-r2::before{background-color:#ffa2b6}.demo-color-r5::before{background-color:#c4003a}.demo-color-r7::before{background-color:#680226}.demo-color-y1::before{background-color:#fcf2bd}.demo-color-y2::before{background-color:#f7e376}.demo-color-y3::before{background-color:#fbcd25}.demo-color-y4::before{background-color:#f7b100}.demo-color-y5::before{background-color:#e58c02}.demo-color-y6::before{background-color:#aa5404}.demo-color-y7::before{background-color:#592e13}.demo-color-g2::before{background-color:#9ef4a6}.demo-color-g5::before{background-color:#1bab49}.demo-color-g7::before{background-color:#07522c}.demo-color-o2::before{background-color:#feb786}.demo-color-o5::before{background-color:#db3c07}.demo-color-o6::before{background-color:#b03005}.demo-color-o7::before{background-color:#5c1b05}.demo-color-m2::before{background-color:#f5a0d9}.demo-color-m5::before{background-color:#a60d8a}.demo-color-m6::before{background-color:#82187c}.demo-color-m7::before{background-color:#500750}.demo-color-t1::before{background-color:#c2f2ef}.demo-color-t2::before{background-color:#71e3e2}.demo-color-t3::before{background-color:#1dcbca}.demo-color-t4::before{background-color:#02a2ac}.demo-color-t5::before{background-color:#01718f}.demo-color-t6::before{background-color:#0e4a6c}.demo-color-t7::before{background-color:#003147}.demo-color-l1::before{background-color:#f4fabe}.demo-color-l2::before{background-color:#e9f577}.demo-color-l3::before{background-color:#c9e43b}.demo-color-l4::before{background-color:#accf02}.demo-color-l5::before{background-color:#86b300}.demo-color-l6::before{background-color:#4b7d06}.demo-color-l7::before{background-color:#364f03}.carousel__list--default-demo li{border-radius:8px}.carousel__list--discrete-demo li{border-radius:8px}.carousel__list--slideshow-demo li{border-radius:8px} diff --git a/src/less/breadcrumbs/base/breadcrumbs.less b/src/less/breadcrumbs/base/breadcrumbs.less index a391f1476e..d39d16dc41 100644 --- a/src/less/breadcrumbs/base/breadcrumbs.less +++ b/src/less/breadcrumbs/base/breadcrumbs.less @@ -64,6 +64,16 @@ nav.breadcrumbs { } } // stylelint-enable no-descending-specificity + + a:focus, + button:focus { + outline: 1px auto @color-text-secondary; + outline-offset: 1px; + + &:not(:focus-visible) { + outline: none; + } + } } @media (min-width: 601px) { diff --git a/src/less/carousel/base/carousel.less b/src/less/carousel/base/carousel.less index 17d7849f55..25bf2b202a 100644 --- a/src/less/carousel/base/carousel.less +++ b/src/less/carousel/base/carousel.less @@ -80,6 +80,15 @@ div.carousel { .carousel-paddle-mixin-base(); } +.carousel__playback:focus { + outline: 1px auto @color-text-secondary; + outline-offset: 1px; + + &:not(:focus-visible) { + outline: none; + } +} + span.carousel, span.carousel__container { display: inline-block; diff --git a/src/less/checkbox/base/checkbox.less b/src/less/checkbox/base/checkbox.less index 8521a4a2c3..2150f711d3 100644 --- a/src/less/checkbox/base/checkbox.less +++ b/src/less/checkbox/base/checkbox.less @@ -74,10 +74,6 @@ input.checkbox__control[type="checkbox"]:checked + span.checkbox__icon svg.check display: none; } -input.checkbox__control[type="checkbox"]:focus + span.checkbox__icon { - outline: 1px dotted @checkbox-custom-outline-color; -} - input.checkbox__control[type="checkbox"][disabled] + span.checkbox__icon { opacity: @checkbox-disabled-opacity; @@ -85,3 +81,13 @@ input.checkbox__control[type="checkbox"][disabled] + span.checkbox__icon { fill: @checkbox-disabled-color; } } + +// https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/ +input.checkbox__control[type="checkbox"]:focus + span.checkbox__icon { + outline: @checkbox-custom-outline; + outline-offset: 2px; +} + +input.checkbox__control[type="checkbox"]:focus:not(:focus-visible) + span.checkbox__icon { + outline: none; +} diff --git a/src/less/details/base/details.less b/src/less/details/base/details.less index ed888f1abe..de0fee4b46 100644 --- a/src/less/details/base/details.less +++ b/src/less/details/base/details.less @@ -53,3 +53,12 @@ details.details[open] { content: none; } } + +// https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/ +details.details summary:focus { + outline: 1px auto @color-text-secondary; + + &:not(:focus-visible) { + outline: none; + } +} diff --git a/src/less/drawer-dialog/base/drawer-dialog.less b/src/less/drawer-dialog/base/drawer-dialog.less index a1eb2304a7..b5c8b0cbd5 100644 --- a/src/less/drawer-dialog/base/drawer-dialog.less +++ b/src/less/drawer-dialog/base/drawer-dialog.less @@ -137,3 +137,11 @@ button.drawer-dialog__close { transform: translateX(0); } } + +.drawer-dialog__handle:focus { + outline: 1px auto @color-text-secondary; + + &:not(:focus-visible) { + outline: none; + } +} diff --git a/src/less/filter-button/base/filter-button.less b/src/less/filter-button/base/filter-button.less index 47edde4129..8680f0e941 100644 --- a/src/less/filter-button/base/filter-button.less +++ b/src/less/filter-button/base/filter-button.less @@ -71,3 +71,18 @@ a.filter-link--selected:not([href]):hover, a.filter-link--selected[aria-disabled="true"]:hover { background-color: @filter-button-selected-background-color; } + +/* stylelint-disable no-descending-specificity */ + +// https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/ +button.filter-button:focus, +a.filter-link:focus { + outline: 1px auto @color-text-secondary; + outline-offset: 2px; + + &:not(:focus-visible) { + outline: none; + } +} + +/* stylelint-enable no-descending-specificity */ diff --git a/src/less/global/base/global.less b/src/less/global/base/global.less index 05495286df..55be05cfbb 100644 --- a/src/less/global/base/global.less +++ b/src/less/global/base/global.less @@ -26,4 +26,9 @@ a { &:hover { .customColorProperty(color-link-hover); } + + &:focus { + outline: 1px auto @color-text-secondary; + outline-offset: 2px; + } } diff --git a/src/less/icon-button/base/icon-button.less b/src/less/icon-button/base/icon-button.less index 82d5e01199..7f3022dcf4 100644 --- a/src/less/icon-button/base/icon-button.less +++ b/src/less/icon-button/base/icon-button.less @@ -117,3 +117,12 @@ button.img-btn { } } } + +button.icon-btn:focus, +a.icon-link:focus { + outline: 1px auto @color-text-secondary; + + &:not(:focus-visible) { + outline: none; + } +} diff --git a/src/less/listbox-button/base/listbox-button.less b/src/less/listbox-button/base/listbox-button.less index 5369829226..f08a42dd85 100644 --- a/src/less/listbox-button/base/listbox-button.less +++ b/src/less/listbox-button/base/listbox-button.less @@ -82,3 +82,12 @@ span.listbox-button__value { flex: 1 0 auto; } + +// https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/ +.listbox-button__options:focus { + outline: 1px auto @color-text-secondary; + + &:not(:focus-visible) { + outline: none; + } +} diff --git a/src/less/listbox/base/listbox.less b/src/less/listbox/base/listbox.less index 8b89e505f5..3188576cbc 100644 --- a/src/less/listbox/base/listbox.less +++ b/src/less/listbox/base/listbox.less @@ -53,3 +53,12 @@ div.listbox__option[aria-selected="true"] svg.icon { div.listbox__option[role="option"]:active svg.icon { .customColorProperty(dropdown-item-active-status-color); } + +// https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/ +.listbox__options:focus { + outline: 1px auto @color-text-secondary; + + &:not(:focus-visible) { + outline: none; + } +} diff --git a/src/less/menu-button/base/menu-button.less b/src/less/menu-button/base/menu-button.less index 718682fb51..61f14b7e78 100644 --- a/src/less/menu-button/base/menu-button.less +++ b/src/less/menu-button/base/menu-button.less @@ -192,3 +192,12 @@ hr.menu-button__separator { border-width: 1px; margin: 0; } + +// https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/ +div.menu-button__item[role^="menuitem"]:focus { + outline: 1px auto @color-text-secondary; + + &:not(:focus-visible) { + outline: none; + } +} diff --git a/src/less/menu/base/menu.less b/src/less/menu/base/menu.less index 69d4632759..fa848bd547 100644 --- a/src/less/menu/base/menu.less +++ b/src/less/menu/base/menu.less @@ -127,3 +127,12 @@ hr.menu__separator { border-style: solid; border-width: 1px; } + +// https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/ +div.menu__item[role^="menuitem"]:focus { + outline: 1px auto @color-text-secondary; + + &:not(:focus-visible) { + outline: none; + } +} diff --git a/src/less/mixins/button/base/button-mixins.less b/src/less/mixins/button/base/button-mixins.less index 81231e2bf4..fe1636f0f6 100644 --- a/src/less/mixins/button/base/button-mixins.less +++ b/src/less/mixins/button/base/button-mixins.less @@ -16,6 +16,16 @@ height: 40px; } + + // https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/ + &:focus { + outline: 1px auto @color-text-secondary; + outline-offset: 2px; + + &:not(:focus-visible) { + outline: none; + } + } } .btn-icon-base() { diff --git a/src/less/mixins/carousel/base/carousel-mixins.less b/src/less/mixins/carousel/base/carousel-mixins.less index 2dd35ca0bd..17b949e103 100644 --- a/src/less/mixins/carousel/base/carousel-mixins.less +++ b/src/less/mixins/carousel/base/carousel-mixins.less @@ -47,6 +47,16 @@ .customColorProperty(carousel-paddle-foreground-color); } + // https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/ + &:focus { + outline: 1px auto @color-text-secondary; + outline-offset: 2px; + + &:not(:focus-visible) { + outline: none; + } + } + // progressive enhancement for browsers with support // :focus-within and :hover cannot be combined as // IE/Edge will discard the entire rule diff --git a/src/less/pagination/base/pagination.less b/src/less/pagination/base/pagination.less index fb46ae5582..1fd97b5e05 100644 --- a/src/less/pagination/base/pagination.less +++ b/src/less/pagination/base/pagination.less @@ -97,6 +97,17 @@ nav.pagination--fluid ol.pagination__items li { flex: 1 0 48px; } +// https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/ +a.pagination__item:focus, +button.pagination__item:focus { + outline: 1px auto @color-text-secondary; + outline-offset: -2px; + + &:not(:focus-visible) { + outline: none; + } +} + @media (min-width: 601px) { nav.pagination { margin: 16px 0; diff --git a/src/less/radio/base/radio.less b/src/less/radio/base/radio.less index c81ef95145..050e445113 100644 --- a/src/less/radio/base/radio.less +++ b/src/less/radio/base/radio.less @@ -74,10 +74,6 @@ input.radio__control[type="radio"]:checked + span.radio__icon svg.radio__uncheck display: none; } -input.radio__control[type="radio"]:focus + span.radio__icon { - outline: 1px dotted @radio-custom-outline-color; -} - input.radio__control[type="radio"][disabled] + span.radio__icon { opacity: @radio-disabled-opacity; @@ -85,3 +81,13 @@ input.radio__control[type="radio"][disabled] + span.radio__icon { fill: @radio-disabled-color; } } + +// https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/ +input.radio__control[type="radio"]:focus + span.radio__icon { + outline: @radio-custom-outline; + outline-offset: 2px; +} + +input.radio__control[type="radio"]:focus:not(:focus-visible) + span.radio__icon { + outline: none; +} diff --git a/src/less/select/base/select.less b/src/less/select/base/select.less index 0b86a9d40e..b746e3454e 100644 --- a/src/less/select/base/select.less +++ b/src/less/select/base/select.less @@ -64,6 +64,7 @@ span.select { .customBackgroundColorProperty(select-focus-background-color); outline: 0; + text-decoration: underline; } // custom IE pseudo selector for the arrow @@ -95,6 +96,11 @@ span.select { border-width: 1px; } +.select select[disabled] + svg { + color: @select-disabled-foregound-color; +} + +/* stylelint-disable no-descending-specificity */ [dir="rtl"] { .select > select { padding-left: 30px; @@ -111,7 +117,4 @@ span.select { right: auto; } } - -.select select[disabled] + svg { - color: @select-disabled-foregound-color; -} +/* stylelint-enable no-descending-specificity */ diff --git a/src/less/switch/base/switch.less b/src/less/switch/base/switch.less index a201e6d2ac..086d5eb731 100644 --- a/src/less/switch/base/switch.less +++ b/src/less/switch/base/switch.less @@ -56,14 +56,6 @@ span.switch__control { z-index: 1; } -input.switch__control { - opacity: 0; - - &:focus + span.switch__button { - outline: 1px dotted @switch-custom-outline-color; - } -} - input.switch__control[disabled] + span.switch__button { .customBackgroundColorProperty(switch-disabled-background-color); } @@ -76,6 +68,19 @@ span.switch__control[aria-disabled="true"] + span.switch__button { .customBackgroundColorProperty(switch-disabled-background-color); } +input.switch__control { + opacity: 0; + + &:focus + span.switch__button { + outline: 1px auto @switch-custom-outline-color; + outline-offset: 2px; + } + + &:focus:not(:focus-visible) + span.switch__button { + outline: none; + } +} + span.switch__control[aria-checked="true"] + span.switch__button::after { left: 19px; } @@ -85,6 +90,16 @@ span.switch__control:not([aria-disabled="true"])[aria-checked="true"] + span.swi .customBackgroundColorProperty(switch-checked-background-color); } +// https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/ +span.switch__control:focus { + outline: 1px auto @color-text-secondary; + outline-offset: 2px; + + &:not(:focus-visible) { + outline: none; + } +} + @media screen and (-ms-high-contrast: active) { input.switch__control { opacity: 1; diff --git a/src/less/tabs/base/tabs.less b/src/less/tabs/base/tabs.less index 614e8b57ca..5eda5294ff 100644 --- a/src/less/tabs/base/tabs.less +++ b/src/less/tabs/base/tabs.less @@ -82,3 +82,13 @@ li.fake-tabs__item--current > a[aria-current="page"] { position: relative; top: -1px; } + +// https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/ +div.tabs__item[role="tab"]:focus, +li.fake-tabs__item a:focus { + outline: 1px auto @color-text-secondary; + + &:not(:focus-visible) { + outline: none; + } +} diff --git a/src/less/toast-dialog/base/toast-dialog.less b/src/less/toast-dialog/base/toast-dialog.less index 0f80e426cc..0ffdf80a48 100644 --- a/src/less/toast-dialog/base/toast-dialog.less +++ b/src/less/toast-dialog/base/toast-dialog.less @@ -3,8 +3,7 @@ .toast-dialog-outline() { .customOutlineColorProperty(toast-dialog-foreground-color); - outline-offset: -8px; - outline-style: dotted; + outline-style: auto; outline-width: 1px; } @@ -84,6 +83,8 @@ button.toast-dialog__close { &:focus { .toast-dialog-outline(); + + outline-offset: -8px; } } diff --git a/src/less/variables/ds4/checkbox-variables.less b/src/less/variables/ds4/checkbox-variables.less index 3d00b2bcc6..e0e0be2207 100644 --- a/src/less/variables/ds4/checkbox-variables.less +++ b/src/less/variables/ds4/checkbox-variables.less @@ -6,4 +6,4 @@ @checkbox-unchecked-color: @color-text-default; @checkbox-disabled-opacity: 1; @checkbox-disabled-color: @color-action-disabled; -@checkbox-custom-outline-color: @color-text-secondary; +@checkbox-custom-outline: 1px auto @color-text-secondary; diff --git a/src/less/variables/ds4/radio-variables.less b/src/less/variables/ds4/radio-variables.less index 3843572648..e048eb60b6 100644 --- a/src/less/variables/ds4/radio-variables.less +++ b/src/less/variables/ds4/radio-variables.less @@ -6,4 +6,4 @@ @radio-unchecked-color: @color-text-default; @radio-disabled-opacity: 1; @radio-disabled-color: @color-disabled; -@radio-custom-outline-color: @color-text-secondary; +@radio-custom-outline: 1px auto @color-text-secondary; diff --git a/src/less/variables/ds6/checkbox-variables.less b/src/less/variables/ds6/checkbox-variables.less index 3d00b2bcc6..e0e0be2207 100644 --- a/src/less/variables/ds6/checkbox-variables.less +++ b/src/less/variables/ds6/checkbox-variables.less @@ -6,4 +6,4 @@ @checkbox-unchecked-color: @color-text-default; @checkbox-disabled-opacity: 1; @checkbox-disabled-color: @color-action-disabled; -@checkbox-custom-outline-color: @color-text-secondary; +@checkbox-custom-outline: 1px auto @color-text-secondary; diff --git a/src/less/variables/ds6/radio-variables.less b/src/less/variables/ds6/radio-variables.less index 3843572648..e048eb60b6 100644 --- a/src/less/variables/ds6/radio-variables.less +++ b/src/less/variables/ds6/radio-variables.less @@ -6,4 +6,4 @@ @radio-unchecked-color: @color-text-default; @radio-disabled-opacity: 1; @radio-disabled-color: @color-disabled; -@radio-custom-outline-color: @color-text-secondary; +@radio-custom-outline: 1px auto @color-text-secondary;