Fixed datepicker bug and improved vc demo
diff --git a/dev/scss/base.scss b/dev/scss/base.scss
index dcc7250..13cec6f 100644
--- a/dev/scss/base.scss
+++ b/dev/scss/base.scss
@@ -1,7 +1,14 @@
@charset "utf-8";
@import "util";
-body, html, select, g > text {
+/**
+ * Basic global CSS rules for Kalamar
+ */
+
+body,
+html,
+select,
+g > text {
color: $dark-grey;
font-family: verdana, tahoma, arial;
margin: 0;
@@ -27,17 +34,6 @@
a {
- &[href^="http://"]::after,
- &[href^="https://"]::after {
- font-family: FontAwesome;
- content: " " + $fa-extlink;
- font-size: 75%;
- }
- &.doc-link::after {
- font-family: FontAwesome;
- content: " " + $fa-tutorial;
- font-size: 75%;
- }
&:link {
color: $dark-orange;
text-decoration: none;
@@ -46,20 +42,39 @@
@include color-transition;
}
}
+
+ // Visited links
&:visited {
color: $darkest-orange;
}
+
+ // External links
+ &[href^="http://"]::after,
+ &[href^="https://"]::after {
+ font-family: FontAwesome;
+ content: " " + $fa-extlink;
+ font-size: 75%;
+ }
+
+ // Link to documentation
+ &.doc-link::after {
+ font-family: FontAwesome;
+ content: " " + $fa-tutorial;
+ font-size: 75%;
+ }
}
-// MailToChiffre
+// Styles for Mojolicious::Plugin::TagHelpers::MailToChiffre
a[onclick$='return PArok(this,false)'] {
direction:rtl;
unicode-bidi:bidi-override;
- text-align:left
+ text-align:left;
+ & > span {
+ &:nth-child(1n+2){
+ display:none
+ }
+ &:nth-child(1)::after{
+ content:'@'
+ }
+ }
}
-a[onclick$='return PArok(this,false)']>span:nth-child(1n+2){
- display:none
-}
-a[onclick$='return PArok(this,false)']>span:nth-child(1)::after{
- content:'@'
-}
\ No newline at end of file
diff --git a/dev/scss/fonts.scss b/dev/scss/fonts.scss
index be46ba2..d0349a4 100644
--- a/dev/scss/fonts.scss
+++ b/dev/scss/fonts.scss
@@ -1,6 +1,10 @@
@charset "utf-8";
@import "util";
+/**
+ * Load web fonts for Kalamar
+ */
+
@font-face {
font-family: 'FontAwesome';
src: url('#{$font-path}/fontawesome-webfont.eot?v=4.3.0');
diff --git a/dev/scss/footer/footer.scss b/dev/scss/footer/footer.scss
index 0ce1ae4..a8a5d02 100644
--- a/dev/scss/footer/footer.scss
+++ b/dev/scss/footer/footer.scss
@@ -1,6 +1,9 @@
@charset "utf-8";
@import "../util";
+/**
+ * Rules for the footer section of Kalamar
+ */
footer {
position: absolute;
background-color: $dark-grey;
@@ -11,11 +14,12 @@
a:link {
margin: 0 .5em;
color: $light-grey;
- &:hover {
- color: $nearly-white;
- }
- &:active, &:visited {
- color: $dark-grey;
- }
+ }
+ &:hover {
+ color: $nearly-white;
+ }
+ &:active,
+ &:visited {
+ color: $dark-grey;
}
}
diff --git a/dev/scss/header/datepicker.scss b/dev/scss/header/datepicker.scss
index 806ca1e..79640b6 100644
--- a/dev/scss/header/datepicker.scss
+++ b/dev/scss/header/datepicker.scss
@@ -1,15 +1,24 @@
@charset "utf-8";
@import "../util";
+/**
+ * Rules for the datepicker widget
+ * (used in the Virtual Collection creator)
+ * in Kalamar.
+ */
+
$border-size: 2px;
div.datepicker {
display: inline-block;
position: absolute;
z-index: 8000;
+
font-size: 80%;
padding: 4pt;
+ @include choose-item;
box-shadow: $choose-box-shadow;
+
border: {
width: $border-size;
style: solid;
@@ -18,57 +27,58 @@
> div {
font-size: 120%;
width: 45%;
- }
- > div.month {
- float: right;
- }
+ &.month {
+ float: right;
+ }
- @include choose-item;
- > div > span {
- display: inline-block;
- &:first-child,
- &:last-child {
- width: 15%;
- &::before {
- display: inline-block;
- text-align: center;
- cursor: pointer;
- font-family: 'FontAwesome';
- min-width: 14px;
- }
- }
- &:first-child::before {
- content: $fa-previous;
- }
- &:last-child::before {
- content: $fa-next;
- }
- overflow: hidden;
- white-space: nowrap;
- &:nth-child(2) {
- cursor: pointer;
+ > span {
display: inline-block;
- width: 70%;
- text-align: center;
- text-overflow: ellipsis;
- border: {
- radius: $standard-border-radius;
- style: solid;
- width: $border-size;
- color: transparent;
+ &:first-child,
+ &:last-child {
+ width: 15%;
+ &::before {
+ display: inline-block;
+ text-align: center;
+ cursor: pointer;
+ font-family: 'FontAwesome';
+ min-width: 14px;
+ }
}
- &:hover {
- @include choose-hover;
+ &:first-child::before {
+ content: $fa-previous;
}
- &.selected {
- @include choose-active;
+ &:last-child::before {
+ content: $fa-next;
+ }
+ overflow: hidden;
+ white-space: nowrap;
+ &:nth-child(2) {
+ cursor: pointer;
+ display: inline-block;
+ width: 70%;
+ text-align: center;
+ text-overflow: ellipsis;
+ border: {
+ radius: $standard-border-radius;
+ style: solid;
+ width: $border-size;
+ color: transparent;
+ }
+ &:hover {
+ @include choose-hover;
+ }
+ &.selected {
+ @include choose-active;
+ }
}
}
}
+
table {
border-collapse: separate;
border-spacing: 1px;
}
+
td {
@include standard-text-padding;
text-align: center;
diff --git a/dev/scss/header/hint.scss b/dev/scss/header/hint.scss
index a373abc..7e15d18 100644
--- a/dev/scss/header/hint.scss
+++ b/dev/scss/header/hint.scss
@@ -1,6 +1,10 @@
@charset "utf-8";
@import "../util";
+/**
+ * Rules for the Kalamar hint helper.
+ */
+
$border-size: 2px;
ul.menu.hint {
diff --git a/dev/scss/kalamar.scss b/dev/scss/kalamar.scss
index ad7fc9d..18da240 100644
--- a/dev/scss/kalamar.scss
+++ b/dev/scss/kalamar.scss
@@ -1,5 +1,9 @@
@charset "utf-8";
+/**
+ * Aggregate separated Sass files for Kalamar
+ */
+
// Global variables and mixins
@import "fonts"; // Font families
@import "base"; // Base styles
diff --git a/dev/scss/media.scss b/dev/scss/media.scss
index 43122bc..f3b296c 100644
--- a/dev/scss/media.scss
+++ b/dev/scss/media.scss
@@ -1,25 +1,40 @@
@charset "utf-8";
@import "util";
+/**
+ * Media rules for different screen sizes.
+ * This will override some basic rules.
+ */
+
$standard-margin: 4px;
@media (orientation: portrait), (max-width: 42.5em) {
- body, #search ol, header, header input {
+ body,
+ #search ol,
+ header,
+ header input,
+ div.resultinfo p.found,
+ #pagination > a {
font-size: 9pt;
}
+
header form {
- padding-left: 0px;
+ padding-left: 0;
padding-top: 33px;
}
+
.vc {
font-size: 9pt;
}
+
h1 {
margin-left: 10px;
width: 130px;
height: 40px;
- background-size: 100%;
- background-position: 50% 0;
+ background: {
+ size: 100%;
+ position: 50% 0;
+ }
z-index: 300;
}
@@ -75,11 +90,6 @@
}
}
- div.resultinfo p.found,
- #pagination > a {
- font-size: 9pt;
- }
-
#logos {
margin-left: 0;
margin-right: 0;
@@ -124,10 +134,4 @@
main.tutorial {
margin-right: 30px;
}
-
-/*
- pre.query {
- font-size: 9.5pt;
- }
-*/
}
\ No newline at end of file
diff --git a/dev/scss/util.scss b/dev/scss/util.scss
index a349bd4..37afaf6 100644
--- a/dev/scss/util.scss
+++ b/dev/scss/util.scss
@@ -1,4 +1,9 @@
/**
+ * Some variables and mixins for Kalamar,
+ * other Sass styles will use.
+ */
+
+/**
* Official IDS colors
*/
$ids-orange-1: rgb(246, 168, 0);
@@ -34,30 +39,32 @@
/**
* Blue Colors
*/
-$light-blue: $ids-blue-2; // #cfe6f4;
-$dark-blue: $ids-blue-1; // #73b2f4;
+$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($light-grey, 55%); // #555;
-$dark-grey: darken($middle-grey, 15%); // #555;
-// $nearly-white: #f5f5f5;
-$nearly-white: #fff;
+$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);
-$total-results: $light-green;
-
/**
* KWIC colors
*/
@@ -81,26 +88,35 @@
$standard-border-radius: 6px;
$item-padding: 3pt 6pt;
+$total-results: $light-green;
+
/**
- * Path information
+ * Path information - relative to css!
*/
-$img-path: '../img';
+$img-path: '../img';
$font-path: '../font';
/**
* Margins
*/
$standard-margin: 40px;
-$right-distance: 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;
@@ -108,6 +124,9 @@
text-shadow: $light-shadow;
}
+/**
+ * Chooseable items (mouse over)
+ */
@mixin choose-hover {
color: $nearly-white;
text-shadow: none;
@@ -115,6 +134,9 @@
border-color: $darker-orange;
}
+/**
+ * Chooseable items (not available)
+ */
@mixin choose-inactive {
color: lighten($choose-color, 20%);
background-color: lighten($choose-bg, 20%);
@@ -122,6 +144,9 @@
text-shadow: none;
}
+/**
+ * Chooseable items (active)
+ */
@mixin choose-active {
color: $dark-green;
text-shadow: none;
@@ -129,6 +154,9 @@
border-color: $dark-green;
}
+/**
+ * Chooseable items (action: remove something)
+ */
@mixin choose-remove {
color: $nearly-white;
text-shadow: none;
@@ -136,25 +164,41 @@
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)
+ */
@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;
@@ -164,7 +208,7 @@
/**
- * Font Awesome symbols
+ * Font Awesome symbol table
*/
$fa-bars: "\f0c9";
$fa-extlink: "\f08e";
@@ -176,12 +220,12 @@
$fa-previous: "\f0d9";
$fa-next: "\f0da";
$fa-search: "\f002";
-$fa-rewrite: "\f040"; // "\f14b"
+$fa-rewrite: "\f040";
$fa-login: "\f090";
$fa-logout: "\f08b";
$fa-tutorial: "\f19d";
$fa-left-align: "\f036";
$fa-right-align: "\f038";
-$fa-question: "\f128"; // "\f059";
+$fa-question: "\f128";
$fa-checked: "\f046";
$fa-check: "\f096";
\ No newline at end of file