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

   1 // GLOBAL STYLES\r
   2 // Z-levels\r
   3 .z-depth-0 {\r
   4     box-shadow: none !important;\r
   5 }\r
   6 \r
   7 .z-depth-1 {\r
   8     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);\r
   9 }\r
  10 \r
  11 .z-depth-1-half {\r
  12     box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);\r
  13 }\r
  14 \r
  15 .z-depth-2 {\r
  16     box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\r
  17 }\r
  18 \r
  19 .z-depth-3 {\r
  20     box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);\r
  21 }\r
  22 \r
  23 .z-depth-4 {\r
  24     box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);\r
  25 }\r
  26 \r
  27 .z-depth-5 {\r
  28     box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);\r
  29 }\r
  30 \r
  31 .hoverable {\r
  32     transition: box-shadow .55s;\r
  33     box-shadow: 0;\r
  34 }\r
  35 \r
  36 .hoverable:hover {\r
  37     transition: box-shadow .45s;\r
  38     box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\r
  39 }\r
  40 \r
  41 // Normalize\r
  42 a {\r
  43     color: $link-color;\r
  44     text-decoration: none;\r
  45     cursor: pointer;\r
  46     // Gets rid of tap active state\r
  47     -webkit-tap-highlight-color: transparent;\r
  48     &:hover,\r
  49     &:focus {\r
  50         text-decoration: none;\r
  51     }\r
  52 }\r
  53 \r
  54 .jumbotron,\r
  55 .card,\r
  56 .badge,\r
  57 .alert,\r
  58 .nav .nav-link,\r
  59 .navbar-toggler,\r
  60 .navbar,\r
  61 .breadcrumb,\r
  62 .page-item:last-child .page-link,\r
  63 .page-item:first-child .page-link,\r
  64 .pagination-lg .page-item:last-child .page-link,\r
  65 .pagination-lg .page-item:first-child .page-link,\r
  66 .pagination-sm .page-item:first-child .page-link,\r
  67 .pagination-sm .page-item:last-child .page-link,\r
  68 .list-group .list-group-item,\r
  69 .tooltip-inner,\r
  70 .popover,\r
  71 .dropdown-menu,\r
  72 .input-group-addon,\r
  73 .file-custom,\r
  74 .card .card-header,\r
  75 .nav-tabs,\r
  76 img {\r
  77     @include border-radius(2px);\r
  78 }\r
  79 \r
  80 .jumbotron,\r
  81 .card,\r
  82 .list-group,\r
  83 .popover,\r
  84 .navbar,\r
  85 .dropdown-menu,\r
  86 .badge,\r
  87 .chip {\r
  88     @extend .z-depth-1;\r
  89 }\r
  90 \r
  91 .popover,\r
  92 .input-group-addon,\r
  93 .dropdown-menu,\r
  94 .pagination .page-item .page-link {\r
  95     border: 0;\r
  96 }\r
  97 \r
  98 // Circle pagination\r
  99 .pagination .active .page-link {\r
 100     border-radius: 2px;\r
 101     transition: all 0.2s linear;\r
 102     @extend.z-depth-1;\r
 103 }\r
 104 \r
 105 .pagination .page-link {\r
 106     transition: all 0.3s linear;\r
 107     &:hover {\r
 108         transition: all 0.3s linear;\r
 109     }\r
 110     &:focus {\r
 111         background-color: transparent;\r
 112     }\r
 113 }\r
 114 \r
 115 .pagination {\r
 116     &.pg-blue {\r
 117         .active .page-link {\r
 118             background-color: $primary-color;\r
 119         }\r
 120     }\r
 121     &.pg-red {\r
 122         .active .page-link {\r
 123             background-color: $danger-color;\r
 124         }\r
 125     }\r
 126     &.pg-teal {\r
 127         .active .page-link {\r
 128             background-color: $default-color;\r
 129         }\r
 130     }\r
 131     &.pg-darkgrey {\r
 132         .active .page-link {\r
 133             background-color: $special-color;\r
 134         }\r
 135     }\r
 136     &.pg-dark {\r
 137         .active .page-link {\r
 138             background-color: $elegant-color;\r
 139         }\r
 140     }\r
 141     &.pg-bluegrey {\r
 142         .active .page-link {\r
 143             background-color: #3F729B;\r
 144         }\r
 145     }\r
 146     &.pg-amber {\r
 147         .active .page-link {\r
 148             background-color: #ff6f00;\r
 149         }\r
 150     }\r
 151     &.pg-purple {\r
 152         .active .page-link {\r
 153             background-color: #5e35b1;\r
 154         }\r
 155     }\r
 156 }\r
 157 \r
 158 .pager {\r
 159     a,\r
 160     .disabled>a {\r
 161         color: #fff;\r
 162     }\r
 163     &.pg-blue {\r
 164         li a {\r
 165             background-color: $primary-color;\r
 166             &:focus {\r
 167                 background-color: $primary-color;\r
 168                 color: #fff;\r
 169             }\r
 170             &:hover {\r
 171                 background-color: $primary-color;\r
 172                 color: #fff;\r
 173             }\r
 174         }\r
 175     }\r
 176     &.pg-red {\r
 177         li a {\r
 178             background-color: $danger-color;\r
 179             &:focus {\r
 180                 background-color: $danger-color;\r
 181                 color: #fff;\r
 182             }\r
 183             &:hover {\r
 184                 background-color: $danger-color;\r
 185                 color: #fff;\r
 186             }\r
 187         }\r
 188     }\r
 189     &.pg-teal {\r
 190         li a {\r
 191             background-color: $default-color;\r
 192             &:focus {\r
 193                 background-color: $default-color;\r
 194                 color: #fff;\r
 195             }\r
 196             &:hover {\r
 197                 background-color: $default-color;\r
 198                 color: #fff;\r
 199             }\r
 200         }\r
 201     }\r
 202     &.pg-darkgrey {\r
 203         li a {\r
 204             background-color: $special-color;\r
 205             &:focus {\r
 206                 background-color: $special-color;\r
 207                 color: #fff;\r
 208             }\r
 209             &:hover {\r
 210                 background-color: $special-color;\r
 211                 color: #fff;\r
 212             }\r
 213         }\r
 214     }\r
 215     &.pg-dark {\r
 216         li a {\r
 217             background-color: $elegant-color;\r
 218             &:focus {\r
 219                 background-color: $elegant-color;\r
 220                 color: #fff;\r
 221             }\r
 222             &:hover {\r
 223                 background-color: $elegant-color;\r
 224                 color: #fff;\r
 225             }\r
 226         }\r
 227     }\r
 228     &.pg-bluegrey {\r
 229         li a {\r
 230             background-color: #3F729B;\r
 231             &:focus {\r
 232                 background-color: #3F729B;\r
 233                 color: #fff;\r
 234             }\r
 235             &:hover {\r
 236                 background-color: #3F729B;\r
 237                 color: #fff;\r
 238             }\r
 239         }\r
 240     }\r
 241     &.pg-amber {\r
 242         li a {\r
 243             background-color: #ff6f00;\r
 244             &:focus {\r
 245                 background-color: #ff6f00;\r
 246                 color: #fff;\r
 247             }\r
 248             &:hover {\r
 249                 background-color: #ff6f00;\r
 250                 color: #fff;\r
 251             }\r
 252         }\r
 253     }\r
 254     &.pg-purple {\r
 255         li a {\r
 256             background-color: #5e35b1;\r
 257             &:focus {\r
 258                 background-color: #5e35b1;\r
 259                 color: #fff;\r
 260             }\r
 261             &:hover {\r
 262                 background-color: #5e35b1;\r
 263                 color: #fff;\r
 264             }\r
 265         }\r
 266     }\r
 267 }\r
 268 \r
 269 .pager .disabled>a,\r
 270 .pager .disabled>a:focus,\r
 271 .pager .disabled>a:hover {\r
 272     background-color: inerhit!important;\r
 273 }\r
 274 \r
 275 // Modal footer buttons fix\r
 276 .modal-footer .btn+ .btn {\r
 277     margin-bottom: 6px;\r
 278 }\r
 279 \r
 280 // Shifting bacground fix\r
 281 body.modal-open {\r
 282     overflow: inherit;\r
 283     padding-right: 0 !important;\r
 284 }\r
 285 \r
 286 body {\r
 287     overflow: auto !important;\r
 288 }\r
 289 \r
 290 // Card columns fix - cut edges of the cards\r
 291 .card-columns .card {\r
 292     margin: 2px;\r
 293 }\r
 294 \r
 295 // Parallax\r
 296 .parallax {\r
 297     background-repeat: no-repeat;\r
 298     background-size: cover;\r
 299     background-attachment: fixed;\r
 300     position: relative;\r
 301     padding-top: 3em;\r
 302     padding-bottom: 3em;\r
 303 }\r
 304 \r
 305 // Scrollspy free\r
 306 .nav-pills {\r
 307     &.horizontal-spy {\r
 308         .nav-item {\r
 309             .active {\r
 310                 border-bottom: 2px solid $mdb-color;\r
 311                 border-left: none;\r
 312             }\r
 313             &:hover {\r
 314                 background-color: transparent;\r
 315                 color: $mdb-color;\r
 316                 font-weight: 500;\r
 317                 border-left: none;\r
 318             }\r
 319         }\r
 320     }\r
 321 }\r
 322 \r
 323 //Nav normalize\r
 324 .nav-pills .nav-item.open .nav-link,\r
 325 .nav-pills .nav-item.open .nav-link:focus,\r
 326 .nav-pills .nav-item.open .nav-link:hover,\r
 327 .nav-pills .nav-link.active,\r
 328 .nav-pills .nav-link.active:focus,\r
 329 .nav-pills .nav-link.active:hover {\r
 330     background-color: transparent;\r
 331     color: #000;\r
 332 }\r
 333 \r
 334 //Disabled cursor\r
 335 .disabled {\r
 336     cursor: not-allowed!important;\r
 337 }\r
 338 \r
 339 //Video responsive\r
 340 .video-fluid {\r
 341     height: auto;\r
 342     width: 100%;\r
 343 }\r
 344 \r
 345 .video-full {\r
 346     position: fixed;\r
 347     top: 50%;\r
 348     left: 50%;\r
 349     min-width: 100%;\r
 350     min-height: 100%;\r
 351     width: auto;\r
 352     height: auto;\r
 353     z-index: -100;\r
 354     -ms-transform: translateX(-50%) translateY(-50%);\r
 355     -moz-transform: translateX(-50%) translateY(-50%);\r
 356     -webkit-transform: translateX(-50%) translateY(-50%);\r
 357     transform: translateX(-50%) translateY(-50%);\r
 358     background-size: cover;\r
 359 }\r
 360 \r
 361 //Media improvement\r
 362 .media {\r
 363     .media-left {\r
 364         padding:0 10px 10px 0;\r
 365         img {\r
 366             @extend .z-depth-1-half;\r
 367         }\r
 368     }\r
 369 }\r
 370 \r
 371 .card-block {\r
 372     h5 {\r
 373         margin-bottom: 1rem;\r
 374         font-size: 1rem;\r
 375         font-weight: 400;\r
 376     }\r
 377     h3 {\r
 378         margin-bottom: 1rem;\r
 379         font-weight: 400;\r
 380     }\r
 381     p {\r
 382         margin-bottom: 1rem;\r
 383     }\r
 384 }\r
 385 \r
 386 .tooltip {\r
 387     .tooltip-inner {\r
 388         padding: 0.4rem 0.8rem;\r
 389         @extend .z-depth-1-half;\r
 390     }\r
 391 }\r
 392 \r
 393 // Make sections full width\r
 394 section {\r
 395     flex: 0 0 100%;\r
 396 }\r
 397 \r
 398 .breadcrumb .breadcrumb-item.active {\r
 399     color: #818a91;\r
 400 }\r
 401 \r
 402 .dropdown-menu .dropdown-item:active {\r
 403     background:#f7f7f9;\r
 404 }\r
 405 \r
 406 .dropdown-menu {\r
 407     transition: all 0.2s cubic-bezier(0.72, 1.2, 0.71, 0.72);\r
 408     \r
 409 }