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