Your IP : 216.73.216.30
//
// Component: Card
//
// ========================================================================
// Variables
// ========================================================================
//
// New
//
@card-transition-duration: 0.1s;
@card-default-backdrop-filter: ~'';
@card-primary-backdrop-filter: ~'';
@card-secondary-backdrop-filter: ~'';
@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-default-hover-top: 0;
@card-primary-hover-top: 0;
@card-secondary-hover-top: 0;
@internal-card-hover-mode: ~''; // ripple
@internal-card-default-mode: ~''; // glow
@internal-card-default-glow-gradient: ~'';
@internal-card-default-glow-filter: ~'';
@internal-card-default-hover-glow-filter: ~'';
@internal-card-primary-mode: ~''; // glow
@internal-card-primary-glow-gradient: ~'';
@internal-card-primary-glow-filter: ~'';
@internal-card-primary-hover-glow-filter: ~'';
@internal-card-secondary-mode: ~''; // glow
@internal-card-secondary-glow-gradient: ~'';
@internal-card-secondary-glow-filter: ~'';
@internal-card-secondary-hover-glow-filter: ~'';
// Component
// ========================================================================
.hook-card() {
transition: @card-transition-duration ease-in-out;
transition-property: color, background-color, background-size, border-color, box-shadow, transform, top;
}
.hook-card() when not (@card-default-hover-top = 0), not (@card-primary-hover-top = 0), not (@card-secondary-hover-top = 0) {
top: 0;
}
//
// Ripple
//
.hook-card() when (@internal-card-hover-mode = ripple) {
background-position: 50% 100%;
background-size: 0 0;
background-repeat: no-repeat;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(.165,.85,.45,1);
}
.hook-card() when (@internal-card-hover-mode = ripple) {
&:hover { background-size: 150% 150%; }
}
//
// Glow
//
.hook-card() when (@internal-card-default-mode = glow) and not (@card-border-radius = 0),
(@internal-card-primary-mode = glow) and not (@card-border-radius = 0),
(@internal-card-secondary-mode = glow) and not (@card-border-radius = 0) {
&::before,
&::after { border-radius: @card-border-radius; }
}
// 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() {}
// Hover modifier
// ========================================================================
//
// Ripple
// Fix rendering bug in Safari by fading the original color to transparent instead of `transparent` which is `rgba(0,0,0,0)`
//
.hook-card-hover() when (@internal-card-hover-mode = ripple) and not (@card-hover-background = inherit) {
&:not(.uk-card-default):not(.uk-card-primary):not(.uk-card-secondary) {
background-color: transparent;
background-image: radial-gradient(farthest-side at 50% 100%, @card-hover-background ~'calc(100% - 1px)', fade(@card-hover-background, 0%) 100%);
}
}
// Style modifiers
// ========================================================================
.hook-card-default() when not (@card-default-backdrop-filter = ~'') {
backdrop-filter: @card-default-backdrop-filter;
-webkit-backdrop-filter: @card-default-backdrop-filter;
}
.hook-card-default-title() {}
.hook-card-default-hover() when not (@card-default-hover-top = 0) {
top: @card-default-hover-top;
}
.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; }
//
// Ripple
// Fix rendering bug in Safari by fading the original color to transparent instead of `transparent` which is `rgba(0,0,0,0)`
// Note: fade color function doesn't work with `inherit`
//
.hook-card-default() when (@internal-card-hover-mode = ripple) and not (@card-default-hover-background = inherit) {
&.uk-card-hover { background-image: radial-gradient(farthest-side at 50% 100%, @card-default-hover-background ~'calc(100% - 1px)', fade(@card-default-hover-background, 0%) 100%); }
}
.hook-card-default-hover() when (@internal-card-hover-mode = ripple) and not (@card-default-hover-background = inherit) {
background-color: @card-default-background;
}
//
// Glow
//
.hook-card-default() when (@internal-card-default-mode = glow) {
&::before,
&::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
// Fix Safari flickering
will-change: filter;
}
&::before {
background-image: @internal-card-default-glow-gradient;
filter: @internal-card-default-glow-filter;
transition: filter @card-transition-duration ease-in-out;
}
&::after { transform: none !important; }
}
.hook-card-default-hover() when (@internal-card-default-mode = glow) and not (@internal-card-default-hover-glow-filter = ~'') {
&::before { filter: @internal-card-default-hover-glow-filter; }
}
.hook-card-misc() when (@internal-card-default-mode = glow) {
.uk-card-default:not(.uk-hack) {
z-index: 0;
background: none !important;
box-shadow: none !important;
border: none !important;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
}
.uk-card-default::after:extend(.uk-card-default) when (@internal-card-default-mode = glow) {}
.uk-card-default.uk-card-hover:hover::after:extend(.uk-card-default.uk-card-hover:hover) when (@internal-card-default-mode = glow) {}
//
// Primary
//
.hook-card-primary() when not (@card-primary-backdrop-filter = ~'') {
backdrop-filter: @card-primary-backdrop-filter;
-webkit-backdrop-filter: @card-primary-backdrop-filter;
}
.hook-card-primary-title() {}
.hook-card-primary-hover() when not (@card-primary-hover-top = 0) {
top: @card-primary-hover-top;
}
//
// Ripple
// Fix rendering bug in Safari by fading the original color to transparent instead of `transparent` which is `rgba(0,0,0,0)`
// Note: fade color function doesn't work with `inherit`
//
.hook-card-primary() when (@internal-card-hover-mode = ripple) and not (@card-primary-hover-background = inherit) {
&.uk-card-hover { background-image: radial-gradient(farthest-side at 50% 100%, @card-primary-hover-background ~'calc(100% - 1px)', fade(@card-primary-hover-background, 0%) 100%); }
}
.hook-card-primary-hover() when (@internal-card-hover-mode = ripple) and not (@card-primary-hover-background = inherit) {
background-color: @card-primary-background;
}
//
// Glow
//
.hook-card-primary() when (@internal-card-primary-mode = glow) {
&::before,
&::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
// Fix Safari flickering
will-change: filter;
}
&::before {
background-image: @internal-card-primary-glow-gradient;
filter: @internal-card-primary-glow-filter;
transition: filter @card-transition-duration ease-in-out;
}
&::after { transform: none !important; }
}
.hook-card-primary-hover() when (@internal-card-primary-mode = glow) and not (@internal-card-primary-hover-glow-filter = ~'') {
&::before { filter: @internal-card-primary-hover-glow-filter; }
}
.hook-card-misc() when (@internal-card-primary-mode = glow) {
.uk-card-primary:not(.uk-hack) {
z-index: 0;
background: none !important;
box-shadow: none !important;
border: none !important;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
}
.uk-card-primary::after:extend(.uk-card-primary) when (@internal-card-primary-mode = glow) {}
.uk-card-primary.uk-card-hover:hover::after:extend(.uk-card-primary.uk-card-hover:hover) when (@internal-card-primary-mode = glow) {}
//
// Secondary
//
.hook-card-secondary() when not (@card-secondary-backdrop-filter = ~'') {
backdrop-filter: @card-secondary-backdrop-filter;
-webkit-backdrop-filter: @card-secondary-backdrop-filter;
}
.hook-card-secondary-title() {}
.hook-card-secondary-hover() when not (@card-secondary-hover-top = 0) {
top: @card-secondary-hover-top;
}
//
// Ripple
// Fix rendering bug in Safari by fading the original color to transparent instead of `transparent` which is `rgba(0,0,0,0)`
// Note: fade color function doesn't work with `inherit`
//
.hook-card-secondary() when (@internal-card-hover-mode = ripple) and not (@card-secondary-hover-background = inherit) {
&.uk-card-hover { background-image: radial-gradient(farthest-side at 50% 100%, @card-secondary-hover-background ~'calc(100% - 1px)', fade(@card-secondary-hover-background, 0%) 100%); }
}
.hook-card-secondary-hover() when (@internal-card-hover-mode = ripple) and not (@card-secondary-hover-background = inherit) {
background-color: @card-secondary-background;
}
//
// Glow
//
.hook-card-secondary() when (@internal-card-secondary-mode = glow) {
&::before,
&::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
// Fix Safari flickering
will-change: filter;
}
&::before {
background-image: @internal-card-secondary-glow-gradient;
filter: @internal-card-secondary-glow-filter;
transition: filter @card-transition-duration ease-in-out;
}
&::after { transform: none !important; }
}
.hook-card-secondary-hover() when (@internal-card-secondary-mode = glow) and not (@internal-card-secondary-hover-glow-filter = ~'') {
&::before { filter: @internal-card-secondary-hover-glow-filter; }
}
.hook-card-misc() when (@internal-card-secondary-mode = glow) {
.uk-card-secondary:not(.uk-hack) {
z-index: 0;
background: none !important;
box-shadow: none !important;
border: none !important;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
}
.uk-card-secondary::after:extend(.uk-card-secondary) when (@internal-card-secondary-mode = glow) {}
.uk-card-secondary.uk-card-hover:hover::after:extend(.uk-card-secondary.uk-card-hover:hover) when (@internal-card-secondary-mode = glow) {}
// 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; }
}
}
// Inverse
// ========================================================================
.hook-inverse-card-badge() {}