diff --git a/.tooling/eleventy/includes/base.njk b/.tooling/eleventy/includes/base.njk
index 29c3f406..6611b21b 100644
--- a/.tooling/eleventy/includes/base.njk
+++ b/.tooling/eleventy/includes/base.njk
@@ -11,18 +11,15 @@
{% baseHref %}
+
-
-
- {# #}
+
-
-
- {# #}
+
diff --git a/package-lock.json b/package-lock.json
index 47b8dad8..0ccd2b0e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "@capitec/omni-components",
- "version": "0.7.13",
+ "version": "0.7.14",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@capitec/omni-components",
- "version": "0.7.13",
+ "version": "0.7.14",
"license": "MIT",
"dependencies": {
"lit": "^2.3.1",
diff --git a/package.json b/package.json
index 2555e416..8770f09c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@capitec/omni-components",
- "version": "0.7.13",
+ "version": "0.8.0",
"type": "module",
"description": "Modern UI component library for mobile and web",
"scripts": {
diff --git a/src/currency-field/CurrencyField.ts b/src/currency-field/CurrencyField.ts
index 4098476c..ef859cc2 100644
--- a/src/currency-field/CurrencyField.ts
+++ b/src/currency-field/CurrencyField.ts
@@ -555,7 +555,7 @@ export class CurrencyField extends OmniFormElement {
}
.field.error {
- color: var(--omni-currency-field-error-font-color);
+ color: var(--omni-currency-field-error-font-color, var(--omni-font-color));
}
.label {
diff --git a/src/date-picker/DatePicker.ts b/src/date-picker/DatePicker.ts
index 748deb00..7b7e70b6 100644
--- a/src/date-picker/DatePicker.ts
+++ b/src/date-picker/DatePicker.ts
@@ -240,130 +240,130 @@ export class DatePicker extends OmniFormElement {
return [
super.styles,
css`
- /* Added to ensure that component has pointer cursor applied */
- :host {
- cursor: pointer;
- }
-
- .field {
- flex: 1 1 auto;
-
- border: none;
- background: none;
- box-shadow: none;
- outline: 0;
- padding: 0;
- margin: 0;
-
- text-align: var(--omni-date-picker-text-align, left);
-
- color: var(--omni-date-picker-font-color, var(--omni-font-color));
- font-family: var(--omni-date-picker-font-family, var(--omni-font-family));
- font-size: var(--omni-date-picker-font-size, var(--omni-font-size));
- font-weight: var(--omni-date-picker-font-weight, var(--omni-font-weight));
- height: var(--omni-date-picker-height, 100%);
- padding: var(--omni-date-picker-padding, 10px);
- width: var(--omni-date-picker-width);
- min-width: var(--omni-date-picker-min-width, 242px);
+ /* Added to ensure that component has pointer cursor applied */
+ :host {
+ cursor: pointer;
+ }
- cursor: pointer;
- }
+ .field {
+ flex: 1 1 auto;
- .field.disabled {
- color: var(--omni-date-picker-disabled-font-color, #7C7C7C);
- }
-
- .field.error {
- color: var(--omni-date-picker-error-font-color);
- }
+ border: none;
+ background: none;
+ box-shadow: none;
+ outline: 0;
+ padding: 0;
+ margin: 0;
- /* Styles for the control and control icon */
+ text-align: var(--omni-date-picker-text-align, left);
- .control {
- display: inline-flex;
- flex: 0 0 auto;
- align-items: center;
- cursor: pointer;
- padding: var(--omni-date-picker-control-padding, 10px 10px);
- }
+ color: var(--omni-date-picker-font-color, var(--omni-font-color));
+ font-family: var(--omni-date-picker-font-family, var(--omni-font-family));
+ font-size: var(--omni-date-picker-font-size, var(--omni-font-size));
+ font-weight: var(--omni-date-picker-font-weight, var(--omni-font-weight));
+ height: var(--omni-date-picker-height, 100%);
+ padding: var(--omni-date-picker-padding, 10px);
+ width: var(--omni-date-picker-width);
+ min-width: var(--omni-date-picker-min-width, 242px);
- .control:hover {
- background-color: var(--omni-date-picker-control-hover-color, var(--omni-accent-hover-color));
- }
+ cursor: pointer;
+ }
+ .field.disabled {
+ color: var(--omni-date-picker-disabled-font-color, #7C7C7C);
+ }
+
+ .field.error {
+ color: var(--omni-date-picker-error-font-color, var(--omni-font-color));
+ }
- .control-icon,
- ::slotted([slot='calendar']){
- width: var(--omni-date-picker-control-icon-width, 20px);
- height: var(--omni-date-picker-control-icon-height, 20px);
- fill: var(--omni-date-picker-control-icon-color, var(--omni-primary-color));
- cursor: pointer;
- }
+ /* Styles for the control and control icon */
- .control-icon.error {
- fill: var(--omni-date-picker-control-icon-error-color, var(--omni-error-font-color));
- }
+ .control {
+ display: inline-flex;
+ flex: 0 0 auto;
+ align-items: center;
+ cursor: pointer;
+ padding: var(--omni-date-picker-control-padding, 10px 10px);
+ }
- .left-border {
- width: var(--omni-date-picker-control-left-border-width, 1px);
- background-color: var(--omni-date-picker-control-left-border-color,var(--omni-form-border-color));
- }
+ .control:hover {
+ background-color: var(--omni-date-picker-control-hover-color, var(--omni-accent-hover-color));
+ }
- .layout:focus-within > .left-border {
- width: var(--omni-date-picker-control-left-focused-border-width, 2px);
- background-color: var(--omni-date-picker-control-left-focused-color, var(--omni-primary-color));
- }
- .left-border.error {
- background-color: var(--omni-date-picker-control-left-border-error-color, var(--omni-error-font-color));
- }
+ .control-icon,
+ ::slotted([slot='calendar']){
+ width: var(--omni-date-picker-control-icon-width, 20px);
+ height: var(--omni-date-picker-control-icon-height, 20px);
+ fill: var(--omni-date-picker-control-icon-color, var(--omni-primary-color));
+ cursor: pointer;
+ }
- /* Styles related to the picker container*/
- .picker-container {
- z-index: var(--omni-date-picker-container-z-index, 420);
- }
+ .control-icon.error {
+ fill: var(--omni-date-picker-control-icon-error-color, var(--omni-error-font-color));
+ }
- /* Picker dialog mobile*/
- @media screen and (max-width: 766px) {
-
- .picker-dialog {
- position: fixed;
- top: inherit;
- width: 100%;
- margin: unset;
- border-style: none;
- padding: unset;
- left: var(--omni-date-picker-mobile-picker-dialog-left, 0px);
- right: var(--omni-date-picker-mobile-picker-dialog-right, 0px);
- bottom: var(--omni-date-picker-mobile-picker-dialog-bottom, 0px);
+ .left-border {
+ width: var(--omni-date-picker-control-left-border-width, 1px);
+ background-color: var(--omni-date-picker-control-left-border-color,var(--omni-form-border-color));
}
-
- .picker-dialog:modal{
- max-width: 100%;
- overflow: none;
+
+ .layout:focus-within > .left-border {
+ width: var(--omni-date-picker-control-left-focused-border-width, 2px);
+ background-color: var(--omni-date-picker-control-left-focused-color, var(--omni-primary-color));
}
- .picker-dialog::backdrop {
- background: var(--omni-date-picker-mobile-picker-dialog-background-color, rgba(0, 0, 0, 0.1));
+ .left-border.error {
+ background-color: var(--omni-date-picker-control-left-border-error-color, var(--omni-error-font-color));
}
- }
- /* Desktop and landscape tablet device styling, if element is at the bottom of the screen make items render above the input */
- @media screen and (min-width: 767px) {
+ /* Styles related to the picker container*/
.picker-container {
- position: absolute;
- cursor: default;
- transition: 1s;
- width: var(--omni-date-picker-container-width, 100%);
- top: var(--omni-date-picker-container-top, 102%);
+ z-index: var(--omni-date-picker-container-z-index, 420);
}
- /* Styles if the element is at the bottom of the screen then render the picker on top of the element */
- .picker-container.bottom {
- top: var(--omni-date-picker-container-render-bottom-top, -2%);
- transform: translateY(-100%);
- }
- }
+ /* Picker dialog mobile*/
+ @media screen and (max-width: 766px) {
+
+ .picker-dialog {
+ position: fixed;
+ top: inherit;
+ width: 100%;
+ margin: unset;
+ border-style: none;
+ padding: unset;
+ left: var(--omni-date-picker-mobile-picker-dialog-left, 0px);
+ right: var(--omni-date-picker-mobile-picker-dialog-right, 0px);
+ bottom: var(--omni-date-picker-mobile-picker-dialog-bottom, 0px);
+ }
+
+ .picker-dialog:modal{
+ max-width: 100%;
+ overflow: none;
+ }
+
+ .picker-dialog::backdrop {
+ background: var(--omni-date-picker-mobile-picker-dialog-background-color, rgba(0, 0, 0, 0.1));
+ }
+ }
+
+ /* Desktop and landscape tablet device styling, if element is at the bottom of the screen make items render above the input */
+ @media screen and (min-width: 767px) {
+ .picker-container {
+ position: absolute;
+ cursor: default;
+ transition: 1s;
+ width: var(--omni-date-picker-container-width, 100%);
+ top: var(--omni-date-picker-container-top, 102%);
+ }
+
+ /* Styles if the element is at the bottom of the screen then render the picker on top of the element */
+ .picker-container.bottom {
+ top: var(--omni-date-picker-container-render-bottom-top, -2%);
+ transform: translateY(-100%);
+ }
+ }
`
];
}
diff --git a/src/email-field/EmailField.ts b/src/email-field/EmailField.ts
index 8084a7ab..594c1297 100644
--- a/src/email-field/EmailField.ts
+++ b/src/email-field/EmailField.ts
@@ -81,36 +81,36 @@ export class EmailField extends OmniFormElement {
return [
super.styles,
css`
- .field {
- flex: 1 1 auto;
+ .field {
+ flex: 1 1 auto;
- border: none;
- background: none;
- box-shadow: none;
- outline: 0;
- padding: 0;
- margin: 0;
+ border: none;
+ background: none;
+ box-shadow: none;
+ outline: 0;
+ padding: 0;
+ margin: 0;
- text-align: var(--omni-email-field-text-align, left);
+ text-align: var(--omni-email-field-text-align, left);
- color: var(--omni-email-field-font-color, var(--omni-font-color));
- font-family: var(--omni-email-field-font-family, var(--omni-font-family));
- font-size: var(--omni-email-field-font-size, var(--omni-font-size));
- font-weight: var(--omni-email-field-font-weight, var(--omni-font-weight));
- padding: var(--omni-email-field-padding, 10px);
+ color: var(--omni-email-field-font-color, var(--omni-font-color));
+ font-family: var(--omni-email-field-font-family, var(--omni-font-family));
+ font-size: var(--omni-email-field-font-size, var(--omni-font-size));
+ font-weight: var(--omni-email-field-font-weight, var(--omni-font-weight));
+ padding: var(--omni-email-field-padding, 10px);
- height: var(--omni-email-field-height, 100%);
- width: var(--omni-email-field-width, 100%);
- }
-
- .field.disabled {
- color: var(--omni-email-field-disabled-font-color, #7C7C7C);
- }
+ height: var(--omni-email-field-height, 100%);
+ width: var(--omni-email-field-width, 100%);
+ }
+
+ .field.disabled {
+ color: var(--omni-email-field-disabled-font-color, #7C7C7C);
+ }
- .field.error {
- color: var(--omni-email-field-error-font-color);
- }
- `
+ .field.error {
+ color: var(--omni-email-field-error-font-color, var(--omni-font-color));
+ }
+ `
];
}
diff --git a/src/number-field/NumberField.ts b/src/number-field/NumberField.ts
index 1cd4cb57..2b304f1e 100644
--- a/src/number-field/NumberField.ts
+++ b/src/number-field/NumberField.ts
@@ -92,48 +92,48 @@ export class NumberField extends OmniFormElement {
return [
super.styles,
css`
- .field {
- flex: 1 1 auto;
-
- border: none;
- background: none;
- box-shadow: none;
- outline: 0;
- padding: 0;
- margin: 0;
-
- text-align: var(--omni-number-field-text-align, left);
-
- color: var(--omni-number-field-font-color, var(--omni-font-color));
- font-family: var(--omni-number-field-font-family, var(--omni-font-family));
- font-size: var(--omni-number-field-font-size, var(--omni-font-size));
- font-weight: var(--omni-number-field-font-weight, var(--omni-font-weight));
- padding: var(--omni-number-field-padding, 10px);
-
- height: var(--omni-number-field-height, 100%);
- width: var(--omni-number-field-width, 100%);
- }
-
- .field.disabled {
- color: var(--omni-number-field-disabled-font-color, #7C7C7C);
- }
-
- .field.error {
- color: var(--omni-number-field-error-font-color)
- }
-
- /* Used to not display default stepper */
- input::-webkit-outer-spin-button,
- input::-webkit-inner-spin-button {
- /* display: none; <- Crashes Chrome on hover */
- -webkit-appearance: none;
- margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
- }
-
- input[type='number'] {
- -moz-appearance: textfield; /* Firefox */
- }
- `
+ .field {
+ flex: 1 1 auto;
+
+ border: none;
+ background: none;
+ box-shadow: none;
+ outline: 0;
+ padding: 0;
+ margin: 0;
+
+ text-align: var(--omni-number-field-text-align, left);
+
+ color: var(--omni-number-field-font-color, var(--omni-font-color));
+ font-family: var(--omni-number-field-font-family, var(--omni-font-family));
+ font-size: var(--omni-number-field-font-size, var(--omni-font-size));
+ font-weight: var(--omni-number-field-font-weight, var(--omni-font-weight));
+ padding: var(--omni-number-field-padding, 10px);
+
+ height: var(--omni-number-field-height, 100%);
+ width: var(--omni-number-field-width, 100%);
+ }
+
+ .field.disabled {
+ color: var(--omni-number-field-disabled-font-color, #7C7C7C);
+ }
+
+ .field.error {
+ color: var(--omni-number-field-error-font-color, var(--omni-font-color));
+ }
+
+ /* Used to not display default stepper */
+ input::-webkit-outer-spin-button,
+ input::-webkit-inner-spin-button {
+ /* display: none; <- Crashes Chrome on hover */
+ -webkit-appearance: none;
+ margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
+ }
+
+ input[type='number'] {
+ -moz-appearance: textfield; /* Firefox */
+ }
+ `
];
}
diff --git a/src/password-field/PasswordField.ts b/src/password-field/PasswordField.ts
index 4da58828..98999d1a 100644
--- a/src/password-field/PasswordField.ts
+++ b/src/password-field/PasswordField.ts
@@ -119,67 +119,67 @@ export class PasswordField extends OmniFormElement {
return [
super.styles,
css`
- .control-box {
- display: flex;
- align-items: center;
- justify-content: center;
- cursor: pointer;
-
- padding-right: var(--omni-password-field-control-padding-right, 10px);
- padding-left: var(--omni-password-field-control-padding-left, 10px);
- padding-top: var(--omni-password-field-control-padding-top, 0px);
- padding-bottom: var(--omni-password-field-control-padding-bottom, 0px);
- }
-
- .hide-icon,
- .show-icon {
- fill: var(--omni-password-field-icon-color, var(--omni-primary-color));
- }
-
- .hide-icon,
- .show-icon,
- ::slotted([slot='show']),
- ::slotted([slot='hide']) {
- width: var(--omni-password-field-icon-width, 24px);
- height: var(--omni-password-field-icon-height, 24px);
- }
-
- /* Prevent default icon from displaying in password field on Edge browser */
- input::-ms-reveal,
- input::-ms-clear {
- display: none;
- }
-
- .field {
- flex: 1 1 auto;
-
- border: none;
- background: none;
- box-shadow: none;
- outline: 0;
- padding: 0;
- margin: 0;
-
- text-align: var(--omni-password-field-text-align, left);
-
- color: var(--omni-password-field-font-color, var(--omni-font-color));
- font-family: var(--omni-password-field-font-family, var(--omni-font-family));
- font-size: var(--omni-password-field-font-size, var(--omni-font-size));
- font-weight: var(--omni-password-field-font-weight, var(--omni-font-weight));
- padding: var(--omni-password-field-padding, 10px);
-
- height: var(--omni-password-field-height, 100%);
- width: var(--omni-password-field-width, 100%);
- }
-
- .field.disabled {
- color: var(--omni-password-field-disabled-font-color, #7C7C7C);
- }
-
- .field.error {
- color: var(--omni-password-field-error-font-color);
- }
- `
+ .control-box {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+
+ padding-right: var(--omni-password-field-control-padding-right, 10px);
+ padding-left: var(--omni-password-field-control-padding-left, 10px);
+ padding-top: var(--omni-password-field-control-padding-top, 0px);
+ padding-bottom: var(--omni-password-field-control-padding-bottom, 0px);
+ }
+
+ .hide-icon,
+ .show-icon {
+ fill: var(--omni-password-field-icon-color, var(--omni-primary-color));
+ }
+
+ .hide-icon,
+ .show-icon,
+ ::slotted([slot='show']),
+ ::slotted([slot='hide']) {
+ width: var(--omni-password-field-icon-width, 24px);
+ height: var(--omni-password-field-icon-height, 24px);
+ }
+
+ /* Prevent default icon from displaying in password field on Edge browser */
+ input::-ms-reveal,
+ input::-ms-clear {
+ display: none;
+ }
+
+ .field {
+ flex: 1 1 auto;
+
+ border: none;
+ background: none;
+ box-shadow: none;
+ outline: 0;
+ padding: 0;
+ margin: 0;
+
+ text-align: var(--omni-password-field-text-align, left);
+
+ color: var(--omni-password-field-font-color, var(--omni-font-color));
+ font-family: var(--omni-password-field-font-family, var(--omni-font-family));
+ font-size: var(--omni-password-field-font-size, var(--omni-font-size));
+ font-weight: var(--omni-password-field-font-weight, var(--omni-font-weight));
+ padding: var(--omni-password-field-padding, 10px);
+
+ height: var(--omni-password-field-height, 100%);
+ width: var(--omni-password-field-width, 100%);
+ }
+
+ .field.disabled {
+ color: var(--omni-password-field-disabled-font-color, #7C7C7C);
+ }
+
+ .field.error {
+ color: var(--omni-password-field-error-font-color, var(--omni-font-color));
+ }
+ `
];
}
diff --git a/src/pin-field/PinField.ts b/src/pin-field/PinField.ts
index 14e2c26a..534ac705 100644
--- a/src/pin-field/PinField.ts
+++ b/src/pin-field/PinField.ts
@@ -194,80 +194,79 @@ export class PinField extends OmniFormElement {
return [
super.styles,
css`
- .control-box {
- display: flex;
- align-items: center;
- justify-content: center;
- cursor: pointer;
-
- padding-right: var(--omni-pin-field-control-padding-right, 10px);
- padding-left: var(--omni-pin-field-control-padding-left, 10px);
- padding-top: var(--omni-pin-field-control-padding-top, 0px);
- padding-bottom: var(--omni-pin-field-control-padding-bottom, 0px);
- }
-
- .hide-icon,
- .show-icon {
- fill: var(--omni-pin-field-icon-color, var(--omni-primary-color));
- }
-
- .hide-icon,
- .show-icon,
- ::slotted([slot='show']),
- ::slotted([slot='hide']) {
- width: var(--omni-pin-field-icon-width, 24px);
- height: var(--omni-pin-field-icon-height, 24px);
- }
-
- .field {
- flex: 1 1 auto;
-
- border: none;
- background: none;
- box-shadow: none;
- outline: 0;
- padding: 0;
- margin: 0;
-
- text-align: var(--omni-pin-field-text-align, left);
-
- color: var(--omni-pin-field-font-color, var(--omni-font-color));
- font-family: var(--omni-pin-field-font-family, var(--omni-font-family));
- font-size: var(--omni-pin-field-font-size, var(--omni-font-size));
- font-weight: var(--omni-pin-field-font-weight, var(--omni-font-weight));
- padding: var(--omni-pin-field-padding, 10px);
-
- height: var(--omni-pin-field-height, 100%);
- width: var(--omni-pin-field-width, 100%);
-
- -webkit-text-security:disc;
-
- }
-
- .field.disabled {
- color: var(--omni-pin-field-disabled-font-color, #7C7C7C);
- }
-
- .field.error {
- color: var(--omni-pin-field-error-font-color);
- }
-
- .show {
- -webkit-text-security:none;
- }
-
- /* Used to not display default stepper */
- input::-webkit-outer-spin-button,
- input::-webkit-inner-spin-button {
- /* display: none; <- Crashes Chrome on hover */
- -webkit-appearance: none;
- margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
- }
-
- input[type='number'] {
- -moz-appearance: textfield; /* Firefox */
- }
- `
+ .control-box {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+
+ padding-right: var(--omni-pin-field-control-padding-right, 10px);
+ padding-left: var(--omni-pin-field-control-padding-left, 10px);
+ padding-top: var(--omni-pin-field-control-padding-top, 0px);
+ padding-bottom: var(--omni-pin-field-control-padding-bottom, 0px);
+ }
+
+ .hide-icon,
+ .show-icon {
+ fill: var(--omni-pin-field-icon-color, var(--omni-primary-color));
+ }
+
+ .hide-icon,
+ .show-icon,
+ ::slotted([slot='show']),
+ ::slotted([slot='hide']) {
+ width: var(--omni-pin-field-icon-width, 24px);
+ height: var(--omni-pin-field-icon-height, 24px);
+ }
+
+ .field {
+ flex: 1 1 auto;
+
+ border: none;
+ background: none;
+ box-shadow: none;
+ outline: 0;
+ padding: 0;
+ margin: 0;
+
+ text-align: var(--omni-pin-field-text-align, left);
+
+ color: var(--omni-pin-field-font-color, var(--omni-font-color));
+ font-family: var(--omni-pin-field-font-family, var(--omni-font-family));
+ font-size: var(--omni-pin-field-font-size, var(--omni-font-size));
+ font-weight: var(--omni-pin-field-font-weight, var(--omni-font-weight));
+ padding: var(--omni-pin-field-padding, 10px);
+
+ height: var(--omni-pin-field-height, 100%);
+ width: var(--omni-pin-field-width, 100%);
+
+ -webkit-text-security:disc;
+ }
+
+ .field.disabled {
+ color: var(--omni-pin-field-disabled-font-color, #7C7C7C);
+ }
+
+ .field.error {
+ color: var(--omni-pin-field-error-font-color, var(--omni-font-color));
+ }
+
+ .show {
+ -webkit-text-security:none;
+ }
+
+ /* Used to not display default stepper */
+ input::-webkit-outer-spin-button,
+ input::-webkit-inner-spin-button {
+ /* display: none; <- Crashes Chrome on hover */
+ -webkit-appearance: none;
+ margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
+ }
+
+ input[type='number'] {
+ -moz-appearance: textfield; /* Firefox */
+ }
+ `
];
}
diff --git a/src/search-field/SearchField.ts b/src/search-field/SearchField.ts
index 410ca48e..1ced6890 100644
--- a/src/search-field/SearchField.ts
+++ b/src/search-field/SearchField.ts
@@ -115,7 +115,7 @@ export class SearchField extends OmniFormElement {
}
.field.error {
- color: var(--omni-search-field-error-font-color);
+ color: var(--omni-search-field-error-font-color, var(--omni-font-color));
}
.search-icon {
diff --git a/src/select/Select.ts b/src/select/Select.ts
index c4840433..ed5ebf06 100644
--- a/src/select/Select.ts
+++ b/src/select/Select.ts
@@ -406,7 +406,7 @@ export class Select extends OmniFormElement {
}
.field.error {
- color: var(--omni-select-field-error-font-color);
+ color: var(--omni-select-field-error-font-color, var(--omni-font-color));
}
.control {
diff --git a/src/text-field/TextField.ts b/src/text-field/TextField.ts
index 64fbc1a9..6970fb39 100644
--- a/src/text-field/TextField.ts
+++ b/src/text-field/TextField.ts
@@ -74,35 +74,35 @@ export class TextField extends OmniFormElement {
return [
super.styles,
css`
- .field {
- flex: 1 1 auto;
+ .field {
+ flex: 1 1 auto;
- border: none;
- background: none;
- box-shadow: none;
- outline: 0;
- padding: 0;
- margin: 0;
+ border: none;
+ background: none;
+ box-shadow: none;
+ outline: 0;
+ padding: 0;
+ margin: 0;
- text-align: var(--omni-text-field-text-align, left);
+ text-align: var(--omni-text-field-text-align, left);
- color: var(--omni-text-field-font-color, var(--omni-font-color));
- font-family: var(--omni-text-field-font-family, var(--omni-font-family));
- font-size: var(--omni-text-field-font-size, var(--omni-font-size));
- font-weight: var(--omni-text-field-font-weight, var(--omni-font-weight));
- padding: var(--omni-text-field-padding, 10px);
- height: var(--omni-text-field-height, 100%);
- width: var(--omni-text-field-width, 100%);
- }
+ color: var(--omni-text-field-font-color, var(--omni-font-color));
+ font-family: var(--omni-text-field-font-family, var(--omni-font-family));
+ font-size: var(--omni-text-field-font-size, var(--omni-font-size));
+ font-weight: var(--omni-text-field-font-weight, var(--omni-font-weight));
+ padding: var(--omni-text-field-padding, 10px);
+ height: var(--omni-text-field-height, 100%);
+ width: var(--omni-text-field-width, 100%);
+ }
- .field.disabled {
- color: var(--omni-text-field-disabled-font-color, #7C7C7C);
- }
+ .field.disabled {
+ color: var(--omni-text-field-disabled-font-color, #7C7C7C);
+ }
- .field.error {
- color: var(--omni-text-field-error-font-color);
- }
- `
+ .field.error {
+ color: var(--omni-text-field-error-font-color, var(--omni-font-color));
+ }
+ `
];
}