WebCompDev / COMPONENTS

Blame view

bower_components/Materialize/sass/components/_cards.scss 2.34 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;
c5169e0e   Renato De Donato   a new hope 
14
 
    overflow: hidden;
74249687   Luigi Serra   Cross browser con... 
15
16
17
18
19
20
21
22
 
    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 {
c5169e0e   Renato De Donato   a new hope 
23
 
      color: $card-bg-color;
74249687   Luigi Serra   Cross browser con... 
24
25
26
27
28
29
30
31
32
33
34
35
 
      font-size: 24px;
      font-weight: 300;
      &.activator {
        cursor: pointer;
      }
    }
  
    // Card Sizes
    &.small, &.medium, &.large {
      position: relative;
  
      .card-image {
74249687   Luigi Serra   Cross browser con... 
36
37
38
 
        overflow: hidden;
      }
      .card-content {
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;
74249687   Luigi Serra   Cross browser con... 
46
47
48
49
50
 
      }
    }
  
    &.small {
      height: 300px;
c5169e0e   Renato De Donato   a new hope 
51
52
53
54
55
56
57
58
 
  
      .card-image {
        height: 150px;
      }
      .card-content {
        height: 150px;
      }
74249687   Luigi Serra   Cross browser con... 
59
60
61
62
 
    }
  
    &.medium {
      height: 400px;
c5169e0e   Renato De Donato   a new hope 
63
64
65
66
67
68
69
 
  
      .card-image {
        height: 250px;
      }
      .card-content {
        height: 150px;
      }
74249687   Luigi Serra   Cross browser con... 
70
71
72
73
 
    }
  
    &.large {
      height: 500px;
c5169e0e   Renato De Donato   a new hope 
74
75
76
77
78
79
80
 
  
      .card-image {
        height: 330px;
      }
      .card-content {
        height: 170px;
      }
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
 
    }
  
  
    .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 {
74249687   Luigi Serra   Cross browser con... 
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
 
        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;
c5169e0e   Renato De Donato   a new hope 
126
 
      a {
74249687   Luigi Serra   Cross browser con... 
127
128
 
        color: $card-link-color;
        margin-right: $card-padding;
c5169e0e   Renato De Donato   a new hope 
129
 
        @include transition(color .3s ease);
74249687   Luigi Serra   Cross browser con... 
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
 
        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;
      }
  
    }
  }