qiprofile/app/stylesheets/common.styl

Quantitative Imaging Profile ( QiPr) web application

//**  The general-purpose styles. **//

@require 'helpers'

.qi-label
  font-weight: bold

.qi-x-smaller
  font-size 75%

.qi-text-right
  text-align right

// Dates and numbers should be center-aligned.
.qi-date, .qi-number, .qi-text-center
  text-align center

.qi-pct
  padding-right 2em
  text-align right

.qi-inline
  display inline

// Center an element. Use .qi-text-center to center text.
.qi-center
  margin-left auto
  margin-right auto

// Impart table cell mojo without the table structural cruft.
.qi-cell
  display table-cell
  vertical-align middle

// See the clean-list helper for a description.
ul.qi-clean-list
  clean-list()

.qi-close-icon
  text-align right

.qi-transparent
  background: transparent

.qi-separator-faint
  border 1px solid Lavender

// Make some room at the top.
.qi-top-buffer
  margin-top 0.5em

// Make some room at the left.
.qi-left-buffer
  margin-left 0.5em

// Make some room at the right.
.qi-right-buffer
  margin-right 0.5em

// Make some room at the bottom.
.qi-bottom-buffer
  margin-bottom 0.5em

// Add some vertical space between successive elements.
.qi-ver-space
  & + .qi-ver-space
    margin-top 0.5em

// Add some horizontal space between successive elements.
.qi-hor-space
  & + .qi-hor-space
    margin-left 0.5em

.qi-inline-heading
  display inline-block

// Override the bootstrap button as follows:
// * add color
// * change the padding from the bulky 6px 12px
//   to the compact 2px 4px.
.qi-btn
  padding 2px 4px
  background-color Moccasin
  &:hover
    background-color Peru
    cursor pointer
  &:focus, &.active
    border 1px solid Peru
    color White
    background-color Chocolate
// TODO - fold the style attributes below into this .qi-btn style.
// The style below was defined in volume.styl for the overlay demo.
// Unnecessary attributes should be culled.
// Confirm that all buttons which use this style display correctly.
// See the volume.styl .qi-slider TODO comments.
//   & button
//     width 7em
//     padding 0.2em
//     border 1px solid Peru
//     margin 0em 0em 0.2em 0em
//     color Black
//     background OldLace
//     &:hover
//       border 1px solid Peru
//       color Black
//       background Chocolate
//     &:focus, &.active
//       border 1px solid Peru
//       color White
//       background Chocolate

// Override .qi-btn to change the colors.
.qi-btn-radio
  background-color Aquamarine
  &:hover
    background-color DarkSeaGreen
  &:focus, &.active
    border 2px solid DarkSeaGreen
    color White
    background-color DarkOliveGreen
  &.disabled
    background-color Aquamarine

.qi-radio-row
  display inline-block
  & span, .col
    float left
    display block
  & span
    margin 2px 0.5em 0 0
  & label
    padding 2px 2px 0 0
  & input[type=radio], input.radio
    margin 2px 0 0 2px
  & .col + .col
    margin-left 2em

.qi-modal-table tr
  font-size smaller

.qi-inset-title
  text-align left
  padding-left 0.5em
  color Indigo

.qi-panel
  border 1px solid SlateGray
  border-radius: 0.4em

// The table panel style adds background color
// to offset the table. Nested tables have
// distinguishing colors.
.qi-table-panel
  & .panel-body
    background-color DarkTurquoise
    & .qi-nested
      background-color PaleTurquoise
      & > .qi-nested
        background-color LightSeaGreen
        & > .qi-nested
          background-color Azure
          & > .qi-nested
            background-color DarkTurquoise

// The nested panel style adds an offset.
.qi-nested
  padding 0.5em

// The standard qiprofile data table style.
// This style should be used in conjunction with the bootstrap
// .table style on the table element , e.g.:
//    table.table.qi-table
// .qi-table augments and overrides the bootstrap .table style
// as follows:
// * width is auto rather than 100%
// * there is no table border
// * the bottom margin is removed (spacing is the table
//   container responsibility instead)
// * cells have a thin light brown border
// * headings are bold against a background
// * column groups are delineated by a thin silver line
.qi-table
  width auto
  margin-bottom 0
  border 0
  & th, td
    border 1px solid BurlyWood
  & th
    background-color Bisque
    font-weight bold
    text-align center
    white-space nowrap
  & td
    background-color White
    // The table data cell has slight vertical padding.
    // Horizontal formatting is the page responsibility.
    padding-top 0.2em
    padding-bottom 0.2em
    &.qi-transparent
      // Blend in with the panel background.
      border 0
      background-color inherit
  & colgroup + colgroup
    border-left 0.2em solid Silver

.qi-spaced-table
  // Space adjacent rows.
  border 0
  border-collapse separate
  border-spacing 0 0.5em

// Scrunch cells together even more than the bootstrap
// .table-condensed style.
table.table.qi-table-super-condensed
  thead > tr > th
    padding 0 2px 0 2px
  tbody > tr > td
    padding 2px

// Remove table and cell borders when used in
// conjunction with the bootstrap .table style.
table.qi-borderless
  border 0
  & > tr > td
    border 0

// Underline table headings.
thead.qi-thead-underlined
  & > tr > th
    border-bottom 0
    text-decoration underline

.qi-subtable-title
  font-size larger
  font-style italic
  margin-left 0.5 em

// Horizontal list with justified items.
ul.qi-hor-list
  // The negative bottom margin corrects for the spacing
  // injected after the list.
  margin-bottom -1.2em
  text-align justify
  list-style none
  & li
    display inline-block
  &:after
    empty-line()

span.qi-over-under
  font-size smaller
  position relative
  top 1em
  padding-left 0.2em
  display inline-block
  text-align right
  & > .over
    display table-row
  & > .under
    position relative
    bottom 0.5em