This commit is contained in:
Jeremy Thomas
2017-07-13 19:44:35 +01:00
parent 1ca8378bb9
commit fccdedc66b
8 changed files with 707 additions and 1783 deletions

View File

@@ -1,14 +1,31 @@
$card: $text !default
$card-background: $white !default
$card-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
$card-header: $text-strong !default
$card-header-shadow: 0 1px 2px rgba($black, 0.1) !default
$card-header-weight: $weight-bold !default
$card-footer-border: $border !default
.card
background-color: $card-background
box-shadow: $card-shadow
color: $card
max-width: 100%
position: relative
.card-header
align-items: stretch
box-shadow: 0 1px 2px rgba($black, 0.1)
box-shadow: $card-header-shadow
display: flex
.card-header-title
align-items: center
color: $text-strong
color: $card-header
display: flex
flex-grow: 1
font-weight: $weight-bold
font-weight: $card-header-weight
padding: 0.75rem
.card-header-icon
@@ -26,7 +43,7 @@
padding: 1.5rem
.card-footer
border-top: 1px solid $border
border-top: 1px solid $card-footer-border
align-items: stretch
display: flex
@@ -39,13 +56,10 @@
justify-content: center
padding: 0.75rem
&:not(:last-child)
border-right: 1px solid $border
border-right: 1px solid $card-footer-border
// Combinations
.card
background-color: $white
box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
color: $text
max-width: 100%
position: relative
.media:not(:last-child)
margin-bottom: 0.75rem

View File

@@ -1,14 +1,23 @@
$box: $text !default
$box-background: $white !default
$box-radius: $radius-large !default
$box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
$box-link-hover-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link
$box-link-active-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link
.box
+block
background-color: $white
border-radius: $radius-large
box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
background-color: $box-background
border-radius: $box-radius
box-shadow: $box-shadow
color: $box
display: block
padding: 1.25rem
a.box
&:hover,
&:focus
box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link
box-shadow: $box-link-hover-shadow
&:active
box-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link
box-shadow: $box-link-active-shadow