|
|
$drawer-background: #FFFFFF; |
|
|
$item-first: lighten($drawer-background, 10%); |
|
|
$item-secondary: lighten($item-first, 10%); |
|
|
$item-first-color: #F7F9FB; |
|
|
$item-secondary-color: lighten($item-first-color, 5%); |
|
|
$menu-hover: #E8E8E8; |
|
|
$menu-color-hover: darken($menu-hover, 60%); |
|
|
$menu-item-active: #FE9833; |
|
|
$menu-item-active-color: #FFFFFF; |
|
|
$drawer-width: 140px; |
|
|
|
|
|
html { |
|
|
height: 100%; |
|
|
body { |
|
|
height: 100%; |
|
|
position: relative; |
|
|
&.h-100 { |
|
|
&.swal2-height-auto { |
|
|
height: 100% !important; |
|
|
} |
|
|
} |
|
|
aside, main { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
height: 100%; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
aside, main, nav.fixed-top, .card .fixed-top { |
|
|
transition-duration: .2s; |
|
|
animation-timing-function: ease-in-out; |
|
|
} |
|
|
#logo-container { |
|
|
background-color: #FFF |
|
|
} |
|
|
aside { |
|
|
|
|
|
.drawer-logo { |
|
|
height: 39px !important; |
|
|
margin: 8px 0px; |
|
|
} |
|
|
left: 0; |
|
|
width: $drawer-width; |
|
|
left: -$drawer-width; |
|
|
transition-property: left; |
|
|
background-color: $drawer-background; |
|
|
@include media-breakpoint-up(lg) { |
|
|
-webkit-box-shadow: 1px 1px 10px 1px rgba(0,0,0,0.08); |
|
|
-moz-box-shadow: 1px 1px 10px 1px rgba(0,0,0,0.08); |
|
|
box-shadow: 1px 1px 10px 1px rgba(0,0,0,0.08); |
|
|
} |
|
|
z-index: 2; |
|
|
.scrollable::-webkit-scrollbar { |
|
|
width: 0px; |
|
|
background: transparent; /* make scrollbar transparent */ |
|
|
display: none; |
|
|
} |
|
|
.scrollable { |
|
|
overflow-y: auto; |
|
|
overflow: -moz-scrollbars-none; |
|
|
-ms-overflow-style: none; |
|
|
} |
|
|
.list-group { |
|
|
.list-group-item { |
|
|
background-color: transparent; |
|
|
border-radius: 0px; |
|
|
padding: 9px 0px; |
|
|
cursor: pointer; |
|
|
&.main { |
|
|
cursor: default; |
|
|
} |
|
|
&.list-group-item-action { |
|
|
color: $item-first-color; |
|
|
background-color: $item-first; |
|
|
&.item-active { |
|
|
background-color: $menu-item-active; |
|
|
color: $menu-item-active-color; |
|
|
} |
|
|
&.nested { |
|
|
padding: 5px 0px; |
|
|
color: $item-secondary-color; |
|
|
background-color: $item-secondary; |
|
|
&.item-active { |
|
|
background-color: $menu-item-active; |
|
|
color: $menu-item-active-color; |
|
|
} |
|
|
&:hover, &:focus { |
|
|
background-color: $menu-hover; |
|
|
color: $menu-color-hover; |
|
|
} |
|
|
} |
|
|
&:not(.main) { |
|
|
&:hover, &:focus { |
|
|
background-color: $menu-hover; |
|
|
color: $menu-color-hover; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
.list-group-item { |
|
|
&::before { |
|
|
content: ""; |
|
|
padding-left: 10px; |
|
|
} |
|
|
&.nested { |
|
|
&::before { |
|
|
content: ""; |
|
|
padding-left: 30px; |
|
|
} |
|
|
} |
|
|
} |
|
|
.list-group-item { |
|
|
border: 0px; |
|
|
// border-top: 1px solid $gray-300; |
|
|
} |
|
|
.list-group-item:last-child { |
|
|
// border-bottom: 1px solid $gray-600; |
|
|
} |
|
|
} |
|
|
.list-unstyled { |
|
|
li { |
|
|
padding-top: 1rem; |
|
|
padding-bottom: 1rem; |
|
|
a { |
|
|
color: #999999; |
|
|
font-size: 80%; |
|
|
width: 100%; |
|
|
&:hover { |
|
|
text-decoration: none; |
|
|
color: #00208b; |
|
|
} |
|
|
} |
|
|
&.active { |
|
|
a { |
|
|
color: #0083c7; |
|
|
&::after { |
|
|
font-size: 120%; |
|
|
white-space: pre; |
|
|
content: "\a•"; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
header { |
|
|
background-color: #00208b; |
|
|
.user-menu { |
|
|
right: 0; |
|
|
left: auto; |
|
|
} |
|
|
nav { |
|
|
&.navbar { |
|
|
background-color: #00208b; |
|
|
padding: 0rem; |
|
|
.drawer-toogle { |
|
|
margin-left: 1rem; |
|
|
} |
|
|
ul { |
|
|
&.nav { |
|
|
li { |
|
|
&.dropdown { |
|
|
&.show{ |
|
|
background-color: #0083c7; |
|
|
} |
|
|
} |
|
|
a { |
|
|
&.first-level { |
|
|
color: #E6E6E6; |
|
|
padding:5px; |
|
|
margin: 5px; |
|
|
} |
|
|
} |
|
|
a:hover { |
|
|
&.first-level { |
|
|
color: #FFFFFF; |
|
|
} |
|
|
} |
|
|
color: #E6E6E6; |
|
|
padding-top: 0.5rem; |
|
|
padding-bottom: 0.5rem; |
|
|
text-align: center; |
|
|
} |
|
|
li:hover { |
|
|
color: #FFFFFF; |
|
|
background-color: #0083c7; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
.btn-group-toggle { |
|
|
.active { |
|
|
background-color: #11871F !important; |
|
|
color: #FFF !important; |
|
|
&:hover { |
|
|
background-color: #72B01D; |
|
|
color: #FFF !important; |
|
|
} |
|
|
} |
|
|
} |
|
|
main { |
|
|
overflow-y: auto; |
|
|
padding-top: 55px; |
|
|
background-color: $gray-200; |
|
|
background-color: #eff2f7; |
|
|
.main-container { |
|
|
padding: 1rem; |
|
|
position: relative; |
|
|
min-height: 100vh; |
|
|
.display-4 { |
|
|
// line-height: 0.4; |
|
|
small { |
|
|
font-size: 44%; |
|
|
} |
|
|
} |
|
|
#commands { |
|
|
.fixed { |
|
|
position: fixed; |
|
|
left: 0; |
|
|
right: 0; |
|
|
background-color: #FFFFFF; |
|
|
top: 56px; |
|
|
z-index: 9999; |
|
|
padding: 0.5rem 0.75rem; |
|
|
border-bottom: 1px solid #CCCCCC; |
|
|
} |
|
|
} |
|
|
#guue-commands { |
|
|
&.fixed { |
|
|
position: fixed; |
|
|
top: 80px; |
|
|
right: 0; |
|
|
z-index: 9999; |
|
|
padding: 0.5em 1em 0.5em 3.75em; |
|
|
} |
|
|
} |
|
|
} |
|
|
.card { |
|
|
&.fixed-top { |
|
|
top: 57px; |
|
|
} |
|
|
} |
|
|
#bottom { |
|
|
background-color: #FFFFFF; |
|
|
* { |
|
|
color: #333333; |
|
|
} |
|
|
-webkit-box-shadow: 0px -10px 15px -20px rgba(0,0,0,0.75); |
|
|
-moz-box-shadow: 0px -10px 15px -20px rgba(0,0,0,0.75); |
|
|
box-shadow: 0px -10px 15px -20px rgba(0,0,0,0.75); |
|
|
} |
|
|
#main-tools { |
|
|
background-color: #00438B; |
|
|
position: fixed; |
|
|
z-index: 99999; |
|
|
right: 0; |
|
|
left: 0; |
|
|
max-height: 80vh; |
|
|
overflow-y: scroll; |
|
|
.list-group { |
|
|
margin-top: 5px; |
|
|
.list-group-item { |
|
|
/* *:not(.fa) { |
|
|
color: #FFFFFF !important; |
|
|
} */ |
|
|
padding: 0.2rem 1rem; |
|
|
background-color: transparent !important; |
|
|
border: 1px solid rgba(255, 255, 255, 0.8); |
|
|
border-right: 0; |
|
|
border-left: 0; |
|
|
border-radius: 0; |
|
|
&:first-child { |
|
|
border-top: 0; |
|
|
} |
|
|
&:last-child { |
|
|
border-bottom: 0; |
|
|
} |
|
|
.bg-light, |
|
|
.bg-warning { |
|
|
color: #00438B !important; |
|
|
* { |
|
|
color: #00438B !important; |
|
|
} |
|
|
} |
|
|
* { |
|
|
&:hover { |
|
|
text-decoration: none; |
|
|
cursor: pointer; |
|
|
} |
|
|
} |
|
|
&.active, |
|
|
&:hover { |
|
|
background-color: #0083c7 !important; |
|
|
} |
|
|
} |
|
|
} |
|
|
.btn-circle { |
|
|
width: 30px; |
|
|
height: 30px; |
|
|
padding: 6px 0px; |
|
|
border-radius: 15px; |
|
|
text-align: center; |
|
|
font-size: 12px; |
|
|
line-height: 1.42857; |
|
|
} |
|
|
.btn-circle-sm { |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
padding: 0px; |
|
|
border-radius: 15px; |
|
|
text-align: center; |
|
|
font-size: 12px; |
|
|
line-height: 1.05; |
|
|
cursor: pointer; |
|
|
} |
|
|
} |
|
|
} |
|
|
main, nav.fixed-top { |
|
|
right: 0; |
|
|
left: 0; |
|
|
transition-property: left, right; |
|
|
.drawer-toogle:hover { |
|
|
color: $gray-300; |
|
|
} |
|
|
} |
|
|
&.drawer-in { |
|
|
main, nav.fixed-top { |
|
|
left: $drawer-width; |
|
|
right: -$drawer-width; |
|
|
} |
|
|
main { |
|
|
.card { |
|
|
&.fixed-top { |
|
|
left: $drawer-width; |
|
|
right: -$drawer-width; |
|
|
} |
|
|
} |
|
|
} |
|
|
aside { |
|
|
left: 0px; |
|
|
} |
|
|
} |
|
|
@include media-breakpoint-up(lg) { |
|
|
main, nav.fixed-top { |
|
|
left: $drawer-width; |
|
|
} |
|
|
main { |
|
|
.main-container { |
|
|
#commands { |
|
|
.fixed { |
|
|
} |
|
|
} |
|
|
} |
|
|
#main-tools { |
|
|
left: $drawer-width; |
|
|
} |
|
|
.card { |
|
|
&.fixed-top { |
|
|
left: $drawer-width; |
|
|
} |
|
|
} |
|
|
} |
|
|
aside { |
|
|
left: 0; |
|
|
} |
|
|
&.drawer-out { |
|
|
main, nav.fixed-top { |
|
|
left: 0; |
|
|
right: 0; |
|
|
} |
|
|
main { |
|
|
#commands { |
|
|
.fixed { |
|
|
left: 0; |
|
|
} |
|
|
} |
|
|
#main-tools { |
|
|
left: 0; |
|
|
} |
|
|
.card { |
|
|
&.fixed-top { |
|
|
left: 0; |
|
|
right: 0; |
|
|
} |
|
|
} |
|
|
} |
|
|
aside { |
|
|
left: -$drawer-width; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
table.table-condensed { |
|
|
&.dataTable { |
|
|
thead { |
|
|
.sorting, |
|
|
.sorting_asc, |
|
|
.sorting_desc, |
|
|
.sorting_asc_disabled, |
|
|
.sorting_desc_disabled { |
|
|
&:before, |
|
|
&:after { |
|
|
bottom: 0.5em !important; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
thead { |
|
|
tr { |
|
|
td { |
|
|
padding: 0.5rem !important; |
|
|
vertical-align: middle !important; |
|
|
&.fit-content { |
|
|
width:1px; |
|
|
white-space:nowrap; |
|
|
padding: 0.5rem 30px 0.5rem 0.5rem !important; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
tbody { |
|
|
tr { |
|
|
td { |
|
|
vertical-align: middle !important; |
|
|
padding: 0.2rem !important; |
|
|
&.fit-content { |
|
|
width:1px; |
|
|
white-space:nowrap; |
|
|
padding: 0.5rem 0.6rem !important; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
@include media-breakpoint-down(sm) { |
|
|
#guue-commands { |
|
|
&.fixed { |
|
|
padding: 1em !important; |
|
|
position: static !important; |
|
|
right: 0 !important; |
|
|
top: 0 !important; |
|
|
padding: auto; |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
@include media-breakpoint-down(xs) { |
|
|
.btn-block-m { |
|
|
display: block; |
|
|
width: 100%; |
|
|
margin-bottom: 0.5rem; |
|
|
} |
|
|
} |
|
|
|
|
|
@include media-breakpoint-up(lg) { |
|
|
#modal-helper { |
|
|
.modal-dialog { |
|
|
width: 990px; |
|
|
max-width: 990px !important; |
|
|
.modal-content { |
|
|
width: 990px; |
|
|
max-width: 990px !important; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
@include media-breakpoint-up(xl) { |
|
|
#modal-helper { |
|
|
.modal-dialog { |
|
|
width: 1140px; |
|
|
max-width: 1140px !important; |
|
|
.modal-content { |
|
|
width: 1140px; |
|
|
max-width: 1140px !important; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
#guue-sections { |
|
|
max-height: 70vh; |
|
|
overflow-y: auto; |
|
|
padding: 0; |
|
|
margin-left: 1em; |
|
|
margin-right: 1em; |
|
|
max-width: calc(100% - 2em); |
|
|
} |
