Add vc-fragment styling
Change-Id: I072c15a9ed22da1982e1bf8ac5b9255f42cd15d0
diff --git a/dev/scss/header/vc.scss b/dev/scss/header/vc.scss
index 799a6ef..bb098f3 100644
--- a/dev/scss/header/vc.scss
+++ b/dev/scss/header/vc.scss
@@ -9,23 +9,9 @@
* Virtual Collection Builder
*/
-.vc .builder {
- position: initial;
-
- // Unfortunately that does not work:
- // overflow-x: auto;
+.vc {
margin-top: 4pt;
- .docGroup, .doc {
- // color: $nearly-white;
- // color: $dark-green;
- color: $dark-grey;
- // text-shadow: $light-shadow;
- }
-
- /**
- * Rules for all docGroups
- */
.docGroup {
position: relative;
@@ -41,13 +27,6 @@
width: 0 $bracket-size; // .6em .5em
}
-
- // Whiten on hover
- &:hover {
- // background-color: rgba(255,255,255,.06);
- background-color: rgba(255,255,255,.3);
- }
-
&[data-operation] {
> .doc:first-child::before,
> .docGroup:first-child::before {
@@ -60,8 +39,6 @@
text-align: right;
width: $left-padding;
margin-left: -1 * ($left-padding + .5em); // -28pt
- // color: $dark-green;
- color: $dark-orange;
line-height: 1.5em;
border-top: $border-size solid transparent;
}
@@ -72,7 +49,6 @@
// Or operation
&[data-operation=or] {
- border-color: $dark-orange;
> .doc::before,
> .docGroup::before {
// This will be overruled by JS!
@@ -110,11 +86,12 @@
}
}
-
+
/**
* All document rules
*/
.doc {
+ line-height: 170%;
padding-left: $left-padding;
> span + span,
> span + div + span,
@@ -191,14 +168,6 @@
}
}
- .doc > span:not(.fixed) {
- cursor: pointer;
- &:hover {
- // color: $dark-green;
- color: $dark-orange;
- }
- }
-
/**
* All operators
*/
@@ -215,12 +184,6 @@
margin-left: 0;
}
- .doc, .docGroup {
- &:hover > .operators {
- opacity: 1;
- }
- }
-
.menu {
display: inline-block;
}
@@ -232,14 +195,12 @@
padding-right: 4pt;
style: normal;
weight: normal;
- }
+ }
div.value {
position: absolute;
display: inline-block;
z-index: 8000;
- @include choose-item;
- box-shadow: $choose-box-shadow;
padding: 4pt;
margin-top: -6pt;
border: {
@@ -281,6 +242,64 @@
}
}
+.vc:not(.fragment) {
+ .docGroup, .doc {
+ // color: $nearly-white;
+ // color: $dark-green;
+ color: $dark-grey;
+ // text-shadow: $light-shadow;
+ }
+
+ /**
+ * Rules for all docGroups
+ */
+ // 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;
+ }
+
+ .doc, .docGroup {
+ &:hover > .operators {
+ opacity: 1;
+ }
+ }
+
+ .docGroup {
+ &[data-operation] {
+ > .doc::before,
+ > .docGroup::before {
+ // color: $dark-green;
+ color: $dark-orange;
+ }
+ }
+ &[data-operation=or] {
+ border-color: $dark-orange;
+ }
+ }
+
+ div.value {
+ @include choose-item;
+ box-shadow: $choose-box-shadow;
+ }
+}
+
/**
* The z-index cascade for groups.
@@ -322,6 +341,12 @@
}
}
+.vc.fragment {
+ .doc {
+ margin-right: 2em;
+ }
+}
+
#collection {
line-height: 1em;
border-radius: $standard-border-radius;