@neovici/cosmoz-input
Advanced tools
@neovici/cosmoz-input - npm Package Compare versions
Comparing version 1.4.4 to 1.5.0
| { | ||
| "name": "@neovici/cosmoz-input", | ||
| "version": "1.4.4", | ||
| "version": "1.5.0", | ||
| "description": "A input web component", | ||
@@ -64,4 +64,4 @@ "keywords": [ | ||
| "devDependencies": { | ||
| "@commitlint/cli": "^14.0.0", | ||
| "@commitlint/config-conventional": "^14.0.0", | ||
| "@commitlint/cli": "^15.0.0", | ||
| "@commitlint/config-conventional": "^15.0.0", | ||
| "@neovici/eslint-config": "^1.3.0", | ||
@@ -75,3 +75,2 @@ "@open-wc/demoing-storybook": "^2.1.0", | ||
| "@web/test-runner-selenium": "^0.5.0", | ||
| "eslint": "^8.0.0", | ||
| "husky": "^7.0.0", | ||
@@ -78,0 +77,0 @@ "semantic-release": "^18.0.0", |
| export const styles = ` | ||
| :host { | ||
| --font-family: var(--cosmoz-input-font-family, var(--paper-font-subhead_-_font-family, 'Roboto', 'Noto', sans-serif)); | ||
| --font-size: var(--cosmoz-input-font-size, var(--paper-font-subhead_-_font-size, 16px)); | ||
| --line-height: var(--cosmoz-input-line-height, var(--paper-font-subhead_-_line-height, 24px)); | ||
| --label-scale: var(--cosmoz-input-label-scale, 0.75); | ||
| --disabled-opacity: var(--cosmoz-input-disabled-opacity, var(--paper-input-container-disabled_-_opacity, 0.33)); | ||
| --disabled-line-opacity: var(--cosmoz-input-disabled-line-opacity, var(--paper-input-container-underline-disabled_-_opacity, 1)); | ||
| --invalid-color: var(--cosmoz-input-invalid-color, var(--paper-input-container-invalid-color, var(--error-color, #fc5c5b))); | ||
| --bg: var(--cosmoz-input-background); | ||
| --focused-bg: var(--cosmoz-input-focused-background, var(--bg)); | ||
| --color: var(--cosmoz-input-color, var(--secondary-text-color, #737373)); | ||
| --focused-color: var(--cosmoz-input-focused-color, var(--primary-color, #3f51b5)); | ||
| display: block; | ||
@@ -7,16 +19,17 @@ padding: 8px 0; | ||
| position: relative; | ||
| } | ||
| :host, label, #input { | ||
| font-family: var(--cosmoz-subhead-font-family, var(--paper-font-subhead_-_font-family, 'Roboto', 'Noto', sans-serif)); | ||
| font-size: var(--cosmoz-subhead-font-size, var(--paper-font-subhead_-_font-size, 16px)); | ||
| line-height: var(--cosmoz-subhead-line-height, var(--paper-font-subhead_-_line-height, 24px)); | ||
| display: block; | ||
| font-family: var(--font-family); | ||
| font-size: var(--font-size); | ||
| line-height: var(--line-height); | ||
| } | ||
| :host([disabled]) { | ||
| opacity: var(--cosmoz-input-disabled-opacity, var(--paper-input-container-disabled_-_opacity, 0.33)); | ||
| opacity: var(--disabled-opacity); | ||
| pointer-events: none; | ||
| } | ||
| .float { | ||
| line-height: calc(var(--line-height) * var(--label-scale)); | ||
| } | ||
| .wrap { | ||
@@ -40,7 +53,10 @@ display: flex; | ||
| max-width: 100%; | ||
| background: var(--cosmoz-input-background, initial); | ||
| display: block; | ||
| background: var(--bg); | ||
| line-height: inherit; | ||
| font-size: inherit; | ||
| } | ||
| :host(:focus-within) #input { | ||
| background: var(--cosmoz-input-focused-background, var(--cosmoz-input-background, initial)); | ||
| background: var(--focused-bg); | ||
| } | ||
@@ -54,3 +70,3 @@ label { | ||
| transform-origin: left top; | ||
| color: var(--secondary-text-color, #737373); | ||
| color: var(--color); | ||
| white-space: nowrap; | ||
@@ -63,17 +79,36 @@ overflow: hidden; | ||
| #input:not(:placeholder-shown) + label { | ||
| transform: translateY(-75%) scale(0.75); | ||
| transform: translateY(calc(var(--label-scale) * -100%)) scale(var(--label-scale)); | ||
| } | ||
| #input:not(:placeholder-shown):focus + label { | ||
| color: var(--primary-color, #3f51b5); | ||
| color: var(--focused-color); | ||
| } | ||
| .line { | ||
| border-bottom: 2px solid var(--secondary-text-color, #737373); | ||
| padding-top: 1px; | ||
| border-bottom: 1px solid var(--color); | ||
| position: relative; | ||
| } | ||
| .line::before { | ||
| content: ''; | ||
| position: absolute; | ||
| display: block; | ||
| border-bottom: 2px solid transparent; | ||
| border-bottom-color: inherit; | ||
| left: 0; | ||
| right: 0; | ||
| top: 0; | ||
| transform: scale3d(0,1,1); | ||
| transform-origin: center center; | ||
| z-index: 1; | ||
| } | ||
| :host(:focus-within) .line::before { | ||
| transform: none; | ||
| transition: 0.25s transform ease; | ||
| } | ||
| :host(:focus-within) .line { | ||
| border-bottom-color: var(--primary-color, #3f51b5); | ||
| border-bottom-color: var(--focused-color); | ||
| } | ||
| :host([disabled]) .line { | ||
| border-bottom-style: dashed; | ||
| opacity: var(--cosmoz-input-disabled-line-opacity, var(--paper-input-container-underline-disabled_-_opacity, 1)); | ||
| opacity: var(--disabled-line-opacity); | ||
| } | ||
@@ -95,6 +130,6 @@ | ||
| :host([invalid]) label, .error { | ||
| color: var(--paper-input-container-invalid-color, var(--error-color, #fc5c5b)); | ||
| color: var(--invalid-color); | ||
| } | ||
| :host([invalid]) .line { | ||
| border-bottom-color: var(--paper-input-container-invalid-color, var(--error-color, #fc5c5b)); | ||
| border-bottom-color: var(--invalid-color); | ||
| } | ||
@@ -101,0 +136,0 @@ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by7.87%
12446
- Dev dependency count
- decreased by-6.67%
14
- Lines of code
- increased by12.74%
292
No dependency changes