Commit 33ccee23 authored by Dmitriy Zaporozhets's avatar Dmitriy Zaporozhets

Merge branch 'new-buttons-everywhere' into 'master'

Standartize buttons and fields size

Fixes #8069 and #8070

See merge request !2428
parents e47f0e56 f414928a
...@@ -137,11 +137,7 @@ ...@@ -137,11 +137,7 @@
.nav-block { .nav-block {
.controls { .controls {
float: right; float: right;
margin-top: 11px;
.btn {
padding: 7px 10px;
margin-top: 11px;
}
} }
} }
......
@mixin btn-default { @mixin btn-default {
@include border-radius(3px); @include border-radius(3px);
border-width: 1px; font-size: $gl-font-size;
border-style: solid;
font-size: 15px;
font-weight: 500; font-weight: 500;
line-height: 18px; padding: $gl-vert-padding $gl-padding;
padding: 11px $gl-padding;
letter-spacing: .4px;
&:focus, &:focus,
&:active { &:active {
...@@ -17,8 +13,6 @@ ...@@ -17,8 +13,6 @@
@mixin btn-middle { @mixin btn-middle {
@include btn-default; @include btn-default;
@include border-radius(3px);
padding: 11px 24px;
} }
@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) {
...@@ -74,16 +68,15 @@ ...@@ -74,16 +68,15 @@
@include btn-default; @include btn-default;
@include btn-white; @include btn-white;
&.btn-small,
&.btn-sm { &.btn-sm {
padding: 5px 10px; padding: 4px 10px;
} font-size: 13px;
line-height: 18px;
&.btn-nr {
padding: 7px 10px;
} }
&.btn-xs { &.btn-xs {
padding: 1px 5px; padding: 2px 5px;
} }
&.btn-success, &.btn-success,
...@@ -161,4 +154,40 @@ ...@@ -161,4 +154,40 @@
.btn-clipboard { .btn-clipboard {
border: none; border: none;
padding: 0 5px;
}
.input-group-btn {
.btn {
@include btn-gray;
@include btn-middle;
&:hover {
outline: none;
}
&:focus {
outline: none;
}
&:active {
outline: none;
}
&.btn-clipboard {
padding-left: 15px;
padding-right: 15px;
}
}
.active {
@include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
border: 1px solid #c6cacf !important;
background-color: #e4e7ed !important;
}
.btn-green {
@include btn-green
}
} }
...@@ -74,8 +74,6 @@ label { ...@@ -74,8 +74,6 @@ label {
.form-control { .form-control {
@include box-shadow(none); @include box-shadow(none);
height: 42px;
padding: 8px $gl-padding;
} }
.form-control-inline { .form-control-inline {
......
...@@ -3,8 +3,8 @@ ...@@ -3,8 +3,8 @@
.select2-choice { .select2-choice {
background: #FFF; background: #FFF;
border-color: #DDD; border-color: #DDD;
height: 42px; height: 36px;
padding: 8px $gl-padding; padding: 6px $gl-padding;
font-size: $gl-font-size; font-size: $gl-font-size;
line-height: 1.42857143; line-height: 1.42857143;
......
...@@ -46,7 +46,7 @@ $font-size-base: $gl-font-size; ...@@ -46,7 +46,7 @@ $font-size-base: $gl-font-size;
// //
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start). //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
$padding-base-vertical: 9px; $padding-base-vertical: $gl-vert-padding;
$padding-base-horizontal: $gl-padding; $padding-base-horizontal: $gl-padding;
$component-active-color: #fff; $component-active-color: #fff;
$component-active-bg: $brand-info; $component-active-bg: $brand-info;
......
...@@ -22,6 +22,7 @@ $header-height: 58px; ...@@ -22,6 +22,7 @@ $header-height: 58px;
$fixed-layout-width: 1280px; $fixed-layout-width: 1280px;
$gl-gray: #5a5a5a; $gl-gray: #5a5a5a;
$gl-padding: 16px; $gl-padding: 16px;
$gl-vert-padding: 6px;
$gl-padding-top:10px; $gl-padding-top:10px;
$gl-avatar-size: 46px; $gl-avatar-size: 46px;
$secondary-text: #7f8fa4; $secondary-text: #7f8fa4;
......
...@@ -21,14 +21,6 @@ ...@@ -21,14 +21,6 @@
} }
} }
.diff-controls {
.btn {
padding: 0px 10px;
font-size: 13px;
line-height: 28px;
}
}
.commit-short-id { .commit-short-id {
font-family: $monospace_font; font-family: $monospace_font;
font-size: smaller; font-size: smaller;
......
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
.project-issuable-filter { .project-issuable-filter {
.controls { .controls {
float: right; float: right;
margin-top: 7px; margin-top: 11px;
} }
.nav-links { .nav-links {
...@@ -95,7 +95,7 @@ ...@@ -95,7 +95,7 @@
.cross-project-reference { .cross-project-reference {
color: $gl-link-color; color: $gl-link-color;
span { span {
white-space: nowrap; white-space: nowrap;
width: 85%; width: 85%;
......
...@@ -83,9 +83,13 @@ ...@@ -83,9 +83,13 @@
.form-control { .form-control {
background: #FFF; background: #FFF;
font-size: 14px; font-size: 14px;
height: 42px;
margin-left: -1px; margin-left: -1px;
} }
.btn-clipboard {
border: 1px solid $border-color;
padding: 6px $gl-padding;
}
} }
.visibility-level-label { .visibility-level-label {
...@@ -162,8 +166,8 @@ ...@@ -162,8 +166,8 @@
border-style: solid; border-style: solid;
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
line-height: 20px; line-height: 13px;
padding: 11px 16px; padding: $gl-vert-padding $gl-padding;
letter-spacing: .4px; letter-spacing: .4px;
padding: 10px; padding: 10px;
text-align: center; text-align: center;
...@@ -227,48 +231,6 @@ ...@@ -227,48 +231,6 @@
} }
} }
.projects-search-form {
.input-group .form-control {
height: 42px;
}
}
.input-group-btn {
.btn {
@include btn-gray;
@include btn-middle;
&:hover {
outline: none;
}
&:focus {
outline: none;
}
&:active {
outline: none;
}
&.btn-clipboard {
padding-left: 15px;
padding-right: 15px;
}
}
.active {
@include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
border: 1px solid #c6cacf !important;
background-color: #e4e7ed !important;
}
.btn-green {
@include btn-green
}
}
.split-repo-buttons { .split-repo-buttons {
display: inline-table; display: inline-table;
margin: 0 12px 0 12px; margin: 0 12px 0 12px;
...@@ -378,9 +340,9 @@ ...@@ -378,9 +340,9 @@
.breadcrumb.repo-breadcrumb { .breadcrumb.repo-breadcrumb {
padding: 0; padding: 0;
line-height: 42px;
background: transparent; background: transparent;
border: none; border: none;
line-height: 42px;
margin: 0; margin: 0;
> li + li:before { > li + li:before {
...@@ -407,12 +369,12 @@ ...@@ -407,12 +369,12 @@
width: 50%; width: 50%;
display: inline-block; display: inline-block;
float: right; float: right;
padding-top: 7px; padding-top: 11px;
text-align: right; text-align: right;
.btn-green { .btn-green {
margin-top: -2px;
margin-left: 10px; margin-left: 10px;
float: right;
} }
} }
......
...@@ -17,7 +17,7 @@ module ButtonHelper ...@@ -17,7 +17,7 @@ module ButtonHelper
def clipboard_button(data = {}) def clipboard_button(data = {})
content_tag :button, content_tag :button,
icon('clipboard'), icon('clipboard'),
class: 'btn btn-xs btn-clipboard', class: 'btn btn-clipboard',
data: data, data: data,
type: :button type: :button
end end
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment