160 lines
2.8 KiB
SCSS
160 lines
2.8 KiB
SCSS
.woocommerce-list {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
a.woocommerce-list__item {
|
|
color: inherit;
|
|
}
|
|
|
|
.woocommerce-list__item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 0;
|
|
text-decoration: none;
|
|
|
|
&.has-gutters {
|
|
padding: $gap $gap-large;
|
|
}
|
|
|
|
&.has-action {
|
|
cursor: pointer;
|
|
}
|
|
|
|
&:focus {
|
|
box-shadow: inset 0 0 0 1px $studio-wordpress-blue,
|
|
inset 0 0 0 2px $studio-white;
|
|
}
|
|
|
|
&:focus-visible {
|
|
box-shadow: none;
|
|
}
|
|
|
|
// transitions
|
|
&:not(.transitions-disabled) {
|
|
&.woocommerce-list__item-enter {
|
|
opacity: 0;
|
|
max-height: 0;
|
|
transform: translateX(50%);
|
|
}
|
|
|
|
&.woocommerce-list__item-enter-active {
|
|
opacity: 1;
|
|
max-height: 100vh;
|
|
transform: translateX(0%);
|
|
transition: opacity 500ms, transform 500ms, max-height 500ms;
|
|
}
|
|
|
|
&.woocommerce-list__item-exit {
|
|
opacity: 1;
|
|
max-height: 100vh;
|
|
transform: translateX(0%);
|
|
}
|
|
|
|
&.woocommerce-list__item-exit-active {
|
|
opacity: 0;
|
|
max-height: 0;
|
|
transform: translateX(50%);
|
|
transition: opacity 500ms, transform 500ms, max-height 500ms;
|
|
}
|
|
}
|
|
|
|
> .woocommerce-list__item-inner {
|
|
text-decoration: none;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: $gap $gap-large;
|
|
|
|
&:focus {
|
|
box-shadow: inset 0 0 0 1px $studio-wordpress-blue,
|
|
inset 0 0 0 2px $studio-white;
|
|
}
|
|
}
|
|
|
|
.woocommerce-list__item-title {
|
|
color: $studio-gray-90;
|
|
}
|
|
|
|
.woocommerce-list__item-content {
|
|
margin-top: $gap-smallest;
|
|
display: block;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
color: #50575d;
|
|
}
|
|
|
|
.woocommerce-list__item-before {
|
|
margin-right: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.woocommerce-list__item-after {
|
|
margin-left: $gap;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: auto;
|
|
}
|
|
|
|
$chevron-color: $gray-900;
|
|
$background-color: $white;
|
|
$background-color-hover: $gray-100;
|
|
$border-color: $gray-100;
|
|
$foreground-color: var(--wp-admin-theme-color);
|
|
$foreground-color-hover: var(--wp-admin-theme-color);
|
|
|
|
background-color: $background-color;
|
|
|
|
&:not(:first-child) {
|
|
border-top: 1px solid $border-color;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: $background-color-hover;
|
|
|
|
.woocommerce-list__item-title {
|
|
color: $foreground-color-hover;
|
|
}
|
|
|
|
.woocommerce-list__item-before > svg {
|
|
fill: $foreground-color-hover;
|
|
}
|
|
}
|
|
|
|
.woocommerce-list__item-title,
|
|
.woocommerce-list__item-title > div {
|
|
color: $foreground-color;
|
|
}
|
|
|
|
.woocommerce-list__item-before > svg {
|
|
fill: $foreground-color;
|
|
}
|
|
|
|
.woocommerce-list__item-after > svg {
|
|
fill: $chevron-color;
|
|
}
|
|
|
|
&.is-complete {
|
|
.woocommerce-task__icon {
|
|
background-color: var(--wp-admin-theme-color);
|
|
}
|
|
|
|
.woocommerce-list__item-title {
|
|
color: $gray-700;
|
|
}
|
|
|
|
.woocommerce-list__item-content {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.woocommerce-list__item-title {
|
|
color: $studio-gray-80;
|
|
}
|
|
|
|
.woocommerce-list__item-content {
|
|
color: $studio-gray-50;
|
|
}
|