feather/style.css
2017-05-23 20:44:01 -07:00

85 lines
1.4 KiB
CSS

:root {
--accent: #2979FF;
}
.accent {
color: var(--accent);
}
.bg-accent {
background-color: var(--accent);
}
.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 [stroke] {
stroke: currentColor;
}
.icon [fill]:not([fill=none]) {
fill: 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;
}