Add sass stylesheets

stylesheets/_gutter.scss

@@ -0,0 +1,73 @@
+
+.gutter {
+  float:left;
+  border-right:1px solid lightgray;
+  width:240px;
+  position:relative;
+  background-color:blue;
+  z-index:100;
+  .contact {
+    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;
+    }
+  }
+  .contact-details {
+    position:relative;
+    width:156px;
+    float:left;
+    text-align: left;
+    h3 {
+      font-size:13px;
+      margin-bottom:4px;
+    }
+    .last-message {
+      color:lighten(#333, 40%);
+      letter-spacing:0.15px;
+      -webkit-text-stroke: 0.2px;
+      margin:0;
+      font-size: 12px;
+    }
+    .last-timestamp {
+      position:absolute;
+      top:14px;
+      right:8px;
+      font-size:12px;
+      font-weight: 500;
+      color:gray;
+    }
+  }
+}
+.avatar {
+  cursor:pointer;
+  height:56px;
+  width:56px;
+  display:inline-block;
+  margin:10px;
+  margin-right:14px;
+  float:left;
+  clear:both;
+  background-color:whitesmoke;
+}
+
+.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;
+  }
+}
+

stylesheets/context/_notifications.scss

@@ -0,0 +1,39 @@
+.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;
+      }
+    }
+  }
+}

stylesheets/context/_title_bar.scss

@@ -0,0 +1,11 @@
+.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;
+  }
+}

stylesheets/manifest.scss

@@ -0,0 +1,26 @@
+// 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";
+
+// Build the main view
+  @import "view/search";
+  @import "view/gutter";
+  @import "view/conversation";
+  @import "view/send_message_area";
+
+// Not sure where something goes, or
+// implementing a known CSS hack? Add it
+// to `shame.scss`, and it will be fixed!
+
+  @import "shame";

stylesheets/normalize.css

@@ -1 +1,375 @@
-/*! normalize.css v2.0.1 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace, serif;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing: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;
+}

stylesheets/settings/_breakpoints.scss

@@ -0,0 +1,15 @@
+/*
+ * 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)';

stylesheets/settings/_reset.scss

@@ -0,0 +1,11 @@
+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;
+}

stylesheets/settings/_swatchbook.scss

@@ -0,0 +1,3 @@
+
+$blue:#00badd;
+$lightblue:lighten($blue, 53%);

stylesheets/view/_conversation.scss

@@ -0,0 +1,58 @@
+.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;
+}
+
+.bubble {
+  //position:relative;
+  border-radius:16px;
+  padding:12px;
+  bottom:10px;
+  width:auto;
+  background-color:whitesmoke;
+  &:first-of-type {
+    margin-top: 0;
+  }
+  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 {
+  }
+}

stylesheets/view/_gutter.scss

@@ -0,0 +1,109 @@
+@media #{$D7} {
+  .gutter {
+    width:64px;
+    float:left;
+    border-right:1px solid lightgray;
+    position:relative;
+    box-sizing: border-box;
+    height:458px;
+    overflow: scroll;
+    background-color:white;
+    padding-bottom:80px;
+    .search {
+      //display:none;
+    }
+    .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;
+      }
+    }
+  }
+}
+
+@media #{$D6} {
+
+  .gutter {
+    width:240px;
+    height:auto;
+    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;
+        }
+        .last-message {
+          color:lighten(#333, 40%);
+          letter-spacing:0.15px;
+          -webkit-text-stroke: 0.2px;
+          margin:0;
+          font-size: 12px;
+        }
+        .last-timestamp {
+          position:absolute;
+          top:14px;
+          right:8px;
+          font-size:12px;
+          font-weight: 500;
+          color:gray;
+        }
+      }
+    }
+
+  }
+}

stylesheets/view/_search.scss

@@ -0,0 +1,28 @@
+@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;
+  }
+}

stylesheets/view/_send_message_area.scss

@@ -0,0 +1,77 @@
+@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;
+  }
+
+}