69 lines
1003 B
SCSS
69 lines
1003 B
SCSS
/** @format */
|
|
|
|
// By using CSS variables, we can switch the spacing rhythm using a single media query.
|
|
:root {
|
|
--large-gap: 40px;
|
|
--main-gap: 24px;
|
|
}
|
|
@media (max-width: 960px) {
|
|
:root {
|
|
--large-gap: 24px;
|
|
}
|
|
}
|
|
@media (max-width: 782px) {
|
|
:root {
|
|
--large-gap: 16px;
|
|
--main-gap: 16px;
|
|
}
|
|
}
|
|
|
|
// Set up animation
|
|
@keyframes loading-fade {
|
|
0% {
|
|
opacity: 0.7;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
.woocommerce-layout {
|
|
a:link,
|
|
a:visited,
|
|
.components-button.is-link {
|
|
color: $woocommerce-500;
|
|
}
|
|
|
|
a.components-button.is-button {
|
|
color: $white;
|
|
}
|
|
|
|
a:hover,
|
|
a:active,
|
|
a:focus,
|
|
.components-button.is-link:hover,
|
|
.components-button.is-link:active,
|
|
.components-button.is-link:focus {
|
|
color: $woocommerce-400;
|
|
}
|
|
|
|
a:focus {
|
|
box-shadow: 0 0 0 1px $woocommerce-300, 0 0 2px 1px rgba($woocommerce-300, 0.8);
|
|
}
|
|
|
|
.components-button.is-button.is-primary {
|
|
color: $white;
|
|
|
|
&:not(:disabled) {
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
color: $white;
|
|
}
|
|
}
|
|
}
|
|
}
|