Browse Source
fix(ui): ensure settings menu shows on top
Several of our elements were missing z-index property, causing them to
display incorrectly in the app.
Ensure that we import styles/variables.scss before attempting to use
the z() helper function that it provides.
renovate/lint-staged-8.x
Tom Kirkpatrick
6 years ago
No known key found for this signature in database
GPG Key ID: 72203A8EC5967EA8
6 changed files with
11 additions and
7 deletions
app/components/Contacts/ChannelForm/ChannelForm.scss
app/components/Contacts/ConnectManually/ConnectManually.scss
app/components/Contacts/Network/Network.scss
app/components/Form/Form.scss
app/components/Settings/Settings.scss
app/styles/tooltip.scss
@ -3,7 +3,7 @@
. container {
position : absolute ;
top : 0 ;
z-index : z ( " contact-form " , " modal " ) ;
z-index : z ( ' contact-form ' , ' modal ' ) ;
height : 100 vh ;
width : 100 % ;
background : var ( -- darkestBackground ) ;
@ -3,7 +3,7 @@
. container {
position : absolute ;
top : 0 ;
z-index : z ( " connect-form " , " modal " ) ;
z-index : z ( ' connect-form ' , ' modal ' ) ;
height : 100 vh ;
width : 100 % ;
background : red ;
@ -83,7 +83,7 @@
display : block ;
position : absolute ;
margin-top : 0 ;
z-index : z ( " network-filters " , " open " ) ;
z-index : z ( ' network-filters ' , ' open ' ) ;
li {
margin : 10 px 0 ;
@ -3,7 +3,7 @@
. container {
position : absolute ;
top : 0 ;
z-index : z ( " form " , " container " ) ;
z-index : z ( ' form ' , ' container ' ) ;
height : 100 vh ;
width : 100 % ;
background : var ( -- lightestBackground ) ;
@ -1,10 +1,12 @@
@import ' styles/variables.scss ' ;
. container {
background : var ( -- lightestBackground ) ;
position : absolute ;
width : 200 px ;
top : 30 px ;
left : - 100 px ;
z-index : z ( " settings-form " , " modal " ) ;
z-index : z ( ' settings-form ' , ' modal ' ) ;
li {
padding : 20 px ;
@ -1,3 +1,5 @@
@import ' styles/variables.scss ' ;
/* Tooltips */
[ data-hint ] {
position : relative ;
@ -11,7 +13,7 @@
will-change : transform ;
visibility : hidden ;
opacity : 0 ;
z-index : z ( " tooltip " , " after " ) ;
z-index : z ( ' tooltip ' , ' after ' ) ;
pointer-events : none ;
transition : 0 .2 s ease ;
transition-delay : 0 ms ;
@ -22,7 +24,7 @@
position : absolute ;
background : transparent ;
border : 6 px solid transparent ;
z-index : z ( " tooltip " , " before " ) ;
z-index : z ( ' tooltip ' , ' before ' ) ;
}
[ data-hint ] : : after {