papercss/src/modals.scss
2017-12-18 23:23:30 +01:00

100 lines
1.7 KiB
SCSS

@import './colors.less';
@import './container.less';
@import './utilities.less';
@mixin translate($x; $y)
{
-webkit-transform: translate($x, $y);
-ms-transform: translate($x, $y);
transform: translate($x, $y);
}
@mixin transition-transform($transition)
{
-webkit-transition: -webkit-transform $transition;
-moz-transition: -moz-transform $transition;
-o-transition: -o-transform $transition;
transition: transform $transition;
}
.modal{
&:before{
content: "";
display: none;
background: rgba(0,0,0,.6);
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 10;
}
&:target{
&:before{
display: flex;
}
.modal-body{
@include translate(0, 0);
top: 20%;
}
}
.modal-body{
flex: 1 1 auto;
padding: 1.25rem;
background: $white;
border: 2px solid $muted-light;
word-wrap: break-word;
position: fixed;
z-index: 11;
max-width: 960px;
@media $medium-screen {
max-width: 85%;
}
@media $xsmall-screen {
max-width: 90%;
}
@include translate(0, -500%);
@include transition-transform(#{"0.3s ease-out"});
}
.btn-close{
color: $primary-light;
font-size: 30px;
text-decoration: none;
position: absolute; right: 0; top: 0;
.margin;
background: inherit;
&:hover{
color: $muted;
}
}
.modal-title, h4 {
margin-top: 0;
margin-bottom: 0.5rem;
}
.modal-subtitle, h5 {
.text-secondary;
margin-top: 0;
margin-bottom: 0.5rem;
}
.modal-text, p {
margin-top: 0;
margin-bottom: 1rem;
}
.modal-link + .modal-link,
a + a {
margin-left: 1.25rem;
}
a button {
text-decoration: none;
background: $white;
}
}