third_party/ot-br-posix/repo/third_party/mdl/repo/src/card/_card.scss

   1 /**
   2  * Copyright 2015 Google Inc. All Rights Reserved.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  *      http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  */
  16
  17 @import "../variables";
  18
  19 .mdl-card {
  20   display: flex;
  21   flex-direction: column;
  22   font-size: $card-font-size;
  23   font-weight: 400;
  24   min-height: $card-height;
  25   overflow: hidden;
  26   width: $card-width;
  27   z-index: $card-z-index;
  28   position: relative;
  29   background: $card-background-color;
  30   border-radius: 2px;
  31   box-sizing: border-box;
  32 }
  33
  34 .mdl-card__media {
  35   background-color: $card-image-placeholder-color;
  36   background-repeat: repeat;
  37   background-position: 50% 50%;
  38   background-size: cover;
  39   background-origin: padding-box;
  40   background-attachment: scroll;
  41   box-sizing: border-box;
  42 }
  43
  44 .mdl-card__title {
  45   align-items: center;
  46   color: $card-text-color;
  47   display: block;
  48   display: flex;
  49   justify-content: stretch;
  50   line-height: normal;
  51   padding: $card-vertical-padding $card-horizontal-padding;
  52   perspective-origin: $card-title-perspective-origin-x $card-title-perspective-origin-y;
  53   transform-origin: $card-title-transform-origin-x $card-title-transform-origin-y;
  54   box-sizing: border-box;
  55
  56   &.mdl-card--border {
  57     border-bottom: 1px solid $card-border-color;
  58   }
  59 }
  60
  61 .mdl-card__title-text {
  62   align-self: flex-end;
  63   color: inherit;
  64   display: block;
  65   display: flex;
  66   font-size: $card-title-font-size;
  67   font-weight: $card-title-text-font-weight;
  68   line-height: normal;
  69   overflow: hidden;
  70   transform-origin: $card-title-text-transform-origin-x $card-title-text-transform-origin-y;
  71   margin: 0;
  72 }
  73
  74 .mdl-card__subtitle-text {
  75   font-size: $card-subtitle-font-size;
  76   color: $card-subtitle-color;
  77   margin: 0;
  78 }
  79
  80 .mdl-card__supporting-text {
  81   color: $card-supporting-text-text-color;
  82   font-size: $card-supporting-text-font-size;
  83   line-height: $card-supporting-text-line-height;
  84   overflow: hidden;
  85   padding: $card-vertical-padding $card-horizontal-padding;
  86   width: 90%;
  87
  88   &.mdl-card--border {
  89     border-bottom: 1px solid $card-border-color;
  90   }
  91 }
  92
  93 .mdl-card__actions {
  94   font-size: $card-actions-font-size;
  95   line-height: normal;
  96   width: 100%;
  97   background-color: rgba(0,0,0,0);
  98   padding: 8px;
  99   box-sizing: border-box;
 100
 101   &.mdl-card--border {
 102     border-top: 1px solid $card-border-color;
 103   }
 104 }
 105
 106 .mdl-card--expand {
 107   flex-grow: 1;
 108 }
 109
 110
 111 .mdl-card__menu {
 112   position: absolute;
 113   right: 16px;
 114   top: 16px;
 115 }