From f414928a54aebddbf73f0e92ccf96a09ad1b6cb4 Mon Sep 17 00:00:00 2001
From: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
Date: Thu, 14 Jan 2016 13:59:28 +0100
Subject: [PATCH] Standartize buttons and fields size
Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
---
app/assets/stylesheets/framework/blocks.scss | 6 +-
app/assets/stylesheets/framework/buttons.scss | 57 +++++++++++++-----
app/assets/stylesheets/framework/forms.scss | 2 -
app/assets/stylesheets/framework/selects.scss | 4 +-
.../framework/tw_bootstrap_variables.scss | 2 +-
.../stylesheets/framework/variables.scss | 1 +
app/assets/stylesheets/pages/diff.scss | 8 ---
app/assets/stylesheets/pages/issuable.scss | 4 +-
app/assets/stylesheets/pages/projects.scss | 58 ++++---------------
app/helpers/button_helper.rb | 2 +-
10 files changed, 61 insertions(+), 83 deletions(-)
diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index 8c1bbff8201..d0f5d33bf4d 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -137,11 +137,7 @@
.nav-block {
.controls {
float: right;
-
- .btn {
- padding: 7px 10px;
- margin-top: 11px;
- }
+ margin-top: 11px;
}
}
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 8ee2a9c9886..703a13d5906 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -1,12 +1,8 @@
@mixin btn-default {
@include border-radius(3px);
- border-width: 1px;
- border-style: solid;
- font-size: 15px;
+ font-size: $gl-font-size;
font-weight: 500;
- line-height: 18px;
- padding: 11px $gl-padding;
- letter-spacing: .4px;
+ padding: $gl-vert-padding $gl-padding;
&:focus,
&:active {
@@ -17,8 +13,6 @@
@mixin btn-middle {
@include btn-default;
- @include border-radius(3px);
- padding: 11px 24px;
}
@mixin btn-color($light, $border-light, $normal, $border-normal, $dark, $border-dark, $color) {
@@ -74,16 +68,15 @@
@include btn-default;
@include btn-white;
+ &.btn-small,
&.btn-sm {
- padding: 5px 10px;
- }
-
- &.btn-nr {
- padding: 7px 10px;
+ padding: 4px 10px;
+ font-size: 13px;
+ line-height: 18px;
}
&.btn-xs {
- padding: 1px 5px;
+ padding: 2px 5px;
}
&.btn-success,
@@ -155,4 +148,40 @@
.btn-clipboard {
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
+ }
}
diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index 032d343df44..ed0a37d3cc5 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -74,8 +74,6 @@ label {
.form-control {
@include box-shadow(none);
- height: 42px;
- padding: 8px $gl-padding;
}
.wiki-content {
diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index af145191bc8..3ee3443e349 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -3,8 +3,8 @@
.select2-choice {
background: #FFF;
border-color: #DDD;
- height: 42px;
- padding: 8px $gl-padding;
+ height: 36px;
+ padding: 6px $gl-padding;
font-size: $gl-font-size;
line-height: 1.42857143;
diff --git a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
index 63868a34e2a..cd0621cdbf3 100644
--- a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
+++ b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
@@ -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).
-$padding-base-vertical: 9px;
+$padding-base-vertical: $gl-vert-padding;
$padding-base-horizontal: $gl-padding;
$component-active-color: #fff;
$component-active-bg: $brand-info;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index d0ff3248ce1..85ecdddda79 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -22,6 +22,7 @@ $header-height: 58px;
$fixed-layout-width: 1280px;
$gl-gray: #5a5a5a;
$gl-padding: 16px;
+$gl-vert-padding: 6px;
$gl-padding-top:10px;
$gl-avatar-size: 46px;
$secondary-text: #7f8fa4;
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 685e7697237..1e2b8b51827 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -21,14 +21,6 @@
}
}
- .diff-controls {
- .btn {
- padding: 0px 10px;
- font-size: 13px;
- line-height: 28px;
- }
- }
-
.commit-short-id {
font-family: $monospace_font;
font-size: smaller;
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 7ab77550496..55e834947d1 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -27,7 +27,7 @@
.project-issuable-filter {
.controls {
float: right;
- margin-top: 7px;
+ margin-top: 11px;
}
.nav-links {
@@ -95,7 +95,7 @@
.cross-project-reference {
color: $gl-link-color;
-
+
span {
white-space: nowrap;
width: 85%;
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index bd5f96a87ef..4fabd765537 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -83,9 +83,13 @@
.form-control {
background: #FFF;
font-size: 14px;
- height: 42px;
margin-left: -1px;
}
+
+ .btn-clipboard {
+ border: 1px solid $border-color;
+ padding: 6px $gl-padding;
+ }
}
.visibility-level-label {
@@ -162,8 +166,8 @@
border-style: solid;
font-size: 13px;
font-weight: 600;
- line-height: 20px;
- padding: 11px 16px;
+ line-height: 13px;
+ padding: $gl-vert-padding $gl-padding;
letter-spacing: .4px;
padding: 10px;
text-align: center;
@@ -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 {
display: inline-table;
margin: 0 12px 0 12px;
@@ -378,9 +340,9 @@
.breadcrumb.repo-breadcrumb {
padding: 0;
- line-height: 42px;
background: transparent;
border: none;
+ line-height: 42px;
margin: 0;
> li + li:before {
@@ -407,12 +369,12 @@
width: 50%;
display: inline-block;
float: right;
- padding-top: 7px;
+ padding-top: 11px;
text-align: right;
.btn-green {
- margin-top: -2px;
margin-left: 10px;
+ float: right;
}
}
diff --git a/app/helpers/button_helper.rb b/app/helpers/button_helper.rb
index ec0e3f409c1..d6c05843743 100644
--- a/app/helpers/button_helper.rb
+++ b/app/helpers/button_helper.rb
@@ -17,7 +17,7 @@ module ButtonHelper
def clipboard_button(data = {})
content_tag :button,
icon('clipboard'),
- class: 'btn btn-xs btn-clipboard',
+ class: 'btn btn-clipboard',
data: data,
type: :button
end
--
GitLab