nk_jtb 0.2.0 → 0.4.0

package/scss/mixins/_makeMagicGrid2Cols.scss

@@ -0,0 +1,70 @@
+@use "../base/vars_utility_maps" as *;
+@use "../mixins/media" as *;
+@use "sass:list";
+
+// mobile = 100
+// small = 100
+// medium = 50
+// large = 30
+
+// only need to add 1st column percentage, 2nd is calculated
+// (25, 25) is shorthand for {25:75}_{25:75}_{100}
+
+// The more sizes you add will cover more breakpoints.
+
+// There is no need to specify a size for the smallest breakpoint as it will be automatically set to 100 percent in the make function.
+
+// For example, if there are 2 sizes in the list there will be 3 breakpoints lg, md, and sm.
+
+// In this example, only the first column width has been set as the second column width will be calculate and included automatically.
+
+// Grid will display in rows by default, size are min-size so you do not need to worry about adding the smallest size as it will be 100% by default
+
+
+@mixin makeMagicGrid2Cols($listOfLists) {
+    // must have at least two list
+    @each $list in $listOfLists {
+        // exclude empty list when creating single list
+        @if ($list != ()) {
+            $numBreakPoints: list.length($list);
+
+            $smValue: nth($list, -1);
+            $mdValue: nth($list, -2);
+            $lgValue: if($numBreakPoints >= 3, nth($list, -3), null);
+            $xlValue: if($numBreakPoints >= 4, nth($list, -4), null);
+            $xxlValue: if($numBreakPoints >= 5, nth($list, -5), null);
+
+            $class: #{$mdValue}_#{$smValue};
+
+            @if ($numBreakPoints == 3) {
+                $class: #{$lgValue}_#{$mdValue}_#{$smValue};
+            } @else if ($numBreakPoints == 4) {
+                $class: #{$xlValue}_#{$lgValue}_#{$mdValue}_#{$smValue};
+            } @else if ($numBreakPoints == 5) {
+                $class: #{$xxlValue}_#{$xlValue}_#{$lgValue}_#{$mdValue}_#{$smValue};
+            }
+
+            .cols-#{$class} {
+                @include from-sm {
+                    grid-template-columns: nth(map-get($fr-map-2-col, $smValue), 1) nth(map-get($fr-map-2-col, $smValue), 2);
+                }
+
+                @include from-md {
+                    grid-template-columns: nth(map-get($fr-map-2-col, $mdValue), 1) nth(map-get($fr-map-2-col, $mdValue), 2);
+                }
+
+                @if ($numBreakPoints >= 3) {
+                    @include from-lg {
+                        grid-template-columns: nth(map-get($fr-map-2-col, $lgValue), 1) nth(map-get($fr-map-2-col, $lgValue), 2);
+                    }
+                }
+
+                @if ($numBreakPoints >= 4) {
+                    @include from-xl {
+                        grid-template-columns: nth(map-get($fr-map-2-col, $xlValue), 1) nth(map-get($fr-map-2-col, $xlValue), 2);
+                    }
+                }
+            }
+        }
+    }
+}

package/scss/mixins/_makeMagicGridFixedWidth.scss

@@ -0,0 +1,55 @@
+@use "../base/vars_utility_maps" as *;
+@use "../mixins/media" as *;
+@use "sass:list";
+
+
+@mixin makeMagicGridFixedWidth($listOfLists) {
+    // must have at least two list
+    @each $list in $listOfLists {
+        // exclude empty list when creating single list
+        @if ($list != ()) {
+            $numBreakPoints: list.length($list);
+
+            $smValue: nth($list, -1);
+            $mdValue: nth($list, -2);
+            $lgValue: if($numBreakPoints >= 3, nth($list, -3), null);
+            $xlValue: if($numBreakPoints >= 4, nth($list, -4), null);
+            $xxlValue: if($numBreakPoints >= 5, nth($list, -5), null);
+
+            $derived-class: #{$mdValue}-#{$smValue};
+
+            @if ($numBreakPoints == 3) {
+                $derived-class: #{$lgValue}-#{$mdValue}-#{$smValue};
+            } @else if ($numBreakPoints == 4) {
+                $derived-class: #{$xlValue}-#{$lgValue}-#{$mdValue}-#{$smValue};
+            } @else if ($numBreakPoints == 5) {
+                $derived-class: #{$xxlValue}-#{$xlValue}-#{$lgValue}-#{$mdValue}-#{$smValue};
+            }
+
+            .cols-#{$derived-class} {
+                // @include from-sm {
+                //     grid-template-columns: repeat(nth($list, -1), 1fr);
+                // }
+
+                // I am not convinced that I need the small size!!
+                grid-template-columns: repeat(nth($list, -1), 1fr);
+
+                @include from-md {
+                    grid-template-columns: repeat(nth($list, -2), 1fr);
+                }
+
+                @if ($numBreakPoints >= 3) {
+                    @include from-lg {
+                        grid-template-columns: repeat(nth($list, -3), 1fr);
+                    }
+                }
+
+                @if ($numBreakPoints >= 4) {
+                    @include from-xl {
+                        grid-template-columns: repeat(nth($list, -4), 1fr);
+                    }
+                }
+            }
+        }
+    }
+}

package/scss/mixins/_makeResponsiveClasses.scss

@@ -0,0 +1,91 @@
+@use "./media" as *;
+
+// At first glance it seems really dumb to create mixins full of if-else
+// statements and that is because it is! SCSS will not allow interpolation for
+// @include so there is no other way.
+
+// ---------------- BEFORE YOU DO ANYTHING CRAZY ----------------
+// must be marked !important to ensure override default property
+// ---------------- BEFORE YOU DO ANYTHING CRAZY ----------------
+
+@mixin makeFromDevice($prefix, $property, $value, $args...) {
+    @each $device in $args {
+        .#{$prefix}#{$device} {
+            @if ($device == "sm") {
+                @include from-sm {
+                    #{$property}: $value !important;
+                }
+            } @else if($device == "md") {
+                @include from-md {
+                    #{$property}: $value !important;
+                }
+            } @else if($device == "lg") {
+                @include from-lg {
+                    #{$property}: $value !important;
+                }
+            } @else if($device == "xl") {
+                @include from-xl {
+                    #{$property}: $value !important;
+                }
+            } @else if($device == "xxl") {
+                @include from-xxl {
+                    #{$property}: $value !important;
+                }
+            }
+        }
+    }
+}
+
+@mixin makeToDevice($prefix, $property, $value, $args...) {
+    @each $device in $args {
+        .#{$prefix}#{$device} {
+            @if ($device == "sm") {
+                @include to-sm {
+                    #{$property}: $value !important;
+                }
+            } @else if($device == "md") {
+                @include to-md {
+                    #{$property}: $value !important;
+                }
+            } @else if($device == "lg") {
+                @include to-lg {
+                    #{$property}: $value !important;
+                }
+            } @else if($device == "xl") {
+                @include to-xl {
+                    #{$property}: $value !important;
+                }
+            } @else {
+                @error 'The device '#{$device}' is not available for this mixin, you need to remove it from the args list.';
+            }
+        }
+    }
+}
+
+@mixin makeOnDevice($prefix, $property, $value, $args...) {
+    @each $device in $args {
+        .#{$prefix}#{$device} {
+            @if ($device == "sm") {
+                @include on-sm {
+                    #{$property}: $value !important;
+                }
+            } @else if($device == "md") {
+                @include on-md {
+                    #{$property}: $value !important;
+                }
+            } @else if($device == "lg") {
+                @include on-lg {
+                    #{$property}: $value !important;
+                }
+            } @else if($device == "xl") {
+                @include on-xl {
+                    #{$property}: $value !important;
+                }
+            } @else if($device == "xxl") {
+                @include on-xxl {
+                    #{$property}: $value !important;
+                }
+            }
+        }
+    }
+}

package/scss/mixins/_makeResponsivePositionUtilities.scss

@@ -40,16 +40,16 @@
             .#{$class} {
                 @include makeCssPositionProperty($property, #{nth($sizes-list, -1)}rem, $positions);
 
-                @include from-tablet {
+                @include from-md {
                     @include makeCssPositionProperty($property, #{nth($sizes-list, -2)}rem, $positions);
                 }
 
-                @include from-desktop {
+                @include from-xl {
                     @include makeCssPositionProperty($property, #{nth($sizes-list, -3)}rem, $positions);
                 }
 
                 @if ($numSizes==4) {
-                    @include from-widescreen {
+                    @include from-xxl {
                         @include makeCssPositionProperty($property, #{nth($sizes-list, -4)}rem, $positions);
                     }
                 }

package/scss/mixins/_media.scss

@@ -1,32 +1,32 @@
-@use '../base/vars_base' as *;
+@use "../base/vars_base" as *;
 
-// |-- device-only --|
+// |-- on-device --|
 // --------------------------------------------------------------------------
-@mixin mobile-only {
-    @media (max-width: $tablet - 1px) {
+@mixin on-sm {
+    @media (min-width: $small) and (max-width: $tablet - 1px) {
         @content;
     }
 }
 
-@mixin tablet-only {
+@mixin on-md {
     @media (min-width: $tablet) and (max-width: $laptop - 1px) {
         @content;
     }
 }
 
-@mixin laptop-only {
+@mixin on-lg {
     @media (min-width: $laptop) and (max-width: $desktop - 1px) {
         @content;
     }
 }
 
-@mixin desktop-only {
-    @media (min-width: $desktop) and (max-width: $desktop - 1px) {
+@mixin on-xl {
+    @media (min-width: $desktop) and (max-width: $widescreen - 1px) {
         @content;
     }
 }
 
-@mixin widescreen-only {
+@mixin on-xxl {
     @media (min-width: $widescreen) {
         @content;
     }
@@ -35,64 +35,60 @@
 // |-- from-device (device and larger) --|
 // --------------------------------------------------------------------------
 
-@mixin from-mobile-landscape {
-    @media (min-width: $mobile-landscape) {
+@mixin from-sm {
+    @media (min-width: $small) {
         @content;
     }
 }
-@mixin from-tablet {
+
+@mixin from-md {
     @media (min-width: $tablet) {
         @content;
     }
 }
 
-@mixin from-laptop {
+@mixin from-lg {
     @media (min-width: $laptop) {
         @content;
     }
 }
 
-@mixin from-desktop {
+@mixin from-xl {
     @media (min-width: $desktop) {
         @content;
     }
 }
 
-@mixin from-widescreen {
+@mixin from-xxl {
     @media (min-width: $widescreen) {
         @content;
     }
 }
 
-// |-- up-to-device (up-to but not including) --|
+// |-- to-device (up-to but not including) --|
 // --------------------------------------------------------------------------
-@mixin up-to-mobile-landscape {
-    @media (max-width: $mobile-landscape - 1px) {
+@mixin to-sm {
+    @media (max-width: $small - 1px) {
         @content;
     }
 }
 
-@mixin up-to-tablet {
+@mixin to-md {
     @media (max-width: $tablet - 1px) {
         @content;
     }
 }
 
-@mixin up-to-laptop {
+@mixin to-lg {
     @media (max-width: $laptop - 1px) {
         @content;
     }
 }
 
-@mixin up-to-desktop {
+@mixin to-xl {
     @media (max-width: $desktop - 1px) {
         @content;
     }
 }
 
-@mixin up-to-widescreen {
-    @media (max-width: $widescreen - 1px) {
-        @content;
-    }
-}
-
+// widescreen is pointless here!

package/scss/mixins/_positionUtilityClasses.scss

@@ -43,9 +43,12 @@
                 }
 
                 .#{$base-class}#{$position-key}#{$size-key} {
-                    // use shorthand for 'xy'
+                    // do not use shorthand to allow for easier override
                     @if ($axis-or-position == "xy") {
-                        #{$property}: #{$value};
+                        #{$property}-top: #{$value};
+                        #{$property}-bottom: #{$value};
+                        #{$property}-left: #{$value};
+                        #{$property}-right: #{$value};
                     } @else {
                         @include makeCssPositionProperty($property, #{$value}, $positions);
                     }

package/scss/play.scss

@@ -0,0 +1,30 @@
+@use "./base/vars_all" as *;
+@use "./base/vars_base" as *;
+@use "./base/vars_utility_maps" as *;
+@use "./functions/helpers" as *;
+@use "./mixins/makeCssPropertyMixins" as *;
+@use "./mixins/makeMagicClass" as *;
+@use "./mixins/makeMagicGrid2Cols" as *;
+@use "./mixins/media" as *;
+@use "./mixins/positionUtilityClasses" as *;
+@use "sass:list";
+@use "sass:map";
+@use "sass:string";
+
+$magic-width-sizes: ((16, "full"), (24, "full")) !default;
+@include makeMagicClass("width", "w", ($magic-width-sizes));
+
+// $magic-grid-sizes-2cols: ((25, 25), (25, 25));
+// @include makeMagicGrid2Cols($magic-grid-sizes-2cols);
+
+// (sfw) single fixed width
+@media (min-width: 576px) {
+    .cols-sfw-25_25 {
+        grid-template-columns: 1fr 14rem;
+    }
+}
+@media (min-width: 768px) {
+    .cols-sfw-25_25 {
+        grid-template-columns: 1fr 20rem;
+    }
+}

package/scss/utilities/_border.scss

@@ -1,36 +1,25 @@
 @use "../base/vars_all" as *;
 @use "../mixins/positionUtilityClasses" as *;
 
-// Add border radius to map???
 $border-utilities-map: (
     "border": (
         "base-class": "bdr",
         "values-map": (
             "default": $border,
+            "0": none !important,
         ),
         "axis-position-map": $axis-position-map,
     ),
 );
 
 $border-widths-map: (
-    1: 1px,
+    0: 0px,
+    2: 2px,
     3: 3px,
     5: 5px,
-    10: 10px,
-) !default;
-
-$border-colors-map: (
-    "orange": var(--orange),
-    "red": map-get($color-map, "red"),
-    "green": var(--green),
-    "blue": var(--blue),
-    "primary": $primary,
-    "secondary": var(--secondary),
-    "success": var(--success),
-    "danger": var(--danger),
-    "info": var(--info),
 ) !default;
 
+$border-colors-map: ($color-map) !default;
 
 // --------------------------------------------------------------------------
 // -- POSITION BASED BORDERS --
@@ -38,13 +27,13 @@ $border-colors-map: (
 
 @include positionUtilityClasses($border-utilities-map);
 
-
 // --------------------------------------------------------------------------
 // -- BORDER COLORS --
 // --------------------------------------------------------------------------
+
 @each $key, $value in $border-colors-map {
     .bdr-#{$key} {
-        border: 1px solid $value;
+        border-color: $value;
     }
 }
 
@@ -54,58 +43,81 @@ $border-colors-map: (
 // make sure overrides come after base class
 
 @each $key, $value in $border-widths-map {
-    .bdr#{$key} {
+    .bdr-#{$key} {
         border-width: $value;
     }
 }
 
+// --------------------------------------------------------------------------
+// -- BORDER RADIUS --
+// --------------------------------------------------------------------------
+.bdrr {
+    border: $border;
+    border-radius: $border-radius;
+    &-t {
+        border-top-left-radius: $border-radius;
+        border-top-right-radius: $border-radius;
+    }
+    &-b {
+        border-bottom-left-radius: $border-radius;
+        border-bottom-right-radius: $border-radius;
+    }
+    &-l {
+        border-top-left-radius: $border-radius;
+        border-bottom-left-radius: $border-radius;
+    }
+    &-r {
+        border-top-right-radius: $border-radius;
+        border-bottom-right-radius: $border-radius;
+    }
+}
 
+// --------------------------------------------------------------------------
+// -- REMOVE BORDER --
+// --------------------------------------------------------------------------
 
-.nbdr {
-    border: none !important;
+.bdrr {
+    &-0 {
+        border-radius: 0;
+    }
+    &-t-0 {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+    }
+    &-b-0 {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+    &-l-0 {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+    &-r-0 {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
 }
 
-// // // border radius
-// // // --------------------------------------------------------------------------
-// // .bdrr {
-// //     border: $border;
-// //     border-radius: $border-radius;
-// //     // positions
-// //     &-t {
-// //         border-top-left-radius: $border-radius;
-// //         border-top-right-radius: $border-radius;
-// //     }
-// //     &-b {
-// //         border-bottom-left-radius: $border-radius;
-// //         border-bottom-right-radius: $border-radius;
-// //     }
-// //     &-l {
-// //         border-top-left-radius: $border-radius;
-// //         border-bottom-left-radius: $border-radius;
-// //     }
-// //     &-r {
-// //         border-top-right-radius: $border-radius;
-// //         border-bottom-right-radius: $border-radius;
-// //     }
-// // }
-
-// // // remove border radius
-// // .nbr {
-// //     border-radius: 0;
-// //     &-t {
-// //         border-top-left-radius: 0;
-// //         border-top-right-radius: 0;
-// //     }
-// //     &-b {
-// //         border-bottom-left-radius: 0;
-// //         border-bottom-right-radius: 0;
-// //     }
-// //     &-l {
-// //         border-top-left-radius: 0;
-// //         border-bottom-left-radius: 0;
-// //     }
-// //     &-r {
-// //         border-top-right-radius: 0;
-// //         border-bottom-right-radius: 0;
-// //     }
-// // }
+.rounded {
+    &-none {
+        border-radius: 0px;
+    }
+    &-0125 {
+        border-radius: 0.125rem;
+    }
+    &-025 {
+        border-radius: 0.25rem;
+    }
+    &-0375 {
+        border-radius: 0.375rem;
+    }
+    &-05 {
+        border-radius: 0.5rem;
+    }
+    &-075 {
+        border-radius: 0.75rem;
+    }
+    &-1 {
+        border-radius: 1rem;
+    }
+}

package/scss/utilities/_display_visibility.scss

@@ -0,0 +1,66 @@
+@use "../base/vars_base" as *;
+@use "../mixins/media" as *;
+@use "../mixins/makeResponsiveClasses" as *;
+
+$visibility-utilities: (
+    "display": (
+        "property": "display",
+        "prefix": "",
+        "values": (
+            block: block,
+            inline: inline,
+            inline-block: inline-block,
+            flex: flex,
+            inline-flex: inline-flex,
+            hidden: none,
+        ),
+    ),
+    "visibility": (
+        "property": "visibility",
+        "prefix": "",
+        "values": (
+            visible: visible,
+            invisible: hidden,
+        ),
+    ),
+);
+
+@each $property, $map in $visibility-utilities {
+    $property: map-get($map, "property");
+    $utility-prefix: map-get($map, "prefix");
+    $values: map-get($map, "values");
+
+    @each $key, $v in $values {
+        .#{$utility-prefix}#{$key} {
+            #{$property}: $v;
+        }
+    }
+}
+
+// |--\0/-- device-only --\0/--|
+// --------------------------------------------------------------------------
+.sr-only {
+    opacity: 0;
+    position: absolute;
+    left: -9000px;
+    top: -9000px;
+}
+
+// |--\0/-- DISPLAY --\0/--|
+// --------------------------------------------------------------------------
+[class*="block-to"],
+[class*="block-from"],
+[class*="block-on"] {
+    display: none;
+}
+
+@include makeFromDevice("block-from-", display, block, "sm", "md", "lg", "xl", "xxl");
+@include makeOnDevice("block-on-", display, block, "sm", "md", "lg", "xl", "xxl");
+@include makeToDevice("block-to-", display, block, "sm", "md", "lg", "xl");
+
+// |--\0/-- HIDE --\0/--|
+// --------------------------------------------------------------------------
+
+@include makeFromDevice("hide-from-", display, none, "sm", "md", "lg", "xl", "xxl");
+@include makeOnDevice("hide-on-", display, none, "sm", "md", "lg", "xl", "xxl");
+@include makeToDevice("hide-to-", display, none, "sm", "md", "lg", "xl");