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

Refactor scss, split long file into more files

Browse Source 
[MAILPOET-2880]
This commit is contained in:
Pavel Dohnal
2020-05-12 11:02:52 +02:00
committed by Veljko V
parent deea23d23f
commit f00fcc98a7
5 changed files with 149 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
assets/css/src/components-form-editor/_form-placement.scss Normal file
View File

@@ -0,0 +1,128 @@
.form-placement-option-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
margin: 0 -8px;
}
.form-placement-option {
background-color: #fff;
border: solid $form-placement-option-border $form-placement-option-base-color;
border-radius: 4px;
box-shadow: 0 1px 2px 0 $form-placement-option-base-color;
cursor: pointer;
display: flex;
flex-direction: column;
height: $form-placement-option-height;
justify-content: space-between;
margin-bottom: 16px;
padding: 6px;
pointer-events: auto;
position: relative;
text-align: center;
width: $form-placement-option-width;
}
.form-placement-settings-overlay {
background-color: rgba(0, 0, 0, .3);
border-radius: 2px;
height: 100%;
left: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
z-index: 3;
}
.form-placement-option-active {
border: solid $form-placement-option-active-border $gutenberg-control-active-color;
box-shadow: 0 4px 8px 0 rgba(156, 166, 204, .5);
}
.form-placement-settings {
width: 400px;
}
.form-placement-option-label {
align-items: center;
color: $form-placement-option-text-color;
display: flex;
font-size: 14px;
height: 40px;
justify-content: center;
pointer-events: none;
width: 100%;
z-index: 2;
p {
margin-bottom: 0;
}
}
.form-placement-option-settings {
display: flex;
flex-direction: row;
height: 25px;
justify-content: space-between;
pointer-events: none;
width: 100%;
z-index: 4;
}
.form-placement-settings-oval {
background-color: $form-placement-option-oval;
border: solid 1px $form-placement-option-oval-border;
border-radius: 7px;
height: 13px;
pointer-events: none;
width: 13px;
}
.form-placement-settings-check {
height: 13px;
pointer-events: none;
width: 13px;
z-index: 4;
}
.form-placement-settings-icon {
height: 14px;
pointer-events: none;
width: 14px;
z-index: 4;
svg {
fill: $form-placement-option-base-color;
}
}
.form-placement-settings-icon-hover {
svg {
fill: white;
}
}
.form-placement-option-icon {
background-color: #fff;
box-shadow: 0 4px 18px 0 rgba(68, 75, 102, .15);
height: 63px;
margin: 0 auto;
object-fit: contain;
pointer-events: none;
width: 76px;
z-index: 2;
svg {
height: 63px;
width: 76px;
}
}
.mailpoet-form-placement-save {
display: flex;
flex-direction: row;
justify-content: flex-end;
}

17
assets/css/src/components-form-editor/_sidebar-style-settings.scss Normal file
View File

@@ -0,0 +1,17 @@
.mailpoet-styles-settings {
display: grid;
grid-auto-flow: row;
grid-row-gap: 20px;
.components-base-control {
margin-bottom: 0;
}
}
.mailpoet-styles-settings-heading {
font-size: 15px;
.component-color-indicator {
vertical-align: text-bottom;
}
}

145
assets/css/src/components-form-editor/_sidebar.scss
View File

@@ -83,16 +83,6 @@
} }
} }
.mailpoet-styles-settings {
display: grid;
grid-auto-flow: row;
grid-row-gap: 20px;
.components-base-control {
margin-bottom: 0;
}
}
// In CSS coming from Gutenberg the color picker width is dependent on the width on his siblings. // In CSS coming from Gutenberg the color picker width is dependent on the width on his siblings.
// This rules unify width across all style setting sidebars // This rules unify width across all style setting sidebars
.components-circular-option-picker { .components-circular-option-picker {
@@ -103,14 +93,6 @@
} }
} }
.mailpoet-styles-settings-heading {
font-size: 15px;
.component-color-indicator {
vertical-align: text-bottom;
}
}
.CodeMirror { .CodeMirror {
border: 1px solid #eee; border: 1px solid #eee;
@@ -119,127 +101,6 @@
} }
} }
.form-placement-option-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
margin: 0 -8px;
}
.form-placement-option {
background-color: #fff;
border: solid $form-placement-option-border $form-placement-option-base-color;
border-radius: 4px;
box-shadow: 0 1px 2px 0 $form-placement-option-base-color;
cursor: pointer;
display: flex;
flex-direction: column;
height: $form-placement-option-height;
justify-content: space-between;
margin-bottom: 16px;
padding: 6px;
pointer-events: auto;
position: relative;
text-align: center;
width: $form-placement-option-width;
}
.form-placement-settings-overlay {
background-color: rgba(0, 0, 0, .3);
border-radius: 2px;
height: 100%;
left: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
z-index: 3;
}
.form-placement-option-active {
border: solid $form-placement-option-active-border $gutenberg-control-active-color;
box-shadow: 0 4px 8px 0 rgba(156, 166, 204, .5);
}
.form-placement-settings {
width: 400px;
}
.form-placement-option-label {
align-items: center;
color: $form-placement-option-text-color;
display: flex;
font-size: 14px;
height: 40px;
justify-content: center;
pointer-events: none;
width: 100%;
z-index: 2;
p {
margin-bottom: 0;
}
}
.form-placement-option-settings {
display: flex;
flex-direction: row;
height: 25px;
justify-content: space-between;
pointer-events: none;
width: 100%;
z-index: 4;
}
.form-placement-settings-oval {
background-color: $form-placement-option-oval;
border: solid 1px $form-placement-option-oval-border;
border-radius: 7px;
height: 13px;
pointer-events: none;
width: 13px;
}
.form-placement-settings-check {
height: 13px;
pointer-events: none;
width: 13px;
z-index: 4;
}
.form-placement-settings-icon {
height: 14px;
pointer-events: none;
width: 14px;
z-index: 4;
svg {
fill: $form-placement-option-base-color;
}
}
.form-placement-settings-icon-hover {
svg {
fill: white;
}
}
.form-placement-option-icon {
background-color: #fff;
box-shadow: 0 4px 18px 0 rgba(68, 75, 102, .15);
height: 63px;
margin: 0 auto;
object-fit: contain;
pointer-events: none;
width: 76px;
z-index: 2;
svg {
height: 63px;
width: 76px;
}
}
.mailpoet-toggle-list { .mailpoet-toggle-list {
display: grid; display: grid;
@@ -270,9 +131,3 @@
color: #ff5301 !important; color: #ff5301 !important;
} }
} }
.mailpoet-form-placement-save {
display: flex;
flex-direction: row;
justify-content: flex-end;
}

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

@@ -25,10 +25,12 @@
// Components // Components
// Actual UI components. // Actual UI components.
@import './components-form-editor/custom-field';
@import './components-form-editor/form-title'; @import './components-form-editor/form-title';
@import './components-form-editor/header'; @import './components-form-editor/header';
@import './components-form-editor/helpscout'; @import './components-form-editor/helpscout';
@import './components-form-editor/sidebar'; @import './components-form-editor/form-placement';
@import './components-form-editor/preview'; @import './components-form-editor/preview';
@import './components-form-editor/block-editor'; @import './components-form-editor/block-editor';
@import './components-form-editor/custom-field'; @import './components-form-editor/sidebar';
@import './components-form-editor/sidebar-style-settings';

0
assets/js/src/form_editor/components/image_settings.tsx Normal file
View File