engineyard-theme 1.0.5

data/example/public/engineyard-theme/stylesheets/sass/_tables.sass

@@ -0,0 +1,646 @@
+// Use // instead of /* */ to hide from production
+
+// --------------------------------------------------
+
+/* TABLES
+// - General
+// - Specific Table UI Elements
+// - SendGrid
+
+// --------------------------------------------------
+
+
+
+// --------------------------------------------------
+// General
+// --------------------------------------------------
+
+table, caption, thead, tbody, tfoot, tr, th, td
+  @include reset
+  border: 0
+
+table
+  border-collapse: collapse
+  border-spacing: 0
+  width: 100%
+
+caption
+  padding: 12px 0
+  font-size: $font-size-h3
+  vertical-align: top
+  text-align: left
+
+th, td
+  padding: 7px 10px
+  min-height: 18px
+  vertical-align: top
+
+  p
+    padding: 2px 0
+    line-height: 1.25
+
+  img
+    vertical-align: top
+
+  input.text, select, textarea
+    font-size: $font-size-main
+
+  input.text
+    width: 200px
+
+
+
+
+// --------------------------------------------------
+// Specific Table UI Elements
+// --------------------------------------------------
+
+th, td
+  p.application_framework
+    font-size: $font-size-small
+
+table
+  margin-bottom: 12px
+
+td.deployit
+  padding-left: 0
+  label
+    margin-left: 10px
+  input.text
+    width: 100px
+
+
+
+// ---------------------------------------------------
+// Specific Tables
+// ---------------------------------------------------
+
+$table-box-shadow-value: 0 1px 3px darken($color-background, 25%)
+
+table.themed
+  margin-bottom: 18px
+  border-top: 1px solid lighten($color-border, 5%)
+  @include rounded-box-top
+  -moz-box-shadow: $table-box-shadow-value
+  -webkit-box-shadow: $table-box-shadow-value
+  box-shadow: $table-box-shadow-value
+  th
+    background: darken($color-background, 5%)
+    text-align: left
+  thead th
+    vertical-align: middle
+    border-top: 1px solid lighten($color-background-alt, 25%)
+    background: darken($color-background-alt, 15%)
+    background: -moz-linear-gradient(top, lighten($color-background-alt, 7.5%), darken($color-background-alt, 15%))
+    background: -webkit-gradient(linear, left top, left bottom, from(lighten($color-background-alt, 7.5%)), to(darken($color-background-alt, 15%)))
+    text-shadow: 0 1px 2px lighten($color-background-alt, 7.5%)
+  td
+    background: #fff
+    border-bottom: 1px solid lighten($color-background-alt, 6.25%)
+    border-right: 1px solid lighten($color-background-alt, 6.25%)
+    vertical-align: middle
+    img
+      vertical-align: middle
+
+    &.instance_status
+      width: 312px
+      img
+        position: relative
+        top: 4px
+        float: left
+        margin-left: -2px
+      span
+        display: block
+        margin-left: 16px
+
+    &.action
+      width: 16px
+      font-size: $font-size-small
+      text-align: center
+      color: $color-text-alt
+      white-space: nowrap
+
+    &.application_name
+      padding-bottom: 8px
+
+    &.deployit
+      width: 480px
+
+  tr.empty_environment td
+    @include font-bold
+
+table.app_deployments
+  tbody.app_deployment_root
+    border-bottom: 2px solid #d4dae1
+    td.application_name
+      //overflow: hidden
+    p.recent_deployments
+      font-size: 11px
+    p.appname, p.application_framework, p.recent_deployments
+      width: 128px
+      overflow: hidden
+      text-overflow: ellipsis
+      -o-text-overflow: ellipsis
+      a
+        //width: 155px
+    .deployment_status
+      padding-left: 18px
+      background-repeat: no-repeat
+      background-position: left
+      background-image: url('/images/icon_gray.png')
+      &.loading
+        background-image: url('/images/loading.gif')
+      &.successful
+        background-image: url('/images/icon_green.png')
+      &.failed
+        background-image: url('/images/icon_red.png')
+
+table.alerts
+  td
+    border-bottom: 0
+    //border-right: 0
+  //tbody
+    border-top: 0
+  //label
+    display: inline
+  &+table.alerts
+    border-bottom: 1px solid lighten($color-background-alt, 6.25%)
+  td.expandbutton, td.empty
+    width: 25px
+
+table.more_options
+  td
+    padding: 8px 10px 9px
+    width: 50%
+    vertical-align: top
+    p
+      padding: 0
+      font-size: $font-size-small
+      line-height: 15px
+      color: $color-text-alt
+    a, strong
+      line-height: 18px
+      @include font-bold
+      font-size: $font-size-main
+    br
+    img
+      position: relative
+      left: -3px
+      margin-right: 3px
+      padding: 3px
+      border: 1px solid lighten($color-border, 6.25%)
+
+
+div.instances table
+  &.themed
+    -moz-box-shadow: none
+    -webkit-box-shadow: none
+    box-shadow: none
+    th
+      padding: 12px
+      border: 1px solid lighten($color-background-alt, 6.25%)
+        width: 0 1px 1px 0
+      text-align: left
+      vertical-align: middle
+      &.first
+        -moz-border-radius-topleft: 6px
+        -webkit-border-top-left-radius: 6px
+      &.last
+        -moz-border-radius-topright: 6px
+        -webkit-border-top-right-radius: 6px
+
+table.appz
+  th
+    border-bottom: 1px solid #ccc
+    border-top: 1px solid #fff
+    @include font-normal
+    font-size: $font-size-small
+    vertical-align: middle
+    &.expandbutton
+      width: 16px
+      padding-right: 0
+      img
+        cursor: pointer
+        vertical-align: middle
+    &.app-name
+      width: 144px
+      a
+        @include font-bold
+        font-size: $font-size-main
+    &.delete
+      width: 96px
+      text-align: right
+  td
+    border: 0
+    border-top: 1px solid #fff
+    &.empty
+      width: 16px
+      padding-right: 0
+  .codeblock
+    margin-bottom: 3px
+    display: block
+    width: 692px
+  code
+    margin-bottom: 6px
+    display: block
+    line-height: 1
+
+table.logs
+  -moz-box-shadow: none
+  -webkit-box-shadow: none
+  box-shadow: none
+
+table td.chef
+  font-family: Monaco, monospace
+  color: $color-text-alt
+
+
+table.apps
+  .application_framework
+    width: 50px
+    text-align: center
+
+  .application_name
+    width: 130px
+  .action
+    width: 40px
+    text-align: center
+    white-space: nowrap
+
+.themed
+  td
+    .sparkline
+      padding-left: 10px
+      height: 1em
+
+    .graph
+      position: relative
+      margin: -6px 0
+      border: 1px solid #EEE
+
+  td.options
+    width: 40px
+    padding-left: 10px
+    padding-right: 10px
+    float: none
+
+  ul.inlineList
+    margin: 0
+    padding: 0
+
+    li
+      display: inline
+      border-left: 1px solid #CCC
+      padding-left: 6px
+
+      &:first-child
+        border-left: none
+        padding-left: 0
+
+
+.billing
+  width: 640px
+
+  td:first-child, th:first-child
+    width: 320px
+
+  thead th
+    border: none
+    text-transform: uppercase
+    font-weight: bold
+    border-bottom: 1px solid darken($color-background-alt, 6.25%)
+
+  td, th
+    width: 80px
+
+  .subtotal td
+    border-left: none
+    border-bottom: none
+    color: #333
+    padding-right: 0
+
+    &:first-child
+      text-align: right
+
+
+tr.totals:hover td
+  background: none
+
+
+.totals
+  td
+    border: none
+    padding-bottom: 0
+
+    &:first-child
+      text-align: right
+      padding-right: 0
+
+  .owed td
+    color: #000
+
+.services
+  width: auto
+
+  td:first-child
+    font-weight: bold
+
+form .search
+  width: auto
+
+.col1, .col2
+  table
+    width: auto
+
+    td
+      padding-top: 12px
+      vertical-align: bottom
+
+    input
+      width: 285px
+
+      &[type="submit"], &[type="button"], .submit, .button
+        width: auto
+
+    &.search
+      width: 100%
+
+      td
+        padding-bottom: 0
+
+        input
+          width: 198px
+
+          &[type="submit"], &[type="button"], .submit, .button
+            width: auto
+
+form
+
+  table
+
+    input
+      margin-bottom: 0
+
+
+table
+  input.short
+    width: 90px
+
+  &.themed td form
+    select
+      width: auto
+
+    input.submit
+      margin: 0
+      padding: 1px 10px
+
+
+table
+  &.form td
+    vertical-align: bottom
+
+  &.oneLine
+    width: auto
+    td
+      padding-bottom: 24px
+      font-size: $font-size-main
+      border: 0
+      select
+        margin-top: 2px
+      label
+        width: auto
+
+table.admin_alerts_environments
+  border-collapse: collapse
+  border-color: #888
+  border-style: solid
+  border-width: 1px
+  width: 100%
+
+
+tr.admin_alerts_header
+  background-color: #DCDCDC
+  border-color: #888
+  border-style: solid
+  border-width: 1px 0
+  text-align: left
+
+
+.admin_alerts_header th
+  font-weight: bold
+  padding: 10px
+
+  span
+    font-size: smaller
+    font-weight: normal
+
+table.themed.admin-table
+  tbody tr
+    border-bottom: 1px solid $color-border
+    &:hover
+      background: darken($color-background, 5%)
+    &:first-child
+      border-top: 1px solid $color-border
+
+table.nowrappy
+  td, th
+    white-space: nowrap
+
+.admin_alerts td form, .admin_alerts_header th form
+  margin: 0
+
+.admin_alerts img
+  vertical-align: middle
+
+tr td.unclaimed
+  background-color: $color-text-callout
+  color: #fff
+  text-shadow: 0 -1px 2px darken($color-text-callout, 12.5%)
+
+.admin_alerts
+  table
+    border-collapse: collapse
+    width: 100%
+
+    th, td
+      padding: 5px
+
+    th
+      text-align: left
+
+    tr
+      border-top: 1px solid #999
+
+      &:first-child
+        border: 0
+
+    td, th
+      border-left: 1px solid #AAA
+
+    tr
+      td:first-child, th:first-child
+        border: 0
+        text-align: center
+
+  .failure
+    background-color: #F4D0D0
+
+  .warning
+    background-color: #F2E4D9
+
+
+.fields table
+  th
+    color: #666
+    margin: 0
+    padding: 0 0 1em 0
+    text-align: left
+
+  td.gems
+    td input.short
+      width: 102px
+
+tr.admin_alerts_header
+  background-color: #DCDCDC
+  border-color: #888
+  border-style: solid
+  border-width: 1px 0
+  text-align: left
+
+
+.admin_alerts_header th
+  font-weight: bold
+  padding: 10px
+
+  span
+    font-size: smaller
+    font-weight: normal
+
+table.themed.admin-table
+  tbody tr
+    border-bottom: 1px solid $color-border
+    &:hover
+      background: darken($color-background, 5%)
+    &:first-child
+      border-top: 1px solid $color-border
+
+.admin_alerts td form, .admin_alerts_header th form
+  margin: 0
+
+.admin_alerts img
+  vertical-align: middle
+
+.admin_alerts
+  table
+    border-collapse: collapse
+    width: 100%
+
+    th, td
+      padding: 5px
+
+    th
+      text-align: left
+
+    tr
+      border-top: 1px solid #999
+
+      &:first-child
+        border: 0
+
+    td, th
+      border-left: 1px solid #AAA
+
+    tr
+      td:first-child, th:first-child
+        border: 0
+        text-align: center
+
+table.expando
+  th
+    border-bottom: 1px solid #ccc
+    border-top: 1px solid #fff
+    vertical-align: middle
+    &.expando-name
+      a
+        padding: 2px 0 1px 24px
+        background: url(../images/icon_expand.png) 0 2px no-repeat
+        line-height: 16px
+        &.expanded
+          background-image: url(../images/icon_hide.png)
+    &.delete, &.edit
+      width: 16px
+      padding-left: 0
+      text-align: right
+  td
+    border: 0
+    border-top: 1px solid #fff
+  tr.detail
+    td
+      padding-left: 34px
+  textarea.codeblock
+    margin-bottom: 0
+    display: block
+    width: 692px
+  code
+    margin-bottom: 6px
+    display: block
+
+
+
+// --------------------------------------------------
+// SendGrid
+// --------------------------------------------------
+
+table#sendgrid_pricing
+  margin: 0
+  padding: 0
+  border-collapse: collapse
+
+  th
+    margin: 0
+    padding: 5px 0 5px 16px
+    text-align: left
+    font-size: 14px
+    border: none
+
+  tr
+    margin: 0
+    padding: 0
+    -webkit-border-vertical-spacing: 0
+    -webkit-border-horizontal-spacing: 0
+
+  td
+    padding: 7px 14px
+    margin: 0
+    border-left: 2px solid #BBB
+    border-bottom: 1px solid #eee
+    background-color: #fff
+
+    span.no
+      color: #fff
+
+  td:first-child
+    border-left: none
+    border-bottom: none
+    padding-left: 0
+    background-color: #f8f8f8
+
+    &.sendgrid_feature
+      font-weight: bold
+
+  tr.buttons
+    margin: 0
+    td
+      border: none
+      padding: 8px 14px 0 14px
+      background-color: #f8f8f8
+
+  form
+    margin-top: 0
+
+  input
+    margin-top: 2px
+    margin-right: 8px
+
+  small
+    font-weight: normal