Reduce editor's common styles lenght
[MAILPOET-2487]
This commit is contained in:
Ján Mikláš
Veljko V
45
assets/css/src/components-editor/_buttons.scss
Normal file
45
assets/css/src/components-editor/_buttons.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
170
assets/css/src/components-editor/_forms.scss
Normal file
170
assets/css/src/components-editor/_forms.scss
Normal file
@@ -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%;
|
||||
}
|
||||
@@ -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';
|
||||
|
||||
@@ -1 +1,3 @@
|
||||
// Components
|
||||
// Actual UI components.
|
||||
@import 'components-post-editor-block/post-editor-block';
|
||||
|
||||
@@ -3,5 +3,7 @@
|
||||
@import 'mixins/breakpoints';
|
||||
@import 'mixins/clearfix';
|
||||
|
||||
// Components
|
||||
// Actual UI components.
|
||||
@import 'components/parsley';
|
||||
@import 'components-public/public';
|
||||
|
||||
Reference in New Issue
Block a user