coer-elements 2.0.19 → 2.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "coer-elements",
-  "version": "2.0.19",
+  "version": "2.0.20",
   "author": "Christian Omar Escamilla Rodríguez",
   "keywords": [
     "Components",

package/styles/coer-elements.css

@@ -801,230 +801,230 @@
   border-color: var(--background-inner) !important;
 }
 
-.text-app-container {
+.text-containers {
   color: var(--containers-inner) !important;
 }
 
-.text-app-container-bold {
+.text-containers-bold {
   color: var(--containers-inner) !important;
   font-weight: bold !important;
 }
 
-.border-app-container {
+.border-containers {
   border-color: var(--containers-inner) !important;
 }
 
-.border-top-app-container {
+.border-top-containers {
   border-top-color: var(--containers-inner) !important;
 }
 
-.border-right-app-container {
+.border-right-containers {
   border-right-color: var(--containers-inner) !important;
 }
 
-.border-bottom-app-container {
+.border-bottom-containers {
   border-bottom-color: var(--containers-inner) !important;
 }
 
-.border-left-app-container {
+.border-left-containers {
   border-left-color: var(--containers-inner) !important;
 }
 
-.background-app-container {
+.background-containers {
   background-color: var(--containers-inner) !important;
 }
 
-.background-border-app-container {
+.background-border-containers {
   background-color: var(--containers-inner) !important;
   border-color: var(--containers-inner) !important;
 }
 
-.text-app-sidenav {
+.text-sidenav {
   color: var(--sidenav-inner) !important;
 }
 
-.text-app-sidenav-bold {
+.text-sidenav-bold {
   color: var(--sidenav-inner) !important;
   font-weight: bold !important;
 }
 
-.border-app-sidenav {
+.border-sidenav {
   border-color: var(--sidenav-inner) !important;
 }
 
-.border-top-app-sidenav {
+.border-top-sidenav {
   border-top-color: var(--sidenav-inner) !important;
 }
 
-.border-right-app-sidenav {
+.border-right-sidenav {
   border-right-color: var(--sidenav-inner) !important;
 }
 
-.border-bottom-app-sidenav {
+.border-bottom-sidenav {
   border-bottom-color: var(--sidenav-inner) !important;
 }
 
-.border-left-app-sidenav {
+.border-left-sidenav {
   border-left-color: var(--sidenav-inner) !important;
 }
 
-.background-app-sidenav {
+.background-sidenav {
   background-color: var(--sidenav-inner) !important;
 }
 
-.background-border-app-sidenav {
+.background-border-sidenav {
   background-color: var(--sidenav-inner) !important;
   border-color: var(--sidenav-inner) !important;
 }
 
-.text-app-sidenav-text {
+.text-sidenav-text {
   color: var(--sidenav-text-inner) !important;
 }
 
-.text-app-sidenav-text-bold {
+.text-sidenav-text-bold {
   color: var(--sidenav-text-inner) !important;
   font-weight: bold !important;
 }
 
-.border-app-sidenav-text {
+.border-sidenav-text {
   border-color: var(--sidenav-text-inner) !important;
 }
 
-.border-top-app-sidenav-text {
+.border-top-sidenav-text {
   border-top-color: var(--sidenav-text-inner) !important;
 }
 
-.border-right-app-sidenav-text {
+.border-right-sidenav-text {
   border-right-color: var(--sidenav-text-inner) !important;
 }
 
-.border-bottom-app-sidenav-text {
+.border-bottom-sidenav-text {
   border-bottom-color: var(--sidenav-text-inner) !important;
 }
 
-.border-left-app-sidenav-text {
+.border-left-sidenav-text {
   border-left-color: var(--sidenav-text-inner) !important;
 }
 
-.background-app-sidenav-text {
+.background-sidenav-text {
   background-color: var(--sidenav-text-inner) !important;
 }
 
-.background-border-app-sidenav-text {
+.background-border-sidenav-text {
   background-color: var(--sidenav-text-inner) !important;
   border-color: var(--sidenav-text-inner) !important;
 }
 
-.text-app-sidenav-active {
+.text-sidenav-active {
   color: var(--sidenav-active-inner) !important;
 }
 
-.text-app-sidenav-active-bold {
+.text-sidenav-active-bold {
   color: var(--sidenav-active-inner) !important;
   font-weight: bold !important;
 }
 
-.border-app-sidenav-active {
+.border-sidenav-active {
   border-color: var(--sidenav-active-inner) !important;
 }
 
-.border-top-app-sidenav-active {
+.border-top-sidenav-active {
   border-top-color: var(--sidenav-active-inner) !important;
 }
 
-.border-right-app-sidenav-active {
+.border-right-sidenav-active {
   border-right-color: var(--sidenav-active-inner) !important;
 }
 
-.border-bottom-app-sidenav-active {
+.border-bottom-sidenav-active {
   border-bottom-color: var(--sidenav-active-inner) !important;
 }
 
-.border-left-app-sidenav-active {
+.border-left-sidenav-active {
   border-left-color: var(--sidenav-active-inner) !important;
 }
 
-.background-app-sidenav-active {
+.background-sidenav-active {
   background-color: var(--sidenav-active-inner) !important;
 }
 
-.background-border-app-sidenav-active {
+.background-border-sidenav-active {
   background-color: var(--sidenav-active-inner) !important;
   border-color: var(--sidenav-active-inner) !important;
 }
 
-.text-app-toolbar {
+.text-toolbar {
   color: var(--toolbar-inner) !important;
 }
 
-.text-app-toolbar-bold {
+.text-toolbar-bold {
   color: var(--toolbar-inner) !important;
   font-weight: bold !important;
 }
 
-.border-app-toolbar {
+.border-toolbar {
   border-color: var(--toolbar-inner) !important;
 }
 
-.border-top-app-toolbar {
+.border-top-toolbar {
   border-top-color: var(--toolbar-inner) !important;
 }
 
-.border-right-app-toolbar {
+.border-right-toolbar {
   border-right-color: var(--toolbar-inner) !important;
 }
 
-.border-bottom-app-toolbar {
+.border-bottom-toolbar {
   border-bottom-color: var(--toolbar-inner) !important;
 }
 
-.border-left-app-toolbar {
+.border-left-toolbar {
   border-left-color: var(--toolbar-inner) !important;
 }
 
-.background-app-toolbar {
+.background-toolbar {
   background-color: var(--toolbar-inner) !important;
 }
 
-.background-border-app-toolbar {
+.background-border-toolbar {
   background-color: var(--toolbar-inner) !important;
   border-color: var(--toolbar-inner) !important;
 }
 
-.text-app-toolbar-text {
+.text-toolbar-text {
   color: var(--toolbar-text-inner) !important;
 }
 
-.text-app-toolbar-text-bold {
+.text-toolbar-text-bold {
   color: var(--toolbar-text-inner) !important;
   font-weight: bold !important;
 }
 
-.border-app-toolbar-text {
+.border-toolbar-text {
   border-color: var(--toolbar-text-inner) !important;
 }
 
-.border-top-app-toolbar-text {
+.border-top-toolbar-text {
   border-top-color: var(--toolbar-text-inner) !important;
 }
 
-.border-right-app-toolbar-text {
+.border-right-toolbar-text {
   border-right-color: var(--toolbar-text-inner) !important;
 }
 
-.border-bottom-app-toolbar-text {
+.border-bottom-toolbar-text {
   border-bottom-color: var(--toolbar-text-inner) !important;
 }
 
-.border-left-app-toolbar-text {
+.border-left-toolbar-text {
   border-left-color: var(--toolbar-text-inner) !important;
 }
 
-.background-app-toolbar-text {
+.background-toolbar-text {
   background-color: var(--toolbar-text-inner) !important;
 }
 
-.background-border-app-toolbar-text {
+.background-border-toolbar-text {
   background-color: var(--toolbar-text-inner) !important;
   border-color: var(--toolbar-text-inner) !important;
 }
@@ -2211,7 +2211,7 @@ mat-drawer-container mat-drawer-content aside.side-nav span.icon-container {
   color: var(--sidenav-text-inner);
 }
 mat-drawer-container mat-drawer-content aside.side-nav span.icon-container:hover {
-  background-color: color-mix(in srgb, var(--app-sidenav), white 5%) !important;
+  background-color: color-mix(in srgb, var(--sidenav-inner), white 5%) !important;
 }
 mat-drawer-container mat-drawer-content aside.side-nav span.icon-container.active-link {
   color: var(--sidenav-active-inner) !important;
@@ -2265,7 +2265,7 @@ mat-nav-list.coer-menu-option mat-list-item span.label-container.active-link {
 }
 mat-nav-list.coer-menu-option mat-list-item:hover,
 mat-nav-list.coer-menu-option mat-list-item.mdc-list-item:hover::before {
-  background-color: color-mix(in srgb, var(--app-sidenav), white 5%) !important;
+  background-color: color-mix(in srgb, var(--sidenav-inner), white 5%) !important;
 }
 
 mat-accordion.coer-tree-accordion div, mat-accordion.coer-tree-accordion span {
@@ -2317,7 +2317,7 @@ mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header
 mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-expansion-indicator::after {
   color: var(--sidenav-text-inner) !important;
 }
-mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.text-app-sidenav-active span.mat-expansion-indicator::after {
+mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.text-sidenav-active span.mat-expansion-indicator::after {
   color: var(--sidenav-active-inner) !important;
 }
 mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.cdk-focused {
@@ -2334,7 +2334,7 @@ mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel mat-ex
 }
 mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header:not(.background-navigation):hover,
 mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel mat-expansion-panel-header:not(.background-navigation):hover {
-  background-color: color-mix(in srgb, var(--app-sidenav), white 5%) !important;
+  background-color: color-mix(in srgb, var(--sidenav-inner), white 5%) !important;
 }
 
 div#coer-tool-bar {
@@ -2934,6 +2934,12 @@ aside.toast-container > * {
   mask-image: url("../svg/house.svg");
 }
 
+.flex-wrap {
+  display: flex !important;
+  flex-wrap: wrap !important;
+  gap: 10px;
+}
+
 .flex-wrap-top-left {
   display: flex !important;
   align-items: flex-start !important;

package/styles/colors.scss

@@ -61,16 +61,16 @@ $colors: (
     //App Colors
     'breadcrumbs'   : var(--breadcrumbs-inner),
     'app-background': var(--background-inner), 
-    'app-container' : var(--containers-inner),  
+    'containers'    : var(--containers-inner),  
 
     //Sidenav
-    'app-sidenav'       : var(--sidenav-inner),    
-    'app-sidenav-text'  : var(--sidenav-text-inner),
-    'app-sidenav-active': var(--sidenav-active-inner),
+    'sidenav'       : var(--sidenav-inner),    
+    'sidenav-text'  : var(--sidenav-text-inner),
+    'sidenav-active': var(--sidenav-active-inner),
 
     //Toolbar
-    'app-toolbar'     : var(--toolbar-inner),    
-    'app-toolbar-text': var(--toolbar-text-inner) 
+    'toolbar'     : var(--toolbar-inner),    
+    'toolbar-text': var(--toolbar-text-inner) 
 );
 
     

package/styles/layout-flex-wrap.scss

@@ -1,3 +1,9 @@
+.flex-wrap { 
+    display: flex !important; 
+    flex-wrap: wrap !important;
+    gap: 10px;
+} 
+
 @each $key, $value in (
     'top': flex-start, 
     'middle': center,