1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071 |
- /**
- * adds a css outline to an element with compatibility for IE8/outline-offset
- * NOTE: the element receiving the outline must be positioned (either relative or absolute)
- * in order for the outline to work in IE8
- *
- * @param {number} [$width=1px]
- * The width of the outline
- *
- * @param {string} [$style=solid]
- * The style of the outline
- *
- * @param {color} [$color=#000]
- * The color of the outline
- *
- * @param {number} [$offset=0]
- * The offset of the outline
- *
- * @param {number/list} [$border-width=0]
- * The border-width of the element receiving the outline.
- * Required in order for outline-offset to work in IE8
- *
- * @param {boolean} [$pseudo=false]
- * `true to always use a pseudo element to render the outline.
- * by default this behavior is limited to IE8 only, but can be enabled in all browser
- * when required
- *
- * @member Global_CSS
- * @private
- */
- @mixin css-outline(
- $width: 1px,
- $style: solid,
- $color: #000,
- $offset: 0,
- $border-width: 0,
- $pseudo: false
- ) {
- @mixin css-outline-pseudo() {
- &:after {
- position: absolute;
- content: ' ';
- top: -$offset - $width - top($border-width);
- right: -$offset - $width - right($border-width);
- bottom: -$offset - $width - bottom($border-width);
- left: -$offset - $width - left($border-width);
- border: $width $style $color;
- pointer-events: none;
- }
- }
- @if $pseudo {
- @include css-outline-pseudo;
- } @else {
- outline: $width $style $color;
- outline-offset: $offset;
- @if $include-ie and ($offset == 0) {
- .#{$prefix}ie8 & {
- outline: none;
- @include css-outline-pseudo;
- }
- }
- @if $offset != 0 {
- .#{$prefix}ie &,
- .#{$prefix}ie10p &,
- .#{$prefix}edge & {
- outline: none;
- @include css-outline-pseudo;
- }
- }
- }
- }
|