mdc.drawer.css 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454
  1. /**
  2. * @license
  3. * Copyright Google LLC All Rights Reserved.
  4. *
  5. * Use of this source code is governed by an MIT-style license that can be
  6. * found in the LICENSE file at https://github.com/material-components/material-components-web/blob/master/LICENSE
  7. */
  8. .mdc-drawer {
  9. border-color: rgba(0, 0, 0, 0.12);
  10. background-color: #fff;
  11. /* @alternate */
  12. background-color: var(--mdc-theme-surface, #fff);
  13. /* @noflip */
  14. /*rtl:ignore*/
  15. border-top-left-radius: 0;
  16. /* @noflip */
  17. /*rtl:ignore*/
  18. border-top-right-radius: 0;
  19. /* @alternate */
  20. /* @noflip */
  21. /*rtl:ignore*/
  22. border-top-right-radius: var(--mdc-shape-large, 0);
  23. /* @noflip */
  24. /*rtl:ignore*/
  25. border-bottom-right-radius: 0;
  26. /* @alternate */
  27. /* @noflip */
  28. /*rtl:ignore*/
  29. border-bottom-right-radius: var(--mdc-shape-large, 0);
  30. /* @noflip */
  31. /*rtl:ignore*/
  32. border-bottom-left-radius: 0;
  33. z-index: 6;
  34. width: 256px;
  35. display: flex;
  36. flex-direction: column;
  37. flex-shrink: 0;
  38. box-sizing: border-box;
  39. height: 100%;
  40. /* @noflip */
  41. /*rtl:ignore*/
  42. border-right-width: 1px;
  43. /* @noflip */
  44. /*rtl:ignore*/
  45. border-right-style: solid;
  46. overflow: hidden;
  47. transition-property: -webkit-transform;
  48. transition-property: transform;
  49. transition-property: transform, -webkit-transform;
  50. transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  51. }
  52. .mdc-drawer .mdc-drawer__title {
  53. color: rgba(0, 0, 0, 0.87);
  54. }
  55. .mdc-drawer .mdc-deprecated-list-group__subheader {
  56. color: rgba(0, 0, 0, 0.6);
  57. }
  58. .mdc-drawer .mdc-drawer__subtitle {
  59. color: rgba(0, 0, 0, 0.6);
  60. }
  61. .mdc-drawer .mdc-deprecated-list-item__graphic {
  62. color: rgba(0, 0, 0, 0.6);
  63. }
  64. .mdc-drawer .mdc-deprecated-list-item {
  65. color: rgba(0, 0, 0, 0.87);
  66. }
  67. .mdc-drawer .mdc-deprecated-list-item--activated .mdc-deprecated-list-item__graphic {
  68. color: #6200ee;
  69. }
  70. .mdc-drawer .mdc-deprecated-list-item--activated {
  71. color: rgba(98, 0, 238, 0.87);
  72. }
  73. [dir=rtl] .mdc-drawer, .mdc-drawer[dir=rtl] {
  74. /*rtl:begin:ignore*/
  75. /* @noflip */
  76. /*rtl:ignore*/
  77. border-top-left-radius: 0;
  78. /* @alternate */
  79. /* @noflip */
  80. /*rtl:ignore*/
  81. border-top-left-radius: var(--mdc-shape-large, 0);
  82. /* @noflip */
  83. /*rtl:ignore*/
  84. border-top-right-radius: 0;
  85. /* @noflip */
  86. /*rtl:ignore*/
  87. border-bottom-right-radius: 0;
  88. /* @noflip */
  89. /*rtl:ignore*/
  90. border-bottom-left-radius: 0;
  91. /* @alternate */
  92. /* @noflip */
  93. /*rtl:ignore*/
  94. border-bottom-left-radius: var(--mdc-shape-large, 0);
  95. /*rtl:end:ignore*/
  96. }
  97. .mdc-drawer .mdc-deprecated-list-item {
  98. border-radius: 4px;
  99. /* @alternate */
  100. border-radius: var(--mdc-shape-small, 4px);
  101. }
  102. .mdc-drawer.mdc-drawer--open:not(.mdc-drawer--closing) + .mdc-drawer-app-content {
  103. /* @noflip */
  104. /*rtl:ignore*/
  105. margin-left: 256px;
  106. /* @noflip */
  107. /*rtl:ignore*/
  108. margin-right: 0;
  109. }
  110. [dir=rtl] .mdc-drawer.mdc-drawer--open:not(.mdc-drawer--closing) + .mdc-drawer-app-content, .mdc-drawer.mdc-drawer--open:not(.mdc-drawer--closing) + .mdc-drawer-app-content[dir=rtl] {
  111. /*rtl:begin:ignore*/
  112. /* @noflip */
  113. /*rtl:ignore*/
  114. margin-left: 0;
  115. /* @noflip */
  116. /*rtl:ignore*/
  117. margin-right: 256px;
  118. /*rtl:end:ignore*/
  119. }
  120. [dir=rtl] .mdc-drawer, .mdc-drawer[dir=rtl] {
  121. /*rtl:begin:ignore*/
  122. /* @noflip */
  123. /*rtl:ignore*/
  124. border-right-width: 0;
  125. /* @noflip */
  126. /*rtl:ignore*/
  127. border-left-width: 1px;
  128. /* @noflip */
  129. /*rtl:ignore*/
  130. border-right-style: none;
  131. /* @noflip */
  132. /*rtl:ignore*/
  133. border-left-style: solid;
  134. /*rtl:end:ignore*/
  135. }
  136. .mdc-drawer .mdc-deprecated-list-item {
  137. -moz-osx-font-smoothing: grayscale;
  138. -webkit-font-smoothing: antialiased;
  139. font-family: Roboto, sans-serif;
  140. /* @alternate */
  141. font-family: var(--mdc-typography-subtitle2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
  142. font-size: 0.875rem;
  143. /* @alternate */
  144. font-size: var(--mdc-typography-subtitle2-font-size, 0.875rem);
  145. line-height: 1.375rem;
  146. /* @alternate */
  147. line-height: var(--mdc-typography-subtitle2-line-height, 1.375rem);
  148. font-weight: 500;
  149. /* @alternate */
  150. font-weight: var(--mdc-typography-subtitle2-font-weight, 500);
  151. letter-spacing: 0.0071428571em;
  152. /* @alternate */
  153. letter-spacing: var(--mdc-typography-subtitle2-letter-spacing, 0.0071428571em);
  154. text-decoration: inherit;
  155. /* @alternate */
  156. -webkit-text-decoration: var(--mdc-typography-subtitle2-text-decoration, inherit);
  157. text-decoration: var(--mdc-typography-subtitle2-text-decoration, inherit);
  158. text-transform: inherit;
  159. /* @alternate */
  160. text-transform: var(--mdc-typography-subtitle2-text-transform, inherit);
  161. height: calc(48px - 2 * 4px);
  162. margin: 8px 8px;
  163. padding: 0 8px;
  164. }
  165. .mdc-drawer .mdc-deprecated-list-item:nth-child(1) {
  166. margin-top: 2px;
  167. }
  168. .mdc-drawer .mdc-deprecated-list-item:nth-last-child(1) {
  169. margin-bottom: 0;
  170. }
  171. .mdc-drawer .mdc-deprecated-list-group__subheader {
  172. -moz-osx-font-smoothing: grayscale;
  173. -webkit-font-smoothing: antialiased;
  174. font-family: Roboto, sans-serif;
  175. /* @alternate */
  176. font-family: var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
  177. font-size: 0.875rem;
  178. /* @alternate */
  179. font-size: var(--mdc-typography-body2-font-size, 0.875rem);
  180. line-height: 1.25rem;
  181. /* @alternate */
  182. line-height: var(--mdc-typography-body2-line-height, 1.25rem);
  183. font-weight: 400;
  184. /* @alternate */
  185. font-weight: var(--mdc-typography-body2-font-weight, 400);
  186. letter-spacing: 0.0178571429em;
  187. /* @alternate */
  188. letter-spacing: var(--mdc-typography-body2-letter-spacing, 0.0178571429em);
  189. text-decoration: inherit;
  190. /* @alternate */
  191. -webkit-text-decoration: var(--mdc-typography-body2-text-decoration, inherit);
  192. text-decoration: var(--mdc-typography-body2-text-decoration, inherit);
  193. text-transform: inherit;
  194. /* @alternate */
  195. text-transform: var(--mdc-typography-body2-text-transform, inherit);
  196. display: block;
  197. margin-top: 0;
  198. /* @alternate */
  199. line-height: normal;
  200. margin: 0;
  201. padding: 0 16px;
  202. }
  203. .mdc-drawer .mdc-deprecated-list-group__subheader::before {
  204. display: inline-block;
  205. width: 0;
  206. height: 24px;
  207. content: "";
  208. vertical-align: 0;
  209. }
  210. .mdc-drawer .mdc-deprecated-list-divider {
  211. margin: 3px 0 4px;
  212. }
  213. .mdc-drawer .mdc-deprecated-list-item__text,
  214. .mdc-drawer .mdc-deprecated-list-item__graphic {
  215. pointer-events: none;
  216. }
  217. .mdc-drawer--animate {
  218. -webkit-transform: translateX(-100%);
  219. transform: translateX(-100%);
  220. }
  221. [dir=rtl] .mdc-drawer--animate, .mdc-drawer--animate[dir=rtl] {
  222. /*rtl:begin:ignore*/
  223. -webkit-transform: translateX(100%);
  224. transform: translateX(100%);
  225. /*rtl:end:ignore*/
  226. }
  227. .mdc-drawer--opening {
  228. -webkit-transform: translateX(0);
  229. transform: translateX(0);
  230. transition-duration: 250ms;
  231. }
  232. [dir=rtl] .mdc-drawer--opening, .mdc-drawer--opening[dir=rtl] {
  233. /*rtl:begin:ignore*/
  234. -webkit-transform: translateX(0);
  235. transform: translateX(0);
  236. /*rtl:end:ignore*/
  237. }
  238. .mdc-drawer--closing {
  239. -webkit-transform: translateX(-100%);
  240. transform: translateX(-100%);
  241. transition-duration: 200ms;
  242. }
  243. [dir=rtl] .mdc-drawer--closing, .mdc-drawer--closing[dir=rtl] {
  244. /*rtl:begin:ignore*/
  245. -webkit-transform: translateX(100%);
  246. transform: translateX(100%);
  247. /*rtl:end:ignore*/
  248. }
  249. .mdc-drawer__header {
  250. flex-shrink: 0;
  251. box-sizing: border-box;
  252. min-height: 64px;
  253. padding: 0 16px 4px;
  254. }
  255. .mdc-drawer__title {
  256. -moz-osx-font-smoothing: grayscale;
  257. -webkit-font-smoothing: antialiased;
  258. font-family: Roboto, sans-serif;
  259. /* @alternate */
  260. font-family: var(--mdc-typography-headline6-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
  261. font-size: 1.25rem;
  262. /* @alternate */
  263. font-size: var(--mdc-typography-headline6-font-size, 1.25rem);
  264. line-height: 2rem;
  265. /* @alternate */
  266. line-height: var(--mdc-typography-headline6-line-height, 2rem);
  267. font-weight: 500;
  268. /* @alternate */
  269. font-weight: var(--mdc-typography-headline6-font-weight, 500);
  270. letter-spacing: 0.0125em;
  271. /* @alternate */
  272. letter-spacing: var(--mdc-typography-headline6-letter-spacing, 0.0125em);
  273. text-decoration: inherit;
  274. /* @alternate */
  275. -webkit-text-decoration: var(--mdc-typography-headline6-text-decoration, inherit);
  276. text-decoration: var(--mdc-typography-headline6-text-decoration, inherit);
  277. text-transform: inherit;
  278. /* @alternate */
  279. text-transform: var(--mdc-typography-headline6-text-transform, inherit);
  280. display: block;
  281. margin-top: 0;
  282. /* @alternate */
  283. line-height: normal;
  284. margin-bottom: -20px;
  285. }
  286. .mdc-drawer__title::before {
  287. display: inline-block;
  288. width: 0;
  289. height: 36px;
  290. content: "";
  291. vertical-align: 0;
  292. }
  293. .mdc-drawer__title::after {
  294. display: inline-block;
  295. width: 0;
  296. height: 20px;
  297. content: "";
  298. vertical-align: -20px;
  299. }
  300. .mdc-drawer__subtitle {
  301. -moz-osx-font-smoothing: grayscale;
  302. -webkit-font-smoothing: antialiased;
  303. font-family: Roboto, sans-serif;
  304. /* @alternate */
  305. font-family: var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
  306. font-size: 0.875rem;
  307. /* @alternate */
  308. font-size: var(--mdc-typography-body2-font-size, 0.875rem);
  309. line-height: 1.25rem;
  310. /* @alternate */
  311. line-height: var(--mdc-typography-body2-line-height, 1.25rem);
  312. font-weight: 400;
  313. /* @alternate */
  314. font-weight: var(--mdc-typography-body2-font-weight, 400);
  315. letter-spacing: 0.0178571429em;
  316. /* @alternate */
  317. letter-spacing: var(--mdc-typography-body2-letter-spacing, 0.0178571429em);
  318. text-decoration: inherit;
  319. /* @alternate */
  320. -webkit-text-decoration: var(--mdc-typography-body2-text-decoration, inherit);
  321. text-decoration: var(--mdc-typography-body2-text-decoration, inherit);
  322. text-transform: inherit;
  323. /* @alternate */
  324. text-transform: var(--mdc-typography-body2-text-transform, inherit);
  325. display: block;
  326. margin-top: 0;
  327. /* @alternate */
  328. line-height: normal;
  329. margin-bottom: 0;
  330. }
  331. .mdc-drawer__subtitle::before {
  332. display: inline-block;
  333. width: 0;
  334. height: 20px;
  335. content: "";
  336. vertical-align: 0;
  337. }
  338. .mdc-drawer__content {
  339. height: 100%;
  340. overflow-y: auto;
  341. -webkit-overflow-scrolling: touch;
  342. }
  343. .mdc-drawer--dismissible {
  344. /* @noflip */
  345. /*rtl:ignore*/
  346. left: 0;
  347. /* @noflip */
  348. /*rtl:ignore*/
  349. right: initial;
  350. display: none;
  351. position: absolute;
  352. }
  353. [dir=rtl] .mdc-drawer--dismissible, .mdc-drawer--dismissible[dir=rtl] {
  354. /*rtl:begin:ignore*/
  355. /* @noflip */
  356. /*rtl:ignore*/
  357. left: initial;
  358. /* @noflip */
  359. /*rtl:ignore*/
  360. right: 0;
  361. /*rtl:end:ignore*/
  362. }
  363. .mdc-drawer--dismissible.mdc-drawer--open {
  364. display: flex;
  365. }
  366. .mdc-drawer-app-content {
  367. /* @noflip */
  368. /*rtl:ignore*/
  369. margin-left: 0;
  370. /* @noflip */
  371. /*rtl:ignore*/
  372. margin-right: 0;
  373. position: relative;
  374. }
  375. [dir=rtl] .mdc-drawer-app-content, .mdc-drawer-app-content[dir=rtl] {
  376. /*rtl:begin:ignore*/
  377. /* @noflip */
  378. /*rtl:ignore*/
  379. margin-left: 0;
  380. /* @noflip */
  381. /*rtl:ignore*/
  382. margin-right: 0;
  383. /*rtl:end:ignore*/
  384. }
  385. .mdc-drawer--modal {
  386. box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  387. /* @noflip */
  388. /*rtl:ignore*/
  389. left: 0;
  390. /* @noflip */
  391. /*rtl:ignore*/
  392. right: initial;
  393. display: none;
  394. position: fixed;
  395. }
  396. .mdc-drawer--modal + .mdc-drawer-scrim {
  397. background-color: rgba(0, 0, 0, 0.32);
  398. }
  399. [dir=rtl] .mdc-drawer--modal, .mdc-drawer--modal[dir=rtl] {
  400. /*rtl:begin:ignore*/
  401. /* @noflip */
  402. /*rtl:ignore*/
  403. left: initial;
  404. /* @noflip */
  405. /*rtl:ignore*/
  406. right: 0;
  407. /*rtl:end:ignore*/
  408. }
  409. .mdc-drawer--modal.mdc-drawer--open {
  410. display: flex;
  411. }
  412. .mdc-drawer-scrim {
  413. display: none;
  414. position: fixed;
  415. top: 0;
  416. left: 0;
  417. width: 100%;
  418. height: 100%;
  419. z-index: 5;
  420. transition-property: opacity;
  421. transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  422. }
  423. .mdc-drawer--open + .mdc-drawer-scrim {
  424. display: block;
  425. }
  426. .mdc-drawer--animate + .mdc-drawer-scrim {
  427. opacity: 0;
  428. }
  429. .mdc-drawer--opening + .mdc-drawer-scrim {
  430. transition-duration: 250ms;
  431. opacity: 1;
  432. }
  433. .mdc-drawer--closing + .mdc-drawer-scrim {
  434. transition-duration: 200ms;
  435. opacity: 0;
  436. }
  437. /*# sourceMappingURL=mdc.drawer.css.map*/