Redesign - add new SCSS variables

[MAILPOET-2772]
This commit is contained in:
Ján Mikláš
2020-05-06 15:36:54 +02:00
committed by Veljko V
parent 67e9841569
commit 989efb9fd6
7 changed files with 18 additions and 9 deletions

View File

@@ -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;

View File

@@ -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;

View File

@@ -1,6 +1,7 @@
// Settings
// Global variables, config switches. Not producing any CSS.
@import 'settings/colors';
@import 'settings/form-editor';
// Tools

View File

@@ -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;

View File

@@ -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;

View File

@@ -1,2 +1,4 @@
$grid-column: 368px;
$grid-column-small: 272px;
$grid-editor-width: 660px;
$grid-gap: 16px;

View File

@@ -1,3 +1,4 @@
$font-family: 'proxima-soft', sans-serif;
$font-size: 16px;
$font-size-small: 14px;
$line-height: 1.5;