vpn.email/bower_components/metro/less/tabcontrol.less

vpn.email client

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

.tabcontrol {
	//overflow: hidden;
	position: relative;
	width: 100%;

	.tabs {
		width: 100%;
		margin: 0;
		padding: 0;
		list-style: none inside;
		border-bottom: 2px @cyan solid;
		white-space: nowrap;
		overflow: visible;
		.clear-float;

		li {
			display: block;
			//margin: 0 0 -4px -4px;
			float: left;
			position: relative;
			white-space: nowrap;

			a {
				display: block;
				float: left;
				padding: 8px 24px;
				color: @dark;
				font-size: .6875rem;
				font-weight: bold;
				text-transform: uppercase;
				position: relative;
				white-space: nowrap;
			}
		}

		li {

			&:hover {
				a {
					background-color: @grayLighter;
				}
			}

			&.active {
				a {
					background-color: @cyan;
					color: @white;
					.text-shadow;
				}
			}

			&.disabled {
				a {
					background: @grayLighter linear-gradient(-45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
					background-size: 40px 40px;
					color: @grayLight;

					//.ribbed-grayLighter;
					//.fg-grayLight;
					cursor: default;
				}
			}
		}

		li {
			&.non-visible-tabs {
				display: block;
				float: right;

				&:empty {
					display: none;
				}

				&.dropdown-toggle {
					height: 100% ;
				}
			}
		}
	}

	&.tabs-bottom {
		.tabs {
			border-bottom: none;
			border-top: 2px @cyan solid;

            li.disabled {
                top: 0;
            }
            li:hover {
                top: 0;
            }
		}
	}

	.frames {
		width: 100%;
		//overflow: hidden;
		position: relative;

		.frame {
			display: block;
			position: relative;
			width: 100%;
			padding: 20px;
			background-color: @grayLight;
		}
	}
}

.tabcontrol2 {
	.tabcontrol;

	.tabs {
		border-bottom: 0;
		vertical-align: bottom;
		z-index: 2;

		li {
			padding-top: 2px;
			overflow: visible;
            margin: 0 2px;

			&:after {
				content: "";
				position: absolute;
				left: 0;
				top: 100%;
				//margin-top: 1px;
				width: 100%;
				background-color: @white;
				height: 2px;
				z-index: 3;
			}

			&:not(.active) {
				&:after {
					background-color: @grayLighter;
					height: 1px;
				}
			}

			&:first-child {
				margin-left: 10px;
			}

			a {
				background-color: @grayLighter;
				padding-top: .3125rem;
				text-shadow: none ;
			}

			&.active {
				padding-top: 0;
				padding-bottom: 0;
				a {
					background-color: @white;
					border: 1px @grayLighter solid;
					border-top: 2px @red solid;
					border-bottom: 0;
					color: @cyan;
				}

				&:hover {
					a {background-color: inherit;}
				}
			}

			&:hover {
				a {
					background-color: darken(@grayLighter, 5%);
				}
			}
		}
	}

	&.tabs-bottom {
		.tabs {
			border-top: 0;

			li {
				padding: 0;

				&:after {
					top: -1px ;
					background-color: @white;
				}

				&.active {
					padding-bottom: 0;
					a {
						border: 1px @grayLighter solid;
						border-bottom: 2px @red solid;
						border-top: 0;
					}
				}

				&:not(.active) {
					margin-bottom: 0;
					&:after {
						background-color: @grayLighter;
					}
				}
			}
		}
	}

	.frames {
		z-index: 1;
		border: 1px @grayLighter solid;

		.frame {
			background-color: @white;
		}
	}
}