coer-elements 2.0.6 → 2.0.7

package/styles/colors.scss

@@ -1,4 +1,5 @@
 :root {
+    //Fixed colors
     --blue:  #0d6efd;
     --gray:  #6c757d;
     --green: #198754;
@@ -10,423 +11,93 @@
     --white: #ffffff; 
     --purple:#a615bc; 
 
-    --primary-inner:    var(--primary,    var(--blue));
-    --secondary-inner:  var(--secondary,  var(--gray));
-    --success-inner:    var(--success,    var(--green));
-    --warning-inner:    var(--warning,    var(--yellow));
-    --danger-inner:     var(--danger,     var(--red));
-    --background-inner: var(--background, var(--smoke));
-    --sidenav-inner:    var(--sidenav,    var(--black));
-    --navigation-inner: var(--navigation, var(--orange));
-    --container-inner:  var(--container,  var(--white)); 
+    //Action Colors
+    --primary-inner:     var(--primary,     var(--blue));
+    --secondary-inner:   var(--secondary,   var(--gray));
+    --success-inner:     var(--success,     var(--green));
+    --warning-inner:     var(--warning,     var(--yellow));
+    --danger-inner:      var(--danger,      var(--red));
+    --navigation-inner:  var(--navigation,  var(--orange));
+    --information-inner: var(--information, var(--blue));
+    
+    //App Colors
+    --breadcrumbs-inner:  var(--app-breadcrumbs,  var(--blue)); 
+    --background-inner:   var(--app-background,   var(--smoke));
+    --containers-inner:   var(--app-containers,   var(--white));
+    --sidenav-inner:      var(--app-sidenav,      var(--black));
+    --sidenav-text-inner: var(--app-sidenav-text, var(--smoke));
+    --toolbar-inner:      var(--app-toolbar,      var(--smoke));
+    --toolbar-text-inner: var(--app-toolbar-text, var(--black));
 } 
 
-
-//Blue
-.text-blue {
-    color: var(--blue) !important;
-}
-
-.text-blue-bold {
-    font-weight: bold !important;
-}
-
-.background-blue {
-    background-color: var(--blue) !important;
-}
-
-.background-border-blue {
-    background-color: var(--blue) !important;
-    border-color: var(--blue) !important;
-}
-
-.border-blue {
-    border-color: var(--blue) !important;
-}
-
-//Gray
-.text-gray {
-    color: var(--gray) !important;
-}
-
-.text-gray-bold {
-    color: var(--gray) !important;
-    font-weight: bold !important;
-}
-
-.background-gray {
-    background-color: var(--gray) !important;
-}
-
-.background-border-gray {
-    background-color: var(--gray) !important;
-    border-color: var(--gray) !important;
-}
-
-.border-gray {
-    border-color: var(--gray) !important;
-}
-
-//Green
-.text-green {
-    color: var(--green) !important;
-}
-
-.text-green-bold {
-    color: var(--green) !important;
-    font-weight: bold !important;
-}
-
-.background-green {
-    background-color: var(--green) !important;
-}
-
-.background-border-green {
-    background-color: var(--green) !important;
-    border-color: var(--green) !important;
-}
-
-.border-green {
-    border-color: var(--green) !important;
-}
-
-//Yellow
-.text-yellow {
-    color: var(--yellow) !important;
-}
-
-.text-yellow-bold {
-    color: var(--yellow) !important;
-    font-weight: bold !important;
-}
-
-.background-yellow {
-    background-color: var(--yellow) !important;
-}
-
-.background-border-yellow {
-    background-color: var(--yellow) !important;
-    border-color: var(--yellow) !important;
-}
-
-.border-yellow {
-    border-color: var(--yellow) !important;
-}
-
-//Red
-.text-red {
-    color: var(--red) !important;
-}
-
-.text-red-bold {
-    color: var(--red) !important;
-    font-weight: bold !important;
-}
-
-.background-red {
-    background-color: var(--red) !important;
-}
-
-.background-border-red {
-    background-color: var(--red) !important;
-    border-color: var(--red) !important;
-}
-
-.border-red {
-    border-color: var(--red) !important;
-}
-
-//White
-.text-white {
-    color: var(--white) !important;
-}
-
-.text-white-bold {
-    color: var(--white) !important;
-    font-weight: bold !important;
-}
-
-.background-white {
-    background-color: var(--white) !important;
-}
-
-.background-border-white {
-    background-color: var(--white) !important;
-    border-color: var(--white) !important;
-}
-
-.border-white {
-    border-color: var(--white) !important;
-}
-
-//Black
-.text-black {
-    color: var(--black) !important;
-}
-
-.text-black-bold {
-    color: var(--black) !important;
-    font-weight: bold !important;
-}
-
-.background-black {
-    background-color: var(--black) !important;
-}
-
-.background-border-black {
-    background-color: var(--black) !important;
-    border-color: var(--black) !important;
-}
-
-.border-black {
-    border-color: var(--black) !important;
-}
-
-//Orange
-.text-orange {
-    color: var(--orange) !important;
-}
-
-.text-orange-bold {
-    color: var(--orange) !important;
-    font-weight: bold !important;
-}
-
-.background-orange {
-    background-color: var(--orange) !important;
-}
-
-.background-border-orange {
-    background-color: var(--orange) !important;
-    border-color: var(--orange) !important;
-}
-
-.border-orange {
-    border-color: var(--orange) !important;
-} 
-
-//Primary
-.text-primary {
-    color: var(--primary-inner) !important;
-}
-
-.text-primary-bold {
-    color: var(--primary-inner) !important;
-    font-weight: bold !important;
-}
-
-.background-primary {
-    background-color: var(--primary-inner) !important;
-}
-
-.background-border-primary {
-    background-color: var(--primary-inner) !important;
-    border-color: var(--primary-inner) !important;
-}
-
-.border-primary {
-    border-color: var(--primary-inner) !important;
-}
-
-
-//Secondary
-.text-secondary {
-    color: var(--secondary-inner) !important;
-}
-
-.text-secondary-bold {
-    color: var(--secondary-inner) !important;
-    font-weight: bold !important;
-}
-
-.background-secondary {
-    background-color: var(--secondary-inner) !important;
-}
-
-.background-border-secondary {
-    background-color: var(--secondary-inner) !important;
-    border-color: var(--secondary-inner) !important;
-}
-
-.border-secondary {
-    border-color: var(--secondary-inner) !important;
-} 
-
-//Success
-.text-success {
-    color: var(--success-inner) !important;
-}
-
-.text-success-bold {
-    color: var(--success-inner) !important;
-    font-weight: bold !important;
-}
-
-.background-success {
-    background-color: var(--success-inner) !important;
-}
-
-.background-border-success {
-    background-color: var(--success-inner) !important;
-    border-color: var(--success-inner) !important;
-}
-
-.border-success {
-    border-color: var(--success-inner) !important;
-} 
-
-//Warning
-.text-warning {
-    color: var(--warning-inner) !important;
-}
-
-.text-warning-bold {
-    color: var(--warning-inner) !important;
-    font-weight: bold !important;
-}
-
-.background-warning {
-    background-color: var(--warning-inner) !important;
-}
-
-.background-border-warning {
-    background-color: var(--warning-inner) !important;
-    border-color: var(--warning-inner) !important;
-}
-
-.border-warning {
-    border-color: var(--warning-inner) !important;
-} 
-
-//Danger
-.text-danger {
-    color: var(--danger-inner) !important;
-}
-
-.text-danger-bold {
-    color: var(--danger-inner) !important;
-    font-weight: bold !important;
-}
-
-.background-danger {
-    background-color: var(--danger-inner) !important;
-}
-
-.background-border-danger {
-    background-color: var(--danger-inner) !important;
-    border-color: var(--danger-inner) !important;
-}
-
-.border-danger {
-    border-color: var(--danger-inner) !important;
-}
-
-//Background
-.text-background {
-    color: var(--background-inner) !important;
-}
-
-.text-background-bold {
-    color: var(--background-inner) !important;
-    font-weight: bold !important;
-}
-
-.background-background {
-    background-color: var(--background-inner) !important;
-}
-
-.background-border-background {
-    background-color: var(--background-inner) !important;
-    border-color: var(--background-inner) !important;
-}
-
-.border-background {
-    border-color: var(--background-inner) !important;
-}
-
-//Sidenav
-.text-sidenav {
-    color: var(--sidenav-inner) !important;
-}
-
-.text-blue-sidenav {
-    color: var(--sidenav-inner) !important;
-    font-weight: bold !important;
-}
-
-.background-sidenav {
-    background-color: var(--sidenav-inner) !important;
-}
-
-.background-border-sidenav {
-    background-color: var(--sidenav-inner) !important;
-    border-color: var(--sidenav-inner) !important;
-}
-
-.border-sidenav {
-    border-color: var(--sidenav-inner) !important;
-}
-
-//Navigation
-.text-navigation {
-    color: var(--navigation-inner) !important;
-}
-
-.text-navigation-bold {
-    color: var(--navigation-inner) !important;
-    font-weight: bold !important;
-}
-
-.background-navigation {
-    background-color: var(--navigation-inner) !important;
-}
-
-.background-border-navigation {
-    background-color: var(--navigation-inner) !important;
-    border-color: var(--navigation-inner) !important;
-}
-
-.border-navigation {
-    border-color: var(--navigation-inner) !important;
-}
-
-//Container
-.text-container {
-    color: var(--container-inner) !important;
-}
-
-.text-container-bold {
-    color: var(--container-inner) !important;
-    font-weight: bold !important;
-}
-
-.background-container {
-    background-color: var(--container-inner) !important;
-}
-
-.background-border-container {
-    background-color: var(--container-inner) !important;
-    border-color: var(--container-inner) !important;
-}
-
-.border-container {
-    border-color: var(--container-inner) !important;
-}
-
-//transparent
-.text-transparent {
-    color: transparent !important;
-} 
-
-.background-transparent {
-    background-color: transparent !important;
-} 
-
-.background-border-transparent {
-    background-color: transparent !important;
-    border-color: transparent !important;
-}
-
-.border-transparent {
-    border-color: transparent !important;
+$colors: ( 
+    '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),
+    '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),
+    'breadcrumbs':      var(--breadcrumbs-inner),
+    'app-background':   var(--background-inner), 
+    'app-container':    var(--containers-inner),  
+    'app-sidenav':      var(--sidenav-inner),    
+    'app-sidenav-text': var(--sidenav-text-inner),
+    'app-toolbar':      var(--toolbar-inner),    
+    'app-toolbar-text': var(--toolbar-text-inner),
+    'transparent':      transparent
+);
+
+    
+@each $key, $value in $colors {
+    //Text
+    .text-#{$key} { 
+        color: $value !important;
+    }
+    
+    .text-#{$key}-bold {
+        color: $value !important;
+        font-weight: bold !important;
+    } 
+    
+    //Borders
+    .border-#{$key} {
+        border-color: $value !important;
+    }
+
+    .border-top-#{$key} {
+        border-top-color: $value !important;
+    }
+
+    .border-right-#{$key} {
+        border-right-color: $value !important;
+    }
+
+    .border-bottom-#{$key} {
+        border-bottom-color: $value !important;
+    }
+
+    .border-left-#{$key} {
+        border-left-color: $value !important;
+    }
+
+    //Background
+    .background-#{$key} {
+        background-color: $value !important;
+    }
+    
+    .background-border-#{$key} {
+        background-color: $value !important;
+        border-color: $value !important;
+    }
 }

package/styles/containers.scss

@@ -8,7 +8,7 @@
     padding: 10px;
     box-shadow: 0px 0px 10px -10px black;
     border-radius: 8px;
-    background-color: var(--container-inner);
+    background-color: var(--containers-inner);
     animation-name: fadeIn;
     animation-duration: 1.5s;
     animation-iteration-count: 1;

package/styles/index.scss

@@ -30,29 +30,4 @@ input[type="file"] {
 
 .no-selection::selection {
     background-color: transparent !important;
-} 
-
-
-div#coer-tool-bar {  
-    coer-button * {
-        color: var(--orange) !important;
-    }
-
-    coer-dropdown coer-button * {
-        color: transparent !important;
-    } 
-
-    coer-dropdown ul {
-        right: 0px !important;
-        width: auto !important;
-        top: 2px !important;
-        border-top: 0px !important;
-        background-color: whitesmoke !important;
-    
-        li:not(.no-options):hover{
-            color: black !important;
-            background-color: color.adjust(#0d6efd, $lightness: 45%) !important;
-        }
-    }
-}
-
+}    

package/tools/lib/colors.class.d.ts

@@ -1,31 +1,37 @@
 export declare class Colors {
-    private static readonly _blue;
-    private static readonly _gray;
-    private static readonly _green;
-    private static readonly _yellow;
-    private static readonly _red;
-    private static readonly _smoke;
-    private static readonly _black;
-    private static readonly _orange;
-    private static readonly _white;
-    private static readonly _purple;
-    static get primary(): string;
-    static get secondary(): string;
-    static get success(): string;
-    static get warning(): string;
-    static get danger(): string;
-    static get background(): string;
-    static get sidenav(): string;
-    static get navigation(): string;
-    static get container(): string;
-    /** Returns the color palette in hexadecimal */
-    private static readonly colorsHex;
-    /** Returns the color palette in RGB */
-    private static readonly ColorsRGB;
-    /** Returns a random color in hexadecimal */
-    static GetRandomColorHex: () => string;
+    static readonly fixedColors: {
+        blue: string;
+        gray: string;
+        green: string;
+        yellow: string;
+        red: string;
+        smoke: string;
+        black: string;
+        orange: string;
+        white: string;
+        purple: string;
+    };
+    static readonly actionColors: {
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        danger: string;
+        navigation: string;
+        information: string;
+    };
+    static readonly appColors: {
+        appBreadcrumbs: string;
+        appBackground: string;
+        appContainers: string;
+        appSidenav: string;
+        appSidenavText: string;
+        appToolbar: string;
+        appToolbarText: string;
+    };
+    static ToHexadecimal(r: number, g: number, b: number, a?: number): string;
+    /** Returns a random color in hexadecimal
+    public static GetRandomColorHex = (): string => "#xxxxxx".replace(/x/g, () => (Math.random() * 16 | 0).toString(16)); */
     /** Returns the number of colors requested */
     static GetColorHexList(quantity: number): string[];
-    /** Returns the number of colors requested with opacity */
-    static GetColorRGBList(quantity: number): string[];
 }

package/tools/lib/elements-html.class.d.ts

@@ -1,12 +1,16 @@
 export declare const ElementsHTML: {
+    /** */
+    GetElement: (selector: string) => HTMLElement | null;
+    /** */
+    GetCssValueBy: (selector: string, style: string) => string;
+    /** */
+    GetCssValue: (element: Element | null, style: string) => string;
     /** Get width in px */
     GetElementWidth: (element: HTMLElement | null | undefined, ...args: (number | HTMLElement | null | undefined)[]) => string;
     /** Get height in px */
     GetElementHeight: (element: HTMLElement | null | undefined, ...args: (number | HTMLElement | null | undefined)[]) => string;
     /** */
     IsInvalidElement: (element: any) => boolean;
-    /** */
-    GetCssValueBy: (selector: string, style: string) => string;
-    /** */
-    GetCssValue: (element: HTMLElement | null, style: string) => string;
+    /** Get color in hexadecimal format */
+    GetElementColor: (element: HTMLElement | null | undefined) => string;
 };