Redesign - add new SCSS variables
[MAILPOET-2772]
This commit is contained in:
@@ -49,22 +49,20 @@ input[type=checkbox].mailpoet-toggle {
|
||||
}
|
||||
}
|
||||
|
||||
$very-light-blue: #e5e9f8;
|
||||
$apricot: #f5a278;
|
||||
$pale-grey: #fdfdff;
|
||||
|
||||
// themes
|
||||
.mailpoet-toggle-light {
|
||||
+ .mailpoet-toggle-button {
|
||||
background: $pale-grey;
|
||||
border: solid 1px $very-light-blue;
|
||||
background: $color-input-background;
|
||||
border: solid 1px $color-tertiary-light;
|
||||
border-radius: 2em;
|
||||
padding: 2px;
|
||||
transition: all .4s ease;
|
||||
|
||||
&:after {
|
||||
background-color: #fff;
|
||||
border: solid 1px $very-light-blue;
|
||||
border: solid 1px $color-tertiary-light;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 4px 8px 0 rgba(220, 220, 220, .5);
|
||||
transition: all .2s ease;
|
||||
|
@@ -49,7 +49,7 @@
|
||||
}
|
||||
|
||||
.mailpoet-button-small {
|
||||
font-size: $font-size - 2px;
|
||||
font-size: $font-size-small;
|
||||
line-height: 20px;
|
||||
min-height: 32px;
|
||||
padding: 6px 12px;
|
||||
|
@@ -1,6 +1,7 @@
|
||||
// Settings
|
||||
// Global variables, config switches. Not producing any CSS.
|
||||
|
||||
@import 'settings/colors';
|
||||
@import 'settings/form-editor';
|
||||
|
||||
// Tools
|
||||
|
@@ -17,11 +17,18 @@ $color-secondary-light: #ffe0d0;
|
||||
$color-secondary-light-hover: darken($color-secondary-light, 10%);
|
||||
$color-tertiary: #071c6d;
|
||||
$color-tertiary-hover: darken($color-tertiary, 10%);
|
||||
$color-tertiary-light: #e5e9f8;
|
||||
$color-tertiary-hover: darken($color-tertiary-light, 10%);
|
||||
|
||||
// Typography colors
|
||||
$color-text: $color-tertiary;
|
||||
$color-text-inactive: #9ca6cc;
|
||||
$color-text-hover: darken($color-text, 15%);
|
||||
$color-text-hover: darken($color-text, 10%);
|
||||
$color-text-light: #9ca6cc;
|
||||
$color-text-light-hover: darken($color-text-light, 10%);
|
||||
|
||||
// Form colors
|
||||
$color-input-background: #fdfdff;
|
||||
$color-input-border: $color-tertiary-light;
|
||||
|
||||
// Newsletter editor colors
|
||||
$color-editor-background-column: #7fbbd0;
|
||||
|
@@ -1,7 +1,7 @@
|
||||
$gutenberg-control-border-color: #7e8993;
|
||||
$gutenberg-control-active-color: #ff5301;
|
||||
$gutenberg-control-border-color-focus: #007cba;
|
||||
$form-placement-option-base-color: #e5e9f8;
|
||||
$form-placement-option-base-color: $color-tertiary-light;
|
||||
$form-placement-option-text-color: #23282d;
|
||||
$form-placement-option-oval: #dcdcdc;
|
||||
$form-placement-option-oval-border: #969ca1;
|
||||
|
@@ -1,2 +1,4 @@
|
||||
$grid-column: 368px;
|
||||
$grid-column-small: 272px;
|
||||
$grid-editor-width: 660px;
|
||||
$grid-gap: 16px;
|
||||
|
@@ -1,3 +1,4 @@
|
||||
$font-family: 'proxima-soft', sans-serif;
|
||||
$font-size: 16px;
|
||||
$font-size-small: 14px;
|
||||
$line-height: 1.5;
|
||||
|
Reference in New Issue
Block a user