nk_jtb 0.2.0 → 0.4.0

package/scss/components/_button.scss

@@ -1,22 +1,11 @@
 @use "../base/vars_all" as *;
 @use "../forms/control" as *;
-@use "../functions/setTextColor" as *;
+@use "../functions/colorFunctions" as *;
 @use "../mixins/createState" as *;
 
 // base class
 // ----------------------------
 
-// [class*="#{$button-class}"] {
-//     &.focus,
-//     &:focus {
-//         outline: none;
-//     }
-// }
-
-
-// DO NOT add <button> here, it is best to add the class for more
-// flexibility using button in livewire components
-
 .#{$button-class} {
     @extend %control;
     background: $btn-bg;

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
 
-    :where(a) {
-        // do not add padding here as it is harder to override
-        color: $menu-link-color;
+    :where(a, li a, .menu-item) {
+        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

@@ -9,11 +9,17 @@
 
 .#{$navbar-class} {
     background: $navbar-bg;
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
     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;
     }
 
@@ -21,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 {
@@ -30,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/_control.scss

@@ -28,7 +28,10 @@ $ctrl-line-height: 1.5 !default;
 // 1. line height is required to get consistent heights
 // 2. creates control and button sizes sm, md, lg
 %control {
-    border: $ctrl-border;
+    border-top: $ctrl-border;
+    border-bottom: $ctrl-border;
+    border-left: $ctrl-border;
+    border-right: $ctrl-border;
     border-radius: $ctrl-border-radius;
     font-size: $ctrl-font-size;
     padding: $ctrl-padding-y $ctrl-padding-x;
@@ -37,7 +40,6 @@ $ctrl-line-height: 1.5 !default;
     align-items: center;
     position: relative;
     background-color: $ctrl-bg-color;
-    // cursor: text;
 
     // create control sizes
     @each $size, $value in $control-sizes {
@@ -47,4 +49,3 @@ $ctrl-line-height: 1.5 !default;
     }
 }
 
-// use button hover styles?

package/scss/forms/_form.scss

@@ -57,59 +57,56 @@ select {
         gap: 1rem;
 
         label {
-            width: 9rem; // use flex-basis to override
+            width: 10rem; // use flex-basis to override
             flex-shrink: 0; // prevent shrink for 100%
             margin-top: 4px; // better alignment
         }
     }
 }
 
-// ---------------- BEFORE YOU DO ANYTHING CRAZY ----------------
-//
-// You will be tempted to use the with-addons class directly on
-// the frm-row DON'T DO IT! Just create a new element which gives
-// you greater control with much less frustration.
-//
-// ---------------- BEFORE YOU DO ANYTHING CRAZY ----------------
-
-$addOn-inset-distance: 0.25rem; // distance from edge of input
-
-// 1. flex for easy alignment
-// 2. allow everything to align vertically
-// 3. inputs using trailing icons must be 100%
-
-.with-addons {
-    position: relative;
-    display: flex; // 1.
-    align-items: center; // 1.
-
-    .leadingAddon,
-    .trailingAddon {
-        position: absolute;
-        pointer-events: none;
-        // z-index: 10;
-        color: $placeholder-color;
-        line-height: 1; // 2.
+.withAddons {
+    display: flex;
+    align-items: center;
+    flex: 1 1 0%;
+
+    input {
+        flex-grow: 1;
+        // border-top-left-radius: 0;
+        // border-bottom-left-radius: 0;
+        // border-top-right-radius: 0;
+        // border-bottom-right-radius: 0;
     }
 
     .leadingAddon {
-        left: $addOn-inset-distance;
+        border-top-left-radius: $ctrl-border-radius;
+        border-bottom-left-radius: $ctrl-border-radius;
     }
 
     .trailingAddon {
-        right: $addOn-inset-distance;
+        border-top-right-radius: $ctrl-border-radius;
+        border-bottom-right-radius: $ctrl-border-radius;
     }
 
-    // the width of the addon will vary depending on the content
-    :where(input) {
-        padding-left: 2rem;
-        width: 100%; // 3.
-        &:focus ~ * {
-            color: rgb(73, 73, 73);
-        }
+    // style addons the same as the control
+    .leadingAddon,
+    .trailingAddon {
+        border: $ctrl-border;
+        font-size: $ctrl-font-size;
+        padding: $ctrl-padding-y $ctrl-padding-x;
+        line-height: $ctrl-line-height; // 1
+        display: inline-flex;
     }
+}
 
-    .icon {
-        height: 1.25rem;
-    }
+
+.withAddons:has(.leadingAddon){
+    background: green;
 }
+// the width of the addon will vary depending on the content
+// :where(input) {
+//     padding-left: 2rem;
+//     width: 100%; // 3.
+//     &:focus ~ * {
+//         color: rgb(73, 73, 73);
+//     }
+// }

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

@@ -12,9 +12,6 @@
 // @use "nk_components";
 @forward "nk";
 @forward "forms";
-@forward "layout/grid_old";
-
-
 
 @forward "components/accordion";
 @forward "components/box";
@@ -22,24 +19,26 @@
 @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/visibility";
-// why forward???
 @forward "utilities/border";
-@forward "utilities/display";
+@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);
+                    }
+                }
+            }
+        }
+    }
+}