diff options
Diffstat (limited to 'www/css/custommfb.scss')
| -rw-r--r-- | www/css/custommfb.scss | 403 |
1 files changed, 403 insertions, 0 deletions
diff --git a/www/css/custommfb.scss b/www/css/custommfb.scss new file mode 100644 index 00000000..009c7c64 --- /dev/null +++ b/www/css/custommfb.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: 40px !default; +// main button diameter +$child_button_size: 40px !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: 10px !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: 46px !default; + +// space between button and label +$button-label-space: 50px !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 <ul> + // otherwise it can probably be ditched. + padding-left: 0; + list-style: none; + + // make sure that everything inside this component + // inherits the same box-sizing + *, *:before, *: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{ + @extend %mfb-component; + left: 0; top: 0; +} +.mfb-component--tr{ + @extend %mfb-component; + right: 0; top: 0; +} +.mfb-component--bl{ + @extend %mfb-component; + left: 0; bottom: 0; +} +.mfb-component--br{ + @extend %mfb-component; + right: 0; bottom: 0; +} + + +/*------------------------------------*\ + #BUTTONS | Base +\*------------------------------------*/ + +%mfb-component__button{ + background-color: $main-color; + 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; + 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; + &>li{ + display: block; + position: absolute; + top: 0; + right: ($main_button_size - $child_button_size + 2) / 2; + padding: 10px + ($main_button_size - $child_button_size) / 2 0; + margin: -(10px + ($main_button_size - $child_button_size) / 2) 0; + } +} + +/** + * These are the basic styles for all the icons inside the main button + */ +.mfb-component__icon{ + position: absolute; + font-size: 18px; + text-align: center; + line-height: 40px; + width: 100%; +} + +.mfb-component__wrap{ + // this double declaration adds some padding to the main button + // to expand the area that triggers the hover state. The equal, negative + // margin evens out the distance form the borders so that the button + // does not shift out of position. + padding: $border-distance; + margin: -$border-distance; +} + +[data-mfb-toggle="hover"]:hover, +[data-mfb-state="open"]{ + .mfb-component__icon { + -webkit-transform: scale(1) rotate(0deg); + transform: scale(1) rotate(0deg); + } +} + + +/*------------------------------------*\ + #BUTTONS | Modifiers +\*------------------------------------*/ + +.mfb-component__button--main{ + @extend %mfb-component__button; + height: $main_button_size; + width: $main_button_size; + z-index: 20; +} +.mfb-component__button--child{ + @extend %mfb-component__button; + height: $child_button_size; + width: $child_button_size; +} +// the icons for the main button +.mfb-component__main-icon--active, +.mfb-component__main-icon--resting{ + @extend .mfb-component__icon; + -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); +} +// the icons for the main button +.mfb-component__child-icon, +.mfb-component__child-icon{ + @extend .mfb-component__icon; + line-height: $child_button_size; + font-size: 18 / 56 * $child_button_size; +} +.mfb-component__main-icon--active{ + opacity: 0; +} +[data-mfb-toggle="hover"]:hover, +[data-mfb-state="open"]{ + .mfb-component__main-icon{ + -webkit-transform: scale(1) rotate(0deg); + transform: scale(1) rotate(0deg); + } + .mfb-component__main-icon--resting{ + opacity: 0; + // don't remove this, needed for ng-mfb downstream repo! + position: absolute !important; + } + .mfb-component__main-icon--active{ + opacity: 1; + } +} + +/*------------------------------------*\ + #BUTTONS | Animations +\*------------------------------------*/ + +@import "_/_slidein"; +@import "_/_slidein-spring"; +@import "_/_zoomin"; +@import "_/_fountain"; + +// Ugly work-around for this https://github.com/sass/sass/issues/451 +@if $effects-slidein == true { + @include effects-slidein; +} +@if $effects-slidein == true { + @include effects-slidein-spring; +} +@if $effects-zoomin == true { + @include effects-zoomin; +} +@if $effects-fountain == true { + @include effects-fountain; +} + +/*------------------------------------*\ + #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 $label-hover-off; + background: rgba(0,0,0, .4); + padding: $labels-padding-vertical $labels-padding-horizontal; + border-radius: 3px; + color: $bright-text; + font-size: $labels-font-size; + pointer-events: none; + position: absolute; + top: 50%; + margin-top: - ($labels-padding-vertical + $labels-font-size / 2); + transition: all $label-hover-off; // the label disappears at this speed +} +[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 $label-hover-on; // the label appears at this speed +} +/*------------------------------------*\ + #LABELS | Modifiers +\*------------------------------------*/ +.mfb-component--br, .mfb-component--tr{ + [data-mfb-label]:after { + content: attr(data-mfb-label); + right: $button-label-space; + } +} +.mfb-component--br .mfb-component__list, .mfb-component--tr .mfb-component__list { + [data-mfb-label]:after { + content: attr(data-mfb-label); + right: $button-label-space - ($main_button_size - $child_button_size) / 2; + } +} +.mfb-component--tl, .mfb-component--bl{ + [data-mfb-label]:after { + content: attr(data-mfb-label); + left: $button-label-space; + } +} +.mfb-component--tl .mfb-component__list, .mfb-component--bl .mfb-component__list{ + [data-mfb-label]:after { + content: attr(data-mfb-label); + left: $button-label-space - ($main_button_size - $child_button_size) / 2; + } +} +/*------------------------------------*\ + #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 + */ |