@nomios/web-uikit
Version:
Nomios' living web UIKit
83 lines (67 loc) • 1.88 kB
CSS
/*
Note: If you add a color here, please add it to "/stories/base/colors.css" as well
*/
/* ==========================================================================
Fonts
========================================================================== */
/* ==========================================================================
All typography variants
$unit - Either em or rem
========================================================================== */
.textButton {
padding: 0;
border: 0;
opacity: 0.8;
background: none;
color: #4b453d;
font-size: 1rem;
white-space: nowrap;
transition-property: opacity, color;
transition-duration: 0.2s;
transition-timing-function: ease
}
.textButton:not([disabled]) {
cursor: pointer;
}
.textButton:hover,
.textButton:focus {
opacity: 1;
}
.textButton[disabled] {
opacity: 0.3;
}
.textButton .text {
display: inline-block;
vertical-align: middle;
}
.textButton .icon {
vertical-align: middle;
}
.textButton.large .text {
font-family: "IbmPlexMono", monospace;
font-weight: 400;
font-size: 1.6rem;
line-height: calc(2.4em / 1.6);
}
.textButton.large.left .icon {
margin-right: 1.6rem;
font-size: 1.6rem;
}
.textButton.large.right .icon {
margin-left: 1.6rem;
font-size: 1.6rem;
}
.textButton.small .text {
font-family: "IbmPlexMono", monospace;
font-weight: 400;
font-size: 1.2rem;
line-height: calc(2em / 1.2);
}
.textButton.small.left .icon {
margin-right: 1.2rem;
font-size: 1.2rem;
}
.textButton.small.right .icon {
margin-left: 1.2rem;
font-size: 1.2rem;
}