coer-elements 2.0.2 → 2.0.4

package/styles/coer-elements.css

@@ -25,12 +25,22 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   --blue: #0d6efd;
   --gray: #6c757d;
   --green: #198754;
-  --yellow: #ffc107;
+  --yellow:#ffc107;
   --red: #dc3545;
-  --white: #f5f5f5;
+  --smoke: #f5f5f5;
   --black: #252525;
-  --orange: #fd6031;
-  --purple: #a615bc;
+  --orange:#fd6031;
+  --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));
 }
 
 .text-blue {
@@ -38,7 +48,6 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
 }
 
 .text-blue-bold {
-  color: var(--blue) !important;
   font-weight: bold !important;
 }
 
@@ -209,6 +218,204 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   border-color: var(--orange) !important;
 }
 
+.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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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;
+}
+
 .text-transparent {
   color: transparent !important;
 }
@@ -217,6 +424,11 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   background-color: transparent !important;
 }
 
+.background-border-transparent {
+  background-color: transparent !important;
+  border-color: transparent !important;
+}
+
 .border-transparent {
   border-color: transparent !important;
 }
@@ -249,62 +461,62 @@ div.coer-button .slot {
   overflow: visible !important;
 }
 div.coer-button button.primary-filled {
-  background-color: var(--blue) !important;
-  color: var(--white) !important;
+  background-color: var(--primary-inner) !important;
+  color: var(--smoke) !important;
 }
 div.coer-button button.secondary-filled {
-  background-color: var(--gray) !important;
-  color: var(--white) !important;
+  background-color: var(--secondary-inner) !important;
+  color: var(--smoke) !important;
 }
 div.coer-button button.success-filled {
-  background-color: var(--green) !important;
-  color: var(--white) !important;
+  background-color: var(--success-inner) !important;
+  color: var(--smoke) !important;
 }
 div.coer-button button.warning-filled {
-  background-color: var(--yellow) !important;
+  background-color: var(--warning-inner) !important;
   color: var(--black) !important;
 }
 div.coer-button button.danger-filled {
-  background-color: var(--red) !important;
-  color: var(--white) !important;
+  background-color: var(--danger-inner) !important;
+  color: var(--smoke) !important;
 }
 div.coer-button button.navigation-filled {
   background-color: var(--orange) !important;
-  color: var(--white) !important;
+  color: var(--smoke) !important;
 }
 div.coer-button button.dark-filled {
   background-color: var(--black) !important;
-  color: var(--white) !important;
+  color: var(--smoke) !important;
 }
 div.coer-button button.primary-outline {
   background-color: white !important;
-  border: 1px solid var(--blue) !important;
-  color: var(--blue) !important;
+  border: 1px solid var(--primary-inner) !important;
+  color: var(--primary-inner) !important;
 }
 div.coer-button button.secondary-outline {
   background-color: white !important;
-  border: 1px solid var(--gray) !important;
-  color: var(--gray) !important;
+  border: 1px solid var(--secondary-inner) !important;
+  color: var(--secondary-inner) !important;
 }
 div.coer-button button.success-outline {
   background-color: white !important;
-  border: 1px solid var(--green) !important;
-  color: var(--green) !important;
+  border: 1px solid var(--success-inner) !important;
+  color: var(--success-inner) !important;
 }
 div.coer-button button.warning-outline {
   background-color: white !important;
-  border: 1px solid var(--yellow) !important;
-  color: var(--yellow) !important;
+  border: 1px solid var(--warning-inner) !important;
+  color: var(--warning-inner) !important;
 }
 div.coer-button button.danger-outline {
   background-color: white !important;
-  border: 1px solid var(--red) !important;
-  color: var(--red) !important;
+  border: 1px solid var(--danger-inner) !important;
+  color: var(--danger-inner) !important;
 }
 div.coer-button button.navigation-outline {
   background-color: white !important;
-  border: 1px solid var(--orange) !important;
-  color: var(--orange) !important;
+  border: 1px solid var(--navigation-inner) !important;
+  color: var(---navigation-inner) !important;
 }
 div.coer-button button.dark-outline {
   background-color: white !important;
@@ -329,27 +541,27 @@ div.coer-button button.dark-outline:not(.readonly):hover, div.coer-button button
 }
 div.coer-button button.primary-filled:not(.readonly):focus,
 div.coer-button button.primary-outline:not(.readonly):focus {
-  box-shadow: 0px 0px 20px var(--blue) !important;
+  box-shadow: 0px 0px 20px var(--primary-inner) !important;
 }
 div.coer-button button.secondary-filled:not(.readonly):focus,
 div.coer-button button.secondary-outline:not(.readonly):focus {
-  box-shadow: 0px 0px 20px var(--gray) !important;
+  box-shadow: 0px 0px 20px var(--secondary-inner) !important;
 }
 div.coer-button button.success-filled:not(.readonly):focus,
 div.coer-button button.success-outline:not(.readonly):focus {
-  box-shadow: 0px 0px 20px var(--green) !important;
+  box-shadow: 0px 0px 20px var(--success-inner) !important;
 }
 div.coer-button button.warning-filled:not(.readonly):focus,
 div.coer-button button.warning-outline:not(.readonly):focus {
-  box-shadow: 0px 0px 20px var(--yellow) !important;
+  box-shadow: 0px 0px 20px var(--warning-inner) !important;
 }
 div.coer-button button.danger-filled:not(.readonly):focus,
 div.coer-button button.danger-outline:not(.readonly):focus {
-  box-shadow: 0px 0px 20px var(--red) !important;
+  box-shadow: 0px 0px 20px var(--danger-inner) !important;
 }
 div.coer-button button.navigation-filled:not(.readonly):focus,
 div.coer-button button.navigation-outline:not(.readonly):focus {
-  box-shadow: 0px 0px 20px var(--orange) !important;
+  box-shadow: 0px 0px 20px var(--navigation-inner) !important;
 }
 div.coer-button button.dark-filled:not(.readonly):focus,
 div.coer-button button.dark-outline:not(.readonly):focus {
@@ -413,7 +625,7 @@ div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.md
   padding: 10px !important;
 }
 div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__background {
-  background-color: var(--white) !important;
+  background-color: var(--smoke) !important;
   border-radius: 5px !important;
 }
 div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__ripple {
@@ -613,7 +825,7 @@ div.coer-grid table thead tr th {
   z-index: 100 !important;
   top: 0 !important;
   background-color: var(--gray) !important;
-  color: var(--white) !important;
+  color: var(--smoke) !important;
   padding: 5px !important;
   vertical-align: middle !important;
   overflow: hidden;
@@ -1026,7 +1238,7 @@ header.coer-page-title nav {
   height: auto;
   min-height: 25px;
   font-size: small;
-  background-color: whitesmoke;
+  background-color: var(--container-inner);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1038,7 +1250,7 @@ header.coer-page-title ol, header.coer-page-title a {
   margin: 0px;
   padding-left: 5px;
   text-decoration: none;
-  color: var(--blue) !important;
+  color: var(--primary-inner) !important;
   font-weight: normal !important;
   cursor: pointer !important;
 }
@@ -1048,9 +1260,6 @@ header.coer-page-title ol::selection, header.coer-page-title a::selection {
 header.coer-page-title li {
   border: none;
 }
-header.coer-page-title li.list-group-item a {
-  color: var(--orange) !important;
-}
 
 div.coer-dropdown {
   position: relative !important;
@@ -1268,20 +1477,20 @@ mat-drawer-container .margin-left-40px {
 mat-drawer-container mat-drawer {
   width: auto;
   min-width: 200px;
-  background-color: var(--black) !important;
+  background-color: var(--sidenav-inner) !important;
 }
 mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar {
   width: 1px !important;
 }
 mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb {
-  background-color: var(--gray) !important;
+  background-color: var(--secondary-inner) !important;
   border-radius: 5px !important;
 }
 mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:hover {
-  background-color: var(--gray) !important;
+  background-color: var(--secondary-inner) !important;
 }
 mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:active {
-  background-color: var(--white) !important;
+  background-color: var(--background-inner) !important;
 }
 mat-drawer-container mat-drawer i {
   font-size: 16px !important;
@@ -1291,9 +1500,10 @@ mat-drawer-container mat-drawer div.separator {
 }
 mat-drawer-container mat-drawer-content {
   margin-right: 0px !important;
+  background-color: var(--background-inner) !important;
 }
 mat-drawer-container mat-drawer-content aside.side-nav {
-  background-color: var(--black) !important;
+  background-color: var(--sidenav-inner) !important;
   width: 40px !important;
   position: fixed !important;
   left: 0px !important;
@@ -1309,13 +1519,13 @@ mat-drawer-container mat-drawer-content aside.side-nav span.icon-container {
   justify-content: center !important;
   font-size: 16px !important;
   border-bottom: 1px solid rgba(245, 245, 245, 0.041) !important;
-  color: var(--white);
+  color: var(--background-inner);
 }
 mat-drawer-container mat-drawer-content aside.side-nav span.icon-container:hover {
   background-color: rgb(47.2, 47.2, 47.2) !important;
 }
 mat-drawer-container mat-drawer-content aside.side-nav span.icon-container.active-link {
-  color: var(--orange) !important;
+  color: var(--navigation-inner) !important;
 }
 mat-drawer-container div.backdrop {
   position: absolute !important;
@@ -1339,7 +1549,7 @@ mat-nav-list.coer-menu-option mat-list-item {
   padding: 0px 35px 0px 10px !important;
   display: inline-flex !important;
   height: 48px !important;
-  color: var(--white);
+  color: var(--background-inner);
 }
 mat-nav-list.coer-menu-option mat-list-item span.icon-container {
   display: inline-flex !important;
@@ -1348,7 +1558,7 @@ mat-nav-list.coer-menu-option mat-list-item span.icon-container {
   height: 48px !important;
   min-width: 20px !important;
   max-width: 20px !important;
-  color: var(--white);
+  color: var(--background-inner);
 }
 mat-nav-list.coer-menu-option mat-list-item span.icon-container i {
   min-height: 16px !important;
@@ -1358,11 +1568,11 @@ mat-nav-list.coer-menu-option mat-list-item span.label-container {
   display: inline-flex !important;
   height: auto !important;
   margin-left: 10px !important;
-  color: var(--white);
+  color: var(--background-inner);
 }
 mat-nav-list.coer-menu-option mat-list-item span.icon-container.active-link,
 mat-nav-list.coer-menu-option mat-list-item span.label-container.active-link {
-  color: var(--orange) !important;
+  color: var(--navigation-inner) !important;
 }
 mat-nav-list.coer-menu-option mat-list-item:hover {
   background-color: rgb(47.2, 47.2, 47.2) !important;
@@ -1374,7 +1584,7 @@ mat-accordion.coer-tree-accordion div, mat-accordion.coer-tree-accordion span {
   font-weight: bold;
 }
 mat-accordion.coer-tree-accordion mat-expansion-panel {
-  background-color: var(--black) !important;
+  background-color: var(--sidenav-inner) !important;
   box-shadow: none !important;
   border-radius: 0px !important;
 }
@@ -1396,7 +1606,7 @@ mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header
   margin-left: 15px !important;
 }
 mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-expansion-indicator::after {
-  color: var(--white) !important;
+  color: var(--background-inner) !important;
 }
 mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header mat-panel-description {
   margin-right: 0px !important;
@@ -1408,19 +1618,19 @@ mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
-  color: var(--white);
+  color: var(--background-inner);
 }
 mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header mat-panel-description span.label-container {
   height: 48px !important;
   margin-left: 10px !important;
   display: flex !important;
   align-items: center !important;
-  color: var(--white);
+  color: var(--background-inner);
 }
-mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.text-orange span.mat-expansion-indicator::after {
-  color: var(--orange) !important;
+mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.text-navigation span.mat-expansion-indicator::after {
+  color: var(--navigation-inner) !important;
 }
-mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header:not(.background-orange):hover {
+mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header:not(.background-navigation):hover {
   background-color: rgb(47.2, 47.2, 47.2) !important;
 }
 
@@ -1713,7 +1923,7 @@ aside.toast-container div.toast,
 aside.toast-container div.toast-header {
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
-  color: var(--white);
+  color: var(--smoke);
 }
 aside.toast-container div.toast,
 aside.toast-container div.toast-body {
@@ -1722,7 +1932,7 @@ aside.toast-container div.toast-body {
   width: auto !important;
   min-width: 350px !important;
   max-width: 470px !important;
-  color: var(--white);
+  color: var(--smoke);
 }
 aside.toast-container div.toast-body {
   min-height: 36px;
@@ -1742,19 +1952,19 @@ aside.toast-container button {
 }
 aside.toast-container div#alert-success div.toast-header,
 aside.toast-container div#alert-success div.toast-body {
-  background-color: var(--green);
+  background-color: var(--success-inner);
 }
 aside.toast-container div#alert-info div.toast-header,
 aside.toast-container div#alert-info div.toast-body {
-  background-color: var(--blue);
+  background-color: var(--primary-inner);
 }
 aside.toast-container div#alert-error div.toast-header,
 aside.toast-container div#alert-error div.toast-body {
-  background-color: var(--red);
+  background-color: var(--danger-inner);
 }
 aside.toast-container div#alert-warning div.toast-header,
 aside.toast-container div#alert-warning div.toast-body {
-  background-color: var(--yellow);
+  background-color: var(--warning-inner);
   border-color: var(--black);
   color: var(--black);
 }
@@ -1808,7 +2018,7 @@ aside.toast-container > * {
   padding: 10px;
   box-shadow: 0px 0px 10px -10px black;
   border-radius: 8px;
-  background-color: white;
+  background-color: var(--container-inner);
   animation-name: fadeIn;
   animation-duration: 1.5s;
   animation-iteration-count: 1;
@@ -1820,7 +2030,7 @@ aside.toast-container > * {
   padding: 10px;
   box-shadow: 0px 0px 10px -10px black;
   border-radius: 8px;
-  background-color: white;
+  background-color: var(--container-inner);
   animation-name: fadeIn;
   animation-duration: 1.5s;
   animation-iteration-count: 1;
@@ -1833,7 +2043,7 @@ aside.toast-container > * {
   padding: 10px;
   box-shadow: 0px 0px 10px -10px black;
   border-radius: 8px;
-  background-color: white;
+  background-color: var(--container-inner);
   animation-name: fadeIn;
   animation-duration: 1.5s;
   animation-iteration-count: 1;
@@ -1849,7 +2059,7 @@ aside.toast-container > * {
   padding: 10px;
   box-shadow: 0px 0px 10px -10px black;
   border-radius: 8px;
-  background-color: white;
+  background-color: var(--container-inner);
   animation-name: fadeIn;
   animation-duration: 1.5s;
   animation-iteration-count: 1;
@@ -1862,7 +2072,7 @@ aside.toast-container > * {
   padding: 10px;
   box-shadow: 0px 0px 10px -10px black;
   border-radius: 8px;
-  background-color: white;
+  background-color: var(--container-inner);
   animation-name: fadeIn;
   animation-duration: 1.5s;
   animation-iteration-count: 1;