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

React UI for Healthy Church

.ui.drawer.drawer-has_action_bar .drawer--wing-container-inner,.ui.drawer.drawer-has_action_bar .drawer-container-inner{padding-top:50px}.ui.drawer.drawer-has_action_bar .drawer--wing-container-inner .ui.drawer--action_bar,.ui.drawer.drawer-has_action_bar .drawer-container-inner .ui.drawer--action_bar{top:0}.ui.drawer.drawer-has_title_bar.drawer-has_action_bar:not(.drawer-has_navigation) .drawer--wing-container-inner .ui.drawer--title_bar,.ui.drawer.drawer-has_title_bar.drawer-has_action_bar:not(.drawer-has_navigation) .drawer-container-inner .ui.drawer--title_bar{border-bottom:none}.ui.drawer.drawer-has_title_bar.drawer-has_action_bar:not(.drawer-has_navigation) .drawer--wing-container-inner .ui.drawer--action_bar,.ui.drawer.drawer-has_title_bar.drawer-has_action_bar:not(.drawer-has_navigation) .drawer-container-inner .ui.drawer--action_bar{background-color:#f6f7f8;border-top:1px solid #dbe0e3}.ui.drawer.drawer-has_title_bar.drawer-has_action_bar .drawer--wing-container-inner,.ui.drawer.drawer-has_title_bar.drawer-has_action_bar .drawer-container-inner{padding-top:105px}.ui.drawer.drawer-has_title_bar.drawer-has_action_bar .drawer--wing-container-inner .ui.drawer--action_bar,.ui.drawer.drawer-has_title_bar.drawer-has_action_bar .drawer-container-inner .ui.drawer--action_bar{top:55px}.ui.drawer.drawer-has_title_bar.drawer-has_navigation.drawer-has_action_bar .drawer--wing-container-inner,.ui.drawer.drawer-has_title_bar.drawer-has_navigation.drawer-has_action_bar .drawer-container-inner{padding-top:160px}.ui.drawer.drawer-has_title_bar.drawer-has_navigation.drawer-has_action_bar .drawer--wing-container-inner .ui.drawer--action_bar,.ui.drawer.drawer-has_title_bar.drawer-has_navigation.drawer-has_action_bar .drawer-container-inner .ui.drawer--action_bar{top:110px}.cmui.drawer--action_bar,.cmui.page--action_bar,.ui.drawer--action_bar,.ui.page--action_bar{align-items:center;border-bottom:1px solid #dbe0e3;display:flex;justify-content:flex-start;left:0;position:fixed;right:0}.cmui .drawer--action_bar,.ui .drawer--action_bar{background-color:#fff;padding:8px 11px;z-index:10000}.cmui .page--action_bar,.ui .page--action_bar{background-color:#f6f7f8;border-top:1px solid #dbe0e3;min-height:50px;padding:8px 11px;top:55px;width:auto;z-index:3}.cmui.action_bar--grid,.ui.action_bar--grid{flex-wrap:nowrap;margin:0;width:100%}.cmui.action_bar--grid .action_bar--grid_column,.ui.action_bar--grid .action_bar--grid_column{padding-bottom:0;padding-top:0}.cmui.action_bar--grid .action_bar--grid_column:first-child,.ui.action_bar--grid .action_bar--grid_column:first-child{padding-left:0}.cmui.action_bar--grid .action_bar--grid_column:last-child,.ui.action_bar--grid .action_bar--grid_column:last-child{padding-right:0}.cmui.action_bar--list,.ui.action_bar--list{align-items:center;display:flex}.cmui .action_bar--list_item,.ui .action_bar--list_item{align-items:center;align-self:stretch;display:inline-flex;justify-content:center;margin-left:0!important;padding:0 .6875rem!important}.cmui .action_bar--list_item::before,.ui .action_bar--list_item::before{height:88%!important}.cmui .action_bar--list_item:first-child,.ui .action_bar--list_item:first-child{padding-left:0!important}.cmui .action_bar--list_item:last-child,.ui .action_bar--list_item:last-child{padding-right:0!important}.cmui .actions_button_drawer--content,.ui .actions_button_drawer--content{padding:22px 11px}.cmui .actions_button_drawer--title-hide,.ui .actions_button_drawer--title-hide{opacity:0;transition:opacity .2s ease-in-out}.cmui .actions_button_drawer--title-show,.ui .actions_button_drawer--title-show{opacity:1;transition:opacity .2s ease-in-out 850ms}.cmui .actions_button_drawer--option_container,.ui .actions_button_drawer--option_container{font-size:.875rem;font-weight:600;margin:0 -11px;position:relative}.cmui .actions_button_drawer--option_container-1-hide,.ui .actions_button_drawer--option_container-1-hide{opacity:0;pointer-events:none;transition:opacity .2s ease-in-out}.cmui .actions_button_drawer--option_container-1-show,.ui .actions_button_drawer--option_container-1-show{opacity:1;transform:translateY(0);transition:opacity .2s ease-in-out .9s,transform .3s ease-in-out 250ms}.cmui .actions_button_drawer--option_container-2-hide,.ui .actions_button_drawer--option_container-2-hide{opacity:0;pointer-events:none;transition:opacity .2s ease-in-out}.cmui .actions_button_drawer--option_container-2-show,.ui .actions_button_drawer--option_container-2-show{opacity:1;transform:translateY(0);transition:opacity .2s ease-in-out 950ms,transform .3s ease-in-out 250ms}.cmui .actions_button_drawer--option_container-3-hide,.ui .actions_button_drawer--option_container-3-hide{opacity:0;pointer-events:none;transition:opacity .2s ease-in-out}.cmui .actions_button_drawer--option_container-3-show,.ui .actions_button_drawer--option_container-3-show{opacity:1;transform:translateY(0);transition:opacity .2s ease-in-out 1s,transform .3s ease-in-out 250ms}.cmui .actions_button_drawer--option_container-4-hide,.ui .actions_button_drawer--option_container-4-hide{opacity:0;pointer-events:none;transition:opacity .2s ease-in-out}.cmui .actions_button_drawer--option_container-4-show,.ui .actions_button_drawer--option_container-4-show{opacity:1;transform:translateY(0);transition:opacity .2s ease-in-out 1.05s,transform .3s ease-in-out 250ms}.cmui .actions_button_drawer--option_container-5-hide,.ui .actions_button_drawer--option_container-5-hide{opacity:0;pointer-events:none;transition:opacity .2s ease-in-out}.cmui .actions_button_drawer--option_container-5-show,.ui .actions_button_drawer--option_container-5-show{opacity:1;transform:translateY(0);transition:opacity .2s ease-in-out 1.1s,transform .3s ease-in-out 250ms}.cmui .actions_button_drawer--option_container-6-hide,.ui .actions_button_drawer--option_container-6-hide{opacity:0;pointer-events:none;transition:opacity .2s ease-in-out}.cmui .actions_button_drawer--option_container-6-show,.ui .actions_button_drawer--option_container-6-show{opacity:1;transform:translateY(0);transition:opacity .2s ease-in-out 1.15s,transform .3s ease-in-out 250ms}.cmui .actions_button_drawer--option_container-7-hide,.ui .actions_button_drawer--option_container-7-hide{opacity:0;pointer-events:none;transition:opacity .2s ease-in-out}.cmui .actions_button_drawer--option_container-7-show,.ui .actions_button_drawer--option_container-7-show{opacity:1;transform:translateY(0);transition:opacity .2s ease-in-out 1.2s,transform .3s ease-in-out 250ms}.cmui .actions_button_drawer--option_container-8-hide,.ui .actions_button_drawer--option_container-8-hide{opacity:0;pointer-events:none;transition:opacity .2s ease-in-out}.cmui .actions_button_drawer--option_container-8-show,.ui .actions_button_drawer--option_container-8-show{opacity:1;transform:translateY(0);transition:opacity .2s ease-in-out 1.25s,transform .3s ease-in-out 250ms}.cmui .actions_button_drawer--option_container-9-hide,.ui .actions_button_drawer--option_container-9-hide{opacity:0;pointer-events:none;transition:opacity .2s ease-in-out}.cmui .actions_button_drawer--option_container-9-show,.ui .actions_button_drawer--option_container-9-show{opacity:1;transform:translateY(0);transition:opacity .2s ease-in-out 1.3s,transform .3s ease-in-out 250ms}.cmui .actions_button_drawer--option_container-10-hide,.ui .actions_button_drawer--option_container-10-hide{opacity:0;pointer-events:none;transition:opacity .2s ease-in-out}.cmui .actions_button_drawer--option_container-10-show,.ui .actions_button_drawer--option_container-10-show{opacity:1;transform:translateY(0);transition:opacity .2s ease-in-out 1.35s,transform .3s ease-in-out 250ms}.cmui .actions_button_drawer--option_container-11-hide,.ui .actions_button_drawer--option_container-11-hide{opacity:0;pointer-events:none;transition:opacity .2s ease-in-out}.cmui .actions_button_drawer--option_container-11-show,.ui .actions_button_drawer--option_container-11-show{opacity:1;transform:translateY(0);transition:opacity .2s ease-in-out 1.4s,transform .3s ease-in-out 250ms}.cmui .actions_button_drawer--option_container-selected,.ui .actions_button_drawer--option_container-selected{transform:translateY(-61px);transition:transform .3s ease-in-out 750ms}.cmui .actions_button_drawer--option_container:first-child,.ui .actions_button_drawer--option_container:first-child{border-top:1px solid #dbe0e3}.cmui .actions_button_drawer--option_container-selected:first-child,.ui .actions_button_drawer--option_container-selected:first-child{border-top:0}.cmui .actions_button_drawer--option,.cmui .actions_button_drawer--sub_option,.ui .actions_button_drawer--option,.ui .actions_button_drawer--sub_option{align-items:center;border-bottom:1px solid #dbe0e3;color:#1c2530;cursor:pointer;display:flex;min-height:55px;opacity:1;outline:0;padding:11px;position:relative}.cmui .actions_button_drawer--option,.ui .actions_button_drawer--option{transition:color 150ms ease-in 550ms;z-index:1}.cmui .actions_button_drawer--option-disabled,.ui .actions_button_drawer--option-disabled{color:#97a4ab;cursor:default}.cmui .actions_button_drawer--option::before,.ui .actions_button_drawer--option::before{background-color:#00aeef;content:"";height:54px;left:0;opacity:0;position:absolute;top:0;transition:opacity 1ms ease-in-out 850ms,width .3s ease-in-out 550ms;width:0;z-index:0}.cmui .actions_button_drawer--option-selected,.ui .actions_button_drawer--option-selected{border-bottom:0;color:#fff;transition:color 150ms ease-in 250ms}.cmui .actions_button_drawer--option-selected::before,.ui .actions_button_drawer--option-selected::before{opacity:1;transition:width .3s ease-in-out 250ms;width:100%}.cmui .actions_button_drawer--sub_options,.ui .actions_button_drawer--sub_options{left:0;position:absolute;right:0;top:0}.cmui .actions_button_drawer--sub_options-hide,.ui .actions_button_drawer--sub_options-hide{opacity:0;pointer-events:none;transition:opacity .3s ease-in-out 550ms}.cmui .actions_button_drawer--sub_options-show,.ui .actions_button_drawer--sub_options-show{opacity:1;padding-top:55px;transition:opacity 1ms ease-in-out 750ms,padding-top 1ms ease-in-out 750ms}.cmui .actions_button_drawer_option--icon_container,.cmui .actions_button_drawer_option--label,.cmui .actions_button_drawer_sub_option--icon_container,.cmui .actions_button_drawer_sub_option--label,.ui .actions_button_drawer_option--icon_container,.ui .actions_button_drawer_option--label,.ui .actions_button_drawer_sub_option--icon_container,.ui .actions_button_drawer_sub_option--label{z-index:1}.cmui .actions_button_drawer_option--icon_container,.cmui .actions_button_drawer_sub_option--icon_container,.ui .actions_button_drawer_option--icon_container,.ui .actions_button_drawer_sub_option--icon_container{align-items:center;display:inline-flex;height:32px;justify-content:center;margin-right:16px;min-width:32px;transition:background-color .2s ease-in;width:32px;z-index:1}.cmui .actions_button_drawer_option--icon_container,.ui .actions_button_drawer_option--icon_container{background-color:#1c2530;border-radius:50%}.cmui .actions_button_drawer--sub_option-1,.ui .actions_button_drawer--sub_option-1{opacity:0;transform:translateY(-55px);transition:opacity .2s ease-in-out 0s,transform .2s ease-in-out 0s}.cmui .actions_button_drawer--sub_option-1-show,.ui .actions_button_drawer--sub_option-1-show{opacity:1;transform:translateY(0);transition:opacity .3s ease-in-out 1.1s,transform .3s ease-in-out 1.1s}.cmui .actions_button_drawer--sub_option-1-disabled,.ui .actions_button_drawer--sub_option-1-disabled{color:#97a4ab;cursor:default}.cmui .actions_button_drawer--sub_option-2,.ui .actions_button_drawer--sub_option-2{opacity:0;transform:translateY(-55px);transition:opacity .2s ease-in-out 0s,transform .2s ease-in-out 0s}.cmui .actions_button_drawer--sub_option-2-show,.ui .actions_button_drawer--sub_option-2-show{opacity:1;transform:translateY(0);transition:opacity .3s ease-in-out 1.15s,transform .3s ease-in-out 1.15s}.cmui .actions_button_drawer--sub_option-2-disabled,.ui .actions_button_drawer--sub_option-2-disabled{color:#97a4ab;cursor:default}.cmui .actions_button_drawer--sub_option-3,.ui .actions_button_drawer--sub_option-3{opacity:0;transform:translateY(-55px);transition:opacity .2s ease-in-out 0s,transform .2s ease-in-out 0s}.cmui .actions_button_drawer--sub_option-3-show,.ui .actions_button_drawer--sub_option-3-show{opacity:1;transform:translateY(0);transition:opacity .3s ease-in-out 1.2s,transform .3s ease-in-out 1.2s}.cmui .actions_button_drawer--sub_option-3-disabled,.ui .actions_button_drawer--sub_option-3-disabled{color:#97a4ab;cursor:default}.cmui .actions_button_drawer--sub_option-4,.ui .actions_button_drawer--sub_option-4{opacity:0;transform:translateY(-55px);transition:opacity .2s ease-in-out 0s,transform .2s ease-in-out 0s}.cmui .actions_button_drawer--sub_option-4-show,.ui .actions_button_drawer--sub_option-4-show{opacity:1;transform:translateY(0);transition:opacity .3s ease-in-out 1.25s,transform .3s ease-in-out 1.25s}.cmui .actions_button_drawer--sub_option-4-disabled,.ui .actions_button_drawer--sub_option-4-disabled{color:#97a4ab;cursor:default}.cmui .actions_button_drawer--sub_option-5,.ui .actions_button_drawer--sub_option-5{opacity:0;transform:translateY(-55px);transition:opacity .2s ease-in-out 0s,transform .2s ease-in-out 0s}.cmui .actions_button_drawer--sub_option-5-show,.ui .actions_button_drawer--sub_option-5-show{opacity:1;transform:translateY(0);transition:opacity .3s ease-in-out 1.3s,transform .3s ease-in-out 1.3s}.cmui .actions_button_drawer--sub_option-5-disabled,.ui .actions_button_drawer--sub_option-5-disabled{color:#97a4ab;cursor:default}.cmui .actions_button_drawer--sub_option-6,.ui .actions_button_drawer--sub_option-6{opacity:0;transform:translateY(-55px);transition:opacity .2s ease-in-out 0s,transform .2s ease-in-out 0s}.cmui .actions_button_drawer--sub_option-6-show,.ui .actions_button_drawer--sub_option-6-show{opacity:1;transform:translateY(0);transition:opacity .3s ease-in-out 1.35s,transform .3s ease-in-out 1.35s}.cmui .actions_button_drawer--sub_option-6-disabled,.ui .actions_button_drawer--sub_option-6-disabled{color:#97a4ab;cursor:default}.cmui .actions_button_drawer--sub_option-7,.ui .actions_button_drawer--sub_option-7{opacity:0;transform:translateY(-55px);transition:opacity .2s ease-in-out 0s,transform .2s ease-in-out 0s}.cmui .actions_button_drawer--sub_option-7-show,.ui .actions_button_drawer--sub_option-7-show{opacity:1;transform:translateY(0);transition:opacity .3s ease-in-out 1.4s,transform .3s ease-in-out 1.4s}.cmui .actions_button_drawer--sub_option-7-disabled,.ui .actions_button_drawer--sub_option-7-disabled{color:#97a4ab;cursor:default}.cmui .actions_button_drawer--sub_option-8,.ui .actions_button_drawer--sub_option-8{opacity:0;transform:translateY(-55px);transition:opacity .2s ease-in-out 0s,transform .2s ease-in-out 0s}.cmui .actions_button_drawer--sub_option-8-show,.ui .actions_button_drawer--sub_option-8-show{opacity:1;transform:translateY(0);transition:opacity .3s ease-in-out 1.45s,transform .3s ease-in-out 1.45s}.cmui .actions_button_drawer--sub_option-8-disabled,.ui .actions_button_drawer--sub_option-8-disabled{color:#97a4ab;cursor:default}.cmui .actions_button_drawer--sub_option-9,.ui .actions_button_drawer--sub_option-9{opacity:0;transform:translateY(-55px);transition:opacity .2s ease-in-out 0s,transform .2s ease-in-out 0s}.cmui .actions_button_drawer--sub_option-9-show,.ui .actions_button_drawer--sub_option-9-show{opacity:1;transform:translateY(0);transition:opacity .3s ease-in-out 1.5s,transform .3s ease-in-out 1.5s}.cmui .actions_button_drawer--sub_option-9-disabled,.ui .actions_button_drawer--sub_option-9-disabled{color:#97a4ab;cursor:default}.cmui .actions_button_drawer--sub_option-10,.ui .actions_button_drawer--sub_option-10{opacity:0;transform:translateY(-55px);transition:opacity .2s ease-in-out 0s,transform .2s ease-in-out 0s}.cmui .actions_button_drawer--sub_option-10-show,.ui .actions_button_drawer--sub_option-10-show{opacity:1;transform:translateY(0);transition:opacity .3s ease-in-out 1.55s,transform .3s ease-in-out 1.55s}.cmui .actions_button_drawer--sub_option-10-disabled,.ui .actions_button_drawer--sub_option-10-disabled{color:#97a4ab;cursor:default}.cmui .actions_button_drawer--sub_option-11,.ui .actions_button_drawer--sub_option-11{opacity:0;transform:translateY(-55px);transition:opacity .2s ease-in-out 0s,transform .2s ease-in-out 0s}.cmui .actions_button_drawer--sub_option-11-show,.ui .actions_button_drawer--sub_option-11-show{opacity:1;transform:translateY(0);transition:opacity .3s ease-in-out 1.6s,transform .3s ease-in-out 1.6s}.cmui .actions_button_drawer--sub_option-11-disabled,.ui .actions_button_drawer--sub_option-11-disabled{color:#97a4ab;cursor:default}.cmui .action_bar--search-mobile,.ui .action_bar--search-mobile{height:0;opacity:0;overflow:hidden;padding-top:0;transition:height 333ms ease-in-out,opacity 333ms ease-in-out,padding-top 333ms ease-in-out}.cmui .action_bar--search-mobile-show,.ui .action_bar--search-mobile-show{height:55px;opacity:1;padding-top:11px}.cmui .action_bar--clear_search,.ui .action_bar--clear_search{align-items:center;cursor:pointer;display:inline-flex;height:33px;justify-content:center;transform:translate(8px,-8px);width:33px}.cmui .action_bar--actions_button,.ui .action_bar--actions_button{margin-right:0}@media only screen and (max-width:767px){.ui.drawer--action_bar,.ui.page--action_bar{min-height:50px;top:55px}.ui.drawer--action_bar .button,.ui.page--action_bar .button{height:32px;min-height:32px}.ui.drawer--action_bar .button-icon,.ui.page--action_bar .button-icon{width:32px}.ui.drawer--action_bar .button-icon .button-inner-container,.ui.page--action_bar .button-icon .button-inner-container{width:32px}.ui.drawer--action_bar .button .button-inner-container,.ui.page--action_bar .button .button-inner-container{height:32px}}@media only screen and (min-width:768px){.ui.drawer.drawer-has_action_bar .drawer--wing-container-inner,.ui.drawer.drawer-has_action_bar .drawer-container-inner{padding-top:70px}.ui.drawer.drawer-has_title_bar.drawer-has_action_bar .drawer--wing-container-inner,.ui.drawer.drawer-has_title_bar.drawer-has_action_bar .drawer-container-inner{padding-top:140px}.ui.drawer.drawer-has_title_bar.drawer-has_action_bar .drawer--wing-container-inner .ui.drawer--action_bar,.ui.drawer.drawer-has_title_bar.drawer-has_action_bar .drawer-container-inner .ui.drawer--action_bar{top:70px}.ui.drawer.drawer-has_title_bar.drawer-has_navigation.drawer-has_action_bar .drawer--wing-container-inner,.ui.drawer.drawer-has_title_bar.drawer-has_navigation.drawer-has_action_bar .drawer-container-inner{padding-top:195px}.ui.drawer.drawer-has_title_bar.drawer-has_navigation.drawer-has_action_bar .drawer--wing-container-inner .ui.drawer--action_bar,.ui.drawer.drawer-has_title_bar.drawer-has_navigation.drawer-has_action_bar .drawer-container-inner .ui.drawer--action_bar{top:125px}.ui.drawer--action_bar,.ui.page--action_bar{padding:0 22px}.ui.page--action_bar{left:250px;min-height:70px;padding:0 22px;top:70px}.ui.drawer--action_bar{height:70px}}