alchemy_cms 7.1.10 → 7.2.0.b

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

@@ -1,5 +1,7 @@
-.icon {
-  color: $icon-color;
+alchemy-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 
   &.disabled {
     opacity: 0.3;
@@ -8,4 +10,34 @@
   &.blank {
     background: transparent;
   }
+
+  &.error {
+    padding: 2rem;
+  }
+}
+
+.icon {
+  fill: var(--color-icon, currentColor);
+  width: var(--icon-size, var(--icon-size-md));
+  height: var(--icon-size, var(--icon-size-md));
+
+  &--xs {
+    width: var(--icon-size-xs);
+    height: var(--icon-size-xs);
+  }
+
+  &--sm {
+    width: var(--icon-size-sm);
+    height: var(--icon-size-sm);
+  }
+
+  &--1x {
+    width: var(--icon-size-1x);
+    height: var(--icon-size-1x);
+  }
+
+  &--xl {
+    width: var(--icon-size-xl);
+    height: var(--icon-size-xl);
+  }
 }

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

@@ -57,6 +57,9 @@ $image-overlay-transition-easing: ease-in;
 
 .alchemy-image-overlay-close {
   position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   width: 32px;
   height: 32px;
   top: 2 * $default-padding;
@@ -107,6 +110,7 @@ $image-overlay-transition-easing: ease-in;
 
   form .input .select2-container,
   form .input input[type="text"],
+  form .input textarea,
   .resource_info .value p {
     width: 100%;
   }
@@ -218,31 +222,38 @@ $image-overlay-transition-easing: ease-in;
 
   .previous-picture,
   .next-picture {
+    display: flex;
     position: absolute;
     top: 0;
     width: 64px;
     height: 128px;
-    line-height: 120px;
     margin-top: -64px;
     cursor: pointer;
-    text-align: center;
+    justify-content: center;
+    align-items: center;
     text-decoration: none;
     transition: background-color $image-overlay-transition-duration linear;
 
+    .icon {
+      width: 32px;
+      height: 32px;
+      fill: $white;
+      filter: drop-shadow(0 0 1px $very-dark-gray);
+    }
+
     &:hover {
       background-color: rgba(0, 0, 0, 0.3);
 
       .icon {
-        color: $white;
-        text-shadow: none;
+        transition: fill $image-overlay-transition-duration linear;
       }
     }
   }
 
   .icon {
-    font-size: 4em;
-    color: $medium-gray;
-    text-shadow: 0 0 $default-padding $text-color;
+    --icon-size: 4em;
+    fill: $medium-gray;
+    filter: drop-shadow(0 0 $default-padding $text-color);
     transition: all $image-overlay-transition-duration linear;
     vertical-align: middle;
   }
@@ -255,7 +266,5 @@ $image-overlay-transition-easing: ease-in;
   .next-picture {
     right: $image-overlay-form-width + $picture-overlay-handle-width;
     @include border-left-radius($default-border-radius);
-    transition: right $image-overlay-transition-duration
-      $image-overlay-transition-easing;
   }
 }

data/app/assets/stylesheets/alchemy/{filter_field.scss → list_filter.scss}

@@ -1,8 +1,8 @@
-.js_filter_field_box {
+alchemy-list-filter {
+  display: flex;
   position: relative;
-  margin: $form-field-margin;
 
-  > .icon {
+  > alchemy-icon {
     position: absolute;
     left: 8px;
     top: 50%;
@@ -15,21 +15,22 @@
     padding-right: 24px;
     margin: 0;
 
-    .input & {
+    form .input & {
       float: none;
       width: 100%;
     }
   }
 
   .js_filter_field_clear {
-    display: none;
+    display: flex;
+    visibility: hidden;
     position: absolute;
     right: 4px;
     top: 50%;
     transform: translateY(-50%);
     width: 16px;
     height: 16px;
-    line-height: 14px;
-    text-align: center;
+    align-items: center;
+    justify-content: center;
   }
 }

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

@@ -41,7 +41,7 @@ ul.list {
 
   .list-primary,
   .list-secondary {
-    display: inline-block;
+    display: inline-flex;
     overflow: hidden;
     text-overflow: ellipsis;
     vertical-align: middle;

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

@@ -124,34 +124,31 @@
     opacity: 1;
   }
 
+  svg {
+    fill: currentColor;
+    transition: fill $transition-duration $transition-easing;
+  }
+
   img,
   svg,
   .icon {
     display: inline-flex;
-    width: 24px;
-    height: 24px;
+    width: var(--icon-size-xxl);
+    height: var(--icon-size-xxl);
     align-items: center;
     justify-content: center;
   }
 
   img {
     border-style: none;
-    height: 24px;
     vertical-align: -0.6em;
   }
 
-  .icon {
-    vertical-align: -0.15em;
-    font-size: 20px;
-    font-weight: 400;
-    color: inherit;
-  }
-
   a {
     display: flex;
     align-items: center;
     height: 46px;
-    padding-left: 3 * $default-padding;
+    padding-left: 14px;
     font-weight: bold;
     color: $main-menu-text-color;
     transition: color $transition-duration $transition-easing;
@@ -214,7 +211,7 @@
         line-height: 24px;
 
         a {
-          padding: 8px 4px 8px 44px;
+          padding: 8px 4px 8px 42px;
         }
       }
     }

data/app/assets/stylesheets/alchemy/node-select.scss

@@ -14,7 +14,7 @@
     margin: 0 8px 0 4px;
 
     .select2-highlighted & {
-      color: $white;
+      fill: $white;
     }
   }
 }

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

@@ -27,6 +27,7 @@
       overflow: hidden;
       text-overflow: ellipsis;
       max-width: 100%;
+      line-height: 2;
 
       .external & {
         max-width: 90%;
@@ -35,6 +36,9 @@
   }
 
   .node_page {
+    display: inline-flex;
+    gap: $default-padding;
+    align-items: center;
     padding: 0 8px;
     margin-left: auto;
   }
@@ -48,14 +52,10 @@
     line-height: $sitemap-line-height;
     font-size: $small-font-size;
     @include border-right-radius($default-border-radius);
-
-    > i {
-      margin-left: auto;
-      padding-left: $default-padding;
-    }
   }
 
   .node_folder {
+    display: inline-flex;
     cursor: pointer;
   }
 
@@ -84,6 +84,8 @@
 }
 
 .sitemap_node {
+  display: flex;
+  align-items: center;
   height: $sitemap-line-height;
   margin: 3 * $default-margin 0;
   transition: background-color $transition-duration;
@@ -102,8 +104,9 @@
   }
 
   .node_name {
-    height: $sitemap-line-height;
     display: flex;
+    height: $sitemap-line-height;
+    flex: 1;
     justify-content: space-between;
     @include border-left-radius($default-border-radius);
     padding: 0 0 0 10px;
@@ -124,27 +127,26 @@
 }
 
 .nodes_tree-left_images {
+  justify-content: center;
+  display: flex;
+  align-items: center;
   position: relative;
   width: 32px;
-  line-height: $sitemap-line-height;
-  float: left;
+  height: $sitemap-line-height;
   padding: 0 2 * $default-padding;
-  text-align: center;
 }
 
 .nodes_tree-right_tools {
   display: flex;
   height: $sitemap-line-height;
   padding: 0 2 * $default-padding;
-  float: right;
   align-items: center;
 
   > a {
-    float: left;
+    display: inline-flex;
     width: $sitemap-line-height;
     height: $sitemap-line-height;
-    line-height: $sitemap-line-height;
-    text-align: center;
+    align-items: center;
     text-decoration: none;
     margin: 0;
 

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

@@ -1,30 +1,73 @@
-// Some table columns also have .message class
-div.message {
-  padding: 8px 8px 8px 32px;
-  line-height: 17px;
+alchemy-message {
+  display: block;
   border-width: $default-border-width;
   border-style: $default-border-style;
   border-radius: $default-border-radius;
   position: relative;
+  padding: 8px 16px 8px 32px;
   margin-bottom: 8px;
   text-align: left;
+  min-height: 2.6em;
+  word-break: break-word;
+  line-height: 1.5;
 
-  h1,
-  h2,
-  h3 {
-    margin-top: 0;
+  &[type="footnote"] {
+    font-size: $small-font-size;
+    margin: 16px;
+  }
+
+  &[type="notice"] {
+    border-color: $success_border_color;
+    color: $success_text_color;
+    background-color: $success_background_color;
   }
 
-  .icon {
+  &[type="hint"] {
+    background-color: $hint-background-color;
+    border-color: $hint-background-color;
+    color: $hint-text-color;
+  }
+
+  &[type="info"] {
+    background-color: $info_background_color;
+    border-color: $info_border_color;
+    color: $info_text_color;
+  }
+
+  &[type="error"] {
+    background-color: $error_background_color;
+    border-color: $error_border_color;
+    color: $error_text_color;
+  }
+
+  &[type="warning"],
+  &[type="warn"],
+  &[type="alert"] {
+    background-color: $warning_background_color;
+    border-color: $warning_border_color;
+    color: $warning_text_color;
+  }
+
+  alchemy-icon {
     position: absolute;
     left: 2 * $default-margin;
-    top: 2 * $default-margin;
+    top: 9px;
     color: inherit;
+
+    .icon {
+      fill: currentColor;
+    }
   }
 
-  &.footnote {
-    font-size: $small-font-size;
-    margin: 16px;
+  h1 {
+    font-size: 1.3rem;
+    line-height: 1.1;
+  }
+
+  h1,
+  h2,
+  h3 {
+    margin-top: 0;
   }
 
   a {
@@ -45,30 +88,4 @@ div.message {
       margin-bottom: 4px;
     }
   }
-
-  &.hint {
-    background-color: $hint-background-color;
-    border-color: $hint-background-color;
-    color: $hint-text-color;
-  }
-
-  &.info {
-    background-color: $info_background_color;
-    border-color: $info_border_color;
-    color: $info_text_color;
-  }
-
-  &.error {
-    background-color: $error_background_color;
-    border-color: $error_border_color;
-    color: $error_text_color;
-  }
-
-  &.warning,
-  &.warn,
-  &.alert {
-    background-color: $warning_background_color;
-    border-color: $warning_border_color;
-    color: $warning_text_color;
-  }
 }

data/app/assets/stylesheets/alchemy/page-select.scss

@@ -12,10 +12,7 @@
 
   .icon {
     margin: 0 $default-margin;
-
-    .select2-highlighted & {
-      color: $white;
-    }
+    fill: currentColor;
   }
 }
 

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

@@ -65,8 +65,18 @@
     margin: 0;
   }
 
+  .next_page,
+  .previous_page,
+  .first-page,
+  .last-page,
+  .gap {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
   .icon {
-    color: inherit;
+    fill: currentColor;
   }
 }
 

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

@@ -16,12 +16,12 @@
 
   .collapsed-menu.elements-window-visible & {
     width: calc(
-      100vw - #{$collapsed-main-menu-width - $default-border-width} - #{$elements-window-min-width}
+      100vw - #{$collapsed-main-menu-width - $default-border-width} - #{$elements-window-width}
     );
 
-    @media screen and (min-width: 1777px) {
+    @media screen and (min-width: $large-screen-break-point) {
       width: calc(
-        100vw - #{$collapsed-main-menu-width - $default-border-width} - #{$elements-window-width}
+        100vw - #{$collapsed-main-menu-width - $default-border-width} - #{$elements-window-min-width}
       );
     }
   }

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

@@ -28,19 +28,19 @@
 }
 
 .search_field_clear {
-  display: none;
+  display: flex;
+  visibility: hidden;
   position: absolute;
   top: 7px;
   right: 8px;
   width: 16px;
   height: 16px;
-  line-height: 14px;
-  text-align: center;
+  align-items: center;
+  justify-content: center;
 }
 
 #toolbar,
 #overlay_toolbar {
-
   .search_form {
     position: absolute;
     top: 0;

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

@@ -74,13 +74,16 @@ select {
           display: flex;
           align-items: center;
           justify-content: center;
-          font-family: "remixicon";
           background-image: none;
-          font-weight: normal;
           color: $icon-color;
 
           &:before {
-            content: $ri-arrow-down-s-line;
+            display: inline-block;
+            content: "";
+            width: 1rem;
+            height: 1rem;
+            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{$icon-color}"><path d="M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z"></path></svg>')
+              no-repeat;
           }
         }
       }
@@ -131,16 +134,19 @@ select {
   &.select2-container-multi,
   &.select2-allowclear {
     .select2-search-choice-close {
-      font-family: "remixicon";
       left: auto;
       right: $default-padding;
-      top: $default-padding;
+      top: 5px;
       background: none;
-      font-size: 12px;
       text-decoration: none;
 
       &:before {
-        content: $ri-close-line;
+        content: "";
+        display: inline-flex;
+        width: 12px;
+        height: 12px;
+        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{$icon-color}"><path d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"></path></svg>')
+          no-repeat;
       }
 
       &:hover {

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

@@ -96,7 +96,7 @@
   --sl-shadow-small: 0 1px 2px hsl(240 3.8% 46.1% / 12%);
   --sl-shadow-medium: 0 2px 4px hsl(240 3.8% 46.1% / 12%);
   --sl-shadow-large: 0 2px 8px hsl(240 3.8% 46.1% / 12%);
-  --sl-shadow-x-large: 0 4px 16px hsl(240 3.8% 46.1% / 12%);
+  --sl-shadow-x-large: 0 8px 16px rgba(35, 35, 35, 0.5);
 
   /*
    * Spacings
@@ -255,7 +255,7 @@
    * Overlays
    */
 
-  --sl-overlay-background-color: hsl(240 3.8% 46.1% / 33%);
+  --sl-overlay-background-color: hsl(0 0% 39.2% / 40%);
 
   /*
    * Panels
@@ -343,3 +343,34 @@ sl-tooltip {
     box-shadow: 0 0 var(--spacing-1) var(--color-grey_medium);
   }
 }
+
+sl-dialog {
+  &::part(panel) {
+    background-color: var(--color-grey_light);
+    --body-spacing: var(--spacing-4) var(--spacing-3);
+    --footer-spacing: var(--spacing-4) var(--spacing-3);
+  }
+
+  &::part(header) {
+    --header-spacing: var(--spacing-3);
+    background-color: var(--color-blue_dark);
+    border-top-left-radius: var(--border-radius_medium);
+    border-top-right-radius: var(--border-radius_medium);
+  }
+
+  &::part(header-actions) {
+    --header-spacing: var(--spacing-1);
+  }
+
+  &::part(title) {
+    --sl-font-size-large: var(--font-size_small);
+    color: var(--color-white);
+  }
+
+  &::part(close-button) {
+    --sl-color-primary-600: var(--color-white);
+    --sl-color-primary-700: var(--color-white);
+    color: var(--color-white);
+    fill: currentColor;
+  }
+}