awesome-select/package/css/awselect.scss

/**

jQuery Awselect
Developed by: Prev Wong
Documentation: https://prevwong.github.io/awesome-select/
Github: https://github.com/prevwong/awesome-select/

**/

$placeholder_color: #000;
$link_color: #000;


@mixin transition() {
 -webkit-transition:.4s cubic-bezier(.19,1,.22,1);
-moz-transition:.4s cubic-bezier(.19,1,.22,1);
-o-transition:.4s cubic-bezier(.19,1,.22,1);
transition: .4s cubic-bezier(.19,1,.22,1);
}

@mixin faster_transition() {
 -webkit-transition:0.2s ease-in;
-moz-transition:0.2s ease-in;
-o-transition:0.2s ease-in;
transition: 0.2s ease-in;
}


.immersive_awselect {
	overflow:hidden!important;
}

.awselect_immersive_background {
	position:fixed;
	z-index:999;
	left:0;
	top:0;
	width:100%;
	height:100%;
	opacity:0;
	background:rgba(0,0,0,0.8);
	@include faster_transition();
	&.animate {
		opacity:1;
	}
}

.awselect {
	--awselect_frame_padding_x: 40px;
	--awselect_frame_padding_y: 10px;
	--awselect_frame_padding_t: unset;
	--awselect_frame_padding_r: unset;
	--awselect_frame_padding_b: unset;
	--awselect_frame_padding_l: unset;
	--awselect_option_padding_x: unset;
	--awselect_option_padding_y: 5px;
	--awselect_options_margin: 10px 0;
	--awselect_icon_color: unset;
	--awselect_placeholder_color: green;
	--awselect_expand_placeholder_color: unset;

	float:left;
	width:100%;
	position:relative;
	cursor:pointer;
	background: var(--awselect_background, #e5e5e5);

	@include transition();
	> .expand_background {
		background: var(--awselect_active_background, #fff);
		height:0;
		float:left;
		width:100%;
		position:absolute;
		z-index:1;
		transform-origin: top;
		@include transition();
	}
	> .frame {
		position:relative;
		padding: var(--awselect_frame_padding_y, var(--awselect_frame_padding_t, 10px) var(--awselect_frame_padding_r, 40px)) var(--awselect_frame_padding_x, var(--awselect_frame_padding_b, 10px) var(--awselect_frame_padding_l, 40px));
		color : $placeholder_color;
		float:left;
		width:100%;

		.content {
			float:left;
			width:100%;
			position:relative;
			z-index:2;
			color: var(--awselect_placeholder_color, #000);
		}
		span {
			@include transition();
			float:left;
			width:100%;
			color:inherit;
		}
		.value {
			position:absolute;
			left:0;
		}
		.placeholder {
			position:relative;
		}
		.icon {
			float: right;
		    position: absolute;
		    right: 0;
		    top: 50%;
		    transform: rotate(180deg) translateY(-50%);
		    transform-origin: center 0;
			fill: var(--awselect_icon_color, var(--awselect_placeholder_color, #000));

		    @include transition();
		    svg {
		    	width:10px;
		    	height:10px;
		    }
		}
	}
	.expand_frame {
		z-index:2;
		position:absolute;
		padding:0;
		@include transition();
		transform:translateY(20px);
		opacity:0;
		float:left;
		width:100%;
		max-height:200px;
		overflow: hidden;
		display:none;
		top: 100%;
		&.overflow {
			overflow-y:scroll;
		}
		> ul {
			float:left;
			padding:0;
			width:100%;
			color: var(--awselect_options_color, #000);
			margin: var(--awselect_options_margin);
			li {
				float:left;
				width:100%;
				display:block;
				a {
					padding: var(--awselect_option_padding_y, var(--awselect_frame_padding_y, var(--awselect_frame_padding_t, 10px) var(--awselect_frame_padding_r, 40px)))
							 var(--awselect_option_padding_x, var(--awselect_frame_padding_x, var(--awselect_frame_padding_b, 10px) var(--awselect_frame_padding_l, 40px)));
					color:inherit;
					opacity:0.8;
					float:left;
					width:100%;
					@include transition();
					&:hover {
						background:rgba(0,0,0,0.07);
						opacity:1;
					}
				}
			}
		}
	}

	&.animate {
		z-index:9999;
		> .frame {
			.icon {
				color: var(--awselect_expand_icon_color, var(--awselect_icon_color, var(--awselect_placeholder_color, #000)));
				 transform: rotate(0deg) translateY(-50%);
			}
			> .content {
				color: var(--awselect_expand_placeholder_color, var(--awselect_placeholder_color, #000));
				> .value {
					opacity: 0;
				}
			}
		}
		> .expand_background {
			height:100%;
		}
	}
	&.animate2{
		> .expand_background {
			box-shadow:0px 11px 43px 11px rgba(0, 0, 0, 0.11);
		}
		.expand_frame {
			transform:translateY(0px);
			opacity:1;
		}
	}
	&.placeholder_animate {
		>.frame {
			.value {
				opacity:0;
			}
		}
	}
	&.placeholder_animate2 {
		.frame {

			.placeholder {
				transform:translateY(0);
				opacity:1;
			}
		}
	}

	&.transition_paused {
		transition:none!important;
	}
	&.animate > .expand_frame,
	&.animating > .expand_frame{
		display: block;
	}
	&.animating > .frame > .content > .value {
		opacity: 0;
	}
	&:not(.animate):not(.animating) {
		> .expand_frame{
			display: none;
		}
		> .expand_background {
			transform: scaleY(0);
		}
	}

	&:not(.animate) > .frame > .content > .value + .placeholder {
		transform:translateY(20px);
		opacity:0;
	}
}

.aw_cursor_pointer {
	float:left;
	width:20px;
	height:20px;
	border-radius:100%;
	background:#ddd;
	overflow:hidden;
	padding:5px;
	@include transition();
	transform:scale(0.5);
	.inner {
		float: left;
		width: 100%;
		height: 0;
		background: #fff;
		border-radius: 100%;
		@include transition();

	}
	&.animate {
		transform: scale(1);
		.inner {
			height:100%;
		}
	}
}
.immersive_shadow{
	position: relative;
	float: left;
}