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

Separate newsletter editor CSS file

Browse Source 
[MAILPOET-2487]
This commit is contained in:
Ján Mikláš
2020-03-11 18:08:29 +01:00
committed by Veljko V
parent cdf52fa6e4
commit f02876b7cf
35 changed files with 75 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

207
assets/css/src/components-editor/components/_block-tools.scss Normal file
View File

@ -0,0 +1,207 @@
.mailpoet_tools {
bottom: 100%;
left: 50%;
overflow: hidden;
position: absolute;
text-align: right;
text-align: center;
transform: translateX(-50%);
transition: visibility 0s linear 250ms;
visibility: hidden;
z-index: 20;
.mailpoet_tools_slider {
background: $color-editor-background-content;
border-radius: 10px 10px 0 0;
display: flex;
flex-direction: row;
padding: 3px 7px;
position: relative;
transform: translateY(100%);
transition: all 250ms cubic-bezier(.42, 0, .58, 1);
}
.mailpoet_resize_active & .mailpoet_tools_slider,
&.mailpoet_display_tools .mailpoet_tools_slider {
transform: translateY(0);
transition: all 250ms cubic-bezier(.42, 0, .58, 1), visibility 0s linear;
visibility: visible;
}
a {
vertical-align: top;
}
.mailpoet_container_horizontal + & {
bottom: auto;
left: 100%;
top: -2px;
transform: none;
.mailpoet_tools_slider {
background: $color-editor-background-column;
border-radius: 0 10px 10px 0;
flex-direction: column;
padding: 7px 3px;
transform: translateY(0) translateX(-100%);
}
&.mailpoet_display_tools,
.mailpoet_resize_active & {
z-index: 21;
.mailpoet_tools_slider {
transform: translateY(0) translateX(0);
}
}
.mailpoet_tool {
display: block;
height: $editor-tool-column-size-with-padding;
width: $editor-tool-column-size-with-padding;
svg {
height: $editor-tool-column-size;
padding: 6px;
width: $editor-tool-column-size;
}
}
.mailpoet_delete_block {
flex-direction: column;
}
.mailpoet_delete_block_activate {
display: block;
max-height: $editor-tool-column-size-with-padding;
max-width: none;
opacity: 1;
}
.mailpoet_delete_block_confirm,
.mailpoet_delete_block_cancel {
display: block;
margin: 0;
width: 100%;
}
.mailpoet_delete_block_activated {
height: auto;
padding: 0 5px 3px;
width: auto;
.mailpoet_delete_block_activate {
max-height: 0;
opacity: 0;
overflow: hidden;
}
.mailpoet_delete_block_confirm,
.mailpoet_delete_block_cancel {
opacity: 1;
}
}
}
}
.mailpoet_tool {
display: inline-block;
height: $editor-tool-size-with-padding;
width: $editor-tool-size-with-padding;
svg {
fill: #fff;
height: $editor-tool-size;
padding: 5px;
vertical-align: top;
width: $editor-tool-size;
}
&:hover svg,
&:focus svg {
opacity: .7;
}
.mailpoet_delete_block_confirmation {
position: absolute;
right: 0;
top: 0;
width: 200px;
}
}
.mailpoet_delete_block {
border-radius: 3px;
display: flex;
flex-direction: row-reverse;
line-height: 24px;
vertical-align: top;
white-space: nowrap;
@include animation-background-color();
.mailpoet_tool {
padding: 0;
}
.mailpoet_delete_block_activate {
display: inline-block;
max-width: $editor-tool-size-with-padding;
opacity: 1;
@include animation-fade-in-and-scale-horizontally();
}
.mailpoet_delete_block_confirm,
.mailpoet_delete_block_cancel {
display: inline-block;
max-height: 0;
max-width: 0;
opacity: 0;
overflow: hidden;
@include animation-fade-in-and-scale-horizontally();
}
.mailpoet_delete_block_confirm {
color: $color-editor-warning-text;
&:hover {
color: $color-editor-warning-text;
text-decoration: underline;
}
}
.mailpoet_delete_block_cancel {
color: $color-editor-warning-alternate;
&:hover {
color: $color-editor-warning-alternate;
text-decoration: underline;
}
}
}
.mailpoet_delete_block_activated {
background-color: $color-editor-warning;
height: auto;
padding: 0 5px;
width: auto;
.mailpoet_delete_block_activate {
max-width: 0;
opacity: 0;
overflow: hidden;
}
.mailpoet_delete_block_confirm,
.mailpoet_delete_block_cancel {
max-height: 20px;
max-width: 90px;
opacity: 1;
}
.mailpoet_delete_block_cancel {
margin-left: 3px;
}
}