git.roojs.org Git - bootswatch/blob - material-kit/sass/material-kit/_example-pages.scss

   1 .wrapper > .header{
   2     min-height: 300px;
   3     background-position: center center;
   4     background-size: cover;
   5 }
   6 .main{
   7     background: #FFFFFF;
   8     position: relative;
   9     z-index: 3;
  10
  11 }
  12 .main-raised{
  13     margin: -60px 30px 0px;
  14     border-radius: $border-radius-base * 2;
  15     @include shadow-16dp();
  16 }
  17
  18 .title{
  19     font-weight: $font-weight-bold;
  20     color: $black-color;
  21 }
  22 h2.title{
  23     margin-bottom: $margin-base * 2;
  24 }
  25 .description{
  26     color: $gray-light;
  27 }
  28
  29 // general style for example pages
  30 .header-filter{
  31     position: relative;
  32
  33     &:after{
  34         position: absolute;
  35         z-index: 1;
  36         width: 100%;
  37         height: 100%;
  38         display: block;
  39         left: 0;
  40         top: 0;
  41         content: "";
  42         background-color: rgba(0,0,0,.4);
  43     }
  44
  45     .container{
  46         z-index: 2;
  47         position: relative;
  48     }
  49 }
  50 .gallery{
  51     .image{
  52         img{
  53             width: 100%;
  54         }
  55     }
  56 }
  57 .features{
  58     padding: 80px 0 0;
  59 }
  60
  61 .team{
  62     margin-top: 80px;
  63
  64     .team-player{
  65         .title{
  66             margin: $margin-base * 2 auto;
  67         }
  68         img{
  69             max-width: 170px;
  70         }
  71     }
  72 }
  73 .nav-align-center{
  74     text-align: center;
  75
  76     .nav-pills{
  77         display: inline-block;
  78     }
  79 }
  80 .navbar-absolute{
  81     position: absolute;
  82     width: 100%;
  83     padding-top: 10px;
  84     z-index: 1031;
  85 }
  86
  87 .index-page{
  88     .wrapper > .header{
  89         height: 90vh;
  90     }
  91     .brand{
  92         margin-top: 30vh;
  93         color: #FFFFFF;
  94         text-align: center;
  95
  96         h1{
  97             font-size: 4.8em;
  98             font-weight: 600;
  99         }
 100         h3{
 101             font-size: 1.5em;
 102             text-transform: uppercase;
 103             max-width: 400px;
 104             margin: 10px auto 0;
 105         }
 106     }
 107     .section-basic{
 108         padding-top: 15px;
 109     }
 110     .header-filter:after{
 111         background: rgba(101, 47, 142, 0.64);
 112         background: linear-gradient(45deg,  rgba(101, 47, 142, 0.88) 0%, rgba(125, 46, 185, 0.45) 100%);
 113         background: -moz-linear-gradient(135deg,  rgba(101, 47, 142, 0.88) 0%, rgba(125, 46, 185, 0.45) 100%);
 114         background: -webkit-linear-gradient(135deg,  rgba(101, 47, 142, 0.88) 0%, rgba(125, 46, 185, 0.45) 100%);
 115
 116     }
 117 }
 118
 119 // style for the landing page
 120 .landing-page{
 121
 122     .header{
 123         height: 100vh;
 124
 125         .container{
 126             padding-top: 26vh;
 127             color: #FFFFFF;
 128         }
 129
 130         .share{
 131             margin-top: 150px;
 132         }
 133         h1{
 134             font-weight: 600;
 135         }
 136         .title{
 137             color: $white-color;
 138         }
 139     }
 140
 141     .wrapper{
 142         background: #CCCCCC;
 143     }
 144 }
 145
 146 // style for the profile page
 147
 148 .profile-page{
 149     .header{
 150         height: 380px;
 151         background-position: top center;
 152     }
 153     .profile{
 154         text-align: center;
 155
 156         img{
 157             max-width: 160px;
 158             margin: -80px auto 0;
 159         }
 160     }
 161     .description{
 162         margin: $margin-base * 2 auto 0;
 163         max-width: 600px;
 164     }
 165     .profile-tabs{
 166         margin-top: $margin-base * 4;
 167     }
 168     .gallery{
 169         margin-top: $margin-base * 3;
 170         padding-bottom: 50px;
 171
 172         img{
 173             width: 100%;
 174             margin-bottom: $margin-base * 2;
 175         }
 176     }
 177 }
 178
 179 .signup-page{
 180     .wrapper{
 181         > .header{
 182             min-height: 100vh;
 183         }
 184         .card-signup{
 185             margin: 160px 0 40px;
 186         }
 187     }
 188     .footer{
 189         .copyright,
 190         a{
 191             color: #FFFFFF;
 192         }
 193     }
 194 }
 195 .landing-page,
 196 .profile-page,
 197 .signup-page,
 198 .index-page{
 199     .navbar-transparent{
 200         padding-top: 25px;
 201     }
 202 }
 203
 204 @media (max-width: 991px){
 205     .landing-page .header{
 206         height: auto;
 207         min-height: 100vh;
 208
 209         .container{
 210             padding-bottom: 70px
 211         }
 212     }
 213 }
 214 @media (max-width: 768px){
 215     .footer{
 216         .copyright{
 217             display: inline-block;
 218             text-align: center;
 219             padding: 10px 0;
 220             float: none !important;
 221             width: 100%;
 222
 223         }
 224     }
 225
 226     .navbar.navbar-transparent{
 227         background-color: rgba(0,0,0,.4);
 228         padding-top: 10px;
 229         border-radius: 0;
 230     }
 231
 232     .main-raised{
 233         margin-left: 10px;
 234         margin-right: 10px;
 235     }
 236 }