uikit/src/less/components/card.less

UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.

// 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;
@card-body-padding-vertical:                   @global-gutter;

@card-body-padding-horizontal-l:               @global-medium-gutter;
@card-body-padding-vertical-l:                 @global-medium-gutter;

@card-header-padding-horizontal:               @global-gutter;
@card-header-padding-vertical:                 round(@global-gutter / 2);

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

@card-footer-padding-horizontal:               @global-gutter;
@card-footer-padding-vertical:                 (@global-gutter / 2);

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

@card-title-font-size:                         @global-large-font-size;
@card-title-line-height:                       1.4;

@card-badge-top:                               @global-gutter;
@card-badge-right:                             @card-badge-top;

@card-hover-background:                        @global-muted-background;

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

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

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

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

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


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

.uk-card {
    position: relative;
    box-sizing: border-box;
    .hook-card;
}


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

.uk-card-body {
    padding: @card-body-padding-vertical @card-body-padding-horizontal;
    .hook-card-body;
}

.uk-card-header {
    padding: @card-header-padding-vertical @card-header-padding-horizontal;
    .hook-card-header;
}

.uk-card-footer {
    padding: @card-footer-padding-vertical @card-footer-padding-horizontal;
    .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'] {
    .hook-card-media;
}

.uk-card-media-top,
.uk-grid-stack > .uk-card-media-left,
.uk-grid-stack > .uk-card-media-right  {
    .hook-card-media-top;
}

.uk-card-media-bottom {
    .hook-card-media-bottom;
}

:not(.uk-grid-stack) > .uk-card-media-left {
    .hook-card-media-left;
}

:not(.uk-grid-stack) > .uk-card-media-right {
    .hook-card-media-right;
}


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

.uk-card-title {
    font-size: @card-title-font-size;
    line-height: @card-title-line-height;
    .hook-card-title;
}


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

.uk-card-badge {
    position: absolute;
    top: @card-badge-top;
    right: @card-badge-right;
    z-index: 1;
    .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;
    .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;
    .hook-card-default;
}

.uk-card-default .uk-card-title {
    color: @card-default-title-color;
    .hook-card-default-title;
}

.uk-card-default.uk-card-hover:hover {
    background-color: @card-default-hover-background;
    .hook-card-default-hover;
}

.uk-card-default .uk-card-header {
    .hook-card-default-header;
}

.uk-card-default .uk-card-footer {
    .hook-card-default-footer;
}

/*
 * Primary
 */

.uk-card-primary {
    background: @card-primary-background;
    color: @card-primary-color;
    .hook-card-primary;
}

.uk-card-primary .uk-card-title {
    color: @card-primary-title-color;
    .hook-card-primary-title;
}

.uk-card-primary.uk-card-hover:hover {
    background-color: @card-primary-hover-background;
    .hook-card-primary-hover;
}

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

/*
 * Secondary
 */

.uk-card-secondary {
    background: @card-secondary-background;
    color: @card-secondary-color;
    .hook-card-secondary;
}

.uk-card-secondary .uk-card-title {
    color: @card-secondary-title-color;
    .hook-card-secondary-title;
}

.uk-card-secondary.uk-card-hover:hover {
    background-color: @card-secondary-hover-background;
    .hook-card-secondary-hover;
}

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


/* 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
// ========================================================================

.hook-card-misc;

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