mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-17 15:25:52 +00:00
Bug 1183649 - Implement the refreshed design for the 'Start a new conversation' button. r=mikedeboer
This commit is contained in:
parent
c4a4af42ea
commit
24ae4003c5
@ -1,6 +1,10 @@
|
||||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
html {
|
||||
font-size: 10px;
|
||||
font-family: menu;
|
||||
}
|
||||
|
||||
body {
|
||||
background: none;
|
||||
@ -177,7 +181,7 @@ body {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
font-size: 10px;
|
||||
font-size: 1rem;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
@ -211,13 +215,20 @@ body {
|
||||
font-weight: bold;
|
||||
color: #999;
|
||||
padding: .5rem 0;
|
||||
height: 3rem;
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
.new-room-view > .context-checkbox-checked {
|
||||
background-color: #dbf7ff;
|
||||
}
|
||||
|
||||
.new-room-view > .context {
|
||||
margin: .5rem 0 0;
|
||||
background-color: #dbf7ff;
|
||||
margin: .5rem 0 .5rem;
|
||||
border-radius: 3px 3px 0 0;
|
||||
padding: .5rem;
|
||||
padding: .5rem 1rem ;
|
||||
margin-left: -1rem;
|
||||
margin-right: -1rem;
|
||||
}
|
||||
|
||||
.new-room-view > .context > .context-enabled {
|
||||
@ -230,11 +241,13 @@ body {
|
||||
}
|
||||
|
||||
.new-room-view > .context > .checkbox-wrapper {
|
||||
height: 2rem;
|
||||
margin-bottom: .5em;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.new-room-view > .context > .checkbox-wrapper > .checkbox {
|
||||
border-color: #0096dd;
|
||||
border-color: #d8d8d8;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
@ -244,16 +257,17 @@ body {
|
||||
|
||||
.new-room-view > .context > .checkbox-wrapper > label {
|
||||
color: #333;
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.new-room-view > .btn {
|
||||
height: 3rem;
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
margin: 0 auto .5rem;
|
||||
font-size: 1.2rem;
|
||||
margin: 0 auto 1rem;
|
||||
width: 100%;
|
||||
padding: .5rem 1rem;
|
||||
border-radius: 0 0 3px 3px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Remove when bug 1142671 is backed out. */
|
||||
@ -277,14 +291,14 @@ body {
|
||||
}
|
||||
|
||||
.room-list > .room-entry {
|
||||
padding: .5rem 1rem;
|
||||
padding: .2rem 1rem;
|
||||
/* Always show the default pointer, even over the text part of the entry. */
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.room-list > .room-entry > h2 {
|
||||
display: inline-block;
|
||||
font-size: .85rem;
|
||||
font-size: 1rem;
|
||||
color: #777;
|
||||
/* See .room-entry-context-item for the margin/size reductions. */
|
||||
width: calc(100% - 1rem - 16px);
|
||||
@ -309,11 +323,7 @@ body {
|
||||
}
|
||||
|
||||
.room-list > .room-entry:hover {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
.room-list > .room-entry:not(:last-child) {
|
||||
border-bottom: 1px solid #ccc;
|
||||
background: #dbf7ff;
|
||||
}
|
||||
|
||||
.room-list > .room-entry > p {
|
||||
@ -424,7 +434,7 @@ body {
|
||||
border: 1px solid #c1c1c1;
|
||||
border-radius: 2px;
|
||||
min-height: 26px;
|
||||
font-size: 12px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.button > .button-caption {
|
||||
@ -619,7 +629,7 @@ html[dir="rtl"] .generate-url-spinner {
|
||||
}
|
||||
|
||||
.terms-service > a {
|
||||
color: #00caee;
|
||||
color: #00a9dc;
|
||||
}
|
||||
|
||||
/* DnD menu */
|
||||
|
@ -774,6 +774,7 @@ loop.panel = (function(_, mozL10n) {
|
||||
|
||||
var contextClasses = React.addons.classSet({
|
||||
context: true,
|
||||
"context-checkbox-checked": this.state.checked,
|
||||
hide: !hostname ||
|
||||
!this.props.mozLoop.getLoopPref("contextInConversations.enabled")
|
||||
});
|
||||
|
@ -774,6 +774,7 @@ loop.panel = (function(_, mozL10n) {
|
||||
|
||||
var contextClasses = React.addons.classSet({
|
||||
context: true,
|
||||
"context-checkbox-checked": this.state.checked,
|
||||
hide: !hostname ||
|
||||
!this.props.mozLoop.getLoopPref("contextInConversations.enabled")
|
||||
});
|
||||
|
@ -100,19 +100,19 @@ p {
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
background-color: #0096dd;
|
||||
border: 1px solid #0095dd;
|
||||
background-color: #00a9dc;
|
||||
border: 1px solid #00a9dc;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-info:hover {
|
||||
background-color: #008acb;
|
||||
border: 1px solid #008acb;
|
||||
background-color: #5cccee;
|
||||
border: 1px solid #5cccee;
|
||||
}
|
||||
|
||||
.btn-info:active {
|
||||
background-color: #006b9d;
|
||||
border: 1px solid #006b9d;
|
||||
background-color: #5cccee;
|
||||
border: 1px solid #5cccee;
|
||||
}
|
||||
|
||||
.btn-accept,
|
||||
@ -468,8 +468,8 @@ html[dir="rtl"] .dropdown-menu {
|
||||
|
||||
.checkbox {
|
||||
float: left;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
-moz-margin-end: .5em;
|
||||
margin-top: .1em;
|
||||
border: 1px solid #999;
|
||||
@ -521,7 +521,7 @@ html[dir="rtl"] .context-content {
|
||||
|
||||
.context-wrapper {
|
||||
border: 1px solid #5cccee;
|
||||
border-radius: 3px;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
padding: .8em;
|
||||
/* Use the flex row mode to position the elements next to each other. */
|
||||
@ -530,6 +530,10 @@ html[dir="rtl"] .context-content {
|
||||
line-height: 1.1em;
|
||||
}
|
||||
|
||||
.context-wrapper:hover {
|
||||
background-color: #dbf7ff;
|
||||
}
|
||||
|
||||
.context-wrapper > .context-preview {
|
||||
float: left;
|
||||
/* 16px is standard height/width for a favicon */
|
||||
@ -556,7 +560,7 @@ html[dir="rtl"] .context-wrapper > .context-preview {
|
||||
|
||||
.context-wrapper > .context-description > .context-url {
|
||||
display: block;
|
||||
color: #59A1D7;
|
||||
color: #00a9dc;
|
||||
font-weight: 700;
|
||||
clear: both;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user