@sankhyalabs/ez-design 5.9.0 → 5.10.0-dev.10

package/dist/default/ez-themed.css

@@ -166,9 +166,12 @@ body * {
   body::-webkit-scrollbar,
   body *::-webkit-scrollbar {
     background-color: var(--scrollbar--background);
-    width: var(--space--medium);
-    max-width: var(--space--medium);
-    min-width: var(--space--medium); }
+    width: var(--space--small);
+    max-width: var(--space--small);
+    min-width: var(--space--small);
+    height: var(--space--small);
+    max-height: var(--space--small);
+    min-height: var(--space--small); }
   html::-webkit-scrollbar-track,
   body::-webkit-scrollbar-track,
   body *::-webkit-scrollbar-track {
@@ -529,6 +532,33 @@ body {
 .ez-border-radius--large {
   border-radius: 24px; }
 
+.ez-border--none {
+  border: none; }
+
+.ez-border-shadow--small {
+  box-shadow: 0px 0px 1px 0px #008561; }
+
+.ez-border-shadow--medium {
+  box-shadow: 0px 0px 2px 0px #008561; }
+
+.ez-border-shadow--large {
+  box-shadow: 0px 0px 3px 0px #008561; }
+
+.ez-border-shadow--xlarge {
+  box-shadow: 0px 0px 5px 0px #008561; }
+
+.ez-border-shadow--focus-small:focus {
+  box-shadow: 0px 0px 1px 0px #008561; }
+
+.ez-border-shadow--focus-medium:focus {
+  box-shadow: 0px 0px 2px 0px #008561; }
+
+.ez-border-shadow--focus-large:focus {
+  box-shadow: 0px 0px 3px 0px #008561; }
+
+.ez-border-shadow--focus-xlarge:focus {
+  box-shadow: 0px 0px 5px 0px #008561; }
+
 .ez-margin--extra-small {
   margin: 3px; }
 
@@ -840,7 +870,8 @@ body {
     color: #fff;
     text-shadow: 0 0 0 #fff, 0 0 1px transparent; }
   .ez-text--bold {
-    font-weight: 600; }
+    font-weight: 600;
+    color: var(--title--primary); }
   .ez-text--full {
     width: 100%; }
   .ez-text--primary {
@@ -871,6 +902,7 @@ body {
 .ez-title {
   display: flex;
   font-family: "Roboto";
+  color: var(--title--primary);
   margin: 0;
   font-weight: 600;
   line-height: 1.3; }
@@ -1351,6 +1383,14 @@ body {
     width: 100%;
     border-radius: var(--border--radius-medium);
     box-shadow: var(--shadow); }
+    .ez-box__container--padding-small {
+      padding: var(--space--sm);
+      display: flex;
+      flex-wrap: wrap;
+      background-color: var(--background--xlight);
+      width: 100%;
+      border-radius: var(--border--radius-medium);
+      box-shadow: var(--shadow); }
     .ez-box__container--inverted {
       background-color: var(--background--xlight);
       border-radius: var(--border--radius-medium); }
@@ -1375,6 +1415,8 @@ body {
     .ez-box__container--size-auto {
       width: auto;
       height: auto; }
+    .ez-box__container--nowrap {
+      flex-wrap: nowrap; }
   .ez-box__footer {
     display: flex;
     flex-wrap: wrap;
@@ -1456,39 +1498,64 @@ body {
       .ez-breadcrumb__arrow {
         display: none; } }
 
-.ez-button--secondary {
-  --ez-button--background-color: var(--background--medium);
-  --ez-button--hover--background-color: var(--background--medium);
-  --ez-button--hover-color: var(--color--primary-600);
-  --ez-button--color: var(--title--primary);
-  --ez-button--disabled--background-color: var(--color--disable-secondary);
-  --ez-button--active--background-color: var(--background--strong);
-  --ez-button--disabled--background-color: var(--background--medium);
-  --ez-button--active-color: var(--color--primary-700); }
-
 .ez-button--primary {
-  --ez-button--font-weight: var(--text-weight--medium);
+  /* default */
+  --ez-button--color: var(--text--inverted);
   --ez-button--background-color: var(--color--primary);
-  --ez-button--hover--background-color: var(--color--primary-600);
+  --ez-button--font-weight: var(--text-weight--medium);
+  /* hover */
   --ez-button--hover-color: var(--text--inverted);
-  --ez-button--color: var(--text--inverted);
+  --ez-button--hover--background-color: var(--color--primary-600);
+  /* active */
+  --ez-button--active-color: var(--text--inverted);
   --ez-button--active--background-color: var(--color--primary-700);
+  /* disabled */
+  --ez-button--disabled-color: var(--text--primary);
   --ez-button--disabled--background-color: var(--background--medium);
-  --ez-button--active-color: var(--text--inverted); }
+  --ez-button--disabled--border: 1px solid var(--color--strokes);
+  --ez-button--disabled--border-radius: 24px;
+  /* focus */
+  --ez-button--focus--box-shadow: none;
+  --ez-button--focus--border: var(--border--medium, 2px solid) var(--color--primary-300); }
+
+.ez-button--secondary {
+  /* default */
+  --ez-button--color: var(--title--primary);
+  --ez-button--background-color: var(--background--light);
+  /* hover */
+  --ez-button--hover-color: var(--color--primary-600);
+  --ez-button--hover--background-color: var(--background--light);
+  /* active */
+  --ez-button--active-color: var(--color--primary-700);
+  --ez-button--active--background-color: var(--background--light);
+  /* disabled */
+  --ez-button--disabled-color: var(--text--primary);
+  --ez-button--disabled--background-color: var(--background--medium);
+  --ez-button--disabled--border: 1px solid var(--color--strokes);
+  --ez-button--disabled--border-radius: 24px;
+  /* focus */
+  --ez-button--focus--box-shadow: none;
+  --ez-button--focus--border: var(--border--medium, 2px solid) var(--color--primary-300); }
 
 .ez-button--tertiary {
+  /* default */
+  --ez-button--color: var(--title--primary);
+  --ez-button--background-color: none;
   --ez-button--font-weight: var(--text-weight--medium);
   --ez-button--border: none;
-  --ez-button--background-color: none;
+  /* hover */
   --ez-button--hover-color: var(--color--primary-600);
-  --ez-button--color: var(--title--primary);
   --ez-button--hover--background-color: none;
+  /* active */
+  --ez-button--active-color: var(--title--primary);
   --ez-button--active--background-color: var(--color--disable-secondary);
-  --ez-button--focus--border: var(--border--xlarge, 4px solid) var(--color--primary-300);
+  /* disabled */
+  --ez-button--disabled-color: var(--text--primary);
+  --ez-button--disabled--background-color: var(--background--medium);
+  --ez-button--disabled--border: none;
+  /* focus */
   --ez-button--focus--box-shadow: none;
-  --ez-button--disabled--background-color: none;
-  --ez-button--disabled-color: var(--text--disable);
-  --ez-button--active-color: var(--title--primary); }
+  --ez-button--focus--border: var(--border--medium, 2px solid) var(--color--primary-300); }
 
 .ez-button--link--primary {
   color: #008561;
@@ -1904,6 +1971,8 @@ body {
       .ez-icon--logo {
         width: 49px;
         height: 53px; } }
+  .ez-icon-cursor--pointer {
+    cursor: pointer; }
 
 .ez-identifier {
   display: flex;
@@ -2555,39 +2624,63 @@ body {
     height: 576px; }
 
 .ez-split-button--primary {
+  /* default */
+  --ez-split-button--color: var(--text--inverted);
   --ez-split-button--background-color: var(--color--primary);
   --ez-split-button--font-weight: var(--text-weight--medium);
-  --ez-split-button--hover--background-color: var(--color--primary-600);
+  --ez-split-button--border: none;
+  /* hover */
   --ez-split-button--hover-color: var(--text--inverted);
-  --ez-split-button--color: var(--text--inverted);
-  --ez-split-button--active--background-color: var(--color--primary-700);
+  --ez-split-button--hover--background-color: var(--color--primary-600);
+  /* active */
   --ez-split-button--active-color: var(--text--inverted);
-  --ez-split-button--disabled-color: var(--text--disable);
-  --ez-split-button--disabled--background-color: var(--color--disable-primary); }
+  --ez-split-button--active--background-color: var(--color--primary-700);
+  /* disabled */
+  --ez-split-button--disabled-color: var(--text--primary);
+  --ez-split-button--disabled--background-color: var(--background--medium);
+  --ez-split-button--disabled--border: 1px solid var(--color--strokes);
+  --ez-split-button--disabled--border-radius: 24px;
+  /* focus */
+  --ez-split-button--focus--box-shadow: none;
+  --ez-split-button--focus--border: var(--border--medium, 2px solid) var(--color--primary-300); }
 
 .ez-split-button--secondary {
-  --ez-split-button--background-color:var(--background--medium);
-  --ez-split-button--hover--background-color: var(--background--medium);
-  --ez-split-button--hover-color: var(--color--primary-600);
+  /* default */
   --ez-split-button--color: var(--title--primary);
-  --ez-split-button--active--background-color: var(--background--medium);
+  --ez-split-button--background-color: var(--background--light);
+  /* hover */
+  --ez-split-button--hover-color: var(--color--primary-600);
+  --ez-split-button--hover--background-color: var(--background--light);
+  /* active */
   --ez-split-button--active-color: var(--color--primary-700);
-  --ez-split-button--disabled-color: var(--text--disable);
-  --ez-split-button--disabled--background-color: var(--color--disable-secondary); }
+  --ez-split-button--active--background-color: var(--background--light);
+  /* disabled */
+  --ez-split-button--disabled-color: var(--text--primary);
+  --ez-split-button--disabled--background-color: var(--background--medium);
+  --ez-split-button--disabled--border: 1px solid var(--color--strokes);
+  --ez-split-button--disabled--border-radius: 24px;
+  /* focus */
+  --ez-split-button--focus--box-shadow: none;
+  --ez-split-button--focus--border: var(--border--medium, 2px solid) var(--color--primary-300); }
 
 .ez-split-button--tertiary {
+  --ez-split-button--color: var(--title--primary);
   --ez-split-button--background-color: none;
   --ez-split-button--font-weight: var(--text-weight--medium);
-  --ez-split-button--hover--background-color: none;
+  --ez-split-button--border: none;
+  /* hover */
   --ez-split-button--hover-color: var(--color--primary-600);
-  --ez-split-button--color: var(--title--primary);
-  --ez-split-button--active--background-color: var(--color--disable-secondary);
+  --ez-split-button--hover--background-color: none;
+  /* active */
   --ez-split-button--active-color: var(--title--primary);
-  --ez-split-button--disabled-color: var(--text--disable);
-  --ez-split-button--disabled--background-color: none;
-  --ez-split-button--focus--border: var(--border--xlarge, 4px solid) var(--color--primary-300);
+  --ez-split-button--active--background-color: var(--color--disable-secondary);
+  /* disabled */
+  --ez-split-button--disabled-color: var(--text--primary);
+  --ez-split-button--disabled--background-color: var(--background--medium);
+  --ez-split-button--disabled--border: none;
+  /* focus */
   --ez-split-button--focus--box-shadow: none;
-  --ez-split-button--border: none; }
+  --ez-split-button--focus--border: var(--border--medium, 2px solid) var(--color--primary-300); }
 
 .ez-skeleton {
   background: linear-gradient(to right, #f1f5f8 0%, #fafafa 97%, #f0f0f0 100%);
@@ -8791,7 +8884,7 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
     font-family: var(--font-pattern);
     font-size: var(--text--medium);
     color: var(--text--primary); }
-    .ez-grid__cell-body.ag-cell-value:not(.ag-cell-range-right):not(.ag-cell-range-single-cell):not(.ag-cell-focus), .ez-grid__cell-body.ag-cell-last-left-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell):not(.ag-cell-focus), .ez-grid__cell-body.ag-cell-last-right-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell):not(.ag-cell-focus) {
+    .ez-grid__cell-body.ag-cell-value:not(.ag-cell-range-right):not(.ag-cell-range-single-cell):not(.ag-cell-focus):not(.invalidValue), .ez-grid__cell-body.ag-cell-last-left-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell):not(.ag-cell-focus):not(.invalidValue), .ez-grid__cell-body.ag-cell-last-right-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell):not(.ag-cell-focus):not(.invalidValue) {
       border-right-color: var(--color--strokes); }
     .ez-grid__cell-body.ag-cell[col-id="statusColumn"] {
       display: flex;
@@ -8861,7 +8954,7 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
     border: 1px solid transparent;
     border-radius: 50%;
     margin: 0 auto; }
-  .ez-grid .ag-ltr .ez-grid__cell-body.ag-cell-value:not(.ag-cell-range-right):not(.ag-cell-range-single-cell):not(.ag-cell-focus), .ez-grid .ag-ltr .ez-grid__cell-body.ag-cell-last-left-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell):not(.ag-cell-focus), .ez-grid .ag-ltr .ez-grid__cell-body.ag-cell-last-right-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell):not(.ag-cell-focus) {
+  .ez-grid .ag-ltr .ez-grid__cell-body.ag-cell-value:not(.ag-cell-range-right):not(.ag-cell-range-single-cell):not(.ag-cell-focus):not(.invalidValue), .ez-grid .ag-ltr .ez-grid__cell-body.ag-cell-last-left-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell):not(.ag-cell-focus):not(.invalidValue), .ez-grid .ag-ltr .ez-grid__cell-body.ag-cell-last-right-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell):not(.ag-cell-focus):not(.invalidValue) {
     border-right-color: var(--color--strokes); }
   .ez-grid .ag-ltr .ez-grid__cell-body.ag-cell[col-id="statusColumn"] {
     display: flex;
@@ -8941,7 +9034,7 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
     font-size: var(--text--medium);
     font-weight: var(--text-weight--large); }
   .ez-grid .ag-header {
-    border-bottom: none; }
+    border-bottom: var(--border--small) var(--color--strokes); }
   .ez-grid .ag-menu-separator {
     display: none; }
   .ez-grid .ag-tabs-header.ag-menu-header {
@@ -9089,9 +9182,9 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
     scrollbar-color: var(--scrollbar--clicked) var(--scrollbar--background); }
   .ez-grid .ag-tabs.ag-menu.ag-focus-managed.ag-ltr.ag-popup-child::-webkit-scrollbar {
     background-color: var(--scrollbar--background);
-    width: var(--space--medium);
-    max-width: var(--space--medium);
-    min-width: var(--space--medium); }
+    width: var(--space--small);
+    max-width: var(--space--small);
+    min-width: var(--space--small); }
   .ez-grid .ag-tabs.ag-menu.ag-focus-managed.ag-ltr.ag-popup-child::-webkit-scrollbar-track {
     background-color: var(--scrollbar--background);
     border-radius: var(--border--radius-small); }
@@ -9107,9 +9200,9 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
     scrollbar-color: var(--scrollbar--clicked) var(--scrollbar--background); }
   .ez-grid .ag-virtual-list-viewport.ag-column-select-virtual-list-viewport.ag-focus-managed::-webkit-scrollbar {
     background-color: var(--scrollbar--background);
-    width: var(--space--medium);
-    max-width: var(--space--medium);
-    min-width: var(--space--medium); }
+    width: var(--space--small);
+    max-width: var(--space--small);
+    min-width: var(--space--small); }
   .ez-grid .ag-virtual-list-viewport.ag-column-select-virtual-list-viewport.ag-focus-managed::-webkit-scrollbar-track {
     background-color: var(--scrollbar--background);
     border-radius: var(--border--radius-small); }
@@ -9125,9 +9218,9 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
     scrollbar-color: var(--scrollbar--clicked) var(--scrollbar--background); }
   .ez-grid .ag-virtual-list-viewport.ag-filter-virtual-list-viewport.ag-focus-managed::-webkit-scrollbar {
     background-color: var(--scrollbar--background);
-    width: var(--space--medium);
-    max-width: var(--space--medium);
-    min-width: var(--space--medium); }
+    width: var(--space--small);
+    max-width: var(--space--small);
+    min-width: var(--space--small); }
   .ez-grid .ag-virtual-list-viewport.ag-filter-virtual-list-viewport.ag-focus-managed::-webkit-scrollbar-track {
     background-color: var(--scrollbar--background);
     border-radius: var(--border--radius-small); }
@@ -9145,9 +9238,9 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
     overflow-x: hidden; }
   .ez-grid .ag-body-viewport::-webkit-scrollbar {
     background-color: var(--scrollbar--background);
-    width: var(--space--medium);
-    max-width: var(--space--medium);
-    min-width: var(--space--medium); }
+    width: var(--space--small);
+    max-width: var(--space--small);
+    min-width: var(--space--small); }
   .ez-grid .ag-body-viewport::-webkit-scrollbar-track {
     background-color: var(--scrollbar--background);
     border-radius: var(--border--radius-small); }
@@ -9165,9 +9258,9 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
   .ez-grid .ag-column-select-header {
     padding: 0; }
   .ez-grid .ag-body-horizontal-scroll {
-    height: var(--space--medium);
-    max-height: var(--space--medium);
-    min-height: var(--space--medium); }
+    height: var(--space--small);
+    max-height: var(--space--small);
+    min-height: var(--space--small); }
   .ez-grid .ag-set-filter-item {
     margin: 0; }
   .ez-grid .ag-body-horizontal-scroll-viewport {
@@ -9175,9 +9268,9 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
     scrollbar-color: var(--scrollbar--clicked) var(--scrollbar--background); }
   .ez-grid .ag-body-horizontal-scroll-viewport::-webkit-scrollbar {
     background-color: var(--scrollbar--background);
-    height: var(--space--medium);
-    max-height: var(--space--medium);
-    min-height: var(--space--medium); }
+    height: var(--space--small);
+    max-height: var(--space--small);
+    min-height: var(--space--small); }
   .ez-grid .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-track {
     background-color: var(--scrollbar--background);
     border-radius: var(--border--radius-small); }
@@ -9197,6 +9290,8 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
     --ez-check--hover--background-color: transparent; }
   .ez-grid .ag-header-row-column {
     display: flex; }
+  .ez-grid .ag-cell.invalidValue {
+    border: 2px var(--color-alert--error-800) solid; }
 
 .grid_editor {
   --ez-text-input--height--slim: 25px;