diff options
| author | Frederic Guillot <fred@kanboard.net> | 2016-08-07 22:52:29 -0400 |
|---|---|---|
| committer | Frederic Guillot <fred@kanboard.net> | 2016-08-07 22:52:29 -0400 |
| commit | fd0bea2187b33e2e90296882dc2e03c2557d65e9 (patch) | |
| tree | a12b4910a0ea7839d8eadbf6a3a9334320814e4b /assets/sass | |
| parent | 41f93e09572a1adb9ad520974949ef9965dd3b28 (diff) | |
Use Sass custom mixins for grid
Diffstat (limited to 'assets/sass')
| -rw-r--r-- | assets/sass/_header.sass | 28 | ||||
| -rw-r--r-- | assets/sass/_mixins.sass | 25 | ||||
| -rw-r--r-- | assets/sass/_variables.sass | 4 |
3 files changed, 57 insertions, 0 deletions
diff --git a/assets/sass/_header.sass b/assets/sass/_header.sass index 13ae6a99..c2bcb90e 100644 --- a/assets/sass/_header.sass +++ b/assets/sass/_header.sass @@ -1,9 +1,37 @@ @import variables +@import mixins header + @include grid(100) margin-top: 5px margin-bottom: 5px border-bottom: 1px solid #dedede + + .menus-container + @include grid_width(10/100) + @include md-device + @include grid_width(15/100) + @include sm-device + @include grid_width(65/100) + order: 2 + + .board-selector-container + @include grid_width(15/100) + @include md-device + @include grid_width(20/100) + @include sm-device + @include grid_width(35/100) + order: 1 + margin-bottom: 5px + + .title-container + @include grid_width(75/100) + @include md-device + @include grid_width(65/100) + @include sm-device + @include grid_width(1) + order: 3 + h1 font-size: size('title') .tooltip diff --git a/assets/sass/_mixins.sass b/assets/sass/_mixins.sass new file mode 100644 index 00000000..5813f3bb --- /dev/null +++ b/assets/sass/_mixins.sass @@ -0,0 +1,25 @@ +@import variables + +@mixin xs-device + @media (max-width: #{$xs-device-width}) + @content + +@mixin sm-device + @media (max-width: #{$sm-device-width}) + @content + +@mixin md-device + @media (min-width: #{$sm-device-width}) and (max-width: #{$md-device-width}) + @content + +@mixin grid($columns: 0) + box-sizing: border-box + display: flex + flex-wrap: wrap + > * + box-sizing: border-box + > * + width: (1/$columns) * 100% + +@mixin grid_width($width) + width: $width * 100% diff --git a/assets/sass/_variables.sass b/assets/sass/_variables.sass index fcfc718a..6e069240 100644 --- a/assets/sass/_variables.sass +++ b/assets/sass/_variables.sass @@ -1,3 +1,7 @@ +$xs-device-width: 480px +$sm-device-width: 768px +$md-device-width: 1150px + $colors: ('primary': #333, 'light': #999, 'dark': #000, 'medium': #555, 'error': #b94a48) $link-colors: ('primary': #3366CC, 'focus': #DF5353, 'hover': #333) $background-colors: ('primary': #fbfbfb, 'light': #fcfcfc) |