Skip to content

Commit 1fea9ea

Browse files
DJWassinkDJWassink
committed
Switched to sass and namespaced all the css rules Fixes #1 
1 parent 4074549 commit 1fea9ea

File tree

12 files changed

+437
-388
lines changed

12 files changed

+437
-388
lines changed

‎.gitignore

+3-1
Original file line numberDiff line numberDiff line change
@@ -27,4 +27,6 @@ node_modules
2727
# Users Environment Variables
2828
.lock-wscript
2929

30-
bower_components
30+
bower_components
31+
.sass-cache
32+
.idea

‎README.md

+9-3
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
A floating round material button that has animations between states.
33

44
## Screenshot animation
5-
![Animation](screenshot.gif)
5+
![Animation](example/screenshot.gif)
66

77
## Demo
88
[Click here](http://button.dirkjanwassink.nl)
@@ -25,10 +25,10 @@ Currently the following icons/states are supported:
2525
* arrow-up
2626

2727
## Usage
28-
Be sure to first run a `npm bower install` to get the required libraries. Now simply use the following snippet:
28+
Simply use the following snippet:
2929

3030
```
31-
<div class="icon-container" data-ripple-color="#ffffff">
31+
<div class="animated-material-fab">
3232
<div class="icon-holder equals">
3333
<div class="icon-bar bar1"></div>
3434
<div class="icon-bar bar2"></div>
@@ -37,8 +37,14 @@ Be sure to first run a `npm bower install` to get the required libraries. Now si
3737
</div>
3838
```
3939

40+
For a example check the example dir.
41+
4042
Change the class `equals` to any class you want to use (see [States](#states))
4143

44+
## Ripple
45+
This lib plays pretty nice with a ripple effect library I made. Which is available [here](https://github.com/DJWassink/simple-ripple)
46+
See the example dir for a example on how to combine these.
47+
4248
## Issues
4349
* Play and pause button are a bit funky. Need to find a way to display them without border attributes.
4450
* Changing the scale in Chrome first changes the icon-container (blue circle) and the icon after that.

‎dist/amf.min.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎bower.json ‎example/bower.json

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
{
2-
"name": "MaterialIcon",
2+
"name": "AnimatedMaterialFloatbutton",
33
"version": "0.0.1",
44
"authors": [
55
"Dirk-Jan Wassink <[email protected]>"
66
],
77
"description": "A simple material icon animation implementation",
8-
"main": "main.js",
8+
"main": "index.html",
99
"license": "MIT",
1010
"homepage": "dirkjanwassink.nl",
1111
"ignore": [
@@ -16,7 +16,7 @@
1616
"tests"
1717
],
1818
"dependencies": {
19-
"jquery": "~2.1.3",
20-
"bootstrap-material-design": "~0.3.0"
21-
}
19+
"simple-ripple": "~1.0.0"
20+
},
21+
"moduleType": []
2222
}

‎example/index.html

+108
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>Material icons</title>
6+
<link rel="stylesheet" href="./bower_components/simple-ripple/dist/ripple.min.css">
7+
<link rel="stylesheet" type="text/css" href="../dist/amf.min.css">
8+
<style>
9+
html, body {
10+
margin: 0;
11+
padding: 0;
12+
width: 100%;
13+
height: 100%;
14+
font-family:'verdana';
15+
background: #B6B6B6;
16+
}
17+
#controls {
18+
background: #BBDEFB;
19+
padding: 15px;
20+
}
21+
button {
22+
border:none;
23+
border-radius: 2px;
24+
padding: 8px 10px;
25+
margin: 2px;
26+
background: #1976D2;
27+
color: white;
28+
transition: all .35s ease;
29+
}
30+
button:hover {
31+
cursor: pointer;
32+
background:#03A9F4;
33+
}
34+
</style>
35+
</head>
36+
37+
<body>
38+
39+
<div id="controls">
40+
<label>
41+
Size (px) / 5:
42+
<input id="icon-size" type="number" value="15">
43+
</label>
44+
<button type="text" id="toggle-icon">Toggle visibility</button>
45+
</div>
46+
47+
<div class="animated-material-fab ripple">
48+
<div class="icon-holder equals">
49+
<div class="icon-bar bar1"></div>
50+
<div class="icon-bar bar2"></div>
51+
<div class="icon-bar bar3"></div>
52+
</div>
53+
</div>
54+
55+
</body>
56+
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
57+
<script type="text/javascript" src="./bower_components/simple-ripple/dist/ripple.min.js"></script>
58+
<script>
59+
$(document).ready(function () {
60+
var animations = ['equals', 'pause', 'check', 'arrow-left', 'min', 'stop', 'cross', 'arrow-right', 'close', 'arrow-down', 'hamburger', 'search', 'play', 'arrow-up'];
61+
var animationIndex = 1;
62+
63+
animations.forEach(function(animation) {
64+
$('#controls').append('<button class="icon-switcher" data-icon="' + animation + '">' + animation + '</button>');
65+
});
66+
67+
$(document).on('click','.icon-switcher', function() {
68+
var animation = $(this).data('icon');
69+
console.log(animation);
70+
$('.icon-holder').removeClass().addClass('icon-holder ' + animation);
71+
});
72+
73+
$('.animated-material-fab').on('click', function (e) {
74+
e.preventDefault();
75+
e.stopPropagation();
76+
77+
var $clickedElement = $(this);
78+
79+
var $holder = $clickedElement.find('.icon-holder');
80+
81+
$holder.removeClass().addClass('icon-holder');
82+
83+
84+
$holder.addClass(animations[animationIndex]);
85+
animationIndex++;
86+
if (animationIndex === animations.length) animationIndex = 0;
87+
});
88+
89+
$('#icon-size').on('change', function (e) {
90+
e.preventDefault();
91+
e.stopPropagation();
92+
93+
var size = parseInt($(this).val());
94+
$('.animated-material-fab').css('fontSize', size + 'px');
95+
});
96+
97+
$('#toggle-icon').on('click', function (e) {
98+
e.preventDefault();
99+
e.stopPropagation();
100+
101+
$('.animated-material-fab').toggleClass('closing');
102+
});
103+
104+
//start ripple
105+
initSimpleRipple();
106+
});
107+
</script>
108+
</html>

‎screenshot.gif ‎example/screenshot.gif

File renamed without changes.

‎gulpfile.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
var gulp = require('gulp');
2+
var sass = require('gulp-ruby-sass');
3+
var minifyCss = require('gulp-minify-css');
4+
var rename = require('gulp-rename');
5+
var uglify = require('gulp-uglify');
6+
7+
gulp.task('sass', function () {
8+
return sass('./src/amf.sass')
9+
.pipe(rename({suffix: '.min'}))
10+
.pipe(minifyCss({compatibility: 'ie8'}))
11+
.pipe(gulp.dest('./dist'));
12+
});
13+
14+
gulp.task('watch', function () {
15+
gulp.watch('./src/*.sass', ['sass']);
16+
});
17+
18+
gulp.task('default', ['sass', 'copy-js']);

‎index.html

-33
This file was deleted.

‎javascripts/main.js

-48
This file was deleted.

‎package.json

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"name": "animated-material-button",
3+
"version": "1.0.0",
4+
"description": "Simple material ripple effect in native js + css",
5+
"main": " ",
6+
"directories": {
7+
"example": "example"
8+
},
9+
"dependencies": {},
10+
"devDependencies": {
11+
"gulp": "^3.9.0",
12+
"gulp-minify-css": "^1.2.1",
13+
"gulp-rename": "^1.2.2",
14+
"gulp-ruby-sass": "^2.0.4"
15+
},
16+
"scripts": {
17+
"test": "echo \"Error: no test specified\" && exit 1"
18+
},
19+
"repository": {
20+
"type": "git",
21+
"url": "git+https://github.com/DJWassink/Animated-material-floatbutton.git"
22+
},
23+
"keywords": [
24+
"material",
25+
"float",
26+
"fab",
27+
"animated",
28+
"design"
29+
],
30+
"author": "Dirk-Jan Wassink <[email protected]>",
31+
"license": "MIT",
32+
"bugs": {
33+
"url": "https://github.com/DJWassink/Animated-material-floatbutton/issues"
34+
},
35+
"homepage": "https://github.com/DJWassink/Animated-material-floatbutton#readme"
36+
}

0 commit comments

Comments
 (0)