woocommerce/plugins/woocommerce-admin/client/task-lists/components/progress-header/progress-header.scss

89 lines
1.4 KiB
SCSS

$progress-complete-color: var(--wp-admin-theme-color);
.woocommerce-task-progress-header {
position: relative;
min-height: 28px;
h1 {
font-size: 24px;
}
p {
color: $gray-700;
font-size: 16px;
line-height: 24px;
margin-top: $gap-smaller;
}
.woocommerce-task-progress-header__progress-bar {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 1px solid #ddd;
border-radius: 16px;
height: 12px;
width: 100%;
margin-bottom: 0;
// Firefox
& {
background-color: #fff;
}
&::-moz-progress-bar {
background-color: $progress-complete-color;
border-radius: 16px;
}
// Chrome
&::-webkit-progress-bar {
background-color: #fff;
border-radius: 16px;
}
&::-webkit-progress-value {
background-color: $progress-complete-color;
border-bottom-left-radius: 16px;
border-top-left-radius: 16px;
}
}
.woocommerce-card__menu {
position: absolute;
right: 0;
top: -7px;
}
// Styles for the activity/setup panel.
@at-root .woocommerce-setup-panel & {
padding: $gap;
h1 {
font-size: 16px;
font-weight: 600;
}
p {
font-size: 16px;
}
.woocommerce-card__menu {
top: 17px;
}
}
@include breakpoint( "<782px" ) {
padding-left: var(--large-gap);
padding-right: var(--large-gap);
}
}
h1.woocommerce-task-progress-header__title {
padding-top: 4px;
@include breakpoint( "<782px" ) {
padding-left: var(--large-gap);
padding-right: var(--large-gap);
}
}