From 2841f5bb899a863e459be9ef34bbeb742c27acf7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ja=CC=81n=20Mikla=CC=81s=CC=8C?= Date: Thu, 12 Mar 2020 08:56:56 +0100 Subject: [PATCH] Reduce editor's common styles lenght [MAILPOET-2487] --- .../_overrides.scss} | 0 .../css/src/components-editor/_buttons.scss | 45 ++++ assets/css/src/components-editor/_common.scss | 217 ------------------ assets/css/src/components-editor/_forms.scss | 170 ++++++++++++++ assets/css/src/mailpoet-editor.scss | 4 +- .../css/src/mailpoet-post-editor-block.scss | 2 + assets/css/src/mailpoet-public.scss | 2 + 7 files changed, 222 insertions(+), 218 deletions(-) rename assets/css/src/components-editor/{_library-overrides.scss => 3rd-party-overrides/_overrides.scss} (100%) create mode 100644 assets/css/src/components-editor/_buttons.scss create mode 100644 assets/css/src/components-editor/_forms.scss diff --git a/assets/css/src/components-editor/_library-overrides.scss b/assets/css/src/components-editor/3rd-party-overrides/_overrides.scss similarity index 100% rename from assets/css/src/components-editor/_library-overrides.scss rename to assets/css/src/components-editor/3rd-party-overrides/_overrides.scss diff --git a/assets/css/src/components-editor/_buttons.scss b/assets/css/src/components-editor/_buttons.scss new file mode 100644 index 0000000000..3bbd75ba67 --- /dev/null +++ b/assets/css/src/components-editor/_buttons.scss @@ -0,0 +1,45 @@ +.mailpoet_button { + background-color: $color-primary-background; + border: 1px solid $color-editor-border-structure; + border-radius: 3px; + color: $color-primary-inactive; + line-height: normal; + margin: 0; + padding: 6px 20px; + vertical-align: top; +} + +.mailpoet_button_full { + box-sizing: border-box; + width: 100%; +} + +.mailpoet_button_primary { + background-color: $color-primary-button; + border-color: $color-primary; + color: $color-white; + + &:hover { + background-color: $color-primary-highlight; + } +} + +.mailpoet_button_group { + display: inline; + + .mailpoet_button:first-child { + border-bottom-right-radius: 0; + border-top-right-radius: 0; + margin-right: 0; + padding: 6px 12px; + } + + .mailpoet_button:last-child { + border-bottom-left-radius: 0; + border-left: 0; + border-top-left-radius: 0; + margin-left: 0; + padding-left: 10px; + padding-right: 10px; + } +} diff --git a/assets/css/src/components-editor/_common.scss b/assets/css/src/components-editor/_common.scss index 28aee5ef62..a502d4f618 100644 --- a/assets/css/src/components-editor/_common.scss +++ b/assets/css/src/components-editor/_common.scss @@ -41,177 +41,6 @@ } } -input.mailpoet_color { - width: 5em; -} - -select.mailpoet_font-family { - width: 8em; -} - -select.mailpoet_font-size { - width: 5em; -} - -.mailpoet_input, -.mailpoet_select { - $form-control-padding: 3px; - appearance: none; - border-radius: 1px; - box-shadow: none !important; - line-height: 28px - $form-control-padding * 2; - padding: $form-control-padding; -} - -.mailpoet_input { - border: 1px solid $color-editor-border-content; - width: 283px; -} - -.mailpoet_input_small { - width: 58px; -} - -.mailpoet_input_medium { - width: 150px; -} - -.mailpoet_input_full { - box-sizing: border-box; - margin: 0; - width: 100%; -} - -.mailpoet_range { - -webkit-appearance: none; - padding: 0; - vertical-align: middle; - width: 283px; - - &:focus { - outline: none; - } - - &::-webkit-slider-runnable-track { - background: $range-track-background-color; - border: 1px solid $range-track-border-color; - border-radius: $range-border-radius; - cursor: pointer; - height: $range-track-height; - width: 100%; - } - - &::-webkit-slider-thumb { - -webkit-appearance: none; - background: $range-thumb-background-color; - border: 1px solid $range-thumb-border-color; - border-radius: $range-border-radius; - cursor: pointer; - height: $range-thumb-height; - margin-top: -1 * $range-thumb-height / 3; - width: $range-thumb-width; - } - - &:hover::-webkit-slider-thumb { - background: $range-thumb-hover-background-color; - } - - &::-moz-range-track { - background: $range-track-background-color; - border: 1px solid $range-track-border-color; - border-radius: $range-border-radius; - cursor: pointer; - height: $range-track-height; - width: 100%; - } - - &::-moz-range-thumb { - background: $range-thumb-background-color; - border: 1px solid $range-thumb-border-color; - border-radius: $range-border-radius; - cursor: pointer; - height: $range-thumb-height; - width: $range-thumb-width; - } - - &:hover::-moz-range-thumb { - background: $range-thumb-hover-background-color; - } - - &::-ms-fill-lower { - background: $range-track-background-color; - border: 1px solid $range-track-border-color; - } - - &::-ms-fill-upper { - background: $range-track-background-color; - border: 1px solid $range-track-border-color; - } - - &::-ms-track { - background: transparent; - border-color: transparent; - border-width: $range-track-height * 2 0; - color: transparent; - cursor: pointer; - height: $range-track-height; - width: 100%; - } - - &::-ms-thumb { - background: $range-thumb-background-color; - border: 1px solid $range-thumb-border-color; - border-radius: $range-border-radius; - cursor: pointer; - height: $range-thumb-height; - width: $range-thumb-width; - } - - &:hover::-ms-thumb { - background: $range-thumb-hover-background-color; - } - - &:focus::-ms-fill-lower { - background: $range-track-background-color; - border: 1px solid $range-track-border-color; - } - - &:focus::-ms-fill-upper { - background: $range-track-background-color; - border: 1px solid $range-track-border-color; - } -} - -.mailpoet_range_small { - width: 100px; -} - -.mailpoet_range_medium { - width: 180px; -} - -.mailpoet_select { - border-color: $color-editor-border-content; - color: $color-primary-text; - margin: 0; -} - -.mailpoet_select_large { - width: 139px; -} - -.mailpoet_select_medium { - width: 103px; -} - -.mailpoet_select_small { - width: 68px; -} - -.mailpoet_select_half_width { - width: 50%; -} - #mailpoet_editor_content ol, #mailpoet_editor_content ul { padding-left: 40px; @@ -227,22 +56,6 @@ select.mailpoet_font-size { } } -.mailpoet_button { - background-color: $color-primary-background; - border: 1px solid $color-editor-border-structure; - border-radius: 3px; - color: $color-primary-inactive; - line-height: normal; - margin: 0; - padding: 6px 20px; - vertical-align: top; -} - -.mailpoet_button_full { - box-sizing: border-box; - width: 100%; -} - .tooltip-help-designer-subject-line div, .tooltip-help-designer-preheader div { z-index: 100001; @@ -271,36 +84,6 @@ select.mailpoet_font-size { line-height: 1.4em; } -.mailpoet_button_primary { - background-color: $color-primary-button; - border-color: $color-primary; - color: $color-white; - - &:hover { - background-color: $color-primary-highlight; - } -} - -.mailpoet_button_group { - display: inline; - - .mailpoet_button:first-child { - border-bottom-right-radius: 0; - border-top-right-radius: 0; - margin-right: 0; - padding: 6px 12px; - } - - .mailpoet_button:last-child { - border-bottom-left-radius: 0; - border-left: 0; - border-top-left-radius: 0; - margin-left: 0; - padding-left: 10px; - padding-right: 10px; - } -} - .mailpoet_text_content p { margin: 1em 0; } diff --git a/assets/css/src/components-editor/_forms.scss b/assets/css/src/components-editor/_forms.scss new file mode 100644 index 0000000000..3d67b05163 --- /dev/null +++ b/assets/css/src/components-editor/_forms.scss @@ -0,0 +1,170 @@ +input.mailpoet_color { + width: 5em; +} + +select.mailpoet_font-family { + width: 8em; +} + +select.mailpoet_font-size { + width: 5em; +} + +.mailpoet_input, +.mailpoet_select { + $form-control-padding: 3px; + appearance: none; + border-radius: 1px; + box-shadow: none !important; + line-height: 28px - $form-control-padding * 2; + padding: $form-control-padding; +} + +.mailpoet_input { + border: 1px solid $color-editor-border-content; + width: 283px; +} + +.mailpoet_input_small { + width: 58px; +} + +.mailpoet_input_medium { + width: 150px; +} + +.mailpoet_input_full { + box-sizing: border-box; + margin: 0; + width: 100%; +} + +.mailpoet_range { + -webkit-appearance: none; + padding: 0; + vertical-align: middle; + width: 283px; + + &:focus { + outline: none; + } + + &::-webkit-slider-runnable-track { + background: $range-track-background-color; + border: 1px solid $range-track-border-color; + border-radius: $range-border-radius; + cursor: pointer; + height: $range-track-height; + width: 100%; + } + + &::-webkit-slider-thumb { + -webkit-appearance: none; + background: $range-thumb-background-color; + border: 1px solid $range-thumb-border-color; + border-radius: $range-border-radius; + cursor: pointer; + height: $range-thumb-height; + margin-top: -1 * $range-thumb-height / 3; + width: $range-thumb-width; + } + + &:hover::-webkit-slider-thumb { + background: $range-thumb-hover-background-color; + } + + &::-moz-range-track { + background: $range-track-background-color; + border: 1px solid $range-track-border-color; + border-radius: $range-border-radius; + cursor: pointer; + height: $range-track-height; + width: 100%; + } + + &::-moz-range-thumb { + background: $range-thumb-background-color; + border: 1px solid $range-thumb-border-color; + border-radius: $range-border-radius; + cursor: pointer; + height: $range-thumb-height; + width: $range-thumb-width; + } + + &:hover::-moz-range-thumb { + background: $range-thumb-hover-background-color; + } + + &::-ms-fill-lower { + background: $range-track-background-color; + border: 1px solid $range-track-border-color; + } + + &::-ms-fill-upper { + background: $range-track-background-color; + border: 1px solid $range-track-border-color; + } + + &::-ms-track { + background: transparent; + border-color: transparent; + border-width: $range-track-height * 2 0; + color: transparent; + cursor: pointer; + height: $range-track-height; + width: 100%; + } + + &::-ms-thumb { + background: $range-thumb-background-color; + border: 1px solid $range-thumb-border-color; + border-radius: $range-border-radius; + cursor: pointer; + height: $range-thumb-height; + width: $range-thumb-width; + } + + &:hover::-ms-thumb { + background: $range-thumb-hover-background-color; + } + + &:focus::-ms-fill-lower { + background: $range-track-background-color; + border: 1px solid $range-track-border-color; + } + + &:focus::-ms-fill-upper { + background: $range-track-background-color; + border: 1px solid $range-track-border-color; + } +} + +.mailpoet_range_small { + width: 100px; +} + +.mailpoet_range_medium { + width: 180px; +} + +.mailpoet_select { + border-color: $color-editor-border-content; + color: $color-primary-text; + margin: 0; +} + +.mailpoet_select_large { + width: 139px; +} + +.mailpoet_select_medium { + width: 103px; +} + +.mailpoet_select_small { + width: 68px; +} + +.mailpoet_select_half_width { + width: 50%; +} diff --git a/assets/css/src/mailpoet-editor.scss b/assets/css/src/mailpoet-editor.scss index 91ce8f17ae..f753068a1c 100644 --- a/assets/css/src/mailpoet-editor.scss +++ b/assets/css/src/mailpoet-editor.scss @@ -16,7 +16,9 @@ // Components // Actual UI components. +@import 'components-editor/buttons'; @import 'components-editor/common'; +@import 'components-editor/forms'; @import 'components-editor/layout'; @import 'components-editor/components/forms'; @import 'components-editor/components/heading'; @@ -46,4 +48,4 @@ // Utilities // Helpers and overrides. -@import 'components-editor/library-overrides'; +@import 'components-editor/3rd-party-overrides/overrides'; diff --git a/assets/css/src/mailpoet-post-editor-block.scss b/assets/css/src/mailpoet-post-editor-block.scss index 0e951ce174..f411c1b0f5 100644 --- a/assets/css/src/mailpoet-post-editor-block.scss +++ b/assets/css/src/mailpoet-post-editor-block.scss @@ -1 +1,3 @@ +// Components +// Actual UI components. @import 'components-post-editor-block/post-editor-block'; diff --git a/assets/css/src/mailpoet-public.scss b/assets/css/src/mailpoet-public.scss index 2959d54661..373bbb1e73 100644 --- a/assets/css/src/mailpoet-public.scss +++ b/assets/css/src/mailpoet-public.scss @@ -3,5 +3,7 @@ @import 'mixins/breakpoints'; @import 'mixins/clearfix'; +// Components +// Actual UI components. @import 'components/parsley'; @import 'components-public/public';