woocommerce/plugins/woocommerce-admin/client/task-lists/task-lists.scss

256 lines
4.5 KiB
SCSS
Raw Normal View History

.woocommerce-task-dashboard__container {
.woocommerce-task-card {
max-width: 680px;
margin-left: auto;
margin-right: auto;
margin-bottom: $gap-large;
.components-card__header.is-size-large {
padding-bottom: 12px;
.woocommerce-card__menu {
margin-top: 8px;
}
}
.woocommerce-task-card__header {
display: flex;
.components-text + .woocommerce-badge {
margin-left: 16px;
}
}
.woocommerce-list__item-text {
.woocommerce-pill {
padding: 1px $gap-smaller;
margin-left: $gap-smaller;
}
}
.components-popover__content {
min-width: unset;
}
}
.woocommerce-task-payments {
width: 680px;
margin: auto;
max-width: 100%;
}
}
.woocommerce-task__additional-info,
.woocommerce-task__estimated-time,
.woocommerce-task-list__item-expandable-content {
color: $gray-700;
font-weight: 400;
font-size: 12px;
}
.woocommerce-task-list__item-expandable-content {
font-size: 13px;
}
.components-modal__screen-overlay {
background: rgba(43, 45, 47, 0.4);
}
.components-modal__frame {
.components-modal__header {
margin-bottom: 0;
}
.woocommerce-task-payments__stripe-error-wrapper {
align-items: flex-end;
flex-grow: 1;
display: flex;
flex-direction: column;
}
}
.woocommerce-task-dashboard__container {
.woocommerce-stepper {
button.components-button.is-primary {
margin: 0 8px 0 0;
}
}
button.components-button.is-link {
margin: 0;
height: auto;
color: $studio-gray-60;
font-weight: normal;
}
}
.woocommerce-task-card__prompt {
width: 100%;
min-width: 100%;
margin-bottom: $gap-large;
margin-top: -$gap-smallest;
cursor: default;
.components-snackbar__content {
display: block;
align-items: unset;
justify-content: unset;
span {
margin-left: -$gap-large;
}
}
.woocommerce-task-card__prompt-actions {
button.is-link,
button.is-link:active,
button.is-link:focus {
color: $studio-white;
margin-left: $gap-large;
background: transparent;
}
button.is-link:hover {
color: $studio-white;
}
}
.woocommerce-task-card__prompt-pointer {
border-bottom: 10px solid $gray-900; /* Snackbar color */
border-left: 10px solid transparent;
border-right: 10px solid transparent;
position: relative;
width: 0;
height: 0;
display: inline-block;
top: -30px;
}
.woocommerce-task-card__prompt-content {
display: flex;
align-items: baseline;
justify-content: space-between;
max-height: 10px;
margin-left: $gap-large;
position: relative;
top: -40px;
}
.woocommerce-task-card__prompt-actions {
margin-right: -$gap;
}
&:hover {
.woocommerce-task-card__prompt-pointer {
border-bottom-color: $gray-900; /* Snackbar hover */
}
}
}
.woocommerce-task-dashboard__container {
.woocommerce-task-card.is-loading {
.woocommerce-card__body {
border-top: 1px solid $studio-gray-5;
}
.is-placeholder {
@include placeholder();
display: inline-block;
height: 16px;
}
.woocommerce-card__title {
.is-placeholder {
width: 70%;
height: 28px;
}
}
.woocommerce-list__item-before {
.is-placeholder {
height: 36px;
width: 36px;
}
}
.woocommerce-list__item-text {
width: 100%;
.woocommerce-list__item-title {
.is-placeholder {
height: 22px;
width: 60%;
}
}
}
.woocommerce-list__item-after {
.is-placeholder {
height: 18px;
width: 60px;
}
}
}
/* Muriel style overrides */
.muriel-component {
margin-top: $gap;
margin-bottom: $gap;
}
.components-base-control.has-error {
margin-bottom: $gap * 2 !important;
border-color: $studio-red-50;
@include breakpoint( "<782px" ) {
margin-bottom: $gap-small + $gap * 2 !important;
}
.components-base-control__help {
top: 100%;
left: $gap-small;
position: absolute;
margin-top: $gap-smallest;
font-size: 12px;
font-style: normal;
color: $studio-red-50;
}
}
.components-form-toggle {
display: inline-block;
label {
font-size: 14px;
}
.components-base-control {
display: inline-block;
}
.components-base-control__field {
margin-bottom: 0;
}
}
}
.woocommerce-task-dashboard__container .woocommerce-task__caption {
color: $gray-700;
margin-top: $gap;
}
Remove dependency on Jetpack from Shipping and Tax task list items (#39992) * Remove dependency on Jetpack from WCS&T's task list item - Remove installing Jetpack-the-plugin from WooCommerce Shipping & Tax WC Home task list and recommended extensions area. - Update Jetpack auth link generation to use getJetpackAuthUrl(). - Remove references of Jetpack-the-plugin from WCS&T onboarding as the extension will now use the Jetpack Connection package for establishing a connection between WPCOM infrastructure and a Woo site. * Update WooCommerce Tax flow in WC Home task list * Inline the agreementText variable * Add missing pluginSlugs prop to <Plugins> instance for WC Tax * Fix WC Tax extension name in API response * Remove Jetpack from copy in Tax task header * Fix MD034/no-bare-urls MD linting violation * Fix experimental shipping recommendation tests * Add changelogs requested by linter * Add changefile(s) from automation for the following project(s): @woocommerce/components, woocommerce * Remove mention of Jetpack from ExperimentalShippingRecommendation * Fix text wrapping bug in WC Tax onboarding task * Add changefile(s) from automation for the following project(s): @woocommerce/components, woocommerce * Use isResolving() to detect pending auth URL fetch * Replace unused hasErrors with ref to error * Fix lint * Jetpack auth URL prefetching * Revert "Jetpack auth URL prefetching" This reverts commit 2b79000e203f99ae5ceb8c4a3e6a1d1d6fbe4dc8. * Add PrefetchJetpackAuthUrl component to remove Connect button load time * Replace URL prefetching in component with useEffect * Fix: Accept redirect URL as param instead of prop * Fix lint * Remove prefetching. Make Connect button always available * Fix ExperimentalShippingRecommendation incompatibility with new Connect behavior * Handle empty object errors in Connect * Display TOS above WooCommerce Shipping & Tax installation buttons (#40863) --------- Co-authored-by: github-actions <github-actions@github.com>
2023-10-25 14:39:43 +00:00
.woocommerce-task-dashboard__container .woocommerce-task__caption.is-tos {
margin-bottom: $gap;
}
.woocommerce-task-list__setup {
.woocommerce-experimental-list
.woocommerce-experimental-list__item.complete {
text-decoration: line-through;
color: var(--wp-admin-theme-color);
.woocommerce-task-list__item-title {
color: var(--wp-admin-theme-color);
}
}
}