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

package/scss/Architecture/Roots/_root.scss

@@ -0,0 +1,49 @@
+// ===========================================================================
+// Base - Root
+// ===========================================================================
+
+:root {
+  // Custom variable values only support SassScript inside `#{}`.
+  /* Color palette */
+  @each $colorKey, $colorValue in $colors-all {
+    --#{$var-Prefix}#{to-lower-case($colorKey)}: #{$colorValue};
+  }
+
+  //// Theme-light
+  //--ls-bg: #f9fafb;
+  //--ls-bg-hsl: 210deg, 20%, 98%;
+  //--ls-bg-body: #d1d9e0;
+  //--ls-bg-active: #3692fc;
+  //--ls-bg-active-hsl: 212deg, 97%, 60%;
+  //--ls-bg-surface: white;
+  //--ls-bg-lightest: #f9fafb;
+  //--ls-bg-light: #f6f7f9;
+  //--ls-bg-dark: #f0f2f5;
+  //--ls-bg-darkest: #e0e6eb;
+  //--ls-fg-muted: #a7afb9;
+  //--ls-fg-body: black;
+  //--ls-fg-active: white;
+  //--ls-fg-surface: black;
+  //--ls-fg-lightest: black;
+  //--ls-fg-light: black;
+  //--ls-fg-dark: black;
+  //--ls-fg-darkest: black;
+  //--ls-shadow-color-rgb: 0, 0, 0;
+  //--ls-border-alpha: 1;
+  //--ls-border-color: hsla(210deg, 20%, 90%, var(--ls-border-alpha, 1));
+  //--ls-border-color-hsl: 210deg, 20%, 90%;
+
+  // Others
+  --#{$var-Prefix}border-radius: #{$Rounded};
+  --#{$var-Prefix}border-alpha: 1; // DONT TOUCH THIS :p
+
+  /* Font */
+  --#{$var-Prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
+  --#{$var-Prefix}font-monospace: #{inspect($font-family-monospace)};
+
+}
+
+body {
+  color: var(--#{$var-Prefix}fg-body);
+  background-color: var(--#{$var-Prefix}bg-body);
+}

package/scss/Architecture/Roots/_shape.scss

@@ -0,0 +1,92 @@
+// ===========================================================================
+// Layout - Shapes
+// ===========================================================================
+
+.Sqr, .Circle, .Rect {
+  margin: .25rem;
+
+  // Centered Content of all shapes
+  .Content {
+    position: absolute;
+    display: flex;
+
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+  }
+}
+
+.Rect {
+  position: relative;
+  display: block;
+  flex: 1 0 auto;
+
+  &:before {
+    content: "";
+    display: block;
+    padding-top: 50%;
+  }
+}
+
+.Sqr, .Circle {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+
+  width: 100%;
+  //background-color: hsla($Bg-accent-hsl, 0.10);
+
+  &.Circle {
+    border-radius: 50%;
+  }
+
+  &:before {
+    content: "";
+    display: block;
+    padding-top: 100%;
+  }
+}
+
+/*
+// Diamond - With Sqr
+*/
+.Diamond {
+  margin: 0;
+
+  transform: rotate(45deg);
+
+  .Content {
+    transform: rotate(-45deg);
+  }
+}
+
+/*
+// Parallelogram - With Rect & Sqr
+*/
+
+.Skew-20 {
+  margin-left: 30px;
+  margin-right: 30px;
+
+  transform: skew(20deg);
+
+  .Content {
+    transform: skew(-20deg);
+  }
+}
+
+.Skew-20n {
+  margin-left: 30px;
+  margin-right: 30px;
+
+  transform: skew(-20deg);
+
+  .Content {
+    transform: skew(20deg);
+  }
+}

package/scss/Architecture/Roots/_skeleton.scss

@@ -0,0 +1,271 @@
+// ===========================================================================
+// Layout - Skeleton / Placeholder
+// ===========================================================================
+
+$Customized: false;
+@import "../_color-scheme";
+
+
+/*
+// Placeholder (.Ph-*)
+*/
+
+.Ph-media,
+.Ph-line {
+  position: relative;
+  display: block;
+
+  background-color: hsla($Bg-accent-hsl, 0.12);
+
+  border-radius: .25rem;
+  padding: 5px;
+  margin-bottom: 4px;
+}
+
+.Ph-media {
+  display: inline-block;
+
+  width: 100%;
+}
+
+.Ph-paragraph {
+  position: relative;
+  display: block;
+
+  margin-top: 5px;
+  margin-bottom: 5px;
+
+  &.Indentation {
+    .Ph-line {
+      &:first-child {
+        width: 92%;
+        float: right;
+      }
+
+      &:nth-child(2) {
+        clear: both;
+      }
+    }
+  }
+
+  .Ph-line {
+    transform: scale(1, 0.60);
+
+    &:last-child {
+      width: 80% - random(40) * 1%;
+    }
+
+    @for $i from 1 through 10 {
+      &:nth-child(#{$i}n) {
+        animation-delay: #{$i * 0.7}s;
+      }
+    }
+  }
+}
+
+.Ph-card {
+  position: relative;
+  display: block;
+
+  border: $Border;
+  box-shadow: $Shadow;
+
+  padding: 5px;
+  margin-bottom: 5px;
+}
+
+/*
+// Headers
+// TODO: Responsive
+*/
+
+.Ph-line {
+  $per: .6;
+
+  // Real header font sizes
+  $h1: $per * 2.5rem;
+  $h2: $per * 2rem;
+  $h3: $per * 1.75rem;
+  $h4: $per * 1.5rem;
+  $h5: $per * 1.25rem;
+  $h6: $per * 1rem;
+
+  &.Ph-h6, &.Ph-h5, &.Ph-h4, &.Ph-h3, &.Ph-h2, &.Ph-h1 {
+    background-color: hsla($Bg-accent-hsl, 0.24);
+
+    line-height: 1.2;
+
+    margin-top: 10px;
+    margin-bottom: 10px;
+
+    //transform: scale(1, 0.60);
+
+    &:before {
+      content: "\00a0";
+    }
+  }
+
+  &.Ph-h1 {
+    font-size: $h1;
+  }
+
+  &.Ph-h2 {
+    font-size: $h2;
+  }
+
+  &.Ph-h3 {
+    font-size: $h3;
+  }
+
+  &.Ph-h4 {
+    font-size: $h4;
+  }
+
+  &.Ph-h5 {
+    font-size: $h5;
+  }
+
+  &.Ph-h6 {
+    font-size: $h6;
+  }
+}
+
+// Circular or Square Media placeholder
+.Ph-square {
+  position: relative;
+  display: inline-block;
+
+  width: 100%;
+  overflow: hidden;
+
+  background-color: hsla($Bg-accent-hsl, 0.12);
+  margin: 4px;
+
+  &.Ph-circle {
+    border-radius: 50%;
+  }
+
+  &:before {
+    content: "";
+    display: block;
+    padding-top: 100%;
+  }
+
+  span {
+    position: absolute;
+    display: flex;
+    text-align: center;
+    align-items: center;
+    justify-content: center;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+  }
+}
+
+/*
+// Textual Effect
+*/
+
+@function randomMinMax($min, $max) {
+  $rand: random();
+  $randomNum: $min + floor($rand * (($max - $min) + 1));
+
+  @return $randomNum;
+}
+
+/// Calculate n random numbers that sum y.
+@function RandomNumbersWithSum($groups:3, $total:100) {
+  $numbers: [];
+  @for $i from 1 through $groups {
+    $num: randomMinMax(20, $total - 20 - ($groups - $i));
+    @if ($i==1) {
+      $num: randomMinMax(5, 30);
+    }
+    $total: $total - $num;
+    $numbers: append($numbers, $num)
+  }
+  $numbers: append($numbers, $total);
+
+  @return $numbers;
+}
+
+.Ph-textual {
+  $gap: 6px;
+  $color: hsla($Bg-accent-hsl, 0.12);
+
+  background-color: transparent;
+
+  @for $i from 1 to 5 {
+    &:nth-child(#{$i}n) {
+      $percentages: RandomNumbersWithSum(4, 100);
+      $per1: 1% * nth($percentages,1);
+      $per2: $per1 + 1% * nth($percentages,2);
+      $per3: $per2 + 1% * nth($percentages,3);
+      $per4: $per3 + 1% * nth($percentages,4);
+
+      // this should randomize by percent up to 100% (20%, 45%, 77%, ...)
+      background-image: linear-gradient(90deg,
+              $color $per1, transparent calc(#{$per1} + 1px), transparent calc(#{$per1} + #{$gap}), $color calc(#{$per1} + #{$gap}),
+              $color $per2, transparent calc(#{$per2} + 1px), transparent calc(#{$per2} + #{$gap}), $color calc(#{$per2} + #{$gap}),
+              $color $per3, transparent calc(#{$per3} + 1px), transparent calc(#{$per3} + #{$gap}), $color calc(#{$per3} + #{$gap}),
+              $color $per4, transparent calc(#{$per4} + 1px), transparent calc(#{$per4} + #{$gap}), $color calc(#{$per4} + #{$gap}),
+              $color);
+    }
+  }
+}
+
+/*
+// Anim: Pulsate, Shine
+*/
+
+.Ph-pulse {
+  animation: Keyframe-Pulsate 1.5s ease-in-out 0.5s infinite;
+}
+
+@keyframes Keyframe-Pulsate {
+  0% {
+    opacity: .6;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: .6;
+  }
+}
+
+.Ph-shine {
+  position: relative;
+  overflow: hidden;
+
+  /* Shine */
+  &:after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: 0;
+
+    animation: Keyframe-Shine 1.6s linear 0.5s infinite;
+    background: linear-gradient(90deg, transparent, hsla($Bg-accent-hsl, 0.25), transparent);
+
+    transform: translateX(-100%); /* Avoid flash during server-side hydration */
+  }
+}
+
+@keyframes Keyframe-Shine {
+  // Slide effect
+  0% {
+    transform: translateX(-100%);
+  }
+  50% {
+    /* +0.5s of delay between each loop */
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}

package/scss/Architecture/Utils/_border.scss

@@ -2,7 +2,9 @@
 // Utils - Border - Border-radius
 // ===========================================================================
 
-$Border-color: var(--#{$var-Prefix}border-color);
+
+$Border-color-hsl: var(--#{$var-Prefix}border-hsl);
+$Border-color: hsla($Border-color-hsl, var(--#{$var-Prefix}border-alpha));
 
 /*
 // Border, Rounded

package/scss/Architecture/Utils/_color.scss

@@ -2,102 +2,85 @@
 // Utils - Bg & Fg & Border Colors
 // ===========================================================================
 
-@include Bg-Text-Border-variables($colors-all);
+$var-Prefix: $var-Prefix;
+$colors-Background-hsla: $colors-Background-hsla;
+$colors-Text-hsla: $colors-Text-hsla;
+$colors-Border-hsla: $colors-Border-hsla;
+$color-Alpha-map: $color-Alpha-map;
+$color-Lightness-map: $color-Lightness-map;
 
-$utilities-bg: () !default;
-$utilities-bg: (
-  // Text
-        "Text-lightness": (
-                Prefix: Text-lightness, Properties: --#{$var-Prefix}text-lightness, Important: false,
-                Values: $color-Lightness-map
-        ),
-        "Text-color": (
-                Prefix: Text, Properties: color, Important: true,
-                Values: $colors-Text-hsla
-        ),
-        "Text-alpha": (
-                Prefix: Text-alpha, Properties: --#{$var-Prefix}text-alpha, Important: false,
-                Values: $color-Alpha-map
-        ),
-  // Border-color, Border-alpha
-        "Border-color": (
-                Prefix: Border, Properties: border-color, Important: true,
-                Values: map-merge($colors-Border-hsla, ("transparent": transparent)),
-        ),
-        "Border-alpha": (
-                Prefix: Border-alpha, Properties: --#{$var-Prefix}border-alpha, Important: false,
-                Values: $color-Alpha-map,
-        ),
-  // Bg
-        "Bg-lightness": (
-                Prefix: Bg-lightness, Properties: --#{$var-Prefix}bg-lightness, Important: false,
-                Values: $color-Lightness-map
-        ),
-        "Bg-color": (
-                Prefix: Bg, Properties: background-color, Important: true,
-                Values: map-merge($colors-Background-hsla, ("transparent": transparent)),
-        ),
-        "Bg-alpha": (Prefix: Bg-alpha, Properties: --#{$var-Prefix}bg-alpha, Important: false, Values: $color-Alpha-map),
-  // Opacity
-        "Opacity": (Prefix: Opacity, Properties: opacity, Important: true, Values: $opacity-map),
-  // Pseudo colors
-        "Before-bg-before": (
-                Prefix: Before-bg, Properties: background-color, Important: true, Pseudo:before,
-                Values: $colors-Background-hsla
-        ),
-        "Before-border-before": (
-                Prefix: Before-border, Properties: border-color, Important: true, Pseudo:before,
-                Values: $colors-Border-hsla
-        ),
-        "Before-bg-after": (
-                Prefix: After-bg, Properties: background-color, Important: true, Pseudo:after,
-                Values: $colors-Background-hsla
-        ),
-        "Before-border-after": (
-                Prefix: After-border, Properties: border-color, Important: true, Pseudo:after,
-                Values: $colors-Border-hsla
-        ),
-);
-
-@include Utilities($utilities-bg);
+.Bg-gradient {
+  background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.15) 0%, hsla(0, 0%, 100%, 0.40) 50%, hsla(0, 0%, 100%, 0) 100%); // vertical
+  //background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.15), hsla(0, 0%, 100%, 0)) !important;
+}
 
-// ===========================================================================
-// Text Color
-// ===========================================================================
+// Not: Must be before real class set
+@each $colorKey, $colorValue in $colors-all {
+  .Bg-#{$colorKey} {
+    --#{$var-Prefix}bg-lightness: #{lightness($colorValue)};
+    --#{$var-Prefix}bg-alpha: 1;
+  }
 
-/*
-// .Text-<color>, .Text-<theme>, .Text-muted {}
-// .Text-alpha-0, .Text-alpha-100 { }
-// .Text-lightness-0, .Text-lightness-100 {}
-*/
+  .Text-#{$colorKey} {
+    --#{$var-Prefix}text-lightness: #{lightness($colorValue)};
+    --#{$var-Prefix}text-alpha: 1;
+  }
 
-// ===========================================================================
-// Border
-// ===========================================================================
+  .Border-#{$colorKey} {
+    --#{$var-Prefix}border-alpha: 1;
+  }
+}
 
-/*
-// .Border-<color>, .Border-<theme>, .Border-transparent {}
-// .Border-alpha-0, .Border-alpha-100 {}
-*/
+$utilities-Colors: () !default;
+$utilities-Colors: (
+  // New Approach
+        "Bg": (Prefix: Bg, Properties: background-color, Important: true, Values:$colors-Background-hsla,),
+        "Fg": (Prefix: Fg, Properties: color, Important: true, Values: $colors-Text-hsla),
+        "Bc": (Prefix: Bc, Properties: border-color, Important: true, Values: $colors-Border-hsla),
+  // Pseudo Colors
+        "Bg-pseudo": (Prefix: Bg-pseudo, Properties: --#{$var-Prefix}bg-color, Important: true, Values:$colors-Background-hsla,),
+        "Bc-pseudo": (Prefix: Bc-pseudo, Properties: --#{$var-Prefix}bc-color, Important: true, Values:$colors-Border-hsla,),
+  // Border
+        "Bc-t": (Prefix: Bc-t, Properties: border-top-color, Important: true, Values: $colors-Border-hsla),
+        "Bc-r": (Prefix: Bc-r, Properties: border-right-color, Important: true, Values: $colors-Border-hsla),
+        "Bc-b": (Prefix: Bc-b, Properties: border-bottom-color, Important: true, Values: $colors-Border-hsla),
+        "Bc-l": (Prefix: Bc-l, Properties: border-left-color, Important: true, Values: $colors-Border-hsla),
+  // Alpha
+        "Bg-alpha": (Prefix: Bg-alpha, Properties: --#{$var-Prefix}bg-alpha, Important: false, Values: $color-Alpha-map),
+        "Fg-alpha": (Prefix: Fg-alpha, Properties: --#{$var-Prefix}text-alpha, Important: false, Values: $color-Alpha-map),
+        "Bc-alpha": (Prefix: Bc-alpha, Properties: --#{$var-Prefix}border-alpha, Important: false, Values: $color-Alpha-map,),
+  // lightness
+        "Bg-lightness": (Prefix: Bg-lightness, Properties: --#{$var-Prefix}bg-lightness, Important: false, Values: $color-Lightness-map),
+        "Fg-lightness": (Prefix: Fg-lightness, Properties: --#{$var-Prefix}text-lightness, Important: false, Values: $color-Lightness-map),
+);
 
-// ===========================================================================
-// Bg
-// ===========================================================================
+@include Utilities($utilities-Colors);
 
 /*
-// .Bg-<color>, .Bg-<theme> {}
-// .Bg-alpha-0, .Bg-alpha-100 {}
-// .Bg-lightness-0, .Bg-lightness-100 {}
-// .Opacity-0,  .Opacity-100 {}
+// Pseudo colors
 */
+// Background
+.Bg-before {
+  &:before {
+    background-color: var(--#{$var-Prefix}bg-color) !important;
+  }
+}
 
-// ===========================================================================
-// Pseudo colors
-// ===========================================================================
+.Bg-after {
+  &:after {
+    background-color: var(--#{$var-Prefix}bg-color) !important;
+  }
+}
 
-/*
-// .Before-bg-<color>:before, .Before-bg-<theme>:before {}
-// .Before-border-<color>:before, .Before-border-<theme>:before {}
-// .After-bg-<color>:after, .After-bg-<theme>:after {}
-// .After-border-<color>:after, .After-border-<theme>:after {}
-*/
+// Border
+.Bc-before {
+  &:before {
+    border-color: var(--#{$var-Prefix}bc-color) !important;
+  }
+}
+
+.Bc-after {
+  &:after {
+    border-color: var(--#{$var-Prefix}bc-color) !important;
+  }
+}

package/scss/Architecture/Utils/_filters.scss

@@ -78,7 +78,10 @@ $filter-Colors: (
         "warning" : $filter-Warning,
         "danger" : $filter-Danger,
         "light" : $filter-Light,
-        "dark" : $filter-Dark
+        "dark" : $filter-Dark,
+  //NONE
+        "black" : $filter-Dark,
+        "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 {
+}