├── .gitignore ├── .babelrc ├── assets ├── css │ ├── config │ │ ├── _config.scss │ │ ├── _system.scss │ │ └── _mixins.scss │ ├── _responsive.scss │ ├── _vars.scss │ ├── owl-theme │ │ ├── _theme-default.scss │ │ └── _theme.scss │ ├── _uk-form.scss │ ├── _tabelinha.scss │ ├── style.scss │ ├── style.css.map │ └── style.css ├── favicon.png ├── img │ ├── Thumbs.db │ ├── header-bg.jpg │ ├── i-header-1.png │ ├── i-header-2.png │ ├── i-header-3.png │ ├── i-header-4.png │ ├── i-header-5.png │ ├── i-header-6.png │ ├── menuchef-bg.png │ ├── flavors-border.png │ ├── header-append.png │ └── menuchef-logo.png ├── fonts │ ├── Aquino-Demo.eot │ ├── Aquino-Demo.ttf │ ├── Aquino-Demo.woff │ ├── AlexBrush-Regular.eot │ ├── AlexBrush-Regular.ttf │ ├── AlexBrush-Regular.woff │ └── _fonts.scss └── js │ ├── rellax.min.js │ └── tabelinha.min.js ├── favicon.ico ├── img └── menuchef-logo.png ├── src ├── templates │ ├── mixins.scss │ ├── button.html │ ├── full.scss │ ├── schemes │ │ ├── _black.scss │ │ ├── _blue.scss │ │ ├── _green.scss │ │ ├── _red.scss │ │ ├── _yellow.scss │ │ └── _scheme.scss │ ├── default.html │ ├── side.scss │ └── main.scss ├── helpers │ ├── forEach.js │ ├── setCssVar.js │ ├── setIF.js │ ├── setPublicVar.js │ └── masterCook.js └── MenuChef.js ├── site ├── macros.twig ├── _footer.twig ├── base.twig ├── _header.twig └── index.twig ├── LICENSE ├── dist └── index.html ├── README.md ├── test ├── index.html ├── mocha.css └── MenuChef.test.js ├── webpack.config.babel.js ├── package.json └── gulpfile.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015"] 3 | } -------------------------------------------------------------------------------- /assets/css/config/_config.scss: -------------------------------------------------------------------------------- 1 | @import 'mixins'; 2 | @import '../vars'; -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theus/MenuChef/HEAD/favicon.ico -------------------------------------------------------------------------------- /assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theus/MenuChef/HEAD/assets/favicon.png -------------------------------------------------------------------------------- /assets/img/Thumbs.db: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theus/MenuChef/HEAD/assets/img/Thumbs.db -------------------------------------------------------------------------------- /img/menuchef-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theus/MenuChef/HEAD/img/menuchef-logo.png -------------------------------------------------------------------------------- /assets/img/header-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theus/MenuChef/HEAD/assets/img/header-bg.jpg -------------------------------------------------------------------------------- /assets/img/i-header-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theus/MenuChef/HEAD/assets/img/i-header-1.png -------------------------------------------------------------------------------- /assets/img/i-header-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theus/MenuChef/HEAD/assets/img/i-header-2.png -------------------------------------------------------------------------------- /assets/img/i-header-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theus/MenuChef/HEAD/assets/img/i-header-3.png -------------------------------------------------------------------------------- /assets/img/i-header-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theus/MenuChef/HEAD/assets/img/i-header-4.png -------------------------------------------------------------------------------- /assets/img/i-header-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theus/MenuChef/HEAD/assets/img/i-header-5.png -------------------------------------------------------------------------------- /assets/img/i-header-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theus/MenuChef/HEAD/assets/img/i-header-6.png -------------------------------------------------------------------------------- /assets/img/menuchef-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theus/MenuChef/HEAD/assets/img/menuchef-bg.png -------------------------------------------------------------------------------- /assets/fonts/Aquino-Demo.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theus/MenuChef/HEAD/assets/fonts/Aquino-Demo.eot -------------------------------------------------------------------------------- /assets/fonts/Aquino-Demo.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theus/MenuChef/HEAD/assets/fonts/Aquino-Demo.ttf -------------------------------------------------------------------------------- /assets/fonts/Aquino-Demo.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theus/MenuChef/HEAD/assets/fonts/Aquino-Demo.woff -------------------------------------------------------------------------------- /assets/img/flavors-border.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theus/MenuChef/HEAD/assets/img/flavors-border.png -------------------------------------------------------------------------------- /assets/img/header-append.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theus/MenuChef/HEAD/assets/img/header-append.png -------------------------------------------------------------------------------- /assets/img/menuchef-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theus/MenuChef/HEAD/assets/img/menuchef-logo.png -------------------------------------------------------------------------------- /assets/fonts/AlexBrush-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theus/MenuChef/HEAD/assets/fonts/AlexBrush-Regular.eot -------------------------------------------------------------------------------- /assets/fonts/AlexBrush-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theus/MenuChef/HEAD/assets/fonts/AlexBrush-Regular.ttf -------------------------------------------------------------------------------- /assets/fonts/AlexBrush-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theus/MenuChef/HEAD/assets/fonts/AlexBrush-Regular.woff -------------------------------------------------------------------------------- /src/templates/mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin var($property, $varName) { 2 | #{$property}: map-get($cssVars, $varName); 3 | #{$property}: var(--#{$varName}, map-get($cssVars, $varName)); 4 | } -------------------------------------------------------------------------------- /assets/css/_responsive.scss: -------------------------------------------------------------------------------- 1 | @import 'config/config'; 2 | 3 | @media (max-width: 1200px) { 4 | 5 | } 6 | 7 | @media (max-width: 992px) { 8 | 9 | } 10 | 11 | @media (max-width: 768px) { 12 | 13 | } -------------------------------------------------------------------------------- /src/templates/button.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/templates/full.scss: -------------------------------------------------------------------------------- 1 | .MenuChef--theme-full { 2 | display: none; 3 | background-color: rgba(0,0,0, .9); 4 | position: fixed; 5 | top: 0; 6 | left: 0; 7 | right: 0; 8 | bottom: 0; 9 | height: 100%; 10 | width: 100%; 11 | z-index: 99; 12 | 13 | &.is-visible { display: table; } 14 | } -------------------------------------------------------------------------------- /src/helpers/forEach.js: -------------------------------------------------------------------------------- 1 | // https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/ 2 | // forEach method, could be shipped as part of an Object Literal/Module 3 | export default function (array, callback, scope) { 4 | for (let i = 0; i < array.length; i++) { 5 | callback.call(scope, i, array[i]) 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /assets/css/_vars.scss: -------------------------------------------------------------------------------- 1 | $font-1: 'Open Sans', sans-serif; 2 | $font-2: 'Aquino Demo', $font-1; 3 | $font-3: 'Alex Brush', $font-1; 4 | 5 | $color-1: #e2bf3b; 6 | $color-2: #787167; 7 | $color-3: #f0f0e6; 8 | 9 | $color-main: $color-1; 10 | $text-color: #fff; 11 | 12 | $selection-color: $color-main; 13 | $selection-text-color: $text-color; 14 | -------------------------------------------------------------------------------- /src/templates/schemes/_black.scss: -------------------------------------------------------------------------------- 1 | $scheme: 'black'; 2 | $scheme-bgcolor: #28292E; 3 | $scheme-color: #A0A1A5; 4 | $scheme-color-hover: darken($scheme-color, 10%); 5 | 6 | $cssVars_scheme: ( 7 | MenuChef-scheme-bgcolor: $scheme-bgcolor, 8 | MenuChef-scheme-color: $scheme-color, 9 | MenuChef-scheme-color-hover: $scheme-color-hover 10 | ); 11 | 12 | @import 'scheme'; 13 | -------------------------------------------------------------------------------- /src/templates/schemes/_blue.scss: -------------------------------------------------------------------------------- 1 | $scheme: 'blue'; 2 | $scheme-bgcolor: #4476CD; 3 | $scheme-color: #293659; 4 | $scheme-color-hover: darken($scheme-color, 10%); 5 | 6 | $cssVars_scheme: ( 7 | MenuChef-scheme-bgcolor: $scheme-bgcolor, 8 | MenuChef-scheme-color: $scheme-color, 9 | MenuChef-scheme-color-hover: $scheme-color-hover 10 | ); 11 | 12 | @import 'scheme'; 13 | -------------------------------------------------------------------------------- /src/templates/schemes/_green.scss: -------------------------------------------------------------------------------- 1 | $scheme: 'green'; 2 | $scheme-bgcolor: #01C69B; 3 | $scheme-color: #015743; 4 | $scheme-color-hover: darken($scheme-color, 10%); 5 | 6 | $cssVars_scheme: ( 7 | MenuChef-scheme-bgcolor: $scheme-bgcolor, 8 | MenuChef-scheme-color: $scheme-color, 9 | MenuChef-scheme-color-hover: $scheme-color-hover 10 | ); 11 | 12 | @import 'scheme'; 13 | -------------------------------------------------------------------------------- /src/templates/schemes/_red.scss: -------------------------------------------------------------------------------- 1 | $scheme: 'red'; 2 | $scheme-bgcolor: #FF4A35; 3 | $scheme-color: #7C1506; 4 | $scheme-color-hover: darken($scheme-color, 10%); 5 | 6 | $cssVars_scheme: ( 7 | MenuChef-scheme-bgcolor: $scheme-bgcolor, 8 | MenuChef-scheme-color: $scheme-color, 9 | MenuChef-scheme-color-hover: $scheme-color-hover 10 | ); 11 | 12 | @import 'scheme'; 13 | -------------------------------------------------------------------------------- /src/templates/schemes/_yellow.scss: -------------------------------------------------------------------------------- 1 | $scheme: 'yellow'; 2 | $scheme-bgcolor: #FEC659; 3 | $scheme-color: #966000; 4 | $scheme-color-hover: darken($scheme-color, 10%); 5 | 6 | $cssVars_scheme: ( 7 | MenuChef-scheme-bgcolor: $scheme-bgcolor, 8 | MenuChef-scheme-color: $scheme-color, 9 | MenuChef-scheme-color-hover: $scheme-color-hover 10 | ); 11 | 12 | @import 'scheme'; 13 | -------------------------------------------------------------------------------- /assets/css/config/_system.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | $base-dpi: 96!default; 4 | @warn '$base-dpi' $base-dpi; 5 | 6 | @import 'config'; 7 | 8 | ::-moz-selection { 9 | color: $selection-text-color; 10 | background: $selection-color; 11 | } 12 | ::selection { 13 | color: $selection-text-color; 14 | background: $selection-color; 15 | } 16 | 17 | @import '../../fonts/fonts'; -------------------------------------------------------------------------------- /src/helpers/setCssVar.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * @function setCssVar 4 | * 5 | * @description Try to set a CSS variable 6 | * 7 | * @param {variable} String variable @required 8 | * @param {value} String value @required 9 | * 10 | * @return null 11 | * 12 | */ 13 | 14 | export default function (variable, value) { 15 | try { 16 | document.documentElement.style.setProperty(variable, value) 17 | } catch (e) { 18 | console.warn('MenuChef failed to change a CSS variable', e) 19 | } 20 | } -------------------------------------------------------------------------------- /src/helpers/setIF.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * @function setIF 4 | * 5 | * @description Verify determined condition and return passed value. If not, return default value 6 | * The condition don't need exist and don't break the program 7 | * 8 | * @param {val} String value @required 9 | * @param {condition} String condition to be analized @required 10 | * @param {defaultVal} String @default '' @optional 11 | * 12 | * @return val || defaultVal 13 | * 14 | */ 15 | 16 | export default function (val, condition, defaultVal = '') { 17 | try { 18 | if (condition && val) return val 19 | } catch (e) {} 20 | return defaultVal 21 | } 22 | -------------------------------------------------------------------------------- /site/macros.twig: -------------------------------------------------------------------------------- 1 | {% macro item(item, linkSection, released) %} 2 | {% if not linkName %} {% set linkName = item %} {% endif %} 3 | 4 | 5 | {% if released %} 6 | 7 | v{{released}} 8 | 9 | {% endif %} 10 | {{item}} 11 | 12 | {% endmacro %} 13 | 14 | {% macro linkTo(item, linkSection) %} 15 | {{item}} 16 | {% endmacro %} -------------------------------------------------------------------------------- /src/helpers/setPublicVar.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * @function setPublicVar 4 | * 5 | * @description Set readonly public variable to a object 6 | * 7 | * @param {obj} Object destination @required 8 | * @param {location} Object source @required 9 | * @param {variable} String source variable @required 10 | * @param {variableLocation} String if source variable isn't the same name 11 | * 12 | * @return Object.defineProperty 13 | * 14 | */ 15 | 16 | export default function (obj, location, variable, variableLocation = variable) { 17 | if (obj['hasOwnProperty'](variable)) delete obj[variable] 18 | return Object.defineProperty(obj, variable, { 19 | configurable: true, 20 | get () { 21 | return location[variableLocation] 22 | }, 23 | set (val) { 24 | console.warn(`${obj.name}.${variable} is readonly`) 25 | } 26 | }) 27 | } 28 | -------------------------------------------------------------------------------- /src/helpers/masterCook.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * @function masterCook 4 | * 5 | * @description Add or remove automatically an array of classes in a Element 6 | * 7 | * @param {el} HTML Element @required 8 | * @param {classList} Array @required 9 | * @param {method} String add or remove @default add 10 | * 11 | * @return undefined 12 | * 13 | */ 14 | 15 | export default function (el, classList, method = 'add') { 16 | // if (!!el) cosole.error('masterCook needs an element to manage') 17 | // if (!!classList) cosole.error('masterCook needs a classList to work with element') 18 | 19 | for (let classe in classList) { 20 | let _classe = classList[classe] 21 | if (!!_classe) { // eslint-disable-line no-extra-boolean-cast 22 | try { 23 | el.classList[method](_classe) 24 | } catch (e) { 25 | console.warn(e) 26 | } 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /assets/css/owl-theme/_theme-default.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Default theme - Owl Carousel CSS File 3 | */ 4 | 5 | $color-base: #869791 !default; 6 | $color-white: #FFF !default; 7 | $color-gray: #D6D6D6 !default; 8 | 9 | //nav 10 | 11 | $nav-color: $color-white !default; 12 | $nav-color-hover: $color-white !default; 13 | $nav-font-size: 14px !default; 14 | $nav-rounded: 3px !default; 15 | $nav-margin: 5px !default; 16 | $nav-padding: 4px 7px !default; 17 | $nav-background: $color-gray !default; 18 | $nav-background-hover: $color-base !default; 19 | $nav-disabled-opacity: 0.5 !default; 20 | 21 | //dots 22 | 23 | $dot-width: 10px !default; 24 | $dot-height: 10px !default; 25 | $dot-rounded: 30px !default; 26 | $dot-margin: 5px 7px !default; 27 | $dot-background: $color-gray !default; 28 | $dot-background-active: $color-base !default; 29 | 30 | @import 'theme'; -------------------------------------------------------------------------------- /assets/fonts/_fonts.scss: -------------------------------------------------------------------------------- 1 | /* This stylesheet generated by Transfonter (https://transfonter.org) on April 5, 2017 11:55 PM */ 2 | 3 | $path: '../fonts/'; 4 | 5 | @font-face { 6 | font-family: 'Aquino Demo'; 7 | src: url('#{$path}Aquino-Demo.eot'); 8 | src: url('#{$path}Aquino-Demo.eot?#iefix') format('embedded-opentype'), 9 | url('#{$path}Aquino-Demo.woff') format('woff'), 10 | url('#{$path}Aquino-Demo.ttf') format('truetype'), 11 | url('#{$path}Aquino-Demo.svg#Aquino-Demo') format('svg'); 12 | font-weight: normal; 13 | font-style: normal; 14 | } 15 | 16 | @font-face { 17 | font-family: 'Alex Brush'; 18 | src: url('#{$path}AlexBrush-Regular.eot'); 19 | src: url('#{$path}AlexBrush-Regular.eot?#iefix') format('embedded-opentype'), 20 | url('#{$path}AlexBrush-Regular.woff') format('woff'), 21 | url('#{$path}AlexBrush-Regular.ttf') format('truetype'), 22 | url('#{$path}AlexBrush-Regular.svg#AlexBrush-Regular') format('svg'); 23 | font-weight: normal; 24 | font-style: normal; 25 | } 26 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Matheus Falcão 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /src/templates/default.html: -------------------------------------------------------------------------------- 1 |
2 | 14 |
15 | 16 |
17 |
-------------------------------------------------------------------------------- /src/templates/schemes/_scheme.scss: -------------------------------------------------------------------------------- 1 | @import '../mixins'; 2 | 3 | $scheme: 'black' !default; 4 | $scheme-bgcolor: #28292E !default; 5 | $scheme-color: #A0A1A5 !default; 6 | $scheme-color-hover: darken($scheme-color, 10%) !default; 7 | 8 | $cssVars_scheme: ( 9 | MenuChef-scheme-bgcolor: $scheme-bgcolor, 10 | MenuChef-scheme-color: $scheme-color, 11 | MenuChef-scheme-color-hover: $scheme-color-hover 12 | ) !default; 13 | 14 | $cssVars: () !default; 15 | $cssVars: map-merge($cssVars, $cssVars_scheme); 16 | 17 | .MenuChefOpen[data-scheme=#{$scheme}] { 18 | &.is-active { 19 | .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { 20 | // background-color: $scheme-color; 21 | @include var(background-color, MenuChef-scheme-color); 22 | } 23 | } 24 | } 25 | 26 | .MenuChef[data-scheme=#{$scheme}] { 27 | // background-color: $scheme-bgcolor; 28 | @include var(background-color, MenuChef-scheme-bgcolor); 29 | 30 | .MenuChef-links-link { 31 | // color: $scheme-color; 32 | @include var(color, MenuChef-scheme-color); 33 | 34 | &:hover { 35 | // color: $scheme-color-hover; 36 | @include var(color, MenuChef-scheme-color-hover); 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | MenuChef testing 6 | 7 | 8 | 9 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 43 | 44 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # MenuChef 2 | 3 | [![GitHub release](https://img.shields.io/github/tag/theus/MenuChef.svg?label=version 4 | )]() 5 | [![JavaScript Style Guide](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/) 6 | 7 |

8 | MenuChef logo 9 |

10 |

11 | Buy Me a Coffee at ko-fi.com 12 |

13 | 14 | MenuChef helps you to create hamburgers' menu easily even without knowing how to cook. You just need call the MenuChef.js in your page and initiate like the [examples](http://theus.github.io/MenuChef). It's light (approximately 55kb, **13kb gzipped**) and you don't need change the HTML code of the menu original. You can personalize it by CSS or by [options](http://theus.github.io/MenuChef#nutritionaltable). 15 | 16 | Just a simple line: 17 | 18 | ````javascript 19 | new MenuChef('.oldmenu a') 20 | ```` 21 | 22 | #### [Check the examples](http://theus.github.io/MenuChef) 23 | 24 | ## Compatibility 25 | 26 | | Browser | Compatible? | 27 | | -------------------- | -------------------| 28 | | Google Chrome | :white_check_mark: | 29 | | Mozilla Firefox | :white_check_mark: | 30 | | Internet Explorer 10+ | :white_check_mark: | 31 | | Edge | :white_check_mark: | 32 | | Safari | :white_check_mark: | -------------------------------------------------------------------------------- /site/_footer.twig: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/css/config/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin size($width, $height: null) { 2 | @if $height == null { $height: $width; } 3 | 4 | width: $width; 5 | height: $height; 6 | 7 | } 8 | 9 | @mixin clearfix { 10 | &::after { 11 | content: ""; 12 | display: table; 13 | clear: both; 14 | } 15 | } 16 | 17 | @mixin keyframes($animationName) { 18 | @-webkit-keyframes #{$animationName} { 19 | @content; 20 | } 21 | @-moz-keyframes #{$animationName} { 22 | @content; 23 | } 24 | @-o-keyframes #{$animationName} { 25 | @content; 26 | } 27 | @keyframes #{$animationName} { 28 | @content; 29 | } 30 | } 31 | 32 | @mixin animation ($delay, $duration, $animation) { 33 | -webkit-animation-delay: $delay; 34 | -webkit-animation-duration: $duration; 35 | -webkit-animation-name: $animation; 36 | -webkit-animation-fill-mode: forwards; /* this prevents the animation from restarting! */ 37 | 38 | -moz-animation-delay: $delay; 39 | -moz-animation-duration: $duration; 40 | -moz-animation-name: $animation; 41 | -moz-animation-fill-mode: forwards; /* this prevents the animation from restarting! */ 42 | 43 | -o-animation-delay: $delay; 44 | -o-animation-duration: $duration; 45 | -o-animation-name: $animation; 46 | -o-animation-fill-mode: forwards; /* this prevents the animation from restarting! */ 47 | 48 | animation-delay: $delay; 49 | animation-duration: $duration; 50 | animation-name: $animation; 51 | animation-fill-mode: forwards; /* this prevents the animation from restarting! */ 52 | } -------------------------------------------------------------------------------- /src/templates/side.scss: -------------------------------------------------------------------------------- 1 | %theme-side--dir--right { 2 | right: 0; 3 | -webkit-transform: translateX(105%); 4 | -ms-transform: translateX(105%); 5 | -o-transform: translateX(105%); 6 | transform: translateX(105%); 7 | } 8 | 9 | %theme-side--dir--left { 10 | left: 0; 11 | -webkit-transform: translateX(-105%); 12 | -ms-transform: translateX(-105%); 13 | -o-transform: translateX(-105%); 14 | transform: translateX(-105%); 15 | } 16 | 17 | .MenuChef--theme-side { 18 | display: table; 19 | background-color: rgba(0,0,0, .9); 20 | position: fixed; 21 | top: 0; 22 | bottom: 0; 23 | height: 100%; 24 | height: 100vh; 25 | @include var(width, MenuChef-theme_side-width); 26 | @include var(min-width, MenuChef-theme_side-min-width); 27 | z-index: 99; 28 | 29 | @extend %theme-side--dir--right; 30 | 31 | &--dir { 32 | &--right { @extend %theme-side--dir--right; } 33 | &--left { @extend %theme-side--dir--left; } 34 | } 35 | 36 | &-effect { 37 | &--smooth { 38 | -webkit-transition: transform linear .15s; 39 | -o-transition: transform linear .15s; 40 | transition: transform linear .15s; 41 | &--open { 42 | -webkit-transform: translateX(0); 43 | -ms-transform: translateX(0); 44 | -o-transform: translateX(0); 45 | transform: translateX(0); 46 | } 47 | } 48 | } 49 | 50 | &.is-visible { 51 | -webkit-transform: translateX(0); 52 | -ms-transform: translateX(0); 53 | -o-transform: translateX(0); 54 | transform: translateX(0); 55 | } 56 | } -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Mocha 5 | 6 | 7 | 8 | 9 | 10 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 37 | 38 |
39 | 40 | 41 | 42 | 43 | 44 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /webpack.config.babel.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack'); 2 | const path = require('path'); 3 | const pkg = require('./package.json'); 4 | 5 | module.exports = { 6 | devtool: 'source-map', 7 | entry: { 8 | MenuChef: './src/MenuChef.js' 9 | }, 10 | output: { 11 | path: path.join(__dirname, './dist'), 12 | filename: '[name].js' 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | enforce: 'pre', 18 | test: /\.js$/, 19 | loader: 'standard-loader', 20 | exclude: /(node_modules)/, 21 | }, 22 | { 23 | test: /\.html$/, 24 | exclude: /node_modules/, 25 | loader: 'html-loader', 26 | query: { 27 | minimize: true, 28 | } 29 | }, 30 | { 31 | test: /\.css$/, 32 | exclude: /node_modules/, 33 | use: [ 34 | 'style-loader', 35 | 'css-loader' 36 | ] 37 | }, 38 | { 39 | test: /\.scss$/, 40 | use: [{ 41 | loader: "style-loader" 42 | }, { 43 | loader: "css-loader" 44 | }, { 45 | loader: "sass-loader" 46 | }] 47 | }, 48 | { 49 | test: /\.(js|jsx)$/, 50 | exclude: /node_modules/, 51 | use: [ 52 | 'babel-loader' 53 | ], 54 | }, 55 | ], 56 | }, 57 | resolve: { 58 | extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.js', '.jsx'], 59 | modules: [ 60 | path.resolve(__dirname, 'node_modules'), 61 | path.join(__dirname, './src') 62 | ] 63 | }, 64 | devServer: { 65 | contentBase: path.join(__dirname, 'dist'), 66 | compress: true, 67 | port: 9000 68 | }, 69 | plugins: [ 70 | new webpack.BannerPlugin(`MenuChef v${pkg.version} 71 | http://github.com/theus/MenuChef 72 | Released under the MIT License.`), 73 | new webpack.optimize.UglifyJsPlugin({ 74 | sourceMap: true, 75 | mangle: { 76 | except: ['MenuChef'] 77 | } 78 | }) 79 | ] 80 | } -------------------------------------------------------------------------------- /assets/js/rellax.min.js: -------------------------------------------------------------------------------- 1 | (function(h,f){"function"===typeof define&&define.amd?define([],f):"object"===typeof module&&module.exports?module.exports=f():h.Rellax=f()})(this,function(){var h=function(f,l){var b=Object.create(h.prototype),g=0,k=0,c=[],p=!1,u=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||window.oRequestAnimationFrame||function(a){setTimeout(a,1E3/60)},m=function(a,b,d){return a<=b?b:a>=d?d:a};b.options={speed:-2,center:!1};l&& 2 | Object.keys(l).forEach(function(a){b.options[a]=l[a]});b.options.speed=m(b.options.speed,-10,10);f||(f=".rellax");var q=document.querySelectorAll(f);if(0 item[key] == val)[0]; 38 | } 39 | }, 40 | { 41 | name: "label", 42 | func: function (type) { 43 | let types = type.split(',') 44 | let content = [] 45 | const tag = (type) => `${type.trim()}` 46 | 47 | types.forEach(type => content.push(tag(type))) 48 | return content.join(' '); 49 | } 50 | } 51 | ], 52 | filters: [ 53 | { 54 | name: 'slugify', 55 | func: function (str) { 56 | return slugg(str) 57 | } 58 | } 59 | ] 60 | })) 61 | .pipe(gulp.dest('./')); 62 | }); 63 | 64 | gulp.task('doc', function (done) { 65 | exec('node .\\node_modules\\documentation\\bin\\documentation.js build src/MenuChef.js -f json --shallow -o doc.json', function (err) { 66 | if (err) return done(err); 67 | done(); 68 | }); 69 | }); 70 | 71 | gulp.task('watch', function () { 72 | gulp.watch('./site/**/*.twig', ['compile']); 73 | gulp.watch('./src/**/*', ['doc']); 74 | gulp.watch('./doc.json', ['compile']); 75 | }); 76 | 77 | 78 | gulp.task('default', ['doc' ,'compile']); 79 | gulp.task('dev', ['default' ,'watch']); -------------------------------------------------------------------------------- /assets/js/tabelinha.min.js: -------------------------------------------------------------------------------- 1 | !function(i){i.fn.tabelinha=function(e){"use strict";var n={dtpItemInicial:0,mobItemInicial:0,numItens:6,minMedia:500},s=i.extend({},n,e);return this.each(function(){function e(){m.first().hasClass("visivel")?(b.children(".tab-btn-anterior").addClass("btn-inativo"),b.children(".tab-btn-proximo").removeClass("btn-inativo")):m.last().hasClass("visivel")?(b.children(".tab-btn-proximo").addClass("btn-inativo"),b.children(".tab-btn-anterior").removeClass("btn-inativo")):b.children().removeClass("btn-inativo")}function n(){var i=o.find(".visivel").index()+1,e=o.find(".visivel").eq(o.find(".visivel").length-1).index()+1;f.html(m.length+" itens ("+i+" até "+e+")")}function t(){var i=o.find(".visivel");if(console.log(i),i.eq(0).prevAll().length"+(s.mobItemInicial+1)+" of "+m.length+")"),b.children(".tab-btn-anterior").off("click",t).on("click",l),b.children(".tab-btn-proximo").off("click",a).on("click",d)}var o=i(this),c=o.find("th"),r=o.find("td"),m=o.find("tbody tr");o.addClass("tabelinha"),o.after("
\n
\n
\n\n\n
\n
"),r.each(function(){i(this).html(""+c.eq(i(this).index()).html()+" "+i(this).html()+"")});var h=o.next(),b=o.next().children(".tab-paginacao"),f=o.next().children(".tab-num-itens");if(matchMedia){var u=window.matchMedia("(min-width: "+s.minMedia+"px)");u.addListener(v),v(u)}i(window).on("load resize",function(){h.css("width",o.find(".visivel").width())})})}}(jQuery); -------------------------------------------------------------------------------- /assets/css/_uk-form.scss: -------------------------------------------------------------------------------- 1 | $color1: #bcb2a2; 2 | $color2: #f4df90; 3 | 4 | .uk-radio, 5 | .uk-checkbox { 6 | /* 1 */ 7 | display: inline-block; 8 | height: 16px; 9 | width: 16px; 10 | /* 2 */ 11 | overflow: hidden; 12 | outline: none !important; 13 | /* 3 */ 14 | margin-top: -4px; 15 | vertical-align: middle; 16 | /* 4 */ 17 | -webkit-appearance: none; 18 | /* 5 */ 19 | background-color: transparent; 20 | /* 6 */ 21 | background-repeat: no-repeat; 22 | background-position: 50% 50%; 23 | border: 1px solid #cccccc; 24 | -webkit-transition: 0.2s ease-in-out; 25 | transition: 0.2s ease-in-out; 26 | -webkit-transition-property: background-color, border; 27 | transition-property: background-color, border; 28 | } 29 | .uk-radio { 30 | border-radius: 50%; 31 | } 32 | /* Focus */ 33 | .uk-radio:focus, 34 | .uk-checkbox:focus { 35 | outline: none; 36 | border-color: $color1; 37 | } 38 | /* 39 | * Checked 40 | */ 41 | .uk-radio:checked, 42 | .uk-checkbox:checked, 43 | .uk-checkbox:indeterminate { 44 | background-color: $color2; 45 | border-color: transparent; 46 | } 47 | /* Focus */ 48 | .uk-radio:checked:focus, 49 | .uk-checkbox:checked:focus, 50 | .uk-checkbox:indeterminate:focus { 51 | background-color: $color2; 52 | } 53 | /* 54 | * Icons 55 | */ 56 | .uk-radio:checked { 57 | background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22%23fff%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%222%22%3E%3C%2Fcircle%3E%0A%3C%2Fsvg%3E"); 58 | } 59 | .uk-checkbox:checked { 60 | background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23fff%22%20points%3D%2212%201%205%207.5%202%205%201%205.5%205%2010%2013%201.5%22%2F%3E%0A%3C%2Fsvg%3E"); 61 | } 62 | .uk-checkbox:indeterminate { 63 | background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23fff%22%20x%3D%223%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%221%22%3E%3C%2Frect%3E%0A%3C%2Fsvg%3E"); 64 | } 65 | /* 66 | * Disabled 67 | */ 68 | .uk-radio:disabled, 69 | .uk-checkbox:disabled { 70 | background-color: $color2; 71 | border-color: $color1; 72 | } 73 | .uk-radio:disabled:checked { 74 | background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22%23999%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%222%22%3E%3C%2Fcircle%3E%0A%3C%2Fsvg%3E"); 75 | } 76 | .uk-checkbox:disabled:checked { 77 | background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23999%22%20points%3D%2212%201%205%207.5%202%205%201%205.5%205%2010%2013%201.5%22%2F%3E%0A%3C%2Fsvg%3E"); 78 | } 79 | .uk-checkbox:disabled:indeterminate { 80 | background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23999%22%20x%3D%223%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%221%22%3E%3C%2Frect%3E%0A%3C%2Fsvg%3E"); 81 | } -------------------------------------------------------------------------------- /src/templates/main.scss: -------------------------------------------------------------------------------- 1 | @import 'mixins'; 2 | 3 | $font: 'Helvetica', 'Arial', sans-serif; 4 | 5 | $cssVars: ( 6 | MenuChef-font-family: $font, 7 | MenuChef-font-size: 16px, 8 | MenuChef-margin-bottom: 25px, 9 | MenuChef-text-transform: uppercase, 10 | MenuChef-transition: color linear .15s, 11 | MenuChef-font-weight: bold, 12 | MenuChef-theme_side-width: 20%, 13 | MenuChef-theme_side-min-width: 240px 14 | ) !default; 15 | 16 | /* 17 | * Hamburgers 18 | * @description Tasty CSS-animated hamburgers 19 | * @author Jonathan Suh @jonsuh 20 | * @site https://jonsuh.com/hamburgers 21 | * @link https://github.com/jonsuh/hamburgers 22 | */ 23 | @import '../../node_modules/hamburgers/_sass/hamburgers/hamburgers'; 24 | 25 | // Schemes 26 | @import 'schemes/black'; 27 | @import 'schemes/yellow'; 28 | @import 'schemes/red'; 29 | @import 'schemes/green'; 30 | @import 'schemes/blue'; 31 | // end schemes 32 | 33 | %MenuChefOpen--dir--right { 34 | top: 15px; 35 | right: 15px; 36 | } 37 | 38 | %MenuChefOpen--dir--left { 39 | top: 15px; 40 | left: 15px; 41 | } 42 | 43 | body.has-menuOpen { 44 | overflow: hidden !important; 45 | } 46 | 47 | .MenuChefOpen { 48 | background: transparent; 49 | border: 0; 50 | position: absolute; 51 | z-index: 200; 52 | cursor: pointer; 53 | 54 | &.is-active { 55 | position: fixed; 56 | .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { 57 | background-color: #fff; 58 | } 59 | } 60 | 61 | &:hover, &:active, &:focus { outline: none; } 62 | 63 | &--dir { 64 | &--left { @extend %MenuChefOpen--dir--left; } 65 | &--right { @extend %MenuChefOpen--dir--right; } 66 | } 67 | 68 | @extend %MenuChefOpen--dir--right; 69 | 70 | // @media (min-width: 768px) { display: none; } 71 | } 72 | 73 | // fix specific hamburgers that was overwritten by MenuChefOpen color 74 | .hamburger--3dx.is-active .hamburger-inner, 75 | .hamburger--3dx-r.is-active .hamburger-inner, 76 | .hamburger--3dy.is-active .hamburger-inner, 77 | .hamburger--3dy-r.is-active .hamburger-inner, 78 | .hamburger--emphatic.is-active .hamburger-inner, 79 | .hamburger--emphatic-r.is-active .hamburger-inner, 80 | .hamburger--spring.is-active .hamburger-inner, 81 | .hamburger--spring-r.is-active .hamburger-inner, 82 | .hamburger--stand.is-active .hamburger-inner, 83 | .hamburger--stand-r.is-active .hamburger-inner 84 | { 85 | background-color: transparent; 86 | } 87 | 88 | .MenuChef-close { 89 | @extend .MenuChefOpen; 90 | color: #fff; 91 | } 92 | .MenuChef-links-link { 93 | @include var(font-family, MenuChef-font-family); 94 | display: block; 95 | color: #fff; 96 | @include var(font-size, MenuChef-font-size); 97 | @include var(margin-bottom, MenuChef-margin-bottom); 98 | @include var(text-transform, MenuChef-text-transform); 99 | text-decoration: none; 100 | @include var(transition, MenuChef-transition); 101 | @include var(font-weight, MenuChef-font-weight); 102 | 103 | &:hover { 104 | text-decoration: none; 105 | } 106 | } 107 | .MenuChef-wrapper { 108 | display:table-cell; 109 | vertical-align:middle; 110 | } 111 | .MenuChef-links { 112 | margin-left: auto; 113 | margin-right: auto; 114 | text-align: center; 115 | } 116 | 117 | body.has-MenuChef--effect--blur { transition: filter linear .3s; } 118 | body.has-MenuChef--effect--blur.has-menuChefOpen > *:not([class*="MenuChef"]) { 119 | -webkit-filter: blur(2px); 120 | -o-filter: blur(2px); 121 | filter: blur(2px); 122 | } 123 | 124 | @import 'full'; 125 | @import 'side'; -------------------------------------------------------------------------------- /site/base.twig: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | {% block title %}{% endblock title %} 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | {% block prependHead %}{% endblock prependHead %} 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 44 | {% block appendHead %}{% endblock appendHead %} 45 | 46 | 47 | 48 | 58 | 59 |
60 | {% include "_header.twig" %} 61 | 62 | {% block content %}{% endblock content %} 63 | 64 | {% include "_footer.twig" %} 65 |
66 | 67 | 68 | 69 | 70 | {# #} 71 | 72 | 81 | {% block scripts %}{% endblock scripts %} 82 | 83 | -------------------------------------------------------------------------------- /assets/css/_tabelinha.scss: -------------------------------------------------------------------------------- 1 | /* -- ESTILOS GERAIS -- */ 2 | .visivel { 3 | display: table-row !important; 4 | } 5 | 6 | .tabelinha { 7 | // font-family: Arial, Helvetica, sans-serif; 8 | border-spacing: 0; 9 | } 10 | 11 | .tabelinha th { 12 | padding: 15px 8px; 13 | vertical-align: middle; 14 | } 15 | 16 | .tabelinha td { 17 | padding: 10px 5px; 18 | } 19 | 20 | .tabelinha th, .tabelinha td { 21 | border-bottom: 1px solid #cccccc; 22 | // color: #002D61; 23 | } 24 | 25 | .tabelinha tbody tr { 26 | width: 100%; 27 | display: none; 28 | } 29 | 30 | .tabelinha tfoot td > b { 31 | display: none !important; 32 | } 33 | 34 | .tab-rodape { 35 | min-width: 275px; 36 | display: table; 37 | clear: both; 38 | padding-top: 15px; 39 | // font-family: Arial, Helvetica, sans-serif; 40 | font-size: 12px; 41 | text-align: left; 42 | } 43 | 44 | .tab-rodape a, .tab-rodape span { 45 | font-size: 12px; 46 | } 47 | 48 | .tab-num-itens { 49 | float: left; 50 | margin: 15px 0 0 10px; 51 | } 52 | 53 | .tab-paginacao { 54 | float: right; 55 | margin-right: 20px; 56 | margin-top: 13px; 57 | } 58 | 59 | .tab-btn-anterior, .tab-btn-proximo { 60 | display: inline-block; 61 | width: 20px; 62 | height: 20px; 63 | margin: 0 5px; 64 | border-radius: 50%; 65 | background-color: #F2F2F2; 66 | -webkit-box-shadow: 0 1px 2px 1px #C4C4C4!important; 67 | -moz-box-shadow: 0 1px 2px 1px #C4C4C4!important; 68 | box-shadow: 0 1px 2px 1px #C4C4C4!important; 69 | border: 1px solid #FFF; 70 | cursor: pointer; 71 | box-sizing: border-box; 72 | } 73 | 74 | .tab-btn-anterior { 75 | padding: 3px 0 0 6px; 76 | } 77 | 78 | .tab-btn-proximo { 79 | padding: 3px 0 0 7px; 80 | } 81 | 82 | .tab-btn-anterior:after, .tab-btn-proximo:after { 83 | content: ""; 84 | width: 0; 85 | height: 0; 86 | position: absolute; 87 | border-top: 6px solid transparent; 88 | border-bottom: 6px solid transparent; 89 | } 90 | 91 | .tab-btn-anterior:after { 92 | border-right: 6px solid $color-1; 93 | } 94 | 95 | .tab-btn-proximo:after { 96 | border-left: 6px solid $color-1; 97 | } 98 | 99 | .tab-btn-anterior:hover, .tab-btn-proximo:hover { 100 | color: #FFFFFF; 101 | border: 1px solid $color-1; 102 | background-color: $color-1; 103 | } 104 | 105 | .tab-btn-anterior:hover:after { 106 | border-right: 6px solid #FFFFFF; 107 | } 108 | 109 | .tab-btn-anterior.btn-inativo:after { 110 | border-right: 6px solid #CCCCCC; 111 | } 112 | 113 | .tab-btn-proximo:hover:after { 114 | border-left: 6px solid #FFFFFF; 115 | } 116 | 117 | .tab-btn-proximo.btn-inativo:after { 118 | border-left: 6px solid #CCCCCC; 119 | } 120 | 121 | .tab-btn-anterior.btn-inativo, .tab-btn-proximo.btn-inativo, .tab-btn-anterior.btn-inativo:hover, .tab-btn-proximo.btn-inativo:hover { 122 | color: #CCCCCC; 123 | border: 1px solid transparent; 124 | background-color: transparent; 125 | pointer-events: none; 126 | cursor: default; 127 | } 128 | 129 | /* -- ESTILOS DESKTOP -- */ 130 | .tabelinha.estilo-dtp td > b { 131 | display: none; 132 | } 133 | 134 | .tabelinha.estilo-dtp th, .tabelinha.estilo-dtp td { 135 | text-align: center; 136 | } 137 | 138 | .tabelinha.estilo-dtp tbody tr:nth-child(even) { 139 | background: transparent; 140 | } 141 | 142 | .tabelinha.estilo-dtp tbody tr:nth-child(odd) { 143 | background: #F9F9F9; 144 | } 145 | 146 | /* -- ESTILOS MOBILE -- */ 147 | .tabelinha.estilo-mob th { 148 | display: none; 149 | } 150 | 151 | .tabelinha.estilo-mob td { 152 | width: 100%; 153 | clear: left; 154 | float: left; 155 | text-align: left; 156 | display: block; 157 | } 158 | 159 | .tabelinha.estilo-mob td > b { 160 | width: 35%; 161 | display: inline-block; 162 | } 163 | 164 | .tabelinha.estilo-mob td > span { 165 | vertical-align: top; 166 | max-width: 62%; 167 | display: inline-block; 168 | } 169 | 170 | .tabelinha.estilo-mob td:nth-child(even) { 171 | background: transparent; 172 | } 173 | 174 | .tabelinha.estilo-mob td:nth-child(odd) { 175 | background: #F9F9F9; 176 | } -------------------------------------------------------------------------------- /site/_header.twig: -------------------------------------------------------------------------------- 1 |
2 | 6 | 8 | 10 | 13 kbcalories 11 | 12 | 13 |
14 | 15 |
16 |
17 |
18 |
19 |
20 |
21 | 33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
-------------------------------------------------------------------------------- /test/mocha.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | body { 4 | margin:0; 5 | } 6 | 7 | #mocha { 8 | font: 20px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; 9 | margin: 60px 50px; 10 | } 11 | 12 | #mocha ul, 13 | #mocha li { 14 | margin: 0; 15 | padding: 0; 16 | } 17 | 18 | #mocha ul { 19 | list-style: none; 20 | } 21 | 22 | #mocha h1, 23 | #mocha h2 { 24 | margin: 0; 25 | } 26 | 27 | #mocha h1 { 28 | margin-top: 15px; 29 | font-size: 1em; 30 | font-weight: 200; 31 | } 32 | 33 | #mocha h1 a { 34 | text-decoration: none; 35 | color: inherit; 36 | } 37 | 38 | #mocha h1 a:hover { 39 | text-decoration: underline; 40 | } 41 | 42 | #mocha .suite .suite h1 { 43 | margin-top: 0; 44 | font-size: .8em; 45 | } 46 | 47 | #mocha .hidden { 48 | display: none; 49 | } 50 | 51 | #mocha h2 { 52 | font-size: 12px; 53 | font-weight: normal; 54 | cursor: pointer; 55 | } 56 | 57 | #mocha .suite { 58 | margin-left: 15px; 59 | } 60 | 61 | #mocha .test { 62 | margin-left: 15px; 63 | overflow: hidden; 64 | } 65 | 66 | #mocha .test.pending:hover h2::after { 67 | content: '(pending)'; 68 | font-family: arial, sans-serif; 69 | } 70 | 71 | #mocha .test.pass.medium .duration { 72 | background: #c09853; 73 | } 74 | 75 | #mocha .test.pass.slow .duration { 76 | background: #b94a48; 77 | } 78 | 79 | #mocha .test.pass::before { 80 | content: '✓'; 81 | font-size: 12px; 82 | display: block; 83 | float: left; 84 | margin-right: 5px; 85 | color: #00d6b2; 86 | } 87 | 88 | #mocha .test.pass .duration { 89 | font-size: 9px; 90 | margin-left: 5px; 91 | padding: 2px 5px; 92 | color: #fff; 93 | -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.2); 94 | -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.2); 95 | box-shadow: inset 0 1px 1px rgba(0,0,0,.2); 96 | -webkit-border-radius: 5px; 97 | -moz-border-radius: 5px; 98 | -ms-border-radius: 5px; 99 | -o-border-radius: 5px; 100 | border-radius: 5px; 101 | } 102 | 103 | #mocha .test.pass.fast .duration { 104 | display: none; 105 | } 106 | 107 | #mocha .test.pending { 108 | color: #0b97c4; 109 | } 110 | 111 | #mocha .test.pending::before { 112 | content: '◦'; 113 | color: #0b97c4; 114 | } 115 | 116 | #mocha .test.fail { 117 | color: #c00; 118 | } 119 | 120 | #mocha .test.fail pre { 121 | color: black; 122 | } 123 | 124 | #mocha .test.fail::before { 125 | content: '✖'; 126 | font-size: 12px; 127 | display: block; 128 | float: left; 129 | margin-right: 5px; 130 | color: #c00; 131 | } 132 | 133 | #mocha .test pre.error { 134 | color: #c00; 135 | max-height: 300px; 136 | overflow: auto; 137 | } 138 | 139 | #mocha .test .html-error { 140 | overflow: auto; 141 | color: black; 142 | line-height: 1.5; 143 | display: block; 144 | float: left; 145 | clear: left; 146 | font: 12px/1.5 monaco, monospace; 147 | margin: 5px; 148 | padding: 15px; 149 | border: 1px solid #eee; 150 | max-width: 85%; /*(1)*/ 151 | max-width: -webkit-calc(100% - 42px); 152 | max-width: -moz-calc(100% - 42px); 153 | max-width: calc(100% - 42px); /*(2)*/ 154 | max-height: 300px; 155 | word-wrap: break-word; 156 | border-bottom-color: #ddd; 157 | -webkit-box-shadow: 0 1px 3px #eee; 158 | -moz-box-shadow: 0 1px 3px #eee; 159 | box-shadow: 0 1px 3px #eee; 160 | -webkit-border-radius: 3px; 161 | -moz-border-radius: 3px; 162 | border-radius: 3px; 163 | } 164 | 165 | #mocha .test .html-error pre.error { 166 | border: none; 167 | -webkit-border-radius: 0; 168 | -moz-border-radius: 0; 169 | border-radius: 0; 170 | -webkit-box-shadow: 0; 171 | -moz-box-shadow: 0; 172 | box-shadow: 0; 173 | padding: 0; 174 | margin: 0; 175 | margin-top: 18px; 176 | max-height: none; 177 | } 178 | 179 | /** 180 | * (1): approximate for browsers not supporting calc 181 | * (2): 42 = 2*15 + 2*10 + 2*1 (padding + margin + border) 182 | * ^^ seriously 183 | */ 184 | #mocha .test pre { 185 | display: block; 186 | float: left; 187 | clear: left; 188 | font: 12px/1.5 monaco, monospace; 189 | margin: 5px; 190 | padding: 15px; 191 | border: 1px solid #eee; 192 | max-width: 85%; /*(1)*/ 193 | max-width: -webkit-calc(100% - 42px); 194 | max-width: -moz-calc(100% - 42px); 195 | max-width: calc(100% - 42px); /*(2)*/ 196 | word-wrap: break-word; 197 | border-bottom-color: #ddd; 198 | -webkit-box-shadow: 0 1px 3px #eee; 199 | -moz-box-shadow: 0 1px 3px #eee; 200 | box-shadow: 0 1px 3px #eee; 201 | -webkit-border-radius: 3px; 202 | -moz-border-radius: 3px; 203 | border-radius: 3px; 204 | } 205 | 206 | #mocha .test h2 { 207 | position: relative; 208 | } 209 | 210 | #mocha .test a.replay { 211 | position: absolute; 212 | top: 3px; 213 | right: 0; 214 | text-decoration: none; 215 | vertical-align: middle; 216 | display: block; 217 | width: 15px; 218 | height: 15px; 219 | line-height: 15px; 220 | text-align: center; 221 | background: #eee; 222 | font-size: 15px; 223 | -webkit-border-radius: 15px; 224 | -moz-border-radius: 15px; 225 | border-radius: 15px; 226 | -webkit-transition:opacity 200ms; 227 | -moz-transition:opacity 200ms; 228 | -o-transition:opacity 200ms; 229 | transition: opacity 200ms; 230 | opacity: 0.3; 231 | color: #888; 232 | } 233 | 234 | #mocha .test:hover a.replay { 235 | opacity: 1; 236 | } 237 | 238 | #mocha-report.pass .test.fail { 239 | display: none; 240 | } 241 | 242 | #mocha-report.fail .test.pass { 243 | display: none; 244 | } 245 | 246 | #mocha-report.pending .test.pass, 247 | #mocha-report.pending .test.fail { 248 | display: none; 249 | } 250 | #mocha-report.pending .test.pass.pending { 251 | display: block; 252 | } 253 | 254 | #mocha-error { 255 | color: #c00; 256 | font-size: 1.5em; 257 | font-weight: 100; 258 | letter-spacing: 1px; 259 | } 260 | 261 | #mocha-stats { 262 | position: fixed; 263 | top: 15px; 264 | right: 10px; 265 | font-size: 12px; 266 | margin: 0; 267 | color: #888; 268 | z-index: 1; 269 | } 270 | 271 | #mocha-stats .progress { 272 | float: right; 273 | padding-top: 0; 274 | 275 | /** 276 | * Set safe initial values, so mochas .progress does not inherit these 277 | * properties from Bootstrap .progress (which causes .progress height to 278 | * equal line height set in Bootstrap). 279 | */ 280 | height: auto; 281 | -webkit-box-shadow: none; 282 | -moz-box-shadow: none; 283 | box-shadow: none; 284 | background-color: initial; 285 | } 286 | 287 | #mocha-stats em { 288 | color: black; 289 | } 290 | 291 | #mocha-stats a { 292 | text-decoration: none; 293 | color: inherit; 294 | } 295 | 296 | #mocha-stats a:hover { 297 | border-bottom: 1px solid #eee; 298 | } 299 | 300 | #mocha-stats li { 301 | display: inline-block; 302 | margin: 0 5px; 303 | list-style: none; 304 | padding-top: 11px; 305 | } 306 | 307 | #mocha-stats canvas { 308 | width: 40px; 309 | height: 40px; 310 | } 311 | 312 | #mocha code .comment { color: #ddd; } 313 | #mocha code .init { color: #2f6fad; } 314 | #mocha code .string { color: #5890ad; } 315 | #mocha code .keyword { color: #8a6343; } 316 | #mocha code .number { color: #2f6fad; } 317 | 318 | @media screen and (max-device-width: 480px) { 319 | #mocha { 320 | margin: 60px 0px; 321 | } 322 | 323 | #mocha #stats { 324 | position: absolute; 325 | } 326 | } 327 | -------------------------------------------------------------------------------- /assets/css/owl-theme/_theme.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Owl Carousel - Animate Plugin 3 | */ 4 | .owl-carousel .animated { 5 | -webkit-animation-duration: 1000ms; 6 | animation-duration: 1000ms; 7 | -webkit-animation-fill-mode: both; 8 | animation-fill-mode: both; 9 | } 10 | .owl-carousel .owl-animated-in { 11 | z-index: 0; 12 | } 13 | .owl-carousel .owl-animated-out { 14 | z-index: 1; 15 | } 16 | .owl-carousel .fadeOut { 17 | -webkit-animation-name: fadeOut; 18 | animation-name: fadeOut; 19 | } 20 | 21 | @-webkit-keyframes fadeOut { 22 | 0% { 23 | opacity: 1; 24 | } 25 | 26 | 100% { 27 | opacity: 0; 28 | } 29 | } 30 | @keyframes fadeOut { 31 | 0% { 32 | opacity: 1; 33 | } 34 | 35 | 100% { 36 | opacity: 0; 37 | } 38 | } 39 | 40 | /* 41 | * Owl Carousel - Auto Height Plugin 42 | */ 43 | .owl-height { 44 | -webkit-transition: height 500ms ease-in-out; 45 | -moz-transition: height 500ms ease-in-out; 46 | -ms-transition: height 500ms ease-in-out; 47 | -o-transition: height 500ms ease-in-out; 48 | transition: height 500ms ease-in-out; 49 | } 50 | 51 | /* 52 | * Core Owl Carousel CSS File 53 | */ 54 | .owl-carousel { 55 | display: none; 56 | width: 100%; 57 | -webkit-tap-highlight-color: transparent; 58 | /* position relative and z-index fix webkit rendering fonts issue */ 59 | position: relative; 60 | z-index: 1; 61 | } 62 | .owl-carousel .owl-stage { 63 | position: relative; 64 | -ms-touch-action: pan-Y; 65 | } 66 | .owl-carousel .owl-stage:after { 67 | content: "."; 68 | display: block; 69 | clear: both; 70 | visibility: hidden; 71 | line-height: 0; 72 | height: 0; 73 | } 74 | .owl-carousel .owl-stage-outer { 75 | position: relative; 76 | overflow: hidden; 77 | /* fix for flashing background */ 78 | -webkit-transform: translate3d(0px, 0px, 0px); 79 | } 80 | .owl-carousel .owl-controls .owl-nav .owl-prev, 81 | .owl-carousel .owl-controls .owl-nav .owl-next, 82 | .owl-carousel .owl-controls .owl-dot { 83 | cursor: pointer; 84 | cursor: hand; 85 | -webkit-user-select: none; 86 | -khtml-user-select: none; 87 | -moz-user-select: none; 88 | -ms-user-select: none; 89 | user-select: none; 90 | } 91 | .owl-carousel.owl-loaded { 92 | display: block; 93 | } 94 | .owl-carousel.owl-loading { 95 | opacity: 0; 96 | display: block; 97 | } 98 | .owl-carousel.owl-hidden { 99 | opacity: 0; 100 | } 101 | .owl-carousel .owl-refresh .owl-item { 102 | display: none; 103 | } 104 | .owl-carousel .owl-item { 105 | position: relative; 106 | min-height: 1px; 107 | float: left; 108 | -webkit-backface-visibility: hidden; 109 | -webkit-tap-highlight-color: transparent; 110 | -webkit-touch-callout: none; 111 | -webkit-user-select: none; 112 | -moz-user-select: none; 113 | -ms-user-select: none; 114 | user-select: none; 115 | } 116 | .owl-carousel .owl-item img { 117 | display: block; 118 | width: 100%; 119 | -webkit-transform-style: preserve-3d; 120 | } 121 | .owl-carousel.owl-text-select-on .owl-item { 122 | -webkit-user-select: auto; 123 | -moz-user-select: auto; 124 | -ms-user-select: auto; 125 | user-select: auto; 126 | } 127 | .owl-carousel .owl-grab { 128 | cursor: move; 129 | cursor: -webkit-grab; 130 | cursor: -o-grab; 131 | cursor: -ms-grab; 132 | cursor: grab; 133 | } 134 | .owl-carousel.owl-rtl { 135 | direction: rtl; 136 | } 137 | .owl-carousel.owl-rtl .owl-item { 138 | float: right; 139 | } 140 | 141 | /* No Js */ 142 | .no-js .owl-carousel { 143 | display: block; 144 | } 145 | 146 | /* 147 | * Owl Carousel - Lazy Load Plugin 148 | */ 149 | .owl-carousel .owl-item .owl-lazy { 150 | opacity: 0; 151 | -webkit-transition: opacity 400ms ease; 152 | -moz-transition: opacity 400ms ease; 153 | -ms-transition: opacity 400ms ease; 154 | -o-transition: opacity 400ms ease; 155 | transition: opacity 400ms ease; 156 | } 157 | .owl-carousel .owl-item img { 158 | transform-style: preserve-3d; 159 | } 160 | 161 | /* 162 | * Owl Carousel - Video Plugin 163 | */ 164 | .owl-carousel .owl-video-wrapper { 165 | position: relative; 166 | height: 100%; 167 | background: #000; 168 | } 169 | .owl-carousel .owl-video-play-icon { 170 | position: absolute; 171 | height: 80px; 172 | width: 80px; 173 | left: 50%; 174 | top: 50%; 175 | margin-left: -40px; 176 | margin-top: -40px; 177 | background: url("owl.video.play.png") no-repeat; 178 | cursor: pointer; 179 | z-index: 1; 180 | -webkit-backface-visibility: hidden; 181 | -webkit-transition: scale 100ms ease; 182 | -moz-transition: scale 100ms ease; 183 | -ms-transition: scale 100ms ease; 184 | -o-transition: scale 100ms ease; 185 | transition: scale 100ms ease; 186 | } 187 | .owl-carousel .owl-video-play-icon:hover { 188 | -webkit-transition: scale(1.3, 1.3); 189 | -moz-transition: scale(1.3, 1.3); 190 | -ms-transition: scale(1.3, 1.3); 191 | -o-transition: scale(1.3, 1.3); 192 | transition: scale(1.3, 1.3); 193 | } 194 | .owl-carousel .owl-video-playing .owl-video-tn, 195 | .owl-carousel .owl-video-playing .owl-video-play-icon { 196 | display: none; 197 | } 198 | .owl-carousel .owl-video-tn { 199 | opacity: 0; 200 | height: 100%; 201 | background-position: center center; 202 | background-repeat: no-repeat; 203 | -webkit-background-size: contain; 204 | -moz-background-size: contain; 205 | -o-background-size: contain; 206 | background-size: contain; 207 | -webkit-transition: opacity 400ms ease; 208 | -moz-transition: opacity 400ms ease; 209 | -ms-transition: opacity 400ms ease; 210 | -o-transition: opacity 400ms ease; 211 | transition: opacity 400ms ease; 212 | } 213 | .owl-carousel .owl-video-frame { 214 | position: relative; 215 | z-index: 1; 216 | } 217 | 218 | .owl-theme { 219 | // Styling Next and Prev buttons 220 | .owl-nav { 221 | margin-top: 10px; 222 | text-align: center; 223 | -webkit-tap-highlight-color: transparent; 224 | 225 | [class*='owl-'] { 226 | color: $nav-color; 227 | font-size: $nav-font-size; 228 | margin: $nav-margin; 229 | padding: $nav-padding; 230 | background: $nav-background; 231 | display: inline-block; 232 | cursor: pointer; 233 | border-radius: 3px; 234 | 235 | &:hover { 236 | background: $nav-background-hover; 237 | color:$nav-color-hover; 238 | text-decoration: none; 239 | } 240 | } 241 | .disabled { 242 | opacity: $nav-disabled-opacity; 243 | cursor: default; 244 | } 245 | } 246 | 247 | // Styling dots 248 | .owl-nav.disabled + .owl-dots { 249 | margin-top: 10px; 250 | } 251 | 252 | .owl-dots { 253 | text-align: center; 254 | -webkit-tap-highlight-color: transparent; 255 | 256 | .owl-dot { 257 | display: inline-block; 258 | zoom: 1; 259 | *display: inline; 260 | 261 | span { 262 | width: $dot-width; 263 | height: $dot-height; 264 | margin: $dot-margin; 265 | background: $dot-background; 266 | display: block; 267 | -webkit-backface-visibility: visible; 268 | transition: opacity 200ms ease; 269 | border-radius: 30px; 270 | } 271 | 272 | &.active, 273 | &:hover { 274 | span { 275 | background: $dot-background-active; 276 | } 277 | } 278 | } 279 | } 280 | } -------------------------------------------------------------------------------- /test/MenuChef.test.js: -------------------------------------------------------------------------------- 1 | var expect = chai.expect 2 | chai.should() 3 | 4 | var eventFire = function eventFire(el, etype){ 5 | if (el.fireEvent) { 6 | el.fireEvent('on' + etype); 7 | } else { 8 | var evObj = document.createEvent('Events'); 9 | evObj.initEvent(etype, true, false); 10 | el.dispatchEvent(evObj); 11 | } 12 | } 13 | 14 | describe('new MenuChef', function () { 15 | it('new MenuChef should init', function () { 16 | expect(new MenuChef('.js-Menu a')).to.be.an.object; 17 | MenuChef.destroy(); 18 | }) 19 | it('instance of new MenuChef should init', function () { 20 | var menu = new MenuChef('.js-Menu a') 21 | menu.should.be.an.object; 22 | MenuChef.destroy(); 23 | }) 24 | 25 | it('new MenuChef(".js-Menu") should advice in console about that element aren\'t ingredients', function () { 26 | window.logs.warns = [] 27 | new MenuChef('.js-Menu') 28 | expect(window.logs.warns[0]).to.be.equal('MenuChef don\'t find ingredients. Maybe you passed the menu itself as ingredients. If the class of menu is ".menu", pass ".menu a". The links are the ingredients =)'); 29 | MenuChef.destroy(); 30 | }); 31 | 32 | it('new MenuChef(".js-Mene") receive a element that don\'t exist and throw an error', function () { 33 | try { 34 | new MenuChef('.js-Mene') 35 | } catch (err) { 36 | expect(err).to.match(/Error: MenuChef needs link elements passed as ingredients/); 37 | } 38 | }); 39 | 40 | it('new MenuChef(".js-Menu a") works fine', function () { 41 | expect(new MenuChef('.js-Menu a')._ingredients).to.have.length.above(2); 42 | }); 43 | 44 | }); 45 | 46 | describe('MenuChef.open()', function () { 47 | it('MenuChef.open() should open the menu', function () { 48 | MenuChef.open(); 49 | expect(document.querySelector('.MenuChef').classList.contains('is-visible')).to.be.true; 50 | }); 51 | }); 52 | 53 | describe('MenuChef.close()', function () { 54 | it('MenuChef.close() should close the menu', function () { 55 | MenuChef.close(); 56 | expect(document.querySelector('.MenuChef').classList.contains('is-visible')).to.be.false; 57 | }); 58 | }); 59 | 60 | describe('MenuChef.toggle()', function () { 61 | it('MenuChef.toggle() should open the menu', function () { 62 | MenuChef.toggle(); 63 | expect(document.querySelector('.MenuChef').classList.contains('is-visible')).to.be.true; 64 | }); 65 | 66 | it('MenuChef.toggle() should close the menu', function () { 67 | MenuChef.toggle(); 68 | expect(document.querySelector('.MenuChef').classList.contains('is-visible')).to.be.false; 69 | }); 70 | }); 71 | 72 | describe('MenuChef.destroy()', function () { 73 | it('MenuChef.destroy() should remove MenuChef from DOM', function () { 74 | MenuChef.destroy(); 75 | expect(document.querySelector('.MenuChef')).to.be.null; 76 | }); 77 | }); 78 | 79 | describe('MenuChef options', function () { 80 | it('Change options', function () { 81 | var menu = new MenuChef('.js-Menu a', { 82 | closeOnClick: false, 83 | }); 84 | expect(menu._options.closeOnClick).to.be.false; 85 | MenuChef.destroy(); 86 | }); 87 | 88 | it('Options classes object', function () { 89 | new MenuChef('.js-Menu a', { 90 | classes: { 91 | exclude: ['class-foo'], 92 | }, 93 | }); 94 | expect(document.querySelector('.MenuChef-links-link').classList.contains('class-foo')).to.be.false; 95 | MenuChef.destroy(); 96 | 97 | new MenuChef('.js-Menu a', { 98 | classes: { 99 | include: ['yolo'], 100 | }, 101 | }); 102 | expect(document.querySelector('.MenuChef-links-link').classList.contains('yolo')).to.be.true; 103 | MenuChef.destroy(); 104 | 105 | new MenuChef('.js-Menu a', { 106 | classes: { 107 | only: ['class-foo'] 108 | } 109 | }); 110 | expect(document.querySelector('.MenuChef-links-link').classList.contains('class-foo')).to.be.true; 111 | expect(document.querySelector('.MenuChef-links-link').classList.contains('class-bar')).to.be.false; 112 | }); 113 | 114 | it('Change scheme', function () { 115 | var menu = new MenuChef('.js-Menu a', { 116 | scheme: 'red' 117 | }); 118 | MenuChef.open(); 119 | expect(menu._options.scheme).to.be.equal('red'); 120 | expect(document.querySelector('.MenuChef').dataset.scheme).to.be.equal('red'); 121 | MenuChef.destroy(); 122 | }); 123 | it('Change theme', function () { 124 | // test theme string 125 | var menu = new MenuChef('.js-Menu a', { 126 | theme: 'side' 127 | }); 128 | expect(menu._options.theme).to.be.equal('side'); 129 | expect(menu._themeClass).to.be.equal('MenuChef--theme-side'); 130 | MenuChef.destroy(); 131 | var menu = new MenuChef('.js-Menu a', { 132 | theme: { 133 | theme: 'side', 134 | direction: 'left' 135 | } 136 | }); 137 | 138 | // test theme object 139 | expect(menu._options.theme).to.be.a.object; 140 | expect(menu._options.theme.theme).to.be.equal('side') 141 | expect(menu._options.theme.direction).to.be.equal('left') 142 | expect(menu._themeClass).to.be.equal('MenuChef--theme-side'); 143 | MenuChef.destroy(); 144 | }); 145 | it('Change custom classes', function () { 146 | var menu = new MenuChef('.js-Menu a', { 147 | bodyClassOpen: 'body-example-class-open', 148 | kitchenClass: 'kitchen-example-class', 149 | kitchenOpenClass: 'kitchen-example-class-open' 150 | }); 151 | MenuChef.open(); 152 | expect(document.body.classList.contains('body-example-class-open')).to.be.true; 153 | expect(document.querySelector('.MenuChef').classList.contains('kitchen-example-class-open')).to.be.true; 154 | expect(document.querySelector('.MenuChef').classList.contains('kitchen-example-class')).to.be.true; 155 | MenuChef.close(); 156 | expect(document.body.classList.contains('body-example-class-open')).to.be.false; 157 | expect(document.querySelector('.MenuChef').classList.contains('kitchen-example-class-open')).to.be.false; 158 | expect(document.querySelector('.MenuChef').classList.contains('kitchen-example-class')).to.be.true; 159 | MenuChef.destroy(); 160 | }); 161 | it('Change theme effects', function () { 162 | var menu = new MenuChef('.js-Menu a', { 163 | theme: { 164 | theme: 'side', 165 | effectOnOpen: 'smooth', 166 | direction: 'left', 167 | pageEffect: 'blur' 168 | }, 169 | }); 170 | expect(document.body.classList.contains('has-MenuChef--effect--blur')).to.be.true; 171 | expect(document.querySelector('.MenuChef').classList.contains('MenuChef--theme-side-effect--smooth')).to.be.true; 172 | expect(document.querySelector('.MenuChef').classList.contains('MenuChef--theme-side--dir--left')).to.be.true; 173 | MenuChef.open(); 174 | expect(document.body.classList.contains('has-menuChefOpen--side')).to.be.true; 175 | expect(document.querySelector('.MenuChef').classList.contains('MenuChef--theme-side-effect--smooth--open')).to.be.true; 176 | MenuChef.destroy(); 177 | }); 178 | 179 | it('Change custom button', function () { 180 | var menu = new MenuChef('.js-Menu a', { 181 | button: 'custom btn' 182 | }); 183 | 184 | var custombtn = document.getElementById('custombtn'); 185 | 186 | expect(menu.ISBUTTONDEFAULT).to.be.false; 187 | expect(custombtn.textContent).to.be.equal('custom btn'); 188 | eventFire(custombtn, 'click'); 189 | expect(MenuChef.isOpen).to.be.true; 190 | eventFire(custombtn, 'click'); 191 | expect(MenuChef.isOpen).to.be.false; 192 | MenuChef.destroy(); 193 | }); 194 | 195 | it('Change parent element', function () { 196 | expect(document.querySelector('#menu .MenuChef')).to.be.null; 197 | 198 | var menu = new MenuChef('.js-Menu a', { 199 | parent: '#menu' 200 | }); 201 | 202 | expect(document.querySelector('#menu .MenuChef')).to.be.not.null; 203 | MenuChef.destroy(); 204 | }); 205 | 206 | }); 207 | 208 | describe('MenuChef options callbacks', function () { 209 | it('onOpen() should execute on open', function () { 210 | var executed = false; 211 | var menu = new MenuChef('.js-Menu a', { 212 | onOpen: function () { 213 | executed = true; 214 | } 215 | }); 216 | MenuChef.open(); 217 | expect(executed).to.be.true; 218 | MenuChef.destroy(); 219 | }); 220 | 221 | it('onClose() should execute on close', function () { 222 | var executed = false; 223 | var menu = new MenuChef('.js-Menu a', { 224 | onClose: function () { 225 | executed = true; 226 | } 227 | }); 228 | MenuChef.open(); 229 | expect(executed).to.be.false; 230 | MenuChef.close(); 231 | expect(executed).to.be.true; 232 | MenuChef.destroy(); 233 | }); 234 | 235 | it('onClick() should execute on click', function () { 236 | // http://stackoverflow.com/a/2706236/1856898 237 | // simulate click to work in terminal testing 238 | var executed = false; 239 | var menu = new MenuChef('.js-Menu a', { 240 | onClick: function () { 241 | executed = true; 242 | } 243 | }); 244 | 245 | MenuChef.open(); 246 | expect(executed).to.be.false; 247 | eventFire(document.querySelector('.MenuChef-links-link'), 'click'); 248 | expect(executed).to.be.true; 249 | MenuChef.close(); 250 | MenuChef.destroy(); 251 | }); 252 | 253 | it('onReady() should execute on ready', function () { 254 | MenuChef.destroy(); 255 | var executed = false; 256 | expect(executed).to.be.false; 257 | expect(document.querySelector('.MenuChef')).to.be.null; 258 | 259 | var menu = new MenuChef('.js-Menu a', { 260 | onReady: function () { 261 | executed = true; 262 | } 263 | }); 264 | 265 | expect(document.querySelector('.MenuChef')).to.be.not.null; 266 | expect(executed).to.be.true; 267 | MenuChef.destroy(); 268 | }); 269 | }); 270 | 271 | describe('Public Variables', function () { 272 | it('MenuChef.version should return the actual version of MenuChef', function () { 273 | expect(MenuChef.version).to.be.a.string; 274 | }); 275 | it('MenuChef.isOpen should return a boolean indicating whether it\'s open or not or null if never was opened', function () { 276 | new MenuChef('.js-Menu a'); 277 | expect(MenuChef.isOpen).to.be.null; 278 | MenuChef.open(); 279 | expect(MenuChef.isOpen).to.be.true; 280 | MenuChef.close(); 281 | expect(MenuChef.isOpen).to.be.false; 282 | MenuChef.destroy(); 283 | }); 284 | }); -------------------------------------------------------------------------------- /assets/css/style.scss: -------------------------------------------------------------------------------- 1 | @import 'config/system'; 2 | @import 'config/config'; 3 | 4 | @import 'tabelinha'; 5 | @import 'uk-form'; 6 | 7 | .ribbonFit { 8 | position: absolute; 9 | right: 10%; 10 | } 11 | 12 | a { 13 | color: $color-1; 14 | transition: color linear .15s; 15 | text-decoration: underline; 16 | 17 | &:hover { 18 | color: darken($color-1, 10%); 19 | } 20 | } 21 | 22 | body { 23 | font-size: 10px; 24 | font-family: $font-1; 25 | background-color: #fffffe; 26 | } 27 | 28 | .button { 29 | display: inline-block; 30 | background-color: $color-2; 31 | font-size: 16px; 32 | font-family: $font-1; 33 | color: rgb(255, 255, 255); 34 | font-weight: bold; 35 | padding: 1.5rem 2.7rem;; 36 | border: 0; 37 | border-radius: 3rem; 38 | transition: background-color linear .15s; 39 | outline: none; 40 | 41 | i { 42 | color: #c0b5a5; 43 | margin-right: 5px; 44 | font-size: 1.2em; 45 | vertical-align: middle; 46 | } 47 | 48 | &:hover { 49 | background-color: darken($color-2, 10%); 50 | } 51 | } 52 | 53 | .titleAccent { 54 | font-size: 5.2em; 55 | font-family: $font-3; 56 | color: $color-1; 57 | line-height: 1.2; 58 | margin: 0; 59 | margin-bottom: -.4em; 60 | } 61 | 62 | .title { 63 | font-size: 3.2em; 64 | font-family: $font-2; 65 | color: $color-2; 66 | text-transform: uppercase; 67 | line-height: 1.2; 68 | letter-spacing: -2px; 69 | margin: 0; 70 | } 71 | 72 | .titleContainer { 73 | text-align: center; 74 | } 75 | 76 | .icon { 77 | display: inline-block; 78 | fill: $color-3; 79 | } 80 | .icon--title { 81 | margin-bottom: -6.2em; 82 | position: relative; 83 | z-index: -1; 84 | width: 16em; 85 | height: 9em; 86 | transform: scale(.9); 87 | } 88 | .icon--table, 89 | .icon--oven { 90 | margin-left: 3em; 91 | } 92 | .i-browser-center, 93 | .i-browser-side { 94 | transform: translate(.65em, 2.6em); 95 | } 96 | 97 | .Header { 98 | background-image: url('../img/header-bg.jpg'); 99 | overflow: hidden; 100 | 101 | &::after { 102 | content: ''; 103 | display: block; 104 | width: 100%; 105 | height: 36px; 106 | background-image: url('../img/header-append.png'); 107 | background-size: cover; 108 | background-position: center center; 109 | } 110 | 111 | > .container { 112 | height: 580px; 113 | padding-top: 80px; 114 | display: flex; 115 | align-items: center; 116 | justify-content: center; 117 | } 118 | } 119 | 120 | .Header-logo { 121 | // background-image: url('../img/menuchef-bg.png'); 122 | background-repeat: no-repeat; 123 | @include size(879px, 510px); 124 | text-align: center; 125 | padding-top: 75px; 126 | } 127 | .Header-logo-slogan { 128 | font-size: 2rem; 129 | margin-top: 1.5em; 130 | color: #787167; 131 | font-family: $font-1; 132 | font-style: italic; 133 | 134 | span { 135 | font-size: .75em; 136 | } 137 | } 138 | .Header-logo-btns { 139 | margin-top: 1em; 140 | position: relative; 141 | z-index: 25; 142 | 143 | iframe + iframe { 144 | margin-left: 1em; 145 | } 146 | } 147 | 148 | .Header-icon { 149 | background-size: contain; 150 | background-repeat: no-repeat; 151 | 152 | @media (max-width: 768px) { 153 | // display: none !important; 154 | } 155 | } 156 | .Header-icon--1 { 157 | background-image: url('../img/i-header-1.png'); 158 | @include size(222px, 247px); 159 | position: absolute; 160 | transform: translate(-90px); 161 | } 162 | .Header-icon--2 { 163 | background-image: url('../img/i-header-2.png'); 164 | @include size(145px, 80px); 165 | position: absolute; 166 | transform: translate(-10px, 290px); 167 | } 168 | .Header-icon--3 { 169 | background-image: url('../img/i-header-3.png'); 170 | @include size(85px, 46px); 171 | position: absolute; 172 | transform: translate(230px, 40px); 173 | } 174 | .Header-icon--4 { 175 | background-image: url('../img/i-header-4.png'); 176 | @include size(113px, 83px); 177 | display: inline-block; 178 | transform: translate(-300px, 160px); 179 | } 180 | .Header-icon--5 { 181 | background-image: url('../img/i-header-5.png'); 182 | @include size(163px, 101px); 183 | display: inline-block; 184 | transform: translate(0px, -50px); 185 | } 186 | .Header-icon--6 { 187 | background-image: url('../img/i-header-6.png'); 188 | @include size(225px, 146px); 189 | display: inline-block; 190 | transform: translate(70px, -20px); 191 | } 192 | .Header-bottom { 193 | text-align: right; 194 | margin-top: -220px; 195 | } 196 | 197 | .Flavors { 198 | padding-top: 7em; 199 | } 200 | 201 | .Flavors-items { 202 | display: flex; 203 | justify-content: space-between; 204 | margin-top: 7em; 205 | width: 98%; 206 | 207 | &.is-hover .Flavors-item:not(.is-active) { 208 | @media (min-with: 992px) { 209 | opacity: .6; 210 | } 211 | } 212 | } 213 | .Flavors-item { 214 | width: 31%; 215 | border: 2px solid transparent; 216 | border-radius: 10px; 217 | -webkit-border-image: url('../img/flavors-border.png') 3 round; /* Safari 3.1-5 */ 218 | -o-border-image: url('../img/flavors-border.png') 3 round; /* Opera 11-12.1 */ 219 | border-image: url('../img/flavors-border.png') 3 round; 220 | padding: 4em 6em; 221 | transition: border linear .15s, box-shadow linear .15s, background-color linear .15s, transform linear .15s, opacity linear .2s; 222 | 223 | @media (min-width: 992px) { 224 | position: relative; 225 | padding: 4em 6em 10em 6em; 226 | } 227 | 228 | .buttonContainer { 229 | @media (min-width: 992px) { 230 | margin: 0 0 0 -2em; 231 | position: absolute; 232 | bottom: 1.5em; 233 | } 234 | @media (max-width: 992px) { 235 | margin-top: 20px; 236 | text-align: center; 237 | } 238 | } 239 | 240 | .button + .button { margin-left: 20px; } 241 | .button { 242 | transition: opacity linear .15s; 243 | 244 | @media (min-width: 992px) { 245 | opacity: 0; 246 | } 247 | } 248 | 249 | &:hover { 250 | border: 2px solid #ffefb4; 251 | box-shadow: 0px 0px 57px 0px rgba(242, 221, 141, 0.74); 252 | background-color: #fff; 253 | 254 | .button { opacity: 1; } 255 | 256 | .Flavors-item-menu--center { 257 | animation: menuchef-center ease-in-out .5s; 258 | animation-iteration-count: 1; 259 | transform-origin: 35% 48%; 260 | -webkit-animation: menuchef-center ease-in-out .5s; 261 | -webkit-animation-iteration-count: 1; 262 | -webkit-transform-origin: 35% 48%; 263 | -moz-animation: menuchef-center ease-in-out .5s; 264 | -moz-animation-iteration-count: 1; 265 | -moz-transform-origin: 35% 48%; 266 | -o-animation: menuchef-center ease-in-out .5s; 267 | -o-animation-iteration-count: 1; 268 | -o-transform-origin: 35% 48%; 269 | -ms-animation: menuchef-center ease-in-out .5s; 270 | -ms-animation-iteration-count: 1; 271 | -ms-transform-origin: 35% 48%; 272 | } 273 | .Flavors-item-menu--left { 274 | animation: menuchef-side-left ease-in-out .6s; 275 | animation-iteration-count: 1; 276 | transform-origin: 0% 50%; 277 | -webkit-animation: menuchef-side-left cubic-bezier(0.18, 0.93, 0.57, 1.03) .6s; 278 | -webkit-animation-iteration-count: 1; 279 | -webkit-transform-origin: 0% 50%; 280 | -moz-animation: menuchef-side-left cubic-bezier(0.18, 0.93, 0.57, 1.03) .6s; 281 | -moz-animation-iteration-count: 1; 282 | -moz-transform-origin: 0% 50%; 283 | -o-animation: menuchef-side-left cubic-bezier(0.18, 0.93, 0.57, 1.03) .6s; 284 | -o-animation-iteration-count: 1; 285 | -o-transform-origin: 0% 50%; 286 | -ms-animation: menuchef-side-left cubic-bezier(0.18, 0.93, 0.57, 1.03) .6s; 287 | -ms-animation-iteration-count: 1; 288 | -ms-transform-origin: 0% 50%; 289 | } 290 | .Flavors-item-menu--right { 291 | animation: menuchef-side-right cubic-bezier(0.18, 0.93, 0.57, 1.03) .6s; 292 | animation-iteration-count: 1; 293 | transform-origin: 100% 50%; 294 | -webkit-animation: menuchef-side-right cubic-bezier(0.18, 0.93, 0.57, 1.03) .6s; 295 | -webkit-animation-iteration-count: 1; 296 | -webkit-transform-origin: 100% 50%; 297 | -moz-animation: menuchef-side-right cubic-bezier(0.18, 0.93, 0.57, 1.03) .6s; 298 | -moz-animation-iteration-count: 1; 299 | -moz-transform-origin: 100% 50%; 300 | -o-animation: menuchef-side-right cubic-bezier(0.18, 0.93, 0.57, 1.03) .6s; 301 | -o-animation-iteration-count: 1; 302 | -o-transform-origin: 100% 50%; 303 | -ms-animation: menuchef-side-right cubic-bezier(0.18, 0.93, 0.57, 1.03) .6s; 304 | -ms-animation-iteration-count: 1; 305 | -ms-transform-origin: 100% 50%; 306 | } 307 | 308 | } 309 | } 310 | .Flavors-item-type { 311 | font-size: 2.1em; 312 | font-family: $font-2; 313 | color: $color-2; 314 | text-transform: uppercase; 315 | text-align: center; 316 | } 317 | .Flavors-item-browser { 318 | display: block; 319 | margin: 0 auto; 320 | width: 18.5em; 321 | height: 14.4em; 322 | fill: $color-2; 323 | } 324 | .Flavors-item-menu { 325 | margin-top: -14.4em; 326 | transform: translate(2.4em, 2.2em); 327 | 328 | @media (max-width: 1200px) { transform: translate(.6em, 2.2em); } 329 | @media (max-width: 992px) { transform: translate(6.4em, 2.1em); } 330 | 331 | &--left { 332 | transform: translate(2.4em, 2.1em); 333 | @media (max-width: 1200px) { transform: translate(.6em, 2.1em); } 334 | @media (max-width: 992px) { transform: translate(6.4em, 2.1em); } 335 | } 336 | &--right { 337 | transform: translate(11.2em, 2.1em); 338 | @media (max-width: 1200px) { transform: translate(9.4em, 2.1em); } 339 | @media (max-width: 992px) { transform: translate(15.2em, 2.1em); } 340 | } 341 | } 342 | .Flavors-item-recipe { 343 | font-size: 20px; 344 | color: $color-2; 345 | font-style: italic; 346 | text-align: center; 347 | margin: 1.5em 0; 348 | } 349 | .Flavors-item-code { 350 | text-align: left; 351 | // transition: all linear .25s; 352 | // background: lighten($color-main, 30%); 353 | background: transparent; 354 | // border-color: lighten($color-main, 20%); 355 | border-color: transparent; 356 | 357 | @media (min-width: 1200px) { 358 | height: 170px; 359 | } 360 | 361 | @media (min-width: 992px) { 362 | height: 190px; 363 | } 364 | 365 | @media (max-width: 992px) { 366 | height: 150px; 367 | margin-bottom: 30px; 368 | } 369 | } 370 | .Flavors-item-code { 371 | position: relative; 372 | } 373 | .Flavors-item-code > pre { 374 | white-space: pre-wrap; 375 | word-break: normal; 376 | // background: lighten($color-main, 30%); 377 | background: transparent; 378 | // border-color: lighten($color-main, 20%); 379 | border-color: transparent; 380 | // width: 100%; 381 | // position: absolute; 382 | // top: 50%; 383 | // lef: 0; 384 | // right: 0; 385 | // transform: translateY(-50%); 386 | } 387 | .Flavors-item-checkboxes { 388 | text-align: center; 389 | } 390 | .Flavors-item-checkbox + .Flavors-item-checkbox { 391 | margin-left: 25px; 392 | } 393 | .Flavors-item-checkbox { 394 | font-size: 13px; 395 | font-family: $font-1; 396 | color: #bcb2a2; 397 | font-weight: 400; 398 | 399 | span { 400 | vertical-align: middle; 401 | margin-left: 3px; 402 | position: relative; 403 | top: 2px; 404 | } 405 | 406 | input:checked + span { 407 | color: #787167; 408 | } 409 | } 410 | 411 | @include keyframes(menuchef-center) { 412 | 0% { 413 | opacity: 0; 414 | // -webkit-transform: scale(0) translate(2.4em, 2.2em); 415 | // transform: scale(0) translate(2.4em, 2.2em); 416 | } 417 | 100% { 418 | opacity: 1; 419 | // -webkit-transform: scale(1) translate(2.4em, 2.2em); 420 | // transform: scale(1) translate(2.4em, 2.2em); 421 | } 422 | } 423 | 424 | @include keyframes(menuchef-side-left) { 425 | 0% { 426 | transform: translate(2.4em, 2em) scaleX(0); 427 | // @media (max-width: 1200px) { transform: translate(.6em, 2.1em) scaleX(0); } 428 | }, 429 | 100% { 430 | transform: translate(2.4em, 2em) scaleX(1); 431 | // @media (max-width: 1200px) { transform: translate(.6em, 25z.1em) scaleX(1); } 432 | } 433 | } 434 | 435 | @include keyframes(menuchef-side-right) { 436 | 0% { 437 | -webkit-transform: translate(-11.2em, 2.1em) scaleX(0); 438 | transform: translate(-11.2em, 2.1em) scaleX(0); 439 | }, 440 | 100% { 441 | -webkit-transform: translate(11.2em, 2.1em) scaleX(1); 442 | transform: translate(11.2em, 2.1em) scaleX(1); 443 | } 444 | } 445 | 446 | @media (max-width: 1200px) { 447 | @include keyframes(menuchef-side-left) { 448 | 0% { 449 | transform: translate(.6em, 2.1em) scaleX(0); 450 | }, 451 | 100% { 452 | transform: translate(.6em, 2.1em) scaleX(1); 453 | } 454 | } 455 | 456 | @include keyframes(menuchef-side-right) { 457 | 0% { 458 | transform: translate(-13em, 2.1em) scaleX(0); 459 | }, 460 | 100% { 461 | transform: translate(9.4em, 2.1em) scaleX(1); 462 | } 463 | } 464 | } 465 | 466 | @media (max-width: 992px) { 467 | @include keyframes(menuchef-side-left) { 468 | 0% { 469 | transform: translate(6.4em, 2.1em); 470 | }, 471 | 100% { 472 | transform: translate(6.4em, 2.1em); 473 | } 474 | } 475 | 476 | @include keyframes(menuchef-center) { 477 | 0% { 478 | opacity: 1; 479 | } 480 | 100% { 481 | opacity: 1; 482 | } 483 | } 484 | 485 | @include keyframes(menuchef-side-right) { 486 | 0% { 487 | transform: translate(15.1em, 2.1em); 488 | }, 489 | 100% { 490 | transform: translate(15.1em, 2.1em); 491 | } 492 | } 493 | } 494 | 495 | .NutricionalTable { 496 | padding-top: 8em; 497 | } 498 | 499 | .NutricionalTable-table { 500 | margin-top: 3em; 501 | font-size: 1.4em; 502 | border: 1px solid #d3cec6; 503 | border-radius: 2px; 504 | padding: 3em 2em; 505 | color: $color-2; 506 | 507 | th { 508 | font-size: 1.1em; 509 | padding-bottom: 1em !important; 510 | border-bottom: 1px solid #f3efeb !important; 511 | } 512 | 513 | td { 514 | font-style: italic; 515 | padding: 1em 0 !important; 516 | border-bottom: 1px solid #f3efeb !important; 517 | } 518 | 519 | tr { 520 | &:hover { 521 | .NutricionalTable-table-link { opacity: 1; } 522 | } 523 | } 524 | 525 | } 526 | .NutricionalTable-table-link { 527 | margin-right: .5em; 528 | opacity: 0; 529 | } 530 | 531 | 532 | .NutricionalTable-table-title { 533 | font-size: 20px; 534 | color: $color-1; 535 | font-weight: bold; 536 | text-transform: uppercase; 537 | border-left: .4em solid $color-1; 538 | padding-left: 1.2em; 539 | margin-left: -1.4em; 540 | } 541 | 542 | .NutricionalTable-table-var { 543 | width: 15%; 544 | } 545 | 546 | .NutricionalTable-table-type { 547 | width: 12%; 548 | } 549 | 550 | .NutricionalTable-table-default { 551 | width: 12%; 552 | } 553 | 554 | .NutricionalTable-table-desc { 555 | width: 61%; 556 | } 557 | 558 | .label--string { 559 | background-color: darken($color-main, 7%*1); 560 | } 561 | .label--object { 562 | background-color: darken($color-main, 7%*2); 563 | } 564 | .label--boolean { 565 | background-color: darken($color-main, 7%*3); 566 | } 567 | .label--function { 568 | background-color: darken($color-main, 7%*4); 569 | } 570 | 571 | .Flavors-item-colors-title { 572 | @extend .Flavors-item-recipe; 573 | font-size: 14px; 574 | 575 | @media (max-width: 992px) { 576 | margin-top: 0 !important; 577 | } 578 | } 579 | 580 | .Flavors-item-colors { 581 | padding: 0; 582 | text-align: center; 583 | 584 | @media (max-width: 992px) { 585 | margin-bottom: 20px; 586 | } 587 | } 588 | .Flavors-item-colors-color + .Flavors-item-colors-color { 589 | margin-left: 20px; 590 | 591 | @media (max-width: 1200px) { 592 | margin-left: 10px; 593 | } 594 | } 595 | .Flavors-item-colors-color { 596 | list-style-type: none; 597 | display: inline-block; 598 | 599 | button { 600 | @include size(18px); 601 | border-radius: 3px; 602 | border: 0; 603 | outline: none; 604 | } 605 | 606 | &.is-active { 607 | button { 608 | box-shadow: 0 0 10px $color-main; 609 | } 610 | } 611 | } 612 | .Flavors-item-colors-color--black button { 613 | background-color: #323232; 614 | } 615 | .Flavors-item-colors-color--yellow button { 616 | background-color: #f9e8c0; 617 | } 618 | .Flavors-item-colors-color--red button { 619 | background-color: #f1b7b0; 620 | } 621 | .Flavors-item-colors-color--green button { 622 | background-color: #bfe8d7; 623 | } 624 | .Flavors-item-colors-color--blue button { 625 | background-color: #bcc8ea; 626 | } 627 | 628 | @media (max-width: 1200px) { 629 | .Flavors-item-icon { 630 | transform: scale(.8); 631 | } 632 | 633 | @media (min-width: 992px) { 634 | .Flavors-item .buttonContainer { 635 | text-align: center; 636 | margin: 0 0 0 -4.5em; 637 | } 638 | 639 | .Flavors-item .button + .button { 640 | margin-left: 10px; 641 | } 642 | } 643 | } 644 | 645 | @media (max-width: 992px) { 646 | .Flavors-items { 647 | flex-direction: column; 648 | } 649 | 650 | .Flavors-item { 651 | width: 100%; 652 | margin-bottom: 4rem; 653 | } 654 | .Flavors-item-recipe { 655 | margin-top: -1.6em; 656 | } 657 | .Flavors-item-icon { 658 | float: left; 659 | margin-left: -5rem; 660 | margin-top: 0.4rem; 661 | } 662 | .Flavors-item-type { 663 | text-align: left; 664 | } 665 | } 666 | 667 | @media (max-width: 768px) { 668 | .ribbonFit { 669 | right: 3%; 670 | zoom: .7; 671 | } 672 | 673 | .Header-logo { 674 | width: 100%; 675 | height: auto; 676 | 677 | img { 678 | max-width: 200px; 679 | position: relative; 680 | z-index: 300; 681 | } 682 | } 683 | 684 | .Header > .container { 685 | height: 290px; 686 | padding-top: 0; 687 | display: flex; 688 | align-items: initial; 689 | justify-content: center; 690 | } 691 | 692 | .Header-logo-slogan { 693 | font-size: 1.75rem; 694 | } 695 | 696 | .Flavors-item { 697 | padding: 4em 0em; 698 | } 699 | 700 | .Flavors-item-icon { 701 | float: none; 702 | margin-top: 3rem; 703 | width: 30em; 704 | display: block; 705 | margin: 0 auto; 706 | margin-bottom: 20px; 707 | } 708 | .Flavors-item-type { 709 | text-align: center; 710 | } 711 | 712 | .Flavors-item-code { 713 | text-align: center; 714 | height: auto; 715 | } 716 | .Flavors-item-code pre { 717 | display: inline-block; 718 | text-align: left; 719 | } 720 | 721 | main { 722 | overflow: hidden; 723 | } 724 | 725 | .Header-icon { 726 | // display: initial !important; 727 | zoom: 0.3; 728 | margin-top: 200px; 729 | opacity: .4; 730 | } 731 | } 732 | 733 | .Preheating { 734 | margin-top: 7em; 735 | 736 | pre { 737 | background: transparent !important; 738 | } 739 | } 740 | .Preheating-text { 741 | font-size: 1.4em; 742 | color: #787167; 743 | margin-top: 2em; 744 | } 745 | 746 | .Footer { 747 | margin-top: 2.5em; 748 | padding: 1.2em 0; 749 | background-color: #887753; 750 | text-align: center; 751 | color: #fff; 752 | font-size: 1.2em; 753 | 754 | a { 755 | color: lighten(#887753, 35%); 756 | text-decoration: none; 757 | } 758 | } 759 | .Footer-salt { 760 | vertical-align: middle; 761 | margin: 0 .25em; 762 | } 763 | 764 | .Code { 765 | margin: 2em 0 !important; 766 | background: transparent !important; 767 | } -------------------------------------------------------------------------------- /src/MenuChef.js: -------------------------------------------------------------------------------- 1 | // devDependencies 2 | import assign from 'lodash-es/assign' 3 | 4 | // Helpers 5 | import setIF from './helpers/setIF' 6 | import masterCook from './helpers/masterCook' 7 | import setPublicVar from './helpers/setPublicVar' 8 | import forEach from './helpers/forEach' 9 | import noScroll from 'no-scroll' 10 | 11 | // Theme assets 12 | import './templates/main.scss' 13 | import themeDefault from './templates/default.html' 14 | import buttonDefault from './templates/button.html' 15 | 16 | // Utils 17 | import { version as PKG_VERSION } from '../package.json' 18 | 19 | /** 20 | * @module constructor 21 | * @variable ingredients 22 | * @type string 23 | * @default -- 24 | * @description HTML selector for the anchor tags: eg: “.menu a” or “.menu-link” if ”.menu-link” it’s a NODE Collection of links 25 | * @required true 26 | */ 27 | class MenuChef { 28 | constructor (ingredients = false, options = {}) { 29 | if (ingredients === false) throw new Error('MenuChef needs link elements passed as ingredients') 30 | this._ingredients = document.querySelectorAll(ingredients) 31 | if (this._ingredients.length === 0) throw new Error('MenuChef needs link elements passed as ingredients') 32 | if (this._ingredients.length === 1) console.warn('MenuChef don\'t find ingredients. Maybe you passed the menu itself as ingredients. If the class of menu is ".menu", pass ".menu a". The links are the ingredients =)') 33 | 34 | const THEMES = { 35 | full: { 36 | html: themeDefault, 37 | options: { 38 | effectOnOpen: [], 39 | pageEffect: [], 40 | direction: [] 41 | } 42 | }, 43 | side: { 44 | html: themeDefault, 45 | options: { 46 | effectOnOpen: ['smooth'], 47 | pageEffect: ['blur'], 48 | direction: ['left', 'right'] 49 | } 50 | } 51 | } 52 | 53 | const HAMBURGERS = ['3dx', '3dx-r', '3dy', '3dy-r', 'arrow', 'arrow-r', 'arrowalt', 'arrowalt-r', 'boring', 'collapse', 'collapse-r', 'elastic', 'elastic-r', 'emphatic', 'emphatic-r', 'slider', 'slider-r', 'spin', 'spin-r', 'spring', 'spring-r', 'stand', 'stand-r', 'squeeze', 'vortex', 'vortex-r'] 54 | 55 | const SCHEMES = ['black', 'yellow', 'red', 'green', 'blue'] 56 | 57 | /** 58 | * @module constructor 59 | * @variable options 60 | * @type object 61 | * @default options 62 | * @description Overwrite the default options of MenuChef 63 | */ 64 | const DEFAULTS = { 65 | /** 66 | * @module options 67 | * @variable parent 68 | * @type string 69 | * @default body 70 | * @released 1.2.0 71 | * @description Parent element where MenuChef'll placed 72 | */ 73 | parent: 'body', 74 | /** 75 | * @module options 76 | * @variable theme 77 | * @type string, object 78 | * @default full 79 | * @description Theme string (name)/object to personalize specific details of MenuChef theme 80 | */ 81 | theme: { 82 | /** 83 | * @module theme 84 | * @variable theme 85 | * @type string 86 | * @default full 87 | * @description Theme string (name)/object to personalize specific details of MenuChef theme 88 | */ 89 | theme: 'full', 90 | /** 91 | * @module theme 92 | * @variable effectOnOpen 93 | * @type string 94 | * @default -- 95 | * @description Effects on open the menu. The effects available depends of theme.

side: smooth 96 | */ 97 | effectOnOpen: '', 98 | /** 99 | * @module theme 100 | * @variable direction 101 | * @type string 102 | * @default right 103 | * @description Direction to open the menu. Directions available depends of theme.

side: left, right 104 | */ 105 | direction: '', 106 | /** 107 | * @module theme 108 | * @variable pageEffect 109 | * @type string 110 | * @default -- 111 | * @description Effects on page when the menu is opening. Effects available depends of theme.

side: blur 112 | */ 113 | pageEffect: '' 114 | }, 115 | /** 116 | * @module options 117 | * @variable preventScroll 118 | * @type boolean 119 | * @default false 120 | * @released 1.3.0 121 | * @description Prevent page scrolling while menu is open 122 | */ 123 | preventScroll: false, 124 | /** 125 | * @module options 126 | * @variable scheme 127 | * @type string 128 | * @default black 129 | * @description Default schemes colors of MenuChef. You can modify by yourself

Options: black, yellow, red, green, blue 130 | */ 131 | scheme: 'black', 132 | /** 133 | * @module options 134 | * @variable closeOnClick 135 | * @type boolean 136 | * @default true 137 | * @description Close MenuChef when it’s clicked in a link 138 | */ 139 | closeOnClick: true, 140 | /** 141 | * @module options 142 | * @variable closeOnClickOutside 143 | * @type boolean 144 | * @default true 145 | * @description Close MenuChef when it’s clicked outside of kitchen (the menu it self) 146 | */ 147 | closeOnClickOutside: true, 148 | /** 149 | * @module options 150 | * @variable button 151 | * @type string 152 | * @default MenuChef's hamburger button 153 | * @released 1.2.0 154 | * @description HTML of MenuChef's button. You can pass your own button HTML like <i class="myicon"></i>. 155 | *
156 | * Remember: The MenuChef's button is the same for open and for close (toggle). You can control appearence of button with CSS. The button container receives the class is-active when MenuChef is open. 157 | */ 158 | button: buttonDefault, 159 | /** 160 | * @module options 161 | * @variable classes 162 | * @type object 163 | * @default -- 164 | * @released 1.1.0 165 | * @description Classes is a manager of classes in links passed to MenuChef. It reveives 3 properties. All properties receives ONLY array of classes. 166 | *
167 | * exclude: remove a class or an array of classes 168 | *
169 | * only: remove ALL classes expect this one or an array of classes 170 | *
171 | * include: add a class or an array of classes 172 | *
173 | * ps: The order of hierarchy is respected. exclude > only > include 174 | */ 175 | classes: { 176 | exclude: [], 177 | only: [], 178 | include: [] 179 | }, 180 | 181 | /** 182 | * @module options 183 | * @variable hamburger 184 | * @type string 185 | * @default boring 186 | * @description This option is powered by awesome lib Hamburgers, by Jonathan Sug. The operation can be seen at lib demo site

Options: 3dx, 3dx-r, 3dy, 3dy-r, arrow, arrow-r, arrowalt, arrowalt-r, boring, collapse, collapse-r, elastic, elastic-r, emphatic, emphatic-r, slider, slider-r, spin, spin-r, spring, spring-r, stand, stand-r, squeeze, vortex, vortex-r 187 | */ 188 | hamburger: 'boring', 189 | /** 190 | * @module options 191 | * @variable bodyClassOpen 192 | * @type string 193 | * @default -- 194 | * @description Append a class in when the menu is opened 195 | */ 196 | bodyClassOpen: '', 197 | /** 198 | * @module options 199 | * @variable kitchenClass 200 | * @type string 201 | * @default -- 202 | * @description Append a class in MenuChef wrapper

ps. Kitchen is the wrapper of MenuChef, where all the ingredients are cooked 203 | */ 204 | kitchenClass: '', 205 | /** 206 | * @module options 207 | * @variable kitchenOpenClass 208 | * @type string 209 | * @default -- 210 | * @description Append a class in MenuChef when the same is opened 211 | */ 212 | kitchenOpenClass: '', 213 | /** 214 | * @module options 215 | * @variable onOpen 216 | * @type function 217 | * @default -- 218 | * @description Callback function that's called when MenuChef is open 219 | */ 220 | onOpen: () => {}, 221 | /** 222 | * @module options 223 | * @variable onClose 224 | * @type function 225 | * @default -- 226 | * @description Callback function that's called when MenuChef is close 227 | */ 228 | onClose: () => {}, 229 | /** 230 | * @module options 231 | * @variable onClick 232 | * @type function 233 | * @default -- 234 | * @description Callback function that's called when a link in MenuChef is clicked 235 | */ 236 | onClick: () => {}, 237 | /** 238 | * @module options 239 | * @variable onReady 240 | * @type function 241 | * @default -- 242 | * @released 1.2.0 243 | * @description Callback function that's called when MenuChef is ready and loaded 244 | */ 245 | onReady: () => {} 246 | } 247 | 248 | this.version = PKG_VERSION 249 | this._options = assign(DEFAULTS, options) 250 | this._options.hamburger = setIF(this._options.hamburger, (HAMBURGERS.indexOf(this._options.hamburger) !== -1), 'boring') 251 | this._options.scheme = setIF(this._options.scheme, (SCHEMES.indexOf(this._options.scheme) !== -1), 'black') 252 | if (typeof this._options.theme !== 'string' && typeof this._options.theme !== 'object') throw new Error('theme must be a string or a object') 253 | this._theme = (typeof this._options.theme === 'string') ? this._options.theme : this._options.theme.theme 254 | 255 | this.$parent = document.querySelector(this._options.parent) ? document.querySelector(this._options.parent) : document.querySelector(DEFAULTS.parent) 256 | 257 | if (this._options.parent !== DEFAULTS.parent && !this.$parent) console.warning(`parent element don't found. body will be used instead.`) 258 | 259 | this._themeOptions = (typeof this._options.theme === 'object') ? this._options.theme : {} 260 | 261 | if (typeof this._options.onOpen !== 'function') throw new Error('onOpen callback must be a function') 262 | if (typeof this._options.onClose !== 'function') throw new Error('onClose callback must be a function') 263 | if (typeof this._options.onClick !== 'function') throw new Error('onClick callback must be a function') 264 | if (typeof this._options.onReady !== 'function') throw new Error('onReady callback must be a function') 265 | 266 | if (!THEMES.hasOwnProperty(this._theme)) { 267 | console.warn(`Theme "${this._theme}" passed in options does not exist. Default theme was setted. Themes availables: ${Object.keys(THEMES).join(', ')}`) 268 | this._theme = 'full' 269 | } 270 | 271 | try { this._themeOptions.effectOnOpen = setIF(this._themeOptions.effectOnOpen, (THEMES[this._theme].options.effectOnOpen.indexOf(this._themeOptions.effectOnOpen) !== -1)) } catch (e) {} 272 | try { this._themeOptions.direction = setIF(this._themeOptions.direction, (THEMES[this._theme].options.direction.indexOf(this._themeOptions.direction) !== -1)) } catch (e) {} 273 | try { this._themeOptions.pageEffect = setIF(this._themeOptions.pageEffect, (THEMES[this._theme].options.pageEffect.indexOf(this._themeOptions.pageEffect) !== -1)) } catch (e) {} 274 | 275 | this._themeClass = `MenuChef--theme-${this._theme}` 276 | this._kitchenClass = 'js-MenuChef' 277 | this._kitchenLinksClass = 'js-MenuChefLinks' 278 | this._kitchenLinksClassStyled = 'MenuChef-links-link' 279 | this._dirClass = (this._themeOptions.direction) ? `${this._themeClass}--dir--${this._themeOptions.direction}` : '' 280 | this._themeEffectClass = (this._themeOptions.effectOnOpen) ? `${this._themeClass}-effect--${this._themeOptions.effectOnOpen}` : false 281 | this._themeOpenClass = (this._themeEffectClass) ? `${this._themeEffectClass}--open` : 'is-visible' 282 | 283 | this._classes = { 284 | init: { 285 | body: [(this._themeOptions.pageEffect) ? `has-MenuChef--effect--${this._themeOptions.pageEffect}` : ''], 286 | controlBtn: { 287 | open: [(this._themeOptions.direction) ? `MenuChefOpen--dir--${this._themeOptions.direction}` : ''], 288 | close: [] 289 | }, 290 | kitchen: [this._themeClass, this._themeEffectClass, this._dirClass, this._options.kitchenClass] 291 | }, 292 | open: { 293 | body: ['has-menuChefOpen', `has-menuChefOpen--${this._theme}`, this._options.bodyClassOpen], 294 | controlBtn: { 295 | open: [], 296 | close: [] 297 | }, 298 | kitchen: [this._themeOpenClass, this._options.kitchenOpenClass] 299 | }, 300 | close: { 301 | body: [], 302 | controlBtn: { 303 | open: [], 304 | close: [] 305 | }, 306 | kitchen: [] 307 | } 308 | } 309 | 310 | MenuChef.prototype.ISBUTTONDEFAULT = (this._options.button === buttonDefault) 311 | 312 | this.init() 313 | this.inject(THEMES) 314 | this.cook() 315 | } 316 | 317 | inject (themes) { 318 | if (!this.ISBUTTONDEFAULT) this._options.button = `${this._options.button}` 319 | this.$parent.insertAdjacentHTML('afterbegin', (themes[this._theme].html + this._options.button).replace(/{{options.hamburger}}/g, this._options.hamburger.toLowerCase())) 320 | this.$openButton = document.querySelector('.MenuChefOpen') 321 | this._kitchen = document.querySelector(`.${this._kitchenClass}`) 322 | masterCook(document.body, this._classes.init.body) 323 | masterCook(this._kitchen, this._classes.init.kitchen) 324 | if (this.ISBUTTONDEFAULT) masterCook(this.$openButton, this._classes.init.controlBtn.open) 325 | 326 | // to work in IE10 327 | // this.$openButton.dataset.scheme = this._kitchen.dataset.scheme = this._options.scheme 328 | if (this.ISBUTTONDEFAULT) this.$openButton.setAttribute('data-scheme', this._options.scheme) 329 | this._kitchen.setAttribute('data-scheme', this._options.scheme) 330 | this._options.onReady() 331 | } 332 | 333 | cook () { 334 | const self = this 335 | const pan = this._kitchen.querySelector(`.${this._kitchenLinksClass}`) 336 | forEach(this._ingredients, (index, ingredient) => { // for (let ingredient of this._ingredients) {} 337 | var preparing = ingredient.cloneNode(true) 338 | 339 | try { 340 | // options.classes.exclude 341 | if (self._options.classes.exclude.length === 0) { 342 | } else { 343 | self._options.classes.exclude.map(classe => preparing.classList.remove(classe)) 344 | preparing.classList.add(self._kitchenLinksClassStyled) 345 | } 346 | } catch (e) {} 347 | 348 | try { 349 | // options.classes.only 350 | if (self._options.classes.only.length === 0) { 351 | } else { 352 | for (let i = preparing.classList.length - 1; i >= 0; i--) { 353 | let classe = preparing.classList[i] 354 | if (self._options.classes.only.indexOf(classe) === -1) { 355 | preparing.classList.remove(classe) 356 | } 357 | } 358 | preparing.classList.add(self._kitchenLinksClassStyled) 359 | } 360 | } catch (e) {} 361 | 362 | try { 363 | // options.classes.include 364 | if (self._options.classes.include.length !== 0) { 365 | self._options.classes.include.map(classe => preparing.classList.add(classe)) 366 | preparing.classList.add(self._kitchenLinksClassStyled) 367 | } 368 | } catch (e) {} 369 | 370 | try { 371 | if (self._options.classes.exclude.length === 0 && self._options.classes.only.length === 0) preparing.className = self._kitchenLinksClassStyled 372 | } catch (e) {} 373 | 374 | preparing.onclick = () => { 375 | self._options.onClick() 376 | if (self._options.closeOnClick) MenuChef.close() 377 | } 378 | 379 | pan.appendChild(preparing) 380 | }) 381 | } 382 | 383 | init () { 384 | const self = this 385 | self._isOpen = null 386 | 387 | /** 388 | * @module public_variables 389 | * @variable MenuChef.version 390 | * @type string 391 | * @default version 392 | * @description Return MenuChef version number 393 | */ 394 | setPublicVar(MenuChef, self, 'version') 395 | /** 396 | * @module public_variables 397 | * @variable MenuChef.isOpen 398 | * @type boolean 399 | * @default null 400 | * @description Return null if MenuChef was never opened, true/>false classe default is is-active 441 | * @description Toggle MenuChef

When this is passed, toggle is fired and return the classe to the element this. Only works when the function toggle() itself is triggered 442 | */ 443 | MenuChef.toggle = function (el = false, classe = 'is-active') { 444 | if (self._kitchen.classList.contains(self._themeOpenClass)) { 445 | MenuChef.close() 446 | if (el) el.classList.remove(classe) 447 | } else { 448 | MenuChef.open() 449 | if (el) el.classList.add(classe) 450 | } 451 | } 452 | MenuChef._watcher = function (e) { 453 | const searchKitchen = (el) => { 454 | try { 455 | return el.getAttribute('onclick').includes('MenuChef.toggle') 456 | } catch (err) {} 457 | 458 | try { 459 | return el.classList.contains(self._kitchenLinksClass) || el.classList.contains(self._kitchenClass) 460 | } catch (err) {} 461 | } 462 | /** 463 | * @private 464 | * Close MenuChef if is clicked outside 465 | * Don't close if is clicked in kitchen or in a button with 466 | * MenuChef.toggle() function on onclick because the watcher 467 | * closes the MenuChef before the toggle(), who mistakenly opened 468 | */ 469 | 470 | try { 471 | if (e.path.filter(searchKitchen).length === 0) MenuChef.close() 472 | } catch (e) {} 473 | } 474 | /** 475 | * @module public_methods 476 | * @variable MenuChef.destroy() 477 | * @type function 478 | * @default - 479 | * @description Destroy MenuChef instance, HTML inserts and watchers 480 | */ 481 | MenuChef.destroy = function () { 482 | masterCook(document.body, self._classes.init.body, 'remove') 483 | const kitchen = document.querySelector(`.${self._kitchenClass}`) 484 | const kitchenButtonOpen = document.querySelector(`.MenuChefOpen`) 485 | 486 | kitchen.parentNode.removeChild(kitchen) 487 | kitchenButtonOpen.parentNode.removeChild(kitchenButtonOpen) 488 | } 489 | } 490 | 491 | chefObserver (type = 'addWatch') { 492 | if (type === 'addWatch') { 493 | document.addEventListener('click', MenuChef._watcher, true) 494 | } 495 | 496 | if (type === 'removeWatch') { 497 | document.removeEventListener('click', MenuChef._watcher, true) 498 | } 499 | } 500 | } 501 | 502 | window.MenuChef = MenuChef 503 | -------------------------------------------------------------------------------- /assets/css/style.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "file": "style.css", 4 | "sources": [ 5 | "style.scss", 6 | "config/_system.scss", 7 | "config/_config.scss", 8 | "config/_mixins.scss", 9 | "_vars.scss", 10 | "../fonts/_fonts.scss", 11 | "_tabelinha.scss", 12 | "_uk-form.scss" 13 | ], 14 | "names": [], 15 | "mappings": "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" 16 | } -------------------------------------------------------------------------------- /site/index.twig: -------------------------------------------------------------------------------- 1 | {% extends "base.twig" %} 2 | {% import "macros.twig" as helper %} 3 | 4 | 5 | {% block title %}MenuChef - Create hamburgers' menu like a chef{% endblock title %} 6 | {% block appendHead %} 7 | 12 | {% endblock appendHead %} 13 | {% block content %} 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 43 | 44 |
45 |
46 |
47 | 48 | 49 | 50 |

Our

51 |

Flavors

52 |
53 | 54 |
55 |
56 |

Left

57 |
58 | 59 | 60 | 61 | 62 | 63 | 64 |
65 |

Recipe

66 |
67 | 

 68 |         

 69 |         
Select seasoning

 70 | 
 71 |         
    
 72 |           
  • 
 73 |             
 74 |           
    • 
 75 |         

 76 | 
 77 |         
Method of preparation

 78 | 
 79 |         

 80 |           
 81 |           
 82 |         

 83 | 
 84 |         

 85 |           
 86 |           
 87 |         

 88 | 
 89 |       

 90 | 
 91 |       

 92 |         
Center

 93 |         

 94 |           
 95 |             
 96 |           
 97 |           
 98 |             
 99 |           
100 |         

101 |         
Recipe

102 |         

103 |           

104 |         

105 | 
106 |         
Select seasoning

107 | 
108 |         
    
109 |           
  • 
110 |             
111 |           
    • 
112 |         

113 | 
114 |         

115 |           
116 |           
117 |         

118 |       

119 | 
120 |       

121 |         
Right

122 |         

123 |           
124 |             
125 |           
126 |           
127 |             
128 |           
129 |         

130 |         
Recipe

131 |         

132 |           

133 |         

134 | 
135 |         
Select seasoning

136 | 
137 |         
    
138 |           
  • 
139 |             
140 |           
    • 
141 |         

142 | 
143 |         
Method of preparation

144 | 
145 |         

146 |           
147 |           
148 |         

149 | 
150 |         

151 |           
152 |           
153 |         

154 |       

155 |     

156 |   

157 | 

158 | 
159 | 

160 |   

161 |     

162 |       
163 |         
164 |       
165 |       
Preheating

166 |       
the oven

167 |     

168 | 
169 |     

170 |       

171 |         MenuChef helps you to create hamburgers' menu easily even without knowing how to cook. You just need call the MenuChef.js in your page and initiate like the examples above. It's light (approximately 55kb, 13kb gzipped) and you don't need change the HTML code of the menu original. You can personalize it by CSS or by options.
172 |       

173 | 
174 |       

175 |         You can download the latest version of MenuChef in Github or can use the unpkg CDN
176 |       

177 | 
178 |       
<script src="//unpkg.com/menuchef@{{version}}"></script>

179 | 
180 |     

181 | 
182 |   

183 | 

184 | 
185 | 

186 |   

187 |     

188 |       
189 |         
190 |       
191 |       
Nutritional

192 |       
Table

193 |     

194 | 
195 |     

196 |       
Constructor

197 |       
198 |         
199 |           
200 |             
201 |             
202 |             
203 |             
204 |           
205 |         
206 |         
207 |           {% for item in doc.constructor  %}
208 |             
209 |               {{ helper.item(search(item.tags, 'title', 'variable').description, item.name) }}
210 |               
211 |               
212 |               
213 |             
214 |           {% endfor %}
215 |         
216 |       
VariableTypeDefaultDescription
{{ label(search(item.tags, 'title', 'type').description) }}{{ search(item.tags, 'title', 'default').description }}{{ search(item.tags, 'title', 'description').description }}

217 | 
218 |       
Options

219 |       
220 |         
221 |           
222 |             
223 |             
224 |             
225 |             
226 |           
227 |         
228 |         
229 |           {% for item in doc.options  %}
230 |             
231 |               {{ helper.item(search(item.tags, 'title', 'variable').description, item.name, search(item.tags, 'title', 'released').description) }}
232 |               
233 |               
234 |               
235 |             
236 |           {% endfor %}
237 |         
238 |       
VariableTypeDefaultDescription
{{ label(search(item.tags, 'title', 'type').description) }}{{ search(item.tags, 'title', 'default').description }}{{ search(item.tags, 'title', 'description').description }}

239 | 
240 |       
Theme Options

241 |       
242 |         
243 |           
244 |             
245 |             
246 |             
247 |             
248 |           
249 |         
250 |         
251 |           {% for item in doc.theme  %}
252 |             
253 |               {{ helper.item(search(item.tags, 'title', 'variable').description, item.name) }}
254 |               
255 |               
256 |               
257 |             
258 |           {% endfor %}
259 |         
260 |       
VariableTypeDefaultDescription
{{ label(search(item.tags, 'title', 'type').description) }}{{ search(item.tags, 'title', 'default').description }}{{ search(item.tags, 'title', 'description').description }}

261 | 
262 |       
Methods

263 |       
264 |         
265 |           
266 |             
267 |             
268 |             
269 |             
270 |           
271 |         
272 |         
273 |           {% for item in doc.public_methods  %}
274 |             
275 |               {{ helper.item(search(item.tags, 'title', 'variable').description, item.name) }}
276 |               
277 |               
278 |               
279 |             
280 |           {% endfor %}
281 |         
282 |       
VariableTypeDefaultDescription
{{ label(search(item.tags, 'title', 'type').description) }}{{ search(item.tags, 'title', 'default').description }}{{ search(item.tags, 'title', 'description').description }}

283 | 
284 |       
Public Variables

285 |       
286 |         
287 |           
288 |             
289 |             
290 |             
291 |             
292 |           
293 |         
294 |         
295 |           {% for item in doc.public_variables  %}
296 |             
297 |               {{ helper.item(search(item.tags, 'title', 'variable').description, item.name) }}
298 |               
299 |               
300 |               
301 |             
302 |           {% endfor %}
303 | 
304 |         
305 |       
VariableTypeDefaultDescription
{{ label(search(item.tags, 'title', 'type').description) }}{{ search(item.tags, 'title', 'default').description }}{{ search(item.tags, 'title', 'description').description }}

306 | 
307 |       
Theming Vars

308 | 
309 |       

310 |         MenuChef was created with CSS variables, so it's very easy change some elements of the interface just changing a couple of variables, with sort, without change the CSS in fact. The support of CSS variables isn't complete yet in some browsers, so if you want support those browsers, you can overwrite CSS theme default below. If you choose overwrite the CSS theme, don't forget to put !important because the MenuChef's style is injected by JS, so you CSS can't overwrite by cascade.
311 |       

312 | 
313 |       
/* open hamburger button */
314 | .MenuChefOpen .hamburger-inner,
315 | .MenuChefOpen .hamburger-inner::before,
316 | .MenuChefOpen .hamburger-inner::after {
317 |   background-color: #A0A1A5 !important; /* fallback */
318 |   background-color: var(--MenuChef-scheme-color, #A0A1A5) !important; /* try use CSS var with fallback */
319 | }
320 | 
321 | /* close hamburger button */
322 | .MenuChefOpen.is-active .hamburger-inner,
323 | .MenuChefOpen.is-active .hamburger-inner::before,
324 | .MenuChefOpen.is-active .hamburger-inner::after {
325 |   background-color: #28292E !important; /* fallback */
326 |   background-color: var(--MenuChef-scheme-color, #28292E) !important; /* try use CSS var with fallback */
327 | }
328 | 
329 | /* Menuchef kitchen: link's area */
330 | .MenuChef {
331 |   background-color: #28292E !important; /* fallback */
332 |   background-color: var(--MenuChef-scheme-bgcolor, #28292E) !important; /* try use CSS var with fallback */
333 | }
334 | 
335 | /* Menuchef links */
336 | .MenuChef .MenuChef-links-link {
337 |   color: #A0A1A5  !important; /* fallback */
338 |   color: var(--MenuChef-scheme-color, #A0A1A5)  !important; /* try use CSS var with fallback */
339 | }
340 | 
341 | /* Menuchef links hover */
342 | .MenuChef .MenuChef-links-link:hover {
343 |   color: #86878c  !important; /* fallback */
344 |   color: var(--MenuChef-scheme-color-hover, #86878c)  !important; /* try use CSS var with fallback */
345 | }

346 | 
347 |       
348 |         
349 |           
350 |             
351 |             
352 |             
353 |             
354 |           
355 |         
356 |         
357 |           
358 |             {{ helper.item('--MenuChef-scheme-bgcolor', 'Theming-Vars') }}
359 |             
360 |             
361 |           
362 | 
363 |           
364 |             {{ helper.item('--MenuChef-scheme-color', 'Theming-Vars') }}
365 |             
366 |             
367 |           
368 | 
369 |           
370 |             {{ helper.item('--MenuChef-scheme-color-hover', 'Theming-Vars') }}
371 |             
372 |             
373 |           
374 | 
375 |         
376 |       
VariableDefaultDescription
It depend's of schemeMenuChef kitchen's background color
It depend's of schemeLinks color
It depend's of schemeLinks hover color

377 | 
378 |       
Others Vars

379 |       
380 |         
381 |           
382 |             
383 |             
384 |             
385 |             
386 |           
387 |         
388 |         
389 |           
390 |             {{ helper.item('--MenuChef-font-family', 'Others-Vars') }}
391 |             
392 |             
393 |           
394 |           
395 |             {{ helper.item('--MenuChef-font-size', 'Others-Vars') }}
396 |             
397 |             
398 |           
399 |           
400 |             {{ helper.item('--MenuChef-margin-bottom', 'Others-Vars') }}
401 |             
402 |             
403 |           
404 |           
405 |             {{ helper.item('--MenuChef-text-transform', 'Others-Vars') }}
406 |             
407 |             
408 |           
409 |           
410 |             {{ helper.item('--MenuChef-transition', 'Others-Vars') }}
411 |             
412 |             
413 |           
414 |           
415 |             {{ helper.item('--MenuChef-font-weight', 'Others-Vars') }}
416 |             
417 |             
418 |           
419 |           
420 |             {{ helper.item('--MenuChef-theme_side-width', 'Others-Vars') }}
421 |             
422 |             
423 |           
424 |           
425 |             {{ helper.item('--MenuChef-theme_side-min-width', 'Others-Vars') }}
426 |             
427 |             
428 |           
429 | 
430 |         
431 |       
VariableDefaultDescription
'Helvetica', 'Arial', sans-serifFont family of links
16pxFont size of links
25pxMargin bottom between links
uppercaseText transform of links
color linear .15sTransition for links hover
boldLinks font weight
20%Default width of MenuChef's kitchen
240pxMinimum width of MenuChef's kitchen

432 | 
433 |       
Default Options

434 | 
435 |       

436 |         Example of all MenuChef default options
437 |       

438 | 
439 |       
new MenuChef('.old-menu a', {
440 |   theme: {
441 |     theme: 'full',
442 |     effectOnOpen: '',
443 |     direction: '',
444 |     pageEffect: ''
445 |   },
446 | 
447 |   scheme: 'black',
448 |   closeOnClick: true,
449 |   closeOnClickOutside: true,
450 | 
451 |   classes: {
452 |     exclude: [],
453 |     only: [],
454 |     include: []
455 |   },
456 | 
457 |   hamburger: 'boring',
458 |   bodyClassOpen: '',
459 |   kitchenClass: '',
460 |   kitchenOpenClass: '',
461 | 
462 |   onOpen: function () {},
463 |   onClose: function () {},
464 |   onClick: function () {},
465 |   onReady: function () {}
466 | });

467 | 
468 |     

469 | 
470 |   

471 | 

472 | 
473 | {% endblock content %}
474 | {% block scripts %}
475 | 
476 | 
477 | 
478 | 
479 | 
480 | 
481 | 
482 | 
637 | {% endblock scripts %}


--------------------------------------------------------------------------------
/assets/css/style.css:
--------------------------------------------------------------------------------
   1 | ::-moz-selection {
   2 |   color: #fff;
   3 |   background: #e2bf3b; }
   4 | 
   5 | ::selection {
   6 |   color: #fff;
   7 |   background: #e2bf3b; }
   8 | 
   9 | /* This stylesheet generated by Transfonter (https://transfonter.org) on April 5, 2017 11:55 PM */
  10 | @font-face {
  11 |   font-family: 'Aquino Demo';
  12 |   src: url("../fonts/Aquino-Demo.eot");
  13 |   src: url("../fonts/Aquino-Demo.eot?#iefix") format("embedded-opentype"), url("../fonts/Aquino-Demo.woff") format("woff"), url("../fonts/Aquino-Demo.ttf") format("truetype"), url("../fonts/Aquino-Demo.svg#Aquino-Demo") format("svg");
  14 |   font-weight: normal;
  15 |   font-style: normal; }
  16 | 
  17 | @font-face {
  18 |   font-family: 'Alex Brush';
  19 |   src: url("../fonts/AlexBrush-Regular.eot");
  20 |   src: url("../fonts/AlexBrush-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/AlexBrush-Regular.woff") format("woff"), url("../fonts/AlexBrush-Regular.ttf") format("truetype"), url("../fonts/AlexBrush-Regular.svg#AlexBrush-Regular") format("svg");
  21 |   font-weight: normal;
  22 |   font-style: normal; }
  23 | 
  24 | /* -- ESTILOS GERAIS -- */
  25 | .visivel {
  26 |   display: table-row !important; }
  27 | 
  28 | .tabelinha {
  29 |   border-spacing: 0; }
  30 | 
  31 | .tabelinha th {
  32 |   padding: 15px 8px;
  33 |   vertical-align: middle; }
  34 | 
  35 | .tabelinha td {
  36 |   padding: 10px 5px; }
  37 | 
  38 | .tabelinha th, .tabelinha td {
  39 |   border-bottom: 1px solid #cccccc; }
  40 | 
  41 | .tabelinha tbody tr {
  42 |   width: 100%;
  43 |   display: none; }
  44 | 
  45 | .tabelinha tfoot td > b {
  46 |   display: none !important; }
  47 | 
  48 | .tab-rodape {
  49 |   min-width: 275px;
  50 |   display: table;
  51 |   clear: both;
  52 |   padding-top: 15px;
  53 |   font-size: 12px;
  54 |   text-align: left; }
  55 | 
  56 | .tab-rodape a, .tab-rodape span {
  57 |   font-size: 12px; }
  58 | 
  59 | .tab-num-itens {
  60 |   float: left;
  61 |   margin: 15px 0 0 10px; }
  62 | 
  63 | .tab-paginacao {
  64 |   float: right;
  65 |   margin-right: 20px;
  66 |   margin-top: 13px; }
  67 | 
  68 | .tab-btn-anterior, .tab-btn-proximo {
  69 |   display: inline-block;
  70 |   width: 20px;
  71 |   height: 20px;
  72 |   margin: 0 5px;
  73 |   border-radius: 50%;
  74 |   background-color: #F2F2F2;
  75 |   -webkit-box-shadow: 0 1px 2px 1px #C4C4C4 !important;
  76 |   -moz-box-shadow: 0 1px 2px 1px #C4C4C4 !important;
  77 |   box-shadow: 0 1px 2px 1px #C4C4C4 !important;
  78 |   border: 1px solid #FFF;
  79 |   cursor: pointer;
  80 |   box-sizing: border-box; }
  81 | 
  82 | .tab-btn-anterior {
  83 |   padding: 3px 0 0 6px; }
  84 | 
  85 | .tab-btn-proximo {
  86 |   padding: 3px 0 0 7px; }
  87 | 
  88 | .tab-btn-anterior:after, .tab-btn-proximo:after {
  89 |   content: "";
  90 |   width: 0;
  91 |   height: 0;
  92 |   position: absolute;
  93 |   border-top: 6px solid transparent;
  94 |   border-bottom: 6px solid transparent; }
  95 | 
  96 | .tab-btn-anterior:after {
  97 |   border-right: 6px solid #e2bf3b; }
  98 | 
  99 | .tab-btn-proximo:after {
 100 |   border-left: 6px solid #e2bf3b; }
 101 | 
 102 | .tab-btn-anterior:hover, .tab-btn-proximo:hover {
 103 |   color: #FFFFFF;
 104 |   border: 1px solid #e2bf3b;
 105 |   background-color: #e2bf3b; }
 106 | 
 107 | .tab-btn-anterior:hover:after {
 108 |   border-right: 6px solid #FFFFFF; }
 109 | 
 110 | .tab-btn-anterior.btn-inativo:after {
 111 |   border-right: 6px solid #CCCCCC; }
 112 | 
 113 | .tab-btn-proximo:hover:after {
 114 |   border-left: 6px solid #FFFFFF; }
 115 | 
 116 | .tab-btn-proximo.btn-inativo:after {
 117 |   border-left: 6px solid #CCCCCC; }
 118 | 
 119 | .tab-btn-anterior.btn-inativo, .tab-btn-proximo.btn-inativo, .tab-btn-anterior.btn-inativo:hover, .tab-btn-proximo.btn-inativo:hover {
 120 |   color: #CCCCCC;
 121 |   border: 1px solid transparent;
 122 |   background-color: transparent;
 123 |   pointer-events: none;
 124 |   cursor: default; }
 125 | 
 126 | /* -- ESTILOS DESKTOP -- */
 127 | .tabelinha.estilo-dtp td > b {
 128 |   display: none; }
 129 | 
 130 | .tabelinha.estilo-dtp th, .tabelinha.estilo-dtp td {
 131 |   text-align: center; }
 132 | 
 133 | .tabelinha.estilo-dtp tbody tr:nth-child(even) {
 134 |   background: transparent; }
 135 | 
 136 | .tabelinha.estilo-dtp tbody tr:nth-child(odd) {
 137 |   background: #F9F9F9; }
 138 | 
 139 | /* -- ESTILOS MOBILE -- */
 140 | .tabelinha.estilo-mob th {
 141 |   display: none; }
 142 | 
 143 | .tabelinha.estilo-mob td {
 144 |   width: 100%;
 145 |   clear: left;
 146 |   float: left;
 147 |   text-align: left;
 148 |   display: block; }
 149 | 
 150 | .tabelinha.estilo-mob td > b {
 151 |   width: 35%;
 152 |   display: inline-block; }
 153 | 
 154 | .tabelinha.estilo-mob td > span {
 155 |   vertical-align: top;
 156 |   max-width: 62%;
 157 |   display: inline-block; }
 158 | 
 159 | .tabelinha.estilo-mob td:nth-child(even) {
 160 |   background: transparent; }
 161 | 
 162 | .tabelinha.estilo-mob td:nth-child(odd) {
 163 |   background: #F9F9F9; }
 164 | 
 165 | .uk-radio,
 166 | .uk-checkbox {
 167 |   /* 1 */
 168 |   display: inline-block;
 169 |   height: 16px;
 170 |   width: 16px;
 171 |   /* 2 */
 172 |   overflow: hidden;
 173 |   outline: none !important;
 174 |   /* 3 */
 175 |   margin-top: -4px;
 176 |   vertical-align: middle;
 177 |   /* 4 */
 178 |   -webkit-appearance: none;
 179 |   /* 5 */
 180 |   background-color: transparent;
 181 |   /* 6 */
 182 |   background-repeat: no-repeat;
 183 |   background-position: 50% 50%;
 184 |   border: 1px solid #cccccc;
 185 |   -webkit-transition: 0.2s ease-in-out;
 186 |   transition: 0.2s ease-in-out;
 187 |   -webkit-transition-property: background-color, border;
 188 |   transition-property: background-color, border; }
 189 | 
 190 | .uk-radio {
 191 |   border-radius: 50%; }
 192 | 
 193 | /* Focus */
 194 | .uk-radio:focus,
 195 | .uk-checkbox:focus {
 196 |   outline: none;
 197 |   border-color: #bcb2a2; }
 198 | 
 199 | /*
 200 |  * Checked
 201 |  */
 202 | .uk-radio:checked,
 203 | .uk-checkbox:checked,
 204 | .uk-checkbox:indeterminate {
 205 |   background-color: #f4df90;
 206 |   border-color: transparent; }
 207 | 
 208 | /* Focus */
 209 | .uk-radio:checked:focus,
 210 | .uk-checkbox:checked:focus,
 211 | .uk-checkbox:indeterminate:focus {
 212 |   background-color: #f4df90; }
 213 | 
 214 | /*
 215 |  * Icons
 216 |  */
 217 | .uk-radio:checked {
 218 |   background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22%23fff%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%222%22%3E%3C%2Fcircle%3E%0A%3C%2Fsvg%3E"); }
 219 | 
 220 | .uk-checkbox:checked {
 221 |   background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23fff%22%20points%3D%2212%201%205%207.5%202%205%201%205.5%205%2010%2013%201.5%22%2F%3E%0A%3C%2Fsvg%3E"); }
 222 | 
 223 | .uk-checkbox:indeterminate {
 224 |   background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23fff%22%20x%3D%223%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%221%22%3E%3C%2Frect%3E%0A%3C%2Fsvg%3E"); }
 225 | 
 226 | /*
 227 |  * Disabled
 228 |  */
 229 | .uk-radio:disabled,
 230 | .uk-checkbox:disabled {
 231 |   background-color: #f4df90;
 232 |   border-color: #bcb2a2; }
 233 | 
 234 | .uk-radio:disabled:checked {
 235 |   background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22%23999%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%222%22%3E%3C%2Fcircle%3E%0A%3C%2Fsvg%3E"); }
 236 | 
 237 | .uk-checkbox:disabled:checked {
 238 |   background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23999%22%20points%3D%2212%201%205%207.5%202%205%201%205.5%205%2010%2013%201.5%22%2F%3E%0A%3C%2Fsvg%3E"); }
 239 | 
 240 | .uk-checkbox:disabled:indeterminate {
 241 |   background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23999%22%20x%3D%223%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%221%22%3E%3C%2Frect%3E%0A%3C%2Fsvg%3E"); }
 242 | 
 243 | .ribbonFit {
 244 |   position: absolute;
 245 |   right: 10%; }
 246 | 
 247 | a {
 248 |   color: #e2bf3b;
 249 |   transition: color linear .15s;
 250 |   text-decoration: underline; }
 251 |   a:hover {
 252 |     color: #cca71e; }
 253 | 
 254 | body {
 255 |   font-size: 10px;
 256 |   font-family: "Open Sans", sans-serif;
 257 |   background-color: #fffffe; }
 258 | 
 259 | .button {
 260 |   display: inline-block;
 261 |   background-color: #787167;
 262 |   font-size: 16px;
 263 |   font-family: "Open Sans", sans-serif;
 264 |   color: white;
 265 |   font-weight: bold;
 266 |   padding: 1.5rem 2.7rem;
 267 |   border: 0;
 268 |   border-radius: 3rem;
 269 |   transition: background-color linear .15s;
 270 |   outline: none; }
 271 |   .button i {
 272 |     color: #c0b5a5;
 273 |     margin-right: 5px;
 274 |     font-size: 1.2em;
 275 |     vertical-align: middle; }
 276 |   .button:hover {
 277 |     background-color: #5d574f; }
 278 | 
 279 | .titleAccent {
 280 |   font-size: 5.2em;
 281 |   font-family: "Alex Brush", "Open Sans", sans-serif;
 282 |   color: #e2bf3b;
 283 |   line-height: 1.2;
 284 |   margin: 0;
 285 |   margin-bottom: -.4em; }
 286 | 
 287 | .title {
 288 |   font-size: 3.2em;
 289 |   font-family: "Aquino Demo", "Open Sans", sans-serif;
 290 |   color: #787167;
 291 |   text-transform: uppercase;
 292 |   line-height: 1.2;
 293 |   letter-spacing: -2px;
 294 |   margin: 0; }
 295 | 
 296 | .titleContainer {
 297 |   text-align: center; }
 298 | 
 299 | .icon {
 300 |   display: inline-block;
 301 |   fill: #f0f0e6; }
 302 | 
 303 | .icon--title {
 304 |   margin-bottom: -6.2em;
 305 |   position: relative;
 306 |   z-index: -1;
 307 |   width: 16em;
 308 |   height: 9em;
 309 |   transform: scale(0.9); }
 310 | 
 311 | .icon--table,
 312 | .icon--oven {
 313 |   margin-left: 3em; }
 314 | 
 315 | .i-browser-center,
 316 | .i-browser-side {
 317 |   transform: translate(0.65em, 2.6em); }
 318 | 
 319 | .Header {
 320 |   background-image: url("../img/header-bg.jpg");
 321 |   overflow: hidden; }
 322 |   .Header::after {
 323 |     content: '';
 324 |     display: block;
 325 |     width: 100%;
 326 |     height: 36px;
 327 |     background-image: url("../img/header-append.png");
 328 |     background-size: cover;
 329 |     background-position: center center; }
 330 |   .Header > .container {
 331 |     height: 580px;
 332 |     padding-top: 80px;
 333 |     display: flex;
 334 |     align-items: center;
 335 |     justify-content: center; }
 336 | 
 337 | .Header-logo {
 338 |   background-repeat: no-repeat;
 339 |   width: 879px;
 340 |   height: 510px;
 341 |   text-align: center;
 342 |   padding-top: 75px; }
 343 | 
 344 | .Header-logo-slogan {
 345 |   font-size: 2rem;
 346 |   margin-top: 1.5em;
 347 |   color: #787167;
 348 |   font-family: "Open Sans", sans-serif;
 349 |   font-style: italic; }
 350 |   .Header-logo-slogan span {
 351 |     font-size: .75em; }
 352 | 
 353 | .Header-logo-btns {
 354 |   margin-top: 1em;
 355 |   position: relative;
 356 |   z-index: 25; }
 357 |   .Header-logo-btns iframe + iframe {
 358 |     margin-left: 1em; }
 359 | 
 360 | .Header-icon {
 361 |   background-size: contain;
 362 |   background-repeat: no-repeat; }
 363 | 
 364 | .Header-icon--1 {
 365 |   background-image: url("../img/i-header-1.png");
 366 |   width: 222px;
 367 |   height: 247px;
 368 |   position: absolute;
 369 |   transform: translate(-90px); }
 370 | 
 371 | .Header-icon--2 {
 372 |   background-image: url("../img/i-header-2.png");
 373 |   width: 145px;
 374 |   height: 80px;
 375 |   position: absolute;
 376 |   transform: translate(-10px, 290px); }
 377 | 
 378 | .Header-icon--3 {
 379 |   background-image: url("../img/i-header-3.png");
 380 |   width: 85px;
 381 |   height: 46px;
 382 |   position: absolute;
 383 |   transform: translate(230px, 40px); }
 384 | 
 385 | .Header-icon--4 {
 386 |   background-image: url("../img/i-header-4.png");
 387 |   width: 113px;
 388 |   height: 83px;
 389 |   display: inline-block;
 390 |   transform: translate(-300px, 160px); }
 391 | 
 392 | .Header-icon--5 {
 393 |   background-image: url("../img/i-header-5.png");
 394 |   width: 163px;
 395 |   height: 101px;
 396 |   display: inline-block;
 397 |   transform: translate(0px, -50px); }
 398 | 
 399 | .Header-icon--6 {
 400 |   background-image: url("../img/i-header-6.png");
 401 |   width: 225px;
 402 |   height: 146px;
 403 |   display: inline-block;
 404 |   transform: translate(70px, -20px); }
 405 | 
 406 | .Header-bottom {
 407 |   text-align: right;
 408 |   margin-top: -220px; }
 409 | 
 410 | .Flavors {
 411 |   padding-top: 7em; }
 412 | 
 413 | .Flavors-items {
 414 |   display: flex;
 415 |   justify-content: space-between;
 416 |   margin-top: 7em;
 417 |   width: 98%; }
 418 |   @media (min-with: 992px) {
 419 |     .Flavors-items.is-hover .Flavors-item:not(.is-active) {
 420 |       opacity: .6; } }
 421 | 
 422 | .Flavors-item {
 423 |   width: 31%;
 424 |   border: 2px solid transparent;
 425 |   border-radius: 10px;
 426 |   -webkit-border-image: url("../img/flavors-border.png") 3 round;
 427 |   /* Safari 3.1-5 */
 428 |   -o-border-image: url("../img/flavors-border.png") 3 round;
 429 |   /* Opera 11-12.1 */
 430 |   border-image: url("../img/flavors-border.png") 3 round;
 431 |   padding: 4em 6em;
 432 |   transition: border linear .15s, box-shadow linear .15s, background-color linear .15s, transform linear .15s, opacity linear .2s; }
 433 |   @media (min-width: 992px) {
 434 |     .Flavors-item {
 435 |       position: relative;
 436 |       padding: 4em 6em 10em 6em; } }
 437 |   @media (min-width: 992px) {
 438 |     .Flavors-item .buttonContainer {
 439 |       margin: 0 0 0 -2em;
 440 |       position: absolute;
 441 |       bottom: 1.5em; } }
 442 |   @media (max-width: 992px) {
 443 |     .Flavors-item .buttonContainer {
 444 |       margin-top: 20px;
 445 |       text-align: center; } }
 446 |   .Flavors-item .button + .button {
 447 |     margin-left: 20px; }
 448 |   .Flavors-item .button {
 449 |     transition: opacity linear .15s; }
 450 |     @media (min-width: 992px) {
 451 |       .Flavors-item .button {
 452 |         opacity: 0; } }
 453 |   .Flavors-item:hover {
 454 |     border: 2px solid #ffefb4;
 455 |     box-shadow: 0px 0px 57px 0px rgba(242, 221, 141, 0.74);
 456 |     background-color: #fff; }
 457 |     .Flavors-item:hover .button {
 458 |       opacity: 1; }
 459 |     .Flavors-item:hover .Flavors-item-menu--center {
 460 |       animation: menuchef-center ease-in-out .5s;
 461 |       animation-iteration-count: 1;
 462 |       transform-origin: 35% 48%;
 463 |       -webkit-animation: menuchef-center ease-in-out .5s;
 464 |       -webkit-animation-iteration-count: 1;
 465 |       -webkit-transform-origin: 35% 48%;
 466 |       -moz-animation: menuchef-center ease-in-out .5s;
 467 |       -moz-animation-iteration-count: 1;
 468 |       -moz-transform-origin: 35% 48%;
 469 |       -o-animation: menuchef-center ease-in-out .5s;
 470 |       -o-animation-iteration-count: 1;
 471 |       -o-transform-origin: 35% 48%;
 472 |       -ms-animation: menuchef-center ease-in-out .5s;
 473 |       -ms-animation-iteration-count: 1;
 474 |       -ms-transform-origin: 35% 48%; }
 475 |     .Flavors-item:hover .Flavors-item-menu--left {
 476 |       animation: menuchef-side-left ease-in-out .6s;
 477 |       animation-iteration-count: 1;
 478 |       transform-origin: 0% 50%;
 479 |       -webkit-animation: menuchef-side-left cubic-bezier(0.18, 0.93, 0.57, 1.03) 0.6s;
 480 |       -webkit-animation-iteration-count: 1;
 481 |       -webkit-transform-origin: 0% 50%;
 482 |       -moz-animation: menuchef-side-left cubic-bezier(0.18, 0.93, 0.57, 1.03) 0.6s;
 483 |       -moz-animation-iteration-count: 1;
 484 |       -moz-transform-origin: 0% 50%;
 485 |       -o-animation: menuchef-side-left cubic-bezier(0.18, 0.93, 0.57, 1.03) 0.6s;
 486 |       -o-animation-iteration-count: 1;
 487 |       -o-transform-origin: 0% 50%;
 488 |       -ms-animation: menuchef-side-left cubic-bezier(0.18, 0.93, 0.57, 1.03) 0.6s;
 489 |       -ms-animation-iteration-count: 1;
 490 |       -ms-transform-origin: 0% 50%; }
 491 |     .Flavors-item:hover .Flavors-item-menu--right {
 492 |       animation: menuchef-side-right cubic-bezier(0.18, 0.93, 0.57, 1.03) 0.6s;
 493 |       animation-iteration-count: 1;
 494 |       transform-origin: 100% 50%;
 495 |       -webkit-animation: menuchef-side-right cubic-bezier(0.18, 0.93, 0.57, 1.03) 0.6s;
 496 |       -webkit-animation-iteration-count: 1;
 497 |       -webkit-transform-origin: 100% 50%;
 498 |       -moz-animation: menuchef-side-right cubic-bezier(0.18, 0.93, 0.57, 1.03) 0.6s;
 499 |       -moz-animation-iteration-count: 1;
 500 |       -moz-transform-origin: 100% 50%;
 501 |       -o-animation: menuchef-side-right cubic-bezier(0.18, 0.93, 0.57, 1.03) 0.6s;
 502 |       -o-animation-iteration-count: 1;
 503 |       -o-transform-origin: 100% 50%;
 504 |       -ms-animation: menuchef-side-right cubic-bezier(0.18, 0.93, 0.57, 1.03) 0.6s;
 505 |       -ms-animation-iteration-count: 1;
 506 |       -ms-transform-origin: 100% 50%; }
 507 | 
 508 | .Flavors-item-type {
 509 |   font-size: 2.1em;
 510 |   font-family: "Aquino Demo", "Open Sans", sans-serif;
 511 |   color: #787167;
 512 |   text-transform: uppercase;
 513 |   text-align: center; }
 514 | 
 515 | .Flavors-item-browser {
 516 |   display: block;
 517 |   margin: 0 auto;
 518 |   width: 18.5em;
 519 |   height: 14.4em;
 520 |   fill: #787167; }
 521 | 
 522 | .Flavors-item-menu {
 523 |   margin-top: -14.4em;
 524 |   transform: translate(2.4em, 2.2em); }
 525 |   @media (max-width: 1200px) {
 526 |     .Flavors-item-menu {
 527 |       transform: translate(0.6em, 2.2em); } }
 528 |   @media (max-width: 992px) {
 529 |     .Flavors-item-menu {
 530 |       transform: translate(6.4em, 2.1em); } }
 531 |   .Flavors-item-menu--left {
 532 |     transform: translate(2.4em, 2.1em); }
 533 |     @media (max-width: 1200px) {
 534 |       .Flavors-item-menu--left {
 535 |         transform: translate(0.6em, 2.1em); } }
 536 |     @media (max-width: 992px) {
 537 |       .Flavors-item-menu--left {
 538 |         transform: translate(6.4em, 2.1em); } }
 539 |   .Flavors-item-menu--right {
 540 |     transform: translate(11.2em, 2.1em); }
 541 |     @media (max-width: 1200px) {
 542 |       .Flavors-item-menu--right {
 543 |         transform: translate(9.4em, 2.1em); } }
 544 |     @media (max-width: 992px) {
 545 |       .Flavors-item-menu--right {
 546 |         transform: translate(15.2em, 2.1em); } }
 547 | 
 548 | .Flavors-item-recipe, .Flavors-item-colors-title {
 549 |   font-size: 20px;
 550 |   color: #787167;
 551 |   font-style: italic;
 552 |   text-align: center;
 553 |   margin: 1.5em 0; }
 554 | 
 555 | .Flavors-item-code {
 556 |   text-align: left;
 557 |   background: transparent;
 558 |   border-color: transparent; }
 559 |   @media (min-width: 1200px) {
 560 |     .Flavors-item-code {
 561 |       height: 170px; } }
 562 |   @media (min-width: 992px) {
 563 |     .Flavors-item-code {
 564 |       height: 190px; } }
 565 |   @media (max-width: 992px) {
 566 |     .Flavors-item-code {
 567 |       height: 150px;
 568 |       margin-bottom: 30px; } }
 569 | 
 570 | .Flavors-item-code {
 571 |   position: relative; }
 572 | 
 573 | .Flavors-item-code > pre {
 574 |   white-space: pre-wrap;
 575 |   word-break: normal;
 576 |   background: transparent;
 577 |   border-color: transparent; }
 578 | 
 579 | .Flavors-item-checkboxes {
 580 |   text-align: center; }
 581 | 
 582 | .Flavors-item-checkbox + .Flavors-item-checkbox {
 583 |   margin-left: 25px; }
 584 | 
 585 | .Flavors-item-checkbox {
 586 |   font-size: 13px;
 587 |   font-family: "Open Sans", sans-serif;
 588 |   color: #bcb2a2;
 589 |   font-weight: 400; }
 590 |   .Flavors-item-checkbox span {
 591 |     vertical-align: middle;
 592 |     margin-left: 3px;
 593 |     position: relative;
 594 |     top: 2px; }
 595 |   .Flavors-item-checkbox input:checked + span {
 596 |     color: #787167; }
 597 | 
 598 | @-webkit-keyframes menuchef-center {
 599 |   0% {
 600 |     opacity: 0; }
 601 |   100% {
 602 |     opacity: 1; } }
 603 | 
 604 | @-moz-keyframes menuchef-center {
 605 |   0% {
 606 |     opacity: 0; }
 607 |   100% {
 608 |     opacity: 1; } }
 609 | 
 610 | @-o-keyframes menuchef-center {
 611 |   0% {
 612 |     opacity: 0; }
 613 |   100% {
 614 |     opacity: 1; } }
 615 | 
 616 | @keyframes menuchef-center {
 617 |   0% {
 618 |     opacity: 0; }
 619 |   100% {
 620 |     opacity: 1; } }
 621 | 
 622 | @-webkit-keyframes menuchef-side-left {
 623 |   0% {
 624 |     transform: translate(2.4em, 2em) scaleX(0); }
 625 |   
 626 |   100% {
 627 |     transform: translate(2.4em, 2em) scaleX(1); } }
 628 | 
 629 | @-moz-keyframes menuchef-side-left {
 630 |   0% {
 631 |     transform: translate(2.4em, 2em) scaleX(0); }
 632 |   
 633 |   100% {
 634 |     transform: translate(2.4em, 2em) scaleX(1); } }
 635 | 
 636 | @-o-keyframes menuchef-side-left {
 637 |   0% {
 638 |     transform: translate(2.4em, 2em) scaleX(0); }
 639 |   
 640 |   100% {
 641 |     transform: translate(2.4em, 2em) scaleX(1); } }
 642 | 
 643 | @keyframes menuchef-side-left {
 644 |   0% {
 645 |     transform: translate(2.4em, 2em) scaleX(0); }
 646 |   
 647 |   100% {
 648 |     transform: translate(2.4em, 2em) scaleX(1); } }
 649 | 
 650 | @-webkit-keyframes menuchef-side-right {
 651 |   0% {
 652 |     -webkit-transform: translate(-11.2em, 2.1em) scaleX(0);
 653 |     transform: translate(-11.2em, 2.1em) scaleX(0); }
 654 |   
 655 |   100% {
 656 |     -webkit-transform: translate(11.2em, 2.1em) scaleX(1);
 657 |     transform: translate(11.2em, 2.1em) scaleX(1); } }
 658 | 
 659 | @-moz-keyframes menuchef-side-right {
 660 |   0% {
 661 |     -webkit-transform: translate(-11.2em, 2.1em) scaleX(0);
 662 |     transform: translate(-11.2em, 2.1em) scaleX(0); }
 663 |   
 664 |   100% {
 665 |     -webkit-transform: translate(11.2em, 2.1em) scaleX(1);
 666 |     transform: translate(11.2em, 2.1em) scaleX(1); } }
 667 | 
 668 | @-o-keyframes menuchef-side-right {
 669 |   0% {
 670 |     -webkit-transform: translate(-11.2em, 2.1em) scaleX(0);
 671 |     transform: translate(-11.2em, 2.1em) scaleX(0); }
 672 |   
 673 |   100% {
 674 |     -webkit-transform: translate(11.2em, 2.1em) scaleX(1);
 675 |     transform: translate(11.2em, 2.1em) scaleX(1); } }
 676 | 
 677 | @keyframes menuchef-side-right {
 678 |   0% {
 679 |     -webkit-transform: translate(-11.2em, 2.1em) scaleX(0);
 680 |     transform: translate(-11.2em, 2.1em) scaleX(0); }
 681 |   
 682 |   100% {
 683 |     -webkit-transform: translate(11.2em, 2.1em) scaleX(1);
 684 |     transform: translate(11.2em, 2.1em) scaleX(1); } }
 685 | 
 686 | @media (max-width: 1200px) {
 687 |   @-webkit-keyframes menuchef-side-left {
 688 |     0% {
 689 |       transform: translate(0.6em, 2.1em) scaleX(0); }
 690 |     
 691 |     100% {
 692 |       transform: translate(0.6em, 2.1em) scaleX(1); } }
 693 |   @-moz-keyframes menuchef-side-left {
 694 |     0% {
 695 |       transform: translate(0.6em, 2.1em) scaleX(0); }
 696 |     
 697 |     100% {
 698 |       transform: translate(0.6em, 2.1em) scaleX(1); } }
 699 |   @-o-keyframes menuchef-side-left {
 700 |     0% {
 701 |       transform: translate(0.6em, 2.1em) scaleX(0); }
 702 |     
 703 |     100% {
 704 |       transform: translate(0.6em, 2.1em) scaleX(1); } }
 705 |   @keyframes menuchef-side-left {
 706 |     0% {
 707 |       transform: translate(0.6em, 2.1em) scaleX(0); }
 708 |     
 709 |     100% {
 710 |       transform: translate(0.6em, 2.1em) scaleX(1); } }
 711 |   @-webkit-keyframes menuchef-side-right {
 712 |     0% {
 713 |       transform: translate(-13em, 2.1em) scaleX(0); }
 714 |     
 715 |     100% {
 716 |       transform: translate(9.4em, 2.1em) scaleX(1); } }
 717 |   @-moz-keyframes menuchef-side-right {
 718 |     0% {
 719 |       transform: translate(-13em, 2.1em) scaleX(0); }
 720 |     
 721 |     100% {
 722 |       transform: translate(9.4em, 2.1em) scaleX(1); } }
 723 |   @-o-keyframes menuchef-side-right {
 724 |     0% {
 725 |       transform: translate(-13em, 2.1em) scaleX(0); }
 726 |     
 727 |     100% {
 728 |       transform: translate(9.4em, 2.1em) scaleX(1); } }
 729 |   @keyframes menuchef-side-right {
 730 |     0% {
 731 |       transform: translate(-13em, 2.1em) scaleX(0); }
 732 |     
 733 |     100% {
 734 |       transform: translate(9.4em, 2.1em) scaleX(1); } } }
 735 | 
 736 | @media (max-width: 992px) {
 737 |   @-webkit-keyframes menuchef-side-left {
 738 |     0% {
 739 |       transform: translate(6.4em, 2.1em); }
 740 |     
 741 |     100% {
 742 |       transform: translate(6.4em, 2.1em); } }
 743 |   @-moz-keyframes menuchef-side-left {
 744 |     0% {
 745 |       transform: translate(6.4em, 2.1em); }
 746 |     
 747 |     100% {
 748 |       transform: translate(6.4em, 2.1em); } }
 749 |   @-o-keyframes menuchef-side-left {
 750 |     0% {
 751 |       transform: translate(6.4em, 2.1em); }
 752 |     
 753 |     100% {
 754 |       transform: translate(6.4em, 2.1em); } }
 755 |   @keyframes menuchef-side-left {
 756 |     0% {
 757 |       transform: translate(6.4em, 2.1em); }
 758 |     
 759 |     100% {
 760 |       transform: translate(6.4em, 2.1em); } }
 761 |   @-webkit-keyframes menuchef-center {
 762 |     0% {
 763 |       opacity: 1; }
 764 |     100% {
 765 |       opacity: 1; } }
 766 |   @-moz-keyframes menuchef-center {
 767 |     0% {
 768 |       opacity: 1; }
 769 |     100% {
 770 |       opacity: 1; } }
 771 |   @-o-keyframes menuchef-center {
 772 |     0% {
 773 |       opacity: 1; }
 774 |     100% {
 775 |       opacity: 1; } }
 776 |   @keyframes menuchef-center {
 777 |     0% {
 778 |       opacity: 1; }
 779 |     100% {
 780 |       opacity: 1; } }
 781 |   @-webkit-keyframes menuchef-side-right {
 782 |     0% {
 783 |       transform: translate(15.1em, 2.1em); }
 784 |     
 785 |     100% {
 786 |       transform: translate(15.1em, 2.1em); } }
 787 |   @-moz-keyframes menuchef-side-right {
 788 |     0% {
 789 |       transform: translate(15.1em, 2.1em); }
 790 |     
 791 |     100% {
 792 |       transform: translate(15.1em, 2.1em); } }
 793 |   @-o-keyframes menuchef-side-right {
 794 |     0% {
 795 |       transform: translate(15.1em, 2.1em); }
 796 |     
 797 |     100% {
 798 |       transform: translate(15.1em, 2.1em); } }
 799 |   @keyframes menuchef-side-right {
 800 |     0% {
 801 |       transform: translate(15.1em, 2.1em); }
 802 |     
 803 |     100% {
 804 |       transform: translate(15.1em, 2.1em); } } }
 805 | 
 806 | .NutricionalTable {
 807 |   padding-top: 8em; }
 808 | 
 809 | .NutricionalTable-table {
 810 |   margin-top: 3em;
 811 |   font-size: 1.4em;
 812 |   border: 1px solid #d3cec6;
 813 |   border-radius: 2px;
 814 |   padding: 3em 2em;
 815 |   color: #787167; }
 816 |   .NutricionalTable-table th {
 817 |     font-size: 1.1em;
 818 |     padding-bottom: 1em !important;
 819 |     border-bottom: 1px solid #f3efeb !important; }
 820 |   .NutricionalTable-table td {
 821 |     font-style: italic;
 822 |     padding: 1em 0 !important;
 823 |     border-bottom: 1px solid #f3efeb !important; }
 824 |   .NutricionalTable-table tr:hover .NutricionalTable-table-link {
 825 |     opacity: 1; }
 826 | 
 827 | .NutricionalTable-table-link {
 828 |   margin-right: .5em;
 829 |   opacity: 0; }
 830 | 
 831 | .NutricionalTable-table-title {
 832 |   font-size: 20px;
 833 |   color: #e2bf3b;
 834 |   font-weight: bold;
 835 |   text-transform: uppercase;
 836 |   border-left: 0.4em solid #e2bf3b;
 837 |   padding-left: 1.2em;
 838 |   margin-left: -1.4em; }
 839 | 
 840 | .NutricionalTable-table-var {
 841 |   width: 15%; }
 842 | 
 843 | .NutricionalTable-table-type {
 844 |   width: 12%; }
 845 | 
 846 | .NutricionalTable-table-default {
 847 |   width: 12%; }
 848 | 
 849 | .NutricionalTable-table-desc {
 850 |   width: 61%; }
 851 | 
 852 | .label--string {
 853 |   background-color: #d9b220; }
 854 | 
 855 | .label--object {
 856 |   background-color: #ba991c; }
 857 | 
 858 | .label--boolean {
 859 |   background-color: #9b7f17; }
 860 | 
 861 | .label--function {
 862 |   background-color: #7c6612; }
 863 | 
 864 | .Flavors-item-colors-title {
 865 |   font-size: 14px; }
 866 |   @media (max-width: 992px) {
 867 |     .Flavors-item-colors-title {
 868 |       margin-top: 0 !important; } }
 869 | 
 870 | .Flavors-item-colors {
 871 |   padding: 0;
 872 |   text-align: center; }
 873 |   @media (max-width: 992px) {
 874 |     .Flavors-item-colors {
 875 |       margin-bottom: 20px; } }
 876 | 
 877 | .Flavors-item-colors-color + .Flavors-item-colors-color {
 878 |   margin-left: 20px; }
 879 |   @media (max-width: 1200px) {
 880 |     .Flavors-item-colors-color + .Flavors-item-colors-color {
 881 |       margin-left: 10px; } }
 882 | 
 883 | .Flavors-item-colors-color {
 884 |   list-style-type: none;
 885 |   display: inline-block; }
 886 |   .Flavors-item-colors-color button {
 887 |     width: 18px;
 888 |     height: 18px;
 889 |     border-radius: 3px;
 890 |     border: 0;
 891 |     outline: none; }
 892 |   .Flavors-item-colors-color.is-active button {
 893 |     box-shadow: 0 0 10px #e2bf3b; }
 894 | 
 895 | .Flavors-item-colors-color--black button {
 896 |   background-color: #323232; }
 897 | 
 898 | .Flavors-item-colors-color--yellow button {
 899 |   background-color: #f9e8c0; }
 900 | 
 901 | .Flavors-item-colors-color--red button {
 902 |   background-color: #f1b7b0; }
 903 | 
 904 | .Flavors-item-colors-color--green button {
 905 |   background-color: #bfe8d7; }
 906 | 
 907 | .Flavors-item-colors-color--blue button {
 908 |   background-color: #bcc8ea; }
 909 | 
 910 | @media (max-width: 1200px) {
 911 |   .Flavors-item-icon {
 912 |     transform: scale(0.8); } }
 913 | 
 914 | @media (max-width: 1200px) and (min-width: 992px) {
 915 |   .Flavors-item .buttonContainer {
 916 |     text-align: center;
 917 |     margin: 0 0 0 -4.5em; }
 918 |   .Flavors-item .button + .button {
 919 |     margin-left: 10px; } }
 920 | 
 921 | @media (max-width: 992px) {
 922 |   .Flavors-items {
 923 |     flex-direction: column; }
 924 |   .Flavors-item {
 925 |     width: 100%;
 926 |     margin-bottom: 4rem; }
 927 |   .Flavors-item-recipe, .Flavors-item-colors-title {
 928 |     margin-top: -1.6em; }
 929 |   .Flavors-item-icon {
 930 |     float: left;
 931 |     margin-left: -5rem;
 932 |     margin-top: 0.4rem; }
 933 |   .Flavors-item-type {
 934 |     text-align: left; } }
 935 | 
 936 | @media (max-width: 768px) {
 937 |   .ribbonFit {
 938 |     right: 3%;
 939 |     zoom: .7; }
 940 |   .Header-logo {
 941 |     width: 100%;
 942 |     height: auto; }
 943 |     .Header-logo img {
 944 |       max-width: 200px;
 945 |       position: relative;
 946 |       z-index: 300; }
 947 |   .Header > .container {
 948 |     height: 290px;
 949 |     padding-top: 0;
 950 |     display: flex;
 951 |     align-items: initial;
 952 |     justify-content: center; }
 953 |   .Header-logo-slogan {
 954 |     font-size: 1.75rem; }
 955 |   .Flavors-item {
 956 |     padding: 4em 0em; }
 957 |   .Flavors-item-icon {
 958 |     float: none;
 959 |     margin-top: 3rem;
 960 |     width: 30em;
 961 |     display: block;
 962 |     margin: 0 auto;
 963 |     margin-bottom: 20px; }
 964 |   .Flavors-item-type {
 965 |     text-align: center; }
 966 |   .Flavors-item-code {
 967 |     text-align: center;
 968 |     height: auto; }
 969 |   .Flavors-item-code pre {
 970 |     display: inline-block;
 971 |     text-align: left; }
 972 |   main {
 973 |     overflow: hidden; }
 974 |   .Header-icon {
 975 |     zoom: 0.3;
 976 |     margin-top: 200px;
 977 |     opacity: .4; } }
 978 | 
 979 | .Preheating {
 980 |   margin-top: 7em; }
 981 |   .Preheating pre {
 982 |     background: transparent !important; }
 983 | 
 984 | .Preheating-text {
 985 |   font-size: 1.4em;
 986 |   color: #787167;
 987 |   margin-top: 2em; }
 988 | 
 989 | .Footer {
 990 |   margin-top: 2.5em;
 991 |   padding: 1.2em 0;
 992 |   background-color: #887753;
 993 |   text-align: center;
 994 |   color: #fff;
 995 |   font-size: 1.2em; }
 996 |   .Footer a {
 997 |     color: #d4ccb9;
 998 |     text-decoration: none; }
 999 | 
1000 | .Footer-salt {
1001 |   vertical-align: middle;
1002 |   margin: 0 .25em; }
1003 | 
1004 | .Code {
1005 |   margin: 2em 0 !important;
1006 |   background: transparent !important; }
1007 | 
1008 | /*# sourceMappingURL=style.css.map */


--------------------------------------------------------------------------------