@dative-gpi/foundation-shared-components 0.0.5 → 0.0.7
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.
- package/components/FSBreadcrumbs.vue +16 -14
- package/components/FSButton.vue +171 -115
- package/components/FSCheckbox.vue +21 -10
- package/components/FSCol.vue +17 -17
- package/components/FSColor.vue +80 -0
- package/components/FSFadeOut.vue +4 -4
- package/components/FSIcon.vue +5 -3
- package/components/FSNumberField.vue +1 -1
- package/components/FSPasswordField.vue +20 -9
- package/components/FSRadio.vue +20 -10
- package/components/FSRadioGroup.vue +5 -7
- package/components/FSRow.vue +17 -17
- package/components/FSSearchField.vue +122 -0
- package/components/FSSlideGroup.vue +16 -12
- package/components/FSSpan.vue +27 -2
- package/components/FSSwitch.vue +25 -12
- package/components/FSTab.vue +9 -2
- package/components/FSTabs.vue +18 -10
- package/components/FSTag.vue +31 -17
- package/components/FSTagField.vue +152 -0
- package/components/FSTagGroup.vue +60 -0
- package/components/FSText.vue +78 -0
- package/components/FSTextField.vue +74 -18
- package/components/FSWrapGroup.vue +15 -12
- package/composables/useColors.ts +31 -21
- package/{defaults → models}/FSButtons.ts +24 -6
- package/models/FSTags.ts +8 -0
- package/models/FSTextFields.ts +17 -0
- package/package.json +5 -4
- package/styles/components/fs_breadcrumbs.scss +10 -5
- package/styles/components/fs_button.scss +21 -20
- package/styles/components/fs_checkbox.scss +3 -4
- package/styles/components/fs_color.scss +5 -0
- package/styles/components/fs_password_field.scss +6 -1
- package/styles/components/fs_radio.scss +3 -4
- package/styles/components/fs_span.scss +7 -2
- package/styles/components/fs_switch.scss +4 -4
- package/styles/components/fs_tabs.scss +8 -8
- package/styles/components/fs_tag.scss +8 -8
- package/styles/components/fs_tag_field.scss +10 -0
- package/styles/components/fs_text.scss +5 -0
- package/styles/components/fs_text_field.scss +25 -14
- package/styles/components/index.scss +3 -0
- package/styles/globals/overrides.scss +13 -4
- package/styles/globals/text_fonts.scss +4 -0
- package/themes/default.ts +6 -6
|
@@ -1,14 +1,19 @@
|
|
|
1
1
|
.fs-breadcrumbs-label {
|
|
2
2
|
cursor: pointer;
|
|
3
|
-
|
|
3
|
+
user-select: none;
|
|
4
|
+
color: var(--fs-breadcrumbs-color);
|
|
4
5
|
|
|
5
6
|
&--disabled {
|
|
6
|
-
color: var(--fs-breadcrumbs-
|
|
7
|
+
color: var(--fs-breadcrumbs-disabled-color) !important;
|
|
7
8
|
}
|
|
8
9
|
|
|
9
10
|
&:hover {
|
|
10
11
|
text-decoration: underline;
|
|
11
12
|
}
|
|
13
|
+
|
|
14
|
+
&:active {
|
|
15
|
+
color: var(--fs-breadcrumbs-active-color) !important;
|
|
16
|
+
}
|
|
12
17
|
}
|
|
13
18
|
|
|
14
19
|
.fs-breadcrumbs-divider {
|
|
@@ -25,17 +30,17 @@
|
|
|
25
30
|
|
|
26
31
|
&--disabled {
|
|
27
32
|
opacity: 1 !important;
|
|
28
|
-
color: var(--fs-breadcrumbs-
|
|
33
|
+
color: var(--fs-breadcrumbs-disabled-color) !important;
|
|
29
34
|
}
|
|
30
35
|
|
|
31
36
|
&:last-child > .fs-breadcrumbs-label--disabled {
|
|
32
37
|
@extend .text-button;
|
|
33
38
|
|
|
34
|
-
color: var(--fs-breadcrumbs-
|
|
39
|
+
color: var(--fs-breadcrumbs-active-color) !important;
|
|
35
40
|
}
|
|
36
41
|
}
|
|
37
42
|
|
|
38
43
|
.v-breadcrumbs-divider {
|
|
39
44
|
padding: 0 !important;
|
|
40
|
-
color: var(--fs-breadcrumbs-
|
|
45
|
+
color: var(--fs-breadcrumbs-color) !important;
|
|
41
46
|
}
|
|
@@ -1,19 +1,26 @@
|
|
|
1
1
|
.fs-button {
|
|
2
2
|
padding: var(--fs-button-padding) !important;
|
|
3
3
|
border-radius: 4px !important;
|
|
4
|
+
border: 1px solid !important;
|
|
4
5
|
box-shadow: none !important;
|
|
5
|
-
|
|
6
|
-
background-color: var(--fs-button-
|
|
7
|
-
color: var(--fs-button-
|
|
6
|
+
|
|
7
|
+
background-color: var(--fs-button-background-color) !important;
|
|
8
|
+
border-color: var(--fs-button-border-color) !important;
|
|
9
|
+
color: var(--fs-button-color) !important;
|
|
8
10
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
color: var(--fs-button-base-text) !important;
|
|
11
|
+
&.fs-button--disabled {
|
|
12
|
+
cursor: default !important;
|
|
12
13
|
}
|
|
13
14
|
|
|
14
|
-
&:
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
&:not(.fs-button--disabled):hover {
|
|
16
|
+
background-color: var(--fs-button-hover-background-color) !important;
|
|
17
|
+
color: var(--fs-button-hover-color) !important;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
&:not(.fs-button--disabled):active {
|
|
21
|
+
background-color: var(--fs-button-active-background-color) !important;
|
|
22
|
+
border-color: var(--fs-button-active-border-color) !important;
|
|
23
|
+
color: var(--fs-button-active-color) !important;
|
|
17
24
|
}
|
|
18
25
|
|
|
19
26
|
@include web {
|
|
@@ -28,18 +35,12 @@
|
|
|
28
35
|
}
|
|
29
36
|
|
|
30
37
|
.fs-button-icon {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
color: var(--fs-button-light-text) !important;
|
|
34
|
-
cursor: pointer !important;
|
|
38
|
+
transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
|
39
|
+
color: var(--fs-button-color) !important;
|
|
35
40
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
&:active {
|
|
41
|
-
color: var(--fs-button-light-text) !important;
|
|
42
|
-
}
|
|
41
|
+
&:not(.fs-button--disabled):hover {
|
|
42
|
+
color: var(--fs-button-hover-color) !important;
|
|
43
|
+
cursor: pointer !important;
|
|
43
44
|
}
|
|
44
45
|
|
|
45
46
|
@include web {
|
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
.fs-checkbox {
|
|
2
2
|
cursor: var(--fs-checkbox-cursor) !important;
|
|
3
|
-
color: var(--fs-checkbox-
|
|
3
|
+
color: var(--fs-checkbox-checkbox-color) !important;
|
|
4
4
|
}
|
|
5
5
|
|
|
6
6
|
.fs-checkbox-label {
|
|
7
7
|
cursor: var(--fs-checkbox-cursor) !important;
|
|
8
|
-
color: var(--fs-checkbox-
|
|
9
|
-
height: 20px !important;
|
|
8
|
+
color: var(--fs-checkbox-color) !important;
|
|
10
9
|
user-select: none;
|
|
11
10
|
}
|
|
12
11
|
|
|
13
12
|
.fs-checkbox-description {
|
|
14
|
-
color: var(--fs-checkbox-
|
|
13
|
+
color: var(--fs-checkbox-color) !important;
|
|
15
14
|
}
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
.fs-password-field-icon {
|
|
2
|
+
opacity: 1 !important;
|
|
2
3
|
cursor: var(--fs-password-field-cursor) !important;
|
|
3
4
|
color: var(--fs-password-field-base-text) !important;
|
|
4
|
-
|
|
5
|
+
transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
|
6
|
+
|
|
7
|
+
&:hover {
|
|
8
|
+
color: var(--fs-password-field-dark-text) !important;
|
|
9
|
+
}
|
|
5
10
|
}
|
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
.fs-radio {
|
|
2
2
|
cursor: var(--fs-radio-cursor) !important;
|
|
3
|
-
color: var(--fs-radio-
|
|
3
|
+
color: var(--fs-radio-radio-color) !important;
|
|
4
4
|
}
|
|
5
5
|
|
|
6
6
|
.fs-radio-label {
|
|
7
7
|
cursor: var(--fs-radio-cursor) !important;
|
|
8
|
-
color: var(--fs-radio-
|
|
9
|
-
height: 20px !important;
|
|
8
|
+
color: var(--fs-radio-color) !important;
|
|
10
9
|
user-select: none;
|
|
11
10
|
}
|
|
12
11
|
|
|
13
12
|
.fs-radio-description {
|
|
14
|
-
color: var(--fs-radio-
|
|
13
|
+
color: var(--fs-radio-color) !important;
|
|
15
14
|
}
|
|
@@ -29,23 +29,23 @@
|
|
|
29
29
|
|
|
30
30
|
.fs-switch-label {
|
|
31
31
|
cursor: var(--fs-switch-cursor) !important;
|
|
32
|
-
color: var(--fs-switch-
|
|
32
|
+
color: var(--fs-switch-color) !important;
|
|
33
33
|
user-select: none;
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
.fs-switch-description {
|
|
37
|
-
color: var(--fs-switch-
|
|
37
|
+
color: var(--fs-switch-color) !important;
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
.v-switch__track {
|
|
41
41
|
width: 40px !important;
|
|
42
42
|
height: 24px !important;
|
|
43
|
-
background-color: var(--fs-switch-
|
|
43
|
+
background-color: var(--fs-switch-track-color) !important;
|
|
44
44
|
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
.v-switch__thumb {
|
|
48
48
|
width: 16px !important;
|
|
49
49
|
height: 16px !important;
|
|
50
|
-
background-color: var(--fs-switch-
|
|
50
|
+
background-color: var(--fs-switch-thumb-color) !important;
|
|
51
51
|
}
|
|
@@ -13,16 +13,16 @@
|
|
|
13
13
|
|
|
14
14
|
.fs-tab {
|
|
15
15
|
padding: 0 16px;
|
|
16
|
-
border-bottom: 1px solid var(--fs-group-
|
|
17
|
-
color: var(--fs-group-
|
|
16
|
+
border-bottom: 1px solid var(--fs-group-color) !important;
|
|
17
|
+
color: var(--fs-group-color) !important;
|
|
18
18
|
|
|
19
19
|
& .fs-tab-label {
|
|
20
20
|
@extend .text-button;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
&:hover {
|
|
24
|
-
border-bottom: 1px solid var(--fs-group-
|
|
25
|
-
color: var(--fs-group-
|
|
24
|
+
border-bottom: 1px solid var(--fs-group-hover-color) !important;
|
|
25
|
+
color: var(--fs-group-hover-color) !important;
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
@include web {
|
|
@@ -35,8 +35,8 @@
|
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
.fs-tab-active {
|
|
38
|
-
background-color: var(--fs-group-
|
|
39
|
-
color: var(--fs-group-
|
|
38
|
+
background-color: var(--fs-group-hover-background-color) !important;
|
|
39
|
+
color: var(--fs-group-hover-color) !important;
|
|
40
40
|
border-bottom: 0 !important;
|
|
41
41
|
|
|
42
42
|
&:hover {
|
|
@@ -47,8 +47,8 @@
|
|
|
47
47
|
.fs-tab-tag {
|
|
48
48
|
padding: 0 8px;
|
|
49
49
|
border-radius: 4px;
|
|
50
|
-
background-color: var(--fs-
|
|
51
|
-
color: var(--fs-
|
|
50
|
+
background-color: var(--fs-tab-tag-background-color);
|
|
51
|
+
color: var(--fs-tab-tag-color);
|
|
52
52
|
|
|
53
53
|
@include web {
|
|
54
54
|
min-width: 28px;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
.fs-tag {
|
|
2
2
|
padding: 0 8px !important;
|
|
3
3
|
border-radius: 2px !important;
|
|
4
|
-
background-color: var(--fs-tag-
|
|
5
|
-
color: var(--fs-tag-
|
|
4
|
+
background-color: var(--fs-tag-background-color) !important;
|
|
5
|
+
color: var(--fs-tag-color) !important;
|
|
6
6
|
|
|
7
7
|
@include web {
|
|
8
8
|
height: 28px !important;
|
|
@@ -18,17 +18,17 @@
|
|
|
18
18
|
margin: 4px 0 !important;
|
|
19
19
|
border-radius: 2px !important;
|
|
20
20
|
box-shadow: none !important;
|
|
21
|
-
background-color: var(--fs-tag-
|
|
22
|
-
color: var(--fs-tag-
|
|
21
|
+
background-color: var(--fs-tag-background-color) !important;
|
|
22
|
+
color: var(--fs-tag-color) !important;
|
|
23
23
|
|
|
24
24
|
&:hover {
|
|
25
|
-
background-color: var(--fs-tag-
|
|
26
|
-
color: var(--fs-tag-
|
|
25
|
+
background-color: var(--fs-tag-hover-background-color) !important;
|
|
26
|
+
color: var(--fs-tag-hover-color) !important;
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
&:active {
|
|
30
|
-
background-color: var(--fs-tag-
|
|
31
|
-
color: var(--fs-tag-
|
|
30
|
+
background-color: var(--fs-tag-active-background-color) !important;
|
|
31
|
+
color: var(--fs-tag-active-color) !important;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
@include web {
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
.fs-tag-field-icon {
|
|
2
|
+
opacity: 1 !important;
|
|
3
|
+
cursor: var(--fs-tag-field-cursor) !important;
|
|
4
|
+
color: var(--fs-tag-field-base-text) !important;
|
|
5
|
+
transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
|
6
|
+
|
|
7
|
+
&:hover {
|
|
8
|
+
color: var(--fs-tag-field-dark-text) !important;
|
|
9
|
+
}
|
|
10
|
+
}
|
|
@@ -1,14 +1,20 @@
|
|
|
1
1
|
.fs-text-field {
|
|
2
|
-
|
|
3
|
-
border-radius: 4px !important;
|
|
4
|
-
padding: 0 16px !important;
|
|
2
|
+
padding: 0px !important;
|
|
5
3
|
width: 100%;
|
|
6
4
|
|
|
7
|
-
&:focus-within {
|
|
8
|
-
border-color: var(--fs-text-field-dark-color) !important;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
5
|
& > .v-input__control > .v-field {
|
|
6
|
+
border: 1px solid var(--fs-text-field-border-color) !important;
|
|
7
|
+
border-radius: 4px !important;
|
|
8
|
+
padding: 0 16px !important;
|
|
9
|
+
|
|
10
|
+
&--error {
|
|
11
|
+
border-color: var(--fs-text-field-error-border-color) !important;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
&:not(.v-field--error):focus-within {
|
|
15
|
+
border-color: var(--fs-text-field-active-border-color) !important;
|
|
16
|
+
}
|
|
17
|
+
|
|
12
18
|
& > .v-field__outline {
|
|
13
19
|
display: none;
|
|
14
20
|
}
|
|
@@ -18,25 +24,30 @@
|
|
|
18
24
|
|
|
19
25
|
padding-inline: 0 !important;
|
|
20
26
|
cursor: var(--fs-text-field-cursor) !important;
|
|
21
|
-
color: var(--fs-text-field-
|
|
27
|
+
color: var(--fs-text-field-color);
|
|
22
28
|
|
|
23
29
|
@include web {
|
|
24
|
-
min-height:
|
|
25
|
-
height:
|
|
30
|
+
min-height: 46px !important;
|
|
31
|
+
height: 46px !important;
|
|
26
32
|
}
|
|
27
33
|
|
|
28
34
|
@include mobile {
|
|
29
|
-
min-height:
|
|
30
|
-
height:
|
|
35
|
+
min-height: 34px !important;
|
|
36
|
+
height: 34px !important;
|
|
31
37
|
}
|
|
32
38
|
}
|
|
33
39
|
}
|
|
34
40
|
}
|
|
35
41
|
|
|
36
42
|
.fs-text-field-label {
|
|
37
|
-
color: var(--fs-text-field-
|
|
43
|
+
color: var(--fs-text-field-color);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.fs-text-field-messages {
|
|
47
|
+
align-self: stretch;
|
|
48
|
+
color: var(--fs-text-field-error-color);
|
|
38
49
|
}
|
|
39
50
|
|
|
40
51
|
.fs-text-field-description {
|
|
41
|
-
color: var(--fs-text-field-
|
|
52
|
+
color: var(--fs-text-field-color);
|
|
42
53
|
}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
@import "fs_button.scss";
|
|
3
3
|
@import "fs_checkbox.scss";
|
|
4
4
|
@import "fs_col.scss";
|
|
5
|
+
@import "fs_color.scss";
|
|
5
6
|
@import "fs_fade_out.scss";
|
|
6
7
|
@import "fs_icon.scss";
|
|
7
8
|
@import "fs_password_field.scss";
|
|
@@ -11,5 +12,7 @@
|
|
|
11
12
|
@import "fs_switch.scss";
|
|
12
13
|
@import "fs_tag.scss";
|
|
13
14
|
@import "fs_tabs.scss";
|
|
15
|
+
@import "fs_tag_field.scss";
|
|
14
16
|
@import "fs_text_field.scss";
|
|
17
|
+
@import "fs_text.scss";
|
|
15
18
|
@import "fs_wrap_group.scss";
|
|
@@ -8,6 +8,15 @@
|
|
|
8
8
|
display: none;
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
+
// Margin with prepend / append downgraded to default gap
|
|
12
|
+
.v-input > .v-input__prepend {
|
|
13
|
+
margin-inline-end: 8px !important;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.v-input > .v-input__append {
|
|
17
|
+
margin-inline-start: 8px !important;
|
|
18
|
+
}
|
|
19
|
+
|
|
11
20
|
// No up / down buttons in input field of type number
|
|
12
21
|
input[type=number] {
|
|
13
22
|
-moz-appearance: textfield;
|
|
@@ -31,7 +40,7 @@ input[type=number]::-webkit-outer-spin-button {
|
|
|
31
40
|
min-width: 24px !important;
|
|
32
41
|
width: 24px !important;
|
|
33
42
|
flex: 1 1 0 !important;
|
|
34
|
-
color: var(--fs-group-
|
|
43
|
+
color: var(--fs-group-color);
|
|
35
44
|
|
|
36
45
|
@include touchscreen {
|
|
37
46
|
display: none !important;
|
|
@@ -41,14 +50,14 @@ input[type=number]::-webkit-outer-spin-button {
|
|
|
41
50
|
// Light background color & dark text color on arrows when hovered
|
|
42
51
|
.v-slide-group__prev:hover,
|
|
43
52
|
.v-slide-group__next:hover {
|
|
44
|
-
background-color: var(--fs-group-
|
|
45
|
-
color: var(--fs-group-
|
|
53
|
+
background-color: var(--fs-group-hover-background-color);
|
|
54
|
+
color: var(--fs-group-hover-color);
|
|
46
55
|
}
|
|
47
56
|
|
|
48
57
|
// Light text color on arrows when disabled
|
|
49
58
|
.v-slide-group__prev--disabled,
|
|
50
59
|
.v-slide-group__next--disabled {
|
|
51
|
-
color: var(--fs-group-
|
|
60
|
+
color: var(--fs-group-disabled-color) !important;
|
|
52
61
|
}
|
|
53
62
|
|
|
54
63
|
/***************************************************************************/
|
package/themes/default.ts
CHANGED
|
@@ -14,11 +14,11 @@ export const DefaultTheme: ThemeDefinition = {
|
|
|
14
14
|
dark: false,
|
|
15
15
|
colors: {
|
|
16
16
|
"background": "#F9F9F9",
|
|
17
|
-
"light" : "#
|
|
18
|
-
"dark" : "#
|
|
19
|
-
"primary" : "#
|
|
20
|
-
"success" : "#
|
|
21
|
-
"warning" : "#
|
|
22
|
-
"error" : "#
|
|
17
|
+
"light" : "#E1E2E3", // hsv(216, 1, 89)
|
|
18
|
+
"dark" : "#3F4040", // hsv(211, 1, 25)
|
|
19
|
+
"primary" : "#0058E6", // hsv(217, 100, 90)
|
|
20
|
+
"success" : "#6DE038", // hsv(101, 75, 88)
|
|
21
|
+
"warning" : "#E6A52E", // hsv(39, 80, 90)
|
|
22
|
+
"error" : "#E01212" // hsv(0, 92, 88)
|
|
23
23
|
}
|
|
24
24
|
}
|