@sankhyalabs/ez-design 2.1.0 → 2.2.0

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.
@@ -40,7 +40,8 @@
40
40
  --color--error-900: #99000F;
41
41
  --color--warning: #f2d410;
42
42
  --color--warning-200: #FDF8D8;
43
- --color--warning-900: #EFB103;
43
+ --color--alert-warning-200: #FFF7D5;
44
+ --color--alert-warning-900: #8C6B00;
44
45
  --color-alert--cold-50: #E1E9FF;
45
46
  --color-alert--cold-800: #042eff;
46
47
  --color-alert--warm-50: #feede3;
@@ -100,31 +101,45 @@
100
101
  --most-visible: 3;
101
102
  --hover--inverted: #333333;
102
103
  --icon--color: #626e82;
103
- --scrollbar--primary: var(--title--primary);
104
- --scrollbar--secondary: var(--color--disable-primary); }
104
+ --scrollbar--default: #626e82;
105
+ --scrollbar--background: #e5eaf0;
106
+ --scrollbar--hover: #2b3a54;
107
+ --scrollbar--clicked: #a2abb9; }
105
108
 
106
109
  html,
107
110
  body,
108
111
  body * {
109
112
  scrollbar-width: thin;
110
- scrollbar-color: var(--scrollbar--primary) var(--scrollbar--secondary); }
113
+ scrollbar-color: var(--scrollbar--clicked) var(--scrollbar--background); }
114
+ html::-webkit-scrollbar,
115
+ body::-webkit-scrollbar,
116
+ body *::-webkit-scrollbar {
117
+ background-color: var(--scrollbar--background);
118
+ width: var(--space--medium);
119
+ max-width: var(--space--medium);
120
+ min-width: var(--space--medium); }
111
121
  html::-webkit-scrollbar-track,
112
122
  body::-webkit-scrollbar-track,
113
123
  body *::-webkit-scrollbar-track {
114
- background-color: var(--scrollbar--secondary);
124
+ background-color: var(--scrollbar--background);
115
125
  border-radius: var(--border--radius-small); }
116
126
  html::-webkit-scrollbar-thumb,
117
127
  body::-webkit-scrollbar-thumb,
118
128
  body *::-webkit-scrollbar-thumb {
119
- background-color: var(--scrollbar--primary);
129
+ background-color: var(--scrollbar--default);
120
130
  border-radius: var(--border--radius-small); }
121
- html::-webkit-scrollbar,
122
- body::-webkit-scrollbar,
123
- body *::-webkit-scrollbar {
124
- background-color: var(--scrollbar--secondary);
125
- width: var(--space--medium);
126
- max-width: var(--space--medium);
127
- min-width: var(--space--medium); }
131
+ html::-webkit-scrollbar-thumb:vertical:hover, html::-webkit-scrollbar-thumb:horizontal:hover,
132
+ body::-webkit-scrollbar-thumb:vertical:hover,
133
+ body::-webkit-scrollbar-thumb:horizontal:hover,
134
+ body *::-webkit-scrollbar-thumb:vertical:hover,
135
+ body *::-webkit-scrollbar-thumb:horizontal:hover {
136
+ background-color: var(--scrollbar--hover); }
137
+ html::-webkit-scrollbar-thumb:vertical:active, html::-webkit-scrollbar-thumb:horizontal:active,
138
+ body::-webkit-scrollbar-thumb:vertical:active,
139
+ body::-webkit-scrollbar-thumb:horizontal:active,
140
+ body *::-webkit-scrollbar-thumb:vertical:active,
141
+ body *::-webkit-scrollbar-thumb:horizontal:active {
142
+ background-color: var(--scrollbar--clicked); }
128
143
 
129
144
  /*Medias*/
130
145
  body {
@@ -8669,58 +8684,78 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
8669
8684
  max-height: 150px; }
8670
8685
  .ez-grid .ag-tabs.ag-menu.ag-focus-managed.ag-ltr.ag-popup-child {
8671
8686
  scrollbar-width: thin;
8672
- scrollbar-color: var(--scrollbar--primary) var(--scrollbar--secondary); }
8673
- .ez-grid .ag-tabs.ag-menu.ag-focus-managed.ag-ltr.ag-popup-child::-webkit-scrollbar-track {
8674
- background-color: var(--scrollbar--secondary); }
8675
- .ez-grid .ag-tabs.ag-menu.ag-focus-managed.ag-ltr.ag-popup-child::-webkit-scrollbar-thumb {
8676
- background-color: var(--scrollbar--primary);
8677
- border-radius: var(--border--radius-small); }
8687
+ scrollbar-color: var(--scrollbar--clicked) var(--scrollbar--background); }
8678
8688
  .ez-grid .ag-tabs.ag-menu.ag-focus-managed.ag-ltr.ag-popup-child::-webkit-scrollbar {
8679
- background-color: var(--scrollbar--secondary);
8689
+ background-color: var(--scrollbar--background);
8680
8690
  width: var(--space--medium);
8681
8691
  max-width: var(--space--medium);
8682
8692
  min-width: var(--space--medium); }
8693
+ .ez-grid .ag-tabs.ag-menu.ag-focus-managed.ag-ltr.ag-popup-child::-webkit-scrollbar-track {
8694
+ background-color: var(--scrollbar--background);
8695
+ border-radius: var(--border--radius-small); }
8696
+ .ez-grid .ag-tabs.ag-menu.ag-focus-managed.ag-ltr.ag-popup-child::-webkit-scrollbar-thumb {
8697
+ background-color: var(--scrollbar--default);
8698
+ border-radius: var(--border--radius-small); }
8699
+ .ez-grid .ag-tabs.ag-menu.ag-focus-managed.ag-ltr.ag-popup-child::-webkit-scrollbar-thumb:vertical:hover, .ez-grid .ag-tabs.ag-menu.ag-focus-managed.ag-ltr.ag-popup-child::-webkit-scrollbar-thumb:horizontal:hover {
8700
+ background-color: var(--scrollbar--hover); }
8701
+ .ez-grid .ag-tabs.ag-menu.ag-focus-managed.ag-ltr.ag-popup-child::-webkit-scrollbar-thumb:vertical:active, .ez-grid .ag-tabs.ag-menu.ag-focus-managed.ag-ltr.ag-popup-child::-webkit-scrollbar-thumb:horizontal:active {
8702
+ background-color: var(--scrollbar--clicked); }
8683
8703
  .ez-grid .ag-virtual-list-viewport.ag-column-select-virtual-list-viewport.ag-focus-managed {
8684
8704
  scrollbar-width: thin;
8685
- scrollbar-color: var(--scrollbar--primary) var(--scrollbar--secondary); }
8705
+ scrollbar-color: var(--scrollbar--clicked) var(--scrollbar--background); }
8686
8706
  .ez-grid .ag-virtual-list-viewport.ag-column-select-virtual-list-viewport.ag-focus-managed::-webkit-scrollbar {
8687
- background-color: var(--scrollbar--secondary);
8707
+ background-color: var(--scrollbar--background);
8688
8708
  width: var(--space--medium);
8689
8709
  max-width: var(--space--medium);
8690
8710
  min-width: var(--space--medium); }
8691
8711
  .ez-grid .ag-virtual-list-viewport.ag-column-select-virtual-list-viewport.ag-focus-managed::-webkit-scrollbar-track {
8692
- background-color: var(--scrollbar--secondary); }
8712
+ background-color: var(--scrollbar--background);
8713
+ border-radius: var(--border--radius-small); }
8693
8714
  .ez-grid .ag-virtual-list-viewport.ag-column-select-virtual-list-viewport.ag-focus-managed::-webkit-scrollbar-thumb {
8694
- background-color: var(--scrollbar--primary);
8715
+ background-color: var(--scrollbar--default);
8695
8716
  border-radius: var(--border--radius-small); }
8717
+ .ez-grid .ag-virtual-list-viewport.ag-column-select-virtual-list-viewport.ag-focus-managed::-webkit-scrollbar-thumb:vertical:hover, .ez-grid .ag-virtual-list-viewport.ag-column-select-virtual-list-viewport.ag-focus-managed::-webkit-scrollbar-thumb:horizontal:hover {
8718
+ background-color: var(--scrollbar--hover); }
8719
+ .ez-grid .ag-virtual-list-viewport.ag-column-select-virtual-list-viewport.ag-focus-managed::-webkit-scrollbar-thumb:vertical:active, .ez-grid .ag-virtual-list-viewport.ag-column-select-virtual-list-viewport.ag-focus-managed::-webkit-scrollbar-thumb:horizontal:active {
8720
+ background-color: var(--scrollbar--clicked); }
8696
8721
  .ez-grid .ag-virtual-list-viewport.ag-filter-virtual-list-viewport.ag-focus-managed {
8697
8722
  scrollbar-width: thin;
8698
- scrollbar-color: var(--scrollbar--primary) var(--scrollbar--secondary); }
8723
+ scrollbar-color: var(--scrollbar--clicked) var(--scrollbar--background); }
8699
8724
  .ez-grid .ag-virtual-list-viewport.ag-filter-virtual-list-viewport.ag-focus-managed::-webkit-scrollbar {
8700
- background-color: var(--scrollbar--secondary);
8725
+ background-color: var(--scrollbar--background);
8701
8726
  width: var(--space--medium);
8702
8727
  max-width: var(--space--medium);
8703
8728
  min-width: var(--space--medium); }
8704
8729
  .ez-grid .ag-virtual-list-viewport.ag-filter-virtual-list-viewport.ag-focus-managed::-webkit-scrollbar-track {
8705
- background-color: var(--scrollbar--secondary); }
8730
+ background-color: var(--scrollbar--background);
8731
+ border-radius: var(--border--radius-small); }
8706
8732
  .ez-grid .ag-virtual-list-viewport.ag-filter-virtual-list-viewport.ag-focus-managed::-webkit-scrollbar-thumb {
8707
- background-color: var(--scrollbar--primary);
8733
+ background-color: var(--scrollbar--default);
8708
8734
  border-radius: var(--border--radius-small); }
8735
+ .ez-grid .ag-virtual-list-viewport.ag-filter-virtual-list-viewport.ag-focus-managed::-webkit-scrollbar-thumb:vertical:hover, .ez-grid .ag-virtual-list-viewport.ag-filter-virtual-list-viewport.ag-focus-managed::-webkit-scrollbar-thumb:horizontal:hover {
8736
+ background-color: var(--scrollbar--hover); }
8737
+ .ez-grid .ag-virtual-list-viewport.ag-filter-virtual-list-viewport.ag-focus-managed::-webkit-scrollbar-thumb:vertical:active, .ez-grid .ag-virtual-list-viewport.ag-filter-virtual-list-viewport.ag-focus-managed::-webkit-scrollbar-thumb:horizontal:active {
8738
+ background-color: var(--scrollbar--clicked); }
8709
8739
  .ez-grid .ag-body-viewport {
8710
8740
  scrollbar-width: thin;
8711
- scrollbar-color: var(--scrollbar--primary) var(--scrollbar--secondary); }
8741
+ scrollbar-color: var(--scrollbar--clicked) var(--scrollbar--background); }
8712
8742
  .ez-grid .ag-center-cols-viewport {
8713
8743
  overflow-x: hidden; }
8714
8744
  .ez-grid .ag-body-viewport::-webkit-scrollbar {
8715
- background-color: var(--scrollbar--secondary);
8745
+ background-color: var(--scrollbar--background);
8716
8746
  width: var(--space--medium);
8717
8747
  max-width: var(--space--medium);
8718
8748
  min-width: var(--space--medium); }
8719
8749
  .ez-grid .ag-body-viewport::-webkit-scrollbar-track {
8720
- background-color: var(--scrollbar--secondary); }
8750
+ background-color: var(--scrollbar--background);
8751
+ border-radius: var(--border--radius-small); }
8721
8752
  .ez-grid .ag-body-viewport::-webkit-scrollbar-thumb {
8722
- background-color: var(--scrollbar--primary);
8753
+ background-color: var(--scrollbar--default);
8723
8754
  border-radius: var(--border--radius-small); }
8755
+ .ez-grid .ag-body-viewport::-webkit-scrollbar-thumb:vertical:hover, .ez-grid .ag-body-viewport::-webkit-scrollbar-thumb:horizontal:hover {
8756
+ background-color: var(--scrollbar--hover); }
8757
+ .ez-grid .ag-body-viewport::-webkit-scrollbar-thumb:vertical:active, .ez-grid .ag-body-viewport::-webkit-scrollbar-thumb:horizontal:active {
8758
+ background-color: var(--scrollbar--clicked); }
8724
8759
  .ez-grid .ag-virtual-list-viewport.ag-column-select-virtual-list-viewport.ag-focus-managed {
8725
8760
  padding: 0; }
8726
8761
  .ez-grid .ag-virtual-list-item.ag-column-select-virtual-list-item {
@@ -8735,17 +8770,22 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
8735
8770
  margin: 0; }
8736
8771
  .ez-grid .ag-body-horizontal-scroll-viewport {
8737
8772
  scrollbar-width: thin;
8738
- scrollbar-color: var(--scrollbar--primary) var(--scrollbar--secondary); }
8773
+ scrollbar-color: var(--scrollbar--clicked) var(--scrollbar--background); }
8739
8774
  .ez-grid .ag-body-horizontal-scroll-viewport::-webkit-scrollbar {
8740
- background-color: var(--scrollbar--secondary);
8775
+ background-color: var(--scrollbar--background);
8741
8776
  height: var(--space--medium);
8742
8777
  max-height: var(--space--medium);
8743
8778
  min-height: var(--space--medium); }
8744
8779
  .ez-grid .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-track {
8745
- background-color: var(--scrollbar--secondary); }
8780
+ background-color: var(--scrollbar--background);
8781
+ border-radius: var(--border--radius-small); }
8746
8782
  .ez-grid .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb {
8747
- background-color: var(--scrollbar--primary);
8783
+ background-color: var(--scrollbar--default);
8748
8784
  border-radius: var(--border--radius-small); }
8785
+ .ez-grid .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:vertical:hover, .ez-grid .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:horizontal:hover {
8786
+ background-color: var(--scrollbar--hover); }
8787
+ .ez-grid .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:vertical:active, .ez-grid .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:horizontal:active {
8788
+ background-color: var(--scrollbar--clicked); }
8749
8789
  .ez-grid .ag-checkbox-input-wrapper.ag-checked > input[type="checkbox"]:before {
8750
8790
  border: var(--border--medium) var(--color--primary); }
8751
8791
  .ez-grid .ag-header__selection-checkbox {