mirror of
https://github.com/google/pebble.git
synced 2025-04-01 15:24:04 +00:00
178 lines
No EOL
2.4 KiB
SCSS
Executable file
178 lines
No EOL
2.4 KiB
SCSS
Executable file
/*
|
|
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; |