alchemy_cms 7.4.5 → 8.0.0.a

data/app/{assets/stylesheets → stylesheets}/alchemy/admin/lists.scss

@@ -27,16 +27,16 @@ ul.list {
       margin-bottom: var(--spacing-2);
 
       .list-secondary {
-        color: var(--color-text);
+        color: var(--text-color);
       }
     }
 
     &.even {
-      background-color: $table-row-even-background-color;
+      background-color: var(--table-row-even-background-color);
     }
 
     &.odd {
-      background-color: $table-row-odd-background-color;
+      background-color: var(--table-row-odd-background-color);
     }
   }
 

data/app/{assets/stylesheets → stylesheets}/alchemy/admin/navigation.scss

@@ -1,18 +1,21 @@
+@use "base";
+@use "../mixins";
+@use "../variables" as vars;
+
+:root {
+  --top-menu-height: 75px;
+  --main-menu-entry-max-width: 110px;
+}
+
 #top_menu {
   position: fixed;
   top: 0;
-  margin-left: $collapsed-main-menu-width;
-  padding-right: $collapsed-main-menu-width;
+  margin-left: var(--main-menu-width);
+  padding-right: var(--main-menu-width);
   z-index: 20;
   width: 100%;
+  height: var(--top-menu-height);
   @extend .disable-user-select;
-
-  @media screen and (min-width: $large-screen-break-point) {
-    body:not(.collapsed-menu) & {
-      margin-left: $main-menu-width;
-      padding-right: $main-menu-width;
-    }
-  }
 }
 
 #left_menu {
@@ -21,15 +24,9 @@
   position: fixed;
   top: 0;
   left: 0;
-  width: $collapsed-main-menu-width;
-  background-color: $main-menu-bg-color;
+  width: var(--main-menu-width);
+  background-color: var(--main-menu-bg-color);
   @extend .disable-user-select;
-
-  @media screen and (min-width: $large-screen-break-point) {
-    body:not(.collapsed-menu) & {
-      width: $main-menu-width;
-    }
-  }
 }
 
 #main_navi {
@@ -37,7 +34,7 @@
   padding-top: var(--spacing-7);
   padding-bottom: 80px;
 
-  @media screen and (max-width: $medium-screen-break-point) {
+  @media screen and (max-width: vars.$medium-screen-break-point) {
     overflow-x: hidden;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
@@ -50,32 +47,33 @@
   line-height: 46px;
   margin-bottom: var(--spacing-3);
   background-color: transparent;
-  transition: background-color $transition-duration $transition-easing;
+  transition: background-color var(--transition-duration)
+    var(--transition-easing);
 
   &:hover {
-    background-color: $main-menu-active-bg-color;
+    background-color: var(--main-menu-active-bg-color);
 
     .sub_navigation {
       visibility: visible;
       opacity: 1;
-      background-color: $main-menu-active-bg-color;
+      background-color: var(--main-menu-active-bg-color);
     }
   }
 
   &.active,
   &:hover {
-    background-color: $main-menu-active-bg-color;
+    background-color: var(--main-menu-active-bg-color);
     cursor: default;
 
     a,
     .icon {
-      color: $main-menu-active-text-color;
+      color: var(--main-menu-active-text-color);
       text-decoration: none;
       text-shadow: none;
 
       &:focus {
-        @include default-focus-style(
-          $box-shadow: inset 0 0 0 2px $main-menu-active-text-color,
+        @include mixins.default-focus-style(
+          $box-shadow: inset 0 0 0 2px var(--main-menu-active-text-color),
           $border-radius: 0
         );
       }
@@ -85,23 +83,22 @@
   label {
     position: absolute;
     top: 0;
-    left: $collapsed-main-menu-width - 1;
+    left: calc(var(--main-menu-width) - 1px);
     width: auto;
     padding-left: var(--spacing-4);
     padding-right: var(--spacing-4);
     visibility: hidden;
     opacity: 0;
-    background-color: $main-menu-active-bg-color;
-    transition: opacity $transition-duration $transition-easing;
+    background-color: var(--main-menu-active-bg-color);
+    transition: opacity var(--transition-duration) var(--transition-easing);
     vertical-align: middle;
     cursor: pointer;
-    @include truncate($collapsed-main-menu-entry-max-width, $wrap: nowrap);
 
-    @media screen and (min-width: $large-screen-break-point) {
+    @media screen and (min-width: vars.$large-screen-break-point) {
       body:not(.collapsed-menu) & {
         position: static;
         visibility: visible;
-        max-width: $main-menu-entry-max-width;
+        max-width: var(--main-menu-entry-max-width);
         opacity: 1;
         padding-left: var(--spacing-2);
         background-color: transparent;
@@ -112,7 +109,7 @@
   &.has_sub_navigation label {
     display: none;
 
-    @media screen and (min-width: $large-screen-break-point) {
+    @media screen and (min-width: vars.$large-screen-break-point) {
       body:not(.collapsed-menu) & {
         display: inline-block;
       }
@@ -126,7 +123,7 @@
 
   svg {
     fill: currentColor;
-    transition: fill $transition-duration $transition-easing;
+    transition: fill var(--transition-duration) var(--transition-easing);
   }
 
   img,
@@ -150,13 +147,14 @@
     height: 46px;
     padding-left: 14px;
     font-weight: bold;
-    color: $main-menu-text-color;
-    transition: color $transition-duration $transition-easing;
-    @include antialiased-font-smoothing;
+    color: var(--main-menu-text-color);
+    transition: color var(--transition-duration) var(--transition-easing);
+    @include mixins.antialiased-font-smoothing;
+    white-space: nowrap;
 
     &:focus {
-      @include default-focus-style(
-        $box-shadow: inset 0 0 0 2px $focus-color,
+      @include mixins.default-focus-style(
+        $box-shadow: inset 0 0 0 2px var(--focus-color),
         $border-radius: 0
       );
     }
@@ -166,16 +164,16 @@
 .sub_navigation {
   position: absolute;
   width: auto;
-  left: $collapsed-main-menu-width;
+  left: var(--main-menu-width);
   top: 0;
   visibility: hidden;
   opacity: 0;
-  transition: opacity $transition-duration $transition-easing;
+  transition: opacity var(--transition-duration) var(--transition-easing);
 }
 
 .subnavi_tab {
   &:first-of-type {
-    border-left: 1px solid $main-menu-active-bg-color;
+    border-left: 1px solid var(--main-menu-active-bg-color);
     margin-left: -1px;
   }
 
@@ -183,8 +181,8 @@
     padding-left: var(--spacing-4);
     padding-right: var(--spacing-4);
     background-color: transparent;
-    transition: background-color $transition-duration $transition-easing;
-    @include truncate($main-menu-width, $display: block, $wrap: nowrap);
+    transition: background-color var(--transition-duration)
+      var(--transition-easing);
   }
 
   &.active a,
@@ -194,17 +192,23 @@
 }
 
 :root {
-  --main-menu-width: #{$main-menu-width};
+  --main-menu-width: 150px;
 }
 
 .collapsed-menu {
-  --main-menu-width: #{$collapsed-main-menu-width};
+  --main-menu-width: 48px;
 }
 
-@media screen and (min-width: $large-screen-break-point) {
+@media screen and (max-width: vars.$large-screen-break-point) {
+  body {
+    --main-menu-width: 48px;
+  }
+}
+
+@media screen and (min-width: vars.$large-screen-break-point) {
   body:not(.collapsed-menu) {
     .sub_navigation {
-      left: $main-menu-width;
+      left: var(--main-menu-width);
     }
 
     .main_navi_entry.active {
@@ -230,7 +234,7 @@
   display: flex;
   flex-grow: 1;
   flex-wrap: nowrap;
-  height: $header-height + 1px;
+  height: calc(var(--header-height) + 1px);
 
   label {
     float: left;
@@ -255,8 +259,8 @@
   align-items: center;
   flex-wrap: nowrap;
   color: #444;
-  border-right: $default-border;
-  border-bottom: $default-border;
+  border-right: var(--border-default);
+  border-bottom: var(--border-default);
 
   form {
     align-self: center;
@@ -266,7 +270,7 @@
   }
 
   &:hover {
-    color: var(--color-text);
+    color: var(--text-color);
     text-decoration: none;
   }
 
@@ -277,24 +281,26 @@
     padding: var(--spacing-1) var(--spacing-2);
 
     &:focus {
-      @include default-focus-style($box-shadow: inset 0 0 0 2px $focus-color);
+      @include mixins.default-focus-style(
+        $box-shadow: inset 0 0 0 2px var(--focus-color)
+      );
     }
   }
 
   .icon.close {
     vertical-align: text-bottom;
-    text-shadow: $text-shadow-light;
+    text-shadow: var(--text-shadow-light);
   }
 
   .page_name {
     margin-right: var(--spacing-1);
-    text-shadow: $text-shadow-light;
+    text-shadow: var(--text-shadow-light);
   }
 
   .page_language,
   .page_site {
     display: inline-block;
-    color: var(--color-text_muted);
+    color: var(--text-color-muted);
     font-size: var(--font-size_small);
     margin-right: var(--spacing-1);
   }

data/app/{assets/stylesheets → stylesheets}/alchemy/admin/nodes.scss

@@ -1,3 +1,5 @@
+@use "../mixins";
+
 .nodes_tree.list {
   margin: 2em 0;
 
@@ -22,6 +24,7 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
+    gap: var(--spacing-0);
 
     > a {
       overflow: hidden;
@@ -48,10 +51,10 @@
     align-items: center;
     padding: 0 var(--spacing-2);
     white-space: nowrap;
-    background-color: $sitemap-info-background-color;
-    line-height: $sitemap-line-height;
+    background-color: var(--sitemap-info-background-color);
+    line-height: var(--sitemap-line-height);
     font-size: var(--font-size_small);
-    @include border-right-radius($default-border-radius);
+    @include mixins.border-right-radius(var(--border-radius_medium));
   }
 
   .node_folder {
@@ -69,11 +72,11 @@
   }
 
   li {
-    line-height: $sitemap-line-height;
+    line-height: var(--sitemap-line-height);
     padding-left: var(--spacing-1);
 
     li {
-      padding-left: $sitemap-line-height;
+      padding-left: var(--sitemap-line-height);
     }
   }
 }
@@ -86,12 +89,12 @@
 .sitemap_node {
   display: flex;
   align-items: center;
-  height: $sitemap-line-height;
+  height: var(--sitemap-line-height);
   margin: var(--spacing-3) 0;
-  transition: background-color $transition-duration;
+  transition: background-color var(--transition-duration);
 
   &.highlight {
-    background-color: $sitemap-highlight-color;
+    background-color: var(--sitemap-highlight-color);
   }
 
   &.no-match .sitemap_pagename_link {
@@ -99,25 +102,25 @@
   }
 
   &:hover {
-    background-color: $sitemap-page-hover-color;
-    border-radius: $default-border-radius;
+    background-color: var(--sitemap-page-hover-color);
+    border-radius: var(--border-radius_medium);
   }
 
   .node_name {
     display: flex;
-    height: $sitemap-line-height;
+    height: var(--sitemap-line-height);
     flex: 1;
     justify-content: space-between;
-    @include border-left-radius($default-border-radius);
+    @include mixins.border-left-radius(var(--border-radius_medium));
     padding: 0 0 0 10px;
     margin: var(--spacing-0);
     text-decoration: none;
     overflow: hidden;
-    background-color: $sitemap-page-background-color;
+    background-color: var(--sitemap-page-background-color);
     cursor: move;
 
     &.without-status {
-      @include border-right-radius($default-border-radius);
+      @include mixins.border-right-radius(var(--border-radius_medium));
     }
 
     &.inactive {
@@ -132,20 +135,20 @@
   align-items: center;
   position: relative;
   width: 32px;
-  height: $sitemap-line-height;
+  height: var(--sitemap-line-height);
   padding: 0 var(--spacing-2);
 }
 
 .nodes_tree-right_tools {
   display: flex;
-  height: $sitemap-line-height;
+  height: var(--sitemap-line-height);
   padding: 0 var(--spacing-2);
   align-items: center;
 
   > a {
     display: inline-flex;
-    width: $sitemap-line-height;
-    height: $sitemap-line-height;
+    width: var(--sitemap-line-height);
+    height: var(--sitemap-line-height);
     align-items: center;
     text-decoration: none;
     margin: 0;

data/app/{assets/stylesheets → stylesheets}/alchemy/admin/notices.scss

@@ -1,8 +1,8 @@
 alchemy-message {
   display: block;
-  border-width: $default-border-width;
-  border-style: $default-border-style;
-  border-radius: $default-border-radius;
+  border-width: var(--border-width_small);
+  border-style: var(--border-style);
+  border-radius: var(--border-radius_medium);
   position: relative;
   padding: var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-8);
   margin-bottom: var(--spacing-2);
@@ -21,35 +21,35 @@ alchemy-message {
   }
 
   &[type="notice"] {
-    border-color: $success_border_color;
-    color: $success_text_color;
-    background-color: $success_background_color;
+    border-color: var(--notice-success-border-color);
+    color: var(--notice-success-text-color);
+    background-color: var(--notice-success-background-color);
   }
 
   &[type="hint"] {
-    background-color: $hint-background-color;
-    border-color: $hint-background-color;
-    color: $hint-text-color;
+    background-color: var(--hint-background-notice-color);
+    border-color: var(--hint-background-notice-color);
+    color: var(--hint-text-notice-color);
   }
 
   &[type="info"] {
-    background-color: $info_background_color;
-    border-color: $info_border_color;
-    color: $info_text_color;
+    background-color: var(--notice-info-background-color);
+    border-color: var(--notice-info-border-color);
+    color: var(--notice-info-text-color);
   }
 
   &[type="error"] {
-    background-color: $error_background_color;
-    border-color: $error_border_color;
-    color: $error_text_color;
+    background-color: var(--notice-error-background-color);
+    border-color: var(--notice-error-border-color);
+    color: var(--notice-error-text-color);
   }
 
   &[type="warning"],
   &[type="warn"],
   &[type="alert"] {
-    background-color: $warning_background_color;
-    border-color: $warning_border_color;
-    color: $warning_text_color;
+    background-color: var(--notice-warning-background-color);
+    border-color: var(--notice-warning-border-color);
+    color: var(--notice-warning-text-color);
   }
 
   alchemy-icon {

data/app/{assets/stylesheets → stylesheets}/alchemy/admin/page-select.scss

@@ -15,7 +15,7 @@
   --size-3: var(--spacing-2, 8px);
   --small-font-size: var(--font-size_small, 10px);
   --grey: var(--color-grey_light, hsl(0deg, 0%, 94%));
-  --color: var(--color-text, hsla(224deg, 23%, 26%, 0.8));
+  --color: var(--text-color, hsla(224deg, 23%, 26%, 0.8));
   --highlight-color: var(--grey);
 
   display: flex;
@@ -48,7 +48,7 @@
 }
 
 .page-select--page-urlname {
-  color: var(--color-text_muted, hsla(224deg, 23%, 26%, 0.5));
+  color: var(--text-color-muted, hsla(224deg, 23%, 26%, 0.5));
   padding-right: var(--size-2);
 
   .select2-highlighted & {

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

@@ -0,0 +1,144 @@
+@use "../variables" as vars;
+
+:root {
+  --pagination-height: 52px;
+  --pagination-disabled-text-color: #c0c0c0;
+  --pagination-active-bg-color: var(--color-blue_dark);
+  --pagination-active-text-color: var(--color-white);
+}
+
+.pagination-wrapper {
+  display: flex;
+  position: fixed;
+  background: var(--pagination-background-color);
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  left: 0px;
+  height: var(--pagination-height);
+  padding-left: var(--main-menu-width);
+  text-align: left;
+  border-top: var(--border-default);
+  z-index: 10;
+}
+
+.pagination {
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-2);
+
+  a,
+  span,
+  em {
+    font-size: var(--font-size_medium);
+    font-weight: var(--font-weight_normal);
+    color: var(--icon-color);
+    padding: var(--spacing-1);
+    margin: var(--spacing-0);
+    border-radius: var(--border-radius_medium);
+  }
+
+  a:hover {
+    color: var(--text-color);
+    background-color: var(--border-color);
+    text-decoration: none;
+  }
+
+  span a {
+    padding: 0;
+  }
+
+  .arrows {
+    display: inline-flex;
+    flex-wrap: nowrap;
+  }
+
+  .pages {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow-x: auto;
+    overflow-y: visible;
+    max-width: 75%;
+
+    @media screen and (max-width: vars.$large-screen-break-point) {
+      max-width: 60vw;
+    }
+  }
+
+  .page {
+    padding: var(--spacing-1) var(--spacing-2);
+    text-align: center;
+  }
+
+  .current {
+    color: var(--pagination-active-text-color);
+    background-color: var(--pagination-active-bg-color);
+    cursor: default;
+  }
+
+  .previous_page {
+    margin-right: var(--spacing-2);
+  }
+
+  .next_page {
+    margin-left: var(--spacing-2);
+  }
+
+  .disabled {
+    color: var(--pagination-disabled-text-color);
+  }
+
+  .gap {
+    border: none;
+    background: transparent;
+    cursor: default;
+    margin: 0;
+    color: var(--pagination-disabled-text-color);
+  }
+
+  .next_page,
+  .previous_page,
+  .first-page,
+  .last-page,
+  .gap {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .icon {
+    fill: currentColor;
+  }
+}
+
+.per-page-select-form {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  justify-content: end;
+  width: var(--sidebar-width);
+  margin-left: auto;
+  padding: var(--spacing-2);
+
+  @media screen and (max-width: vars.$large-screen-break-point) {
+    --sidebar-width: auto;
+
+    label span {
+      display: none;
+    }
+  }
+
+  @media screen and (max-width: vars.$medium-screen-break-point) {
+    display: none;
+  }
+}
+
+#assign_image_list .pagination-wrapper,
+#assign_file_list .pagination-wrapper {
+  position: absolute;
+  padding-left: 0;
+  padding-right: 0;
+}

data/app/{assets/stylesheets → stylesheets}/alchemy/admin/preview_window.scss

@@ -1,7 +1,9 @@
+@use "../variables" as vars;
+
 :root {
   --preview-window-min-width: 0px;
 
-  @media screen and (min-width: $large-screen-break-point) {
+  @media screen and (min-width: vars.$large-screen-break-point) {
     --preview-window-min-width: 240px;
   }
 }
@@ -16,13 +18,13 @@
   );
   min-width: var(--preview-window-min-width);
   max-width: calc(100vw - var(--main-menu-width));
-  height: calc(100vh - #{$top-menu-height});
+  height: calc(100vh - var(--top-menu-height));
   border: 0 none;
   background: #fff;
-  border-right: $default-border;
-  transition-duration: $transition-duration;
-  transition-timing-function: ease-in-out;
-  transition-property: width max-width;
+  border-right: var(--border-default);
+  transition-duration: var(--transition-duration);
+  transition-timing-function: var(--transition-duration);
+  transition-property: width, max-width;
 
   .elements-window-visible & {
     max-width: calc(

data/app/{assets/stylesheets → stylesheets}/alchemy/admin/print.scss

@@ -1,4 +1,4 @@
-@import "alchemy/defaults";
+@use "../defaults";
 
 div#main_menu,
 div#top_menu,