forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-04-20 13:36:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed links and some form styles

Browse Source
This commit is contained in:
Alejandro Celaya
2022-03-05 14:04:01 +01:00
parent f4fa1582a7
commit ec403d7b1f
10 changed files with 38 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/utils/BooleanControl.tsx
View File

@@ -20,15 +20,15 @@ const BooleanControl: FC<BooleanControlWithTypeProps> = (
const { current: id } = useRef(uuid());
const onChecked = (e: ChangeEvent<HTMLInputElement>) => onChange(e.target.checked, e);
const typeClasses = {
'custom-switch': type === 'switch',
'custom-checkbox': type === 'checkbox',
'form-switch': type === 'switch',
'form-checkbox': type === 'checkbox',
};
const style = inline ? { display: 'inline-block' } : {};
return (
<span className={classNames('custom-control', typeClasses, className)} style={style}>
<input type="checkbox" className="custom-control-input" id={id} checked={checked} onChange={onChecked} />
<label className="custom-control-label" htmlFor={id}>{children}</label>
<span className={classNames('form-check', typeClasses, className)} style={style}>
<input type="checkbox" className="form-check-input" id={id} checked={checked} onChange={onChecked} />
<label className="form-check-label" htmlFor={id}>{children}</label>
</span>
);
};

3
src/utils/FormText.tsx Normal file
View File

@@ -0,0 +1,3 @@
import { FC } from 'react';
export const FormText: FC = ({ children }) => <small className="form-text text-muted d-block">{children}</small>;

7
src/utils/NavPills.scss
View File

@@ -6,13 +6,14 @@
z-index: 2;
}
.nav-pills__nav-link {
.nav-pills__nav-link.nav-pills__nav-link {
border-radius: 0 !important;
padding-bottom: calc(.5rem - 3px) !important;
border-bottom: 3px solid transparent;
border-bottom: 3px solid transparent !important;
color: #5d6778;
font-weight: 700;
cursor: pointer;
text-decoration: none;
@media (min-width: $smMin) and (max-width: $mdMax) {
font-size: 89%;
@@ -24,7 +25,7 @@
}
.nav-pills__nav-link.active {
border-color: $mainColor;
border-color: $mainColor !important;
background-color: var(--primary-color) !important;
color: $mainColor !important;
}