Angularjs Material floating button directive
How do I make an angularjs material floating button directive?
Customizable, semantic Material design floating action menu with buttons, implemented as an Angularjs directive. Also available in vanilla html.. What is a angularjs material floating button directive? How do you make a angularjs material floating button directive? This script and codes were developed by Nobitagit on 03 December 2022, Saturday.
Angularjs Material floating button directive - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Angularjs Material floating button directive</title> <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css"> <link href='https://fonts.googleapis.com/css?family=Raleway:100,200,300,400' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /*------------------------------------*\ #SETTINGS | Variables
\*------------------------------------*/
/* COLORS ----------------------------*/
/* SPEEDS ----------------------------*/
/* SIZES -----------------------------*/
/* 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, .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 *, .mfb-component--tl *, .mfb-component--tr *, .mfb-component--bl *, .mfb-component--br *, .mfb-component *:before, .mfb-component--tl *:before, .mfb-component--tr *:before, .mfb-component--bl *:before, .mfb-component--br *:before, .mfb-component *:after, .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, .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; font-weight: bold; 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; padding: 10px 0; margin: -10px 0;
}
/** * This is 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;
}
.mfb-component:hover .mfb-component__icon, .mfb-component--tl:hover .mfb-component__icon, .mfb-component--tr:hover .mfb-component__icon, .mfb-component--bl:hover .mfb-component__icon, .mfb-component--br:hover .mfb-component__icon, .mfb-component:hover .mfb-component__main-icon--active, .mfb-component--tl:hover .mfb-component__main-icon--active, .mfb-component--tr:hover .mfb-component__main-icon--active, .mfb-component--bl:hover .mfb-component__main-icon--active, .mfb-component--br:hover .mfb-component__main-icon--active,
.mfb-component:hover .mfb-component__main-icon--resting,
.mfb-component--tl:hover .mfb-component__main-icon--resting,
.mfb-component--tr:hover .mfb-component__main-icon--resting,
.mfb-component--bl:hover .mfb-component__main-icon--resting,
.mfb-component--br:hover .mfb-component__main-icon--resting, .mfb-component:hover .mfb-component__child-icon, .mfb-component--tl:hover .mfb-component__child-icon, .mfb-component--tr:hover .mfb-component__child-icon, .mfb-component--bl:hover .mfb-component__child-icon, .mfb-component--br:hover .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;
}
.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__main-icon--active { opacity: 0;
}
.mfb-component:hover .mfb-component__main-icon, .mfb-component--tl:hover .mfb-component__main-icon, .mfb-component--tr:hover .mfb-component__main-icon, .mfb-component--bl:hover .mfb-component__main-icon, .mfb-component--br:hover .mfb-component__main-icon { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg);
}
.mfb-component:hover .mfb-component__main-icon--resting, .mfb-component--tl:hover .mfb-component__main-icon--resting, .mfb-component--tr:hover .mfb-component__main-icon--resting, .mfb-component--bl:hover .mfb-component__main-icon--resting, .mfb-component--br:hover .mfb-component__main-icon--resting { opacity: 0;
}
.mfb-component:hover .mfb-component__main-icon--active, .mfb-component--tl:hover .mfb-component__main-icon--active, .mfb-component--tr:hover .mfb-component__main-icon--active, .mfb-component--bl:hover .mfb-component__main-icon--active, .mfb-component--br:hover .mfb-component__main-icon--active { opacity: 1;
}
/*------------------------------------*\ #BUTTONS | Animations
\*------------------------------------*/
/** * 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 { 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) { 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) { 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) { 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) { transform: translateY(-280px) scale(0); transition: all 0.5s; transition-delay: 0s;
}
.mfb-component--tl.mfb-fountain:hover .mfb-component__list li:nth-child(1),
.mfb-component--tr.mfb-fountain:hover .mfb-component__list li:nth-child(1) { transform: translateY(70px) scale(1); transition-delay: 0.05s;
}
.mfb-component--tl.mfb-fountain:hover .mfb-component__list li:nth-child(2),
.mfb-component--tr.mfb-fountain:hover .mfb-component__list li:nth-child(2) { transform: translateY(140px) scale(1); transition-delay: 0.1s;
}
.mfb-component--tl.mfb-fountain:hover .mfb-component__list li:nth-child(3),
.mfb-component--tr.mfb-fountain:hover .mfb-component__list li:nth-child(3) { transform: translateY(210px) scale(1); transition-delay: 0.15s;
}
.mfb-component--tl.mfb-fountain:hover .mfb-component__list li:nth-child(4),
.mfb-component--tr.mfb-fountain:hover .mfb-component__list li:nth-child(4) { 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 { 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) { 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) { 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) { 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) { transform: translateY(280px) scale(0); transition: all 0.5s; transition-delay: 0s;
}
.mfb-component--bl.mfb-fountain:hover .mfb-component__list li:nth-child(1),
.mfb-component--br.mfb-fountain:hover .mfb-component__list li:nth-child(1) { transform: translateY(-70px) scale(1); transition-delay: 0.05s;
}
.mfb-component--bl.mfb-fountain:hover .mfb-component__list li:nth-child(2),
.mfb-component--br.mfb-fountain:hover .mfb-component__list li:nth-child(2) { transform: translateY(-140px) scale(1); transition-delay: 0.1s;
}
.mfb-component--bl.mfb-fountain:hover .mfb-component__list li:nth-child(3),
.mfb-component--br.mfb-fountain:hover .mfb-component__list li:nth-child(3) { transform: translateY(-210px) scale(1); transition-delay: 0.15s;
}
.mfb-component--bl.mfb-fountain:hover .mfb-component__list li:nth-child(4),
.mfb-component--br.mfb-fountain:hover .mfb-component__list li:nth-child(4) { transform: translateY(-280px) scale(1); transition-delay: 0.2s;
}
/** * 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:hover .mfb-component__list li,
.mfb-component--tr.mfb-slidein:hover .mfb-component__list li { opacity: 1;
}
.mfb-component--tl.mfb-slidein:hover .mfb-component__list li:nth-child(1),
.mfb-component--tr.mfb-slidein:hover .mfb-component__list li:nth-child(1) { -webkit-transform: translateY(70px); transform: translateY(70px);
}
.mfb-component--tl.mfb-slidein:hover .mfb-component__list li:nth-child(2),
.mfb-component--tr.mfb-slidein:hover .mfb-component__list li:nth-child(2) { -webkit-transform: translateY(140px); transform: translateY(140px);
}
.mfb-component--tl.mfb-slidein:hover .mfb-component__list li:nth-child(3),
.mfb-component--tr.mfb-slidein:hover .mfb-component__list li:nth-child(3) { -webkit-transform: translateY(210px); transform: translateY(210px);
}
.mfb-component--tl.mfb-slidein:hover .mfb-component__list li:nth-child(4),
.mfb-component--tr.mfb-slidein:hover .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:hover .mfb-component__list li,
.mfb-component--br.mfb-slidein:hover .mfb-component__list li { opacity: 1;
}
.mfb-component--bl.mfb-slidein:hover .mfb-component__list li:nth-child(1),
.mfb-component--br.mfb-slidein:hover .mfb-component__list li:nth-child(1) { -webkit-transform: translateY(-70px); transform: translateY(-70px);
}
.mfb-component--bl.mfb-slidein:hover .mfb-component__list li:nth-child(2),
.mfb-component--br.mfb-slidein:hover .mfb-component__list li:nth-child(2) { -webkit-transform: translateY(-140px); transform: translateY(-140px);
}
.mfb-component--bl.mfb-slidein:hover .mfb-component__list li:nth-child(3),
.mfb-component--br.mfb-slidein:hover .mfb-component__list li:nth-child(3) { -webkit-transform: translateY(-210px); transform: translateY(-210px);
}
.mfb-component--bl.mfb-slidein:hover .mfb-component__list li:nth-child(4),
.mfb-component--br.mfb-slidein:hover .mfb-component__list li:nth-child(4) { -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 { 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) { 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) { 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) { 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) { transform: translateY(280px) scale(0); transition: all 0.5s; transition-delay: 0s;
}
.mfb-component--tl.mfb-zoomin:hover .mfb-component__list li:nth-child(1),
.mfb-component--tr.mfb-zoomin:hover .mfb-component__list li:nth-child(1) { transform: translateY(70px) scale(1); transition-delay: 0.05s;
}
.mfb-component--tl.mfb-zoomin:hover .mfb-component__list li:nth-child(2),
.mfb-component--tr.mfb-zoomin:hover .mfb-component__list li:nth-child(2) { transform: translateY(140px) scale(1); transition-delay: 0.1s;
}
.mfb-component--tl.mfb-zoomin:hover .mfb-component__list li:nth-child(3),
.mfb-component--tr.mfb-zoomin:hover .mfb-component__list li:nth-child(3) { transform: translateY(210px) scale(1); transition-delay: 0.15s;
}
.mfb-component--tl.mfb-zoomin:hover .mfb-component__list li:nth-child(4),
.mfb-component--tr.mfb-zoomin:hover .mfb-component__list li:nth-child(4) { 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 { 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) { 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) { 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) { 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) { transform: translateY(-280px) scale(0); transition: all 0.5s; transition-delay: 0s;
}
.mfb-component--bl.mfb-zoomin:hover .mfb-component__list li:nth-child(1),
.mfb-component--br.mfb-zoomin:hover .mfb-component__list li:nth-child(1) { transform: translateY(-70px) scale(1); transition-delay: 0.05s;
}
.mfb-component--bl.mfb-zoomin:hover .mfb-component__list li:nth-child(2),
.mfb-component--br.mfb-zoomin:hover .mfb-component__list li:nth-child(2) { transform: translateY(-140px) scale(1); transition-delay: 0.1s;
}
.mfb-component--bl.mfb-zoomin:hover .mfb-component__list li:nth-child(3),
.mfb-component--br.mfb-zoomin:hover .mfb-component__list li:nth-child(3) { transform: translateY(-210px) scale(1); transition-delay: 0.15s;
}
.mfb-component--bl.mfb-zoomin:hover .mfb-component__list li:nth-child(4),
.mfb-component--br.mfb-zoomin:hover .mfb-component__list li:nth-child(4) { 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: 13px; pointer-events: none; position: absolute; top: 50%; margin-top: -10.5px; transition: all 0.5s;
}
[data-mfb-label]:hover: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--tl [data-mfb-label]:after, .mfb-component--bl [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 */
html.mfb-slide-in { border-top: 5px solid teal;
}
html.mfb-debug * { border: 1px solid red;
}
html, body { height: 100%; min-height: 100%;
}
html { background: #E9EBEC; font-family: 'Raleway', sans-serif; font-weight: 200;
}
body { display: flex; align-items: center; justify-content: center;
}
h1 { margin: 0.2em 0; color: rgba(40, 33, 33, 0.7); color: #7c6298; font-weight: 400;
}
header { background: #00C8BE; padding: 0.3em 1em; position: relative; z-index: 20;
}
.viewCode header { box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
}
.showcode { background: #e8d831; color: #7c6298; width: 40px; height: 40px; text-align: center; position: absolute; right: 1em; bottom: 0; margin-bottom: -15px; border-radius: 100%; font-size: 16px; cursor: pointer; box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26); transition: all .3s;
}
.viewCode .showcode { transform: rotateX(-180deg); box-shadow: 0px -2px 5px 0 rgba(0, 0, 0, 0.26);
}
.icon-nocode, .icon-yepcode { transition: opacity .3s; position: absolute; left: 0; display: block; width: 100%; line-height: 40px;
}
.icon-nocode { opacity: 0;
}
.viewCode .icon-nocode { opacity: 1;
}
.viewCode .icon-yepcode { opacity: 0;
}
.panel { width: 90%; position: relative; max-width: 650px; box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26); background: #F5F5F5; border-radius: 3px; overflow: hidden;
}
article { min-height: 180px; padding: 1em; font-weight: 200; line-height: 1.5em; position: relative;
}
footer { padding: 0.3em 1em 1em;
}
footer a, footer a:active, footer a:visited { color: inherit;
}
.code { position: absolute; top: 0; top: 0; left: 0; right: 0; height: 100%; overflow: scroll; background: rgba(124, 98, 152, 0.94); color: rgba(245, 247, 247, 0.92); padding: 0em 1em; transition: all .4s; transform: translateY(-100%);
}
.code p:first-child { margin-top: 2em;
}
.code a { color: rgba(232, 216, 49, 0.9);
}
.viewCode .code { transform: translateY(0); box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.36);
}
.actions { font-weight: 300; text-transform: uppercase; font-size: 0.8em; padding: 1em; border: none; background: none; transition: color .2s; cursor: pointer;
}
.actions:hover { color: #1e1eab; background: #F5F5F5; box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
}
code, pre { background: rgba(255, 255, 255, 0.1); color: rgba(232, 216, 49, 0.9); font-family: "Source Code Pro", Monaco, Menlo, Consolas, "Courier New",monospace; padding: 0.5em; border-radius: 3px; margin: 1em 0;
}
code { display: inline; vertical-align: middle; margin: 0;
}
pre { display: block;
}
.striked { text-decoration: line-through;
}
.mfb-component--tl { animation: fromTop 1s 1; -webkit-animation: fromTop 1s 1;
}
.mfb-component--tr { animation: fromTop 1.3s 1; -webkit-animation: fromTop 1.3s 1;
}
.mfb-component--br { animation: fromBottom 1.6s 1; -webkit-animation: fromBottom 1.6s 1;
}
.mfb-component--bl { animation: fromBottom 1.9s 1; -webkit-animation: fromBottom 1.9s 1;
}
@keyframes fromBottom { 0% { transform: translateY(250px); } 100% { transform: translateY(0); }
}
@keyframes fromTop { 0% { transform: translateY(-250px); } 100% { transform: translateY(0); }
}
@-webkit-keyframes fromBottom { 0% { transform: translateY(250px); } 100% { transform: translateY(0); }
}
@-webkit-keyframes fromTop { 0% { transform: translateY(-250px); } 100% { transform: translateY(0); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <html ng-app="test-app"> <head> <meta charset="UTF-8"> </head> <body ng-controller="myCtrl"> <nav mfb-menu position="{{pos}}" effect="{{chosenEffect}}" label="hover here" active-icon="ion-edit" resting-icon="ion-plus-round" ng-repeat="pos in positions"> <a mfb-button icon="{{button.icon}}" label="{{button.label}}" ng-repeat="button in buttons"></a> </nav> <section id="panel" class="panel"> <header> <h1> Angularjs Material Floating Buttons </h1> <span id="showcode" class="showcode"> <i class="ion-eye icon-yepcode"></i> <i class="ion-eye-disabled icon-nocode"></i> </span> </header> <article> <p> Customizable, semantic Material floating action button implemented as an Angularjs directive. Also available in vanilla html. <br> <span class="striked">Shamelessly</span> Openly inspired by Google Inbox, Evernote and Path. </p> <p> Click on the <strong>yellow button</strong> here above for a code preview or choose an effect from the <strong>dropdown</strong> below and hover over any button on the corners of the screen. </p> <p> <select id="selections" ng-model="chosenEffect"> <option value="{{effect.value}}" ng-disabled="{{!effect.value}}" ng-repeat="effect in effects">{{effect.name}}</option> </select> </p> <div class="code"> <p> To add Material Floating Buttons to any project just download the files from here below or clone the repo from Github. <br> </p> <pre>git clone https://github.com/nobitagit/ng-material-floating-button.git</pre> <p> After referencing the styles in your header drop the MFB markup in your HTML like so: </p>
<pre><nav mfb-menu position="{{pos}}" effect="{{chosenEffect}}" label="your main button text here" active-icon="ion-edit" resting-icon="ion-plus-round"> <a mfb-button icon="icon-class" label="child button text"> </a>
</nav></pre> <p> The attributes provide the element configuration for position, labels and icons used. All the other styles and configurations are just css. </p> <p> The best way to customise the styles is to build them directly from the source as the scss file is filled with customizable variables. From there choose your favorite colors and sizes and then compile the css. </p> <p> If you use <a href="http://gruntjs.com/">Grunt</a> and have cloned the repo run <code>npm init</code> and then <code>grunt build</code> or <code>grunt watch</code> to have automatic compilation. </p> </div> </article> <footer> <a href="https://github.com/nobitagit/ng-material-floating-button" > <button class="actions"> <i class="ion-social-github"></i> View on Github </button> </a> <a href="https://twitter.com/share?text=Check this material floating button directive for Angularjs!&url=https://nobitagit.github.io/ng-material-floating-button/&hashtags=material,design,button,angularjs,directive"> <button class="actions"> <i class="ion-social-twitter"></i> Share on Twitter </button> </a> </footer> </section> </body>
</html> <script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Angularjs Material floating button directive - Script Codes CSS Codes
/*------------------------------------*\ #SETTINGS | Variables
\*------------------------------------*/
/* COLORS ----------------------------*/
/* SPEEDS ----------------------------*/
/* SIZES -----------------------------*/
/* 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, .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 *, .mfb-component--tl *, .mfb-component--tr *, .mfb-component--bl *, .mfb-component--br *, .mfb-component *:before, .mfb-component--tl *:before, .mfb-component--tr *:before, .mfb-component--bl *:before, .mfb-component--br *:before, .mfb-component *:after, .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, .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; font-weight: bold; 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; padding: 10px 0; margin: -10px 0;
}
/** * This is 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;
}
.mfb-component:hover .mfb-component__icon, .mfb-component--tl:hover .mfb-component__icon, .mfb-component--tr:hover .mfb-component__icon, .mfb-component--bl:hover .mfb-component__icon, .mfb-component--br:hover .mfb-component__icon, .mfb-component:hover .mfb-component__main-icon--active, .mfb-component--tl:hover .mfb-component__main-icon--active, .mfb-component--tr:hover .mfb-component__main-icon--active, .mfb-component--bl:hover .mfb-component__main-icon--active, .mfb-component--br:hover .mfb-component__main-icon--active,
.mfb-component:hover .mfb-component__main-icon--resting,
.mfb-component--tl:hover .mfb-component__main-icon--resting,
.mfb-component--tr:hover .mfb-component__main-icon--resting,
.mfb-component--bl:hover .mfb-component__main-icon--resting,
.mfb-component--br:hover .mfb-component__main-icon--resting, .mfb-component:hover .mfb-component__child-icon, .mfb-component--tl:hover .mfb-component__child-icon, .mfb-component--tr:hover .mfb-component__child-icon, .mfb-component--bl:hover .mfb-component__child-icon, .mfb-component--br:hover .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;
}
.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__main-icon--active { opacity: 0;
}
.mfb-component:hover .mfb-component__main-icon, .mfb-component--tl:hover .mfb-component__main-icon, .mfb-component--tr:hover .mfb-component__main-icon, .mfb-component--bl:hover .mfb-component__main-icon, .mfb-component--br:hover .mfb-component__main-icon { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg);
}
.mfb-component:hover .mfb-component__main-icon--resting, .mfb-component--tl:hover .mfb-component__main-icon--resting, .mfb-component--tr:hover .mfb-component__main-icon--resting, .mfb-component--bl:hover .mfb-component__main-icon--resting, .mfb-component--br:hover .mfb-component__main-icon--resting { opacity: 0;
}
.mfb-component:hover .mfb-component__main-icon--active, .mfb-component--tl:hover .mfb-component__main-icon--active, .mfb-component--tr:hover .mfb-component__main-icon--active, .mfb-component--bl:hover .mfb-component__main-icon--active, .mfb-component--br:hover .mfb-component__main-icon--active { opacity: 1;
}
/*------------------------------------*\ #BUTTONS | Animations
\*------------------------------------*/
/** * 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 { 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) { 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) { 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) { 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) { transform: translateY(-280px) scale(0); transition: all 0.5s; transition-delay: 0s;
}
.mfb-component--tl.mfb-fountain:hover .mfb-component__list li:nth-child(1),
.mfb-component--tr.mfb-fountain:hover .mfb-component__list li:nth-child(1) { transform: translateY(70px) scale(1); transition-delay: 0.05s;
}
.mfb-component--tl.mfb-fountain:hover .mfb-component__list li:nth-child(2),
.mfb-component--tr.mfb-fountain:hover .mfb-component__list li:nth-child(2) { transform: translateY(140px) scale(1); transition-delay: 0.1s;
}
.mfb-component--tl.mfb-fountain:hover .mfb-component__list li:nth-child(3),
.mfb-component--tr.mfb-fountain:hover .mfb-component__list li:nth-child(3) { transform: translateY(210px) scale(1); transition-delay: 0.15s;
}
.mfb-component--tl.mfb-fountain:hover .mfb-component__list li:nth-child(4),
.mfb-component--tr.mfb-fountain:hover .mfb-component__list li:nth-child(4) { 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 { 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) { 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) { 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) { 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) { transform: translateY(280px) scale(0); transition: all 0.5s; transition-delay: 0s;
}
.mfb-component--bl.mfb-fountain:hover .mfb-component__list li:nth-child(1),
.mfb-component--br.mfb-fountain:hover .mfb-component__list li:nth-child(1) { transform: translateY(-70px) scale(1); transition-delay: 0.05s;
}
.mfb-component--bl.mfb-fountain:hover .mfb-component__list li:nth-child(2),
.mfb-component--br.mfb-fountain:hover .mfb-component__list li:nth-child(2) { transform: translateY(-140px) scale(1); transition-delay: 0.1s;
}
.mfb-component--bl.mfb-fountain:hover .mfb-component__list li:nth-child(3),
.mfb-component--br.mfb-fountain:hover .mfb-component__list li:nth-child(3) { transform: translateY(-210px) scale(1); transition-delay: 0.15s;
}
.mfb-component--bl.mfb-fountain:hover .mfb-component__list li:nth-child(4),
.mfb-component--br.mfb-fountain:hover .mfb-component__list li:nth-child(4) { transform: translateY(-280px) scale(1); transition-delay: 0.2s;
}
/** * 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:hover .mfb-component__list li,
.mfb-component--tr.mfb-slidein:hover .mfb-component__list li { opacity: 1;
}
.mfb-component--tl.mfb-slidein:hover .mfb-component__list li:nth-child(1),
.mfb-component--tr.mfb-slidein:hover .mfb-component__list li:nth-child(1) { -webkit-transform: translateY(70px); transform: translateY(70px);
}
.mfb-component--tl.mfb-slidein:hover .mfb-component__list li:nth-child(2),
.mfb-component--tr.mfb-slidein:hover .mfb-component__list li:nth-child(2) { -webkit-transform: translateY(140px); transform: translateY(140px);
}
.mfb-component--tl.mfb-slidein:hover .mfb-component__list li:nth-child(3),
.mfb-component--tr.mfb-slidein:hover .mfb-component__list li:nth-child(3) { -webkit-transform: translateY(210px); transform: translateY(210px);
}
.mfb-component--tl.mfb-slidein:hover .mfb-component__list li:nth-child(4),
.mfb-component--tr.mfb-slidein:hover .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:hover .mfb-component__list li,
.mfb-component--br.mfb-slidein:hover .mfb-component__list li { opacity: 1;
}
.mfb-component--bl.mfb-slidein:hover .mfb-component__list li:nth-child(1),
.mfb-component--br.mfb-slidein:hover .mfb-component__list li:nth-child(1) { -webkit-transform: translateY(-70px); transform: translateY(-70px);
}
.mfb-component--bl.mfb-slidein:hover .mfb-component__list li:nth-child(2),
.mfb-component--br.mfb-slidein:hover .mfb-component__list li:nth-child(2) { -webkit-transform: translateY(-140px); transform: translateY(-140px);
}
.mfb-component--bl.mfb-slidein:hover .mfb-component__list li:nth-child(3),
.mfb-component--br.mfb-slidein:hover .mfb-component__list li:nth-child(3) { -webkit-transform: translateY(-210px); transform: translateY(-210px);
}
.mfb-component--bl.mfb-slidein:hover .mfb-component__list li:nth-child(4),
.mfb-component--br.mfb-slidein:hover .mfb-component__list li:nth-child(4) { -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 { 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) { 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) { 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) { 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) { transform: translateY(280px) scale(0); transition: all 0.5s; transition-delay: 0s;
}
.mfb-component--tl.mfb-zoomin:hover .mfb-component__list li:nth-child(1),
.mfb-component--tr.mfb-zoomin:hover .mfb-component__list li:nth-child(1) { transform: translateY(70px) scale(1); transition-delay: 0.05s;
}
.mfb-component--tl.mfb-zoomin:hover .mfb-component__list li:nth-child(2),
.mfb-component--tr.mfb-zoomin:hover .mfb-component__list li:nth-child(2) { transform: translateY(140px) scale(1); transition-delay: 0.1s;
}
.mfb-component--tl.mfb-zoomin:hover .mfb-component__list li:nth-child(3),
.mfb-component--tr.mfb-zoomin:hover .mfb-component__list li:nth-child(3) { transform: translateY(210px) scale(1); transition-delay: 0.15s;
}
.mfb-component--tl.mfb-zoomin:hover .mfb-component__list li:nth-child(4),
.mfb-component--tr.mfb-zoomin:hover .mfb-component__list li:nth-child(4) { 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 { 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) { 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) { 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) { 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) { transform: translateY(-280px) scale(0); transition: all 0.5s; transition-delay: 0s;
}
.mfb-component--bl.mfb-zoomin:hover .mfb-component__list li:nth-child(1),
.mfb-component--br.mfb-zoomin:hover .mfb-component__list li:nth-child(1) { transform: translateY(-70px) scale(1); transition-delay: 0.05s;
}
.mfb-component--bl.mfb-zoomin:hover .mfb-component__list li:nth-child(2),
.mfb-component--br.mfb-zoomin:hover .mfb-component__list li:nth-child(2) { transform: translateY(-140px) scale(1); transition-delay: 0.1s;
}
.mfb-component--bl.mfb-zoomin:hover .mfb-component__list li:nth-child(3),
.mfb-component--br.mfb-zoomin:hover .mfb-component__list li:nth-child(3) { transform: translateY(-210px) scale(1); transition-delay: 0.15s;
}
.mfb-component--bl.mfb-zoomin:hover .mfb-component__list li:nth-child(4),
.mfb-component--br.mfb-zoomin:hover .mfb-component__list li:nth-child(4) { 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: 13px; pointer-events: none; position: absolute; top: 50%; margin-top: -10.5px; transition: all 0.5s;
}
[data-mfb-label]:hover: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--tl [data-mfb-label]:after, .mfb-component--bl [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 */
html.mfb-slide-in { border-top: 5px solid teal;
}
html.mfb-debug * { border: 1px solid red;
}
html, body { height: 100%; min-height: 100%;
}
html { background: #E9EBEC; font-family: 'Raleway', sans-serif; font-weight: 200;
}
body { display: flex; align-items: center; justify-content: center;
}
h1 { margin: 0.2em 0; color: rgba(40, 33, 33, 0.7); color: #7c6298; font-weight: 400;
}
header { background: #00C8BE; padding: 0.3em 1em; position: relative; z-index: 20;
}
.viewCode header { box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
}
.showcode { background: #e8d831; color: #7c6298; width: 40px; height: 40px; text-align: center; position: absolute; right: 1em; bottom: 0; margin-bottom: -15px; border-radius: 100%; font-size: 16px; cursor: pointer; box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26); transition: all .3s;
}
.viewCode .showcode { transform: rotateX(-180deg); box-shadow: 0px -2px 5px 0 rgba(0, 0, 0, 0.26);
}
.icon-nocode, .icon-yepcode { transition: opacity .3s; position: absolute; left: 0; display: block; width: 100%; line-height: 40px;
}
.icon-nocode { opacity: 0;
}
.viewCode .icon-nocode { opacity: 1;
}
.viewCode .icon-yepcode { opacity: 0;
}
.panel { width: 90%; position: relative; max-width: 650px; box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26); background: #F5F5F5; border-radius: 3px; overflow: hidden;
}
article { min-height: 180px; padding: 1em; font-weight: 200; line-height: 1.5em; position: relative;
}
footer { padding: 0.3em 1em 1em;
}
footer a, footer a:active, footer a:visited { color: inherit;
}
.code { position: absolute; top: 0; top: 0; left: 0; right: 0; height: 100%; overflow: scroll; background: rgba(124, 98, 152, 0.94); color: rgba(245, 247, 247, 0.92); padding: 0em 1em; transition: all .4s; transform: translateY(-100%);
}
.code p:first-child { margin-top: 2em;
}
.code a { color: rgba(232, 216, 49, 0.9);
}
.viewCode .code { transform: translateY(0); box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.36);
}
.actions { font-weight: 300; text-transform: uppercase; font-size: 0.8em; padding: 1em; border: none; background: none; transition: color .2s; cursor: pointer;
}
.actions:hover { color: #1e1eab; background: #F5F5F5; box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
}
code, pre { background: rgba(255, 255, 255, 0.1); color: rgba(232, 216, 49, 0.9); font-family: "Source Code Pro", Monaco, Menlo, Consolas, "Courier New",monospace; padding: 0.5em; border-radius: 3px; margin: 1em 0;
}
code { display: inline; vertical-align: middle; margin: 0;
}
pre { display: block;
}
.striked { text-decoration: line-through;
}
.mfb-component--tl { animation: fromTop 1s 1; -webkit-animation: fromTop 1s 1;
}
.mfb-component--tr { animation: fromTop 1.3s 1; -webkit-animation: fromTop 1.3s 1;
}
.mfb-component--br { animation: fromBottom 1.6s 1; -webkit-animation: fromBottom 1.6s 1;
}
.mfb-component--bl { animation: fromBottom 1.9s 1; -webkit-animation: fromBottom 1.9s 1;
}
@keyframes fromBottom { 0% { transform: translateY(250px); } 100% { transform: translateY(0); }
}
@keyframes fromTop { 0% { transform: translateY(-250px); } 100% { transform: translateY(0); }
}
@-webkit-keyframes fromBottom { 0% { transform: translateY(250px); } 100% { transform: translateY(0); }
}
@-webkit-keyframes fromTop { 0% { transform: translateY(-250px); } 100% { transform: translateY(0); }
}
Angularjs Material floating button directive - Script Codes JS Codes
/** * updated codebase on: https://github.com/nobitagit/ng-material-floating-button * **/
+(function(window, angular, undefined){ var mfb = angular.module('ng-mfb', []); mfb.directive('mfbMenu', [function(){ return { restrict: 'EA', transclude: true, replace: true, scope: { position: '@', effect: '@', label: '@', resting: '@restingIcon', active: '@activeIcon' }, template: '<ul class="mfb-component--{{position}} mfb-{{effect}}">' + ' <li class="mfb-component__wrap">' + ' <a href="" data-mfb-label="{{label}}" class="mfb-component__button--main">' + ' <i class="mfb-component__main-icon--resting {{resting}}"></i>' + ' <i class="mfb-component__main-icon--active {{active}}"></i>' + ' </a>' + ' <ul class="mfb-component__list" ng-transclude>' + ' </ul>' + ' </li>' + '</ul>' }; }]); mfb.directive('mfbButton', [function(){ return { require: '^mfbMenu', restrict: 'EA', transclude: true, replace: true, scope: { icon: '@', label: '@' }, template: '<li>' + ' <a href="" data-mfb-label="{{label}}" class="mfb-component__button--child">' + ' <i class="mfb-component__child-icon {{icon}}"' + ' </i>' + ' </a>' + '</li>' }; }]);
})(window, angular);
var app = angular.module('test-app', ['ng-mfb']);
app.controller('myCtrl', function($scope){ $scope.positions = ['tl', 'tr', 'br', 'bl']; $scope.effects = [{ name: 'Choose an effect here', },{ value: 'slidein', name: 'Slide in + fade' },{ value: 'zoomin', name: 'Zoom in' },{ value: 'fountain', name: 'Fountain' }]; $scope.buttons = [{ label: 'a link', icon: 'ion-paper-airplane' },{ label: 'a link', icon: 'ion-paper-airplane' },{ label: 'a link', icon: 'ion-paper-airplane' },{ label: 'a link', icon: 'ion-paper-airplane' }]; $scope.chosenEffect = 'zoomin';
}); var panel = document.getElementById('panel'), showcode = document.getElementById('showcode'); showcode.addEventListener('click', _toggleCode); function _toggleCode() { panel.classList.toggle('viewCode'); }
Developer | Nobitagit |
Username | nobitagit |
Uploaded | December 03, 2022 |
Rating | 4.5 |
Size | 14,578 Kb |
Views | 14,168 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Radials | 4,821 Kb |
Svg mobile burger icon | 1,864 Kb |
A Pen by nobitagit | 2,965 Kb |
CSS3 Locker | 2,023 Kb |
Rebbbound | 6,636 Kb |
Prankmarklet | 3,406 Kb |
CSS-only Clock | 3,198 Kb |
CSS Turntable | 8,857 Kb |
Ripples in water | 2,704 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Buttons with style | Chbymnky | 2,082 Kb |
Sticky div | Kaslab | 2,225 Kb |
Direction-icon | Alexandremasy | 3,323 Kb |
Dragonball Dragon Radar | DouglasGlover | 2,157 Kb |
Foundation 5 Menu - Accessibility | Xporter | 1,999 Kb |
Retina canvas w. resize | Erikterwan | 1,882 Kb |
Blog demo to use given styling | Andygirl | 2,412 Kb |
CSS3 Latte Art Logo | Esambino | 2,036 Kb |
Very Simple Slider | Doodlemarks | 2,682 Kb |
Angular Route | Arun_v606 | 1,837 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!