diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 25ef7ffe1..5ae7bd924 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -24,5 +24,6 @@ Fixes # - [ ] I regenerated all CSS files under dist folder - [ ] I tested the UI in all supported browsers +- [ ] I did a visual regression check of the components impacted by doing a Percy build and approved the build - [ ] I tested the UI in dark mode and RTL mode - [ ] I added/updated/removed Storybook coverage as appropriate diff --git a/.gitignore b/.gitignore index f62dad998..3ec5d1189 100644 --- a/.gitignore +++ b/.gitignore @@ -13,3 +13,4 @@ docs/static/*.min.css !docs/static/docs.min.css .storybook/preview-head.html .idea +.storybook-percy diff --git a/.stylelintrc b/.stylelintrc index 8866db9a7..1b4d95a91 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -21,6 +21,7 @@ "selector-class-pattern": null, "alpha-value-notation": "number", "value-no-vendor-prefix": null, + "import-notation": "string", "value-keyword-case": [ "lower", { diff --git a/dist/combobox/combobox.css b/dist/combobox/combobox.css index e897fd758..c9cf88399 100644 --- a/dist/combobox/combobox.css +++ b/dist/combobox/combobox.css @@ -77,6 +77,12 @@ span.combobox { .combobox__option[role^="option"]:active { font-weight: bold; } +.combobox__option[role^="option"]:disabled, +.combobox__option[role^="option"][aria-disabled="true"] { + color: var(--listbox-option-disabled-foreground-color, var(--color-foreground-disabled)); + background-color: unset; + font-weight: unset; +} .combobox__option[role^="option"]:first-child { border-top-left-radius: var(--combobox-listbox-border-radius, var(--border-radius-50)); border-top-right-radius: var(--combobox-listbox-border-radius, var(--border-radius-50)); diff --git a/dist/drawer-dialog/drawer-dialog.css b/dist/drawer-dialog/drawer-dialog.css index f2a93957f..93638b125 100644 --- a/dist/drawer-dialog/drawer-dialog.css +++ b/dist/drawer-dialog/drawer-dialog.css @@ -20,7 +20,7 @@ .drawer-dialog__header { display: flex; flex-shrink: 0; - margin: 16px 16px 0; + margin: 20px 16px 0; position: relative; } .drawer-dialog__header h1, @@ -32,10 +32,16 @@ align-self: center; flex: 1 1 auto; margin: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .drawer-dialog__header > :last-child:not(:only-child) { margin-left: 16px; } +.drawer-dialog__header .fake-link { + text-decoration: none; +} .drawer-dialog__handle { background-color: transparent; border: none; @@ -48,12 +54,12 @@ z-index: 2; } .drawer-dialog__handle::after { - background-color: var(--dialog-handle-color, var(--color-foreground-secondary)); - border-radius: 5px; + background-color: var(--dialog-handle-color, var(--color-stroke-default)); + border-radius: 3px; content: ""; display: block; - height: 3px; - width: 20px; + height: 2px; + width: 24px; } .drawer-dialog__main { box-sizing: border-box; @@ -82,7 +88,7 @@ .drawer-dialog__footer > :not(:first-child) { margin-left: 8px; } -button.drawer-dialog__close { +button.icon-button.drawer-dialog__close { background-color: transparent; border: 0; height: auto; diff --git a/dist/filter-menu-button/filter-menu-button.css b/dist/filter-menu-button/filter-menu-button.css index 75e04e18e..cee79ecfe 100644 --- a/dist/filter-menu-button/filter-menu-button.css +++ b/dist/filter-menu-button/filter-menu-button.css @@ -167,6 +167,18 @@ span.filter-menu-button__radio svg.icon--radio-checked { .filter-menu-button__item:hover { background-color: var(--color-state-primary-hover, color-state-primary-hover); } +.filter-menu-button__item:disabled, +.filter-menu-button__item[aria-disabled="true"] { + color: var(--filter-menu-item-foreground-color-disabled, var(--color-foreground-disabled)); +} +.filter-menu-button__item:disabled span > svg, +.filter-menu-button__item[aria-disabled="true"] span > svg { + color: var(--filter-menu-item-icon-color-disabled, var(--color-foreground-disabled)); +} +.filter-menu-button__item:disabled:hover, +.filter-menu-button__item[aria-disabled="true"]:hover { + background-color: inherit; +} .filter-menu-button__item:hover { background-color: var(--color-state-primary-hover); } @@ -215,6 +227,18 @@ button.filter-menu-button__footer { button.filter-menu-button__footer:hover { background-color: var(--color-state-primary-hover, color-state-primary-hover); } +button.filter-menu-button__footer:disabled, +button.filter-menu-button__footer[aria-disabled="true"] { + color: var(--filter-menu-item-foreground-color-disabled, var(--color-foreground-disabled)); +} +button.filter-menu-button__footer:disabled span > svg, +button.filter-menu-button__footer[aria-disabled="true"] span > svg { + color: var(--filter-menu-item-icon-color-disabled, var(--color-foreground-disabled)); +} +button.filter-menu-button__footer:disabled:hover, +button.filter-menu-button__footer[aria-disabled="true"]:hover { + background-color: inherit; +} button.filter-menu-button__footer:focus, button.filter-menu-button__footer:hover { background-color: var(--color-state-primary-hover); diff --git a/dist/filter-menu/filter-menu.css b/dist/filter-menu/filter-menu.css index a0ebe9a17..cb90a10fd 100644 --- a/dist/filter-menu/filter-menu.css +++ b/dist/filter-menu/filter-menu.css @@ -25,61 +25,28 @@ span.filter-menu__radio { min-width: 18px; width: 18px; } -span.filter-menu__checkbox svg.icon--checkbox-unchecked { - color: var(--filter-menu-item-unchecked-color, var(--color-foreground-secondary)); - display: block; - height: 18px; - width: 18px; -} -span.filter-menu__checkbox svg.icon--checkbox-checked { - color: var(--filter-menu-item-checked-color, var(--color-foreground-primary)); - display: none; - height: 18px; - width: 18px; -} -span.filter-menu__radio svg.icon--radio-unchecked { - color: var(--filter-menu-item-unchecked-color, var(--color-foreground-secondary)); - display: block; - height: 18px; - width: 18px; -} -span.filter-menu__radio svg.icon--radio-checked { - color: var(--filter-menu-item-checked-color, var(--color-foreground-primary)); - display: none; +span.filter-menu__checkbox svg, +span.filter-menu__radio svg { + color: var(--filter-menu-item-icon-color, var(--color-foreground-primary)); height: 18px; width: 18px; } -.filter-menu-form__item span.checkbox { - align-items: flex-start; - display: flex; - flex-shrink: 1; - justify-content: center; -} -.filter-menu-form__item span.checkbox svg.checkbox__unchecked { - color: var(--filter-menu-item-unchecked-color, var(--color-foreground-primary)); -} -.filter-menu-form__item span.checkbox svg.checkbox__checked { - color: var(--filter-menu-item-checked-color, var(--color-foreground-primary)); -} +.filter-menu-form__item span.checkbox, .filter-menu-form__item span.radio { align-items: flex-start; display: flex; flex-shrink: 1; justify-content: center; } -.filter-menu-form__item span.radio svg.radio__unchecked { - color: var(--filter-menu-item-unchecked-color, var(--color-foreground-secondary)); -} -.filter-menu-form__item span.radio svg.radio__checked { +.filter-menu-form__item span.checkbox .checkbox__icon > svg, +.filter-menu-form__item span.radio .checkbox__icon > svg { color: var(--filter-menu-item-checked-color, var(--color-foreground-primary)); } -span.filter-menu__item[role="menuitemcheckbox"], -span.filter-menu__item[role="menuitemradio"], +span.filter-menu__item[role^="menuitem"], span.filter-menu-form__item { display: block; } -.filter-menu__item[role="menuitemcheckbox"], -.filter-menu__item[role="menuitemradio"], +.filter-menu__item[role^="menuitem"], .filter-menu-form__item { background-color: var(--filter-menu-item-background-color, var(--color-background-primary)); box-sizing: border-box; @@ -92,13 +59,29 @@ span.filter-menu-form__item { width: 100%; padding: 8px 16px; } -.filter-menu__item[role="menuitemcheckbox"]:hover, -.filter-menu__item[role="menuitemradio"]:hover, +.filter-menu__item[role^="menuitem"]:hover, .filter-menu-form__item:hover { background-color: var(--color-state-primary-hover, color-state-primary-hover); } -.filter-menu__item[role="menuitemcheckbox"]:last-child, -.filter-menu__item[role="menuitemradio"]:last-child, +.filter-menu__item[role^="menuitem"]:disabled, +.filter-menu-form__item:disabled, +.filter-menu__item[role^="menuitem"][aria-disabled="true"], +.filter-menu-form__item[aria-disabled="true"] { + color: var(--filter-menu-item-foreground-color-disabled, var(--color-foreground-disabled)); +} +.filter-menu__item[role^="menuitem"]:disabled span > svg, +.filter-menu-form__item:disabled span > svg, +.filter-menu__item[role^="menuitem"][aria-disabled="true"] span > svg, +.filter-menu-form__item[aria-disabled="true"] span > svg { + color: var(--filter-menu-item-icon-color-disabled, var(--color-foreground-disabled)); +} +.filter-menu__item[role^="menuitem"]:disabled:hover, +.filter-menu-form__item:disabled:hover, +.filter-menu__item[role^="menuitem"][aria-disabled="true"]:hover, +.filter-menu-form__item[aria-disabled="true"]:hover { + background-color: inherit; +} +.filter-menu__item[role^="menuitem"]:last-child, .filter-menu-form__item:last-child { margin-bottom: 8px; } @@ -124,6 +107,24 @@ button.filter-menu__footer:hover, button.filter-menu-form__footer[type="submit"]:hover { background-color: var(--color-state-primary-hover, color-state-primary-hover); } +button.filter-menu__footer:disabled, +button.filter-menu-form__footer[type="submit"]:disabled, +button.filter-menu__footer[aria-disabled="true"], +button.filter-menu-form__footer[type="submit"][aria-disabled="true"] { + color: var(--filter-menu-item-foreground-color-disabled, var(--color-foreground-disabled)); +} +button.filter-menu__footer:disabled span > svg, +button.filter-menu-form__footer[type="submit"]:disabled span > svg, +button.filter-menu__footer[aria-disabled="true"] span > svg, +button.filter-menu-form__footer[type="submit"][aria-disabled="true"] span > svg { + color: var(--filter-menu-item-icon-color-disabled, var(--color-foreground-disabled)); +} +button.filter-menu__footer:disabled:hover, +button.filter-menu-form__footer[type="submit"]:disabled:hover, +button.filter-menu__footer[aria-disabled="true"]:hover, +button.filter-menu-form__footer[type="submit"][aria-disabled="true"]:hover { + background-color: inherit; +} button.filter-menu__footer:hover, button.filter-menu-form__footer[type="submit"]:hover { background-color: var(--color-state-primary-hover); @@ -133,6 +134,14 @@ button.filter-menu-form__footer[type="submit"]:hover { flex-grow: 1; margin-left: 8px; } +.filter-menu__item[role="menuitemcheckbox"] svg.icon--checkbox-checked, +.filter-menu__item[role="menuitemradio"] svg.icon--radio-checked { + display: none; +} +.filter-menu__item[role="menuitemcheckbox"] svg.icon--checkbox-unchecked, +.filter-menu__item[role="menuitemradio"] svg.icon--radio-unchecked { + display: block; +} .filter-menu__item[role="menuitemcheckbox"][aria-checked="true"] svg.icon--checkbox-unchecked, .filter-menu__item[role="menuitemradio"][aria-checked="true"] svg.icon--radio-unchecked { display: none; diff --git a/dist/floating-label/floating-label.css b/dist/floating-label/floating-label.css index 1ba9e29bf..3e6e9f3db 100644 --- a/dist/floating-label/floating-label.css +++ b/dist/floating-label/floating-label.css @@ -23,9 +23,18 @@ label.floating-label__label { width: calc(100% - 40px); z-index: 1; } +.floating-label--opaque label.floating-label__label { + background-color: var(--floating-label-background-color, var(--color-background-secondary)); + padding-top: 3px; + top: -3px; + width: calc(100% - 40px); +} label.floating-label__label--focus { color: var(--color-background-inverse); } +.floating-label--opaque label.floating-label__label--focus { + background-color: var(--floating-label-focus-background-color, var(--color-background-primary)); +} .floating-label--large label.floating-label__label { transform: scale(0.75, 0.75) translate(0, 3px); } @@ -42,6 +51,9 @@ label.floating-label__label--animate { label.floating-label__label--disabled { color: var(--floating-label-disabled-color, var(--color-foreground-disabled)); } +.floating-label--opaque label.floating-label__label--disabled { + background-color: var(--floating-label-disabled-background-color, var(--color-background-secondary)); +} label.floating-label__label--invalid { color: var(--floating-label-invalid-color, var(--color-foreground-attention)); } diff --git a/dist/fullscreen-dialog/fullscreen-dialog.css b/dist/fullscreen-dialog/fullscreen-dialog.css index c49502a33..9d8e2fa96 100644 --- a/dist/fullscreen-dialog/fullscreen-dialog.css +++ b/dist/fullscreen-dialog/fullscreen-dialog.css @@ -42,6 +42,9 @@ align-self: center; flex: 1 1 auto; margin: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .fullscreen-dialog__header > :last-child:not(:only-child) { margin-left: 16px; diff --git a/dist/inline-notice/inline-notice.css b/dist/inline-notice/inline-notice.css index 4e730b945..856d81690 100644 --- a/dist/inline-notice/inline-notice.css +++ b/dist/inline-notice/inline-notice.css @@ -13,7 +13,7 @@ span.inline-notice { margin-top: 4px; } .inline-notice p { - margin: 4px 0; + margin: 3px 0; } .inline-notice a, .inline-notice button.fake-link { diff --git a/dist/lightbox-dialog/lightbox-dialog.css b/dist/lightbox-dialog/lightbox-dialog.css index afd794253..24c1a64be 100644 --- a/dist/lightbox-dialog/lightbox-dialog.css +++ b/dist/lightbox-dialog/lightbox-dialog.css @@ -41,6 +41,9 @@ align-self: center; flex: 1 1 auto; margin: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .lightbox-dialog__header > :last-child:not(:only-child) { margin-left: 16px; diff --git a/dist/listbox-button/listbox-button.css b/dist/listbox-button/listbox-button.css index ba2bfcdff..546d35d2d 100644 --- a/dist/listbox-button/listbox-button.css +++ b/dist/listbox-button/listbox-button.css @@ -56,6 +56,17 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox, .listbox-button button.btn--borderless[aria-expanded="true"] ~ .listbox-button__listbox { top: 41px; } +.listbox-button .btn__label { + color: var(--listbox-button-label-color, var(--color-foreground-secondary)); + margin-right: 3px; +} +.listbox-button--expanded .btn__label { + color: var(--listbox-button-label-color, var(--color-foreground-primary)); +} +.listbox-button .btn__text { + font-weight: bold; + margin-right: auto; +} .listbox-button__options[role="listbox"]:focus .listbox-button__option--active[role="option"] { background-color: var(--color-state-primary-hover); } @@ -103,6 +114,12 @@ div.listbox-button__option[role="option"]:hover { div.listbox-button__option[role="option"]:active { font-weight: bold; } +div.listbox-button__option[role="option"]:disabled, +div.listbox-button__option[role="option"][aria-disabled="true"] { + color: var(--listbox-option-disabled-foreground-color, var(--color-foreground-disabled)); + background-color: unset; + font-weight: unset; +} div.listbox-button__option[role="option"]:first-child { border-top-left-radius: var(--listbox-button-listbox-border-radius, var(--border-radius-50)); border-top-right-radius: var(--listbox-button-listbox-border-radius, var(--border-radius-50)); @@ -127,3 +144,8 @@ span.listbox-button__value { margin-left: 0; margin-right: 8px; } +[dir="rtl"] .listbox-button .btn__label { + color: var(--listbox-button-label-color, var(--color-foreground-secondary)); + margin-left: 3px; + margin-right: 0; +} diff --git a/dist/listbox/listbox.css b/dist/listbox/listbox.css index 2bfdc4b72..84c67d472 100644 --- a/dist/listbox/listbox.css +++ b/dist/listbox/listbox.css @@ -47,6 +47,12 @@ div.listbox__option[role="option"]:hover { div.listbox__option[role="option"]:active { font-weight: bold; } +div.listbox__option[role="option"]:disabled, +div.listbox__option[role="option"][aria-disabled="true"] { + color: var(--listbox-option-disabled-foreground-color, var(--color-foreground-disabled)); + background-color: unset; + font-weight: unset; +} span.listbox__value { overflow: hidden; text-overflow: ellipsis; diff --git a/dist/menu/menu.css b/dist/menu/menu.css index e1081534c..26c30c3a4 100644 --- a/dist/menu/menu.css +++ b/dist/menu/menu.css @@ -88,6 +88,8 @@ a.fake-menu__item:not([href]), button.fake-menu__item[disabled], div.menu__item[role^="menuitem"][aria-disabled="true"] { color: var(--menu-menuitem-disabled-foreground-color, var(--color-foreground-disabled)); + background-color: unset; + font-weight: unset; } div.menu__item[role^="menuitem"][aria-checked="true"] svg.icon--tick-small { opacity: 1; diff --git a/dist/page-notice/page-notice.css b/dist/page-notice/page-notice.css index 4641d4291..aafa93424 100644 --- a/dist/page-notice/page-notice.css +++ b/dist/page-notice/page-notice.css @@ -86,9 +86,12 @@ span[role="region"].page-notice { grid-row: 1; text-align: right; } -/* support legacy 6.5 notice with heading + paragaphs */ .page-notice__main p { font-size: 0.875rem; + margin: 2px 0 0; +} +/* support legacy 6.5 notice with heading + paragaphs */ +.page-notice__main .page-notice__title ~ p { margin: 4px 0 0; } p.page-notice__cta { diff --git a/dist/panel-dialog/panel-dialog.css b/dist/panel-dialog/panel-dialog.css index 184a55a0a..1eecbec67 100644 --- a/dist/panel-dialog/panel-dialog.css +++ b/dist/panel-dialog/panel-dialog.css @@ -45,6 +45,9 @@ align-self: center; flex: 1 1 auto; margin: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .panel-dialog__header > :last-child:not(:only-child) { margin-left: 16px; diff --git a/dist/section-notice/section-notice.css b/dist/section-notice/section-notice.css index 7593dbdf4..55bf6488a 100644 --- a/dist/section-notice/section-notice.css +++ b/dist/section-notice/section-notice.css @@ -2,22 +2,25 @@ background-color: var(--section-notice-default-background-color, var(--color-background-secondary)); border-radius: var(--section-notice-border-radius, var(--border-radius-50)); font-size: 0.875rem; - justify-content: flex-start; margin: 8px 0; padding: 16px; } div[role="region"].section-notice, section.section-notice { - display: flex; + display: grid; + grid-template-columns: 32px auto auto auto; } span[role="region"].section-notice { - display: inline-flex; + display: grid; } .section-notice__title { font-size: 0.875rem; font-weight: normal; margin: 0; } +.section-notice__cta a { + white-space: nowrap; +} /* legacy version with separate bold heading */ .section-notice__title:not(:only-child) { font-weight: bold; @@ -38,27 +41,38 @@ span[role="region"].section-notice { .section-notice a:hover { color: var(--section-notice-foreground-color, var(--color-foreground-primary)); } +.section-notice .icon { + vertical-align: top; +} .section-notice__header { - align-items: center; - display: flex; - justify-content: center; - padding-right: 12px; + grid-column: 1; + grid-row: 1; + height: 16px; + padding-right: 16px; } -.section-notice__main, -.section-notice__footer { - display: flex; - flex-direction: column; - justify-content: center; +.section-notice__main { + grid-column: 2; + grid-row: 1; + padding-right: 16px; } .section-notice__footer { - flex-shrink: 0; - margin-left: auto; - padding-left: 0; - width: auto; + grid-column: 4; + grid-row: 1; + justify-self: end; } -/* support legacy 6.5 notice with heading + paragaphs */ .section-notice__main p { font-size: 0.875rem; + margin: 0; +} +p.section-notice__cta { + grid-column: 2; + grid-row: 2; + justify-self: start; + margin-right: 16px; + margin-top: 16px; +} +/* support legacy 6.5 notice with heading + paragaphs */ +.section-notice__main .section-notice__title ~ p { margin: 4px 0 0; } /* LARGE SCREEN ADJUSTMENTS */ @@ -68,6 +82,14 @@ span[role="region"].section-notice { flex-wrap: nowrap; margin: 16px 0; } + p.section-notice__cta { + grid-column: 4; + grid-row: 1; + justify-self: end; + margin-bottom: 0; + margin-top: 0; + padding-right: 16px; + } .section-notice__footer { margin-top: 0; padding-left: 16px; @@ -78,8 +100,16 @@ span[role="region"].section-notice { padding-right: 0; } [dir="rtl"] .section-notice__footer { + justify-self: start; margin-left: initial; margin-right: auto; padding-left: initial; padding-right: 0; } +[dir="rtl"] .section-notice__main { + padding-right: 0; +} +[dir="rtl"] p.page-notice__cta { + margin-left: 16px; + padding-left: 16px; +} diff --git a/dist/tourtip/tourtip.css b/dist/tourtip/tourtip.css index 8d5f75b7c..70e06002a 100644 --- a/dist/tourtip/tourtip.css +++ b/dist/tourtip/tourtip.css @@ -8,7 +8,7 @@ span.tourtip { display: inline-block; } .tourtip__overlay { - border-radius: var(--bubble-border-radius, var(--border-radius-50)); + border-radius: var(--bubble-border-radius, var(--border-radius-100)); filter: var(--bubble-filter); font-size: 14px; max-width: 344px; @@ -20,7 +20,7 @@ span.tourtip { position: absolute; } .tourtip__mask { - border-radius: var(--bubble-border-radius, var(--border-radius-50)); + border-radius: var(--bubble-border-radius, var(--border-radius-100)); position: relative; z-index: 1; background-color: var(--tourtip-background-color, var(--color-background-primary)); @@ -31,8 +31,9 @@ span.tourtip__mask { } .tourtip__cell { display: flex; - padding: 8px 16px; + padding: 16px; word-break: break-word; + flex-wrap: wrap; } .tourtip__cell a { color: var(--tourtip-foreground-color, var(--color-foreground-primary)); @@ -42,6 +43,7 @@ span.tourtip__mask { } .tourtip__content { flex-grow: 1; + flex-basis: 0; } .tourtip__content p { margin: 0; @@ -59,6 +61,7 @@ button.tourtip__close { padding: 0; white-space: nowrap; width: 32px; + outline-offset: -2px; } button.tourtip__close > svg { fill: currentColor; @@ -133,9 +136,9 @@ button.tourtip__close > svg { top: 12px; } .tourtip__heading { - font-size: 1em; + font-size: 1.25rem; font-weight: bold; - margin: 0 0 4px; + margin: 0 0 8px; } span.tourtip__heading { display: block; @@ -143,6 +146,31 @@ span.tourtip__heading { .tourtip--expanded .tourtip__overlay { display: block; } +.tourtip__footer { + align-items: center; + display: flex; + justify-content: end; + margin-top: 16px; + width: 100%; +} +.tourtip__footer > button:not(:last-child), +.tourtip__footer > a:not(:last-child) { + margin-right: 8px; +} +.tourtip__footer > .fake-link, +.tourtip__footer > a { + color: var(--color-foreground-primary); + text-decoration: none; +} +.tourtip__footer > .fake-link:hover:not(:disabled), +.tourtip__footer > a:hover:not(:disabled) { + color: var(--color-foreground-primary); + text-decoration: underline; +} +.tourtip__index { + color: var(--tourtip-index-color, var(--color-foreground-secondary)); + flex: 1; +} @media (min-width: 601px) { .tourtip__overlay { max-width: 400px; diff --git a/dist/variables/variables.less b/dist/variables/variables.less index be2548b08..d1522a1c7 100644 --- a/dist/variables/variables.less +++ b/dist/variables/variables.less @@ -35,6 +35,7 @@ @spacing-100: 8px; @spacing-150: @spacing-100 * 1.5; @spacing-200: @spacing-100 * 2; +@spacing-250: @spacing-100 * 2.5; @spacing-300: @spacing-100 * 3; @spacing-400: @spacing-100 * 4; @spacing-600: @spacing-100 * 6; diff --git a/docs/_config.yml b/docs/_config.yml index 34838a699..abc174d36 100644 --- a/docs/_config.yml +++ b/docs/_config.yml @@ -9,4 +9,4 @@ defaults: path: "" # an empty string here means all files in the project values: cdn_path: https://ir.ebaystatic.com/cr/v/c1/skin - version: 15.0.0 + version: 15.1.0-1 diff --git a/docs/_includes/drawer-dialog.html b/docs/_includes/drawer-dialog.html index 66883ec4f..44ea56060 100644 --- a/docs/_includes/drawer-dialog.html +++ b/docs/_includes/drawer-dialog.html @@ -76,4 +76,71 @@