@amsterdam/design-system-css 1.0.1 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +46 -0
- package/dist/accordion/accordion.css +1 -1
- package/dist/accordion/accordion.css.map +1 -1
- package/dist/alert/alert.css +1 -1
- package/dist/alert/alert.css.map +1 -1
- package/dist/breakout/breakout.css +1 -1
- package/dist/breakout/breakout.css.map +1 -1
- package/dist/button/button.css +1 -1
- package/dist/button/button.css.map +1 -1
- package/dist/call-to-action-link/call-to-action-link.css +1 -0
- package/dist/call-to-action-link/call-to-action-link.css.map +1 -0
- package/dist/checkbox/checkbox.css +1 -1
- package/dist/checkbox/checkbox.css.map +1 -1
- package/dist/date-input/date-input.css +1 -1
- package/dist/date-input/date-input.css.map +1 -1
- package/dist/description-list/description-list.css +1 -1
- package/dist/description-list/description-list.css.map +1 -1
- package/dist/dialog/dialog.css +1 -1
- package/dist/dialog/dialog.css.map +1 -1
- package/dist/file-input/file-input.css +1 -1
- package/dist/file-input/file-input.css.map +1 -1
- package/dist/grid/grid.css +1 -1
- package/dist/grid/grid.css.map +1 -1
- package/dist/icon/icon.css +1 -1
- package/dist/icon/icon.css.map +1 -1
- package/dist/icon/icon.deprecated.css +1 -0
- package/dist/icon/icon.deprecated.css.map +1 -0
- package/dist/image-slider/image-slider.css +1 -1
- package/dist/image-slider/image-slider.css.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/invalid-form-alert/invalid-form-alert.css +1 -1
- package/dist/invalid-form-alert/invalid-form-alert.css.map +1 -1
- package/dist/menu/menu.css +1 -0
- package/dist/menu/menu.css.map +1 -0
- package/dist/ordered-list/ordered-list.css +1 -1
- package/dist/ordered-list/ordered-list.css.map +1 -1
- package/dist/page-footer/page-footer.css +1 -1
- package/dist/page-footer/page-footer.css.map +1 -1
- package/dist/page-header/page-header.css +1 -1
- package/dist/page-header/page-header.css.map +1 -1
- package/dist/page-heading/{page-heading.css → page-heading.deprecated.css} +1 -1
- package/dist/page-heading/page-heading.deprecated.css.map +1 -0
- package/dist/password-input/password-input.css +1 -1
- package/dist/password-input/password-input.css.map +1 -1
- package/dist/search-field/search-field.css +1 -1
- package/dist/search-field/search-field.css.map +1 -1
- package/dist/select/select.css +1 -1
- package/dist/select/select.css.map +1 -1
- package/dist/standalone-link/standalone-link.css +1 -1
- package/dist/standalone-link/standalone-link.css.map +1 -1
- package/dist/switch/switch.css +1 -1
- package/dist/switch/switch.css.map +1 -1
- package/dist/text-area/text-area.css +1 -1
- package/dist/text-area/text-area.css.map +1 -1
- package/dist/text-input/text-input.css +1 -1
- package/dist/text-input/text-input.css.map +1 -1
- package/dist/time-input/time-input.css +1 -1
- package/dist/time-input/time-input.css.map +1 -1
- package/dist/unordered-list/unordered-list.css +1 -1
- package/dist/unordered-list/unordered-list.css.map +1 -1
- package/documentation/coding-conventions.md +27 -0
- package/package.json +4 -4
- package/src/common/breakpoint.scss +5 -5
- package/src/components/accordion/accordion.scss +5 -10
- package/src/components/alert/alert.scss +1 -0
- package/src/components/button/README.md +5 -2
- package/src/components/button/button.scss +3 -0
- package/src/components/call-to-action-link/README.md +19 -0
- package/src/components/call-to-action-link/call-to-action-link.scss +32 -0
- package/src/components/card/README.md +1 -1
- package/src/components/checkbox/checkbox.scss +112 -207
- package/src/components/date-input/date-input.scss +22 -7
- package/src/components/file-input/file-input.scss +1 -0
- package/src/components/grid/README.md +1 -1
- package/src/components/heading/README.md +13 -6
- package/src/components/icon/README.md +2 -0
- package/src/components/icon/icon.deprecated.scss +12 -0
- package/src/components/icon/icon.scss +15 -1
- package/src/components/index.scss +4 -1
- package/src/components/invalid-form-alert/invalid-form-alert.scss +0 -11
- package/src/components/link/README.md +1 -0
- package/src/components/logo/README.md +1 -1
- package/src/components/menu/README.md +8 -0
- package/src/components/menu/menu.scss +82 -0
- package/src/components/ordered-list/ordered-list.scss +13 -8
- package/src/components/page/README.md +1 -1
- package/src/components/page-footer/README.md +11 -10
- package/src/components/page-header/README.md +1 -0
- package/src/components/page-heading/README.md +0 -16
- package/src/components/page-heading/{page-heading.scss → page-heading.deprecated.scss} +1 -0
- package/src/components/password-input/password-input.scss +14 -8
- package/src/components/radio/README.md +4 -2
- package/src/components/search-field/search-field.scss +17 -13
- package/src/components/select/select.scss +14 -15
- package/src/components/skip-link/README.md +5 -4
- package/src/components/standalone-link/README.md +7 -3
- package/src/components/standalone-link/standalone-link.scss +4 -7
- package/src/components/switch/switch.scss +1 -0
- package/src/components/table/README.md +3 -4
- package/src/components/text-area/text-area.scss +14 -8
- package/src/components/text-input/text-input.scss +14 -8
- package/src/components/time-input/time-input.scss +18 -7
- package/src/components/unordered-list/unordered-list.scss +13 -8
- package/dist/page-heading/page-heading.css.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../src/components/menu/menu.scss","../../src/common/hyphenation.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAeA,UACE,wCACA,oCACA,wCACA,wCAGF,gBACE,aCjBA,kEACA,aACA,yBCEA,kCACA,2BACA,8BACA,sBFHA,gBACA,eACA,uBAiBA,uCAPF,gBAQI,8BAIJ,gBACE,uBACA,iCACA,aACA,6BACA,mDACA,iDACA,mDACA,+DACA,yEACA,iEAEA,sBACE,uCACA,qEAGF,gCACE,mBAGF,uCArBF,gBAsBI,mBACA,sBACA,MAEA,gCACE,0DACA,+DAKN,0BACE,0CAEA,gCACE,gDAIJ,yBACE,yCAEA,+BACE","file":"menu.css"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.ams-ordered-list{box-sizing:border-box;display:grid;gap:var(--ams-ordered-list-gap);text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);hyphens:auto;overflow-wrap:break-word;list-style-type:none;margin-block:0;padding-inline-start:0}.ams-ordered-list:not(.ams-ordered-list--no-markers){color:var(--ams-ordered-list-color);font-family:var(--ams-ordered-list-font-family);font-size:var(--ams-ordered-list-font-size);font-weight:var(--ams-ordered-list-font-weight);line-height:var(--ams-ordered-list-line-height);list-style-type:var(--ams-ordered-list-list-style-type)}.ams-ordered-list:not(.ams-ordered-list--no-markers) .ams-ordered-list__item{margin-inline-start:var(--ams-ordered-list-item-margin-inline-start);padding-inline-start:var(--ams-ordered-list-item-padding-inline-start)}.ams-ordered-list--inverse:not(.ams-ordered-list--no-markers){color:var(--ams-ordered-list-inverse-color)}.ams-ordered-list--small:not(.ams-ordered-list--no-markers){font-size:var(--ams-ordered-list-small-font-size);line-height:var(--ams-ordered-list-small-line-height)}:is(.ams-ordered-list,.ams-unordered-list) .ams-ordered-list{gap:var(--ams-ordered-list-ordered-list-gap);list-style-type:var(--ams-ordered-list-ordered-list-list-style-type);padding-block-
|
|
1
|
+
.ams-ordered-list{box-sizing:border-box;display:grid;gap:var(--ams-ordered-list-gap);text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);hyphens:auto;overflow-wrap:break-word;list-style-type:none;margin-block:0;padding-inline-start:0}.ams-ordered-list:not(.ams-ordered-list--no-markers){color:var(--ams-ordered-list-color);font-family:var(--ams-ordered-list-font-family);font-size:var(--ams-ordered-list-font-size);font-weight:var(--ams-ordered-list-font-weight);line-height:var(--ams-ordered-list-line-height);list-style-type:var(--ams-ordered-list-list-style-type)}.ams-ordered-list:not(.ams-ordered-list--no-markers) .ams-ordered-list__item{margin-inline-start:var(--ams-ordered-list-item-margin-inline-start);padding-inline-start:var(--ams-ordered-list-item-padding-inline-start)}.ams-ordered-list--inverse:not(.ams-ordered-list--no-markers){color:var(--ams-ordered-list-inverse-color)}.ams-ordered-list--small:not(.ams-ordered-list--no-markers){font-size:var(--ams-ordered-list-small-font-size);line-height:var(--ams-ordered-list-small-line-height)}:is(.ams-ordered-list,.ams-unordered-list) .ams-ordered-list{gap:var(--ams-ordered-list-ordered-list-gap);list-style-type:var(--ams-ordered-list-ordered-list-list-style-type);padding-block-start:var(--ams-ordered-list-ordered-list-padding-block-start)}:is(.ams-ordered-list,.ams-unordered-list) .ams-ordered-list .ams-ordered-list__item{margin-inline-start:var(--ams-ordered-list-ordered-list-item-margin-inline-start);padding-inline-start:var(--ams-ordered-list-ordered-list-item-padding-inline-start)}:is(.ams-ordered-list,.ams-unordered-list)>:not(:last-child)>.ams-ordered-list{padding-block-end:var(--ams-ordered-list-ordered-list-padding-block-end)}/*# sourceMappingURL=ordered-list.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../src/components/ordered-list/ordered-list.scss","../../src/common/text-rendering.scss","../../src/common/hyphenation.scss"],"names":[],"mappings":"AAcA,kBACE,sBACA,aACA,gCCPA,kCACA,2BACA,8BACA,sBCPA,kEACA,aACA,yBFCA,qBACA,eACA,uBAaF,qDACE,oCACA,gDACA,4CACA,gDACA,gDACA,wDAEA,6EACE,qEACA,uEAIJ,8DACE,4CAGF,4DACE,kDACA,
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../src/components/ordered-list/ordered-list.scss","../../src/common/text-rendering.scss","../../src/common/hyphenation.scss"],"names":[],"mappings":"AAcA,kBACE,sBACA,aACA,gCCPA,kCACA,2BACA,8BACA,sBCPA,kEACA,aACA,yBFCA,qBACA,eACA,uBAaF,qDACE,oCACA,gDACA,4CACA,gDACA,gDACA,wDAEA,6EACE,qEACA,uEAIJ,8DACE,4CAGF,4DACE,kDACA,sDAIA,6DACE,6CACA,qEACA,6EAEA,qFACE,kFACA,oFAIJ,+EACE","file":"ordered-list.css"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.ams-page-footer__spotlight{background-color:var(--ams-page-footer-spotlight-background-color)}.ams-page-footer__menu{column-gap:var(--ams-page-footer-menu-column-gap);display:flex;flex-wrap:wrap;padding-block:var(--ams-page-footer-menu-padding-block);padding-inline:var(--ams-page-footer-menu-padding-inline);row-gap:var(--ams-page-footer-menu-row-gap);list-style:none;margin-block:0}@media screen and (min-width:
|
|
1
|
+
.ams-page-footer__spotlight{background-color:var(--ams-page-footer-spotlight-background-color)}.ams-page-footer__menu{column-gap:var(--ams-page-footer-menu-column-gap);display:flex;flex-wrap:wrap;padding-block:var(--ams-page-footer-menu-padding-block);padding-inline:var(--ams-page-footer-menu-padding-inline);row-gap:var(--ams-page-footer-menu-row-gap);list-style:none;margin-block:0}@media screen and (min-width: 37.5rem){.ams-page-footer__menu{padding-inline:var(--ams-page-footer-menu-medium-padding-inline)}}@media screen and (min-width: 72.5rem){.ams-page-footer__menu{padding-inline:var(--ams-page-footer-menu-wide-padding-inline)}}.ams-page-footer__menu-link{color:var(--ams-page-footer-menu-link-color);font-family:var(--ams-page-footer-menu-link-font-family);font-size:var(--ams-page-footer-menu-link-font-size);font-weight:var(--ams-page-footer-menu-link-font-weight);line-height:var(--ams-page-footer-menu-link-line-height);outline-offset:var(--ams-page-footer-menu-link-outline-offset);text-decoration-line:var(--ams-page-footer-menu-link-text-decoration-line);text-decoration-thickness:var(--ams-page-footer-menu-link-text-decoration-thickness);text-underline-offset:var(--ams-page-footer-menu-link-text-underline-offset);hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);hyphens:auto;overflow-wrap:break-word;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}.ams-page-footer__menu-link:hover{color:var(--ams-page-footer-menu-link-hover-color);text-decoration-line:var(--ams-page-footer-menu-link-hover-text-decoration-line)}/*# sourceMappingURL=page-footer.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../src/components/page-footer/page-footer.scss","../../src/common/hyphenation.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAcA,4BACE,mEAGF,uBACE,kDACA,aACA,eACA,wDACA,0DACA,4CAdA,gBACA,eAiBA,
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../src/components/page-footer/page-footer.scss","../../src/common/hyphenation.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAcA,4BACE,mEAGF,uBACE,kDACA,aACA,eACA,wDACA,0DACA,4CAdA,gBACA,eAiBA,uCAVF,uBAWI,kEAGF,uCAdF,uBAeI,gEAIJ,4BACE,6CACA,yDACA,qDACA,yDACA,yDACA,+DACA,2EACA,qFACA,6ECxCA,kEACA,aACA,yBCEA,kCACA,2BACA,8BACA,sBFsCA,kCACE,mDACA","file":"page-footer.css"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.ams-page-header{display:grid;font-family:var(--ams-page-header-font-family);padding-block:var(--ams-page-header-padding-block);padding-inline:var(--ams-page-header-padding-inline)}@media screen and (min-width:
|
|
1
|
+
.ams-page-header{display:grid;font-family:var(--ams-page-header-font-family);padding-block:var(--ams-page-header-padding-block);padding-inline:var(--ams-page-header-padding-inline)}@media screen and (min-width: 37.5rem){.ams-page-header{padding-inline:var(--ams-page-header-medium-padding-inline)}}@media screen and (min-width: 72.5rem){.ams-page-header{padding-inline:var(--ams-page-header-wide-padding-inline)}}.ams-page-header__logo-link{align-items:center;align-self:start;column-gap:var(--ams-page-header-logo-link-column-gap);display:flex;grid-area:1/1;inline-size:fit-content;outline-offset:var(--ams-page-header-logo-link-outline-offset);text-decoration:none}@media(forced-colors: active){.ams-page-header__logo-link .ams-logo__emblem,.ams-page-header__logo-link .ams-logo__text-primary,.ams-page-header__logo-link .ams-logo__text-secondary{fill:LinkText}}.ams-page-header__logo-link--hidden{opacity:0%;user-select:none}.ams-page-header__logo-container{flex-shrink:0;inline-size:.75rem;overflow:hidden}@media screen and (min-width: 37.5rem){.ams-page-header__logo-container{inline-size:auto}}.ams-page-header__brand-name{color:var(--ams-page-header-brand-name-color);font-size:var(--ams-page-header-brand-name-font-size);font-weight:var(--ams-page-header-brand-name-font-weight);line-height:var(--ams-page-header-brand-name-line-height);text-wrap:var(--ams-page-header-brand-name-text-wrap)}.ams-page-header__navigation{column-gap:var(--ams-page-header-navigation-column-gap);display:flex;flex-wrap:wrap;grid-area:1/1;pointer-events:none;row-gap:var(--ams-page-header-navigation-row-gap)}.ams-page-header__menu{align-items:center;column-gap:var(--ams-page-header-menu-column-gap);display:flex;flex-wrap:wrap;justify-content:flex-end;margin-inline-start:auto;pointer-events:auto;row-gap:var(--ams-page-header-menu-row-gap);list-style:none;margin-block:0;padding-inline-start:0}@media screen and not (min-width: 72.5rem){.ams-page-header__menu-item{display:none}}.ams-page-header__menu-item--fixed{display:revert}.ams-page-header__menu-link{display:inline-block;text-decoration-line:var(--ams-page-header-menu-link-text-decoration-line);text-decoration-thickness:var(--ams-page-header-menu-link-text-decoration-thickness);text-underline-offset:var(--ams-page-header-menu-link-text-underline-offset);color:var(--ams-page-header-menu-item-color);font-size:var(--ams-page-header-menu-item-font-size);font-weight:var(--ams-page-header-menu-item-font-weight);line-height:var(--ams-page-header-menu-item-line-height);outline-offset:var(--ams-page-header-menu-item-outline-offset);padding-block:var(--ams-page-header-menu-item-padding-block);touch-action:manipulation;white-space:nowrap;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}.ams-page-header__menu-link:hover{color:var(--ams-page-header-menu-item-hover-color)}.ams-page-header__menu-link:hover{text-decoration-line:var(--ams-page-header-menu-link-hover-text-decoration-line)}@media screen and (min-width: 72.5rem){.ams-page-header__mega-menu-button-item--hide-on-wide-window{display:none}}.ams-page-header__mega-menu-button{column-gap:var(--ams-page-header-menu-item-column-gap);cursor:var(--ams-page-header-mega-menu-button-cursor);display:grid;font-family:inherit;grid-auto-flow:column;color:var(--ams-page-header-menu-item-color);font-size:var(--ams-page-header-menu-item-font-size);font-weight:var(--ams-page-header-menu-item-font-weight);line-height:var(--ams-page-header-menu-item-line-height);outline-offset:var(--ams-page-header-menu-item-outline-offset);padding-block:var(--ams-page-header-menu-item-padding-block);touch-action:manipulation;white-space:nowrap;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}.ams-page-header__mega-menu-button:hover{color:var(--ams-page-header-menu-item-hover-color)}.ams-page-header__mega-menu-button{background:none;border:none;margin-block:0;margin-inline:0;padding-inline:0}.ams-page-header__mega-menu-button[aria-expanded=true]{font-weight:var(--ams-page-header-mega-menu-button-label-open-font-weight)}.ams-page-header__mega-menu-button-label,.ams-page-header__mega-menu-button-hidden-label{grid-area:1/1}.ams-page-header__mega-menu-button-hidden-label{font-weight:var(--ams-page-header-mega-menu-button-label-open-font-weight);pointer-events:none;user-select:none;visibility:hidden}.ams-page-header__menu-icon line{stroke:currentColor;stroke-width:3px;transform-origin:center;transition:translate .1s ease-in-out,rotate .2s ease-in-out,opacity .1s ease-in-out}@media(prefers-reduced-motion){.ams-page-header__menu-icon line{transition:none}}.ams-page-header__menu-icon .ams-page-header__menu-icon-top{translate:0 -7px}.ams-page-header__menu-icon .ams-page-header__menu-icon-bottom{translate:0 7px}.ams-page-header__menu-icon--open .ams-page-header__menu-icon-top{rotate:45deg;translate:0}.ams-page-header__menu-icon--open .ams-page-header__menu-icon-middle{opacity:0%}.ams-page-header__menu-icon--open .ams-page-header__menu-icon-bottom{rotate:-45deg;translate:0}.ams-page-header__mega-menu{inline-size:100%;pointer-events:auto}.ams-page-header__mega-menu .ams-grid{padding-inline:0}.ams-page-header__mega-menu--closed.ams-page-header__mega-menu--closed{display:none}@media screen and (min-width: 72.5rem){.ams-page-header__grid-cell-narrow-window-only{display:none}}/*# sourceMappingURL=page-header.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../src/components/page-header/page-header.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAQA,iBAME,aACA,+CACA,mDACA,qDAEA,
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../src/components/page-header/page-header.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAQA,iBAME,aACA,+CACA,mDACA,qDAEA,uCAXF,iBAYI,6DAGF,uCAfF,iBAgBI,2DAIJ,4BACE,mBACA,iBACA,uDACA,aACA,cACA,wBACA,+DACA,qBAEA,8BACE,wJAGE,eAKN,oCACE,WACA,iBAGF,iCACE,cACA,mBACA,gBAEA,uCALF,iCAMI,kBAIJ,6BACE,8CACA,sDACA,0DACA,0DACA,sDAGF,6BACE,wDACA,aACA,eACA,cAGA,oBACA,kDASF,uBACE,mBACA,kDACA,aACA,eACA,yBACA,yBACA,oBACA,4CAbA,gBACA,eACA,uBAkBA,2CADF,4BAEI,cAKJ,mCACE,eAoBF,4BACE,qBACA,2EACA,qFACA,6EApBA,6CACA,qDACA,yDACA,yDACA,+DACA,6DACA,0BACA,mBC9GA,kCACA,2BACA,8BACA,sBD+GA,kCACE,mDAYF,kCACE,iFAKF,uCADF,6DAEI,cAcJ,mCACE,uDACA,sDACA,aACA,oBACA,sBAlDA,6CACA,qDACA,yDACA,yDACA,+DACA,6DACA,0BACA,mBC9GA,kCACA,2BACA,8BACA,sBD+GA,yCACE,mDAiCJ,mCATE,gBACA,YACA,eACA,gBACA,iBAgBF,uDACE,2EAGF,yFAEE,cAKF,gDACE,2EACA,oBACA,iBACA,kBAIA,iCACE,oBACA,iBACA,wBACA,WACE,yEAIF,+BATF,iCAUI,iBAIJ,4DACE,iBAGF,+DACE,gBAKF,kEACE,aACA,YAEF,qEACE,WAEF,qEACE,cACA,YAIJ,4BACE,iBACA,oBAIA,sCACE,iBAIJ,uEACE,aAIA,uCADF,+CAEI","file":"page-header.css"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.ams-page-heading{box-sizing:border-box;break-after:avoid;break-inside:avoid;color:var(--ams-page-heading-color);font-family:var(--ams-page-heading-font-family);font-size:var(--ams-page-heading-font-size);font-weight:var(--ams-page-heading-font-weight);line-height:var(--ams-page-heading-line-height);text-wrap:var(--ams-page-heading-text-wrap);hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);hyphens:auto;overflow-wrap:break-word;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;margin-block:0}.ams-page-heading--inverse{color:var(--ams-page-heading-inverse-color)}/*# sourceMappingURL=page-heading.css.map */
|
|
1
|
+
.ams-page-heading{box-sizing:border-box;break-after:avoid;break-inside:avoid;color:var(--ams-page-heading-color);font-family:var(--ams-page-heading-font-family);font-size:var(--ams-page-heading-font-size);font-weight:var(--ams-page-heading-font-weight);line-height:var(--ams-page-heading-line-height);text-wrap:var(--ams-page-heading-text-wrap);hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);hyphens:auto;overflow-wrap:break-word;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;margin-block:0}.ams-page-heading--inverse{color:var(--ams-page-heading-inverse-color)}/*# sourceMappingURL=page-heading.deprecated.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../src/components/page-heading/page-heading.deprecated.scss","../../src/common/hyphenation.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAaA,kBACE,sBACA,kBACA,mBACA,oCACA,gDACA,4CACA,gDACA,gDACA,4CChBA,kEACA,aACA,yBCEA,kCACA,2BACA,8BACA,sBFJA,eAoBF,2BACE","file":"page-heading.deprecated.css"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.ams-password-input{background-color:var(--ams-password-input-background-color);border-color:var(--ams-password-input-border-color);border-style:var(--ams-password-input-border-style);border-width:var(--ams-password-input-border-width);box-sizing:border-box;color:var(--ams-password-input-color);font-family:var(--ams-password-input-font-family);font-size:var(--ams-password-input-font-size);font-weight:var(--ams-password-input-font-weight);line-height:var(--ams-password-input-line-height);max-inline-size:100%;outline-offset:var(--ams-password-input-outline-offset);padding-block:var(--ams-password-input-padding-block);padding-inline:var(--ams-password-input-padding-inline);touch-action:manipulation;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;-webkit-appearance:none;appearance:none;border-radius:0;margin-block:0}.ams-password-input:not([size]){inline-size:100%}.ams-password-input::placeholder{color:var(--ams-password-input-placeholder-color);opacity:100%}.ams-password-input:disabled{color:var(--ams-password-input-disabled-color);cursor:var(--ams-password-input-disabled-cursor)}.ams-password-input:invalid,.ams-password-input[aria-invalid=true]{border-color:var(--ams-password-input-invalid-border-color)}.ams-password-input:invalid:hover,.ams-password-input[aria-invalid=true]:hover{border-color:var(--ams-password-input-invalid-hover-border-color);box-shadow:var(--ams-password-input-invalid-hover-box-shadow)}
|
|
1
|
+
.ams-password-input{background-color:var(--ams-password-input-background-color);border-color:var(--ams-password-input-border-color);border-style:var(--ams-password-input-border-style);border-width:var(--ams-password-input-border-width);box-sizing:border-box;color:var(--ams-password-input-color);font-family:var(--ams-password-input-font-family);font-size:var(--ams-password-input-font-size);font-weight:var(--ams-password-input-font-weight);line-height:var(--ams-password-input-line-height);max-inline-size:100%;outline-offset:var(--ams-password-input-outline-offset);padding-block:var(--ams-password-input-padding-block);padding-inline:var(--ams-password-input-padding-inline);touch-action:manipulation;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;-webkit-appearance:none;appearance:none;border-radius:0;margin-block:0}.ams-password-input:not([size]){inline-size:100%}.ams-password-input::placeholder{color:var(--ams-password-input-placeholder-color);opacity:100%}.ams-password-input:disabled{color:var(--ams-password-input-disabled-color);cursor:var(--ams-password-input-disabled-cursor)}.ams-password-input:not(:disabled):invalid,.ams-password-input:not(:disabled)[aria-invalid=true]{border-color:var(--ams-password-input-invalid-border-color)}.ams-password-input:not(:disabled):hover{box-shadow:var(--ams-password-input-hover-box-shadow)}.ams-password-input:not(:disabled):invalid:hover,.ams-password-input:not(:disabled)[aria-invalid=true]:hover{border-color:var(--ams-password-input-invalid-hover-border-color);box-shadow:var(--ams-password-input-invalid-hover-box-shadow)}/*# sourceMappingURL=password-input.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../src/components/password-input/password-input.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAcA,oBACE,4DACA,oDACA,oDACA,oDACA,sBACA,sCACA,kDACA,8CACA,kDACA,kDACA,qBACA,wDACA,sDACA,wDACA,0BCnBA,kCACA,2BACA,8BACA,sBDLA,wBACA,gBACA,gBACA,eAwBF,gCACE,
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../src/components/password-input/password-input.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAcA,oBACE,4DACA,oDACA,oDACA,oDACA,sBACA,sCACA,kDACA,8CACA,kDACA,kDACA,qBACA,wDACA,sDACA,wDACA,0BCnBA,kCACA,2BACA,8BACA,sBDLA,wBACA,gBACA,gBACA,eAwBF,gCACE,iBAOF,iCACE,kDAJA,aASF,6BACE,+CACA,iDAGF,iGAEE,4DAGF,yCACE,sDAGF,6GAEE,kEACA","file":"password-input.css"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.ams-search-field{display:flex;isolation:isolate}.ams-search-field__input{background-color:var(--ams-search-field-input-background-color);border-color:var(--ams-search-field-input-border-color);border-style:var(--ams-search-field-input-border-style);border-width:var(--ams-search-field-input-border-width);box-sizing:border-box;color:var(--ams-search-field-input-color);font-family:var(--ams-search-field-input-font-family);font-size:var(--ams-search-field-input-font-size);font-weight:var(--ams-search-field-input-font-weight);inline-size:100%;line-height:var(--ams-search-field-input-line-height);outline-offset:var(--ams-search-field-input-outline-offset);padding-block:var(--ams-search-field-input-padding-block);padding-inline:var(--ams-search-field-input-padding-inline);touch-action:manipulation;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;-webkit-appearance:none;appearance:none;border-radius:0;margin-block:0}.ams-search-field__input:
|
|
1
|
+
.ams-search-field{display:flex;isolation:isolate}.ams-search-field__input{background-color:var(--ams-search-field-input-background-color);border-color:var(--ams-search-field-input-border-color);border-style:var(--ams-search-field-input-border-style);border-width:var(--ams-search-field-input-border-width);box-sizing:border-box;color:var(--ams-search-field-input-color);font-family:var(--ams-search-field-input-font-family);font-size:var(--ams-search-field-input-font-size);font-weight:var(--ams-search-field-input-font-weight);inline-size:100%;line-height:var(--ams-search-field-input-line-height);outline-offset:var(--ams-search-field-input-outline-offset);padding-block:var(--ams-search-field-input-padding-block);padding-inline:var(--ams-search-field-input-padding-inline);touch-action:manipulation;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;-webkit-appearance:none;appearance:none;border-radius:0;margin-block:0}.ams-search-field__input:focus{z-index:1}.ams-search-field__input::placeholder{color:var(--ams-search-field-input-placeholder-color)}.ams-search-field__input:not(:disabled):invalid,.ams-search-field__input:not(:disabled)[aria-invalid=true]{border-color:var(--ams-search-field-input-invalid-border-color)}.ams-search-field__input:not(:disabled):hover{box-shadow:var(--ams-search-field-input-hover-box-shadow)}.ams-search-field__input:not(:disabled):invalid:hover,.ams-search-field__input:not(:disabled)[aria-invalid=true]:hover{border-color:var(--ams-search-field-input-invalid-hover-border-color);box-shadow:var(--ams-search-field-input-invalid-hover-box-shadow)}.ams-search-field__input::-webkit-search-cancel-button{appearance:none;background-image:var(--ams-search-field-input-cancel-button-background-image);block-size:var(--ams-search-field-input-cancel-button-block-size);cursor:var(--ams-search-field-input-cancel-button-cursor);inline-size:var(--ams-search-field-input-cancel-button-inline-size);margin-inline-start:.5rem}/*# sourceMappingURL=search-field.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../src/components/search-field/search-field.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAOA,kBACE,aACA,kBAUF,yBACE,gEACA,wDACA,wDACA,wDACA,sBACA,0CACA,sDACA,kDACA,sDACA,iBACA,sDACA,4DACA,0DACA,4DACA,0BCxBA,kCACA,2BACA,8BACA,8CDCA,gBACA,gBACA,eAuBA,+BACE,
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../src/components/search-field/search-field.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAOA,kBACE,aACA,kBAUF,yBACE,gEACA,wDACA,wDACA,wDACA,sBACA,0CACA,sDACA,kDACA,sDACA,iBACA,sDACA,4DACA,0DACA,4DACA,0BCxBA,kCACA,2BACA,8BACA,8CDCA,gBACA,gBACA,eAuBA,+BACE,UAQJ,sCACE,sDAGF,2GAEE,gEAGF,8CACE,0DAGF,uHAEE,sEACA,kEAGF,uDACE,gBACA,8EACA,kEACA,0DACA,oEACA","file":"search-field.css"}
|
package/dist/select/select.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.ams-select{background-color:var(--ams-select-background-color);border-color:var(--ams-select-border-color);border-style:var(--ams-select-border-style);border-width:var(--ams-select-border-width);color:var(--ams-select-color);font-family:var(--ams-select-font-family);font-size:var(--ams-select-font-size);font-weight:var(--ams-select-font-weight);
|
|
1
|
+
.ams-select{background-color:var(--ams-select-background-color);border-color:var(--ams-select-border-color);border-style:var(--ams-select-border-style);border-width:var(--ams-select-border-width);color:var(--ams-select-color);font-family:var(--ams-select-font-family);font-size:var(--ams-select-font-size);font-weight:var(--ams-select-font-weight);line-height:var(--ams-select-line-height);max-inline-size:100%;outline-offset:var(--ams-select-outline-offset);padding-block:var(--ams-select-padding-block);padding-inline:var(--ams-select-padding-inline);touch-action:manipulation;appearance:none;border-radius:0}.ams-select:not([multiple]){background-image:var(--ams-select-background-image);background-position:var(--ams-select-background-position);background-repeat:no-repeat;background-size:1em 1em}.ams-select:disabled{color:var(--ams-select-disabled-color);cursor:var(--ams-select-disabled-cursor)}.ams-select:disabled:not([multiple]){background-image:var(--ams-select-disabled-background-image)}.ams-select:not(:disabled):invalid,.ams-select:not(:disabled)[aria-invalid=true]{border-color:var(--ams-select-invalid-border-color)}.ams-select:not(:disabled):hover{box-shadow:var(--ams-select-hover-box-shadow)}.ams-select:not(:disabled):hover:not([multiple]){background-image:var(--ams-select-hover-background-image)}.ams-select:not(:disabled):invalid:hover,.ams-select:not(:disabled)[aria-invalid=true]:hover{border-color:var(--ams-select-invalid-hover-border-color);box-shadow:var(--ams-select-invalid-hover-box-shadow)}.ams-select__option:disabled{color:var(--ams-select-option-disabled-color)}/*# sourceMappingURL=select.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../src/components/select/select.scss"],"names":[],"mappings":"AAUA,YACE,oDACA,4CACA,4CACA,4CACA,8BACA,0CACA,sCACA,0CACA,
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../src/components/select/select.scss"],"names":[],"mappings":"AAUA,YACE,oDACA,4CACA,4CACA,4CACA,8BACA,0CACA,sCACA,0CACA,0CACA,qBACA,gDACA,8CACA,gDACA,0BAlBA,gBACA,gBAqBA,4BACE,oDACA,0DACA,4BACA,wBAIJ,qBACE,uCACA,yCAEA,qCACE,6DAIJ,iFAEE,oDAGF,iCACE,8CAEA,iDACE,0DAIJ,6FAEE,0DACA,sDAGF,6BACE","file":"select.css"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.ams-standalone-link{color:var(--ams-standalone-link-color);column-gap:var(--ams-standalone-link-column-gap);display:inline-flex;font-family:var(--ams-standalone-link-font-family);font-size:var(--ams-standalone-link-font-size);font-weight:var(--ams-standalone-link-font-weight);line-height:var(--ams-standalone-link-line-height);outline-offset:var(--ams-standalone-link-outline-offset);text-decoration-thickness:var(--ams-standalone-link-text-decoration-thickness);text-underline-offset:var(--ams-standalone-link-text-underline-offset);hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);hyphens:auto;overflow-wrap:break-word;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}.ams-standalone-link:hover{color:var(--ams-standalone-link-hover-color);text-decoration-
|
|
1
|
+
.ams-standalone-link{color:var(--ams-standalone-link-color);column-gap:var(--ams-standalone-link-column-gap);display:inline-flex;font-family:var(--ams-standalone-link-font-family);font-size:var(--ams-standalone-link-font-size);font-weight:var(--ams-standalone-link-font-weight);line-height:var(--ams-standalone-link-line-height);outline-offset:var(--ams-standalone-link-outline-offset);text-decoration-line:var(--ams-standalone-link-text-decoration-line);text-decoration-thickness:var(--ams-standalone-link-text-decoration-thickness);text-underline-offset:var(--ams-standalone-link-text-underline-offset);hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);hyphens:auto;overflow-wrap:break-word;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}.ams-standalone-link:hover{color:var(--ams-standalone-link-hover-color);text-decoration-line:var(--ams-standalone-link-hover-text-decoration-line)}.ams-standalone-link--contrast{color:var(--ams-standalone-link-contrast-color)}.ams-standalone-link--contrast:hover{color:var(--ams-standalone-link-contrast-hover-color)}.ams-standalone-link--inverse{color:var(--ams-standalone-link-inverse-color)}.ams-standalone-link--inverse:hover{color:var(--ams-standalone-link-inverse-hover-color)}/*# sourceMappingURL=standalone-link.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../src/components/standalone-link/standalone-link.scss","../../src/common/hyphenation.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAQA,qBACE,uCACA,iDACA,oBACA,mDACA,+CACA,mDACA,mDACA,yDACA,+EACA,
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../src/components/standalone-link/standalone-link.scss","../../src/common/hyphenation.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAQA,qBACE,uCACA,iDACA,oBACA,mDACA,+CACA,mDACA,mDACA,yDACA,qEACA,+EACA,uECbA,kEACA,aACA,yBCEA,kCACA,2BACA,8BACA,sBFWA,2BACE,6CACA,2EAIJ,+BACE,gDAEA,qCACE,sDAIJ,8BACE,+CAEA,oCACE","file":"standalone-link.css"}
|
package/dist/switch/switch.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.ams-switch__input{appearance:none;inline-size:0;margin-block:0;margin-inline:0}.ams-switch__input:focus+label{outline:auto}.ams-switch__input:focus:not(:focus-visible)+label{outline:0}.ams-switch__label{--ams-switch-track-border-width: var(--ams-border-width-m);background-color:var(--ams-switch-background-color);border:var(--ams-switch-track-border-width) solid rgba(0,0,0,0);border-radius:calc(var(--ams-switch-thumb-inline-size)*2);box-sizing:border-box;cursor:var(--ams-switch-cursor);display:inline-block;inline-size:var(--ams-switch-inline-size);outline-offset:var(--ams-switch-outline-offset);transition:background-color .2s ease-in-out}.ams-switch__label::before{background-color:var(--ams-switch-thumb-background-color);block-size:var(--ams-switch-thumb-block-size);border-radius:50%;content:"";display:block;inline-size:var(--ams-switch-thumb-inline-size);transition-duration:.1s;transition-property:box-shadow,transform;transition-timing-function:ease-in-out}@media(forced-colors: active){.ams-switch__label::before{background-color:FieldText}}.ams-switch__input:checked+.ams-switch__label{background-color:var(--ams-switch-checked-background-color)}.ams-switch__input:disabled+.ams-switch__label{background-color:var(--ams-switch-disabled-background-color);cursor:var(--ams-switch-disabled-cursor)}.ams-switch__input:checked+.ams-switch__label::before{transform:translate(calc(100% - 2 * var(--ams-switch-track-border-width)))}.ams-switch:hover .ams-switch__input:enabled+.ams-switch__label::before{box-shadow:var(--ams-switch-thumb-hover-box-shadow)}/*# sourceMappingURL=switch.css.map */
|
|
1
|
+
.ams-switch__input{appearance:none;inline-size:0;margin-block:0;margin-inline:0}.ams-switch__input:focus+label{outline:auto}.ams-switch__input:focus:not(:focus-visible)+label{outline:0}.ams-switch__label{--ams-switch-track-border-width: var(--ams-border-width-m);background-color:var(--ams-switch-background-color);border:var(--ams-switch-track-border-width) solid rgba(0,0,0,0);border-radius:calc(var(--ams-switch-thumb-inline-size)*2);box-sizing:border-box;cursor:var(--ams-switch-cursor);display:inline-block;inline-size:var(--ams-switch-inline-size);outline-offset:var(--ams-switch-outline-offset);transition:background-color .2s ease-in-out;vertical-align:middle}.ams-switch__label::before{background-color:var(--ams-switch-thumb-background-color);block-size:var(--ams-switch-thumb-block-size);border-radius:50%;content:"";display:block;inline-size:var(--ams-switch-thumb-inline-size);transition-duration:.1s;transition-property:box-shadow,transform;transition-timing-function:ease-in-out}@media(forced-colors: active){.ams-switch__label::before{background-color:FieldText}}.ams-switch__input:checked+.ams-switch__label{background-color:var(--ams-switch-checked-background-color)}.ams-switch__input:disabled+.ams-switch__label{background-color:var(--ams-switch-disabled-background-color);cursor:var(--ams-switch-disabled-cursor)}.ams-switch__input:checked+.ams-switch__label::before{transform:translate(calc(100% - 2 * var(--ams-switch-track-border-width)))}.ams-switch:hover .ams-switch__input:enabled+.ams-switch__label::before{box-shadow:var(--ams-switch-thumb-hover-box-shadow)}/*# sourceMappingURL=switch.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../src/components/switch/switch.scss","../../src/common/hide-input.scss","../../src/common/input-label-focus.scss"],"names":[],"mappings":"AAQA,mBCFE,gBACA,cACA,eACA,gBCIA,+BACE,aAGF,mDACE,UFLJ,mBACE,2DAEA,oDAGA,gEACA,0DACA,sBACA,gCACA,qBACA,0CACA,gDACA,
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../src/components/switch/switch.scss","../../src/common/hide-input.scss","../../src/common/input-label-focus.scss"],"names":[],"mappings":"AAQA,mBCFE,gBACA,cACA,eACA,gBCIA,+BACE,aAGF,mDACE,UFLJ,mBACE,2DAEA,oDAGA,gEACA,0DACA,sBACA,gCACA,qBACA,0CACA,gDACA,4CACA,sBAGF,2BACE,0DACA,8CACA,kBACA,WACA,cACA,gDACA,wBACA,yCACA,uCAEA,8BAXF,2BAYI,4BAIJ,8CACE,4DAGF,+CACE,6DACA,yCAGF,sDACE,2EAGF,wEACE","file":"switch.css"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.ams-text-area{background-color:var(--ams-text-area-background-color);border-color:var(--ams-text-area-border-color);border-style:var(--ams-text-area-border-style);border-width:var(--ams-text-area-border-width);box-sizing:border-box;color:var(--ams-text-area-color);font-family:var(--ams-text-area-font-family);font-size:var(--ams-text-area-font-size);font-weight:var(--ams-text-area-font-weight);inline-size:100%;line-height:var(--ams-text-area-line-height);max-inline-size:100%;min-block-size:var(--ams-text-area-min-block-size);outline-offset:var(--ams-text-area-outline-offset);padding-block:var(--ams-text-area-padding-block);padding-inline:var(--ams-text-area-padding-inline);touch-action:manipulation;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;-webkit-appearance:none;appearance:none;border-radius:0;margin-block:0}.ams-text-area::placeholder{color:var(--ams-text-area-placeholder-color);opacity:100%}.ams-text-area:disabled{color:var(--ams-text-area-disabled-color);cursor:var(--ams-text-area-disabled-cursor)}.ams-text-area:invalid,.ams-text-area[aria-invalid=true]{border-color:var(--ams-text-area-invalid-border-color)}.ams-text-area:invalid:hover,.ams-text-area[aria-invalid=true]:hover{border-color:var(--ams-text-area-invalid-hover-border-color);box-shadow:var(--ams-text-area-invalid-hover-box-shadow)}.ams-text-area
|
|
1
|
+
.ams-text-area{background-color:var(--ams-text-area-background-color);border-color:var(--ams-text-area-border-color);border-style:var(--ams-text-area-border-style);border-width:var(--ams-text-area-border-width);box-sizing:border-box;color:var(--ams-text-area-color);font-family:var(--ams-text-area-font-family);font-size:var(--ams-text-area-font-size);font-weight:var(--ams-text-area-font-weight);inline-size:100%;line-height:var(--ams-text-area-line-height);max-inline-size:100%;min-block-size:var(--ams-text-area-min-block-size);outline-offset:var(--ams-text-area-outline-offset);padding-block:var(--ams-text-area-padding-block);padding-inline:var(--ams-text-area-padding-inline);touch-action:manipulation;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;-webkit-appearance:none;appearance:none;border-radius:0;margin-block:0}.ams-text-area::placeholder{color:var(--ams-text-area-placeholder-color);opacity:100%}.ams-text-area:disabled{color:var(--ams-text-area-disabled-color);cursor:var(--ams-text-area-disabled-cursor)}.ams-text-area:not(:disabled):invalid,.ams-text-area:not(:disabled)[aria-invalid=true]{border-color:var(--ams-text-area-invalid-border-color)}.ams-text-area:not(:disabled):hover{box-shadow:var(--ams-text-area-hover-box-shadow)}.ams-text-area:not(:disabled):invalid:hover,.ams-text-area:not(:disabled)[aria-invalid=true]:hover{border-color:var(--ams-text-area-invalid-hover-border-color);box-shadow:var(--ams-text-area-invalid-hover-box-shadow)}.ams-text-area--resize-none{resize:none}.ams-text-area--resize-horizontal{resize:inline}.ams-text-area--resize-vertical{resize:block}.ams-text-area--cols{inline-size:auto}/*# sourceMappingURL=text-area.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../src/components/text-area/text-area.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAcA,eACE,uDACA,+CACA,+CACA,+CACA,sBACA,iCACA,6CACA,yCACA,6CACA,iBACA,6CACA,qBACA,mDACA,mDACA,iDACA,mDACA,0BCrBA,kCACA,2BACA,8BACA,sBDLA,wBACA,gBACA,gBACA,
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../src/components/text-area/text-area.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAcA,eACE,uDACA,+CACA,+CACA,+CACA,sBACA,iCACA,6CACA,yCACA,6CACA,iBACA,6CACA,qBACA,mDACA,mDACA,iDACA,mDACA,0BCrBA,kCACA,2BACA,8BACA,sBDLA,wBACA,gBACA,gBACA,eA8BF,4BACE,6CAJA,aASF,wBACE,0CACA,4CAGF,uFAEE,uDAGF,oCACE,iDAGF,mGAEE,6DACA,yDAGF,4BACE,YAGF,kCACE,cAGF,gCACE,aAGF,qBACE","file":"text-area.css"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.ams-text-input{background-color:var(--ams-text-input-background-color);border-color:var(--ams-text-input-border-color);border-style:var(--ams-text-input-border-style);border-width:var(--ams-text-input-border-width);box-sizing:border-box;color:var(--ams-text-input-color);font-family:var(--ams-text-input-font-family);font-size:var(--ams-text-input-font-size);font-weight:var(--ams-text-input-font-weight);line-height:var(--ams-text-input-line-height);max-inline-size:100%;outline-offset:var(--ams-text-input-outline-offset);padding-block:var(--ams-text-input-padding-block);padding-inline:var(--ams-text-input-padding-inline);touch-action:manipulation;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;-webkit-appearance:none;appearance:none;border-radius:0;margin-block:0}.ams-text-input:not([size]){inline-size:100%}.ams-text-input::placeholder{color:var(--ams-text-input-placeholder-color);opacity:100%}.ams-text-input:disabled{color:var(--ams-text-input-disabled-color);cursor:var(--ams-text-input-disabled-cursor)}.ams-text-input:invalid,.ams-text-input[aria-invalid=true]{border-color:var(--ams-text-input-invalid-border-color)}.ams-text-input:invalid:hover,.ams-text-input[aria-invalid=true]:hover{border-color:var(--ams-text-input-invalid-hover-border-color);box-shadow:var(--ams-text-input-invalid-hover-box-shadow)}
|
|
1
|
+
.ams-text-input{background-color:var(--ams-text-input-background-color);border-color:var(--ams-text-input-border-color);border-style:var(--ams-text-input-border-style);border-width:var(--ams-text-input-border-width);box-sizing:border-box;color:var(--ams-text-input-color);font-family:var(--ams-text-input-font-family);font-size:var(--ams-text-input-font-size);font-weight:var(--ams-text-input-font-weight);line-height:var(--ams-text-input-line-height);max-inline-size:100%;outline-offset:var(--ams-text-input-outline-offset);padding-block:var(--ams-text-input-padding-block);padding-inline:var(--ams-text-input-padding-inline);touch-action:manipulation;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;-webkit-appearance:none;appearance:none;border-radius:0;margin-block:0}.ams-text-input:not([size]){inline-size:100%}.ams-text-input::placeholder{color:var(--ams-text-input-placeholder-color);opacity:100%}.ams-text-input:disabled{color:var(--ams-text-input-disabled-color);cursor:var(--ams-text-input-disabled-cursor)}.ams-text-input:not(:disabled):invalid,.ams-text-input:not(:disabled)[aria-invalid=true]{border-color:var(--ams-text-input-invalid-border-color)}.ams-text-input:not(:disabled):hover{box-shadow:var(--ams-text-input-hover-box-shadow)}.ams-text-input:not(:disabled):invalid:hover,.ams-text-input:not(:disabled)[aria-invalid=true]:hover{border-color:var(--ams-text-input-invalid-hover-border-color);box-shadow:var(--ams-text-input-invalid-hover-box-shadow)}/*# sourceMappingURL=text-input.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../src/components/text-input/text-input.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAcA,gBACE,wDACA,gDACA,gDACA,gDACA,sBACA,kCACA,8CACA,0CACA,8CACA,8CACA,qBACA,oDACA,kDACA,oDACA,0BCnBA,kCACA,2BACA,8BACA,sBDLA,wBACA,gBACA,gBACA,eAwBF,4BACE,
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../src/components/text-input/text-input.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAcA,gBACE,wDACA,gDACA,gDACA,gDACA,sBACA,kCACA,8CACA,0CACA,8CACA,8CACA,qBACA,oDACA,kDACA,oDACA,0BCnBA,kCACA,2BACA,8BACA,sBDLA,wBACA,gBACA,gBACA,eAwBF,4BACE,iBAOF,6BACE,8CAJA,aASF,yBACE,2CACA,6CAGF,yFAEE,wDAGF,qCACE,kDAGF,qGAEE,8DACA","file":"text-input.css"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.ams-time-input{background-color:var(--ams-time-input-background-color);border-color:var(--ams-time-input-border-color);border-style:var(--ams-time-input-border-style);border-width:var(--ams-time-input-border-width);box-sizing:border-box;color:var(--ams-time-input-color);font-family:var(--ams-time-input-font-family);font-size:var(--ams-time-input-font-size);font-weight:var(--ams-time-input-font-weight);line-height:var(--ams-time-input-line-height);min-block-size:calc(var(--ams-time-input-font-size)*var(--ams-time-input-line-height) + 2*var(--ams-time-input-padding-block));min-inline-size:calc(4ch + 2*var(--ams-time-input-padding-inline));outline-offset:var(--ams-time-input-outline-offset);padding-block:var(--ams-time-input-padding-block);padding-inline:var(--ams-time-input-padding-inline);touch-action:manipulation;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;-webkit-appearance:none;appearance:none;border-radius:0;inline-size:auto;margin-block:0}.ams-time-input::-webkit-calendar-picker-indicator{appearance:none;background-image:var(--ams-time-input-calender-picker-indicator-background-image);cursor:var(--ams-time-input-calender-picker-indicator-cursor)}.ams-time-input:hover::-webkit-calendar-picker-indicator{background-image:var(--ams-time-input-hover-calender-picker-indicator-background-image)}.ams-time-input:disabled{color:var(--ams-time-input-disabled-color);cursor:var(--ams-time-input-disabled-cursor)}.ams-time-input:disabled::-webkit-calendar-picker-indicator{background-image:var(--ams-time-input-disabled-calender-picker-indicator-background-image);visibility:visible}.ams-time-input:invalid,.ams-time-input[aria-invalid=true]{border-color:var(--ams-time-input-invalid-border-color)}.ams-time-input:invalid:hover,.ams-time-input[aria-invalid=true]:hover{border-color:var(--ams-time-input-invalid-hover-border-color);box-shadow:var(--ams-time-input-invalid-hover-box-shadow)}
|
|
1
|
+
.ams-time-input{background-color:var(--ams-time-input-background-color);border-color:var(--ams-time-input-border-color);border-style:var(--ams-time-input-border-style);border-width:var(--ams-time-input-border-width);box-sizing:border-box;color:var(--ams-time-input-color);font-family:var(--ams-time-input-font-family);font-size:var(--ams-time-input-font-size);font-weight:var(--ams-time-input-font-weight);line-height:var(--ams-time-input-line-height);min-block-size:calc(var(--ams-time-input-font-size)*var(--ams-time-input-line-height) + 2*var(--ams-time-input-padding-block));min-inline-size:calc(4ch + 2*var(--ams-time-input-padding-inline));outline-offset:var(--ams-time-input-outline-offset);padding-block:var(--ams-time-input-padding-block);padding-inline:var(--ams-time-input-padding-inline);touch-action:manipulation;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;-webkit-appearance:none;appearance:none;border-radius:0;inline-size:auto;margin-block:0}.ams-time-input::-webkit-datetime-edit,.ams-time-input::-webkit-datetime-edit-ampm-field,.ams-time-input::-webkit-datetime-edit-fields-wrapper,.ams-time-input::-webkit-datetime-edit-hour-field,.ams-time-input::-webkit-datetime-edit-millisecond-field,.ams-time-input::-webkit-datetime-edit-minute-field,.ams-time-input::-webkit-datetime-edit-second-field{padding-block:0}.ams-time-input::-webkit-calendar-picker-indicator{appearance:none;background-image:var(--ams-time-input-calender-picker-indicator-background-image);cursor:var(--ams-time-input-calender-picker-indicator-cursor)}.ams-time-input:hover::-webkit-calendar-picker-indicator{background-image:var(--ams-time-input-hover-calender-picker-indicator-background-image)}.ams-time-input:disabled{color:var(--ams-time-input-disabled-color);cursor:var(--ams-time-input-disabled-cursor)}.ams-time-input:disabled::-webkit-calendar-picker-indicator{background-image:var(--ams-time-input-disabled-calender-picker-indicator-background-image);visibility:visible}.ams-time-input:not(:disabled):invalid,.ams-time-input:not(:disabled)[aria-invalid=true]{border-color:var(--ams-time-input-invalid-border-color)}.ams-time-input:not(:disabled):hover{box-shadow:var(--ams-time-input-hover-box-shadow)}.ams-time-input:not(:disabled):invalid:hover,.ams-time-input:not(:disabled)[aria-invalid=true]:hover{border-color:var(--ams-time-input-invalid-hover-border-color);box-shadow:var(--ams-time-input-invalid-hover-box-shadow)}/*# sourceMappingURL=time-input.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../src/components/time-input/time-input.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../src/components/time-input/time-input.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAyBA,gBACE,wDACA,gDACA,gDACA,gDACA,sBACA,kCACA,8CACA,0CACA,8CACA,8CAGA,+HAKA,mEACA,oDACA,kDACA,oDACA,0BCrCA,kCACA,2BACA,8BACA,sBDLA,wBACA,gBACA,gBACA,iBACA,eAEA,kWAOE,gBAiCJ,mDACE,gBACA,kFACA,8DAGF,yDACE,wFAGF,yBACE,2CACA,6CAGF,4DACE,2FACA,mBAGF,yFAEE,wDAGF,qCACE,kDAGF,qGAEE,8DACA","file":"time-input.css"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.ams-unordered-list{box-sizing:border-box;display:grid;gap:var(--ams-unordered-list-gap);hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);hyphens:auto;overflow-wrap:break-word;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;list-style:none;margin-block:0;padding-inline-start:0}.ams-unordered-list:not(.ams-unordered-list--no-markers){color:var(--ams-unordered-list-color);font-family:var(--ams-unordered-list-font-family);font-size:var(--ams-unordered-list-font-size);font-weight:var(--ams-unordered-list-font-weight);line-height:var(--ams-unordered-list-line-height);list-style-type:var(--ams-unordered-list-list-style-type)}.ams-unordered-list:not(.ams-unordered-list--no-markers) .ams-unordered-list__item{margin-inline-start:var(--ams-unordered-list-item-margin-inline-start);padding-inline-start:var(--ams-unordered-list-item-padding-inline-start)}.ams-unordered-list--inverse:not(.ams-unordered-list--no-markers){color:var(--ams-unordered-list-inverse-color)}.ams-unordered-list--small:not(.ams-unordered-list--no-markers){font-size:var(--ams-unordered-list-small-font-size);line-height:var(--ams-unordered-list-small-line-height)}:is(.ams-ordered-list,.ams-unordered-list) .ams-unordered-list{gap:var(--ams-unordered-list-unordered-list-gap);list-style-type:var(--ams-unordered-list-unordered-list-list-style-type);padding-block-
|
|
1
|
+
.ams-unordered-list{box-sizing:border-box;display:grid;gap:var(--ams-unordered-list-gap);hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);hyphens:auto;overflow-wrap:break-word;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;list-style:none;margin-block:0;padding-inline-start:0}.ams-unordered-list:not(.ams-unordered-list--no-markers){color:var(--ams-unordered-list-color);font-family:var(--ams-unordered-list-font-family);font-size:var(--ams-unordered-list-font-size);font-weight:var(--ams-unordered-list-font-weight);line-height:var(--ams-unordered-list-line-height);list-style-type:var(--ams-unordered-list-list-style-type)}.ams-unordered-list:not(.ams-unordered-list--no-markers) .ams-unordered-list__item{margin-inline-start:var(--ams-unordered-list-item-margin-inline-start);padding-inline-start:var(--ams-unordered-list-item-padding-inline-start)}.ams-unordered-list--inverse:not(.ams-unordered-list--no-markers){color:var(--ams-unordered-list-inverse-color)}.ams-unordered-list--small:not(.ams-unordered-list--no-markers){font-size:var(--ams-unordered-list-small-font-size);line-height:var(--ams-unordered-list-small-line-height)}:is(.ams-ordered-list,.ams-unordered-list) .ams-unordered-list{gap:var(--ams-unordered-list-unordered-list-gap);list-style-type:var(--ams-unordered-list-unordered-list-list-style-type);padding-block-start:var(--ams-unordered-list-unordered-list-padding-block-start)}:is(.ams-ordered-list,.ams-unordered-list) .ams-unordered-list .ams-unordered-list__item{margin-inline-start:var(--ams-unordered-list-unordered-list-item-margin-inline-start);padding-inline-start:var(--ams-unordered-list-unordered-list-item-padding-inline-start)}:is(.ams-ordered-list,.ams-unordered-list)>:not(:last-child)>.ams-unordered-list{padding-block-end:var(--ams-unordered-list-unordered-list-padding-block-end)}/*# sourceMappingURL=unordered-list.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../src/components/unordered-list/unordered-list.scss","../../src/common/hyphenation.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAcA,oBACE,sBACA,aACA,kCCXA,kEACA,aACA,yBCEA,kCACA,2BACA,8BACA,sBFJA,gBACA,eACA,uBAaF,yDACE,sCACA,kDACA,8CACA,kDACA,kDACA,0DAEA,mFACE,uEACA,yEAIJ,kEACE,8CAGF,gEACE,oDACA,
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../src/components/unordered-list/unordered-list.scss","../../src/common/hyphenation.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAcA,oBACE,sBACA,aACA,kCCXA,kEACA,aACA,yBCEA,kCACA,2BACA,8BACA,sBFJA,gBACA,eACA,uBAaF,yDACE,sCACA,kDACA,8CACA,kDACA,kDACA,0DAEA,mFACE,uEACA,yEAIJ,kEACE,8CAGF,gEACE,oDACA,wDAIA,+DACE,iDACA,yEACA,iFAEA,yFACE,sFACA,wFAIJ,iFACE","file":"unordered-list.css"}
|
|
@@ -51,3 +51,30 @@ The declarations in the mixin must override default user agent styling; otherwis
|
|
|
51
51
|
We style both the native invalid state (`:invalid`) as the invalid state you can set manually, using `aria-invalid`.
|
|
52
52
|
We’re currently not sure how our users will implement forms, which is why both options are supported.
|
|
53
53
|
[Native form validation isn’t without its issues](https://adrianroselli.com/2019/02/avoid-default-field-validation.html) though, so we might only support manual validation in the future.
|
|
54
|
+
|
|
55
|
+
## Follow this precedence order for input states
|
|
56
|
+
|
|
57
|
+
Inputs can be in various states, such as disabled, hovered, invalid, or even a combination of those.
|
|
58
|
+
Some have defined values: checkboxes can be either checked, unchecked, or indeterminate.
|
|
59
|
+
|
|
60
|
+
Visual cues must help users recognize each possible state and value.
|
|
61
|
+
This results in a complex set of states to apply styles to, and specificity issues lurk.
|
|
62
|
+
|
|
63
|
+
We aim for clear and simple CSS with the smallest selectors possible, even if this makes the order of states and values more difficult to follow.
|
|
64
|
+
To maintain consistent styling across all input components, we follow these precedence orders:
|
|
65
|
+
|
|
66
|
+
States:
|
|
67
|
+
|
|
68
|
+
1. **Disabled** always takes priority. A disabled input should not react to hover, focus, or invalid states.
|
|
69
|
+
2. **Hover** should always be visible unless the input is disabled.
|
|
70
|
+
3. **Invalid** shows a validation error. It should not override disabled and must be paired with a hover state, meaning each input should have an invalid hover state defined.
|
|
71
|
+
4. **Default** is the basic state.
|
|
72
|
+
|
|
73
|
+
Values for Checkbox, Radio, and Switch inputs:
|
|
74
|
+
|
|
75
|
+
1. **Indeterminate** takes precedence over the checked state. If an input (typically a checkbox) has both checked and indeterminate states, we show it as indeterminate.
|
|
76
|
+
2. **Checked** indicates the checked state. Has lower precedence than indeterminate.
|
|
77
|
+
3. **Default** is the basic unchecked state.
|
|
78
|
+
|
|
79
|
+
Checkboxes have the most states, so [check its stylesheet](https://github.com/Amsterdam/design-system/blob/develop/packages/css/src/components/checkbox/checkbox.scss) when adding a new input component.
|
|
80
|
+
Follow the same order and remove any irrelevant states for your input.
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "
|
|
2
|
+
"version": "2.0.0",
|
|
3
3
|
"author": "Design System Team, City of Amsterdam <designsystem@amsterdam.nl>",
|
|
4
4
|
"description": "Stylesheets for all components from the Amsterdam Design System and some general utilities. Use it to apply the visual design of the City of Amsterdam to your HTML elements or non-React components.",
|
|
5
5
|
"homepage": "https://designsystem.amsterdam",
|
|
@@ -19,11 +19,11 @@
|
|
|
19
19
|
"directory": "packages/css"
|
|
20
20
|
},
|
|
21
21
|
"devDependencies": {
|
|
22
|
-
"sass": "1.
|
|
22
|
+
"sass": "1.92.1"
|
|
23
23
|
},
|
|
24
24
|
"peerDependencies": {
|
|
25
|
-
"@amsterdam/design-system-tokens": "
|
|
26
|
-
"@amsterdam/design-system-assets": "1.0.
|
|
25
|
+
"@amsterdam/design-system-tokens": "2.0.0",
|
|
26
|
+
"@amsterdam/design-system-assets": "1.0.1"
|
|
27
27
|
},
|
|
28
28
|
"scripts": {
|
|
29
29
|
"build": "sass src/components:dist/ --style=compressed",
|
|
@@ -3,13 +3,13 @@
|
|
|
3
3
|
* Copyright Gemeente Amsterdam
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
* CSS Custom properties cannot be used
|
|
8
|
-
* We
|
|
6
|
+
/**
|
|
7
|
+
* CSS Custom properties cannot be used in media queries.
|
|
8
|
+
* We resort to Sass variables for our breakpoint values.
|
|
9
9
|
*/
|
|
10
10
|
|
|
11
11
|
/** The breakpoint at which medium screens start. */
|
|
12
|
-
$ams-breakpoint-medium:
|
|
12
|
+
$ams-breakpoint-medium: 37.5rem;
|
|
13
13
|
|
|
14
14
|
/** The breakpoint at which wide screens start. */
|
|
15
|
-
$ams-breakpoint-wide:
|
|
15
|
+
$ams-breakpoint-wide: 72.5rem;
|
|
@@ -16,9 +16,7 @@
|
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
.ams-accordion__header {
|
|
19
|
-
|
|
20
|
-
margin-block: 0;
|
|
21
|
-
margin-inline: 0;
|
|
19
|
+
/* This class name is deprecated. */
|
|
22
20
|
}
|
|
23
21
|
|
|
24
22
|
@mixin reset-button {
|
|
@@ -34,17 +32,16 @@
|
|
|
34
32
|
color: var(--ams-accordion-button-color);
|
|
35
33
|
cursor: var(--ams-accordion-button-cursor);
|
|
36
34
|
display: flex;
|
|
37
|
-
font-family:
|
|
38
|
-
font-size:
|
|
39
|
-
font-weight:
|
|
35
|
+
font-family: inherit;
|
|
36
|
+
font-size: inherit;
|
|
37
|
+
font-weight: inherit;
|
|
40
38
|
gap: var(--ams-accordion-button-gap);
|
|
41
39
|
inline-size: 100%;
|
|
42
|
-
line-height:
|
|
40
|
+
line-height: inherit;
|
|
43
41
|
outline-offset: var(--ams-accordion-button-outline-offset);
|
|
44
42
|
padding-block: var(--ams-accordion-button-padding-block);
|
|
45
43
|
padding-inline: var(--ams-accordion-button-padding-inline);
|
|
46
44
|
text-align: start;
|
|
47
|
-
text-wrap: var(--ams-accordion-button-text-wrap);
|
|
48
45
|
|
|
49
46
|
@include reset-button;
|
|
50
47
|
|
|
@@ -72,8 +69,6 @@
|
|
|
72
69
|
|
|
73
70
|
.ams-accordion__panel {
|
|
74
71
|
display: none;
|
|
75
|
-
padding-block: var(--ams-accordion-panel-padding-block);
|
|
76
|
-
padding-inline: var(--ams-accordion-panel-padding-inline);
|
|
77
72
|
}
|
|
78
73
|
|
|
79
74
|
.ams-accordion__panel--expanded {
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
|
|
14
14
|
.ams-alert__severity-indicator {
|
|
15
15
|
background-color: var(--ams-alert-severity-indicator-background-color);
|
|
16
|
+
border-inline-end: inherit;
|
|
16
17
|
flex: none;
|
|
17
18
|
padding-block: var(--ams-alert-severity-indicator-padding-block);
|
|
18
19
|
padding-inline: var(--ams-alert-severity-indicator-padding-inline);
|
|
@@ -6,12 +6,15 @@ Allows the user to perform an action or operate the interface.
|
|
|
6
6
|
|
|
7
7
|
## Guidelines
|
|
8
8
|
|
|
9
|
+
- Do not use a Button to link to another page.
|
|
10
|
+
Use a [Standalone Link](https://designsystem.amsterdam/?path=/docs/components-navigation-standalone-link--docs)
|
|
11
|
+
or a [Call to Action Link](https://designsystem.amsterdam/?path=/docs/components-navigation-call-to-action-link--docs) instead,
|
|
12
|
+
or an inline [Link](https://designsystem.amsterdam/?path=/docs/components-navigation-link--docs) in the running text.
|
|
9
13
|
- Describe the Button’s function through a short label.
|
|
14
|
+
- Use the verb’s infinitive form, such as “Verwijderen” or “Opslaan”, not “Verwijder” or “Sla op”.
|
|
10
15
|
- Use only 1 primary Button per screen.
|
|
11
16
|
- Wrap 2 or more consecutive buttons and/or links in an [Action Group](https://designsystem.amsterdam/?path=/docs/components-layout-action-group--docs).
|
|
12
17
|
- Add `type="submit"` to make the Button submit a form.
|
|
13
|
-
- Do not use a Button to link to another page.
|
|
14
|
-
Use a [Standalone Link](https://designsystem.amsterdam/?path=/docs/components-navigation-standalone-link--docs) instead, or an inline [Link](https://designsystem.amsterdam/?path=/docs/components-navigation-link--docs) in the running text.
|
|
15
18
|
|
|
16
19
|
## Relevant WCAG requirements
|
|
17
20
|
|
|
@@ -14,6 +14,9 @@
|
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
.ams-button {
|
|
17
|
+
// Override line height for Icon in Button.
|
|
18
|
+
--ams-icon-line-height: var(--ams-button-line-height);
|
|
19
|
+
|
|
17
20
|
border-style: var(--ams-button-border-style);
|
|
18
21
|
border-width: var(--ams-button-border-width);
|
|
19
22
|
cursor: var(--ams-button-cursor);
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<!-- @license CC0-1.0 -->
|
|
2
|
+
|
|
3
|
+
# Call to Action Link
|
|
4
|
+
|
|
5
|
+
A link that stands out and encourages the user to take action, such as starting to fill in a form.
|
|
6
|
+
|
|
7
|
+
## Design
|
|
8
|
+
|
|
9
|
+
The Call to Action Link features a green background to ensure it stands out.
|
|
10
|
+
To clarify that it is not a button, which is not suitable for navigation, its text is underlined like links typically are.
|
|
11
|
+
This informs users that a new page will open and that they can either copy the link or open it in a new window.
|
|
12
|
+
|
|
13
|
+
## Guidelines
|
|
14
|
+
|
|
15
|
+
- Use a Call to Action Link to guide the user to a page where they can perform an action.
|
|
16
|
+
- A single page must not have more than one Call to Action Link.
|
|
17
|
+
Ensure the emphasis is on one product, and divide the content into several pages if needed.
|
|
18
|
+
- Use the verb’s infinitive form, such as “Kapotte parkeerautomaat melden”, not “Meld kapotte parkeerautomaat”.
|
|
19
|
+
- For additional guidelines, refer to the [Link](/docs/components-navigation-link--docs) component.
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license EUPL-1.2+
|
|
3
|
+
* Copyright Gemeente Amsterdam
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
@use "../../common/hyphenation" as *;
|
|
7
|
+
@use "../../common/text-rendering" as *;
|
|
8
|
+
|
|
9
|
+
.ams-call-to-action-link {
|
|
10
|
+
background-color: var(--ams-call-to-action-link-background-color);
|
|
11
|
+
color: var(--ams-call-to-action-link-color);
|
|
12
|
+
display: inline-flex;
|
|
13
|
+
font-family: var(--ams-call-to-action-link-font-family);
|
|
14
|
+
font-size: var(--ams-call-to-action-link-font-size);
|
|
15
|
+
font-weight: var(--ams-call-to-action-link-font-weight);
|
|
16
|
+
line-height: var(--ams-call-to-action-link-line-height);
|
|
17
|
+
outline-offset: var(--ams-call-to-action-link-outline-offset);
|
|
18
|
+
padding-block: var(--ams-call-to-action-link-padding-block);
|
|
19
|
+
padding-inline: var(--ams-call-to-action-link-padding-inline);
|
|
20
|
+
text-decoration-thickness: var(--ams-call-to-action-link-text-decoration-thickness);
|
|
21
|
+
text-underline-offset: var(--ams-call-to-action-link-text-underline-offset);
|
|
22
|
+
touch-action: manipulation;
|
|
23
|
+
|
|
24
|
+
@include hyphenation;
|
|
25
|
+
@include text-rendering;
|
|
26
|
+
|
|
27
|
+
&:hover {
|
|
28
|
+
background-color: var(--ams-call-to-action-link-hover-background-color);
|
|
29
|
+
text-decoration-thickness: var(--ams-call-to-action-link-hover-text-decoration-thickness);
|
|
30
|
+
text-underline-offset: var(--ams-call-to-action-link-hover-text-underline-offset);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
@@ -14,7 +14,7 @@ A brief section of a heading, some text, and optionally an image, that leads to
|
|
|
14
14
|
- Use the Card Heading, Card Heading Group and Card Image subcomponents.
|
|
15
15
|
They apply the correct spacing.
|
|
16
16
|
- Card Heading requires a `level`, because there is no sensible default.
|
|
17
|
-
|
|
17
|
+
Visually, it has the size of a level 3 Heading by default.
|
|
18
18
|
- Place the text in a regular [Paragraph](/docs/components-text-paragraph--docs).
|
|
19
19
|
Use a small Paragraph for a publication date.
|
|
20
20
|
- This component is not the best option if the target content does not represent an article-like page.
|