@quillforms/block-editor/build-style/style.css

Quill forms block editor

/**
 * Colors
 */
/**
 * Breakpoints & Media Queries
 */
/**
 * Colors
 */
/**
 * Fonts & basic variables.
 */
/**
 * Grid System.
 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
 */
/**
 * Dimensions.
 */
/**
 * Breakpoint mixins
 */
/**
 * Long content fade mixin
 *
 * Creates a fading overlay to signify that the content is longer
 * than the space allows.
 */
/**
 * Styles that are reused verbatim in a few places
 */
/**
 * Allows users to opt-out of animations via OS-level preferences.
 */
/**
 * Reset default styles for JavaScript UI based pages.
 * This is a WP-admin agnostic reset
 */
/**
 * Reset the WP Admin page styles for Gutenberg-like pages.
 */
@keyframes loading-fade {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.7;
  }
}
.block-editor-block-edit__skeleton {
  border: 1px solid #e3e3e3;
  background: #fff;
  border-left: none;
  flex: 1;
  flex-wrap: wrap;
  position: relative;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid #e0e0e0;
}
.block-editor-block-edit__skeleton .renderer-core-block-scroller {
  scrollbar-width: none;
  /* For Firefox */
}
.block-editor-block-edit__skeleton .renderer-core-block-scroller::-webkit-scrollbar {
  display: none;
  /* For Chrome, Safari, and Edge */
}
.block-editor-block-edit__skeleton .renderer-core-field-display-wrapper,
.block-editor-block-edit__skeleton .blocktype-group-block .renderer-core-field-footer {
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
  /* Optional: Remove from tab order */
  tabindex: -1;
}
.block-editor-block-edit__skeleton .renderer-core-block-float-left-layout .renderer-core-block-attachment-wrapper,
.block-editor-block-edit__skeleton .renderer-core-block-float-right-layout .renderer-core-block-attachment-wrapper {
  padding-inline: 20px;
}
.block-editor-block-edit__skeleton .blocktype-group-block .renderer-core-field-display-wrapper {
  pointer-events: auto;
}
.block-editor-block-edit__skeleton input,
.block-editor-block-edit__skeleton textarea {
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
  /* Optional: Remove from tab order */
  tabindex: -1;
}
.block-editor-block-edit__skeleton .renderer-core-child-block {
  opacity: 0.3;
  transition: opacity 0.3s;
}
.block-editor-block-edit__skeleton .renderer-core-child-block.renderer-core-child-block-editor-active {
  opacity: 1;
}

.block-editor-block-edit__skeleton.is-child-active .blocktype-group-block .renderer-components-question-header {
  opacity: 0.3 !important;
}

.block-editor-block-actions__dropdown {
  transform: rotate(90deg);
}
.block-editor-block-actions__dropdown .dashicons {
  font-size: 14px;
}
.block-editor-block-actions__dropdown button {
  height: 28px;
  padding: 2px;
  transition: background 0.3s linear;
}
.block-editor-block-actions__dropdown button span {
  color: #858789 !important;
}
.block-editor-block-actions__dropdown button:hover {
  border: none !important;
  box-shadow: none !important;
  background: #e3e3e3 !important;
}
.block-editor-block-actions__dropdown .components-dropdown-menu__popover .components-popover__content {
  min-width: auto;
  width: 120px;
  overflow-x: hidden !important;
  border-radius: 7px;
  padding: 10px 0;
}
.block-editor-block-actions__dropdown .components-dropdown-menu__popover:after, .block-editor-block-actions__dropdown .components-dropdown-menu__popover:before {
  display: none;
}
.block-editor-block-actions__dropdown .components-menu-item__button {
  padding-left: 1rem;
  outline: none !important;
  box-shadow: none !important;
}
.block-editor-block-actions__dropdown .components-menu-item__button:focus {
  outline: none !important;
  box-shadow: none !important;
}
.block-editor-block-actions__dropdown .block-editor-block-actions__menu-group {
  padding: 0;
}
.block-editor-block-actions__dropdown .block-editor-block-actions__menu-group .block-editor-block-actions__menu-item {
  font-size: 14px;
  margin-bottom: 5px;
}

.block-editor-children-container {
  margin-left: -104px !important;
  margin-right: -30px;
  margin-top: 30px;
  min-height: 200px !important;
  height: auto !important;
}
.block-editor-children-container .block-editor-child-wrapper {
  position: relative;
}
.block-editor-children-container .block-editor-child-wrapper .block-editor-child-connection-point {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  top: 40px;
  left: 55.5px;
}
.block-editor-children-container .block-editor-child-wrapper .block-editor-block-edit-box__content-wrapper > div {
  padding-left: 90px;
}
.block-editor-children-container .block-editor-child-wrapper:hover .block-editor-block-edit-box__content-wrapper > div,
.block-editor-children-container .block-editor-child-wrapper.isSelected .block-editor-block-edit-box__content-wrapper > div {
  background: #D8EEEF !important;
}
.block-editor-children-container .block-editor-block-edit-box__content-wrapper {
  position: relative !important;
}
.block-editor-children-container .block-editor-block-edit-box__content-wrapper > div {
  position: static !important;
}
.block-editor-children-container .block-editor-children-connection-line {
  position: absolute;
  left: -44px;
  top: 0;
  bottom: 0;
  width: 1px;
  z-index: 0;
}

.block-editor-block-controls {
  height: 100%;
  overflow: auto;
  padding: 15px;
}

.media-upload-btn,
.remove-media-btn {
  box-shadow: none !important;
  padding: 4px 9px !important;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-transform: capitalize !important;
  font-size: 12px !important;
  outline: none;
  -webkit-user-select: none;
          user-select: none;
}

.media-upload-btn {
  background: #d3d3d3;
}

.remove-media-btn {
  background: #bf3939;
  color: #fff;
}

.block-editor-block-controls-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}
.block-editor-block-controls-header .admin-components-select-control {
  width: 100%;
}
.block-editor-block-controls-header .admin-components-select-control .components-button {
  height: 45px;
}
.block-editor-block-controls-header .block-controls-blocktype-select {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #333;
  gap: 5px;
}
.block-editor-block-controls-header .block-controls-blocktype-select .admin-components-block-icon-box {
  width: 28px;
}

.block-editor-block-dragging__wrapper {
  overflow: visible;
}
.block-editor-block-dragging__wrapper .block-editor-block-dragging {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  font-size: 13px;
  align-items: center;
  border-radius: 5px;
  box-shadow: 0 5px 3px -3px rgba(0, 0, 0, 0.2), 0 5px 8px 3px rgba(0, 0, 0, 0.14), 0 1px 8px 1px rgba(0, 0, 0, 0.12);
  padding: 8px;
  background: #fff;
  transform: rotate(-10deg);
}
.block-editor-block-dragging__wrapper .block-editor-block-dragging .block-editor-block-dragging__icon-box {
  width: 32px;
  height: 32px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  margin-right: 8px;
}
.block-editor-block-dragging__wrapper .block-editor-block-dragging .block-editor-block-dragging__icon-box svg {
  width: 18px;
  height: 18px;
  fill: #fff;
}

.block-editor-block-layouts {
  display: flex;
  flex-wrap: wrap;
}
.block-editor-block-layouts > div {
  margin-right: 10px;
  margin-bottom: 10px;
}
.block-editor-block-layouts > div:last-child {
  margin-right: 0;
}

.block-editor-border-radius-templates {
  display: flex;
  flex-wrap: wrap;
  max-width: 300px;
}

.block-editor-border-radius-templates > div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border: 1px solid #7c7c7c;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
}
.block-editor-border-radius-templates > div.selected, .block-editor-border-radius-templates > div.selected div {
  border-color: #a120f1;
}

.block-editor-border-radius-templates > div > div {
  border: 1px solid;
  width: 30px;
  height: 30px;
}

.block-editor-delete-alert-modal .components-modal__header {
  background: #fff;
}
.block-editor-delete-alert-modal .components-modal__header .components-modal__header-heading {
  color: #fa5d5d;
}
.block-editor-delete-alert-modal .components-modal__header .components-button.has-icon svg {
  fill: #333;
}