session-desktop/stylesheets/_lightbox.scss

50 lines
1.1 KiB
SCSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

.lightbox-container {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
.iconButton {
// NOTE: Cannot move these to inline styles as hover breaks due to precedence.
// We use vanilla CSS-in-JS which outputs inline styles. The `:hover`
// pseudo-class cannot be expressed using vanilla CSS-in-JS, so we define it
// here. If we move the other properties to JS, they have higher precedence
// as they are inline and the `:hover` `background` change wont override the
// base `background` definition. Revisit this as we adopt a more sophisticated
// style system in the future:
background: transparent;
width: 50px;
height: 50px;
display: inline-block;
cursor: pointer;
border-radius: 50%;
padding: 3px;
&:before {
content: '';
display: block;
width: 100%;
height: 100%;
}
&:hover {
background: $grey;
}
&.save {
&:before {
@include color-svg('../images/save.svg', white);
}
}
&.close {
&:before {
@include color-svg('../images/x.svg', white);
}
}
}