UIkit 3 Based Google Blogger Dynamic Theme ( Version and dependence, YOOtheme: UIkit 3.15.19, .Blogger: Contempo Light 1.3.3, .digital: 1.0 )
, Posted in Tips.
/*
*/
/*
*/
/*
*/
/*
*/
/*
*/
/*
*/
//
// Component: Variables
// Description: Defines common values which are used across all components
//
// ========================================================================
// Load deprecated components
// ========================================================================
/*
*/
@deprecated: $(deprecated);
// Breakpoints
// ========================================================================
/*
*/
// Phone Portrait: Galaxy (360x640), iPhone 6 (375x667), iPhone 6+ (414x736)
// Phone Landscape: Galaxy (640x360), iPhone 6 (667x375), iPhone 6+ (736x414)
// Tablet Portrait: iPad (768x1024), Galaxy Tab (800x1280),
// Tablet Landscape: iPad (1024x768), iPad Pro (1024x1366),
// Desktop: Galaxy Tab (1280x800), iPad Pro (1366x1024)
@breakpoint-small: $(breakpoint.small); // Phone landscape
@breakpoint-medium: $(breakpoint.medium); // Tablet Landscape
@breakpoint-large: $(breakpoint.large); // Desktop
@breakpoint-xlarge: $(breakpoint.xlarge); // Large Screens
@breakpoint-xsmall-max: (@breakpoint-small - 1);
@breakpoint-small-max: (@breakpoint-medium - 1);
@breakpoint-medium-max: (@breakpoint-large - 1);
@breakpoint-large-max: (@breakpoint-xlarge - 1);
// Global variables
// ========================================================================
//
// Typography
//
/*
*/
@global-font-family: $(global.font.family);
@global-font-size: $(global.font.size);
@global-line-height: $(global.line.height);
@global-2xlarge-font-size: $(global.2xlarge.font.size);
@global-xlarge-font-size: $(global.xlarge.font.size);
@global-large-font-size: $(global.xlarge.font.size);
@global-medium-font-size: $(global.medium.font.size);
@global-small-font-size: $(global.small.font.size);
//
// Colors
//
/*
*/
@global-color: $(global.color);
@global-emphasis-color: $(global.emphasis.color);
@global-muted-color: $(global.muted.color);
@global-link-color: $(global.link.color);
@global-link-hover-color: $(global.link.hover.color);
@global-inverse-color: $(global.inverse.color);
//
// Backgrounds
//
/*
*/
@global-background: $(global.background.color);
@global-muted-background: $(global.muted.background.color);
@global-primary-background: $(global.primary.background.color);
@global-secondary-background: $(global.secondary.background.color);
@global-success-background: $(global.success.background.color);
@global-warning-background: $(global.warning.background.color);
@global-danger-background: $(global.danger.background.color);
//
// Borders
//
/*
*/
@global-border-width: $(global.border.width);
@global-border: $(global.border);
//
// Box-Shadows
//
/*
*/
@global-small-box-shadow: $(global.box.shadow.inset) $(global.small.box.shadow.offset.x) $(global.small.box.shadow.offset.y) $(global.small.box.shadow.blur.radius) $(global.small.box.shadow.spread.radius) $(global.small.box.shadow.color);
@global-medium-box-shadow: $(global.box.shadow.inset) $(global.medium.box.shadow.offset.x) $(global.medium.box.shadow.offset.y) $(global.medium.box.shadow.blur.radius) $(global.medium.box.shadow.spread.radius) $(global.medium.box.shadow.color);
@global-large-box-shadow: $(global.box.shadow.inset) $(global.large.box.shadow.offset.x) $(global.large.box.shadow.offset.y) $(global.large.box.shadow.blur.radius) $(global.large.box.shadow.spread.radius) $(global.large.box.shadow.color);
@global-xlarge-box-shadow: $(global.box.shadow.inset) $(global.xlarge.box.shadow.offset.x) $(global.xlarge.box.shadow.offset.y) $(global.xlarge.box.shadow.blur.radius) $(global.xlarge.box.shadow.spread.radius) $(global.xlarge.box.shadow.color);
//
// Spacings
//
// Used in margin, section, list
/*
*/
@global-margin: $(global.margin);
@global-small-margin: $(global.small.margin);
@global-medium-margin: $(global.medium.margin);
@global-large-margin: $(global.large.margin);
@global-xlarge-margin: $(global.xlarge.margin);
// Used in grid, column, container, align, card, padding
/*
*/
@global-gutter: $(global.gutter);
@global-small-gutter: $(global.small.gutter);
@global-medium-gutter: $(global.medium.gutter);
@global-large-gutter: $(global.large.gutter);
//
// Controls
//
/*
*/
@global-control-height: $(global.control.height);
@global-control-small-height: $(global.control.small.height);
@global-control-large-height: $(global.control.large.height);
//
// Z-index
//
/*
*/
@global-z-index: $(global.z.index);
//
// Component: Mixin
// Description: Defines mixins which are used across all components
//
// ========================================================================
// SVG
// ========================================================================
.svg-fill(@src, @color-default, @color-new, @property: background-image) {
@escape-color-default: escape(@color-default);
@escape-color-new: escape("@{color-new}");
@data-uri: data-uri('image/svg+xml;charset=UTF-8', "@{src}");
@replace-src: replace("@{data-uri}", "@{escape-color-default}", "@{escape-color-new}", "g");
@{property}: e(@replace-src);
}
// Name: Base
// Description: Default values for HTML elements
//
// Component: `uk-link`
// `uk-h1`, `uk-h2`, `uk-h3`, `uk-h4`, `uk-h5`, `uk-h6`
// `uk-hr`
//
// ========================================================================
// Variables
// ========================================================================
/*
*/
@base-body-background: @global-background;
@base-body-font-family: @global-font-family;
@base-body-font-weight: $(base.body.font.weight);
@base-body-font-size: @global-font-size;
@base-body-line-height: @global-line-height;
@base-body-color: @global-color;
@base-link-color: @global-link-color;
@base-link-text-decoration: $(base.link.text.decoration);
@base-link-hover-color: @global-link-hover-color;
@base-link-hover-text-decoration: $(base.link.hover.text.decoration);
@base-strong-font-weight: $(base.strong.font.weight);
@base-code-font-size: @global-small-font-size;
@base-code-font-family: $(base.code.font.family);
@base-code-color: @global-danger-background;
@base-em-color: @global-danger-background;
@base-ins-background: $(base.ins.background.color);
@base-ins-color: @global-color;
@base-mark-background: $(base.mark.background.color);
@base-mark-color: @global-color;
@base-quote-font-style: $(base.quote.font.style);
@base-small-font-size: $(base.small.font.size);
@base-margin-vertical: @global-margin;
@base-heading-font-family: @global-font-family;
@base-heading-font-weight: $(base.heading.font.weight);
@base-heading-color: @global-emphasis-color;
@base-heading-text-transform: $(base.heading.text.transform);
@base-heading-margin-top: @global-medium-margin;
@base-h1-font-size-m: $(base.h1.font.size.m);
@base-h1-font-size: $(base.h1.font.size);
@base-h1-line-height: $(base.h1.line.height);
@base-h2-font-size-m: $(base.h2.font.size.m);
@base-h2-font-size: $(base.h2.font.size);
@base-h2-line-height: $(base.h2.line.height);
@base-h3-font-size: $(base.h3.font.size);
@base-h3-line-height: $(base.h3.line.height);
@base-h4-font-size: $(base.h4.font.size);
@base-h4-line-height: $(base.h4.line.height);
@base-h5-font-size: $(base.h5.font.size);
@base-h5-line-height: $(base.h5.line.height);
@base-h6-font-size: $(base.h6.font.size);
@base-h6-line-height: $(base.h6.line.height);
@base-list-padding-$(startSide): $(base.list.padding.startSide);
@base-hr-margin-vertical: @global-margin;
@base-hr-border-width: @global-border-width;
@base-hr-border: @global-border;
@base-blockquote-font-size: $(base.blockquote.font.size);
@base-blockquote-line-height: $(base.blockquote.line.height);
@base-blockquote-font-style: $(base.blockquote.font.style);
@base-blockquote-margin-vertical: @global-margin;
@base-blockquote-footer-margin-top: @global-small-margin;
@base-blockquote-footer-font-size: $(base.blockquote.footer.font.size);
@base-blockquote-footer-line-height: $(base.blockquote.footer.line.height);
@base-pre-font-size: $(base.pre.font.size);
@base-pre-line-height: $(base.pre.line.height);
@base-pre-font-family: @base-code-font-family;
@base-pre-color: @global-color;
@base-focus-outline-width: $(base.focus.outline.width);
@base-focus-outline-style: $(base.focus.outline.style);
@base-focus-outline: @global-emphasis-color;
@base-focus-outline-offset: $(base.focus.outline.offset);
@base-selection-background: $(base.selection.background.color);
@base-selection-color: @global-inverse-color;
/* ========================================================================
Component: Base
========================================================================== */
/*
* 1. Set `font-size` to support `rem` units
* 2. Prevent adjustments of font size after orientation changes in iOS.
* 3. Style
*/
html {
/* 1 */
font-family: @base-body-font-family;
font-size: @base-body-font-size;
font-weight: @base-body-font-weight;
line-height: @base-body-line-height;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 3 */
background: @base-body-background;
color: @base-body-color;
.hook-base-body();
}
/*
* Remove the margin in all browsers.
*/
body { margin: 0; }
/* Links
========================================================================== */
/*
* Style
*/
a,
.uk-link {
color: @base-link-color;
text-decoration: @base-link-text-decoration;
cursor: pointer;
.hook-base-link();
}
a:hover,
.uk-link:hover,
.uk-link-toggle:hover .uk-link {
color: @base-link-hover-color;
text-decoration: @base-link-hover-text-decoration;
.hook-base-link-hover();
}
/* Text-level semantics
========================================================================== */
/*
* 1. Add the correct text decoration in Edge.
* 2. The shorthand declaration `underline dotted` is not supported in Safari.
*/
abbr[title] {
/* 1 */
text-decoration: underline dotted;
/* 2 */
-webkit-text-decoration-style: dotted;
}
/*
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong { font-weight: @base-strong-font-weight; }
/*
* 1. Consolas has a better baseline in running text compared to `Courier`
* 2. Correct the odd `em` font sizing in all browsers.
* 3. Style
*/
:not(pre) > code,
:not(pre) > kbd,
:not(pre) > samp {
/* 1 */
font-family: @base-code-font-family;
/* 2 */
font-size: @base-code-font-size;
/* 3 */
color: @base-code-color;
white-space: nowrap;
.hook-base-code();
}
/*
* Emphasize
*/
em { color: @base-em-color; }
/*
* Insert
*/
ins {
background: @base-ins-background;
color: @base-ins-color;
text-decoration: none;
}
/*
* Mark
*/
mark {
background: @base-mark-background;
color: @base-mark-color;
}
/*
* Quote
*/
q { font-style: @base-quote-font-style; }
/*
* Add the correct font size in all browsers.
*/
small { font-size: @base-small-font-size; }
/*
* Prevents `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* Embedded content
========================================================================== */
/*
* Remove the gap between the element and the bottom of its parent container.
*/
audio,
canvas,
iframe,
img,
svg,
video { vertical-align: middle; }
/*
* 1. Constrain the element to its parent width.
* 2. Preserve the intrinsic aspect ratio and auto-scale the height of an image if the `height` attribute is present.
* 3. Take border and padding into account.
*/
canvas,
img,
svg,
video {
/* 1 */
max-width: 100%;
/* 2 */
height: auto;
/* 3 */
box-sizing: border-box;
}
/*
* Deprecated: only needed for `img` elements with `uk-img`
* 1. Hide `alt` text for lazy load images.
* 2. Fix lazy loading images if parent element is set to `display: inline` and has `overflow: hidden`.
*/
img:not([src]) {
/* 1 */
visibility: hidden;
/* 2 */
min-width: 1px;
}
/*
* Iframe
* Remove border in all browsers
*/
iframe { border: 0; }
/* Block elements
========================================================================== */
/*
* Margins
*/
p,
ul,
ol,
dl,
pre,
address,
fieldset,
figure { margin: 0 0 @base-margin-vertical 0; }
/* Add margin if adjacent element */
* + p,
* + ul,
* + ol,
* + dl,
* + pre,
* + address,
* + fieldset,
* + figure { margin-top: @base-margin-vertical; }
/* Headings
========================================================================== */
h1, .uk-h1,
h2, .uk-h2,
h3, .uk-h3,
h4, .uk-h4,
h5, .uk-h5,
h6, .uk-h6,
.uk-heading-small,
.uk-heading-medium,
.uk-heading-large,
.uk-heading-xlarge,
.uk-heading-2xlarge {
margin: 0 0 @base-margin-vertical 0;
font-family: @base-heading-font-family;
font-weight: @base-heading-font-weight;
color: @base-heading-color;
text-transform: @base-heading-text-transform;
.hook-base-heading();
}
/* Add margin if adjacent element */
* + h1, * + .uk-h1,
* + h2, * + .uk-h2,
* + h3, * + .uk-h3,
* + h4, * + .uk-h4,
* + h5, * + .uk-h5,
* + h6, * + .uk-h6,
* + .uk-heading-small,
* + .uk-heading-medium,
* + .uk-heading-large,
* + .uk-heading-xlarge,
* + .uk-heading-2xlarge { margin-top: @base-heading-margin-top; }
/*
* Sizes
*/
h1, .uk-h1 {
font-size: @base-h1-font-size;
line-height: @base-h1-line-height;
.hook-base-h1();
}
h2, .uk-h2 {
font-size: @base-h2-font-size;
line-height: @base-h2-line-height;
.hook-base-h2();
}
h3, .uk-h3 {
font-size: @base-h3-font-size;
line-height: @base-h3-line-height;
.hook-base-h3();
}
h4, .uk-h4 {
font-size: @base-h4-font-size;
line-height: @base-h4-line-height;
.hook-base-h4();
}
h5, .uk-h5 {
font-size: @base-h5-font-size;
line-height: @base-h5-line-height;
.hook-base-h5();
}
h6, .uk-h6 {
font-size: @base-h6-font-size;
line-height: @base-h6-line-height;
.hook-base-h6();
}
/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) {
h1, .uk-h1 { font-size: @base-h1-font-size-m; }
h2, .uk-h2 { font-size: @base-h2-font-size-m; }
}
/* Lists
========================================================================== */
ul,
ol { padding-$(startSide): @base-list-padding-$(startSide); }
/*
* Reset margin for nested lists
*/
ul > li > ul,
ul > li > ol,
ol > li > ol,
ol > li > ul { margin: 0; }
/* Description lists
========================================================================== */
dt { font-weight: bold; }
dd { margin-$(startSide): 0; }
/* Horizontal rules
========================================================================== */
/*
* 1. Show the overflow in Chrome, Edge and IE.
* 2. Add the correct text-align in Edge and IE.
* 3. Style
*/
hr, .uk-hr {
/* 1 */
overflow: visible;
/* 2 */
text-align: inherit;
/* 3 */
margin: 0 0 @base-hr-margin-vertical 0;
border: 0;
border-top: @base-hr-border-width solid @base-hr-border;
.hook-base-hr();
}
/* Add margin if adjacent element */
* + hr,
* + .uk-hr { margin-top: @base-hr-margin-vertical }
/* Address
========================================================================== */
address { font-style: normal; }
/* Blockquotes
========================================================================== */
blockquote {
margin: 0 0 @base-blockquote-margin-vertical 0;
font-size: @base-blockquote-font-size;
line-height: @base-blockquote-line-height;
font-style: @base-blockquote-font-style;
.hook-base-blockquote();
}
/* Add margin if adjacent element */
* + blockquote { margin-top: @base-blockquote-margin-vertical; }
/*
* Content
*/
blockquote p:last-of-type { margin-bottom: 0; }
blockquote footer {
margin-top: @base-blockquote-footer-margin-top;
font-size: @base-blockquote-footer-font-size;
line-height: @base-blockquote-footer-line-height;
.hook-base-blockquote-footer();
}
/* Preformatted text
========================================================================== */
/*
* 1. Contain overflow in all browsers.
*/
pre {
font: @base-pre-font-size e("/") @base-pre-line-height @base-pre-font-family;
color: @base-pre-color;
-moz-tab-size: 4;
tab-size: 4;
/* 1 */
overflow: auto;
.hook-base-pre();
}
pre code { font-family: @base-pre-font-family; }
/* Focus
========================================================================== */
:focus { outline: none; }
:focus-visible { outline: @base-focus-outline-width @base-focus-outline-style @base-focus-outline; }
/* Selection pseudo-element
========================================================================== */
::selection {
background: @base-selection-background;
color: @base-selection-color;
text-shadow: none;
}
/* HTML5 elements
========================================================================== */
/*
* 1. Add the correct display in Edge, IE 10+, and Firefox.
* 2. Add the correct display in IE.
*/
details, /* 1 */
main { /* 2 */
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary { display: list-item; }
/*
* Add the correct display in IE.
*/
template { display: none; }
/* Pass media breakpoints to JS
========================================================================== */
/*
* Breakpoints
*/
:root {
--uk-breakpoint-s: @breakpoint-small;
--uk-breakpoint-m: @breakpoint-medium;
--uk-breakpoint-l: @breakpoint-large;
--uk-breakpoint-xl: @breakpoint-xlarge;
}
// Hooks
// ========================================================================
.hook-base-misc();
.hook-base-body() {}
.hook-base-link() {}
.hook-base-link-hover() {}
.hook-base-code() {}
.hook-base-heading() {}
.hook-base-h1() {}
.hook-base-h2() {}
.hook-base-h3() {}
.hook-base-h4() {}
.hook-base-h5() {}
.hook-base-h6() {}
.hook-base-hr() {}
.hook-base-blockquote() {}
.hook-base-blockquote-footer() {}
.hook-base-pre() {}
.hook-base-misc() {}
// Inverse
// ========================================================================
@inverse-base-color: @inverse-global-color;
@inverse-base-link-color: @inverse-global-emphasis-color;
@inverse-base-link-hover-color: @inverse-global-emphasis-color;
@inverse-base-code-color: @inverse-global-color;
@inverse-base-em-color: @inverse-global-emphasis-color;
@inverse-base-heading-color: @inverse-global-emphasis-color;
@inverse-base-hr-border: @inverse-global-border;
@inverse-base-focus-outline: @inverse-global-emphasis-color;
.hook-inverse() {
color: @inverse-base-color;
// Base
// ========================================================================
//
// Link
//
a,
.uk-link {
color: @inverse-base-link-color;
.hook-inverse-base-link();
}
a:hover,
.uk-link:hover,
.uk-link-toggle:hover .uk-link {
color: @inverse-base-link-hover-color;
.hook-inverse-base-link-hover();
}
//
// Code
//
:not(pre) > code,
:not(pre) > kbd,
:not(pre) > samp {
color: @inverse-base-code-color;
.hook-inverse-base-code();
}
//
// Emphasize
//
em { color: @inverse-base-em-color; }
//
// Headings
//
h1, .uk-h1,
h2, .uk-h2,
h3, .uk-h3,
h4, .uk-h4,
h5, .uk-h5,
h6, .uk-h6,
.uk-heading-small,
.uk-heading-medium,
.uk-heading-large,
.uk-heading-xlarge,
.uk-heading-2xlarge {
color: @inverse-base-heading-color;
.hook-inverse-base-heading();
}
h1, .uk-h1 {
.hook-inverse-base-h1();
}
h2, .uk-h2 {
.hook-inverse-base-h2();
}
h3, .uk-h3 {
.hook-inverse-base-h3();
}
h4, .uk-h4 {
.hook-inverse-base-h4();
}
h5, .uk-h5 {
.hook-inverse-base-h5();
}
h6, .uk-h6 {
.hook-inverse-base-h6();
}
//
// Blockquotes
//
blockquote {
.hook-inverse-base-blockquote();
}
blockquote footer {
.hook-inverse-base-blockquote-footer();
}
//
// Horizontal rules
//
hr, .uk-hr {
border-top-color: @inverse-base-hr-border;
.hook-inverse-base-hr();
}
//
// Focus
//
:focus { outline-color: @inverse-base-focus-outline; }
:focus-visible { outline-color: @inverse-base-focus-outline; }
}
.hook-inverse-base-link() {}
.hook-inverse-base-link-hover() {}
.hook-inverse-base-code() {}
.hook-inverse-base-heading() {}
.hook-inverse-base-h1() {}
.hook-inverse-base-h2() {}
.hook-inverse-base-h3() {}
.hook-inverse-base-h4() {}
.hook-inverse-base-h5() {}
.hook-inverse-base-h6() {}
.hook-inverse-base-blockquote() {}
.hook-inverse-base-blockquote-footer() {}
.hook-inverse-base-hr() {}
// Elements
// Name: Link
// Description: Styles for links
//
// Component: `uk-link-muted`
// `uk-link-text`
// `uk-link-heading`
// `uk-link-reset`
//
// Sub-objects: `uk-link-toggle`
//
// ========================================================================
// Variables
// ========================================================================
/*
*/
@link-muted-color: @global-muted-color;
@link-muted-hover-color: @global-color;
@link-text-hover-color: @global-muted-color;
@link-heading-hover-color: @global-primary-background;
@link-heading-hover-text-decoration: none;
/* ========================================================================
Component: Link
========================================================================== */
/* Muted
========================================================================== */
a.uk-link-muted,
.uk-link-muted a,
.uk-link-toggle .uk-link-muted {
color: @link-muted-color;
.hook-link-muted();
}
a.uk-link-muted:hover,
.uk-link-muted a:hover,
.uk-link-toggle:hover .uk-link-muted {
color: @link-muted-hover-color;
.hook-link-muted-hover();
}
/* Text
========================================================================== */
a.uk-link-text,
.uk-link-text a,
.uk-link-toggle .uk-link-text {
color: inherit;
.hook-link-text();
}
a.uk-link-text:hover,
.uk-link-text a:hover,
.uk-link-toggle:hover .uk-link-text {
color: @link-text-hover-color;
.hook-link-text-hover();
}
/* Heading
========================================================================== */
a.uk-link-heading,
.uk-link-heading a,
.uk-link-toggle .uk-link-heading {
color: inherit;
.hook-link-heading();
}
a.uk-link-heading:hover,
.uk-link-heading a:hover,
.uk-link-toggle:hover .uk-link-heading {
color: @link-heading-hover-color;
text-decoration: @link-heading-hover-text-decoration;
.hook-link-heading-hover();
}
/* Reset
========================================================================== */
/*
* `!important` needed to override inverse component
*/
a.uk-link-reset,
.uk-link-reset a {
color: inherit !important;
text-decoration: none !important;
.hook-link-reset();
}
/* Toggle
========================================================================== */
.uk-link-toggle {
color: inherit !important;
text-decoration: none !important;
}
// Hooks
// ========================================================================
.hook-link-misc();
.hook-link-muted() {}
.hook-link-muted-hover() {}
.hook-link-text() {}
.hook-link-text-hover() {}
.hook-link-heading() {}
.hook-link-heading-hover() {}
.hook-link-reset() {}
.hook-link-misc() {}
// Inverse
// ========================================================================
@inverse-link-muted-color: @inverse-global-muted-color;
@inverse-link-muted-hover-color: @inverse-global-color;
@inverse-link-text-hover-color: @inverse-global-muted-color;
@inverse-link-heading-hover-color: @inverse-global-primary-background;
.hook-inverse() {
a.uk-link-muted,
.uk-link-muted a {
color: @inverse-link-muted-color;
.hook-inverse-link-muted();
}
a.uk-link-muted:hover,
.uk-link-muted a:hover,
.uk-link-toggle:hover .uk-link-muted {
color: @inverse-link-muted-hover-color;
.hook-inverse-link-muted-hover();
}
a.uk-link-text:hover,
.uk-link-text a:hover,
.uk-link-toggle:hover .uk-link-text {
color: @inverse-link-text-hover-color;
.hook-inverse-link-text-hover();
}
a.uk-link-heading:hover,
.uk-link-heading a:hover,
.uk-link-toggle:hover .uk-link-heading {
color: @inverse-link-heading-hover-color;
.hook-inverse-link-heading-hover();
}
}
.hook-inverse-link-muted() {}
.hook-inverse-link-muted-hover() {}
.hook-inverse-link-text-hover() {}
.hook-inverse-link-heading-hover() {}
// Name: Heading
// Description: Styles for headings
//
// Component: `uk-heading-primary`
// `uk-heading-hero`
// `uk-heading-divider`
// `uk-heading-bullet`
// `uk-heading-line`
//
// ========================================================================
// Variables
// ========================================================================
/*
*/
@heading-small-font-size: @heading-small-font-size-m * 0.8; // 38px 0.73
@heading-medium-font-size: @heading-medium-font-size-m * 0.825; // 40px 0.714
@heading-large-font-size: @heading-large-font-size-m * 0.85; // 50px 0.78
@heading-xlarge-font-size: @heading-large-font-size-m; // 4rem / 64px
@heading-2xlarge-font-size: @heading-xlarge-font-size-m; // 6rem / 96px
@heading-small-font-size-m: @heading-medium-font-size-l * 0.8125; // 3.25rem / 52px
@heading-medium-font-size-m: @heading-medium-font-size-l * 0.875; // 3.5rem / 56px
@heading-large-font-size-m: @heading-medium-font-size-l; // 4rem / 64px
@heading-xlarge-font-size-m: @heading-large-font-size-l; // 6rem / 96px
@heading-2xlarge-font-size-m: @heading-xlarge-font-size-l; // 8rem / 128px
@heading-medium-font-size-l: $(heading.medium.font.size.l); // 64px
@heading-large-font-size-l: $(heading.large.font.size.l); // 96px
@heading-xlarge-font-size-l: $(heading.xlarge.font.size.l); // 128px
@heading-2xlarge-font-size-l: $(heading.2xlarge.font.size.l); // 176px
@heading-small-line-height: $(heading.small.line.height);
@heading-medium-line-height: $(heading.medium.line.height);
@heading-large-line-height: $(heading.large.line.height);
@heading-xlarge-line-height: $(heading.xlarge.line.height);
@heading-2xlarge-line-height: $(heading.2xlarge.line.height);
@heading-divider-padding-bottom: ~'calc($(heading.divider.padding.bottom.static) + $(heading.divider.padding.bottom.dynamic / 10))';
@heading-divider-border-width: ~'calc($(heading.divider.border.width.static / 10) + $(heading.divider.border.width.dynamic / 100))';
@heading-divider-border: @global-border;
@heading-bullet-top: ~'calc(-0.1 * $(heading.bullet.top.dynamic))';
@heading-bullet-height: ~'calc($(heading.bullet.height.static) + $(heading.bullet.height.dynamic / 10))';
@heading-bullet-margin-$(endSide): ~'calc($(heading.bullet.margin.endSide.static) + $(heading.bullet.margin.endSide.dynamic / 10))';
@heading-bullet-border-width: ~'calc($(heading.bullet.border.width.static) + $(heading.bullet.border.width.dynamic / 10))';
@heading-bullet-border: @global-border;
@heading-line-top: $(heading.line.top);
@heading-line-height: @heading-line-border-width;
@heading-line-width: $(heading.line.width);
@heading-line-border-width: ~'calc($(heading.line.border.width.static / 10) + $(heading.line.border.width.dynamic))';
@heading-line-border: @global-border;
@heading-line-margin-horizontal: ~'calc($(heading.line.margin.horizontal.static) + $(heading.line.margin.horizontal.dynamic / 10))';
/* ========================================================================
Component: Heading
========================================================================== */
.uk-heading-small {
font-size: @heading-small-font-size;
line-height: @heading-small-line-height;
.hook-heading-small();
}
.uk-heading-medium {
font-size: @heading-medium-font-size;
line-height: @heading-medium-line-height;
.hook-heading-medium();
}
.uk-heading-large {
font-size: @heading-large-font-size;
line-height: @heading-large-line-height;
.hook-heading-large();
}
.uk-heading-xlarge {
font-size: @heading-xlarge-font-size;
line-height: @heading-xlarge-line-height;
.hook-heading-xlarge();
}
.uk-heading-2xlarge {
font-size: @heading-2xlarge-font-size;
line-height: @heading-2xlarge-line-height;
.hook-heading-2xlarge();
}
/* Tablet Landscape and bigger */
@media (min-width: @breakpoint-medium) {
.uk-heading-small { font-size: @heading-small-font-size-m; }
.uk-heading-medium { font-size: @heading-medium-font-size-m; }
.uk-heading-large { font-size: @heading-large-font-size-m; }
.uk-heading-xlarge { font-size: @heading-xlarge-font-size-m; }
.uk-heading-2xlarge { font-size: @heading-2xlarge-font-size-m; }
}
/* Laptop and bigger */
@media (min-width: @breakpoint-large) {
.uk-heading-medium { font-size: @heading-medium-font-size-l; }
.uk-heading-large { font-size: @heading-large-font-size-l; }
.uk-heading-xlarge { font-size: @heading-xlarge-font-size-l; }
.uk-heading-2xlarge { font-size: @heading-2xlarge-font-size-l; }
}
/* Primary
Deprecated: Use `uk-heading-medium` instead
========================================================================== */
/*
*/
@heading-primary-font-size-l: $(heading.primary.font.size.l); // 60px
@heading-primary-line-height-l: $(heading.primary.line.height.l);
@heading-primary-font-size-m: $(heading.primary.font.size.m); // 54px
@heading-primary-font-size: $(heading.primary.font.size); // 48px
@heading-primary-line-height: $(heading.primary.line.height);
.uk-heading-primary when (@deprecated = true) {
font-size: @heading-primary-font-size;
line-height: @heading-primary-line-height;
.hook-heading-primary();
}
/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) {
.uk-heading-primary when (@deprecated = true) { font-size: @heading-primary-font-size-m; }
}
/* Desktop and bigger */
@media (min-width: @breakpoint-large) {
.uk-heading-primary when (@deprecated = true) {
font-size: @heading-primary-font-size-l;
line-height: @heading-primary-line-height-l;
}
}
/* Hero
Deprecated: Use `uk-heading-xlarge` instead
========================================================================== */
/*
*/
@heading-hero-font-size-l: $(heading.hero.font.size.l); // 128px
@heading-hero-line-height-l: $(heading.hero.line.height.l);
@heading-hero-font-size-m: $(heading.hero.font.size.m); // 96px
@heading-hero-line-height-m: $(heading.hero.line.height.m);
@heading-hero-font-size: $(heading.hero.font.size); // 64px
@heading-hero-line-height: $(heading.hero.line.height);
.uk-heading-hero when (@deprecated = true) {
font-size: @heading-hero-font-size;
line-height: @heading-hero-line-height;
.hook-heading-hero();
}
/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) {
.uk-heading-hero when (@deprecated = true) {
font-size: @heading-hero-font-size-m;
line-height: @heading-hero-line-height-m;
}
}
/* Desktop and bigger */
@media (min-width: @breakpoint-large) {
.uk-heading-hero when (@deprecated = true) {
font-size: @heading-hero-font-size-l;
line-height: @heading-hero-line-height-l;
}
}
/* Divider
========================================================================== */
.uk-heading-divider {
padding-bottom: @heading-divider-padding-bottom;
border-bottom: @heading-divider-border-width solid @heading-divider-border;
.hook-heading-divider();
}
/* Bullet
========================================================================== */
.uk-heading-bullet { position: relative; }
/*
* 1. Using `inline-block` to make it work with text alignment
* 2. Center vertically
* 3. Style
*/
.uk-heading-bullet::before {
content: "";
/* 1 */
display: inline-block;
/* 2 */
position: relative;
top: @heading-bullet-top;
vertical-align: middle;
/* 3 */
height: @heading-bullet-height;
margin-$(endSide): @heading-bullet-margin-$(endSide);
border-$(startSide): @heading-bullet-border-width solid @heading-bullet-border;
.hook-heading-bullet();
}
/* Line
========================================================================== */
/*
* Clip the child element
*/
.uk-heading-line { overflow: hidden; }
/*
* Extra markup is needed to make it work with text align
*/
.uk-heading-line > * {
display: inline-block;
position: relative;
}
/*
* 1. Center vertically
* 2. Make the element as large as possible. It's clipped by the container.
* 3. Style
*/
.uk-heading-line > ::before,
.uk-heading-line > ::after {
content: "";
/* 1 */
position: absolute;
top: ~'calc(@{heading-line-top} - (@{heading-line-height} / 2))';
/* 2 */
width: @heading-line-width;
/* 3 */
border-bottom: @heading-line-border-width solid @heading-line-border;
.hook-heading-line();
}
.uk-heading-line > ::before {
$(endSide): 100%;
margin-$(endSide): @heading-line-margin-horizontal;
}
.uk-heading-line > ::after {
$(startSide): 100%;
margin-$(startSide): @heading-line-margin-horizontal;
}
// Hooks
// ========================================================================
.hook-heading-misc();
.hook-heading-small() {}
.hook-heading-medium() {}
.hook-heading-large() {}
.hook-heading-xlarge() {}
.hook-heading-2xlarge() {}
.hook-heading-primary() {}
.hook-heading-hero() {}
.hook-heading-divider() {}
.hook-heading-bullet() {}
.hook-heading-line() {}
.hook-heading-misc() {}
// Inverse
// ========================================================================
@inverse-heading-divider-border: @inverse-global-border;
@inverse-heading-bullet-border: @inverse-global-border;
@inverse-heading-line-border: @inverse-global-border;
.hook-inverse() {
.uk-heading-small {
.hook-inverse-heading-small();
}
.uk-heading-medium {
.hook-inverse-heading-medium();
}
.uk-heading-large {
.hook-inverse-heading-large();
}
.uk-heading-xlarge {
.hook-inverse-heading-xlarge();
}
.uk-heading-2xlarge {
.hook-inverse-heading-2xlarge();
}
.uk-heading-primary when (@deprecated = true) {
.hook-inverse-heading-primary();
}
.uk-heading-hero when (@deprecated = true) {
.hook-inverse-heading-hero();
}
.uk-heading-divider {
border-bottom-color: @inverse-heading-divider-border;
.hook-inverse-heading-divider();
}
.uk-heading-bullet::before {
border-$(startSide)-color: @inverse-heading-bullet-border;
.hook-inverse-heading-bullet();
}
.uk-heading-line > ::before,
.uk-heading-line > ::after {
border-bottom-color: @inverse-heading-line-border;
.hook-inverse-heading-line();
}
}
.hook-inverse-heading-small() {}
.hook-inverse-heading-medium() {}
.hook-inverse-heading-large() {}
.hook-inverse-heading-xlarge() {}
.hook-inverse-heading-2xlarge() {}
.hook-inverse-heading-primary() {}
.hook-inverse-heading-hero() {}
.hook-inverse-heading-divider() {}
.hook-inverse-heading-bullet() {}
.hook-inverse-heading-line() {}
// Name: Divider
// Description: Styles for dividers
//
// Component: `uk-divider-icon`
// `uk-divider-small`
// `uk-divider-vertical`
//
// ========================================================================
// Variables
// ========================================================================
@divider-margin-vertical: @global-margin;
@divider-icon-width: 50px;
@divider-icon-height: 20px;
@divider-icon-color: @global-border;
@divider-icon-line-top: 50%;
@divider-icon-line-width: 100%;
@divider-icon-line-border-width: @global-border-width;
@divider-icon-line-border: @global-border;
@internal-divider-icon-image: "../../images/backgrounds/divider-icon.svg";
@divider-small-width: 100px;
@divider-small-border-width: @global-border-width;
@divider-small-border: @global-border;
@divider-vertical-height: 100px;
@divider-vertical-border-width: @global-border-width;
@divider-vertical-border: @global-border;
/* ========================================================================
Component: Divider
========================================================================== */
/*
* 1. Reset default `hr`
* 2. Set margin if a `div` is used for semantical reason
*/
[class*='uk-divider'] {
/* 1 */
border: none;
/* 2 */
margin-bottom: @divider-margin-vertical;
}
/* Add margin if adjacent element */
* + [class*='uk-divider'] { margin-top: @divider-margin-vertical; }
/* Icon
========================================================================== */
.uk-divider-icon {
position: relative;
height: @divider-icon-height;
.svg-fill(@internal-divider-icon-image, "#000", @divider-icon-color);
background-repeat: no-repeat;
background-position: 50% 50%;
.hook-divider-icon();
}
.uk-divider-icon::before,
.uk-divider-icon::after {
content: "";
position: absolute;
top: @divider-icon-line-top;
max-width: ~'calc(50% - (@{divider-icon-width} / 2))';
border-bottom: @divider-icon-line-border-width solid @divider-icon-line-border;
.hook-divider-icon-line();
}
.uk-divider-icon::before {
$(endSide): ~'calc(50% + (@{divider-icon-width} / 2))';
width: @divider-icon-line-width;
.hook-divider-icon-line-$(startSide)();
}
.uk-divider-icon::after {
$(startSide): ~'calc(50% + (@{divider-icon-width} / 2))';
width: @divider-icon-line-width;
.hook-divider-icon-line-$(endSide)();
}
/* Small
========================================================================== */
/*
* 1. Fix height because of `inline-block`
* 2. Using ::after and inline-block to make `text-align` work
*/
/* 1 */
.uk-divider-small { line-height: 0; }
/* 2 */
.uk-divider-small::after {
content: "";
display: inline-block;
width: @divider-small-width;
max-width: 100%;
border-top: @divider-small-border-width solid @divider-small-border;
vertical-align: top;
.hook-divider-small();
}
/* Vertical
========================================================================== */
.uk-divider-vertical {
width: max-content;
height: @divider-vertical-height;
margin-$(startSide): auto;
margin-$(endSide): auto;
border-$(startSide): @divider-vertical-border-width solid @divider-vertical-border;
.hook-divider-vertical();
}
// Hooks
// ========================================================================
.hook-divider-misc();
.hook-divider-icon() {}
.hook-divider-icon-line() {}
.hook-divider-icon-line-$(startSide)() {}
.hook-divider-icon-line-$(endSide)() {}
.hook-divider-small() {}
.hook-divider-vertical() {}
.hook-divider-misc() {}
// Inverse
// ========================================================================
@inverse-divider-icon-color: @inverse-global-border;
@inverse-divider-icon-line-border: @inverse-global-border;
@inverse-divider-small-border: @inverse-global-border;
@inverse-divider-vertical-border: @inverse-global-border;
.hook-inverse() {
.uk-divider-icon {
.svg-fill(@internal-divider-icon-image, "#000", @inverse-divider-icon-color);
.hook-inverse-divider-icon();
}
.uk-divider-icon::before,
.uk-divider-icon::after {
border-bottom-color: @inverse-divider-icon-line-border;
.hook-inverse-divider-icon-line();
}
.uk-divider-small::after {
border-top-color: @inverse-divider-small-border;
.hook-inverse-divider-small();
}
.uk-divider-vertical {
border-$(startSide)-color: @inverse-divider-vertical-border;
.hook-inverse-divider-vertical();
}
}
.hook-inverse-divider-icon() {}
.hook-inverse-divider-icon-line() {}
.hook-inverse-divider-small() {}
.hook-inverse-divider-vertical() {}
// Name: List
// Description: Styles for lists
//
// Component: `uk-list`
//
// Modifiers: `uk-list-disc`
// `uk-list-circle`
// `uk-list-square`
// `uk-list-decimal`
// `uk-list-hyphen`
// `uk-list-muted`
// `uk-list-emphasis`
// `uk-list-primary`
// `uk-list-secondary`
// `uk-list-bullet`
// `uk-list-divider`
// `uk-list-striped`
// `uk-list-large`
// `uk-list-collapse`
//
// ========================================================================
// Variables
// ========================================================================
@list-margin-top: @global-small-margin;
@list-padding-$(startSide): 30px;
@list-marker-height: (@global-line-height * 1em);
@list-muted-color: @global-muted-color;
@list-emphasis-color: @global-emphasis-color;
@list-primary-color: @global-primary-background;
@list-secondary-color: @global-secondary-background;
@list-bullet-icon-color: @global-color;
@list-divider-margin-top: @global-small-margin;
@list-divider-border-width: @global-border-width;
@list-divider-border: @global-border;
@list-striped-padding-vertical: @global-small-margin;
@list-striped-padding-horizontal: @global-small-margin;
@list-striped-background: @global-muted-background;
@list-large-margin-top: @global-margin;
@list-large-divider-margin-top: @global-margin;
@list-large-striped-padding-vertical: @global-margin;
@list-large-striped-padding-horizontal: @global-small-margin;
@internal-list-bullet-image: "../../images/backgrounds/list-bullet.svg";
/* ========================================================================
Component: List
========================================================================== */
.uk-list {
padding: 0;
list-style: none;
}
/*
* Avoid column break within the list item, when using `column-count`
*/
.uk-list > * { break-inside: avoid-column; }
/*
* Remove margin from the last-child
*/
.uk-list > * > :last-child { margin-bottom: 0; }
/*
* Style
*/
.uk-list > :nth-child(n+2),
.uk-list > * > ul { margin-top: @list-margin-top; }
/* Marker modifiers
* Moving `::marker` inside `::before` to style it differently
* To style the `::marker` is currently only supported in Firefox and Safari
========================================================================== */
.uk-list-disc > *,
.uk-list-circle > *,
.uk-list-square > *,
.uk-list-decimal > *,
.uk-list-hyphen > * { padding-$(startSide): @list-padding-$(startSide); }
/*
* Type modifiers
*/
.uk-list-decimal { counter-reset: decimal; }
.uk-list-decimal > * { counter-increment: decimal; }
.uk-list-disc > ::before,
.uk-list-circle > ::before,
.uk-list-square > ::before,
.uk-list-decimal > ::before,
.uk-list-hyphen > ::before {
content: "";
position: relative;
$(startSide): -@list-padding-$(startSide);
width: @list-padding-$(startSide);
height: @list-marker-height;
margin-bottom: -@list-marker-height;
display: list-item;
list-style-position: inside;
text-align: $(endSide);
}
.uk-list-disc > ::before { list-style-type: disc; }
.uk-list-circle > ::before { list-style-type: circle; }
.uk-list-square > ::before { list-style-type: square; }
.uk-list-decimal > ::before { content: counter(decimal, decimal) '\200A.\00A0'; }
.uk-list-hyphen > ::before { content: '–\00A0\00A0'; }
/*
* Color modifiers
*/
.uk-list-muted > ::before { color: @list-muted-color !important; }
.uk-list-emphasis > ::before { color: @list-emphasis-color !important; }
.uk-list-primary > ::before { color: @list-primary-color !important; }
.uk-list-secondary > ::before { color: @list-secondary-color !important; }
/* Image bullet modifier
========================================================================== */
.uk-list-bullet > * { padding-$(startSide): @list-padding-$(startSide); }
.uk-list-bullet > ::before {
content: "";
display: list-item;
position: relative;
$(startSide): -@list-padding-$(startSide);
width: @list-padding-$(startSide);
height: @list-marker-height;
margin-bottom: -@list-marker-height;
.svg-fill(@internal-list-bullet-image, "#000", @list-bullet-icon-color);
background-repeat: no-repeat;
background-position: 50% 50%;
}
/* Style modifiers
========================================================================== */
/*
* Divider
*/
.uk-list-divider > :nth-child(n+2) {
margin-top: @list-divider-margin-top;
padding-top: @list-divider-margin-top;
border-top: @list-divider-border-width solid @list-divider-border;
.hook-list-divider();
}
/*
* Striped
*/
.uk-list-striped > * {
padding: @list-striped-padding-vertical @list-striped-padding-horizontal;
.hook-list-striped();
}
.uk-list-striped > :nth-of-type(odd) { background: @list-striped-background; }
.uk-list-striped > :nth-child(n+2) { margin-top: 0; }
/* Size modifier
========================================================================== */
.uk-list-large > :nth-child(n+2),
.uk-list-large > * > ul { margin-top: @list-large-margin-top; }
.uk-list-collapse > :nth-child(n+2),
.uk-list-collapse > * > ul { margin-top: 0; }
/*
* Divider
*/
.uk-list-large.uk-list-divider > :nth-child(n+2) {
margin-top: @list-large-divider-margin-top;
padding-top: @list-large-divider-margin-top;
}
.uk-list-collapse.uk-list-divider > :nth-child(n+2) {
margin-top: 0;
padding-top: 0;
}
/*
* Striped
*/
.uk-list-large.uk-list-striped > * { padding: @list-large-striped-padding-vertical @list-large-striped-padding-horizontal; }
.uk-list-collapse.uk-list-striped > * {
padding-top: 0;
padding-bottom: 0;
}
.uk-list-large.uk-list-striped > :nth-child(n+2),
.uk-list-collapse.uk-list-striped > :nth-child(n+2) { margin-top: 0; }
// Hooks
// ========================================================================
.hook-list-misc();
.hook-list-divider() {}
.hook-list-striped() {}
.hook-list-misc() {}
// Inverse
// ========================================================================
@inverse-list-muted-color: @inverse-global-muted-color;
@inverse-list-emphasis-color: @inverse-global-emphasis-color;
@inverse-list-primary-color: @inverse-global-primary-background;
@inverse-list-secondary-color: @inverse-global-primary-background;
@inverse-list-divider-border: @inverse-global-border;
@inverse-list-striped-background: @inverse-global-muted-background;
@inverse-list-bullet-icon-color: @inverse-global-color;
.hook-inverse() {
.uk-list-muted > ::before { color: @inverse-list-muted-color !important; }
.uk-list-emphasis > ::before { color: @inverse-list-emphasis-color !important; }
.uk-list-primary > ::before { color: @inverse-list-primary-color !important; }
.uk-list-secondary > ::before { color: @inverse-list-secondary-color !important; }
.uk-list-bullet > ::before {
.svg-fill(@internal-list-bullet-image, "#000", @inverse-list-bullet-icon-color);
}
.uk-list-divider > :nth-child(n+2) {
border-top-color: @inverse-list-divider-border;
.hook-inverse-list-divider();
}
.uk-list-striped > * {
.hook-inverse-list-striped();
}
.uk-list-striped > :nth-of-type(odd) { background-color: @inverse-list-striped-background; }
}
.hook-inverse-list-divider() {}
.hook-inverse-list-striped() {}
// Name: Description list
// Description: Styles for description lists
//
// Component: `uk-description-list`
//
// Modifiers: `uk-description-list-divider`
//
// ========================================================================
// Variables
// ========================================================================
@description-list-term-color: @global-emphasis-color;
@description-list-term-margin-top: @global-margin;
@description-list-divider-term-margin-top: @global-margin;
@description-list-divider-term-border-width: @global-border-width;
@description-list-divider-term-border: @global-border;
/* ========================================================================
Component: Description list
========================================================================== */
/*
* Term
*/
.uk-description-list > dt {
color: @description-list-term-color;
.hook-description-list-term();
}
.uk-description-list > dt:nth-child(n+2) {
margin-top: @description-list-term-margin-top;
}
/*
* Description
*/
.uk-description-list > dd {
.hook-description-list-description();
}
/* Style modifier
========================================================================== */
/*
* Line
*/
.uk-description-list-divider > dt:nth-child(n+2) {
margin-top: @description-list-divider-term-margin-top;
padding-top: @description-list-divider-term-margin-top;
border-top: @description-list-divider-term-border-width solid @description-list-divider-term-border;
.hook-description-list-divider-term();
}
// Hooks
// ========================================================================
.hook-description-list-misc();
.hook-description-list-term() {}
.hook-description-list-description() {}
.hook-description-list-divider-term() {}
.hook-description-list-misc() {}
// Name: Table
// Description: Styles for tables
//
// Component: `uk-table`
//
// Modifiers: `uk-table-middle`
// `uk-table-divider`
// `uk-table-striped`
// `uk-table-hover`
// `uk-table-small`
// `uk-table-justify`
// `uk-table-shrink`
// `uk-table-expand`
// `uk-table-link`
// `uk-table-responsive`
//
// States: `uk-active`
//
// ========================================================================
// Variables
// ========================================================================
@table-margin-vertical: @global-margin;
@table-cell-padding-vertical: 16px;
@table-cell-padding-horizontal: 12px;
@table-header-cell-font-size: @global-font-size;
@table-header-cell-font-weight: bold;
@table-header-cell-color: @global-color;
@table-footer-font-size: @global-small-font-size;
@table-caption-font-size: @global-small-font-size;
@table-caption-color: @global-muted-color;
@table-row-active-background: #ffd;
@table-divider-border-width: @global-border-width;
@table-divider-border: @global-border;
@table-striped-row-background: @global-muted-background;
@table-hover-row-background: @table-row-active-background;
@table-small-cell-padding-vertical: 10px;
@table-small-cell-padding-horizontal: 12px;
@table-large-cell-padding-vertical: 22px;
@table-large-cell-padding-horizontal: 12px;
@table-expand-min-width: 150px;
/* ========================================================================
Component: Table
========================================================================== */
/*
* 1. Remove most spacing between table cells.
* 2. Behave like a block element
* 3. Style
*/
.uk-table {
/* 1 */
border-collapse: collapse;
border-spacing: 0;
/* 2 */
width: 100%;
/* 3 */
margin-bottom: @table-margin-vertical;
.hook-table();
}
/* Add margin if adjacent element */
* + .uk-table { margin-top: @table-margin-vertical; }
/* Header cell
========================================================================== */
/*
* 1. Style
*/
.uk-table th {
padding: @table-cell-padding-vertical @table-cell-padding-horizontal;
text-align: $(startSide);
vertical-align: bottom;
/* 1 */
font-size: @table-header-cell-font-size;
font-weight: @table-header-cell-font-weight;
color: @table-header-cell-color;
.hook-table-header-cell();
}
/* Cell
========================================================================== */
.uk-table td {
padding: @table-cell-padding-vertical @table-cell-padding-horizontal;
vertical-align: top;
.hook-table-cell();
}
/*
* Remove margin from the last-child
*/
.uk-table td > :last-child { margin-bottom: 0; }
/* Footer
========================================================================== */
.uk-table tfoot {
font-size: @table-footer-font-size;
.hook-table-footer();
}
/* Caption
========================================================================== */
.uk-table caption {
font-size: @table-caption-font-size;
text-align: $(startSide);
color: @table-caption-color;
.hook-table-caption();
}
/* Alignment modifier
========================================================================== */
.uk-table-middle,
.uk-table-middle td { vertical-align: middle !important; }
/* Style modifiers
========================================================================== */
/*
* Divider
*/
.uk-table-divider > tr:not(:first-child),
.uk-table-divider > :not(:first-child) > tr,
.uk-table-divider > :first-child > tr:not(:first-child) {
border-top: @table-divider-border-width solid @table-divider-border;
.hook-table-divider();
}
/*
* Striped
*/
.uk-table-striped > tr:nth-of-type(odd),
.uk-table-striped tbody tr:nth-of-type(odd) {
background: @table-striped-row-background;
.hook-table-striped();
}
/*
* Hover
*/
.uk-table-hover > tr:hover,
.uk-table-hover tbody tr:hover {
background: @table-hover-row-background;
.hook-table-hover();
}
/* Active state
========================================================================== */
.uk-table > tr.uk-active,
.uk-table tbody tr.uk-active {
background: @table-row-active-background;
.hook-table-row-active();
}
/* Size modifier
========================================================================== */
.uk-table-small th,
.uk-table-small td {
padding: @table-small-cell-padding-vertical @table-small-cell-padding-horizontal;
.hook-table-small();
}
.uk-table-large th,
.uk-table-large td {
padding: @table-large-cell-padding-vertical @table-large-cell-padding-horizontal;
.hook-table-large();
}
/* Justify modifier
========================================================================== */
.uk-table-justify th:first-child,
.uk-table-justify td:first-child { padding-$(startSide): 0; }
.uk-table-justify th:last-child,
.uk-table-justify td:last-child { padding-$(endSide): 0; }
/* Cell size modifier
========================================================================== */
.uk-table-shrink { width: 1px; }
.uk-table-expand { min-width: @table-expand-min-width; }
/* Cell link modifier
========================================================================== */
/*
* Does not work with `uk-table-justify` at the moment
*/
.uk-table-link { padding: 0 !important; }
.uk-table-link > a {
display: block;
padding: @table-cell-padding-vertical @table-cell-padding-horizontal;
}
.uk-table-small .uk-table-link > a { padding: @table-small-cell-padding-vertical @table-small-cell-padding-horizontal; }
/* Responsive table
========================================================================== */
/* Phone landscape and smaller */
@media (max-width: @breakpoint-small-max) {
.uk-table-responsive,
.uk-table-responsive tbody,
.uk-table-responsive th,
.uk-table-responsive td,
.uk-table-responsive tr { display: block; }
.uk-table-responsive thead { display: none; }
.uk-table-responsive th,
.uk-table-responsive td {
width: auto !important;
max-width: none !important;
min-width: 0 !important;
overflow: visible !important;
white-space: normal !important;
}
.uk-table-responsive th:not(:first-child):not(.uk-table-link),
.uk-table-responsive td:not(:first-child):not(.uk-table-link),
.uk-table-responsive .uk-table-link:not(:first-child) > a { padding-top: round((@table-cell-padding-vertical / 3)) !important; }
.uk-table-responsive th:not(:last-child):not(.uk-table-link),
.uk-table-responsive td:not(:last-child):not(.uk-table-link),
.uk-table-responsive .uk-table-link:not(:last-child) > a { padding-bottom: round((@table-cell-padding-vertical / 3)) !important; }
.uk-table-justify.uk-table-responsive th,
.uk-table-justify.uk-table-responsive td {
padding-$(startSide): 0;
padding-$(endSide): 0;
}
}
// Hooks
// ========================================================================
.hook-table-misc();
.hook-table() {}
.hook-table-header-cell() {}
.hook-table-cell() {}
.hook-table-footer() {}
.hook-table-caption() {}
.hook-table-row-active() {}
.hook-table-divider() {}
.hook-table-striped() {}
.hook-table-hover() {}
.hook-table-small() {}
.hook-table-large() {}
.hook-table-misc() {}
// Inverse
// ========================================================================
@inverse-table-header-cell-color: @inverse-global-color;
@inverse-table-caption-color: @inverse-global-muted-color;
@inverse-table-row-active-background: fadeout(@inverse-global-muted-background, 2%);
@inverse-table-divider-border: @inverse-global-border;
@inverse-table-striped-row-background: @inverse-global-muted-background;
@inverse-table-hover-row-background: @inverse-table-row-active-background;
.hook-inverse() {
.uk-table th {
color: @inverse-table-header-cell-color;
.hook-inverse-table-header-cell();
}
.uk-table caption {
color: @inverse-table-caption-color;
.hook-inverse-table-caption();
}
.uk-table > tr.uk-active,
.uk-table tbody tr.uk-active {
background: @inverse-table-row-active-background;
.hook-inverse-table-row-active();
}
.uk-table-divider > tr:not(:first-child),
.uk-table-divider > :not(:first-child) > tr,
.uk-table-divider > :first-child > tr:not(:first-child) {
border-top-color: @inverse-table-divider-border;
.hook-inverse-table-divider();
}
.uk-table-striped > tr:nth-of-type(odd),
.uk-table-striped tbody tr:nth-of-type(odd) {
background: @inverse-table-striped-row-background;
.hook-inverse-table-striped();
}
.uk-table-hover > tr:hover,
.uk-table-hover tbody tr:hover {
background: @inverse-table-hover-row-background;
.hook-inverse-table-hover();
}
}
.hook-inverse-table-header-cell() {}
.hook-inverse-table-caption() {}
.hook-inverse-table-row-active() {}
.hook-inverse-table-divider() {}
.hook-inverse-table-striped() {}
.hook-inverse-table-hover() {}
// Name: Icon
// Description: Component to create icons
//
// Component: `uk-icon`
//
// Modifiers: `uk-icon-image`
// `uk-icon-link`
// `uk-icon-button`
//
// States: `uk-preserve`
//
// ========================================================================
// Variables
// ========================================================================
@icon-image-size: 20px;
@icon-link-color: @global-muted-color;
@icon-link-hover-color: @global-color;
@icon-link-active-color: darken(@global-color, 5%);
@icon-button-size: 36px;
@icon-button-border-radius: 500px;
@icon-button-background: @global-muted-background;
@icon-button-color: @global-muted-color;
@icon-button-hover-background: darken(@icon-button-background, 5%);
@icon-button-hover-color: @global-color;
@icon-button-active-background: darken(@icon-button-background, 10%);
@icon-button-active-color: @global-color;
/* ========================================================================
Component: Icon
========================================================================== */
/*
* Note: 1. - 7. is required for `button` elements. Needed for Close and Form Icon component.
* 1. Remove margins in Chrome, Safari and Opera.
* 2. Remove borders for `button`.
* 3. Remove border-radius in Chrome.
* 4. Address `overflow` set to `hidden` in IE.
* 5. Correct `font` properties and `color` not being inherited for `button`.
* 6. Remove the inheritance of text transform in Edge, Firefox, and IE.
* 7. Remove default `button` padding and background color
* 8. Style
* 9. Fill all SVG elements with the current text color if no `fill` attribute is set
* 10. Let the container fit the height of the icon
*/
.uk-icon {
/* 1 */
margin: 0;
/* 2 */
border: none;
/* 3 */
border-radius: 0;
/* 4 */
overflow: visible;
/* 5 */
font: inherit;
color: inherit;
/* 6 */
text-transform: none;
/* 7. */
padding: 0;
background-color: transparent;
/* 8 */
display: inline-block;
/* 9 */
fill: currentcolor;
/* 10 */
line-height: 0;
}
/* Required for `button`. */
button.uk-icon:not(:disabled) { cursor: pointer; }
/*
* Remove the inner border and padding in Firefox.
*/
.uk-icon::-moz-focus-inner {
border: 0;
padding: 0;
}
/*
* Set the fill and stroke color of all SVG elements to the current text color
*/
.uk-icon:not(.uk-preserve) [fill*='#']:not(.uk-preserve) { fill: currentcolor; }
.uk-icon:not(.uk-preserve) [stroke*='#']:not(.uk-preserve) { stroke: currentcolor; }
/*
* Fix Firefox blurry SVG rendering: https://bugzilla.mozilla.org/show_bug.cgi?id=1046835
*/
.uk-icon > * { transform: translate(0,0); }
/* Image modifier
========================================================================== */
/*
* Display images in icon dimensions
* 1. Required for `span` with background image
* 2. Required for `image`
*/
.uk-icon-image {
width: @icon-image-size;
height: @icon-image-size;
/* 1 */
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
/* 2 */
object-fit: scale-down;
max-width: none;
}
/* Style modifiers
========================================================================== */
/*
* Link
* 1. Allow text within link
*/
.uk-icon-link {
color: @icon-link-color;
/* 1 */
text-decoration: none !important;
.hook-icon-link();
}
.uk-icon-link:hover {
color: @icon-link-hover-color;
.hook-icon-link-hover();
}
/* OnClick + Active */
.uk-icon-link:active,
.uk-active > .uk-icon-link {
color: @icon-link-active-color;
.hook-icon-link-active();
}
/*
* Button
* 1. Center icon vertically and horizontally
*/
.uk-icon-button {
box-sizing: border-box;
width: @icon-button-size;
height: @icon-button-size;
border-radius: @icon-button-border-radius;
background: @icon-button-background;
color: @icon-button-color;
vertical-align: middle;
/* 1 */
display: inline-flex;
justify-content: center;
align-items: center;
.hook-icon-button();
}
/* Hover */
.uk-icon-button:hover {
background-color: @icon-button-hover-background;
color: @icon-button-hover-color;
.hook-icon-button-hover();
}
/* OnClick + Active */
.uk-icon-button:active,
.uk-active > .uk-icon-button {
background-color: @icon-button-active-background;
color: @icon-button-active-color;
.hook-icon-button-active();
}
// Hooks
// ========================================================================
.hook-icon-misc();
.hook-icon-link() {}
.hook-icon-link-hover() {}
.hook-icon-link-active() {}
.hook-icon-button() {}
.hook-icon-button-hover() {}
.hook-icon-button-active() {}
.hook-icon-misc() {}
// Inverse
// ========================================================================
@inverse-icon-link-color: @inverse-global-muted-color;
@inverse-icon-link-hover-color: @inverse-global-color;
@inverse-icon-link-active-color: @inverse-global-color;
@inverse-icon-button-background: @inverse-global-muted-background;
@inverse-icon-button-color: @inverse-global-muted-color;
@inverse-icon-button-hover-background: fadein(@inverse-icon-button-background, 5%);
@inverse-icon-button-hover-color: @inverse-global-color;
@inverse-icon-button-active-background: fadein(@inverse-icon-button-background, 10%);
@inverse-icon-button-active-color: @inverse-global-color;
.hook-inverse() {
//
// Link
//
.uk-icon-link {
color: @inverse-icon-link-color;
.hook-inverse-icon-link();
}
.uk-icon-link:hover {
color: @inverse-icon-link-hover-color;
.hook-inverse-icon-link-hover();
}
.uk-icon-link:active,
.uk-active > .uk-icon-link {
color: @inverse-icon-link-active-color;
.hook-inverse-icon-link-active();
}
//
// Button
//
.uk-icon-button {
background-color: @inverse-icon-button-background;
color: @inverse-icon-button-color;
.hook-inverse-icon-button();
}
.uk-icon-button:hover {
background-color: @inverse-icon-button-hover-background;
color: @inverse-icon-button-hover-color;
.hook-inverse-icon-button-hover();
}
.uk-icon-button:active {
background-color: @inverse-icon-button-active-background;
color: @inverse-icon-button-active-color;
.hook-inverse-icon-button-active();
}
}
.hook-inverse-icon-link() {}
.hook-inverse-icon-link-hover() {}
.hook-inverse-icon-link-active() {}
.hook-inverse-icon-button() {}
.hook-inverse-icon-button-hover() {}
.hook-inverse-icon-button-active() {}
// Name: Form Range
// Description: Styles for the range input type
//
// Component: `uk-range`
//
// ========================================================================
// Variables
// ========================================================================
@form-range-track-height: 3px;
@form-range-track-background: darken(@global-muted-background, 5%);
@form-range-track-focus-background: darken(@form-range-track-background, 5%);
@form-range-thumb-height: 15px;
@form-range-thumb-width: @form-range-thumb-height;
@form-range-thumb-border-radius: 500px;
@form-range-thumb-background: @global-color;
/* ========================================================================
Component: Form Range
========================================================================== */
/*
* 1. Remove default style.
* 2. Define consistent box sizing.
* 3. Remove `margin` in all browsers.
* 4. Align to the center of the line box.
* 5. Prevent content overflow if a fixed width is used.
* 6. Take the full width.
* 7. Remove white background in Chrome.
*/
.uk-range {
/* 1 */
-webkit-appearance: none;
/* 2 */
box-sizing: border-box;
/* 3 */
margin: 0;
/* 4 */
vertical-align: middle;
/* 5 */
max-width: 100%;
/* 6 */
width: 100%;
/* 7 */
background: transparent;
.hook-form-range();
}
/* Focus */
.uk-range:focus { outline: none; }
.uk-range::-moz-focus-outer { border: none; }
/*
* Improves consistency of cursor style for clickable elements
*/
.uk-range:not(:disabled)::-webkit-slider-thumb { cursor: pointer; }
.uk-range:not(:disabled)::-moz-range-thumb { cursor: pointer; }
/*
* Track
* 1. Safari doesn't have a focus state. Using active instead.
*/
/* Webkit */
.uk-range::-webkit-slider-runnable-track {
height: @form-range-track-height;
background: @form-range-track-background;
.hook-form-range-track();
}
.uk-range:focus::-webkit-slider-runnable-track,
/* 1 */
.uk-range:active::-webkit-slider-runnable-track {
background: @form-range-track-focus-background;
.hook-form-range-track-focus();
}
/* Firefox */
.uk-range::-moz-range-track {
height: @form-range-track-height;
background: @form-range-track-background;
.hook-form-range-track();
}
.uk-range:focus::-moz-range-track {
background: @form-range-track-focus-background;
.hook-form-range-track-focus();
}
/*
* Thumb
* 1. Reset
* 2. Style
*/
/* Webkit */
.uk-range::-webkit-slider-thumb {
/* 1 */
-webkit-appearance: none;
margin-top: (floor((@form-range-thumb-height / 2)) * -1);
/* 2 */
height: @form-range-thumb-height;
width: @form-range-thumb-width;
border-radius: @form-range-thumb-border-radius;
background: @form-range-thumb-background;
.hook-form-range-thumb();
}
/* Firefox */
.uk-range::-moz-range-thumb {
/* 1 */
border: none;
/* 2 */
height: @form-range-thumb-height;
width: @form-range-thumb-width;
margin-top: (floor((@form-range-thumb-height / 2)) * -1);
border-radius: @form-range-thumb-border-radius;
background: @form-range-thumb-background;
.hook-form-range-thumb();
}
// Hooks
// ========================================================================
.hook-form-range-misc();
.hook-form-range() {}
.hook-form-range-track() {}
.hook-form-range-track-focus() {}
.hook-form-range-thumb() {}
.hook-form-range-misc() {}
// Name: Form
// Description: Styles for forms
//
// Component: `uk-form-*`
// `uk-input`
// `uk-select`
// `uk-textarea`
// `uk-radio`
// `uk-checkbox`
// `uk-legend`
// `uk-fieldset`
//
// Sub-objects: `uk-form-custom`
// `uk-form-stacked`
// `uk-form-horizontal`
// `uk-form-label`
// `uk-form-controls`
// `uk-form-icon`
// `uk-form-icon-flip`
//
// Modifiers: `uk-form-small`
// `uk-form-large`
// `uk-form-danger`
// `uk-form-success`
// `uk-form-blank`
// `uk-form-width-xsmall`
// `uk-form-width-small`
// `uk-form-width-medium`
// `uk-form-width-large`
// `uk-form-controls-text`
//
// ========================================================================
// Variables
// ========================================================================
@form-height: @global-control-height;
@form-line-height: @form-height;
@form-padding-horizontal: 10px;
@form-padding-vertical: round(@form-padding-horizontal * 0.6);
@form-background: @global-muted-background;
@form-color: @global-color;
@form-focus-background: darken(@form-background, 5%);
@form-focus-color: @global-color;
@form-disabled-background: @global-muted-background;
@form-disabled-color: @global-muted-color;
@form-placeholder-color: @global-muted-color;
@form-small-height: @global-control-small-height;
@form-small-padding-horizontal: 8px;
@form-small-padding-vertical: round(@form-small-padding-horizontal * 0.6);
@form-small-line-height: @form-small-height;
@form-small-font-size: @global-small-font-size;
@form-large-height: @global-control-large-height;
@form-large-padding-horizontal: 12px;
@form-large-padding-vertical: round(@form-large-padding-horizontal * 0.6);
@form-large-line-height: @form-large-height;
@form-large-font-size: @global-medium-font-size;
@form-danger-color: @global-danger-background;
@form-success-color: @global-success-background;
@form-width-xsmall: 50px;
@form-width-small: 130px;
@form-width-medium: 200px;
@form-width-large: 500px;
@form-select-padding-$(endSide): 20px;
@form-select-icon-color: @global-color;
@form-select-option-color: @global-color;
@form-select-disabled-icon-color: @global-muted-color;
@form-datalist-padding-$(endSide): 20px;
@form-datalist-icon-color: @global-color;
@form-radio-size: 16px;
@form-radio-margin-top: -4px;
@form-radio-background: darken(@global-muted-background, 5%);
@form-radio-focus-background: darken(@form-radio-background, 5%);
@form-radio-checked-background: @global-primary-background;
@form-radio-checked-icon-color: @global-inverse-color;
@form-radio-checked-focus-background: darken(@global-primary-background, 10%);
@form-radio-disabled-background: @global-muted-background;
@form-radio-disabled-icon-color: @global-muted-color;
@form-legend-font-size: @global-large-font-size;
@form-legend-line-height: 1.4;
@form-stacked-margin-bottom: @global-small-margin;
@form-horizontal-label-width: 200px;
@form-horizontal-label-margin-top: 7px;
@form-horizontal-controls-margin-$(startSide): 215px;
@form-horizontal-controls-text-padding-top: 7px;
@form-icon-width: @form-height;
@form-icon-color: @global-muted-color;
@form-icon-hover-color: @global-color;
@internal-form-select-image: "../../images/backgrounds/form-select.svg";
@internal-form-datalist-image: "../../images/backgrounds/form-datalist.svg";
@internal-form-radio-image: "../../images/backgrounds/form-radio.svg";
@internal-form-checkbox-image: "../../images/backgrounds/form-checkbox.svg";
@internal-form-checkbox-indeterminate-image: "../../images/backgrounds/form-checkbox-indeterminate.svg";
/* ========================================================================
Component: Form
========================================================================== */
/*
* 1. Define consistent box sizing.
* Default is `content-box` with following exceptions set to `border-box`
* `select`, `input[type="checkbox"]` and `input[type="radio"]`
* `input[type="search"]` in Chrome, Safari and Opera
* `input[type="color"]` in Firefox
* 2. Address margins set differently in Firefox/IE and Chrome/Safari/Opera.
* 3. Remove `border-radius` in iOS.
* 4. Change font properties to `inherit` in all browsers.
*/
.uk-input,
.uk-select,
.uk-textarea,
.uk-radio,
.uk-checkbox {
/* 1 */
box-sizing: border-box;
/* 2 */
margin: 0;
/* 3 */
border-radius: 0;
/* 4 */
font: inherit;
}
/*
* Show the overflow in Edge.
*/
.uk-input { overflow: visible; }
/*
* Remove the inheritance of text transform in Firefox.
*/
.uk-select { text-transform: none; }
/*
* 1. Change font properties to `inherit` in all browsers
* 2. Don't inherit the `font-weight` and use `bold` instead.
* NOTE: Both declarations don't work in Chrome, Safari and Opera.
*/
.uk-select optgroup {
/* 1 */
font: inherit;
/* 2 */
font-weight: bold;
}
/*
* Remove the default vertical scrollbar in IE 10+.
*/
.uk-textarea { overflow: auto; }
/*
* Remove the inner padding and cancel buttons in Chrome on OS X and Safari on OS X.
*/
.uk-input[type="search"]::-webkit-search-cancel-button,
.uk-input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
/*
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
.uk-input[type="number"]::-webkit-inner-spin-button,
.uk-input[type="number"]::-webkit-outer-spin-button { height: auto; }
/*
* Removes placeholder transparency in Firefox.
*/
.uk-input::-moz-placeholder,
.uk-textarea::-moz-placeholder { opacity: 1; }
/*
* Improves consistency of cursor style for clickable elements
*/
.uk-radio:not(:disabled),
.uk-checkbox:not(:disabled) { cursor: pointer; }
/*
* Define consistent border, margin, and padding.
*/
.uk-fieldset {
border: none;
margin: 0;
padding: 0;
}
/* Input, select and textarea
* Allowed: `text`, `password`, `datetime-local`, `date`, `month`,
`time`, `week`, `number`, `email`, `url`, `search`, `tel`, `color`
* Disallowed: `range`, `radio`, `checkbox`, `file`, `submit`, `reset` and `image`
========================================================================== */
/*
* Remove default style in iOS.
*/
.uk-input,
.uk-textarea { -webkit-appearance: none; }
/*
* 1. Prevent content overflow if a fixed width is used
* 2. Take the full width
* 3. Reset default
* 4. Style
*/
.uk-input,
.uk-select,
.uk-textarea {
/* 1 */
max-width: 100%;
/* 2 */
width: 100%;
/* 3 */
border: 0 none;
/* 4 */
padding: 0 @form-padding-horizontal;
background: @form-background;
color: @form-color;
.hook-form();
}
/*
* Single-line
* 1. Allow any element to look like an `input` or `select` element
* 2. Make sure line-height is not larger than height
* Also needed to center the text vertically
*/
.uk-input,
.uk-select:not([multiple]):not([size]) {
height: @form-height;
vertical-align: middle;
/* 1 */
display: inline-block;
.hook-form-single-line();
}
/* 2 */
.uk-input:not(input),
.uk-select:not(select) { line-height: @form-line-height; }
/*
* Multi-line
*/
.uk-select[multiple],
.uk-select[size],
.uk-textarea {
padding-top: @form-padding-vertical;
padding-bottom: @form-padding-vertical;
vertical-align: top;
.hook-form-multi-line();
}
.uk-select[multiple],
.uk-select[size] { resize: vertical; }
/* Focus */
.uk-input:focus,
.uk-select:focus,
.uk-textarea:focus {
outline: none;
background-color: @form-focus-background;
color: @form-focus-color;
.hook-form-focus();
}
/* Disabled */
.uk-input:disabled,
.uk-select:disabled,
.uk-textarea:disabled {
background-color: @form-disabled-background;
color: @form-disabled-color;
.hook-form-disabled();
}
/*
* Placeholder
*/
.uk-input::placeholder { color: @form-placeholder-color; }
.uk-textarea::placeholder { color: @form-placeholder-color; }
/* Style modifier (`uk-input`, `uk-select` and `uk-textarea`)
========================================================================== */
/*
* Small
*/
.uk-form-small { font-size: @form-small-font-size; }
/* Single-line */
.uk-form-small:not(textarea):not([multiple]):not([size]) {
height: @form-small-height;
padding-$(startSide): @form-small-padding-horizontal;
padding-$(endSide): @form-small-padding-horizontal;
}
/* Multi-line */
textarea.uk-form-small,
[multiple].uk-form-small,
[size].uk-form-small { padding: @form-small-padding-vertical @form-small-padding-horizontal; }
.uk-form-small:not(select):not(input):not(textarea) { line-height: @form-small-line-height; }
/*
* Large
*/
.uk-form-large { font-size: @form-large-font-size; }
/* Single-line */
.uk-form-large:not(textarea):not([multiple]):not([size]) {
height: @form-large-height;
padding-$(startSide): @form-large-padding-horizontal;
padding-$(endSide): @form-large-padding-horizontal;
}
/* Multi-line */
textarea.uk-form-large,
[multiple].uk-form-large,
[size].uk-form-large { padding: @form-large-padding-vertical @form-large-padding-horizontal; }
.uk-form-large:not(select):not(input):not(textarea) { line-height: @form-large-line-height; }
/* Style modifier (`uk-input`, `uk-select` and `uk-textarea`)
========================================================================== */
/*
* Error
*/
.uk-form-danger,
.uk-form-danger:focus {
color: @form-danger-color;
.hook-form-danger();
}
/*
* Success
*/
.uk-form-success,
.uk-form-success:focus {
color: @form-success-color;
.hook-form-success();
}
/*
* Blank
*/
.uk-form-blank {
background: none;
.hook-form-blank();
}
.uk-form-blank:focus {
.hook-form-blank-focus();
}
/* Width modifiers (`uk-input`, `uk-select` and `uk-textarea`)
========================================================================== */
/*
* Fixed widths
* Different widths for mini sized `input` and `select` elements
*/
input.uk-form-width-xsmall { width: @form-width-xsmall; }
select.uk-form-width-xsmall { width: (@form-width-xsmall + 25px); }
.uk-form-width-small { width: @form-width-small; }
.uk-form-width-medium { width: @form-width-medium; }
.uk-form-width-large { width: @form-width-large; }
/* Select
========================================================================== */
/*
* 1. Remove default style. Also works in Firefox
* 2. Style
* 3. Set `color` for options in the select dropdown, because the inherited `color` might be too light.
*/
.uk-select:not([multiple]):not([size]) {
/* 1 */
-webkit-appearance: none;
-moz-appearance: none;
/* 2 */
padding-$(endSide): @form-select-padding-$(endSide);
.svg-fill(@internal-form-select-image, "#000", @form-select-icon-color);
background-repeat: no-repeat;
background-position: 100% 50%;
}
/* 3 */
.uk-select:not([multiple]):not([size]) option { color: @form-select-option-color; }
/*
* Disabled
*/
.uk-select:not([multiple]):not([size]):disabled { .svg-fill(@internal-form-select-image, "#000", @form-select-disabled-icon-color); }
/* Datalist
========================================================================== */
/*
* 1. Remove default style in Chrome
*/
.uk-input[list] {
padding-$(endSide): @form-datalist-padding-$(endSide);
background-repeat: no-repeat;
background-position: 100% 50%;
}
.uk-input[list]:hover,
.uk-input[list]:focus { .svg-fill(@internal-form-datalist-image, "#000", @form-datalist-icon-color); }
/* 1 */
.uk-input[list]::-webkit-calendar-picker-indicator { display: none !important; }
/* Radio and checkbox
========================================================================== */
/*
* 1. Style
* 2. Make box more robust so it clips the child element
* 3. Vertical alignment
* 4. Remove default style
* 5. Fix black background on iOS
* 6. Center icons
*/
.uk-radio,
.uk-checkbox {
/* 1 */
display: inline-block;
height: @form-radio-size;
width: @form-radio-size;
/* 2 */
overflow: hidden;
/* 3 */
margin-top: @form-radio-margin-top;
vertical-align: middle;
/* 4 */
-webkit-appearance: none;
-moz-appearance: none;
/* 5 */
background-color: @form-radio-background;
/* 6 */
background-repeat: no-repeat;
background-position: 50% 50%;
.hook-form-radio();
}
.uk-radio { border-radius: 50%; }
/* Focus */
.uk-radio:focus,
.uk-checkbox:focus {
background-color: @form-radio-focus-background;
outline: none;
.hook-form-radio-focus();
}
/*
* Checked
*/
.uk-radio:checked,
.uk-checkbox:checked,
.uk-checkbox:indeterminate {
background-color: @form-radio-checked-background;
.hook-form-radio-checked();
}
/* Focus */
.uk-radio:checked:focus,
.uk-checkbox:checked:focus,
.uk-checkbox:indeterminate:focus {
background-color: @form-radio-checked-focus-background;
.hook-form-radio-checked-focus();
}
/*
* Icons
*/
.uk-radio:checked { .svg-fill(@internal-form-radio-image, "#000", @form-radio-checked-icon-color); }
.uk-checkbox:checked { .svg-fill(@internal-form-checkbox-image, "#000", @form-radio-checked-icon-color); }
.uk-checkbox:indeterminate { .svg-fill(@internal-form-checkbox-indeterminate-image, "#000", @form-radio-checked-icon-color); }
/*
* Disabled
*/
.uk-radio:disabled,
.uk-checkbox:disabled {
background-color: @form-radio-disabled-background;
.hook-form-radio-disabled();
}
.uk-radio:disabled:checked { .svg-fill(@internal-form-radio-image, "#000", @form-radio-disabled-icon-color); }
.uk-checkbox:disabled:checked { .svg-fill(@internal-form-checkbox-image, "#000", @form-radio-disabled-icon-color); }
.uk-checkbox:disabled:indeterminate { .svg-fill(@internal-form-checkbox-indeterminate-image, "#000", @form-radio-disabled-icon-color); }
/* Legend
========================================================================== */
/*
* Legend
* 1. Behave like block element
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove padding so people aren't caught out if they zero out fieldsets.
* 4. Style
*/
.uk-legend {
/* 1 */
width: 100%;
/* 2 */
color: inherit;
/* 3 */
padding: 0;
/* 4 */
font-size: @form-legend-font-size;
line-height: @form-legend-line-height;
.hook-form-legend();
}
/* Custom controls
========================================================================== */
/*
* 1. Container fits its content
* 2. Create position context
* 3. Prevent content overflow
* 4. Behave like most inline-block elements
*/
.uk-form-custom {
/* 1 */
display: inline-block;
/* 2 */
position: relative;
/* 3 */
max-width: 100%;
/* 4 */
vertical-align: middle;
}
/*
* 1. Position and resize the form control to always cover its container
* 2. Required for Firefox for positioning to the $(startSide)
* 3. Required for Webkit to make `height` work
* 4. Hide controle and show cursor
* 5. Needed for the cursor
* 6. Clip height caused by 5. Needed for Webkit only
*/
.uk-form-custom select,
.uk-form-custom input[type="file"] {
/* 1 */
position: absolute;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
/* 2 */
$(startSide): 0;
/* 3 */
-webkit-appearance: none;
/* 4 */
opacity: 0;
cursor: pointer;
}
.uk-form-custom input[type="file"] {
/* 5 */
font-size: 500px;
/* 6 */
overflow: hidden;
}
/* Label
========================================================================== */
.uk-form-label {
.hook-form-label();
}
/* Layout
========================================================================== */
/*
* Stacked
*/
.uk-form-stacked .uk-form-label {
display: block;
margin-bottom: @form-stacked-margin-bottom;
.hook-form-stacked-label();
}
/*
* Horizontal
*/
/* Tablet portrait and smaller */
@media (max-width: @breakpoint-small-max) {
/* Behave like `uk-form-stacked` */
.uk-form-horizontal .uk-form-label {
display: block;
margin-bottom: @form-stacked-margin-bottom;
.hook-form-stacked-label();
}
}
/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) {
.uk-form-horizontal .uk-form-label {
width: @form-horizontal-label-width;
margin-top: @form-horizontal-label-margin-top;
float: $(startSide);
.hook-form-horizontal-label();
}
.uk-form-horizontal .uk-form-controls { margin-$(startSide): @form-horizontal-controls-margin-$(startSide); }
/* Better vertical alignment if controls are checkboxes and radio buttons with text */
.uk-form-horizontal .uk-form-controls-text { padding-top: @form-horizontal-controls-text-padding-top; }
}
/* Icons
========================================================================== */
/*
* 1. Set position
* 2. Set width
* 3. Center icon vertically and horizontally
* 4. Style
*/
.uk-form-icon {
/* 1 */
position: absolute;
top: 0;
bottom: 0;
$(startSide): 0;
/* 2 */
width: @form-icon-width;
/* 3 */
display: inline-flex;
justify-content: center;
align-items: center;
/* 4 */
color: @form-icon-color;
}
/*
* Required for `a`.
*/
.uk-form-icon:hover { color: @form-icon-hover-color; }
/*
* Make `input` element clickable through icon, e.g. if it's a `span`
*/
.uk-form-icon:not(a):not(button):not(input) { pointer-events: none; }
/*
* Input padding
*/
.uk-form-icon:not(.uk-form-icon-flip) ~ .uk-input { padding-$(startSide): @form-icon-width !important; }
/*
* Position modifier
*/
.uk-form-icon-flip {
$(endSide): 0;
$(startSide): auto;
}
.uk-form-icon-flip ~ .uk-input { padding-$(endSide): @form-icon-width !important; }
// Hooks
// ========================================================================
.hook-form-misc();
.hook-form() {}
.hook-form-single-line() {}
.hook-form-multi-line() {}
.hook-form-focus() {}
.hook-form-disabled() {}
.hook-form-danger() {}
.hook-form-success() {}
.hook-form-blank() {}
.hook-form-blank-focus() {}
.hook-form-radio() {}
.hook-form-radio-focus() {}
.hook-form-radio-checked() {}
.hook-form-radio-checked-focus() {}
.hook-form-radio-disabled() {}
.hook-form-legend() {}
.hook-form-label() {}
.hook-form-stacked-label() {}
.hook-form-horizontal-label() {}
.hook-form-misc() {}
// Inverse
// ========================================================================
@inverse-form-background: @inverse-global-muted-background;
@inverse-form-color: @inverse-global-color;
@inverse-form-focus-background: fadein(@inverse-form-background, 5%);
@inverse-form-focus-color: @inverse-global-color;
@inverse-form-placeholder-color: @inverse-global-muted-color;
@inverse-form-select-icon-color: @inverse-global-color;
@inverse-form-datalist-icon-color: @inverse-global-color;
@inverse-form-radio-background: @inverse-global-muted-background;
@inverse-form-radio-focus-background: fadein(@inverse-form-radio-background, 5%);
@inverse-form-radio-checked-background: @inverse-global-primary-background;
@inverse-form-radio-checked-icon-color: @inverse-global-inverse-color;
@inverse-form-radio-checked-focus-background: fadein(@inverse-global-primary-background, 10%);
@inverse-form-icon-color: @inverse-global-muted-color;
@inverse-form-icon-hover-color: @inverse-global-color;
.hook-inverse() {
.uk-input,
.uk-select,
.uk-textarea {
background-color: @inverse-form-background;
color: @inverse-form-color;
background-clip: padding-box;
.hook-inverse-form();
&:focus {
background-color: @inverse-form-focus-background;
color: @inverse-form-focus-color;
.hook-inverse-form-focus();
}
}
//
// Placeholder
//
.uk-input::placeholder { color: @inverse-form-placeholder-color; }
.uk-textarea::placeholder { color: @inverse-form-placeholder-color; }
//
// Select
//
.uk-select:not([multiple]):not([size]) { .svg-fill(@internal-form-select-image, "#000", @inverse-form-select-icon-color); }
//
// Datalist
//
.uk-input[list]:hover,
.uk-input[list]:focus { .svg-fill(@internal-form-datalist-image, "#000", @inverse-form-datalist-icon-color); }
//
// Radio and checkbox
//
.uk-radio,
.uk-checkbox {
background-color: @inverse-form-radio-background;
.hook-inverse-form-radio();
}
// Focus
.uk-radio:focus,
.uk-checkbox:focus {
background-color: @inverse-form-radio-focus-background;
.hook-inverse-form-radio-focus();
}
// Checked
.uk-radio:checked,
.uk-checkbox:checked,
.uk-checkbox:indeterminate {
background-color: @inverse-form-radio-checked-background;
.hook-inverse-form-radio-checked();
}
// Focus
.uk-radio:checked:focus,
.uk-checkbox:checked:focus,
.uk-checkbox:indeterminate:focus {
background-color: @inverse-form-radio-checked-focus-background;
.hook-inverse-form-radio-checked-focus();
}
// Icon
.uk-radio:checked { .svg-fill(@internal-form-radio-image, "#000", @inverse-form-radio-checked-icon-color); }
.uk-checkbox:checked { .svg-fill(@internal-form-checkbox-image, "#000", @inverse-form-radio-checked-icon-color); }
.uk-checkbox:indeterminate { .svg-fill(@internal-form-checkbox-indeterminate-image, "#000", @inverse-form-radio-checked-icon-color); }
// Label
.uk-form-label {
.hook-inverse-form-label();
}
// Icon
.uk-form-icon { color: @inverse-form-icon-color; }
.uk-form-icon:hover { color: @inverse-form-icon-hover-color; }
}
.hook-inverse-form() {}
.hook-inverse-form-focus() {}
.hook-inverse-form-radio() {}
.hook-inverse-form-radio-focus() {}
.hook-inverse-form-radio-checked() {}
.hook-inverse-form-radio-checked-focus() {}
.hook-inverse-form-label() {}
// Name: Button
// Description: Styles for buttons
//
// Component: `uk-button`
//
// Sub-objects: `uk-button-group`
//
// Modifiers: `uk-button-default`
// `uk-button-primary`
// `uk-button-secondary`
// `uk-button-danger`
// `uk-button-text`
// `uk-button-link`
// `uk-button-small`
// `uk-button-large`
//
// States: `uk-active`
//
// ========================================================================
// Variables
// ========================================================================
@button-line-height: @global-control-height;
@button-small-line-height: @global-control-small-height;
@button-large-line-height: @global-control-large-height;
@button-font-size: @global-font-size;
@button-small-font-size: @global-small-font-size;
@button-large-font-size: @global-medium-font-size;
@button-padding-horizontal: @global-gutter;
@button-small-padding-horizontal: @global-small-gutter;
@button-large-padding-horizontal: @global-medium-gutter;
@button-default-background: @global-muted-background;
@button-default-color: @global-emphasis-color;
@button-default-hover-background: darken(@button-default-background, 5%);
@button-default-hover-color: @global-emphasis-color;
@button-default-active-background: darken(@button-default-background, 10%);
@button-default-active-color: @global-emphasis-color;
@button-primary-background: @global-primary-background;
@button-primary-color: @global-inverse-color;
@button-primary-hover-background: darken(@button-primary-background, 5%);
@button-primary-hover-color: @global-inverse-color;
@button-primary-active-background: darken(@button-primary-background, 10%);
@button-primary-active-color: @global-inverse-color;
@button-secondary-background: @global-secondary-background;
@button-secondary-color: @global-inverse-color;
@button-secondary-hover-background: darken(@button-secondary-background, 5%);
@button-secondary-hover-color: @global-inverse-color;
@button-secondary-active-background: darken(@button-secondary-background, 10%);
@button-secondary-active-color: @global-inverse-color;
@button-danger-background: @global-danger-background;
@button-danger-color: @global-inverse-color;
@button-danger-hover-background: darken(@button-danger-background, 5%);
@button-danger-hover-color: @global-inverse-color;
@button-danger-active-background: darken(@button-danger-background, 10%);
@button-danger-active-color: @global-inverse-color;
@button-disabled-background: @global-muted-background;
@button-disabled-color: @global-muted-color;
@button-text-line-height: @global-line-height;
@button-text-color: @global-emphasis-color;
@button-text-hover-color: @global-muted-color;
@button-text-disabled-color: @global-muted-color;
@button-link-line-height: @global-line-height;
@button-link-color: @global-emphasis-color;
@button-link-hover-color: @global-muted-color;
@button-link-hover-text-decoration: none;
@button-link-disabled-color: @global-muted-color;
/* ========================================================================
Component: Button
========================================================================== */
/*
* 1. Remove margins in Chrome, Safari and Opera.
* 2. Remove borders for `button`.
* 3. Address `overflow` set to `hidden` in IE.
* 4. Correct `font` properties and `color` not being inherited for `button`.
* 5. Remove the inheritance of text transform in Edge, Firefox, and IE.
* 6. Remove default style for `input type="submit"`in iOS.
* 7. Style
* 8. `line-height` is used to create a height because it also centers the text vertically for `a` elements.
* Better would be to use height and flexbox to center the text vertically but flexbox doesn't work in Firefox on `button` elements.
* 9. Align text if button has a width
* 10. Required for `a`.
*/
.uk-button {
/* 1 */
margin: 0;
/* 2 */
border: none;
/* 3 */
overflow: visible;
/* 4 */
font: inherit;
color: inherit;
/* 5 */
text-transform: none;
/* 6 */
-webkit-appearance: none;
border-radius: 0;
/* 7 */
display: inline-block;
box-sizing: border-box;
padding: 0 @button-padding-horizontal;
vertical-align: middle;
font-size: @button-font-size;
/* 8 */
line-height: @button-line-height;
/* 9 */
text-align: center;
/* 10 */
text-decoration: none;
.hook-button();
}
.uk-button:not(:disabled) { cursor: pointer; }
/*
* Remove the inner border and padding in Firefox.
*/
.uk-button::-moz-focus-inner {
border: 0;
padding: 0;
}
/* Hover */
.uk-button:hover {
/* 9 */
text-decoration: none;
.hook-button-hover();
}
/* OnClick + Active */
.uk-button:active,
.uk-button.uk-active {
.hook-button-active();
}
/* Style modifiers
========================================================================== */
/*
* Default
*/
.uk-button-default {
background-color: @button-default-background;
color: @button-default-color;
.hook-button-default();
}
/* Hover */
.uk-button-default:hover {
background-color: @button-default-hover-background;
color: @button-default-hover-color;
.hook-button-default-hover();
}
/* OnClick + Active */
.uk-button-default:active,
.uk-button-default.uk-active {
background-color: @button-default-active-background;
color: @button-default-active-color;
.hook-button-default-active();
}
/*
* Primary
*/
.uk-button-primary {
background-color: @button-primary-background;
color: @button-primary-color;
.hook-button-primary();
}
/* Hover */
.uk-button-primary:hover {
background-color: @button-primary-hover-background;
color: @button-primary-hover-color;
.hook-button-primary-hover();
}
/* OnClick + Active */
.uk-button-primary:active,
.uk-button-primary.uk-active {
background-color: @button-primary-active-background;
color: @button-primary-active-color;
.hook-button-primary-active();
}
/*
* Secondary
*/
.uk-button-secondary {
background-color: @button-secondary-background;
color: @button-secondary-color;
.hook-button-secondary();
}
/* Hover */
.uk-button-secondary:hover {
background-color: @button-secondary-hover-background;
color: @button-secondary-hover-color;
.hook-button-secondary-hover();
}
/* OnClick + Active */
.uk-button-secondary:active,
.uk-button-secondary.uk-active {
background-color: @button-secondary-active-background;
color: @button-secondary-active-color;
.hook-button-secondary-active();
}
/*
* Danger
*/
.uk-button-danger {
background-color: @button-danger-background;
color: @button-danger-color;
.hook-button-danger();
}
/* Hover */
.uk-button-danger:hover {
background-color: @button-danger-hover-background;
color: @button-danger-hover-color;
.hook-button-danger-hover();
}
/* OnClick + Active */
.uk-button-danger:active,
.uk-button-danger.uk-active {
background-color: @button-danger-active-background;
color: @button-danger-active-color;
.hook-button-danger-active();
}
/*
* Disabled
* The same for all style modifiers
*/
.uk-button-default:disabled,
.uk-button-primary:disabled,
.uk-button-secondary:disabled,
.uk-button-danger:disabled {
background-color: @button-disabled-background;
color: @button-disabled-color;
.hook-button-disabled();
}
/* Size modifiers
========================================================================== */
.uk-button-small {
padding: 0 @button-small-padding-horizontal;
line-height: @button-small-line-height;
font-size: @button-small-font-size;
.hook-button-small();
}
.uk-button-large {
padding: 0 @button-large-padding-horizontal;
line-height: @button-large-line-height;
font-size: @button-large-font-size;
.hook-button-large();
}
/* Text modifiers
========================================================================== */
/*
* Text
* 1. Reset
* 2. Style
*/
.uk-button-text {
/* 1 */
padding: 0;
line-height: @button-text-line-height;
background: none;
/* 2 */
color: @button-text-color;
.hook-button-text();
}
/* Hover */
.uk-button-text:hover {
color: @button-text-hover-color;
.hook-button-text-hover();
}
/* Disabled */
.uk-button-text:disabled {
color: @button-text-disabled-color;
.hook-button-text-disabled();
}
/*
* Link
* 1. Reset
* 2. Style
*/
.uk-button-link {
/* 1 */
padding: 0;
line-height: @button-link-line-height;
background: none;
/* 2 */
color: @button-link-color;
.hook-button-link();
}
/* Hover */
.uk-button-link:hover {
color: @button-link-hover-color;
text-decoration: @button-link-hover-text-decoration;
}
/* Disabled */
.uk-button-link:disabled {
color: @button-link-disabled-color;
text-decoration: none;
}
/* Group
========================================================================== */
/*
* 1. Using `flex` instead of `inline-block` to prevent whitespace betweent child elements
* 2. Behave like button
* 3. Create position context
*/
.uk-button-group {
/* 1 */
display: inline-flex;
/* 2 */
vertical-align: middle;
/* 3 */
position: relative;
}
// Hooks
// ========================================================================
.hook-button-misc();
.hook-button() {}
.hook-button-hover() {}
.hook-button-active() {}
.hook-button-default() {}
.hook-button-default-hover() {}
.hook-button-default-active() {}
.hook-button-primary() {}
.hook-button-primary-hover() {}
.hook-button-primary-active() {}
.hook-button-secondary() {}
.hook-button-secondary-hover() {}
.hook-button-secondary-active() {}
.hook-button-danger() {}
.hook-button-danger-hover() {}
.hook-button-danger-active() {}
.hook-button-disabled() {}
.hook-button-small() {}
.hook-button-large() {}
.hook-button-text() {}
.hook-button-text-hover() {}
.hook-button-text-disabled() {}
.hook-button-link() {}
.hook-button-misc() {}
// Inverse
// ========================================================================
@inverse-button-default-background: @inverse-global-primary-background;
@inverse-button-default-color: @inverse-global-inverse-color;
@inverse-button-default-hover-background: darken(@inverse-button-default-background, 5%);
@inverse-button-default-hover-color: @inverse-global-inverse-color;
@inverse-button-default-active-background: darken(@inverse-button-default-background, 10%);
@inverse-button-default-active-color: @inverse-global-inverse-color;
@inverse-button-primary-background: @inverse-global-primary-background;
@inverse-button-primary-color: @inverse-global-inverse-color;
@inverse-button-primary-hover-background: darken(@inverse-button-primary-background, 5%);
@inverse-button-primary-hover-color: @inverse-global-inverse-color;
@inverse-button-primary-active-background: darken(@inverse-button-primary-background, 10%);
@inverse-button-primary-active-color: @inverse-global-inverse-color;
@inverse-button-secondary-background: @inverse-global-primary-background;
@inverse-button-secondary-color: @inverse-global-inverse-color;
@inverse-button-secondary-hover-background: darken(@inverse-button-secondary-background, 5%);
@inverse-button-secondary-hover-color: @inverse-global-inverse-color;
@inverse-button-secondary-active-background: darken(@inverse-button-secondary-background, 10%);
@inverse-button-secondary-active-color: @inverse-global-inverse-color;
@inverse-button-text-color: @inverse-global-emphasis-color;
@inverse-button-text-hover-color: @inverse-global-muted-color;
@inverse-button-text-disabled-color: @inverse-global-muted-color;
@inverse-button-link-color: @inverse-global-emphasis-color;
@inverse-button-link-hover-color: @inverse-global-muted-color;
.hook-inverse() {
//
// Default
//
.uk-button-default {
background-color: @inverse-button-default-background;
color: @inverse-button-default-color;
.hook-inverse-button-default();
}
.uk-button-default:hover {
background-color: @inverse-button-default-hover-background;
color: @inverse-button-default-hover-color;
.hook-inverse-button-default-hover();
}
.uk-button-default:active,
.uk-button-default.uk-active {
background-color: @inverse-button-default-active-background;
color: @inverse-button-default-active-color;
.hook-inverse-button-default-active();
}
//
// Primary
//
.uk-button-primary {
background-color: @inverse-button-primary-background;
color: @inverse-button-primary-color;
.hook-inverse-button-primary();
}
.uk-button-primary:hover {
background-color: @inverse-button-primary-hover-background;
color: @inverse-button-primary-hover-color;
.hook-inverse-button-primary-hover();
}
.uk-button-primary:active,
.uk-button-primary.uk-active {
background-color: @inverse-button-primary-active-background;
color: @inverse-button-primary-active-color;
.hook-inverse-button-primary-active();
}
//
// Secondary
//
.uk-button-secondary {
background-color: @inverse-button-secondary-background;
color: @inverse-button-secondary-color;
.hook-inverse-button-secondary();
}
.uk-button-secondary:hover {
background-color: @inverse-button-secondary-hover-background;
color: @inverse-button-secondary-hover-color;
.hook-inverse-button-secondary-hover();
}
.uk-button-secondary:active,
.uk-button-secondary.uk-active {
background-color: @inverse-button-secondary-active-background;
color: @inverse-button-secondary-active-color;
.hook-inverse-button-secondary-active();
}
//
// Text
//
.uk-button-text {
color: @inverse-button-text-color;
.hook-inverse-button-text();
}
.uk-button-text:hover {
color: @inverse-button-text-hover-color;
.hook-inverse-button-text-hover();
}
.uk-button-text:disabled {
color: @inverse-button-text-disabled-color;
.hook-inverse-button-text-disabled();
}
//
// Link
//
.uk-button-link {
color: @inverse-button-link-color;
.hook-inverse-button-link();
}
.uk-button-link:hover { color: @inverse-button-link-hover-color; }
}
.hook-inverse-button-default() {}
.hook-inverse-button-default-hover() {}
.hook-inverse-button-default-active() {}
.hook-inverse-button-primary() {}
.hook-inverse-button-primary-hover() {}
.hook-inverse-button-primary-active() {}
.hook-inverse-button-secondary() {}
.hook-inverse-button-secondary-hover() {}
.hook-inverse-button-secondary-active() {}
.hook-inverse-button-text() {}
.hook-inverse-button-text-hover() {}
.hook-inverse-button-text-disabled() {}
.hook-inverse-button-link() {}
// Name: Progress
// Description: Component to create progress bars
//
// Component: `uk-progress`
//
// ========================================================================
// Variables
// ========================================================================
@progress-height: 15px;
@progress-margin-vertical: @global-margin;
@progress-background: @global-muted-background;
@progress-bar-background: @global-primary-background;
/* ========================================================================
Component: Progress
========================================================================== */
/*
* 1. Add the correct vertical alignment in all browsers.
* 2. Behave like a block element.
* 3. Remove borders in Firefox.
* 4. Remove default style in Chrome, Safari and Edge.
* 5. Style
*/
.uk-progress {
/* 1 */
vertical-align: baseline;
/* 2 */
display: block;
width: 100%;
/* 3 */
border: 0;
/* 4 */
background-color: @progress-background;
/* 5 */
margin-bottom: @progress-margin-vertical;
height: @progress-height;
.hook-progress();
}
/* Add margin if adjacent element */
* + .uk-progress { margin-top: @progress-margin-vertical; }
/*
* Show background color set on `uk-progress` in Chrome, Safari and Edge.
*/
.uk-progress::-webkit-progress-bar { background-color: transparent; }
/*
* Progress Bar
* 1. Transitions don't work on `::-moz-progress-bar` pseudo element in Firefox yet.
* https://bugzilla.mozilla.org/show_bug.cgi?id=662351
*/
.uk-progress::-webkit-progress-value {
background-color: @progress-bar-background;
transition: width 0.6s ease;
.hook-progress-bar();
}
.uk-progress::-moz-progress-bar {
background-color: @progress-bar-background;
/* 1 */
transition: width 0.6s ease;
.hook-progress-bar();
}
// Hooks
// ========================================================================
.hook-progress-misc();
.hook-progress() {}
.hook-progress-bar() {}
.hook-progress-misc() {}
// Layout
// Name: Section
// Description: Component to create horizontal layout section
//
// Component: `uk-section`
//
// Modifiers: `uk-section-xsmall`
// `uk-section-small`
// `uk-section-large`
// `uk-section-xlarge`
// `uk-section-default`
// `uk-section-muted`
// `uk-section-primary`
// `uk-section-secondary`
// `uk-section-overlap`
//
// States: `uk-preserve-color`
//
// ========================================================================
// Variables
// ========================================================================
@section-padding-vertical: @global-medium-margin;
@section-padding-vertical-m: @global-large-margin;
@section-xsmall-padding-vertical: @global-margin;
@section-small-padding-vertical: @global-medium-margin;
@section-large-padding-vertical: @global-large-margin;
@section-large-padding-vertical-m: @global-xlarge-margin;
@section-xlarge-padding-vertical: @global-xlarge-margin;
@section-xlarge-padding-vertical-m: (@global-large-margin + @global-xlarge-margin);
@section-default-background: @global-background;
@section-muted-background: @global-muted-background;
@section-primary-background: @global-primary-background;
@section-primary-color-mode: light;
@section-secondary-background: @global-secondary-background;
@section-secondary-color-mode: light;
/* ========================================================================
Component: Section
========================================================================== */
/*
* 1. Make it work with `100vh` and height in general
*/
.uk-section {
display: flow-root;
box-sizing: border-box; /* 1 */
padding-top: @section-padding-vertical;
padding-bottom: @section-padding-vertical;
.hook-section();
}
/* Desktop and bigger */
@media (min-width: @breakpoint-medium) {
.uk-section {
padding-top: @section-padding-vertical-m;
padding-bottom: @section-padding-vertical-m;
}
}
/*
* Remove margin from the last-child
*/
.uk-section > :last-child { margin-bottom: 0; }
/* Size modifiers
========================================================================== */
/*
* XSmall
*/
.uk-section-xsmall {
padding-top: @section-xsmall-padding-vertical;
padding-bottom: @section-xsmall-padding-vertical;
}
/*
* Small
*/
.uk-section-small {
padding-top: @section-small-padding-vertical;
padding-bottom: @section-small-padding-vertical;
}
/*
* Large
*/
.uk-section-large {
padding-top: @section-large-padding-vertical;
padding-bottom: @section-large-padding-vertical;
}
/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) {
.uk-section-large {
padding-top: @section-large-padding-vertical-m;
padding-bottom: @section-large-padding-vertical-m;
}
}
/*
* XLarge
*/
.uk-section-xlarge {
padding-top: @section-xlarge-padding-vertical;
padding-bottom: @section-xlarge-padding-vertical;
}
/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) {
.uk-section-xlarge {
padding-top: @section-xlarge-padding-vertical-m;
padding-bottom: @section-xlarge-padding-vertical-m;
}
}
/* Style modifiers
========================================================================== */
/*
* Default
*/
.uk-section-default {
background: @section-default-background;
.hook-section-default();
}
/*
* Muted
*/
.uk-section-muted {
background: @section-muted-background;
.hook-section-muted();
}
/*
* Primary
*/
.uk-section-primary {
background: @section-primary-background;
.hook-section-primary();
}
.uk-section-primary:not(.uk-preserve-color):extend(.uk-light all) when (@section-primary-color-mode = light) {}
.uk-section-primary:not(.uk-preserve-color):extend(.uk-dark all) when (@section-primary-color-mode = dark) {}
/*
* Secondary
*/
.uk-section-secondary {
background: @section-secondary-background;
.hook-section-secondary();
}
.uk-section-secondary:not(.uk-preserve-color):extend(.uk-light all) when (@section-secondary-color-mode = light) {}
.uk-section-secondary:not(.uk-preserve-color):extend(.uk-dark all) when (@section-secondary-color-mode = dark) {}
/* Overlap modifier
========================================================================== */
/*
* Reserved modifier to make a section overlap another section with an border image
* Implemented by the theme
*/
.uk-section-overlap {
.hook-section-overlap();
}
// Hooks
// ========================================================================
.hook-section-misc();
.hook-section() {}
.hook-section-default() {}
.hook-section-muted() {}
.hook-section-secondary() {}
.hook-section-primary() {}
.hook-section-overlap() {}
.hook-section-misc() {}
// Name: Container
// Description: Component to align and center your site and grid content
//
// Component: `uk-container`
//
// Modifier: `uk-container-small`
// `uk-container-large`
// `uk-container-expand`
// `uk-container-expand-$(startSide)`
// `uk-container-expand-$(endSide)`
// `uk-container-item-padding-remove-$(startSide)`
// `uk-container-item-padding-remove-$(endSide)`
//
// ========================================================================
// Variables
// ========================================================================
@container-max-width: 1200px;
@container-xsmall-max-width: 750px;
@container-small-max-width: 900px;
@container-large-max-width: 1400px;
@container-xlarge-max-width: 1600px;
@container-padding-horizontal: 15px;
@container-padding-horizontal-s: @global-gutter;
@container-padding-horizontal-m: @global-medium-gutter;
/* ========================================================================
Component: Container
========================================================================== */
/*
* 1. Box sizing has to be `content-box` so the max-width is always the same and
* unaffected by the padding on different breakpoints. It's important for the size modifiers.
*/
.uk-container {
display: flow-root;
/* 1 */
box-sizing: content-box;
max-width: @container-max-width;
margin-$(startSide): auto;
margin-$(endSide): auto;
padding-$(startSide): @container-padding-horizontal;
padding-$(endSide): @container-padding-horizontal;
}
/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {
.uk-container {
padding-$(startSide): @container-padding-horizontal-s;
padding-$(endSide): @container-padding-horizontal-s;
}
}
/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) {
.uk-container {
padding-$(startSide): @container-padding-horizontal-m;
padding-$(endSide): @container-padding-horizontal-m;
}
}
/*
* Remove margin from the last-child
*/
.uk-container > :last-child { margin-bottom: 0; }
/*
* Remove padding from nested containers
*/
.uk-container .uk-container {
padding-$(startSide): 0;
padding-$(endSide): 0;
}
/* Size modifier
========================================================================== */
.uk-container-xsmall { max-width: @container-xsmall-max-width; }
.uk-container-small { max-width: @container-small-max-width; }
.uk-container-large { max-width: @container-large-max-width; }
.uk-container-xlarge { max-width: @container-xlarge-max-width; }
.uk-container-expand { max-width: none; }
/* Expand modifier
========================================================================== */
/*
* Expand one side only
*/
.uk-container-expand-$(startSide) { margin-$(startSide): 0; }
.uk-container-expand-$(endSide) { margin-$(endSide): 0; }
/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {
.uk-container-expand-$(startSide).uk-container-xsmall,
.uk-container-expand-$(endSide).uk-container-xsmall { max-width: ~'calc(50% + (@{container-xsmall-max-width} / 2) - @{container-padding-horizontal-s})'; }
.uk-container-expand-$(startSide).uk-container-small,
.uk-container-expand-$(endSide).uk-container-small { max-width: ~'calc(50% + (@{container-small-max-width} / 2) - @{container-padding-horizontal-s})'; }
}
/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) {
.uk-container-expand-$(startSide),
.uk-container-expand-$(endSide) { max-width: ~'calc(50% + (@{container-max-width} / 2) - @{container-padding-horizontal-m})'; }
.uk-container-expand-$(startSide).uk-container-xsmall,
.uk-container-expand-$(endSide).uk-container-xsmall { max-width: ~'calc(50% + (@{container-xsmall-max-width} / 2) - @{container-padding-horizontal-m})'; }
.uk-container-expand-$(startSide).uk-container-small,
.uk-container-expand-$(endSide).uk-container-small { max-width: ~'calc(50% + (@{container-small-max-width} / 2) - @{container-padding-horizontal-m})'; }
.uk-container-expand-$(startSide).uk-container-large,
.uk-container-expand-$(endSide).uk-container-large { max-width: ~'calc(50% + (@{container-large-max-width} / 2) - @{container-padding-horizontal-m})'; }
.uk-container-expand-$(startSide).uk-container-xlarge,
.uk-container-expand-$(endSide).uk-container-xlarge { max-width: ~'calc(50% + (@{container-xlarge-max-width} / 2) - @{container-padding-horizontal-m})'; }
}
/* Item
========================================================================== */
/*
* Utility classes to reset container padding on the $(startSide) or $(endSide) side
* Note: It has to be negative margin on the item, because it's specific to the item.
*/
.uk-container-item-padding-remove-$(startSide),
.uk-container-item-padding-remove-$(endSide) { width: ~'calc(100% + @{container-padding-horizontal})' }
.uk-container-item-padding-remove-$(startSide) { margin-$(startSide): -@container-padding-horizontal; }
.uk-container-item-padding-remove-$(endSide) { margin-$(endSide): -@container-padding-horizontal; }
/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {
.uk-container-item-padding-remove-$(startSide),
.uk-container-item-padding-remove-$(endSide) { width: ~'calc(100% + @{container-padding-horizontal-s})' }
.uk-container-item-padding-remove-$(startSide) { margin-$(startSide): -@container-padding-horizontal-s; }
.uk-container-item-padding-remove-$(endSide) { margin-$(endSide): -@container-padding-horizontal-s; }
}
/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) {
.uk-container-item-padding-remove-$(startSide),
.uk-container-item-padding-remove-$(endSide) { width: ~'calc(100% + @{container-padding-horizontal-m})' }
.uk-container-item-padding-remove-$(startSide) { margin-$(startSide): -@container-padding-horizontal-m; }
.uk-container-item-padding-remove-$(endSide) { margin-$(endSide): -@container-padding-horizontal-m; }
}
// Hooks
// ========================================================================
.hook-container-misc();
.hook-container-misc() {}
// Name: Tile
// Description: Component to create tiled boxes
//
// Component: `uk-tile`
//
// Modifiers: `uk-tile-xsmall`
// `uk-tile-small`
// `uk-tile-large`
// `uk-tile-xlarge`
// `uk-tile-default`
// `uk-tile-muted`
// `uk-tile-primary`
// `uk-tile-secondary`
//
// States: `uk-preserve-color`
//
// ========================================================================
// Variables
// ========================================================================
@tile-padding-horizontal: 15px;
@tile-padding-horizontal-s: @global-gutter;
@tile-padding-horizontal-m: @global-medium-gutter;
@tile-padding-vertical: @global-medium-margin;
@tile-padding-vertical-m: @global-large-margin;
@tile-xsmall-padding-vertical: @global-margin;
@tile-small-padding-vertical: @global-medium-margin;
@tile-large-padding-vertical: @global-large-margin;
@tile-large-padding-vertical-m: @global-xlarge-margin;
@tile-xlarge-padding-vertical: @global-xlarge-margin;
@tile-xlarge-padding-vertical-m: (@global-large-margin + @global-xlarge-margin);
@tile-default-background: @global-background;
@tile-muted-background: @global-muted-background;
@tile-primary-background: @global-primary-background;
@tile-primary-color-mode: light;
@tile-secondary-background: @global-secondary-background;
@tile-secondary-color-mode: light;
/* ========================================================================
Component: Tile
========================================================================== */
.uk-tile {
display: flow-root;
position: relative;
box-sizing: border-box;
padding-$(startSide): @tile-padding-horizontal;
padding-$(endSide): @tile-padding-horizontal;
padding-top: @tile-padding-vertical;
padding-bottom: @tile-padding-vertical;
.hook-tile();
}
/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {
.uk-tile {
padding-$(startSide): @tile-padding-horizontal-s;
padding-$(endSide): @tile-padding-horizontal-s;
}
}
/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) {
.uk-tile {
padding-$(startSide): @tile-padding-horizontal-m;
padding-$(endSide): @tile-padding-horizontal-m;
padding-top: @tile-padding-vertical-m;
padding-bottom: @tile-padding-vertical-m;
}
}
/*
* Remove margin from the last-child
*/
.uk-tile > :last-child { margin-bottom: 0; }
/* Size modifiers
========================================================================== */
/*
* XSmall
*/
.uk-tile-xsmall {
padding-top: @tile-xsmall-padding-vertical;
padding-bottom: @tile-xsmall-padding-vertical;
}
/*
* Small
*/
.uk-tile-small {
padding-top: @tile-small-padding-vertical;
padding-bottom: @tile-small-padding-vertical;
}
/*
* Large
*/
.uk-tile-large {
padding-top: @tile-large-padding-vertical;
padding-bottom: @tile-large-padding-vertical;
}
/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) {
.uk-tile-large {
padding-top: @tile-large-padding-vertical-m;
padding-bottom: @tile-large-padding-vertical-m;
}
}
/*
* XLarge
*/
.uk-tile-xlarge {
padding-top: @tile-xlarge-padding-vertical;
padding-bottom: @tile-xlarge-padding-vertical;
}
/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) {
.uk-tile-xlarge {
padding-top: @tile-xlarge-padding-vertical-m;
padding-bottom: @tile-xlarge-padding-vertical-m;
}
}
/* Style modifiers
========================================================================== */
/*
* Default
*/
.uk-tile-default {
background-color: @tile-default-background;
.hook-tile-default();
}
.uk-tile-default.uk-tile-hover:hover {
.hook-tile-default-hover();
}
/*
* Muted
*/
.uk-tile-muted {
background-color: @tile-muted-background;
.hook-tile-muted();
}
.uk-tile-muted.uk-tile-hover:hover {
.hook-tile-muted-hover();
}
/*
* Primary
*/
.uk-tile-primary {
background-color: @tile-primary-background;
.hook-tile-primary();
}
.uk-tile-primary.uk-tile-hover:hover {
.hook-tile-primary-hover();
}
// Color Mode
.uk-tile-primary:not(.uk-preserve-color):extend(.uk-light all) when (@tile-primary-color-mode = light) {}
.uk-tile-primary:not(.uk-preserve-color):extend(.uk-dark all) when (@tile-primary-color-mode = dark) {}
/*
* Secondary
*/
.uk-tile-secondary {
background-color: @tile-secondary-background;
.hook-tile-secondary();
}
.uk-tile-secondary.uk-tile-hover:hover {
.hook-tile-secondary-hover();
}
// Color Mode
.uk-tile-secondary:not(.uk-preserve-color):extend(.uk-light all) when (@tile-secondary-color-mode = light) {}
.uk-tile-secondary:not(.uk-preserve-color):extend(.uk-dark all) when (@tile-secondary-color-mode = dark) {}
// Hooks
// ========================================================================
.hook-tile-misc();
.hook-tile() {}
.hook-tile-default() {}
.hook-tile-default-hover() {}
.hook-tile-muted() {}
.hook-tile-muted-hover() {}
.hook-tile-primary() {}
.hook-tile-primary-hover() {}
.hook-tile-secondary() {}
.hook-tile-secondary-hover() {}
.hook-tile-misc() {}
// 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: 15px;
@card-badge-$(endSide): 15px;
@card-badge-height: 22px;
@card-badge-padding-horizontal: 10px;
@card-badge-background: @global-primary-background;
@card-badge-color: @global-inverse-color;
@card-badge-font-size: @global-small-font-size;
@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 {
display: flow-root;
padding: @card-body-padding-vertical @card-body-padding-horizontal;
.hook-card-body();
}
.uk-card-header {
display: flow-root;
padding: @card-header-padding-vertical @card-header-padding-horizontal;
.hook-card-header();
}
.uk-card-footer {
display: flow-root;
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; }
}
/*
* 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-$(startSide),
.uk-grid-stack > .uk-card-media-$(endSide) {
.hook-card-media-top();
}
.uk-card-media-bottom {
.hook-card-media-bottom();
}
:not(.uk-grid-stack) > .uk-card-media-$(startSide) {
.hook-card-media-$(startSide)();
}
:not(.uk-grid-stack) > .uk-card-media-$(endSide) {
.hook-card-media-$(endSide)();
}
/* Title
========================================================================== */
.uk-card-title {
font-size: @card-title-font-size;
line-height: @card-title-line-height;
.hook-card-title();
}
/* Badge
========================================================================== */
/*
* 1. Position
* 2. Size
* 3. Style
* 4. Center child vertically
*/
.uk-card-badge {
/* 1 */
position: absolute;
top: @card-badge-top;
$(endSide): @card-badge-$(endSide);
z-index: 1;
/* 2 */
height: @card-badge-height;
padding: 0 @card-badge-padding-horizontal;
/* 3 */
background: @card-badge-background;
color: @card-badge-color;
font-size: @card-badge-font-size;
/* 4 */
display: flex;
justify-content: center;
align-items: center;
line-height: 0;
.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-color: @card-hover-background;
.hook-card-hover();
}
/* Style modifiers
========================================================================== */
/*
* Default
* Note: Header and Footer are only implemented for the default style
*/
.uk-card-default {
background-color: @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-color: @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-color: @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-$(startSide)() {}
.hook-card-media-$(endSide)() {}
.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() {}
// Inverse
// ========================================================================
@inverse-card-badge-background: @inverse-global-primary-background;
@inverse-card-badge-color: @inverse-global-inverse-color;
.hook-inverse() {
&.uk-card-badge {
background-color: @inverse-card-badge-background;
color: @inverse-card-badge-color;
.hook-inverse-card-badge();
}
}
.hook-inverse-card-badge() {}
// Common
// Name: Close
// Description: Component to create a close button
//
// Component: `uk-close`
//
// ========================================================================
// Variables
// ========================================================================
@close-color: @global-muted-color;
@close-hover-color: @global-color;
/* ========================================================================
Component: Close
========================================================================== */
/*
* Adopts `uk-icon`
*/
.uk-close {
color: @close-color;
.hook-close();
}
/* Hover */
.uk-close:hover {
color: @close-hover-color;
.hook-close-hover();
}
// Hooks
// ========================================================================
.hook-close-misc();
.hook-close() {}
.hook-close-hover() {}
.hook-close-misc() {}
// Inverse
// ========================================================================
@inverse-close-color: @inverse-global-muted-color;
@inverse-close-hover-color: @inverse-global-color;
.hook-inverse() {
.uk-close {
color: @inverse-close-color;
.hook-inverse-close();
}
.uk-close:hover {
color: @inverse-close-hover-color;
.hook-inverse-close-hover();
}
}
.hook-inverse-close() {}
.hook-inverse-close-hover() {}
// Name: Spinner
// Description: Component to create a loading spinner
//
// Component: `uk-spinner`
//
// ========================================================================
// Variables
// ========================================================================
@spinner-size: 30px;
@spinner-stroke-width: 1;
@spinner-radius: floor(((@spinner-size - @spinner-stroke-width) / 2)); // Minus stroke width to prevent overflow clipping
@spinner-circumference: round(2 * 3.141 * @spinner-radius);
@spinner-duration: 1.4s;
/* ========================================================================
Component: Spinner
========================================================================== */
/*
* Adopts `uk-icon`
*/
.uk-spinner {
.hook-spinner();
}
/* SVG
========================================================================== */
.uk-spinner > * { animation: uk-spinner-rotate @spinner-duration linear infinite; }
@keyframes uk-spinner-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(270deg); }
}
/*
* Circle
*/
.uk-spinner > * > * {
stroke-dasharray: @spinner-circumference;
stroke-dashoffset: 0;
transform-origin: center;
animation: uk-spinner-dash @spinner-duration ease-in-out infinite;
stroke-width: @spinner-stroke-width;
stroke-linecap: round;
}
@keyframes uk-spinner-dash {
0% { stroke-dashoffset: @spinner-circumference; }
50% {
stroke-dashoffset: (@spinner-circumference / 4);
transform: rotate(135deg);
}
100% {
stroke-dashoffset: @spinner-circumference;
transform: rotate(450deg);
}
}
// Hooks
// ========================================================================
.hook-spinner-misc();
.hook-spinner() {}
.hook-spinner-misc() {}
// Name: Marker
// Description: Component to create a marker icon
//
// Component: `uk-marker`
//
// ========================================================================
// Variables
// ========================================================================
@marker-padding: 5px;
@marker-background: @global-secondary-background;
@marker-color: @global-inverse-color;
@marker-hover-color: @global-inverse-color;
/* ========================================================================
Component: Marker
========================================================================== */
/*
* Addopts `uk-icon`
*/
.uk-marker {
padding: @marker-padding;
background: @marker-background;
color: @marker-color;
.hook-marker();
}
/* Hover */
.uk-marker:hover {
color: @marker-hover-color;
.hook-marker-hover();
}
// Hooks
// ========================================================================
.hook-marker-misc();
.hook-marker() {}
.hook-marker-hover() {}
.hook-marker-misc() {}
// Inverse
// ========================================================================
@inverse-marker-background: @global-muted-background;
@inverse-marker-color: @global-color;
@inverse-marker-hover-color: @global-color;
.hook-inverse() {
.uk-marker {
background: @inverse-marker-background;
color: @inverse-marker-color;
.hook-inverse-marker();
}
.uk-marker:hover {
color: @inverse-marker-hover-color;
.hook-inverse-marker-hover();
}
}
.hook-inverse-marker() {}
.hook-inverse-marker-hover() {}
// Name: Totop
// Description: Component to create an icon to scroll back to top
//
// Component: `uk-totop`
//
// ========================================================================
// Variables
// ========================================================================
@totop-padding: 5px;
@totop-color: @global-muted-color;
@totop-hover-color: @global-color;
@totop-active-color: @global-emphasis-color;
/* ========================================================================
Component: Totop
========================================================================== */
/*
* Addopts `uk-icon`
*/
.uk-totop {
padding: @totop-padding;
color: @totop-color;
.hook-totop();
}
/* Hover */
.uk-totop:hover {
color: @totop-hover-color;
.hook-totop-hover();
}
/* OnClick */
.uk-totop:active {
color: @totop-active-color;
.hook-totop-active();
}
// Hooks
// ========================================================================
.hook-totop-misc();
.hook-totop() {}
.hook-totop-hover() {}
.hook-totop-active() {}
.hook-totop-misc() {}
// Inverse
// ========================================================================
@inverse-totop-color: @inverse-global-muted-color;
@inverse-totop-hover-color: @inverse-global-color;
@inverse-totop-active-color: @inverse-global-emphasis-color;
.hook-inverse() {
.uk-totop {
color: @inverse-totop-color;
.hook-inverse-totop();
}
.uk-totop:hover {
color: @inverse-totop-hover-color;
.hook-inverse-totop-hover();
}
.uk-totop:active {
color: @inverse-totop-active-color;
.hook-inverse-totop-active();
}
}
.hook-inverse-totop() {}
.hook-inverse-totop-hover() {}
.hook-inverse-totop-active() {}
// Name: Alert
// Description: Component to create alert messages
//
// Component: `uk-alert`
//
// Adopted: `uk-alert-close`
//
// Modifiers: `uk-alert-primary`
// `uk-alert-success`
// `uk-alert-warning`
// `uk-alert-danger`
//
// ========================================================================
// Variables
// ========================================================================
@alert-margin-vertical: @global-margin;
@alert-padding: 15px;
@alert-padding-$(endSide): @alert-padding + 14px;
@alert-background: @global-muted-background;
@alert-color: @global-color;
@alert-close-top: @alert-padding + 5px;
@alert-close-$(endSide): @alert-padding;
@alert-primary-background: lighten(tint(@global-primary-background, 40%), 20%);
@alert-primary-color: @global-primary-background;
@alert-success-background: lighten(tint(@global-success-background, 40%), 25%);
@alert-success-color: @global-success-background;
@alert-warning-background: lighten(tint(@global-warning-background, 45%), 15%);
@alert-warning-color: @global-warning-background;
@alert-danger-background: lighten(tint(@global-danger-background, 40%), 20%);
@alert-danger-color: @global-danger-background;
/* ========================================================================
Component: Alert
========================================================================== */
.uk-alert {
position: relative;
margin-bottom: @alert-margin-vertical;
padding: @alert-padding @alert-padding-$(endSide) @alert-padding @alert-padding;
background: @alert-background;
color: @alert-color;
.hook-alert();
}
/* Add margin if adjacent element */
* + .uk-alert { margin-top: @alert-margin-vertical; }
/*
* Remove margin from the last-child
*/
.uk-alert > :last-child { margin-bottom: 0; }
/* Close
* Adopts `uk-close`
========================================================================== */
.uk-alert-close {
position: absolute;
top: @alert-close-top;
$(endSide): @alert-close-$(endSide);
.hook-alert-close();
}
/*
* Remove margin from adjacent element
*/
.uk-alert-close:first-child + * { margin-top: 0; }
/*
* Hover
*/
.uk-alert-close:hover {
.hook-alert-close-hover();
}
/* Style modifiers
========================================================================== */
/*
* Primary
*/
.uk-alert-primary {
background: @alert-primary-background;
color: @alert-primary-color;
.hook-alert-primary();
}
/*
* Success
*/
.uk-alert-success {
background: @alert-success-background;
color: @alert-success-color;
.hook-alert-success();
}
/*
* Warning
*/
.uk-alert-warning {
background: @alert-warning-background;
color: @alert-warning-color;
.hook-alert-warning();
}
/*
* Danger
*/
.uk-alert-danger {
background: @alert-danger-background;
color: @alert-danger-color;
.hook-alert-danger();
}
// Hooks
// ========================================================================
.hook-alert-misc();
.hook-alert() {}
.hook-alert-close() {}
.hook-alert-close-hover() {}
.hook-alert-primary() {}
.hook-alert-success() {}
.hook-alert-warning() {}
.hook-alert-danger() {}
.hook-alert-misc() {}
// Name: Placeholder
// Description: Component to create placeholder boxes
//
// Component: `uk-placeholder`
//
// ========================================================================
// Variables
// ========================================================================
@placeholder-margin-vertical: @global-margin;
@placeholder-padding-vertical: @global-gutter;
@placeholder-padding-horizontal: @global-gutter;
@placeholder-background: @global-muted-background;
/* ========================================================================
Component: Placeholder
========================================================================== */
.uk-placeholder {
margin-bottom: @placeholder-margin-vertical;
padding: @placeholder-padding-vertical @placeholder-padding-horizontal;
background: @placeholder-background;
.hook-placeholder();
}
/* Add margin if adjacent element */
* + .uk-placeholder { margin-top: @placeholder-margin-vertical; }
/*
* Remove margin from the last-child
*/
.uk-placeholder > :last-child { margin-bottom: 0; }
// Hooks
// ========================================================================
.hook-placeholder-misc();
.hook-placeholder() {}
.hook-placeholder-misc() {}
// Name: Badge
// Description: Component to create notification badges
//
// Component: `uk-badge`
//
// ========================================================================
// Variables
// ========================================================================
@badge-size: 18px;
@badge-padding-vertical: 0;
@badge-padding-horizontal: 5px;
@badge-border-radius: 500px;
@badge-background: @global-primary-background;
@badge-color: @global-inverse-color;
@badge-font-size: 11px;
/* ========================================================================
Component: Badge
========================================================================== */
/*
* 1. Style
* 2. Center child vertically and horizontally
*/
.uk-badge {
box-sizing: border-box;
min-width: @badge-size;
height: @badge-size;
padding: @badge-padding-vertical @badge-padding-horizontal;
border-radius: @badge-border-radius;
vertical-align: middle;
/* 1 */
background: @badge-background;
color: @badge-color !important;
font-size: @badge-font-size;
/* 2 */
display: inline-flex;
justify-content: center;
align-items: center;
line-height: 0;
.hook-badge();
}
/*
* Required for `a`
*/
.uk-badge:hover {
text-decoration: none;
.hook-badge-hover();
}
// Hooks
// ========================================================================
.hook-badge-misc();
.hook-badge() {}
.hook-badge-hover() {}
.hook-badge-misc() {}
// Inverse
// ========================================================================
@inverse-badge-background: @inverse-global-primary-background;
@inverse-badge-color: @inverse-global-inverse-color;
.hook-inverse() {
.uk-badge {
background-color: @inverse-badge-background;
color: @inverse-badge-color !important;
.hook-inverse-badge();
}
.uk-badge:hover {
.hook-inverse-badge-hover();
}
}
.hook-inverse-badge() {}
.hook-inverse-badge-hover() {}
// Name: Label
// Description: Component to indicate important notes
//
// Component: `uk-label`
//
// Modifiers: `uk-label-success`
// `uk-label-warning`
// `uk-label-danger`
//
// ========================================================================
// Variables
// ========================================================================
@label-padding-vertical: 0;
@label-padding-horizontal: @global-small-margin;
@label-background: @global-primary-background;
@label-line-height: @global-line-height;
@label-font-size: @global-small-font-size;
@label-color: @global-inverse-color;
@label-success-background: @global-success-background;
@label-success-color: @global-inverse-color;
@label-warning-background: @global-warning-background;
@label-warning-color: @global-inverse-color;
@label-danger-background: @global-danger-background;
@label-danger-color: @global-inverse-color;
/* ========================================================================
Component: Label
========================================================================== */
.uk-label {
display: inline-block;
padding: @label-padding-vertical @label-padding-horizontal;
background: @label-background;
line-height: @label-line-height;
font-size: @label-font-size;
color: @label-color;
vertical-align: middle;
white-space: nowrap;
.hook-label();
}
/* Color modifiers
========================================================================== */
/*
* Success
*/
.uk-label-success {
background-color: @label-success-background;
color: @label-success-color;
.hook-label-success();
}
/*
* Warning
*/
.uk-label-warning {
background-color: @label-warning-background;
color: @label-warning-color;
.hook-label-warning();
}
/*
* Danger
*/
.uk-label-danger {
background-color: @label-danger-background;
color: @label-danger-color;
.hook-label-danger();
}
// Hooks
// ========================================================================
.hook-label-misc();
.hook-label() {}
.hook-label-success() {}
.hook-label-warning() {}
.hook-label-danger() {}
.hook-label-misc() {}
// Inverse
// ========================================================================
@inverse-label-background: @inverse-global-primary-background;
@inverse-label-color: @inverse-global-inverse-color;
.hook-inverse() {
.uk-label {
background-color: @inverse-label-background;
color: @inverse-label-color;
.hook-inverse-label();
}
}
.hook-inverse-label() {}
// Name: Overlay
// Description: Component to create content areas overlaying an image
//
// Component: `uk-overlay`
//
// Adopted: `uk-overlay-icon`
//
// Modifier: `uk-overlay-default`
// `uk-overlay-primary`
//
// ========================================================================
// Variables
// ========================================================================
@overlay-padding-horizontal: @global-gutter;
@overlay-padding-vertical: @global-gutter;
@overlay-default-background: fade(@global-background, 80%);
@overlay-primary-background: fade(@global-secondary-background, 80%);
@overlay-primary-color-mode: light;
/* ========================================================================
Component: Overlay
========================================================================== */
.uk-overlay {
padding: @overlay-padding-vertical @overlay-padding-horizontal;
.hook-overlay();
}
/*
* Remove margin from the last-child
*/
.uk-overlay > :last-child { margin-bottom: 0; }
/* Icon
========================================================================== */
.uk-overlay-icon {
.hook-overlay-icon();
}
/* Style modifiers
========================================================================== */
/*
* Default
*/
.uk-overlay-default {
background: @overlay-default-background;
.hook-overlay-default();
}
/*
* Primary
*/
.uk-overlay-primary {
background: @overlay-primary-background;
.hook-overlay-primary();
}
// Color Mode
.uk-overlay-primary:extend(.uk-light all) when (@overlay-primary-color-mode = light) {}
.uk-overlay-primary:extend(.uk-dark all) when (@overlay-primary-color-mode = dark) {}
// Hooks
// ========================================================================
.hook-overlay-misc();
.hook-overlay() {}
.hook-overlay-icon() {}
.hook-overlay-default() {}
.hook-overlay-primary() {}
.hook-overlay-misc() {}
// Name: Article
// Description: Component to create articles
//
// Component: `uk-article`
//
// Sub-objects: `uk-article-title`
// `uk-article-meta`
//
// ========================================================================
// Variables
// ========================================================================
@article-margin-top: @global-large-margin;
@article-title-font-size-m: @global-2xlarge-font-size;
@article-title-font-size: @article-title-font-size-m * 0.85;
@article-title-line-height: 1.2;
@article-meta-font-size: @global-small-font-size;
@article-meta-line-height: 1.4;
@article-meta-color: @global-muted-color;
/* ========================================================================
Component: Article
========================================================================== */
.uk-article {
display: flow-root;
.hook-article();
}
/*
* Remove margin from the last-child
*/
.uk-article > :last-child { margin-bottom: 0; }
/* Adjacent sibling
========================================================================== */
.uk-article + .uk-article {
margin-top: @article-margin-top;
.hook-article-adjacent();
}
/* Title
========================================================================== */
.uk-article-title {
font-size: @article-title-font-size;
line-height: @article-title-line-height;
.hook-article-title();
}
/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) {
.uk-article-title { font-size: @article-title-font-size-m; }
}
/* Meta
========================================================================== */
.uk-article-meta {
font-size: @article-meta-font-size;
line-height: @article-meta-line-height;
color: @article-meta-color;
.hook-article-meta();
}
// Hooks
// ========================================================================
.hook-article-misc();
.hook-article() {}
.hook-article-adjacent() {}
.hook-article-title() {}
.hook-article-meta() {}
.hook-article-misc() {}
// Inverse
// ========================================================================
@inverse-article-meta-color: @inverse-global-muted-color;
.hook-inverse() {
.uk-article-title {
.hook-inverse-article-title();
}
.uk-article-meta {
color: @inverse-article-meta-color;
.hook-inverse-article-meta();
}
}
.hook-inverse-article-title() {}
.hook-inverse-article-meta() {}
// Name: Comment
// Description: Component to create nested comments
//
// Component: `uk-comment`
//
// Sub-objects: `uk-comment-body`
// `uk-comment-header`
// `uk-comment-title`
// `uk-comment-meta`
// `uk-comment-avatar`
// `uk-comment-list`
//
// Modifier: `uk-comment-primary`
//
// ========================================================================
// Variables
// ========================================================================
@comment-header-margin-bottom: @global-margin;
@comment-title-font-size: @global-medium-font-size;
@comment-title-line-height: 1.4;
@comment-meta-font-size: @global-small-font-size;
@comment-meta-line-height: 1.4;
@comment-meta-color: @global-muted-color;
@comment-list-margin-top: @global-large-margin;
@comment-list-padding-$(startSide): 30px;
@comment-list-padding-$(startSide)-m: 100px;
/* ========================================================================
Component: Comment
========================================================================== */
.uk-comment {
.hook-comment();
}
/* Sections
========================================================================== */
.uk-comment-body {
display: flow-root;
overflow-wrap: break-word;
word-wrap: break-word;
.hook-comment-body();
}
.uk-comment-header {
display: flow-root;
margin-bottom: @comment-header-margin-bottom;
.hook-comment-header();
}
/*
* Remove margin from the last-child
*/
.uk-comment-body > :last-child,
.uk-comment-header > :last-child { margin-bottom: 0; }
/* Title
========================================================================== */
.uk-comment-title {
font-size: @comment-title-font-size;
line-height: @comment-title-line-height;
.hook-comment-title();
}
/* Meta
========================================================================== */
.uk-comment-meta {
font-size: @comment-meta-font-size;
line-height: @comment-meta-line-height;
color: @comment-meta-color;
.hook-comment-meta();
}
/* Avatar
========================================================================== */
.uk-comment-avatar {
.hook-comment-avatar();
}
/* List
========================================================================== */
.uk-comment-list {
padding: 0;
list-style: none;
}
/* Adjacent siblings */
.uk-comment-list > :nth-child(n+2) {
margin-top: @comment-list-margin-top;
.hook-comment-list-adjacent();
}
/*
* Sublists
* Note: General sibling selector allows reply block between comment and sublist
*/
.uk-comment-list .uk-comment ~ ul {
margin: @comment-list-margin-top 0 0 0;
padding-$(startSide): @comment-list-padding-$(startSide);
list-style: none;
.hook-comment-list-sub();
}
/* Tablet and bigger */
@media (min-width: @breakpoint-medium) {
.uk-comment-list .uk-comment ~ ul { padding-$(startSide): @comment-list-padding-$(startSide)-m; }
}
/* Adjacent siblings */
.uk-comment-list .uk-comment ~ ul > :nth-child(n+2) {
margin-top: @comment-list-margin-top;
.hook-comment-list-sub-adjacent();
}
/* Style modifier
========================================================================== */
.uk-comment-primary {
.hook-comment-primary();
}
// Hooks
// ========================================================================
.hook-comment-misc();
.hook-comment() {}
.hook-comment-body() {}
.hook-comment-header() {}
.hook-comment-title() {}
.hook-comment-meta() {}
.hook-comment-avatar() {}
.hook-comment-list-adjacent() {}
.hook-comment-list-sub() {}
.hook-comment-list-sub-adjacent() {}
.hook-comment-primary() {}
.hook-comment-misc() {}
// Name: Search
// Description: Component to create the search
//
// Component: `uk-search`
//
// Sub-objects: `uk-search-input`
// `uk-search-toggle`
//
// Adopted: `uk-search-icon`
//
// Modifier: `uk-search-default`
// `uk-search-navbar`
// `uk-search-large`
//
// ========================================================================
// Variables
// ========================================================================
@search-color: @global-color;
@search-placeholder-color: @global-muted-color;
@search-icon-color: @global-muted-color;
@search-default-width: 240px;
@search-default-height: @global-control-height;
@search-default-padding-horizontal: 10px;
@search-default-background: @global-muted-background;
@search-default-focus-background: darken(@search-default-background, 5%);
@search-default-icon-width: @global-control-height;
@search-default-icon-padding: 0;
@search-navbar-width: 400px;
@search-navbar-height: 40px;
@search-navbar-background: transparent;
@search-navbar-font-size: @global-large-font-size;
@search-navbar-icon-width: 40px;
@search-navbar-icon-padding: 0;
@search-large-width: 500px;
@search-large-height: 80px;
@search-large-background: transparent;
@search-large-font-size: @global-2xlarge-font-size;
@search-large-icon-width: 80px;
@search-large-icon-padding: 0;
@search-toggle-color: @global-muted-color;
@search-toggle-hover-color: @global-color;
/* ========================================================================
Component: Search
========================================================================== */
/*
* 1. Container fits its content
* 2. Create position context
* 3. Prevent content overflow
* 4. Reset `form`
*/
.uk-search {
/* 1 */
display: inline-block;
/* 2 */
position: relative;
/* 3 */
max-width: 100%;
/* 4 */
margin: 0;
}
/* Input
========================================================================== */
/*
* Remove the inner padding and cancel buttons in Chrome on OS X and Safari on OS X.
*/
.uk-search-input::-webkit-search-cancel-button,
.uk-search-input::-webkit-search-decoration { -webkit-appearance: none; }
/*
* Removes placeholder transparency in Firefox.
*/
.uk-search-input::-moz-placeholder { opacity: 1; }
/*
* 1. Define consistent box sizing.
* 2. Address margins set differently in Firefox/IE and Chrome/Safari/Opera.
* 3. Remove `border-radius` in iOS.
* 4. Change font properties to `inherit` in all browsers
* 5. Show the overflow in Edge.
* 6. Remove default style in iOS.
* 7. Vertical alignment
* 8. Take the full container width
* 9. Style
*/
.uk-search-input {
/* 1 */
box-sizing: border-box;
/* 2 */
margin: 0;
/* 3 */
border-radius: 0;
/* 4 */
font: inherit;
/* 5 */
overflow: visible;
/* 6 */
-webkit-appearance: none;
/* 7 */
vertical-align: middle;
/* 8 */
width: 100%;
/* 9 */
border: none;
color: @search-color;
.hook-search-input();
}
.uk-search-input:focus { outline: none; }
/* Placeholder */
.uk-search-input::placeholder { color: @search-placeholder-color; }
/* Icon (Adopts `uk-icon`)
========================================================================== */
/*
* Position above input
* 1. Set position
* 2. Center icon vertically and horizontally
* 3. Style
*/
.uk-search .uk-search-icon {
/* 1 */
position: absolute;
top: 0;
bottom: 0;
$(startSide): 0;
/* 2 */
display: inline-flex;
justify-content: center;
align-items: center;
/* 3 */
color: @search-icon-color;
.hook-search-icon();
}
/*
* Required for `a`.
*/
.uk-search .uk-search-icon:hover { color: @search-icon-color; }
/*
* Make `input` element clickable through icon, e.g. if it's a `span`
*/
.uk-search .uk-search-icon:not(a):not(button):not(input) { pointer-events: none; }
/*
* Position modifier
*/
.uk-search .uk-search-icon-flip {
$(endSide): 0;
$(startSide): auto;
}
/* Default modifier
========================================================================== */
.uk-search-default { width: @search-default-width; }
/*
* Input
*/
.uk-search-default .uk-search-input {
height: @search-default-height;
padding-$(startSide): @search-default-padding-horizontal;
padding-$(endSide): @search-default-padding-horizontal;
background: @search-default-background;
.hook-search-default-input();
}
/* Focus */
.uk-search-default .uk-search-input:focus {
background-color: @search-default-focus-background;
.hook-search-default-input-focus();
}
/*
* Icon
*/
.uk-search-default .uk-search-icon { width: @search-default-icon-width; }
.uk-search-default .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { padding-$(startSide): (@search-default-icon-width + @search-default-icon-padding); }
.uk-search-default .uk-search-icon-flip ~ .uk-search-input { padding-$(endSide): (@search-default-icon-width + @search-default-icon-padding); }
/* Navbar modifier
========================================================================== */
.uk-search-navbar { width: @search-navbar-width; }
/*
* Input
*/
.uk-search-navbar .uk-search-input {
height: @search-navbar-height;
background: @search-navbar-background;
font-size: @search-navbar-font-size;
.hook-search-navbar-input();
}
/* Focus */
.uk-search-navbar .uk-search-input:focus {
.hook-search-navbar-input-focus();
}
/*
* Icon
*/
.uk-search-navbar .uk-search-icon { width: @search-navbar-icon-width; }
.uk-search-navbar .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { padding-$(startSide): (@search-navbar-icon-width + @search-navbar-icon-padding); }
.uk-search-navbar .uk-search-icon-flip ~ .uk-search-input { padding-$(endSide): (@search-navbar-icon-width + @search-navbar-icon-padding); }
/* Large modifier
========================================================================== */
.uk-search-large { width: @search-large-width; }
/*
* Input
*/
.uk-search-large .uk-search-input {
height: @search-large-height;
background: @search-large-background;
font-size: @search-large-font-size;
.hook-search-large-input();
}
/* Focus */
.uk-search-large .uk-search-input:focus {
.hook-search-large-input-focus();
}
/*
* Icon
*/
.uk-search-large .uk-search-icon { width: @search-large-icon-width; }
.uk-search-large .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { padding-$(startSide): (@search-large-icon-width + @search-large-icon-padding); }
.uk-search-large .uk-search-icon-flip ~ .uk-search-input { padding-$(endSide): (@search-large-icon-width + @search-large-icon-padding); }
/* Toggle
========================================================================== */
.uk-search-toggle {
color: @search-toggle-color;
.hook-search-toggle();
}
/* Hover */
.uk-search-toggle:hover {
color: @search-toggle-hover-color;
.hook-search-toggle-hover();
}
// Hooks
// ========================================================================
.hook-search-misc();
.hook-search-input() {}
.hook-search-icon() {}
.hook-search-default-input() {}
.hook-search-default-input-focus() {}
.hook-search-navbar-input() {}
.hook-search-navbar-input-focus() {}
.hook-search-large-input() {}
.hook-search-large-input-focus() {}
.hook-search-toggle() {}
.hook-search-toggle-hover() {}
.hook-search-misc() {}
// Inverse
// ========================================================================
@inverse-search-color: @inverse-global-color;
@inverse-search-placeholder-color: @inverse-global-muted-color;
@inverse-search-icon-color: @inverse-global-muted-color;
@inverse-search-default-background: @inverse-global-muted-background;
@inverse-search-default-focus-background: fadein(@inverse-search-default-background, 5%);
@inverse-search-navbar-background: transparent;
@inverse-search-large-background: transparent;
@inverse-search-toggle-color: @inverse-global-muted-color;
@inverse-search-toggle-hover-color: @inverse-global-color;
.hook-inverse() {
//
// Input
//
.uk-search-input { color: @inverse-search-color; }
.uk-search-input::placeholder { color: @inverse-search-placeholder-color; }
//
// Icon
//
.uk-search .uk-search-icon { color: @inverse-search-icon-color; }
.uk-search .uk-search-icon:hover { color: @inverse-search-icon-color; }
//
// Style modifier
//
.uk-search-default .uk-search-input {
background-color: @inverse-search-default-background;
.hook-inverse-search-default-input();
}
.uk-search-default .uk-search-input:focus {
background-color: @inverse-search-default-focus-background;
.hook-inverse-search-default-input-focus();
}
.uk-search-navbar .uk-search-input {
background-color: @inverse-search-navbar-background;
.hook-inverse-search-navbar-input();
}
.uk-search-navbar .uk-search-input:focus {
.hook-inverse-search-navbar-input-focus();
}
.uk-search-large .uk-search-input {
background-color: @inverse-search-large-background;
.hook-inverse-search-large-input();
}
.uk-search-large .uk-search-input:focus {
.hook-inverse-search-large-input-focus();
}
//
// Toggle
//
.uk-search-toggle {
color: @inverse-search-toggle-color;
.hook-inverse-search-toggle();
}
.uk-search-toggle:hover {
color: @inverse-search-toggle-hover-color;
.hook-inverse-search-toggle-hover();
}
}
.hook-inverse-search-default-input() {}
.hook-inverse-search-default-input-focus() {}
.hook-inverse-search-navbar-input() {}
.hook-inverse-search-navbar-input-focus() {}
.hook-inverse-search-large-input() {}
.hook-inverse-search-large-input-focus() {}
.hook-inverse-search-toggle() {}
.hook-inverse-search-toggle-hover() {}
// JavaScript
// Name: Accordion
// Description: Component to create accordions
//
// Component: `uk-accordion`
//
// Sub-objects: `uk-accordion-title`
// `uk-accordion-content`
//
// States: `uk-open`
//
// ========================================================================
// Variables
// ========================================================================
@accordion-item-margin-top: @global-margin;
@accordion-title-font-size: @global-medium-font-size;
@accordion-title-line-height: 1.4;
@accordion-title-color: @global-emphasis-color;
@accordion-title-hover-color: @global-color;
@accordion-content-margin-top: @global-margin;
/* ========================================================================
Component: Accordion
========================================================================== */
.uk-accordion {
padding: 0;
list-style: none;
.hook-accordion();
}
/* Item
========================================================================== */
.uk-accordion > :nth-child(n+2) {
margin-top: @accordion-item-margin-top;
.hook-accordion-item();
}
/* Title
========================================================================== */
.uk-accordion-title {
display: block;
font-size: @accordion-title-font-size;
line-height: @accordion-title-line-height;
color: @accordion-title-color;
.hook-accordion-title();
}
/* Hover */
.uk-accordion-title:hover {
color: @accordion-title-hover-color;
text-decoration: none;
.hook-accordion-title-hover();
}
/* Content
========================================================================== */
.uk-accordion-content {
display: flow-root;
margin-top: @accordion-content-margin-top;
.hook-accordion-content();
}
/*
* Remove margin from the last-child
*/
.uk-accordion-content > :last-child { margin-bottom: 0; }
// Hooks
// ========================================================================
.hook-accordion-misc();
.hook-accordion() {}
.hook-accordion-item() {}
.hook-accordion-title() {}
.hook-accordion-title-hover() {}
.hook-accordion-content() {}
.hook-accordion-misc() {}
// Inverse
// ========================================================================
@inverse-accordion-title-color: @inverse-global-emphasis-color;
@inverse-accordion-title-hover-color: @inverse-global-color;
.hook-inverse() {
.uk-accordion > :nth-child(n+2) {
.hook-inverse-accordion-item();
}
.uk-accordion-title {
color: @inverse-accordion-title-color;
.hook-inverse-accordion-title();
}
.uk-accordion-title:hover {
color: @inverse-accordion-title-hover-color;
.hook-inverse-accordion-title-hover();
}
}
.hook-inverse-accordion-item() {}
.hook-inverse-accordion-title() {}
.hook-inverse-accordion-title-hover() {}
// Name: Drop
// Description: Component to position any element next to any other element.
//
// Component: `uk-drop`
//
// Modifiers: `uk-drop-stack`
// `uk-drop-grid`
//
// States: `uk-open`
//
// Uses: Animation
//
// ========================================================================
// Variables
// ========================================================================
@drop-z-index: @global-z-index + 20;
@drop-margin: @global-margin;
@drop-viewport-margin: 15px;
@drop-width: 300px;
/* ========================================================================
Component: Drop
========================================================================== */
/*
* 1. Hide by default
* 2. Set position
* 3. Set a default width
*/
.uk-drop {
/* 1 */
display: none;
/* 2 */
position: absolute;
z-index: @drop-z-index;
--uk-position-offset: @drop-margin;
--uk-position-viewport-offset: @drop-viewport-margin;
/* 3 */
box-sizing: border-box;
width: @drop-width;
}
/* Show */
.uk-drop.uk-open { display: block; }
/* Grid modifiers
========================================================================== */
.uk-drop-stack .uk-drop-grid > * { width: 100% !important; }
// Hooks
// ========================================================================
.hook-drop-misc();
.hook-drop-misc() {}
// Name: Dropdown
// Description: Component to create dropdown menus
//
// Component: `uk-dropdown`
//
// Adopted: `uk-dropdown-nav`
//
// Modifiers: `uk-dropdown-large`
// `uk-dropdown-stack`
// `uk-dropdown-grid`
//
// States: `uk-active`
//
// ========================================================================
// Variables
// ========================================================================
@dropdown-z-index: @global-z-index + 20;
@dropdown-margin: @global-small-margin;
@dropdown-viewport-margin: 15px;
@dropdown-min-width: 200px;
@dropdown-padding: 15px;
@dropdown-background: @global-muted-background;
@dropdown-color: @global-color;
@dropdown-color-mode: none;
@dropdown-large-padding: 40px;
@dropdown-nav-item-color: @global-muted-color;
@dropdown-nav-item-hover-color: @global-color;
@dropdown-nav-subtitle-font-size: @global-small-font-size;
@dropdown-nav-header-color: @global-emphasis-color;
@dropdown-nav-divider-border-width: @global-border-width;
@dropdown-nav-divider-border: @global-border;
@dropdown-nav-sublist-item-color: @global-muted-color;
@dropdown-nav-sublist-item-hover-color: @global-color;
/* ========================================================================
Component: Dropdown
========================================================================== */
/*
* 1. Hide by default
* 2. Set position
* 3. Set a default width
* 4. Style
*/
.uk-dropdown {
/* 1 */
display: none;
/* 2 */
position: absolute;
z-index: @dropdown-z-index;
--uk-position-offset: @dropdown-margin;
--uk-position-viewport-offset: @dropdown-viewport-margin;
/* 3 */
box-sizing: border-box;
min-width: @dropdown-min-width;
/* 4 */
padding: @dropdown-padding;
background: @dropdown-background;
color: @dropdown-color;
.hook-dropdown();
}
/* Show */
.uk-dropdown.uk-open { display: block; }
/*
* Remove margin from the last-child
*/
.uk-dropdown > :last-child { margin-bottom: 0; }
// Color Mode
.uk-dropdown:extend(.uk-light all) when (@dropdown-color-mode = light) {}
.uk-dropdown:extend(.uk-dark all) when (@dropdown-color-mode = dark) {}
/* Size modifier
========================================================================== */
.uk-dropdown-large { padding: @dropdown-large-padding; }
/* Nav
* Adopts `uk-nav`
========================================================================== */
.uk-dropdown-nav {
.hook-dropdown-nav();
}
/*
* Items
*/
.uk-dropdown-nav > li > a {
color: @dropdown-nav-item-color;
.hook-dropdown-nav-item();
}
/* Hover + Active */
.uk-dropdown-nav > li > a:hover,
.uk-dropdown-nav > li.uk-active > a {
color: @dropdown-nav-item-hover-color;
.hook-dropdown-nav-item-hover();
}
/*
* Subtitle
*/
.uk-dropdown-nav .uk-nav-subtitle {
font-size: @dropdown-nav-subtitle-font-size;
.hook-dropdown-nav-subtitle();
}
/*
* Header
*/
.uk-dropdown-nav .uk-nav-header {
color: @dropdown-nav-header-color;
.hook-dropdown-nav-header();
}
/*
* Divider
*/
.uk-dropdown-nav .uk-nav-divider {
border-top: @dropdown-nav-divider-border-width solid @dropdown-nav-divider-border;
.hook-dropdown-nav-divider();
}
/*
* Sublists
*/
.uk-dropdown-nav .uk-nav-sub a { color: @dropdown-nav-sublist-item-color; }
.uk-dropdown-nav .uk-nav-sub a:hover,
.uk-dropdown-nav .uk-nav-sub li.uk-active > a { color: @dropdown-nav-sublist-item-hover-color; }
/* Grid modifiers
========================================================================== */
.uk-dropdown-stack .uk-dropdown-grid > * { width: 100% !important; }
// Hooks
// ========================================================================
.hook-dropdown-misc();
.hook-dropdown() {}
.hook-dropdown-nav() {}
.hook-dropdown-nav-item() {}
.hook-dropdown-nav-item-hover() {}
.hook-dropdown-nav-subtitle() {}
.hook-dropdown-nav-header() {}
.hook-dropdown-nav-divider() {}
.hook-dropdown-misc() {}
// Name: Dropbar
// Description: Component to create dropbar menus
//
// Component: `uk-dropbar`
//
// ========================================================================
// Variables
// ========================================================================
@dropbar-margin: 0;
@dropbar-z-index: @global-z-index + 20;
@dropbar-padding-top: 15px;
@dropbar-padding-bottom: @dropbar-padding-top;
@dropbar-padding-horizontal: 15px;
@dropbar-padding-horizontal-s: @global-gutter;
@dropbar-padding-horizontal-m: @global-medium-gutter;
@dropbar-background: @global-muted-background;
@dropbar-color: @global-color;
@dropbar-color-mode: none;
@dropbar-large-padding-top: 40px;
@dropbar-large-padding-bottom: @dropbar-large-padding-top;
/* ========================================================================
Component: Dropbar
========================================================================== */
/*
* 1. Hide by default
* 2. Set position
* 3. Style
*/
.uk-dropbar {
--uk-position-offset: @dropbar-margin;
--uk-position-shift-offset: 0;
--uk-position-viewport-offset: 0;
/* 1 */
display: none;
/* 2 */
position: absolute;
z-index: @dropbar-z-index;
/* 3 */
box-sizing: border-box;
padding: @dropbar-padding-top @dropbar-padding-horizontal @dropbar-padding-bottom @dropbar-padding-horizontal;
background: @dropbar-background;
color: @dropbar-color;
.hook-dropbar();
}
/* Show */
.uk-dropbar.uk-open { display: block; }
/*
* Remove margin from the last-child
*/
.uk-dropbar > :last-child { margin-bottom: 0; }
/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {
.uk-dropbar {
padding-$(startSide): @dropbar-padding-horizontal-s;
padding-$(endSide): @dropbar-padding-horizontal-s;
}
}
/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) {
.uk-dropbar {
padding-$(startSide): @dropbar-padding-horizontal-m;
padding-$(endSide): @dropbar-padding-horizontal-m;
}
}
// Color Mode
.uk-dropbar:extend(.uk-light all) when (@dropbar-color-mode = light) {}
.uk-dropbar:extend(.uk-dark all) when (@dropbar-color-mode = dark) {}
/* Size modifier
========================================================================== */
.uk-dropbar-large {
padding-top: @dropbar-large-padding-top;
padding-bottom: @dropbar-large-padding-bottom;
}
/* Direction modifier
========================================================================== */
.uk-dropbar-top {
.hook-dropbar-top();
}
.uk-dropbar-bottom {
.hook-dropbar-bottom();
}
.uk-dropbar-$(startSide) {
.hook-dropbar-$(startSide)();
}
.uk-dropbar-$(endSide) {
.hook-dropbar-$(endSide)();
}
// Hooks
// ========================================================================
.hook-dropbar-misc();
.hook-dropbar() {}
.hook-dropbar-top() {}
.hook-dropbar-bottom() {}
.hook-dropbar-$(startSide)() {}
.hook-dropbar-$(endSide)() {}
.hook-dropbar-misc() {}
// Name: Modal
// Description: Component to create modal dialogs
//
// Component: `uk-modal`
//
// Sub-objects: `uk-modal-page`
// `uk-modal-dialog`
// `uk-modal-header`
// `uk-modal-body`
// `uk-modal-footer`
// `uk-modal-title`
// `uk-modal-close`
//
// Adopted: `uk-modal-close-default`
// `uk-modal-close-outside`
// `uk-modal-close-full`
//
// Modifiers: `uk-modal-container`
// `uk-modal-full`
//
// States: `uk-open`
//
// ========================================================================
// Variables
// ========================================================================
@modal-z-index: @global-z-index + 10;
@modal-background: rgba(0,0,0,0.6);
@modal-padding-horizontal: 15px;
@modal-padding-horizontal-s: @global-gutter;
@modal-padding-horizontal-m: @global-medium-gutter;
@modal-padding-vertical: @modal-padding-horizontal;
@modal-padding-vertical-s: 50px;
@modal-dialog-width: 600px;
@modal-dialog-background: @global-background;
@modal-container-width: 1200px;
@modal-body-padding-horizontal: 20px;
@modal-body-padding-vertical: 20px;
@modal-body-padding-horizontal-s: @global-gutter;
@modal-body-padding-vertical-s: @global-gutter;
@modal-header-padding-horizontal: 20px;
@modal-header-padding-vertical: (@modal-header-padding-horizontal / 2);
@modal-header-padding-horizontal-s: @global-gutter;
@modal-header-padding-vertical-s: (@modal-header-padding-horizontal-s / 2);
@modal-header-background: @global-muted-background;
@modal-footer-padding-horizontal: 20px;
@modal-footer-padding-vertical: (@modal-footer-padding-horizontal / 2);
@modal-footer-padding-horizontal-s: @global-gutter;
@modal-footer-padding-vertical-s: (@modal-footer-padding-horizontal-s / 2);
@modal-footer-background: @global-muted-background;
@modal-title-font-size: @global-xlarge-font-size;
@modal-title-line-height: 1.3;
@modal-close-position: @global-small-margin;
@modal-close-padding: 5px;
@modal-close-outside-position: 0;
@modal-close-outside-translate: 100%;
@modal-close-outside-color: lighten(@global-inverse-color, 20%);
@modal-close-outside-hover-color: @global-inverse-color;
/* ========================================================================
Component: Modal
========================================================================== */
/*
* 1. Hide by default
* 2. Set position
* 3. Allow scrolling for the modal dialog
* 4. Horizontal padding
* 5. Mask the background page
* 6. Fade-in transition
*/
.uk-modal {
/* 1 */
display: none;
/* 2 */
position: fixed;
top: 0;
$(endSide): 0;
bottom: 0;
$(startSide): 0;
z-index: @modal-z-index;
/* 3 */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
/* 4 */
padding: @modal-padding-vertical @modal-padding-horizontal;
/* 5 */
background: @modal-background;
/* 6 */
opacity: 0;
transition: opacity 0.15s linear;
.hook-modal();
}
/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {
.uk-modal { padding: @modal-padding-vertical-s @modal-padding-horizontal-s; }
}
/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) {
.uk-modal {
padding-$(startSide): @modal-padding-horizontal-m;
padding-$(endSide): @modal-padding-horizontal-m;
}
}
/*
* Open
*/
.uk-modal.uk-open { opacity: 1; }
/* Page
========================================================================== */
/*
* Prevent scrollbars
*/
.uk-modal-page { overflow: hidden; }
/* Dialog
========================================================================== */
/*
* 1. Create position context for spinner and close button
* 2. Dimensions
* 3. `!important` is needed to overwrite `uk-width-auto`. See `#modal-media-image` in tests
* 4. Style
* 5. Slide-in transition
*/
.uk-modal-dialog {
/* 1 */
position: relative;
/* 2 */
box-sizing: border-box;
margin: 0 auto;
width: @modal-dialog-width;
/* 3 */
max-width: 100% !important;
/* 4 */
background: @modal-dialog-background;
/* 5 */
opacity: 0;
transform: translateY(-100px);
transition: 0.3s linear;
transition-property: opacity, transform;
.hook-modal-dialog();
}
/*
* Open
*/
.uk-open > .uk-modal-dialog {
opacity: 1;
transform: translateY(0);
}
/* Size modifier
========================================================================== */
/*
* Container size
* Take the same size as the Container component
*/
.uk-modal-container .uk-modal-dialog { width: @modal-container-width; }
/*
* Full size
* 1. Remove padding and background from modal
* 2. Reset all default declarations from modal dialog
*/
/* 1 */
.uk-modal-full {
padding: 0;
background: none;
}
/* 2 */
.uk-modal-full .uk-modal-dialog {
margin: 0;
width: 100%;
max-width: 100%;
transform: translateY(0);
.hook-modal-full();
}
/* Sections
========================================================================== */
.uk-modal-body {
display: flow-root;
padding: @modal-body-padding-vertical @modal-body-padding-horizontal;
.hook-modal-body();
}
.uk-modal-header {
display: flow-root;
padding: @modal-header-padding-vertical @modal-header-padding-horizontal;
background: @modal-header-background;
.hook-modal-header();
}
.uk-modal-footer {
display: flow-root;
padding: @modal-footer-padding-vertical @modal-footer-padding-horizontal;
background: @modal-footer-background;
.hook-modal-footer();
}
/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {
.uk-modal-body { padding: @modal-body-padding-vertical-s @modal-body-padding-horizontal-s; }
.uk-modal-header { padding: @modal-header-padding-vertical-s @modal-header-padding-horizontal-s; }
.uk-modal-footer { padding: @modal-footer-padding-vertical-s @modal-footer-padding-horizontal-s; }
}
/*
* Remove margin from the last-child
*/
.uk-modal-body > :last-child,
.uk-modal-header > :last-child,
.uk-modal-footer > :last-child { margin-bottom: 0; }
/* Title
========================================================================== */
.uk-modal-title {
font-size: @modal-title-font-size;
line-height: @modal-title-line-height;
.hook-modal-title();
}
/* Close
* Adopts `uk-close`
========================================================================== */
[class*='uk-modal-close-'] {
position: absolute;
z-index: @modal-z-index;
top: @modal-close-position;
$(endSide): @modal-close-position;
padding: @modal-close-padding;
.hook-modal-close();
}
/*
* Remove margin from adjacent element
*/
[class*='uk-modal-close-']:first-child + * { margin-top: 0; }
/*
* Hover
*/
[class*='uk-modal-close-']:hover {
.hook-modal-close-hover();
}
/*
* Default
*/
.uk-modal-close-default {
.hook-modal-close-default();
}
.uk-modal-close-default:hover {
.hook-modal-close-default-hover();
}
/*
* Outside
* 1. Prevent scrollbar on small devices
*/
.uk-modal-close-outside {
top: @modal-close-outside-position;
/* 1 */
$(endSide): -@modal-close-padding;
transform: translate(0, -(@modal-close-outside-translate));
color: @modal-close-outside-color;
.hook-modal-close-outside();
}
.uk-modal-close-outside:hover {
color: @modal-close-outside-hover-color;
.hook-modal-close-outside-hover();
}
/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) {
/* 1 */
.uk-modal-close-outside {
$(endSide): @modal-close-outside-position;
transform: translate(@modal-close-outside-translate, -(@modal-close-outside-translate));
}
}
/*
* Full
*/
.uk-modal-close-full {
.hook-modal-close-full();
}
.uk-modal-close-full:hover {
.hook-modal-close-full-hover();
}
// Hooks
// ========================================================================
.hook-modal-misc();
.hook-modal() {}
.hook-modal-dialog() {}
.hook-modal-full() {}
.hook-modal-header() {}
.hook-modal-body() {}
.hook-modal-footer() {}
.hook-modal-title() {}
.hook-modal-close() {}
.hook-modal-close-hover() {}
.hook-modal-close-default() {}
.hook-modal-close-default-hover() {}
.hook-modal-close-outside() {}
.hook-modal-close-outside-hover() {}
.hook-modal-close-full() {}
.hook-modal-close-full-hover() {}
.hook-modal-misc() {}
// Name: Slideshow
// Description: Component to create slideshows
//
// Component: `uk-slideshow`
//
// Sub-objects: `uk-slideshow-items`
//
// States: `uk-active`
//
// ========================================================================
/* ========================================================================
Component: Slideshow
========================================================================== */
/*
* 1. Prevent tab highlighting on iOS.
*/
.uk-slideshow {
/* 1 */
-webkit-tap-highlight-color: transparent;
.hook-slideshow();
}
/* Items
========================================================================== */
/*
* 1. Create position and stacking context
* 2. Reset list
* 3. Clip child elements
* 4. Prevent displaying the callout information on iOS.
* 5. Disable horizontal panning gestures
*/
.uk-slideshow-items {
/* 1 */
position: relative;
z-index: 0;
/* 2 */
margin: 0;
padding: 0;
list-style: none;
/* 3 */
overflow: hidden;
/* 4 */
-webkit-touch-callout: none;
/* 5 */
touch-action: pan-y;
}
/* Item
========================================================================== */
/*
* 1. Position items above each other
* 2. Take the full width
* 3. Clip child elements, e.g. for `uk-cover`
* 4. Optimize animation
*/
.uk-slideshow-items > * {
/* 1 */
position: absolute;
top: 0;
$(startSide): 0;
/* 2 */
$(endSide): 0;
bottom: 0;
/* 3 */
overflow: hidden;
/* 4 */
will-change: transform, opacity;
}
/*
* Hide not active items
*/
.uk-slideshow-items > :not(.uk-active) { display: none; }
// Hooks
// ========================================================================
.hook-slideshow-misc();
.hook-slideshow() {}
.hook-slideshow-misc() {}
// Name: Slider
// Description: Component to create horizontal sliders
//
// Component: `uk-slider`
//
// Sub-objects: `uk-slider-container`
// `uk-slider-items`
//
// States: `uk-active`
//
// ========================================================================
// Variables
// ========================================================================
@slider-container-margin-top: -11px;
@slider-container-margin-bottom: -39px;
@slider-container-margin-$(startSide): -25px;
@slider-container-margin-$(endSide): -25px;
/* ========================================================================
Component: Slider
========================================================================== */
/*
* 1. Prevent tab highlighting on iOS.
*/
.uk-slider {
/* 1 */
-webkit-tap-highlight-color: transparent;
.hook-slider();
}
/* Container
========================================================================== */
/*
* Clip child elements
*/
.uk-slider-container { overflow: hidden; }
/*
* Widen container to prevent box-shadows from clipping, `large-box-shadow`
*/
.uk-slider-container-offset {
margin: @slider-container-margin-top @slider-container-margin-$(endSide) @slider-container-margin-bottom @slider-container-margin-$(startSide);
padding: (@slider-container-margin-top * -1) (@slider-container-margin-$(endSide) * -1) (@slider-container-margin-bottom * -1) (@slider-container-margin-$(startSide) * -1);
}
/* Items
========================================================================== */
/*
* 1. Optimize animation
* 2. Create a containing block. In Safari it's neither created by `transform` nor `will-change`.
* 3. Disable horizontal panning gestures
*/
.uk-slider-items {
/* 1 */
will-change: transform;
/* 2 */
position: relative;
/* 3 */
touch-action: pan-y;
}
/*
* 1. Reset list style without interfering with grid
* 2. Prevent displaying the callout information on iOS.
*/
.uk-slider-items:not(.uk-grid) {
display: flex;
/* 1 */
margin: 0;
padding: 0;
list-style: none;
/* 2 */
-webkit-touch-callout: none;
}
.uk-slider-items.uk-grid { flex-wrap: nowrap; }
/* Item
========================================================================== */
/*
* 1. Let items take content dimensions (0 0 auto)
* `max-width` needed to keep image responsiveness and prevent content overflow
* 3. Create position context
*/
.uk-slider-items > * {
/* 1 */
flex: none;
max-width: 100%;
/* 3 */
position: relative;
}
// Hooks
// ========================================================================
.hook-slider-misc();
.hook-slider() {}
.hook-slider-misc() {}
// Name: Sticky
// Description: Component to make elements sticky in the viewport
//
// Component: `uk-sticky`
//
// Modifier: `uk-sticky-fixed`
//
// States: `uk-active`
//
// ========================================================================
// Variables
// ========================================================================
@sticky-z-index: @global-z-index - 20;
@sticky-animation-duration: 0.2s;
@sticky-reverse-animation-duration: 0.2s;
/* ========================================================================
Component: Sticky
========================================================================== */
/*
* 1. Create position context so it's t the same like when fixed.
* 2. Create stacking context already when not sticky to have the same context
* for position set to `sticky` and `relative`
* 2. More robust if padding and border are used and the sticky height is transitioned
*/
.uk-sticky {
/* 1 */
position: relative;
/* 2 */
z-index: @sticky-z-index;
/* 3 */
box-sizing: border-box;
}
/*
* 1. Force new layer to resolve frame rate issues on devices with lower frame rates
*/
.uk-sticky-fixed {
margin: 0 !important;
/* 1 */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/*
* Faster animations
*/
.uk-sticky[class*='uk-animation-'] { animation-duration: @sticky-animation-duration; }
.uk-sticky.uk-animation-reverse { animation-duration: @sticky-reverse-animation-duration; }
/*
* Placeholder
* Make content clickable for sticky cover and reveal effects
*/
.uk-sticky-placeholder { pointer-events: none; }
// Hooks
// ========================================================================
.hook-sticky-misc();
.hook-sticky-misc() {}
// Name: Off-canvas
// Description: Component to create an off-canvas sidebar
//
// Component: `uk-offcanvas`
//
// Sub-objects: `uk-offcanvas-bar`
// `uk-offcanvas-container`
// `uk-offcanvas-page`
//
// Adopted: `uk-offcanvas-close`
//
// Modifiers: `uk-offcanvas-flip`
// `uk-offcanvas-bar-animation`
// `uk-offcanvas-reveal`
// `uk-offcanvas-overlay`
// `uk-offcanvas-container-animation`
//
// States: `uk-open`
//
// ========================================================================
// Variables
// ========================================================================
@offcanvas-z-index: @global-z-index;
@offcanvas-bar-width: 270px;
@offcanvas-bar-padding-vertical: 20px;
@offcanvas-bar-padding-horizontal: 20px;
@offcanvas-bar-background: @global-secondary-background;
@offcanvas-bar-color-mode: light;
@offcanvas-bar-width-s: 350px;
@offcanvas-bar-padding-vertical-s: @global-gutter;
@offcanvas-bar-padding-horizontal-s: @global-gutter;
@offcanvas-close-position: 5px;
@offcanvas-close-padding: 5px;
@offcanvas-close-position-s: 10px;
@offcanvas-overlay-background: rgba(0,0,0,0.1);
/* ========================================================================
Component: Off-canvas
========================================================================== */
/*
* 1. Hide by default
* 2. Set position
*/
.uk-offcanvas {
/* 1 */
display: none;
/* 2 */
position: fixed;
top: 0;
bottom: 0;
$(startSide): 0;
z-index: @offcanvas-z-index;
}
/*
* Flip modifier
*/
.uk-offcanvas-flip .uk-offcanvas {
$(endSide): 0;
$(startSide): auto;
}
/* Bar
========================================================================== */
/*
* 1. Set position
* 2. Size and style
* 3. Allow scrolling
*/
.uk-offcanvas-bar {
/* 1 */
position: absolute;
top: 0;
bottom: 0;
$(startSide): -@offcanvas-bar-width;
/* 2 */
box-sizing: border-box;
width: @offcanvas-bar-width;
padding: @offcanvas-bar-padding-vertical @offcanvas-bar-padding-horizontal;
background: @offcanvas-bar-background;
/* 3 */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
.hook-offcanvas-bar();
}
/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {
.uk-offcanvas-bar {
$(startSide): -@offcanvas-bar-width-s;
width: @offcanvas-bar-width-s;
padding: @offcanvas-bar-padding-vertical-s @offcanvas-bar-padding-horizontal-s;
}
}
// Color Mode
.uk-offcanvas-bar:extend(.uk-light all) when (@offcanvas-bar-color-mode = light) {}
.uk-offcanvas-bar:extend(.uk-dark all) when (@offcanvas-bar-color-mode = dark) {}
/* Flip modifier */
.uk-offcanvas-flip .uk-offcanvas-bar {
$(startSide): auto;
$(endSide): -@offcanvas-bar-width;
}
/* Tablet landscape and bigger */
@media (min-width: @breakpoint-small) {
.uk-offcanvas-flip .uk-offcanvas-bar { $(endSide): -@offcanvas-bar-width-s; }
}
/*
* Open
*/
.uk-open > .uk-offcanvas-bar { $(startSide): 0; }
.uk-offcanvas-flip .uk-open > .uk-offcanvas-bar {
$(startSide): auto;
$(endSide): 0;
}
/*
* Slide Animation (Used in slide and push mode)
*/
.uk-offcanvas-bar-animation { transition: $(startSide) 0.3s ease-out; }
.uk-offcanvas-flip .uk-offcanvas-bar-animation { transition-property: $(endSide); }
/*
* Reveal Animation
* 1. Set position
* 2. Clip the bar
* 3. Animation
* 4. Reset position
*/
.uk-offcanvas-reveal {
/* 1 */
position: absolute;
top: 0;
bottom: 0;
$(startSide): 0;
/* 2 */
width: 0;
overflow: hidden;
/* 3 */
transition: width 0.3s ease-out;
}
.uk-offcanvas-reveal .uk-offcanvas-bar {
/* 4 */
$(startSide): 0;
}
.uk-offcanvas-flip .uk-offcanvas-reveal .uk-offcanvas-bar {
/* 4 */
$(startSide): auto;
$(endSide): 0;
}
.uk-open > .uk-offcanvas-reveal { width: @offcanvas-bar-width; }
/* Tablet landscape and bigger */
@media (min-width: @breakpoint-small) {
.uk-open > .uk-offcanvas-reveal { width: @offcanvas-bar-width-s; }
}
/*
* Flip modifier
*/
.uk-offcanvas-flip .uk-offcanvas-reveal {
$(endSide): 0;
$(startSide): auto;
}
/* Close
* Adopts `uk-close`
========================================================================== */
.uk-offcanvas-close {
position: absolute;
z-index: @offcanvas-z-index;
top: @offcanvas-close-position;
$(endSide): @offcanvas-close-position;
padding: @offcanvas-close-padding;
.hook-offcanvas-close();
}
/* Tablet landscape and bigger */
@media (min-width: @breakpoint-small) {
.uk-offcanvas-close {
top: @offcanvas-close-position-s;
$(endSide): @offcanvas-close-position-s;
}
}
/*
* Remove margin from adjacent element
*/
.uk-offcanvas-close:first-child + * { margin-top: 0; }
/* Overlay
========================================================================== */
/*
* Overlay the whole page. Needed for the `::before`
* 1. Using `100vw` so no modification is needed when off-canvas is flipped
* 2. Allow for closing with swipe gesture on devices with pointer events.
*/
.uk-offcanvas-overlay {
/* 1 */
width: 100vw;
/* 2 */
touch-action: none;
}
/*
* 1. Mask the whole page
* 2. Fade-in transition
*/
.uk-offcanvas-overlay::before {
/* 1 */
content: "";
position: absolute;
top: 0;
bottom: 0;
$(startSide): 0;
$(endSide): 0;
background: @offcanvas-overlay-background;
/* 2 */
opacity: 0;
transition: opacity 0.15s linear;
.hook-offcanvas-overlay();
}
.uk-offcanvas-overlay.uk-open::before { opacity: 1; }
/* Prevent scrolling
========================================================================== */
/*
* Prevent horizontal scrollbar when the content is slide-out
* Has to be on the `html` element too to make it work on the `body`
* 1. `clip` is needed for `position: sticky` elements to keep their position
*/
.uk-offcanvas-page,
.uk-offcanvas-container {
overflow-x: hidden;
/* 1 */
overflow-x: clip;
}
/* Container
========================================================================== */
/*
* Prepare slide-out animation (Used in reveal and push mode)
* Using `position: $(startSide)` instead of `transform` because position `fixed` elements like sticky navbars
* lose their fixed state and behaves like `absolute` within a transformed container
* 1. Provide a fixed width and prevent shrinking
*/
.uk-offcanvas-container {
position: relative;
$(startSide): 0;
transition: $(startSide) 0.3s ease-out;
/* 1 */
box-sizing: border-box;
width: 100%;
}
/*
* Activate slide-out animation
*/
:not(.uk-offcanvas-flip).uk-offcanvas-container-animation { $(startSide): @offcanvas-bar-width; }
.uk-offcanvas-flip.uk-offcanvas-container-animation { $(startSide): -@offcanvas-bar-width; }
/* Tablet landscape and bigger */
@media (min-width: @breakpoint-small) {
:not(.uk-offcanvas-flip).uk-offcanvas-container-animation { $(startSide): @offcanvas-bar-width-s; }
.uk-offcanvas-flip.uk-offcanvas-container-animation { $(startSide): -@offcanvas-bar-width-s; }
}
// Hooks
// ========================================================================
.hook-offcanvas-misc();
.hook-offcanvas-bar() {}
.hook-offcanvas-close() {}
.hook-offcanvas-overlay() {}
.hook-offcanvas-misc() {}
// Name: Switcher
// Description: Component to navigate through different content panes
//
// Component: `uk-switcher`
//
// States: `uk-active`
//
// ========================================================================
/* ========================================================================
Component: Switcher
========================================================================== */
/*
* Reset list
*/
.uk-switcher {
margin: 0;
padding: 0;
list-style: none;
}
/* Items
========================================================================== */
/*
* Hide not active items
*/
.uk-switcher > :not(.uk-active) { display: none; }
/*
* Remove margin from the last-child
*/
.uk-switcher > * > :last-child { margin-bottom: 0; }
// Hooks
// ========================================================================
.hook-switcher-misc();
.hook-switcher-misc() {}
// Name: Leader
// Description: Component to create dot leaders
//
// Component: `uk-leader`
//
// ========================================================================
// Variables
// ========================================================================
@leader-fill-content: ~'.';
@leader-fill-margin-$(startSide): @global-small-gutter;
/* ========================================================================
Component: Leader
========================================================================== */
.uk-leader { overflow: hidden; }
/*
* 1. Place element in text flow
* 2. Never break into a new line
* 3. Get a string back with as many repeating characters to fill the container
* 4. Prevent wrapping. Overflowing characters will be clipped by the container
*/
.uk-leader-fill::after {
/* 1 */
display: inline-block;
margin-$(startSide): @leader-fill-margin-$(startSide);
/* 2 */
width: 0;
/* 3 */
content: attr(data-fill);
/* 4 */
white-space: nowrap;
.hook-leader();
}
/*
* Hide if media does not match
*/
.uk-leader-fill.uk-leader-hide::after { display: none; }
/*
* Pass fill character to JS
*/
:root { --uk-leader-fill-content: @leader-fill-content; }
// Hooks
// ========================================================================
.hook-leader-misc();
.hook-leader() {}
.hook-leader-misc() {}
// Inverse
// ========================================================================
.hook-inverse() {
.uk-leader-fill::after {
.hook-inverse-leader();
}
}
.hook-inverse-leader() {}
// Name: Notification
// Description: Component to create notification messages
//
// Component: `uk-notification`
//
// Sub-objects: `uk-notification-message`
//
// Adopted: `uk-notification-close`
//
// Modifiers: `uk-notification-top-center`
// `uk-notification-top-$(endSide)`
// `uk-notification-bottom-$(startSide)`
// `uk-notification-bottom-center`
// `uk-notification-bottom-$(endSide)`
// `uk-notification-message-primary`
// `uk-notification-message-success`
// `uk-notification-message-warning`
// `uk-notification-message-danger`
//
// ========================================================================
// Variables
// ========================================================================
@notification-position: 10px;
@notification-z-index: @global-z-index + 40;
@notification-width: 350px;
@notification-message-margin-top: 10px;
@notification-message-padding: @global-small-gutter;
@notification-message-background: @global-muted-background;
@notification-message-color: @global-color;
@notification-message-font-size: @global-medium-font-size;
@notification-message-line-height: 1.4;
@notification-close-top: @notification-message-padding + 5px;
@notification-close-$(endSide): @notification-message-padding;
@notification-message-primary-color: @global-primary-background;
@notification-message-success-color: @global-success-background;
@notification-message-warning-color: @global-warning-background;
@notification-message-danger-color: @global-danger-background;
/* ========================================================================
Component: Notification
========================================================================== */
/*
* 1. Set position
* 2. Dimensions
*/
.uk-notification {
/* 1 */
position: fixed;
top: @notification-position;
$(startSide): @notification-position;
z-index: @notification-z-index;
/* 2 */
box-sizing: border-box;
width: @notification-width;
.hook-notification();
}
/* Position modifiers
========================================================================== */
.uk-notification-top-$(endSide),
.uk-notification-bottom-$(endSide) {
$(startSide): auto;
$(endSide): @notification-position;
}
.uk-notification-top-center,
.uk-notification-bottom-center {
$(startSide): 50%;
margin-$(startSide): (@notification-width / -2);
}
.uk-notification-bottom-$(startSide),
.uk-notification-bottom-$(endSide),
.uk-notification-bottom-center {
top: auto;
bottom: @notification-position;
}
/* Responsiveness
========================================================================== */
/* Phones portrait and smaller */
@media (max-width: @breakpoint-xsmall-max) {
.uk-notification {
$(startSide): @notification-position;
$(endSide): @notification-position;
width: auto;
margin: 0;
}
}
/* Message
========================================================================== */
.uk-notification-message {
position: relative;
padding: @notification-message-padding;
background: @notification-message-background;
color: @notification-message-color;
font-size: @notification-message-font-size;
line-height: @notification-message-line-height;
cursor: pointer;
.hook-notification-message();
}
* + .uk-notification-message { margin-top: @notification-message-margin-top; }
/* Close
* Adopts `uk-close`
========================================================================== */
.uk-notification-close {
display: none;
position: absolute;
top: @notification-close-top;
$(endSide): @notification-close-$(endSide);
.hook-notification-close();
}
.uk-notification-message:hover .uk-notification-close { display: block; }
/* Style modifiers
========================================================================== */
/*
* Primary
*/
.uk-notification-message-primary {
color: @notification-message-primary-color;
.hook-notification-message-primary();
}
/*
* Success
*/
.uk-notification-message-success {
color: @notification-message-success-color;
.hook-notification-message-success();
}
/*
* Warning
*/
.uk-notification-message-warning {
color: @notification-message-warning-color;
.hook-notification-message-warning();
}
/*
* Danger
*/
.uk-notification-message-danger {
color: @notification-message-danger-color;
.hook-notification-message-danger();
}
// Hooks
// ========================================================================
.hook-notification-misc();
.hook-notification() {}
.hook-notification-message() {}
.hook-notification-close() {}
.hook-notification-message-primary() {}
.hook-notification-message-success() {}
.hook-notification-message-warning() {}
.hook-notification-message-danger() {}
.hook-notification-misc() {}
// Name: Tooltip
// Description: Component to create tooltips
//
// Component: `uk-tooltip`
//
// Modifiers `uk-tooltip-top`
// `uk-tooltip-top-$(startSide)`
// `uk-tooltip-top-$(endSide)`
// `uk-tooltip-bottom`
// `uk-tooltip-bottom-$(startSide)`
// `uk-tooltip-bottom-$(endSide)`
// `uk-tooltip-$(startSide)`
// `uk-tooltip-$(endSide)`
//
// States: `uk-active`
//
// ========================================================================
// Variables
// ========================================================================
@tooltip-z-index: @global-z-index + 30;
@tooltip-margin: 10px;
@tooltip-max-width: 200px;
@tooltip-padding-vertical: 3px;
@tooltip-padding-horizontal: 6px;
@tooltip-background: #666;
@tooltip-border-radius: 2px;
@tooltip-color: @global-inverse-color;
@tooltip-font-size: 12px;
/* ========================================================================
Component: Tooltip
========================================================================== */
/*
* 1. Hide by default
* 2. Position
* 3. Remove tooltip from document flow to keep the UIkit container from changing its size when injected into the document initially
* 4. Dimensions
* 5. Style
*/
.uk-tooltip {
/* 1 */
display: none;
/* 2 */
position: absolute;
z-index: @tooltip-z-index;
--uk-position-offset: @tooltip-margin;
--uk-position-viewport-offset: 10;
/* 3 */
top: 0;
/* 4 */
box-sizing: border-box;
max-width: @tooltip-max-width;
padding: @tooltip-padding-vertical @tooltip-padding-horizontal;
/* 5 */
background: @tooltip-background;
border-radius: @tooltip-border-radius;
color: @tooltip-color;
font-size: @tooltip-font-size;
.hook-tooltip();
}
/* Show */
.uk-tooltip.uk-active { display: block; }
// Hooks
// ========================================================================
.hook-tooltip-misc();
.hook-tooltip() {}
.hook-tooltip-misc() {}
// Name: Sortable
// Description: Component to create sortable grids and lists
//
// Component: `uk-sortable`
//
// Sub-objects: `uk-sortable-drag`
// `uk-sortable-placeholder`
// `uk-sortable-handle`
//
// Modifiers: `uk-sortable-empty`
//
// States: `uk-drag`
//
// ========================================================================
// Variables
// ========================================================================
@sortable-dragged-z-index: @global-z-index + 50;
@sortable-placeholder-opacity: 0;
@sortable-empty-height: 50px;
/* ========================================================================
Component: Sortable
========================================================================== */
.uk-sortable {
position: relative;
.hook-sortable();
}
/*
* Remove margin from the last-child
*/
.uk-sortable > :last-child { margin-bottom: 0; }
/* Drag
========================================================================== */
.uk-sortable-drag {
position: fixed !important;
z-index: @sortable-dragged-z-index !important;
pointer-events: none;
.hook-sortable-drag();
}
/* Placeholder
========================================================================== */
.uk-sortable-placeholder {
opacity: @sortable-placeholder-opacity;
pointer-events: none;
.hook-sortable-placeholder();
}
/* Empty modifier
========================================================================== */
.uk-sortable-empty {
min-height: @sortable-empty-height;
.hook-sortable-empty();
}
/* Handle
========================================================================== */
/* Hover */
.uk-sortable-handle:hover { cursor: move; }
// Hooks
// ========================================================================
.hook-sortable-misc();
.hook-sortable() {}
.hook-sortable-drag() {}
.hook-sortable-placeholder() {}
.hook-sortable-empty() {}
.hook-sortable-misc() {}
// Name: Countdown
// Description: Component to create countdown timers
//
// Component: `uk-countdown`
//
// Sub-objects: `uk-countdown-number`
// `uk-countdown-separator`
// `uk-countdown-label`
//
// ========================================================================
// Variables
// ========================================================================
@countdown-number-line-height: 0.8;
@countdown-number-font-size: 2rem; // 32px
@countdown-number-font-size-s: 4rem; // 64px
@countdown-number-font-size-m: 6rem; // 96px
@countdown-separator-line-height: 1.6;
@countdown-separator-font-size: 1rem; // 16px
@countdown-separator-font-size-s: 2rem; // 32px
@countdown-separator-font-size-m: 3rem; // 48px
/* ========================================================================
Component: Countdown
========================================================================== */
.uk-countdown {
.hook-countdown();
}
/* Item
========================================================================== */
.uk-countdown-number,
.uk-countdown-separator {
.hook-countdown-item();
}
/* Number
========================================================================== */
/*
* 1. Make numbers all of the same size to prevent jumping. Must be supported by the font.
* 2. Style
*/
.uk-countdown-number {
/* 1 */
font-variant-numeric: tabular-nums;
/* 2 */
font-size: @countdown-number-font-size;
line-height: @countdown-number-line-height;
.hook-countdown-number();
}
/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {
.uk-countdown-number { font-size: @countdown-number-font-size-s; }
}
/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) {
.uk-countdown-number { font-size: @countdown-number-font-size-m; }
}
/* Separator
========================================================================== */
.uk-countdown-separator {
font-size: @countdown-separator-font-size;
line-height: @countdown-separator-line-height;
.hook-countdown-separator();
}
/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {
.uk-countdown-separator { font-size: @countdown-separator-font-size-s; }
}
/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) {
.uk-countdown-separator { font-size: @countdown-separator-font-size-m; }
}
/* Label
========================================================================== */
.uk-countdown-label {
.hook-countdown-label();
}
// Hooks
// ========================================================================
.hook-countdown-misc();
.hook-countdown() {}
.hook-countdown-item() {}
.hook-countdown-number() {}
.hook-countdown-separator() {}
.hook-countdown-label() {}
.hook-countdown-misc() {}
// Inverse
// ========================================================================
.hook-inverse() {
.uk-countdown-number,
.uk-countdown-separator {
.hook-inverse-countdown-item();
}
.uk-countdown-number {
.hook-inverse-countdown-number();
}
.uk-countdown-separator {
.hook-inverse-countdown-separator();
}
.uk-countdown-label {
.hook-inverse-countdown-label();
}
}
.hook-inverse-countdown-item() {}
.hook-inverse-countdown-number() {}
.hook-inverse-countdown-separator() {}
.hook-inverse-countdown-label() {}
// Name: Grid
// Description: Component to create responsive, fluid and nestable grids
//
// Component: `uk-grid`
//
// Modifiers: `uk-grid-small`
// `uk-grid-medium`
// `uk-grid-large`
// `uk-grid-collapse`
// `uk-grid-divider`
// `uk-grid-match`
// `uk-grid-stack`
// `uk-grid-margin`
// `uk-grid-margin-small`
// `uk-grid-margin-medium`
// `uk-grid-margin-large`
// `uk-grid-margin-collapse`
//
// Sub-modifier: `uk-grid-item-match`
//
// States: `uk-first-column`
//
// ========================================================================
// Variables
// ========================================================================
@grid-gutter-horizontal: @global-gutter;
@grid-gutter-vertical: @grid-gutter-horizontal;
@grid-gutter-horizontal-l: @global-medium-gutter;
@grid-gutter-vertical-l: @grid-gutter-horizontal-l;
@grid-small-gutter-horizontal: @global-small-gutter;
@grid-small-gutter-vertical: @grid-small-gutter-horizontal;
@grid-medium-gutter-horizontal: @global-gutter;
@grid-medium-gutter-vertical: @grid-medium-gutter-horizontal;
@grid-large-gutter-horizontal: @global-medium-gutter;
@grid-large-gutter-vertical: @grid-large-gutter-horizontal;
@grid-large-gutter-horizontal-l: @global-large-gutter;
@grid-large-gutter-vertical-l: @grid-large-gutter-horizontal-l;
@grid-divider-border-width: @global-border-width;
@grid-divider-border: @global-border;
/* ========================================================================
Component: Grid
========================================================================== */
/*
* 1. Allow cells to wrap into the next line
* 2. Reset list
*/
.uk-grid {
display: flex;
/* 1 */
flex-wrap: wrap;
/* 2 */
margin: 0;
padding: 0;
list-style: none;
}
/*
* Grid cell
* Note: Space is allocated solely based on content dimensions, but shrinks: 0 1 auto
* Reset margin for e.g. paragraphs
*/
.uk-grid > * { margin: 0; }
/*
* Remove margin from the last-child
*/
.uk-grid > * > :last-child { margin-bottom: 0; }
/* Gutter
========================================================================== */
/*
* Default
*/
/* Horizontal */
.uk-grid { margin-$(startSide): -@grid-gutter-horizontal; }
.uk-grid > * { padding-$(startSide): @grid-gutter-horizontal; }
/* Vertical */
.uk-grid + .uk-grid,
.uk-grid > .uk-grid-margin,
* + .uk-grid-margin { margin-top: @grid-gutter-vertical; }
/* Desktop and bigger */
@media (min-width: @breakpoint-large) {
/* Horizontal */
.uk-grid { margin-$(startSide): -@grid-gutter-horizontal-l; }
.uk-grid > * { padding-$(startSide): @grid-gutter-horizontal-l; }
/* Vertical */
.uk-grid + .uk-grid,
.uk-grid > .uk-grid-margin,
* + .uk-grid-margin { margin-top: @grid-gutter-vertical-l; }
}
/*
* Small
*/
/* Horizontal */
.uk-grid-small,
.uk-grid-column-small { margin-$(startSide): -@grid-small-gutter-horizontal; }
.uk-grid-small > *,
.uk-grid-column-small > * { padding-$(startSide): @grid-small-gutter-horizontal; }
/* Vertical */
.uk-grid + .uk-grid-small,
.uk-grid + .uk-grid-row-small,
.uk-grid-small > .uk-grid-margin,
.uk-grid-row-small > .uk-grid-margin,
* + .uk-grid-margin-small { margin-top: @grid-small-gutter-vertical; }
/*
* Medium
*/
/* Horizontal */
.uk-grid-medium,
.uk-grid-column-medium { margin-$(startSide): -@grid-medium-gutter-horizontal; }
.uk-grid-medium > *,
.uk-grid-column-medium > * { padding-$(startSide): @grid-medium-gutter-horizontal; }
/* Vertical */
.uk-grid + .uk-grid-medium,
.uk-grid + .uk-grid-row-medium,
.uk-grid-medium > .uk-grid-margin,
.uk-grid-row-medium > .uk-grid-margin,
* + .uk-grid-margin-medium { margin-top: @grid-medium-gutter-vertical; }
/*
* Large
*/
/* Horizontal */
.uk-grid-large,
.uk-grid-column-large { margin-$(startSide): -@grid-large-gutter-horizontal; }
.uk-grid-large > *,
.uk-grid-column-large > * { padding-$(startSide): @grid-large-gutter-horizontal; }
/* Vertical */
.uk-grid + .uk-grid-large,
.uk-grid + .uk-grid-row-large,
.uk-grid-large > .uk-grid-margin,
.uk-grid-row-large > .uk-grid-margin,
* + .uk-grid-margin-large { margin-top: @grid-large-gutter-vertical; }
/* Desktop and bigger */
@media (min-width: @breakpoint-large) {
/* Horizontal */
.uk-grid-large,
.uk-grid-column-large { margin-$(startSide): -@grid-large-gutter-horizontal-l; }
.uk-grid-large > *,
.uk-grid-column-large > * { padding-$(startSide): @grid-large-gutter-horizontal-l; }
/* Vertical */
.uk-grid + .uk-grid-large,
.uk-grid + .uk-grid-row-large,
.uk-grid-large > .uk-grid-margin,
.uk-grid-row-large > .uk-grid-margin,
* + .uk-grid-margin-large { margin-top: @grid-large-gutter-vertical-l; }
}
/*
* Collapse
*/
/* Horizontal */
.uk-grid-collapse,
.uk-grid-column-collapse { margin-$(startSide): 0; }
.uk-grid-collapse > *,
.uk-grid-column-collapse > * { padding-$(startSide): 0; }
/* Vertical */
.uk-grid + .uk-grid-collapse,
.uk-grid + .uk-grid-row-collapse,
.uk-grid-collapse > .uk-grid-margin,
.uk-grid-row-collapse > .uk-grid-margin { margin-top: 0; }
/* Divider
========================================================================== */
.uk-grid-divider > * { position: relative; }
.uk-grid-divider > :not(.uk-first-column)::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
border-$(startSide): @grid-divider-border-width solid @grid-divider-border;
.hook-grid-divider-horizontal();
}
/* Vertical */
.uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
content: "";
position: absolute;
$(startSide): 0;
$(endSide): 0;
border-top: @grid-divider-border-width solid @grid-divider-border;
.hook-grid-divider-vertical();
}
/*
* Default
*/
/* Horizontal */
.uk-grid-divider { margin-$(startSide): -(@grid-gutter-horizontal * 2); }
.uk-grid-divider > * { padding-$(startSide): (@grid-gutter-horizontal * 2); }
.uk-grid-divider > :not(.uk-first-column)::before { $(startSide): @grid-gutter-horizontal; }
/* Vertical */
.uk-grid-divider.uk-grid-stack > .uk-grid-margin { margin-top: (@grid-gutter-vertical * 2); }
.uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
top: -@grid-gutter-vertical;
$(startSide): (@grid-gutter-horizontal * 2);
}
/* Desktop and bigger */
@media (min-width: @breakpoint-large) {
/* Horizontal */
.uk-grid-divider { margin-$(startSide): -(@grid-gutter-horizontal-l * 2); }
.uk-grid-divider > * { padding-$(startSide): (@grid-gutter-horizontal-l * 2); }
.uk-grid-divider > :not(.uk-first-column)::before { $(startSide): @grid-gutter-horizontal-l; }
/* Vertical */
.uk-grid-divider.uk-grid-stack > .uk-grid-margin { margin-top: (@grid-gutter-vertical-l * 2); }
.uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
top: -@grid-gutter-vertical-l;
$(startSide): (@grid-gutter-horizontal-l * 2);
}
}
/*
* Small
*/
/* Horizontal */
.uk-grid-divider.uk-grid-small,
.uk-grid-divider.uk-grid-column-small { margin-$(startSide): -(@grid-small-gutter-horizontal * 2); }
.uk-grid-divider.uk-grid-small > *,
.uk-grid-divider.uk-grid-column-small > * { padding-$(startSide): (@grid-small-gutter-horizontal * 2); }
.uk-grid-divider.uk-grid-small > :not(.uk-first-column)::before,
.uk-grid-divider.uk-grid-column-small > :not(.uk-first-column)::before { $(startSide): @grid-small-gutter-horizontal; }
/* Vertical */
.uk-grid-divider.uk-grid-small.uk-grid-stack > .uk-grid-margin,
.uk-grid-divider.uk-grid-row-small.uk-grid-stack > .uk-grid-margin { margin-top: (@grid-small-gutter-vertical * 2); }
.uk-grid-divider.uk-grid-small.uk-grid-stack > .uk-grid-margin::before {
top: -@grid-small-gutter-vertical;
$(startSide): (@grid-small-gutter-horizontal * 2);
}
.uk-grid-divider.uk-grid-row-small.uk-grid-stack > .uk-grid-margin::before { top: -@grid-small-gutter-vertical; }
.uk-grid-divider.uk-grid-column-small.uk-grid-stack > .uk-grid-margin::before { $(startSide): (@grid-small-gutter-horizontal * 2); }
/*
* Medium
*/
/* Horizontal */
.uk-grid-divider.uk-grid-medium,
.uk-grid-divider.uk-grid-column-medium { margin-$(startSide): -(@grid-medium-gutter-horizontal * 2); }
.uk-grid-divider.uk-grid-medium > *,
.uk-grid-divider.uk-grid-column-medium > * { padding-$(startSide): (@grid-medium-gutter-horizontal * 2); }
.uk-grid-divider.uk-grid-medium > :not(.uk-first-column)::before,
.uk-grid-divider.uk-grid-column-medium > :not(.uk-first-column)::before { $(startSide): @grid-medium-gutter-horizontal; }
/* Vertical */
.uk-grid-divider.uk-grid-medium.uk-grid-stack > .uk-grid-margin,
.uk-grid-divider.uk-grid-row-medium.uk-grid-stack > .uk-grid-margin { margin-top: (@grid-medium-gutter-vertical * 2); }
.uk-grid-divider.uk-grid-medium.uk-grid-stack > .uk-grid-margin::before {
top: -@grid-medium-gutter-vertical;
$(startSide): (@grid-medium-gutter-horizontal * 2);
}
.uk-grid-divider.uk-grid-row-medium.uk-grid-stack > .uk-grid-margin::before { top: -@grid-medium-gutter-vertical; }
.uk-grid-divider.uk-grid-column-medium.uk-grid-stack > .uk-grid-margin::before { $(startSide): (@grid-medium-gutter-horizontal * 2); }
/*
* Large
*/
/* Horizontal */
.uk-grid-divider.uk-grid-large,
.uk-grid-divider.uk-grid-column-large { margin-$(startSide): -(@grid-large-gutter-horizontal * 2); }
.uk-grid-divider.uk-grid-large > *,
.uk-grid-divider.uk-grid-column-large > * { padding-$(startSide): (@grid-large-gutter-horizontal * 2); }
.uk-grid-divider.uk-grid-large > :not(.uk-first-column)::before,
.uk-grid-divider.uk-grid-column-large > :not(.uk-first-column)::before { $(startSide): @grid-large-gutter-horizontal; }
/* Vertical */
.uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin,
.uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin { margin-top: (@grid-large-gutter-vertical * 2); }
.uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin::before {
top: -@grid-large-gutter-vertical;
$(startSide): (@grid-large-gutter-horizontal * 2);
}
.uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin::before { top: -@grid-large-gutter-vertical; }
.uk-grid-divider.uk-grid-column-large.uk-grid-stack > .uk-grid-margin::before { $(startSide): (@grid-large-gutter-horizontal * 2); }
/* Desktop and bigger */
@media (min-width: @breakpoint-large) {
/* Horizontal */
.uk-grid-divider.uk-grid-large,
.uk-grid-divider.uk-grid-column-large { margin-$(startSide): -(@grid-large-gutter-horizontal-l * 2); }
.uk-grid-divider.uk-grid-large > *,
.uk-grid-divider.uk-grid-column-large > * { padding-$(startSide): (@grid-large-gutter-horizontal-l * 2); }
.uk-grid-divider.uk-grid-large > :not(.uk-first-column)::before,
.uk-grid-divider.uk-grid-column-large > :not(.uk-first-column)::before { $(startSide): @grid-large-gutter-horizontal-l; }
/* Vertical */
.uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin,
.uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin { margin-top: (@grid-large-gutter-vertical-l * 2); }
.uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin::before {
top: -@grid-large-gutter-vertical-l;
$(startSide): (@grid-large-gutter-horizontal-l * 2);
}
.uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin::before { top: -@grid-large-gutter-vertical-l; }
.uk-grid-divider.uk-grid-column-large.uk-grid-stack > .uk-grid-margin::before { $(startSide): (@grid-large-gutter-horizontal-l * 2); }
}
/* Match child of a grid cell
========================================================================== */
/*
* Behave like a block element
* 1. Wrap into the next line
* 2. Take the full width, at least 100%. Only if no class from the Width component is set.
* 3. Expand width even if larger than 100%, e.g. because of negative margin (Needed for nested grids)
*/
.uk-grid-match > *,
.uk-grid-item-match {
display: flex;
/* 1 */
flex-wrap: wrap;
}
.uk-grid-match > * > :not([class*='uk-width']),
.uk-grid-item-match > :not([class*='uk-width']) {
/* 2 */
box-sizing: border-box;
width: 100%;
/* 3 */
flex: auto;
}
// Hooks
// ========================================================================
.hook-grid-misc();
.hook-grid-divider-horizontal() {}
.hook-grid-divider-vertical() {}
.hook-grid-misc() {}
// Inverse
// ========================================================================
@inverse-grid-divider-border: @inverse-global-border;
.hook-inverse() {
.uk-grid-divider > :not(.uk-first-column)::before {
border-$(startSide)-color: @inverse-grid-divider-border;
.hook-inverse-grid-divider-horizontal();
}
.uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
border-top-color: @inverse-grid-divider-border;
.hook-inverse-grid-divider-vertical();
}
}
.hook-inverse-grid-divider-horizontal() {}
.hook-inverse-grid-divider-vertical() {}
// Navs
// Name: Nav
// Description: Defines styles for list navigations
//
// Component: `uk-nav`
//
// Sub-objects: `uk-nav-parent-icon`
// `uk-nav-header`
// `uk-nav-divider`
// `uk-nav-subtitle`
// `uk-nav-sub`
//
// Modifiers: `uk-nav-default`
// `uk-nav-primary`
// `uk-nav-center`,
// `uk-nav-divider`
//
// States: `uk-active`
// `uk-parent`
// `uk-open`
// `uk-touch`
//
// ========================================================================
// Variables
// ========================================================================
@nav-item-padding-vertical: 5px;
@nav-item-padding-horizontal: 0;
@nav-sublist-padding-vertical: 5px;
@nav-sublist-padding-$(startSide): 15px;
@nav-sublist-deeper-padding-$(startSide): 15px;
@nav-sublist-item-padding-vertical: 2px;
@nav-parent-icon-margin-$(startSide): 4px;
@nav-header-padding-vertical: @nav-item-padding-vertical;
@nav-header-padding-horizontal: @nav-item-padding-horizontal;
@nav-header-font-size: @global-small-font-size;
@nav-header-text-transform: uppercase;
@nav-header-margin-top: @global-margin;
@nav-divider-margin-vertical: 5px;
@nav-divider-margin-horizontal: 0;
@nav-default-font-size: @global-font-size;
@nav-default-line-height: @global-line-height;
@nav-default-item-color: @global-muted-color;
@nav-default-item-hover-color: @global-color;
@nav-default-item-active-color: @global-emphasis-color;
@nav-default-subtitle-font-size: @global-small-font-size;
@nav-default-header-color: @global-emphasis-color;
@nav-default-divider-border-width: @global-border-width;
@nav-default-divider-border: @global-border;
@nav-default-sublist-font-size: @nav-default-font-size;
@nav-default-sublist-line-height: @nav-default-line-height;
@nav-default-sublist-item-color: @global-muted-color;
@nav-default-sublist-item-hover-color: @global-color;
@nav-default-sublist-item-active-color: @global-emphasis-color;
@nav-primary-font-size: @global-large-font-size;
@nav-primary-line-height: @global-line-height;
@nav-primary-item-color: @global-muted-color;
@nav-primary-item-hover-color: @global-color;
@nav-primary-item-active-color: @global-emphasis-color;
@nav-primary-subtitle-font-size: @global-medium-font-size;
@nav-primary-header-color: @global-emphasis-color;
@nav-primary-divider-border-width: @global-border-width;
@nav-primary-divider-border: @global-border;
@nav-primary-sublist-font-size: @global-medium-font-size;
@nav-primary-sublist-line-height: @global-line-height;
@nav-primary-sublist-item-color: @global-muted-color;
@nav-primary-sublist-item-hover-color: @global-color;
@nav-primary-sublist-item-active-color: @global-emphasis-color;
@nav-secondary-font-size: @global-font-size;
@nav-secondary-line-height: @global-line-height;
@nav-secondary-item-color: @global-emphasis-color;
@nav-secondary-item-hover-color: @global-emphasis-color;
@nav-secondary-item-active-color: @global-emphasis-color;
@nav-secondary-subtitle-font-size: @global-small-font-size;
@nav-secondary-subtitle-color: @global-muted-color;
@nav-secondary-subtitle-hover-color: @global-color;
@nav-secondary-subtitle-active-color: @global-emphasis-color;
@nav-secondary-header-color: @global-emphasis-color;
@nav-secondary-divider-border-width: @global-border-width;
@nav-secondary-divider-border: @global-border;
@nav-secondary-sublist-font-size: @global-small-font-size;
@nav-secondary-sublist-line-height: @global-line-height;
@nav-secondary-sublist-item-color: @global-muted-color;
@nav-secondary-sublist-item-hover-color: @global-color;
@nav-secondary-sublist-item-active-color: @global-emphasis-color;
@nav-dividers-margin-top: 5px;
@nav-dividers-border-width: @global-border-width;
@nav-dividers-border: @global-border;
/* ========================================================================
Component: Nav
========================================================================== */
/*
* Reset
*/
.uk-nav,
.uk-nav ul {
margin: 0;
padding: 0;
list-style: none;
}
/*
* 1. Center content vertically, e.g. an icon
* 2. Imitate white space gap when using flexbox
* 3. Reset link
*/
.uk-nav li > a {
/* 1 */
display: flex;
align-items: center;
/* 2 */
column-gap: 0.25em;
/* 3*/
text-decoration: none;
}
/*
* Items
* Must target `a` elements to exclude other elements (e.g. lists)
*/
.uk-nav > li > a { padding: @nav-item-padding-vertical @nav-item-padding-horizontal; }
/* Sublists
========================================================================== */
/*
* Level 2
* `ul` needed for higher specificity to override padding
*/
ul.uk-nav-sub {
padding: @nav-sublist-padding-vertical 0 @nav-sublist-padding-vertical @nav-sublist-padding-$(startSide);
.hook-nav-sub();
}
/*
* Level 3 and deeper
*/
.uk-nav-sub ul { padding-$(startSide): @nav-sublist-deeper-padding-$(startSide); }
/*
* Items
*/
.uk-nav-sub a { padding: @nav-sublist-item-padding-vertical 0; }
/* Parent icon
========================================================================== */
.uk-nav-parent-icon { margin-$(startSide): auto; }
.uk-nav > li > a[aria-expanded="true"] .uk-nav-parent-icon { transform: rotate(180deg); }
/* Header
========================================================================== */
.uk-nav-header {
padding: @nav-header-padding-vertical @nav-header-padding-horizontal;
text-transform: @nav-header-text-transform;
font-size: @nav-header-font-size;
.hook-nav-header();
}
.uk-nav-header:not(:first-child) { margin-top: @nav-header-margin-top; }
/* Divider
========================================================================== */
.uk-nav .uk-nav-divider {
margin: @nav-divider-margin-vertical @nav-divider-margin-horizontal;
.hook-nav-divider();
}
/* Default modifier
========================================================================== */
.uk-nav-default {
font-size: @nav-default-font-size;
line-height: @nav-default-line-height;
.hook-nav-default();
}
/*
* Items
*/
.uk-nav-default > li > a {
color: @nav-default-item-color;
.hook-nav-default-item();
}
/* Hover */
.uk-nav-default > li > a:hover {
color: @nav-default-item-hover-color;
.hook-nav-default-item-hover();
}
/* Active */
.uk-nav-default > li.uk-active > a {
color: @nav-default-item-active-color;
.hook-nav-default-item-active();
}
/*
* Subtitle
*/
.uk-nav-default .uk-nav-subtitle {
font-size: @nav-default-subtitle-font-size;
.hook-nav-default-subtitle();
}
/*
* Header
*/
.uk-nav-default .uk-nav-header {
color: @nav-default-header-color;
.hook-nav-default-header();
}
/*
* Divider
*/
.uk-nav-default .uk-nav-divider {
border-top: @nav-default-divider-border-width solid @nav-default-divider-border;
.hook-nav-default-divider();
}
/*
* Sublists
*/
.uk-nav-default .uk-nav-sub {
font-size: @nav-default-sublist-font-size;
line-height: @nav-default-sublist-line-height;
}
.uk-nav-default .uk-nav-sub a { color: @nav-default-sublist-item-color; }
.uk-nav-default .uk-nav-sub a:hover { color: @nav-default-sublist-item-hover-color; }
.uk-nav-default .uk-nav-sub li.uk-active > a { color: @nav-default-sublist-item-active-color; }
/* Primary modifier
========================================================================== */
.uk-nav-primary {
font-size: @nav-primary-font-size;
line-height: @nav-primary-line-height;
.hook-nav-primary();
}
/*
* Items
*/
.uk-nav-primary > li > a {
color: @nav-primary-item-color;
.hook-nav-primary-item();
}
/* Hover */
.uk-nav-primary > li > a:hover {
color: @nav-primary-item-hover-color;
.hook-nav-primary-item-hover();
}
/* Active */
.uk-nav-primary > li.uk-active > a {
color: @nav-primary-item-active-color;
.hook-nav-primary-item-active();
}
/*
* Subtitle
*/
.uk-nav-primary .uk-nav-subtitle {
font-size: @nav-primary-subtitle-font-size;
.hook-nav-primary-subtitle();
}
/*
* Header
*/
.uk-nav-primary .uk-nav-header {
color: @nav-primary-header-color;
.hook-nav-primary-header();
}
/*
* Divider
*/
.uk-nav-primary .uk-nav-divider {
border-top: @nav-primary-divider-border-width solid @nav-primary-divider-border;
.hook-nav-primary-divider();
}
/*
* Sublists
*/
.uk-nav-primary .uk-nav-sub {
font-size: @nav-primary-sublist-font-size;
line-height: @nav-primary-sublist-line-height;
}
.uk-nav-primary .uk-nav-sub a { color: @nav-primary-sublist-item-color; }
.uk-nav-primary .uk-nav-sub a:hover { color: @nav-primary-sublist-item-hover-color; }
.uk-nav-primary .uk-nav-sub li.uk-active > a { color: @nav-primary-sublist-item-active-color; }
/* Secondary modifier
========================================================================== */
.uk-nav-secondary {
font-size: @nav-secondary-font-size;
line-height: @nav-secondary-line-height;
.hook-nav-secondary();
}
/*
* Items
*/
.uk-nav-secondary > li > a {
color: @nav-secondary-item-color;
.hook-nav-secondary-item();
}
/* Hover */
.uk-nav-secondary > li > a:hover {
color: @nav-secondary-item-hover-color;
.hook-nav-secondary-item-hover();
}
/* Active */
.uk-nav-secondary > li.uk-active > a {
color: @nav-secondary-item-active-color;
.hook-nav-secondary-item-active();
}
/*
* Subtitle
*/
.uk-nav-secondary .uk-nav-subtitle {
font-size: @nav-secondary-subtitle-font-size;
color: @nav-secondary-subtitle-color;
.hook-nav-secondary-subtitle();
}
/* Hover */
.uk-nav-secondary > li > a:hover .uk-nav-subtitle {
color: @nav-secondary-subtitle-hover-color;
.hook-nav-secondary-subtitle-hover();
}
/* Active */
.uk-nav-secondary > li.uk-active > a .uk-nav-subtitle {
color: @nav-secondary-subtitle-active-color;
.hook-nav-secondary-subtitle-active();
}
/*
* Header
*/
.uk-nav-secondary .uk-nav-header {
color: @nav-secondary-header-color;
.hook-nav-secondary-header();
}
/*
* Divider
*/
.uk-nav-secondary .uk-nav-divider {
border-top: @nav-secondary-divider-border-width solid @nav-secondary-divider-border;
.hook-nav-secondary-divider();
}
/*
* Sublists
*/
.uk-nav-secondary .uk-nav-sub {
font-size: @nav-secondary-sublist-font-size;
line-height: @nav-secondary-sublist-line-height;
}
.uk-nav-secondary .uk-nav-sub a { color: @nav-secondary-sublist-item-color; }
.uk-nav-secondary .uk-nav-sub a:hover { color: @nav-secondary-sublist-item-hover-color; }
.uk-nav-secondary .uk-nav-sub li.uk-active > a { color: @nav-secondary-sublist-item-active-color; }
/* Alignment modifier
========================================================================== */
/*
* 1. Center header
* 2. Center items
*/
/* 1 */
.uk-nav-center { text-align: center; }
/* 2 */
.uk-nav-center li > a { justify-content: center; }
/* Sublists */
.uk-nav-center .uk-nav-sub,
.uk-nav-center .uk-nav-sub ul { padding-$(startSide): 0; }
/* Parent icon */
.uk-nav-center .uk-nav-parent-icon { margin-$(startSide): @nav-parent-icon-margin-$(startSide); }
/* Style modifier
========================================================================== */
/*
* Divider
* Naming is in plural to prevent conflicts with divider sub object.
*/
.uk-nav.uk-nav-divider > :not(.uk-nav-header, .uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) {
margin-top: @nav-dividers-margin-top;
padding-top: @nav-dividers-margin-top;
border-top: @nav-dividers-border-width solid @nav-dividers-border;
.hook-nav-dividers();
}
// Hooks
// ========================================================================
.hook-nav-misc();
.hook-nav-sub() {}
.hook-nav-header() {}
.hook-nav-divider() {}
.hook-nav-default() {}
.hook-nav-default-item() {}
.hook-nav-default-item-hover() {}
.hook-nav-default-item-active() {}
.hook-nav-default-subtitle() {}
.hook-nav-default-header() {}
.hook-nav-default-divider() {}
.hook-nav-primary() {}
.hook-nav-primary-item() {}
.hook-nav-primary-item-hover() {}
.hook-nav-primary-item-active() {}
.hook-nav-primary-subtitle() {}
.hook-nav-primary-header() {}
.hook-nav-primary-divider() {}
.hook-nav-secondary() {}
.hook-nav-secondary-item() {}
.hook-nav-secondary-item-hover() {}
.hook-nav-secondary-item-active() {}
.hook-nav-secondary-subtitle() {}
.hook-nav-secondary-subtitle-hover() {}
.hook-nav-secondary-subtitle-active() {}
.hook-nav-secondary-header() {}
.hook-nav-secondary-divider() {}
.hook-nav-dividers() {}
.hook-nav-misc() {}
// Inverse
// ========================================================================
@inverse-nav-default-item-color: @inverse-global-muted-color;
@inverse-nav-default-item-hover-color: @inverse-global-color;
@inverse-nav-default-item-active-color: @inverse-global-emphasis-color;
@inverse-nav-default-header-color: @inverse-global-emphasis-color;
@inverse-nav-default-divider-border: @inverse-global-border;
@inverse-nav-default-sublist-item-color: @inverse-global-muted-color;
@inverse-nav-default-sublist-item-hover-color: @inverse-global-color;
@inverse-nav-default-sublist-item-active-color: @inverse-global-emphasis-color;
@inverse-nav-primary-item-color: @inverse-global-muted-color;
@inverse-nav-primary-item-hover-color: @inverse-global-color;
@inverse-nav-primary-item-active-color: @inverse-global-emphasis-color;
@inverse-nav-primary-header-color: @inverse-global-emphasis-color;
@inverse-nav-primary-divider-border: @inverse-global-border;
@inverse-nav-primary-sublist-item-color: @inverse-global-muted-color;
@inverse-nav-primary-sublist-item-hover-color: @inverse-global-color;
@inverse-nav-primary-sublist-item-active-color: @inverse-global-emphasis-color;
@inverse-nav-secondary-item-color: @inverse-global-emphasis-color;
@inverse-nav-secondary-item-hover-color: @inverse-global-emphasis-color;
@inverse-nav-secondary-item-active-color: @inverse-global-emphasis-color;
@inverse-nav-secondary-subtitle-color: @inverse-global-muted-color;
@inverse-nav-secondary-subtitle-hover-color: @inverse-global-color;
@inverse-nav-secondary-subtitle-active-color: @inverse-global-emphasis-color;
@inverse-nav-secondary-header-color: @inverse-global-emphasis-color;
@inverse-nav-secondary-divider-border: @inverse-global-border;
@inverse-nav-secondary-sublist-item-color: @inverse-global-muted-color;
@inverse-nav-secondary-sublist-item-hover-color: @inverse-global-color;
@inverse-nav-secondary-sublist-item-active-color: @inverse-global-emphasis-color;
@inverse-nav-dividers-border: @inverse-global-border;
.hook-inverse() {
//
// Default
//
.uk-nav-default > li > a {
color: @inverse-nav-default-item-color;
.hook-inverse-nav-default-item();
}
.uk-nav-default > li > a:hover {
color: @inverse-nav-default-item-hover-color;
.hook-inverse-nav-default-item-hover();
}
.uk-nav-default > li.uk-active > a {
color: @inverse-nav-default-item-active-color;
.hook-inverse-nav-default-item-active();
}
.uk-nav-default .uk-nav-header {
color: @inverse-nav-default-header-color;
.hook-inverse-nav-default-header();
}
.uk-nav-default .uk-nav-divider {
border-top-color: @inverse-nav-default-divider-border;
.hook-inverse-nav-default-divider();
}
.uk-nav-default .uk-nav-sub a { color: @inverse-nav-default-sublist-item-color; }
.uk-nav-default .uk-nav-sub a:hover { color: @inverse-nav-default-sublist-item-hover-color; }
.uk-nav-default .uk-nav-sub li.uk-active > a { color: @inverse-nav-default-sublist-item-active-color; }
//
// Primary
//
.uk-nav-primary > li > a {
color: @inverse-nav-primary-item-color;
.hook-inverse-nav-primary-item();
}
.uk-nav-primary > li > a:hover {
color: @inverse-nav-primary-item-hover-color;
.hook-inverse-nav-primary-item-hover();
}
.uk-nav-primary > li.uk-active > a {
color: @inverse-nav-primary-item-active-color;
.hook-inverse-nav-primary-item-active();
}
.uk-nav-primary .uk-nav-header {
color: @inverse-nav-primary-header-color;
.hook-inverse-nav-primary-header();
}
.uk-nav-primary .uk-nav-divider {
border-top-color: @inverse-nav-primary-divider-border;
.hook-inverse-nav-primary-divider();
}
.uk-nav-primary .uk-nav-sub a { color: @inverse-nav-primary-sublist-item-color; }
.uk-nav-primary .uk-nav-sub a:hover { color: @inverse-nav-primary-sublist-item-hover-color; }
.uk-nav-primary .uk-nav-sub li.uk-active > a { color: @inverse-nav-primary-sublist-item-active-color; }
//
// Secondary
//
.uk-nav-secondary > li > a {
color: @inverse-nav-secondary-item-color;
.hook-inverse-nav-secondary-item();
}
.uk-nav-secondary > li > a:hover {
color: @inverse-nav-secondary-item-hover-color;
.hook-inverse-nav-secondary-item-hover();
}
.uk-nav-secondary > li.uk-active > a {
color: @inverse-nav-secondary-item-active-color;
.hook-inverse-nav-secondary-item-active();
}
.uk-nav-secondary .uk-nav-subtitle {
color: @inverse-nav-secondary-subtitle-color;
.hook-inverse-nav-secondary-subtitle();
}
.uk-nav-secondary > li > a:hover .uk-nav-subtitle {
color: @inverse-nav-secondary-subtitle-hover-color;
.hook-inverse-nav-secondary-subtitle-hover();
}
.uk-nav-secondary > li.uk-active > a .uk-nav-subtitle {
color: @inverse-nav-secondary-subtitle-active-color;
.hook-inverse-nav-secondary-subtitle-active();
}
.uk-nav-secondary .uk-nav-header {
color: @inverse-nav-secondary-header-color;
.hook-inverse-nav-secondary-header();
}
.uk-nav-secondary .uk-nav-divider {
border-top-color: @inverse-nav-secondary-divider-border;
.hook-inverse-nav-secondary-divider();
}
.uk-nav-secondary .uk-nav-sub a { color: @inverse-nav-secondary-sublist-item-color; }
.uk-nav-secondary .uk-nav-sub a:hover { color: @inverse-nav-secondary-sublist-item-hover-color; }
.uk-nav-secondary .uk-nav-sub li.uk-active > a { color: @inverse-nav-secondary-sublist-item-active-color; }
//
// Dividers
//
.uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) {
border-top-color: @inverse-nav-dividers-border;
.hook-inverse-nav-dividers();
}
}
.hook-inverse-nav-default-item() {}
.hook-inverse-nav-default-item-hover() {}
.hook-inverse-nav-default-item-active() {}
.hook-inverse-nav-default-header() {}
.hook-inverse-nav-default-divider() {}
.hook-inverse-nav-primary-item() {}
.hook-inverse-nav-primary-item-hover() {}
.hook-inverse-nav-primary-item-active() {}
.hook-inverse-nav-primary-header() {}
.hook-inverse-nav-primary-divider() {}
.hook-inverse-nav-secondary-item() {}
.hook-inverse-nav-secondary-item-hover() {}
.hook-inverse-nav-secondary-item-active() {}
.hook-inverse-nav-secondary-subtitle() {}
.hook-inverse-nav-secondary-subtitle-hover() {}
.hook-inverse-nav-secondary-subtitle-active() {}
.hook-inverse-nav-secondary-header() {}
.hook-inverse-nav-secondary-divider() {}
.hook-inverse-nav-dividers() {}
// Name: Navbar
// Description: Component to create horizontal navigation bars
//
// Component: `uk-navbar`
//
// Sub-objects: `uk-navbar-container`
// `uk-navbar-$(startSide)`
// `uk-navbar-$(endSide)`
// `uk-navbar-center`
// `uk-navbar-center-$(startSide)`
// `uk-navbar-center-$(endSide)`
// `uk-navbar-nav`
// `uk-navbar-parent-icon`
// `uk-navbar-item`
// `uk-navbar-toggle`
// `uk-navbar-subtitle`
// `uk-navbar-dropbar`
//
// Adopted: `uk-navbar-dropdown` + Modifiers
// `uk-navbar-dropdown-nav`
// `uk-navbar-dropdown-grid`
// `uk-navbar-toggle-icon`
//
// Modifiers: `uk-navbar-primary`
// `uk-navbar-transparent`
// `uk-navbar-sticky`
// `uk-navbar-dropdown-stack`
//
// States: `uk-active`
// `uk-parent`
// `uk-open`
//
//
// ========================================================================
// Variables
// ========================================================================
@navbar-background: @global-muted-background;
@navbar-gap: 0px; // Must have a unit because of `calc`
@navbar-color-mode: none;
@navbar-nav-gap: 0px; // Must have a unit because of `calc`
@navbar-nav-item-height: 80px;
@navbar-nav-item-padding-horizontal: 15px;
@navbar-nav-item-color: @global-muted-color;
@navbar-nav-item-font-size: @global-font-size;
@navbar-nav-item-font-family: @global-font-family;
@navbar-nav-item-hover-color: @global-color;
@navbar-nav-item-onclick-color: @global-emphasis-color;
@navbar-nav-item-active-color: @global-emphasis-color;
@navbar-parent-icon-margin-$(startSide): 4px;
@navbar-item-padding-horizontal: 15px;
@navbar-item-color: @global-color;
@navbar-toggle-color: @global-muted-color;
@navbar-toggle-hover-color: @global-color;
@navbar-subtitle-font-size: @global-small-font-size;
@navbar-dropdown-z-index: @global-z-index + 20;
@navbar-dropdown-margin: 0;
@navbar-dropdown-shift-margin: 0;
@navbar-dropdown-viewport-margin: 15px;
@navbar-dropdown-width: 200px;
@navbar-dropdown-padding: 15px;
@navbar-dropdown-background: @global-muted-background;
@navbar-dropdown-color: @global-color;
@navbar-dropdown-color-mode: none;
@navbar-dropdown-grid-gutter-horizontal: @global-gutter;
@navbar-dropdown-grid-gutter-vertical: @navbar-dropdown-grid-gutter-horizontal;
@navbar-dropdown-large-shift-margin: 0;
@navbar-dropdown-large-padding: 40px;
@navbar-dropdown-dropbar-margin: 0;
@navbar-dropdown-dropbar-shift-margin: 0;
@navbar-dropdown-dropbar-padding-top: @navbar-dropdown-padding;
@navbar-dropdown-dropbar-padding-bottom: @navbar-dropdown-dropbar-padding-top;
@navbar-dropdown-dropbar-viewport-margin: 15px;
@navbar-dropdown-dropbar-viewport-margin-s: @global-gutter;
@navbar-dropdown-dropbar-viewport-margin-m: @global-medium-gutter;
@navbar-dropdown-dropbar-large-shift-margin: 0;
@navbar-dropdown-dropbar-large-padding-top: @navbar-dropdown-large-padding;
@navbar-dropdown-dropbar-large-padding-bottom: @navbar-dropdown-dropbar-large-padding-top;
@navbar-dropdown-nav-item-color: @global-muted-color;
@navbar-dropdown-nav-item-hover-color: @global-color;
@navbar-dropdown-nav-item-active-color: @global-emphasis-color;
@navbar-dropdown-nav-subtitle-font-size: @global-small-font-size;
@navbar-dropdown-nav-header-color: @global-emphasis-color;
@navbar-dropdown-nav-divider-border-width: @global-border-width;
@navbar-dropdown-nav-divider-border: @global-border;
@navbar-dropdown-nav-sublist-item-color: @global-muted-color;
@navbar-dropdown-nav-sublist-item-hover-color: @global-color;
@navbar-dropdown-nav-sublist-item-active-color: @global-emphasis-color;
@navbar-dropbar-z-index: @global-z-index - 20;
/* ========================================================================
Component: Navbar
========================================================================== */
/*
* 1. Create position context to center navbar group
*/
.uk-navbar {
display: flex;
/* 1 */
position: relative;
.hook-navbar();
}
/* Container
========================================================================== */
.uk-navbar-container:not(.uk-navbar-transparent) {
background: @navbar-background;
.hook-navbar-container();
}
// Color Mode
.uk-navbar-container:not(.uk-navbar-transparent):extend(.uk-light all) when (@navbar-color-mode = light) {}
.uk-navbar-container:not(.uk-navbar-transparent):extend(.uk-dark all) when (@navbar-color-mode = dark) {}
/* Groups
========================================================================== */
/*
* 1. Align navs and items vertically if they have a different height
*/
.uk-navbar-$(startSide),
.uk-navbar-$(endSide),
[class*='uk-navbar-center'] {
display: flex;
gap: @navbar-gap;
/* 1 */
align-items: center;
}
/*
* Horizontal alignment
* 1. Create position context for centered navbar with sub groups ($(startSide)/$(endSide))
* 2. Fix text wrapping if content is larger than 50% of the container.
* 3. Needed for dropdowns because a new position context is created
* `z-index` must be smaller than off-canvas
* 4. Align sub groups for centered navbar
*/
.uk-navbar-$(endSide) { margin-$(startSide): auto; }
.uk-navbar-center:only-child {
margin-$(startSide): auto;
margin-$(endSide): auto;
/* 1 */
position: relative;
}
.uk-navbar-center:not(:only-child) {
position: absolute;
top: 50%;
$(startSide): 50%;
transform: translate(-50%,-50%);
/* 2 */
width: max-content;
box-sizing: border-box;
/* 3 */
z-index: @global-z-index - 10;
}
/* 4 */
.uk-navbar-center-$(startSide),
.uk-navbar-center-$(endSide) {
position: absolute;
top: 0;
}
.uk-navbar-center-$(startSide) { $(endSide): ~'calc(100% + @{navbar-gap})'; }
.uk-navbar-center-$(endSide) { $(startSide): ~'calc(100% + @{navbar-gap})'; }
[class*='uk-navbar-center-'] {
width: max-content;
box-sizing: border-box;
}
/* Nav
========================================================================== */
/*
* 1. Reset list
*/
.uk-navbar-nav {
display: flex;
gap: @navbar-nav-gap;
/* 1 */
margin: 0;
padding: 0;
list-style: none;
}
/*
* Allow items to wrap into the next line
* Only not `absolute` positioned groups
*/
.uk-navbar-$(startSide),
.uk-navbar-$(endSide),
.uk-navbar-center:only-child { flex-wrap: wrap; }
/*
* Items
* 1. Center content vertically and horizontally
* 2. Imitate white space gap when using flexbox
* 3. Dimensions
* 4. Style
* 5. Required for `a`
*/
.uk-navbar-nav > li > a, // Nav item
.uk-navbar-item, // Content item
.uk-navbar-toggle { // Clickable item
/* 1 */
display: flex;
justify-content: center;
align-items: center;
/* 2 */
column-gap: 0.25em;
/* 3 */
box-sizing: border-box;
min-height: @navbar-nav-item-height;
/* 4 */
font-size: @navbar-nav-item-font-size;
font-family: @navbar-nav-item-font-family;
/* 5 */
text-decoration: none;
}
/*
* Nav items
*/
.uk-navbar-nav > li > a {
padding: 0 @navbar-nav-item-padding-horizontal;
color: @navbar-nav-item-color;
.hook-navbar-nav-item();
}
/*
* Hover
* Apply hover style also if dropdown is opened
*/
.uk-navbar-nav > li:hover > a,
.uk-navbar-nav > li > a[aria-expanded="true"] {
color: @navbar-nav-item-hover-color;
.hook-navbar-nav-item-hover();
}
/* OnClick */
.uk-navbar-nav > li > a:active {
color: @navbar-nav-item-onclick-color;
.hook-navbar-nav-item-onclick();
}
/* Active */
.uk-navbar-nav > li.uk-active > a {
color: @navbar-nav-item-active-color;
.hook-navbar-nav-item-active();
}
/* Parent icon modifier
========================================================================== */
.uk-navbar-parent-icon { margin-$(startSide): @navbar-parent-icon-margin-$(startSide); }
.uk-navbar-nav > li > a[aria-expanded="true"] .uk-navbar-parent-icon { transform: rotate(180deg); }
/* Item
========================================================================== */
.uk-navbar-item {
padding: 0 @navbar-item-padding-horizontal;
color: @navbar-item-color;
.hook-navbar-item();
}
/*
* Remove margin from the last-child
*/
.uk-navbar-item > :last-child { margin-bottom: 0; }
/* Toggle
========================================================================== */
.uk-navbar-toggle {
padding: 0 @navbar-item-padding-horizontal;
color: @navbar-toggle-color;
.hook-navbar-toggle();
}
.uk-navbar-toggle:hover,
.uk-navbar-toggle[aria-expanded="true"] {
color: @navbar-toggle-hover-color;
text-decoration: none;
.hook-navbar-toggle-hover();
}
/*
* Icon
* Adopts `uk-icon`
*/
.uk-navbar-toggle-icon {
.hook-navbar-toggle-icon();
}
/* Hover */
:hover > .uk-navbar-toggle-icon {
.hook-navbar-toggle-icon-hover();
}
/* Subtitle
========================================================================== */
.uk-navbar-subtitle {
font-size: @navbar-subtitle-font-size;
.hook-navbar-subtitle();
}
/* Justify modifier
========================================================================== */
.uk-navbar-justify .uk-navbar-$(startSide),
.uk-navbar-justify .uk-navbar-$(endSide),
.uk-navbar-justify .uk-navbar-nav,
.uk-navbar-justify .uk-navbar-nav > li, // Nav item
.uk-navbar-justify .uk-navbar-item, // Content item
.uk-navbar-justify .uk-navbar-toggle { flex-grow: 1; }
/* Style modifiers
========================================================================== */
.uk-navbar-primary {
.hook-navbar-primary();
}
.uk-navbar-transparent {
.hook-navbar-transparent();
}
.uk-navbar-sticky {
.hook-navbar-sticky();
}
/* Dropdown
========================================================================== */
/*
* Adopts `uk-dropdown`
* 1. Hide by default
* 2. Set position
* 3. Set a default width
* 4. Style
*/
.uk-navbar-dropdown {
/* 1 */
display: none;
/* 2 */
position: absolute;
z-index: @navbar-dropdown-z-index;
--uk-position-offset: @navbar-dropdown-margin;
--uk-position-shift-offset: @navbar-dropdown-shift-margin;
--uk-position-viewport-offset: @navbar-dropdown-viewport-margin;
/* 3 */
box-sizing: border-box;
width: @navbar-dropdown-width;
/* 4 */
padding: @navbar-dropdown-padding;
background: @navbar-dropdown-background;
color: @navbar-dropdown-color;
.hook-navbar-dropdown();
}
/* Show */
.uk-navbar-dropdown.uk-open { display: block; }
/*
* Remove margin from the last-child
*/
.uk-navbar-dropdown > :last-child { margin-bottom: 0; }
// Color Mode
.uk-navbar-dropdown:extend(.uk-light all) when (@navbar-dropdown-color-mode = light) {}
.uk-navbar-dropdown:extend(.uk-dark all) when (@navbar-dropdown-color-mode = dark) {}
/*
* Grid
* Adopts `uk-grid`
*/
/* Gutter Horizontal */
.uk-navbar-dropdown-grid { margin-$(startSide): -@navbar-dropdown-grid-gutter-horizontal; }
.uk-navbar-dropdown-grid > * { padding-$(startSide): @navbar-dropdown-grid-gutter-horizontal; }
/* Gutter Vertical */
.uk-navbar-dropdown-grid > .uk-grid-margin { margin-top: @navbar-dropdown-grid-gutter-vertical; }
/* Stack */
.uk-navbar-dropdown-stack .uk-navbar-dropdown-grid > * { width: 100% !important; }
/*
* Width modifier
*/
.uk-navbar-dropdown-width-2:not(.uk-navbar-dropdown-stack) { width: (@navbar-dropdown-width * 2); }
.uk-navbar-dropdown-width-3:not(.uk-navbar-dropdown-stack) { width: (@navbar-dropdown-width * 3); }
.uk-navbar-dropdown-width-4:not(.uk-navbar-dropdown-stack) { width: (@navbar-dropdown-width * 4); }
.uk-navbar-dropdown-width-5:not(.uk-navbar-dropdown-stack) { width: (@navbar-dropdown-width * 5); }
/*
* Size modifier
*/
.uk-navbar-dropdown-large {
--uk-position-shift-offset: @navbar-dropdown-large-shift-margin;
padding: @navbar-dropdown-large-padding;
.hook-navbar-dropdown-large();
}
/*
* Dropbar modifier
* 1. Reset dropdown width to prevent to early shifting
* 2. Reset style
* 3. Padding
*/
.uk-navbar-dropdown-dropbar {
/* 1 */
width: auto;
/* 2 */
background: transparent;
/* 3 */
padding: @navbar-dropdown-dropbar-padding-top 0 @navbar-dropdown-dropbar-padding-bottom 0;
--uk-position-offset: @navbar-dropdown-dropbar-margin;
--uk-position-shift-offset: @navbar-dropdown-dropbar-shift-margin;
--uk-position-viewport-offset: @navbar-dropdown-dropbar-viewport-margin;
.hook-navbar-dropdown-dropbar();
}
/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {
.uk-navbar-dropdown-dropbar { --uk-position-viewport-offset: @navbar-dropdown-dropbar-viewport-margin-s; }
}
/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) {
.uk-navbar-dropdown-dropbar { --uk-position-viewport-offset: @navbar-dropdown-dropbar-viewport-margin-m; }
}
.uk-navbar-dropdown-dropbar-large {
--uk-position-shift-offset: @navbar-dropdown-dropbar-large-shift-margin;
padding-top: @navbar-dropdown-dropbar-large-padding-top;
padding-bottom: @navbar-dropdown-dropbar-large-padding-bottom;
.hook-navbar-dropdown-dropbar-large();
}
/* Dropdown Nav
* Adopts `uk-nav`
========================================================================== */
.uk-navbar-dropdown-nav {
.hook-navbar-dropdown-nav();
}
/*
* Items
*/
.uk-navbar-dropdown-nav > li > a {
color: @navbar-dropdown-nav-item-color;
.hook-navbar-dropdown-nav-item();
}
/* Hover */
.uk-navbar-dropdown-nav > li > a:hover {
color: @navbar-dropdown-nav-item-hover-color;
.hook-navbar-dropdown-nav-item-hover();
}
/* Active */
.uk-navbar-dropdown-nav > li.uk-active > a {
color: @navbar-dropdown-nav-item-active-color;
.hook-navbar-dropdown-nav-item-active();
}
/*
* Subtitle
*/
.uk-navbar-dropdown-nav .uk-nav-subtitle {
font-size: @navbar-dropdown-nav-subtitle-font-size;
.hook-navbar-dropdown-nav-subtitle();
}
/*
* Header
*/
.uk-navbar-dropdown-nav .uk-nav-header {
color: @navbar-dropdown-nav-header-color;
.hook-navbar-dropdown-nav-header();
}
/*
* Divider
*/
.uk-navbar-dropdown-nav .uk-nav-divider {
border-top: @navbar-dropdown-nav-divider-border-width solid @navbar-dropdown-nav-divider-border;
.hook-navbar-dropdown-nav-divider();
}
/*
* Sublists
*/
.uk-navbar-dropdown-nav .uk-nav-sub a { color: @navbar-dropdown-nav-sublist-item-color; }
.uk-navbar-dropdown-nav .uk-nav-sub a:hover { color: @navbar-dropdown-nav-sublist-item-hover-color; }
.uk-navbar-dropdown-nav .uk-nav-sub li.uk-active > a { color: @navbar-dropdown-nav-sublist-item-active-color; }
/* Dropbar
========================================================================== */
/*
* 1. Reset dropbar
* 2. Width
*/
.uk-navbar-dropbar {
/* 1 */
display: block !important;
z-index: @navbar-dropbar-z-index;
padding: 0;
/* 2 */
$(startSide): 0;
$(endSide): 0;
.hook-navbar-dropbar();
}
// Hooks
// ========================================================================
.hook-navbar-misc();
.hook-navbar() {}
.hook-navbar-container() {}
.hook-navbar-nav-item() {}
.hook-navbar-nav-item-hover() {}
.hook-navbar-nav-item-onclick() {}
.hook-navbar-nav-item-active() {}
.hook-navbar-item() {}
.hook-navbar-toggle() {}
.hook-navbar-toggle-hover() {}
.hook-navbar-toggle-icon() {}
.hook-navbar-toggle-icon-hover() {}
.hook-navbar-subtitle() {}
.hook-navbar-primary() {}
.hook-navbar-transparent() {}
.hook-navbar-sticky() {}
.hook-navbar-dropdown() {}
.hook-navbar-dropdown-large() {}
.hook-navbar-dropdown-dropbar() {}
.hook-navbar-dropdown-dropbar-large() {}
.hook-navbar-dropdown-nav() {}
.hook-navbar-dropdown-nav-item() {}
.hook-navbar-dropdown-nav-item-hover() {}
.hook-navbar-dropdown-nav-item-active() {}
.hook-navbar-dropdown-nav-subtitle() {}
.hook-navbar-dropdown-nav-header() {}
.hook-navbar-dropdown-nav-divider() {}
.hook-navbar-dropbar() {}
.hook-navbar-misc() {}
// Inverse
// ========================================================================
@inverse-navbar-nav-item-color: @inverse-global-muted-color;
@inverse-navbar-nav-item-hover-color: @inverse-global-color;
@inverse-navbar-nav-item-onclick-color: @inverse-global-emphasis-color;
@inverse-navbar-nav-item-active-color: @inverse-global-emphasis-color;
@inverse-navbar-item-color: @inverse-global-color;
@inverse-navbar-toggle-color: @inverse-global-muted-color;
@inverse-navbar-toggle-hover-color: @inverse-global-color;
.hook-inverse() {
//
// Nav Item
//
.uk-navbar-nav > li > a {
color: @inverse-navbar-nav-item-color;
.hook-inverse-navbar-nav-item();
}
.uk-navbar-nav > li:hover > a,
.uk-navbar-nav > li > a[aria-expanded="true"] {
color: @inverse-navbar-nav-item-hover-color;
.hook-inverse-navbar-nav-item-hover();
}
.uk-navbar-nav > li > a:active {
color: @inverse-navbar-nav-item-onclick-color;
.hook-inverse-navbar-nav-item-onclick();
}
.uk-navbar-nav > li.uk-active > a {
color: @inverse-navbar-nav-item-active-color;
.hook-inverse-navbar-nav-item-active();
}
//
// Item
//
.uk-navbar-item {
color: @inverse-navbar-item-color;
.hook-inverse-navbar-item();
}
//
// Toggle
//
.uk-navbar-toggle {
color: @inverse-navbar-toggle-color;
.hook-inverse-navbar-toggle();
}
.uk-navbar-toggle:hover,
.uk-navbar-toggle[aria-expanded="true"] {
color: @inverse-navbar-toggle-hover-color;
.hook-inverse-navbar-toggle-hover();
}
}
.hook-inverse-navbar-nav-item() {}
.hook-inverse-navbar-nav-item-hover() {}
.hook-inverse-navbar-nav-item-onclick() {}
.hook-inverse-navbar-nav-item-active() {}
.hook-inverse-navbar-item() {}
.hook-inverse-navbar-toggle() {}
.hook-inverse-navbar-toggle-hover() {}
// Name: Subnav
// Description: Component to create a sub navigation
//
// Component: `uk-subnav`
//
// Modifiers: `uk-subnav-divider`
// `uk-subnav-pill`
//
// States: `uk-active`
// `uk-first-column`
//
// ========================================================================
// Variables
// ========================================================================
@subnav-margin-horizontal: 20px;
@subnav-item-color: @global-muted-color;
@subnav-item-hover-color: @global-color;
@subnav-item-hover-text-decoration: none;
@subnav-item-active-color: @global-emphasis-color;
@subnav-divider-margin-horizontal: @subnav-margin-horizontal;
@subnav-divider-border-height: 1.5em;
@subnav-divider-border-width: @global-border-width;
@subnav-divider-border: @global-border;
@subnav-pill-item-padding-vertical: 5px;
@subnav-pill-item-padding-horizontal: 10px;
@subnav-pill-item-background: transparent;
@subnav-pill-item-color: @subnav-item-color;
@subnav-pill-item-hover-background: @global-muted-background;
@subnav-pill-item-hover-color: @global-color;
@subnav-pill-item-onclick-background: @subnav-pill-item-hover-background;
@subnav-pill-item-onclick-color: @subnav-pill-item-hover-color;
@subnav-pill-item-active-background: @global-primary-background;
@subnav-pill-item-active-color: @global-inverse-color;
@subnav-item-disabled-color: @global-muted-color;
/* ========================================================================
Component: Subnav
========================================================================== */
/*
* 1. Allow items to wrap into the next line
* 2. Center items vertically if they have a different height
* 3. Gutter
* 4. Reset list
*/
.uk-subnav {
display: flex;
/* 1 */
flex-wrap: wrap;
/* 2 */
align-items: center;
/* 3 */
margin-$(startSide): -@subnav-margin-horizontal;
/* 4 */
padding: 0;
list-style: none;
.hook-subnav();
}
/*
* 1. Space is allocated solely based on content dimensions: 0 0 auto
* 2. Gutter
* 3. Create position context for dropdowns
*/
.uk-subnav > * {
/* 1 */
flex: none;
/* 2 */
padding-$(startSide): @subnav-margin-horizontal;
/* 3 */
position: relative;
}
/* Items
========================================================================== */
/*
* Items must target `a` elements to exclude other elements (e.g. dropdowns)
* Using `:first-child` instead of `a` to support `span` elements for text
* 1. Center content vertically, e.g. an icon
* 2. Imitate white space gap when using flexbox
* 3. Style
*/
.uk-subnav > * > :first-child {
/* 1 */
display: flex;
align-items: center;
/* 2 */
column-gap: 0.25em;
/* 3 */
color: @subnav-item-color;
.hook-subnav-item();
}
/* Hover */
.uk-subnav > * > a:hover {
color: @subnav-item-hover-color;
text-decoration: @subnav-item-hover-text-decoration;
.hook-subnav-item-hover();
}
/* Active */
.uk-subnav > .uk-active > a {
color: @subnav-item-active-color;
.hook-subnav-item-active();
}
/* Divider modifier
========================================================================== */
/*
* Set gutter
*/
.uk-subnav-divider { margin-$(startSide): -((@subnav-divider-margin-horizontal * 2) + @subnav-divider-border-width); }
/*
* Align items and divider vertically
*/
.uk-subnav-divider > * {
display: flex;
align-items: center;
}
/*
* Divider
* 1. `nth-child` makes it also work without JS if it's only one row
*/
.uk-subnav-divider > ::before {
content: "";
height: @subnav-divider-border-height;
margin-$(startSide): (@subnav-divider-margin-horizontal - @subnav-margin-horizontal);
margin-$(endSide): @subnav-divider-margin-horizontal;
border-$(startSide): @subnav-divider-border-width solid transparent;
}
/* 1 */
.uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before {
border-$(startSide)-color: @subnav-divider-border;
.hook-subnav-divider();
}
/* Pill modifier
========================================================================== */
.uk-subnav-pill > * > :first-child {
padding: @subnav-pill-item-padding-vertical @subnav-pill-item-padding-horizontal;
background: @subnav-pill-item-background;
color: @subnav-pill-item-color;
.hook-subnav-pill-item();
}
/* Hover */
.uk-subnav-pill > * > a:hover {
background-color: @subnav-pill-item-hover-background;
color: @subnav-pill-item-hover-color;
.hook-subnav-pill-item-hover();
}
/* OnClick */
.uk-subnav-pill > * > a:active {
background-color: @subnav-pill-item-onclick-background;
color: @subnav-pill-item-onclick-color;
.hook-subnav-pill-item-onclick();
}
/* Active */
.uk-subnav-pill > .uk-active > a {
background-color: @subnav-pill-item-active-background;
color: @subnav-pill-item-active-color;
.hook-subnav-pill-item-active();
}
/* Disabled
* The same for all style modifiers
========================================================================== */
.uk-subnav > .uk-disabled > a {
color: @subnav-item-disabled-color;
.hook-subnav-item-disabled();
}
// Hooks
// ========================================================================
.hook-subnav-misc();
.hook-subnav() {}
.hook-subnav-item() {}
.hook-subnav-item-hover() {}
.hook-subnav-item-active() {}
.hook-subnav-divider() {}
.hook-subnav-pill-item() {}
.hook-subnav-pill-item-hover() {}
.hook-subnav-pill-item-onclick() {}
.hook-subnav-pill-item-active() {}
.hook-subnav-item-disabled() {}
.hook-subnav-misc() {}
// Inverse
// ========================================================================
@inverse-subnav-item-color: @inverse-global-muted-color;
@inverse-subnav-item-hover-color: @inverse-global-color;
@inverse-subnav-item-active-color: @inverse-global-emphasis-color;
@inverse-subnav-divider-border: @inverse-global-border;
@inverse-subnav-pill-item-background: transparent;
@inverse-subnav-pill-item-color: @inverse-global-muted-color;
@inverse-subnav-pill-item-hover-background: @inverse-global-muted-background;
@inverse-subnav-pill-item-hover-color: @inverse-global-color;
@inverse-subnav-pill-item-onclick-background: @inverse-subnav-pill-item-hover-background;
@inverse-subnav-pill-item-onclick-color: @inverse-subnav-pill-item-hover-color;
@inverse-subnav-pill-item-active-background: @inverse-global-primary-background;
@inverse-subnav-pill-item-active-color: @inverse-global-inverse-color;
@inverse-subnav-item-disabled-color: @inverse-global-muted-color;
.hook-inverse() {
.uk-subnav > * > :first-child {
color: @inverse-subnav-item-color;
.hook-inverse-subnav-item();
}
.uk-subnav > * > a:hover {
color: @inverse-subnav-item-hover-color;
.hook-inverse-subnav-item-hover();
}
.uk-subnav > .uk-active > a {
color: @inverse-subnav-item-active-color;
.hook-inverse-subnav-item-active();
}
//
// Divider
//
.uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before {
border-$(startSide)-color: @inverse-subnav-divider-border;
.hook-inverse-subnav-divider();
}
//
// Pill
//
.uk-subnav-pill > * > :first-child {
background-color: @inverse-subnav-pill-item-background;
color: @inverse-subnav-pill-item-color;
.hook-inverse-subnav-pill-item();
}
.uk-subnav-pill > * > a:hover {
background-color: @inverse-subnav-pill-item-hover-background;
color: @inverse-subnav-pill-item-hover-color;
.hook-inverse-subnav-pill-item-hover();
}
.uk-subnav-pill > * > a:active {
background-color: @inverse-subnav-pill-item-onclick-background;
color: @inverse-subnav-pill-item-onclick-color;
.hook-inverse-subnav-pill-item-onclick();
}
.uk-subnav-pill > .uk-active > a {
background-color: @inverse-subnav-pill-item-active-background;
color: @inverse-subnav-pill-item-active-color;
.hook-inverse-subnav-pill-item-active();
}
//
// Disabled
//
.uk-subnav > .uk-disabled > a {
color: @inverse-subnav-item-disabled-color;
.hook-inverse-subnav-item-disabled();
}
}
.hook-inverse-subnav-item() {}
.hook-inverse-subnav-item-hover() {}
.hook-inverse-subnav-item-active() {}
.hook-inverse-subnav-divider() {}
.hook-inverse-subnav-pill-item() {}
.hook-inverse-subnav-pill-item-hover() {}
.hook-inverse-subnav-pill-item-onclick() {}
.hook-inverse-subnav-pill-item-active() {}
.hook-inverse-subnav-item-disabled() {}
// Name: Breadcrumb
// Description: Component to create a breadcrumb navigation
//
// Component: `uk-breadcrumb`
//
// States: `uk-disabled`
//
// ========================================================================
// Variables
// ========================================================================
@breadcrumb-item-font-size: @global-small-font-size;
@breadcrumb-item-color: @global-muted-color;
@breadcrumb-item-hover-color: @global-color;
@breadcrumb-item-hover-text-decoration: none;
@breadcrumb-item-active-color: @global-color;
@breadcrumb-divider: "/";
@breadcrumb-divider-margin-horizontal: 20px;
@breadcrumb-divider-font-size: @breadcrumb-item-font-size;
@breadcrumb-divider-color: @global-muted-color;
/* ========================================================================
Component: Breadcrumb
========================================================================== */
/*
* Reset list
*/
.uk-breadcrumb {
padding: 0;
list-style: none;
.hook-breadcrumb();
}
/*
* 1. Doesn't generate any box and replaced by child boxes
*/
.uk-breadcrumb > * { display: contents; }
/* Items
========================================================================== */
.uk-breadcrumb > * > * {
font-size: @breadcrumb-item-font-size;
color: @breadcrumb-item-color;
.hook-breadcrumb-item();
}
/* Hover */
.uk-breadcrumb > * > :hover {
color: @breadcrumb-item-hover-color;
text-decoration: @breadcrumb-item-hover-text-decoration;
.hook-breadcrumb-item-hover();
}
/* Disabled */
.uk-breadcrumb > .uk-disabled > * {
.hook-breadcrumb-item-disabled();
}
/* Active */
.uk-breadcrumb > :last-child > span,
.uk-breadcrumb > :last-child > a:not([href]) {
color: @breadcrumb-item-active-color;
.hook-breadcrumb-item-active();
}
/*
* Divider
* `nth-child` makes it also work without JS if it's only one row
* 1. Remove space between inline block elements.
* 2. Style
*/
.uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before {
content: @breadcrumb-divider;
display: inline-block;
/* 1 */
margin: 0 @breadcrumb-divider-margin-horizontal 0 ~'calc(@{breadcrumb-divider-margin-horizontal} - 4px)';
/* 2 */
font-size: @breadcrumb-divider-font-size;
color: @breadcrumb-divider-color;
.hook-breadcrumb-divider();
}
// Hooks
// ========================================================================
.hook-breadcrumb-misc();
.hook-breadcrumb() {}
.hook-breadcrumb-item() {}
.hook-breadcrumb-item-hover() {}
.hook-breadcrumb-item-disabled() {}
.hook-breadcrumb-item-active() {}
.hook-breadcrumb-divider() {}
.hook-breadcrumb-misc() {}
// Inverse
// ========================================================================
@inverse-breadcrumb-item-color: @inverse-global-muted-color;
@inverse-breadcrumb-item-hover-color: @inverse-global-color;
@inverse-breadcrumb-item-active-color: @inverse-global-color;
@inverse-breadcrumb-divider-color: @inverse-global-muted-color;
.hook-inverse() {
.uk-breadcrumb > * > * {
color: @inverse-breadcrumb-item-color;
.hook-inverse-breadcrumb-item();
}
.uk-breadcrumb > * > :hover {
color: @inverse-breadcrumb-item-hover-color;
.hook-inverse-breadcrumb-item-hover();
}
.uk-breadcrumb > .uk-disabled > * {
.hook-inverse-breadcrumb-item-disabled();
}
.uk-breadcrumb > :last-child > * {
color: @inverse-breadcrumb-item-active-color;
.hook-inverse-breadcrumb-item-active();
}
//
// Divider
//
.uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before {
color: @inverse-breadcrumb-divider-color;
.hook-inverse-breadcrumb-divider();
}
}
.hook-inverse-breadcrumb-item() {}
.hook-inverse-breadcrumb-item-hover() {}
.hook-inverse-breadcrumb-item-disabled() {}
.hook-inverse-breadcrumb-item-active() {}
.hook-inverse-breadcrumb-divider() {}
// Name: Pagination
// Description: Component to create a page navigation
//
// Component: `uk-pagination`
//
// Adopted: `uk-pagination-next`
// `uk-pagination-previous`
//
// States: `uk-active`
// `uk-disabled`
//
// ========================================================================
// Variables
// ========================================================================
@pagination-margin-horizontal: 0;
@pagination-item-padding-vertical: 5px;
@pagination-item-padding-horizontal: 10px;
@pagination-item-color: @global-muted-color;
@pagination-item-hover-color: @global-color;
@pagination-item-hover-text-decoration: none;
@pagination-item-active-color: @global-color;
@pagination-item-disabled-color: @global-muted-color;
/* ========================================================================
Component: Pagination
========================================================================== */
/*
* 1. Allow items to wrap into the next line
* 2. Gutter
* 3. Reset list
*/
.uk-pagination {
display: flex;
/* 1 */
flex-wrap: wrap;
/* 2 */
margin-$(startSide): -@pagination-margin-horizontal;
/* 3 */
padding: 0;
list-style: none;
.hook-pagination();
}
/*
* 1. Space is allocated solely based on content dimensions: 0 0 auto
* 2. Gutter
* 3. Create position context for dropdowns
*/
.uk-pagination > * {
/* 1 */
flex: none;
/* 2 */
padding-$(startSide): @pagination-margin-horizontal;
/* 3 */
position: relative;
}
/* Items
========================================================================== */
/*
* 1. Prevent gap if child element is `inline-block`, e.g. an icon
* 2. Style
*/
.uk-pagination > * > * {
/* 1 */
display: block;
/* 2 */
padding: @pagination-item-padding-vertical @pagination-item-padding-horizontal;
color: @pagination-item-color;
.hook-pagination-item();
}
/* Hover */
.uk-pagination > * > :hover {
color: @pagination-item-hover-color;
text-decoration: @pagination-item-hover-text-decoration;
.hook-pagination-item-hover();
}
/* Active */
.uk-pagination > .uk-active > * {
color: @pagination-item-active-color;
.hook-pagination-item-active();
}
/* Disabled */
.uk-pagination > .uk-disabled > * {
color: @pagination-item-disabled-color;
.hook-pagination-item-disabled();
}
// Hooks
// ========================================================================
.hook-pagination-misc();
.hook-pagination() {}
.hook-pagination-item() {}
.hook-pagination-item-hover() {}
.hook-pagination-item-active() {}
.hook-pagination-item-disabled() {}
.hook-pagination-misc() {}
// Inverse
// ========================================================================
@inverse-pagination-item-color: @inverse-global-muted-color;
@inverse-pagination-item-hover-color: @inverse-global-color;
@inverse-pagination-item-active-color: @inverse-global-color;
@inverse-pagination-item-disabled-color: @inverse-global-muted-color;
.hook-inverse() {
.uk-pagination > * > * {
color: @inverse-pagination-item-color;
.hook-inverse-pagination-item();
}
.uk-pagination > * > :hover {
color: @inverse-pagination-item-hover-color;
.hook-inverse-pagination-item-hover();
}
.uk-pagination > .uk-active > * {
color: @inverse-pagination-item-active-color;
.hook-inverse-pagination-item-active();
}
.uk-pagination > .uk-disabled > * {
color: @inverse-pagination-item-disabled-color;
.hook-inverse-pagination-item-disabled();
}
}
.hook-inverse-pagination-item() {}
.hook-inverse-pagination-item-hover() {}
.hook-inverse-pagination-item-active() {}
.hook-inverse-pagination-item-disabled() {}
// Name: Tab
// Description: Component to create a tabbed navigation
//
// Component: `uk-tab`
//
// Modifiers: `uk-tab-bottom`
// `uk-tab-$(startSide)`
// `uk-tab-$(endSide)`
//
// States: `uk-active`
// `uk-disabled`
//
// ========================================================================
// Variables
// ========================================================================
@tab-margin-horizontal: 20px;
@tab-item-padding-horizontal: 10px;
@tab-item-padding-vertical: 5px;
@tab-item-color: @global-muted-color;
@tab-item-hover-color: @global-color;
@tab-item-hover-text-decoration: none;
@tab-item-active-color: @global-emphasis-color;
@tab-item-disabled-color: @global-muted-color;
/* ========================================================================
Component: Tab
========================================================================== */
/*
* 1. Allow items to wrap into the next line
* 2. Gutter
* 3. Reset list
*/
.uk-tab {
display: flex;
/* 1 */
flex-wrap: wrap;
/* 2 */
margin-$(startSide): -@tab-margin-horizontal;
/* 3 */
padding: 0;
list-style: none;
.hook-tab();
}
/*
* 1. Space is allocated solely based on content dimensions: 0 0 auto
* 2. Gutter
* 3. Create position context for dropdowns
*/
.uk-tab > * {
/* 1 */
flex: none;
/* 2 */
padding-$(startSide): @tab-margin-horizontal;
/* 3 */
position: relative;
}
/* Items
========================================================================== */
/*
* Items must target `a` elements to exclude other elements (e.g. dropdowns)
* 1. Center content vertically, e.g. an icon
* 2. Imitate white space gap when using flexbox
* 3. Center content if a width is set
* 4. Style
*/
.uk-tab > * > a {
/* 1 */
display: flex;
align-items: center;
/* 2 */
column-gap: 0.25em;
/* 3 */
justify-content: center;
/* 4 */
padding: @tab-item-padding-vertical @tab-item-padding-horizontal;
color: @tab-item-color;
.hook-tab-item();
}
/* Hover */
.uk-tab > * > a:hover {
color: @tab-item-hover-color;
text-decoration: @tab-item-hover-text-decoration;
.hook-tab-item-hover();
}
/* Active */
.uk-tab > .uk-active > a {
color: @tab-item-active-color;
.hook-tab-item-active();
}
/* Disabled */
.uk-tab > .uk-disabled > a {
color: @tab-item-disabled-color;
.hook-tab-item-disabled();
}
/* Position modifier
========================================================================== */
/*
* Bottom
*/
.uk-tab-bottom {
.hook-tab-bottom();
}
.uk-tab-bottom > * > a {
.hook-tab-bottom-item();
}
/*
* $(startSide) + $(endSide)
* 1. Reset Gutter
*/
.uk-tab-$(startSide),
.uk-tab-$(endSide) {
flex-direction: column;
/* 1 */
margin-$(startSide): 0;
}
/* 1 */
.uk-tab-$(startSide) > *,
.uk-tab-$(endSide) > * { padding-$(startSide): 0; }
.uk-tab-$(startSide) {
.hook-tab-$(startSide)();
}
.uk-tab-$(endSide) {
.hook-tab-$(endSide)();
}
.uk-tab-$(startSide) > * > a {
justify-content: $(startSide);
.hook-tab-$(startSide)-item();
}
.uk-tab-$(endSide) > * > a {
justify-content: $(startSide);
.hook-tab-$(endSide)-item();
}
// Hooks
// ========================================================================
.hook-tab-misc();
.hook-tab() {}
.hook-tab-item() {}
.hook-tab-item-hover() {}
.hook-tab-item-active() {}
.hook-tab-item-disabled() {}
.hook-tab-bottom() {}
.hook-tab-bottom-item() {}
.hook-tab-$(startSide)() {}
.hook-tab-$(startSide)-item() {}
.hook-tab-$(endSide)() {}
.hook-tab-$(endSide)-item() {}
.hook-tab-misc() {}
// Inverse
// ========================================================================
@inverse-tab-item-color: @inverse-global-muted-color;
@inverse-tab-item-hover-color: @inverse-global-color;
@inverse-tab-item-active-color: @inverse-global-emphasis-color;
@inverse-tab-item-disabled-color: @inverse-global-muted-color;
.hook-inverse() {
.uk-tab {
.hook-inverse-tab();
}
.uk-tab > * > a {
color: @inverse-tab-item-color;
.hook-inverse-tab-item();
}
.uk-tab > * > a:hover {
color: @inverse-tab-item-hover-color;
.hook-inverse-tab-item-hover();
}
.uk-tab > .uk-active > a {
color: @inverse-tab-item-active-color;
.hook-inverse-tab-item-active();
}
.uk-tab > .uk-disabled > a {
color: @inverse-tab-item-disabled-color;
.hook-inverse-tab-item-disabled();
}
}
.hook-inverse-tab() {}
.hook-inverse-tab-item() {}
.hook-inverse-tab-item-hover() {}
.hook-inverse-tab-item-active() {}
.hook-inverse-tab-item-disabled() {}
// Name: Slidenav
// Description: Component to create previous/next icon navigations
//
// Component: `uk-slidenav`
//
// Sub-objects: `uk-slidenav-container`
//
// Modifiers: `uk-slidenav-previous`
// `uk-slidenav-next`
// `uk-slidenav-large`
//
// ========================================================================
// Variables
// ========================================================================
@slidenav-padding-vertical: 5px;
@slidenav-padding-horizontal: 10px;
@slidenav-color: fade(@global-color, 50%);
@slidenav-hover-color: fade(@global-color, 90%);
@slidenav-active-color: fade(@global-color, 50%);
@slidenav-large-padding-vertical: 10px;
@slidenav-large-padding-horizontal: @slidenav-large-padding-vertical;
/* ========================================================================
Component: Slidenav
========================================================================== */
/*
* Adopts `uk-icon`
*/
.uk-slidenav {
padding: @slidenav-padding-vertical @slidenav-padding-horizontal;
color: @slidenav-color;
.hook-slidenav();
}
/* Hover */
.uk-slidenav:hover {
color: @slidenav-hover-color;
.hook-slidenav-hover();
}
/* OnClick */
.uk-slidenav:active {
color: @slidenav-active-color;
.hook-slidenav-active();
}
/* Icon modifier
========================================================================== */
/*
* Previous
*/
.uk-slidenav-previous {
.hook-slidenav-previous();
}
/*
* Next
*/
.uk-slidenav-next {
.hook-slidenav-next();
}
/* Size modifier
========================================================================== */
.uk-slidenav-large {
padding: @slidenav-large-padding-vertical @slidenav-large-padding-horizontal;
.hook-slidenav-large();
}
/* Container
========================================================================== */
.uk-slidenav-container {
display: flex;
.hook-slidenav-container();
}
// Hooks
// ========================================================================
.hook-slidenav-misc();
.hook-slidenav() {}
.hook-slidenav-hover() {}
.hook-slidenav-active() {}
.hook-slidenav-previous() {}
.hook-slidenav-next() {}
.hook-slidenav-large() {}
.hook-slidenav-container() {}
.hook-slidenav-misc() {}
// Inverse
// ========================================================================
@inverse-slidenav-color: fade(@inverse-global-color, 70%);
@inverse-slidenav-hover-color: fade(@inverse-global-color, 95%);
@inverse-slidenav-active-color: fade(@inverse-global-color, 70%);
.hook-inverse() {
.uk-slidenav {
color: @inverse-slidenav-color;
.hook-inverse-slidenav();
}
.uk-slidenav:hover {
color: @inverse-slidenav-hover-color;
.hook-inverse-slidenav-hover();
}
.uk-slidenav:active {
color: @inverse-slidenav-active-color;
.hook-inverse-slidenav-active();
}
}
.hook-inverse-slidenav() {}
.hook-inverse-slidenav-hover() {}
.hook-inverse-slidenav-active() {}
// Name: Dotnav
// Description: Component to create dot navigations
//
// Component: `uk-dotnav`
//
// Modifier: `uk-dotnav-vertical`
//
// States: `uk-active`
//
// ========================================================================
// Variables
// ========================================================================
@dotnav-margin-horizontal: 12px;
@dotnav-margin-vertical: @dotnav-margin-horizontal;
@dotnav-item-width: 10px;
@dotnav-item-height: @dotnav-item-width;
@dotnav-item-border-radius: 50%;
@dotnav-item-background: fade(@global-color, 20%);
@dotnav-item-hover-background: fade(@global-color, 60%);
@dotnav-item-onclick-background: fade(@global-color, 20%);
@dotnav-item-active-background: fade(@global-color, 60%);
/* ========================================================================
Component: Dotnav
========================================================================== */
/*
* 1. Allow items to wrap into the next line
* 2. Reset list
* 3. Gutter
*/
.uk-dotnav {
display: flex;
/* 1 */
flex-wrap: wrap;
/* 2 */
margin: 0;
padding: 0;
list-style: none;
/* 3 */
margin-$(startSide): -@dotnav-margin-horizontal;
.hook-dotnav();
}
/*
* 1. Space is allocated solely based on content dimensions: 0 0 auto
* 2. Gutter
*/
.uk-dotnav > * {
/* 1 */
flex: none;
/* 2 */
padding-$(startSide): @dotnav-margin-horizontal;
}
/* Items
========================================================================== */
/*
* Items
* 1. Hide text if present
*/
.uk-dotnav > * > * {
display: block;
box-sizing: border-box;
width: @dotnav-item-width;
height: @dotnav-item-height;
border-radius: @dotnav-item-border-radius;
background: @dotnav-item-background;
/* 1 */
text-indent: 100%;
overflow: hidden;
white-space: nowrap;
.hook-dotnav-item();
}
/* Hover */
.uk-dotnav > * > :hover {
background-color: @dotnav-item-hover-background;
.hook-dotnav-item-hover();
}
/* OnClick */
.uk-dotnav > * > :active {
background-color: @dotnav-item-onclick-background;
.hook-dotnav-item-onclick();
}
/* Active */
.uk-dotnav > .uk-active > * {
background-color: @dotnav-item-active-background;
.hook-dotnav-item-active();
}
/* Modifier: 'uk-dotnav-vertical'
========================================================================== */
/*
* 1. Change direction
* 2. Gutter
*/
.uk-dotnav-vertical {
/* 1 */
flex-direction: column;
/* 2 */
margin-$(startSide): 0;
margin-top: -@dotnav-margin-vertical;
}
/* 2 */
.uk-dotnav-vertical > * {
padding-$(startSide): 0;
padding-top: @dotnav-margin-vertical;
}
// Hooks
// ========================================================================
.hook-dotnav-misc();
.hook-dotnav() {}
.hook-dotnav-item() {}
.hook-dotnav-item-hover() {}
.hook-dotnav-item-onclick() {}
.hook-dotnav-item-active() {}
.hook-dotnav-misc() {}
// Inverse
// ========================================================================
@inverse-dotnav-item-background: fade(@inverse-global-color, 50%);
@inverse-dotnav-item-hover-background: fade(@inverse-global-color, 90%);
@inverse-dotnav-item-onclick-background: fade(@inverse-global-color, 50%);
@inverse-dotnav-item-active-background: fade(@inverse-global-color, 90%);
.hook-inverse() {
.uk-dotnav > * > * {
background-color: @inverse-dotnav-item-background;
.hook-inverse-dotnav-item();
}
.uk-dotnav > * > :hover {
background-color: @inverse-dotnav-item-hover-background;
.hook-inverse-dotnav-item-hover();
}
.uk-dotnav > * > :active {
background-color: @inverse-dotnav-item-onclick-background;
.hook-inverse-dotnav-item-onclick();
}
.uk-dotnav > .uk-active > * {
background-color: @inverse-dotnav-item-active-background;
.hook-inverse-dotnav-item-active();
}
}
.hook-inverse-dotnav-item() {}
.hook-inverse-dotnav-item-hover() {}
.hook-inverse-dotnav-item-onclick() {}
.hook-inverse-dotnav-item-active() {}
// Name: Thumbnav
// Description: Component to create thumbnail navigations
//
// Component: `uk-thumbnav`
//
// Modifier: `uk-thumbnav-vertical`
//
// States: `uk-active`
//
// ========================================================================
// Variables
// ========================================================================
@thumbnav-margin-horizontal: 15px;
@thumbnav-margin-vertical: @thumbnav-margin-horizontal;
/* ========================================================================
Component: Thumbnav
========================================================================== */
/*
* 1. Allow items to wrap into the next line
* 2. Reset list
* 3. Gutter
*/
.uk-thumbnav {
display: flex;
/* 1 */
flex-wrap: wrap;
/* 2 */
margin: 0;
padding: 0;
list-style: none;
/* 3 */
margin-$(startSide): -@thumbnav-margin-horizontal;
.hook-thumbnav();
}
/*
* Space is allocated based on content dimensions, but shrinks: 0 1 auto
* 1. Gutter
*/
.uk-thumbnav > * {
/* 1 */
padding-$(startSide): @thumbnav-margin-horizontal;
}
/* Items
========================================================================== */
/*
* Items
*/
.uk-thumbnav > * > * {
display: inline-block;
.hook-thumbnav-item();
}
/* Hover */
.uk-thumbnav > * > :hover {
.hook-thumbnav-item-hover();
}
/* Active */
.uk-thumbnav > .uk-active > * {
.hook-thumbnav-item-active();
}
/* Modifier: 'uk-thumbnav-vertical'
========================================================================== */
/*
* 1. Change direction
* 2. Gutter
*/
.uk-thumbnav-vertical {
/* 1 */
flex-direction: column;
/* 2 */
margin-$(startSide): 0;
margin-top: -@thumbnav-margin-vertical;
}
/* 2 */
.uk-thumbnav-vertical > * {
padding-$(startSide): 0;
padding-top: @thumbnav-margin-vertical;
}
// Hooks
// ========================================================================
.hook-thumbnav-misc();
.hook-thumbnav() {}
.hook-thumbnav-item() {}
.hook-thumbnav-item-hover() {}
.hook-thumbnav-item-active() {}
.hook-thumbnav-misc() {}
// Inverse
// ========================================================================
.hook-inverse() {
.uk-thumbnav > * > * {
.hook-inverse-thumbnav-item();
}
.uk-thumbnav > * > :hover {
.hook-inverse-thumbnav-item-hover();
}
.uk-thumbnav > .uk-active > * {
.hook-inverse-thumbnav-item-active();
}
}
.hook-inverse-thumbnav-item() {}
.hook-inverse-thumbnav-item-hover() {}
.hook-inverse-thumbnav-item-active() {}
// Name: Iconnav
// Description: Component to create icon navigations
//
// Component: `uk-iconnav`
//
// Modifier: `uk-iconnav-vertical`
//
// States: `uk-active`
//
// ========================================================================
// Variables
// ========================================================================
@iconnav-margin-horizontal: @global-small-margin;
@iconnav-margin-vertical: @iconnav-margin-horizontal;
@iconnav-item-color: @global-muted-color;
@iconnav-item-hover-color: @global-color;
@iconnav-item-active-color: @global-color;
/* ========================================================================
Component: Iconnav
========================================================================== */
/*
* 1. Allow items to wrap into the next line
* 2. Reset list
* 3. Gutter
*/
.uk-iconnav {
display: flex;
/* 1 */
flex-wrap: wrap;
/* 2 */
margin: 0;
padding: 0;
list-style: none;
/* 3 */
margin-$(startSide): -@iconnav-margin-horizontal;
.hook-iconnav();
}
/*
* Space is allocated based on content dimensions, but shrinks: 0 1 auto
* 1. Gutter
*/
.uk-iconnav > * {
/* 1 */
padding-$(startSide): @iconnav-margin-horizontal;
}
/* Items
========================================================================== */
/*
* Items must target `a` elements to exclude other elements (e.g. dropdowns)
* 1. Center content vertically if there is still some text
* 2. Imitate white space gap when using flexbox
* 3. Force text not to affect item height
* 4. Style
* 5. Required for `a` if there is still some text
*/
.uk-iconnav > * > a {
/* 1 */
display: flex;
align-items: center;
/* 2 */
column-gap: 0.25em;
/* 3 */
line-height: 0;
/* 4 */
color: @iconnav-item-color;
/* 5 */
text-decoration: none;
.hook-iconnav-item();
}
/* Hover */
.uk-iconnav > * > a:hover {
color: @iconnav-item-hover-color;
.hook-iconnav-item-hover();
}
/* Active */
.uk-iconnav > .uk-active > a {
color: @iconnav-item-active-color;
.hook-iconnav-item-active();
}
/* Modifier: 'uk-iconnav-vertical'
========================================================================== */
/*
* 1. Change direction
* 2. Gutter
*/
.uk-iconnav-vertical {
/* 1 */
flex-direction: column;
/* 2 */
margin-$(startSide): 0;
margin-top: -@iconnav-margin-vertical;
}
/* 2 */
.uk-iconnav-vertical > * {
padding-$(startSide): 0;
padding-top: @iconnav-margin-vertical;
}
// Hooks
// ========================================================================
.hook-iconnav-misc();
.hook-iconnav() {}
.hook-iconnav-item() {}
.hook-iconnav-item-hover() {}
.hook-iconnav-item-active() {}
.hook-iconnav-misc() {}
// Inverse
// ========================================================================
@inverse-iconnav-item-color: @inverse-global-muted-color;
@inverse-iconnav-item-hover-color: @inverse-global-color;
@inverse-iconnav-item-active-color: @inverse-global-color;
.hook-inverse() {
.uk-iconnav > * > a {
color: @inverse-iconnav-item-color;
.hook-inverse-iconnav-item();
}
.uk-iconnav > * > a:hover {
color: @inverse-iconnav-item-hover-color;
.hook-inverse-iconnav-item-hover();
}
.uk-iconnav > .uk-active > a {
color: @inverse-iconnav-item-active-color;
.hook-inverse-iconnav-item-active();
}
}
.hook-inverse-iconnav-item() {}
.hook-inverse-iconnav-item-hover() {}
.hook-inverse-iconnav-item-active() {}
// Name: Lightbox
// Description: Component to create an lightbox image gallery
//
// Component: `uk-lightbox`
//
// Sub-objects: `uk-lightbox-page`
// `uk-lightbox-items`
// `uk-lightbox-toolbar`
// `uk-lightbox-toolbar-icon`
// `uk-lightbox-button`
// `uk-lightbox-caption`
// `uk-lightbox-iframe`
//
// States: `uk-open`
//
// ========================================================================
// Variables
// ========================================================================
@lightbox-z-index: @global-z-index + 10;
@lightbox-background: #000;
@lightbox-focus-outline: rgba(255,255,255,0.7);
@lightbox-item-color: rgba(255,255,255,0.7);
@lightbox-item-max-width: 100vw;
@lightbox-item-max-height: 100vh;
@lightbox-toolbar-padding-vertical: 10px;
@lightbox-toolbar-padding-horizontal: 10px;
@lightbox-toolbar-background: rgba(0,0,0,0.3);
@lightbox-toolbar-color: rgba(255,255,255,0.7);
@lightbox-toolbar-icon-padding: 5px;
@lightbox-toolbar-icon-color: rgba(255,255,255,0.7);
@lightbox-toolbar-icon-hover-color: #fff;
@lightbox-button-size: 50px;
@lightbox-button-background: @lightbox-toolbar-background;
@lightbox-button-color: rgba(255,255,255,0.7);
@lightbox-button-hover-color: #fff;
/* ========================================================================
Component: Lightbox
========================================================================== */
/*
* 1. Hide by default
* 2. Set position
* 3. Allow scrolling for the modal dialog
* 4. Horizontal padding
* 5. Mask the background page
* 6. Fade-in transition
* 7. Prevent cancellation of pointer events while dragging
*/
.uk-lightbox {
/* 1 */
display: none;
/* 2 */
position: fixed;
top: 0;
$(endSide): 0;
bottom: 0;
$(startSide): 0;
z-index: @lightbox-z-index;
/* 5 */
background: @lightbox-background;
/* 6 */
opacity: 0;
transition: opacity 0.15s linear;
/* 7 */
touch-action: pinch-zoom;
.hook-lightbox();
}
/*
* Open
* 1. Center child
* 2. Fade-in
*/
.uk-lightbox.uk-open {
display: block;
/* 2 */
opacity: 1;
}
/*
* Focus
*/
.uk-lightbox :focus { outline-color: @lightbox-focus-outline; }
.uk-lightbox :focus-visible { outline-color: @lightbox-focus-outline; }
/* Page
========================================================================== */
/*
* Prevent scrollbars
*/
.uk-lightbox-page { overflow: hidden; }
/* Item
========================================================================== */
/*
* 1. Center child within the viewport
* 2. Not visible by default
* 3. Color needed for spinner icon
* 4. Optimize animation
* 5. Responsiveness
* Using `vh` for `max-height` to fix image proportions after resize in Safari and Opera
*/
.uk-lightbox-items > * {
/* 1 */
position: absolute;
top: 0;
$(endSide): 0;
bottom: 0;
$(startSide): 0;
/* 2 */
display: none;
justify-content: center;
align-items: center;
/* 3 */
color: @lightbox-item-color;
/* 4 */
will-change: transform, opacity;
.hook-lightbox-item();
}
/* 5 */
.uk-lightbox-items > * > * {
max-width: @lightbox-item-max-width;
max-height: @lightbox-item-max-height;
}
.uk-lightbox-items > * > :not(iframe) {
width: auto;
height: auto;
}
.uk-lightbox-items > .uk-active { display: flex; }
/* Toolbar
========================================================================== */
.uk-lightbox-toolbar {
padding: @lightbox-toolbar-padding-vertical @lightbox-toolbar-padding-horizontal;
background: @lightbox-toolbar-background;
color: @lightbox-toolbar-color;
.hook-lightbox-toolbar();
}
.uk-lightbox-toolbar > * { color: @lightbox-toolbar-color; }
/* Toolbar Icon (Close)
========================================================================== */
.uk-lightbox-toolbar-icon {
padding: @lightbox-toolbar-icon-padding;
color: @lightbox-toolbar-icon-color;
.hook-lightbox-toolbar-icon();
}
/*
* Hover
*/
.uk-lightbox-toolbar-icon:hover {
color: @lightbox-toolbar-icon-hover-color;
.hook-lightbox-toolbar-icon-hover();
}
/* Button (Slidenav)
========================================================================== */
/*
* 1. Center icon vertically and horizontally
*/
.uk-lightbox-button {
box-sizing: border-box;
width: @lightbox-button-size;
height: @lightbox-button-size;
background: @lightbox-button-background;
color: @lightbox-button-color;
/* 1 */
display: inline-flex;
justify-content: center;
align-items: center;
.hook-lightbox-button();
}
/* Hover */
.uk-lightbox-button:hover {
color: @lightbox-button-hover-color;
.hook-lightbox-button-hover();
}
/* OnClick */
.uk-lightbox-button:active {
.hook-lightbox-button-active();
}
/* Caption
========================================================================== */
.uk-lightbox-caption:empty { display: none; }
/* Iframe
========================================================================== */
.uk-lightbox-iframe {
width: 80%;
height: 80%;
}
// Hooks
// ========================================================================
.hook-lightbox-misc();
.hook-lightbox() {}
.hook-lightbox-item() {}
.hook-lightbox-toolbar() {}
.hook-lightbox-toolbar-icon() {}
.hook-lightbox-toolbar-icon-hover() {}
.hook-lightbox-button() {}
.hook-lightbox-button-hover() {}
.hook-lightbox-button-active() {}
.hook-lightbox-misc() {}
// Utilities
// Name: Animation
// Description: Utilities for keyframe animations
//
// Component: `uk-animation-*`
//
// Modifiers: `uk-animation-fade`
// `uk-animation-scale-up`
// `uk-animation-scale-down`
// `uk-animation-slide-top-*`
// `uk-animation-slide-bottom-*`
// `uk-animation-slide-$(startSide)-*`
// `uk-animation-slide-$(endSide)-*`
// `uk-animation-kenburns`
// `uk-animation-shake`
// `uk-animation-stroke`
// `uk-animation-reverse`
// `uk-animation-fast`
//
// Sub-objects: `uk-animation-toggle`
//
// States: `uk-active`
//
// ========================================================================
// Variables
// ========================================================================
@animation-duration: 0.5s;
@animation-fade-duration: 0.8s;
@animation-stroke-duration: 2s;
@animation-kenburns-duration: 15s;
@animation-fast-duration: 0.1s;
@animation-slide-small-translate: 10px;
@animation-slide-medium-translate: 50px;
/* ========================================================================
Component: Animation
========================================================================== */
[class*='uk-animation-'] { animation: @animation-duration ease-out both; }
/* Animations
========================================================================== */
/*
* Fade
*/
.uk-animation-fade {
animation-name: uk-fade;
animation-duration: @animation-fade-duration;
animation-timing-function: linear;
}
/*
* Scale
*/
.uk-animation-scale-up { animation-name: uk-fade, uk-scale-up; }
.uk-animation-scale-down { animation-name: uk-fade, uk-scale-down; }
/*
* Slide
*/
.uk-animation-slide-top { animation-name: uk-fade, uk-slide-top; }
.uk-animation-slide-bottom { animation-name: uk-fade, uk-slide-bottom; }
.uk-animation-slide-$(startSide) { animation-name: uk-fade, uk-slide-$(startSide); }
.uk-animation-slide-$(endSide) { animation-name: uk-fade, uk-slide-$(endSide); }
/*
* Slide Small
*/
.uk-animation-slide-top-small { animation-name: uk-fade, uk-slide-top-small; }
.uk-animation-slide-bottom-small { animation-name: uk-fade, uk-slide-bottom-small; }
.uk-animation-slide-$(startSide)-small { animation-name: uk-fade, uk-slide-$(startSide)-small; }
.uk-animation-slide-$(endSide)-small { animation-name: uk-fade, uk-slide-$(endSide)-small; }
/*
* Slide Medium
*/
.uk-animation-slide-top-medium { animation-name: uk-fade, uk-slide-top-medium; }
.uk-animation-slide-bottom-medium { animation-name: uk-fade, uk-slide-bottom-medium; }
.uk-animation-slide-$(startSide)-medium { animation-name: uk-fade, uk-slide-$(startSide)-medium; }
.uk-animation-slide-$(endSide)-medium { animation-name: uk-fade, uk-slide-$(endSide)-medium; }
/*
* Kenburns
*/
.uk-animation-kenburns {
animation-name: uk-kenburns;
animation-duration: @animation-kenburns-duration;
}
/*
* Shake
*/
.uk-animation-shake { animation-name: uk-shake; }
/*
* SVG Stroke
* The `--uk-animation-stroke` custom property contains the longest path length.
* Set it manually or use `uk-svg="stroke-animation: true"` to set it automatically.
* All strokes are animated by the same pace and doesn't end simultaneously.
* To end simultaneously, `pathLength="1"` could be used, but it's not working in Safari yet.
*/
.uk-animation-stroke {
animation-name: uk-stroke;
animation-duration: @animation-stroke-duration;
stroke-dasharray: var(--uk-animation-stroke);
}
/* Direction modifier
========================================================================== */
.uk-animation-reverse {
animation-direction: reverse;
animation-timing-function: ease-in;
}
/* Duration modifier
========================================================================== */
.uk-animation-fast { animation-duration: @animation-fast-duration; }
/* Toggle animation based on the State of the Parent Element
========================================================================== */
.uk-animation-toggle:not(:hover):not(:focus) [class*='uk-animation-'] { animation-name: none; }
/* Keyframes used by animation classes
========================================================================== */
/*
* Fade
*/
@keyframes uk-fade {
0% { opacity: 0; }
100% { opacity: 1; }
}
/*
* Scale
*/
@keyframes uk-scale-up {
0% { transform: scale(0.9); }
100% { transform: scale(1); }
}
@keyframes uk-scale-down {
0% { transform: scale(1.1); }
100% { transform: scale(1); }
}
/*
* Slide
*/
@keyframes uk-slide-top {
0% { transform: translateY(-100%); }
100% { transform: translateY(0); }
}
@keyframes uk-slide-bottom {
0% { transform: translateY(100%); }
100% { transform: translateY(0); }
}
@keyframes uk-slide-$(startSide) {
0% { transform: translateX(-100%); }
100% { transform: translateX(0); }
}
@keyframes uk-slide-$(endSide) {
0% { transform: translateX(100%); }
100% { transform: translateX(0); }
}
/*
* Slide Small
*/
@keyframes uk-slide-top-small {
0% { transform: translateY(-@animation-slide-small-translate); }
100% { transform: translateY(0); }
}
@keyframes uk-slide-bottom-small {
0% { transform: translateY(@animation-slide-small-translate); }
100% { transform: translateY(0); }
}
@keyframes uk-slide-$(startSide)-small {
0% { transform: translateX(-@animation-slide-small-translate); }
100% { transform: translateX(0); }
}
@keyframes uk-slide-$(endSide)-small {
0% { transform: translateX(@animation-slide-small-translate); }
100% { transform: translateX(0); }
}
/*
* Slide Medium
*/
@keyframes uk-slide-top-medium {
0% { transform: translateY(-@animation-slide-medium-translate); }
100% { transform: translateY(0); }
}
@keyframes uk-slide-bottom-medium {
0% { transform: translateY(@animation-slide-medium-translate); }
100% { transform: translateY(0); }
}
@keyframes uk-slide-$(startSide)-medium {
0% { transform: translateX(-@animation-slide-medium-translate); }
100% { transform: translateX(0); }
}
@keyframes uk-slide-$(endSide)-medium {
0% { transform: translateX(@animation-slide-medium-translate); }
100% { transform: translateX(0); }
}
/*
* Kenburns
*/
@keyframes uk-kenburns {
0% { transform: scale(1); }
100% { transform: scale(1.2); }
}
/*
* Shake
*/
@keyframes uk-shake {
0%, 100% { transform: translateX(0); }
10% { transform: translateX(-9px); }
20% { transform: translateX(8px); }
30% { transform: translateX(-7px); }
40% { transform: translateX(6px); }
50% { transform: translateX(-5px); }
60% { transform: translateX(4px); }
70% { transform: translateX(-3px); }
80% { transform: translateX(2px); }
90% { transform: translateX(-1px); }
}
/*
* Stroke
*/
@keyframes uk-stroke {
0% { stroke-dashoffset: var(--uk-animation-stroke); }
100% { stroke-dashoffset: 0; }
}
// Hooks
// ========================================================================
.hook-animation-misc();
.hook-animation-misc() {}
// Name: Width
// Description: Utilities for widths
//
// Component: `uk-child-width-*`
// `uk-width-*`
//
// ========================================================================
// Variables
// ========================================================================
@width-small-width: 150px;
@width-medium-width: 300px;
@width-large-width: 450px;
@width-xlarge-width: 600px;
@width-2xlarge-width: 750px;
/* ========================================================================
Component: Width
========================================================================== */
/* Equal child widths
========================================================================== */
[class*='uk-child-width'] > * {
box-sizing: border-box;
width: 100%;
}
.uk-child-width-1-2 > * { width: 50%; }
.uk-child-width-1-3 > * { width: ~'calc(100% * 1 / 3.001)'; }
.uk-child-width-1-4 > * { width: 25%; }
.uk-child-width-1-5 > * { width: 20%; }
.uk-child-width-1-6 > * { width: ~'calc(100% * 1 / 6.001)'; }
.uk-child-width-auto > * { width: auto; }
/*
* 1. Reset the `min-width`, which is set to auto by default, because
* flex items won't shrink below their minimum intrinsic content size.
* Using `1px` instead of `0`, so items still wrap into the next line,
* if they have zero width and padding and the predecessor is 100% wide.
*/
.uk-child-width-expand > :not([class*='uk-width']) {
flex: 1;
/* 1 */
min-width: 1px;
}
/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {
.uk-child-width-1-1\@s > * { width: 100%; }
.uk-child-width-1-2\@s > * { width: 50%; }
.uk-child-width-1-3\@s > * { width: ~'calc(100% * 1 / 3.001)'; }
.uk-child-width-1-4\@s > * { width: 25%; }
.uk-child-width-1-5\@s > * { width: 20%; }
.uk-child-width-1-6\@s > * { width: ~'calc(100% * 1 / 6.001)'; }
.uk-child-width-auto\@s > * { width: auto; }
.uk-child-width-expand\@s > :not([class*='uk-width']) {
flex: 1;
min-width: 1px;
}
}
/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) {
.uk-child-width-1-1\@m > * { width: 100%; }
.uk-child-width-1-2\@m > * { width: 50%; }
.uk-child-width-1-3\@m > * { width: ~'calc(100% * 1 / 3.001)'; }
.uk-child-width-1-4\@m > * { width: 25%; }
.uk-child-width-1-5\@m > * { width: 20%; }
.uk-child-width-1-6\@m > * { width: ~'calc(100% * 1 / 6.001)'; }
.uk-child-width-auto\@m > * { width: auto; }
.uk-child-width-expand\@m > :not([class*='uk-width']) {
flex: 1;
min-width: 1px;
}
}
/* Desktop and bigger */
@media (min-width: @breakpoint-large) {
.uk-child-width-1-1\@l > * { width: 100%; }
.uk-child-width-1-2\@l > * { width: 50%; }
.uk-child-width-1-3\@l > * { width: ~'calc(100% * 1 / 3.001)'; }
.uk-child-width-1-4\@l > * { width: 25%; }
.uk-child-width-1-5\@l > * { width: 20%; }
.uk-child-width-1-6\@l > * { width: ~'calc(100% * 1 / 6.001)'; }
.uk-child-width-auto\@l > * { width: auto; }
.uk-child-width-expand\@l > :not([class*='uk-width']) {
flex: 1;
min-width: 1px;
}
}
/* Large screen and bigger */
@media (min-width: @breakpoint-xlarge) {
.uk-child-width-1-1\@xl > * { width: 100%; }
.uk-child-width-1-2\@xl > * { width: 50%; }
.uk-child-width-1-3\@xl > * { width: ~'calc(100% * 1 / 3.001)'; }
.uk-child-width-1-4\@xl > * { width: 25%; }
.uk-child-width-1-5\@xl > * { width: 20%; }
.uk-child-width-1-6\@xl > * { width: ~'calc(100% * 1 / 6.001)'; }
.uk-child-width-auto\@xl > * { width: auto; }
.uk-child-width-expand\@xl > :not([class*='uk-width']) {
flex: 1;
min-width: 1px;
}
}
/* Single Widths
========================================================================== */
/*
* 1. `max-width` is needed for the pixel-based classes
*/
[class*='uk-width'] {
box-sizing: border-box;
width: 100%;
/* 1 */
max-width: 100%;
}
/* Halves */
.uk-width-1-2 { width: 50%; }
/* Thirds */
.uk-width-1-3 { width: ~'calc(100% * 1 / 3.001)'; }
.uk-width-2-3 { width: ~'calc(100% * 2 / 3.001)'; }
/* Quarters */
.uk-width-1-4 { width: 25%; }
.uk-width-3-4 { width: 75%; }
/* Fifths */
.uk-width-1-5 { width: 20%; }
.uk-width-2-5 { width: 40%; }
.uk-width-3-5 { width: 60%; }
.uk-width-4-5 { width: 80%; }
/* Sixths */
.uk-width-1-6 { width: ~'calc(100% * 1 / 6.001)'; }
.uk-width-5-6 { width: ~'calc(100% * 5 / 6.001)'; }
/* Pixel */
.uk-width-small { width: @width-small-width; }
.uk-width-medium { width: @width-medium-width; }
.uk-width-large { width: @width-large-width; }
.uk-width-xlarge { width: @width-xlarge-width; }
.uk-width-2xlarge { width: @width-2xlarge-width; }
.uk-width-xxlarge when (@deprecated = true) { width: @width-2xlarge-width; }
/* Auto */
.uk-width-auto { width: auto; }
/* Expand */
.uk-width-expand {
flex: 1;
min-width: 1px;
}
/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {
/* Whole */
.uk-width-1-1\@s { width: 100%; }
/* Halves */
.uk-width-1-2\@s { width: 50%; }
/* Thirds */
.uk-width-1-3\@s { width: ~'calc(100% * 1 / 3.001)'; }
.uk-width-2-3\@s { width: ~'calc(100% * 2 / 3.001)'; }
/* Quarters */
.uk-width-1-4\@s { width: 25%; }
.uk-width-3-4\@s { width: 75%; }
/* Fifths */
.uk-width-1-5\@s { width: 20%; }
.uk-width-2-5\@s { width: 40%; }
.uk-width-3-5\@s { width: 60%; }
.uk-width-4-5\@s { width: 80%; }
/* Sixths */
.uk-width-1-6\@s { width: ~'calc(100% * 1 / 6.001)'; }
.uk-width-5-6\@s { width: ~'calc(100% * 5 / 6.001)'; }
/* Pixel */
.uk-width-small\@s { width: @width-small-width; }
.uk-width-medium\@s { width: @width-medium-width; }
.uk-width-large\@s { width: @width-large-width; }
.uk-width-xlarge\@s { width: @width-xlarge-width; }
.uk-width-2xlarge\@s { width: @width-2xlarge-width; }
.uk-width-xxlarge\@s when (@deprecated = true) { width: @width-2xlarge-width; }
/* Auto */
.uk-width-auto\@s { width: auto; }
/* Expand */
.uk-width-expand\@s {
flex: 1;
min-width: 1px;
}
}
/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) {
/* Whole */
.uk-width-1-1\@m { width: 100%; }
/* Halves */
.uk-width-1-2\@m { width: 50%; }
/* Thirds */
.uk-width-1-3\@m { width: ~'calc(100% * 1 / 3.001)'; }
.uk-width-2-3\@m { width: ~'calc(100% * 2 / 3.001)'; }
/* Quarters */
.uk-width-1-4\@m { width: 25%; }
.uk-width-3-4\@m { width: 75%; }
/* Fifths */
.uk-width-1-5\@m { width: 20%; }
.uk-width-2-5\@m { width: 40%; }
.uk-width-3-5\@m { width: 60%; }
.uk-width-4-5\@m { width: 80%; }
/* Sixths */
.uk-width-1-6\@m { width: ~'calc(100% * 1 / 6.001)'; }
.uk-width-5-6\@m { width: ~'calc(100% * 5 / 6.001)'; }
/* Pixel */
.uk-width-small\@m { width: @width-small-width; }
.uk-width-medium\@m { width: @width-medium-width; }
.uk-width-large\@m { width: @width-large-width; }
.uk-width-xlarge\@m { width: @width-xlarge-width; }
.uk-width-2xlarge\@m { width: @width-2xlarge-width; }
.uk-width-xxlarge\@m when (@deprecated = true) { width: @width-2xlarge-width; }
/* Auto */
.uk-width-auto\@m { width: auto; }
/* Expand */
.uk-width-expand\@m {
flex: 1;
min-width: 1px;
}
}
/* Desktop and bigger */
@media (min-width: @breakpoint-large) {
/* Whole */
.uk-width-1-1\@l { width: 100%; }
/* Halves */
.uk-width-1-2\@l { width: 50%; }
/* Thirds */
.uk-width-1-3\@l { width: ~'calc(100% * 1 / 3.001)'; }
.uk-width-2-3\@l { width: ~'calc(100% * 2 / 3.001)'; }
/* Quarters */
.uk-width-1-4\@l { width: 25%; }
.uk-width-3-4\@l { width: 75%; }
/* Fifths */
.uk-width-1-5\@l { width: 20%; }
.uk-width-2-5\@l { width: 40%; }
.uk-width-3-5\@l { width: 60%; }
.uk-width-4-5\@l { width: 80%; }
/* Sixths */
.uk-width-1-6\@l { width: ~'calc(100% * 1 / 6.001)'; }
.uk-width-5-6\@l { width: ~'calc(100% * 5 / 6.001)'; }
/* Pixel */
.uk-width-small\@l { width: @width-small-width; }
.uk-width-medium\@l { width: @width-medium-width; }
.uk-width-large\@l { width: @width-large-width; }
.uk-width-xlarge\@l { width: @width-xlarge-width; }
.uk-width-2xlarge\@l { width: @width-2xlarge-width; }
.uk-width-xxlarge\@l when (@deprecated = true) { width: @width-2xlarge-width; }
/* Auto */
.uk-width-auto\@l { width: auto; }
/* Expand */
.uk-width-expand\@l {
flex: 1;
min-width: 1px;
}
}
/* Large screen and bigger */
@media (min-width: @breakpoint-xlarge) {
/* Whole */
.uk-width-1-1\@xl { width: 100%; }
/* Halves */
.uk-width-1-2\@xl { width: 50%; }
/* Thirds */
.uk-width-1-3\@xl { width: ~'calc(100% * 1 / 3.001)'; }
.uk-width-2-3\@xl { width: ~'calc(100% * 2 / 3.001)'; }
/* Quarters */
.uk-width-1-4\@xl { width: 25%; }
.uk-width-3-4\@xl { width: 75%; }
/* Fifths */
.uk-width-1-5\@xl { width: 20%; }
.uk-width-2-5\@xl { width: 40%; }
.uk-width-3-5\@xl { width: 60%; }
.uk-width-4-5\@xl { width: 80%; }
/* Sixths */
.uk-width-1-6\@xl { width: ~'calc(100% * 1 / 6.001)'; }
.uk-width-5-6\@xl { width: ~'calc(100% * 5 / 6.001)'; }
/* Pixel */
.uk-width-small\@xl { width: @width-small-width; }
.uk-width-medium\@xl { width: @width-medium-width; }
.uk-width-large\@xl { width: @width-large-width; }
.uk-width-xlarge\@xl { width: @width-xlarge-width; }
.uk-width-2xlarge\@xl { width: @width-2xlarge-width; }
.uk-width-xxlarge\@xl when (@deprecated = true) { width: @width-2xlarge-width; }
/* Auto */
.uk-width-auto\@xl { width: auto; }
/* Expand */
.uk-width-expand\@xl {
flex: 1;
min-width: 1px;
}
}
/* Intrinsic Widths
========================================================================== */
.uk-width-max-content { width: max-content; }
.uk-width-min-content { width: min-content; }
// Hooks
// ========================================================================
.hook-width-misc();
.hook-width-misc() {}
// Name: Height
// Description: Utilities for heights
//
// Component: `uk-height-*`
//
// ========================================================================
// Variables
// ========================================================================
@height-small-height: 150px;
@height-medium-height: 300px;
@height-large-height: 450px;
/* ========================================================================
Component: Height
========================================================================== */
[class*='uk-height'] { box-sizing: border-box; }
/*
* Only works if parent element has a height set
*/
.uk-height-1-1 { height: 100%; }
/*
* Useful to create image teasers
*/
.uk-height-viewport { min-height: 100vh; }
.uk-height-viewport-2 { min-height: 200vh; }
.uk-height-viewport-3 { min-height: 300vh; }
.uk-height-viewport-4 { min-height: 400vh; }
/*
* Pixel
* Useful for `overflow: auto`
*/
.uk-height-small { height: @height-small-height; }
.uk-height-medium { height: @height-medium-height; }
.uk-height-large { height: @height-large-height; }
.uk-height-max-small { max-height: @height-small-height; }
.uk-height-max-medium { max-height: @height-medium-height; }
.uk-height-max-large { max-height: @height-large-height; }
// Hooks
// ========================================================================
.hook-height-misc();
.hook-height-misc() {}
// Name: Text
// Description: Utilities for text
//
// Component: `uk-text-*`
//
// ========================================================================
// Variables
// ========================================================================
@text-lead-font-size: @global-large-font-size;
@text-lead-line-height: 1.5;
@text-lead-color: @global-emphasis-color;
@text-meta-font-size: @global-small-font-size;
@text-meta-line-height: 1.4;
@text-meta-color: @global-muted-color;
@text-small-font-size: @global-small-font-size;
@text-small-line-height: 1.5;
@text-large-font-size: @global-large-font-size;
@text-large-line-height: 1.5;
@text-muted-color: @global-muted-color;
@text-emphasis-color: @global-emphasis-color;
@text-primary-color: @global-primary-background;
@text-secondary-color: @global-secondary-background;
@text-success-color: @global-success-background;
@text-warning-color: @global-warning-background;
@text-danger-color: @global-danger-background;
@text-background-color: @global-primary-background;
/* ========================================================================
Component: Text
========================================================================== */
/* Style modifiers
========================================================================== */
.uk-text-lead {
font-size: @text-lead-font-size;
line-height: @text-lead-line-height;
color: @text-lead-color;
.hook-text-lead();
}
.uk-text-meta {
font-size: @text-meta-font-size;
line-height: @text-meta-line-height;
color: @text-meta-color;
.hook-text-meta();
}
/* Size modifiers
========================================================================== */
.uk-text-small {
font-size: @text-small-font-size;
line-height: @text-small-line-height;
.hook-text-small();
}
.uk-text-large {
font-size: @text-large-font-size;
line-height: @text-large-line-height;
.hook-text-large();
}
.uk-text-default {
font-size: @global-font-size;
line-height: @global-line-height;
}
/* Weight modifier
========================================================================== */
.uk-text-light { font-weight: 300; }
.uk-text-normal { font-weight: 400; }
.uk-text-bold { font-weight: 700; }
.uk-text-lighter { font-weight: lighter; }
.uk-text-bolder { font-weight: bolder; }
/* Style modifier
========================================================================== */
.uk-text-italic { font-style: italic; }
/* Transform modifier
========================================================================== */
.uk-text-capitalize { text-transform: capitalize !important; }
.uk-text-uppercase { text-transform: uppercase !important; }
.uk-text-lowercase { text-transform: lowercase !important; }
/* Decoration modifier
========================================================================== */
.uk-text-decoration-none { text-decoration: none !important; }
/* Color modifiers
========================================================================== */
.uk-text-muted { color: @text-muted-color !important; }
.uk-text-emphasis { color: @text-emphasis-color !important; }
.uk-text-primary { color: @text-primary-color !important; }
.uk-text-secondary { color: @text-secondary-color !important; }
.uk-text-success { color: @text-success-color !important; }
.uk-text-warning { color: @text-warning-color !important; }
.uk-text-danger { color: @text-danger-color !important; }
/* Background modifier
========================================================================== */
/*
* 1. The background clips to the foreground text. Works in all browsers.
* 2. Default color is set to transparent.
* 3. Container fits the text
* 4. Style
*/
.uk-text-background {
/* 1 */
-webkit-background-clip: text;
/* 2 */
color: transparent !important;
/* 3 */
display: inline-block;
/* 4 */
background-color: @text-background-color;
.hook-text-background();
}
/* Alignment modifiers
========================================================================== */
.uk-text-$(startSide) { text-align: $(startSide) !important; }
.uk-text-$(endSide) { text-align: $(endSide) !important; }
.uk-text-center { text-align: center !important; }
.uk-text-justify { text-align: justify !important; }
/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {
.uk-text-$(startSide)\@s { text-align: $(startSide) !important; }
.uk-text-$(endSide)\@s { text-align: $(endSide) !important; }
.uk-text-center\@s { text-align: center !important; }
}
/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) {
.uk-text-$(startSide)\@m { text-align: $(startSide) !important; }
.uk-text-$(endSide)\@m { text-align: $(endSide) !important; }
.uk-text-center\@m { text-align: center !important; }
}
/* Desktop and bigger */
@media (min-width: @breakpoint-large) {
.uk-text-$(startSide)\@l { text-align: $(startSide) !important; }
.uk-text-$(endSide)\@l { text-align: $(endSide) !important; }
.uk-text-center\@l { text-align: center !important; }
}
/* Large screen and bigger */
@media (min-width: @breakpoint-xlarge) {
.uk-text-$(startSide)\@xl { text-align: $(startSide) !important; }
.uk-text-$(endSide)\@xl { text-align: $(endSide) !important; }
.uk-text-center\@xl { text-align: center !important; }
}
/*
* Vertical
*/
.uk-text-top { vertical-align: top !important; }
.uk-text-middle { vertical-align: middle !important; }
.uk-text-bottom { vertical-align: bottom !important; }
.uk-text-baseline { vertical-align: baseline !important; }
/* Wrap modifiers
========================================================================== */
/*
* Prevent text from wrapping onto multiple lines
*/
.uk-text-nowrap { white-space: nowrap; }
/*
* 1. Make sure a max-width is set after which truncation can occur
* 2. Prevent text from wrapping onto multiple lines, and truncate with an ellipsis
* 3. Fix for table cells
*/
.uk-text-truncate {
/* 1 */
max-width: 100%;
/* 2 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 2 */
th.uk-text-truncate,
td.uk-text-truncate { max-width: 0; }
/*
* Wrap long words onto the next line and break them if they are too long to fit.
* 1. Make it work with table cells in all browsers.
* Note: Not using `hyphens: auto` because it hyphenates text even if not needed.
*/
.uk-text-break { overflow-wrap: break-word; }
/* 1 */
th.uk-text-break,
td.uk-text-break { word-break: break-word; }
// Hooks
// ========================================================================
.hook-text-misc();
.hook-text-lead() {}
.hook-text-meta() {}
.hook-text-small() {}
.hook-text-large() {}
.hook-text-background() {}
.hook-text-misc() {}
// Inverse
// ========================================================================
@inverse-text-lead-color: @inverse-global-color;
@inverse-text-meta-color: @inverse-global-muted-color;
@inverse-text-muted-color: @inverse-global-muted-color;
@inverse-text-emphasis-color: @inverse-global-emphasis-color;
@inverse-text-primary-color: @inverse-global-primary-background;
@inverse-text-secondary-color: @inverse-global-primary-background;
.hook-inverse() {
.uk-text-lead {
color: @inverse-text-lead-color;
.hook-inverse-text-lead();
}
.uk-text-meta {
color: @inverse-text-meta-color;
.hook-inverse-text-meta();
}
.uk-text-muted { color: @inverse-text-muted-color !important; }
.uk-text-emphasis { color: @inverse-text-emphasis-color !important; }
.uk-text-primary { color: @inverse-text-primary-color !important; }
.uk-text-secondary { color: @inverse-text-secondary-color !important; }
}
.hook-inverse-text-lead() {}
.hook-inverse-text-meta() {}
// Name: Column
// Description: Utilities for text columns
//
// Component: `uk-column-*`
//
// Sub-objects: `uk-column-span`
//
// Modifiers: `uk-column-divider`
//
// ========================================================================
// Variables
// ========================================================================
@column-gutter: @global-gutter;
@column-gutter-l: @global-medium-gutter;
@column-divider-rule-color: @global-border;
@column-divider-rule-width: 1px;
/* ========================================================================
Component: Column
========================================================================== */
[class*='uk-column-'] { column-gap: @column-gutter; }
/* Desktop and bigger */
@media (min-width: @breakpoint-large) {
[class*='uk-column-'] { column-gap: @column-gutter-l; }
}
/*
* Fix image 1px line wrapping into the next column in Chrome
*/
[class*='uk-column-'] img { transform: translate3d(0,0,0); }
/* Divider
========================================================================== */
/*
* 1. Double the column gap
*/
.uk-column-divider {
column-rule: @column-divider-rule-width solid @column-divider-rule-color;
/* 1 */
column-gap: (@column-gutter * 2);
}
/* Desktop and bigger */
@media (min-width: @breakpoint-large) {
.uk-column-divider {
column-gap: (@column-gutter-l * 2);
}
}
/* Width modifiers
========================================================================== */
.uk-column-1-2 { column-count: 2;}
.uk-column-1-3 { column-count: 3; }
.uk-column-1-4 { column-count: 4; }
.uk-column-1-5 { column-count: 5; }
.uk-column-1-6 { column-count: 6; }
/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {
.uk-column-1-2\@s { column-count: 2; }
.uk-column-1-3\@s { column-count: 3; }
.uk-column-1-4\@s { column-count: 4; }
.uk-column-1-5\@s { column-count: 5; }
.uk-column-1-6\@s { column-count: 6; }
}
/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) {
.uk-column-1-2\@m { column-count: 2; }
.uk-column-1-3\@m { column-count: 3; }
.uk-column-1-4\@m { column-count: 4; }
.uk-column-1-5\@m { column-count: 5; }
.uk-column-1-6\@m { column-count: 6; }
}
/* Desktop and bigger */
@media (min-width: @breakpoint-large) {
.uk-column-1-2\@l { column-count: 2; }
.uk-column-1-3\@l { column-count: 3; }
.uk-column-1-4\@l { column-count: 4; }
.uk-column-1-5\@l { column-count: 5; }
.uk-column-1-6\@l { column-count: 6; }
}
/* Large screen and bigger */
@media (min-width: @breakpoint-xlarge) {
.uk-column-1-2\@xl { column-count: 2; }
.uk-column-1-3\@xl { column-count: 3; }
.uk-column-1-4\@xl { column-count: 4; }
.uk-column-1-5\@xl { column-count: 5; }
.uk-column-1-6\@xl { column-count: 6; }
}
/* Make element span across all columns
* Does not work in Firefox yet
========================================================================== */
.uk-column-span { column-span: all; }
// Hooks
// ========================================================================
.hook-column-misc();
.hook-column-misc() {}
// Inverse
// ========================================================================
@inverse-column-divider-rule-color: @inverse-global-border;
.hook-inverse() {
.uk-column-divider { column-rule-color: @inverse-column-divider-rule-color; }
}
// Name: Cover
// Description: Utilities to let embedded content cover their container in a centered position
//
// Component: `uk-cover`
//
// Sub-object: `uk-cover-container`
//
// ========================================================================
/* ========================================================================
Component: Cover
========================================================================== */
/*
* Works with iframes and embedded content
* 1. Use attribute to apply transform instantly. Needed if transform is transitioned.
* 2. Reset responsiveness for embedded content
* 3. Center object
* Note: Percent values on the `top` property only works if this element
* is absolute positioned or if the container has a height
*/
/* 1 */
[uk-cover],
[data-uk-cover] {
/* 2 */
max-width: none;
/* 3 */
position: absolute;
$(startSide): 50%;
top: 50%;
--uk-position-translate-x: -50%;
--uk-position-translate-y: -50%;
transform: translate(var(--uk-position-translate-x), var(--uk-position-translate-y));
}
iframe[uk-cover],
iframe[data-uk-cover] { pointer-events: none; }
/* Container
========================================================================== */
/*
* 1. Parent container which clips resized object
* 2. Needed if the child is positioned absolute. See note above
*/
.uk-cover-container {
/* 1 */
overflow: hidden;
/* 2 */
position: relative;
}
// Hooks
// ========================================================================
.hook-cover-misc();
.hook-cover-misc() {}
// Name: Background
// Description: Utilities for backgrounds
//
// Component: `uk-background-*`
//
// ========================================================================
// Variables
// ========================================================================
@background-default-background: @global-background;
@background-muted-background: @global-muted-background;
@background-primary-background: @global-primary-background;
@background-secondary-background: @global-secondary-background;
/* ========================================================================
Component: Background
========================================================================== */
/* Color
========================================================================== */
.uk-background-default { background-color: @background-default-background; }
.uk-background-muted { background-color: @background-muted-background; }
.uk-background-primary { background-color: @background-primary-background; }
.uk-background-secondary { background-color: @background-secondary-background; }
/* Size
========================================================================== */
.uk-background-cover,
.uk-background-contain,
.uk-background-width-1-1,
.uk-background-height-1-1 {
background-position: 50% 50%;
background-repeat: no-repeat;
}
.uk-background-cover { background-size: cover; }
.uk-background-contain { background-size: contain; }
.uk-background-width-1-1 { background-size: 100%; }
.uk-background-height-1-1 { background-size: auto 100%; }
/* Position
========================================================================== */
.uk-background-top-$(startSide) { background-position: 0 0; }
.uk-background-top-center { background-position: 50% 0; }
.uk-background-top-$(endSide) { background-position: 100% 0; }
.uk-background-center-$(startSide) { background-position: 0 50%; }
.uk-background-center-center { background-position: 50% 50%; }
.uk-background-center-$(endSide) { background-position: 100% 50%; }
.uk-background-bottom-$(startSide) { background-position: 0 100%; }
.uk-background-bottom-center { background-position: 50% 100%; }
.uk-background-bottom-$(endSide) { background-position: 100% 100%; }
/* Repeat
========================================================================== */
.uk-background-norepeat { background-repeat: no-repeat; }
/* Attachment
========================================================================== */
/*
* 1. Fix bug introduced in Chrome 67: the background image is not visible if any element on the page uses `translate3d`
*/
.uk-background-fixed {
background-attachment: fixed;
/* 1 */
backface-visibility: hidden;
}
/*
* Exclude touch devices because `fixed` doesn't work on iOS and Android
*/
@media (pointer: coarse) {
.uk-background-fixed { background-attachment: scroll; }
}
/* Image
========================================================================== */
/* Phone portrait and smaller */
@media (max-width: @breakpoint-xsmall-max) {
.uk-background-image\@s { background-image: none !important; }
}
/* Phone landscape and smaller */
@media (max-width: @breakpoint-small-max) {
.uk-background-image\@m { background-image: none !important; }
}
/* Tablet landscape and smaller */
@media (max-width: @breakpoint-medium-max) {
.uk-background-image\@l { background-image: none !important; }
}
/* Desktop and smaller */
@media (max-width: @breakpoint-large-max) {
.uk-background-image\@xl {background-image: none !important; }
}
/* Blend modes
========================================================================== */
.uk-background-blend-multiply { background-blend-mode: multiply; }
.uk-background-blend-screen { background-blend-mode: screen; }
.uk-background-blend-overlay { background-blend-mode: overlay; }
.uk-background-blend-darken { background-blend-mode: darken; }
.uk-background-blend-lighten { background-blend-mode: lighten; }
.uk-background-blend-color-dodge { background-blend-mode: color-dodge; }
.uk-background-blend-color-burn { background-blend-mode: color-burn; }
.uk-background-blend-hard-light { background-blend-mode: hard-light; }
.uk-background-blend-soft-light { background-blend-mode: soft-light; }
.uk-background-blend-difference { background-blend-mode: difference; }
.uk-background-blend-exclusion { background-blend-mode: exclusion; }
.uk-background-blend-hue { background-blend-mode: hue; }
.uk-background-blend-saturation { background-blend-mode: saturation; }
.uk-background-blend-color { background-blend-mode: color; }
.uk-background-blend-luminosity { background-blend-mode: luminosity; }
// Hooks
// ========================================================================
.hook-background-misc();
.hook-background-misc() {}
// Name: Align
// Description: Utilities to align embedded content
//
// Component: `uk-align-$(startSide)-*`
// `uk-align-$(endSide)-*`
// `uk-align-center`
//
// ========================================================================
// Variables
// ========================================================================
@align-margin-horizontal: @global-gutter;
@align-margin-vertical: @global-gutter;
@align-margin-horizontal-l: @global-medium-gutter;
/* ========================================================================
Component: Align
========================================================================== */
/*
* Default
*/
[class*='uk-align'] {
display: block;
margin-bottom: @align-margin-vertical;
}
* + [class*='uk-align'] { margin-top: @align-margin-vertical; }
/*
* Center
*/
.uk-align-center {
margin-$(startSide): auto;
margin-$(endSide): auto;
}
/*
* $(startSide)/$(endSide)
*/
.uk-align-$(startSide) {
margin-top: 0;
margin-$(endSide): @align-margin-horizontal;
float: $(startSide);
}
.uk-align-$(endSide) {
margin-top: 0;
margin-$(startSide): @align-margin-horizontal;
float: $(endSide);
}
/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {
.uk-align-$(startSide)\@s {
margin-top: 0;
margin-$(endSide): @align-margin-horizontal;
float: $(startSide);
}
.uk-align-$(endSide)\@s {
margin-top: 0;
margin-$(startSide): @align-margin-horizontal;
float: $(endSide);
}
}
/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) {
.uk-align-$(startSide)\@m {
margin-top: 0;
margin-$(endSide): @align-margin-horizontal;
float: $(startSide);
}
.uk-align-$(endSide)\@m {
margin-top: 0;
margin-$(startSide): @align-margin-horizontal;
float: $(endSide);
}
}
/* Desktop and bigger */
@media (min-width: @breakpoint-large) {
.uk-align-$(startSide)\@l {
margin-top: 0;
float: $(startSide);
}
.uk-align-$(endSide)\@l {
margin-top: 0;
float: $(endSide);
}
.uk-align-$(startSide),
.uk-align-$(startSide)\@s,
.uk-align-$(startSide)\@m,
.uk-align-$(startSide)\@l { margin-$(endSide): @align-margin-horizontal-l; }
.uk-align-$(endSide),
.uk-align-$(endSide)\@s,
.uk-align-$(endSide)\@m,
.uk-align-$(endSide)\@l { margin-$(startSide): @align-margin-horizontal-l; }
}
/* Large screen and bigger */
@media (min-width: @breakpoint-xlarge) {
.uk-align-$(startSide)\@xl {
margin-top: 0;
margin-$(endSide): @align-margin-horizontal-l;
float: $(startSide);
}
.uk-align-$(endSide)\@xl {
margin-top: 0;
margin-$(startSide): @align-margin-horizontal-l;
float: $(endSide);
}
}
// Hooks
// ========================================================================
.hook-align-misc();
.hook-align-misc() {}
// Name: SVG
// Description: Component to style SVGs
//
// Component: `uk-svg`
//
// ========================================================================
/* ========================================================================
Component: SVG
========================================================================== */
/*
* 1. Fill all SVG elements with the current text color if no `fill` attribute is set
* 2. Set the fill and stroke color of all SVG elements to the current text color
*/
/* 1 */
.uk-svg,
/* 2 */
.uk-svg:not(.uk-preserve) [fill*='#']:not(.uk-preserve) { fill: currentcolor; }
.uk-svg:not(.uk-preserve) [stroke*='#']:not(.uk-preserve) { stroke: currentcolor; }
/*
* Fix Firefox blurry SVG rendering: https://bugzilla.mozilla.org/show_bug.cgi?id=1046835
*/
.uk-svg { transform: translate(0,0); }
// Hooks
// ========================================================================
.hook-svg-misc();
.hook-svg-misc() {}
// Name: Utility
// Description: Utilities collection
//
// Component: `uk-panel-*`
// `uk-clearfix`
// `uk-float-*`
// `uk-overflow-*`
// `uk-resize-*`
// `uk-display-*`
// `uk-inline-*`
// `uk-responsive-*`
// `uk-preserve-width`
// `uk-object-*`
// `uk-border-*`
// `uk-box-shadow-*`
// `uk-box-shadow-bottom`
// `uk-dropcap`
// `uk-logo`
// `uk-blend-*`
// `uk-transform-*`
// `uk-transform-origin-*`
//
// States: `uk-disabled`
// `uk-drag`
// `uk-dragover`
// `uk-preserve`
//
// ========================================================================
// Variables
// ========================================================================
@panel-scrollable-height: 170px;
@panel-scrollable-padding: 10px;
@panel-scrollable-border-width: @global-border-width;
@panel-scrollable-border: @global-border;
@border-rounded-border-radius: 5px;
@box-shadow-duration: 0.1s;
@box-shadow-bottom-height: 30px;
@box-shadow-bottom-bottom: -@box-shadow-bottom-height;
@box-shadow-bottom-border-radius: 100%;
@box-shadow-bottom-background: #444;
@box-shadow-bottom-blur: 20px;
@dropcap-margin-$(endSide): 10px;
@dropcap-font-size: ((@global-line-height * 3) * 1em);
@logo-font-size: @global-large-font-size;
@logo-font-family: @global-font-family;
@logo-color: @global-emphasis-color;
@logo-hover-color: @global-emphasis-color;
@dragover-box-shadow: 0 0 20px rgba(100,100,100,0.3);
/* ========================================================================
Component: Utility
========================================================================== */
/* Panel
========================================================================== */
.uk-panel {
display: flow-root;
position: relative;
box-sizing: border-box;
}
/*
* Remove margin from the last-child
*/
.uk-panel > :last-child { margin-bottom: 0; }
/*
* Scrollable
*/
.uk-panel-scrollable {
height: @panel-scrollable-height;
padding: @panel-scrollable-padding;
border: @panel-scrollable-border-width solid @panel-scrollable-border;
overflow: auto;
-webkit-overflow-scrolling: touch;
resize: both;
.hook-panel-scrollable();
}
/* Clearfix
========================================================================== */
/*
* 1. `table-cell` is used with `::before` because `table` creates a 1px gap when it becomes a flex item, only in Webkit
* 2. `table` is used again with `::after` because `clear` only works with block elements.
* Note: `display: block` with `overflow: hidden` is currently not working in the latest Safari
*/
/* 1 */
.uk-clearfix::before {
content: "";
display: table-cell;
}
/* 2 */
.uk-clearfix::after {
content: "";
display: table;
clear: both;
}
/* Float
========================================================================== */
/*
* 1. Prevent content overflow
*/
.uk-float-$(startSide) { float: $(startSide); }
.uk-float-$(endSide) { float: $(endSide); }
/* 1 */
[class*='uk-float-'] { max-width: 100%; }
/* Overfow
========================================================================== */
.uk-overflow-hidden { overflow: hidden; }
/*
* Enable scrollbars if content is clipped
*/
.uk-overflow-auto {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.uk-overflow-auto > :last-child { margin-bottom: 0; }
/* Box Sizing
========================================================================== */
.uk-box-sizing-content { box-sizing: content-box; }
.uk-box-sizing-border { box-sizing: border-box; }
/* Resize
========================================================================== */
.uk-resize { resize: both; }
.uk-resize-horizontal { resize: horizontal; }
.uk-resize-vertical { resize: vertical; }
/* Display
========================================================================== */
.uk-display-block { display: block !important; }
.uk-display-inline { display: inline !important; }
.uk-display-inline-block { display: inline-block !important; }
/* Inline
========================================================================== */
/*
* 1. Container fits its content
* 2. Create position context
* 3. Prevent content overflow
* 4. Behave like most inline-block elements
* 5. Force new layer without creating a new stacking context
* to fix 1px glitch when combined with overlays and transitions in Webkit
* 6. Clip child elements
*/
[class*='uk-inline'] {
/* 1 */
display: inline-block;
/* 2 */
position: relative;
/* 3 */
max-width: 100%;
/* 4 */
vertical-align: middle;
/* 5 */
-webkit-backface-visibility: hidden;
}
.uk-inline-clip {
/* 6 */
overflow: hidden;
}
/* Responsive objects
========================================================================== */
/*
* Preserve original dimensions
* Because `img, `video`, `canvas` and `audio` are already responsive by default, see Base component
*/
.uk-preserve-width,
.uk-preserve-width canvas,
.uk-preserve-width img,
.uk-preserve-width svg,
.uk-preserve-width video { max-width: none; }
/*
* Responsiveness
* Corrects `max-width` and `max-height` behavior if padding and border are used
*/
.uk-responsive-width,
.uk-responsive-height { box-sizing: border-box; }
/*
* 1. Set a maximum width. `important` needed to override `uk-preserve-width img`
* 2. Auto scale the height. Only needed if `height` attribute is present
*/
.uk-responsive-width {
/* 1 */
max-width: 100% !important;
/* 2 */
height: auto;
}
/*
* 1. Set a maximum height. Only works if the parent element has a fixed height
* 2. Auto scale the width. Only needed if `width` attribute is present
* 3. Reset max-width, which `img, `video`, `canvas` and `audio` already have by default
*/
.uk-responsive-height {
/* 1 */
max-height: 100%;
/* 2 */
width: auto;
/* 3 */
max-width: none;
}
/*
* Fix initial iframe width. Without the viewport is expanded on iOS devices
*/
[uk-responsive],
[data-uk-responsive] { max-width: 100%; }
/* Object
========================================================================== */
.uk-object-cover { object-fit: cover; }
.uk-object-contain { object-fit: contain; }
.uk-object-fill { object-fit: fill; }
.uk-object-none { object-fit: none; }
.uk-object-scale-down { object-fit: scale-down; }
/*
* Position
*/
.uk-object-top-$(startSide) { object-position: 0 0; }
.uk-object-top-center { object-position: 50% 0; }
.uk-object-top-$(endSide) { object-position: 100% 0; }
.uk-object-center-$(startSide) { object-position: 0 50%; }
.uk-object-center-center { object-position: 50% 50%; }
.uk-object-center-$(endSide) { object-position: 100% 50%; }
.uk-object-bottom-$(startSide) { object-position: 0 100%; }
.uk-object-bottom-center { object-position: 50% 100%; }
.uk-object-bottom-$(endSide) { object-position: 100% 100%; }
/* Border
========================================================================== */
.uk-border-circle { border-radius: 50%; }
.uk-border-pill { border-radius: 500px; }
.uk-border-rounded { border-radius: @border-rounded-border-radius; }
/*
* Fix `overflow: hidden` to be ignored with border-radius and CSS transforms in Webkit
*/
.uk-inline-clip[class*='uk-border-'] { -webkit-transform: translateZ(0); }
/* Box-shadow
========================================================================== */
.uk-box-shadow-small { box-shadow: @global-small-box-shadow; }
.uk-box-shadow-medium { box-shadow: @global-medium-box-shadow; }
.uk-box-shadow-large { box-shadow: @global-large-box-shadow; }
.uk-box-shadow-xlarge { box-shadow: @global-xlarge-box-shadow; }
/*
* Hover
*/
[class*='uk-box-shadow-hover'] { transition: box-shadow @box-shadow-duration ease-in-out; }
.uk-box-shadow-hover-small:hover { box-shadow: @global-small-box-shadow; }
.uk-box-shadow-hover-medium:hover { box-shadow: @global-medium-box-shadow; }
.uk-box-shadow-hover-large:hover { box-shadow: @global-large-box-shadow; }
.uk-box-shadow-hover-xlarge:hover { box-shadow: @global-xlarge-box-shadow; }
/* Box-shadow bottom
========================================================================== */
/*
* 1. Set position.
* 2. Set style
* 3. Fix shadow being clipped in Safari if container is animated
*/
@supports (filter: blur(0)) {
.uk-box-shadow-bottom {
display: inline-block;
position: relative;
z-index: 0;
max-width: 100%;
vertical-align: middle;
}
.uk-box-shadow-bottom::after {
content: "";
/* 1 */
position: absolute;
bottom: @box-shadow-bottom-bottom;
$(startSide): 0;
$(endSide): 0;
z-index: -1;
/* 2 */
height: @box-shadow-bottom-height;
border-radius: @box-shadow-bottom-border-radius;
background: @box-shadow-bottom-background;
filter: blur(@box-shadow-bottom-blur);
/* 3 */
will-change: filter;
.hook-box-shadow-bottom();
}
}
/* Drop cap
========================================================================== */
/*
* 1. Firefox doesn't apply `::first-letter` if the first letter is inside child elements
* https://bugzilla.mozilla.org/show_bug.cgi?id=214004
* 2. In Firefox, a floating `::first-letter` doesn't have a line box and there for no `line-height`
* https://bugzilla.mozilla.org/show_bug.cgi?id=317933
*/
.uk-dropcap::first-letter,
/* 1 */
.uk-dropcap > p:first-of-type::first-letter {
display: block;
margin-$(endSide): @dropcap-margin-$(endSide);
float: $(startSide);
font-size: @dropcap-font-size;
line-height: 1;
.hook-dropcap();
}
/* 2 */
@-moz-document url-prefix() {
.uk-dropcap::first-letter,
.uk-dropcap > p:first-of-type::first-letter { margin-top: 1.1%; }
}
/* Logo
========================================================================== */
/*
* 1. Style
* 2. Required for `a`
* 3. Behave like image but can be overridden through flex utility classes
*/
.uk-logo {
/* 1 */
font-size: @logo-font-size;
font-family: @logo-font-family;
color: @logo-color;
/* 2 */
text-decoration: none;
.hook-logo();
}
/* 3 */
:where(.uk-logo) {
display: inline-block;
vertical-align: middle;
}
/* Hover */
.uk-logo:hover {
color: @logo-hover-color;
/* 1 */
text-decoration: none;
.hook-logo-hover();
}
.uk-logo :where(img, svg, video) { display: block; }
.uk-logo-inverse { display: none; }
/* Disabled State
========================================================================== */
.uk-disabled { pointer-events: none; }
/* Drag State
========================================================================== */
/*
* 1. Needed if moving over elements with have their own cursor on hover, e.g. links or buttons
* 2. Fix dragging over iframes
*/
.uk-drag,
/* 1 */
.uk-drag * { cursor: move; }
/* 2 */
.uk-drag iframe { pointer-events: none; }
/* Dragover State
========================================================================== */
/*
* Create a box-shadow when dragging a file over the upload area
*/
.uk-dragover { box-shadow: @dragover-box-shadow; }
/* Blend modes
========================================================================== */
.uk-blend-multiply { mix-blend-mode: multiply; }
.uk-blend-screen { mix-blend-mode: screen; }
.uk-blend-overlay { mix-blend-mode: overlay; }
.uk-blend-darken { mix-blend-mode: darken; }
.uk-blend-lighten { mix-blend-mode: lighten; }
.uk-blend-color-dodge { mix-blend-mode: color-dodge; }
.uk-blend-color-burn { mix-blend-mode: color-burn; }
.uk-blend-hard-light { mix-blend-mode: hard-light; }
.uk-blend-soft-light { mix-blend-mode: soft-light; }
.uk-blend-difference { mix-blend-mode: difference; }
.uk-blend-exclusion { mix-blend-mode: exclusion; }
.uk-blend-hue { mix-blend-mode: hue; }
.uk-blend-saturation { mix-blend-mode: saturation; }
.uk-blend-color { mix-blend-mode: color; }
.uk-blend-luminosity { mix-blend-mode: luminosity; }
/* Transform
========================================================================== */
.uk-transform-center { transform: translate(-50%, -50%); }
/* Transform Origin
========================================================================== */
.uk-transform-origin-top-$(startSide) { transform-origin: 0 0; }
.uk-transform-origin-top-center { transform-origin: 50% 0; }
.uk-transform-origin-top-$(endSide) { transform-origin: 100% 0; }
.uk-transform-origin-center-$(startSide) { transform-origin: 0 50%; }
.uk-transform-origin-center-$(endSide) { transform-origin: 100% 50%; }
.uk-transform-origin-bottom-$(startSide) { transform-origin: 0 100%; }
.uk-transform-origin-bottom-center { transform-origin: 50% 100%; }
.uk-transform-origin-bottom-$(endSide) { transform-origin: 100% 100%; }
// Hooks
// ========================================================================
.hook-utility-misc();
.hook-panel-scrollable() {}
.hook-box-shadow-bottom() {}
.hook-dropcap() {}
.hook-logo() {}
.hook-logo-hover() {}
.hook-utility-misc() {}
// Inverse
// ========================================================================
@inverse-logo-color: @inverse-global-emphasis-color;
@inverse-logo-hover-color: @inverse-global-emphasis-color;
.hook-inverse() {
.uk-dropcap::first-letter,
.uk-dropcap p:first-of-type::first-letter {
.hook-inverse-dropcap();
}
.uk-logo {
color: @inverse-logo-color;
.hook-inverse-logo();
}
.uk-logo:hover {
color: @inverse-logo-hover-color;
.hook-inverse-logo-hover();
}
.uk-logo > picture:not(:only-of-type) > :not(.uk-logo-inverse),
.uk-logo > :not(picture):not(.uk-logo-inverse):not(:only-of-type) { display: none; }
.uk-logo-inverse { display: block; }
}
.hook-inverse-dropcap() {}
.hook-inverse-logo() {}
.hook-inverse-logo-hover() {}
// Name: Flex
// Description: Utilities for layouts based on flexbox
//
// Component: `uk-flex-*`
//
// ========================================================================
/* ========================================================================
Component: Flex
========================================================================== */
.uk-flex { display: flex; }
.uk-flex-inline { display: inline-flex; }
/* Alignment
========================================================================== */
/*
* Align items along the main axis of the current line of the flex container
* Row: Horizontal
*/
// Default
.uk-flex-$(startSide) { justify-content: flex-start; }
.uk-flex-center { justify-content: center; }
.uk-flex-$(endSide) { justify-content: flex-end; }
.uk-flex-between { justify-content: space-between; }
.uk-flex-around { justify-content: space-around; }
/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {
.uk-flex-$(startSide)\@s { justify-content: flex-start; }
.uk-flex-center\@s { justify-content: center; }
.uk-flex-$(endSide)\@s { justify-content: flex-end; }
.uk-flex-between\@s { justify-content: space-between; }
.uk-flex-around\@s { justify-content: space-around; }
}
/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) {
.uk-flex-$(startSide)\@m { justify-content: flex-start; }
.uk-flex-center\@m { justify-content: center; }
.uk-flex-$(endSide)\@m { justify-content: flex-end; }
.uk-flex-between\@m { justify-content: space-between; }
.uk-flex-around\@m { justify-content: space-around; }
}
/* Desktop and bigger */
@media (min-width: @breakpoint-large) {
.uk-flex-$(startSide)\@l { justify-content: flex-start; }
.uk-flex-center\@l { justify-content: center; }
.uk-flex-$(endSide)\@l { justify-content: flex-end; }
.uk-flex-between\@l { justify-content: space-between; }
.uk-flex-around\@l { justify-content: space-around; }
}
/* Large screen and bigger */
@media (min-width: @breakpoint-xlarge) {
.uk-flex-$(startSide)\@xl { justify-content: flex-start; }
.uk-flex-center\@xl { justify-content: center; }
.uk-flex-$(endSide)\@xl { justify-content: flex-end; }
.uk-flex-between\@xl { justify-content: space-between; }
.uk-flex-around\@xl { justify-content: space-around; }
}
/*
* Align items in the cross axis of the current line of the flex container
* Row: Vertical
*/
// Default
.uk-flex-stretch { align-items: stretch; }
.uk-flex-top { align-items: flex-start; }
.uk-flex-middle { align-items: center; }
.uk-flex-bottom { align-items: flex-end; }
/* Direction
========================================================================== */
// Default
.uk-flex-row { flex-direction: row; }
.uk-flex-row-reverse { flex-direction: row-reverse; }
.uk-flex-column { flex-direction: column; }
.uk-flex-column-reverse { flex-direction: column-reverse; }
/* Wrap
========================================================================== */
// Default
.uk-flex-nowrap { flex-wrap: nowrap; }
.uk-flex-wrap { flex-wrap: wrap; }
.uk-flex-wrap-reverse { flex-wrap: wrap-reverse; }
/*
* Aligns items within the flex container when there is extra space in the cross-axis
* Only works if there is more than one line of flex items
*/
// Default
.uk-flex-wrap-stretch { align-content: stretch; }
.uk-flex-wrap-top { align-content: flex-start; }
.uk-flex-wrap-middle { align-content: center; }
.uk-flex-wrap-bottom { align-content: flex-end; }
.uk-flex-wrap-between { align-content: space-between; }
.uk-flex-wrap-around { align-content: space-around; }
/* Item ordering
========================================================================== */
/*
* Default is 0
*/
.uk-flex-first { order: -1;}
.uk-flex-last { order: 99;}
/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {
.uk-flex-first\@s { order: -1; }
.uk-flex-last\@s { order: 99; }
}
/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) {
.uk-flex-first\@m { order: -1; }
.uk-flex-last\@m { order: 99; }
}
/* Desktop and bigger */
@media (min-width: @breakpoint-large) {
.uk-flex-first\@l { order: -1; }
.uk-flex-last\@l { order: 99; }
}
/* Large screen and bigger */
@media (min-width: @breakpoint-xlarge) {
.uk-flex-first\@xl { order: -1; }
.uk-flex-last\@xl { order: 99; }
}
/* Item dimensions
========================================================================== */
/*
* Initial: 0 1 auto
* Content dimensions, but shrinks
*/
/*
* No Flex: 0 0 auto
* Content dimensions
*/
.uk-flex-none { flex: none; }
/*
* Relative Flex: 1 1 auto
* Space is allocated considering content
*/
.uk-flex-auto { flex: auto; }
/*
* Absolute Flex: 1 1 0%
* Space is allocated solely based on flex
*/
.uk-flex-1 { flex: 1; }
// Hooks
// ========================================================================
.hook-flex-misc();
.hook-flex-misc() {}
// Name: Margin
// Description: Utilities for margins
//
// Component: `uk-margin-*`
// `uk-margin-small-*`
// `uk-margin-medium-*`
// `uk-margin-large-*`
// `uk-margin-xlarge-*`
// `uk-margin-remove-*`
// `uk-margin-auto-*`
//
// ========================================================================
// Variables
// ========================================================================
@margin-margin: @global-margin;
@margin-small-margin: @global-small-margin;
@margin-medium-margin: @global-medium-margin;
@margin-large-margin: @global-medium-margin;
@margin-large-margin-l: @global-large-margin;
@margin-xlarge-margin: @global-large-margin;
@margin-xlarge-margin-l: @global-xlarge-margin;
/* ========================================================================
Component: Margin
========================================================================== */
/*
* Default
*/
.uk-margin { margin-bottom: @margin-margin; }
* + .uk-margin { margin-top: @margin-margin !important; }
.uk-margin-top { margin-top: @margin-margin !important; }
.uk-margin-bottom { margin-bottom: @margin-margin !important; }
.uk-margin-$(startSide) { margin-$(startSide): @margin-margin !important; }
.uk-margin-$(endSide) { margin-$(endSide): @margin-margin !important; }
/* Small
========================================================================== */
.uk-margin-small { margin-bottom: @margin-small-margin; }
* + .uk-margin-small { margin-top: @margin-small-margin !important; }
.uk-margin-small-top { margin-top: @margin-small-margin !important; }
.uk-margin-small-bottom { margin-bottom: @margin-small-margin !important; }
.uk-margin-small-$(startSide) { margin-$(startSide): @margin-small-margin !important; }
.uk-margin-small-$(endSide) { margin-$(endSide): @margin-small-margin !important; }
/* Medium
========================================================================== */
.uk-margin-medium { margin-bottom: @margin-medium-margin; }
* + .uk-margin-medium { margin-top: @margin-medium-margin !important; }
.uk-margin-medium-top { margin-top: @margin-medium-margin !important; }
.uk-margin-medium-bottom { margin-bottom: @margin-medium-margin !important; }
.uk-margin-medium-$(startSide) { margin-$(startSide): @margin-medium-margin !important; }
.uk-margin-medium-$(endSide) { margin-$(endSide): @margin-medium-margin !important; }
/* Large
========================================================================== */
.uk-margin-large { margin-bottom: @margin-large-margin; }
* + .uk-margin-large { margin-top: @margin-large-margin !important; }
.uk-margin-large-top { margin-top: @margin-large-margin !important; }
.uk-margin-large-bottom { margin-bottom: @margin-large-margin !important; }
.uk-margin-large-$(startSide) { margin-$(startSide): @margin-large-margin !important; }
.uk-margin-large-$(endSide) { margin-$(endSide): @margin-large-margin !important; }
/* Desktop and bigger */
@media (min-width: @breakpoint-large) {
.uk-margin-large { margin-bottom: @margin-large-margin-l; }
* + .uk-margin-large { margin-top: @margin-large-margin-l !important; }
.uk-margin-large-top { margin-top: @margin-large-margin-l !important; }
.uk-margin-large-bottom { margin-bottom: @margin-large-margin-l !important; }
.uk-margin-large-$(startSide) { margin-$(startSide): @margin-large-margin-l !important; }
.uk-margin-large-$(endSide) { margin-$(endSide): @margin-large-margin-l !important; }
}
/* XLarge
========================================================================== */
.uk-margin-xlarge { margin-bottom: @margin-xlarge-margin; }
* + .uk-margin-xlarge { margin-top: @margin-xlarge-margin !important; }
.uk-margin-xlarge-top { margin-top: @margin-xlarge-margin !important; }
.uk-margin-xlarge-bottom { margin-bottom: @margin-xlarge-margin !important; }
.uk-margin-xlarge-$(startSide) { margin-$(startSide): @margin-xlarge-margin !important; }
.uk-margin-xlarge-$(endSide) { margin-$(endSide): @margin-xlarge-margin !important; }
/* Desktop and bigger */
@media (min-width: @breakpoint-large) {
.uk-margin-xlarge { margin-bottom: @margin-xlarge-margin-l; }
* + .uk-margin-xlarge { margin-top: @margin-xlarge-margin-l !important; }
.uk-margin-xlarge-top { margin-top: @margin-xlarge-margin-l !important; }
.uk-margin-xlarge-bottom { margin-bottom: @margin-xlarge-margin-l !important; }
.uk-margin-xlarge-$(startSide) { margin-$(startSide): @margin-xlarge-margin-l !important; }
.uk-margin-xlarge-$(endSide) { margin-$(endSide): @margin-xlarge-margin-l !important; }
}
/* Auto
========================================================================== */
.uk-margin-auto {
margin-$(startSide): auto !important;
margin-$(endSide): auto !important;
}
.uk-margin-auto-top { margin-top: auto !important; }
.uk-margin-auto-bottom { margin-bottom: auto !important; }
.uk-margin-auto-$(startSide) { margin-$(startSide): auto !important; }
.uk-margin-auto-$(endSide) { margin-$(endSide): auto !important; }
.uk-margin-auto-vertical {
margin-top: auto !important;
margin-bottom: auto !important;
}
/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {
.uk-margin-auto\@s {
margin-$(startSide): auto !important;
margin-$(endSide): auto !important;
}
.uk-margin-auto-$(startSide)\@s { margin-$(startSide): auto !important; }
.uk-margin-auto-$(endSide)\@s { margin-$(endSide): auto !important; }
}
/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) {
.uk-margin-auto\@m {
margin-$(startSide): auto !important;
margin-$(endSide): auto !important;
}
.uk-margin-auto-$(startSide)\@m { margin-$(startSide): auto !important; }
.uk-margin-auto-$(endSide)\@m { margin-$(endSide): auto !important; }
}
/* Desktop and bigger */
@media (min-width: @breakpoint-large) {
.uk-margin-auto\@l {
margin-$(startSide): auto !important;
margin-$(endSide): auto !important;
}
.uk-margin-auto-$(startSide)\@l { margin-$(startSide): auto !important; }
.uk-margin-auto-$(endSide)\@l { margin-$(endSide): auto !important; }
}
/* Large screen and bigger */
@media (min-width: @breakpoint-xlarge) {
.uk-margin-auto\@xl {
margin-$(startSide): auto !important;
margin-$(endSide): auto !important;
}
.uk-margin-auto-$(startSide)\@xl { margin-$(startSide): auto !important; }
.uk-margin-auto-$(endSide)\@xl { margin-$(endSide): auto !important; }
}
/* Remove
========================================================================== */
.uk-margin-remove { margin: 0 !important; }
.uk-margin-remove-top { margin-top: 0 !important; }
.uk-margin-remove-bottom { margin-bottom: 0 !important; }
.uk-margin-remove-$(startSide) { margin-$(startSide): 0 !important; }
.uk-margin-remove-$(endSide) { margin-$(endSide): 0 !important; }
.uk-margin-remove-vertical {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.uk-margin-remove-adjacent + *,
.uk-margin-remove-first-child > :first-child { margin-top: 0 !important; }
.uk-margin-remove-last-child > :last-child { margin-bottom: 0 !important; }
/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {
.uk-margin-remove-$(startSide)\@s { margin-$(startSide): 0 !important; }
.uk-margin-remove-$(endSide)\@s { margin-$(endSide): 0 !important; }
}
/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) {
.uk-margin-remove-$(startSide)\@m { margin-$(startSide): 0 !important; }
.uk-margin-remove-$(endSide)\@m { margin-$(endSide): 0 !important; }
}
/* Desktop and bigger */
@media (min-width: @breakpoint-large) {
.uk-margin-remove-$(startSide)\@l { margin-$(startSide): 0 !important; }
.uk-margin-remove-$(endSide)\@l { margin-$(endSide): 0 !important; }
}
/* Large screen and bigger */
@media (min-width: @breakpoint-xlarge) {
.uk-margin-remove-$(startSide)\@xl { margin-$(startSide): 0 !important; }
.uk-margin-remove-$(endSide)\@xl { margin-$(endSide): 0 !important; }
}
// Hooks
// ========================================================================
.hook-margin-misc();
.hook-margin-misc() {}
// Name: Padding
// Description: Utilities for padding
//
// Component: `uk-padding`
// `uk-padding-large`
// `uk-padding-remove-*`
//
// ========================================================================
// Variables
// ========================================================================
@padding-padding: @global-gutter;
@padding-padding-l: @global-medium-gutter;
@padding-small-padding: @global-small-gutter;
@padding-large-padding: @global-medium-gutter;
@padding-large-padding-l: @global-large-gutter;
/* ========================================================================
Component: Padding
========================================================================== */
.uk-padding { padding: @padding-padding; }
/* Desktop and bigger */
@media (min-width: @breakpoint-large) {
.uk-padding { padding: @padding-padding-l; }
}
/* Small
========================================================================== */
.uk-padding-small { padding: @padding-small-padding; }
/* Large
========================================================================== */
.uk-padding-large { padding: @padding-large-padding; }
/* Desktop and bigger */
@media (min-width: @breakpoint-large) {
.uk-padding-large { padding: @padding-large-padding-l; }
}
/* Remove
========================================================================== */
.uk-padding-remove { padding: 0 !important; }
.uk-padding-remove-top { padding-top: 0 !important; }
.uk-padding-remove-bottom { padding-bottom: 0 !important; }
.uk-padding-remove-$(startSide) { padding-$(startSide): 0 !important; }
.uk-padding-remove-$(endSide) { padding-$(endSide): 0 !important; }
.uk-padding-remove-vertical {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.uk-padding-remove-horizontal {
padding-$(startSide): 0 !important;
padding-$(endSide): 0 !important;
}
// Hooks
// ========================================================================
.hook-padding-misc();
.hook-padding-misc() {}
// Name: Position
// Description: Utilities to position content
//
// Component: `uk-position-absolute`
// `uk-position-relative`
// `uk-position-z-index`
// `uk-position-top`
// `uk-position-bottom`
// `uk-position-$(startSide)`
// `uk-position-$(endSide)`
// `uk-position-top-$(startSide)`
// `uk-position-top-center`
// `uk-position-top-$(endSide)`
// `uk-position-bottom-$(startSide)`
// `uk-position-bottom-center`
// `uk-position-bottom-$(endSide)`
// `uk-position-center`
// `uk-position-center-$(startSide)`
// `uk-position-center-$(endSide)`
// `uk-position-cover`
//
// Modifiers: `uk-position-small`
// `uk-position-medium`
// `uk-position-large`
//
// ========================================================================
// Variables
// ========================================================================
@position-small-margin: @global-small-gutter;
@position-medium-margin: @global-gutter;
@position-large-margin: @global-gutter;
@position-large-margin-l: 50px;
/* ========================================================================
Component: Position
========================================================================== */
:root { --uk-position-margin-offset: 0px; }
/* Directions
========================================================================== */
/*
* 1. Prevent content overflow.
*/
[class*='uk-position-top'],
[class*='uk-position-bottom'],
[class*='uk-position-$(startSide)'],
[class*='uk-position-$(endSide)'],
[class*='uk-position-center'] {
position: absolute !important;
/* 1 */
max-width: ~'calc(100% - (var(--uk-position-margin-offset) * 2))';
box-sizing: border-box;
}
/*
* Edges
* Don't use `width: 100%` because it's wrong if the parent has padding.
*/
.uk-position-top {
top: 0;
$(startSide): 0;
$(endSide): 0;
}
.uk-position-bottom {
bottom: 0;
$(startSide): 0;
$(endSide): 0;
}
.uk-position-$(startSide) {
top: 0;
bottom: 0;
$(startSide): 0;
}
.uk-position-$(endSide) {
top: 0;
bottom: 0;
$(endSide): 0;
}
/*
* Corners
*/
.uk-position-top-$(startSide) {
top: 0;
$(startSide): 0;
}
.uk-position-top-$(endSide) {
top: 0;
$(endSide): 0;
}
.uk-position-bottom-$(startSide) {
bottom: 0;
$(startSide): 0;
}
.uk-position-bottom-$(endSide) {
bottom: 0;
$(endSide): 0;
}
/*
* Center
* 1. Fix text wrapping if content is larger than 50% of the container.
* Using `max-content` requires `max-width` of 100% which is set generally.
*/
.uk-position-center {
top: ~'calc(50% - var(--uk-position-margin-offset))';
$(startSide): ~'calc(50% - var(--uk-position-margin-offset))';
--uk-position-translate-x: -50%;
--uk-position-translate-y: -50%;
transform: translate(var(--uk-position-translate-x), var(--uk-position-translate-y));
/* 1 */
width: max-content;
}
/* Vertical */
[class*='uk-position-center-$(startSide)'],
[class*='uk-position-center-$(endSide)'] {
top: ~'calc(50% - var(--uk-position-margin-offset))';
--uk-position-translate-y: -50%;
transform: translate(0, var(--uk-position-translate-y));
}
.uk-position-center-$(startSide) { $(startSide): 0; }
.uk-position-center-$(endSide) { $(endSide): 0; }
.uk-position-center-$(startSide)-out {
$(endSide): 100%;
width: max-content;
}
.uk-position-center-$(endSide)-out {
$(startSide): 100%;
width: max-content;
}
/* Horizontal */
.uk-position-top-center,
.uk-position-bottom-center {
$(startSide): ~'calc(50% - var(--uk-position-margin-offset))';
--uk-position-translate-x: -50%;
transform: translate(var(--uk-position-translate-x), 0);
/* 1 */
width: max-content;
}
.uk-position-top-center { top: 0; }
.uk-position-bottom-center { bottom: 0; }
/*
* Cover
*/
.uk-position-cover {
position: absolute;
top: 0;
bottom: 0;
$(startSide): 0;
$(endSide): 0;
}
/* Margin
========================================================================== */
.uk-position-small {
margin: @position-small-margin;
--uk-position-margin-offset: @position-small-margin;
}
.uk-position-medium {
margin: @position-medium-margin;
--uk-position-margin-offset: @position-medium-margin;
}
.uk-position-large {
margin: @position-large-margin;
--uk-position-margin-offset: @position-large-margin;
}
/* Desktop and bigger */
@media (min-width: @breakpoint-large) {
.uk-position-large {
margin: @position-large-margin-l;
--uk-position-margin-offset: @position-large-margin-l;
}
}
/* Schemes
========================================================================== */
.uk-position-relative { position: relative !important; }
.uk-position-absolute { position: absolute !important; }
.uk-position-fixed { position: fixed !important; }
.uk-position-sticky { position: sticky !important; }
/* Layer
========================================================================== */
.uk-position-z-index { z-index: 1; }
.uk-position-z-index-zero { z-index: 0; }
.uk-position-z-index-negative { z-index: -1; }
// Hooks
// ========================================================================
.hook-position-misc();
.hook-position-misc() {}
// Name: Transition
// Description: Utilities for transitions
//
// Component: `uk-transition-*`
//
// Modifiers: `uk-transition-fade`
// `uk-transition-scale-up`
// `uk-transition-scale-down`
// `uk-transition-slide-top-*`
// `uk-transition-slide-bottom-*`
// `uk-transition-slide-$(startSide)-*`
// `uk-transition-slide-$(endSide)-*`
// `uk-transition-opaque`
// `uk-transition-slow`
//
// Sub-objects: `uk-transition-toggle`,
// `uk-transition-active`
//
// States: `uk-active`
//
// ========================================================================
// Variables
// ========================================================================
@transition-duration: 0.3s;
@transition-scale: 1.03;
@transition-slide-small-translate: 10px;
@transition-slide-medium-translate: 50px;
@transition-slow-duration: 0.7s;
/* ========================================================================
Component: Transition
========================================================================== */
/* Transitions
========================================================================== */
/*
* The toggle is triggered on touch devices by two methods:
* 1. Using `:focus` and tabindex
* 2. Using `:hover` and a `touchstart` event listener registered on the document
* (Doesn't work on Surface touch devices)
*/
:where(.uk-transition-fade),
:where([class*='uk-transition-scale']),
:where([class*='uk-transition-slide']) {
--uk-position-translate-x: 0;
--uk-position-translate-y: 0;
}
.uk-transition-fade,
[class*='uk-transition-scale'],
[class*='uk-transition-slide'] {
--uk-translate-x: 0;
--uk-translate-y: 0;
--uk-scale-x: 1;
--uk-scale-y: 1;
transform: translate(var(--uk-position-translate-x), var(--uk-position-translate-y))
translate(var(--uk-translate-x), var(--uk-translate-y))
scale(var(--uk-scale-x), var(--uk-scale-y));
transition: @transition-duration ease-out;
transition-property: opacity, transform, filter;
opacity: 0;
}
/*
* Fade
*/
.uk-transition-toggle:hover .uk-transition-fade,
.uk-transition-toggle:focus .uk-transition-fade,
.uk-transition-toggle .uk-transition-fade:focus-within,
.uk-transition-active.uk-active .uk-transition-fade { opacity: 1; }
/*
* Scale
* 1. Make image rendering the same during the transition as before and after. Prefixed because of Safari.
*/
/* 1 */
[class*='uk-transition-scale'] { -webkit-backface-visibility: hidden; }
.uk-transition-scale-up {
--uk-scale-x: 1;
--uk-scale-y: 1;
}
.uk-transition-scale-down {
--uk-scale-x: @transition-scale;
--uk-scale-y: @transition-scale;
}
/* Show */
.uk-transition-toggle:hover .uk-transition-scale-up,
.uk-transition-toggle:focus .uk-transition-scale-up,
.uk-transition-toggle .uk-transition-scale-up:focus-within,
.uk-transition-active.uk-active .uk-transition-scale-up {
--uk-scale-x: @transition-scale;
--uk-scale-y: @transition-scale;
opacity: 1;
}
.uk-transition-toggle:hover .uk-transition-scale-down,
.uk-transition-toggle:focus .uk-transition-scale-down,
.uk-transition-toggle .uk-transition-scale-down:focus-within,
.uk-transition-active.uk-active .uk-transition-scale-down {
--uk-scale-x: 1;
--uk-scale-y: 1;
opacity: 1;
}
/*
* Slide
*/
.uk-transition-slide-top { --uk-translate-y: -100%; }
.uk-transition-slide-bottom { --uk-translate-y: 100%; }
.uk-transition-slide-$(startSide) { --uk-translate-x: -100%; }
.uk-transition-slide-$(endSide) { --uk-translate-x: 100%; }
.uk-transition-slide-top-small { --uk-translate-y: ~'calc(-1 * @{transition-slide-small-translate})'; }
.uk-transition-slide-bottom-small { --uk-translate-y: @transition-slide-small-translate; }
.uk-transition-slide-$(startSide)-small { --uk-translate-x: ~'calc(-1 * @{transition-slide-small-translate})'; }
.uk-transition-slide-$(endSide)-small { --uk-translate-x: @transition-slide-small-translate; }
.uk-transition-slide-top-medium { --uk-translate-y: ~'calc(-1 * @{transition-slide-medium-translate})'; }
.uk-transition-slide-bottom-medium { --uk-translate-y: @transition-slide-medium-translate; }
.uk-transition-slide-$(startSide)-medium { --uk-translate-x: ~'calc(-1 * @{transition-slide-medium-translate})'; }
.uk-transition-slide-$(endSide)-medium { --uk-translate-x: @transition-slide-medium-translate; }
/* Show */
.uk-transition-toggle:hover [class*='uk-transition-slide'],
.uk-transition-toggle:focus [class*='uk-transition-slide'],
.uk-transition-toggle [class*='uk-transition-slide']:focus-within,
.uk-transition-active.uk-active [class*='uk-transition-slide'] {
--uk-translate-x: 0;
--uk-translate-y: 0;
opacity: 1;
}
/* Opacity modifier
========================================================================== */
.uk-transition-opaque { opacity: 1; }
/* Duration modifiers
========================================================================== */
.uk-transition-slow { transition-duration: @transition-slow-duration; }
// Hooks
// ========================================================================
.hook-transition-misc();
.hook-transition-misc() {}
// Name: Visibility
// Description: Utilities to show or hide content on breakpoints, hover or touch
//
// Component: `uk-hidden-*`
// `uk-visible-*`
// `uk-invisible`
// `uk-visible-toggle`
// `uk-hidden-hover`
// `uk-invisible-hover`
// `uk-hidden-touch`
// `uk-hidden-notouch`
//
// ========================================================================
/* ========================================================================
Component: Visibility
========================================================================== */
/*
* Hidden
* `hidden` attribute also set here to make it stronger
*/
[hidden],
.uk-hidden { display: none !important; }
/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {
.uk-hidden\@s { display: none !important; }
}
/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) {
.uk-hidden\@m { display: none !important; }
}
/* Desktop and bigger */
@media (min-width: @breakpoint-large) {
.uk-hidden\@l { display: none !important; }
}
/* Large screen and bigger */
@media (min-width: @breakpoint-xlarge) {
.uk-hidden\@xl { display: none !important; }
}
/*
* Visible
*/
/* Phone portrait and smaller */
@media (max-width: @breakpoint-xsmall-max) {
.uk-visible\@s { display: none !important; }
}
/* Phone landscape and smaller */
@media (max-width: @breakpoint-small-max) {
.uk-visible\@m { display: none !important; }
}
/* Tablet landscape and smaller */
@media (max-width: @breakpoint-medium-max) {
.uk-visible\@l { display: none !important; }
}
/* Desktop and smaller */
@media (max-width: @breakpoint-large-max) {
.uk-visible\@xl { display: none !important; }
}
/* Visibility
========================================================================== */
.uk-invisible { visibility: hidden !important; }
/* Based on the State of the Parent Element
========================================================================== */
/*
* Can't use `display: none` nor `visibility: hidden` because both are not focusable.
* The target stays visible if any element within receives focus through keyboard.
*/
/*
* Discard space when hidden.
*/
.uk-visible-toggle:not(:hover):not(:focus) .uk-hidden-hover:not(:focus-within) {
position: absolute !important;
width: 0 !important;
height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
/*
* Keep space when hidden.
*/
.uk-visible-toggle:not(:hover):not(:focus) .uk-invisible-hover:not(:focus-within) { opacity: 0 !important; }
/* Based on Hover Capability of the Pointing Device
========================================================================== */
/*
* Hover
*/
/* Hide if primary pointing device doesn't support hover, e.g. touch screens. */
@media (hover: none) {
.uk-hidden-touch { display: none !important; }
}
/* Hide if primary pointing device supports hover, e.g. mice. */
@media (hover) {
.uk-hidden-notouch { display: none !important; }
}
// Hooks
// ========================================================================
.hook-visibility-misc();
.hook-visibility-misc() {}
// Name: Inverse
// Description: Inverse component style for light or dark backgrounds
//
// Component: `uk-light`
// `uk-dark`
//
// ========================================================================
// Variables
// ========================================================================
@inverse-global-color-mode: light;
@inverse-global-color: fade(@global-inverse-color, 70%);
@inverse-global-emphasis-color: @global-inverse-color;
@inverse-global-muted-color: fade(@global-inverse-color, 50%);
@inverse-global-inverse-color: @global-color;
@inverse-global-primary-background: @global-inverse-color;
@inverse-global-muted-background: fade(@global-inverse-color, 10%);
@inverse-global-border: fade(@global-inverse-color, 20%);
/* ========================================================================
Component: Inverse
========================================================================== */
/*
* Implemented class depends on the general theme color
* `uk-light` is for light colors on dark backgrounds
* `uk-dark` is or dark colors on light backgrounds
*/
.uk-light when (@inverse-global-color-mode = light) {
.hook-inverse();
}
.uk-dark when (@inverse-global-color-mode = dark) {
.hook-inverse();
}
// Hooks
// ========================================================================
.hook-inverse() {}
// Need to be loaded last
// Name: Print
// Description: Optimize page for printing
//
// Adapted from http://github.com/h5bp/html5-boilerplate
//
// Modifications: Removed link `href` and `title` related rules
//
// ========================================================================
/* ========================================================================
Component: Print
========================================================================== */
@media print {
*,
*::before,
*::after {
background: transparent !important;
color: black !important;
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited { text-decoration: underline; }
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead { display: table-header-group; }
tr,
img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 { page-break-after: avoid; }
.hook-print();
}
// Hooks
// ========================================================================
.hook-print() {}
]]>
コメント
コメントを投稿