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

package/lib/cjs/styles/_jfReportsPanelElements.scss

@@ -2,6 +2,7 @@
 *   this file includes pane element styles.
 *   @giraykarasinir
 */
+/* stylelint-disable no-descending-specificity */
 
 .jfReport-pane {
 
@@ -22,7 +23,6 @@
     }
 
     &.fieldset {
-      text-transform: uppercase;
       font-weight: 700;
     }
 
@@ -34,8 +34,10 @@
       color: #d13723;
     }
 
-    &-list, &-dropdown, &-input {
+    &-dropdown, &-input {
+      font-size: 0.938rem;
       @include inputDefault;
+      height: 40px;
     }
 
     &-listItem {
@@ -51,10 +53,6 @@
         border-right: none;
       }
 
-      .jfReportSVG {
-        fill: #8382a9;
-      }
-
       &Name {
         flex: 1 1;
         padding-left: 13px;
@@ -63,19 +61,6 @@
           @include text-ellipsis;
         }
       }
-
-      &:hover {
-        background-color: rgba(179, 181, 199, 0.1);
-      }
-
-      &.isSelected {
-        background-color: $ctaGreen;
-        color: $white;
-
-        svg {
-          fill: $white;
-        }
-      }
     }
 
     &-list {
@@ -83,11 +68,15 @@
         padding: 15px;
       }
 
-
       &:not(.withIcons) .toolSection-listItem {
         padding: 10px 5px;
       }
 
+      &.forSegments {
+        height: 54px;
+        border-radius: 4px;
+      }
+
       &:not(.forSegments) .toolSection-listItem {
         .jfReportSVG {
           width: 14px;
@@ -95,10 +84,6 @@
         }
       }
 
-      &.forChart .isSelected .jfReportSVG path {
-        fill: #fff;
-      }
-
       &.dir-row {
         .toolSection-listItem {
           &:first-child {
@@ -111,6 +96,7 @@
           }
         }
       }
+
       &:not(.dir-row) {
         .toolSection-listItem.d-flex {
           &:first-child {
@@ -123,6 +109,56 @@
           }
         }
       }
+
+      &.bigList {
+        gap: 10px;
+        .toolSection-listItem {
+          width: 97px;
+          flex-direction: column;
+          padding: 0;
+          flex: 0;
+          margin-bottom: 10px;
+
+          &.isSelected {
+            background-color: transparent;
+          }
+
+          & > span:not(.toolSection-listItemName) {
+            width: 97px;
+            height: 80px;
+            border-radius: 4px;
+          }
+          span.toolSection-listItemName {
+            font-size: 16px;
+            margin-top: 8px;
+            padding: 0;
+          }
+
+          &:hover {
+            background-color: transparent;
+          }
+        }
+
+        .isSelected {
+          .jfReportSVG path {
+            fill: $white;
+          }
+        }
+
+        &.forChart {
+          .jfReportSVG {
+            width: 40px;
+            height: 40px;
+          }
+        }
+
+        &.forShapes {
+          .jfReportSVG {
+            width: 24px;
+            height: 24px;
+          }
+        }
+      }
     }
 
     &-orientation {
@@ -175,12 +211,12 @@
       padding: 3px 10px;
       font-size: 0.875rem;
       width: 100%;
-      height: 34px;
+      height: 38px;
       cursor: text;
       outline: none;
 
       &.isSmall {
-        width: 56px;
+        width: 99px;
       }
 
       &[type="number"] {
@@ -200,7 +236,6 @@
       padding: 10px 20px;
       font-size: 0.75rem;
       border-radius: 5px;
-      background-color: #f8f8f8;
     }
 
     &.fitForIcons {
@@ -223,7 +258,6 @@
       -webkit-appearance: none;
       background-color: transparent;
       margin-top: 3px;
-      outline: 1px solid $white;
       outline-offset: 0;
       height: 16px;
       cursor: pointer;
@@ -237,7 +271,6 @@
       width: 100%;
       height: 4px;
       border-radius: 4px;
-      background-color: $lightGray;
       z-index: -2;
     }
 
@@ -255,7 +288,6 @@
       background: transparent;
       border: none;
       cursor: pointer;
-      outline: 1px solid $white;
       outline-offset: 1px;
 
       &:focus {
@@ -270,14 +302,8 @@
       height: 16px;
       width: 16px;
       border-radius: 50%;
-      background: $white;
-      border: 3px solid $green;
       cursor: pointer;
       transition: .3s ease-in-out;
-
-      &:hover {
-        background-color: opacify($green, .1);
-      }
     }
 
     .rangeSlider-bar::-moz-range-thumb {
@@ -288,15 +314,9 @@
       width: 16px;
       padding: 0;
       border-radius: 50%;
-      background: $white;
-      border: 3px solid $green;
       cursor: pointer;
       transition: .3s ease-in-out;
       box-sizing: border-box;
-
-      &:hover {
-        background-color: opacify($green, .1);
-      }
     }
 
 
@@ -305,7 +325,6 @@
       top: calc(50% - 2px);
       left: 0;
       height: 4px;
-      background-color: $green;
       border-radius: 4px;
       z-index: -1;
       pointer-events: none;
@@ -325,12 +344,10 @@
     }
 
     .rangeSlider-bar::-ms-fill-lower {
-      background: #01bd6f;
       border-radius: 10px;
     }
 
     .rangeSlider-bar::-ms-fill-upper {
-      background: #cccdd9;
       border-radius: 10px;
     }
 
@@ -338,14 +355,6 @@
       height: 16px;
       width: 16px;
       border-radius: 50%;
-      border: 3px solid #01bd6f;
-      background: #fff;
-    }
-    .rangeSlider-bar:focus::-ms-fill-lower {
-      background: #01bd6f;
-    }
-    .rangeSlider-bar:focus::-ms-fill-upper {
-      background: #cccdd9;
     }
   }
 
@@ -355,7 +364,25 @@
 
   .imageUpload-wrapper {
     padding: 15px 10px;
-    @include inputDefault;
+
+    background-color: transparent;
+    border: 2px dashed rgba(227, 229, 245, 0.5);
+
+    label[for="fileUploader"] {
+      .jfReportButton {
+        background-color: #0099FF;
+        color: $white;
+        border: none;
+        font-size: 16px;
+        font-weight: 500;
+
+        height: 52px;
+
+        svg.jfReportSVG {
+          fill: $white;
+        }
+      }
+    }
 
     img {
       max-width: 80px;
@@ -371,7 +398,6 @@
       }
 
       span:first-child {
-        color: #abadc1;
         margin-bottom: 5px;
         white-space: nowrap;
         overflow: hidden;
@@ -388,18 +414,14 @@
       justify-content: center;
       align-items: center;
       flex-direction: column;
-      height: 138px;
+      height: 156px;
       white-space: nowrap;
+      border-radius: 4px;
 
       &.isError {
         border-color: $danger;
       }
 
-      &.isDragging {
-        background: $white;
-        border: 1px dashed $green;
-      }
-
       &.isLoading {
         pointer-events: none;
       }
@@ -419,8 +441,8 @@
       }
 
       .uploadInfo {
-        color: $infoGray;
         margin-top: 10px;
+        color: #F3F3FE;
 
         &.isError {
           color: $danger;
@@ -434,18 +456,17 @@
 
   .userUploads {
     position: relative;
-    margin: 0 -16px 8px;
-    padding: 0 10px;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, 74px);
+    justify-content: space-between;
 
     &-image {
-      width: 64px;
-      height: 64px;
-      border: 1px solid $inputGrayBorder;
-      border-radius: 4px;
-      margin: 6px;
-      padding: 0;
       position: relative;
+      height: 60px;
+      border-radius: 4px;
+      background-color: $white;
       overflow: hidden;
+      margin-bottom: 8px;
 
       img {
         display: block;
@@ -469,24 +490,23 @@
         bottom: 0;
         left: 0;
         background-color: rgba(66, 119, 255, 0.5);
+        border: 3px solid #0099FF;
         z-index: 1;
       }
 
       &:after {
-        top: calc(50% - 10px);
-        left: calc(50% - 10px);
-        width: 20px;
-        height: 20px;
+        top: calc(50% - 15px);
+        left: calc(50% - 15px);
+        width: 30px;
+        height: 30px;
         transform: translateY(15px);
         border-radius: 50%;
-        background: no-repeat center url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg fill='none' height='24' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
+        background: no-repeat center url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='15' cy='15' r='15' fill='%230099FF'/%3E%3Cpath d='M12.6075 20.8695C12.6065 20.8695 12.6065 20.8695 12.6055 20.8695C12.2959 20.8695 12.0159 20.7448 11.8138 20.5433L6.77092 15.5278C6.61613 15.3398 6.52148 15.0973 6.52148 14.8324C6.52148 14.2218 7.02232 13.7271 7.64048 13.7271C7.91456 13.7271 8.16498 13.8245 8.35921 13.9852L12.6114 18.2157L21.5683 9.45078C21.7704 9.25308 22.0494 9.13037 22.357 9.13037C22.9762 9.13037 23.478 9.62608 23.478 10.2377C23.478 10.5454 23.3508 10.823 23.1458 11.0236L13.3952 20.5481C13.1941 20.7468 12.916 20.8695 12.6084 20.8695C12.6075 20.8695 12.6075 20.8695 12.6065 20.8695H12.6075Z' fill='white'/%3E%3C/svg%3E%0A");
         transition-delay: .1s;
         z-index: 2;
       }
 
       &:hover, &.selected {
-        border: 1px solid $blue;
-
         &:before, &:after {
           transform: translateY(0);
           opacity: 1;
@@ -497,16 +517,46 @@
   }
 
   .userUploads-actions {
+    flex-direction: row-reverse;
+    margin-top: 12px;
 
     .jfReportButton {
-      width: 105px;
+      width: 150px;
+      height: 40px;
       padding: 6px;
+
+      border-radius: 2px;
+      border: none;
+      color: $white;
+      font-weight: 500;
+
+      &.isSuccess {
+        background-color: #0099FF;
+      }
+      &.isDanger {
+        background-color: #FF6100;
+      }
     }
   }
 
   .fileUploader-url {
     margin-top: 10px;
 
+    .jfReportButton {
+      width: 150px;
+      height: 40px;
+      padding: 6px;
+
+      border-radius: 2px;
+      border: none;
+      color: $white;
+      font-weight: 500;
+
+      &.isSuccess {
+        background-color: #0099FF;
+      }
+    }
+
     .toolSection-input {
       margin-bottom: 10px;
 
@@ -522,37 +572,20 @@
 
   .colorPicker {
     &-wrapper {
-      padding: 3px 10px;
-      background-color: $inputGray;
-      border: 1px solid #ccc;
-      border-radius: 4px;
+      // padding: 3px 10px;
+      border-radius: 2px;
       cursor: pointer;
 
-      &: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");
-        width: 32px;
-        height: 100%;
-        position: absolute;
-        pointer-events: none;
-        cursor: pointer;
-        right: 0;
-        top: 0;
-        content: "";
-        background-repeat: no-repeat;
-        background-position: center;
-      }
-
       &.pickerVisible:after {
         transform: rotateX(-180deg);
       }
 
       .toolSection-input {
-        max-width: calc(100% - 42px);
-        height: 26px;
-        padding: 0;
-        margin: 0 5px;
+        height: 38px;
         border: none;
+        border-right: 1px solid;
         background-color: transparent;
+        border-radius: 0;
       }
     }
 
@@ -570,9 +603,9 @@
 
     &-preview {
       flex-shrink: 0;
-      width: 20px;
-      height: 20px;
-      border: 1px solid $white;
+      width: 32px;
+      height: 32px;
+      margin: 3px;
       border-radius: 2px;
     }
   }
@@ -591,6 +624,7 @@
 
   .hasUnit {
     position: relative;
+    display: flex;
 
     .toolSection-input {
       padding-right: 15px;
@@ -599,10 +633,14 @@
     &:after {
       content: "";
       position: absolute;
-      top: 10px;
-      right: 6px;
-      font-size: .675rem;
-      color: $infoGray;
+      display: flex;
+      height: 38px;
+      right: 0;
+      font-size: 15px;
+      border-left: 1px solid #303339;
+      align-items: center;
+      width: 38px;
+      justify-content: center;
     }
 
     &.isPercentage {
@@ -625,28 +663,37 @@
 .toolSection-dropdownWrapper {
   position: relative;
 
-  &:after {
+  &:before, &:after {
     content: "";
     position: absolute;
-    top: 0;
-    right: 0;
-    width: 32px;
-    height: 100%;
-    cursor: pointer;
     pointer-events: none;
-    border-radius: 0 3px 3px 0;
-    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");
-    background-repeat: no-repeat;
-    background-position: center;
-    transition: .3s ease-in-out;
+  }
+
+  &:before {
+    display: inline-block;
+    width: 0;
+    height: 0;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 7px solid;
+    top: calc(50% - 4px);
+    right: 14px;
+  }
+
+  &:after {
+    display: inline-block;
+    width: 1px;
+    top: 0;
+    bottom: 0;
+    background-color: #303339;
+    right: 38px;
+    background-image: none;
   }
 
   .toolSection-dropdown {
-    font-size: 0.875rem;
     width: 100%;
-    height: 34px;
     cursor: pointer;
-    padding: 2px 8px;
+    padding: 2px 10px;
     appearance: none;
     /* stylelint-disable-next-line property-no-vendor-prefix */
     -webkit-appearance: none;
@@ -658,26 +705,12 @@
 
   &.isDark {
     .toolSection-dropdown {
-      background-color: #2E354A;
       border: none;
-      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;
       background-size: 26%;
     }
-
-    &: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");
-      }
-    }
   }
 }
 
@@ -685,8 +718,15 @@
   margin-right: 20px;
 
   &:after {
-    width: 22px;
-    background-size: 9px;
+    display: none;
+  }
+
+  &:before {
+    right: 7px;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-top: 6px solid $white;
+    top: calc(50% - 3px);
   }
 
   .toolSection-dropdown {
@@ -694,6 +734,48 @@
     height: 24px;
     font-size: 0.675rem;
     padding-left: 10px;
+    color: $white;
+  }
+}
+
+.jfReportModal {
+  .toolToggle-custom {
+    background-color: #B3B5C6;
+
+    &:before {
+      background: #fff;
+    }
+  }
+
+  .toolToggle label {
+    color: rgba(#fff,.6);
+
+    &.forUnchecked {
+      color: #fff;
+
+      &:after {
+        background: #fff;
+      }
+    }
+  }
+
+  .toolToggle-input {
+    &:checked ~ {
+      .jfReportToggle-custom {
+        background: #4C7FF4;
+      }
+
+      .jfReportToggle-label {
+
+        &.forChecked {
+          color: #fff;
+        }
+
+        &.forUnchecked {
+          color: rgba(#fff,.6);
+        }
+      }
+    }
   }
 }
 
@@ -713,7 +795,6 @@
       border-radius: 30px;
       cursor: pointer;
       margin-left: 10px;
-      background-color: #B3B5C6;
       transition: .3s ease-in-out;
       &:before {
         content: "";
@@ -723,7 +804,6 @@
         left: calc(0% + 3px);
         transition: .3s ease-in-out;
         border-radius: 50%;
-        background: #fff;
         box-shadow: 0 2px 10px rgba(0,0,0,.1);
         position: absolute;
       }
@@ -731,7 +811,6 @@
 
     &.toggled .toolToggle-custom {
       border-color: transparent;
-      background-color: $ctaGreen;
       &:before {
         left: calc(100% - 19px);
       }
@@ -793,3 +872,53 @@
 
   // Toggle //
 }
+
+.jfReport-Modal {
+  .toolToggle.toggled .toolToggle-custom {
+    background-color: $ctaGreen;
+  }
+}
+
+.imageUpload-wrapper:not(.dropArea) {
+  background-color: #555F6E;
+  border: 1px solid #303339;
+  border-radius: 2px;
+  padding: 11px;
+  img {
+    border-radius: 4px;
+  }
+
+  .imageUpload-info {
+    position: relative;
+
+    span {
+      font-size: 16px;
+    }
+
+    button {
+      position: absolute;
+      bottom: 0;
+    }
+  }
+}
+
+.jfReportPalette-item {
+  .colorHolder {
+    .countMore {
+      justify-content: center;
+    }
+  }
+
+  .colorHolder.fewColor {
+    .color:not(:first-child) {
+      margin-left: 8px;
+    }
+    .arrowContainer {
+      margin-left: auto;
+    }
+  }
+}
+
+.jfReportChoice[for="selectAll"] {
+  margin-bottom: 13px;
+}