diff --git a/docs/00-release-notes.md b/docs/00-release-notes.md new file mode 100644 index 0000000..6d52522 --- /dev/null +++ b/docs/00-release-notes.md @@ -0,0 +1,14 @@ +# Release Notes + +The following document contains information about the changes made, release per release, of Candella. + +## v21.07 (Apple Cinnamon) +This is the first initial relase of Candella. The following information contains the changes rolled up from all beta releases. + +- Adds search functionality to Celeste Desktop's app drawer, filtered by name or bundle ID. +- Fixes a tagging issue in version injection scripts. +- Adds new CHANGELOG file to builds. +- Updates design language of notification banners in NotificationKit. +- Updates ScreenKit to new Candella design language. +- Changes behavior of CAApplication.send_banner to include automatic and manual modes. +- Rebuilds Candella against the Ren'Py 7.4.4 SDK. \ No newline at end of file diff --git a/docs/02-caberto-shell.md b/docs/02-caberto-shell.md index 42a7e64..04adbb3 100644 --- a/docs/02-caberto-shell.md +++ b/docs/02-caberto-shell.md @@ -15,7 +15,7 @@ There are two major components to Celeste Shell: the top bar and the launcher on ![Celeste Shell drawer](./images/celeste/drawer.png) -### Customizing the desktop {label:updated} +### Customizing the desktop Click on the gear in the top bar to open the Settings pane for Celeste Shell. There are two sections in the settings: wallpaper selection, followed by the wallpaper display mode, which can be one of three options: diff --git a/docs/02-celeste-shell.md b/docs/02-celeste-shell.md index 26f3fdf..52504c6 100644 --- a/docs/02-celeste-shell.md +++ b/docs/02-celeste-shell.md @@ -2,9 +2,6 @@ The default desktop shell for Candella is **Celeste** (formerly known as Caberto Shell). Celeste's interface is mainly inspired from the [Lomiri][lomiri] desktop environment and comes with per-user customizations. -!!! warning - Celeste is currently in a pre-release state and the documentation here may change as the project evolves. - ![Default Celeste Shell desktop](./images/celeste/default.png) ## Using Celeste Shell @@ -13,10 +10,6 @@ There are two major components to Celeste Shell: the top bar and the launcher on ![Celeste Shell drawer](./images/celeste/drawer.png) -### {label:new} - -- As of 21.03-beta2, it is now possible to search for apps in the drawer by name or identifier. - ### Customizing the desktop Click on the gear in the top bar to open the Settings pane for Celeste Shell. There are two sections in the settings: wallpaper selection, followed by the wallpaper display mode, which can be one of three options: diff --git a/docs/03-candella-app.md b/docs/03-candella-app.md index ec436bb..87de0b8 100644 --- a/docs/03-candella-app.md +++ b/docs/03-candella-app.md @@ -141,7 +141,7 @@ User interfaces for Candella apps utilize ScreenKit, an AliceOS framework that u More information on generating user interfaces with ScreenKit [can be found in the AliceOS documentation][screenkit]. -### Creating draggable windows {label:new} +### Creating draggable windows It is recommended that, if possible, to give your app windows the ability to be dragged across the screen. This can be achieved by wrapping the window's content in a `drag` screen, supplying the following properties like in the example below: @@ -179,7 +179,7 @@ Send an alert with respect to the user's settings. - response (any): The response from the alert, if any. This response is also emitted as a signal. -### `CAApplication.send_banner(title, supporting, callback=Return('didClickRespond'))` {label:updated} +### `CAApplication.send_banner(title, supporting, callback=Return('didClickRespond'))` Send a notification banner with respect to the user's settings. The banner request can be used in one of two ways: automatic, which utilizes the CANotificationBanner class diff --git a/docs/11-notifications.md b/docs/11-notifications.md index 8b98e9d..d0bc4f4 100644 --- a/docs/11-notifications.md +++ b/docs/11-notifications.md @@ -8,7 +8,7 @@ Banners in Candella have been moved to the right side of the screen and take up ![Banners in Candella](./images/design/banner.png) -## Creating modular banners {label:new} +## Creating modular banners Notification banners can be generated automatically using the `CANotificationBanner` class, rather than at call time when invoking `CANotification.send_banner`. This class offers more control over the appearance of the banner and is typically easier to use than the manual mode in previous releases. diff --git a/docs/index.md b/docs/index.md index 282b82b..e4bbd02 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,5 +1,6 @@ -!!! warning "Prerelease Notice" - Candella is in a pre-release state and may change over time. This documentation tries to reflect the most current pre-release version of Candella. +!!! info "Documentation Notice" + The following documentation is written according to the latest release, **v21.07 (Apple Cinnamon)**. View the changelog + for information about previous releases and APIs. ## What makes Candella different? diff --git a/game/System/release_info.json b/game/System/release_info.json index ecba60e..6dac629 100644 --- a/game/System/release_info.json +++ b/game/System/release_info.json @@ -1,10 +1,10 @@ { "distribution": { "name": "Candella", - "version": "21.07", - "build_id": "2021076-182229", + "version": "21.08", + "build_id": "2021083-214813", "channel": "beta", "codename": "apple_cinnamon" }, - "build_date": "2021-07-06T18:22:29.398397" + "build_date": "2021-08-03T21:48:13.930916" } \ No newline at end of file diff --git a/vanilla/css/vanilla.min.css b/vanilla/css/vanilla.min.css index adf243c..5a190f9 100644 --- a/vanilla/css/vanilla.min.css +++ b/vanilla/css/vanilla.min.css @@ -295,15 +295,13 @@ template { h1, [type='checkbox'] + label.is-h1, [type='radio'] + label.is-h1, .p-heading--1, .p-heading--one, .p-media-object--large .p-media-object__title { max-width: 40em; + font-size: 2.22819rem; font-style: normal; font-weight: 100; - margin-top: 0; } - @media (max-width: 772px) { - h1, [type='checkbox'] + label.is-h1, [type='radio'] + label.is-h1, .p-heading--1, .p-heading--one, .p-media-object--large .p-media-object__title { - font-size: 2.22819rem; - line-height: 3rem; - margin-bottom: 0.835rem; - padding-top: 0.166rem; } } + line-height: 3rem; + margin-bottom: 0.835rem; + margin-top: 0; + padding-top: 0.166rem; } @media (min-width: 772px) { h1, [type='checkbox'] + label.is-h1, [type='radio'] + label.is-h1, .p-heading--1, .p-heading--one, .p-media-object--large .p-media-object__title { font-size: 2.91029rem; @@ -317,15 +315,13 @@ h1, [type='checkbox'] + label.is-h1, [type='radio'] + label.is-h1, .p-heading--1 h2, [type='checkbox'] + label.is-h2, [type='radio'] + label.is-h2, .p-heading--2, .p-heading--two { max-width: 40em; + font-size: 1.83274rem; font-style: normal; font-weight: 100; - margin-top: 0; } - @media (max-width: 772px) { - h2, [type='checkbox'] + label.is-h2, [type='radio'] + label.is-h2, .p-heading--2, .p-heading--two { - font-size: 1.83274rem; - line-height: 2.5rem; - margin-bottom: 0.9rem; - padding-top: 0.101rem; } } + line-height: 2.5rem; + margin-bottom: 0.9rem; + margin-top: 0; + padding-top: 0.101rem; } @media (min-width: 772px) { h2, [type='checkbox'] + label.is-h2, [type='radio'] + label.is-h2, .p-heading--2, .p-heading--two { font-size: 2.22819rem; @@ -335,15 +331,13 @@ h2, [type='checkbox'] + label.is-h2, [type='radio'] + label.is-h2, .p-heading--2 h3, [type='checkbox'] + label.is-h3, [type='radio'] + label.is-h3, .p-heading--3, .p-heading--three, .p-pull-quote--large .p-pull-quote__quote { max-width: 40em; + font-size: 1.49271rem; font-style: normal; font-weight: 100; - margin-top: 0; } - @media (max-width: 772px) { - h3, [type='checkbox'] + label.is-h3, [type='radio'] + label.is-h3, .p-heading--3, .p-heading--three, .p-pull-quote--large .p-pull-quote__quote { - font-size: 1.49271rem; - line-height: 2rem; - margin-bottom: 0.5rem; - padding-top: 0.5rem; } } + line-height: 2rem; + margin-bottom: 0.5rem; + margin-top: 0; + padding-top: 0.5rem; } @media (min-width: 772px) { h3, [type='checkbox'] + label.is-h3, [type='radio'] + label.is-h3, .p-heading--3, .p-heading--three, .p-pull-quote--large .p-pull-quote__quote { font-size: 1.70596rem; @@ -353,15 +347,13 @@ h3, [type='checkbox'] + label.is-h3, [type='radio'] + label.is-h3, .p-heading--3 h4, [type='checkbox'] + label.is-h4, [type='radio'] + label.is-h4, .p-heading--4, .p-heading--four, .p-matrix__title, .p-media-object__title, .p-modal__title, .p-pull-quote .p-pull-quote__quote, .p-panel__title { max-width: 40em; + font-size: 1.22176rem; font-style: normal; font-weight: 300; - margin-top: 0; } - @media (max-width: 772px) { - h4, [type='checkbox'] + label.is-h4, [type='radio'] + label.is-h4, .p-heading--4, .p-heading--four, .p-matrix__title, .p-media-object__title, .p-modal__title, .p-pull-quote .p-pull-quote__quote, .p-panel__title { - font-size: 1.22176rem; - line-height: 1.5rem; - margin-bottom: 0.7rem; - padding-top: 0.301rem; } } + line-height: 1.5rem; + margin-bottom: 0.7rem; + margin-top: 0; + padding-top: 0.301rem; } @media (min-width: 772px) { h4, [type='checkbox'] + label.is-h4, [type='radio'] + label.is-h4, .p-heading--4, .p-heading--four, .p-matrix__title, .p-media-object__title, .p-modal__title, .p-pull-quote .p-pull-quote__quote, .p-panel__title { font-size: 1.30612rem; @@ -377,7 +369,7 @@ h5, .p-code-snippet .p-code-snippet__title, .p-heading--5, .p-heading--five { max-width: 40em; font-size: 1rem; font-style: normal; - font-weight: 500; + font-weight: 400; line-height: 1.5rem; margin-bottom: 1.1rem; margin-top: 0; @@ -400,7 +392,7 @@ h6, .p-heading--6, .p-heading--six, .p-pull-quote .p-pull-quote__citation, .p-pull-quote--large .p-pull-quote__citation { padding-top: 0.345rem; } } -.p-text--default, cite, dd, dt, .p-breadcrumbs__item, .p-pull-quote--small .p-pull-quote__quote, p, summary, .p-side-navigation--raw-html h2, +.p-text--default, cite, dd, dt, .p-breadcrumbs__item, .p-notification .p-notification__timestamp, .p-notification--positive .p-notification__timestamp, .p-notification--caution .p-notification__timestamp, .p-notification--negative .p-notification__timestamp, .p-notification--information .p-notification__timestamp, .p-notification .p-notification__action, .p-notification--positive .p-notification__action, .p-notification--caution .p-notification__action, .p-notification--negative .p-notification__action, .p-notification--information .p-notification__action, .p-pull-quote--small .p-pull-quote__quote, p, summary, .p-notification .p-notification__content, .p-notification--positive .p-notification__content, .p-notification--caution .p-notification__content, .p-notification--negative .p-notification__content, .p-notification--information .p-notification__content, .p-side-navigation--raw-html h2, .p-side-navigation--raw-html h3, .p-side-navigation--raw-html h4, .p-side-navigation--raw-html h5, @@ -409,7 +401,7 @@ h6, .p-heading--6, .p-heading--six, .p-pull-quote .p-pull-quote__citation, margin-top: 0; padding-top: 0.4005rem; } -.p-text--default, cite, dd, dt, .p-breadcrumbs__item, .p-pull-quote--small .p-pull-quote__quote { +.p-text--default, cite, dd, dt, .p-breadcrumbs__item, .p-notification .p-notification__timestamp, .p-notification--positive .p-notification__timestamp, .p-notification--caution .p-notification__timestamp, .p-notification--negative .p-notification__timestamp, .p-notification--information .p-notification__timestamp, .p-notification .p-notification__action, .p-notification--positive .p-notification__action, .p-notification--caution .p-notification__action, .p-notification--negative .p-notification__action, .p-notification--information .p-notification__action, .p-pull-quote--small .p-pull-quote__quote { margin-bottom: 0.1rem; } p { @@ -417,45 +409,39 @@ p { p:not([class*='p-heading--']):not([class*='p-muted-heading']) + p { margin-top: -0.5rem; } -[type='checkbox'] + label.is-muted-heading, [type='radio'] + label.is-muted-heading, [type='checkbox'] + label.is-muted-inline-heading, [type='radio'] + label.is-muted-inline-heading, .p-muted-heading, .p-table--mobile-card td::before, -.p-table--mobile-card tbody th::before, small, -.p-text--small, .p-chip, .p-chip__value, .p-form-help-text, .p-form-validation__message, .p-media-object__meta-list-item--date, .p-media-object__meta-list-item--location, .p-media-object__meta-list-item--venue, .p-media-object__meta-list-item, .p-tooltip__message { +small, +.p-text--small, .p-chip, .p-chip .p-chip__value, .p-form-help-text, .p-form-validation__message, .p-media-object__meta-list-item--date, .p-media-object__meta-list-item--location, .p-media-object__meta-list-item--venue, .p-media-object__meta-list-item, .p-tooltip__message { font-size: 0.875rem; - line-height: 1rem; - margin-bottom: 0.8rem; - padding-top: 0.2005rem; } + line-height: 1.25rem; + margin-bottom: 0.95rem; + padding-top: 0.0505rem; } @media (min-width: 1681px) { - [type='checkbox'] + label.is-muted-heading, [type='radio'] + label.is-muted-heading, [type='checkbox'] + label.is-muted-inline-heading, [type='radio'] + label.is-muted-inline-heading, .p-muted-heading, .p-table--mobile-card td::before, - .p-table--mobile-card tbody th::before, small, - .p-text--small, .p-chip, .p-chip__value, .p-form-help-text, .p-form-validation__message, .p-media-object__meta-list-item--date, .p-media-object__meta-list-item--location, .p-media-object__meta-list-item--venue, .p-media-object__meta-list-item, .p-tooltip__message { - padding-top: 0.2006rem; } } + small, + .p-text--small, .p-chip, .p-chip .p-chip__value, .p-form-help-text, .p-form-validation__message, .p-media-object__meta-list-item--date, .p-media-object__meta-list-item--location, .p-media-object__meta-list-item--venue, .p-media-object__meta-list-item, .p-tooltip__message { + padding-top: 0.0506rem; } } -[type='checkbox'] + label.is-table-header, [type='radio'] + label.is-table-header, thead th, .p-text--x-small, .p-chip__lead, .p-label--validated, .p-label--in-progress, .p-label--new, .p-label--updated, .p-label--deprecated { +[type='checkbox'] + label.is-muted-heading, [type='radio'] + label.is-muted-heading, [type='checkbox'] + label.is-muted-inline-heading, [type='radio'] + label.is-muted-inline-heading, .p-muted-heading, [type='checkbox'] + label.is-table-header, [type='radio'] + label.is-table-header, thead th, .p-table--mobile-card td::before, +.p-table--mobile-card tbody th::before, .p-text--x-small, .p-text--x-small-capitalised, .p-chip .p-chip__lead, .p-label, .p-label--validated, .p-label--in-progress, .p-label--new, .p-label--updated, .p-label--deprecated, .p-logo-section__title { font-size: 0.76562rem; + font-weight: 400; line-height: 1rem; margin-bottom: 0.75rem; padding-top: 0.2505rem; } @media (min-width: 1681px) { - [type='checkbox'] + label.is-table-header, [type='radio'] + label.is-table-header, thead th, .p-text--x-small, .p-chip__lead, .p-label--validated, .p-label--in-progress, .p-label--new, .p-label--updated, .p-label--deprecated { + [type='checkbox'] + label.is-muted-heading, [type='radio'] + label.is-muted-heading, [type='checkbox'] + label.is-muted-inline-heading, [type='radio'] + label.is-muted-inline-heading, .p-muted-heading, [type='checkbox'] + label.is-table-header, [type='radio'] + label.is-table-header, thead th, .p-table--mobile-card td::before, + .p-table--mobile-card tbody th::before, .p-text--x-small, .p-text--x-small-capitalised, .p-chip .p-chip__lead, .p-label, .p-label--validated, .p-label--in-progress, .p-label--new, .p-label--updated, .p-label--deprecated, .p-logo-section__title { padding-top: 0.2506rem; } } -[type='checkbox'] + label.is-muted-heading, [type='radio'] + label.is-muted-heading, [type='checkbox'] + label.is-muted-inline-heading, [type='radio'] + label.is-muted-inline-heading, .p-muted-heading, .p-table--mobile-card td::before, -.p-table--mobile-card tbody th::before, .u-text--muted { - color: #666; } - -[type='checkbox'] + label.is-table-header, [type='radio'] + label.is-table-header, thead th { - font-weight: 400; } +[type='checkbox'] + label.is-muted-heading, [type='radio'] + label.is-muted-heading, [type='checkbox'] + label.is-muted-inline-heading, [type='radio'] + label.is-muted-inline-heading, .p-muted-heading, .p-chip .p-chip__lead, .p-notification .p-notification__timestamp, .p-notification--positive .p-notification__timestamp, .p-notification--caution .p-notification__timestamp, .p-notification--negative .p-notification__timestamp, .p-notification--information .p-notification__timestamp, .u-text--muted { + color: rgba(0, 0, 0, 0.6); } -[type='checkbox'] + label.is-muted-heading, [type='radio'] + label.is-muted-heading, [type='checkbox'] + label.is-muted-inline-heading, [type='radio'] + label.is-muted-inline-heading, .p-muted-heading, .p-table--mobile-card td::before, +[type='checkbox'] + label.is-muted-heading, [type='radio'] + label.is-muted-heading, [type='checkbox'] + label.is-muted-inline-heading, [type='radio'] + label.is-muted-inline-heading, .p-muted-heading, [type='checkbox'] + label.is-table-header, [type='radio'] + label.is-table-header, thead th, .p-table--mobile-card td::before, .p-table--mobile-card tbody th::before { - font-weight: 300; - margin-bottom: 0.8rem; - margin-top: 0; - padding-top: 0.2rem; text-transform: uppercase; } b, -strong, dt, .p-notification__status, .p-side-navigation--raw-html h2, +strong, dt, [class='p-notification'] .p-notification__status, +[class^='p-notification--'] .p-notification__status, .p-search-and-filter .p-search-and-filter__search-query, .p-side-navigation--raw-html h2, .p-side-navigation--raw-html h3, .p-side-navigation--raw-html h4, .p-side-navigation--raw-html h5, @@ -465,46 +451,42 @@ strong, dt, .p-notification__status, .p-side-navigation--raw-html h2, p:not([class*='p-heading--']):not([class*='p-muted-heading']) + h1, p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--1, p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--one { - padding-top: 1.7rem; } - @media (max-width: 772px) { + padding-top: 1.665rem; } + @media (min-width: 772px) { p:not([class*='p-heading--']):not([class*='p-muted-heading']) + h1, p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--1, p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--one { - padding-top: 1.665rem; } } + padding-top: 1.7rem; } } p:not([class*='p-heading--']):not([class*='p-muted-heading']) + h2, p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--2, p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--two { - padding-top: 1.7rem; } - @media (max-width: 772px) { + padding-top: 1.6rem; } + @media (min-width: 772px) { p:not([class*='p-heading--']):not([class*='p-muted-heading']) + h2, p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--2, p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--two { - padding-top: 1.6rem; } } - -@media (max-width: 772px) { - p:not([class*='p-heading--']):not([class*='p-muted-heading']) + h3, - p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--3, - p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--three { - padding-top: 2rem; } } + padding-top: 1.7rem; } } -@media (min-width: 772px) { - p:not([class*='p-heading--']):not([class*='p-muted-heading']) + h3, - p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--3, - p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--three { - padding-top: 1.6rem; } } - -@media (max-width: 772px) { - p:not([class*='p-heading--']):not([class*='p-muted-heading']) + h4, - p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--4, - p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--four { - padding-top: 1.8rem; } } +p:not([class*='p-heading--']):not([class*='p-muted-heading']) + h3, +p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--3, +p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--three { + padding-top: 2rem; } + @media (min-width: 772px) { + p:not([class*='p-heading--']):not([class*='p-muted-heading']) + h3, + p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--3, + p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--three { + padding-top: 1.6rem; } } -@media (min-width: 772px) { - p:not([class*='p-heading--']):not([class*='p-muted-heading']) + h4, - p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--4, - p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--four { - padding-top: 1.55rem; } } +p:not([class*='p-heading--']):not([class*='p-muted-heading']) + h4, +p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--4, +p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--four { + padding-top: 1.8rem; } + @media (min-width: 772px) { + p:not([class*='p-heading--']):not([class*='p-muted-heading']) + h4, + p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--4, + p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--four { + padding-top: 1.55rem; } } p:not([class*='p-heading--']):not([class*='p-muted-heading']) + h5, p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--5, @@ -515,31 +497,33 @@ p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--six padding-top: 1.9rem; } p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-muted-heading { - padding-top: 1.7rem; } + padding-top: 1.55rem; } -.p-card, .p-card--highlighted, .p-card--muted, .p-contextual-menu__dropdown, .p-modal__dialog, .p-subnav__items, -.p-subnav__items--right, .p-notification, .p-notification--positive, .p-notification--caution, .p-notification--negative, .p-notification--information, .p-switch__slider, .p-switch__slider::before { +fieldset, .p-card, .p-card--highlighted, .p-card--muted, .p-contextual-menu__dropdown, .p-modal__dialog, .p-navigation__dropdown, +.p-navigation__dropdown--right, .p-subnav__items, +.p-subnav__items--right, .p-switch__slider, .p-switch__slider::before { border-radius: 0.125rem; } -.p-card--highlighted, .p-card--muted, .p-contextual-menu__dropdown, .p-modal__dialog, .p-subnav__items, -.p-subnav__items--right, .p-notification, .p-notification--positive, .p-notification--caution, .p-notification--negative, .p-notification--information, .p-side-navigation:target .p-side-navigation__drawer, +.p-card--highlighted, .p-card--muted, .p-contextual-menu__dropdown, .p-modal__dialog, .p-navigation__dropdown, +.p-navigation__dropdown--right, .p-subnav__items, +.p-subnav__items--right, .p-side-navigation:target .p-side-navigation__drawer, [class*='p-side-navigation--']:target .p-side-navigation__drawer, .p-side-navigation.is-expanded .p-side-navigation__drawer, [class*='p-side-navigation--'].is-expanded .p-side-navigation__drawer, .p-switch__slider::before { - box-shadow: 0 1px 5px 1px rgba(17, 17, 17, 0.2); } + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15), 0 2px 2px -1px rgba(0, 0, 0, 0.15), 0 0 3px 0 rgba(0, 0, 0, 0.2); } -.p-card { - border: 1px solid #cdcdcd; } +fieldset, .p-card, .p-notification, .p-notification--positive, .p-notification--caution, .p-notification--negative, .p-notification--information { + border: 1px solid #d9d9d9; } .p-card--muted { background-color: #f7f7f7; color: #111; } -.p-card, .p-card--highlighted, .p-modal__dialog, .p-notification, .p-notification--positive, .p-notification--caution, .p-notification--negative, .p-notification--information { +fieldset, .p-card, .p-card--highlighted, .p-modal__dialog, .p-notification, .p-notification--positive, .p-notification--caution, .p-notification--negative, .p-notification--information { background-color: #fff; color: #111; } -.p-card, .p-card--highlighted, .p-modal__dialog, .p-notification, .p-notification--positive, .p-notification--caution, .p-notification--negative, .p-notification--information { +fieldset, .p-card, .p-card--highlighted, .p-modal__dialog { margin-bottom: 1.5rem; overflow: auto; padding: 1rem; } @@ -555,8 +539,8 @@ th, .p-accordion__tab, margin-left: 0; padding-left: 0; } -.p-modal__header::after, .p-side-navigation__list::after, .p-side-navigation--raw-html ul::after, .is-bordered[class*='p-strip']::after, .p-tabs__list::after, .p-accordion__group + .p-accordion__group::after, .p-tabs__link::before { - background-color: #cdcdcd; +.p-modal__header::after, .p-side-navigation__list::after, .p-side-navigation--raw-html ul::after, .is-bordered[class*='p-strip']::after, .p-tabs__list::after, .p-accordion__group + .p-accordion__group::after, .p-modal__footer::after, .p-notification .p-notification__meta::after, .p-notification--positive .p-notification__meta::after, .p-notification--caution .p-notification__meta::after, .p-notification--negative .p-notification__meta::after, .p-notification--information .p-notification__meta::after, .p-tabs__link::before { + background-color: #d9d9d9; content: ''; height: 1px; left: 0; @@ -568,43 +552,44 @@ th, .p-accordion__tab, .p-modal__header::after, .p-side-navigation__list::after, .p-side-navigation--raw-html ul::after, .is-bordered[class*='p-strip']::after, .p-tabs__list::after { bottom: 0; } -.p-accordion__group + .p-accordion__group { +.p-accordion__group + .p-accordion__group, .p-modal__footer, .p-notification .p-notification__meta, .p-notification--positive .p-notification__meta, .p-notification--caution .p-notification__meta, .p-notification--negative .p-notification__meta, .p-notification--information .p-notification__meta { position: relative; } - .p-accordion__group + .p-accordion__group::after { + .p-accordion__group + .p-accordion__group::after, .p-modal__footer::after, .p-notification .p-notification__meta::after, .p-notification--positive .p-notification__meta::after, .p-notification--caution .p-notification__meta::after, .p-notification--negative .p-notification__meta::after, .p-notification--information .p-notification__meta::after { top: 0; } -@media only screen and (max-width: 1036px) { - .is-shallow[class*='p-strip'], .p-panel__content { - padding-bottom: 0.75rem; - padding-top: 0.75rem; } } - -@media only screen and (min-width: 1036px) { - .is-shallow[class*='p-strip'], .p-panel__content { - padding-bottom: 1.5rem; - padding-top: 1.5rem; } } - -@media only screen and (max-width: 1036px) { - .p-strip, .p-strip--light, .p-strip--dark, .p-strip--accent, .p-strip--image, .p-strip--suru, .p-strip--suru-topped { - padding-bottom: 2rem; - padding-top: 2rem; } } +hr { + border: 0; + height: 1px; + margin-top: 0; + position: relative; + width: 100%; } -@media only screen and (min-width: 1036px) { - .p-strip, .p-strip--light, .p-strip--dark, .p-strip--accent, .p-strip--image, .p-strip--suru, .p-strip--suru-topped { - padding-bottom: 4rem; - padding-top: 4rem; } } +.is-shallow[class*='p-strip'], .p-panel__content { + padding-bottom: 0.75rem; + padding-top: 0.75rem; } + @media (min-width: 1036px) { + .is-shallow[class*='p-strip'], .p-panel__content { + padding-bottom: 1.5rem; + padding-top: 1.5rem; } } -@media only screen and (max-width: 1036px) { - .is-deep[class*='p-strip'] { - padding: 3rem 0 3rem; } } +.p-strip, .p-strip--light, .p-strip--dark, .p-strip--accent, .p-strip--image, .p-strip--suru, .p-strip--suru-topped { + padding-bottom: 2rem; + padding-top: 2rem; } + @media (min-width: 1036px) { + .p-strip, .p-strip--light, .p-strip--dark, .p-strip--accent, .p-strip--image, .p-strip--suru, .p-strip--suru-topped { + padding-bottom: 4rem; + padding-top: 4rem; } } -@media only screen and (min-width: 1036px) { - .is-deep[class*='p-strip'] { - padding: 6rem 0; } } +.is-deep[class*='p-strip'] { + padding: 3rem 0 3rem; } + @media (min-width: 1036px) { + .is-deep[class*='p-strip'] { + padding: 6rem 0; } } .p-code-copyable::before, .p-code-snippet .p-code-snippet__block--icon::before, .p-icon--anchor, .p-icon--plus, .p-icon--minus, .p-icon--expand, .p-icon--collapse, .p-icon--chevron-down, .p-icon--chevron-up, .p-icon--contextual-menu, .p-icon--close, .p-icon--help, -.p-icon--question, .p-icon--information, .p-icon--delete, .p-icon--error, .p-icon--warning, .p-icon--external-link, .p-icon--drag, .p-icon--code, .p-icon--menu, .p-icon--copy, .p-icon--search, .p-icon--success, .p-icon--share, .p-icon--user, .p-icon--spinner, .p-side-navigation__toggle::before, -.p-side-navigation__toggle--in-drawer::before, .p-icon--facebook, .p-icon--twitter, .p-icon--instagram, .p-icon--linkedin, .p-icon--youtube, .p-icon--canonical, .p-icon--ubuntu, .p-icon--rss, .p-icon--email, .p-switch__slider span, .u-hide-text { +.p-icon--question, .p-icon--information, .p-icon--delete, .p-icon--error, .p-icon--warning, .p-icon--external-link, .p-icon--drag, .p-icon--code, .p-icon--menu, .p-icon--copy, .p-icon--search, .p-icon--success, .p-icon--share, .p-icon--user, .p-icon--spinner, .p-top::after, .p-side-navigation__toggle::before, +.p-side-navigation__toggle--in-drawer::before, .p-icon--facebook, .p-icon--github, .p-icon--twitter, .p-icon--instagram, .p-icon--linkedin, .p-icon--youtube, .p-icon--canonical, .p-icon--ubuntu, .p-icon--rss, .p-icon--email, .p-notification .p-notification__close, .p-notification--positive .p-notification__close, .p-notification--caution .p-notification__close, .p-notification--negative .p-notification__close, .p-notification--information .p-notification__close, .p-switch__slider span, .u-hide-text { overflow: hidden; text-indent: 110vw; white-space: nowrap; } @@ -614,62 +599,56 @@ th, .p-accordion__tab, content: ''; display: block; } -.u-no-margin--bottom:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(p):not(small):not([class*='p-heading']) { +.u-no-margin--bottom:not(hr):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(p):not(small):not([class*='p-heading']):not([class*='p-button--link']) { margin-bottom: 0 !important; } -@media (max-width: 772px) { - h1.u-no-margin--bottom, [type='checkbox'] + label.u-no-margin--bottom.is-h1, [type='radio'] + label.u-no-margin--bottom.is-h1, .u-no-margin--bottom.p-heading--1, .u-no-margin--bottom.p-heading--one, .p-media-object--large .u-no-margin--bottom.p-media-object__title { - margin-bottom: -0.165rem !important; } } - -@media (min-width: 772px) { - h1.u-no-margin--bottom, [type='checkbox'] + label.u-no-margin--bottom.is-h1, [type='radio'] + label.u-no-margin--bottom.is-h1, .u-no-margin--bottom.p-heading--1, .u-no-margin--bottom.p-heading--one, .p-media-object--large .u-no-margin--bottom.p-media-object__title { - margin-bottom: -0.2rem !important; } } - -@media (min-width: 1681px) { - h1.u-no-margin--bottom, [type='checkbox'] + label.u-no-margin--bottom.is-h1, [type='radio'] + label.u-no-margin--bottom.is-h1, .u-no-margin--bottom.p-heading--1, .u-no-margin--bottom.p-heading--one, .p-media-object--large .u-no-margin--bottom.p-media-object__title { - margin-bottom: -0.15rem !important; } } - -@media (max-width: 772px) { - h2.u-no-margin--bottom, [type='checkbox'] + label.u-no-margin--bottom.is-h2, [type='radio'] + label.u-no-margin--bottom.is-h2, .u-no-margin--bottom.p-heading--2, .u-no-margin--bottom.p-heading--two { - margin-bottom: -0.1rem !important; } } - -@media (min-width: 772px) { - h2.u-no-margin--bottom, [type='checkbox'] + label.u-no-margin--bottom.is-h2, [type='radio'] + label.u-no-margin--bottom.is-h2, .u-no-margin--bottom.p-heading--2, .u-no-margin--bottom.p-heading--two { - margin-bottom: -0.2rem !important; } } - -@media (max-width: 772px) { - h3.u-no-margin--bottom, [type='checkbox'] + label.u-no-margin--bottom.is-h3, [type='radio'] + label.u-no-margin--bottom.is-h3, .u-no-margin--bottom.p-heading--3, .u-no-margin--bottom.p-heading--three, .p-pull-quote--large .u-no-margin--bottom.p-pull-quote__quote { - margin-bottom: 0rem !important; } } - -@media (min-width: 772px) { - h3.u-no-margin--bottom, [type='checkbox'] + label.u-no-margin--bottom.is-h3, [type='radio'] + label.u-no-margin--bottom.is-h3, .u-no-margin--bottom.p-heading--3, .u-no-margin--bottom.p-heading--three, .p-pull-quote--large .u-no-margin--bottom.p-pull-quote__quote { - margin-bottom: -0.1rem !important; } } +h1.u-no-margin--bottom, [type='checkbox'] + label.u-no-margin--bottom.is-h1, [type='radio'] + label.u-no-margin--bottom.is-h1, .u-no-margin--bottom.p-heading--1, .u-no-margin--bottom.p-heading--one, .p-media-object--large .u-no-margin--bottom.p-media-object__title { + margin-bottom: -0.165rem !important; } + @media (min-width: 772px) { + h1.u-no-margin--bottom, [type='checkbox'] + label.u-no-margin--bottom.is-h1, [type='radio'] + label.u-no-margin--bottom.is-h1, .u-no-margin--bottom.p-heading--1, .u-no-margin--bottom.p-heading--one, .p-media-object--large .u-no-margin--bottom.p-media-object__title { + margin-bottom: -0.2rem !important; } } + @media (min-width: 1681px) { + h1.u-no-margin--bottom, [type='checkbox'] + label.u-no-margin--bottom.is-h1, [type='radio'] + label.u-no-margin--bottom.is-h1, .u-no-margin--bottom.p-heading--1, .u-no-margin--bottom.p-heading--one, .p-media-object--large .u-no-margin--bottom.p-media-object__title { + margin-bottom: -0.15rem !important; } } -@media (max-width: 772px) { - h4.u-no-margin--bottom, [type='checkbox'] + label.u-no-margin--bottom.is-h4, [type='radio'] + label.u-no-margin--bottom.is-h4, .u-no-margin--bottom.p-heading--4, .u-no-margin--bottom.p-heading--four, .u-no-margin--bottom.p-matrix__title, .u-no-margin--bottom.p-media-object__title, .u-no-margin--bottom.p-modal__title, .p-pull-quote .u-no-margin--bottom.p-pull-quote__quote, .u-no-margin--bottom.p-panel__title, .p-media-object__title { - margin-bottom: 0.2rem !important; } } +h2.u-no-margin--bottom, [type='checkbox'] + label.u-no-margin--bottom.is-h2, [type='radio'] + label.u-no-margin--bottom.is-h2, .u-no-margin--bottom.p-heading--2, .u-no-margin--bottom.p-heading--two { + margin-bottom: -0.1rem !important; } + @media (min-width: 772px) { + h2.u-no-margin--bottom, [type='checkbox'] + label.u-no-margin--bottom.is-h2, [type='radio'] + label.u-no-margin--bottom.is-h2, .u-no-margin--bottom.p-heading--2, .u-no-margin--bottom.p-heading--two { + margin-bottom: -0.2rem !important; } } -@media (min-width: 772px) { - h4.u-no-margin--bottom, [type='checkbox'] + label.u-no-margin--bottom.is-h4, [type='radio'] + label.u-no-margin--bottom.is-h4, .u-no-margin--bottom.p-heading--4, .u-no-margin--bottom.p-heading--four, .u-no-margin--bottom.p-matrix__title, .u-no-margin--bottom.p-media-object__title, .u-no-margin--bottom.p-modal__title, .p-pull-quote .u-no-margin--bottom.p-pull-quote__quote, .u-no-margin--bottom.p-panel__title, .p-media-object__title { - margin-bottom: -0.05rem !important; } } +h3.u-no-margin--bottom, [type='checkbox'] + label.u-no-margin--bottom.is-h3, [type='radio'] + label.u-no-margin--bottom.is-h3, .u-no-margin--bottom.p-heading--3, .u-no-margin--bottom.p-heading--three, .p-pull-quote--large .u-no-margin--bottom.p-pull-quote__quote { + margin-bottom: 0rem !important; } + @media (min-width: 772px) { + h3.u-no-margin--bottom, [type='checkbox'] + label.u-no-margin--bottom.is-h3, [type='radio'] + label.u-no-margin--bottom.is-h3, .u-no-margin--bottom.p-heading--3, .u-no-margin--bottom.p-heading--three, .p-pull-quote--large .u-no-margin--bottom.p-pull-quote__quote { + margin-bottom: -0.1rem !important; } } -@media (min-width: 1681px) { - h4.u-no-margin--bottom, [type='checkbox'] + label.u-no-margin--bottom.is-h4, [type='radio'] + label.u-no-margin--bottom.is-h4, .u-no-margin--bottom.p-heading--4, .u-no-margin--bottom.p-heading--four, .u-no-margin--bottom.p-matrix__title, .u-no-margin--bottom.p-media-object__title, .u-no-margin--bottom.p-modal__title, .p-pull-quote .u-no-margin--bottom.p-pull-quote__quote, .u-no-margin--bottom.p-panel__title, .p-media-object__title { - margin-bottom: -0 !important; } } +h4.u-no-margin--bottom, [type='checkbox'] + label.u-no-margin--bottom.is-h4, [type='radio'] + label.u-no-margin--bottom.is-h4, .u-no-margin--bottom.p-heading--4, .u-no-margin--bottom.p-heading--four, .u-no-margin--bottom.p-matrix__title, .u-no-margin--bottom.p-media-object__title, .u-no-margin--bottom.p-modal__title, .p-pull-quote .u-no-margin--bottom.p-pull-quote__quote, .u-no-margin--bottom.p-panel__title, .p-media-object__title { + margin-bottom: 0.2rem !important; } + @media (min-width: 772px) { + h4.u-no-margin--bottom, [type='checkbox'] + label.u-no-margin--bottom.is-h4, [type='radio'] + label.u-no-margin--bottom.is-h4, .u-no-margin--bottom.p-heading--4, .u-no-margin--bottom.p-heading--four, .u-no-margin--bottom.p-matrix__title, .u-no-margin--bottom.p-media-object__title, .u-no-margin--bottom.p-modal__title, .p-pull-quote .u-no-margin--bottom.p-pull-quote__quote, .u-no-margin--bottom.p-panel__title, .p-media-object__title { + margin-bottom: -0.05rem !important; } } + @media (min-width: 1681px) { + h4.u-no-margin--bottom, [type='checkbox'] + label.u-no-margin--bottom.is-h4, [type='radio'] + label.u-no-margin--bottom.is-h4, .u-no-margin--bottom.p-heading--4, .u-no-margin--bottom.p-heading--four, .u-no-margin--bottom.p-matrix__title, .u-no-margin--bottom.p-media-object__title, .u-no-margin--bottom.p-modal__title, .p-pull-quote .u-no-margin--bottom.p-pull-quote__quote, .u-no-margin--bottom.p-panel__title, .p-media-object__title { + margin-bottom: -0 !important; } } h5.u-no-margin--bottom, .p-code-snippet .u-no-margin--bottom.p-code-snippet__title, .u-no-margin--bottom.p-heading--5, .u-no-margin--bottom.p-heading--five, h6.u-no-margin--bottom, .u-no-margin--bottom.p-heading--6, .u-no-margin--bottom.p-heading--six, .p-pull-quote .u-no-margin--bottom.p-pull-quote__citation, .p-pull-quote--small .u-no-margin--bottom.p-pull-quote__citation, -.p-pull-quote--large .u-no-margin--bottom.p-pull-quote__citation, p.u-no-margin--bottom, .p-card__content, .p-notification__response { +.p-pull-quote--large .u-no-margin--bottom.p-pull-quote__citation, p.u-no-margin--bottom, .p-button--link.u-no-margin--bottom, .p-card__content { margin-bottom: 0.1rem !important; } -[type='checkbox'] + label.u-no-margin--bottom.is-muted-heading, [type='radio'] + label.u-no-margin--bottom.is-muted-heading, [type='checkbox'] + label.u-no-margin--bottom.is-muted-inline-heading, [type='radio'] + label.u-no-margin--bottom.is-muted-inline-heading, .u-no-margin--bottom.p-muted-heading, .p-table--mobile-card td.u-no-margin--bottom::before, -.p-table--mobile-card tbody th.u-no-margin--bottom::before, small.u-no-margin--bottom, -.u-no-margin--bottom.p-text--small, .u-no-margin--bottom.p-chip, .u-no-margin--bottom.p-chip__value, .u-no-margin--bottom.p-form-help-text, .u-no-margin--bottom.p-form-validation__message, .u-no-margin--bottom.p-media-object__meta-list-item--date, .u-no-margin--bottom.p-media-object__meta-list-item--location, .u-no-margin--bottom.p-media-object__meta-list-item--venue, .u-no-margin--bottom.p-media-object__meta-list-item, .u-no-margin--bottom.p-tooltip__message, [type='checkbox'] + label.u-no-margin--bottom.is-table-header, [type='radio'] + label.u-no-margin--bottom.is-table-header, thead th.u-no-margin--bottom, .u-no-margin--bottom.p-text--x-small, .u-no-margin--bottom.p-chip__lead, .u-no-margin--bottom.p-label--validated, .u-no-margin--bottom.p-label--in-progress, .u-no-margin--bottom.p-label--new, .u-no-margin--bottom.p-label--updated, .u-no-margin--bottom.p-label--deprecated, .p-label--validated, .p-label--in-progress, .p-label--new, .p-label--updated, .p-label--deprecated { - margin-bottom: -0.2rem !important; } +small.u-no-margin--bottom, +.u-no-margin--bottom.p-text--small, .u-no-margin--bottom.p-chip, .p-chip .u-no-margin--bottom.p-chip__value, .u-no-margin--bottom.p-form-help-text, .u-no-margin--bottom.p-form-validation__message, .u-no-margin--bottom.p-media-object__meta-list-item--date, .u-no-margin--bottom.p-media-object__meta-list-item--location, .u-no-margin--bottom.p-media-object__meta-list-item--venue, .u-no-margin--bottom.p-media-object__meta-list-item, .u-no-margin--bottom.p-tooltip__message, [type='checkbox'] + label.u-no-margin--bottom.is-muted-heading, [type='radio'] + label.u-no-margin--bottom.is-muted-heading, [type='checkbox'] + label.u-no-margin--bottom.is-muted-inline-heading, [type='radio'] + label.u-no-margin--bottom.is-muted-inline-heading, .u-no-margin--bottom.p-muted-heading, [type='checkbox'] + label.u-no-margin--bottom.is-table-header, [type='radio'] + label.u-no-margin--bottom.is-table-header, thead th.u-no-margin--bottom, .p-table--mobile-card td.u-no-margin--bottom::before, +.p-table--mobile-card tbody th.u-no-margin--bottom::before, .u-no-margin--bottom.p-text--x-small, .u-no-margin--bottom.p-text--x-small-capitalised, .p-chip .u-no-margin--bottom.p-chip__lead, .u-no-margin--bottom.p-label, .u-no-margin--bottom.p-label--validated, .u-no-margin--bottom.p-label--in-progress, .u-no-margin--bottom.p-label--new, .u-no-margin--bottom.p-label--updated, .u-no-margin--bottom.p-label--deprecated, .u-no-margin--bottom.p-logo-section__title, .p-label, .p-label--validated, .p-label--in-progress, .p-label--new, .p-label--updated, .p-label--deprecated { + margin-bottom: -0.05rem !important; } + +hr.u-no-margin--bottom { + margin-bottom: -1px !important; + z-index: 1; } .p-code-copyable::before, .p-code-snippet .p-code-snippet__block--icon::before, .p-icon--anchor, .p-icon--plus, .p-icon--minus, .p-icon--expand, .p-icon--collapse, .p-icon--chevron-down, .p-icon--chevron-up, .p-icon--contextual-menu, .p-icon--close, .p-icon--help, -.p-icon--question, .p-icon--information, .p-icon--delete, .p-icon--error, .p-icon--warning, .p-icon--external-link, .p-icon--drag, .p-icon--code, .p-icon--menu, .p-icon--copy, .p-icon--search, .p-icon--success, .p-icon--share, .p-icon--user, .p-icon--spinner, .p-side-navigation__toggle::before, +.p-icon--question, .p-icon--information, .p-icon--delete, .p-icon--error, .p-icon--warning, .p-icon--external-link, .p-icon--drag, .p-icon--code, .p-icon--menu, .p-icon--copy, .p-icon--search, .p-icon--success, .p-icon--share, .p-icon--user, .p-icon--spinner, .p-top::after, .p-side-navigation__toggle::before, .p-side-navigation__toggle--in-drawer::before { background-size: contain; height: 1rem; @@ -683,10 +662,11 @@ h5.u-no-margin--bottom, .p-code-snippet .u-no-margin--bottom.p-code-snippet__tit position: relative; vertical-align: calc(0.5px + 0.3465em - 0.5rem); } -.p-icon--facebook, .p-icon--twitter, .p-icon--instagram, .p-icon--linkedin, .p-icon--youtube, .p-icon--canonical, .p-icon--ubuntu, .p-icon--rss, .p-icon--email { +.p-icon--facebook, .p-icon--github, .p-icon--twitter, .p-icon--instagram, .p-icon--linkedin, .p-icon--youtube, .p-icon--canonical, .p-icon--ubuntu, .p-icon--rss, .p-icon--email { background-size: contain; height: 2rem; width: 2rem; + background-repeat: no-repeat; display: inline-block; } html { @@ -739,7 +719,7 @@ html { font-family: 'Ubuntu Mono'; font-style: normal; font-weight: 400; - src: url("https://assets.ubuntu.com/v1/fdd692b9-UbuntuMono-R_W.woff2") format("woff2"), url("https://assets.ubuntu.com/v1/85edb898-UbuntuMono-R_W.woff") format("woff"); } + src: url("https://assets.ubuntu.com/v1/dd4acb63-UbuntuMono-B.woff2") format("woff2"), url("https://assets.ubuntu.com/v1/e8e36b19-UbuntuMono-B.woff") format("woff"); } .measure--p { @@ -751,11 +731,9 @@ html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-weight: 300; - line-height: 1.5rem; } - @media screen and (max-width: 1681px) { - html { - font-size: 1rem; } } - @media screen and (min-width: 1681px) { + line-height: 1.5rem; + font-size: 1rem; } + @media (min-width: 1681px) { html { font-size: 1.125rem; line-height: 1.6875rem; } } @@ -765,7 +743,11 @@ p { small.dense, .p-text--small.dense { - margin-bottom: 1.3rem; } + margin-bottom: 1.2rem; } + +.p-text--x-small-capitalised { + font-weight: 400; + text-transform: uppercase; } p:not([class*='p-heading--']):not([class*='p-muted-heading']):empty { line-height: 0; @@ -785,7 +767,7 @@ abbr[title] { blockquote { border-left: 2px solid #666; - margin-bottom: 1rem; + margin-bottom: 1.5rem; margin-left: 0; margin-top: 0; overflow: auto; @@ -814,20 +796,20 @@ button { button:hover { background-color: #f2f2f2; border-color: rgba(0, 0, 0, 0.56); } - button:active { - background-color: #d9d9d9; + button:active, button[aria-pressed='true'], button[aria-expanded='true'] { + background-color: #ebebeb; border-color: rgba(0, 0, 0, 0.56); transition-duration: 0s; } - button:disabled:active, button:disabled:hover, button.is-disabled:active, button.is-disabled:hover { + button:disabled:active, button:disabled[aria-pressed='true'], button:disabled[aria-expanded='true'], button:disabled:hover, button.is-disabled:active, button.is-disabled[aria-pressed='true'], button.is-disabled[aria-expanded='true'], button.is-disabled:hover { background-color: transparent; border-color: rgba(0, 0, 0, 0.56); } button .p-link--external { color: currentColor; } -button, .p-button, .p-button--neutral, .p-button--brand, .p-button--positive, .p-button--negative, .p-button--base, .p-pagination__link, .p-pagination__link--previous, +button, .p-article-pagination__link, .p-article-pagination__link--previous, .p-article-pagination__link--next, .p-button, .p-button--neutral, .p-button--brand, .p-button--positive, .p-button--negative, .p-button--base, .p-pagination__link, .p-pagination__link--previous, .p-pagination__link--next, .p-side-navigation__toggle, -.p-side-navigation__toggle--in-drawer { - transition-duration: 0.165s; +.p-side-navigation__toggle--in-drawer, .p-tabs__link { + transition-duration: 0.1s; transition-property: background-color, border-color; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); border-radius: 0.125rem; @@ -842,82 +824,82 @@ button, .p-button, .p-button--neutral, .p-button--brand, .p-button--positive, .p margin: 0 0 1.2rem 0; padding: calc(0.4rem - 1px) 1rem; text-align: center; - text-decoration: none; } - button:focus, .p-button:focus, .p-button--neutral:focus, .p-button--brand:focus, .p-button--positive:focus, .p-button--negative:focus, .p-button--base:focus, .p-pagination__link:focus, .p-pagination__link--previous:focus, + text-decoration: none; + width: 100%; } + button:focus, .p-article-pagination__link:focus, .p-article-pagination__link--previous:focus, .p-article-pagination__link--next:focus, .p-button:focus, .p-button--neutral:focus, .p-button--brand:focus, .p-button--positive:focus, .p-button--negative:focus, .p-button--base:focus, .p-pagination__link:focus, .p-pagination__link--previous:focus, .p-pagination__link--next:focus, .p-side-navigation__toggle:focus, - .p-side-navigation__toggle--in-drawer:focus { + .p-side-navigation__toggle--in-drawer:focus, .p-tabs__link:focus { outline: 0.1875rem solid #2e96ff; outline-offset: -0.1875rem; } - button:focus-visible, .p-button:focus-visible, .p-button--neutral:focus-visible, .p-button--brand:focus-visible, .p-button--positive:focus-visible, .p-button--negative:focus-visible, .p-button--base:focus-visible, .p-pagination__link:focus-visible, .p-pagination__link--previous:focus-visible, + button:focus-visible, .p-article-pagination__link:focus-visible, .p-article-pagination__link--previous:focus-visible, .p-article-pagination__link--next:focus-visible, .p-button:focus-visible, .p-button--neutral:focus-visible, .p-button--brand:focus-visible, .p-button--positive:focus-visible, .p-button--negative:focus-visible, .p-button--base:focus-visible, .p-pagination__link:focus-visible, .p-pagination__link--previous:focus-visible, .p-pagination__link--next:focus-visible, .p-side-navigation__toggle:focus-visible, - .p-side-navigation__toggle--in-drawer:focus-visible { + .p-side-navigation__toggle--in-drawer:focus-visible, .p-tabs__link:focus-visible { outline: 0.1875rem solid #2e96ff; outline-offset: -0.1875rem; } - button:focus:not(:focus-visible), .p-button:focus:not(:focus-visible), .p-button--neutral:focus:not(:focus-visible), .p-button--brand:focus:not(:focus-visible), .p-button--positive:focus:not(:focus-visible), .p-button--negative:focus:not(:focus-visible), .p-button--base:focus:not(:focus-visible), .p-pagination__link:focus:not(:focus-visible), .p-pagination__link--previous:focus:not(:focus-visible), + button:focus:not(:focus-visible), .p-article-pagination__link:focus:not(:focus-visible), .p-article-pagination__link--previous:focus:not(:focus-visible), .p-article-pagination__link--next:focus:not(:focus-visible), .p-button:focus:not(:focus-visible), .p-button--neutral:focus:not(:focus-visible), .p-button--brand:focus:not(:focus-visible), .p-button--positive:focus:not(:focus-visible), .p-button--negative:focus:not(:focus-visible), .p-button--base:focus:not(:focus-visible), .p-pagination__link:focus:not(:focus-visible), .p-pagination__link--previous:focus:not(:focus-visible), .p-pagination__link--next:focus:not(:focus-visible), .p-side-navigation__toggle:focus:not(:focus-visible), - .p-side-navigation__toggle--in-drawer:focus:not(:focus-visible) { + .p-side-navigation__toggle--in-drawer:focus:not(:focus-visible), .p-tabs__link:focus:not(:focus-visible) { outline: 0; outline-offset: 0; } - button:active, .p-button:active, .p-button--neutral:active, .p-button--brand:active, .p-button--positive:active, .p-button--negative:active, .p-button--base:active, .p-pagination__link:active, .p-pagination__link--previous:active, + button:active, .p-article-pagination__link:active, .p-article-pagination__link--previous:active, .p-article-pagination__link--next:active, .p-button:active, .p-button--neutral:active, .p-button--brand:active, .p-button--positive:active, .p-button--negative:active, .p-button--base:active, .p-pagination__link:active, .p-pagination__link--previous:active, .p-pagination__link--next:active, .p-side-navigation__toggle:active, - .p-side-navigation__toggle--in-drawer:active, button:focus, .p-button:focus, .p-button--neutral:focus, .p-button--brand:focus, .p-button--positive:focus, .p-button--negative:focus, .p-button--base:focus, .p-pagination__link:focus, .p-pagination__link--previous:focus, + .p-side-navigation__toggle--in-drawer:active, .p-tabs__link:active, button:focus, .p-article-pagination__link:focus, .p-article-pagination__link--previous:focus, .p-article-pagination__link--next:focus, .p-button:focus, .p-button--neutral:focus, .p-button--brand:focus, .p-button--positive:focus, .p-button--negative:focus, .p-button--base:focus, .p-pagination__link:focus, .p-pagination__link--previous:focus, .p-pagination__link--next:focus, .p-side-navigation__toggle:focus, - .p-side-navigation__toggle--in-drawer:focus, button:hover, .p-button:hover, .p-button--neutral:hover, .p-button--brand:hover, .p-button--positive:hover, .p-button--negative:hover, .p-button--base:hover, .p-pagination__link:hover, .p-pagination__link--previous:hover, + .p-side-navigation__toggle--in-drawer:focus, .p-tabs__link:focus, button:hover, .p-article-pagination__link:hover, .p-article-pagination__link--previous:hover, .p-article-pagination__link--next:hover, .p-button:hover, .p-button--neutral:hover, .p-button--brand:hover, .p-button--positive:hover, .p-button--negative:hover, .p-button--base:hover, .p-pagination__link:hover, .p-pagination__link--previous:hover, .p-pagination__link--next:hover, .p-side-navigation__toggle:hover, - .p-side-navigation__toggle--in-drawer:hover { + .p-side-navigation__toggle--in-drawer:hover, .p-tabs__link:hover { text-decoration: none; } - button:disabled, .p-button:disabled, .p-button--neutral:disabled, .p-button--brand:disabled, .p-button--positive:disabled, .p-button--negative:disabled, .p-button--base:disabled, .p-pagination__link:disabled, .p-pagination__link--previous:disabled, + button:disabled, .p-article-pagination__link:disabled, .p-article-pagination__link--previous:disabled, .p-article-pagination__link--next:disabled, .p-button:disabled, .p-button--neutral:disabled, .p-button--brand:disabled, .p-button--positive:disabled, .p-button--negative:disabled, .p-button--base:disabled, .p-pagination__link:disabled, .p-pagination__link--previous:disabled, .p-pagination__link--next:disabled, .p-side-navigation__toggle:disabled, - .p-side-navigation__toggle--in-drawer:disabled, button.is-disabled, .is-disabled.p-button, .is-disabled.p-button--neutral, .is-disabled.p-button--brand, .is-disabled.p-button--positive, .is-disabled.p-button--negative, .is-disabled.p-button--base, .is-disabled.p-pagination__link, .is-disabled.p-pagination__link--previous, + .p-side-navigation__toggle--in-drawer:disabled, .p-tabs__link:disabled, button.is-disabled, .is-disabled.p-article-pagination__link, .is-disabled.p-article-pagination__link--previous, .is-disabled.p-article-pagination__link--next, .is-disabled.p-button, .is-disabled.p-button--neutral, .is-disabled.p-button--brand, .is-disabled.p-button--positive, .is-disabled.p-button--negative, .is-disabled.p-button--base, .is-disabled.p-pagination__link, .is-disabled.p-pagination__link--previous, .is-disabled.p-pagination__link--next, .is-disabled.p-side-navigation__toggle, - .is-disabled.p-side-navigation__toggle--in-drawer { + .is-disabled.p-side-navigation__toggle--in-drawer, .is-disabled.p-tabs__link { cursor: not-allowed; opacity: 0.33; } - @media only screen and (max-width: 460px) { - button, .p-button, .p-button--neutral, .p-button--brand, .p-button--positive, .p-button--negative, .p-button--base, .p-pagination__link, .p-pagination__link--previous, - .p-pagination__link--next, .p-side-navigation__toggle, - .p-side-navigation__toggle--in-drawer { - width: 100%; } } - @media only screen and (min-width: 461px) { - button, .p-button, .p-button--neutral, .p-button--brand, .p-button--positive, .p-button--negative, .p-button--base, .p-pagination__link, .p-pagination__link--previous, + @media (min-width: 460px) { + button, .p-article-pagination__link, .p-article-pagination__link--previous, .p-article-pagination__link--next, .p-button, .p-button--neutral, .p-button--brand, .p-button--positive, .p-button--negative, .p-button--base, .p-pagination__link, .p-pagination__link--previous, .p-pagination__link--next, .p-side-navigation__toggle, - .p-side-navigation__toggle--in-drawer { + .p-side-navigation__toggle--in-drawer, .p-tabs__link { + margin-right: 1rem; width: auto; } - button:not(:last-of-type):not(:only-of-type), .p-button:not(:last-of-type):not(:only-of-type), .p-button--neutral:not(:last-of-type):not(:only-of-type), .p-button--brand:not(:last-of-type):not(:only-of-type), .p-button--positive:not(:last-of-type):not(:only-of-type), .p-button--negative:not(:last-of-type):not(:only-of-type), .p-button--base:not(:last-of-type):not(:only-of-type), .p-pagination__link:not(:last-of-type):not(:only-of-type), .p-pagination__link--previous:not(:last-of-type):not(:only-of-type), - .p-pagination__link--next:not(:last-of-type):not(:only-of-type), .p-side-navigation__toggle:not(:last-of-type):not(:only-of-type), - .p-side-navigation__toggle--in-drawer:not(:last-of-type):not(:only-of-type) { - margin-right: 1rem; } } - button.is-dense, .is-dense.p-button, .is-dense.p-button--neutral, .is-dense.p-button--brand, .is-dense.p-button--positive, .is-dense.p-button--negative, .is-dense.p-button--base, .is-dense.p-pagination__link, .is-dense.p-pagination__link--previous, + button:last-child, .p-article-pagination__link:last-child, .p-article-pagination__link--previous:last-child, .p-article-pagination__link--next:last-child, .p-button:last-child, .p-button--neutral:last-child, .p-button--brand:last-child, .p-button--positive:last-child, .p-button--negative:last-child, .p-button--base:last-child, .p-pagination__link:last-child, .p-pagination__link--previous:last-child, + .p-pagination__link--next:last-child, .p-side-navigation__toggle:last-child, + .p-side-navigation__toggle--in-drawer:last-child, .p-tabs__link:last-child { + margin-right: 0; } } + button.is-dense, .is-dense.p-article-pagination__link, .is-dense.p-article-pagination__link--previous, .is-dense.p-article-pagination__link--next, .is-dense.p-button, .is-dense.p-button--neutral, .is-dense.p-button--brand, .is-dense.p-button--positive, .is-dense.p-button--negative, .is-dense.p-button--base, .is-dense.p-pagination__link, .is-dense.p-pagination__link--previous, .is-dense.p-pagination__link--next, .is-dense.p-side-navigation__toggle, - .is-dense.p-side-navigation__toggle--in-drawer { + .is-dense.p-side-navigation__toggle--in-drawer, .is-dense.p-tabs__link { margin-bottom: 0.1rem; padding-bottom: calc(0.15rem - 1px); padding-top: calc(0.15rem - 1px); } - button.is-small, .is-small.p-button, .is-small.p-button--neutral, .is-small.p-button--brand, .is-small.p-button--positive, .is-small.p-button--negative, .is-small.p-button--base, .is-small.p-pagination__link, .is-small.p-pagination__link--previous, + button.is-small, .is-small.p-article-pagination__link, .is-small.p-article-pagination__link--previous, .is-small.p-article-pagination__link--next, .is-small.p-button, .is-small.p-button--neutral, .is-small.p-button--brand, .is-small.p-button--positive, .is-small.p-button--negative, .is-small.p-button--base, .is-small.p-pagination__link, .is-small.p-pagination__link--previous, .is-small.p-pagination__link--next, .is-small.p-side-navigation__toggle, - .is-small.p-side-navigation__toggle--in-drawer { + .is-small.p-side-navigation__toggle--in-drawer, .is-small.p-tabs__link { font-size: 0.875rem; - line-height: 1rem; - margin: 0 0 0.7rem 0; - padding: calc(0.2rem - 1px) 0.5rem; } - button.is-small.is-dense, .is-small.is-dense.p-button, .is-small.is-dense.p-button--neutral, .is-small.is-dense.p-button--brand, .is-small.is-dense.p-button--positive, .is-small.is-dense.p-button--negative, .is-small.is-dense.p-button--base, .is-small.is-dense.p-pagination__link, .is-small.is-dense.p-pagination__link--previous, + line-height: 1.25rem; + margin-bottom: 0.7rem; + padding: calc(0.05rem - 1px) 0.5rem; } + button.is-small.is-dense, .is-small.is-dense.p-article-pagination__link, .is-small.is-dense.p-article-pagination__link--previous, .is-small.is-dense.p-article-pagination__link--next, .is-small.is-dense.p-button, .is-small.is-dense.p-button--neutral, .is-small.is-dense.p-button--brand, .is-small.is-dense.p-button--positive, .is-small.is-dense.p-button--negative, .is-small.is-dense.p-button--base, .is-small.is-dense.p-pagination__link, .is-small.is-dense.p-pagination__link--previous, .is-small.is-dense.p-pagination__link--next, .is-small.is-dense.p-side-navigation__toggle, - .is-small.is-dense.p-side-navigation__toggle--in-drawer { + .is-small.is-dense.p-side-navigation__toggle--in-drawer, .is-small.is-dense.p-tabs__link { margin-bottom: 0.1rem; padding-bottom: calc(0.15rem - 1px); padding-top: calc(0.15rem - 1px); } - p button, p .p-button, p .p-button--neutral, p .p-button--brand, p .p-button--positive, p .p-button--negative, p .p-button--base, p .p-pagination__link, p .p-pagination__link--previous, + p button, p .p-article-pagination__link, p .p-article-pagination__link--previous, p .p-article-pagination__link--next, p .p-button, p .p-button--neutral, p .p-button--brand, p .p-button--positive, p .p-button--negative, p .p-button--base, p .p-pagination__link, p .p-pagination__link--previous, p .p-pagination__link--next, p .p-side-navigation__toggle, - p .p-side-navigation__toggle--in-drawer { + p .p-side-navigation__toggle--in-drawer, p .p-tabs__link { margin-bottom: 0.6rem; margin-top: -0.4rem; } - p + p > button, p + p > .p-button, p + p > .p-button--neutral, p + p > .p-button--brand, p + p > .p-button--positive, p + p > .p-button--negative, p + p > .p-button--base, p + p > .p-pagination__link, p + p > .p-pagination__link--previous, + p + p > button, p + p > .p-article-pagination__link, p + p > .p-article-pagination__link--previous, p + p > .p-article-pagination__link--next, p + p > .p-button, p + p > .p-button--neutral, p + p > .p-button--brand, p + p > .p-button--positive, p + p > .p-button--negative, p + p > .p-button--base, p + p > .p-pagination__link, p + p > .p-pagination__link--previous, p + p > .p-pagination__link--next, p + p > .p-side-navigation__toggle, - p + p > .p-side-navigation__toggle--in-drawer { + p + p > .p-side-navigation__toggle--in-drawer, p + p > .p-tabs__link { margin-top: 0.1rem; } - @media only screen and (max-width: 460px) { - p button + button, p .p-button + button, p .p-button--neutral + button, p .p-button--brand + button, p .p-button--positive + button, p .p-button--negative + button, p .p-button--base + button, p .p-pagination__link + button, p .p-pagination__link--previous + button, p .p-pagination__link--next + button, p .p-side-navigation__toggle + button, p .p-side-navigation__toggle--in-drawer + button, p button + .p-button, p .p-button + .p-button, p .p-button--neutral + .p-button, p .p-button--brand + .p-button, p .p-button--positive + .p-button, p .p-button--negative + .p-button, p .p-button--base + .p-button, p .p-pagination__link + .p-button, p .p-pagination__link--previous + .p-button, p .p-pagination__link--next + .p-button, p .p-side-navigation__toggle + .p-button, p .p-side-navigation__toggle--in-drawer + .p-button, p button + .p-button--neutral, p .p-button + .p-button--neutral, p .p-button--neutral + .p-button--neutral, p .p-button--brand + .p-button--neutral, p .p-button--positive + .p-button--neutral, p .p-button--negative + .p-button--neutral, p .p-button--base + .p-button--neutral, p .p-pagination__link + .p-button--neutral, p .p-pagination__link--previous + .p-button--neutral, p .p-pagination__link--next + .p-button--neutral, p .p-side-navigation__toggle + .p-button--neutral, p .p-side-navigation__toggle--in-drawer + .p-button--neutral, p button + .p-button--brand, p .p-button + .p-button--brand, p .p-button--neutral + .p-button--brand, p .p-button--brand + .p-button--brand, p .p-button--positive + .p-button--brand, p .p-button--negative + .p-button--brand, p .p-button--base + .p-button--brand, p .p-pagination__link + .p-button--brand, p .p-pagination__link--previous + .p-button--brand, p .p-pagination__link--next + .p-button--brand, p .p-side-navigation__toggle + .p-button--brand, p .p-side-navigation__toggle--in-drawer + .p-button--brand, p button + .p-button--positive, p .p-button + .p-button--positive, p .p-button--neutral + .p-button--positive, p .p-button--brand + .p-button--positive, p .p-button--positive + .p-button--positive, p .p-button--negative + .p-button--positive, p .p-button--base + .p-button--positive, p .p-pagination__link + .p-button--positive, p .p-pagination__link--previous + .p-button--positive, p .p-pagination__link--next + .p-button--positive, p .p-side-navigation__toggle + .p-button--positive, p .p-side-navigation__toggle--in-drawer + .p-button--positive, p button + .p-button--negative, p .p-button + .p-button--negative, p .p-button--neutral + .p-button--negative, p .p-button--brand + .p-button--negative, p .p-button--positive + .p-button--negative, p .p-button--negative + .p-button--negative, p .p-button--base + .p-button--negative, p .p-pagination__link + .p-button--negative, p .p-pagination__link--previous + .p-button--negative, p .p-pagination__link--next + .p-button--negative, p .p-side-navigation__toggle + .p-button--negative, p .p-side-navigation__toggle--in-drawer + .p-button--negative, p button + .p-button--base, p .p-button + .p-button--base, p .p-button--neutral + .p-button--base, p .p-button--brand + .p-button--base, p .p-button--positive + .p-button--base, p .p-button--negative + .p-button--base, p .p-button--base + .p-button--base, p .p-pagination__link + .p-button--base, p .p-pagination__link--previous + .p-button--base, p .p-pagination__link--next + .p-button--base, p .p-side-navigation__toggle + .p-button--base, p .p-side-navigation__toggle--in-drawer + .p-button--base, p button + .p-pagination__link, p .p-button + .p-pagination__link, p .p-button--neutral + .p-pagination__link, p .p-button--brand + .p-pagination__link, p .p-button--positive + .p-pagination__link, p .p-button--negative + .p-pagination__link, p .p-button--base + .p-pagination__link, p .p-pagination__link + .p-pagination__link, p .p-pagination__link--previous + .p-pagination__link, p .p-pagination__link--next + .p-pagination__link, p .p-side-navigation__toggle + .p-pagination__link, p .p-side-navigation__toggle--in-drawer + .p-pagination__link, p button + .p-pagination__link--previous, p .p-button + .p-pagination__link--previous, p .p-button--neutral + .p-pagination__link--previous, p .p-button--brand + .p-pagination__link--previous, p .p-button--positive + .p-pagination__link--previous, p .p-button--negative + .p-pagination__link--previous, p .p-button--base + .p-pagination__link--previous, p .p-pagination__link + .p-pagination__link--previous, p .p-pagination__link--previous + .p-pagination__link--previous, p .p-pagination__link--next + .p-pagination__link--previous, p .p-side-navigation__toggle + .p-pagination__link--previous, p .p-side-navigation__toggle--in-drawer + .p-pagination__link--previous, + @media (max-width: 459px) { + p button + button, p .p-article-pagination__link + button, p .p-article-pagination__link--previous + button, p .p-article-pagination__link--next + button, p .p-button + button, p .p-button--neutral + button, p .p-button--brand + button, p .p-button--positive + button, p .p-button--negative + button, p .p-button--base + button, p .p-pagination__link + button, p .p-pagination__link--previous + button, p .p-pagination__link--next + button, p .p-side-navigation__toggle + button, p .p-side-navigation__toggle--in-drawer + button, p .p-tabs__link + button, p button + .p-article-pagination__link, p .p-article-pagination__link + .p-article-pagination__link, p .p-article-pagination__link--previous + .p-article-pagination__link, p .p-article-pagination__link--next + .p-article-pagination__link, p .p-button + .p-article-pagination__link, p .p-button--neutral + .p-article-pagination__link, p .p-button--brand + .p-article-pagination__link, p .p-button--positive + .p-article-pagination__link, p .p-button--negative + .p-article-pagination__link, p .p-button--base + .p-article-pagination__link, p .p-pagination__link + .p-article-pagination__link, p .p-pagination__link--previous + .p-article-pagination__link, p .p-pagination__link--next + .p-article-pagination__link, p .p-side-navigation__toggle + .p-article-pagination__link, p .p-side-navigation__toggle--in-drawer + .p-article-pagination__link, p .p-tabs__link + .p-article-pagination__link, p button + .p-article-pagination__link--previous, p .p-article-pagination__link + .p-article-pagination__link--previous, p .p-article-pagination__link--previous + .p-article-pagination__link--previous, p .p-article-pagination__link--next + .p-article-pagination__link--previous, p .p-button + .p-article-pagination__link--previous, p .p-button--neutral + .p-article-pagination__link--previous, p .p-button--brand + .p-article-pagination__link--previous, p .p-button--positive + .p-article-pagination__link--previous, p .p-button--negative + .p-article-pagination__link--previous, p .p-button--base + .p-article-pagination__link--previous, p .p-pagination__link + .p-article-pagination__link--previous, p .p-pagination__link--previous + .p-article-pagination__link--previous, p .p-pagination__link--next + .p-article-pagination__link--previous, p .p-side-navigation__toggle + .p-article-pagination__link--previous, p .p-side-navigation__toggle--in-drawer + .p-article-pagination__link--previous, p .p-tabs__link + .p-article-pagination__link--previous, p button + .p-article-pagination__link--next, p .p-article-pagination__link + .p-article-pagination__link--next, p .p-article-pagination__link--previous + .p-article-pagination__link--next, p .p-article-pagination__link--next + .p-article-pagination__link--next, p .p-button + .p-article-pagination__link--next, p .p-button--neutral + .p-article-pagination__link--next, p .p-button--brand + .p-article-pagination__link--next, p .p-button--positive + .p-article-pagination__link--next, p .p-button--negative + .p-article-pagination__link--next, p .p-button--base + .p-article-pagination__link--next, p .p-pagination__link + .p-article-pagination__link--next, p .p-pagination__link--previous + .p-article-pagination__link--next, p .p-pagination__link--next + .p-article-pagination__link--next, p .p-side-navigation__toggle + .p-article-pagination__link--next, p .p-side-navigation__toggle--in-drawer + .p-article-pagination__link--next, p .p-tabs__link + .p-article-pagination__link--next, p button + .p-button, p .p-article-pagination__link + .p-button, p .p-article-pagination__link--previous + .p-button, p .p-article-pagination__link--next + .p-button, p .p-button + .p-button, p .p-button--neutral + .p-button, p .p-button--brand + .p-button, p .p-button--positive + .p-button, p .p-button--negative + .p-button, p .p-button--base + .p-button, p .p-pagination__link + .p-button, p .p-pagination__link--previous + .p-button, p .p-pagination__link--next + .p-button, p .p-side-navigation__toggle + .p-button, p .p-side-navigation__toggle--in-drawer + .p-button, p .p-tabs__link + .p-button, p button + .p-button--neutral, p .p-article-pagination__link + .p-button--neutral, p .p-article-pagination__link--previous + .p-button--neutral, p .p-article-pagination__link--next + .p-button--neutral, p .p-button + .p-button--neutral, p .p-button--neutral + .p-button--neutral, p .p-button--brand + .p-button--neutral, p .p-button--positive + .p-button--neutral, p .p-button--negative + .p-button--neutral, p .p-button--base + .p-button--neutral, p .p-pagination__link + .p-button--neutral, p .p-pagination__link--previous + .p-button--neutral, p .p-pagination__link--next + .p-button--neutral, p .p-side-navigation__toggle + .p-button--neutral, p .p-side-navigation__toggle--in-drawer + .p-button--neutral, p .p-tabs__link + .p-button--neutral, p button + .p-button--brand, p .p-article-pagination__link + .p-button--brand, p .p-article-pagination__link--previous + .p-button--brand, p .p-article-pagination__link--next + .p-button--brand, p .p-button + .p-button--brand, p .p-button--neutral + .p-button--brand, p .p-button--brand + .p-button--brand, p .p-button--positive + .p-button--brand, p .p-button--negative + .p-button--brand, p .p-button--base + .p-button--brand, p .p-pagination__link + .p-button--brand, p .p-pagination__link--previous + .p-button--brand, p .p-pagination__link--next + .p-button--brand, p .p-side-navigation__toggle + .p-button--brand, p .p-side-navigation__toggle--in-drawer + .p-button--brand, p .p-tabs__link + .p-button--brand, p button + .p-button--positive, p .p-article-pagination__link + .p-button--positive, p .p-article-pagination__link--previous + .p-button--positive, p .p-article-pagination__link--next + .p-button--positive, p .p-button + .p-button--positive, p .p-button--neutral + .p-button--positive, p .p-button--brand + .p-button--positive, p .p-button--positive + .p-button--positive, p .p-button--negative + .p-button--positive, p .p-button--base + .p-button--positive, p .p-pagination__link + .p-button--positive, p .p-pagination__link--previous + .p-button--positive, p .p-pagination__link--next + .p-button--positive, p .p-side-navigation__toggle + .p-button--positive, p .p-side-navigation__toggle--in-drawer + .p-button--positive, p .p-tabs__link + .p-button--positive, p button + .p-button--negative, p .p-article-pagination__link + .p-button--negative, p .p-article-pagination__link--previous + .p-button--negative, p .p-article-pagination__link--next + .p-button--negative, p .p-button + .p-button--negative, p .p-button--neutral + .p-button--negative, p .p-button--brand + .p-button--negative, p .p-button--positive + .p-button--negative, p .p-button--negative + .p-button--negative, p .p-button--base + .p-button--negative, p .p-pagination__link + .p-button--negative, p .p-pagination__link--previous + .p-button--negative, p .p-pagination__link--next + .p-button--negative, p .p-side-navigation__toggle + .p-button--negative, p .p-side-navigation__toggle--in-drawer + .p-button--negative, p .p-tabs__link + .p-button--negative, p button + .p-button--base, p .p-article-pagination__link + .p-button--base, p .p-article-pagination__link--previous + .p-button--base, p .p-article-pagination__link--next + .p-button--base, p .p-button + .p-button--base, p .p-button--neutral + .p-button--base, p .p-button--brand + .p-button--base, p .p-button--positive + .p-button--base, p .p-button--negative + .p-button--base, p .p-button--base + .p-button--base, p .p-pagination__link + .p-button--base, p .p-pagination__link--previous + .p-button--base, p .p-pagination__link--next + .p-button--base, p .p-side-navigation__toggle + .p-button--base, p .p-side-navigation__toggle--in-drawer + .p-button--base, p .p-tabs__link + .p-button--base, p button + .p-pagination__link, p .p-article-pagination__link + .p-pagination__link, p .p-article-pagination__link--previous + .p-pagination__link, p .p-article-pagination__link--next + .p-pagination__link, p .p-button + .p-pagination__link, p .p-button--neutral + .p-pagination__link, p .p-button--brand + .p-pagination__link, p .p-button--positive + .p-pagination__link, p .p-button--negative + .p-pagination__link, p .p-button--base + .p-pagination__link, p .p-pagination__link + .p-pagination__link, p .p-pagination__link--previous + .p-pagination__link, p .p-pagination__link--next + .p-pagination__link, p .p-side-navigation__toggle + .p-pagination__link, p .p-side-navigation__toggle--in-drawer + .p-pagination__link, p .p-tabs__link + .p-pagination__link, p button + .p-pagination__link--previous, p .p-article-pagination__link + .p-pagination__link--previous, p .p-article-pagination__link--previous + .p-pagination__link--previous, p .p-article-pagination__link--next + .p-pagination__link--previous, p .p-button + .p-pagination__link--previous, p .p-button--neutral + .p-pagination__link--previous, p .p-button--brand + .p-pagination__link--previous, p .p-button--positive + .p-pagination__link--previous, p .p-button--negative + .p-pagination__link--previous, p .p-button--base + .p-pagination__link--previous, p .p-pagination__link + .p-pagination__link--previous, p .p-pagination__link--previous + .p-pagination__link--previous, p .p-pagination__link--next + .p-pagination__link--previous, p .p-side-navigation__toggle + .p-pagination__link--previous, p .p-side-navigation__toggle--in-drawer + .p-pagination__link--previous, p .p-tabs__link + .p-pagination__link--previous, p button + .p-pagination__link--next, + p .p-article-pagination__link + .p-pagination__link--next, + p .p-article-pagination__link--previous + .p-pagination__link--next, + p .p-article-pagination__link--next + .p-pagination__link--next, p .p-button + .p-pagination__link--next, p .p-button--neutral + .p-pagination__link--next, p .p-button--brand + .p-pagination__link--next, @@ -928,8 +910,12 @@ button, .p-button, .p-button--neutral, .p-button--brand, .p-button--positive, .p p .p-pagination__link--previous + .p-pagination__link--next, p .p-pagination__link--next + .p-pagination__link--next, p .p-side-navigation__toggle + .p-pagination__link--next, - p .p-side-navigation__toggle--in-drawer + .p-pagination__link--next, p button + .p-side-navigation__toggle, p .p-button + .p-side-navigation__toggle, p .p-button--neutral + .p-side-navigation__toggle, p .p-button--brand + .p-side-navigation__toggle, p .p-button--positive + .p-side-navigation__toggle, p .p-button--negative + .p-side-navigation__toggle, p .p-button--base + .p-side-navigation__toggle, p .p-pagination__link + .p-side-navigation__toggle, p .p-pagination__link--previous + .p-side-navigation__toggle, p .p-pagination__link--next + .p-side-navigation__toggle, p .p-side-navigation__toggle + .p-side-navigation__toggle, p .p-side-navigation__toggle--in-drawer + .p-side-navigation__toggle, + p .p-side-navigation__toggle--in-drawer + .p-pagination__link--next, + p .p-tabs__link + .p-pagination__link--next, p button + .p-side-navigation__toggle, p .p-article-pagination__link + .p-side-navigation__toggle, p .p-article-pagination__link--previous + .p-side-navigation__toggle, p .p-article-pagination__link--next + .p-side-navigation__toggle, p .p-button + .p-side-navigation__toggle, p .p-button--neutral + .p-side-navigation__toggle, p .p-button--brand + .p-side-navigation__toggle, p .p-button--positive + .p-side-navigation__toggle, p .p-button--negative + .p-side-navigation__toggle, p .p-button--base + .p-side-navigation__toggle, p .p-pagination__link + .p-side-navigation__toggle, p .p-pagination__link--previous + .p-side-navigation__toggle, p .p-pagination__link--next + .p-side-navigation__toggle, p .p-side-navigation__toggle + .p-side-navigation__toggle, p .p-side-navigation__toggle--in-drawer + .p-side-navigation__toggle, p .p-tabs__link + .p-side-navigation__toggle, p button + .p-side-navigation__toggle--in-drawer, + p .p-article-pagination__link + .p-side-navigation__toggle--in-drawer, + p .p-article-pagination__link--previous + .p-side-navigation__toggle--in-drawer, + p .p-article-pagination__link--next + .p-side-navigation__toggle--in-drawer, p .p-button + .p-side-navigation__toggle--in-drawer, p .p-button--neutral + .p-side-navigation__toggle--in-drawer, p .p-button--brand + .p-side-navigation__toggle--in-drawer, @@ -940,12 +926,23 @@ button, .p-button, .p-button--neutral, .p-button--brand, .p-button--positive, .p p .p-pagination__link--previous + .p-side-navigation__toggle--in-drawer, p .p-pagination__link--next + .p-side-navigation__toggle--in-drawer, p .p-side-navigation__toggle + .p-side-navigation__toggle--in-drawer, - p .p-side-navigation__toggle--in-drawer + .p-side-navigation__toggle--in-drawer { + p .p-side-navigation__toggle--in-drawer + .p-side-navigation__toggle--in-drawer, + p .p-tabs__link + .p-side-navigation__toggle--in-drawer, p button + .p-tabs__link, p .p-article-pagination__link + .p-tabs__link, p .p-article-pagination__link--previous + .p-tabs__link, p .p-article-pagination__link--next + .p-tabs__link, p .p-button + .p-tabs__link, p .p-button--neutral + .p-tabs__link, p .p-button--brand + .p-tabs__link, p .p-button--positive + .p-tabs__link, p .p-button--negative + .p-tabs__link, p .p-button--base + .p-tabs__link, p .p-pagination__link + .p-tabs__link, p .p-pagination__link--previous + .p-tabs__link, p .p-pagination__link--next + .p-tabs__link, p .p-side-navigation__toggle + .p-tabs__link, p .p-side-navigation__toggle--in-drawer + .p-tabs__link, p .p-tabs__link + .p-tabs__link { margin-top: 0.6rem; } } .p-button--brand .p-icon--success, .p-button--positive .p-icon--success, .p-button--negative .p-icon--success { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cg fill='none' fill-rule='nonzero'%3E%3Cpath fill='%23fff' d='M8 1a7 7 0 110 14A7 7 0 018 1zm2.83 3.502L6.863 9.884 5.174 8.096l-1.09 1.03 2.92 3.096 5.034-6.83-1.208-.89z'/%3E%3Cpath fill='transparent' d='M10.83 4.502l1.208.89-5.033 6.83-2.922-3.096 1.091-1.03 1.689 1.789z'/%3E%3C/g%3E%3C/svg%3E"); } +.has-icon[class*='p-button'], .p-search-and-filter .p-search-and-filter__clear { + width: auto; } + .has-icon[class*='p-button'] [class*='p-icon'], .p-search-and-filter .p-search-and-filter__clear [class*='p-icon'] { + margin-left: 0.5rem; + margin-right: 0.5rem; } + .has-icon[class*='p-button'] [class*='p-icon']:first-child, .p-search-and-filter .p-search-and-filter__clear [class*='p-icon']:first-child { + margin-left: -0.5rem; } + .has-icon[class*='p-button'] [class*='p-icon']:last-child, .p-search-and-filter .p-search-and-filter__clear [class*='p-icon']:last-child { + margin-right: -0.5rem; } + code, kbd, pre, @@ -961,17 +958,17 @@ samp { pre strong, samp b, samp strong { - font-weight: bold; } + font-weight: 400; } code, kbd, samp { - background-color: #e5e5e5; - box-decoration-break: clone; - box-shadow: 0 0 0 0.25rem #e5e5e5; - margin-left: 0.25rem; - margin-right: 0.25rem; - word-break: break-all; } + background-color: rgba(0, 0, 0, 0.03); + border-radius: 0.125rem; + box-decoration-break: slice; + color: inherit; + line-height: 1.25rem; + padding: calc(0.25rem - 1px) 0.25rem; } code, pre { @@ -989,8 +986,10 @@ pre code { background: none; box-shadow: none; display: inline-block; + line-height: 1.5rem; margin-left: 0; - margin-right: 0; } + margin-right: 0; + padding: 0; } pre { background-color: rgba(0, 0, 0, 0.03); @@ -1004,6 +1003,11 @@ pre { text-shadow: none; white-space: pre; } +[class*='--dark'] code, +code.is-dark { + background-color: rgba(255, 255, 255, 0.3); + color: white; } + .p-code-copyable::before, .p-code-snippet .p-code-snippet__block--icon::before { background-image: url("data:image/svg+xml,%3Csvg width='16px' height='16px' viewBox='0 0 16 16' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='dollar-sign' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpath d='M8.85063291,15 L8.85063291,13.1075949 C9.73924051,12.9978903 10.3974684,12.7181434 10.8253165,12.2683544 C11.2531646,11.8185654 11.4670886,11.2700422 11.4670886,10.6227848 C11.4670886,10.1949367 11.3875528,9.82742616 11.228481,9.52025316 C11.0694092,9.21308017 10.8582278,8.94978903 10.5949367,8.73037975 C10.3316456,8.51097047 10.0244726,8.32172996 9.67341772,8.16265823 C9.32236287,8.00358649 8.96033756,7.85274262 8.58734177,7.71012658 C8.29113924,7.60042194 8.02510548,7.49620253 7.78924051,7.39746835 C7.55337553,7.29873418 7.34767933,7.18902953 7.1721519,7.06835443 C6.99662447,6.94767933 6.86223629,6.81054852 6.76898734,6.65696203 C6.67573839,6.50337553 6.62911392,6.31139241 6.62911392,6.08101266 C6.62911392,5.66413502 6.78544304,5.34599156 7.09810127,5.12658228 C7.41075949,4.907173 7.86329114,4.79746835 8.4556962,4.79746835 C8.99324895,4.79746835 9.43755275,4.84409282 9.78860759,4.93734177 C10.1396624,5.03059072 10.4303797,5.12109705 10.6607595,5.20886076 L10.9405063,4.05696203 C10.7210971,3.96919832 10.4276371,3.88417722 10.0601266,3.80189873 C9.69261604,3.71962025 9.28945148,3.66751055 8.85063291,3.64556962 L8.85063291,2 L7.63291139,2 L7.63291139,3.69493671 C6.84303797,3.81561181 6.23966244,4.09535865 5.82278481,4.53417722 C5.40590718,4.97299578 5.19746835,5.54345991 5.19746835,6.24556962 C5.19746835,6.64050633 5.26877637,6.97236287 5.41139241,7.24113924 C5.55400844,7.50991561 5.73776371,7.74029536 5.96265823,7.93227848 C6.18755275,8.12426161 6.44535865,8.28607595 6.73607595,8.41772152 C7.02679325,8.54936709 7.32025316,8.67004219 7.6164557,8.77974684 C7.9236287,8.88945148 8.21983123,9.00189873 8.50506329,9.11708861 C8.79029536,9.23227848 9.04535865,9.36392405 9.27025316,9.51202532 C9.49514768,9.66012658 9.67341772,9.83016877 9.80506329,10.0221519 C9.93670886,10.214135 10.0025316,10.4472574 10.0025316,10.721519 C10.0025316,10.9080169 9.96962025,11.0808017 9.90379747,11.2398734 C9.83797468,11.3989452 9.72827004,11.5360759 9.57468354,11.6512658 C9.42109705,11.7664557 9.20991561,11.8542194 8.94113924,11.914557 C8.67236287,11.9748945 8.34050633,12.0050633 7.94556962,12.0050633 C7.33122363,12.0050633 6.82109705,11.9419832 6.41518987,11.8158228 C6.0092827,11.6896624 5.65822785,11.5552743 5.36202532,11.4126582 L5,12.5481013 C5.20843882,12.6687763 5.52658228,12.7949367 5.95443038,12.9265823 C6.38227848,13.0582278 6.94177215,13.1350211 7.63291139,13.156962 L7.63291139,15 L8.85063291,15 Z' id='$' fill='%23666' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); content: ''; @@ -1011,6 +1015,9 @@ pre { position: absolute; top: 0.75rem; width: 1rem; } + @media (min-width: 1681px) { + .p-code-copyable::before, .p-code-snippet .p-code-snippet__block--icon::before { + top: 0.84375rem; } } .p-code-numbered__line, .p-code-snippet .p-code-snippet__line { display: inline-block; @@ -1080,12 +1087,12 @@ summary { content: ''; opacity: 0; } -:checked[type='checkbox'] + label::before, :checked[type='radio'] + label::before, .p-checkbox__input:checked + .p-checkbox__label::before, +[type='checkbox'][aria-checked='mixed'] + label::before, [aria-checked='mixed'] + .p-checkbox__label::before, [type='checkbox']:indeterminate + label::before, :indeterminate + .p-checkbox__label::before, :checked[type='checkbox'] + label::before, :checked[type='radio'] + label::before, .p-checkbox__input:checked + .p-checkbox__label::before, .p-radio__input:checked + .p-radio__label::before { background-color: #06c; border-color: #06c; } -:checked[type='checkbox'] + label::after, :checked[type='radio'] + label::after, .p-checkbox__input:checked + .p-checkbox__label::after, +[type='checkbox'][aria-checked='mixed'] + label::after, [aria-checked='mixed'] + .p-checkbox__label::after, [type='checkbox']:indeterminate + label::after, :indeterminate + .p-checkbox__label::after, :checked[type='checkbox'] + label::after, :checked[type='radio'] + label::after, .p-checkbox__input:checked + .p-checkbox__label::after, .p-radio__input:checked + .p-radio__label::after { opacity: 1; } @@ -1105,6 +1112,12 @@ summary { transform: rotate(-45deg); width: 0.625rem; } +[type='checkbox'][aria-checked='mixed'] + label::after, [aria-checked='mixed'] + .p-checkbox__label::after, +[type='checkbox']:indeterminate + label::after, +:indeterminate + .p-checkbox__label::after { + border-left: none; + transform: none; } + [type='radio'] + label::before, .p-radio__label::before { border-radius: 50%; } @@ -1121,25 +1134,32 @@ label [type='checkbox'], label [type='radio'] { opacity: 1; position: static; } -@media (max-width: 772px) { - [type='checkbox'] + label:not(.is-h1)::before, [type='radio'] + label:not(.is-h1)::before, [type='checkbox'] + label:not(.is-h2)::before, [type='radio'] + label:not(.is-h2)::before, [type='checkbox'] + label:not(.is-h3)::before, [type='radio'] + label:not(.is-h3)::before, [type='checkbox'] + label:not(.is-h4)::before, [type='radio'] + label:not(.is-h4)::before, [type='checkbox'] + label:not(.is-muted-heading)::before, [type='radio'] + label:not(.is-muted-heading)::before, [type='checkbox'] + label:not(.is-inline-label)::before, [type='radio'] + label:not(.is-inline-label)::before { - top: 0.6665rem; } - [type='checkbox'] + label.is-h1::before, [type='radio'] + label.is-h1::before { - top: 1.5rem; } - [type='checkbox'] + label.is-h2::before, [type='radio'] + label.is-h2::before { - top: 1rem; } - [type='checkbox'] + label.is-h3::before, [type='radio'] + label.is-h3::before { - top: 1rem; } - [type='checkbox'] + label.is-h4::before, [type='radio'] + label.is-h4::before { - top: 0.5rem; } - [type='checkbox'] + label.is-inline-label::before, [type='radio'] + label.is-inline-label::before { - top: 0.0625rem; } - [type='checkbox'] + label.is-muted-heading::before, [type='radio'] + label.is-muted-heading::before { - top: 0.1665rem; } - [type='checkbox'] + label.is-muted-inline-heading::before, [type='radio'] + label.is-muted-inline-heading::before { - top: 0rem; } - [type='checkbox'] + label.is-table-header::before, [type='radio'] + label.is-table-header::before { - top: -0.05rem; } } +[type='checkbox'] + label:not(.is-h1)::before, [type='radio'] + label:not(.is-h1)::before, [type='checkbox'] + label:not(.is-h2)::before, [type='radio'] + label:not(.is-h2)::before, [type='checkbox'] + label:not(.is-h3)::before, [type='radio'] + label:not(.is-h3)::before, [type='checkbox'] + label:not(.is-h4)::before, [type='radio'] + label:not(.is-h4)::before, [type='checkbox'] + label:not(.is-muted-heading)::before, [type='radio'] + label:not(.is-muted-heading)::before, [type='checkbox'] + label:not(.is-inline-label)::before, [type='radio'] + label:not(.is-inline-label)::before { + top: 0.6665rem; } + +[type='checkbox'] + label.is-h1::before, [type='radio'] + label.is-h1::before { + top: 1.5rem; } + +[type='checkbox'] + label.is-h2::before, [type='radio'] + label.is-h2::before { + top: 1rem; } + +[type='checkbox'] + label.is-h3::before, [type='radio'] + label.is-h3::before { + top: 1rem; } + +[type='checkbox'] + label.is-h4::before, [type='radio'] + label.is-h4::before { + top: 0.5rem; } + +[type='checkbox'] + label.is-inline-label::before, [type='radio'] + label.is-inline-label::before { + top: 0.0625rem; } + +[type='checkbox'] + label.is-muted-heading::before, [type='radio'] + label.is-muted-heading::before { + top: 0.1665rem; } + +[type='checkbox'] + label.is-muted-inline-heading::before, [type='radio'] + label.is-muted-inline-heading::before { + top: 0rem; } + +[type='checkbox'] + label.is-table-header::before, [type='radio'] + label.is-table-header::before { + top: -0.05rem; } @media (min-width: 772px) { [type='checkbox'] + label:not(.is-h1)::before, [type='radio'] + label:not(.is-h1)::before, [type='checkbox'] + label:not(.is-h2)::before, [type='radio'] + label:not(.is-h2)::before, [type='checkbox'] + label:not(.is-h3)::before, [type='radio'] + label:not(.is-h3)::before, [type='checkbox'] + label:not(.is-h4)::before, [type='radio'] + label:not(.is-h4)::before, [type='checkbox'] + label:not(.is-muted-heading)::before, [type='radio'] + label:not(.is-muted-heading)::before, [type='checkbox'] + label:not(.is-inline-label)::before, [type='radio'] + label:not(.is-inline-label)::before { @@ -1173,25 +1193,32 @@ label [type='checkbox'], label [type='radio'] { display: inline; padding-top: 0; } -@media (max-width: 772px) { - [type='checkbox'] + label:not(.is-h1)::after, [type='checkbox'] + label:not(.is-h2)::after, [type='checkbox'] + label:not(.is-h3)::after, [type='checkbox'] + label:not(.is-h4)::after, [type='checkbox'] + label:not(.is-muted-heading)::after, [type='checkbox'] + label:not(.is-inline-label)::after { - top: 0.854rem; } - [type='checkbox'] + label.is-h1::after { - top: 1.6875rem; } - [type='checkbox'] + label.is-h2::after { - top: 1.1875rem; } - [type='checkbox'] + label.is-h3::after { - top: 1.1875rem; } - [type='checkbox'] + label.is-h4::after { - top: 0.6875rem; } - [type='checkbox'] + label.is-inline-label::after { - top: 0.25rem; } - [type='checkbox'] + label.is-muted-heading::after { - top: 0.354rem; } - [type='checkbox'] + label.is-muted-inline-heading::after { - top: 0.1875rem; } - [type='checkbox'] + label.is-table-header::after { - top: 0.1375rem; } } +[type='checkbox'] + label:not(.is-h1)::after, [type='checkbox'] + label:not(.is-h2)::after, [type='checkbox'] + label:not(.is-h3)::after, [type='checkbox'] + label:not(.is-h4)::after, [type='checkbox'] + label:not(.is-muted-heading)::after, [type='checkbox'] + label:not(.is-inline-label)::after { + top: 0.854rem; } + +[type='checkbox'] + label.is-h1::after { + top: 1.6875rem; } + +[type='checkbox'] + label.is-h2::after { + top: 1.1875rem; } + +[type='checkbox'] + label.is-h3::after { + top: 1.1875rem; } + +[type='checkbox'] + label.is-h4::after { + top: 0.6875rem; } + +[type='checkbox'] + label.is-inline-label::after { + top: 0.25rem; } + +[type='checkbox'] + label.is-muted-heading::after { + top: 0.354rem; } + +[type='checkbox'] + label.is-muted-inline-heading::after { + top: 0.1875rem; } + +[type='checkbox'] + label.is-table-header::after { + top: 0.1375rem; } @media (min-width: 772px) { [type='checkbox'] + label:not(.is-h1)::after, [type='checkbox'] + label:not(.is-h2)::after, [type='checkbox'] + label:not(.is-h3)::after, [type='checkbox'] + label:not(.is-h4)::after, [type='checkbox'] + label:not(.is-muted-heading)::after, [type='checkbox'] + label:not(.is-inline-label)::after { @@ -1213,25 +1240,32 @@ label [type='checkbox'], label [type='radio'] { [type='checkbox'] + label.is-table-header::after { top: 0.1375rem; } } -@media (max-width: 772px) { - [type='radio'] + label:not(.is-h1)::after, [type='radio'] + label:not(.is-h2)::after, [type='radio'] + label:not(.is-h3)::after, [type='radio'] + label:not(.is-h4)::after, [type='radio'] + label:not(.is-muted-heading)::after, [type='radio'] + label:not(.is-inline-label)::after { - top: 0.979rem; } - [type='radio'] + label.is-h1::after { - top: 1.8125rem; } - [type='radio'] + label.is-h2::after { - top: 1.3125rem; } - [type='radio'] + label.is-h3::after { - top: 1.3125rem; } - [type='radio'] + label.is-h4::after { - top: 0.8125rem; } - [type='radio'] + label.is-inline-label::after { - top: 0.375rem; } - [type='radio'] + label.is-muted-heading::after { - top: 0.479rem; } - [type='radio'] + label.is-muted-inline-heading::after { - top: 0.3125rem; } - [type='radio'] + label.is-table-header::after { - top: 0.2625rem; } } +[type='radio'] + label:not(.is-h1)::after, [type='radio'] + label:not(.is-h2)::after, [type='radio'] + label:not(.is-h3)::after, [type='radio'] + label:not(.is-h4)::after, [type='radio'] + label:not(.is-muted-heading)::after, [type='radio'] + label:not(.is-inline-label)::after { + top: 0.979rem; } + +[type='radio'] + label.is-h1::after { + top: 1.8125rem; } + +[type='radio'] + label.is-h2::after { + top: 1.3125rem; } + +[type='radio'] + label.is-h3::after { + top: 1.3125rem; } + +[type='radio'] + label.is-h4::after { + top: 0.8125rem; } + +[type='radio'] + label.is-inline-label::after { + top: 0.375rem; } + +[type='radio'] + label.is-muted-heading::after { + top: 0.479rem; } + +[type='radio'] + label.is-muted-inline-heading::after { + top: 0.3125rem; } + +[type='radio'] + label.is-table-header::after { + top: 0.2625rem; } @media (min-width: 772px) { [type='radio'] + label:not(.is-h1)::after, [type='radio'] + label:not(.is-h2)::after, [type='radio'] + label:not(.is-h3)::after, [type='radio'] + label:not(.is-h4)::after, [type='radio'] + label:not(.is-muted-heading)::after, [type='radio'] + label:not(.is-inline-label)::after { @@ -1253,6 +1287,9 @@ label [type='checkbox'], label [type='radio'] { [type='radio'] + label.is-table-header::after { top: 0.2625rem; } } +.p-muted-heading .p-checkbox__label { + color: rgba(0, 0, 0, 0.6); } + [type='checkbox'] + label { color: #111; } [type='checkbox'] + label::before { @@ -1509,7 +1546,7 @@ select, textarea { .is-success :focus[type='url'], .is-success :focus[type='tel'], .is-success select:focus, .is-success textarea:focus { - outline-color: #0e8620; } + outline-color: #0e8420; } .is-dense[type='text'], .is-dense[type='date'], .is-dense[type='datetime'], @@ -1626,7 +1663,7 @@ select, textarea { .has-success[type='url'], .has-success[type='tel'], select.has-success, textarea.has-success { - border: 1px solid #0e8620; } + border: 1px solid #0e8420; } .has-information[type='text'], .has-information[type='date'], .has-information[type='datetime'], @@ -1703,7 +1740,7 @@ select[readonly], textarea[readonly], [readonly='readonly'][type='text'], [readonly='readonly'][type='url'], [readonly='readonly'][type='tel'], select[readonly='readonly'], textarea[readonly='readonly'] { - color: #cdcdcd; + color: #d9d9d9; cursor: default; } :hover[readonly][type='text'], :hover[readonly][type='date'], @@ -1771,15 +1808,14 @@ label { width: fit-content; } label.is-required::after { color: #c7162b; - content: '*'; - left: 0.25rem; + content: ' *'; position: relative; } label.has-error { color: #c7162b; } label.has-caution { color: #f99b11; } label.has-success { - color: #0e8620; } + color: #0e8420; } label.has-information { color: #24598f; } @@ -1831,7 +1867,7 @@ select { select[multiple] option, select[size] option { font-weight: 300; line-height: calc(1rem - 2px); - padding: 0.5rem 0.5rem; } + padding: 0.25rem 0; } textarea { margin-bottom: 1.2rem; @@ -1839,47 +1875,55 @@ textarea { vertical-align: top; } fieldset { - background-color: #f7f7f7; - border: 1px solid rgba(0, 0, 0, 0.56); - border-radius: 0.125rem; - color: #111; - margin-bottom: 1.5rem; - padding: calc(0.5rem - 1px) 0.5rem; } + margin-left: 0; + margin-right: 0; + padding: calc(1rem - 1px); } hr { - border: 0; - height: 1px; - margin-bottom: calc(1rem - 1px); - margin-top: 0; - position: relative; - width: 100%; } - hr + p { - margin-top: -0.5rem; } + margin-bottom: calc(0.5rem - 1px); } + hr.is-muted { + background-color: rgba(0, 0, 0, 0.1); } + hr.is-fixed-width { + margin-left: auto; + margin-right: auto; + max-width: calc(72rem - 2rem); + width: calc(100% - 2rem); } + @media (min-width: 620px) { + hr.is-fixed-width { + max-width: calc(72rem - 3rem); + width: calc(100% - 3rem); } } + @media (min-width: 772px) { + hr.is-fixed-width { + max-width: calc(72rem - 3rem); + width: calc(100% - 3rem); } } + .row hr.is-fixed-width, + .u-fixed-width hr.is-fixed-width { + width: 100%; } hr { - background: rgba(0, 0, 0, 0.2); } + background: rgba(0, 0, 0, 0.15); } hr.is-dark { background: rgba(255, 255, 255, 0.2); } -a { +a, .p-button--link { color: #06c; text-decoration: none; } - a:focus { + a:focus, .p-button--link:focus { outline: 0.1875rem solid #2e96ff; outline-offset: -0.1875rem; } - a:focus-visible { + a:focus-visible, .p-button--link:focus-visible { outline: 0.1875rem solid #2e96ff; outline-offset: -0.1875rem; } - a:focus:not(:focus-visible) { + a:focus:not(:focus-visible), .p-button--link:focus:not(:focus-visible) { outline: 0; outline-offset: 0; } - a:focus { + a:focus, .p-button--link:focus { outline-offset: 0; } - a:hover { + a:hover, .p-button--link:hover { cursor: pointer; text-decoration: underline; } - a:visited { + a:visited, .p-button--link:visited { color: #7d42b8; } ol, @@ -1957,6 +2001,7 @@ audio:not([controls]) { table { border: 0; border-collapse: collapse; + caption-side: bottom; line-height: 1.5rem; margin-bottom: 1.5rem; overflow-x: auto; @@ -1972,26 +2017,48 @@ th { text-align: left; text-overflow: ellipsis; vertical-align: top; } + td.has-overflow, + th.has-overflow { + overflow: visible; } thead th { - line-height: 1rem; padding-bottom: 0.75rem; - padding-top: 0.7505rem; - text-transform: uppercase; } + padding-top: 0.7505rem; } thead tr { - border-bottom: 1px solid rgba(0, 0, 0, 0.2); + border-bottom: 1px solid rgba(0, 0, 0, 0.15); vertical-align: top; } +caption { + padding-bottom: 0.5rem; + padding-top: 0.5rem; } + tfoot tr, tbody tr:not(:first-child) { border-top: 1px solid rgba(0, 0, 0, 0.1); } +.col-small-1, .col-small-2, .col-small-3, .col-small-4, .col-medium-1, .col-medium-2, .col-medium-3, .col-medium-4, .col-medium-5, .col-medium-6, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { + display: block; } + +@media (max-width: 620px) { + .col-medium-1, .col-medium-2, .col-medium-3, .col-medium-4, .col-medium-5, .col-medium-6, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { + grid-column: auto/span 4; } } + +@media (min-width: 620px) and (max-width: 772px) { + .col-small-1, .col-small-2, .col-small-3, .col-small-4, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { + grid-column: auto/span 6; } } + +@media (min-width: 772px) { + .col-small-1, .col-small-2, .col-small-3, .col-small-4, .col-medium-1, .col-medium-2, .col-medium-3, .col-medium-4, .col-medium-5, .col-medium-6 { + grid-column: auto/span 12; } } + .p-divider, .row, .p-stepped-list--detailed .p-stepped-list__item, .p-navigation__row, .u-fixed-width { margin-left: auto; margin-right: auto; - max-width: 72rem; width: 100%; } +.p-divider, .row, .p-stepped-list--detailed .p-stepped-list__item, .p-navigation__row, .u-fixed-width { + max-width: 72rem; } + @media (min-width: 772px) { .p-divider, .row, .p-stepped-list--detailed .p-stepped-list__item { display: flex; } } @@ -2005,19 +2072,17 @@ tfoot tr, tbody tr:not(:first-child) { @supports (display: grid) { .p-divider, .row, .p-stepped-list--detailed .p-stepped-list__item { display: grid; + grid-gap: 0 1.5rem; + grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto; margin-left: auto; margin-right: auto; max-width: 72rem; } + .p-divider > *, .row > *, .p-stepped-list--detailed .p-stepped-list__item > * { + grid-column-end: span 4; } .p-divider [class*='col-'], .row [class*='col-'], .p-stepped-list--detailed .p-stepped-list__item [class*='col-'] { grid-column-start: auto; } - @media (max-width: 620px) { - .p-divider, .row, .p-stepped-list--detailed .p-stepped-list__item { - grid-gap: 0 1.5rem; - grid-template-columns: repeat(4, minmax(0, 1fr)); } - .p-divider > *, .row > *, .p-stepped-list--detailed .p-stepped-list__item > * { - grid-column-end: span 4; } } - @media (min-width: 620px) and (max-width: 772px) { + @media (min-width: 620px) { .p-divider, .row, .p-stepped-list--detailed .p-stepped-list__item { grid-gap: 0 2rem; grid-template-columns: repeat(6, minmax(0, 1fr)); } @@ -2030,20 +2095,17 @@ tfoot tr, tbody tr:not(:first-child) { .p-divider > *, .row > *, .p-stepped-list--detailed .p-stepped-list__item > * { grid-column-end: span 12; } } } -@media (max-width: 620px) { - .p-divider, .row, .p-stepped-list--detailed .p-stepped-list__item, .p-navigation__row, .u-fixed-width, .p-panel__header { - padding-left: 1rem; - padding-right: 1rem; } } - -@media (min-width: 620px) and (max-width: 772px) { - .p-divider, .row, .p-stepped-list--detailed .p-stepped-list__item, .p-navigation__row, .u-fixed-width, .p-panel__header { - padding-left: 1.5rem; - padding-right: 1.5rem; } } - -@media (min-width: 772px) { - .p-divider, .row, .p-stepped-list--detailed .p-stepped-list__item, .p-navigation__row, .u-fixed-width, .p-panel__header { - padding-left: 1.5rem; - padding-right: 1.5rem; } } +.p-divider, .row, .p-stepped-list--detailed .p-stepped-list__item, .p-navigation__row, .u-fixed-width, .p-panel__header { + padding-left: 1rem; + padding-right: 1rem; } + @media (min-width: 620px) { + .p-divider, .row, .p-stepped-list--detailed .p-stepped-list__item, .p-navigation__row, .u-fixed-width, .p-panel__header { + padding-left: 1.5rem; + padding-right: 1.5rem; } } + @media (min-width: 772px) { + .p-divider, .row, .p-stepped-list--detailed .p-stepped-list__item, .p-navigation__row, .u-fixed-width, .p-panel__header { + padding-left: 1.5rem; + padding-right: 1.5rem; } } /* http://prismjs.com/ @@ -2052,7 +2114,7 @@ tfoot tr, tbody tr:not(:first-child) { https://github.com/alphagov/govuk_elements/blob/master/assets/sass/vendor/prism.scss */ .token.comment, .token.prolog, .token.doctype, .token.cdata { - color: #666; } + color: rgba(0, 0, 0, 0.6); } .token.punctuation { color: #111; } @@ -2083,7 +2145,7 @@ tfoot tr, tbody tr:not(:first-child) { color: #dc3023; } .token.important, .token.bold { - font-weight: bold; } + font-weight: 400; } .token.italic { font-style: italic; } @@ -2123,10 +2185,12 @@ tfoot tr, tbody tr:not(:first-child) { outline-offset: 0; } .p-accordion__tab { - background-position: top calc(0.5rem - 1px + 0.25rem) left 1rem; - background-repeat: no-repeat; } + background-position: top calc(0.75rem) left 1rem; + background-repeat: no-repeat; + font-size: inherit; } .p-accordion__tab[aria-expanded='true'] { background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23666' fill-rule='nonzero' d='M14.849 7.25v1.5H1.15v-1.5z'/%3E%3C/svg%3E"); + background-color: inherit; background-size: 1rem; } .p-accordion__tab[aria-expanded='false'] { background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23666' fill-rule='nonzero' d='M8.75 1.151V7.25l6.099.001v1.5h-6.1l.001 6.099h-1.5v-6.1L1.15 8.75v-1.5H7.25L7.25 1.15z'/%3E%3C/svg%3E"); @@ -2154,12 +2218,36 @@ h5.p-accordion__title::before, h6.p-accordion__title::before { vertical-align: calc(0.5px + 0.3465em - 0.5rem); } +.p-accordion__tab--with-title[aria-expanded] { + background-color: inherit; } + .p-accordion__tab--with-title[aria-expanded='true'] .p-accordion__title::before { background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23666' fill-rule='nonzero' d='M14.849 7.25v1.5H1.15v-1.5z'/%3E%3C/svg%3E"); } .p-accordion__tab--with-title[aria-expanded='false'] .p-accordion__title::before { background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23666' fill-rule='nonzero' d='M8.75 1.151V7.25l6.099.001v1.5h-6.1l.001 6.099h-1.5v-6.1L1.15 8.75v-1.5H7.25L7.25 1.15z'/%3E%3C/svg%3E"); } +.p-accordion__heading { + margin-bottom: 0; + max-width: none; + padding-top: 0; } + .p-accordion__heading > .p-accordion__tab { + font-size: inherit; + font-weight: inherit; + line-height: inherit; } + +h2.p-accordion__heading > .p-accordion__tab, +.p-heading--2 > .p-accordion__tab { + background-position-y: calc(1.5rem); } + +h3.p-accordion__heading > .p-accordion__tab, +.p-heading--3 > .p-accordion__tab { + background-position-y: calc(1.25rem); } + +h4.p-accordion__heading > .p-accordion__tab, +.p-heading--4 > .p-accordion__tab { + background-position-y: calc(1rem); } + .p-accordion__panel { margin: 0; overflow: auto; @@ -2195,13 +2283,27 @@ h6.p-accordion__title::before { font-size: 1.25em; } } .p-article-pagination__link, .p-article-pagination__link--previous, .p-article-pagination__link--next { + background-color: #fff; + border-color: transparent; + color: #111; margin-top: 0; padding: 1rem; position: relative; width: 50%; } + .p-article-pagination__link:visited, .p-article-pagination__link--previous:visited, .p-article-pagination__link--next:visited { + color: #111; } .p-article-pagination__link:hover, .p-article-pagination__link--previous:hover, .p-article-pagination__link--next:hover { - background: #f7f7f7; - text-decoration: none; } + background-color: #f2f2f2; + border-color: transparent; } + .p-article-pagination__link:active, .p-article-pagination__link--previous:active, .p-article-pagination__link--next:active, .p-article-pagination__link[aria-pressed='true'], .p-article-pagination__link--previous[aria-pressed='true'], .p-article-pagination__link--next[aria-pressed='true'], .p-article-pagination__link[aria-expanded='true'], .p-article-pagination__link--previous[aria-expanded='true'], .p-article-pagination__link--next[aria-expanded='true'] { + background-color: #ebebeb; + border-color: transparent; + transition-duration: 0s; } + .p-article-pagination__link:disabled:active, .p-article-pagination__link--previous:disabled:active, .p-article-pagination__link--next:disabled:active, .p-article-pagination__link:disabled[aria-pressed='true'], .p-article-pagination__link--previous:disabled[aria-pressed='true'], .p-article-pagination__link--next:disabled[aria-pressed='true'], .p-article-pagination__link:disabled[aria-expanded='true'], .p-article-pagination__link--previous:disabled[aria-expanded='true'], .p-article-pagination__link--next:disabled[aria-expanded='true'], .p-article-pagination__link:disabled:hover, .p-article-pagination__link--previous:disabled:hover, .p-article-pagination__link--next:disabled:hover, .is-disabled.p-article-pagination__link:active, .is-disabled.p-article-pagination__link--previous:active, .is-disabled.p-article-pagination__link--next:active, .is-disabled.p-article-pagination__link[aria-pressed='true'], .is-disabled.p-article-pagination__link--previous[aria-pressed='true'], .is-disabled.p-article-pagination__link--next[aria-pressed='true'], .is-disabled.p-article-pagination__link[aria-expanded='true'], .is-disabled.p-article-pagination__link--previous[aria-expanded='true'], .is-disabled.p-article-pagination__link--next[aria-expanded='true'], .is-disabled.p-article-pagination__link:hover, .is-disabled.p-article-pagination__link--previous:hover, .is-disabled.p-article-pagination__link--next:hover { + background-color: transparent; + border-color: transparent; } + .p-article-pagination__link .p-link--external, .p-article-pagination__link--previous .p-link--external, .p-article-pagination__link--next .p-link--external { + color: currentColor; } .p-article-pagination__link--previous { padding-left: 2.5rem; @@ -2241,7 +2343,7 @@ h6.p-accordion__title::before { .p-breadcrumbs__item { display: inline-block; - margin-bottom: 0.6rem; } + margin-bottom: 0.1rem; } .p-breadcrumbs__item:not(:first-of-type) { text-indent: 1rem; } .p-breadcrumbs__item:not(:first-of-type)::before { @@ -2258,16 +2360,35 @@ h6.p-accordion__title::before { .p-button:hover { background-color: #f2f2f2; border-color: rgba(0, 0, 0, 0.56); } - .p-button:active { - background-color: #d9d9d9; - border-color: #fff; + .p-button:active, .p-button[aria-pressed='true'], .p-button[aria-expanded='true'] { + background-color: #ebebeb; + border-color: rgba(0, 0, 0, 0.56); transition-duration: 0s; } - .p-button:disabled:active, .p-button:disabled:hover, .is-disabled.p-button:active, .is-disabled.p-button:hover { - background-color: #fff; - border-color: #fff; } + .p-button:disabled:active, .p-button:disabled[aria-pressed='true'], .p-button:disabled[aria-expanded='true'], .p-button:disabled:hover, .is-disabled.p-button:active, .is-disabled.p-button[aria-pressed='true'], .is-disabled.p-button[aria-expanded='true'], .is-disabled.p-button:hover { + background-color: transparent; + border-color: rgba(0, 0, 0, 0.56); } .p-button .p-link--external { color: currentColor; } +.p-button.is-dark { + background-color: #262626; + border-color: rgba(255, 255, 255, 0.4); + color: white; } + .p-button.is-dark:visited { + color: white; } + .p-button.is-dark:hover { + background-color: rgba(255, 255, 255, 0.05); + border-color: rgba(255, 255, 255, 0.4); } + .p-button.is-dark:active, .p-button.is-dark[aria-pressed='true'], .p-button.is-dark[aria-expanded='true'] { + background-color: rgba(255, 255, 255, 0.08); + border-color: rgba(255, 255, 255, 0.4); + transition-duration: 0s; } + .p-button.is-dark:disabled:active, .p-button.is-dark:disabled[aria-pressed='true'], .p-button.is-dark:disabled[aria-expanded='true'], .p-button.is-dark:disabled:hover, .is-disabled.p-button.is-dark:active, .is-disabled.p-button.is-dark[aria-pressed='true'], .is-disabled.p-button.is-dark[aria-expanded='true'], .is-disabled.p-button.is-dark:hover { + background-color: transparent; + border-color: rgba(255, 255, 255, 0.4); } + .p-button.is-dark .p-link--external { + color: currentColor; } + .p-button--neutral { background-color: #fff; border-color: rgba(0, 0, 0, 0.56); @@ -2277,11 +2398,11 @@ h6.p-accordion__title::before { .p-button--neutral:hover { background-color: #f2f2f2; border-color: rgba(0, 0, 0, 0.56); } - .p-button--neutral:active { - background-color: #d9d9d9; + .p-button--neutral:active, .p-button--neutral[aria-pressed='true'], .p-button--neutral[aria-expanded='true'] { + background-color: #ebebeb; border-color: rgba(0, 0, 0, 0.56); transition-duration: 0s; } - .p-button--neutral:disabled:active, .p-button--neutral:disabled:hover, .is-disabled.p-button--neutral:active, .is-disabled.p-button--neutral:hover { + .p-button--neutral:disabled:active, .p-button--neutral:disabled[aria-pressed='true'], .p-button--neutral:disabled[aria-expanded='true'], .p-button--neutral:disabled:hover, .is-disabled.p-button--neutral:active, .is-disabled.p-button--neutral[aria-pressed='true'], .is-disabled.p-button--neutral[aria-expanded='true'], .is-disabled.p-button--neutral:hover { background-color: transparent; border-color: rgba(0, 0, 0, 0.56); } .p-button--neutral .p-link--external { @@ -2294,34 +2415,53 @@ h6.p-accordion__title::before { .p-button--brand:visited { color: #111; } .p-button--brand:hover { - background-color: #c7c2ac; - border-color: rgba(0, 0, 0, 0.56); } - .p-button--brand:active { - background-color: #b7b195; - border-color: #b7b195; + background-color: #c5c0a9; + border-color: #c5c0a9; } + .p-button--brand:active, .p-button--brand[aria-pressed='true'], .p-button--brand[aria-expanded='true'] { + background-color: #bfb9a0; + border-color: #bfb9a0; transition-duration: 0s; } - .p-button--brand:disabled:active, .p-button--brand:disabled:hover, .is-disabled.p-button--brand:active, .is-disabled.p-button--brand:hover { + .p-button--brand:disabled:active, .p-button--brand:disabled[aria-pressed='true'], .p-button--brand:disabled[aria-expanded='true'], .p-button--brand:disabled:hover, .is-disabled.p-button--brand:active, .is-disabled.p-button--brand[aria-pressed='true'], .is-disabled.p-button--brand[aria-expanded='true'], .is-disabled.p-button--brand:hover { background-color: #CFCBB8; border-color: #CFCBB8; } .p-button--brand .p-link--external { color: currentColor; } +.p-button--brand.is-dark { + background-color: #CFCBB8; + border-color: #CFCBB8; + color: #111; } + .p-button--brand.is-dark:visited { + color: #111; } + .p-button--brand.is-dark:hover { + background-color: #c5c0a9; + border-color: #c5c0a9; } + .p-button--brand.is-dark:active, .p-button--brand.is-dark[aria-pressed='true'], .p-button--brand.is-dark[aria-expanded='true'] { + background-color: #bfb9a0; + border-color: #bfb9a0; + transition-duration: 0s; } + .p-button--brand.is-dark:disabled:active, .p-button--brand.is-dark:disabled[aria-pressed='true'], .p-button--brand.is-dark:disabled[aria-expanded='true'], .p-button--brand.is-dark:disabled:hover, .is-disabled.p-button--brand.is-dark:active, .is-disabled.p-button--brand.is-dark[aria-pressed='true'], .is-disabled.p-button--brand.is-dark[aria-expanded='true'], .is-disabled.p-button--brand.is-dark:hover { + background-color: #CFCBB8; + border-color: #CFCBB8; } + .p-button--brand.is-dark .p-link--external { + color: currentColor; } + .p-button--positive { - background-color: #0e8620; - border-color: #0e8620; + background-color: #0e8420; + border-color: #0e8420; color: #fff; } .p-button--positive:visited { color: #fff; } .p-button--positive:hover { - background-color: #0d7f1e; - border-color: rgba(0, 0, 0, 0.56); } - .p-button--positive:active { - background-color: #0c721b; - border-color: rgba(0, 0, 0, 0.56); + background-color: #0c6d1a; + border-color: #0c6d1a; } + .p-button--positive:active, .p-button--positive[aria-pressed='true'], .p-button--positive[aria-expanded='true'] { + background-color: #0a5f17; + border-color: #0a5f17; transition-duration: 0s; } - .p-button--positive:disabled:active, .p-button--positive:disabled:hover, .is-disabled.p-button--positive:active, .is-disabled.p-button--positive:hover { - background-color: #0e8620; - border-color: #0e8620; } + .p-button--positive:disabled:active, .p-button--positive:disabled[aria-pressed='true'], .p-button--positive:disabled[aria-expanded='true'], .p-button--positive:disabled:hover, .is-disabled.p-button--positive:active, .is-disabled.p-button--positive[aria-pressed='true'], .is-disabled.p-button--positive[aria-expanded='true'], .is-disabled.p-button--positive:hover { + background-color: #0e8420; + border-color: #0e8420; } .p-button--positive .p-link--external { color: currentColor; } .p-button--positive:focus { @@ -2334,6 +2474,34 @@ h6.p-accordion__title::before { outline: 0; outline-offset: 0; } +.p-button--positive.is-dark { + background-color: #008013; + border-color: #008013; + color: #fff; } + .p-button--positive.is-dark:visited { + color: #fff; } + .p-button--positive.is-dark:hover { + background-color: #00670f; + border-color: #00670f; } + .p-button--positive.is-dark:active, .p-button--positive.is-dark[aria-pressed='true'], .p-button--positive.is-dark[aria-expanded='true'] { + background-color: #00570d; + border-color: #00570d; + transition-duration: 0s; } + .p-button--positive.is-dark:disabled:active, .p-button--positive.is-dark:disabled[aria-pressed='true'], .p-button--positive.is-dark:disabled[aria-expanded='true'], .p-button--positive.is-dark:disabled:hover, .is-disabled.p-button--positive.is-dark:active, .is-disabled.p-button--positive.is-dark[aria-pressed='true'], .is-disabled.p-button--positive.is-dark[aria-expanded='true'], .is-disabled.p-button--positive.is-dark:hover { + background-color: #008013; + border-color: #008013; } + .p-button--positive.is-dark .p-link--external { + color: currentColor; } + .p-button--positive.is-dark:focus { + outline: 0.1875rem solid #003008; + outline-offset: -0.1875rem; } + .p-button--positive.is-dark:focus-visible { + outline: 0.1875rem solid #003008; + outline-offset: -0.1875rem; } + .p-button--positive.is-dark:focus:not(:focus-visible) { + outline: 0; + outline-offset: 0; } + .p-button--negative { background-color: #c7162b; border-color: #c7162b; @@ -2341,13 +2509,13 @@ h6.p-accordion__title::before { .p-button--negative:visited { color: #fff; } .p-button--negative:hover { - background-color: #bd1529; - border-color: rgba(0, 0, 0, 0.56); } - .p-button--negative:active { - background-color: #a91325; - border-color: #a91325; + background-color: #b01326; + border-color: #b01326; } + .p-button--negative:active, .p-button--negative[aria-pressed='true'], .p-button--negative[aria-expanded='true'] { + background-color: #a21223; + border-color: #a21223; transition-duration: 0s; } - .p-button--negative:disabled:active, .p-button--negative:disabled:hover, .is-disabled.p-button--negative:active, .is-disabled.p-button--negative:hover { + .p-button--negative:disabled:active, .p-button--negative:disabled[aria-pressed='true'], .p-button--negative:disabled[aria-expanded='true'], .p-button--negative:disabled:hover, .is-disabled.p-button--negative:active, .is-disabled.p-button--negative[aria-pressed='true'], .is-disabled.p-button--negative[aria-expanded='true'], .is-disabled.p-button--negative:hover { background-color: #c7162b; border-color: #c7162b; } .p-button--negative .p-link--external { @@ -2362,6 +2530,34 @@ h6.p-accordion__title::before { outline: 0; outline-offset: 0; } +.p-button--negative.is-dark { + background-color: #a11223; + border-color: #a11223; + color: #fff; } + .p-button--negative.is-dark:visited { + color: #fff; } + .p-button--negative.is-dark:hover { + background-color: #8a0f1e; + border-color: #8a0f1e; } + .p-button--negative.is-dark:active, .p-button--negative.is-dark[aria-pressed='true'], .p-button--negative.is-dark[aria-expanded='true'] { + background-color: #7c0e1b; + border-color: #7c0e1b; + transition-duration: 0s; } + .p-button--negative.is-dark:disabled:active, .p-button--negative.is-dark:disabled[aria-pressed='true'], .p-button--negative.is-dark:disabled[aria-expanded='true'], .p-button--negative.is-dark:disabled:hover, .is-disabled.p-button--negative.is-dark:active, .is-disabled.p-button--negative.is-dark[aria-pressed='true'], .is-disabled.p-button--negative.is-dark[aria-expanded='true'], .is-disabled.p-button--negative.is-dark:hover { + background-color: #a11223; + border-color: #a11223; } + .p-button--negative.is-dark .p-link--external { + color: currentColor; } + .p-button--negative.is-dark:focus { + outline: 0.1875rem solid #3b0006; + outline-offset: -0.1875rem; } + .p-button--negative.is-dark:focus-visible { + outline: 0.1875rem solid #3b0006; + outline-offset: -0.1875rem; } + .p-button--negative.is-dark:focus:not(:focus-visible) { + outline: 0; + outline-offset: 0; } + .p-button--base { background-color: transparent; border-color: transparent; @@ -2371,16 +2567,49 @@ h6.p-accordion__title::before { .p-button--base:hover { background-color: #f2f2f2; border-color: transparent; } - .p-button--base:active { - background-color: #d9d9d9; + .p-button--base:active, .p-button--base[aria-pressed='true'], .p-button--base[aria-expanded='true'] { + background-color: #ebebeb; border-color: transparent; transition-duration: 0s; } - .p-button--base:disabled:active, .p-button--base:disabled:hover, .is-disabled.p-button--base:active, .is-disabled.p-button--base:hover { + .p-button--base:disabled:active, .p-button--base:disabled[aria-pressed='true'], .p-button--base:disabled[aria-expanded='true'], .p-button--base:disabled:hover, .is-disabled.p-button--base:active, .is-disabled.p-button--base[aria-pressed='true'], .is-disabled.p-button--base[aria-expanded='true'], .is-disabled.p-button--base:hover { background-color: transparent; - border-color: rgba(0, 0, 0, 0.56); } + border-color: transparent; } .p-button--base .p-link--external { color: currentColor; } +.p-button--base.is-dark { + background-color: transparent; + border-color: transparent; + color: white; } + .p-button--base.is-dark:visited { + color: white; } + .p-button--base.is-dark:hover { + background-color: rgba(255, 255, 255, 0.05); + border-color: transparent; } + .p-button--base.is-dark:active, .p-button--base.is-dark[aria-pressed='true'], .p-button--base.is-dark[aria-expanded='true'] { + background-color: rgba(255, 255, 255, 0.08); + border-color: transparent; + transition-duration: 0s; } + .p-button--base.is-dark:disabled:active, .p-button--base.is-dark:disabled[aria-pressed='true'], .p-button--base.is-dark:disabled[aria-expanded='true'], .p-button--base.is-dark:disabled:hover, .is-disabled.p-button--base.is-dark:active, .is-disabled.p-button--base.is-dark[aria-pressed='true'], .is-disabled.p-button--base.is-dark[aria-expanded='true'], .is-disabled.p-button--base.is-dark:hover { + background-color: transparent; + border-color: transparent; } + .p-button--base.is-dark .p-link--external { + color: currentColor; } + +.p-button--link { + background-color: transparent; + border: none; + border-radius: 0; + margin-right: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; } + .p-button--link:hover { + background: transparent; } + p .p-button--link { + margin-bottom: 0; + padding-top: 0; } + @media (min-width: 460px) { [class*='p-button'].is-inline { margin-left: 1rem; @@ -2392,16 +2621,6 @@ h6.p-accordion__title::before { [class*='p-button'].is-active { opacity: 1 !important; } -[class*='p-button'].has-icon { - width: auto; } - [class*='p-button'].has-icon [class*='p-icon'] { - margin-left: 0.5rem; - margin-right: 0.5rem; } - [class*='p-button'].has-icon [class*='p-icon']:first-child { - margin-left: -0.5rem; } - [class*='p-button'].has-icon [class*='p-icon']:last-child { - margin-right: -0.5rem; } - .p-card { padding: calc(1rem - 1px); } @@ -2418,12 +2637,12 @@ h6.p-accordion__title::before { padding: 1rem; } .p-card__image { - margin-bottom: 1rem; + margin-bottom: 0.5rem; vertical-align: top; width: 100%; } .p-card__header { - border-bottom: 1px solid #cdcdcd; + border-bottom: 1px solid #d9d9d9; padding-bottom: 1rem; } .p-card__header > .p-link--soft { display: inline-block; @@ -2443,7 +2662,7 @@ h6.p-accordion__title::before { margin-top: -0.5rem; } .p-chip { - background-color: rgba(0, 0, 0, 0.05); + background-color: #f2f2f2; border-radius: 1rem; display: inline-flex; line-height: 1rem; @@ -2456,31 +2675,28 @@ h6.p-accordion__title::before { user-select: none; white-space: nowrap; } .p-chip:hover { - background-color: rgba(0, 0, 0, 0.08); } - .p-chip.is-selected { - background-color: rgba(0, 0, 0, 0.15); } - .p-chip.is-selected:hover { - background-color: rgba(0, 0, 0, 0.18); } - .p-chip:active { - background-color: rgba(0, 0, 0, 0.15); } - .p-chip__lead, .p-chip__value { + background-color: #e6e6e6; } + .p-chip.is-selected, .p-chip:active { + background-color: #ebebeb; } + .p-chip .p-chip__lead, + .p-chip .p-chip__value { margin-bottom: 0; overflow: hidden; text-overflow: ellipsis; } - .p-chip__lead { + .p-chip .p-chip__lead { line-height: 1rem; padding-right: 0.5rem; padding-top: 0.1rem; position: relative; text-transform: uppercase; } - .p-chip__lead::after { + .p-chip .p-chip__lead::after { content: '\00a0:'; position: absolute; right: 0.25rem; } - .p-chip__value { + .p-chip .p-chip__value { line-height: 1rem; padding-top: 0.05rem; } - .p-chip__dismiss { + .p-chip .p-chip__dismiss { background-color: transparent; border-color: transparent; color: #111; @@ -2494,24 +2710,24 @@ h6.p-accordion__title::before { padding: 0; position: relative; top: 0.05rem; } - .p-chip__dismiss:visited { + .p-chip .p-chip__dismiss:visited { color: #111; } - .p-chip__dismiss:hover { + .p-chip .p-chip__dismiss:hover { background-color: transparent; border-color: transparent; } - .p-chip__dismiss:active { - background-color: #d9d9d9; + .p-chip .p-chip__dismiss:active, .p-chip .p-chip__dismiss[aria-pressed='true'], .p-chip .p-chip__dismiss[aria-expanded='true'] { + background-color: #ebebeb; border-color: rgba(0, 0, 0, 0.56); transition-duration: 0s; } - .p-chip__dismiss:disabled:active, .p-chip__dismiss:disabled:hover, .p-chip__dismiss.is-disabled:active, .p-chip__dismiss.is-disabled:hover { + .p-chip .p-chip__dismiss:disabled:active, .p-chip .p-chip__dismiss:disabled[aria-pressed='true'], .p-chip .p-chip__dismiss:disabled[aria-expanded='true'], .p-chip .p-chip__dismiss:disabled:hover, .p-chip .p-chip__dismiss.is-disabled:active, .p-chip .p-chip__dismiss.is-disabled[aria-pressed='true'], .p-chip .p-chip__dismiss.is-disabled[aria-expanded='true'], .p-chip .p-chip__dismiss.is-disabled:hover { background-color: transparent; border-color: rgba(0, 0, 0, 0.56); } - .p-chip__dismiss .p-link--external { + .p-chip .p-chip__dismiss .p-link--external { color: currentColor; } - @media only screen and (max-width: 460px) { - .p-chip__dismiss { + @media (max-width: 460px) { + .p-chip .p-chip__dismiss { width: auto; } } - .p-chip__dismiss [class*='p-icon'] { + .p-chip .p-chip__dismiss [class*='p-icon'] { vertical-align: calc(0.3465em - 0.5rem); } .p-code-copyable { @@ -2527,6 +2743,7 @@ h6.p-accordion__title::before { background: transparent; border: 0; font-family: "Ubuntu Mono", Consolas, Monaco, Courier, monospace; + font-weight: 300; line-height: 1.5rem; margin-bottom: 0; margin-top: 0; @@ -2542,6 +2759,8 @@ h6.p-accordion__title::before { .p-code-snippet { margin-bottom: 1.5rem; } + .p-code-snippet.is-bordered { + border: 1px solid rgba(0, 0, 0, 0.1); } .p-code-snippet .p-code-snippet__block, .p-code-snippet .p-code-snippet__block--icon, .p-code-snippet .p-code-snippet__block--numbered { @@ -2553,9 +2772,6 @@ h6.p-accordion__title::before { .p-code-snippet .p-code-snippet__block--icon { padding-left: 2.5rem; position: relative; } - @media (min-width: 1681px) { - .p-code-snippet .p-code-snippet__block--icon::before { - top: 0.84375rem; } } .p-code-snippet .p-code-snippet__block--icon.is-windows-prompt::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='%23666' d='M8.187 11.748l6.187-6.187-1.06-1.061-5.127 5.127L3.061 4.5 2 5.561z'/%3E%3C/svg%3E"); transform: rotate(270deg); } @@ -2564,25 +2780,50 @@ h6.p-accordion__title::before { .p-code-snippet .p-code-snippet__block--numbered { counter-reset: line-numbering; } .p-code-snippet .p-code-snippet__header { + align-items: flex-start; background-color: rgba(0, 0, 0, 0.08); display: flex; justify-content: space-between; - padding: 0.5rem 1rem; } + padding-left: 1rem; + padding-right: 1rem; } .p-code-snippet .p-code-snippet__title { - margin-bottom: 0; - padding-top: 0; } - .p-code-snippet .p-code-snippet__dropdowns { - flex-shrink: 0; - margin-left: 0.5rem; } + flex: 0 1 auto; + margin-bottom: 0.5rem; + overflow: hidden; + padding-top: 0.5rem; + text-overflow: ellipsis; + white-space: nowrap; } .p-code-snippet .p-code-snippet__dropdown { background-color: transparent; - border-color: transparent; + border: 0; color: #111; - margin-bottom: -0.5rem !important; - margin-top: calc(-0.5rem - 1px) !important; + margin-bottom: 0; + margin-left: 0.5rem; min-width: min-content; - padding-bottom: calc(0.15rem - 1px); - padding-top: calc(0.15rem - 1px); } + padding-bottom: 0.5rem; + padding-left: 1rem; + padding-top: 0.5rem; + width: min-content; } + .p-code-snippet .p-code-snippet__dropdowns { + display: flex; + flex-shrink: 0; } + .p-code-snippet .p-code-snippet__dropdowns:first-child { + margin-left: auto; } + .p-code-snippet .p-code-snippet__dropdown + .p-code-snippet__dropdown { + border-left: 1px solid rgba(0, 0, 0, 0.15); } + .p-code-snippet .p-code-snippet__header.is-stacked { + flex-direction: column; } + .p-code-snippet .p-code-snippet__header.is-stacked .p-code-snippet__title { + white-space: normal; } + .p-code-snippet .p-code-snippet__header.is-stacked .p-code-snippet__dropdowns { + flex: 1 0 100%; + justify-content: flex-end; + width: 100%; } + .p-code-snippet .p-code-snippet__header.is-stacked .p-code-snippet__title + .p-code-snippet__dropdowns { + border-top: 1px solid rgba(0, 0, 0, 0.15); } + .p-code-snippet iframe { + margin: 0; + width: calc(100% - 1px); } .p-contextual-menu, .p-contextual-menu--left, .p-contextual-menu--center { display: inline-block; @@ -2641,23 +2882,27 @@ h6.p-accordion__title::before { border-radius: 0.125rem; text-decoration: none; } -.p-contextual-menu__toggle[aria-expanded='true'] .p-contextual-menu__indicator { - transform: rotate(180deg); } +.p-contextual-menu__toggle { + margin-right: 0; } + .p-contextual-menu__toggle[aria-expanded='true'] .p-contextual-menu__indicator { + transform: rotate(180deg); } .p-contextual-menu__dropdown { background: #fff; } .p-contextual-menu__group + .p-contextual-menu__group { - border-top-color: rgba(0, 0, 0, 0.2); } + border-top-color: rgba(0, 0, 0, 0.15); } .p-contextual-menu__link, .p-contextual-menu__link:active, .p-contextual-menu__link:hover, .p-contextual-menu__link:visited { + background-color: transparent; color: #111; } .p-contextual-menu__link:hover { - background-color: rgba(0, 0, 0, 0.05); } + background-color: #f2f2f2; } .p-contextual-menu__link:active { - background-color: rgba(0, 0, 0, 0.15); } + background-color: #ebebeb; + cursor: default; } [class*='p-contextual-menu'].is-dark .p-contextual-menu__dropdown { background: #262626; } @@ -2666,22 +2911,26 @@ h6.p-accordion__title::before { border-top-color: rgba(255, 255, 255, 0.2); } [class*='p-contextual-menu'].is-dark .p-contextual-menu__link, [class*='p-contextual-menu'].is-dark .p-contextual-menu__link:active, [class*='p-contextual-menu'].is-dark .p-contextual-menu__link:hover, [class*='p-contextual-menu'].is-dark .p-contextual-menu__link:visited { + background-color: transparent; color: white; } [class*='p-contextual-menu'].is-dark .p-contextual-menu__link:hover { background-color: rgba(255, 255, 255, 0.05); } [class*='p-contextual-menu'].is-dark .p-contextual-menu__link:active { - background-color: rgba(255, 255, 255, 0.15); } + background-color: rgba(255, 255, 255, 0.08); + cursor: default; } + +.p-divider { + margin-bottom: 1.5rem; } .p-divider__block { position: relative; } @media (max-width: 772px) { .p-divider__block { - padding-bottom: 1.5rem; + padding-bottom: 1rem; padding-top: 1rem; } .p-divider__block:not(:first-child)::before { - background-color: #cdcdcd; content: ''; height: 1px; left: 0; @@ -2690,7 +2939,6 @@ h6.p-accordion__title::before { top: 0; } } @media (min-width: 772px) { .p-divider__block:not(:first-child)::before { - background-color: #cdcdcd; bottom: 0; content: ''; left: -1rem; @@ -2698,6 +2946,16 @@ h6.p-accordion__title::before { top: 0; width: 1px; } } +.p-divider__block { + color: #111; } + .p-divider__block:not(:first-child)::before { + background-color: rgba(0, 0, 0, 0.15); } + +.p-divider.is-dark .p-divider__block { + color: white; } + .p-divider.is-dark .p-divider__block:not(:first-child)::before { + background-color: rgba(255, 255, 255, 0.2); } + .p-form-help-text { color: #666; margin-top: -0.5rem; } @@ -2748,11 +3006,11 @@ h6.p-accordion__title::before { padding-right: 3rem; } .is-success .p-form-validation__input { - border-color: #0e8620; } + border-color: #0e8420; } .is-success :not(select).p-form-validation__input, .is-success .p-form-validation__select-wrapper::after { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cg fill='none' fill-rule='nonzero'%3E%3Cpath fill='%230e8620' d='M8 1a7 7 0 110 14A7 7 0 018 1zm2.83 3.502L6.863 9.884 5.174 8.096l-1.09 1.03 2.92 3.096 5.034-6.83-1.208-.89z'/%3E%3Cpath fill='%23fff' d='M10.83 4.502l1.208.89-5.033 6.83-2.922-3.096 1.091-1.03 1.689 1.789z'/%3E%3C/g%3E%3C/svg%3E"); } + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cg fill='none' fill-rule='nonzero'%3E%3Cpath fill='%230e8420' d='M8 1a7 7 0 110 14A7 7 0 018 1zm2.83 3.502L6.863 9.884 5.174 8.096l-1.09 1.03 2.92 3.096 5.034-6.83-1.208-.89z'/%3E%3Cpath fill='%23fff' d='M10.83 4.502l1.208.89-5.033 6.83-2.922-3.096 1.091-1.03 1.689 1.789z'/%3E%3C/g%3E%3C/svg%3E"); } .is-caution .p-form-validation__input { border-color: #f99b11; } @@ -2766,7 +3024,7 @@ h6.p-accordion__title::before { .is-error :not(select).p-form-validation__input, .is-error .p-form-validation__select-wrapper::after { - background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle stroke='%23C7162B' stroke-width='1.5' fill='%23c7162b' cx='8' cy='8' r='6.25'/%3E%3Cpath fill='%23FFF' fill-rule='nonzero' d='M10.282 4.638l1.06 1.06L9.05 7.99l2.293 2.292-1.06 1.06L7.99 9.05 5.7 11.343l-1.06-1.06 2.29-2.293L4.64 5.7l1.06-1.06 2.291 2.29z'/%3E%3C/g%3E%3C/svg%3E"); } + background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle stroke='%23c7162b' stroke-width='1.5' fill='%23c7162b' cx='8' cy='8' r='6.25'/%3E%3Cpath fill='%23FFF' fill-rule='nonzero' d='M10.282 4.638l1.06 1.06L9.05 7.99l2.293 2.292-1.06 1.06L7.99 9.05 5.7 11.343l-1.06-1.06 2.29-2.293L4.64 5.7l1.06-1.06 2.291 2.29z'/%3E%3C/g%3E%3C/svg%3E"); } .p-checkbox, .p-checkbox--heading, @@ -2831,13 +3089,13 @@ h6.p-accordion__title::before { .p-form--stacked { width: 100%; } - @media screen and (min-width: 772px) { + @media (min-width: 772px) { .p-form--stacked .p-form__group { align-items: baseline; } .p-form--stacked .p-form__group + .p-form__group { margin-top: 0.5rem; } } -@media screen and (min-width: 772px) { +@media (min-width: 772px) { .p-form--inline { align-items: baseline; display: inline-flex; @@ -2846,7 +3104,7 @@ h6.p-accordion__title::before { .p-form--inline > * { margin-right: 1.5rem; } } -@media screen and (min-width: 772px) { +@media (min-width: 772px) { .p-form--inline .p-form__group { display: flex; flex-shrink: 1; @@ -2870,25 +3128,10 @@ form + [class*='p-button'] { .row { width: 100%; } -@media (max-width: 620px) { - .col-medium-1, .col-medium-2, .col-medium-3, .col-medium-4, .col-medium-5, .col-medium-6, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { - grid-column: 1/span 4; } } - -@media (min-width: 620px) and (max-width: 772px) { - .col-small-1, .col-small-2, .col-small-3, .col-small-4, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { - grid-column: 1/span 6; } } - -@media (min-width: 772px) { - .col-small-1, .col-small-2, .col-small-3, .col-small-4, .col-medium-1, .col-medium-2, .col-medium-3, .col-medium-4, .col-medium-5, .col-medium-6 { - grid-column: 1/span 12; } } - .grid-demo [class*='col-'] { background: rgba(199, 22, 43, 0.1); margin-bottom: 0.5rem; } -.col-small-1, .col-small-2, .col-small-3, .col-small-4, .col-medium-1, .col-medium-2, .col-medium-3, .col-medium-4, .col-medium-5, .col-medium-6, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { - display: block; } - @media (max-width: 620px) { .col-small-4 { width: 100%; } @@ -3232,15 +3475,12 @@ form + [class*='p-button'] { .row.is-bordered { position: relative; } .row.is-bordered::before { - background: #cdcdcd; + background: #d9d9d9; content: ''; height: 1px; - margin-bottom: calc(1rem - 1px); - position: absolute; } - @media (max-width: 620px) { - .row.is-bordered::before { - left: 1rem; - right: 1rem; } } + left: 1rem; + position: absolute; + right: 1rem; } @media (min-width: 620px) and (max-width: 772px) { .row.is-bordered::before { left: 1.5rem; @@ -3251,7 +3491,7 @@ form + [class*='p-button'] { right: 1.5rem; } } .p-heading-icon { - margin-bottom: 1rem; } + margin-bottom: 1.5rem; } @media (min-width: 772px) { .p-heading-icon { margin-bottom: 0; } } @@ -3266,10 +3506,8 @@ form + [class*='p-button'] { height: 2rem; margin-bottom: 0; margin-right: 1rem; + margin-top: 0.5rem; width: 2rem; } - @media (max-width: 772px) { - .p-heading-icon__img { - margin-top: 0.5rem; } } @media (min-width: 772px) { .p-heading-icon__img { height: 2.5rem; @@ -3278,10 +3516,8 @@ form + [class*='p-button'] { .p-heading-icon--small .p-heading-icon__img { height: 1.5rem; + margin-top: 0.25rem; width: 1.5rem; } - @media (max-width: 772px) { - .p-heading-icon--small .p-heading-icon__img { - margin-top: 0.25rem; } } @media (min-width: 772px) { .p-heading-icon--small .p-heading-icon__img { height: 2rem; @@ -3386,7 +3622,7 @@ h4 [class*='p-icon'], background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 6v6a1.5 1.5 0 001.356 1.493L6 13.5h4a1.5 1.5 0 001.493-1.356L11.5 12V6H13v6a3 3 0 01-3 3H6a3 3 0 01-3-3V6h1.5zm3 0v5.994H6V6h1.5zm2.498 0v5.994h-1.5V6h1.5zM8.5 0A2.5 2.5 0 0111 2.5V3h3v1.5H2V3h3v-.5A2.5 2.5 0 017.5 0h1zm0 1.5h-1a1 1 0 00-.993.883L6.5 2.5V3h3v-.5a1 1 0 00-.883-.993L8.5 1.5z' fill='%23e5e5e5' fill-rule='evenodd'/%3E%3C/svg%3E"); } .p-icon--error { - background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle stroke='%23C7162B' stroke-width='1.5' fill='%23c7162b' cx='8' cy='8' r='6.25'/%3E%3Cpath fill='%23FFF' fill-rule='nonzero' d='M10.282 4.638l1.06 1.06L9.05 7.99l2.293 2.292-1.06 1.06L7.99 9.05 5.7 11.343l-1.06-1.06 2.29-2.293L4.64 5.7l1.06-1.06 2.291 2.29z'/%3E%3C/g%3E%3C/svg%3E"); } + background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle stroke='%23c7162b' stroke-width='1.5' fill='%23c7162b' cx='8' cy='8' r='6.25'/%3E%3Cpath fill='%23FFF' fill-rule='nonzero' d='M10.282 4.638l1.06 1.06L9.05 7.99l2.293 2.292-1.06 1.06L7.99 9.05 5.7 11.343l-1.06-1.06 2.29-2.293L4.64 5.7l1.06-1.06 2.291 2.29z'/%3E%3C/g%3E%3C/svg%3E"); } .p-icon--warning { background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M9.34 1.2l5.842 11.627A1.5 1.5 0 0113.842 15H2.158a1.5 1.5 0 01-1.34-2.173L6.66 1.2a1.5 1.5 0 012.68 0z' fill='%23f99b11'/%3E%3Cpath d='M8.5 11a.5.5 0 01.492.41L9 11.5v1a.5.5 0 01-.41.492L8.5 13h-1a.5.5 0 01-.492-.41L7 12.5v-1a.5.5 0 01.41-.492L7.5 11h1zM9 5v4.5H7V5h2z' fill='%23FFF'/%3E%3C/g%3E%3C/svg%3E"); } @@ -3422,7 +3658,7 @@ h4 [class*='p-icon'], background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.964 1a5.964 5.964 0 014.709 9.623l4.303 4.305-1.06 1.06-4.306-4.305A5.964 5.964 0 116.963 1zm0 1.5a4.464 4.464 0 100 8.927 4.464 4.464 0 000-8.927z' fill='%23e5e5e5' fill-rule='nonzero'/%3E%3C/svg%3E"); } .p-icon--success { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cg fill='none' fill-rule='nonzero'%3E%3Cpath fill='%230e8620' d='M8 1a7 7 0 110 14A7 7 0 018 1zm2.83 3.502L6.863 9.884 5.174 8.096l-1.09 1.03 2.92 3.096 5.034-6.83-1.208-.89z'/%3E%3Cpath fill='%23fff' d='M10.83 4.502l1.208.89-5.033 6.83-2.922-3.096 1.091-1.03 1.689 1.789z'/%3E%3C/g%3E%3C/svg%3E"); } + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cg fill='none' fill-rule='nonzero'%3E%3Cpath fill='%230e8420' d='M8 1a7 7 0 110 14A7 7 0 018 1zm2.83 3.502L6.863 9.884 5.174 8.096l-1.09 1.03 2.92 3.096 5.034-6.83-1.208-.89z'/%3E%3Cpath fill='%23fff' d='M10.83 4.502l1.208.89-5.033 6.83-2.922-3.096 1.091-1.03 1.689 1.789z'/%3E%3C/g%3E%3C/svg%3E"); } .p-icon--share { background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 0a3 3 0 11-2.123 5.12L6.869 7.12a3 3 0 01-.029 1.848l3.058 1.89a3 3 0 11-.774 1.285l-3.109-1.922a3 3 0 11.068-4.381l3.032-2.017A3.002 3.002 0 0112 0zm0 11.5a1.5 1.5 0 100 3 1.5 1.5 0 000-3zm-8-5a1.5 1.5 0 100 3 1.5 1.5 0 000-3zm8-5a1.5 1.5 0 100 3 1.5 1.5 0 000-3z' fill='%23666' fill-rule='nonzero'/%3E%3C/svg%3E"); } @@ -3442,6 +3678,9 @@ h4 [class*='p-icon'], .p-icon--facebook { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='40' height='40'%3E%3Cdefs%3E%3Cpath id='a' d='M.002.002H40v39.755H.002z'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cmask id='b' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3Cpath fill='%231877F2' d='M40 20C40 8.954 31.046 0 20 0S0 8.954 0 20c0 9.983 7.314 18.257 16.875 19.757V25.781h-5.078V20h5.078v-4.406c0-5.013 2.986-7.781 7.554-7.781 2.188 0 4.477.39 4.477.39v4.922h-2.522c-2.484 0-3.259 1.542-3.259 3.123V20h5.547l-.887 5.781h-4.66v13.976C32.686 38.257 40 29.983 40 20' mask='url(%23b)'/%3E%3Cpath fill='%23FFF' d='M27.785 25.781L28.672 20h-5.547v-3.752c0-1.581.775-3.123 3.26-3.123h2.521V8.203s-2.289-.39-4.477-.39c-4.568 0-7.554 2.768-7.554 7.78V20h-5.078v5.781h5.078v13.976a20.15 20.15 0 006.25 0V25.781h4.66'/%3E%3C/g%3E%3C/svg%3E"); } +.p-icon--github { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 187 182'%3E%3Cpath d='M93.04.43C41.669.43.013 42.079.013 93.457c0 41.103 26.655 75.973 63.617 88.273 4.649.86 6.356-2.02 6.356-4.48 0-2.21-.086-9.54-.126-17.32-25.88 5.63-31.341-10.97-31.341-10.97-4.232-10.75-10.329-13.61-10.329-13.61-8.441-5.78.636-5.66.636-5.66 9.341.66 14.26 9.59 14.26 9.59 8.297 14.22 21.762 10.11 27.071 7.73.835-6.01 3.246-10.12 5.906-12.44C55.4 132.22 33.68 124.24 33.68 88.598c0-10.156 3.634-18.454 9.585-24.97-.966-2.344-4.15-11.804.901-24.618 0 0 7.812-2.501 25.589 9.535 7.421-2.061 15.379-3.095 23.284-3.13 7.901.035 15.871 1.069 23.301 3.13 17.76-12.036 25.56-9.535 25.56-9.535 5.06 12.814 1.88 22.274.91 24.618 5.97 6.515 9.58 14.814 9.58 24.97 0 35.732-21.77 43.602-42.48 45.902 3.34 2.89 6.31 8.55 6.31 17.23 0 12.44-.11 22.46-.11 25.52 0 2.48 1.68 5.38 6.39 4.47 36.94-12.32 63.57-47.18 63.57-88.264 0-51.378-41.65-93.027-93.03-93.027' fill='%231B1817' fill-rule='evenodd'/%3E%3C/svg%3E"); } + .p-icon--twitter { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none'%3E%3Ccircle cx='20' cy='20' r='20' fill='%231DA1F2'/%3E%3Cpath fill='%23FFF' d='M16.34 30.55c8.87 0 13.72-7.35 13.72-13.72 0-.21 0-.42-.01-.62.94-.68 1.76-1.53 2.41-2.5-.86.38-1.79.64-2.77.76 1-.6 1.76-1.54 2.12-2.67-.93.55-1.96.95-3.06 1.17a4.799 4.799 0 00-3.52-1.52c-2.66 0-4.82 2.16-4.82 4.82 0 .38.04.75.13 1.1a13.68 13.68 0 01-9.94-5.04c-.41.71-.65 1.54-.65 2.42a4.8 4.8 0 002.15 4.01c-.79-.02-1.53-.24-2.18-.6v.06c0 2.34 1.66 4.28 3.87 4.73a4.807 4.807 0 01-2.18.08 4.815 4.815 0 004.5 3.35 9.693 9.693 0 01-7.14 1.99c2.11 1.38 4.65 2.18 7.37 2.18'/%3E%3C/g%3E%3C/svg%3E"); } @@ -3490,12 +3729,12 @@ h4 [class*='p-icon'], top: 0; } .p-image--bordered { - border-color: #cdcdcd; + border-color: #d9d9d9; border-style: solid; border-width: 1px; } .p-image--shadowed { - box-shadow: 0 1px 5px 1px rgba(205, 205, 205, 0.2); } + box-shadow: 0 1px 5px 1px rgba(217, 217, 217, 0.2); } .p-inline-images { display: block; @@ -3510,7 +3749,7 @@ h4 [class*='p-icon'], overflow: hidden; text-align: center; vertical-align: middle; } - @media only screen and (min-width: 772px) { + @media (min-width: 772px) { .p-inline-images__item { margin: 1.875rem; } } @@ -3518,12 +3757,12 @@ h4 [class*='p-icon'], max-height: 3rem; max-width: 7rem; width: auto; } - @media screen and (min-width: 772px) { + @media (min-width: 772px) { .p-inline-images__logo { max-height: 5.5rem; max-width: 9rem; } } -.p-label--validated, .p-label--in-progress, .p-label--new, .p-label--updated, .p-label--deprecated { +.p-label, .p-label--validated, .p-label--in-progress, .p-label--new, .p-label--updated, .p-label--deprecated { border-radius: 0.125rem; display: inline-block; font-weight: 400; @@ -3532,6 +3771,10 @@ h4 [class*='p-icon'], text-decoration: none; white-space: nowrap; } +.p-label { + background-color: #666; + color: #fff; } + .p-label--validated { background-color: #006b75; color: #fff; } @@ -3541,7 +3784,7 @@ h4 [class*='p-icon'], color: #111; } .p-label--new { - background-color: #0e8620; + background-color: #0e8420; color: #fff; } .p-label--updated { @@ -3570,6 +3813,28 @@ h4 [class*='p-icon'], .p-link--inverted:visited { color: #dedede; } +.p-link--skip { + color: #06c; + display: block; + left: -999px; + position: absolute; + top: -999px; } + .p-link--skip:focus { + left: 0; + padding: 0.25rem; + position: relative; + top: 0; + z-index: 999999; } + .p-link--skip:focus:focus { + outline: 0.1875rem solid #2e96ff; + outline-offset: -0.1875rem; } + .p-link--skip:focus:focus-visible { + outline: 0.1875rem solid #2e96ff; + outline-offset: -0.1875rem; } + .p-link--skip:focus:focus:not(:focus-visible) { + outline: 0; + outline-offset: 0; } + @supports (mask-size: 1em) or (-webkit-mask-size: 1em) { .p-link--external::after { background-color: currentColor; @@ -3583,19 +3848,22 @@ h4 [class*='p-icon'], width: 1rem; } } .p-top { - border-bottom: 1px dotted #cdcdcd; - clear: both; - margin: 20px 0; } + align-items: center; + display: flex; } + .p-top::before { + border-bottom: 1px solid rgba(0, 0, 0, 0.15); + content: ''; + flex-grow: 1; + margin: 1.5rem 0 calc(1.5rem - 1px) 0; } + .p-top::after { + background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 4.349l4.685 4.684-.884.884-3.052-3.051.001 7.526h-1.5V6.866L4.2 9.917l-.885-.884L8 4.35zm7.025-3.099v1.5H1.051v-1.5h13.974z' fill='%23666' fill-rule='nonzero'/%3E%3C/svg%3E"); + content: ''; + margin-right: 0.5rem; } .p-top__link { - background: #fff; color: #111; - float: right; - margin-right: 5px; - padding: 0 5px; - position: relative; - text-decoration: none; - top: -0.725rem; } + padding: 0 0.5rem 0 1rem; + text-decoration: none; } .p-list-tree .p-list-tree[aria-hidden='false']::after, .p-list-tree__item--group::after { background-position: center; @@ -3610,7 +3878,7 @@ h4 [class*='p-icon'], width: 0.9375rem; } .p-list-tree { - border-left: 1px solid #cdcdcd; + border-left: 1px solid #d9d9d9; list-style-type: none; margin-left: 1rem; padding: 0 0 0 0.25rem; } @@ -3637,7 +3905,7 @@ h4 [class*='p-icon'], outline: 0; outline-offset: 0; } .p-list-tree__item::before { - background: #cdcdcd; + background: #d9d9d9; content: ' '; display: block; height: 1px; @@ -3680,10 +3948,8 @@ h4 [class*='p-icon'], padding-left: 0; } .p-stepped-list__title { - display: flex; list-style: none; - margin-left: 0; - padding-left: 0; } + margin-left: 0; } .p-stepped-list__title::before { align-self: start; background-color: #e5e5e5; @@ -3692,6 +3958,8 @@ h4 [class*='p-icon'], counter-increment: li; direction: rtl; display: block; + left: 0; + position: absolute; text-align: center; } .p-list__item, .p-list--divided .p-list__item { @@ -3706,7 +3974,7 @@ h4 [class*='p-icon'], .p-list--divided .p-list__item { position: relative; } .p-list--divided .p-list__item::after { - border-bottom: 1px solid #cdcdcd; + border-bottom: 1px solid #d9d9d9; bottom: 0; content: ''; height: 1px; @@ -3718,7 +3986,7 @@ h4 [class*='p-icon'], border-bottom: 0; } .p-list--divided.is-split .p-list__item:last-of-type { - border-bottom: 1px solid #cdcdcd; } + border-bottom: 1px solid #d9d9d9; } .is-ticked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cg fill='none' fill-rule='nonzero'%3E%3Cpath fill='%23EF7E45' d='M8 1a7 7 0 110 14A7 7 0 018 1zm2.83 3.502L6.863 9.884 5.174 8.096l-1.09 1.03 2.92 3.096 5.034-6.83-1.208-.89z'/%3E%3Cpath fill='%23fff' d='M10.83 4.502l1.208.89-5.033 6.83-2.922-3.096 1.091-1.03 1.689 1.789z'/%3E%3C/g%3E%3C/svg%3E"); @@ -3749,19 +4017,20 @@ h4 [class*='p-icon'], .p-inline-list--middot .p-inline-list__item.last-item, .p-inline-list--middot .p-inline-list__item:last-of-type { margin-right: 0; } .p-inline-list--middot .p-inline-list__item::after { - color: #666; - content: '\00b7'; - font-size: 1.4em; - line-height: 0; + content: '\2022'; + line-height: 1.5rem; position: absolute; - right: -0.5rem; - top: 0.4em; } - .p-inline-list--middot .p-inline-list__item:hover::after { - color: #666; } + right: -0.5rem; } .p-inline-list--middot .p-inline-list__item:last-of-type::after, .p-inline-list--middot .p-inline-list__item .last-item::after { content: ''; } +.p-inline-list--middot { + color: #111; } + +.p-inline-list--middot.is-dark { + color: white; } + .p-inline-list--stretch { display: flex; flex-wrap: wrap; @@ -3786,117 +4055,135 @@ h4 [class*='p-icon'], .p-stepped-list__bullet { display: none; } -h6.p-stepped-list__title::before { - flex-shrink: 0; - margin-right: 1rem; } - @media (max-width: 772px) { - h6.p-stepped-list__title::before { - width: 1.5rem; } } +.p-stepped-list__title { + padding-left: 2.5rem; } @media (min-width: 772px) { - h6.p-stepped-list__title::before { - width: 1.5rem; } } + .p-stepped-list__title { + padding-left: 2.5rem; } } + .p-stepped-list__title::before { + margin-right: 1rem; + width: 1.5rem; } + @media (min-width: 772px) { + .p-stepped-list__title::before { + width: 1.5rem; } } -@media (max-width: 772px) { - h6.p-stepped-list__title + .p-stepped-list__content { - margin-left: 2.5rem; } } +.p-stepped-list__title + .p-stepped-list__content { + margin-left: 2.5rem; } + @media (min-width: 772px) { + .p-stepped-list__title + .p-stepped-list__content { + margin-left: 2.5rem; } } @media (min-width: 772px) { - h6.p-stepped-list__title + .p-stepped-list__content { - margin-left: 2.5rem; } } + .p-stepped-list--detailed .p-stepped-list__title + .p-stepped-list__content { + margin-left: 0; } } -h5.p-stepped-list__title::before { - flex-shrink: 0; - margin-right: 1rem; } - @media (max-width: 772px) { - h5.p-stepped-list__title::before { - width: 1.5rem; } } +h6.p-stepped-list__title { + padding-left: 2.5rem; } @media (min-width: 772px) { - h5.p-stepped-list__title::before { - width: 1.5rem; } } + h6.p-stepped-list__title { + padding-left: 2.5rem; } } + h6.p-stepped-list__title::before { + margin-right: 1rem; + width: 1.5rem; } + @media (min-width: 772px) { + h6.p-stepped-list__title::before { + width: 1.5rem; } } -@media (max-width: 772px) { - h5.p-stepped-list__title + .p-stepped-list__content { - margin-left: 2.5rem; } } +h6.p-stepped-list__title + .p-stepped-list__content { + margin-left: 2.5rem; } + @media (min-width: 772px) { + h6.p-stepped-list__title + .p-stepped-list__content { + margin-left: 2.5rem; } } -@media (min-width: 772px) { - h5.p-stepped-list__title + .p-stepped-list__content { - margin-left: 2.5rem; } } +h5.p-stepped-list__title { + padding-left: 2.5rem; } + @media (min-width: 772px) { + h5.p-stepped-list__title { + padding-left: 2.5rem; } } + h5.p-stepped-list__title::before { + margin-right: 1rem; + width: 1.5rem; } + @media (min-width: 772px) { + h5.p-stepped-list__title::before { + width: 1.5rem; } } -h4.p-stepped-list__title::before { - flex-shrink: 0; - margin-right: 1rem; } - @media (max-width: 772px) { - h4.p-stepped-list__title::before { - width: 1.5rem; } } +h5.p-stepped-list__title + .p-stepped-list__content { + margin-left: 2.5rem; } @media (min-width: 772px) { - h4.p-stepped-list__title::before { - width: 2rem; } } + h5.p-stepped-list__title + .p-stepped-list__content { + margin-left: 2.5rem; } } -@media (max-width: 772px) { - h4.p-stepped-list__title + .p-stepped-list__content { - margin-left: 2.5rem; } } +h4.p-stepped-list__title { + padding-left: 2.5rem; } + @media (min-width: 772px) { + h4.p-stepped-list__title { + padding-left: 3rem; } } + h4.p-stepped-list__title::before { + margin-right: 1rem; + width: 1.5rem; } + @media (min-width: 772px) { + h4.p-stepped-list__title::before { + width: 2rem; } } -@media (min-width: 772px) { - h4.p-stepped-list__title + .p-stepped-list__content { - margin-left: 3rem; } } +h4.p-stepped-list__title + .p-stepped-list__content { + margin-left: 2.5rem; } + @media (min-width: 772px) { + h4.p-stepped-list__title + .p-stepped-list__content { + margin-left: 3rem; } } -h3.p-stepped-list__title::before { - flex-shrink: 0; - margin-right: 1rem; } - @media (max-width: 772px) { - h3.p-stepped-list__title::before { - width: 2rem; } } +h3.p-stepped-list__title { + padding-left: 3rem; } @media (min-width: 772px) { - h3.p-stepped-list__title::before { - width: 2.5rem; } } - -@media (max-width: 772px) { - h3.p-stepped-list__title + .p-stepped-list__content { - margin-left: 3rem; } } - -@media (min-width: 772px) { - h3.p-stepped-list__title + .p-stepped-list__content { - margin-left: 3.5rem; } } + h3.p-stepped-list__title { + padding-left: 3.5rem; } } + h3.p-stepped-list__title::before { + margin-right: 1rem; + width: 2rem; } + @media (min-width: 772px) { + h3.p-stepped-list__title::before { + width: 2.5rem; } } -h2.p-stepped-list__title::before { - flex-shrink: 0; - margin-right: 1rem; } - @media (max-width: 772px) { - h2.p-stepped-list__title::before { - width: 2.5rem; } } +h3.p-stepped-list__title + .p-stepped-list__content { + margin-left: 3rem; } @media (min-width: 772px) { - h2.p-stepped-list__title::before { - width: 3rem; } } - -@media (max-width: 772px) { - h2.p-stepped-list__title + .p-stepped-list__content { - margin-left: 3.5rem; } } + h3.p-stepped-list__title + .p-stepped-list__content { + margin-left: 3.5rem; } } -@media (min-width: 772px) { - h2.p-stepped-list__title + .p-stepped-list__content { - margin-left: 4rem; } } - -h1.p-stepped-list__title::before { - flex-shrink: 0; - margin-right: 1rem; } - @media (max-width: 772px) { - h1.p-stepped-list__title::before { - width: 3rem; } } +h2.p-stepped-list__title { + padding-left: 3.5rem; } @media (min-width: 772px) { - h1.p-stepped-list__title::before { - width: 3.5rem; } } + h2.p-stepped-list__title { + padding-left: 4rem; } } + h2.p-stepped-list__title::before { + margin-right: 1rem; + width: 2.5rem; } + @media (min-width: 772px) { + h2.p-stepped-list__title::before { + width: 3rem; } } -@media (max-width: 772px) { - h1.p-stepped-list__title + .p-stepped-list__content { - margin-left: 4rem; } } +h2.p-stepped-list__title + .p-stepped-list__content { + margin-left: 3.5rem; } + @media (min-width: 772px) { + h2.p-stepped-list__title + .p-stepped-list__content { + margin-left: 4rem; } } -@media (min-width: 772px) { - h1.p-stepped-list__title + .p-stepped-list__content { - margin-left: 4.5rem; } } +h1.p-stepped-list__title { + padding-left: 4rem; } + @media (min-width: 772px) { + h1.p-stepped-list__title { + padding-left: 4.5rem; } } + h1.p-stepped-list__title::before { + margin-right: 1rem; + width: 3rem; } + @media (min-width: 772px) { + h1.p-stepped-list__title::before { + width: 3.5rem; } } -@media (min-width: 772px) { - .p-stepped-list--detailed .p-stepped-list__title + .p-stepped-list__content { - margin-left: 0; } } +h1.p-stepped-list__title + .p-stepped-list__content { + margin-left: 4rem; } + @media (min-width: 772px) { + h1.p-stepped-list__title + .p-stepped-list__content { + margin-left: 4.5rem; } } .p-stepped-list--detailed { margin-left: auto; } @@ -3954,6 +4241,89 @@ h1.p-stepped-list__title::before { [class*='p-list'].is-split:nth-child(2n-1) { margin-right: 1rem; } } +.p-logo-section__title { + font-weight: 400; + text-transform: uppercase; } + +.p-logo-section__items { + display: flex; + flex-wrap: wrap; + justify-content: center; + margin-bottom: 1.5rem; + margin-left: -1.5rem; + width: calc(100% + 1.5rem); } + @media (min-width: 620px) { + .p-logo-section__items { + margin-left: -2rem; + width: calc(100% + 2rem); } } + @media (min-width: 772px) { + .p-logo-section__items { + margin-left: -2rem; + width: calc(100% + 2rem); } } + +.p-logo-section__item { + align-items: center; + display: flex; + flex: 0 1 auto; + margin-left: 1.5rem; } + @media (min-width: 620px) { + .p-logo-section__item { + margin-left: 2rem; } } + @media (min-width: 772px) { + .p-logo-section__item { + margin-left: 2rem; } } + @media (max-width: 620px) { + .p-logo-section__item { + width: calc(25% - 1.5rem); } + .col-small-3 .p-logo-section__item { + width: calc(33.33333% - 1.5rem); } + .col-small-2 .p-logo-section__item { + width: calc(50% - 1.5rem); } + .col-small-1 .p-logo-section__item { + width: calc(100% - 1.5rem); } } + @media (min-width: 620px) { + .p-logo-section__item { + width: calc(16.66667% - 2rem); } + .col-medium-5 .p-logo-section__item { + width: calc(20% - 2rem); } + .col-medium-4 .p-logo-section__item { + width: calc(25% - 2rem); } + .col-medium-3 .p-logo-section__item { + width: calc(33.33333% - 2rem); } + .col-medium-2 .p-logo-section__item { + width: calc(50% - 2rem); } + .col-medium-1 .p-logo-section__item { + width: calc(100% - 2rem); } } + @media (min-width: 772px) { + .p-logo-section__item { + width: calc(16.66667% - 2rem); } + .col-11 .p-logo-section__item { + width: calc(18.18182% - 2rem); } + .col-10 .p-logo-section__item { + width: calc(20% - 2rem); } + .col-9 .p-logo-section__item { + width: calc(22.22222% - 2rem); } + .col-8 .p-logo-section__item { + width: calc(25% - 2rem); } + .col-7 .p-logo-section__item { + width: calc(28.57143% - 2rem); } + .col-6 .p-logo-section__item { + width: calc(33.33333% - 2rem); } + .col-5 .p-logo-section__item { + width: calc(40% - 2rem); } + .col-4 .p-logo-section__item { + width: calc(50% - 2rem); } + .col-3 .p-logo-section__item { + width: calc(66.66667% - 2rem); } + .col-2 .p-logo-section__item { + width: calc(100% - 2rem); } + .col-1 .p-logo-section__item { + width: calc(100% - 2rem); } } + +.p-logo-section__logo { + height: auto; + width: 100%; } + .p-matrix { display: flex; flex-wrap: wrap; @@ -3961,11 +4331,9 @@ h1.p-stepped-list__title::before { margin-bottom: 1.5rem; margin-left: 0; padding-left: 0; } - .p-matrix > p:last-child { - margin-bottom: 0.1rem; } .p-matrix__item { - border-top: 1px solid #cdcdcd; + border-top: 1px solid #d9d9d9; display: flex; flex: 1 1 auto; padding-bottom: 1rem; @@ -3977,12 +4345,15 @@ h1.p-stepped-list__title::before { display: flex; flex-wrap: wrap; width: 33.333%; } } + @media (min-width: 620px) and (max-width: 772px) { + .p-matrix__item:nth-child(2), .p-matrix__item:nth-child(3) { + border-top: none; } } @media (min-width: 620px) and (max-width: 1036px) { .p-matrix__item { flex-direction: column; } } @media (min-width: 772px) { .p-matrix__item { - border-right: 1px solid #cdcdcd; + border-right: 1px solid #d9d9d9; padding-left: 1rem; padding-right: 1rem; width: 33.333%; } @@ -3996,7 +4367,7 @@ h1.p-stepped-list__title::before { border-top: 0; } } @media (min-width: 1036px) { .p-matrix__item { - border-right: 1px solid #cdcdcd; + border-right: 1px solid #d9d9d9; width: 33.333%; } .p-matrix__item:empty { display: block; } @@ -4014,10 +4385,8 @@ h1.p-stepped-list__title::before { height: auto; margin-bottom: 0.5rem; margin-right: 1rem; + margin-top: 0; width: 2rem; } - @media (max-width: 772px) { - .p-matrix__img { - margin-top: 0; } } @media (min-width: 772px) { .p-matrix__img { margin-top: -0.05rem; } } @@ -4042,9 +4411,13 @@ h1.p-stepped-list__title::before { .p-matrix__title { margin-bottom: -0; } } -@media (max-width: 772px) { - .p-matrix__desc { - margin-top: -0.5rem; } } +.p-matrix__desc { + margin-bottom: 0.1rem; } + @media (max-width: 772px) { + .p-matrix__desc { + margin-top: -0.5rem; } } + .p-matrix__desc > :last-child { + margin: 0; } .p-media-object, .p-media-object--large { display: flex; @@ -4119,12 +4492,12 @@ h1.p-stepped-list__title::before { margin-bottom: 0; max-height: calc(100% - 2rem); max-width: 72rem; - overflow: scroll; + overflow: auto; position: absolute; right: 1.5rem; top: 1rem; width: auto; } - @media screen and (min-width: 772px) { + @media (min-width: 772px) { .p-modal__dialog { bottom: initial; left: initial; @@ -4135,7 +4508,8 @@ h1.p-stepped-list__title::before { .p-modal__header { display: flex; justify-content: space-between; - margin-bottom: 0.5rem; } + margin-bottom: 0.5rem; + padding-right: 2rem; } .p-modal__title { align-self: flex-end; } @@ -4149,7 +4523,7 @@ h1.p-stepped-list__title::before { box-sizing: content-box; height: 1rem; margin: 0; - padding: 0.5rem 0.5rem; + padding: 0.5rem; position: absolute; right: 0; text-indent: -999em; @@ -4158,6 +4532,10 @@ h1.p-stepped-list__title::before { .p-modal__close:focus { outline: 0.1875rem solid #2e96ff; } +.p-modal__footer { + padding-top: 1rem; + text-align: right; } + .p-navigation__row, .p-navigation__row--full-width, .p-navigation.row { display: flex; flex-direction: column; } @@ -4165,55 +4543,50 @@ h1.p-stepped-list__title::before { .p-navigation__row, .p-navigation__row--full-width, .p-navigation.row { flex-direction: row; } } -.p-navigation__item .p-navigation__link, .p-navigation__link > a, .p-navigation__toggle--open, .p-navigation__toggle--close { - padding-bottom: 0.75rem; - padding-top: 0.75rem; } - -@media (max-width: 620px) { - .p-navigation__item .p-navigation__link, .p-navigation__link > a, .p-navigation__toggle--open, .p-navigation__toggle--close, .p-subnav__item, .p-navigation__banner { - padding-left: 1rem; } } - -@media (min-width: 620px) and (max-width: 772px) { - .p-navigation__item .p-navigation__link, .p-navigation__link > a, .p-navigation__toggle--open, .p-navigation__toggle--close, .p-subnav__item, .p-navigation__banner { - padding-left: 1.5rem; } } - -@media (min-width: 772px) { - .p-navigation__item .p-navigation__link, .p-navigation__link > a, .p-navigation__toggle--open, .p-navigation__toggle--close, .p-subnav__item, .p-navigation__banner { - padding-left: 1rem; } } - -@media (max-width: 620px) { - .p-navigation__item .p-navigation__link, .p-navigation__link > a, .p-navigation__toggle--open, .p-navigation__toggle--close, .p-subnav__item { - padding-right: 1rem; } } +.p-navigation__item .p-navigation__link, .p-navigation__item--dropdown-toggle .p-navigation__link, .p-navigation__link > a, .p-navigation__toggle--open, .p-navigation__toggle--close { + padding-bottom: 1rem; + padding-top: 1rem; } -@media (min-width: 620px) and (max-width: 772px) { - .p-navigation__item .p-navigation__link, .p-navigation__link > a, .p-navigation__toggle--open, .p-navigation__toggle--close, .p-subnav__item { - padding-right: 1.5rem; } } +.p-navigation__item .p-navigation__link, .p-navigation__item--dropdown-toggle .p-navigation__link, .p-navigation__link > a, .p-navigation__toggle--open, .p-navigation__toggle--close, .p-navigation__dropdown-item, .p-subnav__item, .p-navigation__banner { + padding-left: 1rem; } + @media (min-width: 620px) { + .p-navigation__item .p-navigation__link, .p-navigation__item--dropdown-toggle .p-navigation__link, .p-navigation__link > a, .p-navigation__toggle--open, .p-navigation__toggle--close, .p-navigation__dropdown-item, .p-subnav__item, .p-navigation__banner { + padding-left: 1.5rem; } } + @media (min-width: 772px) { + .p-navigation__item .p-navigation__link, .p-navigation__item--dropdown-toggle .p-navigation__link, .p-navigation__link > a, .p-navigation__toggle--open, .p-navigation__toggle--close, .p-navigation__dropdown-item, .p-subnav__item, .p-navigation__banner { + padding-left: 1rem; } } -@media (min-width: 772px) { - .p-navigation__item .p-navigation__link, .p-navigation__link > a, .p-navigation__toggle--open, .p-navigation__toggle--close, .p-subnav__item { - padding-right: 1rem; } } +.p-navigation__item .p-navigation__link, .p-navigation__item--dropdown-toggle .p-navigation__link, .p-navigation__link > a, .p-navigation__toggle--open, .p-navigation__toggle--close, .p-navigation__dropdown-item, .p-subnav__item { + padding-right: 1rem; } + @media (min-width: 620px) { + .p-navigation__item .p-navigation__link, .p-navigation__item--dropdown-toggle .p-navigation__link, .p-navigation__link > a, .p-navigation__toggle--open, .p-navigation__toggle--close, .p-navigation__dropdown-item, .p-subnav__item { + padding-right: 1.5rem; } } + @media (min-width: 772px) { + .p-navigation__item .p-navigation__link, .p-navigation__item--dropdown-toggle .p-navigation__link, .p-navigation__link > a, .p-navigation__toggle--open, .p-navigation__toggle--close, .p-navigation__dropdown-item, .p-subnav__item { + padding-right: 1rem; } } -.p-navigation__item .p-navigation__link, .p-navigation__link > a { +.p-navigation__item .p-navigation__link, .p-navigation__item--dropdown-toggle .p-navigation__link, .p-navigation__link > a { transition-duration: 0.1s; transition-property: background-color, color, opacity; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); display: block; + font-weight: 400; line-height: 1.5rem; margin-bottom: 0; overflow: hidden; position: relative; text-overflow: ellipsis; white-space: nowrap; } - .p-navigation__item .p-navigation__link:focus, .p-navigation__link > a:focus { + .p-navigation__item .p-navigation__link:focus, .p-navigation__item--dropdown-toggle .p-navigation__link:focus, .p-navigation__link > a:focus { outline: 0.1875rem solid #2e96ff; outline-offset: -0.1875rem; } - .p-navigation__item .p-navigation__link:focus-visible, .p-navigation__link > a:focus-visible { + .p-navigation__item .p-navigation__link:focus-visible, .p-navigation__item--dropdown-toggle .p-navigation__link:focus-visible, .p-navigation__link > a:focus-visible { outline: 0.1875rem solid #2e96ff; outline-offset: -0.1875rem; } - .p-navigation__item .p-navigation__link:focus:not(:focus-visible), .p-navigation__link > a:focus:not(:focus-visible) { + .p-navigation__item .p-navigation__link:focus:not(:focus-visible), .p-navigation__item--dropdown-toggle .p-navigation__link:focus:not(:focus-visible), .p-navigation__link > a:focus:not(:focus-visible) { outline: 0; outline-offset: 0; } - .p-navigation__item .p-navigation__link::before, .p-navigation__link > a::before { + .p-navigation__item .p-navigation__link::before, .p-navigation__item--dropdown-toggle .p-navigation__link::before, .p-navigation__link > a::before { content: ''; height: 1px; left: 0; @@ -4221,9 +4594,9 @@ h1.p-stepped-list__title::before { right: 0; top: 0; } @media (min-width: 772px) { - .p-navigation__item .p-navigation__link::before, .p-navigation__link > a::before { + .p-navigation__item .p-navigation__link::before, .p-navigation__item--dropdown-toggle .p-navigation__link::before, .p-navigation__link > a::before { content: none; } } - .p-navigation__item .p-navigation__link, .p-navigation__link > a, .p-navigation__item .p-navigation__link:visited, .p-navigation__link > a:visited, .p-navigation__item .p-navigation__link:focus, .p-navigation__link > a:focus, .p-navigation__item .p-navigation__link:hover, .p-navigation__link > a:hover { + .p-navigation__item .p-navigation__link, .p-navigation__item--dropdown-toggle .p-navigation__link, .p-navigation__link > a, .p-navigation__item .p-navigation__link:visited, .p-navigation__item--dropdown-toggle .p-navigation__link:visited, .p-navigation__link > a:visited, .p-navigation__item .p-navigation__link:focus, .p-navigation__item--dropdown-toggle .p-navigation__link:focus, .p-navigation__link > a:focus, .p-navigation__item .p-navigation__link:hover, .p-navigation__item--dropdown-toggle .p-navigation__link:hover, .p-navigation__link > a:hover { text-decoration: none; } .p-navigation__items, .p-navigation__links { @@ -4237,7 +4610,7 @@ h1.p-stepped-list__title::before { margin-top: 0; } } @media (min-width: 772px) { - .p-navigation__item, .p-navigation__link { + .p-navigation__item, .p-navigation__item--dropdown-toggle, .p-navigation__link { max-width: 20em; } } .p-navigation__logo .p-navigation__item, .p-navigation__logo .p-navigation__link { @@ -4270,20 +4643,18 @@ h1.p-stepped-list__title::before { .p-navigation__banner { display: flex; flex: 0 0 auto; - justify-content: space-between; } - @media (max-width: 620px) { - .p-navigation__banner { - padding-right: 0; } } - @media (min-width: 620px) and (max-width: 772px) { + justify-content: space-between; + padding-right: 0; } + @media (min-width: 620px) { .p-navigation__banner { padding-right: 0; } } @media (min-width: 772px) { .p-navigation__banner { - padding-left: 1.5rem; } } + padding-left: 1rem; } } .p-navigation__logo { display: flex; flex: 0 0 auto; - height: 3rem; + height: 3.5rem; margin: 0 1rem 0 0; } .p-navigation__image { align-self: center; @@ -4301,14 +4672,12 @@ h1.p-stepped-list__title::before { width: 100%; } } .p-navigation .p-search-box { flex: 1 0 auto; + margin-left: 1rem; + margin-right: 1rem; margin-top: -1px; min-width: 10em; order: -1; } - @media (max-width: 620px) { - .p-navigation .p-search-box { - margin-left: 1rem; - margin-right: 1rem; } } - @media (min-width: 620px) and (max-width: 772px) { + @media (min-width: 620px) { .p-navigation .p-search-box { margin-left: 1.5rem; margin-right: 1.5rem; } } @@ -4316,7 +4685,7 @@ h1.p-stepped-list__title::before { .p-navigation .p-search-box { display: flex; flex: 1 1 auto; - margin: 0.35rem 0 auto auto; + margin: 0.6rem 0 auto auto; max-width: 20rem; min-width: initial; order: 1; } } @@ -4356,43 +4725,180 @@ h1.p-stepped-list__title::before { position: relative; right: initial; } +.p-navigation__item--dropdown-toggle { + position: relative; } + .p-navigation__item--dropdown-toggle::after { + background-position: center; + background-repeat: no-repeat; + background-size: contain; + content: ''; + display: block; + height: 1rem; + pointer-events: none; + position: absolute; + right: 1rem; + text-indent: calc(100% + 10rem); + top: calc(1rem + 0.25rem); + width: 1rem; } + @media (min-width: 620px) { + .p-navigation__item--dropdown-toggle::after { + right: 1.5rem; } } + @media (min-width: 772px) { + .p-navigation__item--dropdown-toggle::after { + right: calc(0.5rem + 1px); } } + .p-navigation__item--dropdown-toggle.is-active::after { + transform: rotate(180deg); } + .p-navigation__item--dropdown-toggle.is-active .p-navigation__dropdown, + .p-navigation__item--dropdown-toggle.is-active .p-navigation__dropdown--right { + display: block; } + .p-navigation__item--dropdown-toggle .p-navigation__link { + padding-right: 2rem; } + +.p-navigation__dropdown, +.p-navigation__dropdown--right { + display: none; + margin: 0; + min-width: 100%; + padding: 0; + z-index: 5; } + @media (min-width: 772px) { + .p-navigation__dropdown, + .p-navigation__dropdown--right { + position: absolute; + top: 3.5rem; } } + @media (max-width: 771px) { + .p-navigation__dropdown, + .p-navigation__dropdown--right { + box-shadow: none; } } + +.p-navigation__dropdown--right { + right: 0; } + +.p-navigation__dropdown-item { + display: block; + padding-bottom: 0.5rem; + padding-top: 0.5rem; + white-space: nowrap; } + @media (min-width: 772px) { + .p-navigation__dropdown-item { + padding-bottom: 0.75rem; + padding-top: 0.75rem; } } + .p-navigation__dropdown-item, .p-navigation__dropdown-item:active, .p-navigation__dropdown-item:focus, .p-navigation__dropdown-item:hover, .p-navigation__dropdown-item:visited { + text-decoration: none; } + .p-navigation { background-color: #fff; } - .p-navigation .p-navigation__item > .p-navigation__link, + .p-navigation [class*='p-navigation__item'] > .p-navigation__link::before, .p-navigation .p-navigation__link > a::before, .p-navigation.is-dark [class*='p-navigation__item'] > .p-navigation__link::before, .p-navigation.is-dark .p-navigation__link > a::before { + background: rgba(0, 0, 0, 0.1); } + .p-navigation [class*="p-navigation__item"] > .p-navigation__link:hover, + .p-navigation .p-navigation__toggle--close:hover, + .p-navigation .p-navigation__toggle--open:hover, .p-navigation .p-navigation__dropdown-item:hover, .p-navigation .p-navigation__link > a:hover, .p-navigation [class*='p-navigation__item'].is-selected > .p-navigation__link, .p-navigation .p-navigation__link.is-selected > a, .p-navigation.is-dark [class*='p-navigation__item'].is-selected > .p-navigation__link, .p-navigation.is-dark .p-navigation__link.is-selected > a { + background-color: #f7f7f7; } + .p-navigation [class*="p-navigation__item"] > .p-navigation__link:active, + .p-navigation .p-navigation__toggle--close:active, + .p-navigation .p-navigation__toggle--open:active, .p-navigation .p-navigation__dropdown-item:active, .p-navigation .p-navigation__link > a:active, .p-navigation .p-navigation__item--dropdown-toggle.is-active > .p-navigation__link, .p-navigation.is-dark .p-navigation__item--dropdown-toggle.is-active > .p-navigation__link { + background-color: #ebebeb; } + .p-navigation [class*="p-navigation__item"] > .p-navigation__link, .p-navigation .p-navigation__toggle--close, - .p-navigation .p-navigation__toggle--open, .p-navigation .p-navigation__link > a, .p-navigation.is-dark .p-navigation__item > .p-navigation__link, + .p-navigation .p-navigation__toggle--open, .p-navigation .p-navigation__dropdown-item, .p-navigation .p-navigation__link > a, .p-navigation.is-dark [class*="p-navigation__item"] > .p-navigation__link, .p-navigation.is-dark .p-navigation__toggle--close, - .p-navigation.is-dark .p-navigation__toggle--open, .p-navigation.is-dark .p-navigation__link > a, .p-navigation .p-navigation__item > .p-navigation__link:visited, + .p-navigation.is-dark .p-navigation__toggle--open, .p-navigation.is-dark .p-navigation__dropdown-item, .p-navigation.is-dark .p-navigation__link > a, .p-navigation [class*="p-navigation__item"] > .p-navigation__link:hover, + .p-navigation .p-navigation__toggle--close:hover, + .p-navigation .p-navigation__toggle--open:hover, .p-navigation .p-navigation__dropdown-item:hover, .p-navigation .p-navigation__link > a:hover, .p-navigation [class*="p-navigation__item"] > .p-navigation__link:visited, .p-navigation .p-navigation__toggle--close:visited, - .p-navigation .p-navigation__toggle--open:visited, .p-navigation .p-navigation__link > a:visited, .p-navigation .p-navigation__item > .p-navigation__link:focus, + .p-navigation .p-navigation__toggle--open:visited, .p-navigation .p-navigation__dropdown-item:visited, .p-navigation .p-navigation__link > a:visited, .p-navigation [class*="p-navigation__item"] > .p-navigation__link:focus, .p-navigation .p-navigation__toggle--close:focus, - .p-navigation .p-navigation__toggle--open:focus, .p-navigation .p-navigation__link > a:focus { - color: #111; } - .p-navigation .p-navigation__item > .p-navigation__link:hover, - .p-navigation .p-navigation__toggle--close:hover, - .p-navigation .p-navigation__toggle--open:hover, .p-navigation .p-navigation__link > a:hover, .p-navigation .p-navigation__item.is-selected > .p-navigation__link, .p-navigation .p-navigation__link.is-selected > a, .p-navigation.is-dark .p-navigation__item.is-selected > .p-navigation__link, .p-navigation.is-dark .p-navigation__link.is-selected > a { - background-color: #f7f7f7; + .p-navigation .p-navigation__toggle--open:focus, .p-navigation .p-navigation__dropdown-item:focus, .p-navigation .p-navigation__link > a:focus { color: #111; } - .p-navigation .p-navigation__item > .p-navigation__link::before, .p-navigation .p-navigation__link > a::before, .p-navigation.is-dark .p-navigation__item > .p-navigation__link::before, .p-navigation.is-dark .p-navigation__link > a::before { - background: rgba(0, 0, 0, 0.2); } + .p-navigation [class*='p-navigation__item'].is-selected > .p-navigation__link, .p-navigation .p-navigation__link.is-selected > a, .p-navigation.is-dark [class*='p-navigation__item'].is-selected > .p-navigation__link, .p-navigation.is-dark .p-navigation__link.is-selected > a { + position: relative; } + .p-navigation [class*='p-navigation__item'].is-selected > .p-navigation__link::before, .p-navigation .p-navigation__link.is-selected > a::before, .p-navigation.is-dark [class*='p-navigation__item'].is-selected > .p-navigation__link::before, .p-navigation.is-dark .p-navigation__link.is-selected > a::before { + left: 0; + background-color: #EF7E45; + content: ''; + position: absolute; } + .p-navigation [class*='p-navigation__item'].is-selected > .p-navigation__link::before, .p-navigation .p-navigation__link.is-selected > a::before, .p-navigation.is-dark [class*='p-navigation__item'].is-selected > .p-navigation__link::before, .p-navigation.is-dark .p-navigation__link.is-selected > a::before { + height: auto; + width: 0.1875rem; + bottom: -1px; + top: -1px; + z-index: 1; } + @media (min-width: 772px) { + .p-navigation [class*='p-navigation__item'].is-selected > .p-navigation__link, .p-navigation .p-navigation__link.is-selected > a, .p-navigation.is-dark [class*='p-navigation__item'].is-selected > .p-navigation__link, .p-navigation.is-dark .p-navigation__link.is-selected > a { + position: relative; } + .p-navigation [class*='p-navigation__item'].is-selected > .p-navigation__link::before, .p-navigation .p-navigation__link.is-selected > a::before, .p-navigation.is-dark [class*='p-navigation__item'].is-selected > .p-navigation__link::before, .p-navigation.is-dark .p-navigation__link.is-selected > a::before { + bottom: 0; + background-color: #EF7E45; + content: ''; + position: absolute; } + .p-navigation [class*='p-navigation__item'].is-selected > .p-navigation__link::before, .p-navigation .p-navigation__link.is-selected > a::before, .p-navigation.is-dark [class*='p-navigation__item'].is-selected > .p-navigation__link::before, .p-navigation.is-dark .p-navigation__link.is-selected > a::before { + height: 0.1875rem; + width: auto; + left: 0; + right: 0; + bottom: 0; + top: auto; } } + .p-navigation .p-navigation__item--dropdown-toggle::after { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='rgba(0%2C0%2C0%2C0.6)' d='M8.187 11.748l6.187-6.187-1.06-1.061-5.127 5.127L3.061 4.5 2 5.561z'/%3E%3C/svg%3E"); } + .p-navigation .p-navigation__dropdown, + .p-navigation .p-navigation__dropdown--right { + background-color: #fff; } .p-navigation.is-dark { - background-color: #333333; } - .p-navigation.is-dark .p-navigation__item > .p-navigation__link, + background-color: #262626; } + .p-navigation.is-dark [class*='p-navigation__item'] > .p-navigation__link::before, .p-navigation.is-dark .p-navigation__link > a::before { + background: rgba(255, 255, 255, 0.1); } + .p-navigation.is-dark [class*='p-navigation__item'].is-selected > .p-navigation__link, .p-navigation.is-dark .p-navigation__link.is-selected > a, .p-navigation.is-dark [class*="p-navigation__item"] > .p-navigation__link:hover, + .p-navigation.is-dark .p-navigation__toggle--close:hover, + .p-navigation.is-dark .p-navigation__toggle--open:hover, .p-navigation.is-dark .p-navigation__dropdown-item:hover, .p-navigation.is-dark .p-navigation__link > a:hover { + background-color: rgba(255, 255, 255, 0.05); } + .p-navigation.is-dark [class*="p-navigation__item"] > .p-navigation__link:active, + .p-navigation.is-dark .p-navigation__toggle--close:active, + .p-navigation.is-dark .p-navigation__toggle--open:active, .p-navigation.is-dark .p-navigation__dropdown-item:active, .p-navigation.is-dark .p-navigation__link > a:active, .p-navigation.is-dark .p-navigation__item--dropdown-toggle.is-active > .p-navigation__link { + background-color: rgba(255, 255, 255, 0.08); } + .p-navigation.is-dark [class*="p-navigation__item"] > .p-navigation__link, .p-navigation.is-dark .p-navigation__toggle--close, - .p-navigation.is-dark .p-navigation__toggle--open, .p-navigation.is-dark .p-navigation__link > a, .p-navigation.is-dark .p-navigation__item > .p-navigation__link:visited, + .p-navigation.is-dark .p-navigation__toggle--open, .p-navigation.is-dark .p-navigation__dropdown-item, .p-navigation.is-dark .p-navigation__link > a, .p-navigation.is-dark [class*="p-navigation__item"] > .p-navigation__link:hover, + .p-navigation.is-dark .p-navigation__toggle--close:hover, + .p-navigation.is-dark .p-navigation__toggle--open:hover, .p-navigation.is-dark .p-navigation__dropdown-item:hover, .p-navigation.is-dark .p-navigation__link > a:hover, .p-navigation.is-dark [class*="p-navigation__item"] > .p-navigation__link:visited, .p-navigation.is-dark .p-navigation__toggle--close:visited, - .p-navigation.is-dark .p-navigation__toggle--open:visited, .p-navigation.is-dark .p-navigation__link > a:visited, .p-navigation.is-dark .p-navigation__item > .p-navigation__link:focus, + .p-navigation.is-dark .p-navigation__toggle--open:visited, .p-navigation.is-dark .p-navigation__dropdown-item:visited, .p-navigation.is-dark .p-navigation__link > a:visited, .p-navigation.is-dark [class*="p-navigation__item"] > .p-navigation__link:focus, .p-navigation.is-dark .p-navigation__toggle--close:focus, - .p-navigation.is-dark .p-navigation__toggle--open:focus, .p-navigation.is-dark .p-navigation__link > a:focus { + .p-navigation.is-dark .p-navigation__toggle--open:focus, .p-navigation.is-dark .p-navigation__dropdown-item:focus, .p-navigation.is-dark .p-navigation__link > a:focus { color: white; } - .p-navigation.is-dark .p-navigation__item > .p-navigation__link:hover, - .p-navigation.is-dark .p-navigation__toggle--close:hover, - .p-navigation.is-dark .p-navigation__toggle--open:hover, .p-navigation.is-dark .p-navigation__link > a:hover, .p-navigation.is-dark .p-navigation__item.is-selected > .p-navigation__link, .p-navigation.is-dark .p-navigation__link.is-selected > a { - background-color: white; - color: #262626; } - .p-navigation.is-dark .p-navigation__item > .p-navigation__link::before, .p-navigation.is-dark .p-navigation__link > a::before { - background: rgba(255, 255, 255, 0.2); } + .p-navigation.is-dark [class*='p-navigation__item'].is-selected > .p-navigation__link, .p-navigation.is-dark .p-navigation__link.is-selected > a { + position: relative; } + .p-navigation.is-dark [class*='p-navigation__item'].is-selected > .p-navigation__link::before, .p-navigation.is-dark .p-navigation__link.is-selected > a::before { + left: 0; + background-color: #EF7E45; + content: ''; + position: absolute; } + .p-navigation.is-dark [class*='p-navigation__item'].is-selected > .p-navigation__link::before, .p-navigation.is-dark .p-navigation__link.is-selected > a::before { + height: auto; + width: 0.1875rem; + bottom: -1px; + top: -1px; + z-index: 1; } + @media (min-width: 772px) { + .p-navigation.is-dark [class*='p-navigation__item'].is-selected > .p-navigation__link, .p-navigation.is-dark .p-navigation__link.is-selected > a { + position: relative; } + .p-navigation.is-dark [class*='p-navigation__item'].is-selected > .p-navigation__link::before, .p-navigation.is-dark .p-navigation__link.is-selected > a::before { + bottom: 0; + background-color: #EF7E45; + content: ''; + position: absolute; } + .p-navigation.is-dark [class*='p-navigation__item'].is-selected > .p-navigation__link::before, .p-navigation.is-dark .p-navigation__link.is-selected > a::before { + height: 0.1875rem; + width: auto; + left: 0; + right: 0; + bottom: 0; + top: auto; } } + .p-navigation.is-dark .p-navigation__item--dropdown-toggle::after { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='rgba(255%2C255%2C255%2C0.6)' d='M8.187 11.748l6.187-6.187-1.06-1.061-5.127 5.127L3.061 4.5 2 5.561z'/%3E%3C/svg%3E"); } + .p-navigation.is-dark .p-navigation__dropdown, + .p-navigation.is-dark .p-navigation__dropdown--right { + background-color: #262626; } .p-subnav { position: relative; } @@ -4406,16 +4912,14 @@ h1.p-stepped-list__title::before { height: 1rem; pointer-events: none; position: absolute; + right: 1rem; text-indent: calc(100% + 10rem); - top: 1rem; + top: calc(1rem + 0.25rem); width: 1rem; } - @media (max-width: 620px) { - .p-subnav::after { - right: 1rem; } } - @media (min-width: 620px) and (max-width: 772px) { + @media (min-width: 620px) { .p-subnav::after { right: 1.5rem; } } - @media (min-width: 773px) { + @media (min-width: 772px) { .p-subnav::after { right: calc(0.5rem + 1px); } } @@ -4426,12 +4930,12 @@ h1.p-stepped-list__title::before { min-width: 100%; padding: 0; z-index: 5; } - @media (min-width: 773px) { + @media (min-width: 772px) { .p-subnav__items, .p-subnav__items--right { position: absolute; - top: 3rem; } } - @media (max-width: 772px) { + top: 3.5rem; } } + @media (max-width: 771px) { .p-subnav__items, .p-subnav__items--right { box-shadow: none; } } @@ -4451,11 +4955,9 @@ h1.p-stepped-list__title::before { .p-subnav__item { display: block; + padding-bottom: 0.5rem; + padding-top: 0.5rem; white-space: nowrap; } - @media (max-width: 772px) { - .p-subnav__item { - padding-bottom: 0.5rem; - padding-top: 0.5rem; } } @media (min-width: 772px) { .p-subnav__item { padding-bottom: 0.75rem; @@ -4466,6 +4968,9 @@ h1.p-stepped-list__title::before { .p-subnav::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='%23666' d='M8.187 11.748l6.187-6.187-1.06-1.061-5.127 5.127L3.061 4.5 2 5.561z'/%3E%3C/svg%3E"); } +.p-subnav .p-subnav__items { + background-color: #fff; } + .p-subnav .p-subnav__item { background-color: #fff; } .p-subnav .p-subnav__item, .p-subnav .p-subnav__item:active, .p-subnav .p-subnav__item:focus, .p-subnav .p-subnav__item:visited { @@ -4473,10 +4978,21 @@ h1.p-stepped-list__title::before { .p-subnav .p-subnav__item:hover { background-color: #f7f7f7; color: #111; } + .p-subnav .p-subnav__item:active { + background: #ebebeb; + color: #111; } + +.p-subnav.is-active > .p-navigation__link { + background: #ebebeb; + color: #111; } .p-subnav.is-dark::after, .p-navigation.is-dark .p-subnav::after { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='%23999' d='M8.187 11.748l6.187-6.187-1.06-1.061-5.127 5.127L3.061 4.5 2 5.561z'/%3E%3C/svg%3E"); } + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='%23e5e5e5' d='M8.187 11.748l6.187-6.187-1.06-1.061-5.127 5.127L3.061 4.5 2 5.561z'/%3E%3C/svg%3E"); } + +.p-subnav.is-dark .p-subnav__items, +.p-navigation.is-dark .p-subnav .p-subnav__items { + background-color: #333333; } .p-subnav.is-dark .p-subnav__item, .p-navigation.is-dark .p-subnav .p-subnav__item { @@ -4489,109 +5005,193 @@ h1.p-stepped-list__title::before { color: white; } .p-subnav.is-dark .p-subnav__item:hover, .p-navigation.is-dark .p-subnav .p-subnav__item:hover { - background-color: white; - color: #262626; } + background-color: rgba(255, 255, 255, 0.05); + color: white; } + .p-subnav.is-dark .p-subnav__item:active, + .p-navigation.is-dark .p-subnav .p-subnav__item:active { + background: rgba(255, 255, 255, 0.08); + color: white; } + +.p-subnav.is-dark.is-active > .p-navigation__link, +.p-navigation.is-dark .p-subnav.is-active > .p-navigation__link { + background: rgba(255, 255, 255, 0.08); + color: white; } .p-notification, .p-notification--positive, .p-notification--caution, .p-notification--negative, .p-notification--information { - display: flex; - overflow: hidden; - padding: 0; } - .p-notification .p-icon--close, .p-notification--positive .p-icon--close, .p-notification--caution .p-icon--close, .p-notification--negative .p-icon--close, .p-notification--information .p-icon--close { + background-position: 1rem 1.15rem; + background-repeat: no-repeat; + background-size: 1rem; + border-radius: 0 0.125rem 0.125rem 0; + margin-bottom: 1.5rem; + padding-bottom: calc(0.5rem - 1px); + padding-left: 3rem; + padding-top: calc(0.5rem - 1px); + position: relative; } + .p-notification::before, .p-notification--positive::before, .p-notification--caution::before, .p-notification--negative::before, .p-notification--information::before { + left: -1px !important; } + .is-borderless.p-notification, .is-borderless.p-notification--positive, .is-borderless.p-notification--caution, .is-borderless.p-notification--negative, .is-borderless.p-notification--information { background-color: transparent; - background-size: 1rem; + background-position: 0 0.65rem; + border: none; + margin-top: 0; + padding: 0 0 0 2rem; } + .is-borderless.p-notification::before, .is-borderless.p-notification--positive::before, .is-borderless.p-notification--caution::before, .is-borderless.p-notification--negative::before, .is-borderless.p-notification--information::before { + display: none; } + .is-inline.p-notification .p-notification__content, .is-inline.p-notification--positive .p-notification__content, .is-inline.p-notification--caution .p-notification__content, .is-inline.p-notification--negative .p-notification__content, .is-inline.p-notification--information .p-notification__content { + margin-bottom: 0.6rem; } + .is-inline.p-notification .p-notification__meta, .is-inline.p-notification--positive .p-notification__meta, .is-inline.p-notification--caution .p-notification__meta, .is-inline.p-notification--negative .p-notification__meta, .is-inline.p-notification--information .p-notification__meta { + padding-top: 0; } + .is-inline.p-notification .p-notification__meta::after, .is-inline.p-notification--positive .p-notification__meta::after, .is-inline.p-notification--caution .p-notification__meta::after, .is-inline.p-notification--negative .p-notification__meta::after, .is-inline.p-notification--information .p-notification__meta::after { + content: none; } + .is-inline.p-notification .p-notification__title, .is-inline.p-notification--positive .p-notification__title, .is-inline.p-notification--caution .p-notification__title, .is-inline.p-notification--negative .p-notification__title, .is-inline.p-notification--information .p-notification__title, + .is-inline.p-notification .p-notification__message, + .is-inline.p-notification--positive .p-notification__message, + .is-inline.p-notification--caution .p-notification__message, + .is-inline.p-notification--negative .p-notification__message, + .is-inline.p-notification--information .p-notification__message { + display: inline; } + .p-notification .p-notification__content, .p-notification--positive .p-notification__content, .p-notification--caution .p-notification__content, .p-notification--negative .p-notification__content, .p-notification--information .p-notification__content { + margin-bottom: 0.6rem; + padding-right: 2rem; } + .p-notification .p-notification__title, .p-notification--positive .p-notification__title, .p-notification--caution .p-notification__title, .p-notification--negative .p-notification__title, .p-notification--information .p-notification__title { + font-size: 1rem; + font-weight: 400; + line-height: 1.5rem; + margin: 0; + padding: 0; } + .p-notification .p-notification__message, .p-notification--positive .p-notification__message, .p-notification--caution .p-notification__message, .p-notification--negative .p-notification__message, .p-notification--information .p-notification__message { + margin: 0; + padding: 0; } + .p-notification .p-notification__close, .p-notification--positive .p-notification__close, .p-notification--caution .p-notification__close, .p-notification--negative .p-notification__close, .p-notification--information .p-notification__close { + background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23666' fill-rule='nonzero' d='M13.041 1.898l1.06 1.06L9.062 8l5.04 5.042-1.06 1.06L8 9.062 2.96 14.1l-1.06-1.06L6.938 8 1.9 2.96l1.06-1.06 5.04 5.04z'/%3E%3C/svg%3E"); + background-color: transparent; + background-position: center; + background-repeat: no-repeat; + background-size: unset; border: 0; - margin: 0.9375rem 1rem auto auto; - padding: 0.5rem; } + position: absolute; + right: 0.5rem; + top: 0.5rem; + width: 1rem; } + .p-notification .p-notification__meta, .p-notification--positive .p-notification__meta, .p-notification--caution .p-notification__meta, .p-notification--negative .p-notification__meta, .p-notification--information .p-notification__meta { + align-items: flex-start; + display: flex; + justify-content: space-between; + margin-bottom: 0.5rem; + padding-right: 1rem; + padding-top: 0.5rem; } + .p-notification .p-notification__actions, .p-notification--positive .p-notification__actions, .p-notification--caution .p-notification__actions, .p-notification--negative .p-notification__actions, .p-notification--information .p-notification__actions { + align-items: flex-start; + display: flex; } + .p-notification .p-notification__actions:only-child, .p-notification--positive .p-notification__actions:only-child, .p-notification--caution .p-notification__actions:only-child, .p-notification--negative .p-notification__actions:only-child, .p-notification--information .p-notification__actions:only-child { + margin-left: auto; } + .p-notification .p-notification__action + .p-notification__action, .p-notification--positive .p-notification__action + .p-notification__action, .p-notification--caution .p-notification__action + .p-notification__action, .p-notification--negative .p-notification__action + .p-notification__action, .p-notification--information .p-notification__action + .p-notification__action { + margin-left: 1rem; } .p-notification { - position: relative; } + position: relative; + background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 1a7 7 0 110 14A7 7 0 018 1zm0 1.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM8.75 7v5.02h-1.5V7h1.5zM8.5 3.944a.5.5 0 01.5.5v1a.5.5 0 01-.5.5h-1a.5.5 0 01-.5-.5v-1a.5.5 0 01.5-.5h1z' fill='%23666' fill-rule='nonzero'/%3E%3C/svg%3E"); } .p-notification::before { - top: 0; - background-color: #666; + left: 0; + background-color: #24598f; content: ''; position: absolute; } .p-notification::before { - height: 0.1875rem; - width: auto; - left: 0; - right: 0; } - .p-notification + .p-notification { - margin-top: 1.5rem; } - -.p-notification__response { - background-position: 1rem 0.9375rem; - background-repeat: no-repeat; - background-size: 1rem; - padding: 0.6875rem 1rem 0.5rem; } - -.p-notification__status::after, -.p-notification__action::before { - content: ' '; } - -.p-notification__response, -.p-notification--floating { - max-width: unset; } + height: auto; + width: 0.1875rem; + bottom: -1px; + top: -1px; + z-index: 1; } .p-notification--positive { - position: relative; } + position: relative; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cg fill='none' fill-rule='nonzero'%3E%3Cpath fill='%230e8420' d='M8 1a7 7 0 110 14A7 7 0 018 1zm2.83 3.502L6.863 9.884 5.174 8.096l-1.09 1.03 2.92 3.096 5.034-6.83-1.208-.89z'/%3E%3Cpath fill='%23fff' d='M10.83 4.502l1.208.89-5.033 6.83-2.922-3.096 1.091-1.03 1.689 1.789z'/%3E%3C/g%3E%3C/svg%3E"); } .p-notification--positive::before { - top: 0; - background-color: #0e8620; + left: 0; + background-color: #0e8420; content: ''; position: absolute; } .p-notification--positive::before { - height: 0.1875rem; - width: auto; - left: 0; - right: 0; } - .p-notification--positive .p-notification__response { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cg fill='none' fill-rule='nonzero'%3E%3Cpath fill='%230e8620' d='M8 1a7 7 0 110 14A7 7 0 018 1zm2.83 3.502L6.863 9.884 5.174 8.096l-1.09 1.03 2.92 3.096 5.034-6.83-1.208-.89z'/%3E%3Cpath fill='%23fff' d='M10.83 4.502l1.208.89-5.033 6.83-2.922-3.096 1.091-1.03 1.689 1.789z'/%3E%3C/g%3E%3C/svg%3E"); - padding-left: 3rem; } + height: auto; + width: 0.1875rem; + bottom: -1px; + top: -1px; + z-index: 1; } .p-notification--caution { - position: relative; } + position: relative; + background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M9.34 1.2l5.842 11.627A1.5 1.5 0 0113.842 15H2.158a1.5 1.5 0 01-1.34-2.173L6.66 1.2a1.5 1.5 0 012.68 0z' fill='%23f99b11'/%3E%3Cpath d='M8.5 11a.5.5 0 01.492.41L9 11.5v1a.5.5 0 01-.41.492L8.5 13h-1a.5.5 0 01-.492-.41L7 12.5v-1a.5.5 0 01.41-.492L7.5 11h1zM9 5v4.5H7V5h2z' fill='%23FFF'/%3E%3C/g%3E%3C/svg%3E"); } .p-notification--caution::before { - top: 0; + left: 0; background-color: #f99b11; content: ''; position: absolute; } .p-notification--caution::before { - height: 0.1875rem; - width: auto; - left: 0; - right: 0; } - .p-notification--caution .p-notification__response { - background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M9.34 1.2l5.842 11.627A1.5 1.5 0 0113.842 15H2.158a1.5 1.5 0 01-1.34-2.173L6.66 1.2a1.5 1.5 0 012.68 0z' fill='%23f99b11'/%3E%3Cpath d='M8.5 11a.5.5 0 01.492.41L9 11.5v1a.5.5 0 01-.41.492L8.5 13h-1a.5.5 0 01-.492-.41L7 12.5v-1a.5.5 0 01.41-.492L7.5 11h1zM9 5v4.5H7V5h2z' fill='%23FFF'/%3E%3C/g%3E%3C/svg%3E"); - padding-left: 3rem; } + height: auto; + width: 0.1875rem; + bottom: -1px; + top: -1px; + z-index: 1; } .p-notification--negative { - position: relative; } + position: relative; + background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle stroke='%23c7162b' stroke-width='1.5' fill='%23c7162b' cx='8' cy='8' r='6.25'/%3E%3Cpath fill='%23FFF' fill-rule='nonzero' d='M10.282 4.638l1.06 1.06L9.05 7.99l2.293 2.292-1.06 1.06L7.99 9.05 5.7 11.343l-1.06-1.06 2.29-2.293L4.64 5.7l1.06-1.06 2.291 2.29z'/%3E%3C/g%3E%3C/svg%3E"); } .p-notification--negative::before { - top: 0; + left: 0; background-color: #c7162b; content: ''; position: absolute; } .p-notification--negative::before { - height: 0.1875rem; - width: auto; - left: 0; - right: 0; } - .p-notification--negative .p-notification__response { - background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle stroke='%23C7162B' stroke-width='1.5' fill='%23c7162b' cx='8' cy='8' r='6.25'/%3E%3Cpath fill='%23FFF' fill-rule='nonzero' d='M10.282 4.638l1.06 1.06L9.05 7.99l2.293 2.292-1.06 1.06L7.99 9.05 5.7 11.343l-1.06-1.06 2.29-2.293L4.64 5.7l1.06-1.06 2.291 2.29z'/%3E%3C/g%3E%3C/svg%3E"); - padding-left: 3rem; } + height: auto; + width: 0.1875rem; + bottom: -1px; + top: -1px; + z-index: 1; } .p-notification--information { - position: relative; } + position: relative; + background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 1a7 7 0 110 14A7 7 0 018 1zm0 1.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM8.75 7v5.02h-1.5V7h1.5zM8.5 3.944a.5.5 0 01.5.5v1a.5.5 0 01-.5.5h-1a.5.5 0 01-.5-.5v-1a.5.5 0 01.5-.5h1z' fill='%23666' fill-rule='nonzero'/%3E%3C/svg%3E"); } .p-notification--information::before { - top: 0; + left: 0; background-color: #24598f; content: ''; position: absolute; } .p-notification--information::before { - height: 0.1875rem; - width: auto; - left: 0; - right: 0; } + height: auto; + width: 0.1875rem; + bottom: -1px; + top: -1px; + z-index: 1; } + +[class='p-notification'], +[class^='p-notification--'] { + position: relative; } + [class='p-notification'] .p-notification__response, + [class^='p-notification--'] .p-notification__response { + margin-bottom: 0.6rem; + padding-top: 0.4005rem; } + [class='p-notification'] .p-notification__status, + [class^='p-notification--'] .p-notification__status { + display: block; } + [class='p-notification'] .p-notification__status::after, + [class='p-notification'] .p-notification__action::before, + [class^='p-notification--'] .p-notification__status::after, + [class^='p-notification--'] .p-notification__action::before { + content: ' '; } + [class='p-notification'] .p-notification__response, + [class='p-notification'] .p-notification--floating, + [class^='p-notification--'] .p-notification__response, + [class^='p-notification--'] .p-notification--floating { + max-width: unset; } + [class='p-notification'] .p-icon--close, + [class^='p-notification--'] .p-icon--close { + background-color: transparent; + background-size: 1rem; + border: 0; + padding: 0.5rem; + position: absolute; + right: 1rem; + top: 1.15rem; } .p-pagination__link, .p-pagination__link--previous, .p-pagination__link--next { @@ -4606,14 +5206,20 @@ h1.p-stepped-list__title::before { background-color: #f2f2f2; border-color: rgba(0, 0, 0, 0.56); } .p-pagination__link:active, .p-pagination__link--previous:active, - .p-pagination__link--next:active { - background-color: #d9d9d9; + .p-pagination__link--next:active, .p-pagination__link[aria-pressed='true'], .p-pagination__link--previous[aria-pressed='true'], + .p-pagination__link--next[aria-pressed='true'], .p-pagination__link[aria-expanded='true'], .p-pagination__link--previous[aria-expanded='true'], + .p-pagination__link--next[aria-expanded='true'] { + background-color: #ebebeb; border-color: rgba(0, 0, 0, 0.56); transition-duration: 0s; } .p-pagination__link:disabled:active, .p-pagination__link--previous:disabled:active, - .p-pagination__link--next:disabled:active, .p-pagination__link:disabled:hover, .p-pagination__link--previous:disabled:hover, + .p-pagination__link--next:disabled:active, .p-pagination__link:disabled[aria-pressed='true'], .p-pagination__link--previous:disabled[aria-pressed='true'], + .p-pagination__link--next:disabled[aria-pressed='true'], .p-pagination__link:disabled[aria-expanded='true'], .p-pagination__link--previous:disabled[aria-expanded='true'], + .p-pagination__link--next:disabled[aria-expanded='true'], .p-pagination__link:disabled:hover, .p-pagination__link--previous:disabled:hover, .p-pagination__link--next:disabled:hover, .is-disabled.p-pagination__link:active, .is-disabled.p-pagination__link--previous:active, - .is-disabled.p-pagination__link--next:active, .is-disabled.p-pagination__link:hover, .is-disabled.p-pagination__link--previous:hover, + .is-disabled.p-pagination__link--next:active, .is-disabled.p-pagination__link[aria-pressed='true'], .is-disabled.p-pagination__link--previous[aria-pressed='true'], + .is-disabled.p-pagination__link--next[aria-pressed='true'], .is-disabled.p-pagination__link[aria-expanded='true'], .is-disabled.p-pagination__link--previous[aria-expanded='true'], + .is-disabled.p-pagination__link--next[aria-expanded='true'], .is-disabled.p-pagination__link:hover, .is-disabled.p-pagination__link--previous:hover, .is-disabled.p-pagination__link--next:hover { background-color: transparent; border-color: rgba(0, 0, 0, 0.56); } @@ -4621,7 +5227,7 @@ h1.p-stepped-list__title::before { color: currentColor; } .is-active.p-pagination__link, .is-active.p-pagination__link--previous, .is-active.p-pagination__link--next { - background-color: #d9d9d9; + background-color: #ebebeb; color: #111; text-decoration: none; } @@ -4663,13 +5269,13 @@ h1.p-stepped-list__title::before { .p-pull-quote--small, .p-pull-quote--large { border: 0; - margin: 1.5rem 0 2rem; + margin: 1.5rem 0 1.5rem; overflow: visible; position: relative; } .p-pull-quote.has-image, .p-pull-quote--small.has-image, .p-pull-quote--large.has-image { - margin-top: calc(2.75rem + 1.5rem); } + margin-top: 0; } .p-pull-quote .p-pull-quote__citation, .p-pull-quote--small .p-pull-quote__citation, .p-pull-quote--large .p-pull-quote__citation { @@ -4677,8 +5283,7 @@ h1.p-stepped-list__title::before { .p-pull-quote__image { height: 2rem; - position: absolute; - top: -2.75rem; } + margin: 1rem 0 0.5rem; } .p-pull-quote__quote { position: relative; } @@ -4695,47 +5300,165 @@ h1.p-stepped-list__title::before { margin-bottom: 0; } .p-pull-quote__quote:last-of-type::after { color: #666; - display: inline-block; + display: inline-block; + position: absolute; + width: 0.5em; + bottom: 0.55em; + content: '\201E'; + margin-left: 0.25em; } + +.p-pull-quote { + padding: 0 2rem; } + .p-pull-quote .p-pull-quote__quote::before, .p-pull-quote .p-pull-quote__quote::after { + font-size: 2em; } + +.p-pull-quote--small { + padding: 0 1.5rem; } + .p-pull-quote--small .p-pull-quote__quote::before, .p-pull-quote--small .p-pull-quote__quote::after { + font-size: 1.5em; } + +.p-pull-quote--large { + padding: 0 2.5rem; } + .p-pull-quote--large .p-pull-quote__quote::before, .p-pull-quote--large .p-pull-quote__quote::after { + font-size: 2em; + max-width: 1em; } + +@media (max-width: 772px) { + .p-pull-quote .p-pull-quote__quote:first-of-type::before, + .p-pull-quote--large .p-pull-quote__quote:first-of-type::before { + top: 0.75rem; } } + +.p-search-and-filter { + border: 1px solid rgba(0, 0, 0, 0.56); + position: relative; } + .p-search-and-filter .p-search-and-filter__search-container { + align-items: center; + background-color: #fff; + display: flex; + flex-wrap: wrap; + height: auto; + margin: 0; + overflow: hidden; + padding-left: 0.5rem; + padding-right: 2.1875rem; + position: relative; } + .p-search-and-filter .p-search-and-filter__search-container[data-active='true'] { + height: auto; } + .p-search-and-filter .p-search-and-filter__search-container[data-empty='false'], .p-search-and-filter .p-search-and-filter__search-container[aria-expanded='false'] { + height: calc(1.5rem + calc(0.4rem - 1px) + 0.4rem - 1px); } + .p-search-and-filter .p-search-and-filter__search-container .p-chip { + margin-bottom: 0.25rem; + margin-top: 0.25rem; } + .p-search-and-filter .p-search-and-filter__search-container .p-search-and-filter__selected-count { + color: #24598f; + cursor: pointer; + position: absolute; + right: 0.5rem; + top: 0.1875rem; } + .p-search-and-filter .p-search-and-filter__search-container[aria-expanded='true'] { + height: auto; + max-height: 100%; } + .p-search-and-filter .p-search-and-filter__search-container[aria-expanded='true'] .p-search-and-filter__selected-count { + display: none; } + .p-search-and-filter .p-search-and-filter__panel { + transition-duration: 0.165s; + transition-property: opacity; + transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + background: #fff; + border-radius: 0.125rem; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15), 0 2px 2px -1px rgba(0, 0, 0, 0.15), 0 0 3px 0 rgba(0, 0, 0, 0.2); + opacity: 1; + padding: calc(0.4rem - 1px) 1rem 0; + position: absolute; + width: 100%; + z-index: 9999; } + .p-search-and-filter .p-search-and-filter__panel[aria-hidden='true'] { + opacity: 0; + pointer-events: none; } + .p-search-and-filter .p-search-and-filter__search-prompt { + background: #f7f7f7; + cursor: pointer; + margin-left: -1rem; + margin-right: -1rem; + overflow: hidden; + padding: 1rem; + text-overflow: ellipsis; + white-space: nowrap; } + .p-search-and-filter .p-search-and-filter__clear { + border: none; + bottom: 0.1875rem; + line-height: 1.25rem; + margin: 0; + position: absolute; + right: 0.1875rem; + top: 0.1875rem; + z-index: 9999; } + .p-search-and-filter .p-search-and-filter__box { + display: inline-flex; + flex: 1; + margin: 0; + position: relative; } + .p-search-and-filter .p-search-and-filter__input { + border: 0; + box-shadow: none; + flex-grow: 1; + margin-bottom: 0; + margin-left: -0.5rem; + margin-right: -2.1875rem; + min-width: 6rem; + position: relative; } + .p-search-and-filter .p-chip + .p-search-and-filter__box { + margin-left: 0.5rem; } + +.p-filter-panel-section { + border-bottom: 1px solid #e5e5e5; + margin: 0; + padding-bottom: 1rem; } + .p-filter-panel-section:last-child { + border: 0; } + .p-filter-panel-section .p-chip { + cursor: pointer; } + .p-filter-panel-section .p-chip:focus { + outline: 0.1875rem solid #2e96ff; + outline-offset: -0.1875rem; } + .p-filter-panel-section .p-chip:focus-visible { + outline: 0.1875rem solid #2e96ff; + outline-offset: -0.1875rem; } + .p-filter-panel-section .p-chip:focus:not(:focus-visible) { + outline: 0; + outline-offset: 0; } + .p-filter-panel-section .p-chip__lead { + display: none; } + .p-filter-panel-section .p-filter-panel-section__heading { + color: #666; + font-size: 1rem; + margin-bottom: 0; } + .p-filter-panel-section .p-filter-panel-section__chips { + overflow: hidden; + padding-right: 1.25rem; + position: relative; } + .p-filter-panel-section .p-filter-panel-section__chips[aria-expanded='false'] { + max-height: 4rem; } + .p-filter-panel-section .p-filter-panel-section__counter { + bottom: 0; + color: #24598f; + cursor: pointer; position: absolute; - width: 0.5em; - bottom: 0.55em; - content: '\201E'; - margin-left: 0.25em; } - -.p-pull-quote { - padding: 0 2rem; } - .p-pull-quote .p-pull-quote__quote::before, .p-pull-quote .p-pull-quote__quote::after { - font-size: 2em; } - -.p-pull-quote--small { - padding: 0 1.5rem; } - .p-pull-quote--small .p-pull-quote__quote::before, .p-pull-quote--small .p-pull-quote__quote::after { - font-size: 1.5em; } - -.p-pull-quote--large { - padding: 0 2.5rem; } - .p-pull-quote--large .p-pull-quote__quote::before, .p-pull-quote--large .p-pull-quote__quote::after { - font-size: 2em; - max-width: 1em; } - -@media (max-width: 772px) { - .p-pull-quote .p-pull-quote__quote:first-of-type::before, - .p-pull-quote--large .p-pull-quote__quote:first-of-type::before { - top: 0.75rem; } } + right: 0.25rem; } -.p-search-box__reset, .p-search-box__button { +.p-search-box .p-search-box__reset, .p-search-box .p-search-box__button { display: block; height: calc(2.3rem - 0.375rem); margin: 0.1875rem 0; position: relative; width: auto; } - .p-search-box__reset:hover, .p-search-box__button:hover { + .p-search-box .p-search-box__reset:hover, .p-search-box .p-search-box__button:hover { background: inherit; } - .p-search-box__reset:hover:disabled, .p-search-box__button:hover:disabled { + .p-search-box .p-search-box__reset:hover:disabled, .p-search-box .p-search-box__button:hover:disabled { cursor: not-allowed; } - .p-search-box__reset [class*='p-icon'], .p-search-box__button [class*='p-icon'] { + .p-search-box .p-search-box__reset [class*='p-icon'], .p-search-box .p-search-box__button [class*='p-icon'] { vertical-align: 0; } - .p-search-box__reset [class*='p-icon']:only-child, .p-search-box__button [class*='p-icon']:only-child { + .p-search-box .p-search-box__reset [class*='p-icon']:only-child, .p-search-box .p-search-box__button [class*='p-icon']:only-child { margin-left: -0.5rem; margin-right: -0.5rem; } @@ -4744,28 +5467,25 @@ h1.p-stepped-list__title::before { justify-content: flex-end; margin-bottom: 1.2rem; position: relative; } + .p-search-box .p-search-box__reset:not(:last-of-type):not(:only-of-type) { + margin-right: 0.1875rem; } + .p-search-box .p-search-box__input { + flex: 1 1 100%; + margin-bottom: 0; + padding-right: calc(2 * 2.3rem); + position: absolute; + right: 0; } + .p-search-box .p-search-box__input::-webkit-search-cancel-button { + -webkit-appearance: none; } + .p-search-box .p-search-box__input:not(:valid) ~ .p-search-box__reset { + display: none; } + .p-search-box .p-search-box__button { + border-left-style: solid; + border-left-width: 1px; + border-radius: 0 0.125rem 0.125rem 0; + margin-right: 0.1875rem; } -.p-search-box__reset:not(:last-of-type):not(:only-of-type) { - margin-right: 0.1875rem; } - -.p-search-box__input { - flex: 1 1 100%; - margin-bottom: 0; - padding-right: calc(2 * 2.3rem); - position: absolute; - right: 0; } - .p-search-box__input::-webkit-search-cancel-button { - -webkit-appearance: none; } - .p-search-box__input:not(:valid) ~ .p-search-box__reset { - display: none; } - -.p-search-box__button { - border-left-style: solid; - border-left-width: 1px; - border-radius: 0 0.125rem 0.125rem 0; - margin-right: 0.1875rem; } - -.p-search-box__reset, .p-search-box__button, .p-search-box__reset:active, .p-search-box__button:active, .p-search-box__reset:focus, .p-search-box__button:focus, .p-search-box__reset:hover, .p-search-box__button:hover { +.p-search-box .p-search-box__reset, .p-search-box .p-search-box__button, .p-search-box .p-search-box__reset:active, .p-search-box .p-search-box__button:active, .p-search-box .p-search-box__reset:focus, .p-search-box .p-search-box__button:focus, .p-search-box .p-search-box__reset:hover, .p-search-box .p-search-box__button:hover { background-color: transparent !important; border-width: 0; } @@ -4785,15 +5505,13 @@ h1.p-stepped-list__title::before { background-color: #262626 !important; border-color: rgba(255, 255, 255, 0.4) !important; } -@media only screen and (max-width: 1036px) { - .p-separator { - margin-bottom: 2rem; - margin-top: 2rem; } } - -@media only screen and (min-width: 1036px) { - .p-separator { - margin-bottom: 4rem; - margin-top: 4rem; } } +.p-separator { + margin-bottom: 2rem; + margin-top: 2rem; } + @media (min-width: 1036px) { + .p-separator { + margin-bottom: 4rem; + margin-top: 4rem; } } @keyframes vf-p-side-navigation-expand { 0% { @@ -4851,8 +5569,9 @@ h1.p-stepped-list__title::before { .p-side-navigation__drawer-header { border-bottom-style: solid; border-bottom-width: 1px; - padding-bottom: 0.5rem; - padding-left: 0.5rem; + margin-bottom: 0.5rem; + padding-bottom: calc(0.5rem - 1px); + padding-left: 0.25rem; padding-top: 0.5rem; position: sticky; top: 0; @@ -4871,7 +5590,7 @@ h1.p-stepped-list__title::before { transform: rotate(-90deg); } .p-side-navigation__toggle--in-drawer { - margin-bottom: 0; } + margin-bottom: 0.2rem; } .p-side-navigation__toggle--in-drawer::before { transform: rotate(90deg); } @@ -4901,36 +5620,27 @@ h1.p-stepped-list__title::before { display: none; } } .p-side-navigation__list::after, .p-side-navigation--raw-html ul::after { + left: 1rem; bottom: -0.75rem; } - @media (max-width: 620px) { - .p-side-navigation__list::after, .p-side-navigation--raw-html ul::after { - left: 1rem; } } - @media (min-width: 620px) and (max-width: 772px) { + @media (min-width: 620px) { .p-side-navigation__list::after, .p-side-navigation--raw-html ul::after { left: 1.5rem; } } @media (min-width: 772px) { .p-side-navigation__list::after, .p-side-navigation--raw-html ul::after { left: 1.5rem; } } -@media (max-width: 620px) { - .p-side-navigation--icons .p-side-navigation__list::after, .p-side-navigation--icons .p-side-navigation--raw-html ul::after, .p-side-navigation--raw-html .p-side-navigation--icons ul::after { - left: 3rem; } } - -@media (min-width: 620px) and (max-width: 772px) { - .p-side-navigation--icons .p-side-navigation__list::after, .p-side-navigation--icons .p-side-navigation--raw-html ul::after, .p-side-navigation--raw-html .p-side-navigation--icons ul::after { - left: 4rem; } } - -@media (min-width: 772px) { - .p-side-navigation--icons .p-side-navigation__list::after, .p-side-navigation--icons .p-side-navigation--raw-html ul::after, .p-side-navigation--raw-html .p-side-navigation--icons ul::after { - left: 4rem; } } +.p-side-navigation--icons .p-side-navigation__list::after, .p-side-navigation--icons .p-side-navigation--raw-html ul::after, .p-side-navigation--raw-html .p-side-navigation--icons ul::after { + left: 3rem; } + @media (min-width: 620px) { + .p-side-navigation--icons .p-side-navigation__list::after, .p-side-navigation--icons .p-side-navigation--raw-html ul::after, .p-side-navigation--raw-html .p-side-navigation--icons ul::after { + left: 4rem; } } + @media (min-width: 772px) { + .p-side-navigation--icons .p-side-navigation__list::after, .p-side-navigation--icons .p-side-navigation--raw-html ul::after, .p-side-navigation--raw-html .p-side-navigation--icons ul::after { + left: 4rem; } } .p-side-navigation__list:last-of-type::after, .p-side-navigation--raw-html ul:last-of-type::after { content: none; } -.p-side-navigation > .p-side-navigation__list:first-of-type, -.p-side-navigation__drawer > .p-side-navigation__list:first-of-type { - padding-top: 0.125rem; } - .p-side-navigation__item--title { font-weight: 400; } @@ -4942,21 +5652,12 @@ h1.p-stepped-list__title::before { .p-side-navigation--raw-html h6, .p-side-navigation--raw-html li > span, .p-side-navigation--raw-html li > strong, .p-side-navigation--raw-html li > a { + padding-left: 1rem; display: flex; padding-bottom: 0.25rem; padding-right: 1rem; padding-top: 0.25rem; } - @media (max-width: 620px) { - .p-side-navigation__text, - .p-side-navigation__link, .p-side-navigation--raw-html h2, - .p-side-navigation--raw-html h3, - .p-side-navigation--raw-html h4, - .p-side-navigation--raw-html h5, - .p-side-navigation--raw-html h6, .p-side-navigation--raw-html li > span, - .p-side-navigation--raw-html li > strong, - .p-side-navigation--raw-html li > a { - padding-left: 1rem; } } - @media (min-width: 620px) and (max-width: 772px) { + @media (min-width: 620px) { .p-side-navigation__text, .p-side-navigation__link, .p-side-navigation--raw-html h2, .p-side-navigation--raw-html h3, @@ -4992,17 +5693,17 @@ h1.p-stepped-list__title::before { .p-side-navigation__link:focus::before, .p-side-navigation--raw-html li > a:focus::before { display: none; } +.p-side-navigation__link:focus:not(:focus-visible)::before, .p-side-navigation--raw-html li > a:focus:not(:focus-visible)::before { + display: block; } + .p-side-navigation__link:hover, .p-side-navigation--raw-html li > a:hover { text-decoration: none; } .p-side-navigation--icons .p-side-navigation__text, .p-side-navigation--icons .p-side-navigation__link { + padding-left: 3rem; position: relative; } - @media (max-width: 620px) { - .p-side-navigation--icons .p-side-navigation__text, .p-side-navigation--icons - .p-side-navigation__link { - padding-left: 3rem; } } - @media (min-width: 620px) and (max-width: 772px) { + @media (min-width: 620px) { .p-side-navigation--icons .p-side-navigation__text, .p-side-navigation--icons .p-side-navigation__link { padding-left: 4rem; } } @@ -5011,73 +5712,57 @@ h1.p-stepped-list__title::before { .p-side-navigation__link { padding-left: 4rem; } } -@media (max-width: 620px) { - .p-side-navigation__item .p-side-navigation__item .p-side-navigation__text, .p-side-navigation__item .p-side-navigation__item - .p-side-navigation__link { - padding-left: 2rem; } } - -@media (min-width: 620px) and (max-width: 772px) { - .p-side-navigation__item .p-side-navigation__item .p-side-navigation__text, .p-side-navigation__item .p-side-navigation__item - .p-side-navigation__link { - padding-left: 3rem; } } - -@media (min-width: 772px) { - .p-side-navigation__item .p-side-navigation__item .p-side-navigation__text, .p-side-navigation__item .p-side-navigation__item - .p-side-navigation__link { - padding-left: 3rem; } } - -@media (max-width: 620px) { - .p-side-navigation--icons .p-side-navigation__item .p-side-navigation__item .p-side-navigation__text, .p-side-navigation--icons .p-side-navigation__item .p-side-navigation__item - .p-side-navigation__link { - padding-left: 4rem; } } - -@media (min-width: 620px) and (max-width: 772px) { - .p-side-navigation--icons .p-side-navigation__item .p-side-navigation__item .p-side-navigation__text, .p-side-navigation--icons .p-side-navigation__item .p-side-navigation__item - .p-side-navigation__link { - padding-left: 5.5rem; } } - -@media (min-width: 772px) { +.p-side-navigation__item .p-side-navigation__item .p-side-navigation__text, .p-side-navigation__item .p-side-navigation__item +.p-side-navigation__link { + padding-left: 2rem; } + @media (min-width: 620px) { + .p-side-navigation__item .p-side-navigation__item .p-side-navigation__text, .p-side-navigation__item .p-side-navigation__item + .p-side-navigation__link { + padding-left: 3rem; } } + @media (min-width: 772px) { + .p-side-navigation__item .p-side-navigation__item .p-side-navigation__text, .p-side-navigation__item .p-side-navigation__item + .p-side-navigation__link { + padding-left: 3rem; } } .p-side-navigation--icons .p-side-navigation__item .p-side-navigation__item .p-side-navigation__text, .p-side-navigation--icons .p-side-navigation__item .p-side-navigation__item .p-side-navigation__link { - padding-left: 5.5rem; } } - -@media (max-width: 620px) { - .p-side-navigation__item .p-side-navigation__item .p-side-navigation__item .p-side-navigation__text, .p-side-navigation__item .p-side-navigation__item .p-side-navigation__item - .p-side-navigation__link { - padding-left: 3rem; } } - -@media (min-width: 620px) and (max-width: 772px) { - .p-side-navigation__item .p-side-navigation__item .p-side-navigation__item .p-side-navigation__text, .p-side-navigation__item .p-side-navigation__item .p-side-navigation__item - .p-side-navigation__link { - padding-left: 4.5rem; } } - -@media (min-width: 772px) { - .p-side-navigation__item .p-side-navigation__item .p-side-navigation__item .p-side-navigation__text, .p-side-navigation__item .p-side-navigation__item .p-side-navigation__item - .p-side-navigation__link { - padding-left: 4.5rem; } } - -@media (max-width: 620px) { - .p-side-navigation--icons .p-side-navigation__item .p-side-navigation__item .p-side-navigation__item .p-side-navigation__text, .p-side-navigation--icons .p-side-navigation__item .p-side-navigation__item .p-side-navigation__item - .p-side-navigation__link { - padding-left: 5rem; } } - -@media (min-width: 620px) and (max-width: 772px) { - .p-side-navigation--icons .p-side-navigation__item .p-side-navigation__item .p-side-navigation__item .p-side-navigation__text, .p-side-navigation--icons .p-side-navigation__item .p-side-navigation__item .p-side-navigation__item - .p-side-navigation__link { - padding-left: 7rem; } } + padding-left: 4rem; } + @media (min-width: 620px) { + .p-side-navigation--icons .p-side-navigation__item .p-side-navigation__item .p-side-navigation__text, .p-side-navigation--icons .p-side-navigation__item .p-side-navigation__item + .p-side-navigation__link { + padding-left: 5.5rem; } } + @media (min-width: 772px) { + .p-side-navigation--icons .p-side-navigation__item .p-side-navigation__item .p-side-navigation__text, .p-side-navigation--icons .p-side-navigation__item .p-side-navigation__item + .p-side-navigation__link { + padding-left: 5.5rem; } } -@media (min-width: 772px) { +.p-side-navigation__item .p-side-navigation__item .p-side-navigation__item .p-side-navigation__text, .p-side-navigation__item .p-side-navigation__item .p-side-navigation__item +.p-side-navigation__link { + padding-left: 3rem; } + @media (min-width: 620px) { + .p-side-navigation__item .p-side-navigation__item .p-side-navigation__item .p-side-navigation__text, .p-side-navigation__item .p-side-navigation__item .p-side-navigation__item + .p-side-navigation__link { + padding-left: 4.5rem; } } + @media (min-width: 772px) { + .p-side-navigation__item .p-side-navigation__item .p-side-navigation__item .p-side-navigation__text, .p-side-navigation__item .p-side-navigation__item .p-side-navigation__item + .p-side-navigation__link { + padding-left: 4.5rem; } } .p-side-navigation--icons .p-side-navigation__item .p-side-navigation__item .p-side-navigation__item .p-side-navigation__text, .p-side-navigation--icons .p-side-navigation__item .p-side-navigation__item .p-side-navigation__item .p-side-navigation__link { - padding-left: 7rem; } } + padding-left: 5rem; } + @media (min-width: 620px) { + .p-side-navigation--icons .p-side-navigation__item .p-side-navigation__item .p-side-navigation__item .p-side-navigation__text, .p-side-navigation--icons .p-side-navigation__item .p-side-navigation__item .p-side-navigation__item + .p-side-navigation__link { + padding-left: 7rem; } } + @media (min-width: 772px) { + .p-side-navigation--icons .p-side-navigation__item .p-side-navigation__item .p-side-navigation__item .p-side-navigation__text, .p-side-navigation--icons .p-side-navigation__item .p-side-navigation__item .p-side-navigation__item + .p-side-navigation__link { + padding-left: 7rem; } } .p-side-navigation--icons .p-side-navigation__icon { + left: 1rem; position: absolute; top: 0.5rem; } - @media (max-width: 620px) { - .p-side-navigation--icons .p-side-navigation__icon { - left: 1rem; } } - @media (min-width: 620px) and (max-width: 772px) { + @media (min-width: 620px) { .p-side-navigation--icons .p-side-navigation__icon { left: 1.5rem; } } @media (min-width: 772px) { @@ -5096,45 +5781,39 @@ h1.p-stepped-list__title::before { font-size: 1rem; margin: 0; } -@media (max-width: 620px) { - .p-side-navigation--raw-html li li > span, - .p-side-navigation--raw-html li li > strong, - .p-side-navigation--raw-html li li > a { - padding-left: 2rem; } } - -@media (min-width: 620px) and (max-width: 772px) { - .p-side-navigation--raw-html li li > span, - .p-side-navigation--raw-html li li > strong, - .p-side-navigation--raw-html li li > a { - padding-left: 3rem; } } - -@media (min-width: 772px) { - .p-side-navigation--raw-html li li > span, - .p-side-navigation--raw-html li li > strong, - .p-side-navigation--raw-html li li > a { - padding-left: 3rem; } } - -@media (max-width: 620px) { - .p-side-navigation--raw-html li li li > span, - .p-side-navigation--raw-html li li li > strong, - .p-side-navigation--raw-html li li li > a { - padding-left: 3rem; } } - -@media (min-width: 620px) and (max-width: 772px) { - .p-side-navigation--raw-html li li li > span, - .p-side-navigation--raw-html li li li > strong, - .p-side-navigation--raw-html li li li > a { - padding-left: 4.5rem; } } +.p-side-navigation--raw-html li li > span, +.p-side-navigation--raw-html li li > strong, +.p-side-navigation--raw-html li li > a { + padding-left: 2rem; } + @media (min-width: 620px) { + .p-side-navigation--raw-html li li > span, + .p-side-navigation--raw-html li li > strong, + .p-side-navigation--raw-html li li > a { + padding-left: 3rem; } } + @media (min-width: 772px) { + .p-side-navigation--raw-html li li > span, + .p-side-navigation--raw-html li li > strong, + .p-side-navigation--raw-html li li > a { + padding-left: 3rem; } } -@media (min-width: 772px) { - .p-side-navigation--raw-html li li li > span, - .p-side-navigation--raw-html li li li > strong, - .p-side-navigation--raw-html li li li > a { - padding-left: 4.5rem; } } +.p-side-navigation--raw-html li li li > span, +.p-side-navigation--raw-html li li li > strong, +.p-side-navigation--raw-html li li li > a { + padding-left: 3rem; } + @media (min-width: 620px) { + .p-side-navigation--raw-html li li li > span, + .p-side-navigation--raw-html li li li > strong, + .p-side-navigation--raw-html li li li > a { + padding-left: 4.5rem; } } + @media (min-width: 772px) { + .p-side-navigation--raw-html li li li > span, + .p-side-navigation--raw-html li li li > strong, + .p-side-navigation--raw-html li li li > a { + padding-left: 4.5rem; } } .p-side-navigation, [class*='p-side-navigation--'] { - color: #666; } + color: rgba(0, 0, 0, 0.75); } .p-side-navigation .p-side-navigation__toggle, [class*='p-side-navigation--'] .p-side-navigation__toggle { @@ -5148,15 +5827,21 @@ h1.p-stepped-list__title::before { [class*='p-side-navigation--'] .p-side-navigation__toggle:hover { background-color: #f2f2f2; border-color: rgba(0, 0, 0, 0.56); } - .p-side-navigation .p-side-navigation__toggle:active, - [class*='p-side-navigation--'] .p-side-navigation__toggle:active { - background-color: #d9d9d9; + .p-side-navigation .p-side-navigation__toggle:active, .p-side-navigation .p-side-navigation__toggle[aria-pressed='true'], .p-side-navigation .p-side-navigation__toggle[aria-expanded='true'], + [class*='p-side-navigation--'] .p-side-navigation__toggle:active, + [class*='p-side-navigation--'] .p-side-navigation__toggle[aria-pressed='true'], + [class*='p-side-navigation--'] .p-side-navigation__toggle[aria-expanded='true'] { + background-color: #ebebeb; border-color: rgba(0, 0, 0, 0.56); transition-duration: 0s; } - .p-side-navigation .p-side-navigation__toggle:disabled:active, .p-side-navigation .p-side-navigation__toggle:disabled:hover, .p-side-navigation .p-side-navigation__toggle.is-disabled:active, .p-side-navigation .p-side-navigation__toggle.is-disabled:hover, + .p-side-navigation .p-side-navigation__toggle:disabled:active, .p-side-navigation .p-side-navigation__toggle:disabled[aria-pressed='true'], .p-side-navigation .p-side-navigation__toggle:disabled[aria-expanded='true'], .p-side-navigation .p-side-navigation__toggle:disabled:hover, .p-side-navigation .p-side-navigation__toggle.is-disabled:active, .p-side-navigation .p-side-navigation__toggle.is-disabled[aria-pressed='true'], .p-side-navigation .p-side-navigation__toggle.is-disabled[aria-expanded='true'], .p-side-navigation .p-side-navigation__toggle.is-disabled:hover, [class*='p-side-navigation--'] .p-side-navigation__toggle:disabled:active, + [class*='p-side-navigation--'] .p-side-navigation__toggle:disabled[aria-pressed='true'], + [class*='p-side-navigation--'] .p-side-navigation__toggle:disabled[aria-expanded='true'], [class*='p-side-navigation--'] .p-side-navigation__toggle:disabled:hover, [class*='p-side-navigation--'] .p-side-navigation__toggle.is-disabled:active, + [class*='p-side-navigation--'] .p-side-navigation__toggle.is-disabled[aria-pressed='true'], + [class*='p-side-navigation--'] .p-side-navigation__toggle.is-disabled[aria-expanded='true'], [class*='p-side-navigation--'] .p-side-navigation__toggle.is-disabled:hover { background-color: transparent; border-color: rgba(0, 0, 0, 0.56); } @@ -5171,23 +5856,29 @@ h1.p-stepped-list__title::before { [class*='p-side-navigation--'] .p-side-navigation__toggle--in-drawer { background-color: transparent; border-color: transparent; - color: #666; } + color: rgba(0, 0, 0, 0.75); } .p-side-navigation .p-side-navigation__toggle--in-drawer:visited, [class*='p-side-navigation--'] .p-side-navigation__toggle--in-drawer:visited { - color: #666; } + color: rgba(0, 0, 0, 0.75); } .p-side-navigation .p-side-navigation__toggle--in-drawer:hover, [class*='p-side-navigation--'] .p-side-navigation__toggle--in-drawer:hover { - background-color: rgba(0, 0, 0, 0.05); + background-color: #f2f2f2; border-color: transparent; } - .p-side-navigation .p-side-navigation__toggle--in-drawer:active, - [class*='p-side-navigation--'] .p-side-navigation__toggle--in-drawer:active { - background-color: rgba(0, 0, 0, 0.15); + .p-side-navigation .p-side-navigation__toggle--in-drawer:active, .p-side-navigation .p-side-navigation__toggle--in-drawer[aria-pressed='true'], .p-side-navigation .p-side-navigation__toggle--in-drawer[aria-expanded='true'], + [class*='p-side-navigation--'] .p-side-navigation__toggle--in-drawer:active, + [class*='p-side-navigation--'] .p-side-navigation__toggle--in-drawer[aria-pressed='true'], + [class*='p-side-navigation--'] .p-side-navigation__toggle--in-drawer[aria-expanded='true'] { + background-color: #ebebeb; border-color: transparent; transition-duration: 0s; } - .p-side-navigation .p-side-navigation__toggle--in-drawer:disabled:active, .p-side-navigation .p-side-navigation__toggle--in-drawer:disabled:hover, .p-side-navigation .p-side-navigation__toggle--in-drawer.is-disabled:active, .p-side-navigation .p-side-navigation__toggle--in-drawer.is-disabled:hover, + .p-side-navigation .p-side-navigation__toggle--in-drawer:disabled:active, .p-side-navigation .p-side-navigation__toggle--in-drawer:disabled[aria-pressed='true'], .p-side-navigation .p-side-navigation__toggle--in-drawer:disabled[aria-expanded='true'], .p-side-navigation .p-side-navigation__toggle--in-drawer:disabled:hover, .p-side-navigation .p-side-navigation__toggle--in-drawer.is-disabled:active, .p-side-navigation .p-side-navigation__toggle--in-drawer.is-disabled[aria-pressed='true'], .p-side-navigation .p-side-navigation__toggle--in-drawer.is-disabled[aria-expanded='true'], .p-side-navigation .p-side-navigation__toggle--in-drawer.is-disabled:hover, [class*='p-side-navigation--'] .p-side-navigation__toggle--in-drawer:disabled:active, + [class*='p-side-navigation--'] .p-side-navigation__toggle--in-drawer:disabled[aria-pressed='true'], + [class*='p-side-navigation--'] .p-side-navigation__toggle--in-drawer:disabled[aria-expanded='true'], [class*='p-side-navigation--'] .p-side-navigation__toggle--in-drawer:disabled:hover, [class*='p-side-navigation--'] .p-side-navigation__toggle--in-drawer.is-disabled:active, + [class*='p-side-navigation--'] .p-side-navigation__toggle--in-drawer.is-disabled[aria-pressed='true'], + [class*='p-side-navigation--'] .p-side-navigation__toggle--in-drawer.is-disabled[aria-expanded='true'], [class*='p-side-navigation--'] .p-side-navigation__toggle--in-drawer.is-disabled:hover { background-color: transparent; border-color: rgba(0, 0, 0, 0.56); } @@ -5196,7 +5887,7 @@ h1.p-stepped-list__title::before { color: currentColor; } .p-side-navigation .p-side-navigation__toggle--in-drawer::before, [class*='p-side-navigation--'] .p-side-navigation__toggle--in-drawer::before { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='%23666' d='M8.187 11.748l6.187-6.187-1.06-1.061-5.127 5.127L3.061 4.5 2 5.561z'/%3E%3C/svg%3E"); } + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='rgba(0%2C0%2C0%2C0.75)' d='M8.187 11.748l6.187-6.187-1.06-1.061-5.127 5.127L3.061 4.5 2 5.561z'/%3E%3C/svg%3E"); } .p-side-navigation .p-side-navigation__drawer, [class*='p-side-navigation--'] .p-side-navigation__drawer { @@ -5226,24 +5917,27 @@ h1.p-stepped-list__title::before { .p-side-navigation.is-dark [class*='p-side-navigation--'] .p-side-navigation__link, [class*='p-side-navigation--'].is-dark .p-side-navigation__link, [class*='p-side-navigation--'] .p-side-navigation__link:visited { - color: #666; } + color: rgba(0, 0, 0, 0.75); } .p-side-navigation .p-side-navigation__link:hover, [class*='p-side-navigation--'] .p-side-navigation__link:hover { - background: rgba(0, 0, 0, 0.05); + background: #f2f2f2; color: #111; } -.p-side-navigation .p-side-navigation__link:active, -[class*='p-side-navigation--'] .p-side-navigation__link:active { - background: rgba(0, 0, 0, 0.15); } +.p-side-navigation .p-side-navigation__link:active, .p-side-navigation .is-active.p-side-navigation__link, .p-side-navigation .p-side-navigation__link[aria-current='page'], .p-side-navigation .p-side-navigation__link[aria-current='true'], +[class*='p-side-navigation--'] .p-side-navigation__link:active, +[class*='p-side-navigation--'] .is-active.p-side-navigation__link, +[class*='p-side-navigation--'] .p-side-navigation__link[aria-current='page'], +[class*='p-side-navigation--'] .p-side-navigation__link[aria-current='true'] { + background: #ebebeb; + color: #111; + cursor: default; } .p-side-navigation .is-active.p-side-navigation__link, .p-side-navigation .p-side-navigation__link[aria-current='page'], .p-side-navigation .p-side-navigation__link[aria-current='true'], [class*='p-side-navigation--'] .is-active.p-side-navigation__link, [class*='p-side-navigation--'] .p-side-navigation__link[aria-current='page'], [class*='p-side-navigation--'] .p-side-navigation__link[aria-current='true'] { - position: relative; - background: rgba(0, 0, 0, 0.05); - color: #111; } + position: relative; } .p-side-navigation .is-active.p-side-navigation__link::before, .p-side-navigation .p-side-navigation__link[aria-current='page']::before, .p-side-navigation .p-side-navigation__link[aria-current='true']::before, [class*='p-side-navigation--'] .is-active.p-side-navigation__link::before, [class*='p-side-navigation--'] .p-side-navigation__link[aria-current='page']::before, @@ -5271,7 +5965,7 @@ h1.p-stepped-list__title::before { .l-navigation .p-side-navigation .p-side-navigation__item.has-active-child, .l-navigation [class*='p-side-navigation--'] .p-side-navigation__item.has-active-child { position: relative; - background: rgba(0, 0, 0, 0.05); + background: #f2f2f2; color: #111; } .l-navigation .p-side-navigation .p-side-navigation__item.has-active-child::before, .l-navigation [class*='p-side-navigation--'] .p-side-navigation__item.has-active-child::before { @@ -5297,7 +5991,7 @@ h1.p-stepped-list__title::before { [class*='p-side-navigation--'] .p-side-navigation__item.has-active-child { position: relative; background: transparent; - color: #666; } + color: rgba(0, 0, 0, 0.75); } .l-navigation.is-pinned .p-side-navigation .p-side-navigation__item.has-active-child::before, .l-navigation:focus-within .p-side-navigation .p-side-navigation__item.has-active-child::before, .l-navigation:hover .p-side-navigation .p-side-navigation__item.has-active-child::before, .l-navigation.is-pinned @@ -5328,7 +6022,7 @@ h1.p-stepped-list__title::before { [class*='p-side-navigation--'] .p-side-navigation__item.has-active-child { position: relative; background: transparent; - color: #666; } + color: rgba(0, 0, 0, 0.75); } .l-navigation .p-side-navigation .p-side-navigation__item.has-active-child::before, .l-navigation [class*='p-side-navigation--'] .p-side-navigation__item.has-active-child::before { left: 0; @@ -5344,7 +6038,7 @@ h1.p-stepped-list__title::before { .p-side-navigation.is-dark, [class*='p-side-navigation--'].is-dark { - color: rgba(255, 255, 255, 0.55); } + color: rgba(255, 255, 255, 0.75); } .p-side-navigation.is-dark .p-side-navigation__toggle, [class*='p-side-navigation--'].is-dark .p-side-navigation__toggle { @@ -5358,15 +6052,21 @@ h1.p-stepped-list__title::before { [class*='p-side-navigation--'].is-dark .p-side-navigation__toggle:hover { background-color: #f2f2f2; border-color: rgba(0, 0, 0, 0.56); } - .p-side-navigation.is-dark .p-side-navigation__toggle:active, - [class*='p-side-navigation--'].is-dark .p-side-navigation__toggle:active { - background-color: #d9d9d9; + .p-side-navigation.is-dark .p-side-navigation__toggle:active, .p-side-navigation.is-dark .p-side-navigation__toggle[aria-pressed='true'], .p-side-navigation.is-dark .p-side-navigation__toggle[aria-expanded='true'], + [class*='p-side-navigation--'].is-dark .p-side-navigation__toggle:active, + [class*='p-side-navigation--'].is-dark .p-side-navigation__toggle[aria-pressed='true'], + [class*='p-side-navigation--'].is-dark .p-side-navigation__toggle[aria-expanded='true'] { + background-color: #ebebeb; border-color: rgba(0, 0, 0, 0.56); transition-duration: 0s; } - .p-side-navigation.is-dark .p-side-navigation__toggle:disabled:active, .p-side-navigation.is-dark .p-side-navigation__toggle:disabled:hover, .p-side-navigation.is-dark .p-side-navigation__toggle.is-disabled:active, .p-side-navigation.is-dark .p-side-navigation__toggle.is-disabled:hover, + .p-side-navigation.is-dark .p-side-navigation__toggle:disabled:active, .p-side-navigation.is-dark .p-side-navigation__toggle:disabled[aria-pressed='true'], .p-side-navigation.is-dark .p-side-navigation__toggle:disabled[aria-expanded='true'], .p-side-navigation.is-dark .p-side-navigation__toggle:disabled:hover, .p-side-navigation.is-dark .p-side-navigation__toggle.is-disabled:active, .p-side-navigation.is-dark .p-side-navigation__toggle.is-disabled[aria-pressed='true'], .p-side-navigation.is-dark .p-side-navigation__toggle.is-disabled[aria-expanded='true'], .p-side-navigation.is-dark .p-side-navigation__toggle.is-disabled:hover, [class*='p-side-navigation--'].is-dark .p-side-navigation__toggle:disabled:active, + [class*='p-side-navigation--'].is-dark .p-side-navigation__toggle:disabled[aria-pressed='true'], + [class*='p-side-navigation--'].is-dark .p-side-navigation__toggle:disabled[aria-expanded='true'], [class*='p-side-navigation--'].is-dark .p-side-navigation__toggle:disabled:hover, [class*='p-side-navigation--'].is-dark .p-side-navigation__toggle.is-disabled:active, + [class*='p-side-navigation--'].is-dark .p-side-navigation__toggle.is-disabled[aria-pressed='true'], + [class*='p-side-navigation--'].is-dark .p-side-navigation__toggle.is-disabled[aria-expanded='true'], [class*='p-side-navigation--'].is-dark .p-side-navigation__toggle.is-disabled:hover { background-color: transparent; border-color: rgba(0, 0, 0, 0.56); } @@ -5381,23 +6081,29 @@ h1.p-stepped-list__title::before { [class*='p-side-navigation--'].is-dark .p-side-navigation__toggle--in-drawer { background-color: transparent; border-color: transparent; - color: rgba(255, 255, 255, 0.55); } + color: rgba(255, 255, 255, 0.75); } .p-side-navigation.is-dark .p-side-navigation__toggle--in-drawer:visited, [class*='p-side-navigation--'].is-dark .p-side-navigation__toggle--in-drawer:visited { - color: rgba(255, 255, 255, 0.55); } + color: rgba(255, 255, 255, 0.75); } .p-side-navigation.is-dark .p-side-navigation__toggle--in-drawer:hover, [class*='p-side-navigation--'].is-dark .p-side-navigation__toggle--in-drawer:hover { background-color: rgba(255, 255, 255, 0.05); border-color: transparent; } - .p-side-navigation.is-dark .p-side-navigation__toggle--in-drawer:active, - [class*='p-side-navigation--'].is-dark .p-side-navigation__toggle--in-drawer:active { - background-color: rgba(255, 255, 255, 0.15); + .p-side-navigation.is-dark .p-side-navigation__toggle--in-drawer:active, .p-side-navigation.is-dark .p-side-navigation__toggle--in-drawer[aria-pressed='true'], .p-side-navigation.is-dark .p-side-navigation__toggle--in-drawer[aria-expanded='true'], + [class*='p-side-navigation--'].is-dark .p-side-navigation__toggle--in-drawer:active, + [class*='p-side-navigation--'].is-dark .p-side-navigation__toggle--in-drawer[aria-pressed='true'], + [class*='p-side-navigation--'].is-dark .p-side-navigation__toggle--in-drawer[aria-expanded='true'] { + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; transition-duration: 0s; } - .p-side-navigation.is-dark .p-side-navigation__toggle--in-drawer:disabled:active, .p-side-navigation.is-dark .p-side-navigation__toggle--in-drawer:disabled:hover, .p-side-navigation.is-dark .p-side-navigation__toggle--in-drawer.is-disabled:active, .p-side-navigation.is-dark .p-side-navigation__toggle--in-drawer.is-disabled:hover, + .p-side-navigation.is-dark .p-side-navigation__toggle--in-drawer:disabled:active, .p-side-navigation.is-dark .p-side-navigation__toggle--in-drawer:disabled[aria-pressed='true'], .p-side-navigation.is-dark .p-side-navigation__toggle--in-drawer:disabled[aria-expanded='true'], .p-side-navigation.is-dark .p-side-navigation__toggle--in-drawer:disabled:hover, .p-side-navigation.is-dark .p-side-navigation__toggle--in-drawer.is-disabled:active, .p-side-navigation.is-dark .p-side-navigation__toggle--in-drawer.is-disabled[aria-pressed='true'], .p-side-navigation.is-dark .p-side-navigation__toggle--in-drawer.is-disabled[aria-expanded='true'], .p-side-navigation.is-dark .p-side-navigation__toggle--in-drawer.is-disabled:hover, [class*='p-side-navigation--'].is-dark .p-side-navigation__toggle--in-drawer:disabled:active, + [class*='p-side-navigation--'].is-dark .p-side-navigation__toggle--in-drawer:disabled[aria-pressed='true'], + [class*='p-side-navigation--'].is-dark .p-side-navigation__toggle--in-drawer:disabled[aria-expanded='true'], [class*='p-side-navigation--'].is-dark .p-side-navigation__toggle--in-drawer:disabled:hover, [class*='p-side-navigation--'].is-dark .p-side-navigation__toggle--in-drawer.is-disabled:active, + [class*='p-side-navigation--'].is-dark .p-side-navigation__toggle--in-drawer.is-disabled[aria-pressed='true'], + [class*='p-side-navigation--'].is-dark .p-side-navigation__toggle--in-drawer.is-disabled[aria-expanded='true'], [class*='p-side-navigation--'].is-dark .p-side-navigation__toggle--in-drawer.is-disabled:hover { background-color: transparent; border-color: rgba(0, 0, 0, 0.56); } @@ -5428,24 +6134,27 @@ h1.p-stepped-list__title::before { .p-side-navigation.is-dark .p-side-navigation__link, .p-side-navigation.is-dark .p-side-navigation__link:visited, [class*='p-side-navigation--'].is-dark .p-side-navigation__link, [class*='p-side-navigation--'].is-dark .p-side-navigation__link:visited { - color: rgba(255, 255, 255, 0.55); } + color: rgba(255, 255, 255, 0.75); } .p-side-navigation.is-dark .p-side-navigation__link:hover, [class*='p-side-navigation--'].is-dark .p-side-navigation__link:hover { background: rgba(255, 255, 255, 0.05); color: white; } -.p-side-navigation.is-dark .p-side-navigation__link:active, -[class*='p-side-navigation--'].is-dark .p-side-navigation__link:active { - background: rgba(255, 255, 255, 0.15); } +.p-side-navigation.is-dark .p-side-navigation__link:active, .p-side-navigation.is-dark .is-active.p-side-navigation__link, .p-side-navigation.is-dark .p-side-navigation__link[aria-current='page'], .p-side-navigation.is-dark .p-side-navigation__link[aria-current='true'], +[class*='p-side-navigation--'].is-dark .p-side-navigation__link:active, +[class*='p-side-navigation--'].is-dark .is-active.p-side-navigation__link, +[class*='p-side-navigation--'].is-dark .p-side-navigation__link[aria-current='page'], +[class*='p-side-navigation--'].is-dark .p-side-navigation__link[aria-current='true'] { + background: rgba(255, 255, 255, 0.08); + color: white; + cursor: default; } .p-side-navigation.is-dark .is-active.p-side-navigation__link, .p-side-navigation.is-dark .p-side-navigation__link[aria-current='page'], .p-side-navigation.is-dark .p-side-navigation__link[aria-current='true'], [class*='p-side-navigation--'].is-dark .is-active.p-side-navigation__link, [class*='p-side-navigation--'].is-dark .p-side-navigation__link[aria-current='page'], [class*='p-side-navigation--'].is-dark .p-side-navigation__link[aria-current='true'] { - position: relative; - background: rgba(255, 255, 255, 0.05); - color: white; } + position: relative; } .p-side-navigation.is-dark .is-active.p-side-navigation__link::before, .p-side-navigation.is-dark .p-side-navigation__link[aria-current='page']::before, .p-side-navigation.is-dark .p-side-navigation__link[aria-current='true']::before, [class*='p-side-navigation--'].is-dark .is-active.p-side-navigation__link::before, [class*='p-side-navigation--'].is-dark .p-side-navigation__link[aria-current='page']::before, @@ -5499,7 +6208,7 @@ h1.p-stepped-list__title::before { [class*='p-side-navigation--'].is-dark .p-side-navigation__item.has-active-child { position: relative; background: transparent; - color: rgba(255, 255, 255, 0.55); } + color: rgba(255, 255, 255, 0.75); } .l-navigation.is-pinned .p-side-navigation.is-dark .p-side-navigation__item.has-active-child::before, .l-navigation:focus-within .p-side-navigation.is-dark .p-side-navigation__item.has-active-child::before, .l-navigation:hover .p-side-navigation.is-dark .p-side-navigation__item.has-active-child::before, .l-navigation.is-pinned @@ -5530,7 +6239,7 @@ h1.p-stepped-list__title::before { [class*='p-side-navigation--'].is-dark .p-side-navigation__item.has-active-child { position: relative; background: transparent; - color: rgba(255, 255, 255, 0.55); } + color: rgba(255, 255, 255, 0.75); } .l-navigation .p-side-navigation.is-dark .p-side-navigation__item.has-active-child::before, .l-navigation [class*='p-side-navigation--'].is-dark .p-side-navigation__item.has-active-child::before { left: 0; @@ -5548,25 +6257,22 @@ h1.p-stepped-list__title::before { background: rgba(0, 0, 0, 0.1); } .p-side-navigation--raw-html li > a, .p-side-navigation--raw-html li > a:visited { - color: #666; } + color: rgba(0, 0, 0, 0.75); } .p-side-navigation--raw-html li > a:hover { - background: rgba(0, 0, 0, 0.05); + background: #f2f2f2; color: #111; } -.p-side-navigation--raw-html li > a:active { - background: rgba(0, 0, 0, 0.15); } - -.p-side-navigation--raw-html li > a.is-active, .p-side-navigation--raw-html li > a[aria-current='page'], .p-side-navigation--raw-html li > a[aria-current='true'] { +.p-side-navigation--raw-html li > a:active, .p-side-navigation--raw-html li > a.is-active, .p-side-navigation--raw-html li > a[aria-current='page'], .p-side-navigation--raw-html li > a[aria-current='true'] { position: relative; - background: rgba(0, 0, 0, 0.05); + background: #ebebeb; color: #111; } - .p-side-navigation--raw-html li > a.is-active::before, .p-side-navigation--raw-html li > a[aria-current='page']::before, .p-side-navigation--raw-html li > a[aria-current='true']::before { + .p-side-navigation--raw-html li > a:active::before, .p-side-navigation--raw-html li > a.is-active::before, .p-side-navigation--raw-html li > a[aria-current='page']::before, .p-side-navigation--raw-html li > a[aria-current='true']::before { left: 0; background-color: #111; content: ''; position: absolute; } - .p-side-navigation--raw-html li > a.is-active::before, .p-side-navigation--raw-html li > a[aria-current='page']::before, .p-side-navigation--raw-html li > a[aria-current='true']::before { + .p-side-navigation--raw-html li > a:active::before, .p-side-navigation--raw-html li > a.is-active::before, .p-side-navigation--raw-html li > a[aria-current='page']::before, .p-side-navigation--raw-html li > a[aria-current='true']::before { height: auto; width: 0.1875rem; bottom: 0; @@ -5583,25 +6289,22 @@ h1.p-stepped-list__title::before { background: rgba(255, 255, 255, 0.1); } .p-side-navigation--raw-html.is-light li > a, .p-side-navigation--raw-html.is-light li > a:visited { - color: rgba(255, 255, 255, 0.55); } + color: rgba(255, 255, 255, 0.75); } .p-side-navigation--raw-html.is-light li > a:hover { background: rgba(255, 255, 255, 0.05); color: white; } -.p-side-navigation--raw-html.is-light li > a:active { - background: rgba(255, 255, 255, 0.15); } - -.p-side-navigation--raw-html.is-light li > a.is-active, .p-side-navigation--raw-html.is-light li > a[aria-current='page'], .p-side-navigation--raw-html.is-light li > a[aria-current='true'] { +.p-side-navigation--raw-html.is-light li > a:active, .p-side-navigation--raw-html.is-light li > a.is-active, .p-side-navigation--raw-html.is-light li > a[aria-current='page'], .p-side-navigation--raw-html.is-light li > a[aria-current='true'] { position: relative; - background: rgba(255, 255, 255, 0.05); + background: rgba(255, 255, 255, 0.08); color: white; } - .p-side-navigation--raw-html.is-light li > a.is-active::before, .p-side-navigation--raw-html.is-light li > a[aria-current='page']::before, .p-side-navigation--raw-html.is-light li > a[aria-current='true']::before { + .p-side-navigation--raw-html.is-light li > a:active::before, .p-side-navigation--raw-html.is-light li > a.is-active::before, .p-side-navigation--raw-html.is-light li > a[aria-current='page']::before, .p-side-navigation--raw-html.is-light li > a[aria-current='true']::before { left: 0; background-color: white; content: ''; position: absolute; } - .p-side-navigation--raw-html.is-light li > a.is-active::before, .p-side-navigation--raw-html.is-light li > a[aria-current='page']::before, .p-side-navigation--raw-html.is-light li > a[aria-current='true']::before { + .p-side-navigation--raw-html.is-light li > a:active::before, .p-side-navigation--raw-html.is-light li > a.is-active::before, .p-side-navigation--raw-html.is-light li > a[aria-current='page']::before, .p-side-navigation--raw-html.is-light li > a[aria-current='true']::before { height: auto; width: 0.1875rem; bottom: 0; @@ -5640,7 +6343,7 @@ h1.p-stepped-list__title::before { color: #f7f7f7; } .p-strip--accent { - background-color: #EF7E45; + background-color: #CFCBB8; color: #111; } .p-strip--image { @@ -5707,11 +6410,11 @@ h1.p-stepped-list__title::before { outline: 0.1875rem solid #2e96ff; } .p-switch__slider { - background: linear-gradient(to right, #06c 50%, #cdcdcd 50%); + background: linear-gradient(to right, #06c 50%, #d9d9d9 50%); box-shadow: inset 0 2px 5px 0 rgba(17, 17, 17, 0.2); display: block; height: 1.5rem; - margin: 0.1rem 0 1rem 0; + margin: 0.1rem 0 0 0; position: relative; width: 3rem; } .p-switch__slider::before { @@ -5731,54 +6434,62 @@ h1.p-stepped-list__title::before { margin-left: -1.5rem; margin-right: 0.5rem; } -.p-table-expanding { +.p-table--expanding, .p-table-expanding { display: flex; flex-flow: column nowrap; justify-content: space-between; } - .p-table-expanding thead, + .p-table--expanding thead, .p-table-expanding thead, + .p-table--expanding tbody, .p-table-expanding tbody { display: block; margin: 0; } - .p-table-expanding tr { + .p-table--expanding tr, .p-table-expanding tr { display: flex; margin: 0; width: 100%; flex-flow: row; flex-wrap: wrap; } - .p-table-expanding tr + tr { + .p-table--expanding tr + tr, .p-table-expanding tr + tr { margin: 0; } - .p-table-expanding th, + .p-table--expanding th, .p-table-expanding th, + .p-table--expanding td, .p-table-expanding td { align-items: flex-start; - display: flex; - margin: 0; - word-break: break-word; + display: block; flex-basis: 0; - flex-flow: row nowrap; - flex-grow: 1; } - .p-table-expanding th.p-table-expanding__panel, + flex-grow: 1; + margin: 0; + text-overflow: ellipsis; } + .p-table--expanding th.p-table__expanding-panel, .p-table-expanding th.p-table__expanding-panel, .p-table-expanding th.p-table-expanding__panel, + .p-table--expanding td.p-table__expanding-panel, + .p-table-expanding td.p-table__expanding-panel, .p-table-expanding td.p-table-expanding__panel { flex-basis: 100%; max-width: 100%; } - .p-table-expanding th.p-table-expanding__panel[aria-hidden='true'], + .p-table--expanding th.p-table__expanding-panel[aria-hidden='true'], .p-table-expanding th.p-table__expanding-panel[aria-hidden='true'], .p-table-expanding th.p-table-expanding__panel[aria-hidden='true'], + .p-table--expanding td.p-table__expanding-panel[aria-hidden='true'], + .p-table-expanding td.p-table__expanding-panel[aria-hidden='true'], .p-table-expanding td.p-table-expanding__panel[aria-hidden='true'] { display: none; } - .p-table-expanding th.p-table-expanding__panel .row, + .p-table--expanding th.p-table__expanding-panel .row, .p-table-expanding th.p-table__expanding-panel .row, .p-table-expanding th.p-table-expanding__panel .row, + .p-table--expanding td.p-table__expanding-panel .row, + .p-table-expanding td.p-table__expanding-panel .row, .p-table-expanding td.p-table-expanding__panel .row { max-width: 100%; padding: 0; width: 100%; } - .p-table-expanding th[aria-hidden='true'], + .p-table--expanding th[aria-hidden='true'], .p-table-expanding th[aria-hidden='true'], + .p-table--expanding td[aria-hidden='true'], .p-table-expanding td[aria-hidden='true'] { display: none; } .p-table-of-contents { - border-top: 1px solid #cdcdcd; + border-top: 1px solid #d9d9d9; font-size: 0.875rem; padding: 0 1.5rem; } @media (min-width: 772px) { .p-table-of-contents { - border-left: 1px solid #cdcdcd; + border-left: 1px solid #d9d9d9; border-top: 0; padding: 0 1rem; } } @@ -5792,7 +6503,7 @@ h1.p-stepped-list__title::before { .p-table-of-contents__section { padding: 1rem 0; } .p-table-of-contents__section:not(:last-child) { - border-bottom: 1px dotted #cdcdcd; } + border-bottom: 1px dotted #d9d9d9; } .p-table-of-contents__nav { list-style: none; @@ -5810,94 +6521,72 @@ h1.p-stepped-list__title::before { font-weight: 400; padding-left: 0.25rem; } -@media screen and (max-width: 772px) { - .p-table--mobile-card thead { - display: none; } - .p-table--mobile-card tbody { - display: flex; - flex-wrap: wrap; - justify-content: space-between; } - .p-table--mobile-card tr { - border: 1px solid #cdcdcd; - border-radius: 0.125rem; - display: flex; - flex-direction: column; - margin-bottom: 1.5rem; - overflow: auto; - padding: 0 1.5rem calc(1rem - 1px); - width: calc(50% - 1rem); } - .p-table--mobile-card td, - .p-table--mobile-card tbody th { - display: flex; - min-width: 100%; - overflow: hidden; - padding-bottom: 0.1rem; - padding-left: calc(50% + 0.5rem); - padding-right: 0; - padding-top: 0.4rem; - position: relative; - text-align: left !important; - text-overflow: ellipsis; - width: 100%; - word-break: break-word; } - .p-table--mobile-card td[aria-label], - .p-table--mobile-card tbody th[aria-label] { - text-align: right; } - .p-table--mobile-card td[aria-label]::before, - .p-table--mobile-card tbody th[aria-label]::before { - content: attr(aria-label); - display: block; - flex: 0 0 auto; - margin-bottom: 0.3rem; - margin-left: -100%; +.p-table--mobile-card td::before, +.p-table--mobile-card tbody th::before { + text-align: left; } + +@media (max-width: 772px) { + @supports (display: grid) { + .p-table--mobile-card thead { + display: none; } + .p-table--mobile-card tbody { + display: grid; + grid-gap: 0 1.5rem; + grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); + grid-template-rows: auto; + width: 100%; } + .p-table--mobile-card tr { + border: 1px solid #d9d9d9; + border-radius: 0.125rem; + display: grid; + grid-gap: 0 1.5rem; + grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); + grid-template-rows: auto; + margin-bottom: 1.5rem; + padding: 0 1rem; } + .p-table--mobile-card td, + .p-table--mobile-card tbody th { + min-width: 100%; overflow: hidden; - padding-right: 1rem; - padding-top: 0.3rem; - text-align: right; + padding-left: 0; + padding-right: 0; + position: relative; text-overflow: ellipsis; - width: 100%; } - .p-table--mobile-card td.u-align--right, - .p-table--mobile-card tbody th.u-align--right { - justify-content: unset !important; } - .p-table--mobile-card .p-contextual-menu { - width: 100%; } - .p-table--mobile-card .p-contextual-menu [role='menuitem'] { - display: none; } - .p-table--mobile-card .p-contextual-menu__dropdown { - box-shadow: none; - display: block; - max-width: 100%; - position: relative; } - .p-table--mobile-card .p-contextual-menu__dropdown::before { - display: none; } - .p-table--mobile-card .p-contextual-menu__group { - padding: 0; } - .p-table--mobile-card .p-contextual-menu__group + .p-contextual-menu__group { - margin-top: 0.5rem; - padding-top: 0.5rem; } - .p-table--mobile-card .p-contextual-menu__link { - border-color: #cdcdcd; - border-radius: 0.125rem; - border-style: solid; - border-width: 1px; - box-sizing: border-box; - color: #000; - cursor: pointer; - display: block; - line-height: 1rem; - outline: none; - padding: 0.5rem 1.5rem; - text-align: center; - text-decoration: none; - width: 100%; } - .p-table--mobile-card .p-contextual-menu__link + .p-contextual-menu__link { - margin-top: 0.25rem; } } + white-space: nowrap; + width: 100%; + word-break: break-word; } + .p-table--mobile-card td.u-align--right, + .p-table--mobile-card tbody th.u-align--right { + justify-content: unset !important; + text-align: left !important; } + .p-table--mobile-card td.has-overflow, + .p-table--mobile-card tbody th.has-overflow { + overflow: visible; } + .p-table--mobile-card td[aria-label]::before, + .p-table--mobile-card tbody th[aria-label]::before { + content: attr(aria-label); + display: block; + margin-bottom: 0.25rem; + overflow: hidden; + padding-left: 0; + padding-right: 0; + text-overflow: ellipsis; + width: 100%; } + .p-table--mobile-card td:not(:first-child)::after, + .p-table--mobile-card tbody th:not(:first-child)::after { + background-color: #d9d9d9; + content: ''; + height: 1px; + left: 0; + position: absolute; + right: 0; + top: 0; } } } -@media screen and (max-width: 620px) { +@media (max-width: 620px) { .p-table--mobile-card tr { width: 100%; } } -.p-table--sortable thead th[aria-sort='ascending']::after, .p-table--sortable thead th[aria-sort='descending']::after { +table th[aria-sort='ascending']::after, table th[aria-sort='descending']::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='%23666' d='M8.187 11.748l6.187-6.187-1.06-1.061-5.127 5.127L3.061 4.5 2 5.561z'/%3E%3C/svg%3E"); background-size: contain; height: 1rem; @@ -5910,42 +6599,24 @@ h1.p-stepped-list__title::before { margin-top: calc(0.76562rem - 1rem); vertical-align: calc(0.5px + 0.3465em - 0.5rem); } -.p-table--sortable { - table-layout: fixed; } - .p-table--sortable thead th[aria-sort] { - align-items: center; - cursor: pointer; - white-space: nowrap; } - .p-table--sortable thead th[aria-sort='descending']::after { - -webkit-transform: rotate(180deg); - transform: rotate(180deg); } - .p-table--sortable thead th[aria-sort]:hover { - color: #06c; - text-decoration: underline; } +table th[aria-sort] { + align-items: center; + cursor: pointer; + white-space: nowrap; } + +table th[aria-sort='descending']::after { + -webkit-transform: rotate(180deg); + transform: rotate(180deg); } + +table th[aria-sort]:hover { + color: #06c; + text-decoration: underline; } .p-tabs { border-radius: 0; overflow: hidden; - padding: 0; - position: relative; } - .p-tabs::after { - background: linear-gradient(to right, transparent 0%, #fff 45%, #fff 100%); - color: #666; - content: '\203A'; - display: block; - font-size: 2rem; - line-height: calc(100% + 1rem - 0.1875rem); - padding-left: 1.5rem; - padding-right: 1.5rem; - pointer-events: none; - position: absolute; - right: 0; - text-align: right; - top: 0; - width: 1rem; } - @media screen and (min-width: 772px) { - .p-tabs::after { - display: none; } } + padding: 0; + position: relative; } .p-tabs__list { display: flex; margin: 0 auto 1.5rem; @@ -5961,43 +6632,96 @@ h1.p-stepped-list__title::before { .p-tabs__item:last-child { margin-right: 3rem; } .p-tabs__link { + background-color: #fff; + border-color: transparent; + color: #111; + position: relative; + border: none; color: #111; display: block; line-height: 1.5rem; + margin-bottom: 0; padding: 0.75rem 1rem; position: relative; } - .p-tabs__link:focus { - outline: 0.1875rem solid #2e96ff; - outline-offset: -0.1875rem; } - .p-tabs__link:focus-visible { - outline: 0.1875rem solid #2e96ff; - outline-offset: -0.1875rem; } - .p-tabs__link:focus:not(:focus-visible) { - outline: 0; - outline-offset: 0; } - .p-tabs__link:active, .p-tabs__link:hover, .p-tabs__link:visited { - color: #111; - text-decoration: none; } + .p-tabs__link:visited { + color: #111; } + .p-tabs__link:hover { + background-color: #f2f2f2; + border-color: transparent; } + .p-tabs__link:active, .p-tabs__link[aria-pressed='true'], .p-tabs__link[aria-expanded='true'] { + background-color: #ebebeb; + border-color: transparent; + transition-duration: 0s; } + .p-tabs__link:disabled:active, .p-tabs__link:disabled[aria-pressed='true'], .p-tabs__link:disabled[aria-expanded='true'], .p-tabs__link:disabled:hover, .p-tabs__link.is-disabled:active, .p-tabs__link.is-disabled[aria-pressed='true'], .p-tabs__link.is-disabled[aria-expanded='true'], .p-tabs__link.is-disabled:hover { + background-color: transparent; + border-color: transparent; } + .p-tabs__link .p-link--external { + color: currentColor; } + .p-tabs__link::before { + bottom: 0; + background-color: transparent; + content: ''; + position: absolute; } .p-tabs__link::before { + height: 0.1875rem; + width: auto; + left: 0; + right: 0; + bottom: 0; + top: auto; } + .p-tabs__link::before { + transition-duration: 0.1s; + transition-property: background-color, border-color; + transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); bottom: 0; z-index: 1; } .p-tabs__link:focus { z-index: 1; } .p-tabs__link:focus::before, .p-tabs__link:focus::after { content: none; } - .p-tabs__link:hover, .p-tabs__link[aria-selected='true'] { + .p-tabs__link:focus:not(:focus-visible) { position: relative; } - .p-tabs__link:hover::before, .p-tabs__link[aria-selected='true']::before { + .p-tabs__link:focus:not(:focus-visible)::before { bottom: 0; - background-color: #666; + background-color: #111; content: ''; position: absolute; } - .p-tabs__link:hover::before, .p-tabs__link[aria-selected='true']::before { + .p-tabs__link:focus:not(:focus-visible)::before { height: 0.1875rem; width: auto; left: 0; - right: 0; } - .p-tabs__link:hover:focus::before, .p-tabs__link:hover:focus::after, .p-tabs__link[aria-selected='true']:focus::before, .p-tabs__link[aria-selected='true']:focus::after { + right: 0; + bottom: 0; + top: auto; } + .p-tabs__link:active, .p-tabs__link[aria-selected='true'] { + position: relative; } + .p-tabs__link:active::before, .p-tabs__link[aria-selected='true']::before { + bottom: 0; + background-color: #111; + content: ''; + position: absolute; } + .p-tabs__link:active::before, .p-tabs__link[aria-selected='true']::before { + height: 0.1875rem; + width: auto; + left: 0; + right: 0; + bottom: 0; + top: auto; } + .p-tabs__link:active:focus:not(:focus-visible), .p-tabs__link[aria-selected='true']:focus:not(:focus-visible) { + position: relative; } + .p-tabs__link:active:focus:not(:focus-visible)::before, .p-tabs__link[aria-selected='true']:focus:not(:focus-visible)::before { + bottom: 0; + background-color: #111; + content: ''; + position: absolute; } + .p-tabs__link:active:focus:not(:focus-visible)::before, .p-tabs__link[aria-selected='true']:focus:not(:focus-visible)::before { + height: 0.1875rem; + width: auto; + left: 0; + right: 0; + bottom: 0; + top: auto; } + .p-tabs__link:active:focus::before, .p-tabs__link:active:focus::after, .p-tabs__link[aria-selected='true']:focus::before, .p-tabs__link[aria-selected='true']:focus::after { content: none; } .p-tooltip, .p-tooltip--btm-center, .p-tooltip--btm-right, .p-tooltip--top-left, .p-tooltip--top-center, .p-tooltip--top-right, .p-tooltip--right, .p-tooltip--left { @@ -6005,6 +6729,9 @@ h1.p-stepped-list__title::before { .p-tooltip:focus .p-tooltip__message, .p-tooltip--btm-center:focus .p-tooltip__message, .p-tooltip--btm-right:focus .p-tooltip__message, .p-tooltip--top-left:focus .p-tooltip__message, .p-tooltip--top-center:focus .p-tooltip__message, .p-tooltip--top-right:focus .p-tooltip__message, .p-tooltip--right:focus .p-tooltip__message, .p-tooltip--left:focus .p-tooltip__message, .p-tooltip:hover .p-tooltip__message, .p-tooltip--btm-center:hover .p-tooltip__message, .p-tooltip--btm-right:hover .p-tooltip__message, .p-tooltip--top-left:hover .p-tooltip__message, .p-tooltip--top-center:hover .p-tooltip__message, .p-tooltip--top-right:hover .p-tooltip__message, .p-tooltip--right:hover .p-tooltip__message, .p-tooltip--left:hover .p-tooltip__message { display: inline; text-decoration: initial; } + .is-detached.p-tooltip, .is-detached.p-tooltip--btm-center, .is-detached.p-tooltip--btm-right, .is-detached.p-tooltip--top-left, .is-detached.p-tooltip--top-center, .is-detached.p-tooltip--top-right, .is-detached.p-tooltip--right, .is-detached.p-tooltip--left { + display: block; + position: absolute; } .p-tooltip__message { background-color: #111; @@ -6022,7 +6749,9 @@ h1.p-stepped-list__title::before { -webkit-transform: translateX(0%) translateY(13px); transform: translateX(0%) translateY(13px); white-space: pre; - z-index: 1; } + z-index: 11; } + .is-detached .p-tooltip__message { + display: block; } .p-tooltip__message::before { border-bottom: 0.5rem solid #111; border-left: 0.5rem solid transparent; @@ -6188,6 +6917,7 @@ h1.p-stepped-list__title::before { grid-template-columns: min-content minmax(0, 1fr) minmax(0, min-content); grid-template-rows: min-content 1fr min-content; height: 100vh; + overflow: hidden; width: 100vw; } .l-navigation-bar { @@ -6195,7 +6925,7 @@ h1.p-stepped-list__title::before { .l-navigation { transition-duration: 0.165s; - transition-property: transform; + transition-property: transform, box-shadow; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); bottom: 0; box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.2); @@ -6211,8 +6941,10 @@ h1.p-stepped-list__title::before { .l-navigation { width: auto; } } .l-navigation.is-collapsed { + box-shadow: 0 0 0 0 transparent; transform: translateX(-100%); } .l-navigation.is-collapsed:focus-within { + box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.2); transform: none; } .l-navigation__drawer { @@ -6335,6 +7067,9 @@ h1.p-stepped-list__title::before { z-index: 102; } .l-aside { + transition-duration: 0.1s; + transition-property: transform, box-shadow; + transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.2); grid-area: main; justify-self: right; @@ -6344,18 +7079,23 @@ h1.p-stepped-list__title::before { @media (min-width: 460px) { .l-aside { max-width: 100%; - width: 45.3rem; } + width: 33.5rem; } .l-aside.is-wide { width: 72rem; } .l-aside.is-narrow { width: 21.65rem; } } + .l-aside.is-collapsed { + box-shadow: 0 0 0 0 transparent; + transform: translateX(100%); } @media (min-width: 772px) { .l-aside.is-pinned { border-left: 1px solid rgba(0, 0, 0, 0.1); box-shadow: none; grid-area: aside; justify-self: auto; - max-width: 50vw; } } + max-width: 50vw; } + .l-aside.is-pinned.is-collapsed { + display: none; } } .p-panel { background: #fff; @@ -6406,28 +7146,186 @@ h1.p-stepped-list__title::before { margin-bottom: 1.25rem; margin-top: 0.25rem; } -.l-application.app-demo > .l-navigation-bar, -.l-application.app-demo > .l-navigation .l-navigation__drawer, -.l-application.app-demo > .l-main, -.l-application.app-demo > .l-aside, -.l-application.app-demo > .l-status { - padding: 1rem; } +@media (min-width: 620px) { + .l-site { + display: flex; + flex-direction: column; + min-height: 100vh; } + .l-footer--sticky { + margin-top: auto; } } -.l-application.app-demo > .l-navigation-bar, -.l-application.app-demo > .l-navigation .l-navigation__drawer { - background: #111; } +@media (min-width: 1036px) { + .l-fluid-breakout { + display: flex; + flex-wrap: wrap; } } -.l-application.app-demo > .l-navigation-bar { - padding-bottom: 0.25rem; - padding-top: 0.25rem; } +.l-fluid-breakout .l-fluid-breakout__item { + margin-right: 1rem; } + @media (min-width: calc(72rem + 14rem)) { + .l-fluid-breakout .l-fluid-breakout__item { + flex: 1 1 auto; + width: 13rem; } } -.l-application.app-demo > .l-aside { - background: #fff; } +.l-fluid-breakout .l-fluid-breakout__main { + display: flex; + flex: 1 1 80%; + flex-wrap: wrap; + width: 100%; } + @media (min-width: calc(72rem + 14rem)) { + .l-fluid-breakout .l-fluid-breakout__main { + width: calc(100% - 14rem); } } -.l-application.app-demo > .l-status { - background: #f7f7f7; - padding-bottom: 0.5rem; - padding-top: 0.5rem; } +.l-fluid-breakout .l-fluid-breakout__aside--right, .l-fluid-breakout .l-fluid-breakout__aside { + flex: 0 0 auto; + justify-content: flex-start; } + @media (min-width: 1036px) { + .l-fluid-breakout .l-fluid-breakout__aside--right, .l-fluid-breakout .l-fluid-breakout__aside { + flex: 1 1 13%; + width: 14rem; } } + +@media (max-width: calc(72rem + 14rem)) { + .l-fluid-breakout .l-fluid-breakout__aside { + padding-left: 0; } } + +@media (min-width: 1036px) { + .l-fluid-breakout .l-fluid-breakout__toolbar { + flex: 1 1 100%; + margin-left: 14rem; } } + +@media (min-width: 1036px) { + .l-fluid-breakout .l-fluid-breakout__toolbar-items { + display: flex; + flex: 1 1 100%; + justify-content: space-between; } } + +.l-fluid-breakout { + padding-left: 1rem; + padding-right: 1rem; } + @supports (display: grid) { + .l-fluid-breakout { + display: block; + grid-gap: 0 0; } } + @media (min-width: 1036px) { + .l-fluid-breakout { + margin-left: auto; + margin-right: auto; + max-width: calc(2 * 14rem + 72rem); } + @supports (display: grid) { + .l-fluid-breakout { + display: grid; + grid-template-columns: minmax(14rem, 1fr) minmax(0, 72rem) minmax(14rem, 1fr); + grid-template-rows: auto; } } } + @media (min-width: 620px) { + .l-fluid-breakout { + padding-left: 1.5rem; + padding-right: 1.5rem; } } + @media (min-width: 772px) { + .l-fluid-breakout { + padding-left: 1.5rem; + padding-right: 1.5rem; } } + @media (min-width: calc(72rem + 14rem)) { + .l-fluid-breakout { + padding-left: 0; + padding-right: 0; } + @supports (display: grid) { + .l-fluid-breakout { + grid-gap: 0 0; } } } + @supports (display: grid) { + .l-fluid-breakout .l-fluid-breakout__main { + display: grid; + grid-gap: 0 1rem; + grid-row: 2; + grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); + width: 100%; } } + @media (min-width: calc(72rem + 14rem)) { + .l-fluid-breakout .l-fluid-breakout__main { + padding-left: 1.5rem; + padding-right: 1.5rem; } } + @media (min-width: 1036px) { + @supports (display: grid) { + .l-fluid-breakout .l-fluid-breakout__main { + grid-column: auto / span 2; } + .l-fluid-breakout .l-fluid-breakout__main.no-aside { + grid-column: 2 / span 2; } } } + @media (min-width: 1036px) { + @supports (display: grid) { + .l-fluid-breakout .l-fluid-breakout__main.is-full-width { + grid-column: 1 / span 3; } } } + .l-fluid-breakout .l-fluid-breakout__main .row { + max-width: 100%; + padding-left: 0; + padding-right: 0; } + @supports (display: grid) { + .l-fluid-breakout .l-fluid-breakout__item { + margin-left: 0; + margin-right: 0; } + @media (min-width: calc(72rem + 14rem)) { + .l-fluid-breakout .l-fluid-breakout__item { + grid-column: auto / auto; + width: initial; } } } + .l-fluid-breakout .l-fluid-breakout__aside, .l-fluid-breakout .l-fluid-breakout__aside--right { + padding-left: 0; } + @media (min-width: calc(72rem + 14rem)) { + .l-fluid-breakout .l-fluid-breakout__aside, .l-fluid-breakout .l-fluid-breakout__aside--right { + align-items: start; } } + @supports (display: grid) { + .l-fluid-breakout .l-fluid-breakout__aside, .l-fluid-breakout .l-fluid-breakout__aside--right { + grid-column-end: span 1; + grid-column-start: auto; + grid-row: 2 / 100; } } + @media (min-width: 1036px) { + .l-fluid-breakout .l-fluid-breakout__aside { + padding-right: 1.5rem; } } + @media (min-width: calc(72rem + 14rem)) { + .l-fluid-breakout .l-fluid-breakout__aside { + padding-left: 1.5rem; + padding-right: 0; } } + @media (min-width: 1036px) { + .l-fluid-breakout .l-fluid-breakout__aside--right { + padding-left: 1.5rem; + padding-right: 0; } } + @media (min-width: calc(72rem + 14rem)) { + .l-fluid-breakout .l-fluid-breakout__aside--right { + padding-left: 0; + padding-right: 1.5rem; } } + .l-fluid-breakout .l-fluid-breakout__toolbar { + margin-block-end: 1rem; } + @media (min-width: 1036px) { + .l-fluid-breakout .l-fluid-breakout__toolbar { + margin-right: auto; + max-width: calc(2 * 14rem + 72rem); } + @supports (display: grid) { + .l-fluid-breakout .l-fluid-breakout__toolbar { + display: grid; + grid-column: 1 / -1; + grid-template-columns: minmax(14rem, 1fr) minmax(0, 72rem) minmax(14rem, 1fr); + grid-template-rows: auto; + margin-left: auto; } } } + @media (min-width: calc(72rem + 14rem)) { + .l-fluid-breakout .l-fluid-breakout__toolbar { + margin-left: 1.5rem; + margin-right: 1.5rem; } } + @supports (display: grid) { + .l-fluid-breakout .l-fluid-breakout__toolbar-items { + display: grid; + grid-column: 2 / -1; + grid-template-columns: repeat(2, minmax(0, 1fr)); } + @media (max-width: 620px) { + .l-fluid-breakout .l-fluid-breakout__toolbar-items { + flex: 1 1 auto; + grid-template-columns: repeat(1, minmax(0, 1fr)); + width: 13rem; } } } + .l-fluid-breakout .l-fluid-breakout__toolbar-item { + align-items: center; + display: flex; } + @supports (display: grid) { + .l-fluid-breakout .l-fluid-breakout__toolbar-item { + grid-column-end: span 1; } } + .l-fluid-breakout .l-fluid-breakout__toolbar-item:nth-child(2) { + justify-content: flex-end; } + @media (max-width: 620px) { + .l-fluid-breakout .l-fluid-breakout__toolbar-item:nth-child(2) { + justify-content: flex-start; } } .u-align--center { justify-content: center !important; @@ -6457,6 +7355,12 @@ h1.p-stepped-list__title::before { margin-left: auto !important; text-align: right !important; } +.u-align-text--small-to-default { + padding-top: 0.55rem; } + +.u-align-text--x-small-to-default { + padding-top: 0.75rem; } + @media (prefers-reduced-motion: reduce) { * { animation: none !important; @@ -6503,6 +7407,7 @@ html.u-baseline-grid { .u-embedded-media { height: 0; + margin-bottom: 1.5rem; margin-top: 0.5rem; max-width: 100%; overflow: hidden; @@ -6516,7 +7421,7 @@ html.u-baseline-grid { top: 0; width: 100%; } -@media only screen and (min-width: 772px) { +@media (min-width: 772px) { .u-equal-height { display: flex; } .u-equal-height.row { @@ -6546,66 +7451,6 @@ html.u-baseline-grid { .u-float-left--large { float: left !important; } } -.u-hide { - display: none !important; } - @media screen and (max-width: 771px) { - .u-hide--small { - display: none !important; } } - @media (min-width: 772px) and (max-width: 1035px) { - .u-hide--medium { - display: none !important; } } - @media screen and (min-width: 1036px) { - .u-hide--large { - display: none !important; } } - -td.u-hide, -th.u-hide { - display: table-cell !important; - opacity: 0 !important; - overflow: hidden !important; - padding: 0 !important; - white-space: nowrap !important; - width: 0 !important; } - @media screen and (max-width: 771px) { - td.u-hide--small, - th.u-hide--small { - display: table-cell !important; - opacity: 0 !important; - overflow: hidden !important; - padding: 0 !important; - white-space: nowrap !important; - width: 0 !important; } } - @media (min-width: 772px) and (max-width: 1035px) { - td.u-hide--medium, - th.u-hide--medium { - display: table-cell !important; - opacity: 0 !important; - overflow: hidden !important; - padding: 0 !important; - white-space: nowrap !important; - width: 0 !important; } } - @media screen and (min-width: 1036px) { - td.u-hide--large, - th.u-hide--large { - display: table-cell !important; - opacity: 0 !important; - overflow: hidden !important; - padding: 0 !important; - white-space: nowrap !important; - width: 0 !important; } } - -.p-table-expanding .u-hide { - display: none !important; } - @media screen and (max-width: 771px) { - .p-table-expanding .u-hide--small { - display: none !important; } } - @media (min-width: 772px) and (max-width: 1035px) { - .p-table-expanding .u-hide--medium { - display: none !important; } } - @media screen and (min-width: 1036px) { - .p-table-expanding .u-hide--large { - display: none !important; } } - @media (min-width: 772px) { .u-image-position { overflow: hidden; @@ -6669,22 +7514,6 @@ th.u-hide { .u-no-padding--left { padding-left: 0 !important; } -.u-show { - display: inherit !important; - display: initial !important; } - @media screen and (max-width: 772px) { - .u-show--small { - display: inherit !important; - display: initial !important; } } - @media (min-width: 772px) and (max-width: 1036px) { - .u-show--medium { - display: inherit !important; - display: initial !important; } } - @media screen and (min-width: 1036px) { - .u-show--large { - display: inherit !important; - display: initial !important; } } - .u-truncate { overflow: hidden !important; text-overflow: ellipsis !important; @@ -6719,17 +7548,92 @@ th.u-hide { .u-vertically-center { align-items: center !important; - display: grid; - justify-content: flex-start; } + display: grid !important; } .u-vertically-center > img { align-self: center !important; } +.u-hide { + display: none !important; } + @media (max-width: 771px) { + .u-hide--small { + display: none !important; } } + @media (min-width: 772px) and (max-width: 1035px) { + .u-hide--medium { + display: none !important; } } + @media (min-width: 1036px) { + .u-hide--large { + display: none !important; } } + +td.u-hide, +th.u-hide { + display: table-cell !important; + opacity: 0 !important; + overflow: hidden !important; + padding: 0 !important; + white-space: nowrap !important; + width: 0 !important; } + @media (max-width: 771px) { + td.u-hide--small, + th.u-hide--small { + display: table-cell !important; + opacity: 0 !important; + overflow: hidden !important; + padding: 0 !important; + white-space: nowrap !important; + width: 0 !important; } } + @media (min-width: 772px) and (max-width: 1035px) { + td.u-hide--medium, + th.u-hide--medium { + display: table-cell !important; + opacity: 0 !important; + overflow: hidden !important; + padding: 0 !important; + white-space: nowrap !important; + width: 0 !important; } } + @media (min-width: 1036px) { + td.u-hide--large, + th.u-hide--large { + display: table-cell !important; + opacity: 0 !important; + overflow: hidden !important; + padding: 0 !important; + white-space: nowrap !important; + width: 0 !important; } } + +.p-table-expanding .u-hide { + display: none !important; } + @media (max-width: 771px) { + .p-table-expanding .u-hide--small { + display: none !important; } } + @media (min-width: 772px) and (max-width: 1035px) { + .p-table-expanding .u-hide--medium { + display: none !important; } } + @media (min-width: 1036px) { + .p-table-expanding .u-hide--large { + display: none !important; } } + +.u-show { + display: inherit !important; + display: initial !important; } + @media (max-width: 772px) { + .u-show--small { + display: inherit !important; + display: initial !important; } } + @media (min-width: 772px) and (max-width: 1036px) { + .u-show--medium { + display: inherit !important; + display: initial !important; } } + @media (min-width: 1036px) { + .u-show--large { + display: inherit !important; + display: initial !important; } } + .u-visualise-font-metrics { position: relative; } .u-visualise-font-metrics::before { border-bottom-color: rgba(36, 89, 143, 0.5); border-bottom-style: solid; - border-top-color: rgba(14, 134, 32, 0.5); + border-top-color: rgba(14, 132, 32, 0.5); border-top-style: solid; border-width: 1px; content: '';