Add fallback gutter for browsers that don't support CSS Custom properties (https://github.com/woocommerce/woocommerce-admin/pull/372)

This commit is contained in:
Albert Juhé Lluveras 2018-09-11 09:27:13 +02:00 committed by GitHub
parent e38284eb96
commit 8932f99038
5 changed files with 10 additions and 0 deletions

View File

@ -2,6 +2,7 @@
.woocommerce-activity-card { .woocommerce-activity-card {
position: relative; position: relative;
padding: $fallback-gutter;
padding: $gutter; padding: $gutter;
background: $white; background: $white;
border-bottom: 1px solid $core-grey-light-400; border-bottom: 1px solid $core-grey-light-400;
@ -21,7 +22,9 @@
.woocommerce-activity-card__unread { .woocommerce-activity-card__unread {
position: absolute; position: absolute;
top: calc(#{ $fallback-gutter } - 6px);
top: calc(#{ $gutter } - 6px); top: calc(#{ $gutter } - 6px);
right: calc(#{ $fallback-gutter } - 6px);
right: calc(#{ $gutter } - 6px); right: calc(#{ $gutter } - 6px);
width: 6px; width: 6px;
height: 6px; height: 6px;
@ -139,6 +142,7 @@
} }
.woocommerce-activity-card__icon { .woocommerce-activity-card__icon {
margin-right: $fallback-gutter;
margin-right: $gutter; margin-right: $gutter;
.is-placeholder { .is-placeholder {

View File

@ -7,6 +7,7 @@
height: 50px; height: 50px;
background: $core-grey-light-200; background: $core-grey-light-200;
border-bottom: 1px solid $core-grey-light-400; border-bottom: 1px solid $core-grey-light-400;
padding: $gap $fallback-gutter;
padding: $gap $gutter; padding: $gap $gutter;
font-size: 13px; font-size: 13px;
font-weight: 500; font-weight: 500;

View File

@ -31,6 +31,7 @@
.woocommerce-layout__header-breadcrumbs { .woocommerce-layout__header-breadcrumbs {
font-size: 13px; font-size: 13px;
font-weight: normal; font-weight: normal;
padding: 0 0 0 $fallback-gutter-large;
padding: 0 0 0 $gutter-large; padding: 0 0 0 $gutter-large;
flex: 1 auto; flex: 1 auto;
height: 50px; height: 50px;

View File

@ -5,6 +5,7 @@
} }
.woocommerce-layout__primary { .woocommerce-layout__primary {
margin: 80px 0 0 $fallback-gutter-large;
margin: 80px 0 0 $gutter-large; margin: 80px 0 0 $gutter-large;
@include breakpoint( '>1100px' ) { @include breakpoint( '>1100px' ) {
@ -13,6 +14,7 @@
} }
.woocommerce-layout .woocommerce-layout__main { .woocommerce-layout .woocommerce-layout__main {
padding-right: $fallback-gutter-large;
padding-right: $gutter-large; padding-right: $gutter-large;
max-width: 100%; max-width: 100%;
} }

View File

@ -1,5 +1,7 @@
/** @format */ /** @format */
$fallback-gutter: 24px;
$fallback-gutter-large: 40px;
$gutter: var(--main-gap); $gutter: var(--main-gap);
$gutter-large: var(--large-gap); $gutter-large: var(--large-gap);