Add sass stylesheets

This commit is contained in:
lilia 2014-11-07 00:17:27 -08:00
parent 7c25ff845b
commit 349e7e18f6
13 changed files with 825 additions and 1 deletions

73
stylesheets/_gutter.scss Normal file
View file

@ -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;
}
}

0
stylesheets/_shame.scss Normal file
View file

View file

@ -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;
}
}
}
}

View file

@ -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;
}
}

26
stylesheets/manifest.scss Normal file
View file

@ -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";

View file

@ -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;
}

View file

@ -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)';

View file

@ -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;
}

View file

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

View file

@ -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 {
}
}

View file

@ -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;
}
}
}
}
}

View file

@ -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;
}
}

View file

@ -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;
}
}