alchemy_cms 3.4.2 → 3.5.0.rc1

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

@@ -87,12 +87,12 @@ $image-overlay-transition-easing: ease-in;
   position: absolute;
   top: 0;
   background-color: $medium-gray;
-  @include box-shadow(-2px 0 $default-padding -2px $text-color);
+  box-shadow: -2px 0 $default-padding -2px $text-color;
   @include transition(right $image-overlay-transition-duration $image-overlay-transition-easing);
 }
 
 .picture-details-overlay {
-  @include box-sizing(border-box);
+  box-sizing: border-box;
   right: 0;
   width: $image-overlay-form-width;
   height: 100%;
@@ -142,7 +142,7 @@ $image-overlay-transition-easing: ease-in;
 }
 
 .zoomed-picture-background {
-  @include box-sizing(border-box);
+  box-sizing: border-box;
   width: 100%;
   height: 100%;
   padding-top: 2*$default-padding;
@@ -176,7 +176,7 @@ $image-overlay-transition-easing: ease-in;
     height: auto;
     max-width: 100%;
     max-height: 100%;
-    @include box-shadow(0 0 2*$default-margin $text-color);
+    box-shadow: 0 0 2*$default-margin $text-color;
     background-color: $dark-gray;
     vertical-align: middle;
     cursor: default;
@@ -188,7 +188,7 @@ $image-overlay-transition-easing: ease-in;
   padding: 2*$default-padding 0;
 
   .message {
-    @include box-sizing(border-box);
+    box-sizing: border-box;
     margin: 2*$default-padding 0;
   }
 }
@@ -210,7 +210,7 @@ $image-overlay-transition-easing: ease-in;
 
     li {
       padding: 2*$default-padding;
-      @include border-radius($default-border-radius);
+      border-radius: $default-border-radius;
       white-space: normal;
 
       &.even { background: #F7F7F7 }

data/app/assets/stylesheets/alchemy/jquery-ui.scss

@@ -41,7 +41,8 @@
 }
 
 .ui-helper-clearfix {
-  @include inline-block;
+  display: inline-block;
+  vertical-align: middle;
 }
 
 /* required comment for clearfix to work in Opera \*/
@@ -248,7 +249,7 @@
 }
 
 .ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled {
-  @include opacity(.35);
+  opacity: .35;
   background-image: none;
 }
 
@@ -1131,7 +1132,7 @@
 .ui-tabs .ui-tabs-nav {
   padding: 4px 8px 0;
   background: transparent;
-  @include border-radius(0);
+  border-radius: 0;
   border-bottom: $default-border;
   margin: 0;
 }
@@ -1144,7 +1145,8 @@
   margin: 0 .2em 1px 0;
   border-color: $default-border-color;
   border-bottom: 0 !important;
-  @include border-bottom-radius(0);
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
   padding: 0;
   white-space: nowrap;
   background-color: $medium-gray;

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

@@ -18,7 +18,6 @@ ul.list {
   li {
     list-style-type: none;
     display: block;
-    overflow: hidden;
     margin-bottom: 0;
 
     &.legend, &.list-header {

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

@@ -2,8 +2,7 @@
  *= require_self
  */
 
-@import "compass/css3";
-@import "sassy-buttons";
+@import "bourbon";
 @import "alchemy/variables";
 @import "alchemy/mixins";
 @import "alchemy/extends";
@@ -18,7 +17,7 @@
   @include animate-left;
   @include bottom-right-rounded-border;
   @include drop-shadow;
-  @include box-sizing(border-box);
+  box-sizing: border-box;
   border-right: $default-border;
   border-bottom: $default-border;
   height: 44px;
@@ -27,7 +26,7 @@
   font: $default-font-style;
 
   * {
-    @include box-sizing(border-box);
+    box-sizing: border-box;
     margin: 0;
     padding: 0;
   }

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

@@ -1,9 +1,3 @@
-span.icon.module {
-  width: 24px;
-  height: 24px;
-  margin-bottom: 4px;
-}
-
 span.module.dashboard {
   background-position: -240px 0;
 }

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

@@ -0,0 +1,242 @@
+#top_menu {
+  box-sizing: border-box;
+  position: fixed;
+  top: 0;
+  margin-left: $main-menu-width;
+  padding-right: $main-menu-width;
+  z-index: 20;
+  width: 100%;
+  @extend .disable-user-select;
+
+  .collapsed-menu & {
+    margin-left: $collapsed-main-menu-width;
+    padding-right: $collapsed-main-menu-width;
+  }
+}
+
+#left_menu {
+  box-sizing: border-box;
+  z-index: 30;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: $main-menu-width;
+  border-right: $default-border;
+  background-color: $main-menu-bg-color;
+  @extend .disable-user-select;
+
+  .collapsed-menu & {
+    width: $collapsed-main-menu-width;
+
+    .main_navi_entry.has_sub_navigation label {
+      display: none;
+    }
+
+    label {
+      visibility: hidden;
+      opacity: 0;
+      background-color: $main-menu-active-bg-color;
+      transition: opacity $transition-duration $transition-easing;
+    }
+
+    .main_navi_entry:not(.has_sub_navigation),
+    #logout {
+
+      &:hover label {
+        visibility: visible;
+        opacity: 1;
+      }
+
+      label {
+        box-sizing: border-box;
+        position: absolute;
+        top: 0;
+        left: $collapsed-main-menu-width - 1;
+        width: $main-menu-width + 1;
+        padding-left: 4*$default-padding;
+      }
+    }
+  }
+
+  label {
+    vertical-align: middle;
+    padding-left: $default-padding;
+    cursor: pointer;
+    @include truncate($main-menu-entry-max-width);
+  }
+
+  a {
+    text-shadow: $text-shadow-light;
+  }
+
+  img, .module.icon {
+    border-style: none;
+    height: 24px;
+    width: 24px;
+    display: inline-block;
+    vertical-align: middle;
+  }
+}
+
+#main_navi {
+  padding-top: 30px;
+  padding-bottom: 80px;
+}
+
+.main_navi_entry {
+  color: $main-menu-text-color;
+  position: relative;
+  display: block;
+  line-height: 46px;
+  margin-bottom: 3*$default-padding;
+  background-color: transparent;
+  transition: background-color $transition-duration $transition-easing;
+
+  &:hover {
+    background-color: $main-menu-active-bg-color;
+
+    &:not(.active),
+    .collapsed-menu & {
+
+      .sub_navigation {
+        visibility: visible;
+        opacity: 1;
+        background-color: $main-menu-active-bg-color;
+      }
+    }
+  }
+
+  &.active {
+    background-color: $main-menu-active-bg-color;
+    color: $text-color;
+    cursor: default;
+  }
+
+  a {
+    display: block;
+    padding-left: 3 * $default-padding;
+    transition: color $transition-duration $transition-easing;
+
+    &:hover {
+      text-decoration: none;
+      color: #000;
+      text-shadow: none;
+    }
+  }
+}
+
+body:not(.collapsed-menu) {
+
+  .subnavi_tab a {
+    padding-top: 1px;
+  }
+
+  .main_navi_entry.active {
+
+    .sub_navigation {
+      position: static;
+      visibility: visible;
+      opacity: 1;
+      width: auto;
+    }
+
+    .subnavi_tab {
+      line-height: 24px;
+
+      a {
+        padding: 8px 4px 8px 44px;
+      }
+    }
+  }
+}
+
+.sub_navigation {
+  position: absolute;
+  width: $main-menu-width;
+  left: $main-menu-width;
+  top: 0;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity $transition-duration $transition-easing;
+
+  .collapsed-menu & {
+    left: $collapsed-main-menu-width;
+  }
+}
+
+.subnavi_tab {
+
+  &:first-of-type {
+    border-left: 1px solid $main-menu-active-bg-color;
+    margin-left: -1px;
+  }
+
+  a {
+    padding-left: 4*$default-padding;
+    background-color: transparent;
+    transition: background-color $transition-duration $transition-easing;
+    @include truncate($main-menu-width, $display: block);
+
+    &:hover {
+      background-color: rgba(255,255,255,0.2);
+    }
+  }
+
+  &.active a {
+    font-weight: bold;
+    color: $main-menu-text-color;
+  }
+}
+
+.locked_page {
+  position: relative;
+  float: left;
+  line-height: $header-height - 1;
+  color: #444;
+  border-right: $default-border;
+  border-bottom: $default-border;
+  padding-right: 24px;
+
+  form {
+    position: absolute;
+    right: $default-padding;
+    top: 7px;
+    line-height: 1;
+  }
+
+  &:hover {
+    color: $text-color;
+    text-decoration: none;
+  }
+
+  > a {
+    cursor: pointer;
+    padding: 0px 8px;
+  }
+
+  .icon.close {
+    vertical-align: text-bottom;
+    text-shadow: $text-shadow-light;
+  }
+
+  .page_name {
+    margin-right: $default-margin;
+    text-shadow: $text-shadow-light;
+  }
+
+  .page_language {
+    display: inline-block;
+    color: $muted-text-color;
+    margin-right: 2px;
+    font-size: 10px;
+    text-transform: uppercase;
+  }
+
+  .page_site {
+    display: inline-block;
+    color: $muted-text-color;
+    margin-right: $default-margin;
+    font-size: 10px;
+  }
+}

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

@@ -1,5 +1,5 @@
 .pagination {
-  @include box-sizing(border-box);
+  box-sizing: border-box;
   background: $light_gray;
   color: $text-color;
   position: fixed;
@@ -8,8 +8,8 @@
   width: 100%;
   left: 0px;
   height: 50px;
-  padding: 2*$default-padding $default-padding;
-  padding-left: 76px;
+  padding: 2*$default-padding;
+  padding-left: $main-menu-width + 10px;
   text-align: left;
   border-top: $default-border;
   z-index: 10;

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

@@ -1,6 +1,7 @@
 /*
  *= require_self
  */
+
 @import "alchemy/defaults";
 
 div#main_menu,

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

@@ -0,0 +1,45 @@
+.resource_info {
+
+  h2 {
+    @include form-heading;
+  }
+
+  .value {
+    @include clearfix;
+    position: relative;
+
+    > label {
+      @include form-label;
+    }
+
+    > p {
+      @include form-value-display;
+      @include truncate($form-right-width);
+    }
+
+    &.with-icon {
+      > p {
+        white-space: nowrap;
+        padding-right: 40px;
+      }
+    }
+  }
+
+  .icon_button--right {
+    position: absolute;
+    right: 2*$default-padding;
+    top: 2*$default-padding;
+    height: $default-form-field-height;
+    line-height: 25px;
+    background-color: $medium-gray;
+    margin: -$default-margin -2 * $default-margin;
+    padding: 0 2*$default-padding;
+    transition: background-color 0.3s;
+    @extend .right-rounded-border;
+
+    &:hover {
+      cursor: pointer;
+      background-color: darken($medium-gray, 10%);
+    }
+  }
+}