Skip to content
Browse files

Add active style to easing in list

  • Loading branch information...
1 parent 080378a commit b3e6608dc2bf280a4d02700dbe07fe962f8bd87a @ai committed
Showing with 121 additions and 100 deletions.
  1. +15 −14 layout/_easing.slim
  2. +6 −1 layout/action.js.coffee
  3. +83 −82 layout/index.html.slim
  4. +17 −3 layout/style.css.sass
View
29 layout/_easing.slim
@@ -1,15 +1,16 @@
li.easing class=easing_classes(@easing)
- h3.easing-title= @easing.name
- - x = 120
- - y = 60
- - dots = @easing.dots(100, x, y)
- a.graph.link href="##{@easing.name}"
- .example
- .rect
- .arrow
- .dot
- svg( xmlns="http://www.w3.org/2000/svg"
- viewBox="-2 -40 #{x + 4} #{y + 80}" )
- line x1="0" y1="0" x2="#{x}" y2="0"
- line x1="0" y1="#{y}" x2="#{x}" y2="#{y}"
- path d="M0,#{y} L#{to_path dots}"
+ .button
+ h3.easing-title= @easing.name
+ - x = 120
+ - y = 60
+ - dots = @easing.dots(100, x, y)
+ a.graph.link href="##{@easing.name}"
+ .example
+ .rect
+ .arrow
+ .dot
+ svg( xmlns="http://www.w3.org/2000/svg"
+ viewBox="-2 -40 #{x + 4} #{y + 80}" )
+ line x1="0" y1="0" x2="#{x}" y2="0"
+ line x1="0" y1="#{y}" x2="#{x}" y2="#{y}"
+ path d="M0,#{y} L#{to_path dots}"
View
7 layout/action.js.coffee
@@ -14,13 +14,18 @@ jQuery ($) ->
document.location.hash = hash
$(window).scrollTop(scroll)
- easings.find('.link').click ->
+ links = easings.find('.link')
+
+ links.click ->
if $(@).closest('li').hasClass('highlight')
hash('')
else
hash($(@).attr('href'))
false
+ links.mousedown -> $(@).closest('.button').addClass('pressed')
+ links.mouseup -> easings.find('.button').removeClass('pressed')
+
easings.mouseenter -> $(@).addClass('hover')
easings.mouseleave -> $(@).removeClass('hover')
View
165 layout/index.html.slim
@@ -18,98 +18,99 @@
text x="#{x - 5}" y="#{y - 3}" t
path d="M0,#{y} L#{to_path dots}"
-.page-slider
- .easings
- .part.css
- h2.part-title title=t.easings.css css+js
- ul
- - css_easings.each do |easing|
- - @easing = easing
- = partial 'easing'
- .part.js
- h2.part-title title=t.easings.js js
- ul
- - js_easings.each do |easing|
- - @easing = easing
- = partial 'easing'
- article.howtos
- section.js
- h3 JavaScript
- p= t.howtos.js.link('jQuery Easing Plugin', 'http://gsgd.co.uk/sandbox/jquery/easing/')
- pre
- code
- | div.animate({ top: '-=100px' }, 600, '#{easing_example}', function () { … })
-
- section.sass
- h3 Sass
- p= t.howtos.sass.link('Compass Ceaser', 'http://thesassway.com/projects/compass-ceaser')
- pre
- code
- | div
- @include transition(all 600ms ceaser('#{easing_example}'))
-
- section.css
- h3 CSS
- p= t.howtos.css + ' ' + t.howtos.css_bad
- .click
- p= t.howtos.css_help
- pre
- code
- | div {
- -webkit-transition: all 600ms #{easing_example(t.howtos.curve)};
- -moz-transition: all 600ms #{easing_example(t.howtos.curve)};
- -ms-transition: all 600ms #{easing_example(t.howtos.curve)};
- -o-transition: all 600ms #{easing_example(t.howtos.curve)};
- transition: all 600ms #{easing_example(t.howtos.curve)}; }
-
- - all_easings.each do |easing|
- - next if easing.linear?
- article.easing-description class=easing.name
- a.back href="#"
- | ←
- span.text= t.easing.all_easings
- h2= easing.name
- .graph
- - x = 120
- - y = 60
- - dots = easing.dots(100, x, y)
- svg( xmlns="http://www.w3.org/2000/svg"
- viewBox="-2 -40 #{x + 4} #{y + 80}" )
- line x1="0" y1="0" x2="0" y2="#{y}"
- text x="2" y="6" x
- line x1="0" y1="#{y}" x2="#{x}" y2="#{y}"
- text x="#{x - 5}" y="#{y - 3}" t
- path d="M0,#{y} L#{to_path dots}"
+.page-crop
+ .page-slider
+ .easings
+ .part.css
+ h2.part-title title=t.easings.css css+js
+ ul
+ - css_easings.each do |easing|
+ - @easing = easing
+ = partial 'easing'
+ .part.js
+ h2.part-title title=t.easings.js js
+ ul
+ - js_easings.each do |easing|
+ - @easing = easing
+ = partial 'easing'
+ article.howtos
section.js
h3 JavaScript
p= t.howtos.js.link('jQuery Easing Plugin', 'http://gsgd.co.uk/sandbox/jquery/easing/')
pre
code
- | div.animate({ top: '-=100px' }, 600, '#{easing_example(easing.name)}', function () { … })
+ | div.animate({ top: '-=100px' }, 600, '#{easing_example}', function () { … })
section.sass
h3 Sass
- - if easing.css
- p= t.howtos.sass.link('Compass Ceaser', 'http://thesassway.com/projects/compass-ceaser')
- pre
- code
- | div
- @include transition(all 600ms ceaser('#{easing_example(easing.name)}'))
- - else
- p= t.easing.no_css
+ p= t.howtos.sass.link('Compass Ceaser', 'http://thesassway.com/projects/compass-ceaser')
+ pre
+ code
+ | div
+ @include transition(all 600ms ceaser('#{easing_example}'))
section.css
h3 CSS
- - if easing.css
- p= t.howtos.css
+ p= t.howtos.css + ' ' + t.howtos.css_bad
+ .click
+ p= t.howtos.css_help
+ pre
+ code
+ | div {
+ -webkit-transition: all 600ms #{easing_example(t.howtos.curve)};
+ -moz-transition: all 600ms #{easing_example(t.howtos.curve)};
+ -ms-transition: all 600ms #{easing_example(t.howtos.curve)};
+ -o-transition: all 600ms #{easing_example(t.howtos.curve)};
+ transition: all 600ms #{easing_example(t.howtos.curve)}; }
+
+ - all_easings.each do |easing|
+ - next if easing.linear?
+ article.easing-description class=easing.name
+ a.back href="#"
+ | ←
+ span.text= t.easing.all_easings
+ h2= easing.name
+ .graph
+ - x = 120
+ - y = 60
+ - dots = easing.dots(100, x, y)
+ svg( xmlns="http://www.w3.org/2000/svg"
+ viewBox="-2 -40 #{x + 4} #{y + 80}" )
+ line x1="0" y1="0" x2="0" y2="#{y}"
+ text x="2" y="6" x
+ line x1="0" y1="#{y}" x2="#{x}" y2="#{y}"
+ text x="#{x - 5}" y="#{y - 3}" t
+ path d="M0,#{y} L#{to_path dots}"
+ section.js
+ h3 JavaScript
+ p= t.howtos.js.link('jQuery Easing Plugin', 'http://gsgd.co.uk/sandbox/jquery/easing/')
pre
code
- | div {
- -webkit-transition: all 600ms #{easing_example(easing.css)};
- -moz-transition: all 600ms #{easing_example(easing.css)};
- -ms-transition: all 600ms #{easing_example(easing.css)};
- -o-transition: all 600ms #{easing_example(easing.css)};
- transition: all 600ms #{easing_example(easing.css)}; }
- p= t.easing.edit("http://cubic-bezier.com/##{easing.bezier}")
- - else
- p= t.easing.no_css
+ | div.animate({ top: '-=100px' }, 600, '#{easing_example(easing.name)}', function () { … })
+
+ section.sass
+ h3 Sass
+ - if easing.css
+ p= t.howtos.sass.link('Compass Ceaser', 'http://thesassway.com/projects/compass-ceaser')
+ pre
+ code
+ | div
+ @include transition(all 600ms ceaser('#{easing_example(easing.name)}'))
+ - else
+ p= t.easing.no_css
+
+ section.css
+ h3 CSS
+ - if easing.css
+ p= t.howtos.css
+ pre
+ code
+ | div {
+ -webkit-transition: all 600ms #{easing_example(easing.css)};
+ -moz-transition: all 600ms #{easing_example(easing.css)};
+ -ms-transition: all 600ms #{easing_example(easing.css)};
+ -o-transition: all 600ms #{easing_example(easing.css)};
+ transition: all 600ms #{easing_example(easing.css)}; }
+ p= t.easing.edit("http://cubic-bezier.com/##{easing.bezier}")
+ - else
+ p= t.easing.no_css
View
20 layout/style.css.sass
@@ -47,9 +47,6 @@ $easing-width: 120px + 4px
margin: 0 auto
position: relative
-.root
- overflow: hidden
-
.about
padding: 20px ($easing-width + 40px) 5px 0
line-height: 1.3
@@ -95,6 +92,9 @@ $easing-width: 120px + 4px
margin-right: 25px
&.easeOutElastic .easing-title
+box-shadow(white 0 26px 8px -8px inset)
+ .button
+ margin: -5px
+ padding: 5px
.easing-title
text-align: center
font-size: 15px
@@ -106,6 +106,15 @@ $easing-width: 120px + 4px
text-decoration: none
position: relative
+.easings
+ .easing
+ background: #f0f0f0
+ box-shadow: inset 0 0 5px black(0.5)
+ .button
+ background: white
+ &.pressed
+ +scale(0.9)
+
.graph
svg
width: $easing-width
@@ -131,6 +140,7 @@ $easing-width: 120px + 4px
width: 21px
height: 12px
overflow: hidden
+ z-index: 10
.rect
position: absolute
top: 0
@@ -222,6 +232,10 @@ $easing-width: 120px + 4px
// Slider
+.page-crop
+ overflow: hidden
+ margin: -10px 0 0 -10px
+ padding: 10px 0 0 10px
.easing-description
position: absolute
top: 0

0 comments on commit b3e6608

Please sign in to comment.
Something went wrong with that request. Please try again.