wikijs-fork/client/scss/components/modal.scss
2017-05-26 22:43:34 -04:00

366 lines
5.1 KiB
SCSS

.modal {
align-items: flex-start;
display: block;
&.is-superimposed {
.modal-background {
z-index: 20;
}
.modal-container {
z-index: 21;
}
}
}
.modal-background {
top: 0;
left: 0;
width: 100vw;
height: 100vh;
position: fixed;
background-color: rgba(0,0,0,0.85);
z-index: 10;
&-enter-active {
animation: .4s ease fadeIn;
}
&-leave-active {
animation: .4s ease fadeOut;
}
}
.modal-container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 11;
display: flex;
justify-content: center;
align-items: center;
}
.modal-content {
width: 600px;
background-color: #FFF;
&-enter-active {
animation: .3s ease zoomIn;
}
&-leave-active {
animation: .3s ease zoomOut;
}
&.is-expanded {
align-self: stretch;
width: 100%;
margin: 20px;
display: flex;
flex-direction: column;
> section {
flex-grow: 1;
}
}
header {
background-color: mc('teal', '600');
color: #FFF;
display: flex;
flex-shrink: 0;
height: 40px;
align-items: center;
font-weight: 400;
font-size: 16px;
padding: 0 20px;
position: relative;
@each $color, $colorvalue in $material-colors {
&.is-#{$color} {
background-color: mc($color, '600');
}
}
.modal-notify {
position: absolute;
display: none;
align-items: center;
height: 40px;
right: 20px;
top: 0;
&.is-active {
display: flex;
}
span {
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
}
i {
margin-left: 15px;
display: inline-block;
@include spinner(#FFF, .5s, 20px);
}
}
}
section {
padding: 20px;
border-top: 1px dotted mc('grey', '300');
&:first-of-type {
border-top: none;
padding-top: 20px;
}
&:last-of-type {
padding-bottom: 20px;
}
&.is-gapless {
padding: 10px;
display: flex;
}
&.modal-loading {
display: flex;
flex-direction: column;
align-items: center;
> i {
display: block;
@include spinner(mc('blue','500'), .4s, 32px);
margin-bottom: 10px;
}
> span {
color: mc('grey', '600');
}
> em {
font-size: 12px;
color: mc('grey', '500');
font-style: normal;
}
}
&.modal-instructions {
display: flex;
flex-direction: column;
align-items: center;
color: mc('grey', '800');
img {
height: 100px;
& + * {
margin-top: 10px;
}
}
i.is-huge {
font-size: 72px;
margin-bottom: 10px;
}
> span {
color: mc('grey', '800');
}
> em {
font-size: 12px;
color: mc('grey', '600');
font-style: normal;
margin-top: 10px;
display: block;
}
}
.bullets {
list-style-type: square;
padding: 5px 0 0 30px;
font-size: 14px;
color: mc('grey', '800');
}
.note {
display: block;
margin-top: 10px;
font-size: 14px;
color: mc('grey', '800');
&:first-child {
margin-top: 0;
}
ul {
color: mc('grey', '800');
padding-left: 10px;
li {
margin-top: 5px;
display: flex;
align-items: center;
> i {
margin-right: 8px;
font-size: 18px;
}
}
}
}
}
footer {
padding: 20px;
text-align: right;
.button {
margin-left: 10px;
}
}
}
.modal-toolbar {
background-color: mc('teal', '700');
padding: 7px 20px;
display: flex;
flex-shrink: 0;
justify-content: center;
@each $color, $colorvalue in $material-colors {
&.is-#{$color} {
background-color: mc($color, '700');
.button {
border-color: mc($color, '900');
background-color: mc($color, '900');
&:hover {
border-color: mc($color, '900');
background-color: mc($color, '800');
}
}
}
}
// BUTTONS
.button {
border: 1px solid mc('teal', '900');
background-color: mc('teal', '900');
transition: all .4s ease;
color: #FFF;
border-radius: 0;
&:first-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
&:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
&:hover {
border-color: mc('teal', '900');
background-color: mc('teal', '800');
color: #FFF;
}
}
.button + .button {
margin-left: 1px;
}
}
.modal-sidebar {
background-color: mc('teal', '50');
padding: 0;
//padding: 7px 20px;
@each $color, $colorvalue in $material-colors {
&.is-#{$color} {
background-color: mc($color, '50');
.model-sidebar-header {
background-color: mc($color, '100');
color: mc($color, '800');
}
.model-sidebar-list > li a {
&:hover {
background-color: mc($color, '200');
}
&.is-active {
background-color: mc($color, '500');
}
}
}
}
.model-sidebar-header {
padding: 7px 20px;
}
.model-sidebar-content {
padding: 7px 20px;
}
.model-sidebar-list {
> li {
padding: 0;
a {
display: flex;
align-items: center;
height: 34px;
padding: 0 20px;
cursor: pointer;
color: mc('grey', '800');
&:hover {
background-color: mc('teal', '200');
}
&.is-active {
color: #FFF;
}
i {
margin-right: 7px;
}
}
}
}
}
.modal-content .card-footer-item.featured {
animation: flash 4s ease 0 infinite;
}