ng-select.component.scss 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316
  1. @mixin box-sizing() {
  2. -webkit-box-sizing: border-box;
  3. -moz-box-sizing: border-box;
  4. box-sizing: border-box;
  5. }
  6. @mixin wrap-text() {
  7. white-space: nowrap;
  8. overflow: hidden;
  9. text-overflow: ellipsis;
  10. }
  11. .ng-select {
  12. position: relative;
  13. display: block;
  14. @include box-sizing;
  15. div,
  16. input,
  17. span {
  18. @include box-sizing;
  19. }
  20. [hidden] {
  21. display: none;
  22. }
  23. &.ng-select-searchable {
  24. .ng-select-container .ng-value-container .ng-input {
  25. opacity: 1;
  26. }
  27. }
  28. &.ng-select-opened .ng-select-container {
  29. z-index: 1001;
  30. }
  31. &.ng-select-disabled {
  32. .ng-select-container {
  33. .ng-value-container {
  34. .ng-placeholder,
  35. .ng-value {
  36. user-select: none;
  37. cursor: default;
  38. }
  39. }
  40. }
  41. .ng-arrow-wrapper {
  42. cursor: default;
  43. }
  44. }
  45. &.ng-select-filtered {
  46. .ng-placeholder {
  47. display: none;
  48. }
  49. }
  50. .ng-select-container {
  51. cursor: default;
  52. display: flex;
  53. outline: none;
  54. overflow: hidden;
  55. position: relative;
  56. width: 100%;
  57. .ng-value-container {
  58. display: flex;
  59. flex: 1;
  60. .ng-input {
  61. opacity: 0;
  62. > input {
  63. box-sizing: content-box;
  64. background: none transparent;
  65. border: 0 none;
  66. box-shadow: none;
  67. outline: none;
  68. padding: 0;
  69. cursor: default;
  70. width: 100%;
  71. &::-ms-clear {
  72. display: none;
  73. }
  74. &[readonly] {
  75. user-select: unset;
  76. width: 0;
  77. padding: 0;
  78. }
  79. }
  80. }
  81. }
  82. }
  83. &.ng-select-single {
  84. &.ng-select-filtered {
  85. .ng-select-container .ng-value-container .ng-value {
  86. visibility: hidden;
  87. }
  88. }
  89. .ng-select-container {
  90. .ng-value-container {
  91. @include wrap-text;
  92. .ng-value {
  93. @include wrap-text;
  94. .ng-value-icon {
  95. display: none;
  96. }
  97. }
  98. .ng-input {
  99. position: absolute;
  100. left: 0;
  101. width: 100%;
  102. }
  103. }
  104. }
  105. }
  106. &.ng-select-multiple {
  107. &.ng-select-disabled {
  108. > .ng-select-container .ng-value-container .ng-value {
  109. .ng-value-icon {
  110. display: none;
  111. }
  112. }
  113. }
  114. .ng-select-container {
  115. .ng-value-container {
  116. flex-wrap: wrap;
  117. .ng-placeholder {
  118. position: absolute;
  119. }
  120. .ng-value {
  121. white-space: nowrap;
  122. &.ng-value-disabled {
  123. .ng-value-icon {
  124. display: none;
  125. }
  126. }
  127. .ng-value-icon {
  128. cursor: pointer;
  129. }
  130. }
  131. .ng-input {
  132. flex: 1;
  133. z-index: 2;
  134. }
  135. .ng-placeholder {
  136. z-index: 1;
  137. }
  138. }
  139. }
  140. }
  141. .ng-clear-wrapper {
  142. cursor: pointer;
  143. position: relative;
  144. width: 17px;
  145. user-select: none;
  146. .ng-clear {
  147. display: inline-block;
  148. font-size: 18px;
  149. line-height: 1;
  150. pointer-events: none;
  151. }
  152. }
  153. .ng-spinner-loader {
  154. border-radius: 50%;
  155. width: 17px;
  156. height: 17px;
  157. margin-right: 5px;
  158. font-size: 10px;
  159. position: relative;
  160. text-indent: -9999em;
  161. border-top: 2px solid rgba(66, 66, 66, 0.2);
  162. border-right: 2px solid rgba(66, 66, 66, 0.2);
  163. border-bottom: 2px solid rgba(66, 66, 66, 0.2);
  164. border-left: 2px solid #424242;
  165. transform: translateZ(0);
  166. animation: load8 0.8s infinite linear;
  167. &:after {
  168. border-radius: 50%;
  169. width: 17px;
  170. height: 17px;
  171. }
  172. @-webkit-keyframes load8 {
  173. 0% {
  174. -webkit-transform: rotate(0deg);
  175. transform: rotate(0deg);
  176. }
  177. 100% {
  178. -webkit-transform: rotate(360deg);
  179. transform: rotate(360deg);
  180. }
  181. }
  182. @keyframes load8 {
  183. 0% {
  184. -webkit-transform: rotate(0deg);
  185. transform: rotate(0deg);
  186. }
  187. 100% {
  188. -webkit-transform: rotate(360deg);
  189. transform: rotate(360deg);
  190. }
  191. }
  192. }
  193. .ng-arrow-wrapper {
  194. cursor: pointer;
  195. position: relative;
  196. text-align: center;
  197. user-select: none;
  198. .ng-arrow {
  199. pointer-events: none;
  200. display: inline-block;
  201. height: 0;
  202. width: 0;
  203. position: relative;
  204. }
  205. }
  206. }
  207. .ng-dropdown-panel {
  208. box-sizing: border-box;
  209. position: absolute;
  210. opacity: 0;
  211. width: 100%;
  212. z-index: 1050;
  213. -webkit-overflow-scrolling: touch;
  214. .ng-dropdown-panel-items {
  215. display: block;
  216. height: auto;
  217. -webkit-box-sizing: border-box;
  218. -moz-box-sizing: border-box;
  219. box-sizing: border-box;
  220. max-height: 240px;
  221. overflow-y: auto;
  222. .ng-optgroup {
  223. @include wrap-text();
  224. }
  225. .ng-option {
  226. box-sizing: border-box;
  227. cursor: pointer;
  228. display: block;
  229. @include wrap-text();
  230. .ng-option-label:empty:before {
  231. content: '\200b';
  232. }
  233. .highlighted {
  234. font-weight: bold;
  235. text-decoration: underline;
  236. }
  237. &.disabled {
  238. cursor: default;
  239. }
  240. }
  241. }
  242. .scroll-host {
  243. overflow: hidden;
  244. overflow-y: auto;
  245. position: relative;
  246. display: block;
  247. -webkit-overflow-scrolling: touch;
  248. }
  249. .scrollable-content {
  250. top: 0;
  251. left: 0;
  252. width: 100%;
  253. height: 100%;
  254. position: absolute;
  255. }
  256. .total-padding {
  257. width: 1px;
  258. opacity: 0;
  259. }
  260. }
  261. .ng-visually-hidden {
  262. position: absolute !important;
  263. width: 1px;
  264. height: 1px;
  265. margin: -1px;
  266. padding: 0;
  267. overflow: hidden;
  268. clip: rect(0 0 0 0);
  269. border: 0;
  270. white-space: nowrap;
  271. }