alchemy_cms 7.0.11 → 7.1.0.pre.b1

data/app/assets/stylesheets/alchemy/elements.scss

@@ -25,23 +25,25 @@
   }
 }
 
-#element_area {
-  height: calc(100vh - #{$top-menu-height + $toolbar-height});
-  overflow-x: hidden;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
+.elements-window-toolbar {
+  @extend %gradiated-toolbar;
+  display: flex;
+  padding: 2 * $default-padding;
+  border-bottom: $default-border;
 
+  .right {
+    display: inline-block;
+    margin-left: auto;
+  }
+}
+
+#element_area {
   .sortable-elements {
-    min-height: 100px;
+    min-height: 100%;
   }
 
   textarea {
     width: 100%;
-
-    &.has_tinymce {
-      // We need to do this, because globally all texareas have height: auto !important
-      height: 140px !important;
-    }
   }
 
   > .message {
@@ -49,23 +51,34 @@
   }
 }
 
-#main-content-elements,
-.element-editor.is-fixed .nestable-elements {
+alchemy-tinymce {
+  display: block;
+}
+
+#main-content-elements {
+  --scrollable-elements-offset: #{$top-menu-height + $toolbar-height};
   padding: 2 * $default-padding $default-padding 2px;
 }
 
+#fixed-elements sl-tab-panel {
+  --scrollable-elements-offset: #{$top-menu-height + $toolbar-height +
+    $tab-bar-height};
+}
+
+.scrollable-elements {
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  height: calc(100vh - var(--scrollable-elements-offset, 0));
+}
+
 .element-title {
+  flex-grow: 1;
   overflow: hidden;
   white-space: nowrap;
-  max-width: 85%;
-  margin-left: $default-margin;
   text-overflow: ellipsis;
   transition: color $transition-duration;
 
-  .has-hint & {
-    max-width: 80%;
-  }
-
   .preview_text_quote {
     font-size: $small-font-size;
     line-height: 15px;
@@ -78,44 +91,40 @@
   line-height: 15px;
 }
 
-.element-handle,
-.element-title {
-  display: inline-block;
-  vertical-align: middle;
+.element-handle {
+  display: inline-flex;
+  cursor: move;
+  padding-right: $default-padding;
 }
 
-.element-handle {
+.element-toggle {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
   position: relative;
-  width: 18px;
-  height: 18px;
+  transition: none;
+  background: none;
+  border-color: transparent;
+  color: inherit;
+  box-shadow: none;
+  padding: 0;
+  margin: 0;
 
-  .element.icon {
-    position: absolute;
-    top: 3px;
-    left: 1px;
+  &:hover {
+    &:not(:focus):not(:active) {
+      background-color: $default-border-color;
+      border-color: transparent;
+      cursor: pointer;
+    }
   }
-}
-
-.draggable .element-handle {
-  cursor: move;
-}
 
-.ajax-folder {
-  position: absolute;
-  width: 16px;
-  height: 16px;
-  right: 8px;
-  top: 10px;
-  transition: none;
+  .icon {
+    pointer-events: none;
 
-  .error_icon {
-    float: left;
-    width: 14px;
-    height: 15px;
-    text-align: center;
-    background-color: white;
-    border: 1px solid #935b5b;
-    color: #935b5b;
+    &.hidden {
+      display: none;
+    }
   }
 }
 
@@ -124,38 +133,40 @@
   border: 1px solid $default-border-color;
   border-radius: $default-border-radius;
   background-color: $light-gray;
-  margin-bottom: 2 * $default-margin;
+  margin: 2 * $default-margin 0;
   transition: box-shadow $transition-duration;
+  scroll-margin: 2 * $default-margin;
+
+  &:first-child {
+    margin-top: 0;
+  }
 
   &.hidden {
     display: block;
     border-style: dashed;
-    opacity: 0.5;
+    opacity: 0.7;
     transition: opacity $transition-duration;
 
+    &:hover {
+      opacity: 1;
+    }
+
     > .element-header {
       background-color: transparent;
-      background-image: linear-gradient(
-        45deg,
-        $light-gray 25%,
-        $medium-gray 25%,
-        $medium-gray 50%,
-        $light-gray 50%,
-        $light-gray 75%,
-        $medium-gray 75%,
-        $medium-gray 100%
-      );
-      background-size: 28.28px 28.28px;
-    }
 
-    &:hover {
-      opacity: 1;
+      .element-hidden-icon {
+        display: inline;
+      }
     }
   }
 
   &.is-fixed {
     border-width: 0;
     border-radius: 0;
+
+    .nestable-elements {
+      padding: 2 * $default-padding $default-padding / 2;
+    }
   }
 
   &.not-draggable {
@@ -190,13 +201,15 @@
   }
 
   &.selected:not(.is-fixed),
-  &:hover {
+  &:hover:not(.is-fixed) {
     &:not(.hidden) {
       box-shadow: 0 2px 8px rgba(#9b9b9b, 0.75);
     }
   }
 
-  &.selected:not(.is-fixed):not(.folded):not(.dirty):not(.hidden):not(.deprecated) {
+  &.selected:not(.is-fixed):not(.folded):not(.dirty):not(.hidden):not(
+      .deprecated
+    ) {
     > .element-header {
       background-color: $element-header-active-bg-color;
       color: $element-header-active-color;
@@ -204,6 +217,11 @@
   }
 
   &.folded {
+    .element-toolbar,
+    .element-body,
+    .element-footer,
+    .nestable-elements,
+    .message,
     .nested-elements {
       display: none;
     }
@@ -214,38 +232,45 @@
       .nestable-elements {
         box-shadow: inset 0 4px 8px -2px darken($medium-gray, 15%);
         background-color: $medium-gray;
-        padding: 8px 4px 4px;
-
-        .add-nestable-element-button {
-          width: calc(50% - 8px);
-          margin: 4px;
-          text-align: center;
-        }
+        padding: $default-padding;
       }
     }
   }
 
   &.dragged {
-    border-style: dotted;
-    overflow: hidden;
+    border: 1px solid var(--color-grey_dark);
+    background-color: var(--color-grey_medium);
+    opacity: 0.5;
+    box-shadow: none !important;
 
     &:not(.compact) {
-      height: 36px !important;
-      transition: height 0.2s;
+      height: 36px;
+      overflow: hidden;
+    }
+
+    * {
+      visibility: hidden;
     }
   }
 
   &.compact {
+    .element-hidden-label {
+      display: none;
+    }
+
     .element-toolbar {
       visibility: hidden;
       position: absolute;
       height: 35px;
-      padding: 2px 0;
       opacity: 0;
       z-index: 1;
-      border-bottom: $default-border;
+      box-shadow: 0 1px 1px $default-border-color;
       background-color: $light-gray;
       transition: all $transition-duration;
+
+      sl-switch::part(label) {
+        display: none;
+      }
     }
 
     .element-header:hover + .element-toolbar,
@@ -263,15 +288,11 @@
       }
     }
 
-    .element-title {
-      max-width: 75%;
-    }
-
-    &:not(.folded) .ajax-folder {
+    &:not(.folded) .element-toggle {
       pointer-events: none;
 
       i:before {
-        content: fa-content($fa-var-ellipsis-v);
+        content: $ri-more-2-line;
       }
     }
 
@@ -280,16 +301,25 @@
     }
 
     .ingredient-editor,
-    .picture_thumbnail {
+    .ingredient-editor.picture .picture_thumbnail {
       width: 100%;
     }
 
-    .picture_thumbnail {
-      margin: 0;
+    .ingredient-editor.picture {
+      padding-right: 1px;
+
+      alchemy-link-buttons {
+        width: 33.333%;
+        flex-wrap: nowrap;
+        display: inline-flex;
+        justify-content: space-between;
+      }
     }
 
-    .thumbnail_background {
-      height: 115px;
+    .picture_thumbnail {
+      img {
+        width: auto;
+      }
     }
 
     textarea,
@@ -351,7 +381,9 @@
 }
 
 .element-header {
-  position: relative;
+  display: flex;
+  gap: $default-padding;
+  align-items: center;
   padding: 2 * $default-padding;
   background-color: $element-header-bg-color;
   @extend .disable-user-select;
@@ -368,38 +400,37 @@
     color: inherit;
     transition: color $transition-duration;
   }
+}
 
-  > .hint-with-icon {
-    position: absolute;
-    right: 32px;
-    top: 10px;
-
-    .hint-bubble {
-      left: auto;
-      right: -24px;
-      transform: none;
-
-      &:before {
-        left: auto;
-        right: 24px;
-        transform: none;
-      }
-    }
-  }
+.element-hidden-icon {
+  display: none;
+  white-space: nowrap;
 }
 
 .element-toolbar {
-  padding: $default-padding 0;
+  display: flex;
+  width: 100%;
+  padding: $default-padding;
+  gap: $default-padding;
   height: $element-toolbar-height;
+  border-top: 1px solid $medium-gray;
+
+  .is-fixed & {
+    border-top-width: 0;
+  }
+
   border-bottom: 1px solid $medium-gray;
 }
 
-.element_tools {
-  display: flex;
-  width: 100%;
+alchemy-publish-element-button {
+  display: inline-flex;
+  align-items: center;
+  margin-left: auto;
+  margin-right: $default-margin;
 
-  .button_with_label {
-    margin: 0 2px;
+  sl-switch {
+    --thumb-size: 10px;
+    --height: 12px;
   }
 }
 
@@ -424,7 +455,7 @@
     padding-bottom: 0;
   }
 
-  .ingredient-group-header {
+  summary {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -433,17 +464,13 @@
     padding: $default-padding 1px;
   }
 
-  .ingredient-group-ingredients {
-    display: none;
-  }
-
-  &.expanded {
-    .ingredient-group-ingredients {
-      display: block;
+  &[open] {
+    .ingredient-group-expand::before {
+      content: $ri-arrow-down-s-line;
     }
 
-    .ingredient-group-expand {
-      @extend .fa-angle-up;
+    > :not(summary) {
+      box-sizing: border-box;
     }
   }
 }
@@ -453,14 +480,6 @@
   flex-wrap: wrap;
 }
 
-.picture_thumbnail .picture_image {
-  overflow: hidden;
-
-  img.img_paddingtop {
-    @extend .disable-user-select;
-  }
-}
-
 #fixed-elements {
   min-height: 100px;
 }
@@ -472,66 +491,56 @@
   right: 0;
 
   .icon_button {
-    @include button-defaults(
-      $background-color: $medium-gray,
-      $hover-color: darken($medium-gray, 5%),
-      $border: 1px solid #c0c0c0,
-      $box-shadow: none,
-      $hover-border-color: #c0c0c0,
-      $line-height: 30px,
-      $padding: 0,
-      $margin: 0,
-      $border-radius: 0,
-      $focus-border-color: $focus-color,
-      $focus-box-shadow: 0 0 0 2px $focus-color
-    );
-    width: $form-field-addon-width;
-    height: $form-field-height;
-
-    &.disabled,
-    &.disabled:hover {
-      background-color: $form-field-disabled-bg-color;
-    }
+    &:not(.linked) {
+      background-color: $medium-gray;
+      border-color: $default-border-color;
+      border-width: $form-field-border-width;
+      border-style: $form-field-border-style;
+      box-shadow: none;
+      padding: 0;
+      margin: 0;
+      border-radius: 0;
+      width: $form-field-addon-width;
+      height: $form-field-height;
 
-    &.linked.link-ingredient {
-      @include linked-button(
-        $border-radius: 0,
-        $line-height: 30px,
-        $padding: 0
-      );
+      &:hover {
+        border-color: #c0c0c0;
+      }
 
       &:focus {
-        border-radius: 0;
+        box-shadow: 0 0 0 2px $focus-color;
+        border-color: $focus-color;
       }
-    }
 
-    &.linked.unlink-ingredient {
-      @include linked-button(
-        $border-radius: 0 $default-border-radius $default-border-radius 0,
-        $line-height: 30px,
-        $padding: 0
-      );
+      &[is="alchemy-unlink-button"] {
+        border-left-width: 0;
+        @extend .right-rounded-border;
+      }
 
-      &:focus {
-        border-radius: 0 $default-border-radius $default-border-radius 0;
+      &.disabled,
+      &.disabled:hover {
+        background-color: $form-field-disabled-bg-color;
       }
     }
 
-    &.unlink-ingredient {
-      border-left-width: 0;
-      @extend .right-rounded-border;
+    &.linked {
+      height: 31px;
+      padding: 0;
+      border-radius: 0;
+      border-color: rgba(187, 162, 102, 0.5);
+
+      &[is="alchemy-unlink-button"] {
+        border-radius: 0 $default-border-radius $default-border-radius 0;
+        border-left-width: 0;
+
+        &:focus {
+          border-radius: 0 $default-border-radius $default-border-radius 0;
+        }
+      }
     }
   }
 }
 
-.droppable_element_placeholder {
-  height: 36px;
-  border: 1px dotted $button-border-color;
-  background-color: $medium-gray;
-  margin-bottom: 2 * $default-margin;
-  border-radius: $default-border-radius;
-}
-
 .edit_images_bottom {
   position: absolute;
   display: flex;
@@ -540,46 +549,68 @@
   bottom: 0;
   z-index: 0;
   width: 100%;
-  padding: $default-padding $default-padding/2;
-
-  a {
-    margin: 0 $default-padding/2;
-    padding: $default-padding/2;
-    cursor: pointer;
-
-    &.linked {
-      border-radius: $default-border-radius;
-      background-color: $linked-color;
-    }
+  padding: $default-padding;
+  background-color: #fff;
+  border-bottom-left-radius: $default-border-radius;
+  border-bottom-right-radius: $default-border-radius;
 
-    &.disabled {
-      opacity: 0.3;
-      cursor: default;
-    }
+  .icon_button {
+    width: 26px;
+    height: 26px;
   }
 }
 
 .ingredient-editor.picture {
   position: relative;
+  width: 50%;
+  padding-left: 1px; // Compensate the box shadow
+
+  + .picture {
+    padding-left: $default-padding;
+    padding-right: 1px; // Compensate the box shadow
+  }
 
   .picture_thumbnail {
+    --picture-width: 160px;
+    --picture-height: 120px;
     display: inline-block;
     width: 160px;
     margin: $default-margin 0;
-    padding-bottom: 28px;
+    padding: 0;
+    padding-bottom: 34px;
+    box-shadow: 0 0 1px 1px $default-border-color;
+
+    .picture_image {
+      overflow: hidden;
+      border-top-right-radius: var(--picture-thumbnail-border-radius);
+      border-top-left-radius: var(--picture-thumbnail-border-radius);
+
+      img.img_paddingtop {
+        @extend .disable-user-select;
+      }
+    }
+
+    img {
+      --picture-thumbnail-border-radius: 0;
+    }
   }
 
   &.validation_failed .picture_thumbnail {
     border-color: $error_border_color;
   }
 
-  .thumbnail_background .icon {
-    font-size: 4em;
-    color: $medium-gray;
-    vertical-align: top;
+  .thumbnail_background {
+    --picture-thumbnail-border-radius: 0;
+    height: 120px;
+
+    .icon {
+      font-size: 4em;
+      color: $medium-gray;
+      vertical-align: top;
 
-    &.error {
-      font-size: 1.2em;
+      &.error {
+        font-size: 1.2em;
+      }
     }
   }
 
@@ -642,7 +673,9 @@
   .file {
     display: flex;
     align-items: center;
+    gap: $default-padding;
     margin: 6px 0 $default-margin;
+    padding: 0 $default-padding 0 2 * $default-padding;
     border: $default-border;
     background-color: $white;
     border-radius: $default-border-radius;
@@ -654,16 +687,13 @@
     }
   }
 
-  .file_icon {
-    text-align: center;
-    width: 24px;
-    padding: $default-padding;
-  }
-
   .file_name {
+    display: inline-flex;
+    flex-grow: 1;
+    height: 100%;
+    align-items: center;
     white-space: nowrap;
     overflow: hidden;
-    max-width: 80%;
     font-size: $small-font-size;
     text-overflow: ellipsis;
     padding: $default-padding;
@@ -677,16 +707,15 @@
 
 .file_tools {
   display: flex;
+  gap: $default-padding;
   align-items: center;
-  margin-left: auto;
   background-color: white;
-  width: 48px;
   border-radius: 0 $default-border-radius $default-border-radius 0;
 
   a {
     text-align: center;
     text-decoration: none;
-    padding: $default-padding;
+    width: 24px;
   }
 }
 
@@ -825,51 +854,17 @@ select.long {
       margin-bottom: 2 * $default-margin;
     }
 
+    select,
     .select2-container {
       width: 100%;
     }
 
-    &.display_inline .select2-container {
-      width: 170px;
-    }
-  }
-
-  select.ingredient-editor-select {
-    border-radius: $default-border-radius;
-    background: white;
-    border: 1px solid $button-border-color;
-    font-size: $default-font-size;
-    height: 21px;
-    line-height: 21px;
-    padding: 2px;
-
-    optgroup {
-      color: gray;
-      font-style: normal;
-      font-weight: bold;
-      text-indent: 8px;
-
-      option {
-        text-indent: 24px;
+    &.display_inline {
+      select,
+      .select2-container {
+        width: 170px;
       }
     }
-
-    option {
-      padding-top: 2px;
-      padding-bottom: 2px;
-      color: black;
-    }
-  }
-
-  &.picture {
-    width: 50%;
-    padding-left: 1px; // Compensate the box shadow
-    padding-right: $default-padding;
-
-    + .picture {
-      padding-left: $default-padding;
-      padding-right: 1px; // Compensate the box shadow
-    }
   }
 }
 
@@ -896,7 +891,6 @@ textarea.has_tinymce {
 }
 
 .element_errors {
-  display: none;
   margin-top: 8px;
   margin-bottom: 8px;
   background-color: $error_background_color;
@@ -906,27 +900,16 @@ textarea.has_tinymce {
   color: $error_text_color;
   border: 1px solid $error_border_color;
 
+  &.hidden {
+    display: none;
+  }
+
   p {
     margin: 0;
     line-height: 24px;
   }
 }
 
-.ingredient-editor .hint-with-icon,
-.ingredient-editor .with-hint,
-.element-handle .hint-with-icon {
-  margin: 0;
-
-  > .hint-bubble {
-    left: -7px;
-    transform: none;
-
-    &:before {
-      left: 16px;
-    }
-  }
-}
-
 .is-fixed {
   &.with-ingredients {
     > .element-footer {
@@ -934,15 +917,10 @@ textarea.has_tinymce {
       border-bottom: 1px solid $medium-gray;
     }
   }
-
-  > .nestable-elements .add-nestable-element-button {
-    width: 100%;
-    text-align: center;
-  }
 }
 
-.element-editor,
-.droppable_element_placeholder {
+.element-editor {
+  display: block;
   width: 100%;
 
   .not-fixed & {
@@ -955,22 +933,35 @@ textarea.has_tinymce {
   }
 }
 
+.nestable-elements {
+  .add-nestable-element-button {
+    width: 100%;
+    text-align: center;
+    margin: 0;
+  }
+}
+
 .nested-elements {
   display: flex;
   flex-wrap: wrap;
 
+  &.droppable-elements {
+    border-radius: var(--border-radius_medium);
+  }
+
   .element-editor {
     position: relative;
+    margin: $default-margin;
   }
+}
 
-  .element-header {
-    background-color: transparent;
-  }
+.add-nested-element {
+  padding: $default-padding;
+}
 
-  .element-toolbar {
-    width: 100%;
-    border-top: 1px solid $medium-gray;
-  }
+.droppable-elements {
+  min-height: 36px;
+  background-color: var(--color-yellow_light);
 }
 
 .ingredient-date--label,