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

package/lib/cjs/styles/_jfDarkTheme.scss

@@ -0,0 +1,556 @@
+/* stylelint-disable no-descending-specificity */
+
+.darkMode {
+  .jfReport-toolbox, .jfPresentation-toolbox {
+    background-color: #565F6E;
+  }
+
+  .jfReport-pane {
+    .toolSection-dropdown, .toolSection-input {
+      background-color: #555F6E;
+    }
+
+    /* stylelint-disable selector-max-class */
+    .toolSection-list.forIcons {
+      font-size: 0.938rem;
+      background-color: #555F6E;
+      border: 1px solid #303339;
+      border-radius: 2px;
+
+      svg {
+        fill: #fff;
+      }
+
+      .tabMenu {
+        background-color: #303339;
+        &-link {
+          padding: 9px;
+          &:hover:not(.is-active) {
+            background-color: #303339;
+          }
+        }
+        &-link.is-active svg {
+          fill: #303339;
+        }
+      }
+
+      .iconSelector-item.isSelected {
+        .iconSelector-label {
+          background-color: $blue;
+        }
+      }
+
+      .jfReportInput {
+        background: #404651;
+        border: 1px solid #303339;
+        border-radius: 2px;
+
+        &:focus {
+          color: #879AAD;
+        }
+      }
+    }
+
+    .toolSection-dropdown, .toolSection-input, .colorPicker-wrapper {
+      border-color: #303339;
+      color: $white;
+
+      &:hover {
+        border-color: darken(#303339, 10);
+      }
+    }
+
+    .forSubWrapper {
+      background-color: #303339;
+      color: #B4B9BE;
+      border: none;
+
+      .icon-arrow {
+        height: 12px;
+        fill: #B4B9BE;
+      }
+
+      &:hover {
+        background-color: #4C5360;
+      }
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background: #394049;
+    }
+
+    .paneClose {
+      .jfReportSVG {
+        fill: $white;
+      }
+
+      &:hover {
+        .jfReportSVG {
+          fill: rgba($white, .7);
+        }
+      }
+    }
+
+    .toolItem-tabs {
+      background-color: #394049;
+    }
+
+    .toolItem:not(.toolSection) {
+      border-bottom: 1px solid #4C5360;
+    }
+
+    &.jfReport-settings .iconFor-slides .jfReportSVG {
+      fill: $white;
+    }
+
+    &.jfReport-toolbox .toolItem .jfReportSVG {
+      fill: $white;
+      color: $white;
+    }
+
+    .toolItem.toolTitle {
+      color: $white;
+    }
+
+    .toolSection-title {
+      color: $white;
+    }
+
+    .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);
+            }
+          }
+        }
+      }
+    }
+
+    .jfReportAccordion label {
+      background-color: #303339;
+      border-bottom-color: #4C5360;
+      color: $white;
+
+      &:after {
+        border-bottom-color: #fff;
+      }
+    }
+
+    .toolTabs label {
+      background-color: #303339;
+      color: $white;
+      border-bottom: 1px solid #4C5360;
+
+      &:hover {
+        color: rgba($white, .7);
+      }
+    }
+
+    &.jfReport-settings {
+      background-color: #404651;
+
+      .toolTabs label {
+        background-color: #303339;
+      }
+    }
+
+    .toolTabs-indicator {
+      background-color: #6281DF;
+    }
+
+    .jfReport-searchContainer {
+      background-color: #303339;
+      border-bottom: 1px solid #4C5360;
+    }
+
+    .jfReport-search .section-search-icon {
+      stroke: #AEB0B8;
+    }
+
+    .section-search-button.search-delete {
+      &:before {
+        background: #394049;
+        background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(#394049,1) 100%,);
+      }
+    }
+
+    .section-search-button.search-delete:hover .delete {
+      fill: $white;
+    }
+
+    .section-search-input {
+      background-color: #394049;
+      border: 1px solid hsl(219, 12%, 34%);
+      color: $white;
+
+      &::placeholder {
+        color: #AEB0B8;
+      }
+
+      &:focus {
+        border-color: #4277FF;
+      }
+    }
+
+    .no-search-result-text {
+      color: rgba($white, .7);
+    }
+
+    &.jfReport-toolbox .toolTitle {
+      background-color: #565F6E;
+    }
+
+    .previewPanel {
+      background-color: #EFEFF6;
+    }
+
+    .toolSection.forAspect {
+      border-bottom: 1px solid $inputGrayBorder;
+    }
+
+    .toolSection + hr {
+      border-top: 1px solid #4C5360;
+    }
+
+    .toolSection-notifier {
+      background-color: #f8f8f8;
+    }
+
+    .rangeSlider .rangeSlider-bar {
+      outline: 1px solid #404651;
+    }
+
+    .rangeSlider:after {
+      background-color: $lightGray;
+    }
+
+    .rangeSlider-bar::-moz-range-track {
+      outline: 1px solid $white;
+    }
+
+    .rangeSlider-bar::-webkit-slider-thumb {
+      background: $white;
+      border: 3px solid #0099FF;
+
+      &:hover {
+        background-color: opacify(#0099FF, .1);
+      }
+    }
+
+    .rangeSlider-bar::-moz-range-thumb {
+      background: $white;
+      border: 3px solid #0099FF;
+
+      &:hover {
+        background-color: #0099FF;
+      }
+    }
+
+    .rangeSlider-indicator {
+      background-color: #0099FF;
+    }
+
+    .rangeSlider-bar::-ms-fill-lower {
+      background: #0099FF;
+    }
+
+    .rangeSlider-bar::-ms-fill-upper {
+      background: #cccdd9;
+    }
+
+    .rangeSlider-bar::-ms-thumb {
+      border: 3px solid #0099FF;
+      background: #fff;
+    }
+
+    .rangeSlider-bar:focus::-ms-fill-lower {
+      background: #0099FF;
+    }
+
+    .rangeSlider-bar:focus::-ms-fill-upper {
+      background: #cccdd9;
+    }
+
+    .imageUpload-wrapper {
+      .imageUpload-info {
+        span { color: $white; }
+        .isDanger { color: #FF6100; }
+      }
+    }
+
+    .dropArea.isDragging {
+      background: $white;
+      border: 1px dashed $green;
+    }
+
+    .uploadInfo {
+      color: $infoGray;
+    }
+
+    .colorPicker-wrapper {
+      background-color: #555F6E;
+      border: 1px solid #303339;
+
+      .toolSection-input {
+        border-right-color: #303339;
+      }
+    }
+
+    .hasUnit:after {
+      color: $infoGray;
+    }
+
+    .toolSection-dropdownWrapper {
+      &:before {
+        border-top-color: #303339;
+      }
+
+      &: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: #404651;
+    color: $white;
+
+    .forPageActionsBar {
+      background-color: #EDEDF4;
+      color: $additionalGray;
+    }
+  }
+
+  .forAllSlides:not(.jfReport-toolbox) .paneClose .jfReportSVG {
+    width: 16px;
+    height: 16px;
+  }
+
+  .forSlides .paneToggler {
+    background-color: #404651;
+  }
+
+
+  &.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: #565F6E;
+
+      .toolItem-icon {
+        background-color: #394049;
+      }
+
+      .toolItem-name {
+        color: $white;
+      }
+
+      &:hover {
+        background-color: #6281DF;
+
+        .toolItem-icon {
+          background-color: #7691E2;
+          color: $white;
+
+          .jfReportSVG {
+            fill: $white;
+          }
+
+          .icon-bar path {
+            fill: $white;
+          }
+        }
+      }
+    }
+  }
+
+  .toolSection-list:not(.bigList) {
+    border: 1px solid #303339;
+    background-color: #555F6E;
+
+    .toolSection-listItem:not(:last-child) {
+      border-right: 1px solid #303339;
+    }
+  }
+
+  .toolSection-list:not(.forChart):not(.forShapes) .toolSection-listItem {
+    .jfReportSVG path, .jfReportSVG circle {
+      fill: $white;
+    }
+  }
+
+  .toolSection .toolSection-listItem {
+    &:hover {
+      background-color: rgba(179, 181, 199, 0.1);
+    }
+
+    &.isSelected {
+      background-color: #0099FF;
+      color: $white;
+
+      svg {
+        fill: $white;
+      }
+    }
+  }
+
+  .toolSection .jfReportChoice-label {
+    color: $white;
+  }
+
+  &.jfReport .forOptions.forDimension {
+    background-color: #7C7F87;
+
+    &:hover {
+      background-color: lighten(#7C7F87, 5);
+    }
+  }
+
+  .toolSection-list.forShapes {
+    .jfReportSVG {
+      fill: #565F6E;
+    }
+
+    .toolSection-listItem.isSelected {
+      .jfReportSVG {
+        fill: $white;
+      }
+    }
+  }
+
+  .bigList {
+    .toolSection-listItem {
+      & > span:first-child {
+        background-color: #fff;
+      }
+      & > span:last-child {
+        color: $white;
+      }
+
+      &.isSelected {
+        & > span:first-child {
+          background-color: #0099FF;
+        }
+      }
+    }
+  }
+
+  .jfReport-pane.forSlides {
+    .controllerItem:hover {
+      svg {
+        fill: $white;
+      }
+    }
+
+    .pageAdder {
+      border-top: 0;
+    }
+    .thumbnailWrapper {
+      svg {
+        fill: #B4B9BE;
+      }
+
+      .thumbnailOrder {
+        color: #fff;
+      }
+
+      &:hover {
+        background-color: rgba(48, 51, 57, 0.5);
+
+        .thumbnailOrder {
+          color: #fff;
+        }
+      }
+
+      &.isSelected {
+        background-color: #303339;
+        border-left-color: #0099FF;
+        &:hover {
+          .thumbnailOrder {
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
+
+  .jfReportPalette {
+    label.toolSectionTitle {
+      color: $white;
+    }
+  }
+
+  .jfReport-pane-footer {
+    background-color: #404651;
+  }
+}