resources/scss/bootstrap-cust/_card.scss

   1 .card {
   2   position: relative;
   3   display: -webkit-box;
   4   display: -ms-flexbox;
   5   display: flex;
   6   -webkit-box-orient: vertical;
   7   -webkit-box-direction: normal;
   8   -ms-flex-direction: column;
   9   flex-direction: column;
  10   min-width: 0;
  11   height: 300px;
  12   word-wrap: break-word;
  13   background-color: #fff;
  14   background-clip: border-box;
  15   border: 1px solid rgba(0, 0, 0, 0.125);
  16   border-radius: 0.25rem;
  17 }
  18
  19 .addCardFooter {
  20   padding-bottom: 50px;
  21 }
  22
  23 .card-content {
  24   margin: 16px;
  25   height: 100%;
  26 }
  27
  28 .card > hr {
  29   margin-right: 0;
  30   margin-left: 0;
  31 }
  32
  33 .card > .list-group:first-child .list-group-item:first-child {
  34   border-top-left-radius: 0.25rem;
  35   border-top-right-radius: 0.25rem;
  36 }
  37
  38 .card > .list-group:last-child .list-group-item:last-child {
  39   border-bottom-right-radius: 0.25rem;
  40   border-bottom-left-radius: 0.25rem;
  41 }
  42
  43 .card-body {
  44   -webkit-box-flex: 1;
  45   -ms-flex: 1 1 auto;
  46   flex: 1 1 auto;
  47   padding: 1.25rem;
  48 }
  49
  50 .card-subtitle {
  51   margin-top: -0.375rem;
  52   margin-bottom: 0;
  53 }
  54
  55 .card-text:last-child {
  56   margin-bottom: 0;
  57 }
  58
  59 .card-link:hover {
  60   text-decoration: none;
  61 }
  62
  63 .card-link + .card-link {
  64   margin-left: 1.25rem;
  65 }
  66
  67 .card-header-help {
  68   padding: 0.75rem 1.25rem;
  69   width:100%;
  70   margin-bottom: 0;
  71   background-color: rgba(0, 0, 0, 0.03);
  72   border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  73 }
  74
  75 .card-header {
  76   padding: 0.75rem 0.75rem;
  77   margin-bottom: 0;
  78   background-color: rgba(0, 0, 0, 0.03);
  79   border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  80 }
  81
  82 .card-header:first-child {
  83   border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
  84 }
  85
  86 .card-header + .list-group .list-group-item:first-child {
  87   border-top: 0;
  88 }
  89
  90 .card-footer {
  91   padding: 0.75rem 0.75rem;
  92   background-color: #f2f2f2;
  93   border-top: 1px solid rgba(0, 0, 0, 0.125);
  94 }
  95
  96 .card-footer:last-child {
  97   border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
  98 }
  99
 100 .card-header-tabs {
 101   margin-right: -0.625rem;
 102   margin-bottom: -0.75rem;
 103   margin-left: -0.625rem;
 104   border-bottom: 0;
 105 }
 106
 107 .card-header-pills {
 108   margin-right: -0.625rem;
 109   margin-left: -0.625rem;
 110 }
 111
 112 .card-img-overlay {
 113   position: absolute;
 114   top: 0;
 115   right: 0;
 116   bottom: 0;
 117   left: 0;
 118   padding: 1.25rem;
 119 }
 120
 121 .card-img {
 122   width: 100%;
 123   border-radius: calc(0.25rem - 1px);
 124 }
 125
 126 .card-img-top {
 127   width: 100%;
 128   border-top-left-radius: calc(0.25rem - 1px);
 129   border-top-right-radius: calc(0.25rem - 1px);
 130 }
 131
 132 .card-img-bottom {
 133   width: 100%;
 134   border-bottom-right-radius: calc(0.25rem - 1px);
 135   border-bottom-left-radius: calc(0.25rem - 1px);
 136 }
 137
 138 .card-deck {
 139   display: -webkit-box;
 140   display: -ms-flexbox;
 141   display: flex;
 142   -webkit-box-orient: vertical;
 143   -webkit-box-direction: normal;
 144   -ms-flex-direction: column;
 145   flex-direction: column;
 146 }
 147
 148 .card-deck .card {
 149   margin-bottom: 15px;
 150 }
 151
 152 @media (min-width: 576px) {
 153   .card-deck {
 154     -webkit-box-orient: horizontal;
 155     -webkit-box-direction: normal;
 156     -ms-flex-flow: row wrap;
 157     flex-flow: row wrap;
 158     margin-right: -15px;
 159     margin-left: -15px;
 160   }
 161   .card-deck .card {
 162     display: -webkit-box;
 163     display: -ms-flexbox;
 164     display: flex;
 165     -webkit-box-flex: 1;
 166     -ms-flex: 1 0 0%;
 167     flex: 1 0 0%;
 168     -webkit-box-orient: vertical;
 169     -webkit-box-direction: normal;
 170     -ms-flex-direction: column;
 171     flex-direction: column;
 172     margin-right: 15px;
 173     margin-bottom: 0;
 174     margin-left: 15px;
 175   }
 176 }
 177
 178 .card-group {
 179   display: -webkit-box;
 180   display: -ms-flexbox;
 181   display: flex;
 182   -webkit-box-orient: vertical;
 183   -webkit-box-direction: normal;
 184   -ms-flex-direction: column;
 185   flex-direction: column;
 186 }
 187
 188 .card-group > .card {
 189   margin-bottom: 15px;
 190 }
 191
 192 @media (min-width: 576px) {
 193   .card-group {
 194     -webkit-box-orient: horizontal;
 195     -webkit-box-direction: normal;
 196     -ms-flex-flow: row wrap;
 197     flex-flow: row wrap;
 198   }
 199   .card-group > .card {
 200     -webkit-box-flex: 1;
 201     -ms-flex: 1 0 0%;
 202     flex: 1 0 0%;
 203     margin-bottom: 0;
 204   }
 205   .card-group > .card + .card {
 206     margin-left: 0;
 207     border-left: 0;
 208   }
 209   .card-group > .card:first-child {
 210     border-top-right-radius: 0;
 211     border-bottom-right-radius: 0;
 212   }
 213   .card-group > .card:first-child .card-img-top, .card-group > .card:first-child .card-header {
 214     border-top-right-radius: 0;
 215   }
 216   .card-group > .card:first-child .card-img-bottom, .card-group > .card:first-child .card-footer {
 217     border-bottom-right-radius: 0;
 218   }
 219   .card-group > .card:last-child {
 220     border-top-left-radius: 0;
 221     border-bottom-left-radius: 0;
 222   }
 223   .card-group > .card:last-child .card-img-top, .card-group > .card:last-child .card-header {
 224     border-top-left-radius: 0;
 225   }
 226   .card-group > .card:last-child .card-img-bottom, .card-group > .card:last-child .card-footer {
 227     border-bottom-left-radius: 0;
 228   }
 229   .card-group > .card:only-child {
 230     border-radius: 0.25rem;
 231   }
 232   .card-group > .card:only-child .card-img-top, .card-group > .card:only-child .card-header {
 233     border-top-left-radius: 0.25rem;
 234     border-top-right-radius: 0.25rem;
 235   }
 236   .card-group > .card:only-child .card-img-bottom, .card-group > .card:only-child .card-footer {
 237     border-bottom-right-radius: 0.25rem;
 238     border-bottom-left-radius: 0.25rem;
 239   }
 240   .card-group > .card:not(:first-child):not(:last-child):not(:only-child) {
 241     border-radius: 0;
 242   }
 243 }
 244
 245 .card-columns .card {
 246   margin-bottom: 0.75rem;
 247 }
 248
 249 @media (min-width: 576px) {
 250   .card-columns {
 251     -webkit-column-count: 3;
 252     -moz-column-count: 3;
 253     column-count: 3;
 254     -webkit-column-gap: 1.25rem;
 255     -moz-column-gap: 1.25rem;
 256     column-gap: 1.25rem;
 257   }
 258   .card-columns .card {
 259     display: inline-block;
 260     width: 100%;
 261   }
 262 }