Skip to content

Commit a6bea3d

Browse files
wuda-iowuda-io
committed
refactor: reorder properties for better visibility
1 parent 940d1ca commit a6bea3d

19 files changed

+173
-297
lines changed

‎sass/components/_buttons.scss

Lines changed: 45 additions & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@
1010

1111
.btn, .btn-floating, .btn-large, .btn-small, .btn-flat {
1212
@include btn(
13-
var(--btn-height),
14-
var(--btn-border-radius),
15-
var(--btn-padding),
16-
var(--btn-padding),
17-
var(--btn-font-size)
13+
var(--btn-height),
14+
var(--btn-border-radius),
15+
var(--btn-padding),
16+
var(--btn-padding),
17+
var(--btn-font-size)
1818
);
1919
}
2020

@@ -76,102 +76,32 @@
7676

7777
//------------------ Hover
7878

79-
/*.btn.elevated:hover {
80-
@extend .z-depth-2;
81-
color: var(--md-sys-color-primary);
82-
background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%);
83-
}
84-
85-
.btn.filled:hover {
86-
@extend .z-depth-1;
87-
color: var(--md-sys-color-on-primary);
88-
background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 16%);
89-
}
90-
91-
.btn.tonal:hover {
92-
@extend .z-depth-1;
93-
color: var(--md-sys-color-on-secondary-container);
94-
background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%);
95-
}
96-
97-
.btn.outlined:hover {
98-
color: var(--md-sys-color-primary);
99-
background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 16%);
100-
}
101-
102-
.btn.text:hover {
103-
color: var(--md-sys-color-primary);
104-
background-color: color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent);
105-
}*/
106-
10779
//------------------ Focus
10880

109-
/*.btn:focus {
81+
// Floating button
82+
.btn-floating {
83+
// FIXES
84+
// width: unset;
85+
// padding: 16px !important;
86+
// padding-right: 24px !important; /* only with icon */
87+
// gap: 8px;
88+
width: $button-floating-size;
89+
height: $button-floating-size;
90+
color: var(--md-sys-color-on-primary-container);
11091
background-color: var(--md-sys-color-primary-container);
111-
}
112-
113-
.btn:focus.elevated {
92+
border-radius: $button-floating-radius;
93+
padding: 0;
94+
display: grid;
95+
grid-auto-flow: column;
96+
align-items: center;
97+
position: relative;
98+
overflow: hidden;
99+
z-index: 1;
114100
@extend .z-depth-1;
115-
color: var(--md-sys-color-primary);
116-
background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-primary) 20%);
117-
}
118-
119-
.btn:focus.filled {
120-
@extend .z-depth-0;
121-
color: var(--md-sys-color-on-primary);
122-
background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 20%);
123-
}
124-
125-
.btn:focus.tonal {
126-
@extend .z-depth-0;
127-
color: var(--md-sys-color-on-secondary-container);
128-
background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 20%);
129-
}
130-
131-
.btn:focus.outlined {
132-
color: var(--md-sys-color-primary);
133-
background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
134-
border: 1px solid var(--md-sys-color-primary);
135-
}
101+
transition: background-color .3s;
102+
cursor: pointer;
103+
vertical-align: middle;
136104

137-
.btn:focus.text {
138-
color: var(--md-sys-color-primary);
139-
background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
140-
}*/
141-
142-
// Focus with Keyboard
143-
/*.btn:focus-visible {
144-
&.filled,
145-
&.elevated,
146-
&.tonal,
147-
&.outlined,
148-
&.text {
149-
outline: 3px solid var(--md-sys-color-secondary);
150-
outline-offset: 2px;
151-
}
152-
}*/
153-
154-
//----------
155-
156-
// .btn-floating {
157-
// border-radius: 16px;
158-
// width: unset;
159-
// display: grid;
160-
// grid-auto-flow: column;
161-
// align-items: center;
162-
// padding: 16px !important;
163-
// padding-right: 24px !important; /* only with icon */
164-
// gap: 8px;
165-
// }
166-
// .btn-floating.btn-large {
167-
// width: unset;
168-
// }
169-
// .btn-large {
170-
// font-size: 14px;
171-
// }
172-
//-----
173-
// Floating button
174-
.btn-floating {
175105
&:hover {
176106
@extend .z-depth-1-half;
177107
background-color: color-mix(in srgb, var(--md-sys-color-primary-container), var(--md-sys-color-on-primary-container) 16%);
@@ -187,13 +117,12 @@
187117
}
188118

189119
&.btn-large {
190-
&.halfway-fab {
191-
bottom: -56px * 0.5;
192-
}
193-
194120
width: 56px;
195121
height: 56px;
196122
padding: 0;
123+
&.halfway-fab {
124+
bottom: -56px * 0.5;
125+
}
197126
// font-size:
198127
// i {
199128
// // line-height: 56px;
@@ -202,51 +131,28 @@
202131

203132
&.btn-small {
204133
--btn-small-height: calc(0.75 * var(--btn-height));
134+
width: var(--btn-small-height);
135+
height: var(--btn-small-height);
205136

206137
&.halfway-fab {
207138
bottom: calc(var(--btn-small-height) * -0.5);
208139
}
209-
210-
width: var(--btn-small-height);
211-
height: var(--btn-small-height);
212140
// i {
213141
// line-height: $button-floating-small-size;
214142
// }
215143
}
216144

217145
&.halfway-fab {
146+
position: absolute;
147+
right: 24px;
148+
bottom: -$button-floating-size * 0.5;
149+
218150
&.left {
219151
right: auto;
220152
left: 24px;
221153
}
222-
223-
position: absolute;
224-
right: 24px;
225-
bottom: -$button-floating-size * 0.5;
226154
}
227155

228-
// FIXES
229-
// width: unset;
230-
// padding: 16px !important;
231-
// padding-right: 24px !important; /* only with icon */
232-
// gap: 8px;
233-
width: $button-floating-size;
234-
height: $button-floating-size;
235-
color: var(--md-sys-color-on-primary-container);
236-
background-color: var(--md-sys-color-primary-container);
237-
border-radius: $button-floating-radius;
238-
padding: 0;
239-
display: grid;
240-
grid-auto-flow: column;
241-
align-items: center;
242-
position: relative;
243-
overflow: hidden;
244-
z-index: 1;
245-
@extend .z-depth-1;
246-
transition: background-color .3s;
247-
cursor: pointer;
248-
vertical-align: middle;
249-
250156
i {
251157
color: $button-floating-color;
252158
font-size: 1.6rem;
@@ -263,6 +169,13 @@ button.btn-floating {
263169

264170
// Fixed Action Button
265171
.fixed-action-btn {
172+
position: fixed;
173+
right: 23px;
174+
bottom: 23px;
175+
padding-top: 15px;
176+
margin-bottom: 0;
177+
z-index: 997;
178+
266179
&.active {
267180
ul {
268181
visibility: visible;
@@ -324,15 +237,15 @@ button.btn-floating {
324237
}
325238

326239
&.toolbar {
240+
padding: 0;
241+
height: 56px;
242+
327243
&.active {
328244
& > a i {
329245
opacity: 0;
330246
}
331247
}
332248

333-
padding: 0;
334-
height: 56px;
335-
336249
ul {
337250
display: flex;
338251
top: 0;
@@ -366,13 +279,6 @@ button.btn-floating {
366279
}
367280
}
368281

369-
position: fixed;
370-
right: 23px;
371-
bottom: 23px;
372-
padding-top: 15px;
373-
margin-bottom: 0;
374-
z-index: 997;
375-
376282
ul {
377283
left: 0;
378284
right: 0;

‎sass/components/_cards.scss

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,8 @@
6161

6262
// Horizontal Cards
6363
&.horizontal {
64+
display: flex;
65+
6466
&.small, &.medium, &.large {
6567
.card-image {
6668
height: 100%;
@@ -73,8 +75,6 @@
7375
}
7476
}
7577

76-
display: flex;
77-
7878
.card-image {
7979
max-width: 50%;
8080

@@ -171,15 +171,14 @@
171171
}
172172

173173
.card-action {
174-
&:last-child {
175-
border-radius: 0 0 2px 2px;
176-
}
177-
178-
// position: relative;
179174
padding: 0 1.6rem;
175+
// position: relative;
180176
// border-top: 1px solid var(--md-sys-color-outline-variant);
181177
// background-color: inherit;
182178

179+
&:last-child {
180+
border-radius: 0 0 2px 2px;
181+
}
183182
// Replaced card links with buttons (Accessibility, @see https://github.com/materializecss/materialize/issues/565)
184183
/*a {
185184
padding: 16px 24px;
@@ -197,11 +196,11 @@
197196

198197
a {
199198
@include btn(
200-
var(--btn-height),
201-
var(--btn-border-radius),
202-
var(--btn-padding),
203-
var(--btn-padding),
204-
var(--btn-font-size)
199+
var(--btn-height),
200+
var(--btn-border-radius),
201+
var(--btn-padding),
202+
var(--btn-padding),
203+
var(--btn-font-size)
205204
);
206205

207206
&:first-child {

‎sass/components/_carousel.scss

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,28 @@
11
.carousel {
22
--carousel-height: 400px;
33

4+
overflow: hidden;
5+
position: relative;
6+
width: 100%;
7+
height: var(--carousel-height);
8+
perspective: 500px;
9+
transform-style: preserve-3d;
10+
transform-origin: 0% 50%;
11+
412
&.carousel-slider {
513
top: 0;
614
left: 0;
715

816
.carousel-fixed-item {
9-
&.with-indicators {
10-
bottom: 68px;
11-
}
12-
1317
position: absolute;
1418
left: 0;
1519
right: 0;
1620
bottom: 20px;
1721
z-index: 1;
22+
23+
&.with-indicators {
24+
bottom: 68px;
25+
}
1826
}
1927

2028
.carousel-item {
@@ -37,14 +45,6 @@
3745
}
3846
}
3947

40-
overflow: hidden;
41-
position: relative;
42-
width: 100%;
43-
height: var(--carousel-height);
44-
perspective: 500px;
45-
transform-style: preserve-3d;
46-
transform-origin: 0% 50%;
47-
4848
.carousel-item {
4949
visibility: hidden;
5050
width: calc(var(--carousel-height) * 0.5);
@@ -61,7 +61,6 @@
6161
.indicators {
6262
padding-left: 0;
6363
list-style-type: none;
64-
6564
position: absolute;
6665
text-align: center;
6766
left: 0;
@@ -70,20 +69,19 @@
7069
margin: 0;
7170

7271
.indicator-item {
73-
&.active {
74-
background-color: var(--md-ref-palette-primary100);
75-
}
76-
7772
display: inline-block;
7873
position: relative;
7974
cursor: pointer;
8075
height: 8px;
8176
width: 8px;
8277
margin: 24px 4px;
8378
background-color: rgba(255, 255, 255, 0.45);
84-
8579
transition: background-color .3s;
8680
border-radius: 50%;
81+
82+
&.active {
83+
background-color: var(--md-ref-palette-primary100);
84+
}
8785
}
8886
}
8987

0 commit comments

Comments
 (0)