| Current Path : /opt/wp/plugins/jetpack/modules/calypsoify/gutenberg-styles/ |
Linux gator3171.hostgator.com 4.19.286-203.ELK.el7.x86_64 #1 SMP Wed Jun 14 04:33:55 CDT 2023 x86_64 |
| Current File : //opt/wp/plugins/jetpack/modules/calypsoify/gutenberg-styles/button.scss |
.components-button {
&.is-default {
color: $studio-gray-70;
border-color: $studio-gray-10;
background: $white;
box-shadow: none;
border-width: 1px 1px 2px;
&:hover {
background: $white;
border-color: $studio-gray-20;
box-shadow: none;
color: $studio-gray-70;
}
&:focus:enabled {
background: $white;
color: $studio-gray-70;
border-color: $color-primary;
box-shadow: 0 0 0 2px $color-primary-light;
}
&:active:enabled {
background: $white;
border-color: $studio-gray-10;
border-width: 2px 1px 1px;
box-shadow: none;
}
&:disabled,
&[aria-disabled='true'] {
color: $studio-gray-50;
background-color: $white;
border-color: $studio-gray-50;
text-shadow: none;
}
}
&.is-primary {
background: $color-accent;
border-color: $color-accent-dark;
box-shadow: none;
color: $white;
text-shadow: none;
&:focus:enabled {
background: $studio-pink-40;
border-color: $color-accent;
color: $white;
box-shadow: 0 0 0 2px $color-accent-light;
}
&:hover {
box-shadow: none;
background: $studio-pink-40;
border-color: $color-accent-dark;
color: $white;
}
&:focus:enabled {
box-shadow: 0 0 0 2px $color-accent-light;
}
&:active:enabled {
background: $studio-pink-40;
border-color: $color-accent-dark;
box-shadow: inset 0 1px 0 $color-accent-dark;
}
&:disabled,
&[aria-disabled='true'] {
color: $studio-gray-50;
background: $white;
border-color: $studio-gray-50;
text-shadow: none;
&:hover,
&:focus,
&:active {
color: $studio-gray-50;
background-color: $white;
border-color: $studio-gray-50;
box-shadow: none;
}
}
&.is-busy,
&.is-busy:disabled,
&.is-busy[aria-disabled='true'] {
background-image: linear-gradient(
-45deg,
$color-accent 28%,
$studio-pink-60 28%,
$studio-pink-60 72%,
$color-accent 72%
);
border-color: $color-accent-dark;
}
}
/* Buttons that look like links, for a cross of good semantics with the visual */
&.is-link {
color: $color-link;
&:hover,
&:active {
color: $color-link-dark;
}
&:focus {
color: $color-link-dark;
box-shadow: 0 0 0 2px $color-primary-light;
}
}
/* Link buttons that are red to indicate destructive behavior. */
&.is-link.is-destructive {
color: $alert-red;
}
&:focus:enabled {
// @include button-style__focus-active;
}
&.is-busy {
background-image: repeating-linear-gradient(
-45deg,
$studio-gray-50,
$white 11px,
$white 10px,
$studio-gray-50 20px
);
}
// Buttons that are text-based.
&.is-tertiary {
color: $color-link;
&:not( :disabled ):not( [aria-disabled='true'] ):not( .is-default ):hover {
color: $color-link-dark;
}
}
}