210 lines
3.4 KiB
SCSS
210 lines
3.4 KiB
SCSS
.container {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: fixed;
|
|
bottom: 0;
|
|
right: 0;
|
|
left: 0;
|
|
align-items: center;
|
|
}
|
|
|
|
.actions {
|
|
background: white;
|
|
width: 100%;
|
|
border-radius: 4px;
|
|
padding: 10px 20px;
|
|
display: none;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
grid-gap: 15px;
|
|
box-shadow: 0 -2px 4px 0 rgb(0,0,0,0.1);
|
|
max-width: 750px;
|
|
|
|
&.expanded {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.actionsWrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
grid-gap: 20px;
|
|
flex-grow: 1;
|
|
width: 100%;
|
|
}
|
|
|
|
.actionsTop {
|
|
display: flex;
|
|
flex-direction: row;
|
|
grid-gap: 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
.actionsTopInfo {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.actionsTopInfoText {
|
|
font-size: 16px;
|
|
color: #434343;
|
|
}
|
|
|
|
.actionsTrigger {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
.actionButtons {
|
|
display: flex;
|
|
flex-direction: row;
|
|
grid-gap: 5px;
|
|
}
|
|
|
|
.inputWrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
grid-gap: 10px;
|
|
}
|
|
|
|
.textInput {
|
|
height: 100px;
|
|
background: rgba(0,0,0,0.1);
|
|
border-radius: 4px;
|
|
border: solid 2px #4c82a3;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.input {
|
|
border-radius: 4px;
|
|
border: solid 1px rgba(0,0,0,0.15);
|
|
padding: 5px 10px;
|
|
font-size: 16px;
|
|
width: 100%;
|
|
background: linear-gradient(rgba(0,0,0,0.00), rgba(0,0,0,0.00) 100%), linear-gradient(white, white);
|
|
}
|
|
|
|
.input:focus {
|
|
border: solid 1px rgba(0,0,0,0.15);
|
|
outline: none;
|
|
background: linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.05) 100%), linear-gradient(white, white);
|
|
}
|
|
|
|
.actionsBottom {
|
|
display: flex;
|
|
flex-direction: row;
|
|
grid-gap: 5px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
button {
|
|
transition: ease 0.2s;
|
|
width: auto;
|
|
border-radius: 4px;
|
|
outline: unset;
|
|
border: unset;
|
|
background: unset;
|
|
color: #ffffff;
|
|
background: #4c82a3;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
padding: 8px 15px;
|
|
white-space: nowrap;
|
|
display: flex;
|
|
flex-direction: row;
|
|
grid-gap: 12px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-decoration: unset;
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:hover {
|
|
transition: ease 0.2s;
|
|
background: #5e8eab;
|
|
color: white;
|
|
}
|
|
|
|
button:active {
|
|
transition: ease 0.2s;
|
|
background: #447592;
|
|
color: white;
|
|
}
|
|
|
|
.submitButton {
|
|
width: 100%;
|
|
max-width: 300px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.footerContainer {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.footer {
|
|
display: flex;
|
|
flex-direction: row;
|
|
grid-gap: 5px;
|
|
align-items: start;
|
|
justify-content: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.pagination {
|
|
display: flex;
|
|
flex-direction: column;
|
|
grid-gap: 5px;
|
|
}
|
|
|
|
.paginationButton {
|
|
font-size: 12px;
|
|
padding: 5px 10px;
|
|
border-radius: 3px;
|
|
background: rgba(0,0,0,0.1);
|
|
color: rgba(0,0,0,0.5);
|
|
}
|
|
|
|
.paginationButton:hover {
|
|
background: #447592;
|
|
color: rgba(255,255,255,0.5);
|
|
}
|
|
|
|
.paginationButtonDone {
|
|
background: #5e8eab;
|
|
color: rgb(255,255,255);
|
|
}
|
|
|
|
.paginationButtonCurrent {
|
|
height: 2px;
|
|
width: 100%;
|
|
background: #4c82a3;
|
|
}
|
|
|
|
.trigger {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
.triggerBtn {
|
|
background: white;
|
|
color: #434343;
|
|
padding: 5px 30px;
|
|
box-shadow: 0px -3px 4px 0 rgb(0,0,0,0.1);
|
|
position: absolute;
|
|
top: -25px;
|
|
}
|