/* Define the following variables on your project css file. --sidebar-font-size: 16px; --header-height: 70px; --list-card-max-width: 1220px; */ /* Global css*/ html .dashboard { color: black; } .dashboard .clickable { cursor: pointer !important; } /* On link hover, his items with this class will be displayed*/ .dashboard li > a .onHover { display: none; } .dashboard li > a:hover .onHover, .dashboard li > a .onHover.uk-open { display: block; } /* Custom height of header, change var: header-height*/ .dashboard #sidebar_main { display: flex; flex-direction: column; } .dashboard #sidebar_main .sidebar_main_header { height: auto; min-height: var(--header-height); } .dashboard #sidebar_main .menu_section { overflow: auto; flex: 1; } .dashboard #sidebar_main .menu_footer { height: auto; } .dashboard .header_full #sidebar_main .sidebar_main_header { min-height: auto; } .dashboard #sidebar_main .menu_section > ul > li > a { font-weight: 700; overflow: unset; } .dashboard #sidebar_main .menu_section > ul > li:not([class*=md-bg-]) > a:hover { background-color: #F0F0F0; } .dashboard #sidebar_main .menu_section > ul > li > a > .menu_icon { width: 30px; } .dashboard #sidebar_main .menu_section > ul > li > a > .menu_on_hover { width: 40px; } .dashboard #sidebar_main .menu_section > ul > li > ul > li > a:hover { background-color: #F0F0F0; margin-right: 5px; } .dashboard #sidebar_main .menu_section > ul li > a { font-size: var(--sidebar-font-size); color: rgba(0, 0, 0, 0.7); } .dashboard #sidebar_main .menu_section > ul li > a > .menu_on_hover { width: 40px; } .dashboard #sidebar_main .menu_section .uk-dropdown { min-width: 150px; } .dashboard #sidebar_main .menu_section .uk-dropdown > ul { display: block; margin: 0; text-align: start; } .dashboard #sidebar_main .menu_section .uk-dropdown > ul > li > a { padding: 5px 10px; color: black !important; } .dashboard #sidebar_main .menu_section > ul ul > li > a { line-height: 20px; } .dashboard #sidebar_main .menu_section > ul li > a { display: flex; align-items: center; } body.dashboard { padding-top: var(--header-height); } .dashboard .header_full #sidebar_main { top: var(--header-height); } .dashboard #header_main { height: var(--header-height); } .dashboard #header_main > .uk-navbar { height: var(--header-height); } .dashboard #header_main > .uk-navbar > * { vertical-align: middle; } .dashboard #header_main #sidebar_main_toggle { margin: calc(var(--header-height) - 48px) 0; } /* Custom card*/ .dashboard .md-card .md-card-content { color: rgba(0, 0, 0, 0.8); } .dashboard .md-card .md-card-toolbar .md-card-toolbar-actions { color: rgba(0, 0, 0, 0.8); } @media only screen and (max-width: 767px) { .dashboard .md-card .md-card-toolbar .md-card-toolbar-actions span { display: none; } } .dashboard .md-card .md-card-toolbar .md-card-toolbar-heading-text { font-weight: 700; float: none; } .dashboard .max-width-large { max-width: 1220px; } /* Breadcrumb*/ .dashboard #breadcrumbs { background: inherit; } .dashboard #breadcrumbs > li a, .dashboard #breadcrumbs > li span { color: rgba(0, 0, 0, 0.4); font-size: 12px; line-height: 20px; } .dashboard #breadcrumbs > li + li a:before, .dashboard #breadcrumbs > li + li span:before { font-weight: 400 !important; margin-top: -9px; font-size: 16px; } /* Notification */ /* Change z-index, because of sidebar and header z-index is bigger that default */ .dashboard .uk-notification { z-index: 2000; } .dashboard .uk-notification-message { border-radius: 3px; font-size: 14px; } .dashboard .uk-notification-message.uk-notification-message-success { background-color: #e0f0d5; color: #669a59; } .dashboard .uk-notification-message.uk-notification-message-danger { background-color: #f2dede; color: #b25654; } .dashboard .uk-notification-close.uk-close::after { font-size: 16px; } .dashboard .uk-notification-close.uk-icon.uk-close svg { display: none; } /* Form */ .dashboard .uk-form-stacked .uk-form-label { font-size: 14px; font-weight: 700; padding: 0; margin-top: 5px; } .dashboard .md-input { color: black; } /* Modal*/ .dashboard .uk-modal .large-modal { width: 800px; } .dashboard .uk-modal .uk-close::after { display: none; } /* Sortable*/ .dashboard .uk-sortable > * { cursor: move; } .dashboard .uk-sortable-drag .md-card.md-card-hover { -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); } .dashboard .uk-sortable-drag { overflow: unset !important; } .uk-drag .dashboard .disable-sortable { pointer-events: none; } .dashboard .uk-sortable .uk-sortable-nodrag { cursor: default; } /* Dropdown*/ .dashboard .uk-dropdown { opacity: 1; transform: none; -webkit-transform: none; padding: 5px 0; } .dashboard .md-card-dropdown .uk-dropdown { min-width: 160px; } .dashboard .uk-dropdown .uk-nav.uk-dropdown-nav > li > a { padding: 5px 10px; } .badge { height: 100px; position: absolute; top: 0; left: 0; z-index: 1; } .small-badge { height: 70px; } .right-badge{ top: 0; left: auto; transform: rotate(90deg); right: 0; }