Pretty boring, but intended to go with cdpn.io/xoirg and cdpn.io/xeaBz. More coming soon!
A Pen by Riley Shaw on CodePen.
#vcent | |
h1 Who are you? | |
input type="text" name="flat" placeholder="First name" | |
input type="text" name="flat" placeholder="Last name" | |
input type="text" name="flat" placeholder="Rap name" |
Pretty boring, but intended to go with cdpn.io/xoirg and cdpn.io/xeaBz. More coming soon!
A Pen by Riley Shaw on CodePen.
@import "compass" | |
$colors: #2980b9 #8e44ad #7f8c8d #c0392b #16a085 #f39c12 | |
$h1height: 108px | |
$buttonsize: 230px | |
$pressdepth: 12px | |
$bg: nth($colors, random(length($colors)) + 1) | |
// Override the random color for now | |
$bg: #2980b9 | |
* | |
box-sizing: border-box | |
html, body | |
height: 100% | |
body | |
margin: 0 | |
padding: 0 | |
background: $bg | |
h1 | |
height: $h1height | |
font: bold 36px/#{$h1height} sans-serif | |
text-transform: uppercase | |
color: scale-lightness($bg, -35%) | |
#vcent | |
$vcentheight: $h1height * 2 + $buttonsize / 4 | |
$vcentwidth: $buttonsize * 3 + 2 * $buttonsize * 2/5 | |
position: absolute | |
top: 50% | |
left: 50% | |
height: $vcentheight | |
width: $vcentwidth | |
margin: -$vcentheight/2 0 0 #{-$vcentwidth/2} | |
text-align: center | |
input | |
position: absolute | |
height: $buttonsize / 4 | |
width: $buttonsize + $pressdepth | |
border: 0 | |
border-right: $pressdepth solid scale-lightness($bg, 10%) | |
outline: 0 | |
font: bold 24px / #{$buttonsize / 4 + 2px} sans-serif | |
text-align: center | |
text-transform: uppercase | |
color: scale-lightness($bg, -45%) | |
background: scale-lightness($bg, -10%) | |
@for $i from 0 through 2 | |
&:nth-child(#{$i + 2}) | |
left: $i * $buttonsize*7/5 | |
&::-webkit-input-placeholder | |
color: scale-lightness($bg, -25%) | |
&:-moz-placeholder | |
color: scale-lightness($bg, -25%) | |
&::-moz-placeholder | |
color: scale-lightness($bg, -25%) | |
&:-ms-input-placeholder | |
color: scale-lightness($bg, -25%) |