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

package/scss/Architecture/Components/_timeline.scss

@@ -9,20 +9,14 @@ $Customized: false;
 .Timeline {
   display: block;
   position: relative;
-  overflow: visible;
 
   color: $Fg-surface;
   background-color: $Bg-surface;
 
-  //border: $Border;
-  box-shadow: $Shadow-inner;
-
   background-clip: border-box;
+  min-width: 0;
   padding: 0;
   margin-bottom: 1.5rem;
-  min-width: 0;
-
-  $badge-size: 32px;
 
   .Timeline-header {
     padding: 1rem;
@@ -32,99 +26,60 @@ $Customized: false;
   .Timeline-item {
     position: relative;
     display: flex;
-    overflow: visible;
-    padding-right: 1rem;
-    padding-left: 1rem;
 
-    &:not(:last-child):after {
+    align-items: center;
+
+    &.Inverted {
+      flex-direction: row-reverse;
+
+      &:after {
+        left: auto;
+        right: 16px;
+      }
+
+      .Timeline-badge {
+        margin-right: 0;
+        margin-left: 0.75rem;
+      }
+    }
+
+    &:after {
       position: absolute;
       content: " ";
       background-color: $Border-color;
 
+      //z-index: -1;
+
       width: 3px;
       height: 100%;
 
-      left: 1.9rem;
+      left: 16px;
       right: auto;
-      top: 50%;
+      top: 0;
     }
 
-    .Timeline-badge {
-      position: relative;
-      display: flex;
-      z-index: 1;
-
-      align-items: center;
-
-      .Timeline-badge-inner {
-        position: relative;
-        display: flex;
-        width: $badge-size;
-        height: $badge-size;
-
-        color: $Fg-accent;
-        background-color: $Bg-accent;
-
-        border-radius: 50%;
-        box-shadow: $Shadow-inner;
-        margin-bottom: 1rem;
-
-        * {
-          display: block;
-          margin: auto;
-        }
-      }
+    &.First:after {
+      height: 50%;
+      top: 50%;
     }
 
-    .Timeline-body {
-      position: relative;
-      min-width: 0;
-      max-width: 100%;
-
-      padding: 0;
-      margin: 0 0 0 1.4rem;
-
-      .Card {
-        border-top: 1px solid $Border-color;
-
-        .Card-img {
-          overflow: hidden;
-          margin: .5rem;
-        }
-
-        &.Card-horizontal {
-
-          .Card-img {
-            padding: .25rem;
-
-            @media (min-width: 1014px) {
-              margin-right: 0 !important;
-            }
-          }
-
-        }
-
-      }
+    &.Last:after {
+      height: 50%;
+      top: 0;
     }
 
-    &.Timeline-item-inverted {
-      flex-direction: row-reverse;
+    .Timeline-badge {
+      width: 40px;
 
-      .Timeline-body {
-        margin: 0 1.4rem 0 0;
-      }
+      z-index: 1001;
+
+      margin-right: 0.75rem;
+      margin-bottom: 0.75rem;
     }
-  }
 
-  @media (max-width: 767px) {
-    .Timeline-item, .Timeline-item-inverted {
+    .Timeline-content {
       width: 100%;
-      padding-right: .25rem;
-      padding-left: .25rem;
-
-      &:not(:last-child):after {
-        left: 1.2rem;
-      }
+      margin-left: auto;
     }
   }
 }

package/scss/Architecture/Components/_timer.scss

@@ -1,85 +1,45 @@
 // ===========================================================================
-// Components - Timeline
+// Components - Timer
 // TS: Theme Support
 // ===========================================================================
 
 $Customized: false;
 @import "../_color-scheme";
 
+//noinspection CssInvalidHtmlTagReference
 .Timer {
   display: flex;
   position: relative;
   overflow: hidden;
-  flex-wrap: wrap;
+  //flex-wrap: wrap;
 
-  color: $Fg-surface;
+  color: $Bg-accent;
   background-color: $Bg-surface;
 
   border: $Border;
   box-shadow: $Shadow;
 
-  min-height: 110px;
-  padding: 5px 10px;
   margin-bottom: 10px;
 
-  .Timer-header {
-    flex-basis: 100%;
-    margin: 0 0 5px;
-    font-weight: bold;
-
-    border-bottom: $Border;
-  }
-
-  .Timer-expired {
+  TimerItem, .Square, .Timer-item {
+    position: relative;
     display: flex;
-    flex-basis: 100%;
-    font-weight: bold;
-    color: $Fg-surface;
-
-    align-items: center;
-    justify-content: center;
+    //flex: 1 0 auto;
+    flex: auto;
   }
 
-  .Square {
-    font-family: inherit;
-    font-size: inherit;
-    font-weight: inherit;
+  TimerDivider, .Timer-divider {
+    position: relative;
+    display: flex;
+    //flex: 1 0 auto;
 
-    border: $Border;
-  }
+    width: 10%;
 
-  .Timer-divider:not(.Timer-canvas .Timer-divider) {
     margin-top: auto;
     margin-bottom: auto;
-  }
-
-  .Timer-divider {
-    position: relative;
-    width: 8%;
-    margin: 2px -2px;
-
-    span, div {
-      position: absolute;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      top: 0;
-    }
-  }
-}
 
-.Timer-svg {
-  @extend .Loader;
-
-  svg {
-    .circle {
-      &:first-of-type {
-        stroke-dasharray: none !important;
-      }
+    @media (max-width: 767px) {
+      width: 20%;
     }
   }
-
 }

package/scss/Architecture/Roots/_avatar.scss

@@ -107,12 +107,19 @@ $Lime: hsl(120, 100%, 50%) !default;
       }
 
       rect[fill="white"] {
-        width: 80%;
-        height: 80%;
-
+        width: 85%;
+        height: 85%;
         cy: 18;
-        x: 10%;
-        y: 10%;
+        x: 7.5%;
+        y: 7.5%;
+
+        rx: 0;
+        ry: 0;
+
+        &.Round {
+          rx: 8;
+          ry: 8;
+        }
       }
     }
 
@@ -146,12 +153,19 @@ $Lime: hsl(120, 100%, 50%) !default;
       }
 
       rect {
-        width: 80%;
-        height: 80%;
-
+        width: 85%;
+        height: 85%;
         cy: 18;
-        x: 10%;
-        y: 10%;
+        x: 7.5%;
+        y: 7.5%;
+
+        rx: 0;
+        ry: 0;
+
+        &.Round {
+          rx: 8;
+          ry: 8;
+        }
       }
     }
 

package/scss/Architecture/Roots/_shape.scss

@@ -23,7 +23,7 @@
 
 .Rect {
   position: relative;
-  display: block;
+  display: flex;
   flex: 1 0 auto;
 
   &:before {
@@ -35,7 +35,7 @@
 
 .Sqr, .Circle {
   position: relative;
-  display: inline-block;
+  display: flex;
   overflow: hidden;
 
   width: 100%;
@@ -60,7 +60,7 @@
 
   transform: rotate(45deg);
 
-  .Content {
+  .Content, .Square-inner {
     transform: rotate(-45deg);
   }
 }
@@ -70,23 +70,23 @@
 */
 
 .Skew-20 {
-  margin-left: 30px;
-  margin-right: 30px;
+  //margin-left: 30px;
+  //margin-right: 30px;
 
   transform: skew(20deg);
 
-  .Content {
+  .Content, .Square-inner {
     transform: skew(-20deg);
   }
 }
 
 .Skew-20n {
-  margin-left: 30px;
-  margin-right: 30px;
+  //margin-left: 30px;
+  //margin-right: 30px;
 
   transform: skew(-20deg);
 
-  .Content {
+  .Content, .Square-inner {
     transform: skew(20deg);
   }
 }

package/scss/Architecture/Utils/_border.scss

@@ -18,19 +18,19 @@ $utilities-Border: (
         ),
   // Border Directions
         "Border-top": (
-                Prefix: Border-t, Properties: border-top, Important: true,
+                Prefix: Border-top, Properties: border-top, Important: true,
                 Values: (null: $Border-width solid $Border-color, 0: 0),
         ),
         "Border-right": (
-                Prefix: Border-r, Properties: border-right, Important: true,
+                Prefix: Border-end, Properties: border-right, Important: true,
                 Values: (null: $Border-width solid $Border-color, 0: 0),
         ),
         "Border-bottom": (
-                Prefix: Border-b, Properties: border-bottom, Important: true,
+                Prefix: Border-bottom, Properties: border-bottom, Important: true,
                 Values: (null: $Border-width solid $Border-color, 0: 0),
         ),
         "Border-left": (
-                Prefix: Border-l, Properties: border-left, Important: true,
+                Prefix: Border-start, Properties: border-left, Important: true,
                 Values: (null: $Border-width solid $Border-color, 0: 0),
         ),
   // Border-width
@@ -48,35 +48,35 @@ $utilities-Border: (
         ),
   // Rounded Directions
         "Rounded-top": (
-                Prefix: Rounded-t, Properties: border-top-left-radius border-top-right-radius, Important: false,
+                Prefix: Rounded-top, Properties: border-top-left-radius border-top-right-radius, Important: false,
                 Values: (null: #{var(--#{$var-Prefix}border-radius, $Rounded)}),
         ),
         "Rounded-top-0": (
-                Prefix: Rounded-t, Properties: border-top-left-radius border-top-right-radius, Important: true,
+                Prefix: Rounded-top, Properties: border-top-left-radius border-top-right-radius, Important: true,
                 Values: (0: 0),
         ),
         "Rounded-right": (
-                Prefix: Rounded-r, Properties: border-top-right-radius border-bottom-right-radius, Important: false,
+                Prefix: Rounded-end, Properties: border-top-right-radius border-bottom-right-radius, Important: false,
                 Values: (null: #{var(--#{$var-Prefix}border-radius, $Rounded)}),
         ),
         "Rounded-right-0": (
-                Prefix: Rounded-r, Properties: border-top-right-radius border-bottom-right-radius, Important: true,
+                Prefix: Rounded-end, Properties: border-top-right-radius border-bottom-right-radius, Important: true,
                 Values: (0: 0),
         ),
         "Rounded-bottom": (
-                Prefix: Rounded-b, Properties: border-bottom-right-radius border-bottom-left-radius, Important: false,
+                Prefix: Rounded-bottom, Properties: border-bottom-right-radius border-bottom-left-radius, Important: false,
                 Values: (null: #{var(--#{$var-Prefix}border-radius, $Rounded)}),
         ),
         "Rounded-bottom-0": (
-                Prefix: Rounded-b, Properties: border-bottom-right-radius border-bottom-left-radius, Important: true,
+                Prefix: Rounded-bottom, Properties: border-bottom-right-radius border-bottom-left-radius, Important: true,
                 Values: (0: 0),
         ),
         "Rounded-left": (
-                Prefix: Rounded-l, Properties: border-bottom-left-radius border-top-left-radius, Important: false,
+                Prefix: Rounded-start, Properties: border-bottom-left-radius border-top-left-radius, Important: false,
                 Values: (null: #{var(--#{$var-Prefix}border-radius, $Rounded)}),
         ),
         "Rounded-left-0": (
-                Prefix: Rounded-l, Properties: border-bottom-left-radius border-top-left-radius, Important: true,
+                Prefix: Rounded-start, Properties: border-bottom-left-radius border-top-left-radius, Important: true,
                 Values: (0: 0),
         ),
   // Subtractive 1 Side

package/scss/Architecture/Utils/_utilities.scss

@@ -110,7 +110,7 @@ $utilities: (
   /*
   // Sizing Width, Height
   */
-        "Width": (Prefix: W, Properties: width, Important: true, Values: $sizes-percents,),
+        "Width": (Prefix: W, Properties: width, Important: true, Values: $sizes-percents, Responsive: true,),
         "Max-Width": (Prefix: MW, Properties: max-width, Important: true, Values: (100: 100%)),
         "viewport-Width": (Prefix: VW, Properties: width, Important: true, Values: (100: 100vw)),
         "Height": (Prefix: H, Properties: height, Important: true, Values: $sizes-percents,),

package/scss/_header.scss

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