@sankhyalabs/ez-design 5.10.0-dev.1 → 5.10.0-dev.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/dist/default/ez-themed.css +125 -49
  2. package/dist/default/ez-themed.min.css +1 -1
  3. package/dist/default/icons/fonts/ez-icons.css +159 -155
  4. package/dist/default/icons/fonts/ez-icons.eot +0 -0
  5. package/dist/default/icons/fonts/ez-icons.less +159 -155
  6. package/dist/default/icons/fonts/ez-icons.module.less +159 -155
  7. package/dist/default/icons/fonts/ez-icons.scss +312 -304
  8. package/dist/default/icons/fonts/ez-icons.styl +159 -155
  9. package/dist/default/icons/fonts/ez-icons.svg +161 -149
  10. package/dist/default/icons/fonts/ez-icons.symbol.svg +1 -1
  11. package/dist/default/icons/fonts/ez-icons.ttf +0 -0
  12. package/dist/default/icons/fonts/ez-icons.woff +0 -0
  13. package/dist/default/icons/fonts/ez-icons.woff2 +0 -0
  14. package/dist/default/icons/fonts/index.html +1 -1
  15. package/dist/default/icons/fonts/symbol.html +28 -0
  16. package/dist/default/icons/fonts/unicode.html +5 -5
  17. package/dist/default/icons/svg/add-to-cart.svg +8 -0
  18. package/dist/default/icons/svg/cart-history.svg +7 -0
  19. package/dist/default/icons/svg/clean-cart.svg +6 -0
  20. package/dist/default/icons/svg/remove-from-cart.svg +6 -0
  21. package/package.json +1 -1
package/dist/default/ez-themed.css CHANGED
@@ -112,11 +112,13 @@
112
112
  --border--medium: 2px solid;
113
113
  --border--large: 3px solid;
114
114
  --border--xlarge: 5px solid;
115
- --shadow: 0px 0px 16px 0px rgba(0, 38, 111, .12);
116
- --shadow-focus: 0 0 0 2px;
117
- --shadow--small: 0 0 16px rgba(0, 38, 111, 0.07);
118
- --shadow--medium: 0px 8px 24px rgba(0, 38, 111, 0.1);
115
+ --shadow--xsmall: 0 0 3px 0 rgba(43, 58, 84, 0.20);
116
+ --shadow--small: 0 0 12px 0 rgba(43, 58, 84, 0.08);
117
+ --shadow: 0px 0px 16px 0px rgba(43, 58, 84, .12);
118
+ --shadow--medium: 0 0 24px 0 rgba(43, 58, 84, 0.10);
119
119
  --shadow--hard: 0 0 16px rgba(43, 58, 84, 0.24);
120
+ --shadow-focus: 0 0 0 2px;
121
+ --shadow--outline: 0px 0px 0px 1px;
120
122
  --transition: .2s linear;
121
123
  --space--extra-small: 3px;
122
124
  --space--small: 6px;
@@ -870,7 +872,8 @@ body {
870
872
  color: #fff;
871
873
  text-shadow: 0 0 0 #fff, 0 0 1px transparent; }
872
874
  .ez-text--bold {
873
- font-weight: 600; }
875
+ font-weight: 600;
876
+ color: var(--title--primary); }
874
877
  .ez-text--full {
875
878
  width: 100%; }
876
879
  .ez-text--primary {
@@ -901,6 +904,7 @@ body {
901
904
  .ez-title {
902
905
  display: flex;
903
906
  font-family: "Roboto";
907
+ color: var(--title--primary);
904
908
  margin: 0;
905
909
  font-weight: 600;
906
910
  line-height: 1.3; }
@@ -1381,6 +1385,14 @@ body {
1381
1385
  width: 100%;
1382
1386
  border-radius: var(--border--radius-medium);
1383
1387
  box-shadow: var(--shadow); }
1388
+ .ez-box__container--padding-small {
1389
+ padding: var(--space--sm);
1390
+ display: flex;
1391
+ flex-wrap: wrap;
1392
+ background-color: var(--background--xlight);
1393
+ width: 100%;
1394
+ border-radius: var(--border--radius-medium);
1395
+ box-shadow: var(--shadow); }
1384
1396
  .ez-box__container--inverted {
1385
1397
  background-color: var(--background--xlight);
1386
1398
  border-radius: var(--border--radius-medium); }
@@ -1405,6 +1417,8 @@ body {
1405
1417
  .ez-box__container--size-auto {
1406
1418
  width: auto;
1407
1419
  height: auto; }
1420
+ .ez-box__container--nowrap {
1421
+ flex-wrap: nowrap; }
1408
1422
  .ez-box__footer {
1409
1423
  display: flex;
1410
1424
  flex-wrap: wrap;
@@ -1420,6 +1434,15 @@ body {
1420
1434
  background-color: var(--background--xlight); }
1421
1435
  .ez-box--shadow-small .ez-box__container {
1422
1436
  box-shadow: none; }
1437
+ .ez-box--shadow-xsmall {
1438
+ box-shadow: var(--shadow--xsmall);
1439
+ background-color: var(--background--xlight); }
1440
+ .ez-box--shadow-xsmall .ez-box__container {
1441
+ box-shadow: none; }
1442
+ .ez-box--outline {
1443
+ box-shadow: var(--shadow--outline) var(--color--strokes);
1444
+ border: none;
1445
+ outline: none; }
1423
1446
  .ez-box--no-border {
1424
1447
  border: none; }
1425
1448
  .ez-box--info--success {
@@ -1486,39 +1509,64 @@ body {
1486
1509
  .ez-breadcrumb__arrow {
1487
1510
  display: none; } }
1488
1511
 
1489
- .ez-button--secondary {
1490
- --ez-button--background-color: var(--background--medium);
1491
- --ez-button--hover--background-color: var(--background--medium);
1492
- --ez-button--hover-color: var(--color--primary-600);
1493
- --ez-button--color: var(--title--primary);
1494
- --ez-button--disabled--background-color: var(--color--disable-secondary);
1495
- --ez-button--active--background-color: var(--background--strong);
1496
- --ez-button--disabled--background-color: var(--background--medium);
1497
- --ez-button--active-color: var(--color--primary-700); }
1498
-
1499
1512
  .ez-button--primary {
1500
- --ez-button--font-weight: var(--text-weight--medium);
1513
+ /* default */
1514
+ --ez-button--color: var(--text--inverted);
1501
1515
  --ez-button--background-color: var(--color--primary);
1502
- --ez-button--hover--background-color: var(--color--primary-600);
1516
+ --ez-button--font-weight: var(--text-weight--medium);
1517
+ /* hover */
1503
1518
  --ez-button--hover-color: var(--text--inverted);
1504
- --ez-button--color: var(--text--inverted);
1519
+ --ez-button--hover--background-color: var(--color--primary-600);
1520
+ /* active */
1521
+ --ez-button--active-color: var(--text--inverted);
1505
1522
  --ez-button--active--background-color: var(--color--primary-700);
1523
+ /* disabled */
1524
+ --ez-button--disabled-color: var(--text--primary);
1506
1525
  --ez-button--disabled--background-color: var(--background--medium);
1507
- --ez-button--active-color: var(--text--inverted); }
1526
+ --ez-button--disabled--border: 1px solid var(--color--strokes);
1527
+ --ez-button--disabled--border-radius: 24px;
1528
+ /* focus */
1529
+ --ez-button--focus--box-shadow: none;
1530
+ --ez-button--focus--border: var(--border--medium, 2px solid) var(--color--primary-300); }
1531
+
1532
+ .ez-button--secondary {
1533
+ /* default */
1534
+ --ez-button--color: var(--title--primary);
1535
+ --ez-button--background-color: var(--background--light);
1536
+ /* hover */
1537
+ --ez-button--hover-color: var(--color--primary-600);
1538
+ --ez-button--hover--background-color: var(--background--light);
1539
+ /* active */
1540
+ --ez-button--active-color: var(--color--primary-700);
1541
+ --ez-button--active--background-color: var(--background--light);
1542
+ /* disabled */
1543
+ --ez-button--disabled-color: var(--text--primary);
1544
+ --ez-button--disabled--background-color: var(--background--medium);
1545
+ --ez-button--disabled--border: 1px solid var(--color--strokes);
1546
+ --ez-button--disabled--border-radius: 24px;
1547
+ /* focus */
1548
+ --ez-button--focus--box-shadow: none;
1549
+ --ez-button--focus--border: var(--border--medium, 2px solid) var(--color--primary-300); }
1508
1550
 
1509
1551
  .ez-button--tertiary {
1552
+ /* default */
1553
+ --ez-button--color: var(--title--primary);
1554
+ --ez-button--background-color: none;
1510
1555
  --ez-button--font-weight: var(--text-weight--medium);
1511
1556
  --ez-button--border: none;
1512
- --ez-button--background-color: none;
1557
+ /* hover */
1513
1558
  --ez-button--hover-color: var(--color--primary-600);
1514
- --ez-button--color: var(--title--primary);
1515
1559
  --ez-button--hover--background-color: none;
1560
+ /* active */
1561
+ --ez-button--active-color: var(--title--primary);
1516
1562
  --ez-button--active--background-color: var(--color--disable-secondary);
1517
- --ez-button--focus--border: var(--border--xlarge, 4px solid) var(--color--primary-300);
1563
+ /* disabled */
1564
+ --ez-button--disabled-color: var(--text--primary);
1565
+ --ez-button--disabled--background-color: var(--background--medium);
1566
+ --ez-button--disabled--border: none;
1567
+ /* focus */
1518
1568
  --ez-button--focus--box-shadow: none;
1519
- --ez-button--disabled--background-color: none;
1520
- --ez-button--disabled-color: var(--text--disable);
1521
- --ez-button--active-color: var(--title--primary); }
1569
+ --ez-button--focus--border: var(--border--medium, 2px solid) var(--color--primary-300); }
1522
1570
 
1523
1571
  .ez-button--link--primary {
1524
1572
  color: #008561;
@@ -1934,6 +1982,8 @@ body {
1934
1982
  .ez-icon--logo {
1935
1983
  width: 49px;
1936
1984
  height: 53px; } }
1985
+ .ez-icon-cursor--pointer {
1986
+ cursor: pointer; }
1937
1987
 
1938
1988
  .ez-identifier {
1939
1989
  display: flex;
@@ -2585,39 +2635,63 @@ body {
2585
2635
  height: 576px; }
2586
2636
 
2587
2637
  .ez-split-button--primary {
2638
+ /* default */
2639
+ --ez-split-button--color: var(--text--inverted);
2588
2640
  --ez-split-button--background-color: var(--color--primary);
2589
2641
  --ez-split-button--font-weight: var(--text-weight--medium);
2590
- --ez-split-button--hover--background-color: var(--color--primary-600);
2642
+ --ez-split-button--border: none;
2643
+ /* hover */
2591
2644
  --ez-split-button--hover-color: var(--text--inverted);
2592
- --ez-split-button--color: var(--text--inverted);
2593
- --ez-split-button--active--background-color: var(--color--primary-700);
2645
+ --ez-split-button--hover--background-color: var(--color--primary-600);
2646
+ /* active */
2594
2647
  --ez-split-button--active-color: var(--text--inverted);
2595
- --ez-split-button--disabled-color: var(--text--disable);
2596
- --ez-split-button--disabled--background-color: var(--color--disable-primary); }
2648
+ --ez-split-button--active--background-color: var(--color--primary-700);
2649
+ /* disabled */
2650
+ --ez-split-button--disabled-color: var(--text--primary);
2651
+ --ez-split-button--disabled--background-color: var(--background--medium);
2652
+ --ez-split-button--disabled--border: 1px solid var(--color--strokes);
2653
+ --ez-split-button--disabled--border-radius: 24px;
2654
+ /* focus */
2655
+ --ez-split-button--focus--box-shadow: none;
2656
+ --ez-split-button--focus--border: var(--border--medium, 2px solid) var(--color--primary-300); }
2597
2657
 
2598
2658
  .ez-split-button--secondary {
2599
- --ez-split-button--background-color:var(--background--medium);
2600
- --ez-split-button--hover--background-color: var(--background--medium);
2601
- --ez-split-button--hover-color: var(--color--primary-600);
2659
+ /* default */
2602
2660
  --ez-split-button--color: var(--title--primary);
2603
- --ez-split-button--active--background-color: var(--background--medium);
2661
+ --ez-split-button--background-color: var(--background--light);
2662
+ /* hover */
2663
+ --ez-split-button--hover-color: var(--color--primary-600);
2664
+ --ez-split-button--hover--background-color: var(--background--light);
2665
+ /* active */
2604
2666
  --ez-split-button--active-color: var(--color--primary-700);
2605
- --ez-split-button--disabled-color: var(--text--disable);
2606
- --ez-split-button--disabled--background-color: var(--color--disable-secondary); }
2667
+ --ez-split-button--active--background-color: var(--background--light);
2668
+ /* disabled */
2669
+ --ez-split-button--disabled-color: var(--text--primary);
2670
+ --ez-split-button--disabled--background-color: var(--background--medium);
2671
+ --ez-split-button--disabled--border: 1px solid var(--color--strokes);
2672
+ --ez-split-button--disabled--border-radius: 24px;
2673
+ /* focus */
2674
+ --ez-split-button--focus--box-shadow: none;
2675
+ --ez-split-button--focus--border: var(--border--medium, 2px solid) var(--color--primary-300); }
2607
2676
 
2608
2677
  .ez-split-button--tertiary {
2678
+ --ez-split-button--color: var(--title--primary);
2609
2679
  --ez-split-button--background-color: none;
2610
2680
  --ez-split-button--font-weight: var(--text-weight--medium);
2611
- --ez-split-button--hover--background-color: none;
2681
+ --ez-split-button--border: none;
2682
+ /* hover */
2612
2683
  --ez-split-button--hover-color: var(--color--primary-600);
2613
- --ez-split-button--color: var(--title--primary);
2614
- --ez-split-button--active--background-color: var(--color--disable-secondary);
2684
+ --ez-split-button--hover--background-color: none;
2685
+ /* active */
2615
2686
  --ez-split-button--active-color: var(--title--primary);
2616
- --ez-split-button--disabled-color: var(--text--disable);
2617
- --ez-split-button--disabled--background-color: none;
2618
- --ez-split-button--focus--border: var(--border--xlarge, 4px solid) var(--color--primary-300);
2687
+ --ez-split-button--active--background-color: var(--color--disable-secondary);
2688
+ /* disabled */
2689
+ --ez-split-button--disabled-color: var(--text--primary);
2690
+ --ez-split-button--disabled--background-color: var(--background--medium);
2691
+ --ez-split-button--disabled--border: none;
2692
+ /* focus */
2619
2693
  --ez-split-button--focus--box-shadow: none;
2620
- --ez-split-button--border: none; }
2694
+ --ez-split-button--focus--border: var(--border--medium, 2px solid) var(--color--primary-300); }
2621
2695
 
2622
2696
  .ez-skeleton {
2623
2697
  background: linear-gradient(to right, #f1f5f8 0%, #fafafa 97%, #f0f0f0 100%);
@@ -8821,7 +8895,7 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
8821
8895
  font-family: var(--font-pattern);
8822
8896
  font-size: var(--text--medium);
8823
8897
  color: var(--text--primary); }
8824
- .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) {
8898
+ .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) {
8825
8899
  border-right-color: var(--color--strokes); }
8826
8900
  .ez-grid__cell-body.ag-cell[col-id="statusColumn"] {
8827
8901
  display: flex;
@@ -8891,7 +8965,7 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
8891
8965
  border: 1px solid transparent;
8892
8966
  border-radius: 50%;
8893
8967
  margin: 0 auto; }
8894
- .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) {
8968
+ .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) {
8895
8969
  border-right-color: var(--color--strokes); }
8896
8970
  .ez-grid .ag-ltr .ez-grid__cell-body.ag-cell[col-id="statusColumn"] {
8897
8971
  display: flex;
@@ -8971,7 +9045,7 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
8971
9045
  font-size: var(--text--medium);
8972
9046
  font-weight: var(--text-weight--large); }
8973
9047
  .ez-grid .ag-header {
8974
- border-bottom: none; }
9048
+ border-bottom: var(--border--small) var(--color--strokes); }
8975
9049
  .ez-grid .ag-menu-separator {
8976
9050
  display: none; }
8977
9051
  .ez-grid .ag-tabs-header.ag-menu-header {
@@ -9195,9 +9269,9 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
9195
9269
  .ez-grid .ag-column-select-header {
9196
9270
  padding: 0; }
9197
9271
  .ez-grid .ag-body-horizontal-scroll {
9198
- height: var(--space--medium);
9199
- max-height: var(--space--medium);
9200
- min-height: var(--space--medium); }
9272
+ height: var(--space--small);
9273
+ max-height: var(--space--small);
9274
+ min-height: var(--space--small); }
9201
9275
  .ez-grid .ag-set-filter-item {
9202
9276
  margin: 0; }
9203
9277
  .ez-grid .ag-body-horizontal-scroll-viewport {
@@ -9227,6 +9301,8 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
9227
9301
  --ez-check--hover--background-color: transparent; }
9228
9302
  .ez-grid .ag-header-row-column {
9229
9303
  display: flex; }
9304
+ .ez-grid .ag-cell.invalidValue {
9305
+ border: 2px var(--color-alert--error-800) solid; }
9230
9306
 
9231
9307
  .grid_editor {
9232
9308
  --ez-text-input--height--slim: 25px;