--- /dev/null
+// fixed-grid.scss v1.0 | @ajlkn | MIT licensed */\r
+\r
+// Mixins.\r
+\r
+ /// Initializes base fixed-grid classes.\r
+ /// @param {string} $vertical-align Vertical alignment of cells.\r
+ /// @param {string} $horizontal-align Horizontal alignment of cells.\r
+ @mixin fixed-grid-base($vertical-align: null, $horizontal-align: null) {\r
+\r
+ // Grid.\r
+ @include vendor('display', 'flex');\r
+ @include vendor('flex-wrap', 'wrap');\r
+\r
+ // Vertical alignment.\r
+ @if ($vertical-align == top) {\r
+ @include vendor('align-items', 'flex-start');\r
+ }\r
+ @else if ($vertical-align == bottom) {\r
+ @include vendor('align-items', 'flex-end');\r
+ }\r
+ @else if ($vertical-align == center) {\r
+ @include vendor('align-items', 'center');\r
+ }\r
+ @else {\r
+ @include vendor('align-items', 'stretch');\r
+ }\r
+\r
+ // Horizontal alignment.\r
+ @if ($horizontal-align != null) {\r
+ text-align: $horizontal-align;\r
+ }\r
+\r
+ // Cells.\r
+ > * {\r
+ @include vendor('flex-shrink', '1');\r
+ @include vendor('flex-grow', '0');\r
+ }\r
+\r
+ }\r
+\r
+ /// Sets up fixed-grid columns.\r
+ /// @param {integer} $columns Columns.\r
+ @mixin fixed-grid-columns($columns) {\r
+\r
+ > * {\r
+ $cell-width: 100% / $columns;\r
+ width: #{$cell-width};\r
+ }\r
+\r
+ }\r
+\r
+ /// Sets up fixed-grid gutters.\r
+ /// @param {integer} $columns Columns.\r
+ /// @param {number} $gutters Gutters.\r
+ @mixin fixed-grid-gutters($columns, $gutters) {\r
+\r
+ // Apply padding.\r
+ > * {\r
+ $cell-width: 100% / $columns;\r
+\r
+ padding: ($gutters * 0.5);\r
+ width: $cell-width;\r
+ }\r
+\r
+ }\r
+\r
+ /// Sets up fixed-grid gutters (flush).\r
+ /// @param {integer} $columns Columns.\r
+ /// @param {number} $gutters Gutters.\r
+ @mixin fixed-grid-gutters-flush($columns, $gutters) {\r
+\r
+ // Apply padding.\r
+ > * {\r
+ $cell-width: 100% / $columns;\r
+ $cell-width-pad: $gutters / $columns;\r
+\r
+ padding: ($gutters * 0.5);\r
+ width: calc(#{$cell-width} + #{$cell-width-pad});\r
+ }\r
+\r
+ // Clear top/bottom gutters.\r
+ > :nth-child(-n + #{$columns}) {\r
+ padding-top: 0;\r
+ }\r
+\r
+ > :nth-last-child(-n + #{$columns}) {\r
+ padding-bottom: 0;\r
+ }\r
+\r
+ // Clear left/right gutters.\r
+ > :nth-child(#{$columns}n + 1) {\r
+ padding-left: 0;\r
+ }\r
+\r
+ > :nth-child(#{$columns}n) {\r
+ padding-right: 0;\r
+ }\r
+\r
+ // Adjust widths of leftmost and rightmost cells.\r
+ > :nth-child(#{$columns}n + 1),\r
+ > :nth-child(#{$columns}n) {\r
+ $cell-width: 100% / $columns;\r
+ $cell-width-pad: ($gutters / $columns) - ($gutters / 2);\r
+\r
+ width: calc(#{$cell-width} + #{$cell-width-pad});\r
+ }\r
+\r
+ }\r
+\r
+ /// Reset fixed-grid gutters (flush only).\r
+ /// Used to override a previous set of fixed-grid gutter classes.\r
+ /// @param {integer} $columns Columns.\r
+ /// @param {number} $gutters Gutters.\r
+ /// @param {integer} $prev-columns Previous columns.\r
+ @mixin fixed-grid-gutters-flush-reset($columns, $gutters, $prev-columns) {\r
+\r
+ // Apply padding.\r
+ > * {\r
+ $cell-width: 100% / $prev-columns;\r
+ $cell-width-pad: $gutters / $prev-columns;\r
+\r
+ padding: ($gutters * 0.5);\r
+ width: calc(#{$cell-width} + #{$cell-width-pad});\r
+ }\r
+\r
+ // Clear top/bottom gutters.\r
+ > :nth-child(-n + #{$prev-columns}) {\r
+ padding-top: ($gutters * 0.5);\r
+ }\r
+\r
+ > :nth-last-child(-n + #{$prev-columns}) {\r
+ padding-bottom: ($gutters * 0.5);\r
+ }\r
+\r
+ // Clear left/right gutters.\r
+ > :nth-child(#{$prev-columns}n + 1) {\r
+ padding-left: ($gutters * 0.5);\r
+ }\r
+\r
+ > :nth-child(#{$prev-columns}n) {\r
+ padding-right: ($gutters * 0.5);\r
+ }\r
+\r
+ // Adjust widths of leftmost and rightmost cells.\r
+ > :nth-child(#{$prev-columns}n + 1),\r
+ > :nth-child(#{$prev-columns}n) {\r
+ $cell-width: 100% / $columns;\r
+ $cell-width-pad: $gutters / $columns;\r
+\r
+ padding: ($gutters * 0.5);\r
+ width: calc(#{$cell-width} + #{$cell-width-pad});\r
+ }\r
+\r
+ }\r
+\r
+ /// Adds debug styles to current fixed-grid element.\r
+ @mixin fixed-grid-debug() {\r
+\r
+ box-shadow: 0 0 0 1px red;\r
+\r
+ > * {\r
+ box-shadow: inset 0 0 0 1px blue;\r
+ position: relative;\r
+\r
+ > * {\r
+ position: relative;\r
+ box-shadow: inset 0 0 0 1px green;\r
+ }\r
+ }\r
+\r
+ }\r
+\r
+ /// Initializes the current element as a fixed grid.\r
+ /// @param {integer} $columns Columns (optional).\r
+ /// @param {number} $gutters Gutters (optional).\r
+ /// @param {bool} $flush If true, clears padding around the very edge of the grid.\r
+ @mixin fixed-grid($settings: ()) {\r
+\r
+ // Settings.\r
+\r
+ // Debug.\r
+ $debug: false;\r
+\r
+ @if (map-has-key($settings, 'debug')) {\r
+ $debug: map-get($settings, 'debug');\r
+ }\r
+\r
+ // Vertical align.\r
+ $vertical-align: null;\r
+\r
+ @if (map-has-key($settings, 'vertical-align')) {\r
+ $vertical-align: map-get($settings, 'vertical-align');\r
+ }\r
+\r
+ // Horizontal align.\r
+ $horizontal-align: null;\r
+\r
+ @if (map-has-key($settings, 'horizontal-align')) {\r
+ $horizontal-align: map-get($settings, 'horizontal-align');\r
+ }\r
+\r
+ // Columns.\r
+ $columns: null;\r
+\r
+ @if (map-has-key($settings, 'columns')) {\r
+ $columns: map-get($settings, 'columns');\r
+ }\r
+\r
+ // Gutters.\r
+ $gutters: 0;\r
+\r
+ @if (map-has-key($settings, 'gutters')) {\r
+ $gutters: map-get($settings, 'gutters');\r
+ }\r
+\r
+ // Flush.\r
+ $flush: true;\r
+\r
+ @if (map-has-key($settings, 'flush')) {\r
+ $flush: map-get($settings, 'flush');\r
+ }\r
+\r
+ // Initialize base grid.\r
+ @include fixed-grid-base($vertical-align, $horizontal-align);\r
+\r
+ // Debug?\r
+ @if ($debug) {\r
+ @include fixed-grid-debug;\r
+ }\r
+\r
+ // Columns specified?\r
+ @if ($columns != null) {\r
+\r
+ // Initialize columns.\r
+ @include fixed-grid-columns($columns);\r
+\r
+ // Gutters specified?\r
+ @if ($gutters > 0) {\r
+\r
+ // Flush gutters?\r
+ @if ($flush) {\r
+\r
+ // Initialize gutters (flush).\r
+ @include fixed-grid-gutters-flush($columns, $gutters);\r
+\r
+ }\r
+\r
+ // Otherwise ...\r
+ @else {\r
+\r
+ // Initialize gutters.\r
+ @include fixed-grid-gutters($columns, $gutters);\r
+\r
+ }\r
+\r
+ }\r
+\r
+ }\r
+\r
+ }\r
+\r
+ /// Resizes a previously-initialized grid.\r
+ /// @param {integer} $columns Columns.\r
+ /// @param {number} $gutters Gutters (optional).\r
+ /// @param {list} $reset A list of previously-initialized grid columns (only if $flush is true).\r
+ /// @param {bool} $flush If true, clears padding around the very edge of the grid.\r
+ @mixin fixed-grid-resize($settings: ()) {\r
+\r
+ // Settings.\r
+\r
+ // Columns.\r
+ $columns: 1;\r
+\r
+ @if (map-has-key($settings, 'columns')) {\r
+ $columns: map-get($settings, 'columns');\r
+ }\r
+\r
+ // Gutters.\r
+ $gutters: 0;\r
+\r
+ @if (map-has-key($settings, 'gutters')) {\r
+ $gutters: map-get($settings, 'gutters');\r
+ }\r
+\r
+ // Previous columns.\r
+ $prev-columns: false;\r
+\r
+ @if (map-has-key($settings, 'prev-columns')) {\r
+ $prev-columns: map-get($settings, 'prev-columns');\r
+ }\r
+\r
+ // Flush.\r
+ $flush: true;\r
+\r
+ @if (map-has-key($settings, 'flush')) {\r
+ $flush: map-get($settings, 'flush');\r
+ }\r
+\r
+ // Resize columns.\r
+ @include fixed-grid-columns($columns);\r
+\r
+ // Gutters specified?\r
+ @if ($gutters > 0) {\r
+\r
+ // Flush gutters?\r
+ @if ($flush) {\r
+\r
+ // Previous columns specified?\r
+ @if ($prev-columns) {\r
+\r
+ // Convert to list if it isn't one already.\r
+ @if (type-of($prev-columns) != list) {\r
+ $prev-columns: ($prev-columns);\r
+ }\r
+\r
+ // Step through list of previous columns and reset them.\r
+ @each $x in $prev-columns {\r
+ @include fixed-grid-gutters-flush-reset($columns, $gutters, $x);\r
+ }\r
+\r
+ }\r
+\r
+ // Resize gutters (flush).\r
+ @include fixed-grid-gutters-flush($columns, $gutters);\r
+\r
+ }\r
+\r
+ // Otherwise ...\r
+ @else {\r
+\r
+ // Resize gutters.\r
+ @include fixed-grid-gutters($columns, $gutters);\r
+\r
+ }\r
+\r
+ }\r
+\r
+ }
\ No newline at end of file
projects / editorial.git / blobdiff