vpn.email/bower_components/metro/less/typography.less

vpn.email client

@import (once) "vars";


html {
	font-size: 100%;
}

body {
	font-family: @fontName;
	font-size: @baseFontSize;
	line-height: 1.1;
	#font > .normal;
}

#font {
	.light {
		font-weight: 300;
		font-style: normal;
	}

	.normal {
		font-weight: 400;
		font-style: normal;
	}

	.bold {
		font-style: normal;
		font-weight: 700;
	}

	.italic {
		font-style: italic;
	}
}

.leader {
	font: 400 2.25rem/1.1 @fontName; //36px
}
.sub-leader {
	font: 500 1.875rem/1.1 @fontName; //30px
}
.header {
	font: 500 1.5rem/1.1 @fontName; //24px
}
.sub-header {
	font: 500 1.125rem/1.1 @fontName; //18px
}
.alt-header {
	font: 500 1rem/1.1 @fontName; //16px
}
.sub-alt-header {
	font: 500 .875rem/1.1 @fontName; //14px
}
.minor-header {
	font: 500 0.75rem/1.1 @fontName; //12px
}

h1, h2, h3, h4, h5, h6, p  {
	//margin: .3125rem 0;
}

h1 {
	.leader;
}

h2 {
	.sub-leader;
}

h3 {
	.header;
}

h4 {
	.sub-header;
}

h5 {
	.sub-alt-header;
}

h6 {
	.minor-header;
}

h1, h2, h3, h4, h5, h6 {
	margin: .625rem 0;
	small, .small {
		font-weight: 400;
		font-size: .7em;
		line-height: 1;
		color: #777;
	}
}

.text-light {
	#font > .light;
}

.text-normal {
	#font > .normal;
}

.text-bold {
	#font > .bold;
}

.text-italic {
	#font > .italic;
}

.uppercase {
	text-transform: uppercase;
}

.lowercase {
	text-transform: lowercase;
}

.capital {
	text-transform: capitalize;
}

.align-left {
	text-align: left;
}

.align-right {
	text-align: right;
}

.align-center {
	text-align: center;
}

.align-justify {
	text-align: justify;
}

.v-align-top {
	vertical-align: top;
}

.v-align-bottom {
	vertical-align: bottom;
}

.v-align-baseline {
	vertical-align: baseline;
}

.v-align-middle {
	vertical-align: middle;
}

.v-align-sub {
	vertical-align: sub;
}

.v-align-super {
	vertical-align: super;
}

.v-align-top-text {
	vertical-align: text-top;
}

.v-align-bottom-text {
	vertical-align: text-bottom;
}

.text-dashed {
	border:0;
	border-bottom: 1px gray dashed;
	display: inline;
}

.indent-paragraph {
	&:first-letter {
		margin-left: 2.5rem;
	}
}

.text-secondary {
	font-size: @secondTextFontSize;
}

.text-accent, .text-enlarged {
	font-size: @accentTextFontSize;
}

.text-default {
	font-size: @baseFontSize;
}

.text-small {
	font-size: @smallTextFontSize;
}

.text-light {
	font-weight: 300;
}

.text-ellipsis {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}


abbr {
	text-decoration: none;
	border-bottom: 1px @grayLight dotted;
	cursor: help;
	display: inline;
}

address {
	#font > .normal;
	margin: .625rem 0;
}

blockquote {
	margin: .625rem 0;
	padding: 0 0 0 .625rem;
	border-left: .25rem @grayLight solid;

	small {
		color: @grayLight;

		&:before {
			content: "\2014 \00A0";
		}
	}

	&.place-right {
		border: 0;
		border-right: 4px @grayLight solid;
		padding-right: .625rem;
		.align-right;

		small {
			&:before {
				content: "";
			}
			&:after {
				content: " \00A0 \2014";
			}
		}
	}
}

.unstyled-list {
	padding-left: 0;
	list-style: none;
	li {
		& ul, & ol {
			list-style: none;
			padding-left: 1.5625rem;
		}
	}
}

.inline-list {
	list-style: none;
	padding-left: 0;
	li {
		display: inline-block;
		margin-right: .625rem;
		&:last-child {
			margin-right: 0;
		}
	}
}

ul, ol {
	margin-left: .3125rem;

	li {
		line-height: 1.25rem;

		& ul, & ol {
			padding-left: 1.5625rem;
		}
	}
}

dl {

	dt, dd {
		line-height: 1.25rem;
	}

	dt {
		.text-bold;
	}

	dd {
		margin-left: .9375rem;
	}

	&.horizontal {
		dt {
			float: left;
			width: 10rem;
			overflow: hidden;
			clear: left;
			text-align: right;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		dd {
			margin-left: 11.25rem;
		}
	}
}

a {
	color: @linkColor;
	&:visited {
		color: @linkVisitedColor;
	}
}

hr {
	border: 0;
	height: 2px;
	background-color: #88b9e3;
//	background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.25), rgba(0,0,0,0));
//	background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.25), rgba(0,0,0,0));
//	background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.25), rgba(0,0,0,0));
//	background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.25), rgba(0,0,0,0));

	&.thin {
		height: 1px;
	}

	&.fat {
		height: 3px;
	}
}

.tag {
	display: inline-block;
	line-height: 1.1;
	font-size: 80%;
	padding: 1px 4px 2px;
	background-color: @grayLighter;
	border-radius: 2px;
	color: @dark;
	vertical-align: middle;

	&.success {
		background-color: @green;
		color: @white;
	}
	&.alert {
		background-color: @red;
		color: @white;
	}
	&.info {
		background-color: @cyan;
		color: @white;
	}
	&.warning {
		background-color: @orange;
		color: @white;
	}

	a& {
		text-decoration: underline;
		cursor: pointer;
	}
}