afm-client/bower_components/foundation-apps/scss/components/_grid.scss

   1 @import "panel";
   2
   3 /*
   4   THE GRID
   5   --------
   6
   7   Foundation's magical, flexbox-powered grid.
   8
   9   Features:
  10    - Horizontal or vertical grids
  11    - Auto-sizing or percentage width grid blocks
  12    - Independently-scrollable blocks
  13    - Column alignment
  14    - Source ordering
  15    - Offsets
  16 */
  17
  18 /// @Foundation.settings
  19 // Grid
  20 $container-width: rem-calc(900) !default;
  21 $block-padding: $global-padding !default;
  22 $total-columns: 12 !default;
  23 $block-grid-max-size: 6 !default;
  24 ///
  25
  26 /*
  27   Define the size of a grid block. Blocks are flex items. By default, they stretch to fill all available space, based on the size of sibling blocks. This is the "expand" behavior.
  28
  29   If set to "shrink", the block will contract and only fill as much space as it needs for its content.
  30
  31   If set to a number, the block will be given a percentage width, based on the total number of columns (12 by default). Percentage widths don't work if a block is inside a vertical grid.
  32
  33   @group grid
  34
  35   @param {number|string} $size - Sizing behavior of the block. Should be expand, shrink, or a number.
  36
  37   @output The flex-basis, flex-grow, and flex-shrink properties.
  38 */
  39 @mixin grid-size($size: expand) {
  40   @if (type-of($size) == 'number') {
  41     $pct: percentage($size / $total-columns);
  42     flex: 0 0 $pct;
  43     // max-width prevents columns from wrapping early in IE10/11
  44     max-width: $pct;
  45   }
  46   @else if ($size == shrink) {
  47     flex: 0 0 auto;
  48   }
  49   @else if ($size == expand) {
  50     flex: 1 1 auto;
  51   }
  52 }
  53 /*
  54   Set the orientation of blocks within this block. The grid is re-oriented by changing the flex direction of the block.
  55
  56   @group grid
  57
  58   @param {string} $orientation - Direction of the grid, either horizontal or vertical.
  59
  60   @output A flex-flow property to match the direction given.
  61 */
  62 @mixin grid-orient($orientation: horizontal) {
  63   @if ($orientation == vertical) {
  64     flex-flow: column nowrap;
  65     align-items: stretch;
  66   }
  67   @else {
  68     flex-flow: row wrap;
  69   }
  70 }
  71 /*
  72   Stretch a grid's child blocks across its cross-axis, making every column appear to have the same height.
  73
  74   @group grid
  75
  76   @param {bool} $stretch - Stretch blocks if true, or align blocks to top if false.
  77
  78   @output Sets align-items to "stretch" if $stretch is true, or "flex-start" (the default value) if false.
  79 */
  80 @mixin grid-wrap($wrap: true) {
  81   @if $wrap {
  82     flex-wrap: wrap;
  83     align-items: flex-start;
  84   }
  85   @else {
  86     flex-wrap: nowrap;
  87     align-items: stretch;
  88   }
  89 }
  90 /*
  91   Set the alignment of blocks within a grid.
  92
  93   left: Items align to the left.
  94   right: Items align to the right.
  95   center: Items align to the center.
  96   justify: Items are spaced equally apart so they occupy the space of the entire grid.
  97   spaced: Items are given equal space to their left and right.
  98
  99   @group grid
 100
 101   @param {string} $align - Alignment to use.
 102
 103   @output An appropriate justify-content value.
 104 */
 105 @mixin grid-align($align: left) {
 106   $options: (
 107     left: flex-start,
 108     right: flex-end,
 109     center: center,
 110     justify: space-between,
 111     spaced: space-around,
 112   );
 113   justify-content: map-get($options, $align);
 114 }
 115 /*
 116   Set the source order of a block. Items with lower numbers appear first. If multiple items have the same number, the one in the HTML first will appear first.
 117
 118   @group grid
 119
 120   @param {number} $order - Position in source order.
 121
 122   @output An order property.
 123 */
 124 @mixin grid-order($order: 0) {
 125   order: $order;
 126 }
 127 /*
 128   Collapse a content block by removing the padding.
 129
 130   @group grid
 131
 132   @param {bool} $collapse - Collapses the block if true.
 133
 134   @output A padding value.
 135
 136   @todo No way to reverse collapse using this mixin. Solution:
 137     - If true, add padding: 0;
 138     - If false, add padding: 1rem;
 139     - If null, add nothing, to cut down on CSS output
 140     - Make null the default value
 141 */
 142 @mixin grid-collapse($collapse: true) {
 143   @if ($collapse) {
 144     padding: 0;
 145   }
 146 }
 147 /*
 148   Constrain the size of a block to the size of the average grid row, and center-align it. This imitates the behavior of ordinary Foundation rows.
 149
 150   @group grid
 151
 152   @param {bool} $container - Adds container styles if true.
 153
 154   @output A maximum width and the good old margin: 0 auto for center alignment.
 155 */
 156 @mixin grid-container($width: $container-width, $align: center) {
 157   $margins: (
 158     left:  0 auto 0 0,
 159     right: 0 0 0 auto,
 160     center: 0 auto,
 161   );
 162   max-width: $width;
 163   margin: map-get($margins, $align);
 164 }
 165 /*
 166   Add negative margins to a block, equal to the padding of a content block. This aligns the edges of a block nested inside a content block.
 167
 168   @group grid
 169
 170   @param {bool} $nest - Adds negative margins if true.
 171
 172   @output Negative margin values.
 173 */
 174 @mixin grid-nest($nest: true) {
 175   @if ($nest) {
 176     margin-left: -1rem;
 177     margin-right: -1rem;
 178   }
 179 }
 180 /*
 181   Offset a block by adding a left margin.
 182
 183   @group grid
 184
 185   @param {number | bool} $offset - If false, nothing is output. If a number, offsets the column by the specified number of columns.
 186
 187   @output A left margin based on the number of columns specified, and the global number of columns.
 188 */
 189 @mixin grid-offset($offset: false) {
 190   @if ($offset != false) {
 191     margin-left: percentage($offset / $total-columns);
 192   }
 193 }
 194
 195 /*
 196   Resets styles set by panels. Use this when a panel transforms into a block on larger screens.
 197
 198   @group grid
 199
 200   @output Resets to transform, position, and a few visual styles.
 201 */
 202 @mixin grid-panel-reset() {
 203   transform: none;
 204   position: relative;
 205   width: auto;
 206   height: auto;
 207   z-index: auto;
 208   box-shadow: none;
 209   background: transparent;
 210   top: auto;
 211   right: auto;
 212   bottom: auto;
 213   left: auto;
 214 }
 215
 216 /*
 217   Frames are containers that stretch to the full dimmensions of the browser window.
 218 */
 219 @mixin grid-frame($size: expand, $orientation: horizontal, $wrap: false, $align: left, $order: 0) {
 220   display: flex;
 221   height: 100vh;
 222   position: relative;
 223   overflow: hidden;
 224   backface-visibility: hidden;
 225
 226   @include grid-size($size);
 227   @include grid-orient($orientation);
 228   @include grid-wrap($wrap);
 229   @include grid-align($align);
 230   @include grid-order($order);
 231 }
 232
 233 /*
 234   Groups are collections of content items. They're the "rows" of Foundation for Apps.
 235 */
 236 @mixin grid-block($size: expand, $orientation: horizontal, $wrap: false, $align: left, $order: 0) {
 237   @include grid-frame($size, $orientation, $wrap, $align, $order);
 238
 239   // Reset the height used by frames
 240   height: auto;
 241
 242   // Blocks will scroll by default if their content overflows
 243   @if ($orientation == vertical) {
 244     overflow-x: auto;
 245   }
 246   @else {
 247     overflow-y: auto;
 248   }
 249
 250   // Add scrolling with inertia
 251   -webkit-overflow-scrolling: touch;
 252   -ms-overflow-style: -ms-autohiding-scrollbar;
 253 }
 254
 255 /*
 256   Blocks are containers for actual content. They're the "columns" of Foundation for Apps.
 257 */
 258 @mixin grid-content($size: expand, $offset: null, $order: null) {
 259   // Content blocks are not flex items and have padding
 260   display: block;
 261   padding: 0 $block-padding;
 262
 263   // Add scrolling with inertia
 264   overflow-y: auto;
 265   -webkit-overflow-scrolling: touch;
 266   -ms-overflow-style: -ms-autohiding-scrollbar;
 267
 268   @include grid-size($size);
 269   @if $offset != null { @include grid-offset($offset); }
 270   @if $order != null  { @include grid-order($order); }
 271 }
 272
 273 @mixin grid-layout($up) {
 274   flex-flow: row wrap;
 275   overflow: visible;
 276   list-style-type: none;
 277
 278   > li, > div, > section {
 279     padding: 0 1rem 1rem;
 280     flex: 0 0 percentage(1 / $up);
 281   }
 282 }
 283
 284 // CSS Output
 285 // - - - - - - - - - - - - - - - - - - - -
 286
 287 // Shared styles for frames and blocks (parent elements)
 288 %block-core {
 289   // Change the direction children flow
 290   &.vertical { @include grid-orient(vertical); }
 291   @each $size in $breakpoint-classes {
 292     @include breakpoint($size) {
 293       &.#{$size}-vertical   { @include grid-orient(vertical); }
 294       &.#{$size}-horizontal { @include grid-orient(horizontal); }
 295     }
 296   }
 297
 298   // Align the children of a grid block
 299   &.align-right   { @include grid-align(right); }
 300   &.align-center  { @include grid-align(center); }
 301   &.align-justify { @include grid-align(justify); }
 302   &.align-spaced  { @include grid-align(spaced); }
 303
 304   // Allow child elements to wrap
 305   &.wrap { @include grid-wrap(true); }
 306 }
 307
 308 // Shared styles for blocks and content blocks (child elements)
 309 %child-core {
 310   // Shrink a flex item so it only takes up the space it needs
 311   &.shrink { @include grid-size(shrink); }
 312
 313   // Prevent an element from scrolling
 314   &.noscroll { overflow: hidden; }
 315 }
 316
 317 @include exports(grid) {
 318   // The core grid elements:
 319   //  - Frame
 320   //  - Block
 321   //  - Content block
 322   //  - Container
 323   .grid-frame {
 324     @extend %block-core;
 325     @include grid-frame;
 326   }
 327   .grid-block {
 328     @extend %block-core;
 329     @extend %child-core;
 330     @include grid-block;
 331   }
 332   .grid-content {
 333     @extend %child-core;
 334     @include grid-content;
 335
 336     &.collapse {
 337       padding: 0;
 338     }
 339
 340     // Grids inside content blocks should wrap by default, so they mimic traditional float grids
 341     .grid-block {
 342       margin-left: -($block-padding);
 343       margin-right: -($block-padding);
 344       flex-wrap: wrap;
 345       overflow: visible;
 346
 347       // Reverse the above wrapping behavior
 348       &.nowrap {
 349         @include grid-wrap(false);
 350       }
 351
 352       .grid-content {
 353         overflow: visible;
 354       }
 355     }
 356   }
 357   .grid-container {
 358     @include grid-container;
 359
 360     &.contain-left  { @include grid-container($align: left); }
 361     &.contain-right { @include grid-container($align: right); }
 362   }
 363
 364   // Breakpoint classes for blocks
 365   @each $size in $breakpoint-classes {
 366     .#{$size}-grid-block {
 367       @extend %block-core;
 368       @extend %child-core;
 369
 370       @include breakpoint($size) {
 371         @include grid-block;
 372
 373         // Override panel styles
 374         &.panel { @include grid-panel-reset; }
 375       }
 376     }
 377     .#{$size}-grid-content {
 378       @extend %child-core;
 379
 380       @include breakpoint($size) {
 381         @include grid-content;
 382
 383         // Override panel styles
 384         &.panel { @include grid-panel-reset; }
 385       }
 386     }
 387   }
 388
 389   // Sizing and ordering classes
 390   @for $i from 1 through $total-columns {
 391     // Source ordering
 392     .order-#{$i} { @include grid-order($i); }
 393   }
 394   @each $size in $breakpoint-classes {
 395     @for $i from 1 through $total-columns {
 396       @include breakpoint($size) {
 397         // Block sizing
 398         .#{$size}-#{$i} {
 399           @include grid-size($i);
 400         }
 401         // Source ordering
 402         .#{$size}-order-#{$i} {
 403           @include grid-order($i);
 404         }
 405         // Offsets
 406         .#{$size}-offset-#{$i} {
 407           @include grid-offset($i);
 408         }
 409         // Parent sizing (block grids)
 410         .#{$size}-up-#{$i} {
 411           @include grid-layout($i);
 412         }
 413       }
 414     }
 415   }
 416
 417   .grid-content .modal .grid-block {
 418     flex-wrap: nowrap;
 419   }
 420 }