diff --git a/src/styles/index.scss b/src/styles/index.scss index c6c8d33..99d0019 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,5 +1,5 @@ @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap"); -@import './tw.scss',"./shared.scss",'./vendors.scss'; +@import './tw.scss',"./shared.scss",'./vendors.scss','./scrollbar.scss'; @@ -22,34 +22,6 @@ svg { display: inline-block; } -/* width */ -::-webkit-scrollbar { - width: 4px; -} - -@media screen and (min-width: 668px) { - /* width */ - ::-webkit-scrollbar { - width: 12px; - } -} - -/* Track */ -::-webkit-scrollbar-track { - background: #ddd; -} - -/* Handle */ -::-webkit-scrollbar-thumb { - border-radius: 10px; - background-color: #aaa; -} - -/* Handle on hover */ -::-webkit-scrollbar-thumb:hover { - background-color: #999; -} - .noselect { -webkit-touch-callout: none; -webkit-user-select: none; @@ -79,17 +51,3 @@ svg { } } -.ReactModal__Overlay { - opacity: 0; - transition: opacity 900ms ease-in-out; -} - -.ReactModal__Overlay--after-open { - opacity: 1; -} - -.ReactModal__Overlay--before-close { - opacity: 0; - transition-timing-function: ease-in; - transition-duration: 400ms; -} \ No newline at end of file diff --git a/src/styles/scrollbar.scss b/src/styles/scrollbar.scss new file mode 100644 index 0000000..ccc4c8d --- /dev/null +++ b/src/styles/scrollbar.scss @@ -0,0 +1,28 @@ +/* width */ +::-webkit-scrollbar { + width: 4px; +} + +@media screen and (min-width: 668px) { + + /* width */ + ::-webkit-scrollbar { + width: 10px; + } +} + +/* Track */ +::-webkit-scrollbar-track { + background: inherit; +} + +/* Handle */ +::-webkit-scrollbar-thumb { + border-radius: 10px; + background-color: #c8c8c8; +} + +/* Handle on hover */ +::-webkit-scrollbar-thumb:hover { + background-color: #aaaaaa; +} \ No newline at end of file diff --git a/src/styles/vendors.scss b/src/styles/vendors.scss index 4828f65..d995f04 100644 --- a/src/styles/vendors.scss +++ b/src/styles/vendors.scss @@ -18,5 +18,19 @@ margin: revert; } -// -// ---------------- \ No newline at end of file +// React Modals +// ---------------- +.ReactModal__Overlay { + opacity: 0; + transition: opacity 900ms ease-in-out; +} + +.ReactModal__Overlay--after-open { + opacity: 1; +} + +.ReactModal__Overlay--before-close { + opacity: 0; + transition-timing-function: ease-in; + transition-duration: 400ms; +}