161 lines
2.7 KiB
SCSS
161 lines
2.7 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);
|
||
|
|
}
|
||
|
|
|
||
|
|
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-Java {
|
||
|
|
top: 16px;
|
||
|
|
left: 20px;
|
||
|
|
font-size: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-python {
|
||
|
|
top: 22px;
|
||
|
|
left: 20px;
|
||
|
|
font-size: 34px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-Nodejs {
|
||
|
|
top: 20px;
|
||
|
|
left: 20px;
|
||
|
|
font-size: 38px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-go {
|
||
|
|
background: url('/resources/images/icons/languages/go-icon-large.png') 0px 0px no-repeat;
|
||
|
|
height: 32px;
|
||
|
|
width: 24px;
|
||
|
|
left: 23px;
|
||
|
|
top: 21px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-ruby {
|
||
|
|
background: url('/resources/images/icons/languages/ruby-icon-large.png') 0px 0px no-repeat;
|
||
|
|
height: 30px;
|
||
|
|
width: 30px;
|
||
|
|
left: 21px;
|
||
|
|
top: 22px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-php {
|
||
|
|
top: 26px;
|
||
|
|
left: 14px;
|
||
|
|
font-size: 25px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-C {
|
||
|
|
top: 26px;
|
||
|
|
font-size: 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-connection {
|
||
|
|
top: 24px;
|
||
|
|
font-size: 28px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
* 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;
|
||
|
|
}
|
||
|
|
}
|