diff options
author | Scott Hampton <shampton@gitlab.com> | 2019-07-11 13:06:09 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2019-07-11 13:06:09 +0300 |
commit | d97032ca0aa52caba9f436a14eaae57b6ef41379 (patch) | |
tree | 964c12c8c9384528eda7851c094a2f6e2bb1bb36 | |
parent | 2d5b47a708172f5f048f84c6d27f87f860423206 (diff) |
Bring buttons style up to design spec
This is a CSS effort only.
Fixes the padding of the buttons to be `8px 12px`
(including border) so that the button height is
32px.
Also adjusts the border width for all buttons when
the state is `hover`, `focus`, or `active to be 2px
thick instead of 1px thick. This is accomplished
through an inset box-shadow as not to increase
the size of the button.
Fixes some colors for primary and tertiary buttons.
-rw-r--r-- | app/assets/stylesheets/framework/animations.scss | 2 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/buttons.scss | 128 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/dropdowns.scss | 17 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/variables.scss | 4 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/commits.scss | 4 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/issuable.scss | 4 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/issues.scss | 1 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/note_form.scss | 1 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/projects.scss | 3 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/tree.scss | 2 | ||||
-rw-r--r-- | app/helpers/dropdowns_helper.rb | 2 | ||||
-rw-r--r-- | app/views/projects/issues/import_csv/_button.html.haml | 2 | ||||
-rw-r--r-- | app/views/shared/issuable/_feed_buttons.html.haml | 8 | ||||
-rw-r--r-- | changelogs/unreleased/61145-fix-button-dimensions.yml | 5 | ||||
-rw-r--r-- | spec/support/features/rss_shared_examples.rb | 4 |
15 files changed, 98 insertions, 89 deletions
diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss index 6f5a2e561af..6bc5632365f 100644 --- a/app/assets/stylesheets/framework/animations.scss +++ b/app/assets/stylesheets/framework/animations.scss @@ -104,7 +104,7 @@ } .btn { - @include transition(background-color, border-color, color, box-shadow); + @include transition(border-color); } .dropdown-menu-toggle, diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index 767832e242c..e0b6da31261 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -24,12 +24,11 @@ border-radius: $border-radius-default; font-size: $gl-font-size; font-weight: $gl-font-weight-normal; - padding: $gl-vert-padding $gl-btn-padding; + padding: $gl-bordered-btn-vert-padding $gl-bordered-btn-horz-padding; &:focus, &:active { background-color: $btn-active-gray; - box-shadow: $gl-btn-active-background; } } @@ -50,77 +49,89 @@ color: $text; } - &:hover, - &:focus { - background-color: $hover-background; - border-color: $hover-border; - color: $hover-text; + &:not(:disabled):not(.disabled) { + &:hover { + box-shadow: inset 0 0 0 1px $hover-border, 0 2px 2px 0 $gl-btn-hover-shadow-light; + } - > .icon { - color: $hover-text; + &:focus { + box-shadow: inset 0 0 0 1px $hover-border, 0 0 4px 1px $blue-300; } - } - &:focus { - box-shadow: 0 0 4px 1px $blue-300; - } + &:hover, + &:focus { + background-color: $hover-background; + border-color: $hover-border; + color: $hover-text; - &:active { - background-color: $active-background; - border-color: $active-border; - box-shadow: inset 0 2px 4px 0 rgba($black, 0.2); - color: $active-text; + > .icon { + color: $hover-text; + } + } - > .icon { + &:active, + &:active:focus { + background-color: $active-background; + border-color: $active-border; + box-shadow: inset 0 0 0 1px $hover-border, inset 0 2px 4px 0 rgba($black, 0.2); color: $active-text; - } - &:focus { - box-shadow: inset 0 2px 4px 0 rgba($black, 0.2); + > .icon { + color: $active-text; + } } } } -@mixin btn-color($light, $border-light, $normal, $border-normal, $dark, $border-dark, $color) { +@mixin btn-color($light, $border-light, $normal, $border-normal, $dark, $border-dark, $color, $hover-shadow-color: $gl-btn-hover-shadow-dark) { background-color: $light; border-color: $border-light; color: $color; - &:hover, - &:focus { - background-color: $normal; - border-color: $border-normal; - color: $color; - } + &:not(:disabled):not(.disabled) { + &:hover { + box-shadow: inset 0 0 0 1px $border-normal, 0 2px 2px 0 $hover-shadow-color; + } - &:active, - &.active { - box-shadow: $gl-btn-active-background; + &:focus { + box-shadow: inset 0 0 0 1px $border-normal, 0 0 4px 1px $blue-300; + } - background-color: $dark; - border-color: $border-dark; - color: $color; + &:hover, + &:focus { + background-color: $normal; + border-color: $border-normal; + color: $color; + } + + &:active, + &.active { + box-shadow: inset 0 2px 4px 0 $gl-btn-hover-shadow-dark; + background-color: $dark; + border-color: $border-dark; + color: $color; + } } } @mixin btn-green { - @include btn-color($green-500, $green-600, $green-600, $green-700, $green-700, $green-800, $white-light); + @include btn-color($green-500, $green-600, $green-500, $green-700, $green-600, $green-800, $white-light); } @mixin btn-blue { - @include btn-color($blue-500, $blue-600, $blue-600, $blue-700, $blue-700, $blue-800, $white-light); + @include btn-color($blue-500, $blue-600, $blue-500, $blue-700, $blue-600, $blue-800, $white-light); } @mixin btn-orange { - @include btn-color($orange-500, $orange-600, $orange-600, $orange-700, $orange-700, $orange-800, $white-light); + @include btn-color($orange-500, $orange-600, $orange-500, $orange-700, $orange-600, $orange-800, $white-light); } @mixin btn-red { - @include btn-color($red-500, $red-600, $red-600, $red-700, $red-700, $red-800, $white-light); + @include btn-color($red-500, $red-600, $red-500, $red-700, $red-600, $red-800, $white-light); } @mixin btn-white { - @include btn-color($white-light, $border-color, $white-normal, $border-white-normal, $white-dark, $border-gray-dark, $gl-text-color); + @include btn-color($white-light, $gray-400, $gray-200, $gray-400, $gl-gray-200, $gray-500, $gl-text-color, $gl-btn-hover-shadow-light); } @mixin btn-with-margin { @@ -149,23 +160,22 @@ color: $gl-text-color; white-space: nowrap; + line-height: $gl-btn-line-height; &:focus:active { outline: 0; } - &.btn-sm { - padding: 4px 10px; - font-size: $gl-btn-small-font-size; - line-height: $gl-btn-small-line-height; - } - &.btn-xs { - padding: 2px $gl-btn-padding; font-size: $gl-btn-xs-font-size; line-height: $gl-btn-xs-line-height; } + &.btn-sm, + &.btn-xs { + padding: 3px $gl-bordered-btn-vert-padding; + } + &.btn-success, &.btn-register { @include btn-green; @@ -239,7 +249,7 @@ &.dropdown-toggle { .fa-caret-down { - margin-left: 3px; + margin: 0; } } @@ -272,10 +282,7 @@ } svg { - height: 15px; - width: 15px; - position: relative; - top: 2px; + @include btn-svg; } svg, @@ -330,6 +337,12 @@ &.btn-grouped { @include btn-with-margin; } + + .btn { + border-radius: $border-radius-default; + font-size: $gl-font-size; + line-height: $gl-btn-line-height; + } } .btn-clipboard { @@ -487,18 +500,25 @@ &:active, &:focus { color: $gl-text-color-secondary; + border: 1px solid $border-gray-normal-dashed; background-color: $white-normal; } } -.btn-svg svg { - @include btn-svg; +.btn-svg { + padding: $gl-bordered-btn-vert-padding; + + svg { + @include btn-svg; + display: block; + } } // All disabled buttons, regardless of color, type, etc %disabled { background-color: $gray-light !important; border-color: $gray-200 !important; + box-shadow: none; color: $gl-text-color-disabled !important; opacity: 1 !important; cursor: default !important; diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index 29f63e9578d..05afcecca05 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -8,12 +8,6 @@ } } -@mixin chevron-active { - .fa-chevron-down { - color: $gray-darkest; - } -} - @mixin set-visible { transform: translateY(0); display: block; @@ -49,7 +43,6 @@ .dropdown-toggle, .dropdown-menu-toggle { - @include chevron-active; border-color: $gray-darkest; } @@ -65,12 +58,12 @@ .dropdown-toggle, .confidential-merge-request-fork-group .dropdown-toggle { - padding: 6px 8px 6px 10px; + padding: $gl-bordered-btn-vert-padding $gl-bordered-btn-horz-padding; background-color: $white-light; color: $gl-text-color; font-size: 14px; + line-height: $gl-btn-line-height; text-align: left; - border: 1px solid $border-color; border-radius: $border-radius-base; white-space: nowrap; @@ -103,10 +96,6 @@ padding-right: 25px; } - .fa { - color: $gray-darkest; - } - .fa-chevron-down { font-size: $dropdown-chevron-size; position: relative; @@ -115,12 +104,10 @@ } &:hover { - @include chevron-active; border-color: $gray-darkest; } &:focus:active { - @include chevron-active; border-color: $dropdown-toggle-active-border-color; outline: 0; } diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index c108f45622f..047a9799c3f 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -405,6 +405,8 @@ $tanuki-yellow: #fca326; */ $green-500-focus: rgba($green-500, 0.4); $gl-btn-active-background: rgba(0, 0, 0, 0.16); +$gl-btn-hover-shadow-dark: rgba($black, 0.2); +$gl-btn-hover-shadow-light: rgba($black, 0.1); $gl-btn-active-gradient: inset 0 2px 3px $gl-btn-active-background; /* @@ -481,6 +483,8 @@ $gl-btn-padding: 10px; $gl-btn-line-height: 16px; $gl-btn-vert-padding: 8px; $gl-btn-horz-padding: 12px; +$gl-bordered-btn-vert-padding: $gl-btn-vert-padding - 1px; +$gl-bordered-btn-horz-padding: $gl-btn-horz-padding - 1px; $gl-btn-small-font-size: 13px; $gl-btn-small-line-height: 18px; $gl-btn-xs-font-size: 13px; diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index e12ea6fcb99..ffc6e433988 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -214,10 +214,10 @@ .label, .btn { - padding: $gl-vert-padding $gl-btn-padding; + padding: $gl-bordered-btn-vert-padding $gl-bordered-btn-horz-padding; border: 1px $border-color solid; font-size: $gl-font-size; - line-height: $line-height-base; + line-height: $gl-btn-line-height; border-radius: 0; display: flex; align-items: center; diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 6a0127eb51c..66ea70e79da 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -929,10 +929,6 @@ margin: 0; } } - - .dropdown-toggle > .icon { - margin: 0 3px; - } } .right-sidebar-collapsed { diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index 8359a60ec9f..e51ca44476c 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -267,7 +267,6 @@ ul.related-merge-requests > li { .fa-caret-down { pointer-events: none; color: inherit; - margin-left: 0; } } } diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index c6bac33e888..1d57a4a4784 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -417,7 +417,6 @@ table { i { color: $white-light; - padding-right: 2px; margin-top: 2px; } diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index c80beceae52..73ba09dbba5 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -429,7 +429,7 @@ padding: 0; background: transparent; border: 0; - line-height: 34px; + line-height: 2; margin: 0; > li + li::before { @@ -792,7 +792,6 @@ .btn { margin-top: $gl-padding; - padding: $gl-btn-vert-padding $gl-btn-padding; line-height: $gl-btn-line-height; .icon { diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss index 5664f46484e..5c732ab0d1f 100644 --- a/app/assets/stylesheets/pages/tree.scss +++ b/app/assets/stylesheets/pages/tree.scss @@ -90,7 +90,7 @@ .add-to-tree { vertical-align: top; - padding: 8px; + padding: $gl-bordered-btn-vert-padding; svg { top: 0; diff --git a/app/helpers/dropdowns_helper.rb b/app/helpers/dropdowns_helper.rb index 64c5fae7d96..fd94f07cc2c 100644 --- a/app/helpers/dropdowns_helper.rb +++ b/app/helpers/dropdowns_helper.rb @@ -46,7 +46,7 @@ module DropdownsHelper def dropdown_toggle(toggle_text, data_attr, options = {}) default_label = data_attr[:default_label] - content_tag(:button, disabled: options[:disabled], class: "dropdown-menu-toggle #{options[:toggle_class] if options.key?(:toggle_class)}", id: (options[:id] if options.key?(:id)), type: "button", data: data_attr) do + content_tag(:button, disabled: options[:disabled], class: "dropdown-menu-toggle btn #{options[:toggle_class] if options.key?(:toggle_class)}", id: (options[:id] if options.key?(:id)), type: "button", data: data_attr) do output = content_tag(:span, toggle_text, class: "dropdown-toggle-text #{'is-default' if toggle_text == default_label}") output << icon('chevron-down') output.html_safe diff --git a/app/views/projects/issues/import_csv/_button.html.haml b/app/views/projects/issues/import_csv/_button.html.haml index acc2c50294f..8442a53ed61 100644 --- a/app/views/projects/issues/import_csv/_button.html.haml +++ b/app/views/projects/issues/import_csv/_button.html.haml @@ -1,6 +1,6 @@ - type = local_assigns.fetch(:type, :icon) -%button.csv-import-button.btn{ title: _('Import CSV'), class: ('has-tooltip' if type == :icon), +%button.csv-import-button.btn.btn-svg{ title: _('Import CSV'), class: ('has-tooltip' if type == :icon), data: { toggle: 'modal', target: '.issues-import-modal' } } - if type == :icon = sprite_icon('upload') diff --git a/app/views/shared/issuable/_feed_buttons.html.haml b/app/views/shared/issuable/_feed_buttons.html.haml index 83f60fa6fe2..c9506a3295c 100644 --- a/app/views/shared/issuable/_feed_buttons.html.haml +++ b/app/views/shared/issuable/_feed_buttons.html.haml @@ -1,4 +1,4 @@ -= link_to safe_params.merge(rss_url_options), class: 'btn has-tooltip', data: { container: 'body' }, title: _('Subscribe to RSS feed') do - = icon('rss') -= link_to safe_params.merge(calendar_url_options), class: 'btn has-tooltip', data: { container: 'body' }, title: _('Subscribe to calendar') do - = custom_icon('icon_calendar') += link_to safe_params.merge(rss_url_options), class: 'btn btn-svg has-tooltip js-rss-button', data: { container: 'body' }, title: _('Subscribe to RSS feed') do + = sprite_icon('rss') += link_to safe_params.merge(calendar_url_options), class: 'btn btn-svg has-tooltip', data: { container: 'body' }, title: _('Subscribe to calendar') do + = sprite_icon('calendar') diff --git a/changelogs/unreleased/61145-fix-button-dimensions.yml b/changelogs/unreleased/61145-fix-button-dimensions.yml new file mode 100644 index 00000000000..8f209ceaa8e --- /dev/null +++ b/changelogs/unreleased/61145-fix-button-dimensions.yml @@ -0,0 +1,5 @@ +--- +title: Updating button dimensions according to design spec +merge_request: 28545 +author: +type: fixed diff --git a/spec/support/features/rss_shared_examples.rb b/spec/support/features/rss_shared_examples.rb index 0de92aedba5..02d310a9afa 100644 --- a/spec/support/features/rss_shared_examples.rb +++ b/spec/support/features/rss_shared_examples.rb @@ -6,7 +6,7 @@ end shared_examples "it has an RSS button with current_user's feed token" do it "shows the RSS button with current_user's feed token" do - expect(page).to have_css("a:has(.fa-rss)[href*='feed_token=#{user.feed_token}']") + expect(page).to have_css("a:has(.fa-rss)[href*='feed_token=#{user.feed_token}'], .js-rss-button[href*='feed_token=#{user.feed_token}']") end end @@ -18,6 +18,6 @@ end shared_examples "it has an RSS button without a feed token" do it "shows the RSS button without a feed token" do - expect(page).to have_css("a:has(.fa-rss):not([href*='feed_token'])") + expect(page).to have_css("a:has(.fa-rss):not([href*='feed_token']), .js-rss-button:not([href*='feed_token'])") end end |