Interactive CSS3 iPhone 6
Technologies: CSS3 HTML5 JQUERY LESS.JS + LESSHAT
Forked from Moreno Di Domenico's Pen Interactive CSS3 iPhone 6.
Forked from Moreno Di Domenico's Pen Interactive CSS3 iPhone 6.
A Pen by Captain Anonymous on CodePen.
Created
January 21, 2015 19:13
-
-
Save anonymous/7cccb64d54de7fb23063 to your computer and use it in GitHub Desktop.
Interactive CSS3 iPhone 6
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #scenario | |
| #switch | |
| a(href="#", data-color="white") WHITE | |
| a(href="#", data-color="black") BLACK | |
| #iphone-6 | |
| span.power | |
| span.volume-switch | |
| span.volume-plus | |
| span.volume-minus | |
| span.line-top | |
| span.line-bottom | |
| span.camera | |
| span.speaker | |
| span.home | |
| a(href="#") | |
| .screen | |
| .topbar | |
| .signal | |
| span.full | |
| span.full | |
| span.full | |
| span | |
| span | |
| | T-Mobile | |
| .time 00:00 | |
| .battery | |
| .loading | |
| img(src="http://res.cloudinary.com/themesholic/image/upload/v1420903061/apple-logo_fsnscf.png", alt="") | |
| .lock | |
| .blur | |
| .text Touch ID or Enter Passcode (1234) | |
| .pills | |
| span | |
| span | |
| span | |
| span | |
| .keyboard | |
| .number | |
| em 1 | |
| .number | |
| em 2 | |
| span DEF | |
| .number.last | |
| em 3 | |
| span DEF | |
| .number | |
| em 4 | |
| span GHI | |
| .number | |
| em 5 | |
| span JKL | |
| .number.last | |
| em 6 | |
| span MNO | |
| .number | |
| em 7 | |
| span PQRS | |
| .number | |
| em 8 | |
| span TUV | |
| .number.last | |
| em 9 | |
| span WXYZ | |
| .number.center | |
| em 0 | |
| .emergency Emergency | |
| .delete Delete | |
| .wallpaper(data-parallaxify-range-x="100", data-parallaxify-range-y="100") | |
| .dashboard | |
| .grid | |
| .app | |
| a(href="#") | |
| img(src="http://res.cloudinary.com/themesholic/image/upload/v1420903078/Contacts_cxxz7a.png", alt="") | |
| span.label Contacts | |
| .app | |
| a(href="#") | |
| img(src="http://res.cloudinary.com/themesholic/image/upload/v1420903078/Calendar_f1uqvh.png", alt="") | |
| span.label Contacts | |
| .app | |
| a(href="#") | |
| img(src="http://res.cloudinary.com/themesholic/image/upload/v1420903082/Photos_ncdjfm.png", alt="") | |
| span.label Photos | |
| .app.last | |
| a(href="#") | |
| img(src="http://res.cloudinary.com/themesholic/image/upload/v1420903078/Camera_umxrmx.png", alt="") | |
| span.label Camera | |
| .app | |
| a(href="#") | |
| img(src="http://res.cloudinary.com/themesholic/image/upload/v1420903084/Weather_xbr0gt.png", alt="") | |
| span.label Weather | |
| .app | |
| a(href="#") | |
| img(src="http://res.cloudinary.com/themesholic/image/upload/v1420903078/Clock_yzoftd.png", alt="") | |
| span.label Clock | |
| .app | |
| a(href="#") | |
| img(src="http://res.cloudinary.com/themesholic/image/upload/v1420903080/Maps_xhr2wu.png", alt="") | |
| span.label Maps | |
| .app.last | |
| a(href="#") | |
| img(src="http://res.cloudinary.com/themesholic/image/upload/v1420903083/Videos_oxaryk.png", alt="") | |
| span.label Videos | |
| .app | |
| a(href="#") | |
| img(src="http://res.cloudinary.com/themesholic/image/upload/v1420903081/Notes_dminu5.png", alt="") | |
| span.label Notes | |
| .app | |
| a(href="#") | |
| img(src="http://res.cloudinary.com/themesholic/image/upload/v1420903082/Reminders_hokpkq.png", alt="") | |
| span.label Reminders | |
| .app | |
| a(href="#") | |
| img(src="http://res.cloudinary.com/themesholic/image/upload/v1420903082/Stocks_q7gz1l.png", alt="") | |
| span.label Stocks | |
| .app.last | |
| a(href="#") | |
| img(src="http://res.cloudinary.com/themesholic/image/upload/v1420903079/Game-Center_vjssfs.png", alt="") | |
| span.label Game Center | |
| .app | |
| a(href="#") | |
| img(src="http://res.cloudinary.com/themesholic/image/upload/v1420903080/Newstand_d1peg9.png", alt="") | |
| span.label Newstand | |
| .app | |
| a(href="#") | |
| img(src="http://res.cloudinary.com/themesholic/image/upload/v1420903080/iTunes-Store_rvmevm.png", alt="") | |
| span.label Itunes Store | |
| .app | |
| a(href="#") | |
| img(src="http://res.cloudinary.com/themesholic/image/upload/v1420903078/AppStore_fwljbl.png", alt="") | |
| span.label App Store | |
| .app.last | |
| a(href="#") | |
| img(src="http://res.cloudinary.com/themesholic/image/upload/v1420903079/iBooks_bwkcrq.png", alt="") | |
| span.label iBooks | |
| .app | |
| a(href="#") | |
| img(src="http://res.cloudinary.com/themesholic/image/upload/v1420903079/Health_wzwtbc.png", alt="") | |
| span.label Health | |
| .app | |
| a(href="#") | |
| img(src="http://res.cloudinary.com/themesholic/image/upload/v1420903081/Passbook_dleh2h.png", alt="") | |
| span.label Passbook | |
| .app | |
| a(href="#") | |
| img(src="http://res.cloudinary.com/themesholic/image/upload/v1420903082/Settings_jv4gtd.png", alt="") | |
| span.label Settings | |
| .dock | |
| .blur | |
| .app | |
| a(href="#") | |
| img(src="http://res.cloudinary.com/themesholic/image/upload/v1420903081/Phone_amnrxu.png", alt="") | |
| span.label Phone | |
| .app | |
| a(href="#") | |
| img(src="http://res.cloudinary.com/themesholic/image/upload/v1420903080/Messages_yozkdi.png", alt="") | |
| span.label Messages | |
| .app | |
| a(href="#") | |
| img(src="http://res.cloudinary.com/themesholic/image/upload/v1420903082/Safari_cuf8cz.png", alt="") | |
| span.label Safari | |
| .app | |
| a(href="#") | |
| img(src="http://res.cloudinary.com/themesholic/image/upload/v1420903080/Mail_itxz5o.png", alt="") | |
| span.label Mail | |
| .overlay | |
| .alert | |
| .text | |
| strong Hiya! | |
| | It's just a demo :) | |
| a(href="#") Dismiss |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var IPHONE = window.IPHONE || {}; | |
| IPHONE.loading = function(){ | |
| setTimeout(function(){ | |
| $('.loading').fadeOut(200, function(){ | |
| IPHONE.init(); | |
| }); | |
| }, 3500); | |
| } | |
| IPHONE.controls = function(){ | |
| $('.app a, .home a').on('click', function(e){ | |
| e.preventDefault(); | |
| IPHONE.alert('show'); | |
| }); | |
| $('.alert a').on('click', function(e){ | |
| e.preventDefault(); | |
| IPHONE.alert('hide'); | |
| }); | |
| $('.power').on('click', function(e){ | |
| e.preventDefault(); | |
| $('.overlay').fadeOut(); | |
| $('.lock').fadeIn(); | |
| }); | |
| } | |
| IPHONE.alert = function( action ){ | |
| if(action === 'show'){ | |
| $('.overlay').fadeIn(200, function(){ | |
| $('.alert').addClass('pop'); | |
| }) | |
| } else { | |
| $('.overlay').fadeOut(200, function(){ | |
| $('.alert').removeClass('pop'); | |
| }); | |
| } | |
| } | |
| IPHONE.switch = function(){ | |
| $('#switch a').on('click', function(e){ | |
| e.preventDefault(); | |
| var $color = $(this).data('color'); | |
| $('#iphone-6').removeClass().addClass($color); | |
| }) | |
| } | |
| IPHONE.setTime = function(){ | |
| var $now = new Date(); | |
| var $hours = ($now.getHours() > 9) ? $now.getHours() : '0'+$now.getHours(); | |
| var $minutes = ($now.getMinutes() > 9) ? $now.getMinutes() : '0'+$now.getMinutes(); | |
| $('.time').text($hours + ':' + $minutes); | |
| } | |
| IPHONE.parallaxBG = function(){ | |
| $.parallaxify({ | |
| positionProperty: 'transform', | |
| responsive: true, | |
| motionType: 'natural', | |
| mouseMotionType: 'performance', | |
| motionAngleX: 70, | |
| motionAngleY: 70, | |
| alphaFilter: 0.5, | |
| adjustBasePosition: true, | |
| alphaPosition: 0.025, | |
| }); | |
| } | |
| IPHONE.pin = function(){ | |
| var $pin = 1234; | |
| var $input = ''; | |
| var $count = 0; | |
| $('.keyboard div').on('click', function(e){ | |
| e.preventDefault(); | |
| var $number = $(this); | |
| var $value = $number.find('em').text(); | |
| $input += $value; | |
| $('.keyboard div').removeClass('click'); | |
| $number.addClass('click').delay(200).queue(function(){ | |
| $(this).removeClass('click'); | |
| }); | |
| $('.pills').removeClass('error').find('span').eq($count).addClass('fill'); | |
| $count++; | |
| if($count === 4) | |
| checkPin($input); | |
| }); | |
| function checkPin($check){ | |
| $count = 0; | |
| $input = ''; | |
| $('.pills').find('span').removeClass('fill'); | |
| if($check == $pin){ | |
| $('.lock').fadeOut(200); | |
| } else { | |
| $('.pills').addClass('error'); | |
| } | |
| } | |
| } | |
| IPHONE.init = function(){ | |
| IPHONE.controls(); | |
| } | |
| $(window).load(function(){ | |
| IPHONE.loading(); | |
| IPHONE.switch(); | |
| IPHONE.setTime(); | |
| IPHONE.pin(); | |
| IPHONE.parallaxBG(); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import "lesshat.less"; | |
| @iphone_w: 375px; | |
| @iphone_h: 667px; | |
| body{ | |
| background: #fff; | |
| font-family: 'Helvetica Neue', sans-serif; | |
| line-height: 1; | |
| color: #fff; | |
| font-size: 12px; | |
| background: url('http://res.cloudinary.com/themesholic/image/upload/v1420905671/bg_gjcb7t.png') center; | |
| .background-size(cover); | |
| } | |
| #scenario{ | |
| text-align: center; | |
| padding: 90px 0 180px 0; | |
| } | |
| #switch{ | |
| position: relative; | |
| margin-bottom: 30px; | |
| a{ | |
| width: 120px; | |
| line-height: 42px; | |
| color: #111; | |
| background: #fff; | |
| display: inline-block; | |
| font-weight: bold; | |
| text-decoration: none; | |
| letter-spacing: 1px; | |
| margin: 0 5px; | |
| .border-radius(2px); | |
| &[data-color="black"]{ | |
| background: #111; | |
| color: #fff; | |
| } | |
| } | |
| } | |
| #iphone-6{ | |
| width: @iphone_w; | |
| height: @iphone_h; | |
| padding: 105px 24px; | |
| background: #d9dbdc; | |
| position: relative; | |
| display: inline-block; | |
| .border-radius(56px); | |
| .box-shadow(inset 0 0 3px 0 rgba(0, 0, 0, 0.2)); | |
| &:before{ | |
| content: ''; | |
| width: ~"calc(100% - 12px)"; | |
| height: ~"calc(100% - 12px)"; | |
| position: absolute; | |
| top: 6px; | |
| left: 6px; | |
| background: #f8f8f8; | |
| z-index: 1; | |
| .border-radius(50px); | |
| } | |
| .power{ | |
| position: absolute; | |
| right: -3px; | |
| width: 3px; | |
| height: 60px; | |
| background: #dcdcdc; | |
| top: 170px; | |
| cursor: pointer; | |
| .border-radius(0 2px 2px 0); | |
| } | |
| .volume-switch{ | |
| position: absolute; | |
| left: -3px; | |
| width: 3px; | |
| height: 30px; | |
| background: #dcdcdc; | |
| top: 110px; | |
| .border-radius(2px 0 0 2px); | |
| } | |
| .volume-plus, | |
| .volume-minus{ | |
| position: absolute; | |
| left: -3px; | |
| width: 3px; | |
| height: 60px; | |
| background: #dcdcdc; | |
| top: 170px; | |
| .border-radius(2px 0 0 2px); | |
| } | |
| .volume-minus{ | |
| top: 260px; | |
| } | |
| .line-top, | |
| .line-bottom{ | |
| position: absolute; | |
| width: 100%; | |
| height: 14px; | |
| background: rgba(0, 0, 0, 0.2); | |
| left: 0; | |
| top: 70px; | |
| } | |
| .line-bottom{ | |
| top: auto; | |
| bottom: 70px; | |
| } | |
| .camera{ | |
| position: absolute; | |
| top: 25px; | |
| left: 50%; | |
| width: 12px; | |
| height: 12px; | |
| display: inline-block; | |
| background: #333; | |
| z-index: 4; | |
| .border-radius(50%); | |
| .translateX(-50%); | |
| } | |
| .speaker{ | |
| position: absolute; | |
| top: 60px; | |
| left: 50%; | |
| width: 60px; | |
| height: 6px; | |
| display: inline-block; | |
| background: #333; | |
| z-index: 4; | |
| .border-radius(6px); | |
| .translateX(-50%); | |
| } | |
| .speaker:before{ | |
| content: ''; | |
| position: absolute; | |
| top: -5px; | |
| left: -30px; | |
| width: 15px; | |
| height: 15px; | |
| display: inline-block; | |
| background: #333; | |
| .border-radius(50%); | |
| } | |
| .home{ | |
| width: 64px; | |
| height: 64px; | |
| position: absolute; | |
| z-index: 4; | |
| bottom: 20px; | |
| left: 50%; | |
| .border-radius(50%); | |
| .translateX(-50%); | |
| background: #d7d7d7; | |
| background: linear-gradient(135deg, #d7d7d7 0%,#7a7a7a 100%); | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d7d7d7', endColorstr='#7a7a7a',GradientType=1 ); | |
| &:after{ | |
| content: ''; | |
| position: absolute; | |
| top: 3px; | |
| left: 3px; | |
| width: 58px; | |
| height: 58px; | |
| background: #fff; | |
| display: inline-block; | |
| .border-radius(50%); | |
| } | |
| a{ | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 2; | |
| } | |
| } | |
| .screen{ | |
| width: @iphone_w; | |
| height: @iphone_h; | |
| position: relative; | |
| z-index: 2; | |
| overflow: hidden; | |
| .box-shadow(0 0 0 3px #111); | |
| .border-radius(1px); | |
| .topbar{ | |
| width: 100%; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| z-index: 7; | |
| .signal{ | |
| position: absolute; | |
| left: 10px; | |
| top: 5px; | |
| line-height: 1; | |
| span{ | |
| width: 5px; | |
| height: 5px; | |
| border: 1px solid #fff; | |
| display: inline-block; | |
| margin: 0 2px 0 0; | |
| .border-radius(50%); | |
| } | |
| span.full{ | |
| background: #fff; | |
| } | |
| } | |
| .time{ | |
| position: absolute; | |
| width: 100%; | |
| text-align: center; | |
| top: 5px; | |
| } | |
| .battery{ | |
| position: absolute; | |
| right: 10px; | |
| top: 5px; | |
| width: 20px; | |
| height: 8px; | |
| border: 1px solid #fff; | |
| display: inline-block; | |
| .border-radius(2px); | |
| &:before{ | |
| content: ''; | |
| position: absolute; | |
| right: -3px; | |
| width: 3px; | |
| height: 4px; | |
| top: 2px; | |
| background: #fff; | |
| display: inline-block; | |
| .border-radius(0 1px 1px 0); | |
| } | |
| &:after{ | |
| content: ''; | |
| position: absolute; | |
| top: 1px; | |
| left: 1px; | |
| width: 7px; | |
| height: 6px; | |
| background: #fff; | |
| display: inline-block; | |
| } | |
| } | |
| } | |
| .loading{ | |
| background: #fff; | |
| z-index: 9; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| img{ | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 64px; | |
| height: 78px; | |
| .transform(translateX(-50%) translateY(-50%)); | |
| } | |
| } | |
| .wallpaper{ | |
| @bg_w: @iphone_w + 120; | |
| @bg_h: @iphone_h + 120; | |
| width: @bg_w; | |
| height: @bg_h; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| z-index: 1; | |
| background: url(http://res.cloudinary.com/themesholic/image/upload/v1420903986/wallpaper_xe4crd.jpg) center; | |
| .background-size(@bg_w @bg_h); | |
| margin-top: -@bg_h / 2; | |
| margin-left: -@bg_w / 2; | |
| } | |
| .dashboard{ | |
| z-index: 2; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| .grid{ | |
| position: absolute; | |
| top: 30px; | |
| display: block; | |
| margin: 0 30px; | |
| } | |
| .dock{ | |
| position: absolute; | |
| left: 0; | |
| bottom: 0; | |
| display: block; | |
| width: 100%; | |
| padding: 15px 30px; | |
| overflow: hidden; | |
| &:before{ | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: url(http://res.cloudinary.com/themesholic/image/upload/v1420903986/wallpaper_xe4crd.jpg) bottom center; | |
| .background-size(cover); | |
| @blur: 10px; | |
| .filter(blur(@blur), brightness(0.9), ~"saturate(90%)", ~"contrast(90%)"); | |
| } | |
| &:after{ | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(255, 255, 255, .3); | |
| } | |
| .app{ | |
| margin-bottom: 10px; | |
| } | |
| } | |
| .app{ | |
| width: 62px; | |
| height: 62px; | |
| display: inline-block; | |
| float: left; | |
| margin: 0 22px 26px 0; | |
| position: relative; | |
| z-index: 3; | |
| &.last{ | |
| margin-right: 0; | |
| } | |
| img{ | |
| width: 100%; | |
| margin: -5px 0 0 -5px; | |
| float: left; | |
| width: 72px; | |
| height: 72px; | |
| } | |
| .label{ | |
| width: 120%; | |
| text-align: center; | |
| position: absolute; | |
| font-size: 11px; | |
| bottom: -14px; | |
| left: -10%; | |
| } | |
| } | |
| } | |
| .lock{ | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 6; | |
| background: url(http://res.cloudinary.com/themesholic/image/upload/v1420903986/wallpaper_xe4crd.jpg) center; | |
| .background-size(cover); | |
| &:before{ | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: url(http://res.cloudinary.com/themesholic/image/upload/v1420903986/wallpaper_xe4crd.jpg) bottom center; | |
| @blur: 10px; | |
| .filter(blur(@blur), brightness(0.9), ~"saturate(90%)", ~"contrast(90%)"); | |
| .background-size(cover); | |
| } | |
| &:after{ | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(255, 255, 255, .05); | |
| } | |
| .text{ | |
| position: absolute; | |
| top: 90px; | |
| width: 100%; | |
| text-align: center; | |
| font-size: 16px; | |
| letter-spacing: 1px; | |
| font-weight: lighter; | |
| z-index: 2; | |
| } | |
| .pills{ | |
| position: absolute; | |
| width: 100%; | |
| top: 125px; | |
| z-index: 2; | |
| .animation-duration(.9s); | |
| .animation-fill-mode(both); | |
| span{ | |
| width: 8px; | |
| height: 8px; | |
| display: inline-block; | |
| margin: 0 10px; | |
| border: 1px solid #87bbf8; | |
| .border-radius(50%); | |
| .transition(.2s); | |
| } | |
| span.fill{ | |
| background: #87bbf8; | |
| } | |
| &.error{ | |
| .animation-name(shake); | |
| } | |
| .keyframes(~'shake, 0%,100%{ transform: translate3d(0,0,0)}10%,30%,50%,70%,90%{ transform: translate3d(-10px,0,0)}20%,40%,60%,80%{ transform: translate3d(10px,0,0)}'); | |
| } | |
| .keyboard{ | |
| position: absolute; | |
| display: block; | |
| top: 200px; | |
| margin: 0 40px; | |
| z-index: 2; | |
| .number{ | |
| width: 72px; | |
| height: 72px; | |
| border: 1px solid #87bbf8; | |
| float: left; | |
| margin: 0 35px 15px 0; | |
| cursor: pointer; | |
| position: relative; | |
| .border-radius(50%); | |
| .animation-duration(.4s); | |
| .animation-fill-mode(both); | |
| &.click{ | |
| .animation-name(click); | |
| .keyframes(~'click, 0%{ background: transparent;} 50%{background: #87bbf8} 100%{background: transparent}'); | |
| } | |
| &.last{ | |
| margin-right: 0; | |
| } | |
| &.center{ | |
| margin-right: 0; | |
| margin-left: 107px; | |
| em{ | |
| margin-top: 8px; | |
| } | |
| } | |
| em{ | |
| font-style: normal; | |
| font-size: 38px; | |
| font-weight: lighter; | |
| position: absolute; | |
| top: 10px; | |
| left: 50%; | |
| .translateX(-50%); | |
| } | |
| span{ | |
| position: absolute; | |
| width: 100%; | |
| text-align: center; | |
| left: 0; | |
| bottom: 10px; | |
| font-size: 9px; | |
| letter-spacing: 1px; | |
| font-weight: lighter; | |
| } | |
| } | |
| } | |
| .emergency, | |
| .delete{ | |
| position: absolute; | |
| left: 45px; | |
| bottom: 30px; | |
| font-size: 14px; | |
| font-weight: lighter; | |
| letter-spacing: 1px; | |
| z-index: 2; | |
| } | |
| .delete{ | |
| left: auto; | |
| right: 45px; | |
| } | |
| } | |
| .overlay{ | |
| position: absolute; | |
| z-index: 9; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.5); | |
| display: none; | |
| .alert{ | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| text-align: center; | |
| background: #fff; | |
| color: #111; | |
| padding: 15px 0; | |
| width: 220px; | |
| .border-radius(10px); | |
| .opacity(0); | |
| .transition(all .2s ease); | |
| .transform(translateX(-50%) translateY(-50%) scale(1.2)); | |
| &.pop{ | |
| .opacity(1); | |
| .transform(translateX(-50%) translateY(-50%)); | |
| } | |
| .text{ | |
| padding: 5px 5px 20px; | |
| margin-bottom: 15px; | |
| border-bottom: 1px solid #bebdb7; | |
| strong{ | |
| display: block; | |
| font-size: 14px; | |
| margin-bottom: 5px; | |
| } | |
| } | |
| a{ | |
| color: #0085FF; | |
| text-decoration: none; | |
| font-weight: bold; | |
| } | |
| } | |
| } | |
| } | |
| &.black{ | |
| background: #4f4f4f; | |
| &:before, | |
| .home:after{ | |
| background: #0b0b0b; | |
| } | |
| .power, | |
| .volume-switch, | |
| .volume-plus, | |
| .volume-minus{ | |
| background: #333; | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment