@natec/mef-dev-ui-kit 20.1.21 → 20.1.23

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.
@@ -1,11 +1,10 @@
1
- // Pages Default Theme
2
- // --------------------------------------------------
3
- // Copyright Reserved Revox - 2014
1
+ // UI Kit Variables
4
2
  // --------------------------------------------------
5
3
 
6
- @use "pg/_color.scss" as b;
7
4
  @use "sass:color";
8
5
 
6
+ // Core Color Palette
7
+ // --------------------------------------------------
9
8
  $Black-Color: #000000;
10
9
  $Dark-Gray-1: #373737;
11
10
  $Dark-Gray-2: #4D4D4D;
@@ -20,26 +19,20 @@ $White: #FFFFFF;
20
19
  $Link: #6d5cae;
21
20
  $Link-on-dark: #0185CF;
22
21
 
22
+ // Typography
23
+ // --------------------------------------------------
23
24
  $font-header: 'Montserrat', Arial, sans-serif;
24
25
  $font-body: 'Open Sans', Arial, sans-serif;
25
26
  $text-color: $Black-Color;
27
+ $base-font-family: "Montserrat", "Open Sans", Arial, sans-serif;
26
28
 
27
- // Global Color
28
- // --------------------------------------------------
29
- // Base Grey Guided Color * change only $base-light
29
+ // Semantic Color Aliases (legacy Pages mapping)
30
30
  // --------------------------------------------------
31
-
32
31
  $color-master: $Light-Gray-1;
33
-
34
- // Lighter Grey colors
35
32
  $color-master-light: $Light-Gray-1;
36
- $color-master-lighter: $Light-Gray-2;
33
+ $color-master-lighter: $Light-Gray-2;
37
34
  $color-master-lightest: $Light-Gray-3;
38
-
39
- // Darker Grey colors
40
35
  $color-master-dark: $Dark-Gray-1;
41
- $color-master-darker: $Dark-Gray-2;
42
- $color-master-darkest: $Dark-Gray-3;
43
36
 
44
37
  $color-white: $White;
45
38
  $color-black: $Black-Color;
@@ -51,179 +44,47 @@ $color-warning: $Yellow;
51
44
  $color-danger: $Red;
52
45
  $color-info: $Dark-Gray-1;
53
46
 
54
- $base-font-family: "Montserrat", "Open Sans", Arial, sans-serif;
47
+ // Derived color variants (only those actively used)
48
+ $color-complete-lighter: color.mix($color-complete, $color-white, 20%);
49
+ $color-primary-dark: color.mix($color-primary, $color-black, 81%);
50
+ $color-warning-dark: color.mix($color-warning, $color-black, 81%);
51
+ $color-info-lighter: color.mix($color-info, $color-white, 20%);
52
+ $color-info-dark: color.mix($color-info, $color-black, 81%);
55
53
 
56
- // Menu Vars
54
+ // Menu
57
55
  // --------------------------------------------------
58
- //Menu Animation Curve
59
56
  $menu-bezier: 0.05, 0.74, 0.27, 0.99;
60
57
  $menu-icon-size: 40px;
61
58
  $color-menu: #2b303b;
62
59
  $color-menu-dark: color.mix($color-menu, #000, 77%);
63
- $color-menu-darker: color.mix($color-menu, #000, 90%);
64
-
65
- //Generating Menu font color
66
- $menu-mix-temp: color.mix($color-menu, #fff, 92%);
67
- $menu: b.blend-hardlight($menu-mix-temp, #fff);
68
- $color-menu-light: $menu;
69
- //Menu Font Color
60
+ // Pre-computed: blend-hardlight(color.mix($color-menu, #fff, 92%), #fff)
61
+ $color-menu-light: #788296;
70
62
  $color-menu-link-hover: #fff;
71
63
 
72
64
  // Body
73
65
  // --------------------------------------------------
74
66
  $body-background: $color-master-lightest;
75
- $body-color: $color-master;
76
- $body-font-family: $base-font-family;
77
- $body-font-size: 13px;
78
67
 
79
- // Layout
68
+ // Layout
80
69
  // --------------------------------------------------
81
70
  $layout-header-height: 60px;
82
- $layout-mobile-header-height: 48px;
83
- $layout-mobile-logo-scale: 0.8;
84
71
  $layout-sidepanel-width-collapsed: 70px;
85
72
  $layout-sidepanel-width: 280px;
86
- $layout-sidepanel-pin-width: 250px;
87
- $layout-right-quickview-width: 285px;
88
- $layout-user-profile-margin: 25px;
89
- $layout-container-fixed-lg: 1700px;
90
-
91
- $layout-gutter-sm: 5px;
92
-
93
- //Horizontal Dropdown
94
- //---------------------------------------------------
95
- $navbar-width: 45px;
96
- $menu-padding: 25px;
97
-
98
- $header-lg-height: 75px;
99
- $header-md-height: 51px;
100
- $header-sm-height: 50px;
101
73
 
102
74
  // Panels
75
+ // --------------------------------------------------
103
76
  $panel-border-color: rgba(0, 0, 0, 0.07);
104
77
  $panel-padding: 20px;
105
78
  $panel-heading-padding: $panel-padding $panel-padding 7px $panel-padding;
106
- $panel-heading-min-height: 48px;
107
79
  $panel-condensed-heading-padding: 13px 13px 0 13px;
108
80
  $panel-condensed-body-padding: 13px;
109
- $panel-condensed-heading-min-height: 48px;
110
81
 
111
- //Forms
112
- $form-group-height: 54px;
82
+ // Forms
83
+ // --------------------------------------------------
113
84
  $form-control-border-color: $Light-Gray-3;
114
85
 
115
- //Dashboard
116
- $dashboard-background: #f5f5f5;
117
-
118
- //Mixing Color varriable for creating both light and dark colors
119
- $mix-percentage-dark: 81%;
120
- $mix-percentage-darker: 60%;
121
- $mix-percentage-light: 80%;
122
- $mix-percentage-lighter: 20%;
123
-
124
- //Lighter colors
125
- $color-success-light: color.mix($color-success, $color-white, $mix-percentage-light);
126
- $color-success-lighter: color.mix(
127
- $color-success,
128
- $color-white,
129
- $mix-percentage-lighter
130
- );
131
-
132
- $color-complete-light: color.mix(
133
- $color-complete,
134
- $color-white,
135
- $mix-percentage-light
136
- );
137
- $color-complete-lighter: color.mix(
138
- $color-complete,
139
- $color-white,
140
- $mix-percentage-lighter
141
- );
142
-
143
- $color-primary-light: color.mix($color-primary, $color-white, $mix-percentage-light);
144
- $color-primary-lighter: color.mix(
145
- $color-primary,
146
- $color-white,
147
- $mix-percentage-lighter
148
- );
149
-
150
- $color-warning-light: color.mix($color-warning, $color-white, $mix-percentage-light);
151
- $color-warning-lighter: color.mix(
152
- $color-warning,
153
- $color-white,
154
- $mix-percentage-lighter
155
- );
156
-
157
- $color-danger-light: color.mix($color-danger, $color-white, $mix-percentage-light);
158
- $color-danger-lighter: color.mix(
159
- $color-danger,
160
- $color-white,
161
- $mix-percentage-lighter
162
- );
163
-
164
- $color-info-light: color.mix($color-info, $color-white, $mix-percentage-light);
165
- $color-info-lighter: color.mix($color-info, $color-white, $mix-percentage-lighter);
166
-
167
- //Darker colors
168
- $color-success-dark: color.mix($color-success, $color-black, $mix-percentage-dark);
169
- $color-success-darker: color.mix(
170
- $color-success,
171
- $color-black,
172
- $mix-percentage-darker
173
- );
174
-
175
- $color-complete-dark: color.mix($color-complete, $color-black, $mix-percentage-dark);
176
- $color-complete-darker: color.mix(
177
- $color-complete,
178
- $color-black,
179
- $mix-percentage-darker
180
- );
181
-
182
- $color-primary-dark: color.mix($color-primary, $color-black, $mix-percentage-dark);
183
- $color-primary-darker: color.mix(
184
- $color-primary,
185
- $color-black,
186
- $mix-percentage-darker
187
- );
188
-
189
- $color-warning-dark: color.mix($color-warning, $color-black, $mix-percentage-dark);
190
- $color-warning-darker: color.mix(
191
- $color-warning,
192
- $color-black,
193
- $mix-percentage-darker
194
- );
195
-
196
- $color-danger-dark: color.mix($color-danger, $color-black, $mix-percentage-dark);
197
- $color-danger-darker: color.mix($color-danger, $color-black, $mix-percentage-darker);
198
-
199
- $color-info-dark: color.mix($color-info, $color-black, $mix-percentage-dark);
200
- $color-info-darker: color.mix($color-info, $color-black, $mix-percentage-darker);
201
-
202
- // Email colors
203
- // $sidebar-background-color : $color-menu-dark ;
204
- $_sidebar-background-color: b.blend-multiply(
205
- $color-menu-light,
206
- $color-menu-light
207
- );
208
- $sidebar-background-color: color.mix($_sidebar-background-color, #000, 80%);
209
-
210
- $secondary-sidebar-width: 250px;
211
- // Components
86
+ // Z-Index Scale
212
87
  // --------------------------------------------------
213
- //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
214
-
215
- //$padding-base-vertical: 6px ;
216
- $padding-base-horizontal: 17px;
217
-
218
- // $padding-lg-vertical: 28px ;
219
- $padding-lg-horizontal: 28px;
220
-
221
- // $padding-sm-vertical: 5px ;
222
- $padding-sm-horizontal: 16px;
223
-
224
- $padding-xs-vertical: 2px;
225
- $padding-xs-horizontal: 9px;
226
-
227
88
  $zIndex-1: 100;
228
89
  $zIndex-2: 200;
229
90
  $zIndex-3: 300;
@@ -235,33 +96,9 @@ $zIndex-8: 800;
235
96
  $zIndex-9: 900;
236
97
  $zIndex-10: 1000;
237
98
 
238
- //TODO: add all components
239
- // z-index applications
240
-
241
99
  $zIndex-sidebar: $zIndex-10;
242
- $zIndex-tooltips: $zIndex-10;
243
- $zIndex-quickview: $zIndex-10;
244
- $zIndex-horizontal-menu-mobile: $zIndex-10;
245
- $zIndex-notifications: $zIndex-9;
246
- $zIndex-navbar: $zIndex-8;
247
- $zIndex-dropdown: $zIndex-7;
248
- $zIndex-dropdownMask: $zIndex-6;
249
100
  $zIndex-portlet: $zIndex-6;
250
101
 
251
- $zIndex-navbar: $zIndex-5;
252
- $zIndex-sidebar: $zIndex-10;
253
- $zIndex-tooltips: $zIndex-10;
254
-
255
-
256
- $zIndex-sidebar : $zIndex-10;
257
- $zIndex-tooltips : $zIndex-10;
258
- $zIndex-quickview: $zIndex-10;
259
- $zIndex-notifications : $zIndex-9;
260
- $zIndex-navbar : $zIndex-8;
261
- $zIndex-dropdown : $zIndex-7;
262
- $zIndex-dropdownMask : $zIndex-6;
263
- $zIndex-portlet : $zIndex-6;
264
-
265
- //borders
266
-
267
- $default-border-size: 5px;
102
+ // Borders
103
+ // --------------------------------------------------
104
+ $default-border-size: 5px;