X-Git-Url: https://git.njae.me.uk/?a=blobdiff_plain;f=assets%2Fmain%2Fsass%2Flibs%2F_fixed-grid.scss;fp=assets%2Fmain%2Fsass%2Flibs%2F_fixed-grid.scss;h=99bfe3657d529906b7bd3eeea5f5b0f4b7bdccf2;hb=8af2079e4b096e77ba2f922d6a18224ce01cb7bd;hp=0000000000000000000000000000000000000000;hpb=d047bc8b5126c4af647c4e508022ca94452fc856;p=editorial.git

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