125 lines
2.3 KiB
SCSS
125 lines
2.3 KiB
SCSS
.hover-card {
|
|
position: relative;
|
|
display: block;
|
|
cursor: pointer;
|
|
box-shadow: 0px 2px 2px rgba($coal, 0.24), 0px 0px 2px rgba($coal, 0.12);
|
|
border-radius: 2px;
|
|
background: $snow;
|
|
transition: all .3s;
|
|
padding: ($unit * 2) - 1;
|
|
margin: 0px 0px ($unit * 2) 0px;
|
|
border: $snow solid 1px;
|
|
text-decoration: none;
|
|
|
|
@media handheld and (max-width: $phone-breakpoint),
|
|
screen and (max-device-width: $phone-breakpoint),
|
|
screen and (max-width: $tablet-breakpoint) {
|
|
margin: ($unit * 2) 0px;
|
|
display: block;
|
|
}
|
|
|
|
/*
|
|
* Hover Transitions
|
|
*
|
|
*/
|
|
|
|
&:hover {
|
|
transform: translate3d(0,-2px,0);
|
|
box-shadow: 0px 4px 4px rgba($coal, 0.24), 0px 0px 4px rgba($coal, 0.12), 0px 6px 18px rgba($blueberry, 0.12);
|
|
border: rgba($blueberry, 0.56) solid 1px;
|
|
|
|
.hover-card-icon {
|
|
color: rgba($blueberry, .87);
|
|
border-color: rgba($blueberry, .87);
|
|
}
|
|
|
|
h3 {
|
|
color: $silver;
|
|
}
|
|
|
|
.icon-ruby {
|
|
background: url('/resources/images/icons/languages/ruby-icon-large-hover.png') 0px 0px no-repeat;
|
|
}
|
|
.icon-go {
|
|
background: url('/resources/images/icons/languages/go-icon-large-hover.png') 0px 0px no-repeat;
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
* Icon Styles
|
|
*
|
|
*/
|
|
|
|
&.has-icon {
|
|
padding-left: ($unit * 9) - 1;
|
|
}
|
|
|
|
.hover-card-icon {
|
|
transition: all .4s;
|
|
position: absolute;
|
|
top: 18px;
|
|
left: 18px;
|
|
z-index: $layer-1;
|
|
font-size: 36px;
|
|
color: rgba($cloud, .56);
|
|
}
|
|
|
|
.icon-number {
|
|
top: 16px;
|
|
left: $unit * 2;
|
|
font-size: 24px;
|
|
line-height: 36px;
|
|
height: 40px;
|
|
width: 40px;
|
|
text-align: center;
|
|
border: 2px solid $mist;
|
|
border-radius: 200px;
|
|
padding: 0px;
|
|
}
|
|
|
|
|
|
/*
|
|
* Text Styles
|
|
*
|
|
*/
|
|
|
|
h3,
|
|
p {
|
|
transition: all .4s;
|
|
line-height: 24px;
|
|
margin: 0;
|
|
padding: 0px;
|
|
text-align: left;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
h3 {
|
|
color: $metal;
|
|
text-transform: none;
|
|
font-size: 20px;
|
|
}
|
|
|
|
p {
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
color: $blueberry;
|
|
}
|
|
|
|
|
|
/*
|
|
* Material Button Overrides
|
|
*
|
|
*/
|
|
|
|
.md-ripple-container {
|
|
opacity: .48;
|
|
}
|
|
|
|
&.md-button.md-default-theme:not([disabled]):hover,
|
|
&.md-button.md-default-theme:not([disabled]):focus {
|
|
background-color: $snow;
|
|
}
|
|
} |