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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qrsln/lootstrap",
-  "version": "22.3.26-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",

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/_pagination.scss

@@ -51,6 +51,9 @@ $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;
     }
 

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/_header.scss

@@ -1,8 +1,8 @@
 
 /*!
- * CSS Compiled on: 2022-03-26
+ * CSS Compiled on: 2022-04-02
  *
- * Lootstrap v22.3.26-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)
 */