matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

nicolium: styles updates

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2026-03-13 12:08:35 +01:00
parent 8c7e7fb553
commit 67145aa3e2
3 changed files with 104 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/nicolium/src/components/autosuggest-input.tsx
View File

@ -258,11 +258,10 @@ const AutosuggestInput: React.FC<IAutosuggestInput> = ({
const visible = !suggestionsHidden && (props.suggestions.length || (props.menu && props.value));
return [
<div key='input' className='relative w-full'>
<div key='input' className='⁂-autosuggest-input'>
<Input
type='text'
className={props.className}
outerClassName='mt-0'
ref={inputRef}
disabled={props.disabled}
placeholder={props.placeholder}

11
packages/nicolium/src/components/autosuggest-location.tsx
View File

@ -1,7 +1,6 @@
import React from 'react';
import Icon from '@/components/ui/icon';
import Text from '@/components/ui/text';
import type { Location } from 'pl-api';
@ -27,15 +26,15 @@ const AutosuggestLocation: React.FC<IAutosuggestLocation> = ({ location }) => {
if (!location) return null;
return (
<div className='flex items-center gap-2'>
<div className='⁂-autosuggest-location'>
<Icon src={ADDRESS_ICONS[location.type] || mapPinIcon} />
<div className='flex flex-col'>
<Text>{location.description}</Text>
<Text size='xs' theme='muted'>
<div>
<p>{location.description}</p>
<p>
{[location.street, location.locality, location.country]
.filter((val) => val?.trim())
.join(' · ')}
</Text>
</p>
</div>
</div>
);

187
packages/nicolium/src/styles/new/forms.scss
View File

@ -118,95 +118,6 @@
}
}
.⁂-input__wrapper {
position: relative;
margin-top: 0.25rem;
border-radius: 0.375rem;
&--search {
border-radius: 9999px;
}
&__icon {
pointer-events: none;
position: absolute;
top: 0;
bottom: 0;
inset-inline-start: 0;
display: flex;
align-items: center;
padding-inline-start: 0.75rem;
svg {
width: 1rem;
height: 1rem;
color: rgb(var(--color-gray-700));
.dark & {
color: rgb(var(--color-gray-600));
}
}
}
&__prepend {
position: absolute;
top: 0;
bottom: 0;
inset-inline-start: 0;
display: flex;
align-items: center;
}
&__append {
position: absolute;
top: 0;
bottom: 0;
inset-inline-end: 0;
display: flex;
align-items: center;
padding-inline: 0.75rem;
}
&__password-toggle {
position: absolute;
top: 0;
bottom: 0;
inset-inline-end: 0;
display: flex;
align-items: center;
button {
height: 100%;
padding-inline: 0.5rem;
color: rgb(var(--color-gray-700));
&:hover {
color: rgb(var(--color-gray-500));
}
&:focus {
outline: none;
box-shadow: inset 0 0 0 2px rgb(var(--color-primary-500));
}
.dark & {
color: rgb(var(--color-gray-600));
&:hover {
color: rgb(var(--color-gray-400));
}
}
}
}
}
.⁂-input {
display: block;
width: 100%;
@ -295,11 +206,109 @@
padding-inline-end: 2.5rem;
}
&__wrapper {
position: relative;
margin-top: 0.25rem;
border-radius: 0.375rem;
&--search {
border-radius: 9999px;
}
&__icon {
pointer-events: none;
position: absolute;
top: 0;
bottom: 0;
inset-inline-start: 0;
display: flex;
align-items: center;
padding-inline-start: 0.75rem;
svg {
width: 1rem;
height: 1rem;
color: rgb(var(--color-gray-700));
.dark & {
color: rgb(var(--color-gray-600));
}
}
}
&__prepend {
position: absolute;
top: 0;
bottom: 0;
inset-inline-start: 0;
display: flex;
align-items: center;
}
&__append {
position: absolute;
top: 0;
bottom: 0;
inset-inline-end: 0;
display: flex;
align-items: center;
padding-inline: 0.75rem;
}
&__password-toggle {
position: absolute;
top: 0;
bottom: 0;
inset-inline-end: 0;
display: flex;
align-items: center;
button {
height: 100%;
padding-inline: 0.5rem;
color: rgb(var(--color-gray-700));
&:hover {
color: rgb(var(--color-gray-500));
}
&:focus {
outline: none;
box-shadow: inset 0 0 0 2px rgb(var(--color-primary-500));
}
.dark & {
color: rgb(var(--color-gray-600));
&:hover {
color: rgb(var(--color-gray-400));
}
}
}
}
}
@media (min-width: variables.$breakpoint-sm) {
font-size: 0.875rem;
}
}
.⁂-autosuggest-input {
position: relative;
width: 100%;
.⁂-input__wrapper {
margin-top: 0;
}
}
.⁂-form-group {
&__label {
display: block;