mirror of
https://github.com/rstudio/shiny.git
synced 2026-01-10 23:48:01 -05:00
Compare commits
7 Commits
fix-routin
...
updateSele
| Author | SHA1 | Date | |
|---|---|---|---|
|
c55d3e6116 | ||
|
|
0c89d00467 | ||
|
|
9d9e3aa845 | ||
|
|
eed166b188 | ||
|
|
8f6141a133 | ||
|
|
72e4361ebe | ||
|
|
1095dae9fb |
@@ -243,19 +243,15 @@ selectizeDependency <- function() {
|
||||
}
|
||||
|
||||
selectizeDependencyFunc <- function(theme) {
|
||||
selectizeVersion <- "0.12.4"
|
||||
selectizeVersion <- "0.13.3"
|
||||
if (!is_bs_theme(theme)) {
|
||||
return(selectizeStaticDependency(selectizeVersion))
|
||||
}
|
||||
|
||||
selectizeDir <- system.file(package = "shiny", "www/shared/selectize/")
|
||||
bs_version <- bslib::theme_version(theme)
|
||||
stylesheet <- file.path(
|
||||
selectizeDir, "scss",
|
||||
if ("3" %in% bslib::theme_version(theme)) {
|
||||
"selectize.bootstrap3.scss"
|
||||
} else {
|
||||
"selectize.bootstrap4.scss"
|
||||
}
|
||||
selectizeDir, "scss", paste0("selectize.bootstrap", bs_version, ".scss")
|
||||
)
|
||||
# It'd be cleaner to ship the JS in a separate, href-based,
|
||||
# HTML dependency (which we currently do for other themable widgets),
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
16
inst/www/shared/selectize/plugins/drag_drop/plugin.scss
Normal file
16
inst/www/shared/selectize/plugins/drag_drop/plugin.scss
Normal file
@@ -0,0 +1,16 @@
|
||||
.#{$selectize}-control.plugin-drag_drop {
|
||||
&.multi > .#{$selectize}-input > div.ui-sortable-placeholder {
|
||||
visibility: visible !important;
|
||||
background: #f2f2f2 !important;
|
||||
background: rgba(0, 0, 0, 0.06) !important;
|
||||
border: 0 none !important;
|
||||
box-shadow: inset 0 0 12px 4px #fff;
|
||||
}
|
||||
.ui-sortable-placeholder::after {
|
||||
content: "!";
|
||||
visibility: hidden;
|
||||
}
|
||||
.ui-sortable-helper {
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
.#{$selectize}-control {
|
||||
.dropdown-header {
|
||||
position: relative;
|
||||
padding: ($select-padding-dropdown-item-y * 2)
|
||||
$select-padding-dropdown-item-x;
|
||||
border-bottom: 1px solid $select-color-border;
|
||||
background: mix($select-color-dropdown, $select-color-border, 85%);
|
||||
border-radius: $select-border-radius $select-border-radius 0 0;
|
||||
}
|
||||
.dropdown-header-close {
|
||||
position: absolute;
|
||||
right: $select-padding-dropdown-item-x;
|
||||
top: 50%;
|
||||
color: $select-color-text;
|
||||
opacity: 0.4;
|
||||
margin-top: -12px;
|
||||
line-height: 20px;
|
||||
font-size: 20px !important;
|
||||
}
|
||||
.dropdown-header-close:hover {
|
||||
color: darken($select-color-text, 25%);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
.#{$selectize}-dropdown.plugin-optgroup_columns {
|
||||
.#{$selectize}-dropdown-content {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.optgroup {
|
||||
border-right: 1px solid #f2f2f2;
|
||||
border-top: 0 none;
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
.optgroup:last-child {
|
||||
border-right: 0 none;
|
||||
}
|
||||
.optgroup:before {
|
||||
display: none;
|
||||
}
|
||||
.optgroup-header {
|
||||
border-top: 0 none;
|
||||
}
|
||||
}
|
||||
45
inst/www/shared/selectize/plugins/remove_button/plugin.scss
Normal file
45
inst/www/shared/selectize/plugins/remove_button/plugin.scss
Normal file
@@ -0,0 +1,45 @@
|
||||
.#{$selectize}-control.plugin-remove_button {
|
||||
.item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.item .remove {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
padding: $select-padding-item-y $select-padding-item-x;
|
||||
border-left: 1px solid $select-color-item-border;
|
||||
border-radius: 0 2px 2px 0;
|
||||
box-sizing: border-box;
|
||||
margin-left: $select-padding-item-x;
|
||||
}
|
||||
|
||||
.item .remove:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.item.active .remove {
|
||||
border-left-color: $select-color-item-active-border;
|
||||
}
|
||||
|
||||
.disabled .item .remove:hover {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.disabled .item .remove {
|
||||
border-left-color: lighten(
|
||||
desaturate($select-color-item-border, 100%),
|
||||
$select-lighten-disabled-item-border
|
||||
);
|
||||
}
|
||||
|
||||
.remove-single {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
font-size: 23px;
|
||||
}
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
.selectize-control.plugin-drag_drop {
|
||||
&.multi > .selectize-input > div.ui-sortable-placeholder {
|
||||
visibility: visible !important;
|
||||
background: #f2f2f2 !important;
|
||||
background: rgba(0,0,0,0.06) !important;
|
||||
border: 0 none !important;
|
||||
@include selectize-box-shadow(inset 0 0 12px 4px #fff);
|
||||
}
|
||||
.ui-sortable-placeholder::after {
|
||||
content: '!';
|
||||
visibility: hidden;
|
||||
}
|
||||
.ui-sortable-helper {
|
||||
@include selectize-box-shadow(0 2px 5px rgba(0,0,0,0.2));
|
||||
}
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
.selectize-dropdown-header {
|
||||
position: relative;
|
||||
padding: $selectize-padding-dropdown-item-y $selectize-padding-dropdown-item-x;
|
||||
border-bottom: 1px solid $selectize-color-border;
|
||||
background: mix($selectize-color-dropdown, $selectize-color-border, 85%);
|
||||
@include selectize-border-radius($selectize-border-radius $selectize-border-radius 0 0);
|
||||
}
|
||||
.selectize-dropdown-header-close {
|
||||
position: absolute;
|
||||
right: $selectize-padding-dropdown-item-x;
|
||||
top: 50%;
|
||||
color: $selectize-color-text;
|
||||
opacity: 0.4;
|
||||
margin-top: -12px;
|
||||
line-height: 20px;
|
||||
font-size: 20px !important;
|
||||
}
|
||||
.selectize-dropdown-header-close:hover {
|
||||
color: darken($selectize-color-text, 25%);
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
.selectize-dropdown.plugin-optgroup_columns {
|
||||
.optgroup {
|
||||
border-right: 1px solid #f2f2f2;
|
||||
border-top: 0 none;
|
||||
float: left;
|
||||
@include selectize-box-sizing(border-box);
|
||||
}
|
||||
.optgroup:last-child {
|
||||
border-right: 0 none;
|
||||
}
|
||||
.optgroup:before {
|
||||
display: none;
|
||||
}
|
||||
.optgroup-header {
|
||||
border-top: 0 none;
|
||||
}
|
||||
}
|
||||
@@ -1,43 +0,0 @@
|
||||
.selectize-control.plugin-remove_button {
|
||||
[data-value] {
|
||||
position: relative;
|
||||
padding-right: 24px !important;
|
||||
}
|
||||
[data-value] .remove {
|
||||
z-index: 1; /* fixes ie bug (see #392) */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 17px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
padding: $selectize-padding-item-y 0 0 0;
|
||||
border-left: 1px solid $selectize-color-item-border;
|
||||
@include selectize-border-radius(0 2px 2px 0);
|
||||
@include selectize-box-sizing(border-box);
|
||||
}
|
||||
[data-value] .remove:hover {
|
||||
background: rgba(0,0,0,0.05);
|
||||
}
|
||||
[data-value].active .remove {
|
||||
border-left-color: $selectize-color-item-active-border;
|
||||
}
|
||||
.disabled [data-value] .remove:hover {
|
||||
background: none;
|
||||
}
|
||||
.disabled [data-value] .remove {
|
||||
border-left-color: lighten(desaturate($selectize-color-item-border, 100%), $selectize-lighten-disabled-item-border);
|
||||
}
|
||||
.remove-single {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
font-size: 23px;
|
||||
}
|
||||
}
|
||||
@@ -1,158 +1,138 @@
|
||||
/**
|
||||
* selectize.bootstrap3.css (v0.12.3) - Bootstrap 3 Theme
|
||||
* Copyright (c) 2013–2015 Brian Reavis & contributors
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
|
||||
* file except in compliance with the License. You may obtain a copy of the License at:
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software distributed under
|
||||
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
|
||||
* ANY KIND, either express or implied. See the License for the specific language
|
||||
* governing permissions and limitations under the License.
|
||||
*
|
||||
* @author Brian Reavis <brian@thirdroute.com>
|
||||
*/
|
||||
|
||||
$selectize-font-family: inherit !default;
|
||||
$selectize-font-size: inherit !default;
|
||||
$selectize-line-height: $line-height-computed !default;
|
||||
$select-font-family: inherit;
|
||||
$select-font-size: inherit;
|
||||
$select-line-height: $line-height-computed;
|
||||
|
||||
$selectize-color-text: $input-color !default;
|
||||
$selectize-color-highlight: rgba(255,237,40,0.4) !default;
|
||||
$selectize-color-input: $input-bg !default;
|
||||
$selectize-color-input-full: $input-bg !default;
|
||||
$selectize-color-input-error: $state-danger-text !default;
|
||||
$selectize-color-input-error-focus: darken($selectize-color-input-error, 10%) !default;
|
||||
$selectize-color-disabled: $input-bg !default;
|
||||
$selectize-color-item: mix($selectize-color-input, $selectize-color-text, 90%) !default;
|
||||
$selectize-color-item-border: rgba(black, 0) !default;
|
||||
$selectize-color-item-active: $component-active-bg !default;
|
||||
$selectize-color-item-active-text: color-contrast($selectize-color-item-active) !default;
|
||||
$selectize-color-item-active-border: rgba(black, 0) !default;
|
||||
$selectize-color-optgroup: $dropdown-bg !default;
|
||||
$selectize-color-optgroup-text: $dropdown-header-color !default;
|
||||
$selectize-color-optgroup-border: $dropdown-divider-bg !default;
|
||||
$selectize-color-dropdown: $dropdown-bg !default;
|
||||
$selectize-color-dropdown-text: $dropdown-link-color !default;
|
||||
$selectize-color-dropdown-border-top: mix($input-border, $input-bg, 0.8) !default;
|
||||
$selectize-color-dropdown-item-active: $dropdown-link-hover-bg !default;
|
||||
$selectize-color-dropdown-item-active-text: $dropdown-link-hover-color !default;
|
||||
$selectize-color-dropdown-item-create-active-text: $dropdown-link-hover-color !default;
|
||||
$selectize-opacity-disabled: 0.5 !default;
|
||||
$selectize-shadow-input: none !default;
|
||||
$selectize-shadow-input-focus: inset 0 1px 2px rgba(black, 0.15) !default;
|
||||
$selectize-shadow-input-error: inset 0 1px 1px rgba(black, .075) !default;
|
||||
$selectize-shadow-input-error-focus: inset 0 1px 1px rgba(black, .075), 0 0 6px lighten($selectize-color-input-error, 20%) !default;
|
||||
$selectize-border: 1px solid $input-border !default;
|
||||
$selectize-border-radius: $input-border-radius !default;
|
||||
$select-color-text: $input-color;
|
||||
$select-color-highlight: rgba(255, 237, 40, 0.4);
|
||||
$select-color-input: $input-bg;
|
||||
$select-color-input-full: $input-bg;
|
||||
$select-color-input-error: $state-danger-text;
|
||||
$select-color-input-error-focus: darken($select-color-input-error, 10%);
|
||||
$select-color-disabled: $input-bg;
|
||||
$select-color-item: mix($select-color-input, $select-color-text, 90%);
|
||||
$select-color-item-border: rgba(0, 0, 0, 0);
|
||||
$select-color-item-active: $component-active-bg;
|
||||
$select-color-item-active-text: color-contrast($select-color-item-active);
|
||||
$select-color-item-active-border: rgba(0, 0, 0, 0);
|
||||
$select-color-optgroup: $dropdown-bg;
|
||||
$select-color-optgroup-text: $dropdown-header-color;
|
||||
$select-color-optgroup-border: $dropdown-divider-bg;
|
||||
$select-color-dropdown: $dropdown-bg;
|
||||
$select-color-dropdown-text: $dropdown-link-color;
|
||||
$select-color-dropdown-border-top: mix($input-border, $input-bg, 0.8);
|
||||
$select-color-dropdown-item-active: $dropdown-link-hover-bg;
|
||||
$select-color-dropdown-item-active-text: $dropdown-link-hover-color;
|
||||
$select-color-dropdown-item-create-active-text: $dropdown-link-hover-color;
|
||||
$select-opacity-disabled: 0.5;
|
||||
$select-shadow-input: none;
|
||||
$select-shadow-input-focus: inset 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
$select-shadow-input-error: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
$select-shadow-input-error-focus: inset 0 1px 1px rgba(0, 0, 0, 0.075),
|
||||
0 0 6px lighten($select-color-input-error, 20%);
|
||||
$select-border: 1px solid $input-border;
|
||||
$select-border-radius: $input-border-radius;
|
||||
|
||||
$selectize-width-item-border: 0 !default;
|
||||
$selectize-padding-x: $padding-base-horizontal !default;
|
||||
$selectize-padding-y: $padding-base-vertical !default;
|
||||
$selectize-padding-dropdown-item-x: $padding-base-horizontal !default;
|
||||
$selectize-padding-dropdown-item-y: 3px !default;
|
||||
$selectize-padding-item-x: 3px !default;
|
||||
$selectize-padding-item-y: 1px !default;
|
||||
$selectize-margin-item-x: 3px !default;
|
||||
$selectize-margin-item-y: 3px !default;
|
||||
$selectize-caret-margin: 0 !default;
|
||||
$select-width-item-border: 0;
|
||||
$select-padding-x: $padding-base-horizontal;
|
||||
$select-padding-y: $padding-base-vertical;
|
||||
$select-padding-dropdown-item-x: $padding-base-horizontal;
|
||||
$select-padding-dropdown-item-y: 3px;
|
||||
$select-padding-item-x: 5px;
|
||||
$select-padding-item-y: 1px;
|
||||
$select-margin-item-x: 3px;
|
||||
$select-margin-item-y: 3px;
|
||||
|
||||
$selectize-arrow-size: 5px !default;
|
||||
$selectize-arrow-color: $selectize-color-text !default;
|
||||
$selectize-arrow-offset: $selectize-padding-x + 5px !default;
|
||||
$select-arrow-size: 5px;
|
||||
$select-arrow-color: $select-color-text;
|
||||
$select-arrow-offset: $select-padding-x + 5px;
|
||||
|
||||
@import "selectize";
|
||||
|
||||
//Import Plugins
|
||||
@import "plugins/drag_drop";
|
||||
@import "plugins/dropdown_header";
|
||||
@import "plugins/optgroup_columns";
|
||||
@import "plugins/remove_button";
|
||||
|
||||
.selectize-dropdown, .selectize-dropdown.form-control {
|
||||
height: auto;
|
||||
padding: 0;
|
||||
margin: 2px 0 0 0;
|
||||
z-index: $zindex-dropdown;
|
||||
background: $selectize-color-dropdown;
|
||||
color: $selectize-color-dropdown-text;
|
||||
border: 1px solid $dropdown-fallback-border;
|
||||
border: 1px solid $dropdown-border;
|
||||
@include selectize-border-radius ($border-radius-base);
|
||||
@include selectize-box-shadow (0 6px 12px rgba(black, .175));
|
||||
.#{$selectize}-dropdown,
|
||||
.#{$selectize}-dropdown.form-control {
|
||||
height: auto;
|
||||
padding: 0;
|
||||
margin: 2px 0 0 0;
|
||||
z-index: $zindex-dropdown;
|
||||
background: $select-color-dropdown;
|
||||
color: $select-color-dropdown-text;
|
||||
border: 1px solid $dropdown-fallback-border;
|
||||
border: 1px solid $dropdown-border;
|
||||
border-radius: $border-radius-base;
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
||||
}
|
||||
|
||||
.selectize-dropdown {
|
||||
.optgroup-header {
|
||||
font-size: $font-size-small;
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
.optgroup:first-child:before {
|
||||
display: none;
|
||||
}
|
||||
.optgroup:before {
|
||||
content: ' ';
|
||||
display: block;
|
||||
@include nav-divider;
|
||||
margin-left: $selectize-padding-dropdown-item-x * -1;
|
||||
margin-right: $selectize-padding-dropdown-item-x * -1;
|
||||
}
|
||||
.#{$selectize}-dropdown {
|
||||
.optgroup-header {
|
||||
font-size: $font-size-small;
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
.optgroup:first-child:before {
|
||||
display: none;
|
||||
}
|
||||
.optgroup:before {
|
||||
content: " ";
|
||||
display: block;
|
||||
@include nav-divider();
|
||||
margin-left: $select-padding-dropdown-item-x * -1;
|
||||
margin-right: $select-padding-dropdown-item-x * -1;
|
||||
}
|
||||
}
|
||||
|
||||
.selectize-dropdown-content {
|
||||
padding: 5px 0;
|
||||
.#{$selectize}-dropdown-content {
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.selectize-dropdown-header {
|
||||
padding: $selectize-padding-dropdown-item-y * 2 $selectize-padding-dropdown-item-x;
|
||||
.#{$selectize}-dropdown-emptyoptionlabel {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.selectize-input {
|
||||
min-height: $input-height-base;
|
||||
.#{$selectize}-input {
|
||||
min-height: $input-height-base;
|
||||
|
||||
&.dropdown-active {
|
||||
@include selectize-border-radius ($selectize-border-radius);
|
||||
&.dropdown-active {
|
||||
border-radius: $select-border-radius;
|
||||
}
|
||||
&.dropdown-active::before {
|
||||
display: none;
|
||||
}
|
||||
&.focus {
|
||||
$color: $input-border-focus;
|
||||
$color-rgba: rgba(red($color), green($color), blue($color), 0.6);
|
||||
border-color: $color;
|
||||
outline: 0;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px $color-rgba;
|
||||
}
|
||||
}
|
||||
|
||||
.has-error .#{$selectize}-input {
|
||||
border-color: $select-color-input-error;
|
||||
box-shadow: $select-shadow-input-error;
|
||||
|
||||
&:focus {
|
||||
border-color: $select-color-input-error-focus;
|
||||
box-shadow: $select-shadow-input-error-focus;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$selectize}-control {
|
||||
&.multi {
|
||||
.#{$selectize}-input.has-items {
|
||||
padding-left: $select-padding-x - $select-padding-item-x;
|
||||
padding-right: $select-padding-x - $select-padding-item-x;
|
||||
}
|
||||
&.dropdown-active::before {
|
||||
display: none;
|
||||
}
|
||||
&.focus {
|
||||
$color: $input-border-focus;
|
||||
$color-rgba: rgba(red($color), green($color), blue($color), .6);
|
||||
border-color: $color;
|
||||
outline: 0;
|
||||
@include selectize-box-shadow ("inset 0 1px 1px rgba(black, .075), 0 0 8px #{$color-rgba}");
|
||||
.#{$selectize}-input > div {
|
||||
border-radius: $select-border-radius - 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.has-error .selectize-input {
|
||||
border-color: $selectize-color-input-error;
|
||||
@include selectize-box-shadow ($selectize-shadow-input-error);
|
||||
|
||||
&:focus {
|
||||
border-color: $selectize-color-input-error-focus;
|
||||
@include selectize-box-shadow ($selectize-shadow-input-error-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.selectize-control {
|
||||
&.multi {
|
||||
.selectize-input.has-items {
|
||||
padding-left: $selectize-padding-x - $selectize-padding-item-x;
|
||||
padding-right: $selectize-padding-x - $selectize-padding-item-x;
|
||||
}
|
||||
.selectize-input > div {
|
||||
@include selectize-border-radius ($selectize-border-radius - 1px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-control.selectize-control {
|
||||
padding: 0;
|
||||
height: auto;
|
||||
border: none;
|
||||
background: none;
|
||||
@include selectize-box-shadow (none);
|
||||
@include selectize-border-radius (0);
|
||||
.form-control.#{$selectize}-control {
|
||||
padding: 0;
|
||||
height: auto;
|
||||
border: none;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@@ -1,118 +1,114 @@
|
||||
/**
|
||||
* Selectize bootstrap 4
|
||||
*/
|
||||
|
||||
//Import Boostrap 4 functions and variables
|
||||
|
||||
$enable-shadows: true !default;
|
||||
$selectize-font-family: inherit !default;
|
||||
$selectize-font-size: inherit !default;
|
||||
$selectize-line-height: $input-btn-line-height !default; //formerly line-height-computed
|
||||
$select-font-family: inherit !default;
|
||||
$select-font-size: inherit !default;
|
||||
$select-line-height: $input-btn-line-height !default; //formerly line-height-computed
|
||||
|
||||
$selectize-color-text: $input-color !default;
|
||||
$selectize-color-highlight: rgba(255,237,40,0.4) !default;
|
||||
$selectize-color-input: $input-bg !default;
|
||||
$selectize-color-input-full: $input-bg !default;
|
||||
$selectize-color-input-error: theme-color("danger") !default;
|
||||
$selectize-color-input-error-focus: darken($selectize-color-input-error, 10%) !default;
|
||||
$selectize-color-disabled: $input-bg !default;
|
||||
$selectize-color-item: mix($selectize-color-input, $selectize-color-text, 90%) !default;
|
||||
$selectize-color-item-border: $input-border-color !default;
|
||||
$selectize-color-item-active: $component-active-bg !default;
|
||||
$selectize-color-item-active-text: color-contrast($selectize-color-item-active) !default;
|
||||
$selectize-color-item-active-border: rgba(0,0,0,0) !default;
|
||||
$selectize-color-optgroup: $dropdown-bg !default;
|
||||
$selectize-color-optgroup-text: $dropdown-header-color !default;
|
||||
$selectize-color-optgroup-border: $dropdown-divider-bg !default;
|
||||
$selectize-color-dropdown: $dropdown-bg !default;
|
||||
$selectize-color-dropdown-text: $dropdown-link-color !default;
|
||||
$selectize-color-dropdown-border-top: mix($input-border-color, $input-bg, 0.8) !default;
|
||||
$selectize-color-dropdown-item-active: $dropdown-link-hover-bg !default;
|
||||
$selectize-color-dropdown-item-active-text: $dropdown-link-hover-color !default;
|
||||
$selectize-color-dropdown-item-create-active-text: $dropdown-link-hover-color !default;
|
||||
$selectize-opacity-disabled: 0.5 !default;
|
||||
$selectize-shadow-input: none !default;
|
||||
$selectize-shadow-input-focus: inset 0 1px 2px rgba(0,0,0,0.15) !default;
|
||||
$selectize-shadow-input-error: inset 0 1px 1px rgba(0, 0, 0, .075) !default;
|
||||
$selectize-shadow-input-error-focus: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px lighten($selectize-color-input-error, 20%) !default;
|
||||
$selectize-border: 1px solid $input-border-color !default;
|
||||
$selectize-border-radius: $input-border-radius !default;
|
||||
$select-color-text: $input-color !default; //$gray-800
|
||||
$select-color-highlight: rgba(255, 237, 40, 0.4) !default;
|
||||
$select-color-input: $input-bg !default;
|
||||
$select-color-input-full: $input-bg !default;
|
||||
$select-color-input-error: $danger !default;
|
||||
$select-color-input-error-focus: darken(
|
||||
$select-color-input-error,
|
||||
10%
|
||||
) !default;
|
||||
$select-color-disabled: $input-bg !default;
|
||||
$select-color-item: mix($select-color-input, $select-color-text, 90%) !default;
|
||||
$select-color-item-border: $input-border-color !default;
|
||||
$select-color-item-active: $component-active-bg !default;
|
||||
$select-color-item-active-text: color-contrast($select-color-item-active) !default;
|
||||
$select-color-item-active-border: rgba(0, 0, 0, 0) !default;
|
||||
$select-color-optgroup: $dropdown-bg !default;
|
||||
$select-color-dropdown-text: $dropdown-link-color !default;
|
||||
$select-color-optgroup-text: $dropdown-header-color !default;
|
||||
$select-color-optgroup-border: $dropdown-divider-bg !default;
|
||||
$select-color-dropdown: $dropdown-bg !default;
|
||||
$select-color-dropdown-border-top: mix(
|
||||
$input-border-color,
|
||||
$input-bg,
|
||||
0.8
|
||||
) !default;
|
||||
$select-color-dropdown-item-active: $dropdown-link-hover-bg !default;
|
||||
$select-color-dropdown-item-active-text: $dropdown-link-hover-color !default;
|
||||
$select-color-dropdown-item-create-active-text: $dropdown-link-hover-color !default;
|
||||
$select-opacity-disabled: 0.5 !default;
|
||||
$select-shadow-input: none !default;
|
||||
$select-shadow-input-focus: inset 0 1px 2px rgba(0, 0, 0, 0.15) !default;
|
||||
$select-shadow-input-error: inset 0 1px 1px rgba(0, 0, 0, 0.075) !default;
|
||||
$select-shadow-input-error-focus: inset 0 1px 1px rgba(0, 0, 0, 0.075),
|
||||
0 0 6px lighten($select-color-input-error, 20%) !default;
|
||||
$select-border: 1px solid $input-border-color !default;
|
||||
$select-border-radius: $input-border-radius !default;
|
||||
|
||||
$selectize-width-item-border: 0px !default;
|
||||
$selectize-padding-x: $input-btn-padding-x !default;
|
||||
$selectize-padding-y: $input-btn-padding-y !default;
|
||||
$selectize-padding-dropdown-item-x: $input-btn-padding-x !default;
|
||||
$selectize-padding-dropdown-item-y: 3px !default;
|
||||
$selectize-padding-item-x: 3px !default;
|
||||
$selectize-padding-item-y: 1px !default;
|
||||
$selectize-margin-item-x: 3px !default;
|
||||
$selectize-margin-item-y: 3px !default;
|
||||
$selectize-caret-margin: 0 !default;
|
||||
|
||||
$selectize-arrow-size: 5px !default;
|
||||
$selectize-arrow-color: $selectize-color-text !default;
|
||||
$selectize-arrow-offset: calc(#{$selectize-padding-x} + 5px) !default;
|
||||
$select-width-item-border: 0px !default;
|
||||
$select-padding-x: $input-btn-padding-x !default;
|
||||
$select-padding-y: $input-btn-padding-y !default;
|
||||
$select-padding-dropdown-item-x: $input-btn-padding-x !default;
|
||||
$select-padding-dropdown-item-y: 3px !default;
|
||||
$select-padding-item-x: 5px !default;
|
||||
$select-padding-item-y: 1px !default;
|
||||
$select-margin-item-x: 3px !default;
|
||||
$select-margin-item-y: 3px !default;
|
||||
|
||||
$select-arrow-size: 5px !default;
|
||||
$select-arrow-color: $select-color-text !default;
|
||||
$select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
|
||||
|
||||
@import "selectize";
|
||||
|
||||
//Import Plugins
|
||||
@import "plugins/drag_drop";
|
||||
@import "plugins/dropdown_header";
|
||||
@import "plugins/optgroup_columns";
|
||||
@import "plugins/remove_button";
|
||||
|
||||
.selectize-dropdown, .selectize-dropdown.form-control {
|
||||
.#{$selectize}-dropdown,
|
||||
.#{$selectize}-dropdown.form-control {
|
||||
height: auto;
|
||||
padding: 0;
|
||||
margin: 2px 0 0 0;
|
||||
z-index: $zindex-dropdown;
|
||||
background: $selectize-color-dropdown;
|
||||
color: $selectize-color-dropdown-text;
|
||||
background: $select-color-dropdown;
|
||||
color: $select-color-dropdown-text;
|
||||
border: 1px solid $dropdown-border-color; //$dropdown-fallback-border
|
||||
@include selectize-border-radius($border-radius);
|
||||
@include selectize-box-shadow(0 6px 12px rgba(0,0,0,.175));
|
||||
border-radius: $border-radius;
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
||||
}
|
||||
|
||||
.selectize-dropdown {
|
||||
.#{$selectize}-dropdown {
|
||||
.optgroup-header {
|
||||
font-size: $font-size-sm;
|
||||
line-height: $line-height-base;
|
||||
font-size: $font-size-sm;
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
.optgroup:first-child:before {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
.optgroup:before {
|
||||
content: ' ';
|
||||
display: block;
|
||||
height: 0;
|
||||
margin: $dropdown-divider-margin-y 0;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid $dropdown-divider-bg;
|
||||
margin-left: $selectize-padding-dropdown-item-x * -1;
|
||||
margin-right: $selectize-padding-dropdown-item-x * -1;
|
||||
content: " ";
|
||||
display: block;
|
||||
height: 0;
|
||||
margin: $dropdown-divider-margin-y 0;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid $dropdown-divider-bg;
|
||||
margin-left: $select-padding-dropdown-item-x * -1;
|
||||
margin-right: $select-padding-dropdown-item-x * -1;
|
||||
}
|
||||
|
||||
.create {
|
||||
padding-left: $selectize-padding-dropdown-item-x;
|
||||
padding-left: $select-padding-dropdown-item-x;
|
||||
}
|
||||
}
|
||||
|
||||
.selectize-dropdown-content {
|
||||
.#{$selectize}-dropdown-content {
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.selectize-dropdown-header {
|
||||
padding: $selectize-padding-dropdown-item-y * 2 $selectize-padding-dropdown-item-x;
|
||||
.#{$selectize}-dropdown-emptyoptionlabel {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.selectize-input {
|
||||
.#{$selectize}-input {
|
||||
min-height: $input-height;
|
||||
@include box-shadow($input-box-shadow);
|
||||
@include transition($input-transition);
|
||||
|
||||
&.dropdown-active {
|
||||
@include selectize-border-radius($selectize-border-radius);
|
||||
border-radius: $select-border-radius;
|
||||
}
|
||||
&.dropdown-active::before {
|
||||
display: none;
|
||||
@@ -128,22 +124,21 @@ $selectize-arrow-offset: calc(#{$selectize-padding-x} + 5px) !default;
|
||||
}
|
||||
}
|
||||
|
||||
.is-invalid .selectize-input {
|
||||
border-color: $selectize-color-input-error;
|
||||
@include selectize-box-shadow($selectize-shadow-input-error);
|
||||
.is-invalid .#{$selectize}-input {
|
||||
border-color: $select-color-input-error;
|
||||
box-shadow: $select-shadow-input-error;
|
||||
|
||||
&:focus {
|
||||
border-color: $selectize-color-input-error-focus;
|
||||
// @include selectize-box-shadow(none)
|
||||
@include selectize-box-shadow($selectize-shadow-input-error-focus);
|
||||
border-color: $select-color-input-error-focus;
|
||||
box-shadow: $select-shadow-input-error-focus;
|
||||
}
|
||||
}
|
||||
|
||||
.selectize-control {
|
||||
&.form-control-sm{
|
||||
.selectize-input.has-items{
|
||||
.#{$selectize}-control {
|
||||
&.form-control-sm {
|
||||
.#{$selectize}-input.has-items {
|
||||
min-height: $input-height-sm !important;
|
||||
height: $input-height-sm !important;
|
||||
height: $input-height-sm;
|
||||
padding: $input-padding-y-sm $input-padding-x-sm !important;
|
||||
font-size: $input-font-size-sm;
|
||||
line-height: $input-line-height-sm;
|
||||
@@ -151,26 +146,27 @@ $selectize-arrow-offset: calc(#{$selectize-padding-x} + 5px) !default;
|
||||
}
|
||||
|
||||
&.multi {
|
||||
.selectize-input.has-items {
|
||||
padding-left: calc(#{$selectize-padding-x} - #{$selectize-padding-item-x});
|
||||
padding-right: calc(#{$selectize-padding-x} - #{$selectize-padding-item-x});
|
||||
}
|
||||
.selectize-input > div {
|
||||
@include selectize-border-radius(calc(#{$selectize-border-radius} - 1px));
|
||||
}
|
||||
.#{$selectize}-input.has-items {
|
||||
height: auto;
|
||||
padding-left: calc(#{$select-padding-x} - #{$select-padding-item-x});
|
||||
padding-right: calc(#{$select-padding-x} - #{$select-padding-item-x});
|
||||
}
|
||||
.#{$selectize}-input > div {
|
||||
border-radius: calc(#{$select-border-radius} - 1px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-control.selectize-control {
|
||||
.form-control.#{$selectize}-control {
|
||||
padding: 0;
|
||||
height: auto;
|
||||
border: none;
|
||||
background: none;
|
||||
@include selectize-box-shadow(none);
|
||||
@include selectize-border-radius(0);
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.input-group .selectize-input {
|
||||
overflow: unset;
|
||||
@include selectize-border-radius(0 $selectize-border-radius $selectize-border-radius 0);
|
||||
.input-group .#{$selectize}-input {
|
||||
overflow: unset;
|
||||
border-radius: 0 $select-border-radius $select-border-radius 0;
|
||||
}
|
||||
|
||||
3
inst/www/shared/selectize/scss/selectize.bootstrap5.scss
Normal file
3
inst/www/shared/selectize/scss/selectize.bootstrap5.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
$input-line-height-sm: $form-select-line-height !default;
|
||||
@import 'selectize.bootstrap4';
|
||||
.selectize-control{padding:0;}
|
||||
@@ -1,84 +1,71 @@
|
||||
/**
|
||||
* selectize.default.css (v$$version) - Default Theme
|
||||
* Copyright (c) 2013–2015 Brian Reavis & contributors
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
|
||||
* file except in compliance with the License. You may obtain a copy of the License at:
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software distributed under
|
||||
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
|
||||
* ANY KIND, either express or implied. See the License for the specific language
|
||||
* governing permissions and limitations under the License.
|
||||
*
|
||||
* $author Brian Reavis <brian$thirdroute.com>
|
||||
*/
|
||||
$select-color-item: #1da7ee;
|
||||
$select-color-item-text: #fff;
|
||||
$select-color-item-active-text: #fff;
|
||||
$select-color-item-border: #0073bb;
|
||||
$select-color-item-active: #92c836;
|
||||
$select-color-item-active-border: #00578d;
|
||||
$select-width-item-border: 1px;
|
||||
|
||||
@import "selectize";
|
||||
|
||||
$selectize-color-item: #1da7ee;
|
||||
$selectize-color-item-text: #fff;
|
||||
$selectize-color-item-active-text: #fff;
|
||||
$selectize-color-item-border: #0073bb;
|
||||
$selectize-color-item-active: #92c836;
|
||||
$selectize-color-item-active-border: #00578d;
|
||||
$selectize-width-item-border: 1px;
|
||||
$selectize-caret-margin: 0 1px;
|
||||
|
||||
.selectize-control {
|
||||
.#{$selectize}-control {
|
||||
&.multi {
|
||||
.selectize-input {
|
||||
&.has-items {
|
||||
$padding-x: $selectize-padding-x - 3px;
|
||||
padding-left: $padding-x;
|
||||
padding-right: $padding-x;
|
||||
}
|
||||
&.disabled [data-value] {
|
||||
color: #999;
|
||||
text-shadow: none;
|
||||
background: none;
|
||||
@include selectize-box-shadow(none);
|
||||
.#{$selectize}-input {
|
||||
&.has-items {
|
||||
$padding-x: $select-padding-x - 3px;
|
||||
padding-left: $padding-x;
|
||||
padding-right: $padding-x;
|
||||
}
|
||||
&.disabled [data-value] {
|
||||
color: #999;
|
||||
text-shadow: none;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
|
||||
&, .remove {
|
||||
border-color: #e6e6e6;
|
||||
}
|
||||
.remove {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
[data-value] {
|
||||
text-shadow: 0 1px 0 rgba(0,51,83,0.3);
|
||||
@include selectize-border-radius(3px);
|
||||
@include selectize-vertical-gradient(#1da7ee, #178ee9);
|
||||
@include selectize-box-shadow(#{"0 1px 0 rgba(0,0,0,0.2),inset 0 1px rgba(255,255,255,0.03)"});
|
||||
&.active {
|
||||
@include selectize-vertical-gradient(#008fd8, #0075cf);
|
||||
}
|
||||
}
|
||||
}
|
||||
&,
|
||||
.remove {
|
||||
border-color: #e6e6e6;
|
||||
}
|
||||
.remove {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
[data-value] {
|
||||
text-shadow: 0 1px 0 rgba(0, 51, 83, 0.3);
|
||||
border-radius: 3px;
|
||||
@include selectize-vertical-gradient(#1da7ee, #178ee9);
|
||||
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2),
|
||||
inset 0 1px rgba(255, 255, 255, 0.03);
|
||||
&.active {
|
||||
@include selectize-vertical-gradient(#008fd8, #0075cf);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.single {
|
||||
.selectize-input {
|
||||
@include selectize-box-shadow(#{"0 1px 0 rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.8)"});
|
||||
@include selectize-vertical-gradient(#fefefe, #f2f2f2);
|
||||
}
|
||||
.#{$selectize}-input {
|
||||
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
||||
@include selectize-vertical-gradient(#fefefe, #f2f2f2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.selectize-control.single .selectize-input, .selectize-dropdown.single {
|
||||
.#{$selectize}-control.single .#{$selectize}-input,
|
||||
.#{$selectize}-dropdown.single {
|
||||
border-color: #b8b8b8;
|
||||
}
|
||||
|
||||
.selectize-dropdown {
|
||||
.#{$selectize}-dropdown {
|
||||
.optgroup-header {
|
||||
padding-top: $selectize-padding-dropdown-item-y + 2px;
|
||||
font-weight: bold;
|
||||
font-size: 0.85em;
|
||||
padding-top: $select-padding-dropdown-item-y + 2px;
|
||||
font-weight: bold;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
.optgroup {
|
||||
border-top: 1px solid $selectize-color-dropdown-border-top;
|
||||
&:first-child {
|
||||
border-top: 0 none;
|
||||
}
|
||||
border-top: 1px solid $select-color-dropdown-border-top;
|
||||
&:first-child {
|
||||
border-top: 0 none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,300 +1,381 @@
|
||||
/**
|
||||
* selectize.css (v@@version)
|
||||
* Copyright (c) 2013–2015 Brian Reavis & contributors
|
||||
* Copyright (c) 2020 Selectize Team & contributors
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
|
||||
* file except in compliance with the License. You may obtain a copy of the License at:
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software distributed under
|
||||
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
|
||||
* ANY KIND, either express or implied. See the License for the specific language
|
||||
* governing permissions and limitations under the License.
|
||||
*
|
||||
* @author Brian Reavis <brian@thirdroute.com>
|
||||
* @author Ris Adams <selectize@risadams.com>
|
||||
*/
|
||||
|
||||
// base styles
|
||||
$selectize: "selectize" !default;
|
||||
$select-font-family: inherit !default;
|
||||
$select-font-smoothing: inherit !default;
|
||||
$select-font-size: 13px !default;
|
||||
$select-line-height: 18px !default;
|
||||
|
||||
$selectize-font-family: inherit !default;
|
||||
$selectize-font-smoothing: inherit !default;
|
||||
$selectize-font-size: 13px !default;
|
||||
$selectize-line-height: 18px !default;
|
||||
$select-color-text: #303030 !default;
|
||||
$select-color-border: #d0d0d0 !default;
|
||||
$select-color-highlight: rgba(125, 168, 208, 0.2) !default;
|
||||
$select-color-input: #fff !default;
|
||||
$select-color-input-full: $select-color-input !default;
|
||||
$select-color-disabled: #fafafa !default;
|
||||
$select-color-item: #f2f2f2 !default;
|
||||
$select-color-item-text: $select-color-text !default;
|
||||
$select-color-item-border: #d0d0d0 !default;
|
||||
$select-color-item-active: #e8e8e8 !default;
|
||||
$select-color-item-active-text: $select-color-text !default;
|
||||
$select-color-item-active-border: #cacaca !default;
|
||||
$select-color-dropdown: #fff !default;
|
||||
$select-color-dropdown-border: $select-color-border !default;
|
||||
$select-color-dropdown-border-top: #f0f0f0 !default;
|
||||
$select-color-dropdown-item-active: #f5fafd !default;
|
||||
$select-color-dropdown-item-active-text: #495c68 !default;
|
||||
$select-color-dropdown-item-create-text: rgba(
|
||||
red($select-color-text),
|
||||
green($select-color-text),
|
||||
blue($select-color-text),
|
||||
0.5
|
||||
) !default;
|
||||
$select-color-dropdown-item-create-active-text: $select-color-dropdown-item-active-text !default;
|
||||
$select-color-optgroup: $select-color-dropdown !default;
|
||||
$select-color-optgroup-text: $select-color-text !default;
|
||||
$select-lighten-disabled-item: 30% !default;
|
||||
$select-lighten-disabled-item-text: 30% !default;
|
||||
$select-lighten-disabled-item-border: 30% !default;
|
||||
$select-opacity-disabled: 0.5 !default;
|
||||
|
||||
$selectize-color-text: #303030 !default;
|
||||
$selectize-color-border: #d0d0d0 !default;
|
||||
$selectize-color-highlight: rgba(125,168,208,0.2) !default;
|
||||
$selectize-color-input: #fff !default;
|
||||
$selectize-color-input-full: $selectize-color-input !default;
|
||||
$selectize-color-disabled: #fafafa !default;
|
||||
$selectize-color-item: #f2f2f2 !default;
|
||||
$selectize-color-item-text: $selectize-color-text !default;
|
||||
$selectize-color-item-border: #d0d0d0 !default;
|
||||
$selectize-color-item-active: #e8e8e8 !default;
|
||||
$selectize-color-item-active-text: $selectize-color-text !default;
|
||||
$selectize-color-item-active-border: #cacaca !default;
|
||||
$selectize-color-dropdown: #fff !default;
|
||||
$selectize-color-dropdown-border: $selectize-color-border !default;
|
||||
$selectize-color-dropdown-border-top: #f0f0f0 !default;
|
||||
$selectize-color-dropdown-item-active: #f5fafd !default;
|
||||
$selectize-color-dropdown-item-active-text: #495c68 !default;
|
||||
$selectize-color-dropdown-item-create-text: rgba(red($selectize-color-text), green($selectize-color-text), blue($selectize-color-text), 0.5) !default;
|
||||
$selectize-color-dropdown-item-create-active-text: $selectize-color-dropdown-item-active-text !default;
|
||||
$selectize-color-optgroup: $selectize-color-dropdown !default;
|
||||
$selectize-color-optgroup-text: $selectize-color-text !default;
|
||||
$selectize-lighten-disabled-item: 30% !default;
|
||||
$selectize-lighten-disabled-item-text: 30% !default;
|
||||
$selectize-lighten-disabled-item-border: 30% !default;
|
||||
$selectize-opacity-disabled: 0.5 !default;
|
||||
$select-shadow-input: inset 0 1px 1px rgba(0, 0, 0, 0.1) !default;
|
||||
$select-shadow-input-focus: inset 0 1px 2px rgba(0, 0, 0, 0.15) !default;
|
||||
$select-border: 1px solid $select-color-border !default;
|
||||
$select-dropdown-border: 1px solid $select-color-dropdown-border !default;
|
||||
$select-border-radius: 3px !default;
|
||||
|
||||
$selectize-shadow-input: inset 0 1px 1px rgba(0,0,0,0.1) !default;
|
||||
$selectize-shadow-input-focus: inset 0 1px 2px rgba(0,0,0,0.15) !default;
|
||||
$selectize-border: 1px solid $selectize-color-border !default;
|
||||
$selectize-dropdown-border: 1px solid $selectize-color-dropdown-border !default;
|
||||
$selectize-border-radius: 3px !default;
|
||||
$select-width-item-border: 0 !default;
|
||||
$select-max-height-dropdown: 200px !default;
|
||||
|
||||
$selectize-width-item-border: 0 !default;
|
||||
$selectize-max-height-dropdown: 200px !default;
|
||||
$select-padding-x: 8px !default;
|
||||
$select-padding-y: 8px !default;
|
||||
$select-padding-item-x: 6px !default;
|
||||
$select-padding-item-y: 2px !default;
|
||||
$select-padding-dropdown-item-x: $select-padding-x !default;
|
||||
$select-padding-dropdown-item-y: 5px !default;
|
||||
$select-margin-item-x: 3px !default;
|
||||
$select-margin-item-y: 3px !default;
|
||||
|
||||
$selectize-padding-x: 8px !default;
|
||||
$selectize-padding-y: 8px !default;
|
||||
$selectize-padding-item-x: 6px !default;
|
||||
$selectize-padding-item-y: 2px !default;
|
||||
$selectize-padding-dropdown-item-x: $selectize-padding-x !default;
|
||||
$selectize-padding-dropdown-item-y: 5px !default;
|
||||
$selectize-margin-item-x: 3px !default;
|
||||
$selectize-margin-item-y: 3px !default;
|
||||
$select-arrow-size: 5px !default;
|
||||
$select-arrow-color: #808080 !default;
|
||||
$select-arrow-offset: 15px !default;
|
||||
|
||||
$selectize-arrow-size: 5px !default;
|
||||
$selectize-arrow-color: #808080 !default;
|
||||
$selectize-arrow-offset: 15px !default;
|
||||
$select-caret-margin: 0 0px !default;
|
||||
$select-caret-margin-rtl: 0 4px 0 -2px !default;
|
||||
|
||||
$selectize-caret-margin: 0 2px 0 0 !default;
|
||||
$selectize-caret-margin-rtl: 0 4px 0 -2px !default;
|
||||
$select-spinner-size: 30px;
|
||||
$select-spinner-border-size: 5px;
|
||||
$select-spinner-border-color: $select-color-border;
|
||||
|
||||
@mixin selectize-border-radius($radii){
|
||||
@if mixin-exists("border-radius") {
|
||||
@include border-radius($radii)
|
||||
} @else {
|
||||
border-radius: $radii;
|
||||
}
|
||||
}
|
||||
@mixin selectize-unselectable(){
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
@mixin selectize-box-shadow($shadow){
|
||||
-webkit-box-shadow: $shadow;
|
||||
box-shadow: $shadow;
|
||||
}
|
||||
@mixin selectize-box-sizing($type: border-box){
|
||||
-webkit-box-sizing: $type;
|
||||
-moz-box-sizing: $type;
|
||||
box-sizing: $type;
|
||||
}
|
||||
@mixin selectize-vertical-gradient($color-top, $color-bottom){
|
||||
@mixin selectize-vertical-gradient($color-top, $color-bottom) {
|
||||
background-color: mix($color-top, $color-bottom, 60%);
|
||||
background-image: -moz-linear-gradient(top, $color-top, $color-bottom); // FF 3.6+
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from($color-top), to($color-bottom)); // Safari 4+, Chrome 2+
|
||||
background-image: -webkit-linear-gradient(top, $color-top, $color-bottom); // Safari 5.1+, Chrome 10+
|
||||
background-image: -o-linear-gradient(top, $color-top, $color-bottom); // Opera 11.10
|
||||
background-image: linear-gradient(to bottom, $color-top, $color-bottom); // Standard, IE10
|
||||
background-image: linear-gradient(to bottom, $color-top, $color-bottom);
|
||||
background-repeat: repeat-x;
|
||||
//filter: e(%("progid:DXImageTransform.Microsoft@include gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb($color-top),argb($color-bottom))); // IE9 and down
|
||||
}
|
||||
|
||||
.selectize-control {
|
||||
@import "../plugins/drag_drop/plugin.scss";
|
||||
@import "../plugins/dropdown_header/plugin.scss";
|
||||
@import "../plugins/optgroup_columns/plugin.scss";
|
||||
@import "../plugins/remove_button/plugin.scss";
|
||||
|
||||
.#{$selectize}-control {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.selectize-dropdown, .selectize-input, .selectize-input input {
|
||||
color: $selectize-color-text;
|
||||
font-family: $selectize-font-family;
|
||||
font-size: $selectize-font-size;
|
||||
line-height: $selectize-line-height;
|
||||
-webkit-font-smoothing: $selectize-font-smoothing;
|
||||
.#{$selectize}-dropdown,
|
||||
.#{$selectize}-input,
|
||||
.#{$selectize}-input input {
|
||||
color: $select-color-text;
|
||||
font-family: $select-font-family;
|
||||
font-size: $select-font-size;
|
||||
line-height: $select-line-height;
|
||||
font-smoothing: $select-font-smoothing;
|
||||
}
|
||||
|
||||
.selectize-input, .selectize-control.single .selectize-input.input-active {
|
||||
background: $selectize-color-input;
|
||||
.#{$selectize}-input,
|
||||
.#{$selectize}-control.single .#{$selectize}-input.input-active {
|
||||
background: $select-color-input;
|
||||
cursor: text;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.selectize-input {
|
||||
border: $selectize-border;
|
||||
padding: $selectize-padding-y $selectize-padding-x;
|
||||
.#{$selectize}-input {
|
||||
border: $select-border;
|
||||
padding: $select-padding-y $select-padding-x;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
@include selectize-box-sizing(border-box);
|
||||
@include selectize-box-shadow($selectize-shadow-input);
|
||||
@include selectize-border-radius($selectize-border-radius);
|
||||
box-sizing: border-box;
|
||||
box-shadow: $select-shadow-input;
|
||||
border-radius: $select-border-radius;
|
||||
|
||||
.selectize-control.multi &.has-items {
|
||||
$padding-x: $selectize-padding-x;
|
||||
$padding-top: calc(#{$selectize-padding-y} - #{$selectize-padding-item-y} - #{$selectize-width-item-border});
|
||||
$padding-bottom: calc(#{$selectize-padding-y} - #{$selectize-padding-item-y} - #{$selectize-margin-item-y} - #{$selectize-width-item-border});
|
||||
padding: $padding-top $padding-x $padding-bottom;
|
||||
.#{$selectize}-control.multi &.has-items {
|
||||
$padding-x: $select-padding-x;
|
||||
$padding-top: calc(
|
||||
#{$select-padding-y} - #{$select-padding-item-y} - #{$select-width-item-border}
|
||||
);
|
||||
$padding-bottom: calc(
|
||||
#{$select-padding-y} - #{$select-padding-item-y} - #{$select-margin-item-y} -
|
||||
#{$select-width-item-border}
|
||||
);
|
||||
padding: $padding-top $padding-x $padding-bottom;
|
||||
}
|
||||
|
||||
&.full {
|
||||
background-color: $selectize-color-input-full;
|
||||
background-color: $select-color-input-full;
|
||||
}
|
||||
&.disabled, &.disabled * {
|
||||
cursor: default !important;
|
||||
&.disabled,
|
||||
&.disabled * {
|
||||
cursor: default !important;
|
||||
}
|
||||
&.focus {
|
||||
@include selectize-box-shadow($selectize-shadow-input-focus);
|
||||
box-shadow: $select-shadow-input-focus;
|
||||
}
|
||||
&.dropdown-active {
|
||||
@include selectize-border-radius($selectize-border-radius $selectize-border-radius 0 0);
|
||||
border-radius: $select-border-radius $select-border-radius 0 0;
|
||||
}
|
||||
|
||||
> * {
|
||||
vertical-align: baseline;
|
||||
display: -moz-inline-stack;
|
||||
display: inline-block;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
vertical-align: baseline;
|
||||
display: inline-block;
|
||||
zoom: 1;
|
||||
}
|
||||
.selectize-control.multi & > div {
|
||||
cursor: pointer;
|
||||
margin: 0 $selectize-margin-item-x $selectize-margin-item-y 0;
|
||||
padding: $selectize-padding-item-y $selectize-padding-item-x;
|
||||
background: $selectize-color-item;
|
||||
color: $selectize-color-item-text;
|
||||
border: $selectize-width-item-border solid $selectize-color-item-border;
|
||||
.#{$selectize}-control.multi & > div {
|
||||
cursor: pointer;
|
||||
margin: 0 $select-margin-item-x $select-margin-item-y 0;
|
||||
padding: $select-padding-item-y $select-padding-item-x;
|
||||
background: $select-color-item;
|
||||
color: $select-color-item-text;
|
||||
border: $select-width-item-border solid $select-color-item-border;
|
||||
|
||||
&.active {
|
||||
background: $selectize-color-item-active;
|
||||
color: $selectize-color-item-active-text;
|
||||
border: $selectize-width-item-border solid $selectize-color-item-active-border;
|
||||
}
|
||||
&.active {
|
||||
background: $select-color-item-active;
|
||||
color: $select-color-item-active-text;
|
||||
border: $select-width-item-border solid $select-color-item-active-border;
|
||||
}
|
||||
}
|
||||
.selectize-control.multi &.disabled > div {
|
||||
&, &.active {
|
||||
color: lighten(desaturate($selectize-color-item-text, 100%), $selectize-lighten-disabled-item-text);
|
||||
background: lighten(desaturate($selectize-color-item, 100%), $selectize-lighten-disabled-item);
|
||||
border: $selectize-width-item-border solid lighten(desaturate($selectize-color-item-border, 100%), $selectize-lighten-disabled-item-border);
|
||||
}
|
||||
.#{$selectize}-control.multi &.disabled > div {
|
||||
&,
|
||||
&.active {
|
||||
color: lighten(
|
||||
desaturate($select-color-item-text, 100%),
|
||||
$select-lighten-disabled-item-text
|
||||
);
|
||||
background: lighten(
|
||||
desaturate($select-color-item, 100%),
|
||||
$select-lighten-disabled-item
|
||||
);
|
||||
border: $select-width-item-border solid
|
||||
lighten(
|
||||
desaturate($select-color-item-border, 100%),
|
||||
$select-lighten-disabled-item-border
|
||||
);
|
||||
}
|
||||
}
|
||||
> input {
|
||||
&::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
display: inline-block !important;
|
||||
padding: 0 !important;
|
||||
min-height: 0 !important;
|
||||
max-height: none !important;
|
||||
max-width: 100% !important;
|
||||
margin: $selectize-caret-margin !important;
|
||||
text-indent: 0 !important;
|
||||
border: 0 none !important;
|
||||
background: none !important;
|
||||
line-height: inherit !important;
|
||||
-webkit-user-select: auto !important;
|
||||
@include selectize-box-shadow(none);
|
||||
&:focus { outline: none !important; }
|
||||
&::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
display: inline-block !important;
|
||||
padding: 0 !important;
|
||||
min-height: 0 !important;
|
||||
max-height: none !important;
|
||||
max-width: 100% !important;
|
||||
margin: 0 !important;
|
||||
text-indent: 0 !important;
|
||||
border: 0 none !important;
|
||||
background: none !important;
|
||||
line-height: inherit !important;
|
||||
user-select: auto !important;
|
||||
box-shadow: none !important;
|
||||
&:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
&[placeholder] {
|
||||
box-sizing: initial;
|
||||
}
|
||||
}
|
||||
&.has-items > input {
|
||||
margin: $select-caret-margin !important;
|
||||
}
|
||||
}
|
||||
|
||||
.selectize-input::after {
|
||||
content: ' ';
|
||||
.#{$selectize}-input::after {
|
||||
content: " ";
|
||||
display: block;
|
||||
clear: left;
|
||||
}
|
||||
|
||||
.selectize-input.dropdown-active::before {
|
||||
content: ' ';
|
||||
.#{$selectize}-input.dropdown-active::before {
|
||||
content: " ";
|
||||
display: block;
|
||||
position: absolute;
|
||||
background: $selectize-color-dropdown-border-top;
|
||||
background: $select-color-dropdown-border-top;
|
||||
height: 1px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.selectize-dropdown {
|
||||
.#{$selectize}-dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
border: $selectize-dropdown-border;
|
||||
background: $selectize-color-dropdown;
|
||||
|
||||
border: $select-dropdown-border;
|
||||
background: $select-color-dropdown;
|
||||
margin: -1px 0 0 0;
|
||||
border-top: 0 none;
|
||||
@include selectize-box-sizing(border-box);
|
||||
@include selectize-box-shadow(0 1px 3px rgba(0,0,0,0.1));
|
||||
@include selectize-border-radius(0 0 $selectize-border-radius $selectize-border-radius);
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 0 0 $select-border-radius $select-border-radius;
|
||||
|
||||
[data-selectable] {
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
.highlight {
|
||||
background: $selectize-color-highlight;
|
||||
@include selectize-border-radius(1px);
|
||||
}
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
.highlight {
|
||||
background: $select-color-highlight;
|
||||
border-radius: 1px;
|
||||
}
|
||||
}
|
||||
.option, .optgroup-header {
|
||||
padding: $selectize-padding-dropdown-item-y $selectize-padding-dropdown-item-x;
|
||||
.option,
|
||||
.optgroup-header,
|
||||
.no-results,
|
||||
.create {
|
||||
padding: $select-padding-dropdown-item-y $select-padding-dropdown-item-x;
|
||||
}
|
||||
.option, [data-disabled], [data-disabled] [data-selectable].option {
|
||||
cursor: inherit;
|
||||
opacity: 0.5;
|
||||
.option,
|
||||
[data-disabled],
|
||||
[data-disabled] [data-selectable].option {
|
||||
cursor: inherit;
|
||||
opacity: 0.5;
|
||||
}
|
||||
[data-selectable].option {
|
||||
opacity: 1;
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
.optgroup:first-child .optgroup-header {
|
||||
border-top: 0 none;
|
||||
border-top: 0 none;
|
||||
}
|
||||
.optgroup-header {
|
||||
color: $selectize-color-optgroup-text;
|
||||
background: $selectize-color-optgroup;
|
||||
cursor: default;
|
||||
color: $select-color-optgroup-text;
|
||||
background: $select-color-optgroup;
|
||||
cursor: default;
|
||||
}
|
||||
.active {
|
||||
background-color: $selectize-color-dropdown-item-active;
|
||||
color: $selectize-color-dropdown-item-active-text;
|
||||
&.create {
|
||||
color: $selectize-color-dropdown-item-create-active-text;
|
||||
}
|
||||
background-color: $select-color-dropdown-item-active;
|
||||
color: $select-color-dropdown-item-active-text;
|
||||
&.create {
|
||||
color: $select-color-dropdown-item-create-active-text;
|
||||
}
|
||||
}
|
||||
.create {
|
||||
color: $selectize-color-dropdown-item-create-text;
|
||||
color: $select-color-dropdown-item-create-text;
|
||||
}
|
||||
}
|
||||
|
||||
.selectize-dropdown-content {
|
||||
.#{$selectize}-dropdown-content {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
max-height: $selectize-max-height-dropdown;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
max-height: $select-max-height-dropdown;
|
||||
overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.selectize-control.single .selectize-input {
|
||||
&, input { cursor: pointer; }
|
||||
&.input-active, &.input-active input { cursor: text; }
|
||||
.#{$selectize}-dropdown-emptyoptionlabel {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.#{$selectize}-dropdown .spinner {
|
||||
display: inline-block;
|
||||
width: $select-spinner-size;
|
||||
height: $select-spinner-size;
|
||||
margin: $select-padding-dropdown-item-y $select-padding-dropdown-item-x;
|
||||
|
||||
&:after {
|
||||
content: ' ';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: $selectize-arrow-offset;
|
||||
margin-top: round((-1 * $selectize-arrow-size / 2));
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: $selectize-arrow-size $selectize-arrow-size 0 $selectize-arrow-size;
|
||||
border-color: $selectize-arrow-color transparent transparent transparent;
|
||||
content: " ";
|
||||
display: block;
|
||||
width: $select-spinner-size * 0.8;
|
||||
height: $select-spinner-size * 0.8;
|
||||
margin: $select-spinner-size * 0.1;
|
||||
border-radius: 50%;
|
||||
border: $select-spinner-border-size solid $select-spinner-border-color;
|
||||
border-color: $select-spinner-border-color transparent
|
||||
$select-spinner-border-color transparent;
|
||||
animation: lds-dual-ring 1.2s linear infinite;
|
||||
}
|
||||
@keyframes lds-dual-ring {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$selectize}-control.single .#{$selectize}-input {
|
||||
&,
|
||||
input {
|
||||
cursor: pointer;
|
||||
}
|
||||
&.input-active,
|
||||
&.input-active input {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: " ";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: $select-arrow-offset;
|
||||
margin-top: round((-1 * $select-arrow-size / 2));
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: $select-arrow-size $select-arrow-size 0 $select-arrow-size;
|
||||
border-color: $select-arrow-color transparent transparent transparent;
|
||||
}
|
||||
&.dropdown-active:after {
|
||||
margin-top: $selectize-arrow-size * -0.8;
|
||||
border-width: 0 $selectize-arrow-size $selectize-arrow-size $selectize-arrow-size;
|
||||
border-color: transparent transparent $selectize-arrow-color transparent;
|
||||
margin-top: $select-arrow-size * -0.8;
|
||||
border-width: 0 $select-arrow-size $select-arrow-size $select-arrow-size;
|
||||
border-color: transparent transparent $select-arrow-color transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.selectize-control.rtl {
|
||||
&.single .selectize-input:after {
|
||||
left: $selectize-arrow-offset;
|
||||
right: auto;
|
||||
.#{$selectize}-control.rtl {
|
||||
text-align: right;
|
||||
&.single .#{$selectize}-input:after {
|
||||
left: $select-arrow-offset;
|
||||
right: auto;
|
||||
}
|
||||
.selectize-input > input {
|
||||
margin: $selectize-caret-margin-rtl !important;
|
||||
.#{$selectize}-input > input {
|
||||
margin: $select-caret-margin-rtl !important;
|
||||
}
|
||||
}
|
||||
|
||||
.selectize-control .selectize-input.disabled {
|
||||
opacity: $selectize-opacity-disabled;
|
||||
background-color: $selectize-color-disabled;
|
||||
.#{$selectize}-control .#{$selectize}-input.disabled {
|
||||
opacity: $select-opacity-disabled;
|
||||
background-color: $select-color-disabled;
|
||||
}
|
||||
|
||||
@@ -1,91 +1,77 @@
|
||||
diff --git a/inst/www/shared/selectize/scss/selectize.bootstrap3.scss b/inst/www/shared/selectize/scss/selectize.bootstrap3.scss
|
||||
index 81d018a8..88d042db 100644
|
||||
index d29a5ce2..f799385c 100644
|
||||
--- a/inst/www/shared/selectize/scss/selectize.bootstrap3.scss
|
||||
+++ b/inst/www/shared/selectize/scss/selectize.bootstrap3.scss
|
||||
@@ -18,22 +18,23 @@ $selectize-font-family: inherit !default;
|
||||
$selectize-font-size: inherit !default;
|
||||
$selectize-line-height: $line-height-computed !default;
|
||||
|
||||
-$selectize-color-text: $text-color !default;
|
||||
+$selectize-color-text: $input-color !default;
|
||||
$selectize-color-highlight: rgba(255,237,40,0.4) !default;
|
||||
$selectize-color-input: $input-bg !default;
|
||||
$selectize-color-input-full: $input-bg !default;
|
||||
$selectize-color-input-error: $state-danger-text !default;
|
||||
$selectize-color-input-error-focus: darken($selectize-color-input-error, 10%) !default;
|
||||
$selectize-color-disabled: $input-bg !default;
|
||||
-$selectize-color-item: #efefef !default;
|
||||
+$selectize-color-item: mix($selectize-color-input, $selectize-color-text, 90%) !default;
|
||||
$selectize-color-item-border: rgba(black, 0) !default;
|
||||
$selectize-color-item-active: $component-active-bg !default;
|
||||
-$selectize-color-item-active-text: #fff !default;
|
||||
+$selectize-color-item-active-text: $component-active-color !default;
|
||||
$selectize-color-item-active-border: rgba(black, 0) !default;
|
||||
$selectize-color-optgroup: $dropdown-bg !default;
|
||||
$selectize-color-optgroup-text: $dropdown-header-color !default;
|
||||
$selectize-color-optgroup-border: $dropdown-divider-bg !default;
|
||||
$selectize-color-dropdown: $dropdown-bg !default;
|
||||
+$selectize-color-dropdown-text: $dropdown-link-color !default;
|
||||
$selectize-color-dropdown-border-top: mix($input-border, $input-bg, 0.8) !default;
|
||||
$selectize-color-dropdown-item-active: $dropdown-link-hover-bg !default;
|
||||
$selectize-color-dropdown-item-active-text: $dropdown-link-hover-color !default;
|
||||
@@ -63,12 +64,19 @@ $selectize-arrow-offset: $selectize-padding-x + 5px !default;
|
||||
|
||||
@import "selectize";
|
||||
|
||||
+//Import Plugins
|
||||
+@import "plugins/drag_drop";
|
||||
+@import "plugins/dropdown_header";
|
||||
+@import "plugins/optgroup_columns";
|
||||
+@import "plugins/remove_button";
|
||||
+
|
||||
.selectize-dropdown, .selectize-dropdown.form-control {
|
||||
height: auto;
|
||||
padding: 0;
|
||||
margin: 2px 0 0 0;
|
||||
z-index: $zindex-dropdown;
|
||||
background: $selectize-color-dropdown;
|
||||
+ color: $selectize-color-dropdown-text;
|
||||
border: 1px solid $dropdown-fallback-border;
|
||||
border: 1px solid $dropdown-border;
|
||||
@include selectize-border-radius ($border-radius-base);
|
||||
diff --git a/inst/www/shared/selectize/scss/selectize.bootstrap4.scss b/inst/www/shared/selectize/scss/selectize.bootstrap4.scss
|
||||
index 5eca2f3d..c8502847 100644
|
||||
--- a/inst/www/shared/selectize/scss/selectize.bootstrap4.scss
|
||||
+++ b/inst/www/shared/selectize/scss/selectize.bootstrap4.scss
|
||||
@@ -9,22 +9,23 @@ $selectize-font-family: inherit !default;
|
||||
$selectize-font-size: inherit !default;
|
||||
$selectize-line-height: $input-btn-line-height !default; //formerly line-height-computed
|
||||
|
||||
-$selectize-color-text: gray("800") !default; //$gray-800
|
||||
+$selectize-color-text: $input-color !default;
|
||||
$selectize-color-highlight: rgba(255,237,40,0.4) !default;
|
||||
$selectize-color-input: $input-bg !default;
|
||||
$selectize-color-input-full: $input-bg !default;
|
||||
$selectize-color-input-error: theme-color("danger") !default;
|
||||
$selectize-color-input-error-focus: darken($selectize-color-input-error, 10%) !default;
|
||||
$selectize-color-disabled: $input-bg !default;
|
||||
-$selectize-color-item: #efefef !default;
|
||||
-$selectize-color-item-border: #999 !default;
|
||||
+$selectize-color-item: mix($selectize-color-input, $selectize-color-text, 90%) !default;
|
||||
+$selectize-color-item-border: $input-border-color !default;
|
||||
$selectize-color-item-active: $component-active-bg !default;
|
||||
-$selectize-color-item-active-text: #fff !default;
|
||||
+$selectize-color-item-active-text: $component-active-color !default;
|
||||
$selectize-color-item-active-border: rgba(0,0,0,0) !default;
|
||||
$selectize-color-optgroup: $dropdown-bg !default;
|
||||
$selectize-color-optgroup-text: $dropdown-header-color !default;
|
||||
$selectize-color-optgroup-border: $dropdown-divider-bg !default;
|
||||
$selectize-color-dropdown: $dropdown-bg !default;
|
||||
+$selectize-color-dropdown-text: $dropdown-link-color !default;
|
||||
$selectize-color-dropdown-border-top: mix($input-border-color, $input-bg, 0.8) !default;
|
||||
$selectize-color-dropdown-item-active: $dropdown-link-hover-bg !default;
|
||||
$selectize-color-dropdown-item-active-text: $dropdown-link-hover-color !default;
|
||||
@@ -67,6 +68,7 @@ $selectize-arrow-offset: calc(#{$selectize-padding-x} + 5px) !default;
|
||||
@@ -3,22 +3,23 @@ $select-font-family: inherit;
|
||||
$select-font-size: inherit;
|
||||
$select-line-height: $line-height-computed;
|
||||
|
||||
-$select-color-text: $text-color;
|
||||
+$select-color-text: $input-color;
|
||||
$select-color-highlight: rgba(255, 237, 40, 0.4);
|
||||
$select-color-input: $input-bg;
|
||||
$select-color-input-full: $input-bg;
|
||||
$select-color-input-error: $state-danger-text;
|
||||
$select-color-input-error-focus: darken($select-color-input-error, 10%);
|
||||
$select-color-disabled: $input-bg;
|
||||
-$select-color-item: #efefef;
|
||||
+$select-color-item: mix($select-color-input, $select-color-text, 90%);
|
||||
$select-color-item-border: rgba(0, 0, 0, 0);
|
||||
$select-color-item-active: $component-active-bg;
|
||||
-$select-color-item-active-text: #fff;
|
||||
+$select-color-item-active-text: color-contrast($select-color-item-active);
|
||||
$select-color-item-active-border: rgba(0, 0, 0, 0);
|
||||
$select-color-optgroup: $dropdown-bg;
|
||||
$select-color-optgroup-text: $dropdown-header-color;
|
||||
$select-color-optgroup-border: $dropdown-divider-bg;
|
||||
$select-color-dropdown: $dropdown-bg;
|
||||
+$select-color-dropdown-text: $dropdown-link-color;
|
||||
$select-color-dropdown-border-top: mix($input-border, $input-bg, 0.8);
|
||||
$select-color-dropdown-item-active: $dropdown-link-hover-bg;
|
||||
$select-color-dropdown-item-active-text: $dropdown-link-hover-color;
|
||||
@@ -55,6 +56,7 @@ $select-arrow-offset: $select-padding-x + 5px;
|
||||
margin: 2px 0 0 0;
|
||||
z-index: $zindex-dropdown;
|
||||
background: $selectize-color-dropdown;
|
||||
+ color: $selectize-color-dropdown-text;
|
||||
background: $select-color-dropdown;
|
||||
+ color: $select-color-dropdown-text;
|
||||
border: 1px solid $dropdown-fallback-border;
|
||||
border: 1px solid $dropdown-border;
|
||||
border-radius: $border-radius-base;
|
||||
diff --git a/inst/www/shared/selectize/scss/selectize.bootstrap4.scss b/inst/www/shared/selectize/scss/selectize.bootstrap4.scss
|
||||
index d4fc400a..9505e3fa 100644
|
||||
--- a/inst/www/shared/selectize/scss/selectize.bootstrap4.scss
|
||||
+++ b/inst/www/shared/selectize/scss/selectize.bootstrap4.scss
|
||||
@@ -4,7 +4,7 @@ $select-font-family: inherit !default;
|
||||
$select-font-size: inherit !default;
|
||||
$select-line-height: $input-btn-line-height !default; //formerly line-height-computed
|
||||
|
||||
-$select-color-text: gray("800") !default; //$gray-800
|
||||
+$select-color-text: $input-color !default; //$gray-800
|
||||
$select-color-highlight: rgba(255, 237, 40, 0.4) !default;
|
||||
$select-color-input: $input-bg !default;
|
||||
$select-color-input-full: $input-bg !default;
|
||||
@@ -14,12 +14,13 @@ $select-color-input-error-focus: darken(
|
||||
10%
|
||||
) !default;
|
||||
$select-color-disabled: $input-bg !default;
|
||||
-$select-color-item: #efefef !default;
|
||||
-$select-color-item-border: $border-color !default;
|
||||
+$select-color-item: mix($select-color-input, $select-color-text, 90%) !default;
|
||||
+$select-color-item-border: $input-border-color !default;
|
||||
$select-color-item-active: $component-active-bg !default;
|
||||
-$select-color-item-active-text: #fff !default;
|
||||
+$select-color-item-active-text: color-contrast($select-color-item-active) !default;
|
||||
$select-color-item-active-border: rgba(0, 0, 0, 0) !default;
|
||||
$select-color-optgroup: $dropdown-bg !default;
|
||||
+$select-color-dropdown-text: $dropdown-link-color !default;
|
||||
$select-color-optgroup-text: $dropdown-header-color !default;
|
||||
$select-color-optgroup-border: $dropdown-divider-bg !default;
|
||||
$select-color-dropdown: $dropdown-bg !default;
|
||||
@@ -63,6 +64,7 @@ $select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
|
||||
margin: 2px 0 0 0;
|
||||
z-index: $zindex-dropdown;
|
||||
background: $select-color-dropdown;
|
||||
+ color: $select-color-dropdown-text;
|
||||
border: 1px solid $dropdown-border-color; //$dropdown-fallback-border
|
||||
@include selectize-border-radius($border-radius);
|
||||
@include selectize-box-shadow(0 6px 12px rgba(0,0,0,.175));
|
||||
border-radius: $border-radius;
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
||||
|
||||
@@ -1,19 +0,0 @@
|
||||
diff --git a/inst/www/shared/selectize/scss/selectize.scss b/inst/www/shared/selectize/scss/selectize.scss
|
||||
index 240e3895..c20f529c 100644
|
||||
--- a/inst/www/shared/selectize/scss/selectize.scss
|
||||
+++ b/inst/www/shared/selectize/scss/selectize.scss
|
||||
@@ -57,9 +57,11 @@ $selectize-caret-margin: 0 2px 0 0 !default;
|
||||
$selectize-caret-margin-rtl: 0 4px 0 -2px !default;
|
||||
|
||||
@mixin selectize-border-radius($radii){
|
||||
- -webkit-border-radius: $radii;
|
||||
- -moz-border-radius: $radii;
|
||||
- border-radius: $radii;
|
||||
+ @if mixin-exists("border-radius") {
|
||||
+ @include border-radius($radii)
|
||||
+ } @else {
|
||||
+ border-radius: $radii;
|
||||
+ }
|
||||
}
|
||||
@mixin selectize-unselectable(){
|
||||
-webkit-user-select: none;
|
||||
@@ -1,26 +0,0 @@
|
||||
diff --git a/inst/www/shared/selectize/scss/selectize.bootstrap3.scss b/inst/www/shared/selectize/scss/selectize.bootstrap3.scss
|
||||
index 9f6c0398..2eb30361 100644
|
||||
--- a/inst/www/shared/selectize/scss/selectize.bootstrap3.scss
|
||||
+++ b/inst/www/shared/selectize/scss/selectize.bootstrap3.scss
|
||||
@@ -28,7 +28,7 @@ $selectize-color-disabled: $input-bg !default;
|
||||
$selectize-color-item: mix($selectize-color-input, $selectize-color-text, 90%) !default;
|
||||
$selectize-color-item-border: rgba(black, 0) !default;
|
||||
$selectize-color-item-active: $component-active-bg !default;
|
||||
-$selectize-color-item-active-text: $component-active-color !default;
|
||||
+$selectize-color-item-active-text: color-contrast($selectize-color-item-active) !default;
|
||||
$selectize-color-item-active-border: rgba(black, 0) !default;
|
||||
$selectize-color-optgroup: $dropdown-bg !default;
|
||||
$selectize-color-optgroup-text: $dropdown-header-color !default;
|
||||
diff --git a/inst/www/shared/selectize/scss/selectize.bootstrap4.scss b/inst/www/shared/selectize/scss/selectize.bootstrap4.scss
|
||||
index 44dae201..689b38ef 100644
|
||||
--- a/inst/www/shared/selectize/scss/selectize.bootstrap4.scss
|
||||
+++ b/inst/www/shared/selectize/scss/selectize.bootstrap4.scss
|
||||
@@ -19,7 +19,7 @@ $selectize-color-disabled: $input-bg !default;
|
||||
$selectize-color-item: mix($selectize-color-input, $selectize-color-text, 90%) !default;
|
||||
$selectize-color-item-border: $input-border-color !default;
|
||||
$selectize-color-item-active: $component-active-bg !default;
|
||||
-$selectize-color-item-active-text: $component-active-color !default;
|
||||
+$selectize-color-item-active-text: color-contrast($selectize-color-item-active) !default;
|
||||
$selectize-color-item-active-border: rgba(0,0,0,0) !default;
|
||||
$selectize-color-optgroup: $dropdown-bg !default;
|
||||
$selectize-color-optgroup-text: $dropdown-header-color !default;
|
||||
13
tools/selectize-patches/004-bs5-dropped-theme-color.patch
Normal file
13
tools/selectize-patches/004-bs5-dropped-theme-color.patch
Normal file
@@ -0,0 +1,13 @@
|
||||
diff --git a/inst/www/shared/selectize/scss/selectize.bootstrap4.scss b/inst/www/shared/selectize/scss/selectize.bootstrap4.scss
|
||||
index 41d635b1..ae97fea4 100644
|
||||
--- a/inst/www/shared/selectize/scss/selectize.bootstrap4.scss
|
||||
+++ b/inst/www/shared/selectize/scss/selectize.bootstrap4.scss
|
||||
@@ -8,7 +8,7 @@ $select-color-text: $input-color !default; //$gray-800
|
||||
$select-color-highlight: rgba(255, 237, 40, 0.4) !default;
|
||||
$select-color-input: $input-bg !default;
|
||||
$select-color-input-full: $input-bg !default;
|
||||
-$select-color-input-error: theme-color("danger") !default;
|
||||
+$select-color-input-error: $danger !default;
|
||||
$select-color-input-error-focus: darken(
|
||||
$select-color-input-error,
|
||||
10%
|
||||
@@ -1,35 +1,70 @@
|
||||
#!/usr/bin/env Rscript
|
||||
library(rprojroot)
|
||||
library(withr)
|
||||
library(brio)
|
||||
|
||||
## -----------------------------------------------------------------
|
||||
## First, download the main selectize.js and css
|
||||
## -----------------------------------------------------------------
|
||||
|
||||
version <- "0.12.4"
|
||||
dest_dir <- find_package_root_file("inst/www/shared/selectize")
|
||||
tag <- paste0("v", version)
|
||||
dest_file <- file.path(tempdir(), paste0("selectize.js-", version, ".zip"))
|
||||
url <- sprintf("https://github.com/selectize/selectize.js/archive/%s.zip", tag)
|
||||
version <- "efcd689fc1590bc085aee728bcda71373f6bd0ff"
|
||||
url <- sprintf("https://github.com/selectize/selectize.js/archive/%s.zip", version)
|
||||
zip <- file.path(tempdir(), paste0("selectize.js-", version, ".zip"))
|
||||
|
||||
download.file(url, dest_file)
|
||||
unzipped <- tempdir()
|
||||
unzip(dest_file, exdir = unzipped)
|
||||
download.file(url, zip)
|
||||
unzip(zip, exdir = tempdir())
|
||||
|
||||
unlink(dest_dir, recursive = TRUE)
|
||||
target <- find_package_root_file("inst/www/shared/selectize")
|
||||
unlink(target, recursive = TRUE)
|
||||
dir.create(target, recursive = TRUE)
|
||||
|
||||
dir.create(file.path(dest_dir, "js"), recursive = TRUE)
|
||||
file.copy(
|
||||
file.path(unzipped, paste0("selectize.js-", version), "dist", "js", "standalone", "selectize.min.js"),
|
||||
file.path(dest_dir, "js"),
|
||||
overwrite = TRUE
|
||||
with_dir(target, {
|
||||
lapply(c("js", "css", "scss", "plugins"), dir.create)
|
||||
})
|
||||
|
||||
with_dir(tempdir(), {
|
||||
root <- paste0("selectize.js-", version)
|
||||
file.copy(
|
||||
file.path(root, "dist", "js", "standalone", "selectize.min.js"),
|
||||
file.path(target, "js")
|
||||
)
|
||||
file.copy(
|
||||
file.path(root, "dist", "css", "selectize.bootstrap3.css"),
|
||||
file.path(target, "css")
|
||||
)
|
||||
file.copy(
|
||||
file.path(root, "src", "scss"),
|
||||
target, recursive = TRUE
|
||||
)
|
||||
plugin_scss <- dir(
|
||||
file.path(root, "src", "plugins"), pattern = "\\.scss$", recursive = TRUE
|
||||
)
|
||||
lapply(file.path(target, "plugins", dirname(plugin_scss)), dir.create)
|
||||
file.copy(
|
||||
file.path(root, "src", "plugins", plugin_scss),
|
||||
file.path(target, "plugins", plugin_scss)
|
||||
)
|
||||
})
|
||||
|
||||
# Remove all Sass imports of Bootstrap since we handle that via bslib
|
||||
sass_files <- dir(target, pattern = "\\.scss$", recursive = TRUE, full.names = TRUE)
|
||||
invisible(lapply(sass_files, function(f) {
|
||||
src <- readLines(f)
|
||||
src <- src[!grepl("@import .*/node_modules/bootstrap", src)]
|
||||
writeLines(src, f)
|
||||
}))
|
||||
|
||||
|
||||
# Add rudimentary Bootstrap 5 support
|
||||
# https://github.com/selectize/selectize.js/issues/1584
|
||||
writeLines(c(
|
||||
"$input-line-height-sm: $form-select-line-height !default;",
|
||||
"@import 'selectize.bootstrap4';",
|
||||
".selectize-control{padding:0;}"
|
||||
),
|
||||
file.path(target, "scss", "selectize.bootstrap5.scss")
|
||||
)
|
||||
|
||||
dir.create(file.path(dest_dir, "css"), recursive = TRUE)
|
||||
file.copy(
|
||||
file.path(unzipped, paste0("selectize.js-", version), "dist", "css", "selectize.bootstrap3.css"),
|
||||
file.path(dest_dir, "css"),
|
||||
overwrite = TRUE
|
||||
)
|
||||
|
||||
## -----------------------------------------------------------------
|
||||
## Second, download accessibility plugin
|
||||
@@ -37,64 +72,21 @@ file.copy(
|
||||
|
||||
version <- "927d81e9ea86acac1724d57b2ce9f3c962fd34c4"
|
||||
url <- sprintf("https://github.com/SLMNBJ/selectize-plugin-a11y/archive/%s.zip", version)
|
||||
dest_file <- file.path(tempdir(), paste0("selectize-plugin-a11y-", version, ".zip"))
|
||||
download.file(url, dest_file)
|
||||
zip <- file.path(tempdir(), paste0("selectize-plugin-a11y-", version, ".zip"))
|
||||
|
||||
unzipped <- tempdir()
|
||||
unzip(dest_file, exdir = unzipped)
|
||||
download.file(url, zip)
|
||||
unzip(zip, exdir = tempdir())
|
||||
|
||||
dir.create(file.path(dest_dir, "accessibility", "js"), recursive = TRUE)
|
||||
file.copy(
|
||||
file.path(unzipped, paste0("selectize-plugin-a11y-", version), "selectize-plugin-a11y.js"),
|
||||
file.path(dest_dir, "accessibility", "js"),
|
||||
overwrite = TRUE
|
||||
)
|
||||
|
||||
tmpdir <- tempdir()
|
||||
|
||||
## -----------------------------------------------------------------
|
||||
## Third, download Bootstrap 4 SASS port of selectize less
|
||||
## This is using a specific sha because this hasn't been included in an official release
|
||||
## https://github.com/papakay/selectize-bootstrap-4-style/pull/19
|
||||
## -----------------------------------------------------------------
|
||||
|
||||
version <- "5013be4e97a14bef47bc8badcc78e6762815ef38"
|
||||
zip_src <- sprintf("https://github.com/papakay/selectize-bootstrap-4-style/archive/%s.zip", version)
|
||||
zip_target <- file.path(tmpdir, "select-bs4.zip")
|
||||
download.file(zip_src, zip_target)
|
||||
unzip(zip_target, exdir = dirname(zip_target))
|
||||
target <- "inst/www/shared/selectize/scss"
|
||||
unlink(target, recursive = TRUE)
|
||||
dir.create(target)
|
||||
file.rename(
|
||||
file.path(tmpdir, sprintf("selectize-bootstrap-4-style-%s/src/selectize", version)),
|
||||
target
|
||||
)
|
||||
|
||||
# Remove the unnecessary imports of Bootstrap
|
||||
scss_file <- "inst/www/shared/selectize/scss/selectize.bootstrap4.scss"
|
||||
scss <- readLines(scss_file)
|
||||
scss <- scss[!grepl('@import\\s+"\\.\\./bootstrap', scss)]
|
||||
writeLines(scss, scss_file)
|
||||
|
||||
## -----------------------------------------------------------------
|
||||
## Fourth, download Bootstrap 3 SASS port
|
||||
## https://github.com/herschel666/selectize-scss
|
||||
## Note that the base selectize.scss, as well as the plugins, are identical
|
||||
## to the BS4 port, so we only need the selectize.bootstrap3.scss file
|
||||
## -----------------------------------------------------------------
|
||||
|
||||
version <- "0.10.1"
|
||||
zip_src <- sprintf("https://github.com/herschel666/selectize-scss/archive/v%s.zip", version)
|
||||
zip_target <- file.path(tmpdir, "select-bs3.zip")
|
||||
download.file(zip_src, zip_target)
|
||||
unzip(zip_target, exdir = dirname(zip_target))
|
||||
target <- "inst/www/shared/selectize/scss/selectize.bootstrap3.scss"
|
||||
file.rename(
|
||||
file.path(tmpdir, sprintf("selectize-scss-%s/src/selectize.bootstrap3.scss", version)),
|
||||
target
|
||||
)
|
||||
with_dir(target, {
|
||||
dir.create("accessibility/js", recursive = TRUE)
|
||||
})
|
||||
|
||||
with_dir(tempdir(), {
|
||||
file.copy(
|
||||
file.path(paste0("selectize-plugin-a11y-", version), "selectize-plugin-a11y.js"),
|
||||
file.path(target, "accessibility/js")
|
||||
)
|
||||
})
|
||||
|
||||
# =============================================================================
|
||||
# Apply patches
|
||||
@@ -109,9 +101,21 @@ for (patch in list.files(patch_dir, full.names = TRUE)) {
|
||||
tryCatch(
|
||||
{
|
||||
message(sprintf("Applying %s", basename(patch)))
|
||||
withr::with_dir(find_package_root_file(), system(sprintf("git apply %s", patch)))
|
||||
rej_pre <- dir(pattern = "\\.rej$", recursive = TRUE)
|
||||
system(sprintf("git apply --reject --whitespace=fix '%s'", patch))
|
||||
rej_post <- dir(pattern = "\\.rej$", recursive = TRUE)
|
||||
if (length(rej_post) > length(rej_pre)) {
|
||||
stop(
|
||||
"Running `git apply --reject` generated `.rej` files.\n",
|
||||
"Please fix the relevant conflicts inside ", patch, "\n",
|
||||
"An 'easy' way to do this is to first `git add` the new source changes, ",
|
||||
"then manually make the relevant changes from the patch file,",
|
||||
"then `git diff` to get the relevant diff output and update the patch diff with the new diff."
|
||||
)
|
||||
}
|
||||
},
|
||||
error = function(e) {
|
||||
stop(conditionMessage(e))
|
||||
quit(save = "no", status = 1)
|
||||
}
|
||||
)
|
||||
@@ -120,4 +124,4 @@ for (patch in list.files(patch_dir, full.names = TRUE)) {
|
||||
# =============================================================================
|
||||
# Generate minified js
|
||||
# =============================================================================
|
||||
withr::with_dir(find_package_root_file("tools"), system("yarn grunt"))
|
||||
withr::with_dir(find_package_root_file("srcts"), system("yarn build"))
|
||||
|
||||
Reference in New Issue
Block a user