core/sidebar/sidebar.scss

0001 // Sidebar
0002 $sidebar-link-padding:15px 35px 15px 14px;
0003 $sidebar-icon-size:23px;
0004 $sidebar-first-level-padding:0 0 10px 0;
0005 $sidebar-first-level-link-padding: 10px 15px;
0006 $sidebar-first-level-icon-size:14px;
0007
0008 /*******************
0009 Main sidebar
0010 ******************/
0011
0012 .left-sidebar {
0013     position: absolute;
0014     width: $sidebar-width-full;
0015     height: 100%;
0016     top: 0px;
0017
0018     z-index: 10;
0019     padding-top: 64px;
0020     background: $sidebar;
0021     box-shadow: $shadow;
0022 }
0023
0024 /*******************
0025 sidebar navigation
0026 ******************/
0027 .scroll-sidebar {
0028     height: calc(100% - 20px);
0029     position: relative;
0030 }
0031
0032 .sidebar-nav {
0033     ul {
0034        .sidebar-item {
0035            width: $sidebar-width-full;
0036            .sidebar-link {
0037                 color: $sidebar-text;
0038                 padding:15px;
0039                 border-left: 3px solid transparent;
0040                 display: flex;
0041                 white-space: nowrap;
0042                 align-items: center;
0043                 line-height: 20px;
0044                 font-weight: 300;
0045                 i {
0046                     font-style: normal;
0047                     width: 35px;
0048                     line-height: 20px;
0049                     font-size: $sidebar-icon-size;
0050                     color: #54667a;
0051                     text-align: center;
0052                     font-size: 14px;
0053                 }
0054                 &:hover {
0055                     background: rgba(0, 0, 0, 0.07);
0056                 }
0057                 &.active {
0058                     font-weight: 500;
0059                     border-left: 3px solid #41b3f9;
0060                 }
0061             }
0062            &.selected > .sidebar-link{
0063                /*background: rgba(0, 0, 0, 0.04);*/
0064                opacity: 1;
0065            }
0066            /*******************
0067            First level
0068            ******************/
0069            .first-level {
0070                 padding: $sidebar-first-level-padding;
0071                .sidebar-item.active .sidebar-link{
0072                    opacity: 1;
0073                }
0074                 .sidebar-item .sidebar-link {
0075                     padding: $sidebar-first-level-link-padding;
0076                     i{
0077                         font-size:$sidebar-first-level-icon-size;
0078                     }
0079                 }
0080             }
0081         }
0082         /*******************
0083          Small cap
0084          ******************/
0085         .nav-small-cap {
0086             font-size: 12px;
0087             padding:$sidebar-link-padding;
0088             white-space: nowrap;
0089             display: flex;
0090             align-items: center;
0091             line-height: 30px;
0092             margin-top: 10px;
0093             color: $sidebar-text;
0094             opacity: 0.3;
0095             text-transform: uppercase; i{line-height: 30px; margin:0 5px;}
0096         }
0097     }
0098     >#sidebarnav >.sidebar-item >.sidebar-link:hover{
0099         /*background: rgba(0, 0, 0, 0.04);*/
0100     }
0101 }
0102 /*******************
0103  common m-p removed
0104 ******************/
0105 .sidebar-nav{
0106     ul {
0107         margin: 0px;
0108         padding: 0px;
0109         li {
0110             list-style: none;
0111         }
0112     }
0113 }
0114 .collapse.in {
0115     display: block;
0116 }
0117 /*******************
0118 Down arrow
0119 ******************/
0120 .sidebar-nav .has-arrow {
0121     position: relative;
0122     &::after {
0123         position: absolute;
0124         content: '';
0125         width: 7px;
0126         height: 7px;
0127         border-width: 1px 0 0 1px;
0128         border-style: solid;
0129         border-color: $sidebar-text;
0130         margin-left: 10px;
0131         -webkit-transform: rotate(135deg) translate(0, -50%);
0132         -ms-transform: rotate(135deg) translate(0, -50%);
0133         -o-transform: rotate(135deg) translate(0, -50%);
0134         transform: rotate(135deg) translate(0, -50%);
0135         -webkit-transform-origin: top;
0136         -ms-transform-origin: top;
0137         -o-transform-origin: top;
0138         transform-origin: top;
0139         top: 26px;
0140         right: 15px;
0141         -webkit-transition: all .3s ease-out;
0142         -o-transition: all .3s ease-out;
0143         transition: all .3s ease-out;
0144     }
0145 }
0146
0147
0148 /*.sidebar-nav .active > .has-arrow::after,*/
0149
0150 /*.sidebar-nav li.selected > .has-arrow::after,*/
0151 .sidebar-nav li.active > .has-arrow::after,
0152 .sidebar-nav li > .has-arrow.active::after,
0153 .sidebar-nav .has-arrow[aria-expanded="true"]::after {
0154     -webkit-transform: rotate(-135deg) translate(0, -50%);
0155     -ms-transform: rotate(-135deg) translate(0, -50%);
0156     -o-transform: rotate(-135deg) translate(0, -50%);
0157     transform: rotate(-135deg) translate(0, -50%);
0158 }
0159
0160
0161 /*******************
0162 User Profile
0163 ******************/
0164 .user-profile{
0165     padding: 15px;
0166
0167     .user-content, .user-name, .user-email{
0168         color:$theme-light;
0169         overflow: hidden;
0170         white-space: nowrap;
0171         text-overflow: ellipsis;
0172     }
0173 }
0174 .create-btn {
0175     height: 40px;
0176     background: $dark;
0177 }