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:
parent
e38284eb96
commit
8932f99038
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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%;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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);
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue