QutBioacousticsResearchGroup/bioacoustic-workbench

/**********************************************************
 *
 *                  Reusable components
 *
 **********************************************************/


/*
 *
 *  Global variables
 *
 */


// https://kuler.adobe.com/#themeID/1080677
// http://colorschemedesigner.com/
$primary-color:         #E9E7C2 #D4DEB8 #e8e7e4;
$master-background:     #E9E7C2 #E9EFD8 #e8e7e4;
$master-highlight:      #7B903C #7A903C #97904A;
$master-highlight-2:    #D4DEB8 #ADC7A5 #97764A;
$master-dark:           #2C2C2A #1D1D0E #78787A;
$master-dark-2:         #212120 #1D1D0E #AEADAC;
$master-complementary:  #4A2B66 #73305F #34346A;

$error-dirty:           rgba(216, 109, 132, 0.7) rgba(216, 109, 132, 0.4) rgba(216, 109, 132, 0.1);

// https://kuler.adobe.com/#themeID/2220568
$time-recording-relative-color: #67BF47;
$time-segment-relative-color: #2DA65D;
$time-chunk-relative-color: #34888C;
$time-absolute-color: #414F73;
$time-duration-color: #623D73; //#EEF272;

$standard-padding-horizontal: 0.5em;
$standard-padding-vertical:   0.25em;
$standard-padding:             $standard-padding-vertical $standard-padding-horizontal;

$standard-margin-horizontal: 0.75em;
$standard-margin-vertical:   0.5em;
$standard-margin:             $standard-margin-vertical $standard-margin-horizontal;

$adjacent-padding: $standard-padding-horizontal / 2;

$border-width: 1px;
$border-style: solid;
$standard-border: $border-width $border-style;
$standard-border-radius: 4px;

$standard-glow-alpha: 0.2;

$standard-line-height: 1em;

/*
 *
 *  Specific styles
 *
 */
$footer-height: 40px;

/*
 *
 *  Functions
 *
 */

@mixin vendor-prefix($name, $arguments...) {
  #{$name}: $arguments;
  -webkit-#{$name}: $arguments;
  -ms-#{$name}: $arguments;
  -moz-#{$name}: $arguments;
  -o-#{$name}: $arguments;
}

@mixin vendor-prefix-function($property, $name, $arguments...) {
  #{$property}: #{$name}unquote('('#{$arguments}')');
  #{$property}: -webkit-#{$name}unquote('('#{$arguments}')') ;
  #{$property}: -ms-#{$name}unquote('('#{$arguments}')') ;
  #{$property}: -moz-#{$name}unquote('('#{$arguments}')') ;
  #{$property}: -o-#{$name}unquote('('#{$arguments}')') ;
}

@mixin gradient($type, $to...) {
  // old browsers
  // http://www.colorzilla.com/gradient-editor/
  background-color: nth($to, 1);

  @if $type == "linear" {
    @include vendor-prefix-function(background, linear-gradient, $to);
  }
  @else {
    @include vendor-prefix-function(background, radial-gradient, circle, $to);
  }

}

@mixin rounded-corners($args...) {
  @include vendor-prefix(border-radius, $args);
}


/*
 *
 *  Animations
 *
 */

@mixin transition($properties:all, $duration:500ms, $function:ease, $delay:0) {
    @include vendor-prefix(transition, join($properties,(), comma));
    @include vendor-prefix(transition-duration, join($duration,(), comma));
    @include vendor-prefix(transition-timing-function, join($function,(), comma));
    @include vendor-prefix(transition-delay, join($delay, (), comma));
}


@mixin glow($color) {
  $alphaed: rgba($color, $standard-glow-alpha);
  @include vendor-prefix(box-shadow, 0 0 5px 5px $alphaed);
  @include transition(box-shadow border-color,  400ms 50ms, linear linear);

}




/*
 *
 *  Styles
 *  // see ./layout.css.scss
 */