extjs/classic/theme-base/sass/etc/mixins/css-outline.scss

   1 /**
   2  * adds a css outline to an element with compatibility for IE8/outline-offset
   3  * NOTE: the element receiving the outline must be positioned (either relative or absolute)
   4  * in order for the outline to work in IE8
   5  *
   6  * @param {number} [$width=1px]
   7  * The width of the outline
   8  *
   9  * @param {string} [$style=solid]
  10  * The style of the outline
  11  *
  12  * @param {color} [$color=#000]
  13  * The color of the outline
  14  *
  15  * @param {number} [$offset=0]
  16  * The offset of the outline
  17  *
  18  * @param {number/list} [$border-width=0]
  19  * The border-width of the element receiving the outline.
  20  * Required in order for outline-offset to work in IE8
  21  *
  22  * @param {boolean} [$pseudo=false]
  23  * `true to always use a pseudo element to render the outline.
  24  * by default this behavior is limited to IE8 only, but can be enabled in all browser
  25  * when required
  26  *
  27  * @member Global_CSS
  28  * @private
  29  */
  30 @mixin css-outline(
  31     $width: 1px,
  32     $style: solid,
  33     $color: #000,
  34     $offset: 0,
  35     $border-width: 0,
  36     $pseudo: false
  37 ) {
  38     @mixin css-outline-pseudo() {
  39         &:after {
  40             position: absolute;
  41             content: ' ';
  42             top: -$offset - $width - top($border-width) ;
  43             right: -$offset - $width - right($border-width);
  44             bottom: -$offset - $width - bottom($border-width);
  45             left: -$offset - $width - left($border-width);
  46
  47             border: $width $style $color;
  48             pointer-events: none;
  49         }
  50     }
  51
  52     @if $pseudo {
  53         @include css-outline-pseudo;
  54     } @else {
  55         outline: $width $style $color;
  56         outline-offset: $offset;
  57
  58         @if $include-ie {
  59             .#{$prefix}ie8 & {
  60                 outline: none;
  61                 @include css-outline-pseudo;
  62
  63             }
  64         }
  65     }
  66 }