alchemy_cms 4.0.5 → 4.1.0.beta

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

@@ -1,12 +1,12 @@
 .pagination {
   background: $light_gray;
-  color: $text-color;
   position: fixed;
   bottom: 0;
   right: 0;
   width: 100%;
   left: 0px;
   height: 52px;
+  line-height: 35px;
   padding: 2*$default-padding;
   padding-left: $main-menu-width + 10px;
   text-align: left;
@@ -15,8 +15,9 @@
 
   a, span, em {
     font-size: $default-font-size;
-    line-height: 25px;
-    padding: $default-padding;
+    font-weight: bold;
+    color: $icon-color;
+    padding: $default-padding 2*$default-padding;
   }
 
   a:hover {
@@ -27,14 +28,14 @@
 
   span a { padding: 0 }
 
-  .button { padding: 0px 8px }
+  .page { padding: 0px 8px }
 
   .current {
-    color: $text-color;
-    border: $default-border;
+    color: $blue;
+    border: 1px solid $blue;
     text-shadow: 0px 1px 1px #fff;
     cursor: default;
-    @extend %rounded-border;
+    border-radius: $default-border-radius;
     padding: 5px 8px;
   }
 
@@ -55,6 +56,10 @@
     background: transparent;
     cursor: default;
   }
+
+  .icon {
+    color: inherit;
+  }
 }
 
 #assign_image_list .pagination, #assign_file_list .pagination {

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

@@ -0,0 +1,20 @@
+#alchemy_preview_window {
+  position: absolute;
+  left: $main-menu-width;
+  top: 75px;
+  width: calc(100vw - #{$main-menu-width - $default-border-width});
+  height: calc(100vh - #{$top-menu-height});
+  border: 0 none;
+  background: #fff;
+  border-right: $default-border;
+  transition: 200ms ease-in-out;
+
+  .collapsed-menu & {
+    left: $collapsed-main-menu-width;
+    width: calc(100vw - #{$collapsed-main-menu-width - $default-border-width});
+  }
+
+  .collapsed-menu.elements-window-visible & {
+    width: calc(100vw - #{$collapsed-main-menu-width - $default-border-width} - #{$elements-window-width});
+  }
+}

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

@@ -29,7 +29,7 @@
     position: absolute;
     right: 2*$default-padding;
     top: 2*$default-padding;
-    height: $default-form-field-height;
+    height: $form-field-height;
     line-height: 25px;
     background-color: $medium-gray;
     margin: -$default-margin -2 * $default-margin;

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

@@ -4,11 +4,13 @@
   height: 29px;
 }
 
-.search_field .icon,
-.js_filter_field_box .icon {
-  position: absolute;
-  left: 8px;
-  top: 8px;
+.search_field,
+.js_filter_field_box {
+  .fa-search {
+    position: absolute;
+    left: 8px;
+    top: 9px;
+  }
 }
 
 .js_filter_field_box {
@@ -26,7 +28,7 @@
   }
 
   label {
-    font-size: 10px;
+    font-size: $small-font-size;
     display: block;
     text-align: center;
     padding-top: 3px;
@@ -36,14 +38,13 @@
 .search_field_clear,
 .js_filter_field_clear {
   display: none;
-  width: 16px;
-  height: 16px;
-  line-height: 16px;
-  @extend .icon-cross;
   position: absolute;
-  right: 8px;
   top: 7px;
-  text-decoration: none !important;
+  right: 8px;
+  width: 16px;
+  height: 16px;
+  line-height: 14px;
+  text-align: center;
 }
 
 #tags_tag_list {
@@ -64,7 +65,7 @@
       padding: 4px;
       margin: 0 0 4px 0;
       position: relative;
-      @extend %rounded-border;
+      border-radius: $default-border-radius;
 
       &.odd { background-color: #eaf3f9 }
 
@@ -121,8 +122,10 @@
     width: 150px;
     height: inherit;
     border: none;
-    background-color: rgba(255, 255, 255, 0.5);
-    transition: width $transition-duration ease-in-out;
+    background-color: transparentize($form-field-background-color, 0.25);
+    transition:
+      width $transition-duration ease-in-out,
+      background-color $transition-duration linear;
     border-radius: 0;
     padding: 8px 16px 8px 32px;
     margin: 0;
@@ -132,6 +135,7 @@
 
     &:focus {
       width: 250px;
+      background-color: $form-field-background-color;
     }
   }
 

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

@@ -1,54 +1,68 @@
+$medium-select-box-width: 90px;
+
 select {
-  @include button-defaults;
-  height: 29px;
+  @include button-defaults(
+    $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,
+    $border: 1px solid $default-border-color,
+    $color: $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 {
+    width: $medium-select-box-width;
+  }
 }
 
 .select2-container {
-
   &.alchemy_selectbox {
-
-    text-shadow: #FFF 0px 1px 0px;
-
     .select2-choice {
-      height: $default-form-field-height;
-      line-height: $default-form-field-height - 2;
-      @include button-defaults($padding: 0 2*$default-padding, $margin: 0);
+      height: $form-field-height;
+      @include button-defaults(
+        $background-color: $form-field-background-color,
+        $hover-color: $form-field-background-color,
+        $hover-border-color: darken($default-border-color, 10%),
+        $padding: $form-field-padding,
+        $border: 1px solid $default-border-color,
+        $color: $text-color,
+        $margin: 0);
+      background-image: none;
       display: block;
       font-weight: normal;
       text-align: left;
 
       .select2-arrow {
-        top: 2px;
-        width: 20px;
-        height: 23px;
-        line-height: 23px;
+        top: 0;
+        width: $form-field-height;
+        height: $form-field-height;
         background: transparent;
-        border-left: 1px solid #CACACA;
+        border-left: 0 none;
 
         b {
-          @extend .icon-menu;
+          @extend .fas;
           background-image: none;
+          opacity: $addon-icon-opacity;
 
           &:before {
-            position: relative;
-            top: 5px;
-            left: 1px;
+            content: fa-content($fa-var-caret-down);
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
           }
         }
       }
     }
 
-    &.select2-dropdown-open {
-      .select2-choice .select2-arrow b {
-        background-position: -17px 0px;
-      }
-    }
-
     &.medium {
-      width: 90px;
+      width: $medium-select-box-width;
     }
 
     &.select2-container-active {
@@ -108,14 +122,24 @@ select {
         background-image: none;
         border: 0 none;
         box-shadow: none;
+        color: $text-color;
       }
 
       .select2-search-choice-close {
+        @extend .fas;
+        @extend .fa-fw;
         left: auto;
-        right: 4px;
-        top: 6px;
+        right: 5px;
+        top: 5px;
         background: none;
-        @extend .icon-cross;
+        font-size: $small-font-size;
+        text-decoration: none;
+
+        &:before {
+          @extend .fa-xs;
+          content: fa-content($fa-var-times);
+          opacity: $addon-icon-opacity;
+        }
 
         &:hover {
           color: $text-color;
@@ -134,10 +158,17 @@ select {
   }
 }
 
-.tag_list {
+.tag_list, .autocomplete_tag_list {
   .select2-container.select2-container-multi {
     .select2-search-choice {
-      @include tag-base($margin: 4px, $padding: 4px 24px);
+      padding: 0;
+
+      div {
+        @include tag-base(
+          $padding: $default-padding 6*$default-padding $default-padding 3*$default-padding,
+          $margin: 0
+        );
+      }
     }
   }
 }
@@ -174,7 +205,7 @@ select {
 
       &.select2-highlighted {
         background: $button-hover-bg-color;
-        color: $text-color;
+        color: $white;
       }
 
       &.select2-result-with-children {
@@ -198,7 +229,7 @@ select {
 
   &.select2-drop-active {
     border-radius: $default-border-radius;
-    border: 1px solid $blue;
+    border: $default-border;
   }
 }
 

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

@@ -24,38 +24,22 @@
 }
 
 .sitemap_pagename_link {
-  background-color: #fff;
-  color: black;
-  display: block;
-  padding: 0 3*$default-padding;
+  display: inline-block;
+  padding: 0 10px;
+  margin: 2px;
   text-decoration: none;
-  transition: background-color, 400ms;
 
   &.inactive {
     color: #656565;
   }
-
-  :hover {
-    text-decoration: underline;
-
-    &:after {
-      content: '';
-      width: 16px;
-      height: 16px;
-      float: left;
-      margin-right: $default-margin;
-      background: image-url('alchemy/icons.png') -160px -168px;
-      margin-top: $default-margin;
-    }
-  }
 }
 
 .redirect_url {
   float: right;
   text-align: right;
-  background-color: #fff0c4;
+  background-color: $sitemap-info-background-color;
   line-height: $sitemap-line-height;
-  font-size: 10px;
+  font-size: $small-font-size;
   padding: 0 2*$default-padding;
   max-width: 45%;
   white-space: nowrap;
@@ -63,12 +47,28 @@
   text-overflow: ellipsis;
 }
 
-#page_selector_container .sitemap_pagename_link:hover {
-  text-decoration: none;
-}
+#page_selector_container {
+  height: 230px;
+  background-color: $light-gray;
+  margin-bottom: 4px;
+  border-width: $form-field-border-width;
+  border-style: $form-field-border-style;
+  border-color: $form-field-border-color;
+  overflow: auto;
+  padding: 4px 0 0 4px;
+  border-radius: $default-border-radius;
 
-#page_selector_container .sitemap_pagename_link:hover:after {
-  display: none;
+  .sitemap_pagename_link:hover {
+    text-decoration: none;
+
+    &:after {
+      display: none;
+    }
+  }
+
+  .sitemap_right_tools {
+    width: 24px;
+  }
 }
 
 .sitemap_line_spacer {
@@ -81,29 +81,40 @@
   height: $sitemap-line-height;
   margin: 3*$default-margin 0;
   position: relative;
+  transition: background-color 250ms;
 
-  &.highlight .sitemap_pagename_link {
-    background-color: #FFFBA5;
+  &.highlight {
+    background-color: $sitemap-highlight-color;
   }
 
   &.no-match .sitemap_pagename_link {
     color: $medium-gray;
   }
 
-  &:hover .sitemap_pagename_link {
-    background-color: $light_yellow;
+  &:hover {
+    background-color: $sitemap-page-hover-color;
+    border-radius: $default-border-radius;
+  }
+}
+
+.sitemap_sitename {
+  @include border-left-radius($default-border-radius);
+  line-height: $sitemap-line-height - 4;
+  overflow: hidden;
+  background-color: $sitemap-page-background-color;
+
+  &.without-status {
+    @include border-right-radius($default-border-radius);
   }
 }
 
 .sitemap_left_images {
-  @extend .left-rounded-border;
   position: relative;
   width: 32px;
-  height: $sitemap-line-height;
-  line-height: $sitemap-line-height - 2px;
+  line-height: $sitemap-line-height;
   float: left;
   padding: 0 2*$default-padding;
-  background-color: rgba(#fff, .75);
+  text-align: center;
 }
 
 .sitemap_right_tools {
@@ -137,19 +148,25 @@
   }
 }
 
-#page_selector_container .sitemap_right_tools {
-  width: 24px;
-}
+#sitemap {
+  padding: 0 0 104px 0;
+
+  &.sorting {
+    padding-top: 100px;
+
+    .page_icon { cursor: move }
+  }
 
-ul#sitemap {
   .page_folder {
-    @extend .icon;
     position: absolute;
     left: -23px;
-    top: 8px;
+    top: 0;
+  }
 
-    &.collapsed { @extend .icon.expand.small }
-    &.folded { @extend .icon.collapse.small }
+  .placeholder {
+    background-color: $medium-gray;
+    margin-bottom: 0px;
+    margin-left: 22px;
   }
 
   ul {
@@ -160,7 +177,7 @@ ul#sitemap {
   li {
     padding-left: 0;
 
-    .selected_page a {
+    .selected_page {
       background-color: $linked-color;
       color: $dark-gray;
     }
@@ -172,23 +189,9 @@ ul#sitemap {
   }
 }
 
-ul#sitemap li .sitemap_toolrow,
-ul.list li .sitemap_toolrow {
-  margin: 0;
-  overflow: auto;
-  padding: $default-padding 0;
-}
-
-ul#sitemap .sitemap_sitename,
-ul.list .sitemap_sitename {
-  height: $sitemap-line-height;
-  line-height: $sitemap-line-height;
-  overflow: hidden;
-}
-
 .page_infos {
   @extend .right-rounded-border;
-  background-color: rgba(#fff, .75);
+  background-color: $sitemap-page-background-color;
   border-left: 1px solid $light-gray;
   float: right;
   height: $sitemap-line-height;
@@ -200,79 +203,12 @@ ul.list .sitemap_sitename {
   }
 }
 
-#header .page_status_and_name .page_status {
+.page_status_and_name .page_status {
   margin-left: 2px;
-  line-height: 1;
-  vertical-align: text-bottom;
 }
 
 .page_status {
   display: inline-block;
-
-  .icon {
-    vertical-align: text-bottom;
-
-    &.restricted {
-      background-position: -256px -39px;
-    }
-
-    &.not_restricted {
-      background-position: -288px -39px;
-      opacity: 0.3;
-    }
-
-    &.visible {
-      background-position: -128px -39px;
-    }
-
-    &.not_visible {
-      background-position: -160px -39px;
-      opacity: 0.3;
-    }
-
-    &.public {
-      background-position: -192px -39px;
-    }
-
-    &.not_public {
-      background-position: -224px -39px;
-      opacity: 0.3;
-    }
-  }
-}
-
-#sitemap.list {
-
-  &.sorting {
-    padding-top: 100px;
-
-    .page.icon { cursor: move }
-  }
-
-  .locked .page.icon {
-    background-position: -32px -40px;
-  }
-
-  .page.icon.not-allowed {
-    &:after {
-      content: '';
-      position: absolute;
-      bottom: -2px;
-      right: -1px;
-      width: 8px;
-      height: 8px;
-      background: image-url('alchemy/icons.png') -5px -77px;
-    }
-  }
-
-  .page_status .icon {
-    vertical-align: middle;
-  }
-}
-
-a.folder_link {
-  text-decoration: none;
-  outline: none;
 }
 
 #create_language_tree_form {
@@ -282,7 +218,7 @@ a.folder_link {
   padding: 4*$default-padding;
   border: $default-border;
   background: $medium-gray;
-  @extend %rounded-border;
+  border-radius: $default-border-radius;
 }
 
 #sitemap_heading {
@@ -307,30 +243,16 @@ a.folder_link {
   margin-left: 2*$default-margin;
 }
 
-.alchemy-dialog ul.list#sitemap {
-  margin: 0;
-  padding: 0 8px 8px 0;
-
-  .page.icon { cursor: default }
-
-  li li.selectboxit-option {
-    padding-left: 8px;
-    padding-right: 8px;
+.alchemy-dialog {
+  #sitemap-wrapper {
+    min-height: 0;
   }
 
-  .selectboxit-options {
-    right: 0;
-  }
+  #sitemap {
+    margin: 0;
+    padding: 0 24px 8px 8px;
 
-  .close_elements_from_page_selector {
-    position: absolute;
-    right: $default-padding;
-    top: 12px;
-    font-size: 16px;
-    width: 16px;
-    height: 16px;
-    cursor: pointer;
-    @extend .icon-cross;
+    .page_icon { cursor: default }
   }
 }