nk_jtb 0.8.2 → 0.8.5

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "nk_jtb",
     "description": "Yet another utility based framework.",
-    "version": "0.8.2",
+    "version": "0.8.5",
     "repository": {
         "type": "git",
         "url": "https://github.com/naykel76/nk_jtb.git"

package/src/_nk.scss

@@ -64,6 +64,10 @@ code-first-second-col {
     }
 }
 
+#toc {
+    margin-bottom: 1.5em;
+}
+
 // this is a hack solution to an ugly problem when using x-gt-markdown
 .markdown pre {
     overflow: auto;
@@ -89,6 +93,12 @@ code-first-second-col {
     .-ml-7 pre code {
         margin-left: -7rem;
     }
+    .-ml-8 pre code {
+        margin-left: -8rem;
+    }
+    .-ml-9 pre code {
+        margin-left: -9rem;
+    }
 
     tab-size: 0;
     table {

package/src/components/_button.scss

@@ -1,6 +1,6 @@
 @use "../base/vars_all" as *;
 @use "../functions/colorFunctions" as *;
-@use "../scss/forms/control" as *;
+@use "../forms/control" as *;
 @use "../scss/mixins/createState" as *;
 @use "../utilities/transition" as *;
 

package/src/forms/_choices.scss

@@ -1,7 +1,7 @@
 @use "sass:color";
 @use '../functions/colorFunctions' as *;
 @use '../base/vars_base' as *;
-@use '../scss/forms/control' as *; // gives access access to variables
+@use '../forms/control' as *; // gives access access to variables
 
 $choices-selector: "choices" !default;
 $choices-font-size-lg: 16px !default;

package/src/{scss/forms → forms}/_control.scss

@@ -1,4 +1,5 @@
-@use '../../functions/colorFunctions' as *;
+@use '../functions/colorFunctions' as *;
+
 $ctrl-border-radius: 0.25rem !default;
 $ctrl-border: 1px solid rgba(0, 0, 0, 0.15);
 
@@ -10,7 +11,7 @@ $ctrl-bg-color: #fff !default;
 $ctrl-color: setTextColor($ctrl-bg-color) !default;
 
 // Control and Button padding use em making them relative to the font-size
-$ctrl-padding-x: 1.25em !default;
+$ctrl-padding-x: 1rem !default;
 $ctrl-padding-y: 0.625em !default;
 
 $control-sizes: (

package/src/forms/_form.scss

@@ -1,5 +1,5 @@
 @use "../mixins/media" as *;
-@use "../scss/forms/control" as *;
+@use "../forms/control" as *;
 
 // -- Base Elements --
 // ==========================================================================

package/src/jtb.scss

@@ -39,10 +39,11 @@
 @forward "./scss/utilities/translate";
 @forward "./utilities/general";
 @forward "./utilities/grid";
+@forward "./utilities/sizes";
 @forward "./utilities/text";
 @forward "./utilities/transition";
 @forward "./utilities/utilities"; // godfather utility sheet
 
-// // extras
+// extras
 @use "./color/tailwind-colors" as *;
 @use "./extras/code" as *;

package/src/play.scss

@@ -32,3 +32,5 @@
 $x: setTextColor(transparent) !default;
 
 @debug $x;
+
+

package/src/scss/base/_content_gap.scss

@@ -19,7 +19,11 @@
     margin-top: $content-gap;
 }
 
+// excluding .flex + input is experimental.the exclusion makes it
+// easier to add tool-tips with a label
+
 // opt-out
-:is(.flex, [class^="grid"]) > * {
+:is(.flex, [class^="grid"]) > *,
+.flex + input {
     margin: 0;
 }

package/src/scss/base/_vars_components.scss

@@ -60,18 +60,13 @@ $navbar-nav-item-color: setTextColor($navbar-nav-item-bg) !default;
 
 $navbar-nav-hover-bg: lighten($navbar-nav-item-bg, 3%) !default;
 $navbar-nav-hover-color: lighten(setTextColor($navbar-nav-item-bg), 20%) !default;
+// $navbar-nav-hover-bg: lighten($navbar-nav-item-bg, 3%) !default;
+// $navbar-nav-hover-color: lighten(setTextColor($navbar-nav-item-bg), 20%) !default;
 
 $navbar-nav-active-bg: darken($navbar-nav-item-bg, 3%) !default;
 $navbar-nav-active-color: darken(setTextColor($navbar-nav-item-bg), 20%) !default;
 
-// $navbar-menu-color
 
-// $navbar:(
-//     'hover':(
-//         'color': red,
-//         "background": darken($navbar-nav-item-bg, 3%)
-//     )
-// );
 // -- lists --
 // ==============================================================
 $icon-list-color: inherit !default;

package/src/scss/utilities/_grid.scss

@@ -16,24 +16,6 @@
 
 $equal-width-magic-columns: ((4, 2, 1), (4, 3, 2, 1), (3, 2, 1), (3, 1, 1), (2, 1)) !default;
 $grid-gap-magic-sizes: ((5, 3, 2), (5, 3), (4, 2), (3, 1)) !default;
-$grid-gap-sizes: (0, 0.5, 1, 1.25, 1.5, 2, 3, 4, 5) !default;
-
-// ------------------------------------------------------------------
-// -- GRID GAP --
-// ------------------------------------------------------------------
-
-@each $size in $grid-gap-sizes {
-    $class: escapeDecimal($size);
-
-    .grid-#{$class} {
-        display: grid;
-        gap: #{$size}rem;
-    }
-
-    .gg-#{$class} {
-        gap: #{$size}rem;
-    }
-}
 
 // ------------------------------------------------------------------
 // -- MAGIC CLASSES --

package/src/scss/utilities/_sizes.scss

@@ -89,22 +89,9 @@ $fractional-sizes: (1\/4: 25%, 1\/3: 33.33%, 1\/2: 50%, 3\/4: 75%);
     }
 }
 
-$v-heights: (
-    60: 60vh,
-    80: 80vh,
-    100: 100vh,
-);
-
-// vertical heights
-// ----------------------------
-@each $key, $value in $v-heights {
-    .vh#{$key} {
-        height: $value;
-    }
-}
-
 $max-min-sizes: (
     200: 200px,
+    250: 250px,
     300: 300px,
     400: 400px,
     600: 600px,

package/src/scss/utilities/_spacing.scss

@@ -77,6 +77,11 @@ $magic-margin-y: ((5, 3, 2, 2), ());
 //
 
 //
+
+.c-mt-0 > * {
+    margin-top: 0;
+}
+
 .c-pxy > * {
     padding: 1rem;
 }

package/src/utilities/_grid.scss

@@ -1,11 +1,12 @@
 @use "../config" as *;
 @use "../functions/get" as *;
+@use "../functions/helpers" as *;
 @use "../mixins/media" as *;
 
 $num-grid-cols: get("grid.num-grid-cols", $config);
 
 // ------------------------------------------------------------------
-// -- EQUAL WIDTHS COLUMNS(NON-RESPONSIVE) --
+// -- GRID --
 // ------------------------------------------------------------------
 .grid {
     display: grid;
@@ -16,6 +17,30 @@ $num-grid-cols: get("grid.num-grid-cols", $config);
     gap: get("grid.default-gap", $config);
 }
 
+// ------------------------------------------------------------------
+// -- GRID GAP --
+// ------------------------------------------------------------------
+
+$grid-gap-sizes: (0, 1, 1.25, 1.5, 2, 3, 4, 5) !default;
+
+@each $size in $grid-gap-sizes {
+    $class: escapeDecimal($size);
+
+    .grid-#{$class} {
+        display: grid;
+        gap: #{$size}rem;
+    }
+
+    .gg-#{$class} {
+        gap: #{$size}rem;
+    }
+}
+
+// 05 does not play well in the map
+.gg-05 {
+    gap: 0.5rem;
+}
+
 // ------------------------------------------------------------------
 // -- EQUAL WIDTHS COLUMNS(NON-RESPONSIVE) --
 // ------------------------------------------------------------------
@@ -42,5 +67,8 @@ $num-grid-cols: get("grid.num-grid-cols", $config);
         &cols-3 {
             grid-template-columns: repeat(3, 1fr);
         }
+        &cols-9 {
+            grid-template-columns: repeat(4, 1fr);
+        }
     }
 }

package/src/utilities/_size.scss

@@ -1,22 +1,11 @@
 @use "../mixins/media" as *;
 
-// .md\:w-24 {
-//     @include from-md {
-//         width: 24rem;
-//     }
-// }
+
 
 // ------------------------------------------------------------------
 // -- RESPONSIVE SIZES --
 // ------------------------------------------------------------------
 
-// Create responsive classes
-// - for multiple sizes and multiple values
-
-// @include makeFromBreakpoint(display, map-, "hide", "sm", "md");
-
-// @include makeFromBreakpoint($property, $value, $identifier, $breakpoints...)
-
 @include from-md {
     .md\:w-16 {
         width: 16rem;
@@ -25,20 +14,3 @@
         width: 20rem;
     }
 }
-// @include from-md {
-//     .md\:w-16 {
-//         width: 16rem;
-//     }
-// }
-
-// @include from-lg {
-//     .lg\:w-16 {
-//         width: 16rem;
-//     }
-// }
-
-
-// THIS SYSTEM NEEDS MORE CONSIDERATION !!
-
-// $magic-width-sizes: ((16, "full"), (20, "full"), (24, "full")) !default;
-// @include makeMagicClass(width, ($magic-width-sizes), "w");