Refactoring of style files
Change-Id: I56d3641741f2289bb0f9dbaf641b85a401cf1042
diff --git a/dev/scss/header/datepicker.scss b/dev/scss/header/datepicker.scss
index faf8336..ecc509d 100644
--- a/dev/scss/header/datepicker.scss
+++ b/dev/scss/header/datepicker.scss
@@ -7,112 +7,125 @@
* in Kalamar.
*/
-$border-size: 2px;
-
div.datepicker {
- display: inline-block;
- position: absolute;
- z-index: 90;
-
- font-size: 80%;
- padding: 4pt;
@include choose-item;
+ position: absolute;
+ display: inline-block;
+ z-index: 90;
+ font-size: 80%;
+ padding: 4pt;
box-shadow: $choose-box-shadow;
border: {
- width: $border-size;
- style: solid;
+ width: $border-size;
+ style: solid;
radius: $standard-border-radius;
}
+
> div {
font-size: 120%;
- width: 45%;
+ width: 45%;
+
&.month {
float: right;
}
> span {
- display: inline-block;
+ display: inline-block;
+ overflow: hidden;
+ white-space: nowrap;
+
&:first-child,
&:last-child {
- width: 15%;
- &::before {
- display: inline-block;
- text-align: center;
- cursor: pointer;
- font-family: 'FontAwesome';
- min-width: 14px;
- }
+ width: 15%;
+ &::before {
+ @include icon-font;
+ display: inline-block;
+ text-align: center;
+ cursor: pointer;
+ min-width: 14px;
+ }
}
+
&:first-child::before {
- content: $fa-previous;
+ content: $fa-previous;
}
+
&:last-child::before {
- content: $fa-next;
+ 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;
- }
+ display: inline-block;
+ cursor: pointer;
+ 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;
+ border-spacing: 1px;
}
input {
+ @include choose-item;
@include standard-text-padding;
+ background-color: $nearly-white;
+ width: 100%;
+
border: {
style: solid;
width: 1px;
}
- @include choose-item;
- background-color: $nearly-white;
- width: 100%;
}
td {
@include standard-text-padding;
text-align: center;
+
border: {
style: solid;
width: 1px;
}
+
&:not(.out) {
- cursor: pointer;
@include choose-item;
+ cursor: pointer;
background-color: $nearly-white;
+
&.today {
- background-color: $light-blue;
- color: $dark-blue;
- text-shadow: none;
+ background-color: $light-blue;
+ color: $dark-blue;
+ text-shadow: none;
}
+
&.selected {
- @include choose-active;
+ @include choose-active;
}
+
&:hover {
- @include choose-hover;
+ @include choose-hover;
}
}
+
&.out {
border-color: transparent;
}
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
diff --git a/dev/scss/header/hint.scss b/dev/scss/header/hint.scss
index b2e9bee..ae763b2 100644
--- a/dev/scss/header/hint.scss
+++ b/dev/scss/header/hint.scss
@@ -4,91 +4,94 @@
/**
* Rules for the Kalamar hint helper.
*/
-
-$border-size: 2px;
-
ul.menu.hint {
- display: inline-block;
+ display: inline-block;
white-space: normal;
- text-align:left;
- top: 0;
- max-width: 23em !important;
+ text-align: left;
+ max-width: 23em !important;
+ top: 0;
> li:first-of-type {
border-top: {
- width: 1px;
- left-radius: 0;
+ width: 1px;
+ left-radius: 0;
right-radius: 0;
}
}
}
+// Alert bubble
div.alert.hint {
- position: absolute;
-// background-color: rgba(254,26,0,.9); // from alertify
- background-color: rgb(254,26,0); // from alertify
- color: $nearly-white;
- padding: $item-padding;
- margin-top: 8px;
- box-shadow: $choose-box-shadow;
+ position: absolute;
+ background-color: $alert-red;
+ color: $nearly-white;
+ padding: $item-padding;
+ margin-top: 8px;
+ box-shadow: $choose-box-shadow;
+ width: auto;
+ min-width: 10em;
+ max-width: 23em !important;
+ transition: opacity 0.2s ease 0s;
+
border: {
- radius: $standard-border-radius;
+ radius: $standard-border-radius;
top-left-radius: 0;
}
- width: auto;
- min-width: 10em;
- max-width: 23em !important;
- transition: opacity 0.2s ease 0s;
-}
-div.hint.alert::before {
- position: absolute;
- content: "";
- display: block;
- top: -12px;
- left: 0;
- width: 0;
- white-space: normal;
- border: {
- width: 0 8px 12px 0;
- style: solid;
- color: rgb(254,26,0) transparent; // from alertify
+ &::before {
+ position: absolute;
+ content: "";
+ display: block;
+ top: -12px;
+ left: 0;
+ width: 0;
+ white-space: normal;
+ border: {
+ width: 0 8px 12px 0;
+ style: solid;
+ color: $alert-red transparent;
+ }
}
}
+// Mirror element for the hint helper
.hint.mirror {
- position: absolute;
- left: 0;
- top: 0;
- z-index: 90;
+ position: absolute;
+ display: block;
+ left: 0;
+ top: 0;
+ z-index: 90;
white-space: pre-wrap;
- height: 0;
- display: block;
+ height: 0;
+
> span {
- opacity: 0;
+ opacity: 0;
white-space: pre-wrap;
- overflow: hidden;
+ overflow: hidden;
}
+
// TODO: Only in focus
> div {
- position: absolute;
- display: block;
- cursor: pointer;
+ position: absolute;
+ display: block;
+ cursor: pointer;
transition: left 0.2s ease 0s;
- top: 0;
- left: 0;
+ top: 0;
+ left: 0;
text-align: left;
- padding: 0;
+ padding: 0;
border-top: 5px solid $dark-orange;
- height: 10px;
- width: 1.2em;
+ height: 10px;
+ width: 1.2em;
+
&:hover:not(.active) {
border-top: 10px solid $dark-orange;
}
+
&.active {
border-top-width: 0;
- height: 0;
- width: 23em;
+ height: 0;
+ width: 23em;
}
}
}
\ No newline at end of file
diff --git a/dev/scss/header/menu.scss b/dev/scss/header/menu.scss
deleted file mode 100644
index 7d76f4e..0000000
--- a/dev/scss/header/menu.scss
+++ /dev/null
@@ -1,239 +0,0 @@
-@charset "utf-8";
-@import "../util";
-
-$border-size: 2px;
-
-/**
- * Menu list - used nearly everywhere
- */
-ul.menu,
-ul.menu > span.pref:not(:empty) {
- box-sizing: border-box;
- text-shadow: none;
- font-weight: normal;
- // Pagination border?
-
- z-index: 120;
-}
-
-ul.menu > li,
-ul.menu > span.pref:not(:empty) {
- box-shadow: $choose-box-shadow;
- border: {
- width: $border-size;
- bottom-width: 0px;
- top-width: 0px;
- style: solid;
- }
- @include choose-item;
- cursor: pointer;
- padding: $item-padding;
- white-space: normal;
-}
-
-ul.menu span.desc {
- display: block;
- font-size: 75%;
-}
-
-ul.menu 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;
- }
-}
-
-ul.menu > li,
-ul.menu > span.pref:not(.active) {
- @include choose-item;
-}
-
-ul.menu:active > div.ruler,
-ul.menu:hover > div.ruler,
-ul.menu > div.ruler.active {
- transition: opacity .1s ease;
- opacity: 1;
-}
-
-ul.menu {
- position: absolute;
- padding: 0;
- margin: 0;
- text-indent: 0;
- list-style-type: none;
- list-style-position: outside;
-
- > 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 {
- position: absolute;
- @include choose-active;
- display: block;
- right: 0;
- width: 10px;
- z-index: 115;
- border: {
- radius: 4px;
- width: 2px;
- style: solid;
- }
- }
- &.active > span {
- @include choose-hover;
- }
- > div {
- box-shadow: $choose-box-shadow;
- position: absolute;
- right: 0;
- border: {
- width: 2px;
- style: solid;
- }
- width: 10px;
- @include choose-item;
- // background-color: -grey;
- height: 100%;
- border-radius: 4px;
- }
- }
-
- /**
- * 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;
- }
- }
-}
-
-ul.menu {
- opacity: 0;
-}
-ul.menu.visible {
- opacity: 1;
-}
-
-/**
- * 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;
- }
- }
-}
-
-ul.menu.roll: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/header/pipe.scss b/dev/scss/header/pipe.scss
new file mode 100644
index 0000000..f0c0807
--- /dev/null
+++ b/dev/scss/header/pipe.scss
@@ -0,0 +1,8 @@
+/**
+ * The pipe input field
+ */
+
+// Hide pipe
+input.pipe {
+ display: none;
+}
\ No newline at end of file
diff --git a/dev/scss/header/querylanguage.scss b/dev/scss/header/querylanguage.scss
new file mode 100644
index 0000000..44978bb
--- /dev/null
+++ b/dev/scss/header/querylanguage.scss
@@ -0,0 +1,40 @@
+@import "../util";
+
+/**
+ * Temporary hack for language chooser
+ * http://cssdeck.com/labs/styling-select-box-with-css3
+ * This is only active in no-js environment and before the
+ * javascript is loaded.
+ */
+#ql-field {
+ position: relative;
+ background-color: $light-green;
+ cursor: pointer;
+ margin: 0;
+ outline: none;
+ border: none;
+ display: inline-block;
+ color: white;
+ border-width: 0;
+ border-radius: 0;
+
+ // https://css-tricks.com/almanac/properties/a/appearance/
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+
+ &:checked {
+ outline: none;
+ }
+
+ > option {
+ padding: 0pt 2pt;
+ outline: none;
+ }
+
+ // funny hack for firefox
+ &:-moz-focusring {
+ color: transparent;
+ text-shadow: 0 0 0 white;
+ }
+}
diff --git a/dev/scss/header/searchbar.scss b/dev/scss/header/searchbar.scss
index 7e34b27..45bc4ec 100644
--- a/dev/scss/header/searchbar.scss
+++ b/dev/scss/header/searchbar.scss
@@ -1,87 +1,46 @@
@charset "utf-8";
@import "../util";
-$border-size: 2px;
-$qmargin: 3px;
-// $right-padding: 60px;
-
-
/**
- * Input field
+ * Search field
*/
#q-field {
- width: 100%;
- margin: 0;
- margin-bottom: $qmargin;
- display: block;
+ display: block;
+ margin-bottom: 3px;
+ width: 100%;
+ margin: 0;
&::-webkit-search-cancel-button {
display: none;
}
&.loading {
- background-color: $light-orange;
- background-image: none;
+ background: {
+ color: $light-orange;
+ image: none;
+ }
}
}
-header input {
- @include input-field;
-}
#searchbar {
- position: relative;
- width: 100%;
- padding: 0;
+ position: relative;
+ width: 100%;
+ padding: 0;
padding-right: $right-distance + $button-width;
+
button[type=submit] {
position: absolute;
- padding: 0;
- right: $right-distance;
+ padding: 0;
+ right: $right-distance;
+
&:not(.loading)::after {
content: $fa-search;
}
}
}
-/**
- * Checkbox styling
- * http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css
-*/
-.checkbox {
- display: none;
- + label {
- cursor: pointer;
- span {
- border-radius: 4px;
- display: inline-block;
- width: 1em; // 12px
- height: 1em;
- line-height: 1em; // 12px;
- vertical-align: middle;
- padding: 0;
- margin-right: .2em;
-/*
- background-color: $nearly-white;
- &:hover {
- border-color: $nearly-white;
- }
-*/
- &::after {
- font-family: "FontAwesome";
- content: $fa-check;
- }
- }
- }
- &:checked + label span {
- &:after {
- content: $fa-checked;
- }
- }
-}
-
-
.query.panel {
padding-right: $right-distance + $button-width;
}
@@ -89,11 +48,12 @@
// Specify result button group layout
.query.button-group.button-panel {
- width: auto;
- text-align: right;
+ display: block;
+ width: auto;
+ text-align: right;
vertical-align: top;
- display: block;
- line-height: 1.3em;
+ line-height: 1.3em;
+
> span {
box-shadow: none;
}
diff --git a/dev/scss/header/statistics.scss b/dev/scss/header/statistics.scss
index 234e81b..500fc70 100644
--- a/dev/scss/header/statistics.scss
+++ b/dev/scss/header/statistics.scss
@@ -2,37 +2,45 @@
@import "../util";
-/*
-Corpus statistic
-Graying corpus statistic
-*/
+/**
+ * Corpus statistic
+ * Graying corpus statistic
+ */
div.stattable {
- display: flex;
- flex-direction: row;
- margin-right: $right-view-distance;
+ display: flex;
+ flex-direction: row;
+ margin-right: $right-view-distance;
}
+
div.stattable {
> dl {
margin-bottom:4px;
+
> div {
border-color: $dark-green;
+
> dt {
background-color: $middle-green;
- width: 15em;
- margin: 0;
- &:after {
+ width: 15em;
+ margin: 0;
+
+ &::after {
content: ":";
}
}
> dd {
background-color: $lightest-green;
- color: $dark-grey;
+ color: $dark-grey;
}
}
}
+
&.stdisabled {
- dt, dd {
- @include vcinfo-inactive;
+ dt,
+ dd {
+ background-color: $grey-green;
+ color: $dark-green;
+ text-shadow: none;
}
}
}
@@ -45,7 +53,7 @@
span.refresh::after{
vertical-align: sub;
- content : $fa-redo;
+ content : $fa-redo;
}
// Default value 20% doesn't work with < 5 items,
diff --git a/dev/scss/header/vc.scss b/dev/scss/header/vc.scss
index 2a4a3b8..cdc700b 100644
--- a/dev/scss/header/vc.scss
+++ b/dev/scss/header/vc.scss
@@ -1,14 +1,14 @@
@charset "utf-8";
@import "../util";
-$left-padding: 4em; // 32pt; // 2.8em;
-$border-size: 2px;
-$bracket-size: .4em; // 4pt;
-
/**
* Virtual Collection Builder
*/
+$left-padding: 4em;
+$bracket-size: .4em;
+
+// Rules for VC view (including fragments)
.vc {
margin-top: 4pt;
@@ -17,35 +17,39 @@
}
.docGroup {
- position: relative;
+ position: relative;
+ display: inline-block;
+ margin-left: $left-padding;
+ padding: 4pt 2pt 4pt 0pt;
- display: inline-block;
- margin-left: $left-padding; // 28pt
+ .docGroup {
+ display: block;
+ }
- .docGroup { display: block; }
-
- padding: 4pt 2pt 4pt 0pt;
border: {
radius: $standard-border-radius * 2;
- style: solid;
- width: 0 $bracket-size; // .6em .5em
+ style: solid;
+ width: 0 $bracket-size;
}
&[data-operation] {
+
> .doc:first-child::before,
> .docGroup:first-child::before {
content: none;
}
+
> .doc::before,
> .docGroup::before {
- display: inline-block;
- position: absolute;
- text-align: right;
- width: $left-padding;
- margin-left: -1 * ($left-padding + .5em); // -28pt
+ position: absolute;
+ display: inline-block;
+ text-align: right;
+ width: $left-padding;
+ margin-left: -1 * ($left-padding + .5em);
line-height: 1.5em;
- border-top: $border-size solid transparent;
+ border-top: $border-size solid transparent;
}
+
> .docGroup::before {
margin-left: -1 * ($left-padding + .5em) + (-1 * $bracket-size);
}
@@ -74,19 +78,20 @@
* All operators on groups
*/
> .operators {
- position: absolute;
- display: block;
- top: 10px;
+ position: absolute;
+ display: block;
vertical-align: middle;
- left: 3px;
+ top: 10px;
+ left: 3px;
+ margin-left: 100%;
+ padding: 0;
+
> span:first-child {
border: {
- top-left-radius: 0;
- bottom-left-radius: 0;
+ top-left-radius: 0;
+ bottom-left-radius: 0;
+ }
}
- }
- margin-left: 100%;
- padding: 0;
}
}
@@ -97,78 +102,78 @@
.doc {
line-height: 170%;
padding-left: $left-padding;
- > span + span,
- > span + div + span,
- > span + ul + span {
- margin-left: 5pt;
- }
- > span.key,
- > span.value {
- font-weight: bold;
- }
- > span.value {
- &[data-type=regex] {
+ > span {
+
+ + span,
+ + div + span,
+ + ul + span {
+ margin-left: 5pt;
+ }
+
+ &.key,
+ &.value {
+ font-weight: bold;
+ }
+
+ &.value[data-type=regex] {
font-style: italic;
+
&::after,
&::before {
content: '/';
}
}
+
+ &.key {
+ position: relative;
+
+ > ul {
+ margin: 0;
+ margin-left: 3.3em;
+ }
+
+ &.fixed {
+ color: $light-green;
+ }
+ }
}
// Unspecified value
- &.unspecified > span, span.unspecified {
- padding: 0 4px;
+ &.unspecified > span,
+ span.unspecified {
+ @include choose-item;
+ padding: 0 4px;
box-shadow: $choose-box-shadow;
+
border: {
- style: solid;
- width: $border-size;
+ style: solid;
+ width: $border-size;
radius: $standard-border-radius;
}
- @include choose-item;
- &:hover {
- @include choose-hover;
- }
}
- > span.key.fixed {
- color: $light-green;
- }
-
- /**
- * All operators on docs
- */
+ // All operators on docs
> .operators {
- display: inline-block;
+ display: inline-block;
margin-left: 10px;
}
- > span.key {
- position: relative;
- > ul {
- margin: 0;
- margin-left: 3.3em;
- }
- }
}
- .rewritten {
- .rewrite {
- margin-left: 4pt;
- display: inline-block;
- color: $dark-orange;
- &::after {
- font: {
- family: FontAwesome;
- style: normal;
- weight: normal;
- }
- content: $fa-rewrite;
- text-decoration: underline;
- }
- > span {
- display: none;
- }
+ .rewritten .rewrite {
+ display: inline-block;
+ margin-left: 4pt;
+ color: $dark-orange;
+ &::after {
+ @include icon-font;
+ font-style: normal;
+ font-weight: normal;
+ content: $fa-rewrite;
+ text-decoration: underline;
+ }
+
+ > span {
+ display: none;
}
}
@@ -176,12 +181,12 @@
* All operators
*/
.operators {
- opacity: 0;
+ opacity: 0;
white-space: nowrap;
- padding: 0;
- font-size: 0;
+ padding: 0;
+ font-size: 0;
line-height: 0;
- text-align: center;
+ text-align: center;
}
> .docGroup {
@@ -192,48 +197,50 @@
display: inline-block;
}
- .menu li[data-type=ref]:before,
- span.key.ref:before {
- content: $fa-referto;
- font-family: 'FontAwesome';
+ // referTo entries
+ .menu li[data-type=ref]::before,
+ span.key.ref::before {
+ @include icon-font;
+ content: $fa-referto;
padding-right: 4pt;
- style: normal;
- weight: normal;
+ style: normal;
+ weight: normal;
}
div.value {
- position: absolute;
- display: inline-block;
- z-index: 8000;
- padding: 4pt;
+ position: absolute;
+ display: inline-block;
+ z-index: 8000;
+ padding: 4pt;
margin-top: -6pt;
+
border: {
- width: $border-size;
- style: solid;
radius: $standard-border-radius;
+ width: $border-size;
+ style: solid;
}
+
input {
border-width: 0;
}
+
> div {
+ @include choose-item;
+ display: inline-block;
padding: 2pt;
- cursor: pointer;
+
font: {
- size: 80%;
+ size: 80%;
style: italic;
}
- display: inline-block;
- @include choose-item;
+
border: {
- width: $border-size;
- style: solid;
+ width: $border-size;
+ style: solid;
radius: $standard-border-radius;
}
-
- &:hover {
- @include choose-hover;
- }
}
+
&.regex {
> input {
font-style: italic;
@@ -246,12 +253,14 @@
}
}
+/* Rules for vcs excluding fragments,
+ * i.e. includingy dynamic changes.
+ */
.vc:not(.fragment) {
- .docGroup, .doc {
- // color: $nearly-white;
- // color: $dark-green;
+
+ .docGroup,
+ .doc {
color: $dark-grey;
- // text-shadow: $light-shadow;
}
/**
@@ -259,26 +268,24 @@
*/
// Whiten on hover
.docGroup:hover {
- // background-color: rgba(255,255,255,.06);
background-color: rgba(255,255,255,.3);
}
- .doc > span.key.fixed {
- color: $light-green;
- }
-
.doc > span:not(.fixed) {
cursor: pointer;
&:hover {
- // color: $dark-green;
color: $dark-orange;
}
}
- .rewritten .rewrite {
- color: $dark-orange;
+ // Unspecified value
+ .doc.unspecified > span,
+ span.unspecified {
+ &:hover {
+ @include choose-hover;
+ }
}
-
+
.doc, .docGroup {
&:hover > .operators {
opacity: 1;
@@ -289,7 +296,6 @@
&[data-operation] {
> .doc::before,
> .docGroup::before {
- // color: $dark-green;
color: $dark-orange;
}
}
@@ -301,6 +307,13 @@
div.value {
@include choose-item;
box-shadow: $choose-box-shadow;
+
+ > div {
+ cursor: pointer;
+ &:hover {
+ @include choose-hover;
+ }
+ }
}
}
@@ -359,47 +372,40 @@
border-radius: $standard-border-radius;
}
-/*
-header #vc-view > div {
- margin: 1.3em 0 .5em 0;
-}
-*/
-
-#vc-choose > span.rewritten {
- &::after {
- color: $dark-orange;
- padding: 0;
- padding-left: 4px;
- font: {
- family: FontAwesome;
- style: normal;
- weight: normal;
- }
- content: $fa-rewrite;
- text-decoration: underline;
- }
+#vc-choose > span.rewritten::after {
+ @include icon-font;
+ color: $dark-orange;
+ padding: 0;
+ padding-left: 4px;
+ content: $fa-rewrite;
+ text-decoration: underline;
+ font-style: normal;
+ font-weight: normal;
}
div#vc-view {
position:relative;
+
> div.vc {
- display: none;
+ display: none;
+ margin: 1.3em 0 .5em 0;
+ border: 2px solid $dark-green;
+ background-color: $nearly-white;
+
&.active {
display: block;
}
- margin: 1.3em 0 .5em 0;
- border: 2px solid $dark-green;
- background-color: $nearly-white;
+
> div:first-child {
- // margin: 1.3em;
padding: 1.3em;
}
}
}
div.panel.vcinfo {
- padding: 3pt 0pt 3pt 3pt;
+ padding: 3pt 0pt 3pt 3pt;
background-color: $dark-green;
+
div.button-group > span {
box-shadow: none;
}