woocommerce/plugins/woocommerce-admin/client/dashboard/style.scss

237 lines
4.5 KiB
SCSS
Raw Normal View History

2018-08-02 23:10:55 +00:00
/** @format */
.woocommerce-page:not(.woocommerce-embed-page) #klarna-banner,
#klarna-kp-banner {
display: none;
}
2018-08-02 23:10:55 +00:00
.woocommerce-dashboard__columns {
2018-08-06 22:34:47 +00:00
display: grid;
grid-template-columns: calc(50% - #{$gap-large/2}) calc(50% - #{$gap-large/2});
grid-column-gap: $gap-large;
2018-08-02 23:10:55 +00:00
// Auto-position fix for IE11.
> div {
@include set-grid-item-position( 2, 14 );
}
@include breakpoint( '<960px' ) {
grid-template-columns: 100%;
> div {
@include set-grid-item-position( 1, 14 );
}
2018-08-02 23:10:55 +00:00
}
}
.woocommerce-dashboard__widget {
display: flex;
align-items: center;
text-align: center;
}
.woocommerce-dashboard__widget-item {
flex: 1;
}
2019-04-30 00:35:37 +00:00
.woocommerce-dashboard-section__add-more {
margin: 0 auto;
width: 84px;
padding: 0 $gap-large $gap-large;
2019-04-30 00:35:37 +00:00
.components-popover__content {
padding: 0 $gap $gap-smaller;
}
}
.woocommerce-dashboard-section__add-more-choices {
display: flex;
justify-content: center;
}
.woocommerce-dashboard-section__add-more-btn {
display: flex;
flex-direction: column;
align-items: center;
padding: $gap;
margin: $gap-smaller;
.dashicons-arrow-right-alt {
transform: rotate(-45deg);
}
}
.woocommerce-dashboard-section__add-more-btn-title {
color: $core-grey-dark-300;
padding-top: 8px;
}
.woocommerce-dashboard-section-controls {
border-top: $border-width solid $core-grey-light-500;
padding-top: $gap-smaller;
.dashicon {
margin: 0 $gap-smaller 0 0;
vertical-align: bottom;
}
.woocommerce-ellipsis-menu__item {
padding-bottom: 10px;
}
}
.woocommerce-onboarding {
.woocommerce-stepper .woocommerce-stepper__step {
.woocommerce-stepper__step-label {
color: $studio-gray-80;
}
&.is-active,
&.is-complete {
.woocommerce-stepper__step-icon {
background: $studio-woocommerce-purple-60;
color: $studio-white;
}
.woocommerce-stepper__step-label {
color: $studio-gray-90;
}
}
.woocommerce-spinner {
background: $studio-woocommerce-purple-60;
}
}
/* 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;
.components-base-control__help {
top: 100%;
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-form-toggle__track {
width: 36px;
max-width: 36px;
height: 18px;
max-height: 18px;
}
.components-base-control__field {
margin-bottom: 0;
}
&.is-checked {
.components-form-toggle__track {
background-color: $studio-woocommerce-purple-60;
border-color: $studio-woocommerce-purple-60;
}
}
}
}
.woocommerce-task-dashboard__container .components-button.is-button,
.woocommerce-profile-wizard__body .components-button.is-button,
.woocommerce-page .components-modal__frame .components-button.is-button {
height: 48px;
padding-left: 25px;
padding-right: 25px;
text-align: center;
font-size: 14px;
line-height: 36px;
font-weight: 500;
&.is-primary.is-busy,
&.is-primary.is-busy:active:enabled {
cursor: progress;
/* stylelint-disable function-parentheses-space-inside, function-comma-space-after */
background-image: linear-gradient(
-45deg,
$studio-pink-50 28%,
color($studio-pink-50 shade(30%)) 28%,
color($studio-pink-50 shade(30%)) 72%,
$studio-pink-50 72%
) !important; // Gutenberg & PostCSS Add the gradient late in output, based on the 'primary' color, which in our case is purple. Our busy state should be pink.
/* stylelint-enable */
}
}
.components-modal__frame.woocommerce-cart-modal {
width: 600px;
max-width: 100%;
.components-modal__header {
border-bottom: 0;
margin-bottom: $gap;
margin-top: $gap;
button {
display: none;
}
}
.components-modal__header-heading {
font-style: normal;
font-weight: normal;
font-size: 24px;
line-height: 32px;
}
.woocommerce-list {
margin-top: $gap-smallest;
}
.woocommerce-list .woocommerce-list__item:first-child {
border-top: 1px solid $studio-gray-5;
}
.woocommerce-list__item {
border-bottom: 1px solid $studio-gray-5;
}
.woocommerce-cart-modal__help-text {
font-size: 16px;
line-height: 24px;
}
.woocommerce-cart-modal__actions {
text-align: right;
button.is-link {
color: $studio-pink;
margin-right: $gap;
text-decoration: none;
font-weight: 600;
font-size: 14px;
}
button.is-primary {
align-self: flex-end;
}
}
}