"Fossies" - the Fresh Open Source Software Archive

Member "jitsi-meet-7319/css/_mixins.scss" (6 Jun 2023, 4399 Bytes) of package /linux/misc/jitsi-meet-7319.tar.gz:

    1 /**
    2  * Animation mixin.
    3  */
    4 @mixin animation($animate...) {
    5     $max: length($animate);
    6     $animations: '';
    7 
    8     @for $i from 1 through $max {
    9         $animations: #{$animations + nth($animate, $i)};
   10 
   11         @if $i < $max {
   12             $animations: #{$animations + ", "};
   13         }
   14     }
   15     -webkit-animation: $animations;
   16     -moz-animation:    $animations;
   17     -o-animation:      $animations;
   18     animation:         $animations;
   19 }
   20 
   21 @mixin flex() {
   22     display: -webkit-box;
   23     display: -moz-box;
   24     display: -ms-flexbox;
   25     display: -webkit-flex;
   26     display: flex;
   27 }
   28 
   29 /**
   30  * Keyframes mixin.
   31  */
   32 @mixin keyframes($animationName) {
   33     @-webkit-keyframes #{$animationName} {
   34         @content;
   35     }
   36     @-moz-keyframes #{$animationName} {
   37         @content;
   38     }
   39     @-o-keyframes #{$animationName} {
   40         @content;
   41     }
   42     @keyframes #{$animationName} {
   43         @content;
   44     }
   45 }
   46 
   47 @mixin circle($diameter) {
   48     width: $diameter;
   49     height: $diameter;
   50     border-radius: 50%;
   51 }
   52 
   53 /**
   54 * Absolute position the element at the top left corner
   55 **/
   56 @mixin topLeft() {
   57     position: absolute;
   58     top: 0;
   59     left: 0;
   60 }
   61 
   62 @mixin absoluteAligning() {
   63     top: 50%;
   64     left: 50%;
   65     position: absolute;
   66     @include transform(translate(-50%, -50%));
   67 }
   68 
   69 /**
   70 * Defines the maximum width and height
   71 **/
   72 @mixin maxSize($value) {
   73     max-width: $value;
   74     max-height: $value;
   75 }
   76 
   77 @mixin transform($func) {
   78     -moz-transform: $func;
   79     -ms-transform: $func;
   80     -webkit-transform: $func;
   81     -o-transform: $func;
   82     transform: $func;
   83 }
   84 
   85 @mixin transition($transition...) {
   86     -moz-transition:    $transition;
   87     -o-transition:      $transition;
   88     -webkit-transition: $transition;
   89     transition:         $transition;
   90 }
   91 
   92 /**
   93  * Mixin styling a placeholder.
   94  **/
   95 @mixin placeholder() {
   96     $selectors: (
   97         "::-webkit-input-placeholder",
   98         "::-moz-placeholder",
   99         ":-moz-placeholder",
  100         ":-ms-input-placeholder"
  101     );
  102 
  103     @each $selector in $selectors {
  104         #{$selector} {
  105             @content;
  106         }
  107     }
  108 }
  109 
  110 /**
  111  * Mixin styling a slider track for different browsers.
  112  **/
  113 @mixin slider() {
  114     $selectors: (
  115         "input[type=range]::-webkit-slider-runnable-track",
  116         "input[type=range]::-moz-range-track",
  117         "input[type=range]::-ms-track"
  118     );
  119 
  120     @each $selector in $selectors {
  121         #{$selector} {
  122             @content;
  123         }
  124   }
  125 }
  126 
  127 /**
  128  * Mixin styling a slider thumb for different browsers.
  129  **/
  130 @mixin slider-thumb() {
  131     $selectors: (
  132         "input[type=range]::-webkit-slider-thumb",
  133         "input[type=range]::-moz-range-thumb",
  134         "input[type=range]::-ms-thumb"
  135     );
  136 
  137     @each $selector in $selectors {
  138         #{$selector} {
  139             @content;
  140         }
  141     }
  142 }
  143 
  144 @mixin box-shadow($h, $y, $blur, $color, $inset: false) {
  145     @if $inset {
  146         -webkit-box-shadow: inset $h $y $blur $color;
  147         -moz-box-shadow: inset $h $y $blur $color;
  148         box-shadow: inset $h $y $blur $color;
  149     } @else {
  150         -webkit-box-shadow: $h $y $blur $color;
  151         -moz-box-shadow: $h $y $blur $color;
  152         box-shadow: $h $y $blur $color;
  153     }
  154 }
  155 
  156 @mixin no-box-shadow {
  157     -webkit-box-shadow: none;
  158     -moz-box-shadow: none;
  159     box-shadow: none;
  160 }
  161 
  162 @mixin box-sizing($box-model) {
  163     -webkit-box-sizing: $box-model; // Safari <= 5
  164     -moz-box-sizing: $box-model; // Firefox <= 19
  165     box-sizing: $box-model;
  166 }
  167 
  168 @mixin border-radius($radius) {
  169     -webkit-border-radius: $radius;
  170     border-radius: $radius;
  171     /* stops bg color from leaking outside the border: */
  172     background-clip: padding-box;
  173 }
  174 
  175 @mixin opacity($opacity) {
  176     opacity: $opacity;
  177     $opacity-ie: $opacity * 100;
  178     -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=$opacity-ie);
  179     filter: alpha(opacity=$opacity-ie); //IE8
  180 }
  181 
  182 @mixin text-truncate {
  183     display: block;
  184     overflow: hidden;
  185     text-overflow: ellipsis;
  186     white-space: nowrap;
  187 }
  188 
  189 /**
  190  * Creates a semi-transparent background with the given color and alpha
  191  * (opacity) value.
  192  */
  193 @mixin transparentBg($color, $alpha) {
  194     background-color: rgba(red($color), green($color), blue($color), $alpha);
  195 }
  196 
  197 /**
  198  * Change the direction of the current element to LTR, but do not change the direction
  199  * of its children; Keep them RTL.
  200  */
  201 @mixin ltr {
  202     body[dir=rtl] & {
  203         direction: ltr;
  204 
  205         & > * {
  206             direction: rtl;
  207         }
  208     }
  209 }