alchemy_cms 4.0.5 → 4.1.0.beta

data/app/assets/stylesheets/alchemy/jquery.datetimepicker.scss

@@ -1,15 +1,3 @@
-$datepicker_current_bg: $light-blue !default;
-$datepicker_current_color: $text-color !default;
-$datepicker_current_box_shadow: $blue 0 1px 3px 0 inset !default;
-$datepicker_hover_bg: $light_yellow !default;
-$datepicker_hover_color: $text-color !default;
-$datepicker_today_bg: $very-light-blue !default;
-$datepicker_today_color: $text-color !default;
-$datepicker_header_color: $text-color !default;
-$datepicker_day_bg: $light-gray !default;
-$datepicker_day_border: 1px solid $medium-gray !default;
-$datepicker_day_color: $text-color !default;
-
 .xdsoft_datetimepicker {
   box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506);
   background: #fff;
@@ -17,7 +5,7 @@ $datepicker_day_color: $text-color !default;
   border-left: 1px solid #ccc;
   border-right: 1px solid #ccc;
   border-top: 1px solid #ccc;
-  border-radius: $default-border-radius;
+  @include border-top-radius($default-border-radius);
   color: $text-color;
   padding: 8px;
   padding-left: 0;
@@ -122,69 +110,56 @@ $datepicker_day_color: $text-color !default;
 }
 
 .xdsoft_datetimepicker .xdsoft_label i {
-  opacity: 0.5;
+  opacity: 1;
   display: inline-block;
   width: 9px;
   height: 20px;
   vertical-align: middle;
+  font-family: 'Font Awesome 5 Free';
+  font-size: $default-font-size;
+  font-style: normal;
+  font-weight: 900;
+  color: $icon-color;
+  text-align: center;
+  padding-left: $default-padding;
 
   &:before {
-    content: "";
-    position: absolute;
-    top: 50%;
-    right: 0;
-    transform: translateY(-50%);
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 4px 4px 0 4px;
-    border-color: $text-color transparent transparent;
+    content: fa-content($fa-var-caret-down);
   }
 }
 
 .xdsoft_datetimepicker .xdsoft_prev,
 .xdsoft_datetimepicker .xdsoft_next {
-  position: relative;
-
-  &:before {
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 0;
-    height: 0;
-    border-style: solid;
-  }
+  font-size: 1.5em;
+  font-weight: 900;
 }
 
 .xdsoft_datetimepicker .xdsoft_prev {
   float: left;
+  text-align: left;
 
   &:before {
-    border-width: 7px 7px 7px 0;
-    border-color: transparent $text-color transparent transparent;
+    content: fa-content($fa-var-caret-left);
   }
 }
 
 .xdsoft_datetimepicker .xdsoft_today_button {
   float: left;
   margin: 0 5px;
+  font-weight: 400;
 
   &:before {
-    font-family: 'Alchemy Icons';
-    font-size: 16px;
-    line-height: 18px;
-    content: "\e00a";
+    content: fa-content($fa-var-calendar-check);
+    font-size: 1.25em;
   }
 }
 
 .xdsoft_datetimepicker .xdsoft_next {
   float: right;
+  text-align: right;
 
   &:before {
-    border-width: 7px 0 7px 7px;
-    border-color: transparent transparent transparent $text-color;
+    content: fa-content($fa-var-caret-right);
   }
 }
 
@@ -197,7 +172,7 @@ $datepicker_day_color: $text-color !default;
   cursor: pointer;
   display: block;
   height: 30px;
-  opacity: 0.5;
+  opacity: 1;
   outline: medium none;
   overflow: hidden;
   padding: 0;
@@ -205,6 +180,9 @@ $datepicker_day_color: $text-color !default;
   white-space: nowrap;
   width: 20px;
   min-width: 0;
+  font-family: 'Font Awesome 5 Free';
+  font-style: normal;
+  color: $icon-color;
 }
 
 .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev,
@@ -252,7 +230,7 @@ $datepicker_day_color: $text-color !default;
   background: #f5f5f5;
   border-top: 1px solid #ddd;
   color: #666;
-  font-size: 12px;
+  font-size: $default-font-size;
   text-align: center;
   border-collapse: collapse;
   cursor: pointer;
@@ -267,8 +245,9 @@ $datepicker_day_color: $text-color !default;
 
 .xdsoft_datetimepicker .xdsoft_today_button:hover,
 .xdsoft_datetimepicker .xdsoft_next:hover,
-.xdsoft_datetimepicker .xdsoft_prev:hover {
-  opacity: 1;
+.xdsoft_datetimepicker .xdsoft_prev:hover,
+.xdsoft_datetimepicker .xdsoft_label:hover i {
+  opacity: 0.75;
 }
 
 .xdsoft_datetimepicker .xdsoft_label {
@@ -277,7 +256,7 @@ $datepicker_day_color: $text-color !default;
   z-index: 9999;
   margin: 0;
   padding: 5px 3px;
-  font-size: 14px;
+  font-size: $default-font-size;
   line-height: 20px;
   font-weight: bold;
   background-color: #fff;
@@ -287,10 +266,6 @@ $datepicker_day_color: $text-color !default;
   cursor: pointer;
 }
 
-.xdsoft_datetimepicker .xdsoft_label:hover i {
-  opacity: 1;
-}
-
 .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select {
   border: 1px solid #ccc;
   position: absolute;
@@ -355,7 +330,7 @@ $datepicker_day_color: $text-color !default;
   background: $datepicker_day_bg;
   border: $datepicker_day_border;
   color: $datepicker_day_color;
-  font-size: 12px;
+  font-size: $default-font-size;
   text-align: right;
   vertical-align: middle;
   padding: 0;
@@ -440,7 +415,7 @@ $datepicker_day_color: $text-color !default;
 
 .xdsoft_datetimepicker .xdsoft_copyright {
   color: #ccc !important;
-  font-size: 10px;
+  font-size: $small-font-size;
   clear: both;
   float: none;
   margin-left: 8px;
@@ -484,12 +459,12 @@ $datepicker_day_color: $text-color !default;
   margin-top: 5px;
   width: 100%;
   color: #454551;
-  font-size: 13px;
+  font-size: $default-font-size;
 }
 
 .xdsoft_datetimepicker .blue-gradient-button {
   font-family: "museo-sans", "Book Antiqua", sans-serif;
-  font-size: 12px;
+  font-size: $default-font-size;
   font-weight: 300;
   color: #82878c;
   height: 28px;

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

@@ -11,10 +11,6 @@ ul.list {
     }
   }
 
-  &#sitemap {
-    padding: 0 0 104px 0;
-  }
-
   li {
     list-style-type: none;
     display: block;
@@ -24,8 +20,8 @@ ul.list {
       overflow: hidden;
       background-color: transparent;
       font-weight: bold;
-      padding: $default-padding;
-      margin-bottom: $default-margin;
+      padding: $default-padding 2*$default-padding;
+      margin-bottom: 2*$default-margin;
 
       .list-secondary {
         color: $text-color;
@@ -33,11 +29,11 @@ ul.list {
     }
 
     &.even {
-      background-color: #fff;
+      background-color: $table-row-even-background-color;
     }
 
     &.odd {
-      background-color: #eaf3f9;
+      background-color: $table-row-odd-background-color;
     }
   }
 

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

@@ -2,26 +2,21 @@
  *= require_self
  */
 
-@import "bourbon";
 @import "alchemy/variables";
 @import "alchemy/mixins";
-@import "alchemy/extends";
 
 #alchemy_menubar {
   position: fixed;
   top: 0;
-  left: -356px;
+  left: -358px;
   width: 400px;
   z-index: 10000;
-  background: $light-gray;
-  @include animate-left;
-  @include bottom-right-rounded-border;
-  @include drop-shadow;
+  background: $blue;
+  transition: left 0.15s ease-in;
+  box-shadow: 0 0 0 1px $white;
   box-sizing: border-box;
-  border-right: $default-border;
-  border-bottom: $default-border;
-  height: 44px;
-  padding: 4px 40px 4px 8px;
+  height: auto;
+  padding: 8px 40px 8px 8px;
   overflow: hidden;
   font: $default-font-style;
 
@@ -37,41 +32,43 @@
 
   &:after {
     content: '';
-    width: 28px;
-    height: 28px;
+    width: 24px;
+    height: 24px;
     position: absolute;
-    right: 8px;
-    top: 8px;
+    right: 10px;
+    top: 50%;
     background: image-url('alchemy/icon.svg') 0 0 no-repeat;
-    background-size: 28px 28px;
+    background-size: 24px 24px;
+    transform: translateY(-50%);
   }
 
   ul {
     padding: 0;
     margin: 0;
-    height: auto;
+    height: 100%;
 
     li {
-      width: 32%;
-      height: 35px;
-      margin: 0 $default-margin 0 0;
-      padding: 0;
+      width: 33.333%;
+      height: 100%;
+      margin: 0;
+      padding: 0 $default-padding;
       float: left;
       list-style-type: none;
       text-align: center;
 
       a, button {
-        @include button-defaults;
-        padding-left: $default-padding;
-        padding-right: $default-padding;
+        @include button-defaults(
+          $background-color: $blue,
+          $hover-color: rgba($white, 0.15),
+          $hover-border-color: $white,
+          $border: 1px solid $white,
+          $padding: 0.5em 0,
+          $color: $white
+        );
         width: 100%;
-        display: block;
-        line-height: 14px;
-        font-weight: normal;
         text-decoration: none !important;
         text-transform: none;
-        color: $text-color !important;
-        font-family: $default-font-face;
+        font-family: $default-font-family;
 
         &:after { display: none }
       }

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

@@ -20,7 +20,6 @@
   top: 0;
   left: 0;
   width: $main-menu-width;
-  border-right: $default-border;
   background-color: $main-menu-bg-color;
   @extend .disable-user-select;
 
@@ -63,16 +62,19 @@
     @include truncate($main-menu-entry-max-width);
   }
 
-  a {
-    text-shadow: $text-shadow-light;
+  img, .icon {
+    width: 24px;
   }
 
-  img, .module.icon {
+  img {
     border-style: none;
     height: 24px;
-    width: 24px;
-    display: inline-block;
-    vertical-align: middle;
+    vertical-align: -0.6em;
+  }
+
+  .icon {
+    vertical-align: -0.15em;
+    color: inherit;
   }
 }
 
@@ -82,7 +84,6 @@
 }
 
 .main_navi_entry {
-  color: $main-menu-text-color;
   position: relative;
   display: block;
   line-height: 46px;
@@ -104,22 +105,24 @@
     }
   }
 
-  &.active {
+  &.active, &:hover {
     background-color: $main-menu-active-bg-color;
-    color: $text-color;
     cursor: default;
+
+    a, .icon {
+      color: $main-menu-active-text-color;
+      text-decoration: none;
+      text-shadow: none;
+    }
   }
 
   a {
     display: block;
     padding-left: 3 * $default-padding;
+    font-weight: bold;
+    color: $main-menu-text-color;
     transition: color $transition-duration $transition-easing;
-
-    &:hover {
-      text-decoration: none;
-      color: #000;
-      text-shadow: none;
-    }
+    @include antialiased-font-smoothing;
   }
 }
 
@@ -174,15 +177,10 @@ body:not(.collapsed-menu) {
     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;
+  &.active a, a:hover {
+    background-color: darken($dark-orange, 5%);
   }
 }
 
@@ -226,7 +224,7 @@ body:not(.collapsed-menu) {
     display: inline-block;
     color: $muted-text-color;
     margin-right: 2px;
-    font-size: 10px;
+    font-size: $small-font-size;
     text-transform: uppercase;
   }
 
@@ -234,6 +232,6 @@ body:not(.collapsed-menu) {
     display: inline-block;
     color: $muted-text-color;
     margin-right: $default-margin;
-    font-size: 10px;
+    font-size: $small-font-size;
   }
 }

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

@@ -1,29 +1,30 @@
-// leave this as div, bcz some table columns also have .message
-div.message, p.message {
+// Some table columns also have .message class
+div.message {
   padding: 8px 8px 8px 32px;
   line-height: 17px;
-  border-width: 1px;
-  border-style: solid;
-  @extend %rounded-border;
+  border-width: $default-border-width;
+  border-style: $default-border-style;
+  border-radius: $default-border-radius;
   position: relative;
   margin-bottom: 8px;
   text-align: left;
 
   h1 {
-    font-size: 14px;
+    font-size: 1.2em;
     margin: 8px 0;
   }
 
   h1, h2 { margin-top: 0 }
 
-  span.icon {
+  .icon {
     position: absolute;
     left: 8px;
-    top: 8px;
+    top: 10px;
+    color: inherit;
   }
 
   &.footnote {
-    font-size: 10px;
+    font-size: $small-font-size;
     margin: 16px;
   }
 
@@ -42,23 +43,22 @@ div.message, p.message {
       margin-bottom: 4px;
     }
   }
-}
 
-div.info {
-  @extend div.message;
-  color: $text-color;
-  background-color: #eaf4f9;
-  border-color: #0b5c84;
-}
+  &.info {
+    background-color: $info_background_color;
+    border-color: $info_border_color;
+    color: $info_text_color;
+  }
 
-div.error {
-  @extend div.message;
-  background-color: #f1c9ca;
-  color: #931f23;
-}
+  &.error {
+    background-color: $error_background_color;
+    border-color: $error_border_color;
+    color: $error_text_color;
+  }
 
-div.warning, div.warn {
-  @extend div.message;
-  background-color: #f7efb8;
-  color: #756f47;
+  &.warning, &.warn, &.alert {
+    background-color: $warning_background_color;
+    border-color: $warning_border_color;
+    color: $warning_text_color;
+  }
 }