Last active
May 23, 2017 10:06
-
-
Save jonathanpath/7f77827c40b55d26643945126c15e8e0 to your computer and use it in GitHub Desktop.
_full-modal-boostrap.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* =Modal full | |
---------------------- */ | |
.modal-full { | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
margin: 0; | |
background: #fff; | |
transform: translate(0,0) !important; | |
.modal-content { | |
border: none; | |
box-shadow: none; | |
} | |
.modal-header { | |
border-bottom: none; | |
padding: 20px 20px 0; | |
background: none; | |
@media (min-width: $screen-sm-min) { | |
padding: 40px 40px 0; | |
} | |
.close { | |
font-size: 50px; | |
border: none; | |
color: #bbb; | |
background: none; | |
position: fixed; | |
top: 0; | |
right: 0; | |
line-height: 1; | |
opacity: 1; | |
small { | |
display: block; | |
font-size: 14px; | |
font-style: normal; | |
} | |
@media (min-width: $screen-sm-min) { | |
font-size: 60px; | |
padding: 20px 30px; | |
} | |
&:hover { | |
color: #999; | |
} | |
} | |
} | |
.modal-title { | |
text-align: center; | |
font-weight: 400; | |
font-size: 20px; | |
font-weight: 300; | |
@media (min-width: $screen-sm-min) { | |
font-size: 26px; | |
} | |
} | |
.modal-body { | |
margin: 20px auto 0; | |
padding-bottom: 20px; /* Not doing with margin to have white background on full screen */ | |
@media (min-width: $screen-sm-min) { | |
margin-top: 40px; | |
padding-bottom: 40px; | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment