51 lines
1.1 KiB
SCSS
51 lines
1.1 KiB
SCSS
.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 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;
|
||
cursor: pointer;
|
||
border-radius: 50%;
|
||
padding: 3px;
|
||
|
||
&:before {
|
||
content: '';
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
&:hover {
|
||
background: var(--gray-color);
|
||
}
|
||
|
||
&.save {
|
||
&:before {
|
||
@include color-svg('../images/save.svg', var(--white-color));
|
||
}
|
||
}
|
||
|
||
&.close {
|
||
&:before {
|
||
@include color-svg('../images/x.svg', var(--white-color));
|
||
}
|
||
}
|
||
}
|