123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384 |
- /**
- * Creates an outline round an element, by default immediately
- * surrounding the element. It may be offset positively (away from the element bounds)
- * or negatively (within the element bounds).
- *
- * @param {number/list} $width
- * The outline-width
- *
- * @param {string/list} $style
- * The outline-style
- *
- * @param {color/list} $color
- * The outline-color
- *
- * @param {number} $offset
- * The outline-offset
- *
- * @param {string/boolean} [$pseudo=after]
- * A pseudo element is used to create the appearance of an outline in IE and Edge if
- * required by $offset. By default the :after pseudo is used. Set this to 'before'
- * if :after is not available. Set this to `false` to use CSS outline.
- *
- * @param {number} $z-index
- * z-index of the pseudo element
- *
- * @param {number/list} $border-width
- * The border-width of the element that the outline is being applied to.
- * Since the pseudo element is rendered inside the borders, the border-width needs to be
- * included in the $offset calculation
- *
- * @param {number/list} $border-radius
- * The border radius of the of pseudo element.
- *
- * @private
- */
- @mixin outline(
- $width: null,
- $style: null,
- $color: null,
- $offset: null,
- $pseudo: after,
- $z-index: null,
- $border-width: null,
- $border-radius: null
- ) {
- @if ($border-radius == null and ($offset == null or $offset == 0 or $pseudo == false)) {
- @if $width != null and $style != null and $color != null {
- outline: $width $style $color;
- } @else {
- outline-width: $width;
- outline-style: $style;
- outline-color: $color;
- }
- outline-offset: $offset;
- } @else {
- // IE/Edge don't support outline-offset so we have to fake it using a pseudo element
- @if $z-index == null and $pseudo == before {
- $z-index: 1;
- }
- &:#{$pseudo} {
- content: '';
- position: absolute;
- top: -$width - $offset;
- right: -$width - $offset;
- bottom: -$width - $offset;
- left: -$width - $offset;
- pointer-events: none;
- @include border($width, $style, $color);
- border-radius: $border-radius;
- z-index: $z-index;
- // use negative margins to account for parent border-width instead of including
- // border-width in the calculation for top/right/bottom/left.
- // This ensures that UI mixins are not required to pass both $offset and $border-width -
- // they can inherit one or the other from another UI or the default UI.
- margin: box(-(top($border-width)), -(right($border-width)), -(bottom($border-width)), -(left($border-width)));
- }
- @if $offset > -1 {
- overflow: visible;
- }
- }
- }
|