amis-rpc-design/libs/amis/packages/amis-ui/scss/components/_breadcrumb.scss
2023-10-07 19:42:30 +08:00

110 lines
2.6 KiB
SCSS

.#{$ns}Breadcrumb {
font-size: var(--Breadcrumb-item-fontSize);
font-weight: var(--fontWeightBase);
color: var(--Breadcrumb-item-default-color);
&-icon {
margin-right: px2rem(2px);
min-width: var(--gap-xs);
}
&-item {
position: relative;
display: inline-flex;
align-items: center;
&-default {
cursor: pointer;
color: var(--Breadcrumb-item-default-color);
&:hover {
color: var(--Breadcrumb-item-hover-color);
}
&:active {
color: var(--Breadcrumb-item-active-color);
}
}
&-dropdown {
cursor: pointer;
color: var(--BreadcrumbDropdown-item-default-color);
}
a:hover {
color: var(--Breadcrumb-item-hover-color);
}
a:active {
color: var(--Breadcrumb-item-active-color);
}
&-last &-default {
font-weight: var(--fontWeightMd);
color: var(--Breadcrumb-item-last-color);
}
&-caret {
height: 16px;
margin: 0 2px;
cursor: pointer;
display: inline-block;
transition: transform var(--animation-duration) ease;
> svg {
width: px2rem(10px);
height: px2rem(10px);
top: px2rem(1px);
}
}
&.is-opened &-caret {
transform: translateY(px2rem(2px)) rotate(180deg);
color: var(--Breadcrumb-item-hover-color);
}
&.is-opened &-default{
color: var(--Breadcrumb-item-hover-color);
}
}
&-separator {
user-select: none;
margin: 0 var(--gap-sm);
text-align: center;
min-width: var(--gap-xs);
}
&-dropdown {
position: absolute;
z-index: $zindex-dropdown;
top: 100%;
left: 0;
margin: px2rem(1px) 0;
background: var(--DropDown-menu-bg);
list-style: none;
padding: var(--DropDown-menu-paddingY) var(--DropDown-menu-paddingX);
border: var(--DropDown-menu-borderWidth) solid var(--DropDown-menu-borderColor);
border-radius: var(--DropDown-menu-borderRadius);
box-shadow: var(--DropDown-menu-boxShadow);
min-width: 100%;
text-align: left;
font-size: var(--BreadcrumbDropdown-item-fontSize);
}
&-dropdown > li {
padding: var(--BreadcrumbDropdown-item-paddingX) var(--BreadcrumbDropdown-item-paddingY);
white-space: nowrap;
box-sizing: border-box;
padding-left: px2rem(12px);
vertical-align: middle;
user-select: none;
color: var(--BreadcrumbDropdown-item-default-color);
background-color: var(--BreadcrumbDropdown-item-default-bg);
&:hover {
background: var(--BreadcrumbDropdown-item-hover-bg);
a {
color: var(--Breadcrumb-item-hover-color);
}
}
}
}