| /* |
| Copyright 2020 TATA ELXSI |
| |
| Licensed under the Apache License, Version 2.0 (the 'License'); |
| you may not use this file except in compliance with the License. |
| You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| |
| Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in) |
| */ |
| @import "../../../assets/scss/mixins/mixin"; |
| @import "../../../assets/scss/variable"; |
| $active-margin-left: -230; |
| $minimize-left: 45px; |
| .sidebar-mini { |
| @include transition(all, 0.3s, ease-in-out, 0s); |
| @include position_value(relative, null, null, null, null); |
| z-index: 10; |
| .custom-menu { |
| @include flexbox(inline-block, null, null, null, null, null); |
| @include position_value(absolute, 25px, 4px, null, null); |
| @include margin-value(0, -20, 0, 0); |
| .btn { |
| @include wh-value(55px, 55px); |
| @include roundedCornersPercentage(50%); |
| @include position_value(relative, null, null, null, null); |
| @include background(null, transparent, null, null, null); |
| @include border(all, 0, solid, transparent); |
| i { |
| @include margin-value(0, -40, 0, 0); |
| @include font(null, 14px, null); |
| } |
| &.btn-primary { |
| &:after { |
| content: ""; |
| @include position_value(absolute, 0, 0, 0, 0); |
| @include background(null, $secondary, null, null, null); |
| @include roundedCorners(10); |
| @include rotate(45); |
| z-index: -1; |
| } |
| } |
| &:hover, |
| &:focus, |
| &:active { |
| @include background(null, transparent !important, null, null, null); |
| } |
| } |
| } |
| nav { |
| @include wh-value(200px, null); |
| @include transition(width, 0.2s, ease-in-out, 0s); |
| ul { |
| @include padding-value(0, 0, 0, 0); |
| @include margin-value(0, 0, 0, 0); |
| @include wh-value(100%, null); |
| @include background(null, $theme-bg-color, null, null, null); |
| li { |
| @include position_value(relative, null, null, null, null); |
| @include background(null, $secondary, null, null, null); |
| @include line-height(14px); |
| list-style-type: none; |
| cursor: pointer; |
| color: $white; |
| &.round-edge-top-3 { |
| @include roundedTopRightRadius(3); |
| @include roundedTopLeftRadius(3); |
| } |
| &.round-edge-bottom-3 { |
| @include roundedBottomLeftRadius(3); |
| @include roundedBottomRightRadius(3); |
| } |
| &.border-bottom-none { |
| @include border(bottom, 0, !important, null); |
| } |
| &.header-menu { |
| @include background(null, $theme-bg-color, null, null, null); |
| @include padding-value(10, 20, 0, 4); |
| @include font(null, null, bold); |
| cursor: default; |
| .heading { |
| @include border(bottom, 2, solid, $primary); |
| @include font(null, 12px, null); |
| @include line-height(16px); |
| @include flexbox(block, null, null, null, null, null); |
| cursor: default; |
| color: $primary; |
| } |
| } |
| a { |
| &.individual { |
| @include padding-value(12, 5, 12, 15); |
| color: $white; |
| } |
| i { |
| @include wh-value(30px, null); |
| } |
| &.parentlink::after { |
| content: "\f105"; |
| @include font("Font Awesome 5 Free", null, 900); |
| @include position_value(absolute, 14px, 15px, null, null); |
| @include transition(all, 0.3s, ease, 0s); |
| -webkit-font-smoothing: antialiased; |
| -moz-osx-font-smoothing: grayscale; |
| } |
| } |
| .sidebar-submenu { |
| opacity: 0; |
| @include transition(opacity, 0.4s, ease-in-out, 0s); |
| li { |
| @include background(null, $secondary, null, null, null); |
| @include wh-value(null, 0); |
| @include transition(height, 200ms, ease-in, 0s); |
| overflow: hidden; |
| &:last-child { |
| @include roundedBottomLeftRadius(4); |
| @include roundedBottomRightRadius(4); |
| } |
| .link { |
| color: $gray-500; |
| } |
| &:hover, |
| &.active { |
| .link { |
| color: $white; |
| } |
| } |
| } |
| } |
| &.menu-open { |
| @include background(null, $primary, null, null, null); |
| a { |
| &::after { |
| @include rotate(90); |
| } |
| } |
| .sidebar-submenu { |
| opacity: 1; |
| li { |
| @include wh-value(null, 45px); |
| } |
| } |
| } |
| &.parentactive { |
| @include background(null, $primary, null, null, null); |
| .parentlink { |
| color: $white; |
| } |
| } |
| .parentlink, |
| .link { |
| @include padding-value(12, 5, 12, 15); |
| @include flexbox(flex, null, null, null, null, null); |
| } |
| } |
| } |
| } |
| &.sidebar-collapse { |
| @include background(null, transparent, null, null, null); |
| nav { |
| transform: translate(0, 0); |
| @include wh-value($minimize-left, null); |
| ul { |
| &.scrollable-menu { |
| li { |
| a { |
| span { |
| @include position_value(null, 0, null, null, null); |
| @include padding-value(12, 5, 12, 20); |
| } |
| &.individual { |
| span { |
| @include roundedBottomRightRadius(4); |
| } |
| } |
| &.parentlink, |
| &.individual { |
| span { |
| @include background(null, $primary, null, null, null); |
| @include roundedTopRightRadius(4); |
| } |
| } |
| } |
| &:hover { |
| .sidebar-submenu { |
| li { |
| @include wh-value(null, 45px); |
| } |
| } |
| .sidebar-submenu, |
| a span { |
| @include flexbox(block !important, null, null, null, null, null); |
| @include position_value(absolute, null, null, null, $minimize-left); |
| @include wh-value(220px, null); |
| opacity: 1; |
| } |
| } |
| &.header-menu, |
| .sidebar-submenu { |
| @include flexbox(none !important, null, null, null, null, null); |
| transform: translateZ(0); |
| } |
| } |
| } |
| li { |
| a::after, |
| span { |
| @include flexbox(none !important, null, null, null, null, null); |
| transform: translateZ(0); |
| } |
| } |
| } |
| } |
| } |
| &.sidebar-open { |
| @include margin-value(0, 0, 0, $active-margin-left); |
| } |
| } |