src/app/layouts/sidebar/SidebarComponent.scss

   1 /*
   2  Copyright 2020 TATA ELXSI
   3
   4  Licensed under the Apache License, Version 2.0 (the 'License');
   5  you may not use this file except in compliance with the License.
   6  You may obtain a copy of the License at
   7
   8   http://www.apache.org/licenses/LICENSE-2.0
   9
  10  Unless required by applicable law or agreed to in writing, software
  11  distributed under the License is distributed on an "AS IS" BASIS,
  12  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  See the License for the specific language governing permissions and
  14  limitations under the License.
  15
  16  Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
  17 */
  18 @import "../../../assets/scss/mixins/mixin";
  19 @import "../../../assets/scss/variable";
  20 $active-margin-left: -230;
  21 $minimize-left: 45px;
  22 .sidebar-mini {
  23   @include transition(all, 0.3s, ease-in-out, 0s);
  24   @include position_value(relative, null, null, null, null);
  25   z-index: 10;
  26   .custom-menu {
  27     @include flexbox(inline-block, null, null, null, null, null);
  28     @include position_value(absolute, 25px, 4px, null, null);
  29     @include margin-value(0, -20, 0, 0);
  30     .btn {
  31       @include wh-value(55px, 55px);
  32       @include roundedCornersPercentage(50%);
  33       @include position_value(relative, null, null, null, null);
  34       @include background(null, transparent, null, null, null);
  35       @include border(all, 0, solid, transparent);
  36       i {
  37         @include margin-value(0, -40, 0, 0);
  38         @include font(null, 14px, null);
  39       }
  40       &.btn-primary {
  41         &:after {
  42           content: "";
  43           @include position_value(absolute, 0, 0, 0, 0);
  44           @include background(null, $secondary, null, null, null);
  45           @include roundedCorners(10);
  46           @include rotate(45);
  47           z-index: -1;
  48         }
  49       }
  50       &:hover,
  51       &:focus,
  52       &:active {
  53         @include background(null, transparent !important, null, null, null);
  54       }
  55     }
  56   }
  57   nav {
  58     @include wh-value(200px, null);
  59     @include transition(width, 0.2s, ease-in-out, 0s);
  60     ul {
  61       @include padding-value(0, 0, 0, 0);
  62       @include margin-value(0, 0, 0, 0);
  63       @include wh-value(100%, null);
  64       @include background(null, $theme-bg-color, null, null, null);
  65       li {
  66         @include position_value(relative, null, null, null, null);
  67         @include background(null, $secondary, null, null, null);
  68         @include line-height(14px);
  69         list-style-type: none;
  70         cursor: pointer;
  71         color: $white;
  72         &.round-edge-top-3 {
  73           @include roundedTopRightRadius(3);
  74           @include roundedTopLeftRadius(3);
  75         }
  76         &.round-edge-bottom-3 {
  77           @include roundedBottomLeftRadius(3);
  78           @include roundedBottomRightRadius(3);
  79         }
  80         &.border-bottom-none {
  81           @include border(bottom, 0, !important, null);
  82         }
  83         &.header-menu {
  84           @include background(null, $theme-bg-color, null, null, null);
  85           @include padding-value(10, 20, 0, 4);
  86           @include font(null, null, bold);
  87           cursor: default;
  88           .heading {
  89             @include border(bottom, 2, solid, $primary);
  90             @include font(null, 12px, null);
  91             @include line-height(16px);
  92             @include flexbox(block, null, null, null, null, null);
  93             cursor: default;
  94             color: $primary;
  95           }
  96         }
  97         a {
  98           &.individual {
  99             @include padding-value(12, 5, 12, 15);
 100             color: $white;
 101           }
 102           i {
 103             @include wh-value(30px, null);
 104           }
 105           &.parentlink::after {
 106             content: "\f105";
 107             @include font("Font Awesome 5 Free", null, 900);
 108             @include position_value(absolute, 14px, 15px, null, null);
 109             @include transition(all, 0.3s, ease, 0s);
 110             -webkit-font-smoothing: antialiased;
 111             -moz-osx-font-smoothing: grayscale;
 112           }
 113         }
 114         .sidebar-submenu {
 115           opacity: 0;
 116           @include transition(opacity, 0.4s, ease-in-out, 0s);
 117           li {
 118             @include background(null, $secondary, null, null, null);
 119             @include wh-value(null, 0);
 120             @include transition(height, 200ms, ease-in, 0s);
 121             overflow: hidden;
 122             &:last-child {
 123               @include roundedBottomLeftRadius(4);
 124               @include roundedBottomRightRadius(4);
 125             }
 126             .link {
 127               color: $gray-500;
 128             }
 129             &:hover,
 130             &.active {
 131               .link {
 132                 color: $white;
 133               }
 134             }
 135           }
 136         }
 137         &.menu-open {
 138           @include background(null, $primary, null, null, null);
 139           a {
 140             &::after {
 141               @include rotate(90);
 142             }
 143           }
 144           .sidebar-submenu {
 145             opacity: 1;
 146             li {
 147               @include wh-value(null, 45px);
 148             }
 149           }
 150         }
 151         &.parentactive {
 152           @include background(null, $primary, null, null, null);
 153           .parentlink {
 154             color: $white;
 155           }
 156         }
 157         .parentlink,
 158         .link {
 159           @include padding-value(12, 5, 12, 15);
 160           @include flexbox(flex, null, null, null, null, null);
 161         }
 162       }
 163     }
 164   }
 165   &.sidebar-collapse {
 166     @include background(null, transparent, null, null, null);
 167     nav {
 168       transform: translate(0, 0);
 169       @include wh-value($minimize-left, null);
 170       ul {
 171         &.scrollable-menu {
 172           li {
 173             a {
 174               span {
 175                 @include position_value(null, 0, null, null, null);
 176                 @include padding-value(12, 5, 12, 20);
 177               }
 178               &.individual {
 179                 span {
 180                   @include roundedBottomRightRadius(4);
 181                 }
 182               }
 183               &.parentlink,
 184               &.individual {
 185                 span {
 186                   @include background(null, $primary, null, null, null);
 187                   @include roundedTopRightRadius(4);
 188                 }
 189               }
 190             }
 191             &:hover {
 192               .sidebar-submenu {
 193                 li {
 194                   @include wh-value(null, 45px);
 195                 }
 196               }
 197               .sidebar-submenu,
 198               a span {
 199                 @include flexbox(block !important, null, null, null, null, null);
 200                 @include position_value(absolute, null, null, null, $minimize-left);
 201                 @include wh-value(220px, null);
 202                 opacity: 1;
 203               }
 204             }
 205             &.header-menu,
 206             .sidebar-submenu {
 207               @include flexbox(none !important, null, null, null, null, null);
 208               transform: translateZ(0);
 209             }
 210           }
 211         }
 212         li {
 213           a::after,
 214           span {
 215             @include flexbox(none !important, null, null, null, null, null);
 216             transform: translateZ(0);
 217           }
 218         }
 219       }
 220     }
 221   }
 222   &.sidebar-open {
 223     @include margin-value(0, 0, 0, $active-margin-left);
 224   }
 225 }