From b28028ac4082842143b0f528d6bc539da6ccb419 Mon Sep 17 00:00:00 2001 From: Pliable Pixels Date: Thu, 21 Sep 2017 12:49:18 -0400 Subject: mega changes, including updates and X --- www/lib/ng-mfb/mfb/src/mfb.scss | 403 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 403 insertions(+) create mode 100644 www/lib/ng-mfb/mfb/src/mfb.scss (limited to 'www/lib/ng-mfb/mfb/src/mfb.scss') diff --git a/www/lib/ng-mfb/mfb/src/mfb.scss b/www/lib/ng-mfb/mfb/src/mfb.scss new file mode 100644 index 00000000..cef5a14e --- /dev/null +++ b/www/lib/ng-mfb/mfb/src/mfb.scss @@ -0,0 +1,403 @@ +/** + * 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 ----------------------------*/ + +// the main/primary color +$main-color: #E40A5D !default; +// aka the white text +$bright-text: rgba(255, 255, 255, 0.8) !default; + +/* EFFECTS ---------------------------*/ + +// which effects must be made available in the css +$effects-zoomin: true !default; +$effects-slidein: true !default; +$effects-fountain: true !default; + +/* SPEEDS ----------------------------*/ + +// the speed of the inflation of each button after hovering on the main button +$delay-staggering-inflate: 0.1s !default; +// when hovering on the main button the child buttons slide into view +$slide-speed: .5s !default; +// the labels disappear at this speed on mouse out +$label-hover-off: .5s !default; +// the labels appear at this speed on mouse over +$label-hover-on: .3s !default; + +/* SIZES -----------------------------*/ + +// main button diameter +$main_button_size: 56px !default; +// main button diameter +$child_button_size: 56px !default; +// the distance of the main button from the closest corners of the screen +$border-distance: 25px !default; +// font-size for labels +$labels-font-size: 13px !default; +// top & bottom padding for the labels +$labels-padding-vertical: 4px !default; +// left & right padding for the labels +$labels-padding-horizontal: 10px !default; + +/* SPACING ---------------------------*/ + +// space between buttons +$button-space: 70px !default; + +// space between button and label +$button-label-space: 70px !default; + +/* OTHER VARIABLES -------------------*/ + +// how many child buttons does the component have +$number-of-child-buttons: 4 !default; + +/*------------------------------------*\ + #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{ + box-sizing: border-box; // A better box-sizing + margin: $border-distance; + position: fixed; + white-space: nowrap; + z-index: 30; + // this padding is really needed only if the element is an