@amsterdam/design-system-css 0.1.4 → 0.1.5
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/README.md +1 -1
- package/dist/accordion/accordion.css +1 -69
- package/dist/accordion/accordion.css.map +1 -1
- package/dist/blockquote/blockquote.css +1 -0
- package/dist/blockquote/blockquote.css.map +1 -0
- package/dist/breadcrumb/breadcrumb.css +1 -0
- package/dist/breadcrumb/breadcrumb.css.map +1 -0
- package/dist/button/button.css +1 -706
- package/dist/button/button.css.map +1 -1
- package/dist/checkbox/checkbox.css +1 -0
- package/dist/checkbox/checkbox.css.map +1 -0
- package/dist/footer/footer.css +1 -0
- package/dist/footer/footer.css.map +1 -0
- package/dist/form-label/form-label.css +1 -26
- package/dist/form-label/form-label.css.map +1 -1
- package/dist/grid/grid-cell.css +1 -0
- package/dist/grid/grid-cell.css.map +1 -0
- package/dist/grid/page-grid.css +1 -0
- package/dist/grid/page-grid.css.map +1 -0
- package/dist/heading/heading.css +1 -64
- package/dist/heading/heading.css.map +1 -1
- package/dist/icon/icon.css +1 -122
- package/dist/icon/icon.css.map +1 -1
- package/dist/index.css +1 -0
- package/dist/index.css.map +1 -0
- package/dist/link/link.css +1 -97
- package/dist/link/link.css.map +1 -1
- package/dist/ordered-list/ordered-list.css +1 -0
- package/dist/ordered-list/ordered-list.css.map +1 -0
- package/dist/page-heading/page-heading.css +1 -0
- package/dist/page-heading/page-heading.css.map +1 -0
- package/dist/page-menu/page-menu.css +1 -0
- package/dist/page-menu/page-menu.css.map +1 -0
- package/dist/paragraph/paragraph.css +1 -49
- package/dist/paragraph/paragraph.css.map +1 -1
- package/dist/testula/testula.css +9 -0
- package/dist/testula/testula.css.map +1 -0
- package/dist/top-task-link/top-task-link.css +1 -0
- package/dist/top-task-link/top-task-link.css.map +1 -0
- package/dist/unordered-list/unordered-list.css +1 -47
- package/dist/unordered-list/unordered-list.css.map +1 -1
- package/dist/visually-hidden/visually-hidden.css +1 -0
- package/dist/visually-hidden/visually-hidden.css.map +1 -0
- package/package.json +7 -6
- package/src/accordion/README.md +25 -2
- package/src/accordion/accordion.scss +2 -2
- package/src/blockquote/README.md +14 -0
- package/src/blockquote/blockquote.scss +41 -0
- package/src/breadcrumb/README.md +15 -0
- package/src/breadcrumb/breadcrumb.scss +68 -0
- package/src/button/button.scss +36 -4
- package/src/checkbox/README.md +1 -0
- package/src/checkbox/checkbox.scss +225 -0
- package/src/footer/README.md +11 -0
- package/src/footer/footer-css.md +11 -0
- package/src/footer/footer.scss +29 -0
- package/src/form-label/form-label.scss +2 -2
- package/src/grid/README.md +11 -0
- package/src/grid/grid-cell.scss +18 -0
- package/src/grid/page-grid.scss +19 -0
- package/src/heading/heading.scss +18 -15
- package/src/icon/icon.scss +10 -10
- package/src/index.scss +19 -0
- package/src/link/README.md +28 -12
- package/src/link/link.scss +61 -36
- package/src/ordered-list/README.md +7 -0
- package/src/ordered-list/ordered-list.scss +53 -0
- package/src/page-heading/README.md +16 -0
- package/src/page-heading/page-heading.scss +31 -0
- package/src/page-menu/README.md +15 -0
- package/src/page-menu/page-menu.scss +77 -0
- package/src/paragraph/paragraph.scss +12 -8
- package/src/top-task-link/README.md +13 -0
- package/src/top-task-link/top-task-link.scss +55 -0
- package/src/unordered-list/README.md +5 -13
- package/src/unordered-list/unordered-list.scss +26 -17
- package/src/visually-hidden/README.md +5 -0
- package/src/visually-hidden/visually-hidden.scss +17 -0
- package/dist/list/list.css +0 -12
- package/dist/list/list.css.map +0 -1
- package/src/list/list.scss +0 -16
package/README.md
CHANGED
|
@@ -9,7 +9,7 @@ CSS components are developed using BEM class names and the stylesheets can be in
|
|
|
9
9
|
Theoretically you can include the components in your HTML page like so, but this is not the typical use case of this library:
|
|
10
10
|
|
|
11
11
|
```html
|
|
12
|
-
<!
|
|
12
|
+
<!doctype html>
|
|
13
13
|
<html lang="en">
|
|
14
14
|
<head>
|
|
15
15
|
<title>Example page</title>
|
|
@@ -1,69 +1 @@
|
|
|
1
|
-
|
|
2
|
-
* @license EUPL-1.2+
|
|
3
|
-
* Copyright (c) 2023 Gemeente Amsterdam
|
|
4
|
-
*/
|
|
5
|
-
/**
|
|
6
|
-
* @license EUPL-1.2+
|
|
7
|
-
* Copyright (c) 2023 Gemeente Amsterdam
|
|
8
|
-
*/
|
|
9
|
-
/*
|
|
10
|
-
The breakpoint is 854px / 16 = 53.375rems
|
|
11
|
-
https://developer.mozilla.org/en-US/docs/Web/CSS/@media#accessibility_concerns
|
|
12
|
-
*/
|
|
13
|
-
.amsterdam-accordion__header {
|
|
14
|
-
display: flex;
|
|
15
|
-
margin-block: 0;
|
|
16
|
-
margin-inline: 0;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.amsterdam-accordion__button {
|
|
20
|
-
background-color: transparent;
|
|
21
|
-
border: 0;
|
|
22
|
-
color: var(--amsterdam-accordion-button-color);
|
|
23
|
-
cursor: pointer;
|
|
24
|
-
display: flex;
|
|
25
|
-
font-family: var(--amsterdam-accordion-button-font-family);
|
|
26
|
-
font-size: var(--amsterdam-accordion-button-font-size-narrow);
|
|
27
|
-
font-weight: var(--amsterdam-accordion-button-font-weight);
|
|
28
|
-
justify-content: space-between;
|
|
29
|
-
line-height: var(--amsterdam-accordion-button-line-height);
|
|
30
|
-
padding-block: 0.75rem;
|
|
31
|
-
padding-inline: 1rem;
|
|
32
|
-
width: 100%;
|
|
33
|
-
}
|
|
34
|
-
@media screen and (width > 53.375rem) {
|
|
35
|
-
.amsterdam-accordion__button {
|
|
36
|
-
font-size: var(--amsterdam-accordion-button-font-size-wide);
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
.amsterdam-accordion__button:focus {
|
|
40
|
-
outline-offset: var(--amsterdam-accordion-button-focus-outline-offset);
|
|
41
|
-
}
|
|
42
|
-
.amsterdam-accordion__button:hover {
|
|
43
|
-
box-shadow: var(--amsterdam-accordion-button-hover-box-shadow);
|
|
44
|
-
}
|
|
45
|
-
.amsterdam-accordion__button svg {
|
|
46
|
-
transform: rotate(0deg);
|
|
47
|
-
transition: transform 0.3s ease;
|
|
48
|
-
}
|
|
49
|
-
@media (prefers-reduced-motion) {
|
|
50
|
-
.amsterdam-accordion__button svg {
|
|
51
|
-
transition: none;
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
.amsterdam-accordion__button[aria-expanded=true] svg {
|
|
56
|
-
transform: rotate(180deg);
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.amsterdam-accordion__panel {
|
|
60
|
-
display: none;
|
|
61
|
-
padding-block: 1rem;
|
|
62
|
-
padding-inline: 1rem;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
.amsterdam-accordion__panel--expanded {
|
|
66
|
-
display: block;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
/*# sourceMappingURL=accordion.css.map */
|
|
1
|
+
.amsterdam-accordion__header{display:flex;margin-block:0;margin-inline:0}.amsterdam-accordion__button{background-color:rgba(0,0,0,0);border:0;color:var(--amsterdam-accordion-button-color);cursor:pointer;display:flex;font-family:var(--amsterdam-accordion-button-font-family);font-size:var(--amsterdam-accordion-button-narrow-font-size);font-weight:var(--amsterdam-accordion-button-font-weight);justify-content:space-between;line-height:var(--amsterdam-accordion-button-line-height);padding-block:.75rem;padding-inline:1rem;width:100%}@media screen and (width > 53.375rem){.amsterdam-accordion__button{font-size:var(--amsterdam-accordion-button-wide-font-size)}}.amsterdam-accordion__button:focus{outline-offset:var(--amsterdam-accordion-button-focus-outline-offset)}.amsterdam-accordion__button:hover{box-shadow:var(--amsterdam-accordion-button-hover-box-shadow)}.amsterdam-accordion__button svg{transform:rotate(0deg);transition:transform .3s ease}@media(prefers-reduced-motion){.amsterdam-accordion__button svg{transition:none}}.amsterdam-accordion__button[aria-expanded=true] svg{transform:rotate(180deg)}.amsterdam-accordion__panel{display:none;padding-block:1rem;padding-inline:1rem}.amsterdam-accordion__panel--expanded{display:block}/*# sourceMappingURL=accordion.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../src/accordion/accordion.scss"
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../src/accordion/accordion.scss"],"names":[],"mappings":"AAOA,6BACE,aACA,eACA,gBAGF,6BACE,+BACA,SACA,8CACA,eACA,aACA,0DACA,6DACA,0DACA,8BACA,0DACA,qBACA,oBACA,WAEA,sCAfF,6BAgBI,4DAGF,mCACE,sEAGF,mCACE,8DAGF,iCACE,uBACA,8BAEA,+BAJF,iCAKI,iBAKN,qDACE,yBAGF,4BACE,aACA,mBACA,oBAGF,sCACE","file":"accordion.css"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.amsterdam-blockquote{color:var(--amsterdam-blockquote-color);font-family:var(--amsterdam-blockquote-font-family);font-size:var(--amsterdam-blockquote-narrow-font-size);font-weight:var(--amsterdam-blockquote-font-weight);line-height:var(--amsterdam-blockquote-line-height);quotes:"“" "”";box-sizing:border-box;break-after:avoid;break-inside:avoid;margin-block:0;margin-inline:0}.amsterdam-blockquote::before{content:open-quote}.amsterdam-blockquote::after{content:close-quote}@media screen and (width > 53.375rem){.amsterdam-blockquote{font-size:var(--amsterdam-blockquote-wide-font-size)}}.amsterdam-blockquote--inverse-color{color:var(--amsterdam-blockquote-inverse-color)}/*# sourceMappingURL=blockquote.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../src/blockquote/blockquote.scss"],"names":[],"mappings":"CAeA,sBACE,wCACA,oDACA,uDACA,oDACA,oDACA,eAbA,sBACA,kBACA,mBACA,eACA,gBAWA,8BACE,mBAGF,6BACE,oBAGF,sCAhBF,sBAiBI,sDAMJ,qCACE","file":"blockquote.css"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.amsterdam-breadcrumb{font-family:var(--amsterdam-breadcrumb-font-family, inherit);font-size:var(--amsterdam-breadcrumb-narrow-font-size);line-height:var(--amsterdam-breadcrumb-line-height)}@media screen and (width > 53.375rem){.amsterdam-breadcrumb{font-size:var(--amsterdam-breadcrumb-wide-font-size)}}.amsterdam-breadcrumb__list{break-after:avoid;break-inside:avoid;display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;box-sizing:border-box;margin-block:0;padding-inline:0}.amsterdam-breadcrumb-item{align-items:center;display:flex}.amsterdam-breadcrumb-item:not(:last-child)::after{background-color:var(--amsterdam-breadcrumb-color);clip-path:path("M 4.725,16 3.275,14.545 9.815,8 3.275,1.455 4.725,0 l 8,8 z");content:"";display:inline-block;height:16px;margin-inline-start:1rem;width:16px}.amsterdam-breadcrumb-item__link{color:var(--amsterdam-breadcrumb-color);cursor:pointer;outline-offset:var(--amsterdam-breadcrumb-item-link-outline-offset);text-decoration:none}.amsterdam-breadcrumb-item__link::first-letter{text-transform:capitalize}.amsterdam-breadcrumb-item__link:focus,.amsterdam-breadcrumb-item__link:hover,.amsterdam-breadcrumb-item__link:active{color:var(--amsterdam-breadcrumb-item-link-hover-color);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}/*# sourceMappingURL=breadcrumb.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../src/breadcrumb/breadcrumb.scss"],"names":[],"mappings":"AAaA,sBACE,6DACA,uDACA,oDAEA,sCALF,sBAMI,sDAIJ,4BACE,kBACA,mBACA,aACA,eACA,UACA,gBArBA,sBACA,eACA,iBAwBF,2BACE,mBACA,aAGF,mDACE,mDACA,8EACA,WACA,qBACA,YACA,yBACA,WAGF,iCACE,wCACA,eACA,oEACA,qBAEA,+CACE,0BAGF,sHAGE,wDACA,0BACA,8BACA","file":"breadcrumb.css"}
|