PHP Classes

File: assets/vendor/bootstrap-md/scss/free/_modals.scss

Recommend this page to a friend!
  Classes of akeel   F3A   assets/vendor/bootstrap-md/scss/free/_modals.scss   Download  
File: assets/vendor/bootstrap-md/scss/free/_modals.scss
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: F3A
PHP Web development framework like Laravel lite
Author: By
Last change:
Date: 2 years ago
Size: 6,545 bytes
 

Contents

Class file image Download
// Modals // Styles for body body { &.modal-open { padding-right: 0 !important; overflow: auto; } &.scrollable { overflow-y: auto; } } // *** ENHANCED BOOTSTRAP MODALS ***/// // General styles .modal-dialog { .modal-content { border: 0; border-radius: $border-radius-base; box-shadow: $z-depth-1-half; .modal-header { border-top-left-radius: $border-radius-base; border-top-right-radius: $border-radius-base; } } // Cascading modals &.cascading-modal { margin-top: 10%; .close { color: $white-base; text-shadow: none; outline: 0; opacity: 1; } // Cascading header .modal-header { padding: $cascading-modal-padding; margin: $cascading-modal-margin-top $cascading-modal-margin-right $cascading-modal-margin-bottom $cascading-modal-margin-left; text-align: center; border: none; border-radius: $border-radius-base; box-shadow: $z-depth-1-half; .close { margin-right: $cascading-modal-close-margin-right; } .title { width: 100%; margin-bottom: 0; font-size: $cascading-modal-font-size; .fas, .fab, .far { margin-right: $cascading-modal-fa-margin-right; } } .social-buttons { margin-top: $cascading-modal-social-margin-top; a { font-size: $cascading-modal-a-font-size; } } } // Cascading tabs nav .modal-c-tabs { .md-tabs { display: flex; margin: $cascading-modal-tabs-margin-top $cascading-modal-tabs-margin-x 0 $cascading-modal-tabs-margin-x; box-shadow: $z-depth-1; li { flex: 1; a { text-align: center; } } } .tab-content { padding: $cascading-modal-tabs-padding-top 0 0 0; } /* .md-tabs { border-radius: $md-card-border-radius; .nav-item { .nav-link { border-radius: $md-card-border-radius; background-color: inherit; color: $white-base; } } } */ } // Footer customization .modal-body, .modal-footer { padding-right: $modal-body-padding-right; padding-left: $modal-body-padding-left; color: $grey-darken-2; .additional-option { margin-top: $modal-body-margin-top; text-align: center; } } // Cascading avatar &.modal-avatar { margin-top: $modal-avatar-margin-top; .modal-header { @extend .img-fluid; margin: $modal-avatar-header-margin-top 0 $modal-avatar-header-margin-bottom; box-shadow: none; img { width: $modal-avatar-img-width; margin-right: auto; margin-left: auto; box-shadow: $z-depth-2; } } } } // Modal notify &.modal-notify { .heading { padding: $modal-notify-heading-padding; margin: 0; font-size: $modal-notify-font-size; color: $white-base; } .modal-header { border: 0; box-shadow: $z-depth-1; } .close { opacity: 1; } .modal-body { padding: $modal-notify-body-padding; color: $grey-darken-2; } @each $name, $color in $basic { &.modal-#{$name} { .modal-header { background-color: $color; } .fas, .fab, .far { color: $color; } .badge { background-color: $color; } .btn { .fas, .fab, .far { color: #fff; } &.btn-outline-#{$name} { .fas, .fab, .far { color: $color; } } } } } } } // 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 { bottom: $modal-distance; left: $modal-distance; } &.modal-bottom-right { right: $modal-distance; bottom: $modal-distance; } } } &.fade { &.top:not(.show) .modal-dialog { transform: $modal-fade-top-transform; } &.left:not(.show) .modal-dialog { transform: $modal-fade-left-transform; } &.right:not(.show) .modal-dialog { transform: $modal-fade-right-transform; } &.bottom:not(.show) .modal-dialog { transform: $modal-fade-bottom-transform; } } @media (min-width: $medium-screen) { &.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% !important; margin: 0 !important; &.modal-bottom { bottom: 0; } } .modal-full-height { position: absolute; top: 0; right: 0; display: flex; width: $modal-width; height: auto; min-height: 100%; margin: 0; &.modal-top, &.modal-bottom { display: block; width: 100%; max-width: 100%; height: auto; } &.modal-top { bottom: auto; } &.modal-bottom { top: auto; min-height: 0; } .modal-content { width: 100%; } &.modal-lg { width: 90%; max-width: 90%; @media (min-width: $medium-screen) { width: $modal-full-height-medium-screen; max-width: $modal-full-height-medium-screen; } @media (min-width: $large-screen) { width: $modal-full-height-large-screen; max-width: $modal-full-height-large-screen; } } } .modal-side { position: absolute; right: $modal-distance; bottom: $modal-distance; width: $modal-width; margin: 0; } } }