nk_jtb 0.3.0 → 0.4.0

package/scss/components/_other.scss

@@ -24,21 +24,16 @@
     }
 }
 
-// ==========================================================================
-// -- Badge --
-// ==========================================================================
 .badge {
-    position: absolute;
-    top: 3px;
-    right: 3px;
-    height: 20px;
-    min-width: 20px;
-    border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 12px;
-    background-color: hsl(354, 70%, 54%);
-    border: 1px solid hsl(354, 70%, 44%);
-    color: rgb(255, 255, 255);
+    // font-size: 0.75em;
+    // padding-left: 0.25em;
+    // padding-right: 0.25em;
+    // padding-top: 0.25em;
+    // padding-bottom: 0.25em;
+
+    padding: 0.25em 0.4em;
+    font-size: .7rem;
+    line-height: 1;
+    text-align: center;
+    border-radius: 0.25rem;
 }

package/scss/components/_sidebar.scss

@@ -3,10 +3,24 @@
     left: 0;
     top: 0;
     bottom: 0;
-    width: 100%;
-    max-width: 360px;
-    z-index: 1000;
+    right: 0;
+    // width: 100%;
+    // max-width: 360px;
+    // z-index: 1000;
+    // overflow-y: auto;
+    // outline: none;
+    // transition: transform 0.25s ease-in-out;
+    z-index: 500;
+}
+
+.overlay {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
     overflow-y: auto;
-    outline: none;
-    transition: transform 0.25s ease-in-out;
-}
+    background: rgba(0, 0, 0, 0.7);
+    z-index: 30;
+    margin: 0;
+}

package/scss/forms/_index.scss

@@ -1,2 +1,3 @@
 @forward './form';
 @forward './file';
+@forward './toggle';

package/scss/forms/_toggle.scss

@@ -0,0 +1,54 @@
+@use "../utilities/display_visibility" as *;
+@use "../utilities/transition" as *;
+
+$toggle-body-height: 1.5rem;
+$toggle-body-width: 3rem;
+$toggle-gap: 0.25rem;
+
+.toggle {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+
+    input[type="checkbox"] {
+        @extend .sr-only;
+    }
+
+    // toggle body
+    div {
+        border-radius: 9999px;
+        width: $toggle-body-width;
+        height: $toggle-body-height;
+        background-color: hsl(0deg, 0%, 90%);
+
+        // toggle off
+        &::after {
+            position: absolute;
+            content: "";
+            height: calc($toggle-body-height - $toggle-gap);
+            width: calc($toggle-body-height - $toggle-gap);
+            top: calc($toggle-gap / 2);
+            left: calc($toggle-gap / 2);
+            background-color: hsl(0, 0%, 100%);
+            border-color: rgba(0, 0, 0, 0.15);
+            border-radius: 9999px;
+            border-width: 1px;
+            @extend .transition;
+        }
+    }
+}
+
+input[type="checkbox"]:checked {
+    // toggle body on (checked)
+    ~ div {
+        background-color: hsl(100, 70%, 40%);
+        @extend .transition;
+        // toggle when checked
+        &::after {
+            // background-color: hsl(50, 10%, 10%);
+            transform: translateX(calc($toggle-body-width - $toggle-body-height));
+            @extend .transition;
+        }
+    }
+}

package/scss/functions/_colorFunctions.scss

@@ -0,0 +1,35 @@
+@use "../base/vars_base" as *;
+
+// set text colour based on the background
+// --------------------------------------------------------------------------
+
+@function setTextColor($bg-color) {
+    @if (lightness($bg-color) > 60) {
+        @return $base-color;
+    } @else {
+        @return #fff;
+    }
+}
+
+// --------------------------------------------------------------
+// -- CONVERT COLOR TO RGBA --
+// --------------------------------------------------------------
+// will convert when passing in rgb, hex or hsl
+//
+// manually set a colour to convert
+// background-color: convertToRgba(#e23465);
+//
+// optionally set the opacity
+// background-color: convertToRgba(#e23465, 0.5);
+//
+// fetch a color from the color-map
+// background-color: convertToRgba(map-get($color-map, 'blue'));
+
+@function convertToRgba($color, $alpha: 1) {
+    @return rgba(red($color), green($color), blue($color), $alpha);
+}
+
+
+
+
+

package/scss/functions/_helpers.scss

@@ -40,3 +40,7 @@
     // search and escape decimals
     @return strReplace($class, ".", "\\.");
 }
+
+
+
+

package/scss/jtb.scss

@@ -13,28 +13,32 @@
 @forward "nk";
 @forward "forms";
 
-
 @forward "components/accordion";
 @forward "components/box";
 @forward "components/button";
 @forward "components/dropdown";
 @forward "components/hero"; // has problems with img
 @forward "components/icon";
+@forward "components/list";
 @forward "components/menu";
 @forward "components/navbar";
 @forward "components/other";
 @forward "components/sidebar";
 
+// this is completly optional
+// @forward "layouts/_two-column";
 
 @forward "utilities/border";
 @forward "utilities/display_visibility";
 @forward "utilities/flex";
 @forward "utilities/general";
 @forward "utilities/grid";
+@forward "utilities/opacity";
 @forward "utilities/position";
 @forward "utilities/sizes";
 @forward "utilities/spacing";
 @forward "utilities/state";
 @forward "utilities/text";
 @forward "utilities/themes";
-
+@forward "utilities/transition";
+@forward "utilities/translate";

package/scss/layouts/__two-column.scss

@@ -0,0 +1,32 @@
+@use "../mixins/media" as *;
+@use "../base/vars_base" as *;
+
+// These are common design patterns layouts
+
+// add reverse to swap column positions or use order utility classes??
+
+// utility structure
+
+// <div class="flex-col md:flex-row gg">
+//     <div class="w-24-full"></div>
+//     <div class="fg1"></div>
+// </div>
+
+// TEST: can i still override??
+.two-column {
+    display: flex;
+    // gap: 3rem;
+
+    // > div {
+    //     flex: 1;
+    // }
+
+    // aside {
+    //     width: 24rem;
+    //     flex: 0 1 100%;
+    // }
+
+    // @include to-lg {
+    //     flex-direction: column;
+    // }
+}

package/scss/mixins/_colorSchemeSimple.scss

@@ -1,4 +1,4 @@
-@use '../functions/setTextColor' as *;
+@use '../functions/colorFunctions' as *;
 
 // $base, $border-color (optional), $font-color (optional)
 // call with - @include colorSchemeSimple($base-color)

package/scss/mixins/_createState.scss

@@ -1,4 +1,4 @@
-@use "../functions/setTextColor" as *;
+@use "../functions/colorFunctions" as *;
 
 @mixin hover($bg, $lightenBy: 10%, $color: setTextColor($bg),) {
     &:hover {

package/scss/mixins/_makeColorSchemeAdvanced.scss

@@ -1,6 +1,6 @@
 @use "../base/vars_all" as *; // required to set defaults
 @use "../mixins/colorSchemeSimple" as *;
-@use "../functions/setTextColor" as *;
+@use "../functions/colorFunctions" as *;
 
 // The minimum requirement for creating a theme-map is the $base
 // color, all other properties can be created intuitively.

package/scss/mixins/_makeCssPropertyMixins.scss

@@ -13,9 +13,12 @@
 // --------------------------------------------------------------
 // -- CREATE SINGLE CSS PROPERTY --
 // --------------------------------------------------------------
-
-@mixin makeCssProperty($property, $value) {
-    #{$property}: $value;
+// creates a single size based properties. if the situation arises when you do
+// not need a unit, re-write with conditional
+@mixin makeCssProperty($property, $value, $unit: null) {
+    $val: if($value == "full", 100, $value);
+    $u: if($value == "full", "%", $unit);
+    #{$property}: #{$val}#{$u};
 }
 
 // --------------------------------------------------------------
@@ -26,3 +29,5 @@
         #{$property}: $value;
     }
 }
+
+

package/scss/mixins/_makeMagicClass.scss

@@ -0,0 +1,61 @@
+@use "./media" as *;
+@use "./makeCssPropertyMixins" as *;
+@use "sass:list";
+@use "sass:map";
+@use "sass:string";
+
+// Make magic responsive class for a single css property.
+//
+// accepts single css property with list of lists with responsive sizes
+
+@mixin makeMagicClass($property, $prefix, $listOfLists, $unit: rem) {
+    // must have at least two list
+    @each $list in $listOfLists {
+        // exclude empty list when creating single list
+        @if ($list != ()) {
+            $numBreakPoints: list.length($list);
+
+            // set the value of the BP based on position using negative
+            // numbers. This makes sure the position is always the same
+            $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};
+            }
+
+            .#{$prefix}-#{$derived-class} {
+                @include from-sm {
+                    @include makeCssProperty($property, $smValue, $unit);
+                }
+                @include from-md {
+                    @include makeCssProperty($property, $mdValue, $unit);
+                }
+                @if ($numBreakPoints >= 3) {
+                    @include from-lg {
+                        @include makeCssProperty($property, $lgValue, $unit);
+                    }
+                }
+                @if ($numBreakPoints >= 4) {
+                    @include from-xl {
+                        @include makeCssProperty($property, $xlValue, $unit);
+                    }
+                }
+                @if ($numBreakPoints >= 5) {
+                    @include from-xxl {
+                        @include makeCssProperty($property, $xxlValue,$unit);
+                    }
+                }
+            }
+        }
+    }
+}

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);
                     }
                 }