github.com/bosssauce/ponzu@v0.11.1-0.20200102001432-9bc41b703131/system/admin/static/editor/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    overflow: hidden;
    15    margin: $element-top-margin 0 $element-bottom-margin 0;
    16    background-color: $card-bg-color;
    17    transition: box-shadow .25s;
    18    border-radius: 2px;
    19    @extend .z-depth-1;
    20  
    21  
    22    .card-title {
    23      color: $card-bg-color;
    24      font-size: 24px;
    25      font-weight: 300;
    26      &.activator {
    27        cursor: pointer;
    28      }
    29    }
    30  
    31    // Card Sizes
    32    &.small, &.medium, &.large {
    33      position: relative;
    34  
    35      .card-image {
    36        overflow: hidden;
    37      }
    38      .card-content {
    39        overflow: hidden;
    40      }
    41      .card-action {
    42        position: absolute;
    43        bottom: 0;
    44        left: 0;
    45        right: 0;
    46      }
    47    }
    48  
    49    &.small {
    50      height: 300px;
    51  
    52      .card-image {
    53        height: 150px;
    54      }
    55      .card-content {
    56        height: 150px;
    57      }
    58  
    59    }
    60  
    61    &.medium {
    62      height: 400px;
    63  
    64      .card-image {
    65        height: 250px;
    66      }
    67      .card-content {
    68        height: 150px;
    69      }
    70    }
    71  
    72    &.large {
    73      height: 500px;
    74  
    75      .card-image {
    76        height: 330px;
    77      }
    78      .card-content {
    79        height: 170px;
    80      }
    81    }
    82  
    83  
    84    .card-image {
    85      position: relative;
    86  
    87      // Image background for content
    88      img {
    89        border-radius: 2px 2px 0 0;
    90        position: relative;
    91        left: 0;
    92        right: 0;
    93        top: 0;
    94        bottom: 0;
    95        width: 100%;
    96      }
    97  
    98      .card-title {
    99        position: absolute;
   100        bottom: 0;
   101        left: 0;
   102        padding: $card-padding;
   103      }
   104  
   105    }
   106  
   107    .card-content {
   108      padding: $card-padding;
   109      border-radius: 0 0 2px 2px;
   110  
   111  
   112      p {
   113        margin: 0;
   114        color: inherit;
   115      }
   116      .card-title {
   117        line-height: 48px;
   118      }
   119    }
   120  
   121    .card-action {
   122      border-top: 1px solid rgba(160,160,160,.2);
   123      padding: $card-padding;
   124  
   125      a {
   126        color: $card-link-color;
   127        margin-right: $card-padding;
   128        @include transition(color .3s ease);
   129        text-transform: uppercase;
   130  
   131        &:hover { color: $card-link-color-light; }
   132      }
   133    }
   134  
   135    .card-reveal {
   136      padding: $card-padding;
   137      position: absolute;
   138      background-color: $card-bg-color;
   139      width: 100%;
   140      overflow-y: auto;
   141      top: 100%;
   142      height: 100%;
   143      z-index: 1;
   144      display: none;
   145  
   146      .card-title {
   147        cursor: pointer;
   148        display: block;
   149      }
   150  
   151    }
   152  }