1 |
|
2 |
|
3 |
|
4 | @import "~@blueprintjs/icons/src/icons";
|
5 | @import "../../common/variables";
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 | .#{$ns}-breadcrumbs {
|
23 | align-items: center;
|
24 | cursor: default;
|
25 | display: flex;
|
26 | flex-wrap: wrap;
|
27 | height: $pt-input-height;
|
28 | list-style: none;
|
29 |
|
30 | margin: 0;
|
31 | padding: 0;
|
32 |
|
33 |
|
34 | > li {
|
35 | align-items: center;
|
36 | display: flex;
|
37 |
|
38 | &::after {
|
39 | background: svg-icon("16px/chevron-right.svg", (path: (fill: $pt-icon-color)));
|
40 | content: "";
|
41 | display: block;
|
42 | height: $pt-icon-size-standard;
|
43 | margin: 0 ($pt-grid-size / 2);
|
44 | width: $pt-icon-size-standard;
|
45 | }
|
46 |
|
47 | &:last-of-type::after {
|
48 | display: none;
|
49 | }
|
50 | }
|
51 | }
|
52 |
|
53 | .#{$ns}-breadcrumb,
|
54 | .#{$ns}-breadcrumb-current,
|
55 | .#{$ns}-breadcrumbs-collapsed {
|
56 | align-items: center;
|
57 | display: inline-flex;
|
58 | font-size: $pt-font-size-large;
|
59 | }
|
60 |
|
61 | .#{$ns}-breadcrumb,
|
62 | .#{$ns}-breadcrumbs-collapsed {
|
63 | color: $pt-text-color-muted;
|
64 | }
|
65 |
|
66 | .#{$ns}-breadcrumb {
|
67 | &:hover {
|
68 | text-decoration: none;
|
69 | }
|
70 |
|
71 | &.#{$ns}-disabled {
|
72 | color: $pt-text-color-disabled;
|
73 | cursor: not-allowed;
|
74 | }
|
75 |
|
76 | .#{$ns}-icon {
|
77 | margin-right: $pt-grid-size / 2;
|
78 | }
|
79 | }
|
80 |
|
81 | .#{$ns}-breadcrumb-current {
|
82 | color: inherit;
|
83 | font-weight: 600;
|
84 |
|
85 | .#{$ns}-input {
|
86 | font-size: inherit;
|
87 | font-weight: inherit;
|
88 | vertical-align: baseline;
|
89 | }
|
90 | }
|
91 |
|
92 | .#{$ns}-breadcrumbs-collapsed {
|
93 | background: $light-gray1;
|
94 | border: none;
|
95 | border-radius: $pt-border-radius;
|
96 | cursor: pointer;
|
97 | margin-right: 2px;
|
98 | padding: 1px ($pt-grid-size / 2);
|
99 | vertical-align: text-bottom;
|
100 |
|
101 | &::before {
|
102 | background: svg-icon("16px/more.svg", (circle: (fill: $pt-icon-color))) center no-repeat;
|
103 | content: "";
|
104 | display: block;
|
105 | height: $pt-icon-size-standard;
|
106 | width: $pt-icon-size-standard;
|
107 | }
|
108 |
|
109 | &:hover {
|
110 | background: $gray5;
|
111 | color: $pt-text-color;
|
112 | text-decoration: none;
|
113 | }
|
114 | }
|
115 |
|
116 | .#{$ns}-dark {
|
117 | .#{$ns}-breadcrumb,
|
118 | .#{$ns}-breadcrumbs-collapsed {
|
119 | color: $pt-dark-text-color-muted;
|
120 | }
|
121 |
|
122 | .#{$ns}-breadcrumbs > li::after {
|
123 | color: $pt-dark-icon-color;
|
124 | }
|
125 |
|
126 | .#{$ns}-breadcrumb.#{$ns}-disabled {
|
127 | color: $pt-dark-text-color-disabled;
|
128 | }
|
129 |
|
130 | .#{$ns}-breadcrumb-current {
|
131 | color: $pt-dark-text-color;
|
132 | }
|
133 |
|
134 | .#{$ns}-breadcrumbs-collapsed {
|
135 | background: rgba($black, 0.4);
|
136 |
|
137 | &:hover {
|
138 | background: rgba($black, 0.6);
|
139 | color: $pt-dark-text-color;
|
140 | }
|
141 | }
|
142 | }
|