175 lines
3.3 KiB
SCSS
175 lines
3.3 KiB
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: $studio-pink;
|
|
}
|
|
|
|
a.components-button.is-button {
|
|
color: $studio-white;
|
|
}
|
|
|
|
a:hover,
|
|
a:active,
|
|
a:focus,
|
|
.components-button.is-link:hover,
|
|
.components-button.is-link:active,
|
|
.components-button.is-link:focus {
|
|
color: $studio-pink;
|
|
}
|
|
|
|
a:focus {
|
|
box-shadow: 0 0 0 1px $studio-pink, 0 0 2px 1px rgba($studio-pink, 0.8);
|
|
}
|
|
|
|
.components-button.is-button.is-primary {
|
|
color: $studio-white;
|
|
box-shadow: none;
|
|
|
|
&:not(:disabled) {
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
box-shadow: none;
|
|
color: $studio-white;
|
|
}
|
|
}
|
|
}
|
|
|
|
.components-button.is-button.is-default {
|
|
color: $gray-text;
|
|
border-color: $button-border;
|
|
background: $button;
|
|
box-shadow: none;
|
|
|
|
&:not(:disabled) {
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
color: $gray-text;
|
|
background: $button-hover;
|
|
border-color: $button-hover-border;
|
|
}
|
|
}
|
|
}
|
|
|
|
.components-button.is-default:disabled {
|
|
color: $button-disabled;
|
|
border-color: $button-disabled-border;
|
|
background: $button;
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
color: $button-disabled;
|
|
border-color: $button-disabled-border;
|
|
background: $button;
|
|
}
|
|
}
|
|
|
|
input:focus,
|
|
select:focus,
|
|
button:focus {
|
|
border-color: $studio-woocommerce-purple-60;
|
|
box-shadow: 0 0 2px rgba($studio-woocommerce-purple-60, 0.8);
|
|
}
|
|
|
|
input[type='checkbox'] {
|
|
border-radius: 3px;
|
|
}
|
|
|
|
input[type='checkbox'],
|
|
input[type='radio'] {
|
|
width: 18px;
|
|
height: 18px;
|
|
min-width: 18px;
|
|
border: 2px solid $studio-gray-50;
|
|
|
|
&:focus {
|
|
border-color: $studio-woocommerce-purple-60;
|
|
box-shadow: 0 0 0 1px $studio-woocommerce-purple-60,
|
|
0 0 2px 1px rgba($studio-woocommerce-purple-60, 0.8);
|
|
}
|
|
}
|
|
|
|
input[type='checkbox']:checked,
|
|
input[type='radio']:checked {
|
|
background-color: $studio-woocommerce-purple-60;
|
|
border-color: $studio-woocommerce-purple-60;
|
|
}
|
|
|
|
input[type='checkbox']:focus:checked {
|
|
border: 2px solid $studio-woocommerce-purple-60;
|
|
}
|
|
|
|
input[type='radio']:checked::before {
|
|
font-size: 18px;
|
|
margin-left: 4px;
|
|
margin-top: 4px;
|
|
background-color: $studio-white;
|
|
}
|
|
|
|
input[type='checkbox']:checked::before,
|
|
.muriel-checkbox input[type='checkbox']:checked::before {
|
|
font-size: 16px;
|
|
color: $studio-white;
|
|
content: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27#{url-friendly-colour($studio-white)}%27%2F%3E%3C%2Fsvg%3E');
|
|
margin-left: -2px;
|
|
margin-top: 0;
|
|
height: 18px;
|
|
width: 16px;
|
|
}
|
|
|
|
.muriel-checkbox input[type='checkbox']:checked::before {
|
|
margin-left: 0;
|
|
margin-top: 0;
|
|
position: absolute;
|
|
left: 1px;
|
|
top: 4px;
|
|
}
|
|
|
|
.muriel-input-text input {
|
|
min-height: auto;
|
|
}
|
|
|
|
.muriel-input-text.with-value input {
|
|
top: 24px;
|
|
}
|
|
|
|
.muriel-checkbox .components-base-control__field {
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
}
|