@gipisistemas/ngx-core 1.0.13 → 1.0.15

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.
@@ -34,6 +34,18 @@
34
34
  .mdc-evolution-chip__cell .mat-mdc-chip-action {
35
35
  cursor: pointer;
36
36
  }
37
+
38
+ &:hover {
39
+ --mat-chip-elevated-container-color: #{$primary-600};
40
+ --mat-chip-outline-color: #{$primary-600};
41
+ }
42
+
43
+ .g-control-item-all-icon {
44
+ width: 1.8rem;
45
+ height: 1.8rem;
46
+ font-size: 1.8rem;
47
+ color: inherit;
48
+ }
37
49
  }
38
50
 
39
51
  .g-chips-control-item {
@@ -78,11 +90,13 @@
78
90
  background-color: transparent;
79
91
  transition: all 0.2s;
80
92
  cursor: pointer;
93
+ color: $font-color;
81
94
 
82
95
  .g-control-item-button-icon {
83
96
  width: 1.8rem;
84
97
  height: 1.8rem;
85
98
  font-size: 1.8rem;
99
+ color: inherit;
86
100
  }
87
101
 
88
102
  &:disabled {
@@ -99,29 +113,7 @@
99
113
 
100
114
  &:not(:disabled):hover {
101
115
  transform: scale(0.98);
102
-
103
- &:not(.g-control-item-button-all) {
104
- background-color: $secondary-200;
105
- }
106
-
107
- &.g-control-item-button-all {
108
- background-color: $primary-600;
109
- }
110
- }
111
-
112
- &:not(.g-control-item-button-all),
113
- &.g-control-item-button-all {
114
- .g-control-item-button-icon {
115
- color: inherit;
116
- }
117
- }
118
-
119
- &:not(.g-control-item-button-all) {
120
- color: $font-color;
121
- }
122
-
123
- &.g-control-item-button-all {
124
- color: $white-100;
116
+ background-color: $secondary-200;
125
117
  }
126
118
  }
127
119
  }
@@ -3,28 +3,115 @@
3
3
  @mixin sidenav-theme($theme: ()) {
4
4
  $font-family: utils.get-font-family($theme);
5
5
  $font-size: utils.get-font-size($theme);
6
- $font-color: utils.get-font-color($theme);
6
+
7
+ .g-sidenav-container {
8
+ width: 100%;
9
+ height: 100%;
10
+
11
+ .g-sidenav-container-inner {
12
+ display: flex;
13
+ width: 100%;
14
+ height: 100%;
15
+ position: relative;
16
+ overflow: hidden;
17
+ }
18
+ }
19
+
20
+ .g-sidenav-content {
21
+ display: flex;
22
+ flex: 1 1 auto;
23
+ min-width: 0;
24
+ height: 100%;
25
+ position: relative;
26
+ z-index: 1;
27
+ }
7
28
 
8
29
  .g-sidenav {
9
30
  display: flex;
10
31
  flex-direction: column;
11
32
  height: 100%;
33
+ box-sizing: border-box;
12
34
  padding: 1.6rem;
35
+ background-color: transparent;
36
+ transition: transform 0.2s ease;
37
+ z-index: 4;
13
38
 
14
39
  &.g-sidenav-opened {
15
- width: 260px;
40
+ width: 280px;
41
+ min-width: 280px;
16
42
  }
17
43
 
18
44
  &.g-sidenav-closed {
19
45
  width: 76px;
46
+ min-width: 76px;
20
47
 
21
48
  .g-sidenav-menu-list-base {
22
49
  scrollbar-width: none !important;
23
50
  }
24
51
  }
52
+
53
+ &.g-sidenav-mobile.g-sidenav-closed {
54
+ width: 0;
55
+ min-width: 0;
56
+ padding-left: 0;
57
+ padding-right: 0;
58
+ overflow: hidden;
59
+ }
60
+
61
+ &.g-sidenav-mode-over {
62
+ position: absolute;
63
+ top: 0;
64
+ left: 0;
65
+ height: 100%;
66
+
67
+ &.g-sidenav-opened {
68
+ width: 280px;
69
+ min-width: 280px;
70
+ }
71
+ }
72
+
73
+ &.g-sidenav-tablet.g-sidenav-closed {
74
+ position: relative;
75
+ top: auto;
76
+ left: auto;
77
+ height: 100%;
78
+ }
79
+
80
+ &.g-sidenav-tablet.g-sidenav-opened {
81
+ position: absolute;
82
+ top: 0;
83
+ left: 0;
84
+ height: 100%;
85
+ }
86
+
87
+ &.g-sidenav-mode-side {
88
+ position: relative;
89
+ top: auto;
90
+ left: auto;
91
+ box-shadow: none;
92
+ }
93
+ }
94
+
95
+ .g-sidenav.g-sidenav-tablet.g-sidenav-mode-over.g-sidenav-opened + .g-sidenav-content {
96
+ margin-left: 76px;
97
+ }
98
+
99
+ .g-sidenav-backdrop {
100
+ position: fixed;
101
+ top: 0;
102
+ left: 0;
103
+ width: 100%;
104
+ height: 100%;
105
+ background: transparent;
106
+ border: none;
107
+ margin: 0;
108
+ padding: 0;
109
+ z-index: 0;
25
110
  }
26
111
 
27
112
  .g-sidenav-control {
113
+ position: relative;
114
+ z-index: 1;
28
115
  display: flex;
29
116
  align-items: center;
30
117
  width: 100%;
@@ -52,10 +139,14 @@
52
139
  }
53
140
 
54
141
  .g-sidenav-menu {
142
+ position: relative;
143
+ z-index: 1;
55
144
  display: flex;
56
145
  flex-direction: column;
57
146
  flex: 1;
58
147
  gap: 1.6rem;
148
+ background-color: #{utils.get-color($theme, white, 100)};
149
+ border-radius: 8px;
59
150
  }
60
151
 
61
152
  .g-sidenav-menu-list-base {
@@ -68,9 +159,29 @@
68
159
  overflow-y: auto;
69
160
  overflow-x: hidden;
70
161
  scrollbar-width: thin;
71
- scroll-snap-type: x mandatory;
162
+ scroll-snap-type: y mandatory;
163
+ scroll-padding-block: 50%;
72
164
 
73
165
  position: relative;
166
+
167
+ &::-webkit-scrollbar {
168
+ background-color: transparent;
169
+ width: 0.6rem;
170
+ }
171
+
172
+ &::-webkit-scrollbar-track {
173
+ background-color: transparent;
174
+ }
175
+
176
+ &::-webkit-scrollbar-thumb {
177
+ background-color: #{utils.get-color($theme, black, 300)};
178
+ border-radius: 0.6rem;
179
+ border: 0.4rem solid transparent;
180
+ }
181
+
182
+ &::-webkit-scrollbar-button {
183
+ display: none;
184
+ }
74
185
  }
75
186
 
76
187
  .g-sidenav-menu-list {
@@ -107,7 +218,7 @@
107
218
  overflow: hidden;
108
219
  transition: all 0.2s;
109
220
 
110
- scroll-snap-align: start;
221
+ scroll-snap-align: center;
111
222
  scroll-snap-stop: always;
112
223
  flex: 0 0 100%;
113
224