edb/neuf-www
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add variables for most spacing and size values

Browse Source
This commit is contained in:
Elise Jakobsen
2024-06-21 12:21:01 +02:00
parent 8ba4fa8d04
commit 5762655653
29 changed files with 137 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/components/blocks/accordion.module.scss
View File

@@ -1,7 +1,7 @@
.accordion {
margin: var(--spacing-l) 0;
max-width: var(--size-width-p);
padding: 1rem 0;
padding: var(--spacing-s) 0;
border-top: var(--border-s);
border-bottom: var(--border-s);
@@ -39,8 +39,8 @@
content: "";
display: block;
position: absolute;
width: 3rem;
height: 3rem;
width: var(--size-icon-circle);
height: var(--size-icon-circle);
background-size: 100%;
background-image: url("/assets/icons/circle-arrow-right.svg");
right: 0;
@@ -50,7 +50,7 @@
}
.accordionContent {
padding: 2rem 0 1rem;
padding: var(--spacing-m) 0 var(--spacing-s);
display: none;
}

6
web/src/components/blocks/featuredBlock.module.scss
View File

@@ -1,7 +1,7 @@
.featuredBlock {
background: var(--color-background-secondary);
margin: calc(var(--spacing-sitepadding)*2) calc(var(--spacing-sitepadding)*-1);
padding: var(--spacing-sitepadding);
margin: calc(var(--spacing-sitepadding-block)*2) calc(var(--spacing-sitepaddign-inline)*-1);
padding: var(--spacing-sitepadding-block) var(--spacing-sitepadding-inline);
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: var(--spacing-gap-column);
@@ -22,7 +22,7 @@
}
+.featuredBlock {
margin-top: calc(var(--spacing-sitepadding)*-2);
margin-top: calc(var(--spacing-sitepadding-block)*-2);
}
&:last-child {

3
web/src/components/blocks/horizontalRuleBlock.module.scss
View File

@@ -1,9 +1,8 @@
.horizontalRuleBlock {
height: 3rem;
width: 100%;
//max-width: calc(var(--size-width-p) + (var(--spacing-sitepadding)/2));
max-width: var(--size-width-p);
margin: 1rem auto 4rem;
margin: var(--spacing-s) auto var(--spacing-section-bottom);
overflow: hidden;
position: relative;

8
web/src/components/blocks/iconListBlock.module.scss
View File

@@ -36,18 +36,18 @@
}
.text {
margin-bottom: 1rem;
margin-bottom: var(--spacing-s);
h2 {
font-size: var(--font-size-lead);
margin: .5rem 0;
margin: var(--spacing-xs) 0;
}
}
.icon {
flex: none;
width: 3.4rem;
height: 3.4rem;
width: var(--size-icon-large);
height: var(--size-icon-large);
background: var(--color-goldenBeige);
border-radius: 100%;
display: flex;

6
web/src/components/blocks/imageSliderBlock.module.scss
View File

@@ -3,7 +3,7 @@
padding-top: 56%;
background: var(--color-black);
color: var(--color-goldenBeige);
margin: calc(var(--spacing-sitepadding)*2) calc(var(--spacing-sitepadding)*-1);
margin: calc(var(--spacing-sitepadding-block)*2) calc(var(--spacing-sitepaddign-inline)*-1);
figure {
width: 100%;
@@ -29,7 +29,7 @@
bottom: 0;
max-width: var(--size-width-p);
margin: 0 auto;
padding: .75rem 1rem;
padding: .75rem var(--spacing-s);
font-size: var(--font-size-caption);
line-height: 1.4;
background: rgba(0, 0, 0, .6);
@@ -41,6 +41,6 @@
}
&[data-hero] {
margin-top: calc(var(--spacing-sitepadding)* -2);
margin-top: calc(var(--spacing-sitepadding-block)* -2);
}
}

6
web/src/components/blocks/imageWithTextBlock.module.scss
View File

@@ -12,7 +12,7 @@
width: 100%;
max-width: var(--size-width-p);
margin: 0 auto;
padding: 1rem 0;
padding: var(--spacing-s) 0;
font-size: var(--font-size-caption);
line-height: 1.4;
opacity: .8;
@@ -20,14 +20,14 @@
&.bleed {
width: 100vw;
margin: 2rem calc(var(--spacing-sitepadding)*-1);
margin: 2rem calc(var(--spacing-sitepadding-inline)*-1);
img {
width: 100%;
}
@media (max-width: 800px) {
padding: .5rem var(--spacing-sitepadding);
padding: var(--spacing-xs) var(--spacing-sitepadding-inline);
}
}

2
web/src/components/blocks/richTextBlock.module.scss
View File

@@ -7,7 +7,7 @@
h4,
h5,
h6 {
margin: 2rem auto 1rem;
margin: var(--spacing-m) auto var(--spacing-s);
max-width: var(--size-width-p);
}

8
web/src/components/blocks/swiper.scss
View File

@@ -20,7 +20,7 @@
.swiper-button-next {
&:before {
background-image: url("/assets/icons/circle-arrow-right.svg");
right: var(--spacing-sitepadding);
right: var(--spacing-sitepadding-inline);
}
&:after {
@@ -32,7 +32,7 @@
.swiper-button-prev {
&:before {
background-image: url("/assets/icons/circle-arrow-left.svg");
left: var(--spacing-sitepadding);
left: var(--spacing-sitepadding-inline);
}
&:after {
@@ -44,8 +44,8 @@
.swiper-pagination {
display: inline-block;
width: auto;
margin: var(--spacing-sitepadding);
padding: 0 .5rem;
margin: var(--spacing-sitepadding-block) var(--spacing-sitepadding-inline);
padding: 0 var(--spacing-xs);
border-radius: 2rem;
background: rgba(0, 0, 0, 0.6);
position: absolute;