@configuratorware/configurator-admingui 1.28.3 → 1.29.1

package/Screens/Item/Components/Styles.scss

@@ -0,0 +1,327 @@
+%optionTile {
+  height: calc(100% - 10px);
+  margin: 5px 0;
+  padding: 15px;
+
+  -webkit-box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
+  -moz-box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
+  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
+}
+
+.optionclassificationEditor-option {
+
+  @extend %optionTile;
+  position: relative;
+
+  .optionIdentifier {
+    font-size: 0.7em;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .optionTitle {
+    font-size: 0.9em;
+    margin: 10px 0 5px 0;
+  }
+
+  .optionActions {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    .optionActionButton-wrapper {
+      width: 33.3%;
+      display: inline-block;
+      text-align: center;
+    }
+  }
+
+  .optionImg {
+    text-align: center;
+    height: 100px;
+    img {
+      max-width: 100%;
+      max-height: 100%;
+    }
+  }
+}
+
+.optionActionButton-wrapper {
+
+}
+
+.options-wrapper {
+  margin-top: 15px;
+  clear: both;
+
+  ul {
+    list-style-type: none;
+    padding: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+    height: 250px;
+    white-space: nowrap;
+
+    li {
+      white-space: normal;
+      display: inline-block;
+      width: calc(25% - 10px);
+      margin-right: 10px;
+      height: 100%;
+      vertical-align: top;
+      padding: 0 10px;
+    }
+  }
+}
+
+.optionclassificationEditor-item {
+
+  .headline {
+    cursor: pointer;
+    font-size: 1.2em;
+    margin-bottom: 15px;
+    line-height: 48px;
+    > * {
+      vertical-align: middle;
+    }
+    button {
+      float: right;
+    }
+
+    &:hover, &.open {
+      color: rgb(0, 188, 212);
+    }
+  }
+
+  .details {
+    display: none;
+
+    &.open {
+      display: block;
+    }
+  }
+
+  &:after {
+    content: '';
+    display: block;
+    clear: both;
+  }
+}
+
+.optionSelection-dialogBody {
+  height: 100vh;
+}
+
+.optionSelection-twoSideSelect {
+  height: calc(100% - 74px);
+
+  .twoSideSelect-sideContainer {
+    height: 100%;
+
+    > div {
+      overflow: auto;
+      max-height: 100%;
+    }
+  }
+}
+
+.twoSideSelect-helper {
+  z-index: 9999;
+}
+
+.optionclassificationEditor-addOption {
+  float: right;
+  margin-bottom: 16px;
+}
+
+.optionclassificationEditor-itemProps {
+  float: left;
+  width: 70%;
+}
+
+.optionSelection-twoSideSelect {
+
+  .twoSideSelect-source {
+    padding-right: 30px;
+  }
+
+  .twoSideSelect-selection {
+    padding-left: 30px;
+  }
+
+  .twoSideSelect-item {
+    line-height: 100px;
+
+    > * {
+      vertical-align: middle;
+    }
+    button {
+      float: none;
+    }
+  }
+}
+
+.optionSelection-headline {
+  margin: 15px 0;
+
+  &:after {
+    content: '';
+    display: block;
+    clear: both;
+  }
+
+  > div {
+    width: 50%;
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  .source-text {
+    padding-right: 30px;
+  }
+
+  .selection-text {
+    padding-left: 30px;
+  }
+
+  .optionSelection-searchBar {
+
+  }
+}
+
+.optionSelection-twoSideSelect-item {
+  display: inline-block;
+  width: calc(100% - 48px);
+  line-height: normal;
+
+  .optionImg {
+    display: inline-block;
+    width: 100px;
+    height: 100px;
+    float: left;
+    text-align: center;
+    margin-right: 10px;
+    img {
+      max-width: 100%;
+      max-height: 100%;
+    }
+  }
+  .optionIdentifier {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 0.9em;
+  }
+  .optionTitle {
+    margin: 15px 0 5px 0;
+  }
+}
+
+.baseConfigurationEditor-optionclassification {
+
+  position: relative;
+  @extend %optionTile;
+
+  .optionIdentifier {
+    font-size: 0.8em;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-bottom: 5px;
+  }
+
+  .optionclassificationTitle {
+    font-size: 1.1em;
+    height: 48px; // for 2 lines
+  }
+
+  .optionTitle {
+    font-size: 0.7em;
+  }
+
+  .optionImg {
+    text-align: center;
+    height: 100px;
+    img {
+      max-width: 100%;
+      max-height: 100%;
+    }
+  }
+
+  .optionAmount {
+    font-size: 0.8em;
+  }
+
+  .optionListContainer {
+    overflow-y: auto;
+    max-height: 165px;
+
+    .optionListItem {
+      min-height: 165px;
+    }
+  }
+}
+
+.configurator-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 1400;
+  display: flex;
+  flex-direction: column;
+  background: white;
+
+  iframe {
+    flex: 1;
+    width: 100%;
+    border: none;
+  }
+
+  .configurator-overlay-close {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+    z-index: 1;
+  }
+
+  .configurator-overlay-actions {
+    text-align: right;
+  }
+}
+
+.optionclassificationEditor-info,
+.baseConfigurationEditor-info {
+  margin-bottom: 30px;
+}
+
+.optionEditor-itemProps {
+  padding-top: 15px;
+}
+
+.baseConfigurationEditor-state {
+  margin-bottom: 30px;
+  padding-top: 3px;
+  font-size: 0.9em;
+  max-width: 50%;
+  padding-left: 30px;
+  position: relative;
+  svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}
+
+.variantsEditor .variantsEditor-tableCell {
+  position: relative;
+}
+
+.variantsEditor .form-input-addButton {
+  position: absolute !important;
+  bottom: 0;
+  right: 0;
+}