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;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user