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

package/scss/Architecture/Forms/_input-fields.scss

@@ -4,9 +4,8 @@
 // ===========================================================================
 */
 
-@import "../_theme-colors";
-
-
+$Customized: false;
+@import "../_color-scheme";
 
 /*
 // Sizing
@@ -119,14 +118,14 @@ $font-size-lg: 1.25rem;
     // Focused input style
     &:focus:not([readonly]) {
       box-shadow: $Shadow-inner;
-      border-color: $bg-Active;
+      border-color: $Bg-accent;
 
-      color: $fg-Lightest;
-      background: $bg-Lightest;
+      //color: $Fg-lightest;
+      //background-color: $Bg-lightest;
 
       // Focused label style
       + label {
-        color: $bg-Active;
+        color: $Bg-accent;
       }
     }
 
@@ -141,24 +140,24 @@ $font-size-lg: 1.25rem;
     &:not(:disabled):not(:read-only) {
       /* Hover */
       &:hover {
-        border-bottom-color: $bg-Active;
+        border-bottom-color: $Bg-accent;
       }
 
       /* Focus */
       &:focus {
         + .Form-label {
-          color: $bg-Active;
+          color: $Bg-accent;
         }
       }
     }
 
     /* Disabled */
     &:disabled {
-      //border-bottom-color: $bg-Dark;
-      color: $fg-Muted;
+      //border-bottom-color: $Bg-lighter;
+      color: $Fg-muted;
 
       + .Form-label {
-        color: $fg-Muted;
+        color: $Fg-muted;
       }
     }
   }
@@ -168,21 +167,21 @@ $font-size-lg: 1.25rem;
 
     > option {
       //border-radius: 25px;
-      color: $fg-Lightest;
-      background: $bg-Lightest;
+      color: $Fg-lightest;
+      background: $Bg-lightest;
 
       padding: .5rem;
       margin: 3px 0;
       box-shadow: $Shadow-inner;
 
       &:checked {
-        background: $bg-Active;
-        color: $fg-Active;
+        background: $Bg-accent;
+        color: $Fg-accent;
       }
 
       &:hover, &:active {
-        color: $fg-Dark;
-        background: $bg-Dark;
+        color: $Fg-lighter;
+        background-color: $Bg-lighter;
       }
     }
 
@@ -197,7 +196,7 @@ $font-size-lg: 1.25rem;
   .Form-textarea {
     $textarea-line-height: 2em;
     $gradient-height: calc(2em - 1px);
-    $line-color: hsla($Border-color-hsl, var(--#{$var-Prefix}border-alpha, 1));;
+    $line-color: hsla($Border-hsl, var(--#{$var-Prefix}border-alpha));;
 
     $background-gradient: linear-gradient(transparent, transparent $gradient-height, $line-color 0px) ;
 
@@ -226,7 +225,7 @@ $font-size-lg: 1.25rem;
     left: 0;
 
     pointer-events: none;
-    color: hsla($bg-Active-hsl, 0.6);
+    color: hsla($Bg-accent-hsl, 0.6);
     cursor: text;
 
     transition: transform .2s ease-out, color .2s ease-out;
@@ -245,9 +244,9 @@ $font-size-lg: 1.25rem;
   padding-top: 6px;
   line-height: 1.5;
 
-  $border-passive-color: hsla($bg-Active-hsl, 0.38);
-  $border-hover-color: hsla($bg-Active-hsl, 0.87);
-  $border-active-color: $bg-Active;
+  $border-passive-color: hsla($Bg-accent-hsl, 0.38);
+  $border-hover-color: hsla($Bg-accent-hsl, 0.87);
+  $border-active-color: $Bg-accent;
 
   /* Input, Textarea */
   input, textarea, select {
@@ -320,7 +319,7 @@ $font-size-lg: 1.25rem;
         height: 8px;
 
         margin-top: 6px;
-        //border-top: 1px solid hsla($bg-Active-hsl, 0.6);
+        //border-top: 1px solid hsla($Bg-accent-hsl, 0.6);
         border-top: 1px solid transparent;
 
         pointer-events: none;
@@ -371,23 +370,23 @@ $font-size-lg: 1.25rem;
     /* Focus */
     &:focus {
       border-color: transparent $border-active-color $border-active-color;
-      box-shadow: inset 1px 0 $bg-Active, inset -1px 0 $bg-Active, inset 0 -1px $bg-Active;
+      box-shadow: inset 1px 0 $Bg-accent, inset -1px 0 $Bg-accent, inset 0 -1px $Bg-accent;
       outline: none;
 
       + .Form-label {
-        color: $bg-Active;
+        color: $Bg-accent;
 
         &:before, &:after {
           border-top-color: $border-active-color;
-          box-shadow: inset 0 1px $bg-Active;
+          box-shadow: inset 0 1px $Bg-accent;
         }
       }
     }
 
     /* Disabled */
     &:disabled, &:disabled + .Form-label {
-      //border-color: transparent hsla($bg-Active-hsl, 0.38) hsla($bg-Active-hsl, 0.38) !important;
-      color: hsla($bg-Active-hsl, 0.38);
+      //border-color: transparent hsla($Bg-accent-hsl, 0.38) hsla($Bg-accent-hsl, 0.38) !important;
+      color: hsla($Bg-accent-hsl, 0.38);
       pointer-events: none;
     }
   }
@@ -397,21 +396,21 @@ $font-size-lg: 1.25rem;
 
     > option {
       //border-radius: 25px;
-      //color: $fg-Lightest;
-      //background: $bg-Lightest;
+      //color: $Fg-lightest;
+      //background: $Bg-lightest;
 
       padding: .5rem;
       margin: 3px 0;
       box-shadow: $Shadow-inner;
 
       &:checked {
-        background: $bg-Active;
-        color: $fg-Active;
+        background: $Bg-accent;
+        color: $Fg-accent;
       }
 
       &:hover, &:active {
-        color: $fg-Dark;
-        background: $bg-Dark;
+        color: $Fg-lighter;
+        background-color: $Bg-lighter;
       }
     }
 
@@ -425,7 +424,7 @@ $font-size-lg: 1.25rem;
   .Form-textarea {
     $textarea-line-height: 2em;
     $gradient-height: calc(2em - 1px);
-    $line-color: hsla($Border-color-hsl, var(--#{$var-Prefix}border-alpha, 1));;
+    $line-color: hsla($Border-hsl, var(--#{$var-Prefix}border-alpha));
 
     $background-gradient: linear-gradient(transparent, transparent $gradient-height, $line-color 0px) ;
 
@@ -455,7 +454,7 @@ $font-size-lg: 1.25rem;
     left: 0;
 
     pointer-events: none;
-    color: hsla($bg-Active-hsl, 0.6);
+    color: hsla($Bg-accent-hsl, 0.6);
     cursor: text;
 
     //font-size: 75%;

package/scss/Architecture/Forms/_selects.scss

@@ -3,7 +3,9 @@
 // Forms - Select
 // ===========================================================================
 */
-@import "../_theme-colors";
+
+$Customized: false;
+@import "../_color-scheme";
 
 /*
 // Select Not input... ul li

package/scss/Architecture/{_anim.scss → Roots/_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/Architecture/Roots/_avatar.scss

@@ -0,0 +1,296 @@
+// ===========================================================================
+// Layout - Avatar
+// https://codepen.io/avenart/pen/dypjQmm
+// https://ishadeed.com/article/thinking-about-the-cut-out-effect/
+// ===========================================================================
+
+$Danger: hsl(354, 66%, 54%) !default; // #D73C4C  based mixed
+$Lime: hsl(120, 100%, 50%) !default;
+
+// These class using with Shape/Sqr class
+.Avatar-CSSMask, .Avatar-ClipPath,
+.Avatar {
+  .Avatar-badge {
+    position: absolute;
+    right: 7%;
+    bottom: 7%;
+    width: 16%;
+    height: 16%;
+
+    //right: 6%;
+    //bottom: 6%;
+    //width: 18%;
+    //height: 18%;
+
+    background: $Danger;
+    border-radius: 50%;
+
+    &.Online {
+      background: $Lime;
+    }
+  }
+}
+
+/*
+// Avatar - with CSS Mask [radial-gradient]
+*/
+
+.Avatar-CSSMask {
+  img {
+    width: 100%;
+    height: 100%;
+
+    // mask-image: radial-gradient(circle 20px at calc(100% - 30px) calc(100% - 30px), transparent 30px, #000 0);
+    mask-image: radial-gradient(circle at calc(100% - calc(15% - 0px)) calc(100% - calc(15% - 0px)), transparent calc(10% - 2px), #000 0);
+
+    object-fit: cover;
+    border-radius: 50%;
+  }
+}
+
+/*
+// Avatar - with Svg clipPath
+*/
+
+.Avatar-ClipPath {
+
+  &:after {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    border: 1px solid;
+    opacity: 0.2;
+    clip-path: url("#clipPathId");
+  }
+
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 50%;
+    clip-path: url("#clipPathId");
+  }
+
+  .Avatar-badge {
+    right: 6%;
+    bottom: 5%;
+    width: 17%;
+    height: 17%;
+  }
+}
+
+/*
+// Avatar - with SVG Mask
+*/
+
+.Avatar, .Avatar-group {
+
+  &.Sqr {
+    margin: 0;
+  }
+
+  //noinspection CssUnknownProperty
+  svg {
+    width: 100%;
+    height: 100%;
+
+    mask {
+      circle[fill="white"] {
+        cx: calc(100% / 2); // 50%
+        cy: calc(100% / 2); // 50%
+        r: calc(100% / 2 - 3%); // 47%
+      }
+
+      rect[fill="white"] {
+        width: 80%;
+        height: 80%;
+
+        cy: 18;
+        x: 10%;
+        y: 10%;
+      }
+    }
+
+    g {
+      image {
+        width: 100%;
+        height: 100%;
+
+        x: 0;
+        y: 0;
+        preserveAspectRatio: "xMidYMid slice";
+      }
+
+      text {
+        fill: currentColor;
+        dominant-baseline: central;
+        text-anchor: middle;
+      }
+
+      circle.Avatar-border,
+      rect.Avatar-border {
+        fill: none;
+        stroke: rgba(0, 0, 0, 0.1);
+        stroke-width: 10%;
+      }
+
+      circle {
+        cx: calc(100% / 2); // 50%
+        cy: calc(100% / 2); // 50%
+        r: calc(100% / 2 - 3%); // 47%
+      }
+
+      rect {
+        width: 80%;
+        height: 80%;
+
+        cy: 18;
+        x: 10%;
+        y: 10%;
+      }
+    }
+
+  }
+}
+
+.Avatar {
+  //noinspection CssUnknownProperty
+  &.Sign-bottom {
+    svg mask circle[fill="black"] {
+      cx: 85%; // 85%
+      cy: 85%; // 85%
+      r: 10%; // 10%
+    }
+  }
+
+  //noinspection CssUnknownProperty
+  &.Sign-top {
+    svg mask circle[fill="black"] {
+      cx: 85%; // 85%
+      cy: 15%; // 85%
+      r: 10%; // 10%
+    }
+
+    .Avatar-badge {
+      right: 7%;
+      top: 7%;
+      width: 16%;
+      height: 16%;
+    }
+  }
+}
+
+/*
+// Avatar Group - with SVG Mask
+*/
+
+//noinspection CssUnknownProperty
+.Avatar-group {
+  position: relative;
+  display: flex;
+
+  &:not(&.Avatar-group-reversed) {
+    svg mask circle[fill="black"] {
+      cx: -25%;
+      cy: 50%;
+      r: 50%;
+    }
+
+    // Specific Groups
+    &.Twin, &.Triplet, &.Quadruplet, {
+
+      &.Twin {
+        .Sqr:not(:first-child) {
+          margin-left: -15%;
+        }
+      }
+
+      &.Triplet {
+        .Sqr:not(:first-child) {
+          margin-left: -10%;
+        }
+      }
+
+      &.Quadruplet {
+        .Sqr:not(:first-child) {
+          margin-left: -8%;
+        }
+      }
+    }
+
+    &:not(.Twin):not(.Triplet):not(.Quadruplet) {
+      .Sqr {
+        &:not(:first-child) {
+          margin-left: -8%;
+
+          &:nth-child(n+4) {
+            margin-left: -21%; // -6.25%
+
+            svg mask circle[fill="black"] {
+              cx: 23%; // 10%
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.Avatar-group-reversed {
+    svg mask circle[fill="black"] {
+      cx: 125%;
+      cy: 50%;
+      r: 50%;
+    }
+
+    // Specific Groups
+    &.Twin, &.Triplet, &.Quadruplet, {
+
+      &.Twin {
+        .Sqr:not(:last-child) {
+          margin-right: -15%;
+        }
+      }
+
+      &.Triplet {
+        .Sqr:not(:last-child) {
+          margin-right: -10%;
+        }
+      }
+
+      &.Quadruplet {
+        .Sqr:not(:last-child) {
+          margin-right: -8%;
+        }
+      }
+    }
+
+    &:not(.Twin):not(.Triplet):not(.Quadruplet) {
+      svg mask circle[fill="black"] {
+        cx: 77%;
+      }
+
+      .Sqr {
+        //noinspection CssUnknownProperty
+        &:not(:last-child) {
+          margin-right: -21%; // -6.25%
+
+          // last 3 child => -n+3
+          &:nth-last-child(-n+3) {
+            margin-right: -8%;
+
+            svg mask circle[fill="black"] {
+              cx: 124%;
+            }
+          }
+        }
+      }
+
+    }
+
+  }
+}

package/scss/Architecture/Roots/_classified.scss

@@ -0,0 +1,67 @@
+// ===========================================================================
+// Layout - Shapes
+// ===========================================================================
+// https://codepen.io/adamruf/pen/GZwdrY
+
+$Bg-accent-hsl: var(--ls-bg-accent-hsl);
+$color: hsla($Bg-accent-hsl, 1);
+
+.Classified {
+  user-select: none;
+
+  &.Blurred {
+    span {
+      filter: blur(5px);
+      /*
+       For situations that require better cross-browser support, the blur effect is easily reproduced with transparent text + text-shadow
+      color: transparent;
+      text-shadow: 0 0 12px rgba(0,0,0,0.8);
+      */
+      white-space: break-spaces;
+    }
+  }
+
+  &.InvisibleInk {
+    span {
+      background: transparent;
+      //color: transparent;
+      color: rgba(0, 0, 0, 0);
+
+      white-space: break-spaces;
+    }
+  }
+
+  /*
+  // Redacted
+  */
+
+  &.Redacted {
+    span {
+      position: relative;
+      //white-space: break-spaces;
+      white-space: pre;
+
+      &:after {
+        position: absolute;
+        content: " ";
+        background: $color;
+        border-radius: 0.25em;
+        box-shadow: 0 0 1px hsla($Bg-accent-hsl, 0.35);
+        width: 100%;
+        height: 1.2em;
+        left: 0;
+        transform: skewY(-10deg) rotate(10deg);
+      }
+    }
+  }
+
+  &.Redacted-soft {
+    span {
+      color: $color;
+      background: $color;
+      height: 1.2em;
+
+      white-space: break-spaces;
+    }
+  }
+}

package/scss/Architecture/{_reboot.scss → Roots/_reboot.scss}

@@ -99,12 +99,12 @@ $headings-color: null !default;
 $font-size-sm: $font-size-base * .875 !default;
 $font-size-lg: $font-size-base * 1.25 !default;
 
-$h1-font-size: $font-size-base * 2.5 !default;
-$h2-font-size: $font-size-base * 2 !default;
-$h3-font-size: $font-size-base * 1.75 !default;
-$h4-font-size: $font-size-base * 1.5 !default;
-$h5-font-size: $font-size-base * 1.25 !default;
-$h6-font-size: $font-size-base !default;
+//$h1-font-size: $font-size-base * 2.5 !default;
+//$h2-font-size: $font-size-base * 2 !default;
+//$h3-font-size: $font-size-base * 1.75 !default;
+//$h4-font-size: $font-size-base * 1.5 !default;
+//$h5-font-size: $font-size-base * 1.25 !default;
+//$h6-font-size: $font-size-base !default;
 
 h1 {
   @extend %heading;
@@ -288,9 +288,6 @@ sup {
   @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
 }
 
-
-$Primary: hsl(260, 81%, 38%) !default;
-
 $link-color: $Primary !default;
 $link-decoration: underline !default;
 $link-shade-percentage: 20% !default;