alchemy_cms 2.9.1 → 3.0.0.rc5

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

@@ -10,9 +10,9 @@ noscript {
   width: 100%;
   text-align: center;
   line-height: 1em;
-  border-bottom: 1px solid #c4c19c;
-  color: #726d23;
-  background-color: #f3f0c1;
+  border-bottom: 1px solid $warning_border_color;
+  color: $warning_text_color;
+  background-color: $warning_background_color;
 
   h1, p {
     margin: 16px 0;
@@ -97,15 +97,56 @@ hr {
   @include opacity(0.5);
 }
 
-.float_right {
-  float: right;
+.float_right { float: right }
+
+.float_left { float: left }
+
+.center {
+  text-align: center;
+
+  .spinner {
+    display: inline-block;
+    vertical-align: middle;
+  }
 }
 
-.float_left {
-  float: left;
+kbd {
+  font-family: Courier, monospaced;
+  background: $medium-gray;
+  border: $default-border;
+  padding: 0.25em 0.5em;
+  vertical-align: top;
+  margin-right: 1ex;
+  @extend %rounded-border;
+}
+
+.top-rounded-border {
+  @include border-top-radius($default-border-radius);
 }
 
-.center { text-align: center }
+.left-rounded-border {
+  @include border-left-radius($default-border-radius);
+}
+
+.right-rounded-border {
+  @include border-right-radius($default-border-radius);
+}
+
+.bottom-rounded-border {
+  @include border-bottom-radius($default-border-radius);
+}
+
+.bottom-left-rounded-border {
+  @include border-bottom-left-radius($default-border-radius);
+}
+
+.disable-user-select {
+  @include user-select(none);
+}
+
+.border-box-sizing {
+  @include box-sizing(border-box);
+}
 
 span.updated_at {
   float: right;
@@ -167,10 +208,6 @@ div#page {
   margin-right: 8px;
 }
 
-#page_names textarea {
-  height: 67px;
-}
-
 div#new_page_from_clipboard {
   display: none;
 }
@@ -184,11 +221,6 @@ div#new_page_from_clipboard span {
   line-height: 25px;
 }
 
-#page_editing_head .site_status {
-  margin: 0 4px 0 0;
-  float: left;
-}
-
 div#page_status_options {
   float: left;
 }
@@ -362,13 +394,15 @@ div#images {
   overflow: visible;
 }
 
-p.foot_note {
+.foot_note, form .input .hint {
   font-size: 10px;
   line-height: 1.5em;
   padding: $default-padding;
   background-color: $light_yellow;
   border: 1px solid $medium-gray;
-  @extend .rounded-border;
+  @extend %rounded-border;
+  display: block;
+  clear: both;
 }
 
 #all_files td.name a {
@@ -384,57 +418,6 @@ p.foot_note {
   margin-left: 22px;
 }
 
-#alchemy .ui-dialog div#jscropper {
-  padding: 2 * $default-padding;
-
-  .thumbnail_background {
-    @extend %thumbnail-background;
-    width: 800px;
-    height: 600px;
-    position: relative;
-  }
-
-  .info.message {
-    float: right;
-    width: 134px;
-    margin-left: 8px;
-    padding: 0 8px 0 32px;
-  }
-
-  .jcrop-holder { @include inline-block }
-
-  img {
-    width: auto;
-    max-height: 600px;
-  }
-
-  form {
-    padding: 0;
-    position: absolute;
-    bottom: 2 * $default-padding;
-    right: 2 * $default-padding;
-    width: 176px;
-    margin-left: 8px;
-
-    .reset_mask, button {
-      display: block;
-      margin-bottom: 0;
-      text-align: center;
-    }
-    .reset_mask { padding-top: 4px }
-    button { width: 100% }
-  }
-}
-
-textarea#essence_picture_caption {
-  width: 233px;
-  height: 61px;
-}
-
-#alchemy .ui-dialog-content form.with_padding table td {
-  vertical-align: top;
-}
-
 #page_selector_scroll_container {
   position: relative;
   width: 100%;
@@ -447,7 +430,7 @@ textarea#essence_picture_caption {
   border: 1px inset #e8e8e8;
   overflow: auto;
   padding: 4px 0 0 4px;
-  @extend .rounded-border;
+  @extend %rounded-border;
 }
 
 #alchemyConfirmation .alchemy_window_buttons {
@@ -480,7 +463,7 @@ input.with_border {
   line-height: 19px;
 }
 
-#alchemy .ui-dialog-content a img {
+a img {
   border-style: none;
 }
 
@@ -510,15 +493,6 @@ input#link_to_text {
   float: none;
 }
 
-#alchemy .ui-dialog-content ul#sitemap ul li span.sitemap_sitename.selected_page a {
-  font-weight: bold;
-  padding-left: 4px;
-}
-
-#alchemy .ui-dialog-content ul#sitemap ul li span.sitemap_sitename a:hover {
-  font-weight: bold;
-}
-
 #external_link_table .padding_right {
   padding-right: 8px;
 }
@@ -535,31 +509,6 @@ select#url_protocol.medium {
   margin: 0;
 }
 
-#alchemy .ui-dialog-content td.medium {
-  width: 76px;
-}
-
-#alchemy .ui-dialog .ui-dialog-content .buttons {
-  text-align: right;
-  margin: 0;
-  padding: 0;
-
-  label {
-    float: left;
-    line-height: 36px;
-  }
-}
-
-#alchemy .ui-dialog-content p a.button.small {
-  float: none;
-  @include inline-block;
-  vertical-align: inherit;
-}
-
-#alchemy .ui-dialog #alchemyConfirmation.ui-dialog-content {
-  padding: 2*$default-padding;
-}
-
 #clipboard_items {
 
   ul {
@@ -574,10 +523,19 @@ select#url_protocol.medium {
       padding: 2*$default-padding;
       border: $default-border;
       background-color: white;
-      @extend .rounded-border;
+      @extend %rounded-border;
+
       &.elements {
-        background-color: #E5DCCA;
-        border: 1px solid #BBA589;
+        background-color: $medium-gray;
+      }
+
+      .icon {
+        vertical-align: text-bottom;
+        margin-right: $default-padding;
+      }
+
+      .float_right .icon {
+        margin-right: 0;
       }
     }
   }
@@ -594,27 +552,20 @@ select#url_protocol.medium {
   border-spacing: 0 !important;
 }
 
-#dropbox {
-  background: $medium-gray;
-  border: $default-border;
-  @extend .rounded-border;
-  padding: $default-padding;
-  margin-bottom: 2*$default-padding;
-  text-align: center;
-  line-height: 6em;
-  &.dragover {
-    background: $dark-gray;
-    color: $light-gray;
-    border-color: $light-gray;
-  }
-}
-
 div.browse {
   margin-bottom: 1em;
 }
 
-#alchemyPreviewWindow {
-  width: 100% !important;
+#alchemy_preview_window {
+  @include box-sizing(border-box);
+  position: absolute;
+  left: 66px;
+  top: 80px;
+  width: auto;
+  height: auto;
+  border: 0 none;
+  background: #fff;
+  @include transition(200ms ease-in-out);
 }
 
 #error_trace {
@@ -622,5 +573,20 @@ div.browse {
   width: 80%;
   padding: $default-padding;
   overflow: auto;
-  @extend .rounded-border;
+  @extend %rounded-border;
+}
+
+@-moz-keyframes spin {
+  from { -moz-transform: rotate(0deg); }
+  to   { -moz-transform: rotate(360deg); }
+}
+
+@-webkit-keyframes spin {
+  from { -webkit-transform: rotate(0deg); }
+  to   { -webkit-transform: rotate(360deg); }
+}
+
+@keyframes spin {
+  from {transform:rotate(0deg);}
+  to   {transform:rotate(360deg);}
 }

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

@@ -0,0 +1,227 @@
+button, input[type="submit"], a.button, input.button {
+  @extend %button-defaults;
+
+  &.small {
+    padding: 2px 2*$default-padding;
+    @include border-radius(10px);
+    vertical-align: inherit;
+    line-height: 4*$default-padding;
+    font-size: inherit;
+
+    &.with_icon {
+      padding: 2px 2*$default-padding 2px $default-padding;
+    }
+  }
+
+  &.with_icon {
+    padding: 6px 18px 6px 6px;
+
+    span.icon {
+      margin-top: -5px;
+      padding-right: 0.25em;
+      height: 15px;
+    }
+  }
+
+  &.icon_only {
+    margin: 0;
+    padding: 0;
+    border: 0 none;
+    @include box-shadow(none);
+    @include background(none);
+    @include border-radius(0);
+
+    .icon {
+      margin: 0;
+    }
+  }
+
+  &:focus {
+    @extend %blue-focus-style;
+  }
+
+  &.disabled {
+    line-height: 13px;
+    height: 29px;
+    padding-top: 5px;
+    padding-bottom: 4px;
+  }
+}
+
+.icon_button {
+  @extend %button-defaults;
+  width: 21px;
+  height: 21px;
+  line-height: 19px;
+  margin: 0;
+  padding: 3px;
+  overflow: hidden;
+  text-align: center;
+
+  .spinner {
+    left: 50%;
+    top: 50%;
+  }
+
+  .icon {
+    @include inline-block;
+    vertical-align: middle;
+  }
+
+  .old_icon {
+    position: relative;
+    background-repeat: no-repeat;
+    width: 22px;
+    height: 20px;
+    @include inline-block;
+    top: -1px;
+    left: -1px;
+  }
+
+  img {
+    position: absolute;
+    top: 2px;
+    left: 3px;
+  }
+
+  &.small {
+    width: 15px;
+    height: 15px;
+    padding: 0;
+    float: none;
+    @include inline-block;
+    position: relative;
+    top: 0px;
+    background: none;
+    border: none;
+    @include box-shadow(none);
+
+    .icon {
+      left: auto;
+      position: absolute;
+      left: 1px;
+      top: 2px;
+      width: 8px;
+      height: 8px;
+
+      &:before {
+        line-height: 10px;
+      }
+
+      &.delete-small {
+        background-position: -4px -76px;
+      }
+    }
+
+    &:hover {
+      border: $default-border-width $default-border-style $button-hover-border-color;
+      @include border-radius($default-border-radius);
+      background: $button-hover-bg-color;
+      top: -1px;
+      right: 0px;
+
+      .icon {
+        left: 0px;
+        top: 2px;
+      }
+    }
+  }
+
+  &.old_icon {
+    width: 20px;
+    height: 19px;
+
+    img {
+      top: 0;
+      left: 1px;
+    }
+  }
+
+  &.disabled {
+
+    span {
+      position: relative;
+      @include opacity(0.3);
+      cursor: default;
+    }
+
+    &:hover {
+      background-color: #d3d3d3;
+      border: 1px solid $button-border-color;
+      cursor: default;
+    }
+  }
+
+  &.linked {
+    @include sassy-button('matte', $sb-border-radius, $sb-font-size, #ffd77a, $sb-second-color, $sb-text-color, $sb-text-style, $sb-pseudo-states, $sb-ie-support);
+    padding: 3px;
+    border-color: $default-border-color;
+  }
+
+  &:focus {
+    @extend %blue-focus-style;
+  }
+}
+
+button.icon_button {
+  width: 29px;
+  height: 29px;
+}
+
+#new_element button.button {
+  float: right;
+}
+
+div#toolbar label {
+  @include default-label-style;
+}
+
+.button_with_label {
+  @include inline-block(top);
+  text-align: center;
+  margin-right: 8px;
+  margin-left: 8px;
+  min-width: 70px;
+  line-height: 0;
+
+  label {
+    @include default-label-style;
+  }
+
+  &.active {
+
+    .icon_button {
+      $second-color: darken($sb-base-color, 10%);
+      @include sassy-button-active-shadow($second-color);
+      background-color: $second-color;
+      @include background(linear-gradient(color-stops(darken($sb-base-color, 2%), $second-color 50%, darken($second-color, 8%))))
+    }
+
+    label {
+      color: black;
+      text-shadow: white 0 0 2px;
+    }
+  }
+
+  .select2-container {
+    margin: 0;
+    top: 0;
+  }
+
+  .icon_button {
+    float: none;
+    margin-right: auto;
+    margin-left: auto;
+    @include inline-block;
+    position: relative;
+  }
+
+  &.disabled {
+    @include opacity(0.5);
+    cursor: default;
+  }
+}
+
+div.sitemap_right_tools .sitemap_sitetools a.icon_button {
+  margin-right: 4px;
+}