refactor tooltip styling
This commit is contained in:
parent
a99238b25b
commit
0284830085
|
@ -180,23 +180,8 @@ export default function Collections(props: CollectionProps) {
|
|||
const renderTooltip = (collectionID: number) => {
|
||||
const fileCount = props.collectionFilesCount?.get(collectionID) ?? 0;
|
||||
return (
|
||||
<Tooltip
|
||||
style={{
|
||||
padding: '0',
|
||||
paddingBottom: '5px',
|
||||
}}
|
||||
id="button-tooltip">
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#282828',
|
||||
padding: '2px 10px',
|
||||
margin: 0,
|
||||
color: '#ddd',
|
||||
borderRadius: 3,
|
||||
fontSize: '12px',
|
||||
}}>
|
||||
{fileCount} {fileCount > 1 ? 'items' : 'item'}
|
||||
</div>
|
||||
<Tooltip id="button-tooltip">
|
||||
{fileCount} {fileCount > 1 ? 'items' : 'item'}
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -358,12 +358,9 @@ const GlobalStyles = createGlobalStyle`
|
|||
.list-group-item:active , list-group-item:focus{
|
||||
background-color:#000 !important;
|
||||
}
|
||||
.arrow::after{
|
||||
#button-tooltip > .arrow::before{
|
||||
border-bottom-color:#282828 !important;
|
||||
}
|
||||
.arrow::before{
|
||||
border-top-color:#282828 !important;
|
||||
}
|
||||
.carousel-inner {
|
||||
padding-bottom: 50px !important;
|
||||
}
|
||||
|
@ -407,8 +404,15 @@ const GlobalStyles = createGlobalStyle`
|
|||
-webkit-transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
#button-tooltip{
|
||||
color: #ddd;
|
||||
border-radius: 5px;
|
||||
font-size: 12px;
|
||||
padding:0px
|
||||
}
|
||||
.tooltip-inner{
|
||||
padding:0px;
|
||||
background-color: #282828;
|
||||
margin:6px 0;
|
||||
}
|
||||
.react-datepicker__input-container > input {
|
||||
width:100%;
|
||||
|
|
Loading…
Reference in a new issue