coer-elements 2.0.23 → 2.0.26

package/styles/colors.scss

@@ -13,126 +13,117 @@
 
     //Action Colors
     --primary-inner:     var(--primary,     var(--orange));
-    --secondary-inner:   var(--secondary,   var(--gray));
-    --success-inner:     var(--success,     var(--green));
+    --secondary-inner:   var(--secondary,   var(--gray)  );
+    --success-inner:     var(--success,     var(--green) );
     --warning-inner:     var(--warning,     var(--yellow));
-    --danger-inner:      var(--danger,      var(--red));
+    --danger-inner:      var(--danger,      var(--red)   );
     --navigation-inner:  var(--navigation,  var(--orange));
-    --information-inner: var(--information, var(--blue));
-    
-    //App Colors
-    --breadcrumbs-inner: var(--breadcrumbs, var(--blue)); 
-    --containers-inner:  var(--containers,  var(--white));
-    --background-inner:  var(--app-background,  var(--smoke));
-   
-    //Sidenav
-    --sidenav-inner:        var(--sidenav,        var(--black));
-    --sidenav-text-inner:   var(--sidenav-text,   var(--smoke));
-    --sidenav-active-inner: var(--sidenav-active, var(--orange));
-   
-    //Toolbar
-    --toolbar-inner:      var(--toolbar,      var(--smoke));
-    --toolbar-text-inner: var(--toolbar-text, var(--black));
-} 
-
-$colors: (
-    //Fixed colors
-    'transparent': transparent, 
-    'blue'  : var(--blue), 
-    'gray'  : var(--gray), 
-    'green' : var(--green), 
-    'yellow': var(--yellow), 
-    'red'   : var(--red), 
-    'smoke' : var(--smoke), 
-    'black' : var(--black), 
-    'orange': var(--orange), 
-    'white' : var(--white), 
-    'purple': var(--purple),
-
-    //Action Colors
-    'primary'    : var(--primary-inner), 
-    'secondary'  : var(--secondary-inner), 
-    'success'    : var(--success-inner), 
-    'warning'    : var(--warning-inner), 
-    'danger'     : var(--danger-inner), 
-    'navigation' : var(--navigation-inner), 
-    'information': var(--information-inner),
+    --information-inner: var(--information, var(--blue)  );  
 
     //App Colors
-    'breadcrumbs'   : var(--breadcrumbs-inner),
-    'app-background': var(--background-inner), 
-    'containers'    : var(--containers-inner),  
+    --breadcrumbs-inner: var(--breadcrumbs,    var(--blue) ); 
+    --containers-inner:  var(--containers,     var(--white));
+    --background-inner:  var(--app-background, var(--smoke));   
 
     //Sidenav
-    'sidenav'       : var(--sidenav-inner),    
-    'sidenav-text'  : var(--sidenav-text-inner),
-    'sidenav-active': var(--sidenav-active-inner),
+    --sidenav-inner:        var(--sidenav,        var(--black) );
+    --sidenav-text-inner:   var(--sidenav-text,   var(--smoke) );
+    --sidenav-active-inner: var(--sidenav-active, var(--orange));  
 
     //Toolbar
-    'toolbar'     : var(--toolbar-inner),    
-    'toolbar-text': var(--toolbar-text-inner) 
-);
-
-    
-@each $key, $value in $colors {
-    //Text
-    .text-#{$key} { 
-        color: $value !important;
-    }
-    
-    .text-#{$key}-bold {
-        color: $value !important;
-        font-weight: bold !important;
-    } 
-    
-    //Borders
-    .border-color-#{$key} {
-        border-color: $value !important;
-    }
-
-    .border-color-#{$key}-top {
-        border-top-color: $value !important;
-    }
-
-    .border-color-#{$key}-right {
-        border-right-color: $value !important;
-    }
-
-    .border-color-#{$key}-bottom {
-        border-bottom-color: $value !important;
-    }
-
-    .border-color-#{$key}-left {
-        border-left-color: $value !important;
-    }
-
-    //Backgrounds
-    .background-color-#{$key} {
-        background-color: $value !important;
-    }
-    
-    .background-color-#{$key}-border {
-        background-color: $value !important;
-        border-color: $value !important;
-    }
-
-    .background-color-#{$key}-border-top {
-        background-color: $value !important;
-        border-top-color: $value !important;
-    }
-
-    .background-color-#{$key}-border-right {
-        background-color: $value !important;
-        border-right-color: $value !important;
-    }
+    --toolbar-inner:      var(--toolbar,      var(--smoke));
+    --toolbar-text-inner: var(--toolbar-text, var(--black));
+} 
 
-    .background-color-#{$key}-border-bottom {
-        background-color: $value !important;
-        border-bottom-color: $value !important;
-    }
 
-    .background-color-#{$key}-border-left {
-        background-color: $value !important;
-        border-left-color: $value !important;
+@mixin mixin($breakpoint) {
+    @each $key, $value in (
+        //Fixed colors
+        'transparent': transparent, 
+        'blue'  : var(--blue), 
+        'gray'  : var(--gray), 
+        'green' : var(--green), 
+        'yellow': var(--yellow), 
+        'red'   : var(--red), 
+        'smoke' : var(--smoke), 
+        'black' : var(--black), 
+        'orange': var(--orange), 
+        'white' : var(--white), 
+        'purple': var(--purple),
+
+        //Action Colors
+        'primary'    : var(--primary-inner), 
+        'secondary'  : var(--secondary-inner), 
+        'success'    : var(--success-inner), 
+        'warning'    : var(--warning-inner), 
+        'danger'     : var(--danger-inner), 
+        'navigation' : var(--navigation-inner), 
+        'information': var(--information-inner),
+
+        //App Colors
+        'breadcrumbs'   : var(--breadcrumbs-inner),
+        'app-background': var(--background-inner), 
+        'containers'    : var(--containers-inner),  
+
+        //Sidenav
+        'sidenav'       : var(--sidenav-inner),    
+        'sidenav-text'  : var(--sidenav-text-inner),
+        'sidenav-active': var(--sidenav-active-inner),
+
+        //Toolbar
+        'toolbar'     : var(--toolbar-inner),    
+        'toolbar-text': var(--toolbar-text-inner) 
+    ) { 
+        // Text 
+        .#{$breakpoint}text-#{$key} { color: $value !important; }
+
+        // Backgrounds
+        .#{$breakpoint}background-color-#{$key} { background-color: $value !important; }
+        
+        // Outline
+        .#{$breakpoint}outline-color-#{$key} { outline-color: $value !important; } 
+
+        // Borders
+        .#{$breakpoint}border-color-#{$key} { border-color: $value !important; } 
+        .#{$breakpoint}border-color-#{$key}-top { border-top-color: $value !important; }
+        .#{$breakpoint}border-color-#{$key}-right { border-right-color: $value !important; }
+        .#{$breakpoint}border-color-#{$key}-bottom { border-bottom-color: $value !important; }
+        .#{$breakpoint}border-color-#{$key}-left { border-left-color: $value !important; } 
+
+        // Borders X - Y
+        .#{$breakpoint}border-color-#{$key}-y {
+            border-top-color: $value !important;
+            border-bottom-color: $value !important;
+        }
+        
+        .#{$breakpoint}border-color-#{$key}-x {
+            border-left-color: $value !important;
+            border-right-color: $value !important;
+        }
+
+        // Borders CUBE 
+        .#{$breakpoint}border-color-#{$key}-trb { 
+            border-top-color: $value !important;
+            border-right-color: $value !important;
+            border-bottom-color: $value !important;
+        }
+
+        .#{$breakpoint}border-color-#{$key}-rbl { 
+            border-right-color: $value !important;
+            border-bottom-color: $value !important;
+            border-left-color: $value !important;
+        }
+
+        .#{$breakpoint}border-color-#{$key}-blt { 
+            border-bottom-color: $value !important;
+            border-left-color: $value !important;
+            border-top-color: $value !important;
+        } 
+
+        .#{$breakpoint}border-color-#{$key}-ltr {
+            border-left-color: $value !important;
+            border-top-color: $value !important;
+            border-right-color: $value !important;
+        }
     }
-}
+} 

package/styles/components.scss

@@ -21,3 +21,21 @@
 @use "../tools/lib/coer-alert/coer-alert.component.scss"; 
 
 
+input[type="file"] {
+    display: none !important;
+}
+
+.readonly {
+    color: black !important;
+    background-color: #bbbbbb83 !important;
+}
+
+.tooltip-inner {
+    min-width: 125px;
+    max-width: 250px;
+    min-height: 35px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    word-break: break-word;
+}  

package/styles/cursors.scss

@@ -1,19 +1,13 @@
-.cursor-default {
-    cursor: default !important;
-}
-
-.cursor-pointer {
-    cursor: pointer !important;
-}
-
-.cursor-wait {
-    cursor: wait !important;
-}
-
-.cursor-grab {
-    cursor: grab !important;
-}
-
-.cursor-grabbing {
-    cursor: grabbing !important;
+@mixin mixin($breakpoint) {
+    @each $key, $value in ( 
+        'default'  : default, 
+        'pointer'  : pointer, 
+        'wait'     : wait,
+        'grab'     : grab,
+        'grabbing' : grabbing
+    ) {   
+        .#{$breakpoint}cursor-#{$key} {
+            cursor: $value !important;
+        }
+    }
 }

package/styles/{font.scss → fonts.scss}

@@ -1,3 +1,9 @@
+* {
+    font-family: sans-serif;
+    letter-spacing: normal;
+}
+
+
 //Font Weight
 .font-weight-normal { 
     font-weight: normal !important;
@@ -9,7 +15,7 @@
 
 
 //Font Size
-@for $i from 1 through 50 { 
+@for $i from 1 through 100 { 
     .font-size-#{$i}px  {
         font-size: $i * 1px !important;
     }

package/styles/icons/icons-fill-none.scss

@@ -0,0 +1,3 @@
+$icons: (
+    'bell',
+);

package/styles/icons/icons-fill.scss

@@ -0,0 +1,21 @@
+$icons: (
+    'alarm',
+    'bell',
+    'cloud',
+    'dot',
+    'bulb-idea',
+    'components',
+    'css',
+    'download',
+    'gear',
+    'heart',
+    'house',
+    'html',
+    'javascript',
+    'pin-geo',
+    'screwdriver-wrench',
+    'toolbox',
+    'trash-can',
+    'trophy',
+    'user'
+);

package/styles/icons/icons-regular-none.scss

@@ -0,0 +1,3 @@
+$icons: (
+    'bell'
+);

package/styles/icons/icons-regular.scss

@@ -0,0 +1,17 @@
+$icons: (
+    'alarm',
+    'array',
+    'arrows-sync',
+    'bars',
+    'bell',
+    'cloud',
+    'components',
+    'developer',
+    'envelope',
+    'heart',
+    'pin-geo',
+    't',
+    'trash-can',
+    'trophy',
+    'whatsapp',
+);

package/styles/icons/icons.scss

@@ -0,0 +1,67 @@
+@use "./icons-regular.scss"      as regular;
+@use "./icons-regular-none.scss" as regular-none;
+@use "./icons-fill.scss"         as fill;
+@use "./icons-fill-none.scss"    as fill-none;
+
+
+@mixin Icon() {
+    min-width: 10px !important;
+    min-height: 10px !important; 
+    width: 1em !important;
+    height: 1em !important;
+    mask-size: contain !important; 
+    mask-repeat: no-repeat !important;
+    mask-position: center !important; 
+    display: inline-block !important; 
+    background-color: currentColor !important;
+}
+
+
+.coer-icon {
+    @include Icon();
+} 
+
+
+.icon-mirror-X {
+    transform: rotateX(180deg) !important;
+} 
+
+.icon-mirror-Y {
+    transform: rotateY(180deg) !important;
+} 
+
+
+//Regular 
+@each $icon in regular.$icons {
+    .icon-#{$icon} { 
+        @include Icon();
+        mask-image: url('../svg/regular/' + $icon + '.svg');
+    } 
+}
+
+
+//Regular None 
+@each $icon in regular-none.$icons {
+    .icon-#{$icon}.icon-none { 
+        @include Icon();
+        mask-image: url('../svg/regular/none/' + $icon + '.none.svg');
+    } 
+}
+
+
+//Fill 
+@each $icon in fill.$icons {
+    .icon-#{$icon}.icon-fill { 
+        @include Icon();
+        mask-image: url('../svg/fill/' + $icon + '.fill.svg');
+    } 
+}
+
+
+//Fill None 
+@each $icon in fill-none.$icons {
+    .icon-#{$icon}.icon-fill.icon-none { 
+        @include Icon();
+        mask-image: url('../svg/fill/none/' + $icon + '.fill.none.svg');
+    } 
+} 

package/styles/index.scss

@@ -1,56 +1,86 @@
-@use "./animations.scss";
-@use "./border.scss";
-@use "./colors.scss";
+@use "sass:map";
+@use "./animations.scss"       as _animations;
+@use "./borders.scss"          as _borders;
+@use "./colors.scss"           as _colors;
 @use "./components.scss";
 @use "./containers.scss";
-@use "./cursors.scss";
-@use "./font.scss";
-@use "./icons.scss";
-@use "./layout-flex-wrap.scss";
-@use "./layout-flex.scss";
-@use "./layout-grid.scss";
-@use "./margin.scss";
-@use "./overflow.scss";
-@use "./padding.scss";
-@use "./paragraph";
-@use "./position.scss";
-@use "./scroll-bar.scss"; 
-@use "./width-height.scss"; 
+@use "./cursors.scss"          as _cursors;
+@use "./fonts.scss";
+@use "./icons/icons.scss";
+@use "./layout-flex-wrap.scss" as _layout-flex-wrap;
+@use "./layout-flex.scss"      as _layout-flex;
+@use "./layout-grid.scss"      as _layout-grid;
+@use "./margins.scss"          as _margins;
+@use "./overflow.scss"         as _overflow;
+@use "./paddings.scss"         as _padding;
+@use "./paragraphs"            as _paragraphs;
+@use "./positions.scss"        as _positions;
+@use "./scroll-bars.scss"; 
+@use "./width-height.scss"     as _width-height; 
+ 
+ 
 
 
-* {
-    font-family: sans-serif;
-    letter-spacing: normal;
-}
+//BREAKPOINTS
+$prefix: '-';
+@each $breakpoint, $range in (      
+    ''   : (),
+    'xs' : ('min': 0px,    'max': 575px), 
+    'sm' : ('min': 576px,  'max': 767px), 
+    'md' : ('min': 768px,  'max': 991px), 
+    'lg' : ('min': 992px,  'max': 1199px), 
+    'xl' : ('min': 1200px, 'max': 1399px), 
+    'xxl': ('min': 1400px)
+) { 
+    @if($breakpoint == '') {
+        @include _animations.mixin($breakpoint);
+        @include _borders.mixin($breakpoint);
+        @include _colors.mixin($breakpoint);
+        @include _cursors.mixin($breakpoint);
+        @include _layout-flex-wrap.mixin($breakpoint);
+        @include _layout-flex.mixin($breakpoint);
+        @include _layout-grid.mixin($breakpoint); 
+        @include _margins.mixin($breakpoint);
+        @include _overflow.mixin($breakpoint);
+        @include _padding.mixin($breakpoint);
+        @include _paragraphs.mixin($breakpoint);
+        @include _positions.mixin($breakpoint);
+        @include _width-height.mixin($breakpoint); 
+    }
 
-h1, h2, h3, h4, h5, h6, p, pre, hr, figure, fieldset {
-    margin: 0px;
-    padding: 0px;
-}
-
-input[type="file"] {
-    display: none !important;
-}
-
-.readonly {
-    color: black !important;
-    background-color: #bbbbbb83 !important;
-}
-
-.no-selection::selection {
-    background-color: transparent !important;
-}    
-
-.fill-space {
-    flex: 1 1 auto;
-} 
-
-.tooltip-inner {
-    min-width: 125px;
-    max-width: 250px;
-    min-height: 35px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    word-break: break-word;
-}
+    @else if($breakpoint == 'xxl') {
+        @media (min-width: map.get($range, 'min')) { 
+            @include _animations.mixin($breakpoint + $prefix);
+            @include _borders.mixin($breakpoint + $prefix);
+            @include _colors.mixin($breakpoint + $prefix);
+            @include _cursors.mixin($breakpoint + $prefix);
+            @include _layout-flex-wrap.mixin($breakpoint + $prefix);
+            @include _layout-flex.mixin($breakpoint + $prefix);
+            @include _layout-grid.mixin($breakpoint + $prefix);
+            @include _margins.mixin($breakpoint + $prefix);
+            @include _overflow.mixin($breakpoint + $prefix);
+            @include _padding.mixin($breakpoint + $prefix);
+            @include _paragraphs.mixin($breakpoint + $prefix);
+            @include _positions.mixin($breakpoint + $prefix);
+            @include _width-height.mixin($breakpoint + $prefix);
+        }
+    }
+    
+    @else {
+        @media (min-width: map.get($range, 'min')) and (max-width: map.get($range, 'max')) {
+            @include _animations.mixin($breakpoint + $prefix);
+            @include _borders.mixin($breakpoint + $prefix);
+            @include _colors.mixin($breakpoint + $prefix);
+            @include _cursors.mixin($breakpoint + $prefix);
+            @include _layout-flex-wrap.mixin($breakpoint + $prefix);
+            @include _layout-flex.mixin($breakpoint + $prefix);
+            @include _layout-grid.mixin($breakpoint + $prefix);
+            @include _margins.mixin($breakpoint + $prefix);
+            @include _overflow.mixin($breakpoint + $prefix);
+            @include _padding.mixin($breakpoint + $prefix);
+            @include _paragraphs.mixin($breakpoint + $prefix);
+            @include _positions.mixin($breakpoint + $prefix);
+            @include _width-height.mixin($breakpoint + $prefix);
+        }         
+    }
+}