From d0f4063b50e1ab8cb5bac8c22af77154feb1000d Mon Sep 17 00:00:00 2001 From: Thomas von Deyen Date: Tue, 13 Mar 2018 10:33:45 +0100 Subject: [PATCH 01/11] Use the dark gray blue for main menu and dialog headers --- app/assets/stylesheets/alchemy/_variables.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/alchemy/_variables.scss b/app/assets/stylesheets/alchemy/_variables.scss index dc299d38f2..619464f651 100644 --- 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; @@ -105,9 +105,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; From 5d013d29386300398c4663be1b30420a8811cb77 Mon Sep 17 00:00:00 2001 From: Thomas von Deyen Date: Tue, 13 Mar 2018 10:34:14 +0100 Subject: [PATCH 02/11] Use the golden orange for buttons --- .../alchemy/alchemy.buttons.js.coffee | 4 +++- app/assets/stylesheets/alchemy/_mixins.scss | 14 +++++++------- app/assets/stylesheets/alchemy/_variables.scss | 16 +++++++++------- app/assets/stylesheets/alchemy/buttons.scss | 11 +++++------ app/assets/stylesheets/alchemy/selects.scss | 2 +- app/assets/stylesheets/alchemy/spinner.scss | 2 +- 6 files changed, 26 insertions(+), 23 deletions(-) diff --git a/app/assets/javascripts/alchemy/alchemy.buttons.js.coffee b/app/assets/javascripts/alchemy/alchemy.buttons.js.coffee index 4f38906674..9ef0f335ae 100644 --- 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/_mixins.scss b/app/assets/stylesheets/alchemy/_mixins.scss index 43dd5c1266..a568475278 100644 --- a/app/assets/stylesheets/alchemy/_mixins.scss +++ b/app/assets/stylesheets/alchemy/_mixins.scss @@ -1,7 +1,7 @@ -@mixin default-focus-style { - border-color: $focus-color; +@mixin default-focus-style($color: $focus-color, $box-shadow: 0 0 0 1px $color) { + border-color: $color; border-radius: $default-border-radius; - box-shadow: 0 0 0 1px $focus-color; + box-shadow: $box-shadow; outline: none; &::-moz-focus-inner { @@ -15,14 +15,14 @@ $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) { display: inline-block; font-family: $default-font-family; font-size: $default-font-size; - font-weight: bold; + font-weight: $button-font-weight; line-height: $form-field-line-height; padding: $padding; cursor: pointer; @@ -33,7 +33,7 @@ color: $color; margin: $margin; -webkit-appearance: none; - transition: background-color 250ms; + transition: all 250ms; @include antialiased-font-smoothing; &:hover { @@ -47,7 +47,7 @@ } &:focus { - @include default-focus-style; + @include default-focus-style($color: $color, $box-shadow: 0 0 2px $color); } &.disabled, &[disabled], diff --git a/app/assets/stylesheets/alchemy/_variables.scss b/app/assets/stylesheets/alchemy/_variables.scss index 619464f651..4ae48f8e13 100644 --- a/app/assets/stylesheets/alchemy/_variables.scss +++ b/app/assets/stylesheets/alchemy/_variables.scss @@ -61,18 +61,20 @@ $form-field-disabled-bg-color: rgba($white, 0.5) !default; $focus-color: rgba(#eca96e, 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-hover-border-color: transparent !default; +$button-text-color: $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; diff --git a/app/assets/stylesheets/alchemy/buttons.scss b/app/assets/stylesheets/alchemy/buttons.scss index b87ee450ec..4a8680d7c5 100644 --- a/app/assets/stylesheets/alchemy/buttons.scss +++ b/app/assets/stylesheets/alchemy/buttons.scss @@ -6,6 +6,10 @@ 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($color: $secondary-button-text-color, $box-shadow: 0 0 2px $button-text-color); + } } &.small { @@ -18,7 +22,7 @@ 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; } @@ -32,11 +36,6 @@ button, input[type="submit"], a.button, input.button { margin: 0; } } - - &.disabled { - line-height: 13px; - height: 29px; - } } .icon_button { diff --git a/app/assets/stylesheets/alchemy/selects.scss b/app/assets/stylesheets/alchemy/selects.scss index 1a84917380..7e14c13ff3 100644 --- a/app/assets/stylesheets/alchemy/selects.scss +++ b/app/assets/stylesheets/alchemy/selects.scss @@ -190,7 +190,7 @@ select { &.select2-highlighted { background: $button-hover-bg-color; - color: $white; + color: $button-text-color; } &.select2-result-with-children { diff --git a/app/assets/stylesheets/alchemy/spinner.scss b/app/assets/stylesheets/alchemy/spinner.scss index c03bcc157f..16550fea02 100644 --- a/app/assets/stylesheets/alchemy/spinner.scss +++ b/app/assets/stylesheets/alchemy/spinner.scss @@ -7,7 +7,7 @@ line-height: 1; path { - fill: $dark-gray; + fill: $text-color; opacity: 1; animation: spinner 1s infinite ease-in-out both; } From 9416828525bd174b3501899969c60360f001b051 Mon Sep 17 00:00:00 2001 From: Thomas von Deyen Date: Mon, 7 May 2018 09:28:06 +0200 Subject: [PATCH 03/11] Unify transition-duration --- app/assets/stylesheets/alchemy/_extends.scss | 4 +--- app/assets/stylesheets/alchemy/_mixins.scss | 2 +- app/assets/stylesheets/alchemy/_variables.scss | 2 +- app/assets/stylesheets/alchemy/elements.scss | 4 ++-- app/assets/stylesheets/alchemy/image_library.scss | 2 +- app/assets/stylesheets/alchemy/preview_window.scss | 2 +- app/assets/stylesheets/alchemy/sitemap.scss | 2 +- app/assets/stylesheets/alchemy/tables.scss | 2 +- app/assets/stylesheets/alchemy/tags.scss | 2 +- app/assets/stylesheets/alchemy/upload.scss | 2 +- 10 files changed, 11 insertions(+), 13 deletions(-) diff --git a/app/assets/stylesheets/alchemy/_extends.scss b/app/assets/stylesheets/alchemy/_extends.scss index cf2eb33d94..2e005475ea 100644 --- a/app/assets/stylesheets/alchemy/_extends.scss +++ b/app/assets/stylesheets/alchemy/_extends.scss @@ -42,9 +42,7 @@ 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; diff --git a/app/assets/stylesheets/alchemy/_mixins.scss b/app/assets/stylesheets/alchemy/_mixins.scss index a568475278..9e3abf3e9e 100644 --- a/app/assets/stylesheets/alchemy/_mixins.scss +++ b/app/assets/stylesheets/alchemy/_mixins.scss @@ -33,7 +33,7 @@ color: $color; margin: $margin; -webkit-appearance: none; - transition: all 250ms; + transition: all $transition-duration; @include antialiased-font-smoothing; &:hover { diff --git a/app/assets/stylesheets/alchemy/_variables.scss b/app/assets/stylesheets/alchemy/_variables.scss index 4ae48f8e13..2ab065841c 100644 --- a/app/assets/stylesheets/alchemy/_variables.scss +++ b/app/assets/stylesheets/alchemy/_variables.scss @@ -119,7 +119,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/elements.scss b/app/assets/stylesheets/alchemy/elements.scss index a3f469bcc8..1236bde8ac 100644 --- 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; diff --git a/app/assets/stylesheets/alchemy/image_library.scss b/app/assets/stylesheets/alchemy/image_library.scss index cee19763bb..40b0211b12 100644 --- 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 { diff --git a/app/assets/stylesheets/alchemy/preview_window.scss b/app/assets/stylesheets/alchemy/preview_window.scss index 21b278cb1b..ba817196cd 100644 --- a/app/assets/stylesheets/alchemy/preview_window.scss +++ b/app/assets/stylesheets/alchemy/preview_window.scss @@ -7,7 +7,7 @@ border: 0 none; background: #fff; border-right: $default-border; - transition: 200ms ease-in-out; + transition: $transition-duration ease-in-out; .collapsed-menu & { left: $collapsed-main-menu-width; diff --git a/app/assets/stylesheets/alchemy/sitemap.scss b/app/assets/stylesheets/alchemy/sitemap.scss index 29e978ea11..f549eea651 100644 --- a/app/assets/stylesheets/alchemy/sitemap.scss +++ b/app/assets/stylesheets/alchemy/sitemap.scss @@ -81,7 +81,7 @@ height: $sitemap-line-height; margin: 3*$default-margin 0; position: relative; - transition: background-color 250ms; + transition: background-color $transition-duration; &.highlight { background-color: $sitemap-highlight-color; diff --git a/app/assets/stylesheets/alchemy/tables.scss b/app/assets/stylesheets/alchemy/tables.scss index 12291bdbf8..18c915c0a2 100644 --- a/app/assets/stylesheets/alchemy/tables.scss +++ b/app/assets/stylesheets/alchemy/tables.scss @@ -11,7 +11,7 @@ table { vertical-align: top; line-height: 18px; border-right: 1px solid $medium-gray; - transition: background-color 250ms; + transition: background-color $transition-duration; &:last-child { border-right: 0 none; diff --git a/app/assets/stylesheets/alchemy/tags.scss b/app/assets/stylesheets/alchemy/tags.scss index 304fdee226..4f1bd42130 100644 --- a/app/assets/stylesheets/alchemy/tags.scss +++ b/app/assets/stylesheets/alchemy/tags.scss @@ -20,7 +20,7 @@ top: auto; width: 200px; z-index: 1100; - transition: background-color 200ms; + transition: background-color $transition-duration; input { width: 200px; diff --git a/app/assets/stylesheets/alchemy/upload.scss b/app/assets/stylesheets/alchemy/upload.scss index 0ddd440e8e..193c746200 100644 --- a/app/assets/stylesheets/alchemy/upload.scss +++ b/app/assets/stylesheets/alchemy/upload.scss @@ -51,7 +51,7 @@ padding: 8px; overflow: hidden; background-color: rgba($dark-gray, 0.6); - transition: all 250ms ease-in-out; + transition: all $transition-duration ease-in-out; &.visible { bottom: 0; From 4d6e99ee341c3b48927166f726ff01a46af24441 Mon Sep 17 00:00:00 2001 From: Thomas von Deyen Date: Mon, 7 May 2018 10:19:11 +0200 Subject: [PATCH 04/11] Fix the line-height of linkable-essence-tools --- app/assets/stylesheets/alchemy/_mixins.scss | 5 +++-- app/assets/stylesheets/alchemy/elements.scss | 3 ++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/alchemy/_mixins.scss b/app/assets/stylesheets/alchemy/_mixins.scss index 9e3abf3e9e..b6e2bd356c 100644 --- a/app/assets/stylesheets/alchemy/_mixins.scss +++ b/app/assets/stylesheets/alchemy/_mixins.scss @@ -18,12 +18,13 @@ $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) { display: inline-block; font-family: $default-font-family; font-size: $default-font-size; font-weight: $button-font-weight; - line-height: $form-field-line-height; + line-height: $line-height; padding: $padding; cursor: pointer; border-radius: $border-radius; diff --git a/app/assets/stylesheets/alchemy/elements.scss b/app/assets/stylesheets/alchemy/elements.scss index 1236bde8ac..a7f48543c8 100644 --- a/app/assets/stylesheets/alchemy/elements.scss +++ b/app/assets/stylesheets/alchemy/elements.scss @@ -331,7 +331,8 @@ @include button-defaults( $background-color: $medium-gray, $hover-color: darken($medium-gray, 5%), - $border: $default-border); + $border: $default-border, + $line-height: auto); width: $form-field-height; height: $form-field-height; margin: 0 0 0 4px; From afa0d73cc9ad98f2a11060f346ef13d457b09a9f Mon Sep 17 00:00:00 2001 From: Thomas von Deyen Date: Mon, 7 May 2018 10:50:20 +0200 Subject: [PATCH 05/11] Unify and refactor the focus styles --- app/assets/stylesheets/alchemy/_extends.scss | 6 +---- app/assets/stylesheets/alchemy/_mixins.scss | 22 ++++++++++++++----- .../stylesheets/alchemy/_variables.scss | 5 +++-- app/assets/stylesheets/alchemy/base.scss | 8 +++---- app/assets/stylesheets/alchemy/buttons.scss | 7 ++++-- app/assets/stylesheets/alchemy/elements.scss | 4 +++- .../stylesheets/alchemy/navigation.scss | 18 +++++++++++++++ app/assets/stylesheets/alchemy/search.scss | 5 +++++ app/assets/stylesheets/alchemy/selects.scss | 4 ++-- .../tinymce/skins/alchemy/skin.min.css.scss | 12 +++++++--- 10 files changed, 67 insertions(+), 24 deletions(-) diff --git a/app/assets/stylesheets/alchemy/_extends.scss b/app/assets/stylesheets/alchemy/_extends.scss index 2e005475ea..9348443e77 100644 --- 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; @@ -45,7 +41,7 @@ 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 index b6e2bd356c..3495af169b 100644 --- a/app/assets/stylesheets/alchemy/_mixins.scss +++ b/app/assets/stylesheets/alchemy/_mixins.scss @@ -1,6 +1,9 @@ -@mixin default-focus-style($color: $focus-color, $box-shadow: 0 0 0 1px $color) { - border-color: $color; - border-radius: $default-border-radius; +@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; @@ -19,7 +22,9 @@ $padding: $button-padding, $margin: $button-margin, $color: $button-text-color, - $line-height: $form-field-line-height) { + $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; @@ -48,7 +53,10 @@ } &:focus { - @include default-focus-style($color: $color, $box-shadow: 0 0 2px $color); + @include default-focus-style( + $border-color: $focus-border-color, + $box-shadow: $focus-box-shadow + ); } &.disabled, &[disabled], @@ -152,6 +160,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 index 2ab065841c..1dd3095a42 100644 --- a/app/assets/stylesheets/alchemy/_variables.scss +++ b/app/assets/stylesheets/alchemy/_variables.scss @@ -59,14 +59,15 @@ $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: rgba($dark-orange, 0.75) !default; $button-hover-bg-color: $dark-orange !default; $button-border-color: transparent !default; $button-border-width: 2px !default; -$button-hover-border-color: transparent !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; diff --git a/app/assets/stylesheets/alchemy/base.scss b/app/assets/stylesheets/alchemy/base.scss index 7a08635d46..4ef53760f8 100644 --- 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 index 4a8680d7c5..8fb3fb45be 100644 --- a/app/assets/stylesheets/alchemy/buttons.scss +++ b/app/assets/stylesheets/alchemy/buttons.scss @@ -8,7 +8,10 @@ button, input[type="submit"], a.button, input.button { border-color: $secondary-button-border-color; &:focus { - @include default-focus-style($color: $secondary-button-text-color, $box-shadow: 0 0 2px $button-text-color); + @include default-focus-style( + $border-color: $secondary-button-text-color, + $box-shadow: 0 0 2px $button-text-color + ); } } @@ -99,7 +102,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 index a7f48543c8..46f3f1305e 100644 --- a/app/assets/stylesheets/alchemy/elements.scss +++ b/app/assets/stylesheets/alchemy/elements.scss @@ -332,7 +332,9 @@ $background-color: $medium-gray, $hover-color: darken($medium-gray, 5%), $border: $default-border, - $line-height: auto); + $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/navigation.scss b/app/assets/stylesheets/alchemy/navigation.scss index 0a173df345..dd4be71772 100644 --- a/app/assets/stylesheets/alchemy/navigation.scss +++ b/app/assets/stylesheets/alchemy/navigation.scss @@ -113,6 +113,13 @@ color: $main-menu-active-text-color; text-decoration: none; text-shadow: none; + + &:focus { + @include default-focus-style( + $box-shadow: inset 0 0 0 2px $main-menu-active-text-color, + $border-radius: 0 + ); + } } } @@ -123,6 +130,13 @@ color: $main-menu-text-color; transition: color $transition-duration $transition-easing; @include antialiased-font-smoothing; + + &:focus { + @include default-focus-style( + $box-shadow: inset 0 0 0 2px $focus-color, + $border-radius: 0 + ); + } } } @@ -208,6 +222,10 @@ body:not(.collapsed-menu) { > a { cursor: pointer; padding: 0px 8px; + + &:focus { + @include default-focus-style($box-shadow: inset 0 0 0 2px $focus-color); + } } .icon.close { diff --git a/app/assets/stylesheets/alchemy/search.scss b/app/assets/stylesheets/alchemy/search.scss index b60285d996..d92c183c1c 100644 --- a/app/assets/stylesheets/alchemy/search.scss +++ b/app/assets/stylesheets/alchemy/search.scss @@ -80,6 +80,11 @@ &:focus { width: 250px; background-color: $form-field-background-color; + + @include default-focus-style( + $box-shadow: inset 0 0 0 2px $focus-color, + $border-radius: 0 + ); } } diff --git a/app/assets/stylesheets/alchemy/selects.scss b/app/assets/stylesheets/alchemy/selects.scss index 7e14c13ff3..cbd0749028 100644 --- a/app/assets/stylesheets/alchemy/selects.scss +++ b/app/assets/stylesheets/alchemy/selects.scss @@ -68,7 +68,7 @@ select { &.select2-container-active { .select2-choice, .select2-choices { - @extend %blue-focus-style; + @include default-focus-style($box-shadow: 0 0 0 1px $focus-color); } } @@ -107,7 +107,7 @@ select { &.select2-container-active { .select2-choices { - @extend %blue-focus-style; + @include default-focus-style($box-shadow: 0 0 0 1px $focus-color); } } diff --git a/app/assets/stylesheets/tinymce/skins/alchemy/skin.min.css.scss b/app/assets/stylesheets/tinymce/skins/alchemy/skin.min.css.scss index 7bd7337796..2c533a0971 100755 --- a/app/assets/stylesheets/tinymce/skins/alchemy/skin.min.css.scss +++ b/app/assets/stylesheets/tinymce/skins/alchemy/skin.min.css.scss @@ -662,13 +662,20 @@ body .mce-abs-layout-item { &:focus, &:hover { color: $text-color; - background-color: darken($medium-gray, 3%); button { background: inherit; } } + &:hover { + background-color: darken($medium-gray, 3%); + } + + &:focus { + background-color: $focus-color; + } + button { padding: 2px 4px; font-size: 12px; @@ -1021,8 +1028,7 @@ i.mce-i-checkbox { } .mce-path-item:focus { - background: #666; - color: #fff; + @include default-focus-style; } .mce-path .mce-divider { From 5c8fead0b4622f45dac5692437fef62494863f42 Mon Sep 17 00:00:00 2001 From: Thomas von Deyen Date: Mon, 7 May 2018 11:15:03 +0200 Subject: [PATCH 06/11] Form field padding adjustments After adjusting the border of buttons we need to adjust the input paddings as well --- app/assets/stylesheets/alchemy/_mixins.scss | 7 +++---- app/assets/stylesheets/alchemy/_variables.scss | 2 +- app/assets/stylesheets/alchemy/form_fields.scss | 2 -- app/assets/stylesheets/alchemy/forms.scss | 2 +- 4 files changed, 5 insertions(+), 8 deletions(-) diff --git a/app/assets/stylesheets/alchemy/_mixins.scss b/app/assets/stylesheets/alchemy/_mixins.scss index 3495af169b..9722f338e5 100644 --- a/app/assets/stylesheets/alchemy/_mixins.scss +++ b/app/assets/stylesheets/alchemy/_mixins.scss @@ -75,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; diff --git a/app/assets/stylesheets/alchemy/_variables.scss b/app/assets/stylesheets/alchemy/_variables.scss index 1dd3095a42..a0e42d42ae 100644 --- a/app/assets/stylesheets/alchemy/_variables.scss +++ b/app/assets/stylesheets/alchemy/_variables.scss @@ -52,7 +52,7 @@ $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; diff --git a/app/assets/stylesheets/alchemy/form_fields.scss b/app/assets/stylesheets/alchemy/form_fields.scss index 55af0ec98b..9ae6d25349 100644 --- a/app/assets/stylesheets/alchemy/form_fields.scss +++ b/app/assets/stylesheets/alchemy/form_fields.scss @@ -26,8 +26,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 index 71af007cee..e1667280c3 100644 --- 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; } From 850a3e22dec445ada8ed21928727c90e5bb2e16d Mon Sep 17 00:00:00 2001 From: Thomas von Deyen Date: Mon, 7 May 2018 11:18:31 +0200 Subject: [PATCH 07/11] Add checkbox focus style --- app/assets/stylesheets/alchemy/form_fields.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/app/assets/stylesheets/alchemy/form_fields.scss b/app/assets/stylesheets/alchemy/form_fields.scss index 9ae6d25349..d96d373602 100644 --- 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; } From d2a6051919fa41f53d0dfd1636ffaea684c3e863 Mon Sep 17 00:00:00 2001 From: Thomas von Deyen Date: Mon, 7 May 2018 11:32:37 +0200 Subject: [PATCH 08/11] Fix the upload button tab focus The actual input field is not displayed, so we need to set the tabfocus to the span that plays the role of the button --- app/views/alchemy/admin/uploader/_button.html.erb | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/views/alchemy/admin/uploader/_button.html.erb b/app/views/alchemy/admin/uploader/_button.html.erb index 1675bc8349..0844916841 100644 --- a/app/views/alchemy/admin/uploader/_button.html.erb +++ b/app/views/alchemy/admin/uploader/_button.html.erb @@ -1,11 +1,11 @@ <%= form_for [:admin, object], html: {multipart: true, class: 'upload-button'} do |f| %> <%= f.file_field file_attribute, class: 'fileupload fileupload--field', multiple: true, - name: "#{f.object_name}[#{file_attribute}]" %> + name: "#{f.object_name}[#{file_attribute}]", tabindex: '-1' %> <%= hidden_field_tag("#{f.object_name}[upload_hash]", Time.current.hash) if object.respond_to?(:upload_hash) %> <%= f.label file_attribute, data: {alchemy_hotkey: 'alt+n'} do %>
- <%= render_icon :upload %> + <%= render_icon :upload %>