session-desktop/stylesheets/_lightbox.scss

51 lines
1.1 KiB
SCSS
Raw Normal View History

2018-04-24 18:06:43 +02:00
.lightbox-container {
2018-04-15 05:27:03 +02:00
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
2016-07-13 01:44:45 +02:00
}
2018-04-15 06:27:30 +02:00
.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:
2018-04-15 06:27:30 +02:00
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: var(--gray-color);
2018-04-15 06:27:30 +02:00
}
&.save {
&:before {
@include color-svg('../images/save.svg', var(--white-color));
2018-04-15 06:27:30 +02:00
}
}
&.close {
&:before {
@include color-svg('../images/x.svg', var(--white-color));
2018-04-15 06:27:30 +02:00
}
}
}