move components' CSS to be in the same repo as their JS

res/css/views/rooms/_RoomHeader.scss

@@ -0,0 +1,245 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/* add 20px to the height of the header when editing */
+.mx_RoomHeader_editing {
+    flex: 0 0 93px ! important;
+}
+
+.mx_RoomHeader_wrapper {
+    max-width: 960px;
+    margin: auto;
+    height: 70px;
+    align-items: center;
+    display: flex;
+}
+
+.mx_RoomHeader_leftRow {
+    margin-left: -2px;
+    order: 1;
+    flex: 1;
+    overflow: hidden;
+}
+
+.mx_RoomHeader_spinner {
+    height: 36px;
+    order: 2;
+    padding-left: 12px;
+    padding-right: 12px;
+}
+
+.mx_RoomHeader_textButton {
+    @mixin mx_DialogButton;
+    margin-right: 8px;
+    margin-top: -5px;
+    order: 2;
+}
+
+.mx_RoomHeader_textButton:hover {
+    @mixin mx_DialogButton_hover;
+}
+
+.mx_RoomHeader_textButton_danger {
+    background-color: $warning-color;
+}
+
+.mx_RoomHeader_cancelButton {
+    order: 2;
+    cursor: pointer;
+    padding-left: 12px;
+    padding-right: 12px;
+}
+
+.mx_RoomHeader_rightRow {
+    margin-top: 4px;
+    background-color: $primary-bg-color;
+    display: flex;
+    align-items: center;
+    order: 3;
+}
+
+.mx_RoomHeader_info {
+    display: table-cell;
+    width: 100%;
+    vertical-align: middle;
+}
+
+.mx_RoomHeader_simpleHeader {
+    line-height: 70px;
+    color: $primary-fg-color;
+    font-size: 22px;
+    font-weight: bold;
+    overflow: hidden;
+    margin-left: 63px;
+    text-overflow: ellipsis;
+    width: 100%;
+}
+
+.mx_RoomHeader_simpleHeader .mx_RoomHeader_cancelButton {
+    float: right;
+}
+
+.mx_RoomHeader_simpleHeader .mx_RoomHeader_icon {
+    margin-left: 14px;
+    margin-right: 24px;
+    vertical-align: -4px;
+}
+
+.mx_RoomHeader_name {
+    vertical-align: middle;
+    width: 100%;
+    height: 31px;
+    overflow: hidden;
+    color: $primary-fg-color;
+    font-weight: bold;
+    font-size: 22px;
+    padding-left: 19px;
+    padding-right: 16px;
+    /* why isn't text-overflow working? */
+    text-overflow: ellipsis;
+    border-bottom: 1px solid transparent;
+}
+
+.mx_RoomHeader_nametext {
+    display: inline-block;
+}
+
+.mx_RoomHeader_settingsHint {
+    color: $settings-grey-fg-color ! important;
+}
+
+.mx_RoomHeader_searchStatus {
+    display: inline-block;
+    font-weight: normal;
+    opacity: 0.6;
+}
+
+.mx_RoomHeader_settingsButton object {
+    pointer-events: none;
+}
+
+.mx_RoomHeader_name,
+.mx_RoomHeader_avatar,
+.mx_RoomHeader_avatarPicker,
+.mx_RoomHeader_avatarPicker_edit,
+.mx_RoomHeader_avatarPicker_remove {
+    cursor: pointer;
+}
+
+.mx_RoomHeader_avatarPicker_remove {
+    position: absolute;
+    top: -11px;
+    right: -9px;
+}
+
+.mx_RoomHeader_name:hover div:not(.mx_RoomHeader_editable) {
+    color: $accent-color;
+}
+
+.mx_RoomHeader_placeholder {
+    color: $settings-grey-fg-color ! important;
+}
+
+.mx_RoomHeader_editable {
+    border-bottom: 1px solid $strong-input-border-color ! important;
+    min-width: 150px;
+    cursor: text;
+}
+
+.mx_RoomHeader_editable:focus {
+    border-bottom: 1px solid $accent-color ! important;
+    outline: none;
+    box-shadow: none;
+}
+
+.mx_RoomHeader_topic {
+    vertical-align: bottom;
+    float: left;
+    max-height: 38px;
+    color: $settings-grey-fg-color;
+    font-weight: 300;
+    font-size: 13px;
+    margin-left: 19px;
+    margin-right: 16px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    border-bottom: 1px solid transparent;
+    column-width: 960px;
+}
+
+.mx_RoomHeader_avatar {
+    display: table-cell;
+    width: 48px;
+    height: 50px;
+    vertical-align: middle;
+}
+
+.mx_RoomHeader_avatar .mx_BaseAvatar_image {
+    object-fit: cover;
+}
+
+.mx_RoomHeader_avatarPicker {
+    margin-top: 23px;
+    position: relative;
+}
+
+.mx_RoomHeader_avatarPicker_edit {
+    margin-left: 16px;
+    margin-top: 4px;
+}
+
+.mx_RoomHeader_avatarPicker_edit > label {
+    cursor: pointer;
+}
+
+.mx_RoomHeader_avatarPicker_edit > input {
+    display: none;
+}
+
+.mx_RoomHeader_button {
+    margin-left: 12px;
+    cursor: pointer;
+}
+
+.mx_RoomHeader_button object {
+    pointer-events: none;
+}
+
+.mx_RoomHeader_voipButton {
+    display: table-cell;
+}
+
+.mx_RoomHeader_voipButtons {
+    margin-top: 18px;
+}
+
+.mx_RoomHeader_pinnedButton {
+    position: relative;
+}
+
+.mx_RoomHeader_pinsIndicator {
+    position: absolute;
+    right: 0;
+    bottom: 4px;
+    width: 8px;
+    height: 8px;
+    border-radius: 8px;
+    background-color: $pinned-color;
+}
+
+.mx_RoomHeader_pinsIndicatorUnread {
+    background-color: $pinned-unread-color;
+}