react-cm-ui/core/surfaces/drawerDeprecated/drawerDeprecated.css

React UI for Healthy Church

html:not(.ua-ie-edge):not(.ua-ie-11) body.drawer-deprecated-open{overflow-y:scroll;position:fixed;width:100%}.ui.drawer.deprecated .drawer-container{backface-visibility:hidden;background-color:#fff;height:100%;position:absolute;right:0;top:0;transform:translate(100%,0);transition:max-width .2s ease-in-out,transform 333ms ease-in-out;width:100%}.ui.drawer.deprecated .drawer-container.left-position{right:inherit;left:0;transform:translate(-100%,0)}.ui.drawer.deprecated .drawer-container.drawer-container-inverse{background:#38424d;color:#fff}.ui.drawer.deprecated .drawer-container.drawer-container-inverse .drawer-container-inner .drawer-header{background:#38424d;color:#fff}.ui.drawer.deprecated .drawer-container.color-dark-blue{background:#134174;color:#fff}.ui.drawer.deprecated .drawer-container.color-dark-blue .drawer-container-inner .drawer-header{background:#134174;color:#fff}.ui.drawer.deprecated .drawer-container.drawer-container-no-header .drawer-close-button{position:fixed;right:11px;top:11px;z-index:1}.ui.drawer.deprecated .drawer-container>div>div:last-child{z-index:10000}.ui.drawer.deprecated .drawer-container-inner{position:relative}.ui.drawer.deprecated .drawer-container-inner .drawer-header{align-items:flex-start;background-color:#fff;display:flex;flex-wrap:wrap;justify-content:flex-start;left:0;padding:70px 0 0;position:fixed;top:0;transition:box-shadow 150ms linear;width:100%;z-index:10000}.ui.drawer.deprecated .drawer-container-inner .drawer-header .avatar-container{top:-6px}.ui.drawer.deprecated .drawer-container-inner .drawer-header .title{left:0;padding:0 88px 0 22px;position:absolute;top:21px;width:100%}.ui.drawer.deprecated .drawer-container-inner .drawer-header .title.drawer-title-truncate{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui.drawer.deprecated .drawer-container-inner .drawer-header .drawer-close-button-container{position:absolute;right:22px;top:14px;width:44px}.ui.drawer.deprecated .drawer-container-inner .drawer-header .drawer-header-children,.ui.drawer.deprecated .drawer-container-inner .drawer-header .ui.divider{margin:0;width:100%}.ui.drawer.deprecated .drawer-container-inner .drawer-children>:first-child{margin-top:0}.ui.drawer.deprecated .drawer-container-inner .drawer-pushdown{margin-top:66px}.ui.drawer.deprecated .drawer-container-inverse .drawer-header .drawer-close-button-container{margin:-8px 8px 0 11px}.ui.drawer.deprecated .drawer-container-is-scrolled .drawer-header{box-shadow:0 1px 4px 0 rgba(0,0,0,.2)}.ui.drawer.deprecated.drawer-animate-out .drawer-dimmer{animation:fadeOutDimmer .1s forwards;animation-delay:.2s}.ui.drawer.deprecated .drawer-container .drawer-wing-container{height:100%;left:0;position:absolute;top:0;width:100%;z-index:-1}.ui.drawer.deprecated .drawer-container .drawer-wing-container>div{background-color:#fff;border-left:1px solid #dbe0e3;height:100%;position:relative;transform:translate(100%,0);width:100%}.ui.drawer.deprecated .drawer-container .drawer-wing-container.left-position>div{transform:translate(-100%,0)}.ui.drawer.deprecated .drawer-container .drawer-wing{background-color:#fff;color:#1c2530;height:100%;left:0;padding:22px;position:absolute;top:0;width:100%}.ui.drawer.deprecated .drawer-container .drawer-wing.color-dark-blue{background-color:#134174;color:#fff}.ui.drawer.deprecated .drawer-container .drawer-wing.color-grey{background-color:#edf1f5}.ui.drawer.deprecated .drawer-container .drawer-wing-container.left-position .drawer-wing{left:inherit;right:0}.drawer-dimmers .drawer-dimmer-deprecated{animation:fadeInDimmer .2s forwards;backface-visibility:hidden;background-color:rgba(255,255,255,.7);height:100%;left:0;position:absolute;top:0;width:100%;z-index:10002}@media only screen and (min-width:768px){.ui.drawer.deprecated .drawer-container-inner .drawer-header .title{padding-right:77px}.ui.drawer.deprecated .drawer-container-inner .drawer-header .drawer-close-button-container{top:18px;width:33px}.ui.drawer.deprecated .drawer-container-inverse .drawer-header .drawer-close-button-container{margin:-5px 11px 0 11px}}@keyframes fadeInDimmer{0%{opacity:0}100%{opacity:1}}@keyframes fadeOutDimmer{0%{opacity:1}100%{opacity:0}}