Extract some properties to variables

This commit is contained in:
Matt-Yorkley
2020-04-23 09:47:33 +02:00
parent ebe00bdc31
commit 865dcf79cb
5 changed files with 20 additions and 11 deletions

View File

@@ -1,12 +1,13 @@
@import "mixins";
@import "typography";
@import "variables";
ordercycle {
float: right;
background: $grey-050;
color: $grey-800;
width: 100%;
border-radius: 0.5em 0.5em 0 0;
border-radius: $radius-medium $radius-medium 0 0;
margin-top: 1em;
padding: 1em 1.25em 0;
@@ -42,12 +43,12 @@ ordercycle {
border: 1px solid $teal-300;
display: inline-block;
font-size: 1em;
border-radius: 0.25em;
border-radius: $radius-small;
.select-label {
background-color: rgba($teal-300, 0.5);
display: inline-block;
border-radius: 0.25em 0 0 0.25em;
border-radius: $radius-small 0 0 $radius-small;
float: left;
font-size: 1em;
line-height: 1.3em;
@@ -81,7 +82,7 @@ ordercycle {
padding: 0.5em 1.25em 0.5em 0.75em;
height: 2.35em;
background-size: 30px auto;
border-radius: 0 0.25em 0.25em 0;
border-radius: 0 $radius-small $radius-small 0;
min-width: 13em;
@include breakpoint(mobile) {

View File

@@ -1,5 +1,6 @@
@import "branding";
@import "mixins";
@import "variables";
.account-summary {
color: #4a4a4a;
@@ -99,7 +100,7 @@
table {
width: 100%;
border-radius: 0.5em 0.5em 0 0;
border-radius: $radius-medium $radius-medium 0 0;
tr:nth-of-type(even) {
background: transparent;

View File

@@ -29,9 +29,9 @@ $sidebar-footer-height: 5em;
z-index: 200;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.15);
background-color: $shop-sidebar-overlay;
opacity: 0;
transition: opacity 250ms ease-in-out 0s;
transition: opacity $transition-sidebar;
}
&.shown {
@@ -54,7 +54,7 @@ $sidebar-footer-height: 5em;
margin-right: -$sidebar-large-width;
background-color: rgba($white, 0.95);
padding: 1em;
transition: margin 250ms ease-in-out 0s;
transition: margin $transition-sidebar;
overflow-y: scroll;
.property-selectors {
@@ -70,7 +70,7 @@ $sidebar-footer-height: 5em;
position: fixed;
bottom: 0;
right: 0;
transition: margin 250ms ease-in-out 0s;
transition: margin $transition-sidebar;
padding: 1em;
button {
@@ -78,7 +78,7 @@ $sidebar-footer-height: 5em;
background-color: $grey-800;
color: $white;
border: 1px solid $grey-600;
border-radius: 0.5em;
border-radius: $radius-medium;
width: 47%;
margin: 0;
padding: 0;

View File

@@ -1,5 +1,6 @@
@import "mixins";
@import "branding";
@import "variables";
.shop-searchbar {
background-color: $grey-100;
@@ -11,7 +12,7 @@
input#search {
height: 3em;
border-radius: 0.25em;
border-radius: $radius-small;
border: solid 1px $grey-300;
margin: 0;
padding: 0 1em 0 2.75em;

View File

@@ -30,3 +30,9 @@ $topbar-dropdown-link-color: $black;
$topbar-dropdown-bg: $white;
$topbar-dropdown-link-bg: $white;
$topbar-dropdown-link-bg-hover: $white;
$radius-small: 0.25em;
$radius-medium: 0.5em;
$shop-sidebar-overlay: rgba(0, 0, 0, 0.15);
$transition-sidebar: 250ms ease-in-out 0s;