.account
ul
li.ripple Sign Out
li.ripple Switch account
li.ripple Send feedback
li.ripple Help
.side-menu
.menu-holder
button(type='menu').menu
p Google Play
span Music
ul
li Listen Now
li Top Charts
li New Releases
li.active Music Library
li Podcasts
li Browse Stations
li Shop
- for(var x = 1;x <= 10;x++)
li Lorem Ipsum...
button(type='button').cta Subscribe Now
.side-menu-overlay
header
button(type='menu').menu.ripple
h1 Music library
input(id="input" type='text' placeholder='Search').desktop-only
label(for='input').mobile-only.ripple
.profile
ul
li.ripple Playlists
li.ripple Stations
li.ripple Artists
li.ripple.active Albums
li.ripple Songs
li.ripple Genres
.slider
main
- for(var x = 1;x <= 34;x++)
.card.ripple
- for(var x = 1;x <= 12;x++)
.card.ghost// RESIZE THE WINDOW TO SEE THE MOBILE VIEW
$white: #FFF;
$black: #000;
$brand: #FF5722;
$brandContrast: #536DFE;
$text: #212121;
$background: #F5F5F5;
$font-stack: 'Roboto',
'Helvetica',
'sans-serif';
$profile: 'https://lh3.googleusercontent.com/-UOuFk3MaIyE/AAAAAAAAAAI/AAAAAAAAAAA/AOtt-yEtASpZiUmh0TBq1JxqceBZswmVVg/s32-c-mo/photo.jpg';
$cards: url(https://lh3.googleusercontent.com/f9fTwo3eV8nwjrjGtp52cOdjtfImjnSG-AmaLqmhx74G1hRD-40HtLZJ7Zt-Ig6ZZX4QYcr8hQ) url(https://lh3.googleusercontent.com/X9_1hqQ64YB2nUj8DaQ8Cq0gfTxV-8M5olNz4KZeBRyuP_xARFGq_txPoZ036JHb3zmtBNjYyw) url(https://lh3.googleusercontent.com/EReUo1F8zEmcs-zBgFVq1HqGdND8eLEMXbyFSDKTS5GD3T9pprprFbXsOJSaUXFo_L8b8w6xmKE) url(https://lh3.googleusercontent.com/ngZFFNzbUYWxfBBieWVbe1s2zqLbppu-cUA8tjWCztqlWtfFm3sHXymOchrJi2rfGVORBfSBlVs) url(https://lh3.googleusercontent.com/fUgD06Kz-yTZl-9UnTxBks6dOLwdp3tTEEhvYrT9WtN9Jaf25TklMTfNXFUSWXiz04PBdiKHoA) url(https://lh3.googleusercontent.com/ImqVw-h_GF1R26AjTr8kPwXH5cK8gYk5fFZJ6p7hFD17Cpd-BsiZudWWS-aVU2ws3wU5DiQZxg) url(https://lh3.googleusercontent.com/Vdf53IqQIkNUvq4I7B1FamSywJSjckktikYlCf1YgZb2sy9cMc8sZeBV6pbYIiyJj3iqcg5EWw) url(https://lh3.googleusercontent.com/PONxOYTAVFLbcjN41cNGN_BI6bCFFHNjOSzmCcOMrEsvqjfqR8akF4J0riKQIl89BqBWkHJThg) url(https://lh3.googleusercontent.com/3chpS1Utl_rH49pwob25TQiiafz8yFg8NMb2KWTU4PFhT7ip0wzq-YM4EuNRgClMXGdno-jAj18) url(https://lh3.googleusercontent.com/NuxebnbEsrFnHzihs_7_BPkzu-cGy1KBUqew51Srj0hqHkbuQVfB95o21kg5y2ZRD1AYF_nD) url(https://lh3.googleusercontent.com/oOBpMMGjy6DvWCs7ouK8e3gY8-UhHqvEZy5k6o49uTgjn2Xdxf_y8sBj-ey1WxNorA5yqvYFhw) url(https://lh3.googleusercontent.com/YIrKm7ypJgjquG9bPCpEUcYpGScuoIZ5J5fiqlU5VK5Ko6NamWCnyaH0ydo21Wx63q0L-6C0) url(https://lh3.googleusercontent.com/egm4NgIK-Cmh84GjVgHoATP6DYyCS0_zMvJ8DStQ_io6TPb75NKWtbIBaWPkOJ570-7ra7UKwPw) url(https://lh3.googleusercontent.com/kLRVb3qkSFvnd29cYLZWX47kXTVqVrv2rEO7j9Ogl27vwZwZKGsTnPVN-sit46tWq6i19Ri_PEc) url(https://lh3.googleusercontent.com/CZRaaeCItNnBbKLcos4zEO4EpTpxDRtPldLJ3waQB6wkz36eaIRBJh58VHeOXIj1wx--RMT5) url(https://lh3.googleusercontent.com/DGW6KDjPbsjfOmc2r-9oNfwPwvP3NB-AUv19UPzu5zGs27XEeK-q50lh0i0C1YllpAERaQNF) url(https://lh3.googleusercontent.com/YNyTvjNR26p_tgfkTEHnxj-z1SsdeP44vNzAkJ3eGgSKlQJjCs-lIEmYMv7_B1sxhp2HtpCuwog) url(https://lh3.googleusercontent.com/XKAtazwLKNM6u0--WGkZNBV6uOKZTLaZp0TV8XkIBTz0jNccHl8xOYkftW4s8PrtDlxqDmlrZmI) url(https://lh3.googleusercontent.com/LMKahLP_T6kr88DtYnpFK7IkJArbsuZNAZo6xd4WvVDBMhwXxATBUYfX6wWUYvzYwHWwxFU9Sw) url(https://lh3.googleusercontent.com/DbxZFMU64VjJdHPXFIN-ESMOUl4nmJr488scL6MftIAw2__MCPT_6R_xQnwlVNl0R2eL1__q2_Q) url(https://lh3.googleusercontent.com/uASJMQyWGjpbZ8yb6Is-8odp5oOGlfsrlB1hL5IhIfZTpz7g3yrz56X_NEmuKRKsAkXkTixMdw) url(https://lh3.googleusercontent.com/Cd8WRMaG_pDwjTC_dSPIIuf5EJEHUwPOLDreeXPx8wEZgZIZ7yhKBUBeTKsDCMcmJHgW0w7a5Q) url(https://lh3.googleusercontent.com/TFsXkyvcwPtlcBYmyl7Mae8C7DjKbsbSmr4rgIotGPyY-m56SLwC-3qZGPZGpNzETZHhxVqJ) url(https://lh3.googleusercontent.com/3MgcwzgSJ32oIbxgquneCvu3oJKVC6Pae-Saho7jfbCcRoA6KlU7qn8EUsqaTT6dsy5jbNuJ) url(https://lh3.googleusercontent.com/BbYJotljs9GKwGiepqF8nmYDQXPCr2hE0c3RmEN7SDJdtEnXVYLJb6XX0wjC9n1Plq-0VChaWWA) url(https://lh3.googleusercontent.com/JP1KT3xUA-MFA8tLRHC3CvX6nphBYLpCzxB6eIthMYXvF0dXX7I7NITpBT0E3B07CiqRzCqkPQ) url(https://lh3.googleusercontent.com/IreFr66xedOo8t8IPGfAoo2BsTZl3ZslJKQFVIePoVitbFOZgIZhvFKMrCuWoWXi2n2zjTxp) url(https://lh3.googleusercontent.com/1LASHQy0shPSJDGINtkZU6Tb6N1IJOL-GzaUEvOEM0zncK_0JvqZrC-YFvGmPBQEpLanHrft8g) url(https://lh3.googleusercontent.com/FGek_ecdpTCLFbprT7rpADyclgFOgytCXz8z29qT1NpndYfHGfBbJAtwu5TpHtD3u6tB7tHCXA) url(https://lh3.googleusercontent.com/iZ4R5KkC2FSarH6J5nr6FvjmEphjckn0jV1fYLCi3L0Mmr2cUHpDHd5m7gokYKCISxOXDXPLvA) url(https://lh3.googleusercontent.com/s0o3GbvRKoEA3hBKTooThA45XtL7WpcuZ6SOYHB54vhu-Nj6TYDgiakW20O4VPwRcsjzOVsI2g) url(https://lh3.googleusercontent.com/daoWdc25TW5w3DR-GaFuU7KKnQxXgYuP9BIShuOExSfs0Hj_83ahdOq2o3S09TVMq9uHKtZ-tsU) url(https://lh3.googleusercontent.com/E4yy2RMMtXGxVCOW7mhRpyNW3FLnSuMQziDXNgsBfDSQMxRUY8rKr4phBL29Sbx1lBKzTwLbHQ) url(https://lh3.googleusercontent.com/Usv4XpVgsaxemkOG-Na0ba8b2Mqd7houicvj1jY7l6HMOb8uuE_EPLPpzjIDUvNbAa1xD7F9GQ);
@mixin size($width, $height: $width) {
width: $width;
height: $height;
}
// RESET
*,
:before,
:after {
box-sizing: border-box;
margin: 0;
padding: 0;
-webkit-tap-highlight-color: rgba($black, 0);
}
// GENERAL
body {
background: $background;
font-family: $font-stack;
}
header,
main {
display: flex;
flex-wrap: wrap;
width: 100%;
min-width: 300px;
top: 0;
right: 0;
will-change: width;
transform: translateZ(0);
transition: .3s;
}
button,
input {
background: transparent;
border: none;
outline: none;
font-family: $font-stack;
-webkit-appearance: none;
}
.menu {
@include size(40px);
border-radius: 50%;
margin: 12px;
cursor: pointer;
transition: background-color .2s;
}
.mobile-only {
display: none;
}
.ripple {
overflow: hidden;
position: relative;
-webkit-transform: translateZ(0);
.rippling {
position: absolute;
border-radius: 50%;
background-color: #FFF;
pointer-events: none;
opacity: .4;
transform: translate3d(-50%, -50%, 0);
}
}
// HEADER
header {
align-items: center;
background: $brand;
color: $white;
position: fixed;
z-index: 5;
&.shadow {
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);
}
.menu {
background: url(https://cbwconline.com/IMG/Codepen/Menu.svg) center no-repeat;
&:hover {
background-color: darken($brand, 8%);
}
}
h1 {
font-weight: 400;
font-size: 20px;
}
input {
background: rgba($white, .3);
width: 50vw;
max-width: 800px;
height: 48px;
padding: 12px;
border-radius: 3px;
margin: 5px auto;
color: $white;
transition: .3s, width .01s;
&:focus,
&:active {
background: $white;
color: $black;
box-shadow: 0 8px 10px 1px rgba($black, .1);
}
}
label {
@include size(36px);
background: url(https://cbwconline.com/IMG/Codepen/Search-White.svg) center no-repeat;
border-radius: 50%;
&.close {
background: url(https://cbwconline.com/IMG/Codepen/Close-White.svg) center no-repeat;
}
}
label {
margin-left: auto;
}
.profile {
@include size(36px);
background: url($profile) center/contain no-repeat;
border-radius: 50%;
margin: 0 15px;
}
ul {
display: flex;
width: 100%;
position: relative;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
li {
flex-shrink: 0;
list-style: none;
padding: 15px;
color: rgba($white, .8);
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
user-select: none;
cursor: pointer;
&.active {
color: $white;
}
}
.slider {
height: 3px;
background: $white;
position: absolute;
bottom: 0;
left: 0;
transition: .3s;
}
}
// MAIN
main {
justify-content: center;
position: absolute;
}
// CARDS
.card {
@for $i from 1 through length($cards) {
&:nth-child(#{$i}) {
background-image: nth($cards, $i);
}
}
background-size: contain;
box-shadow: 0 1px 4px 0 rgba($black, .35);
flex: 1 1 180px;
margin: 10px;
position: relative;
transition: box-shadow .2s;
cursor: pointer;
&:hover {
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2),0 6px 10px 0 rgba(0,0,0,0.3);
}
&:after {
content: 'Lorem Ipsum...';
background: #FFF;
height: 56px;
width: 100%;
padding: 10px;
position: absolute;
bottom: 0;
left: 0;
}
&.ghost {
height: 0 !important;
margin: 0 10px;
&:after {
display: none;
}
}
}
// MENU
.side-menu {
justify-content: center;
flex-wrap: wrap;
background: $white;
height: 100%;
width: 225px;
position: fixed;
top: 0;
left: 0;
z-index: 10;
transform: translateX(-100%) translateZ(0);
transition: .3s;
overflow-y: auto;
will-change: transform;
-webkit-overflow-scrolling: touch;
&.active {
transform: translateX(0) translateZ(0);
~ header .menu {
width: 0px;
margin: 12px 8px;
}
}
.menu-holder {
display: flex;
align-items: center;
span {
color: $brand;
}
}
.menu {
background: url(https://cbwconline.com/IMG/Codepen/Menu-Black.svg) center no-repeat;
&:hover {
background-color: #EEE;
}
}
li {
list-style: none;
color: $text;
font-size: 13px;
font-weight: 500;
padding: 10px 0 10px 18px;
cursor: pointer;
white-space: nowrap;
line-height: 24px;
transition: .2s;
&:hover {
background: #EEE;
}
&.active {
color: $brand;
background: $background;
}
}
.cta {
display: block;
background: $brandContrast;
color: $white;
font-size: 16px;
text-transform: uppercase;
padding: 5px 8px;
border-radius: 3px;
cursor: pointer;
margin: 20px auto;
}
}
// OVERLAY
.side-menu-overlay {
height: 100%;
width: 100%;
background: rgba($black, .3);
position: fixed;
top: 0;
left: 0;
z-index: 9;
visibility: hidden;
opacity: 0;
transition: .3s;
}
// aCCOUNT ACTIONS
.account {
background: #EEE;
position: fixed;
top: 62px;
right: 15px;
z-index: 6;
opacity: 0;
visibility: hidden;
transform: scale(.5);
transform-origin: top right;
transition: .15s;
box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
&:after {
content: '';
@include size(15px);
background: inherit;
position: absolute;
top: -6px;
right: 8px;
opacity: 0;
visibility: hidden;
transform: rotate(45deg) scale(.5);
transition: .15s;
}
&.active {
&:after {
opacity: 1;
visibility: visible;
transform: rotate(45deg) scale(1)
}
opacity: 1;
visibility: visible;
transform: scale(1);
}
li {
padding: 12px 16px;
list-style: none;
font: 300 16px Roboto;
cursor: pointer;
transition: .3s;
&:hover {
background: darken(#EEE, 5%);
}
}
}
// PLACEHOLDERS
::-webkit-input-placeholder {
color: rgba($white, .7);
font-size: 16px;
}
::-moz-placeholder {
color: rgba($white, .7);
font-size: 16px;
}
:-ms-input-placeholder {
color: rgba($white, .7);
font-size: 16px;
}
// MEDIA QUERIES
@media (max-width: 1000px) {
.side-menu.active ~ header input {
width: calc(50vw - 100px);
}
}
@media (max-width: 767px) {
.side-menu.active {
~ header .menu {
margin: 12px;
width: 40px;
}
~ header,
~ main {
width: 100% !important;
}
~ header input {
width: 50vw;
}
~ .side-menu-overlay {
visibility: visible;
opacity: 1;
}
}
.card {
flex-basis: 165px;
}
}
@media (max-width: 599px) {
.desktop-only {
display: none;
}
.mobile-only {
display: inherit;
}
.profile {
margin: 16px !important;
}
header input {
display: none;
padding: 0px 12px;
font: 400 16px/18px Roboto !important;
width: calc(100vw - 130px);
}
.mobile-input {
header h1,
header .menu {
display: none;
}
input {
display: initial;
}
}
}
@media(max-width: 480px) {
.card {
flex-basis: 140px;
}
}
// IOS STUFF
.ios * {
cursor: pointer;
}function tabSlider() {
var $li1 = $('header li:nth-child(1)').outerWidth(),
$li2 = $('header li:nth-child(2)').outerWidth(),
$li3 = $('header li:nth-child(3)').outerWidth(),
$li4 = $('header li:nth-child(4)').outerWidth(),
$li5 = $('header li:nth-child(5)').outerWidth(),
$li6 = $('header li:nth-child(6)').outerWidth();
if ($('header li:nth-child(1)').hasClass('active')) {
$('.slider').css({
'transform': 'translate(0, 0)',
'width': $li1
});
} else if ($('header li:nth-child(2)').hasClass('active')) {
$('.slider').css({
'transform': 'translate(' + $li1 + 'px, 0)',
'width': $li2
});
} else if ($('header li:nth-child(3)').hasClass('active')) {
$('.slider').css({
'transform': 'translate(' + ($li1 + $li2) + 'px, 0)',
'width': $li3
});
} else if ($('header li:nth-child(4)').hasClass('active')) {
$('.slider').css({
'transform': 'translate(' + ($li1 + $li2 + $li3) + 'px, 0)',
'width': $li4
});
} else if ($('header li:nth-child(5)').hasClass('active')) {
$('.slider').css({
'transform': 'translate(' + ($li1 + $li2 + $li3 + $li4) + 'px, 0)',
'width': $li5
});
} else if ($('header li:nth-child(6)').hasClass('active')) {
$('.slider').css({
'transform': 'translate(' + ($li1 + $li2 + $li3 + $li4 + $li5) + 'px, 0)',
'width': $li6
});
}
};
function cardHeight() {
$('.card').each(function() {
$(this).height($(this).width() + 56);
});
};
function headerPadding() {
var $headerHeight = $('header').outerHeight();
$('main').css('padding-top', $headerHeight);
};
$(function() {
"use strict";
tabSlider();
cardHeight();
// TABS
$('header li').on('click', function() {
$('header li').removeClass('active');
$(this).addClass('active');
tabSlider();
});
// CARD HEIGHT & 'MAIN' PADDING
$(window, 'main').resize(function() {
cardHeight();
headerPadding();
}).resize();
// HEADER SHADOW
$(window).scroll(function() {
if ($(this).scrollTop() >= 10) {
$("header").addClass("shadow");
} else {
$("header").removeClass("shadow");
}
});
// MENU
$('.menu, .side-menu-overlay').on('click', function() {
var $sidebarWidth = $('.side-menu').width();
$('.side-menu').toggleClass('active');
if ($('.side-menu').hasClass('active')) {
$('header, main').css('width', 'calc(100% - ' + $sidebarWidth + 'px)');
} else {
$('header, main').css('width', '100%');
}
});
// PROFILE MENU
$('.profile').on('click', function() {
$('.account').toggleClass('active');
});
$(document).on("click", function(e) {
if (($(".account").hasClass("active")) && (!$(".account, .account *, .profile").is(e.target))) {
$(".account").toggleClass("active");
}
});
$(window).scroll(function() {
$('.account').removeClass('active');
});
// MOBILE SEARCH BUTTON
$('label.mobile-only').on('click', function() {
$(this).toggleClass('close');
$('body').toggleClass('mobile-input');
})
// RIPPLE
// CODE FROM HENDRY SADRAK'S PEN - https://codepen.io/hendrysadrak/pen/yNKZWO
$(document).on('click', '.ripple', function(e) {
var $ripple = $('<span class="rippling" />'),
$button = $(this),
btnOffset = $button.offset(),
xPos = e.pageX - btnOffset.left,
yPos = e.pageY - btnOffset.top,
size = 0,
animateSize = parseInt(Math.max($button.width(), $button.height()) * Math.PI);
$ripple.css({
top: yPos,
left: xPos,
width: size,
height: size,
backgroundColor: $button.attr("ripple-color"),
opacity: $button.attr("ripple-opacity")
})
.appendTo($button)
.animate({
width: animateSize,
height: animateSize,
opacity: 0
}, 500, function() {
$(this).remove();
});
});
// IOS STUFF
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
$('body').addClass('ios');
}
});
External CSS
This Pen doesn't use any external CSS resources.