This commit is contained in:
2025-04-23 10:45:21 +02:00
parent 8030ffb888
commit d17fb46943
716 changed files with 163468 additions and 0 deletions

View File

@@ -0,0 +1,94 @@
// Name: Accordion
// Description: Defines styles for the accordion
//
// Component: `uk-accordion`
//
// Sub-objects: `uk-accordion-title`
// `uk-accordion-content`
//
// Markup:
//
// <!-- uk-accordion -->
// <div class="uk-accordion" data-uk-accordion>
// <h3 class="uk-accordion-title"></h3>
// <div class="uk-accordion-content">
// <p></p>
// </div>
// </div>
//
// ========================================================================
// Variables
// ========================================================================
@accordion-title-margin-bottom: 15px;
@accordion-title-padding-vertical: 5px;
@accordion-title-padding-horizontal: 15px;
@accordion-title-font-size: 18px;
@accordion-title-line-height: 24px;
@accordion-title-background: #eee;
@accordion-content-padding-horizontal: @accordion-title-padding-horizontal;
@accordion-content-padding-bottom: @accordion-title-padding-horizontal;
/* ========================================================================
Component: Accordion
========================================================================== */
.uk-accordion {
.hook-accordion;
}
/* Sub-object: `uk-accordion-title`
========================================================================== */
.uk-accordion-title {
margin-top: 0;
margin-bottom: @accordion-title-margin-bottom;
padding: @accordion-title-padding-vertical @accordion-title-padding-horizontal;
background: @accordion-title-background;
font-size: @accordion-title-font-size;
line-height: @accordion-title-line-height;
cursor: pointer;
.hook-accordion-title;
}
/* Sub-object: `uk-accordion-content`
========================================================================== */
.uk-accordion-content {
padding: 0 @accordion-content-padding-horizontal @accordion-content-padding-bottom @accordion-content-padding-horizontal;
.hook-accordion-content;
}
/*
* Micro clearfix to make panels more robust
*/
.uk-accordion-content:before,
.uk-accordion-content:after {
content: "";
display: table;
}
.uk-accordion-content:after { clear: both; }
/*
* Remove margin from the last-child
*/
.uk-accordion-content > :last-child { margin-bottom: 0; }
// Hooks
// ========================================================================
.hook-accordion-misc;
.hook-accordion() {}
.hook-accordion-title() {}
.hook-accordion-content() {}
.hook-accordion-misc() {}

View File

@@ -0,0 +1,107 @@
// Name: Autocomplete
// Description: Provides suggestions while you type into an input field
//
// Component: `uk-autocomplete`
//
// Modifier: (Nav) `uk-nav-autocomplete`
//
// States: `uk-active`
//
// ========================================================================
// Variables
// ========================================================================
// Nav modifier
@nav-autocomplete-color: #444;
@nav-autocomplete-active-background: #00a8e6;
@nav-autocomplete-active-color: #fff;
@nav-autocomplete-header-color: #999;
@nav-autocomplete-divider-border: #ddd;
@nav-autocomplete-divider-border-width: 1px;
/* ========================================================================
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;
}
/* Legacy dropdown modifier */
.uk-dropdown-flip {
left: auto;
right: 0;
}
/* Nav modifier `uk-nav-autocomplete`
========================================================================== */
/*
* Items
*/
.uk-nav-autocomplete > li > a {
color: @nav-autocomplete-color;
.hook-nav-autocomplete;
}
/*
* Active
* 1. Remove default focus style
*/
.uk-nav-autocomplete > li.uk-active > a {
background: @nav-autocomplete-active-background;
color: @nav-autocomplete-active-color;
/* 1 */
outline: none;
.hook-nav-autocomplete-active;
}
/*
* Sub-object: `uk-nav-header`
*/
.uk-nav-autocomplete .uk-nav-header {
color: @nav-autocomplete-header-color;
.hook-nav-autocomplete-header;
}
/*
* Sub-object: `uk-nav-divider`
*/
.uk-nav-autocomplete .uk-nav-divider {
border-top: @nav-autocomplete-divider-border-width solid @nav-autocomplete-divider-border;
.hook-nav-autocomplete-divider;
}
// Hooks
// ========================================================================
.hook-autocomplete-misc;
.hook-nav-autocomplete() {}
.hook-nav-autocomplete-active() {}
.hook-nav-autocomplete-header() {}
.hook-nav-autocomplete-divider() {}
.hook-autocomplete-misc() {}

View File

@@ -0,0 +1,197 @@
// Name: Datepicker
// Description: Defines styles for a datepicker
//
// Component: `uk-datepicker`
//
// Modifiers: `uk-datepicker-nav`
// `uk-datepicker-previous`
// `uk-datepicker-next`
// `uk-datepicker-heading`
// `uk-datepicker-table`
// `uk-datepicker-table-muted`
//
// ========================================================================
// Variables
// ========================================================================
@datepicker-z-index: 1050;
@datepicker-animation: uk-fade;
@datepicker-nav-height: 20px;
@datepicker-nav-margin-bottom: 15px;
@datepicker-nav-color: #444;
@datepicker-nav-hover-color: #444;
@datepicker-previous-icon: "\f053";
@datepicker-next-icon: "\f054";
@datepicker-table-width: 26px;
@datepicker-table-height: 24px;
@datepicker-table-color: #444;
@datepicker-table-hover-background: #ddd;
@datepicker-table-hover-color: #444;
@datepicker-table-onclick-background: #ccc;
@datepicker-table-onclick-color: #444;
@datepicker-table-active-background: #00a8e6;
@datepicker-table-active-color: #fff;
@datepicker-table-muted-color: #999;
/* ========================================================================
Component: Datepicker
========================================================================== */
/*
* 1. Highest z-index
* 2. Reset dropdown width
* 3. Set animation
* 4. Needed for scale animation
*/
.uk-datepicker {
/* 1 */
z-index: @datepicker-z-index;
/* 2 */
width: auto;
/* 3 */
-webkit-animation: @datepicker-animation 0.2s ease-in-out;
animation: @datepicker-animation 0.2s ease-in-out;
/* 4 */
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
/* Sub-object: `uk-datepicker-nav`
========================================================================== */
.uk-datepicker-nav {
margin-bottom: @datepicker-nav-margin-bottom;
text-align: center;
line-height: @datepicker-nav-height;
.hook-datepicker-nav;
}
/*
* 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: @datepicker-nav-color;
text-decoration: none;
.hook-datepicker-nav-item;
}
.uk-datepicker-nav a:hover { color: @datepicker-nav-hover-color; }
.uk-datepicker-previous { float: left; }
.uk-datepicker-next { float: right; }
.uk-datepicker-previous:after,
.uk-datepicker-next:after {
width: @datepicker-nav-height;
font-family: FontAwesome;
}
.uk-datepicker-previous:after { content: @datepicker-previous-icon; }
.uk-datepicker-next:after { content: @datepicker-next-icon; }
/* Sub-object: `uk-datepicker-heading`
========================================================================== */
.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: @datepicker-table-width;
line-height: @datepicker-table-height;
text-align: center;
color: @datepicker-table-color;
text-decoration: none;
.hook-datepicker-table-item;
}
/*
* Sub-object: `uk-datepicker-table-muted`
*/
a.uk-datepicker-table-muted { color: @datepicker-table-muted-color; }
/*
* Hover
* 1. Apply hover style also to focus state
* 2. Remove default focus style
*/
.uk-datepicker-table a:hover,
.uk-datepicker-table a:focus { // 1
background-color: @datepicker-table-hover-background;
color: @datepicker-table-hover-color;
/* 2 */
outline: none;
.hook-datepicker-table-item-hover;
}
/* OnClick */
.uk-datepicker-table a:active {
background-color: @datepicker-table-onclick-background;
color: @datepicker-table-onclick-color;
.hook-datepicker-table-item-onclick;
}
/*
* Active
*/
.uk-datepicker-table a.uk-active {
background: @datepicker-table-active-background;
color: @datepicker-table-active-color;
.hook-datepicker-table-item-active;
}
// Hooks
// ========================================================================
.hook-datepicker-misc;
.hook-datepicker-nav() {}
.hook-datepicker-nav-item() {}
.hook-datepicker-table-item() {}
.hook-datepicker-table-item-hover() {}
.hook-datepicker-table-item-onclick() {}
.hook-datepicker-table-item-active() {}
.hook-datepicker-misc() {}

View File

@@ -0,0 +1,212 @@
// Name: Dotnav
// Description: Defines styles for a dot navigation
//
// Component: `uk-dotnav`
//
// Modifier: `uk-dotnav-contrast`
// `uk-dotnav-vertical`
//
// States: `uk-active`
//
// Markup:
//
// <!-- uk-dotnav -->
// <ul class="uk-dotnav">
// <li class="uk-active"><a href=""></a></li>
// <li><a href=""></a></li>
// </ul>
//
// ========================================================================
// Variables
// ========================================================================
@dotnav-margin-horizontal: 15px;
@dotnav-margin-vertical: @dotnav-margin-horizontal;
@dotnav-width: 20px;
@dotnav-height: @dotnav-width;
@dotnav-background: rgba(50,50,50,0.1);
@dotnav-hover-background: rgba(50,50,50,0.4);
@dotnav-onclick-background: rgba(50,50,50,0.6);
@dotnav-active-background: rgba(50,50,50,0.4);
@dotnav-contrast-background: rgba(255,255,255,0.4);
@dotnav-contrast-hover-background: rgba(255,255,255,0.7);
@dotnav-contrast-onclick-background: rgba(255,255,255,0.9);
@dotnav-contrast-active-background: rgba(255,255,255,0.9);
/* ========================================================================
Component: Dotnav
========================================================================== */
/*
* 1. Gutter
* 2. Remove default list style
*/
.uk-dotnav {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
/* 1 */
margin-left: -@dotnav-margin-horizontal;
margin-top: -@dotnav-margin-vertical;
/* 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
*/
.uk-dotnav > * {
/* 1 */
-ms-flex: none;
-webkit-flex: none;
flex: none;
/* 2 */
padding-left: @dotnav-margin-horizontal;
margin-top: @dotnav-margin-vertical;
}
/*
* DEPRECATED IE9 Support
*/
.uk-dotnav:before,
.uk-dotnav:after {
content: "";
display: block;
overflow: hidden;
}
.uk-dotnav:after { clear: both; }
.uk-dotnav > * { float: left; }
/* Items
========================================================================== */
/*
* Items
* 1. Hide text if present
*/
.uk-dotnav > * > * {
display: block;
box-sizing: content-box;
width: @dotnav-width;
height: @dotnav-height;
border-radius: 50%;
background: @dotnav-background;
/* 1 */
text-indent: 100%;
overflow: hidden;
white-space: nowrap;
.hook-dotnav-item;
}
/*
* Hover
* 1. Apply hover style also to focus state
* 2. Remove default focus style
*/
.uk-dotnav > * > :hover,
.uk-dotnav > * > :focus { // 1
background: @dotnav-hover-background;
/* 2 */
outline: none;
.hook-dotnav-item-hover;
}
/* OnClick */
.uk-dotnav > * > :active {
background: @dotnav-onclick-background;
.hook-dotnav-item-onclick;
}
/* Active */
.uk-dotnav > .uk-active > * {
background: @dotnav-active-background;
.hook-dotnav-item-active;
}
/* Modifier: `uk-dotnav-contrast`
========================================================================== */
.uk-dotnav-contrast > * > * {
background: @dotnav-contrast-background;
.hook-dotnav-contrast-item;
}
/*
* Hover
* 1. Apply hover style also to focus state
*/
.uk-dotnav-contrast > * > :hover,
.uk-dotnav-contrast > * > :focus { // 1
background: @dotnav-contrast-hover-background;
.hook-dotnav-contrast-item-hover;
}
/* OnClick */
.uk-dotnav-contrast > * > :active {
background: @dotnav-contrast-onclick-background;
.hook-dotnav-contrast-item-onclick;
}
/* Active */
.uk-dotnav-contrast > .uk-active > * {
background: @dotnav-contrast-active-background;
.hook-dotnav-contrast-item-active;
}
/* Modifier: 'uk-dotnav-vertical'
========================================================================== */
/*
* DEPRECATED
*/
.uk-dotnav-vertical {
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
/*
* DEPRECATED IE9 Support
*/
.uk-dotnav-vertical > * { float: none; }
// Hooks
// ========================================================================
.hook-dotnav-misc;
.hook-dotnav-item() {}
.hook-dotnav-item-hover() {}
.hook-dotnav-item-onclick() {}
.hook-dotnav-item-active() {}
.hook-dotnav-contrast-item() {}
.hook-dotnav-contrast-item-hover() {}
.hook-dotnav-contrast-item-onclick() {}
.hook-dotnav-contrast-item-active() {}
.hook-dotnav-misc() {}

View File

@@ -0,0 +1,128 @@
// Name: Form advanced
// Description: Custom appearance of radio and checkbox buttons
//
// Component: `uk-form`
//
// ========================================================================
// Variables
// ========================================================================
@form-advanced-size: 14px;
@form-advanced-border: #aaa;
@form-advanced-border-width: 1px;
@form-advanced-margin-top: -4px;
@form-advanced-color: transparent;
@form-advanced-checked-color: #00a8e6;
@form-advanced-radio-size: 8px;
@form-advanced-checkbox-icon: "\f00c";
@form-advanced-checkbox-indeterminate-icon: "\f068";
@form-advanced-checkbox-font-size: 12px;
@form-advanced-disabled-border: #ddd;
@form-advanced-disabled-color: #aaa;
/* ========================================================================
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: @form-advanced-size;
width: @form-advanced-size;
border: @form-advanced-border-width solid @form-advanced-border;
/* 2 */
overflow: hidden;
/* 3 */
margin-top: @form-advanced-margin-top;
vertical-align: middle;
/* 4 */
-webkit-appearance: none;
outline: 0;
/* 5 */
background: @form-advanced-color;
.hook-form-advanced;
}
/* Radio */
.uk-form input[type="radio"] { border-radius: 50%; }
/*
* Checked
*/
.uk-form input[type=radio]:before,
.uk-form input[type=checkbox]:before {
display: block;
.hook-form-advanced-checked;
}
/* Radio */
.uk-form input[type=radio]:checked:before {
content: '';
width: @form-advanced-radio-size;
height: @form-advanced-radio-size;
margin: ((@form-advanced-size - (2 * @form-advanced-border-width) - @form-advanced-radio-size) / 2) auto 0;
border-radius: 50%;
background: @form-advanced-checked-color;
.hook-form-advanced-radio;
}
/* Checkbox */
.uk-form input[type=checkbox]:checked:before,
.uk-form input[type=checkbox]:indeterminate:before {
content: @form-advanced-checkbox-icon;
font-family: FontAwesome;
font-size: @form-advanced-checkbox-font-size;
-webkit-font-smoothing: antialiased;
text-align: center;
line-height: @form-advanced-size - (2 * @form-advanced-border-width);
color: @form-advanced-checked-color;
.hook-form-advanced-checkbox;
}
.uk-form input[type=checkbox]:indeterminate:before { content: @form-advanced-checkbox-indeterminate-icon; }
/*
* Disabled
*/
.uk-form input[type=radio]:disabled,
.uk-form input[type=checkbox]:disabled {
border-color: @form-advanced-disabled-border;
.hook-form-advanced-disabled;
}
.uk-form input[type=radio]:disabled:checked:before { background-color: @form-advanced-disabled-color; }
.uk-form input[type=checkbox]:disabled:checked:before,
.uk-form input[type=checkbox]:disabled:indeterminate:before { color: @form-advanced-disabled-color; }
// Hooks
// ========================================================================
.hook-form-advanced-misc;
.hook-form-advanced() {}
.hook-form-advanced-checked() {}
.hook-form-advanced-radio() {}
.hook-form-advanced-checkbox() {}
.hook-form-advanced-disabled() {}
.hook-form-advanced-misc() {}

View File

@@ -0,0 +1,63 @@
// Name: Form file
// Description: Extends form component
//
// Component: `uk-form`
//
// Sub-objects: `uk-form-file`
//
// Markup:
//
// <!-- uk-form-file -->
// <div class="uk-form-file">
// <button class="uk-button"></button>
// <input type="file">
// </div>
//
// ========================================================================
/* ========================================================================
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;
}
// Hooks
// ========================================================================
.hook-form-file-misc;
.hook-form-file-misc() {}

View File

@@ -0,0 +1,74 @@
// Name: Form password
// Description: Extends form component
//
// Component: `uk-form`
//
// Sub-objects: `uk-form-password`
//
// Markup:
//
// <!-- uk-form-password -->
// <form class="uk-form">
// <div class="uk-form-password">
// <input type="password">
// <a href="" class="uk-form-password-toggle" data-uk-form-password></a>
// </div>
// </form>
//
// ========================================================================
// Variables
// ========================================================================
@form-password-font-size: 13px;
@form-password-line-height: @form-password-font-size;
@form-password-color: #999;
@form-password-hover-color: #999;
@form-password-padding: 50px;
/* ========================================================================
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: -(floor(@form-password-line-height/2));
font-size: @form-password-font-size;
line-height: @form-password-line-height;
color: @form-password-color;
}
.uk-form-password-toggle:hover {
color: @form-password-hover-color;
text-decoration: none;
}
.uk-form-password > input { padding-right: @form-password-padding !important; }
// Hooks
// ========================================================================
.hook-form-password-misc;
.hook-form-password-misc() {}

View File

@@ -0,0 +1,66 @@
// Name: Form select
// Description: Extends form component
//
// Component: `uk-form`
//
// Sub-objects: `uk-form-select`
//
// Markup:
//
// <!-- uk-form-select -->
// <div class="uk-form-select" data-uk-form-select>
// <span></span>
// <select>
// <option value=""></option>
// </select>
// </div>
//
// ========================================================================
/* ========================================================================
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;
}
// Hooks
// ========================================================================
.hook-form-select-misc;
.hook-form-select-misc() {}

View File

@@ -0,0 +1,269 @@
// Name: HTML editor
// Description: Defines styles for an HTML editor
//
// Component: `uk-htmleditor`
//
// Sub-objects: `uk-htmleditor-navbar`
// `uk-htmleditor-navbar-nav`
// `uk-htmleditor-navbar-flip`
// `uk-htmleditor-button-code
// `uk-htmleditor-button-preview`
// `uk-htmleditor-content`
// `uk-htmleditor-code`
// `uk-htmleditor-preview`
// `uk-htmleditor-iframe`
//
// Modifier: `uk-htmleditor-fullscreen`
// `[data-mode='tab']`
// `[data-mode='split']`
//
// States: `uk-active`
//
// ========================================================================
// Variables
// ========================================================================
@htmleditor-navbar-background: #eee;
@htmleditor-navbar-nav-height: 40px;
@htmleditor-navbar-nav-padding-horizontal: 15px;
@htmleditor-navbar-nav-line-height: @htmleditor-navbar-nav-height;
@htmleditor-navbar-nav-color: #444;
@htmleditor-navbar-nav-hover-background: #f5f5f5;
@htmleditor-navbar-nav-hover-color: #444;
@htmleditor-navbar-nav-onclick-background: #ddd;
@htmleditor-navbar-nav-onclick-color: #444;
@htmleditor-navbar-nav-active-background: #f5f5f5;
@htmleditor-navbar-nav-active-color: #444;
@htmleditor-content-border: #ddd;
@htmleditor-content-background: #fff;
@htmleditor-content-padding: 20px;
@htmleditor-content-split-border: #eee;
@htmleditor-fullscreen-z-index: 990;
@htmleditor-fullscreen-content-top: @htmleditor-navbar-nav-height;
@htmleditor-fullscreen-icon-resize: "\f066";
/* ========================================================================
Component: HTML editor
========================================================================== */
.uk-htmleditor {
.hook-htmleditor;
}
/* Sub-object `uk-htmleditor-navbar`
========================================================================== */
.uk-htmleditor-navbar {
background: @htmleditor-navbar-background;
.hook-htmleditor-navbar;
}
/*
* 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;
box-sizing: border-box;
text-decoration: none;
/* 1 */
height: @htmleditor-navbar-nav-height;
padding: 0 @htmleditor-navbar-nav-padding-horizontal;
line-height: @htmleditor-navbar-nav-line-height;
/* 2 */
color: @htmleditor-navbar-nav-color;
font-size: 11px;
cursor: pointer;
.hook-htmleditor-navbar-nav;
}
/*
* 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 { // 1
background-color: @htmleditor-navbar-nav-hover-background;
color: @htmleditor-navbar-nav-hover-color;
outline: none; /* 2 */
.hook-htmleditor-navbar-nav-hover;
}
/* OnClick */
.uk-htmleditor-navbar-nav > li > a:active {
background-color: @htmleditor-navbar-nav-onclick-background;
color: @htmleditor-navbar-nav-onclick-color;
.hook-htmleditor-navbar-nav-onclick;
}
/* Active */
.uk-htmleditor-navbar-nav > li.uk-active > a {
background-color: @htmleditor-navbar-nav-active-background;
color: @htmleditor-navbar-nav-active-color;
.hook-htmleditor-navbar-nav-active;
}
/* 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 @htmleditor-content-border;
border-right: 1px solid @htmleditor-content-border;
border-bottom: 1px solid @htmleditor-content-border;
background: @htmleditor-content-background;
.hook-htmleditor-content;
}
/*
* 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: @htmleditor-fullscreen-z-index;
}
.uk-htmleditor-fullscreen .uk-htmleditor-content {
position: absolute;
top: @htmleditor-fullscreen-content-top;
left: 0;
right: 0;
bottom: 0;
}
.uk-htmleditor-fullscreen .uk-icon-expand:before { content: @htmleditor-fullscreen-icon-resize; }
/* Sub-objects `uk-htmleditor-code` and `uk-htmleditor-preview`
========================================================================== */
.uk-htmleditor-code,
.uk-htmleditor-preview { box-sizing: border-box; }
.uk-htmleditor-preview {
padding: @htmleditor-content-padding;
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 @htmleditor-content-split-border; }
/* 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;
box-sizing: border-box;
}
// Hooks
// ========================================================================
.hook-htmleditor-misc;
.hook-htmleditor() {}
.hook-htmleditor-navbar() {}
.hook-htmleditor-navbar-nav() {}
.hook-htmleditor-navbar-nav-hover() {}
.hook-htmleditor-navbar-nav-onclick() {}
.hook-htmleditor-navbar-nav-active() {}
.hook-htmleditor-content() {}
.hook-htmleditor-misc() {}

View File

@@ -0,0 +1,231 @@
// Name: Nestable
// Description: Defines styles for nestable lists
//
// Component: `uk-nestable`
//
// Sub-objects: `uk-nestable-list`
// `uk-nestable-item`
// `uk-nestable-handle`
// `uk-nestable-moving`
// `uk-nestable-toggle`
// `uk-nestable-panel`
//
// Modifier: `uk-nestable-dragged`
// `uk-nestable-placeholder`
//
// States: `uk-parent`
// `uk-collapsed`
//
// Markup:
//
// <!-- uk-nestable -->
// <ul class="uk-nestable" data-uk-nestable>
// <li></li>
// <li></li>
// </ul>
//
// ========================================================================
// Variables
// ========================================================================
@nestable-padding-left: 40px;
@nestable-item-margin: 10px;
@nestable-dragged-z-index: 1050;
@nestable-placeholder-border: #ddd;
@nestable-empty-height: 30px;
@nestable-toggle-icon: "\f147";
@nestable-toggle-collapsed-icon: "\f196";
@nestable-panel-padding: 5px;
@nestable-panel-background: #f5f5f5;
/* ========================================================================
Component: Nestable
========================================================================== */
.uk-nestable {
padding: 0;
list-style: none;
.hook-nestable;
}
/*
* Disables the default callout shown when you touch and hold a touch target
* Currently only works in Webkit
*/
.uk-nestable a,
.uk-nestable img { -webkit-touch-callout: none; }
/* Sub-object `uk-nestable-list`
========================================================================== */
.uk-nestable-list {
margin: 0;
padding-left: @nestable-padding-left;
list-style: none;
}
/* Sub-modifier `uk-nestable-item`
========================================================================== */
/*
* 1. Deactivate browser touch actions in IE11
*/
.uk-nestable-item {
/* 1 */
touch-action: none;
.hook-nestable-item;
}
.uk-nestable-item + .uk-nestable-item { margin-top: @nestable-item-margin; }
.uk-nestable-list:not(.uk-nestable-dragged) > .uk-nestable-item:first-child { margin-top: @nestable-item-margin; }
/* Sub-modifier `uk-nestable-dragged`
========================================================================== */
/*
* 1. Reset style
*/
.uk-nestable-dragged {
position: absolute;
z-index: @nestable-dragged-z-index;
pointer-events: none;
/* 1 */
padding-left: 0;
.hook-nestable-dragged;
}
/* Sub-modifier `uk-nestable-placeholder`
========================================================================== */
.uk-nestable-placeholder { position: relative; }
.uk-nestable-placeholder > * { opacity: 0; }
.uk-nestable-placeholder:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: 1px dashed @nestable-placeholder-border;
opacity: 1;
.hook-nestable-placeholder;
}
/* Empty List
========================================================================== */
.uk-nestable-empty {
min-height: @nestable-empty-height;
.hook-nestable-empty;
}
/* Sub-object `uk-nestable-handle`
========================================================================== */
/*
* Deactivate browser touch actions in IE11
*/
.uk-nestable-handle { touch-action: none; }
/* Hover */
.uk-nestable-handle:hover { cursor: move; }
/* Sub-object `uk-nestable-moving`
========================================================================== */
.uk-nestable-moving,
/* Needed if moving over links or buttons */
.uk-nestable-moving * { cursor: move; }
/* Fixes dragging items over iframes */
.uk-nestable-moving iframe { pointer-events: none; }
/* [data-nestable-action='toggle']
========================================================================== */
/*
* 1. Makes text unselectable. Happens if double clicked by mistake
*/
[data-nestable-action='toggle'] {
cursor: pointer;
/* 1 */
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Sub-object `.uk-nestable-toggle`
========================================================================== */
.uk-nestable-toggle {
display: inline-block;
visibility: hidden;
.hook-nestable-toggle;
}
.uk-nestable-toggle:after {
content: @nestable-toggle-icon;
font-family: FontAwesome;
}
.uk-parent > :not(.uk-nestable-list) .uk-nestable-toggle { visibility: visible; }
/*
* Collapsed
*/
.uk-collapsed .uk-nestable-list { display: none; }
.uk-collapsed .uk-nestable-toggle:after { content: @nestable-toggle-collapsed-icon; }
/* Sub-object `uk-nestable-panel`
========================================================================== */
.uk-nestable-panel {
padding: @nestable-panel-padding;
background: @nestable-panel-background;
.hook-nestable-panel;
}
// Hooks
// ========================================================================
.hook-nestable-misc;
.hook-nestable() {}
.hook-nestable-item() {}
.hook-nestable-dragged() {}
.hook-nestable-placeholder() {}
.hook-nestable-empty() {}
.hook-nestable-handle() {}
.hook-nestable-toggle() {}
.hook-nestable-panel() {}
.hook-nestable-misc() {}

View File

@@ -0,0 +1,190 @@
// Name: Notify
// Description: Defines styles for toggleable notifications
//
// Component: `uk-notify`
//
// Sub-objects: `uk-notify-message`
//
// Modifiers: `uk-notify-top-center`
// `uk-notify-top-right`
// `uk-notify-bottom-left`
// `uk-notify-bottom-center`
// `uk-notify-bottom-right`
// `uk-notify-message-primary`
// `uk-notify-message-success`
// `uk-notify-message-warning`
// `uk-notify-message-danger`
//
// Uses: Close: `uk-close`
//
// ========================================================================
// Variables
// ========================================================================
@notify-position: 10px;
@notify-z-index: 1040;
@notify-width: 350px;
@notify-message-margin-bottom: 10px;
@notify-message-padding: 15px;
@notify-message-background: #444;
@notify-message-color: #fff;
@notify-message-font-size: 16px;
@notify-message-line-height: 22px;
@notify-message-primary-background: #ebf7fd;
@notify-message-primary-color: #2d7091;
@notify-message-success-background: #f2fae3;
@notify-message-success-color: #659f13;
@notify-message-warning-background: #fffceb;
@notify-message-warning-color: #e28327;
@notify-message-danger-background: #fff1f0;
@notify-message-danger-color: #d85030;
/* ========================================================================
Component: Notify
========================================================================== */
/*
* Message container for positioning
*/
.uk-notify {
position: fixed;
top: @notify-position;
left: @notify-position;
z-index: @notify-z-index;
box-sizing: border-box;
width: @notify-width;
.hook-notify;
}
/* Position modifiers
========================================================================== */
.uk-notify-top-right,
.uk-notify-bottom-right {
left: auto;
right: @notify-position;
}
.uk-notify-top-center,
.uk-notify-bottom-center {
left: 50%;
margin-left: (@notify-width / -2);
}
.uk-notify-bottom-left,
.uk-notify-bottom-right,
.uk-notify-bottom-center {
top: auto;
bottom: @notify-position;
}
/* Responsiveness
========================================================================== */
/* Phones portrait and smaller */
@media (max-width: @breakpoint-mini-max) {
/*
* 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: @notify-message-margin-bottom;
padding: @notify-message-padding;
background: @notify-message-background;
color: @notify-message-color;
font-size: @notify-message-font-size;
line-height: @notify-message-line-height;
cursor: pointer;
.hook-notify-message;
}
/* Close in notify
========================================================================== */
.uk-notify-message > .uk-close {
visibility: hidden;
float: right;
}
.uk-notify-message:hover > .uk-close { visibility: visible; }
/* Modifier: `uk-notify-message-primary`
========================================================================== */
.uk-notify-message-primary {
background: @notify-message-primary-background;
color: @notify-message-primary-color;
.hook-notify-message-primary;
}
/* Modifier: `uk-notify-message-success`
========================================================================== */
.uk-notify-message-success {
background: @notify-message-success-background;
color: @notify-message-success-color;
.hook-notify-message-success;
}
/* Modifier: `uk-notify-message-warning`
========================================================================== */
.uk-notify-message-warning {
background: @notify-message-warning-background;
color: @notify-message-warning-color;
.hook-notify-message-warning;
}
/* Modifier: `uk-notify-message-danger`
========================================================================== */
.uk-notify-message-danger {
background: @notify-message-danger-background;
color: @notify-message-danger-color;
.hook-notify-message-danger;
}
// Hooks
// ========================================================================
.hook-notify-misc;
.hook-notify() {}
.hook-notify-message() {}
.hook-notify-message-primary() {}
.hook-notify-message-success() {}
.hook-notify-message-warning() {}
.hook-notify-message-danger() {}
.hook-notify-misc() {}

View File

@@ -0,0 +1,66 @@
// Name: Placeholder
// Description: Defines styles for placeholder boxes
//
// Component: `uk-placeholder`
//
// Modifiers: `uk-placeholder-large`
//
// ========================================================================
// Variables
// ========================================================================
@placeholder-margin-vertical: 15px;
@placeholder-padding: 20px;
@placeholder-border: #ddd;
@placeholder-background: #fafafa;
@placeholder-color: #444;
@placeholder-large-padding-vertical: 80px;
/* ========================================================================
Component: Placeholder
========================================================================== */
.uk-placeholder {
margin-bottom: @placeholder-margin-vertical;
padding: @placeholder-padding;
border: 1px dashed @placeholder-border;
background: @placeholder-background;
color: @placeholder-color;
.hook-placeholder;
}
/*
* Add margin if adjacent element
*/
* + .uk-placeholder { margin-top: @placeholder-margin-vertical; }
/*
* Remove margin from the last-child
*/
.uk-placeholder > :last-child { margin-bottom: 0; }
/* Modifier: `uk-placeholder-large`
========================================================================== */
.uk-placeholder-large {
padding-top: @placeholder-large-padding-vertical;
padding-bottom: @placeholder-large-padding-vertical;
.hook-placeholder-large;
}
// Hooks
// ========================================================================
.hook-placeholder-misc;
.hook-placeholder() {}
.hook-placeholder-large() {}
.hook-placeholder-misc() {}

View File

@@ -0,0 +1,173 @@
// Name: Progress
// Description: Defines styles for progress bars
//
// Component: `uk-progress`
//
// Sub-objects: `uk-progress-bar`
//
// Modifiers: `uk-progress-mini`
// `uk-progress-small`
// `uk-progress-success`
// `uk-progress-warning`
// `uk-progress-danger`
// `uk-progress-striped`
//
// Markup:
//
// <!-- uk-progress -->
// <div class="uk-progress">
// <div class="uk-progress-bar" style="width: 40%;"></div>
// </div>
//
// ========================================================================
// Variables
// ========================================================================
@progress-height: 20px;
@progress-mini-height: 6px;
@progress-small-height: 12px;
@progress-margin-vertical: 15px;
@progress-background: #eee;
@progress-bar-background: #00a8e6;
@progress-bar-font-size: 12px;
@progress-bar-color: #fff;
@progress-bar-success-background: #8cc14c;
@progress-bar-warning-background: #faa732;
@progress-bar-danger-background: #da314b;
/* ========================================================================
Component: Progress
========================================================================== */
/*
* 1. Clearing
* 2. Vertical alignment if text is used
*/
.uk-progress {
box-sizing: border-box;
height: @progress-height;
margin-bottom: @progress-margin-vertical;
background: @progress-background;
/* 1 */
overflow: hidden;
/* 2 */
line-height: @progress-height;
.hook-progress;
}
/*
* Add margin if adjacent element
*/
* + .uk-progress { margin-top: @progress-margin-vertical; }
/* Sub-object: `uk-progress-bar`
========================================================================== */
/*
* 1. Transition
* 2. Needed for text
*/
.uk-progress-bar {
width: 0;
height: 100%;
background: @progress-bar-background;
float: left;
/* 1 */
-webkit-transition: width 0.6s ease;
transition: width 0.6s ease;
/* 2 */
font-size: @progress-bar-font-size;
color: @progress-bar-color;
text-align: center;
.hook-progress-bar;
}
/* Size modifiers
========================================================================== */
/* Mini */
.uk-progress-mini {
height: @progress-mini-height;
.hook-progress-mini;
}
/* Small */
.uk-progress-small {
height: @progress-small-height;
.hook-progress-small;
}
/* Color modifiers
========================================================================== */
.uk-progress-success .uk-progress-bar {
background-color: @progress-bar-success-background;
.hook-progress-bar-success;
}
.uk-progress-warning .uk-progress-bar {
background-color: @progress-bar-warning-background;
.hook-progress-bar-warning;
}
.uk-progress-danger .uk-progress-bar {
background-color: @progress-bar-danger-background;
.hook-progress-bar-danger;
}
/* Modifier: `uk-progress-striped`
========================================================================== */
.uk-progress-striped .uk-progress-bar {
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-size: 30px 30px;
}
/*
* Animation
*/
.uk-progress-striped.uk-active .uk-progress-bar {
-webkit-animation: uk-progress-bar-stripes 2s linear infinite;
animation: uk-progress-bar-stripes 2s linear infinite;
}
@-webkit-keyframes uk-progress-bar-stripes {
0% { background-position: 0 0;}
100% { background-position: 30px 0; }
}
@keyframes uk-progress-bar-stripes {
0% { background-position: 0 0;}
100% { background-position: 30px 0; }
}
// Hooks
// ========================================================================
.hook-progress-misc;
.hook-progress() {}
.hook-progress-bar() {}
.hook-progress-mini() {}
.hook-progress-small() {}
.hook-progress-bar-success() {}
.hook-progress-bar-warning() {}
.hook-progress-bar-danger() {}
.hook-progress-misc() {}

View File

@@ -0,0 +1,309 @@
// Name: Search
// Description: Defines a search component
//
// Component: `uk-search`
//
// Sub-objects: `uk-search-field`
//
// Modifier: (Nav) `uk-nav-search`
// (Dropdown) `uk-dropdown-search`
//
// States: `uk-active`
// `uk-loading`
//
// Uses: Animation
// Icon: FontAwesome
// Navbar: `uk-navbar-flip`
//
// Used by: Off-canvas
//
// Markup:
//
// <!-- uk-search -->
// <form class="uk-search" data-uk-search>
// <input class="uk-search-field" type="search" placeholder="">
// </form>
//
// ========================================================================
// Variables
// ========================================================================
@search-width: 120px;
@search-focus-width: 180px;
@search-height: 30px;
@search-padding: 30px;
@search-border: rgba(0,0,0,0);
@search-border-width: 1px;
@search-background: rgba(0,0,0,0);
@search-color: #444;
@search-placeholder-color: #999;
@search-icon: "\f002";
@search-icon-size: 14px;
@search-icon-color: rgba(0,0,0,0.2);
// Dropdown modifier
@dropdown-search-width: 300px;
@dropdown-search-margin-top: 0;
@dropdown-search-background: #f5f5f5;
@dropdown-search-color: #444;
@dropdown-search-animation: uk-slide-top-fixed;
@dropdown-search-navbar-margin-top: 5px;
@dropdown-search-navbar-margin-right: -15px;
// Nav modifier
@nav-search-color: #444;
@nav-search-active-background: #00a8e6;
@nav-search-active-color: #fff;
@nav-search-header-color: #999;
@nav-search-divider-border: #ddd;
@nav-search-divider-border-width: 1px;
@nav-search-nested-color: #07D;
@nav-search-nested-hover-color: #059;
// Search in offcanvas
@offcanvas-search-margin: 20px 15px;
@offcanvas-search-background: #1a1a1a;
@offcanvas-search-border: rgba(0,0,0,0);
@offcanvas-search-color: #ccc;
@offcanvas-search-placeholder-color: #777;
@offcanvas-search-icon-color: #777;
/* ========================================================================
Component: Search
========================================================================== */
/*
* 1. Create position context for dropdowns
* 2. Needed for `form` element
*/
.uk-search {
display: inline-block;
/* 1 */
position: relative;
/* 2 */
margin: 0;
.hook-search;
}
/*
* Icon
*/
.uk-search:before {
content: @search-icon;
position: absolute;
top: 0;
left: 0;
width: @search-padding;
line-height: @search-height;
text-align: center;
font-family: FontAwesome;
font-size: @search-icon-size;
color: @search-icon-color;
.hook-search-icon;
}
/* Sub-object `uk-search-field`
========================================================================== */
/*
* Removes inner padding and border in Firefox 4+.
*/
.uk-search-field::-moz-focus-inner {
border: 0;
padding: 0;
}
/*
* Remove inner padding and search cancel button in Chrome, Safari and Opera on OS X.
*/
.uk-search-field::-webkit-search-cancel-button,
.uk-search-field::-webkit-search-decoration { -webkit-appearance: none; }
/*
* Removes cancel button in IE10
*/
.uk-search-field::-ms-clear { display: none; }
/*
* Removes placeholder transparency in Firefox.
*/
.uk-search-field::-moz-placeholder { opacity: 1; }
/*
* 1. Define consistent box sizing.
* 2. Address margins set differently in Firefox/IE and Chrome/Safari/Opera.
* 3. Remove `border-radius` in iOS.
* 4. Correct `font` properties and `color` not being inherited.
* 5. Remove default style in iOS.
* 6. Style
*/
.uk-search-field {
/* 1 */
box-sizing: border-box;
/* 2 */
margin: 0;
/* 3 */
border-radius: 0;
/* 4 */
font: inherit;
color: @search-color;
/* 5 */
-webkit-appearance: none;
/* 6 */
width: @search-width;
height: @search-height;
padding: 0 0 0 @search-padding;
border: @search-border-width solid @search-border;
background: @search-background;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
vertical-align: middle;
.hook-search-field;
}
/* Placeholder */
.uk-search-field:-ms-input-placeholder { color: @search-placeholder-color !important; }
.uk-search-field::-moz-placeholder { color: @search-placeholder-color; }
.uk-search-field::-webkit-input-placeholder { color: @search-placeholder-color; }
/* Focus */
.uk-search-field:focus {
outline: 0;
.hook-search-field-focus;
}
/* Focus + Active */
.uk-search-field:focus,
.uk-search.uk-active .uk-search-field { width: @search-focus-width; }
/* Dropdown modifier: `uk-dropdown-search`
========================================================================== */
.uk-dropdown-search {
width: @dropdown-search-width;
margin-top: @dropdown-search-margin-top;
background: @dropdown-search-background;
color: @dropdown-search-color;
.hook-dropdown-search;
}
.uk-open > .uk-dropdown-search {
-webkit-animation: @dropdown-search-animation 0.2s ease-in-out;
animation: @dropdown-search-animation 0.2s ease-in-out;
}
/*
* Dependency `uk-navbar-flip`
*/
.uk-navbar-flip .uk-dropdown-search {
margin-top: @dropdown-search-navbar-margin-top;
margin-right: @dropdown-search-navbar-margin-right;
}
/* Nav modifier `uk-nav-search`
========================================================================== */
/*
* Items
*/
.uk-nav-search > li > a {
color: @nav-search-color;
.hook-nav-search;
}
/*
* Active
* 1. Remove default focus style
*/
.uk-nav-search > li.uk-active > a {
background: @nav-search-active-background;
color: @nav-search-active-color;
/* 1 */
outline: none;
.hook-nav-search-active;
}
/*
* Sub-object: `uk-nav-header`
*/
.uk-nav-search .uk-nav-header {
color: @nav-search-header-color;
.hook-nav-search-header;
}
/*
* Sub-object: `uk-nav-divider`
*/
.uk-nav-search .uk-nav-divider {
border-top: @nav-search-divider-border-width solid @nav-search-divider-border;
.hook-nav-search-divider;
}
/*
* Nested items
*/
.uk-nav-search ul a { color: @nav-search-nested-color; }
.uk-nav-search ul a:hover { color: @nav-search-nested-hover-color; }
/* Search in offcanvas
========================================================================== */
.uk-offcanvas .uk-search {
display: block;
margin: @offcanvas-search-margin;
}
.uk-offcanvas .uk-search:before { color: @offcanvas-search-icon-color; }
.uk-offcanvas .uk-search-field {
width: 100%;
border-color: @offcanvas-search-border;
background: @offcanvas-search-background;
color: @offcanvas-search-color;
.hook-offcanvas-search-field;
}
.uk-offcanvas .uk-search-field:-ms-input-placeholder { color: @offcanvas-search-placeholder-color !important; }
.uk-offcanvas .uk-search-field::-moz-placeholder { color: @offcanvas-search-placeholder-color; }
.uk-offcanvas .uk-search-field::-webkit-input-placeholder { color: @offcanvas-search-placeholder-color; }
// Hooks
// ========================================================================
.hook-search-misc;
.hook-search() {}
.hook-search-icon() {}
.hook-search-field() {}
.hook-search-field-focus() {}
.hook-dropdown-search() {}
.hook-nav-search() {}
.hook-nav-search-active() {}
.hook-nav-search-header() {}
.hook-nav-search-divider() {}
.hook-offcanvas-search-field() {}
.hook-search-misc() {}

View File

@@ -0,0 +1,183 @@
// Name: Slidenav
// Description: Defines styles for a previous/next navigation between slides
//
// Component: `uk-slidenav`
//
// Modifiers: `uk-slidenav-previous`
// `uk-slidenav-next`
// `uk-slidenav-contrast`
//
// Sub-objects: `uk-slidenav-position`
//
// Uses: Icon: FontAwesome
//
// Markup:
//
// <!-- uk-slidenav -->
// <a href="" class="uk-slidenav uk-slidenav-previous"></a>
// <a href="" class="uk-slidenav uk-slidenav-next"></a>
//
// <!-- uk-slidenav-position -->
// <div class="uk-slidenav-position">
// <img src="" alt="">
// <a href="" class="uk-slidenav uk-slidenav-previous"></a>
// <a href="" class="uk-slidenav uk-slidenav-next"></a>
// </div>
//
// ========================================================================
// Variables
// ========================================================================
@slidenav-width: 60px;
@slidenav-height: @slidenav-width;
@slidenav-color: rgba(50,50,50,0.4);
@slidenav-font-size: 60px;
@slidenav-line-height: @slidenav-height;
@slidenav-previous-icon: "\f104";
@slidenav-next-icon: "\f105";
@slidenav-hover-color: rgba(50,50,50,0.7);
@slidenav-active-color: rgba(50,50,50,0.9);
@slidenav-position-previous: 20px;
@slidenav-position-next: @slidenav-position-previous;
@slidenav-contrast-color: rgba(255,255,255,0.5);
@slidenav-contrast-hover-color: rgba(255,255,255,0.7);
@slidenav-contrast-active-color: rgba(255,255,255,0.9);
/* ========================================================================
Component: Slidenav
========================================================================== */
/*
* 1. Required for `a` elements
* 2. Dimension
* 3. Style
*/
.uk-slidenav {
/* 1 */
display: inline-block;
/* 2 */
box-sizing: border-box;
width: @slidenav-width;
height: @slidenav-height;
/* 3 */
line-height: @slidenav-line-height;
color: @slidenav-color;
font-size: @slidenav-font-size;
text-align: center;
.hook-slidenav;
}
/*
* 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 { // 1
/* 2 */
outline: none;
/* 3 */
text-decoration: none;
/* 4 */
color: @slidenav-hover-color;
cursor: pointer;
.hook-slidenav-hover;
}
/* Active */
.uk-slidenav:active {
color: @slidenav-active-color;
.hook-slidenav-active;
}
/*
* Icons
*/
.uk-slidenav-previous:before {
content: @slidenav-previous-icon;
font-family: FontAwesome;
}
.uk-slidenav-next:before {
content: @slidenav-next-icon;
font-family: FontAwesome;
}
/* Sub-object: `uk-slidenav-position`
========================================================================== */
/*
* Create position context
*/
.uk-slidenav-position { position: relative; }
/*
* Center vertically
*/
.uk-slidenav-position .uk-slidenav {
display: none;
position: absolute;
top: 50%;
z-index: 1;
margin-top: -(@slidenav-height / 2);
}
.uk-slidenav-position:hover .uk-slidenav { display: block; }
.uk-slidenav-position .uk-slidenav-previous { left: @slidenav-position-previous; }
.uk-slidenav-position .uk-slidenav-next { right: @slidenav-position-next; }
/* Modifier: `uk-slidenav-contrast`
========================================================================== */
.uk-slidenav-contrast {
color: @slidenav-contrast-color;
.hook-slidenav-contrast;
}
/*
* Hover
* 1. Apply hover style also to focus state
*/
.uk-slidenav-contrast:hover,
.uk-slidenav-contrast:focus { // 1
color: @slidenav-contrast-hover-color;
.hook-slidenav-contrast-hover;
}
/* Active */
.uk-slidenav-contrast:active {
color: @slidenav-contrast-active-color;
.hook-slidenav-contrast-active;
}
// Hooks
// ========================================================================
.hook-slidenav-misc;
.hook-slidenav() {}
.hook-slidenav-hover() {}
.hook-slidenav-active() {}
.hook-slidenav-contrast() {}
.hook-slidenav-contrast-hover() {}
.hook-slidenav-contrast-active() {}
.hook-slidenav-misc() {}

View File

@@ -0,0 +1,139 @@
// Name: Slider
// Description: Defines styles for a horizontal slider
//
// Component: `uk-slider`
//
// Sub-objects: `uk-slider-container`
//
// Modifier: `uk-slider-fullscreen`
//
// States: `uk-drag`
//
// Markup:
//
// <!-- uk-slider -->
// <div data-uk-slider>
// <div class="uk-slider-container">
// <ul class="uk-slider">
// <li></li>
// <li></li>
// </ul>
// </div>
// </div>
//
// ========================================================================
/* ========================================================================
Component: Slider
========================================================================== */
/*
* RTL Compatibility
*/
[data-uk-slider] { direction: ltr; }
html[dir="rtl"] .uk-slider > * { direction: rtl; }
/*
* 1. Create position context
* 2. Create stacking context to prevent z-index issues with other components
* 3. Deactivate browser history navigation in IE11
*/
.uk-slider {
/* 1 */
position: relative;
/* 2 */
z-index: 0;
/* 3 */
touch-action: pan-y;
}
/*
* 1. Reset list style without interfering with grid
*/
.uk-slider:not(.uk-grid) {
/* 1 */
margin: 0;
padding: 0;
list-style: none;
}
/*
* Sub-object item
* 1. Position items above each other
*/
.uk-slider > * {
/* 1 */
position: absolute;
top: 0;
left: 0;
}
/*
* Clip child elements
*/
.uk-slider-container { overflow: hidden; }
/*
* Dragged
*/
.uk-slider:not(.uk-drag) {
-webkit-transition: -webkit-transform 200ms linear;
transition: transform 200ms linear;
}
/*
* 1. Makes text unselectable
*/
.uk-slider.uk-drag {
cursor: col-resize;
/* 1 */
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
/*
* 1. Prevents images and links from being dragged (default browser behavior)
* 2. Disables the default callout shown when you touch and hold a touch target
* Currently only works in Webkit
*/
.uk-slider a,
.uk-slider img {
/* 1 */
-webkit-user-drag: none;
user-drag: none;
/* 2 */
-webkit-touch-callout: none;
}
/*
* 1. Prevents images and links from being dragged in Firefox
*/
.uk-slider img { pointer-events: none; }
/* Modifier: `uk-slider-fullscreen`
========================================================================== */
.uk-slider-fullscreen,
.uk-slider-fullscreen > li { height: 100vh; }
// Hooks
// ========================================================================
.hook-slider-misc;
.hook-slider-misc() {}

View File

@@ -0,0 +1,208 @@
// Name: Slideshow
// Description: Defines styles for a slideshow
//
// Component: `uk-slideshow`
//
// Modifier: `uk-slideshow-fullscreen`
//
// Sub-modifier: `uk-slideshow-fade-out`
// `uk-slideshow-scroll-forward-in`
// `uk-slideshow-scroll-forward-out`
// `uk-slideshow-scroll-backward-in`
// `uk-slideshow-scroll-backward-out`
// `uk-slideshow-scale-out`
// `uk-slideshow-swipe-forward-in`
// `uk-slideshow-swipe-forward-out`
// `uk-slideshow-swipe-backward-in`
// `uk-slideshow-swipe-backward-out`
//
// States: `uk-active`
//
// Uses: Cover (JS)
//
// Markup:
//
// <!-- uk-slideshow -->
// <ul class="uk-slideshow" data-uk-slideshow>
// <li><img src="" width="" height="" alt=""></li>
// </ul>
//
// ========================================================================
/* ========================================================================
Component: Slideshow
========================================================================== */
/*
* 1. Create position context
* 2. Create stacking context to prevent z-index issues with other components
* 3. Set width because child elements are positioned absolute. Height is set via JS
* 4. Reset list style
* 5. Clip child elements
* 6. Deactivate browser history navigation in IE11
*/
.uk-slideshow {
/* 1 */
position: relative;
/* 2 */
z-index: 0;
/* 3 */
width: 100%;
/* 4 */
margin: 0;
padding: 0;
list-style: none;
/* 5 */
overflow: hidden;
/* 6 */
touch-action: pan-y;
}
/*
* Sub-object item
* 1. Position items above each other
* 2. Expand to parent container width
* 3. Hide by default
*/
.uk-slideshow > li {
/* 1 */
position: absolute;
top: 0;
left: 0;
/* 2 */
width: 100%;
/* 3 */
opacity: 0;
}
/*
* Active
* 1. Stack at first
* 2. Show slide
*/
.uk-slideshow > .uk-active {
/* 1 */
z-index: 10;
/* 2 */
opacity: 1;
}
/*
* Hide default images which is only relevant to keep existing proportions
*/
.uk-slideshow > li > img { visibility: hidden; }
/*
* Pointer for controls
*/
[data-uk-slideshow-slide] { cursor: pointer; }
/* Modifier: `uk-slideshow-fullscreen`
========================================================================== */
.uk-slideshow-fullscreen,
.uk-slideshow-fullscreen > li { height: 100vh; }
/* Animations
========================================================================== */
/*
* Fade
*/
.uk-slideshow-fade-in {
-webkit-animation: uk-fade 0.5s linear;
animation: uk-fade 0.5s linear;
}
.uk-slideshow-fade-out {
-webkit-animation: uk-fade 0.5s linear reverse;
animation: uk-fade 0.5s linear reverse;
}
/*
* Scroll
*/
.uk-slideshow-scroll-forward-in {
-webkit-animation: uk-slide-right 0.5s ease-in-out;
animation: uk-slide-right 0.5s ease-in-out;
}
.uk-slideshow-scroll-forward-out {
-webkit-animation: uk-slide-left 0.5s ease-in-out reverse;
animation: uk-slide-left 0.5s ease-in-out reverse;
}
.uk-slideshow-scroll-backward-in {
-webkit-animation: uk-slide-left 0.5s ease-in-out;
animation: uk-slide-left 0.5s ease-in-out;
}
.uk-slideshow-scroll-backward-out {
-webkit-animation: uk-slide-right 0.5s ease-in-out reverse;
animation: uk-slide-right 0.5s ease-in-out reverse;
}
/*
* Scale
*/
.uk-slideshow-scale-out {
-webkit-animation: uk-fade-scale-15 0.5s ease-in-out reverse;
animation: uk-fade-scale-15 0.5s ease-in-out reverse;
}
/*
* Swipe
*/
.uk-slideshow-swipe-forward-in {
-webkit-animation: uk-slide-left-33 0.5s ease-in-out;
animation: uk-slide-left-33 0.5s ease-in-out;
}
.uk-slideshow-swipe-forward-out {
-webkit-animation: uk-slide-left 0.5s ease-in-out reverse;
animation: uk-slide-left 0.5s ease-in-out reverse;
}
.uk-slideshow-swipe-backward-in {
-webkit-animation: uk-slide-right-33 0.5s ease-in-out;
animation: uk-slide-right-33 0.5s ease-in-out;
}
.uk-slideshow-swipe-backward-out {
-webkit-animation: uk-slide-right 0.5s ease-in-out reverse;
animation: uk-slide-right 0.5s ease-in-out reverse;
}
.uk-slideshow-swipe-forward-in:before,
.uk-slideshow-swipe-backward-in:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
background: rgba(0,0,0,0.6);
-webkit-animation: uk-fade 0.5s ease-in-out reverse;
animation: uk-fade 0.5s ease-in-out reverse;
}
// Hooks
// ========================================================================
.hook-slideshow-misc;
.hook-slideshow-misc() {}

View File

@@ -0,0 +1,124 @@
// Name: Sortable
// Description: Defines styles for sortable grids and lists
//
// Component: `uk-sortable`
//
// Sub-objects: `uk-sortable-handle`
// `uk-sortable-moving`
//
// Modifier: `uk-sortable-dragged`
// `uk-sortable-placeholder`
//
// Markup:
//
// <!-- uk-sortable -->
// <ul class="uk-sortable" data-uk-sortable>
// <li></li>
// <li></li>
// </ul>
//
// ========================================================================
// Variables
// ========================================================================
@sortable-dragged-z-index: 1050;
@sortable-placeholder-opacity: 0;
@sortable-empty-height: 30px;
/* ========================================================================
Component: Sortable
========================================================================== */
.uk-sortable {
position: relative;
.hook-sortable;
}
/*
* Deactivate browser touch actions in IE11
*/
.uk-sortable > * { touch-action: none; }
/*
* Disables the default callout shown when you touch and hold a touch target
* Currently only works in Webkit
*/
.uk-sortable a,
.uk-sortable img { -webkit-touch-callout: none; }
/*
* Remove margin from the last-child
*/
.uk-sortable > :last-child { margin-bottom: 0; }
/* Sub-modifier `uk-sortable-dragged`
========================================================================== */
.uk-sortable-dragged {
position: absolute;
z-index: @sortable-dragged-z-index;
pointer-events: none;
.hook-sortable-dragged;
}
/* Sub-modifier `uk-sortable-placeholder`
========================================================================== */
.uk-sortable-placeholder {
opacity: @sortable-placeholder-opacity;
.hook-sortable-placeholder;
}
/* Empty List
========================================================================== */
.uk-sortable-empty {
min-height: @sortable-empty-height;
.hook-sortable-empty;
}
/* Sub-object `uk-sortable-handle`
========================================================================== */
/*
* Deactivate browser touch actions in IE11
*/
.uk-sortable-handle { touch-action: none; }
/* Hover */
.uk-sortable-handle:hover { cursor: move; }
/* Sub-object `uk-sortable-moving`
========================================================================== */
.uk-sortable-moving,
/* Needed if moving over links or buttons */
.uk-sortable-moving * { cursor: move; }
/* Fixes dragging items over iframes */
.uk-sortable-moving iframe { pointer-events: none; }
// Hooks
// ========================================================================
.hook-sortable-misc;
.hook-sortable() {}
.hook-sortable-dragged() {}
.hook-sortable-placeholder() {}
.hook-sortable-empty() {}
.hook-sortable-misc() {}

View File

@@ -0,0 +1,57 @@
// Name: Sticky
// Description: Make elements remain at the top of the viewport
//
// Component: `data-uk-sticky`
//
// States: `uk-active`
//
// ========================================================================
// Variables
// ========================================================================
@sticky-z-index: 980;
@sticky-animation-duration: 0.2s;
@sticky-reverse-animation-duration: 0.2s;
/* ========================================================================
Component: Sticky
========================================================================== */
/*
* 1. More robust if padding and border are used
* 2. Enable hardware acceleration for iOS browsers, resolves scrolling issue
*/
[data-uk-sticky].uk-active {
z-index: @sticky-z-index;
/* 1 */
box-sizing: border-box;
/* 2 */
-webkit-backface-visibility: hidden
}
/*
* Faster animations
*/
[data-uk-sticky][class*='uk-animation-'] {
-webkit-animation-duration: @sticky-animation-duration;
animation-duration: @sticky-animation-duration;
}
[data-uk-sticky].uk-animation-reverse {
-webkit-animation-duration: @sticky-reverse-animation-duration;
animation-duration: @sticky-reverse-animation-duration;
}
// Hooks
// ========================================================================
.hook-sticky-misc;
.hook-sticky-misc() {}

View File

@@ -0,0 +1,177 @@
// Name: Tooltip
// Description: Defines styles for tooltips
//
// Component: `uk-tooltip`
//
// Modifiers `uk-tooltip-top`
// `uk-tooltip-top-left`
// `uk-tooltip-top-right`
// `uk-tooltip-bottom`
// `uk-tooltip-bottom-left`
// `uk-tooltip-bottom-right`
// `uk-tooltip-left`
// `uk-tooltip-right`
//
// ========================================================================
// Variables
// ========================================================================
@tooltip-z-index: 1030;
@tooltip-max-width: 200px;
@tooltip-padding-vertical: 5px;
@tooltip-padding-horizontal: 8px;
@tooltip-background: #333;
@tooltip-triangle-size: 5px;
@tooltip-color: rgba(255,255,255,0.7);
@tooltip-font-size: 12px;
@tooltip-line-height: 18px;
@tooltip-offset-horizontal: 10px;
/* ========================================================================
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: @tooltip-z-index;
/* 3 */
box-sizing: border-box;
max-width: @tooltip-max-width;
padding: @tooltip-padding-vertical @tooltip-padding-horizontal;
/* 4 */
background: @tooltip-background;
color: @tooltip-color;
font-size: @tooltip-font-size;
line-height: @tooltip-line-height;
.hook-tooltip;
}
/* Triangle
========================================================================== */
/*
* 1. Dashed is less antialised than solid
*/
.uk-tooltip:after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
/* 1 */
border: @tooltip-triangle-size dashed @tooltip-background;
}
/* Direction modifiers
========================================================================== */
/*
* Top
*/
.uk-tooltip-top:after,
.uk-tooltip-top-left:after,
.uk-tooltip-top-right:after {
bottom: -@tooltip-triangle-size;
border-top-style: solid;
border-bottom: none;
border-left-color: transparent;
border-right-color: transparent;
border-top-color: @tooltip-background;
}
/*
* Bottom
*/
.uk-tooltip-bottom:after,
.uk-tooltip-bottom-left:after,
.uk-tooltip-bottom-right:after {
top: -@tooltip-triangle-size;
border-bottom-style: solid;
border-top: none;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: @tooltip-background;
}
/*
* Top/Bottom center
*/
.uk-tooltip-top:after,
.uk-tooltip-bottom:after {
left: 50%;
margin-left: -@tooltip-triangle-size;
}
/*
* Top/Bottom left
*/
.uk-tooltip-top-left:after,
.uk-tooltip-bottom-left:after { left: @tooltip-offset-horizontal; }
/*
* Top/Bottom right
*/
.uk-tooltip-top-right:after,
.uk-tooltip-bottom-right:after { right: @tooltip-offset-horizontal; }
/*
* Left
*/
.uk-tooltip-left:after {
right: -@tooltip-triangle-size;
top: 50%;
margin-top: -@tooltip-triangle-size;
border-left-style: solid;
border-right: none;
border-top-color: transparent;
border-bottom-color: transparent;
border-left-color: @tooltip-background;
}
/*
* Right
*/
.uk-tooltip-right:after {
left: -@tooltip-triangle-size;
top: 50%;
margin-top: -@tooltip-triangle-size;
border-right-style: solid;
border-left: none;
border-top-color: transparent;
border-bottom-color: transparent;
border-right-color: @tooltip-background;
}
// Hooks
// ========================================================================
.hook-tooltip-misc;
.hook-tooltip() {}
.hook-tooltip-misc() {}

View File

@@ -0,0 +1,34 @@
// Name: Upload
// Description: Provides a dragover state for uploads
//
// Component: `uk-upload`
//
// States: `uk-dragover`
//
// ========================================================================
// Variables
// ========================================================================
@uk-upload-dragover-box-shadow: rgba(100,100,100,0.3);
@uk-upload-dragover-box-shadow-blur: 20px;
/* ========================================================================
Component: Upload
========================================================================== */
/*
* Create a box-shadow when dragging a file over the upload area
*/
.uk-dragover { box-shadow: 0 0 @uk-upload-dragover-box-shadow-blur @uk-upload-dragover-box-shadow; }
// Hooks
// ========================================================================
.hook-upload-misc;
.hook-upload-misc() {}