@posiwise/core-styles 0.0.40 → 1.0.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.
Files changed (33) hide show
  1. package/css/google-fonts.css +1 -4
  2. package/css/hopscotch.css +1 -1
  3. package/package.json +4 -4
  4. package/scss/_dashboard.scss +1 -1
  5. package/scss/_dynamic-styles.scss +7 -870
  6. package/scss/common/landing-page-a/landing-page-style-1.scss +7 -7
  7. package/scss/common/landing-page-b/banner.scss +8 -8
  8. package/scss/common/landing-page-b/contact-us.scss +4 -4
  9. package/scss/common/landing-page-b/explainer.scss +6 -6
  10. package/scss/common/landing-page-b/explainer2.scss +1 -1
  11. package/scss/common/landing-page-b/landing-page-style-2.scss +3 -4
  12. package/scss/custom-bootstrap/_badge.scss +25 -35
  13. package/scss/custom-bootstrap/_type.scss +1 -7
  14. package/scss/dashboard/_bootstrap-social.scss +25 -25
  15. package/scss/dashboard/_coming-soon.scss +1 -1
  16. package/scss/dashboard/_components.scss +1 -1
  17. package/scss/dashboard/_email.scss +7 -7
  18. package/scss/dashboard/_helper.scss +7 -17
  19. package/scss/dashboard/_icons.scss +0 -7
  20. package/scss/dashboard/_misc.scss +1 -1
  21. package/scss/dashboard/_palette.scss +125 -284
  22. package/scss/dashboard/_profile.scss +1 -1
  23. package/scss/dashboard/_tabs.scss +0 -18
  24. package/scss/dashboard/mixins/_utilities.scss +1 -1
  25. package/scss/dashboard/mixins/_vendor-prefixes.scss +2 -2
  26. package/scss/plugins/perfect-scrollbar/_variables.scss +1 -1
  27. package/scss/public-pages/_layout.scss +1 -8
  28. package/scss/shared/_prime-ng.scss +180 -204
  29. package/scss/variables/_app-colors-variables.scss +1 -7
  30. package/scss/variables/_branding-variables.scss +7 -9
  31. package/scss/variables/_generic-variables.scss +5 -5
  32. package/scss/variables/_primeng-variables.scss +38 -38
  33. package/app.scss +0 -45
package/scss/dashboard/_helper.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  // ================================================================================================
2
2
  // File Name: helper
3
3
  // Description: Helper classes provides color, width, position & background etc..
4
- // related customization.
4
+ // related customiztion.
5
5
  // ================================================================================================
6
6
 
7
7
  // Content helpers
@@ -264,7 +264,7 @@
264
264
  border-right: 0 !important;
265
265
  }
266
266
 
267
- // No border radius
267
+ // No border radious
268
268
  .no-radius {
269
269
  border-radius: unset !important;
270
270
  }
@@ -302,33 +302,23 @@
302
302
  }
303
303
 
304
304
  .box-shadow-1 {
305
- box-shadow:
306
- 0 2px 5px 0 rgb(0 0 0 / 16%),
307
- 0 2px 10px 0 rgb(0 0 0 / 12%);
305
+ box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
308
306
  }
309
307
 
310
308
  .box-shadow-2 {
311
- box-shadow:
312
- 0 8px 17px 0 rgb(0 0 0 / 20%),
313
- 0 6px 20px 0 rgb(0 0 0 / 19%);
309
+ box-shadow: 0 8px 17px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
314
310
  }
315
311
 
316
312
  .box-shadow-3 {
317
- box-shadow:
318
- 0 12px 15px 0 rgb(0 0 0 / 24%),
319
- 0 17px 50px 0 rgb(0 0 0 / 19%);
313
+ box-shadow: 0 12px 15px 0 rgb(0 0 0 / 24%), 0 17px 50px 0 rgb(0 0 0 / 19%);
320
314
  }
321
315
 
322
316
  .box-shadow-4 {
323
- box-shadow:
324
- 0 16px 28px 0 rgb(0 0 0 / 22%),
325
- 0 25px 55px 0 rgb(0 0 0 / 21%);
317
+ box-shadow: 0 16px 28px 0 rgb(0 0 0 / 22%), 0 25px 55px 0 rgb(0 0 0 / 21%);
326
318
  }
327
319
 
328
320
  .box-shadow-5 {
329
- box-shadow:
330
- 0 27px 24px 0 rgb(0 0 0 / 20%),
331
- 0 40px 77px 0 rgb(0 0 0 / 22%);
321
+ box-shadow: 0 27px 24px 0 rgb(0 0 0 / 20%), 0 40px 77px 0 rgb(0 0 0 / 22%);
332
322
  }
333
323
 
334
324
  // Sizing
package/scss/dashboard/_icons.scss CHANGED
@@ -44,13 +44,6 @@
44
44
  padding-right: 3px;
45
45
  }
46
46
 
47
- .location-icon {
48
- color: $branding-color-1;
49
- font-size: 18px;
50
- padding-left: 3px;
51
- padding-right: 3px;
52
- }
53
-
54
47
  .cta2-icon {
55
48
  color: $branding-color-2;
56
49
  font-size: 18px;
package/scss/dashboard/_misc.scss CHANGED
@@ -126,7 +126,7 @@ input[type='file'] > input[type='button']::-moz-focus-inner {
126
126
  background-color: map-get($primary, base);
127
127
  }
128
128
 
129
- // Drag and drop
129
+ // Drag and dropp
130
130
  .dragdrop-container {
131
131
  min-height: 200px;
132
132
  }
package/scss/dashboard/_palette.scss CHANGED
@@ -39,294 +39,180 @@
39
39
  }
40
40
  }
41
41
 
42
- @each $color_name, $color_value in $branding-colors {
43
- .bg-#{$color_name} {
44
- background-color: $color_value !important;
45
-
46
- .card-header,
47
- .card-footer {
48
- background-color: transparent;
49
- }
50
- }
51
- .alert-#{$color_name} {
52
- background-color: $color_value !important;
53
- border-color: $color_value !important;
54
- color: $color_value !important;
55
-
56
- .alert-link {
57
- color: $color_value !important;
58
- }
59
- }
60
- .border-#{$color_name} {
61
- border-color: $color_value !important;
62
- }
63
-
64
- .border-top-#{$color_name} {
65
- border-top-color: $color_value !important;
66
- }
67
-
68
- .border-bottom-#{$color_name} {
69
- border-bottom-color: $color_value !important;
70
- }
71
-
72
- .border-left-#{$color_name} {
73
- border-left-color: $color_value !important;
74
- }
75
-
76
- .border-right-#{$color_name} {
77
- border-right-color: $color_value !important;
78
- }
79
-
80
- .panel-#{$color_name} {
81
- border-color: $color_value !important;
82
-
83
- .panel-heading {
84
- background-color: $color_value !important;
85
- border-color: $color_value !important;
86
- color: rgb(255 255 255);
87
- }
88
- }
89
-
90
- .bg-#{$color_name},
91
- .border-#{$color_name} {
92
- &.tag-glow {
93
- box-shadow: 0 0 10px $color_value;
94
- }
95
- }
96
- .btn-#{$color_name} {
97
- background-color: $color_value !important;
98
- border: 1px solid;
99
- border-color: $color_value !important;
100
- color: rgb(255 255 255) !important;
101
-
102
- &:focus {
103
- background-color: $color_value !important;
104
- box-shadow: transparent !important;
105
- color: rgb(255 255 255) !important;
106
- }
107
-
108
- &.active {
109
- background-color: $color_value !important;
110
- color: rgb(255 255 255) !important;
111
- }
112
-
113
- &:hover {
114
- background-color: $color_value !important;
115
- color: rgb(255 255 255) !important;
116
- }
117
- }
118
-
119
- .btn-#{$color_name} {
120
- color: rgb(255 255 255) !important;
121
-
122
- &.btn-flat {
123
- background-color: transparent !important;
124
- border: 0;
125
- color: $color_value;
126
- }
127
-
128
- &.btn-raised,
129
- &.btn-fab {
130
- background-color: $color_value !important;
131
- border-color: $color_value;
132
- color: rgb(255 255 255) !important;
42
+ @each $color_name, $color in $colors {
43
+ @each $color_type, $color_value in $color {
44
+ @if $color_type== 'base' {
45
+ .#{$color_name} {
46
+ color: $color_value !important;
47
+ }
133
48
 
134
- &.active {
49
+ .bg-#{$color_name} {
135
50
  background-color: $color_value !important;
136
- border-color: $color_value !important;
137
- }
138
- }
139
- }
140
51
 
141
- .btn-group-raised {
142
- .btn-#{$color_name} {
143
- background-color: $color_value !important;
144
- color: rgb(255 255 255) !important;
145
- }
146
- }
52
+ .card-header,
53
+ .card-footer {
54
+ background-color: transparent;
55
+ }
56
+ }
147
57
 
148
- .btn-outline-#{$color_name} {
149
- background-color: transparent !important;
150
- border: 1px solid;
151
- border-color: $color_value !important;
152
- box-shadow: none !important;
153
- color: $color_value !important;
154
-
155
- &:focus {
156
- background-color: transparent !important;
157
- box-shadow: transparent !important;
158
- color: $color_value !important;
159
- }
58
+ .toast-#{$color_name} {
59
+ background-color: $color_value;
60
+ }
160
61
 
161
- &.active {
162
- background-color: $color_value !important;
163
- color: rgb(255 255 255) !important;
164
- }
62
+ .alert-#{$color_name} {
63
+ background-color: lighten($color_value, 7%) !important;
64
+ border-color: $color_value !important;
65
+ color: darken($color_value, 35%) !important;
165
66
 
166
- &:hover {
167
- background-color: $color_value !important;
168
- color: rgb(255 255 255) !important;
169
- }
170
- }
67
+ .alert-link {
68
+ color: darken($color_value, 43%) !important;
69
+ }
70
+ }
171
71
 
172
- .btn-outline-#{$color_name} {
173
- &.btn-raised,
174
- &.btn-fab {
175
- background-color: transparent;
176
- border: 1px solid;
177
- border-color: $color_value;
178
- box-shadow: none !important;
179
- color: $color_value;
72
+ .border-#{$color_name} {
73
+ border-color: $color_value;
74
+ }
180
75
 
181
- &:focus {
182
- background-color: transparent;
76
+ .border-top-#{$color_name} {
77
+ border-top-color: $color_value;
183
78
  }
184
79
 
185
- &.active {
186
- background-color: $color_value !important;
187
- color: rgb(255 255 255) !important;
80
+ .border-bottom-#{$color_name} {
81
+ border-bottom-color: $color_value;
188
82
  }
189
83
 
190
- &:hover {
191
- background-color: $color_value !important;
192
- color: rgb(255 255 255) !important;
84
+ .border-left-#{$color_name} {
85
+ border-left-color: $color_value;
193
86
  }
194
- }
195
- }
196
87
 
197
- .progress {
198
- .progress-bar {
199
- &.progress-bar-#{$color_name} {
200
- @include progress-variant($color_value);
88
+ .border-right-#{$color_name} {
89
+ border-right-color: $color_value;
201
90
  }
202
- }
203
- }
204
- }
205
91
 
206
- @each $color_name, $color in $colors {
207
- @each $color_type, $color_value in $color {
208
- @if $color_type== 'base' {
209
- .#{$color_name} {
210
- color: $color_value !important;
92
+ .badge-#{$color_name} {
93
+ background-color: $color_value;
211
94
  }
212
95
 
213
- @if $color_name != 'primary' and $color_name != 'secondary' {
214
- .bg-#{$color_name} {
215
- background-color: $color_value !important;
96
+ .panel-#{$color_name} {
97
+ border-color: $color_value;
216
98
 
217
- .card-header,
218
- .card-footer {
219
- background-color: transparent;
220
- }
99
+ .panel-heading {
100
+ background-color: lighten($color_value, 5%);
101
+ border-color: $color_value;
102
+ color: rgb(255 255 255);
221
103
  }
222
- .alert-#{$color_name} {
223
- background-color: lighten($color_value, 7%) !important;
224
- border-color: $color_value !important;
225
- color: darken($color_value, 35%) !important;
104
+ }
226
105
 
227
- .alert-link {
228
- color: darken($color_value, 43%) !important;
229
- }
230
- }
231
- .border-#{$color_name} {
232
- border-color: $color_value;
106
+ .bg-#{$color_name},
107
+ .border-#{$color_name} {
108
+ &.tag-glow {
109
+ box-shadow: 0 0 10px $color_value;
233
110
  }
111
+ }
112
+
113
+ .overlay-#{$color_name} {
114
+ @include bg-opacity($color_value, 0.8);
115
+ }
116
+
117
+ .card.card-outline-#{$color_name} {
118
+ background-color: transparent;
119
+ border-color: $color_value;
120
+ border-style: solid;
121
+ border-width: 1px;
234
122
 
235
- .border-top-#{$color_name} {
236
- border-top-color: $color_value;
123
+ .card-header,
124
+ .card-footer {
125
+ background-color: transparent;
237
126
  }
127
+ }
238
128
 
239
- .border-bottom-#{$color_name} {
240
- border-bottom-color: $color_value;
129
+ .btn-#{$color_name} {
130
+ background-color: $color_value !important;
131
+ border: 1px solid;
132
+ border-color: $color_value !important;
133
+ color: rgb(255 255 255) !important;
134
+
135
+ &:focus {
136
+ background-color: darken($color_value, 5%) !important;
137
+ box-shadow: transparent !important;
138
+ color: rgb(255 255 255) !important;
241
139
  }
242
140
 
243
- .border-left-#{$color_name} {
244
- border-left-color: $color_value;
141
+ &.active {
142
+ background-color: $color_value !important;
143
+ color: rgb(255 255 255) !important;
245
144
  }
246
145
 
247
- .border-right-#{$color_name} {
248
- border-right-color: $color_value;
146
+ &:hover {
147
+ background-color: darken($color_value, 5%) !important;
148
+ color: rgb(255 255 255) !important;
249
149
  }
150
+ }
250
151
 
251
- .panel-#{$color_name} {
252
- border-color: $color_value;
152
+ .btn-#{$color_name} {
153
+ color: rgb(255 255 255) !important;
253
154
 
254
- .panel-heading {
255
- background-color: lighten($color_value, 5%);
256
- border-color: $color_value;
257
- color: rgb(255 255 255);
258
- }
155
+ &.btn-flat {
156
+ background-color: transparent !important;
157
+ border: 0;
158
+ color: $color_value;
259
159
  }
260
160
 
261
- .bg-#{$color_name},
262
- .border-#{$color_name} {
263
- &.tag-glow {
264
- box-shadow: 0 0 10px $color_value;
265
- }
266
- }
267
- .btn-#{$color_name} {
161
+ &.btn-raised,
162
+ &.btn-fab {
268
163
  background-color: $color_value !important;
269
- border: 1px solid;
270
- border-color: $color_value !important;
164
+ border-color: $color_value;
271
165
  color: rgb(255 255 255) !important;
272
166
 
273
- &:focus {
274
- background-color: darken($color_value, 5%) !important;
275
- box-shadow: transparent !important;
276
- color: rgb(255 255 255) !important;
277
- }
278
-
279
167
  &.active {
280
- background-color: $color_value !important;
281
- color: rgb(255 255 255) !important;
282
- }
283
-
284
- &:hover {
285
- background-color: darken($color_value, 5%) !important;
286
- color: rgb(255 255 255) !important;
168
+ background-color: darken($color_value, 7%) !important;
169
+ border-color: darken($color_value, 7%) !important;
287
170
  }
288
171
  }
172
+ }
289
173
 
174
+ .btn-group-raised {
290
175
  .btn-#{$color_name} {
176
+ background-color: $color_value !important;
291
177
  color: rgb(255 255 255) !important;
178
+ }
179
+ }
292
180
 
293
- &.btn-flat {
294
- background-color: transparent !important;
295
- border: 0;
296
- color: $color_value;
297
- }
181
+ .btn-outline-#{$color_name} {
182
+ background-color: transparent !important;
183
+ border: 1px solid;
184
+ border-color: $color_value !important;
185
+ box-shadow: none !important;
186
+ color: $color_value !important;
298
187
 
299
- &.btn-raised,
300
- &.btn-fab {
301
- background-color: $color_value !important;
302
- border-color: $color_value;
303
- color: rgb(255 255 255) !important;
188
+ &:focus {
189
+ background-color: transparent !important;
190
+ box-shadow: transparent !important;
191
+ color: $color_value !important;
192
+ }
304
193
 
305
- &.active {
306
- background-color: darken($color_value, 7%) !important;
307
- border-color: darken($color_value, 7%) !important;
308
- }
309
- }
194
+ &.active {
195
+ background-color: $color_value !important;
196
+ color: rgb(255 255 255) !important;
310
197
  }
311
198
 
312
- .btn-group-raised {
313
- .btn-#{$color_name} {
314
- background-color: $color_value !important;
315
- color: rgb(255 255 255) !important;
316
- }
199
+ &:hover {
200
+ background-color: darken($color_value, 3%) !important;
201
+ color: rgb(255 255 255) !important;
317
202
  }
203
+ }
318
204
 
319
- .btn-outline-#{$color_name} {
320
- background-color: transparent !important;
205
+ .btn-outline-#{$color_name} {
206
+ &.btn-raised,
207
+ &.btn-fab {
208
+ background-color: transparent;
321
209
  border: 1px solid;
322
- border-color: $color_value !important;
210
+ border-color: $color_value;
323
211
  box-shadow: none !important;
324
- color: $color_value !important;
212
+ color: $color_value;
325
213
 
326
214
  &:focus {
327
- background-color: transparent !important;
328
- box-shadow: transparent !important;
329
- color: $color_value !important;
215
+ background-color: transparent;
330
216
  }
331
217
 
332
218
  &.active {
@@ -339,58 +225,13 @@
339
225
  color: rgb(255 255 255) !important;
340
226
  }
341
227
  }
342
-
343
- .btn-outline-#{$color_name} {
344
- &.btn-raised,
345
- &.btn-fab {
346
- background-color: transparent;
347
- border: 1px solid;
348
- border-color: $color_value;
349
- box-shadow: none !important;
350
- color: $color_value;
351
-
352
- &:focus {
353
- background-color: transparent;
354
- }
355
-
356
- &.active {
357
- background-color: $color_value !important;
358
- color: rgb(255 255 255) !important;
359
- }
360
-
361
- &:hover {
362
- background-color: darken($color_value, 3%) !important;
363
- color: rgb(255 255 255) !important;
364
- }
365
- }
366
- }
367
-
368
- .progress {
369
- .progress-bar {
370
- &.progress-bar-#{$color_name} {
371
- @include progress-variant($color_value);
372
- }
373
- }
374
- }
375
- }
376
-
377
- .toast-#{$color_name} {
378
- background-color: $color_value;
379
228
  }
380
229
 
381
- .overlay-#{$color_name} {
382
- @include bg-opacity($color_value, 0.8);
383
- }
384
-
385
- .card.card-outline-#{$color_name} {
386
- background-color: transparent;
387
- border-color: $color_value;
388
- border-style: solid;
389
- border-width: 1px;
390
-
391
- .card-header,
392
- .card-footer {
393
- background-color: transparent;
230
+ .progress {
231
+ .progress-bar {
232
+ &.progress-bar-#{$color_name} {
233
+ @include progress-variant($color_value);
234
+ }
394
235
  }
395
236
  }
396
237
 
package/scss/dashboard/_profile.scss CHANGED
@@ -2,7 +2,7 @@
2
2
  .profile-with-cover {
3
3
  position: relative;
4
4
 
5
- .profile-cover-details {
5
+ .profil-cover-details {
6
6
  margin-top: -65px;
7
7
 
8
8
  .profile-image {
package/scss/dashboard/_tabs.scss CHANGED
@@ -44,15 +44,9 @@
44
44
  overflow: hidden;
45
45
  padding: 0;
46
46
 
47
- .p-tabmenuitem-active {
48
- border-color: var(--tabs_bg) !important;
49
- color: black;
50
- }
51
-
52
47
  .p-tabmenuitem {
53
48
  border: 0 0;
54
49
  margin: 0;
55
- padding: 0;
56
50
 
57
51
  a {
58
52
  background: transparent;
@@ -82,9 +76,6 @@
82
76
  .p-menuitem-link.p-menuitem-link-active {
83
77
  @extend .tab-style;
84
78
  }
85
- .p-tabmenuitem-active {
86
- @extend .tab-style;
87
- }
88
79
 
89
80
  .p-menuitem-link {
90
81
  border: 0 !important;
@@ -143,15 +134,6 @@
143
134
  }
144
135
  }
145
136
 
146
- .ql-snow .ql-editor h1,
147
- .ql-snow .ql-editor h2,
148
- .ql-snow .ql-editor h3,
149
- .ql-snow .ql-editor h4,
150
- .ql-snow .ql-editor h5,
151
- .ql-snow .ql-editor h6 {
152
- font-weight: bold !important;
153
- }
154
-
155
137
  @media only screen and (max-width: 480px) {
156
138
  .p-tabmenu {
157
139
  .p-tabmenuitem {
package/scss/dashboard/mixins/_utilities.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  }
4
4
 
5
5
  // Emulate the less #contrast function
6
- // TODO: this may be useful for the inverse theme, but if not, remove (it is unused after the removal of full palette)
6
+ // TODO: this may be useful for the inverse theme, but if not, remove (it is unused after the removal of fullpalette)
7
7
  // contrast-color and brightness borrowed from compass
8
8
  // Copyright (c) 2009-2014 Christopher M. Eppstein
9
9
  // Complies with license: https://github.com/Compass/compass/blob/stable/LICENSE.markdown
package/scss/dashboard/mixins/_vendor-prefixes.scss CHANGED
@@ -10,8 +10,8 @@
10
10
  }
11
11
 
12
12
  // Box sizing
13
- @mixin box-sizing($box-model) {
14
- box-sizing: $box-model;
13
+ @mixin box-sizing($boxmodel) {
14
+ box-sizing: $boxmodel;
15
15
  }
16
16
 
17
17
  @mixin transition($time, $type) {
package/scss/plugins/perfect-scrollbar/_variables.scss CHANGED
@@ -5,7 +5,7 @@ $ps-rail-container-hover-opacity: 0.6 !default;
5
5
  $ps-rail-hover-opacity: 0.9 !default;
6
6
  $ps-bar-bg: transparent !default;
7
7
  $ps-bar-container-hover-bg: rgb(170 170 170) !default;
8
- $ps-bar-hover-bg: $bar-hover !default;
8
+ $ps-bar-hover-bg: $barHover !default;
9
9
  $ps-rail-hover-bg: rgb(238 238 238) !default;
10
10
 
11
11
  // Sizes
package/scss/public-pages/_layout.scss CHANGED
@@ -79,20 +79,13 @@ footer {
79
79
  .main-outer,
80
80
  .container {
81
81
  max-width: 100% !important;
82
- padding: 0px 3rem !important;
83
- }
84
- }
85
-
86
- @media (min-width: 991px) and (max-width: 1199px) {
87
- .banner-content {
88
- padding-bottom: 6rem;
89
82
  }
90
83
  }
91
84
 
92
85
  @media screen and (max-width: 991px) {
93
86
  .container {
94
87
  max-width: 100% !important;
95
- padding: 0 2rem !important;
88
+ padding: 0 20px !important;
96
89
  }
97
90
  }
98
91