tools/side_chain_tool/web/node_modules/bootstrap/scss/_card.scss

   1 //
   2 // Base styles
   3 //
   4
   5 .card {
   6   position: relative;
   7   display: flex;
   8   flex-direction: column;
   9   min-width: 0;
  10   word-wrap: break-word;
  11   background-color: $card-bg;
  12   background-clip: border-box;
  13   border: $card-border-width solid $card-border-color;
  14   @include border-radius($card-border-radius);
  15
  16   > hr {
  17     margin-right: 0;
  18     margin-left: 0;
  19   }
  20
  21   > .list-group:first-child {
  22     .list-group-item:first-child {
  23       @include border-top-radius($card-border-radius);
  24     }
  25   }
  26
  27   > .list-group:last-child {
  28     .list-group-item:last-child {
  29       @include border-bottom-radius($card-border-radius);
  30     }
  31   }
  32 }
  33
  34 .card-body {
  35   // Enable `flex-grow: 1` for decks and groups so that card blocks take up
  36   // as much space as possible, ensuring footers are aligned to the bottom.
  37   flex: 1 1 auto;
  38   padding: $card-spacer-x;
  39 }
  40
  41 .card-title {
  42   margin-bottom: $card-spacer-y;
  43 }
  44
  45 .card-subtitle {
  46   margin-top: -($card-spacer-y / 2);
  47   margin-bottom: 0;
  48 }
  49
  50 .card-text:last-child {
  51   margin-bottom: 0;
  52 }
  53
  54 .card-link {
  55   @include hover {
  56     text-decoration: none;
  57   }
  58
  59   + .card-link {
  60     margin-left: $card-spacer-x;
  61   }
  62 }
  63
  64 //
  65 // Optional textual caps
  66 //
  67
  68 .card-header {
  69   padding: $card-spacer-y $card-spacer-x;
  70   margin-bottom: 0; // Removes the default margin-bottom of <hN>
  71   background-color: $card-cap-bg;
  72   border-bottom: $card-border-width solid $card-border-color;
  73
  74   &:first-child {
  75     @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
  76   }
  77
  78   + .list-group {
  79     .list-group-item:first-child {
  80       border-top: 0;
  81     }
  82   }
  83 }
  84
  85 .card-footer {
  86   padding: $card-spacer-y $card-spacer-x;
  87   background-color: $card-cap-bg;
  88   border-top: $card-border-width solid $card-border-color;
  89
  90   &:last-child {
  91     @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
  92   }
  93 }
  94
  95
  96 //
  97 // Header navs
  98 //
  99
 100 .card-header-tabs {
 101   margin-right: -($card-spacer-x / 2);
 102   margin-bottom: -$card-spacer-y;
 103   margin-left: -($card-spacer-x / 2);
 104   border-bottom: 0;
 105 }
 106
 107 .card-header-pills {
 108   margin-right: -($card-spacer-x / 2);
 109   margin-left: -($card-spacer-x / 2);
 110 }
 111
 112 // Card image
 113 .card-img-overlay {
 114   position: absolute;
 115   top: 0;
 116   right: 0;
 117   bottom: 0;
 118   left: 0;
 119   padding: $card-img-overlay-padding;
 120 }
 121
 122 .card-img {
 123   width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
 124   @include border-radius($card-inner-border-radius);
 125 }
 126
 127 // Card image caps
 128 .card-img-top {
 129   width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
 130   @include border-top-radius($card-inner-border-radius);
 131 }
 132
 133 .card-img-bottom {
 134   width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
 135   @include border-bottom-radius($card-inner-border-radius);
 136 }
 137
 138
 139 // Card deck
 140
 141 .card-deck {
 142   display: flex;
 143   flex-direction: column;
 144
 145   .card {
 146     margin-bottom: $card-deck-margin;
 147   }
 148
 149   @include media-breakpoint-up(sm) {
 150     flex-flow: row wrap;
 151     margin-right: -$card-deck-margin;
 152     margin-left: -$card-deck-margin;
 153
 154     .card {
 155       display: flex;
 156       // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
 157       flex: 1 0 0%;
 158       flex-direction: column;
 159       margin-right: $card-deck-margin;
 160       margin-bottom: 0; // Override the default
 161       margin-left: $card-deck-margin;
 162     }
 163   }
 164 }
 165
 166
 167 //
 168 // Card groups
 169 //
 170
 171 .card-group {
 172   display: flex;
 173   flex-direction: column;
 174
 175   // The child selector allows nested `.card` within `.card-group`
 176   // to display properly.
 177   > .card {
 178     margin-bottom: $card-group-margin;
 179   }
 180
 181   @include media-breakpoint-up(sm) {
 182     flex-flow: row wrap;
 183     // The child selector allows nested `.card` within `.card-group`
 184     // to display properly.
 185     > .card {
 186       // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
 187       flex: 1 0 0%;
 188       margin-bottom: 0;
 189
 190       + .card {
 191         margin-left: 0;
 192         border-left: 0;
 193       }
 194
 195       // Handle rounded corners
 196       @if $enable-rounded {
 197         &:first-child {
 198           @include border-right-radius(0);
 199
 200           .card-img-top,
 201           .card-header {
 202             border-top-right-radius: 0;
 203           }
 204           .card-img-bottom,
 205           .card-footer {
 206             border-bottom-right-radius: 0;
 207           }
 208         }
 209
 210         &:last-child {
 211           @include border-left-radius(0);
 212
 213           .card-img-top,
 214           .card-header {
 215             border-top-left-radius: 0;
 216           }
 217           .card-img-bottom,
 218           .card-footer {
 219             border-bottom-left-radius: 0;
 220           }
 221         }
 222
 223         &:only-child {
 224           @include border-radius($card-border-radius);
 225
 226           .card-img-top,
 227           .card-header {
 228             @include border-top-radius($card-border-radius);
 229           }
 230           .card-img-bottom,
 231           .card-footer {
 232             @include border-bottom-radius($card-border-radius);
 233           }
 234         }
 235
 236         &:not(:first-child):not(:last-child):not(:only-child) {
 237           @include border-radius(0);
 238
 239           .card-img-top,
 240           .card-img-bottom,
 241           .card-header,
 242           .card-footer {
 243             @include border-radius(0);
 244           }
 245         }
 246       }
 247     }
 248   }
 249 }
 250
 251
 252 //
 253 // Columns
 254 //
 255
 256 .card-columns {
 257   .card {
 258     margin-bottom: $card-columns-margin;
 259   }
 260
 261   @include media-breakpoint-up(sm) {
 262     column-count: $card-columns-count;
 263     column-gap: $card-columns-gap;
 264     orphans: 1;
 265     widows: 1;
 266
 267     .card {
 268       display: inline-block; // Don't let them vertically span multiple columns
 269       width: 100%; // Don't let their width change
 270     }
 271   }
 272 }
 273
 274
 275 //
 276 // Accordion
 277 //
 278
 279 .accordion {
 280   .card:not(:first-of-type):not(:last-of-type) {
 281     border-bottom: 0;
 282     border-radius: 0;
 283   }
 284
 285   .card:not(:first-of-type) {
 286     .card-header:first-child {
 287       border-radius: 0;
 288     }
 289   }
 290
 291   .card:first-of-type {
 292     border-bottom: 0;
 293     border-bottom-right-radius: 0;
 294     border-bottom-left-radius: 0;
 295   }
 296
 297   .card:last-of-type {
 298     border-top-left-radius: 0;
 299     border-top-right-radius: 0;
 300   }
 301 }