alchemy_cms 2.5.3.1 → 2.6.0.rc5

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

@@ -23,7 +23,7 @@ div.login_signup_box {
   padding: 4*$default-padding;
   border: $default-border;
   background-color: $medium-gray;
-  @include rounded-corner;
+  @extend .rounded-border;
   margin: 2em auto;
 
   input[type="text"], input.thin_border { width: 250px }

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

@@ -96,7 +96,7 @@
 
       a, button {
         line-height: 14px;
-        @include default-button-style;
+        @extend %button-defaults;
         font-weight: normal;
         text-decoration: none !important;
         color: $text-color !important;

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

@@ -1,9 +1,9 @@
-@mixin message {
+.message {
   padding: 8px 8px 8px 32px;
   line-height: 17px;
   border-width: 1px;
   border-style: solid;
-  @include rounded-corner;
+  @extend .rounded-border;
   position: relative;
   margin-bottom: 8px;
   text-align: left;
@@ -33,20 +33,20 @@
 }
 
 div.info {
-  @include message;
+  @extend .message;
   color: $text-color;
   background-color: #eaf4f9;
   border-color: #0b5c84;
 }
 
 div.error {
-  @include message;
+  @extend .message;
   background-color: #f1c9ca;
   color: #931f23;
 }
 
 div.warning, div.warn {
-  @include message;
+  @extend .message;
   background-color: #f7efb8;
   color: #756f47;
 }

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

@@ -1,11 +1,18 @@
-div.pagination {
+.pagination {
+  @include box-sizing(border-box);
   background: $light_gray;
+  color: $text-color;
+  position: fixed;
+  bottom: 0;
+  right: 0;
   width: 100%;
-  left: 82px;
-  line-height: 24px;
-  height: 24px;
-  padding: 2 * $default-padding 0;
-  text-align: right;
+  left: 0px;
+  height: 50px;
+  padding: 2*$default-padding $default-padding;
+  padding-left: 76px;
+  text-align: left;
+  border-top: $default-border;
+  z-index: 10;
 
   a, span, em {
     font-size: $default-font-size;
@@ -17,16 +24,20 @@ div.pagination {
   a:hover {
     color: #000;
     text-shadow: none;
-    text-decoration: underline;
+    text-decoration: none;
   }
 
+  span a { padding: 0 }
+
+  .button { padding: 0px 8px }
+
   .current {
-    background: $button-hover-bg-color;
     color: $text-color;
     border: $default-border;
     text-shadow: 0px 1px 1px #fff;
     cursor: default;
-    @include rounded-corner;
+    @extend .rounded-border;
+    padding: 5px 8px;
   }
 
   .previous_page {
@@ -37,17 +48,18 @@ div.pagination {
     margin-left: 2*$default-padding;
   }
 
-  .disabled {
+  .disabled, span {
     color: #c0c0c0;
   }
 
-  span.gap {
+  .gap {
     border: none;
     background: transparent;
     cursor: default;
   }
 }
 
-#assign_image_list div.pagination {
-  margin-bottom: 8px;
+#assign_image_list .pagination, #assign_file_list .pagination {
+  position: absolute;
+  padding-left: 8px;
 }

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

@@ -1,27 +1,22 @@
-#toolbar div.search_field {
+.search_field {
   position: relative;
-  float: left;
   margin-bottom: $default-margin;
 }
 
-div#image_assign_filter_and_image_sizing form div.search_field {
-  margin-right: 4px;
-  float: left;
-  position: relative;
-}
-
-#alchemy a.search_field_clear {
+.search_field_clear, .js_filter_field_clear {
+  display: none;
   width: 16px;
   height: 16px;
-  background: url('ui-icons_666666_256x240.png') no-repeat -80px -128px;
+  @extend .icon-cancel;
   position: absolute;
   right: 8px;
   top: 7px;
-  @include rounded-corner;
+  text-decoration: none;
 }
 
 td#tags_tag_list {
   text-align: left;
+  padding-top: 5px;
 
   ul.tags {
     max-height: 10em;
@@ -33,27 +28,44 @@ td#tags_tag_list {
     list-style-type: none;
 
     li {
-      background-color: white;
+      background-color: $medium-gray;
       padding: 4px;
-      margin: 0;
+      margin: 0 0 4px 0;
+      position: relative;
+      @extend .rounded-border;
+
+      &.odd { background-color: #eaf3f9 }
 
-      &.odd {
-        background-color: #eaf3f9;
+      input {
+        position: absolute;
+        top: 3px;
+        left: 4px;
+      }
+
+      label {
+        display: inline-block;
+        margin-left: 2em;
+        line-height: 1.6em;
       }
     }
   }
 
   .js_filter_field_box {
-    float: none;
+    position: relative;
+    top: 0;
+    right: 0;
     margin: 0;
 
     .js_filter_field {
       width: 100%;
-      @include border-radius(3px);
     }
 
     label {
       display: none
     }
   }
+
+  .js_filter_field_clear {
+    right: 4px;
+  }
 }

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

@@ -24,6 +24,7 @@ div#sort_panel {
   display: block;
   padding-left: 4px;
   text-decoration: none;
+  @include transition(background-color, 400ms);
 
   &.inactive {
     color: #656565;
@@ -32,19 +33,19 @@ div#sort_panel {
   &.odd {
     background-color: #fff;
   }
-}
-
-a.sitemap_pagename_link:hover {
-  text-decoration: underline;
 
-  &:after {
-    content: '';
-    width: 16px;
-    height: 16px;
-    float: left;
-    margin-right: 4px;
-    background: url('icons.png') -160px -168px;
-    margin-top: 4px;
+  :hover {
+    text-decoration: underline;
+
+    &:after {
+      content: '';
+      width: 16px;
+      height: 16px;
+      float: left;
+      margin-right: 4px;
+      background: url('icons.png') -160px -168px;
+      margin-top: 4px;
+    }
   }
 }
 
@@ -63,11 +64,11 @@ a.sitemap_pagename_link:hover {
   overflow: hidden;
 }
 
-div#page_selector_container a.sitemap_pagename_link:hover {
+#page_selector_container .sitemap_pagename_link:hover {
   text-decoration: none;
 }
 
-div#page_selector_container a.sitemap_pagename_link:hover:after {
+#page_selector_container .sitemap_pagename_link:hover:after {
   display: none;
 }
 
@@ -77,19 +78,27 @@ div#page_selector_container a.sitemap_pagename_link:hover:after {
   height: 28px;
 }
 
-ul#layoutpages li {
+#layoutpages li {
   padding: 0;
 }
 
-div.sitemap_page {
+.sitemap_page {
   height: 22px;
   padding-bottom: 4px;
   padding-top: 4px;
   position: relative;
-}
 
-div.sitemap_page:hover a.sitemap_pagename_link {
-  background-color: #fdffdf;
+  &.highlight .sitemap_pagename_link {
+    background-color: #FFFBA5;
+  }
+
+  &.no-match .sitemap_pagename_link {
+    color: $medium-gray;
+  }
+
+  &:hover .sitemap_pagename_link {
+    background-color: #fdffdf;
+  }
 }
 
 div.sitemap_left_images {
@@ -152,23 +161,14 @@ ul#sitemap {
     }
   }
 
-  a.page_folder {
-    background-image: url('gui/toggle.png');
-    background-repeat: no-repeat;
-    height: 9px;
-    width: 9px;
-    font-size: 0;
+  .page_folder {
+    @extend .icon;
     float: left;
-    margin-left: -18px;
-    margin-top: 3px;
-
-    &.collapsed {
-      background-position: 0 0;
-    }
+    margin-left: -21px;
+    margin-top: 1px;
 
-    &.folded {
-      background-position: -9px 0;
-    }
+    &.collapsed { @extend .icon.expand.small }
+    &.folded { @extend .icon.collapse.small }
   }
 
   ul {
@@ -211,7 +211,7 @@ ul.list .sitemap_sitename {
 }
 
 div.page_infos {
-  @include top-rounded-border;
+  @extend .top-rounded-border;
   background-color: #FFFFFF;
   border-left: 1px solid #EDEDED;
   float: right;
@@ -278,7 +278,7 @@ span.page_status {
 }
 
 .tooltip {
-  @include tooltip;
+  @extend %tooltip;
   right: auto;
   left: -12px;
   top: 24px;
@@ -363,3 +363,8 @@ h2#sitemap_heading {
 select#language_tree_select {
   margin: 0;
 }
+
+#page_filter_result {
+  display: none;
+  padding-left: 4*$default-padding;
+}

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

@@ -4,30 +4,82 @@ table {
   padding: 0;
   font-size: inherit;
   width: 100%;
+}
 
-  td, th {
-    padding: $default-padding;
-    vertical-align: top;
-    line-height: 18px;
+.list td, .list th {
+  padding: $default-padding 2*$default-padding;
+  vertical-align: top;
+  line-height: 18px;
+  border-right: 1px solid $medium-gray;
 
-    &.wrap-text {
-      white-space: normal !important;
-    }
+  &.wrap-text {
+    white-space: normal !important;
   }
+}
 
-  th {
-    white-space: nowrap;
-    text-align: left;
-    height: 22px;
-    vertical-align: top;
+.list td:first-child, .list th:first-child {
+  border-left: 1px solid $medium-gray
+}
+
+th {
+  white-space: nowrap;
+  text-align: left;
+  vertical-align: top;
+  @include background(linear-gradient(top, lighten($light-gray, 10) 0%, $light-gray 30%, $light-gray 90%, darken($light-gray, 10) 100%));
+  border-top: 1px solid $medium-gray;
+  color: #666;
+  font-weight: normal;
+
+  i {
+    font-style: normal;
+    position: absolute;
+    right: 2px;
+    top: 4px;
+    color: #999;
+    @include text-shadow(1px 1px 0px #fff);
+  }
+
+  a {
+    @include text-shadow(1px 1px 0px #fff);
+
+    &.sortable {
+      display: block;
+      margin: -4px -8px;
+      padding: 4px 18px 4px 8px;
+    }
+
+    &.sorted {
+      position: relative;
+      @include background(linear-gradient(top, lighten($light-gray, 10) 0%, $very-light-blue 50%, $light-gray 90%, darken($light-gray, 10) 100%));
+    }
   }
 }
 
-table tr td.tools {
+tr.odd td {
+  background-color: #eaf3f9;
+}
+
+tr.even td {
+  background-color: white;
+}
+
+.list tr .tools {
   width: 40px;
-  background-color: $light-gray;
+  background: $light-gray;
+  border-top: 0 none;
+  border-right: 0 none;
   white-space: nowrap;
-  @include disable-user-select;
+  @extend .disable-user-select;
+
+  a {
+    width: 19px;
+    height: 19px;
+    margin-right: 2px;
+  }
+
+  &.long {
+    width: 60px;
+  }
 }
 
 td.label, td.input, td.submit, td.select, td.value, td.note {
@@ -113,29 +165,35 @@ td.heading {
   text-decoration: underline;
 }
 
-table tr td.tools a {
-  width: 19px;
-  height: 19px;
-  margin-right: 2px;
+.list td.icon, .list th.icon {
+  background-color: $light-gray;
+  background-image: none;
+  border: 0 none;
+  padding: 0;
+  border-right: 1px solid $medium-gray;
+  text-align: center;
+  display: table-cell; // reset the .icon display: inline-block
 }
 
-table tr td.tools.long {
-  width: 60px;
+.list .tools .icon, .list td.icon .icon {
+  @include inline-block;
+  width: 16px;
+  height: 16px;
+  @extend .disable-user-select;
+  background-repeat: no-repeat;
+  margin: 0 $default-margin;
 }
 
-table tr td.icon {
-  background-color: $light-gray;
-  width: 20px;
-  text-align: center;
+.list td.icon .icon {
+  margin: $default-margin 2*$default-margin 0;
 }
 
-table.list tr:hover td {
+.list tr:hover td {
   background-color: $light_yellow;
 }
 
 td.file_type {
   width: 130px;
-  white-space: nowrap;
 }
 
 td.file_size {
@@ -146,13 +204,15 @@ td.date {
   width: 150px;
 }
 
-table td.right, table th.right {
-  text-align: right;
-  padding-right: 0;
-}
+td, th {
 
-table td.center, table th.center {
-  text-align: center;
+  &.center, &.boolean {
+    text-align: center;
+  }
+
+  &.right {
+    text-align: right;
+  }
 }
 
 td.login {
@@ -173,7 +233,7 @@ th.count, td.count {
   padding-right: 16px;
 }
 
-table td.rights {
+td.rights {
   width: 60px;
 }
 
@@ -181,24 +241,16 @@ table.window_form {
   width: 100%;
 }
 
-th.login_status {
+.list .login_status {
   width: 16px;
 }
 
-table tr.odd td {
-  background-color: #eaf3f9;
-}
-
-table tr.even td {
-  background-color: white;
-}
+td#user_roles {
+  padding: 9px 0;
 
-th.icon, td.icon {
-  background: none;
-  display: table-cell;
-  vertical-align: top;
-}
-
-td.file_name {
-  word-break: break-all;
+  label {
+    @include inline-block;
+    white-space: nowrap;
+    min-width: 40%;
+  }
 }