2018-08-06 15:30:43 +00:00
|
|
|
// By using CSS variables, we can switch the spacing rhythm using a single media query.
|
|
|
|
:root {
|
2018-08-08 22:11:54 +00:00
|
|
|
--large-gap: 40px;
|
2018-08-06 15:30:43 +00:00
|
|
|
--main-gap: 24px;
|
|
|
|
}
|
2020-07-17 00:11:42 +00:00
|
|
|
@media ( max-width: 960px ) {
|
2018-08-08 22:11:54 +00:00
|
|
|
:root {
|
|
|
|
--large-gap: 24px;
|
|
|
|
}
|
|
|
|
}
|
2020-07-17 00:11:42 +00:00
|
|
|
@media ( max-width: 782px ) {
|
2018-08-06 15:30:43 +00:00
|
|
|
:root {
|
2018-08-08 22:11:54 +00:00
|
|
|
--large-gap: 16px;
|
2018-08-06 15:30:43 +00:00
|
|
|
--main-gap: 16px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Set up animation
|
|
|
|
@keyframes loading-fade {
|
|
|
|
0% {
|
|
|
|
opacity: 0.7;
|
|
|
|
}
|
|
|
|
50% {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
opacity: 0.7;
|
|
|
|
}
|
|
|
|
}
|
2018-08-13 15:25:32 +00:00
|
|
|
|
|
|
|
.woocommerce-layout {
|
2019-12-13 17:35:29 +00:00
|
|
|
select:hover {
|
2020-07-17 00:11:42 +00:00
|
|
|
color: $gray-900;
|
2019-12-13 17:35:29 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
select.components-select-control__input {
|
|
|
|
max-width: 100%;
|
2020-02-18 17:57:53 +00:00
|
|
|
line-height: 1;
|
2019-12-13 17:35:29 +00:00
|
|
|
}
|
2018-08-13 15:25:32 +00:00
|
|
|
}
|
2019-10-28 01:47:29 +00:00
|
|
|
|
|
|
|
body.woocommerce-page {
|
2020-06-10 01:55:06 +00:00
|
|
|
.components-button.is-primary {
|
2019-10-28 01:47:29 +00:00
|
|
|
color: $studio-white;
|
|
|
|
|
2019-12-31 02:47:41 +00:00
|
|
|
&:not(:disabled) {
|
|
|
|
&:hover,
|
|
|
|
&:active,
|
|
|
|
&:focus {
|
|
|
|
color: $studio-white;
|
|
|
|
}
|
2019-10-28 01:47:29 +00:00
|
|
|
}
|
|
|
|
}
|
2019-11-12 01:17:36 +00:00
|
|
|
|
|
|
|
.components-snackbar .components-button.is-tertiary {
|
|
|
|
color: $studio-white;
|
|
|
|
|
2020-06-10 01:55:06 +00:00
|
|
|
&:not(:disabled):not([aria-disabled='true']):hover {
|
2019-11-12 01:17:36 +00:00
|
|
|
color: $studio-white;
|
|
|
|
}
|
|
|
|
}
|
2019-10-28 01:47:29 +00:00
|
|
|
}
|