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

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

@@ -80,6 +80,7 @@ $filter-Colors: (
         "light" : $filter-Light,
         "dark" : $filter-Dark,
   //NONE
+        "black" : $filter-Dark,
         "none" : $filter-Dark,
 );
 

package/scss/Architecture/Utils/_spacing.scss

@@ -1,10 +1,8 @@
 // ===========================================================================
 // Utils - Spacing
+// Margin, Padding
 // ===========================================================================
 
-/*
-// Margin, Padding
-*/
 // Values: Prefix: *, Properties: *, Important: *, Responsive: *, Values: *, Values: *, Pseudo:*
 $utilities-Spacing: () !default;
 $utilities-Spacing: (
@@ -20,27 +18,17 @@ $utilities-Spacing: (
         ),
   // Margin directions
         "M-top": (Prefix: MT, Properties: margin-top, Important: true, Responsive: true, Values: map-merge($spacers-map, (auto: auto))),
-        "M-right": (Prefix: MR, Properties: margin-right, Important: true, Responsive: true, Values: map-merge($spacers-map, (auto: auto))),
         "M-end": (Prefix: ME, Properties: margin-right, Important: true, Responsive: true, Values: map-merge($spacers-map, (auto: auto))),
         "M-bottom": (Prefix: MB, Properties: margin-bottom, Important: true, Responsive: true, Values: map-merge($spacers-map, (auto: auto))),
-        "M-left": (Prefix: ML, Properties: margin-left, Important: true, Responsive: true, Values: map-merge($spacers-map, (auto: auto))),
         "M-start": (Prefix: MS, Properties: margin-left, Important: true, Responsive: true, Values: map-merge($spacers-map, (auto: auto))),
   // Negative Margin
-        "Neg M": (
-                Prefix: M, Properties: margin, Important: true, Responsive: true, Values: $negative-spacers
-        ),
-        "Neg MX": (
-                Prefix: MX, Properties: margin-right margin-left, Important: true, Responsive: true, Values: $negative-spacers
-        ),
-        "Neg MY": (
-                Prefix: MY, Properties: margin-top margin-bottom, Important: true, Responsive: true, Values: $negative-spacers
-        ),
+        "Neg M": (Prefix: M, Properties: margin, Important: true, Responsive: true, Values: $negative-spacers),
+        "Neg MX": (Prefix: MX, Properties: margin-right margin-left, Important: true, Responsive: true, Values: $negative-spacers),
+        "Neg MY": (Prefix: MY, Properties: margin-top margin-bottom, Important: true, Responsive: true, Values: $negative-spacers),
   // Negative Margin directions
         "Neg M-top": (Prefix: MT, Properties: margin-top, Important: true, Responsive: true, Values: $negative-spacers),
-        "Neg M-right": (Prefix: MR, Properties: margin-right, Important: true, Responsive: true, Values: $negative-spacers),
         "Neg M-end": (Prefix: ME, Properties: margin-right, Important: true, Responsive: true, Values: $negative-spacers),
         "Neg M-bottom": (Prefix: MB, Properties: margin-bottom, Important: true, Responsive: true, Values: $negative-spacers),
-        "Neg M-left": (Prefix: ML, Properties: margin-left, Important: true, Responsive: true, Values: $negative-spacers),
         "Neg M-start": (Prefix: MS, Properties: margin-left, Important: true, Responsive: true, Values: $negative-spacers),
   // Padding
         "P": (Prefix: P, Properties: padding, Important: true, Responsive: true, Values: $spacers-map),
@@ -48,10 +36,8 @@ $utilities-Spacing: (
         "PY": (Prefix: PY, Properties: padding-top padding-bottom, Important: true, Responsive: true, Values: $spacers-map),
   // Padding directions
         "P-top": (Prefix: PT, Properties: padding-top, Important: true, Responsive: true, Values: $spacers-map),
-        "P-right": (Prefix: PR, Properties: padding-right, Important: true, Responsive: true, Values: $spacers-map),
         "P-end": (Prefix: PE, Properties: padding-right, Important: true, Responsive: true, Values: $spacers-map),
         "P-bottom": (Prefix: PB, Properties: padding-bottom, Important: true, Responsive: true, Values: $spacers-map),
-        "P-left": (Prefix: PL, Properties: padding-left, Important: true, Responsive: true, Values: $spacers-map),
         "P-start": (Prefix: PS, Properties: padding-left, Important: true, Responsive: true, Values: $spacers-map),
 );
 
@@ -64,10 +50,10 @@ $utilities-Spacing: (
 /*
 Margin                  .M-<0-5>, .M-auto {}
 Margin X, Y             .M<X,Y>-<0-5>, .M<X,Y>-auto {}
-Margin directions       .M<T,R,E,B,L,S>-<0-5>, .M<T,R,E,B,L,S>-auto {}
+Margin directions       .M<T,E,B,S>-<0-5>, .M<T,E,B,S>-auto {}
 Negative Margin         .M-N<0-5>
 Negative Margin X, Y    .M<X,Y>-N<0-5>
-Negative M directions   .M<T,R,E,B,L,S>-N<0-5> {}
+Negative M directions   .M<T,E,B,S>-N<0-5> {}
 */
 
 // ===========================================================================
@@ -77,5 +63,5 @@ Negative M directions   .M<T,R,E,B,L,S>-N<0-5> {}
 /*
 Padding                  .P-<0-5> {}
 Padding X, Y             .P<X,Y>-<0-5> {}
-Padding directions       .P<T,R,E,B,L,S>-<0-5> {}
+Padding directions       .P<T,E,B,S>-<0-5> {}
 */