[ipfire.org.git] / src / scss / bootstrap-4.0.0-alpha.6 / scss / mixins / _screen-reader.scss

// Only display content to screen readers
//
// See: http://a11yproject.com/posts/how-to-hide-content

@mixin sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

// Use in conjunction with .sr-only to only display content when it's focused.
//
// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
//
// Credit: HTML5 Boilerplate

@mixin sr-only-focusable {
  &:active,
  &:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
  }
}
Commit	Line	Data
91e44d91 S	1	// Only display content to screen readers
	2	//
	3	// See: http://a11yproject.com/posts/how-to-hide-content
	4
	5	@mixin sr-only {
	6	position: absolute;
	7	width: 1px;
	8	height: 1px;
	9	padding: 0;
	10	margin: -1px;
	11	overflow: hidden;
	12	clip: rect(0,0,0,0);
	13	border: 0;
	14	}
	15
	16	// Use in conjunction with .sr-only to only display content when it's focused.
	17	//
	18	// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
	19	//
	20	// Credit: HTML5 Boilerplate
	21
	22	@mixin sr-only-focusable {
	23	&:active,
	24	&:focus {
	25	position: static;
	26	width: auto;
	27	height: auto;
	28	margin: 0;
	29	overflow: visible;
	30	clip: auto;
	31	}
	32	}