Skip to content

Instantly share code, notes, and snippets.

@paulruescher
Created February 10, 2013 20:40
Show Gist options
  • Save paulruescher/4750980 to your computer and use it in GitHub Desktop.
Save paulruescher/4750980 to your computer and use it in GitHub Desktop.
Some SCSS that I'm using for setting up a circle class
$white : #FFF;
$off-white : #F7F7F7;
$light-grey : #EAEAEA;
$grey : #CCCCCC;
$darker-grey : #828282;
$dark-grey : #424242;
$off-black : #222;
$black : #000;
$light-blue : #45C6F0;
$dark-blue : #0057C2;
.circle {
background: white;
border: 4px solid $darker-grey;
border-radius: 100px;
color: $darker-grey;
display: block;
margin-left: auto;
margin-right: auto;
overflow: hidden;
position: relative;
text-align: center;
height: 128px;
width: 128px;
@include transition(all .3s ease);
.icon {
line-height: 120px;
}
&.small {
border-width: 3px;
height: 64px;
width: 64px;
.icon {
line-height: 58px;
}
}
&.large {
height: 192px;
width: 192px;
.icon {
font-size: 98px;
line-height: 184px;
}
}
&:hover {
background: $light-blue;
color: $white;
}
&.hidden {
.icon {
color: $white;
border-radius: 100px;
opacity: 0;
text-shadow: #000;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
height: 184px;
width: 184px;
position: absolute;
top: 0;
left: 0;
z-index: 999;
@include transition(all .3s ease);
}
&:hover {
background: $white;
.icon {
opacity: 1;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment