diff --git a/components.js b/components.js index 22b2c41..c9f8760 100644 --- a/components.js +++ b/components.js @@ -292,7 +292,6 @@ border: none; --danger-color: red; --width: 100%; --icon-gap: 0.5rem; - --border-radius: 0.3rem; --background: rgba(var(--text-color, (17,17,17)), 0.06); } .hide{ @@ -328,7 +327,7 @@ button:focus{ position: relative; gap: var(--icon-gap); padding: var(--padding, 0.6rem 0.8rem); - border-radius: var(--border-radius); + border-radius: var(--border-radius,0.3rem); transition: opacity 0.3s, box-shadow 0.2s; background: var(--background); width: 100%; @@ -355,7 +354,6 @@ button:focus{ font-size: inherit; opacity: .7; font-weight: 400; - top: 0; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s, color .03; @@ -384,19 +382,20 @@ input{ border: none; background: transparent; outline: none; - color: rgba(var(--text-color, (17,17,17)), 1); + color: inherit; + font-family: inherit; width: 100%; caret-color: var(--accent-color, teal); } :host([animate]) .input:focus-within .container input, -.animate-label .container input { +.animate-placeholder .container input { -webkit-transform: translateY(0.6rem); -ms-transform: translateY(0.6rem); transform: translateY(0.6rem); } :host([animate]) .input:focus-within .label, - .animate-label .label { + .animate-placeholder .label { -webkit-transform: translateY(-0.7em) scale(0.8); -ms-transform: translateY(-0.7em) scale(0.8); transform: translateY(-0.7em) scale(0.8); @@ -407,7 +406,7 @@ input{ box-shadow: 0 0 0 1px var(--border-color, rgba(var(--text-color, (17,17,17)), 0.3)) inset; background: rgba(var(--background-color, (255,255,255)), 1); } -.animate-label:focus-within:not(.readonly) .label{ +.animate-placeholder:focus-within:not(.readonly) .label{ color: var(--accent-color,teal) } .feedback-text:not(:empty){ @@ -446,7 +445,7 @@ input{