mad-star-studio/element-web
2
0
Fork 0
Code Pull requests Activity

WIP at turning MemberInfo into a ContextualMenu

Browse source
This commit is contained in:
Matthew Hodgson 2015-09-21 19:22:29 +02:00
parent ce2632bbe6
commit 048260bb1b
7 changed files with 47 additions and 454 deletions
Download patch file Download diff file Expand all files Collapse all files

36
skins/base/css/common.css
View file

@ -43,9 +43,39 @@ html {
overflow: -moz-scrollbars-none;
}
/* FIXME: why is all the dialog stuff in here rather than in per-component files? */
.mx_ContextualMenu_background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1.0;
z-index: 2000;
}
.mx_Dialog_Background {
.mx_ContextualMenu {
text-align: center;
border: 1px solid #a9dbf4;
border-radius: 8px;
background-color: #fff;
position: fixed;
z-index: 1000;
padding: 6px;
}
.mx_ContextualMenu_chevron {
padding: 12px;
position: absolute;
right: -21px;
top: 0px;
}
.mx_ContextualMenu_field {
padding: 6px;
}
.mx_Dialog_background {
position: fixed;
top: 0;
left: 0;
@ -56,7 +86,7 @@ html {
z-index: 2000;
}
.mx_Dialog_Wrapper {
.mx_Dialog_wrapper {
position: fixed;
top: 0;
left: 0;

57
skins/base/css/molecules/MemberInfo.css
View file

@ -14,60 +14,3 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_MemberInfo {
text-align: center;
border: 1px solid #a9dbf4;
border-radius: 8px;
background-color: #fff;
position: absolute;
width: 200px;
margin-left: -295px;
margin-top: 0px;
z-index: 1000;
padding: 6px;
}
.mx_MemberInfo_chevron {
padding: 12px;
position: absolute;
right: -21px;
top: 0px;
}
/*
* a hacky shim to extend the hitmask of the overlay to overlap
* better with the main menu itself
*/
.mx_MemberInfo_shim {
position: absolute;
left: 212px;
width: 40px;
height: 100%;
}
.mx_MemberInfo_avatar {
padding: 6px;
}
.mx_MemberInfo_avatarImg {
border-radius: 128px;
}
.mx_MemberInfo_field {
padding: 6px;
overflow: hidden;
text-overflow: ellipsis;
}
.mx_MemberInfo_button {
vertical-align: middle;
max-width: 100px;
height: 36px;
background-color: #50e3c2;
line-height: 36px;
border-radius: 36px;
color: #fff;
margin: auto;
margin-top: 6px;
margin-bottom: 6px;
}