mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-28 12:24:23 +00:00
102 lines
3.2 KiB
Sass
102 lines
3.2 KiB
Sass
$card-color: var(--text, #{$text}) !default
|
|
$card-background-color: var(--scheme-main, #{$scheme-main}) !default
|
|
$card-shadow-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.1) !default
|
|
$card-shadow-color-bis: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.02) !default
|
|
$card-shadow: 0 0.5em 1em -0.125em $card-shadow-color, 0 0px 0 1px $card-shadow-color-bis !default
|
|
$card-radius: 0 !default
|
|
|
|
$card-header-background-color: transparent !default
|
|
$card-header-color: var(--text-strong, #{$text-strong}) !default
|
|
$card-header-padding: 0.75rem 1rem !default
|
|
$card-header-shadow-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.1) !default
|
|
$card-header-shadow: 0 0.125em 0.25em $card-header-shadow-color !default
|
|
$card-header-weight: var(--weight-bold, #{$weight-bold}) !default
|
|
|
|
$card-content-background-color: transparent !default
|
|
$card-content-padding: 1.5rem !default
|
|
|
|
$card-footer-background-color: transparent !default
|
|
$card-footer-border-top: 1px solid $border-light !default
|
|
$card-footer-padding: 0.75rem !default
|
|
|
|
$card-media-margin: var(--block-spacing, #{$block-spacing}) !default
|
|
|
|
.card
|
|
--card-background-color: #{$card-background-color}
|
|
--card-shadow: #{$card-shadow}
|
|
--card-color: #{$card-color}
|
|
--card-radius: #{$card-radius}
|
|
--card-header-background-color: #{$card-header-background-color}
|
|
--card-header-shadow: #{$card-header-shadow}
|
|
--card-header-color: #{$card-header-color}
|
|
--card-header-weight: #{$card-header-weight}
|
|
--card-header-padding: #{$card-header-padding}
|
|
--card-header-padding: #{$card-header-padding}
|
|
--card-content-background-color: #{$card-content-background-color}
|
|
--card-content-padding: #{$card-content-padding}
|
|
--card-footer-background-color: #{$card-footer-background-color}
|
|
--card-footer-border-top: #{$card-footer-border-top}
|
|
--card-footer-padding: #{$card-footer-padding}
|
|
--card-media-margin: #{$card-media-margin}
|
|
background-color: var(--card-background-color)
|
|
box-shadow: var(--card-shadow)
|
|
color: var(--card-color)
|
|
max-width: 100%
|
|
position: relative
|
|
border-radius: var(--card-radius)
|
|
overflow: hidden
|
|
|
|
.card-header
|
|
background-color: var(--card-header-background-color)
|
|
align-items: stretch
|
|
box-shadow: var(--card-header-shadow)
|
|
display: flex
|
|
|
|
.card-header-title
|
|
align-items: center
|
|
color: var(--card-header-color)
|
|
display: flex
|
|
flex-grow: 1
|
|
font-weight: var(--card-header-weight)
|
|
padding: var(--card-header-padding)
|
|
&.is-centered
|
|
justify-content: center
|
|
|
|
.card-header-icon
|
|
align-items: center
|
|
cursor: pointer
|
|
display: flex
|
|
justify-content: center
|
|
padding: var(--card-header-padding)
|
|
|
|
.card-image
|
|
display: block
|
|
position: relative
|
|
|
|
.card-content
|
|
background-color: var(--card-content-background-color)
|
|
padding: var(--card-content-padding)
|
|
|
|
.card-footer
|
|
background-color: var(--card-footer-background-color)
|
|
border-top: var(--card-footer-border-top)
|
|
align-items: stretch
|
|
display: flex
|
|
|
|
.card-footer-item
|
|
align-items: center
|
|
display: flex
|
|
flex-basis: 0
|
|
flex-grow: 1
|
|
flex-shrink: 0
|
|
justify-content: center
|
|
padding: var(--card-footer-padding)
|
|
&:not(:last-child)
|
|
+ltr-property("border", $card-footer-border-top)
|
|
|
|
// Combinations
|
|
|
|
.card
|
|
.media:not(:last-child)
|
|
margin-bottom: var(--card-media-margin)
|