Packages
noora
0.10.0
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.0
0.18.0
0.17.0
0.16.0
0.15.0
0.14.0
0.13.0
0.12.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
css/text-input.css
.noora-text-input {
display: flex;
flex-direction: column;
align-self: stretch;
gap: var(--noora-spacing-3);
& [data-part="wrapper"] {
display: flex;
align-items: center;
align-self: stretch;
gap: var(--noora-spacing-4);
cursor: text;
box-shadow: var(--noora-border-light-default);
border-radius: var(--noora-radius-medium);
background: var(--noora-surface-background-primary);
padding: var(--noora-spacing-3) var(--noora-spacing-4);
& input {
flex-grow: 1;
outline: none;
border: none;
background: none;
font: var(--noora-font-body-medium);
&:not(:disabled) {
color: var(--noora-surface-label-primary);
}
&:not(:disabled)::placeholder {
color: var(--noora-surface-label-tertiary);
}
}
& [data-part="prefix"],
& [data-part="suffix"],
& [data-part="suffix-hint"] {
display: flex;
}
& [data-part="prefix"] {
width: var(--noora-icon-size-large);
height: var(--noora-icon-size-large);
& svg {
width: 100%;
height: 100%;
}
}
& [data-part="suffix"],
& [data-part="suffix-hint"] {
color: var(--noora-surface-label-secondary);
& button {
cursor: pointer;
outline: none;
border: none;
background: none;
padding: 0;
color: var(--noora-surface-label-secondary);
&:hover {
color: var(--noora-surface-label-primary);
}
}
&:not([data-type="card_number"]) {
height: var(--noora-icon-size-large);
& svg {
width: var(--noora-icon-size-large);
height: var(--noora-icon-size-large);
}
}
&[data-type="card_number"] {
box-shadow: 0px -2px 0px 0px oklch(100% 0 0 / 0.16) inset;
fill: var(--noora-neutral-light-600);
filter: drop-shadow(0px 2px 2px oklch(20.9% 0.009 264.4 / 0.04));
width: 24px;
height: 18px;
}
}
& [data-part="suffix-hint"] {
position: relative;
& [data-part="trigger"] {
cursor: help;
}
& [data-part="content"] {
position: absolute;
}
}
&:has(> input:disabled) {
cursor: not-allowed;
color: var(--noora-surface-label-disabled);
}
&:not(:has(> input:disabled)) {
& [data-part="prefix"] {
color: var(--noora-surface-label-primary);
}
&:hover {
background: var(--noora-surface-background-secondary);
}
}
&:has(> input:focus) {
box-shadow: var(--noora-border-light-focus);
}
&[data-error] {
box-shadow: var(--noora-border-light-error);
}
&[data-error]:has(> input:focus) {
box-shadow: var(--noora-border-light-error-focus);
}
&[data-type="password"]:has(> input[type="text"]) {
.noora-text-input__password-toggle-text {
display: none;
}
.noora-text-input__password-toggle-password {
display: block;
}
}
&[data-type="password"]:has(> input[type="password"]) {
.noora-text-input__password-toggle-text {
display: block;
}
.noora-text-input__password-toggle-password {
display: none;
}
}
}
}
.noora-digit-input {
padding: var(--noora-spacing-6);
& [data-part="root"] {
display: flex;
gap: var(--noora-spacing-5);
}
& input {
--border:
0px 1px 1px 0px
light-dark(
oklch(20.9% 0.009 264.4 / 0.05),
oklch(20.9% 0.009 264.4 / 0.3)
),
0px 0px 0px 1px
light-dark(
oklch(31.8% 0.011 248.2 / 0.08),
oklch(53.1% 0.01 264.5 / 0.45)
),
0px 1px 1px 0px
light-dark(
oklch(31.8% 0.011 248.2 / 0.1),
oklch(53.1% 0.01 264.5 / 0.45)
);
display: inline-flex;
box-sizing: border-box;
box-shadow: var(--border);
border: 0;
border-radius: var(--noora-radius-large);
background: var(--noora-surface-background-primary);
padding: var(--noora-spacing-5) 0;
width: 56px;
color: var(--noora-surface-label-primary);
font: var(--noora-font-heading-large);
text-align: center;
&:hover {
background: var(--noora-surface-background-secondary);
}
&:focus {
--border:
0px 1px 1px 0px
light-dark(
oklch(20.9% 0.009 264.4 / 0.05),
oklch(20.9% 0.009 264.4 / 0.2)
),
0px 0px 0px 1px
lihgt-dark(
oklch(31.8% 0.011 248.2 / 0.08),
oklch(53.1% 0.01 264.5 / 0.3)
),
0px 1px 3px 0px
light-dark(oklch(31.8% 0.011 248.2 / 0.1), oklch(0% 0 0 / 0.3)),
0px 0px 0px 3px
light-dark(
oklch(31.8% 0.011 248.2 / 0.12),
oklch(53.1% 0.01 264.5 / 0.4)
);
outline: none;
}
&[data-disabled] {
cursor: not-allowed;
background: var(--noora-surface-background-secondary);
color: var(--noora-surface-label-disabled);
}
&[data-error] {
--border:
0px 1px 1px 0px
light-dark(
oklch(20.9% 0.009 264.4 / 0.05),
oklch(20.9% 0.009 264.4 / 0.2)
),
0px 0px 0px 1px
light-dark(oklch(58.7% 0.23 30.7), oklch(74% 0.159 30.9)),
0px 1px 3px 0px
light-dark(oklch(31.8% 0.011 248.2 / 0.1), oklch(0% 0 0 / 0.3));
&:focus {
--border:
0px 1px 1px 0px
light-dark(
oklch(20.9% 0.009 264.4 / 0.05),
oklch(20.9% 0.009 264.4 / 0.2)
),
0px 0px 0px 1px
light-dark(oklch(58.7% 0.23 30.7), oklch(74% 0.159 30.9)),
0px 1px 3px 0px
light-dark(oklch(31.8% 0.011 248.2 / 0.1), oklch(0% 0 0 / 0.3)),
0px 0px 0px 3px
light-dark(
oklch(58.7% 0.23 30.7 / 0.2),
oklch(74% 0.159 30.9 / 0.25)
);
}
}
}
}