anyproxy/web/css/addons/uikit.gradient.addons.css
2014-08-25 11:43:05 +08:00

1325 lines
31 KiB
CSS
Executable File

/*! UIkit 2.9.0 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
/* ========================================================================
Component: Dotnav
========================================================================== */
/*
* 1. Remove default list style
* 2. Remove whitespace between child elements when using `inline-block`
*/
.uk-dotnav {
/* 1 */
padding: 0;
list-style: none;
/* 2 */
font-size: 0.001px;
}
/* Items
========================================================================== */
/*
* 1. Reset whitespace hack
* 2. Remove the gap at the bottom of it container
*/
.uk-dotnav > li {
display: inline-block;
/* 1 */
font-size: 1rem;
/* 2 */
vertical-align: top;
}
.uk-dotnav > li:nth-child(n+2) {
margin-left: 15px;
}
/*
* Items
* 1. Remove the gap at the bottom of it container
* 2. Hide text if present
*/
.uk-dotnav > li > a {
display: inline-block;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(50, 50, 50, 0.1);
/* 1 */
vertical-align: top;
/* 2 */
overflow: hidden;
text-indent: -999%;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
/*
* Hover
* 1. Apply hover style also to focus state
* 2. Remove default focus style
*/
.uk-dotnav > li > a:hover,
.uk-dotnav > li > a:focus {
background: rgba(50, 50, 50, 0.4);
/* 2 */
outline: none;
}
/* OnClick */
.uk-dotnav > li > a:active {
background: rgba(50, 50, 50, 0.6);
}
/* Active */
.uk-dotnav > li.uk-active > a {
background: rgba(50, 50, 50, 0.4);
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
/* Modifier: 'dotnav-vertical'
========================================================================== */
.uk-dotnav-vertical > li {
display: block;
}
.uk-dotnav-vertical > li:nth-child(n+2) {
margin-left: 0;
margin-top: 15px;
}
/* ========================================================================
Component: Slidenav
========================================================================== */
/*
* 1. Required for `a` elements
* 2. Dimension
* 3. Style
*/
.uk-slidenav {
/* 1 */
display: inline-block;
/* 2 */
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 60px;
height: 60px;
/* 3 */
line-height: 60px;
color: rgba(50, 50, 50, 0.4);
font-size: 60px;
text-align: center;
}
/*
* Hover
* 1. Apply hover style also to focus state
* 2. Remove default focus style
* 3. Required for `a` elements
* 4. Style
*/
.uk-slidenav:hover,
.uk-slidenav:focus {
/* 2 */
outline: none;
/* 3 */
text-decoration: none;
/* 4 */
color: rgba(50, 50, 50, 0.7);
cursor: pointer;
}
/* Active */
.uk-slidenav:active {
color: rgba(50, 50, 50, 0.9);
}
/*
* Icons
*/
.uk-slidenav-previous:before {
content: "\f104";
font-family: FontAwesome;
}
.uk-slidenav-next:before {
content: "\f105";
font-family: FontAwesome;
}
/* Sub-object: `uk-slidenav-position`
========================================================================== */
/*
* 1. Container width fits its content
* 2. Create position context
* 3. Prevent `inline-block` consequences
* 4. Corrects `max-width` behavior if padding and border are used
*/
.uk-slidenav-position {
/* 1 */
display: inline-block;
/* 2 */
position: relative;
/* 3 */
max-width: 100%;
/* 4 */
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*
* Center vertically
*/
.uk-slidenav-position .uk-slidenav {
display: none;
position: absolute;
top: 50%;
margin-top: -30px;
}
.uk-slidenav-position:hover .uk-slidenav {
display: block;
}
.uk-slidenav-position .uk-slidenav-previous {
left: 20px;
}
.uk-slidenav-position .uk-slidenav-next {
right: 20px;
}
/* ========================================================================
Component: Form advanced
Note: Only works in Webkit at the moment
========================================================================== */
/*
* 1. Style
* 2. Makes box more robust so it clips the child element
* 3. Vertical alignment
* 4. Remove default style
* 5. Fix black background on iOS
*/
.uk-form input[type="radio"],
.uk-form input[type="checkbox"] {
/* 1 */
display: inline-block;
height: 14px;
width: 14px;
border: 1px solid #aaaaaa;
/* 2 */
overflow: hidden;
/* 3 */
margin-top: -4px;
vertical-align: middle;
/* 4 */
-webkit-appearance: none;
outline: 0;
/* 5 */
background: transparent;
}
/* Radio */
.uk-form input[type="radio"] {
border-radius: 50%;
}
/*
* Checked
*/
.uk-form input[type=checkbox]:checked:before,
.uk-form input[type=radio]:checked:before {
display: block;
}
/* Radio */
.uk-form input[type=radio]:checked:before {
content: '';
width: 8px;
height: 8px;
margin: 2px auto 0;
border-radius: 50%;
background: #00a8e6;
}
/* Checkbox */
.uk-form input[type=checkbox]:checked:before {
content: "\f00c";
font-family: FontAwesome;
font-size: 12px;
-webkit-font-smoothing: antialiased;
text-align: center;
line-height: 12px;
color: #00a8e6;
}
/*
* Disabled
*/
.uk-form input[type=radio]:disabled,
.uk-form input[type=checkbox]:disabled {
border-color: #dddddd;
}
.uk-form input[type=radio]:disabled:checked:before {
background-color: #aaaaaa;
}
.uk-form input[type=checkbox]:disabled:checked:before {
color: #aaaaaa;
}
/* ========================================================================
Component: Form file
========================================================================== */
/*
* 1. Behave like form elements
* 2. Create position context for dropdowns
* 3. Clip content
*/
.uk-form-file {
/* 1 */
display: inline-block;
vertical-align: middle;
/* 2 */
position: relative;
/* 3 */
overflow: hidden;
}
/*
* 1. Required for Firefox
* 2. Expand height and required for the cursor
*/
.uk-form-file input[type="file"] {
position: absolute;
top: 0;
z-index: 1;
width: 100%;
opacity: 0;
cursor: pointer;
/* 1 */
left: 0;
/* 2 */
font-size: 500px;
}
/* ========================================================================
Component: Form password
========================================================================== */
/*
* 1. Container width fits its content
* 2. Create position context
* 3. Prevent `inline-block` consequences
*/
.uk-form-password {
/* 1 */
display: inline-block;
/* 2 */
position: relative;
/* 3 */
max-width: 100%;
}
.uk-form-password-toggle {
display: block;
position: absolute;
top: 50%;
right: 10px;
margin-top: -6px;
font-size: 13px;
line-height: 13px;
color: #999999;
}
.uk-form-password-toggle:hover {
color: #999999;
text-decoration: none;
}
.uk-form-password > input {
padding-right: 50px !important;
}
/* ========================================================================
Component: Form select
========================================================================== */
/*
* 1. Behave like form elements
* 2. Create position context for dropdowns
* 3. Clip content
*/
.uk-form-select {
/* 1 */
display: inline-block;
vertical-align: middle;
/* 2 */
position: relative;
/* 3 */
overflow: hidden;
}
/*
* 1. Required for Firefox
* 1. Required for Webkit to make `height` work
*/
.uk-form-select select {
position: absolute;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
/* 1 */
left: 0;
/* 2 */
-webkit-appearance: none;
}
/* ========================================================================
Component: Placeholder
========================================================================== */
.uk-placeholder {
margin-bottom: 15px;
padding: 20px;
border: 1px dashed #dddddd;
background: #fafafa;
color: #444444;
}
/*
* Add margin if adjacent element
*/
* + .uk-placeholder {
margin-top: 15px;
}
/*
* Remove margin from the last-child
*/
.uk-placeholder > :last-child {
margin-bottom: 0;
}
/* Modifier: `uk-placeholder-large`
========================================================================== */
.uk-placeholder-large {
padding-top: 80px;
padding-bottom: 80px;
}
/* ========================================================================
Component: Autocomplete
========================================================================== */
/*
* 1. Container width fits its content
* 2. Create position context
* 3. Prevent `inline-block` consequences
* 4. Remove the gap between the container and its child element
*/
.uk-autocomplete {
/* 1 */
display: inline-block;
/* 2 */
position: relative;
/* 3 */
max-width: 100%;
/* 4 */
vertical-align: middle;
}
/* Nav modifier `uk-nav-autocomplete`
========================================================================== */
/*
* Items
*/
.uk-nav-autocomplete > li > a {
color: #444444;
}
/*
* Active
* 1. Remove default focus style
*/
.uk-nav-autocomplete > li.uk-active > a {
background: #009dd8;
color: #ffffff;
/* 1 */
outline: none;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}
/*
* Sub-object: `uk-nav-header`
*/
.uk-nav-autocomplete .uk-nav-header {
color: #999999;
}
/*
* Sub-object: `uk-nav-divider`
*/
.uk-nav-autocomplete .uk-nav-divider {
border-top: 1px solid #dddddd;
}
/* ========================================================================
Component: Datepicker
========================================================================== */
/*
* 1. Reset dropdown width
* 2. Set animation
* 3. Needed for scale animation
*/
.uk-datepicker {
/* 1 */
width: auto;
/* 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;
}
/* Sub-object: `uk-datepicker-nav`
========================================================================== */
.uk-datepicker-nav {
margin-bottom: 15px;
text-align: center;
line-height: 20px;
}
/*
* Micro clearfix
*/
.uk-datepicker-nav:before,
.uk-datepicker-nav:after {
content: " ";
display: table;
}
.uk-datepicker-nav:after {
clear: both;
}
/*
* Previous and next navigation
*/
.uk-datepicker-nav a {
color: #444444;
text-decoration: none;
}
.uk-datepicker-nav a:hover {
color: #444444;
}
.uk-datepicker-previous {
float: left;
}
.uk-datepicker-next {
float: right;
}
.uk-datepicker-previous:after,
.uk-datepicker-next:after {
width: 20px;
font-family: FontAwesome;
}
.uk-datepicker-previous:after {
content: "\f053";
}
.uk-datepicker-next:after {
content: "\f054";
}
/* Sub-object: `uk-datepicker-heading`
========================================================================== */
/* Sub-object: `uk-datepicker-table`
========================================================================== */
/* Block element behavior */
.uk-datepicker-table {
width: 100%;
}
.uk-datepicker-table th,
.uk-datepicker-table td {
padding: 2px;
}
.uk-datepicker-table th {
font-size: 12px;
}
/*
* Item
*/
.uk-datepicker-table a {
display: block;
width: 26px;
line-height: 24px;
text-align: center;
color: #444444;
text-decoration: none;
border: 1px solid transparent;
border-radius: 4px;
background-origin: border-box;
}
/*
* Sub-object: `uk-datepicker-table-muted`
*/
a.uk-datepicker-table-muted {
color: #999999;
}
/*
* Hover
* 1. Apply hover style also to focus state
* 2. Remove default focus style
*/
.uk-datepicker-table a:hover,
.uk-datepicker-table a:focus {
background-color: #fafafa;
color: #444444;
/* 2 */
outline: none;
border-color: rgba(0, 0, 0, 0.2);
border-bottom-color: rgba(0, 0, 0, 0.3);
text-shadow: 0 1px 0 #ffffff;
}
/* OnClick */
.uk-datepicker-table a:active {
background-color: #f5f5f5;
color: #444444;
border-color: rgba(0, 0, 0, 0.2);
border-top-color: rgba(0, 0, 0, 0.3);
background-image: none;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
/*
* Active
*/
.uk-datepicker-table a.uk-active {
background: #009dd8;
color: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.2);
border-bottom-color: rgba(0, 0, 0, 0.4);
background-origin: border-box;
background-image: -webkit-linear-gradient(top, #00b4f5, #008dc5);
background-image: linear-gradient(to bottom, #00b4f5, #008dc5);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}
/* ========================================================================
Component: HTML editor
========================================================================== */
/* Sub-object `uk-htmleditor-navbar`
========================================================================== */
.uk-htmleditor-navbar {
background: #f7f7f7;
border: 1px solid rgba(0, 0, 0, 0.1);
border-bottom-color: rgba(0, 0, 0, 0.2);
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background-origin: border-box;
background-image: -webkit-linear-gradient(top, #ffffff, #eeeeee);
background-image: linear-gradient(to bottom, #ffffff, #eeeeee);
}
/*
* Micro clearfix
*/
.uk-htmleditor-navbar:before,
.uk-htmleditor-navbar:after {
content: " ";
display: table;
}
.uk-htmleditor-navbar:after {
clear: both;
}
/* Sub-object `uk-htmleditor-navbar-nav`
========================================================================== */
.uk-htmleditor-navbar-nav {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
.uk-htmleditor-navbar-nav > li {
float: left;
}
/*
* 1. Dimensions
* 2. Style
*/
.uk-htmleditor-navbar-nav > li > a {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-decoration: none;
/* 1 */
height: 41px;
padding: 0 15px;
line-height: 40px;
/* 2 */
color: #444444;
font-size: 11px;
cursor: pointer;
margin-top: -1px;
margin-left: -1px;
border: 1px solid transparent;
border-bottom-width: 0;
text-shadow: 0 1px 0 #ffffff;
}
/*
* Hover
* 1. Apply hover style also to focus state
* 2. Remove default focus style
*/
.uk-htmleditor-navbar-nav > li:hover > a,
.uk-htmleditor-navbar-nav > li > a:focus {
background-color: transparent;
color: #444444;
outline: none;
/* 2 */
position: relative;
z-index: 1;
border-left-color: rgba(0, 0, 0, 0.1);
border-right-color: rgba(0, 0, 0, 0.1);
border-top-color: rgba(0, 0, 0, 0.1);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* OnClick */
.uk-htmleditor-navbar-nav > li > a:active {
background-color: #f5f5f5;
color: #444444;
border-left-color: rgba(0, 0, 0, 0.1);
border-right-color: rgba(0, 0, 0, 0.1);
border-top-color: rgba(0, 0, 0, 0.2);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Active */
.uk-htmleditor-navbar-nav > li.uk-active > a {
background-color: #fafafa;
color: #444444;
border-left-color: rgba(0, 0, 0, 0.1);
border-right-color: rgba(0, 0, 0, 0.1);
border-top-color: rgba(0, 0, 0, 0.2);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Sub-object: `uk-htmleditor-navbar-flip`
========================================================================== */
.uk-htmleditor-navbar-flip {
float: right;
}
/* Sub-object for special buttons
========================================================================== */
[data-mode='split'] .uk-htmleditor-button-code,
[data-mode='split'] .uk-htmleditor-button-preview {
display: none;
}
/* Sub-object `uk-htmleditor-content`
========================================================================== */
.uk-htmleditor-content {
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
background: #ffffff;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
/*
* Micro clearfix
*/
.uk-htmleditor-content:before,
.uk-htmleditor-content:after {
content: " ";
display: table;
}
.uk-htmleditor-content:after {
clear: both;
}
/* Modifier `uk-htmleditor-fullscreen`
========================================================================== */
.uk-htmleditor-fullscreen {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 990;
}
.uk-htmleditor-fullscreen .uk-htmleditor-content {
position: absolute;
top: 41px;
left: 0;
right: 0;
bottom: 0;
}
.uk-htmleditor-fullscreen .uk-icon-expand:before {
content: "\f066";
}
/* Sub-objects `uk-htmleditor-code` and `uk-htmleditor-preview`
========================================================================== */
.uk-htmleditor-code,
.uk-htmleditor-preview {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.uk-htmleditor-preview {
padding: 20px;
overflow-y: scroll;
position: relative;
}
/*
* Tab view
*/
[data-mode='tab'][data-active-tab='code'] .uk-htmleditor-preview,
[data-mode='tab'][data-active-tab='preview'] .uk-htmleditor-code {
display: none;
}
/*
* Split view
*/
[data-mode='split'] .uk-htmleditor-code,
[data-mode='split'] .uk-htmleditor-preview {
float: left;
width: 50%;
}
[data-mode='split'] .uk-htmleditor-code {
border-right: 1px solid #eeeeee;
}
/* Sub-object `uk-htmleditor-iframe`
========================================================================== */
.uk-htmleditor-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* CodeMirror modifications
========================================================================== */
.uk-htmleditor .CodeMirror {
padding: 10px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*
* Apply same `border-radius` as `uk-htmleditor-navbar`
*/
.uk-htmleditor-navbar-nav:first-child > li:first-child > a {
border-top-left-radius: 4px;
}
/*
* Sub-modifier `uk-htmleditor-navbar-flip`
*/
/* Collapse border */
.uk-htmleditor-navbar-flip .uk-htmleditor-navbar-nav > li > a {
margin-left: 0;
margin-right: -1px;
}
/* Apply same `border-radius` as `uk-htmleditor-navbar` */
.uk-htmleditor-navbar-flip .uk-htmleditor-navbar-nav:first-child > li:first-child > a {
border-top-left-radius: 0;
}
.uk-htmleditor-navbar-flip .uk-htmleditor-navbar-nav:last-child > li:last-child > a {
border-top-right-radius: 4px;
}
/*
* Sub-modifier `uk-htmleditor-fullscreen`
*/
.uk-htmleditor-fullscreen .uk-htmleditor-navbar {
border-top: none;
border-left: none;
border-right: none;
border-radius: 0;
}
.uk-htmleditor-fullscreen .uk-htmleditor-content {
border: none;
border-radius: 0;
}
.uk-htmleditor-fullscreen .uk-htmleditor-navbar-nav > li > a {
border-radius: 0 !important;
}
/* ========================================================================
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: 5px;
background: #f7f7f7;
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.2);
border-bottom-color: rgba(0, 0, 0, 0.3);
background-origin: border-box;
background-image: -webkit-linear-gradient(top, #ffffff, #eeeeee);
background-image: linear-gradient(to bottom, #ffffff, #eeeeee);
text-shadow: 0 1px 0 #ffffff;
}
/* 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 #dddddd;
}
/* 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: 18px;
color: #dddddd;
}
/* 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: #999999;
visibility: hidden;
}
/* Hover */
[data-nestable-action='toggle']:hover {
color: #444444;
cursor: pointer;
}
/* Icon */
[data-nestable-action='toggle']:after {
content: "\f147";
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: "\f196";
}
.uk-collapsed .uk-nestable-list {
display: none;
}
/* ========================================================================
Component: Notify
========================================================================== */
/*
* Message container for positioning
*/
.uk-notify {
position: fixed;
top: 10px;
left: 10px;
z-index: 1040;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 350px;
}
/* Position modifiers
========================================================================== */
.uk-notify-top-right,
.uk-notify-bottom-right {
left: auto;
right: 10px;
}
.uk-notify-top-center,
.uk-notify-bottom-center {
left: 50%;
margin-left: -175px;
}
.uk-notify-bottom-left,
.uk-notify-bottom-right,
.uk-notify-bottom-center {
top: auto;
bottom: 10px;
}
/* Responsiveness
========================================================================== */
/* Phones portrait and smaller */
@media (max-width: 479px) {
/*
* Fit in small screen
*/
.uk-notify {
left: 10px;
right: 10px;
width: auto;
margin: 0;
}
}
/* Sub-object: `uk-notify-message`
========================================================================== */
.uk-notify-message {
position: relative;
margin-bottom: 10px;
padding: 15px;
background: #444444;
color: #ffffff;
font-size: 16px;
line-height: 22px;
cursor: pointer;
border: 1px solid #444444;
border-radius: 4px;
}
/* Close in notify
========================================================================== */
.uk-notify-message > .uk-close {
visibility: hidden;
float: right;
}
.uk-notify-message:hover > .uk-close {
visibility: visible;
}
/* Modifier: `uk-alert-info`
========================================================================== */
.uk-notify-message-primary {
background: #ebf7fd;
color: #2d7091;
border-color: rgba(45, 112, 145, 0.3);
}
/* Modifier: `uk-alert-success`
========================================================================== */
.uk-notify-message-success {
background: #f2fae3;
color: #659f13;
border-color: rgba(101, 159, 19, 0.3);
}
/* Modifier: `uk-notify-message-warning`
========================================================================== */
.uk-notify-message-warning {
background: #fffceb;
color: #e28327;
border-color: rgba(226, 131, 39, 0.3);
}
/* Modifier: `uk-notify-message-danger`
========================================================================== */
.uk-notify-message-danger {
background: #fff1f0;
color: #d85030;
border-color: rgba(216, 80, 48, 0.3);
}
/* ========================================================================
Component: Search
========================================================================== */
/*
* 1. Create position context for dropdowns
* 2. Needed for `form` element
*/
.uk-search {
display: inline-block;
/* 1 */
position: relative;
/* 2 */
margin: 0;
}
/*
* Icon
*/
.uk-search:before {
content: "\f002";
position: absolute;
top: 0;
left: 0;
width: 30px;
line-height: 30px;
text-align: center;
font-family: FontAwesome;
font-size: 14px;
color: rgba(0, 0, 0, 0.2);
}
/* Sub-object `uk-search-field`
========================================================================== */
/*
* 1. Needed to reset iOS `input[type="search"]` appearance
*/
.uk-search-field {
width: 120px;
height: 30px;
padding: 0 0 0 30px;
border: 1px solid rgba(0, 0, 0, 0);
background: rgba(0, 0, 0, 0);
color: #444444;
-webkit-transition: all linear 0.2s;
transition: all linear 0.2s;
/* 1 */
border-radius: 0;
}
/*
* Needed to reset iOS `input[type="search"]` appearance
* Higher specificity to override appearance set by normalize.less
*/
input.uk-search-field {
-webkit-appearance: none;
}
/* Placeholder */
.uk-search-field:-ms-input-placeholder {
color: #999999;
}
.uk-search-field::-moz-placeholder {
color: #999999;
}
.uk-search-field::-webkit-input-placeholder {
color: #999999;
}
/* Removes cancel button in IE10 */
.uk-search-field::-ms-clear {
display: none;
}
/* Focus */
.uk-search-field:focus {
outline: 0;
}
/* Focus + active */
.uk-search-field:focus,
.uk-search.uk-active .uk-search-field {
width: 180px;
}
/* Dropdown modifier: `uk-dropdown-search`
========================================================================== */
.uk-dropdown-search {
width: 300px;
margin-top: 0;
background: #ffffff;
color: #444444;
}
.uk-open > .uk-dropdown-search {
-webkit-animation: uk-slide-top-fixed 0.2s ease-in-out;
animation: uk-slide-top-fixed 0.2s ease-in-out;
}
/*
* Dependency `uk-navbar-flip`
*/
.uk-navbar-flip .uk-dropdown-search {
margin-top: 12px;
margin-right: -16px;
}
/* Nav modifier `uk-nav-search`
========================================================================== */
/*
* Items
*/
.uk-nav-search > li > a {
color: #444444;
}
/*
* Active
* 1. Remove default focus style
*/
.uk-nav-search > li.uk-active > a {
background: #009dd8;
color: #ffffff;
/* 1 */
outline: none;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}
/*
* Sub-object: `uk-nav-header`
*/
.uk-nav-search .uk-nav-header {
color: #999999;
}
/*
* Sub-object: `uk-nav-divider`
*/
.uk-nav-search .uk-nav-divider {
border-top: 1px solid #dddddd;
}
/*
* Nested items
*/
.uk-nav-search ul a {
color: #0077dd;
}
.uk-nav-search ul a:hover {
color: #005599;
}
/* Search in offcanvas
========================================================================== */
.uk-offcanvas .uk-search {
display: block;
margin: 20px 15px;
}
.uk-offcanvas .uk-search:before {
color: #777777;
}
.uk-offcanvas .uk-search-field {
width: 100%;
border-color: rgba(0, 0, 0, 0);
background: #1a1a1a;
color: #cccccc;
}
.uk-offcanvas .uk-search-field:-ms-input-placeholder {
color: #777777;
}
.uk-offcanvas .uk-search-field::-moz-placeholder {
color: #777777;
}
.uk-offcanvas .uk-search-field::-webkit-input-placeholder {
color: #777777;
}
/* ========================================================================
Component: Sortable
========================================================================== */
.uk-sortable {
position: relative;
}
/*
* Makes text unselectable
*/
.uk-sortable > * {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
/*
* Prevents images and links from being dragged (default browser behavior)
* Currently only works in Webkit
*/
.uk-sortable > * * {
-webkit-user-drag: none;
user-drag: none;
}
/* Sub-modifier `uk-sortable-dragged`
========================================================================== */
.uk-sortable-dragged {
position: absolute;
z-index: 1050;
pointer-events: none;
}
/* Sub-modifier `uk-sortable-placeholder`
========================================================================== */
.uk-sortable-placeholder {
opacity: 0;
}
/* Sub-modifier `uk-sortable-over`
* Only if `warp:true`
========================================================================== */
.uk-sortable-over {
opacity: 0.3;
}
/* Sub-object `uk-nestable-moving`
========================================================================== */
.uk-sortable-moving,
.uk-sortable-moving * {
cursor: move;
}
/* ========================================================================
Component: Sticky
========================================================================== */
/*
* 1. More robust if padding and border are used
*/
[data-uk-sticky].uk-active {
z-index: 980;
/* 1 */
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*
* Faster animations
*/
[data-uk-sticky][class*='uk-animation-'] {
-webkit-animation-duration: 0.15s;
animation-duration: 0.15s;
}
[data-uk-sticky].uk-animation-reverse {
-webkit-animation-duration: 0.04s;
animation-duration: 0.04s;
}
/* ========================================================================
Component: Upload
========================================================================== */
/*
* Create a box-shadow when dragging a file over the upload area
*/
.uk-dragover {
box-shadow: 0 0 20px rgba(100, 100, 100, 0.3);
}
/* ========================================================================
Component: Flex
========================================================================== */
.uk-flex {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
/* Alignment
========================================================================== */
/*
* Vertical alignment
* Default value is `stretch`
*/
.uk-flex-top {
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
.uk-flex-middle {
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.uk-flex-bottom {
-ms-flex-align: end;
-webkit-align-items: flex-end;
align-items: flex-end;
}
/*
* Horizontal alignment
* Default value is `flex-start`
*/
.uk-flex-center {
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.uk-flex-right {
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
/* ========================================================================
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%);
}