update input styles (bmf)

Chrisdo82 · Apr 9, 2024 · 14c01c7 · 14c01c7
1 parent 8482701
commit 14c01c7
Show file tree

Hide file tree

Showing 17 changed files with 454 additions and 346 deletions.
diff --git a/packages/samples/react/src/components/input-checkbox/partials/cases.tsx b/packages/samples/react/src/components/input-checkbox/partials/cases.tsx
@@ -38,6 +38,15 @@ export const InputCheckboxCases = forwardRef<HTMLKolInputCheckboxElement, Compon
 				_tooltipAlign="right"
 				_value={true}
 			/>
+			<KolInputCheckbox
+				{...props}
+				_checked
+				_icons={{
+					unchecked: 'codicon codicon-close',
+				}}
+				_label={'Mit sehr langem Label und Umbrüchen '.repeat(5)}
+				_value={true}
+			/>
 			<KolInputCheckbox
 				{...props}
 				_disabled

diff --git a/packages/samples/react/src/components/input-password/show-password.tsx b/packages/samples/react/src/components/input-password/show-password.tsx
@@ -44,6 +44,25 @@ export const InputPasswordShowPassword: FC = () => {
 					}}
 					className="block"
 				/>
+				<KolInputPassword
+					_placeholder="Mit 'Passwort anzeigen' Button und disabled"
+					_label="Passwort"
+					ref={passwordRef}
+					_smartButton={{
+						_icons: {
+							left: {
+								icon: 'codicon codicon-eye',
+							},
+						},
+						_hideLabel: true,
+						_label: `Passwort ${isPasswordVisible ? 'ausblenden' : 'einblenden'}`,
+						_on: {
+							onClick: handleTogglePasswordClick,
+						},
+					}}
+					className="block"
+					_disabled
+				/>
 			</KolForm>
 		</>
 	);

diff --git a/packages/samples/react/src/components/textarea/partials/cases.tsx b/packages/samples/react/src/components/textarea/partials/cases.tsx
@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 
-import { KolTextarea } from '@public-ui/react';
+import { KolInputText, KolTextarea } from '@public-ui/react';
 
 import { ERROR_MSG } from '../../../shares/constants';
 
@@ -10,6 +10,9 @@ export const TextareaCases = forwardRef<HTMLKolTextareaElement, Components.KolTe
 		<div className="grid gap-4">
 			<KolTextarea {...props} _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Text" _touched />
 			<KolTextarea {...props} ref={ref} _accessKey="T" _label="Text (3 rows)" _rows={3} />
+			<KolTextarea {...props} ref={ref} _label="Text (placeholder)" _rows={3} _placeholder="Placeholder" />
+			<KolTextarea {...props} ref={ref} _label="Text (disabled & placeholder)" _rows={3} _placeholder="Placeholder" _disabled />
+			<KolTextarea {...props} ref={ref} _label="Text (disabled & value)" _rows={3} _placeholder="Placeholder" _value="Lorem ipsum" _disabled />
 		</div>
 	);
 });
diff --git a/packages/themes/bmf/src/components/alert.scss b/packages/themes/bmf/src/components/alert.scss
@@ -217,6 +217,7 @@
 	}
 
 	.card > .content {
+		color: var(--color-black);
 		padding: 1rem;
 		max-height: 9.5rem;
 		overflow-y: auto;

diff --git a/packages/themes/bmf/src/components/input-checkbox.scss b/packages/themes/bmf/src/components/input-checkbox.scss
@@ -26,6 +26,8 @@
 		display: inherit;
 		min-height: 44px;
 		order: 2;
+		height: 100%;
+		align-items: baseline;
 	}
 
 	:host .kol-input > div.input input {
@@ -42,6 +44,9 @@
 
 	:host .kol-input > label {
 		order: 3;
+		height: 100%;
+		padding-top: 0.75rem;
+		color: var(--color-black);
 	}
 
 	:host .kol-input > .kol-alert-wc.error {
@@ -77,13 +82,19 @@
 		font-size: 1rem;
 	}
 
+	:host kol-icon:hover ~ input,
 	:host input:hover {
 		border-color: var(--color-midnight);
 		box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);
 	}
 
-	:host input:focus:hover {
-		box-shadow: none;
+	:host input {
+		&:focus {
+			border-color: var(--color-midnight);
+		}
+		&:hover {
+			box-shadow: none;
+		}
 	}
 
 	:host input:active {

diff --git a/packages/themes/bmf/src/components/input-color.scss b/packages/themes/bmf/src/components/input-color.scss
@@ -13,6 +13,7 @@
 
 	.kol-input label {
 		order: 2;
+		color: var(--color-black);
 	}
 
 	.kol-input .input {
@@ -48,7 +49,7 @@
 		border-radius: var(--border-radius);
 		border-style: solid;
 		border-width: 2px;
-		padding: 0 0.5em;
+		padding: 0 1em;
 	}
 
 	.input > .kol-icon {
@@ -90,6 +91,9 @@
 	.kol-input.error .input {
 		border-color: var(--color-red);
 		border-width: 3px;
+		&:hover {
+			border-color: var(--color-midnight);
+		}
 	}
 
 	.kol-input.error:not(.hidden-error) {

diff --git a/packages/themes/bmf/src/components/input-date.scss b/packages/themes/bmf/src/components/input-date.scss
@@ -13,6 +13,7 @@
 
 	.kol-input label {
 		order: 2;
+		color: var(--color-black);
 	}
 
 	.kol-input .input {
@@ -33,13 +34,17 @@
 		color: var(--color-grey);
 	}
 
+	input::-webkit-datetime-edit {
+		color: var(--color-grey);
+	}
+
 	.input {
 		background-color: var(--color-white);
 		border-color: var(--color-grey);
 		border-radius: var(--border-radius);
 		border-style: solid;
 		border-width: 2px;
-		padding: 0 0.5em;
+		padding: 0 1em;
 	}
 
 	.input > .kol-icon {
@@ -80,6 +85,10 @@
 	.kol-input.error .input {
 		border-color: var(--color-red);
 		border-width: 3px;
+
+		&:hover {
+			border-color: var(--color-midnight);
+		}
 	}
 
 	.kol-input.error:not(.hidden-error) {

diff --git a/packages/themes/bmf/src/components/input-email.scss b/packages/themes/bmf/src/components/input-email.scss
@@ -13,6 +13,7 @@
 
 	.kol-input label {
 		order: 2;
+		color: var(--color-black);
 	}
 
 	.kol-input .input {
@@ -39,7 +40,7 @@
 		border-radius: var(--border-radius);
 		border-style: solid;
 		border-width: 2px;
-		padding: 0 0.5em;
+		padding: 0 1em;
 	}
 
 	.input > .kol-icon {
@@ -80,6 +81,10 @@
 	.kol-input.error .input {
 		border-color: var(--color-red);
 		border-width: 3px;
+
+		&:hover {
+			border-color: var(--color-midnight);
+		}
 	}
 
 	.kol-input.error:not(.hidden-error) {

diff --git a/packages/themes/bmf/src/components/input-file.scss b/packages/themes/bmf/src/components/input-file.scss
@@ -13,6 +13,7 @@
 
 	.kol-input label {
 		order: 2;
+		color: var(--color-black);
 	}
 
 	.kol-input .input {
@@ -47,7 +48,7 @@
 		border-radius: var(--border-radius);
 		border-style: solid;
 		border-width: 2px;
-		padding: 0 0.5em;
+		padding: 0 1em;
 	}
 
 	.input > .kol-icon {
@@ -88,6 +89,10 @@
 	.kol-input.error .input {
 		border-color: var(--color-red);
 		border-width: 3px;
+
+		&:hover {
+			border-color: var(--color-midnight);
+		}
 	}
 
 	.kol-input.error:not(.hidden-error) {

diff --git a/packages/themes/bmf/src/components/input-number.scss b/packages/themes/bmf/src/components/input-number.scss
@@ -13,6 +13,7 @@
 
 	.kol-input label {
 		order: 2;
+		color: var(--color-black);
 	}
 
 	.kol-input .input {
@@ -39,7 +40,7 @@
 		border-radius: var(--border-radius);
 		border-style: solid;
 		border-width: 2px;
-		padding: 0 0.5em;
+		padding: 0 1em;
 	}
 
 	.input > .kol-icon {
@@ -80,6 +81,10 @@
 	.kol-input.error .input {
 		border-color: var(--color-red);
 		border-width: 3px;
+
+		&:hover {
+			border-color: var(--color-midnight);
+		}
 	}
 
 	.kol-input.error:not(.hidden-error) {

diff --git a/packages/themes/bmf/src/components/input-password.scss b/packages/themes/bmf/src/components/input-password.scss
@@ -13,6 +13,7 @@
 
 	.kol-input label {
 		order: 2;
+		color: var(--color-black);
 	}
 
 	.kol-input .input {
@@ -39,16 +40,16 @@
 		border-radius: var(--border-radius);
 		border-style: solid;
 		border-width: 2px;
-		padding: 0 0.5em;
+		padding: 0 1em;
 	}
 
 	.input > .kol-icon {
 		width: 1em;
 	}
 
 	.input:is(.icon-left, .icon-right) {
-		padding-left: 1em;
-		padding-right: 1em;
+		padding-left: 0.875em;
+		padding-left: 0.875em;
 	}
 
 	.input:is(.icon-left, .icon-right) input {
@@ -80,6 +81,10 @@
 	.kol-input.error .input {
 		border-color: var(--color-red);
 		border-width: 3px;
+
+		&:hover {
+			border-color: var(--color-midnight);
+		}
 	}
 
 	.kol-input.error:not(.hidden-error) {
@@ -98,6 +103,13 @@
 		color: var(--color-black);
 	}
 
+	kol-button-wc {
+		margin-right: -0.875em;
+	}
+	.kol-input.disabled .kol-button-wc {
+		display: none;
+	}
+
 	.msg {
 		border-width: 0 !important;
 	}

diff --git a/packages/themes/bmf/src/components/input-radio.scss b/packages/themes/bmf/src/components/input-radio.scss
@@ -6,7 +6,6 @@
 	/* INPUT */
 	.kol-input {
 		display: grid;
-		gap: 0.4em;
 	}
 
 	label {
@@ -59,6 +58,7 @@
 		padding: 0px;
 		display: grid;
 		gap: 0.25em;
+		color: var(--color-black);
 	}
 
 	.radio-input-wrapper {
@@ -99,8 +99,12 @@
 		display: block;
 	}
 
-	.radio-input-wrapper input[type='radio']:checked:before {
-		background-color: var(--color-midnight);
+	.radio-input-wrapper input[type='radio']:checked {
+		border-color: var(--color-midnight);
+
+		&:before {
+			background-color: var(--color-midnight);
+		}
 	}
 
 	.radio-input-wrapper input[type='radio']:disabled {
@@ -144,7 +148,7 @@
 	fieldset.horizontal {
 		display: flex;
 		flex-wrap: wrap;
-		gap: 0.5rem 1rem;
+		gap: 0.5rem 1.5rem;
 	}
 
 	fieldset.horizontal legend {

diff --git a/packages/themes/bmf/src/components/input-range.scss b/packages/themes/bmf/src/components/input-range.scss
@@ -13,6 +13,7 @@
 
 	.kol-input label {
 		order: 2;
+		color: var(--color-black);
 	}
 
 	.kol-input .input {
@@ -75,6 +76,10 @@
 	.kol-input.error .input {
 		border-color: var(--color-red);
 		border-width: 3px;
+
+		&:hover {
+			border-color: var(--color-midnight);
+		}
 	}
 
 	.kol-input.error:not(.hidden-error) {