@qrsln/lootstrap 22.2.2-beta.0 → 22.2.7-beta.0

package/scss/Architecture/Components/_tooltip.scss

@@ -0,0 +1,135 @@
+// ===========================================================================
+// Components - Tooltip
+// ===========================================================================
+
+$component-Name: $var-Prefix + 'caret-';
+@import "../_theme-customized";
+
+.Tooltip {
+  position: absolute;
+  //position: relative;
+  display: flex;
+  z-index: 1000;
+
+  padding: .25rem .5rem;
+
+  color: $fg-Dark;
+  background-color: $bg-Dark;
+
+  border: 1px solid $bg-Darkest;
+  box-shadow: $Shadow;
+
+  &.Tooltip-outline {
+    color: $fg-Lightest;
+    background-color: $bg-Lightest;
+
+    //border: .125rem solid $bg-Darkest;
+    border: 1px solid $bg-Darkest;
+  }
+
+  &:before, &:after {
+    content: '';
+    display: block;
+    position: absolute;
+    border-style: solid;
+
+    width: 0;
+    height: 0;
+
+    z-index: 1;
+    clear: both;
+
+    // caret-size 1:  6px
+    border-width: 6px;
+  }
+}
+
+.Tooltip-rounded {
+  border-radius: $Border-radius;
+}
+
+/*
+// Caret directions
+*/
+
+.Tooltip-t, .Tooltip-b {
+  $caret-size: 6px; // caret-size 1:  6px
+
+  &:after {
+    left: calc(50% - #{$caret-size});
+  }
+
+  &:before {
+    left: calc(50% - #{$caret-size});
+  }
+}
+
+.Tooltip-r, .Tooltip-l {
+  $caret-size: 6px; // caret-size 1:  6px
+
+  &:after {
+    top: calc(50% - #{$caret-size});
+  }
+
+  &:before {
+    top: calc(50% - #{$caret-size});
+  }
+}
+
+/*
+// Caret-darker
+*/
+
+// &:after is bg, &:before is border
+$caret-before-color: $bg-Darkest;
+$caret-after-color: $bg-Dark;
+
+.Tooltip-t {
+  &:after {
+    bottom: 100%;
+    border-color: transparent transparent $caret-after-color transparent;
+  }
+
+  &:before {
+    bottom: calc(100% + 1px);
+    border-color: transparent transparent $caret-before-color transparent;
+  }
+}
+
+.Tooltip-r {
+  &:after {
+    left: 100%;
+    border-color: transparent transparent transparent $caret-after-color;
+  }
+
+  &:before {
+    left: calc(100% + 1px);
+    border-color: transparent transparent transparent $caret-before-color;
+  }
+}
+
+.Tooltip-b {
+  &:after {
+    top: 100%;
+    border-color: $caret-after-color transparent transparent transparent;
+  }
+
+  &:before {
+    top: calc(100% + 1px);
+    border-color: $caret-before-color transparent transparent transparent;
+  }
+}
+
+.Tooltip-l {
+  &:after {
+    right: 100%;
+    border-color: transparent $caret-after-color transparent transparent;
+  }
+
+  &:before {
+    right: calc(100% + 1px);
+    border-color: transparent $caret-before-color transparent transparent;
+  }
+}
+
+

package/scss/Architecture/Utils/_filters.scss

@@ -78,7 +78,9 @@ $filter-Colors: (
         "warning" : $filter-Warning,
         "danger" : $filter-Danger,
         "light" : $filter-Light,
-        "dark" : $filter-Dark
+        "dark" : $filter-Dark,
+  //NONE
+        "none" : $filter-Dark,
 );
 
 /*

package/scss/Architecture/Utils/_position.scss

@@ -0,0 +1,43 @@
+// ===========================================================================
+// Utils - Positioning
+// Define the edge positioning anchors of the position utilities.
+// ===========================================================================
+
+$position-values: (0: 0, 50: 50%, 100: 100%) !default;
+
+$utilities-Positioning: () !default;
+$utilities-Positioning: (
+        "Position": (
+                Prefix: Position, Properties: position, Important: true,
+                Values: (static relative absolute fixed sticky)
+        ),
+        "Top": (Prefix: Top, Properties: top, Important: true, Values: $position-values),
+        "Bottom": (Prefix: Bottom, Properties: bottom, Important: true, Values: $position-values),
+        "Start": (Prefix: Start, Properties: left, Important: true, Values: $position-values),
+        "End": (Prefix: End, Properties: right, Important: true, Values: $position-values),
+        "Translate-middle": (
+                Prefix: Translate-middle, Properties: transform, Important: true,
+                Values: (null: translate(-50%, -50%), x: translateX(-50%), y: translateY(-50%),)
+        ),
+);
+
+@include Utilities($utilities-Positioning);
+
+// ===========================================================================
+// Border
+// ===========================================================================
+
+/*
+// Position
+*/
+.Position-static, .Position-relative, .Position-absolute, .Position-fixed, .Position-sticky {
+}
+
+.Top-0, .Top-50, .Top-100,
+.Bottom-0, .Bottom-50, .Bottom-100,
+.Start-0, .Start-50, .Start-100,
+.End-0, .End-50, .End-100 {
+}
+
+.Translate-middle, .Translate-middle-x, .Translate-middle-y {
+}

package/scss/Architecture/Utils/_utilities.scss

@@ -53,13 +53,7 @@ $utilities: (
         "Box Shadow": (
                 Prefix: Shadow, Properties: box-shadow, Important: true, Values: $Shadow-map
         ),
-  /*
-  // Position
-  */
-  //"Position": (
-  //        Prefix: Position, Properties: position, Important: true,
-  //        Values: (static relative absolute fixed sticky)
-  //),
+
   /*
   // Sizing Width, Height
   */

package/scss/Architecture/__dir-components.scss

@@ -11,6 +11,7 @@
 @import "Components/themed";
 
 @import "Components/alert";
+@import "Components/badge";
 @import "Components/breadcrumb";
 @import "Components/button-close";
 @import "Components/button-group";
@@ -32,6 +33,7 @@
 @import "Components/timeline";
 @import "Components/timer";
 @import "Components/toasts";
+@import "Components/tooltip";
 @import "Components/tree-view";
 
 /*
@@ -49,12 +51,10 @@
 // Components - TODOs
 */
 
-@import "Components/TODO/badge";
 @import "Components/TODO/dropdown";
 @import "Components/TODO/navbar";
 @import "Components/TODO/popover";
 @import "Components/TODO/tables";
-@import "Components/TODO/tooltip";
 
 /*
 - Reboot

package/scss/Architecture/__dir-utils.scss

@@ -6,8 +6,9 @@
 
 @import "Utils/border"; // Border, Rounded
 @import "Utils/color"; // Bg-colors & Text-colors & Border-colors
-@import "Utils/spacing"; // Margin, Padding
 @import "Utils/filters"; // svg colors, blur, drop-shadow
+@import "Utils/position"; // Positioning
+@import "Utils/spacing"; // Margin, Padding
 
 @import "Utils/text"; // TODO
 @import "Utils/utilities"; // rest

package/scss/Architecture/_anim.scss

@@ -6,9 +6,9 @@
 // Duration
 */
 
-@each $val in (500, 750, 2000, 3000) {
+@each $val in (100, 200, 300, 500, 750, 1000, 1500) {
   .Anim-dur-#{$val}ms {
-    --anim-dur: #{$val}ms;
+    --#{$var-Prefix}anim-dur: #{$val}ms;
   }
 }
 
@@ -19,9 +19,9 @@
 // Iteration
 */
 
-@each $val in (1, 2, 3, 4, 5) {
+@each $val in (infinite, 1, 2, 3, 4, 5) {
   .Anim-repeat-#{$val} {
-    --anim-iteration: #{$val};
+    --#{$var-Prefix}anim-iteration: #{$val};
   }
 }
 
@@ -33,8 +33,8 @@
 */
 
 .Anim {
-  animation-duration: #{var(--anim-dur, 1s)};
-  animation-iteration-count: #{var(--anim-iteration, infinite)};
+  animation-duration: #{var(--#{$var-Prefix}anim-dur, 500ms)};
+  animation-iteration-count: #{var(--#{$var-Prefix}anim-iteration, 1)};
 
   animation-timing-function: linear;
   animation-fill-mode: both
@@ -115,9 +115,12 @@
   //to {
   //  transform: rotate(360deg);
   //}
-  100% { transform: rotate(360deg); }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
+//noinspection CssInvalidFunction
 @keyframes spin-CCW {
   0% {
     transform: rotateZ(0deg);
@@ -169,6 +172,7 @@
 }
 
 // credit: https://github.com/animate-css/animate.css/blob/main/source/attention_seekers/rubberBand.css
+//noinspection CssInvalidFunction
 @keyframes rubberBand {
   from {
     transform: scale3d(1, 1, 1);
@@ -200,6 +204,7 @@
 }
 
 // credit: https://github.com/animate-css/animate.css/blob/main/source/attention_seekers/bounce.css
+//noinspection CssInvalidFunction
 @keyframes bounce {
   from,
   20%,
@@ -231,6 +236,7 @@
 }
 
 // credit: https://github.com/animate-css/animate.css/blob/main/source/attention_seekers/jello.css
+//noinspection CssInvalidFunction
 @keyframes jello {
   from,
   11.1%,
@@ -268,6 +274,7 @@
 }
 
 // credit: https://github.com/animate-css/animate.css/blob/main/source/attention_seekers/swing.css
+//noinspection CssInvalidFunction
 @keyframes swing {
   20% {
     transform: rotate3d(0, 0, 1, 15deg);
@@ -291,6 +298,7 @@
 }
 
 // credit: https://github.com/animate-css/animate.css/blob/main/source/attention_seekers/shakeX.css
+//noinspection CssInvalidFunction
 @keyframes shakeX {
   from,
   to {
@@ -314,6 +322,7 @@
 }
 
 // credit: https://github.com/animate-css/animate.css/blob/main/source/attention_seekers/shakeY.css
+//noinspection CssInvalidFunction
 @keyframes shakeY {
   from,
   to {
@@ -337,6 +346,7 @@
 }
 
 // credit: https://github.com/animate-css/animate.css/blob/main/source/attention_seekers/wobble.css
+//noinspection CssInvalidFunction
 @keyframes wobble {
   from {
     transform: translate3d(0, 0, 0);

package/scss/_header.scss

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

package/scss/Architecture/Components/TODO/_badge.scss

@@ -1,7 +0,0 @@
-// ===========================================================================
-// Components - Badge
-// ===========================================================================
-
-.Badge {
-
-}

package/scss/Architecture/Components/TODO/_tooltip.scss

@@ -1,7 +0,0 @@
-// ===========================================================================
-// Components - Tooltip
-// ===========================================================================
-
-.Tooltip {
-
-}