/public/src/css/libs/jquery.selectBoxIt.css

https://gitlab.com/modustudio/animals-d · CSS · 295 lines · 217 code · 35 blank · 43 comment · 0 complexity · e0e9e216e4efdc5c99fc80e7258b3b46 MD5 · raw file

  1. /*
  2. * jquery.selectBoxIt.css 3.8.1
  3. * Author: @gregfranko
  4. */
  5. /*
  6. Common CSS Properties
  7. ---------------------
  8. These properties will be applied to any themes that you use
  9. */
  10. /* SelectBoxIt container */
  11. .selectboxit-container {
  12. width:100%;
  13. position: relative;
  14. display: inline-block;
  15. vertical-align: top;
  16. }
  17. /* Styles that apply to all SelectBoxIt elements */
  18. .selectboxit-container * {
  19. font: 14px Helvetica, Arial;
  20. /* Prevents text selection */
  21. -webkit-touch-callout: none;
  22. -webkit-user-select: none;
  23. -khtml-user-select: none;
  24. -moz-user-select: -moz-none;
  25. -ms-user-select: none;
  26. -o-user-select: none;
  27. user-select: none;
  28. outline: none;
  29. white-space: nowrap;
  30. }
  31. /* Button */
  32. .selectboxit-container .selectboxit {
  33. width:100%;
  34. border:1px solid #eaeaea;
  35. /* width: 220px; */ /* Width of the dropdown button */
  36. cursor: pointer;
  37. margin: 0;
  38. padding: 0;
  39. /* border-radius: 6px; */
  40. overflow: hidden;
  41. display: block;
  42. position: relative;
  43. background:#fff;
  44. }
  45. /* Height and Vertical Alignment of Text */
  46. .selectboxit-container > span, .selectboxit-container > span span {
  47. font-size:13px; color:#767676;
  48. height: 40px; /* Height of the drop down */
  49. line-height: 40px; /* Vertically positions the drop down text */
  50. display: block;
  51. box-sizing:border-box;
  52. }
  53. span.selectboxit.select30, span.selectboxit.select30 span{
  54. height: 30px !important;
  55. line-height: 30px !important;
  56. }
  57. .selectboxit-container .selectboxit-options a {
  58. font-size:13px; color:#767676;
  59. height: 28px; /* Height of the drop down */
  60. line-height: 28px; /* Vertically positions the drop down text */
  61. display: block;
  62. }
  63. /* Focus pseudo selector */
  64. .selectboxit-container .selectboxit:focus {
  65. outline: 0;
  66. }
  67. /* Disabled Mouse Interaction */
  68. .selectboxit.selectboxit-disabled, .selectboxit-options .selectboxit-disabled {
  69. opacity: 0.65;
  70. filter: alpha(opacity=65);
  71. -webkit-box-shadow: none;
  72. -moz-box-shadow: none;
  73. box-shadow: none;
  74. cursor: default;
  75. }
  76. /* Button Text */
  77. .selectboxit-text {
  78. text-indent: 5px;
  79. overflow: hidden;
  80. text-overflow: ellipsis;
  81. float: left;
  82. }
  83. .selectboxit .selectboxit-option-icon-container {
  84. margin-left: 5px;
  85. }
  86. /* Options List */
  87. .selectboxit-container .selectboxit-options {
  88. -moz-box-sizing: border-box;
  89. box-sizing: border-box;
  90. min-width: 100%; /* Minimum Width of the dropdown list box options */
  91. *width: 100%;
  92. margin: 0;
  93. padding: 0;
  94. list-style: none;
  95. position: absolute;
  96. overflow-x: hidden;
  97. overflow-y: auto;
  98. cursor: pointer;
  99. display: none;
  100. z-index: 9999999999999;
  101. /* border-radius: 6px; */
  102. text-align: left;
  103. -webkit-box-shadow: none;
  104. -moz-box-shadow: none;
  105. box-shadow: none;
  106. }
  107. /* Individual options */
  108. .selectboxit-option .selectboxit-option-anchor{
  109. padding: 0 2px;
  110. }
  111. /* Individual Option Hover Action */
  112. .selectboxit-option .selectboxit-option-anchor:hover {
  113. text-decoration: none;
  114. }
  115. /* Individual Option Optgroup Header */
  116. .selectboxit-option, .selectboxit-optgroup-header {
  117. text-indent: 5px; /* Horizontal Positioning of the select box option text */
  118. margin: 0;
  119. list-style-type: none;
  120. }
  121. /* The first Drop Down option */
  122. .selectboxit-option-first {
  123. border-top-right-radius: 6px;
  124. border-top-left-radius: 6px;
  125. }
  126. /* The first Drop Down option optgroup */
  127. .selectboxit-optgroup-header + .selectboxit-option-first {
  128. border-top-right-radius: 0px;
  129. border-top-left-radius: 0px;
  130. }
  131. /* The last Drop Down option */
  132. .selectboxit-option-last {
  133. border-bottom-right-radius: 6px;
  134. border-bottom-left-radius: 6px;
  135. }
  136. /* Drop Down optgroup headers */
  137. .selectboxit-optgroup-header {
  138. font-weight: bold;
  139. }
  140. /* Drop Down optgroup header hover psuedo class */
  141. .selectboxit-optgroup-header:hover {
  142. cursor: default;
  143. }
  144. /* Drop Down down arrow container */
  145. .selectboxit-arrow-container {
  146. /* Positions the down arrow */
  147. width: 30px;
  148. position: absolute;
  149. right: 0;
  150. }
  151. /* Drop Down down arrow */
  152. .selectboxit .selectboxit-arrow-container .selectboxit-arrow {
  153. /* Horizontally centers the down arrow */
  154. margin: 0 auto;
  155. position: absolute;
  156. top: 50%;
  157. right: 0;
  158. left: 0;
  159. }
  160. /* Drop Down down arrow for jQueryUI and jQuery Mobile */
  161. .selectboxit .selectboxit-arrow-container .selectboxit-arrow.ui-icon {
  162. top: 30%;
  163. }
  164. /* Drop Down individual option icon positioning */
  165. .selectboxit-option-icon-container {
  166. float: left;
  167. }
  168. .selectboxit-container .selectboxit-option-icon {
  169. margin: 0;
  170. padding: 0;
  171. vertical-align: middle;
  172. }
  173. /* Drop Down individual option icon positioning */
  174. .selectboxit-option-icon-url {
  175. width: 18px;
  176. background-size: 18px 18px;
  177. background-repeat: no-repeat;
  178. height: 100%;
  179. background-position: center;
  180. float: left;
  181. }
  182. .selectboxit-rendering {
  183. display: inline-block !important;
  184. *display: inline !important;
  185. zoom: 1 !important;
  186. visibility: visible !important;
  187. position: absolute !important;
  188. top: -9999px !important;
  189. left: -9999px !important;
  190. }
  191. /* jQueryUI and jQuery Mobile compatability fix - Feel free to remove this style if you are not using jQuery Mobile */
  192. .jqueryui .ui-icon {
  193. background-color: inherit;
  194. }
  195. /* Another jQueryUI and jQuery Mobile compatability fix - Feel free to remove this style if you are not using jQuery Mobile */
  196. .jqueryui .ui-icon-triangle-1-s {
  197. background-position: -64px -16px;
  198. }
  199. /*
  200. Default Theme
  201. -------------
  202. Note: Feel free to remove all of the CSS underneath this line if you are not using the default theme
  203. */
  204. .selectboxit-btn {
  205. background-color: #f5f5f5;
  206. background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
  207. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
  208. background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  209. background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
  210. background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
  211. background-repeat: repeat-x;
  212. border: 1px solid #cccccc;
  213. border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  214. border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  215. border-bottom-color: #b3b3b3;
  216. }
  217. .selectboxit-btn.selectboxit-enabled:hover,
  218. .selectboxit-btn.selectboxit-enabled:focus,
  219. .selectboxit-btn.selectboxit-enabled:active {
  220. color: #333333;
  221. background-color: #e6e6e6;
  222. }
  223. .selectboxit-btn.selectboxit-enabled:hover,
  224. .selectboxit-btn.selectboxit-enabled:focus {
  225. color: #333333;
  226. text-decoration: none;
  227. background-position: 0 -15px;
  228. background-color:#fff;
  229. }
  230. .selectboxit-default-arrow {
  231. width: 0;
  232. height: 0;
  233. border-top: 4px solid #000000;
  234. border-right: 4px solid transparent;
  235. border-left: 4px solid transparent;
  236. }
  237. .selectboxit-list {
  238. background-color: #ffffff;
  239. border: 1px solid #ccc;
  240. border: 1px solid rgba(0, 0, 0, 0.2);
  241. -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  242. -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  243. box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  244. }
  245. .selectboxit-list .selectboxit-option-anchor {
  246. color: #333333;
  247. }
  248. .selectboxit-list > .selectboxit-focus > .selectboxit-option-anchor {
  249. color: #ffffff;
  250. background-color: #0081c2;
  251. background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
  252. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
  253. background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
  254. background-image: -o-linear-gradient(top, #0088cc, #0077b3);
  255. background-image: linear-gradient(to bottom, #0088cc, #0077b3);
  256. background-repeat: repeat-x;
  257. }
  258. .selectboxit-list > .selectboxit-disabled > .selectboxit-option-anchor {
  259. color: #999999;
  260. }