Merge pull request #2117 from koenpunt/scss-cleanup

Scss cleanup
This commit is contained in:
Dmitriy Zaporozhets 2012-11-29 06:51:27 -08:00
commit 83f2a387d6
31 changed files with 825 additions and 846 deletions

View file

@ -374,12 +374,12 @@ p.time {
height: 100%; height: 100%;
} }
.bar-success { .bar-success {
@include linear-gradient(#62C462, #51A351);
background-color: #468847; background-color: #468847;
@include bg-gradient(#62C462, #51A351);
} }
.bar-danger { .bar-danger {
@include linear-gradient(#EE5F5B, #BD362F);
background-color: #B94A48; background-color: #B94A48;
@include bg-gradient(#EE5F5B, #BD362F);
} }
} }
.upvotes { .upvotes {
@ -450,7 +450,7 @@ p.time {
background: #E3E5EA; background: #E3E5EA;
padding: 5px; padding: 5px;
margin-top: 5px; margin-top: 5px;
border-radius: 5px; @include border-radius(5px);
text-shadow: none; text-shadow: none;
color: #999; color: #999;
line-height: 16px; line-height: 16px;

View file

@ -0,0 +1,7 @@
@font-face{
font-family: Korolev;
src: font-url('korolev-medium-compressed.otf');
}
/** Typo **/
$monospace: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono', 'lucida console', monospace;

View file

@ -16,7 +16,7 @@
@extend .prepend-top-20; @extend .prepend-top-20;
@extend .append-bottom-20; @extend .append-bottom-20;
border-width: 1px; border-width: 1px;
@include solid_shade; @include solid-shade;
img { max-width: 100%; } img { max-width: 100%; }
@ -41,7 +41,7 @@
} }
.middle_box_content { .middle_box_content {
border-radius:0; @include border-radius(0);
border: none; border: none;
font-size: 12px; font-size: 12px;
background-color: #f5f5f5; background-color: #f5f5f5;
@ -61,9 +61,12 @@
.ui-box { .ui-box {
background: #F9F9F9; background: #F9F9F9;
margin-bottom: 25px; margin-bottom: 25px;
@include round-borders-all(4px);
border: 1px solid #eaeaea;
@include border-radius(4px);
border-color: #CCC; border-color: #CCC;
@include solid_shade; @include solid-shade;
&.white { &.white {
background: #fff; background: #fff;
@ -75,8 +78,9 @@
h5, .title { h5, .title {
padding: 0 10px; padding: 0 10px;
@include round-borders-top(4px); @include border-radius(4px 4px 0 0);
@include bg-gray-gradient; @include bg-gray-gradient;
border-top: 1px solid #eaeaea;
border-bottom: 1px solid #bbb; border-bottom: 1px solid #bbb;
&.small { &.small {
@ -96,7 +100,7 @@
padding: 3px 0; padding: 3px 0;
&.active a { background-color: $style_color; } &.active a { background-color: $style_color; }
a { a {
border-radius:7px; @include border-radius(7px);
} }
} }
} }
@ -104,7 +108,7 @@
.bottom { .bottom {
@include bg-gray-gradient; @include bg-gray-gradient;
@include round-borders-bottom(4px); @include border-radius(0 0 4px 4px);
border-bottom: none; border-bottom: none;
border-top: 1px solid #bbb; border-top: 1px solid #bbb;
} }
@ -137,12 +141,12 @@
li, .wll { li, .wll {
padding: 10px; padding: 10px;
&:first-child { &:first-child {
@include round-borders-top(4px); @include border-radius(4px 4px 0 0);
border-top: none; border-top: none;
} }
&:last-child { &:last-child {
@include round-borders-bottom(4px); @include border-radius(0 0 4px 4px);
border: none; border: none;
} }
} }

View file

@ -1,5 +1,5 @@
.btn { .btn {
@include bg-gradient(#f7f7f7, #d5d5d5); @include linear-gradient(#f7f7f7, #d5d5d5);
border-color: #aaa; border-color: #aaa;
&:hover { &:hover {
@include bg-gray-gradient; @include bg-gray-gradient;
@ -9,12 +9,12 @@
&.primary { &.primary {
background: #2a79A3; background: #2a79A3;
@include bg-gradient(#47A7b7, #2585b5); @include linear-gradient(#47A7b7, #2585b5);
border-color: #2A79A3; border-color: #2A79A3;
color: #fff; color: #fff;
text-shadow: 0 1px 1px #268; text-shadow: 0 1px 1px #268;
&:hover { &:hover {
background:$blue_link; background: $primary_color;
color: #fff; color: #fff;
} }
@ -26,11 +26,11 @@
&.btn-info { &.btn-info {
background: #5aB9C3; background: #5aB9C3;
border-color: $blue_link; border-color: $primary_color;
color: #fff; color: #fff;
text-shadow: 0 1px 1px #268; text-shadow: 0 1px 1px #268;
&:hover { &:hover {
background:$blue_link; background: $primary_color;
color: #fff; color: #fff;
} }

View file

@ -5,7 +5,7 @@
.file_holder { .file_holder {
border: 1px solid #BBB; border: 1px solid #BBB;
margin-bottom: 1em; margin-bottom: 1em;
@include solid_shade; @include solid-shade;
.file_title { .file_title {
border-bottom: 1px solid #bbb; border-bottom: 1px solid #bbb;
@ -95,8 +95,8 @@
pre { pre {
padding: 0; padding: 0;
margin: 0; margin: 0;
background: none;
border: none; border: none;
border-radius: 0;
} }
} }
} }

View file

@ -1,7 +1,7 @@
table { table {
@extend .table; @extend .table;
@extend .table-striped; @extend .table-striped;
@include solid_shade; @include solid-shade;
border: 1px solid #bbb; border: 1px solid #bbb;
width: 100%; width: 100%;

View file

@ -38,7 +38,7 @@ a {
color: $link_color; color: $link_color;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
color: $blue_link; color: $primary_color;
} }
&.btn { &.btn {

View file

@ -65,7 +65,5 @@
} }
.shadow { .shadow {
-webkit-box-shadow:0 5px 15px #000; @include box-shadow(0 5px 15px #000);
-moz-box-shadow:0 5px 15px #000;
box-shadow:0 5px 15px #000;
} }

View file

@ -3,103 +3,30 @@ $baseFontSize: 13px !default;
$baseLineHeight: 18px !default; $baseLineHeight: 18px !default;
// BOOTSTRAP // BOOTSTRAP
// ------------------
@import "bootstrap"; @import "bootstrap";
// BOOTSTRAP RESPONSIVE
// ------------------
@import "bootstrap/responsive-utilities"; @import "bootstrap/responsive-utilities";
@import "bootstrap/responsive-1200px-min"; @import "bootstrap/responsive-1200px-min";
// FONT AWESOME // FONT AWESOME
@import 'font-awesome'; @import "font-awesome";
/** GitLab colors **/ /**
$link_color: #3A89A3; * Variables
$blue_link: #2FA0BB; * Contains colors
$style_color: #474D57; */
$hover: #D9EDF7; @import "variables.scss";
$hover_border: #ADF;
/** GitLab Fonts **/ /**
@font-face { font-family: Korolev; src: font-url('korolev-medium-compressed.otf'); } * Custom fonts
$monospace: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono', 'lucida console', monospace; * Contains @font-face font Korolev and default $monotype
*/
@import "fonts.scss";
/** MIXINS **/ /**
@mixin shade { * General mixins.
-moz-box-shadow: 0 0 3px #ddd; * Contains rounded borders, gradients and shades
-webkit-box-shadow: 0 0 3px #ddd; */
box-shadow: 0 0 3px #ddd; @import "mixins.scss";
}
@mixin solid_shade {
-moz-box-shadow: 0 0 0 3px #f1f1f1;
-webkit-box-shadow: 0 0 0 3px #f1f1f1;
box-shadow: 0 0 0 3px #f1f1f1;
}
@mixin border-radius($radius) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
border-radius: $radius;
}
@mixin round-borders-bottom($radius) {
border-top: 1px solid #eaeaea;
-moz-border-radius-bottomright: $radius;
-moz-border-radius-bottomleft: $radius;
border-bottom-right-radius: $radius;
border-bottom-left-radius: $radius;
-webkit-border-bottom-left-radius: $radius;
-webkit-border-bottom-right-radius: $radius;
}
@mixin round-borders-top($radius) {
border-top: 1px solid #eaeaea;
-moz-border-radius-topright: $radius;
-moz-border-radius-topleft: $radius;
border-top-right-radius: $radius;
border-top-left-radius: $radius;
-webkit-border-top-left-radius: $radius;
-webkit-border-top-right-radius: $radius;
}
@mixin round-borders-all($radius) {
border: 1px solid #eaeaea;
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
border-radius: $radius;
}
@mixin bg-gradient($from, $to) {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from($from), to($to));
background-image: -webkit-linear-gradient($from, $to);
background-image: -moz-linear-gradient($from, $to);
background-image: -o-linear-gradient($from, $to);
}
@mixin bg-light-gray-gradient {
background:#f1f1f1;
background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #f5f5f5), to(#e1e1e1));
background-image: -webkit-linear-gradient(#f5f5f5 6.6%, #e1e1e1);
background-image: -moz-linear-gradient(#f5f5f5 6.6%, #e1e1e1);
background-image: -o-linear-gradient(#f5f5f5 6.6%, #e1e1e1);
}
@mixin bg-gray-gradient {
background:#eee;
background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf));
background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf);
background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf);
background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf);
}
@mixin bg-dark-gray-gradient {
background:#eee;
background-image: -webkit-linear-gradient(#e9e9e9, #d7d7d7);
background-image: -moz-linear-gradient(#e9e9e9, #d7d7d7);
background-image: -o-linear-gradient(#e9e9e9, #d7d7d7);
}
/** /**
* Header of application. * Header of application.

View file

@ -0,0 +1,60 @@
/**
* Generic mixins
*/
@mixin box-shadow($shadow) {
-webkit-box-shadow: $shadow;
-moz-box-shadow: $shadow;
-ms-box-shadow: $shadow;
-o-box-shadow: $shadow;
box-shadow: $shadow;
}
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
-o-border-radius: $radius;
border-radius: $radius;
}
@mixin linear-gradient($from, $to) {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from($from), to($to));
background-image: -webkit-linear-gradient($from, $to);
background-image: -moz-linear-gradient($from, $to);
background-image: -o-linear-gradient($from, $to);
}
/**
* Prefilled mixins
* Mixins with fixed values
*/
@mixin bg-light-gray-gradient {
background: #f1f1f1;
background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #f5f5f5), to(#e1e1e1));
background-image: -webkit-linear-gradient(#f5f5f5 6.6%, #e1e1e1);
background-image: -moz-linear-gradient(#f5f5f5 6.6%, #e1e1e1);
background-image: -o-linear-gradient(#f5f5f5 6.6%, #e1e1e1);
}
@mixin bg-gray-gradient {
background: #eee;
background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf));
background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf);
background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf);
background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf);
}
@mixin bg-dark-gray-gradient {
background: #eee;
background-image: -webkit-linear-gradient(#e9e9e9, #d7d7d7);
background-image: -moz-linear-gradient(#e9e9e9, #d7d7d7);
background-image: -o-linear-gradient(#e9e9e9, #d7d7d7);
}
@mixin shade {
@include box-shadow(0 0 3px #ddd);
}
@mixin solid-shade {
@include box-shadow(0 0 0 3px #f1f1f1);
}

View file

@ -33,9 +33,7 @@
.chzn-container { .chzn-container {
.chzn-search { .chzn-search {
input:focus { input:focus {
-webkit-box-shadow: none; @include box-shadow(none);
-moz-box-shadow: none;
box-shadow: none;
} }
} }
@ -43,7 +41,7 @@
margin: 7px 0; margin: 7px 0;
min-width: 200px; min-width: 200px;
border: 1px solid #bbb; border: 1px solid #bbb;
border-radius:0; @include border-radius(0);
.chzn-results { .chzn-results {
margin-top: 5px; margin-top: 5px;
@ -55,7 +53,7 @@
padding: 8px; padding: 8px;
} }
.active-result { .active-result {
border-radius: 0; @include border-radius(0);
&.highlighted { &.highlighted {
background: $hover; background: $hover;

View file

@ -79,6 +79,7 @@
color: #555; color: #555;
border-bottom: 1px solid #CCC; border-bottom: 1px solid #CCC;
background: #eee; background: #eee;
// TODO Replace with linear-gradient mixin
background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf)); background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf));
background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf); background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf);
background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf); background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf);
@ -294,9 +295,8 @@
} }
.label_commit { .label_commit {
@include round-borders-all(4px); @include border-radius(4px);
padding: 2px 4px; padding: 2px 4px;
border:none;
font-size: 13px; font-size: 13px;
background: #474D57; background: #474D57;
color: #fff; color: #fff;

View file

@ -1,7 +1,7 @@
.file-editor { .file-editor {
#editor{ #editor{
border: none; border: none;
border-radius: 0; @include border-radius(0);
height: 500px; height: 500px;
margin: 0; margin: 0;
padding: 0; padding: 0;

View file

@ -132,12 +132,15 @@ header {
left: 0; left: 0;
bottom: 0; bottom: 0;
float: right; float: right;
border-radius: 5px; @include border-radius(5px);
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 0; border-bottom: 0;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.15)), to(rgba(0, 0, 0, 0.25))), -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, 0.1)), color-stop(0.501, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0))); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.15)), to(rgba(0, 0, 0, 0.25))),
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), -moz-linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0)); -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, 0.1)), color-stop(0.501, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0)));
background: linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0)); background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)),
-moz-linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
background: linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)),
linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
-webkit-background-origin: border-box; -webkit-background-origin: border-box;
-moz-background-origin: border; -moz-background-origin: border;
background-origin: border-box; } } } background-origin: border-box; } } }
@ -149,7 +152,7 @@ header {
display: block; } } display: block; } }
.account-links { .account-links {
border-radius: 5px; @include border-radius(5px);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
position: relative; position: relative;
&:before { &:before {
@ -197,20 +200,13 @@ header {
.account-links a { .account-links a {
&:first-child { &:first-child {
-webkit-border-top-left-radius: 5px; @include border-radius(5px 5px 0 0);
-webkit-border-top-right-radius: 5px; }
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px; }
&:last-child { &:last-child {
-webkit-border-bottom-right-radius: 5px; @include border-radius(0 0 5px 5px);
-webkit-border-bottom-left-radius: 5px; border-bottom: 0;
-moz-border-radius-bottomright: 5px; }
-moz-border-radius-bottomleft: 5px; }
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom: 0; } }

View file

@ -139,7 +139,7 @@ input.check_all_issues {
border: none; border: none;
box-shadow: none; box-shadow: none;
.ui-datepicker-header { .ui-datepicker-header {
@include solid_shade; @include solid-shade;
margin-bottom: 10px; margin-bottom: 10px;
border: 1px solid #bbb; border: 1px solid #bbb;
} }

View file

@ -7,7 +7,7 @@ body.login-page{
.login-box{ .login-box{
width: 304px; width: 304px;
position: relative; position: relative;
border-radius: 5px; @include border-radius(5px);
margin: auto; margin: auto;
padding: 20px; padding: 20px;
background: white; background: white;
@ -18,25 +18,15 @@ body.login-page{
display: block; display: block;
} }
.login-box input.text{background-color: #f1f1f1; font-size: 16px; border-radius: 0; padding: 14px 10px; width: 280px} .login-box input.text{background-color: #f1f1f1; font-size: 16px; @include border-radius(0); padding: 14px 10px; width: 280px}
.login-box input.text.top{ .login-box input.text.top{
-webkit-border-top-left-radius: 5px; @include border-radius(5px 5px 0 0);
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
margin-bottom: 0px; margin-bottom: 0px;
} }
.login-box input.text.bottom{ .login-box input.text.bottom{
-webkit-border-bottom-right-radius: 5px; @include border-radius(0 0 5px 5px);
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border-top: 0; border-top: 0;
margin-bottom: 20px; margin-bottom: 20px;
} }

View file

@ -34,7 +34,6 @@
border: 1px solid #ADA; border: 1px solid #ADA;
padding: 2px; padding: 2px;
@include border-radius(5px); @include border-radius(5px);
border-radius: 5px;
background: #CEB; background: #CEB;
.accept_merge_request { .accept_merge_request {
@ -85,7 +84,7 @@ li.merge_request {
} }
.label_branch { .label_branch {
@include round-borders-all(4px); @include border-radius(4px);
padding: 2px 4px; padding: 2px 4px;
border: none; border: none;
font-size: 14px; font-size: 14px;

View file

@ -3,7 +3,7 @@
* *
*/ */
ul.main_menu { ul.main_menu {
border-radius: 4px; @include border-radius(4px);
margin: auto; margin: auto;
margin: 30px 0; margin: 30px 0;
border: 1px solid #BBB; border: 1px solid #BBB;
@ -26,8 +26,7 @@ ul.main_menu {
color: #777; color: #777;
background: #f2f2f2; background: #f2f2f2;
border-top: 1px solid #CCC; border-top: 1px solid #CCC;
border-radius: 8px; @include border-radius(8px);
-moz-border-radius: 8px;
} }
.label { .label {
background: $hover; background: $hover;
@ -44,12 +43,7 @@ ul.main_menu {
border-bottom: 2px solid #CFCFCF; border-bottom: 2px solid #CFCFCF;
&:first-child{ &:first-child{
-webkit-border-top-left-radius: 4px; @include border-radius(5px 0 0 5px);
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-bottomleft: 4px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-left: 0; border-left: 0;
} }
@ -57,7 +51,7 @@ ul.main_menu {
background-color: #D5D5D5; background-color: #D5D5D5;
border-right: 1px solid #BBB; border-right: 1px solid #BBB;
border-left: 1px solid #BBB; border-left: 1px solid #BBB;
border-radius: 0 0 1px 1px; @include border-radius(0 0 1px 1px);
&:first-child{ &:first-child{
border-bottom: none; border-bottom: none;
border-left: none; border-left: none;

View file

@ -105,7 +105,8 @@ tr.line_notes_row {
padding: 7px 10px; padding: 7px 10px;
} }
a.line_note_reply_link { a.line_note_reply_link {
@include round-borders-all(4px); border: 1px solid #eaeaea;
@include border-radius(4px);
padding: 3px 10px; padding: 3px 10px;
margin-left: 5px; margin-left: 5px;
color: white; color: white;

View file

@ -31,7 +31,7 @@
vertical-align: middle; vertical-align: middle;
a { a {
&:hover { &:hover {
color:$blue_link; color: $primary_color;
} }
} }

View file

@ -12,7 +12,7 @@
color: $link_color; color: $link_color;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
color: $blue_link; color: $primary_color;
} }
} }

View file

@ -0,0 +1,5 @@
/** Colors **/
$primary_color: #2FA0BB;
$link_color: #3A89A3;
$style_color: #474D57;
$hover: #D9EDF7;