155 lines
2.4 KiB
SCSS
155 lines
2.4 KiB
SCSS
.newsletter-overlay {
|
|
background: rgba(0, 0, 0, 0.8);
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
top: 0;
|
|
z-index: 9999;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.newsletter-box {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
top: 0;
|
|
z-index: 9999;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/*popup styles*/
|
|
#newsletter_popup {
|
|
max-width: 1022px;
|
|
min-width: 300px;
|
|
width: 90%;
|
|
position: relative;
|
|
margin: 10px auto;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
margin: 30px auto;
|
|
}
|
|
}
|
|
|
|
.jxnewsletter-inner {
|
|
padding: 80px 50px;
|
|
text-align: center;
|
|
@include media-breakpoint-only(sm) {
|
|
padding:140px 71px;
|
|
}
|
|
@include media-breakpoint-up(md) {
|
|
max-width: 55.58%;
|
|
flex: 0 0 55.58%;
|
|
}
|
|
@include media-breakpoint-up(lg) {
|
|
padding:140px 71px;
|
|
}
|
|
}
|
|
|
|
/*header styles*/
|
|
.jxnewsletter-header {
|
|
h4, h5 {
|
|
margin: 0;
|
|
color: $white;
|
|
}
|
|
h4 {
|
|
font-weight: 500;
|
|
font-size: 26px;
|
|
line-height: 1.35;
|
|
font-family: $font-family-base;
|
|
text-transform: capitalize;
|
|
}
|
|
h5 {
|
|
font-weight: 300;
|
|
font-size: 18px;
|
|
line-height: 1.35;
|
|
font-family: $font-family-base;
|
|
text-transform: uppercase;
|
|
letter-spacing: $letter-spacing;
|
|
padding: 0 10%;
|
|
display: none;
|
|
@include media-breakpoint-up(md) {
|
|
display: block;
|
|
}
|
|
@include media-breakpoint-up(lg){
|
|
padding: 0 20%;
|
|
}
|
|
|
|
}
|
|
h5 + h4 {
|
|
margin-top: 5px;
|
|
}
|
|
}
|
|
|
|
/*content styles*/
|
|
.jxnewsletter-content {
|
|
margin-top: 15px;
|
|
|
|
.form-control {
|
|
background: $white;
|
|
}
|
|
|
|
.description {
|
|
margin-top: 10px;
|
|
color: $white;
|
|
font:300 18px/24px $font-family-base;
|
|
}
|
|
.input-group {
|
|
flex-direction: column;
|
|
.form-control, .input-group-append .btn{
|
|
width: 100%;
|
|
}
|
|
.form-control {
|
|
text-align: center;
|
|
}
|
|
.input-group-append {
|
|
margin:-1px 0 0 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
/*footer styles*/
|
|
.jxnewsletter-footer {
|
|
overflow: hidden;
|
|
.checkbox {
|
|
|
|
}
|
|
}
|
|
|
|
/*submit button styles*/
|
|
.jxnewsletter-submit {
|
|
|
|
}
|
|
|
|
/*close button styles*/
|
|
.jxnewsletter-close {
|
|
color: $white;
|
|
|
|
&:hover {
|
|
color: $black;
|
|
}
|
|
}
|
|
|
|
.icon.jxnewsletter-close {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 20px;
|
|
color: $white;
|
|
transition: all 0.3s ease-in-out;
|
|
|
|
&:before {
|
|
@include addLinearIcons('\ec35', 22px, 1, color);
|
|
}
|
|
@include media-breakpoint-up(lg) {
|
|
right: 45px;
|
|
top: 45px;
|
|
&:before {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
@include hover-focus-active {
|
|
color: $black;
|
|
}
|
|
} |