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 !default;
$accordion-title-padding-vertical: 5px !default;
$accordion-title-padding-horizontal: 15px !default;
$accordion-title-font-size: 18px !default;
$accordion-title-line-height: 24px !default;
$accordion-title-background: #eee !default;
$accordion-content-padding-horizontal: $accordion-title-padding-horizontal !default;
$accordion-content-padding-bottom: $accordion-title-padding-horizontal !default;
/* ========================================================================
Component: Accordion
========================================================================== */
.uk-accordion {
@include 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;
@include 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;
@include 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
// ========================================================================
@include hook-accordion-misc();
// @mixin hook-accordion(){}
// @mixin hook-accordion-title(){}
// @mixin hook-accordion-content(){}
// @mixin 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 !default;
$nav-autocomplete-active-background: #00a8e6 !default;
$nav-autocomplete-active-color: #fff !default;
$nav-autocomplete-header-color: #999 !default;
$nav-autocomplete-divider-border: #ddd !default;
$nav-autocomplete-divider-border-width: 1px !default;
/* ========================================================================
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;
@include 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;
@include hook-nav-autocomplete-active();
}
/*
* Sub-object: `uk-nav-header`
*/
.uk-nav-autocomplete .uk-nav-header {
color: $nav-autocomplete-header-color;
@include 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;
@include hook-nav-autocomplete-divider();
}
// Hooks
// ========================================================================
@include hook-autocomplete-misc();
// @mixin hook-nav-autocomplete(){}
// @mixin hook-nav-autocomplete-active(){}
// @mixin hook-nav-autocomplete-header(){}
// @mixin hook-nav-autocomplete-divider(){}
// @mixin 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 !default;
$datepicker-animation: uk-fade !default;
$datepicker-nav-height: 20px !default;
$datepicker-nav-margin-bottom: 15px !default;
$datepicker-nav-color: #444 !default;
$datepicker-nav-hover-color: #444 !default;
$datepicker-previous-icon: "\f053" !default;
$datepicker-next-icon: "\f054" !default;
$datepicker-table-width: 26px !default;
$datepicker-table-height: 24px !default;
$datepicker-table-color: #444 !default;
$datepicker-table-hover-background: #ddd !default;
$datepicker-table-hover-color: #444 !default;
$datepicker-table-onclick-background: #ccc !default;
$datepicker-table-onclick-color: #444 !default;
$datepicker-table-active-background: #00a8e6 !default;
$datepicker-table-active-color: #fff !default;
$datepicker-table-muted-color: #999 !default;
/* ========================================================================
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;
@include 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;
@include 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;
@include 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;
@include hook-datepicker-table-item-hover();
}
/* OnClick */
.uk-datepicker-table a:active {
background-color: $datepicker-table-onclick-background;
color: $datepicker-table-onclick-color;
@include hook-datepicker-table-item-onclick();
}
/*
* Active
*/
.uk-datepicker-table a.uk-active {
background: $datepicker-table-active-background;
color: $datepicker-table-active-color;
@include hook-datepicker-table-item-active();
}
// Hooks
// ========================================================================
@include hook-datepicker-misc();
// @mixin hook-datepicker-nav(){}
// @mixin hook-datepicker-nav-item(){}
// @mixin hook-datepicker-table-item(){}
// @mixin hook-datepicker-table-item-hover(){}
// @mixin hook-datepicker-table-item-onclick(){}
// @mixin hook-datepicker-table-item-active(){}
// @mixin 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 !default;
$dotnav-margin-vertical: $dotnav-margin-horizontal !default;
$dotnav-width: 20px !default;
$dotnav-height: $dotnav-width !default;
$dotnav-background: rgba(50,50,50,0.1) !default;
$dotnav-hover-background: rgba(50,50,50,0.4) !default;
$dotnav-onclick-background: rgba(50,50,50,0.6) !default;
$dotnav-active-background: rgba(50,50,50,0.4) !default;
$dotnav-contrast-background: rgba(255,255,255,0.4) !default;
$dotnav-contrast-hover-background: rgba(255,255,255,0.7) !default;
$dotnav-contrast-onclick-background: rgba(255,255,255,0.9) !default;
$dotnav-contrast-active-background: rgba(255,255,255,0.9) !default;
/* ========================================================================
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;
@include 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;
@include hook-dotnav-item-hover();
}
/* OnClick */
.uk-dotnav > * > :active {
background: $dotnav-onclick-background;
@include hook-dotnav-item-onclick();
}
/* Active */
.uk-dotnav > .uk-active > * {
background: $dotnav-active-background;
@include hook-dotnav-item-active();
}
/* Modifier: `uk-dotnav-contrast`
========================================================================== */
.uk-dotnav-contrast > * > * {
background: $dotnav-contrast-background;
@include 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;
@include hook-dotnav-contrast-item-hover();
}
/* OnClick */
.uk-dotnav-contrast > * > :active {
background: $dotnav-contrast-onclick-background;
@include hook-dotnav-contrast-item-onclick();
}
/* Active */
.uk-dotnav-contrast > .uk-active > * {
background: $dotnav-contrast-active-background;
@include 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
// ========================================================================
@include hook-dotnav-misc();
// @mixin hook-dotnav-item(){}
// @mixin hook-dotnav-item-hover(){}
// @mixin hook-dotnav-item-onclick(){}
// @mixin hook-dotnav-item-active(){}
// @mixin hook-dotnav-contrast-item(){}
// @mixin hook-dotnav-contrast-item-hover(){}
// @mixin hook-dotnav-contrast-item-onclick(){}
// @mixin hook-dotnav-contrast-item-active(){}
// @mixin 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 !default;
$form-advanced-border: #aaa !default;
$form-advanced-border-width: 1px !default;
$form-advanced-margin-top: -4px !default;
$form-advanced-color: transparent !default;
$form-advanced-checked-color: #00a8e6 !default;
$form-advanced-radio-size: 8px !default;
$form-advanced-checkbox-icon: "\f00c" !default;
$form-advanced-checkbox-indeterminate-icon: "\f068" !default;
$form-advanced-checkbox-font-size: 12px !default;
$form-advanced-disabled-border: #ddd !default;
$form-advanced-disabled-color: #aaa !default;
/* ========================================================================
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;
@include 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;
@include 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;
@include 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;
@include 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;
@include 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
// ========================================================================
@include hook-form-advanced-misc();
// @mixin hook-form-advanced(){}
// @mixin hook-form-advanced-checked(){}
// @mixin hook-form-advanced-radio(){}
// @mixin hook-form-advanced-checkbox(){}
// @mixin hook-form-advanced-disabled(){}
// @mixin 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
// ========================================================================
@include hook-form-file-misc();
// @mixin 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 !default;
$form-password-line-height: $form-password-font-size !default;
$form-password-color: #999 !default;
$form-password-hover-color: #999 !default;
$form-password-padding: 50px !default;
/* ========================================================================
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
// ========================================================================
@include hook-form-password-misc();
// @mixin 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
// ========================================================================
@include hook-form-select-misc();
// @mixin 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 !default;
$htmleditor-navbar-nav-height: 40px !default;
$htmleditor-navbar-nav-padding-horizontal: 15px !default;
$htmleditor-navbar-nav-line-height: $htmleditor-navbar-nav-height !default;
$htmleditor-navbar-nav-color: #444 !default;
$htmleditor-navbar-nav-hover-background: #f5f5f5 !default;
$htmleditor-navbar-nav-hover-color: #444 !default;
$htmleditor-navbar-nav-onclick-background: #ddd !default;
$htmleditor-navbar-nav-onclick-color: #444 !default;
$htmleditor-navbar-nav-active-background: #f5f5f5 !default;
$htmleditor-navbar-nav-active-color: #444 !default;
$htmleditor-content-border: #ddd !default;
$htmleditor-content-background: #fff !default;
$htmleditor-content-padding: 20px !default;
$htmleditor-content-split-border: #eee !default;
$htmleditor-fullscreen-z-index: 990 !default;
$htmleditor-fullscreen-content-top: $htmleditor-navbar-nav-height !default;
$htmleditor-fullscreen-icon-resize: "\f066" !default;
/* ========================================================================
Component: HTML editor
========================================================================== */
.uk-htmleditor {
@include hook-htmleditor();
}
/* Sub-object `uk-htmleditor-navbar`
========================================================================== */
.uk-htmleditor-navbar {
background: $htmleditor-navbar-background;
@include 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;
@include 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 */
@include 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;
@include 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;
@include 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;
@include 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
// ========================================================================
@include hook-htmleditor-misc();
// @mixin hook-htmleditor(){}
// @mixin hook-htmleditor-navbar(){}
// @mixin hook-htmleditor-navbar-nav(){}
// @mixin hook-htmleditor-navbar-nav-hover(){}
// @mixin hook-htmleditor-navbar-nav-onclick(){}
// @mixin hook-htmleditor-navbar-nav-active(){}
// @mixin hook-htmleditor-content(){}
// @mixin 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 !default;
$nestable-item-margin: 10px !default;
$nestable-dragged-z-index: 1050 !default;
$nestable-placeholder-border: #ddd !default;
$nestable-empty-height: 30px !default;
$nestable-toggle-icon: "\f147" !default;
$nestable-toggle-collapsed-icon: "\f196" !default;
$nestable-panel-padding: 5px !default;
$nestable-panel-background: #f5f5f5 !default;
/* ========================================================================
Component: Nestable
========================================================================== */
.uk-nestable {
padding: 0;
list-style: none;
@include 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;
@include 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;
@include 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;
@include hook-nestable-placeholder();
}
/* Empty List
========================================================================== */
.uk-nestable-empty {
min-height: $nestable-empty-height;
@include 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;
@include 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;
@include hook-nestable-panel();
}
// Hooks
// ========================================================================
@include hook-nestable-misc();
// @mixin hook-nestable(){}
// @mixin hook-nestable-item(){}
// @mixin hook-nestable-dragged(){}
// @mixin hook-nestable-placeholder(){}
// @mixin hook-nestable-empty(){}
// @mixin hook-nestable-handle(){}
// @mixin hook-nestable-toggle(){}
// @mixin hook-nestable-panel(){}
// @mixin 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 !default;
$notify-z-index: 1040 !default;
$notify-width: 350px !default;
$notify-message-margin-bottom: 10px !default;
$notify-message-padding: 15px !default;
$notify-message-background: #444 !default;
$notify-message-color: #fff !default;
$notify-message-font-size: 16px !default;
$notify-message-line-height: 22px !default;
$notify-message-primary-background: #ebf7fd !default;
$notify-message-primary-color: #2d7091 !default;
$notify-message-success-background: #f2fae3 !default;
$notify-message-success-color: #659f13 !default;
$notify-message-warning-background: #fffceb !default;
$notify-message-warning-color: #e28327 !default;
$notify-message-danger-background: #fff1f0 !default;
$notify-message-danger-color: #d85030 !default;
/* ========================================================================
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;
@include 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;
@include 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;
@include hook-notify-message-primary();
}
/* Modifier: `uk-notify-message-success`
========================================================================== */
.uk-notify-message-success {
background: $notify-message-success-background;
color: $notify-message-success-color;
@include hook-notify-message-success();
}
/* Modifier: `uk-notify-message-warning`
========================================================================== */
.uk-notify-message-warning {
background: $notify-message-warning-background;
color: $notify-message-warning-color;
@include hook-notify-message-warning();
}
/* Modifier: `uk-notify-message-danger`
========================================================================== */
.uk-notify-message-danger {
background: $notify-message-danger-background;
color: $notify-message-danger-color;
@include hook-notify-message-danger();
}
// Hooks
// ========================================================================
@include hook-notify-misc();
// @mixin hook-notify(){}
// @mixin hook-notify-message(){}
// @mixin hook-notify-message-primary(){}
// @mixin hook-notify-message-success(){}
// @mixin hook-notify-message-warning(){}
// @mixin hook-notify-message-danger(){}
// @mixin 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 !default;
$placeholder-padding: 20px !default;
$placeholder-border: #ddd !default;
$placeholder-background: #fafafa !default;
$placeholder-color: #444 !default;
$placeholder-large-padding-vertical: 80px !default;
/* ========================================================================
Component: Placeholder
========================================================================== */
.uk-placeholder {
margin-bottom: $placeholder-margin-vertical;
padding: $placeholder-padding;
border: 1px dashed $placeholder-border;
background: $placeholder-background;
color: $placeholder-color;
@include 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;
@include hook-placeholder-large();
}
// Hooks
// ========================================================================
@include hook-placeholder-misc();
// @mixin hook-placeholder(){}
// @mixin hook-placeholder-large(){}
// @mixin 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 !default;
$progress-mini-height: 6px !default;
$progress-small-height: 12px !default;
$progress-margin-vertical: 15px !default;
$progress-background: #eee !default;
$progress-bar-background: #00a8e6 !default;
$progress-bar-font-size: 12px !default;
$progress-bar-color: #fff !default;
$progress-bar-success-background: #8cc14c !default;
$progress-bar-warning-background: #faa732 !default;
$progress-bar-danger-background: #da314b !default;
/* ========================================================================
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;
@include 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;
@include hook-progress-bar();
}
/* Size modifiers
========================================================================== */
/* Mini */
.uk-progress-mini {
height: $progress-mini-height;
@include hook-progress-mini();
}
/* Small */
.uk-progress-small {
height: $progress-small-height;
@include hook-progress-small();
}
/* Color modifiers
========================================================================== */
.uk-progress-success .uk-progress-bar {
background-color: $progress-bar-success-background;
@include hook-progress-bar-success();
}
.uk-progress-warning .uk-progress-bar {
background-color: $progress-bar-warning-background;
@include hook-progress-bar-warning();
}
.uk-progress-danger .uk-progress-bar {
background-color: $progress-bar-danger-background;
@include 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
// ========================================================================
@include hook-progress-misc();
// @mixin hook-progress(){}
// @mixin hook-progress-bar(){}
// @mixin hook-progress-mini(){}
// @mixin hook-progress-small(){}
// @mixin hook-progress-bar-success(){}
// @mixin hook-progress-bar-warning(){}
// @mixin hook-progress-bar-danger(){}
// @mixin 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 !default;
$search-focus-width: 180px !default;
$search-height: 30px !default;
$search-padding: 30px !default;
$search-border: rgba(0,0,0,0) !default;
$search-border-width: 1px !default;
$search-background: rgba(0,0,0,0) !default;
$search-color: #444 !default;
$search-placeholder-color: #999 !default;
$search-icon: "\f002" !default;
$search-icon-size: 14px !default;
$search-icon-color: rgba(0,0,0,0.2) !default;
// Dropdown modifier
$dropdown-search-width: 300px !default;
$dropdown-search-margin-top: 0 !default;
$dropdown-search-background: #f5f5f5 !default;
$dropdown-search-color: #444 !default;
$dropdown-search-animation: uk-slide-top-fixed !default;
$dropdown-search-navbar-margin-top: 5px !default;
$dropdown-search-navbar-margin-right: -15px !default;
// Nav modifier
$nav-search-color: #444 !default;
$nav-search-active-background: #00a8e6 !default;
$nav-search-active-color: #fff !default;
$nav-search-header-color: #999 !default;
$nav-search-divider-border: #ddd !default;
$nav-search-divider-border-width: 1px !default;
$nav-search-nested-color: #07D !default;
$nav-search-nested-hover-color: #059 !default;
// Search in offcanvas
$offcanvas-search-margin: 20px 15px !default;
$offcanvas-search-background: #1a1a1a !default;
$offcanvas-search-border: rgba(0,0,0,0) !default;
$offcanvas-search-color: #ccc !default;
$offcanvas-search-placeholder-color: #777 !default;
$offcanvas-search-icon-color: #777 !default;
/* ========================================================================
Component: Search
========================================================================== */
/*
* 1. Create position context for dropdowns
* 2. Needed for `form` element
*/
.uk-search {
display: inline-block;
/* 1 */
position: relative;
/* 2 */
margin: 0;
@include 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;
@include 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;
@include 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;
@include 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;
@include 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;
@include 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;
@include hook-nav-search-active();
}
/*
* Sub-object: `uk-nav-header`
*/
.uk-nav-search .uk-nav-header {
color: $nav-search-header-color;
@include 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;
@include 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;
@include 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
// ========================================================================
@include hook-search-misc();
// @mixin hook-search(){}
// @mixin hook-search-icon(){}
// @mixin hook-search-field(){}
// @mixin hook-search-field-focus(){}
// @mixin hook-dropdown-search(){}
// @mixin hook-nav-search(){}
// @mixin hook-nav-search-active(){}
// @mixin hook-nav-search-header(){}
// @mixin hook-nav-search-divider(){}
// @mixin hook-offcanvas-search-field(){}
// @mixin 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 !default;
$slidenav-height: $slidenav-width !default;
$slidenav-color: rgba(50,50,50,0.4) !default;
$slidenav-font-size: 60px !default;
$slidenav-line-height: $slidenav-height !default;
$slidenav-previous-icon: "\f104" !default;
$slidenav-next-icon: "\f105" !default;
$slidenav-hover-color: rgba(50,50,50,0.7) !default;
$slidenav-active-color: rgba(50,50,50,0.9) !default;
$slidenav-position-previous: 20px !default;
$slidenav-position-next: $slidenav-position-previous !default;
$slidenav-contrast-color: rgba(255,255,255,0.5) !default;
$slidenav-contrast-hover-color: rgba(255,255,255,0.7) !default;
$slidenav-contrast-active-color: rgba(255,255,255,0.9) !default;
/* ========================================================================
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;
@include 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;
@include hook-slidenav-hover();
}
/* Active */
.uk-slidenav:active {
color: $slidenav-active-color;
@include 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;
@include 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;
@include hook-slidenav-contrast-hover();
}
/* Active */
.uk-slidenav-contrast:active {
color: $slidenav-contrast-active-color;
@include hook-slidenav-contrast-active();
}
// Hooks
// ========================================================================
@include hook-slidenav-misc();
// @mixin hook-slidenav(){}
// @mixin hook-slidenav-hover(){}
// @mixin hook-slidenav-active(){}
// @mixin hook-slidenav-contrast(){}
// @mixin hook-slidenav-contrast-hover(){}
// @mixin hook-slidenav-contrast-active(){}
// @mixin 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
// ========================================================================
@include hook-slider-misc();
// @mixin 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
// ========================================================================
@include hook-slideshow-misc();
// @mixin 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 !default;
$sortable-placeholder-opacity: 0 !default;
$sortable-empty-height: 30px !default;
/* ========================================================================
Component: Sortable
========================================================================== */
.uk-sortable {
position: relative;
@include 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;
@include hook-sortable-dragged();
}
/* Sub-modifier `uk-sortable-placeholder`
========================================================================== */
.uk-sortable-placeholder {
opacity: $sortable-placeholder-opacity;
@include hook-sortable-placeholder();
}
/* Empty List
========================================================================== */
.uk-sortable-empty {
min-height: $sortable-empty-height;
@include 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
// ========================================================================
@include hook-sortable-misc();
// @mixin hook-sortable(){}
// @mixin hook-sortable-dragged(){}
// @mixin hook-sortable-placeholder(){}
// @mixin hook-sortable-empty(){}
// @mixin 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 !default;
$sticky-animation-duration: 0.2s !default;
$sticky-reverse-animation-duration: 0.2s !default;
/* ========================================================================
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
// ========================================================================
@include hook-sticky-misc();
// @mixin 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 !default;
$tooltip-max-width: 200px !default;
$tooltip-padding-vertical: 5px !default;
$tooltip-padding-horizontal: 8px !default;
$tooltip-background: #333 !default;
$tooltip-triangle-size: 5px !default;
$tooltip-color: rgba(255,255,255,0.7) !default;
$tooltip-font-size: 12px !default;
$tooltip-line-height: 18px !default;
$tooltip-offset-horizontal: 10px !default;
/* ========================================================================
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;
@include 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
// ========================================================================
@include hook-tooltip-misc();
// @mixin hook-tooltip(){}
// @mixin 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) !default;
$uk-upload-dragover-box-shadow-blur: 20px !default;
/* ========================================================================
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
// ========================================================================
@include hook-upload-misc();
// @mixin hook-upload-misc(){}