Practice/_src/admin/scss/plugins/ax5ui/_ax5picker.scss

$ax5picker-z-index: 2000 !default;
$ax5picker-box-model: border-box !default;
$ax5picker-bg: #fff !default;
$ax5picker-inner-border: 1px solid !default;
$ax5picker-inner-border-color: #ddd !default;

$ax5picker-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.175) !default;
$ax5picker-border-radius: 5px !default;

$ax5picker-body-padding: 5px !default;
$ax5picker-heading-padding: 10px 15px !default;
$ax5picker-buttons-padding: 10px 0px 5px 0px !default;

$ax5picker-content-border: 0px solid !default;
$ax5picker-content-border-color: none !default;
$ax5picker-content-border-radius: 0px !default;
$ax5picker-content-padding: 0px !default;

$ax5picker-easing-time-open: 0.1s !default;
$ax5picker-easing-time-close: 0.1s !default;
$ax5picker-arrow-size: 10px !default;
$ax5picker-arrow-border-width: 1px !default;

//** Border color for elements within dialog
$ax5picker-default-text: #222 !default;
$ax5picker-default-border-color: #ddd !default;
$ax5picker-default-heading-bg: #f5f5f5 !default;

$ax5picker-primary-text: #fff !default;
$ax5picker-primary-border-color: $brand-primary !default;
$ax5picker-primary-heading-bg: $brand-primary !default;

$ax5picker-success-text: #3c763d !default;
$ax5picker-success-border-color: #dff0d8 !default;
$ax5picker-success-heading-bg: darken(adjust-hue(#dff0d8, -10), 5%) !default;

$ax5picker-info-text: #31708f !default;
$ax5picker-info-border-color: #d9edf7 !default;
$ax5picker-info-heading-bg: darken(adjust-hue(#d9edf7, -10), 5%) !default;

$ax5picker-warning-text: #8a6d3b !default;
$ax5picker-warning-border-color: #fcf8e3 !default;
$ax5picker-warning-heading-bg: darken(adjust-hue(#fcf8e3, -10), 5%) !default;

$ax5picker-danger-text: #a94442 !default;
$ax5picker-danger-border-color: #f2dede !default;
$ax5picker-danger-heading-bg: darken(adjust-hue(#f2dede, -10), 5%) !default;

@mixin ax-picker() {
	box-sizing: border-box;
	*,
	*:before,
	*:after {
		box-sizing: border-box;
	}

	z-index: $ax5picker-z-index;
	position: absolute;
	left: 0px;
	top: 0px;
	//overflow: hidden;
}

@mixin picker-variant($text-color, $border-color, $heading-bg-color) {

	@include ax-background($ax5picker-bg);
	border: $ax5picker-inner-border;
	border-color: $border-color;
	border-radius: $ax5picker-border-radius;
	box-shadow: $ax5picker-box-shadow;

	.ax-picker-heading {
		font-weight: 600;
		padding: $ax5picker-heading-padding;
		border-bottom: 1px solid transparent;
		@include border-top-radius($ax5picker-border-radius - 1);

		color: $text-color;
		@include ax-background($heading-bg-color);
		.badge {
			font-size: 0.8em;
			color: $heading-bg-color;
			@include ax-background($text-color);
		}
	}
	.ax-picker-body {
		padding: $ax5picker-body-padding;
		text-align: center;
		.ax-picker-content {
			min-width: 50px;

			.ax-picker-content-box {
				border: $ax5picker-content-border;
				border-color: $ax5picker-content-border-color;
				border-radius: $ax5picker-content-border-radius;
				padding: $ax5picker-content-padding;
				overflow: hidden;
			}
		}
		.ax-picker-buttons {
			padding: $ax5picker-buttons-padding;
			button {
				&:not(:last-child) {
					margin-right: 3px;
				}
			}
		}
	}

	&.direction-top {
		.ax-picker-arrow {
			@include picker-arrow($ax5picker-arrow-size, $ax5picker-arrow-border-width, $border-color, top);
		}
	}
	&.direction-right {
		.ax-picker-arrow {
			@include picker-arrow($ax5picker-arrow-size, $ax5picker-arrow-border-width, $border-color, right);
		}
	}
	&.direction-bottom {
		.ax-picker-arrow {
			@include picker-arrow($ax5picker-arrow-size, $ax5picker-arrow-border-width, $border-color, bottom);
		}
	}
	&.direction-left {
		.ax-picker-arrow {
			@include picker-arrow($ax5picker-arrow-size, $ax5picker-arrow-border-width, $border-color, left);
		}
	}

}

@mixin picker-arrow($arrow-size, $arrow-border-width, $border-color, $arrow-direction) {

	//
	//@debug( nth($ax5picker-inner-border, 3) );
	$arrow-bg: nth($ax5picker-bg, 1);
	$arrow-border-color: $border-color;

	position: absolute;
	width: 0;
	height: 0;

	@if ($arrow-direction == top) {
		left: 50%;
		top: 0px;
	} @else if ($arrow-direction == right) {
		right: 0px;
		top: 50%;
	} @else if ($arrow-direction == bottom) {
		left: 50%;
		bottom: 0px;
	} @else if ($arrow-direction == left) {
		left: 0px;
		top: 50%;
	}

	&:before {
		content: ' ';
		position: absolute;
		width: 0;
		height: 0;

		@if ($arrow-direction == top) {
			left: - ($arrow-size);
			top: - ($arrow-size * 2);
			border-left: $arrow-size solid transparent;
			border-right: $arrow-size solid transparent;
			border-bottom: ($arrow-size * 2) solid $arrow-border-color;
		} @else if ($arrow-direction == right) {
			right: - ($arrow-size * 2);
			top: - ($arrow-size);
			border-top: $arrow-size solid transparent;
			border-bottom: $arrow-size solid transparent;
			border-left: ($arrow-size * 2) solid $arrow-border-color;
		} @else if ($arrow-direction == bottom) {
			left: - ($arrow-size);
			bottom: - ($arrow-size * 2);
			border-left: $arrow-size solid transparent;
			border-right: $arrow-size solid transparent;
			border-top: ($arrow-size * 2) solid $arrow-border-color;
		} @else if ($arrow-direction == left) {
			left: - ($arrow-size * 2);
			top: - ($arrow-size);
			border-top: $arrow-size solid transparent;
			border-bottom: $arrow-size solid transparent;
			border-right: ($arrow-size * 2) solid $arrow-border-color;
		}
	}

	&:after {
		content: ' ';
		position: absolute;
		width: 0;
		height: 0;

		@if ($arrow-direction == top) {
			left: - ($arrow-size);
			top: - ($arrow-size * 2) + ($arrow-border-width * 2);
			border-left: ($arrow-size) solid transparent;
			border-right: ($arrow-size) solid transparent;
			border-bottom: ($arrow-size * 2) solid $arrow-bg;
		} @else if ($arrow-direction == right) {
			right: - ($arrow-size * 2) + ($arrow-border-width * 2);
			top: - ($arrow-size);
			border-top: ($arrow-size) solid transparent;
			border-bottom: ($arrow-size) solid transparent;
			border-left: ($arrow-size * 2) solid $arrow-bg;
		} @else if ($arrow-direction == bottom) {
			left: - ($arrow-size);
			bottom: - ($arrow-size * 2) + ($arrow-border-width * 2);
			border-left: ($arrow-size) solid transparent;
			border-right: ($arrow-size) solid transparent;
			border-top: ($arrow-size * 2) solid $arrow-bg;
		} @else if ($arrow-direction == left) {
			left: - ($arrow-size * 2) + ($arrow-border-width * 2);
			top: - ($arrow-size);
			border-top: ($arrow-size) solid transparent;
			border-bottom: ($arrow-size) solid transparent;
			border-right: ($arrow-size * 2) solid $arrow-bg;
		}
	}
}

@include keyframes(ax-picker) {

	0% {
		opacity: 0.0;
		//@include transform(scale(0));
		@include transform(translate(0, -10%));
	}

	100% {
		opacity: 1.0;
		//@include transform(scale(1));
		@include transform(translate(0, 0));
	}
}

@include keyframes(ax-picker-destroy) {
	from {
		//@include transform(scale(1));
		opacity: 1.0;
		@include transform(translate(0, 0));
	}
	to {
		//@include transform(scale(0.95));
		opacity: 0.0;
		@include transform(translate(0, -10%));
	}
}

// mixins --------------------------------------------- end

.ax5-ui-picker {

	@include ax-picker();

	@include perspective(1000px);
	@include transform-style(preserve-3d);

	@include animation(ax-picker $ax5picker-easing-time-open);
	@include transform(translateZ(0));
	@include transform-origin(center top);
	/* flip type
	@include backface-visibility(visible);
	@include transform(translateY(0%) rotateX(0deg));
	*/

	@include picker-variant($ax5picker-default-text, $ax5picker-default-border-color, $ax5picker-default-heading-bg);

	&.primary {
		@include picker-variant($ax5picker-primary-text, $ax5picker-primary-border-color, $ax5picker-primary-heading-bg);
	}
	&.success {
		@include picker-variant($ax5picker-success-text, $ax5picker-success-border-color, $ax5picker-success-heading-bg);
	}
	&.info {
		@include picker-variant($ax5picker-info-text, $ax5picker-info-border-color, $ax5picker-info-heading-bg);
	}
	&.warning {
		@include picker-variant($ax5picker-warning-text, $ax5picker-warning-border-color, $ax5picker-warning-heading-bg);
	}
	&.danger {
		@include picker-variant($ax5picker-danger-text, $ax5picker-danger-border-color, $ax5picker-danger-heading-bg);
	}

	&.destroy {
		@include animation(ax-picker-destroy $ax5picker-easing-time-close $ease-in-back forwards);
	}

	&.direction-top {
		@include transform-origin(center top);
	}
	&.direction-right {
		@include transform-origin(right center);
	}
	&.direction-bottom {
		@include transform-origin(center bottom);

	}
	&.direction-left {
		@include transform-origin(left center);
	}
}

// picker handle

@mixin ax5picker-handle(){
	&[data-ax5picker] {
		.input-group-addon {
			cursor: pointer;

			&:not(:last-child) {
				border-left: 0 none;
				border-right: 0 none;
			}

			&.color-preview{
				padding: 0;
			}
			[data-ax5picker-color="preview"]{
				display: block;
			}
		}
	}
}

.input-group {
	@include ax5picker-handle();
}
.form-group {
	@include ax5picker-handle();
}