pimhwang
/
spreed-webrtc
mirror of https://github.com/strukturag/spreed-webrtc.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Convert buddylist to scss.

pull/29/head^2
Evan Theurer 12 years ago
parent
d0f9990520
commit
8712056069
1 changed files with 172 additions and 153 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 325
      src/styles/components/_buddylist.scss

325
src/styles/components/_buddylist.scss
Unescape View File

@ -18,168 +18,187 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>. * along with this program. If not, see <http://www.gnu.org/licenses/>.
* *
*/ */
#buddylist { #buddylist {
position: absolute; position: absolute;
top: 0px; top: 0;
right: 0px; right: 0;
bottom: 0px; bottom: 0;
width:285px; width: 285px;
z-index:50; z-index: 50;
} }
#buddylist:before { #buddylist:before {
position:absolute; position: absolute;
width:25px; width: 25px;
height:55px; height: 55px;
line-height:55px; line-height: 55px;
margin: auto; margin: auto;
left: 0px; left: 0;
top:0px; top: 0;
bottom:0px; bottom: 0;
content:"\f100"; content: "\f100";
font-family: 'FontAwesome'; font-family: 'FontAwesome';
color:rgba(0,0,0,0.3); color: rgba(0,0,0,0.3);
font-size:1.8em; font-size: 1.8em;
text-align:center; text-align: center;
cursor:pointer; cursor: pointer;
pointer-events:auto; pointer-events: auto;
background:$componentbg; background: $componentbg;
border-left:1px solid $bordercolor; border-left: 1px solid $bordercolor;
border-top:1px solid $bordercolor; border-top: 1px solid $bordercolor;
border-bottom:1px solid $bordercolor; border-bottom: 1px solid $bordercolor;
-webkit-border-top-left-radius: 6px; -webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px; -webkit-border-bottom-left-radius: 6px;
-moz-border-radius-topleft: 6px; -moz-border-radius-topleft: 6px;
-moz-border-radius-bottomleft: 6px; -moz-border-radius-bottomleft: 6px;
border-top-left-radius: 6px; border-top-left-radius: 6px;
border-bottom-left-radius: 6px; border-bottom-left-radius: 6px;
display:none; display: none;
} }
.withBuddylist #buddylist:before { .withBuddylist #buddylist:before {
content:"\f101"; content: "\f101";
} }
.withBuddylistAutoHide #buddylist:before { .withBuddylistAutoHide #buddylist:before {
display:block; display: block;
} }
.buddylist { .buddylist {
position:absolute; position: absolute;
left:25px; left: 25px;
right:0px; right: 0;
top:0px; top: 0;
bottom:0px; bottom: 0;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
border-top: 1px solid $bordercolor; border-top: 1px solid $bordercolor;
background: $componentbg; background: $componentbg;
pointer-events:auto; pointer-events: auto;
} }
.buddylist .buddycontainer {
-webkit-user-select: none; .buddylist {
position: relative; &.loading {
pointer-events:auto; .buddylistloading {
} display:block;
.buddylist .buddylistloading, .buddylist .buddylistempty { }
padding:.4em; }
font-size:1.4em; &.empty {
text-align:center; .buddylistempty {
display:none; display:block;
position:absolute; }
left:0px; }
right:0px; .buddycontainer {
bottom:0px; position: relative;
top:0px; pointer-events: auto;
margin:auto; user-select: none;
height:2em; }
color:rgba(0,0,0,0.3); .buddylistloading,
} .buddylistempty {
.buddylist.loading .buddylistloading { padding:.4em;
display:block; font-size: 1.4em;
} text-align: center;
.buddylist.empty .buddylistempty { display: none;
display:block; position: absolute;
} left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
height: 2em;
color: rgba(0,0,0,0.3);
}
}
.buddy { .buddy {
overflow: hidden; overflow: hidden;
height: 66px; height: 66px;
display: block; display: block;
border-bottom: 1px solid $bordercolor; border-bottom: 1px solid $bordercolor;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
text-align: left; text-align: left;
width: 100%; width: 100%;
font-size: 13px; font-size: 13px;
background: $sidepanebg; background: $sidepanebg;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} }
.buddy:hover { .buddy:hover {
background: $componentbg; background: $componentbg;
}
.buddy > .buddyimage {
float:left;
height: 46px;
width: 46px;
overflow: hidden;
margin: 10px;
position: relative;
border-radius: 2px;
background: $actioncolor1;
text-align:center;
}
.buddy > .buddyimage > i {
line-height:46px;
color:$actioncolor2;
}
.buddy > .buddyimage > img {
position: absolute;
left:0px;
right:0px;
bottom:0px;
top:0px;
display:block;
}
.buddy > .buddy1 {
position: absolute;
left: 65px;
white-space: nowrap;
overflow: hidden;
right: 4px;
height: 28px;
color: $componentfg1;
font-weight:bold;
font-size:14px;
top: 24px;
text-overflow: ellipsis;
}
.buddy.withSubline > .buddy1 {
top: 15px;
}
.buddy > .buddy2 {
position: absolute;
left: 65px;
white-space: nowrap;
overflow: hidden;
right: 0px;
color: $componentfg2;
top: 33px;
} }
.buddy {
&.withSubline > .buddy1 {
top: 15px;
}
&.hovered .buddyactions {
right: 0;
}
> .buddyimage {
float:left;
height: 46px;
width: 46px;
overflow: hidden;
margin: 10px;
position: relative;
border-radius: 2px;
background: $actioncolor1;
text-align: center;
> i {
line-height: 46px;
color: $actioncolor2;
}
> img {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: block;
}
}
> .buddy1 {
position: absolute;
left: 65px;
white-space: nowrap;
overflow: hidden;
right: 4px;
height: 28px;
color: $componentfg1;
font-weight: bold;
font-size: 14px;
top: 24px;
text-overflow: ellipsis;
}
> .buddy2 {
position: absolute;
left: 65px;
white-space: nowrap;
overflow: hidden;
right: 0px;
color: $componentfg2;
top: 33px;
}
}
.buddy .buddyactions { .buddy .buddyactions {
position:absolute; position: absolute;
right:-125px; right: -125px;
top:0px; top: 0px;
bottom:0px; bottom: 0px;
background:rgba(255,255,255,0.5); background: rgba(255,255,255,0.5);
z-index:5; z-index: 5;
line-height:66px; line-height: 66px;
padding:0 10px; padding: 0 10px;
transition-property: right; transition-property: right;
-webkit-transition-property: right; -webkit-transition-property: right;
transition-duration: .3s; transition-duration: .3s;
-webkit-transition-duration: .3s; -webkit-transition-duration: .3s;
white-space:nowrap; white-space: nowrap;
text-align:right; text-align: right;
} i {
.buddy .buddyactions i { font-size: 2em;
font-size:2em; }
}
.buddy.hovered .buddyactions {
right:0px;
} }

Write Preview
Loading…
Cancel
Save