//- Daily UI #009 Music Player
.music-box
	.album
		.photo
		.infos
			.song
				span Flamingo
				small Oliver Heldens
	.dashboard
		.list
			.list-btn: span
		.player
			.time
				small.current 0:56
				|  / 
				small.duration 3:04
			.time-rail
				.thumb
				.track
		.action-button
			a.random: i.fa.fa-random
			a.prev: i.fa.fa-step-backward
			a.play-pause: i.fa.fa-pause
			a.stop: i.fa.fa-stop
			a.next: i.fa.fa-step-forward
			a.repeat: i.fa.fa-repeat
			a.volume: i.fa.fa-volume-up
	.lists
		.label MENU
		.box
		ul
			- for(var i = 0; i < 10; i++)
				li
					span Flamingo
						small Oliver Heldens
					em 3:04
View Compiled
@import 'https://fonts.googleapis.com/css?family=Open+Sans'
$color: (main: #463239, accent: #ffba49, light: #c6ad94)
=bdrs($bdrs)
	border-radius: $bdrs
=size($w, $h)
	width: $w
	height: $h
*
	outline: none
	user-select: none
body, html
	margin: 0
	background: #ddd
body
	font-family: 'Open Sans', 'Microsoft JhengHei', Arial, sans-serif

.music-box
	position: absolute
	top: 50%
	left: 50%
	transform: translate(-50%,-50%)
	padding: 15px
	+size(364px, initial)
	background-color: map-get($color, main)
	box-shadow: 0 0 15px #535353
	+bdrs(3px)
	overflow: hidden
	.album
		position: relative
		.photo
			background: url('https://images.unsplash.com/photo-1533475184589-ad2b25374b56?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80') no-repeat 100% 100%
			background-size: cover
			+size(100%, 300px)
		.infos
			background-color: rgba(map-get($color, main), .3)
			+size(100%, 60px)
			position: absolute
			bottom: 0
			.song
				padding: 10px
				color: map-get($color, light)
				letter-spacing: .5px
				span, small
					display: block
	.dashboard
		margin-top: 15px
		.list
			position: relative
			transition-duration: .3s
			background-color: #eee
			right: 0
			.list-btn
				z-index: 2
				background-color: map-get($color, accent)
				+size(44px, 44px)
				position: absolute
				right: 5px
				top: -44px
				cursor: pointer
				transition-duration: .3s
				transition-delay: .9s
				span
					top: 50%
					left: 50%
					transform: translate(-50%, -50%)
					display: block
					+size(28px, 1px)
					background-color: map-get($color, main)
					position: relative
					transition: width .3s .3s, background-color .3s .6s
					transition-timing-function: linear
					&::before, &::after
						background-color: map-get($color, main)
						content: ""
						+size(28px, 1px)
						position: absolute
						left: 0
						top: 0
						transition-timing-function: linear
						transition: width .3s .3s, margin .3s .6s, transform .3s .3s
					&::before
						margin-top: 6px
					&::after
						margin-top: -6px
			&.active
				.list-btn
					top: -322px
					transition: top .3s .6s
					span
						background-color: transparent
						width: 34px
						transition: width .3s, background-color .3s
						&::before, &::after
							margin: 0
							width: 34px
							transition: width .3s, margin .3s, transform .3s .3s
						&::before
							transform: rotate(225deg)
						&::after
							transform: rotate(315deg)
		.player
			.time
				color: map-get($color, light)
			.time-rail
				height: 1px
				position: relative
				padding: 15px 0
				overflow: hidden
				.thumb, .track
					position: absolute
					top: 50%
					transform: translateY(-50%)
					cursor: pointer
				.thumb
					+size(10px, 10px)
					+bdrs(50%)
					background-color: map-get($color, accent)
					z-index: 1
					left: 30%
					transition: .3s
					&:hover
						transform: translateY(-50%) scale(1.2)
					&::before
						content: ''
						+size(500px, 1px)
						background-color: map-get($color, accent)
						position: absolute
						top: 50%
						transform: translateY(-50%)
						right: 0
				.track
					top: 50%
					+size(100%, 1px)
					background-color: map-get($color, light)
				input[type="range"]
					width: 100%
					-webkit-appearance: none
					overflow: hidden
					background: none
					&::-webkit-slider-thumb
						-webkit-appearance: none
						position: relative
						+size(10px, 10px)
						+bdrs(50%)
						background-color: map-get($color, accent)
		.action-button
			text-align: center
			a
				cursor: pointer
				display: inline-block
				+size(44px, 44px)
				margin: 3px
				line-height: 44px
				color: map-get($color, light)
				transition-duration: .3s
				&:hover
					color: map-get($color, accent)
					&.play-pause
						border-color: map-get($color, accent)
				&.play-pause
					+bdrs(50%)
					border: 1px solid map-get($color, light)
					font-size: 1.5em
					+size(54px, 54px)
					line-height: 54px
					&.active
						border-color: map-get($color, accent)
						i::before
							content: "\f04b"
							margin-left: 5px
				&.active
					color: map-get($color, accent)
		
	.lists
		z-index: 1
		position: absolute
		+size(100%, 100%)
		top: 0
		left: 0
		background-color: map-get($color, main)
		transform: translateX(-100%)
		transition: .3s 0s
		&.active
			transform: translateX(0)
			transition: .3s .9s
		.label
			font-size: 2em
			padding: 8px 15px
			height: 60px
			box-sizing: border-box
			color: map-get($color, accent)
		ul
			padding-left: 0
			margin: 0
			list-style-type: none
			+size(100%, calc(100% - 60px))
			position: absolute
			overflow-y: auto
			background-color: map-get($color, light)
			&::-webkit-scrollbar
				width: 6px
				background-color: transparent
			&::-webkit-scrollbar-track
				background-color: map-get($color, main)
			&::-webkit-scrollbar-thumb
				background-color: map-get($color, accent)
				+bdrs(3px)
			li
				cursor: pointer
				padding: 5px 15px
				transition-duration: .3s
				span, em
					display: inline-block
				span
					small
						display: block
				em
					float: right
					top: 0
					font-style: normal
					font-size: 12px
					margin-top: 12px
				&:nth-of-type(odd)
					background-color: rgba(map-get($color, main), .1)
				&:hover
					background-color: rgba(map-get($color, main), .3)
View Compiled
$(".list-btn").click ->
	$(this).parent().toggleClass "active"
	$(".lists").toggleClass "active"
$(".action-button").find('a').click ->
	if $(this).hasClass("random") || $(this).hasClass("play-pause") || $(this).hasClass("repeat")
		$(this).toggleClass "active"
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js