engineyard-theme 1.0.5

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

@@ -0,0 +1,226 @@
+// Use // instead of /* */ to hide from production
+
+// --------------------------------------------------
+
+/* BUTTONS
+// - Button Mixins / Variables
+// - Styles
+
+// --------------------------------------------------
+
+
+
+// --------------------------------------------------
+// Button Mixins / Variables
+// --------------------------------------------------
+
+$button-radius                    = 3px
+$button-box-shadow-value          = 0 1px 2px darken($color-border, 20%)
+$button-colored-box-shadow-value  = 0 1px 2px darken($color-background-alt, 22%)
+
+@mixin button
+  position: relative
+  display: inline-block
+  padding: 2px 12px
+  border: 1px solid $color-border
+    bottom-color: darken($color-border, 5%)
+  -moz-border-radius: $button-radius
+  -webkit-border-radius: $button-radius
+  border-radius: $button-radius
+  background: $color-border
+  background: -moz-linear-gradient(top, lighten($color-border, 20%), $color-border)
+  background: -webkit-gradient(linear, left top, left bottom, from(lighten($color-border, 20%)), to($color-border))
+  -moz-box-shadow: $button-box-shadow-value
+  -webkit-box-shadow: $button-box-shadow-value
+  box-shadow: $button-box-shadow-value
+  font-size: $font-size-main
+  line-height: $line-height
+  text-decoration: none
+  text-shadow: 0 1px 2px lighten($color-border, 20%)
+  cursor: pointer
+  z-index: 2
+  &, span
+    color: $color-text
+
+@mixin button-active
+  border-color: darken($color-border, 2.5%)
+  background: darken($color-border, 2.5%)
+  background: -moz-linear-gradient(top, lighten($color-border, 17.5%), darken($color-border, 2.5%))
+  background: -webkit-gradient(linear, left top, left bottom, from(lighten($color-border, 17.5%)), to(darken($color-border, 2.5%)))
+  &, span
+    color: darken($color-text, 2.5%)
+
+@mixin button-hover
+  border-color: darken($color-border, 5%)
+  background: darken($color-border, 5%)
+  background: -moz-linear-gradient(top, lighten($color-border, 15%), darken($color-border, 5%))
+  background: -webkit-gradient(linear, left top, left bottom, from(lighten($color-border, 15%)), to(darken($color-border, 5%)))
+  &, span
+    color: darken($color-text, 5%)
+
+@mixin button-disabled
+  cursor: not-allowed
+  border-color: lighten($color-border, 5%)
+  background: lighten($color-border, 8%)
+  background: -moz-linear-gradient(top, lighten($color-border, 30%), lighten($color-border, 12%))
+  background: -webkit-gradient(linear, left top, left bottom, from(lighten($color-border, 30%)), to(lighten($color-border, 12%)))
+
+
+@mixin button-colored
+  border: 1px solid darken($color-background-alt, 14%)
+    bottom-color: darken($color-background-alt, 20%)
+  background: lighten($color-background-alt, 5%)
+  background: -moz-linear-gradient(top, lighten($color-background-alt, 12%), darken($color-background-alt, 15%))
+  background: -webkit-gradient(linear, left top, left bottom, from(lighten($color-background-alt, 12%)), to(darken($color-background-alt, 15%)))
+  // blue buttons don't necessarily cast blue shadows! blue shadows only on blue backgrounds. :)
+  -moz-box-shadow: $button-box-shadow-value
+  -webkit-box-shadow: $button-box-shadow-value
+  box-shadow: $button-box-shadow-value
+  text-shadow: 0 1px 2px $color-background-alt
+  &, span
+    color: darken($color-text-callout, 10%)
+
+@mixin button-colored-active
+  border: 1px solid darken($color-background-alt, 17.5%)
+    bottom-color: darken($color-background-alt, 27.5%)
+  background: darken($color-background-alt, 2.5%)
+  background: -moz-linear-gradient(top, lighten($color-background-alt, 2.5%), darken($color-background-alt, 22.5%))
+  background: -webkit-gradient(linear, left top, left bottom, from(lighten($color-background-alt, 2.5%)), to(darken($color-background-alt, 22.5%)))
+  &, span
+    color: darken($color-text-callout, 12.5%)
+
+@mixin button-colored-hover
+  border: 1px solid darken($color-background-alt, 20%)
+    bottom-color: darken($color-background-alt, 30%)
+  background: darken($color-background-alt, 5%)
+  background: -moz-linear-gradient(top, lighten($color-background-alt, 5%), darken($color-background-alt, 25%))
+  background: -webkit-gradient(linear, left top, left bottom, from(lighten($color-background-alt, 5%)), to(darken($color-background-alt, 25%)))
+  &, span
+    color: darken($color-text-callout, 15%)
+
+// reset button from colored back to grey, without taking all the extra styles with it.
+@mixin button-revert
+  border-color: $color-border
+  background: $color-border
+  background: -moz-linear-gradient(top, lighten($color-border, 20%), $color-border)
+  background: -webkit-gradient(linear, left top, left bottom, from(lighten($color-border, 20%)), to($color-border))
+  -moz-box-shadow: $button-box-shadow-value
+  -webkit-box-shadow: $button-box-shadow-value
+  box-shadow: $button-box-shadow-value
+  &, span
+    color: $color-text
+
+@mixin button-big-submit
+  padding: 6px 24px
+  @include big-chunky-rounded-box
+  font-size: $font-size-h4
+  line-height: 1.25
+
+@mixin button-big-colored-submit
+  @include button-colored
+  @include button-big-submit
+
+@mixin button-big-colored-submit-active
+  @include button-colored-active
+
+@mixin button-big-colored-submit-hover
+  @include button-colored-hover
+
+// reset button from big to small, without taking all the extra styles with it.
+@mixin button-size-revert
+  padding: 2px 12px
+  @include rounded-box
+  font-size: $font-size-main
+  line-height: $line-height
+
+
+
+// --------------------------------------------------
+// Styles
+// --------------------------------------------------
+
+button
+  width: auto
+  overflow: visible
+
+button, a.button
+  @include reset
+  @include button
+  &:focus, &:hover
+    @include button-hover
+  &:active
+    @include button-active
+    outline: 0
+
+button.action, a.action
+  @include button-colored
+  &:focus, &:hover
+    @include button-colored-hover
+  &:active
+    @include button-colored-active
+
+.envTitle
+  .button a
+    // blue shadow for blue bg!
+    -moz-box-shadow: $button-colored-box-shadow-value
+    -webkit-box-shadow: $button-colored-box-shadow-value
+    box-shadow: $button-colored-box-shadow-value
+  .attention a
+    @include button-revert
+    // blue shadow
+    -moz-box-shadow: $button-colored-box-shadow-value
+    -webkit-box-shadow: $button-colored-box-shadow-value
+    box-shadow: $button-colored-box-shadow-value
+    border-bottom-color: darken($color-border, 10%)
+    &:focus, &:hover
+      @include button-hover
+      border-bottom-color: darken($color-border, 10%)
+    &:active
+      @include button-active
+    span
+      position: relative
+      margin: 0 0 0 -2px
+      display: block
+      padding: 0 0 0 24px
+      background: url(../images/bg_alert-bang.png) 0 2px no-repeat
+
+.controls
+  button, a.button
+    @include button-big-colored-submit
+    &:hover, &:focus
+      @include button-big-colored-submit-hover
+    &:active
+      @include button-big-colored-submit-active
+  a.cancel
+    @include button-revert
+    &:hover, &:focus
+      @include button-hover
+    &:active
+      @include button-active
+#cancel
+  .controls
+    button, a.button
+      @include button-revert
+      &:hover, &:focus
+        @include button-hover
+      &:active
+        @include button-active
+    button.cancel
+      @include button-big-submit
+      @include button-big-colored-submit
+      &:focus, &:hover
+        @include button-big-colored-submit-hover
+      &:active
+        @include button-big-colored-submit-active
+
+button.submit, a.submit
+  @include button-big-submit
+
+td
+  button, input[type="submit"]
+    padding: 1px 6px
+    vertical-align: middle
+
+.deploy_button.disabled
+  @include button-revert
+  @include button-disabled

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

@@ -0,0 +1,41 @@
+// Use // instead of /* */ to hide from production
+
+// --------------------------------------------------
+
+// COLOR
+// - Backgrounds
+// - Text
+// - Layout
+
+// --------------------------------------------------
+
+
+
+// --------------------------------------------------
+// Backgrounds
+// --------------------------------------------------
+
+$color-background       = #f8f8f8   // lightest grey
+$color-background-alt   = #cfdbe8   // light blue
+$color-background-alt2  = #e3e5cf   // light beige
+
+
+
+// --------------------------------------------------
+// Text
+// --------------------------------------------------
+
+$color-text             = #555      // dark grey
+$color-text-alt         = #999      // medium grey
+
+$color-text-alert       = #910f0f   // bold red
+$color-text-callout     = #236DA6   // bold blue
+
+
+
+// --------------------------------------------------
+// Layout
+// --------------------------------------------------
+
+$color-border           = #ccc      // light grey
+

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

@@ -0,0 +1,367 @@
+// Use // instead of /* */ to hide from production
+
+// --------------------------------------------------
+
+/* FORMS
+// - Basic styles
+// - Specific styles
+
+// --------------------------------------------------
+
+
+
+// --------------------------------------------------
+// Basic Styles
+// --------------------------------------------------
+
+// form element typography styles are grouped with "body" in _type.sass
+
+form, fieldset, legend, label, select, input, textarea
+  @include reset
+
+input.text, select, textarea
+  font-size: $font-size-h4
+
+input, select, label
+  vertical-align: middle
+
+fieldset
+  position: relative
+  border: 0
+  border-top: 1px solid lighten($color-border, 10%)
+  padding: 18px 0
+  h2
+    padding-top: 0
+  h3
+    padding-bottom: 0
+  fieldset
+    padding: 0
+    border-top: 0
+  &.environments
+    h2
+      padding-bottom: 12px
+
+legend span
+  // this is needed because legends are super tricky with fieldset borders
+  position: absolute
+  display: block
+  padding: 12px 0
+  font-size: $font-size-h2
+
+
+.field-area
+  padding-top: 36px
+  /* for use with the form's content when combined with a legend/span
+
+input.radio, input.checkbox
+  z-index: 2
+
+input
+  &[type="hidden"]
+    @include hidden
+
+input.text, textarea
+  width: 298px
+  background: #fff url(../images/bg_textfield-shadow.png) no-repeat
+  &:focus
+    background: #FFF
+
+input.text, textarea, select
+  border: 1px solid $color-border
+  padding: 3px 5px
+
+  &:focus
+    border: 1px solid darken($color-border, 25%)
+    outline: none
+
+  &:disabled
+    background: darken($color-background, 5%)
+    color: $color-text-alt
+
+  &.error
+    border-color: $color-text-alert
+    border-width: 2px
+    width: 304px
+
+textarea
+  overflow: auto
+  margin-bottom: 12px
+  height: 96px
+
+
+td input.text
+  padding-top: 2px
+  padding-bottom: 2px
+
+select
+  width: auto
+  background: none
+
+label
+  cursor: pointer
+  input
+    color: $color-text
+
+
+
+// --------------------------------------------------
+// Specific Styles
+// --------------------------------------------------
+
+.formRow
+  label
+    a
+      color: $color-text-callout
+
+h2 + .formRow
+  padding-top: 5px
+
+form#new_cluster_configuration
+  .formRow label
+    width: 270px
+    text-align: right
+
+
+.field
+  width: 310px
+  position: relative
+  padding-bottom: 24px
+  zoom: 1
+  h3
+    padding-top: 0
+
+  label
+    display: block
+    padding-bottom: 3px
+    &.radio, &.checkbox
+      display: inline
+      width: auto
+      margin-right: 10px
+      padding: 0
+      input
+        position: relative
+        top: -1px
+
+  .radio, .checkbox
+    label
+      padding: 0
+      width: auto
+      display: inline
+
+  .group
+    position: relative
+    margin-right: -450px
+
+  .help, p.note
+    font-size: $font-size-small
+    color: $color-text-alt
+    a:link, a:visited
+      color: $color-text
+    a:hover
+      color: darken($color-text, 25%)
+  p.note
+    padding-top: 6px
+  .help
+    position: absolute
+    top: 18px
+    left: 360px
+    width: 400px
+    z-index: 500
+  #ree-help
+    display: none
+    @include font-bold
+    color: $color-text
+
+  &#database-separate
+    position: absolute
+    // Firefox (see note below for Webkit)
+    top: -30px
+    left: 164px
+    width: 206px
+    label
+      position: relative
+      white-space: nowrap
+
+  &:before, &:after
+    @include clearfix
+  &:after
+    clear: both
+
+td
+  .field
+    margin-bottom: -1px
+    padding-bottom: 0
+    width: auto
+    label
+      display: inline
+      padding: 0
+    p.help
+      left: 222px
+      width: 136px
+
+.sentence
+  width: auto
+  label
+    padding: 0 5px 0 0
+    display: inline
+  input.radio, input.checkbox
+    position: relative
+    z-index: 2
+.app_type
+  width: auto
+
+fieldset.environments .field
+  padding-bottom: 3px
+
+.controls, .form_actions, .formActions, .formactions
+  clear: both
+  margin-top: 18px
+  padding: 18px 0
+  border-top: 1px solid lighten($color-border, 10%)
+  zoom: 1
+  ul
+    float: left
+    display: inline
+    margin: 0
+    list-style: none
+    li
+      float: left
+      display: inline
+      margin-right: 12px
+  &:before, &:after
+    @include clearfix
+  &:after
+    clear: both
+
+.plan-description .controls
+  margin: 0
+  padding: 0
+  border: 0
+
+
+
+
+
+
+form
+  table
+    &.gems
+      td
+        padding-top: 0
+
+.ie6 input
+  vertical-align: text-bottom
+
+input#custom_framework_env
+  margin-left: 12px
+  width: 130px
+
+.fields
+
+  dt
+    font-weight: normal
+    line-height: 1
+
+    strong
+      font-weight: normal
+      font-size: $font-size-h1
+    label
+      padding-bottom: 6px
+
+  dd
+    clear: both
+    padding-top: 6px
+    padding-bottom: 24px
+    color: $color-text-alt
+    font-size: $font-size-small
+
+    label
+      padding-top: 0
+
+  form
+
+    dl
+      &.left
+        margin: 0 24px 0 0
+        padding-bottom: 24px
+        width: 240px
+      &.right
+        width: 480px
+        overflow: hidden
+
+        table.gems
+          td
+            padding-right: 0
+            input[type="text"], input[type="search"], input[type="password"], input.text
+              margin-right: 12px
+              width: 220px
+
+    dt
+      font-size: $font-size-h3
+
+  table
+
+    th, td
+      border-bottom: 1px solid $color-border
+
+    td
+      color: $color-text
+
+      label
+        font-size: $font-size-main
+
+    &.gems
+      th, td
+        border: 0
+
+        input[type="text"], input[type="search"], input[type="password"], input.text
+          width: 226px
+
+
+input:valid, textarea:valid
+input:invalid, textarea:invalid
+  -moz-border-radius: 1px
+  -webkit-border-radius: 1px
+  border-radius: 1px
+  -moz-box-shadow: 0px 0px 5px red
+  -webkit-box-shadow: 0px 0px 5px red
+  box-shadow: 0px 0px 5px red
+.no-boxshadow input:invalid, .no-boxshadow textarea:invalid
+  background-color: #f0dddd
+
+#advanced_cron, #simple_cron
+  .sentence
+    font-size: $font-size-small
+    zoom: 1
+    &:before, &:after
+      @include clearfix
+    &:after
+      clear: both
+    .time-field
+      float: left
+      display: inline
+      width: 96px
+      margin-right: 5px
+    input
+      width: 80px
+    p.time-note
+      clear: both
+      label
+        display: block
+        padding: 12px 0 0
+
+ul.choice-list
+  list-style: none
+  margin: 0
+  li
+    padding-bottom: 3px
+    label
+      display: block
+
+ul.fields
+  li
+    padding-left: 24px
+    padding-bottom: 24px
+  h2
+    position: relative
+    margin-left: -18px