ted/recogito-client-core
ted
/
recogito-client-core
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

IE11-specific style tweaks

This commit is contained in:
Rainer Simon 2020-09-06 08:52:44 +02:00
parent 095da4cc7a
commit fd4fb6cdb1
2 changed files with 40 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/editor/widgets/tag/TagWidget.jsx
View File

@ -32,25 +32,27 @@ const TagWidget = props => {
return ( return (
<div className="r6o-widget tag"> <div className="r6o-widget tag">
{ tagBodies.length > 0 && <div>
<ul className="r6o-taglist"> { tagBodies.length > 0 &&
{ tagBodies.map(tag => <ul className="r6o-taglist">
<li key={tag.value} onClick={toggle(tag.value)}> { tagBodies.map(tag =>
<span className="label">{tag.value}</span> <li key={tag.value} onClick={toggle(tag.value)}>
<span className="label">{tag.value}</span>
{!props.readOnly && {!props.readOnly &&
<CSSTransition in={showDelete === tag.value} timeout={200} classNames="delete"> <CSSTransition in={showDelete === tag.value} timeout={200} classNames="delete">
<span className="delete-wrapper" onClick={onDelete(tag)}> <span className="delete-wrapper" onClick={onDelete(tag)}>
<span className="delete"> <span className="delete">
<CloseIcon width={12} /> <CloseIcon width={12} />
</span>
</span> </span>
</span> </CSSTransition>
</CSSTransition> }
} </li>
</li> )}
)} </ul>
</ul> }
} </div>
{ !props.readOnly && { !props.readOnly &&
<Autocomplete <Autocomplete

14
themes/default/editor/widgets/tag/_tag.scss
View File

@ -2,6 +2,20 @@
display:none; display:none;
} }
/* IE11-specific hackery */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.r6o-widget.tag .r6o-taglist li {
height:27px;
.delete-wrapper .delete {
position:relative;
top:-4px;
}
}
}
.r6o-widget.tag { .r6o-widget.tag {
background-color:$blueish-white; background-color:$blueish-white;
border-bottom:1px solid $lightgrey-border; border-bottom:1px solid $lightgrey-border;