tom-select-rails 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (153) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE.txt +21 -0
  3. data/README.md +26 -0
  4. data/Rakefile +3 -0
  5. data/lib/tom-select-rails/engine.rb +8 -0
  6. data/lib/tom-select-rails/version.rb +5 -0
  7. data/lib/tom-select-rails.rb +7 -0
  8. data/vendor/assets/javascripts/tom-select-rails/cjs/tom-select.complete.js +4887 -0
  9. data/vendor/assets/javascripts/tom-select-rails/cjs/tom-select.complete.js.map +1 -0
  10. data/vendor/assets/javascripts/tom-select-rails/cjs/tom-select.js +4085 -0
  11. data/vendor/assets/javascripts/tom-select-rails/cjs/tom-select.js.map +1 -0
  12. data/vendor/assets/javascripts/tom-select-rails/cjs/tom-select.popular.js +4337 -0
  13. data/vendor/assets/javascripts/tom-select-rails/cjs/tom-select.popular.js.map +1 -0
  14. data/vendor/assets/javascripts/tom-select-rails/cjs/utils.js +196 -0
  15. data/vendor/assets/javascripts/tom-select-rails/cjs/utils.js.map +1 -0
  16. data/vendor/assets/javascripts/tom-select-rails/esm/plugins/caret_position/plugin.js +162 -0
  17. data/vendor/assets/javascripts/tom-select-rails/esm/plugins/caret_position/plugin.js.map +1 -0
  18. data/vendor/assets/javascripts/tom-select-rails/esm/plugins/change_listener/plugin.js +50 -0
  19. data/vendor/assets/javascripts/tom-select-rails/esm/plugins/change_listener/plugin.js.map +1 -0
  20. data/vendor/assets/javascripts/tom-select-rails/esm/plugins/checkbox_options/plugin.js +172 -0
  21. data/vendor/assets/javascripts/tom-select-rails/esm/plugins/checkbox_options/plugin.js.map +1 -0
  22. data/vendor/assets/javascripts/tom-select-rails/esm/plugins/clear_button/plugin.js +91 -0
  23. data/vendor/assets/javascripts/tom-select-rails/esm/plugins/clear_button/plugin.js.map +1 -0
  24. data/vendor/assets/javascripts/tom-select-rails/esm/plugins/drag_drop/plugin.js +62 -0
  25. data/vendor/assets/javascripts/tom-select-rails/esm/plugins/drag_drop/plugin.js.map +1 -0
  26. data/vendor/assets/javascripts/tom-select-rails/esm/plugins/dropdown_header/plugin.js +118 -0
  27. data/vendor/assets/javascripts/tom-select-rails/esm/plugins/dropdown_header/plugin.js.map +1 -0
  28. data/vendor/assets/javascripts/tom-select-rails/esm/plugins/dropdown_input/plugin.js +230 -0
  29. data/vendor/assets/javascripts/tom-select-rails/esm/plugins/dropdown_input/plugin.js.map +1 -0
  30. data/vendor/assets/javascripts/tom-select-rails/esm/plugins/input_autogrow/plugin.js +80 -0
  31. data/vendor/assets/javascripts/tom-select-rails/esm/plugins/input_autogrow/plugin.js.map +1 -0
  32. data/vendor/assets/javascripts/tom-select-rails/esm/plugins/no_active_items/plugin.js +25 -0
  33. data/vendor/assets/javascripts/tom-select-rails/esm/plugins/no_active_items/plugin.js.map +1 -0
  34. data/vendor/assets/javascripts/tom-select-rails/esm/plugins/no_backspace_delete/plugin.js +32 -0
  35. data/vendor/assets/javascripts/tom-select-rails/esm/plugins/no_backspace_delete/plugin.js.map +1 -0
  36. data/vendor/assets/javascripts/tom-select-rails/esm/plugins/optgroup_columns/plugin.js +108 -0
  37. data/vendor/assets/javascripts/tom-select-rails/esm/plugins/optgroup_columns/plugin.js.map +1 -0
  38. data/vendor/assets/javascripts/tom-select-rails/esm/plugins/remove_button/plugin.js +146 -0
  39. data/vendor/assets/javascripts/tom-select-rails/esm/plugins/remove_button/plugin.js.map +1 -0
  40. data/vendor/assets/javascripts/tom-select-rails/esm/plugins/restore_on_backspace/plugin.js +43 -0
  41. data/vendor/assets/javascripts/tom-select-rails/esm/plugins/restore_on_backspace/plugin.js.map +1 -0
  42. data/vendor/assets/javascripts/tom-select-rails/esm/plugins/virtual_scroll/plugin.js +261 -0
  43. data/vendor/assets/javascripts/tom-select-rails/esm/plugins/virtual_scroll/plugin.js.map +1 -0
  44. data/vendor/assets/javascripts/tom-select-rails/esm/tom-select.complete.js +4885 -0
  45. data/vendor/assets/javascripts/tom-select-rails/esm/tom-select.complete.js.map +1 -0
  46. data/vendor/assets/javascripts/tom-select-rails/esm/tom-select.js +4083 -0
  47. data/vendor/assets/javascripts/tom-select-rails/esm/tom-select.js.map +1 -0
  48. data/vendor/assets/javascripts/tom-select-rails/esm/tom-select.popular.js +4335 -0
  49. data/vendor/assets/javascripts/tom-select-rails/esm/tom-select.popular.js.map +1 -0
  50. data/vendor/assets/javascripts/tom-select-rails/esm/utils.js +181 -0
  51. data/vendor/assets/javascripts/tom-select-rails/esm/utils.js.map +1 -0
  52. data/vendor/assets/javascripts/tom-select-rails/js/plugins/caret_position.js +170 -0
  53. data/vendor/assets/javascripts/tom-select-rails/js/plugins/caret_position.js.map +1 -0
  54. data/vendor/assets/javascripts/tom-select-rails/js/plugins/change_listener.js +58 -0
  55. data/vendor/assets/javascripts/tom-select-rails/js/plugins/change_listener.js.map +1 -0
  56. data/vendor/assets/javascripts/tom-select-rails/js/plugins/checkbox_options.js +180 -0
  57. data/vendor/assets/javascripts/tom-select-rails/js/plugins/checkbox_options.js.map +1 -0
  58. data/vendor/assets/javascripts/tom-select-rails/js/plugins/clear_button.js +99 -0
  59. data/vendor/assets/javascripts/tom-select-rails/js/plugins/clear_button.js.map +1 -0
  60. data/vendor/assets/javascripts/tom-select-rails/js/plugins/drag_drop.js +70 -0
  61. data/vendor/assets/javascripts/tom-select-rails/js/plugins/drag_drop.js.map +1 -0
  62. data/vendor/assets/javascripts/tom-select-rails/js/plugins/dropdown_header.js +126 -0
  63. data/vendor/assets/javascripts/tom-select-rails/js/plugins/dropdown_header.js.map +1 -0
  64. data/vendor/assets/javascripts/tom-select-rails/js/plugins/dropdown_input.js +238 -0
  65. data/vendor/assets/javascripts/tom-select-rails/js/plugins/dropdown_input.js.map +1 -0
  66. data/vendor/assets/javascripts/tom-select-rails/js/plugins/input_autogrow.js +88 -0
  67. data/vendor/assets/javascripts/tom-select-rails/js/plugins/input_autogrow.js.map +1 -0
  68. data/vendor/assets/javascripts/tom-select-rails/js/plugins/no_active_items.js +33 -0
  69. data/vendor/assets/javascripts/tom-select-rails/js/plugins/no_active_items.js.map +1 -0
  70. data/vendor/assets/javascripts/tom-select-rails/js/plugins/no_backspace_delete.js +40 -0
  71. data/vendor/assets/javascripts/tom-select-rails/js/plugins/no_backspace_delete.js.map +1 -0
  72. data/vendor/assets/javascripts/tom-select-rails/js/plugins/optgroup_columns.js +116 -0
  73. data/vendor/assets/javascripts/tom-select-rails/js/plugins/optgroup_columns.js.map +1 -0
  74. data/vendor/assets/javascripts/tom-select-rails/js/plugins/remove_button.js +154 -0
  75. data/vendor/assets/javascripts/tom-select-rails/js/plugins/remove_button.js.map +1 -0
  76. data/vendor/assets/javascripts/tom-select-rails/js/plugins/restore_on_backspace.js +51 -0
  77. data/vendor/assets/javascripts/tom-select-rails/js/plugins/restore_on_backspace.js.map +1 -0
  78. data/vendor/assets/javascripts/tom-select-rails/js/plugins/virtual_scroll.js +269 -0
  79. data/vendor/assets/javascripts/tom-select-rails/js/plugins/virtual_scroll.js.map +1 -0
  80. data/vendor/assets/javascripts/tom-select-rails/js/tom-select.base.js +4092 -0
  81. data/vendor/assets/javascripts/tom-select-rails/js/tom-select.base.js.map +1 -0
  82. data/vendor/assets/javascripts/tom-select-rails/js/tom-select.base.min.js +303 -0
  83. data/vendor/assets/javascripts/tom-select-rails/js/tom-select.base.min.js.map +1 -0
  84. data/vendor/assets/javascripts/tom-select-rails/js/tom-select.complete.js +4894 -0
  85. data/vendor/assets/javascripts/tom-select-rails/js/tom-select.complete.js.map +1 -0
  86. data/vendor/assets/javascripts/tom-select-rails/js/tom-select.complete.min.js +362 -0
  87. data/vendor/assets/javascripts/tom-select-rails/js/tom-select.complete.min.js.map +1 -0
  88. data/vendor/assets/javascripts/tom-select-rails/js/tom-select.popular.js +4344 -0
  89. data/vendor/assets/javascripts/tom-select-rails/js/tom-select.popular.js.map +1 -0
  90. data/vendor/assets/javascripts/tom-select-rails/js/tom-select.popular.min.js +324 -0
  91. data/vendor/assets/javascripts/tom-select-rails/js/tom-select.popular.min.js.map +1 -0
  92. data/vendor/assets/javascripts/tom-select-rails/types/constants.d.ts +12 -0
  93. data/vendor/assets/javascripts/tom-select-rails/types/contrib/highlight.d.ts +13 -0
  94. data/vendor/assets/javascripts/tom-select-rails/types/contrib/microevent.d.ts +20 -0
  95. data/vendor/assets/javascripts/tom-select-rails/types/contrib/microplugin.d.ts +71 -0
  96. data/vendor/assets/javascripts/tom-select-rails/types/defaults.d.ts +51 -0
  97. data/vendor/assets/javascripts/tom-select-rails/types/getSettings.d.ts +3 -0
  98. data/vendor/assets/javascripts/tom-select-rails/types/plugins/caret_position/plugin.d.ts +16 -0
  99. data/vendor/assets/javascripts/tom-select-rails/types/plugins/change_listener/plugin.d.ts +16 -0
  100. data/vendor/assets/javascripts/tom-select-rails/types/plugins/checkbox_options/plugin.d.ts +16 -0
  101. data/vendor/assets/javascripts/tom-select-rails/types/plugins/clear_button/plugin.d.ts +17 -0
  102. data/vendor/assets/javascripts/tom-select-rails/types/plugins/clear_button/types.d.ts +5 -0
  103. data/vendor/assets/javascripts/tom-select-rails/types/plugins/drag_drop/plugin.d.ts +16 -0
  104. data/vendor/assets/javascripts/tom-select-rails/types/plugins/dropdown_header/plugin.d.ts +17 -0
  105. data/vendor/assets/javascripts/tom-select-rails/types/plugins/dropdown_header/types.d.ts +8 -0
  106. data/vendor/assets/javascripts/tom-select-rails/types/plugins/dropdown_input/plugin.d.ts +16 -0
  107. data/vendor/assets/javascripts/tom-select-rails/types/plugins/input_autogrow/plugin.d.ts +15 -0
  108. data/vendor/assets/javascripts/tom-select-rails/types/plugins/no_active_items/plugin.d.ts +15 -0
  109. data/vendor/assets/javascripts/tom-select-rails/types/plugins/no_backspace_delete/plugin.d.ts +15 -0
  110. data/vendor/assets/javascripts/tom-select-rails/types/plugins/optgroup_columns/plugin.d.ts +16 -0
  111. data/vendor/assets/javascripts/tom-select-rails/types/plugins/remove_button/plugin.d.ts +17 -0
  112. data/vendor/assets/javascripts/tom-select-rails/types/plugins/remove_button/types.d.ts +6 -0
  113. data/vendor/assets/javascripts/tom-select-rails/types/plugins/restore_on_backspace/plugin.d.ts +21 -0
  114. data/vendor/assets/javascripts/tom-select-rails/types/plugins/virtual_scroll/plugin.d.ts +16 -0
  115. data/vendor/assets/javascripts/tom-select-rails/types/tom-select.complete.d.ts +2 -0
  116. data/vendor/assets/javascripts/tom-select-rails/types/tom-select.d.ts +579 -0
  117. data/vendor/assets/javascripts/tom-select-rails/types/tom-select.popular.d.ts +2 -0
  118. data/vendor/assets/javascripts/tom-select-rails/types/types/core.d.ts +44 -0
  119. data/vendor/assets/javascripts/tom-select-rails/types/types/index.d.ts +2 -0
  120. data/vendor/assets/javascripts/tom-select-rails/types/types/settings.d.ts +81 -0
  121. data/vendor/assets/javascripts/tom-select-rails/types/utils.d.ts +76 -0
  122. data/vendor/assets/javascripts/tom-select-rails/types/vanilla.d.ts +76 -0
  123. data/vendor/assets/stylesheets/tom-select-rails/css/tom-select.bootstrap4.css +548 -0
  124. data/vendor/assets/stylesheets/tom-select-rails/css/tom-select.bootstrap4.css.map +1 -0
  125. data/vendor/assets/stylesheets/tom-select-rails/css/tom-select.bootstrap4.min.css +2 -0
  126. data/vendor/assets/stylesheets/tom-select-rails/css/tom-select.bootstrap4.min.css.map +1 -0
  127. data/vendor/assets/stylesheets/tom-select-rails/css/tom-select.bootstrap5.css +592 -0
  128. data/vendor/assets/stylesheets/tom-select-rails/css/tom-select.bootstrap5.css.map +1 -0
  129. data/vendor/assets/stylesheets/tom-select-rails/css/tom-select.bootstrap5.min.css +2 -0
  130. data/vendor/assets/stylesheets/tom-select-rails/css/tom-select.bootstrap5.min.css.map +1 -0
  131. data/vendor/assets/stylesheets/tom-select-rails/css/tom-select.css +391 -0
  132. data/vendor/assets/stylesheets/tom-select-rails/css/tom-select.css.map +1 -0
  133. data/vendor/assets/stylesheets/tom-select-rails/css/tom-select.default.css +476 -0
  134. data/vendor/assets/stylesheets/tom-select-rails/css/tom-select.default.css.map +1 -0
  135. data/vendor/assets/stylesheets/tom-select-rails/css/tom-select.default.min.css +2 -0
  136. data/vendor/assets/stylesheets/tom-select-rails/css/tom-select.default.min.css.map +1 -0
  137. data/vendor/assets/stylesheets/tom-select-rails/css/tom-select.min.css +2 -0
  138. data/vendor/assets/stylesheets/tom-select-rails/css/tom-select.min.css.map +1 -0
  139. data/vendor/assets/stylesheets/tom-select-rails/scss/_dropdown.scss +104 -0
  140. data/vendor/assets/stylesheets/tom-select-rails/scss/_items.scss +115 -0
  141. data/vendor/assets/stylesheets/tom-select-rails/scss/plugins/checkbox_options.scss +5 -0
  142. data/vendor/assets/stylesheets/tom-select-rails/scss/plugins/clear_button.scss +30 -0
  143. data/vendor/assets/stylesheets/tom-select-rails/scss/plugins/drag_drop.scss +16 -0
  144. data/vendor/assets/stylesheets/tom-select-rails/scss/plugins/dropdown_header.scss +23 -0
  145. data/vendor/assets/stylesheets/tom-select-rails/scss/plugins/dropdown_input.scss +47 -0
  146. data/vendor/assets/stylesheets/tom-select-rails/scss/plugins/input_autogrow.scss +18 -0
  147. data/vendor/assets/stylesheets/tom-select-rails/scss/plugins/optgroup_columns.scss +23 -0
  148. data/vendor/assets/stylesheets/tom-select-rails/scss/plugins/remove_button.scss +44 -0
  149. data/vendor/assets/stylesheets/tom-select-rails/scss/tom-select.bootstrap4.scss +219 -0
  150. data/vendor/assets/stylesheets/tom-select-rails/scss/tom-select.bootstrap5.scss +274 -0
  151. data/vendor/assets/stylesheets/tom-select-rails/scss/tom-select.default.scss +87 -0
  152. data/vendor/assets/stylesheets/tom-select-rails/scss/tom-select.scss +175 -0
  153. 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,5 @@
1
+ .plugin-checkbox_options {
2
+ .option input{
3
+ margin-right: 0.5rem;
4
+ }
5
+ }
@@ -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
+ }