From d457eb2a8778d23bf98a8593b5083a2750b0e05a Mon Sep 17 00:00:00 2001 From: Benjamin Barenblat Date: Mon, 16 Jan 2017 16:05:48 -0500 Subject: Add ripple effect to checkboxes --- material/material.css | 34 ++++++++++++++++++++++++++++++++-- material/material.ur | 45 ++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 74 insertions(+), 5 deletions(-) diff --git a/material/material.css b/material/material.css index cf66a8e..0a762f2 100644 --- a/material/material.css +++ b/material/material.css @@ -19,6 +19,11 @@ html, body { font-family: Roboto; } +.Material_stackingContext { + position: absolute; + z-index: 0; +} + .Material_AppBar_bar { background: #9c27b0; height: 56px; @@ -50,18 +55,36 @@ html, body { .Material_Checkbox_checkbox { display: block; - width: 24px; - height: 24px; box-sizing: border-box; border: 2px solid #9c27b0; border-radius: 2px; transition: background 300ms; + + /* These must match the width and height defined in Material.Checkbox. */ + width: 24px; + height: 24px; } .Material_Checkbox_checked { background: #9c27b0 url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K); } +.Material_Checkbox_ink { + display: block; + position: fixed; + transform: scale(0); + background: #9c27b0; /* TODO(bbaren): Is this the correct color? */ + border-radius: 100%; + animation: ripple 300ms linear; + + /* These must match the width and height defined in Material.Checkbox. */ + width: 24px; + height: 24px; + + /* Place the ripple effect underneath the checkmark. */ + z-index: -1; +} + .Material_List_SingleLine_element { list-style-type: none; height: 48px; @@ -81,3 +104,10 @@ html, body { margin: 8px 16px; padding: 0; } + +@keyframes ripple { + to { + opacity: 0; + transform: scale(2); + } +} diff --git a/material/material.ur b/material/material.ur index eb4f971..72a3e98 100644 --- a/material/material.ur +++ b/material/material.ur @@ -1,5 +1,5 @@ (* Copyright 2015 Google Inc. -Copyright 2016 Benjamin Barenblat +Copyright 2016, 2017 Benjamin Barenblat Licensed under the Apache License, Version 2.0 (the “License”); you may not use this file except in compliance with the License. You may obtain a copy of the @@ -12,6 +12,10 @@ under the License is distributed on an “AS IS” BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. *) +style stackingContext + +fun inNewStackingContext x =
{x}
 + (* TODO(bbaren): Support attributes in the arguments. *) fun page p = @@ -44,16 +48,51 @@ end structure Checkbox = struct style checkbox style checked + style container + style ink + + (* Pixel dimensions of the checkbox. If you update these, you must also + update the CSS file. *) + val width = 24 + val height = 24 + + fun centeredAtXY x y : css_style = + let + val x' = x - width / 2 + val y' = y - width / 2 + in + oneProperty (oneProperty + noStyle + (value (property "left") (atom (show x' ^ "px")))) + (value (property "top") (atom (show y' ^ "px"))) + end + + fun inkAnimation (s : source (option {X : int, Y : int})) = + + + | Some xy => + + ) + } + /> + val make c onChange = s <- source c; - return + inkCenter <- source None; + return (inNewStackingContext + {inkAnimation inkCenter} + set inkCenter (Some {X = click.ClientX, Y = click.ClientY}); c <- get s; let val c' = not c @@ -64,7 +103,7 @@ structure Checkbox = struct } > - + ) end structure List = struct -- cgit v1.2.3