feather/style.css

69 lines
1.2 KiB
CSS
Raw Normal View History

2017-05-13 02:32:49 +03:00
.rubik {
font-family: "Rubik", sans-serif;
}
.font-smoothing {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.btn {
display: inline-block;
padding: 1rem 2rem;
font-size: 0.875rem;
line-height: 1.5;
text-transform: uppercase;
text-align: center;
letter-spacing: 1px;
text-decoration: none;
}
.btn-outline {
box-shadow: inset 0 0 0 1px currentColor;
}
.icon {
width: 1.5rem;
height: 1.5rem;
box-sizing: content-box;
}
.icon svg {
stroke: currentColor;
}
.tooltip {
position: absolute;
top: calc(100% + 1rem);
left: 50%;
transform: translateX(-50%) scale(0.75);
transform-origin: 50% -1rem;
opacity: 0;
visibility: hidden;
cursor: default;
z-index: 1;
transition-property: opacity, visibility, transform;
transition-duration: 0.15s;
transition-timing-function: ease-in-out;
}
/* tooltip arrow */
.tooltip::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -1rem);
display: block;
width: 2.5rem;
height: 1.5rem;
background-image: url("assets/tooltip-arrow.svg");
background-size: 100%;
}
.icon:hover .tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) scale(1);
transition-delay: 0.15s;
}