You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

357 lines
11 KiB

  1. /*!
  2. * Angular Material Design
  3. * https://github.com/angular/material
  4. * @license MIT
  5. * v1.1.1
  6. */
  7. md-input-container:not([md-no-float]) .md-select-placeholder span:first-child {
  8. -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  9. transition: -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  10. transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  11. transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  12. -webkit-transform-origin: left top;
  13. transform-origin: left top; }
  14. [dir=rtl] md-input-container:not([md-no-float]) .md-select-placeholder span:first-child {
  15. -webkit-transform-origin: right top;
  16. transform-origin: right top; }
  17. md-input-container.md-input-focused:not([md-no-float]) .md-select-placeholder span:first-child {
  18. -webkit-transform: translateY(-22px) translateX(-2px) scale(0.75);
  19. transform: translateY(-22px) translateX(-2px) scale(0.75); }
  20. .md-select-menu-container {
  21. position: fixed;
  22. left: 0;
  23. top: 0;
  24. z-index: 90;
  25. opacity: 0;
  26. display: none;
  27. -webkit-transform: translateY(-1px);
  28. transform: translateY(-1px); }
  29. .md-select-menu-container:not(.md-clickable) {
  30. pointer-events: none; }
  31. .md-select-menu-container md-progress-circular {
  32. display: table;
  33. margin: 24px auto !important; }
  34. .md-select-menu-container.md-active {
  35. display: block;
  36. opacity: 1; }
  37. .md-select-menu-container.md-active md-select-menu {
  38. -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  39. transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  40. -webkit-transition-duration: 150ms;
  41. transition-duration: 150ms; }
  42. .md-select-menu-container.md-active md-select-menu > * {
  43. opacity: 1;
  44. -webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
  45. transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
  46. -webkit-transition-duration: 150ms;
  47. transition-duration: 150ms;
  48. -webkit-transition-delay: 100ms;
  49. transition-delay: 100ms; }
  50. .md-select-menu-container.md-leave {
  51. opacity: 0;
  52. -webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
  53. transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
  54. -webkit-transition-duration: 250ms;
  55. transition-duration: 250ms; }
  56. md-input-container > md-select {
  57. margin: 0;
  58. -webkit-box-ordinal-group: 3;
  59. -webkit-order: 2;
  60. order: 2; }
  61. md-input-container:not(.md-input-has-value) md-select[required]:not(.md-no-asterisk) .md-select-value span:first-child:after, md-input-container:not(.md-input-has-value) md-select.ng-required:not(.md-no-asterisk) .md-select-value span:first-child:after {
  62. content: ' *';
  63. font-size: 13px;
  64. vertical-align: top; }
  65. md-input-container.md-input-invalid md-select .md-select-value {
  66. border-bottom-style: solid;
  67. padding-bottom: 1px; }
  68. md-select {
  69. display: -webkit-box;
  70. display: -webkit-flex;
  71. display: flex;
  72. margin: 20px 0 26px 0; }
  73. md-select[required].ng-invalid:not(.md-no-asterisk) .md-select-value span:first-child:after, md-select.ng-required.ng-invalid:not(.md-no-asterisk) .md-select-value span:first-child:after {
  74. content: ' *';
  75. font-size: 13px;
  76. vertical-align: top; }
  77. md-select[disabled] .md-select-value {
  78. background-position: 0 bottom;
  79. background-size: 4px 1px;
  80. background-repeat: repeat-x;
  81. margin-bottom: -1px; }
  82. md-select:focus {
  83. outline: none; }
  84. md-select[disabled]:hover {
  85. cursor: default; }
  86. md-select:not([disabled]):hover {
  87. cursor: pointer; }
  88. md-select:not([disabled]).ng-invalid.ng-touched .md-select-value {
  89. border-bottom-style: solid;
  90. padding-bottom: 1px; }
  91. md-select:not([disabled]):focus .md-select-value {
  92. border-bottom-width: 2px;
  93. border-bottom-style: solid;
  94. padding-bottom: 0; }
  95. md-select:not([disabled]):focus.ng-invalid.ng-touched .md-select-value {
  96. padding-bottom: 0; }
  97. md-input-container.md-input-has-value .md-select-value > span:not(.md-select-icon) {
  98. -webkit-transform: translate3d(0, 1px, 0);
  99. transform: translate3d(0, 1px, 0); }
  100. .md-select-value {
  101. display: -webkit-box;
  102. display: -webkit-flex;
  103. display: flex;
  104. -webkit-box-align: center;
  105. -webkit-align-items: center;
  106. align-items: center;
  107. padding: 2px 2px 1px;
  108. border-bottom-width: 1px;
  109. border-bottom-style: solid;
  110. background-color: transparent;
  111. position: relative;
  112. box-sizing: content-box;
  113. min-width: 64px;
  114. min-height: 26px;
  115. -webkit-box-flex: 1;
  116. -webkit-flex-grow: 1;
  117. flex-grow: 1; }
  118. .md-select-value > span:not(.md-select-icon) {
  119. max-width: 100%;
  120. -webkit-box-flex: 1;
  121. -webkit-flex: 1 1 auto;
  122. flex: 1 1 auto;
  123. text-overflow: ellipsis;
  124. white-space: nowrap;
  125. overflow: hidden; }
  126. .md-select-value > span:not(.md-select-icon) .md-text {
  127. display: inline; }
  128. .md-select-value .md-select-icon {
  129. display: block;
  130. -webkit-box-align: end;
  131. -webkit-align-items: flex-end;
  132. -ms-grid-row-align: flex-end;
  133. align-items: flex-end;
  134. text-align: end;
  135. width: 24px;
  136. margin: 0 4px;
  137. -webkit-transform: translate3d(0, -2px, 0);
  138. transform: translate3d(0, -2px, 0);
  139. font-size: 1.2rem; }
  140. .md-select-value .md-select-icon:after {
  141. display: block;
  142. content: '\25BC';
  143. position: relative;
  144. top: 2px;
  145. speak: none;
  146. font-size: 13px;
  147. -webkit-transform: scaleY(0.5) scaleX(1);
  148. transform: scaleY(0.5) scaleX(1); }
  149. .md-select-value.md-select-placeholder {
  150. display: -webkit-box;
  151. display: -webkit-flex;
  152. display: flex;
  153. -webkit-box-ordinal-group: 2;
  154. -webkit-order: 1;
  155. order: 1;
  156. pointer-events: none;
  157. -webkit-font-smoothing: antialiased;
  158. padding-left: 2px;
  159. z-index: 1; }
  160. md-select-menu {
  161. display: -webkit-box;
  162. display: -webkit-flex;
  163. display: flex;
  164. -webkit-box-orient: vertical;
  165. -webkit-box-direction: normal;
  166. -webkit-flex-direction: column;
  167. flex-direction: column;
  168. box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
  169. max-height: 256px;
  170. min-height: 48px;
  171. overflow-y: hidden;
  172. -webkit-transform-origin: left top;
  173. transform-origin: left top;
  174. -webkit-transform: scale(1);
  175. transform: scale(1); }
  176. md-select-menu.md-reverse {
  177. -webkit-box-orient: vertical;
  178. -webkit-box-direction: reverse;
  179. -webkit-flex-direction: column-reverse;
  180. flex-direction: column-reverse; }
  181. md-select-menu:not(.md-overflow) md-content {
  182. padding-top: 8px;
  183. padding-bottom: 8px; }
  184. [dir=rtl] md-select-menu {
  185. -webkit-transform-origin: right top;
  186. transform-origin: right top; }
  187. md-select-menu md-content {
  188. min-width: 136px;
  189. min-height: 48px;
  190. max-height: 256px;
  191. overflow-y: auto; }
  192. md-select-menu > * {
  193. opacity: 0; }
  194. md-option {
  195. cursor: pointer;
  196. position: relative;
  197. display: -webkit-box;
  198. display: -webkit-flex;
  199. display: flex;
  200. -webkit-box-align: center;
  201. -webkit-align-items: center;
  202. align-items: center;
  203. width: auto;
  204. -webkit-transition: background 0.15s linear;
  205. transition: background 0.15s linear;
  206. padding: 0 16px 0 16px;
  207. height: 48px; }
  208. md-option[disabled] {
  209. cursor: default; }
  210. md-option:focus {
  211. outline: none; }
  212. md-option .md-text {
  213. -webkit-touch-callout: none;
  214. -webkit-user-select: none;
  215. -moz-user-select: none;
  216. -ms-user-select: none;
  217. user-select: none;
  218. width: auto;
  219. white-space: nowrap;
  220. overflow: hidden;
  221. text-overflow: ellipsis; }
  222. md-optgroup {
  223. display: block; }
  224. md-optgroup label {
  225. display: block;
  226. font-size: 14px;
  227. text-transform: uppercase;
  228. padding: 16px;
  229. font-weight: 500; }
  230. md-optgroup md-option {
  231. padding-left: 32px;
  232. padding-right: 32px; }
  233. @media screen and (-ms-high-contrast: active) {
  234. .md-select-backdrop {
  235. background-color: transparent; }
  236. md-select-menu {
  237. border: 1px solid #fff; } }
  238. md-select-menu[multiple] md-option.md-checkbox-enabled {
  239. padding-left: 40px;
  240. padding-right: 16px; }
  241. [dir=rtl] md-select-menu[multiple] md-option.md-checkbox-enabled {
  242. padding-left: 16px; }
  243. [dir=rtl] md-select-menu[multiple] md-option.md-checkbox-enabled {
  244. padding-right: 40px; }
  245. md-select-menu[multiple] md-option.md-checkbox-enabled .md-container {
  246. position: absolute;
  247. top: 50%;
  248. -webkit-transform: translateY(-50%);
  249. transform: translateY(-50%);
  250. box-sizing: border-box;
  251. display: inline-block;
  252. width: 20px;
  253. height: 20px;
  254. left: 0;
  255. right: auto; }
  256. [dir=rtl] md-select-menu[multiple] md-option.md-checkbox-enabled .md-container {
  257. left: auto; }
  258. [dir=rtl] md-select-menu[multiple] md-option.md-checkbox-enabled .md-container {
  259. right: 0; }
  260. md-select-menu[multiple] md-option.md-checkbox-enabled .md-container:before {
  261. box-sizing: border-box;
  262. background-color: transparent;
  263. border-radius: 50%;
  264. content: '';
  265. position: absolute;
  266. display: block;
  267. height: auto;
  268. left: 0;
  269. top: 0;
  270. right: 0;
  271. bottom: 0;
  272. -webkit-transition: all 0.5s;
  273. transition: all 0.5s;
  274. width: auto; }
  275. md-select-menu[multiple] md-option.md-checkbox-enabled .md-container:after {
  276. box-sizing: border-box;
  277. content: '';
  278. position: absolute;
  279. top: -10px;
  280. right: -10px;
  281. bottom: -10px;
  282. left: -10px; }
  283. md-select-menu[multiple] md-option.md-checkbox-enabled .md-container .md-ripple-container {
  284. position: absolute;
  285. display: block;
  286. width: auto;
  287. height: auto;
  288. left: -15px;
  289. top: -15px;
  290. right: -15px;
  291. bottom: -15px; }
  292. md-select-menu[multiple] md-option.md-checkbox-enabled .md-icon {
  293. box-sizing: border-box;
  294. -webkit-transition: 240ms;
  295. transition: 240ms;
  296. position: absolute;
  297. top: 0;
  298. left: 0;
  299. width: 20px;
  300. height: 20px;
  301. border-width: 2px;
  302. border-style: solid;
  303. border-radius: 2px; }
  304. md-select-menu[multiple] md-option.md-checkbox-enabled[selected] .md-icon {
  305. border-color: transparent; }
  306. md-select-menu[multiple] md-option.md-checkbox-enabled[selected] .md-icon:after {
  307. box-sizing: border-box;
  308. -webkit-transform: rotate(45deg);
  309. transform: rotate(45deg);
  310. position: absolute;
  311. left: 4.66667px;
  312. top: 0.22222px;
  313. display: table;
  314. width: 6.66667px;
  315. height: 13.33333px;
  316. border-width: 2px;
  317. border-style: solid;
  318. border-top: 0;
  319. border-left: 0;
  320. content: ''; }
  321. md-select-menu[multiple] md-option.md-checkbox-enabled[disabled] {
  322. cursor: default; }
  323. md-select-menu[multiple] md-option.md-checkbox-enabled.md-indeterminate .md-icon:after {
  324. box-sizing: border-box;
  325. position: absolute;
  326. top: 50%;
  327. left: 50%;
  328. -webkit-transform: translate(-50%, -50%);
  329. transform: translate(-50%, -50%);
  330. display: table;
  331. width: 12px;
  332. height: 2px;
  333. border-width: 2px;
  334. border-style: solid;
  335. border-top: 0;
  336. border-left: 0;
  337. content: ''; }
  338. md-select-menu[multiple] md-option.md-checkbox-enabled .md-container {
  339. margin-left: 10.66667px;
  340. margin-right: auto; }
  341. [dir=rtl] md-select-menu[multiple] md-option.md-checkbox-enabled .md-container {
  342. margin-left: auto; }
  343. [dir=rtl] md-select-menu[multiple] md-option.md-checkbox-enabled .md-container {
  344. margin-right: 10.66667px; }