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

   1 .card {
   2
   3     display: inline-block;
   4     position: relative;
   5     width: 100%;
   6
   7     .card-height-indicator {
   8         margin-top: 100%;
   9     }
  10     .card-content {
  11         position: absolute;
  12         top: 0;
  13         bottom: 0;
  14         left: 0;
  15         right: 0;
  16     }
  17
  18     border-radius: $border-radius-base;
  19     color: $mdb-card-body-text;
  20     background: $mdb-card-body-background;
  21
  22     @include shadow-2dp();
  23
  24     .card-image {
  25         height: 60%;
  26         position: relative;
  27         overflow: hidden;
  28         img {
  29             width: 100%;
  30             height: 100%;
  31             border-top-left-radius: 2px;
  32             border-top-right-radius: 2px;
  33             pointer-events: none;
  34         }
  35         .card-image-headline {
  36             position: absolute;
  37             bottom: 16px;
  38             left: 18px;
  39             color: $mdb-card-image-headline;
  40             font-size: 2em;
  41         }
  42     }
  43
  44     .content{
  45         padding: 15px;
  46     }
  47
  48     .card-body {
  49         height: 30%;
  50         padding: 18px;
  51     }
  52
  53     .card-footer {
  54         height: 10%;
  55         padding: 18px;
  56         button, a {
  57             margin: 0 !important;
  58             position: relative;
  59             bottom: 25px;
  60             width: auto;
  61             &:first-child {
  62                 left: -15px;
  63             }
  64         }
  65     }
  66
  67     .header{
  68         @include shadow-big();
  69         margin: $margin-base;
  70         border-radius: $border-radius-base;
  71         padding: $padding-base 0;
  72         background-color: $white-color;
  73     }
  74
  75     .header-primary{
  76         background: linear-gradient(60deg, $purple-400, $purple-700);
  77     }
  78     .header-info{
  79         background: linear-gradient(60deg, $light-blue-400, $light-blue-700);
  80     }
  81     .header-success{
  82         background: linear-gradient(60deg, $green-400, $green-700);
  83     }
  84     .header-warning{
  85         background: linear-gradient(60deg, $yellow-600, $yellow-700);
  86     }
  87     .header-danger{
  88         background: linear-gradient(60deg, $red-400, $red-700);
  89     }
  90
  91     [class*="header-"]{
  92         color: #FFFFFF;
  93     }
  94 }
  95
  96 .card-raised{
  97     @include shadow-big();
  98 }
  99
 100 .card-signup{
 101     .header{
 102         @include shadow-big();
 103         margin-left: 20px;
 104         margin-right: 20px;
 105         margin-top: -40px;
 106         padding: 20px 0;
 107     }
 108     .text-divider{
 109         margin-top: 30px;
 110         margin-bottom: 0px;
 111         text-align: center;
 112     }
 113     .content{
 114         padding: 0px 30px 0px 10px;
 115     }
 116
 117     .checkbox{
 118         margin-top: 20px;
 119
 120         label{
 121             margin-left: 17px;
 122         }
 123         .checkbox-material{
 124             padding-right: 12px;
 125         }
 126     }
 127
 128     .social-line{
 129         margin-top: $margin-base;
 130         text-align: center;
 131
 132         .btn{
 133             color: $white-color;
 134             margin-left: 5px;
 135             margin-right: 5px;
 136         }
 137     }
 138 }
 139
 140 .card-nav-tabs{
 141     margin-top: 45px;
 142
 143     .header{
 144         margin-top: -$margin-base * 2;
 145     }
 146     .nav-tabs{
 147         background: transparent;
 148     }
 149 }
 150
 151 .card-plain{
 152     background: transparent;
 153     box-shadow: none;
 154
 155     .header{
 156         margin-left: 0;
 157         margin-right: 0;
 158     }
 159
 160     .content{
 161         padding-left: 0;
 162         padding-right: 0;
 163     }
 164 }