vpn.email/bower_components/metro/less/breadcrumbs.less

vpn.email client

@import (once) "vars";
@import (once) "typography";
@import (once) "utils";

.breadcrumbs {
	.flush-list;
	background-color: @white;
	color: #999;
	padding: 1rem;

	& > li {
		display: inline-block;
		color: inherit;
		margin: 0 1rem 0 0;
		position: relative;
		vertical-align: middle;

		&:before, &:after {
			display: block;
			position: absolute;
			vertical-align: middle;
			color: transparent;
			font-size: 0;
			content: "";
			height: 1px;
			width: .375rem;
			background-color: @dark;
			top: 50%;
			left: 100%;
			margin-left: .5rem;
		}

		&:before {
			.rotate(45deg);
			margin-top: -.125rem;
		}

		&:after {
			.rotate(-45deg);
			margin-top: .125rem;
		}

		& > a {
			color: inherit;
			display: inline-block;
			line-height: 1;
		}

		&:last-child {
			color: @dark;
			font-weight: bolder;
			a {cursor: default;}
			&:before, &:after {
				background-color: @transparent;
			}
		}

		&:hover {
			color: @dark;
		}
	}

	img, .icon {
		display: inline-block;
		line-height: .8;
		height: 1rem;
		width: 1rem;
		font-size: 1rem;
		vertical-align: -15%;
	}

	&.dark {
		background-color: #393832;

		& > li {
			&:hover, &:last-child {
				color: @white;
			}

			&:before, &:after {
				background-color: @white;
			}
		}
	}
}


.breadcrumbs2 {
    margin: 0.625rem 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    width: 100%;

    li {
        float: left;
        margin: 0 .2em 0 1em;
    }

    a {
        background: @inputRestState;
        padding: .3em 1em;
        float: left;
        text-decoration: none;
        color: @linkColor;
        position: relative;

        &:hover {
            background: @cyan;
            color: @white;

            &:before {
                border-color: @cyan @cyan @cyan transparent;
            }

            &:after {
                border-left-color: @cyan;
            }
        }

        &:before {
            content: "";
            position: absolute;
            top: 50%;
            margin-top: -1.5em;
            border-width: 1.5em 0 1.5em 1em;
            border-style: solid;
            border-color: @inputRestState @inputRestState @inputRestState transparent;
            left: -1em;
            margin-left: 1px;
        }

        &:after {
            content: "";
            position: absolute;
            top: 50%;
            margin-top: -1.5em;
            border-top: 1.5em solid transparent;
            border-bottom: 1.5em solid transparent;
            border-left: 1em solid @inputRestState;
            right: -1em;
            margin-right: 1px;
        }
    }

    & > li:first-child {
        margin-left: 0;
        a:before {
            content: normal;
        }
    }

    & > li:last-child {
        background: none;
        a {
            color: @dark;
        }
        &:after, &:before {
            content: normal;
        }
        &:hover {
            a {
                color: @white;
            }
        }
    }

    .active, .active:hover {
        background: none;
        a {
            color: @dark;
        }
    }

    .active:hover {
        a {
            color: @white;
        }
    }

    .active {
        &:after, &:before {
            content: normal;
        }
    }

    &.small {
        a {
            padding: .2em 1em;
            font-size: 11.9px;
        }
    }
    &.mini {
        a {
            padding: .1em 1em;
            font-size: 10.5px;
        }
    }

    & > li > a > [class*=mif] {
        vertical-align: -10%;
    }
}