Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add common link tokens and use them in all link-like components #814

Merged
merged 23 commits into from
Nov 30, 2023
Merged

feat: Add common link tokens and use them in all link-like components #814

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
a58bcee
Move all css source code to /src
alimpens Nov 24, 2023
fb51c69
Add initial common link tokens
alimpens Nov 24, 2023
84fc4c5
Restyle links, clean up stories
alimpens Nov 24, 2023
94cd693
Update card link styling
alimpens Nov 27, 2023
179d86e
Update top task link styling
alimpens Nov 27, 2023
a02bbf0
Update Breadcrumb link styling
alimpens Nov 27, 2023
f7b4a85
Update PageMenu link styling
alimpens Nov 27, 2023
ca16fe6
Update PageMenu docs
alimpens Nov 27, 2023
eeb6e86
Update Pagination styling
alimpens Nov 27, 2023
3c92998
Merge branch 'develop' of https://github.com/Amsterdam/design-system …
alimpens Nov 27, 2023
54f21c9
Fix typo
alimpens Nov 27, 2023
c8c46db
Rename link-type to link-appearance
alimpens Nov 27, 2023
62d513b
Use correct BEM classes
alimpens Nov 29, 2023
7a8d846
Split up hover and visited link styles
alimpens Nov 29, 2023
d415304
Rename link appearance token file
alimpens Nov 29, 2023
8b34b70
Convert pixel values to rems
alimpens Nov 29, 2023
72e2883
Rename apparent to subtle
alimpens Nov 29, 2023
d3e9f61
Give subtle links 6px underline offset as well
alimpens Nov 29, 2023
d3b6972
Merge branch 'develop' of https://github.com/Amsterdam/design-system …
alimpens Nov 29, 2023
79abb14
Fix import, remove unused token
alimpens Nov 29, 2023
7516a6d
Merge branch 'develop' of https://github.com/Amsterdam/design-system …
alimpens Nov 30, 2023
1eb9821
Remove 'in-list' variant
alimpens Nov 30, 2023
c27cdcc
Move text-decoration-thickness and text-underline-offset to root of l…
alimpens Nov 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/css/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@
"directory": "packages/css"
},
"scripts": {
"build": "sass src/:dist/ --style=compressed",
"build:watch": "sass src/:dist/ --watch",
"build": "sass src/components:dist/ --style=compressed",
"build:watch": "sass src/components:dist/ --watch",
"clean": "rimraf dist/"
},
"devDependencies": {
Expand Down
0 packages/css/utils/breakpoint.scss → packages/css/src/common/breakpoint.scss
View file
Open in desktop
File renamed without changes.
0 ...ages/css/utils/calculate-fluid-style.scss → ...css/src/common/calculate-fluid-style.scss
View file
Open in desktop
File renamed without changes.
0 packages/css/src/accordion/README.md → ...es/css/src/components/accordion/README.md
View file
Open in desktop
File renamed without changes.
2 changes: 1 addition & 1 deletion packages/css/src/accordion/accordion.scss → ...s/src/components/accordion/accordion.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* Copyright (c) 2023 Gemeente Amsterdam
*/

@import "../../utils/breakpoint";
@import "../../common/breakpoint";

.amsterdam-accordion__header {
display: flex;
Expand Down
0 packages/css/src/alert/README.md → packages/css/src/components/alert/README.md
View file
Open in desktop
File renamed without changes.
2 changes: 1 addition & 1 deletion packages/css/src/alert/alert.scss → packages/css/src/components/alert/alert.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* Copyright (c) 2023 Gemeente Amsterdam
*/

@import "../../utils/breakpoint";
@import "../../common/breakpoint";

.amsterdam-alert {
align-items: flex-start;
Expand Down
0 packages/css/src/aspect-ratio/README.md → ...css/src/components/aspect-ratio/README.md
View file
Open in desktop
File renamed without changes.
0 ...es/css/src/aspect-ratio/aspect-ratio.scss → ...components/aspect-ratio/aspect-ratio.scss
View file
Open in desktop
File renamed without changes.
0 packages/css/src/blockquote/README.md → ...s/css/src/components/blockquote/README.md
View file
Open in desktop
File renamed without changes.
2 changes: 1 addition & 1 deletion packages/css/src/blockquote/blockquote.scss → ...src/components/blockquote/blockquote.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* Copyright (c) 2023 Gemeente Amsterdam
*/

@import "../../utils/breakpoint";
@import "../../common/breakpoint";

@mixin reset {
box-sizing: border-box;
Expand Down
0 packages/css/src/breadcrumb/README.md → ...s/css/src/components/breadcrumb/README.md
View file
Open in desktop
File renamed without changes.
19 changes: 9 additions & 10 deletions packages/css/src/breadcrumb/breadcrumb.scss → ...src/components/breadcrumb/breadcrumb.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* Copyright (c) 2023 Gemeente Amsterdam
*/

@import "../../utils/breakpoint";
@import "../../common/breakpoint";
alimpens marked this conversation as resolved.
Show resolved Hide resolved

@mixin reset {
box-sizing: border-box;
Expand Down Expand Up @@ -40,29 +40,28 @@
}

.amsterdam-breadcrumb-item:not(:last-child)::after {
VincentSmedinga marked this conversation as resolved.
Show resolved Hide resolved
background-color: var(--amsterdam-breadcrumb-color);
background-color: var(--amsterdam-breadcrumb-seperator-background-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;
height: 1rem;
margin-inline-start: 1rem;
width: 16px;
width: 1rem;
}

.amsterdam-breadcrumb-item__link {
color: var(--amsterdam-breadcrumb-color);
cursor: pointer;
color: var(--amsterdam-breadcrumb-item-link-color);
outline-offset: var(--amsterdam-breadcrumb-item-link-outline-offset);
text-decoration: none;
text-decoration-line: var(--amsterdam-breadcrumb-item-link-text-decoration-line);
text-decoration-thickness: var(--amsterdam-breadcrumb-item-link-text-decoration-thickness);
text-underline-offset: var(--amsterdam-breadcrumb-item-link-text-underline-offset);

&::first-letter {
text-transform: capitalize;
}

&:hover {
color: var(--amsterdam-breadcrumb-item-link-hover-color);
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
text-decoration-line: var(--amsterdam-breadcrumb-item-link-hover-text-decoration-line);
}
}
0 packages/css/src/button/README.md → packages/css/src/components/button/README.md
View file
Open in desktop
File renamed without changes.
0 packages/css/src/button/button-css.md → ...s/css/src/components/button/button-css.md
View file
Open in desktop
File renamed without changes.
4 changes: 2 additions & 2 deletions packages/css/src/button/button.scss → ...ges/css/src/components/button/button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
* Copyright (c) 2023 Gemeente Amsterdam
*/

@import "../../node_modules/@utrecht/components/button/css";
@import "../../utils/breakpoint";
@import "../../../node_modules/@utrecht/components/button/css";
@import "../../common/breakpoint";

@mixin reset {
-webkit-text-size-adjust: 100%;
Expand Down
0 packages/css/src/card/README.md → packages/css/src/components/card/README.md
View file
Open in desktop
File renamed without changes.
8 changes: 4 additions & 4 deletions packages/css/src/card/card.scss → packages/css/src/components/card/card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,12 +45,12 @@

.amsterdam-card__link {
color: var(--amsterdam-card-link-color);
text-decoration: none;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
text-decoration-line: var(--amsterdam-card-link-text-decoration-line);
text-decoration-thickness: var(--amsterdam-card-link-text-decoration-thickness);
text-underline-offset: var(--amsterdam-card-link-text-underline-offset);

&:hover {
color: var(--amsterdam-card-link-hover-color);
text-decoration: underline;
text-decoration-line: var(--amsterdam-card-link-hover-text-decoration-line);
}
}
0 packages/css/src/checkbox/README.md → ...ges/css/src/components/checkbox/README.md
View file
Open in desktop
File renamed without changes.
0 packages/css/src/checkbox/checkbox-css.md → ...s/src/components/checkbox/checkbox-css.md
View file
Open in desktop
File renamed without changes.
2 changes: 1 addition & 1 deletion packages/css/src/checkbox/checkbox.scss → ...css/src/components/checkbox/checkbox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* Copyright (c) 2023 Gemeente Amsterdam
*/

@import "../../utils/breakpoint";
@import "../../common/breakpoint";

.amsterdam-checkbox__input {
appearance: none;
Expand Down
0 packages/css/src/dialog/README.md → packages/css/src/components/dialog/README.md
View file
Open in desktop
File renamed without changes.
2 changes: 1 addition & 1 deletion packages/css/src/dialog/dialog.scss → ...ges/css/src/components/dialog/dialog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* Copyright (c) 2023 Gemeente Amsterdam
*/

@import "../../utils/breakpoint";
@import "../../common/breakpoint";

.amsterdam-dialog {
background-color: var(--amsterdam-dialog-background-color);
Expand Down
0 packages/css/src/footer/README.md → packages/css/src/components/footer/README.md
View file
Open in desktop
File renamed without changes.
0 packages/css/src/footer/footer-css.md → ...s/css/src/components/footer/footer-css.md
View file
Open in desktop
File renamed without changes.
2 changes: 1 addition & 1 deletion packages/css/src/footer/footer.scss → ...ges/css/src/components/footer/footer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* Copyright (c) 2023 Gemeente Amsterdam
*/

@import "../../utils/breakpoint";
@import "../../common/breakpoint";

.amsterdam-footer__top {
background-color: var(--amsterdam-footer-top-background-color);
Expand Down
0 packages/css/src/form-label/README.md → ...s/css/src/components/form-label/README.md
View file
Open in desktop
File renamed without changes.
2 changes: 1 addition & 1 deletion packages/css/src/form-label/form-label.scss → ...src/components/form-label/form-label.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* Copyright (c) 2023 Gemeente Amsterdam
*/

@import "../../utils/breakpoint";
@import "../../common/breakpoint";

@mixin reset {
-webkit-text-size-adjust: 100%;
Expand Down
0 packages/css/src/grid/README.grid-cell.md → ...s/src/components/grid/README.grid-cell.md
View file
Open in desktop
File renamed without changes.
0 packages/css/src/grid/README.grid.md → ...es/css/src/components/grid/README.grid.md
View file
Open in desktop
File renamed without changes.
2 changes: 1 addition & 1 deletion packages/css/src/grid/grid-cell.scss → ...es/css/src/components/grid/grid-cell.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* Copyright (c) 2023 Gemeente Amsterdam
*/

@import "../../utils/breakpoint";
@import "../../common/breakpoint";

.amsterdam-grid-cell--full-width {
grid-column: 1 / -1;
Expand Down
2 changes: 1 addition & 1 deletion packages/css/src/grid/grid.scss → packages/css/src/components/grid/grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* Copyright (c) 2023 Gemeente Amsterdam
*/

@import "../../utils/breakpoint";
@import "../../common/breakpoint";

.amsterdam-grid {
--amsterdam-grid-gap: var(--amsterdam-grid-density-low-gap);
Expand Down
0 packages/css/src/heading/README.md → ...ages/css/src/components/heading/README.md
View file
Open in desktop
File renamed without changes.
0 packages/css/src/heading/heading-css.md → ...css/src/components/heading/heading-css.md
View file
Open in desktop
File renamed without changes.
2 changes: 1 addition & 1 deletion packages/css/src/heading/heading.scss → ...s/css/src/components/heading/heading.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* Copyright (c) 2023 Gemeente Amsterdam
*/

@import "../../utils/breakpoint";
@import "../../common/breakpoint";

@mixin reset {
box-sizing: border-box;
Expand Down
0 packages/css/src/highlight/README.md → ...es/css/src/components/highlight/README.md
View file
Open in desktop
File renamed without changes.
0 packages/css/src/highlight/highlight.scss → ...s/src/components/highlight/highlight.scss
View file
Open in desktop
File renamed without changes.
0 packages/css/src/icon/README.md → packages/css/src/components/icon/README.md
View file
Open in desktop
File renamed without changes.
2 changes: 1 addition & 1 deletion packages/css/src/icon/icon.scss → packages/css/src/components/icon/icon.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* Copyright (c) 2023 Gemeente Amsterdam
*/

@import "../../utils/breakpoint";
@import "../../common/breakpoint";

.amsterdam-icon {
align-items: center;
Expand Down
0 packages/css/src/image/README.md → packages/css/src/components/image/README.md
View file
Open in desktop
File renamed without changes.
0 packages/css/src/image/image.scss → packages/css/src/components/image/image.scss
View file
Open in desktop
File renamed without changes.
0 packages/css/src/index.scss → packages/css/src/components/index.scss
View file
Open in desktop
File renamed without changes.
0 packages/css/src/link/README.md → packages/css/src/components/link/README.md
View file
Open in desktop
File renamed without changes.
40 changes: 13 additions & 27 deletions packages/css/src/link/link.scss → packages/css/src/components/link/link.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* Copyright (c) 2023 Gemeente Amsterdam
*/

@import "../../utils/breakpoint";
@import "../../common/breakpoint";

@mixin reset {
-webkit-text-size-adjust: 100%;
Expand All @@ -26,6 +26,7 @@
display: inline-block;
font-size: var(--amsterdam-link-standalone-narrow-font-size);
line-height: var(--amsterdam-link-standalone-line-height);
text-decoration-line: var(--amsterdam-link-standalone-text-decoration-line);
text-decoration-thickness: var(--amsterdam-link-standalone-text-decoration-thickness);
text-underline-offset: var(--amsterdam-link-standalone-text-underline-offset);

Expand All @@ -43,11 +44,12 @@
font-family: var(--amsterdam-link-inline-font-family);
font-size: var(--amsterdam-link-inline-font-size);
line-height: var(--amsterdam-link-inline-line-height);
text-decoration: var(--amsterdam-link-inline-text-decoration);
text-decoration-line: var(--amsterdam-link-inline-text-decoration-line);
text-decoration-thickness: var(--amsterdam-link-inline-text-decoration-thickness);
text-underline-offset: var(--amsterdam-link-inline-text-underline-offset);

&:hover {
text-decoration: var(--amsterdam-link-inline-hover-text-decoration);
text-decoration-thickness: var(--amsterdam-link-inline-hover-text-decoration-thickness);
text-underline-offset: var(--amsterdam-link-inline-hover-text-underline-offset);
}

Expand All @@ -62,12 +64,12 @@
font-size: var(--amsterdam-link-in-list-narrow-font-size);
gap: var(--amsterdam-link-in-list-gap);
line-height: var(--amsterdam-link-in-list-line-height);
text-decoration: var(--amsterdam-link-in-list-text-decoration);
text-decoration-line: var(--amsterdam-link-in-list-text-decoration-line);
text-decoration-thickness: var(--amsterdam-link-in-list-text-decoration-thickness);
text-underline-offset: var(--amsterdam-link-in-list-text-underline-offset);

&:hover {
text-decoration: var(--amsterdam-link-in-list-hover-text-decoration);
text-decoration-thickness: var(--amsterdam-link-in-list-hover-text-decoration-thickness);
text-underline-offset: var(--amsterdam-link-in-list-hover-text-underline-offset);
text-decoration-line: var(--amsterdam-link-in-list-hover-text-decoration-line);
}

@media screen and (min-width: $amsterdam-breakpoint-typography) {
Expand All @@ -86,33 +88,17 @@
.amsterdam-link--on-background-dark {
color: var(--amsterdam-link-on-background-dark-color);

&:hover {
color: var(--amsterdam-link-on-background-dark-hover-color);
}

&:hover,
&:visited {
color: var(--amsterdam-link-on-background-dark-visited-color);
color: var(--amsterdam-link-on-background-dark-hover-color);
VincentSmedinga marked this conversation as resolved.
Show resolved Hide resolved
}
}

.amsterdam-link--on-background-light {
color: var(--amsterdam-link-on-background-light-color);

&:hover {
color: var(--amsterdam-link-on-background-light-hover-color);
}

&:hover,
&:visited {
color: var(--amsterdam-link-on-background-light-visited-color);
}
}

.amsterdam-link--inline.amsterdam-link--on-background-dark,
.amsterdam-link--inline.amsterdam-link--on-background-light {
text-decoration: var(--amsterdam-link-inline-hover-text-decoration);
text-underline-offset: var(--amsterdam-link-inline-hover-text-underline-offset);

&:hover {
text-decoration: var(--amsterdam-link-inline-text-decoration);
color: var(--amsterdam-link-on-background-light-hover-color);
}
}
0 packages/css/src/logo/README.md → packages/css/src/components/logo/README.md
View file
Open in desktop
File renamed without changes.
0 packages/css/src/logo/logo.scss → packages/css/src/components/logo/logo.scss
View file
Open in desktop
File renamed without changes.
0 packages/css/src/ordered-list/README.md → ...css/src/components/ordered-list/README.md
View file
Open in desktop
File renamed without changes.
2 changes: 1 addition & 1 deletion ...es/css/src/ordered-list/ordered-list.scss → ...components/ordered-list/ordered-list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* Copyright (c) 2023 Gemeente Amsterdam
*/

@import "../../utils/breakpoint";
@import "../../common/breakpoint";

/** Apply border box sizing, reset whitespace and list styles. */
@mixin reset {
Expand Down
0 packages/css/src/page-heading/README.md → ...css/src/components/page-heading/README.md
View file
Open in desktop
File renamed without changes.
2 changes: 1 addition & 1 deletion ...es/css/src/page-heading/page-heading.scss → ...components/page-heading/page-heading.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* Copyright (c) 2023 Gemeente Amsterdam
*/

@import "../../utils/breakpoint";
@import "../../common/breakpoint";

@mixin reset {
box-sizing: border-box;
Expand Down
2 changes: 2 additions & 0 deletions packages/css/src/page-menu/README.md → ...es/css/src/components/page-menu/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,5 @@ Het Page Menu wordt alleen gebruikt in het Header en Footer component en is uits
## Relevante WCAG eisen

- [Consistent Navigation (Level AA)](https://www.w3.org/WAI/WCAG21/Understanding/consistent-navigation.html)

PageMenu is een interactief element, hier gelden [de algemene eisen en richtlijnen voor interactieve elementen](https://amsterdam.github.io/design-system/?path=/docs/docs-designrichtlijnen-interactieve-elementen--docs) voor.
10 changes: 6 additions & 4 deletions packages/css/src/page-menu/page-menu.scss → ...s/src/components/page-menu/page-menu.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* Copyright (c) 2023 Gemeente Amsterdam
*/

@import "../../utils/breakpoint";
@import "../../common/breakpoint";

@mixin reset-list {
box-sizing: border-box;
Expand Down Expand Up @@ -44,9 +44,11 @@
font-weight: var(--amsterdam-page-menu-item-font-weight);
gap: var(--amsterdam-page-menu-item-gap);
line-height: var(--amsterdam-page-menu-item-line-height);
outline-offset: var(--amsterdam-focus-outline-offset);
outline-offset: var(--amsterdam-page-menu-item-outline-offset);
text-align: center;
text-decoration: var(--amsterdam-page-menu-item-text-decoration);
text-decoration-line: var(--amsterdam-page-menu-item-text-decoration-line);
text-decoration-thickness: var(--amsterdam-page-menu-item-text-decoration-thickness);
text-underline-offset: var(--amsterdam-page-menu-item-text-underline-offset);
touch-action: manipulation;

@media screen and (min-width: $amsterdam-breakpoint-typography) {
Expand All @@ -70,7 +72,7 @@
.amsterdam-page-menu__link:hover,
.amsterdam-page-menu__button:hover {
color: var(--amsterdam-page-menu-item-hover-color);
text-decoration: var(--amsterdam-page-menu-item-hover-text-decoration);
text-decoration-line: var(--amsterdam-page-menu-item-hover-text-decoration-line);
}

.amsterdam-page-menu__link svg,
Expand Down
0 packages/css/src/pagination/README.md → ...s/css/src/components/pagination/README.md
View file
Open in desktop
File renamed without changes.
9 changes: 5 additions & 4 deletions packages/css/src/pagination/pagination.scss → ...src/components/pagination/pagination.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* Copyright (c) 2023 Gemeente Amsterdam
*/

@import "../../utils/breakpoint";
@import "../../common/breakpoint";

@mixin list-reset {
list-style-type: none;
Expand Down Expand Up @@ -45,13 +45,14 @@
gap: 0.5rem;
outline-offset: var(--amsterdam-pagination-button-outline-offset);
padding-inline: 0.75rem;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
text-decoration-line: var(--amsterdam-pagination-button-text-decoration-line);
text-decoration-thickness: var(--amsterdam-pagination-button-text-decoration-thickness);
text-underline-offset: var(--amsterdam-pagination-button-text-underline-offset);
touch-action: manipulation;

&:hover {
color: var(--amsterdam-pagination-button-hover-color);
text-decoration: underline;
text-decoration-line: var(--amsterdam-pagination-button-hover-text-decoration-line);
}

&:disabled {
Expand Down
0 packages/css/src/paragraph/README.md → ...es/css/src/components/paragraph/README.md
View file
Open in desktop
File renamed without changes.
0 packages/css/src/paragraph/paragraph-css.md → ...src/components/paragraph/paragraph-css.md
View file
Open in desktop
File renamed without changes.
2 changes: 1 addition & 1 deletion packages/css/src/paragraph/paragraph.scss → ...s/src/components/paragraph/paragraph.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* Copyright (c) 2023 Gemeente Amsterdam
*/

@import "../../utils/breakpoint";
@import "../../common/breakpoint";

@mixin reset {
box-sizing: border-box;
Expand Down
0 packages/css/src/screen/README.md → packages/css/src/components/screen/README.md
View file
Open in desktop
File renamed without changes.
0 packages/css/src/screen/screen.scss → ...ges/css/src/components/screen/screen.scss
View file
Open in desktop
File renamed without changes.
0 packages/css/src/switch/README.md → packages/css/src/components/switch/README.md
View file
Open in desktop
File renamed without changes.
0 packages/css/src/switch/switch.scss → ...ges/css/src/components/switch/switch.scss
View file
Open in desktop
File renamed without changes.
0 packages/css/src/top-task-link/README.md → ...ss/src/components/top-task-link/README.md
View file
Open in desktop
File renamed without changes.
9 changes: 5 additions & 4 deletions .../css/src/top-task-link/top-task-link.scss → ...mponents/top-task-link/top-task-link.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* Copyright (c) 2023 Gemeente Amsterdam
*/

@import "../../utils/breakpoint";
@import "../../common/breakpoint";

.amsterdam-top-task-link {
break-inside: avoid;
Expand All @@ -25,6 +25,9 @@
font-size: var(--amsterdam-top-task-link-label-narrow-font-size);
font-weight: var(--amsterdam-top-task-link-label-font-weight);
line-height: var(--amsterdam-top-task-link-label-line-height);
text-decoration-line: var(--amsterdam-top-task-link-label-text-decoration-line);
text-decoration-thickness: var(--amsterdam-top-task-link-label-text-decoration-thickness);
text-underline-offset: var(--amsterdam-top-task-link-label-text-underline-offset);

@media screen and (min-width: $amsterdam-breakpoint-typography) {
font-size: var(--amsterdam-top-task-link-label-wide-font-size);
Expand All @@ -35,9 +38,7 @@

.amsterdam-top-task-link:hover .amsterdam-top-task-link__label {
color: var(--amsterdam-top-task-link-label-hover-color);
text-decoration: underline;
text-decoration-thickness: 3px;
text-underline-offset: 0.5rem;
text-decoration-line: var(--amsterdam-top-task-link-label-hover-text-decoration-line);
}

.amsterdam-top-task-link__description {
Expand Down
0 packages/css/src/unordered-list/README.md → ...s/src/components/unordered-list/README.md
View file
Open in desktop
File renamed without changes.
Loading
Loading