vpn.email/bower_components/metro/less/hints.less

vpn.email client

@import (once) "vars";
@import (once) "transform";

p [data-hint]{
	border-bottom: 1px #373737 dotted;
	white-space: nowrap;
}

.hint {
	position: fixed;
	color: @dark;
	padding: 10px;
	font-size: 12px;
	width: auto;
	max-width: 220px;
	margin-top: 10px;
	z-index: @zindexTooltip;
	display: none;
	border: 1px #eee solid;

	.hint-title, .hint-text {
		color: inherit;
		text-align: left;
	}

	.hint-title {
		font-size: 1.2em;
		font-weight: bold;
	}

	.hint-text {
	}
}

// hint bottom

.hint {
	&:before {
		content: '';
		position: absolute;
		background-color: inherit;
		width: 10px;
		height: 10px;
		border: 1px #eee solid;
		.rotate(45deg);
	}
	&:before {
		z-index: 2;
	}
}

.hint {
	&.bottom {
		&:before {
			top: 1px;
			left: 5px;
			margin: -7px 0;
			border-bottom: none;
			border-right: none;
		}
	}

	&.top {
		&:before {
			top: 100%;
			margin-top: -5px;
			left: 5px;
			border-top: none;
			border-left: none;
		}
	}

	&.left {
		&:before {
			top: 5px;
			left: 100%;
			margin-left: -5px;
			border-bottom: none;
			border-left: none;
		}
	}

	&.right {
		&:before {
			top: 5px;
			left: -9px;
			margin: 1px 0 0 3px;
			border-top: none;
			border-right: none;
		}
	}
}

.hint2 {
	.hint;

	&.bottom {
		&:before {
			top: 1px;
			left: 50%;
			margin: -7px 0 0 -5px;
			border-bottom: none;
			border-right: none;
		}
	}

	&.top {
		&:before {
			top: 100%;
			margin-top: -5px;
			left: 50%;
			margin-left: -5px;
			border-top: none;
			border-left: none;
		}
	}

	&.left {
		&:before {
			top: 50%;
			margin-top: -5px;
			left: 100%;
			margin-left: -5px;
			border-bottom: none;
			border-left: none;
		}
	}

	&.right {
		&:before {
			top: 50%;
			margin: -5px 0 0 3px;
			left: -9px;
			border-top: none;
			border-right: none;
		}
	}
}

.hint, .hint2 {
    &.no-border {
        border: none;
        &:before {
            border: none;
        }
        &.right {
            &:before {
                left: -7px;
            }
        }
    }
}

.hint2.line {
    padding: 2px 4px;
    border: none;
    display: block;
    //width: 100%;
    max-width: 100%;
    margin: -5px 0 4px 0;

    &:before {
        display: none;
    }
}