Refactoring of style files
Change-Id: I56d3641741f2289bb0f9dbaf641b85a401cf1042
diff --git a/dev/scss/base/base.scss b/dev/scss/base/base.scss
new file mode 100644
index 0000000..022c590
--- /dev/null
+++ b/dev/scss/base/base.scss
@@ -0,0 +1,128 @@
+@charset "utf-8";
+@import "../util";
+@import "fonts";
+@import "flextable";
+@import "fragment";
+@import "load";
+@import "form";
+@import "view";
+@import "menu";
+
+/**
+ * Basic global CSS rules for Kalamar
+ */
+
+
+* {
+ @include box-sizing-box;
+}
+
+body,
+html,
+select,
+g > text {
+ font-family: verdana, tahoma, arial, Helvetica, sans-serif;
+ color: $dark-grey;
+ margin: 0;
+}
+
+g > text {
+ fill: $dark-grey;
+}
+
+html {
+ height: 100%;
+}
+
+body {
+ position: relative;
+ min-height: 100%;
+ font-size: 12pt;
+ margin: 0;
+ padding: 0;
+}
+
+a {
+ &:link {
+ text-decoration: none;
+ color: $dark-orange;
+ &:hover {
+ color: $darkest-orange;
+ transition: color 0.3s ease 0s;
+ }
+ }
+
+ // External links
+ &[href^="http://"]::after,
+ &[href^="https://"]::after {
+ @include icon-font;
+ content: " " + $fa-extlink;
+ font-size: 75%;
+ }
+}
+
+// Styles for Mojolicious::Plugin::TagHelpers::MailToChiffre
+a[onclick$='return PArok(this,false)'] {
+ unicode-bidi: bidi-override;
+ direction: rtl;
+ text-align: left;
+ & > span {
+ &:nth-child(1n+2){
+ display: none
+ }
+ &:nth-child(1)::after{
+ content: '@'
+ }
+ }
+}
+
+.clear {
+ clear: both;
+}
+
+blockquote {
+ border-radius: $standard-border-radius;
+ padding: 2pt 5pt 2pt 20pt;
+ margin: 0;
+ border-left: 5px solid $ids-blue-1;
+ background-color: $ids-blue-2;
+ color: $ids-blue-1;
+
+ &.bug,
+ &.missing {
+ border-left-color: $dark-red;
+ background-color: $middle-red;
+ color: $nearly-white;
+ }
+}
+
+dl {
+ margin: 0;
+ padding-bottom: .5em;
+
+ dt {
+ font-weight: bold;
+
+ abbr {
+ border-width: 0;
+
+ &[data-type=token]::after {
+ color: $ids-blue-1;
+ }
+
+ &[data-type=span]::after {
+ color: $ids-pink-1;
+ }
+
+ &::after {
+ content: ' (' attr(title) ')';
+ vertical-align: bottom;
+ font: {
+ style: italic;
+ weight: normal;
+ size: 80%;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/dev/scss/base/choose.scss b/dev/scss/base/choose.scss
new file mode 100644
index 0000000..fc3d250
--- /dev/null
+++ b/dev/scss/base/choose.scss
@@ -0,0 +1,66 @@
+@import "colors";
+
+/**
+ * Some color definitions and mixins for
+ * buttons and menus.
+ */
+$choose-bg: $light-grey;
+$choose-color: $dark-grey;
+$choose-blind-color: $middle-grey;
+$choose-border-color: $middle-grey;
+$choose-border: 2px solid $choose-border-color;
+$choose-box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
+
+
+/**
+ * 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;
+ background-color: $dark-orange;
+ border-color: $darker-orange;
+ text-shadow: none;
+}
+
+
+/**
+ * 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;
+ background-color: $light-green;
+ border-color: $dark-green;
+ text-shadow: none;
+}
+
+
+/**
+ * Chooseable items (action: remove something)
+ */
+@mixin choose-remove {
+ color: $nearly-white;
+ background-color: $middle-red;
+ border-color: $dark-red;
+ text-shadow: none;
+}
diff --git a/dev/scss/base/colors.scss b/dev/scss/base/colors.scss
new file mode 100644
index 0000000..244d1fe
--- /dev/null
+++ b/dev/scss/base/colors.scss
@@ -0,0 +1,87 @@
+/**
+ * Some colors and shadow definitions
+ * for Kalamar,
+ */
+
+/**
+ * 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;
+$middle-orange: #ffd080;
+$dark-orange: $ids-orange-1;
+$darker-orange: #ff8000;
+$darkest-orange: #e55d00;
+
+
+/**
+ * Green Colors
+ */
+$dark-green: $ids-green-1; // #496000;
+$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;
+$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%);
+$alert-red: rgb(254,26,0);
+
+/**
+ * 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;
+$kwic-highlight-3: $dark-orange;
+$kwic-highlight-4: $light-green;
diff --git a/dev/scss/base/flextable.scss b/dev/scss/base/flextable.scss
index 910d275..dc5ffd9 100644
--- a/dev/scss/base/flextable.scss
+++ b/dev/scss/base/flextable.scss
@@ -1,6 +1,9 @@
+@import "lengths";
+@import "mixins";
+
/**
* This defines flexible table cells
- * for views.
+ * for views (including media queries).
*/
dl.flex {
diff --git a/dev/scss/base/fonts.scss b/dev/scss/base/fonts.scss
index 81726ad..febfa57 100644
--- a/dev/scss/base/fonts.scss
+++ b/dev/scss/base/fonts.scss
@@ -1,5 +1,5 @@
@charset "utf-8";
-@import "../util";
+@import "paths";
/**
* Load web fonts for Kalamar
@@ -10,5 +10,5 @@
src: url('#{$font-path}/fontawesome-webfont.eot?v=4.3.0');
src: url('#{$font-path}/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('#{$font-path}/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('#{$font-path}/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('#{$font-path}/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('#{$font-path}/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
font-weight: normal;
- font-style: normal;
+ font-style: normal;
}
\ No newline at end of file
diff --git a/dev/scss/base/form.scss b/dev/scss/base/form.scss
index d5c9aba..6fc75dc 100644
--- a/dev/scss/base/form.scss
+++ b/dev/scss/base/form.scss
@@ -1,4 +1,9 @@
-// This class defines form views
+@import "lengths";
+@import "colors";
+
+/**
+ * Definition of form elements for Kalamar.
+ */
.form-table {
display: block;
@@ -8,11 +13,9 @@
border-width: 0;
padding: 0;
margin: 0;
- // margin-left: 5em;
- }
-
- fieldset > div {
- white-space: nowrap;
+ > div {
+ white-space: nowrap;
+ }
}
legend {
@@ -22,7 +25,8 @@
border-radius: $standard-border-radius;
}
- label, input[type=radio] {
+ label,
+ input[type=radio] {
font-size: 80%;
}
@@ -31,63 +35,65 @@
text-align: left;
}
- label[for], input[type=submit], a.form-button {
+ label[for],
+ input[type=submit],
+ a.form-button {
margin-top: 2em;
}
- input, textarea, button, a.form-button {
+ input,
+ textarea,
+ button,
+ a.form-button {
border-radius: $standard-border-radius;
}
- input, textarea {
- border-color: $ids-grey-2;
+ input,
+ textarea {
+ border-color: $ids-grey-2;
background-color: $nearly-white;
- border-style: solid;
+ border-style: solid;
}
- input, textarea, select, a.form-button {
+ input,
+ textarea,
+ select,
+ a.form-button {
border-style: solid;
- display: inline-block;
- width: 20%;
- min-width: 20em;
- padding: $base-padding;
+ display: inline-block;
+ width: 20%;
+ min-width: 20em;
+ padding: $base-padding;
}
input[type=radio] {
- display: inline;
- text-aline: right;
+ display: inline;
+ text-aline: right;
background-color: red;
- width: auto;
- min-width: auto;
+ width: auto;
+ min-width: auto;
}
- input[readonly=readonly],textarea[readonly] {
- background-color: $light-orange; // rgba(0,0,0,0.5);
+ input[readonly=readonly],
+ textarea[readonly] {
+ background-color: $light-orange;
}
.field-with-error {
border-color: $ids-pink-1;
}
- /*
- input:not([type=radio]),
- button,
- a.form-button {
- height: 3em;
- }
-*/
-
input[type=submit],
button,
a.form-button {
- display: inline-block;
- cursor: pointer;
- border-width: thin;
- text-align: center;
+ display: inline-block;
+ cursor: pointer;
+ border-width: thin;
+ text-align: center;
background-color: $middle-green;
- border-color: $dark-green;
- font-size: 8pt;
- color: $dark-green;
+ border-color: $dark-green;
+ font-size: 8pt;
+ color: $dark-green;
}
a.form-button:hover {
@@ -95,13 +101,98 @@
}
label.field-required::after {
- color: $ids-blue-1;
- content:'*';
+ color: $ids-blue-1;
+ content: '*';
}
}
.button-abort {
background-color: $middle-orange !important;
- color: $darkest-orange !important;
- border-color: $darkest-orange !important;
+ color: $darkest-orange !important;
+ border-color: $darkest-orange !important;
+}
+
+button {
+ cursor: pointer;
+
+ + button {
+ right: 0;
+ }
+
+ &[type=submit] {
+ @include choose-item;
+ font-weight: normal;
+ padding: 0;
+ height: 100%;
+ top: 0;
+ width: $button-width;
+
+ > span:nth-of-type(1) {
+ @include blind;
+ }
+
+ &::after {
+ font-family: "FontAwesome";
+ }
+
+ border: $border-size solid $nearly-white;
+
+ &:hover,
+ &:focus {
+ @include choose-hover;
+ }
+
+ &::-moz-focus-inner {
+ border: none;
+ }
+
+ &:active {
+ @include choose-active;
+ }
+
+ /*
+ * This is just for styling the last button,
+ * in case there are more than one buttons.
+ */
+ &:last-of-type {
+ border: {
+ right-width: $border-size;
+ right-style: solid;
+ top-right-radius: $standard-border-radius;
+ bottom-right-radius: $standard-border-radius;
+ }
+ }
+ }
+}
+
+/**
+ * Checkbox styling
+ * http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css
+ */
+.checkbox {
+ display: none;
+
+ + label {
+ cursor: pointer;
+
+ span {
+ display: inline-block;
+ border-radius: 4px;
+ width: 1em;
+ height: 1em;
+ line-height: 1em;
+ vertical-align: middle;
+ padding: 0;
+ margin-right: .2em;
+
+ &::after {
+ @include icon-font;
+ content: $fa-check;
+ }
+ }
+ }
+
+ &:checked + label span::after {
+ content: $fa-checked;
+ }
}
diff --git a/dev/scss/base/fragment.scss b/dev/scss/base/fragment.scss
index 0a986d5..f68e7db 100644
--- a/dev/scss/base/fragment.scss
+++ b/dev/scss/base/fragment.scss
@@ -1,31 +1,40 @@
@charset "utf-8";
-@import "../util";
+@import "choose";
+@import "lengths";
+@import "icons";
-.vc.fragment, p.query.fragment {
- position:relative;
+/**
+ * Definitions of fragments for vc and query
+ * builder.
+ */
+
+.vc.fragment,
+p.query.fragment {
@include choose-item;
+ position: relative;
+ padding: 4pt 6pt !important;
border : {
- width: $border-size;
- style: solid;
+ width: $border-size;
+ style: solid;
radius: $standard-border-radius;
}
- padding: 4pt 6pt !important;
+
margin: {
- // left: $border-size;
- left: $left-distance;
- top: .5em;
+ left: $left-distance;
+ top: .5em;
bottom: .5em;
- right: $right-view-distance;
+ right: $right-view-distance;
}
+
&:hover {
- cursor:pointer;
@include choose-hover;
+ cursor: pointer;
}
// This is the description
> span:first-of-type {
- font-weight: bold;
+ font-weight: bold;
padding-right: 4pt;
}
@@ -36,9 +45,9 @@
&::after {
font-family: 'FontAwesome';
- content: $fa-to-query;
- position: absolute;
- right: 4pt;
- top: $border-size;
+ content: $fa-to-query;
+ position: absolute;
+ right: 4pt;
+ top: $border-size;
}
}
diff --git a/dev/scss/base/icons.scss b/dev/scss/base/icons.scss
new file mode 100644
index 0000000..64b9a60
--- /dev/null
+++ b/dev/scss/base/icons.scss
@@ -0,0 +1,35 @@
+/**
+ * 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";
diff --git a/dev/scss/base/lengths.scss b/dev/scss/base/lengths.scss
new file mode 100644
index 0000000..d0aafd5
--- /dev/null
+++ b/dev/scss/base/lengths.scss
@@ -0,0 +1,21 @@
+/*
+ * Defined lengths and sizes for the
+ * Kalamar layout.
+ */
+$standard-border-radius: 6px;
+$item-padding: 3pt 6pt;
+$button-width: 30px;
+$base-padding: 8px;
+$border-size: 2px;
+$result-border-size: 1px;
+$left-width: 176px;
+$border-size: 2px;
+$left-distance: $left-width + ($border-size * 2);
+
+/**
+ * Margins
+ */
+$standard-margin: 40px;
+$right-distance: $standard-margin;
+$right-view-distance: $standard-margin / 2;
+$logo-left-distance: 230px;
diff --git a/dev/scss/base/load.scss b/dev/scss/base/load.scss
index 1917a54..c634fa9 100644
--- a/dev/scss/base/load.scss
+++ b/dev/scss/base/load.scss
@@ -1,14 +1,18 @@
+/**
+ * Load indicator.
+ */
+
div.loading {
background-color: transparent !important;
- height: 16px !important;
- width: 16px !important;
- margin: 0 auto !important;
+ height: 16px !important;
+ width: 16px !important;
+ margin: 0 auto !important;
}
.loading {
background: {
position: center;
- repeat: no-repeat;
- image: url('data:image/gif;base64,R0lGODlhEAAQAIABAP///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJBAABACwAAAAAEAAQAAACKYQPobt44QyM01VW0cVNPq48Hzh2UngyGvet6OpmKWmBb5TI+LlTOlAAACH5BAkEAAEALAAAAAAQABAAAAIohA+hu3gMnXyBqnkNw1XDnHThZ32bd6LUg0SOOIJsCaPmtOJvrctHAQAh+QQJBAABACwAAAAAEAAQAAACKYQPobt44QyM01VW0cVNPq48nxZKGLkxqGiungmyCXh9nRUleSZrO10AACH5BAkEAAEALAAAAAAQABAAAAIohA8RyKwN04pSWdumufp0niHghnkPyaWmqZLsKL3QWXUrJdpo66RKAQAh+QQJBAABACwAAAAAEAAQAAACJoQPEcisDdOKUlnbrp4IH989n1iBJUhK47itxkbGsEvRtXq/8B4UACH5BAkEAAEALAAAAAAQABAAAAIphA8RyKwN04pSWdvuNPto1HEX6G1YOYrain5im0pQ/GSnTIFr7eyhUQAAIfkECQQAAQAsAAAAABAAEAAAAiqMf6ALwWoelJFS5CbESTdeNUu3jWP4IWe2qS0TsmC8cuZFsrAkWrgtKQAAIfkECQQAAQAsAAAAABAAEAAAAiiMf6AL6LwMnDFQVG9SkrveWN6XjR82Mmi4cdMTvWsjnyIV4rIOgUwBACH5BAkEAAEALAAAAAAQABAAAAImjH+gC8HrXpNTxoeuzkltrkFg6BnMiJxpaYpWV76jDFKujV14LBUAIfkEAR4AAQAsAAAAABAAEAAAAiSEDxHIrA3TilJZ266eaN/8HJixdd4nailXgafrwSUVUqltQgUAOw==');
+ repeat: no-repeat;
+ image: url('data:image/gif;base64,R0lGODlhEAAQAIABAP///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJBAABACwAAAAAEAAQAAACKYQPobt44QyM01VW0cVNPq48Hzh2UngyGvet6OpmKWmBb5TI+LlTOlAAACH5BAkEAAEALAAAAAAQABAAAAIohA+hu3gMnXyBqnkNw1XDnHThZ32bd6LUg0SOOIJsCaPmtOJvrctHAQAh+QQJBAABACwAAAAAEAAQAAACKYQPobt44QyM01VW0cVNPq48nxZKGLkxqGiungmyCXh9nRUleSZrO10AACH5BAkEAAEALAAAAAAQABAAAAIohA8RyKwN04pSWdumufp0niHghnkPyaWmqZLsKL3QWXUrJdpo66RKAQAh+QQJBAABACwAAAAAEAAQAAACJoQPEcisDdOKUlnbrp4IH989n1iBJUhK47itxkbGsEvRtXq/8B4UACH5BAkEAAEALAAAAAAQABAAAAIphA8RyKwN04pSWdvuNPto1HEX6G1YOYrain5im0pQ/GSnTIFr7eyhUQAAIfkECQQAAQAsAAAAABAAEAAAAiqMf6ALwWoelJFS5CbESTdeNUu3jWP4IWe2qS0TsmC8cuZFsrAkWrgtKQAAIfkECQQAAQAsAAAAABAAEAAAAiiMf6AL6LwMnDFQVG9SkrveWN6XjR82Mmi4cdMTvWsjnyIV4rIOgUwBACH5BAkEAAEALAAAAAAQABAAAAImjH+gC8HrXpNTxoeuzkltrkFg6BnMiJxpaYpWV76jDFKujV14LBUAIfkEAR4AAQAsAAAAABAAEAAAAiSEDxHIrA3TilJZ266eaN/8HJixdd4nailXgafrwSUVUqltQgUAOw==');
}
}
diff --git a/dev/scss/base/menu.scss b/dev/scss/base/menu.scss
new file mode 100644
index 0000000..054dabd
--- /dev/null
+++ b/dev/scss/base/menu.scss
@@ -0,0 +1,248 @@
+@charset "utf-8";
+@import "choose";
+@import "lengths";
+@import "icons";
+
+/**
+ * Definitions for menu design.
+ */
+
+ul.menu {
+ position: absolute;
+ padding: 0;
+ margin: 0;
+ text-indent: 0;
+
+ opacity: 0;
+ &.visible {
+ opacity: 1;
+ }
+
+ list-style: {
+ type: none;
+ position: outside;
+ }
+
+ &,
+ > span.pref:not(:empty) {
+ box-sizing: border-box;
+ text-shadow: none;
+ font-weight: normal;
+ z-index: 120;
+ }
+
+ > li,
+ > span.pref:not(.active) {
+ @include choose-item;
+ }
+
+ > li,
+ > span.pref:not(:empty) {
+ @include choose-item;
+ box-shadow: $choose-box-shadow;
+ cursor: pointer;
+ padding: $item-padding;
+ white-space: normal;
+ border: {
+ width: $border-size;
+ bottom-width: 0px;
+ top-width: 0px;
+ style: solid;
+ }
+ }
+ span.desc {
+ display: block;
+ font-size: 75%;
+ }
+
+ div.lengthField {
+ border: {
+ color: transparent;
+ width: $border-size;
+ }
+ padding: $item-padding;
+ padding-top: 0;
+ padding-bottom: 0;
+ span {
+ display: block !important;
+ line-height: 0;
+ color: transparent;
+ }
+ }
+
+ /**
+ * Ruler
+ */
+ > div.ruler {
+ position: absolute;
+ right: 0px;
+ margin-right: -14px;
+ background-color: transparent;
+ width: 14px;
+ height: 100%;
+ opacity: 0;
+ cursor: pointer;
+ transition: opacity .5s ease 1s;
+
+ > span {
+ @include choose-active;
+ position: absolute;
+ display: block;
+ right: 0;
+ width: 10px;
+ z-index: 115;
+ border: {
+ radius: 4px;
+ width: 2px;
+ style: solid;
+ }
+ }
+
+ &.active > span {
+ @include choose-hover;
+ }
+
+ > div {
+ @include choose-item;
+ box-shadow: $choose-box-shadow;
+ position: absolute;
+ right: 0;
+ width: 10px;
+ height: 100%;
+ border: {
+ radius: 4px;
+ width: 2px;
+ style: solid;
+ }
+ }
+ }
+
+ &:active > div.ruler,
+ &:hover > div.ruler,
+ > div.ruler.active {
+ transition: opacity .1s ease;
+ opacity: 1;
+ }
+
+
+ /**
+ * List items
+ */
+ > li,
+ div.lengthField {
+ padding-right: 1.6em;
+ }
+
+ > li {
+ &:first-of-type {
+ border-top: {
+ width: $border-size;
+ left-radius: $standard-border-radius;
+ right-radius: $standard-border-radius;
+ }
+ }
+
+ &:last-of-type {
+ border-bottom: {
+ width: $border-size;
+ left-radius: $standard-border-radius;
+ right-radius: $standard-border-radius;
+ }
+ }
+ mark {
+ text-decoration: underline;
+ background-color: transparent;
+ color: inherit;
+ font-weight: bold;
+ }
+ }
+
+ > li.active,
+ > span.pref.active {
+ @include choose-active;
+ }
+
+ > li:hover,
+ > span.pref:hover {
+ @include choose-hover;
+ }
+
+ /**
+ * Default prefix view
+ */
+ > span.pref:not(:empty) {
+ position: absolute;
+ min-width: 5px;
+ font-size: 80%;
+ left: 0;
+ bottom: 0;
+ display: block;
+ margin-bottom: -2.1em;
+ padding: 2px 6px;
+ border: {
+ radius: $standard-border-radius;
+ width: $border-size;
+ }
+ }
+}
+
+
+/**
+ * Rolling menu
+ */
+ul.menu.roll {
+ > li:first-of-type {
+ &:not(.no-more):before {
+ position: absolute;
+ font-family: "FontAwesome";
+ content: $fa-up;
+ right: .5em;
+ top: .4em;
+ }
+ }
+ > li:last-of-type {
+ &:not(.no-more):before {
+ position: absolute;
+ font-family: "FontAwesome";
+ content: $fa-down;
+ right: .5em;
+ bottom: .4em;
+ }
+ }
+ &:not(.visible) {
+ height: 0;
+ }
+}
+
+
+/**
+ * Sorting menu
+ */
+ul.menu.sort {
+ position: relative;
+ display: inline-block;
+ > li::before {
+ content: '';
+ }
+ > li.active:hover {
+ @include choose-remove;
+ }
+}
+
+
+/**
+ * select menu
+ */
+span.menu.select {
+ > span {
+ z-index: 105;
+ }
+ > ul.menu.roll {
+ display: none;
+ z-index: -100;
+ &.visible {
+ display: block;
+ z-index: 110;
+ }
+ }
+}
diff --git a/dev/scss/base/mixins.scss b/dev/scss/base/mixins.scss
new file mode 100644
index 0000000..765ea76
--- /dev/null
+++ b/dev/scss/base/mixins.scss
@@ -0,0 +1,67 @@
+@import "colors";
+
+/**
+ * Mixin for blind elements
+ * (e.g., spans in elements with an icon background)
+ */
+@mixin blind {
+ position: absolute;
+ margin-left: -3000px;
+}
+
+
+@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 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 icon fonts
+ */
+@mixin icon-font {
+ font-family: 'FontAwesome';
+ white-space: nowrap;
+}
+
+
+/**
+ * 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+ */
+}
+
+
+@mixin matchinfo-head {
+ border-top: $border-size solid $darker-orange; // #ff8000;
+ width: $left-width / 2;
+}
\ No newline at end of file
diff --git a/dev/scss/base/paths.scss b/dev/scss/base/paths.scss
new file mode 100644
index 0000000..7ff9527
--- /dev/null
+++ b/dev/scss/base/paths.scss
@@ -0,0 +1,5 @@
+/**
+ * Path information - relative to css!
+ */
+$img-path: '../img';
+$font-path: '../font';
diff --git a/dev/scss/base/view.scss b/dev/scss/base/view.scss
index 96162cf..5aa4b6e 100644
--- a/dev/scss/base/view.scss
+++ b/dev/scss/base/view.scss
@@ -1,4 +1,4 @@
-@import "../util.scss";
+@import "colors";
.result-view {
background-color: $nearly-white;