piratepoet/assets/css/src/components/_formEditor.scss

@import '../../../../node_modules/codemirror/lib/codemirror';
@import '../../../../node_modules/codemirror/theme/neo';

$icons: '../../img/form_editor_icons.png';
$handle_icon: '../../img/handle.png';

#mailpoet_form_name {
  font-size: 23px;
}

#mailpoet_form_history {
  display: none;
}

#mailpoet_form_editor {
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 20px rgba(0, 0, 0, 0.1);
  padding: 20px;
  position: relative;
  width: 300px;
}

#mailpoet_form_editor:before, #mailpoet_form_editor:after {
  background: transparent;
  bottom: 12px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  content: ' ';
  height: 10px;
  left: 12px;

  position: absolute;
  transform: skew(-5deg) rotate(-5deg);
  width: 40%;
  z-index: -1;
}

#mailpoet_form_editor:after {
  left: auto;
  right: 12px;
  transform: skew(5deg) rotate(5deg);
}

/* Warnings in blocks*/
.mailpoet_warning {
  color: #900;
  font-weight: bold;
}

.block_placeholder {
  border: 0 none;
  font-weight: bold;
  height: 0;
  line-height: 30px;
  margin: 0 auto;
  overflow: hidden;
  text-align: center;
  text-indent: -9999px;
  width: 298px;
  z-index: 9500;
}

.block_placeholder.active {
  /*border:1px dashed #dfdfdf;*/
  /*background-color:#f5f5f5;*/
  background-color: #4cb7e1;
  display: block;
  height: 30px;
  overflow: auto;
  text-indent: 0;
}

.block_placeholder.hover {
  background-color: #0074a2;
  border-color: #0074a2;
  color: #fff;
}

.mailpoet_form_block {
  background-color: #fff;
  border: 0 none;
  height: 20px;
}

.mailpoet_form_block.highlighted {
  border: 1px solid #5897FB;
  padding: 9px 17px;
}

.mailpoet_form_block img {
  max-width: 100%;
}

/* Widget styles */
.mailpoet_form_block p {
  margin: 5px 0;
  word-wrap: break-word;
}

/* Widget: checkbox, radio */
.mailpoet_radio,
.mailpoet_checkbox {
  margin: -2px 5px 0 0;
}

/* MailPoet Form wrapper */
#mailpoet_form_wrapper {
  margin: 20px 0 0 0;
  position: relative;
}

/* MailPoet Form container */
#mailpoet_form_container {
  margin: 0;
  width: 340px;
}

#mailpoet_form_editor.loading, #mailpoet_form_toolbar.loading {

  background: url(loading.gif) no-repeat center center #fcfcfc;
}

#mailpoet_form_toolbar.loading {
  border: 1px solid #dfdfdf;
}

#mailpoet_form_toolbar.loading #mailpoet_toolbar_fields {
  visibility: hidden;
  z-index: 1;
}

/* Tabs : content/images/styles/themes */
#wysija-add-field {
  float: none;
}

#mailpoet_form_toolbar {
  position: absolute;
  width: 400px;
  z-index: 999;
}

#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs {
  border-bottom: 1px solid #dfdfdf;
  line-height: 0;
}

#mailpoet_form_toolbar .add_custom_field {
  padding: 15px 0 5px 0;
  text-align: center;
}

#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs li, #mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a {
  display: inline-block;
  *display: inline;
  *float: left;
  height: 30px;
  line-height: 30px;

  margin: 0;
  outline: 0 none;
  padding: 0;
}

#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a {
  color: #a6a6a6;
  outline: 0 none;
  text-decoration: none;
}

#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs li {
  margin: 0 0 1px 0;
}

#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a {
  background: linear-gradient(center top, #F9F9F9, #F5F5F5);
  background-color: #F5F5F5;
  border: 1px solid #DFDFDF;
  border-radius: 3px 3px 0 0;
  box-shadow: 0 1px 0 #FFFFFF inset;
  font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
  padding: 0 7px;
}

#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a:hover {
  background-color: #eee;
}

#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a.selected {
  background: #fcfcfc;
  border-bottom: 0 none;
  color: #000;
  filter: none;
  padding-bottom: 1px;
}

#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs .last a,

.wysija_params {
  display: none !important;
}

#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs, #mailpoet_form_toolbar #mailpoet_toolbar_fields {
  margin: 0;

  position: relative;
  z-index: 9998;
}

/* edit form name */
#mailpoet_form_name_input {
  vertical-align: bottom;
}

/* wysija widgets */
.mailpoet_form_widget {
  height: 25px;
  line-height: 25px;
  width: 298px;
  z-index: 9999 !important;
}

.mailpoet_toolbar_section {
  background: none repeat scroll 0 0 #fff;
  border: 1px solid #e5e5e5;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  margin-bottom: 0;
  max-height: 1000px;
  min-width: 255px;
  overflow: hidden;
  position: relative;
  transition: max-height 0.5s ease-in-out;
}

.mailpoet_toolbar_section > div {
  height: 100%;
  min-width: 255px;
  overflow: auto;
  padding: 10px 20px 20px 20px;
}

.mailpoet_toolbar_section h3 {
  margin: 10px;
  position: relative;
}

.mailpoet_toolbar_section.closed {
  max-height: 38px;
}

.mailpoet_toolbar_section .mailpoet_toggle {
  height: 38px;
  position: absolute;
  right: 0;
  top: 0;
  width: 27px;
}

.mailpoet_toolbar_section .mailpoet_toggle:focus {
  box-shadow: none !important;
  outline: 0 none !important;
}

.mailpoet_toolbar_section .mailpoet_toggle:before {
  content: '\f142';
  display: inline-block;
  font: 400 20px / 1 dashicons;
  padding: 8px 10px;
  position: relative;
  right: 12px;
  speak: none;
  text-decoration: none !important;
  top: 0;
}

.mailpoet_toolbar_section.closed .mailpoet_toggle:before {
  content: '\f140';
}

#mailpoet_form_styles {
  margin: 10px;
  max-width: 318px;
  min-height: 300px;
  resize: vertical;
  width: 318px;
}

#mailpoet_form_toolbar a.mailpoet_form_field,
.mailpoet_form_widget {
  background: linear-gradient(center 0, #F9F9F9, #ececec);
  background-color: #F5F5F5;
  border: 1px solid #DFDFDF;
  border-radius: 3px;
  box-shadow: 0 1px 0 #FFFFFF inset;
  color: #222;
  cursor: move;
  display: block;
  font-size: 12px;
  font-weight: bold;
  height: 25px;
  line-height: 25px;
  padding: 0 7px;
  text-shadow: 0 1px 0 #FFFFFF;
}

#mailpoet_form_toolbar a.mailpoet_form_field.disabled {
  color: #cccccc;
  cursor: pointer;
  pointer-events: none;
}

.mailpoet_form_field_edit {
  bottom: 13px;
  position: absolute;
  right: 27px;
}

.mailpoet_form_field_delete {
  bottom: 13px;
  position: absolute;
  right: 7px;
}

/* toolbar: fields */
#mailpoet_toolbar_fields li {
  padding: 0 0 10px 0;
  position: relative;
}

#mailpoet_toolbar_fields li.notice {
  background: none !important;
  border: 0 none !important;
  font-size: 11px;
  font-style: italic;
  margin: 0 !important;
}

/* blocks */
.mailpoet_form_block {
  display: inline-table;
  display: block;
  height: 1%;
  margin: 0;
  margin: 0;
  padding: 10px 18px 10px 18px;
  position: relative;
  z-index: 98;
}

.mailpoet_form_block.dragging {
  pointer-events: none;
  z-index: 99000;
}

.mailpoet_form_block:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}

.mailpoet_form_block.hover {
  border: 1px dashed #bbb;
  margin: 0 0 0 0;
  padding: 9px 17px 9px 17px;
}

.mailpoet_form_block.static {
  /*padding:0;
    margin:0;*/
  background-color: #999;
}

/* controls*/
.mailpoet_form_block .wysija_controls {
  background: linear-gradient(center 0, #eee, #bbb);
  background-color: #dfdfdf;
  border: 1px solid #ccc;
  border-radius: 2px;
  height: 20px;
  left: -1px;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
  top: -22px;
  width: 298px;
}

.mailpoet_form_block .wysija_controls li {
  float: left;
  height: 20px;
  width: 20px;
}

.mailpoet_form_block .wysija_controls a {
  color: #000;
  cursor: pointer;
  float: left;
  font-size: 120%;
  font-weight: bold;
  height: 20px;
  line-height: 20px;
  text-align: center;
  width: 20px;
}

.mailpoet_form_block .wysija_controls a.remove {
  margin: 0 0 0 1px;
}

.mailpoet_form_block .handle_container,
.mailpoet_form_block .handle_container a {
  float: none;
  width: 40px !important;
}

.mailpoet_form_block .handle_container {
  left: 140px;
  position: absolute;
  top: 0;
}

/* controls & icons */
.wysija_controls a span,
.wysija_gallery .wysija_tools a span,
.wysija_image .wysija_tools a span,
.wysija_text .wysija_tools a span, #mailpoet_toolbar_fields a span {

  display: block;
  height: 20px;
  width: 20px;
}

/* toolbar: full width button */
/* color picker in control bars */
.wysija_controls span input {
  color: transparent;
  margin: 2px 0 0 0;
  padding: 0;
}

/* left alignment button */
.alignment-left span {
  background: url($icons) no-repeat 0 0;
}

.alignment-left.active span,
.alignment-left:hover span {
  background: url($icons) no-repeat 0 -20px;
}

/* center alignment button */
.alignment-center span {
  background: url($icons) no-repeat -20px 0;
}

.alignment-center.active span,
.alignment-center:hover span {
  background: url($icons) no-repeat -20px -20px;
}

/* right alignment button */
.alignment-right span {
  background: url($icons) no-repeat -40px 0;
}

.alignment-right.active span,
.alignment-right:hover span {
  background: url($icons) no-repeat -40px -20px;
}

/* linking */
.add-link span {
  background: url($icons) no-repeat -60px 0;
}

.add-link.active span,
.add-link:hover span {
  background: url($icons) no-repeat -60px -20px;
}

.remove-link span {
  background: url($icons) no-repeat -80px 0;
}

.remove-link.active span,
.remove-link:hover span {
  background: url($icons) no-repeat -80px -20px;
}

/* block controls */
.remove span,
.delete span {
  background: url($icons) no-repeat -100px 0;
}

.remove.active span,
.remove:hover span,
.delete.active span,
.delete:hover span {
  background: url($icons) no-repeat -100px -20px;
}

.handle span {
  background: url($handle_icon) no-repeat;
  cursor: move;
  width: 40px !important;
}

.duplicate span {
  background: url($icons) no-repeat -140px 0;
}

.duplicate.active span,
.duplicate:hover span {
  background: url($icons) no-repeat -140px -20px;
}

.settings span {
  background: url($icons) no-repeat -160px 0;
}

.settings.active span,
.settings:hover span {
  background: url($icons) no-repeat -160px -20px;
}

.icon-plus span {
  background: url($icons) no-repeat -200px 0;
}

.icon-plus.active span,
.icon-plus:hover span {
  background: url($icons) no-repeat -200px -20px;
}

.icon-minus span {
  background: url($icons) no-repeat -220px 0;
}

.icon-minus.active span,
.icon-minus:hover span {
  background: url($icons) no-repeat -220px -20px;
}

/* wysija options */
.wysija_options {
  display: none;
}

/* wysija block settings */
.wysija_settings {
  position: absolute;
  z-index: 1000;
}

.wysija_settings a {
  background: linear-gradient(center 0, #F9F9F9, #ececec);
  background-color: #F5F5F5;
  border: 1px solid #DFDFDF;
  border-radius: 3px;
  box-shadow: 0 1px 0 #FFFFFF inset;
  color: #222;
  cursor: pointer;
  display: block;
  font-size: 12px;
  font-weight: normal;
  padding: 5px 5px 3px 27px;
  text-decoration: none;
  text-shadow: 0 1px 0 #FFFFFF;
}

.wysija_settings a span {
  height: 20px;
  left: 5px;
  position: absolute;
  top: 3px;
  width: 20px;
}

/* labels */
.mailpoet_form_block label {
  display: block;
  margin: 0 5px 0 0;
}

/* form settings: success message */
#mailpoet_on_success textarea, #mailpoet_on_success select {

  width: 100%;
}

#mailpoet_on_success textarea {
  height: 50px;
  min-height: 50px;
  resize: vertical;
}

/* make sure textareas within the form editor are not resizeable */
.mailpoet_form_block textarea {
  resize: none;
}

/* remove click events from inputs within form editor */
.mailpoet_form_block input,
.mailpoet_form_block textarea {
  pointer-events: none;
}

/* form export */
#mailpoet_form_export textarea {
  display: none;
  font-size: 85%;
  height: 150px;
  min-height: 150px;
  resize: vertical;
  width: 340px;
}

/** Styling for WP 3.8 and higher */
.mailpoet_form_field_edit,
.mailpoet_form_field_delete {
  text-decoration: none;
}

.mailpoet_form_field_edit:hover .dashicons-admin-generic:before,
.mailpoet_form_field_delete:hover .dashicons-dismiss:before,
.settings:hover .dashicons-admin-generic:before {
  color: #2ea2cc;
}

.mailpoet_form_field_edit span,
.mailpoet_form_field_delete span {
  background: none !important;
  color: #999;
}

.mailpoet_form_field_delete span:before {
  font-size: 21px;
}

/* Code Mirror */
.CodeMirror {
  border: 1px solid #eee;
}

/* Settings */
#mailpoet_form_segments.parsley-error + span .select2-selection {
  border: 1px solid #b94a48;
}

.mailpoet_form_field_settings_text {
  min-height: 100px;
  width: 100%;
}