zhdk/madek

/**
 * ## ui-containers `.ui-container`
 *
 * .bright      - Bright ui-container
 * .transparent - Semi-transparent bright box: home page elevator pitch
 * .inverted    - Dark gradient boxes: top-nav, footer and filter bar ui-containers
 * .inverted-transparent - Semi-transparent dark box: clipboard
 * .midtone     - Light grey box: thumb grid ui-containers
 * .bordered    - Box with border. Possible extensions: .bordered-bottom, .bordered-top, .bordered-right
 * .rounded     - Rounded corners equal to medium border radius value. Possible extensions:; .rounded-bottom, .rounded-top, .rounded-right, .rounded-left
 * .overlaid    - ui-containers needing a layer on top of them (such as home page collage)
 * .well        - ui-container with and inside shadow
 *
 * Styleguide 6.1

.ui-container
  +micro-clearfix

// Bright ui-containers

.ui-container.bright
  background-color: $white

.transparent,
.ui-container.transparent
  background: $lighten-more

// Dark ui-containers

.ui-container.inverted
  +background-image(linear-gradient($mono-strong, $mono-dark))
  +single-text-shadow(false, 1px, false, false, $darken)
  background-color: $mono-strong
  color: $mono-bright

.ui-container.inverted,
.ui-container.inverted-transparent
  h1,h2,h3,h4,h5,h6,
  > a,
  > p,
  > ul > li > a,
  .dropdown > a
    color: $mono-bright
  > a:hover,
  .dropdown > a:hover
    color: $white

.ui-container.inverted-transparent,
.inverted-transparent
  background-color: $darken-strong

.ui-container.inverted,
.ui-container.inverted-transparent,
.inverted-transparent
  .primary-button
    border: none
  .thumbnail
    border: none

.ui-container.inverted-transparent .tertiary-button,
.inverted-transparent .tertiary-button
  border: none

// Grey ui-containers

.ui-container.midtone
  background-image: image-url("backgrounds/container-midtone.png")

.ui-container.midtone-darker
  background-image: image-url("backgrounds/container-midtone-darker.png")

// Bordered ui-containers

.ui-container.bordered
  border: 1px solid $mono-light
  &.midtone-darker
    border-color: $darken-less

.ui-container.bordered-bottom
  border-bottom: 1px solid $mono-light
  &.midtone-darker
    border-bottom-color: $darken-less

.ui-container.bordered-top
  border-top: 1px solid $mono-light
  &.midtone-darker
    border-top-color: $darken-less

.ui-container.bordered-right
  border-right: 1px solid $mono-light
  &.midtone-darker
    border-right-color: $darken-less

.ui-container.bordered-left
  border-left: 1px solid $mono-light
  &.midtone-darker
    border-left-color: $darken-less

// Rounded ui-containers

.ui-container
  &.rounded
    +border-radius($border-radius-m)

  &.rounded-top
    +border-top-radius($border-radius-m)

  &.rounded-bottom
    +border-bottom-radius($border-radius-m)

  &.rounded-left
    +border-left-radius($border-radius-m)

  &.rounded-right
    +border-right-radius($border-radius-m)

  &.rounded-top-left
    +border-top-left-radius($border-radius-m)

  &.rounded-top-right
    +border-top-right-radius($border-radius-m)

  &.rounded-bottom-left
    +border-bottom-left-radius($border-radius-m)

  &.rounded-bottom-right
    +border-bottom-right-radius($border-radius-m)


// Table-layout ui-containers

.ui-container.table
  display: table
  width: 100%

.ui-container.table-row
  display: table-row
  width: 100%

.ui-container.table-cell
  display: table-cell
  vertical-align: top

// Well

.ui-container.well
  +box-shadow(inset 0 1px 3px $darken)

// Overlaid

.ui-container.overlaid
  position: relative

.ui-container.overlaid:after
  +dimension(100%, 100%)
  +position-top-right(0, 0)
  +position-bottom-left(0, 0)
  background-color: $darken
  content: " "
  display: block
  z-index: 5

// Media Queries

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)
  .ui-container.midtone
    background-image: image-url("backgrounds/container-midtone.png")
    background-size: 29px 29px
  .ui-container.midtone-darker
    background-image: image-url("backgrounds/container-midtone-darker.png")
    background-size: 29px 29px

/* Projection Styles
 *-----------------------------------------

@if $projection
  .ui-container.midtone
    background-image: none