@posiwise/core-styles 1.0.0 → 1.0.2

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/app.scss +45 -0
  2. package/css/google-fonts.css +4 -1
  3. package/css/hopscotch.css +1 -1
  4. package/package.json +3 -3
  5. package/scss/_dashboard.scss +1 -1
  6. package/scss/_dynamic-styles.scss +873 -7
  7. package/scss/common/landing-page-a/landing-page-style-1.scss +7 -7
  8. package/scss/common/landing-page-b/banner.scss +8 -8
  9. package/scss/common/landing-page-b/contact-us.scss +4 -4
  10. package/scss/common/landing-page-b/explainer.scss +6 -6
  11. package/scss/common/landing-page-b/explainer2.scss +1 -1
  12. package/scss/common/landing-page-b/landing-page-style-2.scss +4 -3
  13. package/scss/custom-bootstrap/_badge.scss +35 -25
  14. package/scss/custom-bootstrap/_type.scss +7 -1
  15. package/scss/dashboard/_bootstrap-social.scss +25 -25
  16. package/scss/dashboard/_coming-soon.scss +1 -1
  17. package/scss/dashboard/_components.scss +1 -1
  18. package/scss/dashboard/_email.scss +7 -7
  19. package/scss/dashboard/_helper.scss +17 -7
  20. package/scss/dashboard/_icons.scss +7 -0
  21. package/scss/dashboard/_misc.scss +1 -1
  22. package/scss/dashboard/_palette.scss +284 -125
  23. package/scss/dashboard/_profile.scss +1 -1
  24. package/scss/dashboard/_tabs.scss +18 -0
  25. package/scss/dashboard/mixins/_utilities.scss +1 -1
  26. package/scss/dashboard/mixins/_vendor-prefixes.scss +2 -2
  27. package/scss/plugins/perfect-scrollbar/_variables.scss +1 -1
  28. package/scss/public-pages/_layout.scss +8 -1
  29. package/scss/shared/_prime-ng.scss +278 -180
  30. package/scss/variables/_app-colors-variables.scss +7 -1
  31. package/scss/variables/_branding-variables.scss +9 -7
  32. package/scss/variables/_generic-variables.scss +5 -5
  33. package/scss/variables/_primeng-variables.scss +38 -38
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 customiztion.
4
+ // related customization.
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 radious
267
+ // No border radius
268
268
  .no-radius {
269
269
  border-radius: unset !important;
270
270
  }
@@ -302,23 +302,33 @@
302
302
  }
303
303
 
304
304
  .box-shadow-1 {
305
- box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
305
+ box-shadow:
306
+ 0 2px 5px 0 rgb(0 0 0 / 16%),
307
+ 0 2px 10px 0 rgb(0 0 0 / 12%);
306
308
  }
307
309
 
308
310
  .box-shadow-2 {
309
- box-shadow: 0 8px 17px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
311
+ box-shadow:
312
+ 0 8px 17px 0 rgb(0 0 0 / 20%),
313
+ 0 6px 20px 0 rgb(0 0 0 / 19%);
310
314
  }
311
315
 
312
316
  .box-shadow-3 {
313
- box-shadow: 0 12px 15px 0 rgb(0 0 0 / 24%), 0 17px 50px 0 rgb(0 0 0 / 19%);
317
+ box-shadow:
318
+ 0 12px 15px 0 rgb(0 0 0 / 24%),
319
+ 0 17px 50px 0 rgb(0 0 0 / 19%);
314
320
  }
315
321
 
316
322
  .box-shadow-4 {
317
- box-shadow: 0 16px 28px 0 rgb(0 0 0 / 22%), 0 25px 55px 0 rgb(0 0 0 / 21%);
323
+ box-shadow:
324
+ 0 16px 28px 0 rgb(0 0 0 / 22%),
325
+ 0 25px 55px 0 rgb(0 0 0 / 21%);
318
326
  }
319
327
 
320
328
  .box-shadow-5 {
321
- box-shadow: 0 27px 24px 0 rgb(0 0 0 / 20%), 0 40px 77px 0 rgb(0 0 0 / 22%);
329
+ box-shadow:
330
+ 0 27px 24px 0 rgb(0 0 0 / 20%),
331
+ 0 40px 77px 0 rgb(0 0 0 / 22%);
322
332
  }
323
333
 
324
334
  // Sizing
package/scss/dashboard/_icons.scss CHANGED
@@ -44,6 +44,13 @@
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
+
47
54
  .cta2-icon {
48
55
  color: $branding-color-2;
49
56
  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 dropp
129
+ // Drag and drop
130
130
  .dragdrop-container {
131
131
  min-height: 200px;
132
132
  }
package/scss/dashboard/_palette.scss CHANGED
@@ -39,180 +39,294 @@
39
39
  }
40
40
  }
41
41
 
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
- }
42
+ @each $color_name, $color_value in $branding-colors {
43
+ .bg-#{$color_name} {
44
+ background-color: $color_value !important;
48
45
 
49
- .bg-#{$color_name} {
50
- background-color: $color_value !important;
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;
51
55
 
52
- .card-header,
53
- .card-footer {
54
- background-color: transparent;
55
- }
56
- }
56
+ .alert-link {
57
+ color: $color_value !important;
58
+ }
59
+ }
60
+ .border-#{$color_name} {
61
+ border-color: $color_value !important;
62
+ }
57
63
 
58
- .toast-#{$color_name} {
59
- background-color: $color_value;
60
- }
64
+ .border-top-#{$color_name} {
65
+ border-top-color: $color_value !important;
66
+ }
61
67
 
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;
68
+ .border-bottom-#{$color_name} {
69
+ border-bottom-color: $color_value !important;
70
+ }
66
71
 
67
- .alert-link {
68
- color: darken($color_value, 43%) !important;
69
- }
70
- }
72
+ .border-left-#{$color_name} {
73
+ border-left-color: $color_value !important;
74
+ }
71
75
 
72
- .border-#{$color_name} {
73
- border-color: $color_value;
74
- }
76
+ .border-right-#{$color_name} {
77
+ border-right-color: $color_value !important;
78
+ }
75
79
 
76
- .border-top-#{$color_name} {
77
- border-top-color: $color_value;
78
- }
80
+ .panel-#{$color_name} {
81
+ border-color: $color_value !important;
79
82
 
80
- .border-bottom-#{$color_name} {
81
- border-bottom-color: $color_value;
82
- }
83
+ .panel-heading {
84
+ background-color: $color_value !important;
85
+ border-color: $color_value !important;
86
+ color: rgb(255 255 255);
87
+ }
88
+ }
83
89
 
84
- .border-left-#{$color_name} {
85
- border-left-color: $color_value;
86
- }
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
+ }
87
107
 
88
- .border-right-#{$color_name} {
89
- border-right-color: $color_value;
90
- }
108
+ &.active {
109
+ background-color: $color_value !important;
110
+ color: rgb(255 255 255) !important;
111
+ }
91
112
 
92
- .badge-#{$color_name} {
93
- background-color: $color_value;
94
- }
113
+ &:hover {
114
+ background-color: $color_value !important;
115
+ color: rgb(255 255 255) !important;
116
+ }
117
+ }
95
118
 
96
- .panel-#{$color_name} {
97
- border-color: $color_value;
119
+ .btn-#{$color_name} {
120
+ color: rgb(255 255 255) !important;
98
121
 
99
- .panel-heading {
100
- background-color: lighten($color_value, 5%);
101
- border-color: $color_value;
102
- color: rgb(255 255 255);
103
- }
104
- }
122
+ &.btn-flat {
123
+ background-color: transparent !important;
124
+ border: 0;
125
+ color: $color_value;
126
+ }
105
127
 
106
- .bg-#{$color_name},
107
- .border-#{$color_name} {
108
- &.tag-glow {
109
- box-shadow: 0 0 10px $color_value;
110
- }
111
- }
128
+ &.btn-raised,
129
+ &.btn-fab {
130
+ background-color: $color_value !important;
131
+ border-color: $color_value;
132
+ color: rgb(255 255 255) !important;
112
133
 
113
- .overlay-#{$color_name} {
114
- @include bg-opacity($color_value, 0.8);
134
+ &.active {
135
+ background-color: $color_value !important;
136
+ border-color: $color_value !important;
115
137
  }
138
+ }
139
+ }
116
140
 
117
- .card.card-outline-#{$color_name} {
141
+ .btn-group-raised {
142
+ .btn-#{$color_name} {
143
+ background-color: $color_value !important;
144
+ color: rgb(255 255 255) !important;
145
+ }
146
+ }
147
+
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
+ }
160
+
161
+ &.active {
162
+ background-color: $color_value !important;
163
+ color: rgb(255 255 255) !important;
164
+ }
165
+
166
+ &:hover {
167
+ background-color: $color_value !important;
168
+ color: rgb(255 255 255) !important;
169
+ }
170
+ }
171
+
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;
180
+
181
+ &:focus {
118
182
  background-color: transparent;
119
- border-color: $color_value;
120
- border-style: solid;
121
- border-width: 1px;
183
+ }
122
184
 
123
- .card-header,
124
- .card-footer {
125
- background-color: transparent;
126
- }
185
+ &.active {
186
+ background-color: $color_value !important;
187
+ color: rgb(255 255 255) !important;
127
188
  }
128
189
 
129
- .btn-#{$color_name} {
190
+ &:hover {
130
191
  background-color: $color_value !important;
131
- border: 1px solid;
132
- border-color: $color_value !important;
133
192
  color: rgb(255 255 255) !important;
193
+ }
194
+ }
195
+ }
134
196
 
135
- &:focus {
136
- background-color: darken($color_value, 5%) !important;
137
- box-shadow: transparent !important;
138
- color: rgb(255 255 255) !important;
139
- }
197
+ .progress {
198
+ .progress-bar {
199
+ &.progress-bar-#{$color_name} {
200
+ @include progress-variant($color_value);
201
+ }
202
+ }
203
+ }
204
+ }
205
+
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;
211
+ }
140
212
 
141
- &.active {
213
+ @if $color_name != 'primary' and $color_name != 'secondary' {
214
+ .bg-#{$color_name} {
142
215
  background-color: $color_value !important;
143
- color: rgb(255 255 255) !important;
216
+
217
+ .card-header,
218
+ .card-footer {
219
+ background-color: transparent;
220
+ }
144
221
  }
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;
145
226
 
146
- &:hover {
147
- background-color: darken($color_value, 5%) !important;
148
- color: rgb(255 255 255) !important;
227
+ .alert-link {
228
+ color: darken($color_value, 43%) !important;
229
+ }
230
+ }
231
+ .border-#{$color_name} {
232
+ border-color: $color_value;
149
233
  }
150
- }
151
234
 
152
- .btn-#{$color_name} {
153
- color: rgb(255 255 255) !important;
235
+ .border-top-#{$color_name} {
236
+ border-top-color: $color_value;
237
+ }
154
238
 
155
- &.btn-flat {
156
- background-color: transparent !important;
157
- border: 0;
158
- color: $color_value;
239
+ .border-bottom-#{$color_name} {
240
+ border-bottom-color: $color_value;
159
241
  }
160
242
 
161
- &.btn-raised,
162
- &.btn-fab {
163
- background-color: $color_value !important;
243
+ .border-left-#{$color_name} {
244
+ border-left-color: $color_value;
245
+ }
246
+
247
+ .border-right-#{$color_name} {
248
+ border-right-color: $color_value;
249
+ }
250
+
251
+ .panel-#{$color_name} {
164
252
  border-color: $color_value;
165
- color: rgb(255 255 255) !important;
166
253
 
167
- &.active {
168
- background-color: darken($color_value, 7%) !important;
169
- border-color: darken($color_value, 7%) !important;
254
+ .panel-heading {
255
+ background-color: lighten($color_value, 5%);
256
+ border-color: $color_value;
257
+ color: rgb(255 255 255);
170
258
  }
171
259
  }
172
- }
173
260
 
174
- .btn-group-raised {
261
+ .bg-#{$color_name},
262
+ .border-#{$color_name} {
263
+ &.tag-glow {
264
+ box-shadow: 0 0 10px $color_value;
265
+ }
266
+ }
175
267
  .btn-#{$color_name} {
176
268
  background-color: $color_value !important;
269
+ border: 1px solid;
270
+ border-color: $color_value !important;
177
271
  color: rgb(255 255 255) !important;
178
- }
179
- }
180
272
 
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;
273
+ &:focus {
274
+ background-color: darken($color_value, 5%) !important;
275
+ box-shadow: transparent !important;
276
+ color: rgb(255 255 255) !important;
277
+ }
187
278
 
188
- &:focus {
189
- background-color: transparent !important;
190
- box-shadow: transparent !important;
191
- color: $color_value !important;
279
+ &.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;
287
+ }
192
288
  }
193
289
 
194
- &.active {
195
- background-color: $color_value !important;
290
+ .btn-#{$color_name} {
196
291
  color: rgb(255 255 255) !important;
292
+
293
+ &.btn-flat {
294
+ background-color: transparent !important;
295
+ border: 0;
296
+ color: $color_value;
297
+ }
298
+
299
+ &.btn-raised,
300
+ &.btn-fab {
301
+ background-color: $color_value !important;
302
+ border-color: $color_value;
303
+ color: rgb(255 255 255) !important;
304
+
305
+ &.active {
306
+ background-color: darken($color_value, 7%) !important;
307
+ border-color: darken($color_value, 7%) !important;
308
+ }
309
+ }
197
310
  }
198
311
 
199
- &:hover {
200
- background-color: darken($color_value, 3%) !important;
201
- color: rgb(255 255 255) !important;
312
+ .btn-group-raised {
313
+ .btn-#{$color_name} {
314
+ background-color: $color_value !important;
315
+ color: rgb(255 255 255) !important;
316
+ }
202
317
  }
203
- }
204
318
 
205
- .btn-outline-#{$color_name} {
206
- &.btn-raised,
207
- &.btn-fab {
208
- background-color: transparent;
319
+ .btn-outline-#{$color_name} {
320
+ background-color: transparent !important;
209
321
  border: 1px solid;
210
- border-color: $color_value;
322
+ border-color: $color_value !important;
211
323
  box-shadow: none !important;
212
- color: $color_value;
324
+ color: $color_value !important;
213
325
 
214
326
  &:focus {
215
- background-color: transparent;
327
+ background-color: transparent !important;
328
+ box-shadow: transparent !important;
329
+ color: $color_value !important;
216
330
  }
217
331
 
218
332
  &.active {
@@ -225,16 +339,61 @@
225
339
  color: rgb(255 255 255) !important;
226
340
  }
227
341
  }
228
- }
229
342
 
230
- .progress {
231
- .progress-bar {
232
- &.progress-bar-#{$color_name} {
233
- @include progress-variant($color_value);
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
+ }
234
373
  }
235
374
  }
236
375
  }
237
376
 
377
+ .toast-#{$color_name} {
378
+ background-color: $color_value;
379
+ }
380
+
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;
394
+ }
395
+ }
396
+
238
397
  input:focus ~ .bg-#{$color_name} {
239
398
  box-shadow: 0 0 0 0.075rem rgb(255 255 255), 0 0 0 0.21rem $color_value !important;
240
399
  }
package/scss/dashboard/_profile.scss CHANGED
@@ -2,7 +2,7 @@
2
2
  .profile-with-cover {
3
3
  position: relative;
4
4
 
5
- .profil-cover-details {
5
+ .profile-cover-details {
6
6
  margin-top: -65px;
7
7
 
8
8
  .profile-image {
package/scss/dashboard/_tabs.scss CHANGED
@@ -44,9 +44,15 @@
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
+
47
52
  .p-tabmenuitem {
48
53
  border: 0 0;
49
54
  margin: 0;
55
+ padding: 0;
50
56
 
51
57
  a {
52
58
  background: transparent;
@@ -76,6 +82,9 @@
76
82
  .p-menuitem-link.p-menuitem-link-active {
77
83
  @extend .tab-style;
78
84
  }
85
+ .p-tabmenuitem-active {
86
+ @extend .tab-style;
87
+ }
79
88
 
80
89
  .p-menuitem-link {
81
90
  border: 0 !important;
@@ -134,6 +143,15 @@
134
143
  }
135
144
  }
136
145
 
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
+
137
155
  @media only screen and (max-width: 480px) {
138
156
  .p-tabmenu {
139
157
  .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 fullpalette)
6
+ // TODO: this may be useful for the inverse theme, but if not, remove (it is unused after the removal of full palette)
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($boxmodel) {
14
- box-sizing: $boxmodel;
13
+ @mixin box-sizing($box-model) {
14
+ box-sizing: $box-model;
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: $barHover !default;
8
+ $ps-bar-hover-bg: $bar-hover !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,13 +79,20 @@ 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;
82
89
  }
83
90
  }
84
91
 
85
92
  @media screen and (max-width: 991px) {
86
93
  .container {
87
94
  max-width: 100% !important;
88
- padding: 0 20px !important;
95
+ padding: 0 2rem !important;
89
96
  }
90
97
  }
91
98