Refactoring of style files
Change-Id: I56d3641741f2289bb0f9dbaf641b85a401cf1042
diff --git a/dev/scss/util.scss b/dev/scss/util.scss
index 6edd3e7..12fb54b 100644
--- a/dev/scss/util.scss
+++ b/dev/scss/util.scss
@@ -1,281 +1,6 @@
-/**
- * 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
-
-$black: #333;
-
-/**
- * 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%);
-$middle-green: lighten($ids-green-1, 9%);
-$light-green: lighten($ids-green-1, 13%); // #7ba400;
-$lightest-green: desaturate(lighten($light-green, 35%), 20%); // #d8e38c;
-$grey-green: darken(desaturate($lightest-green, 25%), 12%); // #bcc387;
-
-/**
- * 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;
-// $semilight-grey: #8d8d8d;
-$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;
-$button-width: 30px;
-$base-padding: 8px;
-$border-size: 2px;
-$result-border-size: 1px;
-$total-results: $light-green;
-
-$left-width: 176px;
-$border-size: 2px;
-$left-distance: $left-width + ($border-size * 2);
-
-/**
- * Path information - relative to css!
- */
-$img-path: '../img';
-$font-path: '../font';
-
-/**
- * Margins
- */
-$standard-margin: 40px;
-$right-distance: $standard-margin;
-$right-view-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 cell-info {
- text-overflow: ellipsis;
- white-space: nowrap;
- max-width: 25em;
- overflow: hidden;
- padding: 1px 6px;
- margin: 0px;
-}
-
-/**
- * Mixin for basic color transition
- */
-@mixin color-transition {
- transition: color 0.3s ease 0s;
-}
-
-@mixin input-field {
- outline: none;
- font-size: 11pt;
- border: $border-size solid $nearly-white;
- padding: 2px;
- margin: 0;
-}
-
-/**
- * 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
- */
-@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;
-}
-
-/**
-* Mixin for the appearance of inactive elements in the vcinfo panel
-*/
-@mixin vcinfo-inactive{
- background-color: $grey-green;
- color: $dark-green; // $semilight-grey;
- // border-color: $semilight-grey;
- text-shadow: none;
-}
-/**
- * Font Awesome symbol table
- */
-$fa-bars: "\f0c9";
-$fa-extlink: "\f08e";
-$fa-up: "\f0d8";
-$fa-down: "\f0d7";
-$fa-minimize: "\f0d8";
-$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-center-align: "\f037";
-$fa-question: "\f128";
-$fa-checked: "\f046";
-$fa-check: "\f096";
-$fa-code: "\f121";
-$fa-marked: "\f005";
-// $fa-metadata: "\f067";
-$fa-metadata: "\f055";
-$fa-to-query: "\f102";
-$fa-cut: "\f0c4";
-$fa-plugin: "\f1e6";
-$fa-referto: "\f0c5";
-$fa-redo: "\f01e";
+@import "base/colors";
+@import "base/icons";
+@import "base/mixins";
+@import "base/choose";
+@import "base/lengths";
+@import "base/paths";