angular-cn/public/resources/css/module/_hover-card.scss

125 lines
2.3 KiB
SCSS
Raw Normal View History

2015-04-21 11:44:56 -04:00
.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);
2015-04-22 02:09:13 -04:00
border-color: rgba($blueberry, .87);
2015-04-21 11:44:56 -04:00
}
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);
}
2015-04-22 02:09:13 -04:00
.icon-number {
2015-04-21 11:44:56 -04:00
top: 16px;
2015-04-22 02:09:13 -04:00
left: $unit * 2;
2015-04-21 11:44:56 -04:00
font-size: 24px;
2015-04-22 02:09:13 -04:00
line-height: 36px;
height: 40px;
width: 40px;
text-align: center;
border: 2px solid $mist;
border-radius: 200px;
padding: 0px;
2015-04-21 11:44:56 -04:00
}
/*
* 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;
}
}