77 lines
1.5 KiB
SCSS
77 lines
1.5 KiB
SCSS
// Copyright 2016-2020 Signal Messenger, LLC
|
||
// SPDX-License-Identifier: AGPL-3.0-only
|
||
|
||
.lightbox-container {
|
||
display: none;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 100;
|
||
}
|
||
|
||
.iconButton {
|
||
@include button-reset;
|
||
|
||
// 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 won’t 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;
|
||
border-radius: 50%;
|
||
padding: 3px;
|
||
|
||
&:before {
|
||
content: '';
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
&:hover,
|
||
&:focus {
|
||
background: $color-gray-60;
|
||
}
|
||
|
||
&.save {
|
||
&:before {
|
||
@include color-svg(
|
||
'../images/icons/v2/save-outline-24.svg',
|
||
$color-white
|
||
);
|
||
}
|
||
}
|
||
|
||
&.close {
|
||
&:before {
|
||
@include color-svg('../images/icons/v2/x-24.svg', $color-white);
|
||
}
|
||
}
|
||
|
||
&.previous {
|
||
&:before {
|
||
@include color-svg(
|
||
'../images/icons/v2/chevron-left-24.svg',
|
||
$color-white
|
||
);
|
||
}
|
||
}
|
||
|
||
&.next {
|
||
&:before {
|
||
@include color-svg(
|
||
'../images/icons/v2/chevron-right-24.svg',
|
||
$color-white
|
||
);
|
||
}
|
||
}
|
||
}
|