diff --git a/css-compiled/material.css b/css-compiled/material.css index 59685fbf..081a85fc 100644 --- a/css-compiled/material.css +++ b/css-compiled/material.css @@ -1698,28 +1698,27 @@ fieldset[disabled] .navbar .btn-link:focus { border-bottom-color: #323232; } .snackbar { - display: inline-block; - position: fixed; - z-index: 99999; - left: 20px; - bottom: 0; - min-width: 288px; - max-width: 568px; - padding: 14px 15px; - margin-bottom: 20px; + background-color: #323232; color: #ffffff; font-size: 14px; - background-color: #323232; border-radius: 2px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); - opacity: 0; - -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in; - transition: transform 0.2s ease-in-out, opacity 0.2s ease-in; + height: 0; + -moz-transition: -moz-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, padding 0 linear 0.2s, height 0 linear 0.2s; + -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, padding 0 linear 0.2s, height 0 linear 0.2s; + transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, padding 0 linear 0.2s, height 0 linear 0.2s; + -moz-transform: translateY(200%); -webkit-transform: translateY(200%); transform: translateY(200%); } .snackbar.snackbar-opened { - opacity: 1; + padding: 14px 15px; + margin-bottom: 20px; + height: auto; + -moz-transition: -moz-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s; + -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s; + transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, height 0 linear 0.2s; + -moz-transform: none; -webkit-transform: none; transform: none; } diff --git a/less/popups.less b/less/popups.less index 72a0f570..3fc0538c 100644 --- a/less/popups.less +++ b/less/popups.less @@ -61,3 +61,8 @@ -webkit-transform: none; transform: none; } + +// Variations +.snackbar.toast { + border-radius: 200px; +}