%PDF-
%PDF-
Mini Shell
Mini Shell
// Name: Button
// Description: Defines styles for buttons
//
// Component: `uk-button`
//
// Sub-objects: `uk-button-group`
// `uk-button-dropdown`
//
// Modifiers: `uk-button-primary`
// `uk-button-success`
// `uk-button-danger`
// `uk-button-link`
// `uk-button-mini`
// `uk-button-small`
// `uk-button-large`
//
// States: `uk-active`
//
// Markup:
//
// <!-- uk-button-group -->
// <div class="uk-button-group">
// <button class="uk-button"></button>
// <button class="uk-button"></button>
// </div>
//
// <!-- uk-button-dropdown -->
// <div class="uk-button-dropdown" data-uk-dropdown>
// <button class="uk-button"></button>
// <div class="uk-dropdown uk-dropdown-small">
// <ul class="uk-nav uk-nav-dropdown">
// <li><a href=""></a></li>
// </ul>
// </div>
// </div>
//
// ========================================================================
// Variables
// ========================================================================
@button-height: 30px;
@button-mini-height: 20px;
@button-small-height: 25px;
@button-large-height: 40px;
@button-line-height: 30px;
@button-mini-line-height: 20px;
@button-small-line-height: 25px;
@button-large-line-height: 40px;
@button-mini-font-size: 11px;
@button-small-font-size: 12px;
@button-large-font-size: 16px;
@button-padding-horizontal: 12px;
@button-mini-padding-horizontal: 6px;
@button-small-padding-horizontal: 10px;
@button-large-padding-horizontal: 15px;
@button-font-size: 1rem;
@button-background: #eee;
@button-color: #444;
@button-hover-background: #f5f5f5;
@button-hover-color: #444;
@button-active-background: #ddd;
@button-active-color: #444;
@button-primary-background: #00a8e6;
@button-primary-color: #fff;
@button-primary-hover-background: #35b3ee;
@button-primary-hover-color: #fff;
@button-primary-active-background: #0091ca;
@button-primary-active-color: #fff;
@button-success-background: #8cc14c;
@button-success-color: #fff;
@button-success-hover-background: #8ec73b;
@button-success-hover-color: #fff;
@button-success-active-background: #72ae41;
@button-success-active-color: #fff;
@button-danger-background: #da314b;
@button-danger-color: #fff;
@button-danger-hover-background: #e4354f;
@button-danger-hover-color: #fff;
@button-danger-active-background: #c91032;
@button-danger-active-color: #fff;
@button-disabled-background: #f5f5f5;
@button-disabled-color: #999;
@button-link-color: #07D;
@button-link-hover-color: #059;
@button-link-hover-text-decoration: underline;
@button-link-disabled-color: #999;
/* ========================================================================
Component: Button
========================================================================== */
/*
* Removes inner padding and border in Firefox 4+.
*/
.uk-button::-moz-focus-inner {
border: 0;
padding: 0;
}
/*
* 1. Correct inability to style clickable `input` types in iOS.
* 2. Remove margins in Chrome, Safari and Opera.
* 3. Remove borders for `button`.
* 4. Address `overflow` set to `hidden` in IE 8/9/10/11.
* 5. Correct `font` properties and `color` not being inherited for `button`.
* 6. Address inconsistent `text-transform` inheritance which is only inherit in Firefox and IE
* 7. Style
* 8. `line-height` is used to create a height
* 9. `min-height` is necessary for `input` elements in Firefox and Opera because `line-height` is not working.
* 10. Reset button group whitespace hack
* 11. Required for `a`.
*/
.uk-button {
/* 1 */
-webkit-appearance: none;
/* 2 */
margin: 0;
/* 3 */
border: none;
/* 4 */
overflow: visible;
/* 5 */
font: inherit;
color: @button-color;
/* 6 */
text-transform: none;
/* 7 */
display: inline-block;
box-sizing: border-box;
padding: 0 @button-padding-horizontal;
background: @button-background;
vertical-align: middle;
/* 8 */
line-height: @button-line-height;
/* 9 */
min-height: @button-height;
/* 10 */
font-size: @button-font-size;
/* 11 */
text-decoration: none;
text-align: center;
.hook-button;
}
.uk-button:not(:disabled) { cursor: pointer; }
/*
* Hover
* 1. Apply hover style also to focus state
* 2. Remove default focus style
* 3. Required for `a` elements
*/
.uk-button:hover,
.uk-button:focus { // 1
background-color: @button-hover-background;
color: @button-hover-color;
/* 2 */
outline: none;
/* 3 */
text-decoration: none;
.hook-button-hover;
}
/* Active */
.uk-button:active,
.uk-button.uk-active {
background-color: @button-active-background;
color: @button-active-color;
.hook-button-active;
}
/* Color modifiers
========================================================================== */
/*
* Modifier: `uk-button-primary`
*/
.uk-button-primary {
background-color: @button-primary-background;
color: @button-primary-color;
.hook-button-primary;
}
/* Hover */
.uk-button-primary:hover,
.uk-button-primary:focus {
background-color: @button-primary-hover-background;
color: @button-primary-hover-color;
.hook-button-primary-hover;
}
/* Active */
.uk-button-primary:active,
.uk-button-primary.uk-active {
background-color: @button-primary-active-background;
color: @button-primary-active-color;
.hook-button-primary-active;
}
/*
* Modifier: `uk-button-success`
*/
.uk-button-success {
background-color: @button-success-background;
color: @button-success-color;
.hook-button-success;
}
/* Hover */
.uk-button-success:hover,
.uk-button-success:focus {
background-color: @button-success-hover-background;
color: @button-success-hover-color;
.hook-button-success-hover;
}
/* Active */
.uk-button-success:active,
.uk-button-success.uk-active {
background-color: @button-success-active-background;
color: @button-success-active-color;
.hook-button-success-active;
}
/*
* Modifier: `uk-button-danger`
*/
.uk-button-danger {
background-color: @button-danger-background;
color: @button-danger-color;
.hook-button-danger;
}
/* Hover */
.uk-button-danger:hover,
.uk-button-danger:focus {
background-color: @button-danger-hover-background;
color: @button-danger-hover-color;
.hook-button-danger-hover;
}
/* Active */
.uk-button-danger:active,
.uk-button-danger.uk-active {
background-color: @button-danger-active-background;
color: @button-danger-active-color;
.hook-button-danger-active;
}
/* Disabled state
* Overrides also the color modifiers
========================================================================== */
/* Equal for all button types */
.uk-button:disabled {
background-color: @button-disabled-background;
color: @button-disabled-color;
.hook-button-disable;
}
/* Modifier: `uk-button-link`
========================================================================== */
/* Reset */
.uk-button-link,
.uk-button-link:hover,
.uk-button-link:focus,
.uk-button-link:active,
.uk-button-link.uk-active,
.uk-button-link:disabled {
border-color: transparent;
background: none;
.hook-button-link;
}
/* Color */
.uk-button-link { color: @button-link-color; }
.uk-button-link:hover,
.uk-button-link:focus,
.uk-button-link:active,
.uk-button-link.uk-active {
color: @button-link-hover-color;
text-decoration: @button-link-hover-text-decoration;
}
.uk-button-link:disabled { color: @button-link-disabled-color; }
/* Focus */
.uk-button-link:focus { outline: 1px dotted; }
/* Size modifiers
========================================================================== */
.uk-button-mini {
min-height: @button-mini-height;
padding: 0 @button-mini-padding-horizontal;
line-height: @button-mini-line-height;
font-size: @button-mini-font-size;
}
.uk-button-small {
min-height: @button-small-height;
padding: 0 @button-small-padding-horizontal;
line-height: @button-small-line-height;
font-size: @button-small-font-size;
}
.uk-button-large {
min-height: @button-large-height;
padding: 0 @button-large-padding-horizontal;
line-height: @button-large-line-height;
font-size: @button-large-font-size;
.hook-button-large;
}
/* Sub-object `uk-button-group`
========================================================================== */
/*
* 1. Behave like buttons
* 2. Create position context for dropdowns
* 3. Remove whitespace between child elements when using `inline-block`
* 4. Prevent buttons from wrapping
* 5. Remove whitespace between child elements when using `inline-block`
*/
.uk-button-group {
/* 1 */
display: inline-block;
vertical-align: middle;
/* 2 */
position: relative;
/* 3 */
font-size: 0.001px;
/* 4 */
white-space: nowrap;
}
.uk-button-group > * { display: inline-block; }
/* 5 */
.uk-button-group .uk-button { vertical-align: top; }
/* Sub-object: `uk-button-dropdown`
========================================================================== */
/*
* 1. Behave like buttons
* 2. Create position context for dropdowns
*/
.uk-button-dropdown {
/* 1 */
display: inline-block;
vertical-align: middle;
/* 2 */
position: relative;
}
// Hooks
// ========================================================================
.hook-button-misc;
.hook-button() {}
.hook-button-hover() {}
.hook-button-active() {}
.hook-button-primary() {}
.hook-button-primary-hover() {}
.hook-button-primary-active() {}
.hook-button-success() {}
.hook-button-success-hover() {}
.hook-button-success-active() {}
.hook-button-danger() {}
.hook-button-danger-hover() {}
.hook-button-danger-active() {}
.hook-button-disable() {}
.hook-button-link() {}
.hook-button-large() {}
.hook-button-misc() {}
Zerion Mini Shell 1.0