styleyt 0.2.3 → 0.2.4

data/templates/stylesheets/partials/_scaffold.sass

@@ -0,0 +1,67 @@
+body
+  background-color: white
+  color: #333333
+  font-family: verdana, arial, helvetica, sans-serif
+  font-size: 13px
+  line-height: 18px
+
+p, ol, ul, td
+  font-family: verdana, arial, helvetica, sans-serif
+  font-size: 13px
+  line-height: 18px
+
+pre
+  background-color: #eeeeee
+  padding: 10px
+  font-size: 11px
+
+a
+  color: black
+  &:visited
+    color: #666666
+  &:hover
+    color: white
+    background-color: black
+
+.fieldWithErrors
+  padding: 2px
+  background-color: red
+  display: table
+
+#errorExplanation
+  width: 400px
+  border: 2px solid red
+  padding: 7px
+  padding-bottom: 12px
+  margin-bottom: 20px
+  background-color: #f0f0f0
+  h2
+    text-align: left
+    font-weight: bold
+    padding: 5px 5px 5px 15px
+    font-size: 12px
+    margin: -7px
+    background-color: #cc0000
+    color: white
+  p
+    color: #333333
+    margin-bottom: 0
+    padding: 5px
+  ul li
+    font-size: 12px
+    list-style: square
+
+div
+  &.uploadStatus
+    margin: 5px
+  &.progressBar
+    margin: 5px
+    div
+      &.border
+        background-color: white
+        border: 1px solid grey
+        width: 100%
+      &.background
+        background-color: #333333
+        height: 18px
+        width: 0%

data/templates/stylesheets/partials/_sidebar.sass

@@ -0,0 +1,5 @@
+#sidebar
+  .contextual
+    a
+      width: 100%
+      display: block

data/templates/stylesheets/partials/content/_ajax_indicator.sass

@@ -0,0 +1,27 @@
+// Snippet from Redmine.css
+// Ajax indicator *****
+#ajax-indicator
+  position: absolute
+  /* fixed not supported by IE
+  background-color: #eeeeee
+  border: 1px solid #bbbbbb
+  top: 35%
+  left: 40%
+  width: 20%
+  font-weight: bold
+  text-align: center
+  padding: 0.6em
+  z-index: 100
+  filter: alpha(opacity = 50)
+  opacity: 0.5
+
+html>body #ajax-indicator
+  position: fixed
+
+#ajax-indicator span
+  background-position: 0% 40%
+  background-repeat: no-repeat
+  background-image: url(../../images/loading.gif)
+  padding-left: 26px
+  vertical-align: bottom
+// End of snippet

data/templates/stylesheets/partials/content/_fancy_buttons.sass

@@ -0,0 +1,10 @@
+$fb-allow-disabled: false
+@import "fancy-buttons"
+
+$fb-color: $dark_blue
+
+#content
+  input[type=submit]
+    +fb-reset
+    +fancy-button
+    

data/templates/stylesheets/partials/content/_flash_errors.sass

@@ -0,0 +1,45 @@
+// Snippet from Redmine.css
+// Flash & error messages ***
+
+#errorExplanation, div.flash, .nodata, .warning
+  padding: 4px 4px 4px 30px
+  margin-bottom: 12px
+  font-size: 1.1em
+  border: 1px solid
+  +border-radius($border_radius)
+
+div.flash
+  margin-top: 8px
+  &.error
+    background: url(../images/false.png) 8px 5px no-repeat
+    background-color: #ffe3e3
+    border-color: #550000
+    color: #550000
+
+#errorExplanation
+  background: url(../images/false.png) 8px 5px no-repeat
+  background-color: #ffe3e3
+  border-color: #550000
+  color: #550000
+
+div.flash.notice
+  background: url(../images/true.png) 8px 5px no-repeat
+  background-color: #dfffdf
+  border-color: #9fcf9f
+  color: #005f00
+
+div.flash.alert
+  background: url(../images/false.png) 8px 5px no-repeat
+  background-color: #ffe3e3
+  border-color: #550000
+  color: #550000
+
+.nodata, .warning
+  text-align: center
+  background-color: #ffebc1
+  border-color: #fdbf3b
+  color: #a6750c
+
+#errorExplanation ul
+  font-size: 0.9em
+// End of Snippet

data/templates/stylesheets/partials/content/_icons.sass

@@ -0,0 +1,16 @@
+.icon
+  background-repeat: no-repeat
+  padding-left: 20px
+  text-decoration: none
+  font-size: 16px
+  color: $link_color
+  &:hover
+    color: $link_color_hover
+.icon-add
+  background-image: url(/images/16x16/add.png)
+.icon-delete
+  background-image: url(/images/16x16/remove.png)
+.icon-edit
+  background-image: url(/images/16x16/edit.png)
+.icon-index
+  background-image: url(/images/16x16/index.png)

data/templates/stylesheets/partials/content/_overview.sass

@@ -0,0 +1,37 @@
+#overview
+  ul
+    +no-bullets
+    +horizontal-list
+    li#accounting,
+    li#invoicing,
+    li#basic_claims_data
+      width: 120px
+    li
+      background: no-repeat top left
+      padding-left: 58px
+      padding-right: 40px
+      min-height: 58px
+      a
+        border-bottom: 1px solid black
+        display: block
+      &#overview
+        display: none
+      &#store
+        background-image: url(/images/48x48/store.png)
+      &#accounting
+        background-image: url(/images/48x48/accounting.png)
+      &#invoicing
+        background-image: url(/images/48x48/invoicing.png)
+      &#basic_claims_data
+        background-image: url(/images/48x48/basic_claims_data.png)
+      &#user_settings
+        background-image: url(/images/48x48/user_settings.png)
+    ul
+      width: inherit
+      margin-top: 5px
+      li
+        padding-left: 0px
+        width: inherit
+        min-height: 1em
+        a
+          border-bottom: none

data/templates/stylesheets/partials/content/_table_list.sass

@@ -0,0 +1,23 @@
+// Based on Redmine from the redmine.css
+// begin
+table.list
+  border: 1px solid #e4e4e4
+  border-collapse: collapse
+  width: 100%
+  margin-bottom: 4px
+  th
+    background-color: #eeeeee
+    padding: 4px
+    white-space: nowrap
+  td
+    vertical-align: top
+    &.id
+      width: 2%
+      text-align: center
+    &.checkbox
+      width: 15px
+      padding: 0px
+// end
+    &.action-links
+      text-align: right
+      border: 1px solid red

data/templates/stylesheets/partials/formtastic/_formtastic_base.sass

@@ -0,0 +1,624 @@
+//
+// FORMTASTIC SASS
+// Flexible styling for formtastic forms
+// http://www.github.com/active-stylus/formtastic-sass
+//
+//--------------------------------------------------------
+// STACKED FORMS
+// Labels fill up the full width of the form
+// Inputs are on new lines
+//--------------------------------------------------------
+//
+// Arguments:
+//
+// +stack-form(full-width, input-width, submit-button-align)
+//
+// Example:
+//
+// form.formtastic
+//   +stack-form(300px,"full","right")
+//
+// Default Settings:
+//
+!stacked_fieldset=100%
+// Full width of the fieldset
+//
+!stacked_input="auto"
+// "auto"   = automatic widths
+// "full"   = same width as form
+// "960px"  = custom width
+//
+!stacked_padding=0
+// Left padding on all labels and inputs
+//
+!stacked_button_align="buttons-left"
+// "buttons-left"   = float submit button left
+// "buttons-right"  = float submit button right
+// "buttons-full"   = submit button matches input width
+//
+!stacked_select_width = "select-auto"
+// "select-auto"   = default width
+// "select-full"  = same as specified input width
+//
+//--------------------------------------------------------
+// FLOATED FORMS
+// Column layout with labels left of the inputs
+// Comes in 2 flavors for text alignment of the labels
+//--------------------------------------------------------
+//
+// Arguments:
+//
+// +float-form-left(total-width, label-width, input-width, label-padding-x, submit-align)
+//
+// Examples:
+//
+// form.lefty
+//   +float-form-left(800px,500px,200px,6px,"buttons-left")
+//
+// form.righty
+//   +float-form-right(800px,500px,200px,6px,"buttons-left")
+//
+//--------------------------------------------------------
+// Default Settings:
+// (do not mix units because calculations are made)
+//
+!floated_total_width = 100%
+// Total Width of form
+//
+!floated_input_width = 70%
+// Width of inputs
+//
+!floated_label_width = 20%
+// Width of Label
+//
+!floated_label_padding_x = 0
+// How far labels are spaced from inputs
+//
+!floated_button_align = "buttons-left"
+// "buttons-left"   = float submit button left
+// "buttons-right"  = float submit button right
+// "buttons-full"   = submit button matches input width
+//
+!floated_label_text_align = "left"
+// "left"
+// "right"
+// "center"
+//
+!floated_select_width = "select-auto"
+// "select-auto"   = default width
+// "select-full"  = same as specified input width
+//
+//========================================================
+// FORMTASTIC STYLING
+// Note: Be careful when modifying widths and
+// horizontal padding/margins as you can break layouts
+//========================================================
+=clearfix
+  *display: inline-block
+  &:after
+    content: " "
+    display: block
+    height: 0
+    clear: both
+    visibility: hidden
+//
+//
+//
+//--------------------------------------------------------
+//========================================================
+// Base stuff (do not edit unless you are smarter than me :p)
+//========================================================
+//--------------------------------------------------------
+//
+//
+//
+//--------------------------------------------------------
+// Generic Mixins
+//--------------------------------------------------------
+=float-labels(!width,!padding=0,!direction="left")
+  :width = !width - !padding
+  :text-align = !direction
+  :display inline
+  :float left
+  :clear none
+  @if !padding == 0
+    :padding 0
+  @else
+    :padding-#{!direction} = !padding
+=block(!block_float="clear")
+  :display block
+  @if !block_float=="clear"
+    :clear both
+    :float none
+  @else
+    :float = !block_float
+=inline(!float="none",!clear="none")
+  :display inline
+  :float = !float
+  :clear = !clear
+=reset-form
+  // Reset elements
+  ul, ol, legend, p
+    :margin 0
+    :padding 0
+  li
+    :margin-left 0px
+    :margin-right 0px
+    :padding-left 0px
+    :padding-right 0px
+  // Clearfix fieldsets
+  fieldset
+    :display block
+    +clearfix
+  // * fields
+  abbr, acronym
+    :border 0
+    :font-variant normal
+    :font-weight normal
+  // Reset list styles
+  ol, ul
+    :list-style none
+  // Clearfix label
+  label
+    :display block
+    +clearfix
+  // Align Inputs
+  input, textarea
+    :vertical-align middle
+  // Make Labels Clickable
+  .check_boxes, .radio
+    input
+      :margin 0
+    label
+      :cursor pointer
+  // Hide hidden fields
+  .hidden
+    :display none
+  // Date Time Selects shown inline
+  .date, .time, .datetime
+    li
+      :float left
+      :width auto
+      :clear none
+    label
+      :display none
+      :width auto
+    input
+      :display inline
+      :margin 0
+      :padding 0
+  // Error lists for each input
+  .errors
+    :list-style square
+    li
+      :padding 0
+      :border none
+      :display list-item
+      :float none
+      :clear both
+  .inputs
+    :z-index 99
+  // Float Submit Buttons
+  .buttons li
+    :float left
+  // Reset Nested Fieldset & Legends
+  li
+    +clearfix
+    :display block
+    fieldset
+      :border none
+      :position relative
+      :margin-top 0px
+    legend
+      :display block
+      :margin-bottom 0
+    .label
+      :display block
+      :clear both
+      :background transparent
+    // Reset lists for checkboxes and radio buttons
+    ol
+      :float left
+      :margin 0
+      li
+        :padding 0
+        :border 0
+        :display inline
+//
+//--------------------------------------------------------
+// Form Stack
+//--------------------------------------------------------
+//
+=stack-form(!stacked_fieldset, !stacked_input, !stacked_padding, !stacked_button_align, !stacked_select_width)
+  +reset-form
+  fieldset
+    :width = !stacked_fieldset
+  ol
+    :padding-left = !stacked_padding
+  input
+    :clear both
+    :float none
+  li
+    +block
+    :width = !stacked_fieldset
+    ol
+      :padding 0
+    li
+      :clear none
+      :width auto
+    fieldset
+      legend, legend .label
+        :display block
+        :clear both
+      .label
+        :position relative
+      label, input
+        :width auto
+  .date, .time, .datetime
+    ol
+      :width = !stacked_fieldset
+    li
+      :display inline
+      :clear none
+      :float left
+      :padding-right = !stacked_padding / 2
+  .checkbox, .radio
+    li
+      :display block
+    input
+      :border none
+  label
+    +block
+    :width = !stacked_input
+  input, textarea
+    @if !stacked_input=="full"
+      :width = !stacked_fieldset - !stacked_padding
+    @else
+      :width = !stacked_input
+  select
+    @if !stacked_select_width == "select-auto"
+      :width auto
+    @else
+      :width = !stacked_input
+  .errors li
+    :display list-item
+  .buttons
+    ol
+      :padding-left = !stacked_padding
+      :padding-right = !stacked_padding
+    li
+      @if !stacked_button_align == "buttons-left"
+        :float left
+      @if !stacked_button_align == "buttons-right"
+        :float right
+      :width auto
+      :clear none
+      :display inline
+    input
+      @if !stacked_button_align == "buttons-full"
+        :width = !stacked_fieldset
+      @else
+        :width auto
+  #errorExplanation
+    :width = !stacked_fieldset - !stacked_padding
+  .label
+    // Legend Left Margin Hack for IE
+    :#left -0.5em
+    :#position relative
+//
+//--------------------------------------------------------
+// Float Form Core
+//--------------------------------------------------------
+//
+=float-form(!floated_total_width,!floated_label_width,!floated_input_width,!floated_label_padding_x, !floated_button_align, !floated_label_text_align, !floated_select_width )
+  +reset-form
+  fieldset
+    :width = !floated_total_width
+  label
+    :float left
+    :width = !floated_label_width - !floated_label_padding_x
+    :text-align = !floated_label_text_align
+    :padding-#{!floated_label_text_align} = !floated_label_padding_x
+  li
+    ol
+      :padding =  0 ( !floated_total_width - (!floated_input_width + !floated_label_width)) 0 !floated_label_width
+    fieldset
+      legend, legend .label
+        :display block
+      legend
+        +float-labels(!floated_label_width,!floated_label_padding_x,!floated_label_text_align)
+        :width = !floated_total_width - !floated_label_padding_x
+      .label
+        :position absolute
+        :width = !floated_label_width - !floated_label_padding_x
+        :top 0px
+        @if !floated_label_text_align=="right"
+          :left 0
+        @else
+          :left = !floated_label_padding_x
+      label
+        :padding-left 0
+      label, input
+        :width auto
+        :display inline
+        :clear none
+        :text-align left
+      select
+        :padding 0
+        :clear both
+        :display block
+  .inline-hints, .inline-errors, .errors
+    :margin = 0 0 0 !floated_label_width
+  input, textarea
+    :width = !floated_input_width
+  select
+    @if !floated_select_width=="select-auto"
+      :width auto
+    @else
+      :width = !floated_input_width
+  .checkbox, .radio
+    li
+      :display block
+      :clear both
+    input
+      :border none
+  .buttons
+    :padding-left = !floated_label_width
+    :width = !floated_total_width - !floated_label_width
+    input
+      :width auto
+    ol
+      @if !floated_button_align == "buttons-right"
+        :padding-right = !floated_label_padding_x
+    li
+      :width auto
+      @if !floated_button_align == "buttons-right"
+        :float right
+      @else
+        :float left
+      @if !floated_button_align == "full-buttons"
+        input
+          :width = !floated_input_width
+      @else
+        :display inline
+  #errorExplanation
+    :margin-left = !floated_label_width
+    :width = !floated_input_width
+//
+//--------------------------------------------------------
+// Float Form Left/Right
+//--------------------------------------------------------
+//
+=float-form-left(!floated_total_width,!floated_label_width,!floated_input_width,!floated_label_padding_x, !floated_button_align)
+  +float-form(!floated_total_width,!floated_label_width,!floated_input_width,!floated_label_padding_x, !floated_button_align,"left")
+
+=float-form-right(!floated_total_width,!floated_label_width,!floated_input_width,!floated_label_padding_x, !floated_button_align)
+  +float-form(!floated_total_width,!floated_label_width,!floated_input_width,!floated_label_padding_x, !floated_button_align,"right")
+
+//
+//--------------------------------------------------------
+// Float Inputs
+//--------------------------------------------------------
+//
+=float-inputs(!margin_right=10px,!line_height=150%)
+  .radio, .check_boxes
+    ol
+      +inline("left")
+    li
+      :width auto
+      +inline("left","none")
+    input
+      :float none
+      :display inline
+    label
+      :display block
+      :clear none
+      :width auto
+      :padding-left 0
+      :line-height = !line_height
+      :margin-right = !margin_right
+//
+=float-inputs-for(!dom_target,!margin_right=10px,!line_height=150%)
+  #{!dom_target}
+    +float-inputs-core(!margin_right,!line_height)
+//
+//--------------------------------------------------------
+// Grid Inputs
+//--------------------------------------------------------
+//
+=grid-inputs(!width=100px,!line_height=150%)
+  .radio, .check_boxes
+    ol
+      +inline("left")
+    li
+      +inline("left","none")
+      :width = !width
+    label
+      +inline("left","none")
+      :width auto
+      :line-height = !line_height
+
+=grid-inputs-for(!dom_target,!width=100px,!line_height=150%)
+  #{!dom_target}
+    +grid-inputs-core(!width,!line_height)
+
+//--------------------------------------------------------
+// Labels
+//--------------------------------------------------------
+=bold-labels(!select="all")
+  li
+    @if !select == "all"
+      label, legend span.label
+        :font-weight bold
+      li
+        label
+          :font-weight normal
+    @if !select == "required"
+      &.required
+        label, .label
+          :font-weight bold
+        li
+          label
+            :font-weight normal
+
+
+//---------------------------------------------------
+// Original Mixin (deprecated!)
+//
+!form_layout="float"
+// Set the general layout of the form
+// "float" will use two column layout with labels on the left
+// "clear" will have labels above the inputs
+
+//
+!total_width=100%
+// Set width of entire fieldset
+//
+// Set label widths and hint/error left margins
+!label_width=24%
+//
+!input_width=70%
+// Set width of inputs, textareas and selects
+//
+!label_pad=2%
+// Set horizontal padding for labels
+
+//
+!label_float="left"
+// Set alignment of labels
+// "clear" puts labels above inputs
+// "left" floats labels left and aligns text left
+// "right" floats labels left and aligns text right
+
+//
+// Set widths of all inputs, textareas and selects (all aligned)
+// False will preserve auto width
+!full_width_inputs=true
+//
+// Set float direction of form buttons ("right" or "left")
+!button_float="left"
+// Installation ------------------------------------------
+//
+//$ sudo gem install haml
+//$ cd rails app
+//$ haml --rails (or merb/sinatra/etc)
+//
+// Set up master Sass file and include it in your html
+// Save this file as _base.sass and include it in master sass like so:
+//
+// @import base.sass
+//
+// Usage -------------------------------------------------
+//
+// form.formtastic
+//   +formtastic-float
+//
+//  This will provide forms of columns with label floated left
+//  For label on top of inputs you can use
+//
+// form.formtastic
+//   +formtastic-block
+//
+// Customize ---------------------------------------------
+//
+// form.formtastic
+//   +formtastic(410px,100px,300px,12px,"right",true)
+//
+// Note: When using pixel values be sure to pad total width by 10px
+// Still looking for a way to make this cleaner
+//--------------------------------------------------------
+=formtastic(!total_width,!label_width,!input_width,!label_pad,!label_float,!button_float,!full_width_inputs)
+  fieldset
+    :width = !total_width
+  ol li
+    label
+      @if !label_float=="clear"
+        :display block
+        :clear both
+        :float none
+      @else
+        :float left
+        :width = !label_width - !label_pad
+        @if !label_float=="left"
+          :padding-left = !label_pad
+          :text-align left
+        @else
+          :text-align right
+    fieldset
+      legend
+        @if !label_float=="clear"
+          :display block
+          :clear both
+          :float none
+          span.label
+            :display block
+            :clear both
+            :float none
+
+        @else
+          :width = !label_width - !label_pad
+          @if !label_float=="left"
+            :padding-left = !label_pad
+          @else
+            :padding-right = !label_pad
+            :text-align right
+          span.label
+            :position absolute
+            :width = !label_width - !label_pad
+      ol
+        @if !label_float=="clear"
+          :padding 0
+        @else
+          :padding =  0 ( !total_width - (!input_width + !label_width)) 0 !label_width
+    @if !label_float == "clear"
+      &.string input, &.password input, &.numeric input, &.text textarea, select
+        :width = !input_width
+    @else
+      p.inline-hints, p.inline-errors, ul.errors
+        :margin = 0 0 0 !label_width
+      @if !full_width_inputs
+        &.string input, &.password input, &.numeric input, &.text textarea, select
+          :width = !input_width
+      &.boolean label
+        :padding-left = !label_width
+  fieldset
+    &.buttons
+      @if !label_float == "clear"
+        :width = !total_width
+      @else
+        :padding-left = !label_width
+        :width = !input_width
+      @if !button_float == "left"
+        ol
+          li
+            :display inline
+            :width auto
+            :float left
+      @if !button_float == "right"
+        ol
+          :padding-left 0
+          @if !label_float == "clear"
+            :width = !input_width
+          li
+            :float right
+            :width auto
+            @if !label_float != "clear"
+              :padding-left = !label_pad
+//--------------------------------------------------------
+// Formtastic Errors on top (aligned with label)
+//
+// Create formtastic.rb in config/initializers and add this:
+// Formtastic::SemanticFormBuilder.inline_order = [:errors, :input, :hints]
+// Best used with right-aligned labels
+// +formtastic(100%,20%,70%,4%,"right")
+//--------------------------------------------------------
+=formtastic-errors-on-top(!label_vertical_margin=21px)
+  ol li.error
+    p.inline-errors
+      :margin-top 0px
+    label, span.label
+      :margin-top = "-#{!label_vertical_margin}"
+      :padding-bottom 18px
+    fieldset label
+      :margin-top 0
+      :padding-bottom 0