@qrsln/lootstrap 22.4.2-beta.0 → 22.4.7-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qrsln/lootstrap",
-  "version": "22.4.2-beta.0",
+  "version": "22.4.7-beta.0",
   "description": "LootStrap is a scss library and is still in beta! There is much to improve!",
   "style": "dist/css/lootstrap.css",
   "sass": "scss/lootstrap.scss",
@@ -47,12 +47,12 @@
   },
   "devDependencies": {
     "autoprefixer": "^10.4.4",
-    "clean-css-cli": "^5.5.2",
+    "clean-css-cli": "^5.6.0",
     "nodemon": "^2.0.15",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.12",
     "postcss-cli": "^9.1.0",
     "rimraf": "^3.0.2",
-    "sass": "^1.49.9"
+    "sass": "^1.49.11"
   }
 }

package/scss/Abstracts/_variables.scss

@@ -14,14 +14,21 @@ $Yellow   : hsl(45,100%,51%) !default;
 $Cyan     : hsl(180,100%,50%) !default;
 $Magenta  : hsl(300,100%, 50%) !default;
 
-$Purple   : hsl(261,51%,51%) !default;
+//$Purple   : hsl(261,51%,51%) !default;
+
+$Purple   : rgb(160,32,240) !default;
+$Violet   : rgb(143,0,255) !default;
+
 $Green    : hsl(134,61%,41%) !default;
 $Maroon   : hsl(331, 74%, 30%) !default;
 $Navy     : hsl(210, 100%, 12%) !default;
 $Teal     : hsl(162,73%,46%) !default;
 $Olive    : hsl(60,100%, 25%) !default;
 $Orange   : hsl(24,93%,50%) !default;
-$Pink     : hsl(324,79%,60%) !default;
+
+//$Pink     : hsl(324,79%,60%) !default;
+$Pink     : rgb(255,192,203) !default;
+
 $Brown    : hsl(0, 33%, 38%) !default;
 $Indigo   : hsl(270, 100%, 25%) !default;
 

package/scss/Architecture/Components/_spinners.scss

@@ -2,6 +2,7 @@
 // Components - Spinners
 // ???
 // ===========================================================================
+@use 'sass:math';
 
 $Customized: false;
 @import "../_color-scheme";
@@ -18,7 +19,7 @@ $Customized: false;
 
   vertical-align: text-bottom;
 
-  border: .25em solid currentColor;
+  border: .25rem solid currentColor;
   border-right-color: transparent;
   border-radius: 50%;
 
@@ -42,6 +43,23 @@ $Customized: false;
   animation: 0.75s linear infinite grow;
 }
 
+.Spinner-group {
+  position: relative;
+  display: inline-flex;
+
+  //border: 1px solid;
+  min-width: 100px;
+  min-height: 100px;
+
+  .Spinner-grow, .Spinner-border {
+    position: absolute;
+    display: inline-flex;
+
+    width: 100%;
+    height: 100%;
+  }
+}
+
 /*
 // Spinner-vortex
 */
@@ -50,8 +68,11 @@ $Customized: false;
   position: relative;
   display: inline-block;
 
-  min-width: 120px;
-  min-height: 120px;
+  min-width: 90px;
+  min-height: 90px;
+
+  width: 100%;
+  height: 100%;
 
   span {
     position: absolute;
@@ -94,3 +115,171 @@ $Customized: false;
     }
   }
 }
+
+/*
+// Spinner color
+*/
+// ROYGBIV or VIBGYOR Rainbow Color Codes: Red, orange, yellow, green, blue, indigo, violet
+//$default-Colors: (1 : $Red, 2 : $Orange, 3 : $Yellow, 4 : $Lime, 5: $Blue, 6 : $Purple, 7 : $Magenta, 8 : $Pink,) !default;
+$default-Colors: (
+        1 : #FF0000, 2 : #FF7F00, 3 : #FFFF00, 4 : #00FF00,
+        5: #0000FF, 6 : #4B0082, 7 : #9400D3, 8 : #FF00FF) !default;
+
+$base-Rates: (1:8%, 2:24%, 3:40%);
+$base-Index: (1:1, 2:2, 3:3, 4:4, 5:3, 6:2, 7:1);
+
+.Spinner-group {
+  .Spinner-border {
+    margin: 0;
+
+    // Defaults
+    &.Spinner-colored, &.Spinner-adaptive {
+      @for $index from 1 through 7 {
+        &:nth-child(7n+#{$index}) {
+          @if ($index>4) {
+            border-left-color: transparent;
+            border-right-color: currentColor;
+          }
+          @if ($index==4) {
+            z-index: 1001;
+
+            border-width: .4rem;
+
+          } @else {
+            z-index: 1000;
+
+            animation-delay: -400ms + 50 * $index;
+            animation-duration: 800ms + 50 * $index;
+
+            &.Separated {
+              margin-left: 2 * (5% * $index - 20%);
+            }
+          }
+        }
+      }
+    }
+
+    &.Spinner-colored {
+      @for $index from 1 through 7 {
+        &:nth-child(7n+#{$index}) {
+          $new-index: map-get($base-Index, $index);
+          $color: map-get($default-Colors, $index);
+          $percent: map-get($base-Rates, $new-index);
+
+          //color: $color;
+
+          @if ($index!=4) {
+            &.Separated {
+              color: hsla(round(hue($color)), round(saturation($color)), round(lightness($color)), $percent);
+            }
+            &.Scaled {
+              //$percent: 8% + 5%* $index;
+              transform: scale(-.09 * $index);
+              border-color: hsla(round(hue($color)), round(saturation($color)), round(lightness($color)), math.div($percent, 2));
+            }
+          }
+        }
+      }
+    }
+
+    &.Spinner-adaptive {
+      @for $index from 1 through 7 {
+        &:nth-child(7n+#{$index}) {
+          $new-index: map-get($base-Index, $index);
+          $percent: map-get($base-Rates, $new-index);
+
+          @if ($index!=4) {
+            &.Separated {
+              color: hsla($Bg-accent-hsl, $percent);
+            }
+            &.Scaled {
+              //$percent: 8% + 5%* $index;
+              transform: scale(-.09 * $index);
+              border-color: hsla($Bg-accent-hsl, math.div($percent, 2));
+            }
+          }
+        }
+      }
+    }
+
+  }
+
+  .Spinner-grow {
+
+    // Defaults
+    &.Spinner-colored, &.Spinner-adaptive {
+      @for $index from 1 through 7 {
+        &:nth-child(7n+#{$index}) {
+          @if ($index==4) {
+            z-index: 1001;
+          } @else {
+            z-index: 1000;
+
+            //&.Separated {
+            margin-left: 2 * (5% * $index - 20%);
+            //}
+          }
+        }
+      }
+    }
+
+    &.Spinner-colored {
+      @for $index from 1 through 7 {
+        &:nth-child(7n+#{$index}) {
+          @if ($index!=4) {
+            $new-index: map-get($base-Index, $index);
+            $color: map-get($default-Colors, $index);
+            $percent: map-get($base-Rates, $new-index);
+
+            color: hsla(round(hue($color)), round(saturation($color)), round(lightness($color)), math.div($percent, 2));
+          }
+        }
+      }
+    }
+
+    &.Spinner-adaptive {
+      @for $index from 1 through 7 {
+        &:nth-child(7n+#{$index}) {
+          @if ($index!=4) {
+            $new-index: map-get($base-Index, $index);
+            $percent: map-get($base-Rates, $new-index);
+
+            color: hsla($Bg-accent-hsl, $percent);
+          }
+        }
+      }
+    }
+
+  }
+
+}
+
+.Spinner-vortex {
+
+  &.Spinner-colored {
+    span {
+      @for $index from 1 through 8 {
+        &:nth-child(7n+#{$index}) {
+          &:before {
+            border-color: hsl(240, 7%, 18%); // Dark
+            background-color: map-get($default-Colors, $index);
+          }
+        }
+      }
+    }
+  }
+
+  &.Spinner-adaptive {
+    span {
+      @for $index from 1 through 8 {
+        &:nth-child(7n+#{$index}) {
+          &:before {
+            border-color: hsl(240, 7%, 18%); // Dark
+            background-color: hsla($Bg-accent-hsl, $index * 12%);
+          }
+        }
+      }
+    }
+  }
+
+}

package/scss/Architecture/Components/_tree-view.scss

@@ -6,40 +6,50 @@
 $Customized: false;
 @import "../_color-scheme";
 
-// https://demos.telerik.com/kendo-ui/treeview/index
+// Css BEM - Block Element Modifier
+// Roots > Trunks > Branches > leaves
 
-.TreeView {
+.Tree-view {
   position: relative;
-  padding: 5px 0;
+  padding-left: 20px;
   margin-bottom: 0.5rem;
 
-  .TreeViewItem {
+  //border: 1px solid black;
+
+  .Tree-separator {
+    //background-color: $Border-color;
+    background-color: hsla($Bg-accent-hsl, .50);
+
+    hr {
+      margin: .25rem 0;
+    }
+  }
+
+  .Tree-branch {
     position: relative;
-    display: block;
-    margin-bottom: 5px;
-
-    &.TreeViewItem-single {
-      .TreeView-leaf {
-        &:hover {
-          color: $Fg-lighter;
-          background-color: $Bg-lighter;
-
-          &.Active {
-            .FaIcon {
-              color: $Bg-accent;
-            }
-          }
-        }
+    display: flex;
+    align-items: center;
+
+    border: 1px solid transparent;
+    border-radius: .25rem;
+    margin: 1px;
+
+    &:not(.Active):not(.Disabled):hover {
+      background-color: hsla($Bg-accent-hsl, .12);
+      border-color: hsla($Bg-accent-hsl, .24);
+
+      + .Tree-trunk{
+        background-color: hsla($Bg-accent-hsl, .06);
       }
     }
 
-    &.TreeViewItem-root {
-      > .TreeView-toggle {
-        margin-left: 0;
-      }
+    &.Active {
+      color: $Fg-accent;
+      background-color: $Bg-accent;
+      border-color: $Bg-accent;
 
-      > .TreeView-children {
-        padding: 0 0 0 35px;
+      .Tree-leaf--icon {
+        color: $Fg-accent !important;
       }
     }
 
@@ -50,79 +60,130 @@ $Customized: false;
       background-color: $Bg-lighter;
     }
 
-    .TreeView-toggle {
-      margin: 4px 4px 4px -18px;
+    .Tree-chevron {
+      display: flex;
+      flex: 1 auto;
+
+      width: 20px;
+      margin-left: -20px;
+
       color: $Bg-accent;
 
-      svg {
-        width: 14px !important;
+      // https://css.gg/chevron-right
+
+      .gg-chevron-down {
+        box-sizing: border-box;
+        position: relative;
+        display: inline-block;
+        transform: scale(1);
+
+        width: 20px;
+        height: 20px;
+
+        border: 2px solid transparent;
+        border-radius: 100px;
+
+        &:after {
+          content: "";
+          display: block;
+          box-sizing: border-box;
+          position: absolute;
+          width: 10px;
+          height: 10px;
+          border-bottom: 2px solid;
+          border-right: 2px solid;
+          transform: rotate(45deg);
+          left: 4px;
+          top: 2px
+        }
       }
-    }
 
-    .TreeView-toggle, .TreeView-checkbox, .TreeView-leaf {
-      display: inline;
+      .gg-chevron-right {
+        box-sizing: border-box;
+        position: relative;
+        display: inline-block;
+        transform: scale(1);
+
+        width: 20px;
+        height: 20px;
+
+        border: 2px solid transparent;
+        border-radius: 100px;
+
+        &:after {
+          content: "";
+          display: block;
+          box-sizing: border-box;
+          position: absolute;
+          width: 10px;
+          height: 10px;
+          border-bottom: 2px solid;
+          border-right: 2px solid;
+          transform: rotate(-45deg);
+          //right: 6px;
+          top: 4px
+        }
+      }
     }
 
-    .TreeView-checkbox {
-      //margin-left: 5px;
+    .Tree-leaf {
+      display: flex;
+      flex: 1 auto;
+      width: calc(100% - 20px);
 
-      &:hover {
-        + .TreeView-leaf {
-          border: 1px solid $Border-color;
-        }
+      padding: 0 5px;
+
+      .Tree-leaf--checkbox {
+        display: inline;
       }
-    }
 
-    .TreeView-leaf {
-      display: inline;
+      .Tree-leaf--content {
+        display: flex;
+        width: 100%;
+
+        align-items: center;
 
-      border: 1px solid transparent;
-      padding: 2px 6px;
+        .Tree-leaf--icon {
+          margin-right: .25rem;
+          color: $Bg-accent;
+        }
 
-      &.Active {
-        color: $Fg-accent;
-        background-color: $Bg-accent;
-        border-color: $Bg-accent;
-        border-radius: .25rem;
+        .Tree-leaf--label {
+        }
 
-        .FaIcon {
-          color: $Fg-accent;
+        .Tree-leaf--caption {
+          margin-left: auto !important;
         }
       }
 
-      .FaIcon {
-        margin-right: .25rem;
-        color: $Bg-accent;
-      }
     }
+  }
 
-    .TreeView-children {
-      position: relative;
-      display: block;
-
-      margin-top: 5px;
-      padding-left: 18px;
+  .Tree-trunk {
+    position: relative;
+    display: block;
 
-      border-left: 1px solid $Border-color;
-      border-bottom: 1px solid $Border-color;
+    &.Expanded {
+      transition: all .3s ease;
+      animation: Keyframe-FadeIn .3s ease-in-out;
 
-      &.Expanded {
-        transition: all .3s ease;
-        animation: fade-in .3s ease-in-out;
-      }
+      padding-left: 20px;
+      border-left: 1px dotted $Border-color;
+      border-bottom: 1px dotted $Border-color;
+    }
 
-      &.Collapsed {
-        display: none;
-      }
+    &.Collapsed {
+      display: none;
     }
+
   }
 }
 
-@keyframes fade-in {
+@keyframes Keyframe-FadeIn {
   from {
     opacity: 0;
   }
   to {
     opacity: 1;
   }
-}
+}

package/scss/_header.scss

@@ -1,8 +1,8 @@
 
 /*!
- * CSS Compiled on: 2022-04-02
+ * CSS Compiled on: 2022-04-07
  *
- * Lootstrap v22.4.2-beta.0 (https://github.com/krsln/Lootstrap/)
+ * Lootstrap v22.4.7-beta.0 (https://github.com/krsln/Lootstrap/)
  * Copyright 2022 Qrsln.
  * Licensed under MIT (https://github.com/krsln/Lootstrap/blob/master/LICENSE)
 */