Mercurial > nebulaweb3

comparison default/assets/scss/vendors/bourbon/library/_hide-visually.scss @ 0:1d038bc9b3d2 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Up:default
author Liny <dev@neowd.com>
date Sat, 31 May 2025 09:21:51 +0800
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1d038bc9b3d2
1 @charset "UTF-8";
2
3 /// Hides an element visually while still allowing the content to be accessible
4 /// to assistive technology, e.g. screen readers. Passing `unhide` will reverse
5 /// the affects of the hiding, which is handy for showing the element on focus,
6 /// for example.
7 ///
8 /// @link http://goo.gl/Vf1TGn
9 ///
10 /// @argument {string} $toggle [hide]
11 /// Accepts `hide` or `unhide`. `unhide` reverses the affects of `hide`.
12 ///
13 /// @example scss
14 /// .element {
15 /// @include hide-visually;
16 ///
17 /// &:active,
18 /// &:focus {
19 /// @include hide-visually(unhide);
20 /// }
21 /// }
22 ///
23 /// // CSS Output
24 /// .element {
25 /// border: 0;
26 /// clip: rect(1px, 1px, 1px, 1px);
27 /// clip-path: circle(1% at 1% 1%);
28 /// height: 1px;
29 /// overflow: hidden;
30 /// padding: 0;
31 /// position: absolute;
32 /// width: 1px;
33 /// }
34 ///
35 /// .hide-visually:active,
36 /// .hide-visually:focus {
37 /// clip: auto;
38 /// clip-path: none;
39 /// height: auto;
40 /// overflow: visible;
41 /// position: static;
42 /// width: auto;
43 /// }
44 ///
45 /// @since 5.0.0
46
47 @mixin hide-visually($toggle: hide) {
48 @if $toggle == "hide" {
49 border: 0;
50 clip: rect(1px, 1px, 1px, 1px);
51 clip-path: circle(1% at 1% 1%);
52 height: 1px;
53 overflow: hidden;
54 padding: 0;
55 position: absolute;
56 width: 1px;
57 } @else if $toggle == "unhide" {
58 clip: auto;
59 clip-path: none;
60 height: auto;
61 overflow: visible;
62 position: static;
63 width: auto;
64 }
65 }