Agile611/the-example-app-nodejs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(styling): align all spacing to match Malin's desig

Browse Source
This commit is contained in:
Benedikt Rötsch
2017-10-10 17:47:11 +02:00
committed by Benedikt Rötsch
parent db702ad424
commit 50aee89aaf
20 changed files with 187 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
assets/stylesheets/global/header.css
View File

@@ -1,5 +1,5 @@
@block header {
margin-bottom: var(--grid-gutter);
margin-bottom: calc(var(--spacing) * 0.75);
@media (--breakpoint-desktop) {
flex-wrap: nowrap;
@@ -7,7 +7,7 @@
@element upper-wrapper {
background: var(--color-palette-blue-dark);
padding: calc(var(--grid-gutter) / 2) 0;
padding: calc(var(--spacing) * 0.25) 0;
color: var(--color-header-upper-text-secondary);
}
@@ -54,10 +54,10 @@
@element upper-copy {
display: inline-flex;
margin: 0 0 calc(var(--grid-gutter) / 2);
margin: 0 0 calc(var(--spacing) / 4);
@media (--breakpoint-desktop) {
margin: 0 calc(var(--grid-gutter) / 2) 0 0;
margin: 0 calc(var(--spacing) / 2) 0 0;
}
}
@@ -65,7 +65,7 @@
display: inline-block;
width: 20px;
height: 20px;
margin-right: calc(var(--grid-gutter) / 4);
margin-right: calc(var(--spacing) / 4);
}
@element lower-wrapper {
@@ -75,7 +75,7 @@
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: var(--grid-gutter) 0 calc(var(--grid-gutter) / 4);
padding: calc(var(--spacing) * 0.5) 0 calc(var(--spacing) * 0.25);
border-bottom: 1px solid var(--color-bg-separator);
}
@@ -91,11 +91,11 @@
display: inline-block;
width: 24px;
height: auto;
margin-right: calc(var(--grid-gutter) / 2);
margin-right: calc(var(--spacing) / 4);
}
@media (--breakpoint-desktop) {
margin: 0 calc(var(--grid-gutter) / 2) 0 0;
margin: 0 calc(var(--spacing) / 2) 0 0;
}
}
@@ -106,6 +106,7 @@
@media (--breakpoint-desktop) {
flex: 0 0 200px;
justify-content: start;
}
& img {
@@ -133,8 +134,8 @@
position: relative;
display: flex;
margin: 0 0 calc(var(--grid-gutter) / 2);
padding: 0 calc(var(--grid-gutter) / 2);
margin: 0 0 calc(var(--spacing) * 0.5);
padding: calc(var(--spacing) * 0.0625) calc(var(--spacing) / 2);
border: none;
background: var(--color-palette-blue-medium);
@@ -146,14 +147,13 @@
}
@media (--breakpoint-desktop) {
margin: 0 calc(var(--grid-gutter) / 2) 0 0;
margin: 0 calc(var(--spacing) * 0.75) 0 0;
}
}
@element controls_label {
position: relative;
z-index: 1;
font-family: var(--font-medium);
cursor: pointer;
}
@@ -164,7 +164,7 @@
width: 260px;
max-width: 90vw;
margin: calc(var(--grid-gutter) / 2 - 4px) 0 0;
margin: calc(var(--spacing) / 2 - 4px) 0 0;
opacity: 0;
background: #fff;
@@ -193,7 +193,7 @@
}
@element controls_help_text {
padding: calc(var(--grid-gutter) / 2);
padding: calc(var(--spacing) / 2);
color: var(--color-text-grey);
}