From fbe422008a5c1777abf7b28a071d9567edb2285d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 19 Feb 2016 15:58:26 +0100 Subject: [PATCH] ux(): began work on sasslint --- public/sass/.sass-lint.yml | 33 ++ public/sass/.scss-lint.yml | 533 ------------------ public/sass/_grafana.scss | 1 - public/sass/bootstrap/grid.scss | 21 - .../sass/bootstrap/responsive-1200px-min.scss | 28 - .../sass/bootstrap/responsive-767px-max.scss | 161 ------ .../bootstrap/responsive-768px-979px.scss | 19 - .../sass/bootstrap/responsive-utilities.scss | 59 -- public/sass/bootstrap/responsive.scss | 27 - tasks/options/sasslint.js | 10 + tasks/options/scsslint.js | 12 - 11 files changed, 43 insertions(+), 861 deletions(-) create mode 100644 public/sass/.sass-lint.yml delete mode 100644 public/sass/.scss-lint.yml delete mode 100644 public/sass/bootstrap/grid.scss delete mode 100644 public/sass/bootstrap/responsive-1200px-min.scss delete mode 100644 public/sass/bootstrap/responsive-767px-max.scss delete mode 100644 public/sass/bootstrap/responsive-768px-979px.scss delete mode 100644 public/sass/bootstrap/responsive-utilities.scss delete mode 100644 public/sass/bootstrap/responsive.scss create mode 100644 tasks/options/sasslint.js delete mode 100644 tasks/options/scsslint.js diff --git a/public/sass/.sass-lint.yml b/public/sass/.sass-lint.yml new file mode 100644 index 00000000000..a0016f966ee --- /dev/null +++ b/public/sass/.sass-lint.yml @@ -0,0 +1,33 @@ +files: + include: '**/*.s+(a|c)ss' + ignore: + +rules: + empty-line-between-blocks: 0 + no-empty-rulesets: 1 + # Consistency Rules + # extends-before-mixins: 1 + # extends-before-declarations: 1 + # mixins-before-declarations: 1 + # Require an empty line between blocks + # final-newline: 1 + # no-ids: 1 + # indentation: 0 + # leading-zero: 1 + # name-format: 0 + # nesting-depth: 1 + # placeholder-in-extend: 1 + # property-sort-order: 1 + # property-spelling: 0 + # shorthand: 1 + # one-declaration-per-line: 1 + # single-line-per-selector: 1 + # space-after-comma: 1 + # # Space surrounding colons + # space-before-colon: 1 + # space-after-colon: 1 + # + # space-before-brace: 1 + # + # space-between-parens: 1 + # trailing-semicolon: 1 diff --git a/public/sass/.scss-lint.yml b/public/sass/.scss-lint.yml deleted file mode 100644 index 925f3c4b0f1..00000000000 --- a/public/sass/.scss-lint.yml +++ /dev/null @@ -1,533 +0,0 @@ -# Default application configuration that all configurations inherit from. -scss_files: - - "**/*.scss" - -plugin_directories: ['.scss-linters'] - -# List of gem names to load custom linters from (make sure they are already -# installed) -plugin_gems: [] - -# Default severity of all linters. -severity: warning - -linters: - BangFormat: - enabled: true - space_before_bang: true - space_after_bang: false - - BemDepth: - enabled: false - max_elements: 1 - - BorderZero: - enabled: true - convention: zero # or `none` - - ChainedClasses: - enabled: false - - ColorKeyword: - enabled: true - - ColorVariable: - enabled: false - - Comment: - enabled: true - exclude: - - _normalize.scss - - bootstrap.scss - style: silent - - DebugStatement: - enabled: true - - DeclarationOrder: - enabled: false - - DisableLinterReason: - enabled: false - - DuplicateProperty: - enabled: true - - ElsePlacement: - enabled: true - style: same_line # or 'new_line' - - EmptyLineBetweenBlocks: - enabled: false - ignore_single_line_blocks: true - - EmptyRule: - enabled: true - - ExtendDirective: - enabled: false - - FinalNewline: - enabled: true - present: true - - HexLength: - enabled: true - style: short # or 'long' - - HexNotation: - enabled: true - style: lowercase # or 'uppercase' - - HexValidation: - enabled: true - - IdSelector: - enabled: true - - ImportantRule: - enabled: true - - ImportPath: - enabled: true - leading_underscore: false - filename_extension: false - - Indentation: - enabled: true - allow_non_nested_indentation: false - character: space # or 'tab' - width: 2 - - LeadingZero: - enabled: true - style: exclude_zero # or 'include_zero' - - MergeableSelector: - enabled: false - force_nesting: true - - NameFormat: - enabled: true - allow_leading_underscore: true - convention: hyphenated_lowercase # or 'camel_case', or 'snake_case', or a regex pattern - - NestingDepth: - enabled: true - max_depth: 4 - ignore_parent_selectors: false - - PlaceholderInExtend: - enabled: false - - PropertyCount: - enabled: false - include_nested: false - max_properties: 10 - - PropertySortOrder: - enabled: true - ignore_unspecified: false - min_properties: 2 - separate_groups: false - order: - - position - - top - - right - - bottom - - left - - z-index - - -webkit-box-sizing - - -moz-box-sizing - - box-sizing - - display - - flex - - flex-align - - flex-basis - - flex-direction - - flex-flow - - flex-grow - - flex-order - - flex-pack - - float - - width - - min-width - - max-width - - height - - min-height - - max-height - - padding - - padding-top - - padding-right - - padding-bottom - - padding-left - - margin - - margin-top - - margin-right - - margin-bottom - - margin-left - - overflow - - overflow-x - - overflow-y - - -webkit-overflow-scrolling - - -ms-overflow-x - - -ms-overflow-y - - -ms-overflow-style - - clip - - clear - - font - - font-family - - font-size - - font-style - - font-weight - - font-variant - - font-size-adjust - - font-stretch - - font-effect - - font-emphasize - - font-emphasize-position - - font-emphasize-style - - font-smooth - - -webkit-hyphens - - -moz-hyphens - - hyphens - - line-height - - color - - text-align - - -webkit-text-align-last - - -moz-text-align-last - - -ms-text-align-last - - text-align-last - - text-emphasis - - text-emphasis-color - - text-emphasis-style - - text-emphasis-position - - text-decoration - - text-indent - - text-justify - - text-outline - - -ms-text-overflow - - text-overflow - - text-overflow-ellipsis - - text-overflow-mode - - text-shadow - - text-transform - - text-wrap - - -webkit-text-size-adjust - - -ms-text-size-adjust - - letter-spacing - - -ms-word-break - - word-break - - word-spacing - - -ms-word-wrap - - word-wrap - - -moz-tab-size - - -o-tab-size - - tab-size - - white-space - - vertical-align - - list-style - - list-style-position - - list-style-type - - list-style-image - - pointer-events - - -ms-touch-action - - touch-action - - cursor - - visibility - - zoom - - table-layout - - empty-cells - - caption-side - - border-spacing - - border-collapse - - content - - quotes - - counter-reset - - counter-increment - - resize - - -webkit-user-select - - -moz-user-select - - -ms-user-select - - -o-user-select - - user-select - - nav-index - - nav-up - - nav-right - - nav-down - - nav-left - - background - - background-color - - background-image - - -ms-filter:\\'progid:DXImageTransform.Microsoft.gradient - - filter:progid:DXImageTransform.Microsoft.gradient - - filter:progid:DXImageTransform.Microsoft.AlphaImageLoader - - filter - - background-repeat - - background-attachment - - background-position - - background-position-x - - background-position-y - - -webkit-background-clip - - -moz-background-clip - - background-clip - - background-origin - - -webkit-background-size - - -moz-background-size - - -o-background-size - - background-size - - border - - border-color - - border-style - - border-width - - border-top - - border-top-color - - border-top-style - - border-top-width - - border-right - - border-right-color - - border-right-style - - border-right-width - - border-bottom - - border-bottom-color - - border-bottom-style - - border-bottom-width - - border-left - - border-left-color - - border-left-style - - border-left-width - - border-radius - - border-top-left-radius - - border-top-right-radius - - border-bottom-right-radius - - border-bottom-left-radius - - -webkit-border-image - - -moz-border-image - - -o-border-image - - border-image - - -webkit-border-image-source - - -moz-border-image-source - - -o-border-image-source - - border-image-source - - -webkit-border-image-slice - - -moz-border-image-slice - - -o-border-image-slice - - border-image-slice - - -webkit-border-image-width - - -moz-border-image-width - - -o-border-image-width - - border-image-width - - -webkit-border-image-outset - - -moz-border-image-outset - - -o-border-image-outset - - border-image-outset - - -webkit-border-image-repeat - - -moz-border-image-repeat - - -o-border-image-repeat - - border-image-repeat - - outline - - outline-width - - outline-style - - outline-color - - outline-offset - - -webkit-box-shadow - - -moz-box-shadow - - box-shadow - - filter:progid:DXImageTransform.Microsoft.Alpha(Opacity - - -ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha - - opacity - - -ms-interpolation-mode - - -webkit-transition - - -moz-transition - - -ms-transition - - -o-transition - - transition - - -webkit-transition-delay - - -moz-transition-delay - - -ms-transition-delay - - -o-transition-delay - - transition-delay - - -webkit-transition-timing-function - - -moz-transition-timing-function - - -ms-transition-timing-function - - -o-transition-timing-function - - transition-timing-function - - -webkit-transition-duration - - -moz-transition-duration - - -ms-transition-duration - - -o-transition-duration - - transition-duration - - -webkit-transition-property - - -moz-transition-property - - -ms-transition-property - - -o-transition-property - - transition-property - - -webkit-transform - - -moz-transform - - -ms-transform - - -o-transform - - transform - - -webkit-transform-origin - - -moz-transform-origin - - -ms-transform-origin - - -o-transform-origin - - transform-origin - - -webkit-animation - - -moz-animation - - -ms-animation - - -o-animation - - animation - - -webkit-animation-name - - -moz-animation-name - - -ms-animation-name - - -o-animation-name - - animation-name - - -webkit-animation-duration - - -moz-animation-duration - - -ms-animation-duration - - -o-animation-duration - - animation-duration - - -webkit-animation-play-state - - -moz-animation-play-state - - -ms-animation-play-state - - -o-animation-play-state - - animation-play-state - - -webkit-animation-timing-function - - -moz-animation-timing-function - - -ms-animation-timing-function - - -o-animation-timing-function - - animation-timing-function - - -webkit-animation-delay - - -moz-animation-delay - - -ms-animation-delay - - -o-animation-delay - - animation-delay - - -webkit-animation-iteration-count - - -moz-animation-iteration-count - - -ms-animation-iteration-count - - -o-animation-iteration-count - - animation-iteration-count - - -webkit-animation-direction - - -moz-animation-direction - - -ms-animation-direction - - -o-animation-direction - - - PropertySpelling: - enabled: true - extra_properties: [] - disabled_properties: [] - - PropertyUnits: - enabled: true - global: [ - 'ch', 'em', 'ex', 'rem', # Font-relative lengths - 'cm', 'in', 'mm', 'pc', 'pt', 'px', 'q', # Absolute lengths - 'vh', 'vw', 'vmin', 'vmax', # Viewport-percentage lengths - 'deg', 'grad', 'rad', 'turn', # Angle - 'ms', 's', # Duration - 'Hz', 'kHz', # Frequency - 'dpi', 'dpcm', 'dppx', # Resolution - '%'] # Other - properties: {} - - PseudoElement: - enabled: true - - QualifyingElement: - enabled: true - allow_element_with_attribute: false - allow_element_with_class: false - allow_element_with_id: false - - SelectorDepth: - enabled: true - max_depth: 4 - - SelectorFormat: - enabled: false - convention: hyphenated_lowercase # or 'strict_BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern - - Shorthand: - enabled: true - allowed_shorthands: [1, 2, 3] - - SingleLinePerProperty: - enabled: false - allow_single_line_rule_sets: true - - SingleLinePerSelector: - enabled: false - - SpaceAfterComma: - enabled: false - style: one_space # or 'no_space', or 'at_least_one_space' - - SpaceAfterPropertyColon: - enabled: true - style: at_least_one_space # or 'no_space', or 'at_least_one_space', or 'aligned' - - SpaceAfterPropertyName: - enabled: true - - SpaceAfterVariableName: - enabled: true - - SpaceAroundOperator: - enabled: true - style: one_space # or 'at_least_one_space', or 'no_space' - - SpaceBeforeBrace: - enabled: true - style: space # or 'new_line' - allow_single_line_padding: false - - SpaceBetweenParens: - enabled: true - spaces: 0 - - StringQuotes: - enabled: true - style: double_quotes # or double_quotes - - TrailingSemicolon: - enabled: true - - TrailingWhitespace: - enabled: true - - TrailingZero: - enabled: false - - TransitionAll: - enabled: false - - UnnecessaryMantissa: - enabled: true - - UnnecessaryParentReference: - enabled: true - - UrlFormat: - enabled: true - - UrlQuotes: - enabled: true - - VariableForProperty: - enabled: false - properties: [] - - VendorPrefix: - enabled: true - identifier_list: base - additional_identifiers: [] - excluded_identifiers: [] - exclude: - - _normalize.scss - - ZeroUnit: - enabled: true - - Compass::*: - enabled: false diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index 9bc924ec79d..250721500e9 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -7,7 +7,6 @@ @import "mixins/hover"; @import "mixins/forms"; - // BASE @import "base/normalize"; @import "base/reboot"; diff --git a/public/sass/bootstrap/grid.scss b/public/sass/bootstrap/grid.scss deleted file mode 100644 index 15b89a8703e..00000000000 --- a/public/sass/bootstrap/grid.scss +++ /dev/null @@ -1,21 +0,0 @@ -// -// Grid system -// -------------------------------------------------- - - -// Fixed (940px) -#grid > .core($gridColumnWidth, $gridGutterWidth); - -// Fluid (940px) -#grid > .fluid($fluidGridColumnWidth, $fluidGridGutterWidth); - -// Reset utility classes due to specificity -[class*="span"].hide, -.row-fluid [class*="span"].hide { - display: none; -} - -[class*="span"].pull-right, -.row-fluid [class*="span"].pull-right { - float: right; -} diff --git a/public/sass/bootstrap/responsive-1200px-min.scss b/public/sass/bootstrap/responsive-1200px-min.scss deleted file mode 100644 index 8b85385d84f..00000000000 --- a/public/sass/bootstrap/responsive-1200px-min.scss +++ /dev/null @@ -1,28 +0,0 @@ -// -// Responsive: Large desktop and up -// -------------------------------------------------- - - -@media (min-width: 1200px) { - - // Fixed grid - #grid > .core($gridColumnWidth1200, $gridGutterWidth1200); - - // Fluid grid - #grid > .fluid($fluidGridColumnWidth1200, $fluidGridGutterWidth1200); - - // Input grid - #grid > .input($gridColumnWidth1200, $gridGutterWidth1200); - - // Thumbnails - .thumbnails { - margin-left: -$gridGutterWidth1200; - } - .thumbnails > li { - margin-left: $gridGutterWidth1200; - } - .row-fluid .thumbnails { - margin-left: 0; - } - -} diff --git a/public/sass/bootstrap/responsive-767px-max.scss b/public/sass/bootstrap/responsive-767px-max.scss deleted file mode 100644 index 37d9c11e700..00000000000 --- a/public/sass/bootstrap/responsive-767px-max.scss +++ /dev/null @@ -1,161 +0,0 @@ -// -// Responsive: Landscape phone to desktop/tablet -// -------------------------------------------------- - - -@media (max-width: 767px) { - - // GRID & CONTAINERS - // ----------------- - // Remove width from containers - .container { - width: auto; - } - // Fluid rows - .row-fluid { - width: 100%; - } - // Undo negative margin on rows and thumbnails - .row, - .thumbnails { - margin-left: 0; - } - .thumbnails > li { - float: none; - margin-left: 0; // Reset the default margin for all li elements when no .span* classes are present - } - // Make all grid-sized elements block level again - [class*="span"], - .uneditable-input[class*="span"], // Makes uneditable inputs full-width when using grid sizing - .row-fluid [class*="span"] { - float: none; - display: block; - width: 100%; - margin-left: 0; - @include box-sizing(border-box); - } - .span12, - .row-fluid .span12 { - width: 100%; - @include box-sizing(border-box); - } - .row-fluid [class*="offset"]:first-child { - margin-left: 0; - } - - // FORM FIELDS - // ----------- - // Make span* classes full width - .input-large, - .input-xlarge, - .input-xxlarge, - input[class*="span"], - select[class*="span"], - textarea[class*="span"], - .uneditable-input { - @mixin input-block-level(); - } - // But don't let it screw up prepend/append inputs - .input-prepend input, - .input-append input, - .input-prepend input[class*="span"], - .input-append input[class*="span"] { - display: inline-block; // redeclare so they don't wrap to new lines - width: auto; - } - .controls-row [class*="span"] + [class*="span"] { - margin-left: 0; - } - - // Modals - .modal { - position: fixed; - top: 20px; - left: 20px; - right: 20px; - width: auto; - margin: 0; - &.fade { top: -100px; } - &.fade.in { top: 20px; } - } - -} - - - -// UP TO LANDSCAPE PHONE -// --------------------- - -@media (max-width: 480px) { - - // Smooth out the collapsing/expanding nav - .nav-collapse { - -webkit-transform: translate3d(0, 0, 0); // activate the GPU - } - - // Block level the page header small tag for readability - .page-header h1 small { - display: block; - line-height: $line-height-base; - } - - // Update checkboxes for iOS - input[type="checkbox"], - input[type="radio"] { - border: 1px solid #ccc; - } - - // Remove the horizontal form styles - .form-horizontal { - .control-label { - float: none; - width: auto; - padding-top: 0; - text-align: left; - } - // Move over all input controls and content - .controls { - margin-left: 0; - } - // Move the options list down to align with labels - .control-list { - padding-top: 0; // has to be padding because margin collaspes - } - // Move over buttons in .form-actions to align with .controls - .form-actions { - padding-left: 10px; - padding-right: 10px; - } - } - - // Medias - // Reset float and spacing to stack - .media .pull-left, - .media .pull-right { - float: none; - display: block; - margin-bottom: 10px; - } - // Remove side margins since we stack instead of indent - .media-object { - margin-right: 0; - margin-left: 0; - } - - // Modals - .modal { - top: 10px; - left: 10px; - right: 10px; - } - .modal-header .close { - padding: 10px; - margin: -10px; - } - - // Carousel - .carousel-caption { - position: static; - } - -} diff --git a/public/sass/bootstrap/responsive-768px-979px.scss b/public/sass/bootstrap/responsive-768px-979px.scss deleted file mode 100644 index cef846699c3..00000000000 --- a/public/sass/bootstrap/responsive-768px-979px.scss +++ /dev/null @@ -1,19 +0,0 @@ -// -// Responsive: Tablet to desktop -// -------------------------------------------------- - - -@media (min-width: 768px) and (max-width: 979px) { - - // Fixed grid - #grid > .core($gridColumnWidth768, $gridGutterWidth768); - - // Fluid grid - #grid > .fluid($fluidGridColumnWidth768, $fluidGridGutterWidth768); - - // Input grid - #grid > .input($gridColumnWidth768, $gridGutterWidth768); - - // No need to reset .thumbnails here since it's the same $gridGutterWidth - -} diff --git a/public/sass/bootstrap/responsive-utilities.scss b/public/sass/bootstrap/responsive-utilities.scss deleted file mode 100644 index eca42571a89..00000000000 --- a/public/sass/bootstrap/responsive-utilities.scss +++ /dev/null @@ -1,59 +0,0 @@ -// -// Responsive: Utility classes -// -------------------------------------------------- - - -// IE10 Metro responsive -// Required for Windows 8 Metro split-screen snapping with IE10 -// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/ -$-ms-viewport{ - width: device-width; -} - -// Hide from screenreaders and browsers -// Credit: HTML5 Boilerplate -.hidden { - display: none; - visibility: hidden; -} - -// Visibility utilities - -// For desktops -.visible-phone { display: none !important; } -.visible-tablet { display: none !important; } -.hidden-phone { } -.hidden-tablet { } -.hidden-desktop { display: none !important; } -.visible-desktop { display: inherit !important; } - -// Tablets & small desktops only -@media (min-width: 768px) and (max-width: 979px) { - // Hide everything else - .hidden-desktop { display: inherit !important; } - .visible-desktop { display: none !important ; } - // Show - .visible-tablet { display: inherit !important; } - // Hide - .hidden-tablet { display: none !important; } -} - -// Phones only -@media (max-width: 767px) { - // Hide everything else - .hidden-desktop { display: inherit !important; } - .visible-desktop { display: none !important; } - // Show - .visible-phone { display: inherit !important; } // Use inherit to restore previous behavior - // Hide - .hidden-phone { display: none !important; } -} - -// Print utilities -.visible-print { display: none !important; } -.hidden-print { } - -@media print { - .visible-print { display: inherit !important; } - .hidden-print { display: none !important; } -} diff --git a/public/sass/bootstrap/responsive.scss b/public/sass/bootstrap/responsive.scss deleted file mode 100644 index 8f4888f23d5..00000000000 --- a/public/sass/bootstrap/responsive.scss +++ /dev/null @@ -1,27 +0,0 @@ -/*! - * Bootstrap Responsive v2.3.2 - * - * Copyright 2013 Twitter, Inc - * Licensed under the Apache License v2.0 - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Designed and built with all the love in the world by $mdo and $fat. - */ - - -// Responsive.scss -// For phone and tablet devices -// ------------------------------------------------------------- - - -// REPEAT VARIABLES & MIXINS -// ------------------------- -// Required since we compile the responsive stuff separately - -@import "../mixins/mixins.scss"; -@import "responsive-utilities.scss"; -@import "responsive-1200px-min.scss"; -@import "responsive-768px-979px.scss"; -@import "responsive-767px-max.scss"; - - diff --git a/tasks/options/sasslint.js b/tasks/options/sasslint.js new file mode 100644 index 00000000000..d16dad714a3 --- /dev/null +++ b/tasks/options/sasslint.js @@ -0,0 +1,10 @@ +module.exports = function(config) { + 'use strict'; + + return { + options: { + configFile: 'public/sass/.sass-lint.yml', + }, + target: ['public/sass/**/*.scss', '!public/sass/base/_normalize.scss'] + }; +}; diff --git a/tasks/options/scsslint.js b/tasks/options/scsslint.js deleted file mode 100644 index 86e2d8555ed..00000000000 --- a/tasks/options/scsslint.js +++ /dev/null @@ -1,12 +0,0 @@ -module.exports = function(config) { - return { - options: { - bundleExec: true, - config: 'public/sass/.scss-lint.yml', - reporterOutput: null - }, - core: { - src: ['public/sass/**/*.scss', '!public/sass/base/_normalize.scss'] - } - }; -};