git.roojs.org Git - bootswatch/blob - MDB Free/sass/mdb/free/_waves.scss

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