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

restyle global layout .. again :D

Browse Source
This commit is contained in:
Benedikt Rötsch
2017-10-05 13:52:41 +02:00
committed by Benedikt Rötsch
parent 30beb939b7
commit ee388aa9e5
3 changed files with 43 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,19 +15,20 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
justify-content: center; justify-content: space-between;
font-size: 0.8em; font-size: 0.8em;
@media (--breakpoint-desktop) {
justify-content: space-between;
}
} }
@element upper-first { @element upper-first {
flex: 1 1 auto;
display: flex; display: flex;
justify-content: space-between;
margin-bottom: calc(var(--grid-gutter) / 2);
@media (--breakpoint-desktop) { @media (--breakpoint-desktop) {
flex: 0 1 auto;
margin-bottom: 0;
& div + div { & div + div {
margin-left: var(--grid-gutter); margin-left: var(--grid-gutter);
} }
@@ -35,9 +36,13 @@
} }
@element upper-second { @element upper-second {
flex: 1 1 auto;
display: flex; display: flex;
justify-content: space-between;
@media (--breakpoint-desktop) { @media (--breakpoint-desktop) {
flex: 0 1 auto;
& div + div { & div + div {
margin-left: var(--grid-gutter); margin-left: var(--grid-gutter);
} }
@@ -105,7 +110,7 @@
@element controls { @element controls {
display: flex; display: flex;
flex: 0 0 100%; flex: 1 1 auto;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
color: var(--color-header-upper-text-primary); color: var(--color-header-upper-text-primary);

4
assets/stylesheets/layout/layout-centered.css
View File

@@ -1,14 +1,10 @@
@block layout-centered { @block layout-centered {
box-sizing: border-box;
width: 100%;
max-width: var(--content-max-width); max-width: var(--content-max-width);
margin: 0 auto; margin: 0 auto;
padding: 0 2vw; padding: 0 2vw;
} }
@block layout-centered-small { @block layout-centered-small {
box-sizing: border-box;
width: 100%;
max-width: calc(var(--content-max-width) - 360px); max-width: calc(var(--content-max-width) - 360px);
margin: 0 auto; margin: 0 auto;
padding: 0 2vw; padding: 0 2vw;

53
public/stylesheets/style.css
View File

@@ -838,18 +838,12 @@ input[type="reset"]:focus,
} }
.layout-centered { .layout-centered {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
max-width: 980px; max-width: 980px;
margin: 0 auto; margin: 0 auto;
padding: 0 2vw; padding: 0 2vw;
} }
.layout-centered-small { .layout-centered-small {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
max-width: 620px; max-width: 620px;
margin: 0 auto; margin: 0 auto;
padding: 0 2vw; padding: 0 2vw;
@@ -978,43 +972,60 @@ display: flex;
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-align: center; -ms-flex-align: center;
align-items: center; align-items: center;
-webkit-box-pack: center; -webkit-box-pack: justify;
-ms-flex-pack: center; -ms-flex-pack: justify;
justify-content: center; justify-content: space-between;
font-size: 0.8em; font-size: 0.8em;
} }
@media (min-width: 700px) {
.header__upper {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
}
.header__upper-first { .header__upper-first {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 11px;
} }
@media (min-width: 700px) { @media (min-width: 700px) {
.header__upper-first {
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
margin-bottom: 0;
}
.header__upper-first div + div { .header__upper-first div + div {
margin-left: 22px; margin-left: 22px;
} }
} }
.header__upper-second { .header__upper-second {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
} }
@media (min-width: 700px) { @media (min-width: 700px) {
.header__upper-second {
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
}
.header__upper-second div + div { .header__upper-second div + div {
margin-left: 22px; margin-left: 22px;
} }
@@ -1108,9 +1119,9 @@ display: flex;
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-flex: 0; -webkit-box-flex: 1;
-ms-flex: 0 0 100%; -ms-flex: 1 1 auto;
flex: 0 0 100%; flex: 1 1 auto;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-box-direction: normal; -webkit-box-direction: normal;
-ms-flex-direction: column; -ms-flex-direction: column;