Note: this is a sample Proto project. For more information, see this walkthrough.
I think the rollup works best at 0.25s. Any slower and it feels sluggish, and faster is too abrupt.
#sidebar | |
.sidebar-item.open | |
.title Item 1 | |
.info | |
label Some controls | |
input(type='checkbox') | |
label More controls | |
input(type='checkbox') | |
label Other controls | |
input(type='checkbox') | |
Note: this is a sample Proto project. For more information, see this walkthrough.
I think the rollup works best at 0.25s. Any slower and it feels sluggish, and faster is too abrupt.
$('.sidebar-item .title').on 'click', -> | |
$(this).parent().toggleClass('open') | |
$('label').each -> | |
$label = $(this) | |
console.log this | |
$label.on 'click', (e) -> | |
e.stopImmediatePropagation() | |
e.stopPropagation() | |
if $label.find('input').is(':checked') | |
$label.addClass('active') | |
else | |
$label.removeClass('active') |
{ | |
"name": "sampleproto", | |
"proto_version": "0.0.4", | |
"script_libraries": [ | |
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.1/underscore-min.js", | |
"https://cdnjs.cloudflare.com/ajax/libs/underscore.string/2.3.0/underscore.string.min.js", | |
"https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js", | |
"https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js" | |
], | |
"style_libraries": [ | |
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css" | |
] | |
} |
transition(prop, dur) | |
-webkit-transition-property: prop | |
-webkit-transition-duration: dur | |
-moz-transition-property: prop | |
-moz-transition-duration: dur | |
-ms-transition-property: prop | |
-ms-transition-duration: dur | |
-o-transition-property: prop | |
-o-transition-duration: dur | |
transition-property: prop | |
transition-duration: dur | |
#sidebar | |
border: 1px solid #ccc | |
width: 300px | |
sidebar_item_height = 50px | |
sidebar_item_padding = 10px | |
.sidebar-item | |
height: sidebar_item_height | |
overflow: hidden | |
font-family: Helvetica | |
font-weight: 700 | |
transition(height, 0.25s) | |
&.open | |
height: 200px | |
.title | |
font-size: 25px | |
height: sidebar_item_height + 1 | |
padding: sidebar_item_padding | |
box-sizing: border-box | |
cursor: pointer | |
border-bottom: 1px solid #ccc | |
background-color: #eee | |
.info | |
label, input | |
cursor: pointer | |
label | |
display: block | |
padding: sidebar_item_padding | |
&:hover, &.active:hover | |
background-color: #eee | |
&.active | |
background-color: #dfd | |
&:active | |
background-color: #ddd | |
input | |
float: right |