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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user