scss lint

stable
Juanfran 2014-06-10 08:41:27 +02:00
parent fdc653e088
commit 5d6640187f
29 changed files with 665 additions and 418 deletions

View File

@ -1,6 +1,6 @@
.avatar {
img {
width: 100%;
border-radius: 50%;
width: 100%;
}
}

View File

@ -1,30 +1,30 @@
/* Buttons components */
// Buttons components
.trans-button {
@extend %large;
font-family: 'ostrichSans';
@extend .large;
&:hover {
@include transition (color .3s linear);
color: $greenTaiga;
color: $green-taiga;
}
.icon {
margin-right: .3rem;
}
}
.button{
font-family: 'ostrichSans';
@extend .large;
padding: 8px 40px;
%button {
@extend %large;
display: inline-block;
font-family: 'ostrichSans';
padding: 8px 40px;
.icon {
margin-right: .3rem;
}
}
.button-green {
@extend .button;
background: $greenTaiga;
@extend %button;
@include transition (background .3s linear);
background: $green-taiga;
span {
color: $white;
position: relative;
@ -32,14 +32,14 @@
}
&:hover {
@include transition (background .3s linear);
background: $freshTaiga;
background: $fresh-taiga;
}
}
.button-gray {
@extend .button;
background: $buttonGray;
@extend %button;
@include transition (background .3s linear);
background: $button-gray;
span {
color: $white;
position: relative;
@ -47,18 +47,18 @@
}
&:hover {
@include transition (background .3s linear);
background: $buttonGrayHover;
color: $white
background: $button-gray-hover;
color: $white;
}
}
.button-bulk {
@extend .button;
background: $greenTaiga;
@extend %button;
background: $green-taiga;
font-size: 22px;
margin-left: 2px;
padding: 5px;
vertical-align: middle;
margin-left: 2px;
span {
color: $white;
}
@ -67,6 +67,6 @@
}
&:hover {
@include transition (background .3s linear);
background: $freshTaiga;
background: $fresh-taiga;
}
}

View File

@ -1,30 +1,30 @@
.single-filter {
display: block;
margin-bottom: .5em;
font-family: 'ostrichSans';
@extend .large;
height: 32px;
opacity: .5;
@extend %large;
@include clearfix;
position: relative;
display: block;
font-family: 'ostrichSans';
height: 32px;
margin-bottom: 1rem;
opacity: .5;
position: relative;
&:hover {
opacity: 1;
@include transition (opacity .2s linear);
color: $grayer;
opacity: 1;
}
.name, .number {
.name,
.number {
padding: 8px 10px;
}
.name {
background: darken($whitish, 10%); /* Fallback */
background: darken($whitish, 10%); // Fallback
display: block;
width: 100%;
}
.number {
background: darken($whitish, 20%); /* Fallback */
background: darken($whitish, 20%); // Fallback
position: absolute;
top: 0;
right: 0;
top: 0;
}
}

View File

@ -1,30 +1,29 @@
@mixin popover($width, $top:"", $left:"", $bottom:"", $right:"") {
margin: 0;
padding: 0;
list-style-type: none;
position: absolute;
@mixin popover($width, $top: '', $left: '', $bottom: '', $right: '') {
background: $blackish;
color: $white;
font-family: 'DroidSans';
padding: 10px;
top: #{$top};
left: #{$left};
bottom: #{$bottom};
color: $white;
display: none;
font-family: 'DroidSans';
left: #{$left};
list-style-type: none;
margin: 0;
padding: 10px;
position: absolute;
right: #{$right};
top: #{$top};
width: $width;
z-index: 99;
display: none;
a {
padding: 10px 2px;
display: block;
@extend .small;
@extend %small;
border-bottom: 1px solid $grayer;
color: $white;
display: block;
padding: 10px 2px;
&:last-child {
border: none;
border: 0;
}
&:hover {
color: $freshTaiga;
color: $fresh-taiga;
@include transition (color .3s linear);
}
}

View File

@ -1,13 +1,13 @@
.summary {
@include clearfix;
background: $grayer;
color: $white;
padding: 1em;
margin-bottom: 2rem;
@include clearfix;
padding: 1em;
ul {
display: inline-block;
margin: 0;
padding: 0;
display: inline-block;
}
li {
display: inline-block;
@ -15,68 +15,66 @@
}
.data {
float: left;
margin-top: 4px;
margin-right: 1.5em;
margin-top: 4px;
.number {
color: $freshTaiga;
color: $fresh-taiga;
top: 0;
}
}
.icon {
@extend .large;
@extend %large;
float: left;
}
.number {
font-family: 'DroidSans-Bold';
@extend .xlarge;
@extend %xlarge;
float: left;
font-family: 'DroidSans-Bold';
margin-right: .3rem;
position: relative;
top: 5px;
}
.description {
// line-height: 0;
@extend %small;
float: left;
font-family: DroidSans;
line-height: .9rem;
/* line-height: 0; */
float: left;
@extend .small;
}
}
.summary-progress-bar {
background: $whitish;
float: left;
height: 26px;
margin-bottom: 0;
margin-right: 10px;
background: $whitish;
width: 20%;
position: relative;
float: left;
width: 20%;
.current-progress {
background: $fresh-taiga;
height: 20px;
left: 2px;
position: absolute;
top: 3px;
left: 2px;
width: calc(30% - 4px);
background: $freshTaiga;
height: 20px;
}
}
.large-summary {
ul {
margin-right: 1rem;
border-right: 1px solid $whitish;
margin-right: 1rem;
&:last-child {
border-right: 0;
margin-right: 0;
}
&:last-child {
border-right: none;
}
}
.icon {
@extend .xlarge;
@extend %xlarge;
margin-right: .4rem;
}
}

View File

@ -1,9 +1,9 @@
.tag {
text-align: center;
display: inline-block;
width: 7rem;
padding: 3px;
margin: 0 .5rem .5rem 0;
background: $grayer; // Fallback
color: $white;
background: $grayer; /* Fallback */
display: inline-block;
margin: 0 .5rem .5rem 0;
padding: 3px;
text-align: center;
width: 7rem;
}

View File

@ -1,23 +1,23 @@
/* Colors */
// Colors
$black: #000000;
$black: #000;
$blackish: #050505;
$gray: #555555;
$grayer: #444444;
$grayLight: #cdcdcd;
$gray: #555;
$grayer: #444;
$gray-light: #cdcdcd;
$whitish: #f5f5f5;
$white: #FFFFFF;
$white: #fff;
$greenTaiga: #72a114;
$freshTaiga: #9dce0a;
$darkTaiga: #879b89;
$dryTaiga: #70a87d;
$morningTaiga: #7ab987;
$green-taiga: #72a114;
$fresh-taiga: #9dce0a;
$dark-taiga: #879b89;
$dry-taiga: #70a87d;
$morning-taiga: #7ab987;
$redLight: #ff8282;
$red: #ff0000;
$red-light: #ff8282;
$red: #f00;
$buttonGreen: #699b05;
$buttonGreenHover: #9dce0a;
$buttonGray: #585858;
$buttonGrayHover: #879b89;
$button-green: #699b05;
$button-green-hover: #9dce0a;
$button-gray: #585858;
$button-gray-hover: #879b89;

View File

@ -1,24 +1,26 @@
/* Elements */
// Elements
/* Blockquotes */
blockquote, blockquote p {
line-height: 24px;
// Blockquotes
blockquote,
blockquote p {
color: #777;
font-style: italic;
line-height: 24px;
}
blockquote {
border-left: 1px solid #ddd;
margin: 0 0 20px;
padding: 9px 20px 0 19px;
border-left: 1px solid #ddd;
cite {
color: #555;
display: block;
font-size: 12px;
color: #555;
&:before {
content: "\2014 \0020";
content: '\2014 \0020';
}
}
a, a:visited {
a,
a:visited {
color: #555;
}
}
@ -27,13 +29,14 @@ a {
color: $blackish;
&:hover {
@include transition (color .3s linear);
color: $greenTaiga;
color: $green-taiga;
}
}
/* __Lists__ */
// __Lists__
ul, ol {
ul,
ol {
margin-bottom: 20px;
}
ul { list-style: none outside; }

View File

@ -1,26 +1,30 @@
fieldset {
width: 100%;
border: 0;
margin: 0;
padding: 0;
position: relative;
width: 100%;
.icon {
position: absolute;
top: 6px;
right: 10px;
top: 6px;
}
}
input[type="text"], input[type="email"], input[type="date"], select, textarea{
font-family: 'ostrichSans';
@extend .large;
padding: 8px;
height: 40px;
background: $grayLight;
width: 100%;
input[type="text"],
input[type="email"],
input[type="date"],
select,
textarea {
@extend %large;
background: $gray-light;
border: 0;
margin: 0;
color: $grayer;
font-family: 'ostrichSans';
height: 40px;
margin: 0;
padding: 8px;
width: 100%;
@include placeholder {
color: $white;
}

View File

@ -1,27 +1,134 @@
/* FTW */
* { box-sizing: border-box }
// FTW
* {
box-sizing: border-box;
}
/* #Reset & Basics (Inspired by E. Meyers)
================================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
// #Reset & Basics (Inspired by E. Meyers)
//==================================================
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
border: 0;
font: inherit;
font-size: 100%;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block; }
vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none; }
}
table {
border-collapse: collapse;
border-spacing: 0; }
border-spacing: 0;
}

View File

@ -5,7 +5,6 @@
text-overflow: ellipsis;
}
@mixin background-opacity($color: $white, $opacity: 0.3) {
background: $color; /* The Fallback */
@mixin background-opacity($color: $white, $opacity: .3) {
background: rgba($color, $opacity);
}

View File

@ -1,6 +1,6 @@
/* Typography */
// Typography
/*Font face*/
// Font face
@each $font-face in DroidSans, DroidSans-Bold, ostrichSans, taiga {
@font-face {
@ -12,7 +12,12 @@
}
}
h1, h2, h3, h4, h5, h6 {
h1,
h2,
h3,
h4,
h5,
h6 {
color: $blackish;
font-weight: normal;
a {
@ -20,16 +25,16 @@ h1, h2, h3, h4, h5, h6 {
}
}
/*__Font Sizes__*/
.xsmall {font-size: .5rem;}
.small {font-size: .8rem;}
.medium {font-size: 1rem;}
.large {font-size: 1.2rem;}
.xlarge {font-size: 2rem;}
.xxlarge {font-size: 3rem;}
// __Font Sizes__
%xsmall {font-size: .5rem;}
%small {font-size: .8rem;}
%medium {font-size: 1rem;}
%large {font-size: 1.2rem;}
%xlarge {font-size: 2rem;}
%xxlarge {font-size: 3rem;}
h1 {
@extend .xxlarge;
@extend %xxlarge;
font-family: 'ostrichSans';
line-height: 2.7rem;
margin-bottom: 1rem;
@ -38,123 +43,128 @@ h1 {
margin-right: .5rem;
}
.green {
color: $greenTaiga;
color: $green-taiga;
}
.date {
color: $grayLight;
color: $gray-light;
@include ellipsis(500px);
}
}
h2 {
@extend .xlarge;
@extend %xlarge;
font-family: 'ostrichSans';
margin-bottom: 1rem;
}
p { margin: 0 0 20px 0;
p {
margin: 0 0 20px;
img {
margin: 0;
}
}
em { font-style: italic; }
strong { font-weight: bold; color: #333; }
strong {
color: #333;
font-weight: bold;
}
hr {
border: solid #ddd;
border-width: 1px 0 0;
clear: both;
margin: 10px 0 30px;
height: 0;
margin: 10px 0 30px;
}
/* __Links__ */
// __Links__
a, a:visited {
a,
a:visited {
color: #333;
text-decoration: none;
}
/* Taiga Icons */
// Taiga Icons
[data-icon]:before {
font-family: "taiga" !important;
content: attr(data-icon);
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
font-family: 'taiga' !important;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-style: normal !important;
font-variant: normal !important;
font-weight: normal !important;
line-height: 1;
speak: none;
text-transform: none !important;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: "taiga" !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
[class^='icon-']:before,
[class*=' icon-']:before {
font-family: 'taiga' !important;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-style: normal !important;
font-variant: normal !important;
font-weight: normal !important;
line-height: 1;
speak: none;
text-transform: none !important;
}
.icon-backlog:before {
content: "a";
content: 'a';
}
.icon-issues:before {
content: "b";
content: 'b';
}
.icon-kanban:before {
content: "c";
content: 'c';
}
.icon-search:before {
content: "d";
content: 'd';
}
.icon-video:before {
content: "e";
content: 'e';
}
.icon-wiki:before {
content: "f";
content: 'f';
}
.icon-settings:before {
content: "g";
content: 'g';
}
.icon-move:before {
content: "i";
content: 'i';
}
.icon-filter:before {
content: "j";
content: 'j';
}
.icon-tag:before {
content: "k";
content: 'k';
}
.icon-bulk:before {
content: "l";
content: 'l';
}
.icon-arrow-up:before {
content: "h";
content: 'h';
}
.icon-arrow-right:before {
content: "m";
content: 'm';
}
.icon-arrow-left:before {
content: "n";
content: 'n';
}
.icon-arrow-bottom:before {
content: "o";
content: 'o';
}
.icon-edit:before {
content: "p";
content: 'p';
}
.icon-delete:before {
content: "q";
content: 'q';
}
.icon-iocaine:before {
content: "r";
content: 'r';
}

View File

@ -1,16 +1,13 @@
.backlog {
}
.backlog-menu {
@include clearfix;
background: $whitish;
color: $blackish;
padding: 1em;
margin-bottom: 2rem;
@include clearfix;
padding: 1em;
.trans-button {
display: inline-block;
margin-right: 1rem;
padding: 4px 0;
display: inline-block;
}
}

View File

@ -1,45 +1,45 @@
/* Basic layout styles */
// Basic layout styles
html {
width: 100%;
height: 100%;
width: 100%;
}
body {
width: 100%;
height: 100%;
background: #fff; /* fallback */
font: 16px/21px 'DroidSans', Arial, sans-serif;
background: #fff; // fallback
color: #444;
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
-webkit-text-size-adjust: 100%;
font: 16px/21px 'DroidSans', Arial, sans-serif;
-webkit-font-smoothing: antialiased; // Fix for webkit renderin
height: 100%;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
width: 100%;
}
.wrapper {
align-content: stretch;
align-items: stretch;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-content: stretch;
align-items: stretch;
padding-left: 90px;
}
.menu-secondary {
flex-basis: 260px;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 260px;
padding: 2em 1em;
}
.extrabar {
background: $whitish;
/* display: none; */
// display: none;
}
.main {
flex-basis: 600px;
flex-grow: 8;
flex-shrink: 0;
flex-basis: 600px;
padding: 2em;
}

View File

@ -1,8 +1,6 @@
/*
THIS IS THE MAIN INCLUDES SASS FILE
*/
// THIS IS THE MAIN INCLUDES SASS FILE
/* Bourbon */
// Bourbon
$prefix-for-webkit: true;
$prefix-for-mozilla: true;
$prefix-for-microsoft: true;

View File

@ -1,30 +1,30 @@
.backlog-table {
align-content: stretch;
align-items: center;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-content: stretch;
align-items: center;
width: 100%;
.row {
align-content: stretch;
align-items: stretch;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: stretch;
align-items: stretch;
width: 100%;
text-align: left;
padding: .5em 0;
text-align: left;
width: 100%;
@for $i from 1 through 8 {
.width-#{$i} {
flex-basis: 50px;
flex-grow: $i;
flex-shrink: 0;
flex-basis: 50px;
}
}
&:hover {
background: lighten( $greenTaiga, 60% );
background: lighten($green-taiga, 60%);
@include transition (background .2s ease-in);
cursor: move;
.us-settings {
@ -34,7 +34,7 @@
}
}
.row-selected {
background: lighten( $greenTaiga, 60% );
background: lighten($green-taiga, 60%);
@include transition (background .2s ease-in);
}
.user-story-name {
@ -43,15 +43,15 @@
vertical-align: top;
}
span {
display: inline-block;
max-width: 70%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
}
.icon {
color: $grayLight;
@extend .medium;
@extend %medium;
color: $gray-light;
&:hover {
color: $grayer;
@include transition (color .3s linear);
@ -59,34 +59,35 @@
}
}
.user-story-tags {
margin-top: .3rem;
display: none;
margin-top: .3rem;
}
.title {
@extend %medium;
font-family: 'DroidSans-Bold';
@extend .medium;
&:hover {
background: transparent;
}
}
.sub-title {
font-family: 'DroidSans';
@extend .small;
@extend %small;
background: $whitish;
border-bottom: 2px solid $grayer;
font-family: 'DroidSans';
&:hover {
background: $whitish;
}
}
.table-main {
@extend .small;
border-bottom: 1px solid $grayLight;
@extend %small;
border-bottom: 1px solid $gray-light;
}
.status, .points {
.status,
.points {
position: relative;
}
.blocked {
background: $redLight;
background: $red-light;
color: $white;
&:hover {
background: $red;
@ -107,30 +108,30 @@
}
}
.doom-line {
width: 100%;
height: 4px;
background: $red;
border-top: 2px solid darken($red, 10%);
border-bottom: 2px solid lighten($red, 10%);
border-top: 2px solid darken($red, 10%);
height: 4px;
margin: .5rem 0;
width: 100%;
}
.pop-status {
@include popover(150px, "", 30px, 10px, "");
@include popover(150px, '', 30px, 10px, '');
}
.pop-points {
@include popover(150px, "", 30px, 10px, "");
@include popover(150px, '', 30px, 10px, '');
}
.pop-points-open {
@include popover(200px, "", 30px, 10px, "");
@include popover(200px, '', 30px, 10px, '');
li {
width: 23%;
display: inline-block;
width: 23%;
}
a {
display: block;
text-align: center;
&:hover {
background: $freshTaiga;
background: $fresh-taiga;
color: $white;
}
}

View File

@ -1,6 +1,6 @@
.burndown {
width: 100%;
height: 200px;
background: $whitish;
height: 200px;
margin-bottom: 2rem;
width: 100%;
}

View File

@ -1,27 +1,28 @@
.lightbox {
@include background-opacity($white, .9);
align-content: center;
align-items: center;
bottom: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-content: center;
align-items: center;
@include background-opacity( $white, .9);
position: fixed;
z-index: 999;
top: 0;
left: 0;
bottom: 0;
position: fixed;
right: 0;
top: 0;
z-index: 999;
.close {
@extend %large;
position: absolute;
top: 2rem;
right: 2rem;
@extend .large;
top: 2rem;
}
.title {
text-align: center;
}
input, select {
input,
select {
margin-bottom: 1rem;
}
textarea {
@ -29,33 +30,33 @@
}
.button-green {
display: block;
text-align: center;
padding: 12px;
text-align: center;
}
}
.lightbox_add-new-us {
display: none;
form {
width: 600px;
min-width: 600px;
flex-basis: 0;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 0;
min-width: 600px;
width: 600px;
}
fieldset {
position: relative;
}
.markdown-preview {
margin-bottom: .5rem;
display: inline-block;
margin-bottom: .5rem;
a {
@extend .small;
color: $grayLight;
@extend .button;
@extend %button;
@extend %small;
color: $gray-light;
padding: 3px 20px;
&:first-child {
border-right: 1px solid $grayLight;
border-right: 1px solid $gray-light;
}
&:hover {
color: $grayer;
@ -67,62 +68,62 @@
}
}
textarea {
min-height: 7rem;
max-height: 9rem;
margin-bottom: 1rem;
max-height: 9rem;
min-height: 7rem;
}
.new-us-settings {
align-content: flex-start;
align-items: stretch;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
align-items: stretch;
margin-bottom: 1rem;
fieldset {
flex-basis: 30%;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 30%;
text-align: center;
margin-right: .5rem;
text-align: center;
&:last-child {
margin: 0;
}
}
label {
@extend .button;
border: 1px solid $grayLight;
display: block;
cursor: pointer;
@extend %button;
@include transition(all .2s ease-in);
border: 1px solid $gray-light;
cursor: pointer;
display: block;
}
.requirement {
&:hover {
background: $freshTaiga;
color: $white;
border: 1px solid $freshTaiga;
@include transition(all .2s ease-in);
background: $fresh-taiga;
border: 1px solid $fresh-taiga;
color: $white;
}
}
.requirement-selected {
background: $greenTaiga;
color: $white;
border: 1px solid $greenTaiga;
@include transition(all .2s ease-in);
background: $green-taiga;
border: 1px solid $green-taiga;
color: $white;
}
.blocked {
&:hover {
background: $redLight;
color: $white;
border: 1px solid $redLight;
@include transition(all .2s ease-in);
background: $red-light;
border: 1px solid $red-light;
color: $white;
}
}
.blocked-selected {
background: $red;
color: $white;
border: 1px solid $red;
@include transition(all .2s ease-in);
background: $red;
border: 1px solid $red;
color: $white;
}
input[type="checkbox"] {
display: none;
@ -133,40 +134,40 @@
.lightbox_add-bulk {
display: none;
form {
width: 600px;
min-width: 600px;
flex-basis: 0;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 0;
min-width: 600px;
width: 600px;
}
textarea {
min-height: 15rem;
max-height: 12rem;
margin-bottom: 1rem;
max-height: 12rem;
min-height: 15rem;
}
}
.lightbox_add-sprint {
display: none;
form {
width: 600px;
min-width: 600px;
flex-basis: 0;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 0;
min-width: 600px;
width: 600px;
}
.last-sprint-name {
position: absolute;
top: .5rem;
right: 1rem;
color: $gray;
position: absolute;
right: 1rem;
top: .5rem;
}
.dates {
margin-bottom: 1rem;
input {
width: 49%;
float: left;
margin-right: 1%;
width: 49%;
&:last-child {
margin: 0;
width: 50%;

View File

@ -1,13 +1,13 @@
.menu {
width: 90px;
background-image: url("../images/menu.png");
background-attachment: fixed;
background-image: url('../images/menu.png');
background-position: left bottom;
flex-wrap: wrap;
padding: 2rem .3rem;
font-family: 'ostrichSans';
height: 100%;
padding: 2rem .3rem;
position: fixed;
width: 90px;
}
.logo {
@ -18,10 +18,10 @@
}
.main-nav {
text-align: center;
list-style: none;
padding: 0;
position: relative;
text-align: center;
li {
margin-bottom: 1rem;
}
@ -31,43 +31,39 @@
text-align: center;
&:hover {
@include transition (color .3s linear);
color: $freshTaiga;
color: $fresh-taiga;
}
span {
display: block;
}
.icon {
@extend .xlarge;
@extend %xlarge;
line-height: 2.2rem;
}
.item {
@extend .large;
@extend %large;
}
}
.active {
@include transition (color .3s linear);
color: $freshTaiga;
color: $fresh-taiga;
}
}
.user-settings {
}
.user {
width: 80px;
bottom: 1rem;
padding: 0 10px;
position: absolute;
bottom: 1rem;
width: 80px;
.popover {
@include popover(150px, "", 30px, 30px);
@include popover(150px, '', 30px, 30px);
a {
text-align: left;
@extend .small;
@extend %small;
color: $white;
text-align: left;
&:hover {
color: $freshTaiga;
@include transition (color .2s linear);
color: $fresh-taiga;
}
}
}
@ -75,22 +71,22 @@
position: relative;
img {
border: 1px solid transparent;
width: 100%;
border-radius: 50%;
width: 100%;
&:hover {
border: 2px solid $freshTaiga;
@include transition (all .6s ease-in-out);
border: 2px solid $fresh-taiga;
}
}
}
.settings {
text-align: center;
a {
margin-right: .5rem;
color: $whitish;
margin-right: .5rem;
&:hover {
@include transition (color .3s linear);
color: $freshTaiga;
color: $fresh-taiga;
}
}
}

View File

@ -1,6 +1,6 @@
.sprints {
.summary {
background: $grayLight;
background: $gray-light;
@include clearfix;
ul {
width: 40%;
@ -13,26 +13,26 @@
float: right;
}
.sprint-name {
@extend %large;
display: inline-block;
font-family: 'ostrichSans';
margin-right: 3px;
@extend .large;
max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
display: inline-block;
white-space: nowrap;
}
.sprint-date {
@extend %large;
color: $gray-light;
font-family: 'ostrichSans';
color: $grayLight;
@extend .large;
}
.sprint {
margin-bottom: 2rem;
.sprint-summary {
width: 65%;
display: inline-block;
width: 65%;
}
.icon {
display: inline-block;
@ -41,17 +41,17 @@
@include transition (all .2s ease-in);
}
}
ul {
float: right;
width: 32%;
.number {
@extend .large;
@extend %large;
}
.description {
@extend .xsmall;
@extend %xsmall;
line-height: .6rem;
margin-top: 5px;
}
ul {
float: right;
width: 32%;
}
li {
display: inline-block;
@ -61,69 +61,69 @@
}
}
.sprint-progress-bar {
background: $gray-light;
border-radius: 2px;
height: 8px;
margin-bottom: 0;
background: $grayLight;
width: 100%;
position: relative;
border-radius: 2px;
margin-top: .5rem;
position: relative;
width: 100%;
.current-progress {
background: $green-taiga;
border-radius: 2px;
height: 8px;
left: 0;
position: absolute;
top: 0;
left: 0;
width: calc(30% - 4px);
background: $greenTaiga;
height: 8px;
border-radius: 2px;
}
}
.sprint-table {
align-content: stretch;
align-items: center;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-content: stretch;
align-items: center;
width: 100%;
@for $i from 1 through 8 {
.width-#{$i} {
flex-basis: 50px;
flex-grow: $i;
flex-shrink: 0;
}
}
.row {
align-content: stretch;
align-items: stretch;
border-bottom: 1px solid $gray-light;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: stretch;
align-items: stretch;
width: 100%;
text-align: left;
padding: .5em 0;
border-bottom: 1px solid $grayLight;
@for $i from 1 through 8 {
.width-#{$i} {
flex-grow: $i;
flex-shrink: 0;
flex-basis: 50px;
}
}
text-align: left;
width: 100%;
&:hover {
background: lighten($grayLight, 12%);
background: lighten($gray-light, 12%);
@include transition (background .2s ease-in);
cursor: move;
}
&:last-child {
border-bottom: none;
border-bottom: 0;
}
}
.column-us {
@extend .small;
@extend %small;
padding: 0 4px;
a {
}
.us-name {
@include ellipsis(250px);
display: block;
}
}
.column-points {
text-align: right;
padding: 0 4px;
text-align: right;
}
}
.button {
@ -132,7 +132,7 @@
}
}
/* If Sprint is open but date is old */
// If Sprint is open but date is old
.sprint-old-open {
.sprint-summary {
.icon {
@ -148,7 +148,7 @@
}
}
/* If sprint is closed and date is old */
// If sprint is closed and date is old
.sprint-closed {
.sprint-summary {
.icon {
@ -159,12 +159,13 @@
}
}
}
.number, .description {
color: $grayLight;
.number,
.description {
color: $gray-light;
}
.sprint-progress-bar {
.current-progress {
background: darken($grayLight, 10%);
background: darken($gray-light, 10%);
}
}
.sprint-table {

View File

@ -1,3 +1 @@
/* Mobile Media Query */
// Mobile Media Query

View File

@ -1,3 +1,3 @@
/* Screen Media Query */
// Screen Media Query
$break-large: 1200px;

View File

@ -1 +1 @@
/* Tablet Media Query */
// Tablet Media Query

View File

@ -1,3 +1,3 @@
/* Shame SCSS decalrations to be refactorized */
// Shame SCSS decalrations to be refactorized
/* No shame so far... */
// No shame so far...

View File

@ -30,7 +30,7 @@ section.sprints
- for (var x = 0; x < 10; x++)
div.row
div.column-us.width-8
a(href="", title="") #125 Crear el perfil de usuario Senior en el admin
a.us-name(href="", title="") #125 Crear el perfil de usuario Senior en el admin
div.column-points.width-1 45
a.button.button-gray(href="", title="Current Sprint Taksboard")
span Sprint Taskboard

View File

@ -17,5 +17,6 @@
"important": false,
"unqualified-attributes": false,
"regex-selectors": false,
"floats": false
"floats": false,
"fallback-colors": false
}

View File

@ -9,7 +9,8 @@ var gulp = require('gulp'),
watch = require('gulp-watch'),
size = require('gulp-filesize'),
notify = require("gulp-notify"),
connect = require('gulp-connect');
connect = require('gulp-connect'),
scsslint = require('gulp-scss-lint');
var paths = {
app: 'app',
@ -35,6 +36,12 @@ gulp.task('jade', function() {
.pipe(size());
});
//Sass lint
gulp.task('scss-lint', function() {
gulp.src([paths.appStyles, '!/**/bourbon/**/*.scss'])
.pipe(scsslint({config: 'scsslint.yml'}));
});
//Sass Files
gulp.task('sass', function () {
return gulp.src(paths.sassMain)
@ -91,7 +98,7 @@ gulp.task('connect', function() {
// Rerun the task when a file changes
gulp.task('watch', function() {
gulp.watch(paths.jade, ['jade']);
gulp.watch(paths.appStyles, ['sass', 'css', 'minifyCSS']);
gulp.watch(paths.appStyles, ['scss-lint', 'sass', 'css', 'minifyCSS']);
});
// The default task (called when you run `gulp` from cli)

View File

@ -27,6 +27,7 @@
"gulp-newer": "^0.3.0",
"gulp-notify": "^1.2.5",
"gulp-ruby-sass": "^0.4.3",
"gulp-scss-lint": "0.0.5",
"gulp-styledocco": "0.0.1",
"gulp-watch": "^0.5.4"
}

126
scsslint.yml Normal file
View File

@ -0,0 +1,126 @@
linters:
BorderZero:
enabled: true
CapitalizationInSelector:
enabled: true
ColorKeyword:
enabled: true
Comment:
enabled: true
DebugStatement:
enabled: true
DeclarationOrder:
enabled: true
DuplicateProperty:
enabled: true
ElsePlacement:
enabled: true
style: same_line # or 'new_line'
EmptyLineBetweenBlocks:
enabled: false
ignore_single_line_blocks: true
EmptyRule:
enabled: true
FinalNewline:
enabled: true
present: true
HexLength:
enabled: true
style: short # or 'long'
HexNotation:
enabled: true
style: lowercase # or 'uppercase'
HexValidation:
enabled: true
IdWithExtraneousSelector:
enabled: true
Indentation:
enabled: true
width: 4
LeadingZero:
enabled: true
style: exclude_zero # or 'include_zero'
MergeableSelector:
enabled: true
force_nesting: true
NameFormat:
enabled: true
convention: hyphenated_lowercase # or 'BEM', or a regex pattern
PlaceholderInExtend:
enabled: true
PropertySortOrder:
enabled: true
PropertySpelling:
enabled: true
extra_properties: []
SelectorDepth:
enabled: true
max_depth: 3
Shorthand:
enabled: true
SingleLinePerSelector:
enabled: true
SpaceAfterComma:
enabled: true
SpaceAfterPropertyColon:
enabled: true
style: one_space # or 'no_space', or 'at_least_one_space', or 'aligned'
SpaceAfterPropertyName:
enabled: true
SpaceBeforeBrace:
enabled: true
allow_single_line_padding: false
SpaceBetweenParens:
enabled: true
spaces: 0
StringQuotes:
enabled: true
style: single_quotes # or double_quotes
TrailingSemicolonAfterPropertyValue:
enabled: true
UnnecessaryMantissa:
enabled: true
UrlFormat:
enabled: true
UrlQuotes:
enabled: true
ZeroUnit:
enabled: true
Compass::*:
enabled: false