You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
552 lines
13 KiB
SCSS
552 lines
13 KiB
SCSS
/* You can add global styles to this file, and also import other style files */
|
|
|
|
// Distance
|
|
$modal-distance:10px;
|
|
$modal-info-color: #5394ff;
|
|
$modal-success-color: #01d36b;
|
|
$modal-warning-color: #ff8e38;
|
|
$modal-danger-color: #ff4b4b;
|
|
|
|
// Styles for body
|
|
body {
|
|
&.modal-open {
|
|
padding-right: 0 !important;
|
|
}
|
|
&.scrollable {
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
|
|
// *** ENHANCED BOOTSTRAP MODALS ***///
|
|
// General styles
|
|
.modal-dialog {
|
|
.modal-content {
|
|
// @include border-radius(2px);
|
|
// @extend .z-depth-1-half;
|
|
border: 0;
|
|
}
|
|
}
|
|
|
|
// Position & Size
|
|
.modal {
|
|
padding-right:0 !important;
|
|
.modal-dialog {
|
|
@media (min-width: 768px) {
|
|
&.modal-top {
|
|
top: 0;
|
|
}
|
|
&.modal-left {
|
|
left: 0;
|
|
}
|
|
&.modal-right {
|
|
right: 0;
|
|
}
|
|
&.modal-bottom {
|
|
bottom: 0;
|
|
}
|
|
&.modal-top-left {
|
|
top: $modal-distance;
|
|
left: $modal-distance;
|
|
}
|
|
&.modal-top-right {
|
|
top: $modal-distance;
|
|
right: $modal-distance;
|
|
}
|
|
&.modal-bottom-left {
|
|
left: $modal-distance;
|
|
bottom: $modal-distance;
|
|
}
|
|
&.modal-bottom-right {
|
|
right: $modal-distance;
|
|
bottom: $modal-distance;
|
|
}
|
|
}
|
|
}
|
|
.modal-side {
|
|
&.modal-top {
|
|
top: 0;
|
|
}
|
|
&.modal-left {
|
|
left: 0;
|
|
}
|
|
&.modal-right {
|
|
right: 0;
|
|
}
|
|
&.modal-bottom {
|
|
bottom: 0;
|
|
}
|
|
&.modal-top-left {
|
|
top: $modal-distance;
|
|
left: $modal-distance;
|
|
}
|
|
&.modal-top-right {
|
|
top: $modal-distance;
|
|
right: $modal-distance;
|
|
}
|
|
&.modal-bottom-left {
|
|
left: $modal-distance;
|
|
bottom: $modal-distance;
|
|
}
|
|
&.modal-bottom-right {
|
|
right: $modal-distance;
|
|
bottom: $modal-distance;
|
|
}
|
|
}
|
|
&.fade {
|
|
&.top:not(.show) .modal-dialog {
|
|
transform: translate3d(0, -25%, 0);
|
|
}
|
|
&.left:not(.show) .modal-dialog {
|
|
transform: translate3d(-25%, 0, 0);
|
|
}
|
|
&.right:not(.show) .modal-dialog {
|
|
transform: translate3d(25%, 0, 0);
|
|
}
|
|
&.bottom:not(.show) .modal-dialog {
|
|
transform: translate3d(0, 25%, 0);
|
|
}
|
|
&.in {
|
|
opacity: 1;
|
|
.modal-dialog {
|
|
// -webkit-transform: translate(0, 0);
|
|
transform: translate(0, 0);
|
|
.relative {
|
|
display: inline-block;
|
|
// transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.modal-scrolling {
|
|
position: relative;
|
|
.modal-dialog {
|
|
position: fixed;
|
|
z-index: 1050;
|
|
}
|
|
}
|
|
&.modal-content-clickable {
|
|
top:auto;
|
|
bottom:auto;
|
|
.modal-dialog {
|
|
position:fixed;
|
|
}
|
|
}
|
|
.modal-fluid {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
.modal-content {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.modal-frame {
|
|
position: absolute;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
margin: 0;
|
|
&.modal-bottom {
|
|
bottom: 0;
|
|
}
|
|
}
|
|
.modal-full-height {
|
|
display: flex;
|
|
position: absolute;
|
|
width: 400px;
|
|
min-height: 100%;
|
|
margin: 0;
|
|
top: 0;
|
|
// bottom: 0;
|
|
right: 0;
|
|
&.modal-top, &.modal-bottom {
|
|
display:block;
|
|
width:100%;
|
|
max-width:100%;
|
|
height:auto;
|
|
}
|
|
&.modal-top {
|
|
bottom:auto;
|
|
}
|
|
&.modal-bottom {
|
|
top:auto;
|
|
}
|
|
.modal-content {
|
|
width:100%;
|
|
}
|
|
&.modal-lg {
|
|
max-width:90%;
|
|
width:90%;
|
|
@media (min-width:992px) {
|
|
max-width:800px;
|
|
width:800px;
|
|
}
|
|
@media (min-width:1200px) {
|
|
max-width:1000px;
|
|
width:1000px;
|
|
}
|
|
}
|
|
}
|
|
.modal-side {
|
|
position: absolute;
|
|
right: $modal-distance;
|
|
bottom: $modal-distance;
|
|
margin: 0;
|
|
width: 400px;
|
|
}
|
|
}
|
|
|
|
// Styles
|
|
.modal-dialog {
|
|
.btn .fa {
|
|
color:#fff !important;
|
|
}
|
|
[class*="btn-outline-"] .fa {
|
|
color: inherit !important;
|
|
}
|
|
// Cascading modals
|
|
&.cascading-modal {
|
|
margin-top: 10%;
|
|
// Cascading header
|
|
.modal-header {
|
|
text-align: center;
|
|
margin: -2rem 1rem 1rem 1rem;
|
|
padding: 1.5rem;
|
|
border: none;
|
|
flex-direction: column;
|
|
// @extend .z-depth-1-half;
|
|
// @include border-radius(3px);
|
|
.close {
|
|
margin-right: 2.5rem;
|
|
}
|
|
&.white-text {
|
|
.close {
|
|
color: #fff;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.title {
|
|
width: 100%;
|
|
margin-bottom: 0;
|
|
font-size: 1.25rem;
|
|
.fa {
|
|
margin-right: 9px;
|
|
}
|
|
}
|
|
.social-buttons {
|
|
margin-top: 1.5rem;
|
|
a {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
}
|
|
// Cascading tabs nav
|
|
.modal-c-tabs {
|
|
.nav-tabs {
|
|
margin: -1.5rem 1rem 0 1rem;
|
|
// @extend .z-depth-1;
|
|
}
|
|
.tab-content {
|
|
padding: 1.7rem 0 0 0;
|
|
}
|
|
}
|
|
// Footer customization
|
|
.modal-body,
|
|
.modal-footer {
|
|
color: #616161;
|
|
padding-right: 2rem;
|
|
padding-left: 2rem;
|
|
.additional-option {
|
|
text-align: center;
|
|
margin-top: 1rem;
|
|
}
|
|
}
|
|
// Cascading avatar
|
|
&.modal-avatar {
|
|
margin-top: 6rem;
|
|
.modal-header {
|
|
// @extend .z-depth-0;
|
|
// @extend .img-fluid;
|
|
margin: -6rem 2rem -1rem 2rem;
|
|
img {
|
|
width: 130px;
|
|
// @extend .z-depth-2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// Modal notify
|
|
&.modal-notify {
|
|
.heading {
|
|
margin: 0;
|
|
padding: 0.3rem;
|
|
color: #fff;
|
|
font-size: 1.15rem;
|
|
}
|
|
.modal-header {
|
|
// @extend .z-depth-1;
|
|
border: 0;
|
|
}
|
|
.close {
|
|
opacity: 1;
|
|
}
|
|
.modal-body {
|
|
padding: 1.5rem;
|
|
color: #616161;
|
|
}
|
|
.btn-outline-secondary-modal {
|
|
background-color: transparent;
|
|
}
|
|
// Modal info
|
|
&.modal-info {
|
|
.modal-header {
|
|
background-color: $modal-info-color;
|
|
}
|
|
.fa {
|
|
color: $modal-info-color;
|
|
}
|
|
.badge {
|
|
background-color: $modal-info-color;
|
|
}
|
|
.btn-primary-modal {
|
|
background: $modal-info-color;
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
background-color: lighten( $modal-info-color, 5%)!important;
|
|
}
|
|
&.active {
|
|
background-color: darken( $modal-info-color, 20%)!important;
|
|
// @extend .z-depth-1-half;
|
|
}
|
|
}
|
|
.btn-outline-secondary-modal {
|
|
border: 2px solid $modal-info-color;
|
|
color: $modal-info-color!important;
|
|
}
|
|
}
|
|
// Modal warning
|
|
&.modal-warning {
|
|
.modal-header {
|
|
background-color: $modal-warning-color;
|
|
}
|
|
.fa {
|
|
color: $modal-warning-color;
|
|
}
|
|
.badge {
|
|
background-color: $modal-warning-color;
|
|
}
|
|
.btn-primary-modal {
|
|
background: $modal-warning-color;
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
background-color: lighten( $modal-warning-color, 5%)!important;
|
|
}
|
|
&.active {
|
|
background-color: darken( $modal-warning-color, 20%)!important;
|
|
// @extend .z-depth-1-half;
|
|
}
|
|
}
|
|
.btn-outline-secondary-modal {
|
|
border: 2px solid $modal-warning-color;
|
|
color: $modal-warning-color!important;
|
|
}
|
|
}
|
|
// Modal success
|
|
&.modal-success {
|
|
.modal-header {
|
|
background-color: $modal-success-color;
|
|
}
|
|
.fa {
|
|
color: $modal-success-color;
|
|
}
|
|
.badge {
|
|
background-color: $modal-success-color;
|
|
}
|
|
.btn-primary-modal {
|
|
background: $modal-success-color;
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
background-color: lighten( $modal-success-color, 5%)!important;
|
|
}
|
|
&.active {
|
|
background-color: darken( $modal-success-color, 20%)!important;
|
|
// @extend .z-depth-1-half;
|
|
}
|
|
}
|
|
.btn-outline-secondary-modal {
|
|
border: 2px solid $modal-success-color;
|
|
color: $modal-success-color!important;
|
|
}
|
|
}
|
|
// Modal danger
|
|
&.modal-danger {
|
|
.modal-header {
|
|
background-color: $modal-danger-color;
|
|
}
|
|
.fa {
|
|
color: $modal-danger-color;
|
|
}
|
|
.badge {
|
|
background-color: $modal-danger-color;
|
|
}
|
|
.btn-primary-modal {
|
|
background: $modal-danger-color;
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
background-color: lighten( $modal-danger-color, 5%)!important;
|
|
}
|
|
&.active {
|
|
background-color: darken( $modal-danger-color, 20%)!important;
|
|
// @extend .z-depth-1-half;
|
|
}
|
|
}
|
|
.btn-outline-secondary-modal {
|
|
border: 2px solid $modal-danger-color;
|
|
color: $modal-danger-color!important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-sm .modal-content{
|
|
margin: 0 auto;
|
|
max-width: 300px;
|
|
}
|
|
|
|
@media (min-width: 768px){
|
|
.modal-sm{
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
.modal .modal-fluid, .modal .modal-frame {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/*********************
|
|
Modals
|
|
**********************/
|
|
|
|
// Modal Login & Modal Register
|
|
.modal-ext .modal-content {
|
|
.modal-header {
|
|
text-align: center;
|
|
}
|
|
.options {
|
|
float: left;
|
|
}
|
|
.modal-body .text-xs-center fieldset {
|
|
margin-top: 20px;
|
|
}
|
|
.call {
|
|
margin-top: 1rem;
|
|
}
|
|
.modal-body {
|
|
padding: 2rem 2rem 1rem 2rem;
|
|
}
|
|
}
|
|
|
|
.modal-content {
|
|
.close {
|
|
position: absolute;
|
|
right: 15px;
|
|
}
|
|
}
|
|
|
|
// Modal Cart
|
|
.modal-cart {
|
|
li p {
|
|
margin: 5px;
|
|
font-weight: 400;
|
|
.badge {
|
|
margin-left: 10px;
|
|
margin-top: 3px;
|
|
font-weight: 400;
|
|
position: absolute;
|
|
}
|
|
.quantity {
|
|
font-size: 16px;
|
|
margin-right: 7px;
|
|
font-weight: 300;
|
|
}
|
|
}
|
|
.cartPageLink {
|
|
margin-left: 10px;
|
|
a {
|
|
text-decoration: underline;
|
|
color: #666;
|
|
}
|
|
}
|
|
.total {
|
|
float: right;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
|
|
// Modals normalize
|
|
.cf-phone {
|
|
margin-left: 7px;
|
|
}
|
|
|
|
// Container that the modal scrolls within
|
|
.side-modal {
|
|
position: fixed;
|
|
width: 400px;
|
|
height: 100%;
|
|
width: 100%;
|
|
z-index: 9999;
|
|
// Shell div to position the modal with bottom padding
|
|
.modal-dialog {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
right: 10px;
|
|
width: 400px;
|
|
margin: 10px;
|
|
// @extend .z-depth-1-half;
|
|
@media (max-width: 760px) {
|
|
display: none;
|
|
}
|
|
}
|
|
// Actual modal
|
|
.modal-header {
|
|
padding: 1rem;
|
|
.heading {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
.modal-content {
|
|
border: none;
|
|
}
|
|
// Modal background
|
|
}
|
|
|
|
.side-modal.fade:not(.show) .modal-dialog {
|
|
-webkit-transform: translate3d(25%, 0, 0);
|
|
transform: translate3d(25%, 0, 0);
|
|
}
|
|
|
|
// Transparent backdrop
|
|
.transparent-bd {
|
|
opacity: 0!important;
|
|
}
|
|
|
|
.modal-backdrop.in {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.modal-backdrop {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
#exampleModalScroll {
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.modal-open .modal {
|
|
overflow-x: hidden;
|
|
overflow-y: hidden;
|
|
} |