/*! UIkit 2.27.2 | www.getuikit.com | © 2014 YOOtheme | MIT License */ /* ========================================================================
Component: HTML editor ========================================================================== */
/* Sub-object `uk-htmleditor-navbar`
========================================================================== */
.uk-htmleditor-navbar {
background: #eee;
} /*
* Micro clearfix */
.uk-htmleditor-navbar:before, .uk-htmleditor-navbar:after {
content: ""; display: table;
} .uk-htmleditor-navbar:after {
clear: both;
} /* Sub-object `uk-htmleditor-navbar-nav`
========================================================================== */
.uk-htmleditor-navbar-nav {
margin: 0; padding: 0; list-style: none; float: left;
} .uk-htmleditor-navbar-nav > li {
float: left;
} /*
* 1. Dimensions * 2. Style */
.uk-htmleditor-navbar-nav > li > a {
display: block; box-sizing: border-box; text-decoration: none; /* 1 */ height: 40px; padding: 0 15px; line-height: 40px; /* 2 */ color: #444; font-size: 11px; cursor: pointer;
} /*
* Hover * 1. Apply hover style also to focus state * 2. Remove default focus style */
.uk-htmleditor-navbar-nav > li:hover > a, .uk-htmleditor-navbar-nav > li > a:focus {
background-color: #f5f5f5; color: #444; outline: none; /* 2 */
} /* OnClick */ .uk-htmleditor-navbar-nav > li > a:active {
background-color: #ddd; color: #444;
} /* Active */ .uk-htmleditor-navbar-nav > li.uk-active > a {
background-color: #f5f5f5; color: #444;
} /* Sub-object: `uk-htmleditor-navbar-flip`
========================================================================== */
.uk-htmleditor-navbar-flip {
float: right;
} /* Sub-object for special buttons
========================================================================== */
- data-mode='split'
-
.uk-htmleditor-button-code,
- data-mode='split'
-
.uk-htmleditor-button-preview {
display: none;
} /* Sub-object `uk-htmleditor-content`
========================================================================== */
.uk-htmleditor-content {
border-left: 1px solid #ddd; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; background: #fff;
} /*
* Micro clearfix */
.uk-htmleditor-content:before, .uk-htmleditor-content:after {
content: ""; display: table;
} .uk-htmleditor-content:after {
clear: both;
} /* Modifier `uk-htmleditor-fullscreen`
========================================================================== */
.uk-htmleditor-fullscreen {
position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 990;
} .uk-htmleditor-fullscreen .uk-htmleditor-content {
position: absolute; top: 40px; left: 0; right: 0; bottom: 0;
} .uk-htmleditor-fullscreen .uk-icon-expand:before {
content: "\f066";
} /* Sub-objects `uk-htmleditor-code` and `uk-htmleditor-preview`
========================================================================== */
.uk-htmleditor-code, .uk-htmleditor-preview {
box-sizing: border-box;
} .uk-htmleditor-preview {
padding: 20px; overflow-y: scroll; position: relative;
} /*
* Tab view */
- data-mode='tab'][data-active-tab='code'
-
.uk-htmleditor-preview,
- data-mode='tab'][data-active-tab='preview'
-
.uk-htmleditor-code {
display: none;
} /*
* Split view */
- data-mode='split'
-
.uk-htmleditor-code,
- data-mode='split'
-
.uk-htmleditor-preview {
float: left; width: 50%;
}
- data-mode='split'
-
.uk-htmleditor-code {
border-right: 1px solid #eee;
} /* Sub-object `uk-htmleditor-iframe`
========================================================================== */
.uk-htmleditor-iframe {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
} /* CodeMirror modifications
========================================================================== */
.uk-htmleditor .CodeMirror {
padding: 10px; box-sizing: border-box;
}