uikit
Version:
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
168 lines (119 loc) • 4.28 kB
text/less
// Name: Visibility
// Description: Utilities to show or hide content on breakpoints, hover or touch
//
// Component: `uk-hidden-*`
// `uk-visible-*`
// `uk-invisible`
// `uk-hidden-visually`
// `uk-visible-toggle`
// `uk-hidden-hover`
// `uk-invisible-hover`
// `uk-hidden-touch`
// `uk-hidden-notouch`
//
// ========================================================================
/* ========================================================================
Component: Visibility
========================================================================== */
/*
* Hidden
* `hidden` attribute also set here to make it stronger
*/
[hidden],
.uk-hidden { display: none ; }
/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {
.uk-hidden\@s { display: none ; }
}
/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) {
.uk-hidden\@m { display: none ; }
}
/* Desktop and bigger */
@media (min-width: @breakpoint-large) {
.uk-hidden\@l { display: none ; }
}
/* Large screen and bigger */
@media (min-width: @breakpoint-xlarge) {
.uk-hidden\@xl { display: none ; }
}
/*
* Visible
*/
/* Phone portrait and smaller */
@media (max-width: @breakpoint-xsmall-max) {
.uk-visible\@s { display: none ; }
}
/* Phone landscape and smaller */
@media (max-width: @breakpoint-small-max) {
.uk-visible\@m { display: none ; }
}
/* Tablet landscape and smaller */
@media (max-width: @breakpoint-medium-max) {
.uk-visible\@l { display: none ; }
}
/* Desktop and smaller */
@media (max-width: @breakpoint-large-max) {
.uk-visible\@xl { display: none ; }
}
/* Visibility
========================================================================== */
.uk-invisible { visibility: hidden ; }
/* Based on the State of the Parent Element
========================================================================== */
/*
* Mind that `display: none`, `visibility: hidden` and `opacity: 0`
* remove the element from the accessibility tree and that
* `display: none` and `visibility: hidden` are not focusable.
*
* The target stays visible if any element within receives focus through keyboard.
*/
/*
* Remove space when hidden.
* 1. Remove from document flow.
* 2. Hide element and shrink its dimension. Can't use zero dimensions together
* with `overflow: hidden` it would remove it from the accessibility tree.
* 3. Hide the single rendered pixel.
* 4. Prevent text wrapping caused by `width: 1px` because it has side effects on vocalisation
* by screen readers and the visual tracking indicator of other assistive technologies.
*/
.uk-hidden-visually:not(:focus):not(:active):not(:focus-within),
.uk-visible-toggle:not(:hover):not(:focus) .uk-hidden-hover:not(:focus-within) {
/* 1 */
position: absolute ;
/* 2 */
width: 1px ;
height: 1px ;
padding: 0 ;
border: 0 ;
margin: 0 ;
overflow: hidden ;
/* 3 */
clip-path: inset(50%) ;
/* 4 */
white-space: nowrap ;
}
/*
* Keep space when hidden.
* Hide element without shrinking its dimension.
* Unfortunately, can't use `clip-path: inset(50%)` because hover won't work
* if the element is positioned outside of the toggle box.
*/
.uk-visible-toggle:not(:hover):not(:focus) .uk-invisible-hover:not(:focus-within) { opacity: 0 ; }
/* Based on Hover Capability of the Pointing Device
========================================================================== */
/*
* Hover
*/
/* Hide if primary pointing device doesn't support hover, e.g. touch screens. */
@media (hover: none) {
.uk-hidden-touch { display: none ; }
}
/* Hide if primary pointing device supports hover, e.g. mice. */
@media (hover) {
.uk-hidden-notouch { display: none ; }
}
// Hooks
// ========================================================================
.hook-visibility-misc();
.hook-visibility-misc() {}