Skip to content

Commit

Permalink
Merge branch 'main' into eslint-update
Browse files Browse the repository at this point in the history
  • Loading branch information
@HalvorHaugan
HalvorHaugan committed Sep 14, 2023
2 parents 466a3fd + ddf13d7 commit 14d8522
Show file tree
Hide file tree
Showing 4 changed files with 308 additions and 350 deletions.
5 changes: 5 additions & 0 deletions .changeset/green-laws-grin.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@navikt/ds-css": patch
---

:recycle: Box: Forenkling av CSS-variabler
108 changes: 33 additions & 75 deletions @navikt/core/css/primitives/box.css
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
.navds-box {
--__ac-box-padding-xs: initial;
--__ac-box-padding-sm: initial;
--__ac-box-padding-md: initial;
--__ac-box-padding-lg: initial;
--__ac-box-padding-xl: initial;
--__ac-box-padding-block-xs: initial;
--__ac-box-padding-sm: var(--__ac-box-padding-xs);
--__ac-box-padding-md: var(--__ac-box-padding-sm);
--__ac-box-padding-lg: var(--__ac-box-padding-md);
--__ac-box-padding-xl: var(--__ac-box-padding-lg);
--__ac-box-padding-inline-xs: initial;
--__ac-box-padding-block-sm: initial;
--__ac-box-padding-inline-sm: initial;
--__ac-box-padding-block-md: initial;
--__ac-box-padding-inline-md: initial;
--__ac-box-padding-block-lg: initial;
--__ac-box-padding-inline-lg: initial;
--__ac-box-padding-block-xl: initial;
--__ac-box-padding-inline-xl: initial;
--__ac-box-padding-inline-sm: var(--__ac-box-padding-inline-xs);
--__ac-box-padding-inline-md: var(--__ac-box-padding-inline-sm);
--__ac-box-padding-inline-lg: var(--__ac-box-padding-inline-md);
--__ac-box-padding-inline-xl: var(--__ac-box-padding-inline-lg);
--__ac-box-padding-block-xs: initial;
--__ac-box-padding-block-sm: var(--__ac-box-padding-block-xs);
--__ac-box-padding-block-md: var(--__ac-box-padding-block-sm);
--__ac-box-padding-block-lg: var(--__ac-box-padding-block-md);
--__ac-box-padding-block-xl: var(--__ac-box-padding-block-lg);
--__ac-box-padding: var(--__ac-box-padding-xs);
--__ac-box-padding-inline: var(--__ac-box-padding-inline-xs);
--__ac-box-padding-block: var(--__ac-box-padding-block-xs);
Expand All @@ -22,10 +22,10 @@
--__ac-box-shadow: initial;
--__ac-box-border-width: initial;
--__ac-box-border-radius-xs: initial;
--__ac-box-border-radius-sm: initial;
--__ac-box-border-radius-md: initial;
--__ac-box-border-radius-lg: initial;
--__ac-box-border-radius-xl: initial;
--__ac-box-border-radius-sm: var(--__ac-box-border-radius-xs);
--__ac-box-border-radius-md: var(--__ac-box-border-radius-sm);
--__ac-box-border-radius-lg: var(--__ac-box-border-radius-md);
--__ac-box-border-radius-xl: var(--__ac-box-border-radius-xl);
--__ac-box-border-radius: var(--__ac-box-border-radius-xs);

padding-inline: var(--__ac-box-padding-inline, var(--__ac-box-padding));
Expand All @@ -40,78 +40,36 @@

@media (min-width: 480px) {
.navds-box {
--__ac-box-padding: var(--__ac-box-padding-sm, var(--__ac-box-padding-xs));
--__ac-box-padding-inline: var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs));
--__ac-box-padding-block: var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs));
--__ac-box-border-radius: var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs));
--__ac-box-padding: var(--__ac-box-padding-sm);
--__ac-box-padding-inline: var(--__ac-box-padding-inline-sm);
--__ac-box-padding-block: var(--__ac-box-padding-block-sm);
--__ac-box-border-radius: var(--__ac-box-border-radius-sm);
}
}

@media (min-width: 768px) {
.navds-box {
--__ac-box-padding: var(--__ac-box-padding-md, var(--__ac-box-padding-sm, var(--__ac-box-padding-xs)));
--__ac-box-padding-inline: var(
--__ac-box-padding-inline-md,
var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs))
);
--__ac-box-padding-block: var(
--__ac-box-padding-block-md,
var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs))
);
--__ac-box-border-radius: var(
--__ac-box-border-radius-md,
var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs))
);
--__ac-box-padding: var(--__ac-box-padding-md);
--__ac-box-padding-inline: var(--__ac-box-padding-inline-md);
--__ac-box-padding-block: var(--__ac-box-padding-block-md);
--__ac-box-border-radius: var(--__ac-box-border-radius-md);
}
}

@media (min-width: 1024px) {
.navds-box {
--__ac-box-padding: var(
--__ac-box-padding-lg,
var(--__ac-box-padding-md, var(--__ac-box-padding-sm, var(--__ac-box-padding-xs)))
);
--__ac-box-padding-inline: var(
--__ac-box-padding-inline-lg,
var(--__ac-box-padding-inline-md, var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs)))
);
--__ac-box-padding-block: var(
--__ac-box-padding-block-lg,
var(--__ac-box-padding-block-md, var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs)))
);
--__ac-box-border-radius: var(
--__ac-box-border-radius-lg,
var(--__ac-box-border-radius-md, var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs)))
);
--__ac-box-padding: var(--__ac-box-padding-lg);
--__ac-box-padding-inline: var(--__ac-box-padding-inline-lg);
--__ac-box-padding-block: var(--__ac-box-padding-block-lg);
--__ac-box-border-radius: var(--__ac-box-border-radius-lg);
}
}

@media (min-width: 1280px) {
.navds-box {
--__ac-box-padding: var(
--__ac-box-padding-xl,
var(--__ac-box-padding-lg, var(--__ac-box-padding-md, var(--__ac-box-padding-sm, var(--__ac-box-padding-xs))))
);
--__ac-box-padding-inline: var(
--__ac-box-padding-inline-xl,
var(
--__ac-box-padding-inline-lg,
var(--__ac-box-padding-inline-md, var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs)))
)
);
--__ac-box-padding-block: var(
--__ac-box-padding-block-xl,
var(
--__ac-box-padding-block-lg,
var(--__ac-box-padding-block-md, var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs)))
)
);
--__ac-box-border-radius: var(
--__ac-box-border-radius-xl,
var(
--__ac-box-border-radius-lg,
var(--__ac-box-border-radius-md, var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs)))
)
);
--__ac-box-padding: var(--__ac-box-padding-xl);
--__ac-box-padding-inline: var(--__ac-box-padding-inline-xl);
--__ac-box-padding-block: var(--__ac-box-padding-block-xl);
--__ac-box-border-radius: var(--__ac-box-border-radius-xl);
}
}
Loading

0 comments on commit 14d8522

Please sign in to comment.