diff options
Diffstat (limited to 'static/assets/sass/libs/_fixed-grid.scss')
| -rw-r--r-- | static/assets/sass/libs/_fixed-grid.scss | 338 |
1 files changed, 338 insertions, 0 deletions
diff --git a/static/assets/sass/libs/_fixed-grid.scss b/static/assets/sass/libs/_fixed-grid.scss new file mode 100644 index 0000000..99bfe36 --- /dev/null +++ b/static/assets/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 |