diff --git a/conversation.html b/conversation.html index a2cf79df976f..284a83136bb5 100644 --- a/conversation.html +++ b/conversation.html @@ -8,39 +8,39 @@ - - - - - - -
- -
- -
- -
-
- + + +
+ +
+ + +
+ +
+ +
+ Welcome to the settings page!! + Go Back? +
+ diff --git a/index2.html b/index2.html index 026bfbd8a095..aba21904fe97 100644 --- a/index2.html +++ b/index2.html @@ -10,22 +10,22 @@ - - + + +
- @@ -38,7 +38,7 @@

{{ last_message }}

- + {{ last_message_timestamp }}
@@ -65,7 +65,6 @@ - diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js index ce3b84696ce3..ef8b1b3b46f5 100644 --- a/js/views/conversation_view.js +++ b/js/views/conversation_view.js @@ -37,7 +37,7 @@ this.view = new Whisper.MessageListView({ collection: this.model.messageCollection }); - $('#conversation-container').append(this.view.el); + $('#header').after(this.view.el); //new ...({el: $(#conversation-container)}) this.model.fetchMessages({reset: true}); }, diff --git a/js/views/message_list_view.js b/js/views/message_list_view.js index 2a5e126bdbd1..dc23d87f596c 100644 --- a/js/views/message_list_view.js +++ b/js/views/message_list_view.js @@ -20,7 +20,7 @@ var Whisper = Whisper || {}; Whisper.MessageListView = Whisper.ListView.extend({ tagName: 'ul', - className: 'discussion', + className: 'message-list', itemView: Whisper.MessageView, events: { 'add': 'scrollToBottom', diff --git a/stylesheets/_variables.scss b/stylesheets/_variables.scss new file mode 100644 index 000000000000..325dcd2e0ff9 --- /dev/null +++ b/stylesheets/_variables.scss @@ -0,0 +1,8 @@ +// colors +$blue_l: #a2d2f4; +$blue: #2a92e7; +$grey_l: #f3f3f3; +$grey: #616161; +$grey_d: #454545; + +$roboto: Roboto, 'Helvetica Neue', Arial, Helvetica, sans-serif diff --git a/stylesheets/context/_notifications.scss b/stylesheets/context/_notifications.scss deleted file mode 100644 index 06f9ca6d9cde..000000000000 --- a/stylesheets/context/_notifications.scss +++ /dev/null @@ -1,39 +0,0 @@ -.notifications { - position:relative; - font-size: 12px; - .notification { - padding:12px; - p { - margin:0; - } - &.info { - background-color:whitesmoke; - border-bottom:1px solid lightgray; - } - &.alert {} - &.warning {} - &.success {} - a.button { - position: absolute; - cursor:pointer; - right:10px; - top:11px; - background-color:whitesmoke; - text-decoration: none; - color:gray; - border:1px solid lightgray; - font-weight: bold; - font-size: 10px; - text-align: center; - padding:2px; - box-sizing: border-box; - display:block; - height:18px; - width:18px; - border-radius:18px; - &:hover { - background-color:lightgray; - } - } - } -} diff --git a/stylesheets/context/_title_bar.scss b/stylesheets/context/_title_bar.scss deleted file mode 100644 index 5381226c7aa1..000000000000 --- a/stylesheets/context/_title_bar.scss +++ /dev/null @@ -1,11 +0,0 @@ -.title-bar { - padding:10px; - color:white; - background-color:#00badd; - border-bottom:1px solid darken(#00badd, 5%); - h1 { - padding:0; - font-weight:normal; - margin:0.5em 0 0 0; - } -} diff --git a/stylesheets/index.css b/stylesheets/index.css index 516d2acc67f3..e69de29bb2d1 100644 --- a/stylesheets/index.css +++ b/stylesheets/index.css @@ -1,177 +0,0 @@ -ul.discussion { - margin: 0; - padding: 10px; - box-sizing: border-box; -} - -li.entry .sender { - display: none; - font-size: 0.75em; - opacity: 0.54; -} - -.group.conversation li.entry .sender { - display: block; -} - - -li.entry .avatar { - height:32px; - width:32px; - border-radius:32px; - cursor:pointer; - display:inline-block; - float:left; - clear:both; - background-color:whitesmoke; -} - -li.entry.outgoing .avatar { - display: none; -} - -li.entry img { - max-width: 100%; - margin-top: 5px; -} - -div.imageAttachment { - height: 30px; - width: 30px; - float: left; - margin: 6px; - position: relative; -} - -img.preview { - width: 30px; - height: 30px; - overflow: hidden; - position: relative; -} - -.close { - font-family: sans-serif; - color: white; - position: absolute; - top: -10px; - left: 20px; - text-align: center; - cursor: default; - border-radius: 50%; - width: 20px; - height: 20px; - padding: 0px; - - background: #666; - color: #fff; - text-align: center; -} - -.bootstrap-tagsinput .tag { - background-color: #00badd; - padding: 5px; - border-radius: 3px; -} - -ul.country-list { - min-width: 197px !important; -} -<<<<<<< HEAD - -div.attachments { - width: 95% !important; -} - -input.file-input { - float: left !important; -} - -.modal-wrapper { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - width: 100%; - z-index: 10000 !important; - display: none; -} - -.modal-content { - position: absolute; - top: 0; - width: 100%; - height: 100%; - overflow: auto; - overflow-y: scroll; -} - -.modal-container { - background-color: #FFFFFF; - width: 450px; - -webkit-box-shadow: 0 0 7px 0 #000000; - moz-box-shadow: 0 0 7px 0 #000000; - box-shadow: 0 0 7px 0 #000000; - display: block; - z-index: 10000 !important; - margin: 45px auto; - position: relative; - border: 1px solid #666; -} - -.modal-banner { - background-color: #00badd; - color: #ffffff; - height: 45px; - line-height: 45px; - vertical-align: middle; - text-align: center; - font-wight: bold; - font-size: 1.5em; - position: relative; -} -.modal-banner span { - padding: 0 20px; -} - -.modal-close { - position: absolute; - top: 0; - right: 12px; - bottom: 0; -} -.modal-close a.modal-close-button { - color: #FFFFFF; - text-decoration: none; - font-size: .8em; -} - -.modal-inner { - overflow: hidden; -} - -.modal-inner>p { - color: black !important; -} - -.modal-padding { - padding: 16px 18px; -} - -@media only screen and (max-width: 450px) { - .modal-container { - width: 100%; - margin: 0 auto; - } - - .modal-banner { - height: 32px; - line-height: 32px; - vertical-align: middle; - text-align: center; - font-wight: bold; - font-size: 1em; - position: relative; - } -} diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css index f26951ce7451..d1921055eb85 100644 --- a/stylesheets/manifest.css +++ b/stylesheets/manifest.css @@ -1,292 +1,210 @@ -@charset "UTF-8"; +@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,700); +body, input { + font-family: Roboto, "Helvetica Neue", Arial, Helvetica, sans-serif; } + body { - font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-weight: normal; - text-align: center; - -webkit-font-smoothing: antialiased; - -moz-font-smoothing: antialiased; - -ms-font-smoothing: antialiased; - -o-font-smoothing: antialiased; - font-smoothing: antialiased; - hanging-punctuation: first; } + margin: 0; } -/* - * This is a series-d manifest file. - * - * Here, we import responsive variables specified elsewhere - * - */ -/* SERIES D SHAME + WIP */ -/* includes iPhone, */ .title-bar { - padding: 10px; - color: white; - background-color: #00badd; - border-bottom: 1px solid #00a5c4; } - .title-bar h1 { - padding: 0; - font-weight: normal; - margin: 0.5em 0 0 0; } - -.notifications { position: relative; + z-index: 1; + height: 36px; + line-height: 24px; + background: #2a92e7; + box-shadow: 0 -4px 3px 4px rgba(12, 65, 108, 0.8); } + .title-bar button { + height: 36px; + line-height: 36px; + float: right; + margin-right: 8px; + padding: 0; + border: 0; + outline: 0; + font-size: 36px; + color: white; + background: transparent; } + +.fab { + z-index: 1; + position: fixed; + right: 16px; + bottom: 22px; + height: 60px; + width: 60px; + border: 0; + border-radius: 30px; + outline: 0; + font: 300 36px Roboto, "Helvetica Neue", Arial, Helvetica, sans-serif; + color: white; + background: #2a92e7; + box-shadow: 0 8px 8px -8px rgba(2, 10, 16, 0.8); + transition: box-shadow 0.33s, transform 0.33s, background 0.33s; } + .fab:hover { + background: #1c8be5; + box-shadow: 0 8px 18px -8px rgba(2, 10, 16, 0.9); + transform: translate3d(0, -1px, 0); } + +button { + cursor: pointer; } + +.timestamp { font-size: 12px; } - .notifications .notification { - padding: 12px; } - .notifications .notification p { - margin: 0; } - .notifications .notification.info { - background-color: whitesmoke; - border-bottom: 1px solid lightgray; } - .notifications .notification a.button { - position: absolute; - cursor: pointer; - right: 10px; - top: 11px; - background-color: whitesmoke; - text-decoration: none; - color: gray; - border: 1px solid lightgray; - font-weight: bold; - font-size: 10px; - text-align: center; - padding: 2px; - box-sizing: border-box; + +.message-list { + padding: 0; + list-style: none; + font-size: 16px; + font-weight: 300; } + .message-list li { + margin: 0 8px 16px; } + .message-list li::after { + visibility: hidden; display: block; - height: 18px; - width: 18px; - border-radius: 18px; } - .notifications .notification a.button:hover { - background-color: lightgray; } + font-size: 0; + content: " "; + clear: both; + height: 0; } + .message-list p { + margin: 0; } + .message-list .bubble { + position: relative; + left: -2px; + display: inline-block; + vertical-align: top; + max-width: calc(100% - 2 * 54px - 2 * 12px - 8px); + padding: 9px 12px; + border-radius: 4px; + box-shadow: 0 3px 3px -4px black; } + .message-list .bubble::before, .message-list .bubble::after { + content: ''; + position: absolute; + height: 0; + width: 0; } + .message-list .bubble::before { + top: 19px; + border-top: 8px solid transparent; + border-bottom: 8px solid transparent; } + .message-list .bubble::after { + top: 21px; + border-top: 6px solid transparent; + border-bottom: 6px solid transparent; } + .message-list .incoming .bubble { + color: #454545; + background: #f3f3f3; } + .message-list .incoming .bubble::before { + left: -10px; + border-right: 10px solid white; } + .message-list .incoming .bubble::after { + left: -8px; + border-right: 8px solid #f3f3f3; } + .message-list .outgoing img, .message-list .outgoing .bubble { + float: right; } + .message-list .outgoing .bubble { + clear: left; + color: white; + background: #2a92e7; } + .message-list .outgoing .bubble .timestamp { + color: #a2d2f4; } + .message-list .outgoing .bubble::before { + right: -10px; + border-left: 10px solid white; } + .message-list .outgoing .bubble::after { + right: -8px; + border-left: 8px solid #2a92e7; } + .message-list img { + height: 54px; + width: 54px; + box-sizing: border-box; + border: 27px #2a92e7 solid; + border-radius: 27px; } + .message-list .timestamp { + margin-top: 3px; + float: right; } -@media screen and (min-width: 320px) { - .search { - padding: 10px; - border-bottom: 1px solid whitesmoke; } - .search input[type=search] { - box-sizing: border-box; - font-size: 12px; - outline: 0; - width: 100%; - margin: 0; - letter-spacing: 0.25px; - padding: 4px 8px; - border: 1px solid lightgray; } +.bottom-bar { + position: fixed; + bottom: 0; + height: 36px; + width: 100%; + border-top: 1px solid #f3f3f3; + background: white; } + .bottom-bar button, .bottom-bar input { + color: #454545; } + .bottom-bar button { + position: absolute; + top: 0; + height: 100%; + width: 36px; + padding: 0; + border: 0; + outline: 0; + font-size: 24px; + background: transparent; } + .bottom-bar .attachments-btn { + left: 0; } + .bottom-bar .send-btn { + right: 0; } + .bottom-bar form, .bottom-bar input { + height: 100%; + width: 100%; } + .bottom-bar input { + height: 100%; + width: 100%; + box-sizing: border-box; + padding: 0 36px; + border: 0; + outline: 0; + font-size: 16px; + background: white; } - .gutter .search { - display: none; } } -@media screen and (min-width: 480px) { - .search { +.index { + color: #454545; + background: #eee; } + .index .contact { + position: relative; + padding: 12px; + background: white; + cursor: pointer; + transition: background 0.2s; } + .index .contact::after { + content: ''; + position: absolute; + right: 16px; + bottom: 0; + height: 1px; + width: calc(100% - 12px - 54px - 2 * 8px - 16px); + background: #eee; } + .index .contact:hover { + background: #f8f8f8; } + .index .contact:last-child { + box-shadow: 0 1px 3px rgba(170, 170, 170, 0.8); } + .index .contact:last-child::after { + display: none; } + .index .contact-details { + vertical-align: top; + display: inline-block; + width: calc(100% - 54px - 2 * 12px - 8px); + margin: 4px 0 0 8px; } + .index .contact-name { + margin: 0; + font-size: 16px; + font-weight: 400; } + .index .last-message { + margin: 6px 0; + font-size: 14px; + font-weight: 300; } + .index .timestamp { + position: absolute; + top: 14px; + right: 12px; + color: #888; } + .index img { + height: 54px; + width: 54px; + box-sizing: border-box; + border: 27px #f3f3f3 solid; + border-radius: 27px; } + .index .message-list { display: none; } - .gutter .search { - display: block; } } -.gutter { - width: 100%; - float: left; - border-right: 1px solid lightgray; - position: relative; - box-sizing: border-box; - overflow: scroll; - background-color: white; - padding-bottom: 80px; - z-index: 100; } - .gutter .contact { - cursor: pointer; - float: left; - width: 100%; - border-bottom: 1px solid whitesmoke; - color: #333; } - .gutter .contact:hover { - background-color: whitesmoke; - margin-top: -1px; - border-bottom: 1px solid lightgray; - border-top: 1px solid lightgray; } - .gutter .contact.active { - background-color: #ecfcff; - margin-top: -1px; - border-bottom: 1px solid lightgray; - border-top: 1px solid lightgray; } - .gutter .contact .avatar { - height: 42px; - width: 42px; - border-radius: 42px; - cursor: pointer; - display: inline-block; - margin: 10px; - margin-right: 14px; - float: left; - clear: both; - background-color: whitesmoke; } - .gutter .contact .contact-details { - display: none; } - .gutter .search { - padding: 10px; - border-bottom: 1px solid whitesmoke; } - .gutter .search input[type=search] { - box-sizing: border-box; - font-size: 12px; - outline: 0; - width: 100%; - margin: 0; - letter-spacing: 0.25px; - padding: 4px 8px; - border: 1px solid lightgray; } - .gutter .search.d6 { - display: block; } - .gutter .contact .avatar { - height: 56px; - width: 56px; } - .gutter .contact .contact-details { - display: block; - position: relative; - width: 156px; - float: left; - text-align: left; } - .gutter .contact .contact-details h3 { - font-size: 13px; - margin-bottom: 4px; } - .gutter .contact .contact-details .contact-name { - width: 105px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; } - .gutter .contact .contact-details .last-message { - color: #999999; - letter-spacing: 0.15px; - -webkit-text-stroke: 0.2px; - margin: 0; - font-size: 12px; - width: 150px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; } - .gutter .contact .contact-details .last-timestamp { - position: absolute; - top: 14px; - right: 8px; - font-size: 12px; - font-weight: 500; - color: gray; } - -.conversation { - margin-top: 10px; - width: 100%; - padding-right: 12px; - box-sizing: border-box; - display: block; - margin-bottom: 10px; - text-align: left; } - -ul.discussion { - display: block; - overflow: auto; - padding: 0; } - -.entry { - display: block; - width: 100%; - float: left; - margin-bottom: 10px; } - .entry .timestamp { - font-size: 0.75em; - display: block; } - .entry .timestamp:incoming { - color: gray; } - .entry .timestamp:outgoing { - color: whitesmoke; } - .entry.delivered .timestamp::after { - margin-left: 4px; - content: "✓"; } - -.bubble { - border-radius: 16px; - padding: 12px; - bottom: 10px; - width: auto; - background-color: whitesmoke; } - .bubble:first-of-type { - margin-top: 0; } - .bubble ul, .bubble li { - display: block; - margin: 0; - padding: 0; } - .bubble .message { - position: relative; - font-size: 14px; - -webkit-text-stroke: 0.35px; } - .bubble.incoming { - float: left; - text-align: left; - margin-left: 12px; } - .bubble.sent { - float: right; - clear: right; - text-align: right; - background-color: #00badd; - color: white; } - -.avatar img { - max-width: 100%; } - -@media screen and (min-width: 320px) { - .send-message-area { - position: fixed; - bottom: 0; - background-color: whitesmoke; - box-sizing: border-box; - float: left; - padding: 16px; - width: 100%; - border-top: 1px solid lightgray; - right: 0; } - .send-message-area .send-message { - outline: 0; - border: 0; - width: 100%; - padding: 0; - resize: auto; } - - .message-composer { - vertical-align: top; - position: relative; - background-color: white; - margin-bottom: 20px; - padding: 8px; - border: 1px solid lightgray; - font-size: 14px; - color: gray; - padding-bottom: 80px; } - .message-composer .attachments { - position: absolute; - bottom: 0; - color: lightgray; - width: 64px; - text-align: center; - padding: 6px 4px 0 4px; - margin-bottom: 10px; - border-top: 1px solid lightgray; } - - .extension-details { - font-size: 11px; - color: #b9b9b9; } - .extension-details a { - color: gray; - text-decoration: none; } - .extension-details ul { - padding: 0; } - .extension-details li { - display: inline-block; } - .extension-details li:after { - content: " • "; - color: lightgray; } - .extension-details li:last-of-type:after { - content: none; } } -@media screen and (min-width: 480px) { - .send-message-area { - padding-left: 258px; } } -@media screen and (min-width: 822px) { - .send-message-area { - padding-right: 258px; } } - /*# sourceMappingURL=manifest.css.map */ diff --git a/stylesheets/manifest.css.map b/stylesheets/manifest.css.map index 958ec1e97c4f..067760d59f80 100644 --- a/stylesheets/manifest.css.map +++ b/stylesheets/manifest.css.map @@ -1,7 +1,7 @@ { "version": 3, -"mappings": "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", -"sources": ["settings/_reset.scss","context/_title_bar.scss","context/_notifications.scss","view/_search.scss","view/_gutter.scss","settings/_swatchbook.scss","view/_conversation.scss","view/_send_message_area.scss"], +"mappings": "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", +"sources": ["view/_conversation.scss","_variables.scss"], "names": [], "file": "manifest.css" } diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss index 31af3bf748fb..1c9eea5699a9 100644 --- a/stylesheets/manifest.scss +++ b/stylesheets/manifest.scss @@ -1,26 +1,15 @@ -// Signal for the Browser +// Signal for the Browser // A universally compatible extension // Below is the ship's manifest // Global Settings, Variables, and Mixins - - @import "settings/reset"; // set body style and resets - @import "settings/swatchbook"; - @import "settings/breakpoints"; - -// Provide some context - - @import "context/title_bar"; - @import "context/notifications"; + @import 'variables'; // Build the main view - @import "view/search"; - @import "view/gutter"; - @import "view/conversation"; - @import "view/send_message_area"; + @import 'view/conversation'; // Not sure where something goes, or // implementing a known CSS hack? Add it // to `shame.scss`, and it will be fixed! - @import "shame"; + @import 'shame'; diff --git a/stylesheets/normalize.css b/stylesheets/normalize.css deleted file mode 100644 index 73abb76fa418..000000000000 --- a/stylesheets/normalize.css +++ /dev/null @@ -1,375 +0,0 @@ -/*! normalize.css v2.0.1 | MIT License | git.io/normalize */ - -/* ========================================================================== - HTML5 display definitions - ========================================================================== */ - -/* - * Corrects `block` display not defined in IE 8/9. - */ - -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -nav, -section, -summary { - display: block; -} - -/* - * Corrects `inline-block` display not defined in IE 8/9. - */ - -audio, -canvas, -video { - display: inline-block; -} - -/* - * Prevents modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. - */ - -audio:not([controls]) { - display: none; - height: 0; -} - -/* - * Addresses styling for `hidden` attribute not present in IE 8/9. - */ - -[hidden] { - display: none; -} - -/* ========================================================================== - Base - ========================================================================== */ - -/* - * 1. Sets default font family to sans-serif. - * 2. Prevents iOS text size adjust after orientation change, without disabling - * user zoom. - */ - -html { - font-family: sans-serif; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ - -ms-text-size-adjust: 100%; /* 2 */ -} - -/* - * Removes default margin. - */ - -body { - margin: 0; -} - -/* ========================================================================== - Links - ========================================================================== */ - -/* - * Addresses `outline` inconsistency between Chrome and other browsers. - */ - -a:focus { - outline: thin dotted; -} - -/* - * Improves readability when focused and also mouse hovered in all browsers. - */ - -a:active, -a:hover { - outline: 0; -} - -/* ========================================================================== - Typography - ========================================================================== */ - -/* - * Addresses `h1` font sizes within `section` and `article` in Firefox 4+, - * Safari 5, and Chrome. - */ - -h1 { - font-size: 2em; -} - -/* - * Addresses styling not present in IE 8/9, Safari 5, and Chrome. - */ - -abbr[title] { - border-bottom: 1px dotted; -} - -/* - * Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome. - */ - -b, -strong { - font-weight: bold; -} - -/* - * Addresses styling not present in Safari 5 and Chrome. - */ - -dfn { - font-style: italic; -} - -/* - * Addresses styling not present in IE 8/9. - */ - -mark { - background: #ff0; - color: #000; -} - - -/* - * Corrects font family set oddly in Safari 5 and Chrome. - */ - -code, -kbd, -pre, -samp { - font-family: monospace, serif; - font-size: 1em; -} - -/* - * Improves readability of pre-formatted text in all browsers. - */ - -pre { - white-space: pre; - white-space: pre-wrap; - word-wrap: break-word; -} - -/* - * Sets consistent quote types. - */ - -q { - quotes: "\201C" "\201D" "\2018" "\2019"; -} - -/* - * Addresses inconsistent and variable font size in all browsers. - */ - -small { - font-size: 80%; -} - -/* - * Prevents `sub` and `sup` affecting `line-height` in all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sup { - top: -0.5em; -} - -sub { - bottom: -0.25em; -} - -/* ========================================================================== - Embedded content - ========================================================================== */ - -/* - * Removes border when inside `a` element in IE 8/9. - */ - -img { - border: 0; -} - -/* - * Corrects overflow displayed oddly in IE 9. - */ - -svg:not(:root) { - overflow: hidden; -} - -/* ========================================================================== - Figures - ========================================================================== */ - -/* - * Addresses margin not present in IE 8/9 and Safari 5. - */ - -figure { - margin: 0; -} - -/* ========================================================================== - Forms - ========================================================================== */ - -/* - * Define consistent border, margin, and padding. - */ - -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} - -/* - * 1. Corrects color not being inherited in IE 8/9. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - */ - -legend { - border: 0; /* 1 */ - padding: 0; /* 2 */ -} - -/* - * 1. Corrects font family not being inherited in all browsers. - * 2. Corrects font size not being inherited in all browsers. - * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome - */ - -button, -input, -select, -textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 2 */ - margin: 0; /* 3 */ -} - -/* - * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. - */ - -button, -input { - line-height: normal; -} - -/* - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Corrects inability to style clickable `input` types in iOS. - * 3. Improves usability and consistency of cursor style between image-type - * `input` and others. - */ - -button, -html input[type="button"], /* 1 */ -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; /* 2 */ - cursor: pointer; /* 3 */ -} - -/* - * Re-set default cursor for disabled elements. - */ - -button[disabled], -input[disabled] { - cursor: default; -} - -/* - * 1. Addresses box sizing set to `content-box` in IE 8/9. - * 2. Removes excess padding in IE 8/9. - */ - -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/* - * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome. - * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome - * (include `-moz` to future-proof). - */ - -input[type="search"] { - -webkit-appearance: textfield; /* 1 */ - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; /* 2 */ - box-sizing: content-box; -} - -/* - * Removes inner padding and search cancel button in Safari 5 and Chrome - * on OS X. - */ - -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* - * Removes inner padding and border in Firefox 4+. - */ - -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; -} - -/* - * 1. Removes default vertical scrollbar in IE 8/9. - * 2. Improves readability and alignment in all browsers. - */ - -textarea { - overflow: auto; /* 1 */ - vertical-align: top; /* 2 */ -} - -/* ========================================================================== - Tables - ========================================================================== */ - -/* - * Remove most spacing between table cells. - */ - -table { - border-collapse: collapse; - border-spacing: 0; -} \ No newline at end of file diff --git a/stylesheets/settings/_breakpoints.scss b/stylesheets/settings/_breakpoints.scss deleted file mode 100644 index b45abd098568..000000000000 --- a/stylesheets/settings/_breakpoints.scss +++ /dev/null @@ -1,15 +0,0 @@ -/* - * This is a series-d manifest file. - * - * Here, we import responsive variables specified elsewhere - * - */ - - -/* SERIES D SHAME + WIP */ - - $D7: 'screen and (min-width: 320px)'; /* includes iPhone, */ - $D6: 'screen and (min-width: 480px)'; - $D5: 'screen and (min-width: 822px)'; - $D4: 'screen and (min-width: 1081px)'; - $D3: 'screen and (min-width:1441px)'; \ No newline at end of file diff --git a/stylesheets/settings/_reset.scss b/stylesheets/settings/_reset.scss deleted file mode 100644 index 48dda5a102ad..000000000000 --- a/stylesheets/settings/_reset.scss +++ /dev/null @@ -1,11 +0,0 @@ -body { - font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-weight: normal; - text-align: center; - -webkit-font-smoothing: antialiased; - -moz-font-smoothing: antialiased; - -ms-font-smoothing: antialiased; - -o-font-smoothing: antialiased; - font-smoothing: antialiased; - hanging-punctuation: first; -} \ No newline at end of file diff --git a/stylesheets/settings/_swatchbook.scss b/stylesheets/settings/_swatchbook.scss deleted file mode 100644 index 825a0caceae7..000000000000 --- a/stylesheets/settings/_swatchbook.scss +++ /dev/null @@ -1,3 +0,0 @@ - -$blue:#00badd; -$lightblue:lighten($blue, 53%); \ No newline at end of file diff --git a/stylesheets/view/_conversation.scss b/stylesheets/view/_conversation.scss index a4b851939d41..20ea696de49e 100644 --- a/stylesheets/view/_conversation.scss +++ b/stylesheets/view/_conversation.scss @@ -1,82 +1,302 @@ -.conversation { - margin-top:10px; - width:100%; - padding-right:12px; - box-sizing: border-box; - display: block; - margin-bottom:10px; - text-align: left; +@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,700); + +body, input { + font-family: $roboto; } -ul.discussion { - display:block; - overflow:auto; - padding:0; +body { + margin: 0; } -.entry { - display:block; - width:100%; - float:left; - margin-bottom:10px; +.title-bar { + position: relative; + z-index: 1; + height: 36px; + line-height: 24px; + background: $blue; + box-shadow: 0 -4px 3px 4px rgba(darken($blue, 30%), 0.8); + + button { + height: 36px; + line-height: 36px; + float: right; + margin-right: 8px; + padding: 0; + border: 0; + outline: 0; + font-size: 36px; + color: white; + background: transparent; + } +} + +.fab { + z-index: 1; + position: fixed; + right: 16px; + bottom: 22px; + height: 60px; + width: 60px; + border: 0; + border-radius: (60px / 2); + outline: 0; + font: 300 36px $roboto; + color: white; + background: $blue; + box-shadow: 0 8px 8px -8px rgba(darken($blue, 50%), 0.8); + transition: box-shadow 0.33s, transform 0.33s, background 0.33s; + + &:hover { + background: darken($blue, 3%); + box-shadow: 0 8px 18px -8px rgba(darken($blue, 50%), 0.9); + transform: translate3d(0, -1px, 0); + } +} + +button { + cursor: pointer; +} + +.timestamp { + font-size: 12px; +} + +.message-list { + padding: 0; + list-style: none; + font-size: 16px; + font-weight: 300; + + li { + margin: 0 8px 16px; + + &::after { + visibility: hidden; + display: block; + font-size: 0; + content: " "; + clear: both; + height: 0; + } + } + + p { + margin: 0; + } + + .bubble { + position: relative; + left: -2px; + display: inline-block; + vertical-align: top; + max-width: calc(100% - 2 * 54px - 2 * 12px - 8px); + padding: 9px 12px; + border-radius: 4px; + box-shadow: 0 3px 3px -4px black; + + &::before, &::after { + content: ''; + position: absolute; + height: 0; + width: 0; + } + + &::before { + top: (54px / 2) - 8px; + border-top: 8px solid transparent; + border-bottom: 8px solid transparent; + } + + &::after { + top: (54px / 2) - 6px; + border-top: 6px solid transparent; + border-bottom: 6px solid transparent; + } + } + + .incoming { + .bubble { + color: $grey_d; + background: $grey_l; + + &::before { + left: -10px; + border-right: 10px solid white; + } + + &::after { + left: -8px; + border-right: 8px solid $grey_l; + } + } + } + + .outgoing { + + img, .bubble { + float: right; + } + + .bubble { + clear: left; + color: white; + background: $blue; + + .timestamp { + color: $blue_l; + } + + &::before { + right: -10px; + border-left: 10px solid white; + } + + &::after { + right: -8px; + border-left: 8px solid $blue; + } + } + } + + + img { + height: 54px; + width: 54px; + // delete next 2 lines + box-sizing: border-box; + border: (54px / 2) $blue solid; + border-radius: (54px / 2); + } .timestamp { - font-size: 0.75em; - display: block; + margin-top: 3px; + float: right; + } +} - &:incoming { - color: gray; - } +.bottom-bar { + position: fixed; + bottom: 0; + height: 36px; + width: 100%; + border-top: 1px solid $grey_l; + background: white; - &:outgoing { - color: whitesmoke; - } + button, input { + color: $grey_d; } - &.delivered .timestamp { + button { + position: absolute; + top: 0; + height: 100%; + width: 36px; + padding: 0; + border: 0; + outline: 0; + font-size: 24px; + background: transparent; + } + + .attachments-btn { + left: 0; + } + + .send-btn { + right: 0; + } + + form, input { + height: 100%; + width: 100%; + } + + input { + height: 100%; + width: 100%; + box-sizing: border-box; + padding: 0 36px; + border: 0; + outline: 0; + font-size: 16px; + background: white; + } +} + +// conversation list part +.index { + color: $grey_d; + background: #eee; + + .contact { + position: relative; + padding: 12px; + background: white; + cursor: pointer; + transition: background 0.2s; + &::after { - margin-left: 4px; - content: "✓"; + content: ''; + position: absolute; + right: 16px; + bottom: 0; + height: 1px; + width: calc(100% - 12px - 54px - 2 * 8px - 16px); + background: #eee; + } + + &:hover { + background: #f8f8f8; + } + + &:last-child { + box-shadow: 0 1px 3px rgba(#aaa, 0.8); + + &::after { + display: none; + } } } -} -.bubble { - //position:relative; - border-radius:16px; - padding:12px; - bottom:10px; - width:auto; - background-color:whitesmoke; - &:first-of-type { - margin-top: 0; + .contact-details { + vertical-align: top; + display: inline-block; + width: calc(100% - 54px - 2 * 12px - 8px); + margin: 4px 0 0 8px; + } + + .contact-name { + margin: 0; + font-size: 16px; + font-weight: 400; + } + + .last-message { + margin: 6px 0; + font-size: 14px; + font-weight: 300; + } + + .timestamp { + position: absolute; + top: 14px; + right: 12px; + color: #888; + } + + img { + height: 54px; + width: 54px; + // delete next 2 lines + box-sizing: border-box; + border: (54px / 2) $grey_l solid; + border-radius: (54px / 2); + } + + // TODO: RJS + // SHAAAAAAME!!!! + .message-list { + display: none; } - ul, li { - display:block; - margin:0; - padding:0; - } - .message { - position:relative; - font-size:14px; - -webkit-text-stroke: 0.35px; - } - &.incoming { - float:left; - text-align: left; - margin-left:12px; - } - &.sent { - float:right; - clear:right; - text-align: right; - background-color:#00badd; - color:white; - } - &.sent .volley { - } -} -.avatar img { - max-width: 100%; } diff --git a/stylesheets/view/_gutter.scss b/stylesheets/view/_gutter.scss deleted file mode 100644 index bc0cd911cd67..000000000000 --- a/stylesheets/view/_gutter.scss +++ /dev/null @@ -1,107 +0,0 @@ -.gutter { - width:100%; - float:left; - border-right:1px solid lightgray; - position:relative; - box-sizing: border-box; - overflow: scroll; - background-color:white; - padding-bottom:80px; - - .contact { - cursor:pointer; - float:left; - width:100%; - border-bottom:1px solid whitesmoke; - color:#333; - &:hover { - background-color:whitesmoke; - margin-top:-1px; - border-bottom:1px solid lightgray; - border-top:1px solid lightgray; - } - &.active { - background-color:$lightblue; - margin-top:-1px; - border-bottom:1px solid lightgray; - border-top:1px solid lightgray; - } - .avatar { - height:42px; - width:42px; - border-radius:42px; - cursor:pointer; - display:inline-block; - margin:10px; - margin-right:14px; - float:left; - clear:both; - background-color:whitesmoke; - } - .contact-details { - display:none; - } - } - - z-index:100; - .search { - padding:10px; - border-bottom:1px solid whitesmoke; - input[type=search] { - box-sizing: border-box; - font-size:12px; - outline:0; - width:100%; - margin:0; - letter-spacing: 0.25px; - padding:4px 8px; - border:1px solid lightgray; - } - &.d6 { - display:block; - } - } - .contact { - .avatar { - height:56px; - width:56px; - } - .contact-details { - display:block; - position:relative; - width:156px; - float:left; - text-align: left; - h3 { - font-size:13px; - margin-bottom:4px; - } - .contact-name { - width: 105px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - .last-message { - color:lighten(#333, 40%); - letter-spacing:0.15px; - -webkit-text-stroke: 0.2px; - margin:0; - font-size: 12px; - width: 150px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - .last-timestamp { - position:absolute; - top:14px; - right:8px; - font-size:12px; - font-weight: 500; - color:gray; - } - } - } - -} \ No newline at end of file diff --git a/stylesheets/view/_search.scss b/stylesheets/view/_search.scss deleted file mode 100644 index 846ff454579e..000000000000 --- a/stylesheets/view/_search.scss +++ /dev/null @@ -1,28 +0,0 @@ -@media #{$D7} { - .search { - padding:10px; - border-bottom:1px solid whitesmoke; - input[type=search] { - box-sizing: border-box; - font-size:12px; - outline:0; - width:100%; - margin:0; - letter-spacing: 0.25px; - padding:4px 8px; - border:1px solid lightgray; - } - } - .gutter .search { - display:none; - } -} - -@media #{$D6} { - .search { - display:none; - } - .gutter .search { - display:block; - } -} \ No newline at end of file diff --git a/stylesheets/view/_send_message_area.scss b/stylesheets/view/_send_message_area.scss deleted file mode 100644 index c36c90e5366a..000000000000 --- a/stylesheets/view/_send_message_area.scss +++ /dev/null @@ -1,77 +0,0 @@ -@media #{$D7} { - .send-message-area { - position:fixed; - bottom:0; - background-color:whitesmoke; - box-sizing: border-box; - float:left; - padding:16px; - width:100%; - border-top:1px solid lightgray; - right:0; - .send-message { - outline:0; - border:0; - width:100%; - padding:0; - resize:auto; - } - } - - .message-composer { - vertical-align: top; - position:relative; - background-color:white; - margin-bottom:20px; - padding:8px; - border:1px solid lightgray; - font-size:14px; - color:gray; - padding-bottom:80px; - .attachments { - position:absolute; - bottom:0; - color:lightgray; - width:64px; - text-align: center; - padding:6px 4px 0 4px; - margin-bottom:10px; - border-top:1px solid lightgray; - } - } - - .extension-details { - font-size:11px; - color:darken(lightgray, 10%); - a { - color:gray; - text-decoration: none; - } - ul { - padding:0; - } - li { - display:inline-block; - &:after { - content:" • "; - color:lightgray; - } - &:last-of-type:after { - content:none; - } - } - } -} - -@media #{$D6} { - .send-message-area { - padding-left:258px; - } -} - -@media #{$D5} { - .send-message-area { - padding-right:258px; - } - -}