| kumaran.m | 3b4814a | 2020-05-01 19:48:54 +0530 | [diff] [blame^] | 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 | .breadcrumb-holder { |
| 21 | .breadcrumb-custom { |
| 22 | @include box-shadow(0, 2px, 5px, 0, rgba(0, 0, 0, 0.25)); |
| 23 | @include roundedCorners(5); |
| 24 | @include background(null, $white, null, null, null); |
| 25 | @include margin-value(0, 0, 0, 0); |
| 26 | @include flexbox(inline-block, null, null, null, null, null); |
| 27 | overflow: hidden; |
| 28 | .breadcrumb-item-custom { |
| 29 | @include flexbox(block, null, null, null, null, null); |
| 30 | @include line-height(35px); |
| 31 | @include font(null, 12px, null); |
| 32 | @include padding-value(0, 10, 0, 30); |
| 33 | @include position_value(relative, null, null, null, null); |
| 34 | float: left; |
| 35 | cursor: pointer; |
| 36 | &:hover { |
| 37 | @include background(null, $secondary, null, null, null); |
| 38 | a { |
| 39 | color: $white; |
| 40 | } |
| 41 | &::after { |
| 42 | @include background(null, $secondary, null, null, null); |
| 43 | } |
| 44 | } |
| 45 | a { |
| 46 | color: $primary; |
| 47 | } |
| 48 | &:first-child { |
| 49 | padding-left: 20px; |
| 50 | @include roundedTopLeftRadius(5); |
| 51 | @include roundedBottomLeftRadius(5); |
| 52 | &::before { |
| 53 | @include position_value(null, null, null, null, 14px); |
| 54 | } |
| 55 | } |
| 56 | &:last-child { |
| 57 | @include roundedTopRightRadius(5); |
| 58 | @include roundedBottomRightRadius(5); |
| 59 | padding-right: 20px; |
| 60 | &::after { |
| 61 | content: none; |
| 62 | } |
| 63 | } |
| 64 | &::after { |
| 65 | content: ""; |
| 66 | @include position_value(absolute, 0, -18px, null, null); |
| 67 | @include wh-value(36px, 36px); |
| 68 | @include background(null, $white, null, null, null); |
| 69 | @include box-shadow(2px, -2px, 0, 1px, $breadcrumb-after-color); |
| 70 | transform: scale(0.707) rotate(45deg); |
| 71 | z-index: 1; |
| 72 | @include roundedTopRightRadius(5); |
| 73 | @include roundedBottomLeftRadius(50); |
| 74 | } |
| 75 | &.active { |
| 76 | @include background(null, $primary, null, null, null); |
| 77 | color: $white; |
| 78 | } |
| 79 | } |
| 80 | } |
| 81 | } |