Refactored Less StyleSheets

* started using less's shortucts
* removed vendor prefixes fron less file; use autoprefixer instead
* fixed spacing
* renamed all 0 values to 0
* converted all comments to silent comments
This commit is contained in:
Martin Charles 2014-05-28 17:50:19 -04:00
parent d7f150de7c
commit 21c9507068
3 changed files with 969 additions and 1052 deletions

View file

@ -3,4 +3,6 @@
Artur Rodrigues <arturhoo@gmail.com> Artur Rodrigues <arturhoo@gmail.com>
Brad Rydzewski <brad@drone.io> Brad Rydzewski <brad@drone.io>
Martin Charles <martincharles07@gmail.com>
Thomas Burke <burke@drone.io> Thomas Burke <burke@drone.io>

View file

@ -1,14 +1,14 @@
body { body {
background: #FFF; background: #FFF;
} }
.container { .container {
max-width: none !important; max-width: none !important;
width: 940px; width: 940px;
padding: 0px; padding: 0;
} }
.row { .row {
margin: 0px; margin: 0;
padding: 0px; padding: 0;
} }
.col-xs-1, .col-xs-1,
.col-xs-2, .col-xs-2,
@ -19,7 +19,7 @@
.col-xs-7, .col-xs-7,
.col-xs-8, .col-xs-8,
.col-xs-9 { .col-xs-9 {
padding: 0px; padding: 0;
} }
.row > .col-xs-2:last-child, .row > .col-xs-2:last-child,
.row > .col-xs-3:last-child, .row > .col-xs-3:last-child,
@ -36,7 +36,7 @@
margin-bottom: 0px; margin-bottom: 0px;
} }
.navbar-inverse .container { .navbar-inverse .container {
padding-right: 0px; padding-right: 0;
} }
.navbar-fixed-top, .navbar-fixed-top,
.navbar-fixed-bottom { .navbar-fixed-bottom {
@ -53,7 +53,7 @@
} }
.navbar .nav { .navbar .nav {
float: right; float: right;
margin-right: 0px; margin-right: 0;
} }
.navbar .nav > li > a { .navbar .nav > li > a {
padding: 18px 20px; padding: 18px 20px;
@ -63,10 +63,9 @@
margin: 0px; margin: 0px;
margin-top: 11px; margin-top: 11px;
border-radius: 4px; border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
background: #363839; background: #363839;
border: none; border: none;
-webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
text-shadow: none; text-shadow: none;
color: #DDD; color: #DDD;
@ -82,7 +81,6 @@
border: none; border: none;
position: relative; position: relative;
-webkit-box-shadow: none; -webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
.subhead h1 { .subhead h1 {
@ -110,8 +108,6 @@
width: 42px; width: 42px;
height: 42px; height: 42px;
border-radius: 50%; border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
} }
.subhead h1.user small { .subhead h1.user small {
color: #777; color: #777;
@ -119,14 +115,14 @@
} }
.subhead .container { .subhead .container {
position: relative; position: relative;
padding: 0px; padding: 0;
} }
.subhead .nav-tabs { .subhead .nav-tabs {
position: absolute; position: absolute;
right: 0px; right: 0;
bottom: 0px; bottom: 0;
margin: 0px; margin: 0;
padding: 0px; padding: 0;
border-bottom: none; border-bottom: none;
} }
.subhead .nav-tabs > li { .subhead .nav-tabs > li {
@ -136,11 +132,11 @@
color: #999; color: #999;
padding: 10px 20px; padding: 10px 20px;
line-height: 20px; line-height: 20px;
border: 0px; border: 0;
} }
.subhead .nav-tabs > li.active > a { .subhead .nav-tabs > li.active > a {
color: #777; color: #777;
border: 0px; border: 0;
} }
.nav-repos, .nav-repos,
.nav-branches { .nav-branches {
@ -154,11 +150,9 @@
padding: 5px 15px; padding: 5px 15px;
padding: 10px 15px; padding: 10px 15px;
border: none; border: none;
margin: 0px !IMPORTANT; margin: 0 !IMPORTANT;
font-size: 15px; font-size: 15px;
border-radius: 0px; border-radius: 0;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -200,7 +194,7 @@
.nav-repos li a, .nav-repos li a,
.nav-branches li a { .nav-branches li a {
padding: 12px 15px; padding: 12px 15px;
margin-bottom: 0px; margin-bottom: 0;
color: #777; color: #777;
} }
.nav-pills.nav-repos > li > a, .nav-pills.nav-repos > li > a,
@ -233,12 +227,12 @@
margin-top: -10px; margin-top: -10px;
} }
.alert .thumbnails { .alert .thumbnails {
margin: 0px; margin: 0;
padding: 0px; padding: 0;
} }
.alert .thumbnails li { .alert .thumbnails li {
margin: 0px; margin: 0;
padding: 0px; padding: 0;
margin-left: 20px; margin-left: 20px;
margin-top: 20px; margin-top: 20px;
} }
@ -261,9 +255,9 @@
font-weight: normal; font-weight: normal;
} }
.alert.alert-feed .thumbnails > li { .alert.alert-feed .thumbnails > li {
margin: 0px; margin: 0;
margin-left: 5px; margin-left: 5px;
padding: 0px; padding: 0;
display: inline-block; display: inline-block;
} }
.alert.alert-feed .thumbnails > li a { .alert.alert-feed .thumbnails > li a {
@ -272,8 +266,6 @@
} }
.alert.alert-feed .thumbnails > li a img { .alert.alert-feed .thumbnails > li a img {
border-radius: 50%; border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
width: 32px; width: 32px;
height: 32px; height: 32px;
margin-top: 10px; margin-top: 10px;
@ -296,11 +288,11 @@
} }
.commit-list { .commit-list {
list-style: none; list-style: none;
margin: 0px; margin: 0;
padding-left: 0px; padding-left: 0;
} }
.commit-list > li { .commit-list > li {
margin: 0px; margin: 0;
position: relative; position: relative;
padding: 25px 20px; padding: 25px 20px;
padding-left: 25px; padding-left: 25px;
@ -310,8 +302,6 @@
position: absolute; position: absolute;
right: 20px; right: 20px;
top: 20px; top: 20px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%; border-radius: 50%;
width: 48px; width: 48px;
height: 48px; height: 48px;
@ -359,8 +349,8 @@
.commit-list > li > h3 p { .commit-list > li > h3 p {
font-size: 14px; font-size: 14px;
color: #999; color: #999;
margin: 0px; margin: 0;
padding: 0px; padding: 0;
padding-top: 2px; padding-top: 2px;
display: block; display: block;
overflow: hidden; overflow: hidden;
@ -378,6 +368,7 @@
background: #BBB; background: #BBB;
color: #FFF; color: #FFF;
text-shadow: none; text-shadow: none;
-webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
padding: 10px 15px; padding: 10px 15px;
min-width: 75px; min-width: 75px;
@ -395,8 +386,6 @@
min-width: 48px; min-width: 48px;
max-width: 48px; max-width: 48px;
border-radius: 50%; border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
} }
.btn.btn-success, .btn.btn-success,
.btn.btn-Success { .btn.btn-Success {
@ -436,8 +425,6 @@
background: #f7f7f7; background: #f7f7f7;
width: 75px; width: 75px;
border-radius: 0px; border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
text-align: center; text-align: center;
font-size: 22px; font-size: 22px;
text-decoration: none; text-decoration: none;
@ -460,9 +447,6 @@
color: #FFF; color: #FFF;
display: inline-block; display: inline-block;
-webkit-animation: spin 1.5s infinite linear; -webkit-animation: spin 1.5s infinite linear;
-moz-animation: spin 1.5s infinite linear;
-ms-animation: spin 1.5s infinite linear;
-o-animation: spin 1.5s infinite linear;
animation: spin 1.5s infinite linear; animation: spin 1.5s infinite linear;
} }
.btn.btn-mini { .btn.btn-mini {
@ -482,31 +466,6 @@
line-height: 24px !IMPORTANT; line-height: 24px !IMPORTANT;
font-size: 14px !IMPORTANT; font-size: 14px !IMPORTANT;
} }
@-webkit-keyframes spin {
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes spin {
to {
-moz-transform: rotate(360deg);
}
}
@-ms-keyframes spin {
to {
-ms-transform: rotate(360deg);
}
}
@-o-keyframes spin {
to {
-o-transform: rotate(360deg);
}
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.btn.btn-None { .btn.btn-None {
background: rgba(81, 163, 81, 0.75); background: rgba(81, 163, 81, 0.75);
border-bottom: 2px solid #51a351; border-bottom: 2px solid #51a351;
@ -539,6 +498,18 @@
background: rgba(189, 54, 47, 0.9); background: rgba(189, 54, 47, 0.9);
border-bottom: 2px solid #bd362f; border-bottom: 2px solid #bd362f;
} }
@-webkit-keyframes spin {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.nav-pills > li a { .nav-pills > li a {
padding: 7px 15px; padding: 7px 15px;
color: #777777; color: #777777;
@ -546,14 +517,10 @@
.nav-pills > li > a, .nav-pills > li > a,
.nav-pills > li > a:hover, .nav-pills > li > a:hover,
.nav-pills > li > a:focus { .nav-pills > li > a:focus {
border-radius: 0px; border-radius: 0;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
} }
.nav-pills > .active { .nav-pills > .active {
border-radius: 0px; border-radius: 0;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
} }
.nav-pills > li.active > a, .nav-pills > li.active > a,
.nav-pills > li.active > a:hover, .nav-pills > li.active > a:hover,
@ -561,10 +528,8 @@
.nav-pills > .active > a, .nav-pills > .active > a,
.nav-pills > .active > a:hover, .nav-pills > .active > a:hover,
.nav-pills > .active > a:focus { .nav-pills > .active > a:focus {
border-radius: 0px; border-radius: 0;
-webkit-border-radius: 0px; margin-top: 0;
-moz-border-radius: 0px;
margin-top: 0px;
background-color: #f4f4f4; background-color: #f4f4f4;
color: #777777; color: #777777;
} }
@ -578,12 +543,12 @@ form label {
display: block; display: block;
} }
form label:first-child { form label:first-child {
margin-top: 0px; margin-top: 0;
} }
form .form-actions { form .form-actions {
background: transparent; background: transparent;
padding: 30px 0px; padding: 30px 0px;
margin: 0px; margin: 0;
border: none; border: none;
} }
form .form-actions .btn { form .form-actions .btn {
@ -601,8 +566,6 @@ select.form-control {
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
color: #555555; color: #555555;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
vertical-align: middle; vertical-align: middle;
width: 270px; width: 270px;
@ -624,7 +587,6 @@ span.form-control {
background-color: #fcfcfc; background-color: #fcfcfc;
border-color: #cccccc; border-color: #cccccc;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
cursor: not-allowed; cursor: not-allowed;
} }
@ -666,22 +628,21 @@ textarea {
font-size: 16px; font-size: 16px;
} }
.row.gravatar-list { .row.gravatar-list {
margin-left: 0px; margin-left: 0;
} }
.row.gravatar-list .col-xs-3 { .row.gravatar-list .col-xs-3 {
width: 23.404255319148934%; width: 23.404255319148934%;
margin: 0px; margin: 0;
padding: 0px; padding: 0;
margin-right: 2.127659574468085%; margin-right: 2.127659574468085%;
} }
.row.gravatar-list .col-xs-3:nth-child(4) { .row.gravatar-list .col-xs-3:nth-child(4) {
margin-right: 0px; margin-right: 0;
} }
.row.gravatar-list .col-xs-3 a.thumbnail, .row.gravatar-list .col-xs-3 a.thumbnail,
.row.gravatar-list .col-xs-3 a.thumbnail:hover { .row.gravatar-list .col-xs-3 a.thumbnail:hover {
border-radius: 0px; border-radius: 0;
-webkit-border-radius: 0px; -webkit-box-shadow: none;
-moz-border-radius: 0px;
box-shadow: none; box-shadow: none;
border: none; border: none;
text-decoration: none; text-decoration: none;
@ -721,7 +682,11 @@ textarea {
.row.gravatar-list .col-xs-3 a.thumbnail:hover.team-add .caption > h3 { .row.gravatar-list .col-xs-3 a.thumbnail:hover.team-add .caption > h3 {
color: #999; color: #999;
} }
/* Checkbox hack */ .switch {
height: 40px;
position: relative;
width: 100px;
}
.switch input, .switch input,
.switch a { .switch a {
cursor: pointer; cursor: pointer;
@ -731,25 +696,18 @@ textarea {
width: 100%; width: 100%;
z-index: 100; z-index: 100;
} }
/* Container */
.switch {
height: 40px;
position: relative;
width: 100px;
}
/* Background unchecked */
.switch label { .switch label {
background: rgba(189, 54, 47, 0.8); background: rgba(189, 54, 47, 0.8);
border-radius: 2px; border-radius: 2px;
display: block; display: block;
height: 100%; height: 100%;
position: relative; position: relative;
-webkit-transition: all .15s ease;
transition: all .15s ease; transition: all .15s ease;
width: 100%; width: 100%;
border-radius: 5px; border-radius: 5px;
color: #FFF; color: #FFF;
} }
/* Slider unchecked */
.switch label div { .switch label div {
background: #fff; background: #fff;
border-radius: 2px; border-radius: 2px;
@ -758,12 +716,12 @@ textarea {
left: 6px; left: 6px;
position: absolute; position: absolute;
top: 6px; top: 6px;
-webkit-transition: all .15s ease;
transition: all .15s ease; transition: all .15s ease;
width: 35px; width: 35px;
z-index: 3; z-index: 3;
border-radius: 5px; border-radius: 5px;
} }
/* Vertical lines on slider */
.switch label div:before { .switch label div:before {
bottom: 0; bottom: 0;
content: ''; content: '';
@ -774,10 +732,10 @@ textarea {
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
-webkit-transition: all .15s ease;
transition: all .15s ease; transition: all .15s ease;
width: 3px; width: 3px;
} }
/* Icon styles */
.switch .fontawesome-ok { .switch .fontawesome-ok {
font-size: 18px; font-size: 18px;
left: 15px; left: 15px;
@ -802,7 +760,6 @@ textarea {
content: "\f00d"; content: "\f00d";
opacity: 0.8; opacity: 0.8;
} }
/* Checked States */
.switch input:checked ~ label { .switch input:checked ~ label {
background: rgba(81, 163, 81, 0.75); background: rgba(81, 163, 81, 0.75);
} }
@ -832,8 +789,6 @@ pre {
font-size: 15px; font-size: 15px;
padding: 15px 20px; padding: 15px 20px;
border-radius: 5px; border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
} }
.alert.alert-build-Success span, .alert.alert-build-Success span,
.alert.alert-build-Error span, .alert.alert-build-Error span,
@ -902,8 +857,6 @@ pre {
} }
.build-details img { .build-details img {
float: left; float: left;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%; border-radius: 50%;
margin-right: 30px; margin-right: 30px;
width: 58px; width: 58px;
@ -944,7 +897,7 @@ pre {
margin-bottom: 30px; margin-bottom: 30px;
} }
.form-repo .field-group label { .form-repo .field-group label {
margin-top: 0px; margin-top: 0;
} }
.form-repo .field-separator { .form-repo .field-separator {
display: inline-block; display: inline-block;
@ -952,11 +905,11 @@ pre {
} }
.form-repo ul { .form-repo ul {
padding-top: 15px; padding-top: 15px;
margin-bottom: 0px; margin-bottom: 0;
padding-bottom: 0px; padding-bottom: 0;
list-style: none; list-style: none;
padding-left: 0px; padding-left: 0;
margin-left: 0px; margin-left: 0;
} }
.form-repo ul li { .form-repo ul li {
padding-bottom: 10px; padding-bottom: 10px;
@ -965,18 +918,16 @@ pre {
width: 32px; width: 32px;
height: 32px; height: 32px;
border-radius: 50%; border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
} }
ul.account-radio-group { ul.account-radio-group {
padding-top: 15px; padding-top: 15px;
margin-bottom: 0px; margin-bottom: 0;
padding-bottom: 0px; padding-bottom: 0;
list-style: none; list-style: none;
padding-left: 0px; padding-left: 0;
margin-left: 0px; margin-left: 0;
} }
ul.account-radio-group li { ul.account-radio-group li {
padding-bottom: 10px; padding-bottom: 10px;
@ -985,8 +936,6 @@ ul.account-radio-group li img {
width: 32px; width: 32px;
height: 32px; height: 32px;
border-radius: 50%; border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
} }
@ -999,8 +948,6 @@ ul.account-radio-group li img {
margin-top: 40px; margin-top: 40px;
padding: 0px 0px 20px 0px; padding: 0px 0px 20px 0px;
border-radius: 5px; border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
} }
.form-centered h1 { .form-centered h1 {
background-color: #262829; background-color: #262829;
@ -1011,7 +958,7 @@ ul.account-radio-group li img {
font-weight: normal; font-weight: normal;
font-size: 18px; font-size: 18px;
padding: 25px 10px; padding: 25px 10px;
margin-top: 0px; margin-top: 0;
margin-bottom: 30px; margin-bottom: 30px;
} }
.form-centered input[type="submit"] { .form-centered input[type="submit"] {
@ -1024,8 +971,6 @@ ul.account-radio-group li img {
width: 280px; width: 280px;
background: #AAA; background: #AAA;
border-radius: 5px; border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
} }
.form-centered input[type="text"], .form-centered input[type="text"],
.form-centered input[type="email"], .form-centered input[type="email"],
@ -1052,6 +997,7 @@ ul.account-radio-group li img {
.form-centered input[type="text"][disabled], .form-centered input[type="text"][disabled],
.form-centered input[type="email"][disabled], .form-centered input[type="email"][disabled],
.form-centered input[type="password"][disabled] { .form-centered input[type="password"][disabled] {
-webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
background: #f7f7f7; background: #f7f7f7;
color: #999; color: #999;

File diff suppressed because it is too large Load diff