nk_jtb 0.2.0 → 0.3.0

package/scss/jtb.scss

@@ -12,8 +12,6 @@
 // @use "nk_components";
 @forward "nk";
 @forward "forms";
-@forward "layout/grid_old";
-
 
 
 @forward "components/accordion";
@@ -28,11 +26,8 @@
 @forward "components/sidebar";
 
 
-
-// @forward "utilities/visibility";
-// why forward???
 @forward "utilities/border";
-@forward "utilities/display";
+@forward "utilities/display_visibility";
 @forward "utilities/flex";
 @forward "utilities/general";
 @forward "utilities/grid";

package/scss/mixins/_media.scss

@@ -21,7 +21,7 @@
 }
 
 @mixin desktop-only {
-    @media (min-width: $desktop) and (max-width: $desktop - 1px) {
+    @media (min-width: $desktop) and (max-width: $widescreen - 1px) {
         @content;
     }
 }
@@ -35,11 +35,6 @@
 // |-- from-device (device and larger) --|
 // --------------------------------------------------------------------------
 
-@mixin from-mobile-landscape {
-    @media (min-width: $mobile-landscape) {
-        @content;
-    }
-}
 @mixin from-tablet {
     @media (min-width: $tablet) {
         @content;

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/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,57 @@ $border-colors-map: (
 // make sure overrides come after base class
 
 @each $key, $value in $border-widths-map {
-    .bdr#{$key} {
+    .bdr-#{$key} {
         border-width: $value;
     }
 }
 
-
-
-.nbdr {
-    border: none !important;
+// --------------------------------------------------------------------------
+// -- 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;
+    }
 }
 
-// // // 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 --
+// --------------------------------------------------------------------------
 
-// // // 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;
-// //     }
-// // }
+.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;
+    }
+}

package/scss/utilities/{_display.scss → _display_visibility.scss}

@@ -61,6 +61,17 @@ $visibility-utilities: (
         display: flex !important;
     }
 }
+@include laptop-only {
+    .hide-on-laptop {
+        display: none !important;
+    }
+    .block-on-laptop {
+        display: block !important;
+    }
+    .flex-on-laptop {
+        display: flex !important;
+    }
+}
 @include desktop-only {
     .hide-on-desktop {
         display: none !important;
@@ -72,6 +83,17 @@ $visibility-utilities: (
         display: flex !important;
     }
 }
+@include widescreen-only {
+    .hide-on-widescreen {
+        display: none !important;
+    }
+    .block-on-widescreen {
+        display: block !important;
+    }
+    .flex-on-widescreen {
+        display: flex !important;
+    }
+}
 
 // ==========================================================================
 // |--\0/-- from-device (device and larger) --\0/--|
@@ -88,6 +110,17 @@ $visibility-utilities: (
         display: flex !important;
     }
 }
+@include from-laptop {
+    .hide-from-laptop {
+        display: none !important;
+    }
+    .block-from-laptop {
+        display: block !important;
+    }
+    .flex-from-laptop {
+        display: flex !important;
+    }
+}
 @include from-desktop {
     .hide-from-desktop {
         display: none !important;
@@ -99,6 +132,17 @@ $visibility-utilities: (
         display: flex !important;
     }
 }
+@include from-widescreen {
+    .hide-from-widescreen {
+        display: none !important;
+    }
+    .block-from-widescreen {
+        display: block !important;
+    }
+    .flex-from-widescreen {
+        display: flex !important;
+    }
+}
 
 // // ==========================================================================
 // // |--\0/-- up-to-device (up to but not including) --\0/--|
@@ -114,6 +158,17 @@ $visibility-utilities: (
         display: flex !important;
     }
 }
+@include up-to-laptop {
+    .hide-up-to-laptop {
+        display: none !important;
+    }
+    .block-up-to-laptop {
+        display: block !important;
+    }
+    .flex-up-to-laptop {
+        display: flex !important;
+    }
+}
 @include up-to-desktop {
     .hide-up-to-desktop {
         display: none !important;
@@ -125,3 +180,14 @@ $visibility-utilities: (
         display: flex !important;
     }
 }
+@include up-to-widescreen {
+    .hide-up-to-widescreen {
+        display: none !important;
+    }
+    .block-up-to-widescreen {
+        display: block !important;
+    }
+    .flex-up-to-widescreen {
+        display: flex !important;
+    }
+}

package/scss/utilities/_flex.scss

@@ -67,7 +67,7 @@ $flex-utilities: (
             // stretch: stretch,
             // between: space-between,
             // around: space-around,
-            // evenly: space-evenly,
+            // evenly: space-evenly,,,
         ),
     ),
     "flex-direction": (
@@ -93,12 +93,20 @@ $flex-utilities: (
         "property": "flex",
         "prefix": "",
         "values": (
-            fsg1: 1 1 0%,
+            flex-1: 1 1 0%,
             fs-auto: 0 1 auto,
             fsg-auto: 1 1 auto,
             flex-none: none,
         ),
     ),
+    "order": (
+        "property": "order",
+        "prefix": "order-",
+        "values": (
+            1: 1,
+            2: 2,
+        ),
+    ),
 );
 
 @each $property, $map in $flex-utilities {

package/scss/utilities/_general.scss

@@ -58,8 +58,9 @@
     left: 0;
     right: 0;
     overflow-y: auto;
-    background: rgba(31, 41, 155, 0.6);
+    background: rgba(0, 0, 0, 0.7);
     z-index: 1000;
+    margin: 0;
 }
 
 .cursor-pointer {
@@ -79,10 +80,10 @@
 }
 
 .close {
-    color: rgb(238, 235, 235);
+    color: rgb(199, 197, 197);
     cursor: pointer;
-    height: 1.25rem; // nice default size
-    width: 1.25rem; // nice default size
+    height: 1rem;
+    width: 1rem;
 
     &:hover {
         color: rgb(163, 69, 88);

package/scss/utilities/_grid.scss

@@ -8,14 +8,17 @@
 // -- MAPS --
 // --------------------------------------------------------------------------
 
+// percentage to fr conversion for two column layouts
 $grid-fr-map: (
     // first-col-%: (col1 fr, col2 fr)
     20: (1fr, 4fr),
     25: (1fr, 3fr),
     30: (3fr, 7fr),
+    33: (1fr, 2fr),
     40: (2fr, 3fr),
     50: (1fr, 1fr),
     60: (3fr, 2fr),
+    67: (2fr, 1fr),
     70: (7fr, 3fr),
     75: (3fr 1fr),
     80: (4fr, 1fr)
@@ -24,7 +27,9 @@ $grid-fr-map: (
 // only need to add 1st column percentage, 2nd is calculated
 // no need to add small size here, it is set to 100 in the create function
 // (25, 25) is shorthand for {25:75}_{25:75}_{100}
-$two-column-magic-grid: ((25, 25), (25, 40), (30, 50), (40, 50), (50, 50), (60, 50), (70, 60), (70, 70));
+
+// 33.33, 66.66
+$two-column-magic-grid: ((25, 25), (25, 40), (30, 50), (40, 50), (50, 50), (60, 50), (67, 50), (70, 50), (70, 60), (70, 70)) !default;
 
 $grid-gap-sizes: (0, 1, 1.5, 2, 3, 4, 5);
 
@@ -40,11 +45,12 @@ $grid-gap-sizes: (0, 1, 1.5, 2, 3, 4, 5);
 }
 
 // -- TWO COLUMN UN-EQUAL WIDTHS (NON-RESPONSIVE) --
+// minmax prevents blowout
 @each $key, $fr-units in $grid-fr-map {
     // specify the first column size,then calculate the second column width
     $class: #{$key}\:#{(100 - $key)};
     .cols-#{$class} {
-        grid-template-columns: nth($fr-units, 1) nth($fr-units, 2);
+        grid-template-columns: minmax(0, nth($fr-units, 1)) minmax(0, nth($fr-units, 2));
     }
 }
 
@@ -131,7 +137,7 @@ $grid-gap-sizes: (0, 1, 1.5, 2, 3, 4, 5);
 // -- RESPONSIVE GRID FIXED WIDTH COLUMNS --
 // --------------------------------------------------------------------------
 // simply add the amount of columns you want a each break point
-$fixed-width-columns-map: ((2, 2, 1), (3, 1, 1), (3, 2, 1), (3, 3, 1), (4, 2, 1), (6, 3, 1));
+$fixed-width-columns-map: ((2, 2, 1), (3, 1, 1), (3, 2, 1), (3, 3, 1), (4, 2, 1), (4, 2, 2), (6, 3, 1));
 
 @each $grid-list in $fixed-width-columns-map {
     // create the class based on the items in each grid map
@@ -177,18 +183,3 @@ $fixed-width-columns-map: ((2, 2, 1), (3, 1, 1), (3, 2, 1), (3, 3, 1), (4, 2, 1)
         grid-template-columns: repeat(4, minmax(0, 1fr));
     }
 }
-
-// responsive grid
-// -------------------------
-// for each breakpoint (xs, sm, etc ...) in breakpoints
-// @each $breakpoint, $size in map.remove($breakpoints, "xs") {
-//     // create a media query with min-width of $size
-//     @media (min-width: $size) {
-//         // create num-cols + 1 for 0 index
-//         @for $i from 1 to $num-grid-cols + 1 {
-//             .cols-#{$breakpoint}-#{$i} {
-//                 grid-template-columns: repeat($i, minmax(0, 1fr));
-//             }
-//         }
-//     }
-// }

package/scss/utilities/_position.scss

@@ -41,8 +41,6 @@
     bottom: 0;
 }
 
-
-
 // DO NOT ADD TL, TR, BL, BR, JUST USE MULTIPLE CLASSES???
 
 .pos {
@@ -52,10 +50,12 @@
         left: 0;
         right: 0;
     }
+
     &-x {
         left: 0;
         right: 0;
     }
+
     &-y {
         top: 0;
         bottom: 0;
@@ -66,35 +66,18 @@
         left: 0;
         right: 0;
     }
+
     &-b {
         bottom: 0;
     }
+
     &-l {
         left: 0;
         right: auto; // reset for flex ?? dd requires to shrink ??
     }
+
     &-r {
         right: 0;
         left: auto; // reset for flex ?? dd requires to shrink ??
     }
-//
-//
-//
-//
-    // &-tl {
-    //     top: 0;
-    //     left: 0;
-    // }
-    // &-tr {
-    //     top: 0;
-    //     right: 0;
-    // }
-    // &-bl {
-    //     bottom: 0;
-    //     left: 0;
-    // }
-    // &-br {
-    //     bottom: 0;
-    //     right: 0;
-    // }
 }

package/scss/utilities/_sizes.scss

@@ -1,14 +1,8 @@
 @use "../base/vars_base" as *;
 @use "../functions/helpers" as *;
+@use "../mixins/media" as *;
 @use "sass:map";
 
-// ---------------- BEFORE YOU DO ANYTHING CRAZY ----------------
-//
-// the flag is used top make sure utility overrides
-// class specificity.
-//
-// ---------------- BEFORE YOU DO ANYTHING CRAZY ----------------
-
 // width utilities w-{n}rem or w-{n}px
 
 // --------------------------------------------------------------------------
@@ -73,7 +67,6 @@ $pixel-sizes: (16, 24, 32, 40, 64, 100, 150, 200, 300, 400, 600);
 // -- FRACTIONAL SIZES --
 // --------------------------------------------------------------------------
 
-// \ is needed to escape the forward slash
 $fractional-sizes: (1\/4: 25%, 1\/3: 33.33%, 1\/2: 50%, 3\/4: 75%);
 
 @each $key, $value in $fractional-sizes {
@@ -82,13 +75,11 @@ $fractional-sizes: (1\/4: 25%, 1\/3: 33.33%, 1\/2: 50%, 3\/4: 75%);
     }
 }
 
-
-
 $v-heights: (
     // 40: 40vh,
     // 50: 50vh,
     // 60: 60vh,
-    100: 100vh,
+    100: 100vh
 );
 
 // vertical heights
@@ -107,8 +98,9 @@ $max-min-sizes: (
     800: 800px,
 );
 
-
-// 1. use capital so sass does not throw an error
+.h-1\/1{
+    height: 100%;
+}
 
 @each $key, $value in $max-min-sizes {
     .minw#{$key} {
@@ -118,9 +110,36 @@ $max-min-sizes: (
     }
     // max-width, up to max of n%
     .maxw#{$key} {
-        // Think of the min() value as providing the maximum value
-        // a property can have. chooses the minimum of the two
-        width: Min($value, 95%); // 1.
+        // Think of the min() value as providing the maximum value a property
+        // can have. chooses the minimum of the two
+
+        // this allows shring?????
+        max-width: $value;
+        // width: Min($value, 95%); // 1. use capital so sass does not throw an error
     }
 }
 
+// @include from-tablet {
+//     @each $key, $value in $fractional-sizes {
+//         .md\:w-#{$key} {
+//             width: $value;
+//         }
+//     }
+// }
+
+// @include from-laptop {
+//     @each $key, $value in $fractional-sizes {
+//         .lg\:w-#{$key} {
+//             width: $value;
+//         }
+//     }
+// }
+
+// @include from-desktop {
+//     @each $key, $value in $fractional-sizes {
+//         .xl\:w-#{$key} {
+//             width: $value;
+//         }
+//     }
+// }
+

package/scss/utilities/_spacing.scss

@@ -8,8 +8,19 @@
 // Order Matters! basic and responsive utility classes need to
 // come after the magic classes to allow them to be overridden
 //
+// There is no winning here!!! Do you want parent magic classes to
+// override utilities or visa versa
+//
+// put remove at the top???
 // --------------------------------------------------------------
 
+// for testing only to override default list
+// $rem-sizes-map: (
+//     "1": 1rem,
+//     "3": 3rem,
+//     "5": 5rem,
+// );
+
 $spacing-utilities-map: (
     "margin": (
         "base-class": "m",
@@ -38,8 +49,6 @@ $spacing-utilities-map: (
     ),
 );
 
-@include positionUtilityClasses($spacing-utilities-map);
-
 // --------------------------------------------------------------
 // -- RESPONSIVE SPACING UTILITIES --
 // --------------------------------------------------------------
@@ -65,7 +74,7 @@ $padding-y-responsive-sizes: (10, 6, 2), "";
 }
 
 // --------------------------------------------------------------
-// -- RESPONSIVE PADDING --
+// -- RESPONSIVE PADDING / MARGIN--
 // --------------------------------------------------------------
 //
 .py-5-3-2 {
@@ -83,6 +92,21 @@ $padding-y-responsive-sizes: (10, 6, 2), "";
     }
 }
 
+.my-5-3-2 {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+
+    @include from-tablet {
+        margin-top: 3rem;
+        margin-bottom: 3rem;
+    }
+
+    @include from-desktop {
+        margin-top: 5rem;
+        margin-bottom: 5rem;
+    }
+}
+
 // --------------------------------------------------------------
 // -- RESPONSIVE MAGIC PADDING --
 // --------------------------------------------------------------
@@ -113,6 +137,9 @@ $padding-y-responsive-sizes: (10, 6, 2), "";
     margin-top: $content-gap;
 }
 
+.space-y-0 > *:not(:first-child) {
+    margin-top: 0;
+}
 .space-y-05 > *:not(:first-child) {
     margin-top: 0.5rem;
 }
@@ -174,3 +201,20 @@ $padding-y-responsive-sizes: (10, 6, 2), "";
     padding-left: 1rem;
     padding-right: 1rem;
 }
+
+//
+//
+//
+// ORDER ABOVE IN REVIEW
+//
+//
+//
+//
+
+// --------------------------------------------------------------
+// -- POSITION BASED UTILITIES --
+// --------------------------------------------------------------
+// Must built last to ensure override
+//
+
+@include positionUtilityClasses($spacing-utilities-map);