alchemy_cms 7.1.7 → 7.2.0.rc1

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

@@ -28,7 +28,8 @@ noscript {
   color: $warning_text_color;
   background-color: $warning_background_color;
 
-  h1, p {
+  h1,
+  p {
     margin: 16px 0;
   }
 }
@@ -43,7 +44,9 @@ body {
   cursor: default;
 
   // Fix for strange element window offset
-  &.pages.edit { overflow: hidden }
+  &.pages.edit {
+    overflow: hidden;
+  }
 
   &.prevent-scrolling {
     overflow: hidden;
@@ -57,6 +60,7 @@ a {
 
   &:hover {
     text-decoration: underline;
+    text-decoration-thickness: 1px;
   }
 
   img {
@@ -64,7 +68,8 @@ a {
   }
 }
 
-a:focus, [tabindex]:focus {
+a:focus,
+[tabindex]:focus {
   @include default-focus-style;
 }
 
@@ -82,14 +87,18 @@ hr {
   width: 80%;
   max-width: 500px;
   margin: 2em auto;
-  padding: 4*$default-padding;
+  padding: 4 * $default-padding;
   background: $medium-gray;
   border-radius: $default-border-radius;
 }
 
-.float_right { float: right }
+.float_right {
+  float: right;
+}
 
-.float_left { float: left }
+.float_left {
+  float: left;
+}
 
 .center {
   text-align: center;
@@ -124,11 +133,11 @@ hr {
 }
 
 .with_padding {
-  padding: 2*$default-padding;
+  padding: 2 * $default-padding;
 }
 
 .with_margin {
-  margin: 2*$default-margin;
+  margin: 2 * $default-margin;
 }
 
 a img {
@@ -140,20 +149,24 @@ a img {
 }
 
 .hidden {
-  display: none;
+  display: none !important;
 }
 
-@-moz-keyframes spin {
-  from { -moz-transform: rotate(0deg); }
-  to   { -moz-transform: rotate(360deg); }
+.mx-1 {
+  margin-left: var(--spacing-1);
+  margin-right: var(--spacing-1);
 }
 
-@-webkit-keyframes spin {
-  from { -webkit-transform: rotate(0deg); }
-  to   { -webkit-transform: rotate(360deg); }
+.mx-2 {
+  margin-left: var(--spacing-2);
+  margin-right: var(--spacing-2);
+}
+
+.my-0 {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
-@keyframes spin {
-  from {transform:rotate(0deg);}
-  to   {transform:rotate(360deg);}
+.p-0 {
+  padding: 0 !important;
 }

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

@@ -38,7 +38,7 @@ input.button {
     .icon {
       font-weight: normal;
       margin-right: $default-margin;
-      color: inherit;
+      fill: currentColor;
     }
   }
 
@@ -76,15 +76,14 @@ input.button {
   }
 
   .icon {
-    color: inherit;
-    transition: color 250ms;
+    transition: fill 250ms;
   }
 
   &.disabled,
   &[disabled] {
     pointer-events: none;
 
-    i {
+    svg {
       opacity: 0.3;
     }
 

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

@@ -68,7 +68,7 @@
     }
 
     .icon {
-      color: inherit;
+      fill: currentColor;
     }
   }
 

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

@@ -147,13 +147,10 @@ $dialog-transition-duration: 150ms;
 .alchemy-image-overlay-close,
 .alchemy-dialog-close {
   cursor: pointer;
-}
-
-.alchemy-dialog-close {
-  color: inherit;
+  height: 16px;
 
   .icon {
-    color: inherit;
+    fill: currentColor;
   }
 }
 

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

@@ -3,6 +3,7 @@
   right: 0;
   top: $top-menu-height;
   z-index: 20;
+  display: block;
   width: calc(100vw - #{$collapsed-main-menu-width});
   height: calc(100vh - #{$top-menu-height});
   border-left: $default-border;
@@ -45,10 +46,6 @@
   textarea {
     width: 100%;
   }
-
-  > .message {
-    margin: 2 * $default-margin;
-  }
 }
 
 alchemy-tinymce {
@@ -78,10 +75,16 @@ alchemy-tinymce {
   white-space: nowrap;
   text-overflow: ellipsis;
   transition: color $transition-duration;
+  line-height: 1;
+  max-width: 85%;
+
+  .element-hidden > & {
+    max-width: 65%;
+  }
 
   .preview_text_quote {
     font-size: $small-font-size;
-    line-height: 15px;
+    margin-left: $default-margin / 2;
   }
 }
 
@@ -109,7 +112,7 @@ alchemy-tinymce {
   color: inherit;
   box-shadow: none;
   padding: 0;
-  margin: 0;
+  margin: 0 0 0 auto;
 
   &:hover {
     &:not(:focus):not(:active) {
@@ -121,10 +124,6 @@ alchemy-tinymce {
 
   .icon {
     pointer-events: none;
-
-    &.hidden {
-      display: none;
-    }
   }
 }
 
@@ -141,7 +140,7 @@ alchemy-tinymce {
     margin-top: 0;
   }
 
-  &.hidden {
+  &.element-hidden {
     display: block;
     border-style: dashed;
     opacity: 0.7;
@@ -155,7 +154,15 @@ alchemy-tinymce {
       background-color: transparent;
 
       .element-hidden-icon {
-        display: inline;
+        display: inline-flex;
+        align-items: center;
+        gap: $default-padding;
+        margin-left: auto;
+      }
+
+      .element-hidden-label {
+        line-height: 1;
+        font-size: $small-font-size;
       }
     }
   }
@@ -202,12 +209,12 @@ alchemy-tinymce {
 
   &.selected:not(.is-fixed),
   &:hover:not(.is-fixed) {
-    &:not(.hidden) {
+    &:not(.element-hidden) {
       box-shadow: 0 2px 8px rgba(#9b9b9b, 0.75);
     }
   }
 
-  &.selected:not(.is-fixed):not(.folded):not(.dirty):not(.hidden):not(
+  &.selected:not(.is-fixed):not(.folded):not(.dirty):not(.element-hidden):not(
       .deprecated
     ) {
     > .element-header {
@@ -221,7 +228,7 @@ alchemy-tinymce {
     .element-body,
     .element-footer,
     .nestable-elements,
-    .message,
+    alchemy-message,
     .nested-elements {
       display: none;
     }
@@ -290,10 +297,6 @@ alchemy-tinymce {
 
     &:not(.folded) .element-toggle {
       pointer-events: none;
-
-      i:before {
-        content: $ri-more-2-line;
-      }
     }
 
     .element-body {
@@ -332,6 +335,15 @@ alchemy-tinymce {
     }
   }
 
+  &.dismiss {
+    opacity: 0;
+    transform: scale(0);
+    transform-origin: top center;
+    transition:
+      opacity $transition-duration ease-out,
+      transform 1s ease-in;
+  }
+
   .element-body {
     margin: 2 * $default-padding;
   }
@@ -344,7 +356,7 @@ alchemy-tinymce {
     text-align: left;
   }
 
-  .message {
+  alchemy-message {
     margin: 2 * $default-margin;
   }
 
@@ -353,6 +365,8 @@ alchemy-tinymce {
   }
 
   .autocomplete_tag_list {
+    display: block;
+    margin-top: $default-padding;
     padding: $default-padding 0;
 
     label {
@@ -397,8 +411,8 @@ alchemy-tinymce {
   }
 
   .icon {
-    color: inherit;
-    transition: color $transition-duration;
+    fill: currentColor;
+    transition: fill $transition-duration;
   }
 }
 
@@ -414,12 +428,16 @@ alchemy-tinymce {
   gap: $default-padding;
   height: $element-toolbar-height;
   border-top: 1px solid $medium-gray;
+  border-bottom: 1px solid $medium-gray;
 
   .is-fixed & {
     border-top-width: 0;
   }
 
-  border-bottom: 1px solid $medium-gray;
+  .icon_button {
+    width: $icon-button-medium-width;
+    height: $icon-button-medium-height;
+  }
 }
 
 alchemy-publish-element-button {
@@ -427,6 +445,7 @@ alchemy-publish-element-button {
   align-items: center;
   margin-left: auto;
   margin-right: $default-margin;
+  line-height: 1;
 
   sl-switch {
     --thumb-size: 10px;
@@ -465,10 +484,6 @@ alchemy-publish-element-button {
   }
 
   &[open] {
-    .ingredient-group-expand::before {
-      content: $ri-arrow-down-s-line;
-    }
-
     > :not(summary) {
       box-sizing: border-box;
     }
@@ -558,6 +573,12 @@ alchemy-publish-element-button {
     width: $icon-button-medium-width;
     height: $icon-button-medium-height;
   }
+
+  alchemy-link-buttons {
+    display: flex;
+    justify-content: space-between;
+    width: 38%;
+  }
 }
 
 .ingredient-editor.picture {
@@ -603,12 +624,12 @@ alchemy-publish-element-button {
     --picture-thumbnail-border-radius: 0;
     height: 120px;
 
-    .icon {
-      font-size: 3em;
+    alchemy-icon {
+      --icon-size: 3em;
       color: var(--color-grey_dark);
 
       &.error {
-        font-size: 1.2em;
+        --icon-size: var(--icon-size-md);
       }
     }
   }
@@ -616,15 +637,13 @@ alchemy-publish-element-button {
   .picture_ingredient_css_class {
     position: absolute;
     z-index: 1;
-    bottom: 24px;
-    width: 99px;
-    background-color: white;
+    bottom: 34px;
     background-color: rgba(255, 254, 255, 0.7);
     padding: 4px 8px;
     font-size: $small-font-size;
-    text-align: right;
-    height: 12px;
     overflow: hidden;
+    max-width: 100%;
+    text-overflow: ellipsis;
   }
 }
 
@@ -712,7 +731,10 @@ alchemy-publish-element-button {
   border-radius: 0 $default-border-radius $default-border-radius 0;
 
   a {
-    text-align: center;
+    display: inline-flex;
+    padding: $default-padding;
+    justify-content: center;
+    align-items: center;
     text-decoration: none;
     width: 24px;
   }
@@ -767,7 +789,7 @@ select.long {
   }
 
   &.missing {
-    .message {
+    alchemy-message {
       margin: 0;
       @include clearfix;
     }
@@ -829,7 +851,7 @@ select.long {
   }
 
   label {
-    display: block;
+    display: flex;
     margin: $default-margin 0;
     font-size: $small-font-size;
     line-height: 15px;
@@ -899,10 +921,6 @@ textarea.has_tinymce {
   color: $error_text_color;
   border: 1px solid $error_border_color;
 
-  &.hidden {
-    display: none;
-  }
-
   p {
     margin: 0;
     line-height: 24px;
@@ -963,18 +981,26 @@ textarea.has_tinymce {
   background-color: var(--color-yellow_light);
 }
 
-.ingredient-date--label,
+label.ingredient-date--label,
 .edit-ingredient-anchor-link {
+  display: inline-flex;
+  align-items: center;
   position: absolute;
-  right: 2 * $default-padding;
-  bottom: 15px;
+  bottom: 3 * $default-padding;
   margin: 0 !important;
 }
 
+label.ingredient-date--label {
+  padding: $default-padding;
+  right: 5px;
+}
+
 .edit-ingredient-anchor-link {
   right: $default-padding;
 
-  > a {
+  a {
+    display: inline-flex;
+    align-items: center;
     padding: $default-padding;
   }
 

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

@@ -5,78 +5,28 @@ div#flash_notices {
   width: 400px;
   top: 0;
 
-  .flash.error {
-    cursor: pointer;
-    padding-right: 32px;
-
-    &:before {
-      display: flex;
-      position: absolute;
-      right: 2 * $default-padding;
-      top: 7px;
-      width: 20px;
-      height: 20px;
-      font-family: "remixicon";
-      content: $ri-close-line;
-      align-items: center;
-      justify-content: center;
+  alchemy-message {
+    font-weight: bold;
+    margin: $default-margin $default-margin 2 * $default-margin;
+    opacity: 0.95;
+    transition-property: opacity, transform;
+    transition-duration: 0.4s;
+
+    &.dismissed {
+      display: block;
+      opacity: 0;
+      transform: translate3d(0, -100%, 0);
     }
-  }
-}
-
-div.flash {
-  border-radius: $default-border-radius;
-  opacity: 0.95;
-  padding: 8px 16px 8px 32px;
-  font-weight: bold;
-  border-width: 1px;
-  border-style: solid;
-  z-index: 1000;
-  margin: $default-margin $default-margin 2 * $default-margin;
-  position: relative;
-  min-height: 2.6em;
-  word-break: break-word;
-  transition-property: opacity, transform;
-  transition-duration: 0.4s;
-  line-height: 1.5;
-
-  .icon {
-    position: absolute;
-    top: 5px;
-    left: 2 * $default-padding;
-    vertical-align: bottom;
-    color: inherit;
-  }
-
-  &.dismissed {
-    display: block;
-    opacity: 0;
-    transform: translate3d(0, -100%, 0);
-  }
-
-  &.notice {
-    border-color: $success_border_color;
-    color: $success_text_color;
-    background-color: $success_background_color;
-  }
 
-  &.error {
-    border-color: $error_border_color;
-    color: $error_text_color;
-    background-color: $error_background_color;
-  }
+    &[type="error"] {
+      cursor: pointer;
+      padding-right: 32px;
 
-  &.info {
-    border-color: $info_border_color;
-    color: $info_text_color;
-    background-color: $info_background_color;
-  }
-
-  &.warn,
-  &.warning,
-  &.alert {
-    border-color: $warning_border_color;
-    color: $warning_text_color;
-    background-color: $warning_background_color;
+      alchemy-icon[name="close"] {
+        position: absolute;
+        left: initial;
+        right: 2 * $default-padding;
+      }
+    }
   }
 }

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

@@ -19,6 +19,12 @@ form {
     @include form-label;
   }
 
+  .inline-label {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-1);
+  }
+
   .input {
     padding: $default-padding 0;
     @include clearfix;
@@ -81,48 +87,48 @@ form {
       }
     }
 
-    &.field_with_errors {
-      input[type="text"],
-      input[type="email"],
-      input[type="password"],
-      textarea,
-      .select2-choices {
-        @extend %field-with-error;
-      }
+    &.language_locale small.error {
+      @include form-hint(
+        $background-color: $error_background_color,
+        $border-color: $error_border_color
+      );
+      text-align: left;
+    }
+  }
 
-      .select2-choice,
-      .select2-choices {
-        border-color: $error_border_color;
-        color: $error_text_color;
-        margin-bottom: 4px;
+  .field_with_errors {
+    input[type="text"],
+    input[type="email"],
+    input[type="password"],
+    textarea,
+    .select2-choices {
+      @extend %field-with-error;
+    }
 
-        input[type="text"] {
-          box-shadow: none;
-        }
-      }
+    .select2-choice,
+    .select2-choices {
+      border-color: $error_border_color;
+      color: $error_text_color;
+      margin-bottom: 4px;
 
-      label {
-        color: $error_text_color;
+      input[type="text"] {
+        box-shadow: none;
       }
     }
 
-    small.error {
+    label {
       color: $error_text_color;
-      display: block;
-      margin-left: $form-left-width;
-      line-height: 1.5em;
-      clear: both;
-      text-align: right;
-      margin-bottom: 0.25em;
     }
+  }
 
-    &.language_locale small.error {
-      @include form-hint(
-        $background-color: $error_background_color,
-        $border-color: $error_border_color
-      );
-      text-align: left;
-    }
+  small.error {
+    color: $error_text_color;
+    display: block;
+    margin-left: $form-left-width;
+    line-height: 1.5em;
+    clear: both;
+    text-align: right;
+    margin-bottom: 0.25em;
   }
 
   .input-addon {
@@ -169,7 +175,8 @@ form {
   }
 
   .inline-input {
-    @include clearfix;
+    align-items: center;
+    display: flex;
     margin: 0 -1 * $default-margin;
 
     .left-column,
@@ -179,12 +186,10 @@ form {
 
     .left-column {
       width: $form-right-width;
-      float: left;
     }
 
     .right-column {
       width: $form-left-width;
-      float: right;
     }
 
     button,