alchemy_cms 7.2.6 → 7.3.1

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

@@ -34,7 +34,7 @@
 
 #main_navi {
   max-height: 100vh;
-  padding-top: 28px;
+  padding-top: var(--spacing-7);
   padding-bottom: 80px;
 
   @media screen and (max-width: $medium-screen-break-point) {
@@ -48,7 +48,7 @@
   position: relative;
   display: block;
   line-height: 46px;
-  margin-bottom: 3 * $default-padding;
+  margin-bottom: var(--spacing-3);
   background-color: transparent;
   transition: background-color $transition-duration $transition-easing;
 
@@ -87,8 +87,8 @@
     top: 0;
     left: $collapsed-main-menu-width - 1;
     width: auto;
-    padding-left: 4 * $default-padding;
-    padding-right: 4 * $default-padding;
+    padding-left: var(--spacing-4);
+    padding-right: var(--spacing-4);
     visibility: hidden;
     opacity: 0;
     background-color: $main-menu-active-bg-color;
@@ -103,7 +103,7 @@
         visibility: visible;
         max-width: $main-menu-entry-max-width;
         opacity: 1;
-        padding-left: 2 * $default-padding;
+        padding-left: var(--spacing-2);
         background-color: transparent;
       }
     }
@@ -180,8 +180,8 @@
   }
 
   a {
-    padding-left: 4 * $default-padding;
-    padding-right: 4 * $default-padding;
+    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);
@@ -189,7 +189,7 @@
 
   &.active a,
   a:hover {
-    background-color: darken($dark-orange, 5%);
+    background-color: hsl(28deg, 77%, 63%);
   }
 }
 
@@ -211,7 +211,7 @@
         line-height: 24px;
 
         a {
-          padding: 8px 4px 8px 42px;
+          padding: var(--spacing-2) var(--spacing-1) var(--spacing-2) 42px;
         }
       }
     }
@@ -226,11 +226,11 @@
 
   label {
     float: left;
-    font-size: $small-font-size;
+    font-size: var(--font-size_small);
     line-height: 27px;
     height: 27px;
-    margin-left: 8px;
-    margin-right: 4px;
+    margin-left: var(--spacing-2);
+    margin-right: var(--spacing-1);
   }
 
   img {
@@ -253,12 +253,12 @@
   form {
     align-self: center;
     justify-self: flex-end;
-    margin-right: $default-padding;
+    margin-right: var(--spacing-1);
     line-height: 1;
   }
 
   &:hover {
-    color: $text-color;
+    color: var(--color-text);
     text-decoration: none;
   }
 
@@ -266,7 +266,7 @@
     display: flex;
     align-items: end;
     cursor: pointer;
-    padding: $default-padding 2 * $default-padding;
+    padding: var(--spacing-1) var(--spacing-2);
 
     &:focus {
       @include default-focus-style($box-shadow: inset 0 0 0 2px $focus-color);
@@ -279,16 +279,16 @@
   }
 
   .page_name {
-    margin-right: $default-margin;
+    margin-right: var(--spacing-1);
     text-shadow: $text-shadow-light;
   }
 
   .page_language,
   .page_site {
     display: inline-block;
-    color: $muted-text-color;
-    font-size: $small-font-size;
-    margin-right: $default-margin;
+    color: var(--color-text_muted);
+    font-size: var(--font-size_small);
+    margin-right: var(--spacing-1);
   }
 
   .page_language {

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

@@ -11,12 +11,12 @@
   height: 21px;
 
   > alchemy-icon {
-    margin: 0 8px 0 4px;
+    margin: 0 var(--spacing-2) 0 var(--spacing-1);
   }
 
   .icon {
     .select2-highlighted & {
-      fill: $white;
+      fill: var(--color-white);
     }
   }
 }
@@ -33,12 +33,12 @@
 
 .node-select--node-url {
   margin-left: auto;
-  padding: $default-padding 2 * $default-padding;
-  color: $dark-gray;
-  font-size: $small-font-size;
+  padding: var(--spacing-1) var(--spacing-2);
+  color: var(--color-grey_dark);
+  font-size: var(--font-size_small);
 
   .select2-highlighted & {
-    color: $white;
+    color: var(--color-white);
   }
 }
 

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

@@ -37,20 +37,20 @@
 
   .node_page {
     display: inline-flex;
-    gap: $default-padding;
+    gap: var(--spacing-1);
     align-items: center;
-    padding: 0 8px;
+    padding: 0 var(--spacing-2);
     margin-left: auto;
   }
 
   .node_url {
     display: flex;
     align-items: center;
-    padding: 0 2 * $default-padding;
+    padding: 0 var(--spacing-2);
     white-space: nowrap;
     background-color: $sitemap-info-background-color;
     line-height: $sitemap-line-height;
-    font-size: $small-font-size;
+    font-size: var(--font-size_small);
     @include border-right-radius($default-border-radius);
   }
 
@@ -70,7 +70,7 @@
 
   li {
     line-height: $sitemap-line-height;
-    padding-left: $default-padding;
+    padding-left: var(--spacing-1);
 
     li {
       padding-left: $sitemap-line-height;
@@ -80,14 +80,14 @@
 
 #node_filter_result {
   display: none;
-  margin-left: 2 * $default-margin;
+  margin-left: var(--spacing-2);
 }
 
 .sitemap_node {
   display: flex;
   align-items: center;
   height: $sitemap-line-height;
-  margin: 3 * $default-margin 0;
+  margin: var(--spacing-3) 0;
   transition: background-color $transition-duration;
 
   &.highlight {
@@ -95,7 +95,7 @@
   }
 
   &.no-match .sitemap_pagename_link {
-    color: $medium-gray;
+    color: var(--color-grey_light);
   }
 
   &:hover {
@@ -110,7 +110,7 @@
     justify-content: space-between;
     @include border-left-radius($default-border-radius);
     padding: 0 0 0 10px;
-    margin: 2px;
+    margin: var(--spacing-0);
     text-decoration: none;
     overflow: hidden;
     background-color: $sitemap-page-background-color;
@@ -133,13 +133,13 @@
   position: relative;
   width: 32px;
   height: $sitemap-line-height;
-  padding: 0 2 * $default-padding;
+  padding: 0 var(--spacing-2);
 }
 
 .nodes_tree-right_tools {
   display: flex;
   height: $sitemap-line-height;
-  padding: 0 2 * $default-padding;
+  padding: 0 var(--spacing-2);
   align-items: center;
 
   > a {
@@ -157,7 +157,7 @@
   }
 
   .icon.blank {
-    margin-left: 2px;
+    margin-left: var(--spacing-0);
     float: left;
     margin-top: 3px;
     margin-right: 3px;

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

@@ -4,16 +4,20 @@ alchemy-message {
   border-style: $default-border-style;
   border-radius: $default-border-radius;
   position: relative;
-  padding: 8px 16px 8px 32px;
-  margin-bottom: 8px;
+  padding: var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-8);
+  margin-bottom: var(--spacing-2);
   text-align: left;
   min-height: 2.6em;
   word-break: break-word;
   line-height: 1.5;
 
+  turbo-frame & {
+    margin: var(--spacing-2);
+  }
+
   &[type="footnote"] {
-    font-size: $small-font-size;
-    margin: 16px;
+    font-size: var(--font-size_small);
+    margin: var(--spacing-4);
   }
 
   &[type="notice"] {
@@ -50,7 +54,7 @@ alchemy-message {
 
   alchemy-icon {
     position: absolute;
-    left: 2 * $default-margin;
+    left: var(--spacing-2);
     top: 9px;
     color: inherit;
 
@@ -80,12 +84,12 @@ alchemy-message {
   }
 
   ol {
-    margin: 0 0 8px;
-    padding-left: 20px;
+    margin: 0 0 var(--spacing-2);
+    padding-left: var(--spacing-5);
 
     li {
       text-indent: 0;
-      margin-bottom: 4px;
+      margin-bottom: var(--spacing-1);
     }
   }
 }

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

@@ -0,0 +1,81 @@
+.page-select--page,
+.page-select--page-name,
+.page-select--page-urlname {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.page-select--page {
+  /* Need to redefine these variables here with the defaults from Alchemy,
+   * because they are not available if you only load this file.
+   */
+  --size-1: var(--spacing-0, 2px);
+  --size-2: var(--spacing-1, 4px);
+  --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));
+  --highlight-color: var(--grey);
+
+  display: flex;
+  flex-direction: column;
+  color: var(--color);
+
+  alchemy-icon {
+    margin-right: var(--size-2);
+
+    .icon {
+      fill: currentColor;
+    }
+  }
+
+  .select2-highlighted & {
+    color: var(--highlight-color);
+  }
+}
+
+.page-select--top,
+.page-select--bottom {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.page-select--bottom {
+  font-size: var(--small-font-size);
+  padding-left: var(--size-1);
+}
+
+.page-select--page-urlname {
+  color: var(--color-text_muted, hsla(224deg, 23%, 26%, 0.5));
+  padding-right: var(--size-2);
+
+  .select2-highlighted & {
+    color: var(--highlight-color);
+  }
+}
+
+.page-select--language-code {
+  --bg-color: var(--grey);
+  --highlight-bg-color: var(--color-white, hsl(0deg, 0%, 100%));
+  --border-radius: var(--border-radius_medium, 3px);
+
+  display: inline-block;
+  background-color: var(--bg-color);
+  margin-left: auto;
+  border-radius: var(--border-radius);
+  padding: var(--size-1) var(--size-2);
+  text-transform: uppercase;
+
+  .select2-highlighted & {
+    color: var(--color);
+    background-color: var(--highlight-bg-color);
+  }
+}
+
+.page-select--site-name {
+  margin-left: auto;
+  padding: var(--size-2) 0 var(--size-2) var(--size-3);
+  font-size: var(--small-font-size);
+}

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

@@ -8,7 +8,7 @@
   width: 100%;
   left: 0px;
   height: $pagination-height;
-  padding: 2 * $default-padding;
+  padding: var(--spacing-2);
   padding-left: $main-menu-width + 10px;
   text-align: left;
   border-top: $default-border;
@@ -19,14 +19,14 @@
   em {
     font-size: $default-font-size;
     font-weight: bold;
-    color: $icon-color;
-    padding: $default-padding;
-    margin: 0 $default-margin/2;
+    color: var(--color-icon);
+    padding: var(--spacing-1);
+    margin: 0 var(--spacing-0);
     border-radius: $default-border-radius;
   }
 
   a:hover {
-    color: $text-color;
+    color: var(--color-text);
     background-color: $default-border-color;
     text-decoration: none;
   }
@@ -36,21 +36,21 @@
   }
 
   .page {
-    padding: $default-padding 2 * $default-padding;
+    padding: var(--spacing-1) var(--spacing-2);
   }
 
   .current {
-    color: $text-color;
+    color: var(--color-text);
     background-color: $default-border-color;
     cursor: default;
   }
 
   .previous_page {
-    margin-right: 2 * $default-padding;
+    margin-right: var(--spacing-2);
   }
 
   .next_page {
-    margin-left: 2 * $default-padding;
+    margin-left: var(--spacing-2);
   }
 
   .disabled,
@@ -88,5 +88,5 @@
 #assign_image_list .pagination,
 #assign_file_list .pagination {
   position: absolute;
-  padding-left: 8px;
+  padding-left: var(--spacing-2);
 }

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

@@ -1,7 +1,3 @@
-/*
- *= require_self
- */
-
 @import "alchemy/defaults";
 
 div#main_menu,
@@ -18,7 +14,7 @@ div#archive_all {
 }
 
 span.icon.true:before {
-  content: 'x';
+  content: "x";
 }
 
 div.pagination {
@@ -31,5 +27,5 @@ div.pagination em.current {
 }
 
 div.pagination em:before {
-  content: 'Page ';
+  content: "Page ";
 }

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

@@ -1,7 +1,7 @@
 .resource_info {
   .value {
-    @include clearfix;
     position: relative;
+    @include clearfix;
 
     > label {
       @include form-label;
@@ -25,18 +25,17 @@
     align-items: center;
     justify-content: center;
     position: absolute;
-    right: 2 * $default-padding;
-    top: 2 * $default-padding;
+    right: 0;
+    top: var(--spacing-1);
     height: $form-field-height;
-    background-color: $medium-gray;
-    margin: -$default-margin -2 * $default-margin;
-    padding: 0 2 * $default-padding;
+    background-color: var(--color-grey_light);
+    padding: 0 var(--spacing-2);
     transition: background-color 0.3s;
     @extend .right-rounded-border;
 
     &:hover {
       cursor: pointer;
-      background-color: darken($medium-gray, 10%);
+      background-color: hsl(0deg, 0%, 84%);
       text-decoration: none;
     }
   }

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

@@ -1,13 +1,13 @@
 .search_field {
   position: relative;
-  margin-bottom: $default-margin;
+  margin-bottom: var(--spacing-1);
   height: 29px;
 }
 
 .search_field {
   .fa-search {
     position: absolute;
-    left: 8px;
+    left: var(--spacing-2);
     top: 9px;
   }
 
@@ -32,7 +32,7 @@
   visibility: hidden;
   position: absolute;
   top: 7px;
-  right: 8px;
+  right: var(--spacing-2);
   width: 16px;
   height: 16px;
   align-items: center;
@@ -56,12 +56,12 @@
     width: 0;
     height: 100%;
     border: none;
-    background-color: transparentize($form-field-background-color, 0.25);
+    background-color: hsla(0deg, 0%, 100%, 0.75);
     transition:
       width $transition-duration ease-in-out,
       background-color $transition-duration linear;
     border-radius: 0;
-    padding: 8px 16px 8px 32px;
+    padding: var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-8);
     margin: 0;
     text-align: left;
     box-shadow: none;
@@ -87,6 +87,6 @@
   }
 
   .search_field_clear {
-    top: 16px;
+    top: var(--spacing-4);
   }
 }