diff --git a/package.json b/package.json index 999ea52..578e928 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 b43d649..ee5dbd9 100644 --- a/src/main.less +++ b/src/main.less @@ -1,204 +1,259 @@ +/* eslint-disable */ .qv-object-qlik-smart-pivot { @TableBorder: 1px solid #d3d3d3; @KpiTableWidth: 230px; - .edit-mode{ + + .edit-mode { pointer-events: none; } + ._cell(@Width: 50px) { - min-width: @Width!important; - max-width: @Width!important; - cursor: pointer; - line-height: 1em!important; + min-width: @Width !important; + max-width: @Width !important; + cursor: pointer; + line-height: 1em !important; } - div.qv-object-content-container { - z-index: 110; - } + div.qv-object-content-container { + 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: @TableBorder; + border-right: @TableBorder; + border-top: @TableBorder; + } - 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: @TableBorder; + } - .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; - } + /* ***************** */ - tbody tr:hover { - cursor: default; - background-color: #808080 !important; - color: #ffffff; - } + /* Medium column size */ - .grid-cells-header { - padding: 0px; - } + /* ***************** */ - .grid-cells-title { - min-width: 522px; - } + .grid-cells { + ._cell(70px); + } - .grid-cells:before { - content: "\00a0"; - } + .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); + } + + /* END OF GRID CELLS */ + + /* First Column */ + .fdim-cells { + min-width: 230px !Important; + max-width: 230px !Important; + cursor: pointer; + background-color: #fff; + } + + .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; + } + + /* popups for headers */ + .header-wrapper { + position: absolute; + top: 0; + z-index: 1; } - /*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 { - height: calc(~"100% - 97px"); - padding: 0; - margin-top: 0; + height: calc(~"100% - 97px"); + 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; + width: @KpiTableWidth !important; + overflow: hidden !important; height: 100%; - margin: 0; - padding: 0; - position: absolute; - top: 0; - left: 0; - border-right: 1px solid white; - box-shadow: 4px 2px 8px #e1e1e1; + margin: 0; + padding: 0; + position: absolute; + top: 0; + left: 0; + border-right: 1px solid #fff; + box-shadow: 4px 2px 8px #e1e1e1; .row-wrapper { - height: calc(~"100% - 97px"); + height: calc(~"100% - 97px"); overflow: scroll; position: absolute; - padding: 0; - margin-top: 0; + padding: 0; + margin-top: 0; } } .data-table { - height: 100%; + height: 100%; width: calc(100% - 243px); - position: absolute; - margin-left: @KpiTableWidth + 13px; + position: absolute; + margin-left: @KpiTableWidth + 13px; .header-wrapper { overflow: scroll; @@ -206,11 +261,11 @@ } .row-wrapper { - height: calc(~"100% - 97px"); + height: calc(~"100% - 97px"); width: 100%; overflow: scroll; - padding: 0; - margin-top: 0; + padding: 0; + margin-top: 0; } } @@ -219,11 +274,11 @@ .kpi-table .row-wrapper, .data-table .header-wrapper, .data-table .row-wrapper { - -ms-overflow-style: none; // IE 10+ - -moz-overflow: -moz-scrollbars-none; // Firefox + -ms-overflow-style: none; // IE 10+ + -moz-overflow: -moz-scrollbars-none; // Firefox &::-webkit-scrollbar { - display: none; // Safari and Chrome + display: none; // Safari and Chrome } } } 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 83f5ec2..c14bd9b 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -75,7 +75,9 @@ const config = { 'resources/Accounts2.csv', 'resources/QlikLook.csv' ], {}), - new StyleLintPlugin() + new StyleLintPlugin({ + files: '**/*.less' + }) ] };