120 lines
2.2 KiB
SCSS
120 lines
2.2 KiB
SCSS
/* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later
|
|
Full license explanation at https://github.com/houdiniproject/houdini/blob/master/LICENSE */
|
|
[data-ff-modal],
|
|
.ff-modal {
|
|
width: 600px;
|
|
margin-left: -300px;
|
|
left: 50%;
|
|
height: initial;
|
|
position: absolute;
|
|
}
|
|
|
|
[data-ff-modal-body],
|
|
.ff-modal-body {
|
|
background: white;
|
|
padding: 20px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
[data-ff-modal-header],
|
|
[data-ff-modal-footer],
|
|
.ff-modal-header,
|
|
.ff-modal-footer {
|
|
overflow: hidden;
|
|
}
|
|
|
|
[data-ff-modal-footer],
|
|
.ff-modal-footer {
|
|
border-top: 1px solid #E8E8E8;
|
|
width: 100%;
|
|
text-align: center;
|
|
background: lighten($grey, 47);
|
|
padding: 10px;
|
|
}
|
|
|
|
[data-ff-modal-backdrop],
|
|
.ff-modalBackdrop {
|
|
z-index: 100;
|
|
position: fixed;
|
|
height: 100%;
|
|
width: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
background: rgba(0,0,0,0.6);
|
|
visibility: hidden;
|
|
@include opacity(0);
|
|
@include transition(all 0.2s);
|
|
}
|
|
|
|
[data-ff-modal-backdrop='shown'],
|
|
.ff-modalBackdrop.ff-modalBackdrop--inView {
|
|
visibility: visible;
|
|
@include opacity(1);
|
|
}
|
|
|
|
[data-ff-modal-close-button],
|
|
.ff-modal-closeButton {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
[data-ff-modal-header],
|
|
.ff-modal-header {
|
|
padding: 12px 50px 12px 20px;
|
|
background-color: #e9e9e9;
|
|
border-bottom: 1px solid rgba(black, 0.08);
|
|
}
|
|
|
|
[data-ff-modal-header] h4,
|
|
.ff-modal-header h1,
|
|
.ff-modal-header h2,
|
|
.ff-modal-header h3,
|
|
.ff-modal-header h4,
|
|
.ff-modal-header h5 {
|
|
margin: 0;
|
|
}
|
|
|
|
[data-ff-modal-close-button],
|
|
.ff-modal-closeButton {
|
|
color: transparent;
|
|
&:hover { color: transparent; }
|
|
}
|
|
|
|
[data-ff-modal-close-button]:before,
|
|
.ff-modal-closeButton:before {
|
|
content: '';
|
|
background-image: url('ui_components/close.svg');
|
|
background-size: 24px 23px;
|
|
width: 24px;
|
|
height: 23px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
[data-ff-modal-close-button],
|
|
.ff-modal-closeButton {
|
|
cursor: pointer;
|
|
@include no-select;
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
width: 24px;
|
|
color: transparent;
|
|
&:hover { color: transparent; }
|
|
}
|
|
|
|
[data-ff-modal-close-button]:before,
|
|
.ff-modal-closeButton:before {
|
|
content: '';
|
|
background-image: url('ui_components/close.svg');
|
|
background-size: 24px 23px;
|
|
width: 24px;
|
|
height: 23px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|