summaryrefslogtreecommitdiff
path: root/_sass/neat/functions
diff options
context:
space:
mode:
authorHombreLaser <sebastian-440@live.com>2024-02-08 16:36:31 -0600
committerHombreLaser <sebastian-440@live.com>2024-02-08 16:36:31 -0600
commite182245d3205d929881f51da9b48d6c4ed97a682 (patch)
treed390e8754dec70a9c9293afb801321b96f043c15 /_sass/neat/functions
Commit inicialHEADmaster
Diffstat (limited to '_sass/neat/functions')
-rw-r--r--_sass/neat/functions/_new-breakpoint.scss49
-rw-r--r--_sass/neat/functions/_private.scss114
2 files changed, 163 insertions, 0 deletions
diff --git a/_sass/neat/functions/_new-breakpoint.scss b/_sass/neat/functions/_new-breakpoint.scss
new file mode 100644
index 0000000..41ab955
--- /dev/null
+++ b/_sass/neat/functions/_new-breakpoint.scss
@@ -0,0 +1,49 @@
+@charset "UTF-8";
+
+/// Returns a media context (media query / grid context) that can be stored in a variable and passed to `media()` as a single-keyword argument. Media contexts defined using `new-breakpoint` are used by the visual grid, as long as they are defined before importing Neat.
+///
+/// @param {List} $query
+/// A list of media query features and values. Each `$feature` should have a corresponding `$value`.
+///
+/// If there is only a single `$value` in `$query`, `$default-feature` is going to be used.
+///
+/// The number of total columns in the grid can be set by passing `$columns` at the end of the list (overrides `$total-columns`). For a list of valid values for `$feature`, click [here](http://www.w3.org/TR/css3-mediaqueries/#media1).
+///
+/// @param {Number (unitless)} $total-columns [$grid-columns]
+/// - Number of columns to use in the new grid context. Can be set as a shorthand in the first parameter.
+///
+/// @example scss - Usage
+/// $mobile: new-breakpoint(max-width 480px 4);
+///
+/// .element {
+/// @include media($mobile) {
+/// @include span-columns(4);
+/// }
+/// }
+///
+/// @example css - CSS Output
+/// @media screen and (max-width: 480px) {
+/// .element {
+/// display: block;
+/// float: left;
+/// margin-right: 7.42297%;
+/// width: 100%;
+/// }
+/// .element:last-child {
+/// margin-right: 0;
+/// }
+/// }
+
+@function new-breakpoint($query: $feature $value $columns, $total-columns: $grid-columns) {
+ @if length($query) == 1 {
+ $query: $default-feature nth($query, 1) $total-columns;
+ } @else if is-even(length($query)) {
+ $query: append($query, $total-columns);
+ }
+
+ @if is-not(belongs-to($query, $visual-grid-breakpoints)) {
+ $visual-grid-breakpoints: append($visual-grid-breakpoints, $query, comma) !global;
+ }
+
+ @return $query;
+}
diff --git a/_sass/neat/functions/_private.scss b/_sass/neat/functions/_private.scss
new file mode 100644
index 0000000..872d4dc
--- /dev/null
+++ b/_sass/neat/functions/_private.scss
@@ -0,0 +1,114 @@
+// Not function for Libsass compatibility
+// https://github.com/sass/libsass/issues/368
+@function is-not($value) {
+ @return if($value, false, true);
+}
+
+// Checks if a number is even
+@function is-even($int) {
+ @return $int % 2 == 0;
+}
+
+// Checks if an element belongs to a list or not
+@function belongs-to($tested-item, $list) {
+ @return is-not(not-belongs-to($tested-item, $list));
+}
+
+@function not-belongs-to($tested-item, $list) {
+ @return is-not(index($list, $tested-item));
+}
+
+// Contains display value
+@function contains-display-value($query) {
+ @return belongs-to(table, $query)
+ or belongs-to(block, $query)
+ or belongs-to(inline-block, $query)
+ or belongs-to(inline, $query);
+}
+
+// Parses the first argument of span-columns()
+@function container-span($span: $span) {
+ @if length($span) == 3 {
+ $container-columns: nth($span, 3);
+ @return $container-columns;
+ } @else if length($span) == 2 {
+ $container-columns: nth($span, 2);
+ @return $container-columns;
+ }
+
+ @return $grid-columns;
+}
+
+@function container-shift($shift: $shift) {
+ $parent-columns: $grid-columns !default !global;
+
+ @if length($shift) == 3 {
+ $container-columns: nth($shift, 3);
+ @return $container-columns;
+ } @else if length($shift) == 2 {
+ $container-columns: nth($shift, 2);
+ @return $container-columns;
+ }
+
+ @return $parent-columns;
+}
+
+// Generates a striped background
+@function gradient-stops($grid-columns, $color: $visual-grid-color) {
+ $transparent: transparent;
+
+ $column-width: flex-grid(1, $grid-columns);
+ $gutter-width: flex-gutter($grid-columns);
+ $column-offset: $column-width;
+
+ $values: ($transparent 0, $color 0);
+
+ @for $i from 1 to $grid-columns*2 {
+ @if is-even($i) {
+ $values: append($values, $transparent $column-offset, comma);
+ $values: append($values, $color $column-offset, comma);
+ $column-offset: $column-offset + $column-width;
+ } @else {
+ $values: append($values, $color $column-offset, comma);
+ $values: append($values, $transparent $column-offset, comma);
+ $column-offset: $column-offset + $gutter-width;
+ }
+ }
+
+ @return $values;
+}
+
+// Layout direction
+@function get-direction($layout, $default) {
+ $direction: null;
+
+ @if to-upper-case($layout) == "LTR" or to-upper-case($layout) == "RTL" {
+ $direction: direction-from-layout($layout);
+ } @else {
+ $direction: direction-from-layout($default);
+ }
+
+ @return $direction;
+}
+
+@function direction-from-layout($layout) {
+ $direction: null;
+
+ @if to-upper-case($layout) == "LTR" {
+ $direction: right;
+ } @else {
+ $direction: left;
+ }
+
+ @return $direction;
+}
+
+@function get-opposite-direction($direction) {
+ $opposite-direction: left;
+
+ @if $direction == "left" {
+ $opposite-direction: right;
+ }
+
+ @return $opposite-direction;
+}