alchemy_cms 3.4.2 → 3.5.0.rc1

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

@@ -4,7 +4,37 @@
   height: 29px;
 }
 
-.search_field_clear, .js_filter_field_clear {
+.search_field .icon,
+.js_filter_field_box .icon {
+  position: absolute;
+  left: 8px;
+  top: 8px;
+}
+
+.js_filter_field_box {
+  position: absolute;
+  right: 4px;
+  top: 8px;
+
+  .js_filter_field {
+    width: 220px;
+    text-align: left;
+    border-radius: $default-border-radius;
+    padding: 3px 24px 3px 28px;
+    height: 29px;
+    margin: 0;
+  }
+
+  label {
+    font-size: 10px;
+    display: block;
+    text-align: center;
+    padding-top: 3px;
+  }
+}
+
+.search_field_clear,
+.js_filter_field_clear {
   display: none;
   width: 16px;
   height: 16px;
@@ -71,3 +101,44 @@
     right: 4px;
   }
 }
+
+#toolbar,
+#overlay_toolbar {
+
+  .search_form,
+  .js_filter_field_box {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 45px;
+  }
+
+  .search_field {
+    height: inherit;
+  }
+
+  .search_input_field {
+    width: 150px;
+    height: inherit;
+    border: none;
+    background-color: rgba(255, 255, 255, 0.5);
+    transition: width $transition-duration ease-in-out;
+    border-radius: 0;
+    padding: 8px 16px 8px 32px;
+    margin: 0;
+    text-align: left;
+    box-shadow: none;
+    -webkit-appearance: none;
+
+    &:focus {
+      width: 250px;
+    }
+  }
+
+  .search_field .icon,
+  .js_filter_field_box .icon,
+  .search_field_clear,
+  .js_filter_field_clear {
+    top: 16px;
+  }
+}

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

@@ -3,6 +3,7 @@ select {
   height: 29px;
   padding: 0.4em 0.6em;
   max-width: 100%;
+  width: auto;
 }
 
 .select2-container {
@@ -14,10 +15,10 @@ select {
     .select2-choice {
       height: 27px;
       line-height: 27px;
-      @include sassy-button-gradient('simple', $sb-base-color, $sb-second-color, $sb-text-color, $sb-text-style, $sb-pseudo-states);
-      border-color: $button-border-color;
+      @include button-defaults($padding: 0 2*$default-padding, $margin: 0);
+      display: block;
+      font-weight: normal;
       text-align: left;
-      border-radius: $default-border-radius;
 
       .select2-arrow {
         top: 2px;
@@ -46,44 +47,42 @@ select {
       }
     }
 
-    &.tiny {
+    &.medium {
+      width: 90px;
+    }
 
-      .select2-choice {
-        height: 18px;
-        line-height: 18px;
+    &.select2-container-active {
 
-        .select2-arrow {
-          width: 14px;
-          height: 14px;
-
-          b {
-            line-height: 4px;
-            width: 12px;
-            font-size: 10px;
-
-            &:before {
-              top: 0px;
-              left: 0px;
-            }
-          }
-        }
+      .select2-choice, .select2-choices {
+        @extend %blue-focus-style;
       }
+    }
+
+    &.select2-container-disabled {
 
-      &.select2-dropdown-open {
-        .select2-choice .select2-arrow b {
-          background-position: -20px -5px;
+      &:hover {
+        + .with-hint > .hint-bubble {
+          @include hint-hover-style;
+          top: 10px;
         }
       }
-    }
 
-    &.medium {
-      width: 90px;
-    }
+      + .with-hint > .hint-bubble {
+        top: 0;
+      }
 
-    &.select2-container-active {
+      .select2-choice, .select2-choice:hover {
+        background-image: none;
+        background-color: $light-gray;
+        box-shadow: none;
+        border-color: $border-inset-color;
+        cursor: not-allowed;
 
-      .select2-choice, .select2-choices {
-        @extend %blue-focus-style;
+        .select2-arrow {
+          border-color: $border-inset-color;
+
+          b { color: $border-inset-color; }
+        }
       }
     }
   }
@@ -108,7 +107,7 @@ select {
         padding: 4px 24px 4px 8px;
         background-image: none;
         border: 0 none;
-        @include box-shadow(none);
+        box-shadow: none;
       }
 
       .select2-search-choice-close {
@@ -198,7 +197,7 @@ select {
   }
 
   &.select2-drop-active {
-    @include border-radius($default-border-radius);
+    border-radius: $default-border-radius;
     border: 1px solid $blue;
   }
 }
@@ -212,18 +211,13 @@ select {
 
 .select_with_label {
   margin: 0 3*$default-margin;
-  @include inline-block(top);
-
-  label, form {
-    @include inline-block;
-  }
-
-  select { margin: 0; }
+  display: inline-block;
+  vertical-align: middle;
 
   label {
-    margin-right: $default-margin;
-
-    &:after { content: ':'; }
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 2*$default-margin;
   }
 }
 

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

@@ -9,12 +9,11 @@
   border-bottom: $default-border;
 
   div.info {
-    margin: 8px 8px 8px 78px;
-    width: 720px;
+    margin: 16px 12px 8px 163px;
   }
 
   .buttons {
-    margin-left: 78px;
+    margin-left: 163px;
   }
 }
 
@@ -33,7 +32,7 @@
   background-color: #fff;
   color: black;
   display: block;
-  padding-left: $default-padding;
+  padding: 0 3*$default-padding;
   text-decoration: none;
   @include transition(background-color, 400ms);
 
@@ -57,18 +56,16 @@
 }
 
 .redirect_url {
-  position: absolute;
-  top: $default-padding;
-  right: 199px;
+  float: right;
   text-align: right;
   background-color: #fff0c4;
   line-height: $sitemap-line-height;
-  padding-right: $default-padding;
   font-size: 10px;
-  padding-left: $default-padding;
+  padding: 0 2*$default-padding;
   max-width: 45%;
   white-space: nowrap;
   overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 #page_selector_container .sitemap_pagename_link:hover {
@@ -87,8 +84,7 @@
 
 .sitemap_page {
   height: $sitemap-line-height;
-  padding-bottom: $default-padding;
-  padding-top: $default-padding;
+  margin: 3*$default-margin 0;
   position: relative;
 
   &.highlight .sitemap_pagename_link {
@@ -104,27 +100,38 @@
   }
 }
 
-div.sitemap_left_images {
+.sitemap_left_images {
+  @extend .left-rounded-border;
+  position: relative;
   width: 16px;
-  margin-top: 3px;
+  height: $sitemap-line-height;
+  line-height: $sitemap-line-height - 2px;
   float: left;
-  margin-right: 8px;
-  background-color: $light-gray;
+  padding: 0 2*$default-padding;
+  background-color: rgba(#fff, .75);
 }
 
 .sitemap_right_tools {
   height: $sitemap-line-height;
-  background-color: $light-gray;
-  padding-left: 8px;
+  padding: 0 2*$default-padding;
   float: right;
-  width: 120px;
 
   .sitemap_tool {
     float: left;
-    width: 24px;
-    height: 24px;
-    line-height: 24px;
+    width: $sitemap-line-height;
+    height: $sitemap-line-height;
+    line-height: $sitemap-line-height;
     text-align: center;
+    margin: 0;
+
+    &.disabled .icon {
+      opacity: 0.25;
+      filter: grayscale(100%);
+    }
+
+    a {
+      display: block;
+    }
   }
 
   .icon.blank {
@@ -135,13 +142,7 @@ div.sitemap_left_images {
   }
 }
 
-.sitemap_sitetools {
-  padding: 0;
-  float: left;
-  width: 72px;
-}
-
-div#page_selector_container div.sitemap_right_tools {
+#page_selector_container .sitemap_right_tools {
   width: 24px;
 }
 
@@ -153,7 +154,8 @@ ul#sitemap {
       margin-right: 52px;
 
       span.page_move {
-        @include inline-block;
+        display: inline-block;
+        vertical-align: middle;
         width: 74px;
         text-align: center;
       }
@@ -162,9 +164,9 @@ ul#sitemap {
 
   .page_folder {
     @extend .icon;
-    float: left;
-    margin-left: -21px;
-    margin-top: 1px;
+    position: absolute;
+    left: -23px;
+    top: 8px;
 
     &.collapsed { @extend .icon.expand.small }
     &.folded { @extend .icon.collapse.small }
@@ -206,77 +208,86 @@ ul.list .sitemap_sitename {
 
 .page_infos {
   @extend .right-rounded-border;
-  background-color: #fff;
+  background-color: rgba(#fff, .75);
   border-left: 1px solid $light-gray;
   float: right;
   height: $sitemap-line-height;
+  line-height: $sitemap-line-height;
+  padding: 0 $default-padding;
 
   .page_status {
-    margin: $default-margin;
+    padding: 0 $default-padding;
   }
 }
 
-#sub_navigation .page_status_and_name .page_status {
-  float: none;
-  @include inline-block(-3px);
+#header .page_status_and_name .page_status {
   margin-left: 2px;
+  line-height: 1;
+  vertical-align: text-bottom;
 }
 
 .page_status {
-  width: 16px;
-  height: 16px;
-  background-image: image-url('alchemy/icons.png');
-  background-repeat: no-repeat;
-  float: left;
+  display: inline-block;
 
-  &.restricted {
-    background-position: -256px -39px;
-  }
+  .icon {
+    vertical-align: text-bottom;
 
-  &.not_restricted {
-    background-position: -288px -39px;
-    @include opacity(0.3);
-  }
+    &.restricted {
+      background-position: -256px -39px;
+    }
 
-  &.visible {
-    background-position: -128px -39px;
-  }
+    &.not_restricted {
+      background-position: -288px -39px;
+      opacity: 0.3;
+    }
 
-  &.not_visible {
-    background-position: -160px -39px;
-    @include opacity(0.3);
-  }
+    &.visible {
+      background-position: -128px -39px;
+    }
 
-  &.public {
-    background-position: -192px -39px;
-  }
+    &.not_visible {
+      background-position: -160px -39px;
+      opacity: 0.3;
+    }
 
-  &.not_public {
-    background-position: -224px -39px;
-    @include opacity(0.3);
+    &.public {
+      background-position: -192px -39px;
+    }
+
+    &.not_public {
+      background-position: -224px -39px;
+      opacity: 0.3;
+    }
   }
 }
 
-#sitemap {
+#sitemap.list {
 
   &.sorting {
+    padding-top: 100px;
 
     .page.icon { cursor: move }
   }
 
-  .page.icon {
-    float: left;
-    position: relative;
-  }
-
   .locked .page.icon {
     background-position: -32px -40px;
   }
-}
 
-.sitemap_sitestatus {
-  float: right;
-  margin-top: $default-margin;
+  .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 {
@@ -298,9 +309,8 @@ a.folder_link {
   padding: 0;
 
   .page_infos {
-    margin-right: 144px;
-    width: 40px;
-    text-align: center;
+    margin-right: 210px;
+    text-align: left;
     float: right;
     line-height: 28px;
     background: transparent;
@@ -308,16 +318,16 @@ a.folder_link {
 
   .page_name {
     line-height: 28px;
-    margin-left: 24px;
+    margin-left: 43px;
   }
 }
 
 #page_filter_result {
   display: none;
-  padding-left: 4*$default-padding;
+  margin-left: 2*$default-margin;
 }
 
-.alchemy-dialog ul#sitemap {
+.alchemy-dialog ul.list#sitemap {
   margin: 0;
   padding: 0 8px 8px 0;
 
@@ -358,7 +368,7 @@ a.folder_link {
   height: 33px;
   padding: $default-padding;
   border: $default-border;
-  @include box-shadow(#9ea09f 0px 0px 4px);
+  box-shadow: #9ea09f 0px 0px 4px;
   @extend %rounded-border;
 
   .spinner {