nk_jtb 0.0.5 → 0.2.0

package/{src/scss → scss}/utilities/_position.scss

@@ -41,39 +41,60 @@
     bottom: 0;
 }
 
+
+
+// DO NOT ADD TL, TR, BL, BR, JUST USE MULTIPLE CLASSES???
+
 .pos {
-    &-t {
+    &-xy {
         top: 0;
-        left: 0;
-        right: 0;
-    }
-    &-b {
         bottom: 0;
         left: 0;
         right: 0;
     }
-    &-l {
+    &-x {
         left: 0;
-        right: auto; // reset for flex ?? dd requires to shrink ??
-    }
-    &-r {
         right: 0;
-        left: auto; // reset for flex ?? dd requires to shrink ??
     }
-    &-tl {
+    &-y {
         top: 0;
-        left: 0;
+        bottom: 0;
     }
-    &-tr {
+
+    &-t {
         top: 0;
+        left: 0;
         right: 0;
     }
-    &-bl {
+    &-b {
         bottom: 0;
+    }
+    &-l {
         left: 0;
+        right: auto; // reset for flex ?? dd requires to shrink ??
     }
-    &-br {
-        bottom: 0;
+    &-r {
         right: 0;
+        left: auto; // reset for flex ?? dd requires to shrink ??
     }
+//
+//
+//
+//
+    // &-tl {
+    //     top: 0;
+    //     left: 0;
+    // }
+    // &-tr {
+    //     top: 0;
+    //     right: 0;
+    // }
+    // &-bl {
+    //     bottom: 0;
+    //     left: 0;
+    // }
+    // &-br {
+    //     bottom: 0;
+    //     right: 0;
+    // }
 }

package/{src/scss → scss}/utilities/_sizes.scss

@@ -69,9 +69,9 @@ $rem-sizes: (1, 1.5, 2, 3, 4, 5, 10, 12, 95);
 $pixel-sizes: (16, 24, 32, 40, 64, 100, 150, 200, 300, 400, 600);
 @include makeSizeUtilities($pixel-sizes, "px");
 
-// // --------------------------------------------------------------------------
-// // -- FRACTIONAL SIZES --
-// // --------------------------------------------------------------------------
+// --------------------------------------------------------------------------
+// -- FRACTIONAL SIZES --
+// --------------------------------------------------------------------------
 
 // \ is needed to escape the forward slash
 $fractional-sizes: (1\/4: 25%, 1\/3: 33.33%, 1\/2: 50%, 3\/4: 75%);
@@ -82,14 +82,7 @@ $fractional-sizes: (1\/4: 25%, 1\/3: 33.33%, 1\/2: 50%, 3\/4: 75%);
     }
 }
 
-// //     // max-widths
-// //     .minw#{$key} {
-// //         min-width: $value;
-// //     }
-// //     // max-widths
-// //     .maxw#{$key} {
-// //         max-width: $value;
-// //     }
+
 
 $v-heights: (
     // 40: 40vh,
@@ -114,13 +107,20 @@ $max-min-sizes: (
     800: 800px,
 );
 
+
+// 1. use capital so sass does not throw an error
+
 @each $key, $value in $max-min-sizes {
     .minw#{$key} {
-        width: Min($value, 95%); // use capital to sass does not throw an error
+        // this seems very redundant!!
+        // width: Max($value, 1%); // 1.
+        min-width: $value; // 1.
     }
-    // max-widths
+    // max-width, up to max of n%
     .maxw#{$key} {
-        max-width: $value;
+        // Think of the min() value as providing the maximum value
+        // a property can have. chooses the minimum of the two
+        width: Min($value, 95%); // 1.
     }
 }
 

package/{src/scss → scss}/utilities/_spacing.scss

@@ -83,6 +83,25 @@ $padding-y-responsive-sizes: (10, 6, 2), "";
     }
 }
 
+// --------------------------------------------------------------
+// -- RESPONSIVE MAGIC PADDING --
+// --------------------------------------------------------------
+//
+.c-py-5-3-2 > * {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+
+    @include from-tablet {
+        padding-top: 3rem;
+        padding-bottom: 3rem;
+    }
+
+    @include from-desktop {
+        padding-top: 5rem;
+        padding-bottom: 5rem;
+    }
+}
+
 // --------------------------------------------------------------
 // -- CONTENT SPACING --
 // --------------------------------------------------------------
@@ -123,22 +142,9 @@ $padding-y-responsive-sizes: (10, 6, 2), "";
 //
 //
 
-// ==========================================================================
-// -- RESPONSIVE MARGIN AND PADDING UTILITIES --
-// ==========================================================================
-//
-.children-py-5-3-2 > * {
-    padding-top: 2rem;
-    padding-bottom: 2rem;
-
-    @include from-tablet {
-        padding-top: 3rem;
-        padding-bottom: 3rem;
-    }
-
-    @include from-desktop {
-        padding-top: 5rem;
-        padding-bottom: 5rem;
+@include from-desktop {
+    .lg\:space-x > *:not(:first-child) {
+        margin-left: 1rem;
     }
 }
 

package/{src/scss → scss}/utilities/_state.scss

@@ -12,16 +12,16 @@
 // -- HOVER STATE --
 // -----------------------------------
 
-// ROMOVE ME!!
-.hover\:txt-secondary:hover {
-    color: $secondary;
+.hover\:txt-primary:hover {
+    color: $primary;
 }
 
-// just the text
-.hover\:secondary:hover {
+.hover\:txt-secondary:hover {
     color: $secondary;
 }
 
+
+
 // all aspects of state???
 // .state\:secondary {
 //     &:hover {

package/{src/index.html → tests.html}

@@ -13,19 +13,11 @@
 
 <body class="py-3">
 
-    <div class="bx fw6">
-        <a href="">This is a link. There is not hover state!</a> <br>
-        <a class="hover:secondary" href="">This is a link with a hover utility class</a>
-    </div>
-    <div class="bx hover:secondary">
-        <a href="">This is a link. There is not hover state!</a> <br>
-        <a class="" href="">This is a link with a hover utility class</a>
-    </div>
 
 
     <div class="px-5 grid cols-50:50">
 
-        <!-- use flex-basis to override default width -->
+
         <div class="bx">
             <div class="frm-row inline va-t">
                 <label>First Name</label>
@@ -45,7 +37,7 @@
                 <div class="with-icon fg1">
                     <input placeholder="Placeholder...">
                     <svg class="icon">
-                        <use xlink:href="/src/svg/naykel-ui-SVG-sprite.svg#save"></use>
+                        <!-- <use xlink:href="/src/svg/naykel-ui-SVG-sprite.svg#save"></use> -->
                     </svg>
                 </div>
             </div>
@@ -161,12 +153,15 @@
                 <label>Question</label>
                 <textarea class="textarea" placeholder="Explain how we can help you"></textarea>
             </div>
+
             <div class="frm-row">
                 <label class="checkbox">
                     <input type="checkbox">
                     I agree to the <a href="#">terms and conditions</a>
                 </label>
+
             </div>
+
             <div class="frm-row items-end">
                 <button type="submit" class="btn">Submit</button>
             </div>

package/examples/visibility.html

@@ -1,122 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <link rel="icon" href="../images/favicon.ico">
-    <link rel="stylesheet" href="../dist/css/nk_jtb.css">
-    <title>NAYKEL JTB - Visibility Examples</title>
-</head>
-
-<body>
-    <p>Resize the screen to preview see the visibility classes in action.</p>
-    <!-- -on examples -->
-    <section>
-        <!-- hide-on examples -->
-        <div class="flex tac">
-            <div class="col np">
-                <div class="bx red hide-on-phone">hide-on-phone</div>
-            </div>
-            <div class="col np">
-                <div class="bx green hide-on-tablet">hide-on-tablet</div>
-            </div>
-            <div class="col np">
-                <div class="bx blue hide-on-desktop">hide-on-desktop</div>
-            </div>
-            <div class="col np">
-                <div class="bx orange hide-on-widescreen">hide-on-widescreen</div>
-            </div>
-        </div>
-
-        <!-- display-on examples -->
-        <div class="flex tac">
-            <div class="col np">
-                <div class="bx red hidden block-on-phone">{display}-on-phone</div>
-            </div>
-            <div class="col np">
-                <div class="bx green hidden block-on-tablet">{display}-on-tablet</div>
-            </div>
-            <div class="col np">
-                <div class="bx blue hidden block-on-desktop">{display}-on-desktop</div>
-            </div>
-            <div class="col np">
-                <div class="bx orange hidden block-on-widescreen">{display}-on-widescreen</div>
-            </div>
-        </div>
-    </section>
-    <hr class="lg">
-    <!-- -from examples -->
-    <section>
-        <!-- hide-from examples -->
-        <div class="flex tac">
-            <div class="col np">
-                <div class="bx red hide-from-phone">hide-from-phone</div>
-            </div>
-            <div class="col np">
-                <div class="bx green hide-from-tablet">hide-from-tablet</div>
-            </div>
-            <div class="col np">
-                <div class="bx blue hide-from-desktop">hide-from-desktop</div>
-            </div>
-            <div class="col np">
-                <div class="bx orange hide-from-widescreen">hide-from-widescreen</div>
-            </div>
-        </div>
-
-        <!-- display-from examples -->
-        <div class="flex tac">
-            <div class="col np">
-                <div class="bx red hidden block-from-phone">{display}-from-phone</div>
-            </div>
-            <div class="col np">
-                <div class="bx green hidden block-from-tablet">{display}-from-tablet</div>
-            </div>
-            <div class="col np">
-                <div class="bx blue hidden block-from-desktop">{display}-from-desktop</div>
-            </div>
-            <div class="col np">
-                <div class="bx orange hidden block-from-widescreen">{display}-from-widescreen</div>
-            </div>
-        </div>
-    </section>
-    <hr class="lg">
-    <!-- -upto examples -->
-    <section>
-        <!-- hide-upto examples -->
-        <div class="flex tac">
-            <div class="col np">
-                <!-- <div class="bx red hide-upto-phone"></div> -->
-            </div>
-            <div class="col np">
-                <div class="bx green hide-upto-tablet">hide-upto-tablet</div>
-            </div>
-            <div class="col np">
-                <div class="bx blue hide-upto-desktop">hide-upto-desktop</div>
-            </div>
-            <div class="col np">
-                <div class="bx orange hide-upto-widescreen">hide-upto-widescreen</div>
-            </div>
-        </div>
-
-        <!-- display-upto examples -->
-        <div class="flex tac">
-            <div class="col np">
-                <div class="bx red hidden block-upto-phone">{display}-upto-phone</div>
-            </div>
-            <div class="col np">
-                <div class="bx green hidden block-upto-tablet">{display}-upto-tablet</div>
-            </div>
-            <div class="col np">
-                <div class="bx blue hidden block-upto-desktop">{display}-upto-desktop</div>
-            </div>
-            <div class="col np">
-                <div class="bx orange hidden block-upto-widescreen">{display}-upto-widescreen</div>
-            </div>
-        </div>
-    </section>
-
-</body>
-
-</html>

package/scss/_nk_components.scss

@@ -1,32 +0,0 @@
-@use "./base/vars_all" as *;
-@use "./mixins/media" as *;
-
-.fancy-icon-button {
-    text-align: center;
-    position: relative;
-    display: inline-block;
-
-    .#{$icon-class} {
-        height: 24px;
-        width: 24px;
-        padding: 0;
-        // add margin to push the qty badge away
-        // margin: 0.5rem 0.5rem 0;
-    }
-
-    .badge {
-        position: absolute;
-        top: 0px;
-        right: 0px;
-        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);
-    }
-}

package/scss/components/_list.scss

@@ -1,18 +0,0 @@
-@use "../base/vars_all" as *;
-@use "../vars_class_names" as *;
-
-.#{$list-class} {
-    list-style: none;
-    margin: 0; // remove indent
-
-    a {
-        color: $list-link-color;
-        &:where(:hover) {
-            // $list-hover-color;
-            color: $list-link-hover-color;
-        }
-
-
-    }
-
-}

package/scss/components/_table.scss

@@ -1,125 +0,0 @@
-@use "../base/vars_base" as *;
-@use "../vars_class_names" as *;
-
-$table-color: $base-color !default;
-$table-background-color: white !default;
-
-// $table-cell-border: 1px solid $border !default;
-// $table-cell-border-width: 0 0 1px !default;
-// $table-cell-padding: 0.5em 0.75em !default;
-// $table-cell-heading-color: $text-strong !default;
-
-// $table-head-cell-border-width: 0 0 2px !default;
-// $table-head-cell-color: $text-strong !default;
-// $table-foot-cell-border-width: 2px 0 0 !default;
-// $table-foot-cell-color: $text-strong !default;
-
-// $table-head-background-color: transparent !default;
-// $table-body-background-color: transparent !default;
-// $table-foot-background-color: transparent !default;
-
-// $table-row-hover-background-color: $scheme-main-bis !default;
-
-// $table-row-active-background-color: $primary !default;
-// $table-row-active-color: $primary-invert !default;
-
-// $table-striped-row-even-background-color: $scheme-main-bis !default;
-// $table-striped-row-even-hover-background-color: $scheme-main-ter !default;
-
-.#{$table-class} {
-    background-color: $table-background-color;
-    color: $table-color;
-    //   td,
-    //   th
-    //     border: $table-cell-border
-    //     border-width: $table-cell-border-width
-    //     padding: $table-cell-padding
-    //     vertical-align: top
-    //     // Colors
-    //     @each $name, $pair in $table-colors
-    //       $color: nth($pair, 1)
-    //       $color-invert: nth($pair, 2)
-    //       &.is-#{$name}
-    //         background-color: $color
-    //         border-color: $color
-    //         color: $color-invert
-    //     // Modifiers
-    //     &.is-narrow
-    //       white-space: nowrap
-    //       width: 1%
-    //     &.is-selected
-    //       background-color: $table-row-active-background-color
-    //       color: $table-row-active-color
-    //       a,
-    //       strong
-    //         color: currentColor
-    //     &.is-vcentered
-    //       vertical-align: middle
-    //   th
-    //     color: $table-cell-heading-color
-    //     &:not([align])
-    //       text-align: inherit
-    //   tr
-    //     &.is-selected
-    //       background-color: $table-row-active-background-color
-    //       color: $table-row-active-color
-    //       a,
-    //       strong
-    //         color: currentColor
-    //       td,
-    //       th
-    //         border-color: $table-row-active-color
-    //         color: currentColor
-    //   thead
-    //     background-color: $table-head-background-color
-    //     td,
-    //     th
-    //       border-width: $table-head-cell-border-width
-    //       color: $table-head-cell-color
-    //   tfoot
-    //     background-color: $table-foot-background-color
-    //     td,
-    //     th
-    //       border-width: $table-foot-cell-border-width
-    //       color: $table-foot-cell-color
-    //   tbody
-    //     background-color: $table-body-background-color
-    //     tr
-    //       &:last-child
-    //         td,
-    //         th
-    //           border-bottom-width: 0
-    //   // Modifiers
-    //   &.is-bordered
-    //     td,
-    //     th
-    //       border-width: 1px
-    //     tr
-    //       &:last-child
-    //         td,
-    //         th
-    //           border-bottom-width: 1px
-    //   &.is-fullwidth
-    //     width: 100%
-    //   &.is-hoverable
-    //     tbody
-    //       tr:not(.is-selected)
-    //         &:hover
-    //           background-color: $table-row-hover-background-color
-    //     &.is-striped
-    //       tbody
-    //         tr:not(.is-selected)
-    //           &:hover
-    //             background-color: $table-row-hover-background-color
-    //             &:nth-child(even)
-    //               background-color: $table-striped-row-even-hover-background-color
-    //   &.is-narrow
-    //     td,
-    //     th
-    //       padding: 0.25em 0.5em
-    //   &.is-striped
-    //     tbody
-    //       tr:not(.is-selected)
-    //         &:nth-child(even)
-    //           background-color: $table-striped-row-even-background-color
-}

package/scss/dev.scss

@@ -1,6 +0,0 @@
-// "autoprefixer": "^10.4.4",
-.x{
-    background: #000;
-    // background: image-set(url(logo.png) 2x, url(logo.png) 1x);
-    display: flex;
-}

package/scss/mixins/_makeMagicUtilities.scss

@@ -1,25 +0,0 @@
-// --------------------------------------------------------------
-// -- CREATE MAGIC UTILITY CLASSES --
-// --------------------------------------------------------------
-// magic classes add styles to each child of the parent element
-//
-// $property (margin, padding, border ... etc)
-// $className ('m' or 'mar' ... etc)
-//
-//
-// Sample:
-//
-
-// apply single property to direct descendants except for the first-child
-@mixin notTheFirstChild($className, $property, $value) {
-    .#{$className} > :not([hidden]) ~ :not([hidden]) {
-        #{$property}: $value;
-    }
-}
-
-// apply single property to direct descendant
-@mixin allTheChildren($className, $property, $value) {
-    .#{$className} > * {
-        #{$property}: $value;
-    }
-}