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

     1  
     2  /*!
     3   * Waves v0.6.0
     4   * http://fian.my.id/Waves
     5   *
     6   * Copyright 2014 Alfiana E. Sibuea and other contributors
     7   * Released under the MIT license
     8   * https://github.com/fians/Waves/blob/master/LICENSE
     9   */
    10  
    11  
    12  .waves-effect {
    13      position: relative;
    14      cursor: pointer;
    15      display: inline-block;
    16      overflow: hidden;
    17      -webkit-user-select: none;
    18      -moz-user-select: none;
    19      -ms-user-select: none;
    20      user-select: none;
    21      -webkit-tap-highlight-color: transparent;
    22      // white-space: nowrap;
    23      // outline: 0;
    24  
    25      vertical-align: middle;
    26      // cursor: pointer;
    27      // border: none;
    28      // outline: none;
    29      // color: inherit;
    30      // background-color: rgba(0, 0, 0, 0);
    31      // font-size: 1em;
    32      // line-height:1em;
    33      // text-align: center;
    34      // text-decoration: none;
    35      z-index: 1;
    36      will-change: opacity, transform;
    37      @include transition(all .3s ease-out);
    38  
    39      .waves-ripple {
    40          position: absolute;
    41          border-radius: 50%;
    42          width: 20px;
    43          height: 20px;
    44          margin-top:-10px;
    45          margin-left:-10px;
    46          opacity: 0;
    47  
    48          background: rgba(0,0,0,0.2);
    49          // $gradient: rgba(0,0,0,0.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%;
    50          // background: -webkit-radial-gradient($gradient);
    51          // background: -o-radial-gradient($gradient);
    52          // background: -moz-radial-gradient($gradient);
    53          // background: radial-gradient($gradient);
    54          @include transition(all 0.7s ease-out);
    55          -webkit-transition-property: -webkit-transform, opacity;
    56          -moz-transition-property: -moz-transform, opacity;
    57          -o-transition-property: -o-transform, opacity;
    58          transition-property: transform, opacity;
    59          @include transform(scale(0));
    60          pointer-events: none;
    61      }
    62  
    63      // Waves Colors
    64      &.waves-light .waves-ripple {
    65        background-color: rgba(255, 255, 255, 0.45);
    66      }
    67  
    68      &.waves-red .waves-ripple {
    69        background-color: rgba(244, 67, 54, .70);
    70      }
    71      &.waves-yellow .waves-ripple {
    72        background-color: rgba(255, 235, 59, .70);
    73      }
    74      &.waves-orange .waves-ripple {
    75        background-color: rgba(255, 152, 0, .70);
    76      }
    77      &.waves-purple .waves-ripple {
    78        background-color: rgba(156, 39, 176, 0.70);
    79      }
    80      &.waves-green .waves-ripple {
    81        background-color: rgba(76, 175, 80, 0.70);
    82      }
    83      &.waves-teal .waves-ripple {
    84        background-color: rgba(0, 150, 136, 0.70);
    85      }
    86  
    87  }
    88  
    89  .waves-notransition {
    90      @include transition(none #{"!important"});
    91  }
    92  
    93  .waves-circle {
    94      @include transform(translateZ(0));
    95      -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
    96  }
    97  
    98  // .waves-button,
    99  // .waves-button:hover,
   100  // .waves-button:visited,
   101  // .waves-button-input {
   102  //     white-space: nowrap;
   103  //     vertical-align: middle;
   104  //     cursor: pointer;
   105  //     border: none;
   106  //     outline: none;
   107  //     color: inherit;
   108  //     background-color: rgba(0, 0, 0, 0);
   109  //     font-size: 1em;
   110  //     line-height:1em;
   111  //     text-align: center;
   112  //     text-decoration: none;
   113  //     z-index: 1;
   114  // }
   115  
   116  // .waves-button {
   117  //     padding: 0.85em 1.1em;
   118  //     border-radius: 0.2em;
   119  // }
   120  
   121  // .waves-button-input {
   122  //     margin: 0;
   123  //     padding: 0.85em 1.1em;
   124  // }
   125  
   126  .waves-input-wrapper {
   127      border-radius: 0.2em;
   128      vertical-align: bottom;
   129  
   130      // &.waves-button {
   131      //     padding: 0;
   132      // }
   133  
   134      .waves-button-input {
   135          position: relative;
   136          top: 0;
   137          left: 0;
   138          z-index: 1;
   139      }
   140  }
   141  
   142  .waves-circle {
   143      text-align: center;
   144      width: 2.5em;
   145      height: 2.5em;
   146      line-height: 2.5em;
   147      border-radius: 50%;
   148      -webkit-mask-image: none;
   149  }
   150  
   151  // .waves-float {
   152      // -webkit-mask-image: none;
   153      // @include box-shadow(0px 1px 1.5px 1px rgba(0, 0, 0, 0.12));
   154  
   155      // &:active {
   156          // @include box-shadow(0px 8px 20px 1px rgba(0, 0, 0, 0.30));
   157  //     }
   158  // }
   159  
   160  .waves-block {
   161      display: block;
   162  }
   163  
   164  /* Firefox Bug: link not triggered */
   165  a.waves-effect .waves-ripple {
   166      z-index: -1;
   167  }