tom-select-rails 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/LICENSE.txt +21 -0
- data/README.md +26 -0
- data/Rakefile +3 -0
- data/lib/tom-select-rails/engine.rb +8 -0
- data/lib/tom-select-rails/version.rb +5 -0
- data/lib/tom-select-rails.rb +7 -0
- data/vendor/assets/javascripts/tom-select-rails/cjs/tom-select.complete.js +4887 -0
- data/vendor/assets/javascripts/tom-select-rails/cjs/tom-select.complete.js.map +1 -0
- data/vendor/assets/javascripts/tom-select-rails/cjs/tom-select.js +4085 -0
- data/vendor/assets/javascripts/tom-select-rails/cjs/tom-select.js.map +1 -0
- data/vendor/assets/javascripts/tom-select-rails/cjs/tom-select.popular.js +4337 -0
- data/vendor/assets/javascripts/tom-select-rails/cjs/tom-select.popular.js.map +1 -0
- data/vendor/assets/javascripts/tom-select-rails/cjs/utils.js +196 -0
- data/vendor/assets/javascripts/tom-select-rails/cjs/utils.js.map +1 -0
- data/vendor/assets/javascripts/tom-select-rails/esm/plugins/caret_position/plugin.js +162 -0
- data/vendor/assets/javascripts/tom-select-rails/esm/plugins/caret_position/plugin.js.map +1 -0
- data/vendor/assets/javascripts/tom-select-rails/esm/plugins/change_listener/plugin.js +50 -0
- data/vendor/assets/javascripts/tom-select-rails/esm/plugins/change_listener/plugin.js.map +1 -0
- data/vendor/assets/javascripts/tom-select-rails/esm/plugins/checkbox_options/plugin.js +172 -0
- data/vendor/assets/javascripts/tom-select-rails/esm/plugins/checkbox_options/plugin.js.map +1 -0
- data/vendor/assets/javascripts/tom-select-rails/esm/plugins/clear_button/plugin.js +91 -0
- data/vendor/assets/javascripts/tom-select-rails/esm/plugins/clear_button/plugin.js.map +1 -0
- data/vendor/assets/javascripts/tom-select-rails/esm/plugins/drag_drop/plugin.js +62 -0
- data/vendor/assets/javascripts/tom-select-rails/esm/plugins/drag_drop/plugin.js.map +1 -0
- data/vendor/assets/javascripts/tom-select-rails/esm/plugins/dropdown_header/plugin.js +118 -0
- data/vendor/assets/javascripts/tom-select-rails/esm/plugins/dropdown_header/plugin.js.map +1 -0
- data/vendor/assets/javascripts/tom-select-rails/esm/plugins/dropdown_input/plugin.js +230 -0
- data/vendor/assets/javascripts/tom-select-rails/esm/plugins/dropdown_input/plugin.js.map +1 -0
- data/vendor/assets/javascripts/tom-select-rails/esm/plugins/input_autogrow/plugin.js +80 -0
- data/vendor/assets/javascripts/tom-select-rails/esm/plugins/input_autogrow/plugin.js.map +1 -0
- data/vendor/assets/javascripts/tom-select-rails/esm/plugins/no_active_items/plugin.js +25 -0
- data/vendor/assets/javascripts/tom-select-rails/esm/plugins/no_active_items/plugin.js.map +1 -0
- data/vendor/assets/javascripts/tom-select-rails/esm/plugins/no_backspace_delete/plugin.js +32 -0
- data/vendor/assets/javascripts/tom-select-rails/esm/plugins/no_backspace_delete/plugin.js.map +1 -0
- data/vendor/assets/javascripts/tom-select-rails/esm/plugins/optgroup_columns/plugin.js +108 -0
- data/vendor/assets/javascripts/tom-select-rails/esm/plugins/optgroup_columns/plugin.js.map +1 -0
- data/vendor/assets/javascripts/tom-select-rails/esm/plugins/remove_button/plugin.js +146 -0
- data/vendor/assets/javascripts/tom-select-rails/esm/plugins/remove_button/plugin.js.map +1 -0
- data/vendor/assets/javascripts/tom-select-rails/esm/plugins/restore_on_backspace/plugin.js +43 -0
- data/vendor/assets/javascripts/tom-select-rails/esm/plugins/restore_on_backspace/plugin.js.map +1 -0
- data/vendor/assets/javascripts/tom-select-rails/esm/plugins/virtual_scroll/plugin.js +261 -0
- data/vendor/assets/javascripts/tom-select-rails/esm/plugins/virtual_scroll/plugin.js.map +1 -0
- data/vendor/assets/javascripts/tom-select-rails/esm/tom-select.complete.js +4885 -0
- data/vendor/assets/javascripts/tom-select-rails/esm/tom-select.complete.js.map +1 -0
- data/vendor/assets/javascripts/tom-select-rails/esm/tom-select.js +4083 -0
- data/vendor/assets/javascripts/tom-select-rails/esm/tom-select.js.map +1 -0
- data/vendor/assets/javascripts/tom-select-rails/esm/tom-select.popular.js +4335 -0
- data/vendor/assets/javascripts/tom-select-rails/esm/tom-select.popular.js.map +1 -0
- data/vendor/assets/javascripts/tom-select-rails/esm/utils.js +181 -0
- data/vendor/assets/javascripts/tom-select-rails/esm/utils.js.map +1 -0
- data/vendor/assets/javascripts/tom-select-rails/js/plugins/caret_position.js +170 -0
- data/vendor/assets/javascripts/tom-select-rails/js/plugins/caret_position.js.map +1 -0
- data/vendor/assets/javascripts/tom-select-rails/js/plugins/change_listener.js +58 -0
- data/vendor/assets/javascripts/tom-select-rails/js/plugins/change_listener.js.map +1 -0
- data/vendor/assets/javascripts/tom-select-rails/js/plugins/checkbox_options.js +180 -0
- data/vendor/assets/javascripts/tom-select-rails/js/plugins/checkbox_options.js.map +1 -0
- data/vendor/assets/javascripts/tom-select-rails/js/plugins/clear_button.js +99 -0
- data/vendor/assets/javascripts/tom-select-rails/js/plugins/clear_button.js.map +1 -0
- data/vendor/assets/javascripts/tom-select-rails/js/plugins/drag_drop.js +70 -0
- data/vendor/assets/javascripts/tom-select-rails/js/plugins/drag_drop.js.map +1 -0
- data/vendor/assets/javascripts/tom-select-rails/js/plugins/dropdown_header.js +126 -0
- data/vendor/assets/javascripts/tom-select-rails/js/plugins/dropdown_header.js.map +1 -0
- data/vendor/assets/javascripts/tom-select-rails/js/plugins/dropdown_input.js +238 -0
- data/vendor/assets/javascripts/tom-select-rails/js/plugins/dropdown_input.js.map +1 -0
- data/vendor/assets/javascripts/tom-select-rails/js/plugins/input_autogrow.js +88 -0
- data/vendor/assets/javascripts/tom-select-rails/js/plugins/input_autogrow.js.map +1 -0
- data/vendor/assets/javascripts/tom-select-rails/js/plugins/no_active_items.js +33 -0
- data/vendor/assets/javascripts/tom-select-rails/js/plugins/no_active_items.js.map +1 -0
- data/vendor/assets/javascripts/tom-select-rails/js/plugins/no_backspace_delete.js +40 -0
- data/vendor/assets/javascripts/tom-select-rails/js/plugins/no_backspace_delete.js.map +1 -0
- data/vendor/assets/javascripts/tom-select-rails/js/plugins/optgroup_columns.js +116 -0
- data/vendor/assets/javascripts/tom-select-rails/js/plugins/optgroup_columns.js.map +1 -0
- data/vendor/assets/javascripts/tom-select-rails/js/plugins/remove_button.js +154 -0
- data/vendor/assets/javascripts/tom-select-rails/js/plugins/remove_button.js.map +1 -0
- data/vendor/assets/javascripts/tom-select-rails/js/plugins/restore_on_backspace.js +51 -0
- data/vendor/assets/javascripts/tom-select-rails/js/plugins/restore_on_backspace.js.map +1 -0
- data/vendor/assets/javascripts/tom-select-rails/js/plugins/virtual_scroll.js +269 -0
- data/vendor/assets/javascripts/tom-select-rails/js/plugins/virtual_scroll.js.map +1 -0
- data/vendor/assets/javascripts/tom-select-rails/js/tom-select.base.js +4092 -0
- data/vendor/assets/javascripts/tom-select-rails/js/tom-select.base.js.map +1 -0
- data/vendor/assets/javascripts/tom-select-rails/js/tom-select.base.min.js +303 -0
- data/vendor/assets/javascripts/tom-select-rails/js/tom-select.base.min.js.map +1 -0
- data/vendor/assets/javascripts/tom-select-rails/js/tom-select.complete.js +4894 -0
- data/vendor/assets/javascripts/tom-select-rails/js/tom-select.complete.js.map +1 -0
- data/vendor/assets/javascripts/tom-select-rails/js/tom-select.complete.min.js +362 -0
- data/vendor/assets/javascripts/tom-select-rails/js/tom-select.complete.min.js.map +1 -0
- data/vendor/assets/javascripts/tom-select-rails/js/tom-select.popular.js +4344 -0
- data/vendor/assets/javascripts/tom-select-rails/js/tom-select.popular.js.map +1 -0
- data/vendor/assets/javascripts/tom-select-rails/js/tom-select.popular.min.js +324 -0
- data/vendor/assets/javascripts/tom-select-rails/js/tom-select.popular.min.js.map +1 -0
- data/vendor/assets/javascripts/tom-select-rails/types/constants.d.ts +12 -0
- data/vendor/assets/javascripts/tom-select-rails/types/contrib/highlight.d.ts +13 -0
- data/vendor/assets/javascripts/tom-select-rails/types/contrib/microevent.d.ts +20 -0
- data/vendor/assets/javascripts/tom-select-rails/types/contrib/microplugin.d.ts +71 -0
- data/vendor/assets/javascripts/tom-select-rails/types/defaults.d.ts +51 -0
- data/vendor/assets/javascripts/tom-select-rails/types/getSettings.d.ts +3 -0
- data/vendor/assets/javascripts/tom-select-rails/types/plugins/caret_position/plugin.d.ts +16 -0
- data/vendor/assets/javascripts/tom-select-rails/types/plugins/change_listener/plugin.d.ts +16 -0
- data/vendor/assets/javascripts/tom-select-rails/types/plugins/checkbox_options/plugin.d.ts +16 -0
- data/vendor/assets/javascripts/tom-select-rails/types/plugins/clear_button/plugin.d.ts +17 -0
- data/vendor/assets/javascripts/tom-select-rails/types/plugins/clear_button/types.d.ts +5 -0
- data/vendor/assets/javascripts/tom-select-rails/types/plugins/drag_drop/plugin.d.ts +16 -0
- data/vendor/assets/javascripts/tom-select-rails/types/plugins/dropdown_header/plugin.d.ts +17 -0
- data/vendor/assets/javascripts/tom-select-rails/types/plugins/dropdown_header/types.d.ts +8 -0
- data/vendor/assets/javascripts/tom-select-rails/types/plugins/dropdown_input/plugin.d.ts +16 -0
- data/vendor/assets/javascripts/tom-select-rails/types/plugins/input_autogrow/plugin.d.ts +15 -0
- data/vendor/assets/javascripts/tom-select-rails/types/plugins/no_active_items/plugin.d.ts +15 -0
- data/vendor/assets/javascripts/tom-select-rails/types/plugins/no_backspace_delete/plugin.d.ts +15 -0
- data/vendor/assets/javascripts/tom-select-rails/types/plugins/optgroup_columns/plugin.d.ts +16 -0
- data/vendor/assets/javascripts/tom-select-rails/types/plugins/remove_button/plugin.d.ts +17 -0
- data/vendor/assets/javascripts/tom-select-rails/types/plugins/remove_button/types.d.ts +6 -0
- data/vendor/assets/javascripts/tom-select-rails/types/plugins/restore_on_backspace/plugin.d.ts +21 -0
- data/vendor/assets/javascripts/tom-select-rails/types/plugins/virtual_scroll/plugin.d.ts +16 -0
- data/vendor/assets/javascripts/tom-select-rails/types/tom-select.complete.d.ts +2 -0
- data/vendor/assets/javascripts/tom-select-rails/types/tom-select.d.ts +579 -0
- data/vendor/assets/javascripts/tom-select-rails/types/tom-select.popular.d.ts +2 -0
- data/vendor/assets/javascripts/tom-select-rails/types/types/core.d.ts +44 -0
- data/vendor/assets/javascripts/tom-select-rails/types/types/index.d.ts +2 -0
- data/vendor/assets/javascripts/tom-select-rails/types/types/settings.d.ts +81 -0
- data/vendor/assets/javascripts/tom-select-rails/types/utils.d.ts +76 -0
- data/vendor/assets/javascripts/tom-select-rails/types/vanilla.d.ts +76 -0
- data/vendor/assets/stylesheets/tom-select-rails/css/tom-select.bootstrap4.css +548 -0
- data/vendor/assets/stylesheets/tom-select-rails/css/tom-select.bootstrap4.css.map +1 -0
- data/vendor/assets/stylesheets/tom-select-rails/css/tom-select.bootstrap4.min.css +2 -0
- data/vendor/assets/stylesheets/tom-select-rails/css/tom-select.bootstrap4.min.css.map +1 -0
- data/vendor/assets/stylesheets/tom-select-rails/css/tom-select.bootstrap5.css +592 -0
- data/vendor/assets/stylesheets/tom-select-rails/css/tom-select.bootstrap5.css.map +1 -0
- data/vendor/assets/stylesheets/tom-select-rails/css/tom-select.bootstrap5.min.css +2 -0
- data/vendor/assets/stylesheets/tom-select-rails/css/tom-select.bootstrap5.min.css.map +1 -0
- data/vendor/assets/stylesheets/tom-select-rails/css/tom-select.css +391 -0
- data/vendor/assets/stylesheets/tom-select-rails/css/tom-select.css.map +1 -0
- data/vendor/assets/stylesheets/tom-select-rails/css/tom-select.default.css +476 -0
- data/vendor/assets/stylesheets/tom-select-rails/css/tom-select.default.css.map +1 -0
- data/vendor/assets/stylesheets/tom-select-rails/css/tom-select.default.min.css +2 -0
- data/vendor/assets/stylesheets/tom-select-rails/css/tom-select.default.min.css.map +1 -0
- data/vendor/assets/stylesheets/tom-select-rails/css/tom-select.min.css +2 -0
- data/vendor/assets/stylesheets/tom-select-rails/css/tom-select.min.css.map +1 -0
- data/vendor/assets/stylesheets/tom-select-rails/scss/_dropdown.scss +104 -0
- data/vendor/assets/stylesheets/tom-select-rails/scss/_items.scss +115 -0
- data/vendor/assets/stylesheets/tom-select-rails/scss/plugins/checkbox_options.scss +5 -0
- data/vendor/assets/stylesheets/tom-select-rails/scss/plugins/clear_button.scss +30 -0
- data/vendor/assets/stylesheets/tom-select-rails/scss/plugins/drag_drop.scss +16 -0
- data/vendor/assets/stylesheets/tom-select-rails/scss/plugins/dropdown_header.scss +23 -0
- data/vendor/assets/stylesheets/tom-select-rails/scss/plugins/dropdown_input.scss +47 -0
- data/vendor/assets/stylesheets/tom-select-rails/scss/plugins/input_autogrow.scss +18 -0
- data/vendor/assets/stylesheets/tom-select-rails/scss/plugins/optgroup_columns.scss +23 -0
- data/vendor/assets/stylesheets/tom-select-rails/scss/plugins/remove_button.scss +44 -0
- data/vendor/assets/stylesheets/tom-select-rails/scss/tom-select.bootstrap4.scss +219 -0
- data/vendor/assets/stylesheets/tom-select-rails/scss/tom-select.bootstrap5.scss +274 -0
- data/vendor/assets/stylesheets/tom-select-rails/scss/tom-select.default.scss +87 -0
- data/vendor/assets/stylesheets/tom-select-rails/scss/tom-select.scss +175 -0
- metadata +195 -0
@@ -0,0 +1,104 @@
|
|
1
|
+
|
2
|
+
|
3
|
+
.#{$select-ns}-dropdown {
|
4
|
+
position: absolute;
|
5
|
+
top: 100%;
|
6
|
+
left: 0;
|
7
|
+
width: 100%;
|
8
|
+
z-index: 10;
|
9
|
+
|
10
|
+
border: $select-dropdown-border;
|
11
|
+
background: $select-color-dropdown;
|
12
|
+
margin: 0.25rem 0 0 0;
|
13
|
+
border-top: 0 none;
|
14
|
+
box-sizing: border-box;
|
15
|
+
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
16
|
+
border-radius: 0 0 $select-border-radius $select-border-radius;
|
17
|
+
|
18
|
+
|
19
|
+
[data-selectable] {
|
20
|
+
cursor: pointer;
|
21
|
+
overflow: hidden;
|
22
|
+
.highlight {
|
23
|
+
background: $select-color-highlight;
|
24
|
+
border-radius: 1px;
|
25
|
+
}
|
26
|
+
}
|
27
|
+
|
28
|
+
.option,
|
29
|
+
.optgroup-header,
|
30
|
+
.no-results,
|
31
|
+
.create {
|
32
|
+
padding: $select-padding-dropdown-item-y $select-padding-dropdown-item-x;
|
33
|
+
}
|
34
|
+
|
35
|
+
.option, [data-disabled], [data-disabled] [data-selectable].option {
|
36
|
+
cursor: inherit;
|
37
|
+
opacity: 0.5;
|
38
|
+
}
|
39
|
+
|
40
|
+
[data-selectable].option {
|
41
|
+
opacity: 1;
|
42
|
+
cursor: pointer;
|
43
|
+
}
|
44
|
+
|
45
|
+
.optgroup:first-child .optgroup-header {
|
46
|
+
border-top: 0 none;
|
47
|
+
}
|
48
|
+
|
49
|
+
.optgroup-header {
|
50
|
+
color: $select-color-optgroup-text;
|
51
|
+
background: $select-color-optgroup;
|
52
|
+
cursor: default;
|
53
|
+
}
|
54
|
+
|
55
|
+
.create:hover,
|
56
|
+
.option:hover,
|
57
|
+
.active {
|
58
|
+
background-color: $select-color-dropdown-item-active;
|
59
|
+
color: $select-color-dropdown-item-active-text;
|
60
|
+
&.create {
|
61
|
+
color: $select-color-dropdown-item-create-active-text;
|
62
|
+
}
|
63
|
+
}
|
64
|
+
|
65
|
+
.create {
|
66
|
+
color: $select-color-dropdown-item-create-text;
|
67
|
+
}
|
68
|
+
|
69
|
+
.spinner{
|
70
|
+
display: inline-block;
|
71
|
+
width: $select-spinner-size;
|
72
|
+
height: $select-spinner-size;
|
73
|
+
margin: $select-padding-dropdown-item-y $select-padding-dropdown-item-x;
|
74
|
+
|
75
|
+
|
76
|
+
&:after {
|
77
|
+
content: " ";
|
78
|
+
display: block;
|
79
|
+
width: $select-spinner-size * .8;
|
80
|
+
height: $select-spinner-size * .8;
|
81
|
+
margin: $select-spinner-size * .1;
|
82
|
+
border-radius: 50%;
|
83
|
+
border: $select-spinner-border-size solid $select-spinner-border-color;
|
84
|
+
border-color: $select-spinner-border-color transparent $select-spinner-border-color transparent;
|
85
|
+
animation: lds-dual-ring 1.2s linear infinite;
|
86
|
+
}
|
87
|
+
@keyframes lds-dual-ring {
|
88
|
+
0% {
|
89
|
+
transform: rotate(0deg);
|
90
|
+
}
|
91
|
+
100% {
|
92
|
+
transform: rotate(360deg);
|
93
|
+
}
|
94
|
+
}
|
95
|
+
}
|
96
|
+
}
|
97
|
+
|
98
|
+
.#{$select-ns}-dropdown-content {
|
99
|
+
overflow-y: auto;
|
100
|
+
overflow-x: hidden;
|
101
|
+
max-height: $select-max-height-dropdown;
|
102
|
+
overflow-scrolling: touch;
|
103
|
+
scroll-behavior: smooth;
|
104
|
+
}
|
@@ -0,0 +1,115 @@
|
|
1
|
+
|
2
|
+
|
3
|
+
.#{$select-ns}-control {
|
4
|
+
|
5
|
+
border: $select-border;
|
6
|
+
padding: $select-padding-y $select-padding-x;
|
7
|
+
width: 100%;
|
8
|
+
overflow: hidden;
|
9
|
+
position: relative;
|
10
|
+
z-index: 1;
|
11
|
+
box-sizing: border-box;
|
12
|
+
box-shadow: $select-shadow-input;
|
13
|
+
border-radius: $select-border-radius;
|
14
|
+
display: flex;
|
15
|
+
flex-wrap: wrap;
|
16
|
+
|
17
|
+
.#{$select-ns}-wrapper.multi.has-items & {
|
18
|
+
$padding-x: $select-padding-x;
|
19
|
+
$padding-top: calc( #{$select-padding-y} - #{$select-padding-item-y} - #{$select-width-item-border});
|
20
|
+
$padding-bottom: calc( #{$select-padding-y} - #{$select-padding-item-y} - #{$select-margin-item-y} - #{$select-width-item-border});
|
21
|
+
padding: $padding-top $padding-x $padding-bottom;
|
22
|
+
}
|
23
|
+
|
24
|
+
.full & {
|
25
|
+
background-color: $select-color-input-full;
|
26
|
+
}
|
27
|
+
|
28
|
+
.disabled &,
|
29
|
+
.disabled & * {
|
30
|
+
cursor: default !important;
|
31
|
+
}
|
32
|
+
|
33
|
+
.focus & {
|
34
|
+
box-shadow: $select-shadow-input-focus;
|
35
|
+
}
|
36
|
+
|
37
|
+
> * {
|
38
|
+
vertical-align: baseline;
|
39
|
+
display: inline-block;
|
40
|
+
}
|
41
|
+
|
42
|
+
.#{$select-ns}-wrapper.multi & > div {
|
43
|
+
cursor: pointer;
|
44
|
+
margin: 0 $select-margin-item-x $select-margin-item-y 0;
|
45
|
+
padding: $select-padding-item-y $select-padding-item-x;
|
46
|
+
background: $select-color-item;
|
47
|
+
color: $select-color-item-text;
|
48
|
+
border: $select-width-item-border solid $select-color-item-border;
|
49
|
+
|
50
|
+
&.active {
|
51
|
+
background: $select-color-item-active;
|
52
|
+
color: $select-color-item-active-text;
|
53
|
+
border: $select-width-item-border solid $select-color-item-active-border;
|
54
|
+
}
|
55
|
+
}
|
56
|
+
|
57
|
+
.#{$select-ns}-wrapper.multi.disabled & > div {
|
58
|
+
&, &.active {
|
59
|
+
color: lighten(desaturate($select-color-item-text, 100%), $select-lighten-disabled-item-text);
|
60
|
+
background: lighten(desaturate($select-color-item, 100%), $select-lighten-disabled-item);
|
61
|
+
border: $select-width-item-border solid lighten(desaturate($select-color-item-border, 100%), $select-lighten-disabled-item-border);
|
62
|
+
}
|
63
|
+
}
|
64
|
+
|
65
|
+
> input {
|
66
|
+
&::-ms-clear {
|
67
|
+
display: none;
|
68
|
+
}
|
69
|
+
|
70
|
+
flex: 1 1 auto;
|
71
|
+
min-width: 7rem;
|
72
|
+
display: inline-block !important;
|
73
|
+
padding: 0 !important;
|
74
|
+
min-height: 0 !important;
|
75
|
+
max-height: none !important;
|
76
|
+
max-width: 100% !important;
|
77
|
+
margin: 0 !important;
|
78
|
+
text-indent: 0 !important;
|
79
|
+
border: 0 none !important;
|
80
|
+
background: none !important;
|
81
|
+
line-height: inherit !important;
|
82
|
+
user-select: auto !important;
|
83
|
+
box-shadow: none !important;
|
84
|
+
&:focus { outline: none !important; }
|
85
|
+
}
|
86
|
+
|
87
|
+
.has-items & > input{
|
88
|
+
margin: $select-caret-margin !important;
|
89
|
+
}
|
90
|
+
|
91
|
+
&.rtl {
|
92
|
+
text-align: right;
|
93
|
+
&.single .#{$select-ns}-control:after {
|
94
|
+
left: $select-arrow-offset;
|
95
|
+
right: auto;
|
96
|
+
}
|
97
|
+
.#{$select-ns}-control > input {
|
98
|
+
margin: $select-caret-margin-rtl !important;
|
99
|
+
}
|
100
|
+
}
|
101
|
+
|
102
|
+
.disabled & {
|
103
|
+
opacity: $select-opacity-disabled;
|
104
|
+
background-color: $select-color-disabled;
|
105
|
+
}
|
106
|
+
|
107
|
+
// hide input, while retaining its focus, and maintain layout so users can still click on the space to bring the display back
|
108
|
+
// visibility:hidden can prevent the input from receiving focus
|
109
|
+
.input-hidden & > input{
|
110
|
+
opacity: 0;
|
111
|
+
position: absolute;
|
112
|
+
left: -10000px;
|
113
|
+
}
|
114
|
+
|
115
|
+
}
|
@@ -0,0 +1,30 @@
|
|
1
|
+
|
2
|
+
.plugin-clear_button{
|
3
|
+
|
4
|
+
.#{$select-ns}-control{
|
5
|
+
padding-right: calc( 1em + (3 * #{$select-padding-item-x}) ) !important;
|
6
|
+
}
|
7
|
+
|
8
|
+
.clear-button{
|
9
|
+
opacity: 0;
|
10
|
+
position: absolute;
|
11
|
+
top: $select-padding-y;
|
12
|
+
right: calc(#{$select-padding-x} - #{$select-padding-item-x});
|
13
|
+
margin-right: 0 !important;
|
14
|
+
background: transparent !important;
|
15
|
+
transition: opacity 0.5s;
|
16
|
+
cursor: pointer;
|
17
|
+
}
|
18
|
+
|
19
|
+
&.single .clear-button{
|
20
|
+
right: calc(#{$select-padding-x} - #{$select-padding-item-x} + 2rem);
|
21
|
+
}
|
22
|
+
|
23
|
+
&.focus.has-items .clear-button,
|
24
|
+
&:not(.disabled):hover.has-items .clear-button{
|
25
|
+
opacity: 1;
|
26
|
+
}
|
27
|
+
|
28
|
+
|
29
|
+
|
30
|
+
}
|
@@ -0,0 +1,16 @@
|
|
1
|
+
.#{$select-ns}-wrapper.plugin-drag_drop {
|
2
|
+
&.multi > .#{$select-ns}-control > div.ui-sortable-placeholder {
|
3
|
+
visibility: visible !important;
|
4
|
+
background: #f2f2f2 !important;
|
5
|
+
background: rgba(0,0,0,0.06) !important;
|
6
|
+
border: 0 none !important;
|
7
|
+
box-shadow: inset 0 0 12px 4px #fff;
|
8
|
+
}
|
9
|
+
.ui-sortable-placeholder::after {
|
10
|
+
content: '!';
|
11
|
+
visibility: hidden;
|
12
|
+
}
|
13
|
+
.ui-sortable-helper {
|
14
|
+
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
|
15
|
+
}
|
16
|
+
}
|
@@ -0,0 +1,23 @@
|
|
1
|
+
|
2
|
+
.#{$select-ns}-wrapper{
|
3
|
+
.dropdown-header {
|
4
|
+
position: relative;
|
5
|
+
padding: ($select-padding-dropdown-item-y * 2) $select-padding-dropdown-item-x;
|
6
|
+
border-bottom: 1px solid $select-color-border;
|
7
|
+
background: mix($select-color-dropdown, $select-color-border, 85%);
|
8
|
+
border-radius: $select-border-radius $select-border-radius 0 0;
|
9
|
+
}
|
10
|
+
.dropdown-header-close {
|
11
|
+
position: absolute;
|
12
|
+
right: $select-padding-dropdown-item-x;
|
13
|
+
top: 50%;
|
14
|
+
color: $select-color-text;
|
15
|
+
opacity: 0.4;
|
16
|
+
margin-top: -12px;
|
17
|
+
line-height: 20px;
|
18
|
+
font-size: 20px !important;
|
19
|
+
}
|
20
|
+
.dropdown-header-close:hover {
|
21
|
+
color: darken($select-color-text, 25%);
|
22
|
+
}
|
23
|
+
}
|
@@ -0,0 +1,47 @@
|
|
1
|
+
|
2
|
+
.plugin-dropdown_input{
|
3
|
+
|
4
|
+
&.focus.dropdown-active .#{$select-ns}-control{
|
5
|
+
box-shadow: none;
|
6
|
+
border: $select-border;
|
7
|
+
@if variable-exists(input-box-shadow) {
|
8
|
+
box-shadow: $input-box-shadow;
|
9
|
+
}
|
10
|
+
}
|
11
|
+
|
12
|
+
.dropdown-input {
|
13
|
+
border: 1px solid $select-color-border;
|
14
|
+
border-width: 0 0 1px 0;
|
15
|
+
display: block;
|
16
|
+
padding: $select-padding-y $select-padding-x;
|
17
|
+
box-shadow: $select-shadow-input;
|
18
|
+
width: 100%;
|
19
|
+
background: transparent;
|
20
|
+
}
|
21
|
+
|
22
|
+
&.focus .#{$select-ns}-dropdown .dropdown-input{
|
23
|
+
@if variable-exists(input-focus-border-color) {
|
24
|
+
border-color: $input-focus-border-color;
|
25
|
+
|
26
|
+
outline: 0;
|
27
|
+
@if $enable-shadows {
|
28
|
+
box-shadow: $input-box-shadow, $input-focus-box-shadow;
|
29
|
+
} @else {
|
30
|
+
box-shadow: $input-focus-box-shadow;
|
31
|
+
}
|
32
|
+
|
33
|
+
}
|
34
|
+
|
35
|
+
}
|
36
|
+
|
37
|
+
.items-placeholder{
|
38
|
+
border: 0 none !important;
|
39
|
+
box-shadow: none !important;
|
40
|
+
width: 100%;
|
41
|
+
}
|
42
|
+
|
43
|
+
&.has-items .items-placeholder,
|
44
|
+
&.dropdown-active .items-placeholder{
|
45
|
+
display: none !important;
|
46
|
+
}
|
47
|
+
}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
|
2
|
+
.#{$select-ns}-wrapper.plugin-input_autogrow{
|
3
|
+
|
4
|
+
&.has-items .#{$select-ns}-control > input {
|
5
|
+
min-width: 0;
|
6
|
+
}
|
7
|
+
|
8
|
+
&.has-items.focus .#{$select-ns}-control > input {
|
9
|
+
flex: none;
|
10
|
+
min-width: 4px;
|
11
|
+
|
12
|
+
&::placeholder {
|
13
|
+
color:transparent;
|
14
|
+
}
|
15
|
+
}
|
16
|
+
|
17
|
+
|
18
|
+
}
|
@@ -0,0 +1,23 @@
|
|
1
|
+
.#{$select-ns}-dropdown.plugin-optgroup_columns {
|
2
|
+
|
3
|
+
.ts-dropdown-content{
|
4
|
+
display: flex;
|
5
|
+
}
|
6
|
+
|
7
|
+
.optgroup {
|
8
|
+
border-right: 1px solid #f2f2f2;
|
9
|
+
border-top: 0 none;
|
10
|
+
flex-grow: 1;
|
11
|
+
flex-basis: 0;
|
12
|
+
min-width: 0;
|
13
|
+
}
|
14
|
+
.optgroup:last-child {
|
15
|
+
border-right: 0 none;
|
16
|
+
}
|
17
|
+
.optgroup:before {
|
18
|
+
display: none;
|
19
|
+
}
|
20
|
+
.optgroup-header {
|
21
|
+
border-top: 0 none;
|
22
|
+
}
|
23
|
+
}
|
@@ -0,0 +1,44 @@
|
|
1
|
+
.#{$select-ns}-wrapper.plugin-remove_button{
|
2
|
+
|
3
|
+
.item{
|
4
|
+
display: inline-flex;
|
5
|
+
align-items: center;
|
6
|
+
padding-right: 0 !important;
|
7
|
+
}
|
8
|
+
|
9
|
+
.item .remove {
|
10
|
+
color: inherit;
|
11
|
+
text-decoration: none;
|
12
|
+
vertical-align: middle;
|
13
|
+
display: inline-block;
|
14
|
+
padding: 0 $select-padding-item-x;
|
15
|
+
border-left: 1px solid $select-color-item-border;
|
16
|
+
border-radius: 0 2px 2px 0;
|
17
|
+
box-sizing: border-box;
|
18
|
+
margin-left: $select-padding-item-x;
|
19
|
+
}
|
20
|
+
|
21
|
+
.item .remove:hover {
|
22
|
+
background: rgba(0,0,0,0.05);
|
23
|
+
}
|
24
|
+
|
25
|
+
.item.active .remove {
|
26
|
+
border-left-color: $select-color-item-active-border;
|
27
|
+
}
|
28
|
+
|
29
|
+
&.disabled .item .remove:hover {
|
30
|
+
background: none;
|
31
|
+
}
|
32
|
+
|
33
|
+
&.disabled .item .remove {
|
34
|
+
border-left-color: lighten(desaturate($select-color-item-border, 100%), $select-lighten-disabled-item-border);
|
35
|
+
}
|
36
|
+
|
37
|
+
.remove-single {
|
38
|
+
position: absolute;
|
39
|
+
right: 0;
|
40
|
+
top: 0;
|
41
|
+
font-size: 23px;
|
42
|
+
}
|
43
|
+
|
44
|
+
}
|
@@ -0,0 +1,219 @@
|
|
1
|
+
/**
|
2
|
+
* Tom Select bootstrap 4
|
3
|
+
*/
|
4
|
+
|
5
|
+
//Import Boostrap 4 functions and variables
|
6
|
+
|
7
|
+
$state-valid: map-get($form-validation-states,'valid') !default;
|
8
|
+
$state-invalid: map-get($form-validation-states,'invalid') !default;
|
9
|
+
|
10
|
+
$enable-shadows: true !default;
|
11
|
+
$select-font-family: inherit !default;
|
12
|
+
$select-font-size: inherit !default;
|
13
|
+
$select-line-height: $input-btn-line-height !default; //formerly line-height-computed
|
14
|
+
|
15
|
+
$select-color-text: gray("800") !default; //$gray-800
|
16
|
+
$select-color-highlight: rgba(255,237,40,0.4) !default;
|
17
|
+
$select-color-input: $input-bg !default;
|
18
|
+
$select-color-input-full: $input-bg !default;
|
19
|
+
$select-color-input-error: map-get($state-invalid,'color') !default;
|
20
|
+
$select-color-input-error-focus: darken($select-color-input-error, 10%) !default;
|
21
|
+
$select-color-disabled: $input-disabled-bg !default;
|
22
|
+
$select-color-item: #efefef !default;
|
23
|
+
$select-color-item-border: $border-color !default;
|
24
|
+
$select-color-item-active: $component-active-bg !default;
|
25
|
+
$select-color-item-active-text: #fff !default;
|
26
|
+
$select-color-item-active-border: rgba(0,0,0,0) !default;
|
27
|
+
$select-color-optgroup: $dropdown-bg !default;
|
28
|
+
$select-color-optgroup-text: $dropdown-header-color !default;
|
29
|
+
$select-color-optgroup-border: $dropdown-divider-bg !default;
|
30
|
+
$select-color-dropdown: $dropdown-bg !default;
|
31
|
+
$select-color-dropdown-border-top: mix($input-border-color, $input-bg, 0.8) !default;
|
32
|
+
$select-color-dropdown-item-active: $dropdown-link-hover-bg !default;
|
33
|
+
$select-color-dropdown-item-active-text: $dropdown-link-hover-color !default;
|
34
|
+
$select-color-dropdown-item-create-active-text: $dropdown-link-hover-color !default;
|
35
|
+
$select-opacity-disabled: 0.5 !default;
|
36
|
+
|
37
|
+
$select-border: 1px solid $input-border-color !default;
|
38
|
+
$select-border-radius: $input-border-radius !default;
|
39
|
+
|
40
|
+
$select-width-item-border: 0px !default;
|
41
|
+
$select-padding-x: $input-btn-padding-x !default;
|
42
|
+
$select-padding-y: $input-btn-padding-y !default;
|
43
|
+
$select-padding-dropdown-item-x: $input-btn-padding-x !default;
|
44
|
+
$select-padding-dropdown-item-y: 3px !default;
|
45
|
+
$select-padding-item-x: 5px !default;
|
46
|
+
$select-padding-item-y: 1px !default;
|
47
|
+
$select-margin-item-x: 3px !default;
|
48
|
+
$select-margin-item-y: 3px !default;
|
49
|
+
|
50
|
+
$select-arrow-size: 5px !default;
|
51
|
+
$select-arrow-color: $select-color-text !default;
|
52
|
+
$select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
|
53
|
+
|
54
|
+
|
55
|
+
@import "tom-select";
|
56
|
+
@include ts-caret();
|
57
|
+
|
58
|
+
.#{$select-ns}-wrapper.form-control,
|
59
|
+
.#{$select-ns}-wrapper.form-select{
|
60
|
+
padding:0 !important;
|
61
|
+
}
|
62
|
+
|
63
|
+
.#{$select-ns}-dropdown,
|
64
|
+
.#{$select-ns}-dropdown.form-control {
|
65
|
+
height: auto;
|
66
|
+
padding: 0;
|
67
|
+
z-index: $zindex-dropdown;
|
68
|
+
background: $select-color-dropdown;
|
69
|
+
border: 1px solid $dropdown-border-color; //$dropdown-fallback-border
|
70
|
+
border-radius: $border-radius;
|
71
|
+
box-shadow: 0 6px 12px rgba(0,0,0,.175);
|
72
|
+
}
|
73
|
+
|
74
|
+
.#{$select-ns}-dropdown {
|
75
|
+
.optgroup-header {
|
76
|
+
font-size: $font-size-sm;
|
77
|
+
line-height: $line-height-base;
|
78
|
+
}
|
79
|
+
.optgroup:first-child:before {
|
80
|
+
display: none;
|
81
|
+
}
|
82
|
+
.optgroup:before {
|
83
|
+
content: ' ';
|
84
|
+
display: block;
|
85
|
+
height: 0;
|
86
|
+
margin: $dropdown-divider-margin-y 0;
|
87
|
+
overflow: hidden;
|
88
|
+
border-top: 1px solid $dropdown-divider-bg;
|
89
|
+
margin-left: $select-padding-dropdown-item-x * -1;
|
90
|
+
margin-right: $select-padding-dropdown-item-x * -1;
|
91
|
+
}
|
92
|
+
|
93
|
+
.create {
|
94
|
+
padding-left: $select-padding-dropdown-item-x;
|
95
|
+
}
|
96
|
+
}
|
97
|
+
|
98
|
+
.#{$select-ns}-dropdown-content {
|
99
|
+
padding: 5px 0;
|
100
|
+
}
|
101
|
+
|
102
|
+
.#{$select-ns}-control {
|
103
|
+
min-height: $input-height;
|
104
|
+
@include box-shadow($input-box-shadow);
|
105
|
+
@include transition($input-transition);
|
106
|
+
display:flex;
|
107
|
+
align-items: center;
|
108
|
+
|
109
|
+
.focus & {
|
110
|
+
border-color: $input-focus-border-color;
|
111
|
+
outline: 0;
|
112
|
+
@if $enable-shadows {
|
113
|
+
box-shadow: $input-box-shadow, $input-focus-box-shadow;
|
114
|
+
} @else {
|
115
|
+
box-shadow: $input-focus-box-shadow;
|
116
|
+
}
|
117
|
+
}
|
118
|
+
}
|
119
|
+
|
120
|
+
.is-invalid .#{$select-ns}-control,
|
121
|
+
.was-validated .invalid .#{$select-ns}-control{
|
122
|
+
border-color: $select-color-input-error;
|
123
|
+
|
124
|
+
.focus & {
|
125
|
+
border-color: $select-color-input-error-focus;
|
126
|
+
box-shadow: 0 0 0 $input-focus-width rgba($select-color-input-error, .25);
|
127
|
+
}
|
128
|
+
}
|
129
|
+
|
130
|
+
.is-valid .#{$select-ns}-control{
|
131
|
+
$_color: map-get($state-valid,'color');
|
132
|
+
//$_icon: map-get($state-valid,'icon');
|
133
|
+
|
134
|
+
border-color: $_color;
|
135
|
+
|
136
|
+
.focus & {
|
137
|
+
border-color: $_color;
|
138
|
+
box-shadow: 0 0 0 $input-focus-width rgba($_color, .25);
|
139
|
+
}
|
140
|
+
}
|
141
|
+
|
142
|
+
.#{$select-ns}-wrapper {
|
143
|
+
|
144
|
+
.input-group-sm > &,
|
145
|
+
&.form-control-sm{
|
146
|
+
|
147
|
+
.#{$select-ns}-control{
|
148
|
+
min-height: $input-height-sm;
|
149
|
+
padding: 0 .75rem;
|
150
|
+
//padding: $input-padding-y-sm $input-padding-x-sm;
|
151
|
+
@include border-radius($input-border-radius-sm);
|
152
|
+
@include font-size($input-font-size-sm);
|
153
|
+
}
|
154
|
+
|
155
|
+
&.has-items .#{$select-ns}-control{
|
156
|
+
min-height: $input-height-sm !important;
|
157
|
+
font-size: $input-font-size-sm;
|
158
|
+
padding-bottom: 0;
|
159
|
+
}
|
160
|
+
}
|
161
|
+
|
162
|
+
|
163
|
+
.input-group-sm > &.multi.has-items,
|
164
|
+
&.form-control-sm.multi.has-items{
|
165
|
+
.#{$select-ns}-control{
|
166
|
+
// padding-top = ($input-height-sm - border-width - item-height) / 2;
|
167
|
+
// item-height = ($select-line-height * $input-font-size-sm) + ($select-padding-item-y * 2)
|
168
|
+
$border-and-padding: add($input-border-width,$select-padding-item-y) * 2;
|
169
|
+
$ts-select-padding-sm: calc( (#{$input-height-sm} - (#{$select-line-height} * #{$input-font-size-sm}) - #{$border-and-padding})/2);
|
170
|
+
padding-top: $ts-select-padding-sm !important;
|
171
|
+
}
|
172
|
+
}
|
173
|
+
|
174
|
+
|
175
|
+
&.multi {
|
176
|
+
&.has-items .#{$select-ns}-control {
|
177
|
+
padding-left: calc(#{$select-padding-x} - #{$select-padding-item-x});
|
178
|
+
padding-right: calc(#{$select-padding-x} - #{$select-padding-item-x});
|
179
|
+
}
|
180
|
+
.#{$select-ns}-control > div {
|
181
|
+
border-radius: calc(#{$select-border-radius} - 1px);
|
182
|
+
}
|
183
|
+
}
|
184
|
+
|
185
|
+
.input-group-lg > & >,
|
186
|
+
&.form-control-lg{
|
187
|
+
.#{$select-ns}-control{
|
188
|
+
min-height: $input-height-lg;
|
189
|
+
@include border-radius($input-border-radius-lg);
|
190
|
+
@include font-size($input-font-size-lg);
|
191
|
+
}
|
192
|
+
}
|
193
|
+
}
|
194
|
+
|
195
|
+
.form-control.#{$select-ns}-wrapper {
|
196
|
+
padding: 0;
|
197
|
+
height: auto;
|
198
|
+
border: none;
|
199
|
+
background: none;
|
200
|
+
//box-shadow: none;
|
201
|
+
border-radius: 0;
|
202
|
+
}
|
203
|
+
|
204
|
+
.input-group{
|
205
|
+
|
206
|
+
& > .#{$select-ns}-wrapper{
|
207
|
+
flex-grow: 1;
|
208
|
+
}
|
209
|
+
|
210
|
+
& > .#{$select-ns}-wrapper:not(:nth-child(2)) > .#{$select-ns}-control{
|
211
|
+
border-top-left-radius: 0;
|
212
|
+
border-bottom-left-radius: 0;
|
213
|
+
}
|
214
|
+
|
215
|
+
& > .#{$select-ns}-wrapper:not(:last-child) > .#{$select-ns}-control{
|
216
|
+
border-top-right-radius: 0;
|
217
|
+
border-bottom-right-radius: 0;
|
218
|
+
}
|
219
|
+
}
|