uikit
Version:
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
2,216 lines • 366 kB
CSS
/*! UIkit 3.21.0 | https://www.getuikit.com | (c) 2014 - 2024 YOOtheme | MIT License */
/* ========================================================================
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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 16px;
font-weight: normal;
line-height: 1.5;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 3 */
background: #fff;
color: #666;
}
/*
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/* Links
========================================================================== */
/*
* Style
*/
a,
.uk-link {
color: #1e87f0;
text-decoration: none;
cursor: pointer;
}
a:hover,
.uk-link:hover,
.uk-link-toggle:hover .uk-link {
color: #0f6ecd;
text-decoration: underline;
}
/* 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: bolder;
}
/*
* 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: Consolas, monaco, monospace;
/* 2 */
font-size: 0.875rem;
/* 3 */
color: #f0506e;
white-space: nowrap;
}
/*
* Emphasize
*/
em {
color: #f0506e;
}
/*
* Insert
*/
ins {
background: #ffd;
color: #666;
text-decoration: none;
}
/*
* Mark
*/
mark {
background: #ffd;
color: #666;
}
/*
* Quote
*/
q {
font-style: italic;
}
/*
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/*
* 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 20px 0;
}
/* Add margin if adjacent element */
* + p,
* + ul,
* + ol,
* + dl,
* + pre,
* + address,
* + fieldset,
* + figure {
margin-top: 20px;
}
/* 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,
.uk-heading-3xlarge {
margin: 0 0 20px 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-weight: normal;
color: #333;
text-transform: none;
}
/* 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,
* + .uk-heading-3xlarge {
margin-top: 40px;
}
/*
* Sizes
*/
h1,
.uk-h1 {
font-size: 2.23125rem;
line-height: 1.2;
}
h2,
.uk-h2 {
font-size: 1.7rem;
line-height: 1.3;
}
h3,
.uk-h3 {
font-size: 1.5rem;
line-height: 1.4;
}
h4,
.uk-h4 {
font-size: 1.25rem;
line-height: 1.4;
}
h5,
.uk-h5 {
font-size: 16px;
line-height: 1.4;
}
h6,
.uk-h6 {
font-size: 0.875rem;
line-height: 1.4;
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
h1,
.uk-h1 {
font-size: 2.625rem;
}
h2,
.uk-h2 {
font-size: 2rem;
}
}
/* Lists
========================================================================== */
ul,
ol {
padding-right: 30px;
}
/*
* 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-right: 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 20px 0;
border: 0;
border-top: 1px solid #e5e5e5;
}
/* Add margin if adjacent element */
* + hr,
* + .uk-hr {
margin-top: 20px;
}
/* Address
========================================================================== */
address {
font-style: normal;
}
/* Blockquotes
========================================================================== */
blockquote {
margin: 0 0 20px 0;
font-size: 1.25rem;
line-height: 1.5;
font-style: italic;
}
/* Add margin if adjacent element */
* + blockquote {
margin-top: 20px;
}
/*
* Content
*/
blockquote p:last-of-type {
margin-bottom: 0;
}
blockquote footer {
margin-top: 10px;
font-size: 0.875rem;
line-height: 1.5;
}
/* Preformatted text
========================================================================== */
/*
* 1. Contain overflow in all browsers.
*/
pre {
font: 0.875rem / 1.5 Consolas, monaco, monospace;
color: #666;
-moz-tab-size: 4;
tab-size: 4;
/* 1 */
overflow: auto;
}
pre code {
font-family: Consolas, monaco, monospace;
}
/* Focus
========================================================================== */
:focus {
outline: none;
}
:focus-visible {
outline: 2px dotted #333;
}
/* Selection pseudo-element
========================================================================== */
::selection {
background: #39f;
color: #fff;
text-shadow: none;
}
/* HTML5 elements
========================================================================== */
/*
* 1. Add the correct display in Edge, IE 10+, and Firefox.
* 2. Add the correct display in IE.
*/
details,
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: 640px;
--uk-breakpoint-m: 960px;
--uk-breakpoint-l: 1200px;
--uk-breakpoint-xl: 1600px;
}
/* ========================================================================
Component: Link
========================================================================== */
/* Muted
========================================================================== */
a.uk-link-muted,
.uk-link-muted a,
.uk-link-toggle .uk-link-muted {
color: #999;
}
a.uk-link-muted:hover,
.uk-link-muted a:hover,
.uk-link-toggle:hover .uk-link-muted {
color: #666;
}
/* Text
========================================================================== */
a.uk-link-text,
.uk-link-text a,
.uk-link-toggle .uk-link-text {
color: inherit;
}
a.uk-link-text:hover,
.uk-link-text a:hover,
.uk-link-toggle:hover .uk-link-text {
color: #999;
}
/* Heading
========================================================================== */
a.uk-link-heading,
.uk-link-heading a,
.uk-link-toggle .uk-link-heading {
color: inherit;
}
a.uk-link-heading:hover,
.uk-link-heading a:hover,
.uk-link-toggle:hover .uk-link-heading {
color: #1e87f0;
text-decoration: none;
}
/* Reset
========================================================================== */
/*
* `!important` needed to override inverse component
*/
a.uk-link-reset,
.uk-link-reset a {
color: inherit !important;
text-decoration: none !important;
}
/* Toggle
========================================================================== */
.uk-link-toggle {
color: inherit !important;
text-decoration: none !important;
}
/* ========================================================================
Component: Heading
========================================================================== */
.uk-heading-small {
font-size: 2.6rem;
line-height: 1.2;
}
.uk-heading-medium {
font-size: 2.8875rem;
line-height: 1.1;
}
.uk-heading-large {
font-size: 3.4rem;
line-height: 1.1;
}
.uk-heading-xlarge {
font-size: 4rem;
line-height: 1;
}
.uk-heading-2xlarge {
font-size: 6rem;
line-height: 1;
}
.uk-heading-3xlarge {
font-size: 8rem;
line-height: 1;
}
/* Tablet Landscape and bigger */
@media (min-width: 960px) {
.uk-heading-small {
font-size: 3.25rem;
}
.uk-heading-medium {
font-size: 3.5rem;
}
.uk-heading-large {
font-size: 4rem;
}
.uk-heading-xlarge {
font-size: 6rem;
}
.uk-heading-2xlarge {
font-size: 8rem;
}
.uk-heading-3xlarge {
font-size: 11rem;
}
}
/* Laptop and bigger */
@media (min-width: 1200px) {
.uk-heading-medium {
font-size: 4rem;
}
.uk-heading-large {
font-size: 6rem;
}
.uk-heading-xlarge {
font-size: 8rem;
}
.uk-heading-2xlarge {
font-size: 11rem;
}
.uk-heading-3xlarge {
font-size: 15rem;
}
}
/* Primary
Deprecated: Use `uk-heading-medium` instead
========================================================================== */
/* Tablet landscape and bigger */
/* Desktop and bigger */
/* Hero
Deprecated: Use `uk-heading-xlarge` instead
========================================================================== */
/* Tablet landscape and bigger */
/* Desktop and bigger */
/* Divider
========================================================================== */
.uk-heading-divider {
padding-bottom: calc(5px + 0.1em);
border-bottom: calc(0.2px + 0.05em) solid #e5e5e5;
}
/* 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: calc(-0.1 * 1em);
vertical-align: middle;
/* 3 */
height: calc(4px + 0.7em);
margin-left: calc(5px + 0.2em);
border-right: calc(5px + 0.1em) solid #e5e5e5;
}
/* 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(50% - (calc(0.2px + 0.05em) / 2));
/* 2 */
width: 2000px;
/* 3 */
border-bottom: calc(0.2px + 0.05em) solid #e5e5e5;
}
.uk-heading-line > ::before {
left: 100%;
margin-left: calc(5px + 0.3em);
}
.uk-heading-line > ::after {
right: 100%;
margin-right: calc(5px + 0.3em);
}
/* ========================================================================
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: 20px;
}
/* Add margin if adjacent element */
* + [class*="uk-divider"] {
margin-top: 20px;
}
/* Icon
========================================================================== */
.uk-divider-icon {
position: relative;
height: 20px;
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22none%22%20stroke%3D%22%23e5e5e5%22%20stroke-width%3D%222%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
background-repeat: no-repeat;
background-position: 50% 50%;
}
.uk-divider-icon::before,
.uk-divider-icon::after {
content: "";
position: absolute;
top: 50%;
max-width: calc(50% - (50px / 2));
border-bottom: 1px solid #e5e5e5;
}
.uk-divider-icon::before {
left: calc(50% + (50px / 2));
width: 100%;
}
.uk-divider-icon::after {
right: calc(50% + (50px / 2));
width: 100%;
}
/* 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: 100px;
max-width: 100%;
border-top: 1px solid #e5e5e5;
vertical-align: top;
}
/* Vertical
========================================================================== */
.uk-divider-vertical {
width: max-content;
height: 100px;
margin-right: auto;
margin-left: auto;
border-right: 1px solid #e5e5e5;
}
/* ========================================================================
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: 10px;
}
/* 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-right: 30px;
}
/*
* 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;
right: -30px;
width: 30px;
height: 1.5em;
margin-bottom: -1.5em;
display: list-item;
list-style-position: inside;
text-align: left;
}
.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: #999 !important;
}
.uk-list-emphasis > ::before {
color: #333 !important;
}
.uk-list-primary > ::before {
color: #1e87f0 !important;
}
.uk-list-secondary > ::before {
color: #222 !important;
}
/* Image bullet modifier
========================================================================== */
.uk-list-bullet > * {
padding-right: 30px;
}
.uk-list-bullet > ::before {
content: "";
display: list-item;
position: relative;
right: -30px;
width: 30px;
height: 1.5em;
margin-bottom: -1.5em;
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22%23666%22%20cx%3D%223%22%20cy%3D%223%22%20r%3D%223%22%20%2F%3E%0A%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-position: 50% 50%;
}
/* Style modifiers
========================================================================== */
/*
* Divider
*/
.uk-list-divider > :nth-child(n+2) {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #e5e5e5;
}
/*
* Striped
*/
.uk-list-striped > * {
padding: 10px 10px;
}
.uk-list-striped > :nth-of-type(odd) {
background: #f8f8f8;
}
.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: 20px;
}
.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: 20px;
padding-top: 20px;
}
.uk-list-collapse.uk-list-divider > :nth-child(n+2) {
margin-top: 0;
padding-top: 0;
}
/*
* Striped
*/
.uk-list-large.uk-list-striped > * {
padding: 20px 10px;
}
.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;
}
/* ========================================================================
Component: Description list
========================================================================== */
/*
* Term
*/
.uk-description-list > dt {
color: #333;
}
.uk-description-list > dt:nth-child(n+2) {
margin-top: 20px;
}
/*
* Description
*/
/* Style modifier
========================================================================== */
/*
* Line
*/
.uk-description-list-divider > dt:nth-child(n+2) {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #e5e5e5;
}
/* ========================================================================
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: 20px;
}
/* Add margin if adjacent element */
* + .uk-table {
margin-top: 20px;
}
/* Header cell
========================================================================== */
/*
* 1. Style
*/
.uk-table th {
padding: 16px 12px;
text-align: right;
vertical-align: bottom;
/* 1 */
font-size: 16px;
font-weight: bold;
color: #666;
}
/* Cell
========================================================================== */
.uk-table td {
padding: 16px 12px;
vertical-align: top;
}
/*
* Remove margin from the last-child
*/
.uk-table td > :last-child {
margin-bottom: 0;
}
/* Footer
========================================================================== */
.uk-table tfoot {
font-size: 0.875rem;
}
/* Caption
========================================================================== */
.uk-table caption {
font-size: 0.875rem;
text-align: right;
color: #999;
}
/* 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: 1px solid #e5e5e5;
}
/*
* Striped
*/
.uk-table-striped > tr:nth-of-type(odd),
.uk-table-striped tbody tr:nth-of-type(odd) {
background: #f8f8f8;
}
/*
* Hover
*/
.uk-table-hover > tr:hover,
.uk-table-hover tbody tr:hover {
background: #ffd;
}
/* Active state
========================================================================== */
.uk-table > tr.uk-active,
.uk-table tbody tr.uk-active {
background: #ffd;
}
/* Size modifier
========================================================================== */
.uk-table-small th,
.uk-table-small td {
padding: 10px 12px;
}
.uk-table-large th,
.uk-table-large td {
padding: 22px 12px;
}
/* Justify modifier
========================================================================== */
.uk-table-justify th:first-child,
.uk-table-justify td:first-child {
padding-right: 0;
}
.uk-table-justify th:last-child,
.uk-table-justify td:last-child {
padding-left: 0;
}
/* Cell size modifier
========================================================================== */
.uk-table-shrink {
width: 1px;
}
.uk-table-expand {
min-width: 150px;
}
/* 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: 16px 12px;
}
.uk-table-small .uk-table-link > a {
padding: 10px 12px;
}
/* Responsive table
========================================================================== */
/* Phone landscape and smaller */
@media (max-width: 959px) {
.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: 5px !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: 5px !important;
}
.uk-table-justify.uk-table-responsive th,
.uk-table-justify.uk-table-responsive td {
padding-right: 0;
padding-left: 0;
}
}
/* ========================================================================
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: 20px;
height: 20px;
/* 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: #999;
/* 1 */
text-decoration: none !important;
}
.uk-icon-link:hover {
color: #666;
}
/* OnClick + Active */
.uk-icon-link:active,
.uk-active > .uk-icon-link {
color: #595959;
}
/*
* Button
* 1. Center icon vertically and horizontally
*/
.uk-icon-button {
box-sizing: border-box;
width: 36px;
height: 36px;
border-radius: 500px;
background: #f8f8f8;
color: #999;
vertical-align: middle;
/* 1 */
display: inline-flex;
justify-content: center;
align-items: center;
}
/* Hover */
.uk-icon-button:hover {
background-color: #ebebeb;
color: #666;
}
/* OnClick + Active */
.uk-icon-button:active,
.uk-active > .uk-icon-button {
background-color: #dfdfdf;
color: #666;
}
/* ========================================================================
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;
}
/* 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: 3px;
background: #ebebeb;
}
.uk-range:focus::-webkit-slider-runnable-track,
.uk-range:active::-webkit-slider-runnable-track {
background: #dedede;
}
/* Firefox */
.uk-range::-moz-range-track {
height: 3px;
background: #ebebeb;
}
.uk-range:focus::-moz-range-track {
background: #dedede;
}
/*
* Thumb
* 1. Reset
* 2. Style
*/
/* Webkit */
.uk-range::-webkit-slider-thumb {
/* 1 */
-webkit-appearance: none;
margin-top: -7px;
/* 2 */
height: 15px;
width: 15px;
border-radius: 500px;
background: #666;
}
/* Firefox */
.uk-range::-moz-range-thumb {
/* 1 */
border: none;
/* 2 */
height: 15px;
width: 15px;
margin-top: -7px;
border-radius: 500px;
background: #666;
}
/* ========================================================================
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.
* 1. Reset `min-width`
*/
.uk-fieldset {
border: none;
margin: 0;
padding: 0;
/* 1 */
min-width: 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 10px;
background: #f8f8f8;
color: #666;
}
/*
* 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: 40px;
vertical-align: middle;
/* 1 */
display: inline-block;
}
/* 2 */
.uk-input:not(input),
.uk-select:not(select) {
line-height: 40px;
}
/*
* Multi-line
*/
.uk-select[multiple],
.uk-select[size],
.uk-textarea {
padding-top: 6px;
padding-bottom: 6px;
vertical-align: top;
}
.uk-select[multiple],
.uk-select[size] {
resize: vertical;
}
/* Focus */
.uk-input:focus,
.uk-select:focus,
.uk-textarea:focus {
outline: none;
background-color: #ebebeb;
color: #666;
}
/* Disabled */
.uk-input:disabled,
.uk-select:disabled,
.uk-textarea:disabled {
background-color: #f8f8f8;
color: #999;
}
/*
* Placeholder
*/
.uk-input::placeholder {
color: #999;
}
.uk-textarea::placeholder {
color: #999;
}
/* Style modifier (`uk-input`, `uk-select` and `uk-textarea`)
========================================================================== */
/*
* Small
*/
.uk-form-small {
font-size: 0.875rem;
}
/* Single-line */
.uk-form-small:not(textarea):not([multiple]):not([size]) {
height: 30px;
padding-right: 8px;
padding-left: 8px;
}
/* Multi-line */
textarea.uk-form-small,
[multiple].uk-form-small,
[size].uk-form-small {
padding: 5px 8px;
}
.uk-form-small:not(select):not(input):not(textarea) {
line-height: 30px;
}
/*
* Large
*/
.uk-form-large {
font-size: 1.25rem;
}
/* Single-line */
.uk-form-large:not(textarea):not([multiple]):not([size]) {
height: 55px;
padding-right: 12px;
padding-left: 12px;
}
/* Multi-line */
textarea.uk-form-large,
[multiple].uk-form-large,
[size].uk-form-large {
padding: 7px 12px;
}
.uk-form-large:not(select):not(input):not(textarea) {
line-height: 55px;
}
/* Style modifier (`uk-input`, `uk-select` and `uk-textarea`)
========================================================================== */
/*
* Error
*/
.uk-form-danger,
.uk-form-danger:focus {
color: #f0506e;
}
/*
* Success
*/
.uk-form-success,
.uk-form-success:focus {
color: #32d296;
}
/*
* Blank
*/
.uk-form-blank {
background: none;
}
/* 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: 50px;
}
select.uk-form-width-xsmall {
width: 75px;
}
.uk-form-width-small {
width: 130px;
}
.uk-form-width-medium {
width: 200px;
}
.uk-form-width-large {
width: 500px;
}
/* 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-left: 20px;
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23666%22%20points%3D%2212%201%209%206%2015%206%22%20%2F%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23666%22%20points%3D%2212%2013%209%208%2015%208%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
background-repeat: no-repeat;
background-position: 0% 50%;
}
/* 3 */
.uk-select:not([multiple]):not([size]) option {
color: #666;
}
/*
* Disabled
*/
.uk-select:not([multiple]):not([size]):disabled {
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23999%22%20points%3D%2212%201%209%206%2015%206%22%20%2F%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23999%22%20points%3D%2212%2013%209%208%2015%208%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
}
/* Datalist
========================================================================== */
/*
* 1. Remove default style in Chrome
*/
.uk-input[list] {
padding-left: 20px;
background-repeat: no-repeat;
background-position: 0% 50%;
}
.uk-input[list]:hover,
.uk-input[list]:focus {
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23666%22%20points%3D%2212%2012%208%206%2016%206%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
}
/* 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: 16px;
width: 16px;
/* 2 */
overflow: hidden;
/* 3 */
margin-top: -4px;
vertical-align: middle;
/* 4 */
-webkit-appearance: none;
-moz-appearance: none;
/* 5 */
background-color: #ebebeb;
/* 6 */
background-repeat: no-repeat;
background-position: 50% 50%;
}
.uk-radio {
border-radius: 50%;
}
/* Focus */
.uk-radio:focus,
.uk-checkbox:focus {
background-color: #dedede;
outline: none;
}
/*
* Checked
*/
.uk-radio:checked,
.uk-checkbox:checked,
.uk-checkbox:indeterminate {
background-color: #1e87f0;
}
/* Focus */
.uk-radio:checked:focus,
.uk-checkbox:checked:focus,
.uk-checkbox:indeterminate:focus {
background-color: #0e6dcd;
}
/*
* Icons
*/
.uk-radio:checked {
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22%23fff%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%222%22%20%2F%3E%0A%3C%2Fsvg%3E");
}
.uk-checkbox:checked {
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23fff%22%20points%3D%2212%201%205%207.5%202%205%201%205.5%205%2010%2013%201.5%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
}
.uk-checkbox:indeterminate {
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23fff%22%20x%3D%223%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%221%22%20%2F%3E%0A%3C%2Fsvg%3E");
}
/*
* Disabled
*/
.uk-radio:disabled,
.uk-checkbox:disabled {
background-color: #f8f8f8;
}
.uk-radio:disabled:checked {
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22%23999%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%222%22%20%2F%3E%0A%3C%2Fsvg%3E");
}
.uk-checkbox:disabled:checked {
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23999%22%20points%3D%2212%201%205%207.5%202%205%201%205.5%205%2010%2013%201.5%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
}
.uk-checkbox:disabled:indeterminate {
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23999%22%20x%3D%223%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%221%22%20%2F%3E%0A%3C%2Fsvg%3E");
}
/* 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: 1.5rem;
line-height: 1.4;
}
/* 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 left
* 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 */
right: 0;
/* 3 */
-webkit-appearance: none;
/* 4 */
opacity: 0;
cursor: pointer;
}
.uk-form-custom input[type="file"] {
/* 5 */
font-size: 500px;
/* 6 */
overflow: hidden;
}
/* Label
========================================================================== */
/* Layout
========================================================================== */
/*
* Stacked
*/
.uk-form-stacked .uk-form-label {
display: block;
margin-bottom: 10px;
}
/*
* Horizontal
*/
/* Tablet portrait and smaller */
@media (max-width: 959px) {
/* Behave like `uk-form-stacked` */
.uk-form-horizontal .uk-form-label {
display: block;
margin-bottom: 10px;
}
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
.uk-form-horizontal .uk-form-label {
width: 200px;
margin-top: 7px;
float: right;
}
.uk-form-horizontal .uk-form-controls {
margin-right: 215px;
}
/* Better vertical alignment if controls are checkboxes and radio buttons with text */
.uk-form-horizontal .uk-form-controls-text {
padding-top: 7px;
}
}
/* 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;
right: 0;
/* 2 */
width: 40px;
/* 3 */
display: inline-flex;
justify-content: center;
align-items: center;
/* 4 */
color: #999;
}
/*
* Required for `a`.
*/
.uk-form-icon:hover {
color: #666;
}
/*
* 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-right: 40px !important;
}
/*
* Position modifier
*/
.uk-form-icon-flip {
left: 0;
right: auto;
}
.uk-form-icon-flip ~ .uk-input {
padding-left: 40px !important;
}
/* ========================================================================
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 30px;
vertical-align: middle;
font-size: 16px;
/* 8 */
line-height: 40px;
/* 9 */
text-align: center;
/* 10 */
text-decoration: none;
}
.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;
}
/* OnClick + Active */
/* Style modifiers
========================================================================== */
/*
* Default
*/
.uk-button-default {
background-color: #f8f8f8;
color: #333;
}
/* Hover */
.uk-button-default:hover {
background-color: #ebebeb;
color: #333;
}
/* OnClick + Active */
.uk-button-default:active,
.uk-button-default.uk-active {
background-color: #dfdfdf;
color: #333;
}
/*
* Primary
*/
.uk-button-primary {
background-color: #1e87f0;
color: #fff;
}
/* Hover */
.uk-button-primary:hover {
background-color: #0f7ae5;
color: #fff;
}
/* OnClick + Active */
.uk-button-primary:active,
.uk-button-primary.uk-active {
background-color: #0e6dcd;
color: #fff;
}
/*
* Secondary
*/
.uk-button-secondary {
background-color: #222;
color: #fff;
}
/* Hover */
.uk-button-secondary:hover {
background-color: #151515;
color: #fff;
}
/* OnClick + Active */
.uk-button-secondary:active,
.uk-button-secondary.uk-active {
background-color: #080808;
color: #fff;
}
/*
* Danger
*/
.uk-button-danger {
background-color: #f0506e;
color: #fff;
}
/* Hover */
.uk-button-danger:hover {
background-color: #ee395b;
color: #fff;
}
/* OnClick + Active */
.uk-button-danger:active,
.uk-button-danger.uk-active {
background-color: #ec2147;
color: #fff;
}
/*
* 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: #f8f8f8;
color: #999;
}
/* Size modifiers
========================================================================== */
.uk-button-small {
padding: 0 15px;
line-height: 30px;
font-size: 0.875rem;
}
.uk-button-large {
padding: 0 40px;
line-height: 55px;
font-size: 1.25rem;
}
/* Text modifiers
========================================================================== */
/*
* Text
* 1. Reset
* 2. Style
*/
.uk-button-text {
/* 1 */
padding: 0;
line-height: 1.5;
background: none;
/* 2 */
color: #333;
}
/* Hover */
.uk-button-text:hover {
color: #999;
}
/* Disabled */
.uk-button-text:disabled {
color: #999;
}
/*
* Link
* 1. Reset
* 2. Style
*/
.uk-button-link {
/* 1 */
padding: 0;
line-height: 1.5;
background: none;
/* 2 */
color: #333;
}
/* Hover */
.uk-button-link:hover {
color: #999;
text-decoration: none;
}
/* Disabled */
.uk-button-link:disabled {
color: #999;
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;
}
/* ========================================================================
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: #f8f8f8;
/* 5 */
margin-bottom: 20px;
height: 15px;
}
/* Add margin if adjacent element */
* + .uk-progress {
margin-top: 20px;
}
/*
* 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: #1e87f0;
transition: width 0.6s ease;
}
.uk-progress::-moz-progress-bar {
background-color: #1e87f0;
/* 1 */
transition: width 0.6s ease;
}
/* ========================================================================
Component: Section
========================================================================== */
/*
* 1. Make it work with `100vh` and height in general
*/
.uk-section {
display: flow-root;
box-sizing: border-box;
/* 1 */
padding-top: 40px;
padding-bottom: 40px;
}
/* Desktop and bigger */
@media (min-width: 960px) {
.uk-section {
padding-top: 70px;
padding-bottom: 70px;
}
}
/*
* Remove margin from the last-child
*/
.uk-section > :last-child {
margin-bottom: 0;
}
/* Size modifiers
========================================================================== */
/*
* XSmall
*/
.uk-section-xsmall {
padding-top: 20px;
padding-bottom: 20px;
}
/*
* Small
*/
.uk-section-small {
padding-top: 40px;
padding-bottom: 40px;
}
/*
* Large
*/
.uk-section-large {
padding-top: 70px;
padding-bottom: 70px;
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
.uk-section-large {
padding-top: 140px;
padding-bottom: 140px;
}
}
/*
* XLarge
*/
.uk-section-xlarge {
padding-top: 140px;
padding-bottom: 140px;
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
.uk-section-xlarge {
padding-top: 210px;
padding-bottom: 210px;
}
}
/* Style modifiers
========================================================================== */
/*
* Default
*/
.uk-section-default {
--uk-inverse: dark;
background: #fff;
}
/*
* Muted
*/
.uk-section-muted {
--uk-inverse: dark;
background: #f8f8f8;
}
/*
* Primary
*/
.uk-section-primary {
--uk-inverse: light;
background: #1e87f0;
}
/*
* Secondary
*/
.uk-section-secondary {
--uk-inverse: light;
background: #222;
}
/* Overlap modifier
========================================================================== */
/*
* Reserved modifier to make a section overlap another section with an border image
* Implemented by the theme
*/
/* ===============================