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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qrsln/lootstrap",
-  "version": "22.3.2-beta.0",
+  "version": "22.4.2-beta.0",
   "description": "LootStrap is a scss library and is still in beta! There is much to improve!",
   "style": "dist/css/lootstrap.css",
   "sass": "scss/lootstrap.scss",
@@ -9,6 +9,7 @@
     "url": "git+https://github.com/krsln/LootStrap.git"
   },
   "keywords": [
+    "Lootstrap",
     "css",
     "sass",
     "scss",
@@ -40,19 +41,18 @@
     "sass:Watch": "sass  --watch scss/:dist/css/",
     "css-compile-TEST": "sass --style expanded --source-map --embed-sources --no-error-css Tests:dist/Tests",
     "css-clean-main-TEST:SassDoesnt": "cleancss -O1 --format beautify --output dist/Tests/lootstrap-test.css dist/Tests/lootstrap-test.css",
-
     "/************        /        ************/": " --- End --- ",
     "p:live": "npm run css && npm publish --access public",
     "p:beta": "npm run css && npm publish --tag beta --access public"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.2",
+    "autoprefixer": "^10.4.4",
     "clean-css-cli": "^5.5.2",
     "nodemon": "^2.0.15",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.5",
+    "postcss": "^8.4.12",
     "postcss-cli": "^9.1.0",
     "rimraf": "^3.0.2",
-    "sass": "^1.49.0"
+    "sass": "^1.49.9"
   }
 }

package/scss/Abstracts/Functions/_color.scss

@@ -120,8 +120,8 @@ $Black: hsl(0, 0%, 0%) !default;
 
 /// Set Text Color Entirely based on bg color (Black or White)
 /// Usage  => @include Text-color($Warning);
-@function Text-color($n) {
-  $color-brightness: round((red($n)*299)+(green($n)*587)+ math.div(blue($n) * 114, 1000));
+@function Text-color($color) {
+  $color-brightness: round((red($color)*299)+(green($color)*587)+ math.div(blue($color) * 114, 1000));
   $light-color: round((red(#ffffff)*299)+(green(#ffffff)*587)+ math.div(blue(#ffffff) * 114, 1000));
   @if abs($color-brightness) < math.div($light-color, 2) {
     @return $White;

package/scss/Abstracts/Mixins/_theme.scss

@@ -25,7 +25,7 @@
     .Accent-#{$keyAccent} {
       --#{$var-Prefix}bg-accent-hsl: #{colorToHSL($valueAccent)};
       --#{$var-Prefix}bg-accent: #{$valueAccent};
-      --#{$var-Prefix}fg-accent: #{Best-fg-color($valueAccent)};
+      --#{$var-Prefix}fg-accent: #{Text-color($valueAccent)};
     }
   }
 
@@ -126,14 +126,14 @@
 
         // Foreground colors
         --#{$Prefix}fg-muted: #{$C-disabled};
-        --#{$Prefix}fg-hue: #{Best-fg-color($C-hue)};
-        --#{$Prefix}fg-accent: #{Best-fg-color($C-hue)};
+        --#{$Prefix}fg-hue: #{Text-color($C-hue)};
+        --#{$Prefix}fg-accent: #{Text-color($C-hue)};
 
-        --#{$Prefix}fg-body: #{Best-fg-color($C-body)};
-        --#{$Prefix}fg-surface: #{Best-fg-color($C-surface)};
+        --#{$Prefix}fg-body: #{Text-color($C-body)};
+        --#{$Prefix}fg-surface: #{Text-color($C-surface)};
 
-        --#{$Prefix}fg-lighter: #{Best-fg-color($C-lighter)};
-        --#{$Prefix}fg-lightest: #{Best-fg-color($C-lightest)};
+        --#{$Prefix}fg-lighter: #{Text-color($C-lighter)};
+        --#{$Prefix}fg-lightest: #{Text-color($C-lightest)};
 
         --#{$Prefix}border-hsl: #{colorToHSL($C-border)};
         --#{$Prefix}shadow-hsl: #{colorToHSL($C-shadow)};
@@ -151,7 +151,7 @@
         --#{$var-Prefix}bg-accent-hsl: #{colorToHSL($C-accent)};
 
         --#{$var-Prefix}bg-accent: #{$C-accent};
-        --#{$var-Prefix}fg-accent: #{Best-fg-color($C-accent)};
+        --#{$var-Prefix}fg-accent: #{Text-color($C-accent)};
 
         // Overlay with white background
         //@each $per in (0, 5, 7, 8, 9, 11, 12, 14, 15, 16) {

package/scss/Architecture/Components/_alert.scss

@@ -36,6 +36,16 @@ $Customized: 'alert-';
     }
   }
 
+  &.Alert-rounded {
+    border-radius: 50rem 0 50rem 50rem !important;
+  }
+
+  &.Alert-none {
+    .Alert-icon {
+      color: hsla($Bg-accent-hsl, .33);
+    }
+  }
+
   &.Alert-outline {
     color: $Fg-lightest;
     background-color: $Bg-lightest;

package/scss/Architecture/Components/_breadcrumb.scss

@@ -42,6 +42,7 @@ $Breadcrumb-divider-verticalLine: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0
   .Breadcrumb-item {
     display: inline-block;
     text-align: center;
+    color: $Fg-surface;
 
     .Breadcrumb-Link {
       padding: 0 .3rem;

package/scss/Architecture/Components/_card.scss

@@ -6,11 +6,11 @@
 $Customized: 'card-';
 @import "../_color-scheme";
 
-$border-radius: .5rem;
+$card-radius: .25rem;
 
 .Card {
-  display: block;
   position: relative;
+  display: block;
   overflow: visible;
 
   color: $Fg-surface;
@@ -19,9 +19,10 @@ $border-radius: .5rem;
   border: $Border;
   box-shadow: $Shadow;
 
+
   padding: 0;
   margin-bottom: 1rem;
-  border-radius: $border-radius;
+  border-radius: $card-radius;
   min-width: 0;
   background-clip: border-box;
 
@@ -29,8 +30,8 @@ $border-radius: .5rem;
     position: relative;
     overflow: hidden;
 
-    border-top-left-radius: $border-radius;
-    border-top-right-radius: $border-radius;
+    border-top-left-radius: $card-radius;
+    border-top-right-radius: $card-radius;
   }
 
   .Card-header, .Card-footer {
@@ -44,7 +45,7 @@ $border-radius: .5rem;
       border-bottom: $Border;
 
       :first-child {
-        border-radius: calc(.5rem - 1px) calc(.5rem - 1px) 0 0;
+        border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
       }
     }
 
@@ -56,12 +57,10 @@ $border-radius: .5rem;
   }
 
   &.Card-body, .Card-body {
+    position: relative;
     flex: 1 1 auto;
     padding: 1rem 1.5rem;
 
-    //color: $Component-fg-light;
-    //background-color: $Component-bg-light;
-
     .Card-title {
       margin-bottom: .5rem;
 
@@ -78,3 +77,56 @@ $border-radius: .5rem;
     }
   }
 }
+
+.Card-horizontal {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+
+  .Card-img {
+    &:not(:empty) {
+      width: 40%;
+    }
+
+    border-top-right-radius: 0;
+    border-bottom-left-radius: $card-radius;
+  }
+
+  &.Card-body, .Card-body {
+    width: 60%;
+
+    padding: 0.5rem 1rem;
+  }
+}
+
+// https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488
+
+/*
+  ##Device = Most of the Smartphones Mobiles (Portrait)
+  ##Screen = B/w 320px to 479px
+*/
+@media (min-width: 320px) and (max-width: 480px) {
+
+  .Card {
+
+    .Card-header, .Card-footer {
+      padding: 0.5rem 1.25rem;
+    }
+
+    &.Card-body, .Card-body {
+      padding: 0.75rem 1.25rem;
+      font-size: 0.75em;
+    }
+  }
+
+  .Card-horizontal {
+    .Card-img {
+      border-bottom-left-radius: 0;
+      border-top-right-radius: $card-radius;
+
+      &:not(:empty) {
+        flex: 0 0 100%;
+      }
+    }
+  }
+}

package/scss/Architecture/Components/_loader.scss

@@ -9,51 +9,46 @@
 
 .Loader {
   display: flex;
-  --status: '0%';
-  --loaded: 0;
+  --ls-loader-status: '0%';
+  --ls-loader-loaded: 0;
 
-  .Square {
-    .Square-inner {
+  .Status {
+    display: inline-block;
+    position: absolute;
 
-      .Status {
-        display: inline-block;
-        position: absolute;
-
-        &:before {
-          content: var(--status, "0%");
-        }
-      }
+    &:before {
+      content: var(--ls-loader-status, "0%");
+    }
+  }
 
-      svg {
-        width: 100%;
-        height: auto;
-        top: 0;
-        left: 0;
+  svg {
+    width: 100%;
+    height: auto;
+    top: 0;
+    left: 0;
 
-        text {
-          fill: currentColor;
-          dominant-baseline: central;
-          text-anchor: middle;
-        }
+    text {
+      fill: currentColor;
+      dominant-baseline: central;
+      text-anchor: middle;
+    }
 
-        g {
-          //transform-box: fill-box;
-          transform-origin: center;
-          transform: rotate(-90deg);
-        }
+    g {
+      //transform-box: fill-box;
+      transform-origin: center;
+      transform: rotate(-90deg);
+    }
 
-        .circle {
-          fill: none;
-          stroke: currentColor;
-          stroke-width: 3%;
-          stroke-linecap: round;
-          animation: loader-progress 1s ease-out forwards;
+    .circle {
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 3%;
+      stroke-linecap: round;
+      animation: loader-progress 1s ease-out forwards;
 
-          &:first-of-type {
-            stroke-dasharray: var(--loaded, 0), 100;
-            transition: stroke-dasharray 0.4s cubic-bezier(0.04, 0.24, 0.18, 1);
-          }
-        }
+      &:first-of-type {
+        stroke-dasharray: var(--ls-loader-loaded, 0), 100;
+        transition: stroke-dasharray 0.4s cubic-bezier(0.04, 0.24, 0.18, 1);
       }
     }
   }

package/scss/Architecture/Components/_nav.scss

@@ -46,6 +46,10 @@ $Customized: false;
 .Nav-tabs {
   border-bottom: 1px solid $Border-color;
 
+  .Nav-item {
+    padding-right: 2px;
+  }
+
   .Nav-link {
     margin-bottom: -1px;
     background: none;
@@ -88,4 +92,40 @@ $Customized: false;
     color: $Fg-accent;
     background-color: $Bg-accent;
   }
-}
+}
+
+.Nav-material {
+  .Nav-link {
+    background: none;
+    border: 0;
+
+    color: $Fg-hue;
+    border-bottom: 2px solid transparent;
+
+    &:hover,
+    &:focus {
+      color: $Fg-lighter;
+      background-color: $Bg-lighter;
+    }
+  }
+
+  .Nav-link.Active,
+  .Show > .Nav-link {
+    border-color: $Bg-accent;
+    color: $Bg-accent;
+    //background-color: orange;
+  }
+}
+
+// Tabbable tabs
+// Hide tabbable panes to start, show them when `.active`
+
+.Tab-content {
+  .Tab-pane {
+    display: none;
+
+    &.Active {
+      display: block;
+    }
+  }
+}

package/scss/Architecture/Components/_pagination.scss

@@ -9,7 +9,7 @@ $Customized: false;
 .Pagination {
   display: flex;
   position: relative;
-  overflow: hidden;
+  //overflow: hidden;
 
   align-items: center;
   justify-content: center;
@@ -20,6 +20,8 @@ $Customized: false;
   .Square {
     user-select: none; /* Standard */
 
+    font-size: 1.25em;
+
     max-width: 42px;
     max-height: 42px;
     //color: $Component-fg-secondary;
@@ -28,10 +30,16 @@ $Customized: false;
     border: 1px solid transparent;
     border-radius: $Border-radius;
 
-    transition: border-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+    transition: border-color 0.15s cubic-bezier(0.3, 0, 0.5, 1);
 
     &:nth-child(-n+2), &:nth-last-of-type(-n+2) {
-      font-size: 1.3em;
+      color: $Bg-accent;
+      font-size: 1.5em;
+      margin: 0;
+
+      &.Disabled {
+        color: $Fg-muted;
+      }
     }
 
     &:not(.Disabled):not(.Active) {
@@ -43,21 +51,30 @@ $Customized: false;
       border-color: $Border-color;
 
       color: $Fg-lighter;
+      &:nth-child(-n+2), &:nth-last-of-type(-n+2){
+        color: $Bg-accent;
+      }
       background-color: $Bg-lighter;
     }
 
-    &.Disabled {
-      color: $Fg-muted;
-    }
-
     &.Active {
       color: $Fg-accent;
       background-color: $Bg-accent;
 
       border-color: transparent;
 
+      font-weight: bolder;
+
       box-shadow: $Shadow;
-      transition: all 0.2s linear;
+      transition: all 0.15s linear;
+    }
+
+    @media (max-width: 767px) {
+      font-size: .8em;
+
+      &:nth-child(-n+2), &:nth-last-of-type(-n+2) {
+        font-size: 1em;
+      }
     }
   }
 }

package/scss/Architecture/Components/_rating.scss

@@ -8,108 +8,43 @@
 $Customized: false;
 @import "../_color-scheme";
 
-//$svg-Heart: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 0 52 50'%3E%3Cg %3E%3Cpath d='M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543 c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503 c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z'/%3E%3C/g%3E%3C/svg%3E%0A");
-//$svg-Star: url("data:image/svg+xml, %3Csvg viewBox='0 0 190 190' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,10 40,180 190,60 10,60 160,180' /%3E%3C/svg%3E%0A");
-$svg-Heart: url("data:image/svg+xml;base64,IDxzdmcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJyB2aWV3Qm94PSctMSAwIDUyIDUwJz48ZyA+PHBhdGggZD0nTTI0Ljg1LDEwLjEyNmMyLjAxOC00Ljc4Myw2LjYyOC04LjEyNSwxMS45OS04LjEyNWM3LjIyMywwLDEyLjQyNSw2LjE3OSwxMy4wNzksMTMuNTQzIGMwLDAsMC4zNTMsMS44MjgtMC40MjQsNS4xMTljLTEuMDU4LDQuNDgyLTMuNTQ1LDguNDY0LTYuODk4LDExLjUwM0wyNC44NSw0OEw3LjQwMiwzMi4xNjVjLTMuMzUzLTMuMDM4LTUuODQtNy4wMjEtNi44OTgtMTEuNTAzIGMtMC43NzctMy4yOTEtMC40MjQtNS4xMTktMC40MjQtNS4xMTlDMC43MzQsOC4xNzksNS45MzYsMiwxMy4xNTksMkMxOC41MjIsMiwyMi44MzIsNS4zNDMsMjQuODUsMTAuMTI2eicvPjwvZz48L3N2Zz4K");
-$svg-Star: url("data:image/svg+xml;base64,IDxzdmcgdmlld0JveD0nMCAwIDE5MCAxOTAnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBvbHlnb24gcG9pbnRzPScxMDAsMTAgNDAsMTgwIDE5MCw2MCAxMCw2MCAxNjAsMTgwJyAvPjwvc3ZnPgo=");
-
-$bg-Star: #dbab09;
-$bg-Heart: hsl(354, 66%, 54%);
-
 .Rating {
   display: flex;
   position: relative;
   overflow: visible;
   cursor: pointer;
 
-  .Square {
+  //noinspection ALL
+  RatingItem, .Square {
+    margin: 0;
     border: none;
     background: transparent;
 
-    $bg-color: var(--#{$var-Prefix}rating-bg-color);
-    $color: var(--#{$var-Prefix}rating-color);
-
+    .Rating-inner,
     .Square-inner:not(.Rating-value) {
       color: $Fg-surface;
       background-color: $Bg-surface;
 
-      &.IsFraction {
-        background: linear-gradient(to right, $bg-color 0%, $Bg-lightest 100%);
-        border-image: linear-gradient(to right, $bg-color 0%, $Bg-lightest 100%) 1;
-        color: $color;
-      }
-
-      &.IsSelected, &.IsHovered {
-        border-color: $bg-color;
-        background: $bg-color;
-        color: $color;
-
-        &.IsFraction {
-          background: linear-gradient(to right, $bg-color 0%, $Bg-lightest 100%);
-          border-image: linear-gradient(to right, $bg-color 0%, $Bg-lightest 100%) 1;
-          color: $color;
-        }
-      }
-    }
-  }
-}
-
-.Rating-star {
-  --#{$var-Prefix}rating-mask: #{$svg-Star};
-  --#{$var-Prefix}rating-bg-color: #{$bg-Star};
-  --#{$var-Prefix}rating-color: #{$Fg-hue};
-}
-
-.Rating-heart {
-  --#{$var-Prefix}rating-mask: #{$svg-Heart};
-  --#{$var-Prefix}rating-bg-color: #{$bg-Heart};
-  --#{$var-Prefix}rating-color: #{$Fg-hue};
-}
-
-.Rating-text {
-  --#{$var-Prefix}rating-bg-color: #{$Bg-accent};
-  --#{$var-Prefix}rating-color: #{$Fg-accent};
-
-  .Square {
-    .Square-inner:not(.Rating-value) {
       margin: 1px;
       border: 4px solid $Bg-lightest;
-      //border: 4px solid $Border-color;
 
-      //background-color: white;
-      color: $Fg-surface;
-      background-color: $Bg-surface;
-    }
-  }
-}
-
-// TODO: Rating-mask
-.Rating-mask {
-  .Square {
-    filter: drop-shadow(0 3px 1px rgba(0, 0, 0, 0.2));
-
-    .Square-inner:not(.Rating-value) {
-      //@extend .Svg-mask !optional;
-      display: flex;
-
-      mask: var(--svg-icon);
-      mask-repeat: no-repeat;
-      mask-position: center;
-      mask-size: contain;
+      &.Fraction {
+        background: linear-gradient(to right, var(--#{$var-Prefix}rating-bg, $Bg-accent) 0%, $Bg-lightest 100%);
+        border-image: linear-gradient(to right, var(--#{$var-Prefix}rating-bg, $Bg-accent) 0%, $Bg-lightest 100%) 1;
+        color: $Fg-accent;
+      }
 
-      mask-clip: inherit;
-    }
-  }
-}
+      &.Selected, &.Hovered {
+        border-color: var(--ls-rating-bg, $Bg-accent);
+        background: var(--ls-rating-bg, $Bg-accent);
+        color: $Fg-accent;
 
-.Rating-star, .Rating-heart {
-  .Square {
-    margin: 0;
-    filter: drop-shadow(0 3px 1px rgba(0, 0, 0, 0.2));
-
-    .Square-inner:not(.Rating-value) {
-      mask: var(--#{$var-Prefix}rating-mask) center no-repeat;
-      mask-size: auto;
+        &.Fraction {
+          background: linear-gradient(to right, var(--#{$var-Prefix}rating-bg, $Bg-accent) 0%, $Bg-lightest 100%);
+          border-image: linear-gradient(to right, var(--#{$var-Prefix}rating-bg, $Bg-accent) 0%, $Bg-lightest 100%) 1;
+          color: $Fg-accent;
+        }
+      }
     }
   }
 }

package/scss/Architecture/Components/_scrollbar.scss

@@ -7,7 +7,7 @@ $Customized: false;
 @import "../_color-scheme";
 
 .Scrollbar {
-  scrollbar-gutter: stable;
+  scrollbar-gutter: auto;
 
   $width: var(--#{$var-Prefix}scrollbar-width, .8rem);
   $radius: var(--#{$var-Prefix}scrollbar-radius, .2rem);

package/scss/Architecture/Components/_spinners.scss

@@ -3,6 +3,9 @@
 // ???
 // ===========================================================================
 
+$Customized: false;
+@import "../_color-scheme";
+
 /*
 // Spinner from bootstrap
 */
@@ -19,6 +22,8 @@
   border-right-color: transparent;
   border-radius: 50%;
 
+  color: $Bg-accent;
+
   animation: .75s linear infinite spin-CW;
 }
 
@@ -28,6 +33,8 @@
   height: 2rem;
   margin: .25rem;
 
+  color: $Bg-accent;
+
   vertical-align: text-bottom;
   background-color: currentColor;
   border-radius: 50%;
@@ -41,9 +48,10 @@
 
 .Spinner-vortex {
   position: relative;
-  display: block;
-  width: 160px;
-  height: 160px;
+  display: inline-block;
+
+  min-width: 120px;
+  min-height: 120px;
 
   span {
     position: absolute;
@@ -77,14 +85,12 @@
       }
     }
   }
-}
-
-.Spinner-vortex-square {
-  @extend .Spinner-vortex;
 
-  span {
-    &:before {
-      border-radius: 10px;
+  &.Spinner-vortex-square {
+    span {
+      &:before {
+        border-radius: 10px;
+      }
     }
   }
 }

package/scss/Architecture/Components/_square.scss

@@ -6,9 +6,10 @@
 
 .Square {
   position: relative;
+  display: flex;
   flex: 1 0 auto;
   margin: 2px;
-  font-weight: bold;
+  //font-weight: bold;
   user-select: none;
 
   &:after {