search

fians / Waves

Click effect inspired by Google's Material Design
http://fians.github.io/Waves/
MIT License
3.47k stars 503 forks source link

waves not work with bootstrap #144

Open dongwenting opened 8 years ago

dongwenting commented 8 years ago

my html like this, but I can't see the effect. because of adding bootstrapp css.

 <!DOCTYPE html> 
 <html> 
 <head> 
   <meta charset="utf-8" />
      <meta http-equiv="x-ua-compatible" content="ie=edge" />
      <title>OA</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1" />

   <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" />
   <!-- waves -->
    <link rel="stylesheet" href="//cdn.bootcss.com/node-waves/0.7.2/waves.min.css" />
 </head> 
<body>
<button class="btn btn-default waves-effect waves-button">已审批</button>

<!-- JQuery -->
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- waves -->
<script src="//cdn.bootcss.com/node-waves/0.7.2/waves.min.js"></script>
<script>
$(function() {

});
</script>

Kaishiyoku commented 8 years ago

Hello,

have you tried attaching an initializing Waves manually?

Waves.attach('.button', ['waves-button']);
Waves.init();

I am setting the effects only to certain elements because of potential side effects.

dongwenting commented 8 years ago

Yes, I add this into js, but still not work.

 <!DOCTYPE html> 
  <html> 
  <head> 
      <meta charset="utf-8" />
      <meta http-equiv="x-ua-compatible" content="ie=edge" />
      <title>OA</title> 
   <meta name="description" content="OA" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<!-- waves -->
<link rel="stylesheet" href="//cdn.bootcss.com/node-waves/0.7.2/waves.min.css" />
</head> 
 <body>
<button class="btn btn-danger">已审批</button>
<!-- JQuery -->
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>

    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- waves -->
<script src="//cdn.bootcss.com/node-waves/0.7.2/waves.min.js"></script>
<script>
$(function() {
    Waves.attach('.button', ['waves-button']);
    Waves.init();
});
</script>
 </html>
dongwenting commented 8 years ago

sorry, i made a mistake, it should be 

Waves.attach('.btn', ['waves-button']);
Waves.init();

I can see the effect now ,but not good looking.

Kaishiyoku commented 8 years ago

What do you exactly mean? At some buttons I am using waves-light when the button color is too dark. I am currently writing on my phone, I will look at some example code of myself how I used Waves together with Bootstrap 3.

fians commented 8 years ago

Sorry, waves currently didn't work well with bootstrap. See #107

Kaishiyoku commented 8 years ago

:+1:

santoshban commented 8 years ago

I faced lots of issues with any version of bootstrap.

dongwenting commented 8 years ago

I found a css which makes waves work with bootstrap. you can download it and rename it waves.min.css.


    (function(){
        if(typeof(Waves) !== 'undefined'){
            Waves.attach('.btn:not(.btn-icon):not(.btn-float)');
            Waves.attach('.btn-icon, .btn-float', ['waves-circle', 'waves-float']);
            Waves.init();
        }
    })();

/*!
 * Waves v0.7.2
 * http://fian.my.id/Waves 
 * 
 * Copyright 2014 Alfiana E. Sibuea and other contributors 
 * Released under the MIT license 
 * https://github.com/fians/Waves/blob/master/LICENSE 
 */

.waves-effect {
  position: relative;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.waves-effect .waves-ripple {
  position: absolute;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  opacity: 0;
  background: rgba(0, 0, 0, 0.2);
  background: -webkit-radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  background: -o-radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  background: -moz-radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  background: radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  -o-transition-property: -o-transform, opacity;
  transition-property: transform, opacity;
  -webkit-transform: scale(0) translate(0, 0);
  -moz-transform: scale(0) translate(0, 0);
  -ms-transform: scale(0) translate(0, 0);
  -o-transform: scale(0) translate(0, 0);
  transform: scale(0) translate(0, 0);
  pointer-events: none;
}

.waves-effect.waves-light .waves-ripple {
  background: rgba(255, 255, 255, 0.4);
  background: -webkit-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  background: -o-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  background: -moz-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  background: radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
}

.waves-effect.waves-classic .waves-ripple {
  background: rgba(0, 0, 0, 0.2);
}

.waves-effect.waves-classic.waves-light .waves-ripple {
  background: rgba(255, 255, 255, 0.4);
}

.waves-notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

.waves-button,
.waves-circle {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(circle, #ffffff 100%, #000000 100%);
}

.waves-button,
.waves-button:hover,
.waves-button:visited,
.waves-button-input {
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: none;
  outline: none;
  color: inherit;
  background-color: rgba(0, 0, 0, 0);
  font-size: 1em;
  line-height: 1em;
  text-align: center;
  text-decoration: none;
  z-index: 1;
}

.waves-button {
  padding: 0.85em 1.1em;
  border-radius: 0.2em;
}

.waves-button-input {
  margin: 0;
  padding: 0.85em 1.1em;
}

.waves-input-wrapper {
  border-radius: 0.2em;
  vertical-align: bottom;
}

.waves-input-wrapper.waves-button {
  padding: 0;
}

.waves-input-wrapper .waves-button-input {
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
}

.waves-circle {
  text-align: center;
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5em;
  border-radius: 50%;
}

.waves-float {
  -webkit-mask-image: none;
  -webkit-box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.12);
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  -o-transition: all 300ms;
  transition: all 300ms;
}

.waves-float:active {
  -webkit-box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3);
}

.waves-block {
  display: block;
}
ChristianRich commented 8 years ago

FYI, I'm having absolutely no issues with Bootstrap and Waves. It works well and looks great. I have only tried with button elements.

EDIT: I cannot get it working with A elements (links)

fians commented 8 years ago

@dongwenting Hi, I don't see any difference if I compare your css with current css of Waves (0.7.4). Am I missing something?

@ChristianRich Hi Christian, can you create new issue for this? So we can investigate it further. Thanks!

dongwenting commented 8 years ago

@fians I'm sorry. the difference is not css, but the js. forgive my poor English - -! As the demo above. Below js will make waves work with bootstrap.

    (function(){
        if(typeof(Waves) !== 'undefined'){
            Waves.attach('.btn:not(.btn-icon):not(.btn-float)');
            Waves.attach('.btn-icon, .btn-float', ['waves-circle', 'waves-float']);
            Waves.init();
        }
    })();

The below is wrong, because the waves-button class will overlay bootstrap's background-color and border-color.

$(function() {
    Waves.attach('.btn', ['waves-button']);
    Waves.init();
});
fians commented 8 years ago

@dongwenting I will figure it out how to make this works. Thanks :+1: