@tradeshift/tradeshift-ui/ts-runtime.less

The Tradeshift UI Library & Framework

// ts-variables.less ...........................................................

// Units .......................................................................

@ts-unit: 20px;
@ts-unit-half: (@ts-unit / 2);
@ts-unit-plus: (@ts-unit * 1.5);
@ts-unit-quarter: (@ts-unit / 4);
@ts-unit-eighth: (@ts-unit / 8);
@ts-unit-double: (@ts-unit * 2);
@ts-unit-triple: (@ts-unit * 3);
@ts-width-aside: 320px;
@ts-width-grails: (@ts-width-aside - @ts-unit-double);

// Fonts .......................................................................

@ts-fontsize-small: 11px;
@ts-fontsize-mini: 12px;
@ts-fontsize: 14px;
@ts-fontsize-medium: 16px;
@ts-fontsize-big: 18px;
@ts-fontsize-xbig: 24px;
@ts-fontsize-xxbig: 36px;
@ts-fontsize-icon: 22px;

@ts-fontweight-light: 300;
@ts-fontweight: 400;
@ts-fontweight-semibold: 600;
@ts-fontweight-bold: 700;

@ts-fontstack: 'Open Sans', 'Helvetica Neue', 'Lucida Grande', 'Segoe UI', 'Ubuntu', 'Droid Sans',
	sans-serif;
@ts-fontstack-mono: 'Ubuntu Mono', 'Menlo', 'Monaco', 'Consolas', 'Bitstream Vera Sans Mono',
	monospace;
@ts-fontstack-icon: 'Tradeshifticons', fantasy;

@ts-radius: 3px;

// Z-index .....................................................................

@ts-zindex-main: 0;
@ts-zindex-topbar: 1000;
@ts-zindex-modal: 1500;
@ts-zindex-aside: 2000;
@ts-zindex-dialog: 3000;
@ts-zindex-spin: 4000;
@ts-zindex-max: 10000;
@ts-zindex-dialog-cover: @ts-zindex-dialog - 1;
@ts-zindex-aside-cover: @ts-zindex-aside - 1;
@ts-zindex-spin-cover: @ts-zindex-spin - 1;

// Colors ......................................................................

// Base
@ts-color-white: hsl(0, 0%, 100%);
@ts-color-black: hsl(204, 25%, 8%);

// Red
@ts-color-red-lightest: hsl(0, 57%, 90%);
@ts-color-red-lighter: hsl(0, 59%, 80%);
@ts-color-red-light: hsl(0, 59%, 60%);
@ts-color-red: hsl(0, 100%, 37%);
@ts-color-red-dark: hsl(0, 100%, 30%);
@ts-color-red-darker: hsl(0, 100%, 24%);

// Orange
@ts-color-orange-lightest: hsl(32, 100%, 92%);
@ts-color-orange-lighter: hsl(33, 100%, 84%);
@ts-color-orange-light: hsl(33, 100%, 68%);
@ts-color-orange: hsl(33, 100%, 50%);
@ts-color-orange-dark: hsl(31, 100%, 47%);
@ts-color-orange-darker: hsl(26, 100%, 41%);

// Yellow
@ts-color-yellow-lightest: hsl(44, 95%, 92%);
@ts-color-yellow-lighter: hsl(45, 95%, 85%);
@ts-color-yellow-light: hsl(44, 96%, 70%);
@ts-color-yellow: hsl(44, 98%, 53%);
@ts-color-yellow-dark: hsl(40, 100%, 52%);
@ts-color-yellow-darker: hsl(34, 100%, 49%);

// Green
@ts-color-green-lightest: hsl(99, 59%, 90%);
@ts-color-green-lighter: hsl(99, 60%, 81%);
@ts-color-green-light: hsl(99, 61%, 63%);
@ts-color-green: hsl(99, 85%, 42%);
@ts-color-green-dark: hsl(101, 87%, 33%);
@ts-color-green-darker: hsl(103, 91%, 26%);

// Blue
@ts-color-blue-lightest: hsl(199, 100%, 92%);
@ts-color-blue-lighter: hsl(199, 100%, 84%);
@ts-color-blue-light: hsl(199, 100%, 68%);
@ts-color-blue: hsl(199, 100%, 50%);
@ts-color-blue-dark: hsl(201, 100%, 40%);
@ts-color-blue-darker: hsl(203, 100%, 32%);

// Purple
@ts-color-purple-lightest: hsl(295, 39%, 89%);
@ts-color-purple-lighter: hsl(295, 40%, 78%);
@ts-color-purple-light: hsl(295, 40%, 57%);
@ts-color-purple: hsl(295, 79%, 34%);
@ts-color-purple-dark: hsl(294, 82%, 26%);
@ts-color-purple-darker: hsl(296, 100%, 19%);

// Pink
@ts-color-pink-lightest: hsl(325, 46%, 89%);
@ts-color-pink-lighter: hsl(325, 48%, 78%);
@ts-color-pink-light: hsl(325, 48%, 57%);
@ts-color-pink: hsl(325, 98%, 33%);
@ts-color-pink-dark: hsl(327, 99%, 26%);
@ts-color-pink-darker: hsl(329, 100%, 21%);

// Grey
@ts-color-gray-lightest: hsl(204, 22%, 95%);
@ts-color-gray-lighter: hsl(200, 21%, 92%);
@ts-color-gray-light: hsl(198, 20%, 83%);
@ts-color-gray: hsl(198, 20%, 67%);
@ts-color-gray-dark: hsl(198, 20%, 59%);
@ts-color-gray-darker: hsl(198, 20%, 49%);

// Slate
@ts-color-slate-lightest: hsl(198, 20%, 39%);
@ts-color-slate-lighter: hsl(199, 20%, 31%);
@ts-color-slate-light: hsl(199, 20%, 22%);
@ts-color-slate: hsl(196, 20%, 15%);
@ts-color-slate-dark: hsl(196, 22%, 10%);
@ts-color-slate-darker: hsl(197, 20%, 7%);

// Animations ..................................................................

@ts-debug-multiplier: 1;

@ts-transition-now: 0.1s;
@ts-transition-fast: 0.2s;
@ts-transition-slow: 0.6s;

@ts-duration-enter-mobile: 0.225s * @ts-debug-multiplier;
@ts-duration-leave-mobile: 0.195s * @ts-debug-multiplier;
@ts-easing-leave: cubic-bezier(0.4, 0, 1, 1);
@ts-easing-enter: cubic-bezier(0, 0, 0.2, 1);

// live examples in dropdown on http:
@ts-timing-easeinquad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
@ts-timing-easeincubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
@ts-timing-easeinquart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
@ts-timing-easeinquint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
@ts-timing-easeinsine: cubic-bezier(0.47, 0, 0.745, 0.715);
@ts-timing-easeinexpo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
@ts-timing-easeincirc: cubic-bezier(0.6, 0.04, 0.98, 0.335);
@ts-timing-easeinback: cubic-bezier(0.6, -0.28, 0.735, 0.045);

@ts-timing-easeoutquad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
@ts-timing-easeoutcubic: cubic-bezier(0.215, 0.61, 0.355, 1);
@ts-timing-easeoutquart: cubic-bezier(0.165, 0.84, 0.44, 1);
@ts-timing-easeoutquint: cubic-bezier(0.23, 1, 0.32, 1);
@ts-timing-easeoutsine: cubic-bezier(0.39, 0.575, 0.565, 1);
@ts-timing-easeoutexpo: cubic-bezier(0.19, 1, 0.22, 1);
@ts-timing-easeoutcirc: cubic-bezier(0.075, 0.82, 0.165, 1);
@ts-timing-easeoutback: cubic-bezier(0.175, 0.885, 0.32, 1.275);

@ts-timing-easeinoutquad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
@ts-timing-easeinoutcubic: cubic-bezier(0.645, 0.045, 0.355, 1);
@ts-timing-easeinoutquart: cubic-bezier(0.77, 0, 0.175, 1);
@ts-timing-easeinoutquint: cubic-bezier(0.86, 0, 0.07, 1);
@ts-timing-easeinoutsine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
@ts-timing-easeinoutexpo: cubic-bezier(1, 0, 0, 1);
@ts-timing-easeinoutcirc: cubic-bezier(0.785, 0.135, 0.15, 0.86);
@ts-timing-easeinoutback: cubic-bezier(0.68, -0.55, 0.265, 1.55);



// ts-mixins.less ..............................................................


// General Mixins ..............................................................
.ts-mixin-unselectable() {
	user-select: none;
}
.ts-mixin-selectable() {
	user-select: text;
}

.ts-mixin-border-box() {
	box-sizing: border-box;
}
.ts-mixin-content-box() {
	box-sizing: content-box;
}

.ts-mixin-maximize(@top: 0, @right: 0, @bottom: 0, @left: 0) {
	position: absolute;
	top: @top;
	right: @right;
	bottom: @bottom;
	left: @left;
}

.ts-mixin-fix(@width: auto, @height: auto) {
	.ts-mixin-fixwidth(@width);
	.ts-mixin-fixheight(@height);
}
.ts-mixin-fixwidth(@width: auto) {
	width: @width;
	max-width: @width;
	min-width: @width;
}
.ts-mixin-fixheight(@height: auto) {
	height: @height;
	max-height: @height;
	min-height: @height;
}

.ts-mixin-contain() {
	&:after {
		content: '';
		display: block;
		clear: both;
	}
}
.ts-mixin-label-text() {
	text-transform: uppercase;
	font-size: @ts-fontsize-small;
	font-weight: @ts-fontweight-semibold;
}

.ts-mixin-rounded( @tl : @ts-radius, @tr : @ts-radius, @br : @ts-radius, @bl : @ts-radius ) {
	border-radius: @tl @tr @br @bl;
}
.ts-mixin-noround() {
	border-radius: 0;
}
.ts-mixin-rounded-t() {
	border-radius: @ts-radius @ts-radius 0 0;
}
.ts-mixin-rounded-r() {
	border-radius: 0 @ts-radius @ts-radius 0;
}
.ts-mixin-rounded-b() {
	border-radius: 0 0 @ts-radius @ts-radius;
}
.ts-mixin-rounded-l() {
	border-radius: @ts-radius 0 0 @ts-radius;
}
.ts-mixin-rounded-tl() {
	border-radius: @ts-radius 0 0 0;
}
.ts-mixin-rounded-tr() {
	border-radius: 0 @ts-radius 0 0;
}
.ts-mixin-rounded-bl() {
	border-radius: 0 0 0 @ts-radius;
}
.ts-mixin-rounded-br() {
	border-radius: 0 0 @ts-radius 0;
}

.ts-mixin-expand( @value : @ts-unit-half ) {
	margin-left: -@value;
	margin-right: -@value;
}

.ts-mixin-liftup( @value : @ts-unit-half ) {
	margin-top: -@value;
}

.ts-mixin-reduce( @value : @ts-unit-half ) {
	padding-left: @value;
	padding-right: @value;
}
.ts-mixin-reduce-l( @value : @ts-unit-half ) {
	padding-left: @value;
}
.ts-mixin-reduce-r( @value : @ts-unit-half ) {
	padding-right: @value;
}

// Appearance ..................................................................
.ts-mixin-menuitem(@spanwidth: auto) {
	padding: @ts-unit-half;
	text-align: left;
	display: inline-block;
	text-decoration: none;
	.ts-mixin-unselectable();
	span {
		width: @spanwidth;
	}
	> span,
	> i {
		display: table-cell;
		vertical-align: middle;
	}
	> i ~ span,
	> span ~ i {
		padding-left: 8px;
	}
	> i:only-child {
		line-height: @ts-unit;
	}
	&:hover {
		text-decoration: none;
	}
}

.ts-mixin-icon(@fontsize: @ts-fontsize-icon) {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: @ts-fontstack-icon;
	font-size: @fontsize;
	font-weight: @ts-fontweight;
	font-style: normal;
	text-decoration: none;
	text-transform: none;
	display: inline;
	line-height: 0;
	text-align: center;
}

.ts-mixin-button-text() {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-weight: @ts-fontweight-semibold;
}

.ts-mixin-text-ellipsis() {
	text-overflow: ellipsis;
}

// Transitions ..................................................................
.ts-mixin-transition( @what : all, @length : @ts-transition-fast, @easing : ease, @delay : 0s ) {
	transition-property: @what;
	.ts-mixin-transition-duration(@length);
	.ts-mixin-transition-timing(@easing);
	.ts-mixin-transition-delay(@delay);
}
.ts-mixin-transition-transform( @length : @ts-transition-fast, @easing : ease, @delay : 0s ) {
	.ts-mixin-transition(transform, @length, @easing, @delay);
}
.ts-mixin-transition-duration(@length: @ts-transition-fast) {
	transition-duration: @length;
}
.ts-mixin-transition-timing(@easing: ease-in-out) {
	transition-timing-function: @easing;
}
.ts-mixin-transition-delay(@delay: 0) {
	transition-delay: @delay;
}
.ts-mixin-transition-colors(@length: @ts-transition-fast, @easing: ease) {
	transition-property: color, background-color, border-color;
	.ts-mixin-transition-duration(@length);
	.ts-mixin-transition-timing(@easing);
}

// Animations ..................................................................
.ts-mixin-animation(@name, @duration: 250ms, @ease: ease, @delay: 0) {
	animation: @name @duration @ease @delay;
}

.ts-mixin-keyframes(@name, @fromRules, @toRules) {
	@keyframes @name {
		0% {
			@fromRules();
		}
		100% {
			@toRules();
		}
	}
}

// Transformations .............................................................
.ts-mixin-transform( @shorthand : none ) {
	transform: @shorthand;
}

.ts-mixin-scale( @factor ) {
	transform: scale(@factor);
}
.ts-mixin-scaleX( @factor ) {
	transform: scaleX(@factor);
}
.ts-mixin-scaleY( @factor ) {
	transform: scaleY(@factor);
}

.ts-mixin-rotate( @deg ) {
	transform: rotate(@deg);
}

.ts-mixin-translate( @x, @y:0 ) {
	transform: translate(@x, @y);
}
.ts-mixin-translate3d( @x, @y: 0, @z: 0 ) {
	transform: translate3d(@x, @y, @z);
}

.ts-mixin-perspective( @value: 1000px ) {
	perspective: @value;
}

.ts-mixin-transform-origin( @x:center, @y:center  ) {
	transform-origin: @x @y;
}

// Danger zone: Modern browsers only ...........................................
.ts-mixin-flexbox() {
	display: flex;
	flex-wrap: nowrap;
}
.ts-mixin-flexcol() {
	.ts-mixin-flexbox();
	flex-direction: column;
	min-height: auto;
	height: 100%;
}
.ts-mixin-flexrow() {
	.ts-mixin-flexbox();
	flex-direction: row;
	min-width: auto;
	width: 100%;
}
.ts-mixin-flex(@value: 1) {
	flex-grow: @value;
	flex-basis: @value;
}

// Loading bar .................................................................
.ts-mixin-progress-bar-gradient(@color1: black, @color2: white) {
	background-image: linear-gradient(
		-45deg,
		@color1 25%,
		@color2 25%,
		@color2 50%,
		@color1 50%,
		@color1 75%,
		@color2 75%,
		@color2
	);
}