sonot
/
PteroTheme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Raw styling needed for mass actions bar

This commit is contained in:
Dane Everitt 2022-02-26 22:06:47 -05:00
parent 308a7f3a90
commit e02f4b8433
No known key found for this signature in database
GPG Key ID: EEA66103B3D71F53
3 changed files with 29 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
resources/scripts/components/admin/users/UsersContainerV2.tsx
View File

@ -51,13 +51,27 @@ const UsersContainerV2 = () => {
<Button.Danger>Delete</Button.Danger> <Button.Danger>Delete</Button.Danger>
</Dialog.Buttons> </Dialog.Buttons>
</Dialog> </Dialog>
<div className={'flex items-center rounded-t bg-neutral-700 px-4 py-2'}> <div className={'relative flex items-center rounded-t bg-neutral-700 px-4 py-2'}>
<div className={'mr-6'}> <div className={'mr-6'}>
<Checkbox /> <Checkbox />
</div> </div>
<div className={'flex-1'}> <div className={'flex-1'}>
<InputField type={'text'} name={'filter'} placeholder={'Begin typing to filter...'} className={'w-56 focus:w-96'} /> <InputField type={'text'} name={'filter'} placeholder={'Begin typing to filter...'} className={'w-56 focus:w-96'} />
</div> </div>
<div className={'absolute rounded-t bg-neutral-700 w-full h-full top-0 left-0 flex items-center justify-end space-x-4 px-4'}>
<div className={'flex-1'}>
<Checkbox indeterminate />
</div>
<Button.Text square>
<SupportIcon className={'w-4 h-4'} />
</Button.Text>
<Button.Text square>
<LockOpenIcon className={'w-4 h-4'} />
</Button.Text>
<Button.Text square>
<TrashIcon className={'w-4 h-4'} />
</Button.Text>
</div>
</div> </div>
<table className={'min-w-full rounded bg-neutral-700'}> <table className={'min-w-full rounded bg-neutral-700'}>
<thead className={'bg-neutral-900'}> <thead className={'bg-neutral-900'}>

12
resources/scripts/components/elements/inputs/Checkbox.tsx
View File

@ -2,12 +2,18 @@ import React, { forwardRef } from 'react';
import styles from './inputs.module.css'; import styles from './inputs.module.css';
import classNames from 'classnames'; import classNames from 'classnames';
type Props = Omit<React.ComponentProps<'input'>, 'type'> type Props = Omit<React.ComponentProps<'input'>, 'type'> & {
indeterminate?: boolean;
}
export default forwardRef<HTMLInputElement, Props>(({ className, ...props }, ref) => ( export default forwardRef<HTMLInputElement, Props>(({ className, indeterminate, ...props }, ref) => (
<input <input
ref={ref} ref={ref}
type={'checkbox'} type={'checkbox'}
className={classNames('form-checkbox', styles.checkbox, className)} {...props} className={classNames('form-checkbox', {
[styles.checkbox]: true,
[styles.indeterminate]: indeterminate,
}, className)}
{...props}
/> />
)); ));

5
resources/scripts/components/elements/inputs/inputs.module.css
View File

@ -4,6 +4,11 @@
&:focus, &:active { &:focus, &:active {
@apply ring-2 ring-primary-500 ring-offset-2 ring-offset-neutral-700; @apply ring-2 ring-primary-500 ring-offset-2 ring-offset-neutral-700;
} }
&.indeterminate:checked {
@apply text-primary-500/50 border border-primary-500;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M5 10a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z' clip-rule='evenodd' /%3E%3C/svg%3E");
}
} }
.text_input { .text_input {