woocommerce/plugins/woocommerce-admin/client/stylesheets/shared/_global.scss

168 lines
2.9 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:not(.is-primary) {
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:not(.is-primary) {
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 {
color: $core-grey-dark-700;
border-color: $studio-woocommerce-purple-60;
box-shadow: 0 0 2px rgba($studio-woocommerce-purple-60, 0.8);
}
select:hover {
color: $core-grey-dark-700;
}
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;
background-color: $studio-white;
}
select.components-select-control__input {
max-width: 100%;
}
}
body.woocommerce-page {
.components-button.is-button.is-primary {
color: $studio-white;
&:hover {
color: $studio-white;
}
}
.components-snackbar .components-button.is-tertiary {
color: $studio-white;
&:not(:disabled):not([aria-disabled='true']):not(.is-default):hover {
color: $studio-white;
}
}
}