package.src.themes.Breadcrumbs.css Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of webcomponents Show documentation
UI5 Web Components: webcomponents.main
The newest version!
:host(:not([hidden])) {
	display: block;
	width: 100%;
}

.ui5-breadcrumbs-root {
    white-space: nowrap;
    outline: none;
    margin:var(--_ui5_breadcrumbs_margin);
}

.ui5-breadcrumbs-root > ol {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}

.ui5-breadcrumbs-root > ol > li {
    display: inline;
}

.ui5-breadcrumbs-dropdown-arrow-link-wrapper[hidden] {
    display: none
}

.ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-icon] {
    width: var(--sapFontSize);
    height: var(--sapFontSize);
    padding-left: .675rem;
    vertical-align: text-top;
    color: var(--sapLinkColor);
}

.ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-link][focused] [ui5-icon] {
    color: var(--_ui5_link_focus_color);
}

.ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-icon]::before {
    content: "...";
    vertical-align: middle;
    position: absolute;
    left: 0;
    bottom: 0;
}

/* underline icon on hover */
.ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-link][focused] [ui5-icon]::after,
.ui5-breadcrumbs-dropdown-arrow-link-wrapper:hover [ui5-icon]::after {
    content: "";
    position: absolute;
    border-bottom: 0.0625rem solid;
    top: 0;
    left: 0;
    bottom: 1px;
    right: 0;
}

.ui5-breadcrumbs-popover-footer {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

/* links separator */
.ui5-breadcrumbs-separator::after {
	content: "/"; /* default separator is "Slash" */
	padding: 0 .25rem;
	cursor: auto;
	color: var(--sapContent_LabelColor);
	display: inline-block;
	font-family: "72override", var(--sapFontFamily);
	font-size: var(--sapFontSize);
}

/* separator styles */
:host([separators="DoubleSlash"]) .ui5-breadcrumbs-separator::after {
	content: "//";
}

:host([separators="BackSlash"]) .ui5-breadcrumbs-separator::after {
	content: "\\\\";
}

:host([separators="DoubleBackSlash"]) .ui5-breadcrumbs-separator::after {
	content: "\\\\\\\\";
}

:host([separators="GreaterThan"]) .ui5-breadcrumbs-separator::after {
	content: ">";
}

:host([separators="DoubleGreaterThan"]) .ui5-breadcrumbs-separator::after {
	content: ">>";
}