@jotforminc/dnd-builder 1.0.2 → 2.0.0-beta.4

package/lib/esm/styles/_jfLightTheme.scss

@@ -0,0 +1,384 @@
+/* stylelint-disable no-descending-specificity */
+
+.lightMode {
+  .jfReport-toolbox, .jfPresentation-toolbox {
+    background-color: #f1f1f5;
+  }
+
+  .jfReport-pane {
+    .paneClose {
+      background-color: $white;
+
+      .jfReportSVG {
+        fill: #B3B5C5;
+      }
+
+      &:hover {
+        .jfReportSVG {
+          fill: rgba(#B3B5C5, .7);
+        }
+      }
+    }
+
+    .toolItem-tabs {
+      background-color: $white;
+    }
+
+    .toolItem:not(.toolSection) {
+      border-bottom: 1px solid #dde0ea;
+    }
+
+    &.jfReport-settings .iconFor-slides .jfReportSVG {
+      fill: #2C3345;
+    }
+
+    &.jfReport-toolbox .toolItem .jfReportSVG {
+      fill: $additionalGray;
+    }
+
+    .toolToggle {
+
+      .toolToggle-custom {
+        background-color: #B3B5C6;
+
+        &:before {
+          background: #fff;
+        }
+      }
+
+      &.toggled .toolToggle-custom {
+        background-color: $ctaGreen;
+      }
+
+      label {
+        color: rgba(#fff,.6);
+
+        &.forUnchecked {
+          color: #fff;
+
+          &:after {
+            background: #fff;
+          }
+        }
+      }
+
+      &-input {
+        display: none;
+
+        &:checked ~ {
+          .jfReportToggle-custom {
+            background: #4C7FF4;
+          }
+
+          .jfReportToggle-label {
+
+            &.forChecked {
+              color: #fff;
+            }
+
+            &.forUnchecked {
+              color: rgba(#fff,.6);
+            }
+          }
+        }
+      }
+    }
+
+    &.jfReport-settings {
+      background-color: $white;
+    }
+
+    .jfReportAccordion label {
+      background-color: #EFEFF6;
+      border-bottom-color: #DDE0EA;
+    }
+
+    .toolTabs label {
+      background-color: $white;
+      color: #2a3244;
+      border-bottom: 1px solid #e1e1e6;
+
+      &:hover {
+        color: rgba(#2a3244, .7);
+      }
+    }
+
+    .toolTabs-indicator {
+      background-color: $blue;
+    }
+
+    .jfReport-searchContainer {
+      background-color: $white;
+      border-bottom: 1px solid #dde0ea;
+    }
+
+    .section-search-button.search-icon {
+      &:before {
+        background: rgb(255,255,255);
+        background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(#FAFAFC,1) 100%);
+      }
+    }
+
+    .section-search-input {
+      background-color: #FAFAFC;
+      border: 1px solid #CCCDDA;
+      color: #2C3345;
+    }
+
+    .section-search-button.search-delete:hover .delete {
+      fill: rgba(#8586A6, .7);
+    }
+
+    .no-search-result-text {
+      color: #8586A6;
+    }
+
+    &.jfReport-toolbox .toolTitle {
+      background-color: $white;
+    }
+
+    .previewPanel {
+      background-color: #EFEFF6;
+    }
+
+    .toolSection.forAspect {
+      border-bottom: 1px solid $inputGrayBorder;
+    }
+
+    .toolSection + hr {
+      border-top: 1px solid #efeff6;
+    }
+
+    .toolSection-notifier {
+      background-color: #f8f8f8;
+    }
+
+    .rangeSlider .rangeSlider-bar {
+      outline: 1px solid $white;
+    }
+
+    .rangeSlider:after {
+      background-color: $lightGray;
+    }
+
+    .rangeSlider-bar::-moz-range-track {
+      outline: 1px solid $white;
+    }
+
+    .rangeSlider-bar::-webkit-slider-thumb {
+      background: $white;
+      border: 3px solid $green;
+
+      &:hover {
+        background-color: opacify($green, .1);
+      }
+    }
+
+    .rangeSlider-bar::-moz-range-thumb {
+      background: $white;
+      border: 3px solid $green;
+
+      &:hover {
+        background-color: opacify($green, .1);
+      }
+    }
+
+    .rangeSlider-indicator {
+      background-color: $green;
+    }
+
+    .rangeSlider-bar::-ms-fill-lower {
+      background: #01bd6f;
+    }
+
+    .rangeSlider-bar::-ms-fill-upper {
+      background: #cccdd9;
+    }
+
+    .rangeSlider-bar::-ms-thumb {
+      border: 3px solid #01bd6f;
+      background: #fff;
+    }
+
+    .rangeSlider-bar:focus::-ms-fill-lower {
+      background: #01bd6f;
+    }
+
+    .rangeSlider-bar:focus::-ms-fill-upper {
+      background: #cccdd9;
+    }
+
+    .imageUpload-wrapper {
+      @include inputDefault;
+
+      &.imageUpload-info span:first-child {
+        color: #abadc1;
+      }
+    }
+
+    .dropArea.isDragging {
+      background: $white;
+      border: 1px dashed $green;
+    }
+
+    .uploadInfo {
+      color: $infoGray;
+    }
+
+    .colorPicker-wrapper {
+      background-color: $inputGray;
+      border: 1px solid #ccc;
+
+      .toolSection-input {
+        border-right-color: $inputGray;
+      }
+    }
+
+    .hasUnit:after {
+      color: $infoGray;
+    }
+
+    .toolSection-dropdownWrapper {
+      &:before {
+        border-top-color: #564632;
+      }
+
+      &:after {
+        background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 16 9'%3E%3Cpath fill-rule='evenodd' d='M242.656854,19.2928932 C243.047379,18.9023689 243.680544,18.9023689 244.071068,19.2928932 C244.461592,19.6834175 244.461592,20.3165825 244.071068,20.7071068 L238.414214,26.363961 L244.071068,32.0208153 C244.461592,32.4113396 244.461592,33.0445046 244.071068,33.4350288 C243.680544,33.8255531 243.047379,33.8255531 242.656854,33.4350288 L236.292893,27.0710678 C235.902369,26.6805435 235.902369,26.0473785 236.292893,25.6568542 L242.656854,19.2928932 Z' transform='rotate(-90 113.182 131.364)'/%3E%3C/svg%3E%0A");
+      }
+
+      &.isDark {
+        .toolSection-dropdown {
+          background-color: #2E354A;
+          color: #fff;
+        }
+
+        &:after {
+          background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 16 9'%3E%3Cpath fill-rule='evenodd' fill='%23A8AABF' d='M242.656854,19.2928932 C243.047379,18.9023689 243.680544,18.9023689 244.071068,19.2928932 C244.461592,19.6834175 244.461592,20.3165825 244.071068,20.7071068 L238.414214,26.363961 L244.071068,32.0208153 C244.461592,32.4113396 244.461592,33.0445046 244.071068,33.4350288 C243.680544,33.8255531 243.047379,33.8255531 242.656854,33.4350288 L236.292893,27.0710678 C235.902369,26.6805435 235.902369,26.0473785 236.292893,25.6568542 L242.656854,19.2928932 Z' transform='rotate(-90 113.182 131.364)'/%3E%3C/svg%3E%0A");
+          background-color: #2E354A;
+        }
+
+        &:hover {
+          .toolSection-dropdown, &:after {
+            background-color: lighten(#2E354A, 5);
+          }
+
+          &:after {
+            background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 16 9'%3E%3Cpath fill-rule='evenodd' fill='%23FFF' d='M242.656854,19.2928932 C243.047379,18.9023689 243.680544,18.9023689 244.071068,19.2928932 C244.461592,19.6834175 244.461592,20.3165825 244.071068,20.7071068 L238.414214,26.363961 L244.071068,32.0208153 C244.461592,32.4113396 244.461592,33.0445046 244.071068,33.4350288 C243.680544,33.8255531 243.047379,33.8255531 242.656854,33.4350288 L236.292893,27.0710678 C235.902369,26.6805435 235.902369,26.0473785 236.292893,25.6568542 L242.656854,19.2928932 Z' transform='rotate(-90 113.182 131.364)'/%3E%3C/svg%3E%0A");
+          }
+        }
+      }
+    }
+  }
+
+  .forAllSlides .pageActionsBar {
+    background-color: $white;
+
+    .forPageActionsBar {
+      background-color: #EDEDF4;
+      color: $additionalGray;
+    }
+  }
+
+  .forAllSlides:not(.jfReport-toolbox) .paneClose .jfReportSVG {
+    fill: #fff;
+  }
+
+  .forSettings .toolSection-list.forChart {
+    .isSelected {
+      path {
+        fill: $white;
+      }
+    }
+  }
+
+  .forSlides .paneToggler {
+    background-color: #2E354A;
+  }
+
+
+  &.forAllSlides:not(.jfReport-toolbox) {
+    background-color: #EDEDF4;
+
+    .paneClose {
+      background-color: #2E354A;
+
+      &:hover {
+        background: lighten(#2E354A, 5);
+      }
+    }
+  }
+
+  .jfReport-pane:not(.jfReport-settings) {
+    .toolItem:not(.toolTitle) {
+      background-color: #fafafc;
+
+      .toolItem-icon {
+        background-color: $white;
+      }
+
+      &:hover {
+        background-color: #3A69ED;
+
+        .toolItem-icon {
+          background-color: $blue;
+          color: $white;
+
+          .jfReportSVG {
+            fill: $white;
+          }
+
+          .icon-bar path {
+            fill: $white;
+          }
+        }
+
+        .toolItem-name {
+          color: $white;
+        }
+      }
+    }
+  }
+
+  .toolSection-list:not(.bigList) {
+    border: 1px solid #d3d4de;
+
+    .toolSection-listItem:not(:last-child) {
+      border-right: 1px solid #d3d4de;
+    }
+  }
+
+
+  .toolSection .toolSection-listItem {
+    .jfReportSVG {
+      fill: #8382a9;
+    }
+
+    &:hover {
+      background-color: rgba(179, 181, 199, 0.1);
+    }
+
+    &.isSelected {
+      background-color: $ctaGreen;
+      color: $white;
+
+      svg {
+        fill: $white;
+      }
+    }
+  }
+
+  .bigList {
+    .toolSection-listItem {
+      & > span:first-child {
+        background-color: #8382a9;
+      }
+
+      &.isSelected {
+        & > span:first-child {
+          background-color: $ctaGreen;
+        }
+      }
+    }
+  }
+}

package/lib/esm/styles/_jfPresentation.scss

@@ -23,7 +23,7 @@
 
   &-barContainer {
     position: absolute;
-    bottom: 15px;
+    bottom: 50px;
   }
 
   &-overlay {

package/lib/esm/styles/_jfReportsAccordion.scss

@@ -39,10 +39,12 @@
   }
   label {
     position: relative;
+    display: flex;
+    align-items: center;
     cursor: pointer;
-    background-color: #EFEFF6;
-    padding: 13px 20px;
-    border-bottom: 1px solid #DDE0EA;
+    padding: 5px 20px;
+    height: 55px;
+    border-bottom: 1px solid;
     transition: $transition;
 
     &:after {
@@ -50,11 +52,11 @@
       position: absolute;
       top: calc(50% - 3px);
       right: 20px;
-      width: 10px;
-      height: 6px;
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 16 9'%3E%3Cpath fill='%232b3245' fill-rule='evenodd' d='M242.656854,19.2928932 C243.047379,18.9023689 243.680544,18.9023689 244.071068,19.2928932 C244.461592,19.6834175 244.461592,20.3165825 244.071068,20.7071068 L238.414214,26.363961 L244.071068,32.0208153 C244.461592,32.4113396 244.461592,33.0445046 244.071068,33.4350288 C243.680544,33.8255531 243.047379,33.8255531 242.656854,33.4350288 L236.292893,27.0710678 C235.902369,26.6805435 235.902369,26.0473785 236.292893,25.6568542 L242.656854,19.2928932 Z' transform='rotate(-90 113.182 131.364)'/%3E%3C/svg%3E%0A");
-      transform: rotateX(0deg);
-      opacity: .4;
+      width: 0;
+      height: 0;
+      border-left: 5px solid transparent;
+      border-right: 5px solid transparent;
+      border-top: 7px solid;
       transition: $transition;
     }
 

package/lib/esm/styles/_jfReportsButton.scss

@@ -53,9 +53,6 @@
     }
 
     &.forPageActionsBar {
-      background-color: #EDEDF4;
-      color: $additionalGray;
-
       &.withRadius {
         border-radius: 100px;
         height: 26px;

package/lib/esm/styles/_jfReportsChoice.scss

@@ -64,7 +64,7 @@
       }
 
       &:hover:before {
-        border-color: $green;
+        border-color: #0099FF;
       }
     }
   }
@@ -94,19 +94,19 @@
     &:checked + .jfReportChoice-labelIcon {
       .jfReportChoice-label:before {
         background-image: $jfReportChoice-checkIcon;
-        background-color: $green;
-        border-color: $green;
+        background-color: #0099FF;
+        border-color: #0099FF;
       }
       .jfReportChoice-label.radio:before {
         background-image: none;
         background-color: transparent;
-        border-color: $green;
+        border-color: #0099FF;
       }
       .jfReportChoice-label.radio:after {
         position: absolute;
         left: 4px;
         top: 4px;
-        background-color: $green;
+        background-color: #0099FF;
         border-radius: 50%;
         width: 10px;
         height: 10px;

package/lib/esm/styles/_jfReportsFloatings.scss

@@ -54,7 +54,7 @@
 
   &.forBar {
     height: 50px;
-    background: #212736;
+    background: #404651;
     border-radius: 6px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
     max-width: 436px;
@@ -135,7 +135,7 @@
     }
 
     .controllerItem {
-      background: #2E354A;
+      background: #303339;
       border-radius: 3px;
       border: none;
       transition: $transition;

package/lib/esm/styles/_jfReportsHelpers.scss

@@ -14,7 +14,7 @@
 @mixin inputDefault {
   background-color: $inputGray;
   border: 1px solid $inputGrayBorder;
-  border-radius: 4px;
+  border-radius: 2px;
   transition: .3s ease-in-out;
 
   &:hover {
@@ -24,6 +24,22 @@
 
 // Mixins //
 
+// Functions //
+
+@function em($pxval, $base: $baseSize) {
+  @if (unitless($pxval)) {
+    $pxval: $pxval * 1px;
+  }
+
+  @if (unitless($base)) {
+    $base: $base * 1px;
+  }
+
+  @return $pxval / $base * 1em;
+}
+
+// Functions //
+
 // Helpers //
 
 .jfReport, .jfPresentation, .jfReportModal, .pageThumbnailHelper {
@@ -247,19 +263,4 @@
   }
 }
 
-.jfReport .bg- {
-
-  &blue {
-    background-color: $blue;
-  }
-
-  &green {
-    background-color: $green;
-  }
-
-  &white {
-    background-color: $white;
-  }
-}
-
 // Helpers //

package/lib/esm/styles/_jfReportsIconSelector.scss

@@ -28,6 +28,11 @@
         background-color: $white;
         border-color: $blue;
       }
+
+      .jfReportSVG {
+        width: 20px;
+        height: 20px;
+      }
     }
   }
 

package/lib/esm/styles/_jfReportsMain.scss

@@ -20,20 +20,15 @@ body {
   }
 
   &-toolbox {
-    border-right: 1px solid #B1B2C3;
     box-shadow: 5px 0 0 0 rgba(106, 110, 143, 0.1);
-    background-color: #f1f1f5;
   }
 
   &-settings {
-    border-left: 1px solid #B1B2C3;
     box-shadow: -3px 0 0 0 rgba(106, 110, 143, 0.1);
-    background-color: $white;
   }
 
   &-pane {
     position: absolute;
-    width: 260px;
     transition: all .5s ease-in-out;
     z-index: 2;
 
@@ -65,37 +60,23 @@ body {
 
 .leftPaneIsActive {
   .jfReport-pages {
-    margin-left: 260px;
+    margin-left: $left-pane-width;
   }
 }
 
 .rightPaneIsActive {
   .jfReport-pages {
-    margin-right: 260px;
+    margin-right: $right-pane-width;
   }
 
   .jfReport-pane.otherOpened:not(.jfReport-toolbox).forSlides .paneToggler {
     top: 15px;
-    right: 277px;
+    right: calc(#{$right-pane-width} + 15px);
   }
 }
 
 .slidesPaneIsActive {
   .jfReport-pane.otherOpened:not(.jfReport-toolbox).forSettings .js-openRightPanel {
-    right: 277px;
-  }
-}
-
-.jfReport:not(.black) {
-  &:before {
-    position: absolute;
-    left: 0;
-    right: 0;
-    content: "";
-    height: 5px;
-    z-index: 3;
-    pointer-events: none;
-    user-select: none;
-    background-color: rgba(106, 110, 143, 0.1);
+    right: calc(#{$right-pane-width} + 15px);
   }
 }

package/lib/esm/styles/_jfReportsPages.scss

@@ -83,20 +83,29 @@
   }
 }
 
+.jfReport .forSlides {
+  .jfReport-pane-footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    padding: 10px 20px;
+    width: 100%;
+    border-top: 1px solid #4C5360;
+  }
+}
+
 .jfReport .forSlides .pageAdder {
-  position: absolute;
-  bottom: 0;
-  left: 0;
   display: flex;
-  padding: 11px;
-  background-color: #fff;
+  padding: 10px 20px 10px 16px;
+  background-color: #0099FF;
   border-top: 1px solid #DDE0EA;
+  border-radius: 4px;
   box-shadow: 0 -5px 0 rgba(#6A6E8F, 0.05);
-  color: $blue;
+  color: #ffffff;
   transition: $transition;
 
   .icon-plus {
-    fill: $blue;
+    fill: #ffffff;
   }
 
   span {
@@ -104,10 +113,10 @@
   }
 
   &:hover {
-    background-color: #DDE0EA;
+    background-color: #0099FF;
 
     .jfReportSVG {
-      fill: $blue;
+      fill: #fff;
     }
   }
 }