Shell File Manager
/* Layouts */
body {
min-height: 100vh;
position: relative;
background: $grey2-color;
}
.no-bd{
border: 0px !important;
}
.no-box-shadow {
box-shadow: none !important;
}
/* margin-top negative */
.mt--5, .my--5 {
margin-top: (-3rem) !important;
}
.mt--4, .my--4 {
margin-top: (-1.5rem) !important;
}
.mt--3, .my--3 {
margin-top: (-1rem) !important;
}
.mt--2, .my--2 {
margin-top: (-0.5rem) !important;
}
.mt--1, .my--1 {
margin-top: (-0.25rem) !important;
}
/* Wrapper */
.pull-right {
float: right;
}
.pull-left {
float: left;
}
.wrapper {
min-height: 100vh;
position: relative;
top: 0;
height: 100vh;
}
.main-header {
background: $white-color;
min-height: 60px;
width: 100%;
position: fixed;
z-index: 1001;
box-shadow: 0px 0px 5px rgba(18, 23, 39, 0.5);
.navbar-header {
min-height: 62px;
.btn-toggle {
margin-right: 30px;
margin-left: 20px;
}
}
}
.logo-header {
float: left;
width: 250px;
height: 62px;
line-height: 60px;
color: #333333;
z-index: 1001;
font-size: 17px;
font-weight: $font-weight-normal;
padding-left: 25px;
padding-right: 25px;
z-index: 1001;
display: flex;
align-items: center;
position: relative;
transition: all .3s;
.big-logo {
margin-right: 8px;
&:hover {
text-decoration: none;
}
.logo-img{
width: 35px;
height: 35px;
}
}
.logo {
color: $body-text-color;
opacity: 1;
position: relative;
height: 100%;
&:hover {
text-decoration: none;
}
.navbar-brand{
padding-top: 0px;
padding-bottom: 0px;
margin-right: 0px;
}
}
.nav-toggle{
position: absolute;
top: 0;
right: 18px;
z-index: 5;
}
.navbar-toggler {
padding-left: 0px;
padding-right: 0px;
opacity: 0;
display: none;
.navbar-toggler-icon {
height: 1em;
width: 1em;
color: #545454;
font-size: 22px;
}
}
.more {
background: $transparent-bg;
border: 0;
font-size: 22px;
padding: 0;
opacity: 0;
width: 0;
display: none;
}
}
.btn-toggle{
font-size: 20px !important;
line-height: 20px;
padding: 0px !important;
background: transparent !important;
color: $body-text-color !important;
&:hover, &:focus {
opacity: 1;
}
}
#search-nav {
flex: 1;
max-width: 400px;
}
%nav-item-hover-before {
opacity: 1 !important;
position: absolute;
z-index: 1;
width: 3px;
height: 100%;
content: '';
left: 0;
top: 0;
}
.sidebar, .sidebar[data-background-color="white"] {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 250px;
margin-top: 62px;
display: block;
z-index: 1000;
color: $white-color;
font-weight: 200;
background: $white-color;
-webkit-box-shadow: 4px 4px 10px rgba(69, 65, 78, 0.06);
-moz-box-shadow: 4px 4px 10px rgba(69, 65, 78, 0.06);
box-shadow: 4px 4px 10px rgba(69, 65, 78, 0.06);
transition: all .3s;
&.full-height {
margin-top: 0;
}
.user {
margin-top: 20px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 12.5px;
border-bottom: 1px solid $grey-color;
display: block;
margin-left: 10px;
margin-right: 10px;
.info {
a {
white-space: nowrap;
display: block;
position: relative;
&:hover, &:focus {
text-decoration: none;
}
> span {
font-size: 14px;
font-weight: $font-weight-normal;
color: #777;
display: flex;
flex-direction: column;
.user-level {
color: #555;
font-weight: $font-weight-bold;
font-size: 12px;
margin-top: 5px;
}
}
.link-collapse {
padding: 7px 0;
}
}
.caret {
position: absolute;
top: 17px;
right: 0px;
border-top-color: #777;
}
}
}
.sidebar-wrapper {
position: relative;
max-height: calc(100vh - 75px);
min-height: 100%;
overflow: auto;
width: 100%;
z-index: 4;
padding-bottom: 100px;
transition: all .3s;
.sidebar-content{
padding-top: 0px;
padding-bottom: 55px;
}
.scroll-element.scroll-y{
top: 5px !important;
}
}
.nav {
display: block;
float: none;
margin-top: 20px;
.nav-section{
margin: 15px 0 0 0;
.sidebar-mini-icon{
text-align: center;
font-size: 15px;
color: rgb(144, 144, 147);
display: none;
}
.text-section{
padding: 2px 30px;
font-size: 12px;
color: #727275;
font-weight: $font-weight-bold;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 12px;
margin-top: 20px;
}
}
> .nav-item {
display: list-item;
&.active {
> a {
color: $body-text-color !important;
&:before {
background: #1d7af3;
@extend %nav-item-hover-before;
}
p {
color: $body-text-color !important;
font-weight: $font-weight-bold;
}
}
&:hover > a:before {
background: #1d7af3;
@extend %nav-item-hover-before;
}
a i {
color: #4d7cfe;
}
}
&.submenu{
background: rgba(0, 0, 0, 0.03);
> li {
> a {
i {
color: rgba(23, 125, 255, 0.76);
}
}
}
}
> a:hover, a:focus {
background: rgba(0, 0, 0, 0.03);
}
a {
display: flex;
align-items: center;
color: #575962;
padding: 6px 25px;
width: 100%;
font-size: 14px;
font-weight: $font-weight-normal;
position: relative;
margin-bottom: 3px;
&:hover, &:focus {
text-decoration: none;
p {
color: #575962 !important;
font-weight: $font-weight-bold;
}
i {
color: #4d7cfe !important;
}
}
}
a {
.letter-icon{
color: #a1a2a6;
margin-right: 15px;
width: 25px;
text-align: center;
vertical-align: middle;
float: left;
font-size: 20px;
font-weight: 200;
}
i {
color: #8d9498;
margin-right: 15px;
width: 25px;
text-align: center;
vertical-align: middle;
float: left;
font-size: 18px;
line-height: 30px;
&[class^="flaticon-"]{
font-size: 20px;
}
}
p {
font-size: 14px;
margin-bottom: 0px;
margin-right: 5px;
white-space: nowrap;
color: #8d9498;
}
.caret{
margin-left: auto;
margin-right: 10px;
transition: all .5s;
color: #8d9498;
}
}
a[data-toggle=collapse][aria-expanded=true]{
background: transparent;
p {
color: #575962;
}
i {
color: #4d7cfe;
}
.caret {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
&:before {
background: #1d7af3;
@extend %nav-item-hover-before;
}
}
}
@mixin nav-sidebar-state($color) {
> .nav-item {
a:hover, a:focus, a[data-toggle=collapse][aria-expanded=true] {
i {
color: $color !important;
}
}
a[data-toggle=collapse][aria-expanded=true] {
&:before {
background: $color !important;
}
}
&.active {
a {
&:before {
background: $color !important;
}
i {
color: $color !important;
}
}
}
}
}
&.nav-primary {
@include nav-sidebar-state($primary-color);
}
&.nav-secondary {
@include nav-sidebar-state($secondary-color);
}
&.nav-info {
@include nav-sidebar-state($info-color);
}
&.nav-success {
@include nav-sidebar-state($success-color);
}
&.nav-warning {
@include nav-sidebar-state($warning-color);
}
&.nav-danger {
@include nav-sidebar-state($danger-color);
}
}
.nav-collapse{
margin-top: 0px;
margin-bottom: 15px;
padding-bottom: 15px;
padding-top: 10px;
li {
&.active {
> a {
font-weight: 600;
}
}
a:before, a:hover:before{
opacity: 0 !important;
}
a {
margin-bottom: 3px !important;
padding: 10px 25px !important;
.sub-item{
font-size: 14px;
position: relative;
margin-left: 25px;
opacity: .85;
&:before{
content: '';
height: 4px;
width: 4px;
background: rgba(131, 132, 138, 0.89);
position: absolute;
left: -15px;
top: 50%;
transform: translateY(-50%);
border-radius: 100%;
}
}
&:hover {
.sub-item {
opacity: 1;
}
}
.sidebar-mini-icon {
font-size: 18px;
color: #C3C5CA;
margin-right: 15px;
width: 25px;
text-align: center;
vertical-align: middle;
float: left;
font-weight: $font-weight-light !important;
}
}
}
&.subnav {
padding-bottom: 10px;
margin-bottom: 0px;
li {
a {
padding-left: 40px !important;
}
}
}
}
}
/* Sidebar style 2 */
.sidebar {
&.sidebar-style-2 {
.nav {
.nav-item {
padding: 0 15px;
a {
padding: 8px 10px;
border-radius: 5px;
}
a:hover, a:focus, a[data-toggle=collapse][aria-expanded=true] {
background: hsla(0,0%,78%,.2);
p, i {
color: #575962 !important;
}
}
&.active {
a:before {
background: transparent;
}
}
.active {
a {
background: hsla(0,0%,78%,.2);
p, i {
color: #575962 !important;
}
}
}
&.submenu {
background: transparent !important;
}
a[data-toggle=collapse][aria-expanded=true] {
&:before {
background: transparent !important;
}
}
}
@mixin nav-sidebar-state2($color) {
> .nav-item {
&.active {
> a {
background: $color !important;
box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.1), 4px 4px 15px -5px rgba($color, .4) !important;
&:before {
background: transparent !important;
}
p, i, .caret, span {
color: $white-color !important;
}
&[data-toggle=collapse][aria-expanded=true] {
i {
color: $white-color !important;
}
}
}
}
}
}
&.nav-primary {
@include nav-sidebar-state2($primary-color);
}
&.nav-secondary {
@include nav-sidebar-state2($secondary-color);
}
&.nav-info {
@include nav-sidebar-state2($info-color);
}
&.nav-success {
@include nav-sidebar-state2($success-color);
}
&.nav-warning {
@include nav-sidebar-state2($warning-color);
}
&.nav-danger {
@include nav-sidebar-state2($danger-color);
}
}
&[data-background-color="dark"], &[data-background-color="dark2"] {
.nav {
.nav-item {
a:hover, a:focus, a[data-toggle=collapse][aria-expanded=true] {
p, i {
color: #b9babf !important;
}
}
&.active {
a {
color: $white-color ;
p, i, .caret, span {
color: $white-color;
}
&[data-toggle=collapse][aria-expanded=true] {
p, i, .caret, span {
color: $white-color;
}
}
}
}
}
}
}
}
}
.main-panel {
position: relative;
width: calc(100% - 250px);
height: 100vh;
min-height: 100%;
float: right;
transition: all .3s;
> .content {
padding: 0px !important;
min-height: calc(100% - 123px);
margin-top: 62px;
overflow: hidden;
}
> .content-full{
padding: 0px !important;
min-height: calc(100% - 123px);
margin-top: 63px;
overflow: hidden;
}
.page-header {
display: flex;
align-items: center;
margin-bottom: 20px;
.page-title {
margin-bottom: 0px;
}
.btn-page-header-dropdown {
width: 35px;
height: 35px;
font-size: 14px;
padding: 0px;
color: #6b6b6b;
box-shadow: 0 2px 14px 0 rgba(144, 116, 212, 0.1) !important;
border: 0;
&:after {
display: none;
}
}
.dropdown-menu {
margin-top: 15px;
top: 0px !important;
&:after {
width: 0;
height: 0;
border-left: 8px solid $transparent-bg;
border-right: 8px solid $transparent-bg;
border-bottom: 8px solid $white-color;
position: absolute;
top: -8px;
right: 32px;
content: '';
}
}
}
.page-divider {
height: 0;
margin: .3rem 0 1rem;
overflow: hidden;
border-top: 1px solid #ebecec;
}
}
/* Page Wrapper */
.page-wrapper {
min-height: calc(100vh - 57px);
position: relative;
&.has-sidebar {
.page-inner {
margin-right: 22.5rem;
}
}
}
.page-navs {
position: relative;
display: block;
padding-right: 1rem;
padding-left: 1rem;
box-shadow: 0 1px 1px 0 rgba(0,0,0,.07);
z-index: 1;
.nav {
.nav-link {
padding: 1rem !important;
}
}
.nav-line {
border: 0px !important;
.nav-link {
border-bottom-width: 3px !important;
}
}
}
.nav-scroller {
.nav {
flex-wrap: nowrap;
overflow-x: auto;
white-space: nowrap;
}
}
@media (min-width: 992px) {
.page-navs {
padding-right: 2rem;
padding-left: 2rem;
}
}
.page-inner {
padding: 1.5rem 0;
}
@media (min-width: 576px) {
.page-inner {
padding-right: 1rem;
padding-left: 1rem;
}
}
@media (min-width: 992px) {
.page-inner {
padding-right: 2rem;
padding-left: 2rem;
}
}
.page-inner-fill {
padding: 0;
height: calc(100% - 57px);
display: flex;
flex-direction: column;
}
.page-sidebar {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 100%;
display: flex;
flex-direction: column;
max-width: 22.5rem;
box-shadow: none;
transform: translate3d(100%,0,0);
overflow: auto;
z-index: 999;
transition: transform .2s ease-in-out;
border-left: 1px solid rgba(61,70,79,.125)!important;
.back {
width: 100%;
display: flex;
align-items: center;
padding: 1rem;
box-shadow: 0 0 0 1px rgba(61,70,79,.05), 0 1px 3px 0 rgba(61,70,79,.15);
font-size: 15px;
}
}
.page-sidebar-section {
flex: 1;
overflow-y: auto;
}
@media (min-width: 1200px) {
.page-sidebar {
transform: translateZ(0);
}
}
@media (max-width: 1200px) {
.page-wrapper {
&.has-sidebar {
.page-inner {
margin-right: 0px;
}
}
}
.pagesidebar_open {
.page-sidebar {
transform: translate3d(0, 0, 0) !important;
max-width: unset;
}
}
}
.page-with-aside{
display: flex;
.page-aside{
width: 280px;
min-height: 100vh;
border-right: 1px solid $grey-color;
padding: 15px 0;
.aside-header{
padding: 15px 22px;
.title{
font-size: 24px;
}
.description{
font-size: 12px;
}
}
.aside-nav{
.nav{
flex-direction: column;
> li {
padding: 8px 22px;
margin-bottom: 5px;
&:hover, &:focus, &.active {
background: rgba(51, 51, 51, 0.08);
}
&.active{
padding: 12px 22px;
font-weight: $font-weight-bold;
> a {
color: #575962 !important;
}
}
> a {
color: #83848a;
display: flex;
align-items: center;
font-size: 12px;
&:hover, &:focus{
text-decoration: none;
}
i {
font-size: 20px;
margin-right: 15px;
color: #a1a2a6;
}
}
}
}
.label {
padding: 5px 22px;
margin-top: 22px;
margin-bottom: 5px;
display: block
}
}
.aside-compose{
padding: 25px 22px;
}
}
.page-content{
width: calc(100% - 280px);
}
}
.footer {
border-top: 1px solid #eee;
padding: 15px;
background: $white-color;
position: absolute;
width: 100%;
.container, .container-fluid {
display: flex;
align-items: center;
}
}
/* sidebar minimized */
@media screen and (min-width: 991px) {
.sidebar_minimize{
.main-panel {
width: calc(100% - 75px);
transition: all .3s;
}
.logo-header {
width: 75px;
transition: all .3s;
padding: 0px;
text-align: center;
.big-logo {
margin-right: 0px;
}
.logo {
position: absolute;
transform: translate3d(25px,0,0);
opacity: 0;
img {
display: none;
}
}
}
.logo-header {
.nav-toggle {
position: absolute;
left: 50%;
transform: translateX(-50%);
height: 100%;
right: 0 !important;
}
}
.sidebar{
width: 75px;
transition: all .3s;
.sidebar-wrapper{
width: 75px;
transition: all .3s;
.user {
padding-left: 0px;
padding-right: 0px;
[class^="avatar-"] {
float: none !important;
margin: auto;
}
.info{
display: none;
span {
display: none;
}
}
}
.nav-item {
position : relative;
a {
.letter-icon {
display: block !important;
}
i {
margin-right: unset;
}
.badge, span, .caret, p {
display: none;
transition: all .3s;
}
.sidebar-mini-icon{
display: block !important;
margin-right: 0px;
}
}
&.submenu, &.active{
.nav-collapse {
display: none;
}
}
}
.nav-section{
.text-section{
display: none;
}
.sidebar-mini-icon{
display: block;
}
}
}
}
.sidebar:hover{
width: 250px;
.sidebar-wrapper{
width: 250px;
.user {
padding-left: 15px;
padding-right: 15px;
[class^="avatar-"] {
float: left !important;
margin-right: 11px !important;
}
.info{
display: block;
span {
display: block;
}
}
}
.nav-item {
a {
i {
margin-right: 15px;
}
.badge, span, .caret, p {
display: block;
}
.sidebar-mini-icon{
display: block !important;
margin-right: 15px;
}
}
&.submenu, &.active{
.nav-collapse {
display: block;
}
}
}
.nav-section{
.sidebar-mini-icon {
display: none;
}
.text-section{
display: block;
}
}
}
}
&.sidebar_minimize_hover {
.logo-header{
width: 250px;
padding-left: 25px;
padding-right: 25px;
text-align: left;
.logo {
opacity: 1 !important;
transform: translate3d(0, 0, 0) !important;
position: relative !important;
img {
display: inline-block !important;
}
}
}
.main-panel {
width: calc(100% - 250px);
}
}
}
.sidebar_minimize_hover {
.logo-header {
.nav-toggle {
right: 18px !important;
transform: translateX(0%) !important;
left: unset;
}
}
}
}
/* overlay sidebar */
.overlay-sidebar {
&:not(.is-show){
.sidebar {
left: -250px;
}
}
.main-panel {
width: 100% !important;
}
}
/* compact wrapper */
@media screen and (min-width: 991px) {
.compact-wrapper {
.main-header {
.logo-header {
width: 175px;
}
}
.sidebar {
width: 175px;
.badge {
position: absolute;
top: 8px;
right: 8px;
}
.text-section {
text-align: center;
}
.nav {
> .nav-item {
a {
flex-direction: column;
i {
margin-right: 0px;
}
p {
margin-right: 0px;
}
.caret {
display: none;
}
}
}
}
.nav-collapse li a .sub-item {
margin-left: 0px;
text-align: center;
&:before {
display: none;
}
}
}
.main-panel {
width: calc(100% - 175px)
}
}
}
/* classic */
@media screen and (min-width: 991px) {
.classic-wrapper {
.classic-grid {
margin: 93px 40px 30px;
}
.main-header {
top: 0;
.logo-header {
padding: 0 40px;
width: 290px;
}
}
.sidebar {
position: relative;
float: left;
margin-top: 0px;
.sidebar-wrapper {
max-height: unset;
min-height: 100%;
}
}
.navbar-header {
padding-right: 30px;
}
.main-panel {
height: unset;
.content, .content-full {
margin-top: 0px;
}
}
.page-inner {
padding-right: 0px;
padding-top: 5px;
}
.board {
height: 100%;
}
}
.sidebar_minimize {
.classic-wrapper {
.logo-header {
.logo {
position: relative;
transform: unset;
opacity: 1;
img {
display: inline-block;
}
}
.nav-toggle {
left: unset;
transform: unset;
right: 18px !important;
}
}
}
}
}
.classic-wrapper {
height: unset;
.main-panel {
height: unset;
}
.footer {
position: unset;
}
}
.classic-grid {
min-height: 100vh;
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
/* Static Sidebar */
@media screen and (min-width: 991px) {
.static-sidebar {
height: unset;
.sidebar {
position: static;
float: left;
.sidebar-wrapper {
max-height: unset;
min-height: 100%;
}
}
.main-panel {
height: unset;
.content {
margin-bottom: 60px;
}
}
.footer {
position: absolute;
bottom: 0;
}
}
}
/* Mail */
.mail-wrapper {
.toggle-email-nav {
margin-top: 10px;
display: none;
}
.mail-content {
.inbox-head, .email-head{
padding: 35px 25px 20px;
h3 {
font-size: 22px;
font-weight: $font-weight-light;
margin: 0px;
}
}
.email-head{
padding: 35px 25px;
border-bottom: 1px solid $grey-color;
.favorite {
color: #eee;
margin-right: 5px;
&.active {
color: #FFC600;
}
}
.controls{
margin-left: auto;
> a {
color: #9c9c9c;
font-size: 18px;
padding: 0 5px;
&:hover {
text-decoration: none;
opacity: 0.8;
}
&:last-child {
padding-right: 0px;
}
}
}
}
.email-sender{
padding: 14px 25px;
display: flex;
align-items: center;
border-bottom: 1px solid $grey-color;
.avatar{
padding-right: 12px;
img {
max-width: 40px;
max-height: 40px;
border-radius: 50%;
}
}
.date {
margin-left: auto;
}
.sender {
.action {
display: inline-block;
> a {
cursor: pointer;
}
}
}
}
.email-body {
padding: 30px 28px;
}
.email-attachments{
padding: 25px 28px;
border-top: 1px solid $grey-color;
.title{
font-weight: $font-weight-normal;
margin-bottom: 10px;
span {
font-weight: $font-weight-normal;
}
}
ul {
padding-left: 0px;
list-style: none;
li {
padding: 6px 0;
a {
font-weight: $font-weight-normal;
&:hover {
text-decoration: none;
}
i {
font-size: 20px;
display: inline-block;
vertical-align: middle;
}
span {
font-weight: $font-weight-normal;
}
}
}
}
}
.inbox-body{
padding: 20px 0px;
.mail-option{
padding: 0 20px;
margin-bottom: 20px;
display: flex;
.chk-all{
display: inline-block;
}
.btn-option{
color: #555 !important;
border: 1px solid #ebedf2 !important;
font-weight: $font-weight-bold;
background: $white-color !important;
box-shadow: 2px 2px 3px 0px #f2f1f1 !important;
}
.form-check{
padding: 0;
.form-check-sign:before{
border: 1px solid #eee;
background: #eeeeee;
}
}
}
.email-list {
.email-list-item {
padding: 14px 20px;
display: table;
cursor: pointer;
position: relative;
font-size: 12px;
width: 100%;
border-top: 1px solid $grey-color;
&:hover {
background: #f6f5f5;
}
.email-list-actions, .email-list-detail {
vertical-align: top;
display: table-cell;
}
.email-list-actions{
width: 50px;
.custom-checkbox{
margin-right: 0px;
}
.favorite{
color: #eee;
font-size: 18px;
&:hover {
text-decoration: none;
color: #969696;
}
&.active, &.active:hover{
color: #FFC600;
}
}
}
.email-list-detail {
p, .msg {
font-size: 12px;
}
.msg {
margin-bottom: 0px;
margin-top: 8px;
}
.from {
font-size: 13px;
}
.date {
font-size: 12px;
display: flex;
align-items: center;
.paperclip {
font-size: 16px;
padding-right: 4px;
}
}
}
&.unread{
font-weight: $font-weight-normal;
background: #fbfbfb;
&:after {
content: '';
display: block;
position: absolute;
width: 3px;
background: $primary-color;
top: -1px;
left: 0px;
bottom: -1px;
height: calc(100% + 2px);
}
.email-list-detail {
.from {
font-weight: $font-weight-bold;
}
}
}
}
}
}
.email-compose-fields, .email-editor{
padding: 20px 25px;
}
.email-compose-fields{
padding: 20px 25px;
border-bottom: 1px solid $grey-color;
}
.email-action{
text-align: right;
margin-bottom: 15px;
> .btn {
margin-right: 7px;
&:last-child {
margin-right: 0px;
}
}
}
}
}
/* Flex-1 */
.flex-1 {
-ms-flex: 1;
flex: 1;
}
/* Metric */
.metric {
display: flex;
padding: 1rem;
flex-direction: column;
}
Shell File Manager Version 1.1, Coded By Shell
Email: [email protected]