View svgIcon.js
import React from 'react'
class SvgIcon extends React.Component {
static get propTypes () {
return {
className: React.PropTypes.string,
iconName: React.PropTypes.string,
viewBox: React.PropTypes.string
}
View simple-drawer.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
* {
margin: 0;
position: 0;
View chaffle-options.js
var chaffle = new Chaffle(el, {
lang: 'en', // default: 'en'
// 'en' || 'ja' || 'ja-hiragana' || 'ja-katakana' || 'ua'
speed: 20, // default: 20
delay: 100, // default: 100
});
View chaffle-mouseover.js
// Example: mouseover
import Chaffle from 'chaffle'
const elements = document.querySelectorAll('[data-chaffle]');
Array.prototype.forEach.call(elements, function (el) {
const chaffle = new Chaffle(el, { /* options */ });
el.addEventListener('mouseover', function () {
chaffle.init();
});
View chaffle-markup.html
<p data-chaffle="en">English</p>
<p data-chaffle="ja">日本語</p>
<p data-chaffle="ja-hiragana">ひらがな</p>
<p data-chaffle="ja-katakana">カタカナ</p>
<p data-chaffle="ua">Українська</p>
View chaffle.html
<script src="YOUR-PROJECT/chaffle.min.js"></script>
<!-- CDN -->
<script src="https://npmcdn.com/chaffle/chaffle.min.js"></script>
View chaffle.js
var elements = document.querySelectorAll('[data-chaffle]');
Array.prototype.forEach.call(elements, function (el) {
var chaffle = new Chaffle(el, { /* options */ });
chaffle.init();
});
View index.css
@import "./sircus-tools-sizes-mixins";
@mixin sircusToolsSize 12, height, vh;
@mixin sircusToolsSize 12, width, %;
@media (--g-viewport-sm) {
@mixin sircusToolsSize 12, width, %, sm-;
}
@media (--g-viewport-md) {
@mixin sircusToolsSize 12, width, %, md-;
View seek-selector.html
<html>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<script src="../src/seek-selector.js"></script>
View tools-shadow.css
.t-paperShadow1,
.t-paperShadow2,
.t-paperShadow3,
.t-paperShadow4,
.t-paperShadow5 {
border-radius:1px; // fallback iphpne6+
}
.t-paperShadow1 {
box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.3);