/* ======================================================================== Component: Grid ========================================================================== */ /* * Micro clearfix */ .uk-grid:before, .uk-grid:after { content: " "; display: table; } .uk-grid:after { clear: both; } /* * 1. Needed for the gutter * 2. Makes grid more robust so that it can be used with other block elements like lists */ .uk-grid { /* 1 */ margin: 0 0 0 -25px; /* 2 */ padding: 0; list-style: none; } /* * Grid cell * 1. Makes grid more robust so that it can be used with other block elements * 2. Create horizontal gutter * 3. `float` is set by default so columns always behave the same and create a new block format context */ .uk-grid > * { /* 1 */ margin: 0; /* 2 */ padding-left: 25px; /* 3 */ float: left; } /* * Remove margin from the last-child */ .uk-grid > * > :last-child { margin-bottom: 0; } /* Grid gutter ========================================================================== */ /* * Vertical gutter */ .uk-grid + .uk-grid { margin-top: 25px; } /* * This class is set by JavaScript and applies a vertical gutter if the columns stack or float into the next row * Higher specificity to override margin */ .uk-grid > .uk-grid-margin { margin-top: 25px; } /* * Vertical gutter for panels */ .uk-grid > * > .uk-panel + .uk-panel { margin-top: 25px; } /* * Larger gutter for large screens */ /* Large screen and bigger */ @media (min-width: 1220px) { /* Horizontal gutter */ .uk-grid:not(.uk-grid-preserve) { margin-left: -35px; } .uk-grid:not(.uk-grid-preserve) > * { padding-left: 35px; } /* Vertical gutter */ .uk-grid:not(.uk-grid-preserve) + .uk-grid { margin-top: 35px; } .uk-grid:not(.uk-grid-preserve) > .uk-grid-margin { margin-top: 35px; } /* Vertical gutter for panels */ .uk-grid:not(.uk-grid-preserve) > * > .uk-panel + .uk-panel { margin-top: 35px; } } /* * Small gutter * Higher specificity to override large gutter */ .uk-grid.uk-grid-small { margin-left: -10px; } .uk-grid.uk-grid-small > * { padding-left: 10px; } .uk-grid.uk-grid-small + .uk-grid-small { margin-top: 10px; } .uk-grid.uk-grid-small > .uk-grid-margin { margin-top: 10px; } .uk-grid.uk-grid-small > * > .uk-panel + .uk-panel { margin-top: 10px; } /* Modifier: `uk-grid-divider` ========================================================================== */ /* * Horizontal divider * 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 #dddddd; } /* 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 #dddddd; } } /* 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 #dddddd; } } /* Large screen and bigger */ @media (min-width: 1220px) { /* * Large gutter */ .uk-grid-divider:not(.uk-grid-preserve):not(:empty) { margin-left: -35px; margin-right: -35px; } .uk-grid-divider:not(.uk-grid-preserve) > * { padding-left: 35px; padding-right: 35px; } .uk-grid-divider:not(.uk-grid-preserve):empty { margin-top: 35px; margin-bottom: 35px; } } /* * Vertical divider */ .uk-grid-divider:empty { margin-top: 25px; margin-bottom: 25px; border-top: 1px solid #dddddd; } /* Even grid cell widths ========================================================================== */ [class*='uk-grid-width'] > * { -moz-box-sizing: border-box; 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%; } /* Phone landscape and bigger */ @media (min-width: 480px) { .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-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-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-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'] { -moz-box-sizing: border-box; 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%; } } /* 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; } /* * 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: #444444; } /* Sub-object: `uk-panel-badge` ========================================================================== */ .uk-panel-badge { position: absolute; top: 0; right: 0; z-index: 1; } /* Modifier: `uk-panel-box` ========================================================================== */ .uk-panel-box { padding: 15px; background: #f5f5f5; color: #444444; } .uk-panel-box .uk-panel-title { color: #444444; } .uk-panel-box .uk-panel-badge { top: 10px; right: 10px; } .uk-panel-box .uk-panel-teaser { margin: -15px -15px 15px -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 .uk-panel-title { color: #2d7091; } /* * Sub-modifier: `uk-panel-box-secondary` */ .uk-panel-box-secondary { background-color: #eeeeee; color: #444444; } .uk-panel-box-secondary .uk-panel-title { color: #444444; } /* Modifier: `uk-panel-header` ========================================================================== */ .uk-panel-header .uk-panel-title { padding-bottom: 10px; border-bottom: 1px solid #dddddd; color: #444444; } /* 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 #dddddd; } /* 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: 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: #999999; } /* Sub-object `uk-article-lead` ========================================================================== */ .uk-article-lead { color: #444444; font-size: 18px; line-height: 24px; font-weight: normal; } /* Sub-object `uk-article-divider` ========================================================================== */ .uk-article-divider { margin-bottom: 25px; border-color: #dddddd; } * + .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: #999999; } /* 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` ========================================================================== */ /*@import "nav.less"; @import "navbar.less"; @import "subnav.less"; @import "breadcrumb.less"; @import "pagination.less"; @import "tab.less"; */ /* ======================================================================== Component: List ========================================================================== */ .uk-list { padding: 0; list-style: none; } /* * Micro clearfix to make list more robust */ .uk-list > li:before, .uk-list > li:after { content: " "; display: table; } .uk-list > li:after { clear: both; } /* * Remove margin from the last-child */ .uk-list > li > :last-child { margin-bottom: 0; } /* * Nested lists */ .uk-list ul { margin: 0; padding-left: 20px; list-style: none; } /* Modifier: `uk-list-line` ========================================================================== */ .uk-list-line > li:nth-child(n+2) { margin-top: 5px; padding-top: 5px; border-top: 1px solid #dddddd; } /* Modifier: `uk-list-striped` ========================================================================== */ .uk-list-striped > li { padding: 5px 5px; } .uk-list-striped > li:nth-of-type(odd) { background: #f5f5f5; } /* Modifier: `uk-list-space` ========================================================================== */ .uk-list-space > li:nth-child(n+2) { margin-top: 10px; } /* ======================================================================== Component: Description list ========================================================================== */ /* Modifier: `uk-description-list-horizontal` ========================================================================== */ /* Tablet and bigger */ @media (min-width: 768px) { .uk-description-list-horizontal { overflow: hidden; } .uk-description-list-horizontal > dt { width: 160px; float: left; clear: both; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .uk-description-list-horizontal > dd { margin-left: 180px; } } /* Modifier: `uk-description-list-line` ========================================================================== */ .uk-description-list-line > dt { font-weight: normal; } .uk-description-list-line > dt:nth-child(n+2) { margin-top: 5px; padding-top: 5px; border-top: 1px solid #dddddd; } .uk-description-list-line > dd { color: #999999; } /* ======================================================================== Component: Table ========================================================================== */ /* * 1. Remove most spacing between table cells. * 2. Block element behavior * 3. Style */ .uk-table { /* 1 */ border-collapse: collapse; border-spacing: 0; /* 2 */ width: 100%; /* 3 */ margin-bottom: 15px; } /* * Add margin if adjacent element */ * + .uk-table { margin-top: 15px; } .uk-table th, .uk-table td { padding: 8px 8px; } /* * Set alignment */ .uk-table th { text-align: left; } .uk-table td { vertical-align: top; } .uk-table thead th { vertical-align: bottom; } /* * Caption and footer */ .uk-table caption, .uk-table tfoot { font-size: 12px; font-style: italic; } .uk-table caption { text-align: left; color: #999999; } /* Sub-modifier: `uk-table-middle` ========================================================================== */ .uk-table-middle, .uk-table-middle td { vertical-align: middle !important; } /* Modifier: `uk-table-striped` ========================================================================== */ .uk-table-striped tbody tr:nth-of-type(odd) { background: #f5f5f5; } /* Modifier: `uk-table-condensed` ========================================================================== */ .uk-table-condensed td { padding: 4px 8px; } /* Modifier: `uk-table-hover` ========================================================================== */ .uk-table-hover tbody tr:hover { background: #eeeeee; } /* ======================================================================== Component: Form ========================================================================== */ /* * 1. Define consistent box sizing. * Default is `content-box` with following exceptions set to `border-box` * `button`, `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. Correct `font` properties and `color` not being inherited. */ .uk-form input, .uk-form select, .uk-form textarea { /* 1 */ -moz-box-sizing: border-box; box-sizing: border-box; /* 2 */ margin: 0; /* 3 */ border-radius: 0; /* 4 */ font: inherit; color: inherit; } /* * Address inconsistent `text-transform` inheritance which is only inherit in Firefox */ .uk-form select { text-transform: none; } /* * 1. Correct `font` properties not being inherited. * 2. Don't inherit the `font-weight` and use `bold` instead. * NOTE: Both declarations don't work in Chrome, Safari and Opera. */ .uk-form optgroup { /* 1 */ font: inherit; /* 2 */ font-weight: bold; } /* * Removes inner padding and border in Firefox 4+. */ .uk-form input::-moz-focus-inner { border: 0; padding: 0; } /* * Removes excess padding in IE 8/9/10. */ .uk-form input[type="checkbox"], .uk-form input[type="radio"] { padding: 0; } /* * Improves consistency of cursor style for clickable elements */ .uk-form input[type="checkbox"]:not(:disabled), .uk-form input[type="radio"]:not(:disabled) { cursor: pointer; } /* * Remove default style in iOS. */ .uk-form textarea, .uk-form input:not([type]), .uk-form input[type="text"], .uk-form input[type="password"], .uk-form input[type="email"], .uk-form input[type="url"], .uk-form input[type="search"], .uk-form input[type="tel"], .uk-form input[type="number"], .uk-form input[type="datetime"] { -webkit-appearance: none; } /* * Remove inner padding and search cancel button in Chrome, Safari and Opera on OS X. */ .uk-form input[type="search"]::-webkit-search-cancel-button, .uk-form input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /* * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */ .uk-form input[type="number"]::-webkit-inner-spin-button, .uk-form input[type="number"]::-webkit-outer-spin-button { height: auto; } /* * Define consistent border, margin, and padding. */ .uk-form fieldset { border: none; margin: 0; padding: 0; } /* * 1. Remove default vertical scrollbar in IE 8/9/10/11. * 2. Improve readability and alignment in all browsers. */ .uk-form textarea { /* 1 */ overflow: auto; /* 2 */ vertical-align: top; } /* * Removes placeholder transparency in Firefox. */ .uk-form ::-moz-placeholder { opacity: 1; } /* * Removes `box-shadow` for invalid controls in Firefox. */ .uk-form :invalid { box-shadow: none; } /* * Vertical alignment */ .uk-form input:not([type="radio"]):not([type="checkbox"]), .uk-form select { vertical-align: middle; } /* Style ========================================================================== */ /* * Remove margin from the last-child */ .uk-form > :last-child { margin-bottom: 0; } /* * Controls * Except for `range`, `radio`, `checkbox`, `file`, `submit`, `reset`, `button` and `image` * 1. Must be `height` because `min-height` is not working in OSX * 2. Responsiveness: Sets a maximum width relative to the parent to scale on narrower viewports * 3. Vertical `padding` needed for `select` elements in Firefox * 4. Style */ .uk-form select, .uk-form textarea, .uk-form input:not([type]), .uk-form input[type="text"], .uk-form input[type="password"], .uk-form input[type="datetime"], .uk-form input[type="datetime-local"], .uk-form input[type="date"], .uk-form input[type="month"], .uk-form input[type="time"], .uk-form input[type="week"], .uk-form input[type="number"], .uk-form input[type="email"], .uk-form input[type="url"], .uk-form input[type="search"], .uk-form input[type="tel"], .uk-form input[type="color"] { /* 1 */ height: 30px; /* 2 */ max-width: 100%; /* 3 */ padding: 4px 6px; /* 4 */ border: 1px solid #dddddd; background: #ffffff; color: #444444; -webkit-transition: all linear 0.2s; transition: all linear 0.2s; } .uk-form select:focus, .uk-form textarea:focus, .uk-form input:not([type]):focus, .uk-form input[type="text"]:focus, .uk-form input[type="password"]:focus, .uk-form input[type="datetime"]:focus, .uk-form input[type="datetime-local"]:focus, .uk-form input[type="date"]:focus, .uk-form input[type="month"]:focus, .uk-form input[type="time"]:focus, .uk-form input[type="week"]:focus, .uk-form input[type="number"]:focus, .uk-form input[type="email"]:focus, .uk-form input[type="url"]:focus, .uk-form input[type="search"]:focus, .uk-form input[type="tel"]:focus, .uk-form input[type="color"]:focus { border-color: #99baca; outline: 0; background: #f5fbfe; color: #444444; } .uk-form select:disabled, .uk-form textarea:disabled, .uk-form input:not([type]):disabled, .uk-form input[type="text"]:disabled, .uk-form input[type="password"]:disabled, .uk-form input[type="datetime"]:disabled, .uk-form input[type="datetime-local"]:disabled, .uk-form input[type="date"]:disabled, .uk-form input[type="month"]:disabled, .uk-form input[type="time"]:disabled, .uk-form input[type="week"]:disabled, .uk-form input[type="number"]:disabled, .uk-form input[type="email"]:disabled, .uk-form input[type="url"]:disabled, .uk-form input[type="search"]:disabled, .uk-form input[type="tel"]:disabled, .uk-form input[type="color"]:disabled { border-color: #dddddd; background-color: #f5f5f5; color: #999999; } /* * Placeholder */ .uk-form :-ms-input-placeholder { color: #999999 !important; } .uk-form ::-moz-placeholder { color: #999999; } .uk-form ::-webkit-input-placeholder { color: #999999; } .uk-form :disabled:-ms-input-placeholder { color: #999999 !important; } .uk-form :disabled::-moz-placeholder { color: #999999; } .uk-form :disabled::-webkit-input-placeholder { color: #999999; } /* * Legend * 1. Behave like block element * 2. Correct `color` not being inherited in IE 8/9/10/11. * 3. Remove padding * 4. `margin-bottom` is not working in Safari and Opera. * Using `padding` and :after instead to create the border * 5. Style */ .uk-form legend { /* 1 */ width: 100%; /* 2 */ border: 0; /* 3 */ padding: 0; /* 4 */ padding-bottom: 15px; /* 5 */ font-size: 18px; line-height: 30px; } /* 4 */ .uk-form legend:after { content: ""; display: block; border-bottom: 1px solid #dddddd; } /* Size modifiers * Higher specificity needed to override defaults ========================================================================== */ select.uk-form-small, textarea.uk-form-small, input[type].uk-form-small, input:not([type]).uk-form-small { height: 25px; padding: 3px 3px; font-size: 12px; } select.uk-form-large, textarea.uk-form-large, input[type].uk-form-large, input:not([type]).uk-form-large { height: 40px; padding: 8px 6px; font-size: 16px; } /* Reset height * Must be after size modifiers ========================================================================== */ .uk-form textarea, .uk-form select[multiple], .uk-form select[size] { height: auto; } /* Validation states * Using !important to keep the selector simple ========================================================================== */ /* * Error state */ .uk-form-danger { border-color: #dc8d99 !important; background: #fff7f8 !important; color: #c91032 !important; } /* * Success state */ .uk-form-success { border-color: #8ec73b !important; background: #fafff2 !important; color: #539022 !important; } /* Style modifiers * Using !important to keep the selector simple ========================================================================== */ /* * Blank form */ .uk-form-blank { border-color: transparent !important; border-style: dashed !important; background: none !important; } .uk-form-blank:focus { border-color: #dddddd !important; } /* Size sub-modifiers ========================================================================== */ /* * Fixed widths * Different widths for mini sized `input` and `select` elements */ input.uk-form-width-mini { width: 40px; } select.uk-form-width-mini { width: 65px; } .uk-form-width-small { width: 130px; } .uk-form-width-medium { width: 200px; } .uk-form-width-large { width: 500px; } /* Sub-objects: `uk-form-row` * Groups labels and controls in rows ========================================================================== */ /* * Micro clearfix * Needed for `uk-form-horizontal` modifier */ .uk-form-row:before, .uk-form-row:after { content: " "; display: table; } .uk-form-row:after { clear: both; } /* * Vertical gutter */ .uk-form-row + .uk-form-row { margin-top: 15px; } /* Help text * Sub-object: `uk-form-help-inline`, `uk-form-help-block` ========================================================================== */ .uk-form-help-inline { display: inline-block; margin: 0 0 0 10px; } .uk-form-help-block { margin: 5px 0 0 0; } /* Controls content * Sub-object: `uk-form-controls`, `uk-form-controls-condensed` ========================================================================== */ /* * Remove margins */ .uk-form-controls > :first-child { margin-top: 0; } .uk-form-controls > :last-child { margin-bottom: 0; } /* * Group controls and text into blocks with a small spacing between blocks */ .uk-form-controls-condensed { margin: 5px 0; } /* Modifier: `uk-form-stacked` * Requires sub-object: `uk-form-label` ========================================================================== */ .uk-form-stacked .uk-form-label { display: block; margin-bottom: 5px; font-weight: bold; } /* Modifier: `uk-form-horizontal` * Requires sub-objects: `uk-form-label`, `uk-form-controls` ========================================================================== */ /* Tablet portrait and smaller */ @media (max-width: 959px) { /* Behave like `uk-form-stacked` */ .uk-form-horizontal .uk-form-label { display: block; margin-bottom: 5px; font-weight: bold; } } /* Desktop and bigger */ @media (min-width: 960px) { .uk-form-horizontal .uk-form-label { width: 200px; margin-top: 5px; float: left; } .uk-form-horizontal .uk-form-controls { margin-left: 215px; } /* Better vertical alignment if controls are checkboxes and radio buttons with text */ .uk-form-horizontal .uk-form-controls-text { padding-top: 5px; } } /* Sub-object: `uk-form-icon` ========================================================================== */ /* * 1. Container width fits its content * 2. Create position context * 3. Prevent `inline-block` consequences */ .uk-form-icon { /* 1 */ display: inline-block; /* 2 */ position: relative; /* 3 */ max-width: 100%; } /* * 1. Make form element clickable through icon */ .uk-form-icon > [class*='uk-icon-'] { position: absolute; top: 50%; width: 30px; margin-top: -7px; font-size: 14px; color: #999999; text-align: center; /* 1 */ pointer-events: none; } .uk-form-icon:not(.uk-form-icon-flip) > input { padding-left: 30px !important; } /* * Sub-modifier: `uk-form-icon-flip` */ .uk-form-icon-flip > [class*='uk-icon-'] { right: 0; } .uk-form-icon-flip > input { padding-right: 30px !important; } /* @import "button.less"; @import "icon.less"; @import "close.less"; @import "badge.less"; @import "alert.less"; @import "thumbnail.less"; @import "overlay.less"; @import "progress.less"; @import "animation.less"; */ /* ======================================================================== Component: Dropdown ========================================================================== */ /* * 1. Hide by default * 2. Set position * 3. Box-sizing is needed for `uk-dropdown-justify` * 4. Set style * 5. Reset button group whitespace hack */ .uk-dropdown { /* 1 */ display: none; /* 2 */ position: absolute; top: 100%; left: 0; z-index: 1020; /* 3 */ -moz-box-sizing: border-box; box-sizing: border-box; /* 4 */ width: 200px; margin-top: 5px; padding: 15px; background: #f5f5f5; color: #444444; /* 5 */ font-size: 1rem; vertical-align: top; } /* * 1. Show dropdown * 2. Set animation * 3. Needed for scale animation */ .uk-open > .uk-dropdown { /* 1 */ display: block; /* 2 */ -webkit-animation: uk-fade 0.2s ease-in-out; animation: uk-fade 0.2s ease-in-out; /* 3 */ -webkit-transform-origin: 0 0; transform-origin: 0 0; } /* Alignment modifiers ========================================================================== */ /* * Modifier `uk-dropdown-flip` */ .uk-dropdown-flip { left: auto; right: 0; } /* * Modifier `uk-dropdown-up` */ .uk-dropdown-up { top: auto; bottom: 100%; margin-top: auto; margin-bottom: 5px; } /* Nav in dropdown ========================================================================== */ .uk-dropdown .uk-nav { margin: 0 -15px; } /* Grid and panel in dropdown ========================================================================== */ /* * Vertical gutter */ /* * Grid * Higher specificity to override large gutter */ .uk-grid .uk-dropdown-grid + .uk-dropdown-grid { margin-top: 15px; } /* Panels */ .uk-dropdown-grid > [class*='uk-width-'] > .uk-panel + .uk-panel { margin-top: 15px; } /* Tablet and bigger */ @media (min-width: 768px) { /* * Horizontal gutter */ .uk-dropdown:not(.uk-dropdown-stack) > .uk-dropdown-grid { margin-left: -15px; margin-right: -15px; } .uk-dropdown:not(.uk-dropdown-stack) > .uk-dropdown-grid > [class*='uk-width-'] { padding-left: 15px; padding-right: 15px; } /* * Column divider */ .uk-dropdown:not(.uk-dropdown-stack) > .uk-dropdown-grid > [class*='uk-width-']:nth-child(n+2) { border-left: 1px solid #dddddd; } /* * Width multiplier for dropdown columns */ .uk-dropdown-width-2:not(.uk-dropdown-stack) { width: 400px; } .uk-dropdown-width-3:not(.uk-dropdown-stack) { width: 600px; } .uk-dropdown-width-4:not(.uk-dropdown-stack) { width: 800px; } .uk-dropdown-width-5:not(.uk-dropdown-stack) { width: 1000px; } } /* Phone landscape and smaller */ @media (max-width: 767px) { /* * Stack columns and take full width */ .uk-dropdown-grid > [class*='uk-width-'] { width: 100%; } /* * Vertical gutter */ .uk-dropdown-grid > [class*='uk-width-']:nth-child(n+2) { margin-top: 15px; } } /* * Stack grid columns */ .uk-dropdown-stack > .uk-dropdown-grid > [class*='uk-width-'] { width: 100%; } .uk-dropdown-stack > .uk-dropdown-grid > [class*='uk-width-']:nth-child(n+2) { margin-top: 15px; } /* Modifier `uk-dropdown-small` ========================================================================== */ /* * Set min-width and text expands dropdown if needed */ .uk-dropdown-small { min-width: 150px; width: auto; padding: 5px; white-space: nowrap; } /* * Nav in dropdown */ .uk-dropdown-small .uk-nav { margin: 0 -5px; } /* Modifier: `uk-dropdown-navbar` ========================================================================== */ .uk-dropdown-navbar { margin-top: 0; background: #f5f5f5; color: #444444; } .uk-open > .uk-dropdown-navbar { -webkit-animation: uk-slide-top-fixed 0.2s ease-in-out; animation: uk-slide-top-fixed 0.2s ease-in-out; } /* Modifier `uk-dropdown-scrollable` ========================================================================== */ /* * Usefull for long lists */ .uk-dropdown-scrollable { overflow-y: auto; max-height: 200px; } /* ======================================================================== Component: Modal ========================================================================== */ /* * This is the modal overlay and modal dialog container * 1. Hide by default * 2. Set fixed position * 3. Allow scrolling for the modal dialog * 4. Mask the background page * 5. Fade-in transition */ .uk-modal { /* 1 */ display: none; /* 2 */ position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1010; /* 3 */ overflow-y: auto; -webkit-overflow-scrolling: touch; /* 4 */ background: rgba(0, 0, 0, 0.6); /* 5 */ opacity: 0; -webkit-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } /* * Open state */ .uk-modal.uk-open { opacity: 1; } /* * Prevents duplicated scrollbar caused by 4. */ .uk-modal-page, .uk-modal-page body { overflow: hidden; } /* Sub-object: `uk-modal-dialog` ========================================================================== */ /* * 1. Create position context for `uk-modal-dialog-frameless` * 2. Set box sizing * 3. Set style * 4. Slide-in transition */ .uk-modal-dialog { /* 1 */ position: relative; /* 2 */ -moz-box-sizing: border-box; box-sizing: border-box; margin: 50px auto; padding: 20px; width: 600px; max-width: 100%; max-width: calc(100% - 20px); /* 3 */ background: #ffffff; /* 4 */ opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: opacity 0.3s linear, -webkit-transform 0.3s ease-out; transition: opacity 0.3s linear, transform 0.3s ease-out; } /* Phone landscape and smaller */ @media (max-width: 767px) { /* * Fit in small screen */ .uk-modal-dialog { width: auto; margin: 10px; } } /* * Open state */ .uk-open .uk-modal-dialog { /* 4 */ opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* * Remove margin from the last-child */ .uk-modal-dialog > :last-child { margin-bottom: 0; } /* Close in modal ========================================================================== */ .uk-modal-dialog > .uk-close:first-child { margin: -10px -10px 0 0; float: right; } /* * Remove margin from adjacent element */ .uk-modal-dialog > .uk-close:first-child + * { margin-top: 0; } /* Modifier: `uk-modal-dialog-frameless` ========================================================================== */ .uk-modal-dialog-frameless { padding: 0; } /* * Close in modal */ .uk-modal-dialog-frameless > .uk-close:first-child { position: absolute; top: -12px; right: -12px; margin: 0; float: none; } /* Phone landscape and smaller */ @media (max-width: 767px) { .uk-modal-dialog-frameless > .uk-close:first-child { top: -7px; right: -7px; } } /* Modifier: `uk-modal-dialog-large` ========================================================================== */ /* Tablet and bigger */ @media (min-width: 768px) { .uk-modal-dialog-large { width: 930px; } } /* Large screen and bigger */ @media (min-width: 1220px) { .uk-modal-dialog-large { width: 1130px; } } /* ======================================================================== Component: Off-canvas ========================================================================== */ /* * This is the offcanvas overlay and bar container * 1. Hide by default * 2. Set fixed position * 3. Mask the background page */ .uk-offcanvas { /* 1 */ display: none; /* 2 */ position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; /* 3 */ background: rgba(0, 0, 0, 0.1); } .uk-offcanvas.uk-active { display: block; } /* Sub-object `uk-offcanvas-page` ========================================================================== */ /* * Prepares the whole HTML page to slide-out * 1. Fix the main page and disallow scrolling * 2. Side-out transition */ .uk-offcanvas-page { /* 1 */ position: fixed; /* 2 */ -webkit-transition: margin-left 0.3s ease-in-out; transition: margin-left 0.3s ease-in-out; } /* Sub-object `uk-offcanvas-bar` ========================================================================== */ /* * This is the offcanvas bar * 1. Set fixed position * 2. Size and style * 3. Allow scrolling * 4. Side-out transition */ .uk-offcanvas-bar { /* 1 */ position: fixed; top: 0; bottom: 0; left: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); z-index: 1001; /* 2 */ width: 270px; max-width: 100%; background: #333333; /* 3 */ overflow-y: auto; -webkit-overflow-scrolling: touch; /* 4 */ -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; } .uk-offcanvas.uk-active .uk-offcanvas-bar.uk-offcanvas-bar-show { -webkit-transform: translateX(0%); transform: translateX(0%); } /* Modifier `uk-offcanvas-bar-flip` ========================================================================== */ .uk-offcanvas-bar-flip { left: auto; right: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } /* Panel in offcanvas ========================================================================== */ .uk-offcanvas .uk-panel { margin: 20px 15px; color: #777777; } .uk-offcanvas .uk-panel-title { color: #cccccc; } .uk-offcanvas .uk-panel a:not([class]) { color: #cccccc; } .uk-offcanvas .uk-panel a:not([class]):hover { color: #ffffff; } /* ======================================================================== Component: Switcher ========================================================================== */ .uk-switcher { margin: 0; padding: 0; list-style: none; } /* * Items */ .uk-switcher > *:not(.uk-active) { display: none; } /* ======================================================================== Component: Tooltip ========================================================================== */ /* * 1. Hide by default * 2. Set fixed position * 3. Set dimensions * 4. Set style */ .uk-tooltip { /* 1 */ display: none; /* 2 */ position: absolute; z-index: 1030; /* 3 */ -moz-box-sizing: border-box; box-sizing: border-box; max-width: 200px; padding: 5px 8px; /* 4 */ background: #333333; color: rgba(255, 255, 255, 0.7); font-size: 12px; line-height: 18px; text-align: center; } /* Triangle ========================================================================== */ /* * 1. Dashed is less antialised than solid */ .uk-tooltip:after { content: ""; display: block; position: absolute; width: 0; height: 0; /* 1 */ border: 5px dashed #333333; } /* Direction modifiers ========================================================================== */ /* * Top */ .uk-tooltip-top:after, .uk-tooltip-top-left:after, .uk-tooltip-top-right:after { bottom: -5px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; border-top-color: #333333; } /* * Bottom */ .uk-tooltip-bottom:after, .uk-tooltip-bottom-left:after, .uk-tooltip-bottom-right:after { top: -5px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; border-bottom-color: #333333; } /* * Top/Bottom center */ .uk-tooltip-top:after, .uk-tooltip-bottom:after { left: 50%; margin-left: -5px; } /* * Top/Bottom left */ .uk-tooltip-top-left:after, .uk-tooltip-bottom-left:after { left: 10px; } /* * Top/Bottom right */ .uk-tooltip-top-right:after, .uk-tooltip-bottom-right:after { right: 10px; } /* * Left */ .uk-tooltip-left:after { right: -5px; top: 50%; margin-top: -5px; border-left-style: solid; border-right: none; border-top-color: transparent; border-bottom-color: transparent; border-left-color: #333333; } /* * Right */ .uk-tooltip-right:after { left: -5px; top: 50%; margin-top: -5px; border-right-style: solid; border-left: none; border-top-color: transparent; border-bottom-color: transparent; border-right-color: #333333; } /* ======================================================================== Component: Nestable ========================================================================== */ .uk-nestable { padding: 0; list-style: none; } /* Sub-object `uk-nestable-list` ========================================================================== */ .uk-nestable-list { margin: 0; padding-left: 40px; list-style: none; } /* Sub-modifier `uk-nestable-list-dragged` ========================================================================== */ .uk-nestable-list-dragged { position: absolute; z-index: 1050; padding-left: 0; pointer-events: none; } /* Sub-object `uk-nestable-item` ========================================================================== */ .uk-nestable-item { margin-bottom: 10px; padding: 0; background: #f6f6f6; } /* Sub-object `uk-nestable-placeholder` * The placeholder which marks the drop area ========================================================================== */ .uk-nestable-placeholder { -moz-box-sizing: border-box; box-sizing: border-box; margin-bottom: 10px; border: 1px dashed #e4e4e4; } /* Sub-object `uk-nestable-empty` * The style of an empty list ========================================================================== */ .uk-nestable-empty { min-height: 40px; } /* Sub-object `uk-nestable-handle` ========================================================================== */ .uk-nestable-handle { display: inline-block; font-size: 15px; color: #979898; } /* Hover */ .uk-nestable-handle:hover { cursor: move; } /* Icon */ .uk-nestable-handle:after { content: "\f0c9"; font-family: FontAwesome; } /* Sub-object `uk-nestable-moving` ========================================================================== */ .uk-nestable-moving, .uk-nestable-moving * { cursor: move; } /* Sub-object `[data-action='toggle']` ========================================================================== */ /* Hidden by default */ [data-nestable-action='toggle'] { display: inline-block; color: #979898; visibility: hidden; } /* Hover */ [data-nestable-action='toggle']:hover { color: #7d7f7f; cursor: pointer; } /* Icon */ [data-nestable-action='toggle']:after { content: "\f068"; font-family: FontAwesome; } /* * Show if nested */ .uk-parent > .uk-nestable-item [data-nestable-action='toggle'] { visibility: visible; } /* * Collapsed */ .uk-collapsed > .uk-nestable-item [data-nestable-action='toggle']:after { content: "\f067"; } .uk-collapsed .uk-nestable-list { display: none; } /*@import "text.less"; @import "utility.less"; @import "print.less";*/