From db981d1828bc38d7e40ae9cb964bf9a6fa14d4b9 Mon Sep 17 00:00:00 2001 From: slackero Date: Tue, 15 Feb 2022 15:47:41 +0300 Subject: [PATCH] build: added SASS to render css before postcss --- dist/datepicker.css | 235 ++++++++++++++++++------------------ package-lock.json | 45 ++++++- package.json | 3 +- src/css/datepicker.css | 262 ++++++++++++++++------------------------- 4 files changed, 267 insertions(+), 278 deletions(-) diff --git a/dist/datepicker.css b/dist/datepicker.css index 63a2282..0007e7d 100644 --- a/dist/datepicker.css +++ b/dist/datepicker.css @@ -5,9 +5,8 @@ * Copyright 2014-present Chen Fengyuan * Released under the MIT license * - * Date: 2022-02-15T10:47:57.089Z + * Date: 2022-02-15T12:46:47.044Z */ - .datepicker-container { background-color: #fff; direction: ltr; @@ -25,18 +24,18 @@ -ms-user-select: none; user-select: none; width: 210px; - z-index: -1 + z-index: -1; } .datepicker-container::before, - .datepicker-container::after { - border: 5px solid transparent; - content: " "; - display: block; - height: 0; - position: absolute; - width: 0; - } +.datepicker-container::after { + border: 5px solid transparent; + content: " "; + display: block; + height: 0; + position: absolute; + width: 0; +} .datepicker-dropdown { border: 1px solid #ccc; @@ -54,146 +53,152 @@ .datepicker-top-left, .datepicker-top-right { - border-top-color: #39f + border-top-color: #39f; +} + +.datepicker-top-left::before, +.datepicker-top-left::after, +.datepicker-top-right::before, +.datepicker-top-right::after { + border-top: 0; + left: 10px; + top: -5px; } .datepicker-top-left::before, - .datepicker-top-right::before, - .datepicker-top-left::after, - .datepicker-top-right::after { - border-top: 0; - left: 10px; - top: -5px; - } - -.datepicker-top-left::before, .datepicker-top-right::before { - border-bottom-color: #39f; - } - -.datepicker-top-left::after, .datepicker-top-right::after { - border-bottom-color: #fff; - top: -4px; - } +.datepicker-top-right::before { + border-bottom-color: #39f; +} + +.datepicker-top-left::after, +.datepicker-top-right::after { + border-bottom-color: #fff; + top: -4px; +} .datepicker-bottom-left, .datepicker-bottom-right { - border-bottom-color: #39f + border-bottom-color: #39f; } .datepicker-bottom-left::before, - .datepicker-bottom-right::before, - .datepicker-bottom-left::after, - .datepicker-bottom-right::after { - border-bottom: 0; - bottom: -5px; - left: 10px; - } - -.datepicker-bottom-left::before, .datepicker-bottom-right::before { - border-top-color: #39f; - } - -.datepicker-bottom-left::after, .datepicker-bottom-right::after { - border-top-color: #fff; - bottom: -4px; - } +.datepicker-bottom-left::after, +.datepicker-bottom-right::before, +.datepicker-bottom-right::after { + border-bottom: 0; + bottom: -5px; + left: 10px; +} + +.datepicker-bottom-left::before, +.datepicker-bottom-right::before { + border-top-color: #39f; +} + +.datepicker-bottom-left::after, +.datepicker-bottom-right::after { + border-top-color: #fff; + bottom: -4px; +} .datepicker-top-right::before, - .datepicker-bottom-right::before, - .datepicker-top-right::after, - .datepicker-bottom-right::after { - left: auto; - right: 10px; - } +.datepicker-top-right::after, +.datepicker-bottom-right::before, +.datepicker-bottom-right::after { + left: auto; + right: 10px; +} .datepicker-panel > ul { - margin: 0; - padding: 0; - width: 102% - } + margin: 0; + padding: 0; + width: 102%; +} .datepicker-panel > ul::before, - .datepicker-panel > ul::after { - content: " "; - display: table; - } +.datepicker-panel > ul::after { + content: " "; + display: table; +} .datepicker-panel > ul::after { - clear: both; - } + clear: both; +} .datepicker-panel > ul > li { - background-color: #fff; - cursor: pointer; - float: left; - height: 30px; - list-style: none; - margin: 0; - padding: 0; - text-align: center; - width: 30px - } + background-color: #fff; + cursor: pointer; + float: left; + height: 30px; + list-style: none; + margin: 0; + padding: 0; + text-align: center; + width: 30px; +} .datepicker-panel > ul > li:hover { - background-color: rgb(229, 242, 255); - } + background-color: #e5f2ff; +} .datepicker-panel > ul > li.muted, - .datepicker-panel > ul > li.muted:hover { - color: #999; - } +.datepicker-panel > ul > li.muted:hover { + color: #999; +} .datepicker-panel > ul > li.highlighted { - background-color: rgb(229, 242, 255) - } + background-color: #e5f2ff; +} .datepicker-panel > ul > li.highlighted:hover { - background-color: rgb(204, 229, 255); - } + background-color: #cce5ff; +} .datepicker-panel > ul > li.picked, - .datepicker-panel > ul > li.picked:hover { - color: #39f; - } +.datepicker-panel > ul > li.picked:hover { + color: #39f; +} .datepicker-panel > ul > li.disabled, - .datepicker-panel > ul > li.disabled:hover { - background-color: #fff; - color: #ccc; - cursor: default - } +.datepicker-panel > ul > li.disabled:hover { + background-color: #fff; + color: #ccc; + cursor: default; +} -.datepicker-panel > ul > li.disabled.highlighted, .datepicker-panel > ul > li.disabled.highlighted:hover { - background-color: rgb(229, 242, 255); - } +.datepicker-panel > ul > li.disabled.highlighted, +.datepicker-panel > ul > li.disabled:hover.highlighted { + background-color: #e5f2ff; +} .datepicker-panel > ul > li[data-view="years prev"], - .datepicker-panel > ul > li[data-view="year prev"], - .datepicker-panel > ul > li[data-view="month prev"], - .datepicker-panel > ul > li[data-view="years next"], - .datepicker-panel > ul > li[data-view="year next"], - .datepicker-panel > ul > li[data-view="month next"], - .datepicker-panel > ul > li[data-view="next"] { - font-size: 18px; - } +.datepicker-panel > ul > li[data-view="year prev"], +.datepicker-panel > ul > li[data-view="month prev"], +.datepicker-panel > ul > li[data-view="years next"], +.datepicker-panel > ul > li[data-view="year next"], +.datepicker-panel > ul > li[data-view="month next"], +.datepicker-panel > ul > li[data-view=next] { + font-size: 18px; +} .datepicker-panel > ul > li[data-view="years current"], - .datepicker-panel > ul > li[data-view="year current"], - .datepicker-panel > ul > li[data-view="month current"] { - width: 150px; - } - -.datepicker-panel > ul[data-view="years"] > li, .datepicker-panel > ul[data-view="months"] > li { - height: 52.5px; - line-height: 52.5px; - width: 52.5px; - } - -.datepicker-panel > ul[data-view="week"] > li, - .datepicker-panel > ul[data-view="week"] > li:hover { - background-color: #fff; - cursor: default; - } +.datepicker-panel > ul > li[data-view="year current"], +.datepicker-panel > ul > li[data-view="month current"] { + width: 150px; +} + +.datepicker-panel > ul[data-view=years] > li, +.datepicker-panel > ul[data-view=months] > li { + height: 52.5px; + line-height: 52.5px; + width: 52.5px; +} + +.datepicker-panel > ul[data-view=week] > li, +.datepicker-panel > ul[data-view=week] > li:hover { + background-color: #fff; + cursor: default; +} .datepicker-hide { display: none; diff --git a/package-lock.json b/package-lock.json index d84f627..2bf2f25 100644 --- a/package-lock.json +++ b/package-lock.json @@ -33,6 +33,7 @@ "rollup-plugin-babel": "^4.3.3", "rollup-plugin-commonjs": "^10.1.0", "rollup-plugin-node-resolve": "^5.2.0", + "sass": "^1.49.7", "stylelint": "^13.7.2", "stylelint-config-standard": "^20.0.0", "stylelint-order": "^4.1.0", @@ -6884,6 +6885,12 @@ "node": ">= 4" } }, + "node_modules/immutable": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz", + "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==", + "dev": true + }, "node_modules/import-fresh": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz", @@ -11840,6 +11847,23 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true }, + "node_modules/sass": { + "version": "1.49.7", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.49.7.tgz", + "integrity": "sha512-13dml55EMIR2rS4d/RDHHP0sXMY3+30e1TKsyXaSz3iLWVoDWEoboY8WzJd5JMnxrRHffKO3wq2mpJ0jxRJiEQ==", + "dev": true, + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/semver": { "version": "5.7.1", "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", @@ -12155,7 +12179,6 @@ "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", "dev": true, - "peer": true, "engines": { "node": ">=0.10.0" } @@ -19157,6 +19180,12 @@ "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==", "dev": true }, + "immutable": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz", + "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==", + "dev": true + }, "import-fresh": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz", @@ -22841,6 +22870,17 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true }, + "sass": { + "version": "1.49.7", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.49.7.tgz", + "integrity": "sha512-13dml55EMIR2rS4d/RDHHP0sXMY3+30e1TKsyXaSz3iLWVoDWEoboY8WzJd5JMnxrRHffKO3wq2mpJ0jxRJiEQ==", + "dev": true, + "requires": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + } + }, "semver": { "version": "5.7.1", "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", @@ -23109,8 +23149,7 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", - "dev": true, - "peer": true + "dev": true }, "source-map-resolve": { "version": "0.5.3", diff --git a/package.json b/package.json index f493d24..bbdc348 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ ], "scripts": { "build": "npm run build:css && npm run build:js", - "build:css": "postcss src/index.css -o dist/datepicker.css --no-map", + "build:css": "sass --no-source-map src/css/datepicker.scss src/css/datepicker.css && postcss src/index.css -o dist/datepicker.css --no-map", "build:js": "rollup -c", "clear": "del-cli dist", "compress": "npm run compress:css && npm run compress:js", @@ -82,6 +82,7 @@ "rollup-plugin-babel": "^4.3.3", "rollup-plugin-commonjs": "^10.1.0", "rollup-plugin-node-resolve": "^5.2.0", + "sass": "^1.49.7", "stylelint": "^13.7.2", "stylelint-config-standard": "^20.0.0", "stylelint-order": "^4.1.0", diff --git a/src/css/datepicker.css b/src/css/datepicker.css index 2ad10e9..1cdc46e 100644 --- a/src/css/datepicker.css +++ b/src/css/datepicker.css @@ -12,18 +12,15 @@ user-select: none; width: 210px; z-index: -1; - - &::before, - &::after { - border: 5px solid transparent; - content: " "; - display: block; - height: 0; - position: absolute; - width: 0; - } -} - +} +.datepicker-container::before, .datepicker-container::after { + border: 5px solid transparent; + content: " "; + display: block; + height: 0; + position: absolute; + width: 0; +} .datepicker-dropdown { border: 1px solid #ccc; box-shadow: 0 3px 6px #ccc; @@ -31,158 +28,105 @@ position: absolute; z-index: 1; } - .datepicker-inline { position: static; } - -.datepicker-top-left, -.datepicker-top-right { +.datepicker-top-left, .datepicker-top-right { border-top-color: #39f; - - &::before, - &::after { - border-top: 0; - left: 10px; - top: -5px; - } - - &::before { - border-bottom-color: #39f; - } - - &::after { - border-bottom-color: #fff; - top: -4px; - } -} - -.datepicker-bottom-left, -.datepicker-bottom-right { +} +.datepicker-top-left::before, .datepicker-top-left::after, .datepicker-top-right::before, .datepicker-top-right::after { + border-top: 0; + left: 10px; + top: -5px; +} +.datepicker-top-left::before, .datepicker-top-right::before { + border-bottom-color: #39f; +} +.datepicker-top-left::after, .datepicker-top-right::after { + border-bottom-color: #fff; + top: -4px; +} +.datepicker-bottom-left, .datepicker-bottom-right { border-bottom-color: #39f; - - &::before, - &::after { - border-bottom: 0; - bottom: -5px; - left: 10px; - } - - &::before { - border-top-color: #39f; - } - - &::after { - border-top-color: #fff; - bottom: -4px; - } -} - -.datepicker-top-right, -.datepicker-bottom-right { - &::before, - &::after { - left: auto; - right: 10px; - } -} - -.datepicker-panel { - & > ul { - margin: 0; - padding: 0; - width: 102%; - - &::before, - &::after { - content: " "; - display: table; - } - - &::after { - clear: both; - } - - & > li { - background-color: #fff; - cursor: pointer; - float: left; - height: 30px; - list-style: none; - margin: 0; - padding: 0; - text-align: center; - width: 30px; - - &:hover { - background-color: rgb(229, 242, 255); - } - - &.muted, - &.muted:hover { - color: #999; - } - - &.highlighted { - background-color: rgb(229, 242, 255); - - &:hover { - background-color: rgb(204, 229, 255); - } - } - - &.picked, - &.picked:hover { - color: #39f; - } - - &.disabled, - &.disabled:hover { - background-color: #fff; - color: #ccc; - cursor: default; - - &.highlighted { - background-color: rgb(229, 242, 255); - } - } - - &[data-view="years prev"], - &[data-view="year prev"], - &[data-view="month prev"], - &[data-view="years next"], - &[data-view="year next"], - &[data-view="month next"], - &[data-view="next"] { - font-size: 18px; - } - - &[data-view="years current"], - &[data-view="year current"], - &[data-view="month current"] { - width: 150px; - } - } - - &[data-view="years"], - &[data-view="months"] { - & > li { - height: 52.5px; - line-height: 52.5px; - width: 52.5px; - } - } - - &[data-view="week"] { - & > li, - & > li:hover { - background-color: #fff; - cursor: default; - } - } - } -} - +} +.datepicker-bottom-left::before, .datepicker-bottom-left::after, .datepicker-bottom-right::before, .datepicker-bottom-right::after { + border-bottom: 0; + bottom: -5px; + left: 10px; +} +.datepicker-bottom-left::before, .datepicker-bottom-right::before { + border-top-color: #39f; +} +.datepicker-bottom-left::after, .datepicker-bottom-right::after { + border-top-color: #fff; + bottom: -4px; +} +.datepicker-top-right::before, .datepicker-top-right::after, .datepicker-bottom-right::before, .datepicker-bottom-right::after { + left: auto; + right: 10px; +} +.datepicker-panel > ul { + margin: 0; + padding: 0; + width: 102%; +} +.datepicker-panel > ul::before, .datepicker-panel > ul::after { + content: " "; + display: table; +} +.datepicker-panel > ul::after { + clear: both; +} +.datepicker-panel > ul > li { + background-color: #fff; + cursor: pointer; + float: left; + height: 30px; + list-style: none; + margin: 0; + padding: 0; + text-align: center; + width: 30px; +} +.datepicker-panel > ul > li:hover { + background-color: #e5f2ff; +} +.datepicker-panel > ul > li.muted, .datepicker-panel > ul > li.muted:hover { + color: #999; +} +.datepicker-panel > ul > li.highlighted { + background-color: #e5f2ff; +} +.datepicker-panel > ul > li.highlighted:hover { + background-color: #cce5ff; +} +.datepicker-panel > ul > li.picked, .datepicker-panel > ul > li.picked:hover { + color: #39f; +} +.datepicker-panel > ul > li.disabled, .datepicker-panel > ul > li.disabled:hover { + background-color: #fff; + color: #ccc; + cursor: default; +} +.datepicker-panel > ul > li.disabled.highlighted, .datepicker-panel > ul > li.disabled:hover.highlighted { + background-color: #e5f2ff; +} +.datepicker-panel > ul > li[data-view="years prev"], .datepicker-panel > ul > li[data-view="year prev"], .datepicker-panel > ul > li[data-view="month prev"], .datepicker-panel > ul > li[data-view="years next"], .datepicker-panel > ul > li[data-view="year next"], .datepicker-panel > ul > li[data-view="month next"], .datepicker-panel > ul > li[data-view=next] { + font-size: 18px; +} +.datepicker-panel > ul > li[data-view="years current"], .datepicker-panel > ul > li[data-view="year current"], .datepicker-panel > ul > li[data-view="month current"] { + width: 150px; +} +.datepicker-panel > ul[data-view=years] > li, .datepicker-panel > ul[data-view=months] > li { + height: 52.5px; + line-height: 52.5px; + width: 52.5px; +} +.datepicker-panel > ul[data-view=week] > li, +.datepicker-panel > ul[data-view=week] > li:hover { + background-color: #fff; + cursor: default; +} .datepicker-hide { display: none; }