PHP Classes

File: assets/vendor/bootstrap-md/scss/core/_waves.scss

Recommend this page to a friend!
  Classes of akeel   F3A   assets/vendor/bootstrap-md/scss/core/_waves.scss   Download  
File: assets/vendor/bootstrap-md/scss/core/_waves.scss
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: F3A
PHP Web development framework like Laravel lite
Author: By
Last change:
Date: 2 years ago
Size: 3,430 bytes
 

Contents

Class file image Download
/*! * Waves v0.7.6 * http://fian.my.id/Waves * * Copyright 2014-2018 Alfiana E. Sibuea and other contributors * Released under the MIT license * https://github.com/fians/Waves/blob/master/LICENSE */ @mixin waves-transition($transition){ -webkit-transition: $transition; -moz-transition: $transition; -o-transition: $transition; transition: $transition; } @mixin waves-transform($string){ -webkit-transform: $string; -moz-transform: $string; -ms-transform: $string; -o-transform: $string; transform: $string; } @mixin waves-box-shadow($shadow){ -webkit-box-shadow: $shadow; box-shadow: $shadow; } .waves-effect { position: relative; overflow: hidden; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; .waves-ripple { $gradient: rgba(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%; position: absolute; width: 100px; height: 100px; margin-top: -50px; margin-left: -50px; pointer-events: none; background: rgba(0, 0, 0, .2); background: radial-gradient($gradient); border-radius: 50%; opacity: 0; -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -o-transition-property: -o-transform, opacity; transition-property: transform, opacity; @include waves-transition(all .5s ease-out); @include waves-transform(scale(0) translate(0,0)); } &.waves-light .waves-ripple { $gradient: rgba(255, 255, 255, .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%; background: rgba(255, 255, 255, .4); background: radial-gradient($gradient); } &.waves-classic .waves-ripple { background: rgba(0, 0, 0, .2); } &.waves-classic.waves-light .waves-ripple { background: rgba(255, 255, 255, .4); } } .waves-notransition { @include waves-transition(none #{"!important"}); } .waves-button, .waves-circle { @include waves-transform(translateZ(0)); -webkit-mask-image: -webkit-radial-gradient(circle, #fff 100%, #000 100%); } .waves-button, .waves-button:hover, .waves-button:visited, .waves-button-input { z-index: 1; font-size: 1em; line-height: 1em; color: inherit; text-align: center; text-decoration: none; white-space: nowrap; vertical-align: middle; cursor: pointer; background-color: rgba(0, 0, 0, 0); border: none; outline: none; } .waves-button { padding: .85em 1.1em; border-radius: .2em; } .waves-button-input { padding: .85em 1.1em; margin: 0; } .waves-input-wrapper { position: relative; display: inline-block; vertical-align: middle; border-radius: .2em; &.waves-button { padding: 0; } .waves-button-input { position: relative; top: 0; left: 0; z-index: 1; } } .waves-circle { width: 2.5em; height: 2.5em; line-height: 2.5em; text-align: center; border-radius: 50%; } .waves-float { -webkit-mask-image: none; @include waves-box-shadow(0 1px 1.5px 1px rgba(0, 0, 0, .12)); @include waves-transition(all 300ms); &:active { @include waves-box-shadow(0 8px 20px 1px rgba(0, 0, 0, .3)); } } .waves-block { display: block; } a { &.waves-effect, &.waves-light { display: inline-block; } }