Import the pebble dev site into devsite/

This commit is contained in:
Katharine Berry 2025-02-17 17:02:33 -08:00
parent 3b92768480
commit 527858cf4c
1359 changed files with 265431 additions and 0 deletions

View file

@ -0,0 +1,99 @@
/*
jQuery.mmenu buttonbars addon CSS
*/
@import "../inc/variables";
.mm-buttonbar
{
border: 1px solid transparent;
border-radius: $mm_padding / 2;
text-align: center;
line-height: $mm_buttonbarHeight;
overflow: hidden;
display: block;
padding: 0;
margin: 0;
position: relative;
@include mm_clearfix;
> *
{
border-left: 1px solid transparent;
box-sizing: border-box;
display: block;
width: 100%;
height: 100%;
float: left;
@include mm_ellipsis;
}
> a
{
text-decoration: none;
}
> input
{
position: absolute;
left: -1000px;
top: -1000px;
}
> input:checked + label
{
border-color: transparent !important;
}
> *:first-child,
> input:first-child + *
{
border-left: none;
}
&.mm-buttonbar-2 > *
{
width: 50%;
}
&.mm-buttonbar-3 > *
{
width: 33.33%;
}
&.mm-buttonbar-4 > *
{
width: 25%;
}
&.mm-buttonbar-5 > *
{
width: 20%;
}
}
.mm-header .mm-buttonbar
{
margin-top: $mm_headerHeight - ( $mm_buttonbarHeight * 2 );
margin-left: -( $mm_btnSize - $mm_padding );
margin-right: -( $mm_btnSize - $mm_padding );
}
.mm-footer .mm-buttonbar
{
border: none;
border-radius: none;
line-height: $mm_footerHeight;
margin: ( -$mm_padding ) ( -$mm_padding ) 0 ( -( $mm_padding * 2 ) );
> *
{
border-left: none;
}
}
.mm-list > li > .mm-buttonbar
{
margin: $mm_padding ( $mm_padding * 2 );
}
@include mm_colors_buttonbars;

View file

@ -0,0 +1,53 @@
/*
jQuery.mmenu counters addon CSS
*/
@import "../inc/variables";
em.mm-counter
{
font: inherit;
font-size: $mm_fontSize;
font-style: normal;
text-indent: 0;
line-height: $mm_btnSize / 2;
display: block;
margin-top: -( $mm_btnSize / 4 );
position: absolute;
right: $mm_subopenWidth;
top: 50%;
+ a.mm-subopen
{
padding-left: $mm_counterWidth;
+ a,
+ span
{
margin-right: $mm_counterWidth + $mm_subopenWidth;
}
}
+ a.mm-fullsubopen
{
padding-left: 0;
}
}
// vertical submenu
.mm-vertical
{
em.mm-counter
{
top: ( $mm_btnSize / 4 ) + 2;
margin-top: 0;
}
}
// Search
.mm-nosubresults > em.mm-counter
{
display: none;
}
@include mm_colors_counters;

View file

@ -0,0 +1,17 @@
/*
jQuery.mmenu dragOpen addon CSS
*/
@import "../inc/variables";
html.mm-opened.mm-dragging
{
.mm-menu,
.mm-page,
.mm-fixed-top,
.mm-fixed-bottom,
#mm-blocker
{
@include mm_webkit-prefix( "transition-duration", 0s );
}
}

View file

@ -0,0 +1,34 @@
/*
jQuery.mmenu footer addon CSS
*/
@import "../inc/variables";
.mm-footer
{
background: inherit;
border-top: 1px solid transparent;
text-align: center;
line-height: $mm_footerHeight - ( $mm_padding * 2 );
box-sizing: border-box;
width: 100%;
height: $mm_footerHeight;
padding: $mm_padding $mm_padding 0 ( $mm_padding * 2 );
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
}
.mm-menu.mm-hasfooter
{
> .mm-panel:after
{
height: $mm_footerHeight + $mm_btnSize;
}
}
@include mm_colors_footer;

View file

@ -0,0 +1,142 @@
/*
jQuery.mmenu header addon CSS
*/
@import "../inc/variables";
.mm-header
{
background: inherit;
border-bottom: 1px solid transparent;
text-align: center;
line-height: $mm_btnSize / 2;
box-sizing: border-box;
width: 100%;
height: $mm_headerHeight;
padding: 0 ( $mm_btnSize + $mm_padding );
position: absolute;
z-index: 2;
top: 0;
left: 0;
.mm-title,
.mm-prev,
.mm-next,
.mm-close
{
padding-top: $mm_headerPaddingTop;
}
.mm-title
{
@include mm_ellipsis;
display: inline-block;
width: 100%;
position: relative;
}
.mm-prev,
.mm-next,
.mm-close
{
text-decoration: none;
display: block;
box-sizing: border-box;
min-width: $mm_padding;
height: 100%;
position: absolute;
top: 0;
z-index: 1;
}
.mm-prev
{
padding-left: ( $mm_padding * 2 );
padding-right: $mm_padding;
left: 0;
}
.mm-next,
.mm-close
{
padding-left: $mm_padding;
padding-right: ( $mm_padding * 2 );
right: 0;
}
[href]
{
&.mm-prev:before,
&.mm-next:after
{
@include mm_arrow;
}
&.mm-prev:before
{
@include mm_arrow-prev;
margin-left: 2px;
margin-right: $mm_padding / 2;
}
&.mm-next:after,
&.mm-close:after
{
margin-left: $mm_padding / 2;
margin-right: -2px;
}
&.mm-next:after
{
@include mm_arrow-next;
}
&.mm-close:after
{
content: 'x';
}
}
}
.mm-menu.mm-hassearch .mm-header
{
height: $mm_headerHeight - $mm_padding;
top: $mm_searchHeight;
.mm-title,
.mm-prev,
.mm-next,
.mm-close
{
padding-top: $mm_headerPaddingTop - $mm_padding;
}
}
$mm_paddingBeneathHeader: $mm_padding * 2 !default;
.mm-menu.mm-hasheader
{
li.mm-subtitle
{
display: none;
}
> .mm-panel
{
padding-top: $mm_headerHeight + $mm_paddingBeneathHeader;
&.mm-list
{
padding-top: $mm_headerHeight;
}
> .mm-list:first-child
{
margin-top: -$mm_paddingBeneathHeader;
}
}
&.mm-hassearch > .mm-panel
{
padding-top: $mm_headerHeight + $mm_searchHeight + $mm_padding;
&.mm-list
{
padding-top: $mm_headerHeight + $mm_searchHeight - $mm_padding;
}
}
}
@include mm_colors_header;

View file

@ -0,0 +1,40 @@
/*
jQuery.mmenu labels addon CSS
*/
@import "../inc/variables";
.mm-list
{
li.mm-label
{
> span
{
@include mm_ellipsis;
padding: 0;
line-height: $mm_labelHeight;
}
&.mm-opened a.mm-subopen:after
{
@include mm_webkit-prefix( "transform", rotate( 45deg ) );
}
}
li.mm-collapsed:not( .mm-uncollapsed )
{
display: none;
}
}
.mm-menu.mm-vertical .mm-list
{
> li.mm-label
{
> a.mm-subopen:after
{
top: ( $mm_labelHeight / 2 ) - 4;
}
}
}
@include mm_colors_labels;

View file

@ -0,0 +1,70 @@
/*
jQuery.mmenu offcanvas addon CSS
*/
@import "../inc/variables";
// Animations
.mm-page
{
box-sizing: border-box;
position: relative;
-webkit-transition: -webkit-transform $mm_transitionDuration $mm_transitionFunction;
-ms-transition: -ms-transform $mm_transitionDuration $mm_transitionFunction;
transition: transform $mm_transitionDuration $mm_transitionFunction;
}
// Container, Page, Blocker
html.mm-opened
{
overflow: hidden;
position: relative;
body
{
overflow: hidden;
}
}
html.mm-background .mm-page
{
background: inherit;
}
#mm-blocker
{
background: rgba( 3, 2, 1, 0 );
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 999999;
}
html.mm-opened,
html.mm-blocking
{
#mm-blocker
{
display: block;
}
}
// Menu
.mm-menu
{
&.mm-offcanvas
{
display: none;
position: fixed;
}
&.mm-current
{
display: block;
}
}
@include mm_sizing;

View file

@ -0,0 +1,125 @@
/*
jQuery.mmenu searchfield addon CSS
*/
@import "../inc/variables";
.mm-search,
.mm-search input
{
box-sizing: border-box;
}
.mm-list
{
> li.mm-search
{
padding: $mm_padding;
margin-top: -( $mm_padding * 2 );
}
> li.mm-subtitle + li.mm-search
{
margin-top: 0;
}
}
div.mm-panel > div.mm-search
{
padding: 0 0 $mm_padding 0;
}
.mm-menu.mm-hasheader .mm-list > li.mm-search
{
margin-top: 0;
}
.mm-menu > .mm-search
{
background: inherit;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.mm-search
{
padding: $mm_padding;
input
{
border: none;
border-radius: $mm_searchfieldHeight;
font: inherit;
font-size: $mm_fontSize;
line-height: $mm_searchfieldHeight;
outline: none;
display: block;
width: 100%;
height: $mm_searchfieldHeight;
margin: 0;
padding: 0 $mm_padding;
}
input::-ms-clear
{
display: none;
}
}
.mm-menu .mm-noresultsmsg
{
text-align: center;
font-size: round( $mm_fontSize * 1.5 );
display: none;
padding: ( $mm_btnSize * 1.5 ) 0;
&:after
{
border: none !important;
}
}
.mm-noresults .mm-noresultsmsg
{
display: block;
}
$mm_paddingBeneathHeader: $mm_padding * 2 !default;
.mm-menu
{
li.mm-nosubresults > a.mm-subopen
{
display: none;
+ a,
+ span
{
padding-right: 10px;
}
}
&.mm-hassearch
{
> .mm-panel
{
padding-top: $mm_searchHeight + $mm_paddingBeneathHeader;
> .mm-list:first-child
{
margin-top: -$mm_paddingBeneathHeader;
}
}
}
&.mm-hasheader
{
> .mm-panel
{
> div.mm-search:first-child
{
margin-top: -$mm_padding;
+ .mm-list
{
padding-top: 0;
}
}
}
}
}
@include mm_colors_searchfield;

View file

@ -0,0 +1,178 @@
/*
jQuery.mmenu toggles addon CSS
*/
@import "../inc/variables";
input.mm-toggle,
input.mm-check
{
position: absolute;
left: -10000px;
}
label.mm-toggle,
label.mm-check
{
margin: 0;
position: absolute;
bottom: 50%;
z-index: 2;
&:before
{
content: '';
display: block;
}
}
// styling
label.mm-toggle
{
border-radius: $mm_toggleHeight;
width: $mm_toggleWidth;
height: $mm_toggleHeight;
margin-bottom: -( $mm_toggleHeight / 2 );
&:before
{
border-radius: $mm_toggleHeight;
width: $mm_toggleHeight - 2;
height: $mm_toggleHeight - 2;
margin: 1px;
}
}
input.mm-toggle:checked ~ label.mm-toggle:before
{
float: right;
}
label.mm-check
{
width: $mm_checkWidth;
height: $mm_checkHeight;
margin-bottom: -( $mm_checkHeight / 2 );
&:before
{
border-left: 3px solid;
border-bottom: 3px solid;
width: 40%;
height: 20%;
margin: 25% 0 0 20%;
opacity: 0.1;
@include mm-webkit-prefix( 'transform', rotate( -45deg ) );
}
}
input.mm-check:checked ~ label.mm-check:before
{
opacity: 1;
}
// vertical submenu
.mm-menu.mm-vertical .mm-list
{
> li label
{
&.mm-toggle,
&.mm-check
{
bottom: auto;
margin-bottom: 0;
}
&.mm-toggle
{
top: ( $mm_btnSize - $mm_toggleHeight ) / 2;
}
&.mm-check
{
top: ( $mm_btnSize - $mm_checkHeight ) / 2;
}
}
}
// positioning
label
{
&.mm-toggle,
&.mm-check
{
right: $mm_padding * 2;
}
}
label.mm-toggle
{
+ a,
+ span
{
margin-right: $mm_toggleWidth + ( $mm_padding * 2 );
}
}
label.mm-check
{
+ a,
+ span
{
margin-right: $mm_checkWidth + ( $mm_padding * 2 );
}
}
// positioning with subopen
a.mm-subopen + label
{
&.mm-toggle,
&.mm-check
{
right: $mm_subopenWidth + $mm_padding;
}
}
a.mm-subopen + label.mm-toggle
{
+ a,
+ span
{
margin-right: $mm_subopenWidth + $mm_toggleWidth + $mm_padding;
}
}
a.mm-subopen + label.mm-check
{
+ a,
+ span
{
margin-right: $mm_subopenWidth + $mm_checkWidth + $mm_padding;
}
}
// positioning with counter
em.mm-counter + a.mm-subopen + label
{
&.mm-toggle,
&.mm-check
{
right: $mm_counterWidth + $mm_subopenWidth + $mm_padding;
}
}
em.mm-counter + a.mm-subopen + label.mm-toggle
{
+ a,
+ span
{
margin-right: $mm_counterWidth + $mm_subopenWidth + $mm_toggleWidth + $mm_padding;
}
}
em.mm-counter + a.mm-subopen + label.mm-check
{
+ a,
+ span
{
margin-right: $mm_counterWidth + $mm_subopenWidth + $mm_checkWidth + $mm_padding;
}
}
@include mm_colors_toggles;
@include mm_colors_checks;

View file

@ -0,0 +1,152 @@
/*
jQuery.mmenu effects extension CSS
*/
@import "../inc/variables";
// Slide
html.mm-slide
{
.mm-menu
{
-webkit-transition: -webkit-transform $mm_transitionDuration $mm_transitionFunction;
transition: transform $mm_transitionDuration $mm_transitionFunction;
}
// Left
&.mm-opened .mm-menu
{
@include mm_webkit-prefix( 'transform', translateX( -$mm_subpanelOffset ) );
}
&.mm-opening .mm-menu
{
@include mm_webkit-prefix( 'transform', translateX( 0% ) );
}
// Right
&.mm-right
{
&.mm-opened .mm-menu
{
@include mm_webkit-prefix( 'transform', translateX( $mm_subpanelOffset ) );
}
&.mm-opening .mm-menu
{
@include mm_webkit-prefix( 'transform', translateX( 0% ) );
}
}
// Top
&.mm-top
{
&.mm-opened .mm-menu
{
@include mm_webkit-prefix( 'transform', translateY( -$mm_subpanelOffset ) );
}
&.mm-opening .mm-menu
{
@include mm_webkit-prefix( 'transform', translateY( 0% ) );
}
}
// Bottom
&.mm-bottom
{
&.mm-opened .mm-menu
{
@include mm_webkit-prefix( 'transform', translateY( $mm_subpanelOffset ) );
}
&.mm-opening .mm-menu
{
@include mm_webkit-prefix( 'transform', translateY( 0% ) );
}
}
}
// Zoom menu
$mm_scaleDown: 0.7;
$mm_scaleUp: 1.5;
html.mm-zoom-menu
{
.mm-menu
{
-webkit-transition: -webkit-transform $mm_transitionDuration $mm_transitionFunction;
transition: transform $mm_transitionDuration $mm_transitionFunction;
}
// Left
&.mm-opened .mm-menu
{
@include mm_webkit-prefix( 'transform', scale( $mm_scaleDown, $mm_scaleDown ) translateX( -$mm_subpanelOffset ) );
@include mm_webkit-prefix( 'transform-origin', left center );
}
&.mm-opening .mm-menu
{
@include mm_webkit-prefix( 'transform', scale( 1, 1 ) translateX( 0% ) );
}
// Right
&.mm-right
{
&.mm-opened .mm-menu
{
@include mm_webkit-prefix( 'transform', scale( $mm_scaleDown, $mm_scaleDown) translateX( $mm_subpanelOffset ) );
@include mm_webkit-prefix( 'transform-origin', right center );
}
&.mm-opening .mm-menu
{
@include mm_webkit-prefix( 'transform', scale( 1, 1 ) translateX( 0% ) );
}
}
// Top
&.mm-top
{
&.mm-opened .mm-menu
{
@include mm_webkit-prefix( 'transform', scale( $mm_scaleDown, $mm_scaleDown ) translateY( -$mm_subpanelOffset ) );
@include mm_webkit-prefix( 'transform-origin', center top );
}
&.mm-opening .mm-menu
{
@include mm_webkit-prefix( 'transform', scale( 1, 1 ) translateY( 0% ) );
}
}
// Bottom
&.mm-bottom
{
&.mm-opened .mm-menu
{
@include mm_webkit-prefix( 'transform', scale( $mm_scaleDown, $mm_scaleDown ) translateY( $mm_subpanelOffset ) );
@include mm_webkit-prefix( 'transform-origin', center bottom );
}
&.mm-opening .mm-menu
{
@include mm_webkit-prefix( 'transform', scale( 1, 1 ) translateY( 0% ) );
}
}
}
// Zoom panels
html.mm-zoom-panels .mm-menu.mm-horizontal > .mm-panel
{
@include mm_webkit-prefix( 'transform', scale( $mm_scaleUp, $mm_scaleUp ) translateX( 100% ) );
@include mm_webkit-prefix( 'transform-origin', left center );
-webkit-transition-property: -webkit-transform, left;
transition-property: transform, left;
&.mm-opened
{
@include mm_webkit-prefix( 'transform', scale( 1, 1 ) translateX( 0% ) );
&.mm-subopened
{
@include mm_webkit-prefix( 'transform', scale( $mm_scaleDown, $mm_scaleDown ) translateX( -$mm_subpanelOffset ) );
}
}
}

View file

@ -0,0 +1,24 @@
/*
jQuery.mmenu fullscreen extension CSS
*/
@import "../inc/variables";
$mm_fs_class : ".mm-fullscreen";
$mm_fs_full : 1 !default;
$mm_fs_min : 140px !default;
$mm_fs_max : 10000px !default;
@include mm_sizing( $mm_fs_class,
$mm_fs_full, $mm_fs_min, $mm_fs_max );
@include mm_sizing_right( $mm_fs_class,
$mm_fs_full, $mm_fs_min, $mm_fs_max);
@include mm_sizing_zposition( $mm_fs_class,
$mm_fs_full, $mm_fs_min, $mm_fs_max );
html.mm-opened#{$mm_fs_class} .mm-page
{
box-shadow: none !important;
}

View file

@ -0,0 +1,31 @@
/*
jQuery.mmenu iconbar extension CSS
*/
@import "../inc/variables";
$mm_ib_pageOffset: $mm_btnSize + ( $mm_padding * 2 ) !default;
body
{
overflow-x: hidden;
}
.mm-page
{
background: inherit;
min-height: 100vh;
padding-right: $mm_ib_pageOffset;
@include mm-webkit-prefix( 'transform', translateX( $mm_ib_pageOffset ) );
}
.mm-menu
{
&:first-child,
&.mm-current
{
display: block;
}
}

View file

@ -0,0 +1,98 @@
/*
jQuery.mmenu position extension CSS
*/
@import "../inc/variables";
// top
// bottom
.mm-menu.mm-top,
.mm-menu.mm-bottom
{
width: 100%;
min-width: 100%;
max-width: 100%;
}
// right
.mm-menu.mm-right
{
left: auto;
right: 0;
}
// bottom
.mm-menu.mm-bottom
{
top: auto;
bottom: 0;
}
@include mm_sizing_right;
/*
jQuery.mmenu z-position extension CSS
*/
// reset defaults
html.mm-front
{
.mm-page,
#mm-blocker
{
@include mm-webkit-prefix( 'transform', translate( 0, 0 ) !important );
z-index: 0;
}
}
// styling
.mm-menu.mm-front
{
z-index: 1;
box-shadow: 0 0 15px rgba( 0, 0, 0, 0.5 );
}
html.mm-opened.mm-next .mm-page
{
box-shadow: none;
}
// animations
.mm-menu
{
&.mm-front,
&.mm-next
{
-webkit-transition: -webkit-transform $mm_transitionDuration $mm_transitionFunction;
transition: transform $mm_transitionDuration $mm_transitionFunction;
@include mm-webkit-prefix( 'transform', translate( -100%, 0 ) );
&.mm-right
{
@include mm-webkit-prefix( 'transform', translate( 100%, 0 ) );
}
}
&.mm-front
{
&.mm-top
{
@include mm-webkit-prefix( 'transform', translate( 0, -100% ) );
}
&.mm-bottom
{
@include mm-webkit-prefix( 'transform', translate( 0, 100% ) );
}
}
}
html.mm-opening .mm-menu
{
&.mm-front,
&.mm-next
{
@include mm-webkit-prefix( 'transform', translate( 0, 0 ) );
}
}
@include mm_sizing_zposition;

View file

@ -0,0 +1,82 @@
/*
jQuery.mmenu themes extension CSS
*/
@import "../inc/variables";
@mixin mm_apply_theme()
{
@include mm_colors( $mm_t_cls,
$mm_t_backgroundColor, $mm_t_pageShadow,
$mm_t_textColor, $mm_t_dimmedTextColor,
$mm_t_emphasizedBackgroundColor, $mm_t_highlightedBackgroundColor,
$mm_t_borderColor );
@include mm_colors_buttonbars( $mm_t_cls,
$mm_t_backgroundColor,
$mm_t_textColor );
@include mm_colors_checks( $mm_t_cls,
$mm_t_textColor );
@include mm_colors_counters( $mm_t_cls,
$mm_t_dimmedTextColor );
@include mm_colors_footer( $mm_t_cls,
$mm_t_dimmedTextColor,
$mm_t_borderColor );
@include mm_colors_header( $mm_t_cls,
$mm_t_dimmedTextColor,
$mm_t_borderColor );
@include mm_colors_labels( $mm_t_cls,
$mm_t_highlightedBackgroundColor );
@include mm_colors_searchfield( $mm_t_cls,
$mm_t_inputBackgroundColor, $mm_t_textColor,
$mm_t_dimmedTextColor );
@include mm_colors_toggles( $mm_t_cls,
$mm_t_backgroundColor,
$mm_t_borderColor );
}
// Light
$mm_t_cls : ".mm-light";
$mm_t_pageShadow : 0 0 10px rgba( 0, 0, 0, 0.3 );
$mm_t_borderColor : rgba( 0, 0, 0, 0.1 );
$mm_t_backgroundColor : #f3f3f3;
$mm_t_emphasizedBackgroundColor : rgba( 255, 255, 255, 0.6 );
$mm_t_highlightedBackgroundColor: rgba( 0, 0, 0, 0.03 );
$mm_t_textColor : rgba( 0, 0, 0, 0.6 );
$mm_t_dimmedTextColor : rgba( 0, 0, 0, 0.3 );
$mm_t_inputBackgroundColor : rgba( 0, 0, 0, 0.1 );
@include mm_apply_theme;
// White
$mm_t_cls : ".mm-white";
$mm_t_pageShadow : 0 0 10px rgba( 0, 0, 0, 0.3 );
$mm_t_borderColor : rgba( 0, 0, 0, 0.1 );
$mm_t_backgroundColor : #fff;
$mm_t_emphasizedBackgroundColor : rgba( 0, 0, 0, 0.06 );
$mm_t_highlightedBackgroundColor: rgba( 0, 0, 0, 0.03 );
$mm_t_textColor : rgba( 0, 0, 0, 0.6 );
$mm_t_dimmedTextColor : rgba( 0, 0, 0, 0.3 );
$mm_t_inputBackgroundColor : rgba( 0, 0, 0, 0.1 );
@include mm_apply_theme;
// Black
$mm_t_cls : ".mm-black";
$mm_t_pageShadow : none;
$mm_t_borderColor : rgba( 255, 255, 255, 0.2 );
$mm_t_backgroundColor : #000;
$mm_t_emphasizedBackgroundColor : rgba( 255, 255, 255, 0.25 );
$mm_t_highlightedBackgroundColor: rgba( 255, 255, 255, 0.15 );
$mm_t_textColor : rgba( 255, 255, 255, 0.6 );
$mm_t_dimmedTextColor : rgba( 255, 255, 255, 0.3 );
$mm_t_inputBackgroundColor : rgba( 255, 255, 255, 0.3 );
@include mm_apply_theme;

View file

@ -0,0 +1,60 @@
/*
jQuery.mmenu widescreen extension CSS
To use on widescreens only, include it using a mediaquery:
<link type="text/css" href="mmenu-widescreen.css" media="all and (min-width: 900px)"/>
*/
@import "../inc/variables";
$mm_ws_menuWidth: 0.3 !default;
// Positioning and sizing
html, body
{
overflow: auto;
}
body
{
padding-left: percentage( $mm_ws_menuWidth ) !important;
position: relative;
}
#mm-blocker
{
display: none !important;
}
.mm-page
{
box-shadow: none !important;
background: inherit;
box-sizing: border-box;
min-height: 100vh;
height: auto !important;
margin: 0 !important;
position: relative !important;
top: 0 !important;
z-index: 1;
}
.mm-menu
{
width: percentage( $mm_ws_menuWidth ) !important;
z-index: 0;
&.mm-top,
&.mm-right,
&.mm-bottom
{
top: 0 !important;
right: auto !important;
bottom: auto !important;
left: 0 !important;
}
&:first-child,
&.mm-current
{
display: block;
}
}

View file

@ -0,0 +1,198 @@
@mixin mm_colors( $cls: "",
$baseBg: $mm_backgroundColor, $pageShadow: $mm_pageShadow,
$color: $mm_textColor, $dimmedColor: $mm_dimmedTextColor,
$emphasizedBg: $mm_emphasizedBackgroundColor, $highlightedBg: $mm_highlightedBackgroundColor,
$borderColor: $mm_borderColor
) {
html.mm-opened#{$cls} .mm-page
{
box-shadow: $pageShadow;
}
.mm-menu#{$cls}
{
background: $baseBg;
color: $color;
.mm-list
{
> li:after
{
border-color: $borderColor;
}
> li
{
> a
{
&.mm-subclose
{
background: $emphasizedBg;
color: $dimmedColor;
}
&.mm-subopen:after,
&.mm-subclose:before
{
border-color: $dimmedColor;
}
&.mm-subopen:before
{
border-color: $borderColor;
}
}
}
> li.mm-selected
{
> a:not(.mm-subopen),
> span
{
background: $emphasizedBg;
}
}
> li.mm-label
{
background: $highlightedBg;
}
}
&.mm-vertical .mm-list
{
li.mm-opened
{
> a.mm-subopen,
> ul
{
background: $highlightedBg;
}
}
}
}
}
@mixin mm_colors_buttonbars( $cls: "",
$baseBg: $mm_backgroundColor,
$color: $mm_textColor
) {
.mm-menu#{$cls}
{
.mm-buttonbar
{
border-color: $color;
background: $baseBg;
> *
{
border-color: $color;
}
> input:checked + label
{
background: $color;
color: $baseBg;
}
}
}
}
@mixin mm_colors_checks( $cls: "",
$color: $mm_textColor
) {
.mm-menu#{$cls} label.mm-check:before
{
border-color: $color;
}
}
@mixin mm_colors_counters( $cls: "",
$dimmedColor: $mm_dimmedTextColor
) {
.mm-menu#{$cls} em.mm-counter
{
color: $dimmedColor;
}
}
@mixin mm_colors_footer( $cls: "",
$dimmedColor: $mm_dimmedTextColor,
$borderColor: $mm_borderColor
) {
.mm-menu#{$cls}
{
.mm-footer
{
border-color: $borderColor;
color: $dimmedColor;
}
}
}
@mixin mm_colors_header( $cls: "",
$dimmedColor: $mm_dimmedTextColor,
$borderColor: $mm_borderColor
) {
.mm-menu#{$cls}
{
.mm-header
{
border-color: $borderColor;
color: $dimmedColor;
.mm-prev:before,
.mm-next:after,
.mm-close:after
{
border-color: $dimmedColor;
}
}
}
}
@mixin mm_colors_labels( $cls: "",
$highlightedBg: $mm_highlightedBackgroundColor
) {
.mm-menu#{$cls}
{
.mm-list li.mm-label > div > div
{
background: $highlightedBg;
}
}
}
@mixin mm_colors_searchfield( $cls: "",
$inputBg: $mm_dimmedTextColor, $color: $mm_textColor,
$dimmedColor: $mm_dimmedTextColor
) {
.mm-menu#{$cls}
{
.mm-search input
{
background: $inputBg;
color: $color;
}
.mm-noresultsmsg
{
color: $dimmedColor;
}
}
}
@mixin mm_colors_toggles( $cls: "",
$buttonBg: $mm_backgroundColor,
$offBg: $mm_borderColor, $onBg: $mm_toggleCheckedColor
) {
.mm-menu#{$cls}
{
label.mm-toggle
{
background: $offBg;
&:before
{
background: $buttonBg;
}
}
input.mm-toggle:checked ~ label.mm-toggle
{
background: $onBg;
}
}
}

View file

@ -0,0 +1,87 @@
// Arrows
@mixin mm_arrow
{
content: '';
border: 2px solid transparent;
display: inline-block;
width: 7px;
height: 7px;
@include mm_webkit-prefix( "transform", rotate( -45deg ) );
}
@mixin mm_arrow-prev
{
border-right: none;
border-bottom: none;
}
@mixin mm_arrow-next
{
border-top: none;
border-left: none;
}
// Borders
@mixin mm_border( $border, $pseudo, $size, $pos1, $pos2 )
{
&:#{$pseudo}
{
content: '';
border-#{$border}-width: 1px;
border-#{$border}-style: solid;
display: block;
#{$size}: 100%;
position: absolute;
#{$pos1}: 0;
#{$pos2}: 0;
}
}
@mixin mm_border-top
{
@include mm_border( "top", "before", "width", "top", "left" );
}
@mixin mm_border-right
{
@include mm_border( "right", "after", "height", "right", "top" );
}
@mixin mm_border-bottom
{
@include mm_border( "bottom", "after", "width", "bottom", "left" );
}
@mixin mm_border-left
{
@include mm_border( "left", "before", "height", "left", "top" );
}
// Misc
@mixin mm_vendor-prefix( $prop, $val )
{
-webkit-#{$prop}: $val;
-moz-#{$prop}: $val;
-ms-#{$prop}: $val;
-o-#{$prop}: $val;
#{$prop}: $val;
}
@mixin mm_webkit-prefix( $prop, $val )
{
// we're not yet ready to drop vendor prefixes due to IE9 and older versions of FF
@include mm_vendor_prefix( $prop, $val );
// -webkit-#{$prop}: $val;
// #{$prop}: $val;
}
@mixin mm_ellipsis()
{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
@mixin mm_clearfix()
{
&:after
{
content: '';
display: block;
clear: both;
}
}

View file

@ -0,0 +1,92 @@
// Sizing left (default)
@mixin mm_sizing( $cls: "",
$width: $mm_width, $minWidth: $mm_minWidth, $maxWidth: $mm_maxWidth
) {
.mm-menu#{$cls}
{
width: percentage( $width );
min-width: $minWidth;
max-width: $maxWidth;
}
html.mm-opening#{$cls}
{
.mm-page,
#mm-blocker
{
@include mm-webkit-prefix( 'transform', translate( percentage( $width ), 0 ) );
}
}
@media all and (max-width: $minWidth / $width ) {
html.mm-opening#{$cls}
{
.mm-page,
#mm-blocker
{
@include mm-webkit-prefix( 'transform', translate( $minWidth, 0 ) );
}
}
}
@media all and (min-width: $maxWidth / $width ) {
html.mm-opening#{$cls}
{
.mm-page,
#mm-blocker
{
@include mm-webkit-prefix( 'transform', translate( $maxWidth, 0 ) );
}
}
}
}
// Sizing right
@mixin mm_sizing_right( $cls: "",
$width: $mm_width, $minWidth: $mm_minWidth, $maxWidth: $mm_maxWidth
) {
html.mm-right.mm-opening#{$cls}
{
.mm-page,
#mm-blocker
{
@include mm-webkit-prefix( 'transform', translate( -( percentage( $width ) ), 0 ) );
}
}
@media all and ( max-width: $minWidth / $width ) {
html.mm-right.mm-opening#{$cls}
{
.mm-page,
#mm-blocker
{
@include mm-webkit-prefix( 'transform', translate( -$minWidth, 0 ) );
}
}
}
@media all and ( min-width: $maxWidth / $width ) {
html.mm-right.mm-opening#{$cls}
{
.mm-page,
#mm-blocker
{
@include mm-webkit-prefix( 'transform', translate( -$maxWidth, 0 ) );
}
}
}
}
// Sizing z-position
@mixin mm_sizing_zposition( $cls: "",
$height: $mm_height, $minHeight: $mm_minHeight, $maxHeight: $mm_maxHeight
) {
// top
// bottom
.mm-menu.mm-front#{$cls}
{
&.mm-top,
&.mm-bottom
{
height: percentage( $height );
min-height: $minHeight;
max-height: $maxHeight;
}
}
}

View file

@ -0,0 +1,58 @@
// Animations
$mm_transitionDuration: 0.4s !default;
$mm_transitionFunction: ease !default;
// Sizes
$mm_width : 0.8 !default;
$mm_minWidth : 140px !default;
$mm_maxWidth : 440px !default;
$mm_height : 0.8 !default;
$mm_minHeight : 140px !default;
$mm_maxHeight : 880px !default;
$mm_btnSize : 40px !default;
$mm_padding : 10px !default;
$mm_fontSize : 14px !default;
$mm_subpanelOffset : 30% !default;
$mm_subopenWidth : $mm_btnSize !default;
// Addon sizes
$mm_buttonbarHeight : $mm_btnSize - ( $mm_padding * 2 ) !default;
$mm_counterWidth : $mm_btnSize !default;
$mm_toggleHeight : $mm_btnSize - $mm_padding !default;
$mm_toggleWidth : ( $mm_toggleHeight * 2 ) - $mm_padding !default;
$mm_checkHeight : $mm_btnSize - $mm_padding !default;
$mm_checkWidth : $mm_btnSize - $mm_padding !default;
$mm_footerHeight : $mm_btnSize;
$mm_headerHeight : $mm_btnSize * 1.5 !default;
$mm_headerPaddingTop : $mm_headerHeight / 2 !default;
$mm_labelHeight : ( $mm_btnSize / 2 ) + ( $mm_padding / 2 ) !default;
$mm_searchHeight : $mm_btnSize + $mm_padding !default;
$mm_searchfieldHeight : $mm_searchHeight - ( $mm_padding * 2 ) !default;
// Colors
$mm_pageShadow : none; //0 0 20px rgba( 0, 0, 0, 0.5 ) !default;
$mm_borderColor : rgba( 0, 0, 0, 0.15 ) !default;
$mm_backgroundColor : #222 !default;
$mm_emphasizedBackgroundColor : rgba( 0, 0, 0, 0.1 ) !default;
$mm_highlightedBackgroundColor : rgba( 255, 255, 255, 0.05 ) !default;
$mm_textColor : rgba( 255, 255, 255, 0.8 ) !default;
$mm_dimmedTextColor : rgba( 255, 255, 255, 0.5 ) !default;
// Addon colors
$mm_toggleCheckedColor : #4bd963 !default;
@import "mixins";
@import "sizing";
@import "colors";

View file

@ -0,0 +1,15 @@
@import "jquery.mmenu";
@import "addons/jquery.mmenu.buttonbars";
@import "addons/jquery.mmenu.counters";
@import "addons/jquery.mmenu.dragopen";
@import "addons/jquery.mmenu.footer";
@import "addons/jquery.mmenu.header";
@import "addons/jquery.mmenu.labels";
@import "addons/jquery.mmenu.searchfield";
@import "addons/jquery.mmenu.toggles";
@import "extensions/jquery.mmenu.effects";
@import "extensions/jquery.mmenu.fullscreen";
@import "extensions/jquery.mmenu.positioning";
@import "extensions/jquery.mmenu.themes";

View file

@ -0,0 +1,298 @@
/*
jQuery.mmenu panels CSS
*/
@import "inc/variables";
// Animations
.mm-menu.mm-horizontal > .mm-panel
{
-webkit-transition: -webkit-transform $mm_transitionDuration $mm_transitionFunction;
transition: transform $mm_transitionDuration $mm_transitionFunction;
}
// Generic classes
.mm-menu .mm-hidden
{
display: none;
}
// Container
.mm-wrapper
{
overflow-x: hidden;
position: relative;
}
// Menu
.mm-menu,
.mm-menu > .mm-panel
{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 0;
}
.mm-menu
{
background: inherit;
display: block;
overflow: hidden;
padding: 0;
> .mm-panel
{
background: inherit;
-webkit-overflow-scrolling: touch;
overflow: scroll;
overflow-x: hidden;
overflow-y: auto;
box-sizing: border-box;
padding: $mm_padding * 2;
@include mm_webkit-prefix( 'transform', translateX( 100% ) );
&.mm-opened
{
@include mm_webkit-prefix( 'transform', translateX( 0% ) );
}
&.mm-subopened
{
@include mm_webkit-prefix( 'transform', translateX( -$mm_subpanelOffset ) );
}
&.mm-highest
{
z-index: 1;
}
}
// Lists
.mm-list
{
padding: ( $mm_btnSize / 2 ) 0;
}
> .mm-list
{
padding-bottom: 0;
&:after
{
content: '';
display: block;
height: $mm_btnSize;
}
}
}
.mm-panel > .mm-list
{
margin-left: -( $mm_padding * 2 );
margin-right: -( $mm_padding * 2 );
&:first-child
{
padding-top: 0;
}
}
.mm-list,
.mm-list > li
{
list-style: none;
display: block;
padding: 0;
margin: 0;
}
.mm-list
{
font: inherit;
font-size: $mm_fontSize;
a,
a:hover
{
text-decoration: none;
}
> li
{
position: relative;
> a,
> span
{
@include mm_ellipsis;
color: inherit;
line-height: $mm_btnSize - ( $mm_padding * 2 );
display: block;
padding: $mm_padding $mm_padding $mm_padding ( $mm_padding * 2 );
margin: 0;
}
}
> li:not(.mm-subtitle):not(.mm-label):not(.mm-search):not(.mm-noresults)
{
@include mm_border-bottom;
&:after
{
width: auto;
margin-left: ( $mm_padding * 2 );
position: relative;
left: auto;
}
}
// subopen/close
a.mm-subopen
{
@include mm_border-left;
background: rgba( 3, 2, 1, 0 );
width: $mm_subopenWidth;
height: 100%;
padding: 0;
position: absolute;
right: 0;
top: 0;
z-index: 2;
&.mm-fullsubopen
{
width: 100%;
&:before
{
border-left: none;
}
}
+ a,
+ span
{
padding-right: ( $mm_padding / 2 );
margin-right: $mm_subopenWidth;
}
}
> li.mm-selected
{
> a.mm-subopen
{
background: transparent;
}
> a.mm-fullsubopen
{
+ a,
+ span
{
padding-right: $mm_btnSize + ( $mm_padding / 2 );
margin-right: 0;
}
}
}
a.mm-subclose
{
text-indent: $mm_btnSize - ( $mm_padding * 2 );
padding-top: ( $mm_btnSize / 2 ) + $mm_padding;
margin-top: -( $mm_btnSize / 2 );
}
// Labels
> li.mm-label
{
@include mm_ellipsis;
font-size: 10px;
text-transform: uppercase;
text-indent: $mm_padding * 2;
line-height: $mm_labelHeight;
padding-right: $mm_padding / 2;
}
// Spacers
> li.mm-spacer
{
padding-top: $mm_btnSize;
&.mm-label
{
padding-top: $mm_labelHeight;
}
}
// Arrows
a.mm-subopen:after,
a.mm-subclose:before
{
@include mm_arrow;
margin-bottom: -5px;
position: absolute;
bottom: 50%;
}
a.mm-subopen:after
{
@include mm_arrow-next;
right: 18px;
}
a.mm-subclose:before
{
@include mm_arrow-prev;
margin-bottom: -( $mm_padding * 2 ) + 5;
left: 22px;
}
}
// vertical submenu
.mm-menu.mm-vertical .mm-list
{
.mm-panel
{
display: none;
padding: $mm_padding 0 $mm_padding $mm_padding;
li:last-child:after
{
border-color: transparent;
}
}
li.mm-opened > .mm-panel
{
display: block;
}
> li
{
> a.mm-subopen
{
height: $mm_btnSize;
&:after
{
top: ( $mm_btnSize / 2 ) - 4;
bottom: auto;
}
}
&.mm-opened
{
> a.mm-subopen:after
{
@include mm_webkit-prefix( "transform", rotate( 45deg ) );
}
}
&.mm-label > a.mm-subopen
{
height: $mm_labelHeight;
}
}
}
@include mm_colors;

View file

@ -0,0 +1,6 @@
/*
jQuery.mmenu CSS
*/
@import "jquery.mmenu.oncanvas";
@import "addons/jquery.mmenu.offcanvas";