/*--- Colors ---*/
@red: #DB2828;
@orange: #F2711C;
@yellow: #FBBD08;
@olive: #B5CC18;
@green: #21BA45;
@teal: #00B5AD;
@blue: #2185D0;
@violet: #6435C9;
@purple: #A333C8;
@pink: #E03997;
@brown: #A5673F;
@grey: #767676;
@black: #1B1C1D;
/*--- Light Colors ---*/
@lightRed: #FF695E;
@lightOrange: #FF851B;
@lightYellow: #FFE21F;
@lightOlive: #D9E778;
@lightGreen: #2ECC40;
@lightTeal: #6DFFFF;
@lightBlue: #54C8FF;
@lightViolet: #A291FB;
@lightPurple: #DC73FF;
@lightPink: #FF8EDF;
@lightBrown: #D67C1C;
@lightGrey: #DCDDDE;
@lightBlack: #545454;
/*--- Neutrals ---*/
@fullBlack: #000000;
@offWhite: #F9FAFB;
@darkWhite: #F3F4F5;
@midWhite: #DCDDDE;
@white: #FFFFFF;
// Variables
@leftMenuWidth: 260px;
@maestroSpace: 8px;
@maestroItemsLeftMargin: 10px;
@desktopWidth: 992px;
@tabletWidth: 768px;
@adminMenuHeight: 48px;
@atkFooterHeight : 50px;
@menuBorder: 1px solid rgba(255,255,255,0.1);
@atkSlidePanelColor: @offWhite;
// z-index
@topMenuIndex: 201;
@rightPanelIndex: 301;
@pushableIndex: 101;
@sideNavIndex: 200;
/******* ADMIN TOP MENU *******/
.ui.inverted.fixed.atk-admin-top-menu {
border: @menuBorder;
z-index: @topMenuIndex;
}
/******* ADMIN SIDENAV MENU *******/
.atk-maestro-sidenav > .ui.grid {
width: @leftMenuWidth;
}
.atk-sidenav-content {
overflow-x: hidden;
overflow-y: auto;
}
/* A selected item in admin menu */
.ui.sidebar.atk-sidenav {
.menu > .item.active {
background: none;
}
}
/******* MAESTRO SIDENAV MENU *******/
.atk-maestro-sidenav {
cursor: pointer;
color: white;
}
.atk-maestro-sidenav > .ui.grid > .atk-maestro-menu-items {
display: none;
&.atk-visible {
display: flex;
}
}
/* MenuItem without a group in menu */
.ui.inverted.menu a.atk-maestro-sidenav.item {
padding-left: 34px;
i {
margin-right: 2px;
}
&.active {
background-color: @blue;
}
}
.atk-maestro-sidenav {
.atk-submenu-toggle {
div {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
}
&:not(active) {
.atk-submenu-toggle:hover {
background-color: rgba(255,255,255,0.15);
}
}
.ui.grid {
.row {
padding: 0px;
}
.column {
padding-top: @maestroSpace;
padding-bottom: @maestroSpace;
}
.atk-maestro-menu-title header {
margin-left: -@maestroItemsLeftMargin;
}
.atk-maestro-menu-items .menu {
margin-left: @maestroItemsLeftMargin;
}
}
}
.atk-maestro-sidenav.active .atk-maestro-menu-title {
background-color: @blue;
}
// Layout
header.ui.fixed.horizontal.menu {
min-height: 48px;
}
.ui.visible.left.sidebar ~ header.atk-topMenu.ui.menu.fixed {
width: ~'calc(100% - '@leftMenuWidth~')';
}
.ui.visible.left.sidebar ~ .atk-mainContainer,
.ui.visible.left.sidebar ~ footer.atk-footer {
padding-left: @leftMenuWidth;
}
.ui.modal .atk-dialog-content.loading,
.ui.modal .atk-dialog-content .ui.dimmer.active {
min-height: 100px;
}
.atk-hide-loading-content.loading:before {
background: rgba(255,255,255,.98) !important;
}
.atk-layout {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.atk-topMenuGhost.ui.menu {
display: none;
margin: 0;
pointer-events: none;
visibility: hidden;
}
header.atk-topMenu.ui.fixed.menu ~ .atk-topMenuGhost {
display: block;
}
header.atk-topMenu.ui.menu .item > .label {
margin-left: 0;
}
.atk-mainContainer {
flex: 1;
.atk-mainContainerWrapper {
padding: 3em;
}
&.atk-admin-layout {
margin-top: @adminMenuHeight;
}
}
footer.atk-footer {
.ui.divider, .ui.segment {
margin: 0;
}
.ui.segment {
}
}
.ui.left.sidebar {
z-index: @sideNavIndex;
}
.atk-right-panel {
-webkit-transition: box-shadow 0.2s, right 0.2s;
-moz-transition: box-shadow 0.2s, right 0.2s;
-ms-transition: box-shadow 0.2s, right 0.2s;
-o-transition: box-shadow 0.2s, right 0.2s;
transition: box-shadow 0.2s, right 0.2s;
bottom: 0;
background-color: @atkSlidePanelColor;
box-shadow: 0 0 0 fade(@black, 0%);
height: 99%;
right: -100%;
overflow-y: auto;
position: fixed;
width: 40%;
z-index: @rightPanelIndex;
&.atk-visible {
box-shadow: 0px 0 5px fade(@black, 20%);
right: 0%;
}
}
.atk-panel-close {
color: @black;
}
i.atk-panel-warning {
color: @atkSlidePanelColor;
&.atk-visible {
color: @orange;
}
}
.ui.left.sidebar.atk-sidenav {
top: @adminMenuHeight;
}
.atk-sidenav-content {
height: ~'calc(100% - '@atkFooterHeight + @adminMenuHeight~')';
}
.ui.left.sidebar.atk-sidenav {
width: @leftMenuWidth;
}
// table dropdown menu
.atk-table-dropdown {
float: left;
i {
opacity: 0.3;
}
i.table-filter-on {
&:after {
content: '\f150';
color: dodgerblue;
}
}
i.table-filter-off {
&:after {
content: '\f150';
}
}
.dropdown {
.menu {
margin: 1em -10px 0 !important;
}
}
}
.atk-table-column-header {
white-space: pre-wrap;
&:after {
//display: none;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
content: '';
height: 1em;
width: auto;
opacity: 0.8;
margin: 0em 0em 0em 0.5em;
font-family: 'Icons';
float: right;
}
}
.atk-table-column-header.ascending {
&:after {
content: '\f0d8';
}
}
.atk-table-column-header.descending {
&:after {
content: '\f0d7';
}
}
.ui.sortable.table thead th:not(.sortable) {
cursor: default;
}
// fix calendar input
// https://github.com/atk4/ui/issues/1376
.ui.input .ui.popup.calendar {
padding: 0px;
}
// Components
.ui.step, .ui.steps .step {
user-select: none;
}
.atk-overflow-auto {
overflow: auto;
border: 1px solid rgba(34, 36, 38, 0.15);
margin-bottom: 1em;
> .ui.table {
margin-top: 0em;
}
}
.atk-cell-expanded {
min-width: 320px;
max-width: 640px;
white-space: normal
}
.atk-overlay.pushable {
height: 100%;
left: 0;
opacity: 0;
pointer-events: none;
position: fixed;
top: @adminMenuHeight;
width: 100%;
z-index: @pushableIndex;
.pusher {
&:after {
height: 100%;
opacity: 1;
width: 100%;
}
}
}
// Responsive
@media (max-width: (@desktopWidth - 1px)) {
.ui.left.sidebar ~ header.atk-topMenu.ui.menu.fixed {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
width: 100% !important;
}
.ui.visible.left.sidebar ~ .atk-mainContainer,
.ui.visible.left.sidebar ~ footer.atk-footer {
padding-left: 0;
}
.ui.left.sidebar {
opacity: 0;
pointer-events: none;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
body.atk-sidenav-visible {
&:after {
left: 0;
position: fixed;
top: 0;
}
.ui.left.sidebar {
opacity: 1;
pointer-events: auto;
.atk-leftMenuClose {
display: block;
}
}
}
}
@media (max-width: @desktopWidth - 1px) {
body.atk-sidenav-visible .atk-overlay.pushable {
opacity: 1;
}
}
@media (min-width: @tabletWidth) and (max-width: (@desktopWidth - 1px)) {
.atk-right-panel {
width: 65%;
}
}
@media (max-width: (@tabletWidth - 1px)) {
.atk-right-panel {
width: 95%;
}
}
// Print
@media print {
.ui.visible.left.sidebar ~ .atk-mainContainer,
.ui.visible.left.sidebar ~ footer.atk-footer {
padding-left: 0;
}
.ui.left.sidebar, .atk-topMenu, .atk-topMenuGhost {
display: none !important;
}
}
|
Download
