mirror of https://github.com/lukechilds/docs.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
363 lines
12 KiB
363 lines
12 KiB
// 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(){}
|
|
|