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 {
|
||||
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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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%;
|
||||
}
|
||||
|
|
|
@ -1,5 +1,7 @@
|
|||
/** @format */
|
||||
|
||||
$fallback-gutter: 24px;
|
||||
$fallback-gutter-large: 40px;
|
||||
$gutter: var(--main-gap);
|
||||
$gutter-large: var(--large-gap);
|
||||
|
||||
|
|
Loading…
Reference in New Issue