diff --git a/src/components/mdInputContainer/mdInputContainer.scss b/src/components/mdInputContainer/mdInputContainer.scss index d162a8c..a30b3c4 100644 --- a/src/components/mdInputContainer/mdInputContainer.scss +++ b/src/components/mdInputContainer/mdInputContainer.scss @@ -23,7 +23,7 @@ $input-size: 32px; label { position: absolute; top: 23px; - left: 2px; + left: 0; pointer-events: none; transition: $swift-ease-out; transition-duration: .3s; @@ -35,11 +35,12 @@ $input-size: 32px; input { width: 100%; height: $input-size; + padding: 0; display: block; border: none; background: none; border-bottom: 1px solid rgba(#000, .12); - transition: .3s $swift-ease-out-timing-function; + transition: $swift-ease-out; transition-property: font-size, line-height; color: rgba(#000, .54); font-size: 0; @@ -48,30 +49,56 @@ $input-size: 32px; &:focus { outline: none; } - - &::-webkit-input-placeholder { - position: relative; - top: 6px; - color: rgba(#000, .54); - font-size: 16px; - line-height: $input-size; - text-shadow: none; - -webkit-text-fill-color: initial; - } } } .md-input-focused, .md-has-value { + label { + pointer-events: auto; + top: 0; + font-size: 12px; + } + input { font-size: 16px; line-height: $input-size; } +} - label { - pointer-events: auto; - top: 0; - left: 0; - font-size: 12px; +.md-has-value { + input { + color: rgba(#000, .87); + } +} + +.md-input-inline { + &.md-input-focused { + label { + top: 23px; + font-size: 16px; + } + } + + &.md-has-value { + label { + opacity: 0; + } + } +} + +.md-input-disabled { + label, + input { + color: rgba(#000, .38); + } + + input { + color: rgba(#000, .38); + border-bottom-color: transparent; + background-image: linear-gradient(to right, rgba(#000, .38) 0%, rgba(#000, .38) 33%, transparent 0%); + background-position: bottom -1px left 0; + background-size: 4px 1px; + background-repeat: repeat-x; } } diff --git a/src/components/mdInputContainer/mdInputContainer.theme b/src/components/mdInputContainer/mdInputContainer.theme index 97210fa..6ccec52 100644 --- a/src/components/mdInputContainer/mdInputContainer.theme +++ b/src/components/mdInputContainer/mdInputContainer.theme @@ -2,6 +2,12 @@ .md-input-container, &.md-input-container { &.md-input-focused { + &.md-input-inline { + label { + color: rgba(#000, .54); + } + } + &:after { height: 2px; background-color: PRIMARY-COLOR; @@ -14,7 +20,6 @@ } label { - opacity: 1; color: PRIMARY-COLOR; } } diff --git a/src/components/mdInputContainer/mdInputContainer.vue b/src/components/mdInputContainer/mdInputContainer.vue index 5fbd3a3..2f6a784 100644 --- a/src/components/mdInputContainer/mdInputContainer.vue +++ b/src/components/mdInputContainer/mdInputContainer.vue @@ -1,5 +1,5 @@ @@ -8,10 +8,13 @@ diff --git a/src/docs/pages/Input.vue b/src/docs/pages/Input.vue index 70846ba..41dba8b 100644 --- a/src/docs/pages/Input.vue +++ b/src/docs/pages/Input.vue @@ -2,11 +2,25 @@
- + - + + + + + + + + + + + + + + visibility_off
@@ -21,10 +35,13 @@ export default { data() { return { - test: '' + disabledInput: false }; }, methods: { + toggleDisabled() { + this.disabledInput = !this.disabledInput; + }, togglePassword() { let passwordField = document.querySelector('#password'); let type = passwordField.type;