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

View File

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

View File

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

View File

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

View File

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