nk_jtb 0.4.0 → 0.5.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nk_jtb",
   "description": "Yet another utility based framework.",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/naykel76/nk_jtb.git"
@@ -13,14 +13,14 @@
     "spacing": "sass --watch --no-source-map ./scss/utilities/_spacing.scss:dist/css/spacing.css",
     "flex": "sass --watch --no-source-map ./scss/utilities/_flex.scss:dist/css/flex.css",
     "grid": "sass --watch --no-source-map ./scss/utilities/_grid.scss:dist/css/grid.css",
-    "play": "sass --watch --no-source-map ./scss/_play.scss:dist/css/play.css",
+    "play": "sass --watch --no-source-map ./scss/play.scss:dist/css/play.css",
     "dev": "vite --open",
     "build": "vite build",
     "preview": "vite preview"
   },
   "devDependencies": {
-    "sass": "^1.54.0",
-    "vite": "^3.0.0"
+    "sass": "^1.60.0",
+    "vite": "^4.2.1"
   },
   "dependencies": {
     "alpinejs": "^3.10.5"

package/scss/_nk.scss

@@ -97,3 +97,26 @@ trix-editor {
         display: none;
     }
 }
+
+
+// ==========================================================================
+// -- Primary banner for page layouts --
+// ==========================================================================
+$banner-height: 450px !default;
+$banner-bg: transparent !default;
+$banner-text-bg: transparent !default;
+
+.banner {
+    background-repeat: no-repeat;
+    background-position: right center;
+    height: $banner-height;
+    background-color: $banner-bg;
+
+    // banner-text is the wrapper
+    &-text {
+        // color: white;
+        background-color: $banner-text-bg;
+        padding: 1rem;
+    }
+}
+

package/scss/base/_base.scss

@@ -304,25 +304,11 @@ textarea {
     resize: vertical;
 }
 
-// 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
-// 2. Set the default placeholder color to the user's configured gray 400 color.
-
-input::-moz-placeholder,
-textarea::-moz-placeholder {
-    opacity: 1; // 1
-    color: #9ca3af; // 2
-}
-
-input:-ms-input-placeholder,
-textarea:-ms-input-placeholder {
-    opacity: 1; // 1
-    color: #9ca3af; // 2
-}
 
 input::placeholder,
 textarea::placeholder {
     opacity: 1; // 1
-    color: #9ca3af; // 2
+    color: #c5c5c5; // 2
 }
 
 // Set the default cursor for buttons.

package/scss/components/_accordion.scss

@@ -1,36 +1,103 @@
+@use "../base/vars_base" as *;
+// add accordion component variables here instead of the main
+// component variable file.
 $accordion-bg: rgb(245, 245, 245) !default;
+$accordion-border: $border !default;
+$accordion-hover-bg: darken($accordion-bg, 5%) !default;
 
-.accordion {
-    border: 1px solid;
-    margin-top: 1rem;
-}
+$midnight: #2c3e50;
+
+// ---------------- BEFORE YOU DO ANYTHING CRAZY ------------------
+// These styles are for the CSS accordion, not the Alpine accordion.
+// You should focus the accordion behaviour and limit opinionated
+// styles to make it easier to apply utility classes.
+// ---------------- BEFORE YOU DO ANYTHING CRAZY ------------------
 
-.accordion-toggle {
-    background-color: $accordion-bg;
-    color: #444;
-    cursor: pointer;
-    width: 100%;
-    transition: 0.4s;
-    border: 1px solid rgba(0, 0, 0, 0.05);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 1rem;
+// style the toggle
+:where(.accordion label) {
+    font-weight: bold;
+    // background: #000;
 }
 
-// Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover)
-.accordion-active,
-.accordion-toggle:hover {
-    background-color: rgb(230, 230, 230);
+.accordion {
+    overflow: hidden;
+    margin-bottom: 0.5rem;
+    border: $border;
+
+    // title and label are used to toggle the accordion
+    &-title,
+    label {
+        width: 100%;
+        transition: 0.3s;
+        display: flex;
+        justify-content: space-between;
+        padding: 1em;
+        background: $accordion-bg;
+        cursor: pointer;
+
+        &:hover {
+            background: $accordion-hover-bg;
+        }
+        /* Icon */
+        &::after {
+            content: "\276F";
+            text-align: center;
+            transition: all 0.3s;
+        }
+    }
+
+    &-content {
+        padding: 0 1em;
+        max-height: 0;
+        transition: all 0.3s;
+    }
+
+    &-close {
+        display: flex;
+        justify-content: flex-end;
+        font-size: 0.75em;
+        cursor: pointer;
+    }
+
+    input {
+        position: absolute;
+        opacity: 0;
+        z-index: -1;
+        // checked toggles open and closed
+        &:checked {
+            + label {
+                background: $accordion-hover-bg;
+                &::after {
+                    transform: rotate(90deg);
+                }
+            }
+            ~ .accordion-content {
+                max-height: 999vh; // prevent cutting off content
+                padding: 1em;
+            }
+        }
+    }
+
+    .active {
+        content: "\276F";
+        text-align: center;
+        transition: all 0.3s;
+        &::after {
+            transform: rotate(90deg);
+        }
+    }
 }
 
+// ---------------- BEFORE YOU DO ANYTHING CRAZY ------------------
+// This is only used in an alpine accordion and will be DEPRECIATED
+// ---------------- BEFORE YOU DO ANYTHING CRAZY ------------------
+
 .accordion-body {
     display: block;
     overflow: hidden;
     border-radius: 0;
 
     > div {
-        border-top: none;
         &:hover {
             background-color: rgba(250, 221, 230, 0.15);
         }

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

@@ -12,7 +12,9 @@ $toggle-gap: 0.25rem;
     cursor: pointer;
 
     input[type="checkbox"] {
-        @extend .sr-only;
+        height: 0;
+        width: 0;
+        visibility: hidden;
     }
 
     // toggle body
@@ -29,7 +31,8 @@ $toggle-gap: 0.25rem;
             height: calc($toggle-body-height - $toggle-gap);
             width: calc($toggle-body-height - $toggle-gap);
             top: calc($toggle-gap / 2);
-            left: 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;
@@ -37,18 +40,18 @@ $toggle-gap: 0.25rem;
             @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));
+    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/play.scss

@@ -1,30 +1,76 @@
-@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";
+// @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";
+// add accordion component variables here instead of the main
 
-$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);
+// $midnight: #2c3e50;
+// .accordion {
+//     color: white;
+//     overflow: hidden;
+//     label {
+//         display: flex;
+//         justify-content: space-between;
+//         padding: 1em;
+//         background: $midnight;
+//         font-weight: bold;
+//         cursor: pointer;
+//         /* Icon */
+//         &:hover {
+//             background: darken($midnight, 10%);
+//         }
+//         &::after {
+//             content: "\276F";
+//             width: 1em;
+//             height: 1em;
+//             text-align: center;
+//             transition: all 0.35s;
+//         }
+//     }
+//     &-content {
+//         max-height: 0;
+//         padding: 0 1em;
+//         color: $midnight;
+//         background: white;
+//         transition: all 0.35s;
+//     }
+//     &-close {
+//         display: flex;
+//         justify-content: flex-end;
+//         padding: 1em;
+//         font-size: 0.75em;
+//         background: $midnight;
+//         cursor: pointer;
+//         &:hover {
+//             background: darken($midnight, 10%);
+//         }
+//     }
 
-// (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;
-    }
-}
+//     input {
+//         position: absolute;
+//         opacity: 0;
+//         z-index: -1;
+//         // checked toggles open and closed
+//         &:checked {
+//             + label {
+//                 background: darken($midnight, 10%);
+//                 &::after {
+//                     transform: rotate(90deg);
+//                 }
+//             }
+//             ~ .accordion-content {
+//                 max-height: 100vh;
+//                 padding: 1em;
+//             }
+//         }
+//     }
+// }

package/scss/utilities/_display_visibility.scss

@@ -42,8 +42,8 @@ $visibility-utilities: (
 .sr-only {
     opacity: 0;
     position: absolute;
-    left: -9000px;
-    top: -9000px;
+    // left: -9000px;
+    // top: -9000px;
 }
 
 // |--\0/-- DISPLAY --\0/--|

package/scss/utilities/_grid.scss

@@ -65,7 +65,7 @@ $grid-gap-magic-sizes: ((5, 3, 2), (5, 3), (4, 2), (3, 1)) !default;
 // --------------------------------------------------------------------------
 
 // currently starts at md, (anything under is final size) . not convinced I need to go smaller
-$fixed-width-columns-map: ((4, 2, 1), (3, 2, 1), (2, 1)) !default;
+$fixed-width-columns-map: ((4, 2, 1), (3, 2, 1), (3, 1, 1), (2, 1)) !default;
 @include makeMagicGridFixedWidth($fixed-width-columns-map);
 
 // --------------------------------------------------------------------------

package/scss/utilities/_position.scss

@@ -18,6 +18,10 @@
 .z-100 {
     z-index: 100;
 }
+
+.z-top {
+    z-index: 999;
+}
 // ==========================================================================
 // Element Position
 // ==========================================================================