taiga
/
taiga-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/styles/components/avatar.scss
View File

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

36
app/styles/components/buttons.scss
View File

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

24
app/styles/components/filter.scss
View File

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

31
app/styles/components/popover.scss
View File

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

42
app/styles/components/summary.scss
View File

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

12
app/styles/components/tag.scss
View File

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

34
app/styles/dependencies/colors.scss
View File

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

25
app/styles/dependencies/elements.scss
View File

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

24
app/styles/dependencies/forms.scss
View File

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

147
app/styles/dependencies/helpers.scss
View File

@ -1,27 +1,134 @@
/* FTW */ // FTW
* { box-sizing: border-box } * {
box-sizing: border-box;
}
/* #Reset & Basics (Inspired by E. Meyers) // #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 { 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; margin: 0;
padding: 0; padding: 0;
border: 0; vertical-align: baseline;
font-size: 100%; }
font: inherit;
vertical-align: baseline; } article,
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { aside,
display: block; } details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body { body {
line-height: 1; } line-height: 1;
ol, ul { }
list-style: none; }
blockquote, q { ol,
quotes: none; } ul {
blockquote:before, blockquote:after, list-style: none;
q:before, q:after { }
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: ''; content: '';
content: none; } }
table { table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; } border-spacing: 0;
}

3
app/styles/dependencies/mixins.scss
View File

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

122
app/styles/dependencies/typography.scss
View File

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

9
app/styles/layout/backlog.scss
View File

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

26
app/styles/layout/base.scss
View File

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

6
app/styles/main.scss
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-webkit: true;
$prefix-for-mozilla: true; $prefix-for-mozilla: true;
$prefix-for-microsoft: true; $prefix-for-microsoft: true;

57
app/styles/modules/backlog-table.scss
View File

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

4
app/styles/modules/burndown.scss
View File

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

107
app/styles/modules/lightbox.scss
View File

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

40
app/styles/modules/nav.scss
View File

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

91
app/styles/modules/sprints.scss
View File

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

4
app/styles/responsive/mobile.scss
View File

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

2
app/styles/responsive/screen.scss
View File

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

2
app/styles/responsive/tablet.scss
View File

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

4
app/styles/shame/shame.scss
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...

2
app/views/modules/sprints.jade
View File

@ -30,7 +30,7 @@ section.sprints
- for (var x = 0; x < 10; x++) - for (var x = 0; x < 10; x++)
div.row div.row
div.column-us.width-8 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 div.column-points.width-1 45
a.button.button-gray(href="", title="Current Sprint Taksboard") a.button.button-gray(href="", title="Current Sprint Taksboard")
span Sprint Taskboard span Sprint Taskboard

3
csslintrc.json
View File

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

11
gulpfile.js
View File

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

1
package.json
View File

@ -27,6 +27,7 @@
"gulp-newer": "^0.3.0", "gulp-newer": "^0.3.0",
"gulp-notify": "^1.2.5", "gulp-notify": "^1.2.5",
"gulp-ruby-sass": "^0.4.3", "gulp-ruby-sass": "^0.4.3",
"gulp-scss-lint": "0.0.5",
"gulp-styledocco": "0.0.1", "gulp-styledocco": "0.0.1",
"gulp-watch": "^0.5.4" "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