Standard themes in SCSS form, updated CompileDefaultTheme (#9223)

Conversion performed for most themes trivial, just rename file and wrap
in a mixin. For chameleon compounds, also nesting used. In some cases,
related small files combined in a single SCSS file

Chameleon accordion and select contain fixes other than just a missing
semicolon.

1 files changed, 162 insertions, 0 deletions

diff --git a/WebContent/VAADIN/themes/chameleon/components/tabsheet/tabsheet.scss b/WebContent/VAADIN/themes/chameleon/components/tabsheet/tabsheet.scss
new file mode 100644
index 0000000000..258df79922
--- /dev/null
+++ b/WebContent/VAADIN/themes/chameleon/components/tabsheet/tabsheet.scss
@@ -0,0 +1,162 @@
+@mixin chameleon-tabsheet {
+
+.v-tabsheet-spacertd div {
+	border-color: #b3b3b3;
+	border-left: none;
+	}
+
+.v-tabsheet-tabitem {
+	border: none;
+	border-bottom: 1px solid #b3b3b3;
+	padding: 0;
+	}
+
+.v-tabsheet-tabitem .v-caption {
+	padding: .2em .8em;
+	margin: 1px;
+	margin-bottom: 0;
+	}
+
+.v-tabsheet-tabitem-selected {
+	background-color: #c9c9c9;
+	border: 1px solid #b3b3b3;
+	border-bottom: none;
+	-webkit-border-top-left-radius: 3px;
+	-webkit-border-top-right-radius: 3px;
+	-moz-border-radius-topleft: 3px;
+	-moz-border-radius-topright: 3px;
+	overflow: hidden;
+	}
+
+.v-tabsheet-tabitem-selected .v-caption {
+	background: transparent url(../../img/grad-light-top.png) repeat-x;
+	margin: 0;
+	padding-bottom: .25em;
+	-webkit-border-top-left-radius: 2px;
+	-webkit-border-top-right-radius: 2px;
+	-moz-border-radius-topleft: 2px;
+	-moz-border-radius-topright: 2px;
+	}
+
+.v-tabsheet-content {
+	background: #fff;
+	border-color: #b3b3b3;
+	}
+
+.v-tabsheet-deco {
+	height: 0;
+	background: transparent;
+	border-top: 1px solid #b3b3b3;
+	}
+
+.v-tabsheet-caption-close {
+	width: 14px;
+	height: 15px;
+	overflow: hidden;
+	text-indent: -50px;
+	background: transparent url(../../img/close-btn.png) no-repeat .5em 0;
+	vertical-align: middle;
+	padding: 0 0 0 .5em;
+	margin: .2em 0 0 0;
+	}
+
+.v-tabsheet-caption-close:hover {
+	background-position: .5em -25px;
+	}
+
+.v-tabsheet-caption-close:active {
+	background-position: .5em -50px;
+	}
+
+/*******************************************************************************
+ * Scroller
+ ******************************************************************************/
+.v-tabsheet-scroller {
+	height: 14px;
+	margin-top: -1.6em;
+	position: relative;
+	float: right;
+	background: #c9c9c9 url(../../img/grad-light-top.png) repeat-x;
+	border: 1px solid #b3b3b3;
+	border-radius: 6px;
+	-webkit-border-radius: 6px;
+	-moz-border-radius: 6px;
+	}
+
+.v-tabsheet-scrollerPrev,
+.v-tabsheet-scrollerNext,
+.v-tabsheet-scrollerPrev-disabled,
+.v-tabsheet-scrollerNext-disabled,
+.v-tabsheet-scrollerPrev-disabled:active,
+.v-tabsheet-scrollerNext-disabled:active {
+	border: 1px solid #b3b3b3;
+	border-width: 0;
+	background: transparent url(../../img/tab-arrows.png) no-repeat 6px 50%;
+	width: 16px;
+	height: 14px;
+	overflow: hidden;
+	opacity: .5;
+	filter: alpha(opacity=50);
+	}
+
+.v-tabsheet-scroller button::-moz-focus-inner {
+	border: none;
+	padding: 0;
+	}
+
+.v-tabsheet-scrollerNext,
+.v-tabsheet-scrollerNext-disabled,
+.v-tabsheet-scrollerNext-disabled:active {
+	background-position: -10px 50%;
+	border-left-width: 1px;
+	}
+
+.v-tabsheet-scrollerPrev:hover,
+.v-tabsheet-scrollerNext:hover {
+	opacity: .75;
+	filter: alpha(opacity=75);
+	}
+
+.v-tabsheet-scrollerPrev:active,
+.v-tabsheet-scrollerNext:active {
+	opacity: 1;
+	filter: none;
+	}
+
+.v-tabsheet-scrollerPrev-disabled,
+.v-tabsheet-scrollerNext-disabled,
+.v-tabsheet-scrollerPrev-disabled:active,
+.v-tabsheet-scrollerNext-disabled:active {
+	opacity: .1;
+	filter: alpha(opacity=10);
+	}
+
+
+
+/*******************************************************************************
+ * open-only-closable
+ ******************************************************************************/
+.v-tabsheet-open-only-closable .v-tabsheet-caption-close {
+	visibility: hidden;
+	}
+
+.v-tabsheet-open-only-closable .v-tabsheet-tabitem-selected .v-tabsheet-caption-close {
+	visibility: visible;
+	}
+
+
+/*******************************************************************************
+ * Borderless
+ ******************************************************************************/
+.v-tabsheet-borderless .v-tabsheet-content-borderless,
+.v-tabsheet-deco-borderless {
+	border: none;
+	background: transparent;
+	}
+
+.v-tabsheet-tabs-borderless .v-tabsheet-tabitem-selected,
+.v-tabsheet-tabs-borderless .v-tabsheet-tabitem-selected .v-caption {
+	background-color: transparent;
+	}
+
+}
\ No newline at end of file