Compare commits
2 Commits
master
...
Grid-asset
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
ccda2c463c | ||
|
|
0e151d2b1a |
36
src/scss/cdb-components/grid.scss
Normal file
36
src/scss/cdb-components/grid.scss
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
// Grid layout
|
||||||
|
// ----------------------------------------------
|
||||||
|
|
||||||
|
/* SG
|
||||||
|
# Grid/gaps
|
||||||
|
|
||||||
|
```
|
||||||
|
<div class="Grid">
|
||||||
|
<div class="Gap CDB-Width CDB-Width--1" style="background: green; height: 100px;"> </div>
|
||||||
|
<div class="Gap CDB-Width CDB-Width--2" style="background: orange"> </div>
|
||||||
|
<div class="Gap CDB-Width CDB-Width--3" style="background: red"> </div>
|
||||||
|
<div class="Gap CDB-Width CDB-Width--20" style="background: blue"> </div>
|
||||||
|
</div>
|
||||||
|
<div class="CDB-Width--120" style="margin: 20px 0; background: blue"> </div>
|
||||||
|
```
|
||||||
|
*/
|
||||||
|
|
||||||
|
@import '../cdb-variables/sizes';
|
||||||
|
|
||||||
|
.Grid {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CDB-Width {
|
||||||
|
width: $baseSize;
|
||||||
|
flex: 0 0 $baseSize;
|
||||||
|
max-width: $baseSize;
|
||||||
|
}
|
||||||
|
|
||||||
|
@for $i from 1 through 180 {
|
||||||
|
.CDB-Width--#{$i} {
|
||||||
|
width: $baseSize * $i;
|
||||||
|
flex: 0 0 $baseSize * $i;
|
||||||
|
max-width: $baseSize * $i;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user