From 9d6779ad746d761d4dd1c2fda535cffd5fb028ed Mon Sep 17 00:00:00 2001 From: perry-C <2558544545qwerty@gmail.com> Date: Wed, 1 Sep 2021 13:21:42 +0800 Subject: [PATCH 1/2] feat(slider): added hover effect --- components/slider/package.json | 5 ++- components/slider/src/.index.scss.swp | Bin 16384 -> 0 bytes components/slider/src/index.css.map | 1 - components/slider/src/index.scss | 51 +++++++++++++++----------- components/slider/src/index.tsx | 4 +- 5 files changed, 35 insertions(+), 26 deletions(-) delete mode 100644 components/slider/src/.index.scss.swp delete mode 100644 components/slider/src/index.css.map diff --git a/components/slider/package.json b/components/slider/package.json index e89c6fa6f..d5cc5d024 100644 --- a/components/slider/package.json +++ b/components/slider/package.json @@ -1,6 +1,6 @@ { "name": "@perry-c/slider", - "version": "0.0.20", + "version": "0.0.21", "main": "dist/index.es.js", "exports": { ".": "./dist/index.es.js" @@ -61,8 +61,11 @@ "@open-wc/testing": "^2.5.33", "@types/node": "^16.4.7", "@web/test-runner": "^0.13.13", + "css-loader": "^6.2.0", + "node-sass": "^6.0.1", "node-watch": "^0.7.1", "sass": "^1.36.0", + "sass-loader": "^12.1.0", "typescript": "^4.3.2", "vite": "^2.4.3" }, diff --git a/components/slider/src/.index.scss.swp b/components/slider/src/.index.scss.swp deleted file mode 100644 index a208ea82e71cc51549693286a91bcd9d3a9580b6..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 16384 zcmeI2TZr6L7{`y*wq9y2iemBQwB7E^*2&yj%QmIDMNldfETX6=C6meS#GT1Wb27Wz zUD_f-6{(h1DhghZLPdO#BHG$F9~7@Bcmpqp;)4&Of`Wn|{?9o%lSyXR-3K2;&$PeI z1#Z<}p{S+Z{R}&I?QM6y!7y0bIZPy|t)XxW{ z!^*VRu$tafg?0Rj%Q_(oyddTk-u9bbRN;|Z@q?x}Q|2z`OY&<983l|2OHtrbvbkQX zijo`FucKF7e*01mGG&YcMggOMQNSo*6fg=H1&jhlf&YjCakz{eLN3dae4b9W=jFEN zC;M0yke_FgtuB}BnvGGwC}0#Y3K#{90!9I&fKk9GU=%P47zK<1|3U?vCLtFgt|!F; z0G|Kr`~M#=BjhXaC3p>-1;;@Mir}-=gnSC#1h0UT;5ax69t8(M0PY35!7X4H*a=GD z8gLQ#?NUNM2Is(8a0Z+JhrxYd57+?;U@drW6(O&J$H4<&65I`n;HOIn`4+qkUIHgU z7wiKJ1Yj??5o`iift6r6xB&coF(IFWcfmX09C!-c4<^B0a4Wb0Sl~*q9DEM}KLW3U zSHSb&I5+|x0uKTX8sHYN4XguKf)(JG3kmrKd7~BIc0q0f{atu5S8sJWF z6Sy9Xf-Rs9YG5t+Z3Q9kgSWw3;0169%z;_37is33%v4csnKUrNJV+tFmapF@Ky6A(+skJ9f}Q7_o`S}}Ir5Mtd9UO!Ei+5Kj?=TH zF}6H^q7~b;V3ivR>R;SY0%StGj8?Q+20jT zGZ&?_lX)7I&RP`9W-Tl#Yh5# zDC2&P==OuSWooj0i`FBmP*tO@OueO4*5;OQrl(obRL6KX3|SO&TC_TB)^ftob1=NP zo=pS1|2C48>(%d+6BR8B2kB8}gensZE(WCf2%-=lWo@%*U9gmPOiK+==#?0Hd^EWI z1$=Ed+$)R>_$v|V@1Js58_7CcIF+z2!WateU_hX+0@X+9_-HpAh z-|O_5(}I!LcEoi?6->HctyUF)H4h5^qrU zC*yV_F0Nroi6ldGD|LyR=i=5AEzvAZC7ZMEtvVM}B6eP?=lBST>#z42%U0Uar^xpXbT`){*!63&v{tPZY`m)tGcx0y#O(&Z4 zf^3&B(OPw*91;3wKdPDJW;vMYpbgR?W+ffn8h4tW)n;<$lAH4&n1GM7s6(se&78X3 zhVNPpZ`SvsVzpcwEx|szP5j+lM-1iqs0>0LmUM&u;H8&R-@FTktz7isOpv0&^6gdk z$9Y<7+WYk^3(4_rH14>vPvzzk*Qt)BtTwGf40Ke#nG9z=U6wjJifDU1qOM}sV?f%N zDE)_s!?v^ErW29h6n=XKtHUuG3nM1xJQkfudM&gut?>#r-5Sn_CQt~_&YU(3=vUIf zu`BjbMI|JfUg~X%VLj`ljz*pJQp>xkRh6IgA}{@T}IEC=r{4?=j|kQD5o}q4&@v==SLKkCis!x;YZFRaJbT;ClF1P6D7nX7NdDV z-i_dRJ;hINAkYBDe7rdy#k5c^SMVP%(sx);iCbRBlW)!!M42x4=z8vOZewP-e!DUh z5<}cV8FBxA1@6PeeY?2-*U$Gq!9D&P;0$;XJO`cxkAb7$5pV`>@5r@&++;WrTF9*p~U*Ta4Q|_^~AvkXxjIZ4wuXMi$5I^ mj~uY1BGw_AdL2@oN1sh^b%r9$?DzcM;C@~Yxsa!yYyJf=n$|o3 diff --git a/components/slider/src/index.css.map b/components/slider/src/index.css.map deleted file mode 100644 index 697597610..000000000 --- a/components/slider/src/index.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sourceRoot":"","sources":["index.scss","../../common/theme.scss"],"names":[],"mappings":"AAsBA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAgCF;EACE;EACA;;AAEE;EACE;;AAUJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAQA;EACE;IACE;;;;AAON;EACE;;;AAGF;EACE;;;AAKE;EApGJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBCVU;EDWV;EACA;EACA;EACA;EA2FM;EACA;EACA;;AA3FN;EACE;;AAEF;EACE;;AA0FI;EArFN;EACA;EACA;EACA;;AAkFM;EArFN;EACA;EACA;EACA;;AAkFM;EArFN;EACA;EACA;EACA;;AA2EI;EApGJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBCVU;EDWV;EACA;EACA;EACA;EA2FM;EACA;EACA;;AA3FN;EACE;;AAEF;EACE;;AA0FI;EArFN;EACA;EACA;EACA;;AAkFM;EArFN;EACA;EACA;EACA;;AAkFM;EArFN;EACA;EACA;EACA;;AA2EI;EApGJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBCVU;EDWV;EACA;EACA;EACA;EA2FM;EACA;EACA;;AA3FN;EACE;;AAEF;EACE;;AA0FI;EArFN;EACA;EACA;EACA;;AAkFM;EArFN;EACA;EACA;EACA;;AAkFM;EArFN;EACA;EACA;EACA;;;AA2FI;EAIE;;AAJF;EAEI;EAEF;;AAIE;EAEI;;AAFJ;EAEI;;AAFJ;EAEI;;;AAVR;EAIE;;AAIE;EAKI;EACA;;AACA;EACE;;AAEF;EACE;;AAXN;EAKI;EACA;;AACA;EACE;;AAEF;EACE;;AAXN;EAKI;EACA;;AACA;EACE;;AAEF;EACE;;;AA7Cd;EACE;;;AAGF;EACE;;;AAKE;EApGJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBCVU;EDWV;EACA;EACA;EACA;EA2FM;EACA;EACA;;AA3FN;EACE;;AAEF;EACE;;AA0FI;EArFN;EACA;EACA;EACA;;AAkFM;EArFN;EACA;EACA;EACA;;AAkFM;EArFN;EACA;EACA;EACA;;AA2EI;EApGJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBCVU;EDWV;EACA;EACA;EACA;EA2FM;EACA;EACA;;AA3FN;EACE;;AAEF;EACE;;AA0FI;EArFN;EACA;EACA;EACA;;AAkFM;EArFN;EACA;EACA;EACA;;AAkFM;EArFN;EACA;EACA;EACA;;AA2EI;EApGJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBCVU;EDWV;EACA;EACA;EACA;EA2FM;EACA;EACA;;AA3FN;EACE;;AAEF;EACE;;AA0FI;EArFN;EACA;EACA;EACA;;AAkFM;EArFN;EACA;EACA;EACA;;AAkFM;EArFN;EACA;EACA;EACA;;;AA2FI;EAIE;;AAJF;EAEI;EAEF;;AAIE;EAEI;;AAFJ;EAEI;;AAFJ;EAEI;;;AAVR;EAIE;;AAIE;EAKI;EACA;;AACA;EACE;;AAEF;EACE;;AAXN;EAKI;EACA;;AACA;EACE;;AAEF;EACE;;AAXN;EAKI;EACA;;AACA;EACE;;AAEF;EACE;;;AA7Cd;EACE;;;AAGF;EACE;;;AAKE;EApGJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBCVU;EDWV;EACA;EACA;EACA;EA2FM;EACA;EACA;;AA3FN;EACE;;AAEF;EACE;;AA0FI;EArFN;EACA;EACA;EACA;;AAkFM;EArFN;EACA;EACA;EACA;;AAkFM;EArFN;EACA;EACA;EACA;;AA2EI;EApGJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBCVU;EDWV;EACA;EACA;EACA;EA2FM;EACA;EACA;;AA3FN;EACE;;AAEF;EACE;;AA0FI;EArFN;EACA;EACA;EACA;;AAkFM;EArFN;EACA;EACA;EACA;;AAkFM;EArFN;EACA;EACA;EACA;;AA2EI;EApGJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBCVU;EDWV;EACA;EACA;EACA;EA2FM;EACA;EACA;;AA3FN;EACE;;AAEF;EACE;;AA0FI;EArFN;EACA;EACA;EACA;;AAkFM;EArFN;EACA;EACA;EACA;;AAkFM;EArFN;EACA;EACA;EACA;;;AA2FI;EAIE;;AAJF;EAEI;EAEF;;AAIE;EAEI;;AAFJ;EAEI;;AAFJ;EAEI;;;AAVR;EAIE;;AAIE;EAKI;EACA;;AACA;EACE;;AAEF;EACE;;AAXN;EAKI;EACA;;AACA;EACE;;AAEF;EACE;;AAXN;EAKI;EACA;;AACA;EACE;;AAEF;EACE;;;AAYZ;EACE;;AAEF;EACE;EACA;;AALF;EACE;;AAEF;EACE;EACA;;AALF;EACE;;AAEF;EACE;EACA;;AAGJ;EACE","file":"index.css"} \ No newline at end of file diff --git a/components/slider/src/index.scss b/components/slider/src/index.scss index 01533a0f7..a5ee952f0 100644 --- a/components/slider/src/index.scss +++ b/components/slider/src/index.scss @@ -1,7 +1,7 @@ @use 'sass:math'; @use "sass:map"; -@import '../../common/theme.scss'; +@import '@omiu/common/theme.scss'; $shapes: 'round' 'square' 'progress'; $sizes: 'small' 'normal' 'large'; @@ -26,7 +26,9 @@ $track-sizes: ( --percent1: 0%; --percent2: 0%; --lower-color: var(--o-primary); + --lower-color-active: var(--o-primary-active); --upper-color: #f0f0f0; + --upper-color-active: #d9d9d9; } @mixin thumb { @@ -46,9 +48,6 @@ $track-sizes: ( &:active { box-shadow: 0 0 0 5px var(--o-primary-fade-more, $o-primary-fade-more); } - &:hover { - border-color: var(--o-primary-active, $o-primary-active); - } } @mixin track { @@ -61,17 +60,6 @@ $track-sizes: ( .slider-container { position: relative; width: 100%; - &:active { - & .slider-track { - background: linear-gradient( - to right, - var(--upper-color) var(--percent1), - var(--o-primary-active, $o-primary-active) var(--percent1), - var(--o-primary-active, $o-primary-active) var(--percent2), - var(--upper-color) var(--percent2) - ); - } - } & .o-slider { -webkit-appearance: none; @@ -117,6 +105,24 @@ $track-sizes: ( } } } + + &:hover, + &:active { + & .slider-track { + background: linear-gradient( + to right, + var(--upper-color-active, $o-primary) var(--percent1), + var(--lower-color-active, $o-primary-active) var(--percent1), + var(--lower-color-active, $o-primary-active) var(--percent2), + var(--upper-color-active, $o-primary) var(--percent2) + ); + } + @each $thumb in $browser-thumbs { + & .o-slider::#{$thumb} { + border-color: var(--o-primary-active, $o-primary-active); + } + } + } } @each $size in $sizes { @@ -176,16 +182,19 @@ $track-sizes: ( } .is-disabled { + --lower-color: #bfbfbf; + --lower-color-active: #8c8c8c; + --upper-color-active: #d9d9d9; + --o-primary-active: #bfbfbf; + + cursor: not-allowed; + & .o-slider { + pointer-events: none; + } @each $thumb in $browser-thumbs { - & .o-slider { - pointer-events: none; - } & .o-slider::#{$thumb} { pointer-events: none; border-color: #c0c4cc; } } - & .slider-track { - --lower-color: #c0c4cc; - } } diff --git a/components/slider/src/index.tsx b/components/slider/src/index.tsx index f96f377d5..b1bd747e2 100644 --- a/components/slider/src/index.tsx +++ b/components/slider/src/index.tsx @@ -3,8 +3,6 @@ import * as css from './index.scss' import '@omiu/tooltip' // import Omiu from '@omiu/common' -import '@omiu/input' - interface Props { min: number max: number @@ -14,7 +12,7 @@ interface Props { size?: 'small' | 'normal' | 'large' range?: 'single' | 'double' orient?: 'vertical' | 'horizontal' - shape: 'square' | 'round' + shape?: 'square' | 'round' tooltip?: boolean disabled?: boolean reversed?: boolean From e9314e080eea6dab2ce3e68d302f1f7ee705f02c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BD=93=E8=80=90=E7=89=B9?= Date: Wed, 1 Sep 2021 14:33:10 +0800 Subject: [PATCH 2/2] Update package.json --- components/slider/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/slider/package.json b/components/slider/package.json index d5cc5d024..5b2489cb5 100644 --- a/components/slider/package.json +++ b/components/slider/package.json @@ -1,5 +1,5 @@ { - "name": "@perry-c/slider", + "name": "@omiu/slider", "version": "0.0.21", "main": "dist/index.es.js", "exports": {