Subversion Repositories Integrator Subversion

//

// Mixins

// Based on Twitter Bootstrap's _mixings.scss

// Clearfix

// Source: http://nicolasgallagher.com/micro-clearfix-hack/

@mixin clearfix() {

  &:before,

  &:after {

    content: " "; // 1

    display: table; // 2

  }

  &:after {

    clear: both;

  }

}

// Opacity

@mixin opacity($value) {

  opacity: $value;

  filter: alpha(opacity=#{$value * 100});

}

// Border radius.

@mixin border-radius($radius, $important: '') {

  -webkit-border-radius: $radius#{$important};

  -moz-border-radius: $radius#{$important};

  -ms-border-radius: $radius#{$important};

  -o-border-radius: $radius#{$important};

  border-radius: $radius#{$important};

}

// Placeholder text

// -------------------------

@mixin placeholder($color: $input-color-placeholder) {

  &::-moz-placeholder           { color: $color; opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526

  &:-ms-input-placeholder       { color: $color; } // Internet Explorer 10+

  &::-webkit-input-placeholder  { color: $color; } // Safari and Chrome

}

// Drop shadows

// By default set to: none

@mixin box-shadow($shadow) {

  -webkit-box-shadow: none; // iOS <4.3 & Android <4.1

          box-shadow: none;

}

// Vertical gradient, from top to bottom

// By default set to: none

@mixin gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg) {

  background-image: none;

  background-image: none;

}

// Panels

// -------------------------

@mixin panel-variant($border, $heading-text-color, $heading-bg-color, $heading-border) {

  border-color: $border;

  & > .panel-heading {

    color: $heading-text-color;

    background-color: $heading-bg-color;

    border-color: $heading-border;

    + .panel-collapse .panel-body {

      border-top-color: $border;

    }

  }

  & > .panel-footer {

    + .panel-collapse .panel-body {

      border-bottom-color: $border;

    }

  }

}

// Alerts

// -------------------------

@mixin alert-variant($background, $border, $text-color) {

  background-color: $background;

  border-color: $border;

  color: $text-color;

  hr {

    border-top-color: darken($border, 5%);

  }

  .alert-link {

    color: darken($text-color, 10%);

  }

}

// Tables

// -------------------------

@mixin table-row-variant($state, $background, $text) {

  // Exact selectors below required to override `.table-striped` and prevent

  // inheritance to nested tables.

  .table > thead > tr,

  .table > tbody > tr,

  .table > tfoot > tr {

    > td.#{$state},

    > th.#{$state},

    &.#{$state} > td,

    &.#{$state} > th {

      background: $background;

      color: $text;

    }

  }

  // Hover states for `.table-hover`

  // Note: this is not available for cells or rows within `thead` or `tfoot`.

  .table-hover > tbody > tr {

    > td.#{$state}:hover,

    > th.#{$state}:hover,

    &.#{$state}:hover > td,

    &.#{$state}:hover > th {

      background: darken($background, 5%);

    }

  }

}

// List Groups

// -------------------------

@mixin list-group-item-variant($state, $background, $color) {

  .list-group-item-#{$state} {

    color: $color;

    background-color: $background;

    // [converter] extracted a& to a.list-group-item-#{$state}

  }

  a.list-group-item-#{$state} {

    color: $color;

    .list-group-item-heading { color: inherit; }

    &:hover,

    &:focus {

      color: $color;

      background-color: darken($background, 5%);

    }

    &.active,

    &.active:hover,

    &.active:focus {

      color: #fff;

      background-color: $color;

      border-color: $color;

    }

  }

}

// Button variants

// -------------------------

// Easily pump out default styles, as well as :hover, :focus, :active,

// and disabled options for all buttons

@mixin button-variant($color, $background, $border) {

  color: $color;

  background-color: $background;

  border-color: $border;

  &:hover,

  &:focus,

  &:active,

  &.active {

    color: $color;

    background-color: darken($background, 7%);

    @if $border != "" { border-color: darken($border, 10%); }

  }

  .open & { &.dropdown-toggle {

    color: $color;

    background-color: darken($background, 7%);

    @if $border != "" { border-color: darken($border, 10%); }

  } }

  &:active,

  &.active {

    background-image: none;

    background-color: darken($background, 12%);

    &:hover {

      background-color: darken($background, 10%);

    }

  }

  .open & { &.dropdown-toggle {

    background-image: none;

  } }

  &.disabled,

  &[disabled],

  fieldset[disabled] & {

    &,

    &:hover,

    &:focus,

    &:active,

    &.active {

      background-color: $background;

      @if $border != "" { border-color: $border; }

    }

  }

  .badge {

    color: $background;

    background-color: $color;

  }

}

// Labels

// -------------------------

@mixin label-variant($color) {

  background-color: $color;

  &[href] {

    &:hover,

    &:focus {

      background-color: darken($color, 10%);

    }

  }

}

// Progress bars

// -------------------------

@mixin progress-bar-variant($color) {

  background-color: $color;

  .progress-striped & {

    @include gradient-striped();

  }

}

// Form validation states

//

// Used in forms.less to generate the form validation CSS for warnings, errors,

// and successes.

@mixin form-control-validation($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) {

  // Color the label and help text

  .help-block,

  .help-inline,

  .control-label,

  .radio,

  .checkbox,

  .radio-inline,

  .checkbox-inline  {

    color: $text-color;

  }

  // Set the border and box shadow on specific inputs to match

  .form-control {

    border-color: $border-color;

    @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work

    &:focus {

      border-color: darken($border-color, 10%);

      $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%);

      @include box-shadow($shadow);

    }

  }

  // Set validation states also for addons

  .input-group-addon {

    color: $text-color;

    border-color: $border-color;

    background-color: $background-color;

  }

  // Optional feedback icon

  .form-control-feedback {

    color: $text-color;

  }

}