Refactoring of style files
Change-Id: I56d3641741f2289bb0f9dbaf641b85a401cf1042
diff --git a/dev/scss/header/header.scss b/dev/scss/header/header.scss
index 65e2483..763c20e 100644
--- a/dev/scss/header/header.scss
+++ b/dev/scss/header/header.scss
@@ -1,167 +1,131 @@
@charset "utf-8";
@import "../util";
@import "hint"; // Hint specific menu list
-@import "menu"; // Menu list
@import "searchbar"; // The search bar
@import "vc"; // Virtual corpus builder
@import "statistics"; // Statistics for VCs
@import "datepicker"; // Datepicker
+@import "querylanguage"; // Query language
+@import "pipe"; // Pipe
header {
- position: relative;
- background-color: $light-green;
-// @include light-noise;
@include box-sizing-box();
- padding: $base-padding 0 0 $base-padding;
- // padding-bottom: 0;
- font-size: 10pt;
- color: $nearly-white;
- // text-shadow: none;
- button {
- color: $light-green;
- background-color: transparent;
- border-width: 0;
- font-weight: normal;
- margin: 0;
- padding: 0;
- outline: none;
- }
- span.select { /* , #vc-choose, Formally vc.location */
- cursor: pointer;
+ position: relative;
+ background-color: $light-green;
+ padding: $base-padding 0 0 $base-padding;
+ font-size: 10pt;
+ color: $nearly-white;
+
+ span.select {
+ display: inline-block;
+ cursor: pointer;
line-height: 1.8em;
+
> span {
font-weight: bold;
}
+
border: {
- width: 0;
+ width: 0;
bottom-width: 3px;
- style: solid;
- color: transparent;
+ style: solid;
+ color: transparent;
}
- display: inline-block;
+
&:hover {
- color: $dark-green;
+ color: $dark-green;
border-color: $dark-green;
}
- &.active {
- border-color: $dark-orange;
- }
+
&::after {
+ @include icon-font;
pointer-events: none;
- font-family: FontAwesome;
- text-align: center;
- }
- }
- span.select {
- &::after {
- content: $fa-down;
+ text-align: center;
+ content: $fa-down;
+
padding: {
- left: 4pt;
+ left: 4pt;
right: 4pt;
}
}
- &.active::after {
- content: $fa-up;
+
+ &.active {
+ border-color: $dark-orange;
+ &::after {
+ content: $fa-up;
+ }
}
}
form {
+ position: relative;
+ display: block;
padding-left: $logo-left-distance;
- min-height: 2.7em;
- display: block;
- margin: 0px;
- position: relative;
+ min-height: 2.7em;
+ margin: 0px;
}
- .clear {
- clear: both;
+
+ input {
+ @include input-field;
}
.button {
+ color: $nearly-white;
+ line-height: 2em;
+ margin-right: $right-distance;
+
&.right {
- float: right;
+ float: right;
display: inline-block;
}
+
&.top {
- position: absolute;
- display: block;
- top: 0;
- right: 0;
- margin-right: 0;
- width: ($standard-margin / 2);
+ position: absolute;
+ display: block;
+ top: 0;
+ right: 0;
+ margin-right: 0;
+ width: ($standard-margin / 2);
background-color: $dark-green;
- text-align: center;
- height: 100%;
- z-index: 20;
+ text-align: center;
+ height: 100%;
+ z-index: 20;
+
> a:hover {
- color: $nearly-white
+ color: $nearly-white
}
}
- color: $nearly-white;
- line-height: 2em;
- margin-right: $right-distance;
+
> a {
- color: $nearly-white;
- cursor:pointer;
- position: relative;
+ color: $nearly-white;
+ cursor: pointer;
+ position: relative;
font-size: 120%;
+
> span {
- @include blind;
+ @include blind;
}
}
+
> a::after {
- font-family: 'FontAwesome';
+ @include icon-font;
}
+
+ // Icons for buttons
> a.tutorial::after {
content: $fa-tutorial;
}
+
> a.question::after {
content: $fa-question;
}
+
> a.login::after {
content: $fa-login;
}
+
> a.logout::after {
content: $fa-logout;
}
}
-}
-
-
-/**
- * Temporary hack for language chooser
- * http://cssdeck.com/labs/styling-select-box-with-css3
- */
-#ql-field {
- cursor: pointer;
- margin: 0;
- outline: none;
- border: none;
- display: inline-block;
- position: relative;
- color: white;
- background-color: $light-green;
- border-width: 0;
- border-radius: 0;
- @include no-appearance;
- &:checked {
- outline: none;
- }
- > option {
- padding: 0pt 2pt;
- outline: none;
- }
-}
-
-/**
- * funny hack for firefox
- */
-#ql-field:-moz-focusring {
- color: transparent;
- text-shadow: 0 0 0 white;
-}
-
-
-// Hide pipe
-input.pipe {
- display: none;
}
\ No newline at end of file