nk_jtb 0.3.0 → 0.5.0

package/scss/components/_dropdown.scss

@@ -16,7 +16,6 @@
         opacity: 0;
         transform: translateY(-2em);
         top: calc(100% + 4px); // push to bottom of toggle element
-        // top: calc(100% + $dropdown-toggle-gap); // push to bottom of toggle element
         left: 0;
         transition: all 0.1s ease-in-out 1s, visibility 0s linear 0.1s, z-index 0s linear 0.01s;
         z-index: 1000;
@@ -33,14 +32,3 @@
         transition-delay: 0s, 0s, 0.1s; // this removes the transition delay so the menu will be visible while the other styles transition
     }
 }
-
-// ?????????????
-.dd-item {
-    letter-spacing: -0.025em;
-    line-height: 1.25rem;
-    padding: 0.25rem 0.75rem;
-}
-
-.dd-item:hover {
-    background-color: rgb(243, 244, 246);
-}

package/scss/components/_hero.scss

@@ -16,7 +16,7 @@ $hero-gradient: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4));
         font-size: 2.25rem;
 
         // font size never is or will be a one size fits all! STOP changing!!!
-        @include from-tablet {
+        @include from-md {
             font-size: 3rem;
         }
     }
@@ -27,7 +27,7 @@ $hero-gradient: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4));
         color: $hero-subtitle-color;
         font-size: 1.5rem;
 
-        @include from-desktop {
+        @include from-xl {
             font-size: 2.1rem;
         }
     }

package/scss/components/_icon.scss

@@ -1,15 +1,12 @@
 @use '../base/vars_all' as *;
 
 
-// 1. aligns better inline to text text
+// 1. aligns better text to text when inline
 // 2. better alignment rather than changing size
 
 .#{$icon-class} {
     width: $icon-xy;
     height: $icon-xy;
-    // align-items: center;
-    // display: inline-flex;
-    // justify-content: center;
     vertical-align: bottom; // 1
     color: $icon-color;
     padding: 2px; // 2

package/scss/components/_list.scss

@@ -0,0 +1,32 @@
+@use "../base/vars_colors" as *;
+@use "../base/vars_components" as *;
+
+// --------------------------------------------------------------------------
+// -- TICK ICON LIST --
+// --------------------------------------------------------------------------
+//
+
+.icon-list {
+    // leave as fallback?
+    //     list-style: none;
+    ul {
+        margin-left: 0;
+    }
+
+    :where(svg) {
+        margin-right: 1rem;
+    }
+
+    & li {
+        display: flex;
+        align-items: center;
+        background-repeat: no-repeat;
+        background-position: left center;
+        padding-block: 0.25rem;
+    }
+
+    &.tick-svg li {
+        background-image: $icon-tick;
+        padding-left: 2rem;
+    }
+}

package/scss/components/_menu.scss

@@ -1,5 +1,5 @@
 @use "../base/vars_all" as *;
-@use "../functions/setTextColor" as *;
+@use "../functions/colorFunctions" as *;
 
 .menu {
     flex-wrap: wrap;
@@ -7,23 +7,29 @@
     flex-direction: column;
     line-height: 1.25;
     list-style: none;
+    margin-left: 0; // remove margin for ul
 
-    // add div to
     :where(a, li a, .menu-item) {
-        color: $menu-link-color;
+        color: inherit;
         padding: $menu-padding-y $menu-padding-x;
-        display: block;
+        // this was initially set to display block but it is too difficult to
+        // work with icons and chevrons on the anchor element.
+        display: flex;
+        align-items: center;
 
+        &.active,
         &:hover {
+            cursor: pointer;
             color: $menu-link-hover-color;
-            background: $menu-hover-bg;
+            background-color: $menu-hover-bg;
         }
     }
 
     .menu-title {
         font-weight: 600;
-        color: #7a7a7a;
         letter-spacing: 0.05em;
+        margin-left: $menu-padding-x;
+        margin-bottom: 0.5em;
 
         &:not(:first-child) {
             margin-top: $content-gap;

package/scss/components/_navbar.scss

@@ -11,8 +11,15 @@
     background: $navbar-bg;
     padding: $navbar-padding-y $navbar-padding-x;
     position: relative;
+    box-shadow: 1px 2px 5px #2a2a2b;
 
-    nav {
+    li {
+        list-style: none;
+    }
+
+    nav,
+    ul {
+        margin: 0; // this may be a problem for nested elements
         display: flex;
     }
 
@@ -20,7 +27,7 @@
         padding: $navbar-nav-padding-y $navbar-nav-padding-x;
         display: block; // 1. allowing the navbar to grow in height
         background: $navbar-nav-item-bg;
-        color: $navbar-nav-font-color;
+        color: $navbar-nav-item-color;
         line-height: 1.2rem;
 
         &:hover {
@@ -29,6 +36,7 @@
         }
 
         &.active {
+            color: $navbar-nav-active-color;
             background: $navbar-nav-active-bg;
         }
     }

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/_form.scss

@@ -3,8 +3,6 @@
 
 // @use "../base/vars_base" as *;
 
-$placeholder-color: #bbbbbb !default;
-
 // -- Base Elements --
 // ==========================================================================
 label {
@@ -26,12 +24,6 @@ select {
     cursor: pointer;
 }
 
-::placeholder {
-    color: $placeholder-color;
-    opacity: 1;
-}
-
-//
 .checkbox,
 .radio {
     cursor: pointer;
@@ -41,6 +33,7 @@ select {
 
 // -- frm-row --
 // ==========================================================================
+
 .frm-row {
     position: relative;
     display: flex;
@@ -57,7 +50,11 @@ select {
         gap: 1rem;
 
         label {
-            width: 10rem; // use flex-basis to override
+            // exclude width class to make it easier to override or
+            // can also use flex-basis to override width
+            &:not([class*="w-"]) {
+                width: 10rem;
+            }
             flex-shrink: 0; // prevent shrink for 100%
             margin-top: 4px; // better alignment
         }
@@ -98,8 +95,7 @@ select {
     }
 }
 
-
-.withAddons:has(.leadingAddon){
+.withAddons:has(.leadingAddon) {
     background: green;
 }
 // the width of the addon will vary depending on the content

package/scss/forms/_index.scss

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

package/scss/forms/_toggle.scss

@@ -0,0 +1,57 @@
+@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"] {
+        height: 0;
+        width: 0;
+        visibility: hidden;
+    }
+
+    // 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 + $toggle-gap / 2);
+            // left: calc($toggle-gap + .1125rem);
+            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);
+                    }
+                }
+            }
+        }
+    }
+}