Skip to content

Commit

Permalink
Add styles for firefox scrollbar (#1277)
Browse files Browse the repository at this point in the history
* Add styles for firefox scrollbar

* Rewrite mixin with css function and teplate string since typescript doesn't know scrollbar width, update snapshots

* Update snapshots
  • Loading branch information
Alex-Work-Account authored Feb 22, 2022
1 parent 339722e commit f70adbe
Show file tree
Hide file tree
Showing 6 changed files with 28 additions and 25 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -309,7 +309,7 @@ Object {
class="css-1il5ut8"
>
<textarea
class="css-248371"
class="css-7w0kcs"
style="height: 0px;"
/>
<span
Expand Down Expand Up @@ -434,7 +434,7 @@ Object {
class="MuiBox-root css-0"
>
<div
class="css-cm25ye"
class="css-1pgdic1"
/>
</div>
</div>
Expand Down Expand Up @@ -763,7 +763,7 @@ Object {
class="css-1il5ut8"
>
<textarea
class="css-248371"
class="css-7w0kcs"
style="height: 0px;"
/>
<span
Expand Down Expand Up @@ -888,7 +888,7 @@ Object {
class="MuiBox-root css-0"
>
<div
class="css-cm25ye"
class="css-1pgdic1"
/>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ Object {
</button>
</h2>
<div
class="MuiDialogContent-root css-19mk2hi-MuiDialogContent-root"
class="MuiDialogContent-root css-1n1tez8-MuiDialogContent-root"
>
<div
class="css-9brf46"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ Object {
</button>
</h2>
<div
class="MuiDialogContent-root css-19mk2hi-MuiDialogContent-root"
class="MuiDialogContent-root css-1n1tez8-MuiDialogContent-root"
>
<form
class="css-1g4yje1"
Expand Down Expand Up @@ -138,7 +138,7 @@ Object {
</div>
</div>
<textarea
class="css-6en6at"
class="css-17sxpbp"
readonly=""
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ exports[`NotationInput component should render textarea and a hidden textarea in
class="css-j5t9yq"
>
<textarea
class="css-248371"
class="css-7w0kcs"
style="height: 0px;"
>
Some input here
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ Object {
</button>
</h2>
<div
class="MuiDialogContent-root css-19mk2hi-MuiDialogContent-root"
class="MuiDialogContent-root css-1n1tez8-MuiDialogContent-root"
>
Content
</div>
Expand Down
35 changes: 19 additions & 16 deletions packages/ketcher-polymer-editor-react/src/theming/mixins/mixins.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,21 +15,24 @@
***************************************************************************/

import { ThemeType } from 'theming/defaultTheme'
import { css } from '@emotion/react'

export const scrollbarThin = ({ ketcher: theme }: ThemeType) => ({
'&::-webkit-scrollbar': {
width: '4px',
height: '4px',
backgroundColor: theme.color.scroll.inactive,
borderRadius: '2px',
webkitBorderRadius: '2px'
},
'&::-webkit-scrollbar-thumb': {
backgroundColor: theme.color.scroll.regular,
borderRadius: '2px',
webkitBorderRadius: '2px'
},
'&::-webkit-scrollbar-thumb:active': {
backgroundColor: theme.color.scroll.regular
export const scrollbarThin = ({ ketcher: theme }: ThemeType) => css`
scrollbar-width: thin;
scrollbar-color: ${theme.color.scroll.regular} ${theme.color.scroll.inactive};
&::-webkit-scrollbar {
width: 4px;
height: 4px;
background-color: ${theme.color.scroll.inactive};
border-radius: 2px;
-webkit-border-radius: 2px;
}
})
&::-webkit-scrollbar-thumb {
background-color: ${theme.color.scroll.regular};
border-radius: 2px;
-webkit-border-radius: 2px;
}
&::-webkit-scrollbar-thumb:active {
background-color: ${theme.color.scroll.regular};
}
`

0 comments on commit f70adbe

Please sign in to comment.