From 576a64cb13cb33c8d496bfa84df05342bbbf5b25 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Sun, 27 Mar 2022 21:05:46 +0530 Subject: [PATCH] bug fixes --- components.js | 19 +++++++++---------- css/main.scss | 2 -- index.html | 7 ++++--- 3 files changed, 13 insertions(+), 15 deletions(-) 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{
-
@@ -607,12 +606,12 @@ customElements.define('sm-input', if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder').trim() === '') return; if (this.input.value !== '') { if (this.animate) - this.inputParent.classList.add('animate-label'); + this.inputParent.classList.add('animate-placeholder'); else this.label.classList.add('hide'); } else { if (this.animate) - this.inputParent.classList.remove('animate-label'); + this.inputParent.classList.remove('animate-placeholder'); else this.label.classList.remove('hide'); this.feedbackText.textContent = ''; diff --git a/css/main.scss b/css/main.scss index 6e1a82a..c6bca16 100644 --- a/css/main.scss +++ b/css/main.scss @@ -714,7 +714,6 @@ theme-toggle { overflow: hidden; } p { - // font-family: "Noto serif", serif; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; @@ -927,7 +926,6 @@ theme-toggle { } } p { - // font-family: "Noto serif", serif; font-size: 1.05rem; line-height: 1.7; * { diff --git a/index.html b/index.html index 9e1e7b8..107ccf7 100644 --- a/index.html +++ b/index.html @@ -10132,7 +10132,7 @@ } } -