--- /dev/null
+// Distance\r
+$modal-distance:10px;\r
+$modal-info-color: #5394ff;\r
+$modal-success-color: #01d36b;\r
+$modal-warning-color: #ff8e38;\r
+$modal-danger-color: #ff4b4b;\r
+\r
+// Styles for body\r
+body {\r
+ &.modal-open {\r
+ padding-right: 0 !important;\r
+ }\r
+ &.scrollable {\r
+ overflow-y: auto;\r
+ }\r
+}\r
+\r
+// *** ENHANCED BOOTSTRAP MODALS ***///\r
+// General styles\r
+.modal-dialog {\r
+ .modal-content {\r
+ @include border-radius(2px);\r
+ @extend .z-depth-1-half;\r
+ border: 0;\r
+ }\r
+}\r
+\r
+// Position & Size\r
+.modal {\r
+ .modal-dialog {\r
+ &.modal-top {\r
+ top: 0;\r
+ }\r
+ &.modal-left {\r
+ left: 0;\r
+ }\r
+ &.modal-right {\r
+ right: 0;\r
+ }\r
+ &.modal-bottom {\r
+ bottom: 0;\r
+ }\r
+ &.modal-top-left {\r
+ top: $modal-distance;\r
+ left: $modal-distance;\r
+ }\r
+ &.modal-top-right {\r
+ top: $modal-distance;\r
+ right: $modal-distance;\r
+ }\r
+ &.modal-bottom-left {\r
+ left: $modal-distance;\r
+ bottom: $modal-distance;\r
+ }\r
+ &.modal-bottom-right {\r
+ right: $modal-distance;\r
+ bottom: $modal-distance;\r
+ }\r
+ }\r
+ &.fade {\r
+ &.top:not(.show) .modal-dialog {\r
+ transform: translate3d(0, -25%, 0);\r
+ }\r
+ &.left:not(.show) .modal-dialog {\r
+ transform: translate3d(-25%, 0, 0);\r
+ }\r
+ &.right:not(.show) .modal-dialog {\r
+ transform: translate3d(25%, 0, 0);\r
+ }\r
+ &.bottom:not(.show) .modal-dialog {\r
+ transform: translate3d(0, 25%, 0);\r
+ }\r
+ }\r
+ &.modal-scrolling {\r
+ position: relative;\r
+ .modal-dialog {\r
+ position: fixed;\r
+ z-index: 1050;\r
+ }\r
+ }\r
+ &.modal-content-clickable {\r
+ top:auto;\r
+ bottom:auto;\r
+ .modal-dialog {\r
+ position:fixed;\r
+ }\r
+ }\r
+ .modal-fluid {\r
+ width: 100%;\r
+ max-width: 100%;\r
+ .modal-content {\r
+ width: 100%;\r
+ }\r
+ }\r
+ .modal-frame {\r
+ position: absolute;\r
+ width: 100%;\r
+ max-width: 100%;\r
+ margin: 0;\r
+ &.modal-bottom {\r
+ bottom: 0;\r
+ }\r
+ }\r
+ .modal-full-height {\r
+ display: flex;\r
+ position: absolute;\r
+ width: 400px;\r
+ height: 100%;\r
+ margin: 0;\r
+ top: 0;\r
+ // bottom: 0;\r
+ right: 0;\r
+ &.modal-top, &.modal-bottom {\r
+ display:block;\r
+ width:100%;\r
+ max-width:100%;\r
+ height:auto;\r
+ }\r
+ &.modal-top {\r
+ bottom:auto;\r
+ }\r
+ &.modal-bottom {\r
+ top:auto;\r
+ }\r
+ .modal-content {\r
+ width:100%;\r
+ }\r
+ &.modal-lg {\r
+ max-width:90%;\r
+ width:90%;\r
+ @media (min-width:992px) {\r
+ max-width:800px;\r
+ width:800px; \r
+ }\r
+ @media (min-width:1200px) {\r
+ max-width:1000px;\r
+ width:1000px; \r
+ }\r
+ }\r
+ }\r
+ .modal-side {\r
+ position: absolute;\r
+ right: $modal-distance;\r
+ bottom: $modal-distance;\r
+ margin: 0;\r
+ width: 400px;\r
+ }\r
+}\r
+\r
+// Styles\r
+.modal-dialog {\r
+ .btn .fa {\r
+ color:#fff !important;\r
+ }\r
+ [class*="btn-outline-"] .fa {\r
+ color: inherit !important;\r
+ }\r
+ // Cascading modals\r
+ &.cascading-modal {\r
+ margin-top: 10%;\r
+ // Cascading header\r
+ .modal-header {\r
+ text-align: center;\r
+ margin: -2rem 1rem 1rem 1rem;\r
+ padding: 1.5rem;\r
+ border: none;\r
+ flex-direction: column;\r
+ @extend .z-depth-1-half;\r
+ @include border-radius(3px);\r
+ .close {\r
+ margin-right: 2.5rem;\r
+ }\r
+ &.white-text {\r
+ .close {\r
+ color: #fff;\r
+ opacity: 1;\r
+ }\r
+ }\r
+ .title {\r
+ width: 100%;\r
+ margin-bottom: 0;\r
+ font-size: 1.25rem;\r
+ .fa {\r
+ margin-right: 9px;\r
+ }\r
+ }\r
+ .social-buttons {\r
+ margin-top: 1.5rem;\r
+ a {\r
+ font-size: 1rem;\r
+ }\r
+ }\r
+ }\r
+ // Cascading tabs nav\r
+ .modal-c-tabs {\r
+ .nav-tabs {\r
+ margin: -1.5rem 1rem 0 1rem;\r
+ @extend .z-depth-1;\r
+ }\r
+ .tab-content {\r
+ padding: 1.7rem 0 0 0;\r
+ }\r
+ }\r
+ // Footer customization\r
+ .modal-body,\r
+ .modal-footer {\r
+ color: #616161;\r
+ padding-right: 2rem;\r
+ padding-left: 2rem;\r
+ .additional-option {\r
+ text-align: center;\r
+ margin-top: 1rem;\r
+ }\r
+ }\r
+ // Cascading avatar\r
+ &.modal-avatar {\r
+ margin-top: 6rem;\r
+ .modal-header {\r
+ @extend .z-depth-0;\r
+ @extend .img-fluid;\r
+ margin: -6rem 2rem -1rem 2rem;\r
+ img {\r
+ width: 130px;\r
+ @extend .z-depth-2;\r
+ }\r
+ }\r
+ }\r
+ }\r
+ // Modal notify\r
+ &.modal-notify {\r
+ .heading {\r
+ margin: 0;\r
+ padding: 0.3rem;\r
+ color: #fff;\r
+ font-size: 1.15rem;\r
+ }\r
+ .modal-header {\r
+ @extend .z-depth-1;\r
+ border: 0;\r
+ }\r
+ .close {\r
+ opacity: 1;\r
+ }\r
+ .modal-body {\r
+ padding: 1.5rem;\r
+ color: #616161;\r
+ }\r
+ .btn-outline-secondary-modal {\r
+ background-color: transparent;\r
+ }\r
+ // Modal info\r
+ &.modal-info {\r
+ .modal-header {\r
+ background-color: $modal-info-color;\r
+ }\r
+ .fa {\r
+ color: $modal-info-color;\r
+ }\r
+ .badge {\r
+ background-color: $modal-info-color;\r
+ }\r
+ .btn-primary-modal {\r
+ background: $modal-info-color;\r
+ &:hover,\r
+ &:focus,\r
+ &:active {\r
+ background-color: lighten( $modal-info-color, 5%)!important;\r
+ }\r
+ &.active {\r
+ background-color: darken( $modal-info-color, 20%)!important;\r
+ @extend .z-depth-1-half;\r
+ }\r
+ }\r
+ .btn-outline-secondary-modal {\r
+ border: 2px solid $modal-info-color;\r
+ color: $modal-info-color!important;\r
+ }\r
+ }\r
+ // Modal warning\r
+ &.modal-warning {\r
+ .modal-header {\r
+ background-color: $modal-warning-color;\r
+ }\r
+ .fa {\r
+ color: $modal-warning-color;\r
+ }\r
+ .badge {\r
+ background-color: $modal-warning-color;\r
+ }\r
+ .btn-primary-modal {\r
+ background: $modal-warning-color;\r
+ &:hover,\r
+ &:focus,\r
+ &:active {\r
+ background-color: lighten( $modal-warning-color, 5%)!important;\r
+ }\r
+ &.active {\r
+ background-color: darken( $modal-warning-color, 20%)!important;\r
+ @extend .z-depth-1-half;\r
+ }\r
+ }\r
+ .btn-outline-secondary-modal {\r
+ border: 2px solid $modal-warning-color;\r
+ color: $modal-warning-color!important;\r
+ }\r
+ }\r
+ // Modal success\r
+ &.modal-success {\r
+ .modal-header {\r
+ background-color: $modal-success-color;\r
+ }\r
+ .fa {\r
+ color: $modal-success-color;\r
+ }\r
+ .badge {\r
+ background-color: $modal-success-color;\r
+ }\r
+ .btn-primary-modal {\r
+ background: $modal-success-color;\r
+ &:hover,\r
+ &:focus,\r
+ &:active {\r
+ background-color: lighten( $modal-success-color, 5%)!important;\r
+ }\r
+ &.active {\r
+ background-color: darken( $modal-success-color, 20%)!important;\r
+ @extend .z-depth-1-half;\r
+ }\r
+ }\r
+ .btn-outline-secondary-modal {\r
+ border: 2px solid $modal-success-color;\r
+ color: $modal-success-color!important;\r
+ }\r
+ }\r
+ // Modal danger\r
+ &.modal-danger {\r
+ .modal-header {\r
+ background-color: $modal-danger-color;\r
+ }\r
+ .fa {\r
+ color: $modal-danger-color;\r
+ }\r
+ .badge {\r
+ background-color: $modal-danger-color;\r
+ }\r
+ .btn-primary-modal {\r
+ background: $modal-danger-color;\r
+ &:hover,\r
+ &:focus,\r
+ &:active {\r
+ background-color: lighten( $modal-danger-color, 5%)!important;\r
+ }\r
+ &.active {\r
+ background-color: darken( $modal-danger-color, 20%)!important;\r
+ @extend .z-depth-1-half;\r
+ }\r
+ }\r
+ .btn-outline-secondary-modal {\r
+ border: 2px solid $modal-danger-color;\r
+ color: $modal-danger-color!important;\r
+ }\r
+ }\r
+ }\r
+}
\ No newline at end of file
projects / bootswatch / blobdiff