messaging_4 0.0.1

data/app/assets/stylesheets/messaging/960.css

@@ -0,0 +1,357 @@
+/*
+  960 Grid System ~ Core CSS.
+  Learn more ~ http://960.gs/
+
+  Licensed under GPL and MIT.
+*/
+
+/*
+  Forces backgrounds to span full width,
+  even if there is horizontal scrolling.
+  Increase this if your layout is wider.
+
+  Note: IE6 works fine without this fix.
+*/
+
+body {
+  min-width: 960px;
+}
+
+/* `Containers
+----------------------------------------------------------------------------------------------------*/
+
+.container_12 {
+  margin-left: auto;
+  margin-right: auto;
+  width: 960px;
+}
+
+/* `Grid >> Global
+----------------------------------------------------------------------------------------------------*/
+
+.grid_1,
+.grid_2,
+.grid_3,
+.grid_4,
+.grid_5,
+.grid_6,
+.grid_7,
+.grid_8,
+.grid_9,
+.grid_10,
+.grid_11,
+.grid_12 {
+  display: inline;
+  float: left;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+.push_1, .pull_1,
+.push_2, .pull_2,
+.push_3, .pull_3,
+.push_4, .pull_4,
+.push_5, .pull_5,
+.push_6, .pull_6,
+.push_7, .pull_7,
+.push_8, .pull_8,
+.push_9, .pull_9,
+.push_10, .pull_10,
+.push_11, .pull_11 {
+  position: relative;
+}
+
+/* `Grid >> Children (Alpha ~ First, Omega ~ Last)
+----------------------------------------------------------------------------------------------------*/
+
+.alpha {
+  margin-left: 0;
+}
+
+.omega {
+  margin-right: 0;
+}
+
+/* `Grid >> 12 Columns
+----------------------------------------------------------------------------------------------------*/
+
+.container_12 .grid_1 {
+  width: 60px;
+}
+
+.container_12 .grid_2 {
+  width: 140px;
+}
+
+.container_12 .grid_3 {
+  width: 220px;
+}
+
+.container_12 .grid_4 {
+  width: 300px;
+}
+
+.container_12 .grid_5 {
+  width: 380px;
+}
+
+.container_12 .grid_6 {
+  width: 460px;
+}
+
+.container_12 .grid_7 {
+  width: 540px;
+}
+
+.container_12 .grid_8 {
+  width: 620px;
+}
+
+.container_12 .grid_9 {
+  width: 700px;
+}
+
+.container_12 .grid_10 {
+  width: 780px;
+}
+
+.container_12 .grid_11 {
+  width: 860px;
+}
+
+.container_12 .grid_12 {
+  width: 940px;
+}
+
+/* `Prefix Extra Space >> 12 Columns
+----------------------------------------------------------------------------------------------------*/
+
+.container_12 .prefix_1 {
+  padding-left: 80px;
+}
+
+.container_12 .prefix_2 {
+  padding-left: 160px;
+}
+
+.container_12 .prefix_3 {
+  padding-left: 240px;
+}
+
+.container_12 .prefix_4 {
+  padding-left: 320px;
+}
+
+.container_12 .prefix_5 {
+  padding-left: 400px;
+}
+
+.container_12 .prefix_6 {
+  padding-left: 480px;
+}
+
+.container_12 .prefix_7 {
+  padding-left: 560px;
+}
+
+.container_12 .prefix_8 {
+  padding-left: 640px;
+}
+
+.container_12 .prefix_9 {
+  padding-left: 720px;
+}
+
+.container_12 .prefix_10 {
+  padding-left: 800px;
+}
+
+.container_12 .prefix_11 {
+  padding-left: 880px;
+}
+
+/* `Suffix Extra Space >> 12 Columns
+----------------------------------------------------------------------------------------------------*/
+
+.container_12 .suffix_1 {
+  padding-right: 80px;
+}
+
+.container_12 .suffix_2 {
+  padding-right: 160px;
+}
+
+.container_12 .suffix_3 {
+  padding-right: 240px;
+}
+
+.container_12 .suffix_4 {
+  padding-right: 320px;
+}
+
+.container_12 .suffix_5 {
+  padding-right: 400px;
+}
+
+.container_12 .suffix_6 {
+  padding-right: 480px;
+}
+
+.container_12 .suffix_7 {
+  padding-right: 560px;
+}
+
+.container_12 .suffix_8 {
+  padding-right: 640px;
+}
+
+.container_12 .suffix_9 {
+  padding-right: 720px;
+}
+
+.container_12 .suffix_10 {
+  padding-right: 800px;
+}
+
+.container_12 .suffix_11 {
+  padding-right: 880px;
+}
+
+/* `Push Space >> 12 Columns
+----------------------------------------------------------------------------------------------------*/
+
+.container_12 .push_1 {
+  left: 80px;
+}
+
+.container_12 .push_2 {
+  left: 160px;
+}
+
+.container_12 .push_3 {
+  left: 240px;
+}
+
+.container_12 .push_4 {
+  left: 320px;
+}
+
+.container_12 .push_5 {
+  left: 400px;
+}
+
+.container_12 .push_6 {
+  left: 480px;
+}
+
+.container_12 .push_7 {
+  left: 560px;
+}
+
+.container_12 .push_8 {
+  left: 640px;
+}
+
+.container_12 .push_9 {
+  left: 720px;
+}
+
+.container_12 .push_10 {
+  left: 800px;
+}
+
+.container_12 .push_11 {
+  left: 880px;
+}
+
+/* `Pull Space >> 12 Columns
+----------------------------------------------------------------------------------------------------*/
+
+.container_12 .pull_1 {
+  left: -80px;
+}
+
+.container_12 .pull_2 {
+  left: -160px;
+}
+
+.container_12 .pull_3 {
+  left: -240px;
+}
+
+.container_12 .pull_4 {
+  left: -320px;
+}
+
+.container_12 .pull_5 {
+  left: -400px;
+}
+
+.container_12 .pull_6 {
+  left: -480px;
+}
+
+.container_12 .pull_7 {
+  left: -560px;
+}
+
+.container_12 .pull_8 {
+  left: -640px;
+}
+
+.container_12 .pull_9 {
+  left: -720px;
+}
+
+.container_12 .pull_10 {
+  left: -800px;
+}
+
+.container_12 .pull_11 {
+  left: -880px;
+}
+
+/* `Clear Floated Elements
+----------------------------------------------------------------------------------------------------*/
+
+/* http://sonspring.com/journal/clearing-floats */
+
+.clear {
+  clear: both;
+  display: block;
+  overflow: hidden;
+  visibility: hidden;
+  width: 0;
+  height: 0;
+}
+
+/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
+
+.clearfix:before,
+.clearfix:after,
+.container_12:before,
+.container_12:after {
+  content: '.';
+  display: block;
+  overflow: hidden;
+  visibility: hidden;
+  font-size: 0;
+  line-height: 0;
+  width: 0;
+  height: 0;
+}
+
+.clearfix:after,
+.container_12:after {
+  clear: both;
+}
+
+/*
+  The following zoom:1 rule is specifically for IE6 + IE7.
+  Move to separate stylesheet if invalid CSS is a problem.
+*/
+
+.clearfix,
+.container_12 {
+  zoom: 1;
+}

data/app/assets/stylesheets/messaging/application.css

@@ -0,0 +1,8 @@
+/*
+ * This is a manifest file that'll automatically include all the stylesheets available in this directory
+ * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
+ * the top of the compiled file, but it's generally better to create a new file per style scope.
+ *= require_self
+ *= require ./reset
+ *= require ./messages
+*/

data/app/assets/stylesheets/messaging/messages.sass

@@ -0,0 +1,225 @@
+$font_a: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif
+$font_b: Georgia, serif
+
+$color_a: #450003
+$color_b: #5C0002
+$color_c: #94090D
+$color_d: #D40D12
+$color_e: #FFED75
+
+html, body
+  font-family: $font_a
+
+a
+  text-decoration: none
+  color: $color_d
+
+a:hover
+  color: $color_c
+
+header
+  .sign-out
+    float: right
+    font-size: 16px
+    padding: 7px
+    background-color: rgba(255,255,255,0.2)
+    border-radius: 5px
+    margin-top: 20px
+    color: #ccc
+    border: 1px solid #999
+  .sign-out:hover
+    color: #ccc
+    border: 1px solid #ccc
+    background-color: rgba(255,255,255,0.3)
+  h1
+    color: $color_e
+    font-size: 40px
+    float: left
+    text-shadow: 0 1px 0 black
+    margin-top: 15px
+    margin-left: 10px
+  height: 75px
+  background-color: $color_a
+  background-image: -webkit-linear-gradient(top, $color_c, $color_b)
+  border-bottom: 1px solid black
+  box-shadow: 0 0 7px black
+
+nav
+  margin: 9px 0
+  > a
+    display: block
+    margin: 1px 0
+    text-align: left
+    padding: 10px
+    vertical-align: middle
+    display: block
+    font-weight: bold
+    &:hover
+      background-color: #eee
+    &.selected
+      background-color: $color_e
+    &.compose
+      background-color: $color_d
+      text-shadow: 0 1px 0 black
+      color: white
+      text-align: center
+      margin-bottom: 40px
+  form
+    margin: 10px 0
+
+ul.ui-autocomplete
+  position: absolute
+  list-style: none
+  margin: 0
+  padding: 0
+  border: solid 1px #999
+  cursor: default
+  > li
+    background-color: #FFF
+    border-top: solid 1px #DDD
+    margin: 0
+    padding: 0
+    > a
+      color: #000
+      display: block
+      padding: 3px
+      font-size: 18px
+    > a.ui-state-hover, > a.ui-state-active
+      background-color: #FFFCB2
+
+.unread
+  font-weight: bold
+
+.body
+  font-family: $font_b
+
+html, body, #wrapper
+  height: 100%
+
+body > #wrapper
+  height: auto
+  min-height: 100%
+
+#content
+  margin-top: 30px
+  padding-bottom: 150px
+
+#footer
+  position: relative
+  margin-top: -150px
+  height: 149px
+  clear: both
+  background-color: #ccc
+  border-top: 1px solid $color_d
+  a
+    display: block
+    color: black
+    margin: 20px 0
+    font-weight: bold
+    text-shadow: 0 1px 0 white
+
+h2
+  margin: 10px 0
+  font-size: 30px
+
+#box
+  margin: 45px 0
+  width: 100%
+  background-color: #eee
+  overflow: hidden
+  a
+    color: black
+    text-overflow: ellipsis
+    padding: 0 10px
+  td, th
+    vertical-align: middle
+    white-space: nowrap
+    overflow: hidden
+    padding: 10px 5px
+  tr
+    border-bottom: 1px solid #bbb
+  .unread
+    font-weight: bold
+
+#reply
+  margin-top: 10px
+  padding-top: 10px
+  label
+    font-size: 20px
+    font-weight: bold
+    margin: 20px 0
+    display: block
+
+textarea, input[type='text']
+  border: 1px solid black
+  font-size: 16px
+  font-family: $font_a
+
+textarea
+  width: 100%
+  display: block
+  font-family: $font_b
+
+.button, input[type='submit']
+  background-color: $color_d
+  border: 0
+  color: white
+  padding: 7px 20px
+  font-size: 18px
+  cursor: pointer
+  margin: 20px 0
+  text-shadow: 0 1px 0 black
+  font-weight: bold
+
+#conversation
+  margin-top: 27px
+  li
+    border-bottom: 1px dotted black
+    margin: 10px 0
+    padding: 10px 0
+    .head
+      .from
+        float: left
+        margin: 20px 0
+        font-size: 14px
+        font-weight: bold
+      .date
+        float: right
+        margin: 20px 0
+        font-size: 14px
+        font-weight: bold
+    .body
+      clear: both
+      padding: 20px 0
+      line-height: 1.4
+    .attachment
+      margin: 10px 0
+    .attachment:before
+      content: 'Attachment: '
+
+#compose
+  margin: 55px 0
+  label
+    font-size: 20px
+    font-weight: bold
+    margin: 20px 0 5px
+    display: block
+
+#alert, #notice
+  box-shadow: 0 0 7px black
+  border-bottom: 1px solid black
+  font-weight: bold
+  text-align: center
+  padding: 10px
+#alert
+  background-color: $color_d
+  color: white
+#notice
+  background-color: $color_e
+
+#actions
+  a
+    display: block
+    float: right
+  a:hover
+    color: white