podo-ui 0.7.4 → 0.7.5

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 (2) hide show
  1. package/package.json +1 -1
  2. package/scss/button/class.scss +75 -53
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "podo-ui",
3
- "version": "0.7.4",
3
+ "version": "0.7.5",
4
4
  "type": "module",
5
5
  "author": "hada0127 <work@tarucy.net>",
6
6
  "license": "MIT",
package/scss/button/class.scss CHANGED
@@ -8,6 +8,7 @@
8
8
  color: color($type + '-pressed');
9
9
  }
10
10
  }
11
+
11
12
  button {
12
13
  color: color('default-reverse');
13
14
  background-color: color('default');
@@ -24,35 +25,13 @@ button {
24
25
  outline: 4px solid color('default-outline');
25
26
  }
26
27
 
27
- &.default-fill {
28
+ // default fill (works with just "fill" class or "default fill")
29
+ &.fill:not(.primary):not(.default-deep):not(.info):not(.link):not(.success):not(.warning):not(.danger) {
28
30
  color: color('default-reverse');
29
31
  background-color: color('default-fill');
30
32
  border: 1px solid color('border');
31
33
  @include button-status('default');
32
- }
33
- &.default-border,
34
- &.default-text {
35
- color: color('default');
36
- @include button-status('default');
37
- }
38
- &.default-fill,
39
- &.default-border {
40
- outline: none;
41
- &:hover {
42
- border: 1px solid color('default-hover');
43
- }
44
- &:active {
45
- border: 1px solid color('default-pressed');
46
- }
47
- &:focus {
48
- border: 1px solid color('default-focus');
49
- }
50
- }
51
- &.default-border {
52
- color: color('default-reverse');
53
- background-color: transparent;
54
34
 
55
- border: 1px solid color('border');
56
35
  &:hover {
57
36
  color: color('default-reverse');
58
37
  border: 1px solid color('border-hover');
@@ -65,8 +44,13 @@ button {
65
44
  border: 1px solid color('border-focus');
66
45
  }
67
46
  }
68
- &.default-fill {
47
+
48
+ // default border (works with just "border" class or "default border")
49
+ &.border:not(.primary):not(.default-deep):not(.info):not(.link):not(.success):not(.warning):not(.danger) {
69
50
  color: color('default-reverse');
51
+ background-color: transparent;
52
+ border: 1px solid color('border');
53
+ @include button-status('default');
70
54
 
71
55
  &:hover {
72
56
  color: color('default-reverse');
@@ -80,11 +64,13 @@ button {
80
64
  border: 1px solid color('border-focus');
81
65
  }
82
66
  }
83
- &.default-text {
67
+
68
+ // default text (works with just "text" class or "default text")
69
+ &.text:not(.primary):not(.default-deep):not(.info):not(.link):not(.success):not(.warning):not(.danger) {
84
70
  color: color('text-action');
85
71
  background-color: transparent;
86
-
87
72
  border: none;
73
+
88
74
  &:hover {
89
75
  color: color('text-action-hover');
90
76
  }
@@ -96,34 +82,37 @@ button {
96
82
  }
97
83
  }
98
84
 
85
+ // disabled states
99
86
  &:disabled {
100
87
  color: color('text-action-disabled');
101
88
  background-color: color('bg-disabled');
102
89
  border: 1px solid color('bg-disabled');
103
-
104
90
  cursor: not-allowed;
105
91
  }
106
- &[class$='-border']:disabled {
92
+
93
+ &.border:disabled {
107
94
  color: color('text-action-disabled');
95
+ background-color: transparent;
108
96
  border: 1px solid color('border-disabled');
109
-
110
97
  cursor: not-allowed;
111
98
  }
112
- &[class$='-fill']:disabled {
99
+
100
+ &.fill:disabled {
113
101
  color: color('text-action-disabled');
114
102
  background-color: color('bg-disabled');
115
103
  border: 1px solid color('border-disabled');
116
-
117
104
  cursor: not-allowed;
118
105
  }
119
106
 
120
- &[class$='-text']:disabled {
107
+ &.text:disabled {
121
108
  color: color('text-action-disabled');
109
+ background-color: transparent;
122
110
  border: none;
123
111
  outline: none;
124
112
  cursor: not-allowed;
125
113
  }
126
114
 
115
+ // text alignment
127
116
  &.text-left {
128
117
  justify-content: flex-start;
129
118
  }
@@ -132,70 +121,103 @@ button {
132
121
  justify-content: flex-end;
133
122
  }
134
123
  }
124
+
125
+ // color variants
135
126
  @each $type in (primary, default-deep, info, link, success, warning, danger) {
136
127
  button:not(:disabled).#{$type} {
137
128
  color: color($type + '-reverse');
138
129
  background-color: color($type);
139
130
  border: 1px solid color($type);
140
131
  outline: none;
132
+
141
133
  &:hover {
142
134
  background-color: color($type + '-hover');
143
135
  }
144
136
  &:active {
145
137
  background-color: color($type + '-pressed');
146
138
  }
147
-
148
139
  &:focus-visible:not(:disabled) {
149
140
  outline: 4px solid color($type + '-outline');
150
141
  }
151
142
 
152
- &-text {
153
- border: none;
154
- &:focus-visible:not(:disabled) {
155
- outline: 4px solid color($type + '-outline');
156
- }
157
- }
158
- &-fill {
143
+ // fill style
144
+ &.fill {
159
145
  color: color($type);
160
146
  background-color: color($type + '-fill');
161
147
  border: 1px solid color($type);
162
148
  @include button-status($type);
163
- &:focus-visible:not(:disabled) {
164
- outline: 4px solid color($type + '-outline');
149
+
150
+ &:hover {
151
+ border: 1px solid color($type + '-hover');
152
+ }
153
+ &:active {
154
+ border: 1px solid color($type + '-pressed');
165
155
  }
166
- }
167
- &-border {
168
156
  &:focus-visible:not(:disabled) {
169
157
  outline: 4px solid color($type + '-outline');
170
158
  }
171
159
  }
172
- &-border,
173
- &-text {
160
+
161
+ // border style
162
+ &.border {
174
163
  color: color($type);
175
164
  background-color: transparent;
165
+ border: 1px solid color($type);
176
166
  @include button-status($type);
177
- }
178
- &-fill,
179
- &-border {
167
+
180
168
  &:hover {
181
169
  border: 1px solid color($type + '-hover');
182
170
  }
183
171
  &:active {
184
172
  border: 1px solid color($type + '-pressed');
185
173
  }
174
+ &:focus-visible:not(:disabled) {
175
+ outline: 4px solid color($type + '-outline');
176
+ }
177
+ }
178
+
179
+ // text style
180
+ &.text {
181
+ color: color($type);
182
+ background-color: transparent;
183
+ border: none;
184
+ @include button-status($type);
185
+
186
+ &:focus-visible:not(:disabled) {
187
+ outline: 4px solid color($type + '-outline');
188
+ }
186
189
  }
187
190
  }
188
191
  }
192
+
193
+ // default-deep overrides
189
194
  button:not(:disabled).default-deep {
190
- &-border,
191
- &-fill {
195
+ // fill style - uses border color
196
+ &.fill {
192
197
  color: color('text-body');
193
198
  border: 1px solid color('border');
194
199
  &:hover {
195
200
  color: color('text-body');
201
+ border: 1px solid color('border-hover');
202
+ }
203
+ &:active {
204
+ border: 1px solid color('border-pressed');
205
+ }
206
+ }
207
+ // border style - uses default-deep color for border
208
+ &.border {
209
+ color: color('text-body');
210
+ border: 1px solid color('default-deep');
211
+ &:hover {
212
+ color: color('text-body');
213
+ border: 1px solid color('default-deep-hover');
214
+ }
215
+ &:active {
216
+ border: 1px solid color('default-deep-pressed');
196
217
  }
197
218
  }
198
- &-text {
219
+ // text style - no border
220
+ &.text {
199
221
  color: color('text-body');
200
222
  &:hover {
201
223
  color: color('text-body');