coer-elements 2.0.70 → 2.0.72

package/styles/colors.scss

@@ -68,8 +68,8 @@
 
         //App Colors
         'breadcrumbs'   : var(--breadcrumbs-inner),
-        'app-background': var(--background-inner), 
         'containers'    : var(--containers-inner),  
+        'app-background': var(--background-inner), 
 
         //Inputs
         'inputs'       : var(--inputs-inner),
@@ -87,7 +87,10 @@
         'toolbar-text': var(--toolbar-text-inner) 
     ) { 
         // Text 
-        .#{$breakpoint}text-#{$key} { color: $value !important; }
+        .#{$breakpoint}text-#{$key},
+        .#{$breakpoint}color-#{$key} { 
+            color: $value !important; 
+        }
 
         // Backgrounds
         .#{$breakpoint}background-color-#{$key} { background-color: $value !important; }

package/styles/components.scss

@@ -10,7 +10,7 @@
 @use "../components/lib/coer-sidenav/coer-sidenav.component.scss";
 @use "../components/lib/coer-sidenav/coer-menu-option/coer-menu-option.component.scss";
 @use "../components/lib/coer-sidenav/coer-tree-accordion/coer-tree-accordion.component.scss";
-@use "../components/lib/coer-sidenav/coer-toolbar/coer-toolbar.component.scss";
+@use "../components/lib/coer-toolbar/coer-toolbar.component.scss";
 @use "../components/lib/coer-switch/coer-switch.component.scss";
 @use "../components/lib/coer-tab/coer-tab.component.scss"; 
 @use "../tools/lib/coer-alert/coer-alert.component.scss"; 
@@ -342,6 +342,7 @@ coer-textbox,
 coer-numberbox,
 coer-dropdown,
 coer-selectbox,
-coer-filebox {
+coer-filebox,
+login-page {
     display: contents !important;
 }

package/styles/displays.scss

@@ -6,7 +6,7 @@
         'inline':       inline, 
         'inline-block': inline-block, 
         'inline-flex' : inline-flex,
-        'contents': contents   
+        'contents'    : contents   
     ) {   
         .#{$breakpoint}display-#{$key} {  
             display: $value !important;

package/styles/font-size.scss

@@ -0,0 +1,22 @@
+@mixin mixin($breakpoint) {  
+
+    @for $i from 0 through 100 { 
+        .#{$breakpoint}font-size-#{$i}px  {
+            font-size: $i * 1px !important;
+        }
+    }
+
+    @each $key, $value in (
+        'xx-small': xx-small, 
+        'x-small' : x-small, 
+        'small'   : small, 
+        'medium'  : medium, 
+        'large'   : large, 
+        'x-large' : x-large, 
+        'xx-large': xx-large
+        ) {
+        .#{$breakpoint}font-size-#{$key} { 
+            font-size: $value; 
+        }  
+    }
+} 

package/styles/fonts.scss

@@ -12,14 +12,7 @@
 
     .#{$breakpoint}font-weight-bold {
         font-weight: bold !important;
-    }
-
-    //Font Size
-    @for $i from 0 through 100 { 
-        .#{$breakpoint}font-size-#{$i}px  {
-            font-size: $i * 1px !important;
-        }
-    }
+    } 
 } 
 
 

package/styles/index.scss

@@ -1,10 +1,11 @@
 @use "./animations.scss"       as _animations;
-@use "./borders.scss"          as _borders;
+@use "./border.scss"           as _border;
 @use "./colors.scss"           as _colors;
 @use "./components.scss";
 @use "./containers.scss";
 @use "./cursors.scss"          as _cursors;
 @use "./displays.scss"         as _displays;
+@use "./font-size.scss"        as _font-size;
 @use "./fonts.scss"            as _fonts;
 @use "./icons/icons.scss";
 @use "./layout-flex-wrap.scss" as _layout-flex-wrap;
@@ -30,14 +31,34 @@
     'xl-'  : 1200px,  
     'xxl-' : 1400px, 
 ) {   
+    @if ($breakpoint == '') {        
+        @include _animations.mixin($breakpoint);
+        @include _border.mixin($breakpoint);
+        @include _colors.mixin($breakpoint);
+        @include _cursors.mixin($breakpoint);
+        @include _displays.mixin($breakpoint);
+        @include _font-size.mixin($breakpoint);
+        @include _fonts.mixin($breakpoint);
+        @include _layout-flex-wrap.mixin($breakpoint);
+        @include _layout-flex.mixin($breakpoint);
+        @include _layout-grid.mixin($breakpoint); 
+        @include _margins.mixin($breakpoint);
+        @include _orders.mixin($breakpoint);
+        @include _overflow.mixin($breakpoint);
+        @include _padding.mixin($breakpoint);
+        @include _paragraphs.mixin($breakpoint);
+        @include _positions.mixin($breakpoint);
+        @include _width-height.mixin($breakpoint);         
+    }
 
-    @if ($breakpoint == 'mv-') {
+    @else if ($breakpoint == 'mv-') {
         @media (min-width: $min-width) and (max-width: 499px) { 
             @include _animations.mixin($breakpoint);
-            @include _borders.mixin($breakpoint);
+            @include _border.mixin($breakpoint);
             @include _colors.mixin($breakpoint);
             @include _cursors.mixin($breakpoint);
             @include _displays.mixin($breakpoint);
+            @include _font-size.mixin($breakpoint);
             @include _fonts.mixin($breakpoint);
             @include _layout-flex-wrap.mixin($breakpoint);
             @include _layout-flex.mixin($breakpoint);
@@ -55,10 +76,11 @@
     @else {
         @media (min-width: $min-width) { 
             @include _animations.mixin($breakpoint);
-            @include _borders.mixin($breakpoint);
+            @include _border.mixin($breakpoint);
             @include _colors.mixin($breakpoint);
             @include _cursors.mixin($breakpoint);
             @include _displays.mixin($breakpoint);
+            @include _font-size.mixin($breakpoint);
             @include _fonts.mixin($breakpoint);
             @include _layout-flex-wrap.mixin($breakpoint);
             @include _layout-flex.mixin($breakpoint);