first commit
This commit is contained in:
+238
@@ -0,0 +1,238 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Bootstrap switches
|
||||
*
|
||||
* Styles for switch.min.js - checkbox/radio toggle switches
|
||||
*
|
||||
* Version: 1.1
|
||||
* Latest update: Oct 20, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Core
|
||||
// ------------------------------
|
||||
|
||||
.bootstrap-switch {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
margin-top: -2px;
|
||||
margin-right: @element-horizontal-spacing;
|
||||
border-radius: @border-radius-base;
|
||||
border: 1px solid transparent;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
vertical-align: middle;
|
||||
.user-select(none);
|
||||
.transition(all ease-in-out .05s);
|
||||
|
||||
// Container
|
||||
.bootstrap-switch-container {
|
||||
display: inline-block;
|
||||
top: 0;
|
||||
border-radius: @border-radius-base;
|
||||
.translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
// Remove outline
|
||||
&.bootstrap-switch-focused {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
// Set base styles
|
||||
.bootstrap-switch-handle-on,
|
||||
.bootstrap-switch-handle-off,
|
||||
.bootstrap-switch-label {
|
||||
cursor: pointer;
|
||||
display: inline-block !important;
|
||||
height: 100%;
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
}
|
||||
|
||||
// Hide inputs
|
||||
input[type='radio'],
|
||||
input[type='checkbox'] {
|
||||
position: absolute !important;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
.opacity(0);
|
||||
|
||||
&.form-control {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// States
|
||||
&.bootstrap-switch-disabled,
|
||||
&.bootstrap-switch-readonly,
|
||||
&.bootstrap-switch-indeterminate {
|
||||
cursor: default !important;
|
||||
|
||||
.bootstrap-switch-handle-on,
|
||||
.bootstrap-switch-handle-off,
|
||||
.bootstrap-switch-label {
|
||||
cursor: default !important;
|
||||
.opacity(0.5);
|
||||
}
|
||||
}
|
||||
|
||||
// Set animation
|
||||
&.bootstrap-switch-animate .bootstrap-switch-container {
|
||||
.transition(margin-left 0.2s);
|
||||
}
|
||||
|
||||
// Set border radiuses
|
||||
&.bootstrap-switch-inverse {
|
||||
.bootstrap-switch-handle-on {
|
||||
.border-left-radius(0);
|
||||
.border-right-radius(@border-radius-base - 1);
|
||||
}
|
||||
.bootstrap-switch-handle-off {
|
||||
.border-right-radius(0);
|
||||
.border-left-radius(@border-radius-base - 1);
|
||||
}
|
||||
}
|
||||
&.bootstrap-switch-on,
|
||||
&.bootstrap-switch-inverse.bootstrap-switch-off {
|
||||
.bootstrap-switch-label {
|
||||
.border-right-radius(@border-radius-base - 1);
|
||||
}
|
||||
}
|
||||
&.bootstrap-switch-off,
|
||||
&.bootstrap-switch-inverse.bootstrap-switch-on {
|
||||
.bootstrap-switch-label {
|
||||
.border-left-radius(@border-radius-base - 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Handles
|
||||
// ------------------------------
|
||||
|
||||
// Base
|
||||
.bootstrap-switch-handle-on,
|
||||
.bootstrap-switch-handle-off {
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
|
||||
// Contextual alternatives
|
||||
&.bootstrap-switch-default {
|
||||
color: @text-color;
|
||||
background-color: @gray-lighter;
|
||||
}
|
||||
&.bootstrap-switch-primary {
|
||||
color: #fff;
|
||||
background-color: @brand-primary;
|
||||
}
|
||||
&.bootstrap-switch-danger {
|
||||
color: #fff;
|
||||
background-color: @brand-danger;
|
||||
}
|
||||
&.bootstrap-switch-success {
|
||||
color: #fff;
|
||||
background-color: @brand-success;
|
||||
}
|
||||
&.bootstrap-switch-warning {
|
||||
color: #fff;
|
||||
background-color: @brand-warning;
|
||||
}
|
||||
&.bootstrap-switch-info {
|
||||
color: #fff;
|
||||
background-color: @brand-info;
|
||||
}
|
||||
}
|
||||
|
||||
// Set border radius
|
||||
.bootstrap-switch-handle-on {
|
||||
.border-left-radius(@border-radius-base - 1);
|
||||
}
|
||||
.bootstrap-switch-handle-off {
|
||||
.border-right-radius(@border-radius-base - 1);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Label
|
||||
// ------------------------------
|
||||
|
||||
.bootstrap-switch-label {
|
||||
text-align: center;
|
||||
z-index: 100;
|
||||
color: @text-color;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
.box-shadow(0 0 0 1px fade(#000, 10%) inset);
|
||||
|
||||
&:hover {
|
||||
background-color: #fcfcfc;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
// Add vertical lines
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 3px;
|
||||
height: 10px;
|
||||
margin-top: -5px;
|
||||
margin-left: -1px;
|
||||
display: inline-block;
|
||||
border-left: 1px solid @input-border;
|
||||
border-right: 1px solid @input-border;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Sizing
|
||||
// ------------------------------
|
||||
|
||||
// Large
|
||||
.bootstrap-switch-large {
|
||||
.bootstrap-switch-handle-on,
|
||||
.bootstrap-switch-handle-off,
|
||||
.bootstrap-switch-label {
|
||||
padding: @padding-large-vertical @padding-large-horizontal;
|
||||
}
|
||||
}
|
||||
|
||||
// Mini
|
||||
.bootstrap-switch-mini {
|
||||
.bootstrap-switch-handle-on,
|
||||
.bootstrap-switch-handle-off,
|
||||
.bootstrap-switch-label {
|
||||
padding: @padding-xs-vertical @padding-xs-horizontal;
|
||||
}
|
||||
}
|
||||
|
||||
// Small
|
||||
.bootstrap-switch-small {
|
||||
.bootstrap-switch-handle-on,
|
||||
.bootstrap-switch-handle-off,
|
||||
.bootstrap-switch-label {
|
||||
padding: @padding-small-vertical @padding-small-horizontal;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Checkbox specials
|
||||
// ------------------------------
|
||||
|
||||
.checkbox-switch > label,
|
||||
label.checkbox-switch.checkbox-inline {
|
||||
padding: 0;
|
||||
}
|
||||
.checkbox-switch.checkbox-right .bootstrap-switch {
|
||||
margin-right: 0;
|
||||
margin-left: @element-horizontal-spacing;
|
||||
}
|
||||
@@ -0,0 +1,264 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Switchery toggles
|
||||
*
|
||||
* Styles for switchery.min.js - toggle switches
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: Mar 25, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Core
|
||||
// ------------------------------
|
||||
|
||||
.switchery {
|
||||
background-color: #fff;
|
||||
border: 1px solid @input-border;
|
||||
border-radius: 100px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
width: (@switchery-base-size * 2);
|
||||
height: @switchery-base-size;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
.box-sizing(content-box);
|
||||
|
||||
// Container
|
||||
.checkbox-switchery & {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
margin-top: ((@line-height-computed / 2) - (@switchery-base-size / 2) - 1); // Half text height - half switchery height - 1px border
|
||||
}
|
||||
|
||||
// Handle
|
||||
> small {
|
||||
background-color: #fff;
|
||||
border-radius: 100px;
|
||||
width: @switchery-base-size;
|
||||
height: @switchery-base-size;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
.box-shadow(0 1px 3px fade(#000, 40%));
|
||||
}
|
||||
}
|
||||
|
||||
// Override BS checkbox styles
|
||||
.checkbox.checkbox-switchery {
|
||||
margin-bottom: (@switchery-base-size - (@line-height-computed / 2) + 2);
|
||||
padding-left: 0;
|
||||
|
||||
&.disabled .switchery {
|
||||
cursor: @cursor-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove padding if no text label
|
||||
.checkbox[class*=switchery-],
|
||||
.checkbox-inline[class*=switchery-] {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Sizing
|
||||
// ------------------------------
|
||||
|
||||
// Large
|
||||
.switchery-lg {
|
||||
&.checkbox-switchery {
|
||||
margin-bottom: (@switchery-large-size - (@line-height-computed / 2) + 2);
|
||||
|
||||
.switchery {
|
||||
margin-top: (@line-height-computed / 2) - (@switchery-large-size / 2) - 1;
|
||||
}
|
||||
}
|
||||
|
||||
label& {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.switchery {
|
||||
height: @switchery-large-size;
|
||||
width: (@switchery-large-size * 2);
|
||||
|
||||
> small {
|
||||
height: @switchery-large-size;
|
||||
width: @switchery-large-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Small
|
||||
.switchery-sm {
|
||||
&.checkbox-switchery {
|
||||
margin-bottom: (@switchery-small-size - (@line-height-computed / 2) + 2);
|
||||
|
||||
.switchery {
|
||||
margin-top: (@line-height-computed / 2) - (@switchery-small-size / 2) - 1;
|
||||
}
|
||||
}
|
||||
|
||||
label& {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.switchery {
|
||||
height: @switchery-small-size;
|
||||
width: (@switchery-small-size * 2);
|
||||
|
||||
> small {
|
||||
height: @switchery-small-size;
|
||||
width: @switchery-small-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mini
|
||||
.switchery-xs {
|
||||
&.checkbox-switchery {
|
||||
margin-bottom: (@switchery-mini-size - (@line-height-computed / 2) + 2);
|
||||
|
||||
.switchery {
|
||||
margin-top: (@line-height-computed / 2) - (@switchery-mini-size / 2) - 1;
|
||||
}
|
||||
}
|
||||
|
||||
label& {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.switchery {
|
||||
height: @switchery-mini-size;
|
||||
width: (@switchery-mini-size * 2);
|
||||
|
||||
> small {
|
||||
height: @switchery-mini-size;
|
||||
width: @switchery-mini-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Options
|
||||
// ------------------------------
|
||||
|
||||
// Left position
|
||||
.checkbox-switchery {
|
||||
label,
|
||||
label& {
|
||||
position: relative;
|
||||
padding-left: ((@switchery-base-size * 2) + 12);
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.switchery-lg {
|
||||
label,
|
||||
label& {
|
||||
padding-left: ((@switchery-large-size * 2) + 12);
|
||||
}
|
||||
}
|
||||
|
||||
&.switchery-sm {
|
||||
label,
|
||||
label& {
|
||||
padding-left: ((@switchery-small-size * 2) + 12);
|
||||
}
|
||||
}
|
||||
|
||||
&.switchery-xs {
|
||||
label,
|
||||
label& {
|
||||
padding-left: ((@switchery-mini-size * 2) + 12);
|
||||
}
|
||||
}
|
||||
|
||||
&.checkbox-inline {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Right position
|
||||
.checkbox-switchery {
|
||||
&.checkbox-right {
|
||||
.switchery {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
label,
|
||||
label& {
|
||||
padding-left: 0;
|
||||
padding-right: ((@switchery-base-size * 2) + 12);
|
||||
}
|
||||
|
||||
&.switchery-lg {
|
||||
label,
|
||||
label& {
|
||||
padding-left: 0;
|
||||
padding-right: ((@switchery-large-size * 2) + 12);
|
||||
}
|
||||
}
|
||||
|
||||
&.switchery-sm {
|
||||
label,
|
||||
label& {
|
||||
padding-left: 0;
|
||||
padding-right: ((@switchery-small-size * 2) + 12);
|
||||
}
|
||||
}
|
||||
|
||||
&.switchery-xs {
|
||||
label,
|
||||
label& {
|
||||
padding-left: 0;
|
||||
padding-right: ((@switchery-mini-size * 2) + 12);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Double side switch
|
||||
//
|
||||
|
||||
.switchery-double {
|
||||
.switchery {
|
||||
position: relative;
|
||||
margin-left: @element-horizontal-spacing;
|
||||
margin-right: @element-horizontal-spacing;
|
||||
margin-top: -7px;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
|
||||
// Remove padding
|
||||
&.checkbox-switchery {
|
||||
label,
|
||||
label& {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Large
|
||||
&.switchery-lg .switchery {
|
||||
margin-top: -8px;
|
||||
margin-bottom: -6px;
|
||||
}
|
||||
|
||||
// Small
|
||||
&.switchery-sm .switchery {
|
||||
margin-top: -6px;
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
|
||||
// Mini
|
||||
&.switchery-xs .switchery {
|
||||
margin-top: -5px;
|
||||
margin-bottom: -3px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,440 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Uniform form inputs plugin
|
||||
*
|
||||
* Styles for uniform.min.js - form components styling
|
||||
*
|
||||
* Version: 1.2
|
||||
* Latest update: Aug 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Checkbox
|
||||
// ------------------------------
|
||||
|
||||
// Base
|
||||
.checker {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
|
||||
// Set general size
|
||||
&,
|
||||
span,
|
||||
input {
|
||||
width: @checkbox-size;
|
||||
height: @checkbox-size;
|
||||
}
|
||||
|
||||
// Checkbox setup
|
||||
span {
|
||||
color: @color-slate-700;
|
||||
border: @checkbox-border-width solid @color-slate-500;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
border-radius: @border-radius-small;
|
||||
|
||||
// Checkmark icon
|
||||
&:after {
|
||||
content: "\e600";
|
||||
font-family: 'icomoon';
|
||||
font-size: @icon-font-size;
|
||||
line-height: 1;
|
||||
position: absolute;
|
||||
top: (@checkbox-size - @icon-font-size - (@checkbox-border-width * 2)) / 2;
|
||||
left: (@checkbox-size - @icon-font-size - (@checkbox-border-width * 2)) / 2;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
.opacity(0);
|
||||
}
|
||||
|
||||
// Checked style
|
||||
&.checked {
|
||||
&:after {
|
||||
.opacity(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hide original checkbox
|
||||
input[type=checkbox] {
|
||||
border: none;
|
||||
background: none;
|
||||
display: -moz-inline-box;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
vertical-align: top;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: -(@checkbox-border-width);
|
||||
left: -(@checkbox-border-width);
|
||||
z-index: 2;
|
||||
.opacity(0);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Posiitons
|
||||
//
|
||||
|
||||
// Left checkbox
|
||||
.checkbox &,
|
||||
.checkbox-inline & {
|
||||
position: absolute;
|
||||
top: ((@line-height-computed - @checkbox-size) / 2);
|
||||
left: 0;
|
||||
}
|
||||
|
||||
// Horizontal form correction
|
||||
.form-horizontal .checkbox &,
|
||||
.form-horizontal .checkbox-inline & {
|
||||
top: ((@padding-base-vertical + 1) + (@line-height-computed / 2) - (@checkbox-size / 2));
|
||||
}
|
||||
|
||||
// Right checkbox
|
||||
.checkbox-right & {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// States
|
||||
//
|
||||
|
||||
// Disabled
|
||||
&.disabled {
|
||||
.opacity(0.5);
|
||||
|
||||
// Disable cursor
|
||||
&,
|
||||
input[type=checkbox] {
|
||||
cursor: @cursor-disabled;
|
||||
}
|
||||
|
||||
// When label is clicked
|
||||
.checkbox > label:active &,
|
||||
.checkbox-inline:active & {
|
||||
span:after {
|
||||
.opacity(0);
|
||||
}
|
||||
|
||||
span.checked:after {
|
||||
.opacity(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Custom colors
|
||||
//
|
||||
|
||||
&[class*=border-] {
|
||||
|
||||
// Inherit colors
|
||||
span {
|
||||
border-color: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Update checker colors in dropdown variations
|
||||
.dropdown-menu > .active:not(.disabled),
|
||||
.dropdown-menu[class*=bg-],
|
||||
.page-header-inverse .form-group > .checkbox,
|
||||
.page-header-inverse .form-group > .checkbox-inline,
|
||||
.navbar-inverse .navbar-form .form-group > .checkbox,
|
||||
.navbar-inverse .navbar-form .form-group > .checkbox-inline,
|
||||
.sidebar:not(.sidebar-default) .checkbox,
|
||||
.sidebar:not(.sidebar-default) .checkbox-inline {
|
||||
.checker {
|
||||
span {
|
||||
border-color: #fff;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Radio
|
||||
// ------------------------------
|
||||
|
||||
// Base
|
||||
.choice {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
border-radius: 100%;
|
||||
|
||||
// Set general size
|
||||
&,
|
||||
span,
|
||||
input {
|
||||
width: @checkbox-size;
|
||||
height: @checkbox-size;
|
||||
}
|
||||
|
||||
// Radio setup
|
||||
span {
|
||||
border: @checkbox-border-width solid @color-slate-500;
|
||||
display: -moz-inline-box;
|
||||
display: inline-block;
|
||||
border-radius: 100%;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
||||
// Add colored circle
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: ((@checkbox-size / 2) - @checkbox-border-width - ((@checkbox-size - 10) / 2));
|
||||
left: ((@checkbox-size / 2) - @checkbox-border-width - ((@checkbox-size - 10) / 2));
|
||||
border: ((@checkbox-size - 10) / 2) solid;
|
||||
border-color: inherit;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-radius: 100%;
|
||||
.opacity(0);
|
||||
}
|
||||
|
||||
// Checked style
|
||||
&.checked {
|
||||
&:after {
|
||||
.opacity(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hide radio
|
||||
input[type=radio] {
|
||||
&:extend(.checker input[type=checkbox]);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Posiitons
|
||||
//
|
||||
|
||||
// Left radio
|
||||
.radio &,
|
||||
.radio-inline & {
|
||||
position: absolute;
|
||||
top: ((@line-height-computed - @checkbox-size) / 2);
|
||||
left: 0;
|
||||
}
|
||||
|
||||
// Horizontal form correction
|
||||
.form-horizontal .radio &,
|
||||
.form-horizontal .radio-inline & {
|
||||
top: ((@padding-base-vertical + 1) + (@line-height-computed / 2) - (@checkbox-size / 2));
|
||||
}
|
||||
|
||||
// Right radio
|
||||
.radio-right & {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// States
|
||||
//
|
||||
|
||||
// Disabled
|
||||
&.disabled {
|
||||
.opacity(0.5);
|
||||
|
||||
// Disable cursor
|
||||
&,
|
||||
input[type=radio] {
|
||||
cursor: @cursor-disabled;
|
||||
}
|
||||
|
||||
// When label is clicked
|
||||
.radio > label:active &,
|
||||
.radio-inline:active & {
|
||||
span:after {
|
||||
.opacity(0);
|
||||
}
|
||||
|
||||
span.checked:after {
|
||||
.opacity(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Custom colors
|
||||
//
|
||||
|
||||
&[class*=border-] {
|
||||
span {
|
||||
border-color: inherit;
|
||||
|
||||
&:after {
|
||||
border-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Update checker colors in dropdown variations
|
||||
.dropdown-menu > .active,
|
||||
.dropdown-menu[class*=bg-],
|
||||
.page-header-inverse .form-group > .radio,
|
||||
.page-header-inverse .form-group > .radio-inline,
|
||||
.navbar-inverse .navbar-form .form-group > .radio,
|
||||
.navbar-inverse .navbar-form .form-group > .radio-inline,
|
||||
.sidebar:not(.sidebar-default) .radio,
|
||||
.sidebar:not(.sidebar-default) .radio-inline {
|
||||
.choice {
|
||||
span {
|
||||
border-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// File uploader
|
||||
// ------------------------------
|
||||
|
||||
// Base
|
||||
.uploader {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
display: table;
|
||||
|
||||
// File name text
|
||||
.filename {
|
||||
color: @gray-light;
|
||||
height: @input-height-base;
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
display: table-cell;
|
||||
cursor: default;
|
||||
border: 1px solid @input-border;
|
||||
border-right: 0;
|
||||
background-color: @input-bg;
|
||||
text-align: left;
|
||||
word-break: break-word;
|
||||
.border-left-radius(@input-border-radius);
|
||||
}
|
||||
|
||||
// Action button
|
||||
.action {
|
||||
display: table-cell;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
border-radius: 0;
|
||||
.border-right-radius(@input-border-radius);
|
||||
|
||||
// If normal button
|
||||
&.btn {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover state
|
||||
&:hover,
|
||||
&:focus {
|
||||
.action {
|
||||
.box-shadow(0 0 0 100px fade(#000, 5%) inset);
|
||||
}
|
||||
.action.btn-default {
|
||||
.box-shadow(0 0 0 100px fade(#000, 1%) inset);
|
||||
}
|
||||
}
|
||||
|
||||
// Active state
|
||||
&:active {
|
||||
.action {
|
||||
.box-shadow(0 0 0 100px fade(#000, 10%) inset);
|
||||
}
|
||||
.action.btn-default {
|
||||
.box-shadow(0 0 0 100px fade(#000, 3%) inset);
|
||||
}
|
||||
}
|
||||
|
||||
// Hide file input
|
||||
input[type=file] {
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: @input-height-base;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
.opacity(0);
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&.disabled {
|
||||
.filename {
|
||||
background-color: @input-bg-disabled;
|
||||
cursor: @cursor-disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Sizing
|
||||
//
|
||||
|
||||
// Large
|
||||
.uploader-lg {
|
||||
input[type=file],
|
||||
.action,
|
||||
.filename {
|
||||
height: @input-height-large;
|
||||
}
|
||||
|
||||
.filename {
|
||||
padding: @padding-large-vertical @padding-large-horizontal;
|
||||
font-size: @font-size-large;
|
||||
line-height: @line-height-large;
|
||||
}
|
||||
}
|
||||
|
||||
// Small
|
||||
.uploader-sm {
|
||||
input[type=file],
|
||||
.action,
|
||||
.filename {
|
||||
height: @input-height-small;
|
||||
}
|
||||
|
||||
.filename {
|
||||
padding: @padding-small-vertical @padding-small-horizontal;
|
||||
font-size: @font-size-small;
|
||||
line-height: @line-height-small;
|
||||
}
|
||||
}
|
||||
|
||||
// Mini
|
||||
.uploader-xs {
|
||||
input[type=file],
|
||||
.action,
|
||||
.filename {
|
||||
height: @input-height-mini;
|
||||
}
|
||||
|
||||
.filename {
|
||||
padding: @padding-xs-vertical @padding-xs-horizontal;
|
||||
font-size: @font-size-small;
|
||||
line-height: @line-height-small;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Ace code editor
|
||||
*
|
||||
* An embeddable code editor written in JavaScript
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: May 25, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Base
|
||||
.ace_editor {
|
||||
height: 400px;
|
||||
position: relative;
|
||||
}
|
||||
@@ -0,0 +1,605 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Summernote editor
|
||||
*
|
||||
* Super simple WYSIWYG Editor for Bootstrap framework
|
||||
*
|
||||
* Version: 1.3
|
||||
* Latest update: Aug 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Summernote uses its own icons
|
||||
// ----------------------------------------
|
||||
|
||||
// Load font
|
||||
@font-face{
|
||||
font-family:"summernote";
|
||||
font-style:normal;
|
||||
font-weight:normal;
|
||||
src:url("@{summernote-font-path}/summernote.eot?ad8d7e2d177d2473aecd9b35d16211fb");
|
||||
src:url("@{summernote-font-path}/summernote.eot?#iefix") format("embedded-opentype"),
|
||||
url("@{summernote-font-path}/summernote.woff?ad8d7e2d177d2473aecd9b35d16211fb") format("woff"),
|
||||
url("@{summernote-font-path}/summernote.ttf?ad8d7e2d177d2473aecd9b35d16211fb") format("truetype")
|
||||
}
|
||||
|
||||
// Icon styles
|
||||
[class^="note-icon-"]:before,
|
||||
[class*=" note-icon-"]:before {
|
||||
display: inline-block;
|
||||
font: normal normal normal 14px summernote;
|
||||
font-size: inherit;
|
||||
text-decoration: inherit;
|
||||
text-rendering: auto;
|
||||
text-transform: none;
|
||||
vertical-align: middle;
|
||||
speak: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
}
|
||||
|
||||
// Icons
|
||||
.note-icon-align-center:before{content:"\f101"}
|
||||
.note-icon-align-indent:before{content:"\f102"}
|
||||
.note-icon-align-justify:before{content:"\f103"}
|
||||
.note-icon-align-left:before{content:"\f104"}
|
||||
.note-icon-align-outdent:before{content:"\f105"}
|
||||
.note-icon-align-right:before{content:"\f106"}
|
||||
.note-icon-align:before{content:"\f107"}
|
||||
.note-icon-arrows-alt:before{content:"\f108"}
|
||||
.note-icon-bold:before{content:"\f109"}
|
||||
.note-icon-caret:before{content:"\f10a";}
|
||||
.note-icon-chain-broken:before{content:"\f10b"}
|
||||
.note-icon-circle:before{content:"\f10c"}
|
||||
.note-icon-close:before{content:"\f10d"}
|
||||
.note-icon-code:before{content:"\f10e"}
|
||||
.note-icon-eraser:before{content:"\f10f"}
|
||||
.note-icon-font:before{content:"\f110"}
|
||||
.note-icon-frame:before{content:"\f111"}
|
||||
.note-icon-italic:before{content:"\f112"}
|
||||
.note-icon-link:before{content:"\f113"}
|
||||
.note-icon-magic:before{content:"\f114"}
|
||||
.note-icon-menu-check:before{content:"\f115"}
|
||||
.note-icon-minus:before{content:"\f116"}
|
||||
.note-icon-orderedlist:before{content:"\f117"}
|
||||
.note-icon-pencil:before{content:"\f118"}
|
||||
.note-icon-picture:before{content:"\f119"}
|
||||
.note-icon-question:before{content:"\f11a"}
|
||||
.note-icon-redo:before{content:"\f11b"}
|
||||
.note-icon-special-character:before{content:"\f11c"}
|
||||
.note-icon-square:before{content:"\f11d"}
|
||||
.note-icon-strikethrough:before{content:"\f11e"}
|
||||
.note-icon-subscript:before{content:"\f11f"}
|
||||
.note-icon-summernote:before{content:"\f120"}
|
||||
.note-icon-superscript:before{content:"\f121"}
|
||||
.note-icon-table:before{content:"\f122"}
|
||||
.note-icon-text-height:before{content:"\f123"}
|
||||
.note-icon-trash:before{content:"\f124"}
|
||||
.note-icon-underline:before{content:"\f125"}
|
||||
.note-icon-undo:before{content:"\f126"}
|
||||
.note-icon-unorderedlist:before{content:"\f127"}
|
||||
.note-icon-video:before{content:"\f128"}
|
||||
|
||||
|
||||
|
||||
// Core
|
||||
// ----------------------------------------
|
||||
|
||||
// Editor
|
||||
.note-editor {
|
||||
border: 1px solid @panel-default-border;
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
// Droppable
|
||||
.note-dropzone {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
display: none;
|
||||
color: @brand-primary;
|
||||
background-color: #fff;
|
||||
border: 2px dashed @brand-primary;
|
||||
pointer-events: none;
|
||||
.opacity(0.95);
|
||||
|
||||
// Message
|
||||
.note-dropzone-message {
|
||||
display: table-cell;
|
||||
font-size: @font-size-h1;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Hover state
|
||||
&.hover {
|
||||
color: @brand-primary;
|
||||
border: 2px dashed @brand-primary;
|
||||
}
|
||||
}
|
||||
&.dragover .note-dropzone {
|
||||
display: table;
|
||||
}
|
||||
|
||||
// Toolbar
|
||||
.note-toolbar {
|
||||
background-color: @panel-footer-bg;
|
||||
border-bottom: 1px solid @panel-default-border;
|
||||
padding: @content-padding-base @content-padding-large;
|
||||
padding-top: 0;
|
||||
margin: 0;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
// Fullscreen mode
|
||||
&.fullscreen {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1050;
|
||||
width: 100%;
|
||||
|
||||
// Editable
|
||||
.note-editable {
|
||||
background-color: @panel-bg;
|
||||
}
|
||||
|
||||
// Hide resizer
|
||||
.note-resizebar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Codeview mode
|
||||
&.codeview {
|
||||
.note-editable {
|
||||
display: none;
|
||||
}
|
||||
.note-codable {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Status bar
|
||||
.note-statusbar {
|
||||
background-color: @panel-footer-bg;
|
||||
|
||||
// Resize handle
|
||||
.note-resizebar {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
cursor: s-resize;
|
||||
border-top: 1px solid @panel-inner-border;
|
||||
|
||||
// Icon bar
|
||||
.note-icon-bar {
|
||||
width: 20px;
|
||||
margin: 1px auto;
|
||||
border-top: 1px solid darken(@panel-inner-border, 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Editable area
|
||||
.note-editable {
|
||||
padding: @content-padding-large;
|
||||
overflow: auto;
|
||||
outline: 0;
|
||||
min-height: 150px;
|
||||
|
||||
&[contenteditable="false"] {
|
||||
background-color: @gray-lighter;
|
||||
}
|
||||
}
|
||||
|
||||
// Code view
|
||||
.note-codable {
|
||||
display: none;
|
||||
width: 100%;
|
||||
padding: @content-padding-large;
|
||||
margin-bottom: 0;
|
||||
font-family: Menlo,Monaco, monospace, sans-serif;
|
||||
color: #fff;
|
||||
background-color: @gray-dark;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
resize: none;
|
||||
.box-shadow(none);
|
||||
}
|
||||
|
||||
// Modal title
|
||||
.modal-title {
|
||||
font-size: @font-size-h5;
|
||||
}
|
||||
}
|
||||
|
||||
// Air mode
|
||||
.note-air-editor {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
// Popover
|
||||
.note-popover {
|
||||
max-width: none;
|
||||
|
||||
// Content
|
||||
.popover-content {
|
||||
padding: @content-padding-base;
|
||||
padding-top: 0;
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
> .btn-group:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Popover arrow
|
||||
.arrow {
|
||||
left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Popover/toolbar elements
|
||||
// ----------------------------------------
|
||||
|
||||
.note-popover .popover-content,
|
||||
.note-toolbar {
|
||||
|
||||
// Buttons
|
||||
> .note-btn-group {
|
||||
margin-top: @content-padding-base;
|
||||
margin-right: @content-padding-base;
|
||||
margin-left: 0;
|
||||
|
||||
// Icon caret
|
||||
.note-icon-caret {
|
||||
&:before {
|
||||
width: 9px;
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// Caret spacing
|
||||
i + .note-icon-caret {
|
||||
margin-left: 2px;
|
||||
margin-right: -5px;
|
||||
}
|
||||
}
|
||||
|
||||
// Style
|
||||
.note-style {
|
||||
h1, h2, h3, h4, h5, h6, blockquote {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Table
|
||||
.note-table {
|
||||
min-width: 0;
|
||||
|
||||
&.dropdown-menu {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
// Dimension picker
|
||||
.note-dimension-picker {
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
// Mouse catcher
|
||||
.note-dimension-picker-mousecatcher {
|
||||
position: absolute!important;
|
||||
z-index: 3;
|
||||
width: 10em;
|
||||
height: 10em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Unhighlighted
|
||||
.note-dimension-picker-unhighlighted {
|
||||
position: relative!important;
|
||||
z-index: 1;
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAgMAAAAroGbEAAAACVBMVEUAAIj4+Pjp6ekKlAqjAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfYAR0BKhmnaJzPAAAAG0lEQVQI12NgAAOtVatWMTCohoaGUY+EmIkEAEruEzK2J7tvAAAAAElFTkSuQmCC') repeat;
|
||||
}
|
||||
|
||||
// Highlighted
|
||||
.note-dimension-picker-highlighted {
|
||||
position: absolute!important;
|
||||
z-index: 2;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAgMAAAAroGbEAAAACVBMVEUAAIjd6vvD2f9LKLW+AAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfYAR0BKwNDEVT0AAAAG0lEQVQI12NgAAOtVatWMTCohoaGUY+EmIkEAEruEzK2J7tvAAAAAElFTkSuQmCC') repeat;
|
||||
}
|
||||
}
|
||||
|
||||
// Center the text
|
||||
.note-dimension-display {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
// Color picker
|
||||
.note-color {
|
||||
.dropdown-menu {
|
||||
min-width: 330px;
|
||||
|
||||
// Buttons
|
||||
.btn-group {
|
||||
margin: @padding-base-vertical @padding-base-horizontal;
|
||||
|
||||
// Title
|
||||
.note-palette-title {
|
||||
margin-bottom: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
// Rreset colors
|
||||
.note-color-reset {
|
||||
padding: @padding-small-vertical @padding-small-horizontal;
|
||||
cursor: pointer;
|
||||
background-color: @btn-default-bg;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Paragraph
|
||||
.note-para {
|
||||
.dropdown-menu {
|
||||
min-width: 290px;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
|
||||
> div {
|
||||
&:first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown menu
|
||||
.dropdown-menu {
|
||||
min-width: 90px;
|
||||
|
||||
&.right {
|
||||
right: 0;
|
||||
left: auto;
|
||||
|
||||
&:before {
|
||||
right: 9px;
|
||||
left: auto!important;
|
||||
}
|
||||
|
||||
&:after {
|
||||
right: 10px;
|
||||
left: auto!important;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
a {
|
||||
i {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.checked {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Color palette
|
||||
.note-color-palette {
|
||||
line-height: 1;
|
||||
|
||||
div {
|
||||
.note-color-btn {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 1px solid #fff;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid @gray-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Content
|
||||
.note-popover .popover-content {
|
||||
> .btn-group {
|
||||
margin-top: @content-padding-base;
|
||||
margin-right: @content-padding-base;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Dialog
|
||||
// ----------------------------------------
|
||||
|
||||
.note-dialog {
|
||||
> div {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Dropzone
|
||||
.note-image-dialog .mote-dropzone {
|
||||
min-height: 100px;
|
||||
margin-bottom: 10px;
|
||||
font-size: @font-size-h1;
|
||||
color: @gray-lighter;
|
||||
text-align: center;
|
||||
border: 4px dashed @gray-lighter;
|
||||
}
|
||||
|
||||
// Help dialog
|
||||
.note-help-dialog {
|
||||
color: #ccc;
|
||||
background-color: transparent;
|
||||
background-color: @gray-dark!important;
|
||||
border: 0;
|
||||
.opacity(0.9);
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// Title
|
||||
.title {
|
||||
padding-bottom: @padding-base-vertical;
|
||||
font-size: @font-size-h6;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
|
||||
// Modal content
|
||||
.modal-content {
|
||||
background-color: transparent;
|
||||
border: 1px solid #fff;
|
||||
border-radius: @border-radius-base;
|
||||
.box-shadow(none);
|
||||
}
|
||||
|
||||
// Close button
|
||||
.modal-close {
|
||||
color: @gray-light;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Shortcut layout
|
||||
.note-shortcut-layout {
|
||||
width: 100%;
|
||||
|
||||
td {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
// Shortcut
|
||||
.note-shortcut {
|
||||
margin-top: 8px;
|
||||
|
||||
th {
|
||||
color: @gray-lighter;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
td:first-child {
|
||||
min-width: 110px;
|
||||
padding-right: 10px;
|
||||
font-family: "Courier New";
|
||||
color: @gray-lighter;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Display label
|
||||
.note-group-select-from-files {
|
||||
label {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Handle
|
||||
// ----------------------------------------
|
||||
|
||||
.note-handle {
|
||||
position: relative;
|
||||
|
||||
// Selection
|
||||
.note-control-selection {
|
||||
position: absolute;
|
||||
display: none;
|
||||
border: 1px solid @gray-dark;
|
||||
z-index: 10;
|
||||
|
||||
> div {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
// Background
|
||||
.note-control-selection-bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: @gray-dark;
|
||||
.opacity(0.3);
|
||||
}
|
||||
|
||||
// Control handle
|
||||
.note-control-handle,
|
||||
.note-control-holder,
|
||||
.note-control-sizing {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border: 1px solid @gray-dark;
|
||||
}
|
||||
.note-control-sizing {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
// Control direction
|
||||
.note-control-nw {
|
||||
top: -5px;
|
||||
left: -5px;
|
||||
border-right: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
.note-control-ne {
|
||||
top: -5px;
|
||||
right: -5px;
|
||||
border-bottom: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
.note-control-sw {
|
||||
bottom: -5px;
|
||||
left: -5px;
|
||||
border-top: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
.note-control-se {
|
||||
right: -5px;
|
||||
bottom: -5px;
|
||||
cursor: se-resize;
|
||||
}
|
||||
|
||||
// Selection info
|
||||
.note-control-selection-info {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 5px;
|
||||
margin: 5px;
|
||||
color: #fff;
|
||||
background-color: @gray-dark;
|
||||
border-radius:@border-radius-base;
|
||||
.opacity(0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,203 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # WYSIHTML5 editor
|
||||
*
|
||||
* An open source rich text editor based on HTML5 technology
|
||||
*
|
||||
* Version: 1.2
|
||||
* Latest update: Jun 8, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Core
|
||||
// ----------------------------------------
|
||||
|
||||
// Base
|
||||
.wysihtml5 {
|
||||
max-height: 450px;
|
||||
resize: vertical;
|
||||
background-color: #fff;
|
||||
overflow: auto;
|
||||
padding: @content-padding-large;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
// Editor area
|
||||
.wysihtml5-editor {
|
||||
border-width: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Container
|
||||
.wysihtml5-sandbox {
|
||||
width: 100%!important;
|
||||
}
|
||||
|
||||
// Modals
|
||||
.bootstrap-wysihtml5-insert-link-modal,
|
||||
.bootstrap-wysihtml5-insert-image-modal {
|
||||
.modal-dialog {
|
||||
width: 566px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Toolbar
|
||||
// ----------------------------------------
|
||||
|
||||
// Base
|
||||
.wysihtml5-toolbar {
|
||||
margin: 0;
|
||||
padding: @content-padding-base @content-padding-large;
|
||||
padding-bottom: 0;
|
||||
display: block;
|
||||
background-color: @panel-footer-bg;
|
||||
border: 1px solid @panel-default-border;
|
||||
border-bottom: 0;
|
||||
.border-top-radius(@border-radius-base);
|
||||
|
||||
// List item
|
||||
> li {
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
margin: 0 @content-padding-base @content-padding-base 0;
|
||||
}
|
||||
|
||||
// Dropdown menu
|
||||
.dropdown-menu {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
|
||||
// Color select
|
||||
.color-select {
|
||||
> li > a {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hide dropdown if disabled
|
||||
.wysihtml5-commands-disabled & {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown icon/caret
|
||||
.dropdown-toggle {
|
||||
> [class*=icon-] {
|
||||
margin-right: @element-horizontal-spacing;
|
||||
}
|
||||
|
||||
// Caret
|
||||
.caret {
|
||||
margin-left: @element-horizontal-spacing;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Link styles
|
||||
a {
|
||||
&[data-wysihtml5-command=bold] {
|
||||
font-weight: bold;
|
||||
}
|
||||
&[data-wysihtml5-command=italic] {
|
||||
font-style: italic;
|
||||
}
|
||||
&[data-wysihtml5-command=underline] {
|
||||
text-decoration: underline;
|
||||
}
|
||||
&.btn.wysihtml5-command-active {
|
||||
.box-shadow(inset 0 1px 2px fade(#000, 10%));
|
||||
}
|
||||
&.wysihtml5-colors-title {
|
||||
padding-left: (@icon-font-size + (@padding-base-horizontal * 2));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Colors
|
||||
//
|
||||
|
||||
// Color indicator
|
||||
.wysihtml5-colors {
|
||||
display: block;
|
||||
width: @icon-font-size;
|
||||
height: @icon-font-size;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: @padding-base-horizontal;
|
||||
top: (((@padding-base-vertical + 1) * 2) + @line-height-computed - @icon-font-size) / 2;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
// Color commands
|
||||
div[data-wysihtml5-command-value="black"] { background: black !important }
|
||||
div[data-wysihtml5-command-value="silver"] { background: silver !important }
|
||||
div[data-wysihtml5-command-value="gray"] { background: gray !important }
|
||||
div[data-wysihtml5-command-value="maroon"] { background: maroon !important }
|
||||
div[data-wysihtml5-command-value="red"] { background: red !important }
|
||||
div[data-wysihtml5-command-value="purple"] { background: purple !important }
|
||||
div[data-wysihtml5-command-value="green"] { background: green !important }
|
||||
div[data-wysihtml5-command-value="olive"] { background: olive !important }
|
||||
div[data-wysihtml5-command-value="navy"] { background: navy !important }
|
||||
div[data-wysihtml5-command-value="blue"] { background: blue !important }
|
||||
div[data-wysihtml5-command-value="orange"] { background: orange !important }
|
||||
}
|
||||
|
||||
// Define colors
|
||||
.wysiwyg-color-black {
|
||||
color: black;
|
||||
}
|
||||
.wysiwyg-color-silver {
|
||||
color: silver;
|
||||
}
|
||||
.wysiwyg-color-gray {
|
||||
color: gray;
|
||||
}
|
||||
.wysiwyg-color-white {
|
||||
color: white;
|
||||
}
|
||||
.wysiwyg-color-maroon {
|
||||
color: maroon;
|
||||
}
|
||||
.wysiwyg-color-red {
|
||||
color: red;
|
||||
}
|
||||
.wysiwyg-color-purple {
|
||||
color: purple;
|
||||
}
|
||||
.wysiwyg-color-fuchsia {
|
||||
color: fuchsia;
|
||||
}
|
||||
.wysiwyg-color-green {
|
||||
color: green;
|
||||
}
|
||||
.wysiwyg-color-lime {
|
||||
color: lime;
|
||||
}
|
||||
.wysiwyg-color-olive {
|
||||
color: olive;
|
||||
}
|
||||
.wysiwyg-color-yellow {
|
||||
color: yellow;
|
||||
}
|
||||
.wysiwyg-color-navy {
|
||||
color: navy;
|
||||
}
|
||||
.wysiwyg-color-blue {
|
||||
color: blue;
|
||||
}
|
||||
.wysiwyg-color-teal {
|
||||
color: teal;
|
||||
}
|
||||
.wysiwyg-color-aqua {
|
||||
color: aqua;
|
||||
}
|
||||
.wysiwyg-color-orange {
|
||||
color: orange;
|
||||
}
|
||||
@@ -0,0 +1,393 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Alpaca forms
|
||||
*
|
||||
* Alpaca provides the easiest way to generate interactive HTML5 forms for web applications
|
||||
*
|
||||
* Version: 1.1
|
||||
* Latest update: Jul 4, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Core
|
||||
// ------------------------------
|
||||
|
||||
// Added to outer field elements to hide them
|
||||
.alpaca-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Make multiselect full width
|
||||
.alpaca-field-select .multiselect-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// If input has error
|
||||
.has-error {
|
||||
|
||||
// Override text color if menu has error
|
||||
.multiselect-container > .active .checkbox {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// Change background color in active items
|
||||
.btn-group.open .multiselect.btn,
|
||||
.multiselect.btn-default:active {
|
||||
color: @color-warning-800;
|
||||
border-color: @color-warning-800;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Disabled fields
|
||||
.alpaca-disabled {
|
||||
.checkbox label,
|
||||
.checkbox .switchery,
|
||||
.radio label,
|
||||
.radio .switchery {
|
||||
cursor: @cursor-disabled;
|
||||
color: @text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
// Added to fields that have run through validation and are invalid
|
||||
.alpaca-invalid {
|
||||
.form-control {
|
||||
color: @color-warning-800;
|
||||
}
|
||||
}
|
||||
|
||||
// General purpose HTML clear
|
||||
.alpaca-clear {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
// Right alignment
|
||||
.alpaca-float-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
||||
// Icons
|
||||
// ------------------------------
|
||||
|
||||
// Override glyphicon icons
|
||||
.alpaca-field {
|
||||
.glyphicon {
|
||||
font-family: 'icomoon';
|
||||
font-size: @icon-font-size;
|
||||
vertical-align: middle;
|
||||
top: -1px;
|
||||
display: inline-block;
|
||||
margin-right: @element-horizontal-spacing
|
||||
}
|
||||
|
||||
// Info icon
|
||||
.glyphicon-info-sign:before {
|
||||
content: '\e9ba';
|
||||
}
|
||||
|
||||
// Error icon
|
||||
&.has-error .glyphicon-info-sign:before,
|
||||
.glyphicon-exclamation-sign:before {
|
||||
content: '\ed63';
|
||||
}
|
||||
}
|
||||
|
||||
// Required asterisk
|
||||
.alpaca-icon-required {
|
||||
font-family: @font-family-base;
|
||||
float: right;
|
||||
margin-right: 0;
|
||||
margin-left: 5px;
|
||||
|
||||
&:before {
|
||||
content: '*';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Editor fields
|
||||
// ------------------------------
|
||||
|
||||
// Base
|
||||
.alpaca-controlfield-editor {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
border: 1px #ccc solid;
|
||||
|
||||
// Element
|
||||
.control-field-editor-el {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Ace editor
|
||||
// ------------------------------
|
||||
|
||||
.ace_editor {
|
||||
border: 1px solid rgb(204, 204, 204);
|
||||
}
|
||||
|
||||
|
||||
// CKEditor
|
||||
// ------------------------------
|
||||
|
||||
.alpaca-field-ckeditor.alpaca-invalid > .cke {
|
||||
border-color: @color-warning-800;
|
||||
}
|
||||
|
||||
|
||||
// Option tree
|
||||
// ------------------------------
|
||||
|
||||
.alpaca-field-optiontree {
|
||||
|
||||
// Add left spacing to input field
|
||||
.optiontree + .form-control {
|
||||
margin-left: @content-padding-small;
|
||||
}
|
||||
|
||||
// Horizontal layout
|
||||
&.optiontree-horizontal {
|
||||
|
||||
// Tree
|
||||
.optiontree {
|
||||
display: inline-block;
|
||||
|
||||
// Selector
|
||||
.optiontree-selector {
|
||||
display: inline-block;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
|
||||
// Hide empty container
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Extra horizontal spacing
|
||||
+ .optiontree-selector {
|
||||
margin-left: @content-padding-small;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Input
|
||||
input {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
// Label
|
||||
label {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Controls
|
||||
// ------------------------------
|
||||
|
||||
// Disabled mode
|
||||
.alpaca-field-radio {
|
||||
&.disabled {
|
||||
.alpaca-control.radio {
|
||||
color: grey;
|
||||
|
||||
label {
|
||||
cursor: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Controls
|
||||
.alpaca-control {
|
||||
&.radio {
|
||||
min-height: inherit;
|
||||
height: inherit;
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Multiselect
|
||||
//
|
||||
|
||||
// If error
|
||||
.has-error .multiselect {
|
||||
border-color: @color-warning-800;
|
||||
color: @color-warning-800;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Labels
|
||||
//
|
||||
.alpaca-container-label {
|
||||
margin-top: @line-height-computed;
|
||||
|
||||
legend& {
|
||||
margin-top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Toolbar
|
||||
//
|
||||
|
||||
// Base
|
||||
.alpaca-array-toolbar {
|
||||
margin-bottom: (@line-height-computed / 2);
|
||||
}
|
||||
|
||||
// Action bar
|
||||
.alpaca-array-actionbar {
|
||||
overflow: hidden;
|
||||
|
||||
// Top
|
||||
&.alpaca-array-actionbar-top {
|
||||
padding-bottom: (@line-height-computed / 2);
|
||||
}
|
||||
|
||||
// Bottom
|
||||
&.alpaca-array-actionbar-bottom {
|
||||
padding-top: (@line-height-computed / 2);
|
||||
}
|
||||
|
||||
// Stretch
|
||||
&,
|
||||
&.btn-group {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Field objects
|
||||
.alpaca-field-object,
|
||||
.alpaca-field-array {
|
||||
border: 1px #eee solid;
|
||||
border-radius: @border-radius-base;
|
||||
padding: @content-padding-small;
|
||||
|
||||
// Remove border
|
||||
.alpaca-top,
|
||||
.alpaca-top .alpaca-container {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
.alpaca-container {
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
// Heading
|
||||
.alpaca-display h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Containers
|
||||
//
|
||||
|
||||
// Add top spacing
|
||||
.alpaca-control-buttons-container {
|
||||
margin-top: (@line-height-computed / 2);
|
||||
}
|
||||
|
||||
// Remove border from field object
|
||||
.alpaca-container-item > .alpaca-container > .alpaca-field-object {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Buttons container in form
|
||||
.alpaca-form-buttons-container {
|
||||
margin-top: @line-height-computed;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
// Remove horizontal spacing from form group
|
||||
.alpaca-container > .form-group {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
// Hidden field
|
||||
.alpaca-field-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// First item
|
||||
.alpaca-container-item:not(:first-child) {
|
||||
margin-top: (@line-height-computed / 2);
|
||||
}
|
||||
|
||||
// Last item
|
||||
.alpaca-container .alpaca-container-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Select
|
||||
.alpaca-field-select .btn-group {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Fields
|
||||
//
|
||||
|
||||
.alpaca-field {
|
||||
|
||||
// Upload field
|
||||
&.alpaca-field-upload {
|
||||
|
||||
// Active zone
|
||||
.fileupload-active-zone {
|
||||
margin-top: 50px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
// Download
|
||||
.template-download TD.error,
|
||||
.template-upload TD.error {
|
||||
color: @color-warning-800;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
// Address
|
||||
&.alpaca-field-address .alpaca-field-address-mapcanvas {
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
// Image
|
||||
&.alpaca-field-image .alpaca-image-display {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Max length
|
||||
//
|
||||
|
||||
.alpaca-field-text-max-length-indicator {
|
||||
font-size: @font-size-small;
|
||||
margin-top: @padding-base-vertical;
|
||||
margin-bottom: @padding-base-vertical;
|
||||
}
|
||||
@@ -0,0 +1,328 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # X-editable
|
||||
*
|
||||
* In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
|
||||
*
|
||||
* Version: 1.1
|
||||
* Latest update: Mar 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Core
|
||||
// ------------------------------
|
||||
|
||||
// Base
|
||||
.editable {
|
||||
background-color: transparent;
|
||||
|
||||
.form-horizontal & {
|
||||
padding-top: (@padding-base-vertical + 1);
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
// Pre wrapped content
|
||||
.editable-pre-wrapped {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
|
||||
// Layout
|
||||
// ------------------------------
|
||||
|
||||
// Form
|
||||
.editableform {
|
||||
|
||||
// Remove bottom spacing
|
||||
.form-group:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Set min width to the input field
|
||||
.form-control {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
// Checkbox, radio
|
||||
.checkbox,
|
||||
.radio {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
> div {
|
||||
margin-top: (@padding-base-vertical + 1);
|
||||
margin-bottom: (@padding-base-vertical + 1);
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
.editable-buttons {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-left: @element-horizontal-spacing;
|
||||
|
||||
&.editable-buttons-bottom {
|
||||
display: block;
|
||||
margin-top: @line-height-computed;
|
||||
margin-left: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.editable-cancel {
|
||||
margin-left: @element-horizontal-spacing;
|
||||
}
|
||||
}
|
||||
|
||||
// Editable inputs
|
||||
.editable-input {
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
white-space: normal;
|
||||
|
||||
// Remove bottom margin from help block
|
||||
.help-block {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Set fixed width to input group
|
||||
.input-group {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
// Elastic textarea
|
||||
.elastic {
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
// Loading icon
|
||||
.editableform-loading {
|
||||
width: @icon-font-size;
|
||||
height: @icon-font-size;
|
||||
margin: auto;
|
||||
|
||||
// Icon
|
||||
&:after {
|
||||
content: '\eb55';
|
||||
font-family: 'icomoon';
|
||||
font-size: @icon-font-size;
|
||||
display: block;
|
||||
line-height: 1;
|
||||
margin: auto;
|
||||
width: @icon-font-size;
|
||||
height: @icon-font-size;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
.animation(rotation 1s ease infinite);
|
||||
}
|
||||
}
|
||||
|
||||
// Errors
|
||||
.editable-error {
|
||||
color: @brand-danger;
|
||||
}
|
||||
.editable-error-block {
|
||||
max-width: 300px;
|
||||
margin: @padding-base-vertical 0 0 0;
|
||||
width: auto;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
// Transition
|
||||
.editable-bg-transition {
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
.transition(background-color 0.2s ease-out);
|
||||
}
|
||||
|
||||
|
||||
// Clear buttons
|
||||
// ------------------------------
|
||||
|
||||
// Date inputs clear button
|
||||
.editable-clear {
|
||||
clear: both;
|
||||
text-decoration: none;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
// Clear input button
|
||||
.editable-clear-x {
|
||||
position: absolute;
|
||||
right: @padding-base-horizontal - 3;
|
||||
top: ((@input-height-base - @icon-font-size) / 2);
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
z-index: 100;
|
||||
.opacity(0.6);
|
||||
|
||||
&:hover {
|
||||
.opacity(1);
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '\ed6b';
|
||||
font-family: 'icomoon';
|
||||
display: block;
|
||||
font-size: @icon-font-size;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Links
|
||||
// ------------------------------
|
||||
|
||||
// Link
|
||||
.editable-click {
|
||||
&,
|
||||
a& {
|
||||
&,
|
||||
&:hover {
|
||||
border-bottom: 1px dashed @link-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.editable-disabled {
|
||||
&,
|
||||
a& {
|
||||
&,
|
||||
&:hover {
|
||||
color: @text-muted;
|
||||
cursor: default;
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-top: 1px;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
// Empty link
|
||||
.editable-empty {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
font-style: italic;
|
||||
color: @brand-danger;
|
||||
}
|
||||
|
||||
a& {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-bottom-color: @brand-danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Input types
|
||||
// ------------------------------
|
||||
|
||||
// Combodate
|
||||
.combodate {
|
||||
white-space: nowrap;
|
||||
|
||||
.day,
|
||||
.year,
|
||||
.hour,
|
||||
.minute {
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
// Daterange
|
||||
.input-daterange {
|
||||
input {
|
||||
text-align: center;
|
||||
|
||||
&:first-child {
|
||||
.border-left-radius(@border-radius-base);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.border-right-radius(@border-radius-base);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Address
|
||||
.editable-address {
|
||||
display: block;
|
||||
|
||||
> label > span {
|
||||
width: 70px;
|
||||
display: inline-block;
|
||||
margin-bottom: @padding-base-vertical;
|
||||
}
|
||||
}
|
||||
|
||||
// Date
|
||||
.editable-date {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
// Checklist
|
||||
.editable-checklist label {
|
||||
white-space: nowrap;
|
||||
|
||||
> input[type="checkbox"] {
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// WYSIHTML5 editor
|
||||
.editable-wysihtml5 {
|
||||
width: 566px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Editable modes
|
||||
// ------------------------------
|
||||
|
||||
// Editable modes
|
||||
.editable-container {
|
||||
&.editable-popup {
|
||||
max-width: none !important;
|
||||
}
|
||||
|
||||
&.editable-inline {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: auto;
|
||||
|
||||
.editableform-loading {
|
||||
background-position: left 5px;
|
||||
}
|
||||
|
||||
.add-on .icon-th {
|
||||
margin-top: 3px;
|
||||
margin-left: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&.popover {
|
||||
width: auto;
|
||||
min-width: 200px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Passy
|
||||
*
|
||||
* Styles for passy.min.js - password length checker and password generator
|
||||
*
|
||||
* Version: 1.1
|
||||
* Latest update: Mar 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Base
|
||||
.visual-password-indicator {
|
||||
display: inline-block;
|
||||
background-color: @gray-light;
|
||||
width: 40px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
// Inside input group addon
|
||||
.password-indicator-group {
|
||||
min-width: 80px;
|
||||
.transition(all 0.2s ease-in-out);
|
||||
}
|
||||
|
||||
// Absolute positioned label
|
||||
.label-indicator-absolute {
|
||||
position: relative;
|
||||
|
||||
.password-indicator-label-absolute {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -(@line-height-computed / 2);
|
||||
right: @padding-base-vertical;
|
||||
.transition(all 0.2s ease-in-out);
|
||||
}
|
||||
|
||||
.form-horizontal & {
|
||||
.label {
|
||||
right: (@grid-gutter-width + @padding-base-vertical);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Twiter Typeahead
|
||||
*
|
||||
* Styles for typeahead.bundle.min.js - input suggestion engine
|
||||
*
|
||||
* Version: 1.3
|
||||
* Latest update: Jul 4, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Core
|
||||
// ------------------------------
|
||||
|
||||
.twitter-typeahead {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.typeahead,
|
||||
.tt-query,
|
||||
.tt-hint {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
// Input field hint
|
||||
.tt-hint {
|
||||
color: @input-color-placeholder;
|
||||
}
|
||||
|
||||
|
||||
// Menu
|
||||
// ------------------------------
|
||||
|
||||
// Dropdown menu
|
||||
.tt-menu {
|
||||
width: 100%;
|
||||
margin-top: 1px;
|
||||
min-width: 180px;
|
||||
padding: @list-spacing 0;
|
||||
background-color: @dropdown-bg;
|
||||
border: 1px solid @dropdown-border;
|
||||
border-radius: @border-radius-base;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
.box-shadow(0 1px 3px fade(#000, 10%));
|
||||
|
||||
.typeahead-scrollable & {
|
||||
max-height: 250px;
|
||||
}
|
||||
|
||||
// RTL
|
||||
.typeahead-rtl & {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
// Menu item
|
||||
.tt-suggestion {
|
||||
padding: (@padding-base-vertical + 1) @content-padding-base;
|
||||
cursor: pointer;
|
||||
|
||||
// Hover state bg color
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.tt-cursor {
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
}
|
||||
|
||||
// Double side padding in groups
|
||||
.tt-dataset-group & {
|
||||
padding-left: (@padding-base-horizontal * 2);
|
||||
padding-right: (@padding-base-horizontal * 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Heading
|
||||
.tt-heading {
|
||||
font-size: @font-size-mini;
|
||||
line-height: @line-height-mini;
|
||||
padding: (@padding-base-vertical + 1) @content-padding-base;
|
||||
text-transform: uppercase;
|
||||
display: block;
|
||||
font-weight: 700;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
// Add padding for empty message
|
||||
.typeahead-template .empty-message {
|
||||
padding: (@padding-base-vertical + 1) @content-padding-base;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Form Validation
|
||||
*
|
||||
* jQuery plugin for simple clientside form validation
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: May 25, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Core
|
||||
// ------------------------------
|
||||
|
||||
// Error
|
||||
.validation-error-label,
|
||||
.validation-valid-label {
|
||||
margin-top: @padding-base-vertical;
|
||||
margin-bottom: @padding-base-vertical;
|
||||
display: block;
|
||||
color: @brand-danger;
|
||||
position: relative;
|
||||
padding-left: (@icon-font-size + 10);
|
||||
}
|
||||
|
||||
// Success
|
||||
.validation-valid-label {
|
||||
color: @brand-success;
|
||||
}
|
||||
|
||||
|
||||
// Labels
|
||||
// ------------------------------
|
||||
|
||||
// Icon container
|
||||
.validation-error-label,
|
||||
.validation-valid-label {
|
||||
&:before {
|
||||
font-family: 'icomoon';
|
||||
position: absolute;
|
||||
top: ((@line-height-computed - @icon-font-size) / 2);
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-size: @icon-font-size;
|
||||
}
|
||||
|
||||
// Hide if empty
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Error icon
|
||||
.validation-error-label:before {
|
||||
content: '\ed63';
|
||||
}
|
||||
|
||||
// Valid icon
|
||||
.validation-valid-label:before {
|
||||
content: '\ee73';
|
||||
}
|
||||
@@ -0,0 +1,391 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Bootstrap select
|
||||
*
|
||||
* Styles for bootstrap_select.js - custom select boxes plugin
|
||||
*
|
||||
* Version: 1.2
|
||||
* Latest update: Aug 20, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Core
|
||||
// ------------------------------
|
||||
|
||||
// Base
|
||||
.bootstrap-select {
|
||||
width: 100%;
|
||||
|
||||
// Button
|
||||
> .btn {
|
||||
width: 100%;
|
||||
padding-right: ((@padding-base-horizontal * 2) + @content-padding-small);
|
||||
|
||||
// Default light button
|
||||
&.btn-default {
|
||||
&,
|
||||
&.disabled {
|
||||
background-color: @input-bg;
|
||||
border-color: @input-border;
|
||||
}
|
||||
|
||||
// When dropdown is opened
|
||||
&:active,
|
||||
.btn-group.open & {
|
||||
border-color: @input-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Form control
|
||||
&.form-control {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
|
||||
// Make it full width
|
||||
&:not([class*="col-"]) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Menu title
|
||||
.popover-title {
|
||||
font-size: @font-size-mini;
|
||||
line-height: @line-height-mini;
|
||||
margin: @list-spacing 0;
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
}
|
||||
|
||||
// Custom border color
|
||||
&[class*=border-] {
|
||||
.btn,
|
||||
.dropdown-menu {
|
||||
border-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Width variations
|
||||
//
|
||||
|
||||
&:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
|
||||
width: 220px;
|
||||
}
|
||||
&.fit-width {
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
//
|
||||
// Button group
|
||||
//
|
||||
|
||||
&.btn-group {
|
||||
|
||||
// Menu container
|
||||
&.bs-container {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
// Base
|
||||
&:not(.input-group-btn),
|
||||
&[class*="col-"] {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// Dropdowns
|
||||
&.dropdown-menu-right,
|
||||
&[class*="col-"].dropdown-menu-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
// Disabled
|
||||
> .disabled {
|
||||
cursor: @cursor-disabled;
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Button
|
||||
.btn {
|
||||
|
||||
// Filter
|
||||
.filter-option {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
> i {
|
||||
margin-right: @element-horizontal-spacing;
|
||||
float: left;
|
||||
margin-top: ((@line-height-computed - @icon-font-size) / 2);
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Caret
|
||||
.caret {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: @icon-font-size;
|
||||
text-align: right;
|
||||
right: @padding-base-horizontal;
|
||||
margin-top: -(@icon-font-size / 2);
|
||||
}
|
||||
}
|
||||
&[class*="col-"] .btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Button sizes caret
|
||||
.btn-lg > .caret {
|
||||
right: @padding-large-horizontal;
|
||||
}
|
||||
.btn-sm > .caret {
|
||||
right: @padding-small-horizontal;
|
||||
}
|
||||
.btn-xs > .caret {
|
||||
right: @padding-xs-horizontal;
|
||||
}
|
||||
|
||||
// Dropdown menu
|
||||
.dropdown-menu {
|
||||
min-width: 100%;
|
||||
|
||||
// Item
|
||||
> li {
|
||||
|
||||
// Links
|
||||
> a {
|
||||
|
||||
// Add icon soacing
|
||||
[class*=icon-]:extend(.bootstrap-select.btn-group .btn .filter-option > i) {}
|
||||
|
||||
// Check indicator
|
||||
.check-mark {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -(@icon-font-size / 2);
|
||||
right: @padding-base-horizontal;
|
||||
margin-right: 0;
|
||||
color: @dropdown-link-active-color;
|
||||
.opacity(0);
|
||||
}
|
||||
|
||||
// Main text
|
||||
.text {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Labels and badges
|
||||
> .label,
|
||||
> .badge {
|
||||
float: none;
|
||||
}
|
||||
|
||||
// Custom option class
|
||||
&.special-class {
|
||||
&,
|
||||
&:hover {
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
background: @brand-danger;
|
||||
.transition(none);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled links
|
||||
&.disabled a {
|
||||
cursor: @cursor-disabled;
|
||||
}
|
||||
|
||||
// Small inline note
|
||||
small {
|
||||
padding-left: @content-padding-small;
|
||||
}
|
||||
}
|
||||
|
||||
// Active item text
|
||||
> .selected > a {
|
||||
background-color: @dropdown-link-active-bg;
|
||||
color: @dropdown-link-active-color;
|
||||
|
||||
small {
|
||||
color: @dropdown-link-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Inner content
|
||||
&.inner {
|
||||
position: static;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
.box-shadow(none);
|
||||
}
|
||||
|
||||
// Bottom info
|
||||
.notify {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
background-color: @dropdown-annotation-bg;
|
||||
border-top: 1px solid @dropdown-border;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Optgroups side spacing
|
||||
.dropdown-header ~ li > a {
|
||||
padding-left: (@padding-base-horizontal * 2);
|
||||
}
|
||||
|
||||
// If no results
|
||||
.no-results {
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
background: @dropdown-annotation-bg;
|
||||
margin-bottom: -(@list-spacing);
|
||||
border-top: 1px solid @dropdown-border;
|
||||
}
|
||||
|
||||
// Auto width
|
||||
&.fit-width {
|
||||
.btn {
|
||||
.filter-option,
|
||||
.caret {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Show tick
|
||||
&.show-tick .dropdown-menu > li {
|
||||
a .text {
|
||||
margin-right: ((@padding-base-horizontal * 2) + @icon-font-size);
|
||||
}
|
||||
&.selected a .check-mark {
|
||||
.opacity(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Inside input group
|
||||
.input-group {
|
||||
|
||||
// Remove border radius
|
||||
.bootstrap-select > .btn {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// Add side border radius to the first child
|
||||
> .bs-select-hidden:first-child + .bootstrap-select > .btn,
|
||||
> .bootstrap-select:first-child > .btn {
|
||||
.border-left-radius(@border-radius-base);
|
||||
}
|
||||
|
||||
// Add side border radius to the simulated last child
|
||||
> .bootstrap-select:last-child > .btn {
|
||||
.border-right-radius(@border-radius-base);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Error
|
||||
// ------------------------------
|
||||
|
||||
.error .bootstrap-select .btn {
|
||||
border: 1px solid @brand-danger;
|
||||
}
|
||||
.control-group.error .bootstrap-select .dropdown-toggle {
|
||||
border-color: @brand-danger;
|
||||
}
|
||||
|
||||
|
||||
// Search and action boxes
|
||||
// ------------------------------
|
||||
|
||||
// Set paddings
|
||||
.bs-searchbox,
|
||||
.bs-actionsbox {
|
||||
padding: (@padding-base-horizontal - @list-spacing) @padding-base-horizontal;
|
||||
margin-bottom: (@padding-base-horizontal - @list-spacing);
|
||||
}
|
||||
|
||||
// Search box
|
||||
.bs-searchbox {
|
||||
position: relative;
|
||||
|
||||
// Add more left space for icon
|
||||
> .form-control {
|
||||
padding-left: @input-height-base;
|
||||
}
|
||||
|
||||
// Search icon
|
||||
&:after {
|
||||
content: '\e98e';
|
||||
font-family: 'icomoon';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: (@padding-base-horizontal * 2);
|
||||
color: inherit;
|
||||
display: block;
|
||||
font-size: @font-size-small;
|
||||
margin-top: -(@font-size-small / 2);
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
.opacity(0.6);
|
||||
}
|
||||
}
|
||||
|
||||
// Actions box
|
||||
.bs-actionsbox {
|
||||
float: left;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.btn-group button {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.bs-searchbox + & {
|
||||
padding: 0 @padding-base-horizontal @padding-base-vertical;
|
||||
}
|
||||
}
|
||||
|
||||
// On mobile
|
||||
.mobile-device {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block !important;
|
||||
width: 100%;
|
||||
height: 100% !important;
|
||||
opacity: 0;
|
||||
}
|
||||
select.bs-select-hidden,
|
||||
select.selectpicker {
|
||||
display: none !important;
|
||||
}
|
||||
.bootstrap-select > select {
|
||||
position: absolute!important;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
display: block!important;
|
||||
width: .5px!important;
|
||||
height: 100%!important;
|
||||
padding: 0!important;
|
||||
opacity: 0!important;
|
||||
border: none;
|
||||
}
|
||||
@@ -0,0 +1,270 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Bootstrap multiselect
|
||||
*
|
||||
* Styles for multiselect.js - custom multiple select plugin
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: May 25, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Core
|
||||
// ------------------------------
|
||||
|
||||
.multiselect {
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
text-align: left;
|
||||
padding-left: @padding-base-horizontal;
|
||||
padding-right: ((@padding-base-horizontal * 2) + 5);
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
// Default button overrides
|
||||
&.btn-default {
|
||||
&,
|
||||
&.disabled {
|
||||
background-color: @input-bg;
|
||||
border-color: @input-border;
|
||||
}
|
||||
|
||||
&:active,
|
||||
.btn-group.open & {
|
||||
border-color: @input-border;
|
||||
}
|
||||
}
|
||||
|
||||
// Caret
|
||||
.caret {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: @padding-base-horizontal;
|
||||
margin-top: -(@icon-font-size / 2);
|
||||
width: @icon-font-size;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Make it as an input instead of button
|
||||
//
|
||||
|
||||
// Large
|
||||
&.btn-lg {
|
||||
padding-left: @padding-large-horizontal;
|
||||
padding-right: (@padding-large-horizontal * 2);
|
||||
|
||||
.caret {
|
||||
right: @padding-large-horizontal;
|
||||
}
|
||||
}
|
||||
|
||||
// Small
|
||||
&.btn-sm {
|
||||
padding-left: @padding-small-horizontal;
|
||||
padding-right: (@padding-small-horizontal * 2);
|
||||
|
||||
.caret {
|
||||
right: @padding-small-horizontal;
|
||||
}
|
||||
}
|
||||
|
||||
// Mini
|
||||
&.btn-xs {
|
||||
padding-left: @padding-xs-horizontal;
|
||||
padding-right: (@padding-xs-horizontal * 2);
|
||||
|
||||
.caret {
|
||||
right: @padding-xs-horizontal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Container
|
||||
// ------------------------------
|
||||
|
||||
.multiselect-container {
|
||||
min-width: 180px;
|
||||
max-height: 250px;
|
||||
overflow-y: auto;
|
||||
|
||||
> li {
|
||||
padding: 0;
|
||||
|
||||
// Links
|
||||
> a {
|
||||
padding: 0;
|
||||
|
||||
// Label
|
||||
> label {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
padding: (@padding-base-vertical + 1) @padding-base-horizontal;
|
||||
padding-left: (@padding-base-horizontal + @checkbox-size + 10);
|
||||
|
||||
// Inside navbar form
|
||||
.navbar-form & {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Checkboxes and radios
|
||||
.checker,
|
||||
.choice {
|
||||
top: 50%;
|
||||
margin-top: -(@checkbox-size / 2);
|
||||
left: @padding-base-horizontal;
|
||||
}
|
||||
|
||||
// Select all link
|
||||
&.multiselect-all label {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled item
|
||||
&.disabled > a {
|
||||
background-color: transparent;
|
||||
|
||||
> label {
|
||||
cursor: @cursor-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
// Optgroup title
|
||||
&.multiselect-group {
|
||||
> label,
|
||||
&.active > label {
|
||||
margin: 0;
|
||||
padding: (@padding-base-vertical + 1) @content-padding-base;
|
||||
font-size: @font-size-mini;
|
||||
line-height: @line-height-mini;
|
||||
color: @text-muted;
|
||||
text-transform: uppercase;
|
||||
margin-top: (@list-spacing * 2);
|
||||
background-color: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
// Disabled color
|
||||
&.disabled {
|
||||
color: @text-muted;
|
||||
}
|
||||
|
||||
// First item
|
||||
&:first-child {
|
||||
> label,
|
||||
&.active > label {
|
||||
margin-top: @list-spacing;
|
||||
}
|
||||
}
|
||||
|
||||
// Clickable group
|
||||
&.multiselect-group-clickable > label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Disabled group
|
||||
&.disabled {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
label {
|
||||
background-color: transparent;
|
||||
cursor: @cursor-disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Width sizing
|
||||
// ------------------------------
|
||||
|
||||
// Full width
|
||||
.multi-select-full > .btn-group {
|
||||
width: 100%;
|
||||
|
||||
.multiselect-container {
|
||||
width: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Fixed width
|
||||
.multi-select-fixed > .btn-group > .btn {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
// Auto width
|
||||
.multi-select-auto > .btn-group > .btn {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
|
||||
// Misc
|
||||
// ------------------------------
|
||||
|
||||
// Border color
|
||||
div[class*=border-] > .btn-group {
|
||||
border-color: inherit;
|
||||
> .multiselect {
|
||||
border-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Filter
|
||||
li.multiselect-filter {
|
||||
position: relative;
|
||||
padding: (@padding-base-horizontal - @list-spacing) @padding-base-horizontal;
|
||||
margin-bottom: (@padding-base-horizontal - @list-spacing);
|
||||
|
||||
// Center icon vertically
|
||||
i {
|
||||
font-size: @font-size-small;
|
||||
position: absolute;
|
||||
left: (@padding-base-horizontal * 2);
|
||||
top: 50%;
|
||||
margin-top: -(@font-size-small / 2);
|
||||
.opacity(0.5);
|
||||
}
|
||||
|
||||
// Input horizontal padding
|
||||
.form-control {
|
||||
padding-left: (@padding-base-horizontal * 3);
|
||||
}
|
||||
}
|
||||
|
||||
// Remove left rounded corners
|
||||
.input-group-btn,
|
||||
.input-group-addon {
|
||||
& + .multi-select-full,
|
||||
& + .multi-select-auto,
|
||||
& + .multi-select-fixed,
|
||||
& + .btn-group {
|
||||
.multiselect:first-child {
|
||||
.border-left-radius(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Button group styles
|
||||
.btn-group-multiselect {
|
||||
width: 100%;
|
||||
|
||||
.btn {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.multiselect {
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
.btn-group > .btn-group:nth-child(2) > .multiselect.btn {
|
||||
.border-left-radius(@border-radius-small);
|
||||
}
|
||||
@@ -0,0 +1,798 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Select2 selects
|
||||
*
|
||||
* Styles for select2.js - custom select plugin
|
||||
*
|
||||
* Version: 1.3
|
||||
* Latest update: Mar 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Select base
|
||||
// ------------------------------
|
||||
|
||||
.select2-container {
|
||||
outline: 0;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
// Single select
|
||||
// ------------------------------
|
||||
|
||||
.select2-selection--single {
|
||||
cursor: pointer;
|
||||
outline: 0;
|
||||
display: block;
|
||||
height: @input-height-base;
|
||||
padding: @padding-base-vertical 0;
|
||||
line-height: @line-height-base;
|
||||
position: relative;
|
||||
border: 1px solid transparent;
|
||||
white-space: nowrap;
|
||||
border-radius: @input-border-radius;
|
||||
.user-select(none);
|
||||
|
||||
// Darken on hover
|
||||
&:hover,
|
||||
&:focus,
|
||||
.select2-container--open & {
|
||||
.box-shadow(0 0 0 100px fade(#000, 1%) inset);
|
||||
}
|
||||
|
||||
// Allow custom background color
|
||||
&:not([class*=bg-]) {
|
||||
background-color: @input-bg;
|
||||
color: @text-color;
|
||||
|
||||
// Allow custom border color
|
||||
&:not([class*=border-]) {
|
||||
border-color: @input-border;
|
||||
}
|
||||
}
|
||||
|
||||
// Apply darker hover color
|
||||
&[class*=bg-] {
|
||||
&:hover,
|
||||
&:focus,
|
||||
.select2-container--open & {
|
||||
.box-shadow(0 0 0 100px fade(#000, 2.5%) inset);
|
||||
}
|
||||
|
||||
// Placeholder
|
||||
.select2-selection__placeholder {
|
||||
color: #fff;
|
||||
|
||||
// In disabled mode
|
||||
.select2-container--disabled & {
|
||||
color: fade(#fff, 75%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Result text
|
||||
.select2-selection__rendered {
|
||||
display: block;
|
||||
padding-left: @padding-base-horizontal;
|
||||
padding-right: ((@padding-base-horizontal * 2) + @padding-base-vertical);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
// Icons
|
||||
> i {
|
||||
margin-right: @content-padding-small;
|
||||
}
|
||||
}
|
||||
|
||||
// Clear selection button
|
||||
.select2-selection__clear {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
font-size: 0;
|
||||
line-height: 1;
|
||||
margin-top: ((@line-height-computed - @icon-font-size) / 2);
|
||||
margin-left: 5px;
|
||||
.opacity(0.75);
|
||||
|
||||
// Add hover state effect
|
||||
&:hover {
|
||||
.opacity(1);
|
||||
}
|
||||
|
||||
// Cross icon
|
||||
&:after {
|
||||
content: '\ed6b';
|
||||
font-family: 'icomoon';
|
||||
display: inline-block;
|
||||
font-size: @icon-font-size;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
}
|
||||
|
||||
// Placeholder
|
||||
.select2-selection__placeholder {
|
||||
color: @text-muted;
|
||||
}
|
||||
|
||||
// Dropdown arrow
|
||||
.select2-selection__arrow {
|
||||
|
||||
// Arrow icon
|
||||
&:after {
|
||||
content: '\e9c5';
|
||||
font-family: 'Icomoon';
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: @padding-base-horizontal;
|
||||
margin-top: -(@icon-font-size / 2);
|
||||
font-size: @icon-font-size;
|
||||
line-height: 1;
|
||||
color: inherit;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
// Change icon when menu is opened
|
||||
.select2-container--open &:after {
|
||||
content: '\e9c6';
|
||||
}
|
||||
|
||||
// Hide default arrow
|
||||
b {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled menu
|
||||
.select2-container--disabled & {
|
||||
cursor: @cursor-disabled;
|
||||
.box-shadow(none);
|
||||
|
||||
// Disabled state for container
|
||||
&:not([class*=bg-]) {
|
||||
background-color: @input-bg-disabled;
|
||||
color: @gray-light;
|
||||
}
|
||||
|
||||
// Disabled state for custom colored container
|
||||
&[class*=bg-] {
|
||||
.box-shadow(0 0 0 100px fade(#fff, 25%) inset);
|
||||
}
|
||||
|
||||
// Hide clear button
|
||||
.select2-selection__clear {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Multiple select
|
||||
// ------------------------------
|
||||
|
||||
.select2-selection--multiple {
|
||||
display: block;
|
||||
border: 1px solid transparent;
|
||||
border-radius: @input-border-radius;
|
||||
cursor: text;
|
||||
outline: 0;
|
||||
.user-select(none);
|
||||
|
||||
// Allow custom background color
|
||||
&:not([class*=bg-]) {
|
||||
background-color: @input-bg;
|
||||
|
||||
// Allow custom border color
|
||||
&:not([class*=border-]) {
|
||||
border-color: @input-border;
|
||||
}
|
||||
}
|
||||
|
||||
// Result text
|
||||
.select2-selection__rendered {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 @tags-spacing @tags-spacing @tags-spacing;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Placeholder
|
||||
.select2-selection__placeholder {
|
||||
color: @text-muted;
|
||||
}
|
||||
|
||||
// Disabled multiselect
|
||||
.select2-container--disabled & {
|
||||
|
||||
// Disabled state for container
|
||||
&:not([class*=bg-]) {
|
||||
background-color: @input-bg-disabled;
|
||||
color: @gray-light;
|
||||
}
|
||||
|
||||
// Disabled state for custom colored container
|
||||
&[class*=bg-] {
|
||||
.box-shadow(0 0 0 100px fade(#fff, 25%) inset);
|
||||
|
||||
.select2-selection__choice {
|
||||
.opacity(0.9);
|
||||
}
|
||||
}
|
||||
|
||||
// Apply disabled cursor for all elements
|
||||
&,
|
||||
.select2-selection__choice,
|
||||
.select2-search__field {
|
||||
cursor: @cursor-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
// Choices
|
||||
.select2-selection__choice {
|
||||
background-color: @color-slate-700;
|
||||
color: #fff;
|
||||
border-radius: @border-radius-base;
|
||||
cursor: default;
|
||||
float: left;
|
||||
margin-right: @tags-spacing;
|
||||
margin-top: @tags-spacing;
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
|
||||
// Icons
|
||||
> i {
|
||||
margin-right: @content-padding-small;
|
||||
}
|
||||
|
||||
// Remover
|
||||
.select2-selection__choice__remove {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
font-size: @font-size-large;
|
||||
margin-top: ((@line-height-computed - @font-size-large) / 2);
|
||||
line-height: 1;
|
||||
margin-left: @element-horizontal-spacing;
|
||||
.opacity(0.75);
|
||||
|
||||
// Highlight on hover
|
||||
&:hover {
|
||||
.opacity(1);
|
||||
}
|
||||
}
|
||||
|
||||
// Disable choice
|
||||
.select2-container--disabled & {
|
||||
.opacity(0.6);
|
||||
|
||||
// Hide remover
|
||||
.select2-selection__choice__remove {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Search
|
||||
.select2-search--inline {
|
||||
float: left;
|
||||
|
||||
// Search field
|
||||
.select2-search__field {
|
||||
font-size: 100%;
|
||||
margin-top: @tags-spacing;
|
||||
padding: @padding-base-vertical 0;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
margin-left: @padding-base-vertical;
|
||||
-webkit-appearance: textfield;
|
||||
|
||||
// Cancel button
|
||||
&::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Select results
|
||||
// ------------------------------
|
||||
|
||||
// Dropdown
|
||||
.select2-dropdown {
|
||||
background-color: @dropdown-bg;
|
||||
color: @dropdown-link-color;
|
||||
border: 1px solid @dropdown-border;
|
||||
border-radius: @border-radius-base;
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: -100000px;
|
||||
width: 100%;
|
||||
z-index: 9999;
|
||||
.box-shadow(0 1px 3px fade(#000, 10%));
|
||||
}
|
||||
|
||||
|
||||
// Results container
|
||||
.select2-results {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
// Options list
|
||||
.select2-results__options {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
// Add scrollbar to first level list
|
||||
.select2-results > & {
|
||||
padding-bottom: @list-spacing;
|
||||
max-height: 250px;
|
||||
overflow-y: auto;
|
||||
|
||||
// Add top spacing if search is hidden
|
||||
.select2-search--hide + & {
|
||||
padding-top: @list-spacing;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-results:first-child > & {
|
||||
padding-top: @list-spacing;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Option
|
||||
.select2-results__option {
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
cursor: pointer;
|
||||
.user-select(none);
|
||||
|
||||
// Add 1px gap between options
|
||||
& + & {
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
// Icons
|
||||
i {
|
||||
margin-right: @content-padding-small;
|
||||
|
||||
// Do not display empty icon
|
||||
&.icon-undefined {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Option group
|
||||
&[role=group] {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Highlighted option (hover state)
|
||||
&.select2-results__option--highlighted {
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
}
|
||||
|
||||
// Disabled option
|
||||
&[aria-disabled=true] {
|
||||
color: @text-muted;
|
||||
cursor: @cursor-disabled;
|
||||
|
||||
// In colored menu
|
||||
.select2-dropdown[class*=bg-] & {
|
||||
color: fade(#fff, 60%);
|
||||
}
|
||||
}
|
||||
|
||||
// Selected option
|
||||
&[aria-selected=true] {
|
||||
background-color: @dropdown-link-active-bg;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// Add double horizontal spacing for nested options
|
||||
.select2-results__options--nested > & {
|
||||
padding-left: (@padding-base-horizontal * 2);
|
||||
padding-right: (@padding-base-horizontal * 2);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Option group title
|
||||
.select2-results__group {
|
||||
display: block;
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
font-size: @font-size-mini;
|
||||
line-height: @line-height-mini;
|
||||
text-transform: uppercase;
|
||||
cursor: default;
|
||||
margin-top: @list-spacing;
|
||||
margin-bottom: @list-spacing;
|
||||
|
||||
// Remove top spacing from the first group title
|
||||
.select2-results__option:first-child > & {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Messages
|
||||
//
|
||||
|
||||
// Results
|
||||
.select2-results__message {
|
||||
color: @text-muted;
|
||||
cursor: default;
|
||||
|
||||
// Mute if in colored dropdown
|
||||
.select2-dropdown[class*=bg-] & {
|
||||
color: fade(#fff, 75%);
|
||||
}
|
||||
}
|
||||
|
||||
// Loading
|
||||
.select2-results__option.loading-results {
|
||||
padding-top: 0;
|
||||
|
||||
// Add extra top spacing
|
||||
+ .select2-results__option {
|
||||
margin-top: @list-spacing;
|
||||
}
|
||||
}
|
||||
|
||||
// Load more for infinite scroll
|
||||
.select2-results__option--load-more {
|
||||
text-align: center;
|
||||
margin-top: @list-spacing;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Opened dropdown
|
||||
//
|
||||
|
||||
.select2-container--open {
|
||||
|
||||
// Dropdown
|
||||
.select2-dropdown {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
// If opened above
|
||||
.select2-dropdown--above {
|
||||
border-bottom: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
|
||||
// Add border for colored menu
|
||||
&[class*=bg-] {
|
||||
border-bottom: 1px solid fade(#fff, 20%);
|
||||
}
|
||||
}
|
||||
&.select2-container--above {
|
||||
.select2-selection--single,
|
||||
.select2-selection--multiple {
|
||||
.border-top-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
// If opened below
|
||||
.select2-dropdown--below {
|
||||
border-top: none;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
|
||||
// Add border for colored menu
|
||||
&[class*=bg-] {
|
||||
border-top: 1px solid fade(#fff, 20%);
|
||||
}
|
||||
}
|
||||
&.select2-container--below {
|
||||
.select2-selection--single,
|
||||
.select2-selection--multiple {
|
||||
.border-bottom-radius(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Search inside dropdown
|
||||
//
|
||||
|
||||
.select2-search--dropdown {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: @padding-base-horizontal;
|
||||
|
||||
// Add search icon
|
||||
&:after {
|
||||
content: '\e98e';
|
||||
font-family: 'icomoon';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: (@padding-base-horizontal * 2);
|
||||
color: inherit;
|
||||
display: block;
|
||||
font-size: @font-size-small;
|
||||
margin-top: -(@font-size-small / 2);
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
.opacity(0.6);
|
||||
}
|
||||
|
||||
// Remove top spacing from the results message
|
||||
+ .select2-results .select2-results__message:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
// Search field
|
||||
.select2-search__field {
|
||||
height: @input-height-base;
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
padding-left: ((@padding-base-horizontal * 2) + @font-size-small);
|
||||
border-radius: @input-border-radius;
|
||||
border: 1px solid @input-border;
|
||||
outline: 0;
|
||||
width: 100%;
|
||||
|
||||
// Cancel button
|
||||
&::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Hidden search field
|
||||
&.select2-search--hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Optional sizing
|
||||
// ------------------------------
|
||||
|
||||
// Large
|
||||
.select-lg {
|
||||
|
||||
// Single
|
||||
&.select2-selection--single {
|
||||
height: @input-height-large;
|
||||
padding: @padding-large-vertical 0;
|
||||
font-size: @font-size-large;
|
||||
|
||||
.select2-selection__rendered {
|
||||
padding-left: @padding-large-horizontal;
|
||||
padding-right: ((@padding-large-horizontal * 2) + 4);
|
||||
}
|
||||
|
||||
.select2-selection__arrow:after {
|
||||
right: @padding-large-horizontal;
|
||||
}
|
||||
}
|
||||
|
||||
// Multiple
|
||||
&.select2-selection--multiple {
|
||||
.select2-selection__choice {
|
||||
padding: @padding-large-vertical @padding-large-horizontal;
|
||||
font-size: @font-size-large;
|
||||
}
|
||||
|
||||
.select2-search--inline .select2-search__field {
|
||||
padding: @padding-large-vertical 0;
|
||||
font-size: @font-size-large;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Small
|
||||
.select-sm {
|
||||
|
||||
// Single
|
||||
&.select2-selection--single {
|
||||
height: @input-height-small;
|
||||
padding: @padding-small-vertical 0;
|
||||
font-size: @font-size-small;
|
||||
line-height: @line-height-small;
|
||||
|
||||
.select2-selection__rendered {
|
||||
padding-left: @padding-small-horizontal;
|
||||
padding-right: ((@padding-small-horizontal * 2) + 4);
|
||||
}
|
||||
|
||||
.select2-selection__arrow:after {
|
||||
right: @padding-small-horizontal;
|
||||
}
|
||||
}
|
||||
|
||||
// Multiple
|
||||
&.select2-selection--multiple {
|
||||
.select2-selection__choice {
|
||||
padding: @padding-small-vertical @padding-small-horizontal;
|
||||
font-size: @font-size-small;
|
||||
line-height: @line-height-small;
|
||||
}
|
||||
|
||||
.select2-search--inline .select2-search__field {
|
||||
padding: @padding-small-vertical 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mini
|
||||
.select-xs {
|
||||
|
||||
// Single
|
||||
&.select2-selection--single {
|
||||
height: @input-height-mini;
|
||||
padding: @padding-xs-vertical 0;
|
||||
font-size: @font-size-small;
|
||||
line-height: @line-height-small;
|
||||
|
||||
.select2-selection__rendered {
|
||||
padding-left: @padding-xs-horizontal;
|
||||
padding-right: ((@padding-xs-horizontal * 2) + 4);
|
||||
}
|
||||
|
||||
.select2-selection__arrow:after {
|
||||
right: @padding-xs-horizontal;
|
||||
}
|
||||
}
|
||||
|
||||
// Multiple
|
||||
&.select2-selection--multiple {
|
||||
.select2-selection__choice {
|
||||
padding: @padding-xs-vertical @padding-xs-horizontal;
|
||||
font-size: @font-size-small;
|
||||
line-height: @line-height-small;
|
||||
}
|
||||
|
||||
.select2-search--inline .select2-search__field {
|
||||
padding: @padding-xs-vertical 0;
|
||||
font-size: @font-size-small;
|
||||
line-height: @line-height-small;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Custom colors
|
||||
// ------------------------------
|
||||
|
||||
// Multiple selection choices
|
||||
.select2-selection--multiple[class*=bg-] {
|
||||
.select2-selection__choice {
|
||||
background-color: fade(#000, 25%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Dropdown menu
|
||||
.select2-dropdown[class*=bg-] {
|
||||
|
||||
// Search field
|
||||
.select2-search--dropdown .select2-search__field {
|
||||
background-color: fade(#000, 20%);
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// Selected item
|
||||
.select2-results__option[aria-selected=true] {
|
||||
background-color: fade(#000, 20%);
|
||||
}
|
||||
|
||||
// Hovered item
|
||||
.select2-results__option--highlighted {
|
||||
background-color: fade(#000, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Misc
|
||||
// ------------------------------
|
||||
|
||||
// Mask
|
||||
.select2-close-mask {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: block;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
min-height: 100%;
|
||||
min-width: 100%;
|
||||
height: auto;
|
||||
width: auto;
|
||||
z-index: 99;
|
||||
background-color: #fff;
|
||||
.opacity(0);
|
||||
}
|
||||
|
||||
// Accessible
|
||||
.select2-hidden-accessible {
|
||||
border: 0 !important;
|
||||
clip: rect(0 0 0 0) !important;
|
||||
height: 1px !important;
|
||||
margin: -1px !important;
|
||||
overflow: hidden !important;
|
||||
padding: 0 !important;
|
||||
position: fixed !important;
|
||||
width: 1px !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Loading remote data example demo
|
||||
// ------------------------------
|
||||
|
||||
// Results
|
||||
.select2-result-repository {
|
||||
padding-top: @padding-base-vertical;
|
||||
padding-bottom: @padding-base-vertical;
|
||||
}
|
||||
|
||||
// Avatar
|
||||
.select2-result-repository__avatar {
|
||||
float: left;
|
||||
width: 60px;
|
||||
margin-right: @content-padding-base;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
// Meta
|
||||
.select2-result-repository__meta {
|
||||
margin-left: 70px;
|
||||
}
|
||||
|
||||
// Title
|
||||
.select2-result-repository__title {
|
||||
font-weight: 500;
|
||||
word-wrap: break-word;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
// Data
|
||||
.select2-result-repository__forks,
|
||||
.select2-result-repository__stargazers,
|
||||
.select2-result-repository__watchers {
|
||||
display: inline-block;
|
||||
font-size: @font-size-small;
|
||||
}
|
||||
|
||||
// Description
|
||||
.select2-result-repository__description {
|
||||
font-size: @font-size-small;
|
||||
}
|
||||
|
||||
// Add spacing for data
|
||||
.select2-result-repository__forks,
|
||||
.select2-result-repository__stargazers {
|
||||
margin-right: @content-padding-base;
|
||||
}
|
||||
@@ -0,0 +1,398 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # SelectBoxIt
|
||||
*
|
||||
* Styles for selectbox.js - custom select boxes plugin
|
||||
*
|
||||
* Version: 1.2
|
||||
* Latest update: Mar 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
/* # Core
|
||||
-------------------------------------------------- */
|
||||
|
||||
// SelectBoxIt container
|
||||
.selectboxit-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
// All children elements
|
||||
* {
|
||||
-webkit-touch-callout: none;
|
||||
outline: 0;
|
||||
white-space: nowrap;
|
||||
.user-select(none);
|
||||
}
|
||||
|
||||
// Button
|
||||
.selectboxit {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
position: relative;
|
||||
|
||||
// Remove outline
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
span,
|
||||
.selectboxit-options a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Options list
|
||||
.selectboxit-options {
|
||||
width: 100%;
|
||||
max-height: 250px;
|
||||
padding: @list-spacing 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
z-index: 999;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled mouse interaction
|
||||
.selectboxit.selectboxit-disabled,
|
||||
.selectboxit-options .selectboxit-disabled {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
cursor: @cursor-disabled;
|
||||
.box-shadow(none);
|
||||
.opacity(0.65);
|
||||
}
|
||||
}
|
||||
|
||||
// Hide original select
|
||||
.selectboxit-rendering {
|
||||
display: inline-block !important;
|
||||
visibility: visible !important;
|
||||
position: absolute !important;
|
||||
top: -9999px !important;
|
||||
left: -9999px !important;
|
||||
}
|
||||
|
||||
// Dropdown menu
|
||||
.selectboxit-list {
|
||||
background-color: @dropdown-bg;
|
||||
border: 1px solid @dropdown-border;
|
||||
margin: 2px 0 0;
|
||||
width: 100%;
|
||||
min-width: 200px;
|
||||
list-style: none;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
border-radius: @border-radius-base;
|
||||
.box-shadow(0 1px 3px fade(#000, 10%));
|
||||
|
||||
// Link
|
||||
.selectboxit-option-anchor {
|
||||
color: @dropdown-link-color;
|
||||
}
|
||||
|
||||
// Focused link
|
||||
> .selectboxit-focus > .selectboxit-option-anchor {
|
||||
display: block;
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
color: @dropdown-link-hover-color;
|
||||
}
|
||||
|
||||
// Selected link
|
||||
> .selectboxit-selected > .selectboxit-option-anchor {
|
||||
background-color: @dropdown-link-active-bg;
|
||||
color: @dropdown-link-active-color;
|
||||
}
|
||||
|
||||
// Disabled link
|
||||
> .selectboxit-disabled > .selectboxit-option-anchor {
|
||||
color: @dropdown-link-disabled-color;
|
||||
cursor: @cursor-disabled;
|
||||
}
|
||||
|
||||
// Custom border color
|
||||
.selectbox-container[class*=border-] > & {
|
||||
border-color: inherit;
|
||||
}
|
||||
|
||||
// Solid color
|
||||
.selectbox-container[class*=bg-] > & {
|
||||
background-color: inherit;
|
||||
border-color: inherit;
|
||||
|
||||
.selectboxit-option-anchor {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
> .selectboxit-focus .selectboxit-option-anchor {
|
||||
background-color: fade(#000, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Buttons
|
||||
// ------------------------------
|
||||
|
||||
// Button
|
||||
.selectboxit-btn {
|
||||
background-color: @input-bg;
|
||||
border: 1px solid @input-border;
|
||||
color: @input-color;
|
||||
border-radius: @input-border-radius;
|
||||
height: @input-height-base;
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
padding-right: ((@padding-base-horizontal * 2) + 5);
|
||||
|
||||
// When hovered
|
||||
&:hover {
|
||||
.box-shadow(0 0 0 100px fade(#000, 1%) inset);
|
||||
}
|
||||
|
||||
// When opened
|
||||
&.selectboxit-open,
|
||||
&:focus {
|
||||
.box-shadow(0 0 0 100px fade(#000, 3%) inset);
|
||||
}
|
||||
|
||||
// Inherit colors if custom bg color
|
||||
.selectboxit-container[class*=bg-] & {
|
||||
background-color: inherit;
|
||||
border-color: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
// Inherit border color if custom bg color
|
||||
.selectboxit-container[class*=border-] & {
|
||||
border-color: inherit;
|
||||
}
|
||||
|
||||
// Darken on hover and focus
|
||||
&[class*=bg-],
|
||||
.selectboxit-container[class*=bg-] & {
|
||||
&:hover {
|
||||
.box-shadow(0 0 0 100px fade(#000, 5%) inset);
|
||||
}
|
||||
|
||||
&.selectboxit-open,
|
||||
&:focus {
|
||||
.box-shadow(0 0 0 100px fade(#000, 10%) inset);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Inside input group
|
||||
.input-group {
|
||||
.selectboxit-container {
|
||||
|
||||
// Remove border radius
|
||||
> .selectboxit-btn {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// Add side border radius to the first child
|
||||
&:last-child > .selectboxit-btn {
|
||||
.border-right-radius(@input-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
// Add side border radius to the simulated last child
|
||||
> select:first-child + .selectboxit-container > .selectboxit-btn {
|
||||
.border-left-radius(@input-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
// Button text
|
||||
.selectboxit-text {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
float: left;
|
||||
}
|
||||
|
||||
// Arrow
|
||||
.selectboxit-default-arrow {
|
||||
position: relative;
|
||||
font-style: normal;
|
||||
|
||||
&:after {
|
||||
content: '\e9c5';
|
||||
display: block;
|
||||
font-family: 'icomoon';
|
||||
font-size: @icon-font-size;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.selectboxit-open &:after {
|
||||
content: '\e9c6';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Options
|
||||
// ------------------------------
|
||||
|
||||
// Individual option
|
||||
.selectboxit-option {
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
|
||||
.selectboxit-option-anchor{
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
}
|
||||
}
|
||||
|
||||
// Optgroup header
|
||||
.selectboxit-optgroup-header {
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
font-weight: 700;
|
||||
color: @text-color;
|
||||
font-size: @font-size-mini;
|
||||
line-height: @line-height-mini;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
// Optgroup option
|
||||
.selectboxit-optgroup-option .selectboxit-option-anchor {
|
||||
padding-left: (@padding-base-horizontal * 2);
|
||||
padding-right: (@padding-base-horizontal * 2);
|
||||
}
|
||||
|
||||
// Dropdown arrow container
|
||||
.selectboxit-arrow-container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: @icon-font-size;
|
||||
right: @padding-base-horizontal;
|
||||
margin-top: -(@icon-font-size / 2);
|
||||
text-align: right;
|
||||
line-height: 1;
|
||||
|
||||
// Remove top edge from arrow
|
||||
.selectboxit-arrow {
|
||||
&[class*=icon-] {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Caret
|
||||
.caret {
|
||||
&:after {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown individual option icon positioning
|
||||
.selectboxit-option-icon-container {
|
||||
float: left;
|
||||
|
||||
// Icon
|
||||
> [class*=icon-] {
|
||||
margin-right: @content-padding-small;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
// Image
|
||||
.selectboxit-option-icon-url {
|
||||
height: @line-height-computed;
|
||||
width: @line-height-computed;
|
||||
background-size: @line-height-computed @line-height-computed;
|
||||
border-radius: 100px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Options border radius
|
||||
.selectboxit-option-first {
|
||||
.border-top-radius(@border-radius-base - 1);
|
||||
}
|
||||
.selectboxit-optgroup-header + .selectboxit-option-first {
|
||||
.border-top-radius(0);
|
||||
}
|
||||
.selectboxit-option-last {
|
||||
.border-bottom-radius(@border-radius-base - 1);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* # Sizing
|
||||
-------------------------------------------------- */
|
||||
|
||||
// Horizontal
|
||||
// ------------------------------
|
||||
|
||||
// Fixed width
|
||||
.selectbox-fixed {
|
||||
& + .selectboxit-container,
|
||||
& + .selectboxit-options {
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
// Auto width
|
||||
.selectbox-auto {
|
||||
& + .selectboxit-container,
|
||||
& + .selectboxit-options {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Vertical
|
||||
// ------------------------------
|
||||
|
||||
// Large
|
||||
.selectbox-lg + .selectboxit-container .selectboxit {
|
||||
padding: @padding-large-vertical @padding-large-horizontal;
|
||||
padding-right: (@padding-large-horizontal * 2);
|
||||
height: @input-height-large;
|
||||
font-size: @font-size-large;
|
||||
|
||||
.selectboxit-arrow-container {
|
||||
right: @padding-large-horizontal;
|
||||
}
|
||||
}
|
||||
|
||||
// Small
|
||||
.selectbox-sm + .selectboxit-container .selectboxit {
|
||||
padding: @padding-small-vertical @padding-small-horizontal;
|
||||
padding-right: (@padding-small-horizontal * 2);
|
||||
height: @input-height-small;
|
||||
|
||||
.selectboxit-arrow-container {
|
||||
right: @padding-small-horizontal;
|
||||
}
|
||||
}
|
||||
|
||||
// Mini
|
||||
.selectbox-xs + .selectboxit-container .selectboxit {
|
||||
padding: @padding-xs-vertical @padding-xs-horizontal;
|
||||
padding-right: ((@padding-xs-horizontal * 2) + 5);
|
||||
height: @input-height-mini;
|
||||
font-size: @font-size-small;
|
||||
line-height: @line-height-small;
|
||||
|
||||
.selectboxit-arrow-container {
|
||||
right: @padding-xs-horizontal;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,200 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Bootstrap Duallistbox
|
||||
*
|
||||
* Styles for listbox.js - A responsive dual listbox widget optimized for Bootstrap
|
||||
*
|
||||
* Version: 1.2
|
||||
* Latest update: Aug 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Core
|
||||
// ------------------------------
|
||||
|
||||
.bootstrap-duallistbox-container {
|
||||
|
||||
//
|
||||
// Layout
|
||||
//
|
||||
|
||||
// Add bottom spacing to the first box
|
||||
.box1 {
|
||||
margin-bottom: @line-height-computed;
|
||||
}
|
||||
|
||||
// Select
|
||||
select.form-control {
|
||||
padding: @list-spacing;
|
||||
.border-top-radius(0);
|
||||
}
|
||||
option {
|
||||
display: block;
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
border-radius: @border-radius-small;
|
||||
}
|
||||
|
||||
// Move option on select
|
||||
&.moveonselect {
|
||||
|
||||
// Hide "Move single" button
|
||||
.move,
|
||||
.remove {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Visible buttons
|
||||
.moveall,
|
||||
.removeall {
|
||||
width: 100%;
|
||||
.border-top-radius(@border-radius-base)!important;
|
||||
}
|
||||
|
||||
// Add border to the next buttons
|
||||
.btn-group {
|
||||
.btn + .btn {
|
||||
border-left-width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Buttons
|
||||
//
|
||||
|
||||
// Main buttons
|
||||
.buttons {
|
||||
width: 100%;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
// Clear buttons
|
||||
.clear1,
|
||||
.clear2 {
|
||||
display: none;
|
||||
margin-top: @line-height-computed;
|
||||
|
||||
// Reset styles
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
color: @link-color;
|
||||
padding: 0;
|
||||
.box-shadow(none);
|
||||
}
|
||||
}
|
||||
.box1.filtered .clear1,
|
||||
.box2.filtered .clear2 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Control buttons
|
||||
.move,
|
||||
.remove,
|
||||
.moveall,
|
||||
.removeall {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
// Button group
|
||||
.btn-group .btn {
|
||||
margin: 0;
|
||||
.border-bottom-radius(0);
|
||||
|
||||
// Borders
|
||||
& + .btn {
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
// Icons
|
||||
> i {
|
||||
float: none;
|
||||
text-align: center;
|
||||
|
||||
// Reduce spacing between icons
|
||||
+ i {
|
||||
margin-left: -14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Elements
|
||||
//
|
||||
|
||||
// Filter
|
||||
.filter {
|
||||
margin-bottom: @line-height-computed;
|
||||
position: relative;
|
||||
|
||||
&.placeholder {
|
||||
color: @input-color-placeholder;
|
||||
}
|
||||
}
|
||||
|
||||
// Bottom info
|
||||
.info-container {
|
||||
.info {
|
||||
display: inline-block;
|
||||
margin-top: @line-height-computed;
|
||||
|
||||
.label {
|
||||
margin-right: @element-horizontal-spacing;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Inside sidebar
|
||||
//
|
||||
|
||||
.sidebar & {
|
||||
text-align: center;
|
||||
|
||||
.box1,
|
||||
.box2 {
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.box1 {
|
||||
padding-bottom: 5px;
|
||||
|
||||
&:after {
|
||||
content: '\e9c9';
|
||||
font-size: @icon-font-size;
|
||||
font-family: 'icomoon';
|
||||
display: block;
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
margin: 10px 0;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
.opacity(0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Responsive stuff
|
||||
//
|
||||
|
||||
@media (min-width: @screen-md) {
|
||||
.box1 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.sidebar & {
|
||||
.box1 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Bootstrap maxlength
|
||||
*
|
||||
* Styles for maxlength.min.js - input characters counter
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: Mar 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Give it a look of help block
|
||||
.bootstrap-maxlength {
|
||||
margin-top: @padding-base-vertical;
|
||||
font-size: @font-size-small;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,93 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Touchspin spinners
|
||||
*
|
||||
* Styles for touchspin.min.js - spinner form control library
|
||||
*
|
||||
* Version: 1.1
|
||||
* Latest update: Oct 20, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Core
|
||||
// ------------------------------
|
||||
|
||||
.bootstrap-touchspin {
|
||||
|
||||
// Vertical buttons
|
||||
.input-group-btn-vertical {
|
||||
white-space: nowrap;
|
||||
width: 1%;
|
||||
vertical-align: middle;
|
||||
display: table-cell;
|
||||
|
||||
// Button
|
||||
> .btn {
|
||||
height: @input-height-base;
|
||||
line-height: @line-height-base;
|
||||
margin-left: -1px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// Icon
|
||||
i {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -(@icon-font-size / 2);
|
||||
margin-top: -(@icon-font-size / 2);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
// Arrow up
|
||||
.bootstrap-touchspin-up {
|
||||
border: 1px solid @input-border;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// Arrow down
|
||||
.bootstrap-touchspin-down {
|
||||
border: 1px solid @input-border;
|
||||
.border-right-radius(@input-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Sizing
|
||||
//
|
||||
|
||||
// Large
|
||||
&.input-group-lg .input-group-btn-vertical {
|
||||
> .btn {
|
||||
height: @input-height-large;
|
||||
line-height: @line-height-large;
|
||||
padding-left: @padding-large-horizontal;
|
||||
padding-right: @padding-large-horizontal;
|
||||
}
|
||||
}
|
||||
|
||||
// Small
|
||||
&.input-group-sm .input-group-btn-vertical {
|
||||
> .btn {
|
||||
height: @input-height-small;
|
||||
line-height: @line-height-small;
|
||||
padding-left: @padding-small-horizontal;
|
||||
padding-right: @padding-small-horizontal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Elements
|
||||
// ------------------------------
|
||||
|
||||
// Prefix
|
||||
.bootstrap-touchspin-prefix {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
// Postfix
|
||||
.bootstrap-touchspin-postfix {
|
||||
border-left: 0;
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Bootstrap tags input
|
||||
*
|
||||
* Styles for tagsinput.js - tags input for Bootstrap
|
||||
*
|
||||
* Version: 1.2
|
||||
* Latest update: Mar 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Core
|
||||
// ------------------------------
|
||||
|
||||
.bootstrap-tagsinput {
|
||||
background-color: @input-bg;
|
||||
border: 1px solid @input-border;
|
||||
display: inline-block;
|
||||
padding: 0 0 @tags-spacing 0;
|
||||
vertical-align: middle;
|
||||
border-radius: @input-border-radius;
|
||||
width: 100%;
|
||||
|
||||
// Input field
|
||||
input {
|
||||
border: 0;
|
||||
outline: 0;
|
||||
background-color: transparent;
|
||||
padding: (@padding-base-vertical - @tags-spacing) @padding-small-horizontal;
|
||||
margin-top: @tags-spacing;
|
||||
margin-left: @tags-spacing;
|
||||
width: auto !important;
|
||||
min-width: 100px;
|
||||
font-size: @font-size-small;
|
||||
line-height: @line-height-small;
|
||||
.box-shadow(none);
|
||||
|
||||
&:focus {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Twitter typeahead adaptation
|
||||
.twitter-typeahead {
|
||||
width: auto;
|
||||
}
|
||||
.tt-dropdown-menu {
|
||||
margin-top: 5px;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
// Tag
|
||||
.tag {
|
||||
margin: @tags-spacing 0 0 @tags-spacing;
|
||||
border: 0;
|
||||
border-radius: @border-radius-small;
|
||||
padding: @padding-xs-vertical @padding-small-horizontal;
|
||||
padding-right: ((@padding-small-horizontal * 2) + (@icon-font-size / 2));
|
||||
float: left;
|
||||
font-size: @font-size-small;
|
||||
line-height: @line-height-small;
|
||||
font-weight: 400;
|
||||
text-transform: none;
|
||||
position: relative;
|
||||
|
||||
// Skip tokens with custom background color
|
||||
&:not([class*=bg-]) {
|
||||
background-color: @color-slate-600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// Remove button
|
||||
[data-role="remove"] {
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: @padding-small-horizontal;
|
||||
line-height: 1;
|
||||
margin-top: -(@font-size-mini / 2);
|
||||
.opacity(0.7);
|
||||
|
||||
&:hover {
|
||||
.opacity(1);
|
||||
}
|
||||
|
||||
// Icon
|
||||
&:after {
|
||||
content: '\ed6a';
|
||||
font-family: 'icomoon';
|
||||
display: block;
|
||||
font-size: @font-size-mini;
|
||||
color: #fff;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,239 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Tokenfield for Bootstrap
|
||||
*
|
||||
* Styles for tokenfield.js - Advanced tagging/tokenizing plugin for Bootstrap
|
||||
*
|
||||
* Version: 1.1
|
||||
* Latest update: Mar 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Base
|
||||
// ------------------------------
|
||||
|
||||
.tokenfield {
|
||||
height: auto;
|
||||
|
||||
// Remove default .form-control styling
|
||||
&.form-control {
|
||||
height: auto;
|
||||
padding: 0 0 @tags-spacing 0;
|
||||
}
|
||||
|
||||
// Clear floating
|
||||
&:after {
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
// Token
|
||||
.token {
|
||||
margin: @tags-spacing 0 0 @tags-spacing;
|
||||
cursor: default;
|
||||
float: left;
|
||||
position: relative;
|
||||
border-radius: @border-radius-small;
|
||||
|
||||
// Skip tokens with custom background color
|
||||
&:not([class*=bg-]) {
|
||||
background-color: @tags-bg;
|
||||
color: @tags-color;
|
||||
|
||||
// Change background on hover
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @tags-hover-bg;
|
||||
color: @tags-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Invalid
|
||||
&.invalid {
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0;
|
||||
border-bottom: 1px dotted @brand-danger;
|
||||
|
||||
&.active {
|
||||
background-color: @gray-lighter;
|
||||
border: 1px solid @gray-lighter;
|
||||
}
|
||||
}
|
||||
|
||||
// Tag text
|
||||
.token-label {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: @padding-xs-vertical @padding-small-horizontal;
|
||||
padding-right: ((@padding-small-horizontal * 2) + (@icon-font-size / 2));
|
||||
font-size: @font-size-small;
|
||||
line-height: @line-height-small;
|
||||
}
|
||||
|
||||
// Close button
|
||||
> .close {
|
||||
font-size: 0;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
color: inherit;
|
||||
right: @padding-small-horizontal;
|
||||
line-height: 1;
|
||||
margin-top: -(@font-size-mini / 2);
|
||||
|
||||
// Icon
|
||||
&:after {
|
||||
content: '\ed6a';
|
||||
font-family: 'icomoon';
|
||||
display: block;
|
||||
font-size: @font-size-mini;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
// Hover action
|
||||
&:hover {
|
||||
.opacity(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Input field
|
||||
//
|
||||
|
||||
// Make typeahead input auto width
|
||||
.twitter-typeahead {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
// Input field
|
||||
.token-input {
|
||||
direction: ltr;
|
||||
background: none;
|
||||
width: 90px!important;
|
||||
max-width: 50%;
|
||||
min-width: 60px;
|
||||
padding: (@padding-base-vertical - @tags-spacing) @padding-small-horizontal;
|
||||
margin-top: @tags-spacing;
|
||||
margin-left: @tags-spacing;
|
||||
font-size: @font-size-small;
|
||||
line-height: @line-height-small;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// States
|
||||
//
|
||||
|
||||
// Readonly
|
||||
&.readonly .token {
|
||||
.token-label {
|
||||
padding-right: @padding-small-horizontal;
|
||||
}
|
||||
|
||||
// Hide close button in readonly
|
||||
.close {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled
|
||||
&.disabled {
|
||||
cursor: @cursor-disabled;
|
||||
|
||||
// Token style
|
||||
.token {
|
||||
|
||||
// Mute tokens
|
||||
&,
|
||||
.close {
|
||||
.opacity(0.5);
|
||||
}
|
||||
|
||||
// Revert default background on hover
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @tags-bg;
|
||||
color: @tags-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Add disabled cursor
|
||||
&,
|
||||
.token-input,
|
||||
.token,
|
||||
.token .close {
|
||||
cursor: @cursor-disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Sizing
|
||||
// ------------------------------
|
||||
|
||||
// Large
|
||||
.input-group-lg,
|
||||
.tokenfield.input-lg {
|
||||
|
||||
// Tag look
|
||||
.token > .token-label,
|
||||
.token > span,
|
||||
.token-input {
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-computed;
|
||||
padding: (@padding-large-vertical - @tags-spacing) @padding-base-horizontal;
|
||||
}
|
||||
|
||||
// Right spacing for close button
|
||||
.token > .token-label,
|
||||
.token > span {
|
||||
padding-right: ((@padding-base-horizontal * 1.5) + @font-size-mini);
|
||||
}
|
||||
|
||||
// Close button
|
||||
.token > .close {
|
||||
right: @padding-base-horizontal;
|
||||
}
|
||||
|
||||
// Readonly
|
||||
&.readonly .token > .token-label {
|
||||
padding-right: @padding-base-horizontal;
|
||||
}
|
||||
}
|
||||
|
||||
// Small
|
||||
.input-group-sm,
|
||||
.tokenfield.input-sm {
|
||||
|
||||
// Tags
|
||||
.token > .token-label,
|
||||
.token > span {
|
||||
padding: (@padding-small-vertical - @tags-spacing) @padding-small-horizontal;
|
||||
padding-right: ((@padding-small-horizontal * 1.5) + @font-size-mini);
|
||||
}
|
||||
|
||||
// Input
|
||||
.token-input {
|
||||
padding: (@padding-small-vertical - @tags-spacing) @padding-small-horizontal;
|
||||
}
|
||||
|
||||
// Close button
|
||||
.token > .close {
|
||||
right: @padding-small-horizontal;
|
||||
}
|
||||
|
||||
// Readonly
|
||||
&.readonly .token > .token-label {
|
||||
padding-right: @padding-small-horizontal;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Form wizard
|
||||
*
|
||||
* jQuery plugin which turns a form into a multistep wizard
|
||||
*
|
||||
* Version: 1.1
|
||||
* Latest update: Mar 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Core
|
||||
// ------------------------------
|
||||
|
||||
// Container
|
||||
.panel-flat > .ui-formwizard {
|
||||
border-top: 1px solid @panel-inner-border;
|
||||
}
|
||||
|
||||
// Title
|
||||
.form-wizard-title {
|
||||
margin: 0 0 @line-height-computed 0;
|
||||
padding-bottom: @content-padding-large;
|
||||
border-bottom: 1px solid @panel-inner-border;
|
||||
}
|
||||
|
||||
// Count
|
||||
.form-wizard-count {
|
||||
float: left;
|
||||
display: block;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid @brand-success;
|
||||
color: @brand-success;
|
||||
text-align: center;
|
||||
line-height: 34px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
// Step
|
||||
.ui-formwizard .step {
|
||||
padding: @content-padding-large;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
// Pagination
|
||||
// ------------------------------
|
||||
|
||||
.form-wizard-actions {
|
||||
text-align: right;
|
||||
padding: @content-padding-large;
|
||||
padding-top: 0;
|
||||
|
||||
.panel-body & {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.btn + .btn {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,353 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Steps wizard
|
||||
*
|
||||
* An all-in-one wizard plugin that is extremely flexible, compact and feature-rich
|
||||
*
|
||||
* Version: 1.2
|
||||
* Latest update: Aug 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Core
|
||||
// ------------------------------
|
||||
|
||||
.wizard {
|
||||
width: 100%;
|
||||
|
||||
// Title
|
||||
> .steps .current-info,
|
||||
> .content > .title {
|
||||
position: absolute;
|
||||
left: -99999px;
|
||||
}
|
||||
|
||||
// Wizard content
|
||||
> .content {
|
||||
position: relative;
|
||||
width: auto;
|
||||
padding: 0;
|
||||
|
||||
> .body {
|
||||
padding: 0 @content-padding-large;
|
||||
}
|
||||
|
||||
> iframe {
|
||||
border: 0 none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Steps list
|
||||
// ------------------------------
|
||||
|
||||
.wizard {
|
||||
|
||||
// Steps
|
||||
> .steps {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
// Wizard nav
|
||||
> ul {
|
||||
display: table;
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
// Wizard nav item
|
||||
> li {
|
||||
display: table-cell;
|
||||
width: auto;
|
||||
vertical-align: top;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
||||
// Link
|
||||
a {
|
||||
position: relative;
|
||||
padding-top: 48px;
|
||||
margin-top: @line-height-computed;
|
||||
margin-bottom: @line-height-computed;
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Steps indicator line
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 43px;
|
||||
width: 50%;
|
||||
height: 2px;
|
||||
background-color: @brand-info;
|
||||
z-index: 9;
|
||||
}
|
||||
&:before {
|
||||
left: 0;
|
||||
}
|
||||
&:after {
|
||||
right: 0;
|
||||
}
|
||||
&:first-child:before,
|
||||
&:last-child:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
// Current step
|
||||
&.current {
|
||||
&:after,
|
||||
~ li:before,
|
||||
~ li:after {
|
||||
background-color: @gray-lighter;
|
||||
}
|
||||
|
||||
// Link
|
||||
> a {
|
||||
color: @text-color;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
// Icon container
|
||||
.number {
|
||||
font-size: 0;
|
||||
border-color: @brand-info;
|
||||
background-color: #fff;
|
||||
color: @brand-info;
|
||||
|
||||
// Icon
|
||||
&:after {
|
||||
content: '\e913';
|
||||
font-family: 'icomoon';
|
||||
display: inline-block;
|
||||
font-size: @icon-font-size;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
line-height: 34px;
|
||||
.transition(all 0.15s ease-in-out);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled
|
||||
&.disabled {
|
||||
a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @text-muted;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Completed step
|
||||
&.done {
|
||||
|
||||
// Link
|
||||
a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
// Icon container
|
||||
.number {
|
||||
font-size: 0;
|
||||
background-color: @brand-info;
|
||||
border-color: @brand-info;
|
||||
color: #fff;
|
||||
|
||||
// Icon
|
||||
&:after {
|
||||
content: '\ed6f';
|
||||
font-family: 'icomoon';
|
||||
display: inline-block;
|
||||
font-size: @icon-font-size;
|
||||
line-height: ((@icon-font-size * 2) + 2); // Double icon + 2px border
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
.transition(all 0.15s ease-in-out);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Error
|
||||
&.error {
|
||||
.number {
|
||||
border-color: @brand-danger;
|
||||
color: @brand-danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Media queries
|
||||
@media (max-width: @screen-xs-max) {
|
||||
margin-bottom: @line-height-computed;
|
||||
|
||||
// Nav item
|
||||
> li {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 50%;
|
||||
|
||||
> a {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:first-child:before,
|
||||
&:last-child:after {
|
||||
content: '';
|
||||
}
|
||||
|
||||
&:last-child:after {
|
||||
background-color: @brand-info;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: @screen-xs) {
|
||||
|
||||
// Nav item
|
||||
> li {
|
||||
width: 100%;
|
||||
|
||||
&.current:after {
|
||||
background-color: @brand-info;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Numbers and icons
|
||||
.number {
|
||||
background-color: @panel-bg;
|
||||
color: #ccc;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: -19px;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border: 2px solid @gray-lighter;
|
||||
font-size: 14px;
|
||||
border-radius: 50%;
|
||||
z-index: 10;
|
||||
line-height: 34px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
// Add top border if inside flat panel
|
||||
.panel-flat > & {
|
||||
> .steps > ul {
|
||||
border-top: 1px solid @panel-inner-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Steps pagination
|
||||
// ------------------------------
|
||||
|
||||
.wizard {
|
||||
|
||||
// Container
|
||||
> .actions {
|
||||
position: relative;
|
||||
display: block;
|
||||
text-align: right;
|
||||
padding: @content-padding-large;
|
||||
padding-top: 0;
|
||||
|
||||
// Paging list
|
||||
> ul {
|
||||
float: right;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
// Paging item
|
||||
> li {
|
||||
float: left;
|
||||
|
||||
// Add horizontal spacing
|
||||
& + li {
|
||||
margin-left: @content-padding-small;
|
||||
}
|
||||
|
||||
// Button styling
|
||||
> a {
|
||||
background: @brand-primary;
|
||||
color: #fff;
|
||||
display: block;
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
border-radius: @border-radius-base;
|
||||
border: 1px solid transparent;
|
||||
|
||||
// Hover state
|
||||
&:hover,
|
||||
&:focus {
|
||||
.box-shadow(0 0 0 100px fade(#000, 5%) inset);
|
||||
}
|
||||
|
||||
// Active state
|
||||
&:active {
|
||||
.box-shadow(0 0 0 100px fade(#000, 10%) inset);
|
||||
}
|
||||
|
||||
// "Previous" button
|
||||
&[href="#previous"] {
|
||||
background-color: @btn-default-bg;
|
||||
color: @btn-default-color;
|
||||
border: 1px solid @btn-default-border;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
.box-shadow(0 0 0 100px fade(#000, 1%) inset);
|
||||
}
|
||||
|
||||
&:active {
|
||||
.box-shadow(0 0 0 100px fade(#000, 3%) inset)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled button
|
||||
&.disabled > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @text-muted;
|
||||
}
|
||||
|
||||
&[href="#previous"] {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
.box-shadow(none);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,190 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Stepy wizard
|
||||
*
|
||||
* jQuery plugin which generates a customizable wizard from form fieldsets
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: May 25, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Core
|
||||
// ------------------------------
|
||||
|
||||
.stepy-step {
|
||||
padding: @content-padding-large;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
|
||||
// Header
|
||||
// ------------------------------
|
||||
|
||||
.stepy-header {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
|
||||
// Add top border if inside flat panel
|
||||
.panel-flat > & {
|
||||
border-top: 1px solid @panel-default-border;
|
||||
}
|
||||
|
||||
// Nav list item
|
||||
li {
|
||||
cursor: pointer;
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
width: auto;
|
||||
padding: @content-padding-large 0;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
||||
// Step nav text label
|
||||
span {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
color: @text-muted;
|
||||
}
|
||||
|
||||
// Line indicator
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 43px;
|
||||
width: 50%;
|
||||
height: 2px;
|
||||
background-color: @brand-info;
|
||||
z-index: 9;
|
||||
}
|
||||
&:before {
|
||||
left: 0;
|
||||
}
|
||||
&:after {
|
||||
right: 0;
|
||||
}
|
||||
&:first-child:before,
|
||||
&:last-child:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
// Number indicator
|
||||
div {
|
||||
background-color: @brand-info;
|
||||
font-size: 0;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border: 2px solid @brand-info;
|
||||
z-index: 10;
|
||||
line-height: 34px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
|
||||
// Icon
|
||||
&:after {
|
||||
content: '\ed6c';
|
||||
font-family: 'icomoon';
|
||||
display: inline-block;
|
||||
font-size: @icon-font-size;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
line-height: 34px;
|
||||
.transition(all 0.15s ease-in-out);
|
||||
}
|
||||
}
|
||||
|
||||
// Active step
|
||||
&.stepy-active {
|
||||
&:after,
|
||||
~ li:before,
|
||||
~ li:after {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
~ li div {
|
||||
border-color: @gray-lighter;
|
||||
background-color: #fff;
|
||||
color: #ccc;
|
||||
font-size: 14px;
|
||||
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Icon container
|
||||
div {
|
||||
cursor: auto;
|
||||
border-color: @brand-info;
|
||||
background-color: #fff;
|
||||
color: @brand-info;
|
||||
|
||||
&:after {
|
||||
content: '\e913';
|
||||
}
|
||||
}
|
||||
|
||||
// Text label
|
||||
span {
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Media queries
|
||||
@media (max-width: @screen-sm) {
|
||||
margin-bottom: @line-height-computed;
|
||||
|
||||
// List item
|
||||
li {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 50%;
|
||||
padding-bottom: 0;
|
||||
|
||||
&:first-child:before,
|
||||
&:last-child:after {
|
||||
content: '';
|
||||
}
|
||||
&.stepy-active:last-child:after {
|
||||
background-color: @brand-info;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: @screen-xs) {
|
||||
|
||||
// List item
|
||||
li {
|
||||
width: 100%;
|
||||
|
||||
&.stepy-active:after {
|
||||
background-color: @brand-info;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Pagination
|
||||
// ------------------------------
|
||||
|
||||
.stepy-navigator {
|
||||
text-align: right;
|
||||
|
||||
.btn + .btn {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,320 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Fancybox lightbox
|
||||
*
|
||||
* Mac-style "lightbox" plugin that floats overtop of web page.
|
||||
*
|
||||
* Version: 1.2
|
||||
* Latest update: Mar 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Core
|
||||
// ------------------------------
|
||||
|
||||
.fancybox-wrap,
|
||||
.fancybox-skin,
|
||||
.fancybox-outer,
|
||||
.fancybox-inner,
|
||||
.fancybox-image,
|
||||
.fancybox-wrap iframe,
|
||||
.fancybox-wrap object,
|
||||
.fancybox-nav,
|
||||
.fancybox-nav span,
|
||||
.fancybox-tmp {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
outline: none;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
// Wrapper
|
||||
.fancybox-wrap {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 8020;
|
||||
}
|
||||
|
||||
// Skin
|
||||
.fancybox-skin {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
color: @text-color;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
// Opened lightbox
|
||||
.fancybox-opened {
|
||||
z-index: 8030;
|
||||
|
||||
.fancybox-skin {
|
||||
.box-shadow(0 1px 10px fade(#000, 20%));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Content
|
||||
// ------------------------------
|
||||
|
||||
// Image containers
|
||||
.fancybox-outer,
|
||||
.fancybox-inner {
|
||||
position: relative;
|
||||
}
|
||||
.fancybox-inner {
|
||||
overflow: hidden;
|
||||
|
||||
.fancybox-type-iframe & {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
}
|
||||
|
||||
// Image
|
||||
.fancybox-image,
|
||||
.fancybox-iframe {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.fancybox-image {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
// Loading indicator
|
||||
#fancybox-loading {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
cursor: pointer;
|
||||
z-index: 8060;
|
||||
color: #fff;
|
||||
.opacity(0.8);
|
||||
|
||||
// Icon container
|
||||
div {
|
||||
|
||||
// Icon
|
||||
&:after {
|
||||
content: '\eb55';
|
||||
font-family: 'icomoon';
|
||||
font-size: @icon-font-size;
|
||||
margin-top: -(@icon-font-size / 2);
|
||||
margin-left: -(@icon-font-size / 2);
|
||||
display: block;
|
||||
line-height: 1;
|
||||
width: @icon-font-size;
|
||||
height: @icon-font-size;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
.animation(rotation 1s ease infinite);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Close button
|
||||
.fancybox-close {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
padding: @content-padding-base;
|
||||
z-index: 8061;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
// Hover state
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: fade(#000, 25%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// Icon
|
||||
&:after {
|
||||
content: '\ed6a';
|
||||
font-family: 'icomoon';
|
||||
font-size: @icon-font-size;
|
||||
display: block;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
}
|
||||
|
||||
// Error
|
||||
.fancybox-error {
|
||||
color: @brand-danger;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
padding: @panel-body-padding;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Title
|
||||
//
|
||||
|
||||
// Helper
|
||||
.fancybox-title {
|
||||
visibility: hidden;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
text-shadow: none;
|
||||
z-index: 8050;
|
||||
|
||||
.fancybox-opened & {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
// Wrappers
|
||||
.fancybox-title-float-wrap {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 50%;
|
||||
margin-bottom: -45px;
|
||||
z-index: 8050;
|
||||
text-align: center;
|
||||
|
||||
.child {
|
||||
display: inline-block;
|
||||
margin-right: -100%;
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
background: fade(#000, 50%);
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.fancybox-title-outside-wrap {
|
||||
position: relative;
|
||||
margin-top: 10px;
|
||||
color: #fff;
|
||||
}
|
||||
.fancybox-title-inside-wrap {
|
||||
padding-top: 10px;
|
||||
}
|
||||
.fancybox-title-over-wrap {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
// Navigation
|
||||
// ------------------------------
|
||||
|
||||
// Container
|
||||
.fancybox-nav {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
z-index: 8040;
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: (@icon-font-size * 2);
|
||||
height: (@icon-font-size * 2);
|
||||
margin-top: -(@icon-font-size);
|
||||
cursor: pointer;
|
||||
padding: (@icon-font-size / 2);
|
||||
color: #fff;
|
||||
background-color: fade(#000, 50%);
|
||||
display: block;
|
||||
text-align: center;
|
||||
z-index: 8040;
|
||||
visibility: hidden;
|
||||
border-radius: @border-radius-base;
|
||||
.opacity(0);
|
||||
|
||||
&:after {
|
||||
font-family: 'icomoon';
|
||||
display: inline-block;
|
||||
font-size: @icon-font-size;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover span {
|
||||
visibility: visible;
|
||||
.opacity(1);
|
||||
}
|
||||
}
|
||||
|
||||
// Previous button
|
||||
.fancybox-prev {
|
||||
left: 0;
|
||||
|
||||
span {
|
||||
left: 10px;
|
||||
|
||||
&:after {
|
||||
content: '\e9c8';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Next button
|
||||
.fancybox-next {
|
||||
right: 0;
|
||||
|
||||
span {
|
||||
right: 10px;
|
||||
|
||||
&:after {
|
||||
content: '\e9cb';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Overlays
|
||||
// ------------------------------
|
||||
|
||||
// Helper
|
||||
.fancybox-lock {
|
||||
overflow: visible !important;
|
||||
width: auto;
|
||||
|
||||
.fancybox-overlay {
|
||||
overflow: auto;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
}
|
||||
.fancybox-lock-test {
|
||||
overflow-y: hidden !important;
|
||||
}
|
||||
|
||||
// Overlays
|
||||
.fancybox-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
z-index: 8010;
|
||||
background-color: fade(#000, 80%);
|
||||
}
|
||||
.fancybox-overlay-fixed {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
@@ -0,0 +1,413 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Image cropper
|
||||
*
|
||||
* Styles for cropper.min.js - a simple jQuery image cropping plugin
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: May 25, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Demo
|
||||
// ------------------------------
|
||||
|
||||
// Grey demo container
|
||||
.image-cropper-container {
|
||||
height: 350px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");
|
||||
}
|
||||
|
||||
// Demo previews
|
||||
.eg-preview {
|
||||
text-align: center;
|
||||
font-size: 0;
|
||||
|
||||
// Container
|
||||
.preview {
|
||||
margin: 10px auto 0 auto;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
vertical-align: middle;
|
||||
border-radius: @border-radius-small;
|
||||
|
||||
@media (min-width: @screen-sm-min) {
|
||||
display: inline-block;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
|
||||
+ .preview {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Large
|
||||
.preview-lg {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
// Base
|
||||
.preview-md {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
// Small
|
||||
.preview-sm {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
}
|
||||
|
||||
// Mini
|
||||
.preview-xs {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
// Micro
|
||||
.preview-xxs {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
@media (min-width: @screen-sm-min) {
|
||||
white-space: nowrap;
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Core
|
||||
// ------------------------------
|
||||
|
||||
// Main container
|
||||
.cropper-container {
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
direction: ltr !important;
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none;
|
||||
.user-select(none);
|
||||
|
||||
// Image
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-width: 0 !important;
|
||||
max-width: none !important;
|
||||
height: 100%;
|
||||
min-height: 0 !important;
|
||||
max-height: none !important;
|
||||
image-orientation: 0deg !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Containers
|
||||
.cropper-wrap-box,
|
||||
.cropper-canvas,
|
||||
.cropper-drag-box,
|
||||
.cropper-crop-box,
|
||||
.cropper-modal {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
// Wrap box
|
||||
.cropper-wrap-box {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Drag box
|
||||
.cropper-drag-box {
|
||||
background-color: #fff;
|
||||
.opacity(0);
|
||||
}
|
||||
|
||||
// Modal
|
||||
.cropper-modal {
|
||||
background-color: @modal-backdrop-bg;
|
||||
.opacity(@modal-backdrop-opacity);
|
||||
}
|
||||
|
||||
// View box
|
||||
.cropper-view-box {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// Dashed cropper
|
||||
.cropper-dashed {
|
||||
position: absolute;
|
||||
display: block;
|
||||
border: 0 dashed #eee;
|
||||
.opacity(0.5);
|
||||
|
||||
// Horizontal
|
||||
&.dashed-h {
|
||||
top: 33.33333%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 33.33333%;
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
// Vertical
|
||||
&.dashed-v {
|
||||
top: 0;
|
||||
left: 33.33333%;
|
||||
width: 33.33333%;
|
||||
height: 100%;
|
||||
border-right-width: 1px;
|
||||
border-left-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
// Center cropper
|
||||
.cropper-center {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
.opacity(0.75);
|
||||
|
||||
// Lines
|
||||
&:before,
|
||||
&:after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
display: block;
|
||||
background-color: #eee;
|
||||
}
|
||||
&:before {
|
||||
top: 0;
|
||||
left: -3px;
|
||||
width: 7px;
|
||||
height: 1px;
|
||||
}
|
||||
&:after {
|
||||
top: -3px;
|
||||
left: 0;
|
||||
width: 1px;
|
||||
height: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Cropper area
|
||||
//
|
||||
|
||||
// Common
|
||||
.cropper-face,
|
||||
.cropper-line,
|
||||
.cropper-point {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.opacity(0.1);
|
||||
}
|
||||
|
||||
// Main area
|
||||
.cropper-face {
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
// Lines
|
||||
.cropper-line {
|
||||
background-color: @color-primary-500;
|
||||
|
||||
// Right
|
||||
&.line-e {
|
||||
top: 0;
|
||||
right: -3px;
|
||||
width: 5px;
|
||||
cursor: e-resize;
|
||||
}
|
||||
|
||||
// Top
|
||||
&.line-n {
|
||||
top: -3px;
|
||||
left: 0;
|
||||
height: 5px;
|
||||
cursor: n-resize;
|
||||
}
|
||||
|
||||
// Left
|
||||
&.line-w {
|
||||
top: 0;
|
||||
left: -3px;
|
||||
width: 5px;
|
||||
cursor: w-resize;
|
||||
}
|
||||
|
||||
// Bottom
|
||||
&.line-s {
|
||||
bottom: -3px;
|
||||
left: 0;
|
||||
height: 5px;
|
||||
cursor: s-resize;
|
||||
}
|
||||
}
|
||||
|
||||
// Points
|
||||
.cropper-point {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: @color-primary-500;
|
||||
.opacity(0.75);
|
||||
|
||||
&.point-e {
|
||||
top: 50%;
|
||||
right: -3px;
|
||||
margin-top: -3px;
|
||||
cursor: e-resize;
|
||||
}
|
||||
|
||||
&.point-n {
|
||||
top: -3px;
|
||||
left: 50%;
|
||||
margin-left: -3px;
|
||||
cursor: n-resize;
|
||||
}
|
||||
|
||||
&.point-w {
|
||||
top: 50%;
|
||||
left: -3px;
|
||||
margin-top: -3px;
|
||||
cursor: w-resize;
|
||||
}
|
||||
|
||||
&.point-s {
|
||||
bottom: -3px;
|
||||
left: 50%;
|
||||
margin-left: -3px;
|
||||
cursor: s-resize;
|
||||
}
|
||||
|
||||
&.point-ne {
|
||||
top: -3px;
|
||||
right: -3px;
|
||||
cursor: ne-resize;
|
||||
}
|
||||
|
||||
&.point-nw {
|
||||
top: -3px;
|
||||
left: -3px;
|
||||
cursor: nw-resize;
|
||||
}
|
||||
|
||||
&.point-sw {
|
||||
bottom: -3px;
|
||||
left: -3px;
|
||||
cursor: sw-resize;
|
||||
}
|
||||
|
||||
&.point-se {
|
||||
right: -3px;
|
||||
bottom: -3px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: se-resize;
|
||||
.opacity(1);
|
||||
|
||||
&:before {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
right: -50%;
|
||||
bottom: -50%;
|
||||
display: block;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background-color: @color-primary-500;
|
||||
.opacity(0);
|
||||
}
|
||||
|
||||
@media (min-width: @screen-sm-min) {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
@media (min-width: @screen-md-min) {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
@media (min-width: @screen-lg-min) {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
.opacity(0.75);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Misc
|
||||
// ------------------------------
|
||||
|
||||
// Background
|
||||
.cropper-bg {
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
|
||||
}
|
||||
|
||||
// Invisible elements
|
||||
.cropper-invisible {
|
||||
.opacity(0);
|
||||
}
|
||||
|
||||
// Hidden elements
|
||||
.cropper-hide {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.cropper-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// Disabled elements
|
||||
.cropper-disabled {
|
||||
.cropper-drag-box,
|
||||
.cropper-face,
|
||||
.cropper-line,
|
||||
.cropper-point {
|
||||
cursor: @cursor-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Cursors
|
||||
//
|
||||
|
||||
// Move
|
||||
.cropper-move {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
// Crop
|
||||
.cropper-crop {
|
||||
cursor: crosshair;
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Bootbox modal extension
|
||||
*
|
||||
* Styles for bootbox.min.js - advanced Bootstrap modals
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: Oct 9, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Base
|
||||
// ------------------------------
|
||||
|
||||
.bootbox {
|
||||
|
||||
// Change modal title size
|
||||
.modal-title {
|
||||
font-size: @font-size-h6;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,134 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # jGrowl notifications
|
||||
*
|
||||
* Styles for jgrowl.min.js - an unobtrusive notification system for web applications
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: May 25, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Core
|
||||
// ------------------------------
|
||||
|
||||
// Base
|
||||
.jGrowl {
|
||||
z-index: 2001;
|
||||
position: absolute;
|
||||
|
||||
body > & {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Positions
|
||||
//
|
||||
|
||||
// Top
|
||||
&.top-left {
|
||||
left: @grid-gutter-width;
|
||||
top: @grid-gutter-width;
|
||||
}
|
||||
&.top-center {
|
||||
left: 50%;
|
||||
top: @grid-gutter-width;
|
||||
margin-left: -150px;
|
||||
}
|
||||
&.top-right {
|
||||
right: @grid-gutter-width;
|
||||
top: @grid-gutter-width;
|
||||
}
|
||||
|
||||
// Center
|
||||
&.center {
|
||||
top: 40%;
|
||||
width: 300px;
|
||||
left: 50%;
|
||||
margin-left: -150px;
|
||||
margin-top: -35px;
|
||||
|
||||
.jGrowl-notification,
|
||||
.jGrowl-closer {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Bottom
|
||||
&.bottom-left {
|
||||
left: @grid-gutter-width;
|
||||
bottom: @grid-gutter-width;
|
||||
}
|
||||
&.bottom-center {
|
||||
left: 50%;
|
||||
bottom: @grid-gutter-width;
|
||||
margin-left: -150px;
|
||||
}
|
||||
&.bottom-right {
|
||||
right: @grid-gutter-width;
|
||||
bottom: @grid-gutter-width;
|
||||
}
|
||||
|
||||
// Hide on print
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Notification styles
|
||||
.jGrowl-notification {
|
||||
margin-bottom: (@line-height-computed / 2);
|
||||
width: 300px;
|
||||
text-align: left;
|
||||
display: none;
|
||||
|
||||
// Header
|
||||
.jGrowl-header {
|
||||
font-size: @font-size-h6;
|
||||
margin-bottom: 5px;
|
||||
|
||||
&:empty {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Close button
|
||||
.jGrowl-close {
|
||||
font-weight: @close-font-weight;
|
||||
background: none;
|
||||
border: 0;
|
||||
font-size: @font-size-h5;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
float: right;
|
||||
color: inherit;
|
||||
outline: 0;
|
||||
margin-left: 10px;
|
||||
.opacity(.75);
|
||||
|
||||
&:hover {
|
||||
.opacity(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// "Close all" closer
|
||||
.jGrowl-closer {
|
||||
padding: 5px 0;
|
||||
cursor: pointer;
|
||||
margin-top: 5px;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
width: 300px;
|
||||
border-radius: @border-radius-base;
|
||||
border: 1px solid #ddd;
|
||||
color: @gray-light;
|
||||
|
||||
.alert-rounded + & {
|
||||
border-radius: @border-radius-large;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,512 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # PNotify notifications
|
||||
*
|
||||
* Styles for pnotify.min.js - a flexible JavaScript notification plugin
|
||||
*
|
||||
* Version: 1.1
|
||||
* Latest update: Mar 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Core
|
||||
// ------------------------------
|
||||
|
||||
.ui-pnotify {
|
||||
top: @line-height-computed;
|
||||
right: @grid-gutter-width;
|
||||
position: absolute;
|
||||
height: auto;
|
||||
z-index: 2;
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
// Related to window
|
||||
body > & {
|
||||
position: fixed;
|
||||
z-index: 100040;
|
||||
}
|
||||
|
||||
// Rounded alerts
|
||||
&.alert-rounded > .ui-pnotify-container {
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
// Solid color alerts
|
||||
&[class*=bg-] > .ui-pnotify-container {
|
||||
background-color: inherit;
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// Custom text and light background colors
|
||||
&[class*=text-] > .ui-pnotify-container,
|
||||
&[class*=alpha-] > .ui-pnotify-container {
|
||||
background-color: inherit;
|
||||
border-color: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Stack positions
|
||||
//
|
||||
|
||||
// Alternate stack initial positioning
|
||||
&.stack-top-left,
|
||||
&.stack-bottom-left {
|
||||
left: @grid-gutter-width;
|
||||
right: auto;
|
||||
}
|
||||
&.stack-bottom-right,
|
||||
&.stack-bottom-left {
|
||||
bottom: @line-height-computed;
|
||||
top: auto;
|
||||
}
|
||||
&.stack-modal {
|
||||
left: 50%;
|
||||
right: auto;
|
||||
margin-left: -150px;
|
||||
}
|
||||
|
||||
// Custom stack positions
|
||||
&.stack-custom-right {
|
||||
top: auto;
|
||||
left: auto;
|
||||
bottom: 200px;
|
||||
right: 200px;
|
||||
}
|
||||
&.stack-custom-left {
|
||||
top: 200px;
|
||||
left: 200px;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
}
|
||||
&.stack-custom-top {
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
&.stack-custom-bottom {
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Animations
|
||||
//
|
||||
|
||||
// Display notification
|
||||
&.ui-pnotify-in {
|
||||
display: block!important;
|
||||
}
|
||||
|
||||
// Move notification
|
||||
&.ui-pnotify-move {
|
||||
.transition(~"left .5s ease, top .5s ease, right .5s ease, bottom .5s ease");
|
||||
}
|
||||
|
||||
// Slow fading
|
||||
&.ui-pnotify-fade-slow {
|
||||
.transition(opacity linear 0.6s);
|
||||
.opacity(0);
|
||||
|
||||
&.ui-pnotify.ui-pnotify-move {
|
||||
.transition(~"opacity .6s linear, left .5s ease, top .5s ease, right .5s ease, bottom .5s ease");
|
||||
}
|
||||
}
|
||||
|
||||
// Normal fading
|
||||
&.ui-pnotify-fade-normal {
|
||||
.transition(opacity linear 0.4s);
|
||||
.opacity(0);
|
||||
|
||||
&.ui-pnotify.ui-pnotify-move {
|
||||
.transition(~"opacity .4s linear, left .5s ease, top .5s ease, right .5s ease, bottom .5s ease");
|
||||
}
|
||||
}
|
||||
|
||||
// Fast fading
|
||||
&.ui-pnotify-fade-fast {
|
||||
transition: opacity .2s linear;
|
||||
opacity: 0;
|
||||
.transition(opacity linear 0.2s);
|
||||
.opacity(0);
|
||||
|
||||
&.ui-pnotify.ui-pnotify-move {
|
||||
.transition(~"opacity .2s linear, left .5s ease, top .5s ease, right .5s ease, bottom .5s ease");
|
||||
}
|
||||
}
|
||||
|
||||
// Fading
|
||||
&.ui-pnotify-fade-in {
|
||||
.opacity(1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Notification layout
|
||||
// ------------------------------
|
||||
|
||||
// Container
|
||||
.ui-pnotify-container {
|
||||
padding: @content-padding-base @content-padding-large;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
// Clearing floats
|
||||
&:after {
|
||||
content: " ";
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
// Roundless notifications
|
||||
&.ui-pnotify-sharp {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Title
|
||||
.ui-pnotify-title {
|
||||
display: block;
|
||||
margin-top: 0;
|
||||
margin-bottom: @padding-base-vertical;
|
||||
font-size: @font-size-h6;
|
||||
}
|
||||
|
||||
// Text
|
||||
.ui-pnotify-text {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Notification icon
|
||||
.ui-pnotify-icon {
|
||||
display: block;
|
||||
float: left;
|
||||
line-height: 1;
|
||||
|
||||
> [class^=icon-] {
|
||||
margin-top: (@line-height-computed - @icon-font-size);
|
||||
margin-right: @content-padding-base;
|
||||
}
|
||||
}
|
||||
|
||||
// Control buttons
|
||||
.ui-pnotify-closer,
|
||||
.ui-pnotify-sticker {
|
||||
float: right;
|
||||
margin-left: 8px;
|
||||
margin-top: 4px;
|
||||
line-height: 1;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Utility classes
|
||||
// ------------------------------
|
||||
|
||||
// Overlay
|
||||
.ui-pnotify-modal-overlay {
|
||||
background-color: fade(#000, 50%);
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
|
||||
body > & {
|
||||
position: fixed;
|
||||
z-index: 100039;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Notification theme
|
||||
// ------------------------------
|
||||
|
||||
.brighttheme {
|
||||
border: 1px solid;
|
||||
|
||||
.ui-pnotify[class*=bg-] > & {
|
||||
background-color: inherit;
|
||||
border-color: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Contextual alternatives
|
||||
//
|
||||
|
||||
.brighttheme-notice {
|
||||
background-color: @alert-warning-bg;
|
||||
border-color: @alert-warning-border;
|
||||
}
|
||||
.brighttheme-info {
|
||||
background-color: @alert-primary-bg;
|
||||
border-color: @alert-primary-border;
|
||||
}
|
||||
.brighttheme-success {
|
||||
background-color: @alert-success-bg;
|
||||
border-color: @alert-success-border;
|
||||
}
|
||||
.brighttheme-error {
|
||||
background-color: @alert-danger-bg;
|
||||
border-color: @alert-danger-border;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Notification controls
|
||||
//
|
||||
|
||||
// Base
|
||||
.brighttheme-icon-closer,
|
||||
.brighttheme-icon-sticker {
|
||||
position: relative;
|
||||
width: @icon-font-size;
|
||||
height: @icon-font-size;
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
outline: 0;
|
||||
|
||||
// Icons
|
||||
&:after {
|
||||
content: '';
|
||||
font-family: 'Icomoon';
|
||||
font-size: 10px;
|
||||
display: block;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
}
|
||||
|
||||
// Closer icon
|
||||
.brighttheme-icon-closer:after {
|
||||
content: "\ed6a";
|
||||
}
|
||||
|
||||
// Sticker icon
|
||||
.brighttheme-icon-sticker:after {
|
||||
content: "\ee70";
|
||||
}
|
||||
|
||||
// Sticked icon
|
||||
.brighttheme-icon-sticker.brighttheme-icon-stuck:after {
|
||||
content: "\ee75";
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Custom alert styles
|
||||
//
|
||||
|
||||
// Styled alert
|
||||
.ui-pnotify[class*=alert-styled-] {
|
||||
border-width: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Left position
|
||||
.ui-pnotify.alert-styled-left {
|
||||
|
||||
// Border
|
||||
.brighttheme {
|
||||
border-left-width: (((@alert-padding * 2) + @icon-font-size) - 2);
|
||||
}
|
||||
|
||||
// Icon
|
||||
&:after {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Right position
|
||||
.ui-pnotify.alert-styled-right {
|
||||
|
||||
// Border
|
||||
.brighttheme {
|
||||
border-right-width: (((@alert-padding * 2) + @icon-font-size) - 2);
|
||||
}
|
||||
|
||||
// Icon
|
||||
&:after {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Action bar
|
||||
//
|
||||
|
||||
.brighttheme {
|
||||
|
||||
// Base
|
||||
.ui-pnotify-action-bar {
|
||||
padding-top: @content-padding-base;
|
||||
|
||||
// Inputs
|
||||
textarea,
|
||||
input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: 1px solid @input-border;
|
||||
background-color: @input-bg;
|
||||
margin-bottom: @content-padding-base!important;
|
||||
color: @input-color;
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
|
||||
// In colored background
|
||||
.ui-pnotify[class*=bg-] & {
|
||||
border-color: #fff;
|
||||
color: #fff;
|
||||
.placeholder(@input-placeholder-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Custom background color
|
||||
//
|
||||
|
||||
// Inputs
|
||||
.ui-pnotify[class*=bg-] .form-control {
|
||||
border-bottom-color: #fff;
|
||||
color: #fff;
|
||||
.placeholder(@input-placeholder-light);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Notification history
|
||||
// ------------------------------
|
||||
|
||||
// Container
|
||||
.ui-pnotify-history-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: @grid-gutter-width;
|
||||
width: 70px;
|
||||
border-top: none;
|
||||
padding: 0;
|
||||
z-index: 10000;
|
||||
.border-top-radius(0);
|
||||
|
||||
// Fixed container
|
||||
&.ui-pnotify-history-fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
// Header
|
||||
.ui-pnotify-history-header {
|
||||
padding: 2px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Button
|
||||
button {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Pulldown
|
||||
.ui-pnotify-history-pulldown {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Mobile view setup
|
||||
// ------------------------------
|
||||
|
||||
@media (max-width: @screen-xs) {
|
||||
|
||||
// On mobile
|
||||
.ui-pnotify-mobile-able {
|
||||
|
||||
// Notification
|
||||
&.ui-pnotify {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
width: auto !important;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-font-smoothing: antialiased;
|
||||
-ms-font-smoothing: antialiased;
|
||||
font-smoothing: antialiased;
|
||||
|
||||
// Shadow
|
||||
.ui-pnotify-shadow {
|
||||
border-bottom-width: 5px;
|
||||
.box-shadow(none);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Alternate stack initial positioning
|
||||
//
|
||||
|
||||
&.stack-top-left,
|
||||
&.stack-bottom-left {
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
&.stack-bottom-right,
|
||||
&.stack-bottom-left {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
|
||||
// Shadow
|
||||
.ui-pnotify-shadow,
|
||||
.ui-pnotify-shadow {
|
||||
border-top-width: 5px;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Utility classes
|
||||
//
|
||||
|
||||
// Fade out
|
||||
&.ui-pnotify-nonblock-fade {
|
||||
.opacity(0.2);
|
||||
}
|
||||
|
||||
// Hide
|
||||
&.ui-pnotify-nonblock-hide {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Container
|
||||
.ui-pnotify-container {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,323 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Anytime picker
|
||||
*
|
||||
* jQuery datepicker/timepicker and a Date/String parse/format utility
|
||||
*
|
||||
* Version: 1.2
|
||||
* Latest update: Mar 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Core
|
||||
// ------------------------------
|
||||
|
||||
// Base
|
||||
.AnyTime-pkr {
|
||||
text-align: center;
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.AnyTime-date {
|
||||
float: left;
|
||||
|
||||
& + .AnyTime-time {
|
||||
margin-left: 50px;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown container
|
||||
.AnyTime-win {
|
||||
padding: (@list-spacing * 2);
|
||||
background-color: @dropdown-bg;
|
||||
border: 1px solid @dropdown-border;
|
||||
display: inline-block;
|
||||
border-radius: @border-radius-base;
|
||||
z-index: 10;
|
||||
.box-shadow(0 1px 3px fade(#000, 10%));
|
||||
}
|
||||
|
||||
// Clock
|
||||
.AnyTime-cloak {
|
||||
position: absolute;
|
||||
.opacity(0.7);
|
||||
}
|
||||
|
||||
// Title
|
||||
.AnyTime-hdr {
|
||||
font-size: @font-size-h6;
|
||||
margin: @content-padding-base @content-padding-small;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// Close button
|
||||
.AnyTime-x-btn {
|
||||
display: none;
|
||||
font-size: 0;
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
border-radius: @border-radius-small;
|
||||
.opacity(0.6);
|
||||
|
||||
&:hover {
|
||||
.opacity(1);
|
||||
}
|
||||
|
||||
// Icon
|
||||
&:after {
|
||||
content: '\ed6b';
|
||||
font-family: 'icomoon';
|
||||
font-size: @icon-font-size;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
}
|
||||
|
||||
// Label
|
||||
.AnyTime-lbl {
|
||||
font-size: @font-size-base;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 500;
|
||||
margin-top: 25px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: @list-spacing;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Highlight item colors
|
||||
// ------------------------------
|
||||
|
||||
// Empty buttons in the table
|
||||
.AnyTime-dom-btn-empty,
|
||||
.AnyTime-min-ten-btn-empty,
|
||||
.AnyTime-min-one-btn-empty,
|
||||
.AnyTime-sec-ten-btn-empty,
|
||||
.AnyTime-sec-one-btn-empty {
|
||||
background-color: #fafafa;
|
||||
border: 1px solid #fff;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
// Years
|
||||
.AnyTime-yrs {
|
||||
.AnyTime-cur-btn {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: @brand-danger;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Months
|
||||
.AnyTime-mons {
|
||||
.AnyTime-cur-btn {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: @color-teal-400;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Time
|
||||
.AnyTime-time {
|
||||
.AnyTime-cur-btn {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: @color-slate-500;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Calendar
|
||||
.AnyTime-dom-table,
|
||||
.AnyTime-body-yr-selector {
|
||||
.AnyTime-cur-btn {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: @brand-primary;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Periods
|
||||
// ------------------------------
|
||||
|
||||
// Years
|
||||
.AnyTime-yrs-past-btn,
|
||||
.AnyTime-yrs-ahead-btn {
|
||||
display: inline-block;
|
||||
}
|
||||
.AnyTime-yr-prior-btn,
|
||||
.AnyTime-yr-cur-btn,
|
||||
.AnyTime-yr-next-btn {
|
||||
display: inline-block;
|
||||
min-width: 50px;
|
||||
}
|
||||
|
||||
// Months
|
||||
.AnyTime-mons:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
// Date calendar
|
||||
// ------------------------------
|
||||
|
||||
// Table
|
||||
.AnyTime-dom-table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Week days
|
||||
.AnyTime-pkr th.AnyTime-dow {
|
||||
color: @text-muted;
|
||||
font-size: @font-size-small;
|
||||
padding: @padding-base-vertical;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
// Buttons
|
||||
.AnyTime-mon-btn {
|
||||
float: left;
|
||||
}
|
||||
.AnyTime-mon7-btn {
|
||||
clear: left;
|
||||
}
|
||||
.AnyTime-dom-btn:hover {
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
}
|
||||
|
||||
// Make elements inline
|
||||
.AnyTime-time,
|
||||
.AnyTime-hrs-am,
|
||||
.AnyTime-hrs-pm,
|
||||
.AnyTime-mins-tens,
|
||||
.AnyTime-mins-ones,
|
||||
.AnyTime-secs-tens,
|
||||
.AnyTime-secs-ones,
|
||||
.AnyTime-hrs,
|
||||
.AnyTime-mins,
|
||||
.AnyTime-secs,
|
||||
.AnyTime-offs {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Button
|
||||
.AnyTime-btn {
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
cursor: pointer;
|
||||
border-radius: @border-radius-small;
|
||||
|
||||
&:hover {
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Time
|
||||
// ------------------------------
|
||||
|
||||
// Time buttons
|
||||
.AnyTime-hr-btn,
|
||||
.AnyTime-min-ten-btn,
|
||||
.AnyTime-min-one-btn,
|
||||
.AnyTime-sec-ten-btn,
|
||||
.AnyTime-sec-one-btn {
|
||||
min-width: 40px;
|
||||
}
|
||||
|
||||
.AnyTime-hrs-pm,
|
||||
.AnyTime-mins-ones,
|
||||
.AnyTime-secs-ones {
|
||||
margin-left: 2px;
|
||||
}
|
||||
.AnyTime-mins-tens,
|
||||
.AnyTime-secs-tens {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
// Off buttons
|
||||
.AnyTime-off-cur-btn {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
}
|
||||
.AnyTime-off-select-btn {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.AnyTime-off-selector {
|
||||
margin: 10px;
|
||||
position: absolute;
|
||||
}
|
||||
.AnyTime-body-off-selector {
|
||||
margin: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
white-space: nowrap
|
||||
}
|
||||
.AnyTime-off-off-btn {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
// Year and era
|
||||
// ------------------------------
|
||||
|
||||
// Year selector
|
||||
.AnyTime-yr-selector {
|
||||
position: absolute;
|
||||
width: 90%;
|
||||
}
|
||||
.AnyTime-body-yr-selector {
|
||||
margin: 0;
|
||||
}
|
||||
.AnyTime-yr-mil,
|
||||
.AnyTime-yr-cent,
|
||||
.AnyTime-yr-dec,
|
||||
.AnyTime-yr-yr,
|
||||
.AnyTime-yr-era {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
// Era button
|
||||
.AnyTime-era-btn {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
|
||||
// Media queries
|
||||
@media (max-width: @screen-sm) {
|
||||
.AnyTime-pkr .AnyTime-date {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.AnyTime-mon-btn {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.AnyTime-date + .AnyTime-time {
|
||||
margin-left: 0;
|
||||
margin-top: 25px;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,189 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Datepicker for Bootstrap
|
||||
*
|
||||
* Styles for bootstrap datepicker. Comes as a part of datepaginator.js plugin
|
||||
*
|
||||
* Version: 1.2
|
||||
* Latest update: Mar 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Core
|
||||
// ------------------------------
|
||||
|
||||
.datepicker {
|
||||
> div {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Dropdown menu
|
||||
&.datepicker-dropdown {
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
padding: (@list-spacing * 2);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Datepicker table
|
||||
// ------------------------------
|
||||
|
||||
.datepicker {
|
||||
|
||||
// Main table
|
||||
table {
|
||||
margin: 0;
|
||||
|
||||
// Table items
|
||||
tr td {
|
||||
&.day:hover {
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.old,
|
||||
&.new {
|
||||
color: @text-muted;
|
||||
}
|
||||
|
||||
// Disabled
|
||||
&.disabled {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
color: @text-muted;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
// Today
|
||||
&.today {
|
||||
&,
|
||||
&.disabled {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Date range
|
||||
&.range {
|
||||
&,
|
||||
&.disabled {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.today {
|
||||
&,
|
||||
&.disabled,
|
||||
&.active {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Active date
|
||||
&.active,
|
||||
span.active {
|
||||
&,
|
||||
&.disabled {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: @color-teal-400;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Year and month selection
|
||||
span {
|
||||
display: block;
|
||||
width: 31%;
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
float: left;
|
||||
margin: 1%;
|
||||
cursor: pointer;
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
// Hover state
|
||||
&:hover {
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&.disabled {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
color: @text-muted;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
&.old,
|
||||
&.new {
|
||||
color: @text-muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Switch
|
||||
th.datepicker-switch {
|
||||
font-size: @font-size-h6;
|
||||
font-weight: 400;
|
||||
}
|
||||
thead tr:first-child th,
|
||||
tfoot tr th {
|
||||
cursor: pointer;
|
||||
padding-top: @content-padding-base;
|
||||
padding-bottom: @content-padding-base;
|
||||
line-height: 1;
|
||||
}
|
||||
.cw {
|
||||
width: 16px;
|
||||
padding: 0 2px 0 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
thead tr:first-child th.cw {
|
||||
cursor: default;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Table styles
|
||||
.table-condensed {
|
||||
td,
|
||||
th {
|
||||
text-align: center;
|
||||
padding: @content-padding-small;
|
||||
border-radius: @border-radius-base;
|
||||
border: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// Days of the week
|
||||
th.dow {
|
||||
padding-top: (@list-spacing * 2);
|
||||
color: @text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
// If table is striped
|
||||
.table-striped & table tr {
|
||||
th,
|
||||
td {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,128 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Date paginator
|
||||
*
|
||||
* A jQuery plugin which adds date selection to the Bootstrap pagination component
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: May 25, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Core
|
||||
// ------------------------------
|
||||
|
||||
.datepaginator {
|
||||
height: 72px;
|
||||
text-align: center;
|
||||
}
|
||||
.datepaginator-sm {
|
||||
height: 68px;
|
||||
}
|
||||
.datepaginator-lg {
|
||||
height: 76px;
|
||||
}
|
||||
|
||||
|
||||
// Pagination styling
|
||||
// ------------------------------
|
||||
|
||||
.datepaginator {
|
||||
.pagination {
|
||||
white-space: nowrap;
|
||||
|
||||
// List items
|
||||
> li {
|
||||
display: inline-block;
|
||||
|
||||
// All links
|
||||
> a {
|
||||
min-width: auto;
|
||||
text-align: center;
|
||||
border-radius: @border-radius-base;
|
||||
margin-left: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Square corners
|
||||
.dp-nav-square-edges {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// Day off
|
||||
.dp-off {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
// No select
|
||||
.dp-no-select {
|
||||
color: #ccc;
|
||||
background-color: #fafafa;
|
||||
|
||||
&:hover {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
}
|
||||
|
||||
// Calendar
|
||||
#dp-calendar {
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
top: 6px;
|
||||
}
|
||||
|
||||
// Nav arrows
|
||||
> .dp-nav {
|
||||
height: 72px;
|
||||
padding: 29px 0;
|
||||
width: 38px;
|
||||
line-height: 1;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
> a.dp-nav-sm {
|
||||
height: 68px;
|
||||
padding: 27px 0;
|
||||
}
|
||||
> a.dp-nav-lg {
|
||||
height: 76px;
|
||||
padding: 31px 0;
|
||||
}
|
||||
|
||||
// Items
|
||||
> a.dp-item {
|
||||
height: 72px;
|
||||
padding: 15px 0;
|
||||
width: 35px;
|
||||
}
|
||||
|
||||
> a.dp-item-sm {
|
||||
height: 68px;
|
||||
padding: 13px 0;
|
||||
}
|
||||
> a.dp-item-lg {
|
||||
height: 76px;
|
||||
padding: 17px 0;
|
||||
}
|
||||
|
||||
// Dates highlight
|
||||
> .dp-today {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @brand-primary;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
> .dp-selected {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @color-teal-400;
|
||||
color: #fff;
|
||||
width: 140px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,511 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Daterange picker
|
||||
*
|
||||
* Date range picker component for Bootstrap
|
||||
*
|
||||
* Version: 1.2
|
||||
* Latest update: Mar 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Core
|
||||
// ------------------------------
|
||||
|
||||
.daterangepicker {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
margin-top: 5px;
|
||||
width: auto;
|
||||
padding: 0;
|
||||
|
||||
// Override default dropdown styles
|
||||
&.dropdown-menu {
|
||||
max-width: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
z-index: @zindex-dropdown;
|
||||
.box-shadow(none);
|
||||
}
|
||||
|
||||
// Dropup
|
||||
&.dropup {
|
||||
margin-top: -(@list-spacing);
|
||||
}
|
||||
|
||||
// Align containers
|
||||
.ranges,
|
||||
.calendar {
|
||||
float: left;
|
||||
}
|
||||
|
||||
// Display calendars on left side
|
||||
&.opensleft {
|
||||
.calendars {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
// Display calendars on right side
|
||||
&.opensright {
|
||||
.calendars {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
// And remove floats in single picker
|
||||
&.single {
|
||||
.calendar {
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
// Hide range menu
|
||||
.ranges {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Display calendars
|
||||
&.show-calendar .calendar {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Calendar
|
||||
.calendar {
|
||||
display: none;
|
||||
background-color: @dropdown-bg;
|
||||
border: 1px solid @dropdown-border;
|
||||
border-radius: @border-radius-base;
|
||||
margin: @list-spacing;
|
||||
padding: (@list-spacing * 2);
|
||||
.box-shadow(0 1px 3px fade(#000, 10%));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Table
|
||||
// ------------------------------
|
||||
|
||||
.daterangepicker {
|
||||
|
||||
// Table defaults
|
||||
table {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
|
||||
tbody {
|
||||
th,
|
||||
td {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Cells
|
||||
th,
|
||||
td {
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
|
||||
&.week {
|
||||
font-size: 80%;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
// Header
|
||||
th {
|
||||
color: @text-muted;
|
||||
font-weight: normal;
|
||||
font-size: @font-size-small;
|
||||
|
||||
// Icons
|
||||
> i {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
// Arrow buttons
|
||||
&.prev,
|
||||
&.next {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Available dates
|
||||
&.available {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Table content cells
|
||||
td {
|
||||
|
||||
// Available days
|
||||
&.available {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Inactive days
|
||||
&.off,
|
||||
&.disabled {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
// Disabled days
|
||||
&.disabled {
|
||||
cursor: @cursor-disabled;
|
||||
}
|
||||
|
||||
// Highlight dates in range
|
||||
&.in-range {
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
}
|
||||
|
||||
// Active date
|
||||
&.active {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @color-teal-400;
|
||||
color: #fff;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Override default condensed styles
|
||||
.table-condensed {
|
||||
tr > th,
|
||||
tr > td {
|
||||
padding: @padding-xs-horizontal;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// Add extra top padding to day names
|
||||
thead tr:last-child th {
|
||||
padding-top: (@list-spacing * 2);
|
||||
}
|
||||
|
||||
// Month heading
|
||||
.month {
|
||||
font-size: @font-size-h6;
|
||||
line-height: 1;
|
||||
color: @text-color;
|
||||
padding-top: @content-padding-base;
|
||||
padding-bottom: @content-padding-base;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Elements
|
||||
// ------------------------------
|
||||
|
||||
.daterangepicker {
|
||||
|
||||
// Selects
|
||||
select {
|
||||
display: inline-block;
|
||||
|
||||
&.monthselect {
|
||||
margin-right: 2%;
|
||||
width: 56%;
|
||||
}
|
||||
|
||||
&.yearselect {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
&.hourselect,
|
||||
&.minuteselect,
|
||||
&.secondselect,
|
||||
&.ampmselect {
|
||||
width: 60px;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Text inputs
|
||||
.daterangepicker_input {
|
||||
position: relative;
|
||||
|
||||
// Calendar icons
|
||||
i {
|
||||
position: absolute;
|
||||
right: @padding-small-horizontal;
|
||||
top: auto;
|
||||
bottom: ((@input-height-base - @icon-font-size) / 2);
|
||||
color: @text-muted;
|
||||
}
|
||||
|
||||
// Add right padding for inputs
|
||||
input {
|
||||
padding-left: @padding-small-horizontal;
|
||||
padding-right: (@padding-small-horizontal + @icon-font-size + @padding-base-vertical);
|
||||
}
|
||||
}
|
||||
|
||||
// Time picker
|
||||
.calendar-time {
|
||||
text-align: center;
|
||||
margin: @padding-base-horizontal 0;
|
||||
|
||||
// Disabled state
|
||||
select.disabled {
|
||||
color: #ccc;
|
||||
cursor: @cursor-disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Ranges dropdown
|
||||
// ------------------------------
|
||||
|
||||
.ranges {
|
||||
background-color: @dropdown-bg;
|
||||
position: relative;
|
||||
border: 1px solid @dropdown-border;
|
||||
border-radius: @border-radius-base;
|
||||
width: 200px;
|
||||
margin-top: @list-spacing;
|
||||
.box-shadow(0 1px 3px fade(#000, 10%));
|
||||
|
||||
// Remove left margin if on right side
|
||||
.opensright & {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// Remove left margin if on left side
|
||||
.opensleft & {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
// List with links
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: @list-spacing 0;
|
||||
|
||||
// Add top border
|
||||
& + .daterangepicker-inputs {
|
||||
border-top: 1px solid @dropdown-divider-bg;
|
||||
}
|
||||
|
||||
// List item
|
||||
li {
|
||||
color: @text-color;
|
||||
padding: (@padding-base-vertical + 1) @padding-base-horizontal;
|
||||
cursor: pointer;
|
||||
margin-top: 1px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
// Hover bg color
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
}
|
||||
|
||||
// Active item color
|
||||
&.active {
|
||||
color: @dropdown-link-active-color;
|
||||
background-color: @color-teal-400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Text inputs
|
||||
.daterangepicker-inputs {
|
||||
padding: @padding-base-horizontal;
|
||||
padding-top: @padding-base-horizontal + @list-spacing; // we need to match menu vertical spacing
|
||||
|
||||
// Inputs container
|
||||
.daterangepicker_input {
|
||||
|
||||
// Add top margin to the second field
|
||||
& + .daterangepicker_input {
|
||||
margin-top: @padding-base-horizontal + @list-spacing;;
|
||||
}
|
||||
|
||||
// Text label
|
||||
> span {
|
||||
display: block;
|
||||
font-size: @font-size-small;
|
||||
margin-bottom: @padding-base-vertical;
|
||||
color: @text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
// Add top divider
|
||||
& + .range_inputs {
|
||||
border-top: 1px solid @dropdown-divider-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons area
|
||||
.range_inputs {
|
||||
padding: @padding-base-horizontal;
|
||||
|
||||
// Buttons
|
||||
.btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.btn + .btn {
|
||||
margin-top: @padding-base-horizontal;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Setup mobile view
|
||||
@media (min-width: @screen-sm) {
|
||||
margin: @list-spacing;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Custom ranges layout
|
||||
// ------------------------------
|
||||
|
||||
// Container
|
||||
.daterange-custom {
|
||||
cursor: pointer;
|
||||
|
||||
// Clearing floats
|
||||
&:after {
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
// Labels and badges
|
||||
.label,
|
||||
.badge {
|
||||
margin: 4px 0 0 @element-horizontal-spacing;
|
||||
vertical-align: top;
|
||||
}
|
||||
.label-icon {
|
||||
margin-top: 0;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
// Layout
|
||||
.daterange-custom-display {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding-left: (@icon-font-size + 5);
|
||||
line-height: 1;
|
||||
|
||||
// Arrow icon
|
||||
&:after {
|
||||
content: '\e9c9';
|
||||
font-family: 'icomoon';
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
margin-top: -(@icon-font-size / 2);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
.transition(all ease-in-out 0.2s);
|
||||
|
||||
// Rotate if open/closed
|
||||
.daterange-custom.is-opened & {
|
||||
.rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
// Date number
|
||||
> i {
|
||||
display: inline-block;
|
||||
font-size: 28px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
letter-spacing: @heading-letter-spacing;
|
||||
}
|
||||
|
||||
// Date details
|
||||
b {
|
||||
display: inline-block;
|
||||
margin-left: 4px;
|
||||
font-weight: 400;
|
||||
|
||||
// Month/year
|
||||
> i {
|
||||
font-size: @font-size-mini;
|
||||
display: block;
|
||||
line-height: @font-size-small;
|
||||
text-transform: uppercase;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
// Line divider
|
||||
em {
|
||||
line-height: 30px;
|
||||
vertical-align: top;
|
||||
margin: 0 4px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Setup mobile view
|
||||
// ------------------------------
|
||||
|
||||
@media (max-width: @screen-sm) {
|
||||
|
||||
// Layout
|
||||
.opensleft,
|
||||
.opensright {
|
||||
left: 0!important;
|
||||
right: 0;
|
||||
|
||||
// Stack calendars container
|
||||
.calendars {
|
||||
float: none;
|
||||
}
|
||||
|
||||
// Stack elements
|
||||
.daterangepicker& {
|
||||
.ranges,
|
||||
.calendar,
|
||||
.calendars {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Elements
|
||||
.daterangepicker {
|
||||
width: 100%;
|
||||
padding-left: @grid-gutter-width;
|
||||
padding-right: @grid-gutter-width;
|
||||
|
||||
// Remove side margin from calendars
|
||||
.calendar {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
// Make ranges full width
|
||||
.ranges {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Pick-a-date - Picker base
|
||||
*
|
||||
* The mobile-friendly, responsive, and lightweight jQuery date & time input picker
|
||||
*
|
||||
* Version: 1.2
|
||||
* Latest update: Jul 5, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Picker base
|
||||
.picker {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
margin-top: -1px;
|
||||
z-index: 990;
|
||||
.user-select(none);
|
||||
}
|
||||
|
||||
// Input element
|
||||
.picker__input {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
// The base of the picker
|
||||
.picker__holder {
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
position: absolute;
|
||||
display: none;
|
||||
background-color: @dropdown-bg;
|
||||
border: 1px solid @dropdown-border;
|
||||
border-top-width: 0;
|
||||
border-bottom-width: 0;
|
||||
max-width: 290px;
|
||||
max-height: 0;
|
||||
outline: 0;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
.border-bottom-radius(@border-radius-base);
|
||||
.box-shadow(0 1px 3px fade(#000, 10%));
|
||||
|
||||
// When the picker opens
|
||||
.picker--opened & {
|
||||
max-height: 480px;
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,296 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Pick-a-date - Date picker
|
||||
*
|
||||
* The mobile-friendly, responsive, and lightweight jQuery date & time input picker
|
||||
*
|
||||
* Version: 1.1
|
||||
* Latest update: Mar 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Core
|
||||
// ------------------------------
|
||||
|
||||
// Picker box
|
||||
.picker__box {
|
||||
padding: (@list-spacing * 2);
|
||||
}
|
||||
|
||||
// Header
|
||||
.picker__header {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
font-size: @font-size-h6;
|
||||
line-height: 1;
|
||||
padding-top: @content-padding-base;
|
||||
padding-bottom: @content-padding-base;
|
||||
}
|
||||
|
||||
|
||||
// Selectors
|
||||
// ------------------------------
|
||||
|
||||
// Month and year labels
|
||||
.picker__month,
|
||||
.picker__year {
|
||||
font-weight: 500;
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.picker__year {
|
||||
color: @text-muted;
|
||||
font-size: @font-size-small;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
||||
// Month and year selectors
|
||||
.picker__select--month,
|
||||
.picker__select--year {
|
||||
border-color: @input-border;
|
||||
height: @input-height-mini;
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-small;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
outline: 0;
|
||||
}
|
||||
.picker__select--month {
|
||||
width: 35%;
|
||||
}
|
||||
.picker__select--year {
|
||||
width: 22.5%;
|
||||
}
|
||||
|
||||
|
||||
// Navigation
|
||||
// ------------------------------
|
||||
|
||||
// Navigation buttons
|
||||
.picker__nav--prev,
|
||||
.picker__nav--next {
|
||||
position: absolute;
|
||||
padding: (@icon-font-size / 2);
|
||||
top: 50%;
|
||||
margin-top: -(@icon-font-size);
|
||||
border-radius: @border-radius-small;
|
||||
line-height: 1;
|
||||
|
||||
&:before {
|
||||
font-family: 'icomoon';
|
||||
display: block;
|
||||
font-size: @icon-font-size;
|
||||
width: @icon-font-size;
|
||||
text-align: center;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Previous button
|
||||
.picker__nav--prev {
|
||||
left: 0;
|
||||
|
||||
&:before {
|
||||
content: '\e9c8';
|
||||
}
|
||||
}
|
||||
|
||||
// Next button
|
||||
.picker__nav--next {
|
||||
right: 0;
|
||||
|
||||
&:before {
|
||||
content: '\e9cb'
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
.picker__nav--disabled {
|
||||
&,
|
||||
&:hover,
|
||||
&:before,
|
||||
&:before:hover {
|
||||
cursor: default;
|
||||
background: none;
|
||||
border-right-color: #f5f5f5;
|
||||
border-left-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Tables
|
||||
// ------------------------------
|
||||
|
||||
// Calendar table of dates
|
||||
.picker__table {
|
||||
text-align: center;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
table-layout: fixed;
|
||||
font-size: inherit;
|
||||
width: 100%;
|
||||
margin-bottom: (@list-spacing * 2);
|
||||
|
||||
td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Weekday labels
|
||||
.picker__weekday {
|
||||
width: 14.285714286%;
|
||||
font-size: @font-size-small;
|
||||
text-align: center;
|
||||
padding-bottom: @content-padding-small;
|
||||
padding-top: (@list-spacing * 2);
|
||||
color: @text-muted;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
// Days on the calendar
|
||||
.picker__day {
|
||||
padding: @padding-base-vertical;
|
||||
}
|
||||
.picker__day--today {
|
||||
position: relative;
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 6px solid @color-teal-400;
|
||||
border-left: 6px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// States
|
||||
// ------------------------------
|
||||
|
||||
// Date focus
|
||||
.picker__day--outfocus {
|
||||
color: #ccc;
|
||||
}
|
||||
.picker__day--infocus:hover,
|
||||
.picker__day--outfocus:hover {
|
||||
cursor: pointer;
|
||||
color: @text-color;
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
}
|
||||
|
||||
// Highlighted date
|
||||
.picker__day--highlighted:before {
|
||||
border-top-color: #fff;
|
||||
}
|
||||
.picker__day--highlighted,
|
||||
.picker__day--selected {
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
.picker__day--highlighted,
|
||||
.picker__day--highlighted:hover,
|
||||
.picker--focused .picker__day--highlighted {
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
background-color: @color-teal-400;
|
||||
}
|
||||
.picker__day--selected,
|
||||
.picker__day--selected:hover,
|
||||
.picker--focused .picker__day--selected {
|
||||
background-color: @color-teal-400;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// Disabled date
|
||||
.picker__day--disabled {
|
||||
&,
|
||||
&:hover {
|
||||
background: #fafafa;
|
||||
color: @text-muted;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-top-color: #999;
|
||||
}
|
||||
|
||||
.picker__day--highlighted & {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: #bbbbbb;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Footer
|
||||
// ------------------------------
|
||||
|
||||
// Contains the "today" and "clear" buttons
|
||||
.picker__footer {
|
||||
text-align: center;
|
||||
|
||||
// Footer buttons
|
||||
button {
|
||||
border: 0;
|
||||
background: #fff;
|
||||
padding: @padding-small-vertical @padding-small-horizontal;
|
||||
border-radius: @border-radius-base;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
outline: 0;
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
}
|
||||
|
||||
&:before {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
.picker__button--today:before {
|
||||
content: '';
|
||||
margin-right: 5px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
top: -1px;
|
||||
width: 0;
|
||||
border-top: 6px solid @brand-primary;
|
||||
border-left: 6px solid transparent;
|
||||
}
|
||||
.picker__button--close:before {
|
||||
content: '\D7';
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin-right: 5px;
|
||||
top: 1px;
|
||||
line-height: 1;
|
||||
font-size: @icon-font-size;
|
||||
}
|
||||
.picker__button--clear:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
width: 8px;
|
||||
margin-right: 5px;
|
||||
border-top: 2px solid @brand-danger;
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Pick-a-date - Time picker
|
||||
*
|
||||
* The mobile-friendly, responsive, and lightweight jQuery date & time input picker
|
||||
*
|
||||
* Version: 1.1
|
||||
* Latest update: Mar 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Base
|
||||
// ------------------------------
|
||||
|
||||
// Container size
|
||||
.picker--time {
|
||||
min-width: 256px;
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
// Remove padding from picker box
|
||||
.picker--time .picker__box {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
// List of items
|
||||
// ------------------------------
|
||||
|
||||
// Items list
|
||||
.picker__list {
|
||||
list-style: none;
|
||||
padding: @list-spacing 0;
|
||||
margin: 0;
|
||||
max-height: 250px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
// The times on the clock.
|
||||
.picker__list-item {
|
||||
position: relative;
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
cursor: pointer;
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
// The clear button
|
||||
.picker--time .picker__button--clear {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: @padding-small-vertical @padding-small-horizontal;
|
||||
background-color: @btn-default-bg;
|
||||
margin-top: 1px;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
border-top: 1px solid @gray-lighter;
|
||||
text-align: center;
|
||||
margin-bottom: -(@list-spacing);
|
||||
margin-top: @list-spacing;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// States
|
||||
// ------------------------------
|
||||
|
||||
// Highlighted and hovered/focused time
|
||||
.picker__list-item--highlighted {
|
||||
z-index: 10;
|
||||
}
|
||||
.picker__list-item--highlighted,
|
||||
.picker__list-item--highlighted:hover,
|
||||
.picker--focused .picker__list-item--highlighted {
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
background-color: @color-teal-400;
|
||||
}
|
||||
|
||||
// Selected and hovered/focused time
|
||||
.picker__list-item--selected,
|
||||
.picker__list-item--selected:hover,
|
||||
.picker--focused .picker__list-item--selected {
|
||||
background-color: @color-teal-400;
|
||||
color: #fff;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
// Disabled time
|
||||
.picker__list-item--disabled,
|
||||
.picker__list-item--disabled:hover,
|
||||
.picker--focused .picker__list-item--disabled {
|
||||
background-color: #fafafa;
|
||||
color: @text-muted;
|
||||
cursor: @cursor-disabled;
|
||||
z-index: auto;
|
||||
}
|
||||
@@ -0,0 +1,634 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Spectrum color picker
|
||||
*
|
||||
* Flexible and powerful jQuery colorpicker library
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: May 25, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Base styles
|
||||
// ------------------------------
|
||||
|
||||
// Base
|
||||
.sp-sat,
|
||||
.sp-val,
|
||||
.sp-top-inner,
|
||||
.sp-color,
|
||||
.sp-hue,
|
||||
.sp-clear-enabled .sp-clear,
|
||||
.sp-preview-inner,
|
||||
.sp-alpha-inner,
|
||||
.sp-thumb-inner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
// Hide containers by default
|
||||
.sp-container.sp-input-disabled .sp-input-container,
|
||||
.sp-container.sp-buttons-disabled .sp-button-container,
|
||||
.sp-container.sp-palette-buttons-disabled .sp-palette-button-container,
|
||||
.sp-palette-only .sp-picker-container,
|
||||
.sp-palette-disabled .sp-palette-container,
|
||||
.sp-initial-disabled .sp-initial {
|
||||
display: none;
|
||||
}
|
||||
.sp-hidden {
|
||||
display: none!important;
|
||||
}
|
||||
.sp-cf {
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
// Elements
|
||||
.sp-preview,
|
||||
.sp-alpha,
|
||||
.sp-thumb-el {
|
||||
position: relative;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
|
||||
}
|
||||
|
||||
// Previews
|
||||
.sp-preview-inner,
|
||||
.sp-alpha-inner,
|
||||
.sp-thumb-inner {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Picker and palette containers
|
||||
.sp-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
z-index: @zindex-dropdown;
|
||||
background-color: @dropdown-bg;
|
||||
border: 1px solid @dropdown-border;
|
||||
border-radius: @border-radius-base;
|
||||
overflow: hidden;
|
||||
.box-sizing(content-box);
|
||||
.box-shadow(0 1px 3px fade(#000, 10%));
|
||||
|
||||
&.sp-flat {
|
||||
position: relative;
|
||||
overflow-x: auto;
|
||||
max-width: 100%;
|
||||
white-space: nowrap
|
||||
}
|
||||
}
|
||||
.sp-picker-container,
|
||||
.sp-palette-container {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
padding-bottom: 300px;
|
||||
margin-bottom: -290px;
|
||||
|
||||
@media (min-width: @screen-sm) {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.sp-picker-container {
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
// Disable user selection
|
||||
.sp-container,
|
||||
.sp-replacer,
|
||||
.sp-preview,
|
||||
.sp-dragger,
|
||||
.sp-slider,
|
||||
.sp-alpha,
|
||||
.sp-clear,
|
||||
.sp-alpha-handle,
|
||||
.sp-container.sp-dragging .sp-input,
|
||||
.sp-container button {
|
||||
.user-select(none);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Picker elements
|
||||
// ------------------------------
|
||||
|
||||
// Colors and hue areas
|
||||
.sp-top {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
.sp-color {
|
||||
right: 20%;
|
||||
}
|
||||
.sp-hue {
|
||||
left: 85%;
|
||||
height: 100%;
|
||||
}
|
||||
.sp-clear-enabled .sp-hue {
|
||||
top: 40px;
|
||||
height: 75%;
|
||||
}
|
||||
.sp-fill {
|
||||
padding-top: 80%;
|
||||
}
|
||||
|
||||
// Alpha
|
||||
.sp-alpha-enabled {
|
||||
.sp-top {
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
|
||||
.sp-alpha {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.sp-alpha-handle {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
bottom: -4px;
|
||||
width: 5px;
|
||||
left: 50%;
|
||||
cursor: pointer;
|
||||
border: 1px solid @gray-light;
|
||||
background-color: #fff;
|
||||
border-radius: @border-radius-large;
|
||||
}
|
||||
.sp-alpha {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: -16px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
// Clear
|
||||
.sp-clear {
|
||||
display: none;
|
||||
}
|
||||
.sp-clear-display {
|
||||
cursor: pointer;
|
||||
|
||||
// Icon
|
||||
&:after {
|
||||
content: '\ee6e';
|
||||
display: block;
|
||||
font-family: 'icomoon';
|
||||
font-size: @icon-font-size;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
// Hide icon in previews
|
||||
.sp-preview &:after,
|
||||
.sp-initial &:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
.sp-clear-enabled .sp-clear {
|
||||
display: block;
|
||||
left: 85%;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
.box-shadow(0 0 0 1px #ddd inset);
|
||||
}
|
||||
|
||||
// Input
|
||||
.sp-input-container {
|
||||
margin-top: 10px;
|
||||
|
||||
.sp-initial-disabled & {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.sp-input {
|
||||
border: 1px solid @input-border;
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
width: 100%;
|
||||
background-color: @input-bg;
|
||||
border-radius: @input-border-radius;
|
||||
outline: 0;
|
||||
color: @input-color;
|
||||
}
|
||||
|
||||
// Initial
|
||||
.sp-initial {
|
||||
margin-top: 10px;
|
||||
|
||||
span {
|
||||
width: 50%;
|
||||
height: 25px;
|
||||
display: block;
|
||||
float: left;
|
||||
|
||||
.sp-thumb-inner {
|
||||
height: 25px;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dragger and slider
|
||||
.sp-dragger {
|
||||
height: 5px;
|
||||
width: 5px;
|
||||
border: 1px solid #fff;
|
||||
background-color: #333;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.sp-slider {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
height: 4px;
|
||||
left: -2px;
|
||||
right: -2px;
|
||||
border: 1px solid @gray-light;
|
||||
background-color: #fff;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Color preview
|
||||
// ------------------------------
|
||||
|
||||
// Replacer (the little preview div that shows up instead of the <input>)
|
||||
.sp-replacer {
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
display: inline-block;
|
||||
border: 1px solid @input-border;
|
||||
background-color: #fafafa;
|
||||
vertical-align: middle;
|
||||
border-radius: @input-border-radius;
|
||||
|
||||
// States
|
||||
&:hover,
|
||||
&.sp-active {
|
||||
border-color: darken(@input-border, 10%);
|
||||
color: @text-color;
|
||||
|
||||
.sp-dd {
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Custom color replacer
|
||||
&[class*=bg-] {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.sp-dd {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.sp-active .sp-dd {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
.sp-replacer {
|
||||
&.sp-disabled {
|
||||
cursor: default;
|
||||
.opacity(0.8);
|
||||
|
||||
&:not([class*=bg-]) {
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: @input-border;
|
||||
}
|
||||
}
|
||||
|
||||
.sp-dd,
|
||||
&[class*=bg-] .sp-dd {
|
||||
color: @text-muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Color preview
|
||||
.sp-preview {
|
||||
position: relative;
|
||||
width: 26px;
|
||||
height: 24px;
|
||||
margin-right: 5px;
|
||||
float: left;
|
||||
z-index: 0;
|
||||
|
||||
.sp-preview-inner,
|
||||
.sp-clear-display {
|
||||
.box-shadow(0 0 0 1px fade(#000, 5%));
|
||||
}
|
||||
|
||||
.sp-replacer[class*=bg-] & {
|
||||
.sp-preview-inner {
|
||||
.box-shadow(0 0 0 1px fade(#000, 50%));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Arrow
|
||||
.sp-dd {
|
||||
float: left;
|
||||
font-size: 0;
|
||||
position: relative;
|
||||
margin: 3px 1px;
|
||||
color: @gray-light;
|
||||
|
||||
// Arrow icon
|
||||
&:after {
|
||||
content: '\e9c5';
|
||||
display: block;
|
||||
font-family: 'icomoon';
|
||||
font-size: @icon-font-size;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Gradients
|
||||
// ------------------------------
|
||||
|
||||
// Gradients for hue, saturation and value instead of images. Not pretty... but it works
|
||||
.sp-sat {
|
||||
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0)));
|
||||
background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
|
||||
background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
|
||||
background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
|
||||
background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
|
||||
background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)";
|
||||
filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81');
|
||||
.box-shadow(0 0 0 1px #ccc inset);
|
||||
}
|
||||
.sp-val {
|
||||
background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0)));
|
||||
background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
|
||||
background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
|
||||
background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
|
||||
background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
|
||||
background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)";
|
||||
filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000');
|
||||
}
|
||||
.sp-hue {
|
||||
background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
||||
background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
||||
background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000));
|
||||
background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
||||
background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// IE filters do not support multiple color stops.
|
||||
// Generate 6 divs, line them up, and do two color gradients for each.
|
||||
// Yes, really.
|
||||
//
|
||||
|
||||
.sp-1 {
|
||||
height: 17%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00');
|
||||
}
|
||||
.sp-2 {
|
||||
height: 16%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00');
|
||||
}
|
||||
.sp-3 {
|
||||
height: 17%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff');
|
||||
}
|
||||
.sp-4 {
|
||||
height: 17%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff');
|
||||
}
|
||||
.sp-5 {
|
||||
height: 16%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff');
|
||||
}
|
||||
.sp-6 {
|
||||
height: 17%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000');
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Color palettes
|
||||
// ------------------------------
|
||||
|
||||
// Basic styles
|
||||
.sp-palette {
|
||||
max-width: 220px;
|
||||
}
|
||||
.sp-palette-container {
|
||||
.sp-palette-only & {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@media (min-width: @screen-sm) {
|
||||
border-right: 1px solid @dropdown-border;
|
||||
}
|
||||
}
|
||||
|
||||
// Palette thumbs
|
||||
.sp-thumb-el {
|
||||
position: relative;
|
||||
|
||||
.sp-palette & {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Add 1px inner semi-transparent border
|
||||
.sp-thumb-inner {
|
||||
.box-shadow(0 0 0 1px fade(#000, 10%) inset);
|
||||
|
||||
&:hover {
|
||||
.box-shadow(0 0 0 1px fade(#000, 25%) inset);
|
||||
}
|
||||
}
|
||||
|
||||
.sp-palette & {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
+ .sp-thumb-el {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
&.sp-thumb-active {
|
||||
.box-shadow(0 0 0 2px fade(#000, 10%) inset);
|
||||
|
||||
.sp-thumb-inner {
|
||||
.box-shadow(0 0 0 1px fade(#000, 25%) inset);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Adding checkmark to the active thumb
|
||||
.sp-palette {
|
||||
.sp-thumb-active {
|
||||
&.sp-thumb-dark,
|
||||
&.sp-thumb-light {
|
||||
.sp-thumb-inner {
|
||||
&:after {
|
||||
content: '\e600';
|
||||
display: block;
|
||||
font-family: 'icomoon';
|
||||
font-size: @icon-font-size;
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.sp-thumb-light .sp-thumb-inner:after {
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Thumbnail row
|
||||
.sp-palette-row {
|
||||
font-size: 0;
|
||||
|
||||
& + .sp-palette-row {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
&:empty {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Picker buttons
|
||||
// ------------------------------
|
||||
|
||||
// Button base
|
||||
.sp-cancel,
|
||||
.sp-choose,
|
||||
.sp-palette-toggle {
|
||||
border: 0;
|
||||
border-radius: @border-radius-small;
|
||||
padding: @padding-small-vertical @padding-small-horizontal;
|
||||
float: left;
|
||||
width: 48%;
|
||||
text-align: center;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
// Button containers
|
||||
.sp-palette-button-container,
|
||||
.sp-button-container {
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
|
||||
// In colored container
|
||||
.sp-container[class*=bg-] & {
|
||||
a,
|
||||
button {
|
||||
background-color: fade(#000, 25%);
|
||||
color: #fff;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Button states
|
||||
.sp-cancel,
|
||||
.sp-palette-toggle {
|
||||
border: 1px solid transparent;
|
||||
|
||||
// Hover state
|
||||
&:hover,
|
||||
&:focus {
|
||||
.box-shadow(0 0 0 100px fade(#000, 1%) inset);
|
||||
}
|
||||
|
||||
// Active state
|
||||
&:active {
|
||||
.box-shadow(0 0 0 100px fade(#000, 3%) inset);
|
||||
}
|
||||
}
|
||||
|
||||
// Choose button
|
||||
.sp-choose {
|
||||
border: 1px solid transparent;
|
||||
|
||||
// Hover state
|
||||
&:hover,
|
||||
&:focus {
|
||||
.box-shadow(0 0 0 100px fade(#000, 5%) inset);
|
||||
}
|
||||
|
||||
// Active state
|
||||
&:active {
|
||||
.box-shadow(0 0 0 100px fade(#000, 10%) inset);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Cancel and palette toggle buttons
|
||||
.sp-cancel,
|
||||
.sp-palette-toggle {
|
||||
color: @btn-default-color;
|
||||
margin-right: 5px;
|
||||
background-color: @btn-default-bg;
|
||||
margin-right: 4%;
|
||||
border-color: @btn-default-border;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @btn-default-color;
|
||||
}
|
||||
}
|
||||
.sp-palette-toggle {
|
||||
margin-right: 0;
|
||||
width: auto;
|
||||
float: none;
|
||||
}
|
||||
|
||||
// Choose button
|
||||
.sp-choose {
|
||||
color: #fff;
|
||||
background-color: @color-slate-500;
|
||||
}
|
||||
@@ -0,0 +1,319 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # ION Range Slider
|
||||
*
|
||||
* Styles for ION range slider plugin
|
||||
*
|
||||
* Version: 1.1
|
||||
* Latest update: Mar 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Functional styling
|
||||
// ------------------------------
|
||||
|
||||
// Base
|
||||
.irs {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: @tooltip-arrow-width + (@padding-xs-vertical * 2) + @font-size-mini + (@slider-base-size * 3) + @slider-base-size;
|
||||
-webkit-touch-callout: none;
|
||||
.user-select(none);
|
||||
}
|
||||
|
||||
// Hide original input
|
||||
.irs-hidden-input {
|
||||
position: absolute !important;
|
||||
display: block !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
font-size: 0 !important;
|
||||
line-height: 0 !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
outline: none !important;
|
||||
z-index: -9999 !important;
|
||||
background: none !important;
|
||||
border-style: solid !important;
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Background line
|
||||
//
|
||||
|
||||
// Base
|
||||
.irs-line {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
outline: none;
|
||||
height: @slider-base-size;
|
||||
top: @tooltip-arrow-width + (@padding-xs-vertical * 3) + @font-size-mini + (@slider-base-size);
|
||||
background-color: @gray-lighter;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
// It consists of 3 parts
|
||||
.irs-line-left,
|
||||
.irs-line-mid,
|
||||
.irs-line-right {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
// Left
|
||||
.irs-line-left {
|
||||
left: 0;
|
||||
width: 11%;
|
||||
}
|
||||
|
||||
// Middle
|
||||
.irs-line-mid {
|
||||
left: 9%;
|
||||
width: 82%;
|
||||
}
|
||||
|
||||
// And right
|
||||
.irs-line-right {
|
||||
right: 0;
|
||||
width: 11%;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Colored bar
|
||||
//
|
||||
|
||||
// Base
|
||||
.irs-bar {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: @tooltip-arrow-width + (@padding-xs-vertical * 3) + @font-size-mini + (@slider-base-size);
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: @slider-base-size;
|
||||
background-color: @color-blue-500;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
// Edge
|
||||
.irs-bar-edge {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 25px;
|
||||
left: 0;
|
||||
height: 12px;
|
||||
width: 9px;
|
||||
}
|
||||
|
||||
// Shadow for highlight disabled range
|
||||
.irs-shadow {
|
||||
position: absolute;
|
||||
display: none;
|
||||
top: @tooltip-arrow-width + (@padding-xs-vertical * 3) + @font-size-mini + (@slider-base-size);
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: @slider-base-size;
|
||||
background-color: @text-color;
|
||||
border-radius: 100px;
|
||||
.opacity(0.25);
|
||||
}
|
||||
|
||||
|
||||
|
||||
//
|
||||
// Handles
|
||||
//
|
||||
|
||||
// Base
|
||||
.irs-slider {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: (@slider-base-size * 3);
|
||||
height: (@slider-base-size * 3);
|
||||
background-color: #fcfcfc;
|
||||
border: 1px solid #bbb;
|
||||
cursor: pointer;
|
||||
top: (@tooltip-arrow-width + (@padding-xs-vertical * 3) + @font-size-mini + (@slider-base-size) - (((@slider-base-size * 3) - @slider-base-size) / 2));
|
||||
border-radius: 100px;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
|
||||
// Small circle
|
||||
&:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: @slider-base-size;
|
||||
height: @slider-base-size;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -(@slider-base-size / 2);
|
||||
margin-left: -(@slider-base-size / 2);
|
||||
background-color: @color-grey-600;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
// Hover state
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
|
||||
// Active state
|
||||
&:active {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
// The last one is on top of the first one
|
||||
&.type_last {
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
//
|
||||
// Tooltips
|
||||
//
|
||||
|
||||
// Base
|
||||
.irs-min,
|
||||
.irs-max,
|
||||
.irs-from,
|
||||
.irs-to,
|
||||
.irs-single {
|
||||
position: absolute;
|
||||
display: block;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
// Minimum and maximum labels
|
||||
.irs-min,
|
||||
.irs-max {
|
||||
color: @text-muted;
|
||||
font-size: @font-size-mini;
|
||||
line-height: 1;
|
||||
top: 0;
|
||||
padding: @padding-xs-vertical;
|
||||
background-color: @gray-lighter;
|
||||
border-radius: @border-radius-small;
|
||||
}
|
||||
.irs-min {
|
||||
left: 0;
|
||||
}
|
||||
.irs-max {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
// Handle tooltips
|
||||
.irs-from,
|
||||
.irs-to,
|
||||
.irs-single {
|
||||
top: 0;
|
||||
left: 0;
|
||||
white-space: nowrap;
|
||||
color: #fff;
|
||||
font-size: @font-size-mini;
|
||||
line-height: 1;
|
||||
padding: @padding-xs-vertical;
|
||||
top: 0;
|
||||
background-color: @tooltip-bg;
|
||||
border-radius: @border-radius-small;
|
||||
|
||||
// Tooltip arrow
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
bottom: -(@tooltip-arrow-width * 2);
|
||||
left: 50%;
|
||||
width: 0; height: 0;
|
||||
margin-left: -(@tooltip-arrow-width);
|
||||
overflow: hidden;
|
||||
border: @tooltip-arrow-width solid transparent;
|
||||
border-top-color: @tooltip-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// The grid
|
||||
//
|
||||
|
||||
// Base
|
||||
.irs-grid {
|
||||
position: absolute;
|
||||
display: none;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
// If slider has grid
|
||||
.irs-with-grid {
|
||||
height: 75px;
|
||||
|
||||
// Display grid
|
||||
.irs-grid {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Marker
|
||||
.irs-grid-pol {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1px;
|
||||
height: 8px;
|
||||
background-color: @text-muted;
|
||||
|
||||
// Sub marker
|
||||
&.small {
|
||||
height: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// Text label
|
||||
.irs-grid-text {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
font-size: @font-size-mini;
|
||||
color: @text-muted;
|
||||
line-height: 1;
|
||||
padding: 0 3px;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Disabled state
|
||||
//
|
||||
|
||||
// Disabled mask
|
||||
.irs-disable-mask {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: -1%;
|
||||
width: 102%;
|
||||
height: 100%;
|
||||
cursor: default;
|
||||
background: transparent;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
// Mute slider if disabled
|
||||
.irs-disabled {
|
||||
.opacity(0.6);
|
||||
}
|
||||
@@ -0,0 +1,576 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # NoUI slider
|
||||
*
|
||||
* Styles for NoUI range slider plugin
|
||||
*
|
||||
* Version: 1.2
|
||||
* Latest update: Mar 20, 2017
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Functional styling
|
||||
// ------------------------------
|
||||
|
||||
// Container
|
||||
.noUi-target {
|
||||
border-radius: 100px;
|
||||
position: relative;
|
||||
direction: ltr;
|
||||
background-color: @gray-lighter;
|
||||
.box-shadow(inset 0 1px 1px fade(#000, 10%));
|
||||
|
||||
&,
|
||||
& * {
|
||||
.user-select(none);
|
||||
}
|
||||
}
|
||||
|
||||
// Base
|
||||
.noUi-base {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Slider origin
|
||||
.noUi-origin {
|
||||
position: absolute;
|
||||
height: 0;
|
||||
width: 0;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
// Inherit cursor
|
||||
.noUi-state-drag * {
|
||||
cursor: inherit !important;
|
||||
}
|
||||
|
||||
// Connector
|
||||
.noUi-connect {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-color: @color-slate-500;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
[disabled] {
|
||||
|
||||
// Background
|
||||
.noUi-target {
|
||||
.opacity(0.75);
|
||||
}
|
||||
|
||||
// Handle
|
||||
.noUi-handle {
|
||||
cursor: @cursor-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Orientations
|
||||
// ------------------------------
|
||||
|
||||
// Horizontal orientation
|
||||
.noUi-horizontal {
|
||||
height: @slider-base-size;
|
||||
|
||||
.noUi-handle {
|
||||
top: -(@slider-base-size * 1.5) + (@slider-base-size / 2);
|
||||
left: -(@slider-base-size * 1.5);
|
||||
}
|
||||
|
||||
&.noUi-extended {
|
||||
padding: 0 @content-padding-base;
|
||||
|
||||
.noUi-connect {
|
||||
right: -(@content-padding-base);
|
||||
}
|
||||
}
|
||||
|
||||
// If has pips
|
||||
&.has-pips {
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
// Vertical orientation
|
||||
.noUi-vertical {
|
||||
display: inline-block;
|
||||
width: @slider-base-size;
|
||||
height: 150px;
|
||||
|
||||
& + & {
|
||||
margin-left: @content-padding-large;
|
||||
}
|
||||
|
||||
.noUi-handle {
|
||||
top: -(@slider-base-size * 1.5);
|
||||
left: -(@slider-base-size * 1.5) + (@slider-base-size / 2);
|
||||
}
|
||||
|
||||
&.noUi-extended {
|
||||
padding: @content-padding-base 0;
|
||||
|
||||
.noUi-connect {
|
||||
bottom: -(@content-padding-base);
|
||||
}
|
||||
}
|
||||
|
||||
// If has pips
|
||||
&.has-pips {
|
||||
margin-right: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Handles and cursors
|
||||
// ------------------------------
|
||||
|
||||
// Draggable
|
||||
.noUi-dragable {
|
||||
cursor: w-resize;
|
||||
|
||||
.noUi-vertical & {
|
||||
cursor: n-resize;
|
||||
}
|
||||
}
|
||||
|
||||
// Handle
|
||||
.noUi-handle {
|
||||
width: (@slider-base-size * 3);
|
||||
height: (@slider-base-size * 3);
|
||||
background-color: #fcfcfc;
|
||||
cursor: pointer;
|
||||
top: -(@slider-base-size);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #bbb;
|
||||
|
||||
.noUi-stacking & {
|
||||
z-index: 10; // this class is applied to the lower origin when its values is > 50%
|
||||
}
|
||||
|
||||
// Inner circle
|
||||
&:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: @slider-base-size;
|
||||
height: @slider-base-size;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -(@slider-base-size / 2);
|
||||
margin-left: -(@slider-base-size / 2);
|
||||
background-color: @color-slate-600;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
// Hover state
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: #f8f8f8;
|
||||
|
||||
// Mute circle
|
||||
&:after {
|
||||
.opacity(0.9);
|
||||
}
|
||||
}
|
||||
|
||||
// Active state
|
||||
&:active {
|
||||
background-color: #fefefe;
|
||||
|
||||
// Mute circle
|
||||
&:after {
|
||||
.opacity(0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// White handle
|
||||
.noui-slider-white .noUi-handle:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
|
||||
// Sizing
|
||||
// ------------------------------
|
||||
|
||||
// Large
|
||||
.noui-slider-lg {
|
||||
|
||||
// Handle
|
||||
.noUi-handle {
|
||||
width: (@slider-large-size * 3);
|
||||
height: (@slider-large-size * 3);
|
||||
top: -(@slider-large-size);
|
||||
|
||||
// Inner circle
|
||||
&:after {
|
||||
width: @slider-large-size;
|
||||
height: @slider-large-size;
|
||||
margin-top: -(@slider-large-size / 2);
|
||||
margin-left: -(@slider-large-size / 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Horizontal
|
||||
&.noUi-horizontal {
|
||||
height: @slider-large-size;
|
||||
|
||||
.noUi-handle {
|
||||
left: -(@slider-large-size * 1.5);
|
||||
}
|
||||
}
|
||||
|
||||
// Vertical
|
||||
&.noUi-vertical {
|
||||
width: @slider-large-size;
|
||||
|
||||
.noUi-handle {
|
||||
top: -(@slider-large-size * 1.5);
|
||||
left: -(@slider-large-size * 1.5) + (@slider-large-size / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Small and mini have the same handle size
|
||||
.noui-slider-sm,
|
||||
.noui-slider-xs {
|
||||
|
||||
// Handle
|
||||
.noUi-handle {
|
||||
width: (@slider-small-size * 3);
|
||||
height: (@slider-small-size * 3);
|
||||
top: -(@slider-small-size);
|
||||
|
||||
// Inner circle
|
||||
&:after {
|
||||
width: @slider-small-size;
|
||||
height: @slider-small-size;
|
||||
margin-top: -(@slider-small-size / 2);
|
||||
margin-left: -(@slider-small-size / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Small
|
||||
.noui-slider-sm {
|
||||
|
||||
// Horizontal
|
||||
&.noUi-horizontal {
|
||||
height: @slider-small-size;
|
||||
|
||||
.noUi-handle {
|
||||
top: -(@slider-small-size * 1.5) + (@slider-small-size / 2);
|
||||
left: -(@slider-small-size * 1.5);
|
||||
}
|
||||
}
|
||||
|
||||
// Vertical
|
||||
&.noUi-vertical {
|
||||
width: @slider-small-size;
|
||||
|
||||
.noUi-handle {
|
||||
top: -(@slider-small-size * 1.5);
|
||||
left: -(@slider-small-size * 1.5) + (@slider-small-size / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mini
|
||||
.noui-slider-xs {
|
||||
|
||||
// Horizontal
|
||||
&.noUi-horizontal {
|
||||
height: @slider-mini-size;
|
||||
|
||||
.noUi-handle {
|
||||
top: -(@slider-small-size * 1.5) + (@slider-mini-size / 2);
|
||||
left: -(@slider-small-size * 1.5);
|
||||
}
|
||||
}
|
||||
|
||||
// Vertical
|
||||
&.noUi-vertical {
|
||||
width: @slider-mini-size;
|
||||
|
||||
.noUi-handle {
|
||||
top: -(@slider-small-size * 1.5);
|
||||
left: -(@slider-small-size * 1.5) + (@slider-mini-size / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Solid slider handle
|
||||
// ------------------------------
|
||||
|
||||
.noui-slider-solid {
|
||||
|
||||
// Handle
|
||||
.noUi-handle {
|
||||
background-color: @gray-light;
|
||||
border-color: @gray-light;
|
||||
.box-shadow(none);
|
||||
|
||||
// Inner circle
|
||||
&:after {
|
||||
background-color: #fff;
|
||||
.transition(opacity ease-in-out 0.2s);
|
||||
}
|
||||
|
||||
// Change circle opacity on hover
|
||||
&:hover,
|
||||
&:focus {
|
||||
&:after {
|
||||
.opacity(0.75);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Handle colors
|
||||
&.noui-slider-primary .noUi-handle {
|
||||
background-color: @brand-primary;
|
||||
border-color: @brand-primary;
|
||||
}
|
||||
|
||||
&.noui-slider-danger .noUi-handle {
|
||||
background-color: @brand-danger;
|
||||
border-color: @brand-danger;
|
||||
}
|
||||
|
||||
&.noui-slider-success .noUi-handle {
|
||||
background-color: @brand-success;
|
||||
border-color: @brand-success;
|
||||
}
|
||||
|
||||
&.noui-slider-warning .noUi-handle {
|
||||
background-color: @brand-warning;
|
||||
border-color: @brand-warning;
|
||||
}
|
||||
|
||||
&.noui-slider-info .noUi-handle {
|
||||
background-color: @brand-info;
|
||||
border-color: @brand-info;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Contextual colors
|
||||
// ------------------------------
|
||||
|
||||
// Primary
|
||||
.noui-slider-primary {
|
||||
.noUi-connect,
|
||||
&.noUi-connect {
|
||||
background-color: @brand-primary;
|
||||
}
|
||||
}
|
||||
|
||||
// Danger
|
||||
.noui-slider-danger {
|
||||
.noUi-connect,
|
||||
&.noUi-connect {
|
||||
background-color: @brand-danger;
|
||||
}
|
||||
}
|
||||
|
||||
// Success
|
||||
.noui-slider-success {
|
||||
.noUi-connect,
|
||||
&.noUi-connect {
|
||||
background-color: @brand-success;
|
||||
}
|
||||
}
|
||||
|
||||
// Warning
|
||||
.noui-slider-warning {
|
||||
.noUi-connect,
|
||||
&.noUi-connect {
|
||||
background-color: @brand-warning;
|
||||
}
|
||||
}
|
||||
|
||||
// Info
|
||||
.noui-slider-info {
|
||||
.noUi-connect,
|
||||
&.noUi-connect {
|
||||
background-color: @brand-info;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Tooltip
|
||||
// ------------------------------
|
||||
|
||||
.noUi-tooltip {
|
||||
display: none;
|
||||
position: absolute;
|
||||
border-radius: @border-radius-base;
|
||||
background: @gray-dark;
|
||||
color: #fff;
|
||||
top: -43px;
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
left: 50%;
|
||||
margin-left: -27px;
|
||||
text-align: center;
|
||||
font-size: @font-size-small;
|
||||
width: 54px;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 5px solid transparent;
|
||||
border-top-color: @gray-dark;
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
.noUi-handle:hover & {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Pips
|
||||
// ------------------------------
|
||||
|
||||
// Base
|
||||
.noUi-pips {
|
||||
position: absolute;
|
||||
color: @text-muted;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Values base
|
||||
//
|
||||
|
||||
// Default
|
||||
.noUi-value {
|
||||
width: 40px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
font-size: @font-size-mini;
|
||||
}
|
||||
|
||||
// Sub
|
||||
.noUi-value-sub {
|
||||
color: #ccc;
|
||||
font-size: @font-size-mini;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Markings base
|
||||
//
|
||||
|
||||
.noUi-marker {
|
||||
position: absolute;
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Horizontal layout
|
||||
//
|
||||
|
||||
// Pips
|
||||
.noUi-pips-horizontal {
|
||||
padding-top: 10px;
|
||||
height: 35px;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Values
|
||||
.noUi-value-horizontal {
|
||||
margin-left: -20px;
|
||||
padding-top: 15px;
|
||||
|
||||
&.noUi-value-sub {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.noUi-rtl & {
|
||||
margin-left: 0;
|
||||
margin-right: -20px;
|
||||
}
|
||||
}
|
||||
|
||||
// Markers
|
||||
.noUi-marker-horizontal {
|
||||
|
||||
// Default marker
|
||||
&.noUi-marker {
|
||||
width: 1px;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
// Sub marker
|
||||
&.noUi-marker-sub {
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
// Large marker
|
||||
&.noUi-marker-large {
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Vertical layout
|
||||
//
|
||||
|
||||
// Pips
|
||||
.noUi-pips-vertical {
|
||||
padding-left: 10px;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
// Values
|
||||
.noUi-value-vertical {
|
||||
width: 15px;
|
||||
margin-left: 15px;
|
||||
margin-top: -6px;
|
||||
|
||||
.noUi-rtl & {
|
||||
margin-top: 0;
|
||||
margin-bottom: -6px;
|
||||
}
|
||||
}
|
||||
|
||||
// Markers
|
||||
.noUi-marker-vertical {
|
||||
|
||||
// Default marker
|
||||
&.noUi-marker {
|
||||
width: 3px;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
// Sub marker
|
||||
&.noUi-marker-sub {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
// Large marker
|
||||
&.noUi-marker-large {
|
||||
width: 10px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,239 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # jQuery UI slider pips
|
||||
*
|
||||
* Styles for jQuery UI slider pips extension
|
||||
*
|
||||
* Version: 1.1
|
||||
* Latest update: Nov 15, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
/* # Pips
|
||||
-------------------------------------------------- */
|
||||
|
||||
.ui-slider-pips {
|
||||
|
||||
|
||||
// Horizontal
|
||||
// ------------------------------
|
||||
|
||||
// Increase bottom margin to fit the pips
|
||||
&.ui-slider-horizontal {
|
||||
margin-bottom: 32px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
// Default hide the labels and pips that arnt visible
|
||||
.ui-slider-label,
|
||||
.ui-slider-pip-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Now we show any labels that we've set to show in the options
|
||||
.ui-slider-pip-label .ui-slider-label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Pip and label wrapper
|
||||
.ui-slider-pip {
|
||||
height: 10px;
|
||||
line-height: 10px;
|
||||
font-size: 85%;
|
||||
width: 20px;
|
||||
margin-left: -11px;
|
||||
position: absolute;
|
||||
overflow: visible;
|
||||
text-align: center;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
cursor: pointer;
|
||||
-webkit-touch-callout: none;
|
||||
.user-select(none);
|
||||
|
||||
&:hover .ui-slider-label {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
// Little pip/line position & size
|
||||
.ui-slider-line {
|
||||
background-color: #999;
|
||||
width: 1px;
|
||||
height: 3px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
// Text label postion & size
|
||||
.ui-slider-label {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 50%;
|
||||
width: 20px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
|
||||
// Vertical
|
||||
// ------------------------------
|
||||
|
||||
// Vertical slider needs right-margin, not bottom
|
||||
&.ui-slider-vertical {
|
||||
margin: 10px 40px 10px 10px;
|
||||
|
||||
// Align vertical pips left and to right of the slider
|
||||
.ui-slider-pip {
|
||||
text-align: left;
|
||||
top: auto;
|
||||
left: 18px;
|
||||
margin-left: 0;
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
|
||||
// Vertical line/pip should be horizontal instead
|
||||
.ui-slider-line {
|
||||
width: 3px;
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
// Text label
|
||||
.ui-slider-label {
|
||||
top: 50%;
|
||||
margin-left: 0;
|
||||
margin-top: -5px;
|
||||
width: 20px;
|
||||
left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* # Tooltips
|
||||
-------------------------------------------------- */
|
||||
|
||||
.ui-slider-float {
|
||||
|
||||
|
||||
// Core and horizontal
|
||||
// ------------------------------
|
||||
|
||||
// Remove the godawful looking focus outline on handle and float
|
||||
.ui-slider-handle:focus {
|
||||
&,
|
||||
.ui-slider-tip,
|
||||
.ui-slider-tip-label {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Style tooltips on handles and on labels
|
||||
.ui-slider-tip,
|
||||
.ui-slider-tip-label {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
top: -45px;
|
||||
display: block;
|
||||
width: 34px;
|
||||
margin-left: -16px;
|
||||
left: 50%;
|
||||
height: 30px;
|
||||
line-height: 32px;
|
||||
background: @gray-dark;
|
||||
border-radius: @border-radius-base;
|
||||
text-align: center;
|
||||
font-size: @font-size-small;
|
||||
color: #fff;
|
||||
.opacity(0);
|
||||
.transition(all ease-in-out 0.2s 0.2s);
|
||||
}
|
||||
|
||||
// Show the tooltip on hover or focus
|
||||
.ui-slider-handle:hover .ui-slider-tip,
|
||||
.ui-slider-handle:focus .ui-slider-tip {
|
||||
top: -40px;
|
||||
visibility: visible;
|
||||
.opacity(1);
|
||||
.transition-delay(0.2s);
|
||||
}
|
||||
|
||||
// Put label tooltips below slider
|
||||
.ui-slider-pip {
|
||||
.ui-slider-tip-label {
|
||||
top: 42px;
|
||||
}
|
||||
|
||||
&:hover .ui-slider-tip-label {
|
||||
top: 32px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
// Give the tooltip a css triangle arrow
|
||||
.ui-slider-tip:after,
|
||||
.ui-slider-pip .ui-slider-tip-label:after {
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 5px solid transparent;
|
||||
border-top-color: @gray-dark;
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
|
||||
// Floating vertical tooltips
|
||||
// ------------------------------
|
||||
|
||||
// Tooltip floats to left of handle
|
||||
&.ui-slider-vertical {
|
||||
.ui-slider-tip,
|
||||
.ui-slider-tip-label {
|
||||
top: 50%;
|
||||
margin-top: -16px;
|
||||
width: 34px;
|
||||
margin-left: 0px;
|
||||
left: -50px;
|
||||
.transition(all ease-in-out 0.2s 0.2s);
|
||||
}
|
||||
|
||||
.ui-slider-handle:hover .ui-slider-tip,
|
||||
.ui-slider-handle:focus .ui-slider-tip,
|
||||
.ui-slider-pip:hover .ui-slider-tip-label,
|
||||
.ui-slider-pip:focus .ui-slider-tip-label {
|
||||
top: 50%;
|
||||
margin-top: -16px;
|
||||
left: -45px;
|
||||
}
|
||||
|
||||
// Put label tooltips to right of slider
|
||||
.ui-slider-pip {
|
||||
.ui-slider-tip-label {
|
||||
left: 47px;
|
||||
}
|
||||
|
||||
&:hover .ui-slider-tip-label {
|
||||
left: 37px;
|
||||
}
|
||||
}
|
||||
|
||||
// Give the tooltip a css triangle arrow
|
||||
.ui-slider-tip:after,
|
||||
.ui-slider-pip .ui-slider-tip-label:after {
|
||||
border-left-color: @gray-dark;
|
||||
bottom: 9px;
|
||||
left: auto;
|
||||
margin-right: -9px;
|
||||
border-top-color: transparent;
|
||||
right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Autofill extension
|
||||
*
|
||||
* Spreadsheets such as Excel and Google Docs have a very handy data duplication
|
||||
* option of an auto fill tool
|
||||
*
|
||||
* Version: 1.1
|
||||
* Latest update: Mar 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Handle
|
||||
.dt-autofill-handle {
|
||||
position: absolute;
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
z-index: 102;
|
||||
border: 1px solid @brand-primary;
|
||||
background: @brand-primary;
|
||||
}
|
||||
|
||||
// Select frame
|
||||
.dt-autofill-select {
|
||||
position: absolute;
|
||||
z-index: 1001;
|
||||
background-color: @brand-primary;
|
||||
background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, fade(#fff, 75%) 5px, fade(#fff, 75%) 10px);
|
||||
|
||||
// Vertical lines
|
||||
&.top,
|
||||
&.bottom {
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
// Horizontal lines
|
||||
&.left,
|
||||
&.right {
|
||||
width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Confirmation dialog
|
||||
.dt-autofill-list {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 500px;
|
||||
margin-left: -250px;
|
||||
background-color: @modal-content-bg;
|
||||
border-radius: @border-radius-base;
|
||||
border: 1px solid @modal-content-border-color;
|
||||
z-index: @zindex-modal;
|
||||
padding: @list-spacing 0;
|
||||
|
||||
// List
|
||||
ul {
|
||||
display: table;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
width: 100%;
|
||||
|
||||
// List items
|
||||
li {
|
||||
display: table-row;
|
||||
|
||||
// Highlight row on hover
|
||||
&:hover {
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Text label
|
||||
.dt-autofill-question {
|
||||
display: table-cell;
|
||||
padding: @padding-base-vertical @content-padding-base;
|
||||
|
||||
// Text label input
|
||||
input[type=number] {
|
||||
padding: 6px;
|
||||
width: 30px;
|
||||
margin: -2px 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Confirm button
|
||||
.dt-autofill-button {
|
||||
display: table-cell;
|
||||
padding: @padding-base-vertical @content-padding-base;
|
||||
text-align: right;
|
||||
|
||||
// Button itself
|
||||
.btn {
|
||||
padding: 3px;
|
||||
background-color: @brand-primary;
|
||||
color: #fff;
|
||||
font-size: 0;
|
||||
|
||||
// Checkmark icon
|
||||
&:after {
|
||||
content: '\e9c3';
|
||||
font-family: 'Icomoon';
|
||||
display: block;
|
||||
font-size: @icon-font-size;
|
||||
width: @icon-font-size;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
// Mute button on hover
|
||||
&:hover {
|
||||
.opacity(0.85);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Overlay
|
||||
.dt-autofill-background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: @modal-backdrop-bg;
|
||||
z-index: @zindex-modal-background;
|
||||
.opacity(@modal-backdrop-opacity);
|
||||
}
|
||||
@@ -0,0 +1,230 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Buttons extension
|
||||
*
|
||||
* The Buttons extension for DataTables provides a common set of options, API
|
||||
* methods and styling to display buttons that will interact with a DataTable
|
||||
*
|
||||
* Version: 1.2
|
||||
* Latest update: Jul 5, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Buttons base
|
||||
// ------------------------------
|
||||
|
||||
// Full width buttons
|
||||
.dt-buttons-full {
|
||||
|
||||
// Container
|
||||
.dt-buttons {
|
||||
text-align: center;
|
||||
float: none;
|
||||
display: block;
|
||||
margin: 0;
|
||||
border-bottom: 1px solid @table-border-color;
|
||||
padding-top: @line-height-computed;
|
||||
padding-bottom: (@line-height-computed / 2);
|
||||
background-color: @table-bg-accent;
|
||||
|
||||
> .btn {
|
||||
margin-bottom: (@line-height-computed / 2);
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons. Default alignment is right
|
||||
.dt-buttons {
|
||||
float: right;
|
||||
display: inline-block;
|
||||
margin: 0 0 @line-height-computed @content-padding-large;
|
||||
|
||||
// Left display option
|
||||
.dt-buttons-left & {
|
||||
float: left;
|
||||
}
|
||||
|
||||
// Inner buttons
|
||||
> .dt-button {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Default buttons
|
||||
> .btn {
|
||||
border-radius: 0;
|
||||
|
||||
// First button
|
||||
&:first-child {
|
||||
.border-left-radius(@border-radius-base);
|
||||
}
|
||||
|
||||
// Last button
|
||||
&:last-child {
|
||||
.border-right-radius(@border-radius-base);
|
||||
}
|
||||
|
||||
// Add 1px spacing between buttons
|
||||
& + .btn {
|
||||
margin-left: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
// Mobile view
|
||||
@media screen and (max-width: 767px) {
|
||||
float: none;
|
||||
text-align: center;
|
||||
display: block;
|
||||
|
||||
.btn {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dialog
|
||||
.dt-button-info {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 400px;
|
||||
margin-top: -100px;
|
||||
margin-left: -200px;
|
||||
padding: @modal-inner-padding;
|
||||
background-color: #fff;
|
||||
border: 1px solid @dropdown-border;
|
||||
border-radius: @border-radius-base;
|
||||
text-align: center;
|
||||
z-index: @zindex-modal;
|
||||
.box-shadow(0 1px 3px rgba(0, 0, 0, 0.1));
|
||||
|
||||
// Heading
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
line-height: @modal-title-line-height;
|
||||
font-size: @font-size-h5;
|
||||
}
|
||||
}
|
||||
|
||||
// Overlay
|
||||
.dt-button-background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: #333;
|
||||
z-index: @zindex-dropdown - 1;
|
||||
.opacity(0.25);
|
||||
}
|
||||
|
||||
|
||||
// Button collection
|
||||
// ------------------------------
|
||||
|
||||
.dt-button-collection {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: @dropdown-bg;
|
||||
display: block;
|
||||
z-index: @zindex-dropdown;
|
||||
padding: @list-spacing 0;
|
||||
overflow: hidden;
|
||||
min-width: 180px;
|
||||
border-radius: @border-radius-base;
|
||||
-webkit-column-gap: 2px;
|
||||
-moz-column-gap: 2px;
|
||||
-ms-column-gap: 2px;
|
||||
-o-column-gap: 2px;
|
||||
column-gap: 2px;
|
||||
.box-shadow(@shadow-depth2);
|
||||
|
||||
// Inner buttons
|
||||
> .dt-button {
|
||||
padding: (@padding-base-vertical + 1) @content-padding-base;
|
||||
color: @dropdown-link-color;
|
||||
display: block;
|
||||
outline: 0;
|
||||
|
||||
// Add 1px top spacing between buttons
|
||||
+ .dt-button {
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
// Hover state
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @dropdown-link-hover-color;
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
}
|
||||
|
||||
// Active state
|
||||
&.active {
|
||||
color: @dropdown-link-active-color;
|
||||
background-color: @dropdown-link-active-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Fixed centered layout
|
||||
&.fixed {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -75px;
|
||||
padding-left: (@list-spacing - 2);
|
||||
padding-right: (@list-spacing - 2);
|
||||
|
||||
// Two columns
|
||||
&.two-column {
|
||||
margin-left: -150px;
|
||||
}
|
||||
|
||||
// Three columns
|
||||
&.three-column {
|
||||
margin-left: -225px;
|
||||
}
|
||||
|
||||
// Four columns
|
||||
&.four-column {
|
||||
margin-left: -300px;
|
||||
}
|
||||
}
|
||||
|
||||
// Inner content
|
||||
> * {
|
||||
-webkit-column-break-inside: avoid;
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
// Two columns
|
||||
&.two-column {
|
||||
width: 300px;
|
||||
-webkit-column-count: 2;
|
||||
-moz-column-count: 2;
|
||||
-ms-column-count: 2;
|
||||
-o-column-count: 2;
|
||||
column-count: 2;
|
||||
}
|
||||
|
||||
// Three columns
|
||||
&.three-column {
|
||||
width: 450px;
|
||||
-webkit-column-count: 3;
|
||||
-moz-column-count: 3;
|
||||
-ms-column-count: 3;
|
||||
-o-column-count: 3;
|
||||
column-count: 3;
|
||||
}
|
||||
|
||||
// Four columns
|
||||
&.four-column {
|
||||
width: 600px;
|
||||
-webkit-column-count: 4;
|
||||
-moz-column-count: 4;
|
||||
-ms-column-count: 4;
|
||||
-o-column-count: 4;
|
||||
column-count: 4;
|
||||
}
|
||||
}
|
||||
+31
@@ -0,0 +1,31 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Columns reorder
|
||||
*
|
||||
* Easily modify the column order of a table through drop-and-drag of column headers
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: May 25, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Highlight cloned header
|
||||
.DTCR_clonedTable {
|
||||
background-color: fade(#fff, 80%);
|
||||
z-index: 202;
|
||||
cursor: move;
|
||||
|
||||
// Mute background and add border
|
||||
th,
|
||||
td {
|
||||
border: 1px solid @table-border-color!important;
|
||||
}
|
||||
}
|
||||
|
||||
// Add colored pointer
|
||||
.DTCR_pointer {
|
||||
width: 1px;
|
||||
background-color: @brand-primary;
|
||||
z-index: 201;
|
||||
}
|
||||
+64
@@ -0,0 +1,64 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Fixed columns
|
||||
*
|
||||
* Extension that "freezes" in place the left most columns in a scrolling DataTable
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: May 25, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Block out what is behind the fixed column's header and footer
|
||||
.DTFC_Cloned {
|
||||
background-color: #fff;
|
||||
border-bottom: 0;
|
||||
|
||||
// Add left/right border
|
||||
&.table {
|
||||
|
||||
// In left column
|
||||
.DTFC_LeftWrapper & {
|
||||
border-right: 1px solid @table-border-color;
|
||||
}
|
||||
|
||||
// In right column
|
||||
.DTFC_RightWrapper & {
|
||||
border-left: 1px solid @table-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Remove dublicated header arrows and borders
|
||||
.DTFC_LeftBodyWrapper,
|
||||
.DTFC_RightBodyWrapper {
|
||||
.DTFC_Cloned {
|
||||
thead th {
|
||||
&:before,
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
tbody > tr:first-child {
|
||||
> td,
|
||||
> th {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Block out the gap above the scrollbar on the right
|
||||
.DTFC_Blocker {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
// Hide cloned columns on mobile
|
||||
@media (max-width: @screen-xs-max) {
|
||||
.DTFC_LeftWrapper,
|
||||
.DTFC_RightWrapper {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Fixed Header extension
|
||||
*
|
||||
* This extension lets your users quickly determine what each column refers to
|
||||
* rather than needing to scroll back to the top of the table.
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: Nov 9, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Headers
|
||||
.fixedHeader-floating,
|
||||
.fixedHeader-locked {
|
||||
background-color: #fff;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Floating header
|
||||
.fixedHeader-floating {
|
||||
position: fixed;
|
||||
|
||||
// Remove top border if multiple tables
|
||||
.fixedHeader-floating + &,
|
||||
.fixedHeader-locked + & {
|
||||
border-top: 0!important;
|
||||
}
|
||||
|
||||
// Hide on mobile
|
||||
@media(max-width: @screen-xs-max) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Locked header
|
||||
.fixedHeader-locked {
|
||||
position: absolute;
|
||||
|
||||
// Hide on mobile
|
||||
@media(max-width: @screen-xs-max) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Hide headers on print
|
||||
@media print {
|
||||
table.fixedHeader-floating {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Key Table extension
|
||||
*
|
||||
* KeyTable provides Excel like cell navigation on any table. Events (focus, blur,
|
||||
* action etc) can be assigned to individual cells, columns, rows or all cells.
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: Nov 10, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Focus colors
|
||||
.dataTable {
|
||||
th,
|
||||
td {
|
||||
|
||||
// Default
|
||||
&.focus {
|
||||
outline: 2px solid @brand-primary;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
// Success
|
||||
&.focus-success {
|
||||
background-color: @color-success-50;
|
||||
outline-color: @color-success-500;
|
||||
}
|
||||
|
||||
// Info
|
||||
&.focus-info {
|
||||
background-color: @color-primary-50;
|
||||
outline-color: @color-primary-500;
|
||||
}
|
||||
|
||||
// Warning
|
||||
&.focus-warning {
|
||||
background-color: @color-warning-50;
|
||||
outline-color: @color-warning-500;
|
||||
}
|
||||
|
||||
// Danger
|
||||
&.focus-danger {
|
||||
background-color: @color-danger-50;
|
||||
outline-color: @color-danger-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Responsive extension
|
||||
*
|
||||
* Optimise the table's layout for different screen sizes through the dynamic
|
||||
* insertion and removal of columns from the table
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: May 25, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Layouts
|
||||
// ------------------------------
|
||||
|
||||
// Inline details row
|
||||
.dtr-inline {
|
||||
&.collapsed tbody {
|
||||
tr {
|
||||
td,
|
||||
th {
|
||||
&:before {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
|
||||
&.dataTables_empty:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Column details row
|
||||
.dtr-column {
|
||||
tbody {
|
||||
td,
|
||||
th {
|
||||
&.control {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Expand/collapse icons
|
||||
// ------------------------------
|
||||
|
||||
.dtr-inline.collapsed tbody tr td:first-child:before,
|
||||
.dtr-inline.collapsed tbody tr th:first-child:before,
|
||||
.dtr-column tbody tr td.control:before,
|
||||
.dtr-column tbody tr th.control:before {
|
||||
content: '\e9e4';
|
||||
font-family: 'icomoon';
|
||||
display: inline-block;
|
||||
font-size: @icon-font-size;
|
||||
width: @icon-font-size;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
vertical-align: middle;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
.dataTable.dtr-inline.collapsed tbody tr.parent td:first-child:before,
|
||||
.dataTable.dtr-inline.collapsed tbody tr.parent th:first-child:before,
|
||||
.dataTable.dtr-column tbody tr.parent td.control:before,
|
||||
.dataTable.dtr-column tbody tr.parent th.control:before {
|
||||
content: '\e9e7';
|
||||
}
|
||||
.dtr-inline.collapsed tbody tr.child td:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
// Child rows with details
|
||||
// ------------------------------
|
||||
|
||||
.dataTable {
|
||||
tr {
|
||||
|
||||
// Child row
|
||||
&.child {
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.dtr-title {
|
||||
display: table-cell;
|
||||
font-weight: 500;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.dtr-data {
|
||||
display: table-cell;
|
||||
padding: 8px 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Child cell
|
||||
td.child {
|
||||
white-space: normal;
|
||||
position: relative;
|
||||
|
||||
> ul {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
> li {
|
||||
display: table-row;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Responsive stuff
|
||||
// ------------------------------
|
||||
|
||||
// Make dropdown menus full width
|
||||
@media (max-width: @screen-xs) {
|
||||
.dataTable tr td.child > ul > li {
|
||||
.dropdown,
|
||||
.dropup,
|
||||
.btn-group {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-radius: 0;
|
||||
border-width: 1px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Row Reorder extension
|
||||
*
|
||||
* RowReorder adds the ability for rows in a DataTable to be reordered through
|
||||
* user interaction with the table.
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: Nov 10, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Base
|
||||
// ------------------------------
|
||||
|
||||
// The movable row
|
||||
.dt-rowReorder-float {
|
||||
position: absolute!important;
|
||||
table-layout: static;
|
||||
outline: 1px dashed @color-grey-500;
|
||||
outline-offset: -1px;
|
||||
background-color: #fff;
|
||||
z-index: @zindex-navbar-fixed;
|
||||
cursor: move;
|
||||
.opacity(0.9);
|
||||
}
|
||||
|
||||
// The target row
|
||||
.dt-rowReorder-moving {
|
||||
outline: 1px solid @color-grey-500;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
// Hide overflow from <body> tag when moving
|
||||
.dt-rowReorder-noOverflow {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
// Reorder cell
|
||||
.dataTable td.reorder {
|
||||
text-align: center;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,51 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Datatables Scroller
|
||||
*
|
||||
* Drawing the rows required for the current display only, for fast operation
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: May 25, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Core
|
||||
// ------------------------------
|
||||
|
||||
.DTS {
|
||||
|
||||
// Prevent word wrap
|
||||
tbody {
|
||||
th,
|
||||
td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
// Loading text
|
||||
.DTS_Loading {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 200px;
|
||||
height: 20px;
|
||||
margin-top: -(@line-height-computed);
|
||||
margin-left: -100px;
|
||||
z-index: 1;
|
||||
|
||||
border: 1px solid #999;
|
||||
padding: @content-padding-large 0;
|
||||
text-align: center;
|
||||
background-color: fade(#fff, 50%);
|
||||
}
|
||||
|
||||
// Scroller areas
|
||||
.dataTables_scrollHead,
|
||||
.dataTables_scrollFoot {
|
||||
background-color: #fff;
|
||||
}
|
||||
.dataTables_scrollBody {
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Select extension
|
||||
*
|
||||
* Spreadsheets such as Excel and Google Docs have a very handy data duplication
|
||||
* option of an auto fill tool
|
||||
*
|
||||
* Version: 1.1
|
||||
* Latest update: Dec 9, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Core
|
||||
// ------------------------------
|
||||
|
||||
// Highlight selected row
|
||||
.dataTable {
|
||||
tbody > tr {
|
||||
&.selected,
|
||||
> .selected {
|
||||
background-color: @color-success-50;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// Item select
|
||||
.dataTables_wrapper {
|
||||
.select-info,
|
||||
.select-item {
|
||||
margin-left: @content-padding-small;
|
||||
|
||||
// On mobile
|
||||
@media (max-width: @screen-xs-max) {
|
||||
margin-left: 0;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Checkbox
|
||||
// ------------------------------
|
||||
|
||||
.dataTable tbody {
|
||||
|
||||
// Chackbox base
|
||||
.select-checkbox {
|
||||
position: relative;
|
||||
|
||||
// Checkbox icon base
|
||||
&:before,
|
||||
&:after {
|
||||
display: inline-block;
|
||||
color: @color-slate-700;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Box
|
||||
&:before {
|
||||
content: '';
|
||||
background-color: #fff;
|
||||
width: @checkbox-size;
|
||||
height: @checkbox-size;
|
||||
margin-top: -(@checkbox-size / 2);
|
||||
margin-left: -(@checkbox-size / 2);
|
||||
border: @checkbox-border-width solid @color-slate-500;
|
||||
border-radius: @border-radius-small;
|
||||
}
|
||||
}
|
||||
|
||||
// Checkmark icon
|
||||
.selected .select-checkbox {
|
||||
&:after {
|
||||
content: "\e600";
|
||||
font-family: 'icomoon';
|
||||
font-size: @icon-font-size;
|
||||
line-height: 1;
|
||||
margin-top: -((@checkbox-size - @checkbox-border-width) / 2);
|
||||
margin-left: -((@checkbox-size - @checkbox-border-width) / 2);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,599 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Datatables library
|
||||
*
|
||||
* Add advanced interaction controls to any HTML table
|
||||
*
|
||||
* Version: 1.2
|
||||
* Latest update: Mar 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Base
|
||||
// ------------------------------
|
||||
|
||||
// Table container
|
||||
.dataTable {
|
||||
margin: 0;
|
||||
max-width: none;
|
||||
border-collapse: separate;
|
||||
|
||||
// Header
|
||||
thead {
|
||||
th,
|
||||
td {
|
||||
outline: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Add hand cursor to sortable cells
|
||||
.sorting_asc,
|
||||
.sorting_desc,
|
||||
.sorting {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Add right space to avoid text overlap over arrow
|
||||
.sorting,
|
||||
.sorting_asc,
|
||||
.sorting_desc,
|
||||
.sorting_asc_disabled,
|
||||
.sorting_desc_disabled {
|
||||
padding-right: (@content-padding-large * 2);
|
||||
}
|
||||
|
||||
|
||||
// Add sorting icon base
|
||||
.sorting:before,
|
||||
.sorting:after,
|
||||
.sorting_asc:after,
|
||||
.sorting_desc:after,
|
||||
.sorting_asc_disabled:after,
|
||||
.sorting_desc_disabled:after {
|
||||
content: '';
|
||||
font-family: 'icomoon';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: @content-padding-large;
|
||||
font-size: @font-size-small;
|
||||
margin-top: -(@font-size-small / 2);
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
// Icons
|
||||
.sorting {
|
||||
&:before {
|
||||
content: '\e9c1';
|
||||
margin-top: -2px;
|
||||
color: @text-muted;
|
||||
}
|
||||
&:after {
|
||||
content: '\e9c2';
|
||||
margin-top: -10px;
|
||||
color: @text-muted;
|
||||
}
|
||||
}
|
||||
.sorting_asc:after {
|
||||
content: '\e9c2';
|
||||
}
|
||||
.sorting_desc:after {
|
||||
content: '\e9c1';
|
||||
}
|
||||
.sorting_asc_disabled:after {
|
||||
content: '\e9c2';
|
||||
color: #ccc;
|
||||
}
|
||||
.sorting_desc_disabled:after {
|
||||
content: '\e9c1';
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
// Body
|
||||
tbody {
|
||||
|
||||
// Remove top border in first row
|
||||
> tr:first-child {
|
||||
> th,
|
||||
> td {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove top border from thead by default
|
||||
+ thead,
|
||||
+ tfoot + thead {
|
||||
> tr:first-child {
|
||||
> th,
|
||||
> td {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Center text in empty table
|
||||
.dataTables_empty {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Collapse borders in bordered table
|
||||
&.table-bordered {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
// If table has .media container, remove width from .media-body
|
||||
.media-body {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Wrapper
|
||||
.dataTables_wrapper {
|
||||
position: relative;
|
||||
clear: both;
|
||||
|
||||
// Clearfix
|
||||
&:after {
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
content: "";
|
||||
clear: both;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
// Remove top border from bordered table
|
||||
.table-bordered {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
// Add top border if panel body comes after wrapper
|
||||
+ .panel-body {
|
||||
border-top: 1px solid @table-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Processing indicator
|
||||
.dataTables_processing {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
margin-left: -50%;
|
||||
margin-top: -25px;
|
||||
padding-top: 20px;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(25%, rgba(255, 255, 255, 0.9)), color-stop(75%, rgba(255, 255, 255, 0.9)), color-stop(100%, rgba(255, 255, 255, 0)));
|
||||
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
|
||||
background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
|
||||
background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
|
||||
background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
|
||||
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
|
||||
}
|
||||
|
||||
|
||||
// Header and footer
|
||||
// ------------------------------
|
||||
|
||||
// Common
|
||||
.datatable-header,
|
||||
.datatable-footer {
|
||||
padding: @line-height-computed @content-padding-large 0 @content-padding-large;
|
||||
|
||||
// Clearing floats
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
// Remove left margin from the first item
|
||||
> div:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// Remove horizontal spacing if inside panel body
|
||||
.panel-body & {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
// Highlight header of footer with .*-accent class
|
||||
&-accent {
|
||||
background-color: @table-bg-accent;
|
||||
}
|
||||
}
|
||||
|
||||
// Header
|
||||
.datatable-header {
|
||||
border-bottom: 1px solid @table-border-color;
|
||||
}
|
||||
|
||||
// Footer
|
||||
.datatable-footer {
|
||||
border-top: 1px solid @table-border-highlight;
|
||||
}
|
||||
|
||||
|
||||
// Controls
|
||||
// ------------------------------
|
||||
|
||||
// Length menu
|
||||
.dataTables_length {
|
||||
float: right;
|
||||
display: inline-block;
|
||||
margin: 0 0 @line-height-computed @content-padding-large;
|
||||
|
||||
// Text label
|
||||
> label {
|
||||
margin-bottom: 0;
|
||||
|
||||
// Text, excluding select2 container
|
||||
> span:first-child {
|
||||
float: left;
|
||||
margin: (@padding-base-vertical + 1) @content-padding-base;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Apply default .form-control styles to select
|
||||
select {
|
||||
height: @input-height-base;
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
color: @text-color;
|
||||
background-color: @input-bg;
|
||||
border: 1px solid @input-border;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
// Left display option
|
||||
.length-left & {
|
||||
float: left;
|
||||
}
|
||||
|
||||
// Adjust Select2 menu
|
||||
.select2-container {
|
||||
width: auto;
|
||||
}
|
||||
.select2-choice {
|
||||
min-width: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
// Filter
|
||||
.dataTables_filter {
|
||||
position: relative;
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 0 0 @line-height-computed @content-padding-large;
|
||||
|
||||
// Text label
|
||||
> label {
|
||||
margin-bottom: 0;
|
||||
position: relative;
|
||||
|
||||
// Add search icon
|
||||
&:after {
|
||||
content: "\e98e";
|
||||
font-family: 'icomoon';
|
||||
font-size: @font-size-small;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: @padding-base-horizontal;
|
||||
margin-top: -(@font-size-small / 2);
|
||||
color: @text-muted;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
// Text spacing
|
||||
> span {
|
||||
float: left;
|
||||
margin: (@padding-base-vertical + 1) @content-padding-base;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Filter input
|
||||
input {
|
||||
outline: 0;
|
||||
width: 200px;
|
||||
height: @input-height-base;
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
padding-right: ((@padding-base-horizontal * 2) + @font-size-small);
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
color: @input-color;
|
||||
background-color: @input-bg;
|
||||
border: 1px solid @input-border;
|
||||
border-radius: @input-border-radius;
|
||||
}
|
||||
|
||||
// Right display option
|
||||
.filter-right & {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
// Info
|
||||
.dataTables_info {
|
||||
float: left;
|
||||
padding: (@padding-base-vertical + 1) 0;
|
||||
margin-bottom: @line-height-computed;
|
||||
|
||||
.info-right & {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
// Pagination common styles
|
||||
.dataTables_paginate {
|
||||
float: right;
|
||||
text-align: right;
|
||||
margin: 0 0 @line-height-computed @content-padding-large;
|
||||
|
||||
// Button
|
||||
.paginate_button {
|
||||
display: inline-block;
|
||||
padding: @padding-base-vertical;
|
||||
min-width: @input-height-base;
|
||||
margin-left: 2px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
color: @text-color;
|
||||
border: 1px solid transparent;
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
// First item
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// Hover state
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @pagination-hover-bg;
|
||||
}
|
||||
|
||||
// Current active state
|
||||
&.current {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #fff;
|
||||
background-color: @color-slate-700;
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&.disabled {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
cursor: default;
|
||||
background-color: @pagination-disabled-bg;
|
||||
color: @pagination-disabled-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Simple paginate
|
||||
&.paging_simple .paginate_button {
|
||||
padding-left: @padding-base-horizontal;
|
||||
padding-right: @padding-base-horizontal;
|
||||
}
|
||||
|
||||
// Left display option
|
||||
.paginate-left & {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
// Simple pagination style
|
||||
.paging_simple {
|
||||
.paginate_button {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #fff;
|
||||
background-color: @color-slate-700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Scrollable table
|
||||
// ------------------------------
|
||||
|
||||
.dataTables_scroll {
|
||||
clear: both;
|
||||
|
||||
// Scrolling header
|
||||
.dataTables_scrollHead {
|
||||
table {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
// Scrolling body
|
||||
.dataTables_scrollBody {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
table {
|
||||
border-bottom: 0;
|
||||
|
||||
thead th[class*=sorting] {
|
||||
&:before,
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
tbody tr:first-child > td {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
white-space: nowrap;
|
||||
|
||||
> .dataTables_sizing {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Table inside panels
|
||||
// ------------------------------
|
||||
|
||||
// Inside panel body
|
||||
.panel-body {
|
||||
+ .dataTables_wrapper,
|
||||
+ * > .dataTables_wrapper {
|
||||
border-top: 1px solid @panel-default-border;
|
||||
}
|
||||
|
||||
> .dataTables_wrapper {
|
||||
.datatable-footer {
|
||||
border-top: 0;
|
||||
|
||||
.dataTables_length,
|
||||
.dataTables_filter,
|
||||
.dataTables_info,
|
||||
.dataTables_paginate {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Inside flat panel
|
||||
.panel-flat > .panel-heading + .dataTables_wrapper {
|
||||
> .datatable-header {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Bordered table inside panel
|
||||
.panel > .dataTables_wrapper .table-bordered {
|
||||
border: 0;
|
||||
|
||||
> thead,
|
||||
> tbody,
|
||||
> tfoot {
|
||||
> tr {
|
||||
> td,
|
||||
> th {
|
||||
&:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> tbody > tr:last-child {
|
||||
> th,
|
||||
> td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Responsive style additions
|
||||
// ------------------------------
|
||||
|
||||
// Simple responsive setup
|
||||
.datatable-scroll-lg,
|
||||
.datatable-scroll,
|
||||
.datatable-scroll-sm {
|
||||
min-height: .01%;
|
||||
}
|
||||
|
||||
// Scroller
|
||||
.datatable-scroll-wrap {
|
||||
width: 100%;
|
||||
min-height: .01%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
@media (max-width: @screen-xs-max) {
|
||||
.datatable-scroll-sm {
|
||||
width: 100%;
|
||||
overflow-x: scroll;
|
||||
|
||||
th,
|
||||
td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: @screen-sm-max) {
|
||||
.datatable-scroll {
|
||||
width: 100%;
|
||||
overflow-x: scroll;
|
||||
|
||||
th,
|
||||
td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: @screen-md-max) {
|
||||
.datatable-scroll-lg {
|
||||
width: 100%;
|
||||
overflow-x: scroll;
|
||||
|
||||
th,
|
||||
td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Common media queries
|
||||
@media (max-width: @screen-xs-max) {
|
||||
.dataTables_info,
|
||||
.dataTables_paginate,
|
||||
.dataTables_length,
|
||||
.dataTables_filter,
|
||||
.DTTT_container,
|
||||
.ColVis {
|
||||
float: none!important;
|
||||
text-align: center;
|
||||
margin-left: 0;
|
||||
}
|
||||
.dataTables_info,
|
||||
.dataTables_paginate {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.datatable-header {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,123 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Footable
|
||||
*
|
||||
* jQuery plugin that aims to make HTML tables on smaller devices look awesome.
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: May 25, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Basic styling
|
||||
// ------------------------------
|
||||
|
||||
.footable {
|
||||
width: 100%;
|
||||
|
||||
// Remove user select
|
||||
> thead > tr > th {
|
||||
-webkit-touch-callout: none;
|
||||
.user-select(none);
|
||||
}
|
||||
|
||||
// Setup table styles
|
||||
&.breakpoint {
|
||||
> tbody {
|
||||
> tr {
|
||||
&.footable-detail-show > td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
// Remove background color from details row
|
||||
&.footable-row-detail:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
// Add pointer
|
||||
&:hover:not(.footable-row-detail) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Cell with details
|
||||
> .footable-cell-detail {
|
||||
background-color: @gray-lighter;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
// Add expand icon
|
||||
.footable-toggle:before {
|
||||
content: "\e9e4";
|
||||
display: inline-block;
|
||||
font-family: 'icomoon';
|
||||
font-size: @icon-font-size;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
// Add collapse icon
|
||||
&.footable-detail-show .footable-toggle:before {
|
||||
content: "\e9e7";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Row styling
|
||||
// ------------------------------
|
||||
|
||||
.footable-row-detail-inner {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
.footable-row-detail-row {
|
||||
display: table-row;
|
||||
}
|
||||
.footable-row-detail-group {
|
||||
display: block;
|
||||
font-weight: 700;
|
||||
margin-top: @line-height-computed;
|
||||
margin-bottom: @padding-base-vertical;
|
||||
|
||||
&:first-child {
|
||||
margin-top: @padding-base-vertical;
|
||||
}
|
||||
}
|
||||
.footable-row-detail-name {
|
||||
display: table-cell;
|
||||
padding-right: 40px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.footable-row-detail-value {
|
||||
display: table-cell;
|
||||
padding: @padding-base-vertical 0;
|
||||
}
|
||||
|
||||
// Make dropdown menus full width
|
||||
@media (max-width: @screen-xs) {
|
||||
.footable-row-detail-inner {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.footable-row-detail {
|
||||
.dropdown,
|
||||
.dropup,
|
||||
.btn-group {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,58 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Dragula - drag and drop library
|
||||
*
|
||||
* Styles for Dragula Drag and drop plugin
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: Nov 25, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Base
|
||||
.gu-mirror {
|
||||
position: fixed !important;
|
||||
margin: 0 !important;
|
||||
z-index: 9999 !important;
|
||||
.opacity(0.8);
|
||||
|
||||
}
|
||||
|
||||
// Remove bottom margin from the second last item in dropdown menu
|
||||
.gu-unselectable.dropdown-menu li:nth-last-child(2) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
// Remove borders from toolbar pills
|
||||
.nav-pills-toolbar > li.gu-mirror:not(.active) > a {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Hide element
|
||||
.gu-hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// Disable selection
|
||||
.gu-unselectable {
|
||||
.user-select(none);
|
||||
}
|
||||
|
||||
// Mute draggable element
|
||||
.gu-transit {
|
||||
.opacity(0.5);
|
||||
}
|
||||
|
||||
// Draggable handle
|
||||
.dragula-handle {
|
||||
color: @text-muted;
|
||||
cursor: pointer;
|
||||
|
||||
// Hover state
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,479 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Floating action buttons
|
||||
*
|
||||
* Material design floating action button with menu
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: Mar 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Main menu
|
||||
// -------------------------
|
||||
|
||||
// Base
|
||||
.fab-menu {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
z-index: (@zindex-navbar - 1);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Positions
|
||||
//
|
||||
|
||||
// Absolute
|
||||
.fab-menu-absolute {
|
||||
position: absolute;
|
||||
|
||||
// Affix
|
||||
&.affix {
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
|
||||
// Fixed
|
||||
.fab-menu-fixed {
|
||||
position: fixed;
|
||||
z-index: @zindex-navbar-fixed;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Button positions
|
||||
// -------------------------
|
||||
|
||||
// Top left position
|
||||
.fab-menu-top-left,
|
||||
.fab-menu-top-right, {
|
||||
margin-top: -(@fab-main-btn-size / 2);
|
||||
|
||||
&.affix {
|
||||
top: @line-height-computed;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.content-wrapper > & {
|
||||
top: -(@fab-main-btn-size / 2);
|
||||
}
|
||||
.content-wrapper > &.affix {
|
||||
top: @line-height-computed;
|
||||
}
|
||||
|
||||
.navbar-top &.affix,
|
||||
.navbar-affixed-top &.affix {
|
||||
top: (@navbar-height + @line-height-computed);
|
||||
}
|
||||
|
||||
.navbar-top-lg &.affix,
|
||||
.navbar-affixed-top-lg &.affix {
|
||||
top: (@navbar-height-large + @line-height-computed);
|
||||
}
|
||||
.navbar-top-sm &.affix,
|
||||
.navbar-affixed-top-sm &.affix {
|
||||
top: (@navbar-height-small + @line-height-computed);
|
||||
}
|
||||
.navbar-top-xs &.affix,
|
||||
.navbar-affixed-top-xs &.affix {
|
||||
top: (@navbar-height-mini + @line-height-computed);
|
||||
}
|
||||
}
|
||||
|
||||
.fab-menu-bottom-left,
|
||||
.fab-menu-bottom-right {
|
||||
bottom: @line-height-computed;
|
||||
.transition(bottom ease-in-out 0.15s);
|
||||
|
||||
// Keep space for footer
|
||||
&.reached-bottom {
|
||||
bottom: (@line-height-computed * 4);
|
||||
|
||||
.navbar-bottom & {
|
||||
bottom: (@line-height-computed * 2) + @navbar-height;
|
||||
}
|
||||
.navbar-bottom-lg & {
|
||||
bottom: (@line-height-computed * 2) + @navbar-height-large;
|
||||
}
|
||||
.navbar-bottom-sm & {
|
||||
bottom: (@line-height-computed * 2) + @navbar-height-small;
|
||||
}
|
||||
.navbar-bottom-xs & {
|
||||
bottom: (@line-height-computed * 2) + @navbar-height-mini;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Left position
|
||||
.fab-menu-top-left,
|
||||
.fab-menu-bottom-left {
|
||||
//left: @grid-gutter-width;
|
||||
}
|
||||
|
||||
// Top right position
|
||||
.fab-menu-top-right,
|
||||
.fab-menu-bottom-right {
|
||||
right: @grid-gutter-width;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Inner menu
|
||||
// -------------------------
|
||||
|
||||
.fab-menu-inner {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
// Menu items
|
||||
> li {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: @fab-btn-difference;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
padding-top: @fab-inner-btn-spacing;
|
||||
margin-top: -(@fab-inner-btn-spacing);
|
||||
|
||||
// Remove border from buttons
|
||||
.btn {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
// Make buttons smaller than main one
|
||||
.btn-float {
|
||||
padding: 0;
|
||||
width: @fab-inner-btn-size;
|
||||
height: @fab-inner-btn-size;
|
||||
.box-shadow(@shadow-depth1);
|
||||
|
||||
// Hover state
|
||||
&:hover,
|
||||
&:focus {
|
||||
.box-shadow(@shadow-depth2);
|
||||
}
|
||||
|
||||
// Icon spacing
|
||||
> i {
|
||||
margin: (@btn-float-padding - @fab-btn-difference);
|
||||
}
|
||||
|
||||
&.btn-flat {
|
||||
> i {
|
||||
margin: (@btn-float-padding - @fab-btn-difference - 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Labels, badges and status marks
|
||||
//
|
||||
|
||||
// Base
|
||||
.badge,
|
||||
.label,
|
||||
.status-mark {
|
||||
position: absolute;
|
||||
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
.box-shadow(0 0 0 2px @body-bg);
|
||||
}
|
||||
}
|
||||
|
||||
// Labels and badges
|
||||
.badge,
|
||||
.label {
|
||||
top: @fab-inner-btn-spacing - 4px;
|
||||
right: -4px;
|
||||
}
|
||||
|
||||
// Status marks
|
||||
.status-mark {
|
||||
top: @fab-inner-btn-spacing + 2px;
|
||||
right: 2px;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Change appearance in bottom position
|
||||
//
|
||||
|
||||
.fab-menu-bottom-left &,
|
||||
.fab-menu-bottom-right & {
|
||||
padding-top: 0;
|
||||
margin-top: 0;
|
||||
padding-bottom: @fab-inner-btn-spacing;
|
||||
margin-bottom: -(@fab-inner-btn-spacing);
|
||||
|
||||
// Labels and badges
|
||||
.badge,
|
||||
.label {
|
||||
top: -4px;
|
||||
}
|
||||
|
||||
// Status marks
|
||||
.status-mark {
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown menu
|
||||
.dropdown-menu {
|
||||
margin-top: 0;
|
||||
margin-right: 10px;
|
||||
top: (@fab-inner-btn-spacing) - (@fab-btn-difference / 2);
|
||||
left: auto;
|
||||
right: 100%;
|
||||
}
|
||||
|
||||
// Right dropdown menu position
|
||||
.dropdown-menu-right {
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
right: auto;
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Main button
|
||||
// -------------------------
|
||||
|
||||
// Base
|
||||
.fab-menu-btn {
|
||||
z-index: (@zindex-navbar + 1);
|
||||
border-width: 0;
|
||||
.box-shadow(@shadow-depth1);
|
||||
|
||||
// Float button overrides
|
||||
&.btn-float {
|
||||
padding: (@fab-main-btn-size / 2);
|
||||
|
||||
// Icons
|
||||
> i {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -(@icon-font-size / 2);
|
||||
margin-left: -(@icon-font-size / 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Button shadow
|
||||
&:hover,
|
||||
&:focus,
|
||||
.fab-menu[data-fab-toggle="hover"]:hover &,
|
||||
.fab-menu[data-fab-state="open"] & {
|
||||
.box-shadow(@shadow-depth2);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Icons animation
|
||||
//
|
||||
|
||||
// Animation
|
||||
.fab-icon-close,
|
||||
.fab-icon-open {
|
||||
.rotate(360deg);
|
||||
.transition(all ease-in-out 0.3s);
|
||||
|
||||
// Reverse rotation if active
|
||||
.fab-menu[data-fab-toggle="hover"]:hover &,
|
||||
.fab-menu[data-fab-state="open"] & {
|
||||
.rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
// Open icon
|
||||
.fab-icon-open {
|
||||
.fab-menu[data-fab-toggle="hover"]:hover &,
|
||||
.fab-menu[data-fab-state="open"] & {
|
||||
.opacity(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Close icon
|
||||
.fab-icon-close {
|
||||
.opacity(0);
|
||||
|
||||
// Display if active
|
||||
.fab-menu[data-fab-toggle="hover"]:hover &,
|
||||
.fab-menu[data-fab-state="open"] & {
|
||||
.opacity(1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Inner menu animation
|
||||
// -------------------------
|
||||
|
||||
// Base
|
||||
.fab-menu {
|
||||
|
||||
// Hide items
|
||||
.fab-menu-inner > li {
|
||||
visibility: hidden;
|
||||
.opacity(0);
|
||||
.transition(all ease-in-out 0.3s);
|
||||
|
||||
// Items number
|
||||
&:nth-child(1) {
|
||||
.transition-delay(0.05s);
|
||||
}
|
||||
&:nth-child(2) {
|
||||
.transition-delay(0.1s);
|
||||
}
|
||||
&:nth-child(3) {
|
||||
.transition-delay(0.15s);
|
||||
}
|
||||
&:nth-child(4) {
|
||||
.transition-delay(0.2s);
|
||||
}
|
||||
&:nth-child(5) {
|
||||
.transition-delay(0.25s);
|
||||
}
|
||||
}
|
||||
|
||||
// Show items
|
||||
&[data-fab-toggle="hover"]:hover,
|
||||
&[data-fab-state="open"] {
|
||||
.fab-menu-inner > li {
|
||||
visibility: visible;
|
||||
.opacity(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Top position
|
||||
.fab-menu-top,
|
||||
.fab-menu-top-left,
|
||||
.fab-menu-top-right {
|
||||
&[data-fab-toggle="hover"]:hover,
|
||||
&[data-fab-state="open"] {
|
||||
.fab-menu-inner > li {
|
||||
&:nth-child(1) {
|
||||
top: (@fab-inner-btn-size + @fab-inner-btn-spacing) + (@fab-btn-difference * 2);
|
||||
.transition-delay(0.05s);
|
||||
}
|
||||
&:nth-child(2) {
|
||||
top: ((@fab-inner-btn-size + @fab-inner-btn-spacing) * 2) + (@fab-btn-difference * 2);
|
||||
.transition-delay(0.1s);
|
||||
}
|
||||
&:nth-child(3) {
|
||||
top: ((@fab-inner-btn-size + @fab-inner-btn-spacing) * 3) + (@fab-btn-difference * 2);
|
||||
.transition-delay(0.15s);
|
||||
}
|
||||
&:nth-child(4) {
|
||||
top: ((@fab-inner-btn-size + @fab-inner-btn-spacing) * 4) + (@fab-btn-difference * 2);
|
||||
.transition-delay(0.2s);
|
||||
}
|
||||
&:nth-child(5) {
|
||||
top: ((@fab-inner-btn-size + @fab-inner-btn-spacing) * 5) + (@fab-btn-difference * 2);
|
||||
.transition-delay(0.25s);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Bottom position
|
||||
.fab-menu-bottom,
|
||||
.fab-menu-bottom-left,
|
||||
.fab-menu-bottom-right {
|
||||
&[data-fab-toggle="hover"]:hover,
|
||||
&[data-fab-state="open"] {
|
||||
.fab-menu-inner > li {
|
||||
&:nth-child(1) {
|
||||
top: -(@fab-inner-btn-size + @fab-inner-btn-spacing) + (@fab-btn-difference * 2);
|
||||
.transition-delay(0.05s);
|
||||
}
|
||||
&:nth-child(2) {
|
||||
top: -((@fab-inner-btn-size + @fab-inner-btn-spacing) * 2) + (@fab-btn-difference * 2);
|
||||
.transition-delay(0.1s);
|
||||
}
|
||||
&:nth-child(3) {
|
||||
top: -((@fab-inner-btn-size + @fab-inner-btn-spacing) * 3) + (@fab-btn-difference * 2);
|
||||
.transition-delay(0.15s);
|
||||
}
|
||||
&:nth-child(4) {
|
||||
top: -((@fab-inner-btn-size + @fab-inner-btn-spacing) * 4) + (@fab-btn-difference * 2);
|
||||
.transition-delay(0.2s);
|
||||
}
|
||||
&:nth-child(5) {
|
||||
top: -((@fab-inner-btn-size + @fab-inner-btn-spacing) * 5) + (@fab-btn-difference * 2);
|
||||
.transition-delay(0.25s);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Item labels
|
||||
// -------------------------
|
||||
|
||||
.fab-menu-inner div[data-fab-label] {
|
||||
|
||||
// Base
|
||||
&:after {
|
||||
content: attr(data-fab-label);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -(@padding-base-vertical);
|
||||
right: (@fab-btn-difference + @fab-inner-btn-size + @grid-gutter-width);
|
||||
color: @tooltip-color;
|
||||
background-color: @tooltip-bg;
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
visibility: hidden;
|
||||
border-radius: @border-radius-base;
|
||||
.box-shadow(@shadow-depth1);
|
||||
.opacity(0);
|
||||
.transition(all ease-in-out 0.3s);
|
||||
|
||||
// Reposition them in bottom position
|
||||
.fab-menu-bottom-left &,
|
||||
.fab-menu-bottom-right & {
|
||||
margin-top: -(@padding-base-vertical + @fab-inner-btn-spacing);
|
||||
}
|
||||
}
|
||||
|
||||
// Placement
|
||||
.fab-menu-top-left &:after,
|
||||
.fab-menu-bottom-left &:after,
|
||||
&.fab-label-right:after {
|
||||
right: auto;
|
||||
left: (@fab-btn-difference + @fab-inner-btn-size + @grid-gutter-width);
|
||||
}
|
||||
|
||||
// Display labels
|
||||
.fab-menu[data-fab-toggle="hover"] &:hover:after,
|
||||
.fab-menu[data-fab-state="open"] &:hover:after {
|
||||
visibility: visible;
|
||||
.opacity(1);
|
||||
}
|
||||
|
||||
// Light label
|
||||
&.fab-label-light:after {
|
||||
background-color: @panel-bg;
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
// Always visible
|
||||
&.fab-label-visible:after {
|
||||
visibility: visible;
|
||||
.opacity(1);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,501 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Fancytree
|
||||
*
|
||||
* Tree plugin for jQuery with support for persistence, keyboard, checkboxes,
|
||||
* tables (grid), drag'n'drop, and lazy loading
|
||||
*
|
||||
* Version: 1.1
|
||||
* Latest update: Jul 5, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
/* # Core
|
||||
-------------------------------------------------- */
|
||||
|
||||
// Container
|
||||
.fancytree-container {
|
||||
list-style: none;
|
||||
white-space: nowrap;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
|
||||
// Remove outline on focus
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
// List
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0 0 0 @content-padding-large;
|
||||
margin: 0;
|
||||
|
||||
// Add 1px margin to items
|
||||
li {
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
.ui-fancytree-disabled & {
|
||||
.opacity(0.6);
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
.ui-fancytree-disabled {
|
||||
.fancytree-container,
|
||||
.fancytree-title,
|
||||
.fancytree-expander {
|
||||
cursor: @cursor-disabled;
|
||||
}
|
||||
|
||||
.fancytree-treefocus .fancytree-selected .fancytree-title {
|
||||
background-color: #f5f5f5;
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Helper
|
||||
.ui-helper-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Give icons common base
|
||||
.fancytree-expander:after,
|
||||
.fancytree-icon:after,
|
||||
.fancytree-checkbox:after,
|
||||
.fancytree-drag-helper-img:after,
|
||||
.fancytree-drop-before:after,
|
||||
.fancytree-drop-after:after,
|
||||
.fancytree-loading .fancytree-expander:after,
|
||||
.fancytree-statusnode-wait .fancytree-icon:after {
|
||||
font-family: 'icomoon';
|
||||
display: inline-block;
|
||||
font-size: @icon-font-size;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
|
||||
// Common icon definitions
|
||||
// ------------------------------
|
||||
|
||||
.fancytree-icon,
|
||||
.fancytree-checkbox,
|
||||
.fancytree-custom-icon {
|
||||
margin-top: 5px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
// Checkboxes
|
||||
.fancytree-checkbox {
|
||||
margin: 4px 10px 0 2px;
|
||||
}
|
||||
|
||||
// Used by iconclass option
|
||||
.fancytree-custom-icon {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Used by 'icon' node option
|
||||
img.fancytree-icon {
|
||||
width: @icon-font-size;
|
||||
height: @icon-font-size;
|
||||
margin-left: 3px;
|
||||
margin-top: 3px;
|
||||
vertical-align: top;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
//
|
||||
// Expander icon
|
||||
//
|
||||
// Prefix: fancytree-exp-
|
||||
// 1st character: 'e': expanded, 'c': collapsed, 'n': no children
|
||||
// 2nd character (optional): 'd': lazy (Delayed)
|
||||
// 3rd character (optional): 'l': Last sibling
|
||||
// ----------------------------------------
|
||||
|
||||
// Icons
|
||||
.fancytree-expander {
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
margin-top: 5px;
|
||||
width: @icon-font-size;
|
||||
line-height: 1;
|
||||
|
||||
.fancytree-exp-c &:after {
|
||||
content: '\e9c7';
|
||||
}
|
||||
.fancytree-exp-cl &:after {
|
||||
content: '\e9c7';
|
||||
}
|
||||
.fancytree-exp-cd &:after,
|
||||
.fancytree-exp-cdl &:after {
|
||||
content: '\e9c7';
|
||||
}
|
||||
.fancytree-exp-e &:after,
|
||||
.fancytree-exp-ed &:after {
|
||||
content: '\e9c5';
|
||||
}
|
||||
.fancytree-exp-el &:after,
|
||||
.fancytree-exp-edl &:after {
|
||||
content: '\e9c5';
|
||||
}
|
||||
}
|
||||
|
||||
// Status node icons
|
||||
.fancytree-statusnode-error .fancytree-icon:after {
|
||||
content: '\ed63';
|
||||
}
|
||||
|
||||
// Loading icon
|
||||
.fancytree-loading .fancytree-expander,
|
||||
.fancytree-statusnode-wait .fancytree-icon {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: @icon-font-size;
|
||||
height: @icon-font-size;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
|
||||
&:after {
|
||||
content: '\ed6c';
|
||||
.transition(all 0.15s ease-in-out);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
//
|
||||
// # Node type icon
|
||||
//
|
||||
// Prefix: fancytree-ico-
|
||||
// 1st character: 'e': expanded, 'c': collapsed,
|
||||
// 2nd character (optional): 'f': folder
|
||||
// ----------------------------------------
|
||||
|
||||
// Base
|
||||
.fancytree-icon {
|
||||
display: inline-block;
|
||||
width: @icon-font-size;
|
||||
height: @icon-font-size;
|
||||
}
|
||||
|
||||
|
||||
// Documents
|
||||
// ----------------------------------------
|
||||
|
||||
// Icons
|
||||
.fancytree-ico-c,
|
||||
.fancytree-ico-e {
|
||||
.fancytree-icon:after {
|
||||
content: '\ea1a';
|
||||
}
|
||||
}
|
||||
|
||||
// With children
|
||||
.fancytree-has-children {
|
||||
&.fancytree-ico-c .fancytree-icon:after {
|
||||
content: '\ea0f';
|
||||
}
|
||||
|
||||
&.fancytree-ico-e .fancytree-icon:after {
|
||||
content: '\ea11';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Folders
|
||||
// ----------------------------------------
|
||||
|
||||
// Icons
|
||||
.fancytree-ico-cf,
|
||||
.fancytree-ico-ef {
|
||||
.fancytree-icon:after {
|
||||
content: '\ea3d';
|
||||
}
|
||||
}
|
||||
|
||||
// With children
|
||||
.fancytree-has-children {
|
||||
&.fancytree-ico-cf .fancytree-icon:after {
|
||||
content: '\ea41';
|
||||
}
|
||||
|
||||
&.fancytree-ico-ef .fancytree-icon:after {
|
||||
content: '\ea43';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Checkbox icon
|
||||
// ----------------------------------------
|
||||
|
||||
.fancytree-checkbox {
|
||||
|
||||
// Base
|
||||
width: @checkbox-size;
|
||||
height: @checkbox-size;
|
||||
border: @checkbox-border-width solid @color-grey-500;
|
||||
display: block;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
border-radius: @border-radius-small;
|
||||
|
||||
// Add icons
|
||||
&:after,
|
||||
.fancytree-partsel.fancytree-selected &:after {
|
||||
content: "\e600";
|
||||
margin-top: -(@checkbox-border-width / 2);
|
||||
margin-left: -(@checkbox-border-width / 2);
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Grey square in hierarchical select
|
||||
.fancytree-partsel > &:after {
|
||||
content: "";
|
||||
width: (@checkbox-size - 10);
|
||||
height: (@checkbox-size - 10);
|
||||
display: none;
|
||||
background-color: @color-grey-400;
|
||||
margin: ((@checkbox-size - (@checkbox-size - 10)) / 2) - @checkbox-border-width;
|
||||
}
|
||||
.fancytree-partsel.fancytree-selected &:after {
|
||||
background-color: transparent;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
.fancytree-selected &:after,
|
||||
.fancytree-partsel &:after,
|
||||
.fancytree-partsel.fancytree-selected &:after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Radio (single select imitation)
|
||||
.fancytree-radio & {
|
||||
border-radius: 100%;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
width: (@checkbox-size - 10);
|
||||
height: (@checkbox-size - 10);
|
||||
background-color: @color-grey-400;
|
||||
margin: ((@checkbox-size - (@checkbox-size - 10)) / 2) - @checkbox-border-width;
|
||||
border-radius: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* # Other styles
|
||||
-------------------------------------------------- */
|
||||
|
||||
// Drag'n'drop support
|
||||
// ----------------------------------------
|
||||
|
||||
// Helper
|
||||
.fancytree-drag-helper {
|
||||
border: 1px solid #ddd;
|
||||
background-color: #fff;
|
||||
padding: 4px 5px;
|
||||
.opacity(0.8);
|
||||
}
|
||||
|
||||
// Drag helper image
|
||||
.fancytree-drag-helper-img {
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -((@icon-font-size / 2) + 1);
|
||||
right: -(@icon-font-size + @content-padding-small);
|
||||
}
|
||||
|
||||
// If accept
|
||||
.fancytree-drop-accept &:after {
|
||||
content: '\ee73';
|
||||
color: @color-success-500;
|
||||
}
|
||||
|
||||
// If reject
|
||||
.fancytree-drop-reject &:after {
|
||||
content: '\ed63';
|
||||
color: @color-danger-500;
|
||||
}
|
||||
}
|
||||
|
||||
// Marker icon
|
||||
#fancytree-drop-marker {
|
||||
&.fancytree-drop-before,
|
||||
&.fancytree-drop-after {
|
||||
width: 200px;
|
||||
border-top: 1px solid @text-color;
|
||||
position: absolute!important;
|
||||
}
|
||||
}
|
||||
|
||||
// Source node while dragging
|
||||
.fancytree-drag-source {
|
||||
background-color: @panel-default-border;
|
||||
|
||||
.fancytree.title {
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Target node while dragging cursor is over it
|
||||
.fancytree-drop-target.fancytree-drop-accept a {
|
||||
background-color: @brand-primary !important;
|
||||
color: #fff !important;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
// Styles specific to this skin
|
||||
// ----------------------------------------
|
||||
|
||||
// Node
|
||||
.fancytree-node {
|
||||
display: inherit;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Title
|
||||
.fancytree-title {
|
||||
border: 0;
|
||||
padding: 4px 6px;
|
||||
border-radius: @border-radius-small;
|
||||
margin-left: 4px;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
|
||||
> input {
|
||||
border: 0;
|
||||
outline: 0;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
// Selected title
|
||||
.fancytree-selected & {
|
||||
background-color: @panel-default-border;
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
// Title when focused
|
||||
.fancytree-treefocus .fancytree-selected & {
|
||||
background-color: @brand-primary;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// Active title
|
||||
.fancytree-active & {
|
||||
background-color: @panel-default-border;
|
||||
}
|
||||
}
|
||||
|
||||
// Inside dark sidebar
|
||||
.sidebar:not(.sidebar-default) {
|
||||
.fancytree-selected .fancytree-title,
|
||||
.fancytree-active .fancytree-title {
|
||||
background-color: fade(#fff, 20%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.fancytree-treefocus .fancytree-selected .fancytree-title {
|
||||
background-color: @brand-primary;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Table extension
|
||||
// ----------------------------------------
|
||||
|
||||
.fancytree-ext-table {
|
||||
|
||||
// Node
|
||||
.fancytree-node {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
// Title
|
||||
.fancytree-title {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
// Container
|
||||
&.fancytree-container {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
// Icons
|
||||
.fancytree-expander,
|
||||
.fancytree-icon,
|
||||
.fancytree-custom-icon {
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
// Checkboxes
|
||||
.fancytree-checkbox {
|
||||
margin: 0 auto;
|
||||
float: none;
|
||||
}
|
||||
|
||||
// Additional checkboxes
|
||||
.checker {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
// Rows
|
||||
tbody tr {
|
||||
td:first-child {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.fancytree-focused {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
&.fancytree-active {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
&.fancytree-selected {
|
||||
background-color: @brand-primary;
|
||||
color: #fff;
|
||||
|
||||
.fancytree-checkbox {
|
||||
color: #fff;
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
.checker span {
|
||||
border-color: #fff;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Child Counter extension
|
||||
// ----------------------------------------
|
||||
|
||||
.fancytree-ext-childcounter .fancytree-childcounter {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 4px;
|
||||
color: @text-muted;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,64 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Headroom
|
||||
*
|
||||
* Hide BS navbar component on page scroll
|
||||
*
|
||||
* Version: 1.1
|
||||
* Latest update: Mar 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Common styles
|
||||
// ------------------------------
|
||||
|
||||
// Base
|
||||
.headroom {
|
||||
@headroom-transition: top 0.2s ease-in-out, bottom 0.2s ease-in-out;
|
||||
.transition(@headroom-transition);
|
||||
}
|
||||
|
||||
// Top position
|
||||
.navbar {
|
||||
&.headroom-top-pinned {
|
||||
top: 0;
|
||||
}
|
||||
&.headroom-top-unpinned {
|
||||
top: -(@navbar-height + 2);
|
||||
.box-shadow(none);
|
||||
|
||||
// Sizes
|
||||
.navbar-lg& {
|
||||
top: -(@navbar-height-large + 2);
|
||||
}
|
||||
.navbar-sm& {
|
||||
top: -(@navbar-height-small + 2);
|
||||
}
|
||||
.navbar-xs& {
|
||||
top: -(@navbar-height-mini + 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Bottom position
|
||||
.navbar {
|
||||
&.headroom-bottom-pinned {
|
||||
bottom: -(@navbar-height + 2);
|
||||
.box-shadow(none);
|
||||
|
||||
// Sizes
|
||||
.navbar-lg& {
|
||||
bottom: -(@navbar-height-large + 2);
|
||||
}
|
||||
.navbar-sm& {
|
||||
bottom: -(@navbar-height-small + 2);
|
||||
}
|
||||
.navbar-xs& {
|
||||
bottom: -(@navbar-height-mini + 2);
|
||||
}
|
||||
}
|
||||
&.headroom-bottom-unpinned {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,208 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Prism
|
||||
*
|
||||
* Lightweight, extensible syntax highlighter
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: May 10, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Base
|
||||
code,
|
||||
pre {
|
||||
&[class*="language-"] {
|
||||
text-shadow: 0 1px #fff;
|
||||
word-break: normal;
|
||||
line-height: 1.5;
|
||||
direction: ltr;
|
||||
|
||||
@media print {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Token colors
|
||||
.token {
|
||||
&.comment,
|
||||
&.prolog,
|
||||
&.doctype,
|
||||
&.cdata,
|
||||
&.punctuation {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
&.property,
|
||||
&.tag,
|
||||
&.boolean,
|
||||
&.number,
|
||||
&.constant,
|
||||
&.symbol {
|
||||
color: #905;
|
||||
}
|
||||
|
||||
&.selector,
|
||||
&.attr-name,
|
||||
&.string,
|
||||
&.builtin {
|
||||
color: #690;
|
||||
}
|
||||
|
||||
&.operator,
|
||||
&.entity,
|
||||
&.url,
|
||||
.language-css &.string,
|
||||
.style &.string,
|
||||
&.variable {
|
||||
color: #a67f59;
|
||||
background: hsla(0,0%,100%,.5);
|
||||
}
|
||||
|
||||
&.atrule,
|
||||
&.attr-value,
|
||||
&.keyword {
|
||||
color: #07a;
|
||||
}
|
||||
|
||||
&.function {
|
||||
color: #DD4A68;
|
||||
}
|
||||
|
||||
&.regex,
|
||||
&.important {
|
||||
color: #e90;
|
||||
}
|
||||
|
||||
&.important {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.entity {
|
||||
cursor: help;
|
||||
}
|
||||
}
|
||||
|
||||
.namespace {
|
||||
.opacity(0.7);
|
||||
}
|
||||
|
||||
// Line highlight
|
||||
.line-highlight {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-top: @content-padding-large;
|
||||
background: fade(#85ee95, 12%);
|
||||
pointer-events: none;
|
||||
white-space: pre;
|
||||
line-height: inherit;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: attr(data-start);
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 10px;
|
||||
padding: 2px;
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
color: @text-muted;
|
||||
}
|
||||
|
||||
&[data-end]:after {
|
||||
content: attr(data-end);
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Line numbers
|
||||
.line-numbers {
|
||||
pre& {
|
||||
position: relative;
|
||||
padding-left: 50px;
|
||||
counter-reset: linenumber;
|
||||
|
||||
> code {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.line-numbers-rows {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
top: 0;
|
||||
font-size: 100%;
|
||||
left: -50px;
|
||||
width: 36px; // works for line-numbers below 1000 lines
|
||||
letter-spacing: -1px;
|
||||
border-right: 1px solid #999;
|
||||
.user-select(none);
|
||||
|
||||
> span {
|
||||
pointer-events: none;
|
||||
display: block;
|
||||
counter-increment: linenumber;
|
||||
|
||||
&:before {
|
||||
content: counter(linenumber);
|
||||
color: @text-muted;
|
||||
display: block;
|
||||
padding-right: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Code blocks
|
||||
pre {
|
||||
&[class*="language-"] {
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
border-left-width: 3px;
|
||||
border-left-color: @brand-primary;
|
||||
background-color: #fdfdfd;
|
||||
background-image: -webkit-linear-gradient(transparent 50%, fade(@color-primary-700, 2.5%) 50%);
|
||||
background-image: -moz-linear-gradient(transparent 50%, fade(@color-primary-700, 2.5%) 50%);
|
||||
background-image: -ms-linear-gradient(transparent 50%, fade(@color-primary-700, 2.5%) 50%);
|
||||
background-image: -o-linear-gradient(transparent 50%, fade(@color-primary-700, 2.5%) 50%);
|
||||
background-image: linear-gradient(transparent 50%, fade(@color-primary-700, 2.5%) 50%);
|
||||
background-size: 3em 3em;
|
||||
background-origin: content-box;
|
||||
.border-left-radius(0);
|
||||
|
||||
> code[data-language] {
|
||||
display: block;
|
||||
|
||||
&:before {
|
||||
content: attr(data-language);
|
||||
background-color: #f8f8f8;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
font-size: @font-size-mini;
|
||||
border-radius: 0 0 0 2px;
|
||||
padding: 4px 8px;
|
||||
text-shadow: none;
|
||||
color: @text-color;
|
||||
border-left: 1px solid #ddd;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
&.line-numbers > code[data-language]:before {
|
||||
top: -15px;
|
||||
right: -15px;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-line] {
|
||||
position: relative;
|
||||
padding-left: 36px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,369 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Ladda progress buttons
|
||||
*
|
||||
* Buttons with built-in loading indicators
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: May 25, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Common styles
|
||||
// ------------------------------
|
||||
|
||||
.btn-ladda {
|
||||
&,
|
||||
.ladda-spinner,
|
||||
.ladda-label {
|
||||
.transition(all cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s);
|
||||
}
|
||||
|
||||
// Spinner
|
||||
.ladda-spinner {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
display: inline-block;
|
||||
top: 50%;
|
||||
pointer-events: none;
|
||||
.opacity(0);
|
||||
}
|
||||
|
||||
// Label
|
||||
.ladda-label {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
// Progress bar
|
||||
.ladda-progress {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: fade(#000, 20%);
|
||||
visibility: hidden;
|
||||
.transition(all linear 0.3s);
|
||||
.opacity(0);
|
||||
}
|
||||
&[data-loading] .ladda-progress{
|
||||
visibility: visible;
|
||||
.opacity(1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Zoom animation
|
||||
// ------------------------------
|
||||
|
||||
.btn-ladda {
|
||||
|
||||
// Common
|
||||
&[data-style=zoom-in],
|
||||
&[data-style=zoom-out] {
|
||||
overflow: hidden;
|
||||
|
||||
&,
|
||||
.ladda-spinner,
|
||||
.ladda-label {
|
||||
.transition(0.3s ease all);
|
||||
}
|
||||
|
||||
// Label
|
||||
.ladda-label {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Spinner
|
||||
.ladda-spinner {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
// Loading
|
||||
&[data-loading] {
|
||||
.ladda-label {
|
||||
.opacity(0);
|
||||
}
|
||||
|
||||
.ladda-spinner {
|
||||
-webkit-transform: none;
|
||||
-moz-transform: none;
|
||||
-ms-transform: none;
|
||||
-o-transform: none;
|
||||
transform: none;
|
||||
.opacity(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Zoom in
|
||||
&[data-style=zoom-in] {
|
||||
.ladda-spinner {
|
||||
.scale(0.2);
|
||||
}
|
||||
|
||||
&[data-loading] {
|
||||
.ladda-label {
|
||||
.scale(2.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Zoom out
|
||||
&[data-style=zoom-out] {
|
||||
.ladda-spinner {
|
||||
.scale(2.5);
|
||||
}
|
||||
|
||||
&[data-loading] {
|
||||
.ladda-label {
|
||||
.scale(0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Expand animation
|
||||
// ------------------------------
|
||||
|
||||
.btn-ladda {
|
||||
|
||||
// Left
|
||||
&[data-style=expand-left] {
|
||||
overflow: hidden;
|
||||
|
||||
.ladda-spinner {
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
&[data-loading] {
|
||||
padding-left: 35px;
|
||||
|
||||
.ladda-spinner {
|
||||
.opacity(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Right
|
||||
&[data-style=expand-right] {
|
||||
overflow: hidden;
|
||||
|
||||
.ladda-spinner {
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
&[data-loading] {
|
||||
padding-right: 35px;
|
||||
|
||||
.ladda-spinner {
|
||||
.opacity(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Up
|
||||
&[data-style=expand-up] {
|
||||
overflow: hidden;
|
||||
|
||||
.ladda-spinner {
|
||||
top: -16px;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
&[data-loading] {
|
||||
padding-top: 40px;
|
||||
|
||||
.ladda-spinner {
|
||||
top: 12px;
|
||||
margin-top: 8px;
|
||||
.opacity(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Down
|
||||
&[data-style=expand-down] {
|
||||
overflow: hidden;
|
||||
|
||||
.ladda-spinner {
|
||||
top: 44px;
|
||||
left: 50%;
|
||||
}
|
||||
&[data-loading] {
|
||||
padding-bottom: 40px;
|
||||
|
||||
.ladda-spinner {
|
||||
.opacity(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Slide animation
|
||||
// ------------------------------
|
||||
|
||||
.btn-ladda {
|
||||
|
||||
// Left
|
||||
&[data-style=slide-left] {
|
||||
overflow: hidden;
|
||||
|
||||
.ladda-label {
|
||||
left: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ladda-spinner {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&[data-loading] {
|
||||
.ladda-label {
|
||||
left: -100%;
|
||||
.opacity(0);
|
||||
}
|
||||
|
||||
.ladda-spinner {
|
||||
right: 50%;
|
||||
.opacity(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Right
|
||||
&[data-style=slide-right] {
|
||||
overflow: hidden;
|
||||
|
||||
.ladda-label {
|
||||
right: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ladda-spinner {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&[data-loading] {
|
||||
.ladda-label {
|
||||
right: -100%;
|
||||
.opacity(0);
|
||||
}
|
||||
|
||||
.ladda-spinner {
|
||||
left: 50%;
|
||||
.opacity(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Up
|
||||
&[data-style=slide-up] {
|
||||
overflow: hidden;
|
||||
|
||||
.ladda-label {
|
||||
top: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ladda-spinner {
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
&[data-loading] {
|
||||
.ladda-label {
|
||||
top: -16px;
|
||||
.opacity(0);
|
||||
}
|
||||
|
||||
.ladda-spinner {
|
||||
top: 16px;
|
||||
.opacity(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Down
|
||||
&[data-style=slide-down] {
|
||||
overflow: hidden;
|
||||
|
||||
.ladda-label {
|
||||
top: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ladda-spinner {
|
||||
top: -100%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
&[data-loading] {
|
||||
.ladda-label {
|
||||
top: 16px;
|
||||
.opacity(0);
|
||||
}
|
||||
|
||||
.ladda-spinner {
|
||||
top: 16px;
|
||||
.opacity(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Fade animation
|
||||
// ------------------------------
|
||||
|
||||
.btn-ladda {
|
||||
&[data-style=fade] {
|
||||
overflow: hidden;
|
||||
|
||||
.ladda-spinner {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
&[data-loading] {
|
||||
.ladda-label {
|
||||
.opacity(0);
|
||||
}
|
||||
|
||||
.ladda-spinner {
|
||||
.opacity(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Radius animation
|
||||
// ------------------------------
|
||||
|
||||
.btn-ladda {
|
||||
&[data-style=radius] {
|
||||
overflow: hidden;
|
||||
border-radius: @border-radius-small;
|
||||
.transition(all ease-in-out 0.5s);
|
||||
|
||||
.ladda-spinner {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
&[data-loading] {
|
||||
border-radius: @border-radius-large;
|
||||
|
||||
.ladda-label {
|
||||
.opacity(0);
|
||||
}
|
||||
|
||||
.ladda-spinner {
|
||||
.opacity(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,363 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Dropzone file uploader
|
||||
*
|
||||
* Open source library that provides drag’n’drop file uploads with image previews
|
||||
*
|
||||
* Version: 1.3
|
||||
* Latest update: Dec 30, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Layout
|
||||
// ------------------------------
|
||||
|
||||
.dropzone {
|
||||
position: relative;
|
||||
border: 2px dashed @panel-default-border;
|
||||
min-height: 250px;
|
||||
border-radius: @border-radius-small;
|
||||
background-color: #fff;
|
||||
padding: 5px;
|
||||
|
||||
// If inside panel, give it grey background
|
||||
.panel & {
|
||||
background-color: #fcfcfc;
|
||||
border-color: @gray-lighter;
|
||||
}
|
||||
|
||||
// Clickable wrapper
|
||||
&.dz-clickable {
|
||||
&,
|
||||
.dz-message,
|
||||
.dz-message span {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
* {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
// Message
|
||||
.dz-message {
|
||||
.opacity(1);
|
||||
}
|
||||
&.dz-started .dz-message {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Drag hover border and bg color
|
||||
&.dz-drag-hover {
|
||||
border-color: fade(#000, 15%);
|
||||
background: fade(#000, 4%);
|
||||
}
|
||||
|
||||
// Inside sidebar
|
||||
.sidebar & {
|
||||
min-height: 190px;
|
||||
text-align: center;
|
||||
border-width: 2px;
|
||||
|
||||
.dz-default.dz-message {
|
||||
&:before {
|
||||
font-size: (@icon-font-size * 4);
|
||||
width: (@icon-font-size * 4);
|
||||
height: (@icon-font-size * 4);
|
||||
margin-left: -(@icon-font-size * 2);
|
||||
top: 50px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: @font-size-h6;
|
||||
}
|
||||
|
||||
> span {
|
||||
margin-top: 130px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: @screen-sm) {
|
||||
min-height: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Messages
|
||||
// ------------------------------
|
||||
|
||||
.dropzone {
|
||||
|
||||
// Default styles
|
||||
.dz-default {
|
||||
&.dz-message {
|
||||
@dz-message-height: 230px;
|
||||
position: absolute;
|
||||
height: @dz-message-height;
|
||||
width: 100%;
|
||||
margin-top: -(@dz-message-height / 2);
|
||||
top: 50%;
|
||||
left: 0;
|
||||
padding: @panel-body-padding;
|
||||
text-align: center;
|
||||
border-radius: @border-radius-large;
|
||||
.opacity(1);
|
||||
.transition(opacity 0.3s ease-in-out);
|
||||
|
||||
// Icon
|
||||
&:before {
|
||||
content: '\ea0e';
|
||||
font-family: 'icomoon';
|
||||
font-size: (@icon-font-size * 4);
|
||||
position: absolute;
|
||||
top: (@icon-font-size * 3);
|
||||
width: (@icon-font-size * 4);
|
||||
height: (@icon-font-size * 4);
|
||||
display: inline-block;
|
||||
left: 50%;
|
||||
margin-left: -(@icon-font-size * 2);
|
||||
line-height: 1;
|
||||
z-index: 2;
|
||||
color: #ddd;
|
||||
text-indent: 0;
|
||||
font-weight: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
// Text label
|
||||
span {
|
||||
font-size: @font-size-h6;
|
||||
color: #bbb;
|
||||
text-align: center;
|
||||
margin-top: 140px;
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
text-shadow: 0 1px 1px #fff;
|
||||
|
||||
> span {
|
||||
margin-top: 2px;
|
||||
display: block;
|
||||
color: #ccc;
|
||||
font-size: @font-size-h6;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive styles
|
||||
@media (min-width: @screen-sm) {
|
||||
&:before {
|
||||
font-size: (@icon-font-size * 5);
|
||||
top: (@icon-font-size * 3);
|
||||
width: (@icon-font-size * 5);
|
||||
height: (@icon-font-size * 5);
|
||||
margin-left: -(@icon-font-size * 2);
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: @font-size-h4;
|
||||
margin-top: 130px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// On files drag
|
||||
&.dz-drag-hover .dz-message {
|
||||
.opacity(0.15);
|
||||
}
|
||||
&.dz-started .dz-message {
|
||||
display: block;
|
||||
.opacity(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Preview
|
||||
// ------------------------------
|
||||
|
||||
.dropzone,
|
||||
.dropzone-previews {
|
||||
.dz-preview {
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: 10px;
|
||||
vertical-align: top;
|
||||
border: 1px solid @panel-default-border;
|
||||
padding: 8px;
|
||||
border-radius: @border-radius-small;
|
||||
|
||||
// Hide thumbnail in file preview
|
||||
&.dz-file-preview [data-dz-thumbnail] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Details
|
||||
.dz-details {
|
||||
width: 140px;
|
||||
position: relative;
|
||||
background-color: #fafafa;
|
||||
padding: 8px;
|
||||
margin-bottom: 25px;
|
||||
|
||||
.dz-filename {
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
.dz-size {
|
||||
position: absolute;
|
||||
bottom: -26px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.dz-details img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Marks
|
||||
.dz-error-mark,
|
||||
.dz-success-mark {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
right: 8px;
|
||||
|
||||
&:after {
|
||||
font-family: 'icomoon';
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 3px;
|
||||
font-size: @font-size-small;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
span,
|
||||
svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.dz-error-mark {
|
||||
color: @brand-danger;
|
||||
|
||||
&:after {
|
||||
content: '\ed6a';
|
||||
}
|
||||
}
|
||||
.dz-success-mark {
|
||||
color: @brand-success;
|
||||
|
||||
&:after {
|
||||
content: '\ed6e';
|
||||
}
|
||||
}
|
||||
|
||||
// Error and success marks
|
||||
&.dz-error .dz-error-mark,
|
||||
&.dz-success .dz-success-mark {
|
||||
display: block;
|
||||
.opacity(1);
|
||||
}
|
||||
|
||||
// Uploading progress
|
||||
.dz-progress {
|
||||
position: absolute;
|
||||
top: 118px;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
height: 4px;
|
||||
background-color: @gray-lighter;
|
||||
display: none;
|
||||
border-radius: @border-radius-small;
|
||||
|
||||
.dz-upload {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
background-color: @brand-info;
|
||||
.transition(width 0.3s ease-in-out);
|
||||
}
|
||||
}
|
||||
&.dz-processing .dz-progress {
|
||||
display: block;
|
||||
}
|
||||
&.dz-success {
|
||||
.dz-progress {
|
||||
display: block;
|
||||
.opacity(0);
|
||||
.transition(opacity 0.4s ease-in-out);
|
||||
}
|
||||
}
|
||||
|
||||
// Error message
|
||||
.dz-error-message {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: fade(#f5f5f5, 80%);
|
||||
margin: 8px;
|
||||
padding: 8px;
|
||||
color: @brand-danger;
|
||||
max-width: 100%;
|
||||
z-index: 5;
|
||||
.opacity(0);
|
||||
.transition(opacity 0.3s ease-in-out);
|
||||
}
|
||||
&.dz-error {
|
||||
&:hover .dz-error-message {
|
||||
display: block;
|
||||
.opacity(1);
|
||||
}
|
||||
|
||||
.dz-progress .dz-upload {
|
||||
background: @brand-danger;
|
||||
}
|
||||
}
|
||||
|
||||
// Image preview
|
||||
&.dz-image-preview:hover {
|
||||
.dz-details img {
|
||||
display: block;
|
||||
.opacity(0.1);
|
||||
}
|
||||
}
|
||||
|
||||
// Remove button
|
||||
a.dz-remove {
|
||||
background-color: #fafafa;
|
||||
border-radius: @border-radius-small;
|
||||
border: 1px solid @gray-lighter;
|
||||
display: block;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
color: @text-muted;
|
||||
margin-top: 35px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: @text-color;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,583 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Bootstrap file input
|
||||
*
|
||||
* File input styling for Bootstrap 3.0
|
||||
*
|
||||
* Version: 1.3
|
||||
* Latest update: Aug 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Core styles
|
||||
// ------------------------------
|
||||
|
||||
// Base
|
||||
.file-input {
|
||||
|
||||
// Remove red border and shadow from input with error
|
||||
&.has-error {
|
||||
.form-control {
|
||||
border-color: @input-border;
|
||||
outline: 0;
|
||||
.box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
// Add horizontal spacing to icons on desktops
|
||||
@media (min-width: @screen-sm-min) {
|
||||
.btn > [class*=icon-],
|
||||
.btn > .glyphicon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// File object
|
||||
.file-object {
|
||||
margin: 0 0 -(@list-spacing) 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// File input styling
|
||||
// ------------------------------
|
||||
|
||||
// Browse button
|
||||
.btn-file {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
// Hide original input
|
||||
input[type=file] {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
text-align: right;
|
||||
opacity: 0;
|
||||
background: none repeat scroll 0 0 transparent;
|
||||
cursor: inherit;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Caption name
|
||||
.file-caption-name {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
|
||||
// Add spacing between icon and text
|
||||
[class*=icon-],
|
||||
.glyphicon {
|
||||
margin-right: @element-horizontal-spacing;
|
||||
}
|
||||
|
||||
// Display empty caption text as a placeholder
|
||||
.file-input-new & {
|
||||
color: @text-muted;
|
||||
|
||||
// And hide icon
|
||||
> [class*=icon-],
|
||||
> .glyphicon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Error message
|
||||
.file-error-message {
|
||||
position: relative;
|
||||
background-color: #f2dede;
|
||||
color: #a94442;
|
||||
text-align: center;
|
||||
border-radius: @border-radius-base;
|
||||
padding: 10px;
|
||||
margin: 0 5px 5px 5px;
|
||||
|
||||
// Top spacing correction if inside drop zone
|
||||
.file-drop-zone & {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
// Close button
|
||||
.close {
|
||||
margin-top: 1px;
|
||||
color: #a94442;
|
||||
}
|
||||
|
||||
// List of errors
|
||||
pre,
|
||||
ul {
|
||||
margin: @list-spacing 0;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled caption
|
||||
.file-caption-disabled {
|
||||
background-color: @input-bg-disabled;
|
||||
cursor: @cursor-disabled;
|
||||
|
||||
// Change text color
|
||||
.file-caption-name {
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Preview
|
||||
//
|
||||
|
||||
// Preview modal
|
||||
.file-preview-detail-modal {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
// File preview container
|
||||
.file-preview {
|
||||
border-radius: @border-radius-small;
|
||||
border: 1px solid @panel-default-border;
|
||||
width: 100%;
|
||||
margin-bottom: @line-height-computed;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
// Close button
|
||||
> .close {
|
||||
font-weight: 400;
|
||||
font-size: @font-size-h5;
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
padding: 8px;
|
||||
line-height: 0.6;
|
||||
border-radius: @border-radius-base;
|
||||
color: @color-grey-700;
|
||||
.opacity(1);
|
||||
}
|
||||
}
|
||||
|
||||
// Thumbnail frame
|
||||
.file-preview-frame {
|
||||
margin: @padding-base-vertical;
|
||||
margin-right: 0;
|
||||
display: table;
|
||||
border: 1px solid @panel-inner-border;
|
||||
float: left;
|
||||
vertical-align: middle;
|
||||
|
||||
// Inside drop zone
|
||||
.file-drop-zone & {
|
||||
border: 1px solid @panel-inner-border;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
}
|
||||
|
||||
// Thumbnail image
|
||||
.file-preview-image {
|
||||
height: 160px;
|
||||
vertical-align: middle;
|
||||
image-orientation: from-image;
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
// Prevent image overflow
|
||||
@media (max-width: @screen-xs-max) {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Preview text
|
||||
.file-preview-text {
|
||||
text-align: left;
|
||||
width: 160px;
|
||||
margin-bottom: 2px;
|
||||
color: #428bca;
|
||||
background-color: #fff;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
// Other files preview
|
||||
.file-preview-other {
|
||||
display: table-cell;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
|
||||
// Override for preview icon, use Icomoon instead
|
||||
&:after {
|
||||
content: "\ea0c";
|
||||
font-family: "icomoon";
|
||||
display: block;
|
||||
font-size: @icon-font-size * 4;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
// Hide glyphicon icon
|
||||
.glyphicon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Status
|
||||
.file-preview-status {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
color: @text-color;
|
||||
background-color: fade(#fafafa, 80%);
|
||||
border-top: 1px solid @panel-default-border;
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
font-size: @font-size-small;
|
||||
line-height: @line-height-small;
|
||||
color: @text-color!important;
|
||||
|
||||
// Collapse if empty
|
||||
&:empty {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Loading indicator
|
||||
//
|
||||
|
||||
// Give it minimum height
|
||||
.file-thumb-loading {
|
||||
min-height: (@icon-font-size * 2) + (@content-padding-large * 2) + ((@padding-base-vertical * 2) + @line-height-computed + 1);
|
||||
}
|
||||
|
||||
// Loading icon
|
||||
.file-thumb-loading,
|
||||
.file-uploading {
|
||||
|
||||
// Background
|
||||
&:before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
background-color: @color-slate-900;
|
||||
width: (@icon-font-size * 2);
|
||||
height: (@icon-font-size * 2);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -(((@icon-font-size * 2) + ((@padding-base-vertical * 2) + @line-height-computed + 1)) / 2) 0 0 -(@icon-font-size);
|
||||
border-radius: @border-radius-base;
|
||||
.box-shadow(0 1px 5px fade(#fff, 50%));
|
||||
}
|
||||
|
||||
// Icon itself
|
||||
&:after {
|
||||
content: "\eb55";
|
||||
font-family: "icomoon";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -((@icon-font-size + ((@padding-base-vertical * 2) + @line-height-computed + 1)) / 2) 0 0 -(@icon-font-size / 2);
|
||||
font-size: @icon-font-size;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
.animation(rotation 1s linear infinite);
|
||||
}
|
||||
}
|
||||
|
||||
// Indicator
|
||||
.file-upload-indicator {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
padding-top: (@padding-xs-vertical + 1);
|
||||
padding-bottom: (@padding-xs-vertical + 1);
|
||||
cursor: default;
|
||||
text-align: left;
|
||||
padding-left: (@padding-base-vertical + 1);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Default elements visibility
|
||||
//
|
||||
|
||||
// Standard upload
|
||||
.file-input-new {
|
||||
.file-preview,
|
||||
.close,
|
||||
.glyphicon-file,
|
||||
.fileinput-remove-button,
|
||||
.fileinput-upload-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Ajax upload
|
||||
.file-input-ajax-new {
|
||||
.fileinput-remove-button,
|
||||
.fileinput-upload-button,
|
||||
.fileinput-remove,
|
||||
.file-caption-name > [class*=icon-],
|
||||
.file-caption-name > .glyphicon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// AJAX upload styling
|
||||
// ------------------------------
|
||||
|
||||
// File actions
|
||||
.file-actions {
|
||||
margin-top: 5px;
|
||||
border-top: 1px solid @gray-lighter;
|
||||
|
||||
// Remove horizontal spacing from icons
|
||||
.btn > [class*=icon-],
|
||||
.btn > .glyphicon {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons position
|
||||
.file-footer-buttons {
|
||||
float: right;
|
||||
}
|
||||
|
||||
// Caption
|
||||
.file-footer-caption {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
font-size: @font-size-mini;
|
||||
padding: 12px 7px 7px 7px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
// Preview error
|
||||
.file-preview-error {
|
||||
.opacity(0.65);
|
||||
.box-shadow(none);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Dropzone
|
||||
//
|
||||
|
||||
// Base
|
||||
.file-drop-zone {
|
||||
border: 1px dashed @panel-default-border;
|
||||
border-radius: @border-radius-base;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
margin: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
// Text title
|
||||
.file-drop-zone-title {
|
||||
color: @text-muted;
|
||||
font-size: @font-size-h3;
|
||||
font-weight: 300;
|
||||
padding: 85px 10px;
|
||||
}
|
||||
|
||||
// Highlight file
|
||||
.file-highlighted {
|
||||
border-color: #ccc;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
// Progress bar
|
||||
.kv-upload-progress {
|
||||
margin-bottom: @line-height-computed;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Progress
|
||||
//
|
||||
|
||||
// Thumbnail progress
|
||||
.file-thumb-progress {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
// Progress bars
|
||||
.progress,
|
||||
.progress-bar {
|
||||
height: 5px;
|
||||
border-radius: 0;
|
||||
font-size: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Thumb footer
|
||||
.file-thumbnail-footer {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// IE 10 fix
|
||||
.btn-file ::-ms-browse {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Fullscreen modal
|
||||
//
|
||||
|
||||
.file-zoom-fullscreen {
|
||||
&.modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
position: fixed;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
border-radius: 0;
|
||||
.box-shadow(none);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Zoom
|
||||
//
|
||||
|
||||
// Dialog
|
||||
.file-zoom-dialog {
|
||||
|
||||
// Navigate buttons
|
||||
.btn-navigate {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -((floor(@font-size-h6 * @line-height-base) + @content-padding-large) - @icon-font-size);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
color: #fff;
|
||||
.opacity(0.7);
|
||||
|
||||
// Icons
|
||||
> i {
|
||||
display: block;
|
||||
font-size: (@icon-font-size * 2);
|
||||
}
|
||||
|
||||
// Hover state
|
||||
&:not([disabled]):hover,
|
||||
&:not([disabled]):focus {
|
||||
outline: none;
|
||||
.box-shadow(none);
|
||||
.opacity(0.5);
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&[disabled] {
|
||||
.opacity(0.3);
|
||||
}
|
||||
}
|
||||
|
||||
// Left button
|
||||
.btn-prev {
|
||||
left: -((@icon-font-size * 2) + 10);
|
||||
}
|
||||
|
||||
// Right button
|
||||
.btn-next {
|
||||
right: -((@icon-font-size * 2) + 10);
|
||||
}
|
||||
|
||||
// Floating buttons
|
||||
.floating-buttons {
|
||||
position: absolute;
|
||||
top: @content-padding-large;
|
||||
right: @content-padding-large;
|
||||
background-color: @modal-content-bg;
|
||||
border-radius: 0 0 0 @border-radius-base;
|
||||
|
||||
// Add padding
|
||||
&:not(:empty) {
|
||||
padding: 0 0 @content-padding-large @content-padding-large;
|
||||
}
|
||||
|
||||
// Add z-index to buttons
|
||||
&,
|
||||
.btn {
|
||||
z-index: 3000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Actions
|
||||
.kv-zoom-actions {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 20px;
|
||||
margin-top: -(@content-padding-large - (((@padding-xs-vertical * 2) + @icon-font-size + 2)) / 2);
|
||||
}
|
||||
|
||||
// Content
|
||||
.file-zoom-content {
|
||||
height: 480px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Drag
|
||||
//
|
||||
|
||||
.file-drag-handle {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
padding-top: (@padding-xs-vertical + 1);
|
||||
padding-bottom: (@padding-xs-vertical + 1);
|
||||
cursor: move;
|
||||
cursor: -webkit-grabbing;
|
||||
|
||||
&:hover {
|
||||
.opacity(0.7);
|
||||
}
|
||||
|
||||
> i {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,400 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Plupload multiple file uploader
|
||||
*
|
||||
* Multi runtime single and multiple file uploader
|
||||
*
|
||||
* Version: 1.1
|
||||
* Latest update: Mar 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Layout
|
||||
// ------------------------------
|
||||
|
||||
// Wrapper
|
||||
.plupload_wrapper {
|
||||
width: 100%;
|
||||
border: 2px dashed @panel-default-border;
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
.panel > div > & {
|
||||
border: 0;
|
||||
}
|
||||
.panel.panel-flat > div > & {
|
||||
border-top: 1px solid @panel-default-border;
|
||||
}
|
||||
}
|
||||
|
||||
// Common icon styles
|
||||
.plupload_header:after,
|
||||
.plupload_filelist:empty:before,
|
||||
.plupload_filelist li.plupload_droptext:before,
|
||||
.plupload_file_action:after,
|
||||
.plupload_delete a:after,
|
||||
.plupload_failed a:after,
|
||||
.plupload_done a:after {
|
||||
font-family: 'icomoon';
|
||||
display: inline-block;
|
||||
font-size: @icon-font-size;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
// Header (hidden by default)
|
||||
.plupload_header {
|
||||
display: none;
|
||||
position: relative;
|
||||
background-color: @color-info-700;
|
||||
margin: -1px -1px 0 -1px;
|
||||
.border-top-radius(@border-radius-base);
|
||||
|
||||
&:after {
|
||||
content: '\ec78';
|
||||
color: #fff;
|
||||
font-size: (@icon-font-size * 2);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: @content-padding-large;
|
||||
margin-top: -(@icon-font-size);
|
||||
}
|
||||
}
|
||||
.plupload_header_content {
|
||||
padding: @content-padding-base @content-padding-large;
|
||||
padding-left: ((@content-padding-large * 2 ) + (@icon-font-size * 2));
|
||||
color: #fff;
|
||||
}
|
||||
.plupload_header_title {
|
||||
font-size: @font-size-h6;
|
||||
font-weight: 500;
|
||||
}
|
||||
.plupload_header_text {
|
||||
font-size: @font-size-mini;
|
||||
line-height: @line-height-mini;
|
||||
}
|
||||
|
||||
// Helpers
|
||||
.plupload_clear,
|
||||
.plupload_clearer {
|
||||
clear: both;
|
||||
}
|
||||
.plupload_clearer,
|
||||
.plupload_progress_bar {
|
||||
display: block;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
|
||||
// Buttons
|
||||
// ------------------------------
|
||||
|
||||
// Action buttons
|
||||
.plupload_button {
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
background-color: @brand-primary;
|
||||
border: 1px solid transparent;
|
||||
padding: @padding-small-vertical @padding-small-horizontal;
|
||||
border-radius: @border-radius-small;
|
||||
margin-right: 5px;
|
||||
|
||||
// Hover state
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #fff;
|
||||
.box-shadow(0 0 0 100px fade(#000, 5%) inset);
|
||||
}
|
||||
|
||||
// Active state
|
||||
&:active {
|
||||
.box-shadow(0 0 0 100px fade(#000, 10%) inset);
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled button
|
||||
a.plupload_disabled {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @text-muted;
|
||||
box-shadow: none;
|
||||
border-color: #ddd;
|
||||
background: #fcfcfc;
|
||||
cursor: default;
|
||||
.box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
// Start upload button
|
||||
.plupload_start {
|
||||
background-color: @color-teal-400;
|
||||
}
|
||||
|
||||
|
||||
// File list
|
||||
// ------------------------------
|
||||
|
||||
// Itself
|
||||
.plupload_filelist {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
// Scrollable area
|
||||
.plupload_scroll & {
|
||||
height: 250px;
|
||||
background: #fff;
|
||||
overflow-y: auto;
|
||||
|
||||
@media (max-width: @screen-xs-max) {
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
// List item
|
||||
li {
|
||||
padding: 12px @content-padding-large;
|
||||
background-color: #fff;
|
||||
|
||||
&:hover {
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
}
|
||||
|
||||
&.plupload_droptext:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Add background icon with text
|
||||
&:empty,
|
||||
li.plupload_droptext {
|
||||
position: relative;
|
||||
height: 250px;
|
||||
text-align: center;
|
||||
background-color: transparent;
|
||||
text-indent: -99999px;
|
||||
|
||||
// Icon
|
||||
&:before {
|
||||
content: '\ea0e';
|
||||
font-size: (@icon-font-size * 5);
|
||||
padding-top: 65px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: (@icon-font-size * 5);
|
||||
height: (@icon-font-size * 5);
|
||||
left: 50%;
|
||||
margin-left: -(@icon-font-size * 2.5);
|
||||
z-index: 2;
|
||||
color: #ddd;
|
||||
text-indent: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
// Text label
|
||||
&:after {
|
||||
content: 'Drag files to upload';
|
||||
font-size: @font-size-h4;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
padding-top: 145px;
|
||||
left: 50%;
|
||||
margin: -100px 0 0 -150px;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
color: #bbb;
|
||||
text-indent: 0;
|
||||
}
|
||||
|
||||
@media (max-width: @screen-xs-max) {
|
||||
height: 200px;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&:before {
|
||||
font-size: (@icon-font-size * 4);
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
font-size: @font-size-h5;
|
||||
border-width: 3px 0;
|
||||
padding-top: 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:empty:after {
|
||||
content: 'Add files to upload';
|
||||
}
|
||||
}
|
||||
|
||||
// Header
|
||||
.plupload_filelist_header {
|
||||
padding: @content-padding-base @content-padding-large;
|
||||
|
||||
.plupload_file_name,
|
||||
.plupload_file_size,
|
||||
.plupload_file_status,
|
||||
.plupload_file_action {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
// Footer
|
||||
.plupload_filelist_footer {
|
||||
padding: @content-padding-base @content-padding-large;
|
||||
|
||||
.plupload_file_size,
|
||||
.plupload_file_status,
|
||||
.plupload_upload_status {
|
||||
padding: @padding-base-vertical 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@media (max-width: @screen-xs-max) {
|
||||
.plupload_file_action,
|
||||
.plupload_file_status,
|
||||
.plupload_file_size,
|
||||
.plupload_progress {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Indicators
|
||||
// ------------------------------
|
||||
|
||||
// File action indicator
|
||||
.plupload_file_action {
|
||||
position: relative;
|
||||
float: right;
|
||||
margin-left: 30px;
|
||||
margin-top: 2px;
|
||||
color: @gray-light;
|
||||
width: @icon-font-size;
|
||||
height: @icon-font-size;
|
||||
|
||||
* {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Add icon to the header and footer
|
||||
&:after {
|
||||
content: '\ec67';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
// Extra margin at the bottom because of the buttons
|
||||
.plupload_filelist_footer & {
|
||||
margin-top: 9px;
|
||||
}
|
||||
|
||||
// Remove icons in the file list
|
||||
.plupload_filelist &:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
// Delete button
|
||||
.plupload_delete & {
|
||||
> a {
|
||||
color: @text-color;
|
||||
line-height: 1;
|
||||
.opacity(0.5);
|
||||
|
||||
&:hover {
|
||||
.opacity(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Uploading indicator
|
||||
.plupload_uploading {
|
||||
background-color: @color-success-50;
|
||||
}
|
||||
|
||||
// Delete button
|
||||
.plupload_delete a:after {
|
||||
content: '\ed6b';
|
||||
}
|
||||
|
||||
// Failed indicator
|
||||
.plupload_failed a {
|
||||
color: @brand-danger;
|
||||
cursor: default;
|
||||
|
||||
&:after {
|
||||
content: '\e9cf';
|
||||
}
|
||||
}
|
||||
|
||||
// Done indicator
|
||||
.plupload_done {
|
||||
color: @gray-light;
|
||||
|
||||
a {
|
||||
color: @color-teal-300;
|
||||
cursor: default;
|
||||
|
||||
&:after {
|
||||
content: '\e9db';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Progress indicators
|
||||
.plupload_progress,
|
||||
.plupload_upload_status {
|
||||
display: none;
|
||||
}
|
||||
.plupload_progress_container {
|
||||
margin-top: 14px;
|
||||
background-color: @gray-lighter;
|
||||
}
|
||||
.plupload_progress_bar {
|
||||
width: 0px;
|
||||
height: 4px;
|
||||
background: @color-teal-300;
|
||||
border-radius: @border-radius-large;
|
||||
}
|
||||
|
||||
|
||||
// Responsive styles
|
||||
// ------------------------------
|
||||
|
||||
@media (min-width: @screen-sm) {
|
||||
.plupload_file_name {
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
|
||||
.plupload_filelist & {
|
||||
width: 205px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.plupload_file_size,
|
||||
.plupload_file_status,
|
||||
.plupload_progress {
|
||||
float: right;
|
||||
width: 80px;
|
||||
}
|
||||
.plupload_file_size,
|
||||
.plupload_file_status,
|
||||
.plupload_file_action {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user