From 2acb030beaf4a04969340d7d0ede12992f8dd6fe Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Wed, 7 Oct 2015 17:21:15 +0200 Subject: [PATCH] Refactor button css and do some cleanup Signed-off-by: Dmitriy Zaporozhets --- app/assets/stylesheets/base/gl_variables.scss | 4 +- app/assets/stylesheets/base/layout.scss | 1 + app/assets/stylesheets/generic/buttons.scss | 129 ++++++++---------- app/assets/stylesheets/generic/forms.scss | 14 +- app/assets/stylesheets/generic/selects.scss | 10 +- app/assets/stylesheets/pages/projects.scss | 15 +- 6 files changed, 75 insertions(+), 98 deletions(-) diff --git a/app/assets/stylesheets/base/gl_variables.scss b/app/assets/stylesheets/base/gl_variables.scss index 7378d404008..18632da4f2a 100644 --- a/app/assets/stylesheets/base/gl_variables.scss +++ b/app/assets/stylesheets/base/gl_variables.scss @@ -22,8 +22,8 @@ $brand-info: $gl-info; $brand-warning: $gl-warning; $brand-danger: $gl-danger; -$border-radius-base: 3px !default; -$border-radius-large: 5px !default; +$border-radius-base: 2px !default; +$border-radius-large: 2px !default; $border-radius-small: 2px !default; diff --git a/app/assets/stylesheets/base/layout.scss b/app/assets/stylesheets/base/layout.scss index b91c15d8910..c7b3b60e769 100644 --- a/app/assets/stylesheets/base/layout.scss +++ b/app/assets/stylesheets/base/layout.scss @@ -5,6 +5,7 @@ html { body { padding-top: $header-height; + text-rendering: geometricPrecision; } } diff --git a/app/assets/stylesheets/generic/buttons.scss b/app/assets/stylesheets/generic/buttons.scss index 50c3de089f3..086a056bbf5 100644 --- a/app/assets/stylesheets/generic/buttons.scss +++ b/app/assets/stylesheets/generic/buttons.scss @@ -1,10 +1,6 @@ -body { - text-rendering: geometricPrecision; -} - @mixin btn-default { @include border-radius(2px); - + border-width: 1px; border-style: solid; text-transform: uppercase; @@ -13,17 +9,17 @@ body { line-height: 18px; padding: 11px 16px; letter-spacing: .4px; - + &:hover { border-width: 1px; border-style: solid; } - + &:focus { border-width: 1px; border-style: solid; } - + &:active { @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12)); border-width: 1px; @@ -33,7 +29,7 @@ body { @mixin btn-middle { @include border-radius(2px); - + border-width: 1px; border-style: solid; text-transform: uppercase; @@ -42,22 +38,22 @@ body { line-height: 18px; padding: 11px 24px; letter-spacing: .4px; - + &:hover { border-width: 1px; border-style: solid; } - + &:focus { border-width: 1px; border-style: solid; } - + &:active { @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12)); border-width: 1px; border-style: solid; - } + } } @@ -65,118 +61,113 @@ body { background-color: #28b061; border: 1px solid #26a65c; color: #fff; - - &:hover { - background-color: #26ab5d; - border: 1px solid #229954; - color: #fff; - } - - &:focus { - background-color: #26ab5d; - border: 1px solid #229954; - color: #fff; - } - - &:active { - @include box-shadow (inset 0 0 4px rgba(0, 0, 0, 0.12)); - - background-color: #23a158 !important; - border: 1px solid #229954 !important; - color: #fff !important; - } -} -/*Butons*/ + &:hover { + background-color: #26ab5d; + border: 1px solid #229954; + color: #fff; + } + + &:focus { + background-color: #26ab5d; + border: 1px solid #229954; + color: #fff; + } + + &:active { + @include box-shadow (inset 0 0 4px rgba(0, 0, 0, 0.12)); + + background-color: #23a158 !important; + border: 1px solid #229954 !important; + color: #fff !important; + } +} -@mixin btn-project { +@mixin btn-gray { background-color: #f0f2f5; border-color: #dce0e5; color: #313236; - + &:hover { border-color:#dce0e5; background-color: #ebeef2; color: #313236; } - + &:focus { border-color: #dce0e5; background-color: #ebeef2; color: #313236; } - + &:active { - @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12)); - - color: #313236 !important; - border-color: #c6cacf !important; - background-color: #e4e7ed !important; + @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12)); + + color: #313236 !important; + border-color: #c6cacf !important; + background-color: #e4e7ed !important; } } -@mixin btn-light { +@mixin btn-white { background-color: #fff; border-color: #dce0e5; color: #313236; - + &:hover { border-color:#dce0e5; background-color: #f0f2f5; color: #313236; } - + &:focus { border-color: #dce0e5; background-color: #f0f2f5; color: #313236; } - + &:active { - @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12)); - - color: #313236 !important; - border-color: #c6cacf !important; - background-color: #e4e7ed !important; + @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12)); + + color: #313236 !important; + border-color: #c6cacf !important; + background-color: #e4e7ed !important; } } -@mixin btn-remove { +@mixin btn-red { background-color: #f72e60; border-color: #ee295a; - + &:hover { background-color: #e82757; border-color: #e32555; } - + &:focus { background-color: #e82757; border-color: #e32555; } - + &:active { @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12)); background-color: #d42450 !important; border-color: #e12554 !important; } - } -.btn-info { +.btn { @include btn-default; - @include btn-project; -} + @include btn-white; -.btn-success { - @include btn-default; - @include btn-green; - -} + &.btn-success { + @include btn-green; + } -.btn { - @include btn-default; + &.btn-gray { + @include btn-gray; + } &.btn-new { @extend .btn-success; @@ -264,4 +255,4 @@ body { color: #fff; } } -} \ No newline at end of file +} diff --git a/app/assets/stylesheets/generic/forms.scss b/app/assets/stylesheets/generic/forms.scss index 98a7c3ad8ac..0edfe24f195 100644 --- a/app/assets/stylesheets/generic/forms.scss +++ b/app/assets/stylesheets/generic/forms.scss @@ -29,9 +29,6 @@ input[type='text'].danger { border-top: 1px solid $border-color; } -@media (min-width: $screen-sm-min) { -} - label { &.control-label { @extend .col-sm-2; @@ -84,20 +81,13 @@ label { .form-group .control-label { font-weight: normal; - font-color: #313236 !important; -} - -.form-control { - @include border-radius (2px); } -.form-control::-webkit-input-placeholder{ - color:#7f8fa4; +.form-control::-webkit-input-placeholder { + color: #7f8fa4; } .input-group { - @include border-radius (2px); - .input-group-addon { background-color: #f7f8fa; } diff --git a/app/assets/stylesheets/generic/selects.scss b/app/assets/stylesheets/generic/selects.scss index 633dfea5228..cba621635b6 100644 --- a/app/assets/stylesheets/generic/selects.scss +++ b/app/assets/stylesheets/generic/selects.scss @@ -26,13 +26,13 @@ .select2-drop { @include box-shadow(rgba(76, 86, 103, 0.247059) 0px 0px 1px 0px, rgba(31, 37, 50, 0.317647) 0px 2px 18px 0px); @include border-radius (0px); - - padding: 16px 20px; + + padding: 16px; border: none !important; } .select2-results .select2-result-label { - padding: 16px 20px; + padding: 16px; } .select2-drop{ @@ -142,5 +142,5 @@ } .ajax-users-dropdown { - min-width: 225px !important; -} \ No newline at end of file + min-width: 250px !important; +} diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 38b17be7980..c36f5a394d8 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -18,10 +18,6 @@ } } -.btn, .commits-compare-switch { - @include btn-light; -} - .project-edit-content { padding: 7px; } @@ -100,8 +96,7 @@ margin-bottom: 0px; .btn { - @include btn-project; - @include btn-default; + @include btn-gray; .count { display: inline-block; @@ -161,7 +156,7 @@ .input-group-btn { .btn { - @include btn-project; + @include btn-gray; @include btn-middle; &:hover { @@ -195,7 +190,7 @@ margin: 0 12px 0 12px; .btn{ - @include btn-project; + @include btn-gray; @include btn-default; } @@ -390,7 +385,7 @@ table.table.protected-branches-list tr.no-border { .nav > li > a { @include btn-default; - @include btn-project; + @include btn-gray; background-color: transparent; border: 1px solid #f7f8fa; @@ -450,7 +445,7 @@ pre.light-well { .btn-remove { @include btn-middle; - @include btn-remove; + @include btn-red; float: left !important; } -- GitLab