alchemy_cms 2.9.1 → 3.0.0.rc5

data/app/assets/stylesheets/alchemy/menubar.css.scss

@@ -1,48 +1,12 @@
 /*
  *= require_self
  */
-@import "alchemy/defaults";
 
-@mixin transition {
-  -webkit-transition: left 0.15s ease-in-out;
-  -moz-transition: left 0.15s ease-in-out;
-  -ms-transition: left 0.15s ease-in-out;
-  -o-transition: left 0.15s ease-in-out;
-  transition: left 0.15s ease-in-out;
-}
-
-@mixin bounce {
-  -webkit-transition-timing-function: cubic-bezier(0, 0.5, .5, 1.3);
-  -moz-transition-timing-function: cubic-bezier(0, 0.5, .5, 1.3);
-  -ms-transition-timing-function: cubic-bezier(0, 0.5, .5, 1.3);
-  -o-transition-timing-function: cubic-bezier(0, 0.5, .5, 1.3);
-  transition-timing-function: cubic-bezier(0, 0.5, .5, 1.3);
-}
-
-@mixin bottom-right-rounded-border {
-  $side: bottom-right;
-  $radius: 3px;
-  -webkit-border-#{$side}-radius: $radius;
-  -moz-border-radius-#{$side}: $radius;
-  -ms-border-#{$side}-radius: $radius;
-  -o-border-#{$side}-radius: $radius;
-  border-#{$side}-radius: $radius;
-}
-
-@mixin drop-shadow {
-  $shadow: 0px 0px 4px $dark-gray;
-  -webkit-box-shadow: $shadow;
-  -moz-box-shadow: $shadow;
-  -ms-box-shadow: $shadow;
-  -o-box-shadow: $shadow;
-  box-shadow: $shadow;
-}
-
-@mixin box-sizing($box-sizing-type: border-box) {
-  -webkit-box-sizing: $box-sizing-type;
-  -moz-box-sizing: $box-sizing-type;
-  box-sizing: $box-sizing-type;
-}
+@import "compass/css3";
+@import "sassy-buttons";
+@import "alchemy/variables";
+@import "alchemy/mixins";
+@import "alchemy/extends";
 
 #alchemy_menubar {
   position: fixed;
@@ -51,11 +15,10 @@
   width: 400px;
   z-index: 10000;
   background: $light-gray;
-  @include transition;
-  @include bounce;
+  @include animate-left;
   @include bottom-right-rounded-border;
   @include drop-shadow;
-  @include box-sizing;
+  @include box-sizing(border-box);
   border-right: $default-border;
   border-bottom: $default-border;
   height: 44px;
@@ -64,24 +27,24 @@
   font: $default-font-style;
 
   * {
-    @include box-sizing;
+    @include box-sizing(border-box);
     margin: 0;
     padding: 0;
   }
 
   &:hover {
     left: 0;
-    @include transition;
   }
 
   &:after {
     content: '';
-    width: 24px;
-    height: 24px;
+    width: 28px;
+    height: 28px;
     position: absolute;
-    right: 10px;
-    top: 9px;
-    background: image-url('alchemy/icons.png') -240px 0;
+    right: 8px;
+    top: 8px;
+    background: image-url('alchemy/icon.svg') 0 0 no-repeat;
+    background-size: 28px 28px;
   }
 
   ul {
@@ -94,30 +57,22 @@
       height: 35px;
       margin: 0 $default-margin 0 0;
       padding: 0;
-      @include inline-block;
+      float: left;
       list-style-type: none;
       text-align: center;
-    }
-  }
-
-  a, button {
-    @extend %button-defaults;
-    padding-left: $default-padding;
-    padding-right: $default-padding;
-    width: 100%;
-    display: block;
-    line-height: 14px;
-    font-weight: normal;
-    text-decoration: none;
-    text-transform: none;
-    text-align: center;
-    color: $text-color;
-    font-family: $default-font-face;
 
-    // reset potentially icons that the website appends to all buttons
-    &:before, &:after {
-      display: none;
-      content: '';
+      a, button {
+        @extend %button-defaults;
+        padding-left: $default-padding;
+        padding-right: $default-padding;
+        width: 100%;
+        display: block;
+        line-height: 14px;
+        font-weight: normal;
+        text-decoration: none !important;
+        color: $text-color !important;
+        font-family: $default-font-face;
+      }
     }
   }
 }

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

@@ -1,9 +1,10 @@
-.message {
+// leave this as div, bcz some table columns also have .message
+div.message, p.message {
   padding: 8px 8px 8px 32px;
   line-height: 17px;
   border-width: 1px;
   border-style: solid;
-  @extend .rounded-border;
+  @extend %rounded-border;
   position: relative;
   margin-bottom: 8px;
   text-align: left;
@@ -38,20 +39,20 @@
 }
 
 div.info {
-  @extend .message;
+  @extend div.message;
   color: $text-color;
   background-color: #eaf4f9;
   border-color: #0b5c84;
 }
 
 div.error {
-  @extend .message;
+  @extend div.message;
   background-color: #f1c9ca;
   color: #931f23;
 }
 
 div.warning, div.warn {
-  @extend .message;
+  @extend div.message;
   background-color: #f7efb8;
   color: #756f47;
 }

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

@@ -36,7 +36,7 @@
     border: $default-border;
     text-shadow: 0px 1px 1px #fff;
     cursor: default;
-    @extend .rounded-border;
+    @extend %rounded-border;
     padding: 5px 8px;
   }
 

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

@@ -1,6 +1,7 @@
 .search_field {
   position: relative;
   margin-bottom: $default-margin;
+  height: 29px;
 }
 
 .search_field_clear, .js_filter_field_clear {
@@ -8,14 +9,14 @@
   width: 16px;
   height: 16px;
   line-height: 16px;
-  @extend .alchemy-icon-cross;
+  @extend .icon-cross;
   position: absolute;
   right: 8px;
   top: 7px;
   text-decoration: none !important;
 }
 
-td#tags_tag_list {
+#tags_tag_list {
   text-align: left;
   padding-top: 5px;
 
@@ -33,7 +34,7 @@ td#tags_tag_list {
       padding: 4px;
       margin: 0 0 4px 0;
       position: relative;
-      @extend .rounded-border;
+      @extend %rounded-border;
 
       &.odd { background-color: #eaf3f9 }
 

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

@@ -0,0 +1,199 @@
+//= require select2
+
+select {
+  @extend %button-defaults;
+  height: 29px;
+  padding: 0.4em 0.6em;
+}
+
+.select2-container {
+
+  &.alchemy_selectbox {
+
+    text-shadow: #FFF 0px 1px 0px;
+
+    .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;
+      text-align: left;
+      border-radius: $default-border-radius;
+
+      .select2-arrow {
+        top: 2px;
+        width: 20px;
+        height: 23px;
+        line-height: 23px;
+        background: transparent;
+        border-left: 1px solid #CACACA;
+
+        b {
+          @extend .icon-menu;
+          width: 18px;
+          line-height: 23px;
+          background-image: none;
+        }
+      }
+    }
+
+    &.select2-dropdown-open {
+      .select2-choice .select2-arrow b {
+        background-position: -17px 0px;
+      }
+    }
+
+    &.tiny {
+
+      .select2-choice {
+        height: 18px;
+        line-height: 18px;
+
+        .select2-arrow {
+          width: 14px;
+          height: 14px;
+
+          b {
+            line-height: 4px;
+            width: 12px;
+            font-size: 10px;
+          }
+        }
+      }
+
+      &.select2-dropdown-open {
+        .select2-choice .select2-arrow b {
+          background-position: -20px -5px;
+        }
+      }
+    }
+
+    &.medium {
+      width: 90px;
+    }
+
+    &.select2-container-active {
+
+      .select2-choice, .select2-choices {
+        @extend %blue-focus-style;
+      }
+    }
+  }
+
+  &.select2-container-multi {
+    margin-top: 0 !important;
+
+    &.select2-container-active {
+
+      .select2-choices {
+        @extend %blue-focus-style;
+      }
+    }
+
+    .select2-choices {
+      @extend %default-input-style;
+      padding: 0 2px;
+      width: 100%;
+
+      .select2-search-choice {
+        margin: 4px;
+        padding: 4px 24px 4px 8px;
+        background-image: none;
+        border: 0 none;
+        @include box-shadow(none);
+      }
+
+      .select2-search-choice-close {
+        left: auto;
+        right: 4px;
+        top: 6px;
+        background: none;
+        @extend .icon-cross;
+
+        &:hover {
+          color: $text-color;
+        }
+      }
+
+      .select2-search-field {
+        height: 29px;
+
+        input {
+          color: $text-color;
+          padding: $default-padding 6px;
+        }
+      }
+    }
+  }
+}
+
+.tag_list {
+  .select2-container.select2-container-multi {
+    .select2-search-choice {
+      @include tag-base($margin: 4px, $padding: 4px 24px);
+    }
+  }
+}
+
+.select2-drop {
+
+  .select2-search {
+    margin: $default-margin 0;
+  }
+
+  &.select2-with-searchbox .select2-results > .select2-result:first-child {
+    @include border-top-radius(0);
+  }
+
+  .select2-results {
+    padding: 0;
+    margin: 0;
+
+    > .select2-result:first-child {
+      @include border-top-radius($default-border-radius);
+    }
+
+    &:last-child {
+      @include border-bottom-radius($default-border-radius);
+    }
+
+    .select2-result {
+      margin: 0;
+      padding: 4px 0;
+
+      &.select2-highlighted {
+        background: $button-hover-bg-color;
+        color: $text-color;
+      }
+
+      &.select2-result-with-children {
+        padding: 0;
+      }
+    }
+
+    .select2-no-results, .select2-searching {
+      padding: 8px;
+      margin: 0;
+    }
+
+    .select2-result-label {
+      padding: 4px 8px;
+    }
+
+    ul.select2-result-sub > li .select2-result-label {
+      padding-left: 16px;
+    }
+  }
+
+  &.select2-drop-active {
+    @include border-radius($default-border-radius);
+    border: 1px solid $blue;
+  }
+}
+
+.window_form, #filter_bar {
+
+  .select2-container {
+    width: 100%;
+  }
+}

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

@@ -105,22 +105,19 @@ div.sitemap_left_images {
   background-color: $light-gray;
 }
 
-div.sitemap_right_tools {
+.sitemap_right_tools {
   height: 22px;
   background-color: $light-gray;
   padding-left: 8px;
   float: right;
   width: 120px;
 
-  a {
+  .sitemap_tool {
     float: left;
     width: 24px;
-    height: 21px;
+    height: 24px;
+    line-height: 24px;
     text-align: center;
-
-    .icon {
-      vertical-align: middle;
-    }
   }
 
   .icon.blank {
@@ -235,7 +232,7 @@ span.page_status {
   float: left;
 
   &.restricted {
-    background-position: -258px -39px;
+    background-position: -256px -39px;
   }
 
   &.not_restricted {
@@ -266,49 +263,25 @@ span.page_status {
   margin: 2px 2px 0 4px;
 }
 
-.alchemy_overlay .page_status {
+.alchemy-dialog .page_status {
   margin: 4px 4px 0 0;
 }
 
-.site_status {
-  float: left;
-  width: 16px;
-  height: 16px;
-  background: image-url('alchemy/icons.png') no-repeat 0 -40px;
-  position: relative;
+#sitemap {
 
-  a {
-    display: block;
-    height: 100%;
-    cursor: help;
-  }
-}
+  &.sorting {
 
-.locked .site_status {
-  background-position: -32px -40px;
-}
-
-#sitemap.sorting {
-  .site_status { cursor: move }
-}
-
-#sub_navigation span.page_status_and_name span.site_status {
-  float: none;
-  @include inline-block;
-  margin-right: 4px;
-  margin-left: 0;
-  margin-bottom: 0;
-}
+    .page.icon { cursor: move }
+  }
 
-#sitemap img.link_arrow {
-  float: right;
-  text-align: right;
-}
+  .page.icon {
+    float: left;
+    position: relative;
+  }
 
-ul#sitemap li img {
-  border-width: 0;
-  border-style: none;
-  float: left;
+  .locked .page.icon {
+    background-position: -32px -40px;
+  }
 }
 
 .sitemap_sitestatus {
@@ -322,12 +295,13 @@ a.folder_link {
 }
 
 #create_language_tree_form {
-  width: 360px;
-
-  &.ui-dialog-content div.info {
-    margin: 2*$default-padding;
-    margin-bottom: 0;
-  }
+  width: 80%;
+  max-width: 500px;
+  margin: 2em auto;
+  padding: 4*$default-padding;
+  border: $default-border;
+  background: $medium-gray;
+  @extend %rounded-border;
 }
 
 h2#sitemap_heading {
@@ -347,20 +321,16 @@ h2#sitemap_heading {
   }
 }
 
-select#language_tree_select {
-  margin: 0;
-}
-
 #page_filter_result {
   display: none;
   padding-left: 4*$default-padding;
 }
 
-.ui-dialog-content ul#sitemap {
+.alchemy-dialog ul#sitemap {
   margin: 0;
   padding: 0 8px 8px 0;
 
-  .site_status { cursor: default }
+  .page.icon { cursor: default }
 
   li li.selectboxit-option {
     padding-left: 8px;
@@ -379,16 +349,17 @@ select#language_tree_select {
     width: 16px;
     height: 16px;
     cursor: pointer;
-    @extend .alchemy-icon-cross;
+    @extend .icon-cross;
   }
 }
 
 .show_elements_to_link {
-  background: image-url('alchemy/icons.png') no-repeat -510px -69px;
+  @extend .icon;
+  @extend .element_window;
 }
 
 .elements_from_page_selector {
-  width: 154px;
+  width: 100%;
 }
 
 .elements_for_page {
@@ -402,7 +373,7 @@ select#language_tree_select {
   padding: $default-padding;
   border: $default-border;
   @include box-shadow(#9ea09f 0px 0px 4px);
-  @extend .rounded-border;
+  @extend %rounded-border;
 
   .spinner {
     top: 17px !important;