//  Evolutility-UI-jQuery :: variables.css

//  https://github.com/evoluteur/evolutility-ui-jquery
//  (c) 2020 Olivier Giulieri

// base
$color-text: #0d0d0d;
$color-label: grey;
$color-title: #428bca;
$color-cool: #92cddc;
$color-disabled: silver;


$color-border: #ddd;

// responsive design
$screen1: 500px;
$screen2: 900px;

// golden ratio
$widthR1: 38%;
$widthR2: 62%;

// top nav bar
$color-navbar: #336699;
$color-header-link: #c6d9f0;
$color-header-link-hover: #ffc107;//#ed991a;

$color-icon: #31708f;
$color-icon-hover: #428bca;
$color-icon-background-hover: #ECEFF1;

$toolbar-background-color: #fbfbfb;
$toolbar-border-color: #bce8f1;

// labels
$weight-label: 500;

// footer
$color-text-footer: silver;

// mixins
@mixin ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
@mixin b-radius($r:0) {
	border-radius: $r;
	-moz-border-radius: $r;
	-webkit-border-radius: $r;
}
@mixin flex-holder {
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;
	flex-wrap: wrap;
}
@mixin flex-item {
	box-sizing: border-box;
	flex-grow: 1;
}

@mixin panel-top-bar {
	width:100%;
	padding: 8px;
	/*border-bottom: solid 1px $toolbar-border-color;*/
	border-bottom-style: solid;
	border-bottom-width: 1px;
	background-color: $toolbar-background-color;
	> select{
		display: inline-block;
		width: auto;
	}
	>label{
		margin: 2px 10px;
		&:first-child{
			margin-left: 0;
		}
	}
}
