WebCompDev / COMPONENTS

Blame view

bower_components/Materialize/sass/components/_cards.scss 2.18 KB
Edit Raw Normal View History
74249687   Luigi Serra   Cross browser con... 
1
2
3
4
5
6
7
8
9
10
11
12
13
 
  
  
  .card-panel {
    transition: box-shadow .25s;
    padding: $card-padding;
    margin: $element-top-margin 0 $element-bottom-margin 0;
    border-radius: 2px;
    @extend .z-depth-1;
    background-color: $card-bg-color;
  }
  
  .card {
    position: relative;
74249687   Luigi Serra   Cross browser con... 
14
15
16
17
18
19
20
21
 
    margin: $element-top-margin 0 $element-bottom-margin 0;
    background-color: $card-bg-color;
    transition: box-shadow .25s;
    border-radius: 2px;
    @extend .z-depth-1;
  
  
    .card-title {
74249687   Luigi Serra   Cross browser con... 
22
23
24
25
26
27
28
29
30
31
32
33
 
      font-size: 24px;
      font-weight: 300;
      &.activator {
        cursor: pointer;
      }
    }
  
    // Card Sizes
    &.small, &.medium, &.large {
      position: relative;
  
      .card-image {
a1a3bc73   Luigi Serra   graphs updates 
34
 
        max-height: 60%;
74249687   Luigi Serra   Cross browser con... 
35
36
37
 
        overflow: hidden;
      }
      .card-content {
a1a3bc73   Luigi Serra   graphs updates 
38
 
        max-height: 40%;
74249687   Luigi Serra   Cross browser con... 
39
40
41
42
43
44
45
 
        overflow: hidden;
      }
      .card-action {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
a1a3bc73   Luigi Serra   graphs updates 
46
47
 
        z-index: 1;
        background-color: inherit;
74249687   Luigi Serra   Cross browser con... 
48
49
50
51
52
 
      }
    }
  
    &.small {
      height: 300px;
74249687   Luigi Serra   Cross browser con... 
53
54
55
56
 
    }
  
    &.medium {
      height: 400px;
74249687   Luigi Serra   Cross browser con... 
57
58
59
60
 
    }
  
    &.large {
      height: 500px;
74249687   Luigi Serra   Cross browser con... 
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
 
    }
  
  
    .card-image {
      position: relative;
  
      // Image background for content
      img {
        display: block;
        border-radius: 2px 2px 0 0;
        position: relative;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
      }
  
      .card-title {
a1a3bc73   Luigi Serra   graphs updates 
80
 
        color: $card-bg-color;
74249687   Luigi Serra   Cross browser con... 
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
 
        position: absolute;
        bottom: 0;
        left: 0;
        padding: $card-padding;
      }
  
    }
  
    .card-content {
      padding: $card-padding;
      border-radius: 0 0 2px 2px;
  
  
      p {
        margin: 0;
        color: inherit;
      }
      .card-title {
        line-height: 48px;
      }
    }
  
    .card-action {
      border-top: 1px solid rgba(160,160,160,.2);
      padding: $card-padding;
a1a3bc73   Luigi Serra   graphs updates 
107
 
      a:not(.btn):not(.btn-large):not(.btn-floating) {
74249687   Luigi Serra   Cross browser con... 
108
109
 
        color: $card-link-color;
        margin-right: $card-padding;
a1a3bc73   Luigi Serra   graphs updates 
110
 
        transition: color .3s ease;
74249687   Luigi Serra   Cross browser con... 
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
 
        text-transform: uppercase;
  
        &:hover { color: $card-link-color-light; }
      }
    }
  
    .card-reveal {
      padding: $card-padding;
      position: absolute;
      background-color: $card-bg-color;
      width: 100%;
      overflow-y: auto;
      top: 100%;
      height: 100%;
      z-index: 1;
      display: none;
  
      .card-title {
        cursor: pointer;
        display: block;
      }
  
    }
  }