diff --git a/css-compiled/material.css b/css-compiled/material.css index 90f58c9a..9455cb3d 100644 --- a/css-compiled/material.css +++ b/css-compiled/material.css @@ -682,40 +682,6 @@ h6, border-top-color: #5a5a5a; } } -.keyframe-check 100% { - top: -3px; - left: 17px; - width: 10px; - height: 21px; - transform: rotate(45deg); - border-color: #0f9d58; - border-left-color: transparent; - border-top-color: transparent; -} -.keyframe-check 51% { - border-left: transparent; - border-top-color: transparent; -} -.keyframe-check 50% { - top: 14px; - left: 17px; - width: 4px; - height: 4px; - transform: rotate(45deg); - border-color: #5a5a5a; - border-left-color: #5a5a5a; - border-top-color: #5a5a5a; -} -.keyframe-check 0% { - top: 1px; - left: 12px; - width: 18px; - height: 18px; - transform: rotate(0deg); - border-color: #5a5a5a; - border-left-color: #5a5a5a; - border-top-color: #5a5a5a; -} @-webkit-keyframes check { 100% { top: -3px; @@ -896,15 +862,6 @@ h6, border-top-color: #5a5a5a; } } -.ripple 0% { - opacity: 0; -} -.ripple 50% { - opacity: 0.2; -} -.ripple 100% { - opacity: 0; -} @-webkit-keyframes rippleOn { 0% { opacity: 0; @@ -1298,6 +1255,7 @@ h6, left: 0; pointer-events: none; opacity: 0.9; + transform-origin: left; } .form-control-wrapper .input-lg ~ .material-input:after { height: 26px; @@ -1313,6 +1271,7 @@ h6, animation: input-highlight 0.3s ease; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; + opacity: 0; } .form-control-wrapper select ~ .material-input:before { bottom: 1px; @@ -1656,6 +1615,76 @@ select.form-control:focus { box-shadow: none; border-color: #757575; } +@-webkit-keyframes input-highlight { + 0% { + left: 20%; + transform: scaleX(20%); + } + 99% { + transform: scaleX(0); + left: 0; + opacity: 1; + } + 100% { + opacity: 0; + } +} +@-moz-keyframes input-highlight { + 0% { + left: 20%; + transform: scaleX(20%); + } + 99% { + transform: scaleX(0); + left: 0; + opacity: 1; + } + 100% { + opacity: 0; + } +} +@-ms-keyframes input-highlight { + 0% { + left: 20%; + transform: scaleX(20%); + } + 99% { + transform: scaleX(0); + left: 0; + opacity: 1; + } + 100% { + opacity: 0; + } +} +@-o-keyframes input-highlight { + 0% { + left: 20%; + transform: scaleX(20%); + } + 99% { + transform: scaleX(0); + left: 0; + opacity: 1; + } + 100% { + opacity: 0; + } +} +@keyframes input-highlight { + 0% { + left: 20%; + transform: scaleX(20%); + } + 99% { + transform: scaleX(0); + left: 0; + opacity: 1; + } + 100% { + opacity: 0; + } +} legend { border-bottom: 0; } diff --git a/less/checkboxes.less b/less/checkboxes.less index 2290249b..da4335a5 100644 --- a/less/checkboxes.less +++ b/less/checkboxes.less @@ -112,7 +112,7 @@ } } -.keyframe-check { +.keyframe-check() { 100% { top: -3px; left: 17px; @@ -154,7 +154,7 @@ @-o-keyframes check {.keyframe-check()} @keyframes check {.keyframe-check()} -.ripple{ +.ripple() { 0% { opacity: 0; } diff --git a/less/inputs.less b/less/inputs.less index 9b00778f..3360da59 100644 --- a/less/inputs.less +++ b/less/inputs.less @@ -80,6 +80,7 @@ left: 0; pointer-events: none; opacity: 0.9; + transform-origin: left; } .input-lg ~ .material-input:after { height: 26px; @@ -95,6 +96,7 @@ animation: input-highlight 0.3s ease; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; + opacity: 0; } select ~ .material-input:before { @@ -173,3 +175,25 @@ select.form-control { border-color: #757575; } } + + +.keyframe-input-highlight() { + 0% { + left: 20%; + transform: scaleX(20%); + } + 99% { + transform: scaleX(0); + left: 0; + opacity: 1; + } + 100% { + opacity: 0; + } +} + +@-webkit-keyframes input-highlight {.keyframe-input-highlight()} +@-moz-keyframes input-highlight {.keyframe-input-highlight()} +@-ms-keyframes input-highlight {.keyframe-input-highlight()} +@-o-keyframes input-highlight {.keyframe-input-highlight()} +@keyframes input-highlight {.keyframe-input-highlight()}