From 1795b479d960d51ef65bf020b62e54938c8a4279 Mon Sep 17 00:00:00 2001 From: Glen Conway Date: Sat, 13 Jun 2015 10:12:39 -0300 Subject: [PATCH 1/2] Added child button color. Added variable to set the background of the child buttons. --- src/mfb.css | 555 ++++++++++++++++++++++++++++++++++++++++++++++++ src/mfb.css.map | 8 +- src/mfb.min.css | 1 + src/mfb.scss | 3 + 4 files changed, 560 insertions(+), 7 deletions(-) create mode 100644 src/mfb.css create mode 100644 src/mfb.min.css diff --git a/src/mfb.css b/src/mfb.css new file mode 100644 index 0000000..dd9fca0 --- /dev/null +++ b/src/mfb.css @@ -0,0 +1,555 @@ +/** + * CONTENTS + * + * #Introduction........Naming conventions used throughout the code. + * + * #SETTINGS + * Variables............Globally-available variables and config. + * + * #TOOLS + * Mixins...............Useful mixins. + * + * #GENERIC + * Demo styles..........Styles for demo only (consider removing these). + * + * #BASE + * Raw styles...........The very basic component wrapper. + * Modifiers............The basic styles dependant on component placement. + * Debuggers............The basic styles dependant on component placement. + * + * #BUTTONS + * Base..................Wrapping and constraining every button. + * Modifiers.............Styles that depends on state and settings. + * Animations............Main animations of the component. + * Debuggers.............Styles for development. + * + * #LABELS + * Base..................Wrapping and constraining every label. + * Modifiers.............Styles that depends on state and settings. + * Debuggers.............Styles for development. + * + * #DEVELOPMENT + * In development........These styles are in development and not yet finalised + * Debuggers.............Helper styles and flags for development. + */ +/*------------------------------------*\ + #Introduction +\*------------------------------------*/ +/** + * The code AND the comments use naming conventions to refer to each part of + * the UI put in place by this component. If you see that somewhere they are + * not followed please consider a Pull Request. The naming conventions are: + * + * "Component" : the widget itself as a whole. This is the last time it will be + * called anything different than "component". So, stay away from + * "widget", "button" or anything else when referring to the + * Component in general. + * + * "Main Button" : the button that is always in view. Hovering or clicking on it + * will reveal the child buttons. + * + * "Child buttons" : if you've read the previous point you know what they are. + * Did you read the previous point? :) + * + * "Label(s)" : the tooltip that fades in when hovering over a button. + +/*------------------------------------*\ + #SETTINGS | Variables +\*------------------------------------*/ +/** + * These variables are the default styles that serve as fallback and can be + * easily customised at compile time. + * Consider overriding them in your own style sheets rather than editing them + * here. Refer to the docs for more info. + */ +/* COLORS ----------------------------*/ +/* EFFECTS ---------------------------*/ +/* SPEEDS ----------------------------*/ +/* SIZES -----------------------------*/ +/* SPACING ---------------------------*/ +/* OTHER VARIABLES -------------------*/ +/*------------------------------------*\ + #BASE | Raw styles +\*------------------------------------*/ +/** + * The very core styling of the button. + * These styles are shared by every instance of the button. + * Styles placed here should NOT care about placement in the screen, + * options chosen by the user or state of the button. + */ +.mfb-component--tl, .mfb-component--tr, .mfb-component--bl, .mfb-component--br { + box-sizing: border-box; + margin: 25px; + position: fixed; + white-space: nowrap; + z-index: 30; + padding-left: 0; + list-style: none; } + .mfb-component--tl *, .mfb-component--tr *, .mfb-component--bl *, .mfb-component--br *, .mfb-component--tl *:before, .mfb-component--tr *:before, .mfb-component--bl *:before, .mfb-component--br *:before, .mfb-component--tl *:after, .mfb-component--tr *:after, .mfb-component--bl *:after, .mfb-component--br *:after { + box-sizing: inherit; } + +/*------------------------------------*\ + #BASE | Modifiers +\*------------------------------------*/ +/** + * These styles depends on the placement of the button. + * Styles can be: + * 1. Top-left: modified by the " --tl " suffix. + * 2. Top-right: modified by the " --tr " suffix. + * 3. Bottom-left: modified by the " --bl " suffix. + * 4. Bottom-right: modified by the " --br " suffix. + */ +.mfb-component--tl { + left: 0; + top: 0; } + +.mfb-component--tr { + right: 0; + top: 0; } + +.mfb-component--bl { + left: 0; + bottom: 0; } + +.mfb-component--br { + right: 0; + bottom: 0; } + +/*------------------------------------*\ + #BUTTONS | Base +\*------------------------------------*/ +.mfb-component__button--main, .mfb-component__button--child { + background-color: #E40A5D; + display: inline-block; + position: relative; + border: none; + border-radius: 50%; + box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28); + cursor: pointer; + outline: none; + padding: 0; + position: relative; + -webkit-user-drag: none; + color: #f1f1f1; } + +/** + * This is the unordered list for the list items that contain + * the child buttons. + * + */ +.mfb-component__list { + list-style: none; + margin: 0; + padding: 0; } + .mfb-component__list > li { + display: block; + position: absolute; + top: 0; + right: 1px; + padding: 10px 0; + margin: -10px 0; } + +/** + * These are the basic styles for all the icons inside the main button + */ +.mfb-component__icon, .mfb-component__main-icon--active, .mfb-component__main-icon--resting, .mfb-component__child-icon { + position: absolute; + font-size: 18px; + text-align: center; + line-height: 56px; + width: 100%; } + +.mfb-component__wrap { + padding: 25px; + margin: -25px; } + +[data-mfb-toggle="hover"]:hover .mfb-component__icon, [data-mfb-toggle="hover"]:hover .mfb-component__main-icon--active, [data-mfb-toggle="hover"]:hover .mfb-component__main-icon--resting, [data-mfb-toggle="hover"]:hover .mfb-component__child-icon, [data-mfb-state="open"] .mfb-component__icon, [data-mfb-state="open"] .mfb-component__main-icon--active, [data-mfb-state="open"] .mfb-component__main-icon--resting, [data-mfb-state="open"] .mfb-component__child-icon { + -webkit-transform: scale(1) rotate(0deg); + transform: scale(1) rotate(0deg); } + +/*------------------------------------*\ + #BUTTONS | Modifiers +\*------------------------------------*/ +.mfb-component__button--main { + height: 56px; + width: 56px; + z-index: 20; } + +.mfb-component__button--child { + height: 56px; + width: 56px; + background: #E40A5D; } + +.mfb-component__main-icon--active, .mfb-component__main-icon--resting { + -webkit-transform: scale(1) rotate(360deg); + transform: scale(1) rotate(360deg); + -webkit-transition: -webkit-transform 150ms cubic-bezier(0.4, 0, 1, 1); + transition: transform 150ms cubic-bezier(0.4, 0, 1, 1); } + +.mfb-component__child-icon, .mfb-component__child-icon { + line-height: 56px; + font-size: 18px; } + +.mfb-component__main-icon--active { + opacity: 0; } + +[data-mfb-toggle="hover"]:hover .mfb-component__main-icon, [data-mfb-state="open"] .mfb-component__main-icon { + -webkit-transform: scale(1) rotate(0deg); + transform: scale(1) rotate(0deg); } +[data-mfb-toggle="hover"]:hover .mfb-component__main-icon--resting, [data-mfb-state="open"] .mfb-component__main-icon--resting { + opacity: 0; + position: absolute !important; } +[data-mfb-toggle="hover"]:hover .mfb-component__main-icon--active, [data-mfb-state="open"] .mfb-component__main-icon--active { + opacity: 1; } + +/*------------------------------------*\ + #BUTTONS | Animations +\*------------------------------------*/ +/** + * SLIDE IN + FADE + * When hovering the main button, the child buttons slide out from beneath + * the main button while transitioning from transparent to opaque. + * + */ +.mfb-component--tl.mfb-slidein .mfb-component__list li, .mfb-component--tr.mfb-slidein .mfb-component__list li { + opacity: 0; + transition: all 0.5s; } +.mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li, .mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li, .mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li, .mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li { + opacity: 1; } +.mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(1), .mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(1) { + -webkit-transform: translateY(70px); + transform: translateY(70px); } +.mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(2), .mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(2) { + -webkit-transform: translateY(140px); + transform: translateY(140px); } +.mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(3), .mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(3) { + -webkit-transform: translateY(210px); + transform: translateY(210px); } +.mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(4), .mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(4) { + -webkit-transform: translateY(280px); + transform: translateY(280px); } + +.mfb-component--bl.mfb-slidein .mfb-component__list li, .mfb-component--br.mfb-slidein .mfb-component__list li { + opacity: 0; + transition: all 0.5s; } +.mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li, .mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li, .mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li, .mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li { + opacity: 1; } +.mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(1), .mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(1) { + -webkit-transform: translateY(-70px); + transform: translateY(-70px); } +.mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(2), .mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(2) { + -webkit-transform: translateY(-140px); + transform: translateY(-140px); } +.mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(3), .mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(3) { + -webkit-transform: translateY(-210px); + transform: translateY(-210px); } +.mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(4), .mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(4) { + -webkit-transform: translateY(-280px); + transform: translateY(-280px); } + +/** + * SLIDE IN SPRING + * Same as slide-in but with a springy animation. + * + */ +.mfb-component--tl.mfb-slidein-spring .mfb-component__list li, .mfb-component--tr.mfb-slidein-spring .mfb-component__list li { + opacity: 0; + transition: all 0.5s; + transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } +.mfb-component--tl.mfb-slidein-spring .mfb-component__list li:nth-child(1), .mfb-component--tr.mfb-slidein-spring .mfb-component__list li:nth-child(1) { + transition-delay: 0.05s; } +.mfb-component--tl.mfb-slidein-spring .mfb-component__list li:nth-child(2), .mfb-component--tr.mfb-slidein-spring .mfb-component__list li:nth-child(2) { + transition-delay: 0.1s; } +.mfb-component--tl.mfb-slidein-spring .mfb-component__list li:nth-child(3), .mfb-component--tr.mfb-slidein-spring .mfb-component__list li:nth-child(3) { + transition-delay: 0.15s; } +.mfb-component--tl.mfb-slidein-spring .mfb-component__list li:nth-child(4), .mfb-component--tr.mfb-slidein-spring .mfb-component__list li:nth-child(4) { + transition-delay: 0.2s; } +.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li, .mfb-component--tl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li, .mfb-component--tr.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li, .mfb-component--tr.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li { + opacity: 1; } +.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--tl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(1), .mfb-component--tr.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--tr.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(1) { + transition-delay: 0.05s; + -webkit-transform: translateY(70px); + transform: translateY(70px); } +.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--tl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(2), .mfb-component--tr.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--tr.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(2) { + transition-delay: 0.1s; + -webkit-transform: translateY(140px); + transform: translateY(140px); } +.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--tl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(3), .mfb-component--tr.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--tr.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(3) { + transition-delay: 0.15s; + -webkit-transform: translateY(210px); + transform: translateY(210px); } +.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--tl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(4), .mfb-component--tr.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--tr.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(4) { + transition-delay: 0.2s; + -webkit-transform: translateY(280px); + transform: translateY(280px); } + +.mfb-component--bl.mfb-slidein-spring .mfb-component__list li, .mfb-component--br.mfb-slidein-spring .mfb-component__list li { + opacity: 0; + transition: all 0.5s; + transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } +.mfb-component--bl.mfb-slidein-spring .mfb-component__list li:nth-child(1), .mfb-component--br.mfb-slidein-spring .mfb-component__list li:nth-child(1) { + transition-delay: 0.05s; } +.mfb-component--bl.mfb-slidein-spring .mfb-component__list li:nth-child(2), .mfb-component--br.mfb-slidein-spring .mfb-component__list li:nth-child(2) { + transition-delay: 0.1s; } +.mfb-component--bl.mfb-slidein-spring .mfb-component__list li:nth-child(3), .mfb-component--br.mfb-slidein-spring .mfb-component__list li:nth-child(3) { + transition-delay: 0.15s; } +.mfb-component--bl.mfb-slidein-spring .mfb-component__list li:nth-child(4), .mfb-component--br.mfb-slidein-spring .mfb-component__list li:nth-child(4) { + transition-delay: 0.2s; } +.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li, .mfb-component--bl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li, .mfb-component--br.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li, .mfb-component--br.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li { + opacity: 1; } +.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--bl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(1), .mfb-component--br.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--br.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(1) { + transition-delay: 0.05s; + -webkit-transform: translateY(-70px); + transform: translateY(-70px); } +.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--bl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(2), .mfb-component--br.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--br.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(2) { + transition-delay: 0.1s; + -webkit-transform: translateY(-140px); + transform: translateY(-140px); } +.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--bl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(3), .mfb-component--br.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--br.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(3) { + transition-delay: 0.15s; + -webkit-transform: translateY(-210px); + transform: translateY(-210px); } +.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--bl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(4), .mfb-component--br.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--br.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(4) { + transition-delay: 0.2s; + -webkit-transform: translateY(-280px); + transform: translateY(-280px); } + +/** + * ZOOM-IN + * When hovering the main button, the child buttons grow + * from zero to normal size. + * + */ +.mfb-component--tl.mfb-zoomin .mfb-component__list li, .mfb-component--tr.mfb-zoomin .mfb-component__list li { + -webkit-transform: scale(0); + transform: scale(0); } +.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(1), .mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(1) { + -webkit-transform: translateY(70px) scale(0); + transform: translateY(70px) scale(0); + transition: all 0.5s; + transition-delay: 0.15s; } +.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(2), .mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(2) { + -webkit-transform: translateY(140px) scale(0); + transform: translateY(140px) scale(0); + transition: all 0.5s; + transition-delay: 0.1s; } +.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(3), .mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(3) { + -webkit-transform: translateY(210px) scale(0); + transform: translateY(210px) scale(0); + transition: all 0.5s; + transition-delay: 0.05s; } +.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(4), .mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(4) { + -webkit-transform: translateY(280px) scale(0); + transform: translateY(280px) scale(0); + transition: all 0.5s; + transition-delay: 0s; } +.mfb-component--tl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--tl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(1), .mfb-component--tr.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--tr.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(1) { + -webkit-transform: translateY(70px) scale(1); + transform: translateY(70px) scale(1); + transition-delay: 0.05s; } +.mfb-component--tl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--tl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(2), .mfb-component--tr.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--tr.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(2) { + -webkit-transform: translateY(140px) scale(1); + transform: translateY(140px) scale(1); + transition-delay: 0.1s; } +.mfb-component--tl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--tl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(3), .mfb-component--tr.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--tr.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(3) { + -webkit-transform: translateY(210px) scale(1); + transform: translateY(210px) scale(1); + transition-delay: 0.15s; } +.mfb-component--tl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--tl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(4), .mfb-component--tr.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--tr.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(4) { + -webkit-transform: translateY(280px) scale(1); + transform: translateY(280px) scale(1); + transition-delay: 0.2s; } + +.mfb-component--bl.mfb-zoomin .mfb-component__list li, .mfb-component--br.mfb-zoomin .mfb-component__list li { + -webkit-transform: scale(0); + transform: scale(0); } +.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(1), .mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(1) { + -webkit-transform: translateY(-70px) scale(0); + transform: translateY(-70px) scale(0); + transition: all 0.5s; + transition-delay: 0.15s; } +.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(2), .mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(2) { + -webkit-transform: translateY(-140px) scale(0); + transform: translateY(-140px) scale(0); + transition: all 0.5s; + transition-delay: 0.1s; } +.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(3), .mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(3) { + -webkit-transform: translateY(-210px) scale(0); + transform: translateY(-210px) scale(0); + transition: all 0.5s; + transition-delay: 0.05s; } +.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(4), .mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(4) { + -webkit-transform: translateY(-280px) scale(0); + transform: translateY(-280px) scale(0); + transition: all 0.5s; + transition-delay: 0s; } +.mfb-component--bl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--bl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(1), .mfb-component--br.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--br.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(1) { + -webkit-transform: translateY(-70px) scale(1); + transform: translateY(-70px) scale(1); + transition-delay: 0.05s; } +.mfb-component--bl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--bl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(2), .mfb-component--br.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--br.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(2) { + -webkit-transform: translateY(-140px) scale(1); + transform: translateY(-140px) scale(1); + transition-delay: 0.1s; } +.mfb-component--bl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--bl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(3), .mfb-component--br.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--br.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(3) { + -webkit-transform: translateY(-210px) scale(1); + transform: translateY(-210px) scale(1); + transition-delay: 0.15s; } +.mfb-component--bl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--bl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(4), .mfb-component--br.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--br.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(4) { + -webkit-transform: translateY(-280px) scale(1); + transform: translateY(-280px) scale(1); + transition-delay: 0.2s; } + +/** + * FOUNTAIN + * When hovering the main button the child buttons + * jump into view from outside the viewport + */ +.mfb-component--tl.mfb-fountain .mfb-component__list li, .mfb-component--tr.mfb-fountain .mfb-component__list li { + -webkit-transform: scale(0); + transform: scale(0); } +.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(1), .mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(1) { + -webkit-transform: translateY(-70px) scale(0); + transform: translateY(-70px) scale(0); + transition: all 0.5s; + transition-delay: 0.15s; } +.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(2), .mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(2) { + -webkit-transform: translateY(-140px) scale(0); + transform: translateY(-140px) scale(0); + transition: all 0.5s; + transition-delay: 0.1s; } +.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(3), .mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(3) { + -webkit-transform: translateY(-210px) scale(0); + transform: translateY(-210px) scale(0); + transition: all 0.5s; + transition-delay: 0.05s; } +.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(4), .mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(4) { + -webkit-transform: translateY(-280px) scale(0); + transform: translateY(-280px) scale(0); + transition: all 0.5s; + transition-delay: 0s; } +.mfb-component--tl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--tl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(1), .mfb-component--tr.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--tr.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(1) { + -webkit-transform: translateY(70px) scale(1); + transform: translateY(70px) scale(1); + transition-delay: 0.05s; } +.mfb-component--tl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--tl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(2), .mfb-component--tr.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--tr.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(2) { + -webkit-transform: translateY(140px) scale(1); + transform: translateY(140px) scale(1); + transition-delay: 0.1s; } +.mfb-component--tl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--tl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(3), .mfb-component--tr.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--tr.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(3) { + -webkit-transform: translateY(210px) scale(1); + transform: translateY(210px) scale(1); + transition-delay: 0.15s; } +.mfb-component--tl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--tl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(4), .mfb-component--tr.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--tr.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(4) { + -webkit-transform: translateY(280px) scale(1); + transform: translateY(280px) scale(1); + transition-delay: 0.2s; } + +.mfb-component--bl.mfb-fountain .mfb-component__list li, .mfb-component--br.mfb-fountain .mfb-component__list li { + -webkit-transform: scale(0); + transform: scale(0); } +.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(1), .mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(1) { + -webkit-transform: translateY(70px) scale(0); + transform: translateY(70px) scale(0); + transition: all 0.5s; + transition-delay: 0.15s; } +.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(2), .mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(2) { + -webkit-transform: translateY(140px) scale(0); + transform: translateY(140px) scale(0); + transition: all 0.5s; + transition-delay: 0.1s; } +.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(3), .mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(3) { + -webkit-transform: translateY(210px) scale(0); + transform: translateY(210px) scale(0); + transition: all 0.5s; + transition-delay: 0.05s; } +.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(4), .mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(4) { + -webkit-transform: translateY(280px) scale(0); + transform: translateY(280px) scale(0); + transition: all 0.5s; + transition-delay: 0s; } +.mfb-component--bl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--bl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(1), .mfb-component--br.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--br.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(1) { + -webkit-transform: translateY(-70px) scale(1); + transform: translateY(-70px) scale(1); + transition-delay: 0.05s; } +.mfb-component--bl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--bl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(2), .mfb-component--br.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--br.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(2) { + -webkit-transform: translateY(-140px) scale(1); + transform: translateY(-140px) scale(1); + transition-delay: 0.1s; } +.mfb-component--bl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--bl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(3), .mfb-component--br.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--br.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(3) { + -webkit-transform: translateY(-210px) scale(1); + transform: translateY(-210px) scale(1); + transition-delay: 0.15s; } +.mfb-component--bl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--bl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(4), .mfb-component--br.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--br.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(4) { + -webkit-transform: translateY(-280px) scale(1); + transform: translateY(-280px) scale(1); + transition-delay: 0.2s; } + +/*------------------------------------*\ + #LABELS | base +\*------------------------------------*/ +/** + * These are the labels associated to each button, + * exposed only when hovering the related button. + * They are called labels but are in fact data-attributes of + * each button (an anchor tag). + */ +[data-mfb-label]:after { + content: attr(data-mfb-label); + opacity: 0; + transition: all 0.5s; + background: rgba(0, 0, 0, 0.4); + padding: 4px 10px; + border-radius: 3px; + color: rgba(255, 255, 255, 0.8); + font-size: 14px; + font-weight: normal; + pointer-events: none; + line-height: normal; + position: absolute; + top: 50%; + margin-top: -11px; + transition: all 0.5s; } + +[data-mfb-toggle="hover"] [data-mfb-label]:hover:after, [data-mfb-state="open"] [data-mfb-label]:after { + content: attr(data-mfb-label); + opacity: 1; + transition: all 0.3s; } + +/*------------------------------------*\ + #LABELS | Modifiers +\*------------------------------------*/ +.mfb-component--br [data-mfb-label]:after, .mfb-component--tr [data-mfb-label]:after { + content: attr(data-mfb-label); + right: 70px; } + +.mfb-component--br .mfb-component__list [data-mfb-label]:after, .mfb-component--tr .mfb-component__list [data-mfb-label]:after { + content: attr(data-mfb-label); + right: 70px; } + +.mfb-component--tl [data-mfb-label]:after, .mfb-component--bl [data-mfb-label]:after { + content: attr(data-mfb-label); + left: 70px; } + +.mfb-component--tl .mfb-component__list [data-mfb-label]:after, .mfb-component--bl .mfb-component__list [data-mfb-label]:after { + content: attr(data-mfb-label); + left: 70px; } + +/*------------------------------------*\ + #DEVELOPMENT | In development +\*------------------------------------*/ +/** + * This part is where unfinished code should stay. + * When a feature is ready(sh) move these styles to their proper place. + */ +/*------------------------------------*\ + #DEVELOPMENT | Debuggers +\*------------------------------------*/ +/** + * These are mainly helpers for development. They do not have to end up + * in production but it's handy to keep them when developing. + */ +/** + * Apply this class to the html tag when developing the slide-in button + */ +/*# sourceMappingURL=mfb.css.map */ \ No newline at end of file diff --git a/src/mfb.css.map b/src/mfb.css.map index 2e20298..155fdd2 100644 --- a/src/mfb.css.map +++ b/src/mfb.css.map @@ -1,7 +1 @@ -{ -"version": 3, -"mappings": "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", -"sources": ["mfb.scss","_/_slidein.scss","_/_slidein-spring.scss","_/_zoomin.scss","_/_fountain.scss"], -"names": [], -"file": "mfb.css" -} +{"version":3,"file":"mfb.css","sources":["mfb.scss","_/_slidein.scss","_/_slidein-spring.scss","_/_zoomin.scss","_/_fountain.scss"],"sourcesContent":[],"mappings":"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","names":[]} \ No newline at end of file diff --git a/src/mfb.min.css b/src/mfb.min.css new file mode 100644 index 0000000..15b14cc --- /dev/null +++ b/src/mfb.min.css @@ -0,0 +1 @@ +.mfb-component--tl,.mfb-component--tr,.mfb-component--bl,.mfb-component--br{box-sizing:border-box;margin:25px;position:fixed;white-space:nowrap;z-index:30;padding-left:0;list-style:none}.mfb-component--tl *,.mfb-component--tr *,.mfb-component--bl *,.mfb-component--br *,.mfb-component--tl *:before,.mfb-component--tr *:before,.mfb-component--bl *:before,.mfb-component--br *:before,.mfb-component--tl *:after,.mfb-component--tr *:after,.mfb-component--bl *:after,.mfb-component--br *:after{box-sizing:inherit}.mfb-component--tl{left:0;top:0}.mfb-component--tr{right:0;top:0}.mfb-component--bl{left:0;bottom:0}.mfb-component--br{right:0;bottom:0}.mfb-component__button--main,.mfb-component__button--child{background-color:#e40a5d;display:inline-block;position:relative;border:none;border-radius:50%;box-shadow:0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);cursor:pointer;outline:none;padding:0;position:relative;-webkit-user-drag:none;color:#f1f1f1}.mfb-component__list{list-style:none;margin:0;padding:0}.mfb-component__list>li{display:block;position:absolute;top:0;right:1px;padding:10px 0;margin:-10px 0}.mfb-component__icon,.mfb-component__main-icon--active,.mfb-component__main-icon--resting,.mfb-component__child-icon{position:absolute;font-size:18px;text-align:center;line-height:56px;width:100%}.mfb-component__wrap{padding:25px;margin:-25px}[data-mfb-toggle="hover"]:hover .mfb-component__icon,[data-mfb-toggle="hover"]:hover .mfb-component__main-icon--active,[data-mfb-toggle="hover"]:hover .mfb-component__main-icon--resting,[data-mfb-toggle="hover"]:hover .mfb-component__child-icon,[data-mfb-state="open"] .mfb-component__icon,[data-mfb-state="open"] .mfb-component__main-icon--active,[data-mfb-state="open"] .mfb-component__main-icon--resting,[data-mfb-state="open"] .mfb-component__child-icon{-webkit-transform:scale(1) rotate(0deg);transform:scale(1) rotate(0deg)}.mfb-component__button--main{height:56px;width:56px;z-index:20}.mfb-component__button--child{height:56px;width:56px;background:#e40a5d}.mfb-component__main-icon--active,.mfb-component__main-icon--resting{-webkit-transform:scale(1) rotate(360deg);transform:scale(1) rotate(360deg);-webkit-transition:-webkit-transform 150ms cubic-bezier(.4,0,1,1);transition:transform 150ms cubic-bezier(.4,0,1,1)}.mfb-component__child-icon,.mfb-component__child-icon{line-height:56px;font-size:18px}.mfb-component__main-icon--active{opacity:0}[data-mfb-toggle="hover"]:hover .mfb-component__main-icon,[data-mfb-state="open"] .mfb-component__main-icon{-webkit-transform:scale(1) rotate(0deg);transform:scale(1) rotate(0deg)}[data-mfb-toggle="hover"]:hover .mfb-component__main-icon--resting,[data-mfb-state="open"] .mfb-component__main-icon--resting{opacity:0;position:absolute !important}[data-mfb-toggle="hover"]:hover .mfb-component__main-icon--active,[data-mfb-state="open"] .mfb-component__main-icon--active{opacity:1}.mfb-component--tl.mfb-slidein .mfb-component__list li,.mfb-component--tr.mfb-slidein .mfb-component__list li{opacity:0;transition:all .5s}.mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li,.mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li,.mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li,.mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li{opacity:1}.mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),.mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(1){-webkit-transform:translateY(70px);transform:translateY(70px)}.mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),.mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(2){-webkit-transform:translateY(140px);transform:translateY(140px)}.mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),.mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(3){-webkit-transform:translateY(210px);transform:translateY(210px)}.mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),.mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(4){-webkit-transform:translateY(280px);transform:translateY(280px)}.mfb-component--bl.mfb-slidein .mfb-component__list li,.mfb-component--br.mfb-slidein .mfb-component__list li{opacity:0;transition:all .5s}.mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li,.mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li,.mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li,.mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li{opacity:1}.mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),.mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(1){-webkit-transform:translateY(-70px);transform:translateY(-70px)}.mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),.mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(2){-webkit-transform:translateY(-140px);transform:translateY(-140px)}.mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),.mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(3){-webkit-transform:translateY(-210px);transform:translateY(-210px)}.mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),.mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(4){-webkit-transform:translateY(-280px);transform:translateY(-280px)}.mfb-component--tl.mfb-slidein-spring .mfb-component__list li,.mfb-component--tr.mfb-slidein-spring .mfb-component__list li{opacity:0;transition:all .5s;transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)}.mfb-component--tl.mfb-slidein-spring .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-slidein-spring .mfb-component__list li:nth-child(1){transition-delay:.05s}.mfb-component--tl.mfb-slidein-spring .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-slidein-spring .mfb-component__list li:nth-child(2){transition-delay:.1s}.mfb-component--tl.mfb-slidein-spring .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-slidein-spring .mfb-component__list li:nth-child(3){transition-delay:.15s}.mfb-component--tl.mfb-slidein-spring .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-slidein-spring .mfb-component__list li:nth-child(4){transition-delay:.2s}.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li,.mfb-component--tl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li,.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li,.mfb-component--tr.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li{opacity:1}.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),.mfb-component--tl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(1){transition-delay:.05s;-webkit-transform:translateY(70px);transform:translateY(70px)}.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),.mfb-component--tl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(2){transition-delay:.1s;-webkit-transform:translateY(140px);transform:translateY(140px)}.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),.mfb-component--tl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(3){transition-delay:.15s;-webkit-transform:translateY(210px);transform:translateY(210px)}.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),.mfb-component--tl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(4){transition-delay:.2s;-webkit-transform:translateY(280px);transform:translateY(280px)}.mfb-component--bl.mfb-slidein-spring .mfb-component__list li,.mfb-component--br.mfb-slidein-spring .mfb-component__list li{opacity:0;transition:all .5s;transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)}.mfb-component--bl.mfb-slidein-spring .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-slidein-spring .mfb-component__list li:nth-child(1){transition-delay:.05s}.mfb-component--bl.mfb-slidein-spring .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-slidein-spring .mfb-component__list li:nth-child(2){transition-delay:.1s}.mfb-component--bl.mfb-slidein-spring .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-slidein-spring .mfb-component__list li:nth-child(3){transition-delay:.15s}.mfb-component--bl.mfb-slidein-spring .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-slidein-spring .mfb-component__list li:nth-child(4){transition-delay:.2s}.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li,.mfb-component--bl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li,.mfb-component--br.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li,.mfb-component--br.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li{opacity:1}.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),.mfb-component--bl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(1){transition-delay:.05s;-webkit-transform:translateY(-70px);transform:translateY(-70px)}.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),.mfb-component--bl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(2){transition-delay:.1s;-webkit-transform:translateY(-140px);transform:translateY(-140px)}.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),.mfb-component--bl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(3){transition-delay:.15s;-webkit-transform:translateY(-210px);transform:translateY(-210px)}.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),.mfb-component--bl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(4){transition-delay:.2s;-webkit-transform:translateY(-280px);transform:translateY(-280px)}.mfb-component--tl.mfb-zoomin .mfb-component__list li,.mfb-component--tr.mfb-zoomin .mfb-component__list li{-webkit-transform:scale(0);transform:scale(0)}.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(1){-webkit-transform:translateY(70px) scale(0);transform:translateY(70px) scale(0);transition:all .5s;transition-delay:.15s}.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(2){-webkit-transform:translateY(140px) scale(0);transform:translateY(140px) scale(0);transition:all .5s;transition-delay:.1s}.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(3){-webkit-transform:translateY(210px) scale(0);transform:translateY(210px) scale(0);transition:all .5s;transition-delay:.05s}.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(4){-webkit-transform:translateY(280px) scale(0);transform:translateY(280px) scale(0);transition:all .5s;transition-delay:0s}.mfb-component--tl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),.mfb-component--tl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(1){-webkit-transform:translateY(70px) scale(1);transform:translateY(70px) scale(1);transition-delay:.05s}.mfb-component--tl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),.mfb-component--tl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(2){-webkit-transform:translateY(140px) scale(1);transform:translateY(140px) scale(1);transition-delay:.1s}.mfb-component--tl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),.mfb-component--tl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(3){-webkit-transform:translateY(210px) scale(1);transform:translateY(210px) scale(1);transition-delay:.15s}.mfb-component--tl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),.mfb-component--tl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(4){-webkit-transform:translateY(280px) scale(1);transform:translateY(280px) scale(1);transition-delay:.2s}.mfb-component--bl.mfb-zoomin .mfb-component__list li,.mfb-component--br.mfb-zoomin .mfb-component__list li{-webkit-transform:scale(0);transform:scale(0)}.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(1){-webkit-transform:translateY(-70px) scale(0);transform:translateY(-70px) scale(0);transition:all .5s;transition-delay:.15s}.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(2){-webkit-transform:translateY(-140px) scale(0);transform:translateY(-140px) scale(0);transition:all .5s;transition-delay:.1s}.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(3){-webkit-transform:translateY(-210px) scale(0);transform:translateY(-210px) scale(0);transition:all .5s;transition-delay:.05s}.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(4){-webkit-transform:translateY(-280px) scale(0);transform:translateY(-280px) scale(0);transition:all .5s;transition-delay:0s}.mfb-component--bl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),.mfb-component--bl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(1){-webkit-transform:translateY(-70px) scale(1);transform:translateY(-70px) scale(1);transition-delay:.05s}.mfb-component--bl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),.mfb-component--bl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(2){-webkit-transform:translateY(-140px) scale(1);transform:translateY(-140px) scale(1);transition-delay:.1s}.mfb-component--bl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),.mfb-component--bl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(3){-webkit-transform:translateY(-210px) scale(1);transform:translateY(-210px) scale(1);transition-delay:.15s}.mfb-component--bl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),.mfb-component--bl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(4){-webkit-transform:translateY(-280px) scale(1);transform:translateY(-280px) scale(1);transition-delay:.2s}.mfb-component--tl.mfb-fountain .mfb-component__list li,.mfb-component--tr.mfb-fountain .mfb-component__list li{-webkit-transform:scale(0);transform:scale(0)}.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(1){-webkit-transform:translateY(-70px) scale(0);transform:translateY(-70px) scale(0);transition:all .5s;transition-delay:.15s}.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(2){-webkit-transform:translateY(-140px) scale(0);transform:translateY(-140px) scale(0);transition:all .5s;transition-delay:.1s}.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(3){-webkit-transform:translateY(-210px) scale(0);transform:translateY(-210px) scale(0);transition:all .5s;transition-delay:.05s}.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(4){-webkit-transform:translateY(-280px) scale(0);transform:translateY(-280px) scale(0);transition:all .5s;transition-delay:0s}.mfb-component--tl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),.mfb-component--tl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(1){-webkit-transform:translateY(70px) scale(1);transform:translateY(70px) scale(1);transition-delay:.05s}.mfb-component--tl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),.mfb-component--tl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(2){-webkit-transform:translateY(140px) scale(1);transform:translateY(140px) scale(1);transition-delay:.1s}.mfb-component--tl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),.mfb-component--tl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(3){-webkit-transform:translateY(210px) scale(1);transform:translateY(210px) scale(1);transition-delay:.15s}.mfb-component--tl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),.mfb-component--tl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(4){-webkit-transform:translateY(280px) scale(1);transform:translateY(280px) scale(1);transition-delay:.2s}.mfb-component--bl.mfb-fountain .mfb-component__list li,.mfb-component--br.mfb-fountain .mfb-component__list li{-webkit-transform:scale(0);transform:scale(0)}.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(1){-webkit-transform:translateY(70px) scale(0);transform:translateY(70px) scale(0);transition:all .5s;transition-delay:.15s}.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(2){-webkit-transform:translateY(140px) scale(0);transform:translateY(140px) scale(0);transition:all .5s;transition-delay:.1s}.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(3){-webkit-transform:translateY(210px) scale(0);transform:translateY(210px) scale(0);transition:all .5s;transition-delay:.05s}.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(4){-webkit-transform:translateY(280px) scale(0);transform:translateY(280px) scale(0);transition:all .5s;transition-delay:0s}.mfb-component--bl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),.mfb-component--bl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(1){-webkit-transform:translateY(-70px) scale(1);transform:translateY(-70px) scale(1);transition-delay:.05s}.mfb-component--bl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),.mfb-component--bl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(2){-webkit-transform:translateY(-140px) scale(1);transform:translateY(-140px) scale(1);transition-delay:.1s}.mfb-component--bl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),.mfb-component--bl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(3){-webkit-transform:translateY(-210px) scale(1);transform:translateY(-210px) scale(1);transition-delay:.15s}.mfb-component--bl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),.mfb-component--bl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(4){-webkit-transform:translateY(-280px) scale(1);transform:translateY(-280px) scale(1);transition-delay:.2s}[data-mfb-label]:after{content:attr(data-mfb-label);opacity:0;transition:all .5s;background:rgba(0,0,0,.4);padding:4px 10px;border-radius:3px;color:rgba(255,255,255,.8);font-size:14px;font-weight:normal;pointer-events:none;line-height:normal;position:absolute;top:50%;margin-top:-11px;transition:all .5s}[data-mfb-toggle="hover"] [data-mfb-label]:hover:after,[data-mfb-state="open"] [data-mfb-label]:after{content:attr(data-mfb-label);opacity:1;transition:all .3s}.mfb-component--br [data-mfb-label]:after,.mfb-component--tr [data-mfb-label]:after{content:attr(data-mfb-label);right:70px}.mfb-component--br .mfb-component__list [data-mfb-label]:after,.mfb-component--tr .mfb-component__list [data-mfb-label]:after{content:attr(data-mfb-label);right:70px}.mfb-component--tl [data-mfb-label]:after,.mfb-component--bl [data-mfb-label]:after{content:attr(data-mfb-label);left:70px}.mfb-component--tl .mfb-component__list [data-mfb-label]:after,.mfb-component--bl .mfb-component__list [data-mfb-label]:after{content:attr(data-mfb-label);left:70px} \ No newline at end of file diff --git a/src/mfb.scss b/src/mfb.scss index be9a71a..08c2764 100644 --- a/src/mfb.scss +++ b/src/mfb.scss @@ -69,6 +69,8 @@ // the main/primary color $main-color: #E40A5D !default; +// the child button color +$child_button_color: #E40A5D !default; // button colors $button-text-color: #f1f1f1; $button-box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28) !default; @@ -266,6 +268,7 @@ $number-of-child-buttons: 4 !default; @extend %mfb-component__button; height: $child_button_size; width: $child_button_size; + background: $child_button_color; } // the icons for the main button .mfb-component__main-icon--active, From 15c84c47be45b533a6da71e76cf21480f50b91e7 Mon Sep 17 00:00:00 2001 From: Glen Conway Date: Sat, 13 Jun 2015 10:18:08 -0300 Subject: [PATCH 2/2] Added myself as contributor. --- package.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/package.json b/package.json index 098d245..9406103 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,10 @@ { "name": "Christian Flach", "email": "cmfcmf.flach@gmail.com" + }, + { + "name": "Glen Conway", + "email": "glen.conway@kinsac.com" } ], "license": "MIT",