waveterm/frontend/app/modals/modal.less
Red J Adaya 9233b3dbd7
modals component and model and TOS modal (#164)
Co-authored-by: Sylvia Crowe <software@oneirocosm.com>
Co-authored-by: sawka <mike.sawka@gmail.com>
2024-07-30 11:44:19 -07:00

76 lines
1.6 KiB
Plaintext

// Copyright 2024, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0
.modal-wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: var(--zindex-modal-wrapper);
.modal-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(21, 23, 21, 0.7);
z-index: var(--zindex-modal-backdrop);
}
}
.modal {
z-index: var(--zindex-modal);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
border-radius: 10px;
background: var(--modal-bg-color);
border: 1px solid var(--border-color);
box-shadow: 0px 5px 5px 5px rgba(0, 0, 0, 0.1);
.modal-header {
width: 100%;
display: flex;
align-items: center;
padding: 12px 14px 12px 20px;
justify-content: space-between;
line-height: 20px;
border-bottom: 1px solid var(--modal-header-bottom-border-color);
user-select: none;
.modal-title {
color: var(--main-text-color);
font-size: var(--title-font-size);
}
button {
padding-right: 4px !important;
i {
font-size: 18px;
}
}
}
.modal-body {
width: 100%;
padding: 0px 20px;
}
.modal-footer {
display: flex;
justify-content: flex-end;
width: 100%;
padding: 0 20px 20px;
button:last-child {
margin-left: 8px;
}
}
}