alchemy_cms 7.0.15 → 7.1.0.pre.b1

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

@@ -5,12 +5,11 @@
     padding-top: 100px;
 
     .page_icon {
-      cursor: move
+      cursor: move;
     }
   }
 
   .sitemap_node-level_0 {
-
     > .node_name {
       font-weight: bold;
     }
@@ -43,7 +42,7 @@
   .node_url {
     display: flex;
     align-items: center;
-    padding: 0 2*$default-padding;
+    padding: 0 2 * $default-padding;
     white-space: nowrap;
     background-color: $sitemap-info-background-color;
     line-height: $sitemap-line-height;
@@ -81,11 +80,12 @@
 
 #node_filter_result {
   display: none;
-  margin-left: 2*$default-margin;
+  margin-left: 2 * $default-margin;
 }
 
 .sitemap_node {
-  margin: 3*$default-margin 0;
+  height: $sitemap-line-height;
+  margin: 3 * $default-margin 0;
   transition: background-color $transition-duration;
 
   &.highlight {
@@ -102,6 +102,7 @@
   }
 
   .node_name {
+    height: $sitemap-line-height;
     display: flex;
     justify-content: space-between;
     @include border-left-radius($default-border-radius);
@@ -127,14 +128,16 @@
   width: 32px;
   line-height: $sitemap-line-height;
   float: left;
-  padding: 0 2*$default-padding;
+  padding: 0 2 * $default-padding;
   text-align: center;
 }
 
 .nodes_tree-right_tools {
+  display: flex;
   height: $sitemap-line-height;
-  padding: 0 2*$default-padding;
+  padding: 0 2 * $default-padding;
   float: right;
+  align-items: center;
 
   > a {
     float: left;
@@ -142,6 +145,7 @@
     height: $sitemap-line-height;
     line-height: $sitemap-line-height;
     text-align: center;
+    text-decoration: none;
     margin: 0;
 
     &.disabled .icon {

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

@@ -9,12 +9,16 @@ div.message {
   margin-bottom: 8px;
   text-align: left;
 
-  h1, h2, h3 { margin-top: 0 }
+  h1,
+  h2,
+  h3 {
+    margin-top: 0;
+  }
 
   .icon {
     position: absolute;
-    left: 8px;
-    top: 10px;
+    left: 2 * $default-margin;
+    top: 2 * $default-margin;
     color: inherit;
   }
 
@@ -42,6 +46,12 @@ div.message {
     }
   }
 
+  &.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;
@@ -54,7 +64,9 @@ div.message {
     color: $error_text_color;
   }
 
-  &.warning, &.warn, &.alert {
+  &.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

@@ -11,7 +11,7 @@
   flex-direction: column;
 
   .icon {
-    margin: 0 8px 0 4px;
+    margin: 0 $default-margin;
 
     .select2-highlighted & {
       color: $white;
@@ -28,7 +28,15 @@
 
 .page-select--bottom {
   font-size: $small-font-size;
-  padding-left: 6 * $default-padding;
+  padding-left: $default-padding;
+}
+
+.page-select--site-name {
+  color: $muted-text-color;
+
+  .select2-highlighted & {
+    color: $medium-gray;
+  }
 }
 
 .page-select--language-code {

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

@@ -8,45 +8,53 @@
   width: 100%;
   left: 0px;
   height: $pagination-height;
-  padding: 2*$default-padding;
+  padding: 2 * $default-padding;
   padding-left: $main-menu-width + 10px;
   text-align: left;
   border-top: $default-border;
   z-index: 10;
 
-  a, span, em {
+  a,
+  span,
+  em {
     font-size: $default-font-size;
     font-weight: bold;
     color: $icon-color;
-    padding: $default-padding 2*$default-padding;
+    padding: $default-padding;
     margin: 0 $default-margin/2;
+    border-radius: $default-border-radius;
   }
 
   a:hover {
-    color: #000;
-    text-shadow: none;
+    color: $text-color;
+    background-color: $default-border-color;
     text-decoration: none;
   }
 
-  span a { padding: 0 }
+  span a {
+    padding: 0;
+  }
+
+  .page {
+    padding: $default-padding 2 * $default-padding;
+  }
 
   .current {
     color: $text-color;
-    border: 1px solid $text-color;
-    text-shadow: 0px 1px 1px #fff;
+    background-color: $default-border-color;
     cursor: default;
-    border-radius: $default-border-radius;
   }
 
   .previous_page {
-    margin-right: 2*$default-padding;
+    margin-right: 2 * $default-padding;
   }
 
   .next_page {
-    margin-left: 2*$default-padding;
+    margin-left: 2 * $default-padding;
   }
 
-  .disabled, span {
+  .disabled,
+  span {
     color: #c0c0c0;
   }
 
@@ -67,7 +75,8 @@
   display: inline;
 }
 
-#assign_image_list .pagination, #assign_file_list .pagination {
+#assign_image_list .pagination,
+#assign_file_list .pagination {
   position: absolute;
   padding-left: 8px;
 }

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

@@ -7,7 +7,7 @@
   border: 0 none;
   background: #fff;
   border-right: $default-border;
-  transition: width $transition-duration ease-in-out;
+  transition: $transition-duration ease-in-out;
 
   .collapsed-menu & {
     left: $collapsed-main-menu-width;
@@ -15,14 +15,10 @@
   }
 
   .collapsed-menu.elements-window-visible & {
-    width: calc(
-      100vw - #{$collapsed-main-menu-width - $default-border-width} - #{$elements-window-min-width}
-    );
+    width: calc(100vw - #{$collapsed-main-menu-width - $default-border-width} - #{$elements-window-width});
 
-    @media screen and (min-width: 1777px) {
-      width: calc(
-        100vw - #{$collapsed-main-menu-width - $default-border-width} - #{$elements-window-width}
-      );
+    @media screen and (min-width: $large-screen-break-point) {
+      max-width: calc(100vw - #{$collapsed-main-menu-width - $default-border-width} - #{$elements-window-min-width});
     }
   }
 }

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

@@ -1,5 +1,4 @@
 .resource_info {
-
   .value {
     @include clearfix;
     position: relative;
@@ -22,20 +21,23 @@
   }
 
   .icon_button--right {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     position: absolute;
-    right: 2*$default-padding;
-    top: 2*$default-padding;
+    right: 2 * $default-padding;
+    top: 2 * $default-padding;
     height: $form-field-height;
-    line-height: 25px;
     background-color: $medium-gray;
     margin: -$default-margin -2 * $default-margin;
-    padding: 0 2*$default-padding;
+    padding: 0 2 * $default-padding;
     transition: background-color 0.3s;
     @extend .right-rounded-border;
 
     &:hover {
       cursor: pointer;
       background-color: darken($medium-gray, 10%);
+      text-decoration: none;
     }
   }
 }

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

@@ -5,27 +5,43 @@ select {
     $background-color: $form-field-background-color,
     $hover-color: $form-field-background-color,
     $hover-border-color: darken($default-border-color, 10%),
-    $padding: 0 2 * $default-padding,
+    $padding: $default-padding 26px $default-padding 2 * $default-padding,
     $border: 1px solid $default-border-color,
     $box-shadow: none,
-    $color: $text-color,
+    $color: $form-field-text-color,
     $margin: 0
   );
   height: $form-field-height;
-  padding: 0.4em 0.6em;
   max-width: 100%;
   width: auto;
   font-weight: normal;
   vertical-align: middle;
 
-  &.alchemy_selectbox.medium {
+  background-image: var(
+    --select-background-image,
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$icon-color}' viewBox='0 0 24 24'%3E%3Cpath d='M11.9997 13.1714L16.9495 8.22168L18.3637 9.63589L11.9997 15.9999L5.63574 9.63589L7.04996 8.22168L11.9997 13.1714Z'%3E%3C/path%3E%3C/svg%3E")
+  );
+  background-position: right 0.75em center;
+  background-repeat: no-repeat;
+  background-size: 1em;
+
+  &.tiny {
+    padding-right: 0.6em;
+  }
+
+  &.medium {
     width: $medium-select-box-width;
   }
+
+  &.large {
+    width: $large-select-box-width;
+  }
 }
 
 .select2-container {
   &.alchemy_selectbox {
     .select2-choice {
+      width: 100%;
       height: $form-field-height;
       @include button-defaults(
         $background-color: $form-field-background-color,
@@ -34,39 +50,46 @@ select {
         $padding: $form-field-padding,
         $border: 1px solid $default-border-color,
         $box-shadow: none,
-        $color: $text-color,
+        $color: $form-field-text-color,
         $margin: 0
       );
       background-image: none;
-      display: block;
+      display: flex;
+      gap: 2 * $default-padding;
+      align-items: center;
       font-weight: normal;
       text-align: left;
 
+      .select2-chosen {
+        flex-grow: 1;
+        margin-right: 0;
+      }
+
       .select2-arrow {
-        top: 0;
-        width: $form-field-height;
-        height: $form-field-height;
+        position: static;
         background: transparent;
         border-left: 0 none;
 
         b {
-          @extend .fas;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-family: "remixicon";
           background-image: none;
-          opacity: $addon-icon-opacity;
+          font-weight: normal;
+          color: $icon-color;
 
           &:before {
-            content: fa-content($fa-var-caret-down);
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
+            content: $ri-arrow-down-s-line;
           }
         }
       }
 
       .select2-search-choice-close {
-        top: 9px;
-        right: 28px;
+        position: static;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
       }
     }
 
@@ -86,17 +109,6 @@ select {
     }
 
     &.select2-container-disabled {
-      &:hover {
-        + .with-hint > .hint-bubble {
-          @include hint-hover-style;
-          top: 10px;
-        }
-      }
-
-      + .with-hint > .hint-bubble {
-        top: 0;
-      }
-
       .select2-choice,
       .select2-choice:hover {
         background-image: none;
@@ -119,19 +131,16 @@ select {
   &.select2-container-multi,
   &.select2-allowclear {
     .select2-search-choice-close {
-      @extend .fas;
-      @extend .fa-fw;
+      font-family: "remixicon";
       left: auto;
-      right: 5px;
-      top: 5px;
+      right: $default-padding;
+      top: $default-padding;
       background: none;
-      font-size: $small-font-size;
+      font-size: 12px;
       text-decoration: none;
 
       &:before {
-        @extend .fa-xs;
-        content: fa-content($fa-var-times);
-        opacity: $addon-icon-opacity;
+        content: $ri-close-line;
       }
 
       &:hover {
@@ -242,21 +251,19 @@ select {
   }
 }
 
-.window_form,
 #filter_bar {
+  select,
   .select2-container {
     width: 100%;
   }
 }
 
 .select_with_label {
+  display: inline-flex;
+  align-items: center;
   margin: 0 3 * $default-margin;
-  display: inline-block;
-  vertical-align: middle;
 
   label {
-    display: inline-block;
-    vertical-align: middle;
     margin-right: 2 * $default-margin;
   }
 }