diff --git a/package.json b/package.json index 4584c2b..1411b64 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,8 @@ "eslint:fix": "eslint --fix src", "test": "karma start karma.conf.js", "test-once": "karma start karma.conf.js --single-run", - "watch": "gulp watch" + "watch": "gulp watch", + "stylelint": "stylelint src/main.less" }, "devDependencies": { "@babel/core": "7.1.2", diff --git a/src/main.less b/src/main.less index 9f96728..756ee70 100644 --- a/src/main.less +++ b/src/main.less @@ -1,215 +1,212 @@ .qv-object-qlik-smart-pivot { - @TableBorder: 1px solid #d3d3d3; - @KpiTableWidth: 230px; + @table-border: 1px solid #d3d3d3; + @kpi-table-width: 230px; - ._cell(@Width: 50px) { - min-width: @Width!important; - max-width: @Width!important; - cursor: pointer; - line-height: 1em!important; + .get-cell(@cell-width: 50px) { + min-width: @cell-width !important; + max-width: @cell-width !important; + cursor: pointer; + line-height: 1em !important; } - div.qv-object-content-container { - overflow-x: scroll; - overflow-y: hidden; - z-index: 110; - } + div.qv-object-content-container { + overflow-x: scroll; + overflow-y: hidden; + z-index: 110; + } - .icon-xls { - text-align: left; - } + .icon-xls { + text-align: left; + } - button { - width: 100%; - } + button { + width: 100%; + } - table { - border-collapse: collapse; - border-spacing: 0; - width: auto; - border-left: @TableBorder; - border-right: @TableBorder; - border-top: @TableBorder; - } + table { + border-collapse: collapse; + border-spacing: 0; + width: auto; + border-left: @table-border; + border-right: @table-border; + border-top: @table-border; + } - td, th { - border: 1px solid #ffffff; - padding: 5px; - border-collapse: collapse; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - vertical-align: middle; - cursor: default; - } + td, + th { + border: 1px solid #fff; + padding: 5px; + border-collapse: collapse; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + vertical-align: middle; + cursor: default; + } - .empty { - width: 3%; - background: #ffffff; - min-width: 4px !important; - max-width: 4px !important; - } + .empty { + width: 3%; + background: #fff; + min-width: 4px !important; + max-width: 4px !important; + } - th.main-kpi { - text-align: center; - vertical-align: middle; - border-bottom: @TableBorder; - } + th.main-kpi { + text-align: center; + vertical-align: middle; + border-bottom: @table-border; + } - .numeric { - text-align: right; - } - /*This is for wrap text in headers*/ - .wrapclass25 { - width: 100%; - height: 25px; - white-space: pre-line; - overflow: hidden; - display: block; - } + .numeric { + text-align: right; + } - .wrapclass45 { - width: 100%; - height: 45px; - white-space: pre-line; - overflow: hidden; - display: block; - } + // This is for wrap text in headers + .wrapclass25 { + width: 100%; + height: 25px; + white-space: pre-line; + overflow: hidden; + display: block; + } - .wrapclass70 { - width: 100%; - height: 70px; - white-space: pre-line; - overflow: hidden; - display: inline-block; - vertical-align: middle; - line-height: 20px; - } + .wrapclass45 { + width: 100%; + height: 45px; + white-space: pre-line; + overflow: hidden; + display: block; + } - .wrapclassEmpty { - width: 100%; - } - /*******************/ - /* Medium column size*/ - /*******************/ - .grid-cells { ._cell(70px); } - .grid-cells2 { ._cell(70px); } - .grid-cells-small { ._cell(52px); } - .grid-cells2-small { ._cell(52px); } - /*******************/ - /* Small column size*/ - /*******************/ - .grid-cells-s { ._cell(67px); } - .grid-cells2-s { ._cell(67px); } - .grid-cells-small-s { ._cell(52px); } - .grid-cells2-small-s { ._cell(52px); } - /*******************/ - /* large column size*/ - /*******************/ - .grid-cells-l { ._cell(82px); } - .grid-cells2-l { ._cell(82px); } - .grid-cells-small-l { ._cell(66px); } - .grid-cells2-small-l { ._cell(66px); } + .wrapclass70 { + width: 100%; + height: 70px; + white-space: pre-line; + overflow: hidden; + display: inline-block; + vertical-align: middle; + line-height: 20px; + } - /*END OF GRID CELLS*/ - /*First Column*/ - .fdim-cells { - min-width: 230px !Important; - max-width: 230px !Important; - cursor: pointer; - background-color: white; - } + .wrapclassEmpty { + width: 100%; + } - .fdim-cells:hover { - /*cursor: default;*/ - background-color: #808080 !important; - color: #ffffff; - } + // Medium column size + .grid-cells { .get-cell(70px); } + .grid-cells2 { .get-cell(70px); } + .grid-cells-small { .get-cell(52px); } + .grid-cells2-small { .get-cell(52px); } - tbody tr:hover { - cursor: default; - background-color: #808080 !important; - color: #ffffff; - } + // Small column size + .grid-cells-s { .get-cell(67px); } + .grid-cells2-s { .get-cell(67px); } + .grid-cells-small-s { .get-cell(52px); } + .grid-cells2-small-s { .get-cell(52px); } - .grid-cells-header { - padding: 0px; - } + // Large column size + .grid-cells-l { .get-cell(82px); } + .grid-cells2-l { .get-cell(82px); } + .grid-cells-small-l { .get-cell(66px); } + .grid-cells2-small-l { .get-cell(66px); } - .grid-cells-title { - min-width: 522px; - } + // First Column + .fdim-cells { + min-width: 230px !Important; + max-width: 230px !Important; + cursor: pointer; + background-color: #fff; + } - .grid-cells:before { - content: "\00a0"; - } + .fdim-cells:hover { + background-color: #808080 !important; + color: #fff; + } + + tbody tr:hover { + cursor: default; + background-color: #808080 !important; + color: #fff; + } + + .grid-cells-header { + padding: 0; + } + + .grid-cells-title { + min-width: 522px; + } + + .grid-cells::before { + content: "\00a0"; + } .grid { - height: 50px; - width: 350px; + height: 50px; + width: 350px; } .header-wrapper { - position: absolute; - top: 0; - z-index: 1; + position: absolute; + top: 0; + z-index: 1; } - /*popups for headers*/ + // popups for headers .tooltip { - position: fixed !important; - color: RGB(70,70,70); - background-color: RGB(245,239,207); - text-align: center; - border: groove; + position: fixed !important; + color: rgb(70, 70, 70); + background-color: rgb(245, 239, 207); + text-align: center; + border: groove; } - /*end popups*/ .row-wrapper { - position: absolute; - top: 97px; - height: calc(~"100% - 97px"); - overflow-x: hidden; - overflow-y: scroll; - padding: 0; - margin-top: 0; + position: absolute; + top: 97px; + height: calc(~"100% - 97px"); + overflow-x: hidden; + overflow-y: scroll; + padding: 0; + margin-top: 0; } - .kpi-table .fdim-cells, .data-table td { - line-height: 1em!important; + .kpi-table .fdim-cells, + .data-table td { + line-height: 1em !important; } .data-table .fdim-cells { - display: none; + display: none; } .kpi-table { - width: @KpiTableWidth !important; - overflow: hidden !important; - display: table; - height: 100%; - margin: 0; - padding: 0; - z-index: 100; - position: absolute; - top: 0; - left: 0; - border-right: 1px solid white; - box-shadow: 4px 2px 8px #e1e1e1; - } + width: @kpi-table-width !important; + overflow: hidden !important; + display: table; + height: 100%; + margin: 0; + padding: 0; + z-index: 100; + position: absolute; + top: 0; + left: 0; + border-right: 1px solid #fff; + box-shadow: 4px 2px 8px #e1e1e1; - .kpi-table .row-wrapper { - overflow: hidden; + &.row-wrapper { + overflow: hidden; + } } .data-table { - width: 272px !important; - float: left; - display: table; - height: 100%; - z-index: 90; - position: absolute; - margin-left: @KpiTableWidth + 13px; - -ms-overflow-style: none; + width: 272px !important; + float: left; + display: table; + height: 100%; + z-index: 90; + position: absolute; + margin-left: @kpi-table-width + 13px; + -ms-overflow-style: none; } } diff --git a/stylelint.config.js b/stylelint.config.js index 2cdb4a0..3e5f353 100644 --- a/stylelint.config.js +++ b/stylelint.config.js @@ -1,35 +1,129 @@ -"use strict"; - module.exports = { - rules: { - "at-rule-no-unknown": true, - "block-no-empty": true, - "color-no-invalid-hex": true, - "comment-no-empty": true, - "declaration-block-no-duplicate-properties": [ - true, + 'rules': { + 'at-rule-empty-line-before': [ + 'always', { - ignore: ["consecutive-duplicates-with-different-values"] + except: [ + 'blockless-after-same-name-blockless', + 'first-nested' + ], + ignore: ['after-comment'] } ], - "declaration-block-no-shorthand-property-overrides": true, - "font-family-no-duplicate-names": true, - "font-family-no-missing-generic-family-keyword": true, - "function-calc-no-unspaced-operator": true, - "function-linear-gradient-no-nonstandard-direction": true, - "keyframe-declaration-no-important": true, - "media-feature-name-no-unknown": true, - "no-descending-specificity": true, - "no-duplicate-at-import-rules": true, - "no-duplicate-selectors": true, - "no-empty-source": true, - "no-extra-semicolons": true, - "no-invalid-double-slash-comments": true, - "property-no-unknown": true, - "selector-pseudo-class-no-unknown": true, - "selector-pseudo-element-no-unknown": true, - "selector-type-no-unknown": true, - "string-no-newline": true, - "unit-no-unknown": true + 'at-rule-name-case': 'lower', + 'at-rule-name-space-after': 'always-single-line', + 'at-rule-semicolon-newline-after': 'always', + 'block-closing-brace-empty-line-before': 'never', + 'block-closing-brace-newline-after': 'always', + 'block-closing-brace-newline-before': 'always-multi-line', + 'block-closing-brace-space-before': 'always-single-line', + 'block-opening-brace-newline-after': 'always-multi-line', + 'block-opening-brace-space-after': 'always-single-line', + 'block-opening-brace-space-before': 'always', + 'color-hex-case': 'lower', + 'color-hex-length': 'short', + 'color-named': 'never', + 'comment-empty-line-before': [ + 'always', + { + except: ['first-nested'], + ignore: ['stylelint-commands'] + } + ], + 'comment-whitespace-inside': 'always', + 'custom-property-empty-line-before': [ + 'always', + { + except: [ + 'after-custom-property', + 'first-nested' + ], + ignore: [ + 'after-comment', + 'inside-single-line-block' + ] + } + ], + 'declaration-bang-space-after': 'never', + 'declaration-bang-space-before': 'always', + 'declaration-block-semicolon-newline-after': 'always-multi-line', + 'declaration-block-semicolon-space-after': 'always-single-line', + 'declaration-block-semicolon-space-before': 'never', + 'declaration-block-single-line-max-declarations': 1, + 'declaration-block-trailing-semicolon': 'always', + 'declaration-colon-newline-after': 'always-multi-line', + 'declaration-colon-space-after': 'always-single-line', + 'declaration-colon-space-before': 'never', + 'declaration-empty-line-before': [ + 'always', + { + except: [ + 'after-declaration', + 'first-nested' + ], + ignore: [ + 'after-comment', + 'inside-single-line-block' + ] + } + ], + 'declaration-no-important': [ + true, + { + severity: 'warning' + } + ], + 'function-comma-newline-after': 'always-multi-line', + 'function-comma-space-after': 'always-single-line', + 'function-comma-space-before': 'never', + 'function-max-empty-lines': 0, + 'function-name-case': 'lower', + 'function-parentheses-newline-inside': 'always-multi-line', + 'function-parentheses-space-inside': 'never-single-line', + 'function-whitespace-after': 'always', + 'indentation': 2, + 'length-zero-no-unit': true, + 'max-empty-lines': 1, + 'max-nesting-depth': 3, + 'media-feature-colon-space-after': 'always', + 'media-feature-colon-space-before': 'never', + 'media-feature-name-case': 'lower', + 'media-feature-parentheses-space-inside': 'never', + 'media-feature-range-operator-space-after': 'always', + 'media-feature-range-operator-space-before': 'always', + 'media-query-list-comma-newline-after': 'always-multi-line', + 'media-query-list-comma-space-after': 'always-single-line', + 'media-query-list-comma-space-before': 'never', + 'no-extra-semicolons': true, + 'no-missing-end-of-source-newline': true, + 'number-leading-zero': 'always', + 'number-no-trailing-zeros': true, + 'property-case': 'lower', + 'rule-empty-line-before': [ + 'always-multi-line', + { + except: ['first-nested'], + ignore: ['after-comment'] + } + ], + 'selector-attribute-brackets-space-inside': 'never', + 'selector-attribute-operator-space-after': 'never', + 'selector-attribute-operator-space-before': 'never', + 'selector-combinator-space-after': 'always', + 'selector-combinator-space-before': 'always', + 'selector-descendant-combinator-no-non-space': true, + 'selector-list-comma-newline-after': 'always', + 'selector-list-comma-space-before': 'never', + 'selector-max-empty-lines': 0, + 'selector-pseudo-class-case': 'lower', + 'selector-pseudo-class-parentheses-space-inside': 'never', + 'selector-pseudo-element-case': 'lower', + 'selector-pseudo-element-colon-notation': 'double', + 'selector-type-case': 'lower', + 'unit-case': 'lower', + 'value-list-comma-newline-after': 'always-multi-line', + 'value-list-comma-space-after': 'always-single-line', + 'value-list-comma-space-before': 'never', + 'value-list-max-empty-lines': 0 } }; diff --git a/webpack.config.js b/webpack.config.js index a70a9b1..c60c85b 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -21,7 +21,7 @@ const config = { commonjs: 'jquery', commonjs2: 'jquery', root: '_' - }, + } }, // TODO: breaks core-js for some reason // resolve: { @@ -54,7 +54,11 @@ const config = { }, { test: /.less$/, - use: ['style-loader', 'css-loader', 'less-loader'] + use: [ + 'style-loader', + 'css-loader', + 'less-loader' + ] } ] }, @@ -68,9 +72,11 @@ const config = { 'resources/Accounts.csv', 'resources/Accounts2.csv', 'resources/QlikLook.csv', - 'resources/Excel.png', + 'resources/Excel.png' ], {}), - new StyleLintPlugin() + new StyleLintPlugin({ + files: '**/*.less' + }) ] };