1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 | @import '../../globals/scss/vars';
|
9 | @import '../../globals/scss/helper-mixins';
|
10 | @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
|
11 | @import '../../globals/scss/layout';
|
12 | @import '../../globals/scss/css--typography';
|
13 | @import '../link/link';
|
14 | @import '../../globals/scss/functions';
|
15 |
|
16 | @mixin breadcrumb {
|
17 | .#{$prefix}--breadcrumb {
|
18 | @include typescale('zeta');
|
19 | @include font-family;
|
20 | display: inline;
|
21 |
|
22 | @include breakpoint(bp--xs--major) {
|
23 | display: flex;
|
24 | flex-wrap: wrap;
|
25 | }
|
26 | }
|
27 |
|
28 | .#{$prefix}--breadcrumb-item {
|
29 | margin-right: $spacing-md;
|
30 | display: flex;
|
31 | align-items: center;
|
32 | }
|
33 |
|
34 | .#{$prefix}--breadcrumb-item::after {
|
35 | content: '/';
|
36 | margin-left: $spacing-md;
|
37 | color: $text-02;
|
38 | }
|
39 |
|
40 | .#{$prefix}--breadcrumb--no-trailing-slash .#{$prefix}--breadcrumb-item:last-child::after {
|
41 | content: '';
|
42 | }
|
43 |
|
44 | .#{$prefix}--breadcrumb-item:last-child {
|
45 | margin-right: 0;
|
46 |
|
47 | &::after {
|
48 | margin-right: 0;
|
49 | }
|
50 | }
|
51 |
|
52 | .#{$prefix}--breadcrumb .#{$prefix}--link {
|
53 | white-space: nowrap;
|
54 | font-weight: 400;
|
55 | text-decoration: none;
|
56 | border-bottom: 1px solid transparent;
|
57 |
|
58 | &:hover,
|
59 | &:focus {
|
60 | outline: none;
|
61 | color: $hover-primary-text;
|
62 | border-bottom: 1px solid $hover-primary-text;
|
63 | }
|
64 | }
|
65 |
|
66 |
|
67 | .#{$prefix}--breadcrumb.#{$prefix}--skeleton .#{$prefix}--link {
|
68 | @include skeleton;
|
69 | width: rem(100px);
|
70 | height: 1rem;
|
71 | }
|
72 | }
|
73 |
|
74 | @mixin breadcrumb--x {
|
75 | .#{$prefix}--breadcrumb {
|
76 | @include type-style('body-short-01');
|
77 | display: inline;
|
78 | @if feature-flag-enabled('grid') {
|
79 | @include carbon--breakpoint(md) {
|
80 | display: flex;
|
81 | flex-wrap: wrap;
|
82 | }
|
83 | } @else {
|
84 | @include breakpoint(bp--xs--major) {
|
85 | display: flex;
|
86 | flex-wrap: wrap;
|
87 | }
|
88 | }
|
89 | }
|
90 |
|
91 | .#{$prefix}--breadcrumb-item {
|
92 | position: relative;
|
93 | display: flex;
|
94 | align-items: center;
|
95 | margin-right: $carbon--spacing-03;
|
96 | }
|
97 |
|
98 | .#{$prefix}--breadcrumb-item::after {
|
99 | content: '/';
|
100 | color: $text-01;
|
101 | margin-left: $carbon--spacing-03;
|
102 | }
|
103 |
|
104 | .#{$prefix}--breadcrumb--no-trailing-slash .#{$prefix}--breadcrumb-item:last-child::after {
|
105 | content: '';
|
106 | }
|
107 |
|
108 | .#{$prefix}--breadcrumb-item:last-child,
|
109 | .#{$prefix}--breadcrumb-item:last-child::after {
|
110 | margin-right: 0;
|
111 | }
|
112 |
|
113 | .#{$prefix}--breadcrumb .#{$prefix}--link {
|
114 | white-space: nowrap;
|
115 | }
|
116 |
|
117 | .#{$prefix}--breadcrumb-item [aria-current='page'],
|
118 | .#{$prefix}--breadcrumb-item.#{$prefix}--breadcrumb-item--current .#{$prefix}--link {
|
119 | color: $text-01;
|
120 | }
|
121 |
|
122 |
|
123 | .#{$prefix}--breadcrumb.#{$prefix}--skeleton .#{$prefix}--link {
|
124 | @include skeleton;
|
125 | width: rem(100px);
|
126 | height: 1rem;
|
127 | }
|
128 | }
|
129 |
|
130 | @include exports('breadcrumb') {
|
131 | @if feature-flag-enabled('components-x') {
|
132 | @include breadcrumb--x;
|
133 | } @else {
|
134 | @include breadcrumb;
|
135 | }
|
136 | }
|