dev/scss/util.scss

/**
 * Some variables and mixins for Kalamar,
 * other Sass styles will use.
 */

/**
 * Official IDS colors
 */
$ids-orange-1: rgb(246, 168,   0);
$ids-orange-2: rgb(242, 148,   0);
$ids-grey-1:   rgb(135, 136, 138);
$ids-grey-2:   rgb(217, 218, 219);
$ids-blue-1:   rgb(  0, 158, 224); // Pragmatik
$ids-blue-2:   rgb(188, 228, 247); // Pragmatik
$ids-green-1:  rgb( 99, 111,   7); // Grammatik
$ids-green-2:  rgb(227, 232, 163); // Grammatik
$ids-pink-1:   rgb(193,   0,  43); // Lexik
$ids-pink-2:   rgb(250, 243, 222); // Lexik

/**
 * Orange Colors
 */
$light-orange:   #f4eebb; // #ffe56a;
$middle-orange:  #ffd080;
$dark-orange:    $ids-orange-1; // #ffa500;
$darker-orange:  #ff8000;
$darkest-orange: #e55d00;
// $light-orange-2: #f4eebb;, #ffd080;
// Yellow: #fff48d

/**
 * Green Colors
 */
$dark-green:     $ids-green-1; // #496000;
$middle-green:   lighten($ids-green-1, 5%); // $ids-green-1; // #688704;
$light-green:    lighten($ids-green-1, 13%); // #7ba400;
$lightest-green: lighten($ids-green-1, 26%);

/**
 * Blue Colors
 */
$light-blue:     $ids-blue-2;
$dark-blue:      $ids-blue-1;
$darkest-blue:   darken($dark-blue, 40%);

/**
 * Grey Colors
 */
$middle-grey:  $ids-grey-1; // #999;
$light-grey:   $ids-grey-2; // #ddd;
$dark-grey:    darken($middle-grey, 15%);
$nearly-white: #fefefe;

/**
 * Red Colors (no IDS relation)
 */
$middle-red: #c1002b;
$light-red: lighten($middle-red, 40%);
$dark-red: darken($middle-red, 40%);


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

/**
 * 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:  $middle-red;
$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;
$item-padding: 3pt 6pt;

$total-results: $light-green;

/**
 * Path information - relative to css!
 */
$img-path:  '../img';
$font-path: '../font';

/**
 * Margins
 */
$standard-margin: 40px;
$right-distance: $standard-margin;
$right-match-distance: $standard-margin / 2;
$logo-left-distance: 230px;

/**
 * Mixin for blind elements
 * (e.g., spans in elements with an icon background)
 */
@mixin blind {
  position: absolute;
  margin-left: -3000px;
}


/**
 * Chooseable items (default)
 */
@mixin choose-item {
  color: $choose-color;
  background-color: $choose-bg;
  border-color: $choose-border-color;
  text-shadow: $light-shadow;
}

/**
 * Chooseable items (mouse over)
 */
@mixin choose-hover {
  color: $nearly-white;
  text-shadow: none;
  background-color: $dark-orange;
  border-color: $darker-orange;
}

/**
 * Chooseable items (not available)
 */
@mixin choose-inactive {
  color: lighten($choose-color, 20%);
  background-color: lighten($choose-bg, 20%);
  border-color: transparent;
  text-shadow: none;
}

/**
 * Chooseable items (active)
 */
@mixin choose-active {
  color: $dark-green;
  text-shadow: none;
  background-color: $light-green;
  border-color: $dark-green;
}

/**
 * Chooseable items (action: remove something)
 */
@mixin choose-remove {
  color: $nearly-white;
  text-shadow: none;
  background-color: $middle-red;
  border-color: $dark-red;
}

/**
 * Mixin for basic color transition
 */
@mixin color-transition {
  transition: color 0.3s ease 0s;
}

/**
 * Mixing for basic text padding
 */
@mixin standard-text-padding {
  padding-left: .4em;
  padding-right: .4em;
}


/**
 * Mixing for correct box sizing (probably not necessary)
 * DEPRECATED
 */
@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+ */
}

/**
 * Noisy background (probably not necessary)
 */
@mixin light-noise {
  background-image:url('#{$img-path}/noise.png');
}

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


/**
 * Font Awesome symbol table
 */
$fa-bars:        "\f0c9";
$fa-extlink:     "\f08e";
$fa-up:          "\f0d8";
$fa-down:        "\f0d7";
$fa-close:       "\f00d";
$fa-download:    "\f019";
$fa-info:        "\f05a";
$fa-elipsis:     "\f141";
$fa-previous:    "\f0d9";
$fa-next:        "\f0da";
$fa-search:      "\f002";
$fa-rewrite:     "\f040";
$fa-login:       "\f090";
$fa-logout:      "\f08b";
$fa-tutorial:    "\f19d";
$fa-left-align:  "\f036";
$fa-right-align: "\f038";
$fa-question:    "\f128";
$fa-checked:     "\f046";
$fa-check:       "\f096";
$fa-code:        "\f121";
$fa-marked:      "\f005";