From 73d823cf35513b7aa8400bd9d21bc329bf585bd0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ilkka=20P=C3=A4ttikangas?= Date: Tue, 18 Jul 2023 15:40:16 +0300 Subject: [PATCH 1/6] POC: Add spacing props to Button (similar to Block) --- .../__snapshots__/ActionMenu.test.tsx.snap | 6344 +++++++++++++---- src/core/Block/Block.baseStyles.ts | 13 +- src/core/Block/Block.tsx | 79 +- .../Block/__snapshots__/Block.test.tsx.snap | 322 +- src/core/Button/Button.baseStyles.tsx | 3 + src/core/Button/Button.md | 27 +- src/core/Button/Button.tsx | 14 +- .../Button/__snapshots__/Button.test.tsx.snap | 4228 +++++++++-- .../__snapshots__/DateInput.test.tsx.snap | 3220 ++++++--- .../__snapshots__/MultiSelect.test.tsx.snap | 640 ++ .../Modal/__snapshots__/Modal.test.tsx.snap | 640 ++ .../__snapshots__/ModalFooter.test.tsx.snap | 640 ++ .../__snapshots__/Pagination.test.tsx.snap | 640 ++ src/core/theme/utils/spacing.ts | 105 + 14 files changed, 13612 insertions(+), 3303 deletions(-) diff --git a/src/core/ActionMenu/__snapshots__/ActionMenu.test.tsx.snap b/src/core/ActionMenu/__snapshots__/ActionMenu.test.tsx.snap index f5d9675a1..f1ae83be5 100644 --- a/src/core/ActionMenu/__snapshots__/ActionMenu.test.tsx.snap +++ b/src/core/ActionMenu/__snapshots__/ActionMenu.test.tsx.snap @@ -269,353 +269,3805 @@ exports[`Basic ActionMenu should match snapshot 1`] = ` border: 1px solid transparent; } -.c3:focus { - position: relative; - outline: 3px solid transparent; +.c3.fi-margin-xxs { + margin: 5px; } -.c3:focus::after { - content: ''; - position: absolute; - pointer-events: none; - top: -2px; - right: -2px; - bottom: -2px; - left: -2px; - border-radius: 2px; - background-color: transparent; - border: 0px solid hsl(0,0%,100%); - box-sizing: border-box; - box-shadow: 0 0 0 2px hsl(196,77%,44%); - z-index: 9999; +.c3.fi-margin-xs { + margin: 10px; } -.c3:hover { - background: linear-gradient(0deg,hsl(212,63%,45%) 0%,hsl(212,63%,49%) 100%); - outline: 2px solid transparent; +.c3.fi-margin-s { + margin: 15px; } -.c3:active { - background: hsl(212,63%,37%); +.c3.fi-margin-m { + margin: 20px; } -.c3.fi-button--disabled, -.c3[disabled], -.c3:disabled { - text-shadow: 0 1px 1px rgba(33,33,33,0.5); - background: linear-gradient(0deg,hsl(202,7%,67%) 0%,hsl(202,7%,80%) 100%); - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - cursor: not-allowed; +.c3.fi-margin-l { + margin: 25px; } -.c3.fi-button--disabled::after { - border: none; - box-shadow: none; +.c3.fi-margin-xl { + margin: 30px; } -.c3.fi-button--fullwidth { - display: block; - width: 100%; +.c3.fi-margin-xxl { + margin: 40px; } -.c3.fi-button--inverted { - background: none; - background-color: hsl(212,63%,45%); - border: 1px solid hsl(0,0%,100%); - text-shadow: none; +.c3.fi-margin-xxxl { + margin: 60px; } -.c3.fi-button--inverted:hover { - background: linear-gradient(-180deg,hsla(0,0%,100%,0.1) 0%,hsla(0,0%,100%,0) 100%); +.c3.fi-margin-xxxxl { + margin: 80px; } -.c3.fi-button--inverted:active { - background: none; - background-color: hsl(212,63%,45%); +.c3.fi-margin-insetXxs { + margin: 2px; } -.c3.fi-button--inverted.fi-button--disabled, -.c3.fi-button--inverted[disabled], -.c3.fi-button--inverted:disabled { - opacity: 0.41; - background: none; - background-color: none; +.c3.fi-margin-insetXs { + margin: 4px; } -.c3.fi-button--secondary { - color: hsl(212,63%,45%); - background: none; - background-color: hsl(0,0%,100%); - border: 1px solid hsl(212,63%,45%); - text-shadow: none; +.c3.fi-margin-insetS { + margin: 6px; } -.c3.fi-button--secondary:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); +.c3.fi-margin-insetM { + margin: 8px; } -.c3.fi-button--secondary:active { - background: none; - background-color: hsl(202,7%,93%); +.c3.fi-margin-insetL { + margin: 10px; } -.c3.fi-button--secondary.fi-button--disabled, -.c3.fi-button--secondary[disabled], -.c3.fi-button--secondary:disabled { - color: hsl(202,7%,67%); - text-shadow: none; - background: none; - background-color: hsl(212,63%,98%); - border-color: hsl(202,7%,67%); +.c3.fi-margin-insetXl { + margin: 16px; } -.c3.fi-button--secondary-noborder { - color: hsl(212,63%,45%); - background: none; - background-color: hsl(0,0%,100%); - border: 1px solid hsl(212,63%,45%); - text-shadow: none; - border: none; - background-color: transparent; +.c3.fi-margin-insetXxl { + margin: 20px; } -.c3.fi-button--secondary-noborder:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); +.c3.fi-margin-top-xxs { + margin-top: 5px; } -.c3.fi-button--secondary-noborder:active { - background: none; - background-color: hsl(202,7%,93%); +.c3.fi-margin-top-xs { + margin-top: 10px; } -.c3.fi-button--secondary-noborder.fi-button--disabled, -.c3.fi-button--secondary-noborder[disabled], -.c3.fi-button--secondary-noborder:disabled { - color: hsl(202,7%,67%); - text-shadow: none; - background: none; - background-color: hsl(212,63%,98%); - border-color: hsl(202,7%,67%); +.c3.fi-margin-top-s { + margin-top: 15px; } -.c3.fi-button--secondary-light { - color: hsl(212,63%,45%); - color: hsl(212,63%,45%); - background: none; - background-color: hsl(0,0%,100%); - border: 1px solid hsl(212,63%,45%); - text-shadow: none; - background: linear-gradient(0deg,hsl(215,100%,95%),hsl(215,100%,97%)); - border: none; +.c3.fi-margin-top-m { + margin-top: 20px; } -.c3.fi-button--secondary-light:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); +.c3.fi-margin-top-l { + margin-top: 25px; } -.c3.fi-button--secondary-light:active { - background: none; - background-color: hsl(202,7%,93%); +.c3.fi-margin-top-xl { + margin-top: 30px; } -.c3.fi-button--secondary-light.fi-button--disabled, -.c3.fi-button--secondary-light[disabled], -.c3.fi-button--secondary-light:disabled { - color: hsl(202,7%,67%); - text-shadow: none; - background: none; - background-color: hsl(212,63%,98%); - border-color: hsl(202,7%,67%); +.c3.fi-margin-top-xxl { + margin-top: 40px; } -.c3.fi-button--secondary-light:hover { - background: linear-gradient(0deg,hsl(215,100%,97%),hsl(212,63%,98%)); +.c3.fi-margin-top-xxxl { + margin-top: 60px; } -.c3.fi-button--secondary-light:active { - background: linear-gradient(0deg,hsl(202,7%,93%),hsl(202,7%,97%)); +.c3.fi-margin-top-xxxxl { + margin-top: 80px; } -.c3.fi-button--secondary-light.fi-button--disabled, -.c3.fi-button--secondary-light[disabled], -.c3.fi-button--secondary-light:disabled { - color: hsl(202,7%,67%); - background: none; - background-color: hsl(202,7%,97%); +.c3.fi-margin-top-insetXxs { + margin-top: 2px; } -.c3 > .fi-button_icon > .fi-icon { - width: 16px; - height: 16px; - margin-right: 8px; - vertical-align: middle; - -webkit-transform: translateY(-0.1em); - -ms-transform: translateY(-0.1em); - transform: translateY(-0.1em); +.c3.fi-margin-top-insetXs { + margin-top: 4px; } -.c3 > .fi-button_icon--right > .fi-icon { - margin-right: 0; - margin-left: 8px; +.c3.fi-margin-top-insetS { + margin-top: 6px; } -.c3.fi-button--disabled > .fi-button_icon { - cursor: not-allowed; +.c3.fi-margin-top-insetM { + margin-top: 8px; } -.c5 { - vertical-align: baseline; +.c3.fi-margin-top-insetL { + margin-top: 10px; } -.c5.fi-icon { - display: inline-block; +.c3.fi-margin-top-insetXl { + margin-top: 16px; } -.c5 .fi-icon-base-fill { - fill: currentColor; +.c3.fi-margin-top-insetXxl { + margin-top: 20px; } -.c5 .fi-icon-base-stroke { - stroke: currentColor; +.c3.fi-margin-right-xxs { + margin-right: 5px; } -.c5.fi-icon--cursor-pointer { - cursor: pointer; +.c3.fi-margin-right-xs { + margin-right: 10px; } -.c5.fi-icon--cursor-pointer * { - cursor: inherit; +.c3.fi-margin-right-s { + margin-right: 15px; } -.c1.fi-action-menu--full-width { - width: 100%; +.c3.fi-margin-right-m { + margin-right: 20px; } -.c1 .fi-action-menu_button--icon-only { - min-width: 40px; - padding: 10px; +.c3.fi-margin-right-l { + margin-right: 25px; } -.c1 .fi-action-menu_button--icon-only .fi-button_icon--right .fi-icon { - margin-left: 0; +.c3.fi-margin-right-xl { + margin-right: 30px; } -.c8 { - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 400; +.c3.fi-margin-right-xxl { + margin-right: 40px; } -.c8.fi-action-menu-item { - position: relative; - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 400; - -webkit-text-decoration: none; - text-decoration: none; - color: hsl(0,0%,13%); - padding: 10px 20px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - cursor: pointer; - background: inherit; - border: none; - border-radius: 0; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; +.c3.fi-margin-right-xxxl { + margin-right: 60px; } -.c8.fi-action-menu-item:active, -.c8.fi-action-menu-item:focus, -.c8.fi-action-menu-item:hover, -.c8.fi-action-menu-item:visited { - border: none; - outline: none; - color: hsl(0,0%,13%); +.c3.fi-margin-right-xxxxl { + margin-right: 80px; } -.c8.fi-action-menu-item .fi-icon { +.c3.fi-margin-right-insetXxs { + margin-right: 2px; +} + +.c3.fi-margin-right-insetXs { + margin-right: 4px; +} + +.c3.fi-margin-right-insetS { + margin-right: 6px; +} + +.c3.fi-margin-right-insetM { margin-right: 8px; - width: 16px; - height: 16px; - pointer-events: none; } -.c8.fi-action-menu-item--disabled { - cursor: not-allowed; - color: hsl(202,7%,67%); +.c3.fi-margin-right-insetL { + margin-right: 10px; } -.c8.fi-action-menu-item--disabled:active, -.c8.fi-action-menu-item--disabled:focus, -.c8.fi-action-menu-item--disabled:hover, -.c8.fi-action-menu-item--disabled:visited { - color: hsl(202,7%,67%); +.c3.fi-margin-right-insetXl { + margin-right: 16px; } -.c8.fi-action-menu-item--selected { - color: hsl(0,0%,100%); - background: hsl(212,63%,45%); +.c3.fi-margin-right-insetXxl { + margin-right: 20px; } -.c8.fi-action-menu-item--selected:active, -.c8.fi-action-menu-item--selected:focus, -.c8.fi-action-menu-item--selected:hover, -.c8.fi-action-menu-item--selected:visited { - -webkit-text-decoration: none; - text-decoration: none; - color: hsl(0,0%,100%); - cursor: pointer; +.c3.fi-margin-bottom-xxs { + margin-bottom: 5px; } -.c8.fi-action-menu-item--selected:after { - content: ''; +.c3.fi-margin-bottom-xs { + margin-bottom: 10px; } -.c8.fi-action-menu-item--selected.fi-action-menu-item--disabled { - cursor: not-allowed; - color: hsl(202,7%,67%); +.c3.fi-margin-bottom-s { + margin-bottom: 15px; } -.c9.fi-action-menu-divider { - height: 17px; - min-height: 17px; - padding-left: 15px; - padding-right: 15px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; +.c3.fi-margin-bottom-m { + margin-bottom: 20px; +} + +.c3.fi-margin-bottom-l { + margin-bottom: 25px; +} + +.c3.fi-margin-bottom-xl { + margin-bottom: 30px; +} + +.c3.fi-margin-bottom-xxl { + margin-bottom: 40px; +} + +.c3.fi-margin-bottom-xxxl { + margin-bottom: 60px; +} + +.c3.fi-margin-bottom-xxxxl { + margin-bottom: 80px; +} + +.c3.fi-margin-bottom-insetXxs { + margin-bottom: 2px; +} + +.c3.fi-margin-bottom-insetXs { + margin-bottom: 4px; +} + +.c3.fi-margin-bottom-insetS { + margin-bottom: 6px; +} + +.c3.fi-margin-bottom-insetM { + margin-bottom: 8px; +} + +.c3.fi-margin-bottom-insetL { + margin-bottom: 10px; +} + +.c3.fi-margin-bottom-insetXl { + margin-bottom: 16px; +} + +.c3.fi-margin-bottom-insetXxl { + margin-bottom: 20px; +} + +.c3.fi-margin-left-xxs { + margin-left: 5px; +} + +.c3.fi-margin-left-xs { + margin-left: 10px; +} + +.c3.fi-margin-left-s { + margin-left: 15px; +} + +.c3.fi-margin-left-m { + margin-left: 20px; +} + +.c3.fi-margin-left-l { + margin-left: 25px; +} + +.c3.fi-margin-left-xl { + margin-left: 30px; +} + +.c3.fi-margin-left-xxl { + margin-left: 40px; +} + +.c3.fi-margin-left-xxxl { + margin-left: 60px; +} + +.c3.fi-margin-left-xxxxl { + margin-left: 80px; +} + +.c3.fi-margin-left-insetXxs { + margin-left: 2px; +} + +.c3.fi-margin-left-insetXs { + margin-left: 4px; +} + +.c3.fi-margin-left-insetS { + margin-left: 6px; +} + +.c3.fi-margin-left-insetM { + margin-left: 8px; +} + +.c3.fi-margin-left-insetL { + margin-left: 10px; +} + +.c3.fi-margin-left-insetXl { + margin-left: 16px; +} + +.c3.fi-margin-left-insetXxl { + margin-left: 20px; +} + +.c3.fi-padding-xxs { + padding: 5px; +} + +.c3.fi-padding-xs { + padding: 10px; +} + +.c3.fi-padding-s { + padding: 15px; +} + +.c3.fi-padding-m { + padding: 20px; +} + +.c3.fi-padding-l { + padding: 25px; +} + +.c3.fi-padding-xl { + padding: 30px; +} + +.c3.fi-padding-xxl { + padding: 40px; +} + +.c3.fi-padding-xxxl { + padding: 60px; +} + +.c3.fi-padding-xxxxl { + padding: 80px; +} + +.c3.fi-padding-insetXxs { + padding: 2px; +} + +.c3.fi-padding-insetXs { + padding: 4px; +} + +.c3.fi-padding-insetS { + padding: 6px; +} + +.c3.fi-padding-insetM { + padding: 8px; +} + +.c3.fi-padding-insetL { + padding: 10px; +} + +.c3.fi-padding-insetXl { + padding: 16px; +} + +.c3.fi-padding-insetXxl { + padding: 20px; +} + +.c3.fi-padding-top-xxs { + padding-top: 5px; +} + +.c3.fi-padding-top-xs { + padding-top: 10px; +} + +.c3.fi-padding-top-s { + padding-top: 15px; +} + +.c3.fi-padding-top-m { + padding-top: 20px; +} + +.c3.fi-padding-top-l { + padding-top: 25px; +} + +.c3.fi-padding-top-xl { + padding-top: 30px; +} + +.c3.fi-padding-top-xxl { + padding-top: 40px; +} + +.c3.fi-padding-top-xxxl { + padding-top: 60px; +} + +.c3.fi-padding-top-xxxxl { + padding-top: 80px; +} + +.c3.fi-padding-top-insetXxs { + padding-top: 2px; +} + +.c3.fi-padding-top-insetXs { + padding-top: 4px; +} + +.c3.fi-padding-top-insetS { + padding-top: 6px; +} + +.c3.fi-padding-top-insetM { + padding-top: 8px; +} + +.c3.fi-padding-top-insetL { + padding-top: 10px; +} + +.c3.fi-padding-top-insetXl { + padding-top: 16px; +} + +.c3.fi-padding-top-insetXxl { + padding-top: 20px; +} + +.c3.fi-padding-right-xxs { + padding-right: 5px; +} + +.c3.fi-padding-right-xs { + padding-right: 10px; +} + +.c3.fi-padding-right-s { + padding-right: 15px; +} + +.c3.fi-padding-right-m { + padding-right: 20px; +} + +.c3.fi-padding-right-l { + padding-right: 25px; +} + +.c3.fi-padding-right-xl { + padding-right: 30px; +} + +.c3.fi-padding-right-xxl { + padding-right: 40px; +} + +.c3.fi-padding-right-xxxl { + padding-right: 60px; +} + +.c3.fi-padding-right-xxxxl { + padding-right: 80px; +} + +.c3.fi-padding-right-insetXxs { + padding-right: 2px; +} + +.c3.fi-padding-right-insetXs { + padding-right: 4px; +} + +.c3.fi-padding-right-insetS { + padding-right: 6px; +} + +.c3.fi-padding-right-insetM { + padding-right: 8px; +} + +.c3.fi-padding-right-insetL { + padding-right: 10px; +} + +.c3.fi-padding-right-insetXl { + padding-right: 16px; +} + +.c3.fi-padding-right-insetXxl { + padding-right: 20px; +} + +.c3.fi-padding-bottom-xxs { + padding-bottom: 5px; +} + +.c3.fi-padding-bottom-xs { + padding-bottom: 10px; +} + +.c3.fi-padding-bottom-s { + padding-bottom: 15px; +} + +.c3.fi-padding-bottom-m { + padding-bottom: 20px; +} + +.c3.fi-padding-bottom-l { + padding-bottom: 25px; +} + +.c3.fi-padding-bottom-xl { + padding-bottom: 30px; +} + +.c3.fi-padding-bottom-xxl { + padding-bottom: 40px; +} + +.c3.fi-padding-bottom-xxxl { + padding-bottom: 60px; +} + +.c3.fi-padding-bottom-xxxxl { + padding-bottom: 80px; +} + +.c3.fi-padding-bottom-insetXxs { + padding-bottom: 2px; +} + +.c3.fi-padding-bottom-insetXs { + padding-bottom: 4px; +} + +.c3.fi-padding-bottom-insetS { + padding-bottom: 6px; +} + +.c3.fi-padding-bottom-insetM { + padding-bottom: 8px; +} + +.c3.fi-padding-bottom-insetL { + padding-bottom: 10px; +} + +.c3.fi-padding-bottom-insetXl { + padding-bottom: 16px; +} + +.c3.fi-padding-bottom-insetXxl { + padding-bottom: 20px; +} + +.c3.fi-padding-left-xxs { + padding-left: 5px; +} + +.c3.fi-padding-left-xs { + padding-left: 10px; +} + +.c3.fi-padding-left-s { + padding-left: 15px; +} + +.c3.fi-padding-left-m { + padding-left: 20px; +} + +.c3.fi-padding-left-l { + padding-left: 25px; +} + +.c3.fi-padding-left-xl { + padding-left: 30px; +} + +.c3.fi-padding-left-xxl { + padding-left: 40px; +} + +.c3.fi-padding-left-xxxl { + padding-left: 60px; +} + +.c3.fi-padding-left-xxxxl { + padding-left: 80px; +} + +.c3.fi-padding-left-insetXxs { + padding-left: 2px; +} + +.c3.fi-padding-left-insetXs { + padding-left: 4px; +} + +.c3.fi-padding-left-insetS { + padding-left: 6px; +} + +.c3.fi-padding-left-insetM { + padding-left: 8px; +} + +.c3.fi-padding-left-insetL { + padding-left: 10px; +} + +.c3.fi-padding-left-insetXl { + padding-left: 16px; +} + +.c3.fi-padding-left-insetXxl { + padding-left: 20px; +} + +.c3:focus { + position: relative; + outline: 3px solid transparent; +} + +.c3:focus::after { + content: ''; + position: absolute; + pointer-events: none; + top: -2px; + right: -2px; + bottom: -2px; + left: -2px; + border-radius: 2px; + background-color: transparent; + border: 0px solid hsl(0,0%,100%); + box-sizing: border-box; + box-shadow: 0 0 0 2px hsl(196,77%,44%); + z-index: 9999; +} + +.c3:hover { + background: linear-gradient(0deg,hsl(212,63%,45%) 0%,hsl(212,63%,49%) 100%); + outline: 2px solid transparent; +} + +.c3:active { + background: hsl(212,63%,37%); +} + +.c3.fi-button--disabled, +.c3[disabled], +.c3:disabled { + text-shadow: 0 1px 1px rgba(33,33,33,0.5); + background: linear-gradient(0deg,hsl(202,7%,67%) 0%,hsl(202,7%,80%) 100%); + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: not-allowed; +} + +.c3.fi-button--disabled::after { + border: none; + box-shadow: none; +} + +.c3.fi-button--fullwidth { + display: block; + width: 100%; +} + +.c3.fi-button--inverted { + background: none; + background-color: hsl(212,63%,45%); + border: 1px solid hsl(0,0%,100%); + text-shadow: none; +} + +.c3.fi-button--inverted:hover { + background: linear-gradient(-180deg,hsla(0,0%,100%,0.1) 0%,hsla(0,0%,100%,0) 100%); +} + +.c3.fi-button--inverted:active { + background: none; + background-color: hsl(212,63%,45%); +} + +.c3.fi-button--inverted.fi-button--disabled, +.c3.fi-button--inverted[disabled], +.c3.fi-button--inverted:disabled { + opacity: 0.41; + background: none; + background-color: none; +} + +.c3.fi-button--secondary { + color: hsl(212,63%,45%); + background: none; + background-color: hsl(0,0%,100%); + border: 1px solid hsl(212,63%,45%); + text-shadow: none; +} + +.c3.fi-button--secondary:hover { + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); +} + +.c3.fi-button--secondary:active { + background: none; + background-color: hsl(202,7%,93%); +} + +.c3.fi-button--secondary.fi-button--disabled, +.c3.fi-button--secondary[disabled], +.c3.fi-button--secondary:disabled { + color: hsl(202,7%,67%); + text-shadow: none; + background: none; + background-color: hsl(212,63%,98%); + border-color: hsl(202,7%,67%); +} + +.c3.fi-button--secondary-noborder { + color: hsl(212,63%,45%); + background: none; + background-color: hsl(0,0%,100%); + border: 1px solid hsl(212,63%,45%); + text-shadow: none; + border: none; + background-color: transparent; +} + +.c3.fi-button--secondary-noborder:hover { + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); +} + +.c3.fi-button--secondary-noborder:active { + background: none; + background-color: hsl(202,7%,93%); +} + +.c3.fi-button--secondary-noborder.fi-button--disabled, +.c3.fi-button--secondary-noborder[disabled], +.c3.fi-button--secondary-noborder:disabled { + color: hsl(202,7%,67%); + text-shadow: none; + background: none; + background-color: hsl(212,63%,98%); + border-color: hsl(202,7%,67%); +} + +.c3.fi-button--secondary-light { + color: hsl(212,63%,45%); + color: hsl(212,63%,45%); + background: none; + background-color: hsl(0,0%,100%); + border: 1px solid hsl(212,63%,45%); + text-shadow: none; + background: linear-gradient(0deg,hsl(215,100%,95%),hsl(215,100%,97%)); + border: none; +} + +.c3.fi-button--secondary-light:hover { + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); +} + +.c3.fi-button--secondary-light:active { + background: none; + background-color: hsl(202,7%,93%); +} + +.c3.fi-button--secondary-light.fi-button--disabled, +.c3.fi-button--secondary-light[disabled], +.c3.fi-button--secondary-light:disabled { + color: hsl(202,7%,67%); + text-shadow: none; + background: none; + background-color: hsl(212,63%,98%); + border-color: hsl(202,7%,67%); +} + +.c3.fi-button--secondary-light:hover { + background: linear-gradient(0deg,hsl(215,100%,97%),hsl(212,63%,98%)); +} + +.c3.fi-button--secondary-light:active { + background: linear-gradient(0deg,hsl(202,7%,93%),hsl(202,7%,97%)); +} + +.c3.fi-button--secondary-light.fi-button--disabled, +.c3.fi-button--secondary-light[disabled], +.c3.fi-button--secondary-light:disabled { + color: hsl(202,7%,67%); + background: none; + background-color: hsl(202,7%,97%); +} + +.c3 > .fi-button_icon > .fi-icon { + width: 16px; + height: 16px; + margin-right: 8px; + vertical-align: middle; + -webkit-transform: translateY(-0.1em); + -ms-transform: translateY(-0.1em); + transform: translateY(-0.1em); +} + +.c3 > .fi-button_icon--right > .fi-icon { + margin-right: 0; + margin-left: 8px; +} + +.c3.fi-button--disabled > .fi-button_icon { + cursor: not-allowed; +} + +.c5 { + vertical-align: baseline; +} + +.c5.fi-icon { + display: inline-block; +} + +.c5 .fi-icon-base-fill { + fill: currentColor; +} + +.c5 .fi-icon-base-stroke { + stroke: currentColor; +} + +.c5.fi-icon--cursor-pointer { + cursor: pointer; +} + +.c5.fi-icon--cursor-pointer * { + cursor: inherit; +} + +.c1.fi-action-menu--full-width { + width: 100%; +} + +.c1 .fi-action-menu_button--icon-only { + min-width: 40px; + padding: 10px; +} + +.c1 .fi-action-menu_button--icon-only .fi-button_icon--right .fi-icon { + margin-left: 0; +} + +.c8 { + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 400; +} + +.c8.fi-action-menu-item { + position: relative; + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 400; + -webkit-text-decoration: none; + text-decoration: none; + color: hsl(0,0%,13%); + padding: 10px 20px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + cursor: pointer; + background: inherit; + border: none; + border-radius: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c8.fi-action-menu-item:active, +.c8.fi-action-menu-item:focus, +.c8.fi-action-menu-item:hover, +.c8.fi-action-menu-item:visited { + border: none; + outline: none; + color: hsl(0,0%,13%); +} + +.c8.fi-action-menu-item .fi-icon { + margin-right: 8px; + width: 16px; + height: 16px; + pointer-events: none; +} + +.c8.fi-action-menu-item--disabled { + cursor: not-allowed; + color: hsl(202,7%,67%); +} + +.c8.fi-action-menu-item--disabled:active, +.c8.fi-action-menu-item--disabled:focus, +.c8.fi-action-menu-item--disabled:hover, +.c8.fi-action-menu-item--disabled:visited { + color: hsl(202,7%,67%); +} + +.c8.fi-action-menu-item--selected { + color: hsl(0,0%,100%); + background: hsl(212,63%,45%); +} + +.c8.fi-action-menu-item--selected:active, +.c8.fi-action-menu-item--selected:focus, +.c8.fi-action-menu-item--selected:hover, +.c8.fi-action-menu-item--selected:visited { + -webkit-text-decoration: none; + text-decoration: none; + color: hsl(0,0%,100%); + cursor: pointer; +} + +.c8.fi-action-menu-item--selected:after { + content: ''; +} + +.c8.fi-action-menu-item--selected.fi-action-menu-item--disabled { + cursor: not-allowed; + color: hsl(202,7%,67%); +} + +.c9.fi-action-menu-divider { + height: 17px; + min-height: 17px; + padding-left: 15px; + padding-right: 15px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} + +.c9.fi-action-menu-divider .fi-action-menu-divider_line { + height: 1px; + width: 100%; + background-color: hsl(202,7%,80%); +} + +@media (forced-colors:active) { + .c8.fi-action-menu-item--disabled { + color: GrayText; + } +} + +@media (forced-colors:active) { + .c8.fi-action-menu-item--selected:after { + position: absolute; + left: 1px; + right: 1px; + top: 1px; + bottom: 1px; + border: solid 3px Highlight; + } +} + +@media (forced-colors:active) { + .c8.fi-action-menu-item--selected.fi-action-menu-item--disabled { + color: GrayText; + } +} + +@media (forced-colors:active) { + .c9.fi-action-menu-divider .fi-action-menu-divider_line { + background-color: Highlight; + } +} + + +
+
+ +
+ +
+ +`; + +exports[`Disabled ActionMenu should match snapshot 1`] = ` +.c2 { + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; + font: 100% inherit; + line-height: 1; + text-align: left; + -webkit-text-decoration: none; + text-decoration: none; + vertical-align: baseline; + color: inherit; + background: none; + cursor: inherit; + display: inline-block; + max-width: 100%; + cursor: pointer; +} + +.c2:-moz-focusring { + outline: 1px dotted ButtonText; +} + +.c2::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c2::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; +} + +.c2::-webkit-inner-spin-button { + height: auto; +} + +.c2::-webkit-outer-spin-button { + height: auto; +} + +.c2::before, +.c2::after { + box-sizing: border-box; +} + +.c0 { + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; + font: 100% inherit; + line-height: 1; + text-align: left; + -webkit-text-decoration: none; + text-decoration: none; + vertical-align: baseline; + color: inherit; + background: none; + cursor: inherit; + display: block; + max-width: 100%; + word-wrap: normal; + word-break: normal; + white-space: normal; +} + +.c0::before, +.c0::after { + box-sizing: border-box; +} + +.c6 { + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; + font: 100% inherit; + line-height: 1; + text-align: left; + -webkit-text-decoration: none; + text-decoration: none; + vertical-align: baseline; + color: inherit; + background: none; + cursor: inherit; + display: block; + max-width: 100%; + word-wrap: normal; + word-break: normal; + white-space: normal; +} + +.c6::before, +.c6::after { + box-sizing: border-box; +} + +.c4 { + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; + font: 100% inherit; + line-height: 1; + text-align: left; + -webkit-text-decoration: none; + text-decoration: none; + vertical-align: baseline; + color: inherit; + background: none; + cursor: inherit; + display: inline; + max-width: 100%; + word-wrap: normal; + word-break: normal; + white-space: normal; +} + +.c4::before, +.c4::after { + box-sizing: border-box; +} + +.c7 { + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 400; +} + +.c7.fi-action-menu-popover { + background-color: hsl(0,0%,100%); + box-shadow: 0px 4px 8px 0px hsla(0,0%,13%,0.14); + border: 1px solid hsl(0,0%,58%); + border-radius: 2px; + padding-top: 8px; + padding-bottom: 8px; + z-index: 888; +} + +.c7.fi-action-menu-popover--hidden { + visibility: hidden; +} + +.c7 .fi-action-menu-popover_list { + margin: 0; + padding-left: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + list-style-type: none; + overflow-y: auto; + max-height: 265px; +} + +.c7 .fi-action-menu-popover_list:focus { + outline: none; +} + +.c7 .fi-action-menu-popover_popper-arrow::before, +.c7 .fi-action-menu-popover_popper-arrow::after { + content: ''; + position: absolute; + left: -9px; + height: 0; + width: 0; + border: solid transparent; + pointer-events: none; +} + +.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='bottom-end'] { + bottom: 100%; +} + +.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='bottom-end']::before { + border-bottom-color: hsl(0,0%,58%); + border-width: 9px; + margin-right: -9px; + bottom: 100%; +} + +.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='bottom-end']::after { + border-bottom-color: hsl(0,0%,100%); + border-width: 8px; + margin-right: -9px; + left: -8px; + bottom: 100%; +} + +.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='top-end'] { + top: 100%; +} + +.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='top-end']::before { + border-top-color: hsl(0,0%,58%); + border-width: 9px; + margin-right: -9px; +} + +.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='top-end']::after { + border-top-color: hsl(0,0%,100%); + border-width: 8px; + margin-right: -9px; + left: -8px; +} + +.c3 { + color: hsl(0,0%,13%); + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 600; + font-size: 14px; + line-height: 20px; + padding: 10px 20px; + min-height: 40px; + color: hsl(0,0%,100%); + background: linear-gradient(0deg,hsl(212,63%,37%) 0%,hsl(212,63%,45%) 100%); + border-radius: 2px; + text-align: center; + text-shadow: 0 1px 1px hsla(214,100%,24%,0.5); + cursor: pointer; + border: 1px solid transparent; +} + +.c3.fi-margin-xxs { + margin: 5px; +} + +.c3.fi-margin-xs { + margin: 10px; +} + +.c3.fi-margin-s { + margin: 15px; +} + +.c3.fi-margin-m { + margin: 20px; +} + +.c3.fi-margin-l { + margin: 25px; +} + +.c3.fi-margin-xl { + margin: 30px; +} + +.c3.fi-margin-xxl { + margin: 40px; +} + +.c3.fi-margin-xxxl { + margin: 60px; +} + +.c3.fi-margin-xxxxl { + margin: 80px; +} + +.c3.fi-margin-insetXxs { + margin: 2px; +} + +.c3.fi-margin-insetXs { + margin: 4px; +} + +.c3.fi-margin-insetS { + margin: 6px; +} + +.c3.fi-margin-insetM { + margin: 8px; +} + +.c3.fi-margin-insetL { + margin: 10px; +} + +.c3.fi-margin-insetXl { + margin: 16px; +} + +.c3.fi-margin-insetXxl { + margin: 20px; +} + +.c3.fi-margin-top-xxs { + margin-top: 5px; +} + +.c3.fi-margin-top-xs { + margin-top: 10px; +} + +.c3.fi-margin-top-s { + margin-top: 15px; +} + +.c3.fi-margin-top-m { + margin-top: 20px; +} + +.c3.fi-margin-top-l { + margin-top: 25px; +} + +.c3.fi-margin-top-xl { + margin-top: 30px; +} + +.c3.fi-margin-top-xxl { + margin-top: 40px; +} + +.c3.fi-margin-top-xxxl { + margin-top: 60px; +} + +.c3.fi-margin-top-xxxxl { + margin-top: 80px; +} + +.c3.fi-margin-top-insetXxs { + margin-top: 2px; +} + +.c3.fi-margin-top-insetXs { + margin-top: 4px; +} + +.c3.fi-margin-top-insetS { + margin-top: 6px; +} + +.c3.fi-margin-top-insetM { + margin-top: 8px; +} + +.c3.fi-margin-top-insetL { + margin-top: 10px; +} + +.c3.fi-margin-top-insetXl { + margin-top: 16px; +} + +.c3.fi-margin-top-insetXxl { + margin-top: 20px; +} + +.c3.fi-margin-right-xxs { + margin-right: 5px; +} + +.c3.fi-margin-right-xs { + margin-right: 10px; +} + +.c3.fi-margin-right-s { + margin-right: 15px; +} + +.c3.fi-margin-right-m { + margin-right: 20px; +} + +.c3.fi-margin-right-l { + margin-right: 25px; +} + +.c3.fi-margin-right-xl { + margin-right: 30px; +} + +.c3.fi-margin-right-xxl { + margin-right: 40px; +} + +.c3.fi-margin-right-xxxl { + margin-right: 60px; +} + +.c3.fi-margin-right-xxxxl { + margin-right: 80px; +} + +.c3.fi-margin-right-insetXxs { + margin-right: 2px; +} + +.c3.fi-margin-right-insetXs { + margin-right: 4px; +} + +.c3.fi-margin-right-insetS { + margin-right: 6px; +} + +.c3.fi-margin-right-insetM { + margin-right: 8px; +} + +.c3.fi-margin-right-insetL { + margin-right: 10px; +} + +.c3.fi-margin-right-insetXl { + margin-right: 16px; +} + +.c3.fi-margin-right-insetXxl { + margin-right: 20px; +} + +.c3.fi-margin-bottom-xxs { + margin-bottom: 5px; +} + +.c3.fi-margin-bottom-xs { + margin-bottom: 10px; +} + +.c3.fi-margin-bottom-s { + margin-bottom: 15px; +} + +.c3.fi-margin-bottom-m { + margin-bottom: 20px; +} + +.c3.fi-margin-bottom-l { + margin-bottom: 25px; +} + +.c3.fi-margin-bottom-xl { + margin-bottom: 30px; +} + +.c3.fi-margin-bottom-xxl { + margin-bottom: 40px; +} + +.c3.fi-margin-bottom-xxxl { + margin-bottom: 60px; +} + +.c3.fi-margin-bottom-xxxxl { + margin-bottom: 80px; +} + +.c3.fi-margin-bottom-insetXxs { + margin-bottom: 2px; +} + +.c3.fi-margin-bottom-insetXs { + margin-bottom: 4px; +} + +.c3.fi-margin-bottom-insetS { + margin-bottom: 6px; +} + +.c3.fi-margin-bottom-insetM { + margin-bottom: 8px; +} + +.c3.fi-margin-bottom-insetL { + margin-bottom: 10px; +} + +.c3.fi-margin-bottom-insetXl { + margin-bottom: 16px; +} + +.c3.fi-margin-bottom-insetXxl { + margin-bottom: 20px; +} + +.c3.fi-margin-left-xxs { + margin-left: 5px; +} + +.c3.fi-margin-left-xs { + margin-left: 10px; +} + +.c3.fi-margin-left-s { + margin-left: 15px; +} + +.c3.fi-margin-left-m { + margin-left: 20px; +} + +.c3.fi-margin-left-l { + margin-left: 25px; +} + +.c3.fi-margin-left-xl { + margin-left: 30px; +} + +.c3.fi-margin-left-xxl { + margin-left: 40px; +} + +.c3.fi-margin-left-xxxl { + margin-left: 60px; +} + +.c3.fi-margin-left-xxxxl { + margin-left: 80px; +} + +.c3.fi-margin-left-insetXxs { + margin-left: 2px; +} + +.c3.fi-margin-left-insetXs { + margin-left: 4px; +} + +.c3.fi-margin-left-insetS { + margin-left: 6px; +} + +.c3.fi-margin-left-insetM { + margin-left: 8px; +} + +.c3.fi-margin-left-insetL { + margin-left: 10px; +} + +.c3.fi-margin-left-insetXl { + margin-left: 16px; +} + +.c3.fi-margin-left-insetXxl { + margin-left: 20px; +} + +.c3.fi-padding-xxs { + padding: 5px; +} + +.c3.fi-padding-xs { + padding: 10px; +} + +.c3.fi-padding-s { + padding: 15px; +} + +.c3.fi-padding-m { + padding: 20px; +} + +.c3.fi-padding-l { + padding: 25px; +} + +.c3.fi-padding-xl { + padding: 30px; +} + +.c3.fi-padding-xxl { + padding: 40px; +} + +.c3.fi-padding-xxxl { + padding: 60px; +} + +.c3.fi-padding-xxxxl { + padding: 80px; +} + +.c3.fi-padding-insetXxs { + padding: 2px; +} + +.c3.fi-padding-insetXs { + padding: 4px; +} + +.c3.fi-padding-insetS { + padding: 6px; +} + +.c3.fi-padding-insetM { + padding: 8px; +} + +.c3.fi-padding-insetL { + padding: 10px; +} + +.c3.fi-padding-insetXl { + padding: 16px; +} + +.c3.fi-padding-insetXxl { + padding: 20px; +} + +.c3.fi-padding-top-xxs { + padding-top: 5px; +} + +.c3.fi-padding-top-xs { + padding-top: 10px; +} + +.c3.fi-padding-top-s { + padding-top: 15px; +} + +.c3.fi-padding-top-m { + padding-top: 20px; +} + +.c3.fi-padding-top-l { + padding-top: 25px; +} + +.c3.fi-padding-top-xl { + padding-top: 30px; +} + +.c3.fi-padding-top-xxl { + padding-top: 40px; +} + +.c3.fi-padding-top-xxxl { + padding-top: 60px; +} + +.c3.fi-padding-top-xxxxl { + padding-top: 80px; +} + +.c3.fi-padding-top-insetXxs { + padding-top: 2px; +} + +.c3.fi-padding-top-insetXs { + padding-top: 4px; +} + +.c3.fi-padding-top-insetS { + padding-top: 6px; +} + +.c3.fi-padding-top-insetM { + padding-top: 8px; +} + +.c3.fi-padding-top-insetL { + padding-top: 10px; +} + +.c3.fi-padding-top-insetXl { + padding-top: 16px; +} + +.c3.fi-padding-top-insetXxl { + padding-top: 20px; +} + +.c3.fi-padding-right-xxs { + padding-right: 5px; +} + +.c3.fi-padding-right-xs { + padding-right: 10px; +} + +.c3.fi-padding-right-s { + padding-right: 15px; +} + +.c3.fi-padding-right-m { + padding-right: 20px; +} + +.c3.fi-padding-right-l { + padding-right: 25px; +} + +.c3.fi-padding-right-xl { + padding-right: 30px; +} + +.c3.fi-padding-right-xxl { + padding-right: 40px; +} + +.c3.fi-padding-right-xxxl { + padding-right: 60px; +} + +.c3.fi-padding-right-xxxxl { + padding-right: 80px; +} + +.c3.fi-padding-right-insetXxs { + padding-right: 2px; +} + +.c3.fi-padding-right-insetXs { + padding-right: 4px; +} + +.c3.fi-padding-right-insetS { + padding-right: 6px; +} + +.c3.fi-padding-right-insetM { + padding-right: 8px; +} + +.c3.fi-padding-right-insetL { + padding-right: 10px; +} + +.c3.fi-padding-right-insetXl { + padding-right: 16px; +} + +.c3.fi-padding-right-insetXxl { + padding-right: 20px; +} + +.c3.fi-padding-bottom-xxs { + padding-bottom: 5px; +} + +.c3.fi-padding-bottom-xs { + padding-bottom: 10px; +} + +.c3.fi-padding-bottom-s { + padding-bottom: 15px; +} + +.c3.fi-padding-bottom-m { + padding-bottom: 20px; +} + +.c3.fi-padding-bottom-l { + padding-bottom: 25px; +} + +.c3.fi-padding-bottom-xl { + padding-bottom: 30px; +} + +.c3.fi-padding-bottom-xxl { + padding-bottom: 40px; +} + +.c3.fi-padding-bottom-xxxl { + padding-bottom: 60px; +} + +.c3.fi-padding-bottom-xxxxl { + padding-bottom: 80px; +} + +.c3.fi-padding-bottom-insetXxs { + padding-bottom: 2px; +} + +.c3.fi-padding-bottom-insetXs { + padding-bottom: 4px; +} + +.c3.fi-padding-bottom-insetS { + padding-bottom: 6px; +} + +.c3.fi-padding-bottom-insetM { + padding-bottom: 8px; +} + +.c3.fi-padding-bottom-insetL { + padding-bottom: 10px; +} + +.c3.fi-padding-bottom-insetXl { + padding-bottom: 16px; +} + +.c3.fi-padding-bottom-insetXxl { + padding-bottom: 20px; +} + +.c3.fi-padding-left-xxs { + padding-left: 5px; +} + +.c3.fi-padding-left-xs { + padding-left: 10px; +} + +.c3.fi-padding-left-s { + padding-left: 15px; +} + +.c3.fi-padding-left-m { + padding-left: 20px; +} + +.c3.fi-padding-left-l { + padding-left: 25px; +} + +.c3.fi-padding-left-xl { + padding-left: 30px; +} + +.c3.fi-padding-left-xxl { + padding-left: 40px; +} + +.c3.fi-padding-left-xxxl { + padding-left: 60px; +} + +.c3.fi-padding-left-xxxxl { + padding-left: 80px; +} + +.c3.fi-padding-left-insetXxs { + padding-left: 2px; +} + +.c3.fi-padding-left-insetXs { + padding-left: 4px; +} + +.c3.fi-padding-left-insetS { + padding-left: 6px; +} + +.c3.fi-padding-left-insetM { + padding-left: 8px; +} + +.c3.fi-padding-left-insetL { + padding-left: 10px; +} + +.c3.fi-padding-left-insetXl { + padding-left: 16px; +} + +.c3.fi-padding-left-insetXxl { + padding-left: 20px; +} + +.c3:focus { + position: relative; + outline: 3px solid transparent; +} + +.c3:focus::after { + content: ''; + position: absolute; + pointer-events: none; + top: -2px; + right: -2px; + bottom: -2px; + left: -2px; + border-radius: 2px; + background-color: transparent; + border: 0px solid hsl(0,0%,100%); + box-sizing: border-box; + box-shadow: 0 0 0 2px hsl(196,77%,44%); + z-index: 9999; +} + +.c3:hover { + background: linear-gradient(0deg,hsl(212,63%,45%) 0%,hsl(212,63%,49%) 100%); + outline: 2px solid transparent; +} + +.c3:active { + background: hsl(212,63%,37%); +} + +.c3.fi-button--disabled, +.c3[disabled], +.c3:disabled { + text-shadow: 0 1px 1px rgba(33,33,33,0.5); + background: linear-gradient(0deg,hsl(202,7%,67%) 0%,hsl(202,7%,80%) 100%); + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: not-allowed; +} + +.c3.fi-button--disabled::after { + border: none; + box-shadow: none; +} + +.c3.fi-button--fullwidth { + display: block; + width: 100%; +} + +.c3.fi-button--inverted { + background: none; + background-color: hsl(212,63%,45%); + border: 1px solid hsl(0,0%,100%); + text-shadow: none; +} + +.c3.fi-button--inverted:hover { + background: linear-gradient(-180deg,hsla(0,0%,100%,0.1) 0%,hsla(0,0%,100%,0) 100%); +} + +.c3.fi-button--inverted:active { + background: none; + background-color: hsl(212,63%,45%); +} + +.c3.fi-button--inverted.fi-button--disabled, +.c3.fi-button--inverted[disabled], +.c3.fi-button--inverted:disabled { + opacity: 0.41; + background: none; + background-color: none; +} + +.c3.fi-button--secondary { + color: hsl(212,63%,45%); + background: none; + background-color: hsl(0,0%,100%); + border: 1px solid hsl(212,63%,45%); + text-shadow: none; +} + +.c3.fi-button--secondary:hover { + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); +} + +.c3.fi-button--secondary:active { + background: none; + background-color: hsl(202,7%,93%); +} + +.c3.fi-button--secondary.fi-button--disabled, +.c3.fi-button--secondary[disabled], +.c3.fi-button--secondary:disabled { + color: hsl(202,7%,67%); + text-shadow: none; + background: none; + background-color: hsl(212,63%,98%); + border-color: hsl(202,7%,67%); +} + +.c3.fi-button--secondary-noborder { + color: hsl(212,63%,45%); + background: none; + background-color: hsl(0,0%,100%); + border: 1px solid hsl(212,63%,45%); + text-shadow: none; + border: none; + background-color: transparent; +} + +.c3.fi-button--secondary-noborder:hover { + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); +} + +.c3.fi-button--secondary-noborder:active { + background: none; + background-color: hsl(202,7%,93%); +} + +.c3.fi-button--secondary-noborder.fi-button--disabled, +.c3.fi-button--secondary-noborder[disabled], +.c3.fi-button--secondary-noborder:disabled { + color: hsl(202,7%,67%); + text-shadow: none; + background: none; + background-color: hsl(212,63%,98%); + border-color: hsl(202,7%,67%); +} + +.c3.fi-button--secondary-light { + color: hsl(212,63%,45%); + color: hsl(212,63%,45%); + background: none; + background-color: hsl(0,0%,100%); + border: 1px solid hsl(212,63%,45%); + text-shadow: none; + background: linear-gradient(0deg,hsl(215,100%,95%),hsl(215,100%,97%)); + border: none; +} + +.c3.fi-button--secondary-light:hover { + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); +} + +.c3.fi-button--secondary-light:active { + background: none; + background-color: hsl(202,7%,93%); +} + +.c3.fi-button--secondary-light.fi-button--disabled, +.c3.fi-button--secondary-light[disabled], +.c3.fi-button--secondary-light:disabled { + color: hsl(202,7%,67%); + text-shadow: none; + background: none; + background-color: hsl(212,63%,98%); + border-color: hsl(202,7%,67%); +} + +.c3.fi-button--secondary-light:hover { + background: linear-gradient(0deg,hsl(215,100%,97%),hsl(212,63%,98%)); +} + +.c3.fi-button--secondary-light:active { + background: linear-gradient(0deg,hsl(202,7%,93%),hsl(202,7%,97%)); +} + +.c3.fi-button--secondary-light.fi-button--disabled, +.c3.fi-button--secondary-light[disabled], +.c3.fi-button--secondary-light:disabled { + color: hsl(202,7%,67%); + background: none; + background-color: hsl(202,7%,97%); +} + +.c3 > .fi-button_icon > .fi-icon { + width: 16px; + height: 16px; + margin-right: 8px; + vertical-align: middle; + -webkit-transform: translateY(-0.1em); + -ms-transform: translateY(-0.1em); + transform: translateY(-0.1em); +} + +.c3 > .fi-button_icon--right > .fi-icon { + margin-right: 0; + margin-left: 8px; +} + +.c3.fi-button--disabled > .fi-button_icon { + cursor: not-allowed; +} + +.c5 { + vertical-align: baseline; +} + +.c5.fi-icon { + display: inline-block; +} + +.c5 .fi-icon-base-fill { + fill: currentColor; +} + +.c5 .fi-icon-base-stroke { + stroke: currentColor; +} + +.c5.fi-icon--cursor-pointer { + cursor: pointer; +} + +.c5.fi-icon--cursor-pointer * { + cursor: inherit; +} + +.c1.fi-action-menu--full-width { + width: 100%; +} + +.c1 .fi-action-menu_button--icon-only { + min-width: 40px; + padding: 10px; +} + +.c1 .fi-action-menu_button--icon-only .fi-button_icon--right .fi-icon { + margin-left: 0; +} + +.c8 { + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 400; +} + +.c8.fi-action-menu-item { + position: relative; + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 400; + -webkit-text-decoration: none; + text-decoration: none; + color: hsl(0,0%,13%); + padding: 10px 20px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + cursor: pointer; + background: inherit; + border: none; + border-radius: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c8.fi-action-menu-item:active, +.c8.fi-action-menu-item:focus, +.c8.fi-action-menu-item:hover, +.c8.fi-action-menu-item:visited { + border: none; + outline: none; + color: hsl(0,0%,13%); +} + +.c8.fi-action-menu-item .fi-icon { + margin-right: 8px; + width: 16px; + height: 16px; + pointer-events: none; +} + +.c8.fi-action-menu-item--disabled { + cursor: not-allowed; + color: hsl(202,7%,67%); +} + +.c8.fi-action-menu-item--disabled:active, +.c8.fi-action-menu-item--disabled:focus, +.c8.fi-action-menu-item--disabled:hover, +.c8.fi-action-menu-item--disabled:visited { + color: hsl(202,7%,67%); +} + +.c8.fi-action-menu-item--selected { + color: hsl(0,0%,100%); + background: hsl(212,63%,45%); +} + +.c8.fi-action-menu-item--selected:active, +.c8.fi-action-menu-item--selected:focus, +.c8.fi-action-menu-item--selected:hover, +.c8.fi-action-menu-item--selected:visited { + -webkit-text-decoration: none; + text-decoration: none; + color: hsl(0,0%,100%); + cursor: pointer; +} + +.c8.fi-action-menu-item--selected:after { + content: ''; +} + +.c8.fi-action-menu-item--selected.fi-action-menu-item--disabled { + cursor: not-allowed; + color: hsl(202,7%,67%); +} + +.c9.fi-action-menu-divider { + height: 17px; + min-height: 17px; + padding-left: 15px; + padding-right: 15px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} + +.c9.fi-action-menu-divider .fi-action-menu-divider_line { + height: 1px; + width: 100%; + background-color: hsl(202,7%,80%); +} + +@media (forced-colors:active) { + .c8.fi-action-menu-item--disabled { + color: GrayText; + } +} + +@media (forced-colors:active) { + .c8.fi-action-menu-item--selected:after { + position: absolute; + left: 1px; + right: 1px; + top: 1px; + bottom: 1px; + border: solid 3px Highlight; + } +} + +@media (forced-colors:active) { + .c8.fi-action-menu-item--selected.fi-action-menu-item--disabled { + color: GrayText; + } +} + +@media (forced-colors:active) { + .c9.fi-action-menu-divider .fi-action-menu-divider_line { + background-color: Highlight; + } +} + + +
+
+ +
+ +
+ +`; + +exports[`No borders variant should match snapshot 1`] = ` +.c2 { + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; + font: 100% inherit; + line-height: 1; + text-align: left; + -webkit-text-decoration: none; + text-decoration: none; + vertical-align: baseline; + color: inherit; + background: none; + cursor: inherit; + display: inline-block; + max-width: 100%; + cursor: pointer; +} + +.c2:-moz-focusring { + outline: 1px dotted ButtonText; +} + +.c2::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c2::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; +} + +.c2::-webkit-inner-spin-button { + height: auto; +} + +.c2::-webkit-outer-spin-button { + height: auto; +} + +.c2::before, +.c2::after { + box-sizing: border-box; +} + +.c0 { + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; + font: 100% inherit; + line-height: 1; + text-align: left; + -webkit-text-decoration: none; + text-decoration: none; + vertical-align: baseline; + color: inherit; + background: none; + cursor: inherit; + display: block; + max-width: 100%; + word-wrap: normal; + word-break: normal; + white-space: normal; +} + +.c0::before, +.c0::after { + box-sizing: border-box; +} + +.c6 { + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; + font: 100% inherit; + line-height: 1; + text-align: left; + -webkit-text-decoration: none; + text-decoration: none; + vertical-align: baseline; + color: inherit; + background: none; + cursor: inherit; + display: block; + max-width: 100%; + word-wrap: normal; + word-break: normal; + white-space: normal; +} + +.c6::before, +.c6::after { + box-sizing: border-box; +} + +.c4 { + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; + font: 100% inherit; + line-height: 1; + text-align: left; + -webkit-text-decoration: none; + text-decoration: none; + vertical-align: baseline; + color: inherit; + background: none; + cursor: inherit; + display: inline; + max-width: 100%; + word-wrap: normal; + word-break: normal; + white-space: normal; +} + +.c4::before, +.c4::after { + box-sizing: border-box; +} + +.c7 { + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 400; +} + +.c7.fi-action-menu-popover { + background-color: hsl(0,0%,100%); + box-shadow: 0px 4px 8px 0px hsla(0,0%,13%,0.14); + border: 1px solid hsl(0,0%,58%); + border-radius: 2px; + padding-top: 8px; + padding-bottom: 8px; + z-index: 888; +} + +.c7.fi-action-menu-popover--hidden { + visibility: hidden; +} + +.c7 .fi-action-menu-popover_list { + margin: 0; + padding-left: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + list-style-type: none; + overflow-y: auto; + max-height: 265px; +} + +.c7 .fi-action-menu-popover_list:focus { + outline: none; +} + +.c7 .fi-action-menu-popover_popper-arrow::before, +.c7 .fi-action-menu-popover_popper-arrow::after { + content: ''; + position: absolute; + left: -9px; + height: 0; + width: 0; + border: solid transparent; + pointer-events: none; +} + +.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='bottom-end'] { + bottom: 100%; +} + +.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='bottom-end']::before { + border-bottom-color: hsl(0,0%,58%); + border-width: 9px; + margin-right: -9px; + bottom: 100%; +} + +.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='bottom-end']::after { + border-bottom-color: hsl(0,0%,100%); + border-width: 8px; + margin-right: -9px; + left: -8px; + bottom: 100%; +} + +.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='top-end'] { + top: 100%; +} + +.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='top-end']::before { + border-top-color: hsl(0,0%,58%); + border-width: 9px; + margin-right: -9px; +} + +.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='top-end']::after { + border-top-color: hsl(0,0%,100%); + border-width: 8px; + margin-right: -9px; + left: -8px; +} + +.c3 { + color: hsl(0,0%,13%); + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 600; + font-size: 14px; + line-height: 20px; + padding: 10px 20px; + min-height: 40px; + color: hsl(0,0%,100%); + background: linear-gradient(0deg,hsl(212,63%,37%) 0%,hsl(212,63%,45%) 100%); + border-radius: 2px; + text-align: center; + text-shadow: 0 1px 1px hsla(214,100%,24%,0.5); + cursor: pointer; + border: 1px solid transparent; +} + +.c3.fi-margin-xxs { + margin: 5px; +} + +.c3.fi-margin-xs { + margin: 10px; +} + +.c3.fi-margin-s { + margin: 15px; +} + +.c3.fi-margin-m { + margin: 20px; +} + +.c3.fi-margin-l { + margin: 25px; +} + +.c3.fi-margin-xl { + margin: 30px; +} + +.c3.fi-margin-xxl { + margin: 40px; +} + +.c3.fi-margin-xxxl { + margin: 60px; +} + +.c3.fi-margin-xxxxl { + margin: 80px; +} + +.c3.fi-margin-insetXxs { + margin: 2px; +} + +.c3.fi-margin-insetXs { + margin: 4px; +} + +.c3.fi-margin-insetS { + margin: 6px; +} + +.c3.fi-margin-insetM { + margin: 8px; +} + +.c3.fi-margin-insetL { + margin: 10px; +} + +.c3.fi-margin-insetXl { + margin: 16px; +} + +.c3.fi-margin-insetXxl { + margin: 20px; +} + +.c3.fi-margin-top-xxs { + margin-top: 5px; +} + +.c3.fi-margin-top-xs { + margin-top: 10px; +} + +.c3.fi-margin-top-s { + margin-top: 15px; +} + +.c3.fi-margin-top-m { + margin-top: 20px; +} + +.c3.fi-margin-top-l { + margin-top: 25px; +} + +.c3.fi-margin-top-xl { + margin-top: 30px; +} + +.c3.fi-margin-top-xxl { + margin-top: 40px; +} + +.c3.fi-margin-top-xxxl { + margin-top: 60px; +} + +.c3.fi-margin-top-xxxxl { + margin-top: 80px; +} + +.c3.fi-margin-top-insetXxs { + margin-top: 2px; +} + +.c3.fi-margin-top-insetXs { + margin-top: 4px; +} + +.c3.fi-margin-top-insetS { + margin-top: 6px; +} + +.c3.fi-margin-top-insetM { + margin-top: 8px; +} + +.c3.fi-margin-top-insetL { + margin-top: 10px; +} + +.c3.fi-margin-top-insetXl { + margin-top: 16px; +} + +.c3.fi-margin-top-insetXxl { + margin-top: 20px; +} + +.c3.fi-margin-right-xxs { + margin-right: 5px; +} + +.c3.fi-margin-right-xs { + margin-right: 10px; +} + +.c3.fi-margin-right-s { + margin-right: 15px; +} + +.c3.fi-margin-right-m { + margin-right: 20px; +} + +.c3.fi-margin-right-l { + margin-right: 25px; +} + +.c3.fi-margin-right-xl { + margin-right: 30px; +} + +.c3.fi-margin-right-xxl { + margin-right: 40px; +} + +.c3.fi-margin-right-xxxl { + margin-right: 60px; +} + +.c3.fi-margin-right-xxxxl { + margin-right: 80px; +} + +.c3.fi-margin-right-insetXxs { + margin-right: 2px; +} + +.c3.fi-margin-right-insetXs { + margin-right: 4px; +} + +.c3.fi-margin-right-insetS { + margin-right: 6px; +} + +.c3.fi-margin-right-insetM { + margin-right: 8px; +} + +.c3.fi-margin-right-insetL { + margin-right: 10px; +} + +.c3.fi-margin-right-insetXl { + margin-right: 16px; +} + +.c3.fi-margin-right-insetXxl { + margin-right: 20px; +} + +.c3.fi-margin-bottom-xxs { + margin-bottom: 5px; +} + +.c3.fi-margin-bottom-xs { + margin-bottom: 10px; +} + +.c3.fi-margin-bottom-s { + margin-bottom: 15px; +} + +.c3.fi-margin-bottom-m { + margin-bottom: 20px; +} + +.c3.fi-margin-bottom-l { + margin-bottom: 25px; +} + +.c3.fi-margin-bottom-xl { + margin-bottom: 30px; +} + +.c3.fi-margin-bottom-xxl { + margin-bottom: 40px; +} + +.c3.fi-margin-bottom-xxxl { + margin-bottom: 60px; +} + +.c3.fi-margin-bottom-xxxxl { + margin-bottom: 80px; +} + +.c3.fi-margin-bottom-insetXxs { + margin-bottom: 2px; +} + +.c3.fi-margin-bottom-insetXs { + margin-bottom: 4px; +} + +.c3.fi-margin-bottom-insetS { + margin-bottom: 6px; +} + +.c3.fi-margin-bottom-insetM { + margin-bottom: 8px; +} + +.c3.fi-margin-bottom-insetL { + margin-bottom: 10px; +} + +.c3.fi-margin-bottom-insetXl { + margin-bottom: 16px; +} + +.c3.fi-margin-bottom-insetXxl { + margin-bottom: 20px; +} + +.c3.fi-margin-left-xxs { + margin-left: 5px; +} + +.c3.fi-margin-left-xs { + margin-left: 10px; +} + +.c3.fi-margin-left-s { + margin-left: 15px; +} + +.c3.fi-margin-left-m { + margin-left: 20px; +} + +.c3.fi-margin-left-l { + margin-left: 25px; +} + +.c3.fi-margin-left-xl { + margin-left: 30px; +} + +.c3.fi-margin-left-xxl { + margin-left: 40px; +} + +.c3.fi-margin-left-xxxl { + margin-left: 60px; +} + +.c3.fi-margin-left-xxxxl { + margin-left: 80px; +} + +.c3.fi-margin-left-insetXxs { + margin-left: 2px; +} + +.c3.fi-margin-left-insetXs { + margin-left: 4px; +} + +.c3.fi-margin-left-insetS { + margin-left: 6px; +} + +.c3.fi-margin-left-insetM { + margin-left: 8px; +} + +.c3.fi-margin-left-insetL { + margin-left: 10px; +} + +.c3.fi-margin-left-insetXl { + margin-left: 16px; +} + +.c3.fi-margin-left-insetXxl { + margin-left: 20px; +} + +.c3.fi-padding-xxs { + padding: 5px; +} + +.c3.fi-padding-xs { + padding: 10px; +} + +.c3.fi-padding-s { + padding: 15px; +} + +.c3.fi-padding-m { + padding: 20px; +} + +.c3.fi-padding-l { + padding: 25px; +} + +.c3.fi-padding-xl { + padding: 30px; +} + +.c3.fi-padding-xxl { + padding: 40px; +} + +.c3.fi-padding-xxxl { + padding: 60px; +} + +.c3.fi-padding-xxxxl { + padding: 80px; +} + +.c3.fi-padding-insetXxs { + padding: 2px; +} + +.c3.fi-padding-insetXs { + padding: 4px; +} + +.c3.fi-padding-insetS { + padding: 6px; +} + +.c3.fi-padding-insetM { + padding: 8px; +} + +.c3.fi-padding-insetL { + padding: 10px; +} + +.c3.fi-padding-insetXl { + padding: 16px; +} + +.c3.fi-padding-insetXxl { + padding: 20px; +} + +.c3.fi-padding-top-xxs { + padding-top: 5px; +} + +.c3.fi-padding-top-xs { + padding-top: 10px; +} + +.c3.fi-padding-top-s { + padding-top: 15px; +} + +.c3.fi-padding-top-m { + padding-top: 20px; +} + +.c3.fi-padding-top-l { + padding-top: 25px; +} + +.c3.fi-padding-top-xl { + padding-top: 30px; +} + +.c3.fi-padding-top-xxl { + padding-top: 40px; +} + +.c3.fi-padding-top-xxxl { + padding-top: 60px; +} + +.c3.fi-padding-top-xxxxl { + padding-top: 80px; +} + +.c3.fi-padding-top-insetXxs { + padding-top: 2px; +} + +.c3.fi-padding-top-insetXs { + padding-top: 4px; +} + +.c3.fi-padding-top-insetS { + padding-top: 6px; +} + +.c3.fi-padding-top-insetM { + padding-top: 8px; +} + +.c3.fi-padding-top-insetL { + padding-top: 10px; +} + +.c3.fi-padding-top-insetXl { + padding-top: 16px; +} + +.c3.fi-padding-top-insetXxl { + padding-top: 20px; +} + +.c3.fi-padding-right-xxs { + padding-right: 5px; +} + +.c3.fi-padding-right-xs { + padding-right: 10px; +} + +.c3.fi-padding-right-s { + padding-right: 15px; +} + +.c3.fi-padding-right-m { + padding-right: 20px; +} + +.c3.fi-padding-right-l { + padding-right: 25px; +} + +.c3.fi-padding-right-xl { + padding-right: 30px; +} + +.c3.fi-padding-right-xxl { + padding-right: 40px; +} + +.c3.fi-padding-right-xxxl { + padding-right: 60px; +} + +.c3.fi-padding-right-xxxxl { + padding-right: 80px; +} + +.c3.fi-padding-right-insetXxs { + padding-right: 2px; +} + +.c3.fi-padding-right-insetXs { + padding-right: 4px; +} + +.c3.fi-padding-right-insetS { + padding-right: 6px; +} + +.c3.fi-padding-right-insetM { + padding-right: 8px; +} + +.c3.fi-padding-right-insetL { + padding-right: 10px; +} + +.c3.fi-padding-right-insetXl { + padding-right: 16px; +} + +.c3.fi-padding-right-insetXxl { + padding-right: 20px; +} + +.c3.fi-padding-bottom-xxs { + padding-bottom: 5px; +} + +.c3.fi-padding-bottom-xs { + padding-bottom: 10px; +} + +.c3.fi-padding-bottom-s { + padding-bottom: 15px; +} + +.c3.fi-padding-bottom-m { + padding-bottom: 20px; +} + +.c3.fi-padding-bottom-l { + padding-bottom: 25px; +} + +.c3.fi-padding-bottom-xl { + padding-bottom: 30px; +} + +.c3.fi-padding-bottom-xxl { + padding-bottom: 40px; +} + +.c3.fi-padding-bottom-xxxl { + padding-bottom: 60px; +} + +.c3.fi-padding-bottom-xxxxl { + padding-bottom: 80px; +} + +.c3.fi-padding-bottom-insetXxs { + padding-bottom: 2px; +} + +.c3.fi-padding-bottom-insetXs { + padding-bottom: 4px; +} + +.c3.fi-padding-bottom-insetS { + padding-bottom: 6px; +} + +.c3.fi-padding-bottom-insetM { + padding-bottom: 8px; +} + +.c3.fi-padding-bottom-insetL { + padding-bottom: 10px; +} + +.c3.fi-padding-bottom-insetXl { + padding-bottom: 16px; +} + +.c3.fi-padding-bottom-insetXxl { + padding-bottom: 20px; +} + +.c3.fi-padding-left-xxs { + padding-left: 5px; +} + +.c3.fi-padding-left-xs { + padding-left: 10px; +} + +.c3.fi-padding-left-s { + padding-left: 15px; +} + +.c3.fi-padding-left-m { + padding-left: 20px; +} + +.c3.fi-padding-left-l { + padding-left: 25px; +} + +.c3.fi-padding-left-xl { + padding-left: 30px; +} + +.c3.fi-padding-left-xxl { + padding-left: 40px; +} + +.c3.fi-padding-left-xxxl { + padding-left: 60px; +} + +.c3.fi-padding-left-xxxxl { + padding-left: 80px; +} + +.c3.fi-padding-left-insetXxs { + padding-left: 2px; +} + +.c3.fi-padding-left-insetXs { + padding-left: 4px; +} + +.c3.fi-padding-left-insetS { + padding-left: 6px; +} + +.c3.fi-padding-left-insetM { + padding-left: 8px; +} + +.c3.fi-padding-left-insetL { + padding-left: 10px; +} + +.c3.fi-padding-left-insetXl { + padding-left: 16px; +} + +.c3.fi-padding-left-insetXxl { + padding-left: 20px; +} + +.c3:focus { + position: relative; + outline: 3px solid transparent; +} + +.c3:focus::after { + content: ''; + position: absolute; + pointer-events: none; + top: -2px; + right: -2px; + bottom: -2px; + left: -2px; + border-radius: 2px; + background-color: transparent; + border: 0px solid hsl(0,0%,100%); + box-sizing: border-box; + box-shadow: 0 0 0 2px hsl(196,77%,44%); + z-index: 9999; +} + +.c3:hover { + background: linear-gradient(0deg,hsl(212,63%,45%) 0%,hsl(212,63%,49%) 100%); + outline: 2px solid transparent; +} + +.c3:active { + background: hsl(212,63%,37%); +} + +.c3.fi-button--disabled, +.c3[disabled], +.c3:disabled { + text-shadow: 0 1px 1px rgba(33,33,33,0.5); + background: linear-gradient(0deg,hsl(202,7%,67%) 0%,hsl(202,7%,80%) 100%); + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: not-allowed; +} + +.c3.fi-button--disabled::after { + border: none; + box-shadow: none; +} + +.c3.fi-button--fullwidth { + display: block; + width: 100%; +} + +.c3.fi-button--inverted { + background: none; + background-color: hsl(212,63%,45%); + border: 1px solid hsl(0,0%,100%); + text-shadow: none; +} + +.c3.fi-button--inverted:hover { + background: linear-gradient(-180deg,hsla(0,0%,100%,0.1) 0%,hsla(0,0%,100%,0) 100%); +} + +.c3.fi-button--inverted:active { + background: none; + background-color: hsl(212,63%,45%); +} + +.c3.fi-button--inverted.fi-button--disabled, +.c3.fi-button--inverted[disabled], +.c3.fi-button--inverted:disabled { + opacity: 0.41; + background: none; + background-color: none; +} + +.c3.fi-button--secondary { + color: hsl(212,63%,45%); + background: none; + background-color: hsl(0,0%,100%); + border: 1px solid hsl(212,63%,45%); + text-shadow: none; +} + +.c3.fi-button--secondary:hover { + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); +} + +.c3.fi-button--secondary:active { + background: none; + background-color: hsl(202,7%,93%); +} + +.c3.fi-button--secondary.fi-button--disabled, +.c3.fi-button--secondary[disabled], +.c3.fi-button--secondary:disabled { + color: hsl(202,7%,67%); + text-shadow: none; + background: none; + background-color: hsl(212,63%,98%); + border-color: hsl(202,7%,67%); +} + +.c3.fi-button--secondary-noborder { + color: hsl(212,63%,45%); + background: none; + background-color: hsl(0,0%,100%); + border: 1px solid hsl(212,63%,45%); + text-shadow: none; + border: none; + background-color: transparent; +} + +.c3.fi-button--secondary-noborder:hover { + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); +} + +.c3.fi-button--secondary-noborder:active { + background: none; + background-color: hsl(202,7%,93%); +} + +.c3.fi-button--secondary-noborder.fi-button--disabled, +.c3.fi-button--secondary-noborder[disabled], +.c3.fi-button--secondary-noborder:disabled { + color: hsl(202,7%,67%); + text-shadow: none; + background: none; + background-color: hsl(212,63%,98%); + border-color: hsl(202,7%,67%); +} + +.c3.fi-button--secondary-light { + color: hsl(212,63%,45%); + color: hsl(212,63%,45%); + background: none; + background-color: hsl(0,0%,100%); + border: 1px solid hsl(212,63%,45%); + text-shadow: none; + background: linear-gradient(0deg,hsl(215,100%,95%),hsl(215,100%,97%)); + border: none; +} + +.c3.fi-button--secondary-light:hover { + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); +} + +.c3.fi-button--secondary-light:active { + background: none; + background-color: hsl(202,7%,93%); +} + +.c3.fi-button--secondary-light.fi-button--disabled, +.c3.fi-button--secondary-light[disabled], +.c3.fi-button--secondary-light:disabled { + color: hsl(202,7%,67%); + text-shadow: none; + background: none; + background-color: hsl(212,63%,98%); + border-color: hsl(202,7%,67%); +} + +.c3.fi-button--secondary-light:hover { + background: linear-gradient(0deg,hsl(215,100%,97%),hsl(212,63%,98%)); +} + +.c3.fi-button--secondary-light:active { + background: linear-gradient(0deg,hsl(202,7%,93%),hsl(202,7%,97%)); +} + +.c3.fi-button--secondary-light.fi-button--disabled, +.c3.fi-button--secondary-light[disabled], +.c3.fi-button--secondary-light:disabled { + color: hsl(202,7%,67%); + background: none; + background-color: hsl(202,7%,97%); +} + +.c3 > .fi-button_icon > .fi-icon { + width: 16px; + height: 16px; + margin-right: 8px; + vertical-align: middle; + -webkit-transform: translateY(-0.1em); + -ms-transform: translateY(-0.1em); + transform: translateY(-0.1em); +} + +.c3 > .fi-button_icon--right > .fi-icon { + margin-right: 0; + margin-left: 8px; +} + +.c3.fi-button--disabled > .fi-button_icon { + cursor: not-allowed; +} + +.c5 { + vertical-align: baseline; +} + +.c5.fi-icon { + display: inline-block; +} + +.c5 .fi-icon-base-fill { + fill: currentColor; +} + +.c5 .fi-icon-base-stroke { + stroke: currentColor; +} + +.c5.fi-icon--cursor-pointer { + cursor: pointer; +} + +.c5.fi-icon--cursor-pointer * { + cursor: inherit; +} + +.c1.fi-action-menu--full-width { + width: 100%; +} + +.c1 .fi-action-menu_button--icon-only { + min-width: 40px; + padding: 10px; +} + +.c1 .fi-action-menu_button--icon-only .fi-button_icon--right .fi-icon { + margin-left: 0; +} + +.c8 { + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 400; +} + +.c8.fi-action-menu-item { + position: relative; + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 400; + -webkit-text-decoration: none; + text-decoration: none; + color: hsl(0,0%,13%); + padding: 10px 20px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + cursor: pointer; + background: inherit; + border: none; + border-radius: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c8.fi-action-menu-item:active, +.c8.fi-action-menu-item:focus, +.c8.fi-action-menu-item:hover, +.c8.fi-action-menu-item:visited { + border: none; + outline: none; + color: hsl(0,0%,13%); +} + +.c8.fi-action-menu-item .fi-icon { + margin-right: 8px; + width: 16px; + height: 16px; + pointer-events: none; +} + +.c8.fi-action-menu-item--disabled { + cursor: not-allowed; + color: hsl(202,7%,67%); +} + +.c8.fi-action-menu-item--disabled:active, +.c8.fi-action-menu-item--disabled:focus, +.c8.fi-action-menu-item--disabled:hover, +.c8.fi-action-menu-item--disabled:visited { + color: hsl(202,7%,67%); +} + +.c8.fi-action-menu-item--selected { + color: hsl(0,0%,100%); + background: hsl(212,63%,45%); +} + +.c8.fi-action-menu-item--selected:active, +.c8.fi-action-menu-item--selected:focus, +.c8.fi-action-menu-item--selected:hover, +.c8.fi-action-menu-item--selected:visited { + -webkit-text-decoration: none; + text-decoration: none; + color: hsl(0,0%,100%); + cursor: pointer; +} + +.c8.fi-action-menu-item--selected:after { + content: ''; +} + +.c8.fi-action-menu-item--selected.fi-action-menu-item--disabled { + cursor: not-allowed; + color: hsl(202,7%,67%); +} + +.c9.fi-action-menu-divider { + height: 17px; + min-height: 17px; + padding-left: 15px; + padding-right: 15px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -673,7 +4125,8 @@ exports[`Basic ActionMenu should match snapshot 1`] = ` aria-disabled="false" aria-expanded="false" aria-haspopup="menu" - class="c2 fi-button c3 fi-action-menu_button fi-button--secondary" + aria-label="ActionMenuTest" + class="c2 fi-button c3 fi-action-menu_button fi-button--secondary-noborder" id="test-id" name="am-test-name" tabindex="0" @@ -766,7 +4219,7 @@ exports[`Basic ActionMenu should match snapshot 1`] = ` `; -exports[`Disabled ActionMenu should match snapshot 1`] = ` +exports[`movement in ActionMenu should match snapshot 1`] = ` .c2 { line-height: 1.15; -ms-text-size-adjust: 100%; @@ -902,903 +4355,777 @@ exports[`Disabled ActionMenu should match snapshot 1`] = ` white-space: normal; } -.c4::before, -.c4::after { - box-sizing: border-box; +.c4::before, +.c4::after { + box-sizing: border-box; +} + +.c7 { + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 400; +} + +.c7.fi-action-menu-popover { + background-color: hsl(0,0%,100%); + box-shadow: 0px 4px 8px 0px hsla(0,0%,13%,0.14); + border: 1px solid hsl(0,0%,58%); + border-radius: 2px; + padding-top: 8px; + padding-bottom: 8px; + z-index: 888; +} + +.c7.fi-action-menu-popover--hidden { + visibility: hidden; +} + +.c7 .fi-action-menu-popover_list { + margin: 0; + padding-left: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + list-style-type: none; + overflow-y: auto; + max-height: 265px; +} + +.c7 .fi-action-menu-popover_list:focus { + outline: none; +} + +.c7 .fi-action-menu-popover_popper-arrow::before, +.c7 .fi-action-menu-popover_popper-arrow::after { + content: ''; + position: absolute; + left: -9px; + height: 0; + width: 0; + border: solid transparent; + pointer-events: none; +} + +.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='bottom-end'] { + bottom: 100%; +} + +.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='bottom-end']::before { + border-bottom-color: hsl(0,0%,58%); + border-width: 9px; + margin-right: -9px; + bottom: 100%; +} + +.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='bottom-end']::after { + border-bottom-color: hsl(0,0%,100%); + border-width: 8px; + margin-right: -9px; + left: -8px; + bottom: 100%; +} + +.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='top-end'] { + top: 100%; +} + +.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='top-end']::before { + border-top-color: hsl(0,0%,58%); + border-width: 9px; + margin-right: -9px; +} + +.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='top-end']::after { + border-top-color: hsl(0,0%,100%); + border-width: 8px; + margin-right: -9px; + left: -8px; +} + +.c3 { + color: hsl(0,0%,13%); + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 600; + font-size: 14px; + line-height: 20px; + padding: 10px 20px; + min-height: 40px; + color: hsl(0,0%,100%); + background: linear-gradient(0deg,hsl(212,63%,37%) 0%,hsl(212,63%,45%) 100%); + border-radius: 2px; + text-align: center; + text-shadow: 0 1px 1px hsla(214,100%,24%,0.5); + cursor: pointer; + border: 1px solid transparent; +} + +.c3.fi-margin-xxs { + margin: 5px; +} + +.c3.fi-margin-xs { + margin: 10px; +} + +.c3.fi-margin-s { + margin: 15px; +} + +.c3.fi-margin-m { + margin: 20px; +} + +.c3.fi-margin-l { + margin: 25px; +} + +.c3.fi-margin-xl { + margin: 30px; +} + +.c3.fi-margin-xxl { + margin: 40px; +} + +.c3.fi-margin-xxxl { + margin: 60px; +} + +.c3.fi-margin-xxxxl { + margin: 80px; +} + +.c3.fi-margin-insetXxs { + margin: 2px; +} + +.c3.fi-margin-insetXs { + margin: 4px; +} + +.c3.fi-margin-insetS { + margin: 6px; +} + +.c3.fi-margin-insetM { + margin: 8px; +} + +.c3.fi-margin-insetL { + margin: 10px; +} + +.c3.fi-margin-insetXl { + margin: 16px; +} + +.c3.fi-margin-insetXxl { + margin: 20px; +} + +.c3.fi-margin-top-xxs { + margin-top: 5px; +} + +.c3.fi-margin-top-xs { + margin-top: 10px; +} + +.c3.fi-margin-top-s { + margin-top: 15px; +} + +.c3.fi-margin-top-m { + margin-top: 20px; +} + +.c3.fi-margin-top-l { + margin-top: 25px; +} + +.c3.fi-margin-top-xl { + margin-top: 30px; +} + +.c3.fi-margin-top-xxl { + margin-top: 40px; +} + +.c3.fi-margin-top-xxxl { + margin-top: 60px; +} + +.c3.fi-margin-top-xxxxl { + margin-top: 80px; +} + +.c3.fi-margin-top-insetXxs { + margin-top: 2px; +} + +.c3.fi-margin-top-insetXs { + margin-top: 4px; +} + +.c3.fi-margin-top-insetS { + margin-top: 6px; +} + +.c3.fi-margin-top-insetM { + margin-top: 8px; +} + +.c3.fi-margin-top-insetL { + margin-top: 10px; +} + +.c3.fi-margin-top-insetXl { + margin-top: 16px; +} + +.c3.fi-margin-top-insetXxl { + margin-top: 20px; +} + +.c3.fi-margin-right-xxs { + margin-right: 5px; +} + +.c3.fi-margin-right-xs { + margin-right: 10px; +} + +.c3.fi-margin-right-s { + margin-right: 15px; +} + +.c3.fi-margin-right-m { + margin-right: 20px; +} + +.c3.fi-margin-right-l { + margin-right: 25px; +} + +.c3.fi-margin-right-xl { + margin-right: 30px; +} + +.c3.fi-margin-right-xxl { + margin-right: 40px; +} + +.c3.fi-margin-right-xxxl { + margin-right: 60px; +} + +.c3.fi-margin-right-xxxxl { + margin-right: 80px; +} + +.c3.fi-margin-right-insetXxs { + margin-right: 2px; +} + +.c3.fi-margin-right-insetXs { + margin-right: 4px; +} + +.c3.fi-margin-right-insetS { + margin-right: 6px; +} + +.c3.fi-margin-right-insetM { + margin-right: 8px; +} + +.c3.fi-margin-right-insetL { + margin-right: 10px; +} + +.c3.fi-margin-right-insetXl { + margin-right: 16px; +} + +.c3.fi-margin-right-insetXxl { + margin-right: 20px; } -.c7 { - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 400; +.c3.fi-margin-bottom-xxs { + margin-bottom: 5px; } -.c7.fi-action-menu-popover { - background-color: hsl(0,0%,100%); - box-shadow: 0px 4px 8px 0px hsla(0,0%,13%,0.14); - border: 1px solid hsl(0,0%,58%); - border-radius: 2px; - padding-top: 8px; - padding-bottom: 8px; - z-index: 888; +.c3.fi-margin-bottom-xs { + margin-bottom: 10px; } -.c7.fi-action-menu-popover--hidden { - visibility: hidden; +.c3.fi-margin-bottom-s { + margin-bottom: 15px; } -.c7 .fi-action-menu-popover_list { - margin: 0; - padding-left: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - list-style-type: none; - overflow-y: auto; - max-height: 265px; +.c3.fi-margin-bottom-m { + margin-bottom: 20px; } -.c7 .fi-action-menu-popover_list:focus { - outline: none; +.c3.fi-margin-bottom-l { + margin-bottom: 25px; } -.c7 .fi-action-menu-popover_popper-arrow::before, -.c7 .fi-action-menu-popover_popper-arrow::after { - content: ''; - position: absolute; - left: -9px; - height: 0; - width: 0; - border: solid transparent; - pointer-events: none; +.c3.fi-margin-bottom-xl { + margin-bottom: 30px; } -.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='bottom-end'] { - bottom: 100%; +.c3.fi-margin-bottom-xxl { + margin-bottom: 40px; } -.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='bottom-end']::before { - border-bottom-color: hsl(0,0%,58%); - border-width: 9px; - margin-right: -9px; - bottom: 100%; +.c3.fi-margin-bottom-xxxl { + margin-bottom: 60px; } -.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='bottom-end']::after { - border-bottom-color: hsl(0,0%,100%); - border-width: 8px; - margin-right: -9px; - left: -8px; - bottom: 100%; +.c3.fi-margin-bottom-xxxxl { + margin-bottom: 80px; } -.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='top-end'] { - top: 100%; +.c3.fi-margin-bottom-insetXxs { + margin-bottom: 2px; } -.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='top-end']::before { - border-top-color: hsl(0,0%,58%); - border-width: 9px; - margin-right: -9px; +.c3.fi-margin-bottom-insetXs { + margin-bottom: 4px; } -.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='top-end']::after { - border-top-color: hsl(0,0%,100%); - border-width: 8px; - margin-right: -9px; - left: -8px; +.c3.fi-margin-bottom-insetS { + margin-bottom: 6px; } -.c3 { - color: hsl(0,0%,13%); - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 600; - font-size: 14px; - line-height: 20px; - padding: 10px 20px; - min-height: 40px; - color: hsl(0,0%,100%); - background: linear-gradient(0deg,hsl(212,63%,37%) 0%,hsl(212,63%,45%) 100%); - border-radius: 2px; - text-align: center; - text-shadow: 0 1px 1px hsla(214,100%,24%,0.5); - cursor: pointer; - border: 1px solid transparent; +.c3.fi-margin-bottom-insetM { + margin-bottom: 8px; } -.c3:focus { - position: relative; - outline: 3px solid transparent; +.c3.fi-margin-bottom-insetL { + margin-bottom: 10px; } -.c3:focus::after { - content: ''; - position: absolute; - pointer-events: none; - top: -2px; - right: -2px; - bottom: -2px; - left: -2px; - border-radius: 2px; - background-color: transparent; - border: 0px solid hsl(0,0%,100%); - box-sizing: border-box; - box-shadow: 0 0 0 2px hsl(196,77%,44%); - z-index: 9999; +.c3.fi-margin-bottom-insetXl { + margin-bottom: 16px; } -.c3:hover { - background: linear-gradient(0deg,hsl(212,63%,45%) 0%,hsl(212,63%,49%) 100%); - outline: 2px solid transparent; +.c3.fi-margin-bottom-insetXxl { + margin-bottom: 20px; } -.c3:active { - background: hsl(212,63%,37%); +.c3.fi-margin-left-xxs { + margin-left: 5px; } -.c3.fi-button--disabled, -.c3[disabled], -.c3:disabled { - text-shadow: 0 1px 1px rgba(33,33,33,0.5); - background: linear-gradient(0deg,hsl(202,7%,67%) 0%,hsl(202,7%,80%) 100%); - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - cursor: not-allowed; +.c3.fi-margin-left-xs { + margin-left: 10px; } -.c3.fi-button--disabled::after { - border: none; - box-shadow: none; +.c3.fi-margin-left-s { + margin-left: 15px; } -.c3.fi-button--fullwidth { - display: block; - width: 100%; +.c3.fi-margin-left-m { + margin-left: 20px; } -.c3.fi-button--inverted { - background: none; - background-color: hsl(212,63%,45%); - border: 1px solid hsl(0,0%,100%); - text-shadow: none; +.c3.fi-margin-left-l { + margin-left: 25px; } -.c3.fi-button--inverted:hover { - background: linear-gradient(-180deg,hsla(0,0%,100%,0.1) 0%,hsla(0,0%,100%,0) 100%); +.c3.fi-margin-left-xl { + margin-left: 30px; } -.c3.fi-button--inverted:active { - background: none; - background-color: hsl(212,63%,45%); +.c3.fi-margin-left-xxl { + margin-left: 40px; } -.c3.fi-button--inverted.fi-button--disabled, -.c3.fi-button--inverted[disabled], -.c3.fi-button--inverted:disabled { - opacity: 0.41; - background: none; - background-color: none; +.c3.fi-margin-left-xxxl { + margin-left: 60px; } -.c3.fi-button--secondary { - color: hsl(212,63%,45%); - background: none; - background-color: hsl(0,0%,100%); - border: 1px solid hsl(212,63%,45%); - text-shadow: none; +.c3.fi-margin-left-xxxxl { + margin-left: 80px; } -.c3.fi-button--secondary:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); +.c3.fi-margin-left-insetXxs { + margin-left: 2px; } -.c3.fi-button--secondary:active { - background: none; - background-color: hsl(202,7%,93%); +.c3.fi-margin-left-insetXs { + margin-left: 4px; } -.c3.fi-button--secondary.fi-button--disabled, -.c3.fi-button--secondary[disabled], -.c3.fi-button--secondary:disabled { - color: hsl(202,7%,67%); - text-shadow: none; - background: none; - background-color: hsl(212,63%,98%); - border-color: hsl(202,7%,67%); +.c3.fi-margin-left-insetS { + margin-left: 6px; } -.c3.fi-button--secondary-noborder { - color: hsl(212,63%,45%); - background: none; - background-color: hsl(0,0%,100%); - border: 1px solid hsl(212,63%,45%); - text-shadow: none; - border: none; - background-color: transparent; +.c3.fi-margin-left-insetM { + margin-left: 8px; } -.c3.fi-button--secondary-noborder:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); +.c3.fi-margin-left-insetL { + margin-left: 10px; } -.c3.fi-button--secondary-noborder:active { - background: none; - background-color: hsl(202,7%,93%); +.c3.fi-margin-left-insetXl { + margin-left: 16px; } -.c3.fi-button--secondary-noborder.fi-button--disabled, -.c3.fi-button--secondary-noborder[disabled], -.c3.fi-button--secondary-noborder:disabled { - color: hsl(202,7%,67%); - text-shadow: none; - background: none; - background-color: hsl(212,63%,98%); - border-color: hsl(202,7%,67%); +.c3.fi-margin-left-insetXxl { + margin-left: 20px; } -.c3.fi-button--secondary-light { - color: hsl(212,63%,45%); - color: hsl(212,63%,45%); - background: none; - background-color: hsl(0,0%,100%); - border: 1px solid hsl(212,63%,45%); - text-shadow: none; - background: linear-gradient(0deg,hsl(215,100%,95%),hsl(215,100%,97%)); - border: none; +.c3.fi-padding-xxs { + padding: 5px; } -.c3.fi-button--secondary-light:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); +.c3.fi-padding-xs { + padding: 10px; } -.c3.fi-button--secondary-light:active { - background: none; - background-color: hsl(202,7%,93%); +.c3.fi-padding-s { + padding: 15px; } -.c3.fi-button--secondary-light.fi-button--disabled, -.c3.fi-button--secondary-light[disabled], -.c3.fi-button--secondary-light:disabled { - color: hsl(202,7%,67%); - text-shadow: none; - background: none; - background-color: hsl(212,63%,98%); - border-color: hsl(202,7%,67%); +.c3.fi-padding-m { + padding: 20px; } -.c3.fi-button--secondary-light:hover { - background: linear-gradient(0deg,hsl(215,100%,97%),hsl(212,63%,98%)); +.c3.fi-padding-l { + padding: 25px; } -.c3.fi-button--secondary-light:active { - background: linear-gradient(0deg,hsl(202,7%,93%),hsl(202,7%,97%)); +.c3.fi-padding-xl { + padding: 30px; } -.c3.fi-button--secondary-light.fi-button--disabled, -.c3.fi-button--secondary-light[disabled], -.c3.fi-button--secondary-light:disabled { - color: hsl(202,7%,67%); - background: none; - background-color: hsl(202,7%,97%); +.c3.fi-padding-xxl { + padding: 40px; } -.c3 > .fi-button_icon > .fi-icon { - width: 16px; - height: 16px; - margin-right: 8px; - vertical-align: middle; - -webkit-transform: translateY(-0.1em); - -ms-transform: translateY(-0.1em); - transform: translateY(-0.1em); +.c3.fi-padding-xxxl { + padding: 60px; } -.c3 > .fi-button_icon--right > .fi-icon { - margin-right: 0; - margin-left: 8px; +.c3.fi-padding-xxxxl { + padding: 80px; +} + +.c3.fi-padding-insetXxs { + padding: 2px; +} + +.c3.fi-padding-insetXs { + padding: 4px; +} + +.c3.fi-padding-insetS { + padding: 6px; +} + +.c3.fi-padding-insetM { + padding: 8px; +} + +.c3.fi-padding-insetL { + padding: 10px; } -.c3.fi-button--disabled > .fi-button_icon { - cursor: not-allowed; +.c3.fi-padding-insetXl { + padding: 16px; } -.c5 { - vertical-align: baseline; +.c3.fi-padding-insetXxl { + padding: 20px; } -.c5.fi-icon { - display: inline-block; +.c3.fi-padding-top-xxs { + padding-top: 5px; } -.c5 .fi-icon-base-fill { - fill: currentColor; +.c3.fi-padding-top-xs { + padding-top: 10px; } -.c5 .fi-icon-base-stroke { - stroke: currentColor; +.c3.fi-padding-top-s { + padding-top: 15px; } -.c5.fi-icon--cursor-pointer { - cursor: pointer; +.c3.fi-padding-top-m { + padding-top: 20px; } -.c5.fi-icon--cursor-pointer * { - cursor: inherit; +.c3.fi-padding-top-l { + padding-top: 25px; } -.c1.fi-action-menu--full-width { - width: 100%; +.c3.fi-padding-top-xl { + padding-top: 30px; } -.c1 .fi-action-menu_button--icon-only { - min-width: 40px; - padding: 10px; +.c3.fi-padding-top-xxl { + padding-top: 40px; } -.c1 .fi-action-menu_button--icon-only .fi-button_icon--right .fi-icon { - margin-left: 0; +.c3.fi-padding-top-xxxl { + padding-top: 60px; } -.c8 { - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 400; +.c3.fi-padding-top-xxxxl { + padding-top: 80px; } -.c8.fi-action-menu-item { - position: relative; - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 400; - -webkit-text-decoration: none; - text-decoration: none; - color: hsl(0,0%,13%); - padding: 10px 20px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - cursor: pointer; - background: inherit; - border: none; - border-radius: 0; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; +.c3.fi-padding-top-insetXxs { + padding-top: 2px; } -.c8.fi-action-menu-item:active, -.c8.fi-action-menu-item:focus, -.c8.fi-action-menu-item:hover, -.c8.fi-action-menu-item:visited { - border: none; - outline: none; - color: hsl(0,0%,13%); +.c3.fi-padding-top-insetXs { + padding-top: 4px; } -.c8.fi-action-menu-item .fi-icon { - margin-right: 8px; - width: 16px; - height: 16px; - pointer-events: none; +.c3.fi-padding-top-insetS { + padding-top: 6px; } -.c8.fi-action-menu-item--disabled { - cursor: not-allowed; - color: hsl(202,7%,67%); +.c3.fi-padding-top-insetM { + padding-top: 8px; } -.c8.fi-action-menu-item--disabled:active, -.c8.fi-action-menu-item--disabled:focus, -.c8.fi-action-menu-item--disabled:hover, -.c8.fi-action-menu-item--disabled:visited { - color: hsl(202,7%,67%); +.c3.fi-padding-top-insetL { + padding-top: 10px; } -.c8.fi-action-menu-item--selected { - color: hsl(0,0%,100%); - background: hsl(212,63%,45%); +.c3.fi-padding-top-insetXl { + padding-top: 16px; } -.c8.fi-action-menu-item--selected:active, -.c8.fi-action-menu-item--selected:focus, -.c8.fi-action-menu-item--selected:hover, -.c8.fi-action-menu-item--selected:visited { - -webkit-text-decoration: none; - text-decoration: none; - color: hsl(0,0%,100%); - cursor: pointer; +.c3.fi-padding-top-insetXxl { + padding-top: 20px; } -.c8.fi-action-menu-item--selected:after { - content: ''; +.c3.fi-padding-right-xxs { + padding-right: 5px; } -.c8.fi-action-menu-item--selected.fi-action-menu-item--disabled { - cursor: not-allowed; - color: hsl(202,7%,67%); +.c3.fi-padding-right-xs { + padding-right: 10px; } -.c9.fi-action-menu-divider { - height: 17px; - min-height: 17px; - padding-left: 15px; +.c3.fi-padding-right-s { padding-right: 15px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; } -.c9.fi-action-menu-divider .fi-action-menu-divider_line { - height: 1px; - width: 100%; - background-color: hsl(202,7%,80%); +.c3.fi-padding-right-m { + padding-right: 20px; } -@media (forced-colors:active) { - .c8.fi-action-menu-item--disabled { - color: GrayText; - } +.c3.fi-padding-right-l { + padding-right: 25px; } -@media (forced-colors:active) { - .c8.fi-action-menu-item--selected:after { - position: absolute; - left: 1px; - right: 1px; - top: 1px; - bottom: 1px; - border: solid 3px Highlight; - } +.c3.fi-padding-right-xl { + padding-right: 30px; } -@media (forced-colors:active) { - .c8.fi-action-menu-item--selected.fi-action-menu-item--disabled { - color: GrayText; - } +.c3.fi-padding-right-xxl { + padding-right: 40px; } -@media (forced-colors:active) { - .c9.fi-action-menu-divider .fi-action-menu-divider_line { - background-color: Highlight; - } +.c3.fi-padding-right-xxxl { + padding-right: 60px; } - -
-
- -
- -
- -`; +.c3.fi-padding-right-xxxxl { + padding-right: 80px; +} + +.c3.fi-padding-right-insetXxs { + padding-right: 2px; +} + +.c3.fi-padding-right-insetXs { + padding-right: 4px; +} -exports[`No borders variant should match snapshot 1`] = ` -.c2 { - line-height: 1.15; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - margin: 0; - overflow: visible; - text-transform: none; - -webkit-appearance: button; - margin: 0; - padding: 0; - border: 0; - box-sizing: border-box; - font: 100% inherit; - line-height: 1; - text-align: left; - -webkit-text-decoration: none; - text-decoration: none; - vertical-align: baseline; - color: inherit; - background: none; - cursor: inherit; - display: inline-block; - max-width: 100%; - cursor: pointer; +.c3.fi-padding-right-insetS { + padding-right: 6px; } -.c2:-moz-focusring { - outline: 1px dotted ButtonText; +.c3.fi-padding-right-insetM { + padding-right: 8px; } -.c2::-moz-focus-inner { - border-style: none; - padding: 0; +.c3.fi-padding-right-insetL { + padding-right: 10px; } -.c2::-webkit-file-upload-button { - -webkit-appearance: button; - font: inherit; +.c3.fi-padding-right-insetXl { + padding-right: 16px; } -.c2::-webkit-inner-spin-button { - height: auto; +.c3.fi-padding-right-insetXxl { + padding-right: 20px; } -.c2::-webkit-outer-spin-button { - height: auto; +.c3.fi-padding-bottom-xxs { + padding-bottom: 5px; } -.c2::before, -.c2::after { - box-sizing: border-box; +.c3.fi-padding-bottom-xs { + padding-bottom: 10px; } -.c0 { - line-height: 1.15; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - margin: 0; - padding: 0; - border: 0; - box-sizing: border-box; - font: 100% inherit; - line-height: 1; - text-align: left; - -webkit-text-decoration: none; - text-decoration: none; - vertical-align: baseline; - color: inherit; - background: none; - cursor: inherit; - display: block; - max-width: 100%; - word-wrap: normal; - word-break: normal; - white-space: normal; +.c3.fi-padding-bottom-s { + padding-bottom: 15px; } -.c0::before, -.c0::after { - box-sizing: border-box; +.c3.fi-padding-bottom-m { + padding-bottom: 20px; } -.c6 { - line-height: 1.15; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - margin: 0; - padding: 0; - border: 0; - box-sizing: border-box; - font: 100% inherit; - line-height: 1; - text-align: left; - -webkit-text-decoration: none; - text-decoration: none; - vertical-align: baseline; - color: inherit; - background: none; - cursor: inherit; - display: block; - max-width: 100%; - word-wrap: normal; - word-break: normal; - white-space: normal; +.c3.fi-padding-bottom-l { + padding-bottom: 25px; } -.c6::before, -.c6::after { - box-sizing: border-box; +.c3.fi-padding-bottom-xl { + padding-bottom: 30px; } -.c4 { - line-height: 1.15; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - margin: 0; - padding: 0; - border: 0; - box-sizing: border-box; - font: 100% inherit; - line-height: 1; - text-align: left; - -webkit-text-decoration: none; - text-decoration: none; - vertical-align: baseline; - color: inherit; - background: none; - cursor: inherit; - display: inline; - max-width: 100%; - word-wrap: normal; - word-break: normal; - white-space: normal; +.c3.fi-padding-bottom-xxl { + padding-bottom: 40px; } -.c4::before, -.c4::after { - box-sizing: border-box; +.c3.fi-padding-bottom-xxxl { + padding-bottom: 60px; } -.c7 { - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 400; +.c3.fi-padding-bottom-xxxxl { + padding-bottom: 80px; } -.c7.fi-action-menu-popover { - background-color: hsl(0,0%,100%); - box-shadow: 0px 4px 8px 0px hsla(0,0%,13%,0.14); - border: 1px solid hsl(0,0%,58%); - border-radius: 2px; - padding-top: 8px; +.c3.fi-padding-bottom-insetXxs { + padding-bottom: 2px; +} + +.c3.fi-padding-bottom-insetXs { + padding-bottom: 4px; +} + +.c3.fi-padding-bottom-insetS { + padding-bottom: 6px; +} + +.c3.fi-padding-bottom-insetM { padding-bottom: 8px; - z-index: 888; } -.c7.fi-action-menu-popover--hidden { - visibility: hidden; +.c3.fi-padding-bottom-insetL { + padding-bottom: 10px; } -.c7 .fi-action-menu-popover_list { - margin: 0; - padding-left: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - list-style-type: none; - overflow-y: auto; - max-height: 265px; +.c3.fi-padding-bottom-insetXl { + padding-bottom: 16px; } -.c7 .fi-action-menu-popover_list:focus { - outline: none; +.c3.fi-padding-bottom-insetXxl { + padding-bottom: 20px; } -.c7 .fi-action-menu-popover_popper-arrow::before, -.c7 .fi-action-menu-popover_popper-arrow::after { - content: ''; - position: absolute; - left: -9px; - height: 0; - width: 0; - border: solid transparent; - pointer-events: none; +.c3.fi-padding-left-xxs { + padding-left: 5px; } -.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='bottom-end'] { - bottom: 100%; +.c3.fi-padding-left-xs { + padding-left: 10px; } -.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='bottom-end']::before { - border-bottom-color: hsl(0,0%,58%); - border-width: 9px; - margin-right: -9px; - bottom: 100%; +.c3.fi-padding-left-s { + padding-left: 15px; } -.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='bottom-end']::after { - border-bottom-color: hsl(0,0%,100%); - border-width: 8px; - margin-right: -9px; - left: -8px; - bottom: 100%; +.c3.fi-padding-left-m { + padding-left: 20px; } -.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='top-end'] { - top: 100%; +.c3.fi-padding-left-l { + padding-left: 25px; } -.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='top-end']::before { - border-top-color: hsl(0,0%,58%); - border-width: 9px; - margin-right: -9px; +.c3.fi-padding-left-xl { + padding-left: 30px; } -.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='top-end']::after { - border-top-color: hsl(0,0%,100%); - border-width: 8px; - margin-right: -9px; - left: -8px; +.c3.fi-padding-left-xxl { + padding-left: 40px; } -.c3 { - color: hsl(0,0%,13%); - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 600; - font-size: 14px; - line-height: 20px; - padding: 10px 20px; - min-height: 40px; - color: hsl(0,0%,100%); - background: linear-gradient(0deg,hsl(212,63%,37%) 0%,hsl(212,63%,45%) 100%); - border-radius: 2px; - text-align: center; - text-shadow: 0 1px 1px hsla(214,100%,24%,0.5); - cursor: pointer; - border: 1px solid transparent; +.c3.fi-padding-left-xxxl { + padding-left: 60px; +} + +.c3.fi-padding-left-xxxxl { + padding-left: 80px; +} + +.c3.fi-padding-left-insetXxs { + padding-left: 2px; +} + +.c3.fi-padding-left-insetXs { + padding-left: 4px; +} + +.c3.fi-padding-left-insetS { + padding-left: 6px; +} + +.c3.fi-padding-left-insetM { + padding-left: 8px; +} + +.c3.fi-padding-left-insetL { + padding-left: 10px; +} + +.c3.fi-padding-left-insetXl { + padding-left: 16px; +} + +.c3.fi-padding-left-insetXxl { + padding-left: 20px; } .c3:focus { @@ -2203,10 +5530,9 @@ exports[`No borders variant should match snapshot 1`] = `
@@ -2299,7 +5626,7 @@ exports[`No borders variant should match snapshot 1`] = ` `; -exports[`movement in ActionMenu should match snapshot 1`] = ` +exports[`movement in ActionMenu should match snapshot 2`] = ` .c2 { line-height: 1.15; -ms-text-size-adjust: 100%; @@ -2568,771 +5895,644 @@ exports[`movement in ActionMenu should match snapshot 1`] = ` border: 1px solid transparent; } -.c3:focus { - position: relative; - outline: 3px solid transparent; +.c3.fi-margin-xxs { + margin: 5px; } -.c3:focus::after { - content: ''; - position: absolute; - pointer-events: none; - top: -2px; - right: -2px; - bottom: -2px; - left: -2px; - border-radius: 2px; - background-color: transparent; - border: 0px solid hsl(0,0%,100%); - box-sizing: border-box; - box-shadow: 0 0 0 2px hsl(196,77%,44%); - z-index: 9999; +.c3.fi-margin-xs { + margin: 10px; } -.c3:hover { - background: linear-gradient(0deg,hsl(212,63%,45%) 0%,hsl(212,63%,49%) 100%); - outline: 2px solid transparent; +.c3.fi-margin-s { + margin: 15px; } -.c3:active { - background: hsl(212,63%,37%); +.c3.fi-margin-m { + margin: 20px; } -.c3.fi-button--disabled, -.c3[disabled], -.c3:disabled { - text-shadow: 0 1px 1px rgba(33,33,33,0.5); - background: linear-gradient(0deg,hsl(202,7%,67%) 0%,hsl(202,7%,80%) 100%); - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - cursor: not-allowed; +.c3.fi-margin-l { + margin: 25px; } -.c3.fi-button--disabled::after { - border: none; - box-shadow: none; +.c3.fi-margin-xl { + margin: 30px; } -.c3.fi-button--fullwidth { - display: block; - width: 100%; +.c3.fi-margin-xxl { + margin: 40px; } -.c3.fi-button--inverted { - background: none; - background-color: hsl(212,63%,45%); - border: 1px solid hsl(0,0%,100%); - text-shadow: none; +.c3.fi-margin-xxxl { + margin: 60px; } -.c3.fi-button--inverted:hover { - background: linear-gradient(-180deg,hsla(0,0%,100%,0.1) 0%,hsla(0,0%,100%,0) 100%); +.c3.fi-margin-xxxxl { + margin: 80px; } -.c3.fi-button--inverted:active { - background: none; - background-color: hsl(212,63%,45%); +.c3.fi-margin-insetXxs { + margin: 2px; } -.c3.fi-button--inverted.fi-button--disabled, -.c3.fi-button--inverted[disabled], -.c3.fi-button--inverted:disabled { - opacity: 0.41; - background: none; - background-color: none; +.c3.fi-margin-insetXs { + margin: 4px; } -.c3.fi-button--secondary { - color: hsl(212,63%,45%); - background: none; - background-color: hsl(0,0%,100%); - border: 1px solid hsl(212,63%,45%); - text-shadow: none; +.c3.fi-margin-insetS { + margin: 6px; } -.c3.fi-button--secondary:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); +.c3.fi-margin-insetM { + margin: 8px; } -.c3.fi-button--secondary:active { - background: none; - background-color: hsl(202,7%,93%); +.c3.fi-margin-insetL { + margin: 10px; } -.c3.fi-button--secondary.fi-button--disabled, -.c3.fi-button--secondary[disabled], -.c3.fi-button--secondary:disabled { - color: hsl(202,7%,67%); - text-shadow: none; - background: none; - background-color: hsl(212,63%,98%); - border-color: hsl(202,7%,67%); +.c3.fi-margin-insetXl { + margin: 16px; } -.c3.fi-button--secondary-noborder { - color: hsl(212,63%,45%); - background: none; - background-color: hsl(0,0%,100%); - border: 1px solid hsl(212,63%,45%); - text-shadow: none; - border: none; - background-color: transparent; +.c3.fi-margin-insetXxl { + margin: 20px; } -.c3.fi-button--secondary-noborder:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); +.c3.fi-margin-top-xxs { + margin-top: 5px; } -.c3.fi-button--secondary-noborder:active { - background: none; - background-color: hsl(202,7%,93%); +.c3.fi-margin-top-xs { + margin-top: 10px; } -.c3.fi-button--secondary-noborder.fi-button--disabled, -.c3.fi-button--secondary-noborder[disabled], -.c3.fi-button--secondary-noborder:disabled { - color: hsl(202,7%,67%); - text-shadow: none; - background: none; - background-color: hsl(212,63%,98%); - border-color: hsl(202,7%,67%); +.c3.fi-margin-top-s { + margin-top: 15px; } -.c3.fi-button--secondary-light { - color: hsl(212,63%,45%); - color: hsl(212,63%,45%); - background: none; - background-color: hsl(0,0%,100%); - border: 1px solid hsl(212,63%,45%); - text-shadow: none; - background: linear-gradient(0deg,hsl(215,100%,95%),hsl(215,100%,97%)); - border: none; +.c3.fi-margin-top-m { + margin-top: 20px; } -.c3.fi-button--secondary-light:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); +.c3.fi-margin-top-l { + margin-top: 25px; } -.c3.fi-button--secondary-light:active { - background: none; - background-color: hsl(202,7%,93%); +.c3.fi-margin-top-xl { + margin-top: 30px; } -.c3.fi-button--secondary-light.fi-button--disabled, -.c3.fi-button--secondary-light[disabled], -.c3.fi-button--secondary-light:disabled { - color: hsl(202,7%,67%); - text-shadow: none; - background: none; - background-color: hsl(212,63%,98%); - border-color: hsl(202,7%,67%); +.c3.fi-margin-top-xxl { + margin-top: 40px; } -.c3.fi-button--secondary-light:hover { - background: linear-gradient(0deg,hsl(215,100%,97%),hsl(212,63%,98%)); +.c3.fi-margin-top-xxxl { + margin-top: 60px; } -.c3.fi-button--secondary-light:active { - background: linear-gradient(0deg,hsl(202,7%,93%),hsl(202,7%,97%)); +.c3.fi-margin-top-xxxxl { + margin-top: 80px; } -.c3.fi-button--secondary-light.fi-button--disabled, -.c3.fi-button--secondary-light[disabled], -.c3.fi-button--secondary-light:disabled { - color: hsl(202,7%,67%); - background: none; - background-color: hsl(202,7%,97%); +.c3.fi-margin-top-insetXxs { + margin-top: 2px; } -.c3 > .fi-button_icon > .fi-icon { - width: 16px; - height: 16px; +.c3.fi-margin-top-insetXs { + margin-top: 4px; +} + +.c3.fi-margin-top-insetS { + margin-top: 6px; +} + +.c3.fi-margin-top-insetM { + margin-top: 8px; +} + +.c3.fi-margin-top-insetL { + margin-top: 10px; +} + +.c3.fi-margin-top-insetXl { + margin-top: 16px; +} + +.c3.fi-margin-top-insetXxl { + margin-top: 20px; +} + +.c3.fi-margin-right-xxs { + margin-right: 5px; +} + +.c3.fi-margin-right-xs { + margin-right: 10px; +} + +.c3.fi-margin-right-s { + margin-right: 15px; +} + +.c3.fi-margin-right-m { + margin-right: 20px; +} + +.c3.fi-margin-right-l { + margin-right: 25px; +} + +.c3.fi-margin-right-xl { + margin-right: 30px; +} + +.c3.fi-margin-right-xxl { + margin-right: 40px; +} + +.c3.fi-margin-right-xxxl { + margin-right: 60px; +} + +.c3.fi-margin-right-xxxxl { + margin-right: 80px; +} + +.c3.fi-margin-right-insetXxs { + margin-right: 2px; +} + +.c3.fi-margin-right-insetXs { + margin-right: 4px; +} + +.c3.fi-margin-right-insetS { + margin-right: 6px; +} + +.c3.fi-margin-right-insetM { margin-right: 8px; - vertical-align: middle; - -webkit-transform: translateY(-0.1em); - -ms-transform: translateY(-0.1em); - transform: translateY(-0.1em); } -.c3 > .fi-button_icon--right > .fi-icon { - margin-right: 0; +.c3.fi-margin-right-insetL { + margin-right: 10px; +} + +.c3.fi-margin-right-insetXl { + margin-right: 16px; +} + +.c3.fi-margin-right-insetXxl { + margin-right: 20px; +} + +.c3.fi-margin-bottom-xxs { + margin-bottom: 5px; +} + +.c3.fi-margin-bottom-xs { + margin-bottom: 10px; +} + +.c3.fi-margin-bottom-s { + margin-bottom: 15px; +} + +.c3.fi-margin-bottom-m { + margin-bottom: 20px; +} + +.c3.fi-margin-bottom-l { + margin-bottom: 25px; +} + +.c3.fi-margin-bottom-xl { + margin-bottom: 30px; +} + +.c3.fi-margin-bottom-xxl { + margin-bottom: 40px; +} + +.c3.fi-margin-bottom-xxxl { + margin-bottom: 60px; +} + +.c3.fi-margin-bottom-xxxxl { + margin-bottom: 80px; +} + +.c3.fi-margin-bottom-insetXxs { + margin-bottom: 2px; +} + +.c3.fi-margin-bottom-insetXs { + margin-bottom: 4px; +} + +.c3.fi-margin-bottom-insetS { + margin-bottom: 6px; +} + +.c3.fi-margin-bottom-insetM { + margin-bottom: 8px; +} + +.c3.fi-margin-bottom-insetL { + margin-bottom: 10px; +} + +.c3.fi-margin-bottom-insetXl { + margin-bottom: 16px; +} + +.c3.fi-margin-bottom-insetXxl { + margin-bottom: 20px; +} + +.c3.fi-margin-left-xxs { + margin-left: 5px; +} + +.c3.fi-margin-left-xs { + margin-left: 10px; +} + +.c3.fi-margin-left-s { + margin-left: 15px; +} + +.c3.fi-margin-left-m { + margin-left: 20px; +} + +.c3.fi-margin-left-l { + margin-left: 25px; +} + +.c3.fi-margin-left-xl { + margin-left: 30px; +} + +.c3.fi-margin-left-xxl { + margin-left: 40px; +} + +.c3.fi-margin-left-xxxl { + margin-left: 60px; +} + +.c3.fi-margin-left-xxxxl { + margin-left: 80px; +} + +.c3.fi-margin-left-insetXxs { + margin-left: 2px; +} + +.c3.fi-margin-left-insetXs { + margin-left: 4px; +} + +.c3.fi-margin-left-insetS { + margin-left: 6px; +} + +.c3.fi-margin-left-insetM { margin-left: 8px; } -.c3.fi-button--disabled > .fi-button_icon { - cursor: not-allowed; +.c3.fi-margin-left-insetL { + margin-left: 10px; +} + +.c3.fi-margin-left-insetXl { + margin-left: 16px; +} + +.c3.fi-margin-left-insetXxl { + margin-left: 20px; +} + +.c3.fi-padding-xxs { + padding: 5px; +} + +.c3.fi-padding-xs { + padding: 10px; +} + +.c3.fi-padding-s { + padding: 15px; +} + +.c3.fi-padding-m { + padding: 20px; +} + +.c3.fi-padding-l { + padding: 25px; +} + +.c3.fi-padding-xl { + padding: 30px; +} + +.c3.fi-padding-xxl { + padding: 40px; +} + +.c3.fi-padding-xxxl { + padding: 60px; +} + +.c3.fi-padding-xxxxl { + padding: 80px; } -.c5 { - vertical-align: baseline; +.c3.fi-padding-insetXxs { + padding: 2px; } -.c5.fi-icon { - display: inline-block; +.c3.fi-padding-insetXs { + padding: 4px; } -.c5 .fi-icon-base-fill { - fill: currentColor; +.c3.fi-padding-insetS { + padding: 6px; } -.c5 .fi-icon-base-stroke { - stroke: currentColor; +.c3.fi-padding-insetM { + padding: 8px; } -.c5.fi-icon--cursor-pointer { - cursor: pointer; +.c3.fi-padding-insetL { + padding: 10px; } -.c5.fi-icon--cursor-pointer * { - cursor: inherit; +.c3.fi-padding-insetXl { + padding: 16px; } -.c1.fi-action-menu--full-width { - width: 100%; +.c3.fi-padding-insetXxl { + padding: 20px; } -.c1 .fi-action-menu_button--icon-only { - min-width: 40px; - padding: 10px; +.c3.fi-padding-top-xxs { + padding-top: 5px; } -.c1 .fi-action-menu_button--icon-only .fi-button_icon--right .fi-icon { - margin-left: 0; +.c3.fi-padding-top-xs { + padding-top: 10px; } -.c8 { - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 400; +.c3.fi-padding-top-s { + padding-top: 15px; } -.c8.fi-action-menu-item { - position: relative; - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 400; - -webkit-text-decoration: none; - text-decoration: none; - color: hsl(0,0%,13%); - padding: 10px 20px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - cursor: pointer; - background: inherit; - border: none; - border-radius: 0; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; +.c3.fi-padding-top-m { + padding-top: 20px; } -.c8.fi-action-menu-item:active, -.c8.fi-action-menu-item:focus, -.c8.fi-action-menu-item:hover, -.c8.fi-action-menu-item:visited { - border: none; - outline: none; - color: hsl(0,0%,13%); +.c3.fi-padding-top-l { + padding-top: 25px; } -.c8.fi-action-menu-item .fi-icon { - margin-right: 8px; - width: 16px; - height: 16px; - pointer-events: none; +.c3.fi-padding-top-xl { + padding-top: 30px; } -.c8.fi-action-menu-item--disabled { - cursor: not-allowed; - color: hsl(202,7%,67%); +.c3.fi-padding-top-xxl { + padding-top: 40px; } -.c8.fi-action-menu-item--disabled:active, -.c8.fi-action-menu-item--disabled:focus, -.c8.fi-action-menu-item--disabled:hover, -.c8.fi-action-menu-item--disabled:visited { - color: hsl(202,7%,67%); +.c3.fi-padding-top-xxxl { + padding-top: 60px; } -.c8.fi-action-menu-item--selected { - color: hsl(0,0%,100%); - background: hsl(212,63%,45%); +.c3.fi-padding-top-xxxxl { + padding-top: 80px; } -.c8.fi-action-menu-item--selected:active, -.c8.fi-action-menu-item--selected:focus, -.c8.fi-action-menu-item--selected:hover, -.c8.fi-action-menu-item--selected:visited { - -webkit-text-decoration: none; - text-decoration: none; - color: hsl(0,0%,100%); - cursor: pointer; +.c3.fi-padding-top-insetXxs { + padding-top: 2px; } -.c8.fi-action-menu-item--selected:after { - content: ''; +.c3.fi-padding-top-insetXs { + padding-top: 4px; } -.c8.fi-action-menu-item--selected.fi-action-menu-item--disabled { - cursor: not-allowed; - color: hsl(202,7%,67%); +.c3.fi-padding-top-insetS { + padding-top: 6px; } -.c9.fi-action-menu-divider { - height: 17px; - min-height: 17px; - padding-left: 15px; - padding-right: 15px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; +.c3.fi-padding-top-insetM { + padding-top: 8px; } -.c9.fi-action-menu-divider .fi-action-menu-divider_line { - height: 1px; - width: 100%; - background-color: hsl(202,7%,80%); +.c3.fi-padding-top-insetL { + padding-top: 10px; } -@media (forced-colors:active) { - .c8.fi-action-menu-item--disabled { - color: GrayText; - } +.c3.fi-padding-top-insetXl { + padding-top: 16px; } -@media (forced-colors:active) { - .c8.fi-action-menu-item--selected:after { - position: absolute; - left: 1px; - right: 1px; - top: 1px; - bottom: 1px; - border: solid 3px Highlight; - } +.c3.fi-padding-top-insetXxl { + padding-top: 20px; } -@media (forced-colors:active) { - .c8.fi-action-menu-item--selected.fi-action-menu-item--disabled { - color: GrayText; - } +.c3.fi-padding-right-xxs { + padding-right: 5px; } -@media (forced-colors:active) { - .c9.fi-action-menu-divider .fi-action-menu-divider_line { - background-color: Highlight; - } +.c3.fi-padding-right-xs { + padding-right: 10px; } - -
-
- -
- -
- -`; +.c3.fi-padding-right-s { + padding-right: 15px; +} -exports[`movement in ActionMenu should match snapshot 2`] = ` -.c2 { - line-height: 1.15; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - margin: 0; - overflow: visible; - text-transform: none; - -webkit-appearance: button; - margin: 0; - padding: 0; - border: 0; - box-sizing: border-box; - font: 100% inherit; - line-height: 1; - text-align: left; - -webkit-text-decoration: none; - text-decoration: none; - vertical-align: baseline; - color: inherit; - background: none; - cursor: inherit; - display: inline-block; - max-width: 100%; - cursor: pointer; +.c3.fi-padding-right-m { + padding-right: 20px; } -.c2:-moz-focusring { - outline: 1px dotted ButtonText; +.c3.fi-padding-right-l { + padding-right: 25px; } -.c2::-moz-focus-inner { - border-style: none; - padding: 0; +.c3.fi-padding-right-xl { + padding-right: 30px; } -.c2::-webkit-file-upload-button { - -webkit-appearance: button; - font: inherit; +.c3.fi-padding-right-xxl { + padding-right: 40px; } -.c2::-webkit-inner-spin-button { - height: auto; +.c3.fi-padding-right-xxxl { + padding-right: 60px; } -.c2::-webkit-outer-spin-button { - height: auto; +.c3.fi-padding-right-xxxxl { + padding-right: 80px; } -.c2::before, -.c2::after { - box-sizing: border-box; +.c3.fi-padding-right-insetXxs { + padding-right: 2px; } -.c0 { - line-height: 1.15; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - margin: 0; - padding: 0; - border: 0; - box-sizing: border-box; - font: 100% inherit; - line-height: 1; - text-align: left; - -webkit-text-decoration: none; - text-decoration: none; - vertical-align: baseline; - color: inherit; - background: none; - cursor: inherit; - display: block; - max-width: 100%; - word-wrap: normal; - word-break: normal; - white-space: normal; +.c3.fi-padding-right-insetXs { + padding-right: 4px; } -.c0::before, -.c0::after { - box-sizing: border-box; +.c3.fi-padding-right-insetS { + padding-right: 6px; } -.c6 { - line-height: 1.15; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - margin: 0; - padding: 0; - border: 0; - box-sizing: border-box; - font: 100% inherit; - line-height: 1; - text-align: left; - -webkit-text-decoration: none; - text-decoration: none; - vertical-align: baseline; - color: inherit; - background: none; - cursor: inherit; - display: block; - max-width: 100%; - word-wrap: normal; - word-break: normal; - white-space: normal; +.c3.fi-padding-right-insetM { + padding-right: 8px; } -.c6::before, -.c6::after { - box-sizing: border-box; +.c3.fi-padding-right-insetL { + padding-right: 10px; } -.c4 { - line-height: 1.15; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - margin: 0; - padding: 0; - border: 0; - box-sizing: border-box; - font: 100% inherit; - line-height: 1; - text-align: left; - -webkit-text-decoration: none; - text-decoration: none; - vertical-align: baseline; - color: inherit; - background: none; - cursor: inherit; - display: inline; - max-width: 100%; - word-wrap: normal; - word-break: normal; - white-space: normal; +.c3.fi-padding-right-insetXl { + padding-right: 16px; } -.c4::before, -.c4::after { - box-sizing: border-box; +.c3.fi-padding-right-insetXxl { + padding-right: 20px; } -.c7 { - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 400; +.c3.fi-padding-bottom-xxs { + padding-bottom: 5px; } -.c7.fi-action-menu-popover { - background-color: hsl(0,0%,100%); - box-shadow: 0px 4px 8px 0px hsla(0,0%,13%,0.14); - border: 1px solid hsl(0,0%,58%); - border-radius: 2px; - padding-top: 8px; +.c3.fi-padding-bottom-xs { + padding-bottom: 10px; +} + +.c3.fi-padding-bottom-s { + padding-bottom: 15px; +} + +.c3.fi-padding-bottom-m { + padding-bottom: 20px; +} + +.c3.fi-padding-bottom-l { + padding-bottom: 25px; +} + +.c3.fi-padding-bottom-xl { + padding-bottom: 30px; +} + +.c3.fi-padding-bottom-xxl { + padding-bottom: 40px; +} + +.c3.fi-padding-bottom-xxxl { + padding-bottom: 60px; +} + +.c3.fi-padding-bottom-xxxxl { + padding-bottom: 80px; +} + +.c3.fi-padding-bottom-insetXxs { + padding-bottom: 2px; +} + +.c3.fi-padding-bottom-insetXs { + padding-bottom: 4px; +} + +.c3.fi-padding-bottom-insetS { + padding-bottom: 6px; +} + +.c3.fi-padding-bottom-insetM { padding-bottom: 8px; - z-index: 888; } -.c7.fi-action-menu-popover--hidden { - visibility: hidden; +.c3.fi-padding-bottom-insetL { + padding-bottom: 10px; } -.c7 .fi-action-menu-popover_list { - margin: 0; - padding-left: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - list-style-type: none; - overflow-y: auto; - max-height: 265px; +.c3.fi-padding-bottom-insetXl { + padding-bottom: 16px; } -.c7 .fi-action-menu-popover_list:focus { - outline: none; +.c3.fi-padding-bottom-insetXxl { + padding-bottom: 20px; } -.c7 .fi-action-menu-popover_popper-arrow::before, -.c7 .fi-action-menu-popover_popper-arrow::after { - content: ''; - position: absolute; - left: -9px; - height: 0; - width: 0; - border: solid transparent; - pointer-events: none; +.c3.fi-padding-left-xxs { + padding-left: 5px; } -.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='bottom-end'] { - bottom: 100%; +.c3.fi-padding-left-xs { + padding-left: 10px; } -.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='bottom-end']::before { - border-bottom-color: hsl(0,0%,58%); - border-width: 9px; - margin-right: -9px; - bottom: 100%; +.c3.fi-padding-left-s { + padding-left: 15px; } -.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='bottom-end']::after { - border-bottom-color: hsl(0,0%,100%); - border-width: 8px; - margin-right: -9px; - left: -8px; - bottom: 100%; +.c3.fi-padding-left-m { + padding-left: 20px; } -.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='top-end'] { - top: 100%; +.c3.fi-padding-left-l { + padding-left: 25px; } -.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='top-end']::before { - border-top-color: hsl(0,0%,58%); - border-width: 9px; - margin-right: -9px; +.c3.fi-padding-left-xl { + padding-left: 30px; } -.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='top-end']::after { - border-top-color: hsl(0,0%,100%); - border-width: 8px; - margin-right: -9px; - left: -8px; +.c3.fi-padding-left-xxl { + padding-left: 40px; } -.c3 { - color: hsl(0,0%,13%); - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 600; - font-size: 14px; - line-height: 20px; - padding: 10px 20px; - min-height: 40px; - color: hsl(0,0%,100%); - background: linear-gradient(0deg,hsl(212,63%,37%) 0%,hsl(212,63%,45%) 100%); - border-radius: 2px; - text-align: center; - text-shadow: 0 1px 1px hsla(214,100%,24%,0.5); - cursor: pointer; - border: 1px solid transparent; +.c3.fi-padding-left-xxxl { + padding-left: 60px; +} + +.c3.fi-padding-left-xxxxl { + padding-left: 80px; +} + +.c3.fi-padding-left-insetXxs { + padding-left: 2px; +} + +.c3.fi-padding-left-insetXs { + padding-left: 4px; +} + +.c3.fi-padding-left-insetS { + padding-left: 6px; +} + +.c3.fi-padding-left-insetM { + padding-left: 8px; +} + +.c3.fi-padding-left-insetL { + padding-left: 10px; +} + +.c3.fi-padding-left-insetXl { + padding-left: 16px; +} + +.c3.fi-padding-left-insetXxl { + padding-left: 20px; } .c3:focus { diff --git a/src/core/Block/Block.baseStyles.ts b/src/core/Block/Block.baseStyles.ts index 35d084a58..27f449b13 100644 --- a/src/core/Block/Block.baseStyles.ts +++ b/src/core/Block/Block.baseStyles.ts @@ -1,21 +1,12 @@ import { css } from 'styled-components'; import { SuomifiTheme } from '../theme'; import { element, font } from '../theme/reset'; -import { spacingModifiers } from '../theme/utils'; +import { spacingClasses } from '../theme/utils/spacing'; import { BlockVariant } from './Block'; export const baseStyles = (theme: SuomifiTheme, variant?: BlockVariant) => css` ${element(theme)} ${font(theme)('bodyText')} - ${spacingModifiers(theme)('margin')('&.fi-block--margin')} - ${spacingModifiers(theme)('margin-top')('&.fi-block--margin-top')} - ${spacingModifiers(theme)('margin-right')('&.fi-block--margin-right')} - ${spacingModifiers(theme)('margin-bottom')('&.fi-block--margin-bottom')} - ${spacingModifiers(theme)('margin-left')('&.fi-block--margin-left')} - ${spacingModifiers(theme)('padding')('&.fi-block--padding')} - ${spacingModifiers(theme)('padding-top')('&.fi-block--padding-top')} - ${spacingModifiers(theme)('padding-right')('&.fi-block--padding-right')} - ${spacingModifiers(theme)('padding-bottom')('&.fi-block--padding-bottom')} - ${spacingModifiers(theme)('padding-left')('&.fi-block--padding-left')} + ${spacingClasses(theme)} ${!!variant && variant === 'span' ? 'display: inline-block' : ''} `; diff --git a/src/core/Block/Block.tsx b/src/core/Block/Block.tsx index e70efcea0..5665bae50 100644 --- a/src/core/Block/Block.tsx +++ b/src/core/Block/Block.tsx @@ -1,7 +1,11 @@ import React, { Component, forwardRef } from 'react'; import { default as styled } from 'styled-components'; import classnames from 'classnames'; -import { SpacingWithoutInsetProp } from '../theme/utils/spacing'; +import { + SpacingProps, + getSpacingClassNamesFromProps, + separateSpacingProps, +} from '../theme/utils/spacing'; import { baseStyles } from './Block.baseStyles'; import { HtmlDivWithNativeRef, HtmlDivProps } from '../../reset'; import { SuomifiThemeProp, SuomifiThemeConsumer } from '../theme'; @@ -18,35 +22,7 @@ export type BlockVariant = | 'main' | 'footer'; -export interface BlockProps extends HtmlDivProps { - /** Padding from theme */ - padding?: SpacingWithoutInsetProp; - /** Padding-top from theme */ - pt?: SpacingWithoutInsetProp; - /** Padding-right from theme */ - pr?: SpacingWithoutInsetProp; - /** Padding-bottom from theme */ - pb?: SpacingWithoutInsetProp; - /** Padding-left from theme */ - pl?: SpacingWithoutInsetProp; - /** Padding on the x-axis (left & right) from theme */ - px?: SpacingWithoutInsetProp; - /** Padding on the y-axis (top & bottom) from theme */ - py?: SpacingWithoutInsetProp; - /** Margin from theme */ - margin?: SpacingWithoutInsetProp; - /** Margin-top from theme */ - mt?: SpacingWithoutInsetProp; - /** Margin-right from theme */ - mr?: SpacingWithoutInsetProp; - /** Margin-bottom from theme */ - mb?: SpacingWithoutInsetProp; - /** Margin-left from theme */ - ml?: SpacingWithoutInsetProp; - /** Margin on the x-axis (left & right) from theme */ - mx?: SpacingWithoutInsetProp; - /** Margin on the y-axis (top & bottom) from theme */ - my?: SpacingWithoutInsetProp; +export interface BlockProps extends HtmlDivProps, SpacingProps { /** * `'default'` | `'div'` | `'span'` | `'section'` | `'header'` | `'nav'` | `'main'` | `'footer'` * @@ -61,26 +37,9 @@ export interface BlockProps extends HtmlDivProps { class SemanticBlock extends Component { render() { - const { - className, - variant, - padding, - margin, - mt, - mr, - mb, - ml, - mx, - my, - pt, - pr, - pb, - pl, - px, - py, - forwardedRef, - ...passProps - } = this.props; + const [spacingProps, baseProps] = separateSpacingProps(this.props); + const spacingClassnames = getSpacingClassNamesFromProps(spacingProps); + const { className, variant, forwardedRef, ...passProps } = baseProps; const ComponentVariant = !variant || variant === 'default' ? HtmlDivWithNativeRef : variant; @@ -89,26 +48,8 @@ class SemanticBlock extends Component { ); diff --git a/src/core/Block/__snapshots__/Block.test.tsx.snap b/src/core/Block/__snapshots__/Block.test.tsx.snap index 6c1ae64b9..792cdec7e 100644 --- a/src/core/Block/__snapshots__/Block.test.tsx.snap +++ b/src/core/Block/__snapshots__/Block.test.tsx.snap @@ -47,643 +47,643 @@ exports[`calling render with the same component on the same container does not r font-weight: 400; } -.c1.fi-block--margin-xxs { +.c1.fi-margin-xxs { margin: 5px; } -.c1.fi-block--margin-xs { +.c1.fi-margin-xs { margin: 10px; } -.c1.fi-block--margin-s { +.c1.fi-margin-s { margin: 15px; } -.c1.fi-block--margin-m { +.c1.fi-margin-m { margin: 20px; } -.c1.fi-block--margin-l { +.c1.fi-margin-l { margin: 25px; } -.c1.fi-block--margin-xl { +.c1.fi-margin-xl { margin: 30px; } -.c1.fi-block--margin-xxl { +.c1.fi-margin-xxl { margin: 40px; } -.c1.fi-block--margin-xxxl { +.c1.fi-margin-xxxl { margin: 60px; } -.c1.fi-block--margin-xxxxl { +.c1.fi-margin-xxxxl { margin: 80px; } -.c1.fi-block--margin-insetXxs { +.c1.fi-margin-insetXxs { margin: 2px; } -.c1.fi-block--margin-insetXs { +.c1.fi-margin-insetXs { margin: 4px; } -.c1.fi-block--margin-insetS { +.c1.fi-margin-insetS { margin: 6px; } -.c1.fi-block--margin-insetM { +.c1.fi-margin-insetM { margin: 8px; } -.c1.fi-block--margin-insetL { +.c1.fi-margin-insetL { margin: 10px; } -.c1.fi-block--margin-insetXl { +.c1.fi-margin-insetXl { margin: 16px; } -.c1.fi-block--margin-insetXxl { +.c1.fi-margin-insetXxl { margin: 20px; } -.c1.fi-block--margin-top-xxs { +.c1.fi-margin-top-xxs { margin-top: 5px; } -.c1.fi-block--margin-top-xs { +.c1.fi-margin-top-xs { margin-top: 10px; } -.c1.fi-block--margin-top-s { +.c1.fi-margin-top-s { margin-top: 15px; } -.c1.fi-block--margin-top-m { +.c1.fi-margin-top-m { margin-top: 20px; } -.c1.fi-block--margin-top-l { +.c1.fi-margin-top-l { margin-top: 25px; } -.c1.fi-block--margin-top-xl { +.c1.fi-margin-top-xl { margin-top: 30px; } -.c1.fi-block--margin-top-xxl { +.c1.fi-margin-top-xxl { margin-top: 40px; } -.c1.fi-block--margin-top-xxxl { +.c1.fi-margin-top-xxxl { margin-top: 60px; } -.c1.fi-block--margin-top-xxxxl { +.c1.fi-margin-top-xxxxl { margin-top: 80px; } -.c1.fi-block--margin-top-insetXxs { +.c1.fi-margin-top-insetXxs { margin-top: 2px; } -.c1.fi-block--margin-top-insetXs { +.c1.fi-margin-top-insetXs { margin-top: 4px; } -.c1.fi-block--margin-top-insetS { +.c1.fi-margin-top-insetS { margin-top: 6px; } -.c1.fi-block--margin-top-insetM { +.c1.fi-margin-top-insetM { margin-top: 8px; } -.c1.fi-block--margin-top-insetL { +.c1.fi-margin-top-insetL { margin-top: 10px; } -.c1.fi-block--margin-top-insetXl { +.c1.fi-margin-top-insetXl { margin-top: 16px; } -.c1.fi-block--margin-top-insetXxl { +.c1.fi-margin-top-insetXxl { margin-top: 20px; } -.c1.fi-block--margin-right-xxs { +.c1.fi-margin-right-xxs { margin-right: 5px; } -.c1.fi-block--margin-right-xs { +.c1.fi-margin-right-xs { margin-right: 10px; } -.c1.fi-block--margin-right-s { +.c1.fi-margin-right-s { margin-right: 15px; } -.c1.fi-block--margin-right-m { +.c1.fi-margin-right-m { margin-right: 20px; } -.c1.fi-block--margin-right-l { +.c1.fi-margin-right-l { margin-right: 25px; } -.c1.fi-block--margin-right-xl { +.c1.fi-margin-right-xl { margin-right: 30px; } -.c1.fi-block--margin-right-xxl { +.c1.fi-margin-right-xxl { margin-right: 40px; } -.c1.fi-block--margin-right-xxxl { +.c1.fi-margin-right-xxxl { margin-right: 60px; } -.c1.fi-block--margin-right-xxxxl { +.c1.fi-margin-right-xxxxl { margin-right: 80px; } -.c1.fi-block--margin-right-insetXxs { +.c1.fi-margin-right-insetXxs { margin-right: 2px; } -.c1.fi-block--margin-right-insetXs { +.c1.fi-margin-right-insetXs { margin-right: 4px; } -.c1.fi-block--margin-right-insetS { +.c1.fi-margin-right-insetS { margin-right: 6px; } -.c1.fi-block--margin-right-insetM { +.c1.fi-margin-right-insetM { margin-right: 8px; } -.c1.fi-block--margin-right-insetL { +.c1.fi-margin-right-insetL { margin-right: 10px; } -.c1.fi-block--margin-right-insetXl { +.c1.fi-margin-right-insetXl { margin-right: 16px; } -.c1.fi-block--margin-right-insetXxl { +.c1.fi-margin-right-insetXxl { margin-right: 20px; } -.c1.fi-block--margin-bottom-xxs { +.c1.fi-margin-bottom-xxs { margin-bottom: 5px; } -.c1.fi-block--margin-bottom-xs { +.c1.fi-margin-bottom-xs { margin-bottom: 10px; } -.c1.fi-block--margin-bottom-s { +.c1.fi-margin-bottom-s { margin-bottom: 15px; } -.c1.fi-block--margin-bottom-m { +.c1.fi-margin-bottom-m { margin-bottom: 20px; } -.c1.fi-block--margin-bottom-l { +.c1.fi-margin-bottom-l { margin-bottom: 25px; } -.c1.fi-block--margin-bottom-xl { +.c1.fi-margin-bottom-xl { margin-bottom: 30px; } -.c1.fi-block--margin-bottom-xxl { +.c1.fi-margin-bottom-xxl { margin-bottom: 40px; } -.c1.fi-block--margin-bottom-xxxl { +.c1.fi-margin-bottom-xxxl { margin-bottom: 60px; } -.c1.fi-block--margin-bottom-xxxxl { +.c1.fi-margin-bottom-xxxxl { margin-bottom: 80px; } -.c1.fi-block--margin-bottom-insetXxs { +.c1.fi-margin-bottom-insetXxs { margin-bottom: 2px; } -.c1.fi-block--margin-bottom-insetXs { +.c1.fi-margin-bottom-insetXs { margin-bottom: 4px; } -.c1.fi-block--margin-bottom-insetS { +.c1.fi-margin-bottom-insetS { margin-bottom: 6px; } -.c1.fi-block--margin-bottom-insetM { +.c1.fi-margin-bottom-insetM { margin-bottom: 8px; } -.c1.fi-block--margin-bottom-insetL { +.c1.fi-margin-bottom-insetL { margin-bottom: 10px; } -.c1.fi-block--margin-bottom-insetXl { +.c1.fi-margin-bottom-insetXl { margin-bottom: 16px; } -.c1.fi-block--margin-bottom-insetXxl { +.c1.fi-margin-bottom-insetXxl { margin-bottom: 20px; } -.c1.fi-block--margin-left-xxs { +.c1.fi-margin-left-xxs { margin-left: 5px; } -.c1.fi-block--margin-left-xs { +.c1.fi-margin-left-xs { margin-left: 10px; } -.c1.fi-block--margin-left-s { +.c1.fi-margin-left-s { margin-left: 15px; } -.c1.fi-block--margin-left-m { +.c1.fi-margin-left-m { margin-left: 20px; } -.c1.fi-block--margin-left-l { +.c1.fi-margin-left-l { margin-left: 25px; } -.c1.fi-block--margin-left-xl { +.c1.fi-margin-left-xl { margin-left: 30px; } -.c1.fi-block--margin-left-xxl { +.c1.fi-margin-left-xxl { margin-left: 40px; } -.c1.fi-block--margin-left-xxxl { +.c1.fi-margin-left-xxxl { margin-left: 60px; } -.c1.fi-block--margin-left-xxxxl { +.c1.fi-margin-left-xxxxl { margin-left: 80px; } -.c1.fi-block--margin-left-insetXxs { +.c1.fi-margin-left-insetXxs { margin-left: 2px; } -.c1.fi-block--margin-left-insetXs { +.c1.fi-margin-left-insetXs { margin-left: 4px; } -.c1.fi-block--margin-left-insetS { +.c1.fi-margin-left-insetS { margin-left: 6px; } -.c1.fi-block--margin-left-insetM { +.c1.fi-margin-left-insetM { margin-left: 8px; } -.c1.fi-block--margin-left-insetL { +.c1.fi-margin-left-insetL { margin-left: 10px; } -.c1.fi-block--margin-left-insetXl { +.c1.fi-margin-left-insetXl { margin-left: 16px; } -.c1.fi-block--margin-left-insetXxl { +.c1.fi-margin-left-insetXxl { margin-left: 20px; } -.c1.fi-block--padding-xxs { +.c1.fi-padding-xxs { padding: 5px; } -.c1.fi-block--padding-xs { +.c1.fi-padding-xs { padding: 10px; } -.c1.fi-block--padding-s { +.c1.fi-padding-s { padding: 15px; } -.c1.fi-block--padding-m { +.c1.fi-padding-m { padding: 20px; } -.c1.fi-block--padding-l { +.c1.fi-padding-l { padding: 25px; } -.c1.fi-block--padding-xl { +.c1.fi-padding-xl { padding: 30px; } -.c1.fi-block--padding-xxl { +.c1.fi-padding-xxl { padding: 40px; } -.c1.fi-block--padding-xxxl { +.c1.fi-padding-xxxl { padding: 60px; } -.c1.fi-block--padding-xxxxl { +.c1.fi-padding-xxxxl { padding: 80px; } -.c1.fi-block--padding-insetXxs { +.c1.fi-padding-insetXxs { padding: 2px; } -.c1.fi-block--padding-insetXs { +.c1.fi-padding-insetXs { padding: 4px; } -.c1.fi-block--padding-insetS { +.c1.fi-padding-insetS { padding: 6px; } -.c1.fi-block--padding-insetM { +.c1.fi-padding-insetM { padding: 8px; } -.c1.fi-block--padding-insetL { +.c1.fi-padding-insetL { padding: 10px; } -.c1.fi-block--padding-insetXl { +.c1.fi-padding-insetXl { padding: 16px; } -.c1.fi-block--padding-insetXxl { +.c1.fi-padding-insetXxl { padding: 20px; } -.c1.fi-block--padding-top-xxs { +.c1.fi-padding-top-xxs { padding-top: 5px; } -.c1.fi-block--padding-top-xs { +.c1.fi-padding-top-xs { padding-top: 10px; } -.c1.fi-block--padding-top-s { +.c1.fi-padding-top-s { padding-top: 15px; } -.c1.fi-block--padding-top-m { +.c1.fi-padding-top-m { padding-top: 20px; } -.c1.fi-block--padding-top-l { +.c1.fi-padding-top-l { padding-top: 25px; } -.c1.fi-block--padding-top-xl { +.c1.fi-padding-top-xl { padding-top: 30px; } -.c1.fi-block--padding-top-xxl { +.c1.fi-padding-top-xxl { padding-top: 40px; } -.c1.fi-block--padding-top-xxxl { +.c1.fi-padding-top-xxxl { padding-top: 60px; } -.c1.fi-block--padding-top-xxxxl { +.c1.fi-padding-top-xxxxl { padding-top: 80px; } -.c1.fi-block--padding-top-insetXxs { +.c1.fi-padding-top-insetXxs { padding-top: 2px; } -.c1.fi-block--padding-top-insetXs { +.c1.fi-padding-top-insetXs { padding-top: 4px; } -.c1.fi-block--padding-top-insetS { +.c1.fi-padding-top-insetS { padding-top: 6px; } -.c1.fi-block--padding-top-insetM { +.c1.fi-padding-top-insetM { padding-top: 8px; } -.c1.fi-block--padding-top-insetL { +.c1.fi-padding-top-insetL { padding-top: 10px; } -.c1.fi-block--padding-top-insetXl { +.c1.fi-padding-top-insetXl { padding-top: 16px; } -.c1.fi-block--padding-top-insetXxl { +.c1.fi-padding-top-insetXxl { padding-top: 20px; } -.c1.fi-block--padding-right-xxs { +.c1.fi-padding-right-xxs { padding-right: 5px; } -.c1.fi-block--padding-right-xs { +.c1.fi-padding-right-xs { padding-right: 10px; } -.c1.fi-block--padding-right-s { +.c1.fi-padding-right-s { padding-right: 15px; } -.c1.fi-block--padding-right-m { +.c1.fi-padding-right-m { padding-right: 20px; } -.c1.fi-block--padding-right-l { +.c1.fi-padding-right-l { padding-right: 25px; } -.c1.fi-block--padding-right-xl { +.c1.fi-padding-right-xl { padding-right: 30px; } -.c1.fi-block--padding-right-xxl { +.c1.fi-padding-right-xxl { padding-right: 40px; } -.c1.fi-block--padding-right-xxxl { +.c1.fi-padding-right-xxxl { padding-right: 60px; } -.c1.fi-block--padding-right-xxxxl { +.c1.fi-padding-right-xxxxl { padding-right: 80px; } -.c1.fi-block--padding-right-insetXxs { +.c1.fi-padding-right-insetXxs { padding-right: 2px; } -.c1.fi-block--padding-right-insetXs { +.c1.fi-padding-right-insetXs { padding-right: 4px; } -.c1.fi-block--padding-right-insetS { +.c1.fi-padding-right-insetS { padding-right: 6px; } -.c1.fi-block--padding-right-insetM { +.c1.fi-padding-right-insetM { padding-right: 8px; } -.c1.fi-block--padding-right-insetL { +.c1.fi-padding-right-insetL { padding-right: 10px; } -.c1.fi-block--padding-right-insetXl { +.c1.fi-padding-right-insetXl { padding-right: 16px; } -.c1.fi-block--padding-right-insetXxl { +.c1.fi-padding-right-insetXxl { padding-right: 20px; } -.c1.fi-block--padding-bottom-xxs { +.c1.fi-padding-bottom-xxs { padding-bottom: 5px; } -.c1.fi-block--padding-bottom-xs { +.c1.fi-padding-bottom-xs { padding-bottom: 10px; } -.c1.fi-block--padding-bottom-s { +.c1.fi-padding-bottom-s { padding-bottom: 15px; } -.c1.fi-block--padding-bottom-m { +.c1.fi-padding-bottom-m { padding-bottom: 20px; } -.c1.fi-block--padding-bottom-l { +.c1.fi-padding-bottom-l { padding-bottom: 25px; } -.c1.fi-block--padding-bottom-xl { +.c1.fi-padding-bottom-xl { padding-bottom: 30px; } -.c1.fi-block--padding-bottom-xxl { +.c1.fi-padding-bottom-xxl { padding-bottom: 40px; } -.c1.fi-block--padding-bottom-xxxl { +.c1.fi-padding-bottom-xxxl { padding-bottom: 60px; } -.c1.fi-block--padding-bottom-xxxxl { +.c1.fi-padding-bottom-xxxxl { padding-bottom: 80px; } -.c1.fi-block--padding-bottom-insetXxs { +.c1.fi-padding-bottom-insetXxs { padding-bottom: 2px; } -.c1.fi-block--padding-bottom-insetXs { +.c1.fi-padding-bottom-insetXs { padding-bottom: 4px; } -.c1.fi-block--padding-bottom-insetS { +.c1.fi-padding-bottom-insetS { padding-bottom: 6px; } -.c1.fi-block--padding-bottom-insetM { +.c1.fi-padding-bottom-insetM { padding-bottom: 8px; } -.c1.fi-block--padding-bottom-insetL { +.c1.fi-padding-bottom-insetL { padding-bottom: 10px; } -.c1.fi-block--padding-bottom-insetXl { +.c1.fi-padding-bottom-insetXl { padding-bottom: 16px; } -.c1.fi-block--padding-bottom-insetXxl { +.c1.fi-padding-bottom-insetXxl { padding-bottom: 20px; } -.c1.fi-block--padding-left-xxs { +.c1.fi-padding-left-xxs { padding-left: 5px; } -.c1.fi-block--padding-left-xs { +.c1.fi-padding-left-xs { padding-left: 10px; } -.c1.fi-block--padding-left-s { +.c1.fi-padding-left-s { padding-left: 15px; } -.c1.fi-block--padding-left-m { +.c1.fi-padding-left-m { padding-left: 20px; } -.c1.fi-block--padding-left-l { +.c1.fi-padding-left-l { padding-left: 25px; } -.c1.fi-block--padding-left-xl { +.c1.fi-padding-left-xl { padding-left: 30px; } -.c1.fi-block--padding-left-xxl { +.c1.fi-padding-left-xxl { padding-left: 40px; } -.c1.fi-block--padding-left-xxxl { +.c1.fi-padding-left-xxxl { padding-left: 60px; } -.c1.fi-block--padding-left-xxxxl { +.c1.fi-padding-left-xxxxl { padding-left: 80px; } -.c1.fi-block--padding-left-insetXxs { +.c1.fi-padding-left-insetXxs { padding-left: 2px; } -.c1.fi-block--padding-left-insetXs { +.c1.fi-padding-left-insetXs { padding-left: 4px; } -.c1.fi-block--padding-left-insetS { +.c1.fi-padding-left-insetS { padding-left: 6px; } -.c1.fi-block--padding-left-insetM { +.c1.fi-padding-left-insetM { padding-left: 8px; } -.c1.fi-block--padding-left-insetL { +.c1.fi-padding-left-insetL { padding-left: 10px; } -.c1.fi-block--padding-left-insetXl { +.c1.fi-padding-left-insetXl { padding-left: 16px; } -.c1.fi-block--padding-left-insetXxl { +.c1.fi-padding-left-insetXxl { padding-left: 20px; } @@ -696,7 +696,7 @@ exports[`calling render with the same component on the same container does not r Hey this is test
Hey this is test lead
diff --git a/src/core/Button/Button.baseStyles.tsx b/src/core/Button/Button.baseStyles.tsx index 221df65eb..cce48ee77 100644 --- a/src/core/Button/Button.baseStyles.tsx +++ b/src/core/Button/Button.baseStyles.tsx @@ -2,6 +2,7 @@ import { css } from 'styled-components'; import { SuomifiTheme } from '../theme'; import { button } from '../theme/reset'; import { alphaHex } from '../../utils/css'; +import { spacingClasses } from '../theme/utils/spacing'; const invertedStyles = (theme: SuomifiTheme) => css` &.fi-button--inverted { @@ -107,6 +108,8 @@ export const baseStyles = (theme: SuomifiTheme) => css` cursor: pointer; border: 1px solid transparent; /* For high contrast mode */ + ${spacingClasses(theme)} + &:focus { position: relative; ${theme.focuses.highContrastFocus} /* For high contrast mode */ diff --git a/src/core/Button/Button.md b/src/core/Button/Button.md index fe6214fda..9098881d9 100644 --- a/src/core/Button/Button.md +++ b/src/core/Button/Button.md @@ -21,9 +21,30 @@ Examples: ```js import { Button } from 'suomifi-ui-components'; -; +const exampleRef = React.createRef(); + +<> + + + + +; ``` ### Full width button diff --git a/src/core/Button/Button.tsx b/src/core/Button/Button.tsx index 1e8ddfe77..b174e51f1 100644 --- a/src/core/Button/Button.tsx +++ b/src/core/Button/Button.tsx @@ -4,6 +4,11 @@ import classnames from 'classnames'; import { baseStyles } from './Button.baseStyles'; import { HtmlButton, HtmlButtonProps, HtmlSpan } from '../../reset'; import { SuomifiThemeConsumer, SuomifiThemeProp } from '../theme'; +import { + getSpacingClassNamesFromProps, + separateSpacingProps, + SpacingProps, +} from '../theme/utils/spacing'; export type ButtonVariant = | 'default' @@ -13,7 +18,8 @@ export type ButtonVariant = | 'secondaryLight'; export interface ButtonProps - extends Omit { + extends Omit, + SpacingProps { /** * Variant for the button * `default` | `inverted` | `secondary` | `secondaryNoBorder` | `secondaryLight` @@ -62,6 +68,8 @@ const fullWidthClassName = `${baseClassName}--fullwidth`; class BaseButton extends Component { render() { + const [spacingProps, baseProps] = separateSpacingProps(this.props); + const spacingClassnames = getSpacingClassNamesFromProps(spacingProps); const { fullWidth, variant = 'default', @@ -74,7 +82,7 @@ class BaseButton extends Component { forwardedRef, children, ...passProps - } = this.props; + } = baseProps; const onClickProp = !!disabled || !!ariaDisabled ? {} : { onClick }; return ( @@ -85,7 +93,7 @@ class BaseButton extends Component { aria-disabled={!!ariaDisabled || !!disabled} forwardedRef={forwardedRef} disabled={!!disabled} - className={classnames(baseClassName, className, { + className={classnames(baseClassName, className, spacingClassnames, { [disabledClassName]: !!disabled || !!ariaDisabled, [`${baseClassName}--inverted`]: variant === 'inverted', [`${baseClassName}--secondary`]: variant === 'secondary', diff --git a/src/core/Button/__snapshots__/Button.test.tsx.snap b/src/core/Button/__snapshots__/Button.test.tsx.snap index 8074de637..36e129789 100644 --- a/src/core/Button/__snapshots__/Button.test.tsx.snap +++ b/src/core/Button/__snapshots__/Button.test.tsx.snap @@ -111,342 +111,658 @@ exports[`Button variant default should match snapshot 1`] = ` border: 1px solid transparent; } -.c1:focus { - position: relative; - outline: 3px solid transparent; +.c1.fi-margin-xxs { + margin: 5px; } -.c1:focus::after { - content: ''; - position: absolute; - pointer-events: none; - top: -2px; - right: -2px; - bottom: -2px; - left: -2px; - border-radius: 2px; - background-color: transparent; - border: 0px solid hsl(0,0%,100%); - box-sizing: border-box; - box-shadow: 0 0 0 2px hsl(196,77%,44%); - z-index: 9999; +.c1.fi-margin-xs { + margin: 10px; } -.c1:hover { - background: linear-gradient(0deg,hsl(212,63%,45%) 0%,hsl(212,63%,49%) 100%); - outline: 2px solid transparent; +.c1.fi-margin-s { + margin: 15px; } -.c1:active { - background: hsl(212,63%,37%); +.c1.fi-margin-m { + margin: 20px; } -.c1.fi-button--disabled, -.c1[disabled], -.c1:disabled { - text-shadow: 0 1px 1px rgba(33,33,33,0.5); - background: linear-gradient(0deg,hsl(202,7%,67%) 0%,hsl(202,7%,80%) 100%); - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - cursor: not-allowed; +.c1.fi-margin-l { + margin: 25px; } -.c1.fi-button--disabled::after { - border: none; - box-shadow: none; +.c1.fi-margin-xl { + margin: 30px; } -.c1.fi-button--fullwidth { - display: block; - width: 100%; +.c1.fi-margin-xxl { + margin: 40px; } -.c1.fi-button--inverted { - background: none; - background-color: hsl(212,63%,45%); - border: 1px solid hsl(0,0%,100%); - text-shadow: none; +.c1.fi-margin-xxxl { + margin: 60px; } -.c1.fi-button--inverted:hover { - background: linear-gradient(-180deg,hsla(0,0%,100%,0.1) 0%,hsla(0,0%,100%,0) 100%); +.c1.fi-margin-xxxxl { + margin: 80px; } -.c1.fi-button--inverted:active { - background: none; - background-color: hsl(212,63%,45%); +.c1.fi-margin-insetXxs { + margin: 2px; } -.c1.fi-button--inverted.fi-button--disabled, -.c1.fi-button--inverted[disabled], -.c1.fi-button--inverted:disabled { - opacity: 0.41; - background: none; - background-color: none; +.c1.fi-margin-insetXs { + margin: 4px; } -.c1.fi-button--secondary { - color: hsl(212,63%,45%); - background: none; - background-color: hsl(0,0%,100%); - border: 1px solid hsl(212,63%,45%); - text-shadow: none; +.c1.fi-margin-insetS { + margin: 6px; } -.c1.fi-button--secondary:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); +.c1.fi-margin-insetM { + margin: 8px; } -.c1.fi-button--secondary:active { - background: none; - background-color: hsl(202,7%,93%); +.c1.fi-margin-insetL { + margin: 10px; } -.c1.fi-button--secondary.fi-button--disabled, -.c1.fi-button--secondary[disabled], -.c1.fi-button--secondary:disabled { - color: hsl(202,7%,67%); - text-shadow: none; - background: none; - background-color: hsl(212,63%,98%); - border-color: hsl(202,7%,67%); +.c1.fi-margin-insetXl { + margin: 16px; } -.c1.fi-button--secondary-noborder { - color: hsl(212,63%,45%); - background: none; - background-color: hsl(0,0%,100%); - border: 1px solid hsl(212,63%,45%); - text-shadow: none; - border: none; - background-color: transparent; +.c1.fi-margin-insetXxl { + margin: 20px; } -.c1.fi-button--secondary-noborder:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); +.c1.fi-margin-top-xxs { + margin-top: 5px; } -.c1.fi-button--secondary-noborder:active { - background: none; - background-color: hsl(202,7%,93%); +.c1.fi-margin-top-xs { + margin-top: 10px; } -.c1.fi-button--secondary-noborder.fi-button--disabled, -.c1.fi-button--secondary-noborder[disabled], -.c1.fi-button--secondary-noborder:disabled { - color: hsl(202,7%,67%); - text-shadow: none; - background: none; - background-color: hsl(212,63%,98%); - border-color: hsl(202,7%,67%); +.c1.fi-margin-top-s { + margin-top: 15px; } -.c1.fi-button--secondary-light { - color: hsl(212,63%,45%); - color: hsl(212,63%,45%); - background: none; - background-color: hsl(0,0%,100%); - border: 1px solid hsl(212,63%,45%); - text-shadow: none; - background: linear-gradient(0deg,hsl(215,100%,95%),hsl(215,100%,97%)); - border: none; +.c1.fi-margin-top-m { + margin-top: 20px; } -.c1.fi-button--secondary-light:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); +.c1.fi-margin-top-l { + margin-top: 25px; } -.c1.fi-button--secondary-light:active { - background: none; - background-color: hsl(202,7%,93%); +.c1.fi-margin-top-xl { + margin-top: 30px; } -.c1.fi-button--secondary-light.fi-button--disabled, -.c1.fi-button--secondary-light[disabled], -.c1.fi-button--secondary-light:disabled { - color: hsl(202,7%,67%); - text-shadow: none; - background: none; - background-color: hsl(212,63%,98%); - border-color: hsl(202,7%,67%); +.c1.fi-margin-top-xxl { + margin-top: 40px; } -.c1.fi-button--secondary-light:hover { - background: linear-gradient(0deg,hsl(215,100%,97%),hsl(212,63%,98%)); +.c1.fi-margin-top-xxxl { + margin-top: 60px; } -.c1.fi-button--secondary-light:active { - background: linear-gradient(0deg,hsl(202,7%,93%),hsl(202,7%,97%)); +.c1.fi-margin-top-xxxxl { + margin-top: 80px; } -.c1.fi-button--secondary-light.fi-button--disabled, -.c1.fi-button--secondary-light[disabled], -.c1.fi-button--secondary-light:disabled { - color: hsl(202,7%,67%); - background: none; - background-color: hsl(202,7%,97%); +.c1.fi-margin-top-insetXxs { + margin-top: 2px; } -.c1 > .fi-button_icon > .fi-icon { - width: 16px; - height: 16px; - margin-right: 8px; - vertical-align: middle; - -webkit-transform: translateY(-0.1em); - -ms-transform: translateY(-0.1em); - transform: translateY(-0.1em); +.c1.fi-margin-top-insetXs { + margin-top: 4px; } -.c1 > .fi-button_icon--right > .fi-icon { - margin-right: 0; - margin-left: 8px; +.c1.fi-margin-top-insetS { + margin-top: 6px; } -.c1.fi-button--disabled > .fi-button_icon { - cursor: not-allowed; +.c1.fi-margin-top-insetM { + margin-top: 8px; } - -`; +.c1.fi-margin-top-insetL { + margin-top: 10px; +} -exports[`Button variant inverted should match snapshot 1`] = ` -.c0 { - line-height: 1.15; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - margin: 0; - overflow: visible; - text-transform: none; - -webkit-appearance: button; - margin: 0; - padding: 0; - border: 0; - box-sizing: border-box; - font: 100% inherit; - line-height: 1; - text-align: left; - -webkit-text-decoration: none; - text-decoration: none; - vertical-align: baseline; - color: inherit; - background: none; - cursor: inherit; - display: inline-block; - max-width: 100%; - cursor: pointer; +.c1.fi-margin-top-insetXl { + margin-top: 16px; } -.c0:-moz-focusring { - outline: 1px dotted ButtonText; +.c1.fi-margin-top-insetXxl { + margin-top: 20px; } -.c0::-moz-focus-inner { - border-style: none; - padding: 0; +.c1.fi-margin-right-xxs { + margin-right: 5px; } -.c0::-webkit-file-upload-button { - -webkit-appearance: button; - font: inherit; +.c1.fi-margin-right-xs { + margin-right: 10px; } -.c0::-webkit-inner-spin-button { - height: auto; +.c1.fi-margin-right-s { + margin-right: 15px; } -.c0::-webkit-outer-spin-button { - height: auto; +.c1.fi-margin-right-m { + margin-right: 20px; } -.c0::before, -.c0::after { - box-sizing: border-box; +.c1.fi-margin-right-l { + margin-right: 25px; } -.c2 { - line-height: 1.15; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - margin: 0; - padding: 0; - border: 0; - box-sizing: border-box; - font: 100% inherit; - line-height: 1; - text-align: left; - -webkit-text-decoration: none; - text-decoration: none; - vertical-align: baseline; - color: inherit; - background: none; - cursor: inherit; - display: inline; - max-width: 100%; - word-wrap: normal; - word-break: normal; - white-space: normal; +.c1.fi-margin-right-xl { + margin-right: 30px; } -.c2::before, -.c2::after { - box-sizing: border-box; +.c1.fi-margin-right-xxl { + margin-right: 40px; } -.c1 { - color: hsl(0,0%,13%); - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 600; - font-size: 14px; - line-height: 20px; - padding: 10px 20px; - min-height: 40px; - color: hsl(0,0%,100%); - background: linear-gradient(0deg,hsl(212,63%,37%) 0%,hsl(212,63%,45%) 100%); - border-radius: 2px; - text-align: center; - text-shadow: 0 1px 1px hsla(214,100%,24%,0.5); - cursor: pointer; - border: 1px solid transparent; +.c1.fi-margin-right-xxxl { + margin-right: 60px; } -.c1:focus { - position: relative; - outline: 3px solid transparent; +.c1.fi-margin-right-xxxxl { + margin-right: 80px; } -.c1:focus::after { - content: ''; - position: absolute; - pointer-events: none; - top: -2px; - right: -2px; - bottom: -2px; +.c1.fi-margin-right-insetXxs { + margin-right: 2px; +} + +.c1.fi-margin-right-insetXs { + margin-right: 4px; +} + +.c1.fi-margin-right-insetS { + margin-right: 6px; +} + +.c1.fi-margin-right-insetM { + margin-right: 8px; +} + +.c1.fi-margin-right-insetL { + margin-right: 10px; +} + +.c1.fi-margin-right-insetXl { + margin-right: 16px; +} + +.c1.fi-margin-right-insetXxl { + margin-right: 20px; +} + +.c1.fi-margin-bottom-xxs { + margin-bottom: 5px; +} + +.c1.fi-margin-bottom-xs { + margin-bottom: 10px; +} + +.c1.fi-margin-bottom-s { + margin-bottom: 15px; +} + +.c1.fi-margin-bottom-m { + margin-bottom: 20px; +} + +.c1.fi-margin-bottom-l { + margin-bottom: 25px; +} + +.c1.fi-margin-bottom-xl { + margin-bottom: 30px; +} + +.c1.fi-margin-bottom-xxl { + margin-bottom: 40px; +} + +.c1.fi-margin-bottom-xxxl { + margin-bottom: 60px; +} + +.c1.fi-margin-bottom-xxxxl { + margin-bottom: 80px; +} + +.c1.fi-margin-bottom-insetXxs { + margin-bottom: 2px; +} + +.c1.fi-margin-bottom-insetXs { + margin-bottom: 4px; +} + +.c1.fi-margin-bottom-insetS { + margin-bottom: 6px; +} + +.c1.fi-margin-bottom-insetM { + margin-bottom: 8px; +} + +.c1.fi-margin-bottom-insetL { + margin-bottom: 10px; +} + +.c1.fi-margin-bottom-insetXl { + margin-bottom: 16px; +} + +.c1.fi-margin-bottom-insetXxl { + margin-bottom: 20px; +} + +.c1.fi-margin-left-xxs { + margin-left: 5px; +} + +.c1.fi-margin-left-xs { + margin-left: 10px; +} + +.c1.fi-margin-left-s { + margin-left: 15px; +} + +.c1.fi-margin-left-m { + margin-left: 20px; +} + +.c1.fi-margin-left-l { + margin-left: 25px; +} + +.c1.fi-margin-left-xl { + margin-left: 30px; +} + +.c1.fi-margin-left-xxl { + margin-left: 40px; +} + +.c1.fi-margin-left-xxxl { + margin-left: 60px; +} + +.c1.fi-margin-left-xxxxl { + margin-left: 80px; +} + +.c1.fi-margin-left-insetXxs { + margin-left: 2px; +} + +.c1.fi-margin-left-insetXs { + margin-left: 4px; +} + +.c1.fi-margin-left-insetS { + margin-left: 6px; +} + +.c1.fi-margin-left-insetM { + margin-left: 8px; +} + +.c1.fi-margin-left-insetL { + margin-left: 10px; +} + +.c1.fi-margin-left-insetXl { + margin-left: 16px; +} + +.c1.fi-margin-left-insetXxl { + margin-left: 20px; +} + +.c1.fi-padding-xxs { + padding: 5px; +} + +.c1.fi-padding-xs { + padding: 10px; +} + +.c1.fi-padding-s { + padding: 15px; +} + +.c1.fi-padding-m { + padding: 20px; +} + +.c1.fi-padding-l { + padding: 25px; +} + +.c1.fi-padding-xl { + padding: 30px; +} + +.c1.fi-padding-xxl { + padding: 40px; +} + +.c1.fi-padding-xxxl { + padding: 60px; +} + +.c1.fi-padding-xxxxl { + padding: 80px; +} + +.c1.fi-padding-insetXxs { + padding: 2px; +} + +.c1.fi-padding-insetXs { + padding: 4px; +} + +.c1.fi-padding-insetS { + padding: 6px; +} + +.c1.fi-padding-insetM { + padding: 8px; +} + +.c1.fi-padding-insetL { + padding: 10px; +} + +.c1.fi-padding-insetXl { + padding: 16px; +} + +.c1.fi-padding-insetXxl { + padding: 20px; +} + +.c1.fi-padding-top-xxs { + padding-top: 5px; +} + +.c1.fi-padding-top-xs { + padding-top: 10px; +} + +.c1.fi-padding-top-s { + padding-top: 15px; +} + +.c1.fi-padding-top-m { + padding-top: 20px; +} + +.c1.fi-padding-top-l { + padding-top: 25px; +} + +.c1.fi-padding-top-xl { + padding-top: 30px; +} + +.c1.fi-padding-top-xxl { + padding-top: 40px; +} + +.c1.fi-padding-top-xxxl { + padding-top: 60px; +} + +.c1.fi-padding-top-xxxxl { + padding-top: 80px; +} + +.c1.fi-padding-top-insetXxs { + padding-top: 2px; +} + +.c1.fi-padding-top-insetXs { + padding-top: 4px; +} + +.c1.fi-padding-top-insetS { + padding-top: 6px; +} + +.c1.fi-padding-top-insetM { + padding-top: 8px; +} + +.c1.fi-padding-top-insetL { + padding-top: 10px; +} + +.c1.fi-padding-top-insetXl { + padding-top: 16px; +} + +.c1.fi-padding-top-insetXxl { + padding-top: 20px; +} + +.c1.fi-padding-right-xxs { + padding-right: 5px; +} + +.c1.fi-padding-right-xs { + padding-right: 10px; +} + +.c1.fi-padding-right-s { + padding-right: 15px; +} + +.c1.fi-padding-right-m { + padding-right: 20px; +} + +.c1.fi-padding-right-l { + padding-right: 25px; +} + +.c1.fi-padding-right-xl { + padding-right: 30px; +} + +.c1.fi-padding-right-xxl { + padding-right: 40px; +} + +.c1.fi-padding-right-xxxl { + padding-right: 60px; +} + +.c1.fi-padding-right-xxxxl { + padding-right: 80px; +} + +.c1.fi-padding-right-insetXxs { + padding-right: 2px; +} + +.c1.fi-padding-right-insetXs { + padding-right: 4px; +} + +.c1.fi-padding-right-insetS { + padding-right: 6px; +} + +.c1.fi-padding-right-insetM { + padding-right: 8px; +} + +.c1.fi-padding-right-insetL { + padding-right: 10px; +} + +.c1.fi-padding-right-insetXl { + padding-right: 16px; +} + +.c1.fi-padding-right-insetXxl { + padding-right: 20px; +} + +.c1.fi-padding-bottom-xxs { + padding-bottom: 5px; +} + +.c1.fi-padding-bottom-xs { + padding-bottom: 10px; +} + +.c1.fi-padding-bottom-s { + padding-bottom: 15px; +} + +.c1.fi-padding-bottom-m { + padding-bottom: 20px; +} + +.c1.fi-padding-bottom-l { + padding-bottom: 25px; +} + +.c1.fi-padding-bottom-xl { + padding-bottom: 30px; +} + +.c1.fi-padding-bottom-xxl { + padding-bottom: 40px; +} + +.c1.fi-padding-bottom-xxxl { + padding-bottom: 60px; +} + +.c1.fi-padding-bottom-xxxxl { + padding-bottom: 80px; +} + +.c1.fi-padding-bottom-insetXxs { + padding-bottom: 2px; +} + +.c1.fi-padding-bottom-insetXs { + padding-bottom: 4px; +} + +.c1.fi-padding-bottom-insetS { + padding-bottom: 6px; +} + +.c1.fi-padding-bottom-insetM { + padding-bottom: 8px; +} + +.c1.fi-padding-bottom-insetL { + padding-bottom: 10px; +} + +.c1.fi-padding-bottom-insetXl { + padding-bottom: 16px; +} + +.c1.fi-padding-bottom-insetXxl { + padding-bottom: 20px; +} + +.c1.fi-padding-left-xxs { + padding-left: 5px; +} + +.c1.fi-padding-left-xs { + padding-left: 10px; +} + +.c1.fi-padding-left-s { + padding-left: 15px; +} + +.c1.fi-padding-left-m { + padding-left: 20px; +} + +.c1.fi-padding-left-l { + padding-left: 25px; +} + +.c1.fi-padding-left-xl { + padding-left: 30px; +} + +.c1.fi-padding-left-xxl { + padding-left: 40px; +} + +.c1.fi-padding-left-xxxl { + padding-left: 60px; +} + +.c1.fi-padding-left-xxxxl { + padding-left: 80px; +} + +.c1.fi-padding-left-insetXxs { + padding-left: 2px; +} + +.c1.fi-padding-left-insetXs { + padding-left: 4px; +} + +.c1.fi-padding-left-insetS { + padding-left: 6px; +} + +.c1.fi-padding-left-insetM { + padding-left: 8px; +} + +.c1.fi-padding-left-insetL { + padding-left: 10px; +} + +.c1.fi-padding-left-insetXl { + padding-left: 16px; +} + +.c1.fi-padding-left-insetXxl { + padding-left: 20px; +} + +.c1:focus { + position: relative; + outline: 3px solid transparent; +} + +.c1:focus::after { + content: ''; + position: absolute; + pointer-events: none; + top: -2px; + right: -2px; + bottom: -2px; left: -2px; border-radius: 2px; background-color: transparent; @@ -634,21 +950,21 @@ exports[`Button variant inverted should match snapshot 1`] = ` `; -exports[`Button variant link match snapshot 1`] = ` +exports[`Button variant inverted should match snapshot 1`] = ` .c0 { line-height: 1.15; -ms-text-size-adjust: 100%; @@ -759,340 +1075,656 @@ exports[`Button variant link match snapshot 1`] = ` border: 1px solid transparent; } -.c1:focus { - position: relative; - outline: 3px solid transparent; +.c1.fi-margin-xxs { + margin: 5px; } -.c1:focus::after { - content: ''; - position: absolute; - pointer-events: none; - top: -2px; - right: -2px; - bottom: -2px; - left: -2px; - border-radius: 2px; - background-color: transparent; - border: 0px solid hsl(0,0%,100%); - box-sizing: border-box; - box-shadow: 0 0 0 2px hsl(196,77%,44%); - z-index: 9999; +.c1.fi-margin-xs { + margin: 10px; } -.c1:hover { - background: linear-gradient(0deg,hsl(212,63%,45%) 0%,hsl(212,63%,49%) 100%); - outline: 2px solid transparent; +.c1.fi-margin-s { + margin: 15px; } -.c1:active { - background: hsl(212,63%,37%); +.c1.fi-margin-m { + margin: 20px; } -.c1.fi-button--disabled, -.c1[disabled], -.c1:disabled { - text-shadow: 0 1px 1px rgba(33,33,33,0.5); - background: linear-gradient(0deg,hsl(202,7%,67%) 0%,hsl(202,7%,80%) 100%); - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - cursor: not-allowed; +.c1.fi-margin-l { + margin: 25px; } -.c1.fi-button--disabled::after { - border: none; - box-shadow: none; +.c1.fi-margin-xl { + margin: 30px; } -.c1.fi-button--fullwidth { - display: block; - width: 100%; +.c1.fi-margin-xxl { + margin: 40px; } -.c1.fi-button--inverted { - background: none; - background-color: hsl(212,63%,45%); - border: 1px solid hsl(0,0%,100%); - text-shadow: none; +.c1.fi-margin-xxxl { + margin: 60px; } -.c1.fi-button--inverted:hover { - background: linear-gradient(-180deg,hsla(0,0%,100%,0.1) 0%,hsla(0,0%,100%,0) 100%); +.c1.fi-margin-xxxxl { + margin: 80px; } -.c1.fi-button--inverted:active { - background: none; - background-color: hsl(212,63%,45%); +.c1.fi-margin-insetXxs { + margin: 2px; } -.c1.fi-button--inverted.fi-button--disabled, -.c1.fi-button--inverted[disabled], -.c1.fi-button--inverted:disabled { - opacity: 0.41; - background: none; - background-color: none; +.c1.fi-margin-insetXs { + margin: 4px; } -.c1.fi-button--secondary { - color: hsl(212,63%,45%); - background: none; - background-color: hsl(0,0%,100%); - border: 1px solid hsl(212,63%,45%); - text-shadow: none; +.c1.fi-margin-insetS { + margin: 6px; } -.c1.fi-button--secondary:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); +.c1.fi-margin-insetM { + margin: 8px; } -.c1.fi-button--secondary:active { - background: none; - background-color: hsl(202,7%,93%); +.c1.fi-margin-insetL { + margin: 10px; } -.c1.fi-button--secondary.fi-button--disabled, -.c1.fi-button--secondary[disabled], -.c1.fi-button--secondary:disabled { - color: hsl(202,7%,67%); - text-shadow: none; - background: none; - background-color: hsl(212,63%,98%); - border-color: hsl(202,7%,67%); +.c1.fi-margin-insetXl { + margin: 16px; } -.c1.fi-button--secondary-noborder { - color: hsl(212,63%,45%); - background: none; - background-color: hsl(0,0%,100%); - border: 1px solid hsl(212,63%,45%); - text-shadow: none; - border: none; - background-color: transparent; +.c1.fi-margin-insetXxl { + margin: 20px; } -.c1.fi-button--secondary-noborder:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); +.c1.fi-margin-top-xxs { + margin-top: 5px; } -.c1.fi-button--secondary-noborder:active { - background: none; - background-color: hsl(202,7%,93%); +.c1.fi-margin-top-xs { + margin-top: 10px; } -.c1.fi-button--secondary-noborder.fi-button--disabled, -.c1.fi-button--secondary-noborder[disabled], -.c1.fi-button--secondary-noborder:disabled { - color: hsl(202,7%,67%); - text-shadow: none; - background: none; - background-color: hsl(212,63%,98%); - border-color: hsl(202,7%,67%); +.c1.fi-margin-top-s { + margin-top: 15px; } -.c1.fi-button--secondary-light { - color: hsl(212,63%,45%); - color: hsl(212,63%,45%); - background: none; - background-color: hsl(0,0%,100%); - border: 1px solid hsl(212,63%,45%); - text-shadow: none; - background: linear-gradient(0deg,hsl(215,100%,95%),hsl(215,100%,97%)); - border: none; +.c1.fi-margin-top-m { + margin-top: 20px; } -.c1.fi-button--secondary-light:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); +.c1.fi-margin-top-l { + margin-top: 25px; } -.c1.fi-button--secondary-light:active { - background: none; - background-color: hsl(202,7%,93%); +.c1.fi-margin-top-xl { + margin-top: 30px; } -.c1.fi-button--secondary-light.fi-button--disabled, -.c1.fi-button--secondary-light[disabled], -.c1.fi-button--secondary-light:disabled { - color: hsl(202,7%,67%); - text-shadow: none; - background: none; - background-color: hsl(212,63%,98%); - border-color: hsl(202,7%,67%); +.c1.fi-margin-top-xxl { + margin-top: 40px; } -.c1.fi-button--secondary-light:hover { - background: linear-gradient(0deg,hsl(215,100%,97%),hsl(212,63%,98%)); +.c1.fi-margin-top-xxxl { + margin-top: 60px; } -.c1.fi-button--secondary-light:active { - background: linear-gradient(0deg,hsl(202,7%,93%),hsl(202,7%,97%)); +.c1.fi-margin-top-xxxxl { + margin-top: 80px; } -.c1.fi-button--secondary-light.fi-button--disabled, -.c1.fi-button--secondary-light[disabled], -.c1.fi-button--secondary-light:disabled { - color: hsl(202,7%,67%); - background: none; - background-color: hsl(202,7%,97%); +.c1.fi-margin-top-insetXxs { + margin-top: 2px; } -.c1 > .fi-button_icon > .fi-icon { - width: 16px; - height: 16px; - margin-right: 8px; - vertical-align: middle; - -webkit-transform: translateY(-0.1em); - -ms-transform: translateY(-0.1em); - transform: translateY(-0.1em); +.c1.fi-margin-top-insetXs { + margin-top: 4px; } -.c1 > .fi-button_icon--right > .fi-icon { - margin-right: 0; - margin-left: 8px; +.c1.fi-margin-top-insetS { + margin-top: 6px; } -.c1.fi-button--disabled > .fi-button_icon { - cursor: not-allowed; +.c1.fi-margin-top-insetM { + margin-top: 8px; } - -`; +.c1.fi-margin-top-insetL { + margin-top: 10px; +} -exports[`Button variant secondary should match snapshot 1`] = ` -.c0 { - line-height: 1.15; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - margin: 0; - overflow: visible; - text-transform: none; - -webkit-appearance: button; - margin: 0; - padding: 0; - border: 0; - box-sizing: border-box; - font: 100% inherit; - line-height: 1; - text-align: left; - -webkit-text-decoration: none; - text-decoration: none; - vertical-align: baseline; - color: inherit; - background: none; - cursor: inherit; - display: inline-block; - max-width: 100%; - cursor: pointer; +.c1.fi-margin-top-insetXl { + margin-top: 16px; } -.c0:-moz-focusring { - outline: 1px dotted ButtonText; +.c1.fi-margin-top-insetXxl { + margin-top: 20px; } -.c0::-moz-focus-inner { - border-style: none; - padding: 0; +.c1.fi-margin-right-xxs { + margin-right: 5px; } -.c0::-webkit-file-upload-button { - -webkit-appearance: button; - font: inherit; +.c1.fi-margin-right-xs { + margin-right: 10px; } -.c0::-webkit-inner-spin-button { - height: auto; +.c1.fi-margin-right-s { + margin-right: 15px; } -.c0::-webkit-outer-spin-button { - height: auto; +.c1.fi-margin-right-m { + margin-right: 20px; } -.c0::before, -.c0::after { - box-sizing: border-box; +.c1.fi-margin-right-l { + margin-right: 25px; } -.c2 { - line-height: 1.15; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - margin: 0; - padding: 0; - border: 0; - box-sizing: border-box; - font: 100% inherit; - line-height: 1; - text-align: left; - -webkit-text-decoration: none; - text-decoration: none; - vertical-align: baseline; - color: inherit; - background: none; - cursor: inherit; - display: inline; - max-width: 100%; - word-wrap: normal; - word-break: normal; - white-space: normal; +.c1.fi-margin-right-xl { + margin-right: 30px; } -.c2::before, -.c2::after { - box-sizing: border-box; +.c1.fi-margin-right-xxl { + margin-right: 40px; } -.c1 { - color: hsl(0,0%,13%); - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 600; - font-size: 14px; - line-height: 20px; - padding: 10px 20px; - min-height: 40px; - color: hsl(0,0%,100%); - background: linear-gradient(0deg,hsl(212,63%,37%) 0%,hsl(212,63%,45%) 100%); - border-radius: 2px; - text-align: center; - text-shadow: 0 1px 1px hsla(214,100%,24%,0.5); - cursor: pointer; - border: 1px solid transparent; +.c1.fi-margin-right-xxxl { + margin-right: 60px; } -.c1:focus { - position: relative; - outline: 3px solid transparent; +.c1.fi-margin-right-xxxxl { + margin-right: 80px; } -.c1:focus::after { - content: ''; - position: absolute; - pointer-events: none; - top: -2px; +.c1.fi-margin-right-insetXxs { + margin-right: 2px; +} + +.c1.fi-margin-right-insetXs { + margin-right: 4px; +} + +.c1.fi-margin-right-insetS { + margin-right: 6px; +} + +.c1.fi-margin-right-insetM { + margin-right: 8px; +} + +.c1.fi-margin-right-insetL { + margin-right: 10px; +} + +.c1.fi-margin-right-insetXl { + margin-right: 16px; +} + +.c1.fi-margin-right-insetXxl { + margin-right: 20px; +} + +.c1.fi-margin-bottom-xxs { + margin-bottom: 5px; +} + +.c1.fi-margin-bottom-xs { + margin-bottom: 10px; +} + +.c1.fi-margin-bottom-s { + margin-bottom: 15px; +} + +.c1.fi-margin-bottom-m { + margin-bottom: 20px; +} + +.c1.fi-margin-bottom-l { + margin-bottom: 25px; +} + +.c1.fi-margin-bottom-xl { + margin-bottom: 30px; +} + +.c1.fi-margin-bottom-xxl { + margin-bottom: 40px; +} + +.c1.fi-margin-bottom-xxxl { + margin-bottom: 60px; +} + +.c1.fi-margin-bottom-xxxxl { + margin-bottom: 80px; +} + +.c1.fi-margin-bottom-insetXxs { + margin-bottom: 2px; +} + +.c1.fi-margin-bottom-insetXs { + margin-bottom: 4px; +} + +.c1.fi-margin-bottom-insetS { + margin-bottom: 6px; +} + +.c1.fi-margin-bottom-insetM { + margin-bottom: 8px; +} + +.c1.fi-margin-bottom-insetL { + margin-bottom: 10px; +} + +.c1.fi-margin-bottom-insetXl { + margin-bottom: 16px; +} + +.c1.fi-margin-bottom-insetXxl { + margin-bottom: 20px; +} + +.c1.fi-margin-left-xxs { + margin-left: 5px; +} + +.c1.fi-margin-left-xs { + margin-left: 10px; +} + +.c1.fi-margin-left-s { + margin-left: 15px; +} + +.c1.fi-margin-left-m { + margin-left: 20px; +} + +.c1.fi-margin-left-l { + margin-left: 25px; +} + +.c1.fi-margin-left-xl { + margin-left: 30px; +} + +.c1.fi-margin-left-xxl { + margin-left: 40px; +} + +.c1.fi-margin-left-xxxl { + margin-left: 60px; +} + +.c1.fi-margin-left-xxxxl { + margin-left: 80px; +} + +.c1.fi-margin-left-insetXxs { + margin-left: 2px; +} + +.c1.fi-margin-left-insetXs { + margin-left: 4px; +} + +.c1.fi-margin-left-insetS { + margin-left: 6px; +} + +.c1.fi-margin-left-insetM { + margin-left: 8px; +} + +.c1.fi-margin-left-insetL { + margin-left: 10px; +} + +.c1.fi-margin-left-insetXl { + margin-left: 16px; +} + +.c1.fi-margin-left-insetXxl { + margin-left: 20px; +} + +.c1.fi-padding-xxs { + padding: 5px; +} + +.c1.fi-padding-xs { + padding: 10px; +} + +.c1.fi-padding-s { + padding: 15px; +} + +.c1.fi-padding-m { + padding: 20px; +} + +.c1.fi-padding-l { + padding: 25px; +} + +.c1.fi-padding-xl { + padding: 30px; +} + +.c1.fi-padding-xxl { + padding: 40px; +} + +.c1.fi-padding-xxxl { + padding: 60px; +} + +.c1.fi-padding-xxxxl { + padding: 80px; +} + +.c1.fi-padding-insetXxs { + padding: 2px; +} + +.c1.fi-padding-insetXs { + padding: 4px; +} + +.c1.fi-padding-insetS { + padding: 6px; +} + +.c1.fi-padding-insetM { + padding: 8px; +} + +.c1.fi-padding-insetL { + padding: 10px; +} + +.c1.fi-padding-insetXl { + padding: 16px; +} + +.c1.fi-padding-insetXxl { + padding: 20px; +} + +.c1.fi-padding-top-xxs { + padding-top: 5px; +} + +.c1.fi-padding-top-xs { + padding-top: 10px; +} + +.c1.fi-padding-top-s { + padding-top: 15px; +} + +.c1.fi-padding-top-m { + padding-top: 20px; +} + +.c1.fi-padding-top-l { + padding-top: 25px; +} + +.c1.fi-padding-top-xl { + padding-top: 30px; +} + +.c1.fi-padding-top-xxl { + padding-top: 40px; +} + +.c1.fi-padding-top-xxxl { + padding-top: 60px; +} + +.c1.fi-padding-top-xxxxl { + padding-top: 80px; +} + +.c1.fi-padding-top-insetXxs { + padding-top: 2px; +} + +.c1.fi-padding-top-insetXs { + padding-top: 4px; +} + +.c1.fi-padding-top-insetS { + padding-top: 6px; +} + +.c1.fi-padding-top-insetM { + padding-top: 8px; +} + +.c1.fi-padding-top-insetL { + padding-top: 10px; +} + +.c1.fi-padding-top-insetXl { + padding-top: 16px; +} + +.c1.fi-padding-top-insetXxl { + padding-top: 20px; +} + +.c1.fi-padding-right-xxs { + padding-right: 5px; +} + +.c1.fi-padding-right-xs { + padding-right: 10px; +} + +.c1.fi-padding-right-s { + padding-right: 15px; +} + +.c1.fi-padding-right-m { + padding-right: 20px; +} + +.c1.fi-padding-right-l { + padding-right: 25px; +} + +.c1.fi-padding-right-xl { + padding-right: 30px; +} + +.c1.fi-padding-right-xxl { + padding-right: 40px; +} + +.c1.fi-padding-right-xxxl { + padding-right: 60px; +} + +.c1.fi-padding-right-xxxxl { + padding-right: 80px; +} + +.c1.fi-padding-right-insetXxs { + padding-right: 2px; +} + +.c1.fi-padding-right-insetXs { + padding-right: 4px; +} + +.c1.fi-padding-right-insetS { + padding-right: 6px; +} + +.c1.fi-padding-right-insetM { + padding-right: 8px; +} + +.c1.fi-padding-right-insetL { + padding-right: 10px; +} + +.c1.fi-padding-right-insetXl { + padding-right: 16px; +} + +.c1.fi-padding-right-insetXxl { + padding-right: 20px; +} + +.c1.fi-padding-bottom-xxs { + padding-bottom: 5px; +} + +.c1.fi-padding-bottom-xs { + padding-bottom: 10px; +} + +.c1.fi-padding-bottom-s { + padding-bottom: 15px; +} + +.c1.fi-padding-bottom-m { + padding-bottom: 20px; +} + +.c1.fi-padding-bottom-l { + padding-bottom: 25px; +} + +.c1.fi-padding-bottom-xl { + padding-bottom: 30px; +} + +.c1.fi-padding-bottom-xxl { + padding-bottom: 40px; +} + +.c1.fi-padding-bottom-xxxl { + padding-bottom: 60px; +} + +.c1.fi-padding-bottom-xxxxl { + padding-bottom: 80px; +} + +.c1.fi-padding-bottom-insetXxs { + padding-bottom: 2px; +} + +.c1.fi-padding-bottom-insetXs { + padding-bottom: 4px; +} + +.c1.fi-padding-bottom-insetS { + padding-bottom: 6px; +} + +.c1.fi-padding-bottom-insetM { + padding-bottom: 8px; +} + +.c1.fi-padding-bottom-insetL { + padding-bottom: 10px; +} + +.c1.fi-padding-bottom-insetXl { + padding-bottom: 16px; +} + +.c1.fi-padding-bottom-insetXxl { + padding-bottom: 20px; +} + +.c1.fi-padding-left-xxs { + padding-left: 5px; +} + +.c1.fi-padding-left-xs { + padding-left: 10px; +} + +.c1.fi-padding-left-s { + padding-left: 15px; +} + +.c1.fi-padding-left-m { + padding-left: 20px; +} + +.c1.fi-padding-left-l { + padding-left: 25px; +} + +.c1.fi-padding-left-xl { + padding-left: 30px; +} + +.c1.fi-padding-left-xxl { + padding-left: 40px; +} + +.c1.fi-padding-left-xxxl { + padding-left: 60px; +} + +.c1.fi-padding-left-xxxxl { + padding-left: 80px; +} + +.c1.fi-padding-left-insetXxs { + padding-left: 2px; +} + +.c1.fi-padding-left-insetXs { + padding-left: 4px; +} + +.c1.fi-padding-left-insetS { + padding-left: 6px; +} + +.c1.fi-padding-left-insetM { + padding-left: 8px; +} + +.c1.fi-padding-left-insetL { + padding-left: 10px; +} + +.c1.fi-padding-left-insetXl { + padding-left: 16px; +} + +.c1.fi-padding-left-insetXxl { + padding-left: 20px; +} + +.c1:focus { + position: relative; + outline: 3px solid transparent; +} + +.c1:focus::after { + content: ''; + position: absolute; + pointer-events: none; + top: -2px; right: -2px; bottom: -2px; left: -2px; @@ -1282,21 +1914,21 @@ exports[`Button variant secondary should match snapshot 1`] = ` `; -exports[`Button variant secondaryNoBorder should match snapshot 1`] = ` +exports[`Button variant link match snapshot 1`] = ` .c0 { line-height: 1.15; -ms-text-size-adjust: 100%; @@ -1407,6 +2039,2574 @@ exports[`Button variant secondaryNoBorder should match snapshot 1`] = ` border: 1px solid transparent; } +.c1.fi-margin-xxs { + margin: 5px; +} + +.c1.fi-margin-xs { + margin: 10px; +} + +.c1.fi-margin-s { + margin: 15px; +} + +.c1.fi-margin-m { + margin: 20px; +} + +.c1.fi-margin-l { + margin: 25px; +} + +.c1.fi-margin-xl { + margin: 30px; +} + +.c1.fi-margin-xxl { + margin: 40px; +} + +.c1.fi-margin-xxxl { + margin: 60px; +} + +.c1.fi-margin-xxxxl { + margin: 80px; +} + +.c1.fi-margin-insetXxs { + margin: 2px; +} + +.c1.fi-margin-insetXs { + margin: 4px; +} + +.c1.fi-margin-insetS { + margin: 6px; +} + +.c1.fi-margin-insetM { + margin: 8px; +} + +.c1.fi-margin-insetL { + margin: 10px; +} + +.c1.fi-margin-insetXl { + margin: 16px; +} + +.c1.fi-margin-insetXxl { + margin: 20px; +} + +.c1.fi-margin-top-xxs { + margin-top: 5px; +} + +.c1.fi-margin-top-xs { + margin-top: 10px; +} + +.c1.fi-margin-top-s { + margin-top: 15px; +} + +.c1.fi-margin-top-m { + margin-top: 20px; +} + +.c1.fi-margin-top-l { + margin-top: 25px; +} + +.c1.fi-margin-top-xl { + margin-top: 30px; +} + +.c1.fi-margin-top-xxl { + margin-top: 40px; +} + +.c1.fi-margin-top-xxxl { + margin-top: 60px; +} + +.c1.fi-margin-top-xxxxl { + margin-top: 80px; +} + +.c1.fi-margin-top-insetXxs { + margin-top: 2px; +} + +.c1.fi-margin-top-insetXs { + margin-top: 4px; +} + +.c1.fi-margin-top-insetS { + margin-top: 6px; +} + +.c1.fi-margin-top-insetM { + margin-top: 8px; +} + +.c1.fi-margin-top-insetL { + margin-top: 10px; +} + +.c1.fi-margin-top-insetXl { + margin-top: 16px; +} + +.c1.fi-margin-top-insetXxl { + margin-top: 20px; +} + +.c1.fi-margin-right-xxs { + margin-right: 5px; +} + +.c1.fi-margin-right-xs { + margin-right: 10px; +} + +.c1.fi-margin-right-s { + margin-right: 15px; +} + +.c1.fi-margin-right-m { + margin-right: 20px; +} + +.c1.fi-margin-right-l { + margin-right: 25px; +} + +.c1.fi-margin-right-xl { + margin-right: 30px; +} + +.c1.fi-margin-right-xxl { + margin-right: 40px; +} + +.c1.fi-margin-right-xxxl { + margin-right: 60px; +} + +.c1.fi-margin-right-xxxxl { + margin-right: 80px; +} + +.c1.fi-margin-right-insetXxs { + margin-right: 2px; +} + +.c1.fi-margin-right-insetXs { + margin-right: 4px; +} + +.c1.fi-margin-right-insetS { + margin-right: 6px; +} + +.c1.fi-margin-right-insetM { + margin-right: 8px; +} + +.c1.fi-margin-right-insetL { + margin-right: 10px; +} + +.c1.fi-margin-right-insetXl { + margin-right: 16px; +} + +.c1.fi-margin-right-insetXxl { + margin-right: 20px; +} + +.c1.fi-margin-bottom-xxs { + margin-bottom: 5px; +} + +.c1.fi-margin-bottom-xs { + margin-bottom: 10px; +} + +.c1.fi-margin-bottom-s { + margin-bottom: 15px; +} + +.c1.fi-margin-bottom-m { + margin-bottom: 20px; +} + +.c1.fi-margin-bottom-l { + margin-bottom: 25px; +} + +.c1.fi-margin-bottom-xl { + margin-bottom: 30px; +} + +.c1.fi-margin-bottom-xxl { + margin-bottom: 40px; +} + +.c1.fi-margin-bottom-xxxl { + margin-bottom: 60px; +} + +.c1.fi-margin-bottom-xxxxl { + margin-bottom: 80px; +} + +.c1.fi-margin-bottom-insetXxs { + margin-bottom: 2px; +} + +.c1.fi-margin-bottom-insetXs { + margin-bottom: 4px; +} + +.c1.fi-margin-bottom-insetS { + margin-bottom: 6px; +} + +.c1.fi-margin-bottom-insetM { + margin-bottom: 8px; +} + +.c1.fi-margin-bottom-insetL { + margin-bottom: 10px; +} + +.c1.fi-margin-bottom-insetXl { + margin-bottom: 16px; +} + +.c1.fi-margin-bottom-insetXxl { + margin-bottom: 20px; +} + +.c1.fi-margin-left-xxs { + margin-left: 5px; +} + +.c1.fi-margin-left-xs { + margin-left: 10px; +} + +.c1.fi-margin-left-s { + margin-left: 15px; +} + +.c1.fi-margin-left-m { + margin-left: 20px; +} + +.c1.fi-margin-left-l { + margin-left: 25px; +} + +.c1.fi-margin-left-xl { + margin-left: 30px; +} + +.c1.fi-margin-left-xxl { + margin-left: 40px; +} + +.c1.fi-margin-left-xxxl { + margin-left: 60px; +} + +.c1.fi-margin-left-xxxxl { + margin-left: 80px; +} + +.c1.fi-margin-left-insetXxs { + margin-left: 2px; +} + +.c1.fi-margin-left-insetXs { + margin-left: 4px; +} + +.c1.fi-margin-left-insetS { + margin-left: 6px; +} + +.c1.fi-margin-left-insetM { + margin-left: 8px; +} + +.c1.fi-margin-left-insetL { + margin-left: 10px; +} + +.c1.fi-margin-left-insetXl { + margin-left: 16px; +} + +.c1.fi-margin-left-insetXxl { + margin-left: 20px; +} + +.c1.fi-padding-xxs { + padding: 5px; +} + +.c1.fi-padding-xs { + padding: 10px; +} + +.c1.fi-padding-s { + padding: 15px; +} + +.c1.fi-padding-m { + padding: 20px; +} + +.c1.fi-padding-l { + padding: 25px; +} + +.c1.fi-padding-xl { + padding: 30px; +} + +.c1.fi-padding-xxl { + padding: 40px; +} + +.c1.fi-padding-xxxl { + padding: 60px; +} + +.c1.fi-padding-xxxxl { + padding: 80px; +} + +.c1.fi-padding-insetXxs { + padding: 2px; +} + +.c1.fi-padding-insetXs { + padding: 4px; +} + +.c1.fi-padding-insetS { + padding: 6px; +} + +.c1.fi-padding-insetM { + padding: 8px; +} + +.c1.fi-padding-insetL { + padding: 10px; +} + +.c1.fi-padding-insetXl { + padding: 16px; +} + +.c1.fi-padding-insetXxl { + padding: 20px; +} + +.c1.fi-padding-top-xxs { + padding-top: 5px; +} + +.c1.fi-padding-top-xs { + padding-top: 10px; +} + +.c1.fi-padding-top-s { + padding-top: 15px; +} + +.c1.fi-padding-top-m { + padding-top: 20px; +} + +.c1.fi-padding-top-l { + padding-top: 25px; +} + +.c1.fi-padding-top-xl { + padding-top: 30px; +} + +.c1.fi-padding-top-xxl { + padding-top: 40px; +} + +.c1.fi-padding-top-xxxl { + padding-top: 60px; +} + +.c1.fi-padding-top-xxxxl { + padding-top: 80px; +} + +.c1.fi-padding-top-insetXxs { + padding-top: 2px; +} + +.c1.fi-padding-top-insetXs { + padding-top: 4px; +} + +.c1.fi-padding-top-insetS { + padding-top: 6px; +} + +.c1.fi-padding-top-insetM { + padding-top: 8px; +} + +.c1.fi-padding-top-insetL { + padding-top: 10px; +} + +.c1.fi-padding-top-insetXl { + padding-top: 16px; +} + +.c1.fi-padding-top-insetXxl { + padding-top: 20px; +} + +.c1.fi-padding-right-xxs { + padding-right: 5px; +} + +.c1.fi-padding-right-xs { + padding-right: 10px; +} + +.c1.fi-padding-right-s { + padding-right: 15px; +} + +.c1.fi-padding-right-m { + padding-right: 20px; +} + +.c1.fi-padding-right-l { + padding-right: 25px; +} + +.c1.fi-padding-right-xl { + padding-right: 30px; +} + +.c1.fi-padding-right-xxl { + padding-right: 40px; +} + +.c1.fi-padding-right-xxxl { + padding-right: 60px; +} + +.c1.fi-padding-right-xxxxl { + padding-right: 80px; +} + +.c1.fi-padding-right-insetXxs { + padding-right: 2px; +} + +.c1.fi-padding-right-insetXs { + padding-right: 4px; +} + +.c1.fi-padding-right-insetS { + padding-right: 6px; +} + +.c1.fi-padding-right-insetM { + padding-right: 8px; +} + +.c1.fi-padding-right-insetL { + padding-right: 10px; +} + +.c1.fi-padding-right-insetXl { + padding-right: 16px; +} + +.c1.fi-padding-right-insetXxl { + padding-right: 20px; +} + +.c1.fi-padding-bottom-xxs { + padding-bottom: 5px; +} + +.c1.fi-padding-bottom-xs { + padding-bottom: 10px; +} + +.c1.fi-padding-bottom-s { + padding-bottom: 15px; +} + +.c1.fi-padding-bottom-m { + padding-bottom: 20px; +} + +.c1.fi-padding-bottom-l { + padding-bottom: 25px; +} + +.c1.fi-padding-bottom-xl { + padding-bottom: 30px; +} + +.c1.fi-padding-bottom-xxl { + padding-bottom: 40px; +} + +.c1.fi-padding-bottom-xxxl { + padding-bottom: 60px; +} + +.c1.fi-padding-bottom-xxxxl { + padding-bottom: 80px; +} + +.c1.fi-padding-bottom-insetXxs { + padding-bottom: 2px; +} + +.c1.fi-padding-bottom-insetXs { + padding-bottom: 4px; +} + +.c1.fi-padding-bottom-insetS { + padding-bottom: 6px; +} + +.c1.fi-padding-bottom-insetM { + padding-bottom: 8px; +} + +.c1.fi-padding-bottom-insetL { + padding-bottom: 10px; +} + +.c1.fi-padding-bottom-insetXl { + padding-bottom: 16px; +} + +.c1.fi-padding-bottom-insetXxl { + padding-bottom: 20px; +} + +.c1.fi-padding-left-xxs { + padding-left: 5px; +} + +.c1.fi-padding-left-xs { + padding-left: 10px; +} + +.c1.fi-padding-left-s { + padding-left: 15px; +} + +.c1.fi-padding-left-m { + padding-left: 20px; +} + +.c1.fi-padding-left-l { + padding-left: 25px; +} + +.c1.fi-padding-left-xl { + padding-left: 30px; +} + +.c1.fi-padding-left-xxl { + padding-left: 40px; +} + +.c1.fi-padding-left-xxxl { + padding-left: 60px; +} + +.c1.fi-padding-left-xxxxl { + padding-left: 80px; +} + +.c1.fi-padding-left-insetXxs { + padding-left: 2px; +} + +.c1.fi-padding-left-insetXs { + padding-left: 4px; +} + +.c1.fi-padding-left-insetS { + padding-left: 6px; +} + +.c1.fi-padding-left-insetM { + padding-left: 8px; +} + +.c1.fi-padding-left-insetL { + padding-left: 10px; +} + +.c1.fi-padding-left-insetXl { + padding-left: 16px; +} + +.c1.fi-padding-left-insetXxl { + padding-left: 20px; +} + +.c1:focus { + position: relative; + outline: 3px solid transparent; +} + +.c1:focus::after { + content: ''; + position: absolute; + pointer-events: none; + top: -2px; + right: -2px; + bottom: -2px; + left: -2px; + border-radius: 2px; + background-color: transparent; + border: 0px solid hsl(0,0%,100%); + box-sizing: border-box; + box-shadow: 0 0 0 2px hsl(196,77%,44%); + z-index: 9999; +} + +.c1:hover { + background: linear-gradient(0deg,hsl(212,63%,45%) 0%,hsl(212,63%,49%) 100%); + outline: 2px solid transparent; +} + +.c1:active { + background: hsl(212,63%,37%); +} + +.c1.fi-button--disabled, +.c1[disabled], +.c1:disabled { + text-shadow: 0 1px 1px rgba(33,33,33,0.5); + background: linear-gradient(0deg,hsl(202,7%,67%) 0%,hsl(202,7%,80%) 100%); + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: not-allowed; +} + +.c1.fi-button--disabled::after { + border: none; + box-shadow: none; +} + +.c1.fi-button--fullwidth { + display: block; + width: 100%; +} + +.c1.fi-button--inverted { + background: none; + background-color: hsl(212,63%,45%); + border: 1px solid hsl(0,0%,100%); + text-shadow: none; +} + +.c1.fi-button--inverted:hover { + background: linear-gradient(-180deg,hsla(0,0%,100%,0.1) 0%,hsla(0,0%,100%,0) 100%); +} + +.c1.fi-button--inverted:active { + background: none; + background-color: hsl(212,63%,45%); +} + +.c1.fi-button--inverted.fi-button--disabled, +.c1.fi-button--inverted[disabled], +.c1.fi-button--inverted:disabled { + opacity: 0.41; + background: none; + background-color: none; +} + +.c1.fi-button--secondary { + color: hsl(212,63%,45%); + background: none; + background-color: hsl(0,0%,100%); + border: 1px solid hsl(212,63%,45%); + text-shadow: none; +} + +.c1.fi-button--secondary:hover { + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); +} + +.c1.fi-button--secondary:active { + background: none; + background-color: hsl(202,7%,93%); +} + +.c1.fi-button--secondary.fi-button--disabled, +.c1.fi-button--secondary[disabled], +.c1.fi-button--secondary:disabled { + color: hsl(202,7%,67%); + text-shadow: none; + background: none; + background-color: hsl(212,63%,98%); + border-color: hsl(202,7%,67%); +} + +.c1.fi-button--secondary-noborder { + color: hsl(212,63%,45%); + background: none; + background-color: hsl(0,0%,100%); + border: 1px solid hsl(212,63%,45%); + text-shadow: none; + border: none; + background-color: transparent; +} + +.c1.fi-button--secondary-noborder:hover { + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); +} + +.c1.fi-button--secondary-noborder:active { + background: none; + background-color: hsl(202,7%,93%); +} + +.c1.fi-button--secondary-noborder.fi-button--disabled, +.c1.fi-button--secondary-noborder[disabled], +.c1.fi-button--secondary-noborder:disabled { + color: hsl(202,7%,67%); + text-shadow: none; + background: none; + background-color: hsl(212,63%,98%); + border-color: hsl(202,7%,67%); +} + +.c1.fi-button--secondary-light { + color: hsl(212,63%,45%); + color: hsl(212,63%,45%); + background: none; + background-color: hsl(0,0%,100%); + border: 1px solid hsl(212,63%,45%); + text-shadow: none; + background: linear-gradient(0deg,hsl(215,100%,95%),hsl(215,100%,97%)); + border: none; +} + +.c1.fi-button--secondary-light:hover { + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); +} + +.c1.fi-button--secondary-light:active { + background: none; + background-color: hsl(202,7%,93%); +} + +.c1.fi-button--secondary-light.fi-button--disabled, +.c1.fi-button--secondary-light[disabled], +.c1.fi-button--secondary-light:disabled { + color: hsl(202,7%,67%); + text-shadow: none; + background: none; + background-color: hsl(212,63%,98%); + border-color: hsl(202,7%,67%); +} + +.c1.fi-button--secondary-light:hover { + background: linear-gradient(0deg,hsl(215,100%,97%),hsl(212,63%,98%)); +} + +.c1.fi-button--secondary-light:active { + background: linear-gradient(0deg,hsl(202,7%,93%),hsl(202,7%,97%)); +} + +.c1.fi-button--secondary-light.fi-button--disabled, +.c1.fi-button--secondary-light[disabled], +.c1.fi-button--secondary-light:disabled { + color: hsl(202,7%,67%); + background: none; + background-color: hsl(202,7%,97%); +} + +.c1 > .fi-button_icon > .fi-icon { + width: 16px; + height: 16px; + margin-right: 8px; + vertical-align: middle; + -webkit-transform: translateY(-0.1em); + -ms-transform: translateY(-0.1em); + transform: translateY(-0.1em); +} + +.c1 > .fi-button_icon--right > .fi-icon { + margin-right: 0; + margin-left: 8px; +} + +.c1.fi-button--disabled > .fi-button_icon { + cursor: not-allowed; +} + + +`; + +exports[`Button variant secondary should match snapshot 1`] = ` +.c0 { + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; + font: 100% inherit; + line-height: 1; + text-align: left; + -webkit-text-decoration: none; + text-decoration: none; + vertical-align: baseline; + color: inherit; + background: none; + cursor: inherit; + display: inline-block; + max-width: 100%; + cursor: pointer; +} + +.c0:-moz-focusring { + outline: 1px dotted ButtonText; +} + +.c0::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c0::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; +} + +.c0::-webkit-inner-spin-button { + height: auto; +} + +.c0::-webkit-outer-spin-button { + height: auto; +} + +.c0::before, +.c0::after { + box-sizing: border-box; +} + +.c2 { + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; + font: 100% inherit; + line-height: 1; + text-align: left; + -webkit-text-decoration: none; + text-decoration: none; + vertical-align: baseline; + color: inherit; + background: none; + cursor: inherit; + display: inline; + max-width: 100%; + word-wrap: normal; + word-break: normal; + white-space: normal; +} + +.c2::before, +.c2::after { + box-sizing: border-box; +} + +.c1 { + color: hsl(0,0%,13%); + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 600; + font-size: 14px; + line-height: 20px; + padding: 10px 20px; + min-height: 40px; + color: hsl(0,0%,100%); + background: linear-gradient(0deg,hsl(212,63%,37%) 0%,hsl(212,63%,45%) 100%); + border-radius: 2px; + text-align: center; + text-shadow: 0 1px 1px hsla(214,100%,24%,0.5); + cursor: pointer; + border: 1px solid transparent; +} + +.c1.fi-margin-xxs { + margin: 5px; +} + +.c1.fi-margin-xs { + margin: 10px; +} + +.c1.fi-margin-s { + margin: 15px; +} + +.c1.fi-margin-m { + margin: 20px; +} + +.c1.fi-margin-l { + margin: 25px; +} + +.c1.fi-margin-xl { + margin: 30px; +} + +.c1.fi-margin-xxl { + margin: 40px; +} + +.c1.fi-margin-xxxl { + margin: 60px; +} + +.c1.fi-margin-xxxxl { + margin: 80px; +} + +.c1.fi-margin-insetXxs { + margin: 2px; +} + +.c1.fi-margin-insetXs { + margin: 4px; +} + +.c1.fi-margin-insetS { + margin: 6px; +} + +.c1.fi-margin-insetM { + margin: 8px; +} + +.c1.fi-margin-insetL { + margin: 10px; +} + +.c1.fi-margin-insetXl { + margin: 16px; +} + +.c1.fi-margin-insetXxl { + margin: 20px; +} + +.c1.fi-margin-top-xxs { + margin-top: 5px; +} + +.c1.fi-margin-top-xs { + margin-top: 10px; +} + +.c1.fi-margin-top-s { + margin-top: 15px; +} + +.c1.fi-margin-top-m { + margin-top: 20px; +} + +.c1.fi-margin-top-l { + margin-top: 25px; +} + +.c1.fi-margin-top-xl { + margin-top: 30px; +} + +.c1.fi-margin-top-xxl { + margin-top: 40px; +} + +.c1.fi-margin-top-xxxl { + margin-top: 60px; +} + +.c1.fi-margin-top-xxxxl { + margin-top: 80px; +} + +.c1.fi-margin-top-insetXxs { + margin-top: 2px; +} + +.c1.fi-margin-top-insetXs { + margin-top: 4px; +} + +.c1.fi-margin-top-insetS { + margin-top: 6px; +} + +.c1.fi-margin-top-insetM { + margin-top: 8px; +} + +.c1.fi-margin-top-insetL { + margin-top: 10px; +} + +.c1.fi-margin-top-insetXl { + margin-top: 16px; +} + +.c1.fi-margin-top-insetXxl { + margin-top: 20px; +} + +.c1.fi-margin-right-xxs { + margin-right: 5px; +} + +.c1.fi-margin-right-xs { + margin-right: 10px; +} + +.c1.fi-margin-right-s { + margin-right: 15px; +} + +.c1.fi-margin-right-m { + margin-right: 20px; +} + +.c1.fi-margin-right-l { + margin-right: 25px; +} + +.c1.fi-margin-right-xl { + margin-right: 30px; +} + +.c1.fi-margin-right-xxl { + margin-right: 40px; +} + +.c1.fi-margin-right-xxxl { + margin-right: 60px; +} + +.c1.fi-margin-right-xxxxl { + margin-right: 80px; +} + +.c1.fi-margin-right-insetXxs { + margin-right: 2px; +} + +.c1.fi-margin-right-insetXs { + margin-right: 4px; +} + +.c1.fi-margin-right-insetS { + margin-right: 6px; +} + +.c1.fi-margin-right-insetM { + margin-right: 8px; +} + +.c1.fi-margin-right-insetL { + margin-right: 10px; +} + +.c1.fi-margin-right-insetXl { + margin-right: 16px; +} + +.c1.fi-margin-right-insetXxl { + margin-right: 20px; +} + +.c1.fi-margin-bottom-xxs { + margin-bottom: 5px; +} + +.c1.fi-margin-bottom-xs { + margin-bottom: 10px; +} + +.c1.fi-margin-bottom-s { + margin-bottom: 15px; +} + +.c1.fi-margin-bottom-m { + margin-bottom: 20px; +} + +.c1.fi-margin-bottom-l { + margin-bottom: 25px; +} + +.c1.fi-margin-bottom-xl { + margin-bottom: 30px; +} + +.c1.fi-margin-bottom-xxl { + margin-bottom: 40px; +} + +.c1.fi-margin-bottom-xxxl { + margin-bottom: 60px; +} + +.c1.fi-margin-bottom-xxxxl { + margin-bottom: 80px; +} + +.c1.fi-margin-bottom-insetXxs { + margin-bottom: 2px; +} + +.c1.fi-margin-bottom-insetXs { + margin-bottom: 4px; +} + +.c1.fi-margin-bottom-insetS { + margin-bottom: 6px; +} + +.c1.fi-margin-bottom-insetM { + margin-bottom: 8px; +} + +.c1.fi-margin-bottom-insetL { + margin-bottom: 10px; +} + +.c1.fi-margin-bottom-insetXl { + margin-bottom: 16px; +} + +.c1.fi-margin-bottom-insetXxl { + margin-bottom: 20px; +} + +.c1.fi-margin-left-xxs { + margin-left: 5px; +} + +.c1.fi-margin-left-xs { + margin-left: 10px; +} + +.c1.fi-margin-left-s { + margin-left: 15px; +} + +.c1.fi-margin-left-m { + margin-left: 20px; +} + +.c1.fi-margin-left-l { + margin-left: 25px; +} + +.c1.fi-margin-left-xl { + margin-left: 30px; +} + +.c1.fi-margin-left-xxl { + margin-left: 40px; +} + +.c1.fi-margin-left-xxxl { + margin-left: 60px; +} + +.c1.fi-margin-left-xxxxl { + margin-left: 80px; +} + +.c1.fi-margin-left-insetXxs { + margin-left: 2px; +} + +.c1.fi-margin-left-insetXs { + margin-left: 4px; +} + +.c1.fi-margin-left-insetS { + margin-left: 6px; +} + +.c1.fi-margin-left-insetM { + margin-left: 8px; +} + +.c1.fi-margin-left-insetL { + margin-left: 10px; +} + +.c1.fi-margin-left-insetXl { + margin-left: 16px; +} + +.c1.fi-margin-left-insetXxl { + margin-left: 20px; +} + +.c1.fi-padding-xxs { + padding: 5px; +} + +.c1.fi-padding-xs { + padding: 10px; +} + +.c1.fi-padding-s { + padding: 15px; +} + +.c1.fi-padding-m { + padding: 20px; +} + +.c1.fi-padding-l { + padding: 25px; +} + +.c1.fi-padding-xl { + padding: 30px; +} + +.c1.fi-padding-xxl { + padding: 40px; +} + +.c1.fi-padding-xxxl { + padding: 60px; +} + +.c1.fi-padding-xxxxl { + padding: 80px; +} + +.c1.fi-padding-insetXxs { + padding: 2px; +} + +.c1.fi-padding-insetXs { + padding: 4px; +} + +.c1.fi-padding-insetS { + padding: 6px; +} + +.c1.fi-padding-insetM { + padding: 8px; +} + +.c1.fi-padding-insetL { + padding: 10px; +} + +.c1.fi-padding-insetXl { + padding: 16px; +} + +.c1.fi-padding-insetXxl { + padding: 20px; +} + +.c1.fi-padding-top-xxs { + padding-top: 5px; +} + +.c1.fi-padding-top-xs { + padding-top: 10px; +} + +.c1.fi-padding-top-s { + padding-top: 15px; +} + +.c1.fi-padding-top-m { + padding-top: 20px; +} + +.c1.fi-padding-top-l { + padding-top: 25px; +} + +.c1.fi-padding-top-xl { + padding-top: 30px; +} + +.c1.fi-padding-top-xxl { + padding-top: 40px; +} + +.c1.fi-padding-top-xxxl { + padding-top: 60px; +} + +.c1.fi-padding-top-xxxxl { + padding-top: 80px; +} + +.c1.fi-padding-top-insetXxs { + padding-top: 2px; +} + +.c1.fi-padding-top-insetXs { + padding-top: 4px; +} + +.c1.fi-padding-top-insetS { + padding-top: 6px; +} + +.c1.fi-padding-top-insetM { + padding-top: 8px; +} + +.c1.fi-padding-top-insetL { + padding-top: 10px; +} + +.c1.fi-padding-top-insetXl { + padding-top: 16px; +} + +.c1.fi-padding-top-insetXxl { + padding-top: 20px; +} + +.c1.fi-padding-right-xxs { + padding-right: 5px; +} + +.c1.fi-padding-right-xs { + padding-right: 10px; +} + +.c1.fi-padding-right-s { + padding-right: 15px; +} + +.c1.fi-padding-right-m { + padding-right: 20px; +} + +.c1.fi-padding-right-l { + padding-right: 25px; +} + +.c1.fi-padding-right-xl { + padding-right: 30px; +} + +.c1.fi-padding-right-xxl { + padding-right: 40px; +} + +.c1.fi-padding-right-xxxl { + padding-right: 60px; +} + +.c1.fi-padding-right-xxxxl { + padding-right: 80px; +} + +.c1.fi-padding-right-insetXxs { + padding-right: 2px; +} + +.c1.fi-padding-right-insetXs { + padding-right: 4px; +} + +.c1.fi-padding-right-insetS { + padding-right: 6px; +} + +.c1.fi-padding-right-insetM { + padding-right: 8px; +} + +.c1.fi-padding-right-insetL { + padding-right: 10px; +} + +.c1.fi-padding-right-insetXl { + padding-right: 16px; +} + +.c1.fi-padding-right-insetXxl { + padding-right: 20px; +} + +.c1.fi-padding-bottom-xxs { + padding-bottom: 5px; +} + +.c1.fi-padding-bottom-xs { + padding-bottom: 10px; +} + +.c1.fi-padding-bottom-s { + padding-bottom: 15px; +} + +.c1.fi-padding-bottom-m { + padding-bottom: 20px; +} + +.c1.fi-padding-bottom-l { + padding-bottom: 25px; +} + +.c1.fi-padding-bottom-xl { + padding-bottom: 30px; +} + +.c1.fi-padding-bottom-xxl { + padding-bottom: 40px; +} + +.c1.fi-padding-bottom-xxxl { + padding-bottom: 60px; +} + +.c1.fi-padding-bottom-xxxxl { + padding-bottom: 80px; +} + +.c1.fi-padding-bottom-insetXxs { + padding-bottom: 2px; +} + +.c1.fi-padding-bottom-insetXs { + padding-bottom: 4px; +} + +.c1.fi-padding-bottom-insetS { + padding-bottom: 6px; +} + +.c1.fi-padding-bottom-insetM { + padding-bottom: 8px; +} + +.c1.fi-padding-bottom-insetL { + padding-bottom: 10px; +} + +.c1.fi-padding-bottom-insetXl { + padding-bottom: 16px; +} + +.c1.fi-padding-bottom-insetXxl { + padding-bottom: 20px; +} + +.c1.fi-padding-left-xxs { + padding-left: 5px; +} + +.c1.fi-padding-left-xs { + padding-left: 10px; +} + +.c1.fi-padding-left-s { + padding-left: 15px; +} + +.c1.fi-padding-left-m { + padding-left: 20px; +} + +.c1.fi-padding-left-l { + padding-left: 25px; +} + +.c1.fi-padding-left-xl { + padding-left: 30px; +} + +.c1.fi-padding-left-xxl { + padding-left: 40px; +} + +.c1.fi-padding-left-xxxl { + padding-left: 60px; +} + +.c1.fi-padding-left-xxxxl { + padding-left: 80px; +} + +.c1.fi-padding-left-insetXxs { + padding-left: 2px; +} + +.c1.fi-padding-left-insetXs { + padding-left: 4px; +} + +.c1.fi-padding-left-insetS { + padding-left: 6px; +} + +.c1.fi-padding-left-insetM { + padding-left: 8px; +} + +.c1.fi-padding-left-insetL { + padding-left: 10px; +} + +.c1.fi-padding-left-insetXl { + padding-left: 16px; +} + +.c1.fi-padding-left-insetXxl { + padding-left: 20px; +} + +.c1:focus { + position: relative; + outline: 3px solid transparent; +} + +.c1:focus::after { + content: ''; + position: absolute; + pointer-events: none; + top: -2px; + right: -2px; + bottom: -2px; + left: -2px; + border-radius: 2px; + background-color: transparent; + border: 0px solid hsl(0,0%,100%); + box-sizing: border-box; + box-shadow: 0 0 0 2px hsl(196,77%,44%); + z-index: 9999; +} + +.c1:hover { + background: linear-gradient(0deg,hsl(212,63%,45%) 0%,hsl(212,63%,49%) 100%); + outline: 2px solid transparent; +} + +.c1:active { + background: hsl(212,63%,37%); +} + +.c1.fi-button--disabled, +.c1[disabled], +.c1:disabled { + text-shadow: 0 1px 1px rgba(33,33,33,0.5); + background: linear-gradient(0deg,hsl(202,7%,67%) 0%,hsl(202,7%,80%) 100%); + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: not-allowed; +} + +.c1.fi-button--disabled::after { + border: none; + box-shadow: none; +} + +.c1.fi-button--fullwidth { + display: block; + width: 100%; +} + +.c1.fi-button--inverted { + background: none; + background-color: hsl(212,63%,45%); + border: 1px solid hsl(0,0%,100%); + text-shadow: none; +} + +.c1.fi-button--inverted:hover { + background: linear-gradient(-180deg,hsla(0,0%,100%,0.1) 0%,hsla(0,0%,100%,0) 100%); +} + +.c1.fi-button--inverted:active { + background: none; + background-color: hsl(212,63%,45%); +} + +.c1.fi-button--inverted.fi-button--disabled, +.c1.fi-button--inverted[disabled], +.c1.fi-button--inverted:disabled { + opacity: 0.41; + background: none; + background-color: none; +} + +.c1.fi-button--secondary { + color: hsl(212,63%,45%); + background: none; + background-color: hsl(0,0%,100%); + border: 1px solid hsl(212,63%,45%); + text-shadow: none; +} + +.c1.fi-button--secondary:hover { + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); +} + +.c1.fi-button--secondary:active { + background: none; + background-color: hsl(202,7%,93%); +} + +.c1.fi-button--secondary.fi-button--disabled, +.c1.fi-button--secondary[disabled], +.c1.fi-button--secondary:disabled { + color: hsl(202,7%,67%); + text-shadow: none; + background: none; + background-color: hsl(212,63%,98%); + border-color: hsl(202,7%,67%); +} + +.c1.fi-button--secondary-noborder { + color: hsl(212,63%,45%); + background: none; + background-color: hsl(0,0%,100%); + border: 1px solid hsl(212,63%,45%); + text-shadow: none; + border: none; + background-color: transparent; +} + +.c1.fi-button--secondary-noborder:hover { + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); +} + +.c1.fi-button--secondary-noborder:active { + background: none; + background-color: hsl(202,7%,93%); +} + +.c1.fi-button--secondary-noborder.fi-button--disabled, +.c1.fi-button--secondary-noborder[disabled], +.c1.fi-button--secondary-noborder:disabled { + color: hsl(202,7%,67%); + text-shadow: none; + background: none; + background-color: hsl(212,63%,98%); + border-color: hsl(202,7%,67%); +} + +.c1.fi-button--secondary-light { + color: hsl(212,63%,45%); + color: hsl(212,63%,45%); + background: none; + background-color: hsl(0,0%,100%); + border: 1px solid hsl(212,63%,45%); + text-shadow: none; + background: linear-gradient(0deg,hsl(215,100%,95%),hsl(215,100%,97%)); + border: none; +} + +.c1.fi-button--secondary-light:hover { + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); +} + +.c1.fi-button--secondary-light:active { + background: none; + background-color: hsl(202,7%,93%); +} + +.c1.fi-button--secondary-light.fi-button--disabled, +.c1.fi-button--secondary-light[disabled], +.c1.fi-button--secondary-light:disabled { + color: hsl(202,7%,67%); + text-shadow: none; + background: none; + background-color: hsl(212,63%,98%); + border-color: hsl(202,7%,67%); +} + +.c1.fi-button--secondary-light:hover { + background: linear-gradient(0deg,hsl(215,100%,97%),hsl(212,63%,98%)); +} + +.c1.fi-button--secondary-light:active { + background: linear-gradient(0deg,hsl(202,7%,93%),hsl(202,7%,97%)); +} + +.c1.fi-button--secondary-light.fi-button--disabled, +.c1.fi-button--secondary-light[disabled], +.c1.fi-button--secondary-light:disabled { + color: hsl(202,7%,67%); + background: none; + background-color: hsl(202,7%,97%); +} + +.c1 > .fi-button_icon > .fi-icon { + width: 16px; + height: 16px; + margin-right: 8px; + vertical-align: middle; + -webkit-transform: translateY(-0.1em); + -ms-transform: translateY(-0.1em); + transform: translateY(-0.1em); +} + +.c1 > .fi-button_icon--right > .fi-icon { + margin-right: 0; + margin-left: 8px; +} + +.c1.fi-button--disabled > .fi-button_icon { + cursor: not-allowed; +} + + +`; + +exports[`Button variant secondaryNoBorder should match snapshot 1`] = ` +.c0 { + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; + font: 100% inherit; + line-height: 1; + text-align: left; + -webkit-text-decoration: none; + text-decoration: none; + vertical-align: baseline; + color: inherit; + background: none; + cursor: inherit; + display: inline-block; + max-width: 100%; + cursor: pointer; +} + +.c0:-moz-focusring { + outline: 1px dotted ButtonText; +} + +.c0::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c0::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; +} + +.c0::-webkit-inner-spin-button { + height: auto; +} + +.c0::-webkit-outer-spin-button { + height: auto; +} + +.c0::before, +.c0::after { + box-sizing: border-box; +} + +.c2 { + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; + font: 100% inherit; + line-height: 1; + text-align: left; + -webkit-text-decoration: none; + text-decoration: none; + vertical-align: baseline; + color: inherit; + background: none; + cursor: inherit; + display: inline; + max-width: 100%; + word-wrap: normal; + word-break: normal; + white-space: normal; +} + +.c2::before, +.c2::after { + box-sizing: border-box; +} + +.c1 { + color: hsl(0,0%,13%); + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 600; + font-size: 14px; + line-height: 20px; + padding: 10px 20px; + min-height: 40px; + color: hsl(0,0%,100%); + background: linear-gradient(0deg,hsl(212,63%,37%) 0%,hsl(212,63%,45%) 100%); + border-radius: 2px; + text-align: center; + text-shadow: 0 1px 1px hsla(214,100%,24%,0.5); + cursor: pointer; + border: 1px solid transparent; +} + +.c1.fi-margin-xxs { + margin: 5px; +} + +.c1.fi-margin-xs { + margin: 10px; +} + +.c1.fi-margin-s { + margin: 15px; +} + +.c1.fi-margin-m { + margin: 20px; +} + +.c1.fi-margin-l { + margin: 25px; +} + +.c1.fi-margin-xl { + margin: 30px; +} + +.c1.fi-margin-xxl { + margin: 40px; +} + +.c1.fi-margin-xxxl { + margin: 60px; +} + +.c1.fi-margin-xxxxl { + margin: 80px; +} + +.c1.fi-margin-insetXxs { + margin: 2px; +} + +.c1.fi-margin-insetXs { + margin: 4px; +} + +.c1.fi-margin-insetS { + margin: 6px; +} + +.c1.fi-margin-insetM { + margin: 8px; +} + +.c1.fi-margin-insetL { + margin: 10px; +} + +.c1.fi-margin-insetXl { + margin: 16px; +} + +.c1.fi-margin-insetXxl { + margin: 20px; +} + +.c1.fi-margin-top-xxs { + margin-top: 5px; +} + +.c1.fi-margin-top-xs { + margin-top: 10px; +} + +.c1.fi-margin-top-s { + margin-top: 15px; +} + +.c1.fi-margin-top-m { + margin-top: 20px; +} + +.c1.fi-margin-top-l { + margin-top: 25px; +} + +.c1.fi-margin-top-xl { + margin-top: 30px; +} + +.c1.fi-margin-top-xxl { + margin-top: 40px; +} + +.c1.fi-margin-top-xxxl { + margin-top: 60px; +} + +.c1.fi-margin-top-xxxxl { + margin-top: 80px; +} + +.c1.fi-margin-top-insetXxs { + margin-top: 2px; +} + +.c1.fi-margin-top-insetXs { + margin-top: 4px; +} + +.c1.fi-margin-top-insetS { + margin-top: 6px; +} + +.c1.fi-margin-top-insetM { + margin-top: 8px; +} + +.c1.fi-margin-top-insetL { + margin-top: 10px; +} + +.c1.fi-margin-top-insetXl { + margin-top: 16px; +} + +.c1.fi-margin-top-insetXxl { + margin-top: 20px; +} + +.c1.fi-margin-right-xxs { + margin-right: 5px; +} + +.c1.fi-margin-right-xs { + margin-right: 10px; +} + +.c1.fi-margin-right-s { + margin-right: 15px; +} + +.c1.fi-margin-right-m { + margin-right: 20px; +} + +.c1.fi-margin-right-l { + margin-right: 25px; +} + +.c1.fi-margin-right-xl { + margin-right: 30px; +} + +.c1.fi-margin-right-xxl { + margin-right: 40px; +} + +.c1.fi-margin-right-xxxl { + margin-right: 60px; +} + +.c1.fi-margin-right-xxxxl { + margin-right: 80px; +} + +.c1.fi-margin-right-insetXxs { + margin-right: 2px; +} + +.c1.fi-margin-right-insetXs { + margin-right: 4px; +} + +.c1.fi-margin-right-insetS { + margin-right: 6px; +} + +.c1.fi-margin-right-insetM { + margin-right: 8px; +} + +.c1.fi-margin-right-insetL { + margin-right: 10px; +} + +.c1.fi-margin-right-insetXl { + margin-right: 16px; +} + +.c1.fi-margin-right-insetXxl { + margin-right: 20px; +} + +.c1.fi-margin-bottom-xxs { + margin-bottom: 5px; +} + +.c1.fi-margin-bottom-xs { + margin-bottom: 10px; +} + +.c1.fi-margin-bottom-s { + margin-bottom: 15px; +} + +.c1.fi-margin-bottom-m { + margin-bottom: 20px; +} + +.c1.fi-margin-bottom-l { + margin-bottom: 25px; +} + +.c1.fi-margin-bottom-xl { + margin-bottom: 30px; +} + +.c1.fi-margin-bottom-xxl { + margin-bottom: 40px; +} + +.c1.fi-margin-bottom-xxxl { + margin-bottom: 60px; +} + +.c1.fi-margin-bottom-xxxxl { + margin-bottom: 80px; +} + +.c1.fi-margin-bottom-insetXxs { + margin-bottom: 2px; +} + +.c1.fi-margin-bottom-insetXs { + margin-bottom: 4px; +} + +.c1.fi-margin-bottom-insetS { + margin-bottom: 6px; +} + +.c1.fi-margin-bottom-insetM { + margin-bottom: 8px; +} + +.c1.fi-margin-bottom-insetL { + margin-bottom: 10px; +} + +.c1.fi-margin-bottom-insetXl { + margin-bottom: 16px; +} + +.c1.fi-margin-bottom-insetXxl { + margin-bottom: 20px; +} + +.c1.fi-margin-left-xxs { + margin-left: 5px; +} + +.c1.fi-margin-left-xs { + margin-left: 10px; +} + +.c1.fi-margin-left-s { + margin-left: 15px; +} + +.c1.fi-margin-left-m { + margin-left: 20px; +} + +.c1.fi-margin-left-l { + margin-left: 25px; +} + +.c1.fi-margin-left-xl { + margin-left: 30px; +} + +.c1.fi-margin-left-xxl { + margin-left: 40px; +} + +.c1.fi-margin-left-xxxl { + margin-left: 60px; +} + +.c1.fi-margin-left-xxxxl { + margin-left: 80px; +} + +.c1.fi-margin-left-insetXxs { + margin-left: 2px; +} + +.c1.fi-margin-left-insetXs { + margin-left: 4px; +} + +.c1.fi-margin-left-insetS { + margin-left: 6px; +} + +.c1.fi-margin-left-insetM { + margin-left: 8px; +} + +.c1.fi-margin-left-insetL { + margin-left: 10px; +} + +.c1.fi-margin-left-insetXl { + margin-left: 16px; +} + +.c1.fi-margin-left-insetXxl { + margin-left: 20px; +} + +.c1.fi-padding-xxs { + padding: 5px; +} + +.c1.fi-padding-xs { + padding: 10px; +} + +.c1.fi-padding-s { + padding: 15px; +} + +.c1.fi-padding-m { + padding: 20px; +} + +.c1.fi-padding-l { + padding: 25px; +} + +.c1.fi-padding-xl { + padding: 30px; +} + +.c1.fi-padding-xxl { + padding: 40px; +} + +.c1.fi-padding-xxxl { + padding: 60px; +} + +.c1.fi-padding-xxxxl { + padding: 80px; +} + +.c1.fi-padding-insetXxs { + padding: 2px; +} + +.c1.fi-padding-insetXs { + padding: 4px; +} + +.c1.fi-padding-insetS { + padding: 6px; +} + +.c1.fi-padding-insetM { + padding: 8px; +} + +.c1.fi-padding-insetL { + padding: 10px; +} + +.c1.fi-padding-insetXl { + padding: 16px; +} + +.c1.fi-padding-insetXxl { + padding: 20px; +} + +.c1.fi-padding-top-xxs { + padding-top: 5px; +} + +.c1.fi-padding-top-xs { + padding-top: 10px; +} + +.c1.fi-padding-top-s { + padding-top: 15px; +} + +.c1.fi-padding-top-m { + padding-top: 20px; +} + +.c1.fi-padding-top-l { + padding-top: 25px; +} + +.c1.fi-padding-top-xl { + padding-top: 30px; +} + +.c1.fi-padding-top-xxl { + padding-top: 40px; +} + +.c1.fi-padding-top-xxxl { + padding-top: 60px; +} + +.c1.fi-padding-top-xxxxl { + padding-top: 80px; +} + +.c1.fi-padding-top-insetXxs { + padding-top: 2px; +} + +.c1.fi-padding-top-insetXs { + padding-top: 4px; +} + +.c1.fi-padding-top-insetS { + padding-top: 6px; +} + +.c1.fi-padding-top-insetM { + padding-top: 8px; +} + +.c1.fi-padding-top-insetL { + padding-top: 10px; +} + +.c1.fi-padding-top-insetXl { + padding-top: 16px; +} + +.c1.fi-padding-top-insetXxl { + padding-top: 20px; +} + +.c1.fi-padding-right-xxs { + padding-right: 5px; +} + +.c1.fi-padding-right-xs { + padding-right: 10px; +} + +.c1.fi-padding-right-s { + padding-right: 15px; +} + +.c1.fi-padding-right-m { + padding-right: 20px; +} + +.c1.fi-padding-right-l { + padding-right: 25px; +} + +.c1.fi-padding-right-xl { + padding-right: 30px; +} + +.c1.fi-padding-right-xxl { + padding-right: 40px; +} + +.c1.fi-padding-right-xxxl { + padding-right: 60px; +} + +.c1.fi-padding-right-xxxxl { + padding-right: 80px; +} + +.c1.fi-padding-right-insetXxs { + padding-right: 2px; +} + +.c1.fi-padding-right-insetXs { + padding-right: 4px; +} + +.c1.fi-padding-right-insetS { + padding-right: 6px; +} + +.c1.fi-padding-right-insetM { + padding-right: 8px; +} + +.c1.fi-padding-right-insetL { + padding-right: 10px; +} + +.c1.fi-padding-right-insetXl { + padding-right: 16px; +} + +.c1.fi-padding-right-insetXxl { + padding-right: 20px; +} + +.c1.fi-padding-bottom-xxs { + padding-bottom: 5px; +} + +.c1.fi-padding-bottom-xs { + padding-bottom: 10px; +} + +.c1.fi-padding-bottom-s { + padding-bottom: 15px; +} + +.c1.fi-padding-bottom-m { + padding-bottom: 20px; +} + +.c1.fi-padding-bottom-l { + padding-bottom: 25px; +} + +.c1.fi-padding-bottom-xl { + padding-bottom: 30px; +} + +.c1.fi-padding-bottom-xxl { + padding-bottom: 40px; +} + +.c1.fi-padding-bottom-xxxl { + padding-bottom: 60px; +} + +.c1.fi-padding-bottom-xxxxl { + padding-bottom: 80px; +} + +.c1.fi-padding-bottom-insetXxs { + padding-bottom: 2px; +} + +.c1.fi-padding-bottom-insetXs { + padding-bottom: 4px; +} + +.c1.fi-padding-bottom-insetS { + padding-bottom: 6px; +} + +.c1.fi-padding-bottom-insetM { + padding-bottom: 8px; +} + +.c1.fi-padding-bottom-insetL { + padding-bottom: 10px; +} + +.c1.fi-padding-bottom-insetXl { + padding-bottom: 16px; +} + +.c1.fi-padding-bottom-insetXxl { + padding-bottom: 20px; +} + +.c1.fi-padding-left-xxs { + padding-left: 5px; +} + +.c1.fi-padding-left-xs { + padding-left: 10px; +} + +.c1.fi-padding-left-s { + padding-left: 15px; +} + +.c1.fi-padding-left-m { + padding-left: 20px; +} + +.c1.fi-padding-left-l { + padding-left: 25px; +} + +.c1.fi-padding-left-xl { + padding-left: 30px; +} + +.c1.fi-padding-left-xxl { + padding-left: 40px; +} + +.c1.fi-padding-left-xxxl { + padding-left: 60px; +} + +.c1.fi-padding-left-xxxxl { + padding-left: 80px; +} + +.c1.fi-padding-left-insetXxs { + padding-left: 2px; +} + +.c1.fi-padding-left-insetXs { + padding-left: 4px; +} + +.c1.fi-padding-left-insetS { + padding-left: 6px; +} + +.c1.fi-padding-left-insetM { + padding-left: 8px; +} + +.c1.fi-padding-left-insetL { + padding-left: 10px; +} + +.c1.fi-padding-left-insetXl { + padding-left: 16px; +} + +.c1.fi-padding-left-insetXxl { + padding-left: 20px; +} + .c1:focus { position: relative; outline: 3px solid transparent; diff --git a/src/core/Form/DateInput/__snapshots__/DateInput.test.tsx.snap b/src/core/Form/DateInput/__snapshots__/DateInput.test.tsx.snap index b03125f17..8a89d63be 100644 --- a/src/core/Form/DateInput/__snapshots__/DateInput.test.tsx.snap +++ b/src/core/Form/DateInput/__snapshots__/DateInput.test.tsx.snap @@ -3099,1044 +3099,1684 @@ exports[`snapshots match date input with datepicker with controlled input value border: 1px solid transparent; } -.c13:focus { - position: relative; - outline: 3px solid transparent; +.c13.fi-margin-xxs { + margin: 5px; } -.c13:focus::after { - content: ''; - position: absolute; - pointer-events: none; - top: -2px; - right: -2px; - bottom: -2px; - left: -2px; - border-radius: 2px; - background-color: transparent; - border: 0px solid hsl(0,0%,100%); - box-sizing: border-box; - box-shadow: 0 0 0 2px hsl(196,77%,44%); - z-index: 9999; +.c13.fi-margin-xs { + margin: 10px; } -.c13:hover { - background: linear-gradient(0deg,hsl(212,63%,45%) 0%,hsl(212,63%,49%) 100%); - outline: 2px solid transparent; +.c13.fi-margin-s { + margin: 15px; } -.c13:active { - background: hsl(212,63%,37%); +.c13.fi-margin-m { + margin: 20px; } -.c13.fi-button--disabled, -.c13[disabled], -.c13:disabled { - text-shadow: 0 1px 1px rgba(33,33,33,0.5); - background: linear-gradient(0deg,hsl(202,7%,67%) 0%,hsl(202,7%,80%) 100%); - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - cursor: not-allowed; +.c13.fi-margin-l { + margin: 25px; } -.c13.fi-button--disabled::after { - border: none; - box-shadow: none; +.c13.fi-margin-xl { + margin: 30px; } -.c13.fi-button--fullwidth { - display: block; - width: 100%; +.c13.fi-margin-xxl { + margin: 40px; } -.c13.fi-button--inverted { - background: none; - background-color: hsl(212,63%,45%); - border: 1px solid hsl(0,0%,100%); - text-shadow: none; +.c13.fi-margin-xxxl { + margin: 60px; } -.c13.fi-button--inverted:hover { - background: linear-gradient(-180deg,hsla(0,0%,100%,0.1) 0%,hsla(0,0%,100%,0) 100%); +.c13.fi-margin-xxxxl { + margin: 80px; } -.c13.fi-button--inverted:active { - background: none; - background-color: hsl(212,63%,45%); +.c13.fi-margin-insetXxs { + margin: 2px; } -.c13.fi-button--inverted.fi-button--disabled, -.c13.fi-button--inverted[disabled], -.c13.fi-button--inverted:disabled { - opacity: 0.41; - background: none; - background-color: none; +.c13.fi-margin-insetXs { + margin: 4px; } -.c13.fi-button--secondary { - color: hsl(212,63%,45%); - background: none; - background-color: hsl(0,0%,100%); - border: 1px solid hsl(212,63%,45%); - text-shadow: none; +.c13.fi-margin-insetS { + margin: 6px; } -.c13.fi-button--secondary:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); +.c13.fi-margin-insetM { + margin: 8px; } -.c13.fi-button--secondary:active { - background: none; - background-color: hsl(202,7%,93%); +.c13.fi-margin-insetL { + margin: 10px; } -.c13.fi-button--secondary.fi-button--disabled, -.c13.fi-button--secondary[disabled], -.c13.fi-button--secondary:disabled { - color: hsl(202,7%,67%); - text-shadow: none; - background: none; - background-color: hsl(212,63%,98%); - border-color: hsl(202,7%,67%); +.c13.fi-margin-insetXl { + margin: 16px; } -.c13.fi-button--secondary-noborder { - color: hsl(212,63%,45%); - background: none; - background-color: hsl(0,0%,100%); - border: 1px solid hsl(212,63%,45%); - text-shadow: none; - border: none; - background-color: transparent; +.c13.fi-margin-insetXxl { + margin: 20px; } -.c13.fi-button--secondary-noborder:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); +.c13.fi-margin-top-xxs { + margin-top: 5px; } -.c13.fi-button--secondary-noborder:active { - background: none; - background-color: hsl(202,7%,93%); +.c13.fi-margin-top-xs { + margin-top: 10px; } -.c13.fi-button--secondary-noborder.fi-button--disabled, -.c13.fi-button--secondary-noborder[disabled], -.c13.fi-button--secondary-noborder:disabled { - color: hsl(202,7%,67%); - text-shadow: none; - background: none; - background-color: hsl(212,63%,98%); - border-color: hsl(202,7%,67%); +.c13.fi-margin-top-s { + margin-top: 15px; } -.c13.fi-button--secondary-light { - color: hsl(212,63%,45%); - color: hsl(212,63%,45%); - background: none; - background-color: hsl(0,0%,100%); - border: 1px solid hsl(212,63%,45%); - text-shadow: none; - background: linear-gradient(0deg,hsl(215,100%,95%),hsl(215,100%,97%)); - border: none; +.c13.fi-margin-top-m { + margin-top: 20px; } -.c13.fi-button--secondary-light:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); +.c13.fi-margin-top-l { + margin-top: 25px; } -.c13.fi-button--secondary-light:active { - background: none; - background-color: hsl(202,7%,93%); +.c13.fi-margin-top-xl { + margin-top: 30px; } -.c13.fi-button--secondary-light.fi-button--disabled, -.c13.fi-button--secondary-light[disabled], -.c13.fi-button--secondary-light:disabled { - color: hsl(202,7%,67%); - text-shadow: none; - background: none; - background-color: hsl(212,63%,98%); - border-color: hsl(202,7%,67%); +.c13.fi-margin-top-xxl { + margin-top: 40px; } -.c13.fi-button--secondary-light:hover { - background: linear-gradient(0deg,hsl(215,100%,97%),hsl(212,63%,98%)); +.c13.fi-margin-top-xxxl { + margin-top: 60px; } -.c13.fi-button--secondary-light:active { - background: linear-gradient(0deg,hsl(202,7%,93%),hsl(202,7%,97%)); +.c13.fi-margin-top-xxxxl { + margin-top: 80px; } -.c13.fi-button--secondary-light.fi-button--disabled, -.c13.fi-button--secondary-light[disabled], -.c13.fi-button--secondary-light:disabled { - color: hsl(202,7%,67%); - background: none; - background-color: hsl(202,7%,97%); +.c13.fi-margin-top-insetXxs { + margin-top: 2px; } -.c13 > .fi-button_icon > .fi-icon { - width: 16px; - height: 16px; - margin-right: 8px; - vertical-align: middle; - -webkit-transform: translateY(-0.1em); - -ms-transform: translateY(-0.1em); - transform: translateY(-0.1em); +.c13.fi-margin-top-insetXs { + margin-top: 4px; } -.c13 > .fi-button_icon--right > .fi-icon { - margin-right: 0; - margin-left: 8px; +.c13.fi-margin-top-insetS { + margin-top: 6px; } -.c13.fi-button--disabled > .fi-button_icon { - cursor: not-allowed; +.c13.fi-margin-top-insetM { + margin-top: 8px; } -.c17.fi-month-day { - padding: 1px; - text-align: center; - min-width: 36px; - height: 38px; +.c13.fi-margin-top-insetL { + margin-top: 10px; } -.c17.fi-month-day--disabled { - color: hsl(202,7%,67%); +.c13.fi-margin-top-insetXl { + margin-top: 16px; } -.c17 .fi-month-day_current { - margin: 0 6px; - padding: 3px 0; - border-bottom: 1px solid hsl(202,7%,67%); - text-align: center; +.c13.fi-margin-top-insetXxl { + margin-top: 20px; } -.c17 .fi-month-day_button_current { - margin: 0 6px; - padding: 3px 0; - border-bottom: 1px solid hsl(0,0%,13%); - text-align: center; +.c13.fi-margin-right-xxs { + margin-right: 5px; } -.c17 .fi-month-day_button--disabled { - color: hsl(202,7%,67%); +.c13.fi-margin-right-xs { + margin-right: 10px; } -.c17 .fi-month-day_button--disabled .fi-month-day_button_current { - border-bottom: 1px solid hsl(202,7%,67%); +.c13.fi-margin-right-s { + margin-right: 15px; } -.c17 .fi-month-day_button { - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 400; - border: 1px solid transparent; - border-radius: 2px; - width: 100%; - height: 100%; - text-align: center; +.c13.fi-margin-right-m { + margin-right: 20px; } -.c17 .fi-month-day_button:focus { - box-shadow: none; - position: relative; - outline: 3px solid transparent; +.c13.fi-margin-right-l { + margin-right: 25px; } -.c17 .fi-month-day_button:focus:after { - content: ''; - position: absolute; - pointer-events: none; - top: -2px; - right: -2px; - bottom: -2px; - left: -2px; - border-radius: 2px; - background-color: transparent; - border: 0px solid hsl(0,0%,100%); - box-sizing: border-box; - box-shadow: 0 0 0 2px hsl(196,77%,44%); - z-index: 9999; +.c13.fi-margin-right-xl { + margin-right: 30px; } -.c17 .fi-month-day_button:not(.fi-month-day_button--disabled):hover { - background-color: hsl(212,63%,45%); - color: hsl(0,0%,100%); +.c13.fi-margin-right-xxl { + margin-right: 40px; } -.c17 .fi-month-day_button:not(.fi-month-day_button--disabled):hover .fi-month-day_button_current { - border-bottom: 1px solid hsl(0,0%,100%); +.c13.fi-margin-right-xxxl { + margin-right: 60px; } -.c17 .fi-month-day_button--selected { - border: 1px solid hsl(212,63%,45%); - background-color: hsl(212,63%,95%); - -webkit-text-decoration: none; - text-decoration: none; - font-weight: 600; +.c13.fi-margin-right-xxxxl { + margin-right: 80px; } -.c17 .fi-month-day_button--selected:focus { - box-shadow: none; - position: relative; +.c13.fi-margin-right-insetXxs { + margin-right: 2px; } -.c17 .fi-month-day_button--selected:focus:after { - content: ''; - position: absolute; - pointer-events: none; - top: -2px; - right: -2px; - bottom: -2px; - left: -2px; - border-radius: 2px; - background-color: transparent; - border: 0px solid hsl(0,0%,100%); - box-sizing: border-box; - box-shadow: 0 0 0 2px hsl(196,77%,44%); - z-index: 9999; +.c13.fi-margin-right-insetXs { + margin-right: 4px; } -.c17 .fi-month-day_button--selected:hover { - font-weight: 400; +.c13.fi-margin-right-insetS { + margin-right: 6px; } -.c16.fi-month-table { - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 400; - margin-top: 15px; - margin-bottom: 10px; +.c13.fi-margin-right-insetM { + margin-right: 8px; } -.c16 .fi-month-table_thead-cell { - padding: 1px; - text-align: center; - min-width: 36px; - height: 38px; +.c13.fi-margin-right-insetL { + margin-right: 10px; } -.c7 { - position: absolute; - -webkit-clip: rect(0 0 0 0); - clip: rect(0 0 0 0); - height: 1px; - width: 1px; - margin: -1px; - padding: 0; - border: 0; - overflow: hidden; +.c13.fi-margin-right-insetXl { + margin-right: 16px; } -.c3.fi-label .fi-label_label-span { - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 600; - display: inline-block; - vertical-align: middle; - color: hsl(0,0%,13%); +.c13.fi-margin-right-insetXxl { + margin-right: 20px; } -.c3.fi-label .fi-label_label-span .fi-label_optional-text { - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 400; +.c13.fi-margin-bottom-xxs { + margin-bottom: 5px; } -.c3.fi-label .fi-label_label-span .fi-tooltip { - margin-left: 6px; +.c13.fi-margin-bottom-xs { + margin-bottom: 10px; } -.c9 { - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 600; - color: hsl(0,0%,13%); - font-size: 14px; - line-height: 20px; +.c13.fi-margin-bottom-s { + margin-bottom: 15px; } -.c9.fi-status-text { - display: block; +.c13.fi-margin-bottom-m { + margin-bottom: 20px; } -.c9.fi-status-text.fi-status-text--error { - color: hsl(3,59%,48%); +.c13.fi-margin-bottom-l { + margin-bottom: 25px; } -.c12 { - width: 290px; +.c13.fi-margin-bottom-xl { + margin-bottom: 30px; } -.c12 .fi-dropdown_item-list { - padding-top: 0; +.c13.fi-margin-bottom-xxl { + margin-bottom: 40px; } -.c12.fi-dropdown { - display: inline-block; +.c13.fi-margin-bottom-xxxl { + margin-bottom: 60px; } -.c12.fi-dropdown .fi-dropdown_label--visible { - margin-bottom: 10px; +.c13.fi-margin-bottom-xxxxl { + margin-bottom: 80px; } -.c12.fi-dropdown .fi-hint-text { - margin-bottom: 10px; +.c13.fi-margin-bottom-insetXxs { + margin-bottom: 2px; } -.c12.fi-dropdown .fi-status-text { - line-height: 1.1rem; +.c13.fi-margin-bottom-insetXs { + margin-bottom: 4px; } -.c12.fi-dropdown .fi-status-text.fi-dropdown_statusText--has-content { - margin-top: 5px; +.c13.fi-margin-bottom-insetS { + margin-bottom: 6px; } -.c12.fi-dropdown .fi-dropdown_button { - color: hsl(0,0%,13%); - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 400; - min-width: 245px; - max-width: 100%; - padding: 8px 16px; - border: 1px solid hsl(202,7%,80%); - border-radius: 2px; - line-height: 1; - position: relative; - display: inline-block; - word-break: break-word; - width: 100%; - overflow-wrap: break-word; - height: 40px; - padding: 7px 38px 7px 7px; - border-color: hsl(201,7%,58%); - text-align: left; - line-height: 1.5; - background-color: hsl(0,0%,100%); - box-shadow: 0 1px 2px 0 hsla(214,100%,24%,0.1) inset; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - white-space: nowrap; +.c13.fi-margin-bottom-insetM { + margin-bottom: 8px; } -.c12.fi-dropdown .fi-dropdown_button:focus-visible { - outline: none; +.c13.fi-margin-bottom-insetL { + margin-bottom: 10px; } -.c12.fi-dropdown .fi-dropdown_button:before { - content: ''; - position: absolute; - top: 50%; - right: 16px; - margin-top: -3px; - border-style: solid; - border-color: hsl(0,0%,13%) transparent transparent transparent; - border-width: 6px 4px 0 4px; +.c13.fi-margin-bottom-insetXl { + margin-bottom: 16px; } -.c12.fi-dropdown .fi-dropdown_button[aria-expanded='true']:before { - border-color: transparent transparent hsl(0,0%,13%) transparent; - border-width: 0 4px 6px 4px; +.c13.fi-margin-bottom-insetXxl { + margin-bottom: 20px; } -.c12.fi-dropdown .fi-dropdown_display-value { - width: 100%; - height: 100%; - display: inline-block; - line-height: 1.5; - overflow: hidden; +.c13.fi-margin-left-xxs { + margin-left: 5px; } -.c12.fi-dropdown .fi-dropdown_popover { - color: hsl(0,0%,13%); - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 400; - margin-top: -1px; - padding: 0; - box-sizing: border-box; - font-size: 100%; - border: 0; - background-color: hsl(0,0%,100%); - border-color: hsl(201,7%,58%); - border-style: solid; - border-width: 0 1px 1px 1px; - border-radius: 0px 0px 2px 2px; - max-height: 265px; - overflow-y: auto; - overflow-x: hidden; +.c13.fi-margin-left-xs { + margin-left: 10px; } -.c12.fi-dropdown .fi-dropdown_popover:focus-within { - outline: 0; - box-shadow: none; +.c13.fi-margin-left-s { + margin-left: 15px; } -.c12.fi-dropdown--full-width { - width: 100%; +.c13.fi-margin-left-m { + margin-left: 20px; } -.c12.fi-dropdown--open .fi-dropdown_button { - border-bottom: 0; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - padding-bottom: 8px; +.c13.fi-margin-left-l { + margin-left: 25px; } -.c12.fi-dropdown--error .fi-dropdown_button { - border-color: hsl(3,59%,48%); - border-width: 2px; +.c13.fi-margin-left-xl { + margin-left: 30px; } -.c12.fi-dropdown--italicize .fi-dropdown_button { - font-style: italic; - color: hsl(201,7%,46%); - opacity: 1; +.c13.fi-margin-left-xxl { + margin-left: 40px; } -.c12.fi-dropdown--disabled .fi-dropdown_input-wrapper { - cursor: not-allowed; +.c13.fi-margin-left-xxxl { + margin-left: 60px; } -.c12.fi-dropdown--disabled .fi-dropdown_input-wrapper .fi-dropdown_button { - background-color: hsl(202,7%,97%); - color: hsl(202,7%,67%); - opacity: 1; - pointer-events: none; +.c13.fi-margin-left-xxxxl { + margin-left: 80px; } -.c12.fi-dropdown--disabled .fi-dropdown_input-wrapper .fi-dropdown_button:before { - border-color: hsl(202,7%,67%) transparent transparent transparent; +.c13.fi-margin-left-insetXxs { + margin-left: 2px; } -.c12.fi-dropdown:not(.fi-dropdown--open) .fi-dropdown_button:focus { - outline: 3px solid transparent; - position: relative; +.c13.fi-margin-left-insetXs { + margin-left: 4px; } -.c12.fi-dropdown:not(.fi-dropdown--open) .fi-dropdown_button:focus:after { - content: ''; - position: absolute; - pointer-events: none; - top: -2px; - right: -2px; - bottom: -2px; - left: -2px; - border-radius: 2px; - background-color: transparent; - border: 0px solid hsl(0,0%,100%); - box-sizing: border-box; - box-shadow: 0 0 0 2px hsl(196,77%,44%); - z-index: 9999; +.c13.fi-margin-left-insetS { + margin-left: 6px; } -.c11.fi-date-selectors_container { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - row-gap: 10px; +.c13.fi-margin-left-insetM { + margin-left: 8px; } -.c11 .fi-date-selectors_year-select { - margin-right: 10px; - width: 0px; +.c13.fi-margin-left-insetL { + margin-left: 10px; } -.c11 .fi-date-selectors_year-select .fi-dropdown_button { - min-width: 90px; +.c13.fi-margin-left-insetXl { + margin-left: 16px; } -.c11 .fi-date-selectors_month-select { - margin-right: 5px; - width: 0px; +.c13.fi-margin-left-insetXxl { + margin-left: 20px; } -.c11 .fi-date-selectors_month-select .fi-dropdown_button { - min-width: 145px; +.c13.fi-padding-xxs { + padding: 5px; } -.c11 .fi-date-selectors_buttons { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-wrap: nowrap; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; +.c13.fi-padding-xs { + padding: 10px; } -.c11 .fi-date-selectors_month-button { - padding: 0; - width: 40px; +.c13.fi-padding-s { + padding: 15px; } -.c11 .fi-date-selectors_month-button_icon { - width: 16px; - height: 16px; - vertical-align: middle; +.c13.fi-padding-m { + padding: 20px; } -.c10 { - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 18px; - line-height: 1.5; - font-weight: 400; +.c13.fi-padding-l { + padding: 25px; } -.c10.fi-date-picker { - background-color: hsl(0,0%,100%); - box-shadow: 0px 4px 8px 0px hsla(0,0%,13%,0.14); - border: 1px solid hsl(0,0%,58%); +.c13.fi-padding-xl { + padding: 30px; } -.c10 .fi-date-picker_bottom-container { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: end; - -webkit-justify-content: flex-end; - -ms-flex-pack: end; - justify-content: flex-end; +.c13.fi-padding-xxl { + padding: 40px; } -.c10 .fi-date-picker_application { - padding: 20px 15px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - width: -webkit-fit-content; - width: -moz-fit-content; - width: fit-content; - margin: auto; +.c13.fi-padding-xxxl { + padding: 60px; } -.c10.fi-date-picker--small-screen { - border: none; - background: none; - top: 0; - bottom: 0; - left: 0; - right: 0; - position: fixed; - -webkit-transform: translateZ(0) translateY(0); - -ms-transform: translateZ(0) translateY(0); - transform: translateZ(0) translateY(0); - -webkit-transition: -webkit-transform 200ms cubic-bezier(0.28,0.84,0.42,1); - -webkit-transition: transform 200ms cubic-bezier(0.28,0.84,0.42,1); - transition: transform 200ms cubic-bezier(0.28,0.84,0.42,1); +.c13.fi-padding-xxxxl { + padding: 80px; } -.c10.fi-date-picker--small-screen .fi-date-picker_application { - padding-top: 10px; - padding-bottom: 30px; +.c13.fi-padding-insetXxs { + padding: 2px; } -.c10.fi-date-picker--hidden { - visibility: hidden; +.c13.fi-padding-insetXs { + padding: 4px; } -.c10.fi-date-picker--small-screen-hidden { - -webkit-transform: translateZ(0) translateY(100%); - -ms-transform: translateZ(0) translateY(100%); - transform: translateZ(0) translateY(100%); - -webkit-transition: -webkit-transform 200ms cubic-bezier(0.28,0.84,0.42,1), visibility 200ms cubic-bezier(0.28,0.84,0.42,1); - -webkit-transition: transform 200ms cubic-bezier(0.28,0.84,0.42,1), visibility 200ms cubic-bezier(0.28,0.84,0.42,1); - transition: transform 200ms cubic-bezier(0.28,0.84,0.42,1), visibility 200ms cubic-bezier(0.28,0.84,0.42,1); +.c13.fi-padding-insetS { + padding: 6px; } -.c10 .fi-date-picker_slide-indicator-wrapper { - touch-action: none; - padding-top: 20px; - padding-bottom: 10px; - cursor: -webkit-grab; - cursor: -moz-grab; - cursor: grab; +.c13.fi-padding-insetM { + padding: 8px; } -.c10 .fi-date-picker_slide-indicator { - margin: 0 auto; - width: 60px; - height: 3px; - background-color: hsl(202,7%,80%); +.c13.fi-padding-insetL { + padding: 10px; } -.c10 .fi-date-picker_small-screen-container { - touch-action: pan-x pinch-zoom; - max-height: 100%; - overscroll-behavior: contain; - background-color: hsl(0,0%,100%); - border-top: 1px solid hsl(0,0%,58%); - border-radius: 10px 10px 0 0; - position: absolute; - bottom: 0; - left: 0; - right: 0; +.c13.fi-padding-insetXl { + padding: 16px; } -.c10 .fi-date-picker_small-screen-container--scroll { - overflow: auto; - touch-action: auto; +.c13.fi-padding-insetXxl { + padding: 20px; } -.c10 .fi-date-picker_popper-arrow, -.c10 .fi-date-picker_popper-arrow::before { - position: absolute; - width: 11px; - height: 11px; +.c13.fi-padding-top-xxs { + padding-top: 5px; } -.c10 .fi-date-picker_popper-arrow::before { - content: ''; - background-color: hsl(0,0%,100%); - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); +.c13.fi-padding-top-xs { + padding-top: 10px; } -.c10 .fi-date-picker_popper-arrow[data-popper-placement^='bottom-end'] { - top: -7px; +.c13.fi-padding-top-s { + padding-top: 15px; } -.c10 .fi-date-picker_popper-arrow[data-popper-placement^='bottom-end']::before { - border-top: 1px solid hsl(0,0%,58%); - border-left: 1px solid hsl(0,0%,58%); +.c13.fi-padding-top-m { + padding-top: 20px; } -.c10 .fi-date-picker_popper-arrow[data-popper-placement^='top-end'] { - bottom: -6px; +.c13.fi-padding-top-l { + padding-top: 25px; } -.c10 .fi-date-picker_popper-arrow[data-popper-placement^='top-end']::before { - border-bottom: 1px solid hsl(0,0%,58%); - border-right: 1px solid hsl(0,0%,58%); +.c13.fi-padding-top-xl { + padding-top: 30px; } -.c1 { - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 18px; - line-height: 1.5; - font-weight: 400; - width: 150px; +.c13.fi-padding-top-xxl { + padding-top: 40px; } -.c1.fi-date-input--full-width { - width: 100%; +.c13.fi-padding-top-xxxl { + padding-top: 60px; } -.c1 .fi-date-input_wrapper { - width: 100%; - display: inline-block; +.c13.fi-padding-top-xxxxl { + padding-top: 80px; } -.c1 .fi-date-input_wrapper .fi-date-input_label--visible { - margin-bottom: 10px; +.c13.fi-padding-top-insetXxs { + padding-top: 2px; } -.c1 .fi-date-input_wrapper .fi-hint-text { - margin-bottom: 10px; +.c13.fi-padding-top-insetXs { + padding-top: 4px; } -.c1 .fi-date-input_wrapper .fi-date-input_statusText--has-content { - margin-top: 5px; +.c13.fi-padding-top-insetS { + padding-top: 6px; } -.c1 .fi-date-input_input-element-container { - width: 100%; +.c13.fi-padding-top-insetM { + padding-top: 8px; } -.c1 .fi-date-input_input-element-container > input:focus { - outline-color: hsl(196,77%,44%); - outline-width: 2px; - outline-offset: 2px; - outline-style: solid; +.c13.fi-padding-top-insetL { + padding-top: 10px; } -.c1 .fi-date-input_input-element-container:focus-within > input:focus { - outline: none; +.c13.fi-padding-top-insetXl { + padding-top: 16px; } -.c1 .fi-date-input_input-element-container:focus-within { - position: relative; - outline: 3px solid transparent; +.c13.fi-padding-top-insetXxl { + padding-top: 20px; } -.c1 .fi-date-input_input-element-container:focus-within::after { - content: ''; - position: absolute; - pointer-events: none; - top: -2px; - right: -2px; - bottom: -2px; - left: -2px; - border-radius: 2px; - background-color: transparent; - border: 0px solid hsl(0,0%,100%); - box-sizing: border-box; - box-shadow: 0 0 0 2px hsl(196,77%,44%); - z-index: 9999; +.c13.fi-padding-right-xxs { + padding-right: 5px; } -.c1 .fi-date-input_picker-element-container { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; +.c13.fi-padding-right-xs { + padding-right: 10px; } -.c1 .fi-date-input_input-and-picker-wrapper { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; +.c13.fi-padding-right-s { + padding-right: 15px; } -.c1 .fi-date-input_input { - color: hsl(0,0%,13%); - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 400; - min-width: 245px; - max-width: 100%; - padding: 8px 16px; - border: 1px solid hsl(202,7%,80%); - border-radius: 2px; - line-height: 1; - background-color: hsl(0,0%,100%); - min-width: 40px; - width: 100%; - min-height: 40px; - padding-left: 10px; - border-color: hsl(201,7%,58%); - border-radius: 2px; +.c13.fi-padding-right-m { + padding-right: 20px; } -.c1 .fi-date-input_input::-webkit-input-placeholder { - font-style: italic; - color: hsl(201,7%,46%); - opacity: 1; +.c13.fi-padding-right-l { + padding-right: 25px; } -.c1 .fi-date-input_input::-moz-placeholder { - font-style: italic; - color: hsl(201,7%,46%); - opacity: 1; +.c13.fi-padding-right-xl { + padding-right: 30px; } -.c1 .fi-date-input_input:-ms-input-placeholder { - font-style: italic; - color: hsl(201,7%,46%); - opacity: 1; +.c13.fi-padding-right-xxl { + padding-right: 40px; } -.c1 .fi-date-input_input::placeholder { - font-style: italic; - color: hsl(201,7%,46%); - opacity: 1; +.c13.fi-padding-right-xxxl { + padding-right: 60px; } -.c1 .fi-date-input_picker-button { - height: 100%; - width: 40px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - padding: 10px; - border: 1px solid hsl(212,63%,45%); - border-radius: 2px; +.c13.fi-padding-right-xxxxl { + padding-right: 80px; } -.c1 .fi-date-input_picker-button > input:focus { - outline-color: hsl(196,77%,44%); - outline-width: 2px; - outline-offset: 2px; - outline-style: solid; +.c13.fi-padding-right-insetXxs { + padding-right: 2px; } -.c1 .fi-date-input_picker-button:focus-within > input:focus { - outline: none; +.c13.fi-padding-right-insetXs { + padding-right: 4px; } -.c1 .fi-date-input_picker-button:focus-within { - position: relative; +.c13.fi-padding-right-insetS { + padding-right: 6px; } -.c1 .fi-date-input_picker-button:focus-within::after { - content: ''; - position: absolute; - pointer-events: none; - top: -2px; - right: -2px; - bottom: -2px; - left: -2px; - border-radius: 2px; - background-color: transparent; - border: 0px solid hsl(0,0%,100%); - box-sizing: border-box; - box-shadow: 0 0 0 2px hsl(196,77%,44%); - z-index: 9999; +.c13.fi-padding-right-insetM { + padding-right: 8px; } -.c1 .fi-date-input_picker-button:focus { - outline: 3px solid transparent; +.c13.fi-padding-right-insetL { + padding-right: 10px; } -.c1 .fi-date-input_picker-icon { - color: hsl(212,63%,45%); +.c13.fi-padding-right-insetXl { + padding-right: 16px; } -.c1 .fi-date-input_picker-button--disabled { - cursor: default; - border-color: hsl(202,7%,67%); +.c13.fi-padding-right-insetXxl { + padding-right: 20px; } -.c1 .fi-date-input_picker-button--disabled .fi-date-input_picker-icon { - color: hsl(202,7%,67%); +.c13.fi-padding-bottom-xxs { + padding-bottom: 5px; } -.c1.fi-date-input--error .fi-date-input_input { - border: 2px solid hsl(3,59%,48%); +.c13.fi-padding-bottom-xs { + padding-bottom: 10px; } -.c1.fi-date-input--error .fi-date-input_picker-button { - border: 2px solid hsl(3,59%,48%); - border-left: 1px solid hsl(212,63%,45%); - border-radius: 0 2px 2px 0; +.c13.fi-padding-bottom-s { + padding-bottom: 15px; } -.c1.fi-date-input--success .fi-date-input_input { - border: 2px solid hsl(166,90%,34%); +.c13.fi-padding-bottom-m { + padding-bottom: 20px; } -.c1.fi-date-input--success .fi-date-input_picker-button { - border: 2px solid hsl(166,90%,34%); - border-left: 1px solid hsl(212,63%,45%); - border-radius: 0 2px 2px 0; +.c13.fi-padding-bottom-l { + padding-bottom: 25px; } -.c1.fi-date-input--disabled .fi-date-input_input { +.c13.fi-padding-bottom-xl { + padding-bottom: 30px; +} + +.c13.fi-padding-bottom-xxl { + padding-bottom: 40px; +} + +.c13.fi-padding-bottom-xxxl { + padding-bottom: 60px; +} + +.c13.fi-padding-bottom-xxxxl { + padding-bottom: 80px; +} + +.c13.fi-padding-bottom-insetXxs { + padding-bottom: 2px; +} + +.c13.fi-padding-bottom-insetXs { + padding-bottom: 4px; +} + +.c13.fi-padding-bottom-insetS { + padding-bottom: 6px; +} + +.c13.fi-padding-bottom-insetM { + padding-bottom: 8px; +} + +.c13.fi-padding-bottom-insetL { + padding-bottom: 10px; +} + +.c13.fi-padding-bottom-insetXl { + padding-bottom: 16px; +} + +.c13.fi-padding-bottom-insetXxl { + padding-bottom: 20px; +} + +.c13.fi-padding-left-xxs { + padding-left: 5px; +} + +.c13.fi-padding-left-xs { + padding-left: 10px; +} + +.c13.fi-padding-left-s { + padding-left: 15px; +} + +.c13.fi-padding-left-m { + padding-left: 20px; +} + +.c13.fi-padding-left-l { + padding-left: 25px; +} + +.c13.fi-padding-left-xl { + padding-left: 30px; +} + +.c13.fi-padding-left-xxl { + padding-left: 40px; +} + +.c13.fi-padding-left-xxxl { + padding-left: 60px; +} + +.c13.fi-padding-left-xxxxl { + padding-left: 80px; +} + +.c13.fi-padding-left-insetXxs { + padding-left: 2px; +} + +.c13.fi-padding-left-insetXs { + padding-left: 4px; +} + +.c13.fi-padding-left-insetS { + padding-left: 6px; +} + +.c13.fi-padding-left-insetM { + padding-left: 8px; +} + +.c13.fi-padding-left-insetL { + padding-left: 10px; +} + +.c13.fi-padding-left-insetXl { + padding-left: 16px; +} + +.c13.fi-padding-left-insetXxl { + padding-left: 20px; +} + +.c13:focus { + position: relative; + outline: 3px solid transparent; +} + +.c13:focus::after { + content: ''; + position: absolute; + pointer-events: none; + top: -2px; + right: -2px; + bottom: -2px; + left: -2px; + border-radius: 2px; + background-color: transparent; + border: 0px solid hsl(0,0%,100%); + box-sizing: border-box; + box-shadow: 0 0 0 2px hsl(196,77%,44%); + z-index: 9999; +} + +.c13:hover { + background: linear-gradient(0deg,hsl(212,63%,45%) 0%,hsl(212,63%,49%) 100%); + outline: 2px solid transparent; +} + +.c13:active { + background: hsl(212,63%,37%); +} + +.c13.fi-button--disabled, +.c13[disabled], +.c13:disabled { + text-shadow: 0 1px 1px rgba(33,33,33,0.5); + background: linear-gradient(0deg,hsl(202,7%,67%) 0%,hsl(202,7%,80%) 100%); + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: not-allowed; +} + +.c13.fi-button--disabled::after { + border: none; + box-shadow: none; +} + +.c13.fi-button--fullwidth { + display: block; + width: 100%; +} + +.c13.fi-button--inverted { + background: none; + background-color: hsl(212,63%,45%); + border: 1px solid hsl(0,0%,100%); + text-shadow: none; +} + +.c13.fi-button--inverted:hover { + background: linear-gradient(-180deg,hsla(0,0%,100%,0.1) 0%,hsla(0,0%,100%,0) 100%); +} + +.c13.fi-button--inverted:active { + background: none; + background-color: hsl(212,63%,45%); +} + +.c13.fi-button--inverted.fi-button--disabled, +.c13.fi-button--inverted[disabled], +.c13.fi-button--inverted:disabled { + opacity: 0.41; + background: none; + background-color: none; +} + +.c13.fi-button--secondary { + color: hsl(212,63%,45%); + background: none; + background-color: hsl(0,0%,100%); + border: 1px solid hsl(212,63%,45%); + text-shadow: none; +} + +.c13.fi-button--secondary:hover { + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); +} + +.c13.fi-button--secondary:active { + background: none; + background-color: hsl(202,7%,93%); +} + +.c13.fi-button--secondary.fi-button--disabled, +.c13.fi-button--secondary[disabled], +.c13.fi-button--secondary:disabled { + color: hsl(202,7%,67%); + text-shadow: none; + background: none; + background-color: hsl(212,63%,98%); + border-color: hsl(202,7%,67%); +} + +.c13.fi-button--secondary-noborder { + color: hsl(212,63%,45%); + background: none; + background-color: hsl(0,0%,100%); + border: 1px solid hsl(212,63%,45%); + text-shadow: none; + border: none; + background-color: transparent; +} + +.c13.fi-button--secondary-noborder:hover { + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); +} + +.c13.fi-button--secondary-noborder:active { + background: none; + background-color: hsl(202,7%,93%); +} + +.c13.fi-button--secondary-noborder.fi-button--disabled, +.c13.fi-button--secondary-noborder[disabled], +.c13.fi-button--secondary-noborder:disabled { + color: hsl(202,7%,67%); + text-shadow: none; + background: none; + background-color: hsl(212,63%,98%); + border-color: hsl(202,7%,67%); +} + +.c13.fi-button--secondary-light { + color: hsl(212,63%,45%); + color: hsl(212,63%,45%); + background: none; + background-color: hsl(0,0%,100%); + border: 1px solid hsl(212,63%,45%); + text-shadow: none; + background: linear-gradient(0deg,hsl(215,100%,95%),hsl(215,100%,97%)); + border: none; +} + +.c13.fi-button--secondary-light:hover { + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); +} + +.c13.fi-button--secondary-light:active { + background: none; + background-color: hsl(202,7%,93%); +} + +.c13.fi-button--secondary-light.fi-button--disabled, +.c13.fi-button--secondary-light[disabled], +.c13.fi-button--secondary-light:disabled { + color: hsl(202,7%,67%); + text-shadow: none; + background: none; + background-color: hsl(212,63%,98%); + border-color: hsl(202,7%,67%); +} + +.c13.fi-button--secondary-light:hover { + background: linear-gradient(0deg,hsl(215,100%,97%),hsl(212,63%,98%)); +} + +.c13.fi-button--secondary-light:active { + background: linear-gradient(0deg,hsl(202,7%,93%),hsl(202,7%,97%)); +} + +.c13.fi-button--secondary-light.fi-button--disabled, +.c13.fi-button--secondary-light[disabled], +.c13.fi-button--secondary-light:disabled { color: hsl(202,7%,67%); + background: none; background-color: hsl(202,7%,97%); } -.c1.fi-date-input--has-picker .fi-date-input_input { - border-right: none; - border-radius: 2px 0 0 2px; +.c13 > .fi-button_icon > .fi-icon { + width: 16px; + height: 16px; + margin-right: 8px; + vertical-align: middle; + -webkit-transform: translateY(-0.1em); + -ms-transform: translateY(-0.1em); + transform: translateY(-0.1em); } - -
-
-
.fi-button_icon--right > .fi-icon { + margin-right: 0; + margin-left: 8px; +} + +.c13.fi-button--disabled > .fi-button_icon { + cursor: not-allowed; +} + +.c17.fi-month-day { + padding: 1px; + text-align: center; + min-width: 36px; + height: 38px; +} + +.c17.fi-month-day--disabled { + color: hsl(202,7%,67%); +} + +.c17 .fi-month-day_current { + margin: 0 6px; + padding: 3px 0; + border-bottom: 1px solid hsl(202,7%,67%); + text-align: center; +} + +.c17 .fi-month-day_button_current { + margin: 0 6px; + padding: 3px 0; + border-bottom: 1px solid hsl(0,0%,13%); + text-align: center; +} + +.c17 .fi-month-day_button--disabled { + color: hsl(202,7%,67%); +} + +.c17 .fi-month-day_button--disabled .fi-month-day_button_current { + border-bottom: 1px solid hsl(202,7%,67%); +} + +.c17 .fi-month-day_button { + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 400; + border: 1px solid transparent; + border-radius: 2px; + width: 100%; + height: 100%; + text-align: center; +} + +.c17 .fi-month-day_button:focus { + box-shadow: none; + position: relative; + outline: 3px solid transparent; +} + +.c17 .fi-month-day_button:focus:after { + content: ''; + position: absolute; + pointer-events: none; + top: -2px; + right: -2px; + bottom: -2px; + left: -2px; + border-radius: 2px; + background-color: transparent; + border: 0px solid hsl(0,0%,100%); + box-sizing: border-box; + box-shadow: 0 0 0 2px hsl(196,77%,44%); + z-index: 9999; +} + +.c17 .fi-month-day_button:not(.fi-month-day_button--disabled):hover { + background-color: hsl(212,63%,45%); + color: hsl(0,0%,100%); +} + +.c17 .fi-month-day_button:not(.fi-month-day_button--disabled):hover .fi-month-day_button_current { + border-bottom: 1px solid hsl(0,0%,100%); +} + +.c17 .fi-month-day_button--selected { + border: 1px solid hsl(212,63%,45%); + background-color: hsl(212,63%,95%); + -webkit-text-decoration: none; + text-decoration: none; + font-weight: 600; +} + +.c17 .fi-month-day_button--selected:focus { + box-shadow: none; + position: relative; +} + +.c17 .fi-month-day_button--selected:focus:after { + content: ''; + position: absolute; + pointer-events: none; + top: -2px; + right: -2px; + bottom: -2px; + left: -2px; + border-radius: 2px; + background-color: transparent; + border: 0px solid hsl(0,0%,100%); + box-sizing: border-box; + box-shadow: 0 0 0 2px hsl(196,77%,44%); + z-index: 9999; +} + +.c17 .fi-month-day_button--selected:hover { + font-weight: 400; +} + +.c16.fi-month-table { + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 400; + margin-top: 15px; + margin-bottom: 10px; +} + +.c16 .fi-month-table_thead-cell { + padding: 1px; + text-align: center; + min-width: 36px; + height: 38px; +} + +.c7 { + position: absolute; + -webkit-clip: rect(0 0 0 0); + clip: rect(0 0 0 0); + height: 1px; + width: 1px; + margin: -1px; + padding: 0; + border: 0; + overflow: hidden; +} + +.c3.fi-label .fi-label_label-span { + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 600; + display: inline-block; + vertical-align: middle; + color: hsl(0,0%,13%); +} + +.c3.fi-label .fi-label_label-span .fi-label_optional-text { + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 400; +} + +.c3.fi-label .fi-label_label-span .fi-tooltip { + margin-left: 6px; +} + +.c9 { + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 600; + color: hsl(0,0%,13%); + font-size: 14px; + line-height: 20px; +} + +.c9.fi-status-text { + display: block; +} + +.c9.fi-status-text.fi-status-text--error { + color: hsl(3,59%,48%); +} + +.c12 { + width: 290px; +} + +.c12 .fi-dropdown_item-list { + padding-top: 0; +} + +.c12.fi-dropdown { + display: inline-block; +} + +.c12.fi-dropdown .fi-dropdown_label--visible { + margin-bottom: 10px; +} + +.c12.fi-dropdown .fi-hint-text { + margin-bottom: 10px; +} + +.c12.fi-dropdown .fi-status-text { + line-height: 1.1rem; +} + +.c12.fi-dropdown .fi-status-text.fi-dropdown_statusText--has-content { + margin-top: 5px; +} + +.c12.fi-dropdown .fi-dropdown_button { + color: hsl(0,0%,13%); + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 400; + min-width: 245px; + max-width: 100%; + padding: 8px 16px; + border: 1px solid hsl(202,7%,80%); + border-radius: 2px; + line-height: 1; + position: relative; + display: inline-block; + word-break: break-word; + width: 100%; + overflow-wrap: break-word; + height: 40px; + padding: 7px 38px 7px 7px; + border-color: hsl(201,7%,58%); + text-align: left; + line-height: 1.5; + background-color: hsl(0,0%,100%); + box-shadow: 0 1px 2px 0 hsla(214,100%,24%,0.1) inset; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + white-space: nowrap; +} + +.c12.fi-dropdown .fi-dropdown_button:focus-visible { + outline: none; +} + +.c12.fi-dropdown .fi-dropdown_button:before { + content: ''; + position: absolute; + top: 50%; + right: 16px; + margin-top: -3px; + border-style: solid; + border-color: hsl(0,0%,13%) transparent transparent transparent; + border-width: 6px 4px 0 4px; +} + +.c12.fi-dropdown .fi-dropdown_button[aria-expanded='true']:before { + border-color: transparent transparent hsl(0,0%,13%) transparent; + border-width: 0 4px 6px 4px; +} + +.c12.fi-dropdown .fi-dropdown_display-value { + width: 100%; + height: 100%; + display: inline-block; + line-height: 1.5; + overflow: hidden; +} + +.c12.fi-dropdown .fi-dropdown_popover { + color: hsl(0,0%,13%); + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 400; + margin-top: -1px; + padding: 0; + box-sizing: border-box; + font-size: 100%; + border: 0; + background-color: hsl(0,0%,100%); + border-color: hsl(201,7%,58%); + border-style: solid; + border-width: 0 1px 1px 1px; + border-radius: 0px 0px 2px 2px; + max-height: 265px; + overflow-y: auto; + overflow-x: hidden; +} + +.c12.fi-dropdown .fi-dropdown_popover:focus-within { + outline: 0; + box-shadow: none; +} + +.c12.fi-dropdown--full-width { + width: 100%; +} + +.c12.fi-dropdown--open .fi-dropdown_button { + border-bottom: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding-bottom: 8px; +} + +.c12.fi-dropdown--error .fi-dropdown_button { + border-color: hsl(3,59%,48%); + border-width: 2px; +} + +.c12.fi-dropdown--italicize .fi-dropdown_button { + font-style: italic; + color: hsl(201,7%,46%); + opacity: 1; +} + +.c12.fi-dropdown--disabled .fi-dropdown_input-wrapper { + cursor: not-allowed; +} + +.c12.fi-dropdown--disabled .fi-dropdown_input-wrapper .fi-dropdown_button { + background-color: hsl(202,7%,97%); + color: hsl(202,7%,67%); + opacity: 1; + pointer-events: none; +} + +.c12.fi-dropdown--disabled .fi-dropdown_input-wrapper .fi-dropdown_button:before { + border-color: hsl(202,7%,67%) transparent transparent transparent; +} + +.c12.fi-dropdown:not(.fi-dropdown--open) .fi-dropdown_button:focus { + outline: 3px solid transparent; + position: relative; +} + +.c12.fi-dropdown:not(.fi-dropdown--open) .fi-dropdown_button:focus:after { + content: ''; + position: absolute; + pointer-events: none; + top: -2px; + right: -2px; + bottom: -2px; + left: -2px; + border-radius: 2px; + background-color: transparent; + border: 0px solid hsl(0,0%,100%); + box-sizing: border-box; + box-shadow: 0 0 0 2px hsl(196,77%,44%); + z-index: 9999; +} + +.c11.fi-date-selectors_container { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + row-gap: 10px; +} + +.c11 .fi-date-selectors_year-select { + margin-right: 10px; + width: 0px; +} + +.c11 .fi-date-selectors_year-select .fi-dropdown_button { + min-width: 90px; +} + +.c11 .fi-date-selectors_month-select { + margin-right: 5px; + width: 0px; +} + +.c11 .fi-date-selectors_month-select .fi-dropdown_button { + min-width: 145px; +} + +.c11 .fi-date-selectors_buttons { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; +} + +.c11 .fi-date-selectors_month-button { + padding: 0; + width: 40px; +} + +.c11 .fi-date-selectors_month-button_icon { + width: 16px; + height: 16px; + vertical-align: middle; +} + +.c10 { + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 18px; + line-height: 1.5; + font-weight: 400; +} + +.c10.fi-date-picker { + background-color: hsl(0,0%,100%); + box-shadow: 0px 4px 8px 0px hsla(0,0%,13%,0.14); + border: 1px solid hsl(0,0%,58%); +} + +.c10 .fi-date-picker_bottom-container { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; +} + +.c10 .fi-date-picker_application { + padding: 20px 15px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + margin: auto; +} + +.c10.fi-date-picker--small-screen { + border: none; + background: none; + top: 0; + bottom: 0; + left: 0; + right: 0; + position: fixed; + -webkit-transform: translateZ(0) translateY(0); + -ms-transform: translateZ(0) translateY(0); + transform: translateZ(0) translateY(0); + -webkit-transition: -webkit-transform 200ms cubic-bezier(0.28,0.84,0.42,1); + -webkit-transition: transform 200ms cubic-bezier(0.28,0.84,0.42,1); + transition: transform 200ms cubic-bezier(0.28,0.84,0.42,1); +} + +.c10.fi-date-picker--small-screen .fi-date-picker_application { + padding-top: 10px; + padding-bottom: 30px; +} + +.c10.fi-date-picker--hidden { + visibility: hidden; +} + +.c10.fi-date-picker--small-screen-hidden { + -webkit-transform: translateZ(0) translateY(100%); + -ms-transform: translateZ(0) translateY(100%); + transform: translateZ(0) translateY(100%); + -webkit-transition: -webkit-transform 200ms cubic-bezier(0.28,0.84,0.42,1), visibility 200ms cubic-bezier(0.28,0.84,0.42,1); + -webkit-transition: transform 200ms cubic-bezier(0.28,0.84,0.42,1), visibility 200ms cubic-bezier(0.28,0.84,0.42,1); + transition: transform 200ms cubic-bezier(0.28,0.84,0.42,1), visibility 200ms cubic-bezier(0.28,0.84,0.42,1); +} + +.c10 .fi-date-picker_slide-indicator-wrapper { + touch-action: none; + padding-top: 20px; + padding-bottom: 10px; + cursor: -webkit-grab; + cursor: -moz-grab; + cursor: grab; +} + +.c10 .fi-date-picker_slide-indicator { + margin: 0 auto; + width: 60px; + height: 3px; + background-color: hsl(202,7%,80%); +} + +.c10 .fi-date-picker_small-screen-container { + touch-action: pan-x pinch-zoom; + max-height: 100%; + overscroll-behavior: contain; + background-color: hsl(0,0%,100%); + border-top: 1px solid hsl(0,0%,58%); + border-radius: 10px 10px 0 0; + position: absolute; + bottom: 0; + left: 0; + right: 0; +} + +.c10 .fi-date-picker_small-screen-container--scroll { + overflow: auto; + touch-action: auto; +} + +.c10 .fi-date-picker_popper-arrow, +.c10 .fi-date-picker_popper-arrow::before { + position: absolute; + width: 11px; + height: 11px; +} + +.c10 .fi-date-picker_popper-arrow::before { + content: ''; + background-color: hsl(0,0%,100%); + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); +} + +.c10 .fi-date-picker_popper-arrow[data-popper-placement^='bottom-end'] { + top: -7px; +} + +.c10 .fi-date-picker_popper-arrow[data-popper-placement^='bottom-end']::before { + border-top: 1px solid hsl(0,0%,58%); + border-left: 1px solid hsl(0,0%,58%); +} + +.c10 .fi-date-picker_popper-arrow[data-popper-placement^='top-end'] { + bottom: -6px; +} + +.c10 .fi-date-picker_popper-arrow[data-popper-placement^='top-end']::before { + border-bottom: 1px solid hsl(0,0%,58%); + border-right: 1px solid hsl(0,0%,58%); +} + +.c1 { + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 18px; + line-height: 1.5; + font-weight: 400; + width: 150px; +} + +.c1.fi-date-input--full-width { + width: 100%; +} + +.c1 .fi-date-input_wrapper { + width: 100%; + display: inline-block; +} + +.c1 .fi-date-input_wrapper .fi-date-input_label--visible { + margin-bottom: 10px; +} + +.c1 .fi-date-input_wrapper .fi-hint-text { + margin-bottom: 10px; +} + +.c1 .fi-date-input_wrapper .fi-date-input_statusText--has-content { + margin-top: 5px; +} + +.c1 .fi-date-input_input-element-container { + width: 100%; +} + +.c1 .fi-date-input_input-element-container > input:focus { + outline-color: hsl(196,77%,44%); + outline-width: 2px; + outline-offset: 2px; + outline-style: solid; +} + +.c1 .fi-date-input_input-element-container:focus-within > input:focus { + outline: none; +} + +.c1 .fi-date-input_input-element-container:focus-within { + position: relative; + outline: 3px solid transparent; +} + +.c1 .fi-date-input_input-element-container:focus-within::after { + content: ''; + position: absolute; + pointer-events: none; + top: -2px; + right: -2px; + bottom: -2px; + left: -2px; + border-radius: 2px; + background-color: transparent; + border: 0px solid hsl(0,0%,100%); + box-sizing: border-box; + box-shadow: 0 0 0 2px hsl(196,77%,44%); + z-index: 9999; +} + +.c1 .fi-date-input_picker-element-container { + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; +} + +.c1 .fi-date-input_input-and-picker-wrapper { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c1 .fi-date-input_input { + color: hsl(0,0%,13%); + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 400; + min-width: 245px; + max-width: 100%; + padding: 8px 16px; + border: 1px solid hsl(202,7%,80%); + border-radius: 2px; + line-height: 1; + background-color: hsl(0,0%,100%); + min-width: 40px; + width: 100%; + min-height: 40px; + padding-left: 10px; + border-color: hsl(201,7%,58%); + border-radius: 2px; +} + +.c1 .fi-date-input_input::-webkit-input-placeholder { + font-style: italic; + color: hsl(201,7%,46%); + opacity: 1; +} + +.c1 .fi-date-input_input::-moz-placeholder { + font-style: italic; + color: hsl(201,7%,46%); + opacity: 1; +} + +.c1 .fi-date-input_input:-ms-input-placeholder { + font-style: italic; + color: hsl(201,7%,46%); + opacity: 1; +} + +.c1 .fi-date-input_input::placeholder { + font-style: italic; + color: hsl(201,7%,46%); + opacity: 1; +} + +.c1 .fi-date-input_picker-button { + height: 100%; + width: 40px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + padding: 10px; + border: 1px solid hsl(212,63%,45%); + border-radius: 2px; +} + +.c1 .fi-date-input_picker-button > input:focus { + outline-color: hsl(196,77%,44%); + outline-width: 2px; + outline-offset: 2px; + outline-style: solid; +} + +.c1 .fi-date-input_picker-button:focus-within > input:focus { + outline: none; +} + +.c1 .fi-date-input_picker-button:focus-within { + position: relative; +} + +.c1 .fi-date-input_picker-button:focus-within::after { + content: ''; + position: absolute; + pointer-events: none; + top: -2px; + right: -2px; + bottom: -2px; + left: -2px; + border-radius: 2px; + background-color: transparent; + border: 0px solid hsl(0,0%,100%); + box-sizing: border-box; + box-shadow: 0 0 0 2px hsl(196,77%,44%); + z-index: 9999; +} + +.c1 .fi-date-input_picker-button:focus { + outline: 3px solid transparent; +} + +.c1 .fi-date-input_picker-icon { + color: hsl(212,63%,45%); +} + +.c1 .fi-date-input_picker-button--disabled { + cursor: default; + border-color: hsl(202,7%,67%); +} + +.c1 .fi-date-input_picker-button--disabled .fi-date-input_picker-icon { + color: hsl(202,7%,67%); +} + +.c1.fi-date-input--error .fi-date-input_input { + border: 2px solid hsl(3,59%,48%); +} + +.c1.fi-date-input--error .fi-date-input_picker-button { + border: 2px solid hsl(3,59%,48%); + border-left: 1px solid hsl(212,63%,45%); + border-radius: 0 2px 2px 0; +} + +.c1.fi-date-input--success .fi-date-input_input { + border: 2px solid hsl(166,90%,34%); +} + +.c1.fi-date-input--success .fi-date-input_picker-button { + border: 2px solid hsl(166,90%,34%); + border-left: 1px solid hsl(212,63%,45%); + border-radius: 0 2px 2px 0; +} + +.c1.fi-date-input--disabled .fi-date-input_input { + color: hsl(202,7%,67%); + background-color: hsl(202,7%,97%); +} + +.c1.fi-date-input--has-picker .fi-date-input_input { + border-right: none; + border-radius: 2px 0 0 2px; +} + + +
+
+
`; -exports[`snapshots match date input with datepicker with smallScreen 1`] = ` -.c8 { - vertical-align: baseline; +exports[`snapshots match date input with datepicker with smallScreen 1`] = ` +.c8 { + vertical-align: baseline; +} + +.c8.fi-icon { + display: inline-block; +} + +.c8 .fi-icon-base-fill { + fill: currentColor; +} + +.c8 .fi-icon-base-stroke { + stroke: currentColor; +} + +.c8.fi-icon--cursor-pointer { + cursor: pointer; +} + +.c8.fi-icon--cursor-pointer * { + cursor: inherit; +} + +.c15 { + vertical-align: baseline; +} + +.c15.fi-icon { + display: inline-block; +} + +.c15 .fi-icon-base-fill { + fill: currentColor; +} + +.c15 .fi-icon-base-stroke { + stroke: currentColor; +} + +.c15.fi-icon--cursor-pointer { + cursor: pointer; +} + +.c15.fi-icon--cursor-pointer * { + cursor: inherit; +} + +.c14 { + vertical-align: baseline; +} + +.c14.fi-icon { + display: inline-block; +} + +.c14 .fi-icon-base-fill { + fill: currentColor; +} + +.c14 .fi-icon-base-stroke { + stroke: currentColor; +} + +.c14.fi-icon--cursor-pointer { + cursor: pointer; +} + +.c14.fi-icon--cursor-pointer * { + cursor: inherit; +} + +.c6 { + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; + font: 100% inherit; + line-height: 1; + text-align: left; + -webkit-text-decoration: none; + text-decoration: none; + vertical-align: baseline; + color: inherit; + background: none; + cursor: inherit; + display: inline-block; + max-width: 100%; + cursor: pointer; +} + +.c6:-moz-focusring { + outline: 1px dotted ButtonText; +} + +.c6::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c6::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; +} + +.c6::-webkit-inner-spin-button { + height: auto; +} + +.c6::-webkit-outer-spin-button { + height: auto; +} + +.c6::before, +.c6::after { + box-sizing: border-box; +} + +.c0 { + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; + font: 100% inherit; + line-height: 1; + text-align: left; + -webkit-text-decoration: none; + text-decoration: none; + vertical-align: baseline; + color: inherit; + background: none; + cursor: inherit; + display: block; + max-width: 100%; + word-wrap: normal; + word-break: normal; + white-space: normal; +} + +.c0::before, +.c0::after { + box-sizing: border-box; +} + +.c2 { + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; + font: 100% inherit; + line-height: 1; + text-align: left; + -webkit-text-decoration: none; + text-decoration: none; + vertical-align: baseline; + color: inherit; + background: none; + cursor: inherit; + display: block; + max-width: 100%; + word-wrap: normal; + word-break: normal; + white-space: normal; +} + +.c2::before, +.c2::after { + box-sizing: border-box; +} + +.c5 { + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + overflow: visible; + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; + font: 100% inherit; + line-height: 1; + text-align: left; + -webkit-text-decoration: none; + text-decoration: none; + vertical-align: baseline; + color: inherit; + background: none; + cursor: inherit; + display: inline-block; + max-width: 100%; +} + +.c5::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; +} + +.c5::before, +.c5::after { + box-sizing: border-box; +} + +.c4 { + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; + font: 100% inherit; + line-height: 1; + text-align: left; + -webkit-text-decoration: none; + text-decoration: none; + vertical-align: baseline; + color: inherit; + background: none; + cursor: inherit; + display: inline; + max-width: 100%; + word-wrap: normal; + word-break: normal; + white-space: normal; +} + +.c4::before, +.c4::after { + box-sizing: border-box; +} + +.c13 { + color: hsl(0,0%,13%); + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 600; + font-size: 14px; + line-height: 20px; + padding: 10px 20px; + min-height: 40px; + color: hsl(0,0%,100%); + background: linear-gradient(0deg,hsl(212,63%,37%) 0%,hsl(212,63%,45%) 100%); + border-radius: 2px; + text-align: center; + text-shadow: 0 1px 1px hsla(214,100%,24%,0.5); + cursor: pointer; + border: 1px solid transparent; +} + +.c13.fi-margin-xxs { + margin: 5px; +} + +.c13.fi-margin-xs { + margin: 10px; +} + +.c13.fi-margin-s { + margin: 15px; +} + +.c13.fi-margin-m { + margin: 20px; +} + +.c13.fi-margin-l { + margin: 25px; +} + +.c13.fi-margin-xl { + margin: 30px; +} + +.c13.fi-margin-xxl { + margin: 40px; +} + +.c13.fi-margin-xxxl { + margin: 60px; +} + +.c13.fi-margin-xxxxl { + margin: 80px; +} + +.c13.fi-margin-insetXxs { + margin: 2px; +} + +.c13.fi-margin-insetXs { + margin: 4px; +} + +.c13.fi-margin-insetS { + margin: 6px; +} + +.c13.fi-margin-insetM { + margin: 8px; +} + +.c13.fi-margin-insetL { + margin: 10px; +} + +.c13.fi-margin-insetXl { + margin: 16px; +} + +.c13.fi-margin-insetXxl { + margin: 20px; +} + +.c13.fi-margin-top-xxs { + margin-top: 5px; +} + +.c13.fi-margin-top-xs { + margin-top: 10px; +} + +.c13.fi-margin-top-s { + margin-top: 15px; +} + +.c13.fi-margin-top-m { + margin-top: 20px; +} + +.c13.fi-margin-top-l { + margin-top: 25px; +} + +.c13.fi-margin-top-xl { + margin-top: 30px; +} + +.c13.fi-margin-top-xxl { + margin-top: 40px; +} + +.c13.fi-margin-top-xxxl { + margin-top: 60px; +} + +.c13.fi-margin-top-xxxxl { + margin-top: 80px; +} + +.c13.fi-margin-top-insetXxs { + margin-top: 2px; +} + +.c13.fi-margin-top-insetXs { + margin-top: 4px; +} + +.c13.fi-margin-top-insetS { + margin-top: 6px; +} + +.c13.fi-margin-top-insetM { + margin-top: 8px; +} + +.c13.fi-margin-top-insetL { + margin-top: 10px; +} + +.c13.fi-margin-top-insetXl { + margin-top: 16px; +} + +.c13.fi-margin-top-insetXxl { + margin-top: 20px; +} + +.c13.fi-margin-right-xxs { + margin-right: 5px; +} + +.c13.fi-margin-right-xs { + margin-right: 10px; +} + +.c13.fi-margin-right-s { + margin-right: 15px; +} + +.c13.fi-margin-right-m { + margin-right: 20px; +} + +.c13.fi-margin-right-l { + margin-right: 25px; +} + +.c13.fi-margin-right-xl { + margin-right: 30px; +} + +.c13.fi-margin-right-xxl { + margin-right: 40px; +} + +.c13.fi-margin-right-xxxl { + margin-right: 60px; +} + +.c13.fi-margin-right-xxxxl { + margin-right: 80px; +} + +.c13.fi-margin-right-insetXxs { + margin-right: 2px; +} + +.c13.fi-margin-right-insetXs { + margin-right: 4px; +} + +.c13.fi-margin-right-insetS { + margin-right: 6px; +} + +.c13.fi-margin-right-insetM { + margin-right: 8px; +} + +.c13.fi-margin-right-insetL { + margin-right: 10px; +} + +.c13.fi-margin-right-insetXl { + margin-right: 16px; +} + +.c13.fi-margin-right-insetXxl { + margin-right: 20px; +} + +.c13.fi-margin-bottom-xxs { + margin-bottom: 5px; +} + +.c13.fi-margin-bottom-xs { + margin-bottom: 10px; +} + +.c13.fi-margin-bottom-s { + margin-bottom: 15px; +} + +.c13.fi-margin-bottom-m { + margin-bottom: 20px; +} + +.c13.fi-margin-bottom-l { + margin-bottom: 25px; +} + +.c13.fi-margin-bottom-xl { + margin-bottom: 30px; +} + +.c13.fi-margin-bottom-xxl { + margin-bottom: 40px; +} + +.c13.fi-margin-bottom-xxxl { + margin-bottom: 60px; +} + +.c13.fi-margin-bottom-xxxxl { + margin-bottom: 80px; +} + +.c13.fi-margin-bottom-insetXxs { + margin-bottom: 2px; +} + +.c13.fi-margin-bottom-insetXs { + margin-bottom: 4px; +} + +.c13.fi-margin-bottom-insetS { + margin-bottom: 6px; +} + +.c13.fi-margin-bottom-insetM { + margin-bottom: 8px; +} + +.c13.fi-margin-bottom-insetL { + margin-bottom: 10px; +} + +.c13.fi-margin-bottom-insetXl { + margin-bottom: 16px; +} + +.c13.fi-margin-bottom-insetXxl { + margin-bottom: 20px; +} + +.c13.fi-margin-left-xxs { + margin-left: 5px; +} + +.c13.fi-margin-left-xs { + margin-left: 10px; +} + +.c13.fi-margin-left-s { + margin-left: 15px; +} + +.c13.fi-margin-left-m { + margin-left: 20px; +} + +.c13.fi-margin-left-l { + margin-left: 25px; +} + +.c13.fi-margin-left-xl { + margin-left: 30px; +} + +.c13.fi-margin-left-xxl { + margin-left: 40px; +} + +.c13.fi-margin-left-xxxl { + margin-left: 60px; +} + +.c13.fi-margin-left-xxxxl { + margin-left: 80px; +} + +.c13.fi-margin-left-insetXxs { + margin-left: 2px; +} + +.c13.fi-margin-left-insetXs { + margin-left: 4px; +} + +.c13.fi-margin-left-insetS { + margin-left: 6px; +} + +.c13.fi-margin-left-insetM { + margin-left: 8px; +} + +.c13.fi-margin-left-insetL { + margin-left: 10px; +} + +.c13.fi-margin-left-insetXl { + margin-left: 16px; +} + +.c13.fi-margin-left-insetXxl { + margin-left: 20px; +} + +.c13.fi-padding-xxs { + padding: 5px; +} + +.c13.fi-padding-xs { + padding: 10px; +} + +.c13.fi-padding-s { + padding: 15px; +} + +.c13.fi-padding-m { + padding: 20px; +} + +.c13.fi-padding-l { + padding: 25px; +} + +.c13.fi-padding-xl { + padding: 30px; +} + +.c13.fi-padding-xxl { + padding: 40px; +} + +.c13.fi-padding-xxxl { + padding: 60px; +} + +.c13.fi-padding-xxxxl { + padding: 80px; +} + +.c13.fi-padding-insetXxs { + padding: 2px; +} + +.c13.fi-padding-insetXs { + padding: 4px; +} + +.c13.fi-padding-insetS { + padding: 6px; +} + +.c13.fi-padding-insetM { + padding: 8px; +} + +.c13.fi-padding-insetL { + padding: 10px; +} + +.c13.fi-padding-insetXl { + padding: 16px; +} + +.c13.fi-padding-insetXxl { + padding: 20px; +} + +.c13.fi-padding-top-xxs { + padding-top: 5px; +} + +.c13.fi-padding-top-xs { + padding-top: 10px; +} + +.c13.fi-padding-top-s { + padding-top: 15px; +} + +.c13.fi-padding-top-m { + padding-top: 20px; +} + +.c13.fi-padding-top-l { + padding-top: 25px; +} + +.c13.fi-padding-top-xl { + padding-top: 30px; +} + +.c13.fi-padding-top-xxl { + padding-top: 40px; +} + +.c13.fi-padding-top-xxxl { + padding-top: 60px; } -.c8.fi-icon { - display: inline-block; +.c13.fi-padding-top-xxxxl { + padding-top: 80px; } -.c8 .fi-icon-base-fill { - fill: currentColor; +.c13.fi-padding-top-insetXxs { + padding-top: 2px; } -.c8 .fi-icon-base-stroke { - stroke: currentColor; +.c13.fi-padding-top-insetXs { + padding-top: 4px; } -.c8.fi-icon--cursor-pointer { - cursor: pointer; +.c13.fi-padding-top-insetS { + padding-top: 6px; } -.c8.fi-icon--cursor-pointer * { - cursor: inherit; +.c13.fi-padding-top-insetM { + padding-top: 8px; } -.c15 { - vertical-align: baseline; +.c13.fi-padding-top-insetL { + padding-top: 10px; } -.c15.fi-icon { - display: inline-block; +.c13.fi-padding-top-insetXl { + padding-top: 16px; } -.c15 .fi-icon-base-fill { - fill: currentColor; +.c13.fi-padding-top-insetXxl { + padding-top: 20px; } -.c15 .fi-icon-base-stroke { - stroke: currentColor; +.c13.fi-padding-right-xxs { + padding-right: 5px; } -.c15.fi-icon--cursor-pointer { - cursor: pointer; +.c13.fi-padding-right-xs { + padding-right: 10px; } -.c15.fi-icon--cursor-pointer * { - cursor: inherit; +.c13.fi-padding-right-s { + padding-right: 15px; } -.c14 { - vertical-align: baseline; +.c13.fi-padding-right-m { + padding-right: 20px; } -.c14.fi-icon { - display: inline-block; +.c13.fi-padding-right-l { + padding-right: 25px; } -.c14 .fi-icon-base-fill { - fill: currentColor; +.c13.fi-padding-right-xl { + padding-right: 30px; } -.c14 .fi-icon-base-stroke { - stroke: currentColor; +.c13.fi-padding-right-xxl { + padding-right: 40px; } -.c14.fi-icon--cursor-pointer { - cursor: pointer; +.c13.fi-padding-right-xxxl { + padding-right: 60px; } -.c14.fi-icon--cursor-pointer * { - cursor: inherit; +.c13.fi-padding-right-xxxxl { + padding-right: 80px; } -.c6 { - line-height: 1.15; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - margin: 0; - overflow: visible; - text-transform: none; - -webkit-appearance: button; - margin: 0; - padding: 0; - border: 0; - box-sizing: border-box; - font: 100% inherit; - line-height: 1; - text-align: left; - -webkit-text-decoration: none; - text-decoration: none; - vertical-align: baseline; - color: inherit; - background: none; - cursor: inherit; - display: inline-block; - max-width: 100%; - cursor: pointer; +.c13.fi-padding-right-insetXxs { + padding-right: 2px; } -.c6:-moz-focusring { - outline: 1px dotted ButtonText; +.c13.fi-padding-right-insetXs { + padding-right: 4px; } -.c6::-moz-focus-inner { - border-style: none; - padding: 0; +.c13.fi-padding-right-insetS { + padding-right: 6px; } -.c6::-webkit-file-upload-button { - -webkit-appearance: button; - font: inherit; +.c13.fi-padding-right-insetM { + padding-right: 8px; } -.c6::-webkit-inner-spin-button { - height: auto; +.c13.fi-padding-right-insetL { + padding-right: 10px; } -.c6::-webkit-outer-spin-button { - height: auto; +.c13.fi-padding-right-insetXl { + padding-right: 16px; } -.c6::before, -.c6::after { - box-sizing: border-box; +.c13.fi-padding-right-insetXxl { + padding-right: 20px; } -.c0 { - line-height: 1.15; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - margin: 0; - padding: 0; - border: 0; - box-sizing: border-box; - font: 100% inherit; - line-height: 1; - text-align: left; - -webkit-text-decoration: none; - text-decoration: none; - vertical-align: baseline; - color: inherit; - background: none; - cursor: inherit; - display: block; - max-width: 100%; - word-wrap: normal; - word-break: normal; - white-space: normal; +.c13.fi-padding-bottom-xxs { + padding-bottom: 5px; } -.c0::before, -.c0::after { - box-sizing: border-box; +.c13.fi-padding-bottom-xs { + padding-bottom: 10px; } -.c2 { - line-height: 1.15; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - margin: 0; - padding: 0; - border: 0; - box-sizing: border-box; - font: 100% inherit; - line-height: 1; - text-align: left; - -webkit-text-decoration: none; - text-decoration: none; - vertical-align: baseline; - color: inherit; - background: none; - cursor: inherit; - display: block; - max-width: 100%; - word-wrap: normal; - word-break: normal; - white-space: normal; +.c13.fi-padding-bottom-s { + padding-bottom: 15px; } -.c2::before, -.c2::after { - box-sizing: border-box; +.c13.fi-padding-bottom-m { + padding-bottom: 20px; } -.c5 { - line-height: 1.15; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - margin: 0; - overflow: visible; - margin: 0; - padding: 0; - border: 0; - box-sizing: border-box; - font: 100% inherit; - line-height: 1; - text-align: left; - -webkit-text-decoration: none; - text-decoration: none; - vertical-align: baseline; - color: inherit; - background: none; - cursor: inherit; - display: inline-block; - max-width: 100%; +.c13.fi-padding-bottom-l { + padding-bottom: 25px; } -.c5::-webkit-input-placeholder { - color: inherit; - opacity: 0.54; +.c13.fi-padding-bottom-xl { + padding-bottom: 30px; } -.c5::before, -.c5::after { - box-sizing: border-box; +.c13.fi-padding-bottom-xxl { + padding-bottom: 40px; } -.c4 { - line-height: 1.15; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - margin: 0; - padding: 0; - border: 0; - box-sizing: border-box; - font: 100% inherit; - line-height: 1; - text-align: left; - -webkit-text-decoration: none; - text-decoration: none; - vertical-align: baseline; - color: inherit; - background: none; - cursor: inherit; - display: inline; - max-width: 100%; - word-wrap: normal; - word-break: normal; - white-space: normal; +.c13.fi-padding-bottom-xxxl { + padding-bottom: 60px; } -.c4::before, -.c4::after { - box-sizing: border-box; +.c13.fi-padding-bottom-xxxxl { + padding-bottom: 80px; } -.c13 { - color: hsl(0,0%,13%); - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 600; - font-size: 14px; - line-height: 20px; - padding: 10px 20px; - min-height: 40px; - color: hsl(0,0%,100%); - background: linear-gradient(0deg,hsl(212,63%,37%) 0%,hsl(212,63%,45%) 100%); - border-radius: 2px; - text-align: center; - text-shadow: 0 1px 1px hsla(214,100%,24%,0.5); - cursor: pointer; - border: 1px solid transparent; +.c13.fi-padding-bottom-insetXxs { + padding-bottom: 2px; +} + +.c13.fi-padding-bottom-insetXs { + padding-bottom: 4px; +} + +.c13.fi-padding-bottom-insetS { + padding-bottom: 6px; +} + +.c13.fi-padding-bottom-insetM { + padding-bottom: 8px; +} + +.c13.fi-padding-bottom-insetL { + padding-bottom: 10px; +} + +.c13.fi-padding-bottom-insetXl { + padding-bottom: 16px; +} + +.c13.fi-padding-bottom-insetXxl { + padding-bottom: 20px; +} + +.c13.fi-padding-left-xxs { + padding-left: 5px; +} + +.c13.fi-padding-left-xs { + padding-left: 10px; +} + +.c13.fi-padding-left-s { + padding-left: 15px; +} + +.c13.fi-padding-left-m { + padding-left: 20px; +} + +.c13.fi-padding-left-l { + padding-left: 25px; +} + +.c13.fi-padding-left-xl { + padding-left: 30px; +} + +.c13.fi-padding-left-xxl { + padding-left: 40px; +} + +.c13.fi-padding-left-xxxl { + padding-left: 60px; +} + +.c13.fi-padding-left-xxxxl { + padding-left: 80px; +} + +.c13.fi-padding-left-insetXxs { + padding-left: 2px; +} + +.c13.fi-padding-left-insetXs { + padding-left: 4px; +} + +.c13.fi-padding-left-insetS { + padding-left: 6px; +} + +.c13.fi-padding-left-insetM { + padding-left: 8px; +} + +.c13.fi-padding-left-insetL { + padding-left: 10px; +} + +.c13.fi-padding-left-insetXl { + padding-left: 16px; +} + +.c13.fi-padding-left-insetXxl { + padding-left: 20px; } .c13:focus { diff --git a/src/core/Form/Select/MultiSelect/MultiSelect/__snapshots__/MultiSelect.test.tsx.snap b/src/core/Form/Select/MultiSelect/MultiSelect/__snapshots__/MultiSelect.test.tsx.snap index cef4f4cc9..94b7f85b8 100644 --- a/src/core/Form/Select/MultiSelect/MultiSelect/__snapshots__/MultiSelect.test.tsx.snap +++ b/src/core/Form/Select/MultiSelect/MultiSelect/__snapshots__/MultiSelect.test.tsx.snap @@ -886,6 +886,646 @@ exports[`has matching snapshot 1`] = ` border: 1px solid transparent; } +.c15.fi-margin-xxs { + margin: 5px; +} + +.c15.fi-margin-xs { + margin: 10px; +} + +.c15.fi-margin-s { + margin: 15px; +} + +.c15.fi-margin-m { + margin: 20px; +} + +.c15.fi-margin-l { + margin: 25px; +} + +.c15.fi-margin-xl { + margin: 30px; +} + +.c15.fi-margin-xxl { + margin: 40px; +} + +.c15.fi-margin-xxxl { + margin: 60px; +} + +.c15.fi-margin-xxxxl { + margin: 80px; +} + +.c15.fi-margin-insetXxs { + margin: 2px; +} + +.c15.fi-margin-insetXs { + margin: 4px; +} + +.c15.fi-margin-insetS { + margin: 6px; +} + +.c15.fi-margin-insetM { + margin: 8px; +} + +.c15.fi-margin-insetL { + margin: 10px; +} + +.c15.fi-margin-insetXl { + margin: 16px; +} + +.c15.fi-margin-insetXxl { + margin: 20px; +} + +.c15.fi-margin-top-xxs { + margin-top: 5px; +} + +.c15.fi-margin-top-xs { + margin-top: 10px; +} + +.c15.fi-margin-top-s { + margin-top: 15px; +} + +.c15.fi-margin-top-m { + margin-top: 20px; +} + +.c15.fi-margin-top-l { + margin-top: 25px; +} + +.c15.fi-margin-top-xl { + margin-top: 30px; +} + +.c15.fi-margin-top-xxl { + margin-top: 40px; +} + +.c15.fi-margin-top-xxxl { + margin-top: 60px; +} + +.c15.fi-margin-top-xxxxl { + margin-top: 80px; +} + +.c15.fi-margin-top-insetXxs { + margin-top: 2px; +} + +.c15.fi-margin-top-insetXs { + margin-top: 4px; +} + +.c15.fi-margin-top-insetS { + margin-top: 6px; +} + +.c15.fi-margin-top-insetM { + margin-top: 8px; +} + +.c15.fi-margin-top-insetL { + margin-top: 10px; +} + +.c15.fi-margin-top-insetXl { + margin-top: 16px; +} + +.c15.fi-margin-top-insetXxl { + margin-top: 20px; +} + +.c15.fi-margin-right-xxs { + margin-right: 5px; +} + +.c15.fi-margin-right-xs { + margin-right: 10px; +} + +.c15.fi-margin-right-s { + margin-right: 15px; +} + +.c15.fi-margin-right-m { + margin-right: 20px; +} + +.c15.fi-margin-right-l { + margin-right: 25px; +} + +.c15.fi-margin-right-xl { + margin-right: 30px; +} + +.c15.fi-margin-right-xxl { + margin-right: 40px; +} + +.c15.fi-margin-right-xxxl { + margin-right: 60px; +} + +.c15.fi-margin-right-xxxxl { + margin-right: 80px; +} + +.c15.fi-margin-right-insetXxs { + margin-right: 2px; +} + +.c15.fi-margin-right-insetXs { + margin-right: 4px; +} + +.c15.fi-margin-right-insetS { + margin-right: 6px; +} + +.c15.fi-margin-right-insetM { + margin-right: 8px; +} + +.c15.fi-margin-right-insetL { + margin-right: 10px; +} + +.c15.fi-margin-right-insetXl { + margin-right: 16px; +} + +.c15.fi-margin-right-insetXxl { + margin-right: 20px; +} + +.c15.fi-margin-bottom-xxs { + margin-bottom: 5px; +} + +.c15.fi-margin-bottom-xs { + margin-bottom: 10px; +} + +.c15.fi-margin-bottom-s { + margin-bottom: 15px; +} + +.c15.fi-margin-bottom-m { + margin-bottom: 20px; +} + +.c15.fi-margin-bottom-l { + margin-bottom: 25px; +} + +.c15.fi-margin-bottom-xl { + margin-bottom: 30px; +} + +.c15.fi-margin-bottom-xxl { + margin-bottom: 40px; +} + +.c15.fi-margin-bottom-xxxl { + margin-bottom: 60px; +} + +.c15.fi-margin-bottom-xxxxl { + margin-bottom: 80px; +} + +.c15.fi-margin-bottom-insetXxs { + margin-bottom: 2px; +} + +.c15.fi-margin-bottom-insetXs { + margin-bottom: 4px; +} + +.c15.fi-margin-bottom-insetS { + margin-bottom: 6px; +} + +.c15.fi-margin-bottom-insetM { + margin-bottom: 8px; +} + +.c15.fi-margin-bottom-insetL { + margin-bottom: 10px; +} + +.c15.fi-margin-bottom-insetXl { + margin-bottom: 16px; +} + +.c15.fi-margin-bottom-insetXxl { + margin-bottom: 20px; +} + +.c15.fi-margin-left-xxs { + margin-left: 5px; +} + +.c15.fi-margin-left-xs { + margin-left: 10px; +} + +.c15.fi-margin-left-s { + margin-left: 15px; +} + +.c15.fi-margin-left-m { + margin-left: 20px; +} + +.c15.fi-margin-left-l { + margin-left: 25px; +} + +.c15.fi-margin-left-xl { + margin-left: 30px; +} + +.c15.fi-margin-left-xxl { + margin-left: 40px; +} + +.c15.fi-margin-left-xxxl { + margin-left: 60px; +} + +.c15.fi-margin-left-xxxxl { + margin-left: 80px; +} + +.c15.fi-margin-left-insetXxs { + margin-left: 2px; +} + +.c15.fi-margin-left-insetXs { + margin-left: 4px; +} + +.c15.fi-margin-left-insetS { + margin-left: 6px; +} + +.c15.fi-margin-left-insetM { + margin-left: 8px; +} + +.c15.fi-margin-left-insetL { + margin-left: 10px; +} + +.c15.fi-margin-left-insetXl { + margin-left: 16px; +} + +.c15.fi-margin-left-insetXxl { + margin-left: 20px; +} + +.c15.fi-padding-xxs { + padding: 5px; +} + +.c15.fi-padding-xs { + padding: 10px; +} + +.c15.fi-padding-s { + padding: 15px; +} + +.c15.fi-padding-m { + padding: 20px; +} + +.c15.fi-padding-l { + padding: 25px; +} + +.c15.fi-padding-xl { + padding: 30px; +} + +.c15.fi-padding-xxl { + padding: 40px; +} + +.c15.fi-padding-xxxl { + padding: 60px; +} + +.c15.fi-padding-xxxxl { + padding: 80px; +} + +.c15.fi-padding-insetXxs { + padding: 2px; +} + +.c15.fi-padding-insetXs { + padding: 4px; +} + +.c15.fi-padding-insetS { + padding: 6px; +} + +.c15.fi-padding-insetM { + padding: 8px; +} + +.c15.fi-padding-insetL { + padding: 10px; +} + +.c15.fi-padding-insetXl { + padding: 16px; +} + +.c15.fi-padding-insetXxl { + padding: 20px; +} + +.c15.fi-padding-top-xxs { + padding-top: 5px; +} + +.c15.fi-padding-top-xs { + padding-top: 10px; +} + +.c15.fi-padding-top-s { + padding-top: 15px; +} + +.c15.fi-padding-top-m { + padding-top: 20px; +} + +.c15.fi-padding-top-l { + padding-top: 25px; +} + +.c15.fi-padding-top-xl { + padding-top: 30px; +} + +.c15.fi-padding-top-xxl { + padding-top: 40px; +} + +.c15.fi-padding-top-xxxl { + padding-top: 60px; +} + +.c15.fi-padding-top-xxxxl { + padding-top: 80px; +} + +.c15.fi-padding-top-insetXxs { + padding-top: 2px; +} + +.c15.fi-padding-top-insetXs { + padding-top: 4px; +} + +.c15.fi-padding-top-insetS { + padding-top: 6px; +} + +.c15.fi-padding-top-insetM { + padding-top: 8px; +} + +.c15.fi-padding-top-insetL { + padding-top: 10px; +} + +.c15.fi-padding-top-insetXl { + padding-top: 16px; +} + +.c15.fi-padding-top-insetXxl { + padding-top: 20px; +} + +.c15.fi-padding-right-xxs { + padding-right: 5px; +} + +.c15.fi-padding-right-xs { + padding-right: 10px; +} + +.c15.fi-padding-right-s { + padding-right: 15px; +} + +.c15.fi-padding-right-m { + padding-right: 20px; +} + +.c15.fi-padding-right-l { + padding-right: 25px; +} + +.c15.fi-padding-right-xl { + padding-right: 30px; +} + +.c15.fi-padding-right-xxl { + padding-right: 40px; +} + +.c15.fi-padding-right-xxxl { + padding-right: 60px; +} + +.c15.fi-padding-right-xxxxl { + padding-right: 80px; +} + +.c15.fi-padding-right-insetXxs { + padding-right: 2px; +} + +.c15.fi-padding-right-insetXs { + padding-right: 4px; +} + +.c15.fi-padding-right-insetS { + padding-right: 6px; +} + +.c15.fi-padding-right-insetM { + padding-right: 8px; +} + +.c15.fi-padding-right-insetL { + padding-right: 10px; +} + +.c15.fi-padding-right-insetXl { + padding-right: 16px; +} + +.c15.fi-padding-right-insetXxl { + padding-right: 20px; +} + +.c15.fi-padding-bottom-xxs { + padding-bottom: 5px; +} + +.c15.fi-padding-bottom-xs { + padding-bottom: 10px; +} + +.c15.fi-padding-bottom-s { + padding-bottom: 15px; +} + +.c15.fi-padding-bottom-m { + padding-bottom: 20px; +} + +.c15.fi-padding-bottom-l { + padding-bottom: 25px; +} + +.c15.fi-padding-bottom-xl { + padding-bottom: 30px; +} + +.c15.fi-padding-bottom-xxl { + padding-bottom: 40px; +} + +.c15.fi-padding-bottom-xxxl { + padding-bottom: 60px; +} + +.c15.fi-padding-bottom-xxxxl { + padding-bottom: 80px; +} + +.c15.fi-padding-bottom-insetXxs { + padding-bottom: 2px; +} + +.c15.fi-padding-bottom-insetXs { + padding-bottom: 4px; +} + +.c15.fi-padding-bottom-insetS { + padding-bottom: 6px; +} + +.c15.fi-padding-bottom-insetM { + padding-bottom: 8px; +} + +.c15.fi-padding-bottom-insetL { + padding-bottom: 10px; +} + +.c15.fi-padding-bottom-insetXl { + padding-bottom: 16px; +} + +.c15.fi-padding-bottom-insetXxl { + padding-bottom: 20px; +} + +.c15.fi-padding-left-xxs { + padding-left: 5px; +} + +.c15.fi-padding-left-xs { + padding-left: 10px; +} + +.c15.fi-padding-left-s { + padding-left: 15px; +} + +.c15.fi-padding-left-m { + padding-left: 20px; +} + +.c15.fi-padding-left-l { + padding-left: 25px; +} + +.c15.fi-padding-left-xl { + padding-left: 30px; +} + +.c15.fi-padding-left-xxl { + padding-left: 40px; +} + +.c15.fi-padding-left-xxxl { + padding-left: 60px; +} + +.c15.fi-padding-left-xxxxl { + padding-left: 80px; +} + +.c15.fi-padding-left-insetXxs { + padding-left: 2px; +} + +.c15.fi-padding-left-insetXs { + padding-left: 4px; +} + +.c15.fi-padding-left-insetS { + padding-left: 6px; +} + +.c15.fi-padding-left-insetM { + padding-left: 8px; +} + +.c15.fi-padding-left-insetL { + padding-left: 10px; +} + +.c15.fi-padding-left-insetXl { + padding-left: 16px; +} + +.c15.fi-padding-left-insetXxl { + padding-left: 20px; +} + .c15:focus { position: relative; outline: 3px solid transparent; diff --git a/src/core/Modal/Modal/__snapshots__/Modal.test.tsx.snap b/src/core/Modal/Modal/__snapshots__/Modal.test.tsx.snap index 4b17024f9..875147f36 100644 --- a/src/core/Modal/Modal/__snapshots__/Modal.test.tsx.snap +++ b/src/core/Modal/Modal/__snapshots__/Modal.test.tsx.snap @@ -645,6 +645,646 @@ exports[`Basic modal should match snapshot 1`] = ` border: 1px solid transparent; } +.c9.fi-margin-xxs { + margin: 5px; +} + +.c9.fi-margin-xs { + margin: 10px; +} + +.c9.fi-margin-s { + margin: 15px; +} + +.c9.fi-margin-m { + margin: 20px; +} + +.c9.fi-margin-l { + margin: 25px; +} + +.c9.fi-margin-xl { + margin: 30px; +} + +.c9.fi-margin-xxl { + margin: 40px; +} + +.c9.fi-margin-xxxl { + margin: 60px; +} + +.c9.fi-margin-xxxxl { + margin: 80px; +} + +.c9.fi-margin-insetXxs { + margin: 2px; +} + +.c9.fi-margin-insetXs { + margin: 4px; +} + +.c9.fi-margin-insetS { + margin: 6px; +} + +.c9.fi-margin-insetM { + margin: 8px; +} + +.c9.fi-margin-insetL { + margin: 10px; +} + +.c9.fi-margin-insetXl { + margin: 16px; +} + +.c9.fi-margin-insetXxl { + margin: 20px; +} + +.c9.fi-margin-top-xxs { + margin-top: 5px; +} + +.c9.fi-margin-top-xs { + margin-top: 10px; +} + +.c9.fi-margin-top-s { + margin-top: 15px; +} + +.c9.fi-margin-top-m { + margin-top: 20px; +} + +.c9.fi-margin-top-l { + margin-top: 25px; +} + +.c9.fi-margin-top-xl { + margin-top: 30px; +} + +.c9.fi-margin-top-xxl { + margin-top: 40px; +} + +.c9.fi-margin-top-xxxl { + margin-top: 60px; +} + +.c9.fi-margin-top-xxxxl { + margin-top: 80px; +} + +.c9.fi-margin-top-insetXxs { + margin-top: 2px; +} + +.c9.fi-margin-top-insetXs { + margin-top: 4px; +} + +.c9.fi-margin-top-insetS { + margin-top: 6px; +} + +.c9.fi-margin-top-insetM { + margin-top: 8px; +} + +.c9.fi-margin-top-insetL { + margin-top: 10px; +} + +.c9.fi-margin-top-insetXl { + margin-top: 16px; +} + +.c9.fi-margin-top-insetXxl { + margin-top: 20px; +} + +.c9.fi-margin-right-xxs { + margin-right: 5px; +} + +.c9.fi-margin-right-xs { + margin-right: 10px; +} + +.c9.fi-margin-right-s { + margin-right: 15px; +} + +.c9.fi-margin-right-m { + margin-right: 20px; +} + +.c9.fi-margin-right-l { + margin-right: 25px; +} + +.c9.fi-margin-right-xl { + margin-right: 30px; +} + +.c9.fi-margin-right-xxl { + margin-right: 40px; +} + +.c9.fi-margin-right-xxxl { + margin-right: 60px; +} + +.c9.fi-margin-right-xxxxl { + margin-right: 80px; +} + +.c9.fi-margin-right-insetXxs { + margin-right: 2px; +} + +.c9.fi-margin-right-insetXs { + margin-right: 4px; +} + +.c9.fi-margin-right-insetS { + margin-right: 6px; +} + +.c9.fi-margin-right-insetM { + margin-right: 8px; +} + +.c9.fi-margin-right-insetL { + margin-right: 10px; +} + +.c9.fi-margin-right-insetXl { + margin-right: 16px; +} + +.c9.fi-margin-right-insetXxl { + margin-right: 20px; +} + +.c9.fi-margin-bottom-xxs { + margin-bottom: 5px; +} + +.c9.fi-margin-bottom-xs { + margin-bottom: 10px; +} + +.c9.fi-margin-bottom-s { + margin-bottom: 15px; +} + +.c9.fi-margin-bottom-m { + margin-bottom: 20px; +} + +.c9.fi-margin-bottom-l { + margin-bottom: 25px; +} + +.c9.fi-margin-bottom-xl { + margin-bottom: 30px; +} + +.c9.fi-margin-bottom-xxl { + margin-bottom: 40px; +} + +.c9.fi-margin-bottom-xxxl { + margin-bottom: 60px; +} + +.c9.fi-margin-bottom-xxxxl { + margin-bottom: 80px; +} + +.c9.fi-margin-bottom-insetXxs { + margin-bottom: 2px; +} + +.c9.fi-margin-bottom-insetXs { + margin-bottom: 4px; +} + +.c9.fi-margin-bottom-insetS { + margin-bottom: 6px; +} + +.c9.fi-margin-bottom-insetM { + margin-bottom: 8px; +} + +.c9.fi-margin-bottom-insetL { + margin-bottom: 10px; +} + +.c9.fi-margin-bottom-insetXl { + margin-bottom: 16px; +} + +.c9.fi-margin-bottom-insetXxl { + margin-bottom: 20px; +} + +.c9.fi-margin-left-xxs { + margin-left: 5px; +} + +.c9.fi-margin-left-xs { + margin-left: 10px; +} + +.c9.fi-margin-left-s { + margin-left: 15px; +} + +.c9.fi-margin-left-m { + margin-left: 20px; +} + +.c9.fi-margin-left-l { + margin-left: 25px; +} + +.c9.fi-margin-left-xl { + margin-left: 30px; +} + +.c9.fi-margin-left-xxl { + margin-left: 40px; +} + +.c9.fi-margin-left-xxxl { + margin-left: 60px; +} + +.c9.fi-margin-left-xxxxl { + margin-left: 80px; +} + +.c9.fi-margin-left-insetXxs { + margin-left: 2px; +} + +.c9.fi-margin-left-insetXs { + margin-left: 4px; +} + +.c9.fi-margin-left-insetS { + margin-left: 6px; +} + +.c9.fi-margin-left-insetM { + margin-left: 8px; +} + +.c9.fi-margin-left-insetL { + margin-left: 10px; +} + +.c9.fi-margin-left-insetXl { + margin-left: 16px; +} + +.c9.fi-margin-left-insetXxl { + margin-left: 20px; +} + +.c9.fi-padding-xxs { + padding: 5px; +} + +.c9.fi-padding-xs { + padding: 10px; +} + +.c9.fi-padding-s { + padding: 15px; +} + +.c9.fi-padding-m { + padding: 20px; +} + +.c9.fi-padding-l { + padding: 25px; +} + +.c9.fi-padding-xl { + padding: 30px; +} + +.c9.fi-padding-xxl { + padding: 40px; +} + +.c9.fi-padding-xxxl { + padding: 60px; +} + +.c9.fi-padding-xxxxl { + padding: 80px; +} + +.c9.fi-padding-insetXxs { + padding: 2px; +} + +.c9.fi-padding-insetXs { + padding: 4px; +} + +.c9.fi-padding-insetS { + padding: 6px; +} + +.c9.fi-padding-insetM { + padding: 8px; +} + +.c9.fi-padding-insetL { + padding: 10px; +} + +.c9.fi-padding-insetXl { + padding: 16px; +} + +.c9.fi-padding-insetXxl { + padding: 20px; +} + +.c9.fi-padding-top-xxs { + padding-top: 5px; +} + +.c9.fi-padding-top-xs { + padding-top: 10px; +} + +.c9.fi-padding-top-s { + padding-top: 15px; +} + +.c9.fi-padding-top-m { + padding-top: 20px; +} + +.c9.fi-padding-top-l { + padding-top: 25px; +} + +.c9.fi-padding-top-xl { + padding-top: 30px; +} + +.c9.fi-padding-top-xxl { + padding-top: 40px; +} + +.c9.fi-padding-top-xxxl { + padding-top: 60px; +} + +.c9.fi-padding-top-xxxxl { + padding-top: 80px; +} + +.c9.fi-padding-top-insetXxs { + padding-top: 2px; +} + +.c9.fi-padding-top-insetXs { + padding-top: 4px; +} + +.c9.fi-padding-top-insetS { + padding-top: 6px; +} + +.c9.fi-padding-top-insetM { + padding-top: 8px; +} + +.c9.fi-padding-top-insetL { + padding-top: 10px; +} + +.c9.fi-padding-top-insetXl { + padding-top: 16px; +} + +.c9.fi-padding-top-insetXxl { + padding-top: 20px; +} + +.c9.fi-padding-right-xxs { + padding-right: 5px; +} + +.c9.fi-padding-right-xs { + padding-right: 10px; +} + +.c9.fi-padding-right-s { + padding-right: 15px; +} + +.c9.fi-padding-right-m { + padding-right: 20px; +} + +.c9.fi-padding-right-l { + padding-right: 25px; +} + +.c9.fi-padding-right-xl { + padding-right: 30px; +} + +.c9.fi-padding-right-xxl { + padding-right: 40px; +} + +.c9.fi-padding-right-xxxl { + padding-right: 60px; +} + +.c9.fi-padding-right-xxxxl { + padding-right: 80px; +} + +.c9.fi-padding-right-insetXxs { + padding-right: 2px; +} + +.c9.fi-padding-right-insetXs { + padding-right: 4px; +} + +.c9.fi-padding-right-insetS { + padding-right: 6px; +} + +.c9.fi-padding-right-insetM { + padding-right: 8px; +} + +.c9.fi-padding-right-insetL { + padding-right: 10px; +} + +.c9.fi-padding-right-insetXl { + padding-right: 16px; +} + +.c9.fi-padding-right-insetXxl { + padding-right: 20px; +} + +.c9.fi-padding-bottom-xxs { + padding-bottom: 5px; +} + +.c9.fi-padding-bottom-xs { + padding-bottom: 10px; +} + +.c9.fi-padding-bottom-s { + padding-bottom: 15px; +} + +.c9.fi-padding-bottom-m { + padding-bottom: 20px; +} + +.c9.fi-padding-bottom-l { + padding-bottom: 25px; +} + +.c9.fi-padding-bottom-xl { + padding-bottom: 30px; +} + +.c9.fi-padding-bottom-xxl { + padding-bottom: 40px; +} + +.c9.fi-padding-bottom-xxxl { + padding-bottom: 60px; +} + +.c9.fi-padding-bottom-xxxxl { + padding-bottom: 80px; +} + +.c9.fi-padding-bottom-insetXxs { + padding-bottom: 2px; +} + +.c9.fi-padding-bottom-insetXs { + padding-bottom: 4px; +} + +.c9.fi-padding-bottom-insetS { + padding-bottom: 6px; +} + +.c9.fi-padding-bottom-insetM { + padding-bottom: 8px; +} + +.c9.fi-padding-bottom-insetL { + padding-bottom: 10px; +} + +.c9.fi-padding-bottom-insetXl { + padding-bottom: 16px; +} + +.c9.fi-padding-bottom-insetXxl { + padding-bottom: 20px; +} + +.c9.fi-padding-left-xxs { + padding-left: 5px; +} + +.c9.fi-padding-left-xs { + padding-left: 10px; +} + +.c9.fi-padding-left-s { + padding-left: 15px; +} + +.c9.fi-padding-left-m { + padding-left: 20px; +} + +.c9.fi-padding-left-l { + padding-left: 25px; +} + +.c9.fi-padding-left-xl { + padding-left: 30px; +} + +.c9.fi-padding-left-xxl { + padding-left: 40px; +} + +.c9.fi-padding-left-xxxl { + padding-left: 60px; +} + +.c9.fi-padding-left-xxxxl { + padding-left: 80px; +} + +.c9.fi-padding-left-insetXxs { + padding-left: 2px; +} + +.c9.fi-padding-left-insetXs { + padding-left: 4px; +} + +.c9.fi-padding-left-insetS { + padding-left: 6px; +} + +.c9.fi-padding-left-insetM { + padding-left: 8px; +} + +.c9.fi-padding-left-insetL { + padding-left: 10px; +} + +.c9.fi-padding-left-insetXl { + padding-left: 16px; +} + +.c9.fi-padding-left-insetXxl { + padding-left: 20px; +} + .c9:focus { position: relative; outline: 3px solid transparent; diff --git a/src/core/Modal/ModalFooter/__snapshots__/ModalFooter.test.tsx.snap b/src/core/Modal/ModalFooter/__snapshots__/ModalFooter.test.tsx.snap index 08c38b894..fbef0d926 100644 --- a/src/core/Modal/ModalFooter/__snapshots__/ModalFooter.test.tsx.snap +++ b/src/core/Modal/ModalFooter/__snapshots__/ModalFooter.test.tsx.snap @@ -273,6 +273,646 @@ exports[`Basic ModalFooter should match snapshot 1`] = ` border: 1px solid transparent; } +.c4.fi-margin-xxs { + margin: 5px; +} + +.c4.fi-margin-xs { + margin: 10px; +} + +.c4.fi-margin-s { + margin: 15px; +} + +.c4.fi-margin-m { + margin: 20px; +} + +.c4.fi-margin-l { + margin: 25px; +} + +.c4.fi-margin-xl { + margin: 30px; +} + +.c4.fi-margin-xxl { + margin: 40px; +} + +.c4.fi-margin-xxxl { + margin: 60px; +} + +.c4.fi-margin-xxxxl { + margin: 80px; +} + +.c4.fi-margin-insetXxs { + margin: 2px; +} + +.c4.fi-margin-insetXs { + margin: 4px; +} + +.c4.fi-margin-insetS { + margin: 6px; +} + +.c4.fi-margin-insetM { + margin: 8px; +} + +.c4.fi-margin-insetL { + margin: 10px; +} + +.c4.fi-margin-insetXl { + margin: 16px; +} + +.c4.fi-margin-insetXxl { + margin: 20px; +} + +.c4.fi-margin-top-xxs { + margin-top: 5px; +} + +.c4.fi-margin-top-xs { + margin-top: 10px; +} + +.c4.fi-margin-top-s { + margin-top: 15px; +} + +.c4.fi-margin-top-m { + margin-top: 20px; +} + +.c4.fi-margin-top-l { + margin-top: 25px; +} + +.c4.fi-margin-top-xl { + margin-top: 30px; +} + +.c4.fi-margin-top-xxl { + margin-top: 40px; +} + +.c4.fi-margin-top-xxxl { + margin-top: 60px; +} + +.c4.fi-margin-top-xxxxl { + margin-top: 80px; +} + +.c4.fi-margin-top-insetXxs { + margin-top: 2px; +} + +.c4.fi-margin-top-insetXs { + margin-top: 4px; +} + +.c4.fi-margin-top-insetS { + margin-top: 6px; +} + +.c4.fi-margin-top-insetM { + margin-top: 8px; +} + +.c4.fi-margin-top-insetL { + margin-top: 10px; +} + +.c4.fi-margin-top-insetXl { + margin-top: 16px; +} + +.c4.fi-margin-top-insetXxl { + margin-top: 20px; +} + +.c4.fi-margin-right-xxs { + margin-right: 5px; +} + +.c4.fi-margin-right-xs { + margin-right: 10px; +} + +.c4.fi-margin-right-s { + margin-right: 15px; +} + +.c4.fi-margin-right-m { + margin-right: 20px; +} + +.c4.fi-margin-right-l { + margin-right: 25px; +} + +.c4.fi-margin-right-xl { + margin-right: 30px; +} + +.c4.fi-margin-right-xxl { + margin-right: 40px; +} + +.c4.fi-margin-right-xxxl { + margin-right: 60px; +} + +.c4.fi-margin-right-xxxxl { + margin-right: 80px; +} + +.c4.fi-margin-right-insetXxs { + margin-right: 2px; +} + +.c4.fi-margin-right-insetXs { + margin-right: 4px; +} + +.c4.fi-margin-right-insetS { + margin-right: 6px; +} + +.c4.fi-margin-right-insetM { + margin-right: 8px; +} + +.c4.fi-margin-right-insetL { + margin-right: 10px; +} + +.c4.fi-margin-right-insetXl { + margin-right: 16px; +} + +.c4.fi-margin-right-insetXxl { + margin-right: 20px; +} + +.c4.fi-margin-bottom-xxs { + margin-bottom: 5px; +} + +.c4.fi-margin-bottom-xs { + margin-bottom: 10px; +} + +.c4.fi-margin-bottom-s { + margin-bottom: 15px; +} + +.c4.fi-margin-bottom-m { + margin-bottom: 20px; +} + +.c4.fi-margin-bottom-l { + margin-bottom: 25px; +} + +.c4.fi-margin-bottom-xl { + margin-bottom: 30px; +} + +.c4.fi-margin-bottom-xxl { + margin-bottom: 40px; +} + +.c4.fi-margin-bottom-xxxl { + margin-bottom: 60px; +} + +.c4.fi-margin-bottom-xxxxl { + margin-bottom: 80px; +} + +.c4.fi-margin-bottom-insetXxs { + margin-bottom: 2px; +} + +.c4.fi-margin-bottom-insetXs { + margin-bottom: 4px; +} + +.c4.fi-margin-bottom-insetS { + margin-bottom: 6px; +} + +.c4.fi-margin-bottom-insetM { + margin-bottom: 8px; +} + +.c4.fi-margin-bottom-insetL { + margin-bottom: 10px; +} + +.c4.fi-margin-bottom-insetXl { + margin-bottom: 16px; +} + +.c4.fi-margin-bottom-insetXxl { + margin-bottom: 20px; +} + +.c4.fi-margin-left-xxs { + margin-left: 5px; +} + +.c4.fi-margin-left-xs { + margin-left: 10px; +} + +.c4.fi-margin-left-s { + margin-left: 15px; +} + +.c4.fi-margin-left-m { + margin-left: 20px; +} + +.c4.fi-margin-left-l { + margin-left: 25px; +} + +.c4.fi-margin-left-xl { + margin-left: 30px; +} + +.c4.fi-margin-left-xxl { + margin-left: 40px; +} + +.c4.fi-margin-left-xxxl { + margin-left: 60px; +} + +.c4.fi-margin-left-xxxxl { + margin-left: 80px; +} + +.c4.fi-margin-left-insetXxs { + margin-left: 2px; +} + +.c4.fi-margin-left-insetXs { + margin-left: 4px; +} + +.c4.fi-margin-left-insetS { + margin-left: 6px; +} + +.c4.fi-margin-left-insetM { + margin-left: 8px; +} + +.c4.fi-margin-left-insetL { + margin-left: 10px; +} + +.c4.fi-margin-left-insetXl { + margin-left: 16px; +} + +.c4.fi-margin-left-insetXxl { + margin-left: 20px; +} + +.c4.fi-padding-xxs { + padding: 5px; +} + +.c4.fi-padding-xs { + padding: 10px; +} + +.c4.fi-padding-s { + padding: 15px; +} + +.c4.fi-padding-m { + padding: 20px; +} + +.c4.fi-padding-l { + padding: 25px; +} + +.c4.fi-padding-xl { + padding: 30px; +} + +.c4.fi-padding-xxl { + padding: 40px; +} + +.c4.fi-padding-xxxl { + padding: 60px; +} + +.c4.fi-padding-xxxxl { + padding: 80px; +} + +.c4.fi-padding-insetXxs { + padding: 2px; +} + +.c4.fi-padding-insetXs { + padding: 4px; +} + +.c4.fi-padding-insetS { + padding: 6px; +} + +.c4.fi-padding-insetM { + padding: 8px; +} + +.c4.fi-padding-insetL { + padding: 10px; +} + +.c4.fi-padding-insetXl { + padding: 16px; +} + +.c4.fi-padding-insetXxl { + padding: 20px; +} + +.c4.fi-padding-top-xxs { + padding-top: 5px; +} + +.c4.fi-padding-top-xs { + padding-top: 10px; +} + +.c4.fi-padding-top-s { + padding-top: 15px; +} + +.c4.fi-padding-top-m { + padding-top: 20px; +} + +.c4.fi-padding-top-l { + padding-top: 25px; +} + +.c4.fi-padding-top-xl { + padding-top: 30px; +} + +.c4.fi-padding-top-xxl { + padding-top: 40px; +} + +.c4.fi-padding-top-xxxl { + padding-top: 60px; +} + +.c4.fi-padding-top-xxxxl { + padding-top: 80px; +} + +.c4.fi-padding-top-insetXxs { + padding-top: 2px; +} + +.c4.fi-padding-top-insetXs { + padding-top: 4px; +} + +.c4.fi-padding-top-insetS { + padding-top: 6px; +} + +.c4.fi-padding-top-insetM { + padding-top: 8px; +} + +.c4.fi-padding-top-insetL { + padding-top: 10px; +} + +.c4.fi-padding-top-insetXl { + padding-top: 16px; +} + +.c4.fi-padding-top-insetXxl { + padding-top: 20px; +} + +.c4.fi-padding-right-xxs { + padding-right: 5px; +} + +.c4.fi-padding-right-xs { + padding-right: 10px; +} + +.c4.fi-padding-right-s { + padding-right: 15px; +} + +.c4.fi-padding-right-m { + padding-right: 20px; +} + +.c4.fi-padding-right-l { + padding-right: 25px; +} + +.c4.fi-padding-right-xl { + padding-right: 30px; +} + +.c4.fi-padding-right-xxl { + padding-right: 40px; +} + +.c4.fi-padding-right-xxxl { + padding-right: 60px; +} + +.c4.fi-padding-right-xxxxl { + padding-right: 80px; +} + +.c4.fi-padding-right-insetXxs { + padding-right: 2px; +} + +.c4.fi-padding-right-insetXs { + padding-right: 4px; +} + +.c4.fi-padding-right-insetS { + padding-right: 6px; +} + +.c4.fi-padding-right-insetM { + padding-right: 8px; +} + +.c4.fi-padding-right-insetL { + padding-right: 10px; +} + +.c4.fi-padding-right-insetXl { + padding-right: 16px; +} + +.c4.fi-padding-right-insetXxl { + padding-right: 20px; +} + +.c4.fi-padding-bottom-xxs { + padding-bottom: 5px; +} + +.c4.fi-padding-bottom-xs { + padding-bottom: 10px; +} + +.c4.fi-padding-bottom-s { + padding-bottom: 15px; +} + +.c4.fi-padding-bottom-m { + padding-bottom: 20px; +} + +.c4.fi-padding-bottom-l { + padding-bottom: 25px; +} + +.c4.fi-padding-bottom-xl { + padding-bottom: 30px; +} + +.c4.fi-padding-bottom-xxl { + padding-bottom: 40px; +} + +.c4.fi-padding-bottom-xxxl { + padding-bottom: 60px; +} + +.c4.fi-padding-bottom-xxxxl { + padding-bottom: 80px; +} + +.c4.fi-padding-bottom-insetXxs { + padding-bottom: 2px; +} + +.c4.fi-padding-bottom-insetXs { + padding-bottom: 4px; +} + +.c4.fi-padding-bottom-insetS { + padding-bottom: 6px; +} + +.c4.fi-padding-bottom-insetM { + padding-bottom: 8px; +} + +.c4.fi-padding-bottom-insetL { + padding-bottom: 10px; +} + +.c4.fi-padding-bottom-insetXl { + padding-bottom: 16px; +} + +.c4.fi-padding-bottom-insetXxl { + padding-bottom: 20px; +} + +.c4.fi-padding-left-xxs { + padding-left: 5px; +} + +.c4.fi-padding-left-xs { + padding-left: 10px; +} + +.c4.fi-padding-left-s { + padding-left: 15px; +} + +.c4.fi-padding-left-m { + padding-left: 20px; +} + +.c4.fi-padding-left-l { + padding-left: 25px; +} + +.c4.fi-padding-left-xl { + padding-left: 30px; +} + +.c4.fi-padding-left-xxl { + padding-left: 40px; +} + +.c4.fi-padding-left-xxxl { + padding-left: 60px; +} + +.c4.fi-padding-left-xxxxl { + padding-left: 80px; +} + +.c4.fi-padding-left-insetXxs { + padding-left: 2px; +} + +.c4.fi-padding-left-insetXs { + padding-left: 4px; +} + +.c4.fi-padding-left-insetS { + padding-left: 6px; +} + +.c4.fi-padding-left-insetM { + padding-left: 8px; +} + +.c4.fi-padding-left-insetL { + padding-left: 10px; +} + +.c4.fi-padding-left-insetXl { + padding-left: 16px; +} + +.c4.fi-padding-left-insetXxl { + padding-left: 20px; +} + .c4:focus { position: relative; outline: 3px solid transparent; diff --git a/src/core/Pagination/__snapshots__/Pagination.test.tsx.snap b/src/core/Pagination/__snapshots__/Pagination.test.tsx.snap index a942b34d7..c0aee3046 100644 --- a/src/core/Pagination/__snapshots__/Pagination.test.tsx.snap +++ b/src/core/Pagination/__snapshots__/Pagination.test.tsx.snap @@ -599,6 +599,646 @@ exports[`snapshot should have matching default structure 1`] = ` border: 1px solid transparent; } +.c6.fi-margin-xxs { + margin: 5px; +} + +.c6.fi-margin-xs { + margin: 10px; +} + +.c6.fi-margin-s { + margin: 15px; +} + +.c6.fi-margin-m { + margin: 20px; +} + +.c6.fi-margin-l { + margin: 25px; +} + +.c6.fi-margin-xl { + margin: 30px; +} + +.c6.fi-margin-xxl { + margin: 40px; +} + +.c6.fi-margin-xxxl { + margin: 60px; +} + +.c6.fi-margin-xxxxl { + margin: 80px; +} + +.c6.fi-margin-insetXxs { + margin: 2px; +} + +.c6.fi-margin-insetXs { + margin: 4px; +} + +.c6.fi-margin-insetS { + margin: 6px; +} + +.c6.fi-margin-insetM { + margin: 8px; +} + +.c6.fi-margin-insetL { + margin: 10px; +} + +.c6.fi-margin-insetXl { + margin: 16px; +} + +.c6.fi-margin-insetXxl { + margin: 20px; +} + +.c6.fi-margin-top-xxs { + margin-top: 5px; +} + +.c6.fi-margin-top-xs { + margin-top: 10px; +} + +.c6.fi-margin-top-s { + margin-top: 15px; +} + +.c6.fi-margin-top-m { + margin-top: 20px; +} + +.c6.fi-margin-top-l { + margin-top: 25px; +} + +.c6.fi-margin-top-xl { + margin-top: 30px; +} + +.c6.fi-margin-top-xxl { + margin-top: 40px; +} + +.c6.fi-margin-top-xxxl { + margin-top: 60px; +} + +.c6.fi-margin-top-xxxxl { + margin-top: 80px; +} + +.c6.fi-margin-top-insetXxs { + margin-top: 2px; +} + +.c6.fi-margin-top-insetXs { + margin-top: 4px; +} + +.c6.fi-margin-top-insetS { + margin-top: 6px; +} + +.c6.fi-margin-top-insetM { + margin-top: 8px; +} + +.c6.fi-margin-top-insetL { + margin-top: 10px; +} + +.c6.fi-margin-top-insetXl { + margin-top: 16px; +} + +.c6.fi-margin-top-insetXxl { + margin-top: 20px; +} + +.c6.fi-margin-right-xxs { + margin-right: 5px; +} + +.c6.fi-margin-right-xs { + margin-right: 10px; +} + +.c6.fi-margin-right-s { + margin-right: 15px; +} + +.c6.fi-margin-right-m { + margin-right: 20px; +} + +.c6.fi-margin-right-l { + margin-right: 25px; +} + +.c6.fi-margin-right-xl { + margin-right: 30px; +} + +.c6.fi-margin-right-xxl { + margin-right: 40px; +} + +.c6.fi-margin-right-xxxl { + margin-right: 60px; +} + +.c6.fi-margin-right-xxxxl { + margin-right: 80px; +} + +.c6.fi-margin-right-insetXxs { + margin-right: 2px; +} + +.c6.fi-margin-right-insetXs { + margin-right: 4px; +} + +.c6.fi-margin-right-insetS { + margin-right: 6px; +} + +.c6.fi-margin-right-insetM { + margin-right: 8px; +} + +.c6.fi-margin-right-insetL { + margin-right: 10px; +} + +.c6.fi-margin-right-insetXl { + margin-right: 16px; +} + +.c6.fi-margin-right-insetXxl { + margin-right: 20px; +} + +.c6.fi-margin-bottom-xxs { + margin-bottom: 5px; +} + +.c6.fi-margin-bottom-xs { + margin-bottom: 10px; +} + +.c6.fi-margin-bottom-s { + margin-bottom: 15px; +} + +.c6.fi-margin-bottom-m { + margin-bottom: 20px; +} + +.c6.fi-margin-bottom-l { + margin-bottom: 25px; +} + +.c6.fi-margin-bottom-xl { + margin-bottom: 30px; +} + +.c6.fi-margin-bottom-xxl { + margin-bottom: 40px; +} + +.c6.fi-margin-bottom-xxxl { + margin-bottom: 60px; +} + +.c6.fi-margin-bottom-xxxxl { + margin-bottom: 80px; +} + +.c6.fi-margin-bottom-insetXxs { + margin-bottom: 2px; +} + +.c6.fi-margin-bottom-insetXs { + margin-bottom: 4px; +} + +.c6.fi-margin-bottom-insetS { + margin-bottom: 6px; +} + +.c6.fi-margin-bottom-insetM { + margin-bottom: 8px; +} + +.c6.fi-margin-bottom-insetL { + margin-bottom: 10px; +} + +.c6.fi-margin-bottom-insetXl { + margin-bottom: 16px; +} + +.c6.fi-margin-bottom-insetXxl { + margin-bottom: 20px; +} + +.c6.fi-margin-left-xxs { + margin-left: 5px; +} + +.c6.fi-margin-left-xs { + margin-left: 10px; +} + +.c6.fi-margin-left-s { + margin-left: 15px; +} + +.c6.fi-margin-left-m { + margin-left: 20px; +} + +.c6.fi-margin-left-l { + margin-left: 25px; +} + +.c6.fi-margin-left-xl { + margin-left: 30px; +} + +.c6.fi-margin-left-xxl { + margin-left: 40px; +} + +.c6.fi-margin-left-xxxl { + margin-left: 60px; +} + +.c6.fi-margin-left-xxxxl { + margin-left: 80px; +} + +.c6.fi-margin-left-insetXxs { + margin-left: 2px; +} + +.c6.fi-margin-left-insetXs { + margin-left: 4px; +} + +.c6.fi-margin-left-insetS { + margin-left: 6px; +} + +.c6.fi-margin-left-insetM { + margin-left: 8px; +} + +.c6.fi-margin-left-insetL { + margin-left: 10px; +} + +.c6.fi-margin-left-insetXl { + margin-left: 16px; +} + +.c6.fi-margin-left-insetXxl { + margin-left: 20px; +} + +.c6.fi-padding-xxs { + padding: 5px; +} + +.c6.fi-padding-xs { + padding: 10px; +} + +.c6.fi-padding-s { + padding: 15px; +} + +.c6.fi-padding-m { + padding: 20px; +} + +.c6.fi-padding-l { + padding: 25px; +} + +.c6.fi-padding-xl { + padding: 30px; +} + +.c6.fi-padding-xxl { + padding: 40px; +} + +.c6.fi-padding-xxxl { + padding: 60px; +} + +.c6.fi-padding-xxxxl { + padding: 80px; +} + +.c6.fi-padding-insetXxs { + padding: 2px; +} + +.c6.fi-padding-insetXs { + padding: 4px; +} + +.c6.fi-padding-insetS { + padding: 6px; +} + +.c6.fi-padding-insetM { + padding: 8px; +} + +.c6.fi-padding-insetL { + padding: 10px; +} + +.c6.fi-padding-insetXl { + padding: 16px; +} + +.c6.fi-padding-insetXxl { + padding: 20px; +} + +.c6.fi-padding-top-xxs { + padding-top: 5px; +} + +.c6.fi-padding-top-xs { + padding-top: 10px; +} + +.c6.fi-padding-top-s { + padding-top: 15px; +} + +.c6.fi-padding-top-m { + padding-top: 20px; +} + +.c6.fi-padding-top-l { + padding-top: 25px; +} + +.c6.fi-padding-top-xl { + padding-top: 30px; +} + +.c6.fi-padding-top-xxl { + padding-top: 40px; +} + +.c6.fi-padding-top-xxxl { + padding-top: 60px; +} + +.c6.fi-padding-top-xxxxl { + padding-top: 80px; +} + +.c6.fi-padding-top-insetXxs { + padding-top: 2px; +} + +.c6.fi-padding-top-insetXs { + padding-top: 4px; +} + +.c6.fi-padding-top-insetS { + padding-top: 6px; +} + +.c6.fi-padding-top-insetM { + padding-top: 8px; +} + +.c6.fi-padding-top-insetL { + padding-top: 10px; +} + +.c6.fi-padding-top-insetXl { + padding-top: 16px; +} + +.c6.fi-padding-top-insetXxl { + padding-top: 20px; +} + +.c6.fi-padding-right-xxs { + padding-right: 5px; +} + +.c6.fi-padding-right-xs { + padding-right: 10px; +} + +.c6.fi-padding-right-s { + padding-right: 15px; +} + +.c6.fi-padding-right-m { + padding-right: 20px; +} + +.c6.fi-padding-right-l { + padding-right: 25px; +} + +.c6.fi-padding-right-xl { + padding-right: 30px; +} + +.c6.fi-padding-right-xxl { + padding-right: 40px; +} + +.c6.fi-padding-right-xxxl { + padding-right: 60px; +} + +.c6.fi-padding-right-xxxxl { + padding-right: 80px; +} + +.c6.fi-padding-right-insetXxs { + padding-right: 2px; +} + +.c6.fi-padding-right-insetXs { + padding-right: 4px; +} + +.c6.fi-padding-right-insetS { + padding-right: 6px; +} + +.c6.fi-padding-right-insetM { + padding-right: 8px; +} + +.c6.fi-padding-right-insetL { + padding-right: 10px; +} + +.c6.fi-padding-right-insetXl { + padding-right: 16px; +} + +.c6.fi-padding-right-insetXxl { + padding-right: 20px; +} + +.c6.fi-padding-bottom-xxs { + padding-bottom: 5px; +} + +.c6.fi-padding-bottom-xs { + padding-bottom: 10px; +} + +.c6.fi-padding-bottom-s { + padding-bottom: 15px; +} + +.c6.fi-padding-bottom-m { + padding-bottom: 20px; +} + +.c6.fi-padding-bottom-l { + padding-bottom: 25px; +} + +.c6.fi-padding-bottom-xl { + padding-bottom: 30px; +} + +.c6.fi-padding-bottom-xxl { + padding-bottom: 40px; +} + +.c6.fi-padding-bottom-xxxl { + padding-bottom: 60px; +} + +.c6.fi-padding-bottom-xxxxl { + padding-bottom: 80px; +} + +.c6.fi-padding-bottom-insetXxs { + padding-bottom: 2px; +} + +.c6.fi-padding-bottom-insetXs { + padding-bottom: 4px; +} + +.c6.fi-padding-bottom-insetS { + padding-bottom: 6px; +} + +.c6.fi-padding-bottom-insetM { + padding-bottom: 8px; +} + +.c6.fi-padding-bottom-insetL { + padding-bottom: 10px; +} + +.c6.fi-padding-bottom-insetXl { + padding-bottom: 16px; +} + +.c6.fi-padding-bottom-insetXxl { + padding-bottom: 20px; +} + +.c6.fi-padding-left-xxs { + padding-left: 5px; +} + +.c6.fi-padding-left-xs { + padding-left: 10px; +} + +.c6.fi-padding-left-s { + padding-left: 15px; +} + +.c6.fi-padding-left-m { + padding-left: 20px; +} + +.c6.fi-padding-left-l { + padding-left: 25px; +} + +.c6.fi-padding-left-xl { + padding-left: 30px; +} + +.c6.fi-padding-left-xxl { + padding-left: 40px; +} + +.c6.fi-padding-left-xxxl { + padding-left: 60px; +} + +.c6.fi-padding-left-xxxxl { + padding-left: 80px; +} + +.c6.fi-padding-left-insetXxs { + padding-left: 2px; +} + +.c6.fi-padding-left-insetXs { + padding-left: 4px; +} + +.c6.fi-padding-left-insetS { + padding-left: 6px; +} + +.c6.fi-padding-left-insetM { + padding-left: 8px; +} + +.c6.fi-padding-left-insetL { + padding-left: 10px; +} + +.c6.fi-padding-left-insetXl { + padding-left: 16px; +} + +.c6.fi-padding-left-insetXxl { + padding-left: 20px; +} + .c6:focus { position: relative; outline: 3px solid transparent; diff --git a/src/core/theme/utils/spacing.ts b/src/core/theme/utils/spacing.ts index 111f6889b..4a20c2981 100644 --- a/src/core/theme/utils/spacing.ts +++ b/src/core/theme/utils/spacing.ts @@ -4,6 +4,7 @@ import { SpacingProp, defaultSuomifiTheme, } from '../SuomifiTheme/SuomifiTheme'; +import { css } from 'styled-components'; type SpacingDesignTokensKeys = keyof SpacingDesignTokens; @@ -97,3 +98,107 @@ export const spacingModifiers = } `, '', ); + +export interface SpacingProps { + /** Padding from theme */ + padding?: SpacingWithoutInsetProp; + /** Padding-top from theme */ + pt?: SpacingWithoutInsetProp; + /** Padding-right from theme */ + pr?: SpacingWithoutInsetProp; + /** Padding-bottom from theme */ + pb?: SpacingWithoutInsetProp; + /** Padding-left from theme */ + pl?: SpacingWithoutInsetProp; + /** Padding on the x-axis (left & right) from theme */ + px?: SpacingWithoutInsetProp; + /** Padding on the y-axis (top & bottom) from theme */ + py?: SpacingWithoutInsetProp; + /** Margin from theme */ + margin?: SpacingWithoutInsetProp; + /** Margin-top from theme */ + mt?: SpacingWithoutInsetProp; + /** Margin-right from theme */ + mr?: SpacingWithoutInsetProp; + /** Margin-bottom from theme */ + mb?: SpacingWithoutInsetProp; + /** Margin-left from theme */ + ml?: SpacingWithoutInsetProp; + /** Margin on the x-axis (left & right) from theme */ + mx?: SpacingWithoutInsetProp; + /** Margin on the y-axis (top & bottom) from theme */ + my?: SpacingWithoutInsetProp; +} + +export const spacingClasses = (theme: SuomifiTheme) => css` + ${spacingModifiers(theme)('margin')('&.fi-margin')} + ${spacingModifiers(theme)('margin-top')('&.fi-margin-top')} + ${spacingModifiers(theme)('margin-right')('&.fi-margin-right')} + ${spacingModifiers(theme)('margin-bottom')('&.fi-margin-bottom')} + ${spacingModifiers(theme)('margin-left')('&.fi-margin-left')} + ${spacingModifiers(theme)('padding')('&.fi-padding')} + ${spacingModifiers(theme)('padding-top')('&.fi-padding-top')} + ${spacingModifiers(theme)('padding-right')('&.fi-padding-right')} + ${spacingModifiers(theme)('padding-bottom')('&.fi-padding-bottom')} + ${spacingModifiers(theme)('padding-left')('&.fi-padding-left')} +`; + +export const getSpacingClassNamesFromProps = (props: SpacingProps) => ({ + [`fi-padding-${props.padding}`]: !!props.padding, + [`fi-margin-${props.margin}`]: !!props.margin, + [`fi-margin-top-${props.mt}`]: !!props.mt, + [`fi-margin-right-${props.mr}`]: !!props.mr, + [`fi-margin-bottom-${props.mb}`]: !!props.mb, + [`fi-margin-left-${props.ml}`]: !!props.ml, + [`fi-margin-left-${props.mx}`]: !!props.mx, + [`fi-margin-right-${props.mx}`]: !!props.mx, + [`fi-margin-top-${props.my}`]: !!props.my, + [`fi-margin-bottom-${props.my}`]: !!props.my, + [`fi-padding-top-${props.pt}`]: !!props.pt, + [`fi-padding-right-${props.pr}`]: !!props.pr, + [`fi-padding-bottom-${props.pb}`]: !!props.pb, + [`fi-padding-left-${props.pl}`]: !!props.pl, + [`fi-padding-left-${props.px}`]: !!props.px, + [`fi-padding-right-${props.px}`]: !!props.px, + [`fi-padding-top-${props.py}`]: !!props.py, + [`fi-padding-bottom-${props.py}`]: !!props.py, +}); + +export const separateSpacingProps = (props: any) => { + const { + margin: marginProp, + padding: paddingProp, + my, + mx, + py, + px, + mt, + mr, + mb, + ml, + pt, + pr, + pb, + pl, + ...otherProps + } = props; + return [ + { + margin: marginProp, + padding: paddingProp, + my, + mx, + py, + px, + mt, + mr, + mb, + ml, + pt, + pr, + pb, + pl, + }, + otherProps, + ]; +}; From 6b9838177f43f2359c05081c28f7f54e1f7dc289 Mon Sep 17 00:00:00 2001 From: Jenni Unkuri Date: Mon, 14 Aug 2023 11:34:57 +0300 Subject: [PATCH 2/6] Change spacing style props from classes to inline styles --- .../__snapshots__/ActionMenu.test.tsx.snap | 6886 +++++------------ src/core/Block/Block.baseStyles.ts | 2 - src/core/Block/Block.tsx | 9 +- .../Block/__snapshots__/Block.test.tsx.snap | 643 +- src/core/Button/Button.baseStyles.tsx | 3 - src/core/Button/Button.tsx | 12 +- .../Button/__snapshots__/Button.test.tsx.snap | 4224 ++-------- .../__snapshots__/Expander.test.tsx.snap | 5 +- .../ExpanderContent.baseStyles.tsx | 3 +- .../ExpanderContent.test.tsx.snap | 5 +- .../__snapshots__/ExpanderGroup.test.tsx.snap | 5 +- .../__snapshots__/DateInput.test.tsx.snap | 4970 +++++------- .../__snapshots__/MultiSelect.test.tsx.snap | 640 -- .../Modal/__snapshots__/Modal.test.tsx.snap | 640 -- .../__snapshots__/ModalFooter.test.tsx.snap | 640 -- .../__snapshots__/Pagination.test.tsx.snap | 640 -- src/core/Paragraph/Paragraph.baseStyles.ts | 2 - src/core/Paragraph/Paragraph.tsx | 4 +- .../__snapshots__/Paragraph.test.tsx.snap | 64 - .../Text/__snapshots__/Text.test.tsx.snap | 65 +- src/core/theme/utils/index.ts | 1 - src/core/theme/utils/spacing.ts | 193 +- 22 files changed, 4290 insertions(+), 15366 deletions(-) delete mode 100644 src/core/theme/utils/index.ts diff --git a/src/core/ActionMenu/__snapshots__/ActionMenu.test.tsx.snap b/src/core/ActionMenu/__snapshots__/ActionMenu.test.tsx.snap index f1ae83be5..f5d9675a1 100644 --- a/src/core/ActionMenu/__snapshots__/ActionMenu.test.tsx.snap +++ b/src/core/ActionMenu/__snapshots__/ActionMenu.test.tsx.snap @@ -269,4863 +269,770 @@ exports[`Basic ActionMenu should match snapshot 1`] = ` border: 1px solid transparent; } -.c3.fi-margin-xxs { - margin: 5px; -} - -.c3.fi-margin-xs { - margin: 10px; -} - -.c3.fi-margin-s { - margin: 15px; -} - -.c3.fi-margin-m { - margin: 20px; +.c3:focus { + position: relative; + outline: 3px solid transparent; } -.c3.fi-margin-l { - margin: 25px; +.c3:focus::after { + content: ''; + position: absolute; + pointer-events: none; + top: -2px; + right: -2px; + bottom: -2px; + left: -2px; + border-radius: 2px; + background-color: transparent; + border: 0px solid hsl(0,0%,100%); + box-sizing: border-box; + box-shadow: 0 0 0 2px hsl(196,77%,44%); + z-index: 9999; } -.c3.fi-margin-xl { - margin: 30px; +.c3:hover { + background: linear-gradient(0deg,hsl(212,63%,45%) 0%,hsl(212,63%,49%) 100%); + outline: 2px solid transparent; } -.c3.fi-margin-xxl { - margin: 40px; +.c3:active { + background: hsl(212,63%,37%); } -.c3.fi-margin-xxxl { - margin: 60px; +.c3.fi-button--disabled, +.c3[disabled], +.c3:disabled { + text-shadow: 0 1px 1px rgba(33,33,33,0.5); + background: linear-gradient(0deg,hsl(202,7%,67%) 0%,hsl(202,7%,80%) 100%); + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: not-allowed; } -.c3.fi-margin-xxxxl { - margin: 80px; +.c3.fi-button--disabled::after { + border: none; + box-shadow: none; } -.c3.fi-margin-insetXxs { - margin: 2px; +.c3.fi-button--fullwidth { + display: block; + width: 100%; } -.c3.fi-margin-insetXs { - margin: 4px; +.c3.fi-button--inverted { + background: none; + background-color: hsl(212,63%,45%); + border: 1px solid hsl(0,0%,100%); + text-shadow: none; } -.c3.fi-margin-insetS { - margin: 6px; +.c3.fi-button--inverted:hover { + background: linear-gradient(-180deg,hsla(0,0%,100%,0.1) 0%,hsla(0,0%,100%,0) 100%); } -.c3.fi-margin-insetM { - margin: 8px; +.c3.fi-button--inverted:active { + background: none; + background-color: hsl(212,63%,45%); } -.c3.fi-margin-insetL { - margin: 10px; +.c3.fi-button--inverted.fi-button--disabled, +.c3.fi-button--inverted[disabled], +.c3.fi-button--inverted:disabled { + opacity: 0.41; + background: none; + background-color: none; } -.c3.fi-margin-insetXl { - margin: 16px; +.c3.fi-button--secondary { + color: hsl(212,63%,45%); + background: none; + background-color: hsl(0,0%,100%); + border: 1px solid hsl(212,63%,45%); + text-shadow: none; } -.c3.fi-margin-insetXxl { - margin: 20px; +.c3.fi-button--secondary:hover { + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); } -.c3.fi-margin-top-xxs { - margin-top: 5px; +.c3.fi-button--secondary:active { + background: none; + background-color: hsl(202,7%,93%); } -.c3.fi-margin-top-xs { - margin-top: 10px; +.c3.fi-button--secondary.fi-button--disabled, +.c3.fi-button--secondary[disabled], +.c3.fi-button--secondary:disabled { + color: hsl(202,7%,67%); + text-shadow: none; + background: none; + background-color: hsl(212,63%,98%); + border-color: hsl(202,7%,67%); } -.c3.fi-margin-top-s { - margin-top: 15px; +.c3.fi-button--secondary-noborder { + color: hsl(212,63%,45%); + background: none; + background-color: hsl(0,0%,100%); + border: 1px solid hsl(212,63%,45%); + text-shadow: none; + border: none; + background-color: transparent; } -.c3.fi-margin-top-m { - margin-top: 20px; +.c3.fi-button--secondary-noborder:hover { + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); } -.c3.fi-margin-top-l { - margin-top: 25px; +.c3.fi-button--secondary-noborder:active { + background: none; + background-color: hsl(202,7%,93%); } -.c3.fi-margin-top-xl { - margin-top: 30px; +.c3.fi-button--secondary-noborder.fi-button--disabled, +.c3.fi-button--secondary-noborder[disabled], +.c3.fi-button--secondary-noborder:disabled { + color: hsl(202,7%,67%); + text-shadow: none; + background: none; + background-color: hsl(212,63%,98%); + border-color: hsl(202,7%,67%); } -.c3.fi-margin-top-xxl { - margin-top: 40px; +.c3.fi-button--secondary-light { + color: hsl(212,63%,45%); + color: hsl(212,63%,45%); + background: none; + background-color: hsl(0,0%,100%); + border: 1px solid hsl(212,63%,45%); + text-shadow: none; + background: linear-gradient(0deg,hsl(215,100%,95%),hsl(215,100%,97%)); + border: none; } -.c3.fi-margin-top-xxxl { - margin-top: 60px; +.c3.fi-button--secondary-light:hover { + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); } -.c3.fi-margin-top-xxxxl { - margin-top: 80px; +.c3.fi-button--secondary-light:active { + background: none; + background-color: hsl(202,7%,93%); } -.c3.fi-margin-top-insetXxs { - margin-top: 2px; +.c3.fi-button--secondary-light.fi-button--disabled, +.c3.fi-button--secondary-light[disabled], +.c3.fi-button--secondary-light:disabled { + color: hsl(202,7%,67%); + text-shadow: none; + background: none; + background-color: hsl(212,63%,98%); + border-color: hsl(202,7%,67%); } -.c3.fi-margin-top-insetXs { - margin-top: 4px; +.c3.fi-button--secondary-light:hover { + background: linear-gradient(0deg,hsl(215,100%,97%),hsl(212,63%,98%)); } -.c3.fi-margin-top-insetS { - margin-top: 6px; +.c3.fi-button--secondary-light:active { + background: linear-gradient(0deg,hsl(202,7%,93%),hsl(202,7%,97%)); } -.c3.fi-margin-top-insetM { - margin-top: 8px; +.c3.fi-button--secondary-light.fi-button--disabled, +.c3.fi-button--secondary-light[disabled], +.c3.fi-button--secondary-light:disabled { + color: hsl(202,7%,67%); + background: none; + background-color: hsl(202,7%,97%); } -.c3.fi-margin-top-insetL { - margin-top: 10px; +.c3 > .fi-button_icon > .fi-icon { + width: 16px; + height: 16px; + margin-right: 8px; + vertical-align: middle; + -webkit-transform: translateY(-0.1em); + -ms-transform: translateY(-0.1em); + transform: translateY(-0.1em); } -.c3.fi-margin-top-insetXl { - margin-top: 16px; +.c3 > .fi-button_icon--right > .fi-icon { + margin-right: 0; + margin-left: 8px; } -.c3.fi-margin-top-insetXxl { - margin-top: 20px; +.c3.fi-button--disabled > .fi-button_icon { + cursor: not-allowed; } -.c3.fi-margin-right-xxs { - margin-right: 5px; +.c5 { + vertical-align: baseline; } -.c3.fi-margin-right-xs { - margin-right: 10px; +.c5.fi-icon { + display: inline-block; } -.c3.fi-margin-right-s { - margin-right: 15px; +.c5 .fi-icon-base-fill { + fill: currentColor; } -.c3.fi-margin-right-m { - margin-right: 20px; +.c5 .fi-icon-base-stroke { + stroke: currentColor; } -.c3.fi-margin-right-l { - margin-right: 25px; +.c5.fi-icon--cursor-pointer { + cursor: pointer; } -.c3.fi-margin-right-xl { - margin-right: 30px; +.c5.fi-icon--cursor-pointer * { + cursor: inherit; } -.c3.fi-margin-right-xxl { - margin-right: 40px; +.c1.fi-action-menu--full-width { + width: 100%; } -.c3.fi-margin-right-xxxl { - margin-right: 60px; +.c1 .fi-action-menu_button--icon-only { + min-width: 40px; + padding: 10px; } -.c3.fi-margin-right-xxxxl { - margin-right: 80px; +.c1 .fi-action-menu_button--icon-only .fi-button_icon--right .fi-icon { + margin-left: 0; } -.c3.fi-margin-right-insetXxs { - margin-right: 2px; +.c8 { + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 400; } -.c3.fi-margin-right-insetXs { - margin-right: 4px; +.c8.fi-action-menu-item { + position: relative; + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 400; + -webkit-text-decoration: none; + text-decoration: none; + color: hsl(0,0%,13%); + padding: 10px 20px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + cursor: pointer; + background: inherit; + border: none; + border-radius: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } -.c3.fi-margin-right-insetS { - margin-right: 6px; +.c8.fi-action-menu-item:active, +.c8.fi-action-menu-item:focus, +.c8.fi-action-menu-item:hover, +.c8.fi-action-menu-item:visited { + border: none; + outline: none; + color: hsl(0,0%,13%); } -.c3.fi-margin-right-insetM { +.c8.fi-action-menu-item .fi-icon { margin-right: 8px; + width: 16px; + height: 16px; + pointer-events: none; } -.c3.fi-margin-right-insetL { - margin-right: 10px; -} - -.c3.fi-margin-right-insetXl { - margin-right: 16px; -} - -.c3.fi-margin-right-insetXxl { - margin-right: 20px; -} - -.c3.fi-margin-bottom-xxs { - margin-bottom: 5px; -} - -.c3.fi-margin-bottom-xs { - margin-bottom: 10px; +.c8.fi-action-menu-item--disabled { + cursor: not-allowed; + color: hsl(202,7%,67%); } -.c3.fi-margin-bottom-s { - margin-bottom: 15px; +.c8.fi-action-menu-item--disabled:active, +.c8.fi-action-menu-item--disabled:focus, +.c8.fi-action-menu-item--disabled:hover, +.c8.fi-action-menu-item--disabled:visited { + color: hsl(202,7%,67%); } -.c3.fi-margin-bottom-m { - margin-bottom: 20px; +.c8.fi-action-menu-item--selected { + color: hsl(0,0%,100%); + background: hsl(212,63%,45%); } -.c3.fi-margin-bottom-l { - margin-bottom: 25px; +.c8.fi-action-menu-item--selected:active, +.c8.fi-action-menu-item--selected:focus, +.c8.fi-action-menu-item--selected:hover, +.c8.fi-action-menu-item--selected:visited { + -webkit-text-decoration: none; + text-decoration: none; + color: hsl(0,0%,100%); + cursor: pointer; } -.c3.fi-margin-bottom-xl { - margin-bottom: 30px; +.c8.fi-action-menu-item--selected:after { + content: ''; } -.c3.fi-margin-bottom-xxl { - margin-bottom: 40px; +.c8.fi-action-menu-item--selected.fi-action-menu-item--disabled { + cursor: not-allowed; + color: hsl(202,7%,67%); } -.c3.fi-margin-bottom-xxxl { - margin-bottom: 60px; -} - -.c3.fi-margin-bottom-xxxxl { - margin-bottom: 80px; -} - -.c3.fi-margin-bottom-insetXxs { - margin-bottom: 2px; -} - -.c3.fi-margin-bottom-insetXs { - margin-bottom: 4px; -} - -.c3.fi-margin-bottom-insetS { - margin-bottom: 6px; -} - -.c3.fi-margin-bottom-insetM { - margin-bottom: 8px; -} - -.c3.fi-margin-bottom-insetL { - margin-bottom: 10px; -} - -.c3.fi-margin-bottom-insetXl { - margin-bottom: 16px; -} - -.c3.fi-margin-bottom-insetXxl { - margin-bottom: 20px; -} - -.c3.fi-margin-left-xxs { - margin-left: 5px; -} - -.c3.fi-margin-left-xs { - margin-left: 10px; -} - -.c3.fi-margin-left-s { - margin-left: 15px; -} - -.c3.fi-margin-left-m { - margin-left: 20px; -} - -.c3.fi-margin-left-l { - margin-left: 25px; -} - -.c3.fi-margin-left-xl { - margin-left: 30px; -} - -.c3.fi-margin-left-xxl { - margin-left: 40px; -} - -.c3.fi-margin-left-xxxl { - margin-left: 60px; -} - -.c3.fi-margin-left-xxxxl { - margin-left: 80px; -} - -.c3.fi-margin-left-insetXxs { - margin-left: 2px; -} - -.c3.fi-margin-left-insetXs { - margin-left: 4px; -} - -.c3.fi-margin-left-insetS { - margin-left: 6px; -} - -.c3.fi-margin-left-insetM { - margin-left: 8px; -} - -.c3.fi-margin-left-insetL { - margin-left: 10px; -} - -.c3.fi-margin-left-insetXl { - margin-left: 16px; -} - -.c3.fi-margin-left-insetXxl { - margin-left: 20px; -} - -.c3.fi-padding-xxs { - padding: 5px; -} - -.c3.fi-padding-xs { - padding: 10px; -} - -.c3.fi-padding-s { - padding: 15px; -} - -.c3.fi-padding-m { - padding: 20px; -} - -.c3.fi-padding-l { - padding: 25px; -} - -.c3.fi-padding-xl { - padding: 30px; -} - -.c3.fi-padding-xxl { - padding: 40px; -} - -.c3.fi-padding-xxxl { - padding: 60px; -} - -.c3.fi-padding-xxxxl { - padding: 80px; -} - -.c3.fi-padding-insetXxs { - padding: 2px; -} - -.c3.fi-padding-insetXs { - padding: 4px; -} - -.c3.fi-padding-insetS { - padding: 6px; -} - -.c3.fi-padding-insetM { - padding: 8px; -} - -.c3.fi-padding-insetL { - padding: 10px; -} - -.c3.fi-padding-insetXl { - padding: 16px; -} - -.c3.fi-padding-insetXxl { - padding: 20px; -} - -.c3.fi-padding-top-xxs { - padding-top: 5px; -} - -.c3.fi-padding-top-xs { - padding-top: 10px; -} - -.c3.fi-padding-top-s { - padding-top: 15px; -} - -.c3.fi-padding-top-m { - padding-top: 20px; -} - -.c3.fi-padding-top-l { - padding-top: 25px; -} - -.c3.fi-padding-top-xl { - padding-top: 30px; -} - -.c3.fi-padding-top-xxl { - padding-top: 40px; -} - -.c3.fi-padding-top-xxxl { - padding-top: 60px; -} - -.c3.fi-padding-top-xxxxl { - padding-top: 80px; -} - -.c3.fi-padding-top-insetXxs { - padding-top: 2px; -} - -.c3.fi-padding-top-insetXs { - padding-top: 4px; -} - -.c3.fi-padding-top-insetS { - padding-top: 6px; -} - -.c3.fi-padding-top-insetM { - padding-top: 8px; -} - -.c3.fi-padding-top-insetL { - padding-top: 10px; -} - -.c3.fi-padding-top-insetXl { - padding-top: 16px; -} - -.c3.fi-padding-top-insetXxl { - padding-top: 20px; -} - -.c3.fi-padding-right-xxs { - padding-right: 5px; -} - -.c3.fi-padding-right-xs { - padding-right: 10px; -} - -.c3.fi-padding-right-s { - padding-right: 15px; -} - -.c3.fi-padding-right-m { - padding-right: 20px; -} - -.c3.fi-padding-right-l { - padding-right: 25px; -} - -.c3.fi-padding-right-xl { - padding-right: 30px; -} - -.c3.fi-padding-right-xxl { - padding-right: 40px; -} - -.c3.fi-padding-right-xxxl { - padding-right: 60px; -} - -.c3.fi-padding-right-xxxxl { - padding-right: 80px; -} - -.c3.fi-padding-right-insetXxs { - padding-right: 2px; -} - -.c3.fi-padding-right-insetXs { - padding-right: 4px; -} - -.c3.fi-padding-right-insetS { - padding-right: 6px; -} - -.c3.fi-padding-right-insetM { - padding-right: 8px; -} - -.c3.fi-padding-right-insetL { - padding-right: 10px; -} - -.c3.fi-padding-right-insetXl { - padding-right: 16px; -} - -.c3.fi-padding-right-insetXxl { - padding-right: 20px; -} - -.c3.fi-padding-bottom-xxs { - padding-bottom: 5px; -} - -.c3.fi-padding-bottom-xs { - padding-bottom: 10px; -} - -.c3.fi-padding-bottom-s { - padding-bottom: 15px; -} - -.c3.fi-padding-bottom-m { - padding-bottom: 20px; -} - -.c3.fi-padding-bottom-l { - padding-bottom: 25px; -} - -.c3.fi-padding-bottom-xl { - padding-bottom: 30px; -} - -.c3.fi-padding-bottom-xxl { - padding-bottom: 40px; -} - -.c3.fi-padding-bottom-xxxl { - padding-bottom: 60px; -} - -.c3.fi-padding-bottom-xxxxl { - padding-bottom: 80px; -} - -.c3.fi-padding-bottom-insetXxs { - padding-bottom: 2px; -} - -.c3.fi-padding-bottom-insetXs { - padding-bottom: 4px; -} - -.c3.fi-padding-bottom-insetS { - padding-bottom: 6px; -} - -.c3.fi-padding-bottom-insetM { - padding-bottom: 8px; -} - -.c3.fi-padding-bottom-insetL { - padding-bottom: 10px; -} - -.c3.fi-padding-bottom-insetXl { - padding-bottom: 16px; -} - -.c3.fi-padding-bottom-insetXxl { - padding-bottom: 20px; -} - -.c3.fi-padding-left-xxs { - padding-left: 5px; -} - -.c3.fi-padding-left-xs { - padding-left: 10px; -} - -.c3.fi-padding-left-s { - padding-left: 15px; -} - -.c3.fi-padding-left-m { - padding-left: 20px; -} - -.c3.fi-padding-left-l { - padding-left: 25px; -} - -.c3.fi-padding-left-xl { - padding-left: 30px; -} - -.c3.fi-padding-left-xxl { - padding-left: 40px; -} - -.c3.fi-padding-left-xxxl { - padding-left: 60px; -} - -.c3.fi-padding-left-xxxxl { - padding-left: 80px; -} - -.c3.fi-padding-left-insetXxs { - padding-left: 2px; -} - -.c3.fi-padding-left-insetXs { - padding-left: 4px; -} - -.c3.fi-padding-left-insetS { - padding-left: 6px; -} - -.c3.fi-padding-left-insetM { - padding-left: 8px; -} - -.c3.fi-padding-left-insetL { - padding-left: 10px; -} - -.c3.fi-padding-left-insetXl { - padding-left: 16px; -} - -.c3.fi-padding-left-insetXxl { - padding-left: 20px; -} - -.c3:focus { - position: relative; - outline: 3px solid transparent; -} - -.c3:focus::after { - content: ''; - position: absolute; - pointer-events: none; - top: -2px; - right: -2px; - bottom: -2px; - left: -2px; - border-radius: 2px; - background-color: transparent; - border: 0px solid hsl(0,0%,100%); - box-sizing: border-box; - box-shadow: 0 0 0 2px hsl(196,77%,44%); - z-index: 9999; -} - -.c3:hover { - background: linear-gradient(0deg,hsl(212,63%,45%) 0%,hsl(212,63%,49%) 100%); - outline: 2px solid transparent; -} - -.c3:active { - background: hsl(212,63%,37%); -} - -.c3.fi-button--disabled, -.c3[disabled], -.c3:disabled { - text-shadow: 0 1px 1px rgba(33,33,33,0.5); - background: linear-gradient(0deg,hsl(202,7%,67%) 0%,hsl(202,7%,80%) 100%); - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - cursor: not-allowed; -} - -.c3.fi-button--disabled::after { - border: none; - box-shadow: none; -} - -.c3.fi-button--fullwidth { - display: block; - width: 100%; -} - -.c3.fi-button--inverted { - background: none; - background-color: hsl(212,63%,45%); - border: 1px solid hsl(0,0%,100%); - text-shadow: none; -} - -.c3.fi-button--inverted:hover { - background: linear-gradient(-180deg,hsla(0,0%,100%,0.1) 0%,hsla(0,0%,100%,0) 100%); -} - -.c3.fi-button--inverted:active { - background: none; - background-color: hsl(212,63%,45%); -} - -.c3.fi-button--inverted.fi-button--disabled, -.c3.fi-button--inverted[disabled], -.c3.fi-button--inverted:disabled { - opacity: 0.41; - background: none; - background-color: none; -} - -.c3.fi-button--secondary { - color: hsl(212,63%,45%); - background: none; - background-color: hsl(0,0%,100%); - border: 1px solid hsl(212,63%,45%); - text-shadow: none; -} - -.c3.fi-button--secondary:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); -} - -.c3.fi-button--secondary:active { - background: none; - background-color: hsl(202,7%,93%); -} - -.c3.fi-button--secondary.fi-button--disabled, -.c3.fi-button--secondary[disabled], -.c3.fi-button--secondary:disabled { - color: hsl(202,7%,67%); - text-shadow: none; - background: none; - background-color: hsl(212,63%,98%); - border-color: hsl(202,7%,67%); -} - -.c3.fi-button--secondary-noborder { - color: hsl(212,63%,45%); - background: none; - background-color: hsl(0,0%,100%); - border: 1px solid hsl(212,63%,45%); - text-shadow: none; - border: none; - background-color: transparent; -} - -.c3.fi-button--secondary-noborder:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); -} - -.c3.fi-button--secondary-noborder:active { - background: none; - background-color: hsl(202,7%,93%); -} - -.c3.fi-button--secondary-noborder.fi-button--disabled, -.c3.fi-button--secondary-noborder[disabled], -.c3.fi-button--secondary-noborder:disabled { - color: hsl(202,7%,67%); - text-shadow: none; - background: none; - background-color: hsl(212,63%,98%); - border-color: hsl(202,7%,67%); -} - -.c3.fi-button--secondary-light { - color: hsl(212,63%,45%); - color: hsl(212,63%,45%); - background: none; - background-color: hsl(0,0%,100%); - border: 1px solid hsl(212,63%,45%); - text-shadow: none; - background: linear-gradient(0deg,hsl(215,100%,95%),hsl(215,100%,97%)); - border: none; -} - -.c3.fi-button--secondary-light:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); -} - -.c3.fi-button--secondary-light:active { - background: none; - background-color: hsl(202,7%,93%); -} - -.c3.fi-button--secondary-light.fi-button--disabled, -.c3.fi-button--secondary-light[disabled], -.c3.fi-button--secondary-light:disabled { - color: hsl(202,7%,67%); - text-shadow: none; - background: none; - background-color: hsl(212,63%,98%); - border-color: hsl(202,7%,67%); -} - -.c3.fi-button--secondary-light:hover { - background: linear-gradient(0deg,hsl(215,100%,97%),hsl(212,63%,98%)); -} - -.c3.fi-button--secondary-light:active { - background: linear-gradient(0deg,hsl(202,7%,93%),hsl(202,7%,97%)); -} - -.c3.fi-button--secondary-light.fi-button--disabled, -.c3.fi-button--secondary-light[disabled], -.c3.fi-button--secondary-light:disabled { - color: hsl(202,7%,67%); - background: none; - background-color: hsl(202,7%,97%); -} - -.c3 > .fi-button_icon > .fi-icon { - width: 16px; - height: 16px; - margin-right: 8px; - vertical-align: middle; - -webkit-transform: translateY(-0.1em); - -ms-transform: translateY(-0.1em); - transform: translateY(-0.1em); -} - -.c3 > .fi-button_icon--right > .fi-icon { - margin-right: 0; - margin-left: 8px; -} - -.c3.fi-button--disabled > .fi-button_icon { - cursor: not-allowed; -} - -.c5 { - vertical-align: baseline; -} - -.c5.fi-icon { - display: inline-block; -} - -.c5 .fi-icon-base-fill { - fill: currentColor; -} - -.c5 .fi-icon-base-stroke { - stroke: currentColor; -} - -.c5.fi-icon--cursor-pointer { - cursor: pointer; -} - -.c5.fi-icon--cursor-pointer * { - cursor: inherit; -} - -.c1.fi-action-menu--full-width { - width: 100%; -} - -.c1 .fi-action-menu_button--icon-only { - min-width: 40px; - padding: 10px; -} - -.c1 .fi-action-menu_button--icon-only .fi-button_icon--right .fi-icon { - margin-left: 0; -} - -.c8 { - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 400; -} - -.c8.fi-action-menu-item { - position: relative; - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 400; - -webkit-text-decoration: none; - text-decoration: none; - color: hsl(0,0%,13%); - padding: 10px 20px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - cursor: pointer; - background: inherit; - border: none; - border-radius: 0; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c8.fi-action-menu-item:active, -.c8.fi-action-menu-item:focus, -.c8.fi-action-menu-item:hover, -.c8.fi-action-menu-item:visited { - border: none; - outline: none; - color: hsl(0,0%,13%); -} - -.c8.fi-action-menu-item .fi-icon { - margin-right: 8px; - width: 16px; - height: 16px; - pointer-events: none; -} - -.c8.fi-action-menu-item--disabled { - cursor: not-allowed; - color: hsl(202,7%,67%); -} - -.c8.fi-action-menu-item--disabled:active, -.c8.fi-action-menu-item--disabled:focus, -.c8.fi-action-menu-item--disabled:hover, -.c8.fi-action-menu-item--disabled:visited { - color: hsl(202,7%,67%); -} - -.c8.fi-action-menu-item--selected { - color: hsl(0,0%,100%); - background: hsl(212,63%,45%); -} - -.c8.fi-action-menu-item--selected:active, -.c8.fi-action-menu-item--selected:focus, -.c8.fi-action-menu-item--selected:hover, -.c8.fi-action-menu-item--selected:visited { - -webkit-text-decoration: none; - text-decoration: none; - color: hsl(0,0%,100%); - cursor: pointer; -} - -.c8.fi-action-menu-item--selected:after { - content: ''; -} - -.c8.fi-action-menu-item--selected.fi-action-menu-item--disabled { - cursor: not-allowed; - color: hsl(202,7%,67%); -} - -.c9.fi-action-menu-divider { - height: 17px; - min-height: 17px; - padding-left: 15px; - padding-right: 15px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; -} - -.c9.fi-action-menu-divider .fi-action-menu-divider_line { - height: 1px; - width: 100%; - background-color: hsl(202,7%,80%); -} - -@media (forced-colors:active) { - .c8.fi-action-menu-item--disabled { - color: GrayText; - } -} - -@media (forced-colors:active) { - .c8.fi-action-menu-item--selected:after { - position: absolute; - left: 1px; - right: 1px; - top: 1px; - bottom: 1px; - border: solid 3px Highlight; - } -} - -@media (forced-colors:active) { - .c8.fi-action-menu-item--selected.fi-action-menu-item--disabled { - color: GrayText; - } -} - -@media (forced-colors:active) { - .c9.fi-action-menu-divider .fi-action-menu-divider_line { - background-color: Highlight; - } -} - - -
-
- -
- -
- -`; - -exports[`Disabled ActionMenu should match snapshot 1`] = ` -.c2 { - line-height: 1.15; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - margin: 0; - overflow: visible; - text-transform: none; - -webkit-appearance: button; - margin: 0; - padding: 0; - border: 0; - box-sizing: border-box; - font: 100% inherit; - line-height: 1; - text-align: left; - -webkit-text-decoration: none; - text-decoration: none; - vertical-align: baseline; - color: inherit; - background: none; - cursor: inherit; - display: inline-block; - max-width: 100%; - cursor: pointer; -} - -.c2:-moz-focusring { - outline: 1px dotted ButtonText; -} - -.c2::-moz-focus-inner { - border-style: none; - padding: 0; -} - -.c2::-webkit-file-upload-button { - -webkit-appearance: button; - font: inherit; -} - -.c2::-webkit-inner-spin-button { - height: auto; -} - -.c2::-webkit-outer-spin-button { - height: auto; -} - -.c2::before, -.c2::after { - box-sizing: border-box; -} - -.c0 { - line-height: 1.15; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - margin: 0; - padding: 0; - border: 0; - box-sizing: border-box; - font: 100% inherit; - line-height: 1; - text-align: left; - -webkit-text-decoration: none; - text-decoration: none; - vertical-align: baseline; - color: inherit; - background: none; - cursor: inherit; - display: block; - max-width: 100%; - word-wrap: normal; - word-break: normal; - white-space: normal; -} - -.c0::before, -.c0::after { - box-sizing: border-box; -} - -.c6 { - line-height: 1.15; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - margin: 0; - padding: 0; - border: 0; - box-sizing: border-box; - font: 100% inherit; - line-height: 1; - text-align: left; - -webkit-text-decoration: none; - text-decoration: none; - vertical-align: baseline; - color: inherit; - background: none; - cursor: inherit; - display: block; - max-width: 100%; - word-wrap: normal; - word-break: normal; - white-space: normal; -} - -.c6::before, -.c6::after { - box-sizing: border-box; -} - -.c4 { - line-height: 1.15; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - margin: 0; - padding: 0; - border: 0; - box-sizing: border-box; - font: 100% inherit; - line-height: 1; - text-align: left; - -webkit-text-decoration: none; - text-decoration: none; - vertical-align: baseline; - color: inherit; - background: none; - cursor: inherit; - display: inline; - max-width: 100%; - word-wrap: normal; - word-break: normal; - white-space: normal; -} - -.c4::before, -.c4::after { - box-sizing: border-box; -} - -.c7 { - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 400; -} - -.c7.fi-action-menu-popover { - background-color: hsl(0,0%,100%); - box-shadow: 0px 4px 8px 0px hsla(0,0%,13%,0.14); - border: 1px solid hsl(0,0%,58%); - border-radius: 2px; - padding-top: 8px; - padding-bottom: 8px; - z-index: 888; -} - -.c7.fi-action-menu-popover--hidden { - visibility: hidden; -} - -.c7 .fi-action-menu-popover_list { - margin: 0; - padding-left: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - list-style-type: none; - overflow-y: auto; - max-height: 265px; -} - -.c7 .fi-action-menu-popover_list:focus { - outline: none; -} - -.c7 .fi-action-menu-popover_popper-arrow::before, -.c7 .fi-action-menu-popover_popper-arrow::after { - content: ''; - position: absolute; - left: -9px; - height: 0; - width: 0; - border: solid transparent; - pointer-events: none; -} - -.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='bottom-end'] { - bottom: 100%; -} - -.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='bottom-end']::before { - border-bottom-color: hsl(0,0%,58%); - border-width: 9px; - margin-right: -9px; - bottom: 100%; -} - -.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='bottom-end']::after { - border-bottom-color: hsl(0,0%,100%); - border-width: 8px; - margin-right: -9px; - left: -8px; - bottom: 100%; -} - -.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='top-end'] { - top: 100%; -} - -.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='top-end']::before { - border-top-color: hsl(0,0%,58%); - border-width: 9px; - margin-right: -9px; -} - -.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='top-end']::after { - border-top-color: hsl(0,0%,100%); - border-width: 8px; - margin-right: -9px; - left: -8px; -} - -.c3 { - color: hsl(0,0%,13%); - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 600; - font-size: 14px; - line-height: 20px; - padding: 10px 20px; - min-height: 40px; - color: hsl(0,0%,100%); - background: linear-gradient(0deg,hsl(212,63%,37%) 0%,hsl(212,63%,45%) 100%); - border-radius: 2px; - text-align: center; - text-shadow: 0 1px 1px hsla(214,100%,24%,0.5); - cursor: pointer; - border: 1px solid transparent; -} - -.c3.fi-margin-xxs { - margin: 5px; -} - -.c3.fi-margin-xs { - margin: 10px; -} - -.c3.fi-margin-s { - margin: 15px; -} - -.c3.fi-margin-m { - margin: 20px; -} - -.c3.fi-margin-l { - margin: 25px; -} - -.c3.fi-margin-xl { - margin: 30px; -} - -.c3.fi-margin-xxl { - margin: 40px; -} - -.c3.fi-margin-xxxl { - margin: 60px; -} - -.c3.fi-margin-xxxxl { - margin: 80px; -} - -.c3.fi-margin-insetXxs { - margin: 2px; -} - -.c3.fi-margin-insetXs { - margin: 4px; -} - -.c3.fi-margin-insetS { - margin: 6px; -} - -.c3.fi-margin-insetM { - margin: 8px; -} - -.c3.fi-margin-insetL { - margin: 10px; -} - -.c3.fi-margin-insetXl { - margin: 16px; -} - -.c3.fi-margin-insetXxl { - margin: 20px; -} - -.c3.fi-margin-top-xxs { - margin-top: 5px; -} - -.c3.fi-margin-top-xs { - margin-top: 10px; -} - -.c3.fi-margin-top-s { - margin-top: 15px; -} - -.c3.fi-margin-top-m { - margin-top: 20px; -} - -.c3.fi-margin-top-l { - margin-top: 25px; -} - -.c3.fi-margin-top-xl { - margin-top: 30px; -} - -.c3.fi-margin-top-xxl { - margin-top: 40px; -} - -.c3.fi-margin-top-xxxl { - margin-top: 60px; -} - -.c3.fi-margin-top-xxxxl { - margin-top: 80px; -} - -.c3.fi-margin-top-insetXxs { - margin-top: 2px; -} - -.c3.fi-margin-top-insetXs { - margin-top: 4px; -} - -.c3.fi-margin-top-insetS { - margin-top: 6px; -} - -.c3.fi-margin-top-insetM { - margin-top: 8px; -} - -.c3.fi-margin-top-insetL { - margin-top: 10px; -} - -.c3.fi-margin-top-insetXl { - margin-top: 16px; -} - -.c3.fi-margin-top-insetXxl { - margin-top: 20px; -} - -.c3.fi-margin-right-xxs { - margin-right: 5px; -} - -.c3.fi-margin-right-xs { - margin-right: 10px; -} - -.c3.fi-margin-right-s { - margin-right: 15px; -} - -.c3.fi-margin-right-m { - margin-right: 20px; -} - -.c3.fi-margin-right-l { - margin-right: 25px; -} - -.c3.fi-margin-right-xl { - margin-right: 30px; -} - -.c3.fi-margin-right-xxl { - margin-right: 40px; -} - -.c3.fi-margin-right-xxxl { - margin-right: 60px; -} - -.c3.fi-margin-right-xxxxl { - margin-right: 80px; -} - -.c3.fi-margin-right-insetXxs { - margin-right: 2px; -} - -.c3.fi-margin-right-insetXs { - margin-right: 4px; -} - -.c3.fi-margin-right-insetS { - margin-right: 6px; -} - -.c3.fi-margin-right-insetM { - margin-right: 8px; -} - -.c3.fi-margin-right-insetL { - margin-right: 10px; -} - -.c3.fi-margin-right-insetXl { - margin-right: 16px; -} - -.c3.fi-margin-right-insetXxl { - margin-right: 20px; -} - -.c3.fi-margin-bottom-xxs { - margin-bottom: 5px; -} - -.c3.fi-margin-bottom-xs { - margin-bottom: 10px; -} - -.c3.fi-margin-bottom-s { - margin-bottom: 15px; -} - -.c3.fi-margin-bottom-m { - margin-bottom: 20px; -} - -.c3.fi-margin-bottom-l { - margin-bottom: 25px; -} - -.c3.fi-margin-bottom-xl { - margin-bottom: 30px; -} - -.c3.fi-margin-bottom-xxl { - margin-bottom: 40px; -} - -.c3.fi-margin-bottom-xxxl { - margin-bottom: 60px; -} - -.c3.fi-margin-bottom-xxxxl { - margin-bottom: 80px; -} - -.c3.fi-margin-bottom-insetXxs { - margin-bottom: 2px; -} - -.c3.fi-margin-bottom-insetXs { - margin-bottom: 4px; -} - -.c3.fi-margin-bottom-insetS { - margin-bottom: 6px; -} - -.c3.fi-margin-bottom-insetM { - margin-bottom: 8px; -} - -.c3.fi-margin-bottom-insetL { - margin-bottom: 10px; -} - -.c3.fi-margin-bottom-insetXl { - margin-bottom: 16px; -} - -.c3.fi-margin-bottom-insetXxl { - margin-bottom: 20px; -} - -.c3.fi-margin-left-xxs { - margin-left: 5px; -} - -.c3.fi-margin-left-xs { - margin-left: 10px; -} - -.c3.fi-margin-left-s { - margin-left: 15px; -} - -.c3.fi-margin-left-m { - margin-left: 20px; -} - -.c3.fi-margin-left-l { - margin-left: 25px; -} - -.c3.fi-margin-left-xl { - margin-left: 30px; -} - -.c3.fi-margin-left-xxl { - margin-left: 40px; -} - -.c3.fi-margin-left-xxxl { - margin-left: 60px; -} - -.c3.fi-margin-left-xxxxl { - margin-left: 80px; -} - -.c3.fi-margin-left-insetXxs { - margin-left: 2px; -} - -.c3.fi-margin-left-insetXs { - margin-left: 4px; -} - -.c3.fi-margin-left-insetS { - margin-left: 6px; -} - -.c3.fi-margin-left-insetM { - margin-left: 8px; -} - -.c3.fi-margin-left-insetL { - margin-left: 10px; -} - -.c3.fi-margin-left-insetXl { - margin-left: 16px; -} - -.c3.fi-margin-left-insetXxl { - margin-left: 20px; -} - -.c3.fi-padding-xxs { - padding: 5px; -} - -.c3.fi-padding-xs { - padding: 10px; -} - -.c3.fi-padding-s { - padding: 15px; -} - -.c3.fi-padding-m { - padding: 20px; -} - -.c3.fi-padding-l { - padding: 25px; -} - -.c3.fi-padding-xl { - padding: 30px; -} - -.c3.fi-padding-xxl { - padding: 40px; -} - -.c3.fi-padding-xxxl { - padding: 60px; -} - -.c3.fi-padding-xxxxl { - padding: 80px; -} - -.c3.fi-padding-insetXxs { - padding: 2px; -} - -.c3.fi-padding-insetXs { - padding: 4px; -} - -.c3.fi-padding-insetS { - padding: 6px; -} - -.c3.fi-padding-insetM { - padding: 8px; -} - -.c3.fi-padding-insetL { - padding: 10px; -} - -.c3.fi-padding-insetXl { - padding: 16px; -} - -.c3.fi-padding-insetXxl { - padding: 20px; -} - -.c3.fi-padding-top-xxs { - padding-top: 5px; -} - -.c3.fi-padding-top-xs { - padding-top: 10px; -} - -.c3.fi-padding-top-s { - padding-top: 15px; -} - -.c3.fi-padding-top-m { - padding-top: 20px; -} - -.c3.fi-padding-top-l { - padding-top: 25px; -} - -.c3.fi-padding-top-xl { - padding-top: 30px; -} - -.c3.fi-padding-top-xxl { - padding-top: 40px; -} - -.c3.fi-padding-top-xxxl { - padding-top: 60px; -} - -.c3.fi-padding-top-xxxxl { - padding-top: 80px; -} - -.c3.fi-padding-top-insetXxs { - padding-top: 2px; -} - -.c3.fi-padding-top-insetXs { - padding-top: 4px; -} - -.c3.fi-padding-top-insetS { - padding-top: 6px; -} - -.c3.fi-padding-top-insetM { - padding-top: 8px; -} - -.c3.fi-padding-top-insetL { - padding-top: 10px; -} - -.c3.fi-padding-top-insetXl { - padding-top: 16px; -} - -.c3.fi-padding-top-insetXxl { - padding-top: 20px; -} - -.c3.fi-padding-right-xxs { - padding-right: 5px; -} - -.c3.fi-padding-right-xs { - padding-right: 10px; -} - -.c3.fi-padding-right-s { - padding-right: 15px; -} - -.c3.fi-padding-right-m { - padding-right: 20px; -} - -.c3.fi-padding-right-l { - padding-right: 25px; -} - -.c3.fi-padding-right-xl { - padding-right: 30px; -} - -.c3.fi-padding-right-xxl { - padding-right: 40px; -} - -.c3.fi-padding-right-xxxl { - padding-right: 60px; -} - -.c3.fi-padding-right-xxxxl { - padding-right: 80px; -} - -.c3.fi-padding-right-insetXxs { - padding-right: 2px; -} - -.c3.fi-padding-right-insetXs { - padding-right: 4px; -} - -.c3.fi-padding-right-insetS { - padding-right: 6px; -} - -.c3.fi-padding-right-insetM { - padding-right: 8px; -} - -.c3.fi-padding-right-insetL { - padding-right: 10px; -} - -.c3.fi-padding-right-insetXl { - padding-right: 16px; -} - -.c3.fi-padding-right-insetXxl { - padding-right: 20px; -} - -.c3.fi-padding-bottom-xxs { - padding-bottom: 5px; -} - -.c3.fi-padding-bottom-xs { - padding-bottom: 10px; -} - -.c3.fi-padding-bottom-s { - padding-bottom: 15px; -} - -.c3.fi-padding-bottom-m { - padding-bottom: 20px; -} - -.c3.fi-padding-bottom-l { - padding-bottom: 25px; -} - -.c3.fi-padding-bottom-xl { - padding-bottom: 30px; -} - -.c3.fi-padding-bottom-xxl { - padding-bottom: 40px; -} - -.c3.fi-padding-bottom-xxxl { - padding-bottom: 60px; -} - -.c3.fi-padding-bottom-xxxxl { - padding-bottom: 80px; -} - -.c3.fi-padding-bottom-insetXxs { - padding-bottom: 2px; -} - -.c3.fi-padding-bottom-insetXs { - padding-bottom: 4px; -} - -.c3.fi-padding-bottom-insetS { - padding-bottom: 6px; -} - -.c3.fi-padding-bottom-insetM { - padding-bottom: 8px; -} - -.c3.fi-padding-bottom-insetL { - padding-bottom: 10px; -} - -.c3.fi-padding-bottom-insetXl { - padding-bottom: 16px; -} - -.c3.fi-padding-bottom-insetXxl { - padding-bottom: 20px; -} - -.c3.fi-padding-left-xxs { - padding-left: 5px; -} - -.c3.fi-padding-left-xs { - padding-left: 10px; -} - -.c3.fi-padding-left-s { - padding-left: 15px; -} - -.c3.fi-padding-left-m { - padding-left: 20px; -} - -.c3.fi-padding-left-l { - padding-left: 25px; -} - -.c3.fi-padding-left-xl { - padding-left: 30px; -} - -.c3.fi-padding-left-xxl { - padding-left: 40px; -} - -.c3.fi-padding-left-xxxl { - padding-left: 60px; -} - -.c3.fi-padding-left-xxxxl { - padding-left: 80px; -} - -.c3.fi-padding-left-insetXxs { - padding-left: 2px; -} - -.c3.fi-padding-left-insetXs { - padding-left: 4px; -} - -.c3.fi-padding-left-insetS { - padding-left: 6px; -} - -.c3.fi-padding-left-insetM { - padding-left: 8px; -} - -.c3.fi-padding-left-insetL { - padding-left: 10px; -} - -.c3.fi-padding-left-insetXl { - padding-left: 16px; -} - -.c3.fi-padding-left-insetXxl { - padding-left: 20px; -} - -.c3:focus { - position: relative; - outline: 3px solid transparent; -} - -.c3:focus::after { - content: ''; - position: absolute; - pointer-events: none; - top: -2px; - right: -2px; - bottom: -2px; - left: -2px; - border-radius: 2px; - background-color: transparent; - border: 0px solid hsl(0,0%,100%); - box-sizing: border-box; - box-shadow: 0 0 0 2px hsl(196,77%,44%); - z-index: 9999; -} - -.c3:hover { - background: linear-gradient(0deg,hsl(212,63%,45%) 0%,hsl(212,63%,49%) 100%); - outline: 2px solid transparent; -} - -.c3:active { - background: hsl(212,63%,37%); -} - -.c3.fi-button--disabled, -.c3[disabled], -.c3:disabled { - text-shadow: 0 1px 1px rgba(33,33,33,0.5); - background: linear-gradient(0deg,hsl(202,7%,67%) 0%,hsl(202,7%,80%) 100%); - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - cursor: not-allowed; -} - -.c3.fi-button--disabled::after { - border: none; - box-shadow: none; -} - -.c3.fi-button--fullwidth { - display: block; - width: 100%; -} - -.c3.fi-button--inverted { - background: none; - background-color: hsl(212,63%,45%); - border: 1px solid hsl(0,0%,100%); - text-shadow: none; -} - -.c3.fi-button--inverted:hover { - background: linear-gradient(-180deg,hsla(0,0%,100%,0.1) 0%,hsla(0,0%,100%,0) 100%); -} - -.c3.fi-button--inverted:active { - background: none; - background-color: hsl(212,63%,45%); -} - -.c3.fi-button--inverted.fi-button--disabled, -.c3.fi-button--inverted[disabled], -.c3.fi-button--inverted:disabled { - opacity: 0.41; - background: none; - background-color: none; -} - -.c3.fi-button--secondary { - color: hsl(212,63%,45%); - background: none; - background-color: hsl(0,0%,100%); - border: 1px solid hsl(212,63%,45%); - text-shadow: none; -} - -.c3.fi-button--secondary:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); -} - -.c3.fi-button--secondary:active { - background: none; - background-color: hsl(202,7%,93%); -} - -.c3.fi-button--secondary.fi-button--disabled, -.c3.fi-button--secondary[disabled], -.c3.fi-button--secondary:disabled { - color: hsl(202,7%,67%); - text-shadow: none; - background: none; - background-color: hsl(212,63%,98%); - border-color: hsl(202,7%,67%); -} - -.c3.fi-button--secondary-noborder { - color: hsl(212,63%,45%); - background: none; - background-color: hsl(0,0%,100%); - border: 1px solid hsl(212,63%,45%); - text-shadow: none; - border: none; - background-color: transparent; -} - -.c3.fi-button--secondary-noborder:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); -} - -.c3.fi-button--secondary-noborder:active { - background: none; - background-color: hsl(202,7%,93%); -} - -.c3.fi-button--secondary-noborder.fi-button--disabled, -.c3.fi-button--secondary-noborder[disabled], -.c3.fi-button--secondary-noborder:disabled { - color: hsl(202,7%,67%); - text-shadow: none; - background: none; - background-color: hsl(212,63%,98%); - border-color: hsl(202,7%,67%); -} - -.c3.fi-button--secondary-light { - color: hsl(212,63%,45%); - color: hsl(212,63%,45%); - background: none; - background-color: hsl(0,0%,100%); - border: 1px solid hsl(212,63%,45%); - text-shadow: none; - background: linear-gradient(0deg,hsl(215,100%,95%),hsl(215,100%,97%)); - border: none; -} - -.c3.fi-button--secondary-light:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); -} - -.c3.fi-button--secondary-light:active { - background: none; - background-color: hsl(202,7%,93%); -} - -.c3.fi-button--secondary-light.fi-button--disabled, -.c3.fi-button--secondary-light[disabled], -.c3.fi-button--secondary-light:disabled { - color: hsl(202,7%,67%); - text-shadow: none; - background: none; - background-color: hsl(212,63%,98%); - border-color: hsl(202,7%,67%); -} - -.c3.fi-button--secondary-light:hover { - background: linear-gradient(0deg,hsl(215,100%,97%),hsl(212,63%,98%)); -} - -.c3.fi-button--secondary-light:active { - background: linear-gradient(0deg,hsl(202,7%,93%),hsl(202,7%,97%)); -} - -.c3.fi-button--secondary-light.fi-button--disabled, -.c3.fi-button--secondary-light[disabled], -.c3.fi-button--secondary-light:disabled { - color: hsl(202,7%,67%); - background: none; - background-color: hsl(202,7%,97%); -} - -.c3 > .fi-button_icon > .fi-icon { - width: 16px; - height: 16px; - margin-right: 8px; - vertical-align: middle; - -webkit-transform: translateY(-0.1em); - -ms-transform: translateY(-0.1em); - transform: translateY(-0.1em); -} - -.c3 > .fi-button_icon--right > .fi-icon { - margin-right: 0; - margin-left: 8px; -} - -.c3.fi-button--disabled > .fi-button_icon { - cursor: not-allowed; -} - -.c5 { - vertical-align: baseline; -} - -.c5.fi-icon { - display: inline-block; -} - -.c5 .fi-icon-base-fill { - fill: currentColor; -} - -.c5 .fi-icon-base-stroke { - stroke: currentColor; -} - -.c5.fi-icon--cursor-pointer { - cursor: pointer; -} - -.c5.fi-icon--cursor-pointer * { - cursor: inherit; -} - -.c1.fi-action-menu--full-width { - width: 100%; -} - -.c1 .fi-action-menu_button--icon-only { - min-width: 40px; - padding: 10px; -} - -.c1 .fi-action-menu_button--icon-only .fi-button_icon--right .fi-icon { - margin-left: 0; -} - -.c8 { - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 400; -} - -.c8.fi-action-menu-item { - position: relative; - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 400; - -webkit-text-decoration: none; - text-decoration: none; - color: hsl(0,0%,13%); - padding: 10px 20px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - cursor: pointer; - background: inherit; - border: none; - border-radius: 0; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c8.fi-action-menu-item:active, -.c8.fi-action-menu-item:focus, -.c8.fi-action-menu-item:hover, -.c8.fi-action-menu-item:visited { - border: none; - outline: none; - color: hsl(0,0%,13%); -} - -.c8.fi-action-menu-item .fi-icon { - margin-right: 8px; - width: 16px; - height: 16px; - pointer-events: none; -} - -.c8.fi-action-menu-item--disabled { - cursor: not-allowed; - color: hsl(202,7%,67%); -} - -.c8.fi-action-menu-item--disabled:active, -.c8.fi-action-menu-item--disabled:focus, -.c8.fi-action-menu-item--disabled:hover, -.c8.fi-action-menu-item--disabled:visited { - color: hsl(202,7%,67%); -} - -.c8.fi-action-menu-item--selected { - color: hsl(0,0%,100%); - background: hsl(212,63%,45%); -} - -.c8.fi-action-menu-item--selected:active, -.c8.fi-action-menu-item--selected:focus, -.c8.fi-action-menu-item--selected:hover, -.c8.fi-action-menu-item--selected:visited { - -webkit-text-decoration: none; - text-decoration: none; - color: hsl(0,0%,100%); - cursor: pointer; -} - -.c8.fi-action-menu-item--selected:after { - content: ''; -} - -.c8.fi-action-menu-item--selected.fi-action-menu-item--disabled { - cursor: not-allowed; - color: hsl(202,7%,67%); -} - -.c9.fi-action-menu-divider { - height: 17px; - min-height: 17px; - padding-left: 15px; - padding-right: 15px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; -} - -.c9.fi-action-menu-divider .fi-action-menu-divider_line { - height: 1px; - width: 100%; - background-color: hsl(202,7%,80%); -} - -@media (forced-colors:active) { - .c8.fi-action-menu-item--disabled { - color: GrayText; - } -} - -@media (forced-colors:active) { - .c8.fi-action-menu-item--selected:after { - position: absolute; - left: 1px; - right: 1px; - top: 1px; - bottom: 1px; - border: solid 3px Highlight; - } -} - -@media (forced-colors:active) { - .c8.fi-action-menu-item--selected.fi-action-menu-item--disabled { - color: GrayText; - } -} - -@media (forced-colors:active) { - .c9.fi-action-menu-divider .fi-action-menu-divider_line { - background-color: Highlight; - } -} - - -
-
- -
- -
- -`; - -exports[`No borders variant should match snapshot 1`] = ` -.c2 { - line-height: 1.15; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - margin: 0; - overflow: visible; - text-transform: none; - -webkit-appearance: button; - margin: 0; - padding: 0; - border: 0; - box-sizing: border-box; - font: 100% inherit; - line-height: 1; - text-align: left; - -webkit-text-decoration: none; - text-decoration: none; - vertical-align: baseline; - color: inherit; - background: none; - cursor: inherit; - display: inline-block; - max-width: 100%; - cursor: pointer; -} - -.c2:-moz-focusring { - outline: 1px dotted ButtonText; -} - -.c2::-moz-focus-inner { - border-style: none; - padding: 0; -} - -.c2::-webkit-file-upload-button { - -webkit-appearance: button; - font: inherit; -} - -.c2::-webkit-inner-spin-button { - height: auto; -} - -.c2::-webkit-outer-spin-button { - height: auto; -} - -.c2::before, -.c2::after { - box-sizing: border-box; -} - -.c0 { - line-height: 1.15; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - margin: 0; - padding: 0; - border: 0; - box-sizing: border-box; - font: 100% inherit; - line-height: 1; - text-align: left; - -webkit-text-decoration: none; - text-decoration: none; - vertical-align: baseline; - color: inherit; - background: none; - cursor: inherit; - display: block; - max-width: 100%; - word-wrap: normal; - word-break: normal; - white-space: normal; -} - -.c0::before, -.c0::after { - box-sizing: border-box; -} - -.c6 { - line-height: 1.15; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - margin: 0; - padding: 0; - border: 0; - box-sizing: border-box; - font: 100% inherit; - line-height: 1; - text-align: left; - -webkit-text-decoration: none; - text-decoration: none; - vertical-align: baseline; - color: inherit; - background: none; - cursor: inherit; - display: block; - max-width: 100%; - word-wrap: normal; - word-break: normal; - white-space: normal; -} - -.c6::before, -.c6::after { - box-sizing: border-box; -} - -.c4 { - line-height: 1.15; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - margin: 0; - padding: 0; - border: 0; - box-sizing: border-box; - font: 100% inherit; - line-height: 1; - text-align: left; - -webkit-text-decoration: none; - text-decoration: none; - vertical-align: baseline; - color: inherit; - background: none; - cursor: inherit; - display: inline; - max-width: 100%; - word-wrap: normal; - word-break: normal; - white-space: normal; -} - -.c4::before, -.c4::after { - box-sizing: border-box; -} - -.c7 { - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 400; -} - -.c7.fi-action-menu-popover { - background-color: hsl(0,0%,100%); - box-shadow: 0px 4px 8px 0px hsla(0,0%,13%,0.14); - border: 1px solid hsl(0,0%,58%); - border-radius: 2px; - padding-top: 8px; - padding-bottom: 8px; - z-index: 888; -} - -.c7.fi-action-menu-popover--hidden { - visibility: hidden; -} - -.c7 .fi-action-menu-popover_list { - margin: 0; - padding-left: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - list-style-type: none; - overflow-y: auto; - max-height: 265px; -} - -.c7 .fi-action-menu-popover_list:focus { - outline: none; -} - -.c7 .fi-action-menu-popover_popper-arrow::before, -.c7 .fi-action-menu-popover_popper-arrow::after { - content: ''; - position: absolute; - left: -9px; - height: 0; - width: 0; - border: solid transparent; - pointer-events: none; -} - -.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='bottom-end'] { - bottom: 100%; -} - -.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='bottom-end']::before { - border-bottom-color: hsl(0,0%,58%); - border-width: 9px; - margin-right: -9px; - bottom: 100%; -} - -.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='bottom-end']::after { - border-bottom-color: hsl(0,0%,100%); - border-width: 8px; - margin-right: -9px; - left: -8px; - bottom: 100%; -} - -.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='top-end'] { - top: 100%; -} - -.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='top-end']::before { - border-top-color: hsl(0,0%,58%); - border-width: 9px; - margin-right: -9px; -} - -.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='top-end']::after { - border-top-color: hsl(0,0%,100%); - border-width: 8px; - margin-right: -9px; - left: -8px; -} - -.c3 { - color: hsl(0,0%,13%); - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 600; - font-size: 14px; - line-height: 20px; - padding: 10px 20px; - min-height: 40px; - color: hsl(0,0%,100%); - background: linear-gradient(0deg,hsl(212,63%,37%) 0%,hsl(212,63%,45%) 100%); - border-radius: 2px; - text-align: center; - text-shadow: 0 1px 1px hsla(214,100%,24%,0.5); - cursor: pointer; - border: 1px solid transparent; -} - -.c3.fi-margin-xxs { - margin: 5px; -} - -.c3.fi-margin-xs { - margin: 10px; -} - -.c3.fi-margin-s { - margin: 15px; -} - -.c3.fi-margin-m { - margin: 20px; -} - -.c3.fi-margin-l { - margin: 25px; -} - -.c3.fi-margin-xl { - margin: 30px; -} - -.c3.fi-margin-xxl { - margin: 40px; -} - -.c3.fi-margin-xxxl { - margin: 60px; -} - -.c3.fi-margin-xxxxl { - margin: 80px; -} - -.c3.fi-margin-insetXxs { - margin: 2px; -} - -.c3.fi-margin-insetXs { - margin: 4px; -} - -.c3.fi-margin-insetS { - margin: 6px; -} - -.c3.fi-margin-insetM { - margin: 8px; -} - -.c3.fi-margin-insetL { - margin: 10px; -} - -.c3.fi-margin-insetXl { - margin: 16px; -} - -.c3.fi-margin-insetXxl { - margin: 20px; -} - -.c3.fi-margin-top-xxs { - margin-top: 5px; -} - -.c3.fi-margin-top-xs { - margin-top: 10px; -} - -.c3.fi-margin-top-s { - margin-top: 15px; -} - -.c3.fi-margin-top-m { - margin-top: 20px; -} - -.c3.fi-margin-top-l { - margin-top: 25px; -} - -.c3.fi-margin-top-xl { - margin-top: 30px; -} - -.c3.fi-margin-top-xxl { - margin-top: 40px; -} - -.c3.fi-margin-top-xxxl { - margin-top: 60px; -} - -.c3.fi-margin-top-xxxxl { - margin-top: 80px; -} - -.c3.fi-margin-top-insetXxs { - margin-top: 2px; -} - -.c3.fi-margin-top-insetXs { - margin-top: 4px; -} - -.c3.fi-margin-top-insetS { - margin-top: 6px; -} - -.c3.fi-margin-top-insetM { - margin-top: 8px; -} - -.c3.fi-margin-top-insetL { - margin-top: 10px; -} - -.c3.fi-margin-top-insetXl { - margin-top: 16px; -} - -.c3.fi-margin-top-insetXxl { - margin-top: 20px; -} - -.c3.fi-margin-right-xxs { - margin-right: 5px; -} - -.c3.fi-margin-right-xs { - margin-right: 10px; -} - -.c3.fi-margin-right-s { - margin-right: 15px; -} - -.c3.fi-margin-right-m { - margin-right: 20px; -} - -.c3.fi-margin-right-l { - margin-right: 25px; -} - -.c3.fi-margin-right-xl { - margin-right: 30px; -} - -.c3.fi-margin-right-xxl { - margin-right: 40px; -} - -.c3.fi-margin-right-xxxl { - margin-right: 60px; -} - -.c3.fi-margin-right-xxxxl { - margin-right: 80px; -} - -.c3.fi-margin-right-insetXxs { - margin-right: 2px; -} - -.c3.fi-margin-right-insetXs { - margin-right: 4px; -} - -.c3.fi-margin-right-insetS { - margin-right: 6px; -} - -.c3.fi-margin-right-insetM { - margin-right: 8px; -} - -.c3.fi-margin-right-insetL { - margin-right: 10px; -} - -.c3.fi-margin-right-insetXl { - margin-right: 16px; -} - -.c3.fi-margin-right-insetXxl { - margin-right: 20px; -} - -.c3.fi-margin-bottom-xxs { - margin-bottom: 5px; -} - -.c3.fi-margin-bottom-xs { - margin-bottom: 10px; -} - -.c3.fi-margin-bottom-s { - margin-bottom: 15px; -} - -.c3.fi-margin-bottom-m { - margin-bottom: 20px; -} - -.c3.fi-margin-bottom-l { - margin-bottom: 25px; -} - -.c3.fi-margin-bottom-xl { - margin-bottom: 30px; -} - -.c3.fi-margin-bottom-xxl { - margin-bottom: 40px; -} - -.c3.fi-margin-bottom-xxxl { - margin-bottom: 60px; -} - -.c3.fi-margin-bottom-xxxxl { - margin-bottom: 80px; -} - -.c3.fi-margin-bottom-insetXxs { - margin-bottom: 2px; -} - -.c3.fi-margin-bottom-insetXs { - margin-bottom: 4px; -} - -.c3.fi-margin-bottom-insetS { - margin-bottom: 6px; -} - -.c3.fi-margin-bottom-insetM { - margin-bottom: 8px; -} - -.c3.fi-margin-bottom-insetL { - margin-bottom: 10px; -} - -.c3.fi-margin-bottom-insetXl { - margin-bottom: 16px; -} - -.c3.fi-margin-bottom-insetXxl { - margin-bottom: 20px; -} - -.c3.fi-margin-left-xxs { - margin-left: 5px; -} - -.c3.fi-margin-left-xs { - margin-left: 10px; -} - -.c3.fi-margin-left-s { - margin-left: 15px; -} - -.c3.fi-margin-left-m { - margin-left: 20px; -} - -.c3.fi-margin-left-l { - margin-left: 25px; -} - -.c3.fi-margin-left-xl { - margin-left: 30px; -} - -.c3.fi-margin-left-xxl { - margin-left: 40px; -} - -.c3.fi-margin-left-xxxl { - margin-left: 60px; -} - -.c3.fi-margin-left-xxxxl { - margin-left: 80px; -} - -.c3.fi-margin-left-insetXxs { - margin-left: 2px; -} - -.c3.fi-margin-left-insetXs { - margin-left: 4px; -} - -.c3.fi-margin-left-insetS { - margin-left: 6px; -} - -.c3.fi-margin-left-insetM { - margin-left: 8px; -} - -.c3.fi-margin-left-insetL { - margin-left: 10px; -} - -.c3.fi-margin-left-insetXl { - margin-left: 16px; -} - -.c3.fi-margin-left-insetXxl { - margin-left: 20px; -} - -.c3.fi-padding-xxs { - padding: 5px; -} - -.c3.fi-padding-xs { - padding: 10px; -} - -.c3.fi-padding-s { - padding: 15px; -} - -.c3.fi-padding-m { - padding: 20px; -} - -.c3.fi-padding-l { - padding: 25px; -} - -.c3.fi-padding-xl { - padding: 30px; -} - -.c3.fi-padding-xxl { - padding: 40px; -} - -.c3.fi-padding-xxxl { - padding: 60px; -} - -.c3.fi-padding-xxxxl { - padding: 80px; -} - -.c3.fi-padding-insetXxs { - padding: 2px; -} - -.c3.fi-padding-insetXs { - padding: 4px; -} - -.c3.fi-padding-insetS { - padding: 6px; -} - -.c3.fi-padding-insetM { - padding: 8px; -} - -.c3.fi-padding-insetL { - padding: 10px; -} - -.c3.fi-padding-insetXl { - padding: 16px; -} - -.c3.fi-padding-insetXxl { - padding: 20px; -} - -.c3.fi-padding-top-xxs { - padding-top: 5px; -} - -.c3.fi-padding-top-xs { - padding-top: 10px; -} - -.c3.fi-padding-top-s { - padding-top: 15px; -} - -.c3.fi-padding-top-m { - padding-top: 20px; -} - -.c3.fi-padding-top-l { - padding-top: 25px; -} - -.c3.fi-padding-top-xl { - padding-top: 30px; -} - -.c3.fi-padding-top-xxl { - padding-top: 40px; -} - -.c3.fi-padding-top-xxxl { - padding-top: 60px; -} - -.c3.fi-padding-top-xxxxl { - padding-top: 80px; -} - -.c3.fi-padding-top-insetXxs { - padding-top: 2px; -} - -.c3.fi-padding-top-insetXs { - padding-top: 4px; -} - -.c3.fi-padding-top-insetS { - padding-top: 6px; -} - -.c3.fi-padding-top-insetM { - padding-top: 8px; -} - -.c3.fi-padding-top-insetL { - padding-top: 10px; -} - -.c3.fi-padding-top-insetXl { - padding-top: 16px; -} - -.c3.fi-padding-top-insetXxl { - padding-top: 20px; -} - -.c3.fi-padding-right-xxs { - padding-right: 5px; -} - -.c3.fi-padding-right-xs { - padding-right: 10px; -} - -.c3.fi-padding-right-s { - padding-right: 15px; -} - -.c3.fi-padding-right-m { - padding-right: 20px; -} - -.c3.fi-padding-right-l { - padding-right: 25px; -} - -.c3.fi-padding-right-xl { - padding-right: 30px; -} - -.c3.fi-padding-right-xxl { - padding-right: 40px; -} - -.c3.fi-padding-right-xxxl { - padding-right: 60px; -} - -.c3.fi-padding-right-xxxxl { - padding-right: 80px; -} - -.c3.fi-padding-right-insetXxs { - padding-right: 2px; -} - -.c3.fi-padding-right-insetXs { - padding-right: 4px; -} - -.c3.fi-padding-right-insetS { - padding-right: 6px; -} - -.c3.fi-padding-right-insetM { - padding-right: 8px; -} - -.c3.fi-padding-right-insetL { - padding-right: 10px; -} - -.c3.fi-padding-right-insetXl { - padding-right: 16px; -} - -.c3.fi-padding-right-insetXxl { - padding-right: 20px; -} - -.c3.fi-padding-bottom-xxs { - padding-bottom: 5px; -} - -.c3.fi-padding-bottom-xs { - padding-bottom: 10px; -} - -.c3.fi-padding-bottom-s { - padding-bottom: 15px; -} - -.c3.fi-padding-bottom-m { - padding-bottom: 20px; -} - -.c3.fi-padding-bottom-l { - padding-bottom: 25px; -} - -.c3.fi-padding-bottom-xl { - padding-bottom: 30px; -} - -.c3.fi-padding-bottom-xxl { - padding-bottom: 40px; -} - -.c3.fi-padding-bottom-xxxl { - padding-bottom: 60px; -} - -.c3.fi-padding-bottom-xxxxl { - padding-bottom: 80px; -} - -.c3.fi-padding-bottom-insetXxs { - padding-bottom: 2px; -} - -.c3.fi-padding-bottom-insetXs { - padding-bottom: 4px; -} - -.c3.fi-padding-bottom-insetS { - padding-bottom: 6px; -} - -.c3.fi-padding-bottom-insetM { - padding-bottom: 8px; -} - -.c3.fi-padding-bottom-insetL { - padding-bottom: 10px; -} - -.c3.fi-padding-bottom-insetXl { - padding-bottom: 16px; -} - -.c3.fi-padding-bottom-insetXxl { - padding-bottom: 20px; -} - -.c3.fi-padding-left-xxs { - padding-left: 5px; -} - -.c3.fi-padding-left-xs { - padding-left: 10px; -} - -.c3.fi-padding-left-s { - padding-left: 15px; -} - -.c3.fi-padding-left-m { - padding-left: 20px; -} - -.c3.fi-padding-left-l { - padding-left: 25px; -} - -.c3.fi-padding-left-xl { - padding-left: 30px; -} - -.c3.fi-padding-left-xxl { - padding-left: 40px; -} - -.c3.fi-padding-left-xxxl { - padding-left: 60px; -} - -.c3.fi-padding-left-xxxxl { - padding-left: 80px; -} - -.c3.fi-padding-left-insetXxs { - padding-left: 2px; -} - -.c3.fi-padding-left-insetXs { - padding-left: 4px; -} - -.c3.fi-padding-left-insetS { - padding-left: 6px; -} - -.c3.fi-padding-left-insetM { - padding-left: 8px; -} - -.c3.fi-padding-left-insetL { - padding-left: 10px; -} - -.c3.fi-padding-left-insetXl { - padding-left: 16px; -} - -.c3.fi-padding-left-insetXxl { - padding-left: 20px; -} - -.c3:focus { - position: relative; - outline: 3px solid transparent; -} - -.c3:focus::after { - content: ''; - position: absolute; - pointer-events: none; - top: -2px; - right: -2px; - bottom: -2px; - left: -2px; - border-radius: 2px; - background-color: transparent; - border: 0px solid hsl(0,0%,100%); - box-sizing: border-box; - box-shadow: 0 0 0 2px hsl(196,77%,44%); - z-index: 9999; -} - -.c3:hover { - background: linear-gradient(0deg,hsl(212,63%,45%) 0%,hsl(212,63%,49%) 100%); - outline: 2px solid transparent; -} - -.c3:active { - background: hsl(212,63%,37%); -} - -.c3.fi-button--disabled, -.c3[disabled], -.c3:disabled { - text-shadow: 0 1px 1px rgba(33,33,33,0.5); - background: linear-gradient(0deg,hsl(202,7%,67%) 0%,hsl(202,7%,80%) 100%); - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - cursor: not-allowed; -} - -.c3.fi-button--disabled::after { - border: none; - box-shadow: none; -} - -.c3.fi-button--fullwidth { - display: block; - width: 100%; -} - -.c3.fi-button--inverted { - background: none; - background-color: hsl(212,63%,45%); - border: 1px solid hsl(0,0%,100%); - text-shadow: none; -} - -.c3.fi-button--inverted:hover { - background: linear-gradient(-180deg,hsla(0,0%,100%,0.1) 0%,hsla(0,0%,100%,0) 100%); -} - -.c3.fi-button--inverted:active { - background: none; - background-color: hsl(212,63%,45%); -} - -.c3.fi-button--inverted.fi-button--disabled, -.c3.fi-button--inverted[disabled], -.c3.fi-button--inverted:disabled { - opacity: 0.41; - background: none; - background-color: none; -} - -.c3.fi-button--secondary { - color: hsl(212,63%,45%); - background: none; - background-color: hsl(0,0%,100%); - border: 1px solid hsl(212,63%,45%); - text-shadow: none; -} - -.c3.fi-button--secondary:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); -} - -.c3.fi-button--secondary:active { - background: none; - background-color: hsl(202,7%,93%); -} - -.c3.fi-button--secondary.fi-button--disabled, -.c3.fi-button--secondary[disabled], -.c3.fi-button--secondary:disabled { - color: hsl(202,7%,67%); - text-shadow: none; - background: none; - background-color: hsl(212,63%,98%); - border-color: hsl(202,7%,67%); -} - -.c3.fi-button--secondary-noborder { - color: hsl(212,63%,45%); - background: none; - background-color: hsl(0,0%,100%); - border: 1px solid hsl(212,63%,45%); - text-shadow: none; - border: none; - background-color: transparent; -} - -.c3.fi-button--secondary-noborder:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); -} - -.c3.fi-button--secondary-noborder:active { - background: none; - background-color: hsl(202,7%,93%); -} - -.c3.fi-button--secondary-noborder.fi-button--disabled, -.c3.fi-button--secondary-noborder[disabled], -.c3.fi-button--secondary-noborder:disabled { - color: hsl(202,7%,67%); - text-shadow: none; - background: none; - background-color: hsl(212,63%,98%); - border-color: hsl(202,7%,67%); -} - -.c3.fi-button--secondary-light { - color: hsl(212,63%,45%); - color: hsl(212,63%,45%); - background: none; - background-color: hsl(0,0%,100%); - border: 1px solid hsl(212,63%,45%); - text-shadow: none; - background: linear-gradient(0deg,hsl(215,100%,95%),hsl(215,100%,97%)); - border: none; -} - -.c3.fi-button--secondary-light:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); -} - -.c3.fi-button--secondary-light:active { - background: none; - background-color: hsl(202,7%,93%); -} - -.c3.fi-button--secondary-light.fi-button--disabled, -.c3.fi-button--secondary-light[disabled], -.c3.fi-button--secondary-light:disabled { - color: hsl(202,7%,67%); - text-shadow: none; - background: none; - background-color: hsl(212,63%,98%); - border-color: hsl(202,7%,67%); -} - -.c3.fi-button--secondary-light:hover { - background: linear-gradient(0deg,hsl(215,100%,97%),hsl(212,63%,98%)); -} - -.c3.fi-button--secondary-light:active { - background: linear-gradient(0deg,hsl(202,7%,93%),hsl(202,7%,97%)); -} - -.c3.fi-button--secondary-light.fi-button--disabled, -.c3.fi-button--secondary-light[disabled], -.c3.fi-button--secondary-light:disabled { - color: hsl(202,7%,67%); - background: none; - background-color: hsl(202,7%,97%); -} - -.c3 > .fi-button_icon > .fi-icon { - width: 16px; - height: 16px; - margin-right: 8px; - vertical-align: middle; - -webkit-transform: translateY(-0.1em); - -ms-transform: translateY(-0.1em); - transform: translateY(-0.1em); -} - -.c3 > .fi-button_icon--right > .fi-icon { - margin-right: 0; - margin-left: 8px; -} - -.c3.fi-button--disabled > .fi-button_icon { - cursor: not-allowed; -} - -.c5 { - vertical-align: baseline; -} - -.c5.fi-icon { - display: inline-block; -} - -.c5 .fi-icon-base-fill { - fill: currentColor; -} - -.c5 .fi-icon-base-stroke { - stroke: currentColor; -} - -.c5.fi-icon--cursor-pointer { - cursor: pointer; -} - -.c5.fi-icon--cursor-pointer * { - cursor: inherit; -} - -.c1.fi-action-menu--full-width { - width: 100%; -} - -.c1 .fi-action-menu_button--icon-only { - min-width: 40px; - padding: 10px; -} - -.c1 .fi-action-menu_button--icon-only .fi-button_icon--right .fi-icon { - margin-left: 0; -} - -.c8 { - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 400; -} - -.c8.fi-action-menu-item { - position: relative; - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 400; - -webkit-text-decoration: none; - text-decoration: none; - color: hsl(0,0%,13%); - padding: 10px 20px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - cursor: pointer; - background: inherit; - border: none; - border-radius: 0; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c8.fi-action-menu-item:active, -.c8.fi-action-menu-item:focus, -.c8.fi-action-menu-item:hover, -.c8.fi-action-menu-item:visited { - border: none; - outline: none; - color: hsl(0,0%,13%); -} - -.c8.fi-action-menu-item .fi-icon { - margin-right: 8px; - width: 16px; - height: 16px; - pointer-events: none; -} - -.c8.fi-action-menu-item--disabled { - cursor: not-allowed; - color: hsl(202,7%,67%); -} - -.c8.fi-action-menu-item--disabled:active, -.c8.fi-action-menu-item--disabled:focus, -.c8.fi-action-menu-item--disabled:hover, -.c8.fi-action-menu-item--disabled:visited { - color: hsl(202,7%,67%); -} - -.c8.fi-action-menu-item--selected { - color: hsl(0,0%,100%); - background: hsl(212,63%,45%); -} - -.c8.fi-action-menu-item--selected:active, -.c8.fi-action-menu-item--selected:focus, -.c8.fi-action-menu-item--selected:hover, -.c8.fi-action-menu-item--selected:visited { - -webkit-text-decoration: none; - text-decoration: none; - color: hsl(0,0%,100%); - cursor: pointer; -} - -.c8.fi-action-menu-item--selected:after { - content: ''; -} - -.c8.fi-action-menu-item--selected.fi-action-menu-item--disabled { - cursor: not-allowed; - color: hsl(202,7%,67%); -} - -.c9.fi-action-menu-divider { - height: 17px; - min-height: 17px; - padding-left: 15px; - padding-right: 15px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; -} - -.c9.fi-action-menu-divider .fi-action-menu-divider_line { - height: 1px; - width: 100%; - background-color: hsl(202,7%,80%); -} - -@media (forced-colors:active) { - .c8.fi-action-menu-item--disabled { - color: GrayText; - } -} - -@media (forced-colors:active) { - .c8.fi-action-menu-item--selected:after { - position: absolute; - left: 1px; - right: 1px; - top: 1px; - bottom: 1px; - border: solid 3px Highlight; - } -} - -@media (forced-colors:active) { - .c8.fi-action-menu-item--selected.fi-action-menu-item--disabled { - color: GrayText; - } -} - -@media (forced-colors:active) { - .c9.fi-action-menu-divider .fi-action-menu-divider_line { - background-color: Highlight; - } -} - - -
-
- -
- -
- -`; - -exports[`movement in ActionMenu should match snapshot 1`] = ` -.c2 { - line-height: 1.15; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - margin: 0; - overflow: visible; - text-transform: none; - -webkit-appearance: button; - margin: 0; - padding: 0; - border: 0; - box-sizing: border-box; - font: 100% inherit; - line-height: 1; - text-align: left; - -webkit-text-decoration: none; - text-decoration: none; - vertical-align: baseline; - color: inherit; - background: none; - cursor: inherit; - display: inline-block; - max-width: 100%; - cursor: pointer; -} - -.c2:-moz-focusring { - outline: 1px dotted ButtonText; -} - -.c2::-moz-focus-inner { - border-style: none; - padding: 0; -} - -.c2::-webkit-file-upload-button { - -webkit-appearance: button; - font: inherit; -} - -.c2::-webkit-inner-spin-button { - height: auto; -} - -.c2::-webkit-outer-spin-button { - height: auto; -} - -.c2::before, -.c2::after { - box-sizing: border-box; -} - -.c0 { - line-height: 1.15; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - margin: 0; - padding: 0; - border: 0; - box-sizing: border-box; - font: 100% inherit; - line-height: 1; - text-align: left; - -webkit-text-decoration: none; - text-decoration: none; - vertical-align: baseline; - color: inherit; - background: none; - cursor: inherit; - display: block; - max-width: 100%; - word-wrap: normal; - word-break: normal; - white-space: normal; -} - -.c0::before, -.c0::after { - box-sizing: border-box; -} - -.c6 { - line-height: 1.15; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - margin: 0; - padding: 0; - border: 0; - box-sizing: border-box; - font: 100% inherit; - line-height: 1; - text-align: left; - -webkit-text-decoration: none; - text-decoration: none; - vertical-align: baseline; - color: inherit; - background: none; - cursor: inherit; - display: block; - max-width: 100%; - word-wrap: normal; - word-break: normal; - white-space: normal; -} - -.c6::before, -.c6::after { - box-sizing: border-box; -} - -.c4 { - line-height: 1.15; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - margin: 0; - padding: 0; - border: 0; - box-sizing: border-box; - font: 100% inherit; - line-height: 1; - text-align: left; - -webkit-text-decoration: none; - text-decoration: none; - vertical-align: baseline; - color: inherit; - background: none; - cursor: inherit; - display: inline; - max-width: 100%; - word-wrap: normal; - word-break: normal; - white-space: normal; -} - -.c4::before, -.c4::after { - box-sizing: border-box; -} - -.c7 { - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 400; -} - -.c7.fi-action-menu-popover { - background-color: hsl(0,0%,100%); - box-shadow: 0px 4px 8px 0px hsla(0,0%,13%,0.14); - border: 1px solid hsl(0,0%,58%); - border-radius: 2px; - padding-top: 8px; - padding-bottom: 8px; - z-index: 888; -} - -.c7.fi-action-menu-popover--hidden { - visibility: hidden; -} - -.c7 .fi-action-menu-popover_list { - margin: 0; - padding-left: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - list-style-type: none; - overflow-y: auto; - max-height: 265px; -} - -.c7 .fi-action-menu-popover_list:focus { - outline: none; -} - -.c7 .fi-action-menu-popover_popper-arrow::before, -.c7 .fi-action-menu-popover_popper-arrow::after { - content: ''; - position: absolute; - left: -9px; - height: 0; - width: 0; - border: solid transparent; - pointer-events: none; -} - -.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='bottom-end'] { - bottom: 100%; -} - -.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='bottom-end']::before { - border-bottom-color: hsl(0,0%,58%); - border-width: 9px; - margin-right: -9px; - bottom: 100%; -} - -.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='bottom-end']::after { - border-bottom-color: hsl(0,0%,100%); - border-width: 8px; - margin-right: -9px; - left: -8px; - bottom: 100%; -} - -.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='top-end'] { - top: 100%; -} - -.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='top-end']::before { - border-top-color: hsl(0,0%,58%); - border-width: 9px; - margin-right: -9px; -} - -.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='top-end']::after { - border-top-color: hsl(0,0%,100%); - border-width: 8px; - margin-right: -9px; - left: -8px; -} - -.c3 { - color: hsl(0,0%,13%); - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 600; - font-size: 14px; - line-height: 20px; - padding: 10px 20px; - min-height: 40px; - color: hsl(0,0%,100%); - background: linear-gradient(0deg,hsl(212,63%,37%) 0%,hsl(212,63%,45%) 100%); - border-radius: 2px; - text-align: center; - text-shadow: 0 1px 1px hsla(214,100%,24%,0.5); - cursor: pointer; - border: 1px solid transparent; -} - -.c3.fi-margin-xxs { - margin: 5px; -} - -.c3.fi-margin-xs { - margin: 10px; -} - -.c3.fi-margin-s { - margin: 15px; -} - -.c3.fi-margin-m { - margin: 20px; -} - -.c3.fi-margin-l { - margin: 25px; -} - -.c3.fi-margin-xl { - margin: 30px; -} - -.c3.fi-margin-xxl { - margin: 40px; -} - -.c3.fi-margin-xxxl { - margin: 60px; -} - -.c3.fi-margin-xxxxl { - margin: 80px; -} - -.c3.fi-margin-insetXxs { - margin: 2px; -} - -.c3.fi-margin-insetXs { - margin: 4px; -} - -.c3.fi-margin-insetS { - margin: 6px; -} - -.c3.fi-margin-insetM { - margin: 8px; -} - -.c3.fi-margin-insetL { - margin: 10px; -} - -.c3.fi-margin-insetXl { - margin: 16px; -} - -.c3.fi-margin-insetXxl { - margin: 20px; -} - -.c3.fi-margin-top-xxs { - margin-top: 5px; -} - -.c3.fi-margin-top-xs { - margin-top: 10px; -} - -.c3.fi-margin-top-s { - margin-top: 15px; -} - -.c3.fi-margin-top-m { - margin-top: 20px; -} - -.c3.fi-margin-top-l { - margin-top: 25px; -} - -.c3.fi-margin-top-xl { - margin-top: 30px; -} - -.c3.fi-margin-top-xxl { - margin-top: 40px; -} - -.c3.fi-margin-top-xxxl { - margin-top: 60px; -} - -.c3.fi-margin-top-xxxxl { - margin-top: 80px; -} - -.c3.fi-margin-top-insetXxs { - margin-top: 2px; -} - -.c3.fi-margin-top-insetXs { - margin-top: 4px; -} - -.c3.fi-margin-top-insetS { - margin-top: 6px; -} - -.c3.fi-margin-top-insetM { - margin-top: 8px; -} - -.c3.fi-margin-top-insetL { - margin-top: 10px; -} - -.c3.fi-margin-top-insetXl { - margin-top: 16px; -} - -.c3.fi-margin-top-insetXxl { - margin-top: 20px; -} - -.c3.fi-margin-right-xxs { - margin-right: 5px; -} - -.c3.fi-margin-right-xs { - margin-right: 10px; -} - -.c3.fi-margin-right-s { - margin-right: 15px; -} - -.c3.fi-margin-right-m { - margin-right: 20px; -} - -.c3.fi-margin-right-l { - margin-right: 25px; -} - -.c3.fi-margin-right-xl { - margin-right: 30px; -} - -.c3.fi-margin-right-xxl { - margin-right: 40px; -} - -.c3.fi-margin-right-xxxl { - margin-right: 60px; -} - -.c3.fi-margin-right-xxxxl { - margin-right: 80px; -} - -.c3.fi-margin-right-insetXxs { - margin-right: 2px; -} - -.c3.fi-margin-right-insetXs { - margin-right: 4px; -} - -.c3.fi-margin-right-insetS { - margin-right: 6px; -} - -.c3.fi-margin-right-insetM { - margin-right: 8px; -} - -.c3.fi-margin-right-insetL { - margin-right: 10px; -} - -.c3.fi-margin-right-insetXl { - margin-right: 16px; -} - -.c3.fi-margin-right-insetXxl { - margin-right: 20px; -} - -.c3.fi-margin-bottom-xxs { - margin-bottom: 5px; -} - -.c3.fi-margin-bottom-xs { - margin-bottom: 10px; -} - -.c3.fi-margin-bottom-s { - margin-bottom: 15px; -} - -.c3.fi-margin-bottom-m { - margin-bottom: 20px; -} - -.c3.fi-margin-bottom-l { - margin-bottom: 25px; -} - -.c3.fi-margin-bottom-xl { - margin-bottom: 30px; -} - -.c3.fi-margin-bottom-xxl { - margin-bottom: 40px; -} - -.c3.fi-margin-bottom-xxxl { - margin-bottom: 60px; -} - -.c3.fi-margin-bottom-xxxxl { - margin-bottom: 80px; -} - -.c3.fi-margin-bottom-insetXxs { - margin-bottom: 2px; -} - -.c3.fi-margin-bottom-insetXs { - margin-bottom: 4px; -} - -.c3.fi-margin-bottom-insetS { - margin-bottom: 6px; -} - -.c3.fi-margin-bottom-insetM { - margin-bottom: 8px; -} - -.c3.fi-margin-bottom-insetL { - margin-bottom: 10px; -} - -.c3.fi-margin-bottom-insetXl { - margin-bottom: 16px; -} - -.c3.fi-margin-bottom-insetXxl { - margin-bottom: 20px; -} - -.c3.fi-margin-left-xxs { - margin-left: 5px; -} - -.c3.fi-margin-left-xs { - margin-left: 10px; -} - -.c3.fi-margin-left-s { - margin-left: 15px; -} - -.c3.fi-margin-left-m { - margin-left: 20px; -} - -.c3.fi-margin-left-l { - margin-left: 25px; -} - -.c3.fi-margin-left-xl { - margin-left: 30px; -} - -.c3.fi-margin-left-xxl { - margin-left: 40px; -} - -.c3.fi-margin-left-xxxl { - margin-left: 60px; -} - -.c3.fi-margin-left-xxxxl { - margin-left: 80px; -} - -.c3.fi-margin-left-insetXxs { - margin-left: 2px; -} - -.c3.fi-margin-left-insetXs { - margin-left: 4px; -} - -.c3.fi-margin-left-insetS { - margin-left: 6px; -} - -.c3.fi-margin-left-insetM { - margin-left: 8px; -} - -.c3.fi-margin-left-insetL { - margin-left: 10px; -} - -.c3.fi-margin-left-insetXl { - margin-left: 16px; -} - -.c3.fi-margin-left-insetXxl { - margin-left: 20px; -} - -.c3.fi-padding-xxs { - padding: 5px; -} - -.c3.fi-padding-xs { - padding: 10px; -} - -.c3.fi-padding-s { - padding: 15px; -} - -.c3.fi-padding-m { - padding: 20px; -} - -.c3.fi-padding-l { - padding: 25px; -} - -.c3.fi-padding-xl { - padding: 30px; -} - -.c3.fi-padding-xxl { - padding: 40px; -} - -.c3.fi-padding-xxxl { - padding: 60px; -} - -.c3.fi-padding-xxxxl { - padding: 80px; -} - -.c3.fi-padding-insetXxs { - padding: 2px; -} - -.c3.fi-padding-insetXs { - padding: 4px; -} - -.c3.fi-padding-insetS { - padding: 6px; -} - -.c3.fi-padding-insetM { - padding: 8px; -} - -.c3.fi-padding-insetL { - padding: 10px; -} - -.c3.fi-padding-insetXl { - padding: 16px; -} - -.c3.fi-padding-insetXxl { - padding: 20px; -} - -.c3.fi-padding-top-xxs { - padding-top: 5px; -} - -.c3.fi-padding-top-xs { - padding-top: 10px; -} - -.c3.fi-padding-top-s { - padding-top: 15px; -} - -.c3.fi-padding-top-m { - padding-top: 20px; -} - -.c3.fi-padding-top-l { - padding-top: 25px; -} - -.c3.fi-padding-top-xl { - padding-top: 30px; -} - -.c3.fi-padding-top-xxl { - padding-top: 40px; -} - -.c3.fi-padding-top-xxxl { - padding-top: 60px; -} - -.c3.fi-padding-top-xxxxl { - padding-top: 80px; -} - -.c3.fi-padding-top-insetXxs { - padding-top: 2px; -} - -.c3.fi-padding-top-insetXs { - padding-top: 4px; -} - -.c3.fi-padding-top-insetS { - padding-top: 6px; -} - -.c3.fi-padding-top-insetM { - padding-top: 8px; -} - -.c3.fi-padding-top-insetL { - padding-top: 10px; -} - -.c3.fi-padding-top-insetXl { - padding-top: 16px; -} - -.c3.fi-padding-top-insetXxl { - padding-top: 20px; -} - -.c3.fi-padding-right-xxs { - padding-right: 5px; -} - -.c3.fi-padding-right-xs { - padding-right: 10px; -} - -.c3.fi-padding-right-s { +.c9.fi-action-menu-divider { + height: 17px; + min-height: 17px; + padding-left: 15px; padding-right: 15px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; } -.c3.fi-padding-right-m { - padding-right: 20px; -} - -.c3.fi-padding-right-l { - padding-right: 25px; -} - -.c3.fi-padding-right-xl { - padding-right: 30px; -} - -.c3.fi-padding-right-xxl { - padding-right: 40px; -} - -.c3.fi-padding-right-xxxl { - padding-right: 60px; -} - -.c3.fi-padding-right-xxxxl { - padding-right: 80px; +.c9.fi-action-menu-divider .fi-action-menu-divider_line { + height: 1px; + width: 100%; + background-color: hsl(202,7%,80%); } -.c3.fi-padding-right-insetXxs { - padding-right: 2px; +@media (forced-colors:active) { + .c8.fi-action-menu-item--disabled { + color: GrayText; + } } -.c3.fi-padding-right-insetXs { - padding-right: 4px; +@media (forced-colors:active) { + .c8.fi-action-menu-item--selected:after { + position: absolute; + left: 1px; + right: 1px; + top: 1px; + bottom: 1px; + border: solid 3px Highlight; + } } -.c3.fi-padding-right-insetS { - padding-right: 6px; +@media (forced-colors:active) { + .c8.fi-action-menu-item--selected.fi-action-menu-item--disabled { + color: GrayText; + } } -.c3.fi-padding-right-insetM { - padding-right: 8px; +@media (forced-colors:active) { + .c9.fi-action-menu-divider .fi-action-menu-divider_line { + background-color: Highlight; + } } -.c3.fi-padding-right-insetL { - padding-right: 10px; -} + +
+
+ +
+ +
+ +`; -.c3.fi-padding-right-insetXl { - padding-right: 16px; +exports[`Disabled ActionMenu should match snapshot 1`] = ` +.c2 { + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; + font: 100% inherit; + line-height: 1; + text-align: left; + -webkit-text-decoration: none; + text-decoration: none; + vertical-align: baseline; + color: inherit; + background: none; + cursor: inherit; + display: inline-block; + max-width: 100%; + cursor: pointer; } -.c3.fi-padding-right-insetXxl { - padding-right: 20px; +.c2:-moz-focusring { + outline: 1px dotted ButtonText; } -.c3.fi-padding-bottom-xxs { - padding-bottom: 5px; +.c2::-moz-focus-inner { + border-style: none; + padding: 0; } -.c3.fi-padding-bottom-xs { - padding-bottom: 10px; +.c2::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; } -.c3.fi-padding-bottom-s { - padding-bottom: 15px; +.c2::-webkit-inner-spin-button { + height: auto; } -.c3.fi-padding-bottom-m { - padding-bottom: 20px; +.c2::-webkit-outer-spin-button { + height: auto; } -.c3.fi-padding-bottom-l { - padding-bottom: 25px; +.c2::before, +.c2::after { + box-sizing: border-box; } -.c3.fi-padding-bottom-xl { - padding-bottom: 30px; +.c0 { + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; + font: 100% inherit; + line-height: 1; + text-align: left; + -webkit-text-decoration: none; + text-decoration: none; + vertical-align: baseline; + color: inherit; + background: none; + cursor: inherit; + display: block; + max-width: 100%; + word-wrap: normal; + word-break: normal; + white-space: normal; } -.c3.fi-padding-bottom-xxl { - padding-bottom: 40px; +.c0::before, +.c0::after { + box-sizing: border-box; } -.c3.fi-padding-bottom-xxxl { - padding-bottom: 60px; +.c6 { + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; + font: 100% inherit; + line-height: 1; + text-align: left; + -webkit-text-decoration: none; + text-decoration: none; + vertical-align: baseline; + color: inherit; + background: none; + cursor: inherit; + display: block; + max-width: 100%; + word-wrap: normal; + word-break: normal; + white-space: normal; } -.c3.fi-padding-bottom-xxxxl { - padding-bottom: 80px; +.c6::before, +.c6::after { + box-sizing: border-box; } -.c3.fi-padding-bottom-insetXxs { - padding-bottom: 2px; +.c4 { + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; + font: 100% inherit; + line-height: 1; + text-align: left; + -webkit-text-decoration: none; + text-decoration: none; + vertical-align: baseline; + color: inherit; + background: none; + cursor: inherit; + display: inline; + max-width: 100%; + word-wrap: normal; + word-break: normal; + white-space: normal; } -.c3.fi-padding-bottom-insetXs { - padding-bottom: 4px; +.c4::before, +.c4::after { + box-sizing: border-box; } -.c3.fi-padding-bottom-insetS { - padding-bottom: 6px; +.c7 { + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 400; } -.c3.fi-padding-bottom-insetM { +.c7.fi-action-menu-popover { + background-color: hsl(0,0%,100%); + box-shadow: 0px 4px 8px 0px hsla(0,0%,13%,0.14); + border: 1px solid hsl(0,0%,58%); + border-radius: 2px; + padding-top: 8px; padding-bottom: 8px; + z-index: 888; } -.c3.fi-padding-bottom-insetL { - padding-bottom: 10px; -} - -.c3.fi-padding-bottom-insetXl { - padding-bottom: 16px; -} - -.c3.fi-padding-bottom-insetXxl { - padding-bottom: 20px; -} - -.c3.fi-padding-left-xxs { - padding-left: 5px; -} - -.c3.fi-padding-left-xs { - padding-left: 10px; -} - -.c3.fi-padding-left-s { - padding-left: 15px; -} - -.c3.fi-padding-left-m { - padding-left: 20px; -} - -.c3.fi-padding-left-l { - padding-left: 25px; -} - -.c3.fi-padding-left-xl { - padding-left: 30px; +.c7.fi-action-menu-popover--hidden { + visibility: hidden; } -.c3.fi-padding-left-xxl { - padding-left: 40px; +.c7 .fi-action-menu-popover_list { + margin: 0; + padding-left: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + list-style-type: none; + overflow-y: auto; + max-height: 265px; } -.c3.fi-padding-left-xxxl { - padding-left: 60px; +.c7 .fi-action-menu-popover_list:focus { + outline: none; } -.c3.fi-padding-left-xxxxl { - padding-left: 80px; +.c7 .fi-action-menu-popover_popper-arrow::before, +.c7 .fi-action-menu-popover_popper-arrow::after { + content: ''; + position: absolute; + left: -9px; + height: 0; + width: 0; + border: solid transparent; + pointer-events: none; } -.c3.fi-padding-left-insetXxs { - padding-left: 2px; +.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='bottom-end'] { + bottom: 100%; } -.c3.fi-padding-left-insetXs { - padding-left: 4px; +.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='bottom-end']::before { + border-bottom-color: hsl(0,0%,58%); + border-width: 9px; + margin-right: -9px; + bottom: 100%; } -.c3.fi-padding-left-insetS { - padding-left: 6px; +.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='bottom-end']::after { + border-bottom-color: hsl(0,0%,100%); + border-width: 8px; + margin-right: -9px; + left: -8px; + bottom: 100%; } -.c3.fi-padding-left-insetM { - padding-left: 8px; +.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='top-end'] { + top: 100%; } -.c3.fi-padding-left-insetL { - padding-left: 10px; +.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='top-end']::before { + border-top-color: hsl(0,0%,58%); + border-width: 9px; + margin-right: -9px; } -.c3.fi-padding-left-insetXl { - padding-left: 16px; +.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='top-end']::after { + border-top-color: hsl(0,0%,100%); + border-width: 8px; + margin-right: -9px; + left: -8px; } -.c3.fi-padding-left-insetXxl { - padding-left: 20px; +.c3 { + color: hsl(0,0%,13%); + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 600; + font-size: 14px; + line-height: 20px; + padding: 10px 20px; + min-height: 40px; + color: hsl(0,0%,100%); + background: linear-gradient(0deg,hsl(212,63%,37%) 0%,hsl(212,63%,45%) 100%); + border-radius: 2px; + text-align: center; + text-shadow: 0 1px 1px hsla(214,100%,24%,0.5); + cursor: pointer; + border: 1px solid transparent; } .c3:focus { @@ -5529,13 +1436,13 @@ exports[`movement in ActionMenu should match snapshot 1`] = ` >
@@ -5626,7 +1532,7 @@ exports[`movement in ActionMenu should match snapshot 1`] = ` `; -exports[`movement in ActionMenu should match snapshot 2`] = ` +exports[`No borders variant should match snapshot 1`] = ` .c2 { line-height: 1.15; -ms-text-size-adjust: 100%; @@ -5895,644 +1801,1538 @@ exports[`movement in ActionMenu should match snapshot 2`] = ` border: 1px solid transparent; } -.c3.fi-margin-xxs { - margin: 5px; +.c3:focus { + position: relative; + outline: 3px solid transparent; +} + +.c3:focus::after { + content: ''; + position: absolute; + pointer-events: none; + top: -2px; + right: -2px; + bottom: -2px; + left: -2px; + border-radius: 2px; + background-color: transparent; + border: 0px solid hsl(0,0%,100%); + box-sizing: border-box; + box-shadow: 0 0 0 2px hsl(196,77%,44%); + z-index: 9999; +} + +.c3:hover { + background: linear-gradient(0deg,hsl(212,63%,45%) 0%,hsl(212,63%,49%) 100%); + outline: 2px solid transparent; +} + +.c3:active { + background: hsl(212,63%,37%); +} + +.c3.fi-button--disabled, +.c3[disabled], +.c3:disabled { + text-shadow: 0 1px 1px rgba(33,33,33,0.5); + background: linear-gradient(0deg,hsl(202,7%,67%) 0%,hsl(202,7%,80%) 100%); + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: not-allowed; +} + +.c3.fi-button--disabled::after { + border: none; + box-shadow: none; +} + +.c3.fi-button--fullwidth { + display: block; + width: 100%; +} + +.c3.fi-button--inverted { + background: none; + background-color: hsl(212,63%,45%); + border: 1px solid hsl(0,0%,100%); + text-shadow: none; +} + +.c3.fi-button--inverted:hover { + background: linear-gradient(-180deg,hsla(0,0%,100%,0.1) 0%,hsla(0,0%,100%,0) 100%); +} + +.c3.fi-button--inverted:active { + background: none; + background-color: hsl(212,63%,45%); +} + +.c3.fi-button--inverted.fi-button--disabled, +.c3.fi-button--inverted[disabled], +.c3.fi-button--inverted:disabled { + opacity: 0.41; + background: none; + background-color: none; } -.c3.fi-margin-xs { - margin: 10px; +.c3.fi-button--secondary { + color: hsl(212,63%,45%); + background: none; + background-color: hsl(0,0%,100%); + border: 1px solid hsl(212,63%,45%); + text-shadow: none; } -.c3.fi-margin-s { - margin: 15px; +.c3.fi-button--secondary:hover { + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); } -.c3.fi-margin-m { - margin: 20px; +.c3.fi-button--secondary:active { + background: none; + background-color: hsl(202,7%,93%); } -.c3.fi-margin-l { - margin: 25px; +.c3.fi-button--secondary.fi-button--disabled, +.c3.fi-button--secondary[disabled], +.c3.fi-button--secondary:disabled { + color: hsl(202,7%,67%); + text-shadow: none; + background: none; + background-color: hsl(212,63%,98%); + border-color: hsl(202,7%,67%); } -.c3.fi-margin-xl { - margin: 30px; +.c3.fi-button--secondary-noborder { + color: hsl(212,63%,45%); + background: none; + background-color: hsl(0,0%,100%); + border: 1px solid hsl(212,63%,45%); + text-shadow: none; + border: none; + background-color: transparent; } -.c3.fi-margin-xxl { - margin: 40px; +.c3.fi-button--secondary-noborder:hover { + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); } -.c3.fi-margin-xxxl { - margin: 60px; +.c3.fi-button--secondary-noborder:active { + background: none; + background-color: hsl(202,7%,93%); } -.c3.fi-margin-xxxxl { - margin: 80px; +.c3.fi-button--secondary-noborder.fi-button--disabled, +.c3.fi-button--secondary-noborder[disabled], +.c3.fi-button--secondary-noborder:disabled { + color: hsl(202,7%,67%); + text-shadow: none; + background: none; + background-color: hsl(212,63%,98%); + border-color: hsl(202,7%,67%); } -.c3.fi-margin-insetXxs { - margin: 2px; +.c3.fi-button--secondary-light { + color: hsl(212,63%,45%); + color: hsl(212,63%,45%); + background: none; + background-color: hsl(0,0%,100%); + border: 1px solid hsl(212,63%,45%); + text-shadow: none; + background: linear-gradient(0deg,hsl(215,100%,95%),hsl(215,100%,97%)); + border: none; } -.c3.fi-margin-insetXs { - margin: 4px; +.c3.fi-button--secondary-light:hover { + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); } -.c3.fi-margin-insetS { - margin: 6px; +.c3.fi-button--secondary-light:active { + background: none; + background-color: hsl(202,7%,93%); } -.c3.fi-margin-insetM { - margin: 8px; +.c3.fi-button--secondary-light.fi-button--disabled, +.c3.fi-button--secondary-light[disabled], +.c3.fi-button--secondary-light:disabled { + color: hsl(202,7%,67%); + text-shadow: none; + background: none; + background-color: hsl(212,63%,98%); + border-color: hsl(202,7%,67%); } -.c3.fi-margin-insetL { - margin: 10px; +.c3.fi-button--secondary-light:hover { + background: linear-gradient(0deg,hsl(215,100%,97%),hsl(212,63%,98%)); } -.c3.fi-margin-insetXl { - margin: 16px; +.c3.fi-button--secondary-light:active { + background: linear-gradient(0deg,hsl(202,7%,93%),hsl(202,7%,97%)); } -.c3.fi-margin-insetXxl { - margin: 20px; +.c3.fi-button--secondary-light.fi-button--disabled, +.c3.fi-button--secondary-light[disabled], +.c3.fi-button--secondary-light:disabled { + color: hsl(202,7%,67%); + background: none; + background-color: hsl(202,7%,97%); } -.c3.fi-margin-top-xxs { - margin-top: 5px; +.c3 > .fi-button_icon > .fi-icon { + width: 16px; + height: 16px; + margin-right: 8px; + vertical-align: middle; + -webkit-transform: translateY(-0.1em); + -ms-transform: translateY(-0.1em); + transform: translateY(-0.1em); } -.c3.fi-margin-top-xs { - margin-top: 10px; +.c3 > .fi-button_icon--right > .fi-icon { + margin-right: 0; + margin-left: 8px; } -.c3.fi-margin-top-s { - margin-top: 15px; +.c3.fi-button--disabled > .fi-button_icon { + cursor: not-allowed; } -.c3.fi-margin-top-m { - margin-top: 20px; +.c5 { + vertical-align: baseline; } -.c3.fi-margin-top-l { - margin-top: 25px; +.c5.fi-icon { + display: inline-block; } -.c3.fi-margin-top-xl { - margin-top: 30px; +.c5 .fi-icon-base-fill { + fill: currentColor; } -.c3.fi-margin-top-xxl { - margin-top: 40px; +.c5 .fi-icon-base-stroke { + stroke: currentColor; } -.c3.fi-margin-top-xxxl { - margin-top: 60px; +.c5.fi-icon--cursor-pointer { + cursor: pointer; } -.c3.fi-margin-top-xxxxl { - margin-top: 80px; +.c5.fi-icon--cursor-pointer * { + cursor: inherit; } -.c3.fi-margin-top-insetXxs { - margin-top: 2px; +.c1.fi-action-menu--full-width { + width: 100%; } -.c3.fi-margin-top-insetXs { - margin-top: 4px; +.c1 .fi-action-menu_button--icon-only { + min-width: 40px; + padding: 10px; } -.c3.fi-margin-top-insetS { - margin-top: 6px; +.c1 .fi-action-menu_button--icon-only .fi-button_icon--right .fi-icon { + margin-left: 0; } -.c3.fi-margin-top-insetM { - margin-top: 8px; +.c8 { + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 400; } -.c3.fi-margin-top-insetL { - margin-top: 10px; +.c8.fi-action-menu-item { + position: relative; + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 400; + -webkit-text-decoration: none; + text-decoration: none; + color: hsl(0,0%,13%); + padding: 10px 20px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + cursor: pointer; + background: inherit; + border: none; + border-radius: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } -.c3.fi-margin-top-insetXl { - margin-top: 16px; +.c8.fi-action-menu-item:active, +.c8.fi-action-menu-item:focus, +.c8.fi-action-menu-item:hover, +.c8.fi-action-menu-item:visited { + border: none; + outline: none; + color: hsl(0,0%,13%); } -.c3.fi-margin-top-insetXxl { - margin-top: 20px; +.c8.fi-action-menu-item .fi-icon { + margin-right: 8px; + width: 16px; + height: 16px; + pointer-events: none; } -.c3.fi-margin-right-xxs { - margin-right: 5px; +.c8.fi-action-menu-item--disabled { + cursor: not-allowed; + color: hsl(202,7%,67%); } -.c3.fi-margin-right-xs { - margin-right: 10px; +.c8.fi-action-menu-item--disabled:active, +.c8.fi-action-menu-item--disabled:focus, +.c8.fi-action-menu-item--disabled:hover, +.c8.fi-action-menu-item--disabled:visited { + color: hsl(202,7%,67%); } -.c3.fi-margin-right-s { - margin-right: 15px; +.c8.fi-action-menu-item--selected { + color: hsl(0,0%,100%); + background: hsl(212,63%,45%); } -.c3.fi-margin-right-m { - margin-right: 20px; +.c8.fi-action-menu-item--selected:active, +.c8.fi-action-menu-item--selected:focus, +.c8.fi-action-menu-item--selected:hover, +.c8.fi-action-menu-item--selected:visited { + -webkit-text-decoration: none; + text-decoration: none; + color: hsl(0,0%,100%); + cursor: pointer; } -.c3.fi-margin-right-l { - margin-right: 25px; +.c8.fi-action-menu-item--selected:after { + content: ''; } -.c3.fi-margin-right-xl { - margin-right: 30px; +.c8.fi-action-menu-item--selected.fi-action-menu-item--disabled { + cursor: not-allowed; + color: hsl(202,7%,67%); } -.c3.fi-margin-right-xxl { - margin-right: 40px; +.c9.fi-action-menu-divider { + height: 17px; + min-height: 17px; + padding-left: 15px; + padding-right: 15px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; } -.c3.fi-margin-right-xxxl { - margin-right: 60px; +.c9.fi-action-menu-divider .fi-action-menu-divider_line { + height: 1px; + width: 100%; + background-color: hsl(202,7%,80%); } -.c3.fi-margin-right-xxxxl { - margin-right: 80px; +@media (forced-colors:active) { + .c8.fi-action-menu-item--disabled { + color: GrayText; + } } -.c3.fi-margin-right-insetXxs { - margin-right: 2px; +@media (forced-colors:active) { + .c8.fi-action-menu-item--selected:after { + position: absolute; + left: 1px; + right: 1px; + top: 1px; + bottom: 1px; + border: solid 3px Highlight; + } } -.c3.fi-margin-right-insetXs { - margin-right: 4px; +@media (forced-colors:active) { + .c8.fi-action-menu-item--selected.fi-action-menu-item--disabled { + color: GrayText; + } } -.c3.fi-margin-right-insetS { - margin-right: 6px; +@media (forced-colors:active) { + .c9.fi-action-menu-divider .fi-action-menu-divider_line { + background-color: Highlight; + } } -.c3.fi-margin-right-insetM { - margin-right: 8px; -} + +
+
+ +
+ +
+ +`; -.c3.fi-margin-right-insetL { - margin-right: 10px; +exports[`movement in ActionMenu should match snapshot 1`] = ` +.c2 { + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; + font: 100% inherit; + line-height: 1; + text-align: left; + -webkit-text-decoration: none; + text-decoration: none; + vertical-align: baseline; + color: inherit; + background: none; + cursor: inherit; + display: inline-block; + max-width: 100%; + cursor: pointer; } -.c3.fi-margin-right-insetXl { - margin-right: 16px; +.c2:-moz-focusring { + outline: 1px dotted ButtonText; } -.c3.fi-margin-right-insetXxl { - margin-right: 20px; +.c2::-moz-focus-inner { + border-style: none; + padding: 0; } -.c3.fi-margin-bottom-xxs { - margin-bottom: 5px; +.c2::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; } -.c3.fi-margin-bottom-xs { - margin-bottom: 10px; +.c2::-webkit-inner-spin-button { + height: auto; } -.c3.fi-margin-bottom-s { - margin-bottom: 15px; +.c2::-webkit-outer-spin-button { + height: auto; } -.c3.fi-margin-bottom-m { - margin-bottom: 20px; +.c2::before, +.c2::after { + box-sizing: border-box; } -.c3.fi-margin-bottom-l { - margin-bottom: 25px; +.c0 { + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; + font: 100% inherit; + line-height: 1; + text-align: left; + -webkit-text-decoration: none; + text-decoration: none; + vertical-align: baseline; + color: inherit; + background: none; + cursor: inherit; + display: block; + max-width: 100%; + word-wrap: normal; + word-break: normal; + white-space: normal; } -.c3.fi-margin-bottom-xl { - margin-bottom: 30px; +.c0::before, +.c0::after { + box-sizing: border-box; } -.c3.fi-margin-bottom-xxl { - margin-bottom: 40px; +.c6 { + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; + font: 100% inherit; + line-height: 1; + text-align: left; + -webkit-text-decoration: none; + text-decoration: none; + vertical-align: baseline; + color: inherit; + background: none; + cursor: inherit; + display: block; + max-width: 100%; + word-wrap: normal; + word-break: normal; + white-space: normal; } -.c3.fi-margin-bottom-xxxl { - margin-bottom: 60px; +.c6::before, +.c6::after { + box-sizing: border-box; } -.c3.fi-margin-bottom-xxxxl { - margin-bottom: 80px; +.c4 { + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; + font: 100% inherit; + line-height: 1; + text-align: left; + -webkit-text-decoration: none; + text-decoration: none; + vertical-align: baseline; + color: inherit; + background: none; + cursor: inherit; + display: inline; + max-width: 100%; + word-wrap: normal; + word-break: normal; + white-space: normal; } -.c3.fi-margin-bottom-insetXxs { - margin-bottom: 2px; +.c4::before, +.c4::after { + box-sizing: border-box; } -.c3.fi-margin-bottom-insetXs { - margin-bottom: 4px; +.c7 { + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 400; } -.c3.fi-margin-bottom-insetS { - margin-bottom: 6px; +.c7.fi-action-menu-popover { + background-color: hsl(0,0%,100%); + box-shadow: 0px 4px 8px 0px hsla(0,0%,13%,0.14); + border: 1px solid hsl(0,0%,58%); + border-radius: 2px; + padding-top: 8px; + padding-bottom: 8px; + z-index: 888; } -.c3.fi-margin-bottom-insetM { - margin-bottom: 8px; +.c7.fi-action-menu-popover--hidden { + visibility: hidden; } -.c3.fi-margin-bottom-insetL { - margin-bottom: 10px; +.c7 .fi-action-menu-popover_list { + margin: 0; + padding-left: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + list-style-type: none; + overflow-y: auto; + max-height: 265px; } -.c3.fi-margin-bottom-insetXl { - margin-bottom: 16px; +.c7 .fi-action-menu-popover_list:focus { + outline: none; } -.c3.fi-margin-bottom-insetXxl { - margin-bottom: 20px; +.c7 .fi-action-menu-popover_popper-arrow::before, +.c7 .fi-action-menu-popover_popper-arrow::after { + content: ''; + position: absolute; + left: -9px; + height: 0; + width: 0; + border: solid transparent; + pointer-events: none; } -.c3.fi-margin-left-xxs { - margin-left: 5px; +.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='bottom-end'] { + bottom: 100%; } -.c3.fi-margin-left-xs { - margin-left: 10px; +.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='bottom-end']::before { + border-bottom-color: hsl(0,0%,58%); + border-width: 9px; + margin-right: -9px; + bottom: 100%; } -.c3.fi-margin-left-s { - margin-left: 15px; +.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='bottom-end']::after { + border-bottom-color: hsl(0,0%,100%); + border-width: 8px; + margin-right: -9px; + left: -8px; + bottom: 100%; } -.c3.fi-margin-left-m { - margin-left: 20px; +.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='top-end'] { + top: 100%; } -.c3.fi-margin-left-l { - margin-left: 25px; +.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='top-end']::before { + border-top-color: hsl(0,0%,58%); + border-width: 9px; + margin-right: -9px; } -.c3.fi-margin-left-xl { - margin-left: 30px; +.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='top-end']::after { + border-top-color: hsl(0,0%,100%); + border-width: 8px; + margin-right: -9px; + left: -8px; } -.c3.fi-margin-left-xxl { - margin-left: 40px; +.c3 { + color: hsl(0,0%,13%); + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 600; + font-size: 14px; + line-height: 20px; + padding: 10px 20px; + min-height: 40px; + color: hsl(0,0%,100%); + background: linear-gradient(0deg,hsl(212,63%,37%) 0%,hsl(212,63%,45%) 100%); + border-radius: 2px; + text-align: center; + text-shadow: 0 1px 1px hsla(214,100%,24%,0.5); + cursor: pointer; + border: 1px solid transparent; } -.c3.fi-margin-left-xxxl { - margin-left: 60px; +.c3:focus { + position: relative; + outline: 3px solid transparent; } -.c3.fi-margin-left-xxxxl { - margin-left: 80px; +.c3:focus::after { + content: ''; + position: absolute; + pointer-events: none; + top: -2px; + right: -2px; + bottom: -2px; + left: -2px; + border-radius: 2px; + background-color: transparent; + border: 0px solid hsl(0,0%,100%); + box-sizing: border-box; + box-shadow: 0 0 0 2px hsl(196,77%,44%); + z-index: 9999; } -.c3.fi-margin-left-insetXxs { - margin-left: 2px; +.c3:hover { + background: linear-gradient(0deg,hsl(212,63%,45%) 0%,hsl(212,63%,49%) 100%); + outline: 2px solid transparent; } -.c3.fi-margin-left-insetXs { - margin-left: 4px; +.c3:active { + background: hsl(212,63%,37%); } -.c3.fi-margin-left-insetS { - margin-left: 6px; +.c3.fi-button--disabled, +.c3[disabled], +.c3:disabled { + text-shadow: 0 1px 1px rgba(33,33,33,0.5); + background: linear-gradient(0deg,hsl(202,7%,67%) 0%,hsl(202,7%,80%) 100%); + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: not-allowed; } -.c3.fi-margin-left-insetM { - margin-left: 8px; +.c3.fi-button--disabled::after { + border: none; + box-shadow: none; } -.c3.fi-margin-left-insetL { - margin-left: 10px; +.c3.fi-button--fullwidth { + display: block; + width: 100%; } -.c3.fi-margin-left-insetXl { - margin-left: 16px; +.c3.fi-button--inverted { + background: none; + background-color: hsl(212,63%,45%); + border: 1px solid hsl(0,0%,100%); + text-shadow: none; } -.c3.fi-margin-left-insetXxl { - margin-left: 20px; +.c3.fi-button--inverted:hover { + background: linear-gradient(-180deg,hsla(0,0%,100%,0.1) 0%,hsla(0,0%,100%,0) 100%); } -.c3.fi-padding-xxs { - padding: 5px; +.c3.fi-button--inverted:active { + background: none; + background-color: hsl(212,63%,45%); } -.c3.fi-padding-xs { - padding: 10px; +.c3.fi-button--inverted.fi-button--disabled, +.c3.fi-button--inverted[disabled], +.c3.fi-button--inverted:disabled { + opacity: 0.41; + background: none; + background-color: none; } -.c3.fi-padding-s { - padding: 15px; +.c3.fi-button--secondary { + color: hsl(212,63%,45%); + background: none; + background-color: hsl(0,0%,100%); + border: 1px solid hsl(212,63%,45%); + text-shadow: none; } -.c3.fi-padding-m { - padding: 20px; +.c3.fi-button--secondary:hover { + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); } -.c3.fi-padding-l { - padding: 25px; +.c3.fi-button--secondary:active { + background: none; + background-color: hsl(202,7%,93%); } -.c3.fi-padding-xl { - padding: 30px; +.c3.fi-button--secondary.fi-button--disabled, +.c3.fi-button--secondary[disabled], +.c3.fi-button--secondary:disabled { + color: hsl(202,7%,67%); + text-shadow: none; + background: none; + background-color: hsl(212,63%,98%); + border-color: hsl(202,7%,67%); } -.c3.fi-padding-xxl { - padding: 40px; +.c3.fi-button--secondary-noborder { + color: hsl(212,63%,45%); + background: none; + background-color: hsl(0,0%,100%); + border: 1px solid hsl(212,63%,45%); + text-shadow: none; + border: none; + background-color: transparent; } -.c3.fi-padding-xxxl { - padding: 60px; +.c3.fi-button--secondary-noborder:hover { + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); } -.c3.fi-padding-xxxxl { - padding: 80px; +.c3.fi-button--secondary-noborder:active { + background: none; + background-color: hsl(202,7%,93%); } -.c3.fi-padding-insetXxs { - padding: 2px; +.c3.fi-button--secondary-noborder.fi-button--disabled, +.c3.fi-button--secondary-noborder[disabled], +.c3.fi-button--secondary-noborder:disabled { + color: hsl(202,7%,67%); + text-shadow: none; + background: none; + background-color: hsl(212,63%,98%); + border-color: hsl(202,7%,67%); } -.c3.fi-padding-insetXs { - padding: 4px; +.c3.fi-button--secondary-light { + color: hsl(212,63%,45%); + color: hsl(212,63%,45%); + background: none; + background-color: hsl(0,0%,100%); + border: 1px solid hsl(212,63%,45%); + text-shadow: none; + background: linear-gradient(0deg,hsl(215,100%,95%),hsl(215,100%,97%)); + border: none; } -.c3.fi-padding-insetS { - padding: 6px; +.c3.fi-button--secondary-light:hover { + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); } -.c3.fi-padding-insetM { - padding: 8px; +.c3.fi-button--secondary-light:active { + background: none; + background-color: hsl(202,7%,93%); } -.c3.fi-padding-insetL { - padding: 10px; +.c3.fi-button--secondary-light.fi-button--disabled, +.c3.fi-button--secondary-light[disabled], +.c3.fi-button--secondary-light:disabled { + color: hsl(202,7%,67%); + text-shadow: none; + background: none; + background-color: hsl(212,63%,98%); + border-color: hsl(202,7%,67%); } -.c3.fi-padding-insetXl { - padding: 16px; +.c3.fi-button--secondary-light:hover { + background: linear-gradient(0deg,hsl(215,100%,97%),hsl(212,63%,98%)); } -.c3.fi-padding-insetXxl { - padding: 20px; +.c3.fi-button--secondary-light:active { + background: linear-gradient(0deg,hsl(202,7%,93%),hsl(202,7%,97%)); } -.c3.fi-padding-top-xxs { - padding-top: 5px; +.c3.fi-button--secondary-light.fi-button--disabled, +.c3.fi-button--secondary-light[disabled], +.c3.fi-button--secondary-light:disabled { + color: hsl(202,7%,67%); + background: none; + background-color: hsl(202,7%,97%); } -.c3.fi-padding-top-xs { - padding-top: 10px; +.c3 > .fi-button_icon > .fi-icon { + width: 16px; + height: 16px; + margin-right: 8px; + vertical-align: middle; + -webkit-transform: translateY(-0.1em); + -ms-transform: translateY(-0.1em); + transform: translateY(-0.1em); } -.c3.fi-padding-top-s { - padding-top: 15px; +.c3 > .fi-button_icon--right > .fi-icon { + margin-right: 0; + margin-left: 8px; } -.c3.fi-padding-top-m { - padding-top: 20px; +.c3.fi-button--disabled > .fi-button_icon { + cursor: not-allowed; } -.c3.fi-padding-top-l { - padding-top: 25px; +.c5 { + vertical-align: baseline; } -.c3.fi-padding-top-xl { - padding-top: 30px; +.c5.fi-icon { + display: inline-block; } -.c3.fi-padding-top-xxl { - padding-top: 40px; +.c5 .fi-icon-base-fill { + fill: currentColor; } -.c3.fi-padding-top-xxxl { - padding-top: 60px; +.c5 .fi-icon-base-stroke { + stroke: currentColor; } -.c3.fi-padding-top-xxxxl { - padding-top: 80px; +.c5.fi-icon--cursor-pointer { + cursor: pointer; } -.c3.fi-padding-top-insetXxs { - padding-top: 2px; +.c5.fi-icon--cursor-pointer * { + cursor: inherit; } -.c3.fi-padding-top-insetXs { - padding-top: 4px; +.c1.fi-action-menu--full-width { + width: 100%; } -.c3.fi-padding-top-insetS { - padding-top: 6px; +.c1 .fi-action-menu_button--icon-only { + min-width: 40px; + padding: 10px; } -.c3.fi-padding-top-insetM { - padding-top: 8px; +.c1 .fi-action-menu_button--icon-only .fi-button_icon--right .fi-icon { + margin-left: 0; } -.c3.fi-padding-top-insetL { - padding-top: 10px; +.c8 { + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 400; } -.c3.fi-padding-top-insetXl { - padding-top: 16px; +.c8.fi-action-menu-item { + position: relative; + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 400; + -webkit-text-decoration: none; + text-decoration: none; + color: hsl(0,0%,13%); + padding: 10px 20px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + cursor: pointer; + background: inherit; + border: none; + border-radius: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } -.c3.fi-padding-top-insetXxl { - padding-top: 20px; +.c8.fi-action-menu-item:active, +.c8.fi-action-menu-item:focus, +.c8.fi-action-menu-item:hover, +.c8.fi-action-menu-item:visited { + border: none; + outline: none; + color: hsl(0,0%,13%); } -.c3.fi-padding-right-xxs { - padding-right: 5px; +.c8.fi-action-menu-item .fi-icon { + margin-right: 8px; + width: 16px; + height: 16px; + pointer-events: none; } -.c3.fi-padding-right-xs { - padding-right: 10px; +.c8.fi-action-menu-item--disabled { + cursor: not-allowed; + color: hsl(202,7%,67%); } -.c3.fi-padding-right-s { - padding-right: 15px; +.c8.fi-action-menu-item--disabled:active, +.c8.fi-action-menu-item--disabled:focus, +.c8.fi-action-menu-item--disabled:hover, +.c8.fi-action-menu-item--disabled:visited { + color: hsl(202,7%,67%); } -.c3.fi-padding-right-m { - padding-right: 20px; +.c8.fi-action-menu-item--selected { + color: hsl(0,0%,100%); + background: hsl(212,63%,45%); } -.c3.fi-padding-right-l { - padding-right: 25px; +.c8.fi-action-menu-item--selected:active, +.c8.fi-action-menu-item--selected:focus, +.c8.fi-action-menu-item--selected:hover, +.c8.fi-action-menu-item--selected:visited { + -webkit-text-decoration: none; + text-decoration: none; + color: hsl(0,0%,100%); + cursor: pointer; } -.c3.fi-padding-right-xl { - padding-right: 30px; +.c8.fi-action-menu-item--selected:after { + content: ''; } -.c3.fi-padding-right-xxl { - padding-right: 40px; +.c8.fi-action-menu-item--selected.fi-action-menu-item--disabled { + cursor: not-allowed; + color: hsl(202,7%,67%); } -.c3.fi-padding-right-xxxl { - padding-right: 60px; +.c9.fi-action-menu-divider { + height: 17px; + min-height: 17px; + padding-left: 15px; + padding-right: 15px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; } -.c3.fi-padding-right-xxxxl { - padding-right: 80px; +.c9.fi-action-menu-divider .fi-action-menu-divider_line { + height: 1px; + width: 100%; + background-color: hsl(202,7%,80%); } -.c3.fi-padding-right-insetXxs { - padding-right: 2px; +@media (forced-colors:active) { + .c8.fi-action-menu-item--disabled { + color: GrayText; + } } -.c3.fi-padding-right-insetXs { - padding-right: 4px; +@media (forced-colors:active) { + .c8.fi-action-menu-item--selected:after { + position: absolute; + left: 1px; + right: 1px; + top: 1px; + bottom: 1px; + border: solid 3px Highlight; + } } -.c3.fi-padding-right-insetS { - padding-right: 6px; +@media (forced-colors:active) { + .c8.fi-action-menu-item--selected.fi-action-menu-item--disabled { + color: GrayText; + } } -.c3.fi-padding-right-insetM { - padding-right: 8px; +@media (forced-colors:active) { + .c9.fi-action-menu-divider .fi-action-menu-divider_line { + background-color: Highlight; + } } -.c3.fi-padding-right-insetL { - padding-right: 10px; -} + +
+
+ +
+ +
+ +`; -.c3.fi-padding-right-insetXl { - padding-right: 16px; +exports[`movement in ActionMenu should match snapshot 2`] = ` +.c2 { + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; + font: 100% inherit; + line-height: 1; + text-align: left; + -webkit-text-decoration: none; + text-decoration: none; + vertical-align: baseline; + color: inherit; + background: none; + cursor: inherit; + display: inline-block; + max-width: 100%; + cursor: pointer; } -.c3.fi-padding-right-insetXxl { - padding-right: 20px; +.c2:-moz-focusring { + outline: 1px dotted ButtonText; } -.c3.fi-padding-bottom-xxs { - padding-bottom: 5px; +.c2::-moz-focus-inner { + border-style: none; + padding: 0; } -.c3.fi-padding-bottom-xs { - padding-bottom: 10px; +.c2::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; } -.c3.fi-padding-bottom-s { - padding-bottom: 15px; +.c2::-webkit-inner-spin-button { + height: auto; } -.c3.fi-padding-bottom-m { - padding-bottom: 20px; +.c2::-webkit-outer-spin-button { + height: auto; } -.c3.fi-padding-bottom-l { - padding-bottom: 25px; +.c2::before, +.c2::after { + box-sizing: border-box; } -.c3.fi-padding-bottom-xl { - padding-bottom: 30px; +.c0 { + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; + font: 100% inherit; + line-height: 1; + text-align: left; + -webkit-text-decoration: none; + text-decoration: none; + vertical-align: baseline; + color: inherit; + background: none; + cursor: inherit; + display: block; + max-width: 100%; + word-wrap: normal; + word-break: normal; + white-space: normal; } -.c3.fi-padding-bottom-xxl { - padding-bottom: 40px; +.c0::before, +.c0::after { + box-sizing: border-box; } -.c3.fi-padding-bottom-xxxl { - padding-bottom: 60px; +.c6 { + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; + font: 100% inherit; + line-height: 1; + text-align: left; + -webkit-text-decoration: none; + text-decoration: none; + vertical-align: baseline; + color: inherit; + background: none; + cursor: inherit; + display: block; + max-width: 100%; + word-wrap: normal; + word-break: normal; + white-space: normal; } -.c3.fi-padding-bottom-xxxxl { - padding-bottom: 80px; +.c6::before, +.c6::after { + box-sizing: border-box; } -.c3.fi-padding-bottom-insetXxs { - padding-bottom: 2px; +.c4 { + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; + font: 100% inherit; + line-height: 1; + text-align: left; + -webkit-text-decoration: none; + text-decoration: none; + vertical-align: baseline; + color: inherit; + background: none; + cursor: inherit; + display: inline; + max-width: 100%; + word-wrap: normal; + word-break: normal; + white-space: normal; } -.c3.fi-padding-bottom-insetXs { - padding-bottom: 4px; +.c4::before, +.c4::after { + box-sizing: border-box; } -.c3.fi-padding-bottom-insetS { - padding-bottom: 6px; +.c7 { + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 400; } -.c3.fi-padding-bottom-insetM { +.c7.fi-action-menu-popover { + background-color: hsl(0,0%,100%); + box-shadow: 0px 4px 8px 0px hsla(0,0%,13%,0.14); + border: 1px solid hsl(0,0%,58%); + border-radius: 2px; + padding-top: 8px; padding-bottom: 8px; + z-index: 888; } -.c3.fi-padding-bottom-insetL { - padding-bottom: 10px; -} - -.c3.fi-padding-bottom-insetXl { - padding-bottom: 16px; -} - -.c3.fi-padding-bottom-insetXxl { - padding-bottom: 20px; -} - -.c3.fi-padding-left-xxs { - padding-left: 5px; -} - -.c3.fi-padding-left-xs { - padding-left: 10px; -} - -.c3.fi-padding-left-s { - padding-left: 15px; -} - -.c3.fi-padding-left-m { - padding-left: 20px; -} - -.c3.fi-padding-left-l { - padding-left: 25px; -} - -.c3.fi-padding-left-xl { - padding-left: 30px; +.c7.fi-action-menu-popover--hidden { + visibility: hidden; } -.c3.fi-padding-left-xxl { - padding-left: 40px; +.c7 .fi-action-menu-popover_list { + margin: 0; + padding-left: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + list-style-type: none; + overflow-y: auto; + max-height: 265px; } -.c3.fi-padding-left-xxxl { - padding-left: 60px; +.c7 .fi-action-menu-popover_list:focus { + outline: none; } -.c3.fi-padding-left-xxxxl { - padding-left: 80px; +.c7 .fi-action-menu-popover_popper-arrow::before, +.c7 .fi-action-menu-popover_popper-arrow::after { + content: ''; + position: absolute; + left: -9px; + height: 0; + width: 0; + border: solid transparent; + pointer-events: none; } -.c3.fi-padding-left-insetXxs { - padding-left: 2px; +.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='bottom-end'] { + bottom: 100%; } -.c3.fi-padding-left-insetXs { - padding-left: 4px; +.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='bottom-end']::before { + border-bottom-color: hsl(0,0%,58%); + border-width: 9px; + margin-right: -9px; + bottom: 100%; } -.c3.fi-padding-left-insetS { - padding-left: 6px; +.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='bottom-end']::after { + border-bottom-color: hsl(0,0%,100%); + border-width: 8px; + margin-right: -9px; + left: -8px; + bottom: 100%; } -.c3.fi-padding-left-insetM { - padding-left: 8px; +.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='top-end'] { + top: 100%; } -.c3.fi-padding-left-insetL { - padding-left: 10px; +.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='top-end']::before { + border-top-color: hsl(0,0%,58%); + border-width: 9px; + margin-right: -9px; } -.c3.fi-padding-left-insetXl { - padding-left: 16px; +.c7 .fi-action-menu-popover_popper-arrow[data-popper-placement^='top-end']::after { + border-top-color: hsl(0,0%,100%); + border-width: 8px; + margin-right: -9px; + left: -8px; } -.c3.fi-padding-left-insetXxl { - padding-left: 20px; +.c3 { + color: hsl(0,0%,13%); + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 600; + font-size: 14px; + line-height: 20px; + padding: 10px 20px; + min-height: 40px; + color: hsl(0,0%,100%); + background: linear-gradient(0deg,hsl(212,63%,37%) 0%,hsl(212,63%,45%) 100%); + border-radius: 2px; + text-align: center; + text-shadow: 0 1px 1px hsla(214,100%,24%,0.5); + cursor: pointer; + border: 1px solid transparent; } .c3:focus { diff --git a/src/core/Block/Block.baseStyles.ts b/src/core/Block/Block.baseStyles.ts index 27f449b13..7b161b47c 100644 --- a/src/core/Block/Block.baseStyles.ts +++ b/src/core/Block/Block.baseStyles.ts @@ -1,12 +1,10 @@ import { css } from 'styled-components'; import { SuomifiTheme } from '../theme'; import { element, font } from '../theme/reset'; -import { spacingClasses } from '../theme/utils/spacing'; import { BlockVariant } from './Block'; export const baseStyles = (theme: SuomifiTheme, variant?: BlockVariant) => css` ${element(theme)} ${font(theme)('bodyText')} - ${spacingClasses(theme)} ${!!variant && variant === 'span' ? 'display: inline-block' : ''} `; diff --git a/src/core/Block/Block.tsx b/src/core/Block/Block.tsx index 5665bae50..87d2862c5 100644 --- a/src/core/Block/Block.tsx +++ b/src/core/Block/Block.tsx @@ -3,8 +3,8 @@ import { default as styled } from 'styled-components'; import classnames from 'classnames'; import { SpacingProps, - getSpacingClassNamesFromProps, separateSpacingProps, + spacingStyle, } from '../theme/utils/spacing'; import { baseStyles } from './Block.baseStyles'; import { HtmlDivWithNativeRef, HtmlDivProps } from '../../reset'; @@ -38,8 +38,8 @@ export interface BlockProps extends HtmlDivProps, SpacingProps { class SemanticBlock extends Component { render() { const [spacingProps, baseProps] = separateSpacingProps(this.props); - const spacingClassnames = getSpacingClassNamesFromProps(spacingProps); - const { className, variant, forwardedRef, ...passProps } = baseProps; + const spacing = spacingStyle(spacingProps); + const { className, variant, style, forwardedRef, ...passProps } = baseProps; const ComponentVariant = !variant || variant === 'default' ? HtmlDivWithNativeRef : variant; @@ -48,9 +48,10 @@ class SemanticBlock extends Component { ); } diff --git a/src/core/Block/__snapshots__/Block.test.tsx.snap b/src/core/Block/__snapshots__/Block.test.tsx.snap index 792cdec7e..9f9dedec2 100644 --- a/src/core/Block/__snapshots__/Block.test.tsx.snap +++ b/src/core/Block/__snapshots__/Block.test.tsx.snap @@ -47,646 +47,6 @@ exports[`calling render with the same component on the same container does not r font-weight: 400; } -.c1.fi-margin-xxs { - margin: 5px; -} - -.c1.fi-margin-xs { - margin: 10px; -} - -.c1.fi-margin-s { - margin: 15px; -} - -.c1.fi-margin-m { - margin: 20px; -} - -.c1.fi-margin-l { - margin: 25px; -} - -.c1.fi-margin-xl { - margin: 30px; -} - -.c1.fi-margin-xxl { - margin: 40px; -} - -.c1.fi-margin-xxxl { - margin: 60px; -} - -.c1.fi-margin-xxxxl { - margin: 80px; -} - -.c1.fi-margin-insetXxs { - margin: 2px; -} - -.c1.fi-margin-insetXs { - margin: 4px; -} - -.c1.fi-margin-insetS { - margin: 6px; -} - -.c1.fi-margin-insetM { - margin: 8px; -} - -.c1.fi-margin-insetL { - margin: 10px; -} - -.c1.fi-margin-insetXl { - margin: 16px; -} - -.c1.fi-margin-insetXxl { - margin: 20px; -} - -.c1.fi-margin-top-xxs { - margin-top: 5px; -} - -.c1.fi-margin-top-xs { - margin-top: 10px; -} - -.c1.fi-margin-top-s { - margin-top: 15px; -} - -.c1.fi-margin-top-m { - margin-top: 20px; -} - -.c1.fi-margin-top-l { - margin-top: 25px; -} - -.c1.fi-margin-top-xl { - margin-top: 30px; -} - -.c1.fi-margin-top-xxl { - margin-top: 40px; -} - -.c1.fi-margin-top-xxxl { - margin-top: 60px; -} - -.c1.fi-margin-top-xxxxl { - margin-top: 80px; -} - -.c1.fi-margin-top-insetXxs { - margin-top: 2px; -} - -.c1.fi-margin-top-insetXs { - margin-top: 4px; -} - -.c1.fi-margin-top-insetS { - margin-top: 6px; -} - -.c1.fi-margin-top-insetM { - margin-top: 8px; -} - -.c1.fi-margin-top-insetL { - margin-top: 10px; -} - -.c1.fi-margin-top-insetXl { - margin-top: 16px; -} - -.c1.fi-margin-top-insetXxl { - margin-top: 20px; -} - -.c1.fi-margin-right-xxs { - margin-right: 5px; -} - -.c1.fi-margin-right-xs { - margin-right: 10px; -} - -.c1.fi-margin-right-s { - margin-right: 15px; -} - -.c1.fi-margin-right-m { - margin-right: 20px; -} - -.c1.fi-margin-right-l { - margin-right: 25px; -} - -.c1.fi-margin-right-xl { - margin-right: 30px; -} - -.c1.fi-margin-right-xxl { - margin-right: 40px; -} - -.c1.fi-margin-right-xxxl { - margin-right: 60px; -} - -.c1.fi-margin-right-xxxxl { - margin-right: 80px; -} - -.c1.fi-margin-right-insetXxs { - margin-right: 2px; -} - -.c1.fi-margin-right-insetXs { - margin-right: 4px; -} - -.c1.fi-margin-right-insetS { - margin-right: 6px; -} - -.c1.fi-margin-right-insetM { - margin-right: 8px; -} - -.c1.fi-margin-right-insetL { - margin-right: 10px; -} - -.c1.fi-margin-right-insetXl { - margin-right: 16px; -} - -.c1.fi-margin-right-insetXxl { - margin-right: 20px; -} - -.c1.fi-margin-bottom-xxs { - margin-bottom: 5px; -} - -.c1.fi-margin-bottom-xs { - margin-bottom: 10px; -} - -.c1.fi-margin-bottom-s { - margin-bottom: 15px; -} - -.c1.fi-margin-bottom-m { - margin-bottom: 20px; -} - -.c1.fi-margin-bottom-l { - margin-bottom: 25px; -} - -.c1.fi-margin-bottom-xl { - margin-bottom: 30px; -} - -.c1.fi-margin-bottom-xxl { - margin-bottom: 40px; -} - -.c1.fi-margin-bottom-xxxl { - margin-bottom: 60px; -} - -.c1.fi-margin-bottom-xxxxl { - margin-bottom: 80px; -} - -.c1.fi-margin-bottom-insetXxs { - margin-bottom: 2px; -} - -.c1.fi-margin-bottom-insetXs { - margin-bottom: 4px; -} - -.c1.fi-margin-bottom-insetS { - margin-bottom: 6px; -} - -.c1.fi-margin-bottom-insetM { - margin-bottom: 8px; -} - -.c1.fi-margin-bottom-insetL { - margin-bottom: 10px; -} - -.c1.fi-margin-bottom-insetXl { - margin-bottom: 16px; -} - -.c1.fi-margin-bottom-insetXxl { - margin-bottom: 20px; -} - -.c1.fi-margin-left-xxs { - margin-left: 5px; -} - -.c1.fi-margin-left-xs { - margin-left: 10px; -} - -.c1.fi-margin-left-s { - margin-left: 15px; -} - -.c1.fi-margin-left-m { - margin-left: 20px; -} - -.c1.fi-margin-left-l { - margin-left: 25px; -} - -.c1.fi-margin-left-xl { - margin-left: 30px; -} - -.c1.fi-margin-left-xxl { - margin-left: 40px; -} - -.c1.fi-margin-left-xxxl { - margin-left: 60px; -} - -.c1.fi-margin-left-xxxxl { - margin-left: 80px; -} - -.c1.fi-margin-left-insetXxs { - margin-left: 2px; -} - -.c1.fi-margin-left-insetXs { - margin-left: 4px; -} - -.c1.fi-margin-left-insetS { - margin-left: 6px; -} - -.c1.fi-margin-left-insetM { - margin-left: 8px; -} - -.c1.fi-margin-left-insetL { - margin-left: 10px; -} - -.c1.fi-margin-left-insetXl { - margin-left: 16px; -} - -.c1.fi-margin-left-insetXxl { - margin-left: 20px; -} - -.c1.fi-padding-xxs { - padding: 5px; -} - -.c1.fi-padding-xs { - padding: 10px; -} - -.c1.fi-padding-s { - padding: 15px; -} - -.c1.fi-padding-m { - padding: 20px; -} - -.c1.fi-padding-l { - padding: 25px; -} - -.c1.fi-padding-xl { - padding: 30px; -} - -.c1.fi-padding-xxl { - padding: 40px; -} - -.c1.fi-padding-xxxl { - padding: 60px; -} - -.c1.fi-padding-xxxxl { - padding: 80px; -} - -.c1.fi-padding-insetXxs { - padding: 2px; -} - -.c1.fi-padding-insetXs { - padding: 4px; -} - -.c1.fi-padding-insetS { - padding: 6px; -} - -.c1.fi-padding-insetM { - padding: 8px; -} - -.c1.fi-padding-insetL { - padding: 10px; -} - -.c1.fi-padding-insetXl { - padding: 16px; -} - -.c1.fi-padding-insetXxl { - padding: 20px; -} - -.c1.fi-padding-top-xxs { - padding-top: 5px; -} - -.c1.fi-padding-top-xs { - padding-top: 10px; -} - -.c1.fi-padding-top-s { - padding-top: 15px; -} - -.c1.fi-padding-top-m { - padding-top: 20px; -} - -.c1.fi-padding-top-l { - padding-top: 25px; -} - -.c1.fi-padding-top-xl { - padding-top: 30px; -} - -.c1.fi-padding-top-xxl { - padding-top: 40px; -} - -.c1.fi-padding-top-xxxl { - padding-top: 60px; -} - -.c1.fi-padding-top-xxxxl { - padding-top: 80px; -} - -.c1.fi-padding-top-insetXxs { - padding-top: 2px; -} - -.c1.fi-padding-top-insetXs { - padding-top: 4px; -} - -.c1.fi-padding-top-insetS { - padding-top: 6px; -} - -.c1.fi-padding-top-insetM { - padding-top: 8px; -} - -.c1.fi-padding-top-insetL { - padding-top: 10px; -} - -.c1.fi-padding-top-insetXl { - padding-top: 16px; -} - -.c1.fi-padding-top-insetXxl { - padding-top: 20px; -} - -.c1.fi-padding-right-xxs { - padding-right: 5px; -} - -.c1.fi-padding-right-xs { - padding-right: 10px; -} - -.c1.fi-padding-right-s { - padding-right: 15px; -} - -.c1.fi-padding-right-m { - padding-right: 20px; -} - -.c1.fi-padding-right-l { - padding-right: 25px; -} - -.c1.fi-padding-right-xl { - padding-right: 30px; -} - -.c1.fi-padding-right-xxl { - padding-right: 40px; -} - -.c1.fi-padding-right-xxxl { - padding-right: 60px; -} - -.c1.fi-padding-right-xxxxl { - padding-right: 80px; -} - -.c1.fi-padding-right-insetXxs { - padding-right: 2px; -} - -.c1.fi-padding-right-insetXs { - padding-right: 4px; -} - -.c1.fi-padding-right-insetS { - padding-right: 6px; -} - -.c1.fi-padding-right-insetM { - padding-right: 8px; -} - -.c1.fi-padding-right-insetL { - padding-right: 10px; -} - -.c1.fi-padding-right-insetXl { - padding-right: 16px; -} - -.c1.fi-padding-right-insetXxl { - padding-right: 20px; -} - -.c1.fi-padding-bottom-xxs { - padding-bottom: 5px; -} - -.c1.fi-padding-bottom-xs { - padding-bottom: 10px; -} - -.c1.fi-padding-bottom-s { - padding-bottom: 15px; -} - -.c1.fi-padding-bottom-m { - padding-bottom: 20px; -} - -.c1.fi-padding-bottom-l { - padding-bottom: 25px; -} - -.c1.fi-padding-bottom-xl { - padding-bottom: 30px; -} - -.c1.fi-padding-bottom-xxl { - padding-bottom: 40px; -} - -.c1.fi-padding-bottom-xxxl { - padding-bottom: 60px; -} - -.c1.fi-padding-bottom-xxxxl { - padding-bottom: 80px; -} - -.c1.fi-padding-bottom-insetXxs { - padding-bottom: 2px; -} - -.c1.fi-padding-bottom-insetXs { - padding-bottom: 4px; -} - -.c1.fi-padding-bottom-insetS { - padding-bottom: 6px; -} - -.c1.fi-padding-bottom-insetM { - padding-bottom: 8px; -} - -.c1.fi-padding-bottom-insetL { - padding-bottom: 10px; -} - -.c1.fi-padding-bottom-insetXl { - padding-bottom: 16px; -} - -.c1.fi-padding-bottom-insetXxl { - padding-bottom: 20px; -} - -.c1.fi-padding-left-xxs { - padding-left: 5px; -} - -.c1.fi-padding-left-xs { - padding-left: 10px; -} - -.c1.fi-padding-left-s { - padding-left: 15px; -} - -.c1.fi-padding-left-m { - padding-left: 20px; -} - -.c1.fi-padding-left-l { - padding-left: 25px; -} - -.c1.fi-padding-left-xl { - padding-left: 30px; -} - -.c1.fi-padding-left-xxl { - padding-left: 40px; -} - -.c1.fi-padding-left-xxxl { - padding-left: 60px; -} - -.c1.fi-padding-left-xxxxl { - padding-left: 80px; -} - -.c1.fi-padding-left-insetXxs { - padding-left: 2px; -} - -.c1.fi-padding-left-insetXs { - padding-left: 4px; -} - -.c1.fi-padding-left-insetS { - padding-left: 6px; -} - -.c1.fi-padding-left-insetM { - padding-left: 8px; -} - -.c1.fi-padding-left-insetL { - padding-left: 10px; -} - -.c1.fi-padding-left-insetXl { - padding-left: 16px; -} - -.c1.fi-padding-left-insetXxl { - padding-left: 20px; -} -
@@ -696,7 +56,8 @@ exports[`calling render with the same component on the same container does not r Hey this is test
Hey this is test lead
diff --git a/src/core/Button/Button.baseStyles.tsx b/src/core/Button/Button.baseStyles.tsx index cce48ee77..221df65eb 100644 --- a/src/core/Button/Button.baseStyles.tsx +++ b/src/core/Button/Button.baseStyles.tsx @@ -2,7 +2,6 @@ import { css } from 'styled-components'; import { SuomifiTheme } from '../theme'; import { button } from '../theme/reset'; import { alphaHex } from '../../utils/css'; -import { spacingClasses } from '../theme/utils/spacing'; const invertedStyles = (theme: SuomifiTheme) => css` &.fi-button--inverted { @@ -108,8 +107,6 @@ export const baseStyles = (theme: SuomifiTheme) => css` cursor: pointer; border: 1px solid transparent; /* For high contrast mode */ - ${spacingClasses(theme)} - &:focus { position: relative; ${theme.focuses.highContrastFocus} /* For high contrast mode */ diff --git a/src/core/Button/Button.tsx b/src/core/Button/Button.tsx index b174e51f1..983cddb95 100644 --- a/src/core/Button/Button.tsx +++ b/src/core/Button/Button.tsx @@ -5,9 +5,9 @@ import { baseStyles } from './Button.baseStyles'; import { HtmlButton, HtmlButtonProps, HtmlSpan } from '../../reset'; import { SuomifiThemeConsumer, SuomifiThemeProp } from '../theme'; import { - getSpacingClassNamesFromProps, + spacingStyle, separateSpacingProps, - SpacingProps, + MarginProps, } from '../theme/utils/spacing'; export type ButtonVariant = @@ -19,7 +19,7 @@ export type ButtonVariant = export interface ButtonProps extends Omit, - SpacingProps { + MarginProps { /** * Variant for the button * `default` | `inverted` | `secondary` | `secondaryNoBorder` | `secondaryLight` @@ -69,7 +69,7 @@ const fullWidthClassName = `${baseClassName}--fullwidth`; class BaseButton extends Component { render() { const [spacingProps, baseProps] = separateSpacingProps(this.props); - const spacingClassnames = getSpacingClassNamesFromProps(spacingProps); + const spacing = spacingStyle(spacingProps); const { fullWidth, variant = 'default', @@ -81,6 +81,7 @@ class BaseButton extends Component { iconRight, forwardedRef, children, + style, ...passProps } = baseProps; const onClickProp = !!disabled || !!ariaDisabled ? {} : { onClick }; @@ -93,7 +94,7 @@ class BaseButton extends Component { aria-disabled={!!ariaDisabled || !!disabled} forwardedRef={forwardedRef} disabled={!!disabled} - className={classnames(baseClassName, className, spacingClassnames, { + className={classnames(baseClassName, className, { [disabledClassName]: !!disabled || !!ariaDisabled, [`${baseClassName}--inverted`]: variant === 'inverted', [`${baseClassName}--secondary`]: variant === 'secondary', @@ -102,6 +103,7 @@ class BaseButton extends Component { [`${baseClassName}--secondary-light`]: variant === 'secondaryLight', [fullWidthClassName]: fullWidth, })} + style={{ ...spacing, ...style }} > {!!icon && icon} {children} diff --git a/src/core/Button/__snapshots__/Button.test.tsx.snap b/src/core/Button/__snapshots__/Button.test.tsx.snap index 36e129789..8074de637 100644 --- a/src/core/Button/__snapshots__/Button.test.tsx.snap +++ b/src/core/Button/__snapshots__/Button.test.tsx.snap @@ -111,649 +111,333 @@ exports[`Button variant default should match snapshot 1`] = ` border: 1px solid transparent; } -.c1.fi-margin-xxs { - margin: 5px; -} - -.c1.fi-margin-xs { - margin: 10px; -} - -.c1.fi-margin-s { - margin: 15px; -} - -.c1.fi-margin-m { - margin: 20px; +.c1:focus { + position: relative; + outline: 3px solid transparent; } -.c1.fi-margin-l { - margin: 25px; +.c1:focus::after { + content: ''; + position: absolute; + pointer-events: none; + top: -2px; + right: -2px; + bottom: -2px; + left: -2px; + border-radius: 2px; + background-color: transparent; + border: 0px solid hsl(0,0%,100%); + box-sizing: border-box; + box-shadow: 0 0 0 2px hsl(196,77%,44%); + z-index: 9999; } -.c1.fi-margin-xl { - margin: 30px; +.c1:hover { + background: linear-gradient(0deg,hsl(212,63%,45%) 0%,hsl(212,63%,49%) 100%); + outline: 2px solid transparent; } -.c1.fi-margin-xxl { - margin: 40px; +.c1:active { + background: hsl(212,63%,37%); } -.c1.fi-margin-xxxl { - margin: 60px; +.c1.fi-button--disabled, +.c1[disabled], +.c1:disabled { + text-shadow: 0 1px 1px rgba(33,33,33,0.5); + background: linear-gradient(0deg,hsl(202,7%,67%) 0%,hsl(202,7%,80%) 100%); + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: not-allowed; } -.c1.fi-margin-xxxxl { - margin: 80px; +.c1.fi-button--disabled::after { + border: none; + box-shadow: none; } -.c1.fi-margin-insetXxs { - margin: 2px; +.c1.fi-button--fullwidth { + display: block; + width: 100%; } -.c1.fi-margin-insetXs { - margin: 4px; +.c1.fi-button--inverted { + background: none; + background-color: hsl(212,63%,45%); + border: 1px solid hsl(0,0%,100%); + text-shadow: none; } -.c1.fi-margin-insetS { - margin: 6px; +.c1.fi-button--inverted:hover { + background: linear-gradient(-180deg,hsla(0,0%,100%,0.1) 0%,hsla(0,0%,100%,0) 100%); } -.c1.fi-margin-insetM { - margin: 8px; +.c1.fi-button--inverted:active { + background: none; + background-color: hsl(212,63%,45%); } -.c1.fi-margin-insetL { - margin: 10px; +.c1.fi-button--inverted.fi-button--disabled, +.c1.fi-button--inverted[disabled], +.c1.fi-button--inverted:disabled { + opacity: 0.41; + background: none; + background-color: none; } -.c1.fi-margin-insetXl { - margin: 16px; +.c1.fi-button--secondary { + color: hsl(212,63%,45%); + background: none; + background-color: hsl(0,0%,100%); + border: 1px solid hsl(212,63%,45%); + text-shadow: none; } -.c1.fi-margin-insetXxl { - margin: 20px; +.c1.fi-button--secondary:hover { + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); } -.c1.fi-margin-top-xxs { - margin-top: 5px; +.c1.fi-button--secondary:active { + background: none; + background-color: hsl(202,7%,93%); } -.c1.fi-margin-top-xs { - margin-top: 10px; +.c1.fi-button--secondary.fi-button--disabled, +.c1.fi-button--secondary[disabled], +.c1.fi-button--secondary:disabled { + color: hsl(202,7%,67%); + text-shadow: none; + background: none; + background-color: hsl(212,63%,98%); + border-color: hsl(202,7%,67%); } -.c1.fi-margin-top-s { - margin-top: 15px; +.c1.fi-button--secondary-noborder { + color: hsl(212,63%,45%); + background: none; + background-color: hsl(0,0%,100%); + border: 1px solid hsl(212,63%,45%); + text-shadow: none; + border: none; + background-color: transparent; } -.c1.fi-margin-top-m { - margin-top: 20px; +.c1.fi-button--secondary-noborder:hover { + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); } -.c1.fi-margin-top-l { - margin-top: 25px; +.c1.fi-button--secondary-noborder:active { + background: none; + background-color: hsl(202,7%,93%); } -.c1.fi-margin-top-xl { - margin-top: 30px; +.c1.fi-button--secondary-noborder.fi-button--disabled, +.c1.fi-button--secondary-noborder[disabled], +.c1.fi-button--secondary-noborder:disabled { + color: hsl(202,7%,67%); + text-shadow: none; + background: none; + background-color: hsl(212,63%,98%); + border-color: hsl(202,7%,67%); } -.c1.fi-margin-top-xxl { - margin-top: 40px; +.c1.fi-button--secondary-light { + color: hsl(212,63%,45%); + color: hsl(212,63%,45%); + background: none; + background-color: hsl(0,0%,100%); + border: 1px solid hsl(212,63%,45%); + text-shadow: none; + background: linear-gradient(0deg,hsl(215,100%,95%),hsl(215,100%,97%)); + border: none; } -.c1.fi-margin-top-xxxl { - margin-top: 60px; +.c1.fi-button--secondary-light:hover { + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); } -.c1.fi-margin-top-xxxxl { - margin-top: 80px; +.c1.fi-button--secondary-light:active { + background: none; + background-color: hsl(202,7%,93%); } -.c1.fi-margin-top-insetXxs { - margin-top: 2px; +.c1.fi-button--secondary-light.fi-button--disabled, +.c1.fi-button--secondary-light[disabled], +.c1.fi-button--secondary-light:disabled { + color: hsl(202,7%,67%); + text-shadow: none; + background: none; + background-color: hsl(212,63%,98%); + border-color: hsl(202,7%,67%); } -.c1.fi-margin-top-insetXs { - margin-top: 4px; +.c1.fi-button--secondary-light:hover { + background: linear-gradient(0deg,hsl(215,100%,97%),hsl(212,63%,98%)); } -.c1.fi-margin-top-insetS { - margin-top: 6px; +.c1.fi-button--secondary-light:active { + background: linear-gradient(0deg,hsl(202,7%,93%),hsl(202,7%,97%)); } -.c1.fi-margin-top-insetM { - margin-top: 8px; +.c1.fi-button--secondary-light.fi-button--disabled, +.c1.fi-button--secondary-light[disabled], +.c1.fi-button--secondary-light:disabled { + color: hsl(202,7%,67%); + background: none; + background-color: hsl(202,7%,97%); } -.c1.fi-margin-top-insetL { - margin-top: 10px; +.c1 > .fi-button_icon > .fi-icon { + width: 16px; + height: 16px; + margin-right: 8px; + vertical-align: middle; + -webkit-transform: translateY(-0.1em); + -ms-transform: translateY(-0.1em); + transform: translateY(-0.1em); } -.c1.fi-margin-top-insetXl { - margin-top: 16px; +.c1 > .fi-button_icon--right > .fi-icon { + margin-right: 0; + margin-left: 8px; } -.c1.fi-margin-top-insetXxl { - margin-top: 20px; +.c1.fi-button--disabled > .fi-button_icon { + cursor: not-allowed; } -.c1.fi-margin-right-xxs { - margin-right: 5px; -} + +`; -.c1.fi-margin-right-xs { - margin-right: 10px; +exports[`Button variant inverted should match snapshot 1`] = ` +.c0 { + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; + font: 100% inherit; + line-height: 1; + text-align: left; + -webkit-text-decoration: none; + text-decoration: none; + vertical-align: baseline; + color: inherit; + background: none; + cursor: inherit; + display: inline-block; + max-width: 100%; + cursor: pointer; } -.c1.fi-margin-right-s { - margin-right: 15px; +.c0:-moz-focusring { + outline: 1px dotted ButtonText; } -.c1.fi-margin-right-m { - margin-right: 20px; +.c0::-moz-focus-inner { + border-style: none; + padding: 0; } -.c1.fi-margin-right-l { - margin-right: 25px; +.c0::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; } -.c1.fi-margin-right-xl { - margin-right: 30px; +.c0::-webkit-inner-spin-button { + height: auto; } -.c1.fi-margin-right-xxl { - margin-right: 40px; +.c0::-webkit-outer-spin-button { + height: auto; } -.c1.fi-margin-right-xxxl { - margin-right: 60px; +.c0::before, +.c0::after { + box-sizing: border-box; } -.c1.fi-margin-right-xxxxl { - margin-right: 80px; +.c2 { + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; + font: 100% inherit; + line-height: 1; + text-align: left; + -webkit-text-decoration: none; + text-decoration: none; + vertical-align: baseline; + color: inherit; + background: none; + cursor: inherit; + display: inline; + max-width: 100%; + word-wrap: normal; + word-break: normal; + white-space: normal; } -.c1.fi-margin-right-insetXxs { - margin-right: 2px; +.c2::before, +.c2::after { + box-sizing: border-box; } -.c1.fi-margin-right-insetXs { - margin-right: 4px; +.c1 { + color: hsl(0,0%,13%); + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 600; + font-size: 14px; + line-height: 20px; + padding: 10px 20px; + min-height: 40px; + color: hsl(0,0%,100%); + background: linear-gradient(0deg,hsl(212,63%,37%) 0%,hsl(212,63%,45%) 100%); + border-radius: 2px; + text-align: center; + text-shadow: 0 1px 1px hsla(214,100%,24%,0.5); + cursor: pointer; + border: 1px solid transparent; } -.c1.fi-margin-right-insetS { - margin-right: 6px; -} - -.c1.fi-margin-right-insetM { - margin-right: 8px; -} - -.c1.fi-margin-right-insetL { - margin-right: 10px; -} - -.c1.fi-margin-right-insetXl { - margin-right: 16px; -} - -.c1.fi-margin-right-insetXxl { - margin-right: 20px; -} - -.c1.fi-margin-bottom-xxs { - margin-bottom: 5px; -} - -.c1.fi-margin-bottom-xs { - margin-bottom: 10px; -} - -.c1.fi-margin-bottom-s { - margin-bottom: 15px; -} - -.c1.fi-margin-bottom-m { - margin-bottom: 20px; -} - -.c1.fi-margin-bottom-l { - margin-bottom: 25px; -} - -.c1.fi-margin-bottom-xl { - margin-bottom: 30px; -} - -.c1.fi-margin-bottom-xxl { - margin-bottom: 40px; -} - -.c1.fi-margin-bottom-xxxl { - margin-bottom: 60px; -} - -.c1.fi-margin-bottom-xxxxl { - margin-bottom: 80px; -} - -.c1.fi-margin-bottom-insetXxs { - margin-bottom: 2px; -} - -.c1.fi-margin-bottom-insetXs { - margin-bottom: 4px; -} - -.c1.fi-margin-bottom-insetS { - margin-bottom: 6px; -} - -.c1.fi-margin-bottom-insetM { - margin-bottom: 8px; -} - -.c1.fi-margin-bottom-insetL { - margin-bottom: 10px; -} - -.c1.fi-margin-bottom-insetXl { - margin-bottom: 16px; -} - -.c1.fi-margin-bottom-insetXxl { - margin-bottom: 20px; -} - -.c1.fi-margin-left-xxs { - margin-left: 5px; -} - -.c1.fi-margin-left-xs { - margin-left: 10px; -} - -.c1.fi-margin-left-s { - margin-left: 15px; -} - -.c1.fi-margin-left-m { - margin-left: 20px; -} - -.c1.fi-margin-left-l { - margin-left: 25px; -} - -.c1.fi-margin-left-xl { - margin-left: 30px; -} - -.c1.fi-margin-left-xxl { - margin-left: 40px; -} - -.c1.fi-margin-left-xxxl { - margin-left: 60px; -} - -.c1.fi-margin-left-xxxxl { - margin-left: 80px; -} - -.c1.fi-margin-left-insetXxs { - margin-left: 2px; -} - -.c1.fi-margin-left-insetXs { - margin-left: 4px; -} - -.c1.fi-margin-left-insetS { - margin-left: 6px; -} - -.c1.fi-margin-left-insetM { - margin-left: 8px; -} - -.c1.fi-margin-left-insetL { - margin-left: 10px; -} - -.c1.fi-margin-left-insetXl { - margin-left: 16px; -} - -.c1.fi-margin-left-insetXxl { - margin-left: 20px; -} - -.c1.fi-padding-xxs { - padding: 5px; -} - -.c1.fi-padding-xs { - padding: 10px; -} - -.c1.fi-padding-s { - padding: 15px; -} - -.c1.fi-padding-m { - padding: 20px; -} - -.c1.fi-padding-l { - padding: 25px; -} - -.c1.fi-padding-xl { - padding: 30px; -} - -.c1.fi-padding-xxl { - padding: 40px; -} - -.c1.fi-padding-xxxl { - padding: 60px; -} - -.c1.fi-padding-xxxxl { - padding: 80px; -} - -.c1.fi-padding-insetXxs { - padding: 2px; -} - -.c1.fi-padding-insetXs { - padding: 4px; -} - -.c1.fi-padding-insetS { - padding: 6px; -} - -.c1.fi-padding-insetM { - padding: 8px; -} - -.c1.fi-padding-insetL { - padding: 10px; -} - -.c1.fi-padding-insetXl { - padding: 16px; -} - -.c1.fi-padding-insetXxl { - padding: 20px; -} - -.c1.fi-padding-top-xxs { - padding-top: 5px; -} - -.c1.fi-padding-top-xs { - padding-top: 10px; -} - -.c1.fi-padding-top-s { - padding-top: 15px; -} - -.c1.fi-padding-top-m { - padding-top: 20px; -} - -.c1.fi-padding-top-l { - padding-top: 25px; -} - -.c1.fi-padding-top-xl { - padding-top: 30px; -} - -.c1.fi-padding-top-xxl { - padding-top: 40px; -} - -.c1.fi-padding-top-xxxl { - padding-top: 60px; -} - -.c1.fi-padding-top-xxxxl { - padding-top: 80px; -} - -.c1.fi-padding-top-insetXxs { - padding-top: 2px; -} - -.c1.fi-padding-top-insetXs { - padding-top: 4px; -} - -.c1.fi-padding-top-insetS { - padding-top: 6px; -} - -.c1.fi-padding-top-insetM { - padding-top: 8px; -} - -.c1.fi-padding-top-insetL { - padding-top: 10px; -} - -.c1.fi-padding-top-insetXl { - padding-top: 16px; -} - -.c1.fi-padding-top-insetXxl { - padding-top: 20px; -} - -.c1.fi-padding-right-xxs { - padding-right: 5px; -} - -.c1.fi-padding-right-xs { - padding-right: 10px; -} - -.c1.fi-padding-right-s { - padding-right: 15px; -} - -.c1.fi-padding-right-m { - padding-right: 20px; -} - -.c1.fi-padding-right-l { - padding-right: 25px; -} - -.c1.fi-padding-right-xl { - padding-right: 30px; -} - -.c1.fi-padding-right-xxl { - padding-right: 40px; -} - -.c1.fi-padding-right-xxxl { - padding-right: 60px; -} - -.c1.fi-padding-right-xxxxl { - padding-right: 80px; -} - -.c1.fi-padding-right-insetXxs { - padding-right: 2px; -} - -.c1.fi-padding-right-insetXs { - padding-right: 4px; -} - -.c1.fi-padding-right-insetS { - padding-right: 6px; -} - -.c1.fi-padding-right-insetM { - padding-right: 8px; -} - -.c1.fi-padding-right-insetL { - padding-right: 10px; -} - -.c1.fi-padding-right-insetXl { - padding-right: 16px; -} - -.c1.fi-padding-right-insetXxl { - padding-right: 20px; -} - -.c1.fi-padding-bottom-xxs { - padding-bottom: 5px; -} - -.c1.fi-padding-bottom-xs { - padding-bottom: 10px; -} - -.c1.fi-padding-bottom-s { - padding-bottom: 15px; -} - -.c1.fi-padding-bottom-m { - padding-bottom: 20px; -} - -.c1.fi-padding-bottom-l { - padding-bottom: 25px; -} - -.c1.fi-padding-bottom-xl { - padding-bottom: 30px; -} - -.c1.fi-padding-bottom-xxl { - padding-bottom: 40px; -} - -.c1.fi-padding-bottom-xxxl { - padding-bottom: 60px; -} - -.c1.fi-padding-bottom-xxxxl { - padding-bottom: 80px; -} - -.c1.fi-padding-bottom-insetXxs { - padding-bottom: 2px; -} - -.c1.fi-padding-bottom-insetXs { - padding-bottom: 4px; -} - -.c1.fi-padding-bottom-insetS { - padding-bottom: 6px; -} - -.c1.fi-padding-bottom-insetM { - padding-bottom: 8px; -} - -.c1.fi-padding-bottom-insetL { - padding-bottom: 10px; -} - -.c1.fi-padding-bottom-insetXl { - padding-bottom: 16px; -} - -.c1.fi-padding-bottom-insetXxl { - padding-bottom: 20px; -} - -.c1.fi-padding-left-xxs { - padding-left: 5px; -} - -.c1.fi-padding-left-xs { - padding-left: 10px; -} - -.c1.fi-padding-left-s { - padding-left: 15px; -} - -.c1.fi-padding-left-m { - padding-left: 20px; -} - -.c1.fi-padding-left-l { - padding-left: 25px; -} - -.c1.fi-padding-left-xl { - padding-left: 30px; -} - -.c1.fi-padding-left-xxl { - padding-left: 40px; -} - -.c1.fi-padding-left-xxxl { - padding-left: 60px; -} - -.c1.fi-padding-left-xxxxl { - padding-left: 80px; -} - -.c1.fi-padding-left-insetXxs { - padding-left: 2px; -} - -.c1.fi-padding-left-insetXs { - padding-left: 4px; -} - -.c1.fi-padding-left-insetS { - padding-left: 6px; -} - -.c1.fi-padding-left-insetM { - padding-left: 8px; -} - -.c1.fi-padding-left-insetL { - padding-left: 10px; -} - -.c1.fi-padding-left-insetXl { - padding-left: 16px; -} - -.c1.fi-padding-left-insetXxl { - padding-left: 20px; -} - -.c1:focus { - position: relative; - outline: 3px solid transparent; +.c1:focus { + position: relative; + outline: 3px solid transparent; } .c1:focus::after { @@ -950,21 +634,21 @@ exports[`Button variant default should match snapshot 1`] = ` `; -exports[`Button variant inverted should match snapshot 1`] = ` +exports[`Button variant link match snapshot 1`] = ` .c0 { line-height: 1.15; -ms-text-size-adjust: 100%; @@ -1075,2577 +759,9 @@ exports[`Button variant inverted should match snapshot 1`] = ` border: 1px solid transparent; } -.c1.fi-margin-xxs { - margin: 5px; -} - -.c1.fi-margin-xs { - margin: 10px; -} - -.c1.fi-margin-s { - margin: 15px; -} - -.c1.fi-margin-m { - margin: 20px; -} - -.c1.fi-margin-l { - margin: 25px; -} - -.c1.fi-margin-xl { - margin: 30px; -} - -.c1.fi-margin-xxl { - margin: 40px; -} - -.c1.fi-margin-xxxl { - margin: 60px; -} - -.c1.fi-margin-xxxxl { - margin: 80px; -} - -.c1.fi-margin-insetXxs { - margin: 2px; -} - -.c1.fi-margin-insetXs { - margin: 4px; -} - -.c1.fi-margin-insetS { - margin: 6px; -} - -.c1.fi-margin-insetM { - margin: 8px; -} - -.c1.fi-margin-insetL { - margin: 10px; -} - -.c1.fi-margin-insetXl { - margin: 16px; -} - -.c1.fi-margin-insetXxl { - margin: 20px; -} - -.c1.fi-margin-top-xxs { - margin-top: 5px; -} - -.c1.fi-margin-top-xs { - margin-top: 10px; -} - -.c1.fi-margin-top-s { - margin-top: 15px; -} - -.c1.fi-margin-top-m { - margin-top: 20px; -} - -.c1.fi-margin-top-l { - margin-top: 25px; -} - -.c1.fi-margin-top-xl { - margin-top: 30px; -} - -.c1.fi-margin-top-xxl { - margin-top: 40px; -} - -.c1.fi-margin-top-xxxl { - margin-top: 60px; -} - -.c1.fi-margin-top-xxxxl { - margin-top: 80px; -} - -.c1.fi-margin-top-insetXxs { - margin-top: 2px; -} - -.c1.fi-margin-top-insetXs { - margin-top: 4px; -} - -.c1.fi-margin-top-insetS { - margin-top: 6px; -} - -.c1.fi-margin-top-insetM { - margin-top: 8px; -} - -.c1.fi-margin-top-insetL { - margin-top: 10px; -} - -.c1.fi-margin-top-insetXl { - margin-top: 16px; -} - -.c1.fi-margin-top-insetXxl { - margin-top: 20px; -} - -.c1.fi-margin-right-xxs { - margin-right: 5px; -} - -.c1.fi-margin-right-xs { - margin-right: 10px; -} - -.c1.fi-margin-right-s { - margin-right: 15px; -} - -.c1.fi-margin-right-m { - margin-right: 20px; -} - -.c1.fi-margin-right-l { - margin-right: 25px; -} - -.c1.fi-margin-right-xl { - margin-right: 30px; -} - -.c1.fi-margin-right-xxl { - margin-right: 40px; -} - -.c1.fi-margin-right-xxxl { - margin-right: 60px; -} - -.c1.fi-margin-right-xxxxl { - margin-right: 80px; -} - -.c1.fi-margin-right-insetXxs { - margin-right: 2px; -} - -.c1.fi-margin-right-insetXs { - margin-right: 4px; -} - -.c1.fi-margin-right-insetS { - margin-right: 6px; -} - -.c1.fi-margin-right-insetM { - margin-right: 8px; -} - -.c1.fi-margin-right-insetL { - margin-right: 10px; -} - -.c1.fi-margin-right-insetXl { - margin-right: 16px; -} - -.c1.fi-margin-right-insetXxl { - margin-right: 20px; -} - -.c1.fi-margin-bottom-xxs { - margin-bottom: 5px; -} - -.c1.fi-margin-bottom-xs { - margin-bottom: 10px; -} - -.c1.fi-margin-bottom-s { - margin-bottom: 15px; -} - -.c1.fi-margin-bottom-m { - margin-bottom: 20px; -} - -.c1.fi-margin-bottom-l { - margin-bottom: 25px; -} - -.c1.fi-margin-bottom-xl { - margin-bottom: 30px; -} - -.c1.fi-margin-bottom-xxl { - margin-bottom: 40px; -} - -.c1.fi-margin-bottom-xxxl { - margin-bottom: 60px; -} - -.c1.fi-margin-bottom-xxxxl { - margin-bottom: 80px; -} - -.c1.fi-margin-bottom-insetXxs { - margin-bottom: 2px; -} - -.c1.fi-margin-bottom-insetXs { - margin-bottom: 4px; -} - -.c1.fi-margin-bottom-insetS { - margin-bottom: 6px; -} - -.c1.fi-margin-bottom-insetM { - margin-bottom: 8px; -} - -.c1.fi-margin-bottom-insetL { - margin-bottom: 10px; -} - -.c1.fi-margin-bottom-insetXl { - margin-bottom: 16px; -} - -.c1.fi-margin-bottom-insetXxl { - margin-bottom: 20px; -} - -.c1.fi-margin-left-xxs { - margin-left: 5px; -} - -.c1.fi-margin-left-xs { - margin-left: 10px; -} - -.c1.fi-margin-left-s { - margin-left: 15px; -} - -.c1.fi-margin-left-m { - margin-left: 20px; -} - -.c1.fi-margin-left-l { - margin-left: 25px; -} - -.c1.fi-margin-left-xl { - margin-left: 30px; -} - -.c1.fi-margin-left-xxl { - margin-left: 40px; -} - -.c1.fi-margin-left-xxxl { - margin-left: 60px; -} - -.c1.fi-margin-left-xxxxl { - margin-left: 80px; -} - -.c1.fi-margin-left-insetXxs { - margin-left: 2px; -} - -.c1.fi-margin-left-insetXs { - margin-left: 4px; -} - -.c1.fi-margin-left-insetS { - margin-left: 6px; -} - -.c1.fi-margin-left-insetM { - margin-left: 8px; -} - -.c1.fi-margin-left-insetL { - margin-left: 10px; -} - -.c1.fi-margin-left-insetXl { - margin-left: 16px; -} - -.c1.fi-margin-left-insetXxl { - margin-left: 20px; -} - -.c1.fi-padding-xxs { - padding: 5px; -} - -.c1.fi-padding-xs { - padding: 10px; -} - -.c1.fi-padding-s { - padding: 15px; -} - -.c1.fi-padding-m { - padding: 20px; -} - -.c1.fi-padding-l { - padding: 25px; -} - -.c1.fi-padding-xl { - padding: 30px; -} - -.c1.fi-padding-xxl { - padding: 40px; -} - -.c1.fi-padding-xxxl { - padding: 60px; -} - -.c1.fi-padding-xxxxl { - padding: 80px; -} - -.c1.fi-padding-insetXxs { - padding: 2px; -} - -.c1.fi-padding-insetXs { - padding: 4px; -} - -.c1.fi-padding-insetS { - padding: 6px; -} - -.c1.fi-padding-insetM { - padding: 8px; -} - -.c1.fi-padding-insetL { - padding: 10px; -} - -.c1.fi-padding-insetXl { - padding: 16px; -} - -.c1.fi-padding-insetXxl { - padding: 20px; -} - -.c1.fi-padding-top-xxs { - padding-top: 5px; -} - -.c1.fi-padding-top-xs { - padding-top: 10px; -} - -.c1.fi-padding-top-s { - padding-top: 15px; -} - -.c1.fi-padding-top-m { - padding-top: 20px; -} - -.c1.fi-padding-top-l { - padding-top: 25px; -} - -.c1.fi-padding-top-xl { - padding-top: 30px; -} - -.c1.fi-padding-top-xxl { - padding-top: 40px; -} - -.c1.fi-padding-top-xxxl { - padding-top: 60px; -} - -.c1.fi-padding-top-xxxxl { - padding-top: 80px; -} - -.c1.fi-padding-top-insetXxs { - padding-top: 2px; -} - -.c1.fi-padding-top-insetXs { - padding-top: 4px; -} - -.c1.fi-padding-top-insetS { - padding-top: 6px; -} - -.c1.fi-padding-top-insetM { - padding-top: 8px; -} - -.c1.fi-padding-top-insetL { - padding-top: 10px; -} - -.c1.fi-padding-top-insetXl { - padding-top: 16px; -} - -.c1.fi-padding-top-insetXxl { - padding-top: 20px; -} - -.c1.fi-padding-right-xxs { - padding-right: 5px; -} - -.c1.fi-padding-right-xs { - padding-right: 10px; -} - -.c1.fi-padding-right-s { - padding-right: 15px; -} - -.c1.fi-padding-right-m { - padding-right: 20px; -} - -.c1.fi-padding-right-l { - padding-right: 25px; -} - -.c1.fi-padding-right-xl { - padding-right: 30px; -} - -.c1.fi-padding-right-xxl { - padding-right: 40px; -} - -.c1.fi-padding-right-xxxl { - padding-right: 60px; -} - -.c1.fi-padding-right-xxxxl { - padding-right: 80px; -} - -.c1.fi-padding-right-insetXxs { - padding-right: 2px; -} - -.c1.fi-padding-right-insetXs { - padding-right: 4px; -} - -.c1.fi-padding-right-insetS { - padding-right: 6px; -} - -.c1.fi-padding-right-insetM { - padding-right: 8px; -} - -.c1.fi-padding-right-insetL { - padding-right: 10px; -} - -.c1.fi-padding-right-insetXl { - padding-right: 16px; -} - -.c1.fi-padding-right-insetXxl { - padding-right: 20px; -} - -.c1.fi-padding-bottom-xxs { - padding-bottom: 5px; -} - -.c1.fi-padding-bottom-xs { - padding-bottom: 10px; -} - -.c1.fi-padding-bottom-s { - padding-bottom: 15px; -} - -.c1.fi-padding-bottom-m { - padding-bottom: 20px; -} - -.c1.fi-padding-bottom-l { - padding-bottom: 25px; -} - -.c1.fi-padding-bottom-xl { - padding-bottom: 30px; -} - -.c1.fi-padding-bottom-xxl { - padding-bottom: 40px; -} - -.c1.fi-padding-bottom-xxxl { - padding-bottom: 60px; -} - -.c1.fi-padding-bottom-xxxxl { - padding-bottom: 80px; -} - -.c1.fi-padding-bottom-insetXxs { - padding-bottom: 2px; -} - -.c1.fi-padding-bottom-insetXs { - padding-bottom: 4px; -} - -.c1.fi-padding-bottom-insetS { - padding-bottom: 6px; -} - -.c1.fi-padding-bottom-insetM { - padding-bottom: 8px; -} - -.c1.fi-padding-bottom-insetL { - padding-bottom: 10px; -} - -.c1.fi-padding-bottom-insetXl { - padding-bottom: 16px; -} - -.c1.fi-padding-bottom-insetXxl { - padding-bottom: 20px; -} - -.c1.fi-padding-left-xxs { - padding-left: 5px; -} - -.c1.fi-padding-left-xs { - padding-left: 10px; -} - -.c1.fi-padding-left-s { - padding-left: 15px; -} - -.c1.fi-padding-left-m { - padding-left: 20px; -} - -.c1.fi-padding-left-l { - padding-left: 25px; -} - -.c1.fi-padding-left-xl { - padding-left: 30px; -} - -.c1.fi-padding-left-xxl { - padding-left: 40px; -} - -.c1.fi-padding-left-xxxl { - padding-left: 60px; -} - -.c1.fi-padding-left-xxxxl { - padding-left: 80px; -} - -.c1.fi-padding-left-insetXxs { - padding-left: 2px; -} - -.c1.fi-padding-left-insetXs { - padding-left: 4px; -} - -.c1.fi-padding-left-insetS { - padding-left: 6px; -} - -.c1.fi-padding-left-insetM { - padding-left: 8px; -} - -.c1.fi-padding-left-insetL { - padding-left: 10px; -} - -.c1.fi-padding-left-insetXl { - padding-left: 16px; -} - -.c1.fi-padding-left-insetXxl { - padding-left: 20px; -} - -.c1:focus { - position: relative; - outline: 3px solid transparent; -} - -.c1:focus::after { - content: ''; - position: absolute; - pointer-events: none; - top: -2px; - right: -2px; - bottom: -2px; - left: -2px; - border-radius: 2px; - background-color: transparent; - border: 0px solid hsl(0,0%,100%); - box-sizing: border-box; - box-shadow: 0 0 0 2px hsl(196,77%,44%); - z-index: 9999; -} - -.c1:hover { - background: linear-gradient(0deg,hsl(212,63%,45%) 0%,hsl(212,63%,49%) 100%); - outline: 2px solid transparent; -} - -.c1:active { - background: hsl(212,63%,37%); -} - -.c1.fi-button--disabled, -.c1[disabled], -.c1:disabled { - text-shadow: 0 1px 1px rgba(33,33,33,0.5); - background: linear-gradient(0deg,hsl(202,7%,67%) 0%,hsl(202,7%,80%) 100%); - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - cursor: not-allowed; -} - -.c1.fi-button--disabled::after { - border: none; - box-shadow: none; -} - -.c1.fi-button--fullwidth { - display: block; - width: 100%; -} - -.c1.fi-button--inverted { - background: none; - background-color: hsl(212,63%,45%); - border: 1px solid hsl(0,0%,100%); - text-shadow: none; -} - -.c1.fi-button--inverted:hover { - background: linear-gradient(-180deg,hsla(0,0%,100%,0.1) 0%,hsla(0,0%,100%,0) 100%); -} - -.c1.fi-button--inverted:active { - background: none; - background-color: hsl(212,63%,45%); -} - -.c1.fi-button--inverted.fi-button--disabled, -.c1.fi-button--inverted[disabled], -.c1.fi-button--inverted:disabled { - opacity: 0.41; - background: none; - background-color: none; -} - -.c1.fi-button--secondary { - color: hsl(212,63%,45%); - background: none; - background-color: hsl(0,0%,100%); - border: 1px solid hsl(212,63%,45%); - text-shadow: none; -} - -.c1.fi-button--secondary:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); -} - -.c1.fi-button--secondary:active { - background: none; - background-color: hsl(202,7%,93%); -} - -.c1.fi-button--secondary.fi-button--disabled, -.c1.fi-button--secondary[disabled], -.c1.fi-button--secondary:disabled { - color: hsl(202,7%,67%); - text-shadow: none; - background: none; - background-color: hsl(212,63%,98%); - border-color: hsl(202,7%,67%); -} - -.c1.fi-button--secondary-noborder { - color: hsl(212,63%,45%); - background: none; - background-color: hsl(0,0%,100%); - border: 1px solid hsl(212,63%,45%); - text-shadow: none; - border: none; - background-color: transparent; -} - -.c1.fi-button--secondary-noborder:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); -} - -.c1.fi-button--secondary-noborder:active { - background: none; - background-color: hsl(202,7%,93%); -} - -.c1.fi-button--secondary-noborder.fi-button--disabled, -.c1.fi-button--secondary-noborder[disabled], -.c1.fi-button--secondary-noborder:disabled { - color: hsl(202,7%,67%); - text-shadow: none; - background: none; - background-color: hsl(212,63%,98%); - border-color: hsl(202,7%,67%); -} - -.c1.fi-button--secondary-light { - color: hsl(212,63%,45%); - color: hsl(212,63%,45%); - background: none; - background-color: hsl(0,0%,100%); - border: 1px solid hsl(212,63%,45%); - text-shadow: none; - background: linear-gradient(0deg,hsl(215,100%,95%),hsl(215,100%,97%)); - border: none; -} - -.c1.fi-button--secondary-light:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); -} - -.c1.fi-button--secondary-light:active { - background: none; - background-color: hsl(202,7%,93%); -} - -.c1.fi-button--secondary-light.fi-button--disabled, -.c1.fi-button--secondary-light[disabled], -.c1.fi-button--secondary-light:disabled { - color: hsl(202,7%,67%); - text-shadow: none; - background: none; - background-color: hsl(212,63%,98%); - border-color: hsl(202,7%,67%); -} - -.c1.fi-button--secondary-light:hover { - background: linear-gradient(0deg,hsl(215,100%,97%),hsl(212,63%,98%)); -} - -.c1.fi-button--secondary-light:active { - background: linear-gradient(0deg,hsl(202,7%,93%),hsl(202,7%,97%)); -} - -.c1.fi-button--secondary-light.fi-button--disabled, -.c1.fi-button--secondary-light[disabled], -.c1.fi-button--secondary-light:disabled { - color: hsl(202,7%,67%); - background: none; - background-color: hsl(202,7%,97%); -} - -.c1 > .fi-button_icon > .fi-icon { - width: 16px; - height: 16px; - margin-right: 8px; - vertical-align: middle; - -webkit-transform: translateY(-0.1em); - -ms-transform: translateY(-0.1em); - transform: translateY(-0.1em); -} - -.c1 > .fi-button_icon--right > .fi-icon { - margin-right: 0; - margin-left: 8px; -} - -.c1.fi-button--disabled > .fi-button_icon { - cursor: not-allowed; -} - - -`; - -exports[`Button variant link match snapshot 1`] = ` -.c0 { - line-height: 1.15; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - margin: 0; - overflow: visible; - text-transform: none; - -webkit-appearance: button; - margin: 0; - padding: 0; - border: 0; - box-sizing: border-box; - font: 100% inherit; - line-height: 1; - text-align: left; - -webkit-text-decoration: none; - text-decoration: none; - vertical-align: baseline; - color: inherit; - background: none; - cursor: inherit; - display: inline-block; - max-width: 100%; - cursor: pointer; -} - -.c0:-moz-focusring { - outline: 1px dotted ButtonText; -} - -.c0::-moz-focus-inner { - border-style: none; - padding: 0; -} - -.c0::-webkit-file-upload-button { - -webkit-appearance: button; - font: inherit; -} - -.c0::-webkit-inner-spin-button { - height: auto; -} - -.c0::-webkit-outer-spin-button { - height: auto; -} - -.c0::before, -.c0::after { - box-sizing: border-box; -} - -.c2 { - line-height: 1.15; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - margin: 0; - padding: 0; - border: 0; - box-sizing: border-box; - font: 100% inherit; - line-height: 1; - text-align: left; - -webkit-text-decoration: none; - text-decoration: none; - vertical-align: baseline; - color: inherit; - background: none; - cursor: inherit; - display: inline; - max-width: 100%; - word-wrap: normal; - word-break: normal; - white-space: normal; -} - -.c2::before, -.c2::after { - box-sizing: border-box; -} - -.c1 { - color: hsl(0,0%,13%); - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 600; - font-size: 14px; - line-height: 20px; - padding: 10px 20px; - min-height: 40px; - color: hsl(0,0%,100%); - background: linear-gradient(0deg,hsl(212,63%,37%) 0%,hsl(212,63%,45%) 100%); - border-radius: 2px; - text-align: center; - text-shadow: 0 1px 1px hsla(214,100%,24%,0.5); - cursor: pointer; - border: 1px solid transparent; -} - -.c1.fi-margin-xxs { - margin: 5px; -} - -.c1.fi-margin-xs { - margin: 10px; -} - -.c1.fi-margin-s { - margin: 15px; -} - -.c1.fi-margin-m { - margin: 20px; -} - -.c1.fi-margin-l { - margin: 25px; -} - -.c1.fi-margin-xl { - margin: 30px; -} - -.c1.fi-margin-xxl { - margin: 40px; -} - -.c1.fi-margin-xxxl { - margin: 60px; -} - -.c1.fi-margin-xxxxl { - margin: 80px; -} - -.c1.fi-margin-insetXxs { - margin: 2px; -} - -.c1.fi-margin-insetXs { - margin: 4px; -} - -.c1.fi-margin-insetS { - margin: 6px; -} - -.c1.fi-margin-insetM { - margin: 8px; -} - -.c1.fi-margin-insetL { - margin: 10px; -} - -.c1.fi-margin-insetXl { - margin: 16px; -} - -.c1.fi-margin-insetXxl { - margin: 20px; -} - -.c1.fi-margin-top-xxs { - margin-top: 5px; -} - -.c1.fi-margin-top-xs { - margin-top: 10px; -} - -.c1.fi-margin-top-s { - margin-top: 15px; -} - -.c1.fi-margin-top-m { - margin-top: 20px; -} - -.c1.fi-margin-top-l { - margin-top: 25px; -} - -.c1.fi-margin-top-xl { - margin-top: 30px; -} - -.c1.fi-margin-top-xxl { - margin-top: 40px; -} - -.c1.fi-margin-top-xxxl { - margin-top: 60px; -} - -.c1.fi-margin-top-xxxxl { - margin-top: 80px; -} - -.c1.fi-margin-top-insetXxs { - margin-top: 2px; -} - -.c1.fi-margin-top-insetXs { - margin-top: 4px; -} - -.c1.fi-margin-top-insetS { - margin-top: 6px; -} - -.c1.fi-margin-top-insetM { - margin-top: 8px; -} - -.c1.fi-margin-top-insetL { - margin-top: 10px; -} - -.c1.fi-margin-top-insetXl { - margin-top: 16px; -} - -.c1.fi-margin-top-insetXxl { - margin-top: 20px; -} - -.c1.fi-margin-right-xxs { - margin-right: 5px; -} - -.c1.fi-margin-right-xs { - margin-right: 10px; -} - -.c1.fi-margin-right-s { - margin-right: 15px; -} - -.c1.fi-margin-right-m { - margin-right: 20px; -} - -.c1.fi-margin-right-l { - margin-right: 25px; -} - -.c1.fi-margin-right-xl { - margin-right: 30px; -} - -.c1.fi-margin-right-xxl { - margin-right: 40px; -} - -.c1.fi-margin-right-xxxl { - margin-right: 60px; -} - -.c1.fi-margin-right-xxxxl { - margin-right: 80px; -} - -.c1.fi-margin-right-insetXxs { - margin-right: 2px; -} - -.c1.fi-margin-right-insetXs { - margin-right: 4px; -} - -.c1.fi-margin-right-insetS { - margin-right: 6px; -} - -.c1.fi-margin-right-insetM { - margin-right: 8px; -} - -.c1.fi-margin-right-insetL { - margin-right: 10px; -} - -.c1.fi-margin-right-insetXl { - margin-right: 16px; -} - -.c1.fi-margin-right-insetXxl { - margin-right: 20px; -} - -.c1.fi-margin-bottom-xxs { - margin-bottom: 5px; -} - -.c1.fi-margin-bottom-xs { - margin-bottom: 10px; -} - -.c1.fi-margin-bottom-s { - margin-bottom: 15px; -} - -.c1.fi-margin-bottom-m { - margin-bottom: 20px; -} - -.c1.fi-margin-bottom-l { - margin-bottom: 25px; -} - -.c1.fi-margin-bottom-xl { - margin-bottom: 30px; -} - -.c1.fi-margin-bottom-xxl { - margin-bottom: 40px; -} - -.c1.fi-margin-bottom-xxxl { - margin-bottom: 60px; -} - -.c1.fi-margin-bottom-xxxxl { - margin-bottom: 80px; -} - -.c1.fi-margin-bottom-insetXxs { - margin-bottom: 2px; -} - -.c1.fi-margin-bottom-insetXs { - margin-bottom: 4px; -} - -.c1.fi-margin-bottom-insetS { - margin-bottom: 6px; -} - -.c1.fi-margin-bottom-insetM { - margin-bottom: 8px; -} - -.c1.fi-margin-bottom-insetL { - margin-bottom: 10px; -} - -.c1.fi-margin-bottom-insetXl { - margin-bottom: 16px; -} - -.c1.fi-margin-bottom-insetXxl { - margin-bottom: 20px; -} - -.c1.fi-margin-left-xxs { - margin-left: 5px; -} - -.c1.fi-margin-left-xs { - margin-left: 10px; -} - -.c1.fi-margin-left-s { - margin-left: 15px; -} - -.c1.fi-margin-left-m { - margin-left: 20px; -} - -.c1.fi-margin-left-l { - margin-left: 25px; -} - -.c1.fi-margin-left-xl { - margin-left: 30px; -} - -.c1.fi-margin-left-xxl { - margin-left: 40px; -} - -.c1.fi-margin-left-xxxl { - margin-left: 60px; -} - -.c1.fi-margin-left-xxxxl { - margin-left: 80px; -} - -.c1.fi-margin-left-insetXxs { - margin-left: 2px; -} - -.c1.fi-margin-left-insetXs { - margin-left: 4px; -} - -.c1.fi-margin-left-insetS { - margin-left: 6px; -} - -.c1.fi-margin-left-insetM { - margin-left: 8px; -} - -.c1.fi-margin-left-insetL { - margin-left: 10px; -} - -.c1.fi-margin-left-insetXl { - margin-left: 16px; -} - -.c1.fi-margin-left-insetXxl { - margin-left: 20px; -} - -.c1.fi-padding-xxs { - padding: 5px; -} - -.c1.fi-padding-xs { - padding: 10px; -} - -.c1.fi-padding-s { - padding: 15px; -} - -.c1.fi-padding-m { - padding: 20px; -} - -.c1.fi-padding-l { - padding: 25px; -} - -.c1.fi-padding-xl { - padding: 30px; -} - -.c1.fi-padding-xxl { - padding: 40px; -} - -.c1.fi-padding-xxxl { - padding: 60px; -} - -.c1.fi-padding-xxxxl { - padding: 80px; -} - -.c1.fi-padding-insetXxs { - padding: 2px; -} - -.c1.fi-padding-insetXs { - padding: 4px; -} - -.c1.fi-padding-insetS { - padding: 6px; -} - -.c1.fi-padding-insetM { - padding: 8px; -} - -.c1.fi-padding-insetL { - padding: 10px; -} - -.c1.fi-padding-insetXl { - padding: 16px; -} - -.c1.fi-padding-insetXxl { - padding: 20px; -} - -.c1.fi-padding-top-xxs { - padding-top: 5px; -} - -.c1.fi-padding-top-xs { - padding-top: 10px; -} - -.c1.fi-padding-top-s { - padding-top: 15px; -} - -.c1.fi-padding-top-m { - padding-top: 20px; -} - -.c1.fi-padding-top-l { - padding-top: 25px; -} - -.c1.fi-padding-top-xl { - padding-top: 30px; -} - -.c1.fi-padding-top-xxl { - padding-top: 40px; -} - -.c1.fi-padding-top-xxxl { - padding-top: 60px; -} - -.c1.fi-padding-top-xxxxl { - padding-top: 80px; -} - -.c1.fi-padding-top-insetXxs { - padding-top: 2px; -} - -.c1.fi-padding-top-insetXs { - padding-top: 4px; -} - -.c1.fi-padding-top-insetS { - padding-top: 6px; -} - -.c1.fi-padding-top-insetM { - padding-top: 8px; -} - -.c1.fi-padding-top-insetL { - padding-top: 10px; -} - -.c1.fi-padding-top-insetXl { - padding-top: 16px; -} - -.c1.fi-padding-top-insetXxl { - padding-top: 20px; -} - -.c1.fi-padding-right-xxs { - padding-right: 5px; -} - -.c1.fi-padding-right-xs { - padding-right: 10px; -} - -.c1.fi-padding-right-s { - padding-right: 15px; -} - -.c1.fi-padding-right-m { - padding-right: 20px; -} - -.c1.fi-padding-right-l { - padding-right: 25px; -} - -.c1.fi-padding-right-xl { - padding-right: 30px; -} - -.c1.fi-padding-right-xxl { - padding-right: 40px; -} - -.c1.fi-padding-right-xxxl { - padding-right: 60px; -} - -.c1.fi-padding-right-xxxxl { - padding-right: 80px; -} - -.c1.fi-padding-right-insetXxs { - padding-right: 2px; -} - -.c1.fi-padding-right-insetXs { - padding-right: 4px; -} - -.c1.fi-padding-right-insetS { - padding-right: 6px; -} - -.c1.fi-padding-right-insetM { - padding-right: 8px; -} - -.c1.fi-padding-right-insetL { - padding-right: 10px; -} - -.c1.fi-padding-right-insetXl { - padding-right: 16px; -} - -.c1.fi-padding-right-insetXxl { - padding-right: 20px; -} - -.c1.fi-padding-bottom-xxs { - padding-bottom: 5px; -} - -.c1.fi-padding-bottom-xs { - padding-bottom: 10px; -} - -.c1.fi-padding-bottom-s { - padding-bottom: 15px; -} - -.c1.fi-padding-bottom-m { - padding-bottom: 20px; -} - -.c1.fi-padding-bottom-l { - padding-bottom: 25px; -} - -.c1.fi-padding-bottom-xl { - padding-bottom: 30px; -} - -.c1.fi-padding-bottom-xxl { - padding-bottom: 40px; -} - -.c1.fi-padding-bottom-xxxl { - padding-bottom: 60px; -} - -.c1.fi-padding-bottom-xxxxl { - padding-bottom: 80px; -} - -.c1.fi-padding-bottom-insetXxs { - padding-bottom: 2px; -} - -.c1.fi-padding-bottom-insetXs { - padding-bottom: 4px; -} - -.c1.fi-padding-bottom-insetS { - padding-bottom: 6px; -} - -.c1.fi-padding-bottom-insetM { - padding-bottom: 8px; -} - -.c1.fi-padding-bottom-insetL { - padding-bottom: 10px; -} - -.c1.fi-padding-bottom-insetXl { - padding-bottom: 16px; -} - -.c1.fi-padding-bottom-insetXxl { - padding-bottom: 20px; -} - -.c1.fi-padding-left-xxs { - padding-left: 5px; -} - -.c1.fi-padding-left-xs { - padding-left: 10px; -} - -.c1.fi-padding-left-s { - padding-left: 15px; -} - -.c1.fi-padding-left-m { - padding-left: 20px; -} - -.c1.fi-padding-left-l { - padding-left: 25px; -} - -.c1.fi-padding-left-xl { - padding-left: 30px; -} - -.c1.fi-padding-left-xxl { - padding-left: 40px; -} - -.c1.fi-padding-left-xxxl { - padding-left: 60px; -} - -.c1.fi-padding-left-xxxxl { - padding-left: 80px; -} - -.c1.fi-padding-left-insetXxs { - padding-left: 2px; -} - -.c1.fi-padding-left-insetXs { - padding-left: 4px; -} - -.c1.fi-padding-left-insetS { - padding-left: 6px; -} - -.c1.fi-padding-left-insetM { - padding-left: 8px; -} - -.c1.fi-padding-left-insetL { - padding-left: 10px; -} - -.c1.fi-padding-left-insetXl { - padding-left: 16px; -} - -.c1.fi-padding-left-insetXxl { - padding-left: 20px; -} - -.c1:focus { - position: relative; - outline: 3px solid transparent; -} - -.c1:focus::after { - content: ''; - position: absolute; - pointer-events: none; - top: -2px; - right: -2px; - bottom: -2px; - left: -2px; - border-radius: 2px; - background-color: transparent; - border: 0px solid hsl(0,0%,100%); - box-sizing: border-box; - box-shadow: 0 0 0 2px hsl(196,77%,44%); - z-index: 9999; -} - -.c1:hover { - background: linear-gradient(0deg,hsl(212,63%,45%) 0%,hsl(212,63%,49%) 100%); - outline: 2px solid transparent; -} - -.c1:active { - background: hsl(212,63%,37%); -} - -.c1.fi-button--disabled, -.c1[disabled], -.c1:disabled { - text-shadow: 0 1px 1px rgba(33,33,33,0.5); - background: linear-gradient(0deg,hsl(202,7%,67%) 0%,hsl(202,7%,80%) 100%); - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - cursor: not-allowed; -} - -.c1.fi-button--disabled::after { - border: none; - box-shadow: none; -} - -.c1.fi-button--fullwidth { - display: block; - width: 100%; -} - -.c1.fi-button--inverted { - background: none; - background-color: hsl(212,63%,45%); - border: 1px solid hsl(0,0%,100%); - text-shadow: none; -} - -.c1.fi-button--inverted:hover { - background: linear-gradient(-180deg,hsla(0,0%,100%,0.1) 0%,hsla(0,0%,100%,0) 100%); -} - -.c1.fi-button--inverted:active { - background: none; - background-color: hsl(212,63%,45%); -} - -.c1.fi-button--inverted.fi-button--disabled, -.c1.fi-button--inverted[disabled], -.c1.fi-button--inverted:disabled { - opacity: 0.41; - background: none; - background-color: none; -} - -.c1.fi-button--secondary { - color: hsl(212,63%,45%); - background: none; - background-color: hsl(0,0%,100%); - border: 1px solid hsl(212,63%,45%); - text-shadow: none; -} - -.c1.fi-button--secondary:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); -} - -.c1.fi-button--secondary:active { - background: none; - background-color: hsl(202,7%,93%); -} - -.c1.fi-button--secondary.fi-button--disabled, -.c1.fi-button--secondary[disabled], -.c1.fi-button--secondary:disabled { - color: hsl(202,7%,67%); - text-shadow: none; - background: none; - background-color: hsl(212,63%,98%); - border-color: hsl(202,7%,67%); -} - -.c1.fi-button--secondary-noborder { - color: hsl(212,63%,45%); - background: none; - background-color: hsl(0,0%,100%); - border: 1px solid hsl(212,63%,45%); - text-shadow: none; - border: none; - background-color: transparent; -} - -.c1.fi-button--secondary-noborder:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); -} - -.c1.fi-button--secondary-noborder:active { - background: none; - background-color: hsl(202,7%,93%); -} - -.c1.fi-button--secondary-noborder.fi-button--disabled, -.c1.fi-button--secondary-noborder[disabled], -.c1.fi-button--secondary-noborder:disabled { - color: hsl(202,7%,67%); - text-shadow: none; - background: none; - background-color: hsl(212,63%,98%); - border-color: hsl(202,7%,67%); -} - -.c1.fi-button--secondary-light { - color: hsl(212,63%,45%); - color: hsl(212,63%,45%); - background: none; - background-color: hsl(0,0%,100%); - border: 1px solid hsl(212,63%,45%); - text-shadow: none; - background: linear-gradient(0deg,hsl(215,100%,95%),hsl(215,100%,97%)); - border: none; -} - -.c1.fi-button--secondary-light:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); -} - -.c1.fi-button--secondary-light:active { - background: none; - background-color: hsl(202,7%,93%); -} - -.c1.fi-button--secondary-light.fi-button--disabled, -.c1.fi-button--secondary-light[disabled], -.c1.fi-button--secondary-light:disabled { - color: hsl(202,7%,67%); - text-shadow: none; - background: none; - background-color: hsl(212,63%,98%); - border-color: hsl(202,7%,67%); -} - -.c1.fi-button--secondary-light:hover { - background: linear-gradient(0deg,hsl(215,100%,97%),hsl(212,63%,98%)); -} - -.c1.fi-button--secondary-light:active { - background: linear-gradient(0deg,hsl(202,7%,93%),hsl(202,7%,97%)); -} - -.c1.fi-button--secondary-light.fi-button--disabled, -.c1.fi-button--secondary-light[disabled], -.c1.fi-button--secondary-light:disabled { - color: hsl(202,7%,67%); - background: none; - background-color: hsl(202,7%,97%); -} - -.c1 > .fi-button_icon > .fi-icon { - width: 16px; - height: 16px; - margin-right: 8px; - vertical-align: middle; - -webkit-transform: translateY(-0.1em); - -ms-transform: translateY(-0.1em); - transform: translateY(-0.1em); -} - -.c1 > .fi-button_icon--right > .fi-icon { - margin-right: 0; - margin-left: 8px; -} - -.c1.fi-button--disabled > .fi-button_icon { - cursor: not-allowed; -} - - -`; - -exports[`Button variant secondary should match snapshot 1`] = ` -.c0 { - line-height: 1.15; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - margin: 0; - overflow: visible; - text-transform: none; - -webkit-appearance: button; - margin: 0; - padding: 0; - border: 0; - box-sizing: border-box; - font: 100% inherit; - line-height: 1; - text-align: left; - -webkit-text-decoration: none; - text-decoration: none; - vertical-align: baseline; - color: inherit; - background: none; - cursor: inherit; - display: inline-block; - max-width: 100%; - cursor: pointer; -} - -.c0:-moz-focusring { - outline: 1px dotted ButtonText; -} - -.c0::-moz-focus-inner { - border-style: none; - padding: 0; -} - -.c0::-webkit-file-upload-button { - -webkit-appearance: button; - font: inherit; -} - -.c0::-webkit-inner-spin-button { - height: auto; -} - -.c0::-webkit-outer-spin-button { - height: auto; -} - -.c0::before, -.c0::after { - box-sizing: border-box; -} - -.c2 { - line-height: 1.15; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - margin: 0; - padding: 0; - border: 0; - box-sizing: border-box; - font: 100% inherit; - line-height: 1; - text-align: left; - -webkit-text-decoration: none; - text-decoration: none; - vertical-align: baseline; - color: inherit; - background: none; - cursor: inherit; - display: inline; - max-width: 100%; - word-wrap: normal; - word-break: normal; - white-space: normal; -} - -.c2::before, -.c2::after { - box-sizing: border-box; -} - -.c1 { - color: hsl(0,0%,13%); - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 600; - font-size: 14px; - line-height: 20px; - padding: 10px 20px; - min-height: 40px; - color: hsl(0,0%,100%); - background: linear-gradient(0deg,hsl(212,63%,37%) 0%,hsl(212,63%,45%) 100%); - border-radius: 2px; - text-align: center; - text-shadow: 0 1px 1px hsla(214,100%,24%,0.5); - cursor: pointer; - border: 1px solid transparent; -} - -.c1.fi-margin-xxs { - margin: 5px; -} - -.c1.fi-margin-xs { - margin: 10px; -} - -.c1.fi-margin-s { - margin: 15px; -} - -.c1.fi-margin-m { - margin: 20px; -} - -.c1.fi-margin-l { - margin: 25px; -} - -.c1.fi-margin-xl { - margin: 30px; -} - -.c1.fi-margin-xxl { - margin: 40px; -} - -.c1.fi-margin-xxxl { - margin: 60px; -} - -.c1.fi-margin-xxxxl { - margin: 80px; -} - -.c1.fi-margin-insetXxs { - margin: 2px; -} - -.c1.fi-margin-insetXs { - margin: 4px; -} - -.c1.fi-margin-insetS { - margin: 6px; -} - -.c1.fi-margin-insetM { - margin: 8px; -} - -.c1.fi-margin-insetL { - margin: 10px; -} - -.c1.fi-margin-insetXl { - margin: 16px; -} - -.c1.fi-margin-insetXxl { - margin: 20px; -} - -.c1.fi-margin-top-xxs { - margin-top: 5px; -} - -.c1.fi-margin-top-xs { - margin-top: 10px; -} - -.c1.fi-margin-top-s { - margin-top: 15px; -} - -.c1.fi-margin-top-m { - margin-top: 20px; -} - -.c1.fi-margin-top-l { - margin-top: 25px; -} - -.c1.fi-margin-top-xl { - margin-top: 30px; -} - -.c1.fi-margin-top-xxl { - margin-top: 40px; -} - -.c1.fi-margin-top-xxxl { - margin-top: 60px; -} - -.c1.fi-margin-top-xxxxl { - margin-top: 80px; -} - -.c1.fi-margin-top-insetXxs { - margin-top: 2px; -} - -.c1.fi-margin-top-insetXs { - margin-top: 4px; -} - -.c1.fi-margin-top-insetS { - margin-top: 6px; -} - -.c1.fi-margin-top-insetM { - margin-top: 8px; -} - -.c1.fi-margin-top-insetL { - margin-top: 10px; -} - -.c1.fi-margin-top-insetXl { - margin-top: 16px; -} - -.c1.fi-margin-top-insetXxl { - margin-top: 20px; -} - -.c1.fi-margin-right-xxs { - margin-right: 5px; -} - -.c1.fi-margin-right-xs { - margin-right: 10px; -} - -.c1.fi-margin-right-s { - margin-right: 15px; -} - -.c1.fi-margin-right-m { - margin-right: 20px; -} - -.c1.fi-margin-right-l { - margin-right: 25px; -} - -.c1.fi-margin-right-xl { - margin-right: 30px; -} - -.c1.fi-margin-right-xxl { - margin-right: 40px; -} - -.c1.fi-margin-right-xxxl { - margin-right: 60px; -} - -.c1.fi-margin-right-xxxxl { - margin-right: 80px; -} - -.c1.fi-margin-right-insetXxs { - margin-right: 2px; -} - -.c1.fi-margin-right-insetXs { - margin-right: 4px; -} - -.c1.fi-margin-right-insetS { - margin-right: 6px; -} - -.c1.fi-margin-right-insetM { - margin-right: 8px; -} - -.c1.fi-margin-right-insetL { - margin-right: 10px; -} - -.c1.fi-margin-right-insetXl { - margin-right: 16px; -} - -.c1.fi-margin-right-insetXxl { - margin-right: 20px; -} - -.c1.fi-margin-bottom-xxs { - margin-bottom: 5px; -} - -.c1.fi-margin-bottom-xs { - margin-bottom: 10px; -} - -.c1.fi-margin-bottom-s { - margin-bottom: 15px; -} - -.c1.fi-margin-bottom-m { - margin-bottom: 20px; -} - -.c1.fi-margin-bottom-l { - margin-bottom: 25px; -} - -.c1.fi-margin-bottom-xl { - margin-bottom: 30px; -} - -.c1.fi-margin-bottom-xxl { - margin-bottom: 40px; -} - -.c1.fi-margin-bottom-xxxl { - margin-bottom: 60px; -} - -.c1.fi-margin-bottom-xxxxl { - margin-bottom: 80px; -} - -.c1.fi-margin-bottom-insetXxs { - margin-bottom: 2px; -} - -.c1.fi-margin-bottom-insetXs { - margin-bottom: 4px; -} - -.c1.fi-margin-bottom-insetS { - margin-bottom: 6px; -} - -.c1.fi-margin-bottom-insetM { - margin-bottom: 8px; -} - -.c1.fi-margin-bottom-insetL { - margin-bottom: 10px; -} - -.c1.fi-margin-bottom-insetXl { - margin-bottom: 16px; -} - -.c1.fi-margin-bottom-insetXxl { - margin-bottom: 20px; -} - -.c1.fi-margin-left-xxs { - margin-left: 5px; -} - -.c1.fi-margin-left-xs { - margin-left: 10px; -} - -.c1.fi-margin-left-s { - margin-left: 15px; -} - -.c1.fi-margin-left-m { - margin-left: 20px; -} - -.c1.fi-margin-left-l { - margin-left: 25px; -} - -.c1.fi-margin-left-xl { - margin-left: 30px; -} - -.c1.fi-margin-left-xxl { - margin-left: 40px; -} - -.c1.fi-margin-left-xxxl { - margin-left: 60px; -} - -.c1.fi-margin-left-xxxxl { - margin-left: 80px; -} - -.c1.fi-margin-left-insetXxs { - margin-left: 2px; -} - -.c1.fi-margin-left-insetXs { - margin-left: 4px; -} - -.c1.fi-margin-left-insetS { - margin-left: 6px; -} - -.c1.fi-margin-left-insetM { - margin-left: 8px; -} - -.c1.fi-margin-left-insetL { - margin-left: 10px; -} - -.c1.fi-margin-left-insetXl { - margin-left: 16px; -} - -.c1.fi-margin-left-insetXxl { - margin-left: 20px; -} - -.c1.fi-padding-xxs { - padding: 5px; -} - -.c1.fi-padding-xs { - padding: 10px; -} - -.c1.fi-padding-s { - padding: 15px; -} - -.c1.fi-padding-m { - padding: 20px; -} - -.c1.fi-padding-l { - padding: 25px; -} - -.c1.fi-padding-xl { - padding: 30px; -} - -.c1.fi-padding-xxl { - padding: 40px; -} - -.c1.fi-padding-xxxl { - padding: 60px; -} - -.c1.fi-padding-xxxxl { - padding: 80px; -} - -.c1.fi-padding-insetXxs { - padding: 2px; -} - -.c1.fi-padding-insetXs { - padding: 4px; -} - -.c1.fi-padding-insetS { - padding: 6px; -} - -.c1.fi-padding-insetM { - padding: 8px; -} - -.c1.fi-padding-insetL { - padding: 10px; -} - -.c1.fi-padding-insetXl { - padding: 16px; -} - -.c1.fi-padding-insetXxl { - padding: 20px; -} - -.c1.fi-padding-top-xxs { - padding-top: 5px; -} - -.c1.fi-padding-top-xs { - padding-top: 10px; -} - -.c1.fi-padding-top-s { - padding-top: 15px; -} - -.c1.fi-padding-top-m { - padding-top: 20px; -} - -.c1.fi-padding-top-l { - padding-top: 25px; -} - -.c1.fi-padding-top-xl { - padding-top: 30px; -} - -.c1.fi-padding-top-xxl { - padding-top: 40px; -} - -.c1.fi-padding-top-xxxl { - padding-top: 60px; -} - -.c1.fi-padding-top-xxxxl { - padding-top: 80px; -} - -.c1.fi-padding-top-insetXxs { - padding-top: 2px; -} - -.c1.fi-padding-top-insetXs { - padding-top: 4px; -} - -.c1.fi-padding-top-insetS { - padding-top: 6px; -} - -.c1.fi-padding-top-insetM { - padding-top: 8px; -} - -.c1.fi-padding-top-insetL { - padding-top: 10px; -} - -.c1.fi-padding-top-insetXl { - padding-top: 16px; -} - -.c1.fi-padding-top-insetXxl { - padding-top: 20px; -} - -.c1.fi-padding-right-xxs { - padding-right: 5px; -} - -.c1.fi-padding-right-xs { - padding-right: 10px; -} - -.c1.fi-padding-right-s { - padding-right: 15px; -} - -.c1.fi-padding-right-m { - padding-right: 20px; -} - -.c1.fi-padding-right-l { - padding-right: 25px; -} - -.c1.fi-padding-right-xl { - padding-right: 30px; -} - -.c1.fi-padding-right-xxl { - padding-right: 40px; -} - -.c1.fi-padding-right-xxxl { - padding-right: 60px; -} - -.c1.fi-padding-right-xxxxl { - padding-right: 80px; -} - -.c1.fi-padding-right-insetXxs { - padding-right: 2px; -} - -.c1.fi-padding-right-insetXs { - padding-right: 4px; -} - -.c1.fi-padding-right-insetS { - padding-right: 6px; -} - -.c1.fi-padding-right-insetM { - padding-right: 8px; -} - -.c1.fi-padding-right-insetL { - padding-right: 10px; -} - -.c1.fi-padding-right-insetXl { - padding-right: 16px; -} - -.c1.fi-padding-right-insetXxl { - padding-right: 20px; -} - -.c1.fi-padding-bottom-xxs { - padding-bottom: 5px; -} - -.c1.fi-padding-bottom-xs { - padding-bottom: 10px; -} - -.c1.fi-padding-bottom-s { - padding-bottom: 15px; -} - -.c1.fi-padding-bottom-m { - padding-bottom: 20px; -} - -.c1.fi-padding-bottom-l { - padding-bottom: 25px; -} - -.c1.fi-padding-bottom-xl { - padding-bottom: 30px; -} - -.c1.fi-padding-bottom-xxl { - padding-bottom: 40px; -} - -.c1.fi-padding-bottom-xxxl { - padding-bottom: 60px; -} - -.c1.fi-padding-bottom-xxxxl { - padding-bottom: 80px; -} - -.c1.fi-padding-bottom-insetXxs { - padding-bottom: 2px; -} - -.c1.fi-padding-bottom-insetXs { - padding-bottom: 4px; -} - -.c1.fi-padding-bottom-insetS { - padding-bottom: 6px; -} - -.c1.fi-padding-bottom-insetM { - padding-bottom: 8px; -} - -.c1.fi-padding-bottom-insetL { - padding-bottom: 10px; -} - -.c1.fi-padding-bottom-insetXl { - padding-bottom: 16px; -} - -.c1.fi-padding-bottom-insetXxl { - padding-bottom: 20px; -} - -.c1.fi-padding-left-xxs { - padding-left: 5px; -} - -.c1.fi-padding-left-xs { - padding-left: 10px; -} - -.c1.fi-padding-left-s { - padding-left: 15px; -} - -.c1.fi-padding-left-m { - padding-left: 20px; -} - -.c1.fi-padding-left-l { - padding-left: 25px; -} - -.c1.fi-padding-left-xl { - padding-left: 30px; -} - -.c1.fi-padding-left-xxl { - padding-left: 40px; -} - -.c1.fi-padding-left-xxxl { - padding-left: 60px; -} - -.c1.fi-padding-left-xxxxl { - padding-left: 80px; -} - -.c1.fi-padding-left-insetXxs { - padding-left: 2px; -} - -.c1.fi-padding-left-insetXs { - padding-left: 4px; -} - -.c1.fi-padding-left-insetS { - padding-left: 6px; -} - -.c1.fi-padding-left-insetM { - padding-left: 8px; -} - -.c1.fi-padding-left-insetL { - padding-left: 10px; -} - -.c1.fi-padding-left-insetXl { - padding-left: 16px; -} - -.c1.fi-padding-left-insetXxl { - padding-left: 20px; -} - -.c1:focus { - position: relative; - outline: 3px solid transparent; +.c1:focus { + position: relative; + outline: 3px solid transparent; } .c1:focus::after { @@ -3842,21 +958,21 @@ exports[`Button variant secondary should match snapshot 1`] = ` `; -exports[`Button variant secondaryNoBorder should match snapshot 1`] = ` +exports[`Button variant secondary should match snapshot 1`] = ` .c0 { line-height: 1.15; -ms-text-size-adjust: 100%; @@ -3955,656 +1071,340 @@ exports[`Button variant secondaryNoBorder should match snapshot 1`] = ` line-height: 1.5; font-weight: 600; font-size: 14px; - line-height: 20px; - padding: 10px 20px; - min-height: 40px; - color: hsl(0,0%,100%); - background: linear-gradient(0deg,hsl(212,63%,37%) 0%,hsl(212,63%,45%) 100%); - border-radius: 2px; - text-align: center; - text-shadow: 0 1px 1px hsla(214,100%,24%,0.5); - cursor: pointer; - border: 1px solid transparent; -} - -.c1.fi-margin-xxs { - margin: 5px; -} - -.c1.fi-margin-xs { - margin: 10px; -} - -.c1.fi-margin-s { - margin: 15px; -} - -.c1.fi-margin-m { - margin: 20px; -} - -.c1.fi-margin-l { - margin: 25px; -} - -.c1.fi-margin-xl { - margin: 30px; -} - -.c1.fi-margin-xxl { - margin: 40px; -} - -.c1.fi-margin-xxxl { - margin: 60px; -} - -.c1.fi-margin-xxxxl { - margin: 80px; -} - -.c1.fi-margin-insetXxs { - margin: 2px; -} - -.c1.fi-margin-insetXs { - margin: 4px; -} - -.c1.fi-margin-insetS { - margin: 6px; -} - -.c1.fi-margin-insetM { - margin: 8px; -} - -.c1.fi-margin-insetL { - margin: 10px; -} - -.c1.fi-margin-insetXl { - margin: 16px; -} - -.c1.fi-margin-insetXxl { - margin: 20px; -} - -.c1.fi-margin-top-xxs { - margin-top: 5px; -} - -.c1.fi-margin-top-xs { - margin-top: 10px; -} - -.c1.fi-margin-top-s { - margin-top: 15px; -} - -.c1.fi-margin-top-m { - margin-top: 20px; -} - -.c1.fi-margin-top-l { - margin-top: 25px; -} - -.c1.fi-margin-top-xl { - margin-top: 30px; -} - -.c1.fi-margin-top-xxl { - margin-top: 40px; -} - -.c1.fi-margin-top-xxxl { - margin-top: 60px; -} - -.c1.fi-margin-top-xxxxl { - margin-top: 80px; -} - -.c1.fi-margin-top-insetXxs { - margin-top: 2px; -} - -.c1.fi-margin-top-insetXs { - margin-top: 4px; -} - -.c1.fi-margin-top-insetS { - margin-top: 6px; -} - -.c1.fi-margin-top-insetM { - margin-top: 8px; -} - -.c1.fi-margin-top-insetL { - margin-top: 10px; -} - -.c1.fi-margin-top-insetXl { - margin-top: 16px; -} - -.c1.fi-margin-top-insetXxl { - margin-top: 20px; -} - -.c1.fi-margin-right-xxs { - margin-right: 5px; -} - -.c1.fi-margin-right-xs { - margin-right: 10px; -} - -.c1.fi-margin-right-s { - margin-right: 15px; -} - -.c1.fi-margin-right-m { - margin-right: 20px; -} - -.c1.fi-margin-right-l { - margin-right: 25px; -} - -.c1.fi-margin-right-xl { - margin-right: 30px; -} - -.c1.fi-margin-right-xxl { - margin-right: 40px; -} - -.c1.fi-margin-right-xxxl { - margin-right: 60px; -} - -.c1.fi-margin-right-xxxxl { - margin-right: 80px; -} - -.c1.fi-margin-right-insetXxs { - margin-right: 2px; -} - -.c1.fi-margin-right-insetXs { - margin-right: 4px; -} - -.c1.fi-margin-right-insetS { - margin-right: 6px; -} - -.c1.fi-margin-right-insetM { - margin-right: 8px; -} - -.c1.fi-margin-right-insetL { - margin-right: 10px; -} - -.c1.fi-margin-right-insetXl { - margin-right: 16px; -} - -.c1.fi-margin-right-insetXxl { - margin-right: 20px; -} - -.c1.fi-margin-bottom-xxs { - margin-bottom: 5px; -} - -.c1.fi-margin-bottom-xs { - margin-bottom: 10px; -} - -.c1.fi-margin-bottom-s { - margin-bottom: 15px; -} - -.c1.fi-margin-bottom-m { - margin-bottom: 20px; -} - -.c1.fi-margin-bottom-l { - margin-bottom: 25px; -} - -.c1.fi-margin-bottom-xl { - margin-bottom: 30px; -} - -.c1.fi-margin-bottom-xxl { - margin-bottom: 40px; -} - -.c1.fi-margin-bottom-xxxl { - margin-bottom: 60px; -} - -.c1.fi-margin-bottom-xxxxl { - margin-bottom: 80px; -} - -.c1.fi-margin-bottom-insetXxs { - margin-bottom: 2px; -} - -.c1.fi-margin-bottom-insetXs { - margin-bottom: 4px; -} - -.c1.fi-margin-bottom-insetS { - margin-bottom: 6px; -} - -.c1.fi-margin-bottom-insetM { - margin-bottom: 8px; -} - -.c1.fi-margin-bottom-insetL { - margin-bottom: 10px; -} - -.c1.fi-margin-bottom-insetXl { - margin-bottom: 16px; -} - -.c1.fi-margin-bottom-insetXxl { - margin-bottom: 20px; -} - -.c1.fi-margin-left-xxs { - margin-left: 5px; -} - -.c1.fi-margin-left-xs { - margin-left: 10px; -} - -.c1.fi-margin-left-s { - margin-left: 15px; -} - -.c1.fi-margin-left-m { - margin-left: 20px; -} - -.c1.fi-margin-left-l { - margin-left: 25px; -} - -.c1.fi-margin-left-xl { - margin-left: 30px; -} - -.c1.fi-margin-left-xxl { - margin-left: 40px; -} - -.c1.fi-margin-left-xxxl { - margin-left: 60px; -} - -.c1.fi-margin-left-xxxxl { - margin-left: 80px; -} - -.c1.fi-margin-left-insetXxs { - margin-left: 2px; -} - -.c1.fi-margin-left-insetXs { - margin-left: 4px; -} - -.c1.fi-margin-left-insetS { - margin-left: 6px; -} - -.c1.fi-margin-left-insetM { - margin-left: 8px; -} - -.c1.fi-margin-left-insetL { - margin-left: 10px; -} - -.c1.fi-margin-left-insetXl { - margin-left: 16px; -} - -.c1.fi-margin-left-insetXxl { - margin-left: 20px; -} - -.c1.fi-padding-xxs { - padding: 5px; -} - -.c1.fi-padding-xs { - padding: 10px; -} - -.c1.fi-padding-s { - padding: 15px; -} - -.c1.fi-padding-m { - padding: 20px; -} - -.c1.fi-padding-l { - padding: 25px; -} - -.c1.fi-padding-xl { - padding: 30px; -} - -.c1.fi-padding-xxl { - padding: 40px; -} - -.c1.fi-padding-xxxl { - padding: 60px; -} - -.c1.fi-padding-xxxxl { - padding: 80px; -} - -.c1.fi-padding-insetXxs { - padding: 2px; -} - -.c1.fi-padding-insetXs { - padding: 4px; -} - -.c1.fi-padding-insetS { - padding: 6px; -} - -.c1.fi-padding-insetM { - padding: 8px; -} - -.c1.fi-padding-insetL { - padding: 10px; -} - -.c1.fi-padding-insetXl { - padding: 16px; -} - -.c1.fi-padding-insetXxl { - padding: 20px; -} - -.c1.fi-padding-top-xxs { - padding-top: 5px; -} - -.c1.fi-padding-top-xs { - padding-top: 10px; -} - -.c1.fi-padding-top-s { - padding-top: 15px; -} - -.c1.fi-padding-top-m { - padding-top: 20px; -} - -.c1.fi-padding-top-l { - padding-top: 25px; -} - -.c1.fi-padding-top-xl { - padding-top: 30px; -} - -.c1.fi-padding-top-xxl { - padding-top: 40px; -} - -.c1.fi-padding-top-xxxl { - padding-top: 60px; -} - -.c1.fi-padding-top-xxxxl { - padding-top: 80px; -} - -.c1.fi-padding-top-insetXxs { - padding-top: 2px; -} - -.c1.fi-padding-top-insetXs { - padding-top: 4px; -} - -.c1.fi-padding-top-insetS { - padding-top: 6px; -} - -.c1.fi-padding-top-insetM { - padding-top: 8px; -} - -.c1.fi-padding-top-insetL { - padding-top: 10px; -} - -.c1.fi-padding-top-insetXl { - padding-top: 16px; -} - -.c1.fi-padding-top-insetXxl { - padding-top: 20px; -} - -.c1.fi-padding-right-xxs { - padding-right: 5px; -} - -.c1.fi-padding-right-xs { - padding-right: 10px; -} - -.c1.fi-padding-right-s { - padding-right: 15px; -} - -.c1.fi-padding-right-m { - padding-right: 20px; -} - -.c1.fi-padding-right-l { - padding-right: 25px; -} - -.c1.fi-padding-right-xl { - padding-right: 30px; -} - -.c1.fi-padding-right-xxl { - padding-right: 40px; -} - -.c1.fi-padding-right-xxxl { - padding-right: 60px; + line-height: 20px; + padding: 10px 20px; + min-height: 40px; + color: hsl(0,0%,100%); + background: linear-gradient(0deg,hsl(212,63%,37%) 0%,hsl(212,63%,45%) 100%); + border-radius: 2px; + text-align: center; + text-shadow: 0 1px 1px hsla(214,100%,24%,0.5); + cursor: pointer; + border: 1px solid transparent; } -.c1.fi-padding-right-xxxxl { - padding-right: 80px; +.c1:focus { + position: relative; + outline: 3px solid transparent; } -.c1.fi-padding-right-insetXxs { - padding-right: 2px; +.c1:focus::after { + content: ''; + position: absolute; + pointer-events: none; + top: -2px; + right: -2px; + bottom: -2px; + left: -2px; + border-radius: 2px; + background-color: transparent; + border: 0px solid hsl(0,0%,100%); + box-sizing: border-box; + box-shadow: 0 0 0 2px hsl(196,77%,44%); + z-index: 9999; } -.c1.fi-padding-right-insetXs { - padding-right: 4px; +.c1:hover { + background: linear-gradient(0deg,hsl(212,63%,45%) 0%,hsl(212,63%,49%) 100%); + outline: 2px solid transparent; } -.c1.fi-padding-right-insetS { - padding-right: 6px; +.c1:active { + background: hsl(212,63%,37%); } -.c1.fi-padding-right-insetM { - padding-right: 8px; +.c1.fi-button--disabled, +.c1[disabled], +.c1:disabled { + text-shadow: 0 1px 1px rgba(33,33,33,0.5); + background: linear-gradient(0deg,hsl(202,7%,67%) 0%,hsl(202,7%,80%) 100%); + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: not-allowed; } -.c1.fi-padding-right-insetL { - padding-right: 10px; +.c1.fi-button--disabled::after { + border: none; + box-shadow: none; } -.c1.fi-padding-right-insetXl { - padding-right: 16px; +.c1.fi-button--fullwidth { + display: block; + width: 100%; } -.c1.fi-padding-right-insetXxl { - padding-right: 20px; +.c1.fi-button--inverted { + background: none; + background-color: hsl(212,63%,45%); + border: 1px solid hsl(0,0%,100%); + text-shadow: none; } -.c1.fi-padding-bottom-xxs { - padding-bottom: 5px; +.c1.fi-button--inverted:hover { + background: linear-gradient(-180deg,hsla(0,0%,100%,0.1) 0%,hsla(0,0%,100%,0) 100%); } -.c1.fi-padding-bottom-xs { - padding-bottom: 10px; +.c1.fi-button--inverted:active { + background: none; + background-color: hsl(212,63%,45%); } -.c1.fi-padding-bottom-s { - padding-bottom: 15px; +.c1.fi-button--inverted.fi-button--disabled, +.c1.fi-button--inverted[disabled], +.c1.fi-button--inverted:disabled { + opacity: 0.41; + background: none; + background-color: none; } -.c1.fi-padding-bottom-m { - padding-bottom: 20px; +.c1.fi-button--secondary { + color: hsl(212,63%,45%); + background: none; + background-color: hsl(0,0%,100%); + border: 1px solid hsl(212,63%,45%); + text-shadow: none; } -.c1.fi-padding-bottom-l { - padding-bottom: 25px; +.c1.fi-button--secondary:hover { + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); } -.c1.fi-padding-bottom-xl { - padding-bottom: 30px; +.c1.fi-button--secondary:active { + background: none; + background-color: hsl(202,7%,93%); } -.c1.fi-padding-bottom-xxl { - padding-bottom: 40px; +.c1.fi-button--secondary.fi-button--disabled, +.c1.fi-button--secondary[disabled], +.c1.fi-button--secondary:disabled { + color: hsl(202,7%,67%); + text-shadow: none; + background: none; + background-color: hsl(212,63%,98%); + border-color: hsl(202,7%,67%); } -.c1.fi-padding-bottom-xxxl { - padding-bottom: 60px; +.c1.fi-button--secondary-noborder { + color: hsl(212,63%,45%); + background: none; + background-color: hsl(0,0%,100%); + border: 1px solid hsl(212,63%,45%); + text-shadow: none; + border: none; + background-color: transparent; } -.c1.fi-padding-bottom-xxxxl { - padding-bottom: 80px; +.c1.fi-button--secondary-noborder:hover { + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); } -.c1.fi-padding-bottom-insetXxs { - padding-bottom: 2px; +.c1.fi-button--secondary-noborder:active { + background: none; + background-color: hsl(202,7%,93%); } -.c1.fi-padding-bottom-insetXs { - padding-bottom: 4px; +.c1.fi-button--secondary-noborder.fi-button--disabled, +.c1.fi-button--secondary-noborder[disabled], +.c1.fi-button--secondary-noborder:disabled { + color: hsl(202,7%,67%); + text-shadow: none; + background: none; + background-color: hsl(212,63%,98%); + border-color: hsl(202,7%,67%); } -.c1.fi-padding-bottom-insetS { - padding-bottom: 6px; +.c1.fi-button--secondary-light { + color: hsl(212,63%,45%); + color: hsl(212,63%,45%); + background: none; + background-color: hsl(0,0%,100%); + border: 1px solid hsl(212,63%,45%); + text-shadow: none; + background: linear-gradient(0deg,hsl(215,100%,95%),hsl(215,100%,97%)); + border: none; } -.c1.fi-padding-bottom-insetM { - padding-bottom: 8px; +.c1.fi-button--secondary-light:hover { + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); } -.c1.fi-padding-bottom-insetL { - padding-bottom: 10px; +.c1.fi-button--secondary-light:active { + background: none; + background-color: hsl(202,7%,93%); } -.c1.fi-padding-bottom-insetXl { - padding-bottom: 16px; +.c1.fi-button--secondary-light.fi-button--disabled, +.c1.fi-button--secondary-light[disabled], +.c1.fi-button--secondary-light:disabled { + color: hsl(202,7%,67%); + text-shadow: none; + background: none; + background-color: hsl(212,63%,98%); + border-color: hsl(202,7%,67%); } -.c1.fi-padding-bottom-insetXxl { - padding-bottom: 20px; +.c1.fi-button--secondary-light:hover { + background: linear-gradient(0deg,hsl(215,100%,97%),hsl(212,63%,98%)); } -.c1.fi-padding-left-xxs { - padding-left: 5px; +.c1.fi-button--secondary-light:active { + background: linear-gradient(0deg,hsl(202,7%,93%),hsl(202,7%,97%)); } -.c1.fi-padding-left-xs { - padding-left: 10px; +.c1.fi-button--secondary-light.fi-button--disabled, +.c1.fi-button--secondary-light[disabled], +.c1.fi-button--secondary-light:disabled { + color: hsl(202,7%,67%); + background: none; + background-color: hsl(202,7%,97%); } -.c1.fi-padding-left-s { - padding-left: 15px; +.c1 > .fi-button_icon > .fi-icon { + width: 16px; + height: 16px; + margin-right: 8px; + vertical-align: middle; + -webkit-transform: translateY(-0.1em); + -ms-transform: translateY(-0.1em); + transform: translateY(-0.1em); } -.c1.fi-padding-left-m { - padding-left: 20px; +.c1 > .fi-button_icon--right > .fi-icon { + margin-right: 0; + margin-left: 8px; } -.c1.fi-padding-left-l { - padding-left: 25px; +.c1.fi-button--disabled > .fi-button_icon { + cursor: not-allowed; } -.c1.fi-padding-left-xl { - padding-left: 30px; -} + +`; -.c1.fi-padding-left-xxl { - padding-left: 40px; +exports[`Button variant secondaryNoBorder should match snapshot 1`] = ` +.c0 { + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; + font: 100% inherit; + line-height: 1; + text-align: left; + -webkit-text-decoration: none; + text-decoration: none; + vertical-align: baseline; + color: inherit; + background: none; + cursor: inherit; + display: inline-block; + max-width: 100%; + cursor: pointer; } -.c1.fi-padding-left-xxxl { - padding-left: 60px; +.c0:-moz-focusring { + outline: 1px dotted ButtonText; } -.c1.fi-padding-left-xxxxl { - padding-left: 80px; +.c0::-moz-focus-inner { + border-style: none; + padding: 0; } -.c1.fi-padding-left-insetXxs { - padding-left: 2px; +.c0::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; } -.c1.fi-padding-left-insetXs { - padding-left: 4px; +.c0::-webkit-inner-spin-button { + height: auto; } -.c1.fi-padding-left-insetS { - padding-left: 6px; +.c0::-webkit-outer-spin-button { + height: auto; } -.c1.fi-padding-left-insetM { - padding-left: 8px; +.c0::before, +.c0::after { + box-sizing: border-box; } -.c1.fi-padding-left-insetL { - padding-left: 10px; +.c2 { + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; + font: 100% inherit; + line-height: 1; + text-align: left; + -webkit-text-decoration: none; + text-decoration: none; + vertical-align: baseline; + color: inherit; + background: none; + cursor: inherit; + display: inline; + max-width: 100%; + word-wrap: normal; + word-break: normal; + white-space: normal; } -.c1.fi-padding-left-insetXl { - padding-left: 16px; +.c2::before, +.c2::after { + box-sizing: border-box; } -.c1.fi-padding-left-insetXxl { - padding-left: 20px; +.c1 { + color: hsl(0,0%,13%); + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 600; + font-size: 14px; + line-height: 20px; + padding: 10px 20px; + min-height: 40px; + color: hsl(0,0%,100%); + background: linear-gradient(0deg,hsl(212,63%,37%) 0%,hsl(212,63%,45%) 100%); + border-radius: 2px; + text-align: center; + text-shadow: 0 1px 1px hsla(214,100%,24%,0.5); + cursor: pointer; + border: 1px solid transparent; } .c1:focus { diff --git a/src/core/Expander/Expander/__snapshots__/Expander.test.tsx.snap b/src/core/Expander/Expander/__snapshots__/Expander.test.tsx.snap index 3a47cd746..254fb9c81 100644 --- a/src/core/Expander/Expander/__snapshots__/Expander.test.tsx.snap +++ b/src/core/Expander/Expander/__snapshots__/Expander.test.tsx.snap @@ -228,10 +228,7 @@ exports[`Basic expander shoud match snapshot 1`] = ` } .c7.fi-expander_content--open:not(.fi-expander_content--no-padding) { - padding-top: 10px; - padding-right: 20px; - padding-bottom: 20px; - padding-left: 20px; + padding: 10px 20px 20px; } .c6 { diff --git a/src/core/Expander/ExpanderContent/ExpanderContent.baseStyles.tsx b/src/core/Expander/ExpanderContent/ExpanderContent.baseStyles.tsx index 25b35fe96..eea3bb7f2 100644 --- a/src/core/Expander/ExpanderContent/ExpanderContent.baseStyles.tsx +++ b/src/core/Expander/ExpanderContent/ExpanderContent.baseStyles.tsx @@ -1,7 +1,6 @@ import { css } from 'styled-components'; import { SuomifiTheme } from '../../theme'; import { element, font } from '../../theme/reset'; -import { padding } from '../../theme/utils'; export const baseStyles = (theme: SuomifiTheme) => css` ${element(theme)} @@ -39,7 +38,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` animation: fi-expander_content-anim ${theme.transitions.basicTime} ${theme.transitions.basicTimingFunction} 1 forwards; &:not(.fi-expander_content--no-padding) { - ${padding(theme)('xs', 'm', 'm', 'm')} + padding: ${theme.spacing.xs} ${theme.spacing.m} ${theme.spacing.m}; } } @keyframes fi-expander_content-anim { diff --git a/src/core/Expander/ExpanderContent/__snapshots__/ExpanderContent.test.tsx.snap b/src/core/Expander/ExpanderContent/__snapshots__/ExpanderContent.test.tsx.snap index 0adb70069..6b65043b8 100644 --- a/src/core/Expander/ExpanderContent/__snapshots__/ExpanderContent.test.tsx.snap +++ b/src/core/Expander/ExpanderContent/__snapshots__/ExpanderContent.test.tsx.snap @@ -80,10 +80,7 @@ exports[`Basic ExpanderContent shoud match snapshot 1`] = ` } .c1.fi-expander_content--open:not(.fi-expander_content--no-padding) { - padding-top: 10px; - padding-right: 20px; - padding-bottom: 20px; - padding-left: 20px; + padding: 10px 20px 20px; }
.fi-button_icon > .fi-icon { + width: 16px; + height: 16px; + margin-right: 8px; + vertical-align: middle; + -webkit-transform: translateY(-0.1em); + -ms-transform: translateY(-0.1em); + transform: translateY(-0.1em); } -.c13.fi-margin-top-insetM { - margin-top: 8px; +.c13 > .fi-button_icon--right > .fi-icon { + margin-right: 0; + margin-left: 8px; } -.c13.fi-margin-top-insetL { - margin-top: 10px; +.c13.fi-button--disabled > .fi-button_icon { + cursor: not-allowed; } -.c13.fi-margin-top-insetXl { - margin-top: 16px; +.c17.fi-month-day { + padding: 1px; + text-align: center; + min-width: 36px; + height: 38px; } -.c13.fi-margin-top-insetXxl { - margin-top: 20px; +.c17.fi-month-day--disabled { + color: hsl(202,7%,67%); } -.c13.fi-margin-right-xxs { - margin-right: 5px; +.c17 .fi-month-day_current { + margin: 0 6px; + padding: 3px 0; + border-bottom: 1px solid hsl(202,7%,67%); + text-align: center; } -.c13.fi-margin-right-xs { - margin-right: 10px; +.c17 .fi-month-day_button_current { + margin: 0 6px; + padding: 3px 0; + border-bottom: 1px solid hsl(0,0%,13%); + text-align: center; } -.c13.fi-margin-right-s { - margin-right: 15px; +.c17 .fi-month-day_button--disabled { + color: hsl(202,7%,67%); } -.c13.fi-margin-right-m { - margin-right: 20px; +.c17 .fi-month-day_button--disabled .fi-month-day_button_current { + border-bottom: 1px solid hsl(202,7%,67%); } -.c13.fi-margin-right-l { - margin-right: 25px; +.c17 .fi-month-day_button { + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 400; + border: 1px solid transparent; + border-radius: 2px; + width: 100%; + height: 100%; + text-align: center; } -.c13.fi-margin-right-xl { - margin-right: 30px; +.c17 .fi-month-day_button:focus { + box-shadow: none; + position: relative; + outline: 3px solid transparent; } -.c13.fi-margin-right-xxl { - margin-right: 40px; +.c17 .fi-month-day_button:focus:after { + content: ''; + position: absolute; + pointer-events: none; + top: -2px; + right: -2px; + bottom: -2px; + left: -2px; + border-radius: 2px; + background-color: transparent; + border: 0px solid hsl(0,0%,100%); + box-sizing: border-box; + box-shadow: 0 0 0 2px hsl(196,77%,44%); + z-index: 9999; } -.c13.fi-margin-right-xxxl { - margin-right: 60px; +.c17 .fi-month-day_button:not(.fi-month-day_button--disabled):hover { + background-color: hsl(212,63%,45%); + color: hsl(0,0%,100%); } -.c13.fi-margin-right-xxxxl { - margin-right: 80px; +.c17 .fi-month-day_button:not(.fi-month-day_button--disabled):hover .fi-month-day_button_current { + border-bottom: 1px solid hsl(0,0%,100%); } -.c13.fi-margin-right-insetXxs { - margin-right: 2px; +.c17 .fi-month-day_button--selected { + border: 1px solid hsl(212,63%,45%); + background-color: hsl(212,63%,95%); + -webkit-text-decoration: none; + text-decoration: none; + font-weight: 600; } -.c13.fi-margin-right-insetXs { - margin-right: 4px; +.c17 .fi-month-day_button--selected:focus { + box-shadow: none; + position: relative; } -.c13.fi-margin-right-insetS { - margin-right: 6px; +.c17 .fi-month-day_button--selected:focus:after { + content: ''; + position: absolute; + pointer-events: none; + top: -2px; + right: -2px; + bottom: -2px; + left: -2px; + border-radius: 2px; + background-color: transparent; + border: 0px solid hsl(0,0%,100%); + box-sizing: border-box; + box-shadow: 0 0 0 2px hsl(196,77%,44%); + z-index: 9999; } -.c13.fi-margin-right-insetM { - margin-right: 8px; +.c17 .fi-month-day_button--selected:hover { + font-weight: 400; } -.c13.fi-margin-right-insetL { - margin-right: 10px; +.c16.fi-month-table { + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 400; + margin-top: 15px; + margin-bottom: 10px; } -.c13.fi-margin-right-insetXl { - margin-right: 16px; +.c16 .fi-month-table_thead-cell { + padding: 1px; + text-align: center; + min-width: 36px; + height: 38px; } -.c13.fi-margin-right-insetXxl { - margin-right: 20px; +.c7 { + position: absolute; + -webkit-clip: rect(0 0 0 0); + clip: rect(0 0 0 0); + height: 1px; + width: 1px; + margin: -1px; + padding: 0; + border: 0; + overflow: hidden; } -.c13.fi-margin-bottom-xxs { - margin-bottom: 5px; +.c3.fi-label .fi-label_label-span { + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 600; + display: inline-block; + vertical-align: middle; + color: hsl(0,0%,13%); } -.c13.fi-margin-bottom-xs { - margin-bottom: 10px; +.c3.fi-label .fi-label_label-span .fi-label_optional-text { + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 400; } -.c13.fi-margin-bottom-s { - margin-bottom: 15px; +.c3.fi-label .fi-label_label-span .fi-tooltip { + margin-left: 6px; } -.c13.fi-margin-bottom-m { - margin-bottom: 20px; +.c9 { + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 600; + color: hsl(0,0%,13%); + font-size: 14px; + line-height: 20px; } -.c13.fi-margin-bottom-l { - margin-bottom: 25px; +.c9.fi-status-text { + display: block; } -.c13.fi-margin-bottom-xl { - margin-bottom: 30px; +.c9.fi-status-text.fi-status-text--error { + color: hsl(3,59%,48%); } -.c13.fi-margin-bottom-xxl { - margin-bottom: 40px; +.c12 { + width: 290px; } -.c13.fi-margin-bottom-xxxl { - margin-bottom: 60px; +.c12 .fi-dropdown_item-list { + padding-top: 0; } -.c13.fi-margin-bottom-xxxxl { - margin-bottom: 80px; +.c12.fi-dropdown { + display: inline-block; } -.c13.fi-margin-bottom-insetXxs { - margin-bottom: 2px; +.c12.fi-dropdown .fi-dropdown_label--visible { + margin-bottom: 10px; } -.c13.fi-margin-bottom-insetXs { - margin-bottom: 4px; +.c12.fi-dropdown .fi-hint-text { + margin-bottom: 10px; } -.c13.fi-margin-bottom-insetS { - margin-bottom: 6px; +.c12.fi-dropdown .fi-status-text { + line-height: 1.1rem; } -.c13.fi-margin-bottom-insetM { - margin-bottom: 8px; +.c12.fi-dropdown .fi-status-text.fi-dropdown_statusText--has-content { + margin-top: 5px; } -.c13.fi-margin-bottom-insetL { - margin-bottom: 10px; +.c12.fi-dropdown .fi-dropdown_button { + color: hsl(0,0%,13%); + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 400; + min-width: 245px; + max-width: 100%; + padding: 8px 16px; + border: 1px solid hsl(202,7%,80%); + border-radius: 2px; + line-height: 1; + position: relative; + display: inline-block; + word-break: break-word; + width: 100%; + overflow-wrap: break-word; + height: 40px; + padding: 7px 38px 7px 7px; + border-color: hsl(201,7%,58%); + text-align: left; + line-height: 1.5; + background-color: hsl(0,0%,100%); + box-shadow: 0 1px 2px 0 hsla(214,100%,24%,0.1) inset; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + white-space: nowrap; } -.c13.fi-margin-bottom-insetXl { - margin-bottom: 16px; +.c12.fi-dropdown .fi-dropdown_button:focus-visible { + outline: none; } -.c13.fi-margin-bottom-insetXxl { - margin-bottom: 20px; +.c12.fi-dropdown .fi-dropdown_button:before { + content: ''; + position: absolute; + top: 50%; + right: 16px; + margin-top: -3px; + border-style: solid; + border-color: hsl(0,0%,13%) transparent transparent transparent; + border-width: 6px 4px 0 4px; } -.c13.fi-margin-left-xxs { - margin-left: 5px; +.c12.fi-dropdown .fi-dropdown_button[aria-expanded='true']:before { + border-color: transparent transparent hsl(0,0%,13%) transparent; + border-width: 0 4px 6px 4px; } -.c13.fi-margin-left-xs { - margin-left: 10px; +.c12.fi-dropdown .fi-dropdown_display-value { + width: 100%; + height: 100%; + display: inline-block; + line-height: 1.5; + overflow: hidden; } -.c13.fi-margin-left-s { - margin-left: 15px; +.c12.fi-dropdown .fi-dropdown_popover { + color: hsl(0,0%,13%); + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 400; + margin-top: -1px; + padding: 0; + box-sizing: border-box; + font-size: 100%; + border: 0; + background-color: hsl(0,0%,100%); + border-color: hsl(201,7%,58%); + border-style: solid; + border-width: 0 1px 1px 1px; + border-radius: 0px 0px 2px 2px; + max-height: 265px; + overflow-y: auto; + overflow-x: hidden; } -.c13.fi-margin-left-m { - margin-left: 20px; +.c12.fi-dropdown .fi-dropdown_popover:focus-within { + outline: 0; + box-shadow: none; } -.c13.fi-margin-left-l { - margin-left: 25px; +.c12.fi-dropdown--full-width { + width: 100%; } -.c13.fi-margin-left-xl { - margin-left: 30px; +.c12.fi-dropdown--open .fi-dropdown_button { + border-bottom: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding-bottom: 8px; } -.c13.fi-margin-left-xxl { - margin-left: 40px; +.c12.fi-dropdown--error .fi-dropdown_button { + border-color: hsl(3,59%,48%); + border-width: 2px; } -.c13.fi-margin-left-xxxl { - margin-left: 60px; +.c12.fi-dropdown--italicize .fi-dropdown_button { + font-style: italic; + color: hsl(201,7%,46%); + opacity: 1; } -.c13.fi-margin-left-xxxxl { - margin-left: 80px; +.c12.fi-dropdown--disabled .fi-dropdown_input-wrapper { + cursor: not-allowed; } -.c13.fi-margin-left-insetXxs { - margin-left: 2px; +.c12.fi-dropdown--disabled .fi-dropdown_input-wrapper .fi-dropdown_button { + background-color: hsl(202,7%,97%); + color: hsl(202,7%,67%); + opacity: 1; + pointer-events: none; } -.c13.fi-margin-left-insetXs { - margin-left: 4px; +.c12.fi-dropdown--disabled .fi-dropdown_input-wrapper .fi-dropdown_button:before { + border-color: hsl(202,7%,67%) transparent transparent transparent; } -.c13.fi-margin-left-insetS { - margin-left: 6px; +.c12.fi-dropdown:not(.fi-dropdown--open) .fi-dropdown_button:focus { + outline: 3px solid transparent; + position: relative; } -.c13.fi-margin-left-insetM { - margin-left: 8px; +.c12.fi-dropdown:not(.fi-dropdown--open) .fi-dropdown_button:focus:after { + content: ''; + position: absolute; + pointer-events: none; + top: -2px; + right: -2px; + bottom: -2px; + left: -2px; + border-radius: 2px; + background-color: transparent; + border: 0px solid hsl(0,0%,100%); + box-sizing: border-box; + box-shadow: 0 0 0 2px hsl(196,77%,44%); + z-index: 9999; } -.c13.fi-margin-left-insetL { - margin-left: 10px; +.c11.fi-date-selectors_container { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + row-gap: 10px; } -.c13.fi-margin-left-insetXl { - margin-left: 16px; +.c11 .fi-date-selectors_year-select { + margin-right: 10px; + width: 0px; } -.c13.fi-margin-left-insetXxl { - margin-left: 20px; +.c11 .fi-date-selectors_year-select .fi-dropdown_button { + min-width: 90px; } -.c13.fi-padding-xxs { - padding: 5px; +.c11 .fi-date-selectors_month-select { + margin-right: 5px; + width: 0px; } -.c13.fi-padding-xs { - padding: 10px; +.c11 .fi-date-selectors_month-select .fi-dropdown_button { + min-width: 145px; } -.c13.fi-padding-s { - padding: 15px; +.c11 .fi-date-selectors_buttons { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; } -.c13.fi-padding-m { - padding: 20px; +.c11 .fi-date-selectors_month-button { + padding: 0; + width: 40px; } -.c13.fi-padding-l { - padding: 25px; +.c11 .fi-date-selectors_month-button_icon { + width: 16px; + height: 16px; + vertical-align: middle; } -.c13.fi-padding-xl { - padding: 30px; +.c10 { + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 18px; + line-height: 1.5; + font-weight: 400; } -.c13.fi-padding-xxl { - padding: 40px; +.c10.fi-date-picker { + background-color: hsl(0,0%,100%); + box-shadow: 0px 4px 8px 0px hsla(0,0%,13%,0.14); + border: 1px solid hsl(0,0%,58%); } -.c13.fi-padding-xxxl { - padding: 60px; +.c10 .fi-date-picker_bottom-container { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; } -.c13.fi-padding-xxxxl { - padding: 80px; -} - -.c13.fi-padding-insetXxs { - padding: 2px; +.c10 .fi-date-picker_application { + padding: 20px 15px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + margin: auto; } -.c13.fi-padding-insetXs { - padding: 4px; +.c10.fi-date-picker--small-screen { + border: none; + background: none; + top: 0; + bottom: 0; + left: 0; + right: 0; + position: fixed; + -webkit-transform: translateZ(0) translateY(0); + -ms-transform: translateZ(0) translateY(0); + transform: translateZ(0) translateY(0); + -webkit-transition: -webkit-transform 200ms cubic-bezier(0.28,0.84,0.42,1); + -webkit-transition: transform 200ms cubic-bezier(0.28,0.84,0.42,1); + transition: transform 200ms cubic-bezier(0.28,0.84,0.42,1); } -.c13.fi-padding-insetS { - padding: 6px; +.c10.fi-date-picker--small-screen .fi-date-picker_application { + padding-top: 10px; + padding-bottom: 30px; } -.c13.fi-padding-insetM { - padding: 8px; +.c10.fi-date-picker--hidden { + visibility: hidden; } -.c13.fi-padding-insetL { - padding: 10px; +.c10.fi-date-picker--small-screen-hidden { + -webkit-transform: translateZ(0) translateY(100%); + -ms-transform: translateZ(0) translateY(100%); + transform: translateZ(0) translateY(100%); + -webkit-transition: -webkit-transform 200ms cubic-bezier(0.28,0.84,0.42,1), visibility 200ms cubic-bezier(0.28,0.84,0.42,1); + -webkit-transition: transform 200ms cubic-bezier(0.28,0.84,0.42,1), visibility 200ms cubic-bezier(0.28,0.84,0.42,1); + transition: transform 200ms cubic-bezier(0.28,0.84,0.42,1), visibility 200ms cubic-bezier(0.28,0.84,0.42,1); } -.c13.fi-padding-insetXl { - padding: 16px; +.c10 .fi-date-picker_slide-indicator-wrapper { + touch-action: none; + padding-top: 20px; + padding-bottom: 10px; + cursor: -webkit-grab; + cursor: -moz-grab; + cursor: grab; } -.c13.fi-padding-insetXxl { - padding: 20px; +.c10 .fi-date-picker_slide-indicator { + margin: 0 auto; + width: 60px; + height: 3px; + background-color: hsl(202,7%,80%); } -.c13.fi-padding-top-xxs { - padding-top: 5px; +.c10 .fi-date-picker_small-screen-container { + touch-action: pan-x pinch-zoom; + max-height: 100%; + overscroll-behavior: contain; + background-color: hsl(0,0%,100%); + border-top: 1px solid hsl(0,0%,58%); + border-radius: 10px 10px 0 0; + position: absolute; + bottom: 0; + left: 0; + right: 0; } -.c13.fi-padding-top-xs { - padding-top: 10px; +.c10 .fi-date-picker_small-screen-container--scroll { + overflow: auto; + touch-action: auto; } -.c13.fi-padding-top-s { - padding-top: 15px; +.c10 .fi-date-picker_popper-arrow, +.c10 .fi-date-picker_popper-arrow::before { + position: absolute; + width: 11px; + height: 11px; } -.c13.fi-padding-top-m { - padding-top: 20px; +.c10 .fi-date-picker_popper-arrow::before { + content: ''; + background-color: hsl(0,0%,100%); + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); } -.c13.fi-padding-top-l { - padding-top: 25px; +.c10 .fi-date-picker_popper-arrow[data-popper-placement^='bottom-end'] { + top: -7px; } -.c13.fi-padding-top-xl { - padding-top: 30px; +.c10 .fi-date-picker_popper-arrow[data-popper-placement^='bottom-end']::before { + border-top: 1px solid hsl(0,0%,58%); + border-left: 1px solid hsl(0,0%,58%); } -.c13.fi-padding-top-xxl { - padding-top: 40px; +.c10 .fi-date-picker_popper-arrow[data-popper-placement^='top-end'] { + bottom: -6px; } -.c13.fi-padding-top-xxxl { - padding-top: 60px; +.c10 .fi-date-picker_popper-arrow[data-popper-placement^='top-end']::before { + border-bottom: 1px solid hsl(0,0%,58%); + border-right: 1px solid hsl(0,0%,58%); } -.c13.fi-padding-top-xxxxl { - padding-top: 80px; +.c1 { + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 18px; + line-height: 1.5; + font-weight: 400; + width: 150px; } -.c13.fi-padding-top-insetXxs { - padding-top: 2px; +.c1.fi-date-input--full-width { + width: 100%; } -.c13.fi-padding-top-insetXs { - padding-top: 4px; +.c1 .fi-date-input_wrapper { + width: 100%; + display: inline-block; } -.c13.fi-padding-top-insetS { - padding-top: 6px; +.c1 .fi-date-input_wrapper .fi-date-input_label--visible { + margin-bottom: 10px; } -.c13.fi-padding-top-insetM { - padding-top: 8px; +.c1 .fi-date-input_wrapper .fi-hint-text { + margin-bottom: 10px; } -.c13.fi-padding-top-insetL { - padding-top: 10px; +.c1 .fi-date-input_wrapper .fi-date-input_statusText--has-content { + margin-top: 5px; } -.c13.fi-padding-top-insetXl { - padding-top: 16px; +.c1 .fi-date-input_input-element-container { + width: 100%; } -.c13.fi-padding-top-insetXxl { - padding-top: 20px; +.c1 .fi-date-input_input-element-container > input:focus { + outline-color: hsl(196,77%,44%); + outline-width: 2px; + outline-offset: 2px; + outline-style: solid; } -.c13.fi-padding-right-xxs { - padding-right: 5px; +.c1 .fi-date-input_input-element-container:focus-within > input:focus { + outline: none; } -.c13.fi-padding-right-xs { - padding-right: 10px; +.c1 .fi-date-input_input-element-container:focus-within { + position: relative; + outline: 3px solid transparent; } -.c13.fi-padding-right-s { - padding-right: 15px; +.c1 .fi-date-input_input-element-container:focus-within::after { + content: ''; + position: absolute; + pointer-events: none; + top: -2px; + right: -2px; + bottom: -2px; + left: -2px; + border-radius: 2px; + background-color: transparent; + border: 0px solid hsl(0,0%,100%); + box-sizing: border-box; + box-shadow: 0 0 0 2px hsl(196,77%,44%); + z-index: 9999; } -.c13.fi-padding-right-m { - padding-right: 20px; +.c1 .fi-date-input_picker-element-container { + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; } -.c13.fi-padding-right-l { - padding-right: 25px; +.c1 .fi-date-input_input-and-picker-wrapper { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; } -.c13.fi-padding-right-xl { - padding-right: 30px; +.c1 .fi-date-input_input { + color: hsl(0,0%,13%); + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 400; + min-width: 245px; + max-width: 100%; + padding: 8px 16px; + border: 1px solid hsl(202,7%,80%); + border-radius: 2px; + line-height: 1; + background-color: hsl(0,0%,100%); + min-width: 40px; + width: 100%; + min-height: 40px; + padding-left: 10px; + border-color: hsl(201,7%,58%); + border-radius: 2px; } -.c13.fi-padding-right-xxl { - padding-right: 40px; +.c1 .fi-date-input_input::-webkit-input-placeholder { + font-style: italic; + color: hsl(201,7%,46%); + opacity: 1; } -.c13.fi-padding-right-xxxl { - padding-right: 60px; +.c1 .fi-date-input_input::-moz-placeholder { + font-style: italic; + color: hsl(201,7%,46%); + opacity: 1; } -.c13.fi-padding-right-xxxxl { - padding-right: 80px; +.c1 .fi-date-input_input:-ms-input-placeholder { + font-style: italic; + color: hsl(201,7%,46%); + opacity: 1; } -.c13.fi-padding-right-insetXxs { - padding-right: 2px; +.c1 .fi-date-input_input::placeholder { + font-style: italic; + color: hsl(201,7%,46%); + opacity: 1; } -.c13.fi-padding-right-insetXs { - padding-right: 4px; +.c1 .fi-date-input_picker-button { + height: 100%; + width: 40px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + padding: 10px; + border: 1px solid hsl(212,63%,45%); + border-radius: 2px; } -.c13.fi-padding-right-insetS { - padding-right: 6px; +.c1 .fi-date-input_picker-button > input:focus { + outline-color: hsl(196,77%,44%); + outline-width: 2px; + outline-offset: 2px; + outline-style: solid; } -.c13.fi-padding-right-insetM { - padding-right: 8px; +.c1 .fi-date-input_picker-button:focus-within > input:focus { + outline: none; } -.c13.fi-padding-right-insetL { - padding-right: 10px; +.c1 .fi-date-input_picker-button:focus-within { + position: relative; } -.c13.fi-padding-right-insetXl { - padding-right: 16px; +.c1 .fi-date-input_picker-button:focus-within::after { + content: ''; + position: absolute; + pointer-events: none; + top: -2px; + right: -2px; + bottom: -2px; + left: -2px; + border-radius: 2px; + background-color: transparent; + border: 0px solid hsl(0,0%,100%); + box-sizing: border-box; + box-shadow: 0 0 0 2px hsl(196,77%,44%); + z-index: 9999; } -.c13.fi-padding-right-insetXxl { - padding-right: 20px; +.c1 .fi-date-input_picker-button:focus { + outline: 3px solid transparent; } -.c13.fi-padding-bottom-xxs { - padding-bottom: 5px; +.c1 .fi-date-input_picker-icon { + color: hsl(212,63%,45%); } -.c13.fi-padding-bottom-xs { - padding-bottom: 10px; +.c1 .fi-date-input_picker-button--disabled { + cursor: default; + border-color: hsl(202,7%,67%); } -.c13.fi-padding-bottom-s { - padding-bottom: 15px; +.c1 .fi-date-input_picker-button--disabled .fi-date-input_picker-icon { + color: hsl(202,7%,67%); } -.c13.fi-padding-bottom-m { - padding-bottom: 20px; +.c1.fi-date-input--error .fi-date-input_input { + border: 2px solid hsl(3,59%,48%); } -.c13.fi-padding-bottom-l { - padding-bottom: 25px; -} - -.c13.fi-padding-bottom-xl { - padding-bottom: 30px; -} - -.c13.fi-padding-bottom-xxl { - padding-bottom: 40px; -} - -.c13.fi-padding-bottom-xxxl { - padding-bottom: 60px; -} - -.c13.fi-padding-bottom-xxxxl { - padding-bottom: 80px; -} - -.c13.fi-padding-bottom-insetXxs { - padding-bottom: 2px; -} - -.c13.fi-padding-bottom-insetXs { - padding-bottom: 4px; -} - -.c13.fi-padding-bottom-insetS { - padding-bottom: 6px; -} - -.c13.fi-padding-bottom-insetM { - padding-bottom: 8px; -} - -.c13.fi-padding-bottom-insetL { - padding-bottom: 10px; -} - -.c13.fi-padding-bottom-insetXl { - padding-bottom: 16px; -} - -.c13.fi-padding-bottom-insetXxl { - padding-bottom: 20px; -} - -.c13.fi-padding-left-xxs { - padding-left: 5px; -} - -.c13.fi-padding-left-xs { - padding-left: 10px; -} - -.c13.fi-padding-left-s { - padding-left: 15px; -} - -.c13.fi-padding-left-m { - padding-left: 20px; -} - -.c13.fi-padding-left-l { - padding-left: 25px; -} - -.c13.fi-padding-left-xl { - padding-left: 30px; -} - -.c13.fi-padding-left-xxl { - padding-left: 40px; -} - -.c13.fi-padding-left-xxxl { - padding-left: 60px; -} - -.c13.fi-padding-left-xxxxl { - padding-left: 80px; -} - -.c13.fi-padding-left-insetXxs { - padding-left: 2px; -} - -.c13.fi-padding-left-insetXs { - padding-left: 4px; -} - -.c13.fi-padding-left-insetS { - padding-left: 6px; -} - -.c13.fi-padding-left-insetM { - padding-left: 8px; -} - -.c13.fi-padding-left-insetL { - padding-left: 10px; -} - -.c13.fi-padding-left-insetXl { - padding-left: 16px; -} - -.c13.fi-padding-left-insetXxl { - padding-left: 20px; -} - -.c13:focus { - position: relative; - outline: 3px solid transparent; -} - -.c13:focus::after { - content: ''; - position: absolute; - pointer-events: none; - top: -2px; - right: -2px; - bottom: -2px; - left: -2px; - border-radius: 2px; - background-color: transparent; - border: 0px solid hsl(0,0%,100%); - box-sizing: border-box; - box-shadow: 0 0 0 2px hsl(196,77%,44%); - z-index: 9999; -} - -.c13:hover { - background: linear-gradient(0deg,hsl(212,63%,45%) 0%,hsl(212,63%,49%) 100%); - outline: 2px solid transparent; -} - -.c13:active { - background: hsl(212,63%,37%); -} - -.c13.fi-button--disabled, -.c13[disabled], -.c13:disabled { - text-shadow: 0 1px 1px rgba(33,33,33,0.5); - background: linear-gradient(0deg,hsl(202,7%,67%) 0%,hsl(202,7%,80%) 100%); - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - cursor: not-allowed; -} - -.c13.fi-button--disabled::after { - border: none; - box-shadow: none; -} - -.c13.fi-button--fullwidth { - display: block; - width: 100%; -} - -.c13.fi-button--inverted { - background: none; - background-color: hsl(212,63%,45%); - border: 1px solid hsl(0,0%,100%); - text-shadow: none; -} - -.c13.fi-button--inverted:hover { - background: linear-gradient(-180deg,hsla(0,0%,100%,0.1) 0%,hsla(0,0%,100%,0) 100%); -} - -.c13.fi-button--inverted:active { - background: none; - background-color: hsl(212,63%,45%); -} - -.c13.fi-button--inverted.fi-button--disabled, -.c13.fi-button--inverted[disabled], -.c13.fi-button--inverted:disabled { - opacity: 0.41; - background: none; - background-color: none; -} - -.c13.fi-button--secondary { - color: hsl(212,63%,45%); - background: none; - background-color: hsl(0,0%,100%); - border: 1px solid hsl(212,63%,45%); - text-shadow: none; -} - -.c13.fi-button--secondary:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); -} - -.c13.fi-button--secondary:active { - background: none; - background-color: hsl(202,7%,93%); -} - -.c13.fi-button--secondary.fi-button--disabled, -.c13.fi-button--secondary[disabled], -.c13.fi-button--secondary:disabled { - color: hsl(202,7%,67%); - text-shadow: none; - background: none; - background-color: hsl(212,63%,98%); - border-color: hsl(202,7%,67%); -} - -.c13.fi-button--secondary-noborder { - color: hsl(212,63%,45%); - background: none; - background-color: hsl(0,0%,100%); - border: 1px solid hsl(212,63%,45%); - text-shadow: none; - border: none; - background-color: transparent; -} - -.c13.fi-button--secondary-noborder:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); -} - -.c13.fi-button--secondary-noborder:active { - background: none; - background-color: hsl(202,7%,93%); -} - -.c13.fi-button--secondary-noborder.fi-button--disabled, -.c13.fi-button--secondary-noborder[disabled], -.c13.fi-button--secondary-noborder:disabled { - color: hsl(202,7%,67%); - text-shadow: none; - background: none; - background-color: hsl(212,63%,98%); - border-color: hsl(202,7%,67%); -} - -.c13.fi-button--secondary-light { - color: hsl(212,63%,45%); - color: hsl(212,63%,45%); - background: none; - background-color: hsl(0,0%,100%); - border: 1px solid hsl(212,63%,45%); - text-shadow: none; - background: linear-gradient(0deg,hsl(215,100%,95%),hsl(215,100%,97%)); - border: none; -} - -.c13.fi-button--secondary-light:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); -} - -.c13.fi-button--secondary-light:active { - background: none; - background-color: hsl(202,7%,93%); -} - -.c13.fi-button--secondary-light.fi-button--disabled, -.c13.fi-button--secondary-light[disabled], -.c13.fi-button--secondary-light:disabled { - color: hsl(202,7%,67%); - text-shadow: none; - background: none; - background-color: hsl(212,63%,98%); - border-color: hsl(202,7%,67%); +.c1.fi-date-input--error .fi-date-input_picker-button { + border: 2px solid hsl(3,59%,48%); + border-left: 1px solid hsl(212,63%,45%); + border-radius: 0 2px 2px 0; } -.c13.fi-button--secondary-light:hover { - background: linear-gradient(0deg,hsl(215,100%,97%),hsl(212,63%,98%)); +.c1.fi-date-input--success .fi-date-input_input { + border: 2px solid hsl(166,90%,34%); } -.c13.fi-button--secondary-light:active { - background: linear-gradient(0deg,hsl(202,7%,93%),hsl(202,7%,97%)); +.c1.fi-date-input--success .fi-date-input_picker-button { + border: 2px solid hsl(166,90%,34%); + border-left: 1px solid hsl(212,63%,45%); + border-radius: 0 2px 2px 0; } -.c13.fi-button--secondary-light.fi-button--disabled, -.c13.fi-button--secondary-light[disabled], -.c13.fi-button--secondary-light:disabled { +.c1.fi-date-input--disabled .fi-date-input_input { color: hsl(202,7%,67%); - background: none; background-color: hsl(202,7%,97%); } -.c13 > .fi-button_icon > .fi-icon { - width: 16px; - height: 16px; - margin-right: 8px; - vertical-align: middle; - -webkit-transform: translateY(-0.1em); - -ms-transform: translateY(-0.1em); - transform: translateY(-0.1em); -} - -.c13 > .fi-button_icon--right > .fi-icon { - margin-right: 0; - margin-left: 8px; +.c1.fi-date-input--has-picker .fi-date-input_input { + border-right: none; + border-radius: 2px 0 0 2px; } -.c13.fi-button--disabled > .fi-button_icon { - cursor: not-allowed; -} - -.c17.fi-month-day { - padding: 1px; - text-align: center; - min-width: 36px; - height: 38px; -} - -.c17.fi-month-day--disabled { - color: hsl(202,7%,67%); -} - -.c17 .fi-month-day_current { - margin: 0 6px; - padding: 3px 0; - border-bottom: 1px solid hsl(202,7%,67%); - text-align: center; -} - -.c17 .fi-month-day_button_current { - margin: 0 6px; - padding: 3px 0; - border-bottom: 1px solid hsl(0,0%,13%); - text-align: center; -} - -.c17 .fi-month-day_button--disabled { - color: hsl(202,7%,67%); -} - -.c17 .fi-month-day_button--disabled .fi-month-day_button_current { - border-bottom: 1px solid hsl(202,7%,67%); -} - -.c17 .fi-month-day_button { - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 400; - border: 1px solid transparent; - border-radius: 2px; - width: 100%; - height: 100%; - text-align: center; -} - -.c17 .fi-month-day_button:focus { - box-shadow: none; - position: relative; - outline: 3px solid transparent; -} - -.c17 .fi-month-day_button:focus:after { - content: ''; - position: absolute; - pointer-events: none; - top: -2px; - right: -2px; - bottom: -2px; - left: -2px; - border-radius: 2px; - background-color: transparent; - border: 0px solid hsl(0,0%,100%); - box-sizing: border-box; - box-shadow: 0 0 0 2px hsl(196,77%,44%); - z-index: 9999; -} - -.c17 .fi-month-day_button:not(.fi-month-day_button--disabled):hover { - background-color: hsl(212,63%,45%); - color: hsl(0,0%,100%); -} - -.c17 .fi-month-day_button:not(.fi-month-day_button--disabled):hover .fi-month-day_button_current { - border-bottom: 1px solid hsl(0,0%,100%); -} - -.c17 .fi-month-day_button--selected { - border: 1px solid hsl(212,63%,45%); - background-color: hsl(212,63%,95%); - -webkit-text-decoration: none; - text-decoration: none; - font-weight: 600; -} - -.c17 .fi-month-day_button--selected:focus { - box-shadow: none; - position: relative; -} - -.c17 .fi-month-day_button--selected:focus:after { - content: ''; - position: absolute; - pointer-events: none; - top: -2px; - right: -2px; - bottom: -2px; - left: -2px; - border-radius: 2px; - background-color: transparent; - border: 0px solid hsl(0,0%,100%); - box-sizing: border-box; - box-shadow: 0 0 0 2px hsl(196,77%,44%); - z-index: 9999; -} - -.c17 .fi-month-day_button--selected:hover { - font-weight: 400; -} - -.c16.fi-month-table { - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 400; - margin-top: 15px; - margin-bottom: 10px; -} - -.c16 .fi-month-table_thead-cell { - padding: 1px; - text-align: center; - min-width: 36px; - height: 38px; -} - -.c7 { - position: absolute; - -webkit-clip: rect(0 0 0 0); - clip: rect(0 0 0 0); - height: 1px; - width: 1px; - margin: -1px; - padding: 0; - border: 0; - overflow: hidden; -} - -.c3.fi-label .fi-label_label-span { - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 600; - display: inline-block; - vertical-align: middle; - color: hsl(0,0%,13%); -} - -.c3.fi-label .fi-label_label-span .fi-label_optional-text { - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 400; -} - -.c3.fi-label .fi-label_label-span .fi-tooltip { - margin-left: 6px; -} - -.c9 { - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 600; - color: hsl(0,0%,13%); - font-size: 14px; - line-height: 20px; -} - -.c9.fi-status-text { - display: block; -} - -.c9.fi-status-text.fi-status-text--error { - color: hsl(3,59%,48%); -} - -.c12 { - width: 290px; -} - -.c12 .fi-dropdown_item-list { - padding-top: 0; -} - -.c12.fi-dropdown { - display: inline-block; -} - -.c12.fi-dropdown .fi-dropdown_label--visible { - margin-bottom: 10px; -} - -.c12.fi-dropdown .fi-hint-text { - margin-bottom: 10px; -} - -.c12.fi-dropdown .fi-status-text { - line-height: 1.1rem; -} - -.c12.fi-dropdown .fi-status-text.fi-dropdown_statusText--has-content { - margin-top: 5px; -} - -.c12.fi-dropdown .fi-dropdown_button { - color: hsl(0,0%,13%); - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 400; - min-width: 245px; - max-width: 100%; - padding: 8px 16px; - border: 1px solid hsl(202,7%,80%); - border-radius: 2px; - line-height: 1; - position: relative; - display: inline-block; - word-break: break-word; - width: 100%; - overflow-wrap: break-word; - height: 40px; - padding: 7px 38px 7px 7px; - border-color: hsl(201,7%,58%); - text-align: left; - line-height: 1.5; - background-color: hsl(0,0%,100%); - box-shadow: 0 1px 2px 0 hsla(214,100%,24%,0.1) inset; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - white-space: nowrap; -} - -.c12.fi-dropdown .fi-dropdown_button:focus-visible { - outline: none; -} - -.c12.fi-dropdown .fi-dropdown_button:before { - content: ''; - position: absolute; - top: 50%; - right: 16px; - margin-top: -3px; - border-style: solid; - border-color: hsl(0,0%,13%) transparent transparent transparent; - border-width: 6px 4px 0 4px; -} - -.c12.fi-dropdown .fi-dropdown_button[aria-expanded='true']:before { - border-color: transparent transparent hsl(0,0%,13%) transparent; - border-width: 0 4px 6px 4px; -} - -.c12.fi-dropdown .fi-dropdown_display-value { - width: 100%; - height: 100%; - display: inline-block; - line-height: 1.5; - overflow: hidden; -} - -.c12.fi-dropdown .fi-dropdown_popover { - color: hsl(0,0%,13%); - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 400; - margin-top: -1px; - padding: 0; - box-sizing: border-box; - font-size: 100%; - border: 0; - background-color: hsl(0,0%,100%); - border-color: hsl(201,7%,58%); - border-style: solid; - border-width: 0 1px 1px 1px; - border-radius: 0px 0px 2px 2px; - max-height: 265px; - overflow-y: auto; - overflow-x: hidden; -} - -.c12.fi-dropdown .fi-dropdown_popover:focus-within { - outline: 0; - box-shadow: none; -} - -.c12.fi-dropdown--full-width { - width: 100%; -} - -.c12.fi-dropdown--open .fi-dropdown_button { - border-bottom: 0; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - padding-bottom: 8px; -} - -.c12.fi-dropdown--error .fi-dropdown_button { - border-color: hsl(3,59%,48%); - border-width: 2px; -} - -.c12.fi-dropdown--italicize .fi-dropdown_button { - font-style: italic; - color: hsl(201,7%,46%); - opacity: 1; -} - -.c12.fi-dropdown--disabled .fi-dropdown_input-wrapper { - cursor: not-allowed; -} - -.c12.fi-dropdown--disabled .fi-dropdown_input-wrapper .fi-dropdown_button { - background-color: hsl(202,7%,97%); - color: hsl(202,7%,67%); - opacity: 1; - pointer-events: none; -} - -.c12.fi-dropdown--disabled .fi-dropdown_input-wrapper .fi-dropdown_button:before { - border-color: hsl(202,7%,67%) transparent transparent transparent; -} - -.c12.fi-dropdown:not(.fi-dropdown--open) .fi-dropdown_button:focus { - outline: 3px solid transparent; - position: relative; -} - -.c12.fi-dropdown:not(.fi-dropdown--open) .fi-dropdown_button:focus:after { - content: ''; - position: absolute; - pointer-events: none; - top: -2px; - right: -2px; - bottom: -2px; - left: -2px; - border-radius: 2px; - background-color: transparent; - border: 0px solid hsl(0,0%,100%); - box-sizing: border-box; - box-shadow: 0 0 0 2px hsl(196,77%,44%); - z-index: 9999; -} - -.c11.fi-date-selectors_container { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - row-gap: 10px; -} - -.c11 .fi-date-selectors_year-select { - margin-right: 10px; - width: 0px; -} - -.c11 .fi-date-selectors_year-select .fi-dropdown_button { - min-width: 90px; -} - -.c11 .fi-date-selectors_month-select { - margin-right: 5px; - width: 0px; -} - -.c11 .fi-date-selectors_month-select .fi-dropdown_button { - min-width: 145px; -} - -.c11 .fi-date-selectors_buttons { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-wrap: nowrap; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; -} - -.c11 .fi-date-selectors_month-button { - padding: 0; - width: 40px; -} - -.c11 .fi-date-selectors_month-button_icon { - width: 16px; - height: 16px; - vertical-align: middle; -} - -.c10 { - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 18px; - line-height: 1.5; - font-weight: 400; -} - -.c10.fi-date-picker { - background-color: hsl(0,0%,100%); - box-shadow: 0px 4px 8px 0px hsla(0,0%,13%,0.14); - border: 1px solid hsl(0,0%,58%); -} - -.c10 .fi-date-picker_bottom-container { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: end; - -webkit-justify-content: flex-end; - -ms-flex-pack: end; - justify-content: flex-end; -} - -.c10 .fi-date-picker_application { - padding: 20px 15px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - width: -webkit-fit-content; - width: -moz-fit-content; - width: fit-content; - margin: auto; -} - -.c10.fi-date-picker--small-screen { - border: none; - background: none; - top: 0; - bottom: 0; - left: 0; - right: 0; - position: fixed; - -webkit-transform: translateZ(0) translateY(0); - -ms-transform: translateZ(0) translateY(0); - transform: translateZ(0) translateY(0); - -webkit-transition: -webkit-transform 200ms cubic-bezier(0.28,0.84,0.42,1); - -webkit-transition: transform 200ms cubic-bezier(0.28,0.84,0.42,1); - transition: transform 200ms cubic-bezier(0.28,0.84,0.42,1); -} - -.c10.fi-date-picker--small-screen .fi-date-picker_application { - padding-top: 10px; - padding-bottom: 30px; -} - -.c10.fi-date-picker--hidden { - visibility: hidden; -} - -.c10.fi-date-picker--small-screen-hidden { - -webkit-transform: translateZ(0) translateY(100%); - -ms-transform: translateZ(0) translateY(100%); - transform: translateZ(0) translateY(100%); - -webkit-transition: -webkit-transform 200ms cubic-bezier(0.28,0.84,0.42,1), visibility 200ms cubic-bezier(0.28,0.84,0.42,1); - -webkit-transition: transform 200ms cubic-bezier(0.28,0.84,0.42,1), visibility 200ms cubic-bezier(0.28,0.84,0.42,1); - transition: transform 200ms cubic-bezier(0.28,0.84,0.42,1), visibility 200ms cubic-bezier(0.28,0.84,0.42,1); -} - -.c10 .fi-date-picker_slide-indicator-wrapper { - touch-action: none; - padding-top: 20px; - padding-bottom: 10px; - cursor: -webkit-grab; - cursor: -moz-grab; - cursor: grab; -} - -.c10 .fi-date-picker_slide-indicator { - margin: 0 auto; - width: 60px; - height: 3px; - background-color: hsl(202,7%,80%); -} - -.c10 .fi-date-picker_small-screen-container { - touch-action: pan-x pinch-zoom; - max-height: 100%; - overscroll-behavior: contain; - background-color: hsl(0,0%,100%); - border-top: 1px solid hsl(0,0%,58%); - border-radius: 10px 10px 0 0; - position: absolute; - bottom: 0; - left: 0; - right: 0; -} - -.c10 .fi-date-picker_small-screen-container--scroll { - overflow: auto; - touch-action: auto; -} - -.c10 .fi-date-picker_popper-arrow, -.c10 .fi-date-picker_popper-arrow::before { - position: absolute; - width: 11px; - height: 11px; -} - -.c10 .fi-date-picker_popper-arrow::before { - content: ''; - background-color: hsl(0,0%,100%); - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); -} - -.c10 .fi-date-picker_popper-arrow[data-popper-placement^='bottom-end'] { - top: -7px; -} - -.c10 .fi-date-picker_popper-arrow[data-popper-placement^='bottom-end']::before { - border-top: 1px solid hsl(0,0%,58%); - border-left: 1px solid hsl(0,0%,58%); -} - -.c10 .fi-date-picker_popper-arrow[data-popper-placement^='top-end'] { - bottom: -6px; -} - -.c10 .fi-date-picker_popper-arrow[data-popper-placement^='top-end']::before { - border-bottom: 1px solid hsl(0,0%,58%); - border-right: 1px solid hsl(0,0%,58%); -} - -.c1 { - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 18px; - line-height: 1.5; - font-weight: 400; - width: 150px; -} - -.c1.fi-date-input--full-width { - width: 100%; -} - -.c1 .fi-date-input_wrapper { - width: 100%; - display: inline-block; -} - -.c1 .fi-date-input_wrapper .fi-date-input_label--visible { - margin-bottom: 10px; -} - -.c1 .fi-date-input_wrapper .fi-hint-text { - margin-bottom: 10px; -} - -.c1 .fi-date-input_wrapper .fi-date-input_statusText--has-content { - margin-top: 5px; -} - -.c1 .fi-date-input_input-element-container { - width: 100%; -} - -.c1 .fi-date-input_input-element-container > input:focus { - outline-color: hsl(196,77%,44%); - outline-width: 2px; - outline-offset: 2px; - outline-style: solid; -} - -.c1 .fi-date-input_input-element-container:focus-within > input:focus { - outline: none; -} - -.c1 .fi-date-input_input-element-container:focus-within { - position: relative; - outline: 3px solid transparent; -} - -.c1 .fi-date-input_input-element-container:focus-within::after { - content: ''; - position: absolute; - pointer-events: none; - top: -2px; - right: -2px; - bottom: -2px; - left: -2px; - border-radius: 2px; - background-color: transparent; - border: 0px solid hsl(0,0%,100%); - box-sizing: border-box; - box-shadow: 0 0 0 2px hsl(196,77%,44%); - z-index: 9999; -} - -.c1 .fi-date-input_picker-element-container { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; -} - -.c1 .fi-date-input_input-and-picker-wrapper { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.c1 .fi-date-input_input { - color: hsl(0,0%,13%); - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 400; - min-width: 245px; - max-width: 100%; - padding: 8px 16px; - border: 1px solid hsl(202,7%,80%); - border-radius: 2px; - line-height: 1; - background-color: hsl(0,0%,100%); - min-width: 40px; - width: 100%; - min-height: 40px; - padding-left: 10px; - border-color: hsl(201,7%,58%); - border-radius: 2px; -} - -.c1 .fi-date-input_input::-webkit-input-placeholder { - font-style: italic; - color: hsl(201,7%,46%); - opacity: 1; -} - -.c1 .fi-date-input_input::-moz-placeholder { - font-style: italic; - color: hsl(201,7%,46%); - opacity: 1; -} - -.c1 .fi-date-input_input:-ms-input-placeholder { - font-style: italic; - color: hsl(201,7%,46%); - opacity: 1; -} - -.c1 .fi-date-input_input::placeholder { - font-style: italic; - color: hsl(201,7%,46%); - opacity: 1; -} - -.c1 .fi-date-input_picker-button { - height: 100%; - width: 40px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - padding: 10px; - border: 1px solid hsl(212,63%,45%); - border-radius: 2px; -} - -.c1 .fi-date-input_picker-button > input:focus { - outline-color: hsl(196,77%,44%); - outline-width: 2px; - outline-offset: 2px; - outline-style: solid; -} - -.c1 .fi-date-input_picker-button:focus-within > input:focus { - outline: none; -} - -.c1 .fi-date-input_picker-button:focus-within { - position: relative; -} - -.c1 .fi-date-input_picker-button:focus-within::after { - content: ''; - position: absolute; - pointer-events: none; - top: -2px; - right: -2px; - bottom: -2px; - left: -2px; - border-radius: 2px; - background-color: transparent; - border: 0px solid hsl(0,0%,100%); - box-sizing: border-box; - box-shadow: 0 0 0 2px hsl(196,77%,44%); - z-index: 9999; -} - -.c1 .fi-date-input_picker-button:focus { - outline: 3px solid transparent; -} - -.c1 .fi-date-input_picker-icon { - color: hsl(212,63%,45%); -} - -.c1 .fi-date-input_picker-button--disabled { - cursor: default; - border-color: hsl(202,7%,67%); -} - -.c1 .fi-date-input_picker-button--disabled .fi-date-input_picker-icon { - color: hsl(202,7%,67%); -} - -.c1.fi-date-input--error .fi-date-input_input { - border: 2px solid hsl(3,59%,48%); -} - -.c1.fi-date-input--error .fi-date-input_picker-button { - border: 2px solid hsl(3,59%,48%); - border-left: 1px solid hsl(212,63%,45%); - border-radius: 0 2px 2px 0; -} - -.c1.fi-date-input--success .fi-date-input_input { - border: 2px solid hsl(166,90%,34%); -} - -.c1.fi-date-input--success .fi-date-input_picker-button { - border: 2px solid hsl(166,90%,34%); - border-left: 1px solid hsl(212,63%,45%); - border-radius: 0 2px 2px 0; -} - -.c1.fi-date-input--disabled .fi-date-input_input { - color: hsl(202,7%,67%); - background-color: hsl(202,7%,97%); -} - -.c1.fi-date-input--has-picker .fi-date-input_input { - border-right: none; - border-radius: 2px 0 0 2px; -} - - -
-
-
-
- -
-
-
- -
-
- -
-
- -
-
-
-