@alifd/next/lib/shell/variable.css

A configurable component library for web built on React.

:root {
--shell-light-header-color: #000000;
--shell-light-header-height: 52px;
--shell-light-header-background: #FFFFFF;
--shell-light-header-shadow: none;
--shell-light-header-divider-size: 1px;
--shell-light-header-divider-style: solid;
--shell-light-header-divider-color: #E6E7EB;
--shell-light-header-divider: 1px solid #E6E7EB;
--shell-light-header-paddingLeft: 16px;
--shell-light-multitask-min-height: 40px;
--shell-light-multitask-background: #FFFFFF;
--shell-light-multitask-shadow: none;
--shell-light-multitask-divider-size: 1px;
--shell-light-multitask-divider-style: solid;
--shell-light-multitask-divider-color: #E6E7EB;
--shell-light-multitask-divider: 1px solid #E6E7EB;
--shell-light-multitask-paddingLeft: 0px;
--shell-light-navigation-hoz-marginLeft: 48px;
--shell-light-navigation-hoz-align: flex-end;
--shell-light-navigation-ver-width: 168px;
--shell-light-navigation-ver-shadow: none;
--shell-light-navigation-ver-paddingTop: 8px;
--shell-light-navigation-ver-paddingBottom: 8px;
--shell-light-navigation-ver-width-mini: 60px;
--shell-light-navigation-ver-background: #FFFFFF;
--shell-light-navigation-ver-divider-size: 1px;
--shell-light-navigation-ver-divider-style: solid;
--shell-light-navigation-ver-divider-color: #E6E7EB;
--shell-light-navigation-ver-divider: 1px solid #E6E7EB;
--shell-light-local-navigation-width: 168px;
--shell-light-local-navigation-background: #E2E4E8;
--shell-light-local-navigation-paddingTop: 8px;
--shell-light-local-navigation-paddingBottom: 8px;
--shell-light-local-navigation-shadow: none;
--shell-light-local-navigation-divider-size: 1px;
--shell-light-local-navigation-divider-style: solid;
--shell-light-local-navigation-divider-color: #E6E7EB;
--shell-light-local-navigation-divider: 1px solid #E6E7EB;
--shell-light-appbar-background: #FFFFFF;
--shell-light-appbar-min-height: 48px;
--shell-light-appbar-shadow: none;
--shell-light-appbar-paddingLeft: 24px;
--shell-light-appbar-divider-size: 1px;
--shell-light-appbar-divider-style: solid;
--shell-light-appbar-divider-color: #E6E7EB;
--shell-light-appbar-divider: 1px solid #E6E7EB;
--shell-light-content-max-width: unset;
--shell-light-content-background: #EBECF0;
--shell-light-content-paddingLeft: 20px;
--shell-light-content-paddingTop: 20px;
--shell-light-content-gutter-row: 16px;
--shell-light-content-gutter-column: 16px;
--shell-light-content-columns: 1;
--shell-light-footer-min-height: 56px;
--shell-light-footer-background: transparent;
--shell-light-footer-color: #CCCCCC;
--shell-light-footer-font-size: 14px;
--shell-light-ancillary-width: 168px;
--shell-light-ancillary-background: #FFFFFF;
--shell-light-ancillary-paddingTop: 8px;
--shell-light-ancillary-paddingBottom: 8px;
--shell-light-ancillary-shadow: none;
--shell-light-ancillary-divider-size: 1px;
--shell-light-ancillary-divider-style: solid;
--shell-light-ancillary-divider-color: #E6E7EB;
--shell-light-ancillary-divider: 1px solid #E6E7EB;
--shell-light-tooldock-height: 52px;
--shell-light-tooldock-width: 52px;
--shell-light-tooldock-background: #E2E4E8;
--shell-light-tooldock-paddingTop: 8px;
--shell-light-tooldock-paddingBottom: 8px;
--shell-light-tooldock-shadow: none;
--shell-light-tooldock-divider-size: 1px;
--shell-light-tooldock-divider-style: solid;
--shell-light-tooldock-divider-color: #E6E7EB;
--shell-light-tooldock-divider: 1px solid #E6E7EB;
--shell-light-tooldock-item-paddingTop: 8px;
--shell-light-tooldock-item-color: #666666;
--shell-light-tooldock-item-color-hover: #333333;
--shell-light-tooldock-item-color-active: #333333;
--shell-light-tooldock-item-background: transparent;
--shell-light-tooldock-item-background-hover: #EBECF0;
--shell-light-tooldock-item-background-active: #EBECF0;
--shell-dark-header-color: #FFFFFF;
--shell-dark-header-height: 52px;
--shell-dark-header-background: #000000;
--shell-dark-header-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
--shell-dark-header-divider-size: 1px;
--shell-dark-header-divider-style: solid;
--shell-dark-header-divider-color: #1F1F1F;
--shell-dark-header-divider: 1px solid #1F1F1F;
--shell-dark-header-paddingLeft: 16px;
--shell-dark-multitask-min-height: 40px;
--shell-dark-multitask-background: #FFFFFF;
--shell-dark-multitask-shadow: none;
--shell-dark-multitask-divider-size: 1px;
--shell-dark-multitask-divider-style: solid;
--shell-dark-multitask-divider-color: #E6E7EB;
--shell-dark-multitask-divider: 1px solid #E6E7EB;
--shell-dark-multitask-paddingLeft: 0px;
--shell-dark-navigation-hoz-marginLeft: 48px;
--shell-dark-navigation-hoz-align: flex-end;
--shell-dark-navigation-ver-width: 168px;
--shell-dark-navigation-ver-shadow: none;
--shell-dark-navigation-ver-paddingTop: 8px;
--shell-dark-navigation-ver-paddingBottom: 8px;
--shell-dark-navigation-ver-width-mini: 60px;
--shell-dark-navigation-ver-background: #333333;
--shell-dark-navigation-ver-divider-size: 1px;
--shell-dark-navigation-ver-divider-style: solid;
--shell-dark-navigation-ver-divider-color: #E6E7EB;
--shell-dark-navigation-ver-divider: 1px solid #E6E7EB;
--shell-dark-local-navigation-width: 168px;
--shell-dark-local-navigation-background: #E2E4E8;
--shell-dark-local-navigation-paddingTop: 8px;
--shell-dark-local-navigation-paddingBottom: 8px;
--shell-dark-local-navigation-shadow: none;
--shell-dark-local-navigation-divider-size: 1px;
--shell-dark-local-navigation-divider-style: solid;
--shell-dark-local-navigation-divider-color: #E6E7EB;
--shell-dark-local-navigation-divider: 1px solid #E6E7EB;
--shell-dark-appbar-background: #FFFFFF;
--shell-dark-appbar-min-height: 48px;
--shell-dark-appbar-shadow: none;
--shell-dark-appbar-paddingLeft: 24px;
--shell-dark-appbar-divider-size: 1px;
--shell-dark-appbar-divider-style: solid;
--shell-dark-appbar-divider-color: #E6E7EB;
--shell-dark-appbar-divider: 1px solid #E6E7EB;
--shell-dark-content-max-width: unset;
--shell-dark-content-background: #EBECF0;
--shell-dark-content-paddingLeft: 20px;
--shell-dark-content-paddingTop: 20px;
--shell-dark-content-gutter-row: 16px;
--shell-dark-content-gutter-column: 16px;
--shell-dark-content-columns: 1;
--shell-dark-footer-min-height: 56px;
--shell-dark-footer-background: transparent;
--shell-dark-footer-color: #CCCCCC;
--shell-dark-footer-font-size: 14px;
--shell-dark-ancillary-width: 168px;
--shell-dark-ancillary-background: #FFFFFF;
--shell-dark-ancillary-paddingTop: 8px;
--shell-dark-ancillary-paddingBottom: 8px;
--shell-dark-ancillary-shadow: none;
--shell-dark-ancillary-divider-size: 1px;
--shell-dark-ancillary-divider-style: solid;
--shell-dark-ancillary-divider-color: #E6E7EB;
--shell-dark-ancillary-divider: 1px solid #E6E7EB;
--shell-dark-tooldock-height: 52px;
--shell-dark-tooldock-width: 52px;
--shell-dark-tooldock-background: #E2E4E8;
--shell-dark-tooldock-paddingTop: 8px;
--shell-dark-tooldock-paddingBottom: 8px;
--shell-dark-tooldock-shadow: none;
--shell-dark-tooldock-divider-size: 1px;
--shell-dark-tooldock-divider-style: solid;
--shell-dark-tooldock-divider-color: #E6E7EB;
--shell-dark-tooldock-divider: 1px solid #E6E7EB;
--shell-dark-tooldock-item-paddingTop: 8px;
--shell-dark-tooldock-item-color: #666666;
--shell-dark-tooldock-item-color-hover: #333333;
--shell-dark-tooldock-item-color-active: #333333;
--shell-dark-tooldock-item-background: transparent;
--shell-dark-tooldock-item-background-hover: #EBECF0;
--shell-dark-tooldock-item-background-active: #EBECF0;
--shell-brand-header-color: #FFFFFF;
--shell-brand-header-height: 52px;
--shell-brand-header-background: #5584FF;
--shell-brand-header-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
--shell-brand-header-divider-size: 1px;
--shell-brand-header-divider-style: solid;
--shell-brand-header-divider-color: #E6E7EB;
--shell-brand-header-divider: 1px solid #E6E7EB;
--shell-brand-header-paddingLeft: 16px;
--shell-brand-multitask-min-height: 40px;
--shell-brand-multitask-background: #FFFFFF;
--shell-brand-multitask-shadow: none;
--shell-brand-multitask-divider-size: 1px;
--shell-brand-multitask-divider-style: solid;
--shell-brand-multitask-divider-color: #E6E7EB;
--shell-brand-multitask-divider: 1px solid #E6E7EB;
--shell-brand-multitask-paddingLeft: 0px;
--shell-brand-navigation-hoz-marginLeft: 48px;
--shell-brand-navigation-hoz-align: flex-end;
--shell-brand-navigation-ver-width: 168px;
--shell-brand-navigation-ver-shadow: none;
--shell-brand-navigation-ver-paddingTop: 8px;
--shell-brand-navigation-ver-paddingBottom: 8px;
--shell-brand-navigation-ver-width-mini: 60px;
--shell-brand-navigation-ver-background: #FFFFFF;
--shell-brand-navigation-ver-divider-size: 1px;
--shell-brand-navigation-ver-divider-style: solid;
--shell-brand-navigation-ver-divider-color: #E6E7EB;
--shell-brand-navigation-ver-divider: 1px solid #E6E7EB;
--shell-brand-local-navigation-width: 168px;
--shell-brand-local-navigation-background: #E2E4E8;
--shell-brand-local-navigation-paddingTop: 8px;
--shell-brand-local-navigation-paddingBottom: 8px;
--shell-brand-local-navigation-shadow: none;
--shell-brand-local-navigation-divider-size: 1px;
--shell-brand-local-navigation-divider-style: solid;
--shell-brand-local-navigation-divider-color: #E6E7EB;
--shell-brand-local-navigation-divider: 1px solid #E6E7EB;
--shell-brand-appbar-background: #FFFFFF;
--shell-brand-appbar-min-height: 48px;
--shell-brand-appbar-shadow: none;
--shell-brand-appbar-paddingLeft: 24px;
--shell-brand-appbar-divider-size: 1px;
--shell-brand-appbar-divider-style: solid;
--shell-brand-appbar-divider-color: #E6E7EB;
--shell-brand-appbar-divider: 1px solid #E6E7EB;
--shell-brand-content-max-width: unset;
--shell-brand-content-background: #EBECF0;
--shell-brand-content-paddingLeft: 20px;
--shell-brand-content-paddingTop: 20px;
--shell-brand-content-gutter-row: 16px;
--shell-brand-content-gutter-column: 16px;
--shell-brand-content-columns: 1;
--shell-brand-footer-min-height: 56px;
--shell-brand-footer-background: transparent;
--shell-brand-footer-color: #CCCCCC;
--shell-brand-footer-font-size: 14px;
--shell-brand-ancillary-width: 168px;
--shell-brand-ancillary-background: #FFFFFF;
--shell-brand-ancillary-paddingTop: 8px;
--shell-brand-ancillary-paddingBottom: 8px;
--shell-brand-ancillary-shadow: none;
--shell-brand-ancillary-divider-size: 1px;
--shell-brand-ancillary-divider-style: solid;
--shell-brand-ancillary-divider-color: #E6E7EB;
--shell-brand-ancillary-divider: 1px solid #E6E7EB;
--shell-brand-tooldock-height: 52px;
--shell-brand-tooldock-width: 52px;
--shell-brand-tooldock-background: #E2E4E8;
--shell-brand-tooldock-paddingTop: 8px;
--shell-brand-tooldock-paddingBottom: 8px;
--shell-brand-tooldock-shadow: none;
--shell-brand-tooldock-divider-size: 1px;
--shell-brand-tooldock-divider-style: solid;
--shell-brand-tooldock-divider-color: #E6E7EB;
--shell-brand-tooldock-divider: 1px solid #E6E7EB;
--shell-brand-tooldock-item-paddingTop: 8px;
--shell-brand-tooldock-item-color: #666666;
--shell-brand-tooldock-item-color-hover: #333333;
--shell-brand-tooldock-item-color-active: #333333;
--shell-brand-tooldock-item-background: transparent;
--shell-brand-tooldock-item-background-hover: #EBECF0;
--shell-brand-tooldock-item-background-active: #EBECF0;
}