tailwindcss/src/_less/utilities/misc.less
Adam Wathan cacff2ac21 Move Less files
Keep them around for easy reference right now but don't want them in my
JS bizniz.
2017-08-27 18:02:40 -04:00

103 lines
1.4 KiB
Text

.no-focus {
&:focus, &:active {
outline: none;
}
}
.no-wrap {
white-space: nowrap;
}
.box-shadow {
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.box-shadow-soft {
box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.box-shadow-z2 {
box-shadow: 0 15px 35px hsla(240, 10%, 28%, 0.15), 0 5px 15px rgba(0,0,0,.07);
}
.responsive({
&box-shadow-z2 { .box-shadow-z2; }
});
.inset-shadow {
box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}
.tab-focus {
// Default
outline: thin dotted;
// WebKit
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.full-height {
min-height: 100vh;
}
.full-width {
width: 100%;
}
.clickable {
cursor: pointer;
user-select: none;
}
.no-select {
user-select: none;
}
.ease {
transition: all 0.2s ease;
}
// Useful for hiding things like radio buttons without making them inaccessible
// to the keyboard when navigating forms.
.pseudo-hidden {
position: absolute;
opacity: 0;
z-index: -1;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
.mask { overflow: hidden; }
.aspect-2\:1 {
padding-bottom: 50%;
}
.aspect-16\:9 {
padding-bottom: 56.25%;
}
.hover-only {
opacity: 0;
&:hover {
opacity: 1;
}
}
.responsive({
&hover-only { .hover-only; }
});
.bg-cover {
background-size: cover;
background-position: center;
}