Skip to content

Instantly share code, notes, and snippets.

@lukaszkorecki
Created May 3, 2010 22:16
Show Gist options
  • Save lukaszkorecki/388651 to your computer and use it in GitHub Desktop.
Save lukaszkorecki/388651 to your computer and use it in GitHub Desktop.
.toolbar
%button
touch me
.toolbar
.button_group
%button.left
elo
%button.inner
in
%button.inner
in
%button.right
alo
/* BUTTONS BUTTONS BUTTONS
unfortunatelly I didn't invent these
I allowed myself to copy the button styles
for normal and active state from: http://general-metrics.com/Safari/
I've added pressed state - but at this stage it's just a rough estimate on how it might look like :-)
*/
.toolbar
button
-webkit-box-shadow: rgba(225, 225, 225, 0.695312) 0px 1px 0px
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FDFDFD), to(darkGray))
border: 1px solid #3D3D3D
height: 20px
//position: absolute
-webkit-border-radius: 5px
button:active
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.7)), color-stop(0.2, rgba(0, 0, 0, 0.1)), color-stop(0.75, rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.3))), -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.4)), color-stop(0.2, rgba(0, 0, 0, 0.2)), color-stop(0.8, rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.5))), -webkit-gradient(linear, left top, left bottom, from(rgb(253, 253, 253)), to(rgb(169, 169, 169)))
-webkit-user-drag: none
button.pressed
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.7)), color-stop(0.2, rgba(0, 0, 0, 0.1)), color-stop(0.75, rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.3))), -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.4)), color-stop(0.2, rgba(0, 0, 0, 0.2)), color-stop(0.8, rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.5))), -webkit-gradient(linear, left top, left bottom, from(rgb(253, 253, 253)), to(rgb(69, 69, 69)))
.button_group
button
margin-left: -7px
.right
-webkit-border-top-left-radius: 0
-webkit-border-bottom-left-radius: 0
.left
-webkit-border-top-right-radius: 0
-webkit-border-bottom-right-radius: 0
.inner
-webkit-border-radius: 0px
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment