Move select and custom checkboxes/radios to Storm UI
This commit is contained in:
Samuel Georges
parent
52e7376b24
commit
85c47bea7a
|
|
@ -12,14 +12,12 @@
|
|||
=require vendor/jquery.autoellipsis.js
|
||||
=require vendor/jquery.waterfall.js
|
||||
=require vendor/jquery.cookie.js
|
||||
=require ../vendor/select2/select2.js
|
||||
=require ../vendor/dropzone/dropzone.js
|
||||
=require ../vendor/sweet-alert/sweet-alert.js
|
||||
=require ../vendor/jcrop/js/jquery.Jcrop.js
|
||||
|
||||
=require ../../../system/assets/ui/storm.js
|
||||
|
||||
=require october.controls.js
|
||||
=require october.scrollpad.js
|
||||
=require october.verticalmenu.js
|
||||
=require october.navbar.js
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@
|
|||
|
||||
// Vendor
|
||||
@import "../vendor/sweet-alert/sweet-alert.less";
|
||||
@import "../vendor/select2/select2.css";
|
||||
@import "../vendor/jcrop/css/jquery.Jcrop.min.css";
|
||||
|
||||
//
|
||||
|
|
|
|||
|
|
@ -0,0 +1,44 @@
|
|||
# Checkbox
|
||||
|
||||
Allows a user to select from a small set of binary options.
|
||||
|
||||
# Example
|
||||
|
||||
<h5>Checkbox</h5>
|
||||
<div class="checkbox custom-checkbox">
|
||||
<input name="checkbox" value="1" type="checkbox" id="checkbox1">
|
||||
<label for="checkbox1">Checkbox</label>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<hr />
|
||||
|
||||
|
||||
|
||||
<h5>Radio</h5>
|
||||
<div class="radio custom-radio">
|
||||
<input name="radio" value="1" type="radio" id="radio_1">
|
||||
<label for="radio_1">Paris</label>
|
||||
</div>
|
||||
<div class="radio custom-radio">
|
||||
<input checked="checked" name="radio" value="2" type="radio" id="radio_2">
|
||||
<label for="radio_2">Dubai</label>
|
||||
</div>
|
||||
<div class="radio custom-radio">
|
||||
<input name="radio" value="3" type="radio" id="radio_3">
|
||||
<label for="radio_3">New Zealand</label>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<hr />
|
||||
|
||||
|
||||
|
||||
<h5>Slider</h5>
|
||||
<label class="custom-switch">
|
||||
<input type="checkbox" />
|
||||
<span><span>On</span><span>Off</span></span>
|
||||
<a class="slide-button"></a>
|
||||
</label>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
# Select
|
||||
|
||||
Custom select control.
|
||||
|
||||
# Example
|
||||
|
||||
<select class="form-control custom-select">
|
||||
<option selected="selected" value="2">Approved</option>
|
||||
<option value="3">Deleted</option>
|
||||
<option value="1">New</option>
|
||||
</select>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
/*
|
||||
* Checkbox control
|
||||
*
|
||||
*/
|
||||
|
||||
(function($){
|
||||
|
||||
$(document).on('keydown', 'div.custom-checkbox', function(e){
|
||||
if (e.keyCode == 32)
|
||||
e.preventDefault()
|
||||
})
|
||||
|
||||
$(document).on('keyup', 'div.custom-checkbox', function(e){
|
||||
if (e.keyCode == 32) {
|
||||
var $cb = $('input', this)
|
||||
|
||||
if ($cb.data('oc-space-timestamp') == e.timeStamp)
|
||||
return
|
||||
|
||||
$cb.get(0).checked = !$cb.get(0).checked
|
||||
$cb.data('oc-space-timestamp', e.timeStamp)
|
||||
$cb.trigger('change')
|
||||
return false
|
||||
}
|
||||
})
|
||||
|
||||
})(jQuery);
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
/*
|
||||
=require foundation.js
|
||||
=require checkbox.js
|
||||
=require select.js
|
||||
*/
|
||||
/*
|
||||
* Form control
|
||||
*
|
||||
*/
|
||||
|
|
@ -1,26 +1,14 @@
|
|||
/*
|
||||
* Custom controls that could exist separately of the form widget
|
||||
=require ../vendor/modernizr/modernizr.js
|
||||
=require ../vendor/select2/select2.js
|
||||
*/
|
||||
|
||||
/*
|
||||
* Select control
|
||||
*
|
||||
*/
|
||||
|
||||
(function($){
|
||||
$(document).on('keydown', 'div.custom-checkbox', function(e){
|
||||
if (e.keyCode == 32)
|
||||
e.preventDefault()
|
||||
})
|
||||
|
||||
$(document).on('keyup', 'div.custom-checkbox', function(e){
|
||||
if (e.keyCode == 32) {
|
||||
var $cb = $('input', this)
|
||||
|
||||
if ($cb.data('oc-space-timestamp') == e.timeStamp)
|
||||
return
|
||||
|
||||
$cb.get(0).checked = !$cb.get(0).checked
|
||||
$cb.data('oc-space-timestamp', e.timeStamp)
|
||||
$cb.trigger('change')
|
||||
return false
|
||||
}
|
||||
})
|
||||
|
||||
/*
|
||||
* Custom drop downs (Desktop only)
|
||||
|
|
@ -48,10 +36,11 @@
|
|||
|
||||
$('select.custom-select:not([data-no-auto-update-on-render=true])').select2({
|
||||
// The data-no-auto-update-on-render attribute allows to disable the
|
||||
// selec2 automatic initialization for edge cases.
|
||||
// select2 automatic initialization for edge cases.
|
||||
|
||||
formatResult: formatSelectOption,
|
||||
formatSelection: formatSelectOption,
|
||||
// minimumResultsForSearch: Infinity,
|
||||
escapeMarkup: function(m) { return m; }
|
||||
})
|
||||
})
|
||||
|
|
@ -0,0 +1,218 @@
|
|||
//
|
||||
// Dependencies
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "global.less";
|
||||
@import "icon.less";
|
||||
|
||||
//
|
||||
// Checkbox
|
||||
// --------------------------------------------------
|
||||
|
||||
@color-checkbox-icon: #666666;
|
||||
@color-checkbox-border: #999999;
|
||||
|
||||
@color-checkbox-switch-bg: #f6f6f6;
|
||||
@color-checkbox-switch-on: #8da85e;
|
||||
@color-checkbox-switch-off: #cc3300;
|
||||
|
||||
|
||||
//
|
||||
// Checkbox
|
||||
// --------------------------------------------------
|
||||
|
||||
.custom-checkbox.nolabel label,
|
||||
.custom-radio.nolabel label {
|
||||
.text-hide();
|
||||
}
|
||||
|
||||
//
|
||||
// Nice Checkboxes & Radios
|
||||
//
|
||||
|
||||
.custom-checkbox,
|
||||
.custom-radio {
|
||||
padding-left: 23px;
|
||||
margin-top: 0;
|
||||
|
||||
input[type=radio],
|
||||
input[type=checkbox] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
margin-right: 15px;
|
||||
margin-left: -20px;
|
||||
|
||||
font-size: 12px;
|
||||
&:before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
margin-right: 10px;
|
||||
position: absolute;
|
||||
left: -3px;
|
||||
bottom: 1px;
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid @color-checkbox-border;
|
||||
color: @color-checkbox-icon;
|
||||
|
||||
}
|
||||
&:hover:before {
|
||||
border-color: darken(@color-checkbox-border, 10%);
|
||||
color: darken(@color-checkbox-icon, 10%);
|
||||
}
|
||||
&:active:before {
|
||||
border-color: darken(@color-checkbox-border, 20%);
|
||||
color: darken(@color-checkbox-icon, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
input[type=radio]:checked + label:before {
|
||||
.icon(@circle);
|
||||
font-size: 9px;
|
||||
line-height: 12px;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked + label:before {
|
||||
.icon(@check);
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
label:before {
|
||||
border-color: @color-focus;
|
||||
}
|
||||
}
|
||||
|
||||
p.help-block {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-radio label:before {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.custom-checkbox label:before {
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
//
|
||||
// ON / OFF Switcher
|
||||
//
|
||||
|
||||
.switch-field {
|
||||
.field-switch {
|
||||
padding-left: 75px;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-switch {
|
||||
display: block;
|
||||
width: 58px;
|
||||
height: 26px;
|
||||
position: relative;
|
||||
text-transform: uppercase;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
.border-radius(3px);
|
||||
|
||||
* { .box-sizing(border-box); }
|
||||
&.disabled { .opacity(.5); }
|
||||
.slide-button {
|
||||
z-index: 4;
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 34px;
|
||||
top: 2px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-color: @color-checkbox-switch-bg;
|
||||
.border-radius(20px);
|
||||
.transition(all 0.1s);
|
||||
}
|
||||
|
||||
label,
|
||||
> span {
|
||||
line-height: 23px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
label {
|
||||
z-index: 3;
|
||||
width: 100%;
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
input {
|
||||
z-index: 5;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
.opacity(0);
|
||||
&:checked {
|
||||
~ .slide-button {
|
||||
right: 2px;
|
||||
}
|
||||
~ span { background-color: @color-checkbox-switch-on; }
|
||||
~ span span {
|
||||
&:first-of-type {
|
||||
color: #FFFFFF;
|
||||
display: block;
|
||||
}
|
||||
&:last-of-type {
|
||||
color: #666666;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: @color-checkbox-switch-off;
|
||||
font-size: 11px;
|
||||
.user-select(none);
|
||||
.border-radius(20px);
|
||||
|
||||
span {
|
||||
z-index: 5;
|
||||
display: block;
|
||||
width: 50%;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 0;
|
||||
.box-sizing(border-box);
|
||||
&:last-child {
|
||||
left: 50%;
|
||||
color: #FFFFFF;
|
||||
display: block;
|
||||
}
|
||||
&:first-of-type {
|
||||
padding-left: 9px;
|
||||
display: none;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -7,6 +7,7 @@
|
|||
@import "site.variables.less";
|
||||
@import "site.mixins.less";
|
||||
|
||||
|
||||
//
|
||||
// Forms
|
||||
// --------------------------------------------------
|
||||
|
|
@ -16,6 +17,10 @@
|
|||
@import "form.base.less";
|
||||
@import "form.groups.less";
|
||||
|
||||
// Load order
|
||||
@import "select.less";
|
||||
@import "checkbox.less";
|
||||
|
||||
//
|
||||
// Resets to bootstrap
|
||||
//
|
||||
|
|
@ -70,11 +75,6 @@ label {
|
|||
font-size: 12px;
|
||||
}
|
||||
|
||||
.radio.nolabel label,
|
||||
.checkbox.nolabel label {
|
||||
.text-hide();
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border: 1px solid @color-form-field-border;
|
||||
position: relative;
|
||||
|
|
@ -396,415 +396,6 @@ body.slim-container {
|
|||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Nice Checkboxes & Radios
|
||||
//
|
||||
|
||||
.custom-checkbox,
|
||||
.custom-radio {
|
||||
padding-left: 23px;
|
||||
margin-top: 0;
|
||||
|
||||
input[type=radio],
|
||||
input[type=checkbox] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
margin-right: 15px;
|
||||
margin-left: -20px;
|
||||
|
||||
font-size: 12px;
|
||||
&:before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
margin-right: 10px;
|
||||
position: absolute;
|
||||
left: -3px;
|
||||
bottom: 1px;
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid @color-custom-input-border;
|
||||
color: @color-custom-input-icon;
|
||||
|
||||
}
|
||||
&:hover:before {
|
||||
border-color: darken(@color-custom-input-border, 10%);
|
||||
color: darken(@color-custom-input-icon, 10%);
|
||||
}
|
||||
&:active:before {
|
||||
border-color: darken(@color-custom-input-border, 20%);
|
||||
color: darken(@color-custom-input-icon, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
input[type=radio]:checked + label:before {
|
||||
.icon(@circle);
|
||||
font-size: 9px;
|
||||
line-height: 12px;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked + label:before {
|
||||
.icon(@check);
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
label:before {
|
||||
border-color: @color-focus;
|
||||
}
|
||||
}
|
||||
|
||||
p.help-block {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-radio label:before {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.custom-checkbox label:before {
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
//
|
||||
// ON / OFF Switcher
|
||||
//
|
||||
|
||||
.switch-field {
|
||||
.field-switch {
|
||||
padding-left: 75px;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-switch {
|
||||
display: block;
|
||||
width: 58px;
|
||||
height: 26px;
|
||||
position: relative;
|
||||
text-transform: uppercase;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
.border-radius(3px);
|
||||
|
||||
* { .box-sizing(border-box); }
|
||||
&.disabled { .opacity(.5); }
|
||||
.slide-button {
|
||||
z-index: 4;
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 34px;
|
||||
top: 2px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-color: @color-switch-input-bg;
|
||||
.border-radius(20px);
|
||||
.transition(all 0.1s);
|
||||
}
|
||||
|
||||
label,
|
||||
> span {
|
||||
line-height: 23px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
label {
|
||||
z-index: 3;
|
||||
width: 100%;
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
input {
|
||||
z-index: 5;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
.opacity(0);
|
||||
&:checked {
|
||||
~ .slide-button {
|
||||
right: 2px;
|
||||
}
|
||||
~ span { background-color: @color-switch-input-on; }
|
||||
~ span span {
|
||||
&:first-of-type {
|
||||
color: #FFFFFF;
|
||||
display: block;
|
||||
}
|
||||
&:last-of-type {
|
||||
color: #666666;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: @color-switch-input-off;
|
||||
font-size: 11px;
|
||||
.user-select(none);
|
||||
.border-radius(20px);
|
||||
|
||||
span {
|
||||
z-index: 5;
|
||||
display: block;
|
||||
width: 50%;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 0;
|
||||
.box-sizing(border-box);
|
||||
&:last-child {
|
||||
left: 50%;
|
||||
color: #FFFFFF;
|
||||
display: block;
|
||||
}
|
||||
&:first-of-type {
|
||||
padding-left: 9px;
|
||||
display: none;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Nice Dropdowns
|
||||
//
|
||||
|
||||
.custom-select {
|
||||
|
||||
//
|
||||
// Allows Select2 to work with Bootstrap
|
||||
//
|
||||
|
||||
.select2-choice {
|
||||
border: 0;
|
||||
border-radius: @border-radius-base;
|
||||
.select2-arrow {
|
||||
border-radius: 0 @border-radius-base @border-radius-base 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container {
|
||||
padding: 0px;
|
||||
.select2-choices {
|
||||
border: 0 !important;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
.loading-indicator {
|
||||
background: transparent;
|
||||
|
||||
> span {
|
||||
background-image:url(../images/loader-transparent.svg);
|
||||
left: auto;
|
||||
right: 10px;
|
||||
top: 19px;
|
||||
background-size: 17px 17px;
|
||||
}
|
||||
}
|
||||
|
||||
&.in-progress {
|
||||
.select2-choice .select2-arrow {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container.select2-dropdown-open {
|
||||
border-color: @color-form-field-border-focus;
|
||||
&,.select2-choices {
|
||||
border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
}
|
||||
|
||||
&.select2-drop-above {
|
||||
border-radius: 0 0 @border-radius-base @border-radius-base;
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container-active {
|
||||
border-color: @color-form-field-border-focus;
|
||||
}
|
||||
|
||||
//
|
||||
// Restyle Select2
|
||||
//
|
||||
|
||||
&.select2-container {
|
||||
.select2-choice {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
padding: 0 0 0 15px;
|
||||
border: none;
|
||||
background: #FFFFFF;
|
||||
|
||||
.select2-arrow {
|
||||
width: 38px;
|
||||
background: none;
|
||||
background: transparent;
|
||||
border-left: none;
|
||||
b {
|
||||
background: none !important;
|
||||
text-align: center;
|
||||
color: @color-custom-input-icon;
|
||||
&:before { .icon(@angle-down); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container-disabled {
|
||||
background-color: #f4f4f4;
|
||||
.select2-choice {
|
||||
background-color: #f4f4f4;
|
||||
.select2-arrow b { .opacity(.5); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container.select2-container-active {
|
||||
.select2-choice,
|
||||
.select2-choices {
|
||||
.box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container.select2-dropdown-open,
|
||||
&.select2-container.select2-dropdown-open.select2-drop-above {
|
||||
.select2-choice {
|
||||
background: @color-custom-select-bg;
|
||||
.select2-arrow {
|
||||
border-left-color: transparent;
|
||||
b {
|
||||
&:before { .icon(@angle-up); }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Multi select
|
||||
//
|
||||
|
||||
.select2-container-multi {
|
||||
&.form-control {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.select2-choices {
|
||||
min-height: 28px;
|
||||
line-height: 28px;
|
||||
padding-left: 10px;
|
||||
background: none;
|
||||
|
||||
.select2-search-choice {
|
||||
background: none;
|
||||
padding: 8px 15px;
|
||||
margin: 4px 0 4px 5px;
|
||||
.box-shadow(none);
|
||||
.transition(.25s linear);
|
||||
|
||||
&:hover {
|
||||
padding: 8px 7px 8px 23px;
|
||||
.select2-search-choice-close {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-search-choice-close {
|
||||
.transition(.25s linear);
|
||||
opacity: 0;
|
||||
left: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-drop-multi {
|
||||
.select2-no-results {
|
||||
padding: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Outside Select2 container
|
||||
//
|
||||
|
||||
.select2-drop {
|
||||
.box-shadow(none);
|
||||
border: 1px solid @color-custom-select-border;
|
||||
border-top: none;
|
||||
|
||||
&.select2-drop-above {
|
||||
.box-shadow(none);
|
||||
border: 1px solid @color-custom-select-border;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&.select2-drop-active {
|
||||
.border-bottom-radius(@border-radius-base);
|
||||
}
|
||||
|
||||
&.select2-drop-above.select2-drop-active {
|
||||
border-top: 1px solid @color-custom-select-border;
|
||||
.border-bottom-radius(0);
|
||||
}
|
||||
|
||||
.select2-search {
|
||||
padding: 0;
|
||||
min-height: 36px;
|
||||
input {
|
||||
min-height: 36px;
|
||||
border: none;
|
||||
border-bottom: 1px solid @color-custom-select-border;
|
||||
background: transparent url('../images/bitmap-icons.png') no-repeat 100% -84px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-results {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
.select2-no-results,
|
||||
.select2-searching,
|
||||
.select2-selection-limit {
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.select2-no-results {
|
||||
padding: 7px!important;
|
||||
}
|
||||
|
||||
.select2-highlighted {
|
||||
background: @color-custom-select-bg-hover;
|
||||
}
|
||||
|
||||
> li > div {
|
||||
padding: 5px 7px 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Controls inside toolbar
|
||||
//
|
||||
|
|
|
|||
|
|
@ -39,17 +39,4 @@
|
|||
|
||||
@color-form-field-recordfinder-btn: #333333;
|
||||
|
||||
@color-custom-input-icon: #666666;
|
||||
@color-custom-input-border: #999999;
|
||||
|
||||
@color-form-checkboxlist-border: #e2e2e2;
|
||||
|
||||
// Switch is control?
|
||||
@color-switch-input-bg: #f6f6f6;
|
||||
@color-switch-input-on: #8da85e;
|
||||
@color-switch-input-off: #cc3300;
|
||||
|
||||
// Ditto
|
||||
@color-custom-select-border: #b2b9be;
|
||||
@color-custom-select-bg: #f6f6f6;
|
||||
@color-custom-select-bg-hover: #4da7e8;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,242 @@
|
|||
//
|
||||
// Dependencies
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "global.less";
|
||||
@import "icon.less";
|
||||
@import "loader.less";
|
||||
|
||||
@import "../vendor/select2/select2.less";
|
||||
|
||||
//
|
||||
// Select
|
||||
// --------------------------------------------------
|
||||
|
||||
@color-select-icon: #666666;
|
||||
@color-select-border: #b2b9be;
|
||||
@color-select-border-focus: #808c8d;
|
||||
@color-select-bg: #f6f6f6;
|
||||
@color-select-bg-hover: #4da7e8;
|
||||
|
||||
|
||||
//
|
||||
// Select
|
||||
// --------------------------------------------------
|
||||
|
||||
//
|
||||
// Nice Dropdowns
|
||||
//
|
||||
|
||||
.custom-select {
|
||||
|
||||
//
|
||||
// Allows Select2 to work with Bootstrap
|
||||
//
|
||||
|
||||
.select2-choice {
|
||||
border: 0;
|
||||
border-radius: @border-radius-base;
|
||||
.select2-arrow {
|
||||
border-radius: 0 @border-radius-base @border-radius-base 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container {
|
||||
padding: 0px;
|
||||
.select2-choices {
|
||||
border: 0 !important;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
.loading-indicator {
|
||||
background: transparent;
|
||||
|
||||
> span {
|
||||
background-image: url('@{loader-image-path}/loader-transparent.svg');
|
||||
left: auto;
|
||||
right: 10px;
|
||||
top: 19px;
|
||||
background-size: 17px 17px;
|
||||
}
|
||||
}
|
||||
|
||||
&.in-progress {
|
||||
.select2-choice .select2-arrow {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container.select2-dropdown-open {
|
||||
border-color: @color-select-border-focus;
|
||||
&,.select2-choices {
|
||||
border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
}
|
||||
|
||||
&.select2-drop-above {
|
||||
border-radius: 0 0 @border-radius-base @border-radius-base;
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container-active {
|
||||
border-color: @color-select-border-focus;
|
||||
}
|
||||
|
||||
//
|
||||
// Restyle Select2
|
||||
//
|
||||
|
||||
&.select2-container {
|
||||
.select2-choice {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
padding: 0 0 0 15px;
|
||||
border: none;
|
||||
background: #FFFFFF;
|
||||
|
||||
.select2-arrow {
|
||||
width: 38px;
|
||||
background: none;
|
||||
background: transparent;
|
||||
border-left: none;
|
||||
b {
|
||||
background: none !important;
|
||||
text-align: center;
|
||||
color: @color-select-icon;
|
||||
&:before { .icon(@angle-down); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container-disabled {
|
||||
background-color: #f4f4f4;
|
||||
.select2-choice {
|
||||
background-color: #f4f4f4;
|
||||
.select2-arrow b { .opacity(.5); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container.select2-container-active {
|
||||
.select2-choice,
|
||||
.select2-choices {
|
||||
.box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container.select2-dropdown-open,
|
||||
&.select2-container.select2-dropdown-open.select2-drop-above {
|
||||
.select2-choice {
|
||||
background: @color-select-bg;
|
||||
.select2-arrow {
|
||||
border-left-color: transparent;
|
||||
b {
|
||||
&:before { .icon(@angle-up); }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Multi select
|
||||
//
|
||||
|
||||
.select2-container-multi {
|
||||
&.form-control {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.select2-choices {
|
||||
min-height: 28px;
|
||||
line-height: 28px;
|
||||
padding-left: 10px;
|
||||
background: none;
|
||||
|
||||
.select2-search-choice {
|
||||
background: none;
|
||||
padding: 8px 15px;
|
||||
margin: 4px 0 4px 5px;
|
||||
.box-shadow(none);
|
||||
.transition(.25s linear);
|
||||
|
||||
&:hover {
|
||||
padding: 8px 7px 8px 23px;
|
||||
.select2-search-choice-close {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-search-choice-close {
|
||||
.transition(.25s linear);
|
||||
opacity: 0;
|
||||
left: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-drop-multi {
|
||||
.select2-no-results {
|
||||
padding: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Outside Select2 container
|
||||
//
|
||||
|
||||
.select2-drop {
|
||||
.box-shadow(none);
|
||||
border: 1px solid @color-select-border;
|
||||
border-top: none;
|
||||
|
||||
&.select2-drop-above {
|
||||
.box-shadow(none);
|
||||
border: 1px solid @color-select-border;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&.select2-drop-active {
|
||||
.border-bottom-radius(@border-radius-base);
|
||||
}
|
||||
|
||||
&.select2-drop-above.select2-drop-active {
|
||||
border-top: 1px solid @color-select-border;
|
||||
.border-bottom-radius(0);
|
||||
}
|
||||
|
||||
.select2-search {
|
||||
padding: 0;
|
||||
min-height: 36px;
|
||||
input {
|
||||
min-height: 36px;
|
||||
border: none;
|
||||
border-bottom: 1px solid @color-select-border;
|
||||
background: transparent url('../images/bitmap-icons.png') no-repeat 100% -84px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-results {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
.select2-no-results,
|
||||
.select2-searching,
|
||||
.select2-selection-limit {
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.select2-no-results {
|
||||
padding: 7px!important;
|
||||
}
|
||||
|
||||
.select2-highlighted {
|
||||
background: @color-select-bg-hover;
|
||||
}
|
||||
|
||||
> li > div {
|
||||
padding: 5px 7px 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -7,11 +7,13 @@
|
|||
=require js/foundation.js
|
||||
=require js/flashmessage.js
|
||||
=require js/inspector.js
|
||||
=require js/checkbox.js
|
||||
=require js/dropdown.js
|
||||
=require js/callout.js
|
||||
=require js/tooltip.js
|
||||
=require js/toolbar.js
|
||||
=require js/filter.js
|
||||
=require js/select.js
|
||||
=require js/loader.js
|
||||
=require js/popover.js
|
||||
=require js/popup.js
|
||||
|
|
|
|||
|
|
@ -26,4 +26,6 @@
|
|||
@import "less/loader.less";
|
||||
@import "less/popover.less";
|
||||
@import "less/popup.less";
|
||||
@import "less/tab.less";
|
||||
@import "less/tab.less";
|
||||
@import "less/checkbox.less";
|
||||
@import "less/select.less";
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 613 B After Width: | Height: | Size: 613 B |
|
Before Width: | Height: | Size: 845 B After Width: | Height: | Size: 845 B |
Loading…
Reference in New Issue