/** jQuery Awselect Developed by: Prev Wong Documentation: https://prevwong.github.io/awesome-select/ Github: https://github.com/prevwong/awesome-select/ **/ .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); -webkit-transition: 0.2s ease-in; -moz-transition: 0.2s ease-in; -o-transition: 0.2s ease-in; transition: 0.2s ease-in; } .awselect_immersive_background.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); -webkit-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); } .awselect > .expand_background { background: var(--awselect_active_background, #fff); height: 0; float: left; width: 100%; position: absolute; z-index: 1; transform-origin: top; -webkit-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); } .awselect > .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: #000; float: left; width: 100%; } .awselect > .frame .content { float: left; width: 100%; position: relative; z-index: 2; color: var(--awselect_placeholder_color, #000); } .awselect > .frame span { -webkit-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); float: left; width: 100%; color: inherit; } .awselect > .frame .value { position: absolute; left: 0; } .awselect > .frame .placeholder { position: relative; } .awselect > .frame .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)); -webkit-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); } .awselect > .frame .icon svg { width: 10px; height: 10px; } .awselect .expand_frame { z-index: 2; position: absolute; padding: 0; -webkit-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); transform: translateY(20px); opacity: 0; float: left; width: 100%; max-height: 200px; overflow: hidden; display: none; top: 100%; } .awselect .expand_frame.overflow { overflow-y: scroll; } .awselect .expand_frame > ul { float: left; padding: 0; width: 100%; color: var(--awselect_options_color, #000); margin: var(--awselect_options_margin); } .awselect .expand_frame > ul li { float: left; width: 100%; display: block; } .awselect .expand_frame > ul li 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%; -webkit-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); } .awselect .expand_frame > ul li a:hover { background: rgba(0, 0, 0, 0.07); opacity: 1; } .awselect.animate { z-index: 9999; } .awselect.animate > .frame .icon { color: var(--awselect_expand_icon_color, var(--awselect_icon_color, var(--awselect_placeholder_color, #000))); transform: rotate(0deg) translateY(-50%); } .awselect.animate > .frame > .content { color: var(--awselect_expand_placeholder_color, var(--awselect_placeholder_color, #000)); } .awselect.animate > .expand_background { height: 100%; } .awselect.animate2 > .expand_background { box-shadow: 0px 11px 43px 11px rgba(0, 0, 0, 0.11); } .awselect.animate2 .expand_frame { transform: translateY(0px); opacity: 1; } .awselect.placeholder_animate > .frame .value { opacity: 0; } .awselect.placeholder_animate2 .frame .placeholder { transform: translateY(0); opacity: 1; } .awselect.transition_paused { transition: none !important; } .awselect.animate > .expand_frame, .awselect.animating > .expand_frame { display: block; } .awselect:not(.expand) > .expand_background { transform: scaleY(0); } .awselect: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; -webkit-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); transform: scale(0.5); } .aw_cursor_pointer .inner { float: left; width: 100%; height: 0; background: #fff; border-radius: 100%; -webkit-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); } .aw_cursor_pointer.animate { transform: scale(1); } .aw_cursor_pointer.animate .inner { height: 100%; } .immersive_shadow { position: relative; float: left; } /*# sourceMappingURL=awselect.css.map */