X-Git-Url: https://git.danix.xyz/?a=blobdiff_plain;f=assets%2Fsass%2Fbourbon%2Fbourbon%2Flibrary%2F_hide-visually.scss;fp=assets%2Fsass%2Fbourbon%2Fbourbon%2Flibrary%2F_hide-visually.scss;h=4d092c70b64a2aebe30ca442f93db3171cf193b7;hb=2d3ca553a3d3345ec8ecdf0faedc6924cd0e2f5d;hp=0000000000000000000000000000000000000000;hpb=2ae9d02fd007f6d0bab6576f8f26d66570358605;p=theme-danix.xyz.git diff --git a/assets/sass/bourbon/bourbon/library/_hide-visually.scss b/assets/sass/bourbon/bourbon/library/_hide-visually.scss new file mode 100644 index 0000000..4d092c7 --- /dev/null +++ b/assets/sass/bourbon/bourbon/library/_hide-visually.scss @@ -0,0 +1,70 @@ +@charset "UTF-8"; + +/// Hides an element visually while still allowing the content to be accessible +/// to assistive technology, e.g. screen readers. Passing `unhide` will reverse +/// the affects of the hiding, which is handy for showing the element on focus, +/// for example. +/// +/// @link https://goo.gl/Vf1TGn +/// +/// @argument {string} $toggle [hide] +/// Accepts `hide` or `unhide`. `unhide` reverses the affects of `hide`. +/// +/// @example scss +/// .element { +/// @include hide-visually; +/// +/// &:active, +/// &:focus { +/// @include hide-visually("unhide"); +/// } +/// } +/// +/// // CSS Output +/// .element { +/// border: 0; +/// clip: rect(1px, 1px, 1px, 1px); +/// clip-path: inset(100%); +/// height: 1px; +/// overflow: hidden; +/// padding: 0; +/// position: absolute; +/// width: 1px; +/// } +/// +/// .hide-visually:active, +/// .hide-visually:focus { +/// clip: auto; +/// clip-path: none; +/// height: auto; +/// overflow: visible; +/// position: static; +/// width: auto; +/// } +/// +/// @since 5.0.0 + +@mixin hide-visually($toggle: "hide") { + @if not index("hide" "unhide", $toggle) { + @error "`#{$toggle}` is not a valid value for the `$toggle` argument in " + + "the `hide-visually` mixin. Must be either `hide` or `unhide`."; + } @else if $toggle == "hide" { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(100%); + height: 1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; + } @else if $toggle == "unhide" { + clip: auto; + clip-path: none; + height: auto; + overflow: visible; + position: static; + white-space: inherit; + width: auto; + } +}