Menu separator styling

This commit is contained in:
wmwragg 2016-08-05 16:35:59 +01:00
parent b3459be707
commit 72ba708bfe
2 changed files with 23 additions and 9 deletions

View File

@ -100,17 +100,20 @@ module.exports = React.createClass({
var favouriteClasses = classNames({ var favouriteClasses = classNames({
'mx_RoomTagContextMenu_field': true, 'mx_RoomTagContextMenu_field': true,
'mx_RoomTagContextMenu_fieldDisabled': true, 'mx_RoomTagContextMenu_fieldSet': false,
'mx_RoomTagContextMenu_fieldDisabled': false,
}); });
var lowPriorityClasses = classNames({ var lowPriorityClasses = classNames({
'mx_RoomTagContextMenu_field': true, 'mx_RoomTagContextMenu_field': true,
'mx_RoomTagContextMenu_fieldSet': true, 'mx_RoomTagContextMenu_fieldSet': false,
'mx_RoomTagContextMenu_fieldDisabled': false,
}); });
var leaveClasses = classNames({ var leaveClasses = classNames({
'mx_RoomTagContextMenu_field': true, 'mx_RoomTagContextMenu_field': true,
'mx_RoomTagContextMenu_fieldDisabled': true, 'mx_RoomTagContextMenu_fieldSet': false,
'mx_RoomTagContextMenu_fieldDisabled': false,
}); });
return ( return (
@ -123,6 +126,7 @@ module.exports = React.createClass({
<img className="mx_RoomTagContextMenu_icon" src="img/icon-context-fave.svg" width="13" height="13" /> <img className="mx_RoomTagContextMenu_icon" src="img/icon-context-fave.svg" width="13" height="13" />
Low Priority Low Priority
</div> </div>
<hr className="mx_RoomTagContextMenu_separator" />
<div className={ leaveClasses } onClick={this._onClickLeave} > <div className={ leaveClasses } onClick={this._onClickLeave} >
<img className="mx_RoomTagContextMenu_icon" src="img/icon-context-fave.svg" width="13" height="13" /> <img className="mx_RoomTagContextMenu_icon" src="img/icon-context-fave.svg" width="13" height="13" />
Leave Leave

View File

@ -16,9 +16,8 @@ limitations under the License.
.mx_RoomTagContextMenu_field { .mx_RoomTagContextMenu_field {
padding-top: 4px; padding-top: 4px;
padding-right: 6px; padding-right: 20px;
padding-bottom: 10px; padding-bottom: 10px;
padding-left: 20px;
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
display: flex; display: flex;
@ -27,7 +26,6 @@ limitations under the License.
.mx_RoomTagContextMenu_field.mx_RoomTagContextMenu_fieldSet { .mx_RoomTagContextMenu_field.mx_RoomTagContextMenu_fieldSet {
font-weight: bold; font-weight: bold;
padding-left: 8px;
} }
.mx_RoomTagContextMenu_field.mx_RoomTagContextMenu_fieldDisabled { .mx_RoomTagContextMenu_field.mx_RoomTagContextMenu_fieldDisabled {
@ -35,10 +33,22 @@ limitations under the License.
} }
.mx_RoomTagContextMenu_icon { .mx_RoomTagContextMenu_icon {
padding-right: 4px; padding-right: 8px;
padding-left: 4px; padding-left: 4px;
} }
.mx_RoomTagContextMenu_fieldSet .mx_RoomTagContextMenu_icon { .mx_RoomTagContextMenu_separator {
margin-top: 0;
margin-bottom: 0;
border-bottom-style: none;
border-left-style: none;
border-right-style: none;
border-top-style: solid;
border-top-width: 1px;
border-color: #bbbbbb;
opacity: 0.4;
}
.mx_RoomTagContextMenu_fieldSet .mx_RoomTagContextMenu_icon {
/* Something to indicate that the icon is the set tag */
} }