@dashadmin/dash-styles 1.3.17 → 1.3.21

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 (54) hide show
  1. package/dist/assets/fonts/Montserrat-Black.ttf +0 -0
  2. package/dist/assets/fonts/Montserrat-Bold.ttf +0 -0
  3. package/dist/assets/fonts/Montserrat-Medium.ttf +0 -0
  4. package/dist/assets/fonts/Montserrat-Regular.ttf +0 -0
  5. package/dist/assets/fonts/Montserrat-SemiBold.ttf +0 -0
  6. package/dist/dash-css-transformer.less +766 -0
  7. package/dist/dash-variables.less +10 -0
  8. package/dist/dash.less +38 -0
  9. package/dist/helpers/getAllCssVariablesFromStyleSheets.js +1 -0
  10. package/dist/index.tsx.suffixed +680 -0
  11. package/dist/styles/button.less +120 -0
  12. package/dist/styles/buttons.less +10 -0
  13. package/dist/styles/card.less +337 -0
  14. package/dist/styles/common.less +62 -0
  15. package/dist/styles/components/notfound.less +50 -0
  16. package/dist/styles/extra.less +25 -0
  17. package/dist/styles/filters.less +7 -0
  18. package/dist/styles/forms.less +41 -0
  19. package/dist/styles/framed.less +45 -0
  20. package/dist/styles/header.less +879 -0
  21. package/dist/styles/input.copy.less +223 -0
  22. package/dist/styles/input.less +223 -0
  23. package/dist/styles/layout.less +296 -0
  24. package/dist/styles/links.less +28 -0
  25. package/dist/styles/loader.less +20 -0
  26. package/dist/styles/login.less +331 -0
  27. package/dist/styles/modal.less +0 -0
  28. package/dist/styles/module.less +29 -0
  29. package/dist/styles/mui-overrides.less +62 -0
  30. package/dist/styles/notification.less +46 -0
  31. package/dist/styles/pages/profile.less +139 -0
  32. package/dist/styles/pagination.less +90 -0
  33. package/dist/styles/popover.less +21 -0
  34. package/dist/styles/react-admin/common.less +184 -0
  35. package/dist/styles/react-admin/toolbar.less +22 -0
  36. package/dist/styles/root.less +13 -0
  37. package/dist/styles/sidebar.less +705 -0
  38. package/dist/styles/splash.less +44 -0
  39. package/dist/styles/static.less +59 -0
  40. package/dist/styles/stats.less +5 -0
  41. package/dist/styles/svg.less +30 -0
  42. package/dist/styles/switch.less +7 -0
  43. package/dist/styles/table.less +196 -0
  44. package/dist/styles/tabs.less +173 -0
  45. package/dist/styles/tags.less +97 -0
  46. package/dist/styles/toast.less +83 -0
  47. package/dist/styles/toolbar.less +90 -0
  48. package/dist/styles/transition.less +226 -0
  49. package/dist/styles/uploader.less +38 -0
  50. package/dist/variables/breakpoints.less +35 -0
  51. package/dist/variables/colors.less +205 -0
  52. package/dist/variables/dash-colors.less +52 -0
  53. package/dist/variables/sizes.less +150 -0
  54. package/package.json +14 -3
@@ -0,0 +1,120 @@
1
+ //@btn-bg: linear-gradient(101.98deg, var(--primary-color) 0%, var(--primary-contrast) 111.65%);
2
+ //@btn-color: var(--text-color);
3
+
4
+ //@btn-tertiary-bg: var(--primary-color);
5
+ //@btn-tertiary-color: var(--text-contrast);
6
+
7
+ //@btn-error-bg: var(--alert-error-bg);
8
+ //@btn-error-color: var(--text-contrast);
9
+
10
+
11
+
12
+
13
+ .MuiButton-root{
14
+ //background: var(--component-bg);
15
+ border: 1px solid var(--component-border);
16
+ //border-radius: 8px !important;
17
+ font-family: 'Montserrat' !important;
18
+ font-style: normal !important;
19
+ font-weight: 400 !important;
20
+ font-size: 16px !important;
21
+ line-height: 24px !important;
22
+ //color: var(--text-color);
23
+ transition: all .4s;
24
+ text-transform: unset !important;
25
+ > span{
26
+ display: inline-flex;
27
+ align-items: center;
28
+ //color: var(--component-text);
29
+ svg{
30
+ margin-right: 9.75px;
31
+ }
32
+ }
33
+ &.MuiButton-containedPrimary{
34
+ //border: 1px solid transparent;
35
+ //background-color: linear-gradient(101.98deg, var(--primary-main) 0%, var(--secondary-main) 111.65%);
36
+
37
+ //color: var(--btn-color);
38
+ > span{
39
+ color: var(--btn-color);
40
+ svg{
41
+ filter: brightness(0) invert(1);
42
+ }
43
+ }
44
+ }
45
+ &.MuiButton-outlinedPrimary{
46
+ //border: 1px solid var(--component-border);
47
+ //background: var(--component-bg);
48
+ //color: var(--component-text);
49
+ //background: var(--btn-secondary-bg);
50
+ color: var(--highlight-color);
51
+ > span{
52
+ //color: var(--component-text);
53
+ svg {
54
+ filter: brightness(0) invert(1);
55
+ }
56
+ }
57
+ }
58
+ }
59
+
60
+ /*
61
+ &.btn{
62
+ &-sm{
63
+ min-width: 24px;
64
+ height: 24px;
65
+ }
66
+ &-md{
67
+ min-width: 32px;
68
+ height: 32px;
69
+ }
70
+ &-lg{
71
+ min-width: 40px;
72
+ height: 40px;
73
+ }
74
+ &-sm, &-md, &-lg{
75
+ padding: 0;
76
+ min-height: auto;
77
+ span{
78
+ display: flex;
79
+ align-items: center;
80
+ justify-content: center;
81
+ }
82
+ svg{
83
+ margin: 0;
84
+ width: 16px;
85
+ height: 16px;
86
+ }
87
+ }
88
+
89
+ &-width{
90
+ &-sm, &-md, &-lg, &-full{
91
+ width: 100%;
92
+ }
93
+ &-sm{
94
+ max-width: 114px;
95
+ }
96
+ &-md{
97
+ max-width: 150px;
98
+ }
99
+ &-lg{
100
+ max-width: 290px;
101
+ }
102
+ }
103
+
104
+ &-detail{
105
+ &-link{
106
+ background-color: var(--primary-color) !important;
107
+ border-radius: 4px !important;
108
+ height: 28px !important;
109
+ justify-content: center !important;
110
+ margin-right: 5px !important;
111
+ width: 28px !important;
112
+ svg{
113
+ path{
114
+ fill: var(--text-contrast);
115
+ }
116
+ }
117
+ }
118
+ }
119
+ }
120
+ */
@@ -0,0 +1,10 @@
1
+ .MuiButtonBase-root-MuiTab-root.Mui-selected{
2
+ color: var(--primary-color);
3
+ }
4
+
5
+ .MuiButtonBase-root.MuiTab-root.MuiTab-labelIcon.MuiTab-textColorPrimary.form-tab{
6
+ color: var(--primary-color);
7
+ &:hover, &:focus{
8
+ color: var(--scroll_thumb-color);
9
+ }
10
+ }
@@ -0,0 +1,337 @@
1
+ .card-title{
2
+ display: block;
3
+ font-weight: 800;
4
+ font-size: 20px;
5
+ line-height: 22px;
6
+ color: var(--heading-color);
7
+ }
8
+
9
+ .card-subtitle{
10
+ display: block;
11
+ color: var(--text-contrast);
12
+ font-style: normal;
13
+ font-weight: 700;
14
+ font-size: 16px;
15
+ line-height: 24px;
16
+ }
17
+
18
+ .card-text{
19
+ display: block;
20
+ font-style: normal;
21
+ font-weight: 400;
22
+ font-size: 14px;
23
+ line-height: 22px;
24
+ color: var(--text-color);
25
+ }
26
+
27
+ .dash-card{
28
+ &-prod{
29
+ width: 100%;
30
+ display: flex;
31
+ flex-direction: row;
32
+ flex-wrap: wrap;
33
+ align-items: center;
34
+ padding: 15px;
35
+ background: var(--component-bg);
36
+ border-radius: 5px;
37
+ box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.02);
38
+ .ant-tag{
39
+ margin: 0 0 0 auto;
40
+ }
41
+ }
42
+ &-icon{
43
+ width: 30px !important;
44
+ height: 30px !important;
45
+ margin-right: 10px;
46
+ }
47
+ &-desc{
48
+ flex: 1;
49
+ }
50
+ &-price{
51
+ display: block;
52
+ font-size: 24px;
53
+ font-weight: normal;
54
+ margin-bottom: .25rem;
55
+ }
56
+ &-number{
57
+ display: block;
58
+ font-size: 20px;
59
+ font-weight: 300;
60
+ margin-bottom: .25rem;
61
+ }
62
+ &-name{
63
+ display: block;
64
+ font-size: 12px;
65
+ font-weight: normal;
66
+ margin-bottom: 0;
67
+ }
68
+
69
+ &-svg{
70
+ border-radius: 15px !important;
71
+ box-shadow: unset !important;
72
+ .MuiCardContent-root{
73
+ height: 100%;
74
+ padding-top: 4rem;
75
+ svg{
76
+ margin-bottom: .5rem;
77
+ }
78
+ }
79
+
80
+ &.blue{
81
+ background-color: var(--alert-info-bg) !important;
82
+ }
83
+ &.empty{
84
+ background-color: transparent !important;
85
+ }
86
+
87
+ .ant-progress-text{
88
+ font-size: 12px;
89
+ color: var(--text-contrast);
90
+ opacity: .54;
91
+ }
92
+
93
+ span{
94
+ display: block;
95
+ }
96
+ }
97
+
98
+ .MuiCardHeader-title{
99
+ font-size: 20px !important;
100
+ }
101
+ .MuiCardHeader-subheader{
102
+ .ant-tag{
103
+ margin-top: 4px;
104
+ margin-bottom: 0;
105
+ }
106
+ }
107
+ }
108
+
109
+ .card-history{
110
+ &-steps{
111
+ margin-top: 30px;
112
+ width: 100%;
113
+ }
114
+ &-step{
115
+ padding: 0;
116
+ background: var(--component-bg);
117
+ border-radius: 10px;
118
+ margin-bottom: 20px;
119
+ .ant-card-body{
120
+ padding: 0;
121
+ background: var(--component-bg);
122
+ }
123
+ }
124
+ &-content{
125
+ background: var(--component-bg);
126
+ padding: 14px 24px;
127
+ display: grid;
128
+ grid-template-columns: 14px 1fr;
129
+ gap: 0 17px;
130
+ }
131
+ &-icon{
132
+ width: 14px;
133
+ height: 100%;
134
+ margin-right: 17px;
135
+ grid-column: 1/2;
136
+ grid-row: 1/2;
137
+ &::before, &::after{
138
+ content: "";
139
+ display: block;
140
+ width: 2px;
141
+ background-color: var(--primary-color);
142
+ margin: 0 auto;
143
+ }
144
+ svg{
145
+ display: block;
146
+ width: 14px;
147
+ height: 14px;
148
+ object-fit: contain;
149
+ margin: 3px auto;
150
+ }
151
+ &::before{
152
+ height: 2px;
153
+ }
154
+ &::after{
155
+ height: calc(100% - 2px - 14px - 6px);
156
+ }
157
+ }
158
+ &-text{
159
+ grid-column: 2/3;
160
+ grid-row: 1/2;
161
+ > span, > label{
162
+ display: block;
163
+ font-family: 'Montserrat';
164
+ font-style: normal;
165
+ font-weight: 400;
166
+ font-size: 14px;
167
+ line-height: 22px;
168
+ color: var(--component-text);
169
+ margin-bottom: 0;
170
+ }
171
+
172
+ > .card-history-state{
173
+ display: inline-block;
174
+ }
175
+ }
176
+
177
+ &-date{
178
+ display: flex;
179
+ align-items: center;
180
+ }
181
+
182
+ &-separator{
183
+ display: inline-block;
184
+ width: 14px !important;
185
+ height: 14px !important;
186
+ object-fit: contain;
187
+ margin: 0 10px;
188
+ transform: translateY(2px);
189
+ pointer-events: none;
190
+ }
191
+ }
192
+ /*
193
+ .dash-widget-white {
194
+ background: var(--component-bg) !important;
195
+ border-radius: 12px !important;
196
+ box-shadow: unset !important;
197
+ padding: 1rem !important;
198
+ position: relative;
199
+ }
200
+
201
+ .dash-widget, .dash-card-content, .dash-module{
202
+ background: var(--module-bg);
203
+ border-radius: 12px !important;
204
+ box-shadow: unset !important;
205
+ //padding:1rem;
206
+ position: relative;
207
+ }
208
+ */
209
+ .dash-widget, .dash-widget-white {
210
+ .MuiCardHeader-root{
211
+ padding: 16px 22.37px 16px 24px;
212
+ border-bottom: 1px solid var(--component-border-split);
213
+ align-items: center;
214
+ .MuiTypography-root{
215
+ font-family: 'Montserrat';
216
+ font-style: normal;
217
+ font-weight: 600;
218
+ font-size: 14px;
219
+ line-height: 22px;
220
+ color: var(--heading-color);
221
+ }
222
+ .MuiCardHeader-action{
223
+ display: flex;
224
+ align-items: center;
225
+ justify-content: center;
226
+ align-self: center;
227
+ margin: 0;
228
+ .MuiSvgIcon-root{
229
+ color: var(--primary-color);
230
+ width: 16px;
231
+ height: 16px;
232
+ }
233
+ .MuiButton-root.MuiButton-containedPrimary{
234
+ min-width: unset;
235
+ width: 40px;
236
+ height: 40px;
237
+ padding: 0;
238
+ border-radius: 4px !important;
239
+ color: var(--btn-color);
240
+ svg{
241
+ color: var(--primary-color);
242
+ path{
243
+ fill: var(--primary-color);
244
+ }
245
+ }
246
+ }
247
+ }
248
+ }
249
+ .MuiCardContent-root{
250
+ font-family: 'Montserrat';
251
+ font-style: normal;
252
+ font-weight: 400;
253
+ font-size: 20px;
254
+ line-height: 22px;
255
+ color: var(--primary-color);
256
+ }
257
+
258
+ &.dash-widget-inner{
259
+ background-color: var(--component-bg) !important;
260
+ .MuiCardHeader-root{
261
+ display: inline-flex;
262
+ align-items: center;
263
+ width: 100%;
264
+ min-height: 56px;
265
+ border-bottom: 1px solid var(--component-border-split);
266
+ padding: 8px 12px;
267
+ }
268
+ .MuiCardContent-root{
269
+ min-height: 54px;
270
+ padding: 12px;
271
+ font-style: normal;
272
+ font-weight: 600;
273
+ font-size: 14px;
274
+ line-height: 22px;
275
+ color: var(--primary-color);
276
+ }
277
+ }
278
+ }
279
+
280
+ .dash-widget-inner{
281
+ padding: 0 !important;
282
+ background-color: var(--component-bg);
283
+ border: 1px solid var(--component-border-base);
284
+ border-radius: 10px !important;
285
+ box-shadow: unset !important;
286
+ .ant-card-head, .ant-card-body{
287
+ background-color: var(--component-bg);
288
+ }
289
+ }
290
+
291
+ .dash-widget-purple {
292
+ .dash-widget, .dash-card-content{
293
+ background: var(--component-hover-bg) !important;
294
+ }
295
+ span {
296
+ font-size: 3rem;
297
+ }
298
+ .dash-widget.dash-widget-inner .MuiCardHeader-root {
299
+ border-bottom: none;
300
+ }
301
+ }
302
+
303
+ .dash-form{
304
+ width: 100%;
305
+ }
306
+
307
+ .dash-card-profile{
308
+ .MuiGrid-item{
309
+ border-right: 1px solid var(--component-border-split);
310
+ &:last-child{
311
+ border-right: unset;
312
+ }
313
+ }
314
+ .MuiFormControl-root{
315
+ width: 100%;
316
+ }
317
+
318
+
319
+ .dash-profile-name {
320
+ color: var(--highlight-color);
321
+ }
322
+ .dash-profile-img{
323
+ width: 130px;
324
+ height: 130px;
325
+ position: relative;
326
+ margin: 0 auto 2rem;
327
+
328
+ background-color: var(--primary-color);
329
+ img{
330
+ width: 100%;
331
+ height: 100%;
332
+ object-fit: cover;
333
+ border-radius: 50%;
334
+ overflow: hidden;
335
+ }
336
+ }
337
+ }
@@ -0,0 +1,62 @@
1
+ @font-face {
2
+ font-family: "Montserrat";
3
+ font-weight: 400;
4
+ src: local("Montserrat"),
5
+ url("../assets/fonts/Montserrat-Regular.ttf") format("truetype");
6
+ }
7
+
8
+ @font-face {
9
+ font-family: "Montserrat";
10
+ font-weight: 600;
11
+ src: local("Montserrat"),
12
+ url("../assets/fonts/Montserrat-Bold.ttf") format("truetype");
13
+ }
14
+
15
+ /*
16
+ body {
17
+ font-family: "Montserrat";
18
+
19
+ .dash-app-layout{
20
+ background-color: transparent;
21
+ width: 100%;
22
+ //min-width: 485px;
23
+ height: 100vh;
24
+ }
25
+ .MuiScopedCssBaseline-root{
26
+ background-color: transparent;
27
+ }
28
+ }
29
+ */
30
+
31
+ li { list-style: none }
32
+ ul { padding-inline-start: 0px;}
33
+
34
+ .MuiTypography-root {
35
+ width:100%;
36
+ }
37
+
38
+
39
+ h3 { margin: 0; }
40
+
41
+
42
+
43
+ // Responsive exceptions
44
+
45
+ @media (max-width: @mq-sm) {
46
+
47
+ .sm-hide {
48
+ display: none !important;
49
+ }
50
+
51
+ body.ingresar-paquete .dash-header-content,
52
+ body.egresar-paquete .dash-header-content,
53
+ body.admin-warehouse-enter .dash-header-content,
54
+ body.admin-warehouse-dispatch .dash-header-content,
55
+ body.admin-warehouse-return .dash-header-content
56
+ {
57
+ display: none !important;
58
+ }
59
+
60
+
61
+ }
62
+
@@ -0,0 +1,50 @@
1
+
2
+ .dash-app-notfound{
3
+ width: 100%;
4
+ min-height: 600px;
5
+ display: flex;
6
+ flex-direction: column;
7
+ align-items: center;
8
+ justify-content: center;
9
+ &-img{
10
+ width: 280px;
11
+ height: 280px;
12
+ img{
13
+ display: block;
14
+ object-fit: contain;
15
+ width: 100%;
16
+ height: 100%;
17
+ }
18
+ }
19
+ &-content{
20
+ display: flex;
21
+ flex-direction: column;
22
+ align-items: center;
23
+ justify-content: center;
24
+ width: 100%;
25
+ margin-top: 34px;
26
+ h1{
27
+ display: block;
28
+ width: 100%;
29
+ text-align: center;
30
+ font-style: normal;
31
+ font-weight: 900;
32
+ font-size: 24px;
33
+ line-height: 24px;
34
+ color: #1E1E1E;
35
+ margin-bottom: 15px;
36
+ }
37
+ span{
38
+ display: block;
39
+ width: 100%;
40
+ text-align: center;
41
+ font-style: normal;
42
+ font-weight: 400;
43
+ font-size: 24px;
44
+ line-height: 24px;
45
+ }
46
+ .ant-btn{
47
+ margin: 50px auto 0;
48
+ }
49
+ }
50
+ }
@@ -0,0 +1,25 @@
1
+ .icon-fill{
2
+ &-w{
3
+ path{
4
+ fill: var(--highlight-color);
5
+ }
6
+ }
7
+ }
8
+
9
+ .stroke-purple{
10
+ stroke: var(--btn-color);
11
+ *{
12
+ stroke: var(--btn-color);
13
+ }
14
+ }
15
+
16
+ .packages-resource-field-wrapper-row {
17
+ background-color: white;
18
+ font-size: 12pt;
19
+ .label {
20
+ color: var(--primary-color);
21
+ }
22
+ .field {
23
+ color: black;
24
+ }
25
+ }
@@ -0,0 +1,7 @@
1
+ /*.fixed-filter .MuiAutocomplete-inputRoot {
2
+ display: flex;
3
+ overflow: hidden;
4
+ text-overflow: ellipsis;
5
+ flex-wrap: nowrap;
6
+ flex-grow: 1;
7
+ }*/
@@ -0,0 +1,41 @@
1
+ .auto-admin-grouped-form {
2
+ padding: 0;
3
+ }
4
+
5
+
6
+ fieldset {
7
+ border: none;
8
+ margin-top: 15px;
9
+ }
10
+
11
+ fieldset legend {
12
+ font-size: larger;
13
+ font-weight: bold;
14
+ }
15
+
16
+ legend {
17
+ float: inherit;
18
+ }
19
+
20
+ .dash-app-form-item {
21
+ margin-bottom: 10px;
22
+ }
23
+
24
+ .dash-auto-admin-tabbed-form {
25
+ .MuiTabs-scroller{
26
+ overflow-x: auto !important;
27
+ overflow-y: hidden;
28
+ }
29
+ .MuiTabs-root{
30
+ .MuiTab-root{
31
+ display: -moz-box;
32
+ display: -webkit-box;
33
+ align-items: center;
34
+ svg{
35
+ width: 18px;
36
+ height: 18px;
37
+ margin: -3px 5px 0 0 ;
38
+ }
39
+ }
40
+ }
41
+ }
@@ -0,0 +1,45 @@
1
+
2
+ /* -----------------------------------------------------------------------------
3
+ FRAMED LAYOUT STYLES
4
+ ----------------------------------------------------------------------------- */
5
+
6
+ .framed-layout {
7
+ .dash-module-box-content {
8
+ //max-width: calc(100vw - 60px - 107px);
9
+ padding: 8px;
10
+ }
11
+ }
12
+
13
+ @media (min-width: @mq-sm) {
14
+ .framed-layout #root {
15
+ //min-height: calc(100vh - 16px);
16
+ }
17
+
18
+ body.framed-layout {
19
+ padding: 8px;
20
+ }
21
+
22
+ .framed-layout {
23
+ > #root {
24
+ height: calc(100vh - 16px);
25
+ border-radius: 22px;
26
+ background-color: var(--framed_layout-bg);
27
+
28
+ > div > div > .lite {
29
+ background-color: transparent;
30
+ }
31
+
32
+ .dash-app-layout {
33
+ .dash-app-module {
34
+ //padding: 8px;
35
+ }
36
+
37
+ .dash-layout-content,
38
+ .dash-layout-footer {
39
+ background-color: transparent;
40
+ border-top: unset;
41
+ }
42
+ }
43
+ }
44
+ }
45
+ }