mdc-react/dist/drawer/index.css

Material Components for the web implemented in React

.mdc-drawer{background-color:#fff;background-color:var(--mdc-theme-surface,#fff);border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-right-radius:var(--mdc-shape-large,0);border-right:1px solid;border-color:rgba(0,0,0,.12);border-top-left-radius:0;border-top-right-radius:0;border-top-right-radius:var(--mdc-shape-large,0);box-sizing:border-box;display:flex;flex-direction:column;flex-shrink:0;height:100%;overflow:hidden;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);width:256px;z-index:6}.mdc-drawer .mdc-drawer__title{color:rgba(0,0,0,.87)}.mdc-drawer .mdc-deprecated-list-group__subheader,.mdc-drawer .mdc-drawer__subtitle,.mdc-drawer .mdc-list-item--with-leading-icon .mdc-list-item__start,.mdc-drawer .mdc-list-item--with-trailing-icon .mdc-list-item__end{color:rgba(0,0,0,.6)}.mdc-drawer .mdc-list-item .mdc-list-item__primary-text{color:rgba(0,0,0,.87)}.mdc-drawer .mdc-list-item--activated .mdc-list-item--with-leading-icon .mdc-list-item__start,.mdc-drawer .mdc-list-item--activated .mdc-list-item--with-trailing-icon .mdc-list-item__end{color:#6200ee}.mdc-drawer .mdc-list-item--activated .mdc-list-item__primary-text{color:rgba(98,0,238,.87)}.mdc-drawer[dir=rtl],[dir=rtl] .mdc-drawer{border-bottom-left-radius:0;border-bottom-left-radius:var(--mdc-shape-large,0);border-bottom-right-radius:0;border-top-left-radius:0;border-top-left-radius:var(--mdc-shape-large,0);border-top-right-radius:0}.mdc-drawer .mdc-list-item--with-one-line,.mdc-drawer .mdc-list-item--with-one-line.mdc-list-item--with-leading-avatar,.mdc-drawer .mdc-list-item--with-one-line.mdc-list-item--with-leading-checkbox,.mdc-drawer .mdc-list-item--with-one-line.mdc-list-item--with-leading-icon,.mdc-drawer .mdc-list-item--with-one-line.mdc-list-item--with-leading-image,.mdc-drawer .mdc-list-item--with-one-line.mdc-list-item--with-leading-radio,.mdc-drawer .mdc-list-item--with-one-line.mdc-list-item--with-leading-switch,.mdc-drawer .mdc-list-item--with-one-line.mdc-list-item--with-leading-thumbnail,.mdc-drawer .mdc-list-item--with-one-line.mdc-list-item--with-leading-video{border-radius:4px;border-radius:var(--mdc-shape-small,4px)}.mdc-drawer.mdc-drawer--open:not(.mdc-drawer--closing)+.mdc-drawer-app-content{margin-left:256px;margin-right:0}.mdc-drawer.mdc-drawer--open:not(.mdc-drawer--closing)+.mdc-drawer-app-content[dir=rtl],[dir=rtl] .mdc-drawer.mdc-drawer--open:not(.mdc-drawer--closing)+.mdc-drawer-app-content{margin-left:0;margin-right:256px}.mdc-drawer[dir=rtl],[dir=rtl] .mdc-drawer{border-left-style:solid;border-left-width:1px;border-right-style:none;border-right-width:0}.mdc-drawer .mdc-list-item{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-subtitle2-font-size,.875rem);font-weight:500;font-weight:var(--mdc-typography-subtitle2-font-weight,500);height:40px;letter-spacing:.0071428571em;letter-spacing:var(--mdc-typography-subtitle2-letter-spacing,.0071428571em);line-height:1.375rem;line-height:var(--mdc-typography-subtitle2-line-height,1.375rem);margin:8px;padding:0 8px;text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle2-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle2-text-transform,inherit)}.mdc-drawer .mdc-list-item:first-child{margin-top:2px}.mdc-drawer .mdc-list-item:last-child{margin-bottom:0}.mdc-drawer .mdc-list-group__subheader{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size,.875rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing,.0178571429em);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height,1.25rem);line-height:normal;margin:0;padding:0 16px;text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit)}.mdc-drawer .mdc-list-group__subheader:before{content:"";display:inline-block;height:24px;vertical-align:0;width:0}.mdc-drawer .mdc-list-divider{margin:3px 0 4px}.mdc-drawer .mdc-list-item__content,.mdc-drawer .mdc-list-item__start{pointer-events:none}.mdc-drawer--animate{transform:translateX(-100%)}.mdc-drawer--animate[dir=rtl],[dir=rtl] .mdc-drawer--animate{transform:translateX(100%)}.mdc-drawer--opening{transition-duration:.25s}.mdc-drawer--opening,.mdc-drawer--opening[dir=rtl],[dir=rtl] .mdc-drawer--opening{transform:translateX(0)}.mdc-drawer--closing{transform:translateX(-100%);transition-duration:.2s}.mdc-drawer--closing[dir=rtl],[dir=rtl] .mdc-drawer--closing{transform:translateX(100%)}.mdc-drawer__header{box-sizing:border-box;flex-shrink:0;min-height:64px;padding:0 16px 4px}.mdc-drawer__title{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-headline6-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:1.25rem;font-size:var(--mdc-typography-headline6-font-size,1.25rem);font-weight:500;font-weight:var(--mdc-typography-headline6-font-weight,500);letter-spacing:.0125em;letter-spacing:var(--mdc-typography-headline6-letter-spacing,.0125em);line-height:2rem;line-height:var(--mdc-typography-headline6-line-height,2rem);line-height:normal;margin-bottom:-20px;margin-top:0;text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-headline6-text-decoration,inherit);text-decoration:var(--mdc-typography-headline6-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline6-text-transform,inherit)}.mdc-drawer__title:before{content:"";display:inline-block;height:36px;vertical-align:0;width:0}.mdc-drawer__title:after{content:"";display:inline-block;height:20px;vertical-align:-20px;width:0}.mdc-drawer__subtitle{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size,.875rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing,.0178571429em);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height,1.25rem);line-height:normal;margin-bottom:0;margin-top:0;text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit)}.mdc-drawer__subtitle:before{content:"";display:inline-block;height:20px;vertical-align:0;width:0}.mdc-drawer__content{-webkit-overflow-scrolling:touch;height:100%;overflow-y:auto}.mdc-drawer--dismissible{display:none;left:0;position:absolute;right:auto}.mdc-drawer--dismissible[dir=rtl],[dir=rtl] .mdc-drawer--dismissible{left:auto;right:0}.mdc-drawer--dismissible.mdc-drawer--open{display:flex}.mdc-drawer-app-content{position:relative}.mdc-drawer-app-content,.mdc-drawer-app-content[dir=rtl],[dir=rtl] .mdc-drawer-app-content{margin-left:0;margin-right:0}.mdc-drawer--modal{box-shadow:0 8px 10px -5px rgba(0,0,0,.2),0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12);display:none;left:0;position:fixed;right:auto}.mdc-drawer--modal+.mdc-drawer-scrim{background-color:rgba(0,0,0,.32)}.mdc-drawer--modal[dir=rtl],[dir=rtl] .mdc-drawer--modal{left:auto;right:0}.mdc-drawer--modal.mdc-drawer--open{display:flex}.mdc-drawer-scrim{display:none;height:100%;left:0;position:fixed;top:0;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%;z-index:5}.mdc-drawer--open+.mdc-drawer-scrim{display:block}.mdc-drawer--animate+.mdc-drawer-scrim{opacity:0}.mdc-drawer--opening+.mdc-drawer-scrim{opacity:1;transition-duration:.25s}.mdc-drawer--closing+.mdc-drawer-scrim{opacity:0;transition-duration:.2s}.mdc-drawer--open~.mdc-drawer-app-content{transition:margin-left .25s}.mdc-drawer--closing~.mdc-drawer-app-content{transition:margin-left .2s}