openproject/app/assets/stylesheets/global/_mixins.sass

/*-- copyright
 * OpenProject is a project management system.
 * Copyright (C) 2012-2013 the OpenProject Foundation (OPF)
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public License version 3.
 *
 * OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
 * Copyright (C) 2006-2013 Jean-Philippe Lang
 * Copyright (C) 2010-2013 the ChiliProject Team
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public License
 * as published by the Free Software Foundation; either version 2
 * of the License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 *
 * See doc/COPYRIGHT.rdoc for more details.  ++*/

$vendors: "-webkit-", "-moz-", "-ms-", "-o-", ""
$button_gray_font_color: #222222

@mixin html_body_spacing
  margin:             0
  padding:            0
  height:             100%

@mixin default-transition
  @each $vendor in $vendors
    #{$vendor}transition: all 200ms ease-in-out 0s

@mixin default-headline-h1
  color:              $headline_h1_font-color
  font-size:          $headline_h1_font_size
  font-family:        $font_family_normal
  font-weight:        normal
  padding:          0 0 8px 0
  margin:        0

@mixin default-headline-h2
  color:              $headline_h2_font-color
  font-size:          $headline_h2_font_size
  font-family:        $font_family_normal
  font-weight:        normal
  text-transform:    uppercase
  padding:          0 0 8px 0
  margin:        0

@mixin default-headline-h3
  color:              $headline_h3_font-color
  font-size:          $headline_h3_font_size
  font-family:        $font_family_normal
  font-weight:        normal
  border-bottom:    1px solid #dddddd
  padding:          0 0 8px 0
  margin:          0 0 20px 0

@mixin default-headline-h4
  color:              $headline_h4_font-color
  font-size:          $headline_h4_font_size
  font-family:        $font_family_normal
  font-weight:        normal
  padding:          0 0 5px 0
  margin:          0 0 20px 0

@mixin default-font-normal($color, $font-size: 13px)
  color:              $color
  font-size:          $font-size
  font-family:        $font_family_normal
  font-weight:        normal

@mixin default-font-bold($color, $font-size: 13px)
  color:              $color
  font-size:          $font-size
  font-family:        $font_family_normal
  font-weight:        bold

@mixin main-menu-font
  font-style:         normal
  font-family:        $font_family_normal

@mixin header-fonts($color, $font-size: $header_item_font_size)
  @include default-font-normal($color, $font-size)

@mixin breadcrumb-font($color)
  @include default-font-normal($color, $breadcrumb_font_size)

@mixin breadcrumb-font-bold($color)
  @include default-font-bold($color, $breadcrumb_font_size)

@mixin border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius: $radius
  border-radius: $radius

@mixin button-highlight-background
  border: 1px solid $button_highlight_border_color
  background: $button_highlight_background_color
  +background-image($button_highlight_background_gradient)

  &:enabled:hover
    border: 1px solid $button_highlight_background_hover_color
    background: $button_highlight_border_hover_color

@mixin button-background
  border: 1px solid #ccc
  background: #ffffff
  +background-image(linear-gradient(to bottom, #ffffff 0%, #eeeeee 74%, #eeeeee 100%))

  &:enabled:hover
    border: 1px solid #777777
    +background-image(linear-gradient(to bottom, #ffffff 0%, #eeeeee 40%, #ddd 100%))

@mixin button-active-background
  border: 1px solid #CCCCCC
  background: #EEEEEE
  box-shadow: 0px 2px 4px #CCCCCC inset

  &:hover

@mixin button-common
  @include border-radius($button_border_radius)
  margin: 10px 10px 0 0
  line-height: 23px
  font-size: $global_font_size
  font-weight: normal
  cursor: pointer

@mixin button-normal-size
  padding: 3px 8px 2px

@mixin button-big-size
  padding: 7px 16px 5px

@mixin button-disableable
  @include transition(opacity .5s ease-out)
  &:disabled
    opacity: 0.5
    cursor:  default

@mixin button-highlight
  color: $button_highlight_font_color
  @include button-common
  @include button-normal-size
  @include button-highlight-background
  @include button-disableable
  color: $button_highlight_font_hover_color
  &:hover
    text-decoration: none

@mixin button
  color: $button_font_color
  @include button-common
  @include button-normal-size
  @include button-background
  @include button-disableable
  color: $button_font_hover_color
  &:hover
    text-decoration: none

@mixin button-active
  color: $button_active_font_color
  @include button-common
  @include button-normal-size
  @include button-active-background
  @include button-disableable

  &:hover
    text-decoration: none


@mixin content-box
  margin-top: 20px
  padding: 25px
  border: $content_box_border
  background-color: $content_box_bg_color
  min-height: 65px
  zoom: 1
  overflow-x: auto

  h3, h2
    border-bottom: 1px solid #EAEAEA
    color: #444444
    font-size: 17px
    font-weight: normal
    margin: 0 0 20px
    padding: 5px 0 10px

  table
    padding: 10px
    margin-top: 15px
    margin-bottom: 15px

  table
    &.issues td, &.list, th
      border: none
      padding: 0
      width: auto
      padding-right: 30px
      padding-bottom: 5px
    th
      border: none
      background: transparent
      font-weight: bold

    tr.even
      background-color: white
  ul
    margin-bottom: 20px

// Make sure an element doesn't collapse due to floated elements inside
@mixin prevent-float-collapse
  &:after
    content: " "
    display: block
    height: 0
    clear: both

@mixin text-shortener
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis
  -o-text-overflow: ellipsis
  -ms-text-overflow: ellipsis

@mixin allow-vertical-scrolling
  overflow-x: hidden
  overflow-y: auto

// Based on Bourbon mixin: http://bourbon.io/docs/#font-face
@mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $svg-font-id: $font-family)
  @font-face
    font-family: $font-family
    font-weight: $weight
    font-style:  $style
    src: font-url('#{$file-path}.eot')
    src: font-url('#{$file-path}.eot?#iefix') format('embedded-opentype'), font-url('#{$file-path}.woff') format('woff'), font-url('#{$file-path}.ttf') format('truetype'), font-url('#{$file-path}.svg##{$svg-font-id}') format('svg')
    text-rendering: optimizeLegibility

  // Always use SVG fonts (rather than WOFF/TTF) in WebKit-based browers
  // FIXME: we only want to target Chrome on Windows
  @media screen and (-webkit-min-device-pixel-ratio:0)
    @font-face
      font-family: $font-family
      font-weight: $weight
      font-style:  $style
      src: font-url('#{$file-path}.svg##{$svg-font-id}') format('svg')
    // Select dropdowns show strange characters on Chrome on Windows with the fix above
    // Temporarily use another font for them.
    // See https://www.openproject.org/work_packages/7479
    select
      font-family: sans-serif !important