204 lines
5.4 KiB
Plaintext
204 lines
5.4 KiB
Plaintext
// Name: Nestable
|
|
// Description: Defines styles for nestable lists
|
|
//
|
|
// Component: `uk-nestable`
|
|
//
|
|
// Sub-objects: `uk-nestable-list`
|
|
// `uk-nestable-item`
|
|
// `uk-nestable-placeholder`
|
|
// `uk-nestable-empty`
|
|
// `uk-nestable-handle`
|
|
// `uk-nestable-moving`
|
|
// `[data-nestable-action='toggle']`
|
|
//
|
|
// Modifier: `uk-nestable-list-dragged`
|
|
//
|
|
// States: `uk-parent`
|
|
// `uk-collapsed`
|
|
//
|
|
// Markup:
|
|
//
|
|
// <!-- uk-nestable addon -->
|
|
// <ul class="uk-nestable" data-uk-nestable>
|
|
// <li>
|
|
// <div class="uk-nestable-item">
|
|
// <div class="uk-nestable-handle"></div>
|
|
// <div data-nestable-action="toggle"></div>
|
|
// <span></span>
|
|
// </div>
|
|
// </li>
|
|
// </ul>
|
|
//
|
|
// ========================================================================
|
|
|
|
|
|
// Variables
|
|
// ========================================================================
|
|
|
|
@nestable-padding-left: 40px;
|
|
@nestable-dragged-z-index: 1050;
|
|
|
|
@nestable-item-margin-bottom: 10px;
|
|
@nestable-item-padding: 0; // modified
|
|
@nestable-item-background: #f6f6f6; // modified
|
|
|
|
@nestable-placeholder-border: #e4e4e4; // modified
|
|
|
|
@nestable-empty-height: 40px;
|
|
|
|
@nestable-handle-font-size: 15px; // modified
|
|
@nestable-handle-color: #979898; // modified
|
|
@nestable-handle-icon: "\f0c9";
|
|
|
|
@nestable-toggle-color: @nestable-handle-color; // modified
|
|
@nestable-toggle-hover-color: darken(@nestable-handle-color, 10%); // modified
|
|
@nestable-toggle-icon: "\f068"; // modified
|
|
@nestable-toggle-collapsed-icon: "\f067"; // modified
|
|
|
|
|
|
/* ========================================================================
|
|
Component: Nestable
|
|
========================================================================== */
|
|
|
|
.uk-nestable {
|
|
padding: 0;
|
|
list-style: none;
|
|
.hook-nestable;
|
|
}
|
|
|
|
|
|
/* Sub-object `uk-nestable-list`
|
|
========================================================================== */
|
|
|
|
.uk-nestable-list {
|
|
margin: 0;
|
|
padding-left: @nestable-padding-left;
|
|
list-style: none;
|
|
}
|
|
|
|
|
|
/* Sub-modifier `uk-nestable-list-dragged`
|
|
========================================================================== */
|
|
|
|
.uk-nestable-list-dragged {
|
|
position: absolute;
|
|
z-index: @nestable-dragged-z-index;
|
|
padding-left: 0;
|
|
pointer-events: none;
|
|
.hook-nestable-list-dragged;
|
|
}
|
|
|
|
|
|
/* Sub-object `uk-nestable-item`
|
|
========================================================================== */
|
|
|
|
.uk-nestable-item {
|
|
margin-bottom: @nestable-item-margin-bottom;
|
|
padding: @nestable-item-padding;
|
|
background: @nestable-item-background;
|
|
.hook-nestable-item;
|
|
}
|
|
|
|
|
|
/* Sub-object `uk-nestable-placeholder`
|
|
* The placeholder which marks the drop area
|
|
========================================================================== */
|
|
|
|
.uk-nestable-placeholder {
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
margin-bottom: @nestable-item-margin-bottom;
|
|
border: 1px dashed @nestable-placeholder-border;
|
|
.hook-nestable-placeholder;
|
|
}
|
|
|
|
|
|
/* Sub-object `uk-nestable-empty`
|
|
* The style of an empty list
|
|
========================================================================== */
|
|
|
|
.uk-nestable-empty {
|
|
min-height: @nestable-empty-height;
|
|
.hook-nestable-empty;
|
|
}
|
|
|
|
|
|
/* Sub-object `uk-nestable-handle`
|
|
========================================================================== */
|
|
|
|
.uk-nestable-handle {
|
|
display: inline-block;
|
|
font-size: @nestable-handle-font-size;
|
|
color: @nestable-handle-color;
|
|
.hook-nestable-handle;
|
|
}
|
|
|
|
/* Hover */
|
|
.uk-nestable-handle:hover { cursor: move; }
|
|
|
|
/* Icon */
|
|
.uk-nestable-handle:after {
|
|
content: @nestable-handle-icon;
|
|
font-family: FontAwesome;
|
|
}
|
|
|
|
|
|
/* Sub-object `uk-nestable-moving`
|
|
========================================================================== */
|
|
|
|
.uk-nestable-moving,
|
|
/* Needed if moving over links or buttons */
|
|
.uk-nestable-moving * { cursor: move; }
|
|
|
|
|
|
/* Sub-object `[data-action='toggle']`
|
|
========================================================================== */
|
|
|
|
/* Hidden by default */
|
|
[data-nestable-action='toggle'] {
|
|
display: inline-block;
|
|
color: @nestable-toggle-color;
|
|
visibility: hidden;
|
|
.hook-nestable-toggle;
|
|
}
|
|
|
|
/* Hover */
|
|
[data-nestable-action='toggle']:hover {
|
|
color: @nestable-toggle-hover-color;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Icon */
|
|
[data-nestable-action='toggle']:after {
|
|
content: @nestable-toggle-icon;
|
|
font-family: FontAwesome;
|
|
}
|
|
|
|
/*
|
|
* Show if nested
|
|
*/
|
|
|
|
.uk-parent > .uk-nestable-item [data-nestable-action='toggle'] { visibility: visible; }
|
|
|
|
/*
|
|
* Collapsed
|
|
*/
|
|
|
|
.uk-collapsed > .uk-nestable-item [data-nestable-action='toggle']:after { content: @nestable-toggle-collapsed-icon; }
|
|
|
|
.uk-collapsed .uk-nestable-list { display: none; }
|
|
|
|
|
|
// Hooks
|
|
// ========================================================================
|
|
|
|
.hook-nestable-misc;
|
|
|
|
.hook-nestable() {}
|
|
.hook-nestable-list-dragged() {}
|
|
.hook-nestable-item() {}
|
|
.hook-nestable-placeholder() {}
|
|
.hook-nestable-empty() {}
|
|
.hook-nestable-handle() {}
|
|
.hook-nestable-toggle() {}
|
|
.hook-nestable-misc() {} |