diff --git a/package.json b/package.json index 481ec1959ed..999cd05102f 100644 --- a/package.json +++ b/package.json @@ -59,8 +59,7 @@ "grunt-newer": "^1.3.0", "grunt-notify": "^0.4.5", "grunt-postcss": "^0.8.0", - "grunt-sass": "^2.0.0", - "grunt-sass-lint": "^0.2.2", + "grunt-sass-lint": "^0.2.4", "grunt-usemin": "3.1.1", "grunt-webpack": "^3.0.2", "html-loader": "^0.5.1", @@ -116,7 +115,12 @@ "typecheck": "tsc --noEmit", "jest": "jest --notify --watch", "api-tests": "jest --notify --watch --config=tests/api/jest.js", - "precommit": "lint-staged && grunt precommit" + "precommit": "grunt precommit" + }, + "husky": { + "hooks": { + "pre-commit": "lint-staged && grunt precommit" + } }, "lint-staged": { "*.{ts,tsx}": [ diff --git a/public/sass/.sass-lint.yml b/public/sass/.sass-lint.yml index 2e79bc584db..1d1e2fd9c73 100644 --- a/public/sass/.sass-lint.yml +++ b/public/sass/.sass-lint.yml @@ -1,23 +1,41 @@ options: formatter: stylish -files: - include: '**/*.s+(a|c)ss' - ignore: - - './utils/*.scss' - rules: + quotes: + - 0 + - + style: 'single' + + brace-style: + - 2 + - + style: '1tbs' + + space-before-brace: + - 2 + + no-duplicate-properties: + - 0 + - + exclude: + - 'font-size' + - 'word-break' + + empty-line-between-blocks: + - 0 + - + allow-single-line-rulesets: 1 + # Extends extends-before-mixins: 0 extends-before-declarations: 0 placeholder-in-extend: 0 - # Mixins mixins-before-declarations: 0 # Line Spacing one-declaration-per-line: 0 - empty-line-between-blocks: 0 single-line-per-selector: 0 # Disallows @@ -25,7 +43,6 @@ rules: no-color-literals: 0 no-css-comments: 0 no-debug: 0 - no-duplicate-properties: 0 no-empty-rulesets: 1 no-extends: 0 no-ids: 0 @@ -40,6 +57,7 @@ rules: no-vendor-prefixes: 0 no-warn: 0 property-units: 0 + pseudo-element: 0 # Nesting force-attribute-nesting: 0 @@ -57,7 +75,6 @@ rules: # Style Guide bem-depth: 0 border-zero: 0 - brace-style: 0 clean-import-paths: 0 empty-args: 0 hex-length: 0 @@ -66,7 +83,6 @@ rules: leading-zero: 0 nesting-depth: 0 property-sort-order: 0 - quotes: 0 shorthand-values: 0 url-quotes: 0 variable-for-property: 0 @@ -76,12 +92,10 @@ rules: space-after-comma: 0 space-before-colon: 0 space-after-colon: 0 - space-before-brace: 0 space-before-bang: 0 space-after-bang: 0 space-between-parens: 0 space-around-operator: 0 # Final Items - trailing-semicolon: 0 final-newline: 0 diff --git a/public/sass/components/_drop.scss b/public/sass/components/_drop.scss index 6568414ed88..8d9d4fc6b7d 100644 --- a/public/sass/components/_drop.scss +++ b/public/sass/components/_drop.scss @@ -5,13 +5,13 @@ $useDropShadow: false; $attachmentOffset: 0%; $easing: cubic-bezier(0, 0, 0.265, 1); -@include drop-theme("error", $popover-error-bg, $popover-color); -@include drop-theme("popover", $popover-bg, $popover-color, $popover-border-color); -@include drop-theme("help", $popover-help-bg, $popover-help-color); +@include drop-theme('error', $popover-error-bg, $popover-color); +@include drop-theme('popover', $popover-bg, $popover-color, $popover-border-color); +@include drop-theme('help', $popover-help-bg, $popover-help-color); -@include drop-animation-scale("drop", "help", $attachmentOffset: $attachmentOffset, $easing: $easing); -@include drop-animation-scale("drop", "error", $attachmentOffset: $attachmentOffset, $easing: $easing); -@include drop-animation-scale("drop", "popover", $attachmentOffset: $attachmentOffset, $easing: $easing); +@include drop-animation-scale('drop', 'help', $attachmentOffset: $attachmentOffset, $easing: $easing); +@include drop-animation-scale('drop', 'error', $attachmentOffset: $attachmentOffset, $easing: $easing); +@include drop-animation-scale('drop', 'popover', $attachmentOffset: $attachmentOffset, $easing: $easing); .drop-element { z-index: 10000; diff --git a/public/sass/components/_filter-list.scss b/public/sass/components/_filter-list.scss index 7713aa05ac2..90d0a21c539 100644 --- a/public/sass/components/_filter-list.scss +++ b/public/sass/components/_filter-list.scss @@ -67,17 +67,17 @@ text-transform: uppercase; &.online { - background-image: url("/img/online.svg"); + background-image: url('/img/online.svg'); color: $online; } &.warn { - background-image: url("/img/warn-tiny.svg"); + background-image: url('/img/warn-tiny.svg'); color: $warn; } &.critical { - background-image: url("/img/critical.svg"); + background-image: url('/img/critical.svg'); color: $critical; } } diff --git a/public/sass/components/_jsontree.scss b/public/sass/components/_jsontree.scss index 665deda0f12..39804a9c240 100644 --- a/public/sass/components/_jsontree.scss +++ b/public/sass/components/_jsontree.scss @@ -3,16 +3,20 @@ json-tree { .json-tree-key { vertical-align: middle; } + .expandable { position: relative; + &::before { pointer-events: none; } + &::before, & > .json-tree-key { cursor: pointer; } } + .json-tree-branch-preview { display: inline-block; vertical-align: middle; @@ -24,36 +28,44 @@ json-tree { ul { padding-left: $spacer; } + li, ul { list-style: none; } + li { line-height: 1.3rem; } + .json-tree-key { color: $variable; padding: 5px 10px 5px 15px; + &::after { - content: ":"; + content: ':'; } } + json-node.expandable { &::before { - content: "\25b6"; + content: '\25b6'; position: absolute; left: 0px; font-size: 8px; transition: transform 0.1s ease; } + &.expanded::before { transform: rotate(90deg); } } + .json-tree-leaf-value, .json-tree-branch-preview { word-break: break-all; } + .json-tree-branch-preview { overflow: hidden; font-style: italic; diff --git a/public/sass/components/_panel_editor.scss b/public/sass/components/_panel_editor.scss index e483ae1c2b3..615307c8a83 100644 --- a/public/sass/components/_panel_editor.scss +++ b/public/sass/components/_panel_editor.scss @@ -174,7 +174,6 @@ } .panel-editor-tabs { - position: relative; z-index: 2; display: flex; flex-direction: column; @@ -221,7 +220,6 @@ &:hover { filter: $panel-editor-side-menu-shadow; - transform: translate(-2px, -2px); transform: scale(1.1); } } diff --git a/public/sass/components/_panel_gettingstarted.scss b/public/sass/components/_panel_gettingstarted.scss index f46c4569589..5bbc4ba29ca 100644 --- a/public/sass/components/_panel_gettingstarted.scss +++ b/public/sass/components/_panel_gettingstarted.scss @@ -51,8 +51,7 @@ $path-position: $marker-size-half - ($path-height / 2); min-width: $marker-size; &::after { - right: -50%; - content: ""; + content: ''; display: block; position: absolute; z-index: 1; @@ -105,7 +104,7 @@ $path-position: $marker-size-half - ($path-height / 2); // change icon to check .icon-gf::before { - content: "\e604"; + content: '\e604'; } } .progress-text { diff --git a/public/sass/components/_panel_graph.scss b/public/sass/components/_panel_graph.scss index 9f7a9575b61..b35a600b9e1 100644 --- a/public/sass/components/_panel_graph.scss +++ b/public/sass/components/_panel_graph.scss @@ -368,7 +368,6 @@ font-size: $font-size-sm; position: absolute; text-align: center; - font-size: 12px; } .alert-handle-wrapper { diff --git a/public/sass/components/_shortcuts.scss b/public/sass/components/_shortcuts.scss index b5f61872585..447ca8c12a2 100644 --- a/public/sass/components/_shortcuts.scss +++ b/public/sass/components/_shortcuts.scss @@ -33,9 +33,8 @@ text-align: center; margin-right: 0.3rem; padding: 3px 5px; - font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace; + font: 11px Consolas, 'Liberation Mono', Menlo, Courier, monospace; line-height: 10px; - color: #555; vertical-align: middle; background-color: $btn-inverse-bg; border: solid 1px $btn-inverse-bg-hl; diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss index 5fdb1a5e32e..237574b93bc 100644 --- a/public/sass/components/_sidemenu.scss +++ b/public/sass/components/_sidemenu.scss @@ -29,12 +29,12 @@ .sidemenu-open { .sidemenu { background: $side-menu-bg; - position: initial; height: auto; box-shadow: $side-menu-shadow; position: relative; z-index: $zindex-sidemenu; } + .sidemenu__top, .sidemenu__bottom { display: block; @@ -212,7 +212,6 @@ li.sidemenu-org-switcher { .sidemenu { width: 100%; background: $side-menu-bg-mobile; - position: initial; height: auto; box-shadow: $side-menu-shadow; position: relative; diff --git a/public/sass/components/_slate_editor.scss b/public/sass/components/_slate_editor.scss index 714b8c487c2..200f102d69a 100644 --- a/public/sass/components/_slate_editor.scss +++ b/public/sass/components/_slate_editor.scss @@ -32,7 +32,6 @@ left: -10000px; opacity: 0; border-radius: $border-radius; - transition: opacity 0.75s; border: $panel-border; max-height: calc(66vh); overflow-y: scroll; diff --git a/public/sass/components/_submenu.scss b/public/sass/components/_submenu.scss index a6844b9e66b..d4be5264d9d 100644 --- a/public/sass/components/_submenu.scss +++ b/public/sass/components/_submenu.scss @@ -22,10 +22,8 @@ } .submenu-item { - margin-right: 20px; display: inline-block; margin-right: 15px; - display: inline-block; float: left; .fa-caret-down { @@ -42,7 +40,6 @@ background-color: $input-bg; border: 1px solid $input-border-color; border-radius: $input-border-radius; - color: $input-color; box-sizing: content-box; display: inline-block; color: $text-color; diff --git a/public/sass/components/_switch.scss b/public/sass/components/_switch.scss index ab100a8c752..92756f81a76 100644 --- a/public/sass/components/_switch.scss +++ b/public/sass/components/_switch.scss @@ -19,15 +19,14 @@ gf-form-switch[disabled] { } .gf-form-switch { + display: flex; position: relative; - display: inline-block; width: 60px; height: $gf-form-input-height; background: $switch-bg; border: 1px solid $input-border-color; border-left: none; border-radius: $input-border-radius; - display: flex; align-items: center; justify-content: center; @@ -77,14 +76,13 @@ input:checked + .gf-form-switch__slider::before { .gf-form-checkbox { position: relative; - display: inline-block; + display: flex; width: 50px; height: $gf-form-input-height; background: $switch-bg; border: 1px solid $input-border-color; border-left: none; border-radius: $input-border-radius; - display: flex; align-items: center; justify-content: center; diff --git a/public/sass/components/_tabbed_view.scss b/public/sass/components/_tabbed_view.scss index ef21d54f71c..a47d9d65ceb 100644 --- a/public/sass/components/_tabbed_view.scss +++ b/public/sass/components/_tabbed_view.scss @@ -31,7 +31,6 @@ .tabbed-view-close-btn { float: right; - padding: 0; margin: 0; background-color: transparent; border: none; diff --git a/public/sass/components/_tags.scss b/public/sass/components/_tags.scss index 014d9f0be1e..692259facb3 100644 --- a/public/sass/components/_tags.scss +++ b/public/sass/components/_tags.scss @@ -25,6 +25,7 @@ border-width: 1px; border-style: solid; box-shadow: 0 0 1px rgba($white, 0.2); + .icon-tag { position: relative; top: 1px; diff --git a/public/sass/components/_tagsinput.scss b/public/sass/components/_tagsinput.scss index f4f0ed4c84d..e8cf9ea44e9 100644 --- a/public/sass/components/_tagsinput.scss +++ b/public/sass/components/_tagsinput.scss @@ -24,12 +24,15 @@ [data-role='remove'] { margin-left: 8px; cursor: pointer; + &::after { content: 'x'; padding: 0px 2px; } + &:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + &:active { box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } diff --git a/public/sass/components/_timepicker.scss b/public/sass/components/_timepicker.scss index f3a2079f749..1fea5e9634b 100644 --- a/public/sass/components/_timepicker.scss +++ b/public/sass/components/_timepicker.scss @@ -60,9 +60,11 @@ list-style: none; float: left; margin: 0 30px 10px 0px; + li { line-height: 22px; } + li.active { border-bottom: 1px solid $blue; margin: 3px 0; @@ -77,26 +79,32 @@ td { padding: 1px; } + button { @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl); background-image: none; border: none; color: $text-color; + &.active span { color: $blue; font-weight: bold; } + .text-info { color: $orange; font-weight: bold; } + &.btn-sm { font-size: $font-size-sm; padding: 5px 11px; } + &:hover { color: $text-color-strong; } + &[disabled] { color: $text-color; } @@ -119,6 +127,7 @@ .fa-chevron-left::before { content: '\f053'; } + .fa-chevron-right::before { content: '\f054'; } diff --git a/public/sass/components/_tooltip.scss b/public/sass/components/_tooltip.scss index b5799e49301..650d8ba1b1a 100644 --- a/public/sass/components/_tooltip.scss +++ b/public/sass/components/_tooltip.scss @@ -11,21 +11,26 @@ font-size: 11px; line-height: 1.4; @include opacity(0); + &.in { @include opacity(100); } + &.top { margin-top: -3px; padding: 5px 0; } + &.right { margin-left: 3px; padding: 0 5px; } + &.bottom { margin-top: 3px; padding: 5px 0; } + &.left { margin-left: -3px; padding: 0 5px; @@ -60,6 +65,7 @@ border-width: $tooltipArrowWidth $tooltipArrowWidth 0; border-top-color: $tooltipArrowColor; } + &.right .tooltip-arrow { top: 50%; left: 0; @@ -67,6 +73,7 @@ border-width: $tooltipArrowWidth $tooltipArrowWidth $tooltipArrowWidth 0; border-right-color: $tooltipArrowColor; } + &.left .tooltip-arrow { top: 50%; right: 0; @@ -74,6 +81,7 @@ border-width: $tooltipArrowWidth 0 $tooltipArrowWidth $tooltipArrowWidth; border-left-color: $tooltipArrowColor; } + &.bottom .tooltip-arrow { top: 0; left: 50%; @@ -98,6 +106,7 @@ max-height: 600px; overflow: hidden; line-height: 14px; + a { color: $tooltipLinkColor; } diff --git a/public/sass/components/_view_states.scss b/public/sass/components/_view_states.scss index c0f8c72ab4f..b92bd596193 100644 --- a/public/sass/components/_view_states.scss +++ b/public/sass/components/_view_states.scss @@ -10,6 +10,7 @@ .navbar-page-btn { transform: translate3d(-36px, 0, 0); + i { opacity: 0; } @@ -40,9 +41,11 @@ .navbar { display: none; } + .scroll-canvas--dashboard { height: 100%; } + .submenu-controls { display: none; } diff --git a/public/sass/components/edit_sidemenu.scss b/public/sass/components/edit_sidemenu.scss index 4fc6795c068..8d60851b4d3 100644 --- a/public/sass/components/edit_sidemenu.scss +++ b/public/sass/components/edit_sidemenu.scss @@ -46,6 +46,7 @@ li { float: left; } + a { margin: 0.3rem 1rem; } diff --git a/public/sass/fonts.scss b/public/sass/fonts.scss index 8d50752f4e7..02fb498356a 100644 --- a/public/sass/fonts.scss +++ b/public/sass/fonts.scss @@ -1 +1 @@ -@import "base/fonts"; +@import 'base/fonts'; diff --git a/public/sass/grafana.dark.scss b/public/sass/grafana.dark.scss index 53193d213e6..f7f5163f36f 100644 --- a/public/sass/grafana.dark.scss +++ b/public/sass/grafana.dark.scss @@ -1,3 +1,3 @@ -@import "variables"; -@import "variables.dark"; -@import "grafana"; +@import 'variables'; +@import 'variables.dark'; +@import 'grafana'; diff --git a/public/sass/grafana.light.scss b/public/sass/grafana.light.scss index e03d24470e6..d7824edfc5d 100644 --- a/public/sass/grafana.light.scss +++ b/public/sass/grafana.light.scss @@ -1,3 +1,3 @@ -@import "variables"; -@import "variables.light"; -@import "grafana"; +@import 'variables'; +@import 'variables.light'; +@import 'grafana'; diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index a17c1c67d7b..818dc6c3e60 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -42,15 +42,13 @@ overflow: auto; height: 100%; -webkit-overflow-scrolling: touch; + display: flex; + flex-direction: column; &--dashboard { height: calc(100% - 56px); } - // Sticky footer - display: flex; - flex-direction: column; - > div { flex-grow: 1; } diff --git a/public/sass/mixins/_forms.scss b/public/sass/mixins/_forms.scss index ce488f0f636..5d2a4421353 100644 --- a/public/sass/mixins/_forms.scss +++ b/public/sass/mixins/_forms.scss @@ -13,16 +13,9 @@ .custom-control { color: $color; } - // Set the border and box shadow on specific inputs to match + .form-control { border-color: $color; - // @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work - - &:focus { - // border-color: darken($border-color, 10%); - // $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%); - // @include box-shadow($shadow); - } } // Set validation states also for addons diff --git a/public/sass/pages/_history.scss b/public/sass/pages/_history.scss index ea845b78445..42aa58f0bb7 100644 --- a/public/sass/pages/_history.scss +++ b/public/sass/pages/_history.scss @@ -29,10 +29,6 @@ white-space: nowrap; position: relative; - &:before, - &:after { - } - &:after { left: -40px; } diff --git a/public/sass/pages/_login.scss b/public/sass/pages/_login.scss index 4baff47b2a8..091391da7ff 100644 --- a/public/sass/pages/_login.scss +++ b/public/sass/pages/_login.scss @@ -13,9 +13,11 @@ $login-border: #8daac5; background-image: url(../img/heatmap_bg_test.svg); background-size: cover; color: #d8d9da; + & a { color: #d8d9da !important; } + & .btn-primary { @include buttonBackground(#ff6600, #bc3e06); } @@ -198,6 +200,10 @@ select:-webkit-autofill:focus { border: none; font-size: 15px; padding: 10px 10px; + font-weight: bold; + display: inline-block; + width: 170px; + color: $text-color; &.active { background: darken($tight-form-bg, 5%); @@ -207,11 +213,6 @@ select:-webkit-autofill:focus { &:focus { outline: 0; } - - font-weight: bold; - display: inline-block; - width: 170px; - color: $text-color; } .password-strength { @@ -222,10 +223,12 @@ select:-webkit-autofill:focus { padding-top: 3px; color: darken($text-color, 20%); border-top: 3px solid $red; + &.password-strength-ok { width: 40%; border-top: 3px solid lighten($yellow, 10%); } + &.password-strength-good { width: 100%; border-top: 3px solid lighten($green, 10%); @@ -252,6 +255,7 @@ select:-webkit-autofill:focus { .password-recovery { background: $tight-form-bg; padding: 10px; + a { color: $gray-2; } diff --git a/public/sass/pages/_plugins.scss b/public/sass/pages/_plugins.scss index 15149dd0d35..2570eb6c791 100644 --- a/public/sass/pages/_plugins.scss +++ b/public/sass/pages/_plugins.scss @@ -3,9 +3,11 @@ font-size: $font-size-sm; position: relative; top: 1.2rem; + &:hover { color: $link-hover-color; } + img { vertical-align: top; } @@ -18,12 +20,12 @@ } .plugin-info-list-item { - img { - width: 16px; - } - white-space: nowrap; max-width: $page-sidebar-width; text-overflow: ellipsis; overflow: hidden; + + img { + width: 16px; + } } diff --git a/public/sass/utils/_validation.scss b/public/sass/utils/_validation.scss index 657d1f0414b..307afde42d1 100644 --- a/public/sass/utils/_validation.scss +++ b/public/sass/utils/_validation.scss @@ -1,6 +1,3 @@ -input[type='text'].ng-dirty.ng-invalid { -} - input.validation-error, input.ng-dirty.ng-invalid { box-shadow: inset 0 0px 5px $red; diff --git a/scripts/grunt/options/sasslint.js b/scripts/grunt/options/sasslint.js index 9877f49a5a3..e7651b5ece8 100644 --- a/scripts/grunt/options/sasslint.js +++ b/scripts/grunt/options/sasslint.js @@ -4,10 +4,9 @@ module.exports = function(config) { options: { configFile: 'public/sass/.sass-lint.yml', }, - // src: ['public/sass#<{(||)}>#*'], - target: [ - 'public/sass/*.scss', - 'public/sass/components/*.scss', - ] + src: [ + 'public/sass/**/*.scss', + 'packages/**/*.scss', + ], }; };