Merge pull request #1426 from tvdeyen/color-adjustments

Color and styles adjustments
AlchemyCMS · May 7, 2018 · b6cdc49 · b6cdc49
2 parents 0e92ff8 + 598f6d9
commit b6cdc49
Show file tree

Hide file tree

Showing 23 changed files with 151 additions and 94 deletions.
diff --git a/app/assets/javascripts/alchemy/alchemy.buttons.js.coffee b/app/assets/javascripts/alchemy/alchemy.buttons.js.coffee
@@ -20,12 +20,13 @@ Alchemy.Buttons =
 
   disable: (button) ->
     $button = $(button)
-    spinner = new Alchemy.Spinner('small', {fill: '#fff'})
+    spinner = new Alchemy.Spinner('small')
     $button.data('content', $button.html())
     $button.attr('disabled', true)
     $button.addClass('disabled')
     $button.css
       width: $button.outerWidth()
+      height: $button.outerHeight()
     $button.empty()
     spinner.spin($button)
     return true
@@ -37,5 +38,6 @@ Alchemy.Buttons =
       $button.removeClass('disabled')
       $button.removeAttr('disabled')
       $button.css("width", "")
+      $button.css("height", "")
       $button.html($button.data('content'))
     return true
diff --git a/app/assets/stylesheets/alchemy/_extends.scss b/app/assets/stylesheets/alchemy/_extends.scss
@@ -24,10 +24,6 @@
   box-shadow: inset 1px 1px 4px rgba($error_border_color, 0.5);
 }
 
-%blue-focus-style {
-  @include default-focus-style;
-}
-
 %default-input-style {
   border-radius: $default-border-radius;
   box-shadow: $form-field-box-shadow;
@@ -42,12 +38,10 @@
   width: 100%;
   font-size: $form-field-font-size;
   line-height: $form-field-line-height;
-  transition-property: box-shadow, background-color, border;
-  transition-duration: 0.25s;
-  transition-timing-function: ease-in-out;
+  transition: $transition-duration;
 
   &:focus {
-    @extend %blue-focus-style;
+    @include default-focus-style($box-shadow: 0 0 0 1px $focus-color);
   }
 
   &[disabled], .disabled {

diff --git a/app/assets/stylesheets/alchemy/_mixins.scss b/app/assets/stylesheets/alchemy/_mixins.scss
@@ -1,7 +1,10 @@
-@mixin default-focus-style {
-  border-color: $focus-color;
-  border-radius: $default-border-radius;
-  box-shadow: 0 0 0 1px $focus-color;
+@mixin default-focus-style(
+  $border-color: $focus-color,
+  $box-shadow: 0 0 0 2px $focus-color,
+  $border-radius: $default-border-radius) {
+  border-color: $border-color;
+  border-radius: $border-radius;
+  box-shadow: $box-shadow;
   outline: none;
 
   &::-moz-focus-inner {
@@ -15,15 +18,18 @@
   $hover-color: $button-hover-bg-color,
   $hover-border-color: $button-hover-border-color,
   $border-radius: $default-border-radius,
-  $border: 1px solid $button-border-color,
+  $border: $button-border-width solid $button-border-color,
   $padding: $button-padding,
   $margin: $button-margin,
-  $color: $button-text-color) {
+  $color: $button-text-color,
+  $line-height: $form-field-line-height,
+  $focus-border-color: $button-focus-border-color,
+  $focus-box-shadow: 0 0 2px $focus-border-color) {
   display: inline-block;
   font-family: $default-font-family;
   font-size: $default-font-size;
-  font-weight: bold;
-  line-height: $form-field-line-height;
+  font-weight: $button-font-weight;
+  line-height: $line-height;
   padding: $padding;
   cursor: pointer;
   border-radius: $border-radius;
@@ -33,7 +39,7 @@
   color: $color;
   margin: $margin;
   -webkit-appearance: none;
-  transition: background-color 250ms;
+  transition: all $transition-duration;
   @include antialiased-font-smoothing;
 
   &:hover {
@@ -47,7 +53,10 @@
   }
 
   &:focus {
-    @include default-focus-style;
+    @include default-focus-style(
+      $border-color: $focus-border-color,
+      $box-shadow: $focus-box-shadow
+    );
   }
 
   &.disabled, &[disabled],
@@ -66,11 +75,10 @@
 
 @mixin form-label {
   width: $form-left-width;
-  padding-right: 2*$default-padding;
-  padding-top: $default-padding + 1;
-  margin-top: 4px;
+  padding-right: 2 * $default-padding;
+  padding-top: 0.6em;
+  margin-top: $default-margin;
   vertical-align: top;
-  line-height: 19px;
   word-break: normal;
   float: left;
   text-align: right;
@@ -151,6 +159,10 @@
     font-size: 0.8em;
     padding-right: 2*$default-padding;
   }
+
+  &:focus {
+    @include default-focus-style($box-shadow: inset 0 0 0 2px $focus-color);
+  }
 }
 
 @mixin linked-button($border-radius: $default-border-radius) {

diff --git a/app/assets/stylesheets/alchemy/_variables.scss b/app/assets/stylesheets/alchemy/_variables.scss
@@ -27,7 +27,7 @@ $small-font-size: 0.9em !default;
 $default-font-style: $default-font-size $default-font-family !default;
 
 $dialog-header-height: 36px !default;
-$dialog-header-color: $dark-blue !default;
+$dialog-header-color: $dark-gray-blue !default;
 $dialog-header-text-color: $white !default;
 $dialog-header-font-size: $default-font-size !default;
 $dialog-box-shadow: 0 8px 16px rgba(35, 35, 35, 0.5) !default;
@@ -52,27 +52,30 @@ $form-field-border-width: $default-border-width !default;
 $form-field-border-style: $default-border-style !default;
 $form-field-border-color: $default-border-color $default-border-color $border-inset-color $border-inset-color !default;
 $form-field-box-shadow: inset 0px 0 1px $medium-gray !default;
-$form-field-padding: 0.5em 0.75em !default;
+$form-field-padding: 0.6em 0.75em !default;
 $form-field-font-size: $default-font-size !default;
 $form-field-line-height: 1.25 !default;
 $form-field-text-color: $text-color !default;
 $form-field-disabled-text-color: #888 !default;
 $form-field-disabled-bg-color: rgba($white, 0.5) !default;
 
-$focus-color: rgba(#eca96e, 0.75) !default;
+$focus-color: rgba($dark-orange, 0.75) !default;
 
-$button-bg-color: $dark-blue !default;
-$button-hover-bg-color: lighten($button-bg-color, 5%) !default;
-$button-border-color: darken($button-bg-color, 5%) !default;
-$button-hover-border-color: lighten($button-border-color, 5%) !default;
-$button-text-color: $white !default;
+$button-bg-color: rgba($dark-orange, 0.75) !default;
+$button-hover-bg-color: $dark-orange !default;
+$button-border-color: transparent !default;
+$button-border-width: 2px !default;
+$button-text-color: $text-color !default;
+$button-hover-border-color: transparent !default;
+$button-focus-border-color: $button-text-color !default;
+$button-font-weight: bold !default;
 $button-text-shadow: none !default;
 $button-box-shadow: none !default;
-$button-padding: 0.5em 1.5em !default;
+$button-padding: 0.5em 2em !default;
 $button-margin: $form-field-margin !default;
 
 $secondary-button-bg-color: transparent !default;
-$secondary-button-text-color: $button-bg-color !default;
+$secondary-button-text-color: $button-text-color !default;
 $secondary-button-border-color: $button-bg-color !default;
 
 $linked-button-color: rgba($linked-color, 0.75) !default;
@@ -105,9 +108,9 @@ $sitemap-highlight-color: rgba(#fffba5, 0.5) !default;
 
 $main-menu-width: 150px !default;
 $collapsed-main-menu-width: 48px !default;
-$main-menu-bg-color: $dark-blue !default;
+$main-menu-bg-color: $dark-gray-blue !default;
 $main-menu-active-bg-color: $dark-orange !default;
-$main-menu-active-text-color: $very-dark-gray !default;
+$main-menu-active-text-color: $dark-gray-blue !default;
 $main-menu-text-color: $white !default;
 $main-menu-icon-color: $white !default;
 $main-menu-entry-max-width: 100px !default;
@@ -117,7 +120,7 @@ $element-toolbar-height: 37px !default;
 $header-height: 29px !default;
 $header-background: #d8d8d8 !default;
 $text-shadow-light: rgba($white, 0.5) 0 0 4px !default;
-$transition-duration: 200ms !default;
+$transition-duration: 250ms !default;
 $transition-easing: linear !default;
 
 $tooltip-background-color: lighten($dark-gray-blue, 15%) !default;

diff --git a/app/assets/stylesheets/alchemy/base.scss b/app/assets/stylesheets/alchemy/base.scss
@@ -96,15 +96,15 @@ a {
     text-decoration: underline;
   }
 
-  &:focus {
-    @extend %blue-focus-style;
-  }
-
   img {
     border: none;
   }
 }
 
+a:focus, [tabindex]:focus {
+  @include default-focus-style;
+}
+
 form {
   margin-bottom: 0;
 }

diff --git a/app/assets/stylesheets/alchemy/buttons.scss b/app/assets/stylesheets/alchemy/buttons.scss
@@ -6,6 +6,13 @@ button, input[type="submit"], a.button, input.button {
     background-color: $secondary-button-bg-color;
     color: $secondary-button-text-color;
     border-color: $secondary-button-border-color;
+
+    &:focus {
+      @include default-focus-style(
+        $border-color: $secondary-button-text-color,
+        $box-shadow: 0 0 2px $button-text-color
+      );
+    }
   }
 
   &.small {
@@ -18,25 +25,9 @@ button, input[type="submit"], a.button, input.button {
   &.with_icon .icon {
     position: relative;
     top: -1px;
-    margin-right: $default-margin;
+    margin-right: 2 * $default-margin;
     color: inherit;
   }
-
-  &.icon_only {
-    margin: 0;
-    padding: 0;
-    border: 0 none;
-    background: none;
-
-    .icon {
-      margin: 0;
-    }
-  }
-
-  &.disabled {
-    line-height: 13px;
-    height: 29px;
-  }
 }
 
 .icon_button {
@@ -100,7 +91,7 @@ button, input[type="submit"], a.button, input.button {
   }
 
   &:focus {
-    @extend %blue-focus-style;
+    @include default-focus-style;
   }
 }
 

diff --git a/app/assets/stylesheets/alchemy/elements.scss b/app/assets/stylesheets/alchemy/elements.scss
@@ -7,7 +7,7 @@
   height: calc(100vh - #{$top-menu-height});
   border-left: $default-border;
   background-color: $light-gray;
-  transition: 200ms ease-in-out;
+  transition: $transition-duration ease-in-out;
   transform: translate3d($elements-window-width - $default-border-width, 0, 0);
 
   .elements-window-visible & {
@@ -138,7 +138,7 @@
   border-radius: $default-border-radius;
   background-color: $light-gray;
   margin-bottom: 2*$default-margin;
-  transition: box-shadow 250ms;
+  transition: box-shadow $transition-duration;
 
   &.not-draggable {
     opacity: 0.5;
@@ -331,7 +331,10 @@
     @include button-defaults(
       $background-color: $medium-gray,
       $hover-color: darken($medium-gray, 5%),
-      $border: $default-border);
+      $border: $default-border,
+      $line-height: auto,
+      $focus-border-color: $focus-color,
+      $focus-box-shadow: 0 0 0 2px $focus-color);
     width: $form-field-height;
     height: $form-field-height;
     margin: 0 0 0 4px;

diff --git a/app/assets/stylesheets/alchemy/form_fields.scss b/app/assets/stylesheets/alchemy/form_fields.scss
@@ -13,6 +13,17 @@ input[type="search"],
   }
 }
 
+input[type="checkbox"] {
+  transition: $transition-duration;
+
+  &:focus {
+    @include default-focus-style($box-shadow: (
+      inset 0 0 0 1px $focus-color,
+      0 0 0 1px $focus-color
+    ));
+  }
+}
+
 input[type="search"] {
   -webkit-appearance: textfield;
 }
@@ -26,8 +37,6 @@ input[type="search"]::-webkit-search-results-decoration  {
 
 textarea {
   height: auto;
-  padding: 4px 8px;
-  line-height: 19px;
 }
 
 .alchemy-char-counter {

diff --git a/app/assets/stylesheets/alchemy/forms.scss b/app/assets/stylesheets/alchemy/forms.scss
@@ -164,7 +164,7 @@ form {
 
   .control_group {
     width: $form-right-width;
-    padding-top: 6px;
+    padding-top: 0.6em;
     float: right;
   }
 

diff --git a/app/assets/stylesheets/alchemy/image_library.scss b/app/assets/stylesheets/alchemy/image_library.scss
@@ -1,6 +1,6 @@
 $picture-overlay-handle-width: 18px;
 $image-overlay-form-width: 350px - $picture-overlay-handle-width;
-$image-overlay-transition-duration: 200ms;
+$image-overlay-transition-duration: $transition-duration;
 $image-overlay-transition-easing: ease-in;
 
 .alchemy-image-overlay {