diff options
Diffstat (limited to 'www/css/custommfb.scss')
| -rw-r--r-- | www/css/custommfb.scss | 404 |
1 files changed, 0 insertions, 404 deletions
diff --git a/www/css/custommfb.scss b/www/css/custommfb.scss deleted file mode 100644 index 20dbeb58..00000000 --- a/www/css/custommfb.scss +++ /dev/null @@ -1,404 +0,0 @@ -/** - * 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: 45px !default; -// main button diameter -$child_button_size: 45px !default; -// the distance of the main button from the closest corners of the screen -$border-distance: 20px !default; -// font-size for labels -$labels-font-size: 12px !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: 50px !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); - PP */ - opacity:0.8; /* PP */ - 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: 45px; - 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 - */ |