From 5d6640187fe6d2c6790ca9042f90ff8990c17b3a Mon Sep 17 00:00:00 2001 From: Juanfran Date: Tue, 10 Jun 2014 08:41:27 +0200 Subject: [PATCH] scss lint --- app/styles/components/avatar.scss | 2 +- app/styles/components/buttons.scss | 36 +++--- app/styles/components/filter.scss | 24 ++-- app/styles/components/popover.scss | 31 +++-- app/styles/components/summary.scss | 46 ++++---- app/styles/components/tag.scss | 12 +- app/styles/dependencies/colors.scss | 34 +++--- app/styles/dependencies/elements.scss | 25 ++-- app/styles/dependencies/forms.scss | 26 +++-- app/styles/dependencies/helpers.scss | 147 ++++++++++++++++++++---- app/styles/dependencies/mixins.scss | 3 +- app/styles/dependencies/typography.scss | 136 ++++++++++++---------- app/styles/layout/backlog.scss | 9 +- app/styles/layout/base.scss | 28 ++--- app/styles/main.scss | 6 +- app/styles/modules/backlog-table.scss | 65 +++++------ app/styles/modules/burndown.scss | 4 +- app/styles/modules/lightbox.scss | 117 +++++++++---------- app/styles/modules/nav.scss | 60 +++++----- app/styles/modules/sprints.scss | 117 +++++++++---------- app/styles/responsive/mobile.scss | 4 +- app/styles/responsive/screen.scss | 2 +- app/styles/responsive/tablet.scss | 2 +- app/styles/shame/shame.scss | 4 +- app/views/modules/sprints.jade | 2 +- csslintrc.json | 3 +- gulpfile.js | 11 +- package.json | 1 + scsslint.yml | 126 ++++++++++++++++++++ 29 files changed, 665 insertions(+), 418 deletions(-) create mode 100644 scsslint.yml diff --git a/app/styles/components/avatar.scss b/app/styles/components/avatar.scss index e0f3b264..e8f5b663 100644 --- a/app/styles/components/avatar.scss +++ b/app/styles/components/avatar.scss @@ -1,6 +1,6 @@ .avatar { img { - width: 100%; border-radius: 50%; + width: 100%; } } diff --git a/app/styles/components/buttons.scss b/app/styles/components/buttons.scss index ec5a98fa..dc08212b 100755 --- a/app/styles/components/buttons.scss +++ b/app/styles/components/buttons.scss @@ -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; } } diff --git a/app/styles/components/filter.scss b/app/styles/components/filter.scss index fdc4d613..66daead2 100644 --- a/app/styles/components/filter.scss +++ b/app/styles/components/filter.scss @@ -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; } } diff --git a/app/styles/components/popover.scss b/app/styles/components/popover.scss index 52e1e909..0d2b163d 100644 --- a/app/styles/components/popover.scss +++ b/app/styles/components/popover.scss @@ -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); } } diff --git a/app/styles/components/summary.scss b/app/styles/components/summary.scss index 8e5482a9..57b9a47a 100644 --- a/app/styles/components/summary.scss +++ b/app/styles/components/summary.scss @@ -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; + .icon { + @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{ +.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; } } diff --git a/app/styles/components/tag.scss b/app/styles/components/tag.scss index 6bf77f95..74ff5863 100644 --- a/app/styles/components/tag.scss +++ b/app/styles/components/tag.scss @@ -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; } diff --git a/app/styles/dependencies/colors.scss b/app/styles/dependencies/colors.scss index d8a85a4a..1a039f3f 100755 --- a/app/styles/dependencies/colors.scss +++ b/app/styles/dependencies/colors.scss @@ -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; diff --git a/app/styles/dependencies/elements.scss b/app/styles/dependencies/elements.scss index 96b13833..dfe75f9b 100644 --- a/app/styles/dependencies/elements.scss +++ b/app/styles/dependencies/elements.scss @@ -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; } diff --git a/app/styles/dependencies/forms.scss b/app/styles/dependencies/forms.scss index 8c6a03f6..c0dd90f8 100644 --- a/app/styles/dependencies/forms.scss +++ b/app/styles/dependencies/forms.scss @@ -1,26 +1,30 @@ -fieldset{ - width: 100%; +fieldset { 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; } diff --git a/app/styles/dependencies/helpers.scss b/app/styles/dependencies/helpers.scss index 5d87a9aa..1561a7bb 100644 --- a/app/styles/dependencies/helpers.scss +++ b/app/styles/dependencies/helpers.scss @@ -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; +} diff --git a/app/styles/dependencies/mixins.scss b/app/styles/dependencies/mixins.scss index 070180ed..ff163963 100644 --- a/app/styles/dependencies/mixins.scss +++ b/app/styles/dependencies/mixins.scss @@ -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); } diff --git a/app/styles/dependencies/typography.scss b/app/styles/dependencies/typography.scss index 4f103e3f..37a91b5d 100755 --- a/app/styles/dependencies/typography.scss +++ b/app/styles/dependencies/typography.scss @@ -1,18 +1,23 @@ -/* Typography */ +// Typography -/*Font face*/ +// Font face @each $font-face in DroidSans, DroidSans-Bold, ostrichSans, taiga { @font-face { font-family: '#{$font-face}'; src: url('../fonts/#{$font-face}.eot?#iefix') format('embedded-opentype'), - url('../fonts/#{$font-face}.woff') format('woff'), - url('../fonts/#{$font-face}.ttf') format('truetype'), - url('../fonts/#{$font-face}.svg#{$font-face}') format('svg'); + url('../fonts/#{$font-face}.woff') format('woff'), + url('../fonts/#{$font-face}.ttf') format('truetype'), + url('../fonts/#{$font-face}.svg#{$font-face}') format('svg'); } } -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; - -moz-osx-font-smoothing: grayscale; + content: attr(data-icon); + 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; - -moz-osx-font-smoothing: grayscale; +[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'; } diff --git a/app/styles/layout/backlog.scss b/app/styles/layout/backlog.scss index 36939ffb..3f6ac9e8 100644 --- a/app/styles/layout/backlog.scss +++ b/app/styles/layout/backlog.scss @@ -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; } } diff --git a/app/styles/layout/base.scss b/app/styles/layout/base.scss index f46e4799..b351bad6 100644 --- a/app/styles/layout/base.scss +++ b/app/styles/layout/base.scss @@ -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 { - display:flex; + 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; } diff --git a/app/styles/main.scss b/app/styles/main.scss index ba897377..b44b6d20 100755 --- a/app/styles/main.scss +++ b/app/styles/main.scss @@ -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; diff --git a/app/styles/modules/backlog-table.scss b/app/styles/modules/backlog-table.scss index 571b23c5..6a5d0096 100644 --- a/app/styles/modules/backlog-table.scss +++ b/app/styles/modules/backlog-table.scss @@ -1,30 +1,30 @@ -.backlog-table{ - display:flex; +.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 { - display:flex; + 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{ + a { display: block; text-align: center; &:hover { - background: $freshTaiga; + background: $fresh-taiga; color: $white; } } diff --git a/app/styles/modules/burndown.scss b/app/styles/modules/burndown.scss index 3a040ac7..9df6f3df 100644 --- a/app/styles/modules/burndown.scss +++ b/app/styles/modules/burndown.scss @@ -1,6 +1,6 @@ .burndown { - width: 100%; - height: 200px; background: $whitish; + height: 200px; margin-bottom: 2rem; + width: 100%; } diff --git a/app/styles/modules/lightbox.scss b/app/styles/modules/lightbox.scss index f719200a..e1955cde 100644 --- a/app/styles/modules/lightbox.scss +++ b/app/styles/modules/lightbox.scss @@ -1,61 +1,62 @@ .lightbox { - display:flex; + @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 { - resize:vertical; + resize: vertical; } .button-green { display: block; - text-align: center; padding: 12px; + text-align: center; } } -.lightbox_add-new-us{ +.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 { - display:flex; + 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; + label { + @extend %button; + @include transition(all .2s ease-in); + border: 1px solid $gray-light; cursor: pointer; - @include transition( all .2s ease-in ); + display: block; } - .requirement{ + .requirement { &:hover { - background: $freshTaiga; + @include transition(all .2s ease-in); + background: $fresh-taiga; + border: 1px solid $fresh-taiga; color: $white; - border: 1px solid $freshTaiga; - @include transition( all .2s ease-in ); } } .requirement-selected { - background: $greenTaiga; + @include transition(all .2s ease-in); + background: $green-taiga; + border: 1px solid $green-taiga; color: $white; - border: 1px solid $greenTaiga; - @include transition( all .2s ease-in ); } .blocked { &:hover { - background: $redLight; + @include transition(all .2s ease-in); + background: $red-light; + border: 1px solid $red-light; color: $white; - border: 1px solid $redLight; - @include transition( all .2s ease-in ); } } .blocked-selected { + @include transition(all .2s ease-in); background: $red; - color: $white; border: 1px solid $red; - @include transition( all .2s ease-in ); + 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%; diff --git a/app/styles/modules/nav.scss b/app/styles/modules/nav.scss index 301d0929..acfe01ea 100644 --- a/app/styles/modules/nav.scss +++ b/app/styles/modules/nav.scss @@ -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,79 +18,75 @@ } .main-nav { - text-align: center; list-style: none; padding: 0; position: relative; + text-align: center; li { margin-bottom: 1rem; } a { color: $white; display: block; - text-align:center; + text-align: center; &:hover { @include transition (color .3s linear); - color: $freshTaiga; + color: $fresh-taiga; } span { display: block; } - .icon{ - @extend .xlarge; + .icon { + @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); - a{ - text-align: left; - @extend .small; + @include popover(150px, '', 30px, 30px); + a { + @extend %small; color: $white; + text-align: left; &:hover { - color: $freshTaiga; @include transition (color .2s linear); + color: $fresh-taiga; } } } - .user-settings{ + .user-settings { position: relative; - img{ - border: 1px solid transparent; - width: 100%; - border-radius: 50%; - &:hover { - border: 2px solid $freshTaiga; - @include transition (all .6s ease-in-out); - } + img { + border: 1px solid transparent; + border-radius: 50%; + width: 100%; + &:hover { + @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; } } } diff --git a/app/styles/modules/sprints.scss b/app/styles/modules/sprints.scss index a8103021..bda7ae12 100644 --- a/app/styles/modules/sprints.scss +++ b/app/styles/modules/sprints.scss @@ -1,6 +1,6 @@ -.sprints{ - .summary{ - background: $grayLight; +.sprints { + .summary { + background: $gray-light; @include clearfix; ul { width: 40%; @@ -13,45 +13,45 @@ 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{ + .icon { display: inline-block; &:hover { @include transform(rotate(180deg)); @include transition (all .2s ease-in); } } + .number { + @extend %large; + } + .description { + @extend %xsmall; + line-height: .6rem; + margin-top: 5px; + } ul { float: right; width: 32%; - .number { - @extend .large; - } - .description { - @extend .xsmall; - line-height: .6rem; - margin-top: 5px; - } } li { display: inline-block; @@ -60,70 +60,70 @@ } } } - .sprint-progress-bar{ + .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 { - display:flex; + 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 { - display:flex; + 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 { - @include ellipsis(250px); - display: block; - } + } + .us-name { + @include ellipsis(250px); + display: block; } .column-points { - text-align: right; padding: 0 4px; + text-align: right; } } .button { @@ -132,9 +132,9 @@ } } -/* If Sprint is open but date is old */ +// If Sprint is open but date is old .sprint-old-open { - .sprint-summary{ + .sprint-summary { .icon { @include transform(rotate(180deg)); &:hover { @@ -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{ + .sprint-progress-bar { .current-progress { - background: darken($grayLight, 10%); + background: darken($gray-light, 10%); } } .sprint-table { diff --git a/app/styles/responsive/mobile.scss b/app/styles/responsive/mobile.scss index 542b5679..4ae842ee 100755 --- a/app/styles/responsive/mobile.scss +++ b/app/styles/responsive/mobile.scss @@ -1,3 +1 @@ -/* Mobile Media Query */ - - +// Mobile Media Query diff --git a/app/styles/responsive/screen.scss b/app/styles/responsive/screen.scss index eef14acd..13e6d214 100755 --- a/app/styles/responsive/screen.scss +++ b/app/styles/responsive/screen.scss @@ -1,3 +1,3 @@ -/* Screen Media Query */ +// Screen Media Query $break-large: 1200px; diff --git a/app/styles/responsive/tablet.scss b/app/styles/responsive/tablet.scss index c970d3c6..1317e6cc 100755 --- a/app/styles/responsive/tablet.scss +++ b/app/styles/responsive/tablet.scss @@ -1 +1 @@ -/* Tablet Media Query */ +// Tablet Media Query diff --git a/app/styles/shame/shame.scss b/app/styles/shame/shame.scss index a3a79c51..28dd9d86 100644 --- a/app/styles/shame/shame.scss +++ b/app/styles/shame/shame.scss @@ -1,3 +1,3 @@ -/* Shame SCSS decalrations to be refactorized */ +// Shame SCSS decalrations to be refactorized -/* No shame so far... */ +// No shame so far... diff --git a/app/views/modules/sprints.jade b/app/views/modules/sprints.jade index 96e0a6f6..e05c6d91 100644 --- a/app/views/modules/sprints.jade +++ b/app/views/modules/sprints.jade @@ -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 diff --git a/csslintrc.json b/csslintrc.json index b57469b1..39936c38 100644 --- a/csslintrc.json +++ b/csslintrc.json @@ -17,5 +17,6 @@ "important": false, "unqualified-attributes": false, "regex-selectors": false, - "floats": false + "floats": false, + "fallback-colors": false } diff --git a/gulpfile.js b/gulpfile.js index 5ce5912e..aa89e375 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -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) diff --git a/package.json b/package.json index e8fc1d56..feb9f192 100644 --- a/package.json +++ b/package.json @@ -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" } diff --git a/scsslint.yml b/scsslint.yml new file mode 100644 index 00000000..a0d94d0f --- /dev/null +++ b/scsslint.yml @@ -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 \ No newline at end of file