UNPKG

antd-theme-generator

Version:

This a script to generate color specific styles less file and which you can use to change theme dynamically in browser

2,574 lines 181 kB
/* ======================================================================== Component: Base ========================================================================== */ /* * 1. Normalize default `font-family` and set `font-size` to support `rem` units * 2. Prevents iOS text size adjust after orientation change, without disabling user zoom * 3. Style */ html { /* 1 */ font: normal 14px / 20px "Helvetica Neue", Helvetica, Arial, sans-serif; /* 2 */ -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; /* 3 */ background: #fff; color: #444; } /* * Removes default margin. */ body { margin: 0; } /* Links ========================================================================== */ /* * Remove the gray background color from active links in IE 10. */ a { background: transparent; } /* * Improve readability of focused elements when they are also in an active/hover state. */ a:active, a:hover { outline: 0; } /* * Style */ a, .uk-link { color: #07D; text-decoration: none; cursor: pointer; } a:hover, .uk-link:hover { color: #059; text-decoration: underline; } /* Text-level semantics ========================================================================== */ /* * Address styling not present in IE 8/9/10/11, Safari, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /* * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ b, strong { font-weight: bold; } /* * 1. Address odd `em`-unit font size rendering in all browsers. * 2. Consolas has a better baseline in running text compared to `Courier` */ :not(pre) > code, :not(pre) > kbd, :not(pre) > samp { /* 1 */ font-size: 12px; /* 2 */ font-family: Consolas, monospace, serif; /* 3 */ color: #D05; white-space: nowrap; } /* * Emphasize */ em { color: #D05; } /* * Insert */ ins { background: #ffa; color: #444; text-decoration: none; } /* * Mark * Note: Addresses styling not present in IE 8/9. */ mark { background: #ffa; color: #444; } /* * Quote */ q { font-style: italic; } /* * Addresses inconsistent and variable 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 embedded content and the bottom of their containers. */ audio, canvas, iframe, img, svg, video { vertical-align: middle; } /* * Responsiveness * 1. Sets a maximum width relative to the parent and auto scales the height * 2. Corrects `max-width` behavior if padding and border are used */ audio, canvas, img, svg, video { /* 1 */ max-width: 100%; height: auto; /* 2 */ box-sizing: border-box; } /* * Preserve original dimensions */ .uk-img-preserve, .uk-img-preserve audio, .uk-img-preserve canvas, .uk-img-preserve img, .uk-img-preserve svg, .uk-img-preserve video { max-width: none; } /* * Remove border when inside `a` element in IE 8/9/10. */ img { border: 0; } /* * Correct overflow not hidden in IE 9/10/11. */ svg:not(:root) { overflow: hidden; } /* Block elements ========================================================================== */ /* * Reset margin */ blockquote, figure { margin: 0; } /* * Margins */ p, ul, ol, dl, blockquote, pre, address, fieldset, figure { margin: 0 0 15px 0; } * + p, * + ul, * + ol, * + dl, * + blockquote, * + pre, * + address, * + fieldset, * + figure { margin-top: 15px; } /* Headings ========================================================================== */ h1, h2, h3, h4, h5, h6 { margin: 0 0 15px 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; color: #444; text-transform: none; } /* * Margins */ * + h1, * + h2, * + h3, * + h4, * + h5, * + h6 { margin-top: 25px; } /* * Sizes */ h1, .uk-h1 { font-size: 36px; line-height: 42px; } h2, .uk-h2 { font-size: 24px; line-height: 30px; } h3, .uk-h3 { font-size: 18px; line-height: 24px; } h4, .uk-h4 { font-size: 16px; line-height: 22px; } h5, .uk-h5 { font-size: 14px; line-height: 20px; } h6, .uk-h6 { font-size: 12px; line-height: 18px; } /* Lists ========================================================================== */ ul, ol { padding-left: 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-left: 0; } /* Horizontal rules ========================================================================== */ /* * 1. Address differences between Firefox and other browsers. * 2. Style */ hr { /* 1 */ box-sizing: content-box; height: 0; /* 2 */ margin: 15px 0; border: 0; border-top: 1px solid #ddd; } /* Address ========================================================================== */ address { font-style: normal; } /* Blockquotes ========================================================================== */ blockquote { padding-left: 15px; border-left: 5px solid #ddd; font-size: 16px; line-height: 22px; font-style: italic; } /* Preformatted text ========================================================================== */ /* * 1. Contain overflow in all browsers. */ pre { padding: 10px; background: #f5f5f5; font: 12px / 18px Consolas, monospace, serif; color: #444; -moz-tab-size: 4; tab-size: 4; /* 1 */ overflow: auto; } /* Selection pseudo-element ========================================================================== */ ::-moz-selection { background: #39f; color: #fff; text-shadow: none; } ::selection { background: #39f; color: #fff; text-shadow: none; } /* HTML5 elements ========================================================================== */ /* * Correct `block` display not defined for any HTML5 element in IE 8/9. * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. * Correct `block` display not defined for `main` in IE 11. */ article, aside, details, figcaption, figure, footer, header, main, nav, section, summary { display: block; } /* * Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /* * Prevent displaying `audio` without controls in Chrome, Safari and Opera */ audio:not([controls]) { display: none; } /* * Address `[hidden]` styling not present in IE 8/9/10. * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. */ [hidden], template { display: none; } /* Iframe ========================================================================== */ iframe { border: 0; } /* Fix viewport for IE10 snap mode ========================================================================== */ @media screen and (max-width: 400px) { @-ms-viewport { width: device-width; } } /* ======================================================================== Component: Grid ========================================================================== */ /* * 1. Makes grid more robust so that it can be used with other block elements like lists */ .uk-grid { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; /* 1 */ margin: 0; padding: 0; list-style: none; } /* * DEPRECATED * Micro clearfix * Can't use `table` because it creates a 1px gap when it becomes a flex item, only in Webkit */ .uk-grid:before, .uk-grid:after { content: ""; display: block; overflow: hidden; } .uk-grid:after { clear: both; } /* * Grid cell * 1. Space is allocated solely based on content dimensions * 2. Makes grid more robust so that it can be used with other block elements * 3. DEPRECATED Using `float` to support IE9 */ .uk-grid > * { /* 1 */ -ms-flex: none; -webkit-flex: none; flex: none; /* 2 */ margin: 0; /* 3 */ float: left; } /* * Remove margin from the last-child */ .uk-grid > * > :last-child { margin-bottom: 0; } /* Grid gutter ========================================================================== */ /* * Default gutter */ /* Horizontal */ .uk-grid { margin-left: -25px; } .uk-grid > * { padding-left: 25px; } /* Vertical */ .uk-grid + .uk-grid, .uk-grid-margin, .uk-grid > * > .uk-panel + .uk-panel { margin-top: 25px; } /* Large screen and bigger */ @media (min-width: 1220px) { /* Horizontal */ .uk-grid { margin-left: -35px; } .uk-grid > * { padding-left: 35px; } /* Vertical */ .uk-grid + .uk-grid, .uk-grid-margin, .uk-grid > * > .uk-panel + .uk-panel { margin-top: 35px; } } /* * Collapse gutter */ /* Horizontal */ .uk-grid-collapse { margin-left: 0; } .uk-grid-collapse > * { padding-left: 0; } /* Vertical */ .uk-grid-collapse + .uk-grid-collapse, .uk-grid-collapse > .uk-grid-margin, .uk-grid-collapse > * > .uk-panel + .uk-panel { margin-top: 0; } /* * Small gutter */ /* Horizontal */ .uk-grid-small { margin-left: -10px; } .uk-grid-small > * { padding-left: 10px; } /* Vertical */ .uk-grid-small + .uk-grid-small, .uk-grid-small > .uk-grid-margin, .uk-grid-small > * > .uk-panel + .uk-panel { margin-top: 10px; } /* * Medium gutter */ /* Horizontal */ .uk-grid-medium { margin-left: -25px; } .uk-grid-medium > * { padding-left: 25px; } /* Vertical */ .uk-grid-medium + .uk-grid-medium, .uk-grid-medium > .uk-grid-margin, .uk-grid-medium > * > .uk-panel + .uk-panel { margin-top: 25px; } /* * Large gutter */ /* Large screen and bigger */ @media (min-width: 960px) { /* Horizontal */ .uk-grid-large { margin-left: -35px; } .uk-grid-large > * { padding-left: 35px; } /* Vertical */ .uk-grid-large + .uk-grid-large, .uk-grid-large-margin, .uk-grid-large > * > .uk-panel + .uk-panel { margin-top: 35px; } } /* Extra Large screens */ @media (min-width: 1220px) { /* Horizontal */ .uk-grid-large { margin-left: -50px; } .uk-grid-large > * { padding-left: 50px; } /* Vertical */ .uk-grid-large + .uk-grid-large, .uk-grid-large-margin, .uk-grid-large > * > .uk-panel + .uk-panel { margin-top: 50px; } } /* Modifier: `uk-grid-divider` ========================================================================== */ /* * Horizontal divider * Only works with the default gutter. Does not work with gutter collapse, small or large. * Does not work with `uk-push-*`, `uk-pull-*` and not if the columns float into the next row. */ .uk-grid-divider:not(:empty) { margin-left: -25px; margin-right: -25px; } .uk-grid-divider > * { padding-left: 25px; padding-right: 25px; } .uk-grid-divider > [class*='uk-width-1-']:not(.uk-width-1-1):nth-child(n+2), .uk-grid-divider > [class*='uk-width-2-']:nth-child(n+2), .uk-grid-divider > [class*='uk-width-3-']:nth-child(n+2), .uk-grid-divider > [class*='uk-width-4-']:nth-child(n+2), .uk-grid-divider > [class*='uk-width-5-']:nth-child(n+2), .uk-grid-divider > [class*='uk-width-6-']:nth-child(n+2), .uk-grid-divider > [class*='uk-width-7-']:nth-child(n+2), .uk-grid-divider > [class*='uk-width-8-']:nth-child(n+2), .uk-grid-divider > [class*='uk-width-9-']:nth-child(n+2) { border-left: 1px solid #ddd; } /* Tablet and bigger */ @media (min-width: 768px) { .uk-grid-divider > [class*='uk-width-medium-']:not(.uk-width-medium-1-1):nth-child(n+2) { border-left: 1px solid #ddd; } } /* Desktop and bigger */ @media (min-width: 960px) { .uk-grid-divider > [class*='uk-width-large-']:not(.uk-width-large-1-1):nth-child(n+2) { border-left: 1px solid #ddd; } } /* Large screen and bigger */ @media (min-width: 1220px) { /* * Large gutter */ .uk-grid-divider:not(:empty) { margin-left: -35px; margin-right: -35px; } .uk-grid-divider > * { padding-left: 35px; padding-right: 35px; } .uk-grid-divider:empty { margin-top: 35px; margin-bottom: 35px; } } /* * Vertical divider */ .uk-grid-divider:empty { margin-top: 25px; margin-bottom: 25px; border-top: 1px solid #ddd; } /* Match panels in grids ========================================================================== */ /* * 1. Behave like a block element */ .uk-grid-match > * { display: -ms-flexbox; display: -webkit-flex; display: flex; /* 1 */ -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; } .uk-grid-match > * > * { /* 1 */ -ms-flex: none; -webkit-flex: none; flex: none; box-sizing: border-box; width: 100%; } /* Even grid cell widths ========================================================================== */ [class*='uk-grid-width'] > * { box-sizing: border-box; width: 100%; } .uk-grid-width-1-2 > * { width: 50%; } .uk-grid-width-1-3 > * { width: 33.333%; } .uk-grid-width-1-4 > * { width: 25%; } .uk-grid-width-1-5 > * { width: 20%; } .uk-grid-width-1-6 > * { width: 16.666%; } .uk-grid-width-1-10 > * { width: 10%; } .uk-grid-width-auto > * { width: auto; } /* Phone landscape and bigger */ @media (min-width: 480px) { .uk-grid-width-small-1-1 > * { width: 100%; } .uk-grid-width-small-1-2 > * { width: 50%; } .uk-grid-width-small-1-3 > * { width: 33.333%; } .uk-grid-width-small-1-4 > * { width: 25%; } .uk-grid-width-small-1-5 > * { width: 20%; } .uk-grid-width-small-1-6 > * { width: 16.666%; } .uk-grid-width-small-1-10 > * { width: 10%; } } /* Tablet and bigger */ @media (min-width: 768px) { .uk-grid-width-medium-1-1 > * { width: 100%; } .uk-grid-width-medium-1-2 > * { width: 50%; } .uk-grid-width-medium-1-3 > * { width: 33.333%; } .uk-grid-width-medium-1-4 > * { width: 25%; } .uk-grid-width-medium-1-5 > * { width: 20%; } .uk-grid-width-medium-1-6 > * { width: 16.666%; } .uk-grid-width-medium-1-10 > * { width: 10%; } } /* Desktop and bigger */ @media (min-width: 960px) { .uk-grid-width-large-1-1 > * { width: 100%; } .uk-grid-width-large-1-2 > * { width: 50%; } .uk-grid-width-large-1-3 > * { width: 33.333%; } .uk-grid-width-large-1-4 > * { width: 25%; } .uk-grid-width-large-1-5 > * { width: 20%; } .uk-grid-width-large-1-6 > * { width: 16.666%; } .uk-grid-width-large-1-10 > * { width: 10%; } } /* Large screen and bigger */ @media (min-width: 1220px) { .uk-grid-width-xlarge-1-1 > * { width: 100%; } .uk-grid-width-xlarge-1-2 > * { width: 50%; } .uk-grid-width-xlarge-1-3 > * { width: 33.333%; } .uk-grid-width-xlarge-1-4 > * { width: 25%; } .uk-grid-width-xlarge-1-5 > * { width: 20%; } .uk-grid-width-xlarge-1-6 > * { width: 16.666%; } .uk-grid-width-xlarge-1-10 > * { width: 10%; } } /* Sub-objects: `uk-width-*` ========================================================================== */ [class*='uk-width'] { box-sizing: border-box; width: 100%; } /* * Widths */ /* Whole */ .uk-width-1-1 { width: 100%; } /* Halves */ .uk-width-1-2, .uk-width-2-4, .uk-width-3-6, .uk-width-5-10 { width: 50%; } /* Thirds */ .uk-width-1-3, .uk-width-2-6 { width: 33.333%; } .uk-width-2-3, .uk-width-4-6 { width: 66.666%; } /* Quarters */ .uk-width-1-4 { width: 25%; } .uk-width-3-4 { width: 75%; } /* Fifths */ .uk-width-1-5, .uk-width-2-10 { width: 20%; } .uk-width-2-5, .uk-width-4-10 { width: 40%; } .uk-width-3-5, .uk-width-6-10 { width: 60%; } .uk-width-4-5, .uk-width-8-10 { width: 80%; } /* Sixths */ .uk-width-1-6 { width: 16.666%; } .uk-width-5-6 { width: 83.333%; } /* Tenths */ .uk-width-1-10 { width: 10%; } .uk-width-3-10 { width: 30%; } .uk-width-7-10 { width: 70%; } .uk-width-9-10 { width: 90%; } /* Phone landscape and bigger */ @media (min-width: 480px) { /* Whole */ .uk-width-small-1-1 { width: 100%; } /* Halves */ .uk-width-small-1-2, .uk-width-small-2-4, .uk-width-small-3-6, .uk-width-small-5-10 { width: 50%; } /* Thirds */ .uk-width-small-1-3, .uk-width-small-2-6 { width: 33.333%; } .uk-width-small-2-3, .uk-width-small-4-6 { width: 66.666%; } /* Quarters */ .uk-width-small-1-4 { width: 25%; } .uk-width-small-3-4 { width: 75%; } /* Fifths */ .uk-width-small-1-5, .uk-width-small-2-10 { width: 20%; } .uk-width-small-2-5, .uk-width-small-4-10 { width: 40%; } .uk-width-small-3-5, .uk-width-small-6-10 { width: 60%; } .uk-width-small-4-5, .uk-width-small-8-10 { width: 80%; } /* Sixths */ .uk-width-small-1-6 { width: 16.666%; } .uk-width-small-5-6 { width: 83.333%; } /* Tenths */ .uk-width-small-1-10 { width: 10%; } .uk-width-small-3-10 { width: 30%; } .uk-width-small-7-10 { width: 70%; } .uk-width-small-9-10 { width: 90%; } } /* Tablet and bigger */ @media (min-width: 768px) { /* Whole */ .uk-width-medium-1-1 { width: 100%; } /* Halves */ .uk-width-medium-1-2, .uk-width-medium-2-4, .uk-width-medium-3-6, .uk-width-medium-5-10 { width: 50%; } /* Thirds */ .uk-width-medium-1-3, .uk-width-medium-2-6 { width: 33.333%; } .uk-width-medium-2-3, .uk-width-medium-4-6 { width: 66.666%; } /* Quarters */ .uk-width-medium-1-4 { width: 25%; } .uk-width-medium-3-4 { width: 75%; } /* Fifths */ .uk-width-medium-1-5, .uk-width-medium-2-10 { width: 20%; } .uk-width-medium-2-5, .uk-width-medium-4-10 { width: 40%; } .uk-width-medium-3-5, .uk-width-medium-6-10 { width: 60%; } .uk-width-medium-4-5, .uk-width-medium-8-10 { width: 80%; } /* Sixths */ .uk-width-medium-1-6 { width: 16.666%; } .uk-width-medium-5-6 { width: 83.333%; } /* Tenths */ .uk-width-medium-1-10 { width: 10%; } .uk-width-medium-3-10 { width: 30%; } .uk-width-medium-7-10 { width: 70%; } .uk-width-medium-9-10 { width: 90%; } } /* Desktop and bigger */ @media (min-width: 960px) { /* Whole */ .uk-width-large-1-1 { width: 100%; } /* Halves */ .uk-width-large-1-2, .uk-width-large-2-4, .uk-width-large-3-6, .uk-width-large-5-10 { width: 50%; } /* Thirds */ .uk-width-large-1-3, .uk-width-large-2-6 { width: 33.333%; } .uk-width-large-2-3, .uk-width-large-4-6 { width: 66.666%; } /* Quarters */ .uk-width-large-1-4 { width: 25%; } .uk-width-large-3-4 { width: 75%; } /* Fifths */ .uk-width-large-1-5, .uk-width-large-2-10 { width: 20%; } .uk-width-large-2-5, .uk-width-large-4-10 { width: 40%; } .uk-width-large-3-5, .uk-width-large-6-10 { width: 60%; } .uk-width-large-4-5, .uk-width-large-8-10 { width: 80%; } /* Sixths */ .uk-width-large-1-6 { width: 16.666%; } .uk-width-large-5-6 { width: 83.333%; } /* Tenths */ .uk-width-large-1-10 { width: 10%; } .uk-width-large-3-10 { width: 30%; } .uk-width-large-7-10 { width: 70%; } .uk-width-large-9-10 { width: 90%; } } /* Large screen and bigger */ @media (min-width: 1220px) { /* Whole */ .uk-width-xlarge-1-1 { width: 100%; } /* Halves */ .uk-width-xlarge-1-2, .uk-width-xlarge-2-4, .uk-width-xlarge-3-6, .uk-width-xlarge-5-10 { width: 50%; } /* Thirds */ .uk-width-xlarge-1-3, .uk-width-xlarge-2-6 { width: 33.333%; } .uk-width-xlarge-2-3, .uk-width-xlarge-4-6 { width: 66.666%; } /* Quarters */ .uk-width-xlarge-1-4 { width: 25%; } .uk-width-xlarge-3-4 { width: 75%; } /* Fifths */ .uk-width-xlarge-1-5, .uk-width-xlarge-2-10 { width: 20%; } .uk-width-xlarge-2-5, .uk-width-xlarge-4-10 { width: 40%; } .uk-width-xlarge-3-5, .uk-width-xlarge-6-10 { width: 60%; } .uk-width-xlarge-4-5, .uk-width-xlarge-8-10 { width: 80%; } /* Sixths */ .uk-width-xlarge-1-6 { width: 16.666%; } .uk-width-xlarge-5-6 { width: 83.333%; } /* Tenths */ .uk-width-xlarge-1-10 { width: 10%; } .uk-width-xlarge-3-10 { width: 30%; } .uk-width-xlarge-7-10 { width: 70%; } .uk-width-xlarge-9-10 { width: 90%; } } /* Sub-object: `uk-push-*` and `uk-pull-*` ========================================================================== */ /* * Source ordering * Works only with `uk-width-medium-*` */ /* Tablet and bigger */ @media (min-width: 768px) { [class*='uk-push-'], [class*='uk-pull-'] { position: relative; } /* * Push */ /* Halves */ .uk-push-1-2, .uk-push-2-4, .uk-push-3-6, .uk-push-5-10 { left: 50%; } /* Thirds */ .uk-push-1-3, .uk-push-2-6 { left: 33.333%; } .uk-push-2-3, .uk-push-4-6 { left: 66.666%; } /* Quarters */ .uk-push-1-4 { left: 25%; } .uk-push-3-4 { left: 75%; } /* Fifths */ .uk-push-1-5, .uk-push-2-10 { left: 20%; } .uk-push-2-5, .uk-push-4-10 { left: 40%; } .uk-push-3-5, .uk-push-6-10 { left: 60%; } .uk-push-4-5, .uk-push-8-10 { left: 80%; } /* Sixths */ .uk-push-1-6 { left: 16.666%; } .uk-push-5-6 { left: 83.333%; } /* Tenths */ .uk-push-1-10 { left: 10%; } .uk-push-3-10 { left: 30%; } .uk-push-7-10 { left: 70%; } .uk-push-9-10 { left: 90%; } /* * Pull */ /* Halves */ .uk-pull-1-2, .uk-pull-2-4, .uk-pull-3-6, .uk-pull-5-10 { left: -50%; } /* Thirds */ .uk-pull-1-3, .uk-pull-2-6 { left: -33.333%; } .uk-pull-2-3, .uk-pull-4-6 { left: -66.666%; } /* Quarters */ .uk-pull-1-4 { left: -25%; } .uk-pull-3-4 { left: -75%; } /* Fifths */ .uk-pull-1-5, .uk-pull-2-10 { left: -20%; } .uk-pull-2-5, .uk-pull-4-10 { left: -40%; } .uk-pull-3-5, .uk-pull-6-10 { left: -60%; } .uk-pull-4-5, .uk-pull-8-10 { left: -80%; } /* Sixths */ .uk-pull-1-6 { left: -16.666%; } .uk-pull-5-6 { left: -83.333%; } /* Tenths */ .uk-pull-1-10 { left: -10%; } .uk-pull-3-10 { left: -30%; } .uk-pull-7-10 { left: -70%; } .uk-pull-9-10 { left: -90%; } } /* ======================================================================== Component: Panel ========================================================================== */ /* * 1. Needed for `a` elements * 2. Create position context for badges */ .uk-panel { /* 1 */ display: block; /* 2 */ position: relative; } /* * Allow panels to be anchors */ .uk-panel, .uk-panel:hover { text-decoration: none; } /* * Micro clearfix to make panels more robust */ .uk-panel:before, .uk-panel:after { content: ""; display: table; } .uk-panel:after { clear: both; } /* * Remove margin from the last-child if not `uk-widget-title` */ .uk-panel > :not(.uk-panel-title):last-child { margin-bottom: 0; } /* Sub-object: `uk-panel-title` ========================================================================== */ .uk-panel-title { margin-top: 0; margin-bottom: 15px; font-size: 18px; line-height: 24px; font-weight: normal; text-transform: none; color: #444; } /* Sub-object: `uk-panel-badge` ========================================================================== */ .uk-panel-badge { position: absolute; top: 0; right: 0; z-index: 1; } /* Sub-object: `uk-panel-teaser` ========================================================================== */ .uk-panel-teaser { margin-bottom: 15px; } /* Sub-object: `uk-panel-body` ========================================================================== */ .uk-panel-body { padding: 15px; } /* Modifier: `uk-panel-box` ========================================================================== */ .uk-panel-box { padding: 15px; background: #f5f5f5; color: #444; } .uk-panel-box-hover:hover { color: #444; } .uk-panel-box .uk-panel-title { color: #444; } .uk-panel-box .uk-panel-badge { top: 10px; right: 10px; } .uk-panel-box > .uk-panel-teaser { margin-top: -15px; margin-left: -15px; margin-right: -15px; } /* * Nav in panel */ .uk-panel-box > .uk-nav-side { margin: 0 -15px; } /* * Sub-modifier: `uk-panel-box-primary` */ .uk-panel-box-primary { background-color: #ebf7fd; color: #2d7091; } .uk-panel-box-primary-hover:hover { color: #2d7091; } .uk-panel-box-primary .uk-panel-title { color: #2d7091; } /* * Sub-modifier: `uk-panel-box-secondary` */ .uk-panel-box-secondary { background-color: #eee; color: #444; } .uk-panel-box-secondary-hover:hover { color: #444; } .uk-panel-box-secondary .uk-panel-title { color: #444; } /* Modifier: `uk-panel-hover` ========================================================================== */ .uk-panel-hover { padding: 15px; color: #444; } .uk-panel-hover:hover { background: #f5f5f5; color: #444; } .uk-panel-hover .uk-panel-badge { top: 10px; right: 10px; } .uk-panel-hover > .uk-panel-teaser { margin-top: -15px; margin-left: -15px; margin-right: -15px; } /* Modifier: `uk-panel-header` ========================================================================== */ .uk-panel-header .uk-panel-title { padding-bottom: 10px; border-bottom: 1px solid #ddd; color: #444; } /* Modifier: `uk-panel-space` ========================================================================== */ .uk-panel-space { padding: 30px; } .uk-panel-space .uk-panel-badge { top: 30px; right: 30px; } /* Modifier: `uk-panel-divider` ========================================================================== */ .uk-panel + .uk-panel-divider { margin-top: 50px !important; } .uk-panel + .uk-panel-divider:before { content: ""; display: block; position: absolute; top: -25px; left: 0; right: 0; border-top: 1px solid #ddd; } /* Large screen and bigger */ @media (min-width: 1220px) { .uk-panel + .uk-panel-divider { margin-top: 70px !important; } .uk-panel + .uk-panel-divider:before { top: -35px; } } /* ======================================================================== Component: Block ========================================================================== */ .uk-block { position: relative; box-sizing: border-box; padding-top: 20px; padding-bottom: 20px; } /* Phone landscape and bigger */ @media (min-width: 768px) { .uk-block { padding-top: 50px; padding-bottom: 50px; } } /* * Micro clearfix to make blocks more robust */ .uk-block:before, .uk-block:after { content: ""; display: table; } .uk-block:after { clear: both; } /* * Remove margin from the last-child */ .uk-block > :last-child { margin-bottom: 0; } /* Padding Modifier ========================================================================== */ /* * Large padding */ .uk-block-large { padding-top: 20px; padding-bottom: 20px; } /* Tablets and bigger */ @media (min-width: 768px) { .uk-block-large { padding-top: 50px; padding-bottom: 50px; } } /* Desktop and bigger */ @media (min-width: 960px) { .uk-block-large { padding-top: 100px; padding-bottom: 100px; } } /* Color Modifier ========================================================================== */ /* * Default */ .uk-block-default { background: #fff; } /* * Muted */ .uk-block-muted { background: #f9f9f9; } /* * Primary */ .uk-block-primary { background: #00a8e6; } /* * Secondary */ .uk-block-secondary { background: #222; } /* ======================================================================== Component: Article ========================================================================== */ /* * Micro clearfix to make articles more robust */ .uk-article:before, .uk-article:after { content: ""; display: table; } .uk-article:after { clear: both; } /* * Remove margin from the last-child */ .uk-article > :last-child { margin-bottom: 0; } /* * Vertical gutter for articles */ .uk-article + .uk-article { margin-top: 25px; } /* Sub-object `uk-article-title` ========================================================================== */ .uk-article-title { font-size: 36px; line-height: 42px; font-weight: normal; text-transform: none; } .uk-article-title a { color: inherit; text-decoration: none; } /* Sub-object `uk-article-meta` ========================================================================== */ .uk-article-meta { font-size: 12px; line-height: 18px; color: #999; } /* Sub-object `uk-article-lead` ========================================================================== */ .uk-article-lead { color: #444; font-size: 18px; line-height: 24px; font-weight: normal; } /* Sub-object `uk-article-divider` ========================================================================== */ .uk-article-divider { margin-bottom: 25px; border-color: #ddd; } * + .uk-article-divider { margin-top: 25px; } /* ======================================================================== Component: Comment ========================================================================== */ /* Sub-object `uk-comment-header` ========================================================================== */ .uk-comment-header { margin-bottom: 15px; } /* * Micro clearfix */ .uk-comment-header:before, .uk-comment-header:after { content: ""; display: table; } .uk-comment-header:after { clear: both; } /* Sub-object `uk-comment-avatar` ========================================================================== */ .uk-comment-avatar { margin-right: 15px; float: left; } /* Sub-object `uk-comment-title` ========================================================================== */ .uk-comment-title { margin: 5px 0 0 0; font-size: 16px; line-height: 22px; } /* Sub-object `uk-comment-meta` ========================================================================== */ .uk-comment-meta { margin: 2px 0 0 0; font-size: 11px; line-height: 16px; color: #999; } /* Sub-object `uk-comment-body` ========================================================================== */ /* * Remove margin from the last-child */ .uk-comment-body > :last-child { margin-bottom: 0; } /* Sub-object `uk-comment-list` ========================================================================== */ .uk-comment-list { padding: 0; list-style: none; } .uk-comment-list .uk-comment + ul { margin: 15px 0 0 0; list-style: none; } .uk-comment-list > li:nth-child(n+2), .uk-comment-list .uk-comment + ul > li:nth-child(n+2) { margin-top: 15px; } /* Tablet and bigger */ @media (min-width: 768px) { .uk-comment-list .uk-comment + ul { padding-left: 100px; } } /* Modifier `uk-comment-primary` ========================================================================== */ /* ======================================================================== Component: Cover ========================================================================== */ /* * Background image always covers and centers its element */ .uk-cover-background { background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; } /* * Emulates image cover, works with video and image elements * 1. Parent container which clips resized object * 2. Resizes the object to always covers its container * 3. Reset the responsive image CSS * 4. Center object */ /* 1 */ .uk-cover { overflow: hidden; } .uk-cover-object { /* 2 */ width: auto; height: auto; min-width: 100%; min-height: 100%; /* 3 */ max-width: none; /* 4 */ position: relative; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } /* * To center iframes use `data-uk-cover` JavaScript */ [data-uk-cover] { position: relative; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } /* ======================================================================== Component: Nav ========================================================================== */ .uk-nav, .uk-nav ul { margin: 0; padding: 0; list-style: none; } /* * Items */ .uk-nav li > a { display: block; text-decoration: none; } .uk-nav > li > a { padding: 5px 15px; } /* * Nested items */ .uk-nav ul { padding-left: 15px; } .uk-nav ul a { padding: 2px 0; } /* * Item subtitle */ .uk-nav li > a > div { font-size: 12px; line-height: 18px; } /* Sub-object: `uk-nav-header` ========================================================================== */ .uk-nav-header { padding: 5px 15px; text-transform: uppercase; font-weight: bold; font-size: 12px; } .uk-nav-header:not(:first-child) { margin-top: 15px; } /* Sub-object: `uk-nav-divider` ========================================================================== */ .uk-nav-divider { margin: 9px 15px; } /* Sub-object: `uk-nav-sub` ========================================================================== */ /* * `ul` needed for higher specificity to override padding */ ul.uk-nav-sub { padding: 5px 0 5px 15px; } /* Modifier: `uk-nav-parent-icon` ========================================================================== */ .uk-nav-parent-icon > .uk-parent > a:after { content: "\f104"; width: 20px; margin-right: -10px; float: right; font-family: FontAwesome; text-align: center; } .uk-nav-parent-icon > .uk-parent.uk-open > a:after { content: "\f107"; } /* Modifier `uk-nav-side` ========================================================================== */ /* * Items */ .uk-nav-side > li > a { color: #444; } /* * Hover * 1. Apply hover style also to focus state * 2. Remove default focus style */ .uk-nav-side > li > a:hover, .uk-nav-side > li > a:focus { background: rgba(0, 0, 0, 0.05); color: #444; /* 2 */ outline: none; } /* Active */ .uk-nav-side > li.uk-active > a { background: #00a8e6; color: #fff; } /* * Sub-object: `uk-nav-header` */ .uk-nav-side .uk-nav-header { color: #444; } /* * Sub-object: `uk-nav-divider` */ .uk-nav-side .uk-nav-divider { border-top: 1px solid #ddd; } /* * Nested items */ .uk-nav-side ul a { color: #07D; } .uk-nav-side ul a:hover { color: #059; } /* Modifier `uk-nav-dropdown` ========================================================================== */ /* * Items */ .uk-nav-dropdown > li > a { color: #444; } /* * Hover * 1. Apply hover style also to focus state * 2. Remove default focus style */ .uk-nav-dropdown > li > a:hover, .uk-nav-dropdown > li > a:focus { background: #00a8e6; color: #fff; /* 2 */ outline: none; } /* * Sub-object: `uk-nav-header` */ .uk-nav-dropdown .uk-nav-header { color: #999; } /* * Sub-object: `uk-nav-divider` */ .uk-nav-dropdown .uk-nav-divider { border-top: 1px solid #ddd; } /* * Nested items */ .uk-nav-dropdown ul a { color: #07D; } .uk-nav-dropdown ul a:hover { color: #059; } /* Modifier `uk-nav-navbar` ========================================================================== */ /* * Items */ .uk-nav-navbar > li > a { color: #444; } /* * Hover * 1. Apply hover style also to focus state * 2. Remove default focus style */ .uk-nav-navbar > li > a:hover, .uk-nav-navbar > li > a:focus { background: #00a8e6; color: #fff; /* 2 */ outline: none; } /* * Sub-object: `uk-nav-header` */ .uk-nav-navbar .uk-nav-header { color: #999; } /* * Sub-object: `uk-nav-divider` */ .uk-nav-navbar .uk-nav-divider { border-top: 1px solid #ddd; } /* * Nested items */ .uk-nav-navbar ul a { color: #07D; } .uk-nav-navbar ul a:hover { color: #059; } /* Modifier `uk-nav-offcanvas` ========================================================================== */ /* * Items */ .uk-nav-offcanvas > li > a { color: #ccc; padding: 10px 15px; } /* * Hover * No hover on touch devices because it behaves buggy in fixed offcanvas * 1. Apply hover style also to focus state * 2. Remove default focus style */ .uk-nav-offcanvas > .uk-open > a, html:not(.uk-touch) .uk-nav-offcanvas > li > a:hover, html:not(.uk-touch) .uk-nav-offcanvas > li > a:focus { background: #404040; color: #fff; /* 2 */ outline: none; } /* * Active * `html .uk-nav` needed for higher specificity to override hover */ html .uk-nav.uk-nav-offcanvas > li.uk-active > a { background: #1a1a1a; color: #fff; } /* * Sub-object: `uk-nav-header` */ .uk-nav-offcanvas .uk-nav-header { color: #777; } /* * Sub-object: `uk-nav-divider` */ .uk-nav-offcanvas .uk-nav-divider { border-top: 1px solid #1a1a1a; } /* * Nested items * No hover on touch devices because it behaves buggy in fixed offcanvas */ .uk-nav-offcanvas ul a { color: #ccc; } html:not(.uk-touch) .uk-nav-offcanvas ul a:hover { color: #fff; } /* ======================================================================== Component: Navbar ========================================================================== */ .uk-navbar { background: #eee; color: #444; } /* * Micro clearfix */ .uk-navbar:before, .uk-navbar:after { content: ""; display: table; } .uk-navbar:after { clear: both; } /* Sub-object: `uk-navbar-nav` ========================================================================== */ .uk-navbar-nav { margin: 0; padding: 0; list-style: none; float: left; } /* * 1. Create position context for dropdowns */ .uk-navbar-nav > li { float: left; /* 1 */ position: relative; } /* * 1. Dimensions * 2. Style */ .uk-navbar-nav > li > a { display: block; box-sizing: border-box; text-decoration: none; /* 1 */ height: 40px; padding: 0 15px; line-height: 40px; /* 2 */ color: #444; font-size: 14px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; } /* Appear not as link */ .uk-navbar-nav > li > a[href='#'] { cursor: text; } /* * Hover * 1. Apply hover style also to focus state * 2. Also apply if dropdown is opened * 3. Remove default focus style */ .uk-navbar-nav > li:hover > a, .uk-navbar-nav > li > a:focus, .uk-navbar-nav > li.uk-open > a { background-color: #f5f5f5; color: #444; /* 3 */ outline: none; } /* OnClick */ .uk-navbar-nav > li > a:active { background-color: #ddd; color: #444; } /* Active */ .uk-navbar-nav > li.uk-active > a { background-color: #f5f5f5; color: #444; } /* Sub-objects: `uk-navbar-nav-subtitle` ========================================================================== */ .uk-navbar-nav .uk-navbar-nav-subtitle { line-height: 28px; } .uk-navbar-nav-subtitle > div { margin-top: -6px; font-size: 10px; line-height: 12px; } /* Sub-objects: `uk-navbar-content`, `uk-navbar-brand`, `uk-navbar-toggle` ========================================================================== */ /* * Imitate navbar items */ .uk-navbar-content, .uk-navbar-brand, .uk-navbar-toggle { box-sizing: border-box; display: block; height: 40px; padding: 0 15px; float: left; } /* * Helper to center all child elements vertically */ .uk-navbar-content:before, .uk-navbar-brand:before, .uk-navbar-toggle:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } /* Sub-objects: `uk-navbar-content` ========================================================================== */ /* * Better sibling spacing */ .uk-navbar-content + .uk-navbar-content:not(.uk-navbar-center) { padding-left: 0; } /* * Link colors */ .uk-navbar-content > a:not([class]) { color: #07D; } .uk-navbar-content > a:not([class]):hover { color: #059; } /* Sub-objects: `uk-navbar-brand` ========================================================================== */ .uk-navbar-brand { font-size: 18px; color: #444; text-decoration: none; } /* * 1. Apply hover style also to focus state * 2. Remove default focus style */ .uk-navbar-brand:hover, .uk-navbar-brand:focus { color: #444; text-decoration: none; /* 2 */ outline: none; } /* Sub-object: `uk-navbar-toggle` ========================================================================== */ .uk-navbar-toggle { font-size: 18px; color: #444; text-decoration: none; } /* * 1. Apply hover style also to focus state * 2. Remove default focus style */ .uk-navbar-toggle:hover, .uk-navbar-toggle:focus { color: #444; text-decoration: none; /* 2 */ outline: none; } /* * 1. Center icon vertically */ .uk-navbar-toggle:after { content: "\f0c9"; font-family: FontAwesome; /* 1 */ vertical-align: middle; } .uk-navbar-toggle-alt:after { content: "\f002"; } /* Sub-object: `uk-navbar-center` ========================================================================== */ /* * The element with this class needs to be last child in the navbar * 1. This hack is needed because other float elements shift centered text */ .uk-navbar-center { float: none; text-align: center; /* 1 */ max-width: 50%; margin-left: auto; margin-right: auto; } /* Sub-object: `uk-navbar-flip` ========================================================================== */ .uk-navbar-flip { float: right; } /* ======================================================================== Component: Subnav ========================================================================== */ /* * 1. Gutter * 2. Remove default list style */ .uk-subnav { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; /* 1 */ margin-left: -10px; margin-top: -10px; /* 2 */ padding: 0; list-style: none; } /* * 1. Space is allocated solely based on content dimensions * 2. Horizontal gutter is using `padding` so `uk-width-*` classes can be applied * 3. Create position context for dropdowns */ .uk-subnav > * { /* 1 */ -ms-flex: none; -webkit-flex: none; flex: none; /* 2 */ padding-left: 10px; margin-top: 10px; /* 3 */ position: relative; } /* * DEPRECATED IE9 Support */ .uk-subnav:before, .uk-subnav:after { content: ""; display: block; overflow: hidden; } .uk-subnav:after { clear: both; } .uk-subnav > * { float: left; } /* Items ========================================================================== */ .uk-subnav > * > * { display: inline-block; color: #444; } /* * Hover * 1. Apply hover style also to focus state */ .uk-subnav > * > :hover, .uk-subnav > * > :focus { color: #07D; text-decoration: none; } /* * Active */ .uk-subnav > .uk-active > * { color: #07D; } /* Modifier: 'subnav-line' ========================================================================== */ .uk-subnav-line > :before { content: ""; display: inline-block; height: 10px; vertical-align: middle; } .uk-subnav-line > :nth-child(n+2):before { margin-right: 10px; border-left: 1px solid #ddd; } /* Modifier: 'subnav-pill' ========================================================================== */ .uk-subnav-pill > * > * { padding: 3px 9px; } /* * Hover * 1. Apply hover style also to focus state * 2. Remove default focus style */ .uk-subnav-pill > * > :hover, .uk-subnav-pill > * > :focus { background: #eee; color: #444; text-decoration: none; /* 2 */ outline: none; } /* * Active * `li` needed for higher specificity to override hover */ .uk-subnav-pill > .uk-active > * { background: #00a8e6; color: #fff; } /* Disabled state ========================================================================== */ .uk-subnav > .uk-disabled > * { background: none; color: #999; text-decoration: none; cursor: text; } /* ======================================================================== Component: Breadcrumb ========================================================================== */ /* * 1. Remove default list style * 2. Remove whitespace between child elements when using `inline-block` */ .uk-breadcrumb { /* 1 */ padding: 0; list-style: none; /* 2 */ font-size: 0.001px; } /* Items ========================================================================== */ /* * Reset whitespace hack */ .uk-breadcrumb > li { font-size: 1rem; vertical-align: top; } .uk-breadcrumb > li, .uk-breadcrumb > li > a, .uk-breadcrumb > li > span { display: inline-block; } .uk-breadcrumb > li:nth-child(n+2):before { content: "/"; display: inline-block; margin: 0 8px; } /* * Disabled */ .uk-breadcrumb > li:not(.uk-active) > span { color: #999; } /* ======================================================================== Component: Pagination ========================================================================== */ /* * 1. Remove default list style * 2. Center pagination by default * 3. Remove whitespace between child elements when using `inline-block` */ .uk-pagination { /* 1 */ padding: 0; list-style: none; /* 2 */ text-align: center; /* 3 */ font-size: 0.001px; } /* * Micro clearfix * Needed if `uk-pagination-previous` or `uk-pagination-next` sub-objects are used */ .uk-pagination:before, .uk-pagination:after { content: ""; display: table; } .uk-pagination:after { clear: both; } /* Items ========================================================================== */ /* * 1. Reset whitespace hack * 2. Remove the gap at the bottom of it container */ .uk-pagination > li { display: inline-block; /* 1 */ font-size: 1rem; /* 2 */ vertical-align: top; } .uk-pagination > li:nth-child(n+2) { margin-left: 5px; } /* * 1. Makes pagination more robust against different box-sizing use * 2. Reset text-align to center if alignment modifier is used */ .uk-pagination > li > a, .uk-pagination > li > span { display: inline-block; min-width: 16px; padding: 3px 5px; line-height: 20px; text-decoration: none; /* 1 */ box-sizing: content-box; /* 2 */ text-align: center; } /* * Links */ .uk-pagination > li > a { background: #eee; color: #444; } /* * Hover * 1. Apply hover style also to focus state * 2. Remove default focus style */ .uk-pagination > li > a:hover, .uk-pagination > li > a:focus { background-color: #f5f5f5; color: #444; /* 2 */ outline: none; } /* OnClick */ .uk-pagination > li > a:active { background-color: #ddd; color: #444; } /* * Active */ .uk-pagination > .uk-active > span { background: #00a8e6; color: #fff; } /* * Disabled */ .uk-pagination > .uk-disabled > span { background-color: #f5f5f5; color: #999; } /* Previous and next navigation ========================================================================== */ .uk-pagination-previous { float: left; } .uk-pagination-next { float: right; } /* Alignment modifiers ========================================================================== */ .uk-pagination-left { text-align: left; } .uk-pagination-right { text-align: right; } /* ======================================================================== Component: Tab ========================================================================== */ .uk-tab { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid #ddd; } /* * Micro clearfix on the deepest container */ .uk-tab:before, .uk-tab:after { content: ""; display: table; } .uk-tab:after { clear: both; } /* * Items * 1. Create position context for dropdowns */ .uk-tab > li { margin-bottom: -1px; float: left; /* 1 */ position: relative; } .uk-tab > li > a { display: block; padding: 8px 12px 8px 12px; border: 1px solid transparent; border-bottom-width: 0; color: #07D; text-decoration: none; } .uk-tab > li:nth-child(n+2) > a { margin-left: 5px; } /* * Hover * 1. Apply hover style also to focus state * 2. Also apply if dropdown is opened * 3. Remove default focus style */ .uk-tab > li > a:hover, .uk-tab > li > a:focus, .uk-tab > li.uk-open > a { border-color: #f5f5f5; background: #f5f5f5; color: #059; /* 2 */ outline: none; } .uk-tab > li:not(.uk-active) > a:hover, .uk-tab > li:not(.uk-active) > a:focus, .uk-tab > li.uk-open:not(.uk-active) > a { margin-bottom: 1px; padding-bottom: 7px; } /* Active */ .uk-tab > li.uk-active > a { border-color: #ddd; border-bottom-color: transparent; background: #fff; color: #444; } /* Disabled */ .uk-tab > li.uk-disabled > a { color: #999; cursor: text; } .uk-tab > li.uk-disabled > a:hover, .uk-tab > li.uk-disabled > a:focus, .uk-tab > li.uk-disabled.uk-active > a { background: none; border-color: transparent; } /* Modifier: 'tab-flip' ========================================================================== */ .uk-tab-flip > li { float: right; } .uk-tab-flip > li:nth-child(n+2) > a { margin-left: 0; margin-right: 5px; } /* Modifier: 'tab-responsive' ========================================================================== */ .uk-tab > li.uk-tab-responsive > a { margin-left: 0; margin-right: 0; } /* * Icon */ .uk-tab-responsive > a:before { content: "\f0c9\00a0"; font-family: FontAwesome; } /* Modifier: 'tab-center' ========================================================================== */ .uk-tab-center { border-bottom: 1px solid #ddd; } .uk-tab-center-bottom { border-bottom: none; border-top: 1px solid #ddd; } .uk-tab-center:before, .uk-tab-center:after { content: ""; display: table; } .uk-tab-center:after { clear: both; } /* * 1. Using `right` to prevent vertical scrollbar caused by centering if to many tabs */ .uk-tab-center .uk-tab { position: relative; right: 50%; border: none; float: right; } .uk-tab-center .uk-tab > li { position: relative; right: -50%; } .uk-tab-center .uk-tab > li > a { text-align: center; } /* Modifier: 'tab-bottom' ========================================================================== */ .uk-tab-bottom { border-top: 1px solid #ddd; border-bottom: none; } .uk-tab-botto