procode-vs-theme 1.0.6 → 1.0.8

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 (22) hide show
  1. package/dist/components.esm.js +4 -1
  2. package/dist/components.esm.js.map +1 -1
  3. package/dist/components.js +4 -0
  4. package/dist/components.js.map +1 -1
  5. package/dist/index.esm.js +5 -1
  6. package/dist/index.esm.js.map +1 -1
  7. package/dist/index.js +5 -1
  8. package/dist/index.js.map +1 -1
  9. package/dist/src/base/_color.scss +1 -0
  10. package/dist/src/base/_custom-properties.scss +1 -0
  11. package/dist/src/components/_buttons.scss +38 -11
  12. package/dist/src/components/_placeholder.scss +46 -0
  13. package/dist/src/components.ts +23 -20
  14. package/dist/src/index.scss +1 -0
  15. package/dist/types/components.d.ts +2 -0
  16. package/package.json +2 -2
  17. package/src/base/_color.scss +1 -0
  18. package/src/base/_custom-properties.scss +1 -0
  19. package/src/components/_buttons.scss +38 -11
  20. package/src/components/_placeholder.scss +46 -0
  21. package/src/components.ts +23 -20
  22. package/src/index.scss +1 -0
package/dist/components.esm.js CHANGED
@@ -2,19 +2,22 @@
2
2
  // Provides access to all component styles
3
3
  const buttons = './components/_buttons.scss';
4
4
  const input = './components/_input.scss';
5
+ const placeholder = './components/_placeholder.scss';
5
6
  const cards = './components/_cards.scss';
6
7
  // All components combined
7
8
  const allComponents = [
8
9
  buttons,
9
10
  input,
11
+ placeholder,
10
12
  cards
11
13
  ];
12
14
  var components = {
13
15
  buttons,
14
16
  input,
17
+ placeholder,
15
18
  cards,
16
19
  all: allComponents
17
20
  };
18
21
 
19
- export { allComponents, buttons, cards, components as default, input };
22
+ export { allComponents, buttons, cards, components as default, input, placeholder };
20
23
  //# sourceMappingURL=components.esm.js.map
package/dist/components.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"components.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"components.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/components.js CHANGED
@@ -6,16 +6,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
6
6
  // Provides access to all component styles
7
7
  const buttons = './components/_buttons.scss';
8
8
  const input = './components/_input.scss';
9
+ const placeholder = './components/_placeholder.scss';
9
10
  const cards = './components/_cards.scss';
10
11
  // All components combined
11
12
  const allComponents = [
12
13
  buttons,
13
14
  input,
15
+ placeholder,
14
16
  cards
15
17
  ];
16
18
  var components = {
17
19
  buttons,
18
20
  input,
21
+ placeholder,
19
22
  cards,
20
23
  all: allComponents
21
24
  };
@@ -25,4 +28,5 @@ exports.buttons = buttons;
25
28
  exports.cards = cards;
26
29
  exports.default = components;
27
30
  exports.input = input;
31
+ exports.placeholder = placeholder;
28
32
  //# sourceMappingURL=components.js.map
package/dist/components.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"components.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"components.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/index.esm.js CHANGED
@@ -95,16 +95,19 @@ var baseExports$1 = /*#__PURE__*/Object.freeze({
95
95
  // Provides access to all component styles
96
96
  const buttons = './components/_buttons.scss';
97
97
  const input = './components/_input.scss';
98
+ const placeholder = './components/_placeholder.scss';
98
99
  const cards = './components/_cards.scss';
99
100
  // All components combined
100
101
  const allComponents = [
101
102
  buttons,
102
103
  input,
104
+ placeholder,
103
105
  cards
104
106
  ];
105
107
  var components = {
106
108
  buttons,
107
109
  input,
110
+ placeholder,
108
111
  cards,
109
112
  all: allComponents
110
113
  };
@@ -115,7 +118,8 @@ var components$1 = /*#__PURE__*/Object.freeze({
115
118
  buttons: buttons,
116
119
  cards: cards,
117
120
  default: components,
118
- input: input
121
+ input: input,
122
+ placeholder: placeholder
119
123
  });
120
124
 
121
125
  // VS Theme Layout Export
package/dist/index.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/index.js CHANGED
@@ -99,16 +99,19 @@ var baseExports$1 = /*#__PURE__*/Object.freeze({
99
99
  // Provides access to all component styles
100
100
  const buttons = './components/_buttons.scss';
101
101
  const input = './components/_input.scss';
102
+ const placeholder = './components/_placeholder.scss';
102
103
  const cards = './components/_cards.scss';
103
104
  // All components combined
104
105
  const allComponents = [
105
106
  buttons,
106
107
  input,
108
+ placeholder,
107
109
  cards
108
110
  ];
109
111
  var components = {
110
112
  buttons,
111
113
  input,
114
+ placeholder,
112
115
  cards,
113
116
  all: allComponents
114
117
  };
@@ -119,7 +122,8 @@ var components$1 = /*#__PURE__*/Object.freeze({
119
122
  buttons: buttons,
120
123
  cards: cards,
121
124
  default: components,
122
- input: input
125
+ input: input,
126
+ placeholder: placeholder
123
127
  });
124
128
 
125
129
  // VS Theme Layout Export
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/src/base/_color.scss CHANGED
@@ -10,6 +10,7 @@ $text-default: #808080 !default;
10
10
  $text-dark: #464646 !default;
11
11
  $text-light: #ffffff !default;
12
12
  $text-tertiary: #ed5085 !default;
13
+ $text-placeholder: #808080 !default;
13
14
 
14
15
  $text-primary-hover: #1c428d !default;
15
16
  $text-danger-hover: #af251c !default;
package/dist/src/base/_custom-properties.scss CHANGED
@@ -16,6 +16,7 @@
16
16
  --qo-text-dark: #{cl.$text-dark};
17
17
  --qo-text-light: #{cl.$text-light};
18
18
  --qo-text-tertiary: #{cl.$text-tertiary};
19
+ --qo-text-placeholder: #{cl.$text-placeholder};
19
20
 
20
21
  // Background colors
21
22
  --qo-bg-primary: #{cl.$background-primary};
package/dist/src/components/_buttons.scss CHANGED
@@ -50,10 +50,12 @@ $btn-padding-xl: 16px !default;
50
50
  &:disabled {
51
51
  opacity: 0.5;
52
52
  cursor: not-allowed;
53
-
53
+ border-color: cl.$border-primary;
54
+ color: cl.$border-primary;
54
55
  &:hover {
55
56
  background-color: cl.$background-primary;
56
57
  border-color: cl.$border-primary;
58
+ color: cl.$border-primary;
57
59
  }
58
60
  }
59
61
  }
@@ -78,10 +80,12 @@ $btn-padding-xl: 16px !default;
78
80
  &:disabled {
79
81
  opacity: 0.5;
80
82
  cursor: not-allowed;
81
-
83
+ border-color: cl.$border-default;
84
+ color: cl.$border-default;
82
85
  &:hover {
83
86
  background-color: cl.$background-default;
84
87
  border-color: cl.$border-default;
88
+ color: cl.$border-default;
85
89
  }
86
90
  }
87
91
  }
@@ -104,11 +108,13 @@ $btn-padding-xl: 16px !default;
104
108
  &:disabled {
105
109
  opacity: 0.5;
106
110
  cursor: not-allowed;
107
- border-color: cl.$border-default;
108
- color: cl.$text-default;
111
+ border-color: cl.$border-danger;
112
+ color: cl.$border-danger;
109
113
 
110
114
  &:hover {
111
- background-color: cl.$background-default;
115
+ background-color: cl.$background-danger;
116
+ border-color: cl.$border-danger;
117
+ color: cl.$border-danger;
112
118
  }
113
119
  }
114
120
  }
@@ -133,10 +139,13 @@ $btn-padding-xl: 16px !default;
133
139
  &:disabled {
134
140
  opacity: 0.5;
135
141
  cursor: not-allowed;
142
+ border-color: cl.$border-success;
143
+ color: cl.$border-success;
136
144
 
137
145
  &:hover {
138
146
  background-color: cl.$background-success;
139
147
  border-color: cl.$border-success;
148
+ color: cl.$border-success;
140
149
  }
141
150
  }
142
151
  }
@@ -161,10 +170,13 @@ $btn-padding-xl: 16px !default;
161
170
  &:disabled {
162
171
  opacity: 0.5;
163
172
  cursor: not-allowed;
173
+ border-color: cl.$border-warning;
174
+ color: cl.$border-warning;
164
175
 
165
176
  &:hover {
166
177
  background-color: cl.$background-warning;
167
178
  border-color: cl.$border-warning;
179
+ color: cl.$border-warning;
168
180
  }
169
181
  }
170
182
  }
@@ -189,10 +201,13 @@ $btn-padding-xl: 16px !default;
189
201
  &:disabled {
190
202
  opacity: 0.5;
191
203
  cursor: not-allowed;
204
+ border-color: cl.$border-info;
205
+ color: cl.$border-info;
192
206
 
193
207
  &:hover {
194
208
  background-color: cl.$background-info;
195
209
  border-color: cl.$border-info;
210
+ color: cl.$border-info;
196
211
  }
197
212
  }
198
213
  }
@@ -222,11 +237,13 @@ $btn-padding-xl: 16px !default;
222
237
  &:disabled {
223
238
  opacity: 0.5;
224
239
  cursor: not-allowed;
240
+ border-color: cl.$border-primary;
241
+ color: cl.$border-primary;
225
242
 
226
243
  &:hover {
227
244
  background-color: transparent;
228
245
  border-color: cl.$border-primary;
229
- color: cl.$text-primary;
246
+ color: cl.$border-primary;
230
247
  }
231
248
  }
232
249
  }
@@ -254,11 +271,13 @@ $btn-padding-xl: 16px !default;
254
271
  &:disabled {
255
272
  opacity: 0.5;
256
273
  cursor: not-allowed;
274
+ border-color: cl.$border-default;
275
+ color: cl.$border-default;
257
276
 
258
277
  &:hover {
259
278
  background-color: transparent;
260
279
  border-color: cl.$border-default;
261
- color: cl.$text-light;
280
+ color: cl.$border-default;
262
281
  }
263
282
  }
264
283
  }
@@ -286,11 +305,13 @@ $btn-padding-xl: 16px !default;
286
305
  &:disabled {
287
306
  opacity: 0.5;
288
307
  cursor: not-allowed;
308
+ border-color: cl.$border-danger;
309
+ color: cl.$border-danger;
289
310
 
290
311
  &:hover {
291
312
  background-color: transparent;
292
313
  border-color: cl.$border-danger;
293
- color: cl.$text-danger;
314
+ color: cl.$border-danger;
294
315
  }
295
316
  }
296
317
  }
@@ -318,11 +339,13 @@ $btn-padding-xl: 16px !default;
318
339
  &:disabled {
319
340
  opacity: 0.5;
320
341
  cursor: not-allowed;
342
+ border-color: cl.$border-success;
343
+ color: cl.$border-success;
321
344
 
322
345
  &:hover {
323
346
  background-color: transparent;
324
347
  border-color: cl.$border-success;
325
- color: cl.$text-success;
348
+ color: cl.$border-success;
326
349
  }
327
350
  }
328
351
  }
@@ -350,11 +373,13 @@ $btn-padding-xl: 16px !default;
350
373
  &:disabled {
351
374
  opacity: 0.5;
352
375
  cursor: not-allowed;
376
+ border-color: cl.$border-warning;
377
+ color: cl.$border-warning;
353
378
 
354
379
  &:hover {
355
380
  background-color: transparent;
356
381
  border-color: cl.$border-warning;
357
- color: cl.$text-warning;
382
+ color: cl.$border-warning;
358
383
  }
359
384
  }
360
385
  }
@@ -382,11 +407,13 @@ $btn-padding-xl: 16px !default;
382
407
  &:disabled {
383
408
  opacity: 0.5;
384
409
  cursor: not-allowed;
410
+ border-color: cl.$border-info;
411
+ color: cl.$border-info;
385
412
 
386
413
  &:hover {
387
414
  background-color: transparent;
388
415
  border-color: cl.$border-info;
389
- color: cl.$text-info;
416
+ color: cl.$border-info;
390
417
  }
391
418
  }
392
419
  }
package/dist/src/components/_placeholder.scss ADDED
@@ -0,0 +1,46 @@
1
+ @use "../base/color" as cl;
2
+ @use "../base/font" as ft;
3
+ @use "../base/mixins/font_size-mx" as mx;
4
+
5
+ ::placeholder {
6
+ color: cl.$text-placeholder;
7
+ opacity: 1;
8
+ @include mx.font-size(ft.$font-size-sm, ft.$line-height-sm);
9
+ }
10
+
11
+ ::-webkit-input-placeholder {
12
+ color: cl.$text-placeholder;
13
+ @include mx.font-size(ft.$font-size-sm, ft.$line-height-sm);
14
+ }
15
+
16
+ :-ms-input-placeholder {
17
+ color: cl.$text-placeholder;
18
+ @include mx.font-size(ft.$font-size-sm, ft.$line-height-sm);
19
+ }
20
+
21
+ .qo-placeholder-xs::placeholder {
22
+ @include mx.font-size(ft.$font-size-xs, ft.$line-height-xs);
23
+ }
24
+
25
+ .qo-placeholder-sm::placeholder {
26
+ @include mx.font-size(ft.$font-size-sm, ft.$line-height-sm);
27
+ }
28
+
29
+ .qo-placeholder-md::placeholder {
30
+ @include mx.font-size(ft.$font-size-md, ft.$line-height-md);
31
+ }
32
+
33
+ .qo-placeholder-italic::placeholder {
34
+ font-style: italic;
35
+ }
36
+
37
+ .qo-placeholder-primary::placeholder { color: cl.$text-primary; }
38
+ .qo-placeholder-secondary::placeholder { color: cl.$text-secondary; }
39
+ .qo-placeholder-success::placeholder { color: cl.$text-success; }
40
+ .qo-placeholder-warning::placeholder { color: cl.$text-warning; }
41
+ .qo-placeholder-danger::placeholder { color: cl.$text-danger; }
42
+ .qo-placeholder-info::placeholder { color: cl.$text-info; }
43
+ .qo-placeholder-default::placeholder { color: cl.$text-default; }
44
+ .qo-placeholder-dark::placeholder { color: cl.$text-dark; }
45
+ .qo-placeholder-light::placeholder { color: cl.$text-light; }
46
+ .qo-placeholder-tertiary::placeholder { color: cl.$text-tertiary; }
package/dist/src/components.ts CHANGED
@@ -1,20 +1,23 @@
1
- // VS Theme Components Export
2
- // Provides access to all component styles
3
-
4
- export const buttons = './components/_buttons.scss';
5
- export const input = './components/_input.scss';
6
- export const cards = './components/_cards.scss';
7
-
8
- // All components combined
9
- export const allComponents = [
10
- buttons,
11
- input,
12
- cards
13
- ];
14
-
15
- export default {
16
- buttons,
17
- input,
18
- cards,
19
- all: allComponents
20
- };
1
+ // VS Theme Components Export
2
+ // Provides access to all component styles
3
+
4
+ export const buttons = './components/_buttons.scss';
5
+ export const input = './components/_input.scss';
6
+ export const placeholder = './components/_placeholder.scss';
7
+ export const cards = './components/_cards.scss';
8
+
9
+ // All components combined
10
+ export const allComponents = [
11
+ buttons,
12
+ input,
13
+ placeholder,
14
+ cards
15
+ ];
16
+
17
+ export default {
18
+ buttons,
19
+ input,
20
+ placeholder,
21
+ cards,
22
+ all: allComponents
23
+ };
package/dist/src/index.scss CHANGED
@@ -64,6 +64,7 @@
64
64
  // Components
65
65
  @forward "./components/buttons";
66
66
  @forward "./components/input";
67
+ @forward "./components/placeholder";
67
68
  @forward "./components/disabled";
68
69
 
69
70
  // Layout
package/dist/types/components.d.ts CHANGED
@@ -1,10 +1,12 @@
1
1
  export declare const buttons = "./components/_buttons.scss";
2
2
  export declare const input = "./components/_input.scss";
3
+ export declare const placeholder = "./components/_placeholder.scss";
3
4
  export declare const cards = "./components/_cards.scss";
4
5
  export declare const allComponents: string[];
5
6
  declare const _default: {
6
7
  buttons: string;
7
8
  input: string;
9
+ placeholder: string;
8
10
  cards: string;
9
11
  all: string[];
10
12
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "procode-vs-theme",
3
- "version": "1.0.6",
3
+ "version": "1.0.8",
4
4
  "description": "VarStreet VS Theme - A comprehensive SCSS theme package for ProCode framework with variables, components, layout, and utilities for flexible design system usage",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -46,7 +46,7 @@
46
46
  "dev": "rollup -c --watch",
47
47
  "clean": "rimraf dist",
48
48
  "prebuild": "npm run clean",
49
- "_prepublishOnly": "npm run build",
49
+ "prepublishOnly": "npm run build",
50
50
  "postbuild": "node -e \"const fs=require('fs');const path=require('path');function cpR(s,d){fs.mkdirSync(d,{recursive:true});fs.readdirSync(s).forEach(f=>{const sp=path.join(s,f),dp=path.join(d,f);fs.statSync(sp).isDirectory()?cpR(sp,dp):f.endsWith('.scss')&&fs.copyFileSync(sp,dp)});}cpR('src','dist/src');\""
51
51
  },
52
52
  "keywords": [
package/src/base/_color.scss CHANGED
@@ -10,6 +10,7 @@ $text-default: #808080 !default;
10
10
  $text-dark: #464646 !default;
11
11
  $text-light: #ffffff !default;
12
12
  $text-tertiary: #ed5085 !default;
13
+ $text-placeholder: #808080 !default;
13
14
 
14
15
  $text-primary-hover: #1c428d !default;
15
16
  $text-danger-hover: #af251c !default;
package/src/base/_custom-properties.scss CHANGED
@@ -16,6 +16,7 @@
16
16
  --qo-text-dark: #{cl.$text-dark};
17
17
  --qo-text-light: #{cl.$text-light};
18
18
  --qo-text-tertiary: #{cl.$text-tertiary};
19
+ --qo-text-placeholder: #{cl.$text-placeholder};
19
20
 
20
21
  // Background colors
21
22
  --qo-bg-primary: #{cl.$background-primary};
package/src/components/_buttons.scss CHANGED
@@ -50,10 +50,12 @@ $btn-padding-xl: 16px !default;
50
50
  &:disabled {
51
51
  opacity: 0.5;
52
52
  cursor: not-allowed;
53
-
53
+ border-color: cl.$border-primary;
54
+ color: cl.$border-primary;
54
55
  &:hover {
55
56
  background-color: cl.$background-primary;
56
57
  border-color: cl.$border-primary;
58
+ color: cl.$border-primary;
57
59
  }
58
60
  }
59
61
  }
@@ -78,10 +80,12 @@ $btn-padding-xl: 16px !default;
78
80
  &:disabled {
79
81
  opacity: 0.5;
80
82
  cursor: not-allowed;
81
-
83
+ border-color: cl.$border-default;
84
+ color: cl.$border-default;
82
85
  &:hover {
83
86
  background-color: cl.$background-default;
84
87
  border-color: cl.$border-default;
88
+ color: cl.$border-default;
85
89
  }
86
90
  }
87
91
  }
@@ -104,11 +108,13 @@ $btn-padding-xl: 16px !default;
104
108
  &:disabled {
105
109
  opacity: 0.5;
106
110
  cursor: not-allowed;
107
- border-color: cl.$border-default;
108
- color: cl.$text-default;
111
+ border-color: cl.$border-danger;
112
+ color: cl.$border-danger;
109
113
 
110
114
  &:hover {
111
- background-color: cl.$background-default;
115
+ background-color: cl.$background-danger;
116
+ border-color: cl.$border-danger;
117
+ color: cl.$border-danger;
112
118
  }
113
119
  }
114
120
  }
@@ -133,10 +139,13 @@ $btn-padding-xl: 16px !default;
133
139
  &:disabled {
134
140
  opacity: 0.5;
135
141
  cursor: not-allowed;
142
+ border-color: cl.$border-success;
143
+ color: cl.$border-success;
136
144
 
137
145
  &:hover {
138
146
  background-color: cl.$background-success;
139
147
  border-color: cl.$border-success;
148
+ color: cl.$border-success;
140
149
  }
141
150
  }
142
151
  }
@@ -161,10 +170,13 @@ $btn-padding-xl: 16px !default;
161
170
  &:disabled {
162
171
  opacity: 0.5;
163
172
  cursor: not-allowed;
173
+ border-color: cl.$border-warning;
174
+ color: cl.$border-warning;
164
175
 
165
176
  &:hover {
166
177
  background-color: cl.$background-warning;
167
178
  border-color: cl.$border-warning;
179
+ color: cl.$border-warning;
168
180
  }
169
181
  }
170
182
  }
@@ -189,10 +201,13 @@ $btn-padding-xl: 16px !default;
189
201
  &:disabled {
190
202
  opacity: 0.5;
191
203
  cursor: not-allowed;
204
+ border-color: cl.$border-info;
205
+ color: cl.$border-info;
192
206
 
193
207
  &:hover {
194
208
  background-color: cl.$background-info;
195
209
  border-color: cl.$border-info;
210
+ color: cl.$border-info;
196
211
  }
197
212
  }
198
213
  }
@@ -222,11 +237,13 @@ $btn-padding-xl: 16px !default;
222
237
  &:disabled {
223
238
  opacity: 0.5;
224
239
  cursor: not-allowed;
240
+ border-color: cl.$border-primary;
241
+ color: cl.$border-primary;
225
242
 
226
243
  &:hover {
227
244
  background-color: transparent;
228
245
  border-color: cl.$border-primary;
229
- color: cl.$text-primary;
246
+ color: cl.$border-primary;
230
247
  }
231
248
  }
232
249
  }
@@ -254,11 +271,13 @@ $btn-padding-xl: 16px !default;
254
271
  &:disabled {
255
272
  opacity: 0.5;
256
273
  cursor: not-allowed;
274
+ border-color: cl.$border-default;
275
+ color: cl.$border-default;
257
276
 
258
277
  &:hover {
259
278
  background-color: transparent;
260
279
  border-color: cl.$border-default;
261
- color: cl.$text-light;
280
+ color: cl.$border-default;
262
281
  }
263
282
  }
264
283
  }
@@ -286,11 +305,13 @@ $btn-padding-xl: 16px !default;
286
305
  &:disabled {
287
306
  opacity: 0.5;
288
307
  cursor: not-allowed;
308
+ border-color: cl.$border-danger;
309
+ color: cl.$border-danger;
289
310
 
290
311
  &:hover {
291
312
  background-color: transparent;
292
313
  border-color: cl.$border-danger;
293
- color: cl.$text-danger;
314
+ color: cl.$border-danger;
294
315
  }
295
316
  }
296
317
  }
@@ -318,11 +339,13 @@ $btn-padding-xl: 16px !default;
318
339
  &:disabled {
319
340
  opacity: 0.5;
320
341
  cursor: not-allowed;
342
+ border-color: cl.$border-success;
343
+ color: cl.$border-success;
321
344
 
322
345
  &:hover {
323
346
  background-color: transparent;
324
347
  border-color: cl.$border-success;
325
- color: cl.$text-success;
348
+ color: cl.$border-success;
326
349
  }
327
350
  }
328
351
  }
@@ -350,11 +373,13 @@ $btn-padding-xl: 16px !default;
350
373
  &:disabled {
351
374
  opacity: 0.5;
352
375
  cursor: not-allowed;
376
+ border-color: cl.$border-warning;
377
+ color: cl.$border-warning;
353
378
 
354
379
  &:hover {
355
380
  background-color: transparent;
356
381
  border-color: cl.$border-warning;
357
- color: cl.$text-warning;
382
+ color: cl.$border-warning;
358
383
  }
359
384
  }
360
385
  }
@@ -382,11 +407,13 @@ $btn-padding-xl: 16px !default;
382
407
  &:disabled {
383
408
  opacity: 0.5;
384
409
  cursor: not-allowed;
410
+ border-color: cl.$border-info;
411
+ color: cl.$border-info;
385
412
 
386
413
  &:hover {
387
414
  background-color: transparent;
388
415
  border-color: cl.$border-info;
389
- color: cl.$text-info;
416
+ color: cl.$border-info;
390
417
  }
391
418
  }
392
419
  }
package/src/components/_placeholder.scss ADDED
@@ -0,0 +1,46 @@
1
+ @use "../base/color" as cl;
2
+ @use "../base/font" as ft;
3
+ @use "../base/mixins/font_size-mx" as mx;
4
+
5
+ ::placeholder {
6
+ color: cl.$text-placeholder;
7
+ opacity: 1;
8
+ @include mx.font-size(ft.$font-size-sm, ft.$line-height-sm);
9
+ }
10
+
11
+ ::-webkit-input-placeholder {
12
+ color: cl.$text-placeholder;
13
+ @include mx.font-size(ft.$font-size-sm, ft.$line-height-sm);
14
+ }
15
+
16
+ :-ms-input-placeholder {
17
+ color: cl.$text-placeholder;
18
+ @include mx.font-size(ft.$font-size-sm, ft.$line-height-sm);
19
+ }
20
+
21
+ .qo-placeholder-xs::placeholder {
22
+ @include mx.font-size(ft.$font-size-xs, ft.$line-height-xs);
23
+ }
24
+
25
+ .qo-placeholder-sm::placeholder {
26
+ @include mx.font-size(ft.$font-size-sm, ft.$line-height-sm);
27
+ }
28
+
29
+ .qo-placeholder-md::placeholder {
30
+ @include mx.font-size(ft.$font-size-md, ft.$line-height-md);
31
+ }
32
+
33
+ .qo-placeholder-italic::placeholder {
34
+ font-style: italic;
35
+ }
36
+
37
+ .qo-placeholder-primary::placeholder { color: cl.$text-primary; }
38
+ .qo-placeholder-secondary::placeholder { color: cl.$text-secondary; }
39
+ .qo-placeholder-success::placeholder { color: cl.$text-success; }
40
+ .qo-placeholder-warning::placeholder { color: cl.$text-warning; }
41
+ .qo-placeholder-danger::placeholder { color: cl.$text-danger; }
42
+ .qo-placeholder-info::placeholder { color: cl.$text-info; }
43
+ .qo-placeholder-default::placeholder { color: cl.$text-default; }
44
+ .qo-placeholder-dark::placeholder { color: cl.$text-dark; }
45
+ .qo-placeholder-light::placeholder { color: cl.$text-light; }
46
+ .qo-placeholder-tertiary::placeholder { color: cl.$text-tertiary; }
package/src/components.ts CHANGED
@@ -1,20 +1,23 @@
1
- // VS Theme Components Export
2
- // Provides access to all component styles
3
-
4
- export const buttons = './components/_buttons.scss';
5
- export const input = './components/_input.scss';
6
- export const cards = './components/_cards.scss';
7
-
8
- // All components combined
9
- export const allComponents = [
10
- buttons,
11
- input,
12
- cards
13
- ];
14
-
15
- export default {
16
- buttons,
17
- input,
18
- cards,
19
- all: allComponents
20
- };
1
+ // VS Theme Components Export
2
+ // Provides access to all component styles
3
+
4
+ export const buttons = './components/_buttons.scss';
5
+ export const input = './components/_input.scss';
6
+ export const placeholder = './components/_placeholder.scss';
7
+ export const cards = './components/_cards.scss';
8
+
9
+ // All components combined
10
+ export const allComponents = [
11
+ buttons,
12
+ input,
13
+ placeholder,
14
+ cards
15
+ ];
16
+
17
+ export default {
18
+ buttons,
19
+ input,
20
+ placeholder,
21
+ cards,
22
+ all: allComponents
23
+ };
package/src/index.scss CHANGED
@@ -64,6 +64,7 @@
64
64
  // Components
65
65
  @forward "./components/buttons";
66
66
  @forward "./components/input";
67
+ @forward "./components/placeholder";
67
68
  @forward "./components/disabled";
68
69
 
69
70
  // Layout