kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Bring buttons style up to design spec

Browse source 
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.
This commit is contained in:
Scott Hampton 2019-07-11 10:06:09 +00:00 committed by Phil Hughes
parent 2d5b47a708
commit d97032ca0a
15 changed files with 102 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/stylesheets/framework/animations.scss
View file

@ -104,7 +104,7 @@
}
.btn {
@include transition(background-color, border-color, color, box-shadow);
@include transition(border-color);
}
.dropdown-menu-toggle,

136
app/assets/stylesheets/framework/buttons.scss
View file

@ -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;
> .icon {
color: $hover-text;
}
}
&:focus {
box-shadow: 0 0 4px 1px $blue-300;
}
&: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: $active-text;
&:not(:disabled):not(.disabled) {
&:hover {
box-shadow: inset 0 0 0 1px $hover-border, 0 2px 2px 0 $gl-btn-hover-shadow-light;
}
&:focus {
box-shadow: inset 0 2px 4px 0 rgba($black, 0.2);
box-shadow: inset 0 0 0 1px $hover-border, 0 0 4px 1px $blue-300;
}
&:hover,
&:focus {
background-color: $hover-background;
border-color: $hover-border;
color: $hover-text;
> .icon {
color: $hover-text;
}
}
&: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;
> .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;

17
app/assets/stylesheets/framework/dropdowns.scss
View file

@ -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;
}

4
app/assets/stylesheets/framework/variables.scss
View file

@ -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;

4
app/assets/stylesheets/pages/commits.scss
View file

@ -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;

4
app/assets/stylesheets/pages/issuable.scss
View file

@ -929,10 +929,6 @@
margin: 0;
}
}
.dropdown-toggle > .icon {
margin: 0 3px;
}
}
.right-sidebar-collapsed {

1
app/assets/stylesheets/pages/issues.scss
View file

@ -267,7 +267,6 @@ ul.related-merge-requests > li {
.fa-caret-down {
pointer-events: none;
color: inherit;
margin-left: 0;
}
}
}

1
app/assets/stylesheets/pages/note_form.scss
View file

@ -417,7 +417,6 @@ table {
i {
color: $white-light;
padding-right: 2px;
margin-top: 2px;
}

3
app/assets/stylesheets/pages/projects.scss
View file

@ -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 {

2
app/assets/stylesheets/pages/tree.scss
View file

@ -90,7 +90,7 @@
.add-to-tree {
vertical-align: top;
padding: 8px;
padding: $gl-bordered-btn-vert-padding;
svg {
top: 0;

2
app/helpers/dropdowns_helper.rb
View file

@ -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

2
app/views/projects/issues/import_csv/_button.html.haml
View file

@ -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')

8
app/views/shared/issuable/_feed_buttons.html.haml
View file

@ -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')

5
changelogs/unreleased/61145-fix-button-dimensions.yml Normal file
View file

@ -0,0 +1,5 @@
---
title: Updating button dimensions according to design spec
merge_request: 28545
author:
type: fixed

4
spec/support/features/rss_shared_examples.rb
View file

@ -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