assets/main/sass/libs/_fixed-grid.scss

   1 // fixed-grid.scss v1.0 | @ajlkn | MIT licensed */
   2
   3 // Mixins.
   4
   5         /// Initializes base fixed-grid classes.
   6         /// @param {string} $vertical-align Vertical alignment of cells.
   7         /// @param {string} $horizontal-align Horizontal alignment of cells.
   8         @mixin fixed-grid-base($vertical-align: null, $horizontal-align: null) {
   9
  10                 // Grid.
  11                         @include vendor('display', 'flex');
  12                         @include vendor('flex-wrap', 'wrap');
  13
  14                         // Vertical alignment.
  15                                 @if ($vertical-align == top) {
  16                                         @include vendor('align-items', 'flex-start');
  17                                 }
  18                                 @else if ($vertical-align == bottom) {
  19                                         @include vendor('align-items', 'flex-end');
  20                                 }
  21                                 @else if ($vertical-align == center) {
  22                                         @include vendor('align-items', 'center');
  23                                 }
  24                                 @else {
  25                                         @include vendor('align-items', 'stretch');
  26                                 }
  27
  28                         // Horizontal alignment.
  29                                 @if ($horizontal-align != null) {
  30                                         text-align: $horizontal-align;
  31                                 }
  32
  33                 // Cells.
  34                         > * {
  35                                 @include vendor('flex-shrink', '1');
  36                                 @include vendor('flex-grow', '0');
  37                         }
  38
  39         }
  40
  41         /// Sets up fixed-grid columns.
  42         /// @param {integer} $columns Columns.
  43         @mixin fixed-grid-columns($columns) {
  44
  45                 > * {
  46                         $cell-width: 100% / $columns;
  47                         width: #{$cell-width};
  48                 }
  49
  50         }
  51
  52         /// Sets up fixed-grid gutters.
  53         /// @param {integer} $columns Columns.
  54         /// @param {number} $gutters Gutters.
  55         @mixin fixed-grid-gutters($columns, $gutters) {
  56
  57                 // Apply padding.
  58                         > * {
  59                                 $cell-width: 100% / $columns;
  60
  61                                 padding: ($gutters * 0.5);
  62                                 width: $cell-width;
  63                         }
  64
  65         }
  66
  67         /// Sets up fixed-grid gutters (flush).
  68         /// @param {integer} $columns Columns.
  69         /// @param {number} $gutters Gutters.
  70         @mixin fixed-grid-gutters-flush($columns, $gutters) {
  71
  72                 // Apply padding.
  73                         > * {
  74                                 $cell-width: 100% / $columns;
  75                                 $cell-width-pad: $gutters / $columns;
  76
  77                                 padding: ($gutters * 0.5);
  78                                 width: calc(#{$cell-width} + #{$cell-width-pad});
  79                         }
  80
  81                 // Clear top/bottom gutters.
  82                         > :nth-child(-n + #{$columns}) {
  83                                 padding-top: 0;
  84                         }
  85
  86                         > :nth-last-child(-n + #{$columns}) {
  87                                 padding-bottom: 0;
  88                         }
  89
  90                 // Clear left/right gutters.
  91                         > :nth-child(#{$columns}n + 1) {
  92                                 padding-left: 0;
  93                         }
  94
  95                         > :nth-child(#{$columns}n) {
  96                                 padding-right: 0;
  97                         }
  98
  99                 // Adjust widths of leftmost and rightmost cells.
 100                         > :nth-child(#{$columns}n + 1),
 101                         > :nth-child(#{$columns}n) {
 102                                 $cell-width: 100% / $columns;
 103                                 $cell-width-pad: ($gutters / $columns) - ($gutters / 2);
 104
 105                                 width: calc(#{$cell-width} + #{$cell-width-pad});
 106                         }
 107
 108         }
 109
 110         /// Reset fixed-grid gutters (flush only).
 111         /// Used to override a previous set of fixed-grid gutter classes.
 112         /// @param {integer} $columns Columns.
 113         /// @param {number} $gutters Gutters.
 114         /// @param {integer} $prev-columns Previous columns.
 115         @mixin fixed-grid-gutters-flush-reset($columns, $gutters, $prev-columns) {
 116
 117                 // Apply padding.
 118                         > * {
 119                                 $cell-width: 100% / $prev-columns;
 120                                 $cell-width-pad: $gutters / $prev-columns;
 121
 122                                 padding: ($gutters * 0.5);
 123                                 width: calc(#{$cell-width} + #{$cell-width-pad});
 124                         }
 125
 126                 // Clear top/bottom gutters.
 127                         > :nth-child(-n + #{$prev-columns}) {
 128                                 padding-top: ($gutters * 0.5);
 129                         }
 130
 131                         > :nth-last-child(-n + #{$prev-columns}) {
 132                                 padding-bottom: ($gutters * 0.5);
 133                         }
 134
 135                 // Clear left/right gutters.
 136                         > :nth-child(#{$prev-columns}n + 1) {
 137                                 padding-left: ($gutters * 0.5);
 138                         }
 139
 140                         > :nth-child(#{$prev-columns}n) {
 141                                 padding-right: ($gutters * 0.5);
 142                         }
 143
 144                 // Adjust widths of leftmost and rightmost cells.
 145                         > :nth-child(#{$prev-columns}n + 1),
 146                         > :nth-child(#{$prev-columns}n) {
 147                                 $cell-width: 100% / $columns;
 148                                 $cell-width-pad: $gutters / $columns;
 149
 150                                 padding: ($gutters * 0.5);
 151                                 width: calc(#{$cell-width} + #{$cell-width-pad});
 152                         }
 153
 154         }
 155
 156         /// Adds debug styles to current fixed-grid element.
 157         @mixin fixed-grid-debug() {
 158
 159                 box-shadow: 0 0 0 1px red;
 160
 161                 > * {
 162                         box-shadow: inset 0 0 0 1px blue;
 163                         position: relative;
 164
 165                         > * {
 166                                 position: relative;
 167                                 box-shadow: inset 0 0 0 1px green;
 168                         }
 169                 }
 170
 171         }
 172
 173         /// Initializes the current element as a fixed grid.
 174         /// @param {integer} $columns Columns (optional).
 175         /// @param {number} $gutters Gutters (optional).
 176         /// @param {bool} $flush If true, clears padding around the very edge of the grid.
 177         @mixin fixed-grid($settings: ()) {
 178
 179                 // Settings.
 180
 181                         // Debug.
 182                                 $debug: false;
 183
 184                                 @if (map-has-key($settings, 'debug')) {
 185                                         $debug: map-get($settings, 'debug');
 186                                 }
 187
 188                         // Vertical align.
 189                                 $vertical-align: null;
 190
 191                                 @if (map-has-key($settings, 'vertical-align')) {
 192                                         $vertical-align: map-get($settings, 'vertical-align');
 193                                 }
 194
 195                         // Horizontal align.
 196                                 $horizontal-align: null;
 197
 198                                 @if (map-has-key($settings, 'horizontal-align')) {
 199                                         $horizontal-align: map-get($settings, 'horizontal-align');
 200                                 }
 201
 202                         // Columns.
 203                                 $columns: null;
 204
 205                                 @if (map-has-key($settings, 'columns')) {
 206                                         $columns: map-get($settings, 'columns');
 207                                 }
 208
 209                         // Gutters.
 210                                 $gutters: 0;
 211
 212                                 @if (map-has-key($settings, 'gutters')) {
 213                                         $gutters: map-get($settings, 'gutters');
 214                                 }
 215
 216                         // Flush.
 217                                 $flush: true;
 218
 219                                 @if (map-has-key($settings, 'flush')) {
 220                                         $flush: map-get($settings, 'flush');
 221                                 }
 222
 223                 // Initialize base grid.
 224                         @include fixed-grid-base($vertical-align, $horizontal-align);
 225
 226                 // Debug?
 227                         @if ($debug) {
 228                                 @include fixed-grid-debug;
 229                         }
 230
 231                 // Columns specified?
 232                         @if ($columns != null) {
 233
 234                                 // Initialize columns.
 235                                         @include fixed-grid-columns($columns);
 236
 237                                 // Gutters specified?
 238                                         @if ($gutters > 0) {
 239
 240                                                 // Flush gutters?
 241                                                         @if ($flush) {
 242
 243                                                                 // Initialize gutters (flush).
 244                                                                         @include fixed-grid-gutters-flush($columns, $gutters);
 245
 246                                                         }
 247
 248                                                 // Otherwise ...
 249                                                         @else {
 250
 251                                                                 // Initialize gutters.
 252                                                                         @include fixed-grid-gutters($columns, $gutters);
 253
 254                                                         }
 255
 256                                         }
 257
 258                         }
 259
 260         }
 261
 262         /// Resizes a previously-initialized grid.
 263         /// @param {integer} $columns Columns.
 264         /// @param {number} $gutters Gutters (optional).
 265         /// @param {list} $reset A list of previously-initialized grid columns (only if $flush is true).
 266         /// @param {bool} $flush If true, clears padding around the very edge of the grid.
 267         @mixin fixed-grid-resize($settings: ()) {
 268
 269                 // Settings.
 270
 271                         // Columns.
 272                                 $columns: 1;
 273
 274                                 @if (map-has-key($settings, 'columns')) {
 275                                         $columns: map-get($settings, 'columns');
 276                                 }
 277
 278                         // Gutters.
 279                                 $gutters: 0;
 280
 281                                 @if (map-has-key($settings, 'gutters')) {
 282                                         $gutters: map-get($settings, 'gutters');
 283                                 }
 284
 285                         // Previous columns.
 286                                 $prev-columns: false;
 287
 288                                 @if (map-has-key($settings, 'prev-columns')) {
 289                                         $prev-columns: map-get($settings, 'prev-columns');
 290                                 }
 291
 292                         // Flush.
 293                                 $flush: true;
 294
 295                                 @if (map-has-key($settings, 'flush')) {
 296                                         $flush: map-get($settings, 'flush');
 297                                 }
 298
 299                 // Resize columns.
 300                         @include fixed-grid-columns($columns);
 301
 302                 // Gutters specified?
 303                         @if ($gutters > 0) {
 304
 305                                 // Flush gutters?
 306                                         @if ($flush) {
 307
 308                                                 // Previous columns specified?
 309                                                         @if ($prev-columns) {
 310
 311                                                                 // Convert to list if it isn't one already.
 312                                                                         @if (type-of($prev-columns) != list) {
 313                                                                                 $prev-columns: ($prev-columns);
 314                                                                         }
 315
 316                                                                 // Step through list of previous columns and reset them.
 317                                                                         @each $x in $prev-columns {
 318                                                                                 @include fixed-grid-gutters-flush-reset($columns, $gutters, $x);
 319                                                                         }
 320
 321                                                         }
 322
 323                                                 // Resize gutters (flush).
 324                                                         @include fixed-grid-gutters-flush($columns, $gutters);
 325
 326                                         }
 327
 328                                 // Otherwise ...
 329                                         @else {
 330
 331                                                 // Resize gutters.
 332                                                         @include fixed-grid-gutters($columns, $gutters);
 333
 334                                         }
 335
 336                         }
 337
 338         }