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.

356 lines
11 KiB

7 years ago
  1. /*!
  2. * Angular Material Design
  3. * https://github.com/angular/material
  4. * @license MIT
  5. * v1.1.3
  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. align-items: flex-end;
  133. text-align: end;
  134. width: 24px;
  135. margin: 0 4px;
  136. -webkit-transform: translate3d(0, -2px, 0);
  137. transform: translate3d(0, -2px, 0);
  138. font-size: 1.2rem; }
  139. .md-select-value .md-select-icon:after {
  140. display: block;
  141. content: '\25BC';
  142. position: relative;
  143. top: 2px;
  144. speak: none;
  145. font-size: 13px;
  146. -webkit-transform: scaleY(0.5) scaleX(1);
  147. transform: scaleY(0.5) scaleX(1); }
  148. .md-select-value.md-select-placeholder {
  149. display: -webkit-box;
  150. display: -webkit-flex;
  151. display: flex;
  152. -webkit-box-ordinal-group: 2;
  153. -webkit-order: 1;
  154. order: 1;
  155. pointer-events: none;
  156. -webkit-font-smoothing: antialiased;
  157. padding-left: 2px;
  158. z-index: 1; }
  159. md-select-menu {
  160. display: -webkit-box;
  161. display: -webkit-flex;
  162. display: flex;
  163. -webkit-box-orient: vertical;
  164. -webkit-box-direction: normal;
  165. -webkit-flex-direction: column;
  166. flex-direction: column;
  167. 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);
  168. max-height: 256px;
  169. min-height: 48px;
  170. overflow-y: hidden;
  171. -webkit-transform-origin: left top;
  172. transform-origin: left top;
  173. -webkit-transform: scale(1);
  174. transform: scale(1); }
  175. md-select-menu.md-reverse {
  176. -webkit-box-orient: vertical;
  177. -webkit-box-direction: reverse;
  178. -webkit-flex-direction: column-reverse;
  179. flex-direction: column-reverse; }
  180. md-select-menu:not(.md-overflow) md-content {
  181. padding-top: 8px;
  182. padding-bottom: 8px; }
  183. [dir=rtl] md-select-menu {
  184. -webkit-transform-origin: right top;
  185. transform-origin: right top; }
  186. md-select-menu md-content {
  187. min-width: 136px;
  188. min-height: 48px;
  189. max-height: 256px;
  190. overflow-y: auto; }
  191. md-select-menu > * {
  192. opacity: 0; }
  193. md-option {
  194. cursor: pointer;
  195. position: relative;
  196. display: -webkit-box;
  197. display: -webkit-flex;
  198. display: flex;
  199. -webkit-box-align: center;
  200. -webkit-align-items: center;
  201. align-items: center;
  202. width: auto;
  203. -webkit-transition: background 0.15s linear;
  204. transition: background 0.15s linear;
  205. padding: 0 16px 0 16px;
  206. height: 48px; }
  207. md-option[disabled] {
  208. cursor: default; }
  209. md-option:focus {
  210. outline: none; }
  211. md-option .md-text {
  212. -webkit-touch-callout: none;
  213. -webkit-user-select: none;
  214. -moz-user-select: none;
  215. -ms-user-select: none;
  216. user-select: none;
  217. width: auto;
  218. white-space: nowrap;
  219. overflow: hidden;
  220. text-overflow: ellipsis; }
  221. md-optgroup {
  222. display: block; }
  223. md-optgroup label {
  224. display: block;
  225. font-size: 14px;
  226. text-transform: uppercase;
  227. padding: 16px;
  228. font-weight: 500; }
  229. md-optgroup md-option {
  230. padding-left: 32px;
  231. padding-right: 32px; }
  232. @media screen and (-ms-high-contrast: active) {
  233. .md-select-backdrop {
  234. background-color: transparent; }
  235. md-select-menu {
  236. border: 1px solid #fff; } }
  237. md-select-menu[multiple] md-option.md-checkbox-enabled {
  238. padding-left: 40px;
  239. padding-right: 16px; }
  240. [dir=rtl] md-select-menu[multiple] md-option.md-checkbox-enabled {
  241. padding-left: 16px; }
  242. [dir=rtl] md-select-menu[multiple] md-option.md-checkbox-enabled {
  243. padding-right: 40px; }
  244. md-select-menu[multiple] md-option.md-checkbox-enabled .md-container {
  245. position: absolute;
  246. top: 50%;
  247. -webkit-transform: translateY(-50%);
  248. transform: translateY(-50%);
  249. box-sizing: border-box;
  250. display: inline-block;
  251. width: 20px;
  252. height: 20px;
  253. left: 0;
  254. right: auto; }
  255. [dir=rtl] md-select-menu[multiple] md-option.md-checkbox-enabled .md-container {
  256. left: auto; }
  257. [dir=rtl] md-select-menu[multiple] md-option.md-checkbox-enabled .md-container {
  258. right: 0; }
  259. md-select-menu[multiple] md-option.md-checkbox-enabled .md-container:before {
  260. box-sizing: border-box;
  261. background-color: transparent;
  262. border-radius: 50%;
  263. content: '';
  264. position: absolute;
  265. display: block;
  266. height: auto;
  267. left: 0;
  268. top: 0;
  269. right: 0;
  270. bottom: 0;
  271. -webkit-transition: all 0.5s;
  272. transition: all 0.5s;
  273. width: auto; }
  274. md-select-menu[multiple] md-option.md-checkbox-enabled .md-container:after {
  275. box-sizing: border-box;
  276. content: '';
  277. position: absolute;
  278. top: -10px;
  279. right: -10px;
  280. bottom: -10px;
  281. left: -10px; }
  282. md-select-menu[multiple] md-option.md-checkbox-enabled .md-container .md-ripple-container {
  283. position: absolute;
  284. display: block;
  285. width: auto;
  286. height: auto;
  287. left: -15px;
  288. top: -15px;
  289. right: -15px;
  290. bottom: -15px; }
  291. md-select-menu[multiple] md-option.md-checkbox-enabled .md-icon {
  292. box-sizing: border-box;
  293. -webkit-transition: 240ms;
  294. transition: 240ms;
  295. position: absolute;
  296. top: 0;
  297. left: 0;
  298. width: 20px;
  299. height: 20px;
  300. border-width: 2px;
  301. border-style: solid;
  302. border-radius: 2px; }
  303. md-select-menu[multiple] md-option.md-checkbox-enabled[selected] .md-icon {
  304. border-color: transparent; }
  305. md-select-menu[multiple] md-option.md-checkbox-enabled[selected] .md-icon:after {
  306. box-sizing: border-box;
  307. -webkit-transform: rotate(45deg);
  308. transform: rotate(45deg);
  309. position: absolute;
  310. left: 4.66667px;
  311. top: 0.22222px;
  312. display: table;
  313. width: 6.66667px;
  314. height: 13.33333px;
  315. border-width: 2px;
  316. border-style: solid;
  317. border-top: 0;
  318. border-left: 0;
  319. content: ''; }
  320. md-select-menu[multiple] md-option.md-checkbox-enabled[disabled] {
  321. cursor: default; }
  322. md-select-menu[multiple] md-option.md-checkbox-enabled.md-indeterminate .md-icon:after {
  323. box-sizing: border-box;
  324. position: absolute;
  325. top: 50%;
  326. left: 50%;
  327. -webkit-transform: translate(-50%, -50%);
  328. transform: translate(-50%, -50%);
  329. display: table;
  330. width: 12px;
  331. height: 2px;
  332. border-width: 2px;
  333. border-style: solid;
  334. border-top: 0;
  335. border-left: 0;
  336. content: ''; }
  337. md-select-menu[multiple] md-option.md-checkbox-enabled .md-container {
  338. margin-left: 10.66667px;
  339. margin-right: auto; }
  340. [dir=rtl] md-select-menu[multiple] md-option.md-checkbox-enabled .md-container {
  341. margin-left: auto; }
  342. [dir=rtl] md-select-menu[multiple] md-option.md-checkbox-enabled .md-container {
  343. margin-right: 10.66667px; }