vpn.email/bower_components/metro/less/accordion.less

vpn.email client

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

.accordion {
	& > .frame {
		margin-top: 1px;

		&:first-child {
			margin-top: 0;
		}

		& > .heading {
			display: block;
			padding: 8px 16px 8px 20px;
			background-color: lighten(@grayLighter, 3%);
			cursor: pointer;
			font-size: .6875rem;
			text-transform: uppercase;
			font-weight: bold;
			position: relative;
			border: 1px @grayLighter solid;
			overflow: hidden;
			z-index: 2;
			.no-user-select;
			.transition(.3s);

			&:before {
				position: absolute;
				display: block;
				left: 4px;
				top: 6px;
				content: '';
				width: 0;
				height: 0;
				border-left: 6px solid transparent;
				border-top: 6px solid transparent;
				border-bottom: 6px solid black;
				.rotate-45;
				.transition(.3s);
			}

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

			.icon {
				position: absolute;
				right: 0;
				top: 0;
				font-size: 3rem;
				width: 3rem;
				max-height: 3rem;
				opacity: .6;
				color: @grayLight;
			}
		}

		&.active > .heading {
			background-color: @cyan;
			border-color: @cyan;
			color: @white;
			.bottom-shadow;
			.text-shadow;
			.transition(.3s);

			.icon {
				color: @white;
			}

			&:before {
				left: 8px;
				border-bottom-color: @white;
				.transition(.3s);
				.rotate(0deg);
				.transformOrigin(50% 50%);
			}
		}

		&.active > .content {
			display: block;
		}

		& > .content {
			padding: .625rem;
			display: none;
			background-color: @white;
			z-index: 1;
		}

		&.disabled {
			& > .heading {
				cursor: default;
				background: @white 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;
//				.ribbed-white;
			}

			& > .content {
			}
		}
	}

	&.large-heading {
		& > .frame {
			& > .heading {
				font-size: 2rem;
				line-height: 1.1;
				font-weight: 300;
				padding-left: 32px;
				text-shadow: none;

				&:before {
					top: 10px;
					border-left: 12px solid transparent;
					border-top: 12px solid transparent;
					border-bottom: 12px solid black;
				}
			}

			&.active {
				& > .heading {
					&:before {
						border-bottom-color: @white;
					}
				}
			}
		}
	}
}