@c8y/style
Version:
Styles for Cumulocity IoT applications
100 lines (97 loc) • 2.64 kB
text/less
// DEPRECATED: Remove when wizard.html is migrated from AngularJS to Angular.
// Used in: 8 wizard-related files (modules/core/ui/containers/wizard.html, app wizard steps, etc.)
.steps-navbar {
&.c8y-wizard-nav {
padding: 0;
min-width: 600px;
.register-devices & {
min-width: 300px;
@media (min-width: @screen-sm-min) {
min-width: 420px;
}
}
}
.nav-tabs.nav-justified {
display: flex;
overflow: hidden;
flex-flow: row nowrap;
border-bottom: 1px solid rgba(@black, (10 / 100));
> li {
position: relative;
display: block;
flex: 1 1 auto;
max-width: 50%;
a {
margin: 0;
padding: @size-8 calc(@size-8 + @size-4);
border: 0;
background-color: @component-background-default;
color: @gray-30;
font-size: calc(@size-base * 1.5);
@media (min-width: @screen-sm-min) {
font-size: inherit;
}
&:focus {
outline: none;
border: 0;
background-color: inherit;
}
&:hover {
border: 0;
background-color: inherit;
}
&:before {
position: absolute;
top: 0;
left: 100%;
z-index: 10;
margin-left: 1px;
width: 0;
height: 0;
border-width: 18px 0 18px @size-10;
border-style: solid;
border-color: transparent transparent transparent rgba(@black, (10 / 100));
content: '';
}
&:after {
position: absolute;
top: 0;
left: 100%;
z-index: 10;
width: 0;
height: 0;
border-width: 18px 0 18px @size-10;
border-style: solid;
border-color: transparent transparent transparent @component-background-default;
content: '';
}
}
&:last-child > a {
&:after,
&:before {
display: none;
}
}
&.active {
> a {
border: 0;
background-color: @gray-30;
color: @component-background-default;
&:after {
border-color: transparent transparent transparent @gray-30;
}
}
}
&.completed {
> a {
border: 0;
background-color: var(--palette-status-success, var(--c8y-palette-status-success));
color: @component-background-default;
&:after {
border-color: transparent transparent transparent var(--palette-status-success, var(--c8y-palette-status-success));
}
}
}
}
}
}