updates
This commit is contained in:
223
client/uikit/src/less/theme/card.less
Normal file
223
client/uikit/src/less/theme/card.less
Normal file
@@ -0,0 +1,223 @@
|
||||
//
|
||||
// Component: Card
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
@card-hover-background: @global-background;
|
||||
|
||||
@card-default-background: @global-background;
|
||||
@card-default-hover-background: @card-default-background;
|
||||
|
||||
@card-primary-hover-background: @card-primary-background;
|
||||
|
||||
@card-secondary-hover-background: @card-secondary-background;
|
||||
|
||||
//
|
||||
// New
|
||||
//
|
||||
|
||||
@card-badge-border-radius: 2px;
|
||||
@card-badge-text-transform: uppercase;
|
||||
|
||||
@card-hover-box-shadow: @global-large-box-shadow;
|
||||
|
||||
@card-default-box-shadow: @global-medium-box-shadow;
|
||||
@card-default-hover-box-shadow: @global-large-box-shadow;
|
||||
|
||||
@card-default-header-border-width: @global-border-width;
|
||||
@card-default-header-border: @global-border;
|
||||
|
||||
@card-default-footer-border-width: @global-border-width;
|
||||
@card-default-footer-border: @global-border;
|
||||
|
||||
@card-primary-box-shadow: @global-medium-box-shadow;
|
||||
@card-primary-hover-box-shadow: @global-large-box-shadow;
|
||||
|
||||
@card-secondary-box-shadow: @global-medium-box-shadow;
|
||||
@card-secondary-hover-box-shadow: @global-large-box-shadow;
|
||||
|
||||
|
||||
// Component
|
||||
// ========================================================================
|
||||
|
||||
.hook-card() { transition: box-shadow 0.1s ease-in-out; }
|
||||
|
||||
|
||||
// Sections
|
||||
// ========================================================================
|
||||
|
||||
.hook-card-body() {}
|
||||
|
||||
.hook-card-header() {}
|
||||
|
||||
.hook-card-footer() {}
|
||||
|
||||
|
||||
// Media
|
||||
// ========================================================================
|
||||
|
||||
.hook-card-media() {}
|
||||
|
||||
.hook-card-media-top() {}
|
||||
|
||||
.hook-card-media-bottom() {}
|
||||
|
||||
.hook-card-media-left() {}
|
||||
|
||||
.hook-card-media-right() {}
|
||||
|
||||
|
||||
// Title
|
||||
// ========================================================================
|
||||
|
||||
.hook-card-title() {}
|
||||
|
||||
|
||||
// Badge
|
||||
// ========================================================================
|
||||
|
||||
.hook-card-badge() {
|
||||
border-radius: @card-badge-border-radius;
|
||||
text-transform: @card-badge-text-transform;
|
||||
}
|
||||
|
||||
|
||||
// Hover modifier
|
||||
// ========================================================================
|
||||
|
||||
.hook-card-hover() { box-shadow: @card-hover-box-shadow; }
|
||||
|
||||
|
||||
// Style modifiers
|
||||
// ========================================================================
|
||||
|
||||
.hook-card-default() { box-shadow: @card-default-box-shadow; }
|
||||
|
||||
.hook-card-default-title() {}
|
||||
|
||||
.hook-card-default-hover() { box-shadow: @card-default-hover-box-shadow; }
|
||||
|
||||
.hook-card-default-header() { border-bottom: @card-default-header-border-width solid @card-default-header-border; }
|
||||
|
||||
.hook-card-default-footer() { border-top: @card-default-footer-border-width solid @card-default-footer-border; }
|
||||
|
||||
//
|
||||
// Primary
|
||||
//
|
||||
|
||||
.hook-card-primary() { box-shadow: @card-primary-box-shadow; }
|
||||
|
||||
.hook-card-primary-title() {}
|
||||
|
||||
.hook-card-primary-hover() { box-shadow: @card-primary-hover-box-shadow; }
|
||||
|
||||
//
|
||||
// Secondary
|
||||
//
|
||||
|
||||
.hook-card-secondary() { box-shadow: @card-secondary-box-shadow; }
|
||||
|
||||
.hook-card-secondary-title() {}
|
||||
|
||||
.hook-card-secondary-hover() { box-shadow: @card-secondary-hover-box-shadow; }
|
||||
|
||||
|
||||
// Miscellaneous
|
||||
// ========================================================================
|
||||
|
||||
.hook-card-misc() {
|
||||
|
||||
/*
|
||||
* Default
|
||||
*/
|
||||
|
||||
.uk-card-body > .uk-nav-default {
|
||||
margin-left: -@card-body-padding-horizontal;
|
||||
margin-right: -@card-body-padding-horizontal;
|
||||
}
|
||||
.uk-card-body > .uk-nav-default:only-child {
|
||||
margin-top: (-@card-body-padding-vertical + 15px);
|
||||
margin-bottom: (-@card-body-padding-vertical + 15px);
|
||||
}
|
||||
|
||||
.uk-card-body > .uk-nav-default > li > a,
|
||||
.uk-card-body > .uk-nav-default .uk-nav-header,
|
||||
.uk-card-body > .uk-nav-default .uk-nav-divider {
|
||||
padding-left: @card-body-padding-horizontal;
|
||||
padding-right: @card-body-padding-horizontal;
|
||||
}
|
||||
|
||||
.uk-card-body > .uk-nav-default .uk-nav-sub { padding-left: @nav-sublist-deeper-padding-left + @card-body-padding-horizontal; }
|
||||
|
||||
|
||||
/* Desktop and bigger */
|
||||
@media (min-width: @breakpoint-large) {
|
||||
|
||||
.uk-card-body > .uk-nav-default {
|
||||
margin-left: -@card-body-padding-horizontal-l;
|
||||
margin-right: -@card-body-padding-horizontal-l;
|
||||
}
|
||||
.uk-card-body > .uk-nav-default:only-child {
|
||||
margin-top: (-@card-body-padding-vertical-l + 15px);
|
||||
margin-bottom: (-@card-body-padding-vertical-l + 15px);
|
||||
}
|
||||
|
||||
.uk-card-body > .uk-nav-default > li > a,
|
||||
.uk-card-body > .uk-nav-default .uk-nav-header,
|
||||
.uk-card-body > .uk-nav-default .uk-nav-divider {
|
||||
padding-left: @card-body-padding-horizontal-l;
|
||||
padding-right: @card-body-padding-horizontal-l;
|
||||
}
|
||||
|
||||
.uk-card-body > .uk-nav-default .uk-nav-sub { padding-left: @nav-sublist-deeper-padding-left + @card-body-padding-horizontal-l; }
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
* Small
|
||||
*/
|
||||
|
||||
.uk-card-small > .uk-nav-default {
|
||||
margin-left: -@card-small-body-padding-horizontal;
|
||||
margin-right: -@card-small-body-padding-horizontal;
|
||||
}
|
||||
.uk-card-small > .uk-nav-default:only-child {
|
||||
margin-top: (-@card-small-body-padding-vertical + 15px);
|
||||
margin-bottom: (-@card-small-body-padding-vertical + 15px);
|
||||
}
|
||||
|
||||
.uk-card-small > .uk-nav-default > li > a,
|
||||
.uk-card-small > .uk-nav-default .uk-nav-header,
|
||||
.uk-card-small > .uk-nav-default .uk-nav-divider {
|
||||
padding-left: @card-small-body-padding-horizontal;
|
||||
padding-right: @card-small-body-padding-horizontal;
|
||||
}
|
||||
|
||||
.uk-card-small > .uk-nav-default .uk-nav-sub { padding-left: @nav-sublist-deeper-padding-left + @card-small-body-padding-horizontal; }
|
||||
|
||||
/*
|
||||
* Large
|
||||
*/
|
||||
|
||||
/* Desktop and bigger */
|
||||
@media (min-width: @breakpoint-large) {
|
||||
|
||||
.uk-card-large > .uk-nav-default { margin: 0; }
|
||||
.uk-card-large > .uk-nav-default:only-child { margin: 0; }
|
||||
|
||||
.uk-card-large > .uk-nav-default > li > a,
|
||||
.uk-card-large > .uk-nav-default .uk-nav-header,
|
||||
.uk-card-large > .uk-nav-default .uk-nav-divider {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.uk-card-large > .uk-nav-default .uk-nav-sub { padding-left: @nav-sublist-deeper-padding-left; }
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user