github.com/mithrandie/csvq@v1.18.1/docs/_sass/components/_cards.scss (about)

     1  
     2  
     3  .card-panel {
     4    transition: box-shadow .25s;
     5    padding: $card-padding;
     6    margin: $element-top-margin 0 $element-bottom-margin 0;
     7    border-radius: 2px;
     8    @extend .z-depth-1;
     9    background-color: $card-bg-color;
    10  }
    11  
    12  .card {
    13    position: relative;
    14    margin: $element-top-margin 0 $element-bottom-margin 0;
    15    background-color: $card-bg-color;
    16    transition: box-shadow .25s;
    17    border-radius: 2px;
    18    @extend .z-depth-1;
    19  
    20  
    21    .card-title {
    22      font-size: 24px;
    23      font-weight: 300;
    24      &.activator {
    25        cursor: pointer;
    26      }
    27    }
    28  
    29    // Card Sizes
    30    &.small, &.medium, &.large {
    31      position: relative;
    32  
    33      .card-image {
    34        max-height: 60%;
    35        overflow: hidden;
    36      }
    37      .card-image + .card-content {
    38        max-height: 40%;
    39      }
    40      .card-content {
    41        max-height: 100%;
    42        overflow: hidden;
    43      }
    44      .card-action {
    45        position: absolute;
    46        bottom: 0;
    47        left: 0;
    48        right: 0;
    49      }
    50    }
    51  
    52    &.small {
    53      height: 300px;
    54    }
    55  
    56    &.medium {
    57      height: 400px;
    58    }
    59  
    60    &.large {
    61      height: 500px;
    62    }
    63  
    64    // Horizontal Cards
    65    &.horizontal {
    66      &.small, &.medium, &.large {
    67        .card-image {
    68          height: 100%;
    69          max-height: none;
    70          overflow: visible;
    71  
    72          img {
    73            height: 100%;
    74          }
    75        }
    76      }
    77  
    78      display: flex;
    79  
    80      .card-image {
    81        max-width: 50%;
    82        img {
    83          border-radius: 2px 0 0 2px;
    84          max-width: 100%;
    85          width: auto;
    86        }
    87      }
    88  
    89      .card-stacked {
    90        display: flex;
    91        flex-direction: column;
    92        flex: 1;
    93        position: relative;
    94  
    95        .card-content {
    96          flex-grow: 1;
    97        }
    98      }
    99    }
   100  
   101    // Sticky Action Section
   102    &.sticky-action {
   103      .card-action {
   104        z-index: 2;
   105      }
   106  
   107      .card-reveal {
   108        z-index: 1;
   109        padding-bottom: 64px;
   110      }
   111    }
   112  
   113  
   114  
   115  
   116    .card-image {
   117      position: relative;
   118  
   119      // Image background for content
   120      img {
   121        display: block;
   122        border-radius: 2px 2px 0 0;
   123        position: relative;
   124        left: 0;
   125        right: 0;
   126        top: 0;
   127        bottom: 0;
   128        width: 100%;
   129      }
   130  
   131      .card-title {
   132        color: $card-bg-color;
   133        position: absolute;
   134        bottom: 0;
   135        left: 0;
   136        max-width: 100%;
   137        padding: $card-padding;
   138      }
   139    }
   140  
   141    .card-content {
   142      padding: $card-padding;
   143      border-radius: 0 0 2px 2px;
   144  
   145      p {
   146        margin: 0;
   147        color: inherit;
   148      }
   149      .card-title {
   150        display: block;
   151        line-height: 32px;
   152        margin-bottom: 8px;
   153  
   154        i {
   155          line-height: 32px;
   156        }
   157      }
   158    }
   159  
   160    .card-action {
   161      &:last-child {
   162        border-radius: 0 0 2px 2px;
   163      }
   164      position: relative;
   165      background-color: inherit;
   166      border-top: 1px solid rgba(160,160,160,.2);
   167      padding: 16px $card-padding;
   168  
   169      a:not(.btn):not(.btn-large):not(.btn-floating) {
   170        color: $card-link-color;
   171        margin-right: $card-padding;
   172        transition: color .3s ease;
   173        text-transform: uppercase;
   174  
   175        &:hover { color: $card-link-color-light; }
   176      }
   177    }
   178  
   179    .card-reveal {
   180      padding: $card-padding;
   181      position: absolute;
   182      background-color: $card-bg-color;
   183      width: 100%;
   184      overflow-y: auto;
   185      left: 0;
   186      top: 100%;
   187      height: 100%;
   188      z-index: 3;
   189      display: none;
   190  
   191      .card-title {
   192        cursor: pointer;
   193        display: block;
   194      }
   195    }
   196  }