diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 784217b1c..f6d95ccbe 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -158,16 +158,32 @@ Please ensure your NPM registry is set correctly and that you are on the package Please follow the steps below to publish skin to NPM: -1. Build files must be stamped with the new version number. Increment the version number in package.json by hand (e.g. do **not** use `npm version` because this will create a git tag while the build files are still stamped with the *old* version number!) -1. Run `npm run build`. This will update the top comment section of build files with the new version number. This is needed for legal. -1. Revert the version number update you made to package.json in step 1. -1. Commit the modified build files -1. Merge the milestone branch into master branch in GitHub -1. Switch to your local master branch and pull the changes -1. Run `npm version` patch, minor or version. This will again update the version number in package.json but will also commit change and create a Git tag at the same time -1. Push commit to origin -1. Push the git tag to origin, e.g. `git push origin v3.1.0` -1. Run `npm publish` to publish the package to NPM +1. Build files must be stamped with the new version number. Increment the version number in `package.json` by hand (e.g. do **not** use `npm version` because this will create a git tag while the build files are still stamped with the *old* version number!) +1. Run `yarn build`. This will update the top comment section of build files with the new version number. This is needed for legal. +1. Revert the version number update you made to `package.json` in step 1. +1. Update any documentation references to reflect the new CDN url. +1. Commit the modified build files with message "Stamped files with vX.x.x" and push to origin. + +Next, move on to pre-release or final release instructions below. + +### Pre-Release + +Pre-releases are made directly from a milestone branch. Patch releases do not need a pre-release (proceed directly to final release section below). + +1. Run `npm version pre-minor` or `npm version pre-major`. This command will update the version number in `package.json`, commit the change locally, and create a Git tag at the same time. +1. Push commit to origin. +1. Run `npm publish --tags beta` to publish the package to NPM. + +### Final Release + +Final releases are always made from the master branch. Minor and major version releases **must** be preceded by a pre-release (see above). + +1. Merge the milestone branch into master branch in GitHub (via a pull request). +1. Switch to your local master branch and pull the changes from origin. +1. Run `npm version patch`, `npm version minor` or `npm version major`. This command will update the version number in `package.json`, commit the change locally and create a Git tag at the same time. +1. Push commit to origin. +1. Push the git tag to origin, e.g. `git push origin v3.1.0`. +1. Run `npm publish` to publish the package to NPM. **TIP:** If you need to do an update or hotfix to an older minor release, please see the Hotfix Release section further below. diff --git a/dist/button/ds6/button.css b/dist/button/ds6/button.css index cf38df62e..7276624da 100644 --- a/dist/button/ds6/button.css +++ b/dist/button/ds6/button.css @@ -17,15 +17,8 @@ a.cta-btn { display: inline-block; text-decoration: none; } -button.expand-btn[aria-expanded="true"] .expand-btn__icon { - -webkit-transform: rotate(180deg); - transform: rotate(180deg); -} -button.expand-btn[disabled] span.expand-btn__icon { - background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%275%27%3E%3Cpath%20fill%3D%22%23c7c7c7%22%20d%3D%22M0.758714126%2C0.14644663%20C0.585147774%2C-0.048815516%200.303741117%2C-0.0488155166%200.130174765%2C0.146446629%20C-0.0433915877%2C0.341708774%20-0.0433915882%2C0.658291264%200.130174763%2C0.85355341%20L3.68573029%2C4.85355339%20C3.85929664%2C5.04881554%204.1407033%2C5.04881554%204.31426965%2C4.85355339%20L7.86982523%2C0.853553392%20C8.04339159%2C0.658291247%208.04339159%2C0.341708758%207.86982524%2C0.146446611%20C7.69625889%2C-0.0488155358%207.41485223%2C-0.0488155372%207.24128588%2C0.146446608%20L3.99999997%2C3.79289322%20L0.758714126%2C0.14644663%20Z%22%3E%3C/path%3E%3C/svg%3E'); -} a.cta-btn { - background-color: #f5f5f5; + background-color: #ffffff; border-style: solid; border-width: 1px; color: #10299c; @@ -34,7 +27,7 @@ a.cta-btn:focus, a.cta-btn:hover { background-color: #10299c; border-color: #10299c; - color: #f5f5f5; + color: #ffffff; } a.cta-btn:focus { outline: 0 none; @@ -91,15 +84,6 @@ button.expand-btn, a.fake-btn--secondary { background-color: white; border: 1px solid #c7c7c7; - color: #006efc; -} -button.btn--secondary:focus, -button.expand-btn:focus, -a.fake-btn--secondary:focus, -button.btn--secondary:hover, -button.expand-btn:hover, -a.fake-btn--secondary:hover { - border-color: #4295ff; } button.btn--secondary:active, button.expand-btn:active, @@ -107,6 +91,26 @@ a.fake-btn--secondary:active { border-color: #10299c; color: #10299c; } +button.btn-secondary, +a.fake-btn--secondary { + color: #006efc; +} +button.btn-secondary:focus, +a.fake-btn--secondary:focus, +button.btn-secondary:hover, +a.fake-btn--secondary:hover { + border-color: #4295ff; +} +button.expand-btn { + color: #111820; +} +button.expand-btn[aria-expanded="true"] .expand-btn__icon { + -webkit-transform: rotate(180deg); + transform: rotate(180deg); +} +button.expand-btn[disabled] span.expand-btn__icon { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%275%27%3E%3Cpath%20fill%3D%22%23c7c7c7%22%20d%3D%22M0.758714126%2C0.14644663%20C0.585147774%2C-0.048815516%200.303741117%2C-0.0488155166%200.130174765%2C0.146446629%20C-0.0433915877%2C0.341708774%20-0.0433915882%2C0.658291264%200.130174763%2C0.85355341%20L3.68573029%2C4.85355339%20C3.85929664%2C5.04881554%204.1407033%2C5.04881554%204.31426965%2C4.85355339%20L7.86982523%2C0.853553392%20C8.04339159%2C0.658291247%208.04339159%2C0.341708758%207.86982524%2C0.146446611%20C7.69625889%2C-0.0488155358%207.41485223%2C-0.0488155372%207.24128588%2C0.146446608%20L3.99999997%2C3.79289322%20L0.758714126%2C0.14644663%20Z%22%3E%3C/path%3E%3C/svg%3E'); +} button.btn--secondary[disabled], button.expand-btn[disabled], button.btn--secondary[aria-disabled="true"], @@ -251,7 +255,7 @@ svg.cta-btn__icon { margin-left: 8px; } span.expand-btn__icon { - background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%275%27%3E%3Cpath%20fill%3D%22%230654ba%22%20d%3D%22M0.758714126%2C0.14644663%20C0.585147774%2C-0.048815516%200.303741117%2C-0.0488155166%200.130174765%2C0.146446629%20C-0.0433915877%2C0.341708774%20-0.0433915882%2C0.658291264%200.130174763%2C0.85355341%20L3.68573029%2C4.85355339%20C3.85929664%2C5.04881554%204.1407033%2C5.04881554%204.31426965%2C4.85355339%20L7.86982523%2C0.853553392%20C8.04339159%2C0.658291247%208.04339159%2C0.341708758%207.86982524%2C0.146446611%20C7.69625889%2C-0.0488155358%207.41485223%2C-0.0488155372%207.24128588%2C0.146446608%20L3.99999997%2C3.79289322%20L0.758714126%2C0.14644663%20Z%22%3E%3C/path%3E%3C/svg%3E'); + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%275%27%3E%3Cpath%20fill%3D%22%2311820%22%20d%3D%22M0.758714126%2C0.14644663%20C0.585147774%2C-0.048815516%200.303741117%2C-0.0488155166%200.130174765%2C0.146446629%20C-0.0433915877%2C0.341708774%20-0.0433915882%2C0.658291264%200.130174763%2C0.85355341%20L3.68573029%2C4.85355339%20C3.85929664%2C5.04881554%204.1407033%2C5.04881554%204.31426965%2C4.85355339%20L7.86982523%2C0.853553392%20C8.04339159%2C0.658291247%208.04339159%2C0.341708758%207.86982524%2C0.146446611%20C7.69625889%2C-0.0488155358%207.41485223%2C-0.0488155372%207.24128588%2C0.146446608%20L3.99999997%2C3.79289322%20L0.758714126%2C0.14644663%20Z%22%3E%3C/path%3E%3C/svg%3E'); background-repeat: no-repeat; background-position-y: center; -ms-flex-negative: 0; diff --git a/dist/dropdown/ds6/dropdown.css b/dist/dropdown/ds6/dropdown.css index 6bae612e1..532839e96 100644 --- a/dist/dropdown/ds6/dropdown.css +++ b/dist/dropdown/ds6/dropdown.css @@ -9,6 +9,16 @@ span.fake-menu, span.listbox { display: inline-block; } +.menu button.expand-btn--borderless, +.fake-menu button.expand-btn--borderless { + border: 0; + padding-left: 0; + vertical-align: initial; +} +.menu button.expand-btn--borderless[aria-expanded="true"] ~ .menu__items[role="menu"], +.fake-menu button.expand-btn--borderless[aria-expanded="true"] ~ .menu__items[role="menu"] { + top: 41px; +} .menu .expand-btn[aria-expanded="true"], .fake-menu .expand-btn[aria-expanded="true"], .listbox .expand-btn[aria-expanded="true"] { @@ -48,6 +58,7 @@ div.listbox__option[role^="option"], a.fake-menu__item, button.fake-menu__item { background-color: #ffffff; + border: 1px solid #ffffff; box-sizing: border-box; cursor: pointer; display: -webkit-inline-box; @@ -74,21 +85,18 @@ button.fake-menu__item span:not([class*="listbox__status"]) { white-space: nowrap; text-overflow: ellipsis; } -div.menu__item[role^="menuitem"]:focus, -div.listbox__option[role^="option"]:focus, -a.fake-menu__item:focus, -button.fake-menu__item:focus, div.menu__item[role^="menuitem"]:hover, div.listbox__option[role^="option"]:hover, a.fake-menu__item:hover, button.fake-menu__item:hover { - background-color: #f5f5f5; + background-color: #e5e5e5; } div.menu__item[role^="menuitem"]:focus, div.listbox__option[role^="option"]:focus, a.fake-menu__item:focus, button.fake-menu__item:focus { - outline: 1px solid #c7c7c7; + background-color: #e5e5e5; + outline: none; } div.menu__item[role^="menuitem"]:active, div.listbox__option[role^="option"]:active, @@ -116,6 +124,10 @@ a.fake-menu__item:not(:last-child), button.fake-menu__item:not(:last-child) { margin-bottom: 1px; } +div.menu__item[role^="menuitem"][aria-checked="true"], +div.listbox__option[role^="option"][aria-selected="true"] { + font-weight: bold; +} div.menu__item[role^="menuitem"][aria-checked="true"] .menu__status, div.listbox__option[role^="option"][aria-selected="true"] .menu__status, div.menu__item[role^="menuitem"][aria-checked="true"] .listbox__status, @@ -184,9 +196,6 @@ span.fake-menu__status { box-sizing: border-box; width: 100%; } -.listbox:hover > .listbox__control > input { - border-color: #4295ff; -} .listbox__control > input { background-color: #ffffff; border: 1px solid #c7c7c7; @@ -197,7 +206,7 @@ span.fake-menu__status { font-size: 16px; height: 40px; padding: 0 16px; - text-shadow: 0 0 0 #006efc; + text-shadow: 0 0 0 #111820; vertical-align: middle; width: 100%; } @@ -229,7 +238,7 @@ span.fake-menu__status { display: block; } span.listbox__arrow { - background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%275%27%3E%3Cpath%20fill%3D%22%230654ba%22%20d%3D%22M0.758714126%2C0.14644663%20C0.585147774%2C-0.048815516%200.303741117%2C-0.0488155166%200.130174765%2C0.146446629%20C-0.0433915877%2C0.341708774%20-0.0433915882%2C0.658291264%200.130174763%2C0.85355341%20L3.68573029%2C4.85355339%20C3.85929664%2C5.04881554%204.1407033%2C5.04881554%204.31426965%2C4.85355339%20L7.86982523%2C0.853553392%20C8.04339159%2C0.658291247%208.04339159%2C0.341708758%207.86982524%2C0.146446611%20C7.69625889%2C-0.0488155358%207.41485223%2C-0.0488155372%207.24128588%2C0.146446608%20L3.99999997%2C3.79289322%20L0.758714126%2C0.14644663%20Z%22%3E%3C/path%3E%3C/svg%3E'); + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%275%27%3E%3Cpath%20fill%3D%22%2311820%22%20d%3D%22M0.758714126%2C0.14644663%20C0.585147774%2C-0.048815516%200.303741117%2C-0.0488155166%200.130174765%2C0.146446629%20C-0.0433915877%2C0.341708774%20-0.0433915882%2C0.658291264%200.130174763%2C0.85355341%20L3.68573029%2C4.85355339%20C3.85929664%2C5.04881554%204.1407033%2C5.04881554%204.31426965%2C4.85355339%20L7.86982523%2C0.853553392%20C8.04339159%2C0.658291247%208.04339159%2C0.341708758%207.86982524%2C0.146446611%20C7.69625889%2C-0.0488155358%207.41485223%2C-0.0488155372%207.24128588%2C0.146446608%20L3.99999997%2C3.79289322%20L0.758714126%2C0.14644663%20Z%22%3E%3C/path%3E%3C/svg%3E'); background-repeat: no-repeat; background-position: right center; content: ""; diff --git a/dist/global/ds6/global.css b/dist/global/ds6/global.css index eb5591866..a6faf53b3 100644 --- a/dist/global/ds6/global.css +++ b/dist/global/ds6/global.css @@ -1,5 +1,5 @@ body { - background-color: #f5f5f5; + background-color: #ffffff; color: #111820; font-family: "Helvetica Neue", Helvetica, Arial, Roboto, sans-serif; font-size: 0.875rem; diff --git a/dist/grid/ds4/grid-full.css b/dist/grid/ds4/grid-full.css index ab17757ec..c8226e8f8 100644 --- a/dist/grid/ds4/grid-full.css +++ b/dist/grid/ds4/grid-full.css @@ -1,5 +1,5 @@ /*! -Skin v3.3.2 +Skin v3.4.0 Copyright 2017 eBay! Inc. All rights reserved. Licensed under the BSD License. https://github.com/eBay/skin/blob/master/LICENSE.txt" diff --git a/dist/less/ds6/variables.less b/dist/less/ds6/variables.less index 5818ce5e0..d79f9562a 100644 --- a/dist/less/ds6/variables.less +++ b/dist/less/ds6/variables.less @@ -34,7 +34,7 @@ @ds6-color-confirmation-background: @ds6-color-p032-green; @ds6-color-critical-text: @ds6-color-p013-red; @ds6-color-critical-background: @ds6-color-p011-red; -@ds6-color-background-default: @ds6-color-g202-gray; +@ds6-color-background-default: @ds6-color-g201-gray; @ds6-color-item-tile-background-visited: @ds6-color-g202-gray; @ds6-color-button-disabled-background: @ds6-color-g204-gray; @ds6-color-disabled: @ds6-color-g204-gray; diff --git a/dist/less/mixins-common.less b/dist/less/mixins-common.less index d976d8904..045394fcf 100644 --- a/dist/less/mixins-common.less +++ b/dist/less/mixins-common.less @@ -6,8 +6,6 @@ .clipped() { border: 0; clip: rect(1px, 1px, 1px, 1px); - -webkit-clip-path: inset(50%); - clip-path: inset(50%); height: 1px; overflow: hidden; padding: 0; @@ -18,8 +16,6 @@ .unclipped() { clip: auto; - -webkit-clip-path: none; - clip-path: none; height: auto; overflow: visible; white-space: normal; diff --git a/dist/listbox/ds6/listbox.css b/dist/listbox/ds6/listbox.css index 662355bcf..5620480cb 100644 --- a/dist/listbox/ds6/listbox.css +++ b/dist/listbox/ds6/listbox.css @@ -3,9 +3,6 @@ box-sizing: border-box; width: 100%; } -.listbox:hover > .listbox__control > input { - border-color: #4295ff; -} .listbox__control > input { background-color: #ffffff; border: 1px solid #c7c7c7; @@ -16,7 +13,7 @@ font-size: 16px; height: 40px; padding: 0 16px; - text-shadow: 0 0 0 #006efc; + text-shadow: 0 0 0 #111820; vertical-align: middle; width: 100%; } @@ -48,7 +45,7 @@ display: block; } span.listbox__arrow { - background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%275%27%3E%3Cpath%20fill%3D%22%230654ba%22%20d%3D%22M0.758714126%2C0.14644663%20C0.585147774%2C-0.048815516%200.303741117%2C-0.0488155166%200.130174765%2C0.146446629%20C-0.0433915877%2C0.341708774%20-0.0433915882%2C0.658291264%200.130174763%2C0.85355341%20L3.68573029%2C4.85355339%20C3.85929664%2C5.04881554%204.1407033%2C5.04881554%204.31426965%2C4.85355339%20L7.86982523%2C0.853553392%20C8.04339159%2C0.658291247%208.04339159%2C0.341708758%207.86982524%2C0.146446611%20C7.69625889%2C-0.0488155358%207.41485223%2C-0.0488155372%207.24128588%2C0.146446608%20L3.99999997%2C3.79289322%20L0.758714126%2C0.14644663%20Z%22%3E%3C/path%3E%3C/svg%3E'); + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%275%27%3E%3Cpath%20fill%3D%22%2311820%22%20d%3D%22M0.758714126%2C0.14644663%20C0.585147774%2C-0.048815516%200.303741117%2C-0.0488155166%200.130174765%2C0.146446629%20C-0.0433915877%2C0.341708774%20-0.0433915882%2C0.658291264%200.130174763%2C0.85355341%20L3.68573029%2C4.85355339%20C3.85929664%2C5.04881554%204.1407033%2C5.04881554%204.31426965%2C4.85355339%20L7.86982523%2C0.853553392%20C8.04339159%2C0.658291247%208.04339159%2C0.341708758%207.86982524%2C0.146446611%20C7.69625889%2C-0.0488155358%207.41485223%2C-0.0488155372%207.24128588%2C0.146446608%20L3.99999997%2C3.79289322%20L0.758714126%2C0.14644663%20Z%22%3E%3C/path%3E%3C/svg%3E'); background-repeat: no-repeat; background-position: right center; content: ""; diff --git a/dist/notice/ds4/notice-large.css b/dist/notice/ds4/notice-large.css index 0eedd9a49..8cc053a5c 100644 --- a/dist/notice/ds4/notice-large.css +++ b/dist/notice/ds4/notice-large.css @@ -16,6 +16,9 @@ section.page-notice { .page-notice__status svg { margin-left: 16px; } +.page-notice__status span { + margin-left: 16px; +} .page-notice__cta, .flyout-notice__cta { margin-left: 16px; diff --git a/dist/notice/ds4/notice.css b/dist/notice/ds4/notice.css index 49bb4f174..e78d219e9 100644 --- a/dist/notice/ds4/notice.css +++ b/dist/notice/ds4/notice.css @@ -77,6 +77,27 @@ button.page-notice { a.page-notice--priority { color: #dd1e31; } +.page-notice__status span { + background-repeat: no-repeat; + background-size: contain; + display: inline-block; + height: 24px; + margin-left: 8px; + margin-top: 4px; + width: 24px; +} +.page-notice--priority .page-notice__status span, +.inline-notice--priority .inline-notice__status span { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2732%27%20height%3D%2732%27%3E%3Cpath%20fill%3D%22%23dd1e31%22%20d%3D%22M15.991%2018.996c0%200%200%200%200%200-0.625%200-1.132-0.507-1.132-1.132%200%200%200%200%200%200v-8.737c-0.006-0.043-0.009-0.094-0.009-0.145%200-0.625%200.507-1.132%201.132-1.132s1.132%200.507%201.132%201.132c0%200.051-0.003%200.101-0.010%200.15l0.001%208.732c0%200%200%200%200%200%200%200.618-0.496%201.121-1.112%201.131z%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20fill%3D%22%23dd1e31%22%20d%3D%22M17.401%2022.855c0%200.748-0.606%201.354-1.354%201.354s-1.354-0.606-1.354-1.354c0-0.748%200.606-1.354%201.354-1.354s1.354%200.606%201.354%201.354z%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20fill%3D%22%23dd1e31%22%20d%3D%22M15.991%2032c-8.842%200-16.009-7.168-16.009-16.009s7.168-16.009%2016.009-16.009c8.842%200%2016.009%207.168%2016.009%2016.009%200%200.007%200%200.013%200%200.020-0.011%208.833-7.174%2015.99-16.009%2015.99%200%200%200%200%200%200zM15.991%202.319c0%200%200%200%200%200-7.561%200-13.69%206.129-13.69%2013.69s6.129%2013.69%2013.69%2013.69c7.561%200%2013.69-6.129%2013.69-13.69s-6.129-13.69-13.69-13.69z%22%3E%3C/path%3E%3C/svg%3E'); +} +.page-notice--confirmation .page-notice__status span, +.inline-notice--confirmation .inline-notice__status span { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2732%27%20height%3D%2732%27%3E%3Cpath%20fill%3D%22%235ba71b%22%20d%3D%22M16.009%2032c-8.842%200-16.009-7.168-16.009-16.009s7.168-16.009%2016.009-16.009c8.842%200%2016.009%207.168%2016.009%2016.009%200%200.007%200%200.013%200%200.020-0.011%208.833-7.174%2015.99-16.009%2015.99%200%200%200%200%200%200zM16.009%202.319c0%200%200%200%200%200-7.561%200-13.69%206.129-13.69%2013.69s6.129%2013.69%2013.69%2013.69c7.561%200%2013.69-6.129%2013.69-13.69s-6.129-13.69-13.69-13.69z%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20fill%3D%22%235ba71b%22%20d%3D%22M14.841%2023.448c-0.001%200-0.003%200-0.004%200-0.247%200-0.473-0.091-0.646-0.242l-6.232-5.305c-0.213-0.182-0.347-0.451-0.347-0.751%200-0.545%200.442-0.987%200.987-0.987%200.245%200%200.469%200.089%200.641%200.237l5.434%204.637%208.181-10.741c0.183-0.238%200.468-0.39%200.788-0.39%200.548%200%200.992%200.444%200.992%200.992%200%200.228-0.077%200.438-0.206%200.605l-8.81%2011.573c-0.137%200.199-0.39%200.358-0.682%200.389l-0.116%200z%22%3E%3C/path%3E%3C/svg%3E'); +} +.page-notice--information .page-notice__status span, +.inline-notice--information .inline-notice__status span { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2732%27%20height%3D%2732%27%3E%3Cpath%20fill%3D%22%230654ba%22%20d%3D%22M15.991%2012.986c0%200%200%200%200%200-0.625%200-1.132%200.507-1.132%201.132%200%200%200%200%200%200v8.737c0.074%200.56%200.548%200.987%201.122%200.987s1.048-0.427%201.122-0.981l0.001-8.743c0-0%200-0%200-0%200-0.618-0.496-1.121-1.112-1.131z%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20fill%3D%22%230654ba%22%20d%3D%22M17.401%209.146c0%200.748-0.606%201.354-1.354%201.354s-1.354-0.606-1.354-1.354c0-0.748%200.606-1.354%201.354-1.354s1.354%200.606%201.354%201.354z%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20fill%3D%22%230654ba%22%20d%3D%22M15.991%2032c-8.842%200-16.009-7.168-16.009-16.009s7.168-16.009%2016.009-16.009c8.842%200%2016.009%207.168%2016.009%2016.009%200%200.007%200%200.013%200%200.020-0.011%208.833-7.174%2015.99-16.009%2015.99%200%200%200%200%200%200zM15.991%202.319c0%200%200%200%200%200-7.561%200-13.69%206.129-13.69%2013.69s6.129%2013.69%2013.69%2013.69c7.561%200%2013.69-6.129%2013.69-13.69s-6.129-13.69-13.69-13.69z%22%3E%3C/path%3E%3C/svg%3E'); +} .flyout-notice--information .flyout-notice__status, .page-notice--information .page-notice__status { color: #0654ba; @@ -146,6 +167,15 @@ a.page-notice--priority { min-width: 16px; width: 16px; } +.inline-notice__status span { + background-repeat: no-repeat; + background-size: contain; + display: inline-block; + height: 16px; + min-height: 16px; + min-width: 16px; + width: 16px; +} .page-notice__status { margin: 0; } @@ -192,6 +222,12 @@ button.flyout-notice__close:hover, button.page-notice__close:hover { color: rgba(153, 153, 153, 0.9); } +button.flyout-notice__close:focus span, +button.page-notice__close:focus span, +button.flyout-notice__close:hover span, +button.page-notice__close:hover span { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2732%27%20height%3D%2732%27%3E%3Cpath%20fill%3D%22%23999999%22%20d%3D%22M31.427%202.846l-2.387-2.387-13.084%2013.082-13.082-13.082-2.386%202.387%2013.082%2013.082-13.082%2013.084%202.386%202.386%2013.082-13.082%2013.084%2013.082%202.386-2.386-13.084-13.084z%22%3E%3C/path%3E%3C/svg%3E'); +} button.flyout-notice__close:active, button.page-notice__close:active { color: #333333; @@ -205,6 +241,15 @@ button.page-notice__close svg { height: 12px; width: 12px; } +button.flyout-notice__close span, +button.page-notice__close span { + background-repeat: no-repeat; + background-size: contain; + display: inline-block; + height: 12px; + width: 12px; + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2732%27%20height%3D%2732%27%3E%3Cpath%20fill%3D%22%23555555%22%20d%3D%22M31.427%202.846l-2.387-2.387-13.084%2013.082-13.082-13.082-2.386%202.387%2013.082%2013.082-13.082%2013.084%202.386%202.386%2013.082-13.082%2013.084%2013.082%202.386-2.386-13.084-13.084z%22%3E%3C/path%3E%3C/svg%3E'); +} .flyout-notice__close { margin-top: 1px; } diff --git a/dist/notice/ds6/notice.css b/dist/notice/ds6/notice.css index e69de29bb..c6ec045f0 100644 --- a/dist/notice/ds6/notice.css +++ b/dist/notice/ds6/notice.css @@ -0,0 +1,168 @@ +.page-notice { + background-color: #ffffff; + border-style: solid; + border-width: 4px; + font-size: 0.875rem; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + margin: 8px 0; +} +div[role="region"].page-notice, +section.page-notice { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +span[role="region"].page-notice { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; +} +.page-notice--confirmation { + border-color: #71c63e; +} +.page-notice--confirmation .page-notice__status { + background-color: #71c63e; +} +.page-notice--priority { + border-color: #ff5151; +} +.page-notice--priority .page-notice__status { + background-color: #ff5151; +} +.page-notice--information { + border-color: #4295ff; +} +.page-notice--information .page-notice__status { + background-color: #4295ff; +} +.page-notice__status { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: white; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + margin: 0; + padding: 12px 16px 12px 12px; +} +.page-notice__content p, +.page-notice__cell p { + margin: 16px; +} +.inline-notice { + margin: 8px 0; +} +.inline-notice p { + margin: 4px 0; +} +.inline-notice p:first-of-type { + font-weight: bold; +} +div.inline-notice { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +span.inline-notice { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; +} +.page-notice__status span, +.inline-notice__status span { + background-repeat: no-repeat; + background-size: contain; + display: inline-block; +} +.page-notice__status span { + height: 28px; + margin: 0; + width: 28px; +} +.inline-notice__status span { + height: 24px; + margin: 1px 8px 0 0; + width: 24px; +} +.page-notice--confirmation .page-notice__status span { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2729%27%20height%3D%2729%27%3E%3Ccircle%20cx%3D%2214.5%22%20cy%3D%2214.5%22%20r%3D%2214.5%22%20fill%3D%22%23ffffff%22%3E%3C/circle%3E%0A%3Cpath%20fill%3D%22%23ffffff%22%20stroke%3D%22%2371c63e%22%20stroke-width%3D%222%22%20d%3D%22M5.548%2015.01l5.773%206.286L21.522%209.824%22%3E%3C/path%3E%3C/svg%3E'); +} +.inline-notice--confirmation .inline-notice__status span { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2729%27%20height%3D%2729%27%3E%3Ccircle%20cx%3D%2214.5%22%20cy%3D%2214.5%22%20r%3D%2214.5%22%20fill%3D%22%2371c63e%22%3E%3C/circle%3E%0A%3Cpath%20fill%3D%22%2371c63e%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20d%3D%22M5.548%2015.01l5.773%206.286L21.522%209.824%22%3E%3C/path%3E%3C/svg%3E'); +} +.page-notice--priority .page-notice__status span { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2729%27%20height%3D%2729%27%3E%3Ccircle%20fill%3D%22%23ffffff%22%20cx%3D%2214.5%22%20cy%3D%2214.5%22%20r%3D%2214.5%22%3E%3C/circle%3E%0A%3Cpath%20fill%3D%22%23ff5151%22%20d%3D%22M14.5%2C18h0A1.5%2C1.5%2C0%2C0%2C1%2C13%2C16.5v-9A1.5%2C1.5%2C0%2C0%2C1%2C14.5%2C6h0A1.5%2C1.5%2C0%2C0%2C1%2C16%2C7.5v9A1.5%2C1.5%2C0%2C0%2C1%2C14.5%2C18Z%22%3E%3C/path%3E%0A%3Cpath%20fill%3D%22%23ff5151%22%20d%3D%22M14.5%2C23h0A1.5%2C1.5%2C0%2C0%2C1%2C13%2C21.5h0A1.5%2C1.5%2C0%2C0%2C1%2C14.5%2C20h0A1.5%2C1.5%2C0%2C0%2C1%2C16%2C21.5h0A1.5%2C1.5%2C0%2C0%2C1%2C14.5%2C23Z%22%3E%3C/path%3E%3C/svg%3E'); +} +.inline-notice--priority .inline-notice__status span { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2729%27%20height%3D%2729%27%3E%3Ccircle%20fill%3D%22%23ff5151%22%20cx%3D%2214.5%22%20cy%3D%2214.5%22%20r%3D%2214.5%22%3E%3C/circle%3E%0A%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M14.5%2C18h0A1.5%2C1.5%2C0%2C0%2C1%2C13%2C16.5v-9A1.5%2C1.5%2C0%2C0%2C1%2C14.5%2C6h0A1.5%2C1.5%2C0%2C0%2C1%2C16%2C7.5v9A1.5%2C1.5%2C0%2C0%2C1%2C14.5%2C18Z%22%3E%3C/path%3E%0A%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M14.5%2C23h0A1.5%2C1.5%2C0%2C0%2C1%2C13%2C21.5h0A1.5%2C1.5%2C0%2C0%2C1%2C14.5%2C20h0A1.5%2C1.5%2C0%2C0%2C1%2C16%2C21.5h0A1.5%2C1.5%2C0%2C0%2C1%2C14.5%2C23Z%22%3E%3C/path%3E%3C/svg%3E'); +} +.page-notice--information .page-notice__status span { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2729%27%20height%3D%2729%27%3E%3Ccircle%20cx%3D%2214.5%22%20cy%3D%2214.5%22%20r%3D%2214.5%22%20fill%3D%22%23ffffff%22%3E%3C/circle%3E%3Crect%20width%3D%223%22%20height%3D%2212%22%20x%3D%2213%22%20y%3D%2211%22%20fill%3D%22%234295ff%22%20rx%3D%221.5%22%3E%3C/rect%3E%3Crect%20width%3D%223%22%20height%3D%223%22%20x%3D%2213%22%20y%3D%226%22%20fill%3D%22%234295ff%22%20rx%3D%221.5%22%3E%3C/rect%3E%3C/svg%3E'); +} +.inline-notice--information .inline-notice__status span { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2729%27%20height%3D%2729%27%3E%3Ccircle%20cx%3D%2214.5%22%20cy%3D%2214.5%22%20r%3D%2214.5%22%20fill%3D%22%234295ff%22%3E%3C/circle%3E%3Crect%20width%3D%223%22%20height%3D%2212%22%20x%3D%2213%22%20y%3D%2211%22%20fill%3D%22%23ffffff%22%20rx%3D%221.5%22%3E%3C/rect%3E%3Crect%20width%3D%223%22%20height%3D%223%22%20x%3D%2213%22%20y%3D%226%22%20fill%3D%22%23ffffff%22%20rx%3D%221.5%22%3E%3C/rect%3E%3C/svg%3E'); +} +/* +.flyout-notice { + background-color: #006efc; + color: white; + padding: 8px; + position: absolute; + word-wrap: break-word; + + a { + color: white; + } +} + +.flyout-notice__pointer-top { + border-bottom-style: solid; + border-bottom-width: 12px; + border-left: 12px solid transparent; + border-right: 12px solid transparent; + bottom: 100%; + color: #006efc; + left: calc(50% - 8px); + position: absolute; +} + +.flyout-notice__pointer-bottom { + border-top-style: solid; + border-top-width: 12px; + border-left: 12px solid transparent; + border-right: 12px solid transparent; + top: 100%; + color: #006efc; + left: calc(50% - 8px); + position: absolute; +} + +.flyout-notice__pointer-right { + border-left-style: solid; + border-left-width: 12px; + border-bottom: 12px solid transparent; + border-top: 12px solid transparent; + left: 100%; + color: #006efc; + top: calc(50% - 8px); + position: absolute; +} + +.flyout-notice__pointer-left { + border-right-style: solid; + border-right-width: 12px; + border-bottom: 12px solid transparent; + border-top: 12px solid transparent; + right: 100%; + color: #006efc; + top: calc(50% - 8px); + position: absolute; +} + +.flyout-notice a { + outline-color: white; +} +*/ diff --git a/dist/utility/ds4/utility.css b/dist/utility/ds4/utility.css index 469ccbc34..aa6bb7a50 100644 --- a/dist/utility/ds4/utility.css +++ b/dist/utility/ds4/utility.css @@ -10,8 +10,6 @@ .clipped { border: 0; clip: rect(1px, 1px, 1px, 1px); - -webkit-clip-path: inset(50%); - clip-path: inset(50%); height: 1px; overflow: hidden; padding: 0; @@ -21,8 +19,6 @@ } .clipped--stealth:focus { clip: auto; - -webkit-clip-path: none; - clip-path: none; height: auto; overflow: visible; white-space: normal; diff --git a/dist/utility/ds6/utility.css b/dist/utility/ds6/utility.css index 632212e50..064454ff8 100644 --- a/dist/utility/ds6/utility.css +++ b/dist/utility/ds6/utility.css @@ -10,8 +10,6 @@ .clipped { border: 0; clip: rect(1px, 1px, 1px, 1px); - -webkit-clip-path: inset(50%); - clip-path: inset(50%); height: 1px; overflow: hidden; padding: 0; @@ -21,8 +19,6 @@ } .clipped--stealth:focus { clip: auto; - -webkit-clip-path: none; - clip-path: none; height: auto; overflow: visible; white-space: normal; diff --git a/docs/_includes/cdn.html b/docs/_includes/cdn.html index 5c670ac9e..de51fb4f3 100644 --- a/docs/_includes/cdn.html +++ b/docs/_includes/cdn.html @@ -1,10 +1,10 @@

CDN

A CSS file containing the full collection of modules (except grid) for small screens is available via the following url:

-

https://ir.ebaystatic.com/cr/v/c1/skin/v3.3.2/ds4/skin.min.css

+

https://ir.ebaystatic.com/cr/v/c1/skin/v3.4.0/ds4/skin.min.css

A small CSS file containing only the additional rules for large screens, for an adaptive approach, is also available:

-

https://ir.ebaystatic.com/cr/v/c1/skin/v3.3.2/ds4/skin-large.min.css

+

https://ir.ebaystatic.com/cr/v/c1/skin/v3.4.0/ds4/skin-large.min.css

Finally, a CSS file containing all rules (with the large rules contained in a media query) is available at:

-

https://ir.ebaystatic.com/cr/v/c1/skin/v3.3.2/ds4/skin-full.min.css

+

https://ir.ebaystatic.com/cr/v/c1/skin/v3.4.0/ds4/skin-full.min.css

Using this "full" file effectively means that your site is opting into a responsive approach rather than adaptive.

diff --git a/docs/_includes/ds6/menu.html b/docs/_includes/ds6/menu.html index 9eb0b8488..db40cf291 100644 --- a/docs/_includes/ds6/menu.html +++ b/docs/_includes/ds6/menu.html @@ -46,7 +46,7 @@ @@ -72,7 +72,7 @@ @@ -101,7 +101,7 @@ @@ -127,7 +127,7 @@ @@ -158,7 +158,7 @@ @@ -180,7 +180,7 @@ @@ -232,9 +232,8 @@ - - {% highlight html %} + {% highlight html %} + + + + {% highlight html %} + + + + + {% endhighlight %} + diff --git a/docs/_includes/ds6/notice.html b/docs/_includes/ds6/notice.html index 401aa2c24..780883c37 100644 --- a/docs/_includes/ds6/notice.html +++ b/docs/_includes/ds6/notice.html @@ -1,161 +1,182 @@
- +
+ + +
+

+ +

+
+

Error. Please take another look at the following:
Card number, Expiration date & Security code.

+
+
+ +
+

+ +

+
+

Good news! You get free shipping on your next pair of shoes! Learn more.

+
+
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- - -

Page-Level Full CTA Button

- - - -

Page-Level Embedded CTA Link

-
-
-

Alert

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
- -

Inline-Level

-
- - -

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- -
-
- - -

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
- - -

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- + {% highlight html %} +
+

+ +

+
+

Congrats! You just listed "Spam and Eggs From the Cow's Perspective (paperback)."

-
- - -

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- -
- -

Inline-Level with Link

-
- - -

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Learn more

- +
+ +
+

+ +

+
+

Error. Please take another look at the following:
Card number, Expiration date & Security code.

-
- - -

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Learn more

- +
+ +
+

+ +

+
+

Good news! You get free shipping on your next pair of shoes! Learn more.

+
+ {% endhighlight %} + +

Inline Notice

+

An inline-level notice is typically located near a form field or user interface control.

+ +
+
+ +
+ + + + +

Delivered on May 1, 2017

+

Tracking number: 93878473859376898908657567

+ +
+ +
+ + + + +

Update your credit card.

+ +
+ +
+ + + + +

Global Shipping Program transaction.

+ +
-

Flyout-Level

-
-
- -

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Use fewer refinements.

- -
+ {% highlight html %} +
+ + + + +

Delivered on May 1, 2017

+

Tracking number: 93878473859376898908657567

+ +
-
-
- -

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Use fewer refinements.

- - -
-
+
+ + + + +

Update your credit card.

+ +
-
-
- -

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Use fewer refinements.

- - -
-
+
+ + + + +

Global Shipping Program transaction.

+ +
+ {% endhighlight %} -
-
- -

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Use fewer refinements.

- - + - + -->
diff --git a/docs/_includes/grid.html b/docs/_includes/grid.html index c2e097dc5..4c028156b 100644 --- a/docs/_includes/grid.html +++ b/docs/_includes/grid.html @@ -49,7 +49,7 @@

Lasso

{% endhighlight %}

CDN

-

The grid system is also available via CDN: https://ir.ebaystatic.com/cr/v/c1/skin/v3.3.2/ds4/grid-full.min.css

+

The grid system is also available via CDN: https://ir.ebaystatic.com/cr/v/c1/skin/v3.4.0/ds4/grid-full.min.css

Basic Grid

    diff --git a/docs/_includes/notice.html b/docs/_includes/notice.html index ab97565d2..220cc6fca 100644 --- a/docs/_includes/notice.html +++ b/docs/_includes/notice.html @@ -19,30 +19,24 @@

    Page Notice

    -

    - +

    +

    Something went wrong. Please try again.
    -

    - +

    +

    Congrats! You are the highest bidder!
    -

    - +

    +

    We could not find any items that match your search. Try expanding your search to find more items.

    @@ -53,30 +47,24 @@

    -

    - +

    +

    Something went wrong. Please try again.
    -

    - +

    +

    Congrats! You are the highest bidder!
    -

    - +

    +

    We could not find any items that match your search. Try expanding your search to find more items.

    @@ -91,18 +79,14 @@

    Dismissable Page Notice

    -
    - +
    +

    Try refining your search term for more results.
    @@ -110,18 +94,14 @@
    -

    - +

    +

    Try refining your search term for more results.
    {% endhighlight %} @@ -134,10 +114,8 @@

    Call-to-Action Page Notice

    -
    - +
    +

    Congrats! You are the highest bidder!

    @@ -153,10 +131,8 @@
    -

    - +

    +

    Congrats! You are the highest bidder!

    @@ -174,30 +150,24 @@

    Inline Notice

    - - + +

    Something went wrong.
    - - + +

    Congrats! You are the highest bidder!

    - - + +

    Try refining your search for more results.

    @@ -208,30 +178,24 @@

    Inline Notice

    {% highlight html %}
    - - + +

    Something went wrong.
    - - + +

    Congrats! You are the highest bidder!
    - - + +

    Try refining your search for more results.

    @@ -253,9 +217,7 @@

    Flyout Notice

    We had trouble connecting to PayPal. Please make your payment later.
    @@ -266,9 +228,7 @@

    Flyout Notice

    Congrats! You are currently the high bidder, but you are close to getting outbid.
    @@ -280,9 +240,7 @@

    Flyout Notice

    Use fewer refinements.

    @@ -296,9 +254,7 @@

    Flyout Notice

    We had trouble connecting to PayPal. Please make your payment later.

    @@ -307,9 +263,7 @@

    Flyout Notice

    Congrats! You are currently the high bidder, but you are close to getting outbid.
    @@ -319,9 +273,7 @@

    Flyout Notice

    Use fewer refinements.

    diff --git a/docs/ds6/index.html b/docs/ds6/index.html index 6ddcfd54e..1f559194f 100644 --- a/docs/ds6/index.html +++ b/docs/ds6/index.html @@ -28,6 +28,7 @@

    Contents

  • @ebay/skin/icon
  • @ebay/skin/listbox
  • @ebay/skin/menu
    • +
  • @ebay/skin/notice
  • @ebay/skin/svg
  • @ebay/skin/typography
@@ -38,6 +39,7 @@

Contents

{% include ds6/icon.html %} {% include ds6/listbox.html %} {% include ds6/menu.html %} + {% include ds6/notice.html %} {% include ds6/svg.html %} {% include ds6/typography.html %} diff --git a/docs/src/js/ds6/main.js b/docs/src/js/ds6/main.js index e491a7f90..3562a85a5 100644 --- a/docs/src/js/ds6/main.js +++ b/docs/src/js/ds6/main.js @@ -91,6 +91,8 @@ nodeListToArray(document.querySelectorAll('.listbox')).forEach(function(el, i) { // add a click handler to each el el.addEventListener('click', function(e) { updateListbox(parseInt(this.dataset.listboxIndex, 10)); + widget.collapse(); + inputEl.focus(); }); }); diff --git a/docs/src/less/ds6/index.less b/docs/src/less/ds6/index.less index cb23b3730..5f11217d1 100644 --- a/docs/src/less/ds6/index.less +++ b/docs/src/less/ds6/index.less @@ -2,45 +2,28 @@ display: none; } -body { - background-color: white; -} - ul { list-style: none; margin: 0; padding: 0; } -h1, -h2, -h3, -h4 { - color: @ds6-color-g206-gray; +h1 { + .ds6-typography-giant-2; } h2 { + .ds6-typography-large-2-bold; margin-top: 32px; } -.note { - background-color: @ds6-color-g201-gray; - border: 2px solid @ds6-color-g203-gray; - padding: 1rem; - margin: 0 .5rem 1rem; - - p { - margin: 0 0 1rem; - - &:last-child { - margin-bottom: 0; - } - } +h3 { + .ds6-typography-medium-bold; } .demo { background-color: @ds6-color-background-default; - border: 1px solid @ds6-color-g202-gray; + border: 1px solid @ds6-color-g203-gray; } .demo__inner { diff --git a/docs/static/ds4/docs.js b/docs/static/ds4/docs.js index d413bfe81..a282d9394 100644 --- a/docs/static/ds4/docs.js +++ b/docs/static/ds4/docs.js @@ -1,5 +1,5 @@ !function(){function r(r,n){var t=new Error('Cannot find module "'+r+'"'+(n?' from "'+n+'"':""));return t.code="MODULE_NOT_FOUND",t}function n(r){this.id=this.filename=r,this.loaded=!1,this.exports=void 0}function t(r,n,t){var i=t&&t.globals;if(O[r]=n,i)for(var e=b||global,o=0;o2&&0===r[t-1].length&&t--,r.length=t,r.join("/"))}function f(r,n){var t=n.split("/");return u(("/"==r?[""]:r.split("/")).concat(t))}function s(r){var n,t=r.lastIndexOf(".");return-1===t||-1!==(n=r.lastIndexOf("/"))&&n>t?null:r.substring(0,t)}function l(r){r=r.substring(1);var n=r.indexOf("/");"@"===r.charAt(1)&&(n=r.indexOf("/",n+1));var t=-1===n?r.length:n;return[r.substring(0,t),r.substring(t)]}function c(r,n){"/"===r.charAt(r.length-1)&&(r=r.slice(0,-1));var t=M[r];if(t)return t;var i,e,o=l(n),a=o[0],u=r.indexOf("/");u<0?(i=r,e=""):("@"===r.charAt(0)&&(u=r.indexOf("/",u+1)),i=r.substring(0,u),e=r.substring(u));var f=I[a+"/"+i];if(f){var s="/"+i+"$"+f;return e&&(s+=e),s}}function v(r,n){var t;if("."===r.charAt(0))t=f(n,r);else if("/"===r.charAt(0))t=u(r.split("/"));else{for(var i=m.length,e=0;e0&&t-1 in e)}function o(e,t){return e.nodeName&&e.nodeName.toLowerCase()===t.toLowerCase()}function a(e,t,n){return me(t)?we.grep(e,function(e,r){return!!t.call(e,r,e)!==n}):t.nodeType?we.grep(e,function(e){return e===t!==n}):"string"!=typeof t?we.grep(e,function(e){return fe.call(t,e)>-1!==n}):we.filter(t,e,n)}function s(e,t){for(;(e=e[t])&&1!==e.nodeType;);return e}function u(e){var t={};return we.each(e.match(Le)||[],function(e,n){t[n]=!0}),t}function l(e){return e}function c(e){throw e}function f(e,t,n,r){var i;try{e&&me(i=e.promise)?i.call(e).done(t).fail(n):e&&me(i=e.then)?i.call(e,t,n):t.apply(void 0,[e].slice(r))}catch(e){n.apply(void 0,[e])}}function p(){ae.removeEventListener("DOMContentLoaded",p),e.removeEventListener("load",p),we.ready()}function d(e,t){return t.toUpperCase()}function h(e){return e.replace(Me,"ms-").replace(Re,d)}function g(){this.expando=we.expando+g.uid++}function v(e){return"true"===e||"false"!==e&&("null"===e?null:e===+e+""?+e:Be.test(e)?JSON.parse(e):e)}function y(e,t,n){var r;if(void 0===n&&1===e.nodeType)if(r="data-"+t.replace(Fe,"-$&").toLowerCase(),"string"==typeof(n=e.getAttribute(r))){try{n=v(n)}catch(e){}$e.set(e,t,n)}else n=void 0;return n}function m(e,t,n,r){var i,o,a=20,s=r?function(){return r.cur()}:function(){return we.css(e,t,"")},u=s(),l=n&&n[3]||(we.cssNumber[t]?"":"px"),c=(we.cssNumber[t]||"px"!==l&&+u)&&ze.exec(we.css(e,t));if(c&&c[3]!==l){for(u/=2,l=l||c[3],c=+u||1;a--;)we.style(e,t,c+l),(1-o)*(1-(o=s()/u||.5))<=0&&(a=0),c/=o;c*=2,we.style(e,t,c+l),n=n||[]}return n&&(c=+c||+u||0,i=n[1]?c+(n[1]+1)*n[2]:+n[2],r&&(r.unit=l,r.start=c,r.end=i)),i}function x(e){var t,n=e.ownerDocument,r=e.nodeName,i=Ge[r];return i||(t=n.body.appendChild(n.createElement(r)),i=we.css(t,"display"),t.parentNode.removeChild(t),"none"===i&&(i="block"),Ge[r]=i,i)}function b(e,t){for(var n,r,i=[],o=0,a=e.length;o-1)o&&o.push(a);else if(c=we.contains(a.ownerDocument,a),s=w(p.appendChild(a),"script"),c&&T(s),n)for(f=0;a=s[f++];)Je.test(a.type||"")&&n.push(a);return p}function E(){return!0}function k(){return!1}function S(){try{return ae.activeElement}catch(e){}}function D(e,t,n,r,i,o){var a,s;if("object"==typeof t){"string"!=typeof n&&(r=r||n,n=void 0);for(s in t)D(e,s,n,r,t[s],o);return e}if(null==r&&null==i?(i=n,r=n=void 0):null==i&&("string"==typeof n?(i=r,r=void 0):(i=r,r=n,n=void 0)),!1===i)i=k;else if(!i)return e;return 1===o&&(a=i,i=function(e){return we().off(e),a.apply(this,arguments)},i.guid=a.guid||(a.guid=we.guid++)),e.each(function(){we.event.add(this,t,i,r,n)})}function N(e,t){return o(e,"table")&&o(11!==t.nodeType?t:t.firstChild,"tr")?we(e).children("tbody")[0]||e:e}function j(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function A(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function q(e,t){var n,r,i,o,a,s,u,l;if(1===t.nodeType){if(We.hasData(e)&&(o=We.access(e),a=We.set(t,o),l=o.events)){delete a.handle,a.events={};for(i in l)for(n=0,r=l[i].length;n1&&"string"==typeof h&&!ye.checkClone&&at.test(h))return e.each(function(n){var o=e.eq(n);g&&(t[0]=h.call(this,n,o.html())),H(o,t,r,i)});if(p&&(o=C(t,e[0].ownerDocument,!1,e,i),a=o.firstChild,1===o.childNodes.length&&(o=a),a||i)){for(s=we.map(w(o,"script"),j),u=s.length;f=0&&(u+=Math.max(0,Math.ceil(e["offset"+t[0].toUpperCase()+t.slice(1)]-o-u-s-.5))),u}function B(e,t,n){var r=lt(e),i=P(e,t,r),o="border-box"===we.css(e,"boxSizing",!1,r),a=o;if(ut.test(i)){if(!n)return i;i="auto"}return a=a&&(ye.boxSizingReliable()||i===e.style[t]),("auto"===i||!parseFloat(i)&&"inline"===we.css(e,"display",!1,r))&&(i=e["offset"+t[0].toUpperCase()+t.slice(1)],a=!0),(i=parseFloat(i)||0)+$(e,t,n||(o?"border":"content"),a,r,i)+"px"}function F(e,t,n,r,i){return new F.prototype.init(e,t,n,r,i)}function _(){mt&&(!1===ae.hidden&&e.requestAnimationFrame?e.requestAnimationFrame(_):e.setTimeout(_,we.fx.interval),we.fx.tick())}function z(){return e.setTimeout(function(){yt=void 0}),yt=Date.now()}function X(e,t){var n,r=0,i={height:e};for(t=t?1:0;r<4;r+=2-t)n=Xe[r],i["margin"+n]=i["padding"+n]=e;return t&&(i.opacity=i.width=e),i}function U(e,t,n){for(var r,i=(Y.tweeners[t]||[]).concat(Y.tweeners["*"]),o=0,a=i.length;o=0&&nw.cacheLength&&delete e[t.shift()],e[n+" "]=r}var t=[];return e}function r(e){return e[I]=!0,e}function i(e){var t=q.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function o(e,t){for(var n=e.split("|"),r=n.length;r--;)w.attrHandle[n[r]]=t}function a(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)for(;n=n.nextSibling;)if(n===t)return-1;return e?1:-1}function s(e){return function(t){return"form"in t?t.parentNode&&!1===t.disabled?"label"in t?"label"in t.parentNode?t.parentNode.disabled===e:t.disabled===e:t.isDisabled===e||t.isDisabled!==!e&&Te(t)===e:t.disabled===e:"label"in t&&t.disabled===e}}function u(e){return r(function(t){return t=+t,r(function(n,r){for(var i,o=e([],n.length,t),a=o.length;a--;)n[i=o[a]]&&(n[i]=!(r[i]=n[i]))})})}function l(e){return e&&void 0!==e.getElementsByTagName&&e}function c(){}function f(e){for(var t=0,n=e.length,r="";t1?function(t,n,r){for(var i=e.length;i--;)if(!e[i](t,n,r))return!1;return!0}:e[0]}function h(e,n,r){for(var i=0,o=n.length;i-1&&(r[l]=!(a[l]=f))}}else x=g(x===a?x.splice(v,x.length):x),o?o(null,a,x,u):Q.apply(a,x)})}function y(e){for(var t,n,r,i=e.length,o=w.relative[e[0].type],a=o||w.relative[" "],s=o?1:0,u=p(function(e){return e===t},a,!0),l=p(function(e){return K(t,e)>-1},a,!0),c=[function(e,n,r){var i=!o&&(r||n!==D)||((t=n).nodeType?u(e,n,r):l(e,n,r));return t=null,i}];s1&&d(c),s>1&&f(e.slice(0,s-1).concat({value:" "===e[s-2].type?"*":""})).replace(oe,"$1"),n,s0,o=e.length>0,a=function(r,a,s,u,l){var c,f,p,d=0,h="0",v=r&&[],y=[],m=D,x=r||o&&w.find.TAG("*",l),b=$+=null==m?1:Math.random()||.1,T=x.length;for(l&&(D=a===q||a||l);h!==T&&null!=(c=x[h]);h++){if(o&&c){for(f=0,a||c.ownerDocument===q||(A(c),s=!H);p=e[f++];)if(p(c,a||q,s)){u.push(c);break}l&&($=b)}i&&((c=!p&&c)&&d--,r&&v.push(c))}if(d+=h,i&&h!==d){for(f=0;p=n[f++];)p(v,y,a,s);if(r){if(d>0)for(;h--;)v[h]||y[h]||(y[h]=G.call(u));y=g(y)}Q.apply(u,y),l&&!r&&y.length>0&&d+n.length>1&&t.uniqueSort(u)}return l&&($=b,D=m),v};return i?r(a):a}var x,b,w,T,C,E,k,S,D,N,j,A,q,L,H,O,P,M,R,I="sizzle"+1*new Date,W=e.document,$=0,B=0,F=n(),_=n(),z=n(),X=function(e,t){return e===t&&(j=!0),0},U={}.hasOwnProperty,V=[],G=V.pop,Y=V.push,Q=V.push,J=V.slice,K=function(e,t){for(var n=0,r=e.length;n+~]|"+ee+")"+ee+"*"),ue=new RegExp("="+ee+"*([^\\]'\"]*?)"+ee+"*\\]","g"),le=new RegExp(re),ce=new RegExp("^"+te+"$"),fe={ID:new RegExp("^#("+te+")"),CLASS:new RegExp("^\\.("+te+")"),TAG:new RegExp("^("+te+"|[*])"),ATTR:new RegExp("^"+ne),PSEUDO:new RegExp("^"+re),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+ee+"*(even|odd|(([+-]|)(\\d*)n|)"+ee+"*(?:([+-]|)"+ee+"*(\\d+)|))"+ee+"*\\)|)","i"),bool:new RegExp("^(?:"+Z+")$","i"),needsContext:new RegExp("^"+ee+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+ee+"*((?:-\\d)?\\d*)"+ee+"*\\)|)(?=[^-]|$)","i")},pe=/^(?:input|select|textarea|button)$/i,de=/^h\d$/i,he=/^[^{]+\{\s*\[native \w/,ge=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,ve=/[+~]/,ye=new RegExp("\\\\([\\da-f]{1,6}"+ee+"?|("+ee+")|.)","ig"),me=function(e,t,n){var r="0x"+t-65536;return r!==r||n?t:r<0?String.fromCharCode(r+65536):String.fromCharCode(r>>10|55296,1023&r|56320)},xe=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,be=function(e,t){return t?"\0"===e?"�":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},we=function(){A()},Te=p(function(e){return!0===e.disabled&&("form"in e||"label"in e)},{dir:"parentNode",next:"legend"});try{Q.apply(V=J.call(W.childNodes),W.childNodes),V[W.childNodes.length].nodeType}catch(e){Q={apply:V.length?function(e,t){Y.apply(e,J.call(t))}:function(e,t){for(var n=e.length,r=0;e[n++]=t[r++];);e.length=n-1}}}b=t.support={},C=t.isXML=function(e){var t=e&&(e.ownerDocument||e).documentElement;return!!t&&"HTML"!==t.nodeName},A=t.setDocument=function(e){var t,n,r=e?e.ownerDocument||e:W;return r!==q&&9===r.nodeType&&r.documentElement?(q=r,L=q.documentElement,H=!C(q),W!==q&&(n=q.defaultView)&&n.top!==n&&(n.addEventListener?n.addEventListener("unload",we,!1):n.attachEvent&&n.attachEvent("onunload",we)),b.attributes=i(function(e){return e.className="i",!e.getAttribute("className")}),b.getElementsByTagName=i(function(e){return e.appendChild(q.createComment("")),!e.getElementsByTagName("*").length}),b.getElementsByClassName=he.test(q.getElementsByClassName),b.getById=i(function(e){return L.appendChild(e).id=I,!q.getElementsByName||!q.getElementsByName(I).length}),b.getById?(w.filter.ID=function(e){var t=e.replace(ye,me);return function(e){return e.getAttribute("id")===t}},w.find.ID=function(e,t){if(void 0!==t.getElementById&&H){var n=t.getElementById(e);return n?[n]:[]}}):(w.filter.ID=function(e){var t=e.replace(ye,me);return function(e){var n=void 0!==e.getAttributeNode&&e.getAttributeNode("id");return n&&n.value===t}},w.find.ID=function(e,t){if(void 0!==t.getElementById&&H){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];for(i=t.getElementsByName(e),r=0;o=i[r++];)if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),w.find.TAG=b.getElementsByTagName?function(e,t){return void 0!==t.getElementsByTagName?t.getElementsByTagName(e):b.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){for(;n=o[i++];)1===n.nodeType&&r.push(n);return r}return o},w.find.CLASS=b.getElementsByClassName&&function(e,t){if(void 0!==t.getElementsByClassName&&H)return t.getElementsByClassName(e)},P=[],O=[],(b.qsa=he.test(q.querySelectorAll))&&(i(function(e){L.appendChild(e).innerHTML="",e.querySelectorAll("[msallowcapture^='']").length&&O.push("[*^$]="+ee+"*(?:''|\"\")"),e.querySelectorAll("[selected]").length||O.push("\\["+ee+"*(?:value|"+Z+")"),e.querySelectorAll("[id~="+I+"-]").length||O.push("~="),e.querySelectorAll(":checked").length||O.push(":checked"),e.querySelectorAll("a#"+I+"+*").length||O.push(".#.+[+~]")}),i(function(e){e.innerHTML="";var t=q.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&O.push("name"+ee+"*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&O.push(":enabled",":disabled"),L.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&O.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),O.push(",.*:")})),(b.matchesSelector=he.test(M=L.matches||L.webkitMatchesSelector||L.mozMatchesSelector||L.oMatchesSelector||L.msMatchesSelector))&&i(function(e){b.disconnectedMatch=M.call(e,"*"),M.call(e,"[s!='']:x"),P.push("!=",re)}),O=O.length&&new RegExp(O.join("|")),P=P.length&&new RegExp(P.join("|")),t=he.test(L.compareDocumentPosition),R=t||he.test(L.contains)?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)for(;t=t.parentNode;)if(t===e)return!0;return!1},X=t?function(e,t){if(e===t)return j=!0,0;var n=!e.compareDocumentPosition-!t.compareDocumentPosition;return n||(n=(e.ownerDocument||e)===(t.ownerDocument||t)?e.compareDocumentPosition(t):1,1&n||!b.sortDetached&&t.compareDocumentPosition(e)===n?e===q||e.ownerDocument===W&&R(W,e)?-1:t===q||t.ownerDocument===W&&R(W,t)?1:N?K(N,e)-K(N,t):0:4&n?-1:1)}:function(e,t){if(e===t)return j=!0,0;var n,r=0,i=e.parentNode,o=t.parentNode,s=[e],u=[t];if(!i||!o)return e===q?-1:t===q?1:i?-1:o?1:N?K(N,e)-K(N,t):0;if(i===o)return a(e,t);for(n=e;n=n.parentNode;)s.unshift(n);for(n=t;n=n.parentNode;)u.unshift(n);for(;s[r]===u[r];)r++;return r?a(s[r],u[r]):s[r]===W?-1:u[r]===W?1:0},q):q},t.matches=function(e,n){return t(e,null,null,n)},t.matchesSelector=function(e,n){if((e.ownerDocument||e)!==q&&A(e),n=n.replace(ue,"='$1']"),b.matchesSelector&&H&&!z[n+" "]&&(!P||!P.test(n))&&(!O||!O.test(n)))try{var r=M.call(e,n);if(r||b.disconnectedMatch||e.document&&11!==e.document.nodeType)return r}catch(e){}return t(n,q,null,[e]).length>0},t.contains=function(e,t){return(e.ownerDocument||e)!==q&&A(e),R(e,t)},t.attr=function(e,t){(e.ownerDocument||e)!==q&&A(e);var n=w.attrHandle[t.toLowerCase()],r=n&&U.call(w.attrHandle,t.toLowerCase())?n(e,t,!H):void 0;return void 0!==r?r:b.attributes||!H?e.getAttribute(t):(r=e.getAttributeNode(t))&&r.specified?r.value:null},t.escape=function(e){return(e+"").replace(xe,be)},t.error=function(e){throw new Error("Syntax error, unrecognized expression: "+e)},t.uniqueSort=function(e){var t,n=[],r=0,i=0;if(j=!b.detectDuplicates,N=!b.sortStable&&e.slice(0),e.sort(X),j){for(;t=e[i++];)t===e[i]&&(r=n.push(i));for(;r--;)e.splice(n[r],1)}return N=null,e},T=t.getText=function(e){var t,n="",r=0,i=e.nodeType;if(i){if(1===i||9===i||11===i){if("string"==typeof e.textContent)return e.textContent;for(e=e.firstChild;e;e=e.nextSibling)n+=T(e)}else if(3===i||4===i)return e.nodeValue}else for(;t=e[r++];)n+=T(t);return n},w=t.selectors={cacheLength:50,createPseudo:r,match:fe,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(ye,me),e[3]=(e[3]||e[4]||e[5]||"").replace(ye,me),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||t.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&t.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return fe.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&le.test(n)&&(t=E(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(ye,me).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=F[e+" "];return t||(t=new RegExp("(^|"+ee+")"+e+"("+ee+"|$)"))&&F(e,function(e){return t.test("string"==typeof e.className&&e.className||void 0!==e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(e,n,r){return function(i){var o=t.attr(i,e);return null==o?"!="===n:!n||(o+="","="===n?o===r:"!="===n?o!==r:"^="===n?r&&0===o.indexOf(r):"*="===n?r&&o.indexOf(r)>-1:"$="===n?r&&o.slice(-r.length)===r:"~="===n?(" "+o.replace(ie," ")+" ").indexOf(r)>-1:"|="===n&&(o===r||o.slice(0,r.length+1)===r+"-"))}},CHILD:function(e,t,n,r,i){var o="nth"!==e.slice(0,3),a="last"!==e.slice(-4),s="of-type"===t;return 1===r&&0===i?function(e){return!!e.parentNode}:function(t,n,u){var l,c,f,p,d,h,g=o!==a?"nextSibling":"previousSibling",v=t.parentNode,y=s&&t.nodeName.toLowerCase(),m=!u&&!s,x=!1;if(v){if(o){for(;g;){for(p=t;p=p[g];)if(s?p.nodeName.toLowerCase()===y:1===p.nodeType)return!1;h=g="only"===e&&!h&&"nextSibling"}return!0}if(h=[a?v.firstChild:v.lastChild],a&&m){for(p=v,f=p[I]||(p[I]={}),c=f[p.uniqueID]||(f[p.uniqueID]={}),l=c[e]||[],d=l[0]===$&&l[1],x=d&&l[2],p=d&&v.childNodes[d];p=++d&&p&&p[g]||(x=d=0)||h.pop();)if(1===p.nodeType&&++x&&p===t){c[e]=[$,d,x];break}}else if(m&&(p=t,f=p[I]||(p[I]={}),c=f[p.uniqueID]||(f[p.uniqueID]={}),l=c[e]||[],d=l[0]===$&&l[1],x=d),!1===x)for(;(p=++d&&p&&p[g]||(x=d=0)||h.pop())&&((s?p.nodeName.toLowerCase()!==y:1!==p.nodeType)||!++x||(m&&(f=p[I]||(p[I]={}),c=f[p.uniqueID]||(f[p.uniqueID]={}),c[e]=[$,x]),p!==t)););return(x-=i)===r||x%r==0&&x/r>=0}}},PSEUDO:function(e,n){var i,o=w.pseudos[e]||w.setFilters[e.toLowerCase()]||t.error("unsupported pseudo: "+e);return o[I]?o(n):o.length>1?(i=[e,e,"",n],w.setFilters.hasOwnProperty(e.toLowerCase())?r(function(e,t){for(var r,i=o(e,n),a=i.length;a--;)r=K(e,i[a]),e[r]=!(t[r]=i[a])}):function(e){return o(e,0,i)}):o}},pseudos:{not:r(function(e){var t=[],n=[],i=k(e.replace(oe,"$1"));return i[I]?r(function(e,t,n,r){for(var o,a=i(e,null,r,[]),s=e.length;s--;)(o=a[s])&&(e[s]=!(t[s]=o))}):function(e,r,o){return t[0]=e,i(t,null,o,n),t[0]=null,!n.pop()}}),has:r(function(e){return function(n){return t(e,n).length>0}}),contains:r(function(e){return e=e.replace(ye,me),function(t){return(t.textContent||t.innerText||T(t)).indexOf(e)>-1}}),lang:r(function(e){return ce.test(e||"")||t.error("unsupported lang: "+e),e=e.replace(ye,me).toLowerCase(),function(t){var n;do{if(n=H?t.lang:t.getAttribute("xml:lang")||t.getAttribute("lang"))return(n=n.toLowerCase())===e||0===n.indexOf(e+"-")}while((t=t.parentNode)&&1===t.nodeType);return!1}}),target:function(t){var n=e.location&&e.location.hash;return n&&n.slice(1)===t.id},root:function(e){return e===L},focus:function(e){return e===q.activeElement&&(!q.hasFocus||q.hasFocus())&&!!(e.type||e.href||~e.tabIndex)},enabled:s(!1),disabled:s(!0),checked:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&!!e.checked||"option"===t&&!!e.selected},selected:function(e){ return e.parentNode&&e.parentNode.selectedIndex,!0===e.selected},empty:function(e){for(e=e.firstChild;e;e=e.nextSibling)if(e.nodeType<6)return!1;return!0},parent:function(e){return!w.pseudos.empty(e)},header:function(e){return de.test(e.nodeName)},input:function(e){return pe.test(e.nodeName)},button:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&"button"===e.type||"button"===t},text:function(e){var t;return"input"===e.nodeName.toLowerCase()&&"text"===e.type&&(null==(t=e.getAttribute("type"))||"text"===t.toLowerCase())},first:u(function(){return[0]}),last:u(function(e,t){return[t-1]}),eq:u(function(e,t,n){return[n<0?n+t:n]}),even:u(function(e,t){for(var n=0;n=0;)e.push(r);return e}),gt:u(function(e,t,n){for(var r=n<0?n+t:n;++r2&&"ID"===(a=o[0]).type&&9===t.nodeType&&H&&w.relative[o[1].type]){if(!(t=(w.find.ID(a.matches[0].replace(ye,me),t)||[])[0]))return n;c&&(t=t.parentNode),e=e.slice(o.shift().value.length)}for(i=fe.needsContext.test(e)?0:o.length;i--&&(a=o[i],!w.relative[s=a.type]);)if((u=w.find[s])&&(r=u(a.matches[0].replace(ye,me),ve.test(o[0].type)&&l(t.parentNode)||t))){if(o.splice(i,1),!(e=r.length&&f(o)))return Q.apply(n,r),n;break}}return(c||k(e,p))(r,t,!H,n,!t||ve.test(e)&&l(t.parentNode)||t),n},b.sortStable=I.split("").sort(X).join("")===I,b.detectDuplicates=!!j,A(),b.sortDetached=i(function(e){return 1&e.compareDocumentPosition(q.createElement("fieldset"))}),i(function(e){return e.innerHTML="","#"===e.firstChild.getAttribute("href")})||o("type|href|height|width",function(e,t,n){if(!n)return e.getAttribute(t,"type"===t.toLowerCase()?1:2)}),b.attributes&&i(function(e){return e.innerHTML="",e.firstChild.setAttribute("value",""),""===e.firstChild.getAttribute("value")})||o("value",function(e,t,n){if(!n&&"input"===e.nodeName.toLowerCase())return e.defaultValue}),i(function(e){return null==e.getAttribute("disabled")})||o(Z,function(e,t,n){var r;if(!n)return!0===e[t]?t.toLowerCase():(r=e.getAttributeNode(t))&&r.specified?r.value:null}),t}(e);we.find=Ce,we.expr=Ce.selectors,we.expr[":"]=we.expr.pseudos,we.uniqueSort=we.unique=Ce.uniqueSort,we.text=Ce.getText,we.isXMLDoc=Ce.isXML,we.contains=Ce.contains,we.escapeSelector=Ce.escape;var Ee=function(e,t,n){for(var r=[],i=void 0!==n;(e=e[t])&&9!==e.nodeType;)if(1===e.nodeType){if(i&&we(e).is(n))break;r.push(e)}return r},ke=function(e,t){for(var n=[];e;e=e.nextSibling)1===e.nodeType&&e!==t&&n.push(e);return n},Se=we.expr.match.needsContext,De=/^<([a-z][^\/\0>:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i;we.filter=function(e,t,n){var r=t[0];return n&&(e=":not("+e+")"),1===t.length&&1===r.nodeType?we.find.matchesSelector(r,e)?[r]:[]:we.find.matches(e,we.grep(t,function(e){return 1===e.nodeType}))},we.fn.extend({find:function(e){var t,n,r=this.length,i=this;if("string"!=typeof e)return this.pushStack(we(e).filter(function(){for(t=0;t1?we.uniqueSort(n):n},filter:function(e){return this.pushStack(a(this,e||[],!1))},not:function(e){return this.pushStack(a(this,e||[],!0))},is:function(e){return!!a(this,"string"==typeof e&&Se.test(e)?we(e):e||[],!1).length}});var Ne,je=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]+))$/;(we.fn.init=function(e,t,n){var r,i;if(!e)return this;if(n=n||Ne,"string"==typeof e){if(!(r="<"===e[0]&&">"===e[e.length-1]&&e.length>=3?[null,e,null]:je.exec(e))||!r[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(r[1]){if(t=t instanceof we?t[0]:t,we.merge(this,we.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:ae,!0)),De.test(r[1])&&we.isPlainObject(t))for(r in t)me(this[r])?this[r](t[r]):this.attr(r,t[r]);return this}return i=ae.getElementById(r[2]),i&&(this[0]=i,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):me(e)?void 0!==n.ready?n.ready(e):e(we):we.makeArray(e,this)}).prototype=we.fn,Ne=we(ae);var Ae=/^(?:parents|prev(?:Until|All))/,qe={children:!0,contents:!0,next:!0,prev:!0};we.fn.extend({has:function(e){var t=we(e,this),n=t.length;return this.filter(function(){for(var e=0;e-1:1===n.nodeType&&we.find.matchesSelector(n,e))){o.push(n);break}return this.pushStack(o.length>1?we.uniqueSort(o):o)},index:function(e){return e?"string"==typeof e?fe.call(we(e),this[0]):fe.call(this,e.jquery?e[0]:e):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(e,t){return this.pushStack(we.uniqueSort(we.merge(this.get(),we(e,t))))},addBack:function(e){return this.add(null==e?this.prevObject:this.prevObject.filter(e))}}),we.each({parent:function(e){var t=e.parentNode;return t&&11!==t.nodeType?t:null},parents:function(e){return Ee(e,"parentNode")},parentsUntil:function(e,t,n){return Ee(e,"parentNode",n)},next:function(e){return s(e,"nextSibling")},prev:function(e){return s(e,"previousSibling")},nextAll:function(e){return Ee(e,"nextSibling")},prevAll:function(e){return Ee(e,"previousSibling")},nextUntil:function(e,t,n){return Ee(e,"nextSibling",n)},prevUntil:function(e,t,n){return Ee(e,"previousSibling",n)},siblings:function(e){return ke((e.parentNode||{}).firstChild,e)},children:function(e){return ke(e.firstChild)},contents:function(e){return o(e,"iframe")?e.contentDocument:(o(e,"template")&&(e=e.content||e),we.merge([],e.childNodes))}},function(e,t){we.fn[e]=function(n,r){var i=we.map(this,t,n);return"Until"!==e.slice(-5)&&(r=n),r&&"string"==typeof r&&(i=we.filter(r,i)),this.length>1&&(qe[e]||we.uniqueSort(i),Ae.test(e)&&i.reverse()),this.pushStack(i)}});var Le=/[^\x20\t\r\n\f]+/g;we.Callbacks=function(e){e="string"==typeof e?u(e):we.extend({},e);var t,n,i,o,a=[],s=[],l=-1,c=function(){for(o=o||e.once,i=t=!0;s.length;l=-1)for(n=s.shift();++l-1;)a.splice(n,1),n<=l&&l--}),this},has:function(e){return e?we.inArray(e,a)>-1:a.length>0},empty:function(){return a&&(a=[]),this},disable:function(){return o=s=[],a=n="",this},disabled:function(){return!a},lock:function(){return o=s=[],n||t||(a=n=""),this},locked:function(){return!!o},fireWith:function(e,n){return o||(n=n||[],n=[e,n.slice?n.slice():n],s.push(n),t||c()),this},fire:function(){return f.fireWith(this,arguments),this},fired:function(){return!!i}};return f},we.extend({Deferred:function(t){var n=[["notify","progress",we.Callbacks("memory"),we.Callbacks("memory"),2],["resolve","done",we.Callbacks("once memory"),we.Callbacks("once memory"),0,"resolved"],["reject","fail",we.Callbacks("once memory"),we.Callbacks("once memory"),1,"rejected"]],r="pending",i={state:function(){return r},always:function(){return o.done(arguments).fail(arguments),this},catch:function(e){return i.then(null,e)},pipe:function(){var e=arguments;return we.Deferred(function(t){we.each(n,function(n,r){var i=me(e[r[4]])&&e[r[4]];o[r[1]](function(){var e=i&&i.apply(this,arguments);e&&me(e.promise)?e.promise().progress(t.notify).done(t.resolve).fail(t.reject):t[r[0]+"With"](this,i?[e]:arguments)})}),e=null}).promise()},then:function(t,r,i){function o(t,n,r,i){return function(){var s=this,u=arguments,f=function(){var e,f;if(!(t=a&&(r!==c&&(s=void 0,u=[e]),n.rejectWith(s,u))}};t?p():(we.Deferred.getStackHook&&(p.stackTrace=we.Deferred.getStackHook()),e.setTimeout(p))}}var a=0;return we.Deferred(function(e){n[0][3].add(o(0,e,me(i)?i:l,e.notifyWith)),n[1][3].add(o(0,e,me(t)?t:l)),n[2][3].add(o(0,e,me(r)?r:c))}).promise()},promise:function(e){return null!=e?we.extend(e,i):i}},o={};return we.each(n,function(e,t){var a=t[2],s=t[5];i[t[1]]=a.add,s&&a.add(function(){r=s},n[3-e][2].disable,n[3-e][3].disable,n[0][2].lock,n[0][3].lock),a.add(t[3].fire),o[t[0]]=function(){return o[t[0]+"With"](this===o?void 0:this,arguments),this},o[t[0]+"With"]=a.fireWith}),i.promise(o),t&&t.call(o,o),o},when:function(e){var t=arguments.length,n=t,r=Array(n),i=ue.call(arguments),o=we.Deferred(),a=function(e){return function(n){r[e]=this,i[e]=arguments.length>1?ue.call(arguments):n,--t||o.resolveWith(r,i)}};if(t<=1&&(f(e,o.done(a(n)).resolve,o.reject,!t),"pending"===o.state()||me(i[n]&&i[n].then)))return o.then();for(;n--;)f(i[n],a(n),o.reject);return o.promise()}});var He=/^(Eval|Internal|Range|Reference|Syntax|Type|URI)Error$/;we.Deferred.exceptionHook=function(t,n){e.console&&e.console.warn&&t&&He.test(t.name)&&e.console.warn("jQuery.Deferred exception: "+t.message,t.stack,n)},we.readyException=function(t){e.setTimeout(function(){throw t})};var Oe=we.Deferred();we.fn.ready=function(e){return Oe.then(e).catch(function(e){we.readyException(e)}),this},we.extend({isReady:!1,readyWait:1,ready:function(e){(!0===e?--we.readyWait:we.isReady)||(we.isReady=!0,!0!==e&&--we.readyWait>0||Oe.resolveWith(ae,[we]))}}),we.ready.then=Oe.then,"complete"===ae.readyState||"loading"!==ae.readyState&&!ae.documentElement.doScroll?e.setTimeout(we.ready):(ae.addEventListener("DOMContentLoaded",p),e.addEventListener("load",p));var Pe=function(e,t,n,i,o,a,s){var u=0,l=e.length,c=null==n;if("object"===r(n)){o=!0;for(u in n)Pe(e,t,u,n[u],!0,a,s)}else if(void 0!==i&&(o=!0,me(i)||(s=!0),c&&(s?(t.call(e,i),t=null):(c=t,t=function(e,t,n){return c.call(we(e),n)})),t))for(;u1,null,!0)},removeData:function(e){return this.each(function(){$e.remove(this,e)})}}),we.extend({queue:function(e,t,n){var r;if(e)return t=(t||"fx")+"queue",r=We.get(e,t),n&&(!r||Array.isArray(n)?r=We.access(e,t,we.makeArray(n)):r.push(n)),r||[]},dequeue:function(e,t){t=t||"fx";var n=we.queue(e,t),r=n.length,i=n.shift(),o=we._queueHooks(e,t),a=function(){we.dequeue(e,t)};"inprogress"===i&&(i=n.shift(),r--),i&&("fx"===t&&n.unshift("inprogress"),delete o.stop,i.call(e,a,o)),!r&&o&&o.empty.fire()},_queueHooks:function(e,t){var n=t+"queueHooks";return We.get(e,n)||We.access(e,n,{empty:we.Callbacks("once memory").add(function(){We.remove(e,[t+"queue",n])})})}}),we.fn.extend({queue:function(e,t){var n=2;return"string"!=typeof e&&(t=e,e="fx",n--),arguments.length\x20\t\r\n\f]+)/i,Je=/^$|^module$|\/(?:java|ecma)script/i,Ke={option:[1,""],thead:[1,"","
"],col:[2,"","
"],tr:[2,"","
"],td:[3,"","
"],_default:[0,"",""]};Ke.optgroup=Ke.option,Ke.tbody=Ke.tfoot=Ke.colgroup=Ke.caption=Ke.thead,Ke.th=Ke.td;var Ze=/<|&#?\w+;/;!function(){var e=ae.createDocumentFragment(),t=e.appendChild(ae.createElement("div")),n=ae.createElement("input");n.setAttribute("type","radio"),n.setAttribute("checked","checked"),n.setAttribute("name","t"),t.appendChild(n),ye.checkClone=t.cloneNode(!0).cloneNode(!0).lastChild.checked,t.innerHTML="",ye.noCloneChecked=!!t.cloneNode(!0).lastChild.defaultValue}();var et=ae.documentElement,tt=/^key/,nt=/^(?:mouse|pointer|contextmenu|drag|drop)|click/,rt=/^([^.]*)(?:\.(.+)|)/;we.event={global:{},add:function(e,t,n,r,i){var o,a,s,u,l,c,f,p,d,h,g,v=We.get(e);if(v)for(n.handler&&(o=n,n=o.handler,i=o.selector),i&&we.find.matchesSelector(et,i),n.guid||(n.guid=we.guid++),(u=v.events)||(u=v.events={}),(a=v.handle)||(a=v.handle=function(t){return void 0!==we&&we.event.triggered!==t.type?we.event.dispatch.apply(e,arguments):void 0}),t=(t||"").match(Le)||[""],l=t.length;l--;)s=rt.exec(t[l])||[],d=g=s[1],h=(s[2]||"").split(".").sort(),d&&(f=we.event.special[d]||{},d=(i?f.delegateType:f.bindType)||d,f=we.event.special[d]||{},c=we.extend({type:d,origType:g,data:r,handler:n,guid:n.guid,selector:i,needsContext:i&&we.expr.match.needsContext.test(i),namespace:h.join(".")},o),(p=u[d])||(p=u[d]=[],p.delegateCount=0,f.setup&&!1!==f.setup.call(e,r,h,a)||e.addEventListener&&e.addEventListener(d,a)),f.add&&(f.add.call(e,c),c.handler.guid||(c.handler.guid=n.guid)),i?p.splice(p.delegateCount++,0,c):p.push(c),we.event.global[d]=!0)},remove:function(e,t,n,r,i){var o,a,s,u,l,c,f,p,d,h,g,v=We.hasData(e)&&We.get(e);if(v&&(u=v.events)){for(t=(t||"").match(Le)||[""],l=t.length;l--;)if(s=rt.exec(t[l])||[],d=g=s[1],h=(s[2]||"").split(".").sort(),d){for(f=we.event.special[d]||{},d=(r?f.delegateType:f.bindType)||d,p=u[d]||[],s=s[2]&&new RegExp("(^|\\.)"+h.join("\\.(?:.*\\.|)")+"(\\.|$)"),a=o=p.length;o--;)c=p[o],!i&&g!==c.origType||n&&n.guid!==c.guid||s&&!s.test(c.namespace)||r&&r!==c.selector&&("**"!==r||!c.selector)||(p.splice(o,1),c.selector&&p.delegateCount--,f.remove&&f.remove.call(e,c));a&&!p.length&&(f.teardown&&!1!==f.teardown.call(e,h,v.handle)||we.removeEvent(e,d,v.handle),delete u[d])}else for(d in u)we.event.remove(e,d+t[l],n,r,!0);we.isEmptyObject(u)&&We.remove(e,"handle events")}},dispatch:function(e){var t,n,r,i,o,a,s=we.event.fix(e),u=new Array(arguments.length),l=(We.get(this,"events")||{})[s.type]||[],c=we.event.special[s.type]||{};for(u[0]=s,t=1;t=1))for(;l!==this;l=l.parentNode||this)if(1===l.nodeType&&("click"!==e.type||!0!==l.disabled)){for(o=[],a={},n=0;n-1:we.find(i,this,null,[l]).length),a[i]&&o.push(r);o.length&&s.push({elem:l,handlers:o})}return l=this,u\x20\t\r\n\f]*)[^>]*)\/>/gi,ot=/\s*$/g;we.extend({htmlPrefilter:function(e){return e.replace(it,"<$1>")},clone:function(e,t,n){var r,i,o,a,s=e.cloneNode(!0),u=we.contains(e.ownerDocument,e);if(!(ye.noCloneChecked||1!==e.nodeType&&11!==e.nodeType||we.isXMLDoc(e)))for(a=w(s),o=w(e),r=0,i=o.length;r0&&T(a,!u&&w(e,"script")),s},cleanData:function(e){for(var t,n,r,i=we.event.special,o=0;void 0!==(n=e[o]);o++)if(Ie(n)){if(t=n[We.expando]){if(t.events)for(r in t.events)i[r]?we.event.remove(n,r):we.removeEvent(n,r,t.handle);n[We.expando]=void 0}n[$e.expando]&&(n[$e.expando]=void 0)}}}),we.fn.extend({detach:function(e){return O(this,e,!0)},remove:function(e){return O(this,e)},text:function(e){return Pe(this,function(e){return void 0===e?we.text(this):this.empty().each(function(){1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||(this.textContent=e)})},null,e,arguments.length)},append:function(){return H(this,arguments,function(e){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){N(this,e).appendChild(e)}})},prepend:function(){return H(this,arguments,function(e){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var t=N(this,e);t.insertBefore(e,t.firstChild)}})},before:function(){return H(this,arguments,function(e){this.parentNode&&this.parentNode.insertBefore(e,this)})},after:function(){return H(this,arguments,function(e){this.parentNode&&this.parentNode.insertBefore(e,this.nextSibling)})},empty:function(){for(var e,t=0;null!=(e=this[t]);t++)1===e.nodeType&&(we.cleanData(w(e,!1)),e.textContent="");return this},clone:function(e,t){return e=null!=e&&e,t=null==t?e:t,this.map(function(){return we.clone(this,e,t)})},html:function(e){return Pe(this,function(e){var t=this[0]||{},n=0,r=this.length;if(void 0===e&&1===t.nodeType)return t.innerHTML;if("string"==typeof e&&!ot.test(e)&&!Ke[(Qe.exec(e)||["",""])[1].toLowerCase()]){e=we.htmlPrefilter(e);try{for(;n1)}}),we.Tween=F,F.prototype={constructor:F,init:function(e,t,n,r,i,o){this.elem=e,this.prop=n,this.easing=i||we.easing._default,this.options=t,this.start=this.now=this.cur(),this.end=r,this.unit=o||(we.cssNumber[n]?"":"px")},cur:function(){var e=F.propHooks[this.prop];return e&&e.get?e.get(this):F.propHooks._default.get(this)},run:function(e){var t,n=F.propHooks[this.prop];return this.options.duration?this.pos=t=we.easing[this.easing](e,this.options.duration*e,0,1,this.options.duration):this.pos=t=e,this.now=(this.end-this.start)*t+this.start,this.options.step&&this.options.step.call(this.elem,this.now,this),n&&n.set?n.set(this):F.propHooks._default.set(this),this}},F.prototype.init.prototype=F.prototype,F.propHooks={_default:{get:function(e){var t;return 1!==e.elem.nodeType||null!=e.elem[e.prop]&&null==e.elem.style[e.prop]?e.elem[e.prop]:(t=we.css(e.elem,e.prop,""),t&&"auto"!==t?t:0)},set:function(e){we.fx.step[e.prop]?we.fx.step[e.prop](e):1!==e.elem.nodeType||null==e.elem.style[we.cssProps[e.prop]]&&!we.cssHooks[e.prop]?e.elem[e.prop]=e.now:we.style(e.elem,e.prop,e.now+e.unit)}}},F.propHooks.scrollTop=F.propHooks.scrollLeft={set:function(e){e.elem.nodeType&&e.elem.parentNode&&(e.elem[e.prop]=e.now)}},we.easing={linear:function(e){return e},swing:function(e){return.5-Math.cos(e*Math.PI)/2},_default:"swing"},we.fx=F.prototype.init,we.fx.step={};var yt,mt,xt=/^(?:toggle|show|hide)$/,bt=/queueHooks$/;we.Animation=we.extend(Y,{tweeners:{"*":[function(e,t){var n=this.createTween(e,t);return m(n.elem,e,ze.exec(t),n),n}]},tweener:function(e,t){me(e)?(t=e,e=["*"]):e=e.match(Le);for(var n,r=0,i=e.length;r2&&0===r[t-1].length&&t--,r.length=t,r.join("/"))}function f(r,n){var t=n.split("/");return u(("/"==r?[""]:r.split("/")).concat(t))}function s(r){var n,t=r.lastIndexOf(".");return-1===t||-1!==(n=r.lastIndexOf("/"))&&n>t?null:r.substring(0,t)}function l(r){r=r.substring(1);var n=r.indexOf("/");"@"===r.charAt(1)&&(n=r.indexOf("/",n+1));var t=-1===n?r.length:n;return[r.substring(0,t),r.substring(t)]}function c(r,n){"/"===r.charAt(r.length-1)&&(r=r.slice(0,-1));var t=M[r];if(t)return t;var i,e,o=l(n),a=o[0],u=r.indexOf("/");u<0?(i=r,e=""):("@"===r.charAt(0)&&(u=r.indexOf("/",u+1)),i=r.substring(0,u),e=r.substring(u));var f=I[a+"/"+i];if(f){var s="/"+i+"$"+f;return e&&(s+=e),s}}function v(r,n){var t;if("."===r.charAt(0))t=f(n,r);else if("/"===r.charAt(0))t=u(r.split("/"));else{for(var i=m.length,e=0;e1&&void 0!==arguments[1]&&arguments[1],n=Array.prototype.slice.call(e.querySelectorAll(a));return n=n.filter(function(e){return"none"!==window.getComputedStyle(e).display}),!0===t&&(n=n.filter(function(e){return"-1"!==e.getAttribute("tabindex")})),n}}); $_mod.def("/makeup-expander$0.3.0/index",function(t,e,s,i,n){"use strict";function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function h(t){var e=t.keyCode;13!==e&&32!==e||(this.keyDownFlag=!0,32===e&&!0===this.options.spacebar&&this.hostEl.click())}var a=Object.assign||function(t){for(var e=1;e=32&&e.keyCode<=36||38===e.keyCode||40===e.keyCode)&&e.preventDefault()}function i(e){e.addEventListener("keydown",r)}function k(e){e.removeEventListener("keydown",r)}o.exports={add:i,remove:k}}); -$_mod.def("/@ebay/skin$3.3.2/docs/src/js/ds6/main",function(e,t,n,o,r){function a(e){return Array.prototype.slice.call(e)}var c=e("/makeup-expander$0.3.0/index"),i=e("/makeup-roving-tabindex$0.0.3/index"),l=e("/makeup-key-emitter$0.0.2/index"),u=e("/makeup-prevent-scroll-keys$0.0.1/index");a(document.querySelectorAll('.btn:not([aria-disabled="true"])')).forEach(function(e,t){e.addEventListener("click",function(e){alert("You clicked "+this)})}),a(document.querySelectorAll(".expand-btn-example")).forEach(function(e,t){e.addEventListener("click",function(e){var t="true"===this.getAttribute("aria-expanded");this.setAttribute("aria-expanded",!t)})}),a(document.querySelectorAll("[role=menu]")).forEach(function(e,t){i.createLinear(e,"[role^=menuitem]",{autoReset:0})}),a(document.querySelectorAll(".menu, .fake-menu")).forEach(function(e,t){new c(e,{autoCollapse:!0,click:!0,focusManagement:"interactive",hostSelector:".expand-btn",contentSelector:".menu__items, .fake-menu__items"});l.addKeyDown(e),e.addEventListener("escapeKeyDown",function(){this.querySelector(".expand-btn").focus()})}),a(document.querySelectorAll("[role^=menuitem]")).forEach(function(e,t){u.add(e)}),a(document.querySelectorAll(".listbox")).forEach(function(e,t){var n,o=new c(e,{autoCollapse:!0,click:!0,hostSelector:"input[role=combobox]",hostContainerClass:"listbox__control",contentSelector:".listbox__options",spacebar:!0}),r=e.querySelector("input[role=combobox]"),i=a(e.querySelectorAll("[role=option]")),d=e.querySelector("[role=option][aria-selected=true]"),s=i.length,f=function(e){d.setAttribute("aria-selected","false"),n=e,r.value="Option "+(n+1),d=i[n],d.setAttribute("aria-selected","true")};i.forEach(function(e,t){e.dataset.listboxIndex=t,e.addEventListener("click",function(e){f(parseInt(this.dataset.listboxIndex,10))})}),n=parseInt(d.dataset.listboxIndex,10),l.addKeyDown(e),u.add(e),e.addEventListener("escapeKeyDown",function(){o.collapse(),r.focus()}),e.addEventListener("arrowDownKeyDown",function(e){n0&&f(n-1)})})}); -$_mod.run("/@ebay/skin$3.3.2/docs/src/js/ds6/main"); \ No newline at end of file +$_mod.def("/@ebay/skin$3.4.0/docs/src/js/ds6/main",function(e,t,n,o,r){function a(e){return Array.prototype.slice.call(e)}var c=e("/makeup-expander$0.3.0/index"),i=e("/makeup-roving-tabindex$0.0.3/index"),l=e("/makeup-key-emitter$0.0.2/index"),u=e("/makeup-prevent-scroll-keys$0.0.1/index");a(document.querySelectorAll('.btn:not([aria-disabled="true"])')).forEach(function(e,t){e.addEventListener("click",function(e){alert("You clicked "+this)})}),a(document.querySelectorAll(".expand-btn-example")).forEach(function(e,t){e.addEventListener("click",function(e){var t="true"===this.getAttribute("aria-expanded");this.setAttribute("aria-expanded",!t)})}),a(document.querySelectorAll("[role=menu]")).forEach(function(e,t){i.createLinear(e,"[role^=menuitem]",{autoReset:0})}),a(document.querySelectorAll(".menu, .fake-menu")).forEach(function(e,t){new c(e,{autoCollapse:!0,click:!0,focusManagement:"interactive",hostSelector:".expand-btn",contentSelector:".menu__items, .fake-menu__items"});l.addKeyDown(e),e.addEventListener("escapeKeyDown",function(){this.querySelector(".expand-btn").focus()})}),a(document.querySelectorAll("[role^=menuitem]")).forEach(function(e,t){u.add(e)}),a(document.querySelectorAll(".listbox")).forEach(function(e,t){var n,o=new c(e,{autoCollapse:!0,click:!0,hostSelector:"input[role=combobox]",hostContainerClass:"listbox__control",contentSelector:".listbox__options",spacebar:!0}),r=e.querySelector("input[role=combobox]"),i=a(e.querySelectorAll("[role=option]")),s=e.querySelector("[role=option][aria-selected=true]"),d=i.length,f=function(e){s.setAttribute("aria-selected","false"),n=e,r.value="Option "+(n+1),s=i[n],s.setAttribute("aria-selected","true")};i.forEach(function(e,t){e.dataset.listboxIndex=t,e.addEventListener("click",function(e){f(parseInt(this.dataset.listboxIndex,10)),o.collapse(),r.focus()})}),n=parseInt(s.dataset.listboxIndex,10),l.addKeyDown(e),u.add(e),e.addEventListener("escapeKeyDown",function(){o.collapse(),r.focus()}),e.addEventListener("arrowDownKeyDown",function(e){n0&&f(n-1)})})}); +$_mod.run("/@ebay/skin$3.4.0/docs/src/js/ds6/main"); \ No newline at end of file diff --git a/docs/static/ds6/skin-full.css b/docs/static/ds6/skin-full.css new file mode 100644 index 000000000..45fecdcf9 --- /dev/null +++ b/docs/static/ds6/skin-full.css @@ -0,0 +1,839 @@ +/*! +Skin v3.3.1 +Copyright 2017 eBay! Inc. All rights reserved. +Licensed under the BSD License. +https://github.com/eBay/skin/blob/master/LICENSE.txt" +*/ +@font-face { + font-family: "Market Sans"; + src: url('https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/MarketSans-Regular-WebS.eot'); + src: url('https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/MarketSans-Regular-WebS.eot?#iefix') format('embedded-opentype'), url('https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/MarketSans-Regular-WebS.woff2') format('woff2'), url('https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/MarketSans-Regular-WebS.woff') format('woff'), url('https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/MarketSans-Regular-WebS.ttf') format('truetype'), url('https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/MarketSans-Regular-WebS.svg#MarketSans-Regular-WebS') format('svg'); + font-weight: normal; + font-style: normal; + /* csslint ignore:start */ + font-display: optional; + /* csslint ignore:end */ +} +@font-face { + font-family: "Market Sans"; + src: url('https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/MarketSans-SemiBold-WebS.eot'); + src: url('https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/MarketSans-SemiBold-WebS.eot?#iefix') format('embedded-opentype'), url('https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/MarketSans-SemiBold-WebS.woff2') format('woff2'), url('https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/MarketSans-SemiBold-WebS.woff') format('woff'), url('https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/MarketSans-SemiBold-WebS.ttf') format('truetype'), url('https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/MarketSans-SemiBold-WebS.svg#MarketSans-SemiBold-WebS') format('svg'); + font-weight: bold; + font-style: normal; + /* csslint ignore:start */ + font-display: optional; + /* csslint ignore:end */ +} +body { + background-color: #f5f5f5; + color: #111820; + font-family: "Helvetica Neue", Helvetica, Arial, Roboto, sans-serif; + font-size: 0.875rem; +} +a { + color: #006efc; +} +a:visited { + color: #6a4fcc; +} +body { + font-family: "Market Sans", "Helvetica Neue", Helvetica, Arial, Roboto, sans-serif; +} +button.btn, +button.expand-btn, +a.fake-btn, +a.cta-btn { + font-family: inherit; + font-size: 16px; + height: 40px; + line-height: 40px; + margin: 0; + padding: 0 16px; + text-align: center; + vertical-align: middle; +} +a.fake-btn, +a.cta-btn { + box-sizing: border-box; + display: inline-block; + text-decoration: none; +} +button.expand-btn[aria-expanded="true"] .expand-btn__icon { + -webkit-transform: rotate(180deg); + transform: rotate(180deg); +} +button.expand-btn[disabled] span.expand-btn__icon { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%275%27%3E%3Cpath%20fill%3D%22%23c7c7c7%22%20d%3D%22M0.758714126%2C0.14644663%20C0.585147774%2C-0.048815516%200.303741117%2C-0.0488155166%200.130174765%2C0.146446629%20C-0.0433915877%2C0.341708774%20-0.0433915882%2C0.658291264%200.130174763%2C0.85355341%20L3.68573029%2C4.85355339%20C3.85929664%2C5.04881554%204.1407033%2C5.04881554%204.31426965%2C4.85355339%20L7.86982523%2C0.853553392%20C8.04339159%2C0.658291247%208.04339159%2C0.341708758%207.86982524%2C0.146446611%20C7.69625889%2C-0.0488155358%207.41485223%2C-0.0488155372%207.24128588%2C0.146446608%20L3.99999997%2C3.79289322%20L0.758714126%2C0.14644663%20Z%22%3E%3C/path%3E%3C/svg%3E'); +} +a.cta-btn { + background-color: #f5f5f5; + border-style: solid; + border-width: 1px; + color: #10299c; +} +a.cta-btn:focus, +a.cta-btn:hover { + background-color: #10299c; + border-color: #10299c; + color: #f5f5f5; +} +a.cta-btn:focus { + outline: 0 none; +} +button.btn--small, +button.expand-btn--small, +a.fake-btn--small { + height: 32px; + line-height: 32px; +} +button.btn--large, +button.expand-btn--large, +a.fake-btn--large, +a.cta-btn--large { + height: 48px; + line-height: 48px; +} +button.btn--primary, +a.fake-btn--primary { + background-color: #006efc; + border: 1px solid #006efc; + color: white; + font-weight: bold; +} +button.btn--primary:focus, +a.fake-btn--primary:focus, +button.btn--primary:hover, +a.fake-btn--primary:hover { + background-color: #4295ff; + border-color: #4295ff; +} +button.btn--primary:active, +a.fake-btn--primary:active { + background-color: #10299c; + border-color: #10299c; +} +button.btn--primary[disabled], +button.btn--primary[aria-disabled="true"] { + background-color: #c7c7c7; + border-color: #c7c7c7; + color: white; +} +a.fake-btn--primary:visited { + color: white; +} +a.fake-btn--primary:not([href]), +a.fake-btn--primary[aria-disabled="true"] { + background-color: #c7c7c7; + border-color: #c7c7c7; + color: white; +} +button.btn--secondary, +button.expand-btn, +a.fake-btn--secondary { + background-color: white; + border: 1px solid #c7c7c7; + color: #006efc; +} +button.btn--secondary:focus, +button.expand-btn:focus, +a.fake-btn--secondary:focus, +button.btn--secondary:hover, +button.expand-btn:hover, +a.fake-btn--secondary:hover { + border-color: #4295ff; +} +button.btn--secondary:active, +button.expand-btn:active, +a.fake-btn--secondary:active { + border-color: #10299c; + color: #10299c; +} +button.btn--secondary[disabled], +button.expand-btn[disabled], +button.btn--secondary[aria-disabled="true"], +button.expand-btn[aria-disabled="true"] { + border-color: #c7c7c7; + color: #c7c7c7; +} +a.fake-btn--secondary:visited { + color: #006efc; +} +a.fake-btn--secondary:not([href]), +a.fake-btn--secondary[aria-disabled="true"] { + border-color: #c7c7c7; + color: #c7c7c7; +} +a.cta-btn--p002-blue { + background-color: #006efc; + border-color: #e1fbff; + color: #e1fbff; +} +a.cta-btn--p002-blue:visited { + color: #e1fbff; +} +a.cta-btn--p002-blue:focus, +a.cta-btn--p002-blue:hover { + background-color: #e1fbff; + border-color: #e1fbff; + color: #006efc; +} +a.cta-btn--p002-blue:active { + background-color: #006efc; + border-color: #006efc; + color: white; +} +a.cta-btn--p002-blue:not([href]) { + background-color: #c7c7c7; + border-color: #c7c7c7; + color: #f5f5f5; +} +a.cta-btn--p012-red { + background-color: #ff5151; + border-color: #ffe7ec; + color: #ffe7ec; +} +a.cta-btn--p012-red:visited { + color: #ffe7ec; +} +a.cta-btn--p012-red:focus, +a.cta-btn--p012-red:hover { + background-color: #ffe7ec; + border-color: #ffe7ec; + color: #ff5151; +} +a.cta-btn--p012-red:active { + background-color: #c9002c; + border-color: #c9002c; + color: #ffe7ec; +} +a.cta-btn--p012-red:not([href]) { + background-color: #c7c7c7; + border-color: #c7c7c7; + color: #f5f5f5; +} +a.cta-btn--purple { + background-color: #6a4fcc; + color: #ecefff; +} +a.cta-btn--purple:visited { + color: #ecefff; +} +a.cta-btn--purple:focus, +a.cta-btn--purple:hover { + background-color: #e5e5e5; + border-color: #e5e5e5; + color: #6a4fcc; +} +a.cta-btn--purple:active { + background-color: #3c0085; + border-color: #3c0085; + color: white; +} +a.cta-btn--purple:not([href]) { + background-color: #c7c7c7; + border-color: #c7c7c7; + color: #f5f5f5; +} +button.btn--fluid, +button.expand-btn--fluid, +a.fake-btn--fluid, +a.cta-btn--fluid { + width: 100%; +} +.btn__cell, +.fake-btn__cell, +.cta-btn__cell, +.expand-btn__cell { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + height: 100%; + width: 100%; +} +.btn__cell, +.fake-btn__cell, +.cta-btn__cell { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} +.expand-btn__cell { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; +} +.btn__icon, +.fake-btn__icon, +.cta-btn__icon, +.expand-btn__icon { + -ms-flex-item-align: center; + -ms-grid-row-align: center; + align-self: center; + line-height: normal; +} +svg.cta-btn__icon { + color: inherit; + fill: currentColor; + height: 10px; + stroke: currentColor; + stroke-width: 0; + width: 9.75px; +} +.btn__icon:first-child, +.fake-btn__icon:first-child, +.cta-btn__icon:first-child, +.expand-btn__icon:first-child { + margin-right: 8px; +} +.btn__icon:last-child, +.fake-btn__icon:last-child, +.cta-btn__icon:last-child, +.expand-btn__icon:last-child { + margin-left: 8px; +} +span.expand-btn__icon { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%275%27%3E%3Cpath%20fill%3D%22%230654ba%22%20d%3D%22M0.758714126%2C0.14644663%20C0.585147774%2C-0.048815516%200.303741117%2C-0.0488155166%200.130174765%2C0.146446629%20C-0.0433915877%2C0.341708774%20-0.0433915882%2C0.658291264%200.130174763%2C0.85355341%20L3.68573029%2C4.85355339%20C3.85929664%2C5.04881554%204.1407033%2C5.04881554%204.31426965%2C4.85355339%20L7.86982523%2C0.853553392%20C8.04339159%2C0.658291247%208.04339159%2C0.341708758%207.86982524%2C0.146446611%20C7.69625889%2C-0.0488155358%207.41485223%2C-0.0488155372%207.24128588%2C0.146446608%20L3.99999997%2C3.79289322%20L0.758714126%2C0.14644663%20Z%22%3E%3C/path%3E%3C/svg%3E'); + background-repeat: no-repeat; + background-position-y: center; + -ms-flex-negative: 0; + flex-shrink: 0; + height: 100%; + margin-left: 8px; + width: 8px; +} +.color-text-default { + color: #111820; +} +.color-text-secondary { + color: #767676; +} +.color-link-default { + color: #006efc; +} +.color-link-visited { + color: #6a4fcc; +} +.color-information-background { + background-color: #e1fbff; +} +.color-warning-background { + background-color: #fffaab; +} +.color-confirmation-text { + color: #147133; +} +.color-confirmation-background { + background-color: #71c63e; +} +.color-critical-text { + color: #c9002c; +} +.color-critical-background { + background-color: #ffe7ec; +} +svg.icon { + display: inline-block; + fill: currentColor; + stroke: currentColor; + stroke-width: 0; + vertical-align: middle; +} +svg.icon--chevron-dropdown { + height: 5px; + width: 8px; +} +svg.icon--arrow-cta { + height: 10px; + width: 9.75px; +} +svg.icon--hamburger { + height: 14px; + width: 12px; +} +.menu, +.fake-menu, +.listbox { + line-height: normal; + position: relative; +} +span.menu, +span.fake-menu, +span.listbox { + display: inline-block; +} +.menu .expand-btn[aria-expanded="true"], +.fake-menu .expand-btn[aria-expanded="true"], +.listbox .expand-btn[aria-expanded="true"] { + border-bottom: 0; +} +.menu .expand-btn[aria-expanded="true"] ~ .menu__items[role="menu"], +.listbox .expand-btn[aria-expanded="true"] ~ .listbox__options[role="listbox"], +.fake-menu .expand-btn[aria-expanded="true"] ~ .fake-menu__items { + display: block; +} +.menu .expand-btn ~ .menu__items[role="menu"], +.listbox .expand-btn ~ .listbox__options[role="listbox"], +.fake-menu .expand-btn ~ .fake-menu__items { + display: none; + position: absolute; + z-index: 1; +} +.menu__items[role="menu"], +.listbox__options[role="listbox"], +.fake-menu__items { + background-color: #ffffff; + border: 1px solid #c7c7c7; + box-sizing: border-box; + width: 100%; +} +span.menu__items[role="menu"], +div.listbox__options[role="listbox"], +span.fake-menu__items { + display: inline-block; +} +.fake-menu__items { + list-style-type: none; + margin: 0; +} +div.menu__item[role^="menuitem"], +div.listbox__option[role^="option"], +a.fake-menu__item, +button.fake-menu__item { + background-color: #ffffff; + box-sizing: border-box; + cursor: pointer; + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + font-size: 0.875rem; + height: 100%; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + line-height: 2.5; + padding: 0 16px; + width: 100%; +} +div.menu__item[role^="menuitem"] span:not([class*="menu__status"]), +div.listbox__option[role^="option"] span:not([class*="menu__status"]), +a.fake-menu__item span:not([class*="menu__status"]), +button.fake-menu__item span:not([class*="menu__status"]), +div.menu__item[role^="menuitem"] span:not([class*="listbox__status"]), +div.listbox__option[role^="option"] span:not([class*="listbox__status"]), +a.fake-menu__item span:not([class*="listbox__status"]), +button.fake-menu__item span:not([class*="listbox__status"]) { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +div.menu__item[role^="menuitem"]:focus, +div.listbox__option[role^="option"]:focus, +a.fake-menu__item:focus, +button.fake-menu__item:focus, +div.menu__item[role^="menuitem"]:hover, +div.listbox__option[role^="option"]:hover, +a.fake-menu__item:hover, +button.fake-menu__item:hover { + background-color: #f5f5f5; +} +div.menu__item[role^="menuitem"]:focus, +div.listbox__option[role^="option"]:focus, +a.fake-menu__item:focus, +button.fake-menu__item:focus { + outline: 1px solid #c7c7c7; +} +div.menu__item[role^="menuitem"]:active, +div.listbox__option[role^="option"]:active, +a.fake-menu__item:active, +button.fake-menu__item:active { + font-weight: bold; +} +div.menu__item[role^="menuitem"]:active .menu__status, +div.listbox__option[role^="option"]:active .menu__status, +a.fake-menu__item:active .menu__status, +button.fake-menu__item:active .menu__status, +div.menu__item[role^="menuitem"]:active .listbox__status, +div.listbox__option[role^="option"]:active .listbox__status, +a.fake-menu__item:active .listbox__status, +button.fake-menu__item:active .listbox__status, +div.menu__item[role^="menuitem"]:active .fake-menu__status, +div.listbox__option[role^="option"]:active .fake-menu__status, +a.fake-menu__item:active .fake-menu__status, +button.fake-menu__item:active .fake-menu__status { + color: #c7c7c7; +} +div.menu__item[role^="menuitem"]:not(:last-child), +div.listbox__option[role^="option"]:not(:last-child), +a.fake-menu__item:not(:last-child), +button.fake-menu__item:not(:last-child) { + margin-bottom: 1px; +} +div.menu__item[role^="menuitem"][aria-checked="true"] .menu__status, +div.listbox__option[role^="option"][aria-selected="true"] .menu__status, +div.menu__item[role^="menuitem"][aria-checked="true"] .listbox__status, +div.listbox__option[role^="option"][aria-selected="true"] .listbox__status { + visibility: visible; +} +a.fake-menu__item { + color: #111820; + text-decoration: none; +} +a.fake-menu__item:hover, +a.fake-menu__item:focus { + text-decoration: underline; +} +a.fake-menu__item[aria-current="page"] .fake-menu__status { + visibility: visible; +} +button.fake-menu__item { + background-color: #ffffff; + border: 0; + color: #111820; + display: block; + text-align: left; +} +.menu__status, +.listbox__status, +.fake-menu__status { + -ms-flex-item-align: center; + -ms-grid-row-align: center; + align-self: center; + color: #111820; + fill: currentColor; + height: 1em; + stroke: currentColor; + stroke-width: 0; + visibility: hidden; + width: 1em; +} +span.menu__status, +span.listbox__status, +span.fake-menu__status { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%277%27%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23111820%22%20d%3D%22M0%203.70913219%202.21049749%206%208%200%22%3E%3C/path%3E%3C/svg%3E'); + background-position: right center; + background-repeat: no-repeat; + height: 1em; + -ms-flex-negative: 0; + flex-shrink: 0; + width: 1em; +} +.menu__items--grow[role="menu"], +.menu__items--grow-reverse[role="menu"], +.listbox__options--grow[role="listbox"], +.listbox__options--grow-reverse[role="listbox"], +.fake-menu__items--grow, +.fake-menu__items--grow-reverse { + min-width: calc(100%); + width: auto; +} +.menu__items--grow-reverse[role="menu"], +.listbox__options--grow-reverse[role="listbox"], +.fake-menu__items--grow-reverse { + right: 0; +} +.listbox { + display: inline-block; + box-sizing: border-box; + width: 100%; +} +.listbox:hover > .listbox__control > input { + border-color: #4295ff; +} +.listbox__control > input { + background-color: #ffffff; + border: 1px solid #c7c7c7; + box-sizing: border-box; + color: transparent; + cursor: default; + font-family: inherit; + font-size: 16px; + height: 40px; + padding: 0 16px; + text-shadow: 0 0 0 #006efc; + vertical-align: middle; + width: 100%; +} +.listbox__control > input:focus { + border-color: #4295ff; +} +.listbox__control > input[disabled], +.listbox__control > input[aria-disabled="true"] { + border-color: #c7c7c7; + color: transparent; + text-shadow: 0 0 0 #c7c7c7; +} +.listbox__control > input[aria-expanded="true"] { + border-bottom: 0; + padding-bottom: 1px; +} +.listbox__control > input::-moz-selection { + background: #ffffff; +} +.listbox__control > input::selection { + background: #ffffff; +} +.listbox__control + div.listbox__options { + display: none; + position: absolute; + z-index: 1; +} +.listbox__control--expanded + div.listbox__options { + display: block; +} +span.listbox__arrow { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%275%27%3E%3Cpath%20fill%3D%22%230654ba%22%20d%3D%22M0.758714126%2C0.14644663%20C0.585147774%2C-0.048815516%200.303741117%2C-0.0488155166%200.130174765%2C0.146446629%20C-0.0433915877%2C0.341708774%20-0.0433915882%2C0.658291264%200.130174763%2C0.85355341%20L3.68573029%2C4.85355339%20C3.85929664%2C5.04881554%204.1407033%2C5.04881554%204.31426965%2C4.85355339%20L7.86982523%2C0.853553392%20C8.04339159%2C0.658291247%208.04339159%2C0.341708758%207.86982524%2C0.146446611%20C7.69625889%2C-0.0488155358%207.41485223%2C-0.0488155372%207.24128588%2C0.146446608%20L3.99999997%2C3.79289322%20L0.758714126%2C0.14644663%20Z%22%3E%3C/path%3E%3C/svg%3E'); + background-repeat: no-repeat; + background-position: right center; + content: ""; + height: 40px; + margin-left: 8px; + position: absolute; + right: 16px; + top: 0; + width: 8px; +} +.listbox__control--expanded span.listbox__arrow { + -webkit-transform: rotate(180deg); + transform: rotate(180deg); +} +.page-notice { + background-color: #ffffff; + border-style: solid; + border-width: 4px; + font-size: 0.875rem; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + margin: 8px 0; +} +div[role="region"].page-notice, +section.page-notice { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +span[role="region"].page-notice { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; +} +.page-notice--confirmation { + border-color: #71c63e; +} +.page-notice--priority { + border-color: #ff5151; +} +.page-notice--info { + border-color: #4295ff; +} +.page-notice__status { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: white; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + padding: 16px; +} +.page-notice__content p { + margin: 16px; +} +.page-notice--confirmation .page-notice__status { + background-color: #71c63e; +} +.page-notice--priority .page-notice__status { + background-color: #ff5151; +} +.page-notice--info .page-notice__status { + background-color: #4295ff; +} +.inline-notice { + margin: 8px 0; +} +.inline-notice p { + margin: 4px 0; +} +.inline-notice p:first-of-type { + font-weight: bold; +} +div.inline-notice { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +span.inline-notice { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; +} +/* +.inline-notice__cell--no-wrap { + align-self: center; + p { + margin: 0; + } +} +*/ +.page-notice__status span { + background-repeat: no-repeat; + background-size: contain; + display: inline-block; + height: 28px; + margin: -4px 0 0 0; + width: 28px; +} +.inline-notice__icon span { + background-repeat: no-repeat; + background-size: contain; + display: inline-block; + height: 24px; + margin: 1px 8px 0 0; + width: 24px; +} +.page-notice--confirmation .page-notice__status span { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2729%27%20height%3D%2729%27%3E%3Ccircle%20cx%3D%2214.5%22%20cy%3D%2214.5%22%20r%3D%2214.5%22%20fill%3D%22%23ffffff%22%3E%3C/circle%3E%0A%3Cpath%20fill%3D%22%23ffffff%22%20stroke%3D%22%2371c63e%22%20stroke-width%3D%222%22%20d%3D%22M5.548%2015.01l5.773%206.286L21.522%209.824%22%3E%3C/path%3E%3C/svg%3E'); +} +.inline-notice--confirmation .inline-notice__icon span { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2729%27%20height%3D%2729%27%3E%3Ccircle%20cx%3D%2214.5%22%20cy%3D%2214.5%22%20r%3D%2214.5%22%20fill%3D%22%2371c63e%22%3E%3C/circle%3E%0A%3Cpath%20fill%3D%22%2371c63e%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20d%3D%22M5.548%2015.01l5.773%206.286L21.522%209.824%22%3E%3C/path%3E%3C/svg%3E'); +} +.page-notice--priority .page-notice__status span { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2729%27%20height%3D%2729%27%3E%3Ccircle%20fill%3D%22%23ffffff%22%20cx%3D%2214.5%22%20cy%3D%2214.5%22%20r%3D%2214.5%22%3E%3C/circle%3E%0A%3Cpath%20fill%3D%22%23ff5151%22%20d%3D%22M14.5%2C18h0A1.5%2C1.5%2C0%2C0%2C1%2C13%2C16.5v-9A1.5%2C1.5%2C0%2C0%2C1%2C14.5%2C6h0A1.5%2C1.5%2C0%2C0%2C1%2C16%2C7.5v9A1.5%2C1.5%2C0%2C0%2C1%2C14.5%2C18Z%22%3E%3C/path%3E%0A%3Cpath%20fill%3D%22%23ff5151%22%20d%3D%22M14.5%2C23h0A1.5%2C1.5%2C0%2C0%2C1%2C13%2C21.5h0A1.5%2C1.5%2C0%2C0%2C1%2C14.5%2C20h0A1.5%2C1.5%2C0%2C0%2C1%2C16%2C21.5h0A1.5%2C1.5%2C0%2C0%2C1%2C14.5%2C23Z%22%3E%3C/path%3E%3C/svg%3E'); +} +.inline-notice--priority .inline-notice__icon span { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2729%27%20height%3D%2729%27%3E%3Ccircle%20fill%3D%22%23ff5151%22%20cx%3D%2214.5%22%20cy%3D%2214.5%22%20r%3D%2214.5%22%3E%3C/circle%3E%0A%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M14.5%2C18h0A1.5%2C1.5%2C0%2C0%2C1%2C13%2C16.5v-9A1.5%2C1.5%2C0%2C0%2C1%2C14.5%2C6h0A1.5%2C1.5%2C0%2C0%2C1%2C16%2C7.5v9A1.5%2C1.5%2C0%2C0%2C1%2C14.5%2C18Z%22%3E%3C/path%3E%0A%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M14.5%2C23h0A1.5%2C1.5%2C0%2C0%2C1%2C13%2C21.5h0A1.5%2C1.5%2C0%2C0%2C1%2C14.5%2C20h0A1.5%2C1.5%2C0%2C0%2C1%2C16%2C21.5h0A1.5%2C1.5%2C0%2C0%2C1%2C14.5%2C23Z%22%3E%3C/path%3E%3C/svg%3E'); +} +.page-notice--info .page-notice__status span { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2729%27%20height%3D%2729%27%3E%3Ccircle%20cx%3D%2214.5%22%20cy%3D%2214.5%22%20r%3D%2214.5%22%20fill%3D%22%23ffffff%22%3E%3C/circle%3E%3Crect%20width%3D%223%22%20height%3D%2212%22%20x%3D%2213%22%20y%3D%2211%22%20fill%3D%22%234295ff%22%20rx%3D%221.5%22%3E%3C/rect%3E%3Crect%20width%3D%223%22%20height%3D%223%22%20x%3D%2213%22%20y%3D%226%22%20fill%3D%22%234295ff%22%20rx%3D%221.5%22%3E%3C/rect%3E%3C/svg%3E'); +} +.inline-notice--info .inline-notice__icon span { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2729%27%20height%3D%2729%27%3E%3Ccircle%20cx%3D%2214.5%22%20cy%3D%2214.5%22%20r%3D%2214.5%22%20fill%3D%22%234295ff%22%3E%3C/circle%3E%3Crect%20width%3D%223%22%20height%3D%2212%22%20x%3D%2213%22%20y%3D%2211%22%20fill%3D%22%23ffffff%22%20rx%3D%221.5%22%3E%3C/rect%3E%3Crect%20width%3D%223%22%20height%3D%223%22%20x%3D%2213%22%20y%3D%226%22%20fill%3D%22%23ffffff%22%20rx%3D%221.5%22%3E%3C/rect%3E%3C/svg%3E'); +} +.inline-notice__icon svg { + display: inline-block; + fill: currentColor; + stroke: currentColor; + stroke-width: 0; + height: 28px; + margin: 0 4px; + width: 28px; +} +.flyout-notice { + background-color: #006efc; + color: white; + padding: 8px; + position: absolute; + word-wrap: break-word; +} +.flyout-notice a { + color: white; +} +.flyout-notice__pointer-top { + border-bottom-style: solid; + border-bottom-width: 12px; + border-left: 12px solid transparent; + border-right: 12px solid transparent; + bottom: 100%; + color: #006efc; + left: calc(42%); + position: absolute; +} +.flyout-notice__pointer-bottom { + border-top-style: solid; + border-top-width: 12px; + border-left: 12px solid transparent; + border-right: 12px solid transparent; + top: 100%; + color: #006efc; + left: calc(42%); + position: absolute; +} +.flyout-notice__pointer-right { + border-left-style: solid; + border-left-width: 12px; + border-bottom: 12px solid transparent; + border-top: 12px solid transparent; + left: 100%; + color: #006efc; + top: calc(42%); + position: absolute; +} +.flyout-notice__pointer-left { + border-right-style: solid; + border-right-width: 12px; + border-bottom: 12px solid transparent; + border-top: 12px solid transparent; + right: 100%; + color: #006efc; + top: calc(42%); + position: absolute; +} +.flyout-notice a { + outline-color: white; +} +.giant-text-2 { + font-size: 2.25rem; + font-weight: 700; + line-height: 46px; +} +.giant-text-1 { + font-size: 1.8625rem; + font-weight: 700; + line-height: 40px; +} +.large-text-2 { + font-size: 1.5rem; + line-height: 32px; +} +.large-text-1 { + font-size: 1.25rem; + line-height: 28px; +} +.medium-text { + font-size: 1rem; + line-height: 24px; +} +.regular-text { + font-size: 0.875rem; + line-height: 20px; +} +.small-text { + font-size: 0.75rem; + line-height: 18px; +} +.bold-text { + font-weight: 700; +} +.secondary-text { + color: #767676; +} +.clearfix::before, +.clearfix::after { + display: table; + content: " "; + line-height: 0; +} +.clearfix::after { + clear: both; +} +.clipped { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; +} +.clipped--stealth:focus { + clip: auto; + -webkit-clip-path: none; + clip-path: none; + height: auto; + overflow: visible; + white-space: normal; + width: auto; +} diff --git a/docs/static/ds6/skin-large.css b/docs/static/ds6/skin-large.css new file mode 100644 index 000000000..8a71d8236 --- /dev/null +++ b/docs/static/ds6/skin-large.css @@ -0,0 +1,6 @@ +/*! +Skin v3.3.1 +Copyright 2017 eBay! Inc. All rights reserved. +Licensed under the BSD License. +https://github.com/eBay/skin/blob/master/LICENSE.txt" +*/ diff --git a/docs/static/ds6/skin.css b/docs/static/ds6/skin.css index 735d0a835..e670473f9 100644 --- a/docs/static/ds6/skin.css +++ b/docs/static/ds6/skin.css @@ -1,5 +1,5 @@ /*! -Skin v3.3.2 +Skin v3.4.0 Copyright 2017 eBay! Inc. All rights reserved. Licensed under the BSD License. https://github.com/eBay/skin/blob/master/LICENSE.txt" @@ -25,7 +25,7 @@ https://github.com/eBay/skin/blob/master/LICENSE.txt" /* csslint ignore:end */ } body { - background-color: #f5f5f5; + background-color: #ffffff; color: #111820; font-family: "Helvetica Neue", Helvetica, Arial, Roboto, sans-serif; font-size: 0.875rem; @@ -58,15 +58,8 @@ a.cta-btn { display: inline-block; text-decoration: none; } -button.expand-btn[aria-expanded="true"] .expand-btn__icon { - -webkit-transform: rotate(180deg); - transform: rotate(180deg); -} -button.expand-btn[disabled] span.expand-btn__icon { - background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%275%27%3E%3Cpath%20fill%3D%22%23c7c7c7%22%20d%3D%22M0.758714126%2C0.14644663%20C0.585147774%2C-0.048815516%200.303741117%2C-0.0488155166%200.130174765%2C0.146446629%20C-0.0433915877%2C0.341708774%20-0.0433915882%2C0.658291264%200.130174763%2C0.85355341%20L3.68573029%2C4.85355339%20C3.85929664%2C5.04881554%204.1407033%2C5.04881554%204.31426965%2C4.85355339%20L7.86982523%2C0.853553392%20C8.04339159%2C0.658291247%208.04339159%2C0.341708758%207.86982524%2C0.146446611%20C7.69625889%2C-0.0488155358%207.41485223%2C-0.0488155372%207.24128588%2C0.146446608%20L3.99999997%2C3.79289322%20L0.758714126%2C0.14644663%20Z%22%3E%3C/path%3E%3C/svg%3E'); -} a.cta-btn { - background-color: #f5f5f5; + background-color: #ffffff; border-style: solid; border-width: 1px; color: #10299c; @@ -75,7 +68,7 @@ a.cta-btn:focus, a.cta-btn:hover { background-color: #10299c; border-color: #10299c; - color: #f5f5f5; + color: #ffffff; } a.cta-btn:focus { outline: 0 none; @@ -132,15 +125,6 @@ button.expand-btn, a.fake-btn--secondary { background-color: white; border: 1px solid #c7c7c7; - color: #006efc; -} -button.btn--secondary:focus, -button.expand-btn:focus, -a.fake-btn--secondary:focus, -button.btn--secondary:hover, -button.expand-btn:hover, -a.fake-btn--secondary:hover { - border-color: #4295ff; } button.btn--secondary:active, button.expand-btn:active, @@ -148,6 +132,26 @@ a.fake-btn--secondary:active { border-color: #10299c; color: #10299c; } +button.btn-secondary, +a.fake-btn--secondary { + color: #006efc; +} +button.btn-secondary:focus, +a.fake-btn--secondary:focus, +button.btn-secondary:hover, +a.fake-btn--secondary:hover { + border-color: #4295ff; +} +button.expand-btn { + color: #111820; +} +button.expand-btn[aria-expanded="true"] .expand-btn__icon { + -webkit-transform: rotate(180deg); + transform: rotate(180deg); +} +button.expand-btn[disabled] span.expand-btn__icon { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%275%27%3E%3Cpath%20fill%3D%22%23c7c7c7%22%20d%3D%22M0.758714126%2C0.14644663%20C0.585147774%2C-0.048815516%200.303741117%2C-0.0488155166%200.130174765%2C0.146446629%20C-0.0433915877%2C0.341708774%20-0.0433915882%2C0.658291264%200.130174763%2C0.85355341%20L3.68573029%2C4.85355339%20C3.85929664%2C5.04881554%204.1407033%2C5.04881554%204.31426965%2C4.85355339%20L7.86982523%2C0.853553392%20C8.04339159%2C0.658291247%208.04339159%2C0.341708758%207.86982524%2C0.146446611%20C7.69625889%2C-0.0488155358%207.41485223%2C-0.0488155372%207.24128588%2C0.146446608%20L3.99999997%2C3.79289322%20L0.758714126%2C0.14644663%20Z%22%3E%3C/path%3E%3C/svg%3E'); +} button.btn--secondary[disabled], button.expand-btn[disabled], button.btn--secondary[aria-disabled="true"], @@ -292,7 +296,7 @@ svg.cta-btn__icon { margin-left: 8px; } span.expand-btn__icon { - background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%275%27%3E%3Cpath%20fill%3D%22%230654ba%22%20d%3D%22M0.758714126%2C0.14644663%20C0.585147774%2C-0.048815516%200.303741117%2C-0.0488155166%200.130174765%2C0.146446629%20C-0.0433915877%2C0.341708774%20-0.0433915882%2C0.658291264%200.130174763%2C0.85355341%20L3.68573029%2C4.85355339%20C3.85929664%2C5.04881554%204.1407033%2C5.04881554%204.31426965%2C4.85355339%20L7.86982523%2C0.853553392%20C8.04339159%2C0.658291247%208.04339159%2C0.341708758%207.86982524%2C0.146446611%20C7.69625889%2C-0.0488155358%207.41485223%2C-0.0488155372%207.24128588%2C0.146446608%20L3.99999997%2C3.79289322%20L0.758714126%2C0.14644663%20Z%22%3E%3C/path%3E%3C/svg%3E'); + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%275%27%3E%3Cpath%20fill%3D%22%2311820%22%20d%3D%22M0.758714126%2C0.14644663%20C0.585147774%2C-0.048815516%200.303741117%2C-0.0488155166%200.130174765%2C0.146446629%20C-0.0433915877%2C0.341708774%20-0.0433915882%2C0.658291264%200.130174763%2C0.85355341%20L3.68573029%2C4.85355339%20C3.85929664%2C5.04881554%204.1407033%2C5.04881554%204.31426965%2C4.85355339%20L7.86982523%2C0.853553392%20C8.04339159%2C0.658291247%208.04339159%2C0.341708758%207.86982524%2C0.146446611%20C7.69625889%2C-0.0488155358%207.41485223%2C-0.0488155372%207.24128588%2C0.146446608%20L3.99999997%2C3.79289322%20L0.758714126%2C0.14644663%20Z%22%3E%3C/path%3E%3C/svg%3E'); background-repeat: no-repeat; background-position-y: center; -ms-flex-negative: 0; @@ -361,6 +365,16 @@ span.fake-menu, span.listbox { display: inline-block; } +.menu button.expand-btn--borderless, +.fake-menu button.expand-btn--borderless { + border: 0; + padding-left: 0; + vertical-align: initial; +} +.menu button.expand-btn--borderless[aria-expanded="true"] ~ .menu__items[role="menu"], +.fake-menu button.expand-btn--borderless[aria-expanded="true"] ~ .menu__items[role="menu"] { + top: 41px; +} .menu .expand-btn[aria-expanded="true"], .fake-menu .expand-btn[aria-expanded="true"], .listbox .expand-btn[aria-expanded="true"] { @@ -400,6 +414,7 @@ div.listbox__option[role^="option"], a.fake-menu__item, button.fake-menu__item { background-color: #ffffff; + border: 1px solid #ffffff; box-sizing: border-box; cursor: pointer; display: -webkit-inline-box; @@ -426,21 +441,18 @@ button.fake-menu__item span:not([class*="listbox__status"]) { white-space: nowrap; text-overflow: ellipsis; } -div.menu__item[role^="menuitem"]:focus, -div.listbox__option[role^="option"]:focus, -a.fake-menu__item:focus, -button.fake-menu__item:focus, div.menu__item[role^="menuitem"]:hover, div.listbox__option[role^="option"]:hover, a.fake-menu__item:hover, button.fake-menu__item:hover { - background-color: #f5f5f5; + background-color: #e5e5e5; } div.menu__item[role^="menuitem"]:focus, div.listbox__option[role^="option"]:focus, a.fake-menu__item:focus, button.fake-menu__item:focus { - outline: 1px solid #c7c7c7; + background-color: #e5e5e5; + outline: none; } div.menu__item[role^="menuitem"]:active, div.listbox__option[role^="option"]:active, @@ -468,6 +480,10 @@ a.fake-menu__item:not(:last-child), button.fake-menu__item:not(:last-child) { margin-bottom: 1px; } +div.menu__item[role^="menuitem"][aria-checked="true"], +div.listbox__option[role^="option"][aria-selected="true"] { + font-weight: bold; +} div.menu__item[role^="menuitem"][aria-checked="true"] .menu__status, div.listbox__option[role^="option"][aria-selected="true"] .menu__status, div.menu__item[role^="menuitem"][aria-checked="true"] .listbox__status, @@ -536,9 +552,6 @@ span.fake-menu__status { box-sizing: border-box; width: 100%; } -.listbox:hover > .listbox__control > input { - border-color: #4295ff; -} .listbox__control > input { background-color: #ffffff; border: 1px solid #c7c7c7; @@ -549,7 +562,7 @@ span.fake-menu__status { font-size: 16px; height: 40px; padding: 0 16px; - text-shadow: 0 0 0 #006efc; + text-shadow: 0 0 0 #111820; vertical-align: middle; width: 100%; } @@ -581,7 +594,7 @@ span.fake-menu__status { display: block; } span.listbox__arrow { - background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%275%27%3E%3Cpath%20fill%3D%22%230654ba%22%20d%3D%22M0.758714126%2C0.14644663%20C0.585147774%2C-0.048815516%200.303741117%2C-0.0488155166%200.130174765%2C0.146446629%20C-0.0433915877%2C0.341708774%20-0.0433915882%2C0.658291264%200.130174763%2C0.85355341%20L3.68573029%2C4.85355339%20C3.85929664%2C5.04881554%204.1407033%2C5.04881554%204.31426965%2C4.85355339%20L7.86982523%2C0.853553392%20C8.04339159%2C0.658291247%208.04339159%2C0.341708758%207.86982524%2C0.146446611%20C7.69625889%2C-0.0488155358%207.41485223%2C-0.0488155372%207.24128588%2C0.146446608%20L3.99999997%2C3.79289322%20L0.758714126%2C0.14644663%20Z%22%3E%3C/path%3E%3C/svg%3E'); + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%275%27%3E%3Cpath%20fill%3D%22%2311820%22%20d%3D%22M0.758714126%2C0.14644663%20C0.585147774%2C-0.048815516%200.303741117%2C-0.0488155166%200.130174765%2C0.146446629%20C-0.0433915877%2C0.341708774%20-0.0433915882%2C0.658291264%200.130174763%2C0.85355341%20L3.68573029%2C4.85355339%20C3.85929664%2C5.04881554%204.1407033%2C5.04881554%204.31426965%2C4.85355339%20L7.86982523%2C0.853553392%20C8.04339159%2C0.658291247%208.04339159%2C0.341708758%207.86982524%2C0.146446611%20C7.69625889%2C-0.0488155358%207.41485223%2C-0.0488155372%207.24128588%2C0.146446608%20L3.99999997%2C3.79289322%20L0.758714126%2C0.14644663%20Z%22%3E%3C/path%3E%3C/svg%3E'); background-repeat: no-repeat; background-position: right center; content: ""; @@ -596,6 +609,174 @@ span.listbox__arrow { -webkit-transform: rotate(180deg); transform: rotate(180deg); } +.page-notice { + background-color: #ffffff; + border-style: solid; + border-width: 4px; + font-size: 0.875rem; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + margin: 8px 0; +} +div[role="region"].page-notice, +section.page-notice { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +span[role="region"].page-notice { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; +} +.page-notice--confirmation { + border-color: #71c63e; +} +.page-notice--confirmation .page-notice__status { + background-color: #71c63e; +} +.page-notice--priority { + border-color: #ff5151; +} +.page-notice--priority .page-notice__status { + background-color: #ff5151; +} +.page-notice--information { + border-color: #4295ff; +} +.page-notice--information .page-notice__status { + background-color: #4295ff; +} +.page-notice__status { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: white; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + margin: 0; + padding: 12px 16px 12px 12px; +} +.page-notice__content p, +.page-notice__cell p { + margin: 16px; +} +.inline-notice { + margin: 8px 0; +} +.inline-notice p { + margin: 4px 0; +} +.inline-notice p:first-of-type { + font-weight: bold; +} +div.inline-notice { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +span.inline-notice { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; +} +.page-notice__status span, +.inline-notice__status span { + background-repeat: no-repeat; + background-size: contain; + display: inline-block; +} +.page-notice__status span { + height: 28px; + margin: 0; + width: 28px; +} +.inline-notice__status span { + height: 24px; + margin: 1px 8px 0 0; + width: 24px; +} +.page-notice--confirmation .page-notice__status span { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2729%27%20height%3D%2729%27%3E%3Ccircle%20cx%3D%2214.5%22%20cy%3D%2214.5%22%20r%3D%2214.5%22%20fill%3D%22%23ffffff%22%3E%3C/circle%3E%0A%3Cpath%20fill%3D%22%23ffffff%22%20stroke%3D%22%2371c63e%22%20stroke-width%3D%222%22%20d%3D%22M5.548%2015.01l5.773%206.286L21.522%209.824%22%3E%3C/path%3E%3C/svg%3E'); +} +.inline-notice--confirmation .inline-notice__status span { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2729%27%20height%3D%2729%27%3E%3Ccircle%20cx%3D%2214.5%22%20cy%3D%2214.5%22%20r%3D%2214.5%22%20fill%3D%22%2371c63e%22%3E%3C/circle%3E%0A%3Cpath%20fill%3D%22%2371c63e%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20d%3D%22M5.548%2015.01l5.773%206.286L21.522%209.824%22%3E%3C/path%3E%3C/svg%3E'); +} +.page-notice--priority .page-notice__status span { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2729%27%20height%3D%2729%27%3E%3Ccircle%20fill%3D%22%23ffffff%22%20cx%3D%2214.5%22%20cy%3D%2214.5%22%20r%3D%2214.5%22%3E%3C/circle%3E%0A%3Cpath%20fill%3D%22%23ff5151%22%20d%3D%22M14.5%2C18h0A1.5%2C1.5%2C0%2C0%2C1%2C13%2C16.5v-9A1.5%2C1.5%2C0%2C0%2C1%2C14.5%2C6h0A1.5%2C1.5%2C0%2C0%2C1%2C16%2C7.5v9A1.5%2C1.5%2C0%2C0%2C1%2C14.5%2C18Z%22%3E%3C/path%3E%0A%3Cpath%20fill%3D%22%23ff5151%22%20d%3D%22M14.5%2C23h0A1.5%2C1.5%2C0%2C0%2C1%2C13%2C21.5h0A1.5%2C1.5%2C0%2C0%2C1%2C14.5%2C20h0A1.5%2C1.5%2C0%2C0%2C1%2C16%2C21.5h0A1.5%2C1.5%2C0%2C0%2C1%2C14.5%2C23Z%22%3E%3C/path%3E%3C/svg%3E'); +} +.inline-notice--priority .inline-notice__status span { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2729%27%20height%3D%2729%27%3E%3Ccircle%20fill%3D%22%23ff5151%22%20cx%3D%2214.5%22%20cy%3D%2214.5%22%20r%3D%2214.5%22%3E%3C/circle%3E%0A%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M14.5%2C18h0A1.5%2C1.5%2C0%2C0%2C1%2C13%2C16.5v-9A1.5%2C1.5%2C0%2C0%2C1%2C14.5%2C6h0A1.5%2C1.5%2C0%2C0%2C1%2C16%2C7.5v9A1.5%2C1.5%2C0%2C0%2C1%2C14.5%2C18Z%22%3E%3C/path%3E%0A%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M14.5%2C23h0A1.5%2C1.5%2C0%2C0%2C1%2C13%2C21.5h0A1.5%2C1.5%2C0%2C0%2C1%2C14.5%2C20h0A1.5%2C1.5%2C0%2C0%2C1%2C16%2C21.5h0A1.5%2C1.5%2C0%2C0%2C1%2C14.5%2C23Z%22%3E%3C/path%3E%3C/svg%3E'); +} +.page-notice--information .page-notice__status span { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2729%27%20height%3D%2729%27%3E%3Ccircle%20cx%3D%2214.5%22%20cy%3D%2214.5%22%20r%3D%2214.5%22%20fill%3D%22%23ffffff%22%3E%3C/circle%3E%3Crect%20width%3D%223%22%20height%3D%2212%22%20x%3D%2213%22%20y%3D%2211%22%20fill%3D%22%234295ff%22%20rx%3D%221.5%22%3E%3C/rect%3E%3Crect%20width%3D%223%22%20height%3D%223%22%20x%3D%2213%22%20y%3D%226%22%20fill%3D%22%234295ff%22%20rx%3D%221.5%22%3E%3C/rect%3E%3C/svg%3E'); +} +.inline-notice--information .inline-notice__status span { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2729%27%20height%3D%2729%27%3E%3Ccircle%20cx%3D%2214.5%22%20cy%3D%2214.5%22%20r%3D%2214.5%22%20fill%3D%22%234295ff%22%3E%3C/circle%3E%3Crect%20width%3D%223%22%20height%3D%2212%22%20x%3D%2213%22%20y%3D%2211%22%20fill%3D%22%23ffffff%22%20rx%3D%221.5%22%3E%3C/rect%3E%3Crect%20width%3D%223%22%20height%3D%223%22%20x%3D%2213%22%20y%3D%226%22%20fill%3D%22%23ffffff%22%20rx%3D%221.5%22%3E%3C/rect%3E%3C/svg%3E'); +} +/* +.flyout-notice { + background-color: #006efc; + color: white; + padding: 8px; + position: absolute; + word-wrap: break-word; + + a { + color: white; + } +} + +.flyout-notice__pointer-top { + border-bottom-style: solid; + border-bottom-width: 12px; + border-left: 12px solid transparent; + border-right: 12px solid transparent; + bottom: 100%; + color: #006efc; + left: calc(50% - 8px); + position: absolute; +} + +.flyout-notice__pointer-bottom { + border-top-style: solid; + border-top-width: 12px; + border-left: 12px solid transparent; + border-right: 12px solid transparent; + top: 100%; + color: #006efc; + left: calc(50% - 8px); + position: absolute; +} + +.flyout-notice__pointer-right { + border-left-style: solid; + border-left-width: 12px; + border-bottom: 12px solid transparent; + border-top: 12px solid transparent; + left: 100%; + color: #006efc; + top: calc(50% - 8px); + position: absolute; +} + +.flyout-notice__pointer-left { + border-right-style: solid; + border-right-width: 12px; + border-bottom: 12px solid transparent; + border-top: 12px solid transparent; + right: 100%; + color: #006efc; + top: calc(50% - 8px); + position: absolute; +} + +.flyout-notice a { + outline-color: white; +} +*/ .giant-text-2 { font-size: 2.25rem; font-weight: 700; @@ -644,8 +825,6 @@ span.listbox__arrow { .clipped { border: 0; clip: rect(1px, 1px, 1px, 1px); - -webkit-clip-path: inset(50%); - clip-path: inset(50%); height: 1px; overflow: hidden; padding: 0; @@ -655,8 +834,6 @@ span.listbox__arrow { } .clipped--stealth:focus { clip: auto; - -webkit-clip-path: none; - clip-path: none; height: auto; overflow: visible; white-space: normal; diff --git a/docs/test/notice/ds4/flyout-notice.html b/docs/test/notice/ds4/flyout-notice.html index 8e9c7495e..d3762e31a 100644 --- a/docs/test/notice/ds4/flyout-notice.html +++ b/docs/test/notice/ds4/flyout-notice.html @@ -53,7 +53,7 @@

Information

-

Dismissable

+

Dismissable (inline SVG)

@@ -69,7 +69,20 @@

Dismissable

-

Mulit-Paragraph Dismissable

+

Dismissable (background SVG)

+
+
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ + + +
+
+ +

Multi-Paragraph Dismissable (inline SVG)

@@ -86,6 +99,20 @@

Mulit-Paragraph Dismissable

+

Multi-Paragraph Dismissable (background SVG)

+
+
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ + + +
+
+

Single Paragraph with Link

diff --git a/docs/test/notice/ds4/inline-notice.html b/docs/test/notice/ds4/inline-notice.html index c74d2e262..8115a4005 100644 --- a/docs/test/notice/ds4/inline-notice.html +++ b/docs/test/notice/ds4/inline-notice.html @@ -23,7 +23,7 @@ -

Non-wrapped text

+

Non-wrapped text (inline SVG)

@@ -57,7 +57,35 @@

Non-wrapped text

-

Non-wrapped text with link

+

Non-wrapped text (background SVG)

+
+
+ + + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ +
+
+ + + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ +
+
+ + + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ +
+
+ +

Non-wrapped text with link (inline SVG)

@@ -94,7 +122,38 @@

Non-wrapped text with link

-

Wrapped text

+

Non-wrapped text with link (background SVG)

+
+
+ + + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Use fewer refinements

+ +
+
+ + + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Use fewer refinements

+ +
+
+ + + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Use fewer refinements

+ +
+
+ +

Wrapped text (inline SVG)

@@ -128,7 +187,35 @@

Wrapped text

-

Wrapped text with link

+

Wrapped text (background SVG)

+
+
+ + + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+ +
+
+ + + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+ +
+
+ + + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+ +
+
+ +

Wrapped text with link (inline SVG)

@@ -165,7 +252,38 @@

Wrapped text with link

-

Multi-paragraph

+

Wrapped text with link (background SVG)

+
+
+ + + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+

Use fewer refinements

+ +
+
+ + + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+

Use fewer refinements

+ +
+
+ + + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+

Use fewer refinements

+ +
+
+ +

Multi-paragraph (inline SVG)

@@ -202,7 +320,38 @@

Multi-paragraph

-

Multi-paragraph with link

+

Multi-paragraph (background SVG)

+
+
+ + + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ +
+
+ + + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ +
+
+ + + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ +
+
+ +

Multi-paragraph with link (inline SVG)

@@ -242,7 +391,41 @@

Multi-paragraph with link

-

Long Word Break (with max-width set)

+

Multi-paragraph with link (background SVG)

+
+
+ + + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Use fewer refinements

+ +
+
+ + + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Use fewer refinements

+ +
+
+ + + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Use fewer refinements

+ +
+
+ +

Long Word Break (with max-width set) (inline SVG)

@@ -256,7 +439,19 @@

Long Word Break (with max-width set)

-

Truncated text

+

Long Word Break (with max-width set) (background SVG)

+
+
+ + + + +

We got your request. We're checking the info you gave us, and we'll email you at abcdefghijklmnopqrstuvwxyz@abcdefghijklmnopqrstuvwxyz.com in a few minutes with the results.

+ +
+
+ +

Truncated text (inline SVG)

@@ -289,3 +484,31 @@

Truncated text
+ +

Truncated text (background SVG)

+
+
+ + + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+ +
+
+ + + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+ +
+
+ + + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+ +
+
diff --git a/docs/test/notice/ds4/page-notice.html b/docs/test/notice/ds4/page-notice.html index 9b2b6ca3e..95e1dfd56 100644 --- a/docs/test/notice/ds4/page-notice.html +++ b/docs/test/notice/ds4/page-notice.html @@ -23,7 +23,7 @@ -

Align Middle

+

Align Middle (inline SVG)

@@ -57,7 +57,35 @@

-

Align Middle, with links

+

Align Middle (background SVG)

+
+
+

+ +

+ +

Something went wrong. Please try again.

+ +
+
+

+ +

+ +

Congrats! You are the highest bidder!

+ +
+
+

+ +

+ +

Try refining your search term for more results.

+ +
+
+ +

Align Middle, with links (inline SVG)

@@ -93,7 +121,37 @@

-

Align Middle, as Button CTA

+

Align Middle, with links (background SVG)

+
+
+

+ +

+ +

Something went wrong. Please try again.

+ +
+
+

+ +

+ +

Congrats!

+

You are the highest bidder!

+ +
+
+

+ +

+ +

Try refining your search term for more results.

+

Please try again.

+ +
+
+ +

Align Middle, as Button CTA (inline SVG)

-

Align Middle, as Link CTA

+

Align Middle, as Button CTA (background SVG)

+
+ + +
+ +

Align Middle, as Link CTA (inline SVG)

@@ -154,7 +238,33 @@

-

Align Middle, Dismissable

+

Align Middle, as Link CTA (background SVG)

+
+ +

+ +

+ +

Something went wrong. Please try again.

+ + + + +

+ +

+ +

Congrats! You are the highest bidder!

+ + + +
+ +

Align Middle, Dismissable (inline SVG)

@@ -203,7 +313,44 @@

-

Align Top

+

Align Middle, Dismissable (background SVG)

+
+
+

+ +

+ +

Something went wrong. Please try again.

+ + +
+
+

+ +

+ +

Congrats! You are the highest bidder!

+ + +
+
+

+ +

+ +

Try refining your search term for more results.

+ + +
+
+ +

Align Top (inline SVG)

@@ -237,7 +384,35 @@

-

Align Top with link

+

Align Top (background SVG)

+
+
+

+ +

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+ +
+
+

+ +

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+ +
+
+

+ +

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+ +
+
+ +

Align Top with link (inline SVG)

@@ -274,7 +449,38 @@

-

Align Top as Button CTA

+

Align Top with link (background SVG)

+
+
+

+ +

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+

www.ebay.com

+ +
+
+

+ +

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+

www.ebay.com

+ +
+
+

+ +

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+

www.ebay.com

+ +
+
+ +

Align Top as Button CTA (inline SVG)

-

Align Top as Link CTA

+

Align Top as Button CTA (background SVG)

+
+ +
+ +

Align Top as Link CTA (inline SVG)

@@ -308,7 +529,22 @@

-

Align Top with Close

+

Align Top as Link CTA (background SVG)

+
+ +

+ +

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+ + + +
+ +

Align Top with Close (inline SVG)

@@ -357,7 +593,44 @@

-

Multi paragraph

+

Align Top with Close (background SVG)

+
+
+

+ +

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+ + +
+
+

+ +

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+ + +
+
+

+ +

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+ + +
+
+ +

Multi paragraph (inline SVG)

@@ -394,7 +667,38 @@

-

Multi paragraph with link

+

Multi paragraph (background SVG)

+
+
+

+ +

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ +
+
+

+ +

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ +
+
+

+ +

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ +
+
+ +

Multi paragraph with link (inline SVG)

@@ -434,7 +738,41 @@

-

Long Word Break (with max-width set)

+

Multi paragraph with link (background SVG)

+
+
+

+ +

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

www.ebay.com

+ +
+
+

+ +

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

www.ebay.com

+ +
+
+

+ +

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

www.ebay.com

+ +
+
+ +

Long Word Break (with max-width set) (inline SVG)

@@ -448,7 +786,19 @@

-

In Grid System

+

Long Word Break (with max-width set) (background SVG)

+
+
+

+ +

+ +

We got your request. We're checking the info you gave us, and we'll email you at abcdefghijklmnopqrstuvwxyz@abcdefghijklmnopqrstuvwxyz.com in a few minutes with the results.

+ +
+
+ +

In Grid System (inline SVG)

@@ -495,7 +845,7 @@

-

In DIY Grid

+

In DIY Grid (inline SVG)

diff --git a/notice.browser.json b/notice.browser.json index 757cb1e9b..2a326e1b1 100644 --- a/notice.browser.json +++ b/notice.browser.json @@ -1,6 +1,16 @@ { "dependencies": [ - "./dist/notice/ds4/notice.css", - { "path": "./dist/notice/ds4/notice-large.css", "if-flag": "skin-large"} + { + "path": "./dist/notice/ds4/notice.css", + "if-not-flag": "skin-ds6" + }, + { + "path": "./dist/notice/ds4/notice-large.css", + "if": "flags.contains('skin-large') && !flags.contains('skin-ds6')" + }, + { + "path": "./dist/notice/ds6/notice.css", + "if-flag": "skin-ds6" + } ] } diff --git a/package.json b/package.json index 4a07c3867..c5ba74699 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@ebay/skin", "description": "Skin - CSS modules that represent the brand eBay", - "version": "3.3.2", + "version": "3.4.0-0", "license": "MIT", "maintainers": [ "Ian McBurnie " diff --git a/src/less/bundles/skin/ds6/skin.less b/src/less/bundles/skin/ds6/skin.less index 0588d7f03..cef451290 100644 --- a/src/less/bundles/skin/ds6/skin.less +++ b/src/less/bundles/skin/ds6/skin.less @@ -6,6 +6,6 @@ @import "../../../color/ds6/color.less"; @import "../../../icon/ds6/icon.less"; @import "../../../dropdown/ds6/dropdown.less"; -// @import "../../../notice/ds6/notice.less"; +@import "../../../notice/ds6/notice.less"; @import "../../../typography/ds6/typography.less"; @import "../../../utility/ds6/utility.less"; diff --git a/src/less/button/ds6/button-base.less b/src/less/button/ds6/button-base.less index adee23d58..84a7bbee8 100644 --- a/src/less/button/ds6/button-base.less +++ b/src/less/button/ds6/button-base.less @@ -25,20 +25,6 @@ a.cta-btn { text-decoration: none; } -button.expand-btn { - &[aria-expanded="true"] { - .expand-btn__icon { - transform: rotate(180deg); - } - } - - &[disabled] { - span.expand-btn__icon { - background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%275%27%3E%3Cpath%20fill%3D%22%23c7c7c7%22%20d%3D%22M0.758714126%2C0.14644663%20C0.585147774%2C-0.048815516%200.303741117%2C-0.0488155166%200.130174765%2C0.146446629%20C-0.0433915877%2C0.341708774%20-0.0433915882%2C0.658291264%200.130174763%2C0.85355341%20L3.68573029%2C4.85355339%20C3.85929664%2C5.04881554%204.1407033%2C5.04881554%204.31426965%2C4.85355339%20L7.86982523%2C0.853553392%20C8.04339159%2C0.658291247%208.04339159%2C0.341708758%207.86982524%2C0.146446611%20C7.69625889%2C-0.0488155358%207.41485223%2C-0.0488155372%207.24128588%2C0.146446608%20L3.99999997%2C3.79289322%20L0.758714126%2C0.14644663%20Z%22%3E%3C/path%3E%3C/svg%3E'); - } - } -} - a.cta-btn { background-color: @ds6-color-background-default; border-style: solid; @@ -121,16 +107,36 @@ button.expand-btn, a.fake-btn--secondary { background-color: white; border: 1px solid @ds6-color-g204-gray; + + &:active { + border-color: @ds6-color-p003-blue; + color: @ds6-color-p003-blue; + } +} + +button.btn-secondary, +a.fake-btn--secondary { color: @ds6-color-p002-blue; &:focus, &:hover { border-color: @ds6-color-p004-blue; } +} - &:active { - border-color: @ds6-color-p003-blue; - color: @ds6-color-p003-blue; +button.expand-btn { + color: @ds6-color-g206-gray; + + &[aria-expanded="true"] { + .expand-btn__icon { + transform: rotate(180deg); + } + } + + &[disabled] { + span.expand-btn__icon { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%275%27%3E%3Cpath%20fill%3D%22%23c7c7c7%22%20d%3D%22M0.758714126%2C0.14644663%20C0.585147774%2C-0.048815516%200.303741117%2C-0.0488155166%200.130174765%2C0.146446629%20C-0.0433915877%2C0.341708774%20-0.0433915882%2C0.658291264%200.130174763%2C0.85355341%20L3.68573029%2C4.85355339%20C3.85929664%2C5.04881554%204.1407033%2C5.04881554%204.31426965%2C4.85355339%20L7.86982523%2C0.853553392%20C8.04339159%2C0.658291247%208.04339159%2C0.341708758%207.86982524%2C0.146446611%20C7.69625889%2C-0.0488155358%207.41485223%2C-0.0488155372%207.24128588%2C0.146446608%20L3.99999997%2C3.79289322%20L0.758714126%2C0.14644663%20Z%22%3E%3C/path%3E%3C/svg%3E'); + } } } @@ -300,7 +306,7 @@ svg.cta-btn__icon { } span.expand-btn__icon { - background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%275%27%3E%3Cpath%20fill%3D%22%230654ba%22%20d%3D%22M0.758714126%2C0.14644663%20C0.585147774%2C-0.048815516%200.303741117%2C-0.0488155166%200.130174765%2C0.146446629%20C-0.0433915877%2C0.341708774%20-0.0433915882%2C0.658291264%200.130174763%2C0.85355341%20L3.68573029%2C4.85355339%20C3.85929664%2C5.04881554%204.1407033%2C5.04881554%204.31426965%2C4.85355339%20L7.86982523%2C0.853553392%20C8.04339159%2C0.658291247%208.04339159%2C0.341708758%207.86982524%2C0.146446611%20C7.69625889%2C-0.0488155358%207.41485223%2C-0.0488155372%207.24128588%2C0.146446608%20L3.99999997%2C3.79289322%20L0.758714126%2C0.14644663%20Z%22%3E%3C/path%3E%3C/svg%3E'); + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%275%27%3E%3Cpath%20fill%3D%22%2311820%22%20d%3D%22M0.758714126%2C0.14644663%20C0.585147774%2C-0.048815516%200.303741117%2C-0.0488155166%200.130174765%2C0.146446629%20C-0.0433915877%2C0.341708774%20-0.0433915882%2C0.658291264%200.130174763%2C0.85355341%20L3.68573029%2C4.85355339%20C3.85929664%2C5.04881554%204.1407033%2C5.04881554%204.31426965%2C4.85355339%20L7.86982523%2C0.853553392%20C8.04339159%2C0.658291247%208.04339159%2C0.341708758%207.86982524%2C0.146446611%20C7.69625889%2C-0.0488155358%207.41485223%2C-0.0488155372%207.24128588%2C0.146446608%20L3.99999997%2C3.79289322%20L0.758714126%2C0.14644663%20Z%22%3E%3C/path%3E%3C/svg%3E'); background-repeat: no-repeat; background-position-y: center; flex-shrink: 0; diff --git a/src/less/dropdown/ds6/dropdown-base.less b/src/less/dropdown/ds6/dropdown-base.less index 669f692bf..fe9a0a868 100644 --- a/src/less/dropdown/ds6/dropdown-base.less +++ b/src/less/dropdown/ds6/dropdown-base.less @@ -15,6 +15,18 @@ span.listbox { // BEM elements +.menu button.expand-btn--borderless, +.fake-menu button.expand-btn--borderless { + border: 0; + padding-left: 0; + vertical-align: initial; +} + +.menu button.expand-btn--borderless[aria-expanded="true"] ~ .menu__items[role="menu"], +.fake-menu button.expand-btn--borderless[aria-expanded="true"] ~ .menu__items[role="menu"] { + top: 41px; // button height plus one px, to meet design guidelines +} + .menu .expand-btn[aria-expanded="true"], .fake-menu .expand-btn[aria-expanded="true"], .listbox .expand-btn[aria-expanded="true"] { @@ -60,6 +72,7 @@ div.listbox__option[role^="option"], a.fake-menu__item, button.fake-menu__item { background-color: @ds6-color-g201-gray; + border: 1px solid @ds6-color-g201-gray; box-sizing: border-box; cursor: pointer; display: inline-flex; @@ -75,13 +88,13 @@ button.fake-menu__item { .truncate; } - &:focus, &:hover { - background-color: @ds6-color-g202-gray; + background-color: @ds6-color-g203-gray; } &:focus { - outline: 1px solid @ds6-color-g204-gray; + background-color: @ds6-color-g203-gray; + outline: none; } &:active { @@ -101,6 +114,8 @@ button.fake-menu__item { div.menu__item[role^="menuitem"][aria-checked="true"], div.listbox__option[role^="option"][aria-selected="true"] { + font-weight: bold; + .menu__status, .listbox__status { visibility: visible; diff --git a/src/less/less/ds6/variables.less b/src/less/less/ds6/variables.less index 5818ce5e0..d79f9562a 100644 --- a/src/less/less/ds6/variables.less +++ b/src/less/less/ds6/variables.less @@ -34,7 +34,7 @@ @ds6-color-confirmation-background: @ds6-color-p032-green; @ds6-color-critical-text: @ds6-color-p013-red; @ds6-color-critical-background: @ds6-color-p011-red; -@ds6-color-background-default: @ds6-color-g202-gray; +@ds6-color-background-default: @ds6-color-g201-gray; @ds6-color-item-tile-background-visited: @ds6-color-g202-gray; @ds6-color-button-disabled-background: @ds6-color-g204-gray; @ds6-color-disabled: @ds6-color-g204-gray; diff --git a/src/less/less/mixins-common.less b/src/less/less/mixins-common.less index d976d8904..045394fcf 100644 --- a/src/less/less/mixins-common.less +++ b/src/less/less/mixins-common.less @@ -6,8 +6,6 @@ .clipped() { border: 0; clip: rect(1px, 1px, 1px, 1px); - -webkit-clip-path: inset(50%); - clip-path: inset(50%); height: 1px; overflow: hidden; padding: 0; @@ -18,8 +16,6 @@ .unclipped() { clip: auto; - -webkit-clip-path: none; - clip-path: none; height: auto; overflow: visible; white-space: normal; diff --git a/src/less/listbox/ds6/listbox-base.less b/src/less/listbox/ds6/listbox-base.less index 9cbca417a..ac56ef957 100644 --- a/src/less/listbox/ds6/listbox-base.less +++ b/src/less/listbox/ds6/listbox-base.less @@ -4,25 +4,21 @@ display: inline-block; box-sizing: border-box; width: 100%; - - &:hover > .listbox__control > input { - border-color: @ds6-color-p004-blue; - } } .listbox__control > input { background-color: @ds6-color-g201-gray; border: 1px solid @ds6-color-g204-gray; box-sizing: border-box; - // fixes the cursor in firefox 1 of 2 + // fixes the cursor in firefox (1 of 2) color: transparent; cursor: default; font-family: inherit; font-size: 16px; height: @listbox-height; padding: 0 16px; - // fixes the cursor in firefox 2 of 2 - text-shadow: 0 0 0 @ds6-color-p002-blue; + // fixes the cursor in firefox (2 of 2) + text-shadow: 0 0 0 @ds6-color-g206-gray; vertical-align: middle; width: 100%; @@ -63,7 +59,7 @@ } span.listbox__arrow { - background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%275%27%3E%3Cpath%20fill%3D%22%230654ba%22%20d%3D%22M0.758714126%2C0.14644663%20C0.585147774%2C-0.048815516%200.303741117%2C-0.0488155166%200.130174765%2C0.146446629%20C-0.0433915877%2C0.341708774%20-0.0433915882%2C0.658291264%200.130174763%2C0.85355341%20L3.68573029%2C4.85355339%20C3.85929664%2C5.04881554%204.1407033%2C5.04881554%204.31426965%2C4.85355339%20L7.86982523%2C0.853553392%20C8.04339159%2C0.658291247%208.04339159%2C0.341708758%207.86982524%2C0.146446611%20C7.69625889%2C-0.0488155358%207.41485223%2C-0.0488155372%207.24128588%2C0.146446608%20L3.99999997%2C3.79289322%20L0.758714126%2C0.14644663%20Z%22%3E%3C/path%3E%3C/svg%3E'); + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%275%27%3E%3Cpath%20fill%3D%22%2311820%22%20d%3D%22M0.758714126%2C0.14644663%20C0.585147774%2C-0.048815516%200.303741117%2C-0.0488155166%200.130174765%2C0.146446629%20C-0.0433915877%2C0.341708774%20-0.0433915882%2C0.658291264%200.130174763%2C0.85355341%20L3.68573029%2C4.85355339%20C3.85929664%2C5.04881554%204.1407033%2C5.04881554%204.31426965%2C4.85355339%20L7.86982523%2C0.853553392%20C8.04339159%2C0.658291247%208.04339159%2C0.341708758%207.86982524%2C0.146446611%20C7.69625889%2C-0.0488155358%207.41485223%2C-0.0488155372%207.24128588%2C0.146446608%20L3.99999997%2C3.79289322%20L0.758714126%2C0.14644663%20Z%22%3E%3C/path%3E%3C/svg%3E'); background-repeat: no-repeat; background-position: right center; content: ""; diff --git a/src/less/notice/ds4/notice-base.less b/src/less/notice/ds4/notice-base.less index 6e7ec11d8..30afa9bce 100644 --- a/src/less/notice/ds4/notice-base.less +++ b/src/less/notice/ds4/notice-base.less @@ -90,6 +90,31 @@ a.page-notice--priority { color: @color-text-critical; } +.page-notice__status span { + background-repeat: no-repeat; + background-size: contain; + display: inline-block; + height: 24px; + margin-left: 8px; + margin-top: 4px; + width: 24px; +} + +.page-notice--priority .page-notice__status span, +.inline-notice--priority .inline-notice__status span { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2732%27%20height%3D%2732%27%3E%3Cpath%20fill%3D%22%23dd1e31%22%20d%3D%22M15.991%2018.996c0%200%200%200%200%200-0.625%200-1.132-0.507-1.132-1.132%200%200%200%200%200%200v-8.737c-0.006-0.043-0.009-0.094-0.009-0.145%200-0.625%200.507-1.132%201.132-1.132s1.132%200.507%201.132%201.132c0%200.051-0.003%200.101-0.010%200.15l0.001%208.732c0%200%200%200%200%200%200%200.618-0.496%201.121-1.112%201.131z%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20fill%3D%22%23dd1e31%22%20d%3D%22M17.401%2022.855c0%200.748-0.606%201.354-1.354%201.354s-1.354-0.606-1.354-1.354c0-0.748%200.606-1.354%201.354-1.354s1.354%200.606%201.354%201.354z%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20fill%3D%22%23dd1e31%22%20d%3D%22M15.991%2032c-8.842%200-16.009-7.168-16.009-16.009s7.168-16.009%2016.009-16.009c8.842%200%2016.009%207.168%2016.009%2016.009%200%200.007%200%200.013%200%200.020-0.011%208.833-7.174%2015.99-16.009%2015.99%200%200%200%200%200%200zM15.991%202.319c0%200%200%200%200%200-7.561%200-13.69%206.129-13.69%2013.69s6.129%2013.69%2013.69%2013.69c7.561%200%2013.69-6.129%2013.69-13.69s-6.129-13.69-13.69-13.69z%22%3E%3C/path%3E%3C/svg%3E'); +} + +.page-notice--confirmation .page-notice__status span, +.inline-notice--confirmation .inline-notice__status span { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2732%27%20height%3D%2732%27%3E%3Cpath%20fill%3D%22%235ba71b%22%20d%3D%22M16.009%2032c-8.842%200-16.009-7.168-16.009-16.009s7.168-16.009%2016.009-16.009c8.842%200%2016.009%207.168%2016.009%2016.009%200%200.007%200%200.013%200%200.020-0.011%208.833-7.174%2015.99-16.009%2015.99%200%200%200%200%200%200zM16.009%202.319c0%200%200%200%200%200-7.561%200-13.69%206.129-13.69%2013.69s6.129%2013.69%2013.69%2013.69c7.561%200%2013.69-6.129%2013.69-13.69s-6.129-13.69-13.69-13.69z%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20fill%3D%22%235ba71b%22%20d%3D%22M14.841%2023.448c-0.001%200-0.003%200-0.004%200-0.247%200-0.473-0.091-0.646-0.242l-6.232-5.305c-0.213-0.182-0.347-0.451-0.347-0.751%200-0.545%200.442-0.987%200.987-0.987%200.245%200%200.469%200.089%200.641%200.237l5.434%204.637%208.181-10.741c0.183-0.238%200.468-0.39%200.788-0.39%200.548%200%200.992%200.444%200.992%200.992%200%200.228-0.077%200.438-0.206%200.605l-8.81%2011.573c-0.137%200.199-0.39%200.358-0.682%200.389l-0.116%200z%22%3E%3C/path%3E%3C/svg%3E'); +} + +.page-notice--information .page-notice__status span, +.inline-notice--information .inline-notice__status span { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2732%27%20height%3D%2732%27%3E%3Cpath%20fill%3D%22%230654ba%22%20d%3D%22M15.991%2012.986c0%200%200%200%200%200-0.625%200-1.132%200.507-1.132%201.132%200%200%200%200%200%200v8.737c0.074%200.56%200.548%200.987%201.122%200.987s1.048-0.427%201.122-0.981l0.001-8.743c0-0%200-0%200-0%200-0.618-0.496-1.121-1.112-1.131z%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20fill%3D%22%230654ba%22%20d%3D%22M17.401%209.146c0%200.748-0.606%201.354-1.354%201.354s-1.354-0.606-1.354-1.354c0-0.748%200.606-1.354%201.354-1.354s1.354%200.606%201.354%201.354z%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20fill%3D%22%230654ba%22%20d%3D%22M15.991%2032c-8.842%200-16.009-7.168-16.009-16.009s7.168-16.009%2016.009-16.009c8.842%200%2016.009%207.168%2016.009%2016.009%200%200.007%200%200.013%200%200.020-0.011%208.833-7.174%2015.99-16.009%2015.99%200%200%200%200%200%200zM15.991%202.319c0%200%200%200%200%200-7.561%200-13.69%206.129-13.69%2013.69s6.129%2013.69%2013.69%2013.69c7.561%200%2013.69-6.129%2013.69-13.69s-6.129-13.69-13.69-13.69z%22%3E%3C/path%3E%3C/svg%3E'); +} + // BEM block mod cascades .flyout-notice--information .flyout-notice__status, @@ -173,6 +198,16 @@ a.page-notice--priority { width: 16px; } +.inline-notice__status span { + background-repeat: no-repeat; + background-size: contain; + display: inline-block; + height: 16px; + min-height: 16px; + min-width: 16px; + width: 16px; +} + .page-notice__status { margin: 0; @@ -215,6 +250,9 @@ button.page-notice__close { &:focus, &:hover { color: @color-icon-actionable-hover; + span { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2732%27%20height%3D%2732%27%3E%3Cpath%20fill%3D%22%23999999%22%20d%3D%22M31.427%202.846l-2.387-2.387-13.084%2013.082-13.082-13.082-2.386%202.387%2013.082%2013.082-13.082%2013.084%202.386%202.386%2013.082-13.082%2013.084%2013.082%202.386-2.386-13.084-13.084z%22%3E%3C/path%3E%3C/svg%3E'); + } } &:active { @@ -226,6 +264,15 @@ button.page-notice__close { height: 12px; width: 12px; } + + span { + background-repeat: no-repeat; + background-size: contain; + display: inline-block; + height: 12px; + width: 12px; + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2732%27%20height%3D%2732%27%3E%3Cpath%20fill%3D%22%23555555%22%20d%3D%22M31.427%202.846l-2.387-2.387-13.084%2013.082-13.082-13.082-2.386%202.387%2013.082%2013.082-13.082%2013.084%202.386%202.386%2013.082-13.082%2013.084%2013.082%202.386-2.386-13.084-13.084z%22%3E%3C/path%3E%3C/svg%3E'); + } } .flyout-notice__close { diff --git a/src/less/notice/ds4/notice-large.less b/src/less/notice/ds4/notice-large.less index e0f29fa6f..c8fe2218e 100644 --- a/src/less/notice/ds4/notice-large.less +++ b/src/less/notice/ds4/notice-large.less @@ -24,6 +24,10 @@ section.page-notice { margin-left: 16px; } +.page-notice__status span { + margin-left: 16px; +} + .page-notice__cta, .flyout-notice__cta { margin-left: 16px; diff --git a/src/less/notice/ds6/notice-base.less b/src/less/notice/ds6/notice-base.less index 03d2e7666..94da8acba 100644 --- a/src/less/notice/ds6/notice-base.less +++ b/src/less/notice/ds6/notice-base.less @@ -1,86 +1,121 @@ -/* UNFINISHED. WORK IN PROGRESS */ - .page-notice { + background-color: #ffffff; border-style: solid; - border-width: 5px; + border-width: 4px; + font-size: @ds6-font-size-14; + align-items: stretch; margin: 8px 0; - padding: 8px; } -span.page-notice { - display: inline-block; +div[role="region"].page-notice, +section.page-notice { + display: flex; } -a.page-notice { - color: black; - display: block; - text-decoration: none; +span[role="region"].page-notice { + display: inline-flex; } -button.page-notice { - display: block; - text-align: left; -} +.page-notice--confirmation { + border-color: @ds6-color-p032-green; -.page-notice--priority { - background-color: #fceef0; - border-color: #fd4664; + .page-notice__status { + background-color: @ds6-color-p032-green; + } } -.page-notice--info { - background-color: #effcff; - border-color: #c2f5ff; +.page-notice--priority { + border-color: @ds6-color-p012-red; - .page-notice__cta { - color: #006efc; + .page-notice__status { + background-color: @ds6-color-p012-red; } } -.page-notice--fluid { - width: 100%; +.page-notice--information { + border-color: @ds6-color-p004-blue; + + .page-notice__status { + background-color: @ds6-color-p004-blue; + } } -.page-notice__head { +.page-notice__status { + align-items: center; + color: white; display: flex; - margin-bottom: 8px; - h2, - h3, - h4 { - font-size: @ds6-font-size-20; - margin: 0; - width: 100%; - } + margin: 0; + padding: 12px 16px 12px 12px; } -.page-notice__cta { - .svg-icon-default; +.page-notice__content p, +.page-notice__cell p { // DEPRECATED: use .page-notice__content instead + margin: 16px; } .inline-notice { - display: flex; - font-weight: bold; margin: 8px 0; p { - align-self: center; - margin: 0 0 4px 0; + margin: 4px 0; + &:first-of-type { + font-weight: bold; + } } } -.inline-notice__cell--no-wrap { - align-self: center; - p { - margin: 0; - } +div.inline-notice { + display: flex; +} + +span.inline-notice { + display: inline-flex; } -.inline-notice__icon { - .svg-icon-base; +.page-notice__status span, +.inline-notice__status span { + background-repeat: no-repeat; + background-size: contain; + display: inline-block; +} + +.page-notice__status span { height: 28px; - margin: 0 4px; + margin: 0; width: 28px; } +.inline-notice__status span { + height: 24px; + margin: 1px 8px 0 0; + width: 24px; +} + +.page-notice--confirmation .page-notice__status span { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2729%27%20height%3D%2729%27%3E%3Ccircle%20cx%3D%2214.5%22%20cy%3D%2214.5%22%20r%3D%2214.5%22%20fill%3D%22%23ffffff%22%3E%3C/circle%3E%0A%3Cpath%20fill%3D%22%23ffffff%22%20stroke%3D%22%2371c63e%22%20stroke-width%3D%222%22%20d%3D%22M5.548%2015.01l5.773%206.286L21.522%209.824%22%3E%3C/path%3E%3C/svg%3E'); +} + +.inline-notice--confirmation .inline-notice__status span { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2729%27%20height%3D%2729%27%3E%3Ccircle%20cx%3D%2214.5%22%20cy%3D%2214.5%22%20r%3D%2214.5%22%20fill%3D%22%2371c63e%22%3E%3C/circle%3E%0A%3Cpath%20fill%3D%22%2371c63e%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20d%3D%22M5.548%2015.01l5.773%206.286L21.522%209.824%22%3E%3C/path%3E%3C/svg%3E'); +} + +.page-notice--priority .page-notice__status span { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2729%27%20height%3D%2729%27%3E%3Ccircle%20fill%3D%22%23ffffff%22%20cx%3D%2214.5%22%20cy%3D%2214.5%22%20r%3D%2214.5%22%3E%3C/circle%3E%0A%3Cpath%20fill%3D%22%23ff5151%22%20d%3D%22M14.5%2C18h0A1.5%2C1.5%2C0%2C0%2C1%2C13%2C16.5v-9A1.5%2C1.5%2C0%2C0%2C1%2C14.5%2C6h0A1.5%2C1.5%2C0%2C0%2C1%2C16%2C7.5v9A1.5%2C1.5%2C0%2C0%2C1%2C14.5%2C18Z%22%3E%3C/path%3E%0A%3Cpath%20fill%3D%22%23ff5151%22%20d%3D%22M14.5%2C23h0A1.5%2C1.5%2C0%2C0%2C1%2C13%2C21.5h0A1.5%2C1.5%2C0%2C0%2C1%2C14.5%2C20h0A1.5%2C1.5%2C0%2C0%2C1%2C16%2C21.5h0A1.5%2C1.5%2C0%2C0%2C1%2C14.5%2C23Z%22%3E%3C/path%3E%3C/svg%3E'); +} + +.inline-notice--priority .inline-notice__status span { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2729%27%20height%3D%2729%27%3E%3Ccircle%20fill%3D%22%23ff5151%22%20cx%3D%2214.5%22%20cy%3D%2214.5%22%20r%3D%2214.5%22%3E%3C/circle%3E%0A%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M14.5%2C18h0A1.5%2C1.5%2C0%2C0%2C1%2C13%2C16.5v-9A1.5%2C1.5%2C0%2C0%2C1%2C14.5%2C6h0A1.5%2C1.5%2C0%2C0%2C1%2C16%2C7.5v9A1.5%2C1.5%2C0%2C0%2C1%2C14.5%2C18Z%22%3E%3C/path%3E%0A%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M14.5%2C23h0A1.5%2C1.5%2C0%2C0%2C1%2C13%2C21.5h0A1.5%2C1.5%2C0%2C0%2C1%2C14.5%2C20h0A1.5%2C1.5%2C0%2C0%2C1%2C16%2C21.5h0A1.5%2C1.5%2C0%2C0%2C1%2C14.5%2C23Z%22%3E%3C/path%3E%3C/svg%3E'); +} + +.page-notice--information .page-notice__status span { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2729%27%20height%3D%2729%27%3E%3Ccircle%20cx%3D%2214.5%22%20cy%3D%2214.5%22%20r%3D%2214.5%22%20fill%3D%22%23ffffff%22%3E%3C/circle%3E%3Crect%20width%3D%223%22%20height%3D%2212%22%20x%3D%2213%22%20y%3D%2211%22%20fill%3D%22%234295ff%22%20rx%3D%221.5%22%3E%3C/rect%3E%3Crect%20width%3D%223%22%20height%3D%223%22%20x%3D%2213%22%20y%3D%226%22%20fill%3D%22%234295ff%22%20rx%3D%221.5%22%3E%3C/rect%3E%3C/svg%3E'); +} + +.inline-notice--information .inline-notice__status span { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2729%27%20height%3D%2729%27%3E%3Ccircle%20cx%3D%2214.5%22%20cy%3D%2214.5%22%20r%3D%2214.5%22%20fill%3D%22%234295ff%22%3E%3C/circle%3E%3Crect%20width%3D%223%22%20height%3D%2212%22%20x%3D%2213%22%20y%3D%2211%22%20fill%3D%22%23ffffff%22%20rx%3D%221.5%22%3E%3C/rect%3E%3Crect%20width%3D%223%22%20height%3D%223%22%20x%3D%2213%22%20y%3D%226%22%20fill%3D%22%23ffffff%22%20rx%3D%221.5%22%3E%3C/rect%3E%3C/svg%3E'); +} + +/* .flyout-notice { background-color: #006efc; color: white; @@ -140,3 +175,4 @@ button.page-notice { .flyout-notice a { outline-color: white; } +*/ diff --git a/src/less/notice/ds6/notice.less b/src/less/notice/ds6/notice.less index f11a71f02..f0cc0bbb0 100644 --- a/src/less/notice/ds6/notice.less +++ b/src/less/notice/ds6/notice.less @@ -1,4 +1,4 @@ @import "../../less/ds6/variables.less"; @import "../../less/ds6/mixins.less"; -//@import "notice-base.less"; +@import "notice-base.less"; diff --git a/src/less/utility/utility-common.less b/src/less/utility/utility-common.less index 661a39377..be1a680e5 100644 --- a/src/less/utility/utility-common.less +++ b/src/less/utility/utility-common.less @@ -17,8 +17,6 @@ .clipped { border: 0; clip: rect(1px, 1px, 1px, 1px); - -webkit-clip-path: inset(50%); - clip-path: inset(50%); height: 1px; overflow: hidden; padding: 0; @@ -29,8 +27,6 @@ .clipped--stealth:focus { clip: auto; - -webkit-clip-path: none; - clip-path: none; height: auto; overflow: visible; white-space: normal;