@softheon/armature 17.23.2 → 17.24.1

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.
@@ -85,6 +85,16 @@ mat-form-field {
85
85
  }
86
86
  }
87
87
 
88
+ fieldset {
89
+ border: none !important;
90
+ padding: 0px !important;
91
+ margin: 0px !important;
92
+
93
+ legend {
94
+ padding: 0 !important;
95
+ }
96
+ }
97
+
88
98
  .ls-half {
89
99
  letter-spacing: 0.5px !important;
90
100
  }
@@ -4,119 +4,136 @@
4
4
 
5
5
  mat-button-toggle-group {
6
6
  &.sof-toggle-group {
7
- height: 48px !important;
7
+ display: contents !important;
8
8
 
9
9
  &.mat-button-toggle-group.mat-button-toggle-group-appearance-standard {
10
10
  border: none !important;
11
11
  border-radius: 0px !important;
12
12
  }
13
13
 
14
- &.full-width {
15
- .toggle-left {
16
- width: 100% !important;
14
+ * {
15
+ box-sizing: border-box !important;
16
+ }
17
+
18
+ .mat-button-toggle {
19
+ height: 40px !important;
20
+
21
+ &:focus-within {
22
+ outline: 3px solid !important;
23
+ outline-offset: 2px !important;
24
+ outline-color: mat.get-color-from-palette(theme.$arm-primary, 300) !important;
17
25
  }
18
26
 
19
- .toggle-middle {
20
- width: 100% !important;
27
+ &.toggle-left {
28
+ border-top-width: 2px !important;
29
+ border-bottom-width: 2px !important;
30
+ border-left-width: 2px !important;
31
+ border-right-width: 1px !important;
32
+ border-radius: 8px 0px 0px 8px !important;
21
33
  }
22
34
 
23
- .toggle-right {
24
- width: 100% !important;
35
+ &.toggle-middle {
36
+ border-top-width: 2px !important;
37
+ border-bottom-width: 2px !important;
38
+ border-left-width: 1px !important;
39
+ border-right-width: 1px !important;
40
+ border-radius: 0px 0px 0px 0px !important;
25
41
  }
26
- }
27
42
 
28
- .mat-button-toggle-label-content {
29
- text-transform: uppercase !important;
30
- font-family: "Poppins" !important;
31
- font-style: normal !important;
32
- font-weight: 600 !important;
33
- font-size: 16px !important;
34
- line-height: 24px !important;
35
- letter-spacing: 0.05em !important;
36
- text-align: center !important;
37
- color: vars.$text-high-emphasis !important;
38
-
39
- // remove selected check indicator
40
- .mat-pseudo-checkbox {
41
- display: none !important;
43
+ &.toggle-right {
44
+ border-top-width: 2px !important;
45
+ border-bottom-width: 2px !important;
46
+ border-left-width: 1px !important;
47
+ border-right-width: 2px !important;
48
+ border-radius: 0px 8px 8px 0px !important;
42
49
  }
43
- }
44
50
 
45
- .mat-button-toggle-button {
46
- height: 100% !important;
47
- }
51
+ &.toggle-left,
52
+ &.toggle-middle,
53
+ &.toggle-right {
54
+ border-style: solid !important;
55
+ border-color: mat.get-color-from-palette(theme.$arm-primary, 500) !important;
56
+
57
+ .mat-button-toggle-button {
58
+ height: 100% !important;
59
+ padding: 0 24px !important;
60
+ min-width: 77px;
61
+
62
+ .mat-button-toggle-label-content {
63
+ text-transform: capitalize !important;
64
+ font-family: "Poppins" !important;
65
+ font-weight: 600 !important;
66
+ font-size: 16px !important;
67
+ line-height: 24px !important;
68
+ color: vars.$text-high-emphasis !important;
69
+ padding: 0 !important;
70
+ }
71
+ }
72
+
73
+ &:hover {
74
+ background-color: mat.get-color-from-palette(theme.$arm-primary, A100) !important;
75
+ }
76
+ }
48
77
 
49
- .mat-button-toggle-checked {
50
- background-color: mat.get-color-from-palette(theme.$arm-primary, 100) !important;
51
- }
78
+ &.mat-button-toggle-checked {
79
+ background-color: mat.get-color-from-palette(theme.$arm-primary, 500) !important;
52
80
 
53
- .toggle-left {
54
- border-top: 2px solid mat.get-color-from-palette(theme.$arm-primary, 500) !important;
55
- border-bottom: 2px solid mat.get-color-from-palette(theme.$arm-primary, 500) !important;
56
- border-left: 2px solid mat.get-color-from-palette(theme.$arm-primary, 500) !important;
57
- border-right: 1px solid mat.get-color-from-palette(theme.$arm-primary, 500) !important;
58
- border-radius: 6px 0px 0px 6px !important;
59
- width: 120px !important;
60
- }
81
+ &:hover {
82
+ background-color: mat.get-color-from-palette(theme.$arm-primary, 500) !important;
83
+ }
61
84
 
62
- .toggle-middle {
63
- border-top: 2px solid mat.get-color-from-palette(theme.$arm-primary, 500) !important;
64
- border-bottom: 2px solid mat.get-color-from-palette(theme.$arm-primary, 500) !important;
65
- border-left: 1px solid mat.get-color-from-palette(theme.$arm-primary, 500) !important;
66
- border-right: 1px solid mat.get-color-from-palette(theme.$arm-primary, 500) !important;
67
- border-radius: 0px 0px 0px 0px !important;
68
- width: 120px !important;
69
- }
85
+ .mat-button-toggle-button {
86
+ .mat-button-toggle-label-content {
87
+ color: vars.$text-inverse !important;
88
+ }
89
+ }
90
+ }
70
91
 
71
- .toggle-right {
72
- border-top: 2px solid mat.get-color-from-palette(theme.$arm-primary, 500) !important;
73
- border-bottom: 2px solid mat.get-color-from-palette(theme.$arm-primary, 500) !important;
74
- border-left: 1px solid mat.get-color-from-palette(theme.$arm-primary, 500) !important;
75
- border-right: 2px solid mat.get-color-from-palette(theme.$arm-primary, 500) !important;
76
- border-radius: 0px 6px 6px 0px !important;
77
- width: 120px !important;
92
+ .mat-button-toggle-focus-overlay {
93
+ opacity: 0 !important;
94
+ }
78
95
  }
79
96
 
80
97
  .mat-button-toggle-disabled {
81
- &.mat-button-toggle-checked {
82
- background-color: mat.get-color-from-palette(theme.$arm-neutral, 200) !important;
83
- }
84
98
 
85
- &.toggle-left {
86
- border-top: 2px solid mat.get-color-from-palette(theme.$arm-neutral, 400) !important;
87
- border-bottom: 2px solid mat.get-color-from-palette(theme.$arm-neutral, 400) !important;
88
- border-left: 2px solid mat.get-color-from-palette(theme.$arm-neutral, 400) !important;
89
- border-right: 1px solid mat.get-color-from-palette(theme.$arm-neutral, 400) !important;
90
- border-radius: 6px 0px 0px 6px !important;
91
- }
99
+ &.toggle-left, &.toggle-middle, &.toggle-right, &.mat-button-toggle-checked {
100
+ border-color: mat.get-color-from-palette(theme.$arm-neutral, 300) !important;
92
101
 
93
- &.toggle-middle {
94
- border-top: 2px solid mat.get-color-from-palette(theme.$arm-neutral, 400) !important;
95
- border-bottom: 2px solid mat.get-color-from-palette(theme.$arm-neutral, 400) !important;
96
- border-left: 1px solid mat.get-color-from-palette(theme.$arm-neutral, 400) !important;
97
- border-right: 1px solid mat.get-color-from-palette(theme.$arm-neutral, 400) !important;
98
- border-radius: 0px 0px 0px 0px !important;
102
+ &:hover {
103
+ background-color: transparent !important;
104
+ }
105
+
106
+ .mat-button-toggle-button {
107
+ .mat-button-toggle-label-content {
108
+ color: vars.$text-low-emphasis !important;
109
+ }
110
+ }
99
111
  }
100
112
 
101
- &.toggle-right {
102
- border-top: 2px solid mat.get-color-from-palette(theme.$arm-neutral, 400) !important;
103
- border-bottom: 2px solid mat.get-color-from-palette(theme.$arm-neutral, 400) !important;
104
- border-left: 1px solid mat.get-color-from-palette(theme.$arm-neutral, 400) !important;
105
- border-right: 2px solid mat.get-color-from-palette(theme.$arm-neutral, 400) !important;
106
- border-radius: 0px 6px 6px 0px !important;
113
+ &.mat-button-toggle-checked {
114
+ background-color: mat.get-color-from-palette(theme.$arm-neutral, A100) !important;
115
+
116
+ &:hover {
117
+ background-color: mat.get-color-from-palette(theme.$arm-neutral, A100) !important;
118
+ }
107
119
  }
108
120
  }
109
- }
110
121
 
111
- &.sof-toggle-group[size="small"] {
112
- height: 36px !important;
113
- }
122
+ .error {
114
123
 
115
- &.sof-toggle-group[size="medium"] {
116
- height: 48px !important;
117
- }
124
+ &:focus-within {
125
+ outline: 3px solid !important;
126
+ outline-offset: 2px !important;
127
+ outline-color: mat.get-color-from-palette(theme.$arm-error, 300) !important;
128
+ }
129
+
130
+ &.toggle-left, &.toggle-middle, &.toggle-right, &.mat-button-toggle-checked {
131
+ border-color: mat.get-color-from-palette(theme.$arm-error, 500) !important;
118
132
 
119
- &.sof-toggle-group[size="large"] {
120
- height: 56px !important;
133
+ &:hover {
134
+ background-color: mat.get-color-from-palette(theme.$arm-error, A100) !important;
135
+ }
136
+ }
137
+ }
121
138
  }
122
139
  }