@sankhyalabs/ez-design 5.10.0-dev.2 → 5.10.0-dev.20

package/dist/default/ez-themed.css

@@ -79,7 +79,7 @@
   --text--extra-large: 20px;
   --text-weight--extra-small: 200;
   --text-weight--medium: 400;
-  --text-weight--large: 600;
+  --text-weight--large: 500;
   --text--primary: #626e82;
   --text--secondary: #a2abb9;
   --text--disable: #afb6c0;
@@ -112,11 +112,13 @@
   --border--medium: 2px solid;
   --border--large: 3px solid;
   --border--xlarge: 5px solid;
-  --shadow: 0px 0px 16px 0px rgba(0, 38, 111, .12);
-  --shadow-focus: 0 0 0 2px;
-  --shadow--small: 0 0 16px rgba(0, 38, 111, 0.07);
-  --shadow--medium: 0px 8px 24px rgba(0, 38, 111, 0.1);
+  --shadow--xsmall: 0 0 3px 0 rgba(43, 58, 84, 0.20);
+  --shadow--small: 0 0 12px 0 rgba(43, 58, 84, 0.08);
+  --shadow: 0px 0px 16px 0px rgba(43, 58, 84, .12);
+  --shadow--medium: 0 0 24px 0 rgba(43, 58, 84, 0.10);
   --shadow--hard: 0 0 16px rgba(43, 58, 84, 0.24);
+  --shadow-focus: 0 0 0 2px;
+  --shadow--outline: 0px 0px 0px 1px;
   --transition: .2s linear;
   --space--extra-small: 3px;
   --space--small: 6px;
@@ -489,7 +491,7 @@ body {
     color: #626e82;
     font-family: "Roboto";
     font-size: 14px;
-    font-weight: 600;
+    font-weight: 500;
     width: 100%;
     word-break: break-word;
     padding-bottom: 3px; }
@@ -499,7 +501,7 @@ body {
   font-family: "Roboto"; }
   .ez-label--title {
     font-size: 14px;
-    font-weight: 600;
+    font-weight: 500;
     margin-bottom: 3px;
     flex-grow: 1; }
   .ez-label--description {
@@ -870,7 +872,7 @@ body {
     color: #fff;
     text-shadow: 0 0 0 #fff, 0 0 1px transparent; }
   .ez-text--bold {
-    font-weight: 600;
+    font-weight: 500;
     color: var(--title--primary); }
   .ez-text--full {
     width: 100%; }
@@ -904,7 +906,7 @@ body {
   font-family: "Roboto";
   color: var(--title--primary);
   margin: 0;
-  font-weight: 600;
+  font-weight: 500;
   line-height: 1.3; }
   .ez-title--extra-small {
     font-size: 12px; }
@@ -1128,7 +1130,7 @@ body {
     color: #fff; }
   .ez-alert__title {
     font-size: 14px;
-    font-weight: 600;
+    font-weight: 500;
     width: 100%;
     margin: 0 0 6px 0; }
   .ez-alert__description {
@@ -1319,7 +1321,7 @@ body {
     font-family: "Roboto";
     padding: 12px;
     font-size: 14px;
-    font-weight: 600; }
+    font-weight: 500; }
 
 .ez-badge--primary-solid {
   --ez-badge--background-color: var(--color--primary);
@@ -1383,6 +1385,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); }
@@ -1407,6 +1417,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;
@@ -1422,6 +1434,15 @@ body {
       background-color: var(--background--xlight); }
       .ez-box--shadow-small .ez-box__container {
         box-shadow: none; }
+    .ez-box--shadow-xsmall {
+      box-shadow: var(--shadow--xsmall);
+      background-color: var(--background--xlight); }
+      .ez-box--shadow-xsmall .ez-box__container {
+        box-shadow: none; }
+  .ez-box--outline {
+    box-shadow: var(--shadow--outline) var(--color--strokes);
+    border: none;
+    outline: none; }
   .ez-box--no-border {
     border: none; }
   .ez-box--info--success {
@@ -1475,7 +1496,7 @@ body {
           font-size: 19px; } }
     .ez-breadcrumb__item--active {
       display: flex;
-      font-weight: 600;
+      font-weight: 500;
       font-size: 14px;
       color: #2b3a54; }
       .ez-breadcrumb__item--active a:hover {
@@ -1488,39 +1509,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--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--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--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;
@@ -1801,7 +1847,7 @@ body {
       .ez-flap__header-item svg {
         fill: #a7afbd; }
       .ez-flap__header-item--active {
-        font-weight: 600;
+        font-weight: 500;
         background-color: #fff;
         border-top-left-radius: 12px;
         border-top-right-radius: 12px;
@@ -1936,6 +1982,8 @@ body {
       .ez-icon--logo {
         width: 49px;
         height: 53px; } }
+  .ez-icon-cursor--pointer {
+    cursor: pointer; }
 
 .ez-identifier {
   display: flex;
@@ -1960,7 +2008,7 @@ body {
     text-shadow: 0 0 0 #353535, 0 0 1px transparent; }
   .ez-identifier__description {
     font-size: 14px;
-    font-weight: 600;
+    font-weight: 500;
     margin: 0;
     width: 100%; }
 
@@ -1974,6 +2022,9 @@ body {
   --ez-date-input__input--border-color: var(--color--strokes, #DCE0E8);
   --ez-date-input__input--background-color: var(--background--xlight, #FFFFFF); }
 
+.ez-input__no-margin {
+  --ez-text-input__margin-bottom: 0; }
+
 .ez-lane {
   display: flex;
   flex-wrap: wrap;
@@ -2079,7 +2130,7 @@ body {
     text-decoration: underline; }
   .ez-link--primary {
     color: #00523c;
-    font-weight: 600; }
+    font-weight: 500; }
     .ez-link--primary svg {
       fill: #00523c;
       opacity: 0.7; }
@@ -2371,7 +2422,7 @@ body {
     min-width: 35px;
     color: #00523c;
     fill: #00523c;
-    font-weight: 600;
+    font-weight: 500;
     align-items: center;
     height: 36px;
     font-size: 14px;
@@ -2482,7 +2533,7 @@ body {
         font-size: 16px; }
       .ez-progress-indicator__item--active span {
         color: #626e82;
-        font-weight: 600;
+        font-weight: 500;
         font-size: 14px; }
     .ez-progress-indicator__item--done .ez-progress-indicator__numerator {
       background-color: #157A00; }
@@ -2498,7 +2549,7 @@ body {
     width: 32px;
     height: 32px;
     margin-right: 6px;
-    font-weight: 600;
+    font-weight: 500;
     color: #fff; }
   .ez-progress-indicator__container {
     display: flex;
@@ -2587,39 +2638,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%);
@@ -2883,13 +2958,13 @@ body {
     .ez-toggle__item--active {
       background-color: #f2faf8;
       color: #008561;
-      font-weight: 600;
+      font-weight: 500;
       font-size: 14px;
       border: 1px #008561; }
     .ez-toggle__item--default {
       background-color: #f2faf8;
       color: #008561;
-      font-weight: 600;
+      font-weight: 500;
       font-size: 14px;
       border: 1px #008561;
       cursor: not-allowed; }
@@ -2943,7 +3018,7 @@ body {
     .ez-toggle-group__item--active {
       background-color: #f2faf8;
       color: #00523c;
-      font-weight: 600;
+      font-weight: 500;
       font-size: 14px;
       border: 1px #00523c; }
     .ez-toggle-group__item--disabled {
@@ -5821,8 +5896,9 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
 
 .ez-grid {
   --grid-row-default-bg: var(--background--xlight);
-  --grid-row-medium-bg: var(--background--medium);
-  --grid-row-strong-bg: var(--background--strong);
+  --grid-row-hover-bg: var(--background--strong);
+  --grid-row-selected-bg: var(--color--primary-300);
+  --grid-row-selected-border-color: var(--color--primary);
   --grid-cel-border-small: var(--border--small);
   --grid-cel-border-medium: var(--border--medium);
   --grid-cel-border-color-primary: var(--color--primary);
@@ -8823,7 +8899,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;
@@ -8832,7 +8908,7 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
       padding-left: 0;
       padding-right: 11px; }
     .ez-grid__cell-body.ag-cell[col-id="checkBoxColumn"] {
-      border-right: none;
+      border: none;
       padding-left: 0;
       padding-right: 0; }
       .ez-grid__cell-body.ag-cell[col-id="checkBoxColumn"] .ag-selection-checkbox {
@@ -8893,7 +8969,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;
@@ -8902,7 +8978,7 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
     padding-left: 0;
     padding-right: 11px; }
   .ez-grid .ag-ltr .ez-grid__cell-body.ag-cell[col-id="checkBoxColumn"] {
-    border-right: none;
+    border: none;
     padding-left: 0;
     padding-right: 0; }
     .ez-grid .ag-ltr .ez-grid__cell-body.ag-cell[col-id="checkBoxColumn"] .ag-selection-checkbox {
@@ -8973,22 +9049,29 @@ 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 {
     display: none; }
   .ez-grid .ag-row-no-focus {
     background-color: var(--grid-row-default-bg); }
+  .ez-grid .ag-row {
+    border-bottom: var(--border--small) var(--color--strokes); }
+  .ez-grid .row-striped {
+    background-color: var(--background--medium); }
   .ez-grid .ag-row-selected {
-    background-color: var(--grid-row-strong-bg); }
+    background-color: var(--grid-row-selected-bg);
+    border-top: var(--border--small) var(--grid-row-selected-border-color);
+    border-bottom: var(--border--small) var(--grid-row-selected-border-color); }
   .ez-grid .ag-row-hover {
-    background-color: var(--grid-row-medium-bg); }
+    background-color: var(--grid-row-hover-bg); }
   .ez-grid .ag-root-wrapper {
     border-bottom-right-radius: var(--border--radius-medium);
     border-bottom-left-radius: var(--border--radius-medium);
-    padding: 0 var(--space--medium) var(--space--medium) var(--space--medium);
-    border: none; }
+    padding: 0 var(--space--medium) 0 var(--space--medium);
+    border: none;
+    background: transparent; }
   .ez-grid .ag-popup-child:not(.ag-tooltip-custom) {
     background: var(--background--xlight);
     padding: var(--space--small);
@@ -9047,7 +9130,8 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
   .ez-grid .ag-menu-option-part.ag-menu-option-icon {
     font-size: var(--text--large);
     padding-right: 3px;
-    padding-left: 0; }
+    padding-left: 0;
+    color: var(--title--primary); }
   .ez-grid .ag-input-field-input.ag-text-field-input {
     height: 32px;
     padding-left: var(--space--medium); }
@@ -9099,10 +9183,6 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
       border-left: var(--border--small) transparent;
       border-top: var(--border--small) transparent;
       border-bottom: var(--border--small) transparent; }
-  .ez-grid .ag-row-odd {
-    border-bottom: var(--border--small) var(--color--strokes); }
-  .ez-grid .ag-row-even {
-    border-bottom: var(--border--small) var(--color--strokes); }
   .ez-grid .ag-checkbox-input-wrapper::after {
     content: ""; }
   .ez-grid .ag-checkbox-input-wrapper.ag-checked::after {
@@ -9229,6 +9309,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;
@@ -9241,6 +9323,9 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
   --ez-text-input__icon--width: 32px;
   height: 100%; }
 
+.no-padding .ag-root-wrapper {
+  padding: 0; }
+
 .grid_height-0 {
   --snk-grid-min-height: 0;
   --ez-grid--min-height: 0; }