diff --git a/package-lock.json b/package-lock.json index 45b734b5..3f0fe7b6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "vue-polar-bear", - "version": "4.3.4", + "version": "4.3.6", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index c3722aff..3e9d2204 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-polar-bear", - "version": "4.3.5", + "version": "4.3.6", "author": "adapcon", "scripts": { "storybook": "start-storybook --quiet -p 6006 -s ./src/static", diff --git a/src/components/Inputs/MultiSelect/MultiSelect.vue b/src/components/Inputs/MultiSelect/MultiSelect.vue index 27905bba..e32c8887 100644 --- a/src/components/Inputs/MultiSelect/MultiSelect.vue +++ b/src/components/Inputs/MultiSelect/MultiSelect.vue @@ -386,6 +386,9 @@ export default { &::-webkit-scrollbar { width: 2px; } + &:hover::-webkit-scrollbar { + width: 8px; + } &::-webkit-scrollbar-track { background: none; } diff --git a/src/components/Inputs/Select/Select.vue b/src/components/Inputs/Select/Select.vue index 73d27f3d..50044fb3 100644 --- a/src/components/Inputs/Select/Select.vue +++ b/src/components/Inputs/Select/Select.vue @@ -333,6 +333,10 @@ export default { &::-webkit-scrollbar { width: 2px; + transition: width 0.3s ease; + } + &:hover::-webkit-scrollbar { + width: 8px; } &::-webkit-scrollbar-track { background: none; diff --git a/src/components/index.scss b/src/components/index.scss index 5c9b42fc..369e4f4a 100644 --- a/src/components/index.scss +++ b/src/components/index.scss @@ -285,12 +285,24 @@ @include pb-scroll-base; &::-webkit-scrollbar-thumb { background: var(--color-primary); + width: 3px; + transition: width 0.3s ease; + } + + &:hover::-webkit-scrollbar { + width: 8px; } &-large { @include pb-scroll-large; &::-webkit-scrollbar-thumb { background: var(--color-primary); + width: 8px; + transition: width 0.3s ease; + } + + &:hover::-webkit-scrollbar-thumb { + width: 16px; } } } @@ -299,12 +311,24 @@ @include pb-scroll-base; &::-webkit-scrollbar-thumb { background: var(--color-secondary); + width: 3px; + transition: width 0.3s ease; + } + + &:hover::-webkit-scrollbar-thumb { + width: 12px; } &-large { @include pb-scroll-large; &::-webkit-scrollbar-thumb { background: var(--color-secondary); + width: 8px; + transition: width 0.3s ease; + } + + &:hover::-webkit-scrollbar-thumb { + width: 16px; } } } @@ -313,16 +337,29 @@ @include pb-scroll-base; &::-webkit-scrollbar-thumb { background: var(--color-white); + width: 3px; + transition: width 0.3s ease; + } + + &:hover::-webkit-scrollbar-thumb { + width: 12px; } &-large { @include pb-scroll-large; &::-webkit-scrollbar-thumb { background: var(--color-white); + width: 8px; + transition: width 0.3s ease; + } + + &:hover::-webkit-scrollbar-thumb { + width: 16px; } } } + // PB Typography @mixin pb-font-light { font-weight: 300 !important; } @mixin pb-font-regular { font-weight: 400 !important; }