skin RoomSubList chevrons, horizontal rules and selected room
This commit is contained in:
Matthew Hodgson
parent
8557a3b70e
commit
96c4a24d3d
11 changed files with 58 additions and 36 deletions
|
|
@ -278,7 +278,7 @@ var RoomSubList = React.createClass({
|
|||
return (
|
||||
<h2 onClick={ this.onClick } className="mx_RoomSubList_label">
|
||||
{ this.props.collapsed ? '' : this.props.label }
|
||||
<TintableSvg className="mx_RoomSubList_chevron"
|
||||
<img className="mx_RoomSubList_chevron"
|
||||
src={ this.state.hidden ? "img/list-close.svg" : "img/list-open.svg" }
|
||||
width="10" height="10" />
|
||||
</h2>
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@ limitations under the License.
|
|||
margin: auto;
|
||||
|
||||
overflow: auto;
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
|
||||
-webkit-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
|
|
@ -158,7 +158,7 @@ limitations under the License.
|
|||
margin-bottom: 8px;
|
||||
margin-left: 63px;
|
||||
padding-bottom: 6px;
|
||||
border-bottom: 1px solid #eee;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.mx_RoomView_invitePrompt {
|
||||
|
|
@ -212,7 +212,7 @@ hr.mx_RoomView_myReadMarker {
|
|||
|
||||
.mx_RoomView_statusAreaBox_line {
|
||||
margin-left: 65px;
|
||||
border-top: 1px solid #eee;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ limitations under the License.
|
|||
margin-bottom: 8px;
|
||||
margin-left: 63px;
|
||||
padding-bottom: 6px;
|
||||
border-bottom: 1px solid #eee;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.mx_UserSettings h3 {
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_MemberList_bottomRule {
|
||||
border-top: 2px solid #e1dddd;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -24,7 +24,6 @@ limitations under the License.
|
|||
max-width: 960px;
|
||||
margin: auto;
|
||||
height: 83px;
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
|
|
@ -36,10 +35,6 @@ limitations under the License.
|
|||
display: flex;
|
||||
}
|
||||
|
||||
.mx_RoomHeader_editing .mx_RoomHeader_wrapper {
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
.mx_RoomHeader_leftRow {
|
||||
margin-left: -2px;
|
||||
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ limitations under the License.
|
|||
|
||||
.mx_RoomTile_avatar {
|
||||
display: table-cell;
|
||||
padding-right: 8px;
|
||||
padding-right: 11px;
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
padding-left: 20px;
|
||||
|
|
@ -121,18 +121,34 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_RoomTile_selected .mx_RoomTile_name {
|
||||
color: #76cfa6 ! important;
|
||||
}
|
||||
|
||||
.mx_RoomTile_highlight .mx_RoomTile_name {
|
||||
color: #ff0064 ! important;
|
||||
}
|
||||
|
||||
.mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_avatar {
|
||||
padding-right: 7px;
|
||||
}
|
||||
|
||||
.mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_name span {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 4px;
|
||||
margin-top: -4px;
|
||||
margin-bottom: -4px;
|
||||
border-radius: 2px;
|
||||
background-color: rgba(118,207,166,0.2);
|
||||
}
|
||||
|
||||
/*
|
||||
.mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_name {
|
||||
background: url('img/selected.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: right center;
|
||||
}
|
||||
*/
|
||||
|
||||
.mx_RoomTile_arrow {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ limitations under the License.
|
|||
.mx_TabCompleteBar_item {
|
||||
display: inline-block;
|
||||
margin-right: 15px;
|
||||
margin-bottom: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ limitations under the License.
|
|||
max-width: 960px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
border-bottom: 1px solid #eee;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.mx_TopUnreadMessagesBar_scrollUp {
|
||||
|
|
|
|||
|
|
@ -32,10 +32,10 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_RoomSubList_chevron {
|
||||
padding-left: 5px;
|
||||
padding-left: 4px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.collapsed .mx_RoomSubList_chevron {
|
||||
padding-left: 13px;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,15 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<!-- Generator: Sketch 3.4.2 (15857) - http://www.bohemiancoding.com/sketch -->
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-249 251 20 20"
|
||||
style="enable-background:new -249 251 20 20;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{opacity:0.2;}
|
||||
.st1{fill:#444444;}
|
||||
</style>
|
||||
<title>Slice 1</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<path d="M0,5 L20,5 L10,15 L0,5 Z" id="Triangle-1" fill="#76CFA6" sketch:type="MSShapeGroup" transform="translate(10.000000, 10.000000) rotate(-90.000000) translate(-10.000000, -10.000000) "></path>
|
||||
<g id="Page-1" sketch:type="MSPage" class="st0">
|
||||
<path id="Triangle-1" sketch:type="MSShapeGroup" class="st1" d="M-245,270v-18l12,9L-245,270z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 748 B After Width: | Height: | Size: 716 B |
|
|
@ -1,10 +1,15 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<!-- Generator: Sketch 3.4.2 (15857) - http://www.bohemiancoding.com/sketch -->
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-249 251 20 20"
|
||||
style="enable-background:new -249 251 20 20;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{opacity:0.2;}
|
||||
.st1{fill:#444444;}
|
||||
</style>
|
||||
<title>Slice 1</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<path d="M0,5 L20,5 L10,15 L0,5 Z" id="Triangle-1" fill="#76CFA6" sketch:type="MSShapeGroup"></path>
|
||||
<g id="Page-1" sketch:type="MSPage" class="st0">
|
||||
<path id="Triangle-1" sketch:type="MSShapeGroup" class="st1" d="M-248,255h18l-9,12L-248,255z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 650 B After Width: | Height: | Size: 716 B |
Loading…
Reference in a new issue