_sass/vendor/susy/susy/language/susyone/_grid.scss in minimal-mistakes-jekyll-4.1.1 vs _sass/vendor/susy/susy/language/susyone/_grid.scss in minimal-mistakes-jekyll-4.2.0
- old
+ new
@@ -1,312 +1,312 @@
-// ---------------------------------------------------------------------------
-// Imports
-
-@import "compass/utilities/general/clearfix";
-@import "compass/css3/box-sizing";
-
-// ---------------------------------------------------------------------------
-// Border-Box Sizing
-
-// Apply the border-box sizing model to all elements
-// and adjust the grid math appropriately.
-@mixin border-box-sizing {
- $border-box-sizing: true !global;
- * { @include box-sizing(border-box); }
-}
-
-// ---------------------------------------------------------------------------
-// Container
-
-// Set the width of a container
-//
-// $columns : The number of columns in the Grid Layout.
-@mixin set-container-width(
- $columns : $total-columns,
- $style : $container-style,
- $px-vals : $pixel-values-only
-){
- $width: container-outer-width($columns);
-
- @if $style == 'static' {
- @if $px-vals == true {
- width: round(convert-length($width, px));
- } @else {
- @include rem(width, $width);
- }
- } @else {
- @if $style == 'fluid' {
- @if unit($width) == '%' {
- @if $px-vals == true {
- width: round(convert-length($width, px));
- } @else {
- @include rem(width, $width);
- }
- }
- } @else {
- @if $px-vals == true {
- max-width: round(convert-length($width, px));
- } @else {
- @include rem(max-width, $width);
- }
-
- @include for-legacy-browser(ie,"6") {
- @if unit($width) == 'rem' {
- _width: round(convert-length($width, px));
- } @else {
- _width: $width;
- }
- }
- }
- }
-}
-
-// Set the outer grid-containing element(s).
-//
-// $columns : The number of columns in the container.
-@mixin apply-container(
- $columns : $total-columns,
- $px-vals : $pixel-values-only
-){
- @include pie-clearfix;
- @include set-container-width($columns);
- @if $px-vals == true {
- padding-left: round(convert-length($grid-padding, px));
- padding-right: round(convert-length($grid-padding, px));
- } @else {
- @include rem(padding-left, $grid-padding);
- @include rem(padding-right, $grid-padding);
- }
- margin: { left: auto; right: auto; }
-}
-
-// Set one or more layouts on a grid-containing element at any number of media-query breakpoints.
-//
-// $media-layout-1 : [default:$total-columns] A list of values including -
-// : One unitless number (representing columns in a layout)
-// : Two optional lengths (representing min and max-width media-query breakpoints).
-// $media-layout-2 ...-10 : [optional] Same as $media-layout-1
-@mixin container(
- $media-layouts...
-){
- $media-layouts: if(length($media-layouts) > 0, $media-layouts, $total-columns);
-
- @each $ml in $media-layouts {
- @if is-default-layout($ml) {
- @include apply-container;
- } @else {
- @include at-breakpoint($ml) {
- @include apply-container;
- }
- }
- }
-}
-
-// ---------------------------------------------------------------------------
-// Columns
-
-// Create a grid element spanning any number of 'columns' in a grid 'context'.
-// $columns : The number of columns to span.
-// $context : [optional] The context (columns spanned by parent).
-// : Context is required on any nested elements.
-// : Context MUST NOT be declared on a root element.
-// $padding : [optional] Padding applied to the inside of individual grid columns.
-// : Padding is only output if one or two values are specified (e.g. 1em or 10px 20px)
-// : Padding values are applied only on the horizontal axis in from-to order
-// $from : The start direction of your layout (e.g. 'left' for ltr languages)
-// $style : The container style to use.
-@mixin span-columns(
- $columns,
- $context : $total-columns,
- $padding : false,
- $from : $from-direction,
- $style : fix-static-misalignment()
-) {
- $from : unquote($from);
- $to : opposite-position($from);
- $pos : split-columns-value($columns,position);
- $cols : split-columns-value($columns,columns);
- $pad-from : if($style == static, 0 * $gutter-width, relative-width(0 * $gutter-width, $context));
- $pad-to : if($style == static, 0 * $gutter-width, relative-width(0 * $gutter-width, $context));
-
- @if $padding != false {
- $pad-from : nth($padding, 1);
-
- @if length($padding) > 1 {
- $pad-to: nth($padding, 2);
- } @else {
- $pad-to: $pad-from;
- }
-
- $pad-from : if($style == static, $pad-from, relative-width($pad-from, $context));
- $pad-to : if($style == static, $pad-to, relative-width($pad-to, $context));
-
- padding-#{$from}: $pad-from;
- padding-#{$to}: $pad-to;
- }
-
- width: columns($cols, $context, $style) - if($border-box-sizing, 0, $pad-to + $pad-from);
-
- @if ($pos == 'omega') {
- @include omega($from);
- } @else {
- float: $from;
- margin-#{$to}: gutter($context, $style);
- @include for-legacy-browser(ie, "6") {
- display: inline;
- }
- }
-}
-
-// Apply to elements spanning the last column, to account for the page edge.
-// Only needed as an override. Normally 'omega' can just be called by `columns`.
-//
-// $from : The start-direction for your document.
-@mixin omega(
- $from : $from-direction
-) {
- $from : unquote($from);
- $to : opposite-position($from);
- $hack : opposite-position($omega-float);
-
- float: $omega-float;
- margin-#{$to}: 0;
-
- @include for-legacy-browser(ie, "6", "7") {
- *margin-#{$hack}: - $gutter-width;
- @include for-legacy-browser(ie, "6") {
- display: inline;
- }
- }
-}
-
-// Shortcut to apply omega to a specific subset of elements.
-//
-// $n : [first | only | last | <equation>]
-// $selector : [child | last-child | of-type | last-of-type ]
-// $from : The start-direction for your document.
-@mixin nth-omega(
- $n : last,
- $selector : child,
- $from : $from-direction
-) {
- $from : unquote($from);
-
- &:#{format-nth($n,$selector)} {
- @if $n == "first" {
- @include omega($from);
- } @else {
- @include with-browser-ranges(css-sel3) {
- @include omega($from);
- }
- }
- }
-}
-
-
-
-// ---------------------------------------------------------------------------
-// Resets
-
-// Reset a '+columns' grid element to default block behavior
-//
-// $from : The start direction of your layout (e.g. 'left' for ltr languages)
-@mixin reset-columns(
- $from: $from-direction
-) {
- $from : unquote($from);
- $to : opposite-position($from);
- $hack : opposite-position($omega-float);
-
- float: none;
- width: auto;
- margin-#{$to}: auto;
-
- @include for-legacy-browser(ie, "6", "7") {
- *margin-#{$hack}: auto;
- @include for-legacy-browser(ie, "6") {
- display: block;
- }
- }
-}
-
-// Apply to elements previously set as omega.
-// This will return floats and margins back to non-omega settigns.
-//
-// $context : [optional] The context (columns spanned by parent).
-// $from : The start-direction for your document.
-// $style : The container style to use.
-@mixin remove-omega(
- $context : $total-columns,
- $from : $from-direction,
- $style : fix-static-misalignment()
-) {
- $from : unquote($from);
- $to : opposite-position($from);
- $hack : opposite-position($omega-float);
-
- float: $from;
- margin-#{$to}: gutter($context, $style);
-
- @include for-legacy-browser(ie, "6", "7") {
- *margin-#{$hack}: auto;
- }
-}
-
-// Shortcut to apply remove-omega to a specific subset of elements.
-//
-// $n : [first | only | last | <equation>]
-// $selector : [child | last-child | of-type | last-of-type ]
-// $context : [optional] The context (columns spanned by parent).
-// $from : The start-direction for your document.
-// $style : The container style to use.
-@mixin remove-nth-omega(
- $n : last,
- $selector : child,
- $context : $total-columns,
- $from : $from-direction,
- $style : fix-static-misalignment()
-) {
- $from : unquote($from);
-
- &:#{format-nth($n,$selector)} {
- @if $n == "first" {
- @include remove-omega($context, $from, $style);
- } @else {
- @include with-browser-ranges(css-sel3) {
- @include remove-omega($context, $from, $style);
- }
- }
- }
-}
-
-
-// ---------------------------------------------------------------------------
-// Change Settings
-
-@mixin with-grid-settings(
- $columns: $total-columns,
- $width: $column-width,
- $gutter: $gutter-width,
- $padding: $grid-padding
-) {
- // keep the defaults around
- $default-columns: $total-columns;
- $default-width: $column-width;
- $default-gutter: $gutter-width;
- $default-padding: $grid-padding;
-
- // use the new settings
- $total-columns: $columns !global;
- $column-width: $width !global;
- $gutter-width: $gutter !global;
- $grid-padding: $padding !global;
-
- // apply to contents
- @content;
-
- // re-instate the defaults
- $total-columns: $default-columns !global;
- $column-width: $default-width !global;
- $gutter-width: $default-gutter !global;
- $grid-padding: $default-padding !global;
-}
+// ---------------------------------------------------------------------------
+// Imports
+
+@import "compass/utilities/general/clearfix";
+@import "compass/css3/box-sizing";
+
+// ---------------------------------------------------------------------------
+// Border-Box Sizing
+
+// Apply the border-box sizing model to all elements
+// and adjust the grid math appropriately.
+@mixin border-box-sizing {
+ $border-box-sizing: true !global;
+ * { @include box-sizing(border-box); }
+}
+
+// ---------------------------------------------------------------------------
+// Container
+
+// Set the width of a container
+//
+// $columns : The number of columns in the Grid Layout.
+@mixin set-container-width(
+ $columns : $total-columns,
+ $style : $container-style,
+ $px-vals : $pixel-values-only
+){
+ $width: container-outer-width($columns);
+
+ @if $style == 'static' {
+ @if $px-vals == true {
+ width: round(convert-length($width, px));
+ } @else {
+ @include rem(width, $width);
+ }
+ } @else {
+ @if $style == 'fluid' {
+ @if unit($width) == '%' {
+ @if $px-vals == true {
+ width: round(convert-length($width, px));
+ } @else {
+ @include rem(width, $width);
+ }
+ }
+ } @else {
+ @if $px-vals == true {
+ max-width: round(convert-length($width, px));
+ } @else {
+ @include rem(max-width, $width);
+ }
+
+ @include for-legacy-browser(ie,"6") {
+ @if unit($width) == 'rem' {
+ _width: round(convert-length($width, px));
+ } @else {
+ _width: $width;
+ }
+ }
+ }
+ }
+}
+
+// Set the outer grid-containing element(s).
+//
+// $columns : The number of columns in the container.
+@mixin apply-container(
+ $columns : $total-columns,
+ $px-vals : $pixel-values-only
+){
+ @include pie-clearfix;
+ @include set-container-width($columns);
+ @if $px-vals == true {
+ padding-left: round(convert-length($grid-padding, px));
+ padding-right: round(convert-length($grid-padding, px));
+ } @else {
+ @include rem(padding-left, $grid-padding);
+ @include rem(padding-right, $grid-padding);
+ }
+ margin: { left: auto; right: auto; }
+}
+
+// Set one or more layouts on a grid-containing element at any number of media-query breakpoints.
+//
+// $media-layout-1 : [default:$total-columns] A list of values including -
+// : One unitless number (representing columns in a layout)
+// : Two optional lengths (representing min and max-width media-query breakpoints).
+// $media-layout-2 ...-10 : [optional] Same as $media-layout-1
+@mixin container(
+ $media-layouts...
+){
+ $media-layouts: if(length($media-layouts) > 0, $media-layouts, $total-columns);
+
+ @each $ml in $media-layouts {
+ @if is-default-layout($ml) {
+ @include apply-container;
+ } @else {
+ @include at-breakpoint($ml) {
+ @include apply-container;
+ }
+ }
+ }
+}
+
+// ---------------------------------------------------------------------------
+// Columns
+
+// Create a grid element spanning any number of 'columns' in a grid 'context'.
+// $columns : The number of columns to span.
+// $context : [optional] The context (columns spanned by parent).
+// : Context is required on any nested elements.
+// : Context MUST NOT be declared on a root element.
+// $padding : [optional] Padding applied to the inside of individual grid columns.
+// : Padding is only output if one or two values are specified (e.g. 1em or 10px 20px)
+// : Padding values are applied only on the horizontal axis in from-to order
+// $from : The start direction of your layout (e.g. 'left' for ltr languages)
+// $style : The container style to use.
+@mixin span-columns(
+ $columns,
+ $context : $total-columns,
+ $padding : false,
+ $from : $from-direction,
+ $style : fix-static-misalignment()
+) {
+ $from : unquote($from);
+ $to : opposite-position($from);
+ $pos : split-columns-value($columns,position);
+ $cols : split-columns-value($columns,columns);
+ $pad-from : if($style == static, 0 * $gutter-width, relative-width(0 * $gutter-width, $context));
+ $pad-to : if($style == static, 0 * $gutter-width, relative-width(0 * $gutter-width, $context));
+
+ @if $padding != false {
+ $pad-from : nth($padding, 1);
+
+ @if length($padding) > 1 {
+ $pad-to: nth($padding, 2);
+ } @else {
+ $pad-to: $pad-from;
+ }
+
+ $pad-from : if($style == static, $pad-from, relative-width($pad-from, $context));
+ $pad-to : if($style == static, $pad-to, relative-width($pad-to, $context));
+
+ padding-#{$from}: $pad-from;
+ padding-#{$to}: $pad-to;
+ }
+
+ width: columns($cols, $context, $style) - if($border-box-sizing, 0, $pad-to + $pad-from);
+
+ @if ($pos == 'omega') {
+ @include omega($from);
+ } @else {
+ float: $from;
+ margin-#{$to}: gutter($context, $style);
+ @include for-legacy-browser(ie, "6") {
+ display: inline;
+ }
+ }
+}
+
+// Apply to elements spanning the last column, to account for the page edge.
+// Only needed as an override. Normally 'omega' can just be called by `columns`.
+//
+// $from : The start-direction for your document.
+@mixin omega(
+ $from : $from-direction
+) {
+ $from : unquote($from);
+ $to : opposite-position($from);
+ $hack : opposite-position($omega-float);
+
+ float: $omega-float;
+ margin-#{$to}: 0;
+
+ @include for-legacy-browser(ie, "6", "7") {
+ *margin-#{$hack}: - $gutter-width;
+ @include for-legacy-browser(ie, "6") {
+ display: inline;
+ }
+ }
+}
+
+// Shortcut to apply omega to a specific subset of elements.
+//
+// $n : [first | only | last | <equation>]
+// $selector : [child | last-child | of-type | last-of-type ]
+// $from : The start-direction for your document.
+@mixin nth-omega(
+ $n : last,
+ $selector : child,
+ $from : $from-direction
+) {
+ $from : unquote($from);
+
+ &:#{format-nth($n,$selector)} {
+ @if $n == "first" {
+ @include omega($from);
+ } @else {
+ @include with-browser-ranges(css-sel3) {
+ @include omega($from);
+ }
+ }
+ }
+}
+
+
+
+// ---------------------------------------------------------------------------
+// Resets
+
+// Reset a '+columns' grid element to default block behavior
+//
+// $from : The start direction of your layout (e.g. 'left' for ltr languages)
+@mixin reset-columns(
+ $from: $from-direction
+) {
+ $from : unquote($from);
+ $to : opposite-position($from);
+ $hack : opposite-position($omega-float);
+
+ float: none;
+ width: auto;
+ margin-#{$to}: auto;
+
+ @include for-legacy-browser(ie, "6", "7") {
+ *margin-#{$hack}: auto;
+ @include for-legacy-browser(ie, "6") {
+ display: block;
+ }
+ }
+}
+
+// Apply to elements previously set as omega.
+// This will return floats and margins back to non-omega settigns.
+//
+// $context : [optional] The context (columns spanned by parent).
+// $from : The start-direction for your document.
+// $style : The container style to use.
+@mixin remove-omega(
+ $context : $total-columns,
+ $from : $from-direction,
+ $style : fix-static-misalignment()
+) {
+ $from : unquote($from);
+ $to : opposite-position($from);
+ $hack : opposite-position($omega-float);
+
+ float: $from;
+ margin-#{$to}: gutter($context, $style);
+
+ @include for-legacy-browser(ie, "6", "7") {
+ *margin-#{$hack}: auto;
+ }
+}
+
+// Shortcut to apply remove-omega to a specific subset of elements.
+//
+// $n : [first | only | last | <equation>]
+// $selector : [child | last-child | of-type | last-of-type ]
+// $context : [optional] The context (columns spanned by parent).
+// $from : The start-direction for your document.
+// $style : The container style to use.
+@mixin remove-nth-omega(
+ $n : last,
+ $selector : child,
+ $context : $total-columns,
+ $from : $from-direction,
+ $style : fix-static-misalignment()
+) {
+ $from : unquote($from);
+
+ &:#{format-nth($n,$selector)} {
+ @if $n == "first" {
+ @include remove-omega($context, $from, $style);
+ } @else {
+ @include with-browser-ranges(css-sel3) {
+ @include remove-omega($context, $from, $style);
+ }
+ }
+ }
+}
+
+
+// ---------------------------------------------------------------------------
+// Change Settings
+
+@mixin with-grid-settings(
+ $columns: $total-columns,
+ $width: $column-width,
+ $gutter: $gutter-width,
+ $padding: $grid-padding
+) {
+ // keep the defaults around
+ $default-columns: $total-columns;
+ $default-width: $column-width;
+ $default-gutter: $gutter-width;
+ $default-padding: $grid-padding;
+
+ // use the new settings
+ $total-columns: $columns !global;
+ $column-width: $width !global;
+ $gutter-width: $gutter !global;
+ $grid-padding: $padding !global;
+
+ // apply to contents
+ @content;
+
+ // re-instate the defaults
+ $total-columns: $default-columns !global;
+ $column-width: $default-width !global;
+ $gutter-width: $default-gutter !global;
+ $grid-padding: $default-padding !global;
+}