git.roojs.org Git - bootswatch/blob - MDB Free/sass/mdb/free/_modals.scss

   1 // Distance\r
   2 $modal-distance:10px;\r
   3 $modal-info-color: #5394ff;\r
   4 $modal-success-color: #01d36b;\r
   5 $modal-warning-color: #ff8e38;\r
   6 $modal-danger-color: #ff4b4b;\r
   7 \r
   8 // Styles for body\r
   9 body {\r
  10     &.modal-open {\r
  11         padding-right: 0 !important;\r
  12     }\r
  13     &.scrollable {\r
  14         overflow-y: auto;\r
  15     }\r
  16 }\r
  17 \r
  18 // *** ENHANCED BOOTSTRAP MODALS ***///\r
  19 // General styles\r
  20 .modal-dialog {\r
  21     .modal-content {\r
  22         @include border-radius(2px);\r
  23         @extend .z-depth-1-half;\r
  24         border: 0;\r
  25     }\r
  26 }\r
  27 \r
  28 // Position & Size\r
  29 .modal {\r
  30     .modal-dialog {\r
  31         &.modal-top {\r
  32             top: 0;\r
  33         }\r
  34         &.modal-left {\r
  35             left: 0;\r
  36         }\r
  37         &.modal-right {\r
  38             right: 0;\r
  39         }\r
  40         &.modal-bottom {\r
  41             bottom: 0;\r
  42         }\r
  43         &.modal-top-left {\r
  44             top: $modal-distance;\r
  45             left: $modal-distance;\r
  46         }\r
  47         &.modal-top-right {\r
  48             top: $modal-distance;\r
  49             right: $modal-distance;\r
  50         }\r
  51         &.modal-bottom-left {\r
  52             left: $modal-distance;\r
  53             bottom: $modal-distance;\r
  54         }\r
  55         &.modal-bottom-right {\r
  56             right: $modal-distance;\r
  57             bottom: $modal-distance;\r
  58         }\r
  59     }\r
  60     &.fade {\r
  61         &.top:not(.show) .modal-dialog {\r
  62             transform: translate3d(0, -25%, 0);\r
  63         }\r
  64         &.left:not(.show) .modal-dialog {\r
  65             transform: translate3d(-25%, 0, 0);\r
  66         }\r
  67         &.right:not(.show) .modal-dialog {\r
  68             transform: translate3d(25%, 0, 0);\r
  69         }\r
  70         &.bottom:not(.show) .modal-dialog {\r
  71             transform: translate3d(0, 25%, 0);\r
  72         }\r
  73     }\r
  74     &.modal-scrolling {\r
  75         position: relative;\r
  76         .modal-dialog {\r
  77             position: fixed;\r
  78             z-index: 1050;\r
  79         }\r
  80     }\r
  81     &.modal-content-clickable {\r
  82         top:auto;\r
  83         bottom:auto;\r
  84         .modal-dialog {\r
  85             position:fixed;\r
  86         }\r
  87     }\r
  88     .modal-fluid {\r
  89         width: 100%;\r
  90         max-width: 100%;\r
  91         .modal-content {\r
  92             width: 100%;\r
  93         }\r
  94     }\r
  95     .modal-frame {\r
  96         position: absolute;\r
  97         width: 100%;\r
  98         max-width: 100%;\r
  99         margin: 0;\r
 100         &.modal-bottom {\r
 101             bottom: 0;\r
 102         }\r
 103     }\r
 104     .modal-full-height {\r
 105         display: flex;\r
 106         position: absolute;\r
 107         width: 400px;\r
 108         height: 100%;\r
 109         margin: 0;\r
 110         top: 0;\r
 111         // bottom: 0;\r
 112         right: 0;\r
 113         &.modal-top, &.modal-bottom {\r
 114             display:block;\r
 115             width:100%;\r
 116             max-width:100%;\r
 117             height:auto;\r
 118         }\r
 119         &.modal-top {\r
 120             bottom:auto;\r
 121         }\r
 122         &.modal-bottom {\r
 123             top:auto;\r
 124         }\r
 125         .modal-content {\r
 126             width:100%;\r
 127         }\r
 128         &.modal-lg {\r
 129             max-width:90%;\r
 130             width:90%;\r
 131             @media (min-width:992px) {\r
 132                 max-width:800px;\r
 133                 width:800px;  \r
 134             }\r
 135             @media (min-width:1200px) {\r
 136                 max-width:1000px;\r
 137                 width:1000px;  \r
 138             }\r
 139         }\r
 140     }\r
 141     .modal-side {\r
 142         position: absolute;\r
 143         right: $modal-distance;\r
 144         bottom: $modal-distance;\r
 145         margin: 0;\r
 146         width: 400px;\r
 147     }\r
 148 }\r
 149 \r
 150 // Styles\r
 151 .modal-dialog {\r
 152     .btn .fa {\r
 153         color:#fff !important;\r
 154     }\r
 155     [class*="btn-outline-"] .fa {\r
 156         color: inherit !important;\r
 157     }\r
 158     // Cascading modals\r
 159     &.cascading-modal {\r
 160         margin-top: 10%;\r
 161         // Cascading header\r
 162         .modal-header {\r
 163             text-align: center;\r
 164             margin: -2rem 1rem 1rem 1rem;\r
 165             padding: 1.5rem;\r
 166             border: none;\r
 167             flex-direction: column;\r
 168             @extend .z-depth-1-half;\r
 169             @include border-radius(3px);\r
 170             .close {\r
 171                 margin-right: 2.5rem;\r
 172             }\r
 173             &.white-text {\r
 174                 .close {\r
 175                     color: #fff;\r
 176                     opacity: 1;\r
 177                 }\r
 178             }\r
 179             .title {\r
 180                 width: 100%;\r
 181                 margin-bottom: 0;\r
 182                 font-size: 1.25rem;\r
 183                 .fa {\r
 184                     margin-right: 9px;\r
 185                 }\r
 186             }\r
 187             .social-buttons {\r
 188                 margin-top: 1.5rem;\r
 189                 a {\r
 190                     font-size: 1rem;\r
 191                 }\r
 192             }\r
 193         }\r
 194         // Cascading tabs nav\r
 195         .modal-c-tabs {\r
 196             .nav-tabs {\r
 197                 margin: -1.5rem 1rem 0 1rem;\r
 198                 @extend .z-depth-1;\r
 199             }\r
 200             .tab-content {\r
 201                 padding: 1.7rem 0 0 0;\r
 202             }\r
 203         }\r
 204         // Footer customization\r
 205         .modal-body,\r
 206         .modal-footer {\r
 207             color: #616161;\r
 208             padding-right: 2rem;\r
 209             padding-left: 2rem;\r
 210             .additional-option {\r
 211                 text-align: center;\r
 212                 margin-top: 1rem;\r
 213             }\r
 214         }\r
 215         // Cascading avatar\r
 216         &.modal-avatar {\r
 217             margin-top: 6rem;\r
 218             .modal-header {\r
 219                 @extend .z-depth-0;\r
 220                 @extend .img-fluid;\r
 221                 margin: -6rem 2rem -1rem 2rem;\r
 222                 img {\r
 223                     width: 130px;\r
 224                     @extend .z-depth-2;\r
 225                 }\r
 226             }\r
 227         }\r
 228     }\r
 229     // Modal notify\r
 230     &.modal-notify {\r
 231         .heading {\r
 232             margin: 0;\r
 233             padding: 0.3rem;\r
 234             color: #fff;\r
 235             font-size: 1.15rem;\r
 236         }\r
 237         .modal-header {\r
 238             @extend .z-depth-1;\r
 239             border: 0;\r
 240         }\r
 241         .close {\r
 242             opacity: 1;\r
 243         }\r
 244         .modal-body {\r
 245             padding: 1.5rem;\r
 246             color: #616161;\r
 247         }\r
 248         .btn-outline-secondary-modal {\r
 249             background-color: transparent;\r
 250         }\r
 251         // Modal info\r
 252         &.modal-info {\r
 253             .modal-header {\r
 254                 background-color: $modal-info-color;\r
 255             }\r
 256             .fa {\r
 257                 color: $modal-info-color;\r
 258             }\r
 259             .badge {\r
 260                 background-color: $modal-info-color;\r
 261             }\r
 262             .btn-primary-modal {\r
 263                 background: $modal-info-color;\r
 264                 &:hover,\r
 265                 &:focus,\r
 266                 &:active {\r
 267                     background-color: lighten( $modal-info-color, 5%)!important;\r
 268                 }\r
 269                 &.active {\r
 270                     background-color: darken( $modal-info-color, 20%)!important;\r
 271                     @extend .z-depth-1-half;\r
 272                 }\r
 273             }\r
 274             .btn-outline-secondary-modal {\r
 275                 border: 2px solid $modal-info-color;\r
 276                 color: $modal-info-color!important;\r
 277             }\r
 278         }\r
 279         // Modal warning\r
 280         &.modal-warning {\r
 281             .modal-header {\r
 282                 background-color: $modal-warning-color;\r
 283             }\r
 284             .fa {\r
 285                 color: $modal-warning-color;\r
 286             }\r
 287             .badge {\r
 288                 background-color: $modal-warning-color;\r
 289             }\r
 290             .btn-primary-modal {\r
 291                 background: $modal-warning-color;\r
 292                 &:hover,\r
 293                 &:focus,\r
 294                 &:active {\r
 295                     background-color: lighten( $modal-warning-color, 5%)!important;\r
 296                 }\r
 297                 &.active {\r
 298                     background-color: darken( $modal-warning-color, 20%)!important;\r
 299                     @extend .z-depth-1-half;\r
 300                 }\r
 301             }\r
 302             .btn-outline-secondary-modal {\r
 303                 border: 2px solid $modal-warning-color;\r
 304                 color: $modal-warning-color!important;\r
 305             }\r
 306         }\r
 307         // Modal success\r
 308         &.modal-success {\r
 309             .modal-header {\r
 310                 background-color: $modal-success-color;\r
 311             }\r
 312             .fa {\r
 313                 color: $modal-success-color;\r
 314             }\r
 315             .badge {\r
 316                 background-color: $modal-success-color;\r
 317             }\r
 318             .btn-primary-modal {\r
 319                 background: $modal-success-color;\r
 320                 &:hover,\r
 321                 &:focus,\r
 322                 &:active {\r
 323                     background-color: lighten( $modal-success-color, 5%)!important;\r
 324                 }\r
 325                 &.active {\r
 326                     background-color: darken( $modal-success-color, 20%)!important;\r
 327                     @extend .z-depth-1-half;\r
 328                 }\r
 329             }\r
 330             .btn-outline-secondary-modal {\r
 331                 border: 2px solid $modal-success-color;\r
 332                 color: $modal-success-color!important;\r
 333             }\r
 334         }\r
 335         // Modal danger\r
 336         &.modal-danger {\r
 337             .modal-header {\r
 338                 background-color: $modal-danger-color;\r
 339             }\r
 340             .fa {\r
 341                 color: $modal-danger-color;\r
 342             }\r
 343             .badge {\r
 344                 background-color: $modal-danger-color;\r
 345             }\r
 346             .btn-primary-modal {\r
 347                 background: $modal-danger-color;\r
 348                 &:hover,\r
 349                 &:focus,\r
 350                 &:active {\r
 351                     background-color: lighten( $modal-danger-color, 5%)!important;\r
 352                 }\r
 353                 &.active {\r
 354                     background-color: darken( $modal-danger-color, 20%)!important;\r
 355                     @extend .z-depth-1-half;\r
 356                 }\r
 357             }\r
 358             .btn-outline-secondary-modal {\r
 359                 border: 2px solid $modal-danger-color;\r
 360                 color: $modal-danger-color!important;\r
 361             }\r
 362         }\r
 363     }\r
 364 }