github.com/bosssauce/ponzu@v0.11.1-0.20200102001432-9bc41b703131/system/admin/static/editor/sass/components/_prefixer.scss (about)

     1  //---------------------------------------------------
     2  //  Sass Prefixer
     3  //  -------------------------------------------------
     4  //  TABLE OF CONTENTS
     5  //  (*) denotes a syntax-sugar helper
     6  //  -------------------------------------------------
     7  //
     8  //      animation($args)
     9  //          animation-delay($delay)
    10  //          animation-direction($direction)
    11  //          animation-duration($duration)
    12  //          animation-fill-mode($mode)
    13  //          animation-iteration-count($count)
    14  //          animation-name($name)
    15  //          animation-play-state($state)
    16  //          animation-timing-function($function)
    17  //      background-size($args)
    18  //          inner-shadow($args) *
    19  //      box-sizing($args)
    20  //          border-box() *
    21  //          content-box() *
    22  //      columns($args)
    23  //          column-count($count)
    24  //          column-gap($gap)
    25  //          column-rule($args)
    26  //          column-width($width)
    27  //      flexbox()
    28  //          flex($args)
    29  //          order($args)
    30  //          align($args)
    31  //          justify-content($args)
    32  //      gradient($default,$start,$stop) *
    33  //          linear-gradient-top($default,$color1,$stop1,$color2,$stop2,[$color3,$stop3,$color4,$stop4])*
    34  //          linear-gradient-left($default,$color1,$stop1,$color2,$stop2,[$color3,$stop3,$color4,$stop4])*
    35  //      transform($args)
    36  //          transform-origin($args)
    37  //          transform-style($style)
    38  //          rotate($deg)
    39  //          scale($factor)
    40  //          translate($x,$y)
    41  //          translate3d($x,$y,$z)
    42  //          translateHardware($x,$y) *
    43  //      text-shadow($args)
    44  //      transition($args)
    45  //          transition-delay($delay)
    46  //          transition-duration($duration)
    47  //          transition-property($property)
    48  //          transition-timing-function($function)
    49  
    50  
    51  // Animation
    52  
    53  @mixin animation($args) {
    54      -webkit-animation: $args;
    55      -moz-animation: $args;
    56      -ms-animation: $args;
    57      -o-animation: $args;
    58      animation: $args;
    59  }
    60  @mixin animation-delay($delay) {
    61      -webkit-animation-delay: $delay;
    62      -moz-animation-delay: $delay;
    63      -ms-animation-delay: $delay;
    64      -o-animation-delay: $delay;
    65      animation-delay: $delay;
    66  }
    67  @mixin animation-direction($direction) {
    68      -webkit-animation-direction: $direction;
    69      -moz-animation-direction: $direction;
    70      -ms-animation-direction: $direction;
    71      -o-animation-direction: $direction;
    72  }
    73  @mixin animation-duration($duration) {
    74      -webkit-animation-duration: $duration;
    75      -moz-animation-duration: $duration;
    76      -ms-animation-duration: $duration;
    77      -o-animation-duration: $duration;
    78  }
    79  @mixin animation-fill-mode($mode) {
    80      -webkit-animation-fill-mode: $mode;
    81      -moz-animation-fill-mode: $mode;
    82      -ms-animation-fill-mode: $mode;
    83      -o-animation-fill-mode: $mode;
    84      animation-fill-mode: $mode;
    85  }
    86  @mixin animation-iteration-count($count) {
    87      -webkit-animation-iteration-count: $count;
    88      -moz-animation-iteration-count: $count;
    89      -ms-animation-iteration-count: $count;
    90      -o-animation-iteration-count: $count;
    91      animation-iteration-count: $count;
    92  }
    93  @mixin animation-name($name) {
    94      -webkit-animation-name: $name;
    95      -moz-animation-name: $name;
    96      -ms-animation-name: $name;
    97      -o-animation-name: $name;
    98      animation-name: $name;
    99  }
   100  @mixin animation-play-state($state) {
   101      -webkit-animation-play-state: $state;
   102      -moz-animation-play-state: $state;
   103      -ms-animation-play-state: $state;
   104      -o-animation-play-state: $state;
   105      animation-play-state: $state;
   106  }
   107  @mixin animation-timing-function($function) {
   108      -webkit-animation-timing-function: $function;
   109      -moz-animation-timing-function: $function;
   110      -ms-animation-timing-function: $function;
   111      -o-animation-timing-function: $function;
   112      animation-timing-function: $function;
   113  }
   114  
   115  // Keyframes
   116  @mixin keyframes($animation-name) {
   117    @-webkit-keyframes #{$animation-name} {
   118      @content;
   119    }
   120    @-moz-keyframes #{$animation-name} {
   121      @content;
   122    }
   123    @keyframes #{$animation-name} {
   124      @content;
   125    }
   126  }
   127  
   128  // Backface-visibility
   129  
   130  @mixin backface-visibility($args) {
   131      -webkit-backface-visibility: $args;
   132      -moz-backface-visibility: $args;
   133      -ms-backface-visibility: $args;
   134      backface-visibility: $args;
   135  }
   136  
   137  
   138  // Background Size
   139  
   140  @mixin background-size($args) {
   141      -webkit-background-size: $args;
   142      background-size: $args;
   143  }
   144  
   145  // Box Sizing
   146  
   147  @mixin box-sizing($args) {
   148      -webkit-box-sizing: $args;
   149      -moz-box-sizing: $args;
   150      box-sizing: $args;
   151  }
   152  @mixin border-box(){
   153      @include box-sizing(border-box);
   154  }
   155  @mixin content-box(){
   156      @include box-sizing(content-box);
   157  }
   158  
   159  
   160  // Columns
   161  
   162  @mixin columns($args) {
   163      -webkit-columns: $args;
   164      -moz-columns: $args;
   165      columns: $args;
   166  }
   167  @mixin column-count($count) {
   168      -webkit-column-count: $count;
   169      -moz-column-count: $count;
   170      column-count: $count;
   171  }
   172  @mixin column-gap($gap) {
   173      -webkit-column-gap: $gap;
   174      -moz-column-gap: $gap;
   175      column-gap: $gap;
   176  }
   177  @mixin column-width($width) {
   178      -webkit-column-width: $width;
   179      -moz-column-width: $width;
   180      column-width: $width;
   181  }
   182  @mixin column-rule($args) {
   183      -webkit-column-rule: $args;
   184      -moz-column-rule: $args;
   185      column-rule: $args;
   186  }
   187  
   188  // Filter
   189  @mixin filter($args) {
   190      -webkit-filter: $args;
   191      -moz-filter: $args;
   192      -o-filter: $args;
   193      -ms-filter: $args;
   194  }
   195  
   196  // Flexbox
   197  @mixin flexbox() {
   198    display: -webkit-box;
   199    display: -moz-box;
   200    display: -ms-flexbox;
   201    display: -webkit-flex;
   202    display: flex;
   203  }
   204      @mixin flex($values) {
   205        -webkit-box-flex: $values;
   206        -moz-box-flex:  $values;
   207        -webkit-flex:  $values;
   208        -ms-flex:  $values;
   209        flex:  $values;
   210      }
   211      @mixin order($val) {
   212        -webkit-box-ordinal-group: $val;
   213        -moz-box-ordinal-group: $val;
   214        -ms-flex-order: $val;
   215        -webkit-order: $val;
   216        order: $val;
   217      }
   218      @mixin align($align) {
   219        -webkit-flex-align: $align;
   220        -ms-flex-align: $align;
   221        -webkit-align-items: $align;
   222        align-items: $align;
   223      }
   224      @mixin justify-content($val) {
   225        -webkit-justify-content: $val;
   226        justify-content: $val;
   227      }
   228  // Gradients
   229  
   230  @mixin gradient($default: #F5F5F5, $start: #EEE, $stop: #FFF) {
   231      @include linear-gradient-top($default,$start,0%,$stop,100%);
   232  }
   233  @mixin linear-gradient-top($default,$color1,$stop1,$color2,$stop2) {
   234      background-color: $default;
   235      background-image: -webkit-gradient(linear, left top, left bottom, color-stop($stop1, $color1), color-stop($stop2 $color2));
   236      background-image: -webkit-linear-gradient(top, $color1 $stop1, $color2 $stop2);
   237      background-image: -moz-linear-gradient(top, $color1 $stop1, $color2 $stop2);
   238      background-image: -ms-linear-gradient(top, $color1 $stop1, $color2 $stop2);
   239      background-image: -o-linear-gradient(top, $color1 $stop1, $color2 $stop2);
   240      background-image: linear-gradient(top, $color1 $stop1, $color2 $stop2);
   241  }
   242  @mixin linear-gradient-top2($default,$color1,$stop1,$color2,$stop2,$color3,$stop3) {
   243      background-color: $default;
   244      background-image: -webkit-gradient(linear, left top, left bottom, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3));
   245      background-image: -webkit-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3);
   246      background-image: -moz-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3);
   247      background-image: -ms-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3);
   248      background-image: -o-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3);
   249      background-image: linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3);
   250  }
   251  @mixin linear-gradient-top3($default,$color1,$stop1,$color2,$stop2,$color3,$stop3,$color4,$stop4) {
   252      background-color: $default;
   253      background-image: -webkit-gradient(linear, left top, left bottom, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3), color-stop($stop4 $color4));
   254      background-image: -webkit-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
   255      background-image: -moz-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
   256      background-image: -ms-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
   257      background-image: -o-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
   258      background-image: linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
   259  }
   260  @mixin linear-gradient-left($default,$color1,$stop1,$color2,$stop2) {
   261      background-color: $default;
   262      background-image: -webkit-gradient(linear, left top, left top, color-stop($stop1, $color1), color-stop($stop2 $color2));
   263      background-image: -webkit-linear-gradient(left, $color1 $stop1, $color2 $stop2);
   264      background-image: -moz-linear-gradient(left, $color1 $stop1, $color2 $stop2);
   265      background-image: -ms-linear-gradient(left, $color1 $stop1, $color2 $stop2);
   266      background-image: -o-linear-gradient(left, $color1 $stop1, $color2 $stop2);
   267      background-image: linear-gradient(left, $color1 $stop1, $color2 $stop2);
   268  }
   269  @mixin linear-gradient-left2($default,$color1,$stop1,$color2,$stop2,$color3,$stop3) {
   270      background-color: $default;
   271      background-image: -webkit-gradient(linear, left top, left top, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3));
   272      background-image: -webkit-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3);
   273      background-image: -moz-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3);
   274      background-image: -ms-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3);
   275      background-image: -o-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3);
   276      background-image: linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3);
   277  }
   278  @mixin linear-gradient-left3($default,$color1,$stop1,$color2,$stop2,$color3,$stop3,$color4,$stop4) {
   279      background-color: $default;
   280      background-image: -webkit-gradient(linear, left top, left top, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3), color-stop($stop4 $color4));
   281      background-image: -webkit-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
   282      background-image: -moz-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
   283      background-image: -ms-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
   284      background-image: -o-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
   285      background-image: linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
   286  }
   287  
   288  // Text Shadow
   289  
   290  @mixin text-shadow($args) {
   291      text-shadow: $args;
   292  }
   293  
   294  
   295  // Transforms
   296  
   297  @mixin transform($args) {
   298      -webkit-transform: $args;
   299      -moz-transform: $args;
   300      -ms-transform: $args;
   301      -o-transform: $args;
   302      transform: $args;
   303  }
   304  @mixin transform-origin($args) {
   305      -webkit-transform-origin: $args;
   306      -moz-transform-origin: $args;
   307      -ms-transform-origin: $args;
   308      -o-transform-origin: $args;
   309      transform-origin: $args;
   310  }
   311  @mixin transform-style($style) {
   312      -webkit-transform-style: $style;
   313      -moz-transform-style: $style;
   314      -ms-transform-style: $style;
   315      -o-transform-style: $style;
   316      transform-style: $style;
   317  }
   318  @mixin rotate($deg:45deg){
   319      @include transform(rotate($deg));
   320  }
   321  @mixin scale($factor:.5){
   322      @include transform(scale($factor));
   323  }
   324  @mixin translate($x,$y){
   325      @include transform(translate($x,$y));
   326  }
   327  @mixin translate3d($x,$y,$z) {
   328      @include transform(translate3d($x,$y,$z));
   329  }
   330  @mixin translateHardware($x,$y) {
   331      @include translate($x,$y);
   332      -webkit-transform: translate3d($x,$y,0);
   333      -moz-transform: translate3d($x,$y,0);
   334      -o-transform: translate3d($x,$y,0);
   335      -ms-transform: translate3d($x,$y,0);
   336      transform: translate3d($x,$y,0);
   337  }
   338  
   339  
   340  // Transitions
   341  
   342  @mixin transition($args:200ms) {
   343      -webkit-transition: $args;
   344      -moz-transition: $args;
   345      -o-transition: $args;
   346      -ms-transition: $args;
   347      transition: $args;
   348  }
   349  @mixin transition-delay($delay:0) {
   350      -webkit-transition-delay: $delay;
   351      -moz-transition-delay: $delay;
   352      -o-transition-delay: $delay;
   353      -ms-transition-delay: $delay;
   354      transition-delay: $delay;
   355  }
   356  @mixin transition-duration($duration:200ms) {
   357      -webkit-transition-duration: $duration;
   358      -moz-transition-duration: $duration;
   359      -o-transition-duration: $duration;
   360      -ms-transition-duration: $duration;
   361      transition-duration: $duration;
   362  }
   363  @mixin transition-property($property:all) {
   364      -webkit-transition-property: $property;
   365      -moz-transition-property: $property;
   366      -o-transition-property: $property;
   367      -ms-transition-property: $property;
   368      transition-property: $property;
   369  }
   370  @mixin transition-timing-function($function:ease) {
   371      -webkit-transition-timing-function: $function;
   372      -moz-transition-timing-function: $function;
   373      -o-transition-timing-function: $function;
   374      -ms-transition-timing-function: $function;
   375      transition-timing-function: $function;
   376  }