}
.button svg {
- padding-top: calc((var(--controlHeight) - 16px - 2px) / 2);
+ margin-top: calc((var(--controlHeight) - 16px - 2px) / 2);
}
.button-red,
.button-link {
display: inline;
- height: auto;
+ height: auto; /* Keep this to not inherit the height from .button */
margin: 0;
padding: 0;
border: none;
transition: all 0.2s ease;
}
+.button-link svg {
+ margin-top: 0;
+}
+
.button-link:hover,
.button-link:focus {
background: transparent;
) : (
<TagsList
allowUpdate={canWrite}
+ className="display-flex-center"
tags={allTags.length > 0 ? allTags : [translate('coding_rules.no_tags')]}
/>
)}
renderCreationDate = () => (
<li className="coding-rules-detail-property" data-meta="available-since">
- {translate('coding_rules.available_since')}{' '}
+ <span className="little-spacer-right">{translate('coding_rules.available_since')}</span>
<DateFormatter date={this.props.ruleDetails.createdAt} />
</li>
);
<div className="menu-search">
<SearchBox
autoFocus={true}
+ className="little-spacer-top"
onChange={this.handleSearchChange}
placeholder={this.props.placeholder}
value={query}
{selectedElements.length > 0 &&
selectedElements.map(element => (
<MultiSelectOption
- key={element}
- element={element}
- selected={true}
active={activeElement === element}
- onSelectChange={this.handleSelectChange}
+ element={element}
+ key={element}
onHover={this.handleElementHover}
+ onSelectChange={this.handleSelectChange}
+ selected={true}
/>
))}
{unselectedElements.length > 0 &&
unselectedElements.map(element => (
<MultiSelectOption
- key={element}
- element={element}
active={activeElement === element}
- onSelectChange={this.handleSelectChange}
+ element={element}
+ key={element}
onHover={this.handleElementHover}
+ onSelectChange={this.handleSelectChange}
/>
))}
{this.isNewElement(query, this.props) && (
<MultiSelectOption
- key={query}
- element={query}
- custom={true}
active={activeElement === query}
- onSelectChange={this.handleSelectChange}
+ custom={true}
+ element={query}
+ key={query}
onHover={this.handleElementHover}
+ onSelectChange={this.handleSelectChange}
/>
)}
</ul>
>
<SearchBox
autoFocus={true}
+ className="little-spacer-top"
onChange={[Function]}
placeholder=""
value=""
>
<SearchBox
autoFocus={true}
+ className="little-spacer-top"
onChange={[Function]}
placeholder=""
value=""
>
<SearchBox
autoFocus={true}
+ className="little-spacer-top"
onChange={[Function]}
placeholder=""
value=""
>
<SearchBox
autoFocus={true}
+ className="little-spacer-top"
onChange={[Function]}
placeholder=""
value="test"
render() {
return (
<BubblePopup
- position={this.props.popupPosition}
- customClass="bubble-popup-menu bubble-popup-bottom">
+ customClass="bubble-popup-menu bubble-popup-bottom"
+ position={this.props.popupPosition}>
<div className="multi-select">
<div className="menu-search">
<SearchBox
autoFocus={true}
+ className="little-spacer-top"
minLength={2}
onChange={this.handleSearchChange}
placeholder={translate('search.search_for_users')}
/>
</div>
<SelectList
- items={map(this.state.users, 'login')}
currentItem={this.state.currentUser}
+ items={map(this.state.users, 'login')}
onSelect={this.props.onSelect}>
{this.state.users.map(user => (
<SelectListItem key={user.login} item={user.login}>
padding: 0;
}
+.button-icon.button-icon.button-tiny svg {
+ margin-top: 0;
+}
+
.button-icon.button-icon:hover,
.button-icon.button-icon:focus {
background-color: currentColor;
<li class="coding-rules-detail-property coding-rules-detail-tag-list {{#if canWrite}}coding-rules-detail-tags-change{{/if}}"
data-toggle="tooltip" data-placement="bottom" title="Rule tags">
- <i class="icon-tags"></i>
+ <i class="icon-tags little-spacer-right"></i>
<span>{{#if allTags}}{{join allTags ', '}}{{else}}{{t 'coding_rules.no_tags'}}{{/if}}</span>
</li>
</li>
{{/if}}
- <li class="pull-right spacer-left">
+ <li class="coding-rules-detail-property spacer-left">
<a class="link-no-underline" target="_blank" href="{{permalink}}">
<svg
xmlns="http://www.w3.org/2000/svg"
/>
</svg>
</a>
- </li>
-
- <li class="pull-right">
- <span class="note">{{key}}</span>
+ <span class="note little-spacer-left">{{key}}</span>
</li>
</ul>