docs/_sass/uikit/components/card.scss

// Name:            Card
// Description:     Component to create boxed content containers
//
// Component:       `uk-card`
//
// Sub-objects:     `uk-card-body`
//                  `uk-card-header`
//                  `uk-card-footer`
//                  `uk-card-media-*`
//                  `uk-card-title`
//                  `uk-card-badge`
//
// Modifiers:       `uk-card-hover`
//                  `uk-card-default`
//                  `uk-card-primary`
//                  `uk-card-secondary`
//                  `uk-card-small`
//                  `uk-card-large`
//
// Uses:            `uk-grid-stack`
//
// ========================================================================


// Variables
// ========================================================================

$card-body-padding-horizontal:                  $global-gutter !default;
$card-body-padding-vertical:                    $global-gutter !default;

$card-body-padding-horizontal-l:                $global-medium-gutter !default;
$card-body-padding-vertical-l:                  $global-medium-gutter !default;

$card-header-padding-horizontal:                $global-gutter !default;
$card-header-padding-vertical:                  round($global-gutter / 2) !default;

$card-header-padding-horizontal-l:              $global-medium-gutter !default;
$card-header-padding-vertical-l:                round($global-medium-gutter / 2) !default;

$card-footer-padding-horizontal:                $global-gutter !default;
$card-footer-padding-vertical:                  ($global-gutter / 2) !default;

$card-footer-padding-horizontal-l:              $global-medium-gutter !default;
$card-footer-padding-vertical-l:                round($global-medium-gutter / 2) !default;

$card-title-font-size:                          $global-large-font-size !default;
$card-title-line-height:                        1.4 !default;

$card-badge-top:                                $global-gutter !default;
$card-badge-right:                              $card-badge-top !default;

$card-hover-background:                         $global-muted-background !default;

$card-default-background:                       $global-muted-background !default;
$card-default-color:                            $global-color !default;
$card-default-title-color:                      $global-emphasis-color !default;
$card-default-hover-background:                 darken($card-default-background, 5%) !default;

$card-primary-background:                       $global-primary-background !default;
$card-primary-color:                            $global-inverse-color !default;
$card-primary-title-color:                      $card-primary-color !default;
$card-primary-hover-background:                 darken($card-primary-background, 5%) !default;
$card-primary-color-mode:                       light !default;

$card-secondary-background:                     $global-secondary-background !default;
$card-secondary-color:                          $global-inverse-color !default;
$card-secondary-title-color:                    $card-secondary-color !default;
$card-secondary-hover-background:               darken($card-secondary-background, 5%) !default;
$card-secondary-color-mode:                     light !default;

$card-small-body-padding-horizontal:            $global-margin !default;
$card-small-body-padding-vertical:              $global-margin !default;
$card-small-header-padding-horizontal:          $global-margin !default;
$card-small-header-padding-vertical:            round($global-margin / 1.5) !default;
$card-small-footer-padding-horizontal:          $global-margin !default;
$card-small-footer-padding-vertical:            round($global-margin / 1.5) !default;

$card-large-body-padding-horizontal-l:          $global-large-gutter !default;
$card-large-body-padding-vertical-l:            $global-large-gutter !default;
$card-large-header-padding-horizontal-l:        $global-large-gutter !default;
$card-large-header-padding-vertical-l:          round($global-large-gutter / 2) !default;
$card-large-footer-padding-horizontal-l:        $global-large-gutter !default;
$card-large-footer-padding-vertical-l:          round($global-large-gutter / 2) !default;


/* ========================================================================
   Component: Card
 ========================================================================== */

.uk-card {
    position: relative;
    box-sizing: border-box;
    @if(mixin-exists(hook-card)) {@include hook-card();}
}


/* Sections
 ========================================================================== */

.uk-card-body {
    padding: $card-body-padding-vertical $card-body-padding-horizontal;
    @if(mixin-exists(hook-card-body)) {@include hook-card-body();}
}

.uk-card-header {
    padding: $card-header-padding-vertical $card-header-padding-horizontal;
    @if(mixin-exists(hook-card-header)) {@include hook-card-header();}
}

.uk-card-footer {
    padding: $card-footer-padding-vertical $card-footer-padding-horizontal;
    @if(mixin-exists(hook-card-footer)) {@include hook-card-footer();}
}

/* Desktop and bigger */
@media (min-width: $breakpoint-large) {

    .uk-card-body { padding: $card-body-padding-vertical-l $card-body-padding-horizontal-l; }

    .uk-card-header { padding: $card-header-padding-vertical-l $card-header-padding-horizontal-l; }

    .uk-card-footer { padding: $card-footer-padding-vertical-l $card-footer-padding-horizontal-l; }

}

/*
 * Micro clearfix
 */

.uk-card-body::before,
.uk-card-body::after,
.uk-card-header::before,
.uk-card-header::after,
.uk-card-footer::before,
.uk-card-footer::after {
    content: "";
    display: table;
}

.uk-card-body::after,
.uk-card-header::after,
.uk-card-footer::after { clear: both; }

/*
 * Remove margin from the last-child
 */

.uk-card-body > :last-child,
.uk-card-header > :last-child,
.uk-card-footer > :last-child { margin-bottom: 0; }


/* Media
 ========================================================================== */

/*
 * Reserved alignment modifier to style the media element, e.g. with `border-radius`
 * Implemented by the theme
 */

[class*='uk-card-media'] {
    @if(mixin-exists(hook-card-media)) {@include hook-card-media();}
}

.uk-card-media-top,
.uk-grid-stack > .uk-card-media-left,
.uk-grid-stack > .uk-card-media-right  {
    @if(mixin-exists(hook-card-media-top)) {@include hook-card-media-top();}
}

.uk-card-media-bottom {
    @if(mixin-exists(hook-card-media-bottom)) {@include hook-card-media-bottom();}
}

:not(.uk-grid-stack) > .uk-card-media-left {
    @if(mixin-exists(hook-card-media-left)) {@include hook-card-media-left();}
}

:not(.uk-grid-stack) > .uk-card-media-right {
    @if(mixin-exists(hook-card-media-right)) {@include hook-card-media-right();}
}


/* Title
 ========================================================================== */

.uk-card-title {
    font-size: $card-title-font-size;
    line-height: $card-title-line-height;
    @if(mixin-exists(hook-card-title)) {@include hook-card-title();}
}


/* Badge
 ========================================================================== */

.uk-card-badge {
    position: absolute;
    top: $card-badge-top;
    right: $card-badge-right;
    z-index: 1;
    @if(mixin-exists(hook-card-badge)) {@include hook-card-badge();}
}

/*
 * Remove margin from adjacent element
 */

.uk-card-badge:first-child + * { margin-top: 0; }


/* Hover modifier
 ========================================================================== */

.uk-card-hover:not(.uk-card-default):not(.uk-card-primary):not(.uk-card-secondary):hover {
    background: $card-hover-background;
    @if(mixin-exists(hook-card-hover)) {@include hook-card-hover();}
}


/* Style modifiers
 ========================================================================== */

/*
 * Default
 * Note: Header and Footer are only implemented for the default style
 */

.uk-card-default {
    background: $card-default-background;
    color: $card-default-color;
    @if(mixin-exists(hook-card-default)) {@include hook-card-default();}
}

.uk-card-default .uk-card-title {
    color: $card-default-title-color;
    @if(mixin-exists(hook-card-default-title)) {@include hook-card-default-title();}
}

.uk-card-default.uk-card-hover:hover {
    background-color: $card-default-hover-background;
    @if(mixin-exists(hook-card-default-hover)) {@include hook-card-default-hover();}
}

.uk-card-default .uk-card-header {
    @if(mixin-exists(hook-card-default-header)) {@include hook-card-default-header();}
}

.uk-card-default .uk-card-footer {
    @if(mixin-exists(hook-card-default-footer)) {@include hook-card-default-footer();}
}

/*
 * Primary
 */

.uk-card-primary {
    background: $card-primary-background;
    color: $card-primary-color;
    @if(mixin-exists(hook-card-primary)) {@include hook-card-primary();}
}

.uk-card-primary .uk-card-title {
    color: $card-primary-title-color;
    @if(mixin-exists(hook-card-primary-title)) {@include hook-card-primary-title();}
}

.uk-card-primary.uk-card-hover:hover {
    background-color: $card-primary-hover-background;
    @if(mixin-exists(hook-card-primary-hover)) {@include hook-card-primary-hover();}
}

// Color Mode
@if ( $card-primary-color-mode == light ) { .uk-card-primary.uk-card-body { @extend .uk-light !optional;} }
@if ( $card-primary-color-mode == light ) { .uk-card-primary > :not([class*='uk-card-media']) { @extend .uk-light !optional;} }
@if ( $card-primary-color-mode == dark ) { .uk-card-primary.uk-card-body { @extend .uk-dark !optional;} }
@if ( $card-primary-color-mode == dark ) { .uk-card-primary > :not([class*='uk-card-media']) { @extend .uk-dark !optional;} }

/*
 * Secondary
 */

.uk-card-secondary {
    background: $card-secondary-background;
    color: $card-secondary-color;
    @if(mixin-exists(hook-card-secondary)) {@include hook-card-secondary();}
}

.uk-card-secondary .uk-card-title {
    color: $card-secondary-title-color;
    @if(mixin-exists(hook-card-secondary-title)) {@include hook-card-secondary-title();}
}

.uk-card-secondary.uk-card-hover:hover {
    background-color: $card-secondary-hover-background;
    @if(mixin-exists(hook-card-secondary-hover)) {@include hook-card-secondary-hover();}
}

// Color Mode
@if ( $card-secondary-color-mode == light ) { .uk-card-secondary.uk-card-body { @extend .uk-light !optional;} }
@if ( $card-secondary-color-mode == light ) { .uk-card-secondary > :not([class*='uk-card-media']) { @extend .uk-light !optional;} }
@if ( $card-secondary-color-mode == dark ) { .uk-card-secondary.uk-card-body { @extend .uk-dark !optional;} }
@if ( $card-secondary-color-mode == dark ) { .uk-card-secondary > :not([class*='uk-card-media']) { @extend .uk-dark !optional;} }


/* Size modifier
 ========================================================================== */

/*
 * Small
 */

.uk-card-small.uk-card-body,
.uk-card-small .uk-card-body { padding: $card-small-body-padding-vertical $card-small-body-padding-horizontal; }

.uk-card-small .uk-card-header { padding: $card-small-header-padding-vertical $card-small-header-padding-horizontal; }
.uk-card-small .uk-card-footer { padding: $card-small-footer-padding-vertical $card-small-footer-padding-horizontal; }

/*
 * Large
 */

/* Desktop and bigger */
@media (min-width: $breakpoint-large) {

    .uk-card-large.uk-card-body,
    .uk-card-large .uk-card-body { padding: $card-large-body-padding-vertical-l $card-large-body-padding-horizontal-l; }

    .uk-card-large .uk-card-header { padding: $card-large-header-padding-vertical-l $card-large-header-padding-horizontal-l; }
    .uk-card-large .uk-card-footer { padding: $card-large-footer-padding-vertical-l $card-large-footer-padding-horizontal-l; }

}


// Hooks
// ========================================================================

@if(mixin-exists(hook-card-misc)) {@include hook-card-misc();}

// @mixin hook-card(){}
// @mixin hook-card-body(){}
// @mixin hook-card-header(){}
// @mixin hook-card-footer(){}
// @mixin hook-card-media(){}
// @mixin hook-card-media-top(){}
// @mixin hook-card-media-bottom(){}
// @mixin hook-card-media-left(){}
// @mixin hook-card-media-right(){}
// @mixin hook-card-title(){}
// @mixin hook-card-badge(){}
// @mixin hook-card-hover(){}
// @mixin hook-card-default(){}
// @mixin hook-card-default-title(){}
// @mixin hook-card-default-hover(){}
// @mixin hook-card-default-header(){}
// @mixin hook-card-default-footer(){}
// @mixin hook-card-primary(){}
// @mixin hook-card-primary-title(){}
// @mixin hook-card-primary-hover(){}
// @mixin hook-card-secondary(){}
// @mixin hook-card-secondary-title(){}
// @mixin hook-card-secondary-hover(){}
// @mixin hook-card-misc(){}