1// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
2// Licensed under the Apache License, Version 2.0.
3
4@import "../../common/variables";
5
6/*
7Cards
8
9Markup:
10<div class="#{$ns}-card {{.modifier}}">
11  We build products that make people better at their most important work.
12</div>
13
14.#{$ns}-elevation-0 - Ground floor. This level provides just a gentle border shadow.
15.#{$ns}-elevation-1 - First. Subtle drop shadow intended for static containers.
16.#{$ns}-elevation-2 - Second. An even stronger shadow, moving on up.
17.#{$ns}-elevation-3 - Third. For containers overlaying content temporarily.
18.#{$ns}-elevation-4 - Fourth. The strongest shadow, usually for overlay containers on top of backdrops.
19.#{$ns}-interactive - On hover, increase elevation and use pointer cursor.
20
21Styleguide card
22*/
23
24$card-padding: $pt-grid-size * 2 !default;
25
26$card-background-color: $white !default;
27$dark-card-background-color: $dark-gray4 !default;
28
29$elevation-shadows: (
30  $pt-elevation-shadow-0
31  $pt-elevation-shadow-1
32  $pt-elevation-shadow-2
33  $pt-elevation-shadow-3
34  $pt-elevation-shadow-4
35);
36$dark-elevation-shadows: (
37  $pt-dark-elevation-shadow-0
38  $pt-dark-elevation-shadow-1
39  $pt-dark-elevation-shadow-2
40  $pt-dark-elevation-shadow-3
41  $pt-dark-elevation-shadow-4
42);
43
44.#{$ns}-card {
45  background-color: $card-background-color;
46  border-radius: $pt-border-radius;
47  box-shadow: $pt-elevation-shadow-0;
48  padding: $card-padding;
49  transition: transform ($pt-transition-duration * 2) $pt-transition-ease,
50              box-shadow ($pt-transition-duration * 2) $pt-transition-ease;
51
52  &.#{$ns}-dark,
53  .#{$ns}-dark & {
54    background-color: $dark-card-background-color;
55    box-shadow: $pt-dark-elevation-shadow-0;
56  }
57}
58
59@for $index from 1 through length($elevation-shadows) {
60  .#{$ns}-elevation-#{$index - 1} {
61    box-shadow: nth($elevation-shadows, $index);
62
63    &.#{$ns}-dark,
64    .#{$ns}-dark & {
65      box-shadow: nth($dark-elevation-shadows, $index);
66    }
67  }
68}
69
70.#{$ns}-card.#{$ns}-interactive {
71  &:hover {
72    box-shadow: $pt-elevation-shadow-3;
73    cursor: pointer;
74
75    &.#{$ns}-dark,
76    .#{$ns}-dark & {
77      box-shadow: $pt-dark-elevation-shadow-3;
78    }
79  }
80
81  &:active {
82    box-shadow: $pt-elevation-shadow-1;
83    opacity: 0.9;
84    transition-duration: 0;
85
86    &.#{$ns}-dark,
87    .#{$ns}-dark & {
88      box-shadow: $pt-dark-elevation-shadow-1;
89    }
90  }
91}
92