nk_jtb 0.0.2 → 0.0.5

package/scss/mixins/_makeMagicUtilities.scss

@@ -0,0 +1,25 @@
+// --------------------------------------------------------------
+// -- 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;
+    }
+}

package/{assets → src}/images/logo.svg

@@ -1,25 +1,25 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	  viewBox="0 0 257.14 74"  xml:space="preserve">
-<g>
-	<polyline fill="#D72638" points="145.914,42.262 140.211,48.402 140.211,63.604 129.244,63.604 129.244,10.394 140.211,10.394
-		140.211,34.514 145.037,27.9 158.6,10.394 172.095,10.394 153.193,34.039 172.641,63.604 159.59,63.604 145.914,42.262 	"/>
-	<polyline fill="#D72638" points="206.746,40.545 185.688,40.545 185.688,54.797 210.4,54.797 210.4,63.604 174.72,63.604
-		174.72,10.394 210.332,10.394 210.332,19.276 185.688,19.276 185.688,31.956 206.746,31.956 206.746,40.545 	"/>
-	<polyline fill="#D72638" points="223.452,54.797 246.742,54.797 246.742,63.604 212.484,63.604 212.484,10.394 223.452,10.394
-		223.452,54.797 	"/>
-	<polyline fill="#13365B" points="104.095,34.366 115.171,10.394 127.163,10.394 109.687,44.311 109.687,63.604 98.536,63.604
-		98.536,44.311 81.061,10.394 93.09,10.394 104.095,34.366 	"/>
-	<polygon fill="none" points="63.648,43.761 76.958,43.761 70.268,23.842 	"/>
-	<path fill="#13365B" d="M75.348,10.394H65.185L45.369,63.604h11.662l3.657-10.963h19.229l3.693,10.963h11.662L75.348,10.394z
-		 M63.648,43.761l6.619-19.919l6.69,19.919H63.648z"/>
-	<path fill="#D72638" d="M248.82,74c4.59,0,8.318-3.726,8.318-8.316l0,0V8.316c0-4.593-3.729-8.316-8.318-8.316l0,0H103.208
-		l24.959,8.316h118.575c1.147,0,2.078,0.931,2.078,2.078l0,0v26.604v26.605c0,1.147-0.931,2.08-2.078,2.08l0,0h-87.379L134.404,74
-		H248.82z"/>
-	<path fill="#13365B" d="M43.288,63.604H32.32L10.97,28.594v35.009c0,1.147,0.932,2.08,2.079,2.08l0,0h146.314L134.404,74H8.321
-		c-4.593,0-8.319-3.726-8.319-8.316l0,0v-55.29H10.97l21.388,35.083V8.316c0-4.593,3.729-8.316,8.32-8.316l0,0h62.53l24.959,8.316
-		H45.369c-1.147,0-2.081,0.931-2.081,2.078l0,0V63.604z"/>
-</g>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	  viewBox="0 0 257.14 74"  xml:space="preserve">
+<g>
+	<polyline fill="#D72638" points="145.914,42.262 140.211,48.402 140.211,63.604 129.244,63.604 129.244,10.394 140.211,10.394
+		140.211,34.514 145.037,27.9 158.6,10.394 172.095,10.394 153.193,34.039 172.641,63.604 159.59,63.604 145.914,42.262 	"/>
+	<polyline fill="#D72638" points="206.746,40.545 185.688,40.545 185.688,54.797 210.4,54.797 210.4,63.604 174.72,63.604
+		174.72,10.394 210.332,10.394 210.332,19.276 185.688,19.276 185.688,31.956 206.746,31.956 206.746,40.545 	"/>
+	<polyline fill="#D72638" points="223.452,54.797 246.742,54.797 246.742,63.604 212.484,63.604 212.484,10.394 223.452,10.394
+		223.452,54.797 	"/>
+	<polyline fill="#13365B" points="104.095,34.366 115.171,10.394 127.163,10.394 109.687,44.311 109.687,63.604 98.536,63.604
+		98.536,44.311 81.061,10.394 93.09,10.394 104.095,34.366 	"/>
+	<polygon fill="none" points="63.648,43.761 76.958,43.761 70.268,23.842 	"/>
+	<path fill="#13365B" d="M75.348,10.394H65.185L45.369,63.604h11.662l3.657-10.963h19.229l3.693,10.963h11.662L75.348,10.394z
+		 M63.648,43.761l6.619-19.919l6.69,19.919H63.648z"/>
+	<path fill="#D72638" d="M248.82,74c4.59,0,8.318-3.726,8.318-8.316l0,0V8.316c0-4.593-3.729-8.316-8.318-8.316l0,0H103.208
+		l24.959,8.316h118.575c1.147,0,2.078,0.931,2.078,2.078l0,0v26.604v26.605c0,1.147-0.931,2.08-2.078,2.08l0,0h-87.379L134.404,74
+		H248.82z"/>
+	<path fill="#13365B" d="M43.288,63.604H32.32L10.97,28.594v35.009c0,1.147,0.932,2.08,2.079,2.08l0,0h146.314L134.404,74H8.321
+		c-4.593,0-8.319-3.726-8.319-8.316l0,0v-55.29H10.97l21.388,35.083V8.316c0-4.593,3.729-8.316,8.32-8.316l0,0h62.53l24.959,8.316
+		H45.369c-1.147,0-2.081,0.931-2.081,2.078l0,0V63.604z"/>
+</g>
+</svg>

package/src/index.html

@@ -0,0 +1,257 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="icon" href="./images/favicon.ico">
+    <link rel="stylesheet" href="../dist/css/jtb.css">
+    <title>NAYKEL - JTB</title>
+</head>
+
+
+<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>
+                <div class="flex-col fg1">
+                    <input type="text" placeholder="First Name">
+                    <div class="help"> <small>This is the help text!</small> </div>
+                </div>
+            </div>
+            <div class="frm-row inline">
+                <label>Email</label>
+                <input type="email" placeholder="Email">
+            </div>
+
+            <!-- with form row and with label -->
+            <div class="frm-row inline">
+                <label for="">Birthday</label>
+                <div class="with-icon fg1">
+                    <input placeholder="Placeholder...">
+                    <svg class="icon">
+                        <use xlink:href="/src/svg/naykel-ui-SVG-sprite.svg#save"></use>
+                    </svg>
+                </div>
+            </div>
+
+            <div class="frm-row inline">
+                <label>Phone</label>
+                <input type="tel" placeholder="Your phone number">
+            </div>
+
+            <div class="frm-row inline">
+                <label class="w-2">Department</label>
+                <select>
+                    <option>Business development</option>
+                    <option>Marketing</option>
+                    <option>Sales</option>
+                </select>
+            </div>
+
+            <div class="frm-row inline">
+                <label>Question?</label>
+                <div class="space-x">
+                    <label>
+                        <input type="radio" name="member"> Yes
+                    </label>
+                    <label>
+                        <input type="radio" name="member"> No
+                    </label>
+                </div>
+            </div>
+            <div class="frm-row inline">
+                <label>Another Question?</label>
+                <div class="space-x">
+                    <label>
+                        <input type="radio" name="member"> Yes
+                    </label>
+                    <label>
+                        <input type="radio" name="member"> No
+                    </label>
+                    <div class="help"> <small>This is the help text!</small> </div>
+                </div>
+            </div>
+
+            <div class="frm-row">
+                <label>Subject</label>
+                <input type="text" placeholder="e.g. Partnership opportunity">
+            </div>
+            <div class="frm-row">
+                <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>
+        </div>
+
+        <!-- horizontal form -->
+        <div class="bx">
+            <div class="grid cols-2">
+                <div class="frm-row">
+                    <label>First Name</label>
+                    <input type="text" placeholder="First Name">
+                    <div class="help"> <small>This is the help text!</small> </div>
+                </div>
+                <div class="frm-row">
+                    <label>Email</label>
+                    <input type="email" placeholder="Email">
+                </div>
+            </div>
+            <div class="frm-row">
+                <label>Phone</label>
+                <input type="tel" placeholder="Your phone number">
+            </div>
+            <div class="frm-row">
+                <label>Department</label>
+                <select>
+                    <option>Business development</option>
+                    <option>Marketing</option>
+                    <option>Sales</option>
+                </select>
+            </div>
+            <div class="frm-row">
+                <label>Question?</label>
+                <div class="space-x">
+                    <label>
+                        <input type="radio" name="member"> Yes
+                    </label>
+                    <label>
+                        <input type="radio" name="member"> No
+                    </label>
+                </div>
+            </div>
+            <div class="frm-row">
+                <label>Question?</label>
+                <!-- remove div for vertical -->
+                <label>
+                    <input type="radio" name="member"> Yes
+                </label>
+                <label>
+                    <input type="radio" name="member"> No
+                </label>
+            </div>
+            <div class="frm-row">
+                <label>Subject</label>
+                <input type="text" placeholder="e.g. Partnership opportunity">
+            </div>
+            <div class="frm-row">
+                <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>
+        </div>
+
+    </div>
+
+    <div class="container">
+
+
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia consectetur laudantium natus nesciunt eligendi obcaecati, aliquam optio. Doloremque nostrum architecto harum quas, delectus ipsum hic nisi dicta natus corrupti reprehenderit repellendus voluptate optio sapiente sunt tenetur accusantium. Amet nihil nam inventore aspernatur aut. Ducimus tempora dignissimos minus obcaecati laudantium culpa? Earum error libero pariatur ea neque minima voluptas et omnis corrupti! Corrupti optio dolore, quod molestias praesentium ducimus perspiciatis beatae tempora. Veritatis error rerum sint praesentium temporibus sit aliquid. Ut sit quo vero. Dolores, esse ipsam! Libero voluptas quo iusto cupiditate cum vero inventore sint tenetur sapiente nesciunt! Excepturi, velit.</p>
+
+        <div class="grid cols-3-3-1">
+            <div class="bx">
+                <div class="bx-title">Box Title</div>
+                <p class="mt-2">Lorem ipsum dolor sit amet dipso consectetur adipisicing elit. Tempore, quibusdam.</p>
+            </div>
+            <div class="bx">
+                <div class="bx-title">Box Title</div>
+                <p class="mt-2">Lorem ipsum dolor sit amet dipso consectetur adipisicing elit. Tempore, quibusdam.</p>
+            </div>
+            <div class="bx">
+                <div class="bx-title">Box Title</div>
+                <p class="mt-2">Lorem ipsum dolor sit amet dipso consectetur adipisicing elit. Tempore, quibusdam.</p>
+            </div>
+        </div>
+
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero architecto repudiandae, ab esse voluptatem animi, rem earum omnis ducimus dicta qui deleniti? Eligendi iusto iste inventore consequuntur eveniet tempora, neque exercitationem fuga assumenda a corrupti sint ducimus. Delectus ratione temporibus ea, nemo aperiam soluta quod inventore totam voluptatibus odio deleniti. Ea nobis delectus necessitatibus facere unde vero quam aliquam, quidem fugit laborum ut voluptatum nulla iure ratione natus provident voluptatem.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, dignissimos consectetur. Vel, itaque eligendi reprehenderit iure quidem consequuntur commodi dolorem, adipisci asperiores pariatur nisi assumenda architecto, maxime possimus cumque error ratione odio voluptatum dicta. Fuga, laudantium! Modi saepe debitis ducimus cupiditate sit labore id animi!</p>
+
+        <div class="grid cols-3-3-1">
+            <div class="bx">
+                <div class="bx-title">Box Title</div>
+                <p>Lorem ipsum dolor sit amet dipso consectetur adipisicing elit. Tempore, quibusdam.</p>
+            </div>
+            <div class="bx">
+                <div class="bx-title">Box Title</div>
+                <p>Lorem ipsum dolor sit amet dipso consectetur adipisicing elit. Tempore, quibusdam.</p>
+            </div>
+            <div class="bx">
+                <div class="bx-title">Box Title</div>
+                <p>Lorem ipsum dolor sit amet dipso consectetur adipisicing elit. Tempore, quibusdam.</p>
+            </div>
+        </div>
+    </div>
+    <div class="container">
+        <h1>Page Heading</h1>
+        <p class="lead">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aut quisquam maiores, sint officia soluta placeat, quia ipsa quam pariatur ipsam facilis fugiat cum deserunt eum. Voluptatibus velit et temporibus. Magni?</p>
+
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia consectetur laudantium natus nesciunt eligendi obcaecati, aliquam optio. Doloremque nostrum architecto harum quas, delectus ipsum hic nisi dicta natus corrupti reprehenderit repellendus voluptate optio sapiente sunt tenetur accusantium. Amet nihil nam inventore aspernatur aut. Ducimus tempora dignissimos minus obcaecati laudantium culpa? Earum error libero pariatur ea neque minima voluptas et omnis corrupti! Corrupti optio dolore, quod molestias praesentium ducimus perspiciatis beatae tempora. Veritatis error rerum sint praesentium temporibus sit aliquid. Ut sit quo vero. Dolores, esse ipsam! Libero voluptas quo iusto cupiditate cum vero inventore sint tenetur sapiente nesciunt! Excepturi, velit.</p>
+
+        <div class="grid cols-3-3-1">
+            <div class="bx">
+                <div class="bx-title">Box Title</div>
+                <p class="mt-2">Lorem ipsum dolor sit amet dipso consectetur adipisicing elit. Tempore, quibusdam.</p>
+            </div>
+            <div class="bx">
+                <div class="bx-title">Box Title</div>
+                <p class="mt-2">Lorem ipsum dolor sit amet dipso consectetur adipisicing elit. Tempore, quibusdam.</p>
+            </div>
+            <div class="bx">
+                <div class="bx-title">Box Title</div>
+                <p class="mt-2">Lorem ipsum dolor sit amet dipso consectetur adipisicing elit. Tempore, quibusdam.</p>
+            </div>
+        </div>
+
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero architecto repudiandae, ab esse voluptatem animi, rem earum omnis ducimus dicta qui deleniti? Eligendi iusto iste inventore consequuntur eveniet tempora, neque exercitationem fuga assumenda a corrupti sint ducimus. Delectus ratione temporibus ea, nemo aperiam soluta quod inventore totam voluptatibus odio deleniti. Ea nobis delectus necessitatibus facere unde vero quam aliquam, quidem fugit laborum ut voluptatum nulla iure ratione natus provident voluptatem.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, dignissimos consectetur. Vel, itaque eligendi reprehenderit iure quidem consequuntur commodi dolorem, adipisci asperiores pariatur nisi assumenda architecto, maxime possimus cumque error ratione odio voluptatum dicta. Fuga, laudantium! Modi saepe debitis ducimus cupiditate sit labore id animi!</p>
+
+        <div class="grid cols-3-3-1">
+            <div class="bx">
+                <div class="bx-title">Box Title</div>
+                <p>Lorem ipsum dolor sit amet dipso consectetur adipisicing elit. Tempore, quibusdam.</p>
+            </div>
+            <div class="bx">
+                <div class="bx-title">Box Title</div>
+                <p>Lorem ipsum dolor sit amet dipso consectetur adipisicing elit. Tempore, quibusdam.</p>
+            </div>
+            <div class="bx">
+                <div class="bx-title">Box Title</div>
+                <p>Lorem ipsum dolor sit amet dipso consectetur adipisicing elit. Tempore, quibusdam.</p>
+            </div>
+        </div>
+    </div>
+
+    <hr>
+
+</body>

package/src/scss/_nk.scss

@@ -0,0 +1,104 @@
+@use "./base/vars_all" as *;
+@use "./mixins/media" as *;
+
+// ==========================================================================
+// -- NAYKEL STYLES --
+// ==========================================================================
+// These styles are specific to naykel template layouts
+
+$header-bg: #074464 !default;
+
+$main-bg: none !default;
+
+$footer-bg: #303030 !default;
+$footer-text-color: rgb(204, 204, 204) !default;
+
+$copyright-bg: darken($footer-bg, 2%) !default;
+$copyright-text-color: $footer-text-color !default;
+
+// ---------------- BEFORE YOU DO ANYTHING CRAZY ----------------
+//
+// It is best not to add padding to the main mk-elements, as it
+// makes it more difficult to add extra elements.
+//
+// ---------------- BEFORE YOU DO ANYTHING CRAZY ----------------
+
+// NK::TD this could be made into a special layout because it
+// could be a common pattern. Another example would be the navbar
+
+#nk-header {
+    // background-color: $header-bg;
+    // When is adding padding here not a good idea?
+    // Why do I keep changing my mind?
+    // Should I just use a utility class?
+    padding: 2rem;
+}
+
+#nk-header,
+#nk-header > .#{$container-class} {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    grid-gap: 2.5rem;
+    flex-wrap: wrap;
+
+    #search {
+        display: flex;
+        flex: 1 1 auto;
+
+        input {
+            width: 100%;
+            margin-right: 4px;
+        }
+
+        @include up-to-desktop {
+            flex: 1 1 100%;
+            order: 3;
+        }
+    }
+}
+
+#nk-main {
+    flex: 1; // 1. allow to grow to fill height
+    background-color: $main-bg;
+    margin: 0;
+}
+
+#nk-footer {
+    background-color: $footer-bg;
+    margin-top: auto; // forces footer to the bottom
+    color: #ccc;
+
+    a {
+        color: #ccc;
+        font-size: 0.8rem;
+
+        &:hover {
+            color: #ddd;
+        }
+    }
+}
+
+.copyright {
+    color: $copyright-text-color;
+    background-color: $copyright-bg;
+    padding: 0.5rem;
+    text-align: center;
+    font-size: 0.9rem;
+    border: 0; // remove border from colour scheme
+    width: 100%;
+}
+
+.logo a:hover {
+    background: none;
+}
+
+// ==========================================================================
+// -- NAYKEL ADMIN STYLES --
+// ==========================================================================
+
+.nk-admin {
+    .navbar {
+        background-image: linear-gradient(to right top, #20242a, #1e1f27, #1e1a23, #1f141d, #1f0e16, #250e15, #2c0e12, #310f0c, #40140e, #4e1a0e, #5c210c, #692906);
+    }
+}