session-desktop/stylesheets/_lightbox.scss
Scott Nonnenberg 3c69886320 Finish new Message component, integrate into application
Also:
- New schema version 8 with video/image thumbnails, screenshots, sizes
- Upgrade messages not at current schema version when loading messages
  to show in conversation
- New MessageDetail react component
- New ConversationHeader react component
2018-07-17 15:58:07 -07:00

63 lines
1.3 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);
}
}
&.previous {
&:before {
@include color-svg('../images/back.svg', white);
}
}
&.next {
&:before {
@include color-svg('../images/forward.svg', white);
}
}
}