1 | @charset "UTF-8";
|
2 |
|
3 |
|
4 |
|
5 |
|
6 | @mixin breadcrumb-bounding() {
|
7 | display: block;
|
8 | margin: 0;
|
9 | padding: 0;
|
10 | white-space: nowrap;
|
11 |
|
12 | .#{$css-prefix}breadcrumb-item {
|
13 | display: inline-block;
|
14 |
|
15 | .#{$css-prefix}breadcrumb-text {
|
16 | display: inline-block;
|
17 | text-decoration: none;
|
18 | text-align: center;
|
19 | overflow: hidden;
|
20 | text-overflow: ellipsis;
|
21 | white-space: nowrap;
|
22 | transition: all $motion-duration-immediately $motion-linear;
|
23 |
|
24 | > b {
|
25 | font-weight: normal;
|
26 | }
|
27 | }
|
28 |
|
29 | .#{$css-prefix}breadcrumb-separator {
|
30 | display: inline-block;
|
31 | vertical-align: top;
|
32 | }
|
33 | }
|
34 | }
|
35 |
|
36 | @mixin breadcrumb-size(
|
37 | $height,
|
38 | $minWidth,
|
39 | $fontSize,
|
40 | $ellipsisFontSize,
|
41 | $separatorSize,
|
42 | $separatorMargin
|
43 | ) {
|
44 | height: $height;
|
45 | line-height: $height;
|
46 |
|
47 | .#{$css-prefix}breadcrumb-text {
|
48 | height: $height;
|
49 | min-width: $minWidth;
|
50 | font-size: $fontSize;
|
51 | line-height: $height;
|
52 | }
|
53 |
|
54 | .#{$css-prefix}breadcrumb-separator {
|
55 | height: $height;
|
56 | margin: 0 $separatorMargin;
|
57 | font-size: $separatorSize;
|
58 | line-height: $height;
|
59 |
|
60 | .#{$css-prefix}icon {
|
61 | &:before {
|
62 | display: block;
|
63 | }
|
64 | @include icon-size($separatorSize);
|
65 | }
|
66 | }
|
67 |
|
68 | .#{$css-prefix}breadcrumb-text-ellipsis {
|
69 | font-size: $ellipsisFontSize;
|
70 | }
|
71 | }
|
72 |
|
73 | @mixin breadcrumb-state(
|
74 | $textColor,
|
75 | $ellipsisTextColor,
|
76 | $currentTextColor,
|
77 | $currentTextWeight,
|
78 | $keywordTextColor,
|
79 | $iconColor,
|
80 | $textColorHover,
|
81 | $currentTextColorHover,
|
82 | $keywordTextColorHover
|
83 | ) {
|
84 | .#{$css-prefix}breadcrumb-text {
|
85 | color: $textColor;
|
86 | > b {
|
87 | color: $keywordTextColor;
|
88 | }
|
89 | > a {
|
90 | color: $textColor;
|
91 | text-decoration: none;
|
92 | text-align: center;
|
93 | }
|
94 | }
|
95 |
|
96 | .#{$css-prefix}breadcrumb-text.activated {
|
97 | color: $currentTextColor;
|
98 | font-weight: $currentTextWeight;
|
99 | > a {
|
100 | color: $currentTextColor;
|
101 | font-weight: $currentTextWeight;
|
102 | }
|
103 | }
|
104 |
|
105 | .#{$css-prefix}breadcrumb-text-ellipsis {
|
106 | color: $ellipsisTextColor;
|
107 | cursor: default;
|
108 | }
|
109 |
|
110 | .#{$css-prefix}breadcrumb-text-ellipsis-clickable {
|
111 | color: $ellipsisTextColor;
|
112 | cursor: pointer;
|
113 | }
|
114 |
|
115 | .#{$css-prefix}breadcrumb-separator {
|
116 | color: $iconColor;
|
117 | }
|
118 |
|
119 | .#{$css-prefix}breadcrumb-text:not(.#{$css-prefix}breadcrumb-text-ellipsis):hover > a {
|
120 | color: $textColorHover;
|
121 | }
|
122 |
|
123 | a.#{$css-prefix}breadcrumb-text.activated:hover > a {
|
124 | color: $currentTextColorHover;
|
125 | }
|
126 |
|
127 | a.#{$css-prefix}breadcrumb-text:not(.#{$css-prefix}breadcrumb-text-ellipsis):hover {
|
128 | color: $textColorHover;
|
129 |
|
130 | > b {
|
131 | color: $keywordTextColorHover;
|
132 | }
|
133 | }
|
134 |
|
135 | a.#{$css-prefix}breadcrumb-text.activated:hover {
|
136 | color: $currentTextColorHover;
|
137 | font-weight: $currentTextWeight;
|
138 | }
|
139 | }
|