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

Use mixins and format css.

pull/29/head
Evan Theurer 12 years ago
parent
596dfc3148
commit
21218a0a30
1 changed files with 172 additions and 154 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. 326
      src/styles/components/_bar.scss

326
src/styles/components/_bar.scss
Unescape View File

@ -18,167 +18,185 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>. * along with this program. If not, see <http://www.gnu.org/licenses/>.
* *
*/ */
#bar { #bar {
-webkit-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2); position: absolute;
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2); top: 0;
position: absolute; left: 0;
top: 0; right: 0;
left: 0; min-height: 44px;
right: 0; background-color: $componentbg;
min-height: 44px; color: $componentfg1;
background-color: $componentbg; font-size: 1em;
color: $componentfg1; font-weight: bold;
font-size: 1em; line-height: 40px;
font-weight: bold; text-align: center;
line-height: 40px; z-index: 5;
text-align: center; @include box-shadow(0 2px 10px 0 rgba(0,0,0,.2));
-webkit-touch-callout: none; @include touch-callout(none);
-webkit-user-select: none; @include user-select(none);
-khtml-user-select: none; > .left {
-moz-user-select: none; position: absolute;
-ms-user-select: none; left: 0;
user-select: none; top: 0;
z-index:5; bottom: 0;
} padding-left: 12px;
#bar > .left { // TODO(theurere): cleanup
position: absolute; > *, #bar > .right > * {
left:0px; vertical-align: middle;
top:0px; }
bottom:0px; }
padding-left:12px; .logo {
} font-size: 11px;
#bar .logo { line-height: 11px;
font-size:11px; font-weight:normal;
line-height:11px; color: black;
font-weight:normal; width: 90px;
color:black; height: 32px;
width:90px; background-size: 100%;
height:32px; background-repeat: no-repeat;
background-size:100%; background-image: url(../img/logo-small.png);
background-repeat:no-repeat; display: inline-block;
background-image:url(../img/logo-small.png); text-align: left;
display:inline-block; > span {
text-align:left; position: relative;
} left: 38px;
#bar .logo > span { top: 26px;
position: relative; font-style: italic;
left: 38px; }
top: 26px; > span a {
font-style: italic; color: #222;
} }
#bar .logo > span a { }
color:#222;
}
#bar > .right {
position: absolute;
right:0px;
top:1px;
bottom:1px;
padding-right:8px;
}
#bar > .left > *, #bar > .right > * {
vertical-align: middle;
}
#bar > .right .btn {
border-color:transparent;
background:transparent;
color:rgba(0,0,0,0.3);
height:42px;
width:42px;
display: inline-block;
font-size:24px;
padding:0px;
line-height:40px;
text-align:center;
margin-left:-4px;
}
#bar > .right .btn:focus {
border: none;
box-shadow: 0;
outline: none;
}
#bar > .right .btn:hover {
border-color: #ccc;
background-color:none;
color:rgba(0,0,0,0.4);
}
#bar > .right .btn.active {
border-color: #ccc;
background-color:none;
color:rgba(0,0,0,0.4);
}
#bar > .right .btn.active.amutebtn {
background-color: #db4f39;
border-color: #db4f39;
color: white;
}
#bar > .right .btn.active.aenablebtn {
background-color: #84b819;
border-color: #84b819;
color: white;
}
#bar .btn {
position:relative;
}
#bar .badge {
background-color: #84b819;
font-size:.4em;
position:absolute;
right:0px;
top:2px;
border:1px solid white;
}
#bar .userpicture {
margin:-5px 0.5em 0px 0.5em;
width:46px;
height:46px;
border-radius:2px;
display:inline-block;
}
#bar > .middle {
z-index:5;
background-color: $componentbg;
display:inline-block;
padding:0 1em;
position:relative;
min-height: 44px;
vertical-align:middle;
margin-left:-70px;
} }
@media all and (max-width: 700px) { #bar {
#bar { > .right {
z-index:40; position: absolute;
-webkit-box-shadow: none; right: 0;
box-shadow: none; top: 1px;
bottom: 1px;
padding-right: 8px;
.btn {
border-color: transparent;
background: transparent;
color: rgba(0,0,0,.3);
height: 42px;
width: 42px;
display: inline-block;
font-size: 24px;
padding: 0;
line-height: 40px;
text-align: center;
margin-left: -4px;
} }
#bar > .middle.status-connecting, #bar > .middle.status-closed, #bar > .middle.status-reconnecting, #bar > .middle.status-error, #bar > .middle.status-ringing { .btn:focus {
max-width:100%; border: none;
border-bottom:1px solid $bordercolor; box-shadow: 0;
.actions { outline: none;
display: block;
padding:.2em 0 .8em 0;
}
min-height: 45px;
} }
#bar > .middle.status-connected, #bar > .middle.status-conference { .btn:hover {
position:absolute; border-color: #ccc;
left:0px; background-color: none;
right:0px; color: rgba(0,0,0,.4);
max-width:100%;
} }
#bar > .middle { .btn.active {
display:block; border-color: #ccc;
max-width:40%; background-color: none;
overflow:hidden; color: rgba(0,0,0,.4);
text-overflow:ellipsis; }
white-space:nowrap; .btn.active.amutebtn {
margin-left:0px; background-color: #db4f39;
border-color: #db4f39;
img { color: white;
display:none;
}
} }
.btn.active.aenablebtn {
background-color: #84b819;
border-color: #84b819;
color: white;
}
}
}
#bar {
.btn {
position: relative;
}
.badge {
background-color: #84b819;
font-size: .4em;
position: absolute;
right: 0;
top: 2px;
border: 1px solid white;
}
.userpicture {
margin: -5px .5em 0 .5em;
width: 46px;
height: 46px;
border-radius: 2px;
display: inline-block;
}
> .middle {
z-index: 5;
background-color: $componentbg;
display: inline-block;
padding: 0 1em;
position: relative;
min-height: 44px;
vertical-align: middle;
margin-left: -70px;
@include breakpt($breakpoint-medium) {
display: block;
max-width: 40%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-left: 0px;
}
}
} }
#bar {
@include breakpt($breakpoint-medium) {
z-index: 40;
-webkit-box-shadow: none;
box-shadow: none;
}
> .middle img {
@include breakpt($breakpoint-medium) {
display: none;
}
}
> .middle.status-connected,
> .middle.status-conference {
@include breakpt($breakpoint-medium) {
position: absolute;
left: 0;
right: 0;
max-width: 100%;
}
}
> .middle.status-connecting,
> .middle.status-closed,
> .middle.status-reconnecting,
> .middle.status-error,
> .middle.status-ringing {
@include breakpt($breakpoint-medium) {
max-width: 100%;
border-bottom: 1px solid $bordercolor;
min-height: 45px;
}
}
// TODO(theurere): cleanup
> .middle.status-connecting .actions,
> .middle.status-closed .actions,
> .middle.status-reconnecting .actions,
> .middle.status-error .actions,
> .middle.status-ringing .actions {
@include breakpt($breakpoint-medium) {
display: block;
padding: .2em 0 .8em 0;
}
}
}

Write Preview
Loading…
Cancel
Save