Cavemanon/piratepoet
8
Fork 0
Code Pull Requests Actions Releases 16 Activity

Redesign - add new SCSS variables

Browse Source 
[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
Download Patch File Download Diff File Expand all files Collapse all files

8
assets/css/src/components-plugin/_toggle.scss
View File

@@ -49,22 +49,20 @@ input[type=checkbox].mailpoet-toggle {
} }
} }
$very-light-blue: #e5e9f8;
$apricot: #f5a278; $apricot: #f5a278;
$pale-grey: #fdfdff;
// themes // themes
.mailpoet-toggle-light { .mailpoet-toggle-light {
+ .mailpoet-toggle-button { + .mailpoet-toggle-button {
background: $pale-grey; background: $color-input-background;
border: solid 1px $very-light-blue; border: solid 1px $color-tertiary-light;
border-radius: 2em; border-radius: 2em;
padding: 2px; padding: 2px;
transition: all .4s ease; transition: all .4s ease;
&:after { &:after {
background-color: #fff; background-color: #fff;
border: solid 1px $very-light-blue; border: solid 1px $color-tertiary-light;
border-radius: 50%; border-radius: 50%;
box-shadow: 0 4px 8px 0 rgba(220, 220, 220, .5); box-shadow: 0 4px 8px 0 rgba(220, 220, 220, .5);
transition: all .2s ease; transition: all .2s ease;

2
assets/css/src/generic/_buttons.scss
View File

@@ -49,7 +49,7 @@
} }
.mailpoet-button-small { .mailpoet-button-small {
font-size: $font-size - 2px; font-size: $font-size-small;
line-height: 20px; line-height: 20px;
min-height: 32px; min-height: 32px;
padding: 6px 12px; padding: 6px 12px;

1
assets/css/src/mailpoet-form-editor.scss
View File

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

11
assets/css/src/settings/_colors.scss
View File

@@ -17,11 +17,18 @@ $color-secondary-light: #ffe0d0;
$color-secondary-light-hover: darken($color-secondary-light, 10%); $color-secondary-light-hover: darken($color-secondary-light, 10%);
$color-tertiary: #071c6d; $color-tertiary: #071c6d;
$color-tertiary-hover: darken($color-tertiary, 10%); $color-tertiary-hover: darken($color-tertiary, 10%);
$color-tertiary-light: #e5e9f8;
$color-tertiary-hover: darken($color-tertiary-light, 10%);
// Typography colors // Typography colors
$color-text: $color-tertiary; $color-text: $color-tertiary;
$color-text-inactive: #9ca6cc; $color-text-hover: darken($color-text, 10%);
$color-text-hover: darken($color-text, 15%); $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 // Newsletter editor colors
$color-editor-background-column: #7fbbd0; $color-editor-background-column: #7fbbd0;

2
assets/css/src/settings/_form-editor.scss
View File

@@ -1,7 +1,7 @@
$gutenberg-control-border-color: #7e8993; $gutenberg-control-border-color: #7e8993;
$gutenberg-control-active-color: #ff5301; $gutenberg-control-active-color: #ff5301;
$gutenberg-control-border-color-focus: #007cba; $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-text-color: #23282d;
$form-placement-option-oval: #dcdcdc; $form-placement-option-oval: #dcdcdc;
$form-placement-option-oval-border: #969ca1; $form-placement-option-oval-border: #969ca1;

2
assets/css/src/settings/_grid.scss
View File

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

1
assets/css/src/settings/_typography.scss
View File

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