alchemy_cms 3.4.2 → 3.5.0.rc1

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

@@ -1,85 +1,3 @@
-#top_menu {
-  @include box-sizing(border-box);
-  position: fixed;
-  top: 0;
-  margin-left: 65px;
-  padding-right: 65px;
-  z-index: 30;
-  width: 100%;
-  @extend .disable-user-select;
-}
-
-#left_menu {
-  white-space: nowrap;
-  z-index: 20;
-  height: 100%;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 65px;
-  overflow: hidden;
-  border-right: $default-border;
-  background: $light-blue;
-  font-size: 10px;
-  @extend .disable-user-select;
-
-  label {
-    display: block;
-  }
-
-  a {
-    text-shadow: #fff 0 0px 4px;
-  }
-}
-
-#main_navi {
-  padding-top: 20px;
-  padding-left: 4px;
-  padding-bottom: 80px;
-
-  .main_navi_entry {
-    color: #444;
-    position: relative;
-    text-align: center;
-    overflow: hidden;
-    display: block;
-    padding-top: 7px;
-    @extend .left-rounded-border;
-    border: 1px none #afafaf;
-    border-right-style: none;
-    padding-bottom: 6px;
-    padding-left: 1px;
-    width: 60px;
-
-    &:hover {
-      cursor: pointer;
-      text-decoration: none;
-      color: $text-color;
-    }
-
-    &.active {
-      background: #baced9;
-      color: $text-color;
-      cursor: default;
-      text-shadow: #fff 0 1px 2px;
-      border: $default-border;
-      padding-left: 0;
-      border-right-style: none;
-      padding-top: 6px;
-      padding-bottom: 5px;
-    }
-
-    img {
-      border-style: none;
-      height: 24px;
-      width: 24px;
-      @include inline-block;
-      margin-bottom: 4px;
-      margin-top: 2px;
-    }
-  }
-}
-
 div#overlay {
   display: none;
   position: fixed;
@@ -116,22 +34,36 @@ div#overlay_text_box {
 }
 
 #logout {
+  box-sizing: border-box;
   position: absolute;
   z-index: 1;
   bottom: 0;
   left: 0;
-  text-align: center;
-  width: 65px;
-  background: $light-blue;
+  width: $main-menu-width;
+  background-color: $main-menu-bg-color;
+  border-right: $default-border;
+  transition: background-color $transition-duration $transition-easing;
+
+  &:hover {
+    background-color: $main-menu-active-bg-color;
+  }
+
+  .collapsed-menu & {
+    width: $collapsed-main-menu-width;
+  }
 
   a {
     display: block;
-    padding-top: 4px;
-    padding-bottom: 8px;
+    padding-left: 3 * $default-padding;
+    line-height: 45px;
 
     &:hover {
       text-decoration: none;
     }
+
+    label {
+      padding-left: 2 * $default-padding;
+    }
   }
 
   img {
@@ -139,58 +71,16 @@ div#overlay_text_box {
   }
 }
 
-#main_content {
-  @include box-sizing(border-box);
-  background-color: $light-gray;
-  padding: 75px 8px 8px 74px;
-  z-index: 0;
-  width: 100%;
-  height: 100%;
-}
-
-#archive_all {
-  @include box-sizing(border-box);
-  height: 100%;
-  padding-bottom: 60px;
-
-  &.with_tag_filter {
-    padding-right: 230px;
-  }
-
-  &.resources-table-wrapper {
-    padding-top: 47px;
-  }
-}
-
-div#user_info {
-  position: absolute;
-  top: 0;
-  right: 65px;
-  line-height: 28px;
-  font-size: 11px;
-  padding: 0 8px;
-  background-color: $light-blue;
-
-  .select2-container {
-    margin-top: -2px;
-    margin-right: $default-margin;
-  }
-
-  .current-user-name {
-    padding-right: $default-padding;
-  }
-}
-
-#sub_navigation {
-  height: 24px;
-  line-height: 23px;
+#header {
+  height: $header-height;
+  line-height: $header-height;
   background: $light-blue;
   border-bottom: $default-border;
-  padding-top: 4px;
   position: relative;
 
   a {
-    @include inline-block;
+    display: inline-block;
+    vertical-align: middle;
 
     &:hover {
       text-decoration: none;
@@ -200,91 +90,109 @@ div#user_info {
   .page_status_and_name {
     padding: 0 8px;
     background-color: $medium-gray;
-    text-shadow: 0px 1px 1px #FFFFFF;
+    text-shadow: $text-shadow-light;
     @extend .disable-user-select;
+    @extend .locked_page;
     cursor: default;
-    float: left;
-    @extend .top-rounded-border;
-    border: $default-border;
-    border-bottom-style: none;
-    height: 24px;
-    margin-right: 1px;
+    border-bottom-color: $toolbar-bg-color;
   }
 
   .page_name {
     margin-right: $default-margin;
+    line-height: $header-height;
   }
+}
 
-  .page_language {
-    float: none;
-    @include inline-block;
-    color: #3265b1;
-    margin-right: 2px;
-    font-size: 10px;
-    text-transform: uppercase;
-  }
+#main_content {
+  box-sizing: border-box;
+  background-color: $light-gray;
+  padding: 84px 8px 8px $main-menu-width + 10px;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+}
 
-  .page_site {
-    float: none;
-    @include inline-block;
-    color: #847474;
-    margin-right: $default-margin;
-    font-size: 10px;
-  }
+#archive_all {
+  box-sizing: border-box;
+  height: 100%;
+  padding-bottom: 60px;
 
-  .subnavi_tab {
-    float: left;
-    line-height: 21px;
-    height: 23px;
-    text-shadow: #fff 0 0px 4px;
-    background: #d6e0e6;
-    color: #444;
-    @extend .top-rounded-border;
-    border: $default-border;
-    border-bottom-style: none;
-    margin-right: 1px;
-
-    &.wide {
-      position: relative;
-      padding-right: 24px;
-
-      form {
-        position: absolute;
-        right: $default-padding;
-        top: $default-padding;
-        line-height: 1;
-      }
+  &.with_tag_filter {
+
+    table {
+      padding-right: 230px;
     }
 
-    &:hover {
-      color: $text-color;
-      text-decoration: none;
+    > .info {
+      margin-right: 230px;
     }
+  }
+
+  &.resources-table-wrapper {
+    padding-top: 47px;
 
-    &.active {
-      position: relative;
-      height: 24px;
-      color: $text-color;
-      background-color: $medium-gray;
-      text-shadow: #fff 0 1px 2px;
-      @extend .disable-user-select;
-      cursor: default;
-      z-index: 10;
+    > table {
+      padding-bottom: 60px;
     }
+  }
+}
 
-    > a {
-      padding: 0px 8px;
+#user_info {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: $header-height;
+  font-size: 11px;
+  padding-left: 2*$default-padding;
+  background-color: $light-blue;
+  border-bottom: $default-border;
+
+  .select2-container {
+    margin-top: -3px;
+    padding-right: 2*$default-padding;
+  }
+
+  .select2-choice {
+    padding-right: 0;
+    background: transparent;
+    box-shadow: none;
+    border: none;
+    border-radius: 0;
+    border-left: $default-border;
+    height: $header-height + 1;
+    line-height: $header-height;
+    text-shadow: $text-shadow-light;
+
+    .select2-arrow {
+      width: 14px;
+      border-left: none;
+
+      b {
+        color: $muted-text-color;
+
+        &:before {
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+      }
     }
+  }
 
-    .inline.icon {
-      vertical-align: text-bottom;
+  .select2-dropdown-open {
+    background-color: $main-menu-bg-color;
+
+    .select2-choice .select2-arrow b {
+      background-position: -20px -5px;
     }
   }
+
+  .current-user-name {
+    padding-right: 2*$default-padding;
+  }
 }
 
 #locked_pages {
-  height: 25px;
-  overflow: hidden;
 
   label {
     float: left;
@@ -303,11 +211,3 @@ div#user_info {
     padding-right: 0;
   }
 }
-
-.full-iframe {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}

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

@@ -0,0 +1,62 @@
+.hint-with-icon {
+  @extend .with-hint;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  margin: 0 $default-margin;
+
+  .toolbar_buttons & {
+    margin: 0 2*$default-margin;
+  }
+
+  > .icon {
+    text-indent: 0;
+  }
+}
+
+.with-hint {
+  position: relative;
+
+  &:hover {
+    cursor: help;
+
+    > .hint-bubble {
+      @include hint-hover-style;
+    }
+  }
+
+  > .hint-bubble {
+    visibility: hidden;
+    background: $light_yellow;
+    @extend %rounded-border;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, .3);
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    top: 20px;
+    z-index: 100;
+    padding: 8px;
+    line-height: 1.5em;
+    min-width: 180px;
+    max-width: 300px;
+    white-space: normal;
+    text-align: left;
+    font-size: 12px;
+    opacity: 0;
+    transition: .3s;
+    pointer-events: none;
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: -8px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 0px;
+      height: 0px;
+      border-style: solid;
+      border-width: 0 8px 8px 8px;
+      border-color: transparent transparent $light_yellow transparent;
+    }
+  }
+}

data/app/assets/stylesheets/alchemy/icon-font.scss

@@ -46,7 +46,8 @@
   color: #666;
   text-align: center;
   line-height: 1;
-  @include inline-block;
+  display: inline-block;
+  vertical-align: middle;
 }
 
 .icon-angle-double-right:before { content: "\f101" }

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

@@ -1,5 +1,6 @@
 .icon {
-  @include inline-block;
+  display: inline-block;
+  vertical-align: middle;
   background: image-url('alchemy/icons.png') no-repeat;
   width: 16px;
   height: 16px;
@@ -153,6 +154,10 @@
     background-position: -32px -40px;
   }
 
+  &.file_change {
+    background-position: -512px -40px;
+  }
+
   &.flash {
     background-position: -256px -136px;
   }
@@ -161,8 +166,8 @@
     background-position: -352px -39px;
   }
 
-  &.hint {
-    background-position: -446px -105px;
+  &.questionmark, &.hint {
+    background-position: -447px -105px;
   }
 
   &.image {
@@ -319,7 +324,7 @@
   &.warning, &.warn, &.alert {
     background-position: 0 -168px;
 
-    &.inline { vertical-align: baseline; }
+    &.inline { vertical-align: text-bottom; }
   }
 
   &.word {