public/scss/util.scss

/**
 * Orange Colors
 */
$light-orange:   #f4eebb; // #ffe56a;
$middle-orange:  #ffd080;
$dark-orange:    #ffa500;
$darker-orange:  #ff8000;
$darkest-orange: darken($dark-orange, 20%);
// $light-orange-2: #f4eebb;, #ffd080;
// Yellow: #fff48d

/**
 * Green Colors
 */
$dark-green:    #496000;
$middle-green:  #688704;
$light-green:   #7ba400;

/**
 * Blue Colors
 */
$light-blue:     #cfe6f4;
$dark-blue:      #73b2f4;
$darkest-blue:   darken($dark-blue, 40%);


/*
 * Grey
 */
$light-grey:   #ddd;
$dark-grey:    #555;
$middle-grey:  #999;
// $nearly-white: #f5f5f5;
$nearly-white: #fff;

$dark-shadow: 1px 1px 1px rgba(0,0,0,0.3);
$light-shadow: 1px 1px rgba(255,255,255,0.5);

$total-results: $light-green;

/**
 * KWIC colors
 */
$kwic-border:       $middle-grey;
$kwic-line-noneven: $light-grey;
$kwic-line-even:    $nearly-white;
$kwic-match-color:  $dark-grey;
$kwic-match-shadow: $light-shadow;

$kwic-highlight-1:  #c1002b;
$kwic-highlight-2:  $dark-blue;   // #009ee0;
$kwic-highlight-3:  $dark-orange; // #f29400;
$kwic-highlight-4:  $light-green;

$choose-bg:     $light-grey;
$choose-border-color: $middle-grey;
$choose-border: 2px solid $choose-border-color;
$choose-color:  $dark-grey;
$choose-blind-color:  $middle-grey;
$choose-box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
$standard-border-radius: 6px;

/**
 * Path information
 */
$img-path: '../../img/build';
$font-path: '../../font';

/**
 * Margins
 */
$standard-margin: 30px;
$right-match-distance: 20px;

@mixin blind {
  position: absolute;
  margin-left: -3000px;
}

@mixin choose-item {
  color: $choose-color;
  background-color: $choose-bg;
  border-color: $choose-border-color;
  text-shadow: $light-shadow;
}

@mixin choose-hover {
  color: $nearly-white;
  text-shadow: none;
  background-color: $dark-orange;
  border-color: $darker-orange;
}

@mixin choose-active {
  color: $dark-green;
  text-shadow: none;
  background-color: $light-green;
  border-color: $dark-green;
}

@mixin color-transition {
  transition: color 0.3s ease 0s;
}

@mixin standard-text-padding {
  padding-left: .4em;
  padding-right: .4em;
}

@mixin box-sizing-box() {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}


// https://css-tricks.com/almanac/properties/a/appearance/
@mixin no-appearance {
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
}