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

style courses listing and fix grid list

Browse Source
This commit is contained in:
Benedikt Rötsch
2017-10-02 16:05:54 +02:00
committed by Benedikt Rötsch
parent 60d2c02ce7
commit 478633c398
11 changed files with 166 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
assets/stylesheets/layout/grid-list.css Normal file
View File

@@ -0,0 +1,12 @@
@block grid-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 calc(var(--grid-gutter) / 2 * -1);
@element item {
box-sizing: border-box;
margin: 0 calc(var(--grid-gutter) / 2) var(--grid-gutter);
flex: 0 0 calc(50% - var(--grid-gutter));
}
}

29
assets/stylesheets/layout/grid-lists.css
View File

@@ -1,29 +0,0 @@
.grid-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 calc(var(--grid-gutter) / 2 * -1);
& > * {
box-sizing: border-box;
margin: 0 calc(var(--grid-gutter) / 2) var(--grid-gutter);
flex: 0 0 calc(50% - var(--grid-gutter));
@media (--breakpoint-desktop) {
flex: 0 0 calc(33% - var(--grid-gutter));
}
}
}
.grid-list-small {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 calc(var(--grid-gutter) / 2 * -1);
& > * {
box-sizing: border-box;
margin: 0 calc(var(--grid-gutter) / 2) var(--grid-gutter);
flex: 0 0 calc(50% - var(--grid-gutter));
}
}

2
assets/stylesheets/layout/index.css
View File

@@ -1,3 +1,3 @@
@import 'layout-centered';
@import 'layout-sidebar';
@import 'grid-lists';
@import 'grid-list';

13
assets/stylesheets/layout/layout-sidebar.css
View File

@@ -10,19 +10,22 @@
@element sidebar {
@media (--breakpoint-desktop) {
flex: 0 0 220px;
border-radius: 7px;
flex: 0 0 auto;
width: var(--layout-sidebar-sidebar-width);
border-radius: var(--border-radius);
box-shadow: var(--card-box-shadow);
}
}
@element sidebar-header {
padding: var(--grid-gutter);
padding: 1em var(--grid-gutter);
border-bottom: 1px solid var(--color-sidebar-seperator);
}
@element sidebar-title {
font-family: var(--font-medium);
font-size: 1.25em;
font-weight: normal;
margin: 0;
}
@@ -35,9 +38,9 @@
padding: var(--grid-gutter) 0;
@media (--breakpoint-desktop) {
flex: 1 1 auto;
flex: 0 1 auto;
width: var(--layout-sidebar-content-width);
margin-left: var(--grid-gutter);
overflow: hidden;
}
}
}