1
0
mirror of https://github.com/processwire/processwire.git synced 2025-08-20 13:31:48 +02:00

94 Commits
3.0.244 ... dev

Author SHA1 Message Date
Ryan Cramer
bf22960d11 Minor adjustments to AdminThemeUikit Konkat default theme 2025-08-08 16:38:23 -04:00
Ryan Cramer
d6837c8e5c Add support for HTML5 autocomplete attributes to InputfieldText, when used of page editing forms 2025-08-03 13:38:40 -04:00
Ryan Cramer
c923a1b568 Fix issue in FieldtypeMulti where $page->field_name("limit=0") would return a pagination rather than ALL 2025-08-03 12:19:07 -04:00
Ryan Cramer
03e7b13fce Fix duplicate entity encode in InputfieldDatetimeSelect 2025-08-01 16:37:52 -04:00
Ryan Cramer
db0d1321c8 Minor updates to SessionLoginThrottle 2025-08-01 16:37:06 -04:00
Ryan Cramer
e95661c439 Updates to AdminThemeUikit Konkat default theme 2025-08-01 16:36:40 -04:00
Ryan Cramer
dc89e16131 Update WireShutdown to support sanitization of debug backtraces 2025-08-01 16:34:57 -04:00
Ryan Cramer
c1fb7264c8 Minor phpdoc updates for API reference 2025-08-01 16:34:26 -04:00
Ryan Cramer
4acfc353cd Bump version to 3.0.251 2025-07-25 16:45:52 -04:00
Ryan Cramer
abab9bf4a8 Update to use versioned asset URLs in AdminThemeUikit Konkat default theme 2025-07-24 15:46:24 -04:00
Ryan Cramer
8b39c92b31 Update AdminThemeUikit Konkat default theme to use --pw- namespaced CSS variables.
Co-authored-by: ocorreiododiogo <ocorreiododiogo@gmail.com>
Co-authored-by: jploch <jploch@users.noreply.github.com>
2025-07-23 15:22:16 -04:00
Ryan Cramer
7d5ad4b277 Add new string() method to WireRandom class. This method lets you specify that it should create a random string using the given characters. 2025-07-23 15:11:25 -04:00
Ryan Cramer
27f20b4799 Additional update to DatabaseQuerySelect to force non-match for search words consisting only of operator characters 2025-07-20 11:26:20 -04:00
Ryan Cramer
ff69aa56a1 Update DatabaseQuerySelectFulltext so that too-long words combined with individual word-matching operators are truncated rather than removed. 2025-07-20 10:29:27 -04:00
Ryan Cramer
eda5129884 Update $sanitizer->wordsArray() to support a truncate option 2025-07-20 10:28:43 -04:00
Ryan Cramer
5fb798857f Additional file meant to be included in last commit 2025-07-18 17:04:40 -04:00
Ryan Cramer
ece4917b1b Add support for Process modules to optionally use icons in their headlines, by specifying <icon-name> in the headline (where 'name' is an FA icon name). 2025-07-18 17:03:12 -04:00
Ryan Cramer
e6160973e0 Fix issue in ProcessPageLister where subfields could be incorrectly linked show page actions when clicked on, but only if the first column showed a subfield from the same field 2025-07-18 16:30:52 -04:00
Ryan Cramer
0da85dd55c Updates to TinyMCE content.css styles, primarily to make more readable code and pre element styles 2025-07-18 16:30:13 -04:00
Ryan Cramer
95cca5ad62 Add new AdminThemeUikit CSS toggles for bolder repeater item headers, input focused states, and page list buttons 2025-07-18 16:28:44 -04:00
Ryan Cramer
a817943b73 Additional AdminThemeUikit CSS updates
Co-authored-by: ocorreiododiogo <ocorreiododiogo@gmail.com>
Co-authored-by: jploch <jploch@users.noreply.github.com>>
2025-07-18 16:24:47 -04:00
Ryan Cramer
96165bbff4 Add newest Konkat admin.css and admin-custom.css for AdminThemeUikit
Co-authored-by: ocorreiododiogo <ocorreiododiogo@gmail.com>
Co-authored-by: jploch <jploch@users.noreply.github.com>>
2025-07-18 10:20:45 -04:00
Ryan Cramer
f03498e88e Bump version to 3.0.250 2025-07-11 16:55:27 -04:00
Ryan Cramer
d11a1e631b Updates and new features to the Markup Regions system 2025-07-11 15:36:21 -04:00
Ryan Cramer
3770a8f74b Fix issue processwire/processwire-issues#2074 2025-07-01 10:45:29 -04:00
Ryan Cramer
f4487628ad Fix issue processwire/processwire-issues#2085 2025-07-01 10:32:51 -04:00
Ryan Cramer
f15c5942b4 Fix issue processwire/processwire-issues#2091 2025-07-01 10:29:09 -04:00
Ryan Cramer
e526d6562d Fix issue processwire/processwire-issues#2101 2025-07-01 10:08:08 -04:00
Ryan Cramer
b579e24425 Fix extra ‘for’ attribute issue in InputfieldWrapper (that had value ‘{for}’), plus add new removeByName() method for removing an Inputfield from the form by name. 2025-07-01 09:40:01 -04:00
Ryan Cramer
1b0d51e275 Add AdminThemeUikit feature for testing all Uikit features with current theme (whether original, admin.less based, or themes/name/admin.css based). This is adapted from the /tests/ directory included with Uikit. 2025-06-18 14:11:58 -04:00
Ryan Cramer
36980a2455 Bump version to 3.0.249 2025-06-13 15:46:05 -04:00
Ryan Cramer
5373613169 Fix minor issue in InputfieldTinyMCE.js 2025-06-13 14:00:52 -04:00
Ryan Cramer
c9650f1974 Update PagesType class (used by $users, $roles, $permissions API vars) to have a new() method that creates a new Page instance (of type User, Permission, Role) in memory. 2025-06-13 13:59:39 -04:00
Ryan Cramer
9f9cc65680 Update $pages->newPage() method so that it can also accept template name or ID for the template option 2025-06-13 13:57:36 -04:00
Ryan Cramer
99cdf49bad Update installer to generate random session cookie name. This helps if you have multiple installs, switching from one to the other won't cause logout 2025-06-13 13:55:20 -04:00
Ryan Cramer
24ac500048 Minor updates 2025-06-06 16:15:24 -04:00
Ryan Cramer
eb48adccb2 Various small updates to AdminThemeUikit default theme. In addition, module authors can now diallow dark mode with $config->AdminThemeUikit('noDarkMode', true); and they can disable toggle style checkboxes with $config->AdminThemeUikit('noTogcbx', true); 2025-06-04 10:04:11 -04:00
Ryan Cramer
c1259148d2 Update InputfieldTinyMCE to add an 'InputfieldTinyMCEFocused' class to .Inputfield element when the TinyMCE input is focused 2025-05-30 15:01:28 -04:00
Ryan Cramer
6566c5795c AdminThemeUikit default theme: Add various CSS updates from Diogo, plus add an option to disable toggle-style checkboxes for those that prefer regular checkboxes.
Co-authored-by: ocorreiododiogo <ocorreiododiogo@gmail.com>
2025-05-30 14:59:35 -04:00
Ryan Cramer
44e6c89e35 A few small updates to default AdminThemeUikit theme module config 2025-05-23 16:35:32 -04:00
Ryan Cramer
050fb0aa0c Add AdminThemeUikit default theme with attribution on-behalf-of: @konkat-studio <hi@konkat.studio>
Co-authored-by: ocorreiododiogo <ocorreiododiogo@gmail.com>
Co-authored-by: jploch <jploch@users.noreply.github.com>
2025-05-23 10:12:45 -04:00
Ryan Cramer
b066de77b6 Remove default to add back with correct author in next commits 2025-05-23 10:00:42 -04:00
Ryan Cramer
731578fbed Admin CSS update from Diogo that adds a variable for border radius for buttons 2025-05-23 09:59:06 -04:00
Ryan Cramer
8248143aee Set installer to use light theme 2025-05-23 09:58:30 -04:00
Ryan Cramer
9fb83ffe66 Update AdminThemeUikit new design to support separate light and dark mode main colors. Add support for embedded/inline SVG logos when they support fill="currentColor". 2025-05-16 16:26:07 -04:00
Ryan Cramer
f627e68a6f Minor correction in WireArray 2025-05-16 16:05:23 -04:00
Ryan Cramer
6a48a29b2d Fix a php header() call 2025-05-12 11:31:40 -04:00
Ryan Cramer
bc0faa771f Small adjustments 2025-05-09 16:09:52 -04:00
Ryan Cramer
b786dcff14 Bump version to 3.0.248, adding new admin resign by KONKAT Studio @konkat-studio 2025-05-09 13:38:50 -04:00
Ryan Cramer
e0f96733e6 Minor updates related to the add-new links in the dropdown nav page-tree 2025-05-07 12:41:37 -04:00
Ryan Cramer
77fbde3409 Accidentally left a Tracy bd() call in there, this commit removes it 2025-05-02 15:13:30 -04:00
Ryan Cramer
fb26ec9d64 Fix issue processwire/processwire-issues#2066 2025-05-02 11:57:18 -04:00
Ryan Cramer
e8f8317b48 Fix issue processwire/processwire-issues#2067 2025-05-02 11:46:44 -04:00
Ryan Cramer
8322725f35 Make InputfieldTinyMCE::getModuleConfigInputfields() method hookable 2025-05-02 09:59:56 -04:00
Ryan Cramer
c1d150d4ba Minor TinyMCE updates plus make a method hookable for more configuration options 2025-05-01 13:38:17 -04:00
Ryan Cramer
b5f94df3d6 Updates to AdminThemeUikit in preparation for updated design 2025-05-01 13:35:10 -04:00
Ryan Cramer
a3dbd1b28f Prepare AdminThemeUikit for new design theme options 2025-04-25 14:29:52 -04:00
Ryan Cramer
69823256fb Update ProcessWire.alert(), ProcessWire.confirm() and ProcessWire.prompt() Javascript functions to use Uikit modals rather than Vex modals. This also should also help to solve processwire/processwire-issues#2063 ...also added ProcessWire.entities1() and ProcessWire.unentities() JS functions to mirror those in Sanitizer. 2025-04-18 13:09:31 -04:00
Ryan Cramer
436a0ed3b1 Fix issue processwire/processwire-issues#2064 by adding support for exception 'code' string values, like those used by PDOException, and added new WireException() function to faciliate it. 2025-04-18 10:37:29 -04:00
Ryan Cramer
5f17f5ff9d Phpdoc update in InputfieldWrapper for ProcessWireAPI docs 2025-04-17 12:14:26 -04:00
Ryan Cramer
0a317971f8 Phpdoc updates in Page.php 2025-04-17 12:13:47 -04:00
Ryan Cramer
b4ddc89fb9 Add support in MarkupRegions for removing class names by wildcard. For instance, <div id="content" class="-uk-width-*" pw-append></div> would remove all class names from #content div starting with "uk-width-". Regex patterns are also supported when pattern is identifed by /, i.e. <div id="content" class="-/^uk-(text|width).+$/" pw-append></div> would remove all class names from $content starting with "uk-text" or "uk-width". 2025-04-17 12:03:53 -04:00
Ryan Cramer
570bdb4b81 Fix issue processwire/processwire-issues#2060 2025-04-17 11:59:47 -04:00
Ryan Cramer
725d89e664 Fix issue processwire/processwire-issues#2053 2025-03-28 14:46:17 -04:00
Ryan Cramer
2715611949 Updates for ProcessLogin and Inputfield::skipLabelHidden option 2025-03-28 14:10:24 -04:00
Ryan Cramer
ee96262e44 Fix issue processwire/processwire-issues#2056 2025-03-28 13:22:34 -04:00
Ryan Cramer
dae4e59db9 Fix issue processwire/processwire-issues#2057 2025-03-28 13:21:05 -04:00
Ryan Cramer
bc8a1959f3 Fix issue processwire/processwire-issues#2058 2025-03-28 13:05:54 -04:00
Ryan Cramer
6783c4824b Fix function call error in PagesVersions module hasPageVersions method 2025-03-16 10:00:40 -04:00
Ryan Cramer
4725ece5f8 Fix ProcessPageLister issue when a custom page class is expected for a page without an ID 2025-03-07 14:36:11 -05:00
Ryan Cramer
422d9c1eb6 Adjustment to ProcessLogin 2025-03-07 14:35:46 -05:00
Ryan Cramer
a17ebff0cd Normalize background for file/image Inputfields in AdminThemeUikit 2025-03-07 14:32:38 -05:00
Ryan Cramer
afacf91792 Fix issue processwire/processwire-issues#2051 2025-02-28 14:27:41 -05:00
Ryan Cramer
0c3c15c29d Fix issue processwire/processwire-issues#2052 2025-02-28 14:00:45 -05:00
Ryan Cramer
b7636bc1df I seem to be bad at spelling the word langauges oops languages 2025-02-28 13:53:03 -05:00
Ryan Cramer
a8ea954462 Bump version to 3.0.247 2025-02-14 15:00:04 -05:00
Ryan Cramer
8ee238ea70 Fix issue processwire/processwire-issues#2045 2025-02-14 14:58:18 -05:00
Ryan Cramer
668081fb23 Fix issue processwire/processwire-issues#2041 2025-02-14 14:43:37 -05:00
Ryan Cramer
9996091afb Add support for conditional hooks that match method return values. For details see: https://processwire.com/docs/modules/hooks/#conditional-hooks-matching-return-value-or-type 2025-02-14 13:13:51 -05:00
Ryan Cramer
44fcf13ea2 Bump version to 3.0.246 2025-02-14 10:10:03 -05:00
Ryan Cramer
69270a31b0 Fix issue processwire/processwire-issues#2039 2025-02-14 10:00:01 -05:00
Ryan Cramer
f88350baa5 Fix issue processwire/processwire-issues#2040 2025-02-14 09:57:42 -05:00
Ryan Cramer
c7ba08ecb9 Update ProcessController::jsonMessage() method so that it supports array argument, primarily for internal debugging purposes 2025-02-07 14:21:58 -05:00
Ryan Cramer
59ae7f4c7f Fix issue processwire/processwire-issues#2023 2025-02-06 11:04:21 -05:00
Ryan Cramer
0708865081 Update min PHP version in composer.json file. processwire/processwire-issues#2024 2025-02-06 10:50:17 -05:00
Ryan Cramer
6ae349b4ec Fix issue processwire/processwire-issues#2024 2025-02-06 10:35:22 -05:00
Ryan Cramer
30b34c70b3 Fix issue processwire/processwire-issues#2025 2025-02-06 10:31:22 -05:00
Ryan Cramer
e6dbc3e8eb Fix issue processwire/processwire-issues#2026 2025-02-06 10:06:10 -05:00
Ryan Cramer
a959afc422 Fix issue processwire/processwire-issues#2029 2025-02-06 09:04:08 -05:00
Ryan Cramer
4a9b904b77 Fix issue processwire/processwire-issues#2030 2025-02-06 08:48:36 -05:00
Ryan Cramer
8b5d96f1b6 Fix issue processwire/processwire-issues#2035 plus some related additions to help identify and fix pages that might incorrectly have trash status 2025-02-05 14:45:05 -05:00
Ryan Cramer
eddd6cb8ad Bump version to 3.0.245 2025-01-29 15:22:03 -05:00
Ryan Cramer
e1e938591d Updates to ProcessPageList to make some parts more hookable 2025-01-29 10:02:06 -05:00
Ryan Cramer
1805ad0a59 Improvements to FieldtypePage set of string value(s) to pages, so that it recognizes title and name for setting purposes. 2025-01-29 09:55:22 -05:00
222 changed files with 41325 additions and 444 deletions

View File

@@ -14,7 +14,7 @@
}
],
"require": {
"php": ">=5.5",
"php": ">=7.1",
"ext-gd": "*"
},
"autoload": {

View File

@@ -47,7 +47,7 @@ class Installer {
* Minimum required PHP version to install ProcessWire
*
*/
const MIN_REQUIRED_PHP_VERSION = '5.3.8';
const MIN_REQUIRED_PHP_VERSION = '7.1.0';
/**
* Test mode for installer development, non destructive
@@ -963,6 +963,17 @@ class Installer {
"\n */" .
"\n\$config->installed = " . time() . ";" .
"\n\n";
if(strpos($s, '$config->sessionName') === false) $cfg .=
"\n/**" .
"\n * Installer: Session name " .
"\n * " .
"\n * Default session name as used in session cookie. " .
"\n * Note that changing this will automatically logout any current sessions. " .
"\n * " .
"\n */" .
"\n\$config->sessionName = 'pw" . mt_rand(0, 999) . "';" .
"\n\n";
if(!empty($values['httpHosts'])) {
$cfg .=
@@ -1835,10 +1846,6 @@ class Installer {
if($value === null && empty($sanitizer)) return null;
if(version_compare(PHP_VERSION, "5.4.0", "<") && function_exists('get_magic_quotes_gpc')) {
if(get_magic_quotes_gpc()) $value = stripslashes($value);
}
switch($sanitizer) {
case 'intSigned':
$value = (int) $value;

View File

@@ -1648,6 +1648,8 @@ $config->adminEmail = '';
* #property bool compress Compress compiled CSS?
* #property array customLessFiles Custom .less files to include, relative to PW installation root.
* #property string customCssFile Target custom .css file to compile custom .less file(s) to.
* #property bool noDarkMode If theme supports a dark mode, specify true to disable it as an option.
* #property bool noTogcbx If theme supports toggle style checkboxes, disable them.
*
*/
$config->AdminThemeUikit = array(
@@ -1656,6 +1658,8 @@ $config->AdminThemeUikit = array(
'compress' => true,
'customLessFiles' => array('/site/templates/admin.less'),
'customCssFile' => '/site/assets/admin.css',
'noDarkMode' => false,
'noTogcbx' => false,
);
/**

View File

@@ -196,7 +196,13 @@ abstract class AdminThemeFramework extends AdminTheme {
$headline = (string) $this->wire('processHeadline');
if(!strlen($headline)) $headline = $this->wire()->page->get('title|name');
if($headline !== 'en' && $this->wire()->languages) $headline = $this->_($headline);
return $this->sanitizer->entities1($headline);
$headline = $this->sanitizer->entities1($headline);
if(strpos($headline, '&lt;icon-') !== false && !$this->wire()->process instanceof WirePageEditor) {
if(preg_match('/&lt;icon-([-a-z0-9]+)&gt;/', $headline, $matches)) {
$headline = str_replace($matches[0], wireIconMarkup($matches[1]), $headline);
}
}
return $headline;
}
/**
@@ -543,7 +549,19 @@ abstract class AdminThemeFramework extends AdminTheme {
*
* This is hookable so that something else could add stuff to it.
* See the method body for details on format used.
*
*
* Supported properties/attributes as of 3.0.248:
*
* - url (href)
* - title (label text)
* - target (html attr)
* - icon (name of icon)
* - permission (required permission)
* - id (html attr)
* - class (html attr)
* - onclick (html attr)
* - data-* (html attr)
*
* @return array
*
*/
@@ -600,6 +618,10 @@ abstract class AdminThemeFramework extends AdminTheme {
if(strpos($httpHost, ':')) $httpHost = preg_replace('/:\d+/', '', $httpHost); // remove port
$browserTitle .= "$httpHost";
}
if(strpos($browserTitle, '<icon-') !== false) {
$browserTitle = preg_replace('/<icon-[-a-z0-9]+>\s*/', '', $browserTitle);
}
return $this->sanitizer->entities1($browserTitle);
}
@@ -799,8 +821,7 @@ abstract class AdminThemeFramework extends AdminTheme {
*
*/
public function renderExtraMarkup($for) {
static $extras = array();
if(empty($extras)) $extras = $this->getExtraMarkup();
$extras = $this->getExtraMarkup();
return isset($extras[$for]) ? $extras[$for] : '';
}

View File

@@ -465,7 +465,7 @@ abstract class DatabaseQuery extends WireData {
if(is_array($value)) {
$curValue = array_merge($curValue, $value);
} else {
$curValue[] = trim($value, ", ");
$curValue[] = trim("$value", ", ");
}
$this->set($method, $curValue);
@@ -745,15 +745,10 @@ abstract class DatabaseQuery extends WireData {
if($exception && $options['throw']) {
if($this->wire()->config->allowExceptions) throw $exception; // throw original
$message = (string) $exception->getMessage();
$code = (int) $exception->getCode();
// note: re-throw below complains about wrong arguments if the above two
// lines are called in the line below, so variables are intermediary
throw new WireDatabaseQueryException($message, $code, $exception);
WireException([ 'class' => 'WireDatabaseQueryException', 'previous' => $exception ]);
}
return $options['returnQuery'] ? $query : $result;
}
}

View File

@@ -328,6 +328,10 @@ class DatabaseQuerySelectFulltext extends Wire {
} else {
$this->matchFieldName($fieldName, $value);
}
if(!count($this->query->where) && (strpos($operator, '~') !== false || $operator === '*+=')) {
$this->query->where('(1>2)'); // force non-match
}
return $this;
}
@@ -720,9 +724,10 @@ class DatabaseQuerySelectFulltext extends Wire {
$wordsAlternates = array();
$phraseWords = $this->words($value); // including non-indexable
$lastPhraseWord = array_pop($phraseWords);
$lastPhraseWord = (string) array_pop($phraseWords);
$scoreField = $this->getScoreFieldName();
$againstValues = array();
$matchAgainst = null;
// BOOLEAN PHRASE: full phrase matches come before expanded matches
if(count($phraseWords)) {
@@ -748,19 +753,20 @@ class DatabaseQuerySelectFulltext extends Wire {
}
}
}
$againstValues[] = ($this->isIndexableWord($lastPhraseWord) ? '+' : '') . $this->escapeAgainst($lastPhraseWord) . '*';
$bindKey = $this->query->bindValueGetKey(implode(' ', $againstValues));
$matchAgainst = "$matchType($tableField) AGAINST($bindKey IN BOOLEAN MODE)";
if($this->allowOrder) {
$this->query->select("$matchAgainst + 333.3 AS $scoreField");
$this->query->orderby("$scoreField DESC");
if(strlen($lastPhraseWord)) {
$againstValues[] = ($this->isIndexableWord($lastPhraseWord) ? '+' : '') . $this->escapeAgainst($lastPhraseWord) . '*';
$bindKey = $this->query->bindValueGetKey(implode(' ', $againstValues));
$matchAgainst = "$matchType($tableField) AGAINST($bindKey IN BOOLEAN MODE)";
if($this->allowOrder) {
$this->query->select("$matchAgainst + 333.3 AS $scoreField");
$this->query->orderby("$scoreField DESC");
}
}
if(!count($words)) {
// no words to work with for query expansion (not likely, unless stopwords or too-short)
$this->query->where($matchAgainst);
if($matchAgainst) $this->query->where($matchAgainst);
return;
}
@@ -1215,6 +1221,7 @@ class DatabaseQuerySelectFulltext extends Wire {
'stopwords' => true, // allow stopwords
'indexable' => false, // include only indexable words?
'alternates' => false, // include alternate versions of words?
'truncate' => true,
);
$options = count($options) ? array_merge($defaults, $options) : $defaults;
@@ -1312,6 +1319,7 @@ class DatabaseQuerySelectFulltext extends Wire {
*
*/
protected function strlen($value) {
$value = (string) $value;
if(function_exists('mb_strlen')) {
return mb_strlen($value);
} else {

View File

@@ -8,36 +8,133 @@
* This file is licensed under the MIT license
* https://processwire.com/about/license/mit/
*
* ProcessWire 3.x, Copyright 2020 by Ryan Cramer
* ProcessWire 3.x, Copyright 2025 by Ryan Cramer
* https://processwire.com
*
*/
/**
* Throw a new WireException functionally
*
* This can be used to facilitiate re-throwing a non-WireException as a WireException,
* notably \PDOException or other exception classes that might use string for `code` property.
*
* ~~~~
* // throw random WireException
* WireException();
*
* // throw with message
* WireException('Hello world');
*
* // throw WirePermissionException
* WireException([ 'class' => 'WirePermissionException', 'message' => 'No access' ]);
*
* // re-throw previous exception as WireException (and inherit message and code)
* WireException([ 'previous' => $exception ]);
* ~~~~
*
* @param array|string $options One of the following options, or string for just `message`:
* - `class` (string): Class name of WireException to throw (default='WireException').
* - `message` (string): Exception message string (default='' or pulled from previous exception).
* - `code` (int|string): Exception code integer or alphanumeric string (default=0 or pulled from previous exception).
* - `previous` (\Throwable): Previous exception. When present, code and message will be pulled from it if not specified.
* @throws WireException
* @since 3.0.248
*
*
*/
function WireException($options = []) {
$defaults = [
'class' => 'WireException',
'message' => is_string($options) ? $options : '',
'code' => 0,
'previous' => null,
];
$options = is_array($options) ? array_merge($defaults, $options) : $defaults;
if($options['previous'] instanceof \Throwable) {
if(empty($options['message'])) {
$options['message'] = $options['previous']->getMessage();
}
if(empty($options['code'])) {
$options['code'] = $options['previous']->getCode();
}
} else {
$options['previous'] = null;
}
$class = wireClassName($options['class'], true);
$e = new $class($options['message'], 0, $options['previous']);
if($e instanceof WireException && $options['code'] !== 0) {
$e->setCode($options['code']);
}
throw $e;
}
/**
* Generic ProcessWire exception
*
*/
class WireException extends \Exception {
/**
* Exception code when a string
*
* @var string
* @since 3.0.248
*
*/
protected $codeStr = '';
/**
* Replace previously set message
*
* Public since 3.0.248
*
* @param string $message
* @since 3.0.150
*
*/
protected function setMessage($message) {
public function setMessage($message) {
$this->message = $message;
}
/**
* Replace previously set code
*
* @param int $code
* Public since 3.0.248
*
* @param int|string $code
* @since 3.0.150
*
*/
protected function setCode($code) {
$this->code = $code;
public function setCode($code) {
if(is_string($code)) {
$this->setCodeStr($code);
if(ctype_digit($code)) $this->code = (int) $code;
} else {
$this->code = (int) $code;
}
}
/**
* Set alphanumeric code string
*
* @param string $codeStr
* @since 3.0.248
*
*/
public function setCodeStr($codeStr) {
$this->codeStr = (string) $codeStr;
}
/**
* Get alphanumeric/string code if set, blank string if not
*
* @return string
* @since 3.0.248
*
*/
public function getCodeStr() {
return $this->codeStr;
}
}
@@ -126,6 +223,7 @@ class WireDatabaseException extends WireException {}
*
* May have \PDOException populated with call to its getPrevious(); method,
* in which can it also has same getCode() and getMessage() as \PDOException.
* Use getCodeStr() for PDOException string code.
*
* @since 3.0.156
*
@@ -169,5 +267,3 @@ class PageFinderException extends WireException { }
*
*/
class PageFinderSyntaxException extends PageFinderException { }

View File

@@ -766,7 +766,7 @@ abstract class Fieldtype extends WireData implements Module {
$database = $this->wire()->database;
if(!$database->isOperator($operator)) {
throw new WireException("Operator '$operator' is not implemented in $this->className");
throw new PageFinderSyntaxException("Operator '$operator' is not implemented in $this->className");
}
$table = $database->escapeTable($table);
@@ -1378,12 +1378,13 @@ abstract class Fieldtype extends WireData implements Module {
$result = $query->execute();
} catch(\PDOException $e) {
if($e->getCode() == 23000) {
$code = (int) $e->getCode();
if($code === 23000) {
$message = sprintf(
$this->_('Value not allowed for field “%s” because it is already in use'),
$field->name
);
throw new WireDatabaseException($message, $e->getCode(), $e);
throw new WireDatabaseException($message, $code, $e);
} else {
throw $e;
}
@@ -1676,4 +1677,3 @@ abstract class Fieldtype extends WireData implements Module {
}

View File

@@ -251,7 +251,7 @@ abstract class FieldtypeMulti extends Fieldtype {
} catch(\Exception $e) {
if($useTransaction) $database->rollBack();
if($config->allowExceptions) throw $e; // throw original
throw new WireDatabaseQueryException($e->getMessage(), $e->getCode(), $e);
WireException([ 'class' => 'WireDatabaseQueryException', 'previous' => $e ]);
}
if(!count($values)) {
@@ -343,7 +343,7 @@ abstract class FieldtypeMulti extends Fieldtype {
/** @var \PDOException $exception */
if($useTransaction) $database->rollBack();
if($config->allowExceptions) throw $exception; // throw original
throw new WireDatabaseQueryException($exception->getMessage(), $exception->getCode(), $exception);
WireException([ 'class' => 'WireDatabaseQueryException', 'previous' => $exception ]);
} else {
if($useTransaction) $database->commit();
}
@@ -503,7 +503,7 @@ abstract class FieldtypeMulti extends Fieldtype {
} else if($col === 'limit') {
$value = (int) $value;
if($value > 0) $limit = $value;
if($value > -1) $limit = $value;
} else if($col === 'start') {
$value = (int) $value;

View File

@@ -519,7 +519,7 @@ abstract class Inputfield extends WireData implements Module {
if($value === true) $value = self::collapsedYes;
$value = (int) $value;
} else if(array_key_exists($key, $this->attributes)) {
} else if(array_key_exists($key, $this->attributes) && $key !== 'required') {
return $this->setAttribute($key, $value);
} else if($key === 'required' && $value && !is_object($value)) {
@@ -950,7 +950,7 @@ abstract class Inputfield extends WireData implements Module {
*/
protected function ___callUnknown($method, $arguments) {
$arg = isset($arguments[0]) ? $arguments[0] : null;
if(isset($this->attributes[$method])) {
if(isset($this->attributes[$method]) && $method !== 'required') {
// get or set an attribute
return $arg === null ? $this->getAttribute($method) : $this->setAttribute($method, $arg);
} else if(($value = $this->getSetting($method)) !== null) {

View File

@@ -15,6 +15,8 @@
*
* InputfieldWrapper is not designed to render an Inputfield specifically, but you can set a value attribute
* containing content that will be rendered before the wrapper.
*
* #pw-summary-properties Access any common Inputfield type class name from an InputfieldWrapper and it will return a new instance of that Inputfield, i.e. `$f = $inputfields->InputfieldText;` Below are several examples.
*
* @property bool $renderValueMode True when only rendering values, i.e. no inputs (default=false). #pw-internal
* @property bool $quietMode True to suppress label, description and notes, often combined with renderValueMode (default=false). #pw-internal
@@ -27,47 +29,47 @@
* @method Inputfield new($typeName, $name = '', $label = '', array $settings = []) #pw-group-manipulation
* @method bool allowProcessInput(Inputfield $inputfield) Allow Inputfield to have input processed? (3.0.207+) #pw-internal
*
* @property InputfieldAsmSelect $InputfieldAsmSelect
* @property InputfieldButton $InputfieldButton
* @property InputfieldCheckbox $InputfieldCheckbox
* @property InputfieldCheckboxes $InputfieldCheckboxes
* @property InputfieldCKEditor $InputfieldCkeditor
* @property InputfieldCommentsAdmin $InputfieldCommentsAdmin
* @property InputfieldDatetime $InputfieldDatetime
* @property InputfieldEmail $InputfieldEmail
* @property InputfieldFieldset $InputfieldFieldset
* @property InputfieldFieldsetClose $InputfieldlFieldsetClose
* @property InputfieldFieldsetOpen $InputfieldFieldsetOpen
* @property InputfieldFieldsetTabOpen $InputfieldFieldsetTabOpen
* @property InputfieldFile $InputfieldFile
* @property InputfieldFloat $InputfieldFloat
* @property InputfieldForm $InputfieldForm
* @property InputfieldHidden $InputfieldHidden
* @property InputfieldIcon $InputfieldIcon
* @property InputfieldImage $InputfieldImage
* @property InputfieldInteger $InputfieldInteger
* @property InputfieldMarkup $InputfieldMarkup
* @property InputfieldName $InputfieldName
* @property InputfieldPage $InputfieldPage
* @property InputfieldPageAutocomplete $InputfieldPageAutocomplete
* @property InputfieldPageListSelect $InputfieldPageListSelect
* @property InputfieldPageListSelectMultiple $InputfieldPageListSelectMultiple
* @property InputfieldPageName $InputfieldPageName
* @property InputfieldPageTable $InputfieldPageTable
* @property InputfieldPageTitle $InputfieldPageTitle
* @property InputfieldPassword $InputfieldPassword
* @property InputfieldRadios $InputfieldRadios
* @property InputfieldRepeater $InputfieldRepeater
* @property InputfieldSelect $InputfieldSelect
* @property InputfieldSelectMultiple $InputfieldSelectMultiple
* @property InputfieldSelector $InputfieldSelector
* @property InputfieldSubmit $InputfieldSubmit
* @property InputfieldText $InputfieldText
* @property InputfieldTextarea $InputfieldTextarea
* @property InputfieldTextTags $InputfieldTextTags
* @property InputfieldToggle $InputfieldToggle
* @property InputfieldURL $InputfieldURL
* @property InputfieldWrapper $InputfieldWrapper
* @property InputfieldAsmSelect $InputfieldAsmSelect Create new asmSelect Inputfield #pw-group-properties
* @property InputfieldButton $InputfieldButton Create new button Inputfield #pw-group-properties
* @property InputfieldCheckbox $InputfieldCheckbox Create new checkbox Inputfield #pw-group-properties
* @property InputfieldCheckboxes $InputfieldCheckboxes Create new checkboxes Inputfield #pw-group-properties
* @property InputfieldCKEditor $InputfieldCKEditor Create new CKEditor Inputfield #pw-group-properties
* @property InputfieldCommentsAdmin $InputfieldCommentsAdmin #pw-internal
* @property InputfieldDatetime $InputfieldDatetime Create new date/time Inputfield #pw-group-properties
* @property InputfieldEmail $InputfieldEmail Create new email Inputfield #pw-group-properties
* @property InputfieldFieldset $InputfieldFieldset Create new Fieldset InputfieldWrapper #pw-group-properties
* @property InputfieldFieldsetClose $InputfieldlFieldsetClose #pw-internal
* @property InputfieldFieldsetOpen $InputfieldFieldsetOpen #pw-internal
* @property InputfieldFieldsetTabOpen $InputfieldFieldsetTabOpen #pw-internal
* @property InputfieldFile $InputfieldFile Create new file Inputfield #pw-group-properties
* @property InputfieldFloat $InputfieldFloat Create new float Inputfield #pw-group-properties
* @property InputfieldForm $InputfieldForm Create new form InputfieldWrapper #pw-group-properties
* @property InputfieldHidden $InputfieldHidden Create new hidden Inputfield #pw-group-properties
* @property InputfieldIcon $InputfieldIcon Create new icon Inputfield #pw-group-properties
* @property InputfieldImage $InputfieldImage Create new image Inputfield #pw-group-properties
* @property InputfieldInteger $InputfieldInteger Create new integer Inputfield #pw-group-properties
* @property InputfieldMarkup $InputfieldMarkup Create new markup Inputfield #pw-group-properties
* @property InputfieldName $InputfieldName #pw-internal
* @property InputfieldPage $InputfieldPage Create new Page selection Inputfield #pw-group-properties
* @property InputfieldPageAutocomplete $InputfieldPageAutocomplete Create new Page selection autocomplete Inputfield #pw-group-properties
* @property InputfieldPageListSelect $InputfieldPageListSelect Create new PageListSelect Inputfield #pw-group-properties
* @property InputfieldPageListSelectMultiple $InputfieldPageListSelectMultiple Create new multiple PageListSelect Inputfield #pw-group-properties
* @property InputfieldPageName $InputfieldPageName #pw-internal
* @property InputfieldPageTable $InputfieldPageTable #pw-internal
* @property InputfieldPageTitle $InputfieldPageTitle #pw-internal
* @property InputfieldPassword $InputfieldPassword #pw-internal
* @property InputfieldRadios $InputfieldRadios Create new radio buttons Inputfield #pw-group-properties
* @property InputfieldRepeater $InputfieldRepeater #pw-internal
* @property InputfieldSelect $InputfieldSelect Create new <select> Inputfield #pw-group-properties
* @property InputfieldSelectMultiple $InputfieldSelectMultiple Create new <select multiple> Inputfield #pw-group-properties
* @property InputfieldSelector $InputfieldSelector #pw-internal
* @property InputfieldSubmit $InputfieldSubmit Create new submit button Inputfield #pw-group-properties
* @property InputfieldText $InputfieldText Create new single-line text Inputfield #pw-group-properties
* @property InputfieldTextarea $InputfieldTextarea Create new multi-line <textarea> Inputfield #pw-group-properties
* @property InputfieldTextTags $InputfieldTextTags Create new text tags Inputfield #pw-group-properties
* @property InputfieldToggle $InputfieldToggle Create new toggle Inputfield #pw-group-properties
* @property InputfieldURL $InputfieldURL Create new URL Inputfield #pw-group-properties
* @property InputfieldWrapper $InputfieldWrapper Create new generic InputfieldWrapper #pw-group-properties
*
*/
@@ -89,7 +91,7 @@ class InputfieldWrapper extends Inputfield implements \Countable, \IteratorAggre
'list' => "<ul {attrs}>{out}</ul>",
'item' => "<li {attrs}>{out}</li>",
'item_label' => "<label class='InputfieldHeader ui-widget-header{class}' for='{for}'>{out}</label>",
'item_label_hidden' => "<label class='InputfieldHeader InputfieldHeaderHidden ui-widget-header{class}'><span>{out}</span></label>",
'item_label_hidden' => "<label class='InputfieldHeader InputfieldHeaderHidden ui-widget-header{class}' for='{for}'><span>{out}</span></label>",
'item_content' => "<div class='InputfieldContent ui-widget-content{class}'>{out}</div>",
'item_error' => "<p class='InputfieldError ui-state-error'><i class='fa fa-fw fa-flash'></i><span>{out}</span></p>",
'item_description' => "<p class='description'>{out}</p>",
@@ -557,6 +559,27 @@ class InputfieldWrapper extends Inputfield implements \Countable, \IteratorAggre
return $this;
}
/**
* Remove an Inputfield from the form by name
*
* Note that this works the same as the getByName/getChildByName methods in that it
* will find (and remove) the field by name, even if nested within other wrappers
* or fieldsets. It returns the removed Inputfield when found, or null if not.
*
* @param string $name
* @return Inputfield|null Removed Inputfield object on success, or null if not found
* @since 3.0.250
*
*/
public function removeByName($name) {
$f = $this->getByName((string) $name);
if(!$f) return null;
$parent = $f->getParent();
if(!$parent instanceof InputfieldWrapper) return null;
$parent->remove($f);
return $f;
}
/**
* Prepare children for rendering by creating any fieldset groups
*
@@ -769,7 +792,7 @@ class InputfieldWrapper extends Inputfield implements \Countable, \IteratorAggre
if(in_array($collapsed, $lockedStates)) $renderValueMode = true;
$ffOut = $this->renderInputfield($inputfield, $renderValueMode);
if(!strlen($ffOut)) continue;
if(!strlen("$ffOut")) continue;
$collapsed = (int) $inputfield->getSetting('collapsed'); // retrieve again after render
$entityEncodeText = $inputfield->getSetting('entityEncodeText') === false ? false : true;
@@ -894,11 +917,17 @@ class InputfieldWrapper extends Inputfield implements \Countable, \IteratorAggre
}
if($skipLabel === Inputfield::skipLabelHeader || $quietMode) {
// label only shows when field is collapsed
$label = str_replace('{out}', $icon . $label . $toggle, $markup['item_label_hidden']);
$labelHidden = $markup['item_label_hidden'];
if(strpos($labelHidden, '{for}')) $labelHidden = str_replace('{for}', $inputfield->attr('id'), $labelHidden);
$label = str_replace('{out}', $icon . $label . $toggle, $labelHidden);
} else {
// label always visible
$label = str_replace('{out}', $icon . $label . $toggle, $markup['item_label']);
if($skipLabel !== Inputfield::skipLabelFor) $label = $this->setAttributeInMarkup('for', $for, $label, true);
if($skipLabel === Inputfield::skipLabelFor) {
$label = $this->removeAttributeFromMarkup('for', $label);
} else {
$label = $this->setAttributeInMarkup('for', $for, $label, true);
}
}
$headerClass = trim($inputfield->getSetting('headerClass') . " $classes[item_label]");
$label = $this->setAttributeInMarkup('class', $headerClass, $label);
@@ -1049,6 +1078,20 @@ class InputfieldWrapper extends Inputfield implements \Countable, \IteratorAggre
return $markup;
}
/**
* Remove named attribute from given markup
*
* @param string $name
* @param string $markup
* @return string
* @since 3.0.250
*
*/
protected function removeAttributeFromMarkup($name, $markup) {
if(stripos($markup, " $name=") === false) return $markup;
return preg_replace('!\s' . $name . '=["\'][^"\']*["\']!i', '', $markup);
}
/**
* Render Inputfield header actions
*
@@ -1080,7 +1123,7 @@ class InputfieldWrapper extends Inputfield implements \Countable, \IteratorAggre
$type = 'toggle';
$a['offIcon'] = $a['onIcon'];
}
if($type === 'toggle') $icon = $a['on'] ? $a['onIcon'] : $a['offIcon'];
if($type === 'toggle') $icon = !empty($a['on']) ? $a['onIcon'] : $a['offIcon'];
if(empty($icon) || empty($type)) continue;
$a['type'] = $type;
if(strpos($icon, 'fa-') !== 0) $icon = "fa-$icon";

View File

@@ -3579,7 +3579,7 @@ class Page extends WireData implements \Countable, WireMatchable {
*
* The output formatting state determines if a page's output is allowed to be filtered by runtime formatters.
* Pages used for output should have output formatting on. Pages you intend to manipulate and save should
* have it off.
* have it off. See this post about [output formatting](https://processwire.com/blog/posts/output-formatting/).
*
* ~~~~~
* // Set output formatting state off, for page manipulation
@@ -3596,6 +3596,7 @@ class Page extends WireData implements \Countable, WireMatchable {
* @param bool $outputFormatting Optional, default true
* @return $this
* @see Page::outputFormatting(), Page::of()
* @link https://processwire.com/blog/posts/output-formatting/
*
*/
public function setOutputFormatting($outputFormatting = true) {
@@ -3626,6 +3627,8 @@ class Page extends WireData implements \Countable, WireMatchable {
* - Pages used for front-end output should have output formatting turned ON.
*
* - Pages that you are manipulating and saving should have output formatting turned OFF.
*
* See this post about [output formatting](https://processwire.com/blog/posts/output-formatting/).
*
* ~~~~~
* // Set output formatting state off, for page manipulation
@@ -3640,6 +3643,7 @@ class Page extends WireData implements \Countable, WireMatchable {
*
* @param bool $outputFormatting If specified, sets output formatting state ON or OFF. If not specified, nothing is changed.
* @return bool Current output formatting state (before this function call, if it was changed)
* @link https://processwire.com/blog/posts/output-formatting/
*
*/
public function of($outputFormatting = null) {
@@ -4092,7 +4096,7 @@ class Page extends WireData implements \Countable, WireMatchable {
*
* ~~~~~
* // set and save a meta value
* $page->meta()->set('colors', [ 'red, 'green', 'blue' ]);
* $page->meta()->set('colors', [ 'red', 'green', 'blue' ]);
*
* // get a meta value
* $colors = $page->meta()->get('colors');

View File

@@ -392,7 +392,7 @@ class PageArray extends PaginatedArray implements WirePaginatable {
*
* This is applicable to and destructive to the WireArray.
*
* @param string|Selectors|array $selectors AttributeSelector string to use as the filter.
* @param string|Selectors|array $selectors Selector string to use as the filter.
* @param bool|int $not Make this a "not" filter? Use int 1 for "not all". (default is false)
* @return PageArray|WireArray reference to current [filtered] PageArray
*
@@ -407,7 +407,7 @@ class PageArray extends PaginatedArray implements WirePaginatable {
*
* #pw-internal
*
* @param string $selector AttributeSelector string to use as the filter.
* @param string $selector Selector string to use as the filter.
* @return PageArray|PaginatedArray|WireArray reference to current PageArray instance.
*
*/
@@ -416,11 +416,11 @@ class PageArray extends PaginatedArray implements WirePaginatable {
}
/**
* Filter out pages that don't match the selector (destructive)
* Filter out pages that DO match the selector (destructive)
*
* #pw-internal
*
* @param string $selector AttributeSelector string to use as the filter.
* @param string $selector Selector string to use
* @return PageArray|PaginatedArray|WireArray reference to current PageArray instance.
*
*/
@@ -452,7 +452,7 @@ class PageArray extends PaginatedArray implements WirePaginatable {
*
* #pw-internal
*
* @param string $selector AttributeSelector string.
* @param string $selector Selector string.
* @return PageArray|WireArray New PageArray instance
* @see WireArray::find()
*

View File

@@ -177,8 +177,8 @@ class PageComparison {
// action is just a string to return
$result = $action;
}
} else if(is_callable($action)) {
} else if(is_callable($action) && (!is_object($action) || $action instanceof \Closure)) {
// action is callable
$result = call_user_func_array($action, array($val, $key, $page));

View File

@@ -1836,7 +1836,12 @@ class PageFinder extends Wire {
if(in_array($operator, array('=', '!=', '<', '<=', '>', '>='))) {
// we only accommodate this optimization for single-value selectors...
if($this->whereEmptyValuePossible($field, $subfield, $selector, $query, $value, $whereFields)) {
if(count($valueArray) > 1 && $operator == '=') $whereFieldsType = 'OR';
if(count($valueArray) > 1) {
if($operator == '=') $whereFieldsType = 'OR';
} else {
$fieldCnt[$field->table]--;
if($fieldCnt[$field->table] < 1) unset($fieldCnt[$field->table]);
}
continue;
}
}

View File

@@ -264,7 +264,7 @@ class Pages extends Wire {
* - `findOne` (bool): Apply optimizations for finding a single page (default=false).
* - `findAll` (bool): Find all pages with no exclusions, same as "include=all" option (default=false).
* - `findIDs` (bool|int): 1 to get array of page IDs, true to return verbose array, 2 to return verbose array with all cols in 3.0.153+. (default=false).
* - `getTotal` (bool): Whether to set returning PageArray's "total" property (default=true, except when findOne=true).
* - `getTotal` (bool): Whether to set returning PageArray's "total" property (default=true) except when findOne=true.
* - `loadPages` (bool): Whether to populate the returned PageArray with found pages (default=true).
* The only reason why you'd want to change this to false would be if you only needed the count details from
* the PageArray: getTotal(), getStart(), getLimit, etc. This is intended as an optimization for $pages->count().
@@ -1946,6 +1946,11 @@ class Pages extends Wire {
$class = empty($options['pageClass']) ? 'Page' : $options['pageClass'];
unset($options['template'], $options['parent'], $options['pageClass']);
if($template && !$template instanceof Template) {
$template = $this->wire()->templates->get($template);
if(!$template instanceof Template) $template = null;
}
if(strpos($class, "\\") === false) $class = wireClassName($class, true);

View File

@@ -815,6 +815,11 @@ class PagesEditor extends Wire {
if($page->templatePrevious) $this->pages->templateChanged($page);
if(in_array('status', $changes)) $this->pages->statusChanged($page);
}
if($triggerAddedPage && $page->rootParent()->id === $this->wire()->config->trashPageID) {
// new page created directly in trash, not a great way to start but that's how it is
$this->savePageStatus($page, Page::statusTrash);
}
$this->pages->debugLog('save', $page, true);
@@ -1094,29 +1099,34 @@ class PagesEditor extends Wire {
$database = $this->wire()->database;
$rowCount = 0;
$multi = is_array($pageID) || $pageID instanceof PageArray;
$page = $pageID instanceof Page ? $pageID : null;
$status = (int) $status;
if($status < 0 || $status > Page::statusMax) {
throw new WireException("status must be between 0 and " . Page::statusMax);
}
$sql = "UPDATE pages SET status=";
$sqlUpdate = "UPDATE pages SET status=";
if($remove === 2) {
// overwrite status (internal/undocumented)
$sql .= "status=$status";
$sqlUpdate .= "status=$status";
if($page instanceof Page) $page->status = $status;
} else if($remove) {
// remove status
$sql .= "status & ~$status";
$sqlUpdate .= "status & ~$status";
if($page instanceof Page) $page->removeStatus($status);
} else {
// add status
$sql .= "status|$status";
$sqlUpdate .= "status|$status";
if($page instanceof Page) $page->addStatus($status);
}
if($multi && $recursive) {
// multiple page IDs combined with recursive option, must be handled individually
foreach($pageID as $id) {
$rowCount += $this->savePageStatus((int) "$id", $status, $recursive, $remove);
$id = $id instanceof Page ? $id : (int) "$id";
$rowCount += $this->savePageStatus($id, $status, $recursive, $remove);
}
// exit early in this case
return $rowCount;
@@ -1128,15 +1138,17 @@ class PagesEditor extends Wire {
$id = (int) "$id";
if($id > 0) $ids[$id] = $id;
}
if(!count($ids)) $ids[] = 0;
$query = $database->prepare("$sql WHERE id IN(" . implode(',', $ids) . ")");
$database->execute($query);
return $query->rowCount();
if(count($ids)) {
$query = $database->prepare("$sqlUpdate WHERE id IN(" . implode(',', $ids) . ")");
$database->execute($query);
$rowCount = $query->rowCount();
}
return $rowCount;
} else {
// single page ID or Page object
$pageID = (int) "$pageID";
$query = $database->prepare("$sql WHERE id=:page_id");
$query = $database->prepare("$sqlUpdate WHERE id=:page_id");
$query->bindValue(":page_id", $pageID, \PDO::PARAM_INT);
$database->execute($query);
$rowCount = $query->rowCount();
@@ -1146,12 +1158,13 @@ class PagesEditor extends Wire {
// recursive mode assumed from this point forward
$parentIDs = array($pageID);
$ids = [];
do {
$parentID = array_shift($parentIDs);
// update all children to have the same status
$query = $database->prepare("$sql WHERE parent_id=:parent_id");
$query = $database->prepare("$sqlUpdate WHERE parent_id=:parent_id");
$query->bindValue(":parent_id", $parentID, \PDO::PARAM_INT);
$database->execute($query);
$rowCount += $query->rowCount();
@@ -1171,13 +1184,19 @@ class PagesEditor extends Wire {
/** @noinspection PhpAssignmentInConditionInspection */
while($row = $query->fetch(\PDO::FETCH_ASSOC)) {
$parentIDs[] = (int) $row['id'];
$id = (int) $row['id'];
$parentIDs[$id] = $id;
$ids[$id] = $id;
}
$query->closeCursor();
} while(count($parentIDs));
if(count($ids)) {
$rowCount += $this->savePageStatus($ids, $status, false, $remove);
}
return $rowCount;
}

View File

@@ -126,6 +126,7 @@ class PagesTrash extends Wire {
if($info['restorable']) {
// we detected original parent
if($this->lastAction !== "restore:$page") $this->pages->restoreReady($page);
$this->pages->editor()->savePageStatus($page->id, Page::statusTrash, true, true);
} else if(!$page->parent->isTrash()) {
// page has had new parent already set

View File

@@ -17,6 +17,7 @@
* https://processwire.com
*
* @method Page add($name)
* @method Page new(array $options = []) 3.0.249
* @method bool save(Page $page)
* @method bool delete(Page $page, $recursive = false)
*
@@ -89,6 +90,23 @@ class PagesType extends Wire implements \IteratorAggregate, \Countable {
parent::__construct();
}
/**
* Create new instance of this page type
*
* @param array $options
* @return Page
* @since 3.0.249
*
*/
public function ___new(array $options = []) {
$defaults = array(
'template' => $this->getTemplate(),
'parent' => $this->getParent(),
'pageClass' => $this->getPageClass()
);
return $this->wire()->pages->newPage(array_merge($defaults, $options));
}
/**
* Add one or more templates that this PagesType represents
*

View File

@@ -16,6 +16,7 @@
* @method void added(Page $page) Hook called just after a Permission is added #pw-hooker
* @method void deleteReady(Page $page) Hook called before a Permission is deleted #pw-hooker
* @method void deleted(Page $page) Hook called after a permission is deleted #pw-hooker
* @method Permission new($options = []) Create new Permission instance in memory (3.0.249+)
*
*/
class Permissions extends PagesType {

View File

@@ -251,6 +251,8 @@ abstract class Process extends WireData implements Module {
*
*/
public function ___breadcrumb($href, $label) {
if(is_array($label)) return $this;
$label = (string) $label;
$pos = strpos($label, '/');
if($pos !== false && strpos($href, '/') === false) {
// arguments got reversed, we'll work with it anyway...

View File

@@ -328,7 +328,8 @@ class ProcessController extends Wire {
public function ___execute() {
$debug = $this->wire()->config->debug;
$breadcrumbs = $this->wire()->breadcrumbs;
$breadcrumbs = $this->wire()->breadcrumbs;
$adminTheme = $this->wire()->adminTheme;
$headline = $this->wire('processHeadline');
$numBreadcrumbs = $breadcrumbs ? count($breadcrumbs) : null;
$process = $this->getProcess();
@@ -398,6 +399,20 @@ class ProcessController extends Wire {
$content = '';
}
}
if(!$process instanceof WirePageEditor) {
$headline = (string) $this->wire('processHeadline');
if(strlen($headline)) {
if(strpos($headline, '<icon-') === false) {
// $icon = $this->wire()->modules->getModuleInfoProperty('icon');
// if($icon) $process->headline("<icon-$icon> $headline");
} else {
if(!$adminTheme instanceof AdminThemeFramework) {
$process->headline(preg_replace('/(?:<|&lt;)icon-[-a-z0-9]+(?:>|&gt;)/', '', $headline));
}
}
}
}
return $content;
}
@@ -486,18 +501,22 @@ class ProcessController extends Wire {
/**
* Generate a message in JSON format, for use with AJAX output
*
* @param string $msg
* @param bool $error
* @param bool $allowMarkup
* @param string|array $msg Message string or in 3.0.246+ also accepts an array of extra data
* When using an array, please include a 'message' index with text about the error or non-error.
* @param bool $error Is this in error message? Default is true, or specify false if not.
* @param bool $allowMarkup Allow markup in message? Applies only to $msg string or 'message' index of array (default=false)
* @return string JSON encoded string
*
*/
public function jsonMessage($msg, $error = false, $allowMarkup = false) {
if(!$allowMarkup) $msg = $this->wire()->sanitizer->entities($msg);
return json_encode(array(
'error' => (bool) $error,
'message' => (string) $msg
));
$a = array('error' => (bool) $error, 'message' => '');
if(is_array($msg)) {
$a = array_merge($a, $msg);
} else {
$a['message'] = (string) $msg;
}
if(!$allowMarkup) $a['message'] = $this->wire()->sanitizer->entities($a['message']);
return json_encode($a);
}
/**

View File

@@ -80,7 +80,7 @@ class ProcessWire extends Wire {
* Reversion revision number
*
*/
const versionRevision = 244;
const versionRevision = 251;
/**
* Version suffix string (when applicable)

View File

@@ -14,6 +14,7 @@
* @method void added(Page $page) Hook called just after a Role is added #pw-hooker
* @method void deleteReady(Page $page) Hook called before a Role is deleted #pw-hooker
* @method void deleted(Page $page) Hook called after a Role is deleted #pw-hooker
* @method Role new($options = []) Create new Role instance in memory (3.0.249+)
*
*/

View File

@@ -5013,6 +5013,7 @@ class Sanitizer extends Wire {
* - `maxWordLength` (int): Maximum word length (default=80)
* - `maxWords` (int): Maximum number of words allowed (default=0, no limit)
* - `stripTags` (bool): Strip markup tags so they dont contribute to returned word list? (default=true)
* - `truncate` (bool): Truncate rather than remove words that exceed maxWordLength? (default=false) 3.0.250+
* @return array
* @since 3.0.160
*
@@ -5030,6 +5031,7 @@ class Sanitizer extends Wire {
'keepNumberFormat' => true,
'keepChars' => array(),
'stripTags' => true,
'truncate' => false,
);
$options = array_merge($defaults, $options);
@@ -5122,8 +5124,17 @@ class Sanitizer extends Wire {
continue;
}
$length = $this->multibyteSupport ? mb_strlen($word) : strlen($word);
if($length < $minLength || $length > $maxLength) {
// remove any words that are outside the min/max length requirements
if($length > $maxLength) {
// remove or truncate any words that are too long
if($options['truncate']) {
$word = $this->multibyteSupport ? mb_substr($word, 0, $maxLength) : substr($word, 0, $maxLength);
$words[$key] = $word;
} else {
unset($words[$key]);
continue;
}
} else if($length < $minLength) {
// remove any words that are are not long enough
unset($words[$key]);
continue;
} else if($keepChars !== '' && !strlen(trim($word, $keepChars))) {

View File

@@ -599,6 +599,7 @@ class Tfa extends WireData implements Module, ConfigurableModule {
$f->attr('name', 'tfa_code');
$f->label = $this->inputLabel; // Authentication code
$f->attr('required', 'required');
$f->attr('autocomplete', 'one-time-code');
$f->collapsed = Inputfield::collapsedNever;
$form->add($f);

View File

@@ -14,6 +14,8 @@
* @method void added($user) Hook called just after a User is added #pw-hooker
* @method void deleteReady($user) Hook called before a User is deleted #pw-hooker
* @method void deleted($user) Hook called after a User is deleted #pw-hooker
* @method User new($options = []) Create new User instance in memory (3.0.249+)
*
*
*/
@@ -156,9 +158,11 @@ class Users extends PagesType {
*
*/
public function newUser() {
$config = $this->wire()->config;
/** @var User $user */
$user = $this->wire()->pages->newPage(array(
'template' => 'user',
'template' => $this->wire()->templates->get($config->userTemplateID),
'parent' => $config->usersPageID,
'pageClass' => $this->getPageClass()
));
return $user;

View File

@@ -15,7 +15,6 @@
* https://processwire.com
*
* @method WireArray and($item)
* @method static WireArray new($items = array())
* @property int $count Number of items
* @property Wire|null $first First item
* @property Wire|null $last Last item
@@ -1653,9 +1652,11 @@ class WireArray extends Wire implements \IteratorAggregate, \ArrayAccess, \Count
if(is_array($v)) $v = implode(' ', $this->wire()->sanitizer->flatArray($v));
$value[] = (string) $v;
}
} else {
} else if($item instanceof Wire) {
$value = $this->getItemPropertyValue($item, $selector->field);
$value = is_array($value) ? $this->wire()->sanitizer->flatArray($value) : (string) $value;
} else {
$value = $item; // integer, string, etc. (non-Wire object)
}
if($not === $selector->matches($value) && isset($this->data[$key])) {
$qtyMatch++;

View File

@@ -47,6 +47,7 @@ class WireHooks {
* - fromClass: the name of the class containing the hooked method, if not the object where addHook was executed. Set automatically, but you may still use in some instances.
* - argMatch: array of Selectors objects where the indexed argument (n) to the hooked method must match, order to execute hook.
* - objMatch: Selectors object that the current object must match in order to execute hook
* - retMatch: Selectors object that must match the return value, or a match string to match return value
* - public: auto-assigned to true or false by addHook() as to whether the method is public or private/protected.
*
*/
@@ -58,7 +59,10 @@ class WireHooks {
'allInstances' => false,
'fromClass' => '',
'argMatch' => null,
'argMatchType' => [],
'objMatch' => null,
'retMatch' => null,
'retMatchType' => '',
);
/**
@@ -631,8 +635,21 @@ class WireHooks {
$options['fromClass'] = $fromClass;
}
$retMatch = '';
$argOpen = strpos($method, '(');
if($argOpen) {
if($argOpen) {
if(strpos($method, ':(')) {
list($method, $retMatch) = explode(':(', $method, 2);
$retMatch = rtrim($retMatch, ') ');
} else if(strpos($method, ':<') && substr(trim($method), -1) === '>') {
list($method, $retMatch) = explode(':<', $method, 2);
$retMatch = "<$retMatch";
}
$argOpen = strpos($method, '(');
}
if($argOpen) {
// arguments to match may be specified in method name
$argClose = strpos($method, ')');
if($argClose === $argOpen+1) {
@@ -659,18 +676,31 @@ class WireHooks {
// just single argument specified, so argument 0 is assumed
}
if(is_string($argMatch)) $argMatch = array(0 => $argMatch);
$argMatchType = [];
foreach($argMatch as $argKey => $argVal) {
if(Selectors::stringHasSelector($argVal)) {
/** @var Selectors $selectors */
$selectors = $this->wire->wire(new Selectors());
$selectors->init($argVal);
$argMatch[$argKey] = $selectors;
}
list($argVal, $argValType) = $this->prepareArgMatch($argVal);
$argMatch[$argKey] = $argVal;
$argMatchType[$argKey] = $argValType;
}
if(count($argMatch)) {
$options['argMatch'] = $argMatch;
$options['argMatchType'] = $argMatchType;
}
if(count($argMatch)) $options['argMatch'] = $argMatch;
}
} else if(strpos($method, ':')) {
list($method, $retMatch) = explode(':', $method, 2);
}
if($retMatch) {
// match return value
if($options['before'] && !$options['after']) {
throw new WireException('You cannot match return values with “before” hooks');
}
list($retMatch, $retMatchType) = $this->prepareArgMatch($retMatch);
$options['retMatch'] = $retMatch;
$options['retMatchType'] = $retMatchType;
}
$localHooks = $object->getLocalHooks();
if($options['allInstances'] || $options['fromClass']) {
@@ -996,50 +1026,25 @@ class WireHooks {
if($type == 'method' && !empty($hook['options']['argMatch'])) {
// argument comparison to determine at runtime whether to execute the hook
$argMatches = $hook['options']['argMatch'];
$argMatchTypes = $hook['options']['argMatchType'];
$matches = true;
foreach($argMatches as $argKey => $argMatch) {
/** @var Selectors $argMatch */
$argMatchType = isset($argMatchTypes[$argKey]) ? $argMatchTypes[$argKey] : '';
$argVal = isset($arguments[$argKey]) ? $arguments[$argKey] : null;
if(is_object($argMatch)) {
// Selectors object
if(is_object($argVal)) {
$matches = $argMatch->matches($argVal);
} else {
// we don't work with non-object here
$matches = false;
}
} else if(is_string($argMatch) && strpos($argMatch, '<') === 0 && substr($argMatch, -1) === '>') {
// i.e. <Page>, <User>, <string>, <object>, <bool>, etc.
$argMatch = trim($argMatch, '<>');
if(strpos($argMatch, '|')) {
// i.e. <User|Role|Permission> or <int|float> etc.
$argMatches = explode('|', str_replace(array('<', '>'), '', $argMatch));
} else {
$argMatches = array($argMatch);
}
foreach($argMatches as $argMatchType) {
if(isset($this->argMatchTypes[$argMatchType])) {
$argMatchFunc = $this->argMatchTypes[$argMatchType];
$matches = $argMatchFunc($argVal);
} else {
$matches = wireInstanceOf($argVal, $argMatchType);
}
if($matches) break;
}
} else {
if(is_array($argVal)) {
// match any array element
$matches = in_array($argMatch, $argVal);
} else {
// exact string match
$matches = $argMatch == $argVal;
}
}
$matches = $this->conditionalArgMatch($argMatch, $argVal, $argMatchType);
if(!$matches) break;
}
if(!$matches) continue; // don't run hook
}
if($type === 'method' && $when === 'after' && !empty($hook['options']['retMatch'])) {
if(!$this->conditionalArgMatch(
$hook['options']['retMatch'],
$result['return'],
$hook['options']['retMatchType'])) continue;
}
if($this->allowPathHooks && isset($this->pathHooks[$hook['id']])) {
$allowRunPathHook = $this->allowRunPathHook($hook['id'], $arguments);
$this->removeHook($object, $hook['id']); // once only
@@ -1135,9 +1140,104 @@ class WireHooks {
}
/**
* Allow given path hook to run?
* Prepare argument match
*
* This checks if the hooks path matches the request path, allowing for both
* @param string $argMatch
* @return array
* @since 3.0.247
*
*/
protected function prepareArgMatch($argMatch) {
$argMatch = trim($argMatch, '()');
$argMatchType = '';
list($c1, $c2, $c3) = [ substr($argMatch, 0, 1), substr($argMatch, -1), substr($argMatch, 0, 2) ];
if($c1 === '<' && $c2 === '>') {
// i.e. <WireArray> or <ThisPage|ThatPage>
$argMatchType = 'instanceof';
$argMatch = trim($argMatch, '<>');
} else if($c1 === '=' || $c1 === '<' || $c1 === '>' || Selectors::isOperator($c3)) {
// selector that starts with operator and translates to "argVal matches argMatch"
$argMatch = "___val$argMatch"; // i.e. ___val=something
$argMatchType = 'selector';
}
if($argMatchType === 'instanceof') {
// ok
$argMatch = strpos($argMatch, '|') ? explode('|', $argMatch) : [ $argMatch ];
} else if(Selectors::stringHasSelector($argMatch)) {
/** @var Selectors $selectors */
$selectors = $this->wire->wire(new Selectors());
$selectors->init($argMatch);
$argMatch = $selectors;
$argMatchType = 'selector';
} else {
$argMatchType = 'equals';
}
return [ $argMatch, $argMatchType ];
}
/**
* Does given value match given match condition?
*
* @param Selectors|string $argMatch
* @param mixed $argVal
* @return bool
* @since 3.0.247
*
*/
protected function conditionalArgMatch($argMatch, $argVal, $argMatchType) {
$matches = false;
if($argMatch instanceof Selectors) {
// Selectors object
/** @var Selector $s */
$s = $argMatch->first();
if($s instanceof Selector && $s->field() === '___val') {
$o = WireData();
$o->set('value', $argVal);
$s->field = 'value';
$argVal = $o;
} else if(is_array($argVal)) {
$argVal = count($argVal) && is_string(key($argVal)) ? WireData($argVal) : WireArray($argVal);
}
if(is_object($argVal)) {
$matches = $argMatch->matches($argVal);
}
} else if($argMatchType === 'instanceof') {
if(!is_array($argMatch)) $argMatch = [ $argMatch ];
foreach($argMatch as $type) {
if(isset($this->argMatchTypes[$type])) {
$argMatchFunc = $this->argMatchTypes[$type];
$matches = $argMatchFunc($argVal);
} else {
$matches = wireInstanceOf($argVal, $type);
}
if($matches) break;
}
} else if(is_array($argVal)) {
// match any array element
$matches = in_array($argMatch, $argVal);
} else {
// exact match
$matches = $argMatch == $argVal;
}
return $matches;
}
/**
* Allow given path hook to run?
*
* This checks if the hooks path matches the request path, allowing for both
* regular and regex matches and populating parenthesized portions to arguments
* that will appear in the HookEvent.
*
@@ -1175,6 +1275,15 @@ class WireHooks {
$regexDelim = $matchPath[0];
} else {
// needs to be in regex format
if(strpos($matchPath, '.') !== false) {
// preserve some regex sequences containing periods
$r = [ '.+' => '•+', '.*' => '•*', '\\.' => '\\•' ];
$matchPath = str_replace(array_keys($r), array_values($r), $matchPath);
// force any remaining periods to be taken literally
$matchPath = str_replace('.', '\\.', $matchPath);
// restore regex sequences containing periods
$matchPath = str_replace(array_values($r), array_keys($r), $matchPath);
}
if(strpos($matchPath, '/') === 0) $matchPath = "^$matchPath";
$matchPath = "#$matchPath$#";
}

View File

@@ -5,7 +5,7 @@
*
* Supports finding and manipulating of markup regions in an HTML document.
*
* ProcessWire 3.x, Copyright 2023 by Ryan Cramer
* ProcessWire 3.x, Copyright 2025 by Ryan Cramer
* https://processwire.com
*
*/
@@ -37,23 +37,40 @@ class WireMarkupRegions extends Wire {
*
*/
protected $selfClosingTags = array(
'link',
'area',
'base',
'br',
'col',
'command',
'embed',
'hr',
'img',
'input',
'keygen',
'link',
'meta',
'param',
'source',
'track',
'wbr',
'link' => 'link',
'area' => 'area',
'base' => 'base',
'br' => 'br',
'col' => 'col',
'command' => 'command',
'embed' => 'embed',
'hr' => 'hr',
'img' => 'img',
'input' => 'input',
'keygen' => 'keygen',
'link' => 'link',
'meta' => 'meta',
'param' => 'param',
'source' => 'source',
'track' => 'track',
'wbr' => 'wbr',
);
/**
* Tags that generally only appear once in the output
*
* These can be used as unnamed markup regions
*
* @var string[]
*
*/
protected $singles = array(
'html' => 'html',
'head' => 'head',
'title' => 'title',
'body' => 'body',
'main' => 'main',
'base' => 'base',
);
/**
@@ -63,14 +80,24 @@ class WireMarkupRegions extends Wire {
*
*/
protected $actions = array(
'prepend',
'append',
'before',
'after',
'replace',
'remove',
'prepend' => 'prepend',
'append' => 'append',
'before' => 'before',
'after' => 'after',
'replace' => 'replace',
'remove' => 'remove',
'update' => 'update',
);
/**
* Markup snippets that should be removed from final output
*
* @var array
* @since 3.0.250
*
*/
protected $removals = array();
/**
* Locate and return all regions of markup having the given attribute
*
@@ -737,7 +764,7 @@ class WireMarkupRegions extends Wire {
if($name && !isset($attrs[$name])) $attrs[$name] = $val;
$tag = rtrim($tag); // remove extra space we added
$tagName = strtolower($tagName);
$selfClosing = in_array($tagName, $this->selfClosingTags);
$selfClosing = isset($this->selfClosingTags[$tagName]);
$classes = isset($attrs['class']) ? explode(' ', $attrs['class']) : array();
$id = isset($attrs['id']) ? $attrs['id'] : '';
$pwid = '';
@@ -768,7 +795,7 @@ class WireMarkupRegions extends Wire {
} else {
$actionTarget = $value;
}
if($actionTarget && in_array($action, $this->actions)) {
if($actionTarget && isset($this->actions[$action])) {
// found a valid action and target
unset($attrs[$name]);
$actionType = $actionTarget === true ? 'bool' : 'attr';
@@ -786,7 +813,7 @@ class WireMarkupRegions extends Wire {
list($prefix, $action) = explode('-', $class, 2);
if(strpos($action, '-')) list($action, $actionTarget) = explode('-', $action, 2);
if($prefix && $actionTarget) {} // ignore
if(in_array($action, $this->actions)) {
if(isset($this->actions[$action])) {
// valid action, remove action from classes and class attribute
unset($classes[$key]);
$attrs['class'] = implode(' ', $classes);
@@ -804,6 +831,10 @@ class WireMarkupRegions extends Wire {
// if there's an action, but no target, the target is assumed to be the pw-id or id
if($action && (!$actionTarget || $actionTarget === true)) $actionTarget = $pwid;
if(strpos($actionTarget, '^') === 0) {
$actionType = 'tag';
}
$info = array(
'id' => $id,
'pwid' => $pwid ? $pwid : $id,
@@ -956,14 +987,38 @@ class WireMarkupRegions extends Wire {
$classes = explode(' ', $value);
$classes = array_merge($tagInfo['classes'], $classes);
$classes = array_unique($classes);
// identify remove classes
$forceAddClasses = [];
$removeMatchClasses = [];
// identify force add and remove classes
foreach($classes as $key => $class) {
if(strpos($class, '-') !== 0) continue;
$removeClass = ltrim($class, '-');
unset($classes[$key]);
while(false !== ($k = array_search($removeClass, $classes))) unset($classes[$k]);
if(strpos($class, '+') === 0){
$class = ltrim($class, '+');
$forceAddClasses[$class] = $class;
unset($classes[$key]);
} else if(strpos($class, '-') === 0) {
$removeClass = substr($class, 1);
if(strpos($removeClass, '*') !== false) $removeMatchClasses[] = $removeClass;
unset($classes[$key]);
while(false !== ($k = array_search($removeClass, $classes))) unset($classes[$k]);
}
}
$attrs['class'] = implode(' ', $classes);
if(count($classes) && count($removeMatchClasses)) {
foreach($removeMatchClasses as $removeClass) {
if(strpos($removeClass, '/') === 0) {
// already a regex
if(strrpos($removeClass, '/') === 0) $removeClass .= '/';
} else {
// convert wildcard to regex
$removeClass = '/^' . str_replace('\\*', '.+', preg_quote($removeClass, '/')) . '$/';
}
foreach($classes as $key => $class) {
if(preg_match($removeClass, $class)) {
unset($classes[$key]);
}
}
}
}
$attrs['class'] = implode(' ', array_merge($forceAddClasses, $classes));
} else {
// replace
$attrs[$name] = $value;
@@ -1050,6 +1105,17 @@ class WireMarkupRegions extends Wire {
$pos = null;
if($name === 'tag') {
if(strpos($value, '.')) {
list($tag, $class) = explode('.', $value, 2);
if(stripos($html, "<$tag") === false) return false;
$value = $class;
$name = 'class';
} else {
return stripos($html, "<$value>") || stripos($html, "<$value ");
}
}
if($value === true) {
$tests = array(
" $name ",
@@ -1095,16 +1161,21 @@ class WireMarkupRegions extends Wire {
if($name == 'id') {
$names = '(id|pw-id|data-pw-id)';
} else {
$names = preg_quote($name);
$names = preg_quote($name, '!');
}
if($value === true) {
// match only the presence of the attribute
$regex = '!<[^<>]*\s' . $names . '[=\s/>]!i';
} else if($name === 'class') {
// match class even if other class names are present
$regex = '!<[^<>]*\sclass\s*=\s*["\'][^"\'<>]*\b' . preg_quote($value) . '[\s"\']!i';
} else {
$regex = '/<[^<>]*\s' . $names . '\s*=\s*["\']?' . preg_quote($value) . '(?:["\']|[\s>])/i';
// match attribute value
$regex = '!<[^<>]*\s' . $names . '\s*=\s*["\']?' . preg_quote($value) . '(?:["\']|[\s>])!i';
}
if(preg_match($regex, $html)) $pos = true;
}
return $pos !== false;
}
@@ -1141,6 +1212,13 @@ class WireMarkupRegions extends Wire {
if(self::debug) {
$findOptions['debugNote'] = "update.$options[action]($selector)";
}
// convert to tag matching format for find() method
if(strpos($selector, '^') === 0) {
$selector = ltrim($selector, '^');
// tag is implied if in 'tag.class' format, so only add brackets if no class
if(!strpos($selector, '.')) $selector = "<$selector>";
}
$findRegions = $this->find($selector, $markup, $findOptions);
@@ -1155,10 +1233,11 @@ class WireMarkupRegions extends Wire {
if($action == 'auto') {
// auto mode delegates to the region action
$action = '';
if(in_array($region['action'], $this->actions)) $action = $region['action'];
if(isset($this->actions[$region['action']])) $action = $region['action'];
}
switch($action) {
case 'update':
case 'append':
$replacement = $region['open'] . $region['region'] . $content . $region['close'];
break;
@@ -1273,7 +1352,30 @@ class WireMarkupRegions extends Wire {
$options['action'] = 'after'; // after intended
return $this->replace($selector, '', $markup, $options);
}
/**
* Initialize given HTML for markup regions
*
* @param string $html
* @since 3.0.250
*
*/
protected function initHtml(&$html) {
$tests = [ '="<', "='<", '="&lt;', "='&lt;" ];
foreach($tests as $test) {
$apply = strpos($html, $test);
if($apply) break;
}
if($apply) {
$actions = implode('|', $this->actions);
$html = preg_replace(
'!(<[^<>]+\s(?:data-pw-|pw-)(?:' . $actions . ')=["\'])(?:<|&lt;)([^<>\'"&]+)(?:>|&gt;)(["\'])!i',
'$1^$2$3',
$html
);
}
}
/**
* Identify and populate markup regions in given HTML
*
@@ -1355,16 +1457,20 @@ class WireMarkupRegions extends Wire {
$defaults = array(
'useClassActions' => false // allow use of "pw-*" class actions? (legacy)
);
if(is_string($htmlRegions) && $recursionLevel === 1) {
$this->initHtml($htmlRegions);
}
$options = array_merge($defaults, $options);
$leftoverMarkup = '';
$hasDebugLandmark = strpos($htmlDocument, self::debugLandmark) !== false;
$debug = $hasDebugLandmark && $this->wire()->config->debug;
$debugTimer = $debug ? Debug::timer() : 0;
$this->populateSingles($htmlDocument, $htmlRegions);
if(is_array($htmlRegions)) {
$regions = $htmlRegions;
$leftoverMarkup = '';
} else if($this->hasRegions($htmlRegions)) {
$htmlRegions = $this->stripRegions('<!--', $htmlRegions);
@@ -1406,14 +1512,39 @@ class WireMarkupRegions extends Wire {
// $xregion = $region;
$action = $region['action'];
$actionTarget = $region['actionTarget'];
$actionType = $region['actionType'];
$actionTarget = ltrim($region['actionTarget']);
if(strpos($actionTarget, '.') === 0) {
$actionAttribute = 'class';
$actionTargetPrefix = '.';
} else if(strpos($actionTarget, '^') === 0) {
$actionAttribute = 'tag';
$actionTargetPrefix = '^';
} else {
$actionAttribute = 'id';
$actionTargetPrefix = '#';
}
$actionTarget = ltrim($actionTarget, '.#^');
$regionHTML = $region['region'];
$mergeAttr = $region['attrs'];
unset($mergeAttr['id']);
$documentHasTarget = $this->hasAttribute('id', $actionTarget, $htmlDocument);
$isNew = ($region['actionType'] == 'attr' && $region['action'] != 'replace');
if(!$isNew) $isNew = $action == 'before' || $action == 'after';
$documentHasTarget = $this->hasAttribute($actionAttribute, $actionTarget, $htmlDocument);
if(!$documentHasTarget) {
// if target was not matched, check for target as a single tag (html, head, body, main)
if(isset($this->singles[$actionTarget])) {
$actionTarget = "pwmr-$actionTarget";
$documentHasTarget = $this->hasAttribute('data-pw-id', $actionTarget, $htmlDocument);
}
}
if($actionType === 'attr' || $actionType === 'tag') {
$isNew = $action != 'replace' && $action != 'update';
} else {
$isNew = $action === 'before' || $action === 'after';
}
if($isNew) {
// element is newly added element not already present
@@ -1422,7 +1553,7 @@ class WireMarkupRegions extends Wire {
$attrs = $region['attrs'];
$attrStr = count($attrs) ? ' ' . $this->renderAttributes($attrs, false) : '';
if(!strlen(trim($attrStr))) $attrStr = '';
if($region['actionType'] == 'bool') {
if($actionType == 'bool') {
$regionHTML = $region['region'];
} else {
$regionHTML = str_replace($region['open'], "<$region[name]$attrStr>", $regionHTML);
@@ -1436,7 +1567,7 @@ class WireMarkupRegions extends Wire {
$pwid = empty($region['pwid']) ? $region['actionTarget'] : $region['pwid'];
$open = $region['open'];
$openLen = strlen($open);
if($openLen > 50) $open = substr($open, 0, 30) . '[sm]... +' . ($openLen - 30) . ' bytes[/sm]>';
if($openLen > 100) $open = substr($open, 0, 100) . '[sm]... +' . ($openLen - 100) . ' bytes[/sm]>';
$debugRegionStart = "[sm]" . trim(substr($region['region'], 0, 80));
$pos = strrpos($debugRegionStart, '>');
if($pos) $debugRegionStart = substr($debugRegionStart, 0, $pos+1);
@@ -1444,8 +1575,21 @@ class WireMarkupRegions extends Wire {
//$debugRegionEnd = substr($region['region'], -30);
//$pos = strpos($debugRegionEnd, '</');
//if($pos !== false) $debugRegionEnd = substr($debugRegionEnd, $pos);
$region['note'] = strtoupper($debugAction) . " [b]#{$pwid}[/b] " .
($region['actionTarget'] != $pwid ? "(target=$region[actionTarget])" : "") .
if(strpos($open, 'pw-')) {
$open = preg_replace('!\s(data-)?pw-(' . implode('|', $this->actions) . ')(=[^\s><]+)?!', '', $open);
}
if(strpos($pwid, 'pwmr-') === 0) {
$pwid = '<' . substr($pwid, 5) . '…';
$debugActionTarget = $pwid;
} else if($actionTargetPrefix === '^') {
$pwid = "<" . ltrim($pwid, '^') . '…';
$debugActionTarget = $pwid;
} else {
$pwid = $actionTargetPrefix . $pwid;
$debugActionTarget = $actionTargetPrefix . $actionTarget;
}
$region['note'] = strtoupper($debugAction) . " {$pwid} " .
($debugActionTarget != $pwid ? "(target=$debugActionTarget) " : "") .
"[sm]with[/sm] $open";
if($region['close']) {
$region['note'] .= $this->debugNoteStr($debugRegionStart) . $region['close'];
@@ -1464,7 +1608,7 @@ class WireMarkupRegions extends Wire {
} else {
// update the markup
$updates[] = array(
'actionTarget' => "#$actionTarget",
'actionTarget' => $actionTargetPrefix . $actionTarget,
'regionHTML' => $regionHTML,
'action' => $action,
'mergeAttr' => $mergeAttr,
@@ -1559,6 +1703,41 @@ class WireMarkupRegions extends Wire {
return $numUpdates;
}
/**
* Populate single-use tags as unnamed markup regions
*
* @param string $htmlDocument
* @param array|string $htmlRegions
* @since 3.0.250
*
*/
protected function populateSingles(&$htmlDocument, &$htmlRegions) {
foreach($this->singles as $tag) {
$attr = "data-pw-id=\"pwmr-$tag\"";
$find = [ "<$tag>", "<$tag " ];
$replace = [ "<$tag $attr>", "<$tag $attr " ];
$has = false;
if(is_array($htmlRegions)) {
foreach($htmlRegions as $key => $htmlRegion) {
if(stripos($htmlRegion, "<$tag") === false) continue;
$htmlRegions[$key] = str_ireplace($find, $replace, $htmlRegion);
$has = true;
}
} else if(strpos($htmlRegions, "<$tag") !== false) {
$htmlRegions = str_ireplace($find, $replace, $htmlRegions);
$has = true;
}
if($has || stripos($htmlDocument, "<$tag") !== false) {
$htmlDocument = str_ireplace($find, $replace, $htmlDocument);
$this->removals[] = " $attr";
}
}
}
/**
* Remove any <region> or <pw-region> tags present in the markup, leaving their innerHTML contents
*
@@ -1577,9 +1756,25 @@ class WireMarkupRegions extends Wire {
$updated = true;
}
if(count($this->removals)) {
$qty = 0;
$html = str_ireplace($this->removals, '', $html, $qty);
if($qty) $updated = true;
}
if(stripos($html, ' data-pw-id=') || stripos($html, ' pw-id=')) {
$html = preg_replace('/(<[^>]+)(?: data-pw-id| pw-id)=["\']?[^>\s"\']+["\']?/i', '$1', $html);
$updated = true;
$find = [];
$replace = [];
if(preg_match_all('/(<[^<>]+?)(?: data-pw-id=| pw-id=)["\']?[^>\s"\']+["\']?/i', $html, $matches)) {
foreach($matches[0] as $key => $fullMatch) {
$find[] = $fullMatch;
$replace[] = $matches[1][$key];
}
}
if(count($find)) {
$html = str_ireplace($find, $replace, $html);
$updated = true;
}
}
return $updated;
@@ -1622,7 +1817,7 @@ class WireMarkupRegions extends Wire {
protected function debugNoteStr($str, $maxLength = 0) {
$str = str_replace(array("\r", "\n", "\t"), ' ', $str);
while(strpos($str, ' ') !== false) $str= str_replace(' ', ' ', $str);
while(strpos($str, ' ') !== false) $str = str_replace(' ', ' ', $str);
if($maxLength) $str = substr($str, 0, $maxLength);
return trim($str);
}
@@ -1631,6 +1826,7 @@ class WireMarkupRegions extends Wire {
if(!count($debugNotes)) $debugNotes[] = "Nothing found";
if($debugTimer !== null) $debugNotes[] = '[sm]' . Debug::timer($debugTimer) . ' seconds[/sm]';
$out = "" . implode("\n", $debugNotes);
$out = str_replace($this->removals, '', $out);
$out = $this->wire()->sanitizer->entities($out);
$out = str_replace(array('[sm]', '[/sm]'), array('<small style="opacity:0.7">', '</small>'), $out);
$out = str_replace(array('[b]', '[/b]'), array('<strong>', '</strong>'), $out);

View File

@@ -302,6 +302,60 @@ class WireRandom extends Wire {
return $this->alphanumeric($length, $options);
}
/**
* Generate a random string using given characters
*
* @param int $length Length of string or specify 0 for random length
* @param string $characters Charaacters to use for random string or omit for partial ASCII set
* @param array $options
* - `minLength` (int): Minimum allowed length if length argument is 0 (default=10)
* - `maxLength` (int): Maximum allowed length if length argument is 0 (default=40)
* - `fast` (bool): Use a faster randomization method? (default=false)
* @return string
* @since 3.0.251
*
*/
public function string($length = 0, $characters = '', array $options = []) {
$defaults = [
'minLength' => 10,
'maxLength' => 40,
'fast' => false,
];
$options = array_merge($defaults, $options);
if(empty($characters)) {
$characters = 'abcdefghijklmnopqrstuvwxyz';
$characters .= strtoupper($characters);
$characters .= '0123456789';
$characters .= '-_;:/.,!@$%^*()-+~|';
}
if($length < 1) {
if($options['fast']) {
$length = mt_rand($options['minLength'], $options['maxLength']);
} else {
$length = $this->integer($options['minLength'], $options['maxLength']);
}
}
$str = '';
$L = strlen($characters) - 1;
for($n = 0; $n < $length; $n++) {
if($options['fast']) {
$v = mt_rand(0, $L);
} else {
$v = $this->integer(0, $L);
}
$c = substr($characters, $v, 1);
$str .= $c;
}
return $str;
}
/**
* Get a random integer
*

View File

@@ -90,6 +90,25 @@ class WireShutdown extends Wire {
*/
protected $error = array();
/**
* Methods that should have their arguments suppressed from PHP backtraces
*
* - Each method must include a `->`.
* - Methods should not include parenthesis.
* - If for specific class, include the class name before the `->`.
*
* @var string[]
*
*/
protected $banBacktraceMethods = array(
'->___login', // Session or ProcessLogin
'->___start', // i.e. Tfa
'->___setPass', // Password.php
'Session->___authenticate',
'Password->matches',
'Password->hash',
);
/**
* Default HTML to use for error message
*
@@ -188,6 +207,7 @@ class WireShutdown extends Wire {
protected function getErrorMessage(array $error) {
$type = $error['type'];
$config = $this->config;
if(isset($this->types[$type])) {
$errorType = $this->types[$type];
@@ -203,7 +223,25 @@ class WireShutdown extends Wire {
$detail = '';
}
return "$errorType: \t$message $detail ";
$message = "$errorType: \t$message $detail ";
if(strpos($message, '#1') !== false && stripos($message, '):')) {
// backtrace likely present in $message
// methods that should have their arguments excluded from backtrace
foreach($this->banBacktraceMethods as $name) {
if(strpos($message, "$name(") === false) continue;
if(!preg_match_all('!' . $name . '\([^\n]+\)!', $message, $matches)) continue;
foreach($matches[0] as $match) {
$message = str_replace($match, '->' . $name . '(...)', $message);
}
}
}
if(strlen((string) $config->dbPass) > 4) {
$message = str_replace((string) $config->dbPass, '[...]', $message);
}
return $message;
}
/**

View File

@@ -72,6 +72,11 @@ class WireTempDir extends Wire {
if(!is_null($this->tempDirRoot)) throw new WireException("Temp dir has already been created");
if(empty($name)) $name = $this->createName();
if(is_object($name)) $name = wireClassName($name, false);
if($basePath && !$this->wire()->files->allowPath($basePath, true)) {
$this->log("Given base path $basePath is not within ProcessWire assets so has been replaced");
$basePath = '';
}
$basePath = $this->classRootPath(true, $basePath);
$this->classRoot = $basePath;

View File

@@ -22,7 +22,21 @@
* @property int $toggleBehavior (0=Standard, 1=Consistent)
* @property string $configPhpHash Hash used internally to detect changes to $config->AdminThemeUikit settings.
* @property int $cssVersion Current version number of core CSS/LESS files
* @property string $themeName One of blank (original) or name of theme style
* @property array $themeInfos where theme style files are located
*
* Settings specific to default theme
* ----------------------------------
* @property string $defaultMainColor Main color or 'custom' (default='red')
* @property string $defaultMainColorCustom Main custom color hex code when `defaultMainColor=custom` (default='#eb1d61')
* @property string $defaultMainColorCustomDark Same as above but when used, applies only to dark mode.
* @property string $defaultStyleName Style name, one of 'dark', 'light' or 'auto' (default='auto')
* @property array $defaultToggles Toggles for specific behaviors (default=[])
* @property string $defaultCustomCss Custom CSS rules string (default='')
* @property string $defaultCustomCssFile URL to custom CSS file, relative to installation root (default='')
*
* Hookable methods
* ----------------
* @method string renderBreadcrumbs()
* @method string getUikitCSS()
*
@@ -33,9 +47,10 @@ class AdminThemeUikit extends AdminThemeFramework implements Module, Configurabl
public static function getModuleInfo() {
return array(
'title' => 'Uikit',
'version' => 34,
'version' => 36,
'summary' => 'Uikit v3 admin theme',
'autoload' => 'template=admin',
'icon' => 'smile-o',
);
}
@@ -104,6 +119,8 @@ class AdminThemeUikit extends AdminThemeFramework implements Module, Configurabl
$this->set('ukGrid', false);
$this->set('configPhpHash', '');
$this->set('cssVersion', 0);
$this->set('themeName', 'default');
$this->set('themeInfos', array('z' => 'z')); // z=sleeping
$this->setClasses(array(
'input' => 'uk-input',
'input-small' => 'uk-input uk-form-small',
@@ -117,7 +134,17 @@ class AdminThemeUikit extends AdminThemeFramework implements Module, Configurabl
'table' => 'uk-table uk-table-divider uk-table-justify uk-table-small',
'dl' => 'uk-description-list uk-description-list-divider',
));
// settings specific to default theme/style
$this->setArray([
'defaultStyleName' => 'light',
'defaultMainColor' => 'red',
'defaultMainColorCustom' => '#eb1d61',
'defaultMainColorCustomDark' => '',
'defaultToggles' => [ 'useInputFocus' ],
'defaultCustomCss' => '',
'defaultCustomCssFile' => '',
]);
}
public function wired() {
@@ -135,14 +162,21 @@ class AdminThemeUikit extends AdminThemeFramework implements Module, Configurabl
// if this is not the current admin theme, exit now so no hooks are attached
if(!$this->isCurrent()) return;
/** @var Page $page */
$page = $this->wire('page');
/** @var Modules $modules */
$modules = $this->wire('modules');
/** @var Modules $modules */
$session = $this->wire('session');
$sidenav = strpos($this->layout, 'sidenav') === 0;
$page = $this->wire()->page;
$pages = $this->wire()->pages;
$modules = $this->wire()->modules;
$session = $this->wire()->session;
$config = $this->wire()->config;
$input = $this->wire()->input;
$themeName = $this->themeName;
if($themeName) {
$sidenav = false;
$this->layout = '';
} else {
$sidenav = strpos($this->layout, 'sidenav') === 0;
}
// disable sidebar layout if SystemNotifications is active
if($sidenav && $modules->isInstalled('SystemNotifications')) {
@@ -154,7 +188,7 @@ class AdminThemeUikit extends AdminThemeFramework implements Module, Configurabl
}
}
if(!$page || $page->template != 'admin') {
if(!$page || $page->template->name !== 'admin') {
// front-end
if($sidenav) {
// ensure that page edit links on front-end load the sidenav-init
@@ -179,7 +213,12 @@ class AdminThemeUikit extends AdminThemeFramework implements Module, Configurabl
$this->addBodyClass('AdminThemeUikit');
}
$themeName = $this->themeName;
if(empty($themeName)) $themeName = 'Original';
$this->addBodyClass('AdminThemeUikit' . ucfirst($themeName));
$session->removeFor('Page', 'appendEditUrl');
/** @var JqueryUI $jqueryUI */
$jqueryUI = $modules->get('JqueryUI');
$jqueryUI->use('panel');
@@ -196,13 +235,22 @@ class AdminThemeUikit extends AdminThemeFramework implements Module, Configurabl
$this->addHookAfter('ProcessLogin::afterLoginURL', $this, 'hookAfterLoginURL');
if(strpos($this->layout, 'sidenav-tree') === 0) {
// page-edit breadcrumbs go to page editor when page tree is always in sidebar
$this->wire('config')->pageEdit('editCrumbs', true);
$config->pageEdit('editCrumbs', true);
}
}
// add cache clearing hooks
$this->wire('pages')->addHookAfter('saved', $this, 'hookClearCaches');
$pages->addHookAfter('saved', $this, 'hookClearCaches');
$modules->addHookAfter('refresh', $this, 'hookClearCaches');
if($themeName) {
$themeInfo = $this->getThemeInfo($themeName);
$user = $this->wire()->user;
if($themeInfo && $themeInfo['path']) {
$adminTheme = $this;
include($themeInfo['path'] . 'init.php');
}
}
}
/**
@@ -235,6 +283,81 @@ class AdminThemeUikit extends AdminThemeFramework implements Module, Configurabl
return false;
}
/**
* Test all Uikit v3 features using current admin CSS
*
* This is for testing admin.less themes, Original, and themes in /themes/ dir.
* To use, append "?test_uikit=1" to your admin URL while logged in as superuser.
*
* @throws WireException
*
*/
public function testUikit() {
$config = $this->wire()->config;
$url = $config->urls($this);
$path = $config->paths->root . 'wire/modules/AdminTheme/AdminThemeUikit/';
$testsUrl = $url . 'uikit-pw/tests/';
$testsPath = $path . 'uikit-pw/tests/';
$testName = (string) $this->wire()->input->get('test_uikit');
$cssUrl = '';
$s = 'script';
if($this->themeName) {
$themeInfo = $this->getThemeInfo($this->themeName);
if($themeInfo && $themeInfo['path']) {
$cssUrl = $themeInfo['url'] . 'admin.css';
}
}
if(empty($cssUrl)) $cssUrl = $this->getUikitCSS();
if(strpos($testName, '.html')) {
list($testName,) = explode('.html', $testName, 2);
$value = $testName;
$testName = $this->wire()->sanitizer->pageName($testName);
if($testName !== $value || strpos($testName, '.') !== false) $testName = '';
} else {
$testName = '';
}
if(!$testName) $testName = 'index';
$fileName = $testsPath . $testName . '.html';
if(!is_file($fileName)) return;
$out = file_get_contents($fileName);
$head = $this->wire()->files->render(__DIR__ . '/_head.php', [
'layout' => '',
], [
'allowedPaths' => [ $path, __DIR__ . '/' ]
]);
$items = [];
preg_match_all('/(<link[^>]+>)/', $head, $matches);
foreach($matches[1] as $item) {
if(strpos($item, '/Process/') === false) $items[] = $item;
}
preg_match_all('!(<' . $s . '[^>]+?src=[^<]+?</' . $s . '>)!', $head, $matches);
foreach($matches[1] as $item) {
if(strpos($item, '/Process/') === false) $items[] = $item;
}
if(strpos($out, '/test.js') === false) {
$items[] = "<script src='{$testsUrl}js/test.js'></script>";
}
$items[] = "<link rel='stylesheet' type='text/css' href='{$testsUrl}css/index.css' />";
$head = "<$s>var ProcessWire = {}, testsUrl = '$testsUrl', adminThemeUrl = '$url', cssUrl = '$cssUrl';</$s>";
$a = [
'src="' => 'src="' . $testsUrl,
"value=\"$testName.html\"" => "value='$testName.html' selected",
];
$out = str_replace(array_keys($a), array_values($a), $out);
$out = str_replace('<head>', '<head>' . $head . implode("\n", $items), $out);
ob_end_clean();
echo $out;
exit;
}
/**
* Get Uikit uk-width-* class for given column width
*
@@ -363,7 +486,7 @@ class AdminThemeUikit extends AdminThemeFramework implements Module, Configurabl
} else if($inputfield instanceof InputfieldSelect && !$inputfield instanceof InputfieldHasArrayValue) {
$inputClasses[] = $this->getClass('select');
} else if($inputfield instanceof InputfieldFile) {
$themeColor = 'secondary';
// $themeColor = 'secondary';
}
if($field) {
@@ -547,19 +670,15 @@ class AdminThemeUikit extends AdminThemeFramework implements Module, Configurabl
*/
public function hookClearCaches(HookEvent $event) {
/** @var Page|User|null $page */
$page = $event->arguments(0);
/** @var array $changes */
$changes = $event->arguments(1);
/** @var User $user */
$user = $this->wire('user');
$page = $event->arguments(0); /** @var Page|User|null $page */
$changes = $event->arguments(1); /** @var array $changes */
$user = $this->wire()->user;
if($page !== null && !($page instanceof Page)) return;
if(!is_array($changes)) $changes = array();
if($page === null || $page->template == 'admin' || ($page->id === $user->id && in_array('language', $changes))) {
/** @var Session $session */
$session = $this->wire('session');
if($page === null || $page->template->name === 'admin' || ($page->id === $user->id && in_array('language', $changes))) {
$session = $this->wire()->session;
$session->removeFor($this, 'prnav');
$session->removeFor($this, 'sidenav');
$session->message("Cleared the admin theme navigation cache (primary nav)", Notice::debug);
@@ -569,6 +688,8 @@ class AdminThemeUikit extends AdminThemeFramework implements Module, Configurabl
/**
* Hook to ProcessLogin::afterLoginURL()
*
* Used by sidenav layouts only
*
* @param HookEvent $event
*
*/
@@ -595,7 +716,7 @@ class AdminThemeUikit extends AdminThemeFramework implements Module, Configurabl
public function ___renderBreadcrumbs() {
if(!$this->isLoggedIn || $this->isModal) return '';
$process = $this->wire('page')->process;
$process = $this->wire()->page->process;
if($process == 'ProcessPageList') return '';
$breadcrumbs = $this->wire('breadcrumbs');
$out = '';
@@ -606,10 +727,12 @@ class AdminThemeUikit extends AdminThemeFramework implements Module, Configurabl
if(strpos($this->layout, 'sidenav') === false) {
$out = "<li>" . $this->renderQuickTreeLink() . "</li>";
}
$sanitizer = $this->wire()->sanitizer;
foreach($breadcrumbs as $breadcrumb) {
$title = $breadcrumb->get('titleMarkup');
if(!$title) $title = $this->wire('sanitizer')->entities1($this->_($breadcrumb->title));
if(!$title) $title = $sanitizer->entities1($this->_($breadcrumb->title));
$out .= "<li><a href='$breadcrumb->url'>$title</a></li>";
}
@@ -725,6 +848,7 @@ class AdminThemeUikit extends AdminThemeFramework implements Module, Configurabl
*
*/
protected function renderPrimaryNavItemChildren(array $items) {
$sanitizer = $this->wire()->sanitizer;
$out = '';
foreach($items as $item) {
@@ -739,7 +863,7 @@ class AdminThemeUikit extends AdminThemeFramework implements Module, Configurabl
"<ul>" . $this->renderPrimaryNavItemChildren($item['children']) . "</ul>";
} else if(!empty($item['navJSON'])) {
$item['navJSON'] = $this->wire('sanitizer')->entities($item['navJSON']);
$item['navJSON'] = $sanitizer->entities($item['navJSON']);
$out .=
"<a class='pw-has-items pw-has-ajax-items' " .
"data-from='prnav-page-$item[parent_id]' " .
@@ -764,7 +888,9 @@ class AdminThemeUikit extends AdminThemeFramework implements Module, Configurabl
*/
public function renderPrimaryNavItems() {
$cache = self::dev ? '' : $this->wire('session')->getFor($this, 'prnav');
$session = $this->wire()->session;
$cache = self::dev ? '' : $session->getFor($this, 'prnav');
if($cache) {
$this->markCurrentNavItems($cache);
return $cache;
@@ -777,7 +903,7 @@ class AdminThemeUikit extends AdminThemeFramework implements Module, Configurabl
$out .= $this->renderPrimaryNavItem($item);
}
if(!self::dev) $this->wire('session')->setFor($this, 'prnav', $out);
if(!self::dev) $session->setFor($this, 'prnav', $out);
$this->markCurrentNavItems($out);
return $out;
@@ -793,13 +919,15 @@ class AdminThemeUikit extends AdminThemeFramework implements Module, Configurabl
*
*/
public function renderSidebarNavItems() {
$session = $this->wire()->session;
// see if we can get it from the cache
$out = self::dev ? '' : $this->wire('session')->getFor($this, 'sidenav');
$out = self::dev ? '' : $session->getFor($this, 'sidenav');
if(empty($out)) {
$out = $this->renderSidebarNavCache();
$this->wire('session')->setFor($this, 'sidenav', $out);
$session->setFor($this, 'sidenav', $out);
}
$out = str_replace('<!--pw-user-nav-label-->', $this->renderUserNavLabel(), $out);
@@ -816,6 +944,8 @@ class AdminThemeUikit extends AdminThemeFramework implements Module, Configurabl
*/
protected function renderSidebarNavCache() {
$sanitizer = $this->wire()->sanitizer;
$out = '';
$items = $this->getPrimaryNavArray();
$ulAttrs = "class='uk-nav-sub uk-nav-default uk-nav-parent-icon' data-uk-nav='animation: false; multiple: true;'";
@@ -840,7 +970,7 @@ class AdminThemeUikit extends AdminThemeFramework implements Module, Configurabl
$childNavList .
"</ul>";
} else if($child['navJSON']) {
$child['navJSON'] = $this->wire('sanitizer')->entities($child['navJSON']);
$child['navJSON'] = $sanitizer->entities($child['navJSON']);
$childClass .= ' uk-parent';
$childAttr = " class='pw-has-items pw-has-ajax-items' data-json='$child[navJSON]'";
$childNav = "<ul $ulAttrs></ul>";
@@ -885,7 +1015,7 @@ class AdminThemeUikit extends AdminThemeFramework implements Module, Configurabl
*
*/
protected function markCurrentNavItems(&$out) {
$page = $this->wire('page');
$page = $this->wire()->page;
foreach($page->parents()->and($page) as $p) {
$out = str_replace("page-$p-", "page-$p- uk-active", $out);
}
@@ -898,8 +1028,9 @@ class AdminThemeUikit extends AdminThemeFramework implements Module, Configurabl
*
*/
public function renderUserNavLabel() {
/** @var User $user */
$user = $this->wire('user');
$sanitizer = $this->wire()->sanitizer;
$fields = $this->wire()->fields;
$user = $this->wire()->user;
$userLabel = $this->get('userLabel');
$userAvatar = $this->get('userAvatar');
$defaultIcon = 'user-circle';
@@ -914,7 +1045,7 @@ class AdminThemeUikit extends AdminThemeFramework implements Module, Configurabl
$userLabel = $user->getText($userLabel, true, true);
}
} else {
$userLabel = $this->wire('sanitizer')->entities($userLabel);
$userLabel = $sanitizer->entities($userLabel);
}
if($userAvatar) {
@@ -930,9 +1061,9 @@ class AdminThemeUikit extends AdminThemeFramework implements Module, Configurabl
$userAvatar = $this->renderNavIcon("$icon fa-lg");
} else if(strpos($userAvatar, ':')) {
list($fieldID, $fieldName) = explode(':', $userAvatar);
$field = $this->wire('fields')->get($fieldName);
$field = $fields->get($fieldName);
if(!$field || !$field->type instanceof FieldtypeImage) {
$field = $this->wire('fields')->get((int) $fieldID);
$field = $fields->get((int) $fieldID);
}
if($field && $field->type instanceof FieldtypeImage) {
$value = $user->get($field->name);
@@ -962,14 +1093,22 @@ class AdminThemeUikit extends AdminThemeFramework implements Module, Configurabl
*/
public function renderUserNavItems() {
$sanitizer = $this->wire()->sanitizer;
$items = $this->getUserNavArray();
$allowAttrs = [ 'href', 'target', 'class', 'id' ];
$out = '';
foreach($items as $item) {
$label = $this->wire('sanitizer')->entities($item['title']);
if(isset($item['url'])) $item['href'] = $item['url'];
$label = $sanitizer->entities($item['title']);
$icon = isset($item['icon']) ? $this->renderNavIcon($item['icon']) : ' ';
$target = isset($item['target']) ? " target='$item[target]'" : '';
$out .= "<li><a$target href='$item[url]'>$icon$label</a></li>";
$attrs = '';
foreach($item as $name => $value) {
if(in_array($name, $allowAttrs) || strpos($name, 'data-') === 0 || strpos($name, 'on') === 0) {
$attrs .= " $name='" . $sanitizer->entities($value) . "'";
}
}
$out .= "<li><a$attrs>$icon<span>$label</span></a></li>";
}
return $out;
@@ -986,7 +1125,7 @@ class AdminThemeUikit extends AdminThemeFramework implements Module, Configurabl
*/
public function renderQuickTreeLink($icon = 'tree', $text = '') {
$tree = $this->_('Tree');
$url = $this->wire('urls')->admin . 'page/';
$url = $this->wire()->urls->admin . 'page/';
return
"<a class='pw-panel' href='$url' data-tab-text='$tree' data-tab-icon='$icon' title='$tree'>" .
$this->renderNavIcon($icon) . $text .
@@ -1006,10 +1145,8 @@ class AdminThemeUikit extends AdminThemeFramework implements Module, Configurabl
*/
public function getLogo(array $options = array()) {
/** @var Config $config */
$config = $this->wire('config');
/** @var Sanitizer $sanitizer */
$sanitizer = $this->wire('sanitizer');
$config = $this->wire()->config;
$sanitizer = $this->wire()->sanitizer;
$defaults = array(
'getURL' => false,
@@ -1022,8 +1159,16 @@ class AdminThemeUikit extends AdminThemeFramework implements Module, Configurabl
$logoURL = $this->get('logoURL');
$logoQS = '';
$svg = false;
if(empty($logoURL) || $options['getNative'] || strpos($logoURL, '//') !== false) {
$svgName = 'logo.svg';
$themeName = $this->themeName;
$themeInfo = $themeName ? $this->getThemeInfo() : [];
$themeLogo = empty($themeInfo) ? '' : $themeInfo['path'] . $svgName;
if($themeLogo && (empty($logoURL) || $options['getNative']) && file_exists($themeLogo)) {
if($options['getURL']) return $themeInfo['url'] . $svgName;
return file_get_contents($themeLogo);
} else if(empty($logoURL) || $options['getNative'] || strpos($logoURL, '//') !== false) {
$native = true;
$logoURL = $this->url() . self::logo;
} else {
@@ -1043,6 +1188,16 @@ class AdminThemeUikit extends AdminThemeFramework implements Module, Configurabl
$attr = "class='$class' alt='$alt' ";
if($svg) {
if($logoURL && !$options['getURL'] && strpos($logoURL, '//') === false) {
$file = $config->paths->root . str_replace('/', DIRECTORY_SEPARATOR, ltrim($this->get('logoURL'), '/'));
if(is_file($file)) {
$data = (string) file_get_contents($file);
if(stripos($data, '<svg') === 0 && stripos($data, 'fill="currentColor"')) {
// use inline SVG if its color can be manipulated from CSS
return $data;
}
}
}
if($options['height']) $attr .= "style='height:$options[height]' ";
if(strpos($logoQS, 'uk-svg') === 0) {
// if logo has "?uk-svg" query string, add uk-svg attribute which makes it styleable via CSS/LESS (PR#77)
@@ -1052,7 +1207,7 @@ class AdminThemeUikit extends AdminThemeFramework implements Module, Configurabl
}
if($logoQS) $logoURL .= '?' . $sanitizer->entities($logoQS);
$img = "<img src='$logoURL' $attr/>";
return $options['getURL'] ? $logoURL : $img;
@@ -1147,10 +1302,66 @@ class AdminThemeUikit extends AdminThemeFramework implements Module, Configurabl
$data['logoAction'] = (int) $this->logoAction;
$data['toggleBehavior'] = (int) $this->toggleBehavior;
$config->js('adminTheme', $data);
$config->js('AdminThemeUikit', [
'labels' => [
'ok' => $this->_('Ok'), // Dialog box text for "Ok" // If not translated it will pull from common translations
'cancel' => $this->_('Cancel'), // Dialog box text for "Cancel" // If not translated it will pull from common translations
],
]);
return parent::getHeadJS();
}
/**
* Get info for theme style
*
* @param string $themeName Optionally specify name of theme style, or omit to use current
* @return array
* @throws WireException
*
*/
public function getThemeInfo($themeName = '') {
if(empty($themeName)) $themeName = $this->themeName;
$themeInfos = $this->themeInfos;
if(empty($themeInfos) || isset($themeInfos['z'])) {
$session = $this->wire()->session;
$themeInfos = $session->getFor($this, 'themeInfos');
if(empty($themeInfos)) {
// wakeup
$config = $this->wire()->config;
$thisPath = $config->paths($this);
$themesPath = $thisPath . 'themes/';
$rootLen = strlen($config->paths->root);
if(is_dir($themesPath)) {
foreach(new \DirectoryIterator($themesPath) as $file) {
if(!$file->isDir() || $file->isDot()) continue;
$basename = $file->getBasename();
if(strpos($basename, '.') === 0) continue;
$themePath = $thisPath . "themes/$basename/";
$themeUrl = $config->urls->root . substr($themePath, $rootLen);
$themeInfo = ['name' => $basename, 'path' => $themePath, 'url' => $themeUrl];
$infoFile = $themePath . 'info.php';
if(is_file($infoFile)) {
$a = include($infoFile);
$themeInfo = array_merge($a, $themeInfo);
}
$themeInfos[$basename] = $themeInfo;
}
}
unset($themeInfos['z']);
$this->themeInfos = $themeInfos;
$session->setFor($this, 'themeInfos', $themeInfos);
}
}
if($themeName === 'all') return $themeInfos;
return $themeName && isset($themeInfos[$themeName]) ? $themeInfos[$themeName] : [];
}
/**
* Module configuration
*

View File

@@ -21,6 +21,11 @@ if(!defined("PROCESSWIRE")) die();
/** @var Paths $urls */
/** @var string $layout */
/** @var Process $process */
if($adminTheme->themeName && $adminTheme->themeName != 'original') {
$themeInfo = $adminTheme->getThemeInfo();
if(!empty($themeInfo)) include("$themeInfo[path]ready.php");
}
$adminTheme->renderExtraMarkup('x'); // forces it to cache
if(!isset($content)) $content = '';
@@ -76,4 +81,3 @@ if(!isset($content)) $content = '';
</body>
</html><?php

View File

@@ -15,10 +15,10 @@ $logoOptions = array('height' => '40px');
<div id='pw-mastheads'>
<header id='pw-masthead-mobile' class='pw-masthead uk-hidden uk-background-muted'>
<div class='pw-container uk-container uk-container-expand<?php if(!$adminTheme->isLoggedIn) echo ' uk-text-center'; ?>'>
<a href='<?php echo $adminTheme->isLoggedIn ? $config->urls->admin : $config->urls->root; ?>' class='pw-logo-link'>
<?php echo $adminTheme->getLogo($logoOptions); ?>
</a>
</div>
<a href='<?php echo $adminTheme->isLoggedIn ? $config->urls->admin : $config->urls->root; ?>' class='pw-logo-link'>
<?php echo $adminTheme->getLogo($logoOptions); ?>
</a>
</div>
</header>
<header id='pw-masthead' class='pw-masthead uk-background-muted' data-pw-height='80'> <?php /* data-pw-height='73' */ ?>
<div class='pw-container uk-container uk-container-expand'>
@@ -60,11 +60,10 @@ $logoOptions = array('height' => '40px');
</nav>
</div>
</header>
<?php
if(strpos($adminTheme->layout, 'sidenav') === false) {
echo $adminTheme->renderNotices($notices);
echo $adminTheme->renderExtraMarkup('masthead');
}
?>
</div>
<?php
if($adminTheme->themeName === 'default') echo '</div><!--pw-mastheads-->';
if(strpos($adminTheme->layout, 'sidenav') === false) {
echo $adminTheme->renderNotices($notices) . $adminTheme->renderExtraMarkup('masthead');
}
if($adminTheme->themeName != 'default') echo '</div><!--pw-mastheads-->';

View File

@@ -37,13 +37,46 @@ class AdminThemeUikitConfigHelper extends Wire {
$experimentalLabel = $this->_('(EXPERIMENTAL)');
$exampleLabel = $this->_('example');
/** @var modules $modules */
$modules = $this->wire('modules');
$modules = $this->wire()->modules;
$session = $this->wire()->session;
$config = $this->wire()->config;
/** @var Session $session */
$session = $this->wire('session');
$layout = $adminTheme->layout;
$userTemplateURL = $this->wire('config')->urls->admin . 'setup/template/edit?id=3';
$userTemplateURL = $config->urls->admin . 'setup/template/edit?id=3';
$themeInfos = $adminTheme->getThemeInfo('all'); // init
if(count($themeInfos)) {
$configFiles = [];
$f = $inputfields->InputfieldRadios;
$f->attr('id+name', 'themeName');
$f->label = $this->_('Uikit style theme');
$f->notes =
$this->_('After changing the style theme, please submit/save before configuring it.') . ' ' .
$this->_('When using `admin.less` customization, the “Core original” style is required.');
$f->icon = 'photo';
foreach($themeInfos as $name => $info) {
$label = (isset($info['title']) ? $info['title'] : ucfirst($name));
$f->addOption($name, $label, [ 'data-url' => $info['url'] ]);
$configFile = $info['path'] . 'config.php';
if(is_file($configFile)) $configFiles[$name] = $configFile;
}
$f->addOption('', $this->_('Core original'));
$value = $adminTheme->themeName;
$f->val($value);
$f->themeOffset = 1;
$inputfields->add($f);
foreach($configFiles as $name => $configFile) {
$fs = $inputfields->InputfieldFieldset;
$inputfields->add($fs);
$fs->themeOffset = 1;
$fs->attr('name', "_theme_$name");
$fs->label = $themeInfos[$name]['title'] . ' ' . $this->_('theme settings');
$fs->showIf = "themeName=$name";
$this->wire()->files->render($configFile, [ 'inputfields' => $fs ]);
}
}
/** @var InputfieldFieldset $fieldset */
$fieldset = $modules->get('InputfieldFieldset');
@@ -129,16 +162,18 @@ class AdminThemeUikitConfigHelper extends Wire {
$f->optionColumns = 1;
$fieldset->add($f);
/** @var InputfieldFieldset $fieldset */
$fieldset = $modules->get('InputfieldFieldset');
$fieldset->label = $this->_('Layout + interface');
$fieldset->icon = 'newspaper-o';
$fieldset->collapsed = Inputfield::collapsedYes;
$fieldset->set('themeOffset', true);
$inputfields->add($fieldset);
/** @var InputfieldRadios $f */
$f = $modules->get('InputfieldRadios');
$f->attr('id+name', 'layout');
if(empty($layout)) $f->showIf = "themeName=''";
$f->label = $this->_('Layout type');
$f->addOption('', $this->_('Traditional with masthead navigation') .
' [span.detail] ' . $recommendedLabel . ' [/span]');
@@ -389,14 +424,13 @@ class AdminThemeUikitConfigHelper extends Wire {
*/
public function configInputfield(Inputfield $inputfield, InputfieldWrapper $inputfields) {
/** @var Inputfield $inputfield */
if($inputfield instanceof InputfieldWrapper) return;
if(!$inputfield->hasFieldtype || !$inputfield->hasField) return;
$field = $inputfield->hasField;
/** @var Modules $modules */
$modules = $this->wire('modules');
$modules = $this->wire()->modules;
$config = $this->wire()->config;
$autoLabel = $this->_('Auto');
$noneLabel = $this->_('None');
@@ -543,6 +577,8 @@ class AdminThemeUikitConfigHelper extends Wire {
} else {
$exampleType = 'InputfieldMarkup';
}
/** @var Inputfield $f */
$f = $modules->get($exampleType);
$f->attr('id+name', '_adminThemeExample');
$f->label = $this->_('Example');
@@ -562,7 +598,8 @@ class AdminThemeUikitConfigHelper extends Wire {
}
$f->icon = 'snowflake-o';
$fieldset->add($f);
/** @var InputfieldMarkup $f */
$f = $modules->get('InputfieldMarkup');
$f->attr('id+name', '_adminThemeExample2');
$f->label = $this->_('Another field');
@@ -574,8 +611,6 @@ class AdminThemeUikitConfigHelper extends Wire {
$this->_('Open the “%s” field above for a live example of column width.'), $fieldset->label
). ' ' . $f->notes;
/** @var Config $config */
$config = $this->wire('config');
$config->scripts->add($config->urls($this->adminTheme) . 'config-field.js');
}
@@ -590,15 +625,14 @@ class AdminThemeUikitConfigHelper extends Wire {
$form = $inputfields->getForm();
if($form) {
$form->action .= '&tests=1';
$this->wire('session')->addHookBefore('redirect', function(HookEvent $event) {
$this->wire()->session->addHookBefore('redirect', function(HookEvent $event) {
$url = $event->arguments(0);
$url .= '&tests=1';
$event->arguments(0, $url);
});
}
/** @var Modules $modules */
$modules = $this->wire('modules');
$modules = $this->wire()->modules;
// TEST 1 ----------------------------------
/** @var InputfieldFieldset $fieldset */
@@ -693,6 +727,7 @@ class AdminThemeUikitConfigHelper extends Wire {
);
foreach($columns as $n => $col) {
/** @var InputfieldText $f */
$f = $modules->get('InputfieldText');
$f->attr('name', "_test_text$n");
$f->label = $col['label'];
@@ -706,11 +741,14 @@ class AdminThemeUikitConfigHelper extends Wire {
}
// TEST 3 -----------------------------------------------
/** @var InputfieldFieldset $fieldset */
$fieldset = $modules->get('InputfieldFieldset');
$fieldset->label = '33% widths tests w/show-if';
$inputfields->add($fieldset);
/** @var InputfieldText $f */
$f = $modules->get('InputfieldText');
$f->attr('name', '_t1');
$f->label = 'Col 1/3';

View File

@@ -29,6 +29,8 @@ if($adminTheme->isModal) {
$layout = '';
}
if($input->get('test_uikit') && $user->isSuperuser()) $adminTheme->testUikit();
$content .= $adminTheme->renderExtraMarkup('content');
$vars = array('layout' => $layout, 'content' => &$content);
@@ -44,4 +46,3 @@ if(strpos($layout, 'sidenav') === 0 && $layout != 'sidenav-main') {
}
$adminTheme->includeFile('_main.php', $vars);
}

View File

@@ -150,7 +150,7 @@ InputfieldWrapper::setClasses($classes);
$markup = InputfieldWrapper::getMarkup();
$markup['list'] = "<ul {attrs} uk-grid uk-height-match='target: > .Inputfield:not(.InputfieldStateCollapsed) > .InputfieldContent'>{out}</ul>";
$markup['item_label'] = "<label class='InputfieldHeader uk-form-label' for='{for}'>{out}</label>";
$markup['item_label_hidden'] = "<label class='InputfieldHeader InputfieldHeaderHidden'><span>{out}</span></label>";
$markup['item_label_hidden'] = "<label class='InputfieldHeader InputfieldHeaderHidden' for='{for}'><span>{out}</span></label>";
$markup['item_content'] = "<div class='InputfieldContent uk-form-controls'>{out}</div>";
InputfieldWrapper::setMarkup($markup);
@@ -161,4 +161,3 @@ if($adminTheme->ukGrid) {
} else {
$config->InputfieldWrapper('useColumnWidth', 2); // 2=use both style='width:%' and data-colwidth attributes
}

View File

@@ -4,8 +4,7 @@ if(!isset($title)) $title = 'Title';
if(!isset($formAction)) $formAction = './install.php';
$title = htmlentities($title, ENT_QUOTES, "UTF-8");
$formAction = htmlentities($formAction, ENT_QUOTES, "UTF-8");
?>
<!DOCTYPE html>
?><!DOCTYPE html>
<html class="pw" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
@@ -44,7 +43,7 @@ $formAction = htmlentities($formAction, ENT_QUOTES, "UTF-8");
<script type='text/javascript' src='wire/modules/AdminTheme/AdminThemeUikit/uikit/dist/js/uikit-icons.min.js'></script>
<script type='text/javascript' src='wire/modules/AdminTheme/AdminThemeUikit/scripts/main.js'></script>
</head>
<body class='template-admin pw-init'>
<body class='template-admin pw-init light-theme'>
<div id='pw-mastheads'>
<header id='pw-masthead-mobile' class='pw-masthead uk-background-muted'>

View File

@@ -437,6 +437,8 @@ var ProcessWireAdminTheme = {
var $li = $("<li></li>").addClass('pw-nav-dup').append($a2);
$ul.append($li);
if(data.add) {
var addUrl = data.add.url;
if(addUrl.indexOf('/') !== 0) addUrl = data.url + addUrl;
var $li2 = $(
"<li class='pw-nav-add'>" +
"<a href='" + data.url + data.add.url + "'>" +

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,2 @@
This is a placeholder file that can be deleted
once there is a theme directory within this.

View File

@@ -0,0 +1,188 @@
/* inter-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: "Inter";
font-style: normal;
font-weight: 400;
src: url("./fonts/inter-v18-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: "Inter";
font-style: italic;
font-weight: 400;
src: url("./fonts/inter-v18-latin-italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-600 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: "Inter";
font-style: normal;
font-weight: 600;
src: url("./fonts/inter-v18-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-600italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: "Inter";
font-style: italic;
font-weight: 600;
src: url("./fonts/inter-v18-latin-600italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* -------------------------------------------------------------------- */
/* ---- DEFAULT THEME VARIABLES (LIGHT and DARK) --------------------- */
/* ---- (keep active while uncommenting the others to test) --------- */
/* ----------------------------------------------------------------- */
:root {
color-scheme: light dark;
--pw-main-color: #eb1d61;
--pw-text-color: light-dark(#111, white);
--pw-muted-color: light-dark(rgba(0, 0, 0, 0.55), rgba(255, 255, 255, 0.6));
--pw-border-color: light-dark(rgba(0, 0, 0, 0.16), #444);
--pw-main-background:light-dark(#eee, #222);
--pw-inputs-background:light-dark(#f8f8f8, #161616);
--pw-blocks-background: light-dark(white, black);
--pw-button-background: light-dark(var(--pw-text-color), var(--pw-main-color));
--pw-button-color: light-dark(var(--pw-blocks-background), var(--pw-text-color));
--pw-button-border: transparent;
--pw-button-muted-background: light-dark(#737373, #404040);
--pw-button-muted-color: light-dark(var(--pw-blocks-background), var(--pw-text-color));;
--pw-button-muted-border: transparent;
--pw-button-hover-background: light-dark(var(--pw-main-color), var(--pw-text-color));
--pw-button-hover-color: var(--pw-blocks-background);
--pw-button-hover-border: transparent;
--pw-menu-item-background-hover: var(--pw-main-background);
--pw-masthead-background: var(--pw-blocks-background);
--pw-masthead-active-color: var(--pw-text-color);
--pw-masthead-text-color: var(--pw-muted-color);
--pw-masthead-border-color: var(--pw-border-color);
--pw-masthead-logo-color: var(--pw-main-color);
--pw-masthead-menu-item-background-hover: var(--pw-menu-item-background-hover);
--pw-masthead-input-background: var(--pw-inputs-background);
--pw-masthead-input-color: var(--pw-text-color);
--pw-masthead-input-border: var(--pw-border-color);
--pw-modal-color: rgba(0,0,0,0.7);
--pw-error-inline-text-color: light-dark(#cd0a0a, #ff7171);
--pw-code-color: light-dark(#0173b0, #e7e695);
--pw-code-background: light-dark(var(--pw-inputs-background), #3c3c3c5e);
--pw-alert-text-color: var(--pw-text-color);
--pw-alert-primary: var(--pw-main-background);
--pw-alert-warning: light-dark(#fff0be, #d57f00);
--pw-alert-success: light-dark(#c1e7cd, #139472);
--pw-alert-danger: light-dark(#fee6e6, #8a1919);
--pw-notes-background: light-dark(#ffd, #bdbdbd33);
--pw-button-radius: 99999px;
--pw-input-radius: 0;
}
@media (prefers-color-scheme: dark) {
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
body.light-theme,
html:has(body.light-theme) {
color-scheme: light;
}
body.dark-theme,
html:has(body.dark-theme) {
color-scheme: dark;
}
body.dark-theme * {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body.main-color-red {
--main-color: #eb1d61;
}
body.main-color-green {
--main-color: #14ae85;
}
body.main-color-blue {
--main-color: #2380e6;
}
/* -------------------------------------------------------------------- */
/* ---- THEME WITH COLOR MASTHEAD VARIABLES -------------------------- */
/* ---- (these depend on the default theme variables) --------------- */
/* ----------------------------------------------------------------- */
/*
:root {
--pw-masthead-background: var(--pw-main-color);
--pw-masthead-active-color: white;
--pw-masthead-text-color: rgba(255,255,255,0.8);
--pw-masthead-border-color: var(--pw-main-background);
--pw-masthead-logo-color: white;
--pw-masthead-input-background: var(--pw-masthead-background);
--pw-masthead-input-color: var(--pw-masthead-active-color);
--pw-masthead-input-border: var(--pw-masthead-text-color);
--pw-masthead-menu-item-background-hover: rgba(255,255,255,.2);
}
/* -------------------------------------------------------------------- */
/* ---- BORDERLESS --------------------------------------------------- */
/* ------------------------------------------------------------------ */
/*
:root {
--pw-border-color: var(--pw-main-background);
--pw-inputs-background: var(--pw-blocks-background);
}
/* -------------------------------------------------------------------- */
/* ---- MINIMAL LIGHT BLUE AND MINIMAL DARK VARIABLES ---------------- */
/* ------------------------------------------------------------------ */
/*
:root {
--pw-text-color: light-dark(blue, white);
--pw-main-color: var(--pw-text-color);
--pw-main-background:light-dark(white, #222);
--pw-border-color: light-dark(var(--pw-text-color), var(--pw-text-color));
--pw-text-background: var(--pw-main-background);
--pw-inputs-background: var(--pw-text-background);
--pw-blocks-background: var(--pw-text-background);
--pw-muted-color: light-dark(#7c8efd, #8b8b8b);
--pw-button-background: var(--pw-text-background);
--pw-button-color: light-dark(var(--pw-text-color), var(--pw-text-color));
--pw-button-muted-color: var(--pw-muted-color);
--pw-button-border: var(--pw-button-color);
--pw-button-muted-background: var(--pw-button-background);
--pw-button-muted-border: var(--pw-button-muted-color);
--pw-button-hover-background: var(--pw-button-color);
--pw-button-hover-color: var(--pw-button-background);
--pw-button-hover-border: var(--pw-button-color);
--pw-masthead-background: var(--pw-text-background);
--pw-masthead-active-color: light-dark(var(--pw-text-color), var(--pw-text-color));
--pw-masthead-text-color: var(--pw-masthead-active-color);
--pw-masthead-border-color: var(--pw-masthead-active-color);
--pw-masthead-logo-color: var(--pw-masthead-active-color);
--pw-alert-text-color: var(--pw-text-color);
--pw-alert-primary: light-dark(#ffd, var(--pw-text-background));
--pw-alert-warning: light-dark(#fcda6d, #d57f00);
--pw-alert-success: light-dark(#97ecb2, #139472);
--pw-alert-danger: light-dark(#ec9797, #8a1919);
--pw-notes-background: light-dark(#ffd, #bdbdbd33);
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,228 @@
function setupCommandSearch() {
const searchInput = document.querySelector("#pw-masthead .pw-search-input");
const sidebarSearchInput = document.querySelector(
"#offcanvas-nav .pw-search-input"
);
let previousFocusedElement = null;
let SearchOpen = false;
// Find the closest ancestor with class "pw-search-form"
const searchForm = searchInput.closest(".pw-search-form");
const sidebarSearchForm = sidebarSearchInput.closest(".pw-search-form");
const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
const shortcutText = isMac ? "⌘+K" : "Ctrl+K";
const sidebarShortcutText = isMac ? "⌘+⇧+K" : "Ctrl+⇧+K";
searchInput.setAttribute("placeholder", " ");
sidebarSearchInput.setAttribute("placeholder", " ");
searchForm.setAttribute("data-shortcut", shortcutText);
sidebarSearchForm.setAttribute("data-shortcut", sidebarShortcutText);
function openSearch() {
previousFocusedElement = document.activeElement;
searchInput.focus();
SearchOpen = true;
closeSidebar();
}
function closeSearch() {
searchInput.blur();
searchInput.value = "";
if (previousFocusedElement) {
previousFocusedElement.focus();
previousFocusedElement = null;
}
SearchOpen = false;
}
function openSearchSidebar() {
let sidebarToggleEL = document.getElementById("offcanvas-toggle");
if (sidebarToggleEL) {
let sidebarSearchInput = document.querySelector(
"#offcanvas-nav .pw-search-input"
);
sidebarToggleEL.click();
if (sidebarSearchInput) {
sidebarSearchInput.focus();
closeSearch();
}
}
}
function closeSidebar() {
let sidebarToggleEL = document.querySelector(
"body.uk-offcanvas-page .offcanvas-toggle"
);
if (sidebarToggleEL) {
sidebarToggleEL.click();
sidebarSearchInput.blur();
}
}
// Toggle on Ctrl/Cmd + K
document.addEventListener("keydown", (event) => {
const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
const isCommandKey = event.metaKey;
const isControlKey = event.ctrlKey;
const modifierKey = isMac ? isCommandKey : isControlKey;
if (modifierKey) {
if (event.key === "k") {
event.preventDefault();
// Ctrl/⌘+Shift+K focus on sidebar search
if (event.shiftKey) {
openSearchSidebar();
} else {
// Ctrl/⌘+K focus on search
if (SearchOpen) {
closeSearch();
} else {
openSearch();
}
}
}
// close search with escape
} else if (event.key === "Escape") {
closeSearch();
let sidebarToggleEL = document.querySelector(
"body.uk-offcanvas-page .offcanvas-toggle"
);
if (sidebarToggleEL) {
sidebarToggleEL.click();
}
}
});
}
var AdminDarkMode = {
isInit: false,
mode: -1,
body: null,
a: null,
init: function() {
this.body = $('body');
if(this.body.hasClass('light-theme')) {
this.mode = 0;
} else if(this.body.hasClass('dark-theme')) {
this.mode = 1;
}
this.a = $('.toggle-light-dark-mode');
this.updateLink();
this.isInit = true;
},
get: function() {
return this.mode;
},
getName: function(mode) {
if(typeof mode === 'undefined') mode = this.mode;
if(mode > 0) return 'dark';
if(mode < 0) return 'auto';
return 'light';
},
updateLink: function() {
var lightIcon = 'fa-' + this.a.attr('data-icon-light');
var darkIcon = 'fa-' + this.a.attr('data-icon-dark');
var autoIcon = 'fa-' + this.a.attr('data-icon-auto');
var modeName = this.getName();
if(modeName != 'auto') {
// reverse of mode name for link
modeName = modeName === 'dark' ? 'light' : 'dark';
}
var text = this.a.attr('data-label-' + modeName);
var icon = 'fa-' + this.a.attr('data-icon-' + modeName);
var $span = this.a.children('span');
var $icon = this.a.children('i');
$span.text(text);
$icon.removeClass(lightIcon + ' ' + darkIcon + ' ' + autoIcon).addClass(icon);
},
set: function(mode) {
this.body.removeClass(this.getName() + '-theme');
this.body.addClass(this.getName(mode) + '-theme');
this.mode = mode;
this.updateLink();
// $(document).trigger('admin-color-change');
},
setLight: function() {
this.set(0);
},
setDark: function() {
this.set(1);
},
setAuto: function() {
this.set(-1);
},
save: function() {
$.post(ProcessWire.config.urls.admin, {set_admin_dark_mode: this.mode}, function(data) {
// console.log(data);
});
},
toggle: function() {
var newMode = this.mode > 0 ? 0 : 1;
this.set(newMode);
this.updateLink();
},
toggleDialog: function() {
var oldMode = this.mode;
var newMode = (oldMode < 0 ? oldMode : (oldMode > 0 ? 0 : 1));
var newModeName = this.getName(newMode);
var dialogHtml = $('#light-dark-mode-dialog').html();
var attr = 'data-name="' + newModeName + '"';
dialogHtml = dialogHtml.replace(attr, attr + ' checked');
var dialog = UIkit.modal.dialog(dialogHtml, { });
var $panel = $(dialog.panel);
$panel.css('transition', 'none');
this.set(newMode);
$panel.find('input').on('click', function() {
AdminDarkMode.set(parseInt($(this).val()));
});
$panel.find('button').on('click', function() {
if($(this).hasClass('uk-button-primary')) {
AdminDarkMode.save(); // Ok
} else {
AdminDarkMode.set(oldMode); // Cancel
}
});
$panel.find('input[value=' + newMode + ']');
return false;
},
};
// Call the setup function when the DOM is loaded
// document.addEventListener("DOMContentLoaded", setupCommandSearch);
$(document).ready(function () {
if($("#pw-masthead .pw-search-input").length) {
setupCommandSearch();
}
$(".pw-notices").insertAfter("#pw-mastheads");
if(!$('body').hasClass('pw-no-dark-mode')) AdminDarkMode.init();
});

View File

@@ -0,0 +1,152 @@
$(document).ready(function() {
var colorClasses = 'main-color-red main-color-blue main-color-green main-color-custom';
var styleClasses = 'light-theme dark-theme';
var $body = $('body');
/**
* Get current style, 'light' or 'dark'
*
* @returns {string|string}
*
*/
function getCurrentStyleName() {
if($body.hasClass('dark-theme')) return 'dark';
if($body.hasClass('light-theme')) return 'light';
var bgcolor = $('#pw-mastheads').css('background-color');
bgcolor = bgcolor.replace(/[^0-9]/g, '').substring(0, 3);
$body.removeClass('auto-theme');
var styleName = bgcolor === '000' ? 'dark' : 'light';
$body.addClass(styleName + '-theme');
return styleName;
}
/**
* Get the main color code (hex or rgb), whether predefined or custom
*
* @returns {string}
*
*/
function getMainColor() {
var $wrap = $('#wrap_defaultMainColor');
var $f = $wrap.find('input:checked');
if($f.val() === 'custom') {
if($('body').hasClass('dark-theme')) {
return $('#defaultMainColorCustomDark').val();
} else {
return $('#defaultMainColorCustom').val();
}
}
return $f.closest('label').find('.defaultMainColorLabel').css('background-color');
}
/**
* Update the main color for given rgb or hex code
*
* @param value
*
*/
function setMainColor(value) {
if(typeof value === 'undefined') value = getMainColor();
if(value.indexOf(')') > -1) {
// Removes stuff after the rgb(...)
// rgb(20, 174, 133) none repeat scroll 0% 0% / auto padding-box border-box
value = value.substring(0, value.indexOf(')')+1);
}
$('#main-color-custom').remove();
$('.pw-logo-native').css('color', value);
var styleName = getCurrentStyleName();
setButtonColor(styleName === 'dark' ? value : 'black');
$('head').append(
"<style type='text/css' id='main-color-custom'>" +
":root { " + "--pw-main-color: " + value + "; " + "} " +
"</style>");
}
function updateToggles() {
var $use2Colors = $('#defaultToggles_use2Colors');
var hidden = !$('#defaultMainColor_custom').prop('checked');
$use2Colors.parent('label').prop('hidden', hidden);
if($('#defaultToggles_useTogcbx').prop('checked')) {
$('body').addClass('pw-togcbx');
} else {
$('body').removeClass('pw-togcbx');
}
}
function setButtonColor(value) {
$('.ui-button').css('background-color', value);
}
$('#wrap_defaultStyleName').on('input', 'input', function() {
var styleName = $(this).val();
$body.removeClass(styleClasses).addClass(styleName + '-theme');
//$('#defaultMainColor input').eq(0).trigger('input');
var color = getMainColor();
setMainColor(color);
setButtonColor(styleName === 'light' ? 'black' : color);
});
$('#wrap_defaultMainColor').on('input', 'input', function() {
var value = 'main-color-' + $(this).val();
var color;
if(value === 'main-color-custom') {
if($('#defaultToggles_use2Colors').prop('checked')) {
color = $('body').hasClass('dark-theme') ? $('#defaultMainColorCustomDark').val() : $('#defaultMainColorCustom').val();
} else {
color = $('#defaultMainColorCustom').val();
}
} else {
color = $(this).closest('label').find('.defaultMainColorLabel').css('background');
}
$body.removeClass(colorClasses).addClass(value);
setMainColor(color);
updateToggles();
});
$('#defaultMainColorCustom, #defaultMainColorCustomDark').on('input', function() {
var value = $(this).val();
$body.removeClass(colorClasses).addClass('main-color-custom');
if($(this).attr('id') === 'defaultMainColorCustomDark') {
if($('body').hasClass('dark-theme')) setMainColor(value);
} else {
if($('body').hasClass('light-theme')) {
setMainColor(value);
} else if(!$('#defaultToggles_use2Colors').prop('checked')) {
setMainColor(value);
}
}
});
$('.ui-button').on('mouseover', function() {
var color = getCurrentStyleName() === 'dark' ? 'white' : getMainColor();
$(this).css('background-color', color);
}).on('mouseout', function() {
var color = getCurrentStyleName() === 'dark' ? getMainColor() : 'black';
$(this).css('background-color', color);
});
/*
$(document).on('admin-color-change', function() {
if($('body').hasClass('main-color-custom')) {
$('#defaultMainColorCustom, #defaultMainColorCustomDark').trigger('input');
}
});
*/
$('#defaultToggles_use2Colors').on('change', function() {
if($(this).prop('checked')) {
$('#defaultMainColorCustomDark').trigger('input');
} else {
$('#defaultMainColorCustom').trigger('input');
}
});
$('#defaultToggles_useTogcbx').on('change', updateToggles);
updateToggles();
});

View File

@@ -0,0 +1 @@
$(document).ready(function(){var colorClasses="main-color-red main-color-blue main-color-green main-color-custom";var styleClasses="light-theme dark-theme";var $body=$("body");function getCurrentStyleName(){if($body.hasClass("dark-theme"))return"dark";if($body.hasClass("light-theme"))return"light";var bgcolor=$("#pw-mastheads").css("background-color");bgcolor=bgcolor.replace(/[^0-9]/g,"").substring(0,3);$body.removeClass("auto-theme");var styleName=bgcolor==="000"?"dark":"light";$body.addClass(styleName+"-theme");return styleName}function getMainColor(){var $wrap=$("#wrap_defaultMainColor");var $f=$wrap.find("input:checked");if($f.val()==="custom"){if($("body").hasClass("dark-theme")){return $("#defaultMainColorCustomDark").val()}else{return $("#defaultMainColorCustom").val()}}return $f.closest("label").find(".defaultMainColorLabel").css("background-color")}function setMainColor(value){if(typeof value==="undefined")value=getMainColor();if(value.indexOf(")")>-1){value=value.substring(0,value.indexOf(")")+1)}$("#main-color-custom").remove();$(".pw-logo-native").css("color",value);var styleName=getCurrentStyleName();setButtonColor(styleName==="dark"?value:"black");$("head").append("<style type='text/css' id='main-color-custom'>"+":root { "+"--pw-main-color: "+value+"; "+"} "+"</style>")}function updateToggles(){var $use2Colors=$("#defaultToggles_use2Colors");var hidden=!$("#defaultMainColor_custom").prop("checked");$use2Colors.parent("label").prop("hidden",hidden);if($("#defaultToggles_useTogcbx").prop("checked")){$("body").addClass("pw-togcbx")}else{$("body").removeClass("pw-togcbx")}}function setButtonColor(value){$(".ui-button").css("background-color",value)}$("#wrap_defaultStyleName").on("input","input",function(){var styleName=$(this).val();$body.removeClass(styleClasses).addClass(styleName+"-theme");var color=getMainColor();setMainColor(color);setButtonColor(styleName==="light"?"black":color)});$("#wrap_defaultMainColor").on("input","input",function(){var value="main-color-"+$(this).val();var color;if(value==="main-color-custom"){if($("#defaultToggles_use2Colors").prop("checked")){color=$("body").hasClass("dark-theme")?$("#defaultMainColorCustomDark").val():$("#defaultMainColorCustom").val()}else{color=$("#defaultMainColorCustom").val()}}else{color=$(this).closest("label").find(".defaultMainColorLabel").css("background")}$body.removeClass(colorClasses).addClass(value);setMainColor(color);updateToggles()});$("#defaultMainColorCustom, #defaultMainColorCustomDark").on("input",function(){var value=$(this).val();$body.removeClass(colorClasses).addClass("main-color-custom");if($(this).attr("id")==="defaultMainColorCustomDark"){if($("body").hasClass("dark-theme"))setMainColor(value)}else{if($("body").hasClass("light-theme")){setMainColor(value)}else if(!$("#defaultToggles_use2Colors").prop("checked")){setMainColor(value)}}});$(".ui-button").on("mouseover",function(){var color=getCurrentStyleName()==="dark"?"white":getMainColor();$(this).css("background-color",color)}).on("mouseout",function(){var color=getCurrentStyleName()==="dark"?getMainColor():"black";$(this).css("background-color",color)});$("#defaultToggles_use2Colors").on("change",function(){if($(this).prop("checked")){$("#defaultMainColorCustomDark").trigger("input")}else{$("#defaultMainColorCustom").trigger("input")}});$("#defaultToggles_useTogcbx").on("change",updateToggles);updateToggles()});

View File

@@ -0,0 +1,162 @@
<?php namespace ProcessWire;
/** @var AdminThemeUikit $adminTheme */
/** @var InputfieldWrapper $inputfields */
/** @var Config $config */
$settings = $config->AdminThemeUikit;
if(!is_array($settings)) $settings = [];
if($adminTheme->themeName === 'default') {
$adminTheme->wire()->config->scripts->add($adminTheme->url() . 'themes/default/config.js');
}
$inputfields->description = __('Created by Diogo Oliveira and Jan Ploch at [KONKAT Studio](https://konkat.studio/).');
$inputfields->icon = 'sliders';
$f = $inputfields->InputfieldRadios;
$f->attr('id+name', 'defaultStyleName');
$f->label = __('Would you like a default of light or dark mode?');
$darkAttr = [];
$value = $adminTheme->get('defaultStyleName');
if(empty($value)) $value = 'auto';
if(!empty($settings['noDarkMode'])) {
$darkAttr = [ 'disabled' => 'disabled' ];
$value = 'light';
$f->notes = __('Dark mode has been disabled by `$config->AdminThemeUikit("noDarkMode")`');
} else {
$f->notes = __('Individual users can also choose light/dark/auto mode from the user tools menu.');
}
$f->description =
__('This setting is used for users that have not specifically chosen light or dark mode.') . ' ' .
__('When “Auto” is selected, the mode will be determined from the users browser or OS setting.');
$f->addOption('light', __('Light'));
$f->addOption('dark', __('Dark'), $darkAttr);
$f->addOption('auto', __('Auto') . ' ' .
'[span.detail] ' . __('(use browser/OS setting)') . ' [/span]', $darkAttr);
$f->optionColumns = 1;
$f->val($value);
$inputfields->add($f);
$f = $inputfields->InputfieldCheckboxes;
$f->attr('id+name', 'defaultToggles');
$f->label = __('Toggles');
$f->addOption('useBoldItemHeaders', __('Use bold headers for repeaters, files, images, etc.'));
$f->addOption('usePageListButtons', __('Use buttons for page-list action links'));
$f->addOption('useInputFocus',
__('Highlight focused inputs') . ' ' .
'[span.detail] ' . __('(additional clarity for currently focused input)') . ' [/span]'
);
$f->addOption('noUserMenu',
__('Disable light/dark/auto setting in user tools menu?') . ' ' .
'[span.detail] ' . __('(prevents users from making their own dark/light mode selection)') . ' [/span]'
);
$togcbxAttr = [];
if(!empty($settings['noTogcbx'])) $togcbxAttr = [ 'disabled' => 'disabled' ];
$f->addOption('useTogcbx',
__('Use toggle style checkboxes globally?') . ' ' .
'[span.detail] ' . __('(use toggle rather than checkmark style checkboxes)') . ' [/span]',
$togcbxAttr
);
$f->addOption('use2Colors',
__('Define separate main color pickers for light mode and dark mode') . ' ' .
'[span.detail] ' . __('(use for more contrast in light or dark mode)') . ' [/span]',
[ 'hidden' => 'hidden' ]
);
$value = $adminTheme->get($f->name);
if(is_array($value)) {
$f->val($value);
if(in_array('togcbx', $value)) $f->addClass('pw-togcbx', 'wrapClass');
}
$inputfields->add($f);
$f = $inputfields->InputfieldRadios;
$f->attr('id+name', 'defaultMainColor');
$f->label = __('Main color');
$span = "<span class='defaultMainColorLabel' style='color:#fff;padding:1px 5px 2px 5px;border-radius:4px;background:%s;'>%s</span>";
$f->addOption('red', sprintf($span, '#eb1d61', __('Red')));
$f->addOption('green', sprintf($span, '#14ae85', __('Green')));
$f->addOption('blue', sprintf($span, '#2380e6', __('Blue')));
$f->addOption('custom', __('Custom color pickers…'));
$f->optionColumns = 1;
$f->entityEncodeText = false;
$value = $adminTheme->get('defaultMainColor');
if(empty($value)) $value = 'red';
$f->val($value);
$inputfields->add($f);
$f = $inputfields->InputfieldText;
$f->attr('id+name', 'defaultMainColorCustom');
$f->label = __('Custom main color');
$f->attr('type', 'color');
$f->showIf = 'defaultMainColor=custom';
$f->attr('style', 'width: 45px; padding: 1px 4px');
$value = (string) $adminTheme->get($f->attr('name'));
if(empty($value)) $value = '#eb1d61';
if(ctype_alnum(ltrim($value, '#'))) $f->val($value);
$customColorValue = $value;
$f->columnWidth = 50;
$inputfields->add($f);
$f = $inputfields->InputfieldText;
$f->attr('id+name', 'defaultMainColorCustomDark');
$f->label = __('Custom main color (dark mode)');
$f->attr('type', 'color');
$f->attr('style', 'width: 45px; padding: 1px 4px');
$value = (string) $adminTheme->get($f->attr('name'));
if(empty($value)) $value = $customColorValue;
if(ctype_alnum(ltrim($value, '#'))) $f->val($value);
$f->columnWidth = 50;
$f->showIf = 'defaultMainColor=custom, defaultToggles=use2Colors';
$inputfields->add($f);
$url = $adminTheme->url() . 'themes/default/examples/';
$cssExamples = [
__('Borderless') => $url . 'borderless.css',
__('Masthead') => $url . 'masthead.css',
__('Minimal') => $url . 'minimal.css',
];
foreach($cssExamples as $label => $url) {
$cssExamples[$label] = "[$label]($url)";
}
$cssExamples = __('Examples:') . ' ' . implode(', ', $cssExamples);
$f = $inputfields->InputfieldURL;
$f->attr('name', 'defaultCustomCssFile');
$f->label = __('Custom CSS file');
$f->icon = 'css3';
$f->description = __('Enter a local URL (without scheme) relative to installation root, i.e. `/site/templates/styles/admin.css`');
$f->notes = $cssExamples;
$f->val((string) $adminTheme->get('defaultCustomCssFile'));
$f->allowQuotes = false;
$f->allowIDN = false;
$f->collapsed = Inputfield::collapsedBlank;
$inputfields->add($f);
$f->addHookAfter('processInput', function(HookEvent $e) {
$f = $e->object; /** @var InputfieldURL $f */
$value = (string) $f->val();
if(strpos($value, '//') !== false) {
$f->error(__('Do not include scheme (http, https) in your URL'));
$f->val('');
} else if($value) {
$file = $e->wire()->config->paths->root . ltrim($value, '/');
if(!file_exists($file)) {
$f->error(sprintf(__('File does not exist: %s'), $file));
}
}
});
if($adminTheme->wire()->config->advanced) {
$f = $inputfields->InputfieldTextarea;
$f->attr('name', 'defaultCustomCss');
$f->label = __('Custom CSS');
$f->icon = 'css3';
$f->description = __('Available in advanced mode only.');
$f->notes = $cssExamples;
$f->attr('style', 'font-family: Monaco, monospace');
$f->collapsed = Inputfield::collapsedBlank;
$value = (string) $adminTheme->get('defaultCustomCss');
$f->val(trim($value));
$inputfields->add($f);
}

View File

@@ -0,0 +1,274 @@
@import url("./admin-custom.css");
.mce-content-body {
font-family: "Inter", system-ui, sans-serif;
line-height: 1.5;
margin: 1rem;
font-size: 16px;
color: var(--pw-text-color, #333);
/*background: var(--pw-inputs-background, #f8f8f8);*/
background: transparent;
}
a {
text-underline-offset: 0.125em;
}
.mce-content-body small {
font-size: 14px;
}
.mce-content-body strong,
.mce-content-body strong em,
.mce-content-body em strong {
font-weight: bold;
}
.mce-content-body em {
font-style: italic;
}
.mce-content-body h1,
.mce-content-body h2,
.mce-content-body h3,
.mce-content-body h4,
.mce-content-body h5,
.mce-content-body h6 {
color: var(--pw-text-color, #222);
font-weight: bold;
line-height: 1.2em;
text-transform: none;
margin: 1rem 0;
}
.mce-content-body h1 {
font-size: 2rem;
}
.mce-content-body h2 {
font-size: 1.7rem;
}
.mce-content-body h3 {
font-size: 1.5rem;
}
.mce-content-body h4 {
font-size: 1.3rem;
}
.mce-content-body h5 {
font-size: 1.2rem;
}
.mce-content-body h6 {
font-size: 1.1rem;
}
.mce-content-body hr {
border-style: solid;
border-width: 1px 0 0 0;
}
.mce-content-body code {
border-radius: 3px;
padding: 0.1rem 0.2rem;
/* background-color: var(--pw-muted-color, #f5f2f0); */
color: var(--pw-text-color, #222);
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
}
.mce-content-body a {
color: var(--pw-main-color, #0782c1);
text-decoration: underline;
}
.mce-content-body table:not([cellpadding]) td,
.mce-content-body table:not([cellpadding]) th {
padding: 0.4rem;
}
.mce-content-body
table[border]:not([border="0"]):not([style*="border-width"])
td,
.mce-content-body
table[border]:not([border="0"]):not([style*="border-width"])
th {
border-width: 1px;
}
.mce-content-body
table[border]:not([border="0"]):not([style*="border-style"])
td,
.mce-content-body
table[border]:not([border="0"]):not([style*="border-style"])
th {
border-style: solid;
}
.mce-content-body
table[border]:not([border="0"]):not([style*="border-color"])
td,
.mce-content-body
table[border]:not([border="0"]):not([style*="border-color"])
th {
border-color: var(--pw-border-color, #ccc);
}
.mce-content-body span[lang] {
font-style: italic;
}
.mce-content-body table {
border-collapse: collapse;
}
.mce-content-body blockquote {
color: var(--pw-text-color, #333);
border-color: var(--pw-border-color, #ccc);
font-style: italic;
font-family: Georgia, Times, "Times New Roman", serif;
margin: 0;
padding: 0 1rem;
}
.mce-content-body:not([dir="rtl"]) blockquote {
border-left: 1px solid;
margin-left: 1.5rem;
padding-left: 1rem;
}
.mce-content-body[dir="rtl"] blockquote {
border-right: 2px solid;
margin-right: 1.5rem;
padding-right: 1rem;
}
.mce-content-body figure {
display: table;
margin-top: 1rem;
margin-bottom: 1rem;
}
.mce-content-body figure:first-child {
margin-top: 0;
}
.mce-content-body figure figcaption {
margin-top: 5px;
display: table-caption;
caption-side: bottom;
line-height: 1.3em;
font-size: 14px;
color: #999;
color: var(--pw-muted-text, #999);
}
.mce-content-body .align_right,
.mce-content-body .align-right,
.mce-content-body .right {
text-align: right;
float: none;
}
.mce-content-body .align_left,
.mce-content-body .align-left,
.mce-content-body .left {
text-align: left;
float: none;
}
.mce-content-body .align_center,
.mce-content-body .align-center,
.mce-content-body .center {
text-align: center;
}
.mce-content-body .align_full,
.mce-content-body .align-full,
.mce-content-body .full {
text-align: justify;
}
.mce-content-body img.align_right,
.mce-content-body img.align-right,
.mce-content-body img.right,
.mce-content-body figure.align_right,
.mce-content-body figure.align-right,
.mce-content-body figure.right,
.mce-content-body table.align_right,
.mce-content-body table.align-right,
.mce-content-body table.right {
text-align: initial;
float: right;
margin-left: 1rem;
margin-right: 0;
margin-top: 0;
}
.mce-content-body img.align_left,
.mce-content-body img.align-left,
.mce-content-body img.left,
.mce-content-body figure.align_left,
.mce-content-body figure.align-left,
.mce-content-body figure.left,
.mce-content-body table.align_left,
.mce-content-body table.align-left,
.mce-content-body table.left {
text-align: initial;
float: left;
margin-top: 0;
margin-left: 0;
margin-right: 1rem;
}
.mce-content-body img.align_center,
.mce-content-body img.align-center,
.mce-content-body img.center,
.mce-content-body figure.align_center,
.mce-content-body figure.align-center,
.mce-content-body figure.center,
.mce-content-body table.align_center,
.mce-content-body table.align-center,
.mce-content-body table.center {
text-align: initial;
display: block;
margin-left: auto;
margin-right: auto;
}
.mce-content-body img.align_full,
.mce-content-body img.align-full,
.mce-content-body img.full,
.mce-content-body figure.align_full,
.mce-content-body figure.align-full,
.mce-content-body figure.full,
.mce-content-body table.align_full,
.mce-content-body table.align-full,
.mce-content-body table.full {
text-align: initial;
width: 100%;
}
.mce-content-body img {
max-width: 100%;
}
.mce-content-body img.align_center,
.mce-content-body img.align-center,
.mce-content-body img.center {
display: block;
}
.mce-content-body img:hover {
opacity: 0.9;
filter: alpha(opacity=90);
}
a > .mce-content-body img {
padding: 1px;
margin: 1px;
border: none;
outline: 1px solid var(--pw-main-color, #0782c1);
}
.mce-content-body pre {
/*border: 1px dashed var(--pw-border-color, #ccc);*/
/*padding: 0.5rem 1rem !important;*/
border: 0;
white-space: pre-wrap;
word-wrap: break-word;
-moz-tab-size: 4;
-o-tab-size: 4;
-webkit-tab-size: 4;
tab-size: 4;
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
font-size: 15px;
color: light-dark(#333, #fff);
background: light-dark(#eee, #333);
font-size: 0.9375rem;
margin: 0.5em 0;
padding: 0.5rem 1rem;
border-radius: 4px;
}
.mce-content-body code {
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
font-size: 15px;
color: light-dark(#333, #fff);
background-color: light-dark(#eee, #333);
}
.mce-content-body pre code {
background-color: initial;
}
/*
.mce-content-body pre[class*="language-"] {
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
font-size: 0.9375rem;
background: #f5f2f0;
margin: 0.5em 0;
padding: 0.5rem 1rem;
color: var(--pw-muted-color, #777);
}
*/

View File

@@ -0,0 +1 @@
/* intentionally blank */

View File

@@ -0,0 +1 @@
/* intentionally blank */

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,8 @@
/* -------------------------------------------------------------------- */
/* ---- BORDERLESS --------------------------------------------------- */
/* ------------------------------------------------------------------ */
:root {
--pw-border-color: var(--pw-main-background);
--pw-inputs-background: var(--pw-blocks-background);
}

View File

@@ -0,0 +1,16 @@
/* -------------------------------------------------------------------- */
/* ---- THEME WITH COLOR MASTHEAD VARIABLES -------------------------- */
/* ---- (these depend on the default theme variables) --------------- */
/* ----------------------------------------------------------------- */
:root {
--pw-masthead-background: var(--pw-main-color);
--pw-masthead-active-color: white;
--pw-masthead-text-color: rgba(255,255,255,0.8);
--pw-masthead-border-color: var(--pw-main-background);
--pw-masthead-logo-color: white;
--pw-masthead-input-background: var(--pw-masthead-background);
--pw-masthead-input-color: var(--pw-masthead-active-color);
--pw-masthead-input-border: var(--pw-masthead-text-color);
--pw-masthead-menu-item-backgroud-hover: rgba(255,255,255,.2);
}

View File

@@ -0,0 +1,37 @@
/* -------------------------------------------------------------------- */
/* ---- MINIMAL LIGHT BLUE AND MINIMAL DARK VARIABLES ---------------- */
/* ------------------------------------------------------------------ */
:root {
--pw-text-color: light-dark(blue, white);
--pw-main-color: var(--pw-text-color);
--pw-main-background:light-dark(white, #222);
--pw-border-color: light-dark(var(--pw-text-color), var(--pw-text-color));
--pw-text-background: var(--pw-main-background);
--pw-inputs-background: var(--pw-text-background);
--pw-blocks-background: var(--pw-text-background);
--pw-muted-color: light-dark(#7c8efd, #8b8b8b);
--pw-button-background: var(--pw-text-background);
--pw-button-color: light-dark(var(--pw-text-color), var(--pw-text-color));
--pw-button-muted-color: var(--pw-muted-color);
--pw-button-border: var(--pw-button-color);
--pw-button-muted-background: var(--pw-button-background);
--pw-button-muted-border: var(--pw-button-muted-color);
--pw-button-hover-background: var(--pw-button-color);
--pw-button-hover-color: var(--pw-button-background);
--pw-button-hover-border: var(--pw-button-color);
--pw-masthead-background: var(--pw-text-background);
--pw-masthead-active-color: light-dark(var(--pw-text-color), var(--pw-text-color));
--pw-masthead-text-color: var(--pw-masthead-active-color);
--pw-masthead-border-color: var(--pw-masthead-active-color);
--pw-masthead-logo-color: var(--pw-masthead-active-color);
--pw-alert-text-color: var(--pw-text-color);
--pw-alert-primary: light-dark(#ffd, var(--pw-text-background));
--pw-alert-warning: light-dark(#fcda6d, #d57f00);
--pw-alert-success: light-dark(#97ecb2, #139472);
--pw-alert-danger: light-dark(#ec9797, #8a1919);
--pw-notes-background: light-dark(#ffd, #bdbdbd33);
}

View File

@@ -0,0 +1,6 @@
<?php namespace ProcessWire;
return [
'title' => 'Konkat default',
'author' => 'Konkat Studio',
];

View File

@@ -0,0 +1,141 @@
<?php namespace ProcessWire;
/** @var AdminThemeUikit $adminTheme */
/** @var WireInput $input */
/** @var Modules $modules */
/** @var Config $config */
/** @var Page $page */
/** @var User $user */
$toggles = $adminTheme->defaultToggles;
$settings = $config->AdminThemeUikit;
$themeUrl = $config->urls('AdminThemeUikit') . 'themes/default/';
$useDarkModeSwitcher =
$user->isLoggedin()
&& !in_array('noUserMenu', $toggles)
&& empty($settings['noDarkMode'])
&& $user->hasPermission('page-edit');
/**
* Update TinyMCE to use our custom skin and content_css
*
*/
$adminTheme->addHookAfter('InputfieldTinyMCESettings::prepareSettingsForOutput', function(HookEvent $e) use($themeUrl) {
$f = $e->object->__get('inputfield'); /** @var InputfieldTinyMCE $f */
static $contentCss = '';
$settings = $e->return;
$css = isset($settings['content_css']) ? $settings['content_css'] : $f->content_css;
if(strpos($css, 'document')) {
// keep
return;
} else if(strpos($css, '/content_css/wire.css') || empty($css)) {
// replace
} else {
// leave custom
return;
}
if(empty($contentCss)) {
$contentCss = $e->wire()->config->versionUrl($themeUrl . 'content.css');
}
$a = [
'content_css' => $contentCss,
'content_css_url' => $contentCss,
'toolbar_sticky_offset' => 55, // applies to inline mode only
];
if($f->skin === 'oxide' || !$f->skin) {
$a['skin_url'] = rtrim($themeUrl, '/');
$a['skin'] = 'custom';
}
$settings = array_merge($settings, $a);
$e->return = $settings;
});
/**
* Add a light/dark toggle to the user tools menu
*
*/
if($useDarkModeSwitcher) {
$adminTheme->addHookAfter('getUserNavArray', function(HookEvent $e) {
$adminTheme = $e->object; /** @var AdminThemeUikit $adminTheme */
$navArray = $e->return; /** @var array $navArray */
$lightLabel = __('Light mode', __FILE__);
$darkLabel = __('Dark mode', __FILE__);
$autoLabel = __('Auto', __FILE__);
$cancelLabel = $adminTheme->_('Cancel');
$okLabel = $adminTheme->_('Ok');
$dialogTitle = __('Light/dark mode');
array_unshift($navArray, [
'url' => '#toggle-light-dark-mode',
'title' => __('Light/dark', __FILE__),
'target' => '_top',
'icon' => 'adjust',
'class' => 'toggle-light-dark-mode',
'onclick' => 'return AdminDarkMode.toggleDialog();',
'data-label-light' => $lightLabel,
'data-label-dark' => $darkLabel,
'data-label-auto' => $dialogTitle,
'data-icon-light' => 'sun-o',
'data-icon-dark' => 'moon-o',
'data-icon-auto' => 'adjust',
]);
$e->return = $navArray;
$adminTheme->addExtraMarkup('body', '
<div id="light-dark-mode-dialog" hidden>
<div class="uk-modal-body">
<p>
<label><input type="radio" class="uk-radio" name="mode" data-name="light" value="0"> ' . $lightLabel . '</label>&nbsp;&nbsp;
<label><input type="radio" class="uk-radio" name="mode" data-name="dark" value="1"> ' . $darkLabel . '</label>&nbsp;&nbsp;
<label><input type="radio" class="uk-radio" name="mode" data-name="auto" value="-1"> ' . $autoLabel . '</label>
</p>
</div>
<div class="uk-modal-footer uk-text-right">
<button class="uk-button uk-button-default uk-modal-close" type="button">' . $cancelLabel . '</button>
<button class="uk-button uk-button-primary uk-modal-close" autofocus>' . $okLabel . '</button>
</div>
</div>
');
});
$setDarkMode = $input->post('set_admin_dark_mode');
if($setDarkMode !== null && $config->ajax && $page->process == 'ProcessHome') {
$setDarkMode = (int) $setDarkMode;
if($setDarkMode === 0 || $setDarkMode === 1 || $setDarkMode === -1) {
$user->meta('adminDarkMode', (int) $setDarkMode);
header('content-type: application/json');
return die(json_encode([
'status' => 'ok',
'adminDarkMode' => (int) $setDarkMode
]));
}
}
}
/**
* Add notes to InputfieldTinyMCE module config indicating which settings are overridden
*
*/
if($page->process == 'ProcessModule' && $input->get('name') === 'InputfieldTinyMCE') {
$page->wire()->addHookAfter('InputfieldTinyMCE::getModuleConfigInputfields', function(HookEvent $e) {
$inputfields = $e->arguments(0); /** @var InputfieldWrapper $inputfields */
$a = [
'skin' => 'oxide',
'content_css' => 'wire',
'content_css_url' => ''
];
$note = __('PLEASE NOTE: this setting is currently overridden by AdminThemeUikit “default” theme.', __FILE__);
foreach($a as $name => $default) {
$f = $inputfields->get($name);
if($f && !$f->val() || $f->val() === $default) $f->notes = $note;
}
});
}

View File

@@ -0,0 +1,21 @@
body:has(#pw-content-body > form[action="./install.php"]) #pw-mastheads {
visibility: hidden;
}
body:has(#pw-content-body > form[action="./install.php"]) #pw-content-head h1 {
background-image: url('data:image/svg+xml,<svg fill="%23eb1d61" height="40px" width="40px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 256 256" version="1.1" preserveAspectRatio="xMidYMid"><g><path d="M234.02346,56.2065308 C226.258185,44.611679 213.340949,31.3634673 200.370381,22.7873303 C173.426584,4.33370224 142.216153,-2.21573572 114.611028,0.642976614 C85.8219124,3.7470262 61.1714319,14.5951995 40.9049183,32.6861551 C22.1317268,49.454423 9.73715371,69.9560838 4.27586162,89.5083961 C-1.24942998,109.060708 -0.513435538,127.162331 1.45988289,140.794549 C3.53986718,154.629436 10.4304818,172.037714 10.4304818,172.037714 C11.8384712,175.376434 13.7904564,176.731123 14.8037821,177.296465 C19.8384108,180.048509 28.105015,177.627137 34.4516337,170.50169 C34.7716313,170.06435 34.9422967,169.45634 34.7716313,168.944332 C33.000978,162.128223 32.3609828,156.997474 31.7316543,153.029411 C30.2916651,145.178619 29.65167,132.026409 30.6116627,119.866214 C31.0916591,113.284776 32.3716494,106.244663 34.6116325,98.8632122 C38.9422665,84.281646 48.0728642,69.0600695 62.3447564,56.4092007 C77.715307,42.7876498 97.4271581,34.3715154 116.16835,32.1954806 C122.738967,31.4061347 135.240206,30.6487893 150.290759,34.3608485 C153.501401,35.1608613 167.282631,38.7555854 182.023853,48.7397449 C192.754438,56.0358614 201.394373,65.0386719 207.346328,73.9454809 C213.404949,82.44695 219.986232,96.783179 221.916885,107.279347 C224.647531,119.226204 224.647531,131.88774 222.706212,144.218603 C220.30623,156.570801 215.975596,168.581659 209.24498,179.152495 C204.605015,187.344626 194.983755,198.171465 183.613174,206.299595 C173.362585,213.510377 161.66134,218.715793 149.650764,221.595839 C143.57081,223.035862 137.469522,223.95321 131.218903,224.15588 C125.661612,224.32655 118.291001,224.15588 113.117706,223.2812 C105.427098,222.054513 103.82711,220.091815 102.067123,217.425106 C102.067123,217.425106 100.840466,215.505075 100.499135,210.36366 C100.616467,163.376243 100.595134,175.920443 100.595134,151.525387 C100.595134,144.63461 100.371136,138.383844 100.435135,132.709086 C100.755133,123.396937 101.54446,116.996835 108.20041,110.063391 C113.01104,104.953976 119.741656,101.87126 127.154934,101.87126 C129.405583,101.87126 137.160191,101.977929 143.97614,107.642019 C151.282751,113.74345 152.509409,122.084916 152.797407,124.314285 C154.461394,137.359827 145.842792,147.077316 142.536151,149.541355 C138.440182,152.613404 134.760209,154.106761 132.274895,154.981442 C126.984268,156.752137 121.170979,157.264145 115.944352,156.922806 C115.144358,156.869472 114.41903,157.392147 114.259031,158.19216 L112.499044,167.322972 C110.781724,174.256417 114.632361,176.795124 116.872345,177.691138 C124.029624,179.899173 130.376243,180.816521 137.896186,180.251179 C149.426765,179.440499 160.797346,174.896427 170.450607,165.893616 C178.663878,158.085492 183.346509,148.453338 184.946497,137.679832 C186.546485,125.722308 184.466501,112.847436 179.015875,101.945928 C173.021254,89.9244028 162.674665,79.8869091 149.042768,74.393488 C135.272206,68.9747348 124.317622,68.7827317 110.195062,72.3881226 L110.035063,72.4414568 C100.861799,75.5988406 93.0111915,79.4922361 84.8405865,87.9297042 C79.2406288,93.7537973 74.6539968,100.804577 71.8593512,108.762037 C69.0860388,116.783498 68.3393778,122.767594 68.2113788,132.069076 C68.0407134,138.959853 68.3713775,145.359955 68.3713775,151.354717 L68.3713775,190.832681 C68.3713775,203.462216 67.9447141,205.648918 68.3713775,212.145022 C68.6060424,216.454424 69.2033713,221.329168 71.091357,226.566585 C73.0326757,232.337344 77.1073116,238.257439 79.9019571,240.988149 C83.8165942,245.158882 88.7978899,248.508269 93.693853,250.588302 C104.904435,255.569715 120.125653,256.359061 132.466893,255.879054 C140.637498,255.569715 148.85077,254.439031 156.904042,252.529667 C173.010587,248.700272 188.477137,241.734828 202.077034,232.070673 C216.658258,221.798509 229.330162,207.782285 236.327442,195.878095 C245.298041,181.733869 251.100664,165.861616 254.119308,149.552022 C256.839287,133.210428 256.711288,116.452827 253.063316,100.356569 C250.183338,85.4229975 242.492729,69.0387358 233.61813,55.8118579 L234.02346,56.2065308 Z"></path></g></svg>');
background-repeat: no-repeat;
background-position: left center;
background-size: 37px;
padding-left: 51px;
}
body #pw-content-body > form[action="./install.php"] > h2 i {
margin-right: 7px;
}
.pw
body:has(#pw-content-body > form[action="./install.php"])
#pw-masthead-mobile {
visibility: hidden;
}

View File

@@ -0,0 +1,6 @@
<svg fill="currentColor" class="pw-logo-native" height="40px" width="40px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 256 256" version="1.1" preserveAspectRatio="xMidYMid">
<g>
<path d="M234.02346,56.2065308 C226.258185,44.611679 213.340949,31.3634673 200.370381,22.7873303 C173.426584,4.33370224 142.216153,-2.21573572 114.611028,0.642976614 C85.8219124,3.7470262 61.1714319,14.5951995 40.9049183,32.6861551 C22.1317268,49.454423 9.73715371,69.9560838 4.27586162,89.5083961 C-1.24942998,109.060708 -0.513435538,127.162331 1.45988289,140.794549 C3.53986718,154.629436 10.4304818,172.037714 10.4304818,172.037714 C11.8384712,175.376434 13.7904564,176.731123 14.8037821,177.296465 C19.8384108,180.048509 28.105015,177.627137 34.4516337,170.50169 C34.7716313,170.06435 34.9422967,169.45634 34.7716313,168.944332 C33.000978,162.128223 32.3609828,156.997474 31.7316543,153.029411 C30.2916651,145.178619 29.65167,132.026409 30.6116627,119.866214 C31.0916591,113.284776 32.3716494,106.244663 34.6116325,98.8632122 C38.9422665,84.281646 48.0728642,69.0600695 62.3447564,56.4092007 C77.715307,42.7876498 97.4271581,34.3715154 116.16835,32.1954806 C122.738967,31.4061347 135.240206,30.6487893 150.290759,34.3608485 C153.501401,35.1608613 167.282631,38.7555854 182.023853,48.7397449 C192.754438,56.0358614 201.394373,65.0386719 207.346328,73.9454809 C213.404949,82.44695 219.986232,96.783179 221.916885,107.279347 C224.647531,119.226204 224.647531,131.88774 222.706212,144.218603 C220.30623,156.570801 215.975596,168.581659 209.24498,179.152495 C204.605015,187.344626 194.983755,198.171465 183.613174,206.299595 C173.362585,213.510377 161.66134,218.715793 149.650764,221.595839 C143.57081,223.035862 137.469522,223.95321 131.218903,224.15588 C125.661612,224.32655 118.291001,224.15588 113.117706,223.2812 C105.427098,222.054513 103.82711,220.091815 102.067123,217.425106 C102.067123,217.425106 100.840466,215.505075 100.499135,210.36366 C100.616467,163.376243 100.595134,175.920443 100.595134,151.525387 C100.595134,144.63461 100.371136,138.383844 100.435135,132.709086 C100.755133,123.396937 101.54446,116.996835 108.20041,110.063391 C113.01104,104.953976 119.741656,101.87126 127.154934,101.87126 C129.405583,101.87126 137.160191,101.977929 143.97614,107.642019 C151.282751,113.74345 152.509409,122.084916 152.797407,124.314285 C154.461394,137.359827 145.842792,147.077316 142.536151,149.541355 C138.440182,152.613404 134.760209,154.106761 132.274895,154.981442 C126.984268,156.752137 121.170979,157.264145 115.944352,156.922806 C115.144358,156.869472 114.41903,157.392147 114.259031,158.19216 L112.499044,167.322972 C110.781724,174.256417 114.632361,176.795124 116.872345,177.691138 C124.029624,179.899173 130.376243,180.816521 137.896186,180.251179 C149.426765,179.440499 160.797346,174.896427 170.450607,165.893616 C178.663878,158.085492 183.346509,148.453338 184.946497,137.679832 C186.546485,125.722308 184.466501,112.847436 179.015875,101.945928 C173.021254,89.9244028 162.674665,79.8869091 149.042768,74.393488 C135.272206,68.9747348 124.317622,68.7827317 110.195062,72.3881226 L110.035063,72.4414568 C100.861799,75.5988406 93.0111915,79.4922361 84.8405865,87.9297042 C79.2406288,93.7537973 74.6539968,100.804577 71.8593512,108.762037 C69.0860388,116.783498 68.3393778,122.767594 68.2113788,132.069076 C68.0407134,138.959853 68.3713775,145.359955 68.3713775,151.354717 L68.3713775,190.832681 C68.3713775,203.462216 67.9447141,205.648918 68.3713775,212.145022 C68.6060424,216.454424 69.2033713,221.329168 71.091357,226.566585 C73.0326757,232.337344 77.1073116,238.257439 79.9019571,240.988149 C83.8165942,245.158882 88.7978899,248.508269 93.693853,250.588302 C104.904435,255.569715 120.125653,256.359061 132.466893,255.879054 C140.637498,255.569715 148.85077,254.439031 156.904042,252.529667 C173.010587,248.700272 188.477137,241.734828 202.077034,232.070673 C216.658258,221.798509 229.330162,207.782285 236.327442,195.878095 C245.298041,181.733869 251.100664,165.861616 254.119308,149.552022 C256.839287,133.210428 256.711288,116.452827 253.063316,100.356569 C250.183338,85.4229975 242.492729,69.0387358 233.61813,55.8118579 L234.02346,56.2065308 Z">
</path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.1 KiB

View File

@@ -0,0 +1,87 @@
<?php namespace ProcessWire;
/** @var Config $config */
/** @var AdminThemeUikit $adminTheme */
/** @var User $user */
/** @var WireInput $input */
/** @var Modules $modules */
/** @var Page $page */
$themeInfo = $adminTheme->getThemeInfo();
$themeUrl = $config->urls('AdminThemeUikit') . 'themes/default/';
$customCss = $adminTheme->get('defaultCustomCss');
$customCssFile = $adminTheme->get('defaultCustomCssFile');
$toggles = $adminTheme->defaultToggles;
$cssToggles = [ 'useBoldItemHeaders', 'usePageListButtons', 'useInputFocus' ];
$settings = $config->AdminThemeUikit;
$mainColors = [
'red' => '#eb1d61',
'green' => '#14ae85',
'blue' => '#2380e6',
'custom' => $adminTheme->get('defaultMainColorCustom'),
'customDark' => $adminTheme->get('defaultMainColorCustomDark'),
];
$config->styles->append($themeInfo['url'] . 'admin-custom.css');
$config->styles->append($themeInfo['url'] . 'admin.css');
$config->scripts->append($themeInfo['url'] . 'admin.js');
foreach($cssToggles as $name) {
if(!in_array($name, $toggles)) continue;
$config->styles->add($themeUrl . "toggles/$name.css");
}
if($modules->isInstalled('InputfieldTable')) {
$config->styles->add($themeUrl . "toggles/InputfieldTable.css");
}
if($customCssFile) {
$config->styles->append($config->urls->root . ltrim($customCssFile, '/'));
}
if($page->process == 'ProcessModule' && $input->get('name') === $adminTheme->className()) {
$darkMode = null;
} else {
$darkMode = $user->meta('adminDarkMode');
}
if(is_array($settings) && !empty($settings['noDarkMode'])) {
$styleName = 'light';
$adminTheme->addBodyClass('pw-no-dark-mode');
} else if($darkMode === 1) {
$styleName = 'dark';
} else if($darkMode === 0) {
$styleName = 'light';
} else {
$styleName = $adminTheme->get('defaultStyleName');
if(empty($styleName)) $styleName = 'light';
}
$adminTheme->addBodyClass("$styleName-theme");
if(in_array('useTogcbx', $toggles) && empty($settings['noTogcbx'])) {
$adminTheme->addBodyClass("pw-togcbx");
}
$mainColor = $adminTheme->get('defaultMainColor');
if(empty($mainColor)) $mainColor = 'red';
$adminTheme->addBodyClass("main-color-$mainColor");
$mainColorCode = isset($mainColors[$mainColor]) ? $mainColors[$mainColor] : $mainColors['red'];
if(strpos($mainColorCode, '#') === 0 && ctype_alnum(ltrim($mainColorCode, '#'))) {
$mainDarkCode = $mainColors['customDark'];
$use2Colors = $mainColor === 'custom' && in_array('use2Colors', $adminTheme->defaultToggles);
if($use2Colors && strpos($mainDarkCode, '#') === 0 && ctype_alnum(ltrim($mainDarkCode, '#'))) {
$css = "--pw-main-color: light-dark($mainColorCode, $mainDarkCode);";
} else {
$css = "--pw-main-color: $mainColorCode";
}
$adminTheme->addExtraMarkup('head',
"<style id='main-color-custom' type='text/css'>:root { $css }</style>"
);
}
if($customCss) {
$customCss = htmlspecialchars($customCss, ENT_NOQUOTES);
$customCss = str_replace('&gt;', ' > ', $customCss);
$adminTheme->addExtraMarkup('head', "<style id='default-custom-css' type='text/css'>$customCss</style>");
}

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,17 @@
/* make InputfieldTable <table> have same background color as its container */
.Inputfield > .InputfieldContent .AdminDataTable tr {
background-color: transparent;
}
/* more specific to InputfieldTable, if needed
.InputfieldTable .AdminDataTable tr {
background-color: transparent;
}
*/
.InputfieldTableRowSortHandle:hover,
.InputfieldTableRowDeleteLink:hover,
.InputfieldTableActionRow:hover {
/* make table action links highlight with main color when hovered */
color: var(--pw-main-color);
}

View File

@@ -0,0 +1,84 @@
/*** AsmSelect, PageAutocomplete, PageListSelect, accordions ***************/
.pw .Inputfields .InputfieldPageAutocomplete li,
.pw .Inputfields .InputfieldPageAutocomplete li a,
.pw .Inputfields .InputfieldPageListSelectMultiple ol li,
.pw .Inputfields .InputfieldAsmSelect .asmListItem,
.pw .Inputfields .InputfieldAsmSelect .asmListItem.ui-state-default,
.pw .Inputfields .InputfieldAsmSelect .asmListItem.ui-state-hover {
/* make asmSelect/autocomplete/pageListSelect use the main-color */
--pw-main-background: var(--pw-main-color);
--pw-border-color: var(--pw-main-color);
--pw-text-color: rgba(255,255,255,0.9);
background-color: var(--pw-main-background);
margin-top: 0;
margin-bottom: 1px !important;
}
.pw .Inputfields .InputfieldPageAutocomplete li:hover,
.pw .Inputfields .InputfieldPageAutocomplete li:hover a,
.pw .Inputfields .InputfieldPageListSelectMultiple ol li:hover,
.pw .Inputfields .InputfieldAsmSelect .asmListItem.ui-state-hover {
/* highlight hovered items */
filter: brightness(1.05);
filter: brightness(0.95);
border-color: var(--pw-main-color);
}
.pw .ui-accordion-header {
/* accordion items like the debug mode tools */
--pw-inputs-background: var(--pw-main-color);
--pw-blocks-background: var(--pw-main-color);
--pw-text-color: #fff;
border: 0;
margin-top: 3px !important;
}
.pw .ui-accordion-header:hover,
.pw .ui-accordion-header.ui-state-hover {
--pw-inputs-background: var(--pw-main-color);
--pw-main-background: var(--pw-main-color);
filter: brightness(1.05);
}
.ui-accordion.ui-widget .ui-accordion-content {
padding: 20px;
}
.asmListItemStatus .columnWidth {
/* percent width indicator in AsmSelect field lists */
color: rgba(255,255,255,0.65);
}
/*** Repeaters *********************************************************/
.pw .Inputfields .InputfieldRepeater .InputfieldContent .InputfieldRepeaterItem > .InputfieldHeader,
.pw .InputfieldFileList > li > .InputfieldItemHeader {
/* make InputfieldRepeater item headers use the main color */
--pw-inputs-background: var(--pw-main-color);
--pw-border-color: var(--pw-main-color);
--pw-text-color: rgba(255,255,255,0.9);
--pw-muted-color: rgba(255,255,255,0.8);
}
.InputfieldRepeaterItem > .InputfieldHeader:hover {
/* make hovered repeater header slightly highlighted */
filter: brightness(1.05);
}
.pw .Inputfields .InputfieldRepeater .InputfieldContent .InputfieldRepeaterItem {
/* large margin not needed when using bolder headers */
margin-bottom: 2px;
}
/*** AsmSelect: Column width slider bar ******************************/
.pw .asmListItem > .asmListItemStatus > .columnWidth:not(.columnWidthOff):hover {
color: var(--text-color);
}
.pw .asmListItem .columnWidthBar {
background-color: rgba(0,0,0,0.5) !important;
line-height: 1.7em;
}
.pw .asmListItem.rowStart:before {
border-top-color: var(--text-color);
}

View File

@@ -0,0 +1,35 @@
.Inputfields input:focus:not([type="submit"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not(.uk-form-blank),
.Inputfields textarea:focus,
.pw .Inputfields .Inputfield select.uk-select:focus,
select.uk-select:focus {
/* have inputs show a focused state */
/*border-color: var(--muted-color) !important;*/
background-color: var(--pw-blocks-background) !important;
}
.InputfieldForm .Inputfields .Inputfield select.uk-select {
/* make <select> elements have same background color as text inputs */
background-color: var(--pw-inputs-background);
}
/*** TinyMCE ***/
.InputfieldTinyMCE .tox-edit-area {
background: var(--pw-inputs-background);
}
.InputfieldTinyMCE .mce-edit-focus,
.InputfieldTinyMCEFocused .tox-edit-area__iframe {
--pw-inputs-background: var(--pw-blocks-background);
}
.InputfieldTinyMCEFocused .tox .tox-toolbar,
.InputfieldTinyMCEFocused .tox .tox-menubar,
.InputfieldTinyMCEFocused .tox .tox-statusbar,
.InputfieldTinyMCEFocused .tox .tox-toolbar__overflow,
.InputfieldTinyMCEFocused .tox .tox-toolbar__primary {
--pw-blocks-background: var(--pw-inputs-background);
}
.pw .InputfieldTinyMCEFocused .tox .tox-menubar .tox-mbtn:hover,
.pw .InputfieldTinyMCEFocused .tox .tox-tbtn:hover {
background: light-dark(white, black);
}

View File

@@ -0,0 +1,52 @@
#pw-content-body .PageList .PageListActions a,
#pw-content-body .PageListerActions > a,
.PageList .PageListItem .PageListActions > li > a {
/* make PageList items use action links that look like buttons */
display: inline-block;
line-height: 1.3;
background-color: var(--pw-main-color);
color: #fff;
padding: 2px 6px;
font-weight: bold;
text-transform: lowercase;
position: relative;
top: -1px;
border-radius: 3px;
}
#pw-content-body .PageList .PageListActions a:hover,
#pw-content-body .PageListerActions > a:hover,
.PageList .PageListItem .PageListActions > li > a:hover {
/* highlight selected action when hovered */
filter: brightness(1.08);
}
#pw-content-body .PageList ul.uk-pagination > li:first-child > a {
border-top-left-radius: var(--pw-button-radius) !important;
border-bottom-left-radius: var(--pw-button-radius) !important;
}
#pw-content-body .PageList ul.uk-pagination > li:last-child > a {
border-top-right-radius: var(--pw-button-radius) !important;
border-bottom-right-radius: var(--pw-button-radius) !important;
}
.PageList .PageListItem:hover {
/* adjust width to actions */
/*
display: inline-block;
width: auto;
*/
}
#pw-content-body .PageList ul.uk-pagination > li.uk-active > a {
/* update active pagination to use main color */
background: var(--pw-main-color) !important;
--pw-text-color: #fff;
}
.PageList .PageListItem:not(:hover) .PageListActions.actions {
display: none !important;
}
.PageList .PageListItem:hover .PageListActions.actions {
display: inline-block;
}

View File

@@ -0,0 +1,214 @@
<!DOCTYPE html>
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Accordion - UIkit tests</title>
<script src="js/test.js"></script>
</head>
<body>
<div class="uk-container">
<h1>Accordion</h1>
<div class="uk-child-width-1-4@m" uk-grid>
<div>
<h3>Animated</h3>
<ul uk-accordion>
<li class="uk-open">
<a class="uk-accordion-title" href>This is a title with some more text</a>
<div class="uk-accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</li>
<li>
<a class="uk-accordion-title" href>Item 2</a>
<div class="uk-accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</li>
<li>
<a class="uk-accordion-title" href>Item 3</a>
<div class="uk-accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</li>
</ul>
</div>
<div>
<h3>Multiple</h3>
<ul uk-accordion="multiple: true">
<li>
<a class="uk-accordion-title" href>Item 1</a>
<div class="uk-accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</li>
<li class="uk-open">
<a class="uk-accordion-title" href>Item 2</a>
<div class="uk-accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</li>
<li class="uk-open">
<a class="uk-accordion-title" href>Item 3</a>
<div class="uk-accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</li>
</ul>
</div>
<div>
<h3>Not Animated</h3>
<ul uk-accordion="animation: false; active: 0">
<li>
<a class="uk-accordion-title" href>Item 1</a>
<div class="uk-accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</li>
<li>
<a class="uk-accordion-title" href>Item 2</a>
<div class="uk-accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</li>
<li>
<a class="uk-accordion-title" href>Item 3</a>
<div class="uk-accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</li>
</ul>
</div>
<div>
<h3>Not collapsible</h3>
<ul uk-accordion="collapsible: false">
<li>
<a class="uk-accordion-title" href>Item 1</a>
<div class="uk-accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</li>
<li>
<a class="uk-accordion-title" href>Item 2</a>
<div class="uk-accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</li>
<li>
<a class="uk-accordion-title" href>Item 3</a>
<div class="uk-accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</li>
</ul>
</div>
</div>
<h2>JavaScript Options</h2>
<table class="uk-table uk-table-striped">
<thead>
<tr>
<th>Option</th>
<th>Value</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>targets</code></td>
<td>CSS selector</td>
<td>&gt; *</td>
<td>The element(s) to toggle.</td>
</tr>
<tr>
<td><code>active</code></td>
<td>Number</td>
<td>false</td>
<td>Index of the element to open initially.</td>
</tr>
<tr>
<td><code>collapsible</code></td>
<td>Boolean</td>
<td>true</td>
<td>Allow all items to be closed.</td>
</tr>
<tr>
<td><code>multiple</code></td>
<td>Boolean</td>
<td>false</td>
<td>Allow multiple open items.</td>
</tr>
<tr>
<td><code>transition</code></td>
<td>String</td>
<td>ease</td>
<td>The transition to use.</td>
</tr>
<tr>
<td><code>animation</code></td>
<td>Boolean</td>
<td>true</td>
<td>Reveal item directly or with a transition. </td>
</tr>
<tr>
<td><code>duration</code></td>
<td>Number</td>
<td>200</td>
<td>The animation duration.</td>
</tr>
<tr>
<td><code>offset</code></td>
<td>Number</td>
<td>0</td>
<td>Offset added to scroll top.</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

View File

@@ -0,0 +1,124 @@
<!DOCTYPE html>
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Alert - UIkit tests</title>
<script src="js/test.js"></script>
</head>
<body>
<div class="uk-container">
<h1>Alert</h1>
<div uk-alert>
<a class="uk-alert-close" href uk-close></a>
<p><strong>Alert!</strong> Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="uk-alert-primary" uk-alert>
<a class="uk-alert-close" href uk-close></a>
<p><strong>Primary!</strong> Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="uk-alert-success" uk-alert>
<a class="uk-alert-close" href uk-close></a>
<p><strong>Success!</strong> Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="uk-alert-warning" uk-alert>
<a class="uk-alert-close" href uk-close></a>
<p><strong>Warning!</strong> Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="uk-alert-danger" uk-alert>
<a class="uk-alert-close" href uk-close></a>
<p><strong>Danger!</strong> Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<h2>More Content</h2>
<div uk-alert>
<button class="uk-alert-close" type="button" uk-close></button>
<h3>Alert!</h3>
<p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="uk-alert-primary" uk-alert>
<button class="uk-alert-close" type="button" uk-close></button>
<h3>Primary!</h3>
<p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="uk-alert-success" uk-alert>
<button class="uk-alert-close" type="button" uk-close></button>
<h3>Success!</h3>
<p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="uk-alert-warning" uk-alert>
<button class="uk-alert-close" type="button" uk-close></button>
<h3>Warning!</h3>
<p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="uk-alert-danger" uk-alert>
<button class="uk-alert-close" type="button" uk-close></button>
<h3>Danger!</h3>
<p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<h2>Animations</h2>
<div uk-alert="animation: uk-animation-scale-up; duration: 1000">
<a class="uk-alert-close" href uk-close></a>
<p><strong>Alert!</strong> Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="uk-alert-primary" uk-alert="animation: uk-animation-scale-down">
<a class="uk-alert-close" href uk-close></a>
<p><strong>Primary!</strong> Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<h2>JavaScript Options</h2>
<div class="uk-overflow-auto">
<table class="uk-table uk-table-striped">
<thead>
<tr>
<th>Option</th>
<th>Value</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>animation</code></td>
<td>Boolean</td>
<td>true</td>
<td>On close fade out.</td>
</tr>
<tr>
<td><code>duration</code></td>
<td>Number</td>
<td>150</td>
<td>The animation duration.</td>
</tr>
<tr>
<td><code>sel-close</code></td>
<td>CSS selector</td>
<td>.uk-alert-close</td>
<td>The close trigger element.</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,133 @@
<!DOCTYPE html>
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Align - UIkit tests</title>
<script src="js/test.js"></script>
</head>
<body>
<div class="uk-container">
<h1>Align</h1>
<div class="uk-child-width-1-2@s" uk-grid>
<div>
<img class="uk-align-right uk-margin-remove-adjacent" src="images/photo.jpg" width="250" height="167" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div>
<img class="uk-align-left uk-margin-remove-adjacent" src="images/photo.jpg" width="250" height="167" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<h2>Small</h2>
<div class="uk-child-width-1-2@s" uk-grid>
<div>
<img class="uk-align-center uk-align-right@s uk-margin-remove-adjacent" src="images/photo.jpg" width="250" height="167" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div>
<img class="uk-align-center uk-align-left@s uk-margin-remove-adjacent" src="images/photo.jpg" width="250" height="167" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<h2>Medium</h2>
<div class="uk-child-width-1-2@s" uk-grid>
<div>
<img class="uk-align-center uk-align-right@m uk-margin-remove-adjacent" src="images/photo.jpg" width="250" height="167" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div>
<img class="uk-align-center uk-align-left@m uk-margin-remove-adjacent" src="images/photo.jpg" width="250" height="167" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<h2>Large</h2>
<div class="uk-child-width-1-2@s" uk-grid>
<div>
<img class="uk-align-center uk-align-right@l uk-margin-remove-adjacent" src="images/photo.jpg" width="250" height="167" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div>
<img class="uk-align-center uk-align-left@l uk-margin-remove-adjacent" src="images/photo.jpg" width="250" height="167" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<h2>X-Large</h2>
<div class="uk-child-width-1-2@s" uk-grid>
<div>
<img class="uk-align-center uk-align-right@xl uk-margin-remove-adjacent" src="images/photo.jpg" width="250" height="167" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div>
<img class="uk-align-center uk-align-left@xl uk-margin-remove-adjacent" src="images/photo.jpg" width="250" height="167" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,252 @@
<!DOCTYPE html>
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Animation - UIkit tests</title>
<script src="js/test.js"></script>
</head>
<body>
<div class="uk-overflow-hidden">
<div class="uk-container">
<h1>Animation</h1>
<div class="uk-child-width-1-4@m" uk-grid>
<div class="uk-animation-toggle" tabindex="0">
<div class="uk-card uk-card-default uk-card-body uk-animation-fade">
<h3 class="uk-card-title">Fade</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="uk-animation-toggle" tabindex="0">
<div class="uk-card uk-card-default uk-card-body uk-animation-scale-up">
<h3 class="uk-card-title">Scale Up</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="uk-animation-toggle" tabindex="0">
<div class="uk-card uk-card-default uk-card-body uk-animation-scale-down">
<h3 class="uk-card-title">Scale Down</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="uk-animation-toggle" tabindex="0">
<div class="uk-card uk-card-default uk-card-body uk-animation-shake">
<h3 class="uk-card-title">Shake</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="uk-animation-toggle" tabindex="0">
<div class="uk-card uk-card-default uk-card-body uk-animation-slide-left">
<h3 class="uk-card-title">Left</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="uk-animation-toggle" tabindex="0">
<div class="uk-card uk-card-default uk-card-body uk-animation-slide-top">
<h3 class="uk-card-title">Top</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="uk-animation-toggle" tabindex="0">
<div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom">
<h3 class="uk-card-title">Bottom</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="uk-animation-toggle" tabindex="0">
<div class="uk-card uk-card-default uk-card-body uk-animation-slide-right">
<h3 class="uk-card-title">Right</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="uk-animation-toggle" tabindex="0">
<div class="uk-card uk-card-default uk-card-body uk-animation-slide-left-small">
<h3 class="uk-card-title">Left Small</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="uk-animation-toggle" tabindex="0">
<div class="uk-card uk-card-default uk-card-body uk-animation-slide-top-small">
<h3 class="uk-card-title">Top Small</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="uk-animation-toggle" tabindex="0">
<div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom-small">
<h3 class="uk-card-title">Bottom Small</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="uk-animation-toggle" tabindex="0">
<div class="uk-card uk-card-default uk-card-body uk-animation-slide-right-small">
<h3 class="uk-card-title">Right Small</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="uk-animation-toggle" tabindex="0">
<div class="uk-card uk-card-default uk-card-body uk-animation-slide-left-medium">
<h3 class="uk-card-title">Left Medium</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="uk-animation-toggle" tabindex="0">
<div class="uk-card uk-card-default uk-card-body uk-animation-slide-top-medium">
<h3 class="uk-card-title">Top Medium</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="uk-animation-toggle" tabindex="0">
<div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom-medium">
<h3 class="uk-card-title">Bottom Medium</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="uk-animation-toggle" tabindex="0">
<div class="uk-card uk-card-default uk-card-body uk-animation-slide-right-medium">
<h3 class="uk-card-title">Right Medium</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<h2>Reverse</h2>
<div class="uk-child-width-1-4@m" uk-grid>
<div class="uk-animation-toggle" tabindex="0">
<div class="uk-card uk-card-default uk-card-body uk-animation-fade uk-animation-reverse">
<h3 class="uk-card-title">Fade</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="uk-animation-toggle" tabindex="0">
<div class="uk-card uk-card-default uk-card-body uk-animation-scale-up uk-animation-reverse">
<h3 class="uk-card-title">Scale Up</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="uk-animation-toggle" tabindex="0">
<div class="uk-card uk-card-default uk-card-body uk-animation-scale-down uk-animation-reverse">
<h3 class="uk-card-title">Scale Down</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="uk-animation-toggle" tabindex="0">
<div class="uk-card uk-card-default uk-card-body uk-animation-shake uk-animation-reverse">
<h3 class="uk-card-title">Shake</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="uk-animation-toggle" tabindex="0">
<div class="uk-card uk-card-default uk-card-body uk-animation-slide-left uk-animation-reverse">
<h3 class="uk-card-title">Left</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="uk-animation-toggle" tabindex="0">
<div class="uk-card uk-card-default uk-card-body uk-animation-slide-top uk-animation-reverse">
<h3 class="uk-card-title">Top</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="uk-animation-toggle" tabindex="0">
<div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom uk-animation-reverse">
<h3 class="uk-card-title">Bottom</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="uk-animation-toggle" tabindex="0">
<div class="uk-card uk-card-default uk-card-body uk-animation-slide-right uk-animation-reverse">
<h3 class="uk-card-title">Right</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="uk-animation-toggle" tabindex="0">
<div class="uk-card uk-card-default uk-card-body uk-animation-slide-left-small uk-animation-reverse">
<h3 class="uk-card-title">Left Small</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="uk-animation-toggle" tabindex="0">
<div class="uk-card uk-card-default uk-card-body uk-animation-slide-top-small uk-animation-reverse">
<h3 class="uk-card-title">Top Small</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="uk-animation-toggle" tabindex="0">
<div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom-small uk-animation-reverse">
<h3 class="uk-card-title">Bottom Small</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="uk-animation-toggle" tabindex="0">
<div class="uk-card uk-card-default uk-card-body uk-animation-slide-right-small uk-animation-reverse">
<h3 class="uk-card-title">Right Small</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="uk-animation-toggle" tabindex="0">
<div class="uk-card uk-card-default uk-card-body uk-animation-slide-left-medium uk-animation-reverse">
<h3 class="uk-card-title">Left Medium</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="uk-animation-toggle" tabindex="0">
<div class="uk-card uk-card-default uk-card-body uk-animation-slide-top-medium uk-animation-reverse">
<h3 class="uk-card-title">Top Medium</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="uk-animation-toggle" tabindex="0">
<div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom-medium uk-animation-reverse">
<h3 class="uk-card-title">Bottom Medium</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="uk-animation-toggle" tabindex="0">
<div class="uk-card uk-card-default uk-card-body uk-animation-slide-right-medium uk-animation-reverse">
<h3 class="uk-card-title">Right Medium</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<h2>Kenburns</h2>
<div class="uk-child-width-1-2@m" uk-grid>
<div>
<div class="uk-overflow-hidden">
<img class="uk-animation-kenburns uk-transform-origin-center-right" src="images/dark.jpg" width="1800" height="1200" alt="">
</div>
</div>
<div>
<div class="uk-overflow-hidden">
<img class="uk-animation-kenburns uk-animation-reverse uk-transform-origin-top-center" src="images/dark.jpg" width="1800" height="1200" alt="">
</div>
</div>
</div>
<h2>Stroke</h2>
<div class="uk-child-width-1-2@m uk-text-center" uk-grid>
<div class="uk-animation-toggle" tabindex="0">
<img class="uk-animation-stroke" width="400" height="400" src="images/icons.svg#cloud-upload" alt="" uk-svg="stroke-animation: true">
</div>
<div class="uk-animation-toggle" tabindex="0">
<img class="uk-animation-stroke uk-animation-reverse" width="400" height="400" src="images/icons.svg#cloud-upload" alt="" uk-svg="stroke-animation: true">
</div>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,167 @@
<!DOCTYPE html>
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Article - UIkit tests</title>
<script src="js/test.js"></script>
</head>
<body>
<div class="uk-container">
<h1>Article</h1>
<div class="uk-container-xsmall">
<article class="uk-article">
<h1 class="uk-article-title"><a class="uk-link-reset" href="">Heading</a></h1>
<p class="uk-article-meta">Written by <a href="#">Super User</a> on 12 April 2012. Posted in <a href="#">Blog</a></p>
<p class="uk-text-lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="uk-grid-small" uk-grid>
<div>
<a class="uk-button uk-button-text" href="#">Read more</a>
</div>
<div>
<a class="uk-button uk-button-text" href="#">5 Comments</a>
</div>
</div>
</article>
<article class="uk-article">
<h1 class="uk-article-title"><a class="uk-link-reset" href="">Heading</a></h1>
<p class="uk-article-meta">Written by <a href="#">Super User</a> on 12 April 2012. Posted in <a href="#">Blog</a></p>
<p class="uk-text-lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="uk-grid-small" uk-grid>
<div>
<a class="uk-button uk-button-text" href="#">Read more</a>
</div>
<div>
<a class="uk-button uk-button-text" href="#">5 Comments</a>
</div>
</div>
</article>
<article class="uk-article">
<img class="uk-margin-medium-bottom" src="images/photo.jpg" width="1800" height="1200" alt="">
<h1 class="uk-article-title"><a class="uk-link-reset" href="">Heading</a></h1>
<p class="uk-article-meta">Written by <a href="#">Super User</a> on 12 April 2012. Posted in <a href="#">Blog</a></p>
<p class="uk-text-lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="uk-grid-small" uk-grid>
<div>
<a class="uk-button uk-button-text" href="#">Read more</a>
</div>
<div>
<a class="uk-button uk-button-text" href="#">5 Comments</a>
</div>
</div>
</article>
<article class="uk-article">
<img class="uk-margin-medium-bottom" src="images/dark.jpg" width="1800" height="1200" alt="">
<h1 class="uk-article-title"><a class="uk-link-reset" href="">Heading</a></h1>
<p class="uk-article-meta">Written by <a href="#">Super User</a> on 12 April 2012. Posted in <a href="#">Blog</a></p>
<p class="uk-text-lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="uk-grid-small" uk-grid>
<div>
<a class="uk-button uk-button-text" href="#">Read more</a>
</div>
<div>
<a class="uk-button uk-button-text" href="#">5 Comments</a>
</div>
</div>
</article>
<article class="uk-article">
<h1 class="uk-article-title"><a class="uk-link-reset" href="">Heading</a></h1>
<p class="uk-text-lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="uk-grid-small" uk-grid>
<div>
<a class="uk-button uk-button-text" href="#">Read more</a>
</div>
<div>
<a class="uk-button uk-button-text" href="#">5 Comments</a>
</div>
</div>
</article>
<article class="uk-article">
<h1 class="uk-article-title"><a class="uk-link-reset" href="">Heading</a></h1>
<p class="uk-article-meta">Written by <a href="#">Super User</a> on 12 April 2012. Posted in <a href="#">Blog</a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="uk-grid-small" uk-grid>
<div>
<a class="uk-button uk-button-text" href="#">Read more</a>
</div>
<div>
<a class="uk-button uk-button-text" href="#">5 Comments</a>
</div>
</div>
</article>
<article class="uk-article">
<h1 class="uk-article-title"><a class="uk-link-reset" href="">Heading</a></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="uk-grid-small" uk-grid>
<div>
<a class="uk-button uk-button-text" href="#">Read more</a>
</div>
<div>
<a class="uk-button uk-button-text" href="#">5 Comments</a>
</div>
</div>
</article>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,67 @@
<!DOCTYPE html>
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Background - UIkit tests</title>
<script src="js/test.js"></script>
</head>
<body>
<div class="uk-container">
<h1>Background</h1>
<h2>Color, Position, No Repeat, Image</h2>
<div class="uk-child-width-1-4" uk-grid>
<div>
<div class="uk-background-norepeat uk-background-image@s uk-background-default uk-background-top-left uk-padding uk-flex uk-flex-center uk-flex-middle uk-text-center" style="background-image: url('images/photo.jpg'); background-size: 60px 40px;">Default<br>Top Left<br>S</div>
</div>
<div>
<div class="uk-background-norepeat uk-background-image@m uk-background-muted uk-background-top-right uk-padding uk-flex uk-flex-center uk-flex-middle uk-text-center" style="background-image: url('images/photo.jpg'); background-size: 60px 40px;">Muted<br>Top Right<br>M</div>
</div>
<div>
<div class="uk-background-norepeat uk-background-image@l uk-background-primary uk-background-bottom-left uk-padding uk-flex uk-flex-center uk-flex-middle uk-text-center" style="background-image: url('images/photo.jpg'); background-size: 60px 40px;">Primary<br>Bottom Left<br>L</div>
</div>
<div>
<div class="uk-background-norepeat uk-background-image@xl uk-background-secondary uk-background-bottom-right uk-padding uk-flex uk-flex-center uk-flex-middle uk-text-center" style="background-image: url('images/photo.jpg'); background-size: 60px 40px;">Secondary<br>Bottom Right<br>XL</div>
</div>
</div>
<h2>Cover</h2>
<div class="uk-child-width-1-2@s" uk-grid>
<div>
<div class="uk-background-cover uk-flex uk-flex-center uk-flex-middle uk-light" style="height: 300px; background-image: url('images/photo.jpg');">
<h1 class="uk-heading-large">Fixed Height</h1>
</div>
</div>
<div>
<div class="uk-background-cover uk-position-relative uk-light" style="background-image: url('images/photo.jpg');">
<img class="uk-invisible" src="images/photo.jpg" alt="">
<div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
<h1>Responsive Height</h1>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Badge - UIkit tests</title>
<script src="js/test.js"></script>
</head>
<body>
<div class="uk-container">
<h1>Badge</h1>
<p>
<a class="uk-badge" href="#">1</a>
<span class="uk-badge">2</span>
<span class="uk-badge">10</span>
<span class="uk-badge">100</span>
<span class="uk-badge">text</span>
</p>
<div class="uk-child-width-expand@m" uk-grid>
<div>
<h2>Navbar</h2>
<nav class="uk-navbar-container uk-margin" uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active <span class="uk-badge">2</span></a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item <span class="uk-badge">2</span></a></li>
</ul>
</div>
</nav>
</div>
<div>
<h2>Nav</h2>
<ul class="uk-nav uk-nav-default">
<li class="uk-active"><a href="#">Active <span class="uk-badge uk-text-top">2</span></a></li>
<li><a href="#">Item <span class="uk-badge uk-text-top">2</span></a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
<div>
<h2>Subnav</h2>
<ul class="uk-subnav" uk-margin>
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item <span class="uk-badge uk-text-top">2</span></a></li>
<li><a href="#">Item</a></li>
</ul>
<ul class="uk-subnav" uk-margin>
<li class="uk-active"><a href="#">Active <span class="uk-badge uk-text-top">2</span></a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
<div>
<h2>Tab</h2>
<ul uk-tab>
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item <span class="uk-badge uk-text-top">2</span></a></li>
<li><a href="#">Item</a></li>
</ul>
<ul uk-tab>
<li class="uk-active"><a href="#">Active <span class="uk-badge uk-text-top">2</span></a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,244 @@
<!DOCTYPE html>
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Base - UIkit tests</title>
<script src="js/test.js"></script>
</head>
<body>
<div class="uk-container">
<div uk-grid>
<div class="uk-width-2-3@m">
<h1>this is an H1 heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
<h2>this is an H2 heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
<pre>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</pre>
<p>This is preformatted text with a code element.</p>
<pre><code>// Code example
&lt;div id="myid" class="myclass" hidden&gt;
Lorem ipsum &lt;strong&gt;dolor&lt;/strong&gt; sit amet, consectetur adipiscing elit.
&lt;/div&gt;</code></pre>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3>this is an H3 heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
<blockquote>This is a short block quote — look Ma, no paragraph tags!</blockquote>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
<h4>this is an H4 heading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
<blockquote cite="#">
<p class="uk-margin-remove">The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element.</p>
<footer>Someone famous in <cite><a href="">Source Title</a></cite></footer>
</blockquote>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
<h5>this is an H5 heading</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
<hr>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
<h6>this is an H6 heading</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
<hr>
<h1>this is an H1 heading<br>with some more text</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2>this is an H2 heading<br>with some more text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3>this is an H3 heading<br>with some more text</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h4>this is an H4 heading<br>with some more text</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h5>this is an H5 heading<br>with some more text</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h6>this is an H6 heading<br>with some more text</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="uk-width-1-3@m">
<h3>Text-level semantics</h3>
<ul class="uk-list">
<li>The <a href="#">a element</a> example</li>
<li>The <abbr>abbr element</abbr> and <abbr title="Title text">abbr element with title</abbr> examples</li>
<li>The <b>b element</b> example</li>
<li>The <cite>cite element</cite> example</li>
<li>The <code>code element</code> example</li>
<li>The <del>del element</del> example</li>
<li>The <dfn>dfn element</dfn> and <dfn title="Title text">dfn element with title</dfn> examples</li>
<li>The <em>em element</em> example</li>
<li>The <i>i element</i> example</li>
<li>The img element <img src="" alt=""> example</li>
<li>The <ins>ins element</ins> example</li>
<li>The <kbd>kbd element</kbd> example</li>
<li>The <mark>mark element</mark> example</li>
<li>The <q>q element <q>inside</q> a q element</q> example</li>
<li>The <s>s element</s> example</li>
<li>The <samp>samp element</samp> example</li>
<li>The <small>small element</small> example</li>
<li>The <span>span element</span> example</li>
<li>The <strong>strong element</strong> example</li>
<li>The <sub>sub element</sub> example</li>
<li>The <sup>sup element</sup> example</li>
<li>The <u>u element</u> example</li>
<li>The <var>var element</var> example</li>
</ul>
<address>
The address element.<br>
<a href="#">John Doe</a><br>
somewhere, world
</address>
<hr>
<h3>Figure</h3>
<figure>
<img src="images/photo.jpg" width="1800" height="1200" alt="">
<figcaption>Figcaption content</figcaption>
</figure>
<hr>
<h3>Unordered List</h3>
<ul>
<li>list item</li>
<li>list item
<ul>
<li>list item</li>
<li>list item
<ul>
<li>list item</li>
<li>list item</li>
</ul>
</li>
<li>list item</li>
<li>list item</li>
</ul>
</li>
<li>list item</li>
<li>list item</li>
</ul>
<h3>Ordered List</h3>
<ol>
<li>list item</li>
<li>list item
<ol>
<li>list item</li>
<li>list item
<ol>
<li>list item</li>
<li>list item</li>
</ol>
</li>
<li>list item</li>
<li>list item</li>
</ol>
</li>
<li>list item</li>
<li>list item</li>
</ol>
<h3>Description list</h3>
<dl>
<dt>Description name</dt>
<dd>Description value</dd>
<dt>Description name</dt>
<dd>Description value</dd>
<dd>Description value</dd>
<dt>Description name</dt>
<dt>Description name</dt>
<dd>Description value</dd>
</dl>
<h3>Responsiveness</h3>
<div class="uk-grid-small uk-child-width-1-4" uk-grid>
<figure>
<img src="images/photo.jpg" width="1800" height="1200" alt="">
<figcaption>Image</figcaption>
</figure>
<figure>
<svg width="180" height="120" viewBox="0 0 180 120">
<rect x="0" y="0" width="180" height="10" />
<rect x="0" y="55" width="180" height="10" />
<rect x="0" y="110" width="180" height="10" />
</svg>
<figcaption>SVG</figcaption>
</figure>
<figure>
<canvas width="1800" height="1200" style="background: #f0f0f0;"></canvas>
<figcaption>Canvas</figcaption>
</figure>
<figure>
<video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="1920" height="1080"></video>
<figcaption>Video</figcaption>
</figure>
</div>
<h3>Audio</h3>
<audio controls src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"></audio>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Breadcrumb - UIkit tests</title>
<script src="js/test.js"></script>
</head>
<body>
<div class="uk-container">
<h1>Breadcrumb</h1>
<nav aria-label="Breadcrumb">
<ul class="uk-breadcrumb uk-width-xlarge">
<li><a href="#">Home</a></li>
<li><a href="#">Linked Category</a></li>
<li class="uk-disabled"><a>Disabled Category</a></li>
<li><span aria-current="page">Current Span</span></li>
</ul>
</nav>
<!-- Test space -->
<nav aria-label="Breadcrumb">
<ul class="uk-breadcrumb uk-width-xlarge">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Linked Category</a>
</li>
<li class="uk-disabled">
<a>Disabled Category</a>
</li>
<li class="uk-disabled">
<a>Current Link</a>
</li>
</ul>
</nav>
<nav aria-label="Breadcrumb">
<ul class="uk-breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Linked Category</a></li>
<li><a href="#">Linked Category</a></li>
</ul>
</nav>
<nav aria-label="Breadcrumb">
<ul class="uk-breadcrumb uk-width-xlarge">
<li><a href="#">Home</a></li>
<li><a href="#">Linked Category</a></li>
<li class="uk-disabled"><a>Disabled Category</a></li>
<li><span aria-current="page">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
</ul>
</nav>
</div>
</body>
</html>

View File

@@ -0,0 +1,257 @@
<!DOCTYPE html>
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Button - UIkit tests</title>
<script src="js/test.js"></script>
<style>
body { padding-bottom: 500px; }
</style>
</head>
<body>
<div class="uk-container">
<h1>Button</h1>
<div class="uk-child-width-1-4@m" uk-grid>
<div class="uk-width-1-2@m">
<h2>Styles</h2>
<p uk-margin>
<a class="uk-button uk-button-default" href="#">Link</a>
<button class="uk-button uk-button-default">Button</button>
<input type="submit" class="uk-button uk-button-default" value="Input">
<button class="uk-button uk-button-default" disabled>Disabled</button>
</p>
<p uk-margin>
<a class="uk-button uk-button-primary" href="#">Link</a>
<button class="uk-button uk-button-primary">Button</button>
<input type="submit" class="uk-button uk-button-primary" value="Input">
<button class="uk-button uk-button-primary" disabled>Disabled</button>
</p>
<p uk-margin>
<a class="uk-button uk-button-secondary" href="#">Link</a>
<button class="uk-button uk-button-secondary">Button</button>
<input type="submit" class="uk-button uk-button-secondary" value="Input">
<button class="uk-button uk-button-secondary" disabled>Disabled</button>
</p>
<p uk-margin>
<a class="uk-button uk-button-danger" href="#">Link</a>
<button class="uk-button uk-button-danger">Button</button>
<input type="submit" class="uk-button uk-button-danger" value="Input">
<button class="uk-button uk-button-danger" disabled>Disabled</button>
</p>
</div>
<div>
<h2>Text</h2>
<p uk-margin>
<a class="uk-button uk-button-text" href="#">Link</a>
<button class="uk-button uk-button-text">Button</button>
<input type="submit" class="uk-button uk-button-text" value="Input">
<button class="uk-button uk-button-text" disabled>Disabled</button>
</p>
</div>
<div>
<h2>Link</h2>
<p uk-margin>
<button class="uk-button uk-button-default">Button</button>
<button class="uk-button uk-button-link">Button</button>
</p>
<p uk-margin>
<button class="uk-button uk-button-default" disabled>Button</button>
<button class="uk-button uk-button-link" disabled>Button</button>
</p>
<p uk-margin>
<a href="#">Link</a>
<button class="uk-button uk-button-link uk-text-baseline">Button</button>
</p>
</div>
</div>
<h2>Size</h2>
<p uk-margin>
<a class="uk-button uk-button-default uk-button-small" href="#">Link</a>
<button class="uk-button uk-button-primary uk-button-small">Button</button>
<button class="uk-button uk-button-secondary uk-button-small">Button</button>
<button class="uk-button uk-button-danger uk-button-small">Button</button>
<button class="uk-button uk-button-default uk-button-small" disabled>Disabled</button>
<button class="uk-button uk-button-text uk-button-small">Button</button>
</p>
<p uk-margin>
<a class="uk-button uk-button-default uk-button-large" href="#">Link</a>
<button class="uk-button uk-button-primary uk-button-large">Button</button>
<button class="uk-button uk-button-secondary uk-button-large">Button</button>
<button class="uk-button uk-button-danger uk-button-large">Button</button>
<button class="uk-button uk-button-default uk-button-large" disabled>Disabled</button>
<button class="uk-button uk-button-text uk-button-large">Button</button>
</p>
<h2>Group</h2>
<div class="uk-margin" uk-margin>
<div class="uk-button-group">
<a class="uk-button uk-button-default uk-button-small" href="#">Link</a>
<button class="uk-button uk-button-default uk-button-small">Button</button>
<button class="uk-button uk-button-default uk-button-small">Button</button>
</div>
<div class="uk-button-group">
<a class="uk-button uk-button-primary uk-button-small" href="#">Link</a>
<button class="uk-button uk-button-primary uk-button-small">Button</button>
<button class="uk-button uk-button-primary uk-button-small">Button</button>
</div>
<div class="uk-button-group">
<a class="uk-button uk-button-secondary uk-button-small" href="#">Link</a>
<button class="uk-button uk-button-secondary uk-button-small">Button</button>
<button class="uk-button uk-button-secondary uk-button-small">Button</button>
</div>
<div class="uk-button-group">
<a class="uk-button uk-button-danger uk-button-small" href="#">Link</a>
<button class="uk-button uk-button-danger uk-button-small">Button</button>
<button class="uk-button uk-button-danger uk-button-small">Button</button>
</div>
<div class="uk-button-group">
<button class="uk-button uk-button-default uk-button-small" disabled>Button</button>
<button class="uk-button uk-button-default uk-button-small" disabled>Button</button>
<button class="uk-button uk-button-default uk-button-small" disabled>Button</button>
</div>
</div>
<div class="uk-margin" uk-margin>
<div class="uk-button-group">
<a class="uk-button uk-button-default" href="#">Link</a>
<button class="uk-button uk-button-default">Button</button>
<button class="uk-button uk-button-default">Button</button>
</div>
<div class="uk-button-group">
<a class="uk-button uk-button-primary" href="#">Link</a>
<button class="uk-button uk-button-primary">Button</button>
<button class="uk-button uk-button-primary">Button</button>
</div>
<div class="uk-button-group">
<a class="uk-button uk-button-secondary" href="#">Link</a>
<button class="uk-button uk-button-secondary">Button</button>
<button class="uk-button uk-button-secondary">Button</button>
</div>
<div class="uk-button-group">
<a class="uk-button uk-button-danger" href="#">Link</a>
<button class="uk-button uk-button-danger">Button</button>
<button class="uk-button uk-button-danger">Button</button>
</div>
<div class="uk-button-group">
<button class="uk-button uk-button-default" disabled>Button</button>
<button class="uk-button uk-button-default" disabled>Button</button>
<button class="uk-button uk-button-default" disabled>Button</button>
</div>
</div>
<div class="uk-margin" uk-margin>
<div class="uk-button-group">
<a class="uk-button uk-button-default uk-button-large" href="#">Link</a>
<button class="uk-button uk-button-default uk-button-large">Button</button>
<button class="uk-button uk-button-default uk-button-large">Button</button>
</div>
<div class="uk-button-group">
<a class="uk-button uk-button-primary uk-button-large" href="#">Link</a>
<button class="uk-button uk-button-primary uk-button-large">Button</button>
<button class="uk-button uk-button-primary uk-button-large">Button</button>
</div>
<div class="uk-button-group">
<a class="uk-button uk-button-secondary uk-button-large" href="#">Link</a>
<button class="uk-button uk-button-secondary uk-button-large">Button</button>
<button class="uk-button uk-button-secondary uk-button-large">Button</button>
</div>
<div class="uk-button-group">
<a class="uk-button uk-button-danger uk-button-large" href="#">Link</a>
<button class="uk-button uk-button-danger uk-button-large">Button</button>
<button class="uk-button uk-button-danger uk-button-large">Button</button>
</div>
<div class="uk-button-group">
<button class="uk-button uk-button-default uk-button-large" disabled>Button</button>
<button class="uk-button uk-button-default uk-button-large" disabled>Button</button>
<button class="uk-button uk-button-default uk-button-large" disabled>Button</button>
</div>
</div>
<h2>Group with Drop</h2>
<div class="uk-margin" uk-margin>
<div class="uk-button-group">
<button class="uk-button uk-button-default">Group</button>
<div class="uk-inline">
<button class="uk-button uk-button-default" type="button"><span uk-icon="icon: table"></span></button>
<div uk-drop="mode: click">
<div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</div>
<div class="uk-button-group">
<button class="uk-button uk-button-primary">Group</button>
<div class="uk-inline">
<button class="uk-button uk-button-primary" type="button"><span uk-icon="icon: table"></span></button>
<div uk-drop="mode: click">
<div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</div>
<div class="uk-button-group">
<button class="uk-button uk-button-secondary">Group</button>
<div class="uk-inline">
<button class="uk-button uk-button-secondary" type="button"><span uk-icon="icon: table"></span></button>
<div uk-drop="mode: click">
<div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</div>
<div class="uk-button-group">
<button class="uk-button uk-button-danger">Group</button>
<div class="uk-inline">
<button class="uk-button uk-button-danger" type="button"><span uk-icon="icon: table"></span></button>
<div uk-drop="mode: click">
<div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,622 @@
<!DOCTYPE html>
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Card - UIkit tests</title>
<script src="js/test.js"></script>
</head>
<body>
<div class="uk-section uk-section-default uk-section-small uk-padding-remove-top">
<div class="uk-container">
<h1>Card</h1>
<div class="uk-child-width-1-4@m uk-grid-match" uk-grid>
<div>
<div class="uk-card uk-card-default uk-card-hover">
<div class="uk-card-badge">Hot</div>
<div class="uk-card-body">
<h3 class="uk-card-title">Default</h3>
<p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p uk-margin>
<a class="uk-button uk-button-default" href="#">Button</a>
<a class="uk-button uk-button-text uk-margin-small-left" href="#">Button</a>
</p>
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-primary uk-card-hover">
<div class="uk-card-badge">Hot</div>
<div class="uk-card-body">
<h3 class="uk-card-title">Primary</h3>
<p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p uk-margin>
<a class="uk-button uk-button-default" href="#">Button</a>
<a class="uk-button uk-button-text uk-margin-small-left" href="#">Button</a>
</p>
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-secondary uk-card-hover">
<div class="uk-card-badge">Hot</div>
<div class="uk-card-body">
<h3 class="uk-card-title">Secondary</h3>
<p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p uk-margin>
<a class="uk-button uk-button-default" href="#">Button</a>
<a class="uk-button uk-button-text uk-margin-small-left" href="#">Button</a>
</p>
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-hover">
<div class="uk-card-badge">Hot</div>
<div class="uk-card-body">
<h3 class="uk-card-title">Hover</h3>
<p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p uk-margin>
<a class="uk-button uk-button-default" href="#">Button</a>
<a class="uk-button uk-button-text uk-margin-small-left" href="#">Button</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uk-section uk-section-muted uk-section-small">
<div class="uk-container">
<div class="uk-child-width-1-3@m uk-grid-match" uk-grid>
<div>
<div class="uk-card uk-card-default uk-card-hover uk-card-body">
<h3 class="uk-card-title">Default</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-primary uk-card-hover uk-card-body">
<h3 class="uk-card-title">Primary</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-secondary uk-card-hover uk-card-body">
<h3 class="uk-card-title">Secondary</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</div>
</div>
</div>
</div>
<div class="uk-section uk-section-primary uk-section-small uk-preserve-color">
<div class="uk-container">
<div class="uk-child-width-1-3@m uk-grid-match" uk-grid>
<div>
<div class="uk-card uk-card-default uk-card-hover uk-card-body">
<h3 class="uk-card-title">Default</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-primary uk-card-hover uk-card-body">
<h3 class="uk-card-title">Primary</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-secondary uk-card-hover uk-card-body">
<h3 class="uk-card-title">Secondary</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</div>
</div>
</div>
</div>
<div class="uk-section uk-section-secondary uk-section-small uk-preserve-color">
<div class="uk-container">
<div class="uk-child-width-1-3@m uk-grid-match" uk-grid>
<div>
<div class="uk-card uk-card-default uk-card-hover uk-card-body">
<h3 class="uk-card-title">Default</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-primary uk-card-hover uk-card-body">
<h3 class="uk-card-title">Primary</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-secondary uk-card-hover uk-card-body">
<h3 class="uk-card-title">Secondary</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</div>
</div>
</div>
</div>
<div class="uk-section-default ">
<div class="uk-section uk-section-small uk-background-cover" style="background-image: url('images/photo.jpg');">
<div class="uk-container">
<div class="uk-child-width-1-3@m uk-grid-match" uk-grid>
<div>
<div class="uk-card uk-card-default uk-card-hover uk-card-body">
<h3 class="uk-card-title">Default</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-primary uk-card-hover uk-card-body">
<h3 class="uk-card-title">Primary</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-secondary uk-card-hover uk-card-body">
<h3 class="uk-card-title">Secondary</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uk-container uk-margin-large-top">
<h2>Media</h2>
<div class="uk-child-width-1-4@m" uk-grid>
<div>
<div class="uk-card uk-card-default">
<div class="uk-card-media-top">
<img src="images/photo.jpg" width="1800" height="1200" alt="">
</div>
<div class="uk-card-body">
<h3 class="uk-card-title">Media Top</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-default">
<div class="uk-card-body">
<h3 class="uk-card-title">Media Bottom</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>
<div class="uk-card-media-bottom">
<img src="images/photo.jpg" width="1800" height="1200" alt="">
</div>
</div>
</div>
<div class="uk-width-1-2@m">
<div class="uk-card uk-card-default uk-grid-collapse uk-child-width-1-2@s uk-margin" uk-grid>
<div class="uk-card-media-left uk-cover-container">
<img src="images/photo.jpg" alt="" uk-cover>
<canvas width="1800" height="1200"></canvas>
</div>
<div>
<div class="uk-card-body">
<h3 class="uk-card-title">Media Left</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>
</div>
</div>
<div class="uk-card uk-card-default uk-grid-collapse uk-child-width-1-2@s uk-margin" uk-grid>
<div class="uk-flex-last@s uk-card-media-right uk-cover-container">
<img src="images/photo.jpg" alt="" uk-cover>
<canvas width="1800" height="1200"></canvas>
</div>
<div>
<div class="uk-card-body">
<h3 class="uk-card-title">Media Right</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>
</div>
</div>
</div>
</div>
<h2>Header and Footer</h2>
<div class="uk-child-width-1-4@m" uk-grid>
<div>
<div class="uk-card uk-card-default">
<div class="uk-card-header">
<h3 class="uk-card-title">Title</h3>
</div>
<div class="uk-card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="uk-card-footer">
<p class="uk-text-meta">Written by <a href="#">Super User</a> on <time datetime="2016-04-01T19:00">April 01, 2016</time>.</p>
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-default">
<div class="uk-card-media-top">
<img src="images/light.jpg" width="1800" height="1200" alt="">
</div>
<div class="uk-card-body">
<h3 class="uk-card-title">Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>
<div class="uk-card-footer">
<p>
<a class="uk-button uk-button-primary" href="#">Button</a>
<a class="uk-button uk-button-text uk-margin-small-left" href="#">Button</a>
</p>
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-default">
<div class="uk-card-header">
<h3 class="uk-card-title">Title</h3>
</div>
<div class="uk-card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>
<div class="uk-card-media-bottom">
<img src="images/dark.jpg" width="1800" height="1200" alt="">
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-default">
<div class="uk-card-header">
<div class="uk-grid-small uk-flex-middle" uk-grid>
<div class="uk-width-auto">
<img class="uk-border-circle" src="images/avatar.jpg" width="50" height="50" alt="">
</div>
<div class="uk-width-expand">
<h3 class="uk-card-title uk-margin-remove-bottom">Title</h3>
<p class="uk-text-meta uk-margin-remove-top"><time datetime="2016-04-01T19:00">April 01, 2016</time></p>
</div>
</div>
</div>
<div class="uk-card-media">
<img src="images/light.jpg" width="1800" height="1200" alt="">
</div>
<div class="uk-card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>
</div>
</div>
</div>
<h2>Nav</h2>
<div class="uk-child-width-1-4@m" uk-grid>
<div>
<div class="uk-card uk-card-default uk-card-body">
<ul class="uk-nav uk-nav-default">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
</div>
<div>
<div class="uk-card uk-card-primary uk-card-body">
<h3 class="uk-card-title">Title</h3>
<ul class="uk-nav uk-nav-default">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
</div>
<div>
<div class="uk-card uk-card-default">
<div class="uk-card-header">
<h3 class="uk-card-title">Title</h3>
</div>
<div class="uk-card-body">
<ul class="uk-nav uk-nav-default">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
<div class="uk-card-footer">
<p class="uk-text-meta">Written by <a href="#">Super User</a> on <time datetime="2016-04-01T19:00">April 01, 2016</time>.</p>
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-secondary">
<div class="uk-card-media-top">
<img src="images/dark.jpg" width="1800" height="1200" alt="">
</div>
<div class="uk-card-body">
<ul class="uk-nav uk-nav-default">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
<div class="uk-card-media-bottom">
<img src="images/dark.jpg" width="1800" height="1200" alt="">
</div>
</div>
</div>
</div>
<h2>Small</h2>
<div class="uk-child-width-1-4@m" uk-grid>
<div>
<div class="uk-card uk-card-default uk-card-small">
<div class="uk-card-header">
<h3 class="uk-card-title">Title</h3>
</div>
<div class="uk-card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="uk-card-footer">
<p class="uk-text-meta">Written by <a href="#">Super User</a> on <time datetime="2016-04-01T19:00">April 01, 2016</time>.</p>
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-small">
<div class="uk-card-media-top">
<img src="images/light.jpg" width="1800" height="1200" alt="">
</div>
<div class="uk-card-body">
<h3 class="uk-card-title">Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body uk-card-small">
<ul class="uk-nav uk-nav-default">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body uk-card-small">
<h3 class="uk-card-title">Title</h3>
<ul class="uk-nav uk-nav-default">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
</div>
</div>
<h2>Large</h2>
<div class="uk-child-width-1-2@m" uk-grid>
<div>
<div class="uk-card uk-card-default uk-card-large">
<div class="uk-card-header">
<h3 class="uk-card-title">Title</h3>
</div>
<div class="uk-card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="uk-card-footer">
<p class="uk-text-meta">Written by <a href="#">Super User</a> on <time datetime="2016-04-01T19:00">April 01, 2016</time>.</p>
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-large">
<div class="uk-card-media-top">
<img src="images/light.jpg" width="1800" height="1200" alt="">
</div>
<div class="uk-card-body">
<h3 class="uk-card-title">Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body uk-card-large">
<ul class="uk-nav uk-nav-default">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body uk-card-large">
<h3 class="uk-card-title">Title</h3>
<ul class="uk-nav uk-nav-default">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,74 @@
<!DOCTYPE html>
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Close - UIkit tests</title>
<script src="js/test.js"></script>
</head>
<body>
<div class="uk-container">
<h1>Close</h1>
<p>
<a href uk-close></a> Link<br>
<button type="button" uk-close></button> Button
</p>
<p>
<a class="uk-close-large" href uk-close></a> Link<br>
<button class="uk-close-large" type="button" uk-close></button> Button
</p>
<h2>Javascript Options</h2>
<div class="uk-overflow-auto">
<table class="uk-table uk-table-striped">
<thead>
<tr>
<th>Option</th>
<th>Value</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>i18n</code></td>
<td>Object</td>
<td>null</td>
<td>Override default translation texts.</td>
</tr>
</tbody>
</table>
</div>
<h2>i18n</h2>
<div class="uk-overflow-auto">
<table class="uk-table uk-table-striped">
<thead>
<tr>
<th>Key</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>label</code></td>
<td>Close</td>
<td><code>aria-label</code> for button.</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Column - UIkit tests</title>
<script src="js/test.js"></script>
</head>
<body>
<div class="uk-container">
<h1>Column</h1>
<div class="uk-margin uk-column-1-2@s uk-column-1-3@m uk-column-1-4@l uk-column-1-5@xl uk-text-justify">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<img src="images/photo.jpg" width="1800" height="1200" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<h2>Divider</h2>
<div class="uk-margin uk-column-divider uk-column-1-2@s uk-column-1-3@m uk-column-1-4@l uk-column-1-5@xl uk-text-justify">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<img src="images/photo.jpg" width="1800" height="1200" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<h2>Span all columns</h2>
<div class="uk-margin uk-column-divider uk-column-1-2@s uk-column-1-3@m uk-text-justify">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<blockquote cite="#" class="uk-column-span uk-width-3-4@m uk-margin-auto uk-margin-large">
<p>The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element.</p>
<footer>Someone famous in <cite><a href="">Source Title</a></cite></footer>
</blockquote>
<img src="images/photo.jpg" width="1800" height="1200" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,209 @@
<!DOCTYPE html>
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Comment - UIkit tests</title>
<script src="js/test.js"></script>
</head>
<body>
<div class="uk-container">
<h3>Comment</h3>
<div class="uk-container-xsmall">
<ul class="uk-comment-list">
<li>
<article class="uk-comment" role="comment">
<header class="uk-comment-header">
<div class="uk-grid-medium uk-flex-middle" uk-grid>
<div class="uk-width-auto">
<img class="uk-comment-avatar" src="images/avatar.jpg" width="50" height="50" alt="">
</div>
<div class="uk-width-expand">
<h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">Author</a></h4>
<ul class="uk-comment-meta uk-subnav uk-subnav-divider uk-margin-remove-top">
<li><a href="#">12 days ago</a></li>
<li><a href="#">Reply</a></li>
</ul>
</div>
</div>
</header>
<div class="uk-comment-body">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</article>
</li>
<li>
<article class="uk-comment uk-visible-toggle" tabindex="-1" role="comment">
<header class="uk-comment-header uk-position-relative">
<div class="uk-grid-medium uk-flex-middle" uk-grid>
<div class="uk-width-auto">
<img class="uk-comment-avatar" src="images/avatar.jpg" width="50" height="50" alt="">
</div>
<div class="uk-width-expand">
<h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">Author</a></h4>
<p class="uk-comment-meta uk-margin-remove-top"><a class="uk-link-reset" href="#">12 days ago</a></p>
</div>
</div>
<div class="uk-position-top-right uk-position-small uk-hidden-hover"><a class="uk-link-muted" href="#">Reply</a></div>
</header>
<div class="uk-comment-body">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</article>
<ul>
<li>
<article class="uk-comment uk-visible-toggle" tabindex="-1" role="comment">
<header class="uk-comment-header uk-position-relative">
<div class="uk-grid-medium uk-flex-middle" uk-grid>
<div class="uk-width-auto">
<img class="uk-comment-avatar" src="images/avatar.jpg" width="50" height="50" alt="">
</div>
<div class="uk-width-expand">
<h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">Author</a></h4>
<p class="uk-comment-meta uk-margin-remove-top"><a class="uk-link-reset" href="#">12 days ago</a></p>
</div>
</div>
<div class="uk-position-top-right uk-position-small uk-hidden-hover"><a class="uk-link-muted" href="#">Reply</a></div>
</header>
<div class="uk-comment-body">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</article>
<ul>
<li>
<article class="uk-comment uk-comment-primary uk-visible-toggle" tabindex="-1" role="comment">
<header class="uk-comment-header uk-position-relative">
<div class="uk-grid-medium uk-flex-middle" uk-grid>
<div class="uk-width-auto">
<img class="uk-comment-avatar" src="images/avatar.jpg" width="50" height="50" alt="">
</div>
<div class="uk-width-expand">
<h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">Author</a></h4>
<p class="uk-comment-meta uk-margin-remove-top"><a class="uk-link-reset" href="#">12 days ago</a></p>
</div>
</div>
<div class="uk-position-top-right uk-position-small uk-hidden-hover"><a class="uk-link-muted" href="#">Reply</a></div>
</header>
<div class="uk-comment-body">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</article>
<ul>
<li>
<article class="uk-comment uk-visible-toggle" tabindex="-1" role="comment">
<header class="uk-comment-header uk-position-relative">
<div class="uk-grid-medium uk-flex-middle" uk-grid>
<div class="uk-width-auto">
<img class="uk-comment-avatar" src="images/avatar.jpg" width="50" height="50" alt="">
</div>
<div class="uk-width-expand">
<h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">Author</a></h4>
<p class="uk-comment-meta uk-margin-remove-top"><a class="uk-link-reset" href="#">12 days ago</a></p>
</div>
</div>
<div class="uk-position-top-right uk-position-small uk-hidden-hover"><a class="uk-link-muted" href="#">Reply</a></div>
</header>
<div class="uk-comment-body">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</article>
</li>
</ul>
</li>
</ul>
</li>
<li>
<article class="uk-comment uk-visible-toggle" tabindex="-1" role="comment">
<header class="uk-comment-header uk-position-relative">
<div class="uk-grid-medium uk-flex-middle" uk-grid>
<div class="uk-width-auto">
<img class="uk-comment-avatar" src="images/avatar.jpg" width="50" height="50" alt="">
</div>
<div class="uk-width-expand">
<h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">Author</a></h4>
<p class="uk-comment-meta uk-margin-remove-top"><a class="uk-link-reset" href="#">12 days ago</a></p>
</div>
</div>
<div class="uk-position-top-right uk-position-small uk-hidden-hover"><a class="uk-link-muted" href="#">Reply</a></div>
</header>
<div class="uk-comment-body">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</article>
</li>
</ul>
</li>
<li>
<article class="uk-comment uk-visible-toggle" tabindex="-1" role="comment">
<header class="uk-comment-header uk-position-relative">
<div class="uk-grid-medium uk-flex-middle" uk-grid>
<div class="uk-width-auto">
<img class="uk-comment-avatar" src="images/avatar.jpg" width="50" height="50" alt="">
</div>
<div class="uk-width-expand">
<h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">Author</a></h4>
<p class="uk-comment-meta uk-margin-remove-top"><a class="uk-link-reset" href="#">12 days ago</a></p>
</div>
</div>
<div class="uk-position-top-right uk-position-small uk-hidden-hover"><a class="uk-link-muted" href="#">Reply</a></div>
</header>
<div class="uk-comment-body">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</article>
</li>
<li>
<article class="uk-comment uk-comment-primary uk-visible-toggle" tabindex="-1" role="comment">
<header class="uk-comment-header uk-position-relative">
<div class="uk-grid-medium uk-flex-middle" uk-grid>
<div class="uk-width-auto">
<img class="uk-comment-avatar" src="images/avatar.jpg" width="50" height="50" alt="">
</div>
<div class="uk-width-expand">
<h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">Author</a></h4>
<p class="uk-comment-meta uk-margin-remove-top"><a class="uk-link-reset" href="#">12 days ago</a></p>
</div>
</div>
<div class="uk-position-top-right uk-position-small uk-hidden-hover"><a class="uk-link-muted" href="#">Reply</a></div>
</header>
<div class="uk-comment-body">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</article>
<ul>
<li>
<article class="uk-comment uk-visible-toggle" tabindex="-1" role="comment">
<header class="uk-comment-header uk-position-relative">
<div class="uk-grid-medium uk-flex-middle" uk-grid>
<div class="uk-width-auto">
<img class="uk-comment-avatar" src="images/avatar.jpg" width="50" height="50" alt="">
</div>
<div class="uk-width-expand">
<h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">Author</a></h4>
<p class="uk-comment-meta uk-margin-remove-top"><a class="uk-link-reset" href="#">12 days ago</a></p>
</div>
</div>
<div class="uk-position-top-right uk-position-small uk-hidden-hover"><a class="uk-link-muted" href="#">Reply</a></div>
</header>
<div class="uk-comment-body">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</article>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,266 @@
<!DOCTYPE html>
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Container - UIkit tests</title>
<script src="js/test.js"></script>
</head>
<body>
<div class="uk-container uk-margin-medium">
<h1>Container</h1>
<div class="uk-margin uk-column-1-2@s uk-column-1-3@m uk-text-justify">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="uk-container uk-container-expand-right uk-margin-medium">
<div class="uk-child-width-1-3@m uk-text-justify" uk-grid>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="uk-grid-item-match">
<div class="uk-container-item-padding-remove-right uk-background-muted uk-flex uk-flex-center uk-flex-middle">Item Padding Remove Right</div>
</div>
</div>
</div>
<div class="uk-container uk-container-expand-left uk-margin-medium">
<div class="uk-child-width-1-3@m uk-text-justify" uk-grid>
<div class="uk-grid-item-match">
<div class="uk-container-item-padding-remove-left uk-background-muted uk-flex uk-flex-center uk-flex-middle">Item Padding Remove Left</div>
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="uk-container uk-container-xsmall uk-margin-medium">
<h1>X-Small</h1>
<div class="uk-margin uk-column-1-2@s uk-text-justify">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="uk-container uk-container-xsmall uk-container-expand-right uk-margin-medium">
<div class="uk-column-1-2@s uk-text-justify">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="uk-container uk-container-xsmall uk-container-expand-left uk-margin-medium">
<div class="uk-column-1-2@s uk-text-justify">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="uk-container uk-container-small uk-margin-medium">
<h1>Small</h1>
<div class="uk-margin uk-column-1-2@s uk-text-justify">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="uk-container uk-container-small uk-container-expand-right uk-margin-medium">
<div class="uk-column-1-2@s uk-text-justify">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="uk-container uk-container-small uk-container-expand-left uk-margin-medium">
<div class="uk-column-1-2@s uk-text-justify">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="uk-container uk-container-large uk-margin-medium">
<h1>Large</h1>
<div class="uk-margin uk-column-1-2@s uk-column-1-3@m uk-column-1-4@l uk-text-justify">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="uk-container uk-container-large uk-container-expand-right uk-margin-medium">
<div class="uk-column-1-2@s uk-column-1-3@m uk-column-1-4@l uk-text-justify">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="uk-container uk-container-large uk-container-expand-left uk-margin-medium">
<div class="uk-column-1-2@s uk-column-1-3@m uk-column-1-4@l uk-text-justify">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="uk-container uk-container-xlarge uk-margin-medium">
<h1>X-Large</h1>
<div class="uk-margin uk-column-1-2@s uk-column-1-3@m uk-column-1-4@l uk-text-justify">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="uk-container uk-container-xlarge uk-container-expand-right uk-margin-medium">
<div class="uk-column-1-2@s uk-column-1-3@m uk-column-1-4@l uk-text-justify">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="uk-container uk-container-xlarge uk-container-expand-left uk-margin-medium">
<div class="uk-column-1-2@s uk-column-1-3@m uk-column-1-4@l uk-text-justify">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="uk-container uk-container-expand uk-margin-medium">
<h1>Expand</h1>
<div class="uk-margin uk-column-1-2@s uk-column-1-3@m uk-column-1-4@l uk-text-justify">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,129 @@
<!DOCTYPE html>
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Countdown - UIkit tests</title>
<script src="js/test.js"></script>
</head>
<body>
<div class="uk-container">
<h1>Countdown</h1>
<h2>Grid</h2>
<div class="uk-grid-small uk-child-width-auto uk-margin" uk-grid uk-countdown>
<div>
<div class="uk-countdown-number uk-countdown-days"></div>
</div>
<div class="uk-countdown-separator">:</div>
<div>
<div class="uk-countdown-number uk-countdown-hours"></div>
</div>
<div class="uk-countdown-separator">:</div>
<div>
<div class="uk-countdown-number uk-countdown-minutes"></div>
</div>
<div class="uk-countdown-separator">:</div>
<div>
<div class="uk-countdown-number uk-countdown-seconds"></div>
</div>
</div>
<div class="uk-grid-small uk-child-width-auto" uk-grid uk-countdown>
<div>
<div class="uk-countdown-number uk-countdown-days"></div>
<div class="uk-countdown-label uk-margin-small uk-text-center uk-visible@s">Days</div>
</div>
<div class="uk-countdown-separator">:</div>
<div>
<div class="uk-countdown-number uk-countdown-hours"></div>
<div class="uk-countdown-label uk-margin-small uk-text-center uk-visible@s">Hours</div>
</div>
<div class="uk-countdown-separator">:</div>
<div>
<div class="uk-countdown-number uk-countdown-minutes"></div>
<div class="uk-countdown-label uk-margin-small uk-text-center uk-visible@s">Minutes</div>
</div>
<div class="uk-countdown-separator">:</div>
<div>
<div class="uk-countdown-number uk-countdown-seconds"></div>
<div class="uk-countdown-label uk-margin-small uk-text-center uk-visible@s">Seconds</div>
</div>
</div>
<h2>Text</h2>
<div class="uk-margin" uk-countdown>
<span class="uk-countdown-number uk-countdown-days uk-text-middle"></span>
<span class="uk-countdown-separator uk-text-middle">:</span>
<span class="uk-countdown-number uk-countdown-hours uk-text-middle"></span>
<span class="uk-countdown-separator uk-text-middle">:</span>
<span class="uk-countdown-number uk-countdown-minutes uk-text-middle"></span>
<span class="uk-countdown-separator uk-text-middle">:</span>
<span class="uk-countdown-number uk-countdown-seconds uk-text-middle"></span>
</div>
<div uk-countdown>
<span class="uk-countdown-number">
<span class="uk-countdown-days"></span><small>d</small>
</span>
<span class="uk-countdown-number">
<span class="uk-countdown-hours"></span><small>h</small>
</span>
<span class="uk-countdown-number">
<span class="uk-countdown-minutes"></span><small>m</small>
</span>
<span class="uk-countdown-number">
<span class="uk-countdown-seconds"></span><small>s</small>
</span>
</div>
<h2>JavaScript Options</h2>
<div class="uk-overflow-auto">
<table class="uk-table uk-table-striped">
<thead>
<tr>
<th>Option</th>
<th>Value</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>date</code></td>
<td>String</td>
<td>false</td>
<td>Any string parsable by <code>Date.parse</code> - <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date/parse" target="_blank">Reference</a>.</td>
</tr>
<tr>
<td><code>reload</code></td>
<td>Boolean</td>
<td>false</td>
<td>Reload page after countdown expires. Initially expired countdowns won't reload the page.</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
let date = new Date(Date.now());
date.setDate(date.getDate() + 7);
date = date.toISOString();
for (const el of UIkit.util.$$('[uk-countdown]')) {
el.setAttribute('date', date);
}
</script>
</body>
</html>

View File

@@ -0,0 +1,173 @@
<!DOCTYPE html>
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cover - UIkit tests</title>
<script src="js/test.js"></script>
<style>
.test-height { height: 300px; }
</style>
</head>
<body>
<div class="uk-container">
<h1>Cover</h1>
<h2>Fixed Height</h2>
<div class="uk-child-width-1-2@m" uk-grid>
<div>
<h3>Image</h3>
<div class="test-height uk-cover-container uk-light">
<img src="images/photo.jpg" alt="" uk-cover>
<div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
<h1>Heading</h1>
</div>
</div>
</div>
<div>
<h3>Video</h3>
<div class="test-height uk-cover-container uk-light">
<video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" autoplay loop muted playsinline uk-cover></video>
<div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
<h1>Heading</h1>
</div>
</div>
</div>
<div>
<h3>Iframe (YouTube)</h3>
<div class="test-height uk-cover-container uk-light">
<iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?autoplay=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;loop=1&amp;modestbranding=1&amp;wmode=transparent&amp;playsinline=1" width="1920" height="1080" allowfullscreen uk-cover></iframe>
<div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
<h1>Heading</h1>
</div>
</div>
</div>
<div>
<h3>Iframe (Vimeo)</h3>
<div class="test-height uk-cover-container uk-light">
<iframe src="https://player.vimeo.com/video/1084537?title=0&amp;background=1&amp;keyboard=0" width="500" height="281" allowfullscreen uk-cover></iframe>
<div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
<h1>Heading</h1>
</div>
</div>
</div>
</div>
<h2>Responsive Height</h2>
<div class="uk-child-width-1-2@m" uk-grid>
<div>
<h3>Video (JS)</h3>
<div class="uk-cover-container uk-light">
<canvas width="600" height="400"></canvas>
<video src="https://yootheme.com/site/images/media/yootheme-pro.mp4?test2" autoplay loop muted playsinline uk-cover></video>
<div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
<h1>Heading</h1>
</div>
</div>
</div>
<div>
<h3>Iframe (YouTube)</h3>
<div class="uk-cover-container uk-light">
<canvas width="600" height="400"></canvas>
<iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?autoplay=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;loop=1&amp;modestbranding=1&amp;wmode=transparent&amp;playsinline=1" width="1920" height="1080" allowfullscreen uk-cover></iframe>
<div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
<h1>Heading</h1>
</div>
</div>
</div>
</div>
<h2>Viewport Height</h2>
<div class="uk-child-width-1-2@m" uk-grid>
<div>
<h3>Video (JS)</h3>
<div class="uk-cover-container uk-light" uk-height-viewport>
<video src="https://yootheme.com/site/images/media/yootheme-pro.mp4?test3" autoplay loop muted playsinline uk-cover></video>
<div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
<h1>Heading</h1>
</div>
</div>
</div>
<div>
<h3>Iframe (YouTube)</h3>
<div class="uk-cover-container uk-light" uk-height-viewport>
<iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?autoplay=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;loop=1&amp;modestbranding=1&amp;wmode=transparent&amp;playsinline=1" width="1920" height="1080" allowfullscreen uk-cover></iframe>
<div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
<h1>Heading</h1>
</div>
</div>
</div>
</div>
<h2>JavaScript Options</h2>
<div class="uk-overflow-auto">
<table class="uk-table uk-table-striped">
<thead>
<tr>
<th>Option</th>
<th>Value</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>automute</code></td>
<td>Boolean</td>
<td>true</td>
<td>Automutes the video.</td>
</tr>
<tr>
<td><code>width</code></td>
<td>Number</td>
<td></td>
<td>The element's width.</td>
</tr>
<tr>
<td><code>height</code></td>
<td>Number</td>
<td></td>
<td>The element's height.</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,20 @@
ul.uk-navbar-nav ul {
display: block;
}
body.uk-light #test-selects .uk-select {
color: #fff;
}
#test-selects .uk-select,
body.uk-dark #test-selects .uk-select {
color: #333;
}
body, body.uk-dark {
background: #fff;
color: #222;
}
body.uk-light {
background: #222;
}

View File

@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Description List - UIkit tests</title>
<script src="js/test.js"></script>
</head>
<body>
<div class="uk-container">
<h1>Description List</h1>
<div class="uk-child-width-1-2@m" uk-grid>
<div>
<h3>Default</h3>
<dl class="uk-description-list">
<dt>Description term</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
<dt>Description term</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
<dt>Description term</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
</dl>
</div>
<div>
<h3>Divider</h3>
<dl class="uk-description-list uk-description-list-divider">
<dt>Description term</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
<dt>Description term</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
<dt>Description term</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
</dl>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,89 @@
<!DOCTYPE html>
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Divider - UIkit tests</title>
<script src="js/test.js"></script>
</head>
<body>
<div class="uk-container">
<h1>Divider</h1>
<div class="uk-child-width-1-2 uk-margin-medium" uk-grid>
<div>
<h1>Icon</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
<hr class="uk-divider-icon">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="uk-text-center">
<h1>Icon</h1>
<div class="uk-divider-icon"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="uk-child-width-1-2 uk-margin-medium" uk-grid>
<div>
<h1>Small</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
<hr class="uk-divider-small">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="uk-text-center">
<h1>Small</h1>
<div class="uk-divider-small"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="uk-child-width-1-2 uk-margin-medium" uk-grid>
<div>
<h1>Vertical</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
<hr class="uk-divider-vertical">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="uk-text-center">
<h1>Vertical</h1>
<div class="uk-divider-vertical"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,139 @@
<!DOCTYPE html>
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dotnav - UIkit tests</title>
<script src="js/test.js"></script>
</head>
<body>
<div class="uk-container">
<h1>Dotnav</h1>
<h2>Horizontal</h2>
<ul class="uk-dotnav">
<li class="uk-active"><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
</ul>
<h2>Vertical</h2>
<ul class="uk-dotnav uk-dotnav-vertical">
<li class="uk-active"><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
</ul>
<h2>Image</h2>
<div class="uk-child-width-1-3@m" uk-grid>
<div>
<div class="uk-inline uk-light">
<img src="images/photo.jpg" width="1800" height="1200" alt="">
<div class="uk-position-small uk-position-bottom-center">
<ul class="uk-dotnav">
<li class="uk-active"><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
</ul>
</div>
<div class="uk-position-small uk-position-center-right">
<ul class="uk-dotnav uk-dotnav-vertical">
<li class="uk-active"><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
</ul>
</div>
</div>
</div>
<div>
<div class="uk-inline uk-light">
<img src="images/dark.jpg" width="1800" height="1200" alt="">
<div class="uk-position-small uk-position-bottom-center">
<ul class="uk-dotnav">
<li class="uk-active"><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
</ul>
</div>
<div class="uk-position-small uk-position-center-right">
<ul class="uk-dotnav uk-dotnav-vertical">
<li class="uk-active"><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
</ul>
</div>
</div>
</div>
<div>
<div class="uk-inline uk-dark">
<img src="images/light.jpg" width="1800" height="1200" alt="">
<div class="uk-position-small uk-position-bottom-center">
<ul class="uk-dotnav">
<li class="uk-active"><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
</ul>
</div>
<div class="uk-position-small uk-position-center-right">
<ul class="uk-dotnav uk-dotnav-vertical">
<li class="uk-active"><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="uk-position-medium uk-position-center-right uk-position-fixed uk-visible@l">
<ul class="uk-dotnav uk-dotnav-vertical">
<li class="uk-active"><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
</ul>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,782 @@
<!DOCTYPE html>
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Drop - UIkit tests</title>
<script src="js/test.js"></script>
<style>
.test-boundary {
padding: 15px;
border: 1px dashed rgba(0,0,0,0.2);
}
.test-boundary-overflow { width: 250%; }
.gap { gap: 10px; }
</style>
</head>
<body>
<div class="uk-container">
<h1>Drop</h1>
<div class="uk-margin uk-form-stacked">
<select id="js-style-switcher" class="uk-select uk-form-width-small" aria-label="Style switcher">
<option value="uk-dropdown">Dropdown</option>
<option value="uk-dropbar">Dropbar</option>
<option value="uk-card uk-card-body uk-card-default">Card Default</option>
<option value="uk-card uk-card-body uk-card-primary">Card Primary</option>
</select>
</div>
<div class="uk-margin" uk-margin>
<div class="uk-inline">
<button class="uk-button uk-button-default" type="button">Hover, Click <span uk-drop-parent-icon></span></button>
<div class="uk-dropdown" uk-drop>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="uk-inline">
<button class="uk-button uk-button-default" type="button">Click only</button>
<div class="uk-dropdown" uk-drop="mode: click">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="uk-inline">
<button class="uk-button uk-button-default" type="button">Hover only</button>
<div class="uk-dropdown" uk-drop="mode: hover">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="uk-inline">
<button class="uk-button uk-button-default" type="button">Nested Hover</button>
<div class="uk-dropdown" uk-drop>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button class="uk-button uk-button-primary uk-width-1-1" type="button">Hover</button>
<div class="uk-dropdown" uk-drop="pos: right-top; offset: 50">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button class="uk-button uk-button-primary uk-width-1-1" type="button">Hover</button>
<div class="uk-dropdown" uk-drop="pos: right-top; offset: 50">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button class="uk-button uk-button-primary uk-width-1-1" type="button">Hover</button>
<div id="child-child-child-drop" class="uk-dropdown" uk-drop="pos: right-top; offset: 50">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</div>
</div>
<div class="uk-inline">
<button class="uk-button uk-button-default" type="button">Nested Click</button>
<div class="uk-dropdown" uk-drop="mode: click">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button class="uk-button uk-button-primary uk-width-1-1" type="button">Click</button>
<div class="uk-dropdown" uk-drop="pos: right-top; offset: 50; mode: click">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button class="uk-button uk-button-primary uk-width-1-1" type="button">Click</button>
<div class="uk-dropdown" uk-drop="pos: right-top; offset: 50; mode: click">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button class="uk-button uk-button-primary uk-width-1-1" type="button">Click</button>
<div class="uk-dropdown" uk-drop="pos: right-top; offset: 50; mode: click">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</div>
</div>
<div class="uk-inline">
<button class="uk-button uk-button-default" type="button" disabled>Disabled</button>
<div class="uk-dropdown" uk-drop>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="uk-inline">
<button class="uk-button uk-button-default" type="button" uk-toggle="target: #js-multiple-toggles; mode: click,hover">Same</button>
</div>
<div class="uk-inline">
<button class="uk-button uk-button-default" type="button">Same</button>
<div id="js-multiple-toggles" class="uk-dropdown" uk-drop>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
<h2>Position</h2>
<div class="uk-margin uk-form-stacked">
<div class="uk-inline">
<label class="uk-form-label" for="js-boundary-x-switcher">Boundary X</label>
<select id="js-boundary-x-switcher" class="uk-select uk-form-width-small">
<option value="false">Viewport</option>
<option value="!.test-boundary">Box</option>
</select>
</div>
<div class="uk-inline">
<label class="uk-form-label" for="js-boundary-y-switcher">Boundary Y</label>
<select id="js-boundary-y-switcher" class="uk-select uk-form-width-small">
<option value="false">Viewport</option>
<option value="!.test-boundary">Box</option>
</select>
</div>
<div class="uk-inline">
<label class="uk-form-label" for="js-target-x-switcher">Target X</label>
<select id="js-target-x-switcher" class="uk-select uk-form-width-small">
<option value="false">Toggle</option>
<option value="!.test-boundary">Box</option>
<option value="true">Viewport</option>
</select>
</div>
<div class="uk-inline">
<label class="uk-form-label" for="js-target-y-switcher">Target Y</label>
<select id="js-target-y-switcher" class="uk-select uk-form-width-small">
<option value="false">Toggle</option>
<option value="!.test-boundary">Box</option>
<option value="true">Viewport</option>
</select>
</div>
<div class="uk-inline">
<label class="uk-form-label" for="js-inset-switcher">Inset</label>
<select id="js-inset-switcher" class="uk-select uk-form-width-xsmall">
<option value="false">False</option>
<option value="true">True</option>
</select>
</div>
<div class="uk-inline">
<label class="uk-form-label" for="js-stretch-switcher">Stretch</label>
<select id="js-stretch-switcher" class="uk-select uk-form-width-xsmall">
<option value="false">False</option>
<option value="true">True</option>
<option value="x">X</option>
<option value="y">Y</option>
</select>
</div>
<div class="uk-inline">
<label class="uk-form-label" for="js-flip-switcher">Flip</label>
<select id="js-flip-switcher" class="uk-select uk-form-width-xsmall">
<option value="false">False</option>
<option value="true" selected>True</option>
</select>
</div>
<div class="uk-inline">
<label class="uk-form-label" for="js-shift-switcher">Shift</label>
<select id="js-shift-switcher" class="uk-select uk-form-width-xsmall">
<option value="false">False</option>
<option value="true" selected>True</option>
</select>
</div>
<div class="uk-inline">
<label class="uk-form-label" for="js-animation-switcher">Animation</label>
<select id="js-animation-switcher" class="uk-select uk-form-width-small">
<option value="uk-animation-fade">Fade</option>
<option value="slide-top">Slide Top</option>
<option value="slide-bottom">Slide Bottom</option>
<option value="slide-left">Slide Left</option>
<option value="slide-right">Slide Right</option>
<option value="reveal-top">Reveal Top</option>
<option value="reveal-bottom">Reveal Bottom</option>
<option value="reveal-left">Reveal Left</option>
<option value="reveal-right">Reveal Right</option>
</select>
</div>
<div class="uk-inline">
<label class="uk-form-label" for="js-animate-out-switcher">Out</label>
<select id="js-animate-out-switcher" class="uk-select uk-form-width-xsmall">
<option value="false">False</option>
<option value="true">True</option>
</select>
</div>
<div class="uk-inline">
<label class="uk-form-label" for="js-duration-switcher">Duration</label>
<select id="js-duration-switcher" class="uk-select uk-form-width-xsmall">
<option value="200">Default</option>
<option value="2000">Slow</option>
</select>
</div>
</div>
<div class="uk-child-width-1-2@m" uk-grid>
<div>
<p>Default</p>
<div class="test-boundary uk-height-large uk-flex uk-flex-column uk-flex-between uk-flex-wrap gap">
<div class="uk-flex uk-flex-between uk-flex-wrap gap">
<div>
<button class="uk-button uk-button-default" type="button">Top Left</button>
<div class="js-options uk-dropdown" uk-drop="pos: top-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div>
<button class="uk-button uk-button-default" type="button">Top Center</button>
<div class="js-options uk-dropdown" uk-drop="pos: top-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div>
<button class="uk-button uk-button-default" type="button">Top Right</button>
<div class="js-options uk-dropdown" uk-drop="pos: top-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
<div class="uk-flex uk-flex-between uk-flex-wrap uk-flex-1 gap">
<div class="uk-flex uk-flex-column uk-flex-around uk-flex-wrap gap">
<div>
<button class="uk-button uk-button-default" type="button">Left Top</button>
<div class="js-options uk-dropdown" uk-drop="pos: left-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div>
<button class="uk-button uk-button-default" type="button">Left Center</button>
<div class="js-options uk-dropdown" uk-drop="pos: left-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div>
<button class="uk-button uk-button-default" type="button">Left Bottom</button>
<div class="js-options uk-dropdown" uk-drop="pos: left-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
<div class="uk-flex uk-flex-column uk-flex-around uk-flex-wrap uk-flex-bottom gap">
<div>
<button class="uk-button uk-button-default" type="button">Right Top</button>
<div class="js-options uk-dropdown" uk-drop="pos: right-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div>
<button class="uk-button uk-button-default" type="button">Right Center</button>
<div class="js-options uk-dropdown" uk-drop="pos: right-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div>
<button class="uk-button uk-button-default" type="button">Right Bottom</button>
<div class="js-options uk-dropdown" uk-drop="pos: right-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</div>
<div class="uk-flex uk-flex-between uk-flex-wrap gap">
<div>
<button class="uk-button uk-button-default" type="button">Bottom Left</button>
<div class="js-options uk-dropdown" uk-drop="pos: bottom-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div>
<button class="uk-button uk-button-default" type="button">Bottom Center</button>
<div class="js-options uk-dropdown" uk-drop="pos: bottom-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div>
<button class="uk-button uk-button-default" type="button">Bottom Right</button>
<div class="js-options uk-dropdown" uk-drop="pos: bottom-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</div>
</div>
<div>
<p>Switched Alignment</p>
<div class="test-boundary uk-height-large uk-flex uk-flex-column uk-flex-between uk-flex-wrap gap">
<div class="uk-flex uk-flex-between uk-flex-wrap gap">
<div>
<button class="uk-button uk-button-default" type="button">Top Right</button>
<div class="js-options uk-dropdown" uk-drop="pos: top-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div>
<button class="uk-button uk-button-default" type="button">Top Center</button>
<div class="js-options uk-dropdown" uk-drop="pos: top-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div>
<button class="uk-button uk-button-default" type="button">Top Left</button>
<div class="js-options uk-dropdown" uk-drop="pos: top-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
<div class="uk-flex uk-flex-between uk-flex-wrap uk-flex-1 gap">
<div class="uk-flex uk-flex-column uk-flex-around uk-flex-wrap gap">
<div>
<button class="uk-button uk-button-default" type="button">Left Bottom</button>
<div class="js-options uk-dropdown" uk-drop="pos: left-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div>
<button class="uk-button uk-button-default" type="button">Left Center</button>
<div class="js-options uk-dropdown" uk-drop="pos: left-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div>
<button class="uk-button uk-button-default" type="button">Left Top</button>
<div class="js-options uk-dropdown" uk-drop="pos: left-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
<div class="uk-flex uk-flex-column uk-flex-around uk-flex-wrap uk-flex-bottom gap">
<div>
<button class="uk-button uk-button-default" type="button">Right Bottom</button>
<div class="js-options uk-dropdown" uk-drop="pos: right-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div>
<button class="uk-button uk-button-default" type="button">Right Center</button>
<div class="js-options uk-dropdown" uk-drop="pos: right-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div>
<button class="uk-button uk-button-default" type="button">Right Top</button>
<div class="js-options uk-dropdown" uk-drop="pos: right-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</div>
<div class="uk-flex uk-flex-between uk-flex-wrap gap">
<div>
<button class="uk-button uk-button-default" type="button">Bottom Right</button>
<div class="js-options uk-dropdown" uk-drop="pos: bottom-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div>
<button class="uk-button uk-button-default" type="button">Bottom Center</button>
<div class="js-options uk-dropdown" uk-drop="pos: bottom-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div>
<button class="uk-button uk-button-default" type="button">Bottom Left</button>
<div class="js-options uk-dropdown" uk-drop="pos: bottom-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</div>
</div>
<div>
<p>Switched Position</p>
<div class="test-boundary uk-height-large uk-flex uk-flex-column uk-flex-between uk-flex-wrap gap">
<div class="uk-flex uk-flex-between uk-flex-wrap gap">
<div>
<button class="uk-button uk-button-default" type="button">Bottom Left</button>
<div class="js-options uk-dropdown" uk-drop="pos: bottom-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div>
<button class="uk-button uk-button-default" type="button">Bottom Center</button>
<div class="js-options uk-dropdown" uk-drop="pos: bottom-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div>
<button class="uk-button uk-button-default" type="button">Bottom Right</button>
<div class="js-options uk-dropdown" uk-drop="pos: bottom-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
<div class="uk-flex uk-flex-between uk-flex-wrap uk-flex-1 gap">
<div class="uk-flex uk-flex-column uk-flex-around uk-flex-wrap gap">
<div>
<button class="uk-button uk-button-default" type="button">Right Top</button>
<div class="js-options uk-dropdown" uk-drop="pos: right-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div>
<button class="uk-button uk-button-default" type="button">Right Center</button>
<div class="js-options uk-dropdown" uk-drop="pos: right-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div>
<button class="uk-button uk-button-default" type="button">Right Bottom</button>
<div class="js-options uk-dropdown" uk-drop="pos: right-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
<div class="uk-flex uk-flex-column uk-flex-around uk-flex-wrap uk-flex-bottom gap">
<div>
<button class="uk-button uk-button-default" type="button">Left Top</button>
<div class="js-options uk-dropdown" uk-drop="pos: left-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div>
<button class="uk-button uk-button-default" type="button">Left Center</button>
<div class="js-options uk-dropdown" uk-drop="pos: left-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div>
<button class="uk-button uk-button-default" type="button">Left Bottom</button>
<div class="js-options uk-dropdown" uk-drop="pos: left-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</div>
<div class="uk-flex uk-flex-between uk-flex-wrap gap">
<div>
<button class="uk-button uk-button-default" type="button">Top Left</button>
<div class="js-options uk-dropdown" uk-drop="pos: top-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div>
<button class="uk-button uk-button-default" type="button">Top Center</button>
<div class="js-options uk-dropdown" uk-drop="pos: top-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div>
<button class="uk-button uk-button-default" type="button">Top Right</button>
<div class="js-options uk-dropdown" uk-drop="pos: top-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</div>
</div>
<div>
<p>Switched Position and Alignment</p>
<div class="test-boundary uk-height-large uk-flex uk-flex-column uk-flex-between uk-flex-wrap gap">
<div class="uk-flex uk-flex-between uk-flex-wrap gap">
<div>
<button class="uk-button uk-button-default" type="button">Bottom Right</button>
<div class="js-options uk-dropdown" uk-drop="pos: bottom-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div>
<button class="uk-button uk-button-default" type="button">Bottom Center</button>
<div class="js-options uk-dropdown" uk-drop="pos: bottom-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div>
<button class="uk-button uk-button-default" type="button">Bottom Left</button>
<div class="js-options uk-dropdown" uk-drop="pos: bottom-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
<div class="uk-flex uk-flex-between uk-flex-wrap uk-flex-1 gap">
<div class="uk-flex uk-flex-column uk-flex-around uk-flex-wrap gap">
<div>
<button class="uk-button uk-button-default" type="button">Right Bottom</button>
<div class="js-options uk-dropdown" uk-drop="pos: right-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div>
<button class="uk-button uk-button-default" type="button">Right Center</button>
<div class="js-options uk-dropdown" uk-drop="pos: right-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div>
<button class="uk-button uk-button-default" type="button">Right Top</button>
<div class="js-options uk-dropdown" uk-drop="pos: right-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
<div class="uk-flex uk-flex-column uk-flex-around uk-flex-wrap uk-flex-bottom gap">
<div>
<button class="uk-button uk-button-default" type="button">Left Bottom</button>
<div class="js-options uk-dropdown" uk-drop="pos: left-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div>
<button class="uk-button uk-button-default" type="button">Left Center</button>
<div class="js-options uk-dropdown" uk-drop="pos: left-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div>
<button class="uk-button uk-button-default" type="button">Left Top</button>
<div class="js-options uk-dropdown" uk-drop="pos: left-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</div>
<div class="uk-flex uk-flex-between uk-flex-wrap gap">
<div>
<button class="uk-button uk-button-default" type="button">Top Right</button>
<div class="js-options uk-dropdown" uk-drop="pos: top-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div>
<button class="uk-button uk-button-default" type="button">Top Center</button>
<div class="js-options uk-dropdown" uk-drop="pos: top-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div>
<button class="uk-button uk-button-default" type="button">Top Left</button>
<div class="js-options uk-dropdown" uk-drop="pos: top-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</div>
</div>
</div>
<h2>Shift and Flip</h2>
<div class="uk-margin">
<select id="js-boundary-overflow-switcher" class="uk-select uk-form-width-small" aria-label="Boundary overflow switcher">
<option value="">Resize</option>
<option value="test-boundary-overflow">Scroll</option>
</select>
</div>
<div uk-grid>
<div class="uk-width-1-2@m">
<div class="test-boundary uk-overflow-auto uk-height-large uk-resize-horizontal uk-margin">
<div class="js-boundary-overflow uk-flex uk-flex-center">
<div>
<button class="uk-button uk-button-default" type="button">Shift</button>
<div class="uk-dropdown uk-width-medium" uk-drop="pos: bottom-left; boundary: !.test-boundary; mode: click">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</div>
</div>
<div class="uk-width-1-2@m">
<div class="test-boundary uk-overflow-auto uk-height-large uk-resize-horizontal uk-margin">
<div class="js-boundary-overflow uk-flex uk-flex-center">
<div>
<button class="uk-button uk-button-default" style="margin-left: 40px" type="button">Flip</button>
<div class="uk-dropdown uk-width-small" uk-drop="pos: right-top; boundary: !.test-boundary; mode: click">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</div>
</div>
</div>
<h2>JavaScript Options</h2>
<div class="uk-overflow-auto">
<table class="uk-table uk-table-striped">
<thead>
<tr>
<th>Option</th>
<th>Value</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>toggle</code></td>
<td>CSS Selector</td>
<td>- *</td>
<td>CSS selector for the element to be used as toggle. By default, the preceding element.</td>
</tr>
<tr>
<td><code>pos</code></td>
<td>String</td>
<td>bottom-left</td>
<td>Drop position.</td>
</tr>
<tr>
<td><code>stretch</code></td>
<td>Boolean, String</td>
<td>false</td>
<td>Stretch drop on both (true) or given axis (x,y).</td>
</tr>
<tr>
<td><code>mode</code></td>
<td>String</td>
<td>click,hover</td>
<td>Comma-separated list of drop trigger behavior modes (hover, click).</td>
</tr>
<tr>
<td><code>delay-show</code></td>
<td>Number</td>
<td>0</td>
<td>Delay time in hover mode before a drop is shown in ms.</td>
</tr>
<tr>
<td><code>delay-hide</code></td>
<td>Number</td>
<td>800</td>
<td>Delay time in hover mode before a drop is hidden in ms.</td>
</tr>
<tr>
<td><code>auto-update</code></td>
<td>Boolean</td>
<td>true</td>
<td>Disable dynamic positioning while scrolling by setting this option to `false`.</td>
</tr>
<tr>
<td><code>boundary</code></td>
<td>CSS selector</td>
<td>false</td>
<td>The area the drop can't exceed causing it to flip and shift. By default, the nearest scrolling ancestor.</td>
</tr>
<tr>
<td><code>boundary-x</code></td>
<td>Boolean, CSS selector</td>
<td>false</td>
<td>The area on the x-axis the drop can't exceed causing it to flip and shift.</td>
</tr>
<tr>
<td><code>boundary-y</code></td>
<td>Boolean, CSS selector</td>
<td>false</td>
<td>The area on the y-axis the drop can't exceed causing it to flip and shift.</td>
</tr>
<tr>
<td><code>target</code></td>
<td>Boolean, CSS selector</td>
<td>false</td>
<td>The element the drop is positioned to (`true` for window).</td>
</tr>
<tr>
<td><code>target-x</code></td>
<td>Boolean, CSS selector</td>
<td>false</td>
<td>The element's X axis the drop is positioned to (`true` for window).</td>
</tr>
<tr>
<td><code>target-y</code></td>
<td>Boolean, CSS selector</td>
<td>false</td>
<td>The element's Y axis the drop is positioned to (`true` for window).</td>
</tr>
<tr>
<td><code>inset</code></td>
<td>Boolean</td>
<td>false</td>
<td>Position inside its target.</td>
</tr>
<tr>
<td><code>flip</code></td>
<td>Boolean</td>
<td>true</td>
<td>Flips the Drop along the main axis if it overflows the boundary.</td>
</tr>
<tr>
<td><code>shift</code></td>
<td>Boolean</td>
<td>true</td>
<td>Shifts the Drop along the cross axis if it overflows the boundary.</td>
</tr>
<tr>
<td><code>offset</code></td>
<td>Number</td>
<td>0</td>
<td>The drop offset.</td>
</tr>
<tr>
<td><code>animation</code></td>
<td>String</td>
<td>uk-animation-fade</td>
<td>Space-separated names of animations. Comma-separated for animation out.</td>
</tr>
<tr>
<td><code>animate-out</code></td>
<td>Boolean</td>
<td>false</td>
<td>Use animation when closing the drop.</td>
</tr>
<tr>
<td><code>bg-scroll</code></td>
<td>Boolean</td>
<td>true</td>
<td>Allow background scrolling while drop is opened.</td>
</tr>
<tr>
<td><code>close-on-scroll</code></td>
<td>Boolean</td>
<td>false</td>
<td>Close the drop on scrolling a parent scroll container.</td>
</tr>
<tr>
<td><code>duration</code></td>
<td>Number</td>
<td>200</td>
<td>The animation duration.</td>
</tr>
<tr>
<td><code>container</code></td>
<td>Boolean</td>
<td>false</td>
<td>Define a target container via a selector to specify where the drop should be appended in the DOM.</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
const {$$, addClass, attr, css, on, removeClass } = UIkit.util;
on('#js-style-switcher', 'change', (e) => {
const options = $$('option', e.target).map(({value}) => value);
for (const el of $$('.uk-drop')) {
removeClass(el, options);
addClass(el, e.target.value);
}
});
on('#js-boundary-overflow-switcher', 'change', (e) => {
const options = $$('option', e.target).map(({value}) => value);
for (const el of $$('.js-boundary-overflow')) {
removeClass(el, options);
addClass(el, e.target.value);
}
});
for (const option of ['boundary-x', 'boundary-y', 'target-x', 'target-y', 'inset', 'stretch', 'flip', 'shift', 'animation', 'animate-out', 'duration']) {
on(`#js-${option}-switcher`, 'change', (e) =>
attr($$('.js-options'), option, e.target.value)
);
}
</script>
</body>
</html>

View File

@@ -0,0 +1,551 @@
<!DOCTYPE html>
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dropbar - UIkit tests</title>
<script src="js/test.js"></script>
<style>
body { padding-bottom: 500px; }
.test {
display: block;
position: relative;
width: 100%;
}
.test-boundary { border: 1px dashed rgba(0,0,0,0.2); }
</style>
</head>
<body>
<div class="uk-container">
<h1>Dropbar</h1>
<div class="uk-margin">
<select id="js-size-switcher" class="uk-select uk-form-width-small" aria-label="Size switcher">
<option value="">Default</option>
<option value="uk-dropbar-large">Large</option>
</select>
</div>
<div class="uk-child-width-1-4@m uk-grid-match" uk-grid>
<div>
<div class="uk-drop uk-dropbar uk-dropbar-top test">
<h3>Top</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-drop uk-dropbar uk-dropbar-bottom test">
<h3>Bottom</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-drop uk-dropbar uk-dropbar-left test">
<h3>Left</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-drop uk-dropbar uk-dropbar-right test">
<h3>Right</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<h2>Navbar</h2>
</div>
<nav class="uk-navbar-container uk-margin-top">
<div class="uk-container">
<div uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div class="uk-drop uk-dropbar uk-dropbar-top test">
<div class="uk-container">
<div class="uk-child-width-1-3" uk-grid>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a>
<ul>
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
</ul>
</li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
<div>
<ul class="uk-nav uk-nav-secondary">
<li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
<li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
<li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
<li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
</ul>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</div>
<div class="uk-container uk-margin-medium-top">
<h2>Animation</h2>
<div class="uk-child-width-1-4@m" uk-grid>
<div>
<div class="test-boundary uk-overflow-auto uk-height-large uk-resize-vertical">
<nav class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-center">
<ul class="uk-navbar-nav">
<li>
<a href>Fade</a>
<div class="uk-dropbar uk-dropbar-top" uk-drop="target-y: !.uk-navbar-container; stretch: x; animate-out: true">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div>
<div class="test-boundary uk-overflow-auto uk-height-large uk-resize-vertical">
<nav class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-center">
<ul class="uk-navbar-nav">
<li>
<a href>Slide Top</a>
<div class="uk-dropbar uk-dropbar-top" uk-drop="target-y: !.uk-navbar-container; stretch: x; animation: slide-top; animate-out: true">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div>
<div class="test-boundary uk-overflow-auto uk-height-large uk-resize-vertical">
<nav class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-center">
<ul class="uk-navbar-nav">
<li>
<a href>Slide Left</a>
<div class="uk-dropbar uk-dropbar-left" uk-drop="target-y: !.uk-navbar-container; stretch: y; animation: slide-left; animate-out: true">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div>
<div class="test-boundary uk-overflow-auto uk-height-large uk-resize-vertical">
<nav class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-center">
<ul class="uk-navbar-nav">
<li>
<a href>Slide Right</a>
<div class="uk-dropbar uk-dropbar-right" uk-drop="target-y: !.uk-navbar-container; stretch: y; animation: slide-right; animate-out: true">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<h2>Stretch + Overflow Content</h2>
<div class="uk-child-width-1-4@m" uk-grid>
<div>
<div class="test-boundary uk-overflow-auto uk-height-large uk-resize-vertical">
<nav class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-center">
<ul class="uk-navbar-nav">
<li>
<a href>Fade</a>
<div class="uk-dropbar uk-dropbar-top" uk-drop="target-y: !.uk-navbar-container; stretch: true; animate-out: true">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a>
<ul>
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
</ul>
</li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div>
<div class="test-boundary uk-overflow-auto uk-height-large uk-resize-vertical">
<nav class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-center">
<ul class="uk-navbar-nav">
<li>
<a href>Slide Top</a>
<div class="uk-dropbar uk-dropbar-top" uk-drop="target-y: !.uk-navbar-container; stretch: true; animation: slide-top; animate-out: true">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a>
<ul>
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
</ul>
</li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div>
<div class="test-boundary uk-overflow-auto uk-height-large uk-resize-vertical">
<nav class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-center">
<ul class="uk-navbar-nav">
<li>
<a href>Slide Left</a>
<div class="uk-dropbar uk-dropbar-left" uk-drop="target-y: !.uk-navbar-container; stretch: true; animation: slide-left; animate-out: true">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a>
<ul>
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
</ul>
</li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div>
<div class="test-boundary uk-overflow-auto uk-height-large uk-resize-vertical">
<nav class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-center">
<ul class="uk-navbar-nav">
<li>
<a href>Slide Right</a>
<div class="uk-dropbar uk-dropbar-right" uk-drop="target-y: !.uk-navbar-container; stretch: true; animation: slide-right; animate-out: true">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a>
<ul>
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
</ul>
</li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<h2>Position + Click</h2>
<div class="uk-child-width-1-3@m" uk-grid>
<div>
<div class="test-boundary uk-overflow-auto uk-height-large uk-resize-vertical">
<nav class="uk-navbar-container uk-navbar-transparent" uk-navbar>
<div class="uk-navbar-left">
<a class="uk-navbar-item uk-logo" href="#">Below</a>
</div>
<div class="uk-navbar-right">
<a href class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon></a>
<div class="uk-dropbar uk-dropbar-top" uk-drop="mode: click; target-y: !.uk-navbar-container; stretch: true; animation: slide-top; animate-out: true">
<div class="uk-height-1-1 uk-flex uk-flex-center uk-flex-middle">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
<div>
<div class="test-boundary uk-overflow-auto uk-height-large uk-resize-vertical">
<nav class="uk-navbar-container uk-navbar-transparent" uk-navbar>
<div class="uk-navbar-left">
<a class="uk-navbar-item uk-logo" href="#">Above</a>
</div>
<div class="uk-navbar-right">
<a href class="uk-navbar-toggle uk-navbar-toggle-animate uk-position-z-index" uk-navbar-toggle-icon></a>
<div class="uk-dropbar uk-dropbar-top uk-position-z-index-zero" uk-drop="mode: click; inset: true; pos: top-center; stretch: true; animation: slide-top; animate-out: true">
<div class="uk-height-1-1 uk-flex uk-flex-center uk-flex-middle">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
<div>
<div class="test-boundary uk-overflow-auto uk-height-large uk-resize-vertical">
<nav class="uk-navbar-container uk-navbar-transparent uk-position-z-index" uk-navbar>
<div class="uk-navbar-left">
<a class="uk-navbar-item uk-logo" href="#">Behind</a>
</div>
<div class="uk-navbar-right">
<a href class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon></a>
<div class="uk-dropbar uk-dropbar-top uk-position-z-index-negative" uk-drop="mode: click; inset: true; pos: top-center; stretch: true; animation: slide-top; animate-out: true">
<div class="uk-height-1-1 uk-flex uk-flex-center uk-flex-middle">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
<script>
const {$$, addClass, on, removeClass } = UIkit.util;
on('#js-size-switcher', 'change', (e) => {
const options = $$('option', e.target).map(({value}) => value);
for (const dropbar of $$('.uk-dropbar')) {
removeClass(dropbar, options);
addClass(dropbar, e.target.value);
}
});
</script>
</body>
</html>

View File

@@ -0,0 +1,286 @@
<!DOCTYPE html>
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dropdown - UIkit tests</title>
<script src="js/test.js"></script>
<style>
.test {
display: block;
position: relative;
width: 100%;
}
.scroll-container {
padding: 15px;
border: 1px dashed rgba(0,0,0,0.2);
overflow: auto;
}
</style>
</head>
<body>
<div class="uk-container">
<h1>Dropdown</h1>
<div class="uk-margin">
<select id="js-size-switcher" class="uk-select uk-form-width-small" aria-label="Size switcher">
<option value="">Default</option>
<option value="uk-dropdown-large">Large</option>
</select>
</div>
<div uk-grid>
<div class="uk-width-1-4@m">
<div class="uk-drop uk-dropdown test">
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a>
<ul>
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
</ul>
</li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
</div>
<div class="uk-width-1-4@m">
<div class="uk-drop uk-dropdown test">
<ul class="uk-nav uk-nav-secondary">
<li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
<li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
<li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
<li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
</ul>
</div>
</div>
<div class="uk-width-1-2@m">
<div class="uk-margin" uk-margin>
<div class="uk-inline">
<button class="uk-button uk-button-default" type="button">Scrollable</button>
<div class="uk-overflow-auto uk-height-medium" uk-dropdown>
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
</div>
</div>
<h2>Position</h2>
<div class="uk-margin" uk-margin>
<div class="uk-inline">
<button class="uk-button uk-button-default" type="button">Bottom Left</button>
<div uk-dropdown>
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
<div class="uk-inline">
<button class="uk-button uk-button-default" type="button">Bottom Center</button>
<div uk-dropdown="pos: bottom-center">
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
<div class="uk-inline">
<button class="uk-button uk-button-default" type="button">Bottom Right</button>
<div uk-dropdown="pos: bottom-right">
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
</div>
<div class="uk-margin" uk-margin>
<div class="uk-inline">
<button class="uk-button uk-button-default" type="button">Top Left</button>
<div uk-dropdown="pos: top-left">
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
<div class="uk-inline">
<button class="uk-button uk-button-default" type="button">Top Center</button>
<div uk-dropdown="pos: top-center">
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
<div class="uk-inline">
<button class="uk-button uk-button-default" type="button">Top Right</button>
<div uk-dropdown="pos: top-right">
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
</div>
<div class="uk-margin" uk-margin>
<div class="uk-inline">
<button class="uk-button uk-button-default" type="button">Left Top</button>
<div uk-dropdown="pos: left-top">
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
<div class="uk-inline">
<button class="uk-button uk-button-default" type="button">Left Center</button>
<div uk-dropdown="pos: left-center">
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
<div class="uk-inline">
<button class="uk-button uk-button-default" type="button">Left Bottom</button>
<div uk-dropdown="pos: left-bottom">
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
</div>
<div class="uk-margin" uk-margin>
<div class="uk-inline">
<button class="uk-button uk-button-default" type="button">Right Top</button>
<div uk-dropdown="pos: right-top">
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
<div class="uk-inline">
<button class="uk-button uk-button-default" type="button">Right Center</button>
<div uk-dropdown="pos: right-center">
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
<div class="uk-inline">
<button class="uk-button uk-button-default" type="button">Right Bottom</button>
<div uk-dropdown="pos: right-bottom">
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
const {$$, addClass, on, removeClass } = UIkit.util;
on('#js-size-switcher', 'change', (e) => {
const options = $$('option', e.target).map(({value}) => value);
for (const dropdown of $$('.uk-dropdown')) {
removeClass(dropdown, options);
addClass(dropdown, e.target.value);
}
});
</script>
</body>
</html>

View File

@@ -0,0 +1,856 @@
<!DOCTYPE html>
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dropnav - UIkit tests</title>
<script src="js/test.js"></script>
</head>
<body>
<div class="uk-container">
<h1>Dropnav</h1>
<div class="uk-margin">
<select id="js-nav-switcher" class="uk-select uk-form-width-small" aria-label="Nav switcher">
<option value="uk-subnav">Subnav</option>
<option value="uk-tab">Tab</option>
</select>
</div>
<h2>Dropdown</h2>
<div class="uk-margin">
<select id="js-dropdown-size-switcher" class="uk-select uk-form-width-small" aria-label="Dropdown size switcher">
<option value="">Default</option>
<option value="uk-dropdown-large">Large</option>
</select>
</div>
<nav uk-dropnav>
<ul class="uk-subnav">
<li class="uk-active">
<a href>Hover <span uk-drop-parent-icon></span></a>
<div class="uk-dropdown">
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
</li>
<li>
<a href>2 Columns <span uk-drop-parent-icon></span></a>
<div class="uk-dropdown uk-width-xlarge">
<div class="uk-child-width-1-2" uk-grid>
<div>
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent"><a href="#">Parent</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
<div>
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent"><a href="#">Parent</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
</div>
</div>
</li>
<li>
<a href>3 Columns <span uk-drop-parent-icon></span></a>
<div class="uk-dropdown uk-width-2xlarge">
<div class="uk-child-width-1-3" uk-grid>
<div>
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent"><a href="#">Parent</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
</ul>
</div>
<div>
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent"><a href="#">Parent</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
</ul>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</li>
<li>
<a href>Stretch <span uk-drop-parent-icon></span></a>
<div class="uk-dropdown" uk-drop="cls-drop: uk-dropdown; boundary: !.uk-dropnav; stretch: x; flip: false">
<div class="uk-child-width-1-3@m" uk-grid>
<div>
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
<div>
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</li>
<li>
<a href>Stretch Full <span uk-drop-parent-icon></span></a>
<div class="uk-dropdown" uk-drop="cls-drop: uk-dropdown; stretch: x; flip: false">
<div class="uk-child-width-1-3@m" uk-grid>
<div>
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
<div>
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</li>
</ul>
</nav>
<nav uk-dropnav="mode: click; align: center">
<ul class="uk-subnav uk-flex-center">
<li class="uk-active">
<a href>Click <span uk-drop-parent-icon></span></a>
<div class="uk-dropdown">
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
</li>
<li>
<a href>2 Columns <span uk-drop-parent-icon></span></a>
<div class="uk-dropdown uk-width-xlarge">
<div class="uk-child-width-1-2" uk-grid>
<div>
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent"><a href="#">Parent</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
<div>
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent"><a href="#">Parent</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
</div>
</div>
</li>
<li>
<a href>3 Columns <span uk-drop-parent-icon></span></a>
<div class="uk-dropdown uk-width-2xlarge">
<div class="uk-child-width-1-3" uk-grid>
<div>
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent"><a href="#">Parent</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
</ul>
</div>
<div>
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent"><a href="#">Parent</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
</ul>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</li>
<li>
<a href>Stretch <span uk-drop-parent-icon></span></a>
<div class="uk-dropdown" uk-drop="mode: click; cls-drop: uk-dropdown; boundary: !.uk-dropnav; stretch: x; flip: false">
<div class="uk-child-width-1-3@m" uk-grid>
<div>
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
<div>
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</li>
<li>
<a href>Stretch Full <span uk-drop-parent-icon></span></a>
<div class="uk-dropdown" uk-drop="mode: click; cls-drop: uk-dropdown; stretch: x; flip: false">
<div class="uk-child-width-1-3@m" uk-grid>
<div>
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
<div>
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</li>
</ul>
</nav>
<h2>Dropbar</h2>
<div class="uk-margin">
<select id="js-dropbar-size-switcher" class="uk-select uk-form-width-small" aria-label="Dropbar size switcher">
<option value="">Default</option>
<option value="uk-dropdown-dropbar-large">Large</option>
</select>
</div>
<nav uk-dropnav="dropbar: true">
<ul class="uk-subnav">
<li class="uk-active">
<a href>Hover <span uk-drop-parent-icon></span></a>
<div class="uk-dropdown">
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
</li>
<li>
<a href>2 Columns <span uk-drop-parent-icon></span></a>
<div class="uk-dropdown uk-width-xlarge">
<div class="uk-child-width-1-2" uk-grid>
<div>
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent"><a href="#">Parent</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
<div>
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent"><a href="#">Parent</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
</div>
</div>
</li>
<li>
<a href>3 Columns <span uk-drop-parent-icon></span></a>
<div class="uk-dropdown uk-width-2xlarge">
<div class="uk-child-width-1-3" uk-grid>
<div>
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent"><a href="#">Parent</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
</ul>
</div>
<div>
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent"><a href="#">Parent</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
</ul>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</li>
<li>
<a href>Stretch <span uk-drop-parent-icon></span></a>
<div class="uk-dropdown" uk-drop="cls-drop: uk-dropdown; boundary: !.uk-dropnav; stretch: x; flip: false">
<div class="uk-child-width-1-3@m" uk-grid>
<div>
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
<div>
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</li>
<li>
<a href>Stretch Full <span uk-drop-parent-icon></span></a>
<div class="uk-dropdown" uk-drop="cls-drop: uk-dropdown; stretch: x; flip: false">
<div class="uk-child-width-1-3@m" uk-grid>
<div>
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
<div>
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</li>
</ul>
</nav>
<nav uk-dropnav="dropbar: true; mode: click; align: center">
<ul class="uk-subnav uk-flex-center">
<li class="uk-active">
<a href>Click <span uk-drop-parent-icon></span></a>
<div class="uk-dropdown">
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
</li>
<li>
<a href>2 Columns <span uk-drop-parent-icon></span></a>
<div class="uk-dropdown uk-width-xlarge">
<div class="uk-child-width-1-2" uk-grid>
<div>
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent"><a href="#">Parent</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
<div>
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent"><a href="#">Parent</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
</div>
</div>
</li>
<li>
<a href>3 Columns <span uk-drop-parent-icon></span></a>
<div class="uk-dropdown uk-width-2xlarge">
<div class="uk-child-width-1-3" uk-grid>
<div>
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent"><a href="#">Parent</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
</ul>
</div>
<div>
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent"><a href="#">Parent</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
</ul>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</li>
<li>
<a href>Stretch <span uk-drop-parent-icon></span></a>
<div class="uk-dropdown" uk-drop="mode: click; cls-drop: uk-dropdown; boundary: !.uk-dropnav; stretch: x; flip: false">
<div class="uk-child-width-1-3@m" uk-grid>
<div>
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
<div>
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</li>
<li>
<a href>Stretch Full <span uk-drop-parent-icon></span></a>
<div class="uk-dropdown" uk-drop="mode: click; cls-drop: uk-dropdown; stretch: x; flip: false">
<div class="uk-child-width-1-3@m" uk-grid>
<div>
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
<div>
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</li>
</ul>
</nav>
<h2>JavaScript Options</h2>
<div class="uk-overflow-auto">
<table class="uk-table uk-table-striped">
<thead>
<tr>
<th>Option</th>
<th>Value</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>align</code></td>
<td>String</td>
<td>left</td>
<td>Drop alignment (left, right, center).</td>
</tr>
<tr>
<td><code>boundary</code></td>
<td>Boolean, CSS selector</td>
<td>true</td>
<td>Referenced element to keep Drop's visibility. By default, it's the dropnav component's element.</td>
</tr>
<tr>
<td><code>dropbar</code></td>
<td>Boolean, CSS selector</td>
<td>false</td>
<td>The dropbar selector. If true the dropbar will be inserted automatically.</td>
</tr>
<tr>
<td><code>dropbar-anchor</code></td>
<td>Boolean, CSS selector</td>
<td>false</td>
<td>The dropbar anchor selector. If set, dropbar will be inserted after the anchor element.</td>
</tr>
<tr>
<td><code>duration</code></td>
<td>Number</td>
<td>200</td>
<td>The dropbar transition duration.</td>
</tr>
<tr>
<td><code>container</code></td>
<td>Boolean</td>
<td>false</td>
<td>Define a target container via a selector to specify where the drops should be appended in the DOM.</td>
</tr>
<tr>
<td><code>stretch</code></td>
<td>Boolean, String</td>
<td>true</td>
<td>Stretch drop on both (true) or given axis (x,y).</td>
</tr>
<tr>
<td><code>mode</code></td>
<td>String</td>
<td>click,hover</td>
<td>Comma-separated list of drop trigger behavior modes (hover, click).</td>
</tr>
<tr>
<td><code>delay-show</code></td>
<td>Number</td>
<td>0</td>
<td>Delay time in hover mode before a drop is shown in ms.</td>
</tr>
<tr>
<td><code>delay-hide</code></td>
<td>Number</td>
<td>800</td>
<td>Delay time in hover mode before a drop is hidden in ms.</td>
</tr>
<tr>
<td><code>target</code></td>
<td>Boolean, CSS selector</td>
<td>false</td>
<td>The element the drop is positioned to (`true` for window).</td>
</tr>
<tr>
<td><code>target-x</code></td>
<td>Boolean, CSS selector</td>
<td>false</td>
<td>The element's X axis the drop is positioned to (`true` for window).</td>
</tr>
<tr>
<td><code>target-y</code></td>
<td>Boolean, CSS selector</td>
<td>false</td>
<td>The element's Y axis the drop is positioned to (`true` for window).</td>
</tr>
<tr>
<td><code>offset</code></td>
<td>Number</td>
<td>0</td>
<td>The drop offset.</td>
</tr>
<tr>
<td><code>animation</code></td>
<td>String</td>
<td>uk-animation-fade</td>
<td>Space-separated names of animations. Comma-separated for animation out.</td>
</tr>
<tr>
<td><code>animate-out</code></td>
<td>Boolean</td>
<td>false</td>
<td>Use animation when closing the drop.</td>
</tr>
<tr>
<td><code>bg-scroll</code></td>
<td>Boolean</td>
<td>true</td>
<td>Allow background scrolling while drop is opened.</td>
</tr>
<tr>
<td><code>close-on-scroll</code></td>
<td>Boolean</td>
<td>false</td>
<td>Closes the drop on scrolling a parent scroll container.</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
const {$$, addClass, on, removeClass } = UIkit.util;
on('#js-nav-switcher', 'change', (e) => {
const options = $$('option', e.target).map(({value}) => value);
for (const el of $$('.uk-subnav')) {
removeClass(el, options);
addClass(el, e.target.value);
}
});
on('#js-dropdown-size-switcher', 'change', (e) => {
const options = $$('option', e.target).map(({value}) => value);
for (const el of $$('.uk-dropdown:not(.uk-dropdown-dropbar)')) {
removeClass(el, options);
addClass(el, e.target.value);
}
});
on('#js-dropbar-size-switcher', 'change', (e) => {
const options = $$('option', e.target).map(({value}) => value);
for (const el of $$('.uk-dropdown-dropbar')) {
removeClass(el, options);
addClass(el, e.target.value);
}
});
</script>
</body>
</html>

View File

@@ -0,0 +1,287 @@
<!DOCTYPE html>
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Filter - UIkit tests</title>
<script src="js/test.js"></script>
<style>
[color='red'] > * { background: #f0506e; }
[color='green'] > * { background: #32d296; }
[color='blue'] > * { background: #1e87f0; }
[size='small'] > * { height: 140px; }
[size='medium'] > * { height: 170px; }
[size='large'] > * { height: 190px; }
</style>
<script>
const {$$, attr, on, ready} = UIkit.util;
ready(() => {
on(document.body, 'beforeFilter afterFilter', (e, filter, state) =>
console.log(e.type, filter, state)
);
on('#js-animation-switcher', 'change', (e) =>
attr($$('.js-filter-animation'), 'animation', e.target.value)
);
});
</script>
</head>
<body>
<div class="uk-container">
<h1>Filter</h1>
<div class="uk-margin">
<select id="js-animation-switcher" class="uk-select uk-form-width-small" aria-label="Animation switcher">
<option value="slide">Slide</option>
<option value="fade">Fade</option>
<option value="delayed-fade">Delayed Fade</option>
<option value="false">None</option>
</select>
</div>
<div class="js-filter-animation" uk-filter="target: .js-filter; duration: 2000">
<div class="uk-grid-small uk-grid-divider uk-child-width-auto" uk-grid>
<h3>Default</h3>
<div>
<ul class="uk-subnav uk-subnav-pill" uk-margin>
<li uk-filter-control><a href>All</a></li>
</ul>
</div>
<div>
<ul class="uk-subnav uk-subnav-pill" uk-margin>
<li uk-filter-control="[color='red']"><a href>Red</a></li>
<li uk-filter-control="[color='green']"><a href>Green</a></li>
<li uk-filter-control="[color='blue']"><a href>Blue</a></li>
</ul>
</div>
<div>
<ul class="uk-subnav uk-subnav-pill" uk-margin>
<li uk-filter-control="[size='small']"><a href>Small</a></li>
<li uk-filter-control="[size='medium']"><a href>Medium</a></li>
<li uk-filter-control="[size='large']"><a href>Large</a></li>
</ul>
</div>
</div>
<div class="uk-grid-small uk-grid-divider uk-child-width-auto" uk-grid>
<h3>Group</h3>
<div>
<ul class="uk-subnav uk-subnav-pill" uk-margin>
<li uk-filter-control><a href>All</a></li>
<li uk-filter-control="group: color"><a href>All (Color)</a></li>
<li uk-filter-control="group: size"><a href>All (Size)</a></li>
</ul>
</div>
<div>
<ul class="uk-subnav uk-subnav-pill" uk-margin>
<li uk-filter-control="filter: [color='red']; group: color"><a href>Red</a></li>
<li uk-filter-control="filter: [color='green']; group: color"><a href>Green</a></li>
<li uk-filter-control="filter: [color='blue']; group: color"><a href>Blue</a></li>
</ul>
</div>
<div>
<ul class="uk-subnav uk-subnav-pill" uk-margin>
<li uk-filter-control="filter: [size='small']; group: size"><a href>Small</a></li>
<li uk-filter-control="filter: [size='medium']; group: size"><a href>Medium</a></li>
<li uk-filter-control="filter: [size='large']; group: size"><a href>Large</a></li>
</ul>
</div>
</div>
<div class="uk-grid-small uk-grid-divider uk-child-width-auto" uk-grid>
<h3>Alphabetic Order</h3>
<div>
<ul class="uk-subnav uk-subnav-pill" uk-margin>
<li class="uk-active" uk-filter-control="sort: date"><a href>Date Asc</a></li>
<li uk-filter-control="sort: date; order: desc"><a href>Date Desc</a></li>
<li uk-filter-control="sort: color"><a href>Color Asc</a></li>
<li uk-filter-control="sort: color; order: desc"><a href>Color Desc</a></li>
<li uk-filter-control="sort: size"><a href>Size Asc</a></li>
<li uk-filter-control="sort: size; order: desc"><a href>Size Desc</a></li>
</ul>
</div>
</div>
<ul class="js-filter uk-child-width-1-2 uk-child-width-1-4@m uk-light" uk-grid="masonry: next">
<li color="blue" size="large" date="2016-06-01"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">1</div></li>
<li color="red" size="small" date="2016-12-13"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">2</div></li>
<li color="blue" size="medium" date="2017-05-20"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">3</div></li>
<li color="blue" size="small" date="2017-09-17"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">4</div></li>
<li color="green" size="medium" date="2017-11-03"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">5</div></li>
<li color="green" size="small" date="2017-12-25"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">6</div></li>
<li color="red" size="medium" date="2018-01-30"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">7</div></li>
<li color="green" size="large" date="2018-02-01"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">8</div></li>
<li color="red" size="large" date="2018-03-11"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">9</div></li>
<li color="blue" size="large" date="2018-06-13"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">10</div></li>
<li color="red" size="medium" date="2018-10-27"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">11</div></li>
<li color="green" size="small" date="2018-12-02"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">12</div></li>
</ul>
</div>
<h2>With Parallax</h2>
<div class="js-filter-animation" uk-filter="target: .js-filter">
<div class="uk-grid-small uk-grid-divider uk-child-width-auto" uk-grid>
<h3>Default</h3>
<div>
<ul class="uk-subnav uk-subnav-pill" uk-margin>
<li uk-filter-control><a href>All</a></li>
</ul>
</div>
<div>
<ul class="uk-subnav uk-subnav-pill" uk-margin>
<li uk-filter-control="[color='red']"><a href>Red</a></li>
<li uk-filter-control="[color='green']"><a href>Green</a></li>
<li uk-filter-control="[color='blue']"><a href>Blue</a></li>
</ul>
</div>
<div>
<ul class="uk-subnav uk-subnav-pill" uk-margin>
<li uk-filter-control="[size='small']"><a href>Small</a></li>
<li uk-filter-control="[size='medium']"><a href>Medium</a></li>
<li uk-filter-control="[size='large']"><a href>Large</a></li>
</ul>
</div>
</div>
<div class="uk-grid-small uk-grid-divider uk-child-width-auto" uk-grid>
<h3>Group</h3>
<div>
<ul class="uk-subnav uk-subnav-pill" uk-margin>
<li uk-filter-control><a href>All</a></li>
</ul>
</div>
<div>
<ul class="uk-subnav uk-subnav-pill" uk-margin>
<li uk-filter-control="filter: [color='red']; group: color"><a href>Red</a></li>
<li uk-filter-control="filter: [color='green']; group: color"><a href>Green</a></li>
<li uk-filter-control="filter: [color='blue']; group: color"><a href>Blue</a></li>
</ul>
</div>
<div>
<ul class="uk-subnav uk-subnav-pill" uk-margin>
<li uk-filter-control="filter: [size='small']; group: size"><a href>Small</a></li>
<li uk-filter-control="filter: [size='medium']; group: size"><a href>Medium</a></li>
<li uk-filter-control="filter: [size='large']; group: size"><a href>Large</a></li>
</ul>
</div>
</div>
<div class="uk-grid-small uk-grid-divider uk-child-width-auto" uk-grid>
<h3>Alphabetic Order</h3>
<div>
<ul class="uk-subnav uk-subnav-pill" uk-margin>
<li class="uk-active" uk-filter-control="sort: date"><a href>Date Asc</a></li>
<li uk-filter-control="sort: date; order: desc"><a href>Date Desc</a></li>
<li uk-filter-control="sort: color"><a href>Color Asc</a></li>
<li uk-filter-control="sort: color; order: desc"><a href>Color Desc</a></li>
<li uk-filter-control="sort: size"><a href>Size Asc</a></li>
<li uk-filter-control="sort: size; order: desc"><a href>Size Desc</a></li>
</ul>
</div>
</div>
<ul class="js-filter uk-child-width-1-2 uk-child-width-1-4@m uk-light" uk-grid="masonry: next; parallax: 200">
<li color="blue" size="large" date="2016-06-01"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">1</div></li>
<li color="red" size="small" date="2016-12-13"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">2</div></li>
<li color="blue" size="medium" date="2017-05-20"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">3</div></li>
<li color="blue" size="small" date="2017-09-17"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">4</div></li>
<li color="green" size="medium" date="2017-11-03"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">5</div></li>
<li color="green" size="small" date="2017-12-25"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">6</div></li>
<li color="red" size="medium" date="2018-01-30"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">7</div></li>
<li color="green" size="large" date="2018-02-01"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">8</div></li>
<li color="red" size="large" date="2018-03-11"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">9</div></li>
<li color="blue" size="large" date="2018-06-13"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">10</div></li>
<li color="red" size="medium" date="2018-10-27"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">11</div></li>
<li color="green" size="small" date="2018-12-02"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">12</div></li>
</ul>
</div>
<h2>Javascript Options</h2>
<div class="uk-overflow-auto">
<table class="uk-table uk-table-striped">
<thead>
<tr>
<th>Option</th>
<th>Value</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>target</code></td>
<td>String</td>
<td></td>
<td>The targeted list on which to apply the filter to.</td>
</tr>
<tr>
<td><code>selActive</code></td>
<td>String, Boolean</td>
<td>false</td>
<td>A selector for the initially active filter controls.</td>
</tr>
<tr>
<td><code>animation</code></td>
<td>String, Boolean</td>
<td>slide</td>
<td>Animation mode (slide, fade, delayed-fade, false).</td>
</tr>
<tr>
<td><code>duration</code></td>
<td>String, Boolean</td>
<td>250</td>
<td>Animation duration in milliseconds.</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,182 @@
<!DOCTYPE html>
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flex - UIkit tests</title>
<script src="js/test.js"></script>
<style>
.uk-flex > * {
padding: 10px;
text-align: center;
}
.uk-flex > :nth-child(8n-7) { background: rgba(0,0,0,0.1); }
.uk-flex > :nth-child(8n-6) { background: rgba(0,0,0,0.15); }
.uk-flex > :nth-child(8n-5) { background: rgba(0,0,0,0.2); }
.uk-flex > :nth-child(8n-4) { background: rgba(0,0,0,0.25); }
.uk-flex > :nth-child(8n-3) { background: rgba(0,0,0,0.3); }
.uk-flex > :nth-child(8n-2) { background: rgba(0,0,0,0.35); }
.uk-flex > :nth-child(8n-1) { background: rgba(0,0,0,0.40); }
.uk-flex > :nth-child(8n) { background: rgba(0,0,0,0.45); }
.test {
height: 300px;
background: #f0f0f0;
}
</style>
</head>
<body>
<div class="uk-container">
<h1>Flex</h1>
<h2>Alignment and Justify</h2>
<h3>Stretch / Left (Default)</h3>
<div class="uk-flex uk-child-width-1-4">
<div>1-4</div>
<div>1-4<br></div>
<div>1-4<br><br></div>
</div>
<h3>Middle / Center</h3>
<div class="uk-flex uk-flex-middle uk-flex-center uk-child-width-1-4">
<div>1-4</div>
<div>1-4<br></div>
<div>1-4<br><br></div>
</div>
<h3>Bottom / Right</h3>
<div class="uk-flex uk-flex-bottom uk-flex-right uk-child-width-1-4">
<div>1-4</div>
<div>1-4<br></div>
<div>1-4<br><br></div>
</div>
<h3>Top / Space-between</h3>
<div class="uk-flex uk-flex-top uk-flex-between uk-child-width-1-4">
<div>1-4</div>
<div>1-4<br></div>
<div>1-4<br><br></div>
</div>
<h3>Stretch / Space-around</h3>
<div class="uk-flex uk-flex-around uk-child-width-1-4">
<div>1-4</div>
<div>1-4<br></div>
<div>1-4<br><br></div>
</div>
<h2>Wrap and Alignment</h2>
<h3>Stretch</h3>
<div class="uk-flex uk-flex-wrap test">
<div class="uk-width-1-3">1-3</div>
<div class="uk-width-1-2">1-2<br></div>
<div class="uk-width-1-3">1-3<br><br></div>
<div class="uk-width-1-3">1-3</div>
<div class="uk-width-1-2">1-2<br></div>
<div class="uk-width-1-3">1-3<br><br></div>
</div>
<h3>Top</h3>
<div class="uk-flex uk-flex-wrap uk-flex-wrap-top test">
<div class="uk-width-1-3">1-3</div>
<div class="uk-width-1-2">1-2<br></div>
<div class="uk-width-1-3">1-3<br><br></div>
<div class="uk-width-1-3">1-3</div>
<div class="uk-width-1-2">1-2<br></div>
<div class="uk-width-1-3">1-3<br><br></div>
</div>
<h3>Middle</h3>
<div class="uk-flex uk-flex-wrap uk-flex-wrap-middle test">
<div class="uk-width-1-3">1-3</div>
<div class="uk-width-1-2">1-2<br></div>
<div class="uk-width-1-3">1-3<br><br></div>
<div class="uk-width-1-3">1-3</div>
<div class="uk-width-1-2">1-2<br></div>
<div class="uk-width-1-3">1-3<br><br></div>
</div>
<h3>Bottom</h3>
<div class="uk-flex uk-flex-wrap uk-flex-wrap-bottom test">
<div class="uk-width-1-3">1-3</div>
<div class="uk-width-1-2">1-2<br></div>
<div class="uk-width-1-3">1-3<br><br></div>
<div class="uk-width-1-3">1-3</div>
<div class="uk-width-1-2">1-2<br></div>
<div class="uk-width-1-3">1-3<br><br></div>
</div>
<h3>Space-between</h3>
<div class="uk-flex uk-flex-wrap uk-flex-wrap-between test">
<div class="uk-width-1-3">1-3</div>
<div class="uk-width-1-2">1-2<br></div>
<div class="uk-width-1-3">1-3<br><br></div>
<div class="uk-width-1-3">1-3</div>
<div class="uk-width-1-2">1-2<br></div>
<div class="uk-width-1-3">1-3<br><br></div>
</div>
<h3>Space-around</h3>
<div class="uk-flex uk-flex-wrap uk-flex-wrap-around test">
<div class="uk-width-1-3">1-3</div>
<div class="uk-width-1-2">1-2<br></div>
<div class="uk-width-1-3">1-3<br><br></div>
<div class="uk-width-1-3">1-3</div>
<div class="uk-width-1-2">1-2<br></div>
<div class="uk-width-1-3">1-3<br><br></div>
</div>
<h2>Inline Flex</h2>
<div class="uk-text-center">
<div class="uk-flex uk-flex-inline">
<div>1-4</div>
<div>1-4<br></div>
<div>1-4<br><br></div>
</div>
</div>
<h2>Order</h2>
<div class="uk-flex uk-child-width-1-3">
<div>1</div>
<div>2</div>
<div class="uk-flex-first">3</div>
</div>
<div class="uk-flex uk-child-width-1-3">
<div class="uk-flex-last">1</div>
<div>2</div>
<div>3</div>
</div>
<div class="uk-flex uk-child-width-1-3">
<div class="uk-flex-last">1</div>
<div>2</div>
<div class="uk-flex-first">3</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,622 @@
<!DOCTYPE html>
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Form - UIkit tests</title>
<script src="js/test.js"></script>
</head>
<body>
<div class="uk-container">
<h1>Form</h1>
<div uk-grid>
<div class="uk-width-2-3@s">
<h2>Horizontal</h2>
<form class="uk-form-horizontal">
<div class="uk-margin">
<label class="uk-form-label" for="form-h-text">Text</label>
<div class="uk-form-controls">
<input class="uk-input uk-form-width-large" id="form-h-text" type="text" placeholder="Some text...">
</div>
</div>
<div class="uk-margin">
<label class="uk-form-label" for="form-h-select">Select</label>
<div class="uk-form-controls">
<select class="uk-select uk-form-width-large" id="form-h-select">
<option>Option 01</option>
<option>Option 02</option>
</select>
</div>
</div>
<div class="uk-margin">
<label class="uk-form-label" for="form-h-datalist">Datalist</label>
<div class="uk-form-controls">
<input class="uk-input uk-form-width-large" id="form-h-datalist" list="datalist" type="text" placeholder="Some text...">
<datalist id="datalist">
<option value="Chrome"></option>
<option value="Edge"></option>
<option value="Firefox"></option>
<option value="Safari"></option>
</datalist>
</div>
</div>
<div class="uk-margin">
<label class="uk-form-label" for="form-h-textarea">Textarea</label>
<div class="uk-form-controls">
<textarea class="uk-textarea uk-form-width-large" id="form-h-textarea" rows="5" placeholder="Some text..."></textarea>
</div>
</div>
<div class="uk-margin">
<span class="uk-form-label">Radio</span>
<div class="uk-form-controls uk-form-controls-text">
<label><input class="uk-radio" type="radio" name="radio1"> Option 01</label><br>
<label><input class="uk-radio" type="radio" name="radio1"> Option 02</label>
<div class="uk-margin uk-grid-small uk-child-width-auto" uk-grid>
<label><input class="uk-radio" type="radio" name="radio2"> A</label>
<label><input class="uk-radio" type="radio" name="radio2"> B</label>
<label><input class="uk-radio" type="radio" name="radio2"> C</label>
<label><input class="uk-radio" type="radio" name="radio2"> D</label>
</div>
</div>
</div>
<div class="uk-margin">
<span class="uk-form-label">Checkbox</span>
<div class="uk-form-controls uk-form-controls-text">
<label><input class="uk-checkbox" type="checkbox"> Option 01</label><br>
<label><input class="uk-checkbox" type="checkbox"> Option 02</label>
<div class="uk-margin uk-grid-small uk-child-width-auto" uk-grid>
<label><input class="uk-checkbox" type="checkbox"> A</label>
<label><input class="uk-checkbox" type="checkbox"> B</label>
<label><input class="uk-checkbox" type="checkbox"> C</label>
<label><input class="uk-checkbox" type="checkbox"> D</label>
</div>
</div>
</div>
<div class="uk-margin">
<label class="uk-form-label" for="form-h-multiple">Multiple</label>
<div class="uk-form-controls">
<select class="uk-select uk-form-width-large" id="form-h-multiple" multiple>
<option>Option 01</option>
<option>Option 02</option>
<option>Option 03</option>
<option>Option 04</option>
</select>
</div>
</div>
<div class="uk-margin">
<label class="uk-form-label" for="form-h-range">Range</label>
<div class="uk-form-controls uk-form-controls-text">
<input class="uk-range uk-form-width-large" id="form-h-range" type="range" value="2" min="0" max="10" step="0.1">
</div>
</div>
</form>
<h2>Sizes</h2>
<form>
<div class="uk-margin" uk-margin>
<textarea class="uk-textarea uk-form-width-small uk-form-large" rows="2" placeholder="Some text..." aria-label="Large"></textarea>
<input class="uk-input uk-form-width-small uk-form-large" type="text" placeholder="Some text..." aria-label="Large">
<select class="uk-select uk-form-width-small uk-form-large" aria-label="Large">
<option>Option 01</option>
<option>Option 02</option>
</select>
<button class="uk-button uk-button-default uk-button-large">Button</button>
<label><input class="uk-checkbox" type="checkbox"> Checkbox</label>
</div>
<div class="uk-margin" uk-margin>
<textarea class="uk-textarea uk-form-width-small" rows="2" placeholder="Some text..." aria-label="Default"></textarea>
<input class="uk-input uk-form-width-small" type="text" placeholder="Some text..." aria-label="Default">
<select class="uk-select uk-form-width-small" aria-label="Default">
<option>Option 01</option>
<option>Option 02</option>
</select>
<button class="uk-button uk-button-default">Button</button>
<label><input class="uk-checkbox" type="checkbox"> Checkbox</label>
</div>
<div class="uk-margin" uk-margin>
<textarea class="uk-textarea uk-form-width-small uk-form-small" rows="2" placeholder="Some text..." aria-label="Small"></textarea>
<input class="uk-input uk-form-width-small uk-form-small" type="text" placeholder="Some text..." aria-label="Small">
<select class="uk-select uk-form-width-small uk-form-small" aria-label="Small">
<option>Option 01</option>
<option>Option 02</option>
</select>
<button class="uk-button uk-button-default uk-button-small">Button</button>
<label><input class="uk-checkbox" type="checkbox"> Checkbox</label>
</div>
</form>
<h2>Widths</h2>
<form>
<div class="uk-margin" uk-margin>
<input class="uk-input uk-form-width-large" type="text" placeholder="form-width-large" aria-label="Width large">
</div>
<div class="uk-margin" uk-margin>
<select class="uk-select uk-form-width-large" aria-label="Width large">
<option>form-width-large</option>
</select>
</div>
<div class="uk-margin" uk-margin>
<textarea class="uk-textarea uk-form-width-large" rows="1" placeholder="form-width-large" aria-label="Width large"></textarea>
</div>
<div class="uk-margin" uk-margin>
<input class="uk-input uk-form-width-medium" type="text" placeholder="form-width-medium" aria-label="Width medium">
<input class="uk-input uk-form-width-small" type="text" placeholder="form-width-small" aria-label="Width small">
<input class="uk-input uk-form-width-xsmall" type="text" placeholder="form-width-xsmall" aria-label="Width xsmall">
</div>
<div class="uk-margin" uk-margin>
<select class="uk-select uk-form-width-medium" aria-label="Width medium">
<option>form-width-medium</option>
</select>
<select class="uk-select uk-form-width-small" aria-label="Width small">
<option>form-width-small</option>
</select>
<select class="uk-select uk-form-width-xsmall" aria-label="Width xsmall">
<option>form-width-xsmall</option>
</select>
</div>
<div class="uk-margin" uk-margin>
<textarea class="uk-textarea uk-form-width-medium" rows="1" placeholder="form-width-medium" aria-label="Width medium"></textarea>
<textarea class="uk-textarea uk-form-width-small" rows="1" placeholder="form-width-small" aria-label="Width small"></textarea>
</div>
</form>
<h2>Icon</h2>
<form class="uk-form-stacked uk-child-width-auto@m" uk-grid>
<div>
<div class="uk-margin">
<span class="uk-form-label">Not clickable</span>
<div class="uk-inline">
<span class="uk-form-icon" uk-icon="icon: user"></span>
<input class="uk-input uk-form-width-medium" type="text" aria-label="Not clickable icon">
</div>
</div>
<div class="uk-margin">
<div class="uk-inline">
<span class="uk-form-icon uk-form-icon-flip" uk-icon="icon: lock"></span>
<input class="uk-input uk-form-width-medium" type="text" aria-label="Not clickable icon">
</div>
</div>
</div>
<div>
<div class="uk-margin">
<span class="uk-form-label">Clickable</span>
<div class="uk-inline">
<a class="uk-form-icon" href="#" uk-icon="icon: pencil"></a>
<input class="uk-input" type="text" aria-label="Clickable icon">
</div>
</div>
<div class="uk-margin">
<div class="uk-inline">
<a class="uk-form-icon uk-form-icon-flip" href="#" uk-icon="icon: link"></a>
<input class="uk-input" type="text" aria-label="Clickable icon">
</div>
</div>
</div>
</form>
<h2>Select</h2>
<select class="uk-select uk-form-width-large" aria-label="Select">
<option>Option 01</option>
<option>Option 02</option>
</select>
<p class="uk-margin-small">
<select class="uk-select uk-form-width-large" aria-label="Select disabled" disabled>
<option>Option 01</option>
<option>Option 02</option>
</select>
</p>
<p class="uk-margin-small">
<select class="uk-select uk-form-width-large" aria-label="Select multiple" multiple>
<option>Option 01</option>
<option>Option 02</option>
<option>Option 03</option>
<option>Option 04</option>
</select>
</p>
<h2>Radio, Checkbox and Select</h2>
<form class="uk-form-stacked uk-child-width-1-3@m" uk-grid>
<div>
<span class="uk-form-label">Radio</span>
<label><input class="uk-radio" type="radio" name="radio1" checked> Checked</label><br>
<label><input class="uk-radio" type="radio" name="radio1"> Unchecked</label><br>
<label><input class="uk-radio" type="radio" name="radio1"> Unchecked</label><br>
<label><input class="uk-radio" type="radio" name="radio2" disabled> Disabled</label><br>
<label><input class="uk-radio" type="radio" name="radio2" disabled checked> Disabled Checked</label>
<div class="uk-margin uk-grid-small uk-child-width-auto" uk-grid>
<label><input class="uk-radio" type="radio" name="radio3" checked> A</label>
<label><input class="uk-radio" type="radio" name="radio3"> B</label>
<label><input class="uk-radio" type="radio" name="radio4" disabled> C</label>
<label><input class="uk-radio" type="radio" name="radio4" disabled checked> D</label>
</div>
</div>
<div>
<span class="uk-form-label">Checkbox</span>
<label><input class="uk-checkbox" type="checkbox" checked> Checked</label><br>
<label><input class="uk-checkbox" type="checkbox"> Unchecked</label><br>
<label><input class="uk-checkbox" type="checkbox"> Unchecked</label><br>
<label><input class="uk-checkbox" type="checkbox" disabled> Disabled</label><br>
<label><input class="uk-checkbox" type="checkbox" disabled checked> Disabled Checked</label><br>
<div class="uk-margin uk-grid-small uk-child-width-auto" uk-grid>
<label><input class="uk-checkbox" type="checkbox" checked> A</label>
<label><input class="uk-checkbox" type="checkbox"> B</label>
<label><input class="uk-checkbox" type="checkbox" disabled> C</label>
<label><input class="uk-checkbox" type="checkbox" disabled checked> D</label>
</div>
</div>
<div>
<span class="uk-form-label">Checkbox</span>
<label><input class="uk-checkbox js-indeterminate" type="checkbox"> Indeterminate</label><br>
<label><input class="uk-checkbox" type="checkbox"> Unchecked</label><br>
<label><input class="uk-checkbox" type="checkbox"> Unchecked</label><br>
<label><input class="uk-checkbox" type="checkbox" disabled> Disabled</label><br>
<label><input class="uk-checkbox js-indeterminate" type="checkbox" disabled> Disabled Indeterminate</label>
<div class="uk-margin uk-grid-small uk-child-width-auto" uk-grid>
<label><input class="uk-checkbox js-indeterminate" type="checkbox"> A</label>
<label><input class="uk-checkbox" type="checkbox"> B</label>
<label><input class="uk-checkbox" type="checkbox" disabled> C</label>
<label><input class="uk-checkbox js-indeterminate" type="checkbox" disabled> D</label>
</div>
<script>UIkit.util.$$('.js-indeterminate').forEach(el => { el.indeterminate = true; })</script>
</div>
</form>
<h2>Custom Controls</h2>
<form class="uk-form-stacked uk-child-width-1-2@m" uk-grid>
<div>
<h3>File</h3>
<div class="uk-margin">
<div uk-form-custom>
<input type="file" aria-label="Custom controls">
<button class="uk-button uk-button-default" type="button" tabindex="-1">Select</button>
</div>
</div>
<div class="uk-margin">
<span class="uk-text-middle">Here is a text</span>
<div uk-form-custom>
<input type="file" aria-label="Custom controls">
<span class="uk-link">upload</span>
</div>
</div>
<div class="uk-margin" uk-margin>
<div uk-form-custom="target: true">
<input type="file" aria-label="Custom controls">
<input class="uk-input uk-form-width-medium" type="text" placeholder="Select file" disabled>
</div>
<button class="uk-button uk-button-default">Submit</button>
</div>
</div>
<div>
<h3>Select</h3>
<div class="uk-margin">
<div uk-form-custom="target: true">
<select aria-label="Custom controls">
<option value="1">Option 01</option>
<option value="2">Option 02</option>
<option value="3">Option 03</option>
<option value="4">Option 04</option>
</select>
<span></span>
</div>
</div>
<div class="uk-margin">
<div uk-form-custom="target: > * > span:last-child">
<select aria-label="Custom controls">
<option value="1">Option 01</option>
<option value="2">Option 02</option>
<option value="3">Option 03</option>
<option value="4">Option 04</option>
</select>
<span class="uk-link">
<span uk-icon="icon: pencil"></span>
<span></span>
</span>
</div>
</div>
<div class="uk-margin">
<div uk-form-custom="target: > * > span:first-child">
<select aria-label="Custom controls">
<option value="">Please select...</option>
<option value="1">Option 01</option>
<option value="2">Option 02</option>
<option value="3">Option 03</option>
<option value="4">Option 04</option>
</select>
<button class="uk-button uk-button-default" type="button" tabindex="-1">
<span></span>
<span uk-icon="icon: chevron-down"></span>
</button>
</div>
</div>
<div class="uk-margin">
<div uk-form-custom="target: true">
<select aria-label="Custom controls">
<option value="">Please select...</option>
<option value="1">Option 01</option>
<option value="2">Option 02</option>
<option value="3">Option 03</option>
<option value="4">Option 04</option>
</select>
<span class="uk-select uk-form-width-medium"></span>
</div>
</div>
</div>
</form>
<p><span class="uk-label">Note</span> The hover and focus state for <code>uk-form-custom</code> are not styled by default, but you could use the adjacent sibling selector to do so.</p>
</div>
<form class="uk-form-stacked uk-width-1-3@s">
<h2>Stacked</h2>
<div class="uk-margin">
<span class="uk-form-label">States and styles</span>
<div class="uk-margin-small uk-grid-small uk-child-width-1-2" uk-grid>
<div>
<input class="uk-input" type="text" placeholder=":disabled" aria-label="disabled" disabled>
</div>
<div>
<input class="uk-input" type="text" placeholder=":disabled" aria-label="disabled" value="Some text..." disabled>
</div>
</div>
<div class="uk-margin-small uk-grid-small" uk-grid>
<div class="uk-width-expand">
<input class="uk-input" type="text" placeholder=":focus" aria-label="focus" autofocus required>
</div>
<div class="uk-width-auto">
<button class="uk-button uk-button-default uk-width-1-1">Required</button>
</div>
</div>
<div class="uk-margin-small">
<input class="uk-input uk-form-danger" type="text" placeholder="form-danger" aria-label="form-danger" value="form-danger">
</div>
<div class="uk-margin-small">
<input class="uk-input uk-form-success" type="text" placeholder="form-success" aria-label="form-success" value="form-success">
</div>
<div class="uk-margin-small">
<input class="uk-input uk-form-blank" type="text" placeholder="form-blank" aria-label="form-blank">
</div>
</div>
<fieldset class="uk-fieldset">
<legend class="uk-legend">Legend</legend>
<div class="uk-margin">
<label class="uk-form-label" for="form-s-text">Text</label>
<input class="uk-input" id="form-s-text" type="text" placeholder="Some text...">
</div>
<div class="uk-margin">
<label class="uk-form-label" for="form-s-select">Select</label>
<select class="uk-select" id="form-s-select">
<option>Option 01</option>
<option>Option 02</option>
</select>
</div>
<div class="uk-margin">
<label class="uk-form-label" for="form-s-textarea">Textarea</label>
<textarea class="uk-textarea" id="form-s-textarea" rows="5" placeholder="Some text..."></textarea>
</div>
<div class="uk-margin">
<span class="uk-form-label">Radio</span>
<label><input class="uk-radio" type="radio" name="radio1"> Option 01</label><br>
<label><input class="uk-radio" type="radio" name="radio1"> Option 02</label>
<div class="uk-margin uk-grid-small uk-child-width-auto" uk-grid>
<label><input class="uk-radio" type="radio" name="radio2"> A</label>
<label><input class="uk-radio" type="radio" name="radio2"> B</label>
<label><input class="uk-radio" type="radio" name="radio2"> C</label>
<label><input class="uk-radio" type="radio" name="radio2"> D</label>
</div>
</div>
<div class="uk-margin">
<span class="uk-form-label">Checkbox</span>
<label><input class="uk-checkbox" type="checkbox"> Option 01</label><br>
<label><input class="uk-checkbox" type="checkbox"> Option 02</label>
<div class="uk-margin uk-grid-small uk-child-width-auto" uk-grid>
<label><input class="uk-checkbox" type="checkbox"> A</label>
<label><input class="uk-checkbox" type="checkbox"> B</label>
<label><input class="uk-checkbox" type="checkbox"> C</label>
<label><input class="uk-checkbox" type="checkbox"> D</label>
</div>
</div>
<div class="uk-margin">
<label class="uk-form-label" for="form-s-multiple">Multiple</label>
<select class="uk-select" id="form-s-multiple" multiple>
<option>Option 01</option>
<option>Option 02</option>
<option>Option 03</option>
<option>Option 04</option>
</select>
</div>
<div class="uk-margin">
<label class="uk-form-label" for="form-s-range">Range</label>
<input class="uk-range" id="form-s-range" type="range" value="2" min="0" max="10" step="0.1">
</div>
<div class="uk-margin">
<label class="uk-form-label" for="form-s-number">Number</label>
<input class="uk-input" id="form-s-number" type="number" min="0" max="10" value="5">
</div>
<div class="uk-margin">
<label class="uk-form-label" for="form-s-password">Password</label>
<input class="uk-input" id="form-s-password" type="password" placeholder="Password">
</div>
<div class="uk-margin">
<label class="uk-form-label" for="form-s-email">Email</label>
<input class="uk-input" id="form-s-email" type="email" placeholder="name@domain.com">
</div>
<div class="uk-margin">
<label class="uk-form-label" for="form-s-search">Search</label>
<input class="uk-input" id="form-s-search" type="search" placeholder="Search">
</div>
<div class="uk-margin">
<label class="uk-form-label" for="form-s-tel">Tel</label>
<input class="uk-input" id="form-s-tel" type="tel" placeholder="+49 555 123456">
</div>
<div class="uk-margin">
<label class="uk-form-label" for="form-s-url">URL</label>
<input class="uk-input" id="form-s-url" type="url" placeholder="http://">
</div>
<div class="uk-margin">
<label class="uk-form-label" for="form-s-file">File</label>
<input class="uk-width-1-1" id="form-s-file" type="file">
</div>
<div class="uk-margin">
<label class="uk-form-label" for="form-s-color">Color</label>
<input class="uk-input" id="form-s-color" type="color">
</div>
<div class="uk-margin">
<label class="uk-form-label" for="form-s-date">Date</label>
<input class="uk-input" id="form-s-date" type="date">
</div>
<div class="uk-margin">
<label class="uk-form-label" for="form-s-month">Month</label>
<input class="uk-input" id="form-s-month" type="month">
</div>
<div class="uk-margin">
<label class="uk-form-label" for="form-s-week">Week</label>
<input class="uk-input" id="form-s-week" type="week">
</div>
<div class="uk-margin">
<label class="uk-form-label" for="form-s-time">Time</label>
<input class="uk-input" id="form-s-time" type="time">
</div>
<div class="uk-margin">
<label class="uk-form-label" for="form-s-datetimelocal">Datetime local</label>
<input class="uk-input" id="form-s-datetimelocal" type="datetime-local">
</div>
</fieldset>
</form>
</div>
<h2>JavaScript Options</h2>
<div class="uk-overflow-auto">
<table class="uk-table uk-table-striped">
<thead>
<tr>
<th>Option</th>
<th>Value</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>target</code></td>
<td>CSS selector, Boolean</td>
<td>false</td>
<td>Value display target.</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Grid Masonry - UIkit tests</title>
<script src="js/test.js"></script>
<style>
:nth-child(9n-8) > .uk-panel { height: 140px; background: rgba(0,0,0,0.1); }
:nth-child(9n-7) > .uk-panel { height: 180px; background: rgba(0,0,0,0.1); }
:nth-child(9n-6) > .uk-panel { height: 220px; background: rgba(0,0,0,0.1); }
:nth-child(9n-5) > .uk-panel { height: 280px; background: rgba(0,0,0,0.15); }
:nth-child(9n-4) > .uk-panel { height: 140px; background: rgba(0,0,0,0.2); }
:nth-child(9n-3) > .uk-panel { height: 200px; background: rgba(0,0,0,0.25); }
:nth-child(9n-2) > .uk-panel { height: 250px; background: rgba(0,0,0,0.3); }
:nth-child(9n-1) > .uk-panel { height: 320px; background: rgba(0,0,0,0.35); }
:nth-child(9n) > .uk-panel { height: 160px; background: rgba(0,0,0,0.35); }
</style>
</head>
<body>
<div class="uk-container">
<h1>Grid Masonry</h1>
<div class="uk-margin">
<select id="js-masonry-switcher" class="uk-select uk-form-width-small" aria-label="Masonry switcher">
<option value="pack">Pack</option>
<option value="next">Next</option>
</select>
</div>
<div class="uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-4@l uk-light js-grid-masonry" uk-grid masonry="pack">
<div><div class="uk-panel"><h1 class="uk-position-center">1</h1></div></div>
<div><div class="uk-panel"><h1 class="uk-position-center">2</h1></div></div>
<div><div class="uk-panel"><h1 class="uk-position-center">3</h1></div></div>
<div><div class="uk-panel"><h1 class="uk-position-center">4</h1></div></div>
<div><div class="uk-panel"><h1 class="uk-position-center">5</h1></div></div>
<div><div class="uk-panel"><h1 class="uk-position-center">6</h1></div></div>
<div><div class="uk-panel"><h1 class="uk-position-center">7</h1></div></div>
<div><div class="uk-panel"><h1 class="uk-position-center">8</h1></div></div>
<div><div class="uk-panel"><h1 class="uk-position-center">9</h1></div></div>
<div><div class="uk-panel"><h1 class="uk-position-center">10</h1></div></div>
<div><div class="uk-panel"><h1 class="uk-position-center">11</h1></div></div>
<div><div class="uk-panel"><h1 class="uk-position-center">12</h1></div></div>
</div>
<h2>With Parallax</h2>
<div class="uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-4@l uk-light js-grid-masonry" uk-grid="parallax: 150" masonry="pack">
<div><div class="uk-panel"><h1 class="uk-position-center">1</h1></div></div>
<div><div class="uk-panel"><h1 class="uk-position-center">2</h1></div></div>
<div><div class="uk-panel"><h1 class="uk-position-center">3</h1></div></div>
<div><div class="uk-panel"><h1 class="uk-position-center">4</h1></div></div>
<div><div class="uk-panel"><h1 class="uk-position-center">5</h1></div></div>
<div><div class="uk-panel"><h1 class="uk-position-center">6</h1></div></div>
<div><div class="uk-panel"><h1 class="uk-position-center">7</h1></div></div>
<div><div class="uk-panel"><h1 class="uk-position-center">8</h1></div></div>
<div><div class="uk-panel"><h1 class="uk-position-center">9</h1></div></div>
<div><div class="uk-panel"><h1 class="uk-position-center">10</h1></div></div>
<div><div class="uk-panel"><h1 class="uk-position-center">11</h1></div></div>
<div><div class="uk-panel"><h1 class="uk-position-center">12</h1></div></div>
</div>
</div>
<script>
const {attr, $$, on} = UIkit.util;
on('#js-masonry-switcher', 'change', e =>
attr($$('.js-grid-masonry'), 'masonry', e.target.value)
);
</script>
</body>
</html>

View File

@@ -0,0 +1,171 @@
<!DOCTYPE html>
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Grid Parallax - UIkit tests</title>
<script src="js/test.js"></script>
<style>
.uk-panel { height: 300px; }
:nth-child(5n-4) > .uk-panel { background: rgba(0,0,0,0.2); }
:nth-child(5n-3) > .uk-panel { background: rgba(0,0,0,0.3); }
:nth-child(5n-2) > .uk-panel { background: rgba(0,0,0,0.4); }
:nth-child(5n-1) > .uk-panel { background: rgba(0,0,0,0.5); }
:nth-child(5n) > .uk-panel { background: rgba(0,0,0,0.6); }
.test { background: rgba(0,0,0,0.05); }
.js-grid-parallax :nth-child(9n-8) > .uk-panel { height: 240px; background: rgba(0,0,0,0.1); }
.js-grid-parallax :nth-child(9n-7) > .uk-panel { height: 380px; background: rgba(0,0,0,0.1); }
.js-grid-parallax :nth-child(9n-6) > .uk-panel { height: 400px; background: rgba(0,0,0,0.1); }
.js-grid-parallax :nth-child(9n-5) > .uk-panel { height: 480px; background: rgba(0,0,0,0.15); }
.js-grid-parallax :nth-child(9n-4) > .uk-panel { height: 260px; background: rgba(0,0,0,0.2); }
.js-grid-parallax :nth-child(9n-3) > .uk-panel { height: 400px; background: rgba(0,0,0,0.25); }
.js-grid-parallax :nth-child(9n-2) > .uk-panel { height: 450px; background: rgba(0,0,0,0.3); }
.js-grid-parallax :nth-child(9n-1) > .uk-panel { height: 520px; background: rgba(0,0,0,0.35); }
.js-grid-parallax :nth-child(9n) > .uk-panel { height: 280px; background: rgba(0,0,0,0.35); }
</style>
</head>
<body>
<div class="uk-container">
<h1>Grid Parallax</h1>
<h2>3 Columns</h2>
<div class="test">
<div class="uk-child-width-1-3@m" uk-grid="parallax: 150">
<div>
<div class="uk-panel uk-grid-margin"></div>
<div class="uk-panel uk-grid-margin"></div>
<div class="uk-panel uk-grid-margin"></div>
<div class="uk-panel uk-grid-margin"></div>
<div class="uk-panel uk-grid-margin"></div>
</div>
<div>
<div class="uk-panel uk-grid-margin"></div>
<div class="uk-panel uk-grid-margin"></div>
<div class="uk-panel uk-grid-margin"></div>
<div class="uk-panel uk-grid-margin"></div>
<div class="uk-panel uk-grid-margin"></div>
</div>
<div>
<div class="uk-panel uk-grid-margin"></div>
<div class="uk-panel uk-grid-margin"></div>
<div class="uk-panel uk-grid-margin"></div>
<div class="uk-panel uk-grid-margin"></div>
<div class="uk-panel uk-grid-margin"></div>
</div>
</div>
</div>
<h2>Multi-row</h2>
<div class="test">
<div class="uk-child-width-1-2@ uk-child-width-1-3@m uk-child-width-1-3@l" uk-grid="parallax: 150">
<div><div class="uk-panel"></div></div>
<div><div class="uk-panel"></div></div>
<div><div class="uk-panel"></div></div>
<div><div class="uk-panel"></div></div>
<div><div class="uk-panel"></div></div>
<div><div class="uk-panel"></div></div>
<div><div class="uk-panel"></div></div>
<div><div class="uk-panel"></div></div>
<div><div class="uk-panel"></div></div>
<div><div class="uk-panel"></div></div>
<div><div class="uk-panel"></div></div>
<div><div class="uk-panel"></div></div>
<div><div class="uk-panel"></div></div>
<div><div class="uk-panel"></div></div>
</div>
</div>
<h2>With Masonry</h2>
<div class="uk-margin uk-form-stacked">
<div class="uk-inline">
<label class="uk-form-label" for="js-parallax-switcher">Parallax</label>
<input id="js-parallax-switcher" class="uk-input uk-form-width-small" type="text" value="0">
</div>
<div class="uk-inline">
<label class="uk-form-label" for="js-parallax-start-switcher">Start</label>
<input id="js-parallax-start-switcher" class="uk-input uk-form-width-small" type="text" value="0">
</div>
<div class="uk-inline">
<label class="uk-form-label" for="js-parallax-end-switcher">End</label>
<input id="js-parallax-end-switcher" class="uk-input uk-form-width-small" type="text" value="0">
</div>
<div class="uk-inline">
<label class="uk-form-label" for="js-parallax-justify-switcher">Justify</label>
<select id="js-parallax-justify-switcher" class="uk-select uk-form-width-small">
<option value="false">False</option>
<option value="true" selected>True</option>
</select>
</div>
<div class="uk-inline">
<label class="uk-form-label" for="js-masonry-switcher">Masonry</label>
<select id="js-masonry-switcher" class="uk-select uk-form-width-small">
<option value="pack">Pack</option>
<option value="next">Next</option>
</select>
</div>
</div>
<div class="test" style="margin-bottom: 100vh">
<div class="uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-4@l uk-light js-grid-parallax" uk-grid parallax="0" parallax-justify="true" masonry="pack">
<div><div class="uk-panel"><h1 class="uk-position-center">1</h1></div></div>
<div><div class="uk-panel"><h1 class="uk-position-center">2</h1></div></div>
<div><div class="uk-panel"><h1 class="uk-position-center">3</h1></div></div>
<div><div class="uk-panel"><h1 class="uk-position-center">4</h1></div></div>
<div><div class="uk-panel"><h1 class="uk-position-center">5</h1></div></div>
<div><div class="uk-panel"><h1 class="uk-position-center">6</h1></div></div>
<div><div class="uk-panel"><h1 class="uk-position-center">7</h1></div></div>
<div><div class="uk-panel"><h1 class="uk-position-center">8</h1></div></div>
<div><div class="uk-panel"><h1 class="uk-position-center">9</h1></div></div>
<div><div class="uk-panel"><h1 class="uk-position-center">10</h1></div></div>
<div><div class="uk-panel"><h1 class="uk-position-center">11</h1></div></div>
<div><div class="uk-panel"><h1 class="uk-position-center">12</h1></div></div>
</div>
</div>
</div>
<script>
const {attr, $$, on} = UIkit.util;
on('#js-parallax-switcher', 'change', e =>
attr($$('.js-grid-parallax'), 'parallax', e.target.value)
);
on('#js-parallax-start-switcher', 'change', e =>
attr($$('.js-grid-parallax'), 'parallax-start', e.target.value)
);
on('#js-parallax-end-switcher', 'change', e =>
attr($$('.js-grid-parallax'), 'parallax-end', e.target.value)
);
on('#js-parallax-justify-switcher', 'change', e =>
attr($$('.js-grid-parallax'), 'parallax-justify', e.target.value)
);
on('#js-masonry-switcher', 'change', e =>
attr($$('.js-grid-parallax'), 'masonry', e.target.value)
);
</script>
</body>
</html>

Some files were not shown because too many files have changed in this diff Show More