summaryrefslogtreecommitdiffstats
path: root/documentation/themes
diff options
context:
space:
mode:
authorIlia Motornyi <elmot@vaadin.com>2015-12-03 14:59:05 +0000
committerVaadin Code Review <review@vaadin.com>2015-12-03 14:59:12 +0000
commit2af72ba9636bec70046394c41744f89ce4572e35 (patch)
treeccb3dc2d2239585f8c3f79eb5f131ff61ca9ce86 /documentation/themes
parent8aa5fabe89f2967e966a64842a608eceaf80d08f (diff)
downloadvaadin-framework-2af72ba9636bec70046394c41744f89ce4572e35.tar.gz
vaadin-framework-2af72ba9636bec70046394c41744f89ce4572e35.zip
Revert "Merge branch 'documentation'"7.6.0.beta2
This reverts commit f6874bde3d945c8b2d1b5c17ab50e2d0f1f8ff00. Change-Id: I67ee1c30ba3e3bcc3c43a1dd2e73a822791514bf
Diffstat (limited to 'documentation/themes')
-rw-r--r--documentation/themes/chapter-themes.asciidoc37
-rw-r--r--documentation/themes/img/addon-responsive-flexwrap.pngbin117149 -> 0 bytes
-rw-r--r--documentation/themes/img/builtin-runo.pngbin9705 -> 0 bytes
-rw-r--r--documentation/themes/img/eclipse-theme-compiler.pngbin10979 -> 0 bytes
-rw-r--r--documentation/themes/img/eclipse-theme-created-annotated-hi.pngbin69642 -> 0 bytes
-rw-r--r--documentation/themes/img/eclipse-theme-created-annotated-lo.pngbin33779 -> 0 bytes
-rw-r--r--documentation/themes/img/eclipse-theme-created.pngbin69951 -> 0 bytes
-rw-r--r--documentation/themes/img/eclipse-theme-new.pngbin28613 -> 0 bytes
-rw-r--r--documentation/themes/img/eclipse-theme-settings.pngbin23459 -> 0 bytes
-rw-r--r--documentation/themes/img/example-ui-default.pngbin88842 -> 0 bytes
-rw-r--r--documentation/themes/img/example-ui-themed.pngbin23719 -> 0 bytes
-rw-r--r--documentation/themes/img/fonticons-basic.pngbin4783 -> 0 bytes
-rw-r--r--documentation/themes/img/fonticons-html.pngbin3765 -> 0 bytes
-rw-r--r--documentation/themes/img/theme-contents-hi.pngbin289363 -> 0 bytes
-rw-r--r--documentation/themes/img/theme-contents-lo.pngbin74403 -> 0 bytes
-rw-r--r--documentation/themes/img/themes-css-match-1.pngbin4983 -> 0 bytes
-rw-r--r--documentation/themes/img/themes-css-match-class-2.pngbin10131 -> 0 bytes
-rw-r--r--documentation/themes/img/themes-css-match-class-3.pngbin8873 -> 0 bytes
-rw-r--r--documentation/themes/original-drawings/eclipse-theme-created-annotated.svg144
-rw-r--r--documentation/themes/original-drawings/theme-contents.svg1857
-rw-r--r--documentation/themes/themes-compiling.asciidoc223
-rw-r--r--documentation/themes/themes-creating.asciidoc283
-rw-r--r--documentation/themes/themes-css.asciidoc506
-rw-r--r--documentation/themes/themes-eclipse.asciidoc75
-rw-r--r--documentation/themes/themes-fonticon.asciidoc266
-rw-r--r--documentation/themes/themes-fonts.asciidoc85
-rw-r--r--documentation/themes/themes-overview.asciidoc77
-rw-r--r--documentation/themes/themes-responsive.asciidoc286
-rw-r--r--documentation/themes/themes-sass.asciidoc156
-rw-r--r--documentation/themes/themes-valo.asciidoc440
30 files changed, 0 insertions, 4435 deletions
diff --git a/documentation/themes/chapter-themes.asciidoc b/documentation/themes/chapter-themes.asciidoc
deleted file mode 100644
index 727e42b3e9..0000000000
--- a/documentation/themes/chapter-themes.asciidoc
+++ /dev/null
@@ -1,37 +0,0 @@
-[[themes]]
-== Themes
-
-((("theme", id="term.themes", range="startofrange")))
-
-
-((("CSS", id="term.themes-css", range="startofrange")))
-
-
-This chapter provides details about using and creating __themes__ that control
-the visual look of web applications. Themes are created using Sass, which is an
-extension of CSS (Cascading Style Sheets), or with plain CSS. We provide an
-introduction to CSS, especially concerning the styling of HTML by element
-classes.
-
-
-include::themes-overview.asciidoc[leveloffset=+2]
-
-include::themes-css.asciidoc[leveloffset=+2]
-
-include::themes-sass.asciidoc[leveloffset=+2]
-
-include::themes-compiling.asciidoc[leveloffset=+2]
-
-include::themes-creating.asciidoc[leveloffset=+2]
-
-include::themes-eclipse.asciidoc[leveloffset=+2]
-
-include::themes-valo.asciidoc[leveloffset=+2]
-
-include::themes-fonticon.asciidoc[leveloffset=+2]
-
-include::themes-fonts.asciidoc[leveloffset=+2]
-
-include::themes-responsive.asciidoc[leveloffset=+2]
-(((range="endofrange", startref="term.themes")))
-(((range="endofrange", startref="term.themes-css")))
diff --git a/documentation/themes/img/addon-responsive-flexwrap.png b/documentation/themes/img/addon-responsive-flexwrap.png
deleted file mode 100644
index e24df04a47..0000000000
--- a/documentation/themes/img/addon-responsive-flexwrap.png
+++ /dev/null
Binary files differ
diff --git a/documentation/themes/img/builtin-runo.png b/documentation/themes/img/builtin-runo.png
deleted file mode 100644
index 039a34137b..0000000000
--- a/documentation/themes/img/builtin-runo.png
+++ /dev/null
Binary files differ
diff --git a/documentation/themes/img/eclipse-theme-compiler.png b/documentation/themes/img/eclipse-theme-compiler.png
deleted file mode 100644
index a2886a4e68..0000000000
--- a/documentation/themes/img/eclipse-theme-compiler.png
+++ /dev/null
Binary files differ
diff --git a/documentation/themes/img/eclipse-theme-created-annotated-hi.png b/documentation/themes/img/eclipse-theme-created-annotated-hi.png
deleted file mode 100644
index de8152c2da..0000000000
--- a/documentation/themes/img/eclipse-theme-created-annotated-hi.png
+++ /dev/null
Binary files differ
diff --git a/documentation/themes/img/eclipse-theme-created-annotated-lo.png b/documentation/themes/img/eclipse-theme-created-annotated-lo.png
deleted file mode 100644
index fe9fa560d7..0000000000
--- a/documentation/themes/img/eclipse-theme-created-annotated-lo.png
+++ /dev/null
Binary files differ
diff --git a/documentation/themes/img/eclipse-theme-created.png b/documentation/themes/img/eclipse-theme-created.png
deleted file mode 100644
index db1970a461..0000000000
--- a/documentation/themes/img/eclipse-theme-created.png
+++ /dev/null
Binary files differ
diff --git a/documentation/themes/img/eclipse-theme-new.png b/documentation/themes/img/eclipse-theme-new.png
deleted file mode 100644
index 9374364298..0000000000
--- a/documentation/themes/img/eclipse-theme-new.png
+++ /dev/null
Binary files differ
diff --git a/documentation/themes/img/eclipse-theme-settings.png b/documentation/themes/img/eclipse-theme-settings.png
deleted file mode 100644
index a7dfd78721..0000000000
--- a/documentation/themes/img/eclipse-theme-settings.png
+++ /dev/null
Binary files differ
diff --git a/documentation/themes/img/example-ui-default.png b/documentation/themes/img/example-ui-default.png
deleted file mode 100644
index a0e9f9d1ea..0000000000
--- a/documentation/themes/img/example-ui-default.png
+++ /dev/null
Binary files differ
diff --git a/documentation/themes/img/example-ui-themed.png b/documentation/themes/img/example-ui-themed.png
deleted file mode 100644
index 40ebb746cc..0000000000
--- a/documentation/themes/img/example-ui-themed.png
+++ /dev/null
Binary files differ
diff --git a/documentation/themes/img/fonticons-basic.png b/documentation/themes/img/fonticons-basic.png
deleted file mode 100644
index 66ed207cf7..0000000000
--- a/documentation/themes/img/fonticons-basic.png
+++ /dev/null
Binary files differ
diff --git a/documentation/themes/img/fonticons-html.png b/documentation/themes/img/fonticons-html.png
deleted file mode 100644
index b9d8a2a9c6..0000000000
--- a/documentation/themes/img/fonticons-html.png
+++ /dev/null
Binary files differ
diff --git a/documentation/themes/img/theme-contents-hi.png b/documentation/themes/img/theme-contents-hi.png
deleted file mode 100644
index d04f7b2d32..0000000000
--- a/documentation/themes/img/theme-contents-hi.png
+++ /dev/null
Binary files differ
diff --git a/documentation/themes/img/theme-contents-lo.png b/documentation/themes/img/theme-contents-lo.png
deleted file mode 100644
index cef64982e8..0000000000
--- a/documentation/themes/img/theme-contents-lo.png
+++ /dev/null
Binary files differ
diff --git a/documentation/themes/img/themes-css-match-1.png b/documentation/themes/img/themes-css-match-1.png
deleted file mode 100644
index 8f9cf1bd55..0000000000
--- a/documentation/themes/img/themes-css-match-1.png
+++ /dev/null
Binary files differ
diff --git a/documentation/themes/img/themes-css-match-class-2.png b/documentation/themes/img/themes-css-match-class-2.png
deleted file mode 100644
index c1cab59bf9..0000000000
--- a/documentation/themes/img/themes-css-match-class-2.png
+++ /dev/null
Binary files differ
diff --git a/documentation/themes/img/themes-css-match-class-3.png b/documentation/themes/img/themes-css-match-class-3.png
deleted file mode 100644
index 7062b9abdb..0000000000
--- a/documentation/themes/img/themes-css-match-class-3.png
+++ /dev/null
Binary files differ
diff --git a/documentation/themes/original-drawings/eclipse-theme-created-annotated.svg b/documentation/themes/original-drawings/eclipse-theme-created-annotated.svg
deleted file mode 100644
index f6b902f45d..0000000000
--- a/documentation/themes/original-drawings/eclipse-theme-created-annotated.svg
+++ /dev/null
@@ -1,144 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-<svg
- xmlns:dc="http://purl.org/dc/elements/1.1/"
- xmlns:cc="http://creativecommons.org/ns#"
- xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
- xmlns:svg="http://www.w3.org/2000/svg"
- xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink"
- xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
- xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
- width="210mm"
- height="297mm"
- id="svg1901"
- sodipodi:version="0.32"
- inkscape:version="0.46"
- sodipodi:docname="eclipse-theme-created-annotated.svg"
- sodipodi:docbase="/home/tsoots/ohj/translations/po"
- inkscape:output_extension="org.inkscape.output.svg.inkscape">
- <defs
- id="defs1903">
- <linearGradient
- inkscape:collect="always"
- id="linearGradient6082">
- <stop
- style="stop-color:#ff5b19;stop-opacity:1;"
- offset="0"
- id="stop6084" />
- <stop
- style="stop-color:#ff5b19;stop-opacity:0;"
- offset="1"
- id="stop6086" />
- </linearGradient>
- <marker
- inkscape:stockid="Arrow2Mend"
- orient="auto"
- refY="0.0"
- refX="0.0"
- id="Arrow2Mend"
- style="overflow:visible;">
- <path
- id="path3761"
- style="font-size:12.0;fill-rule:evenodd;stroke-width:0.62500000;stroke-linejoin:round;"
- d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
- transform="scale(0.6) rotate(180) translate(0,0)" />
- </marker>
- <marker
- inkscape:stockid="Arrow2Send"
- orient="auto"
- refY="0.0"
- refX="0.0"
- id="Arrow2Send"
- style="overflow:visible;">
- <path
- id="path3767"
- style="font-size:12.0;fill-rule:evenodd;stroke-width:0.62500000;stroke-linejoin:round;"
- d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
- transform="scale(0.3) rotate(180) translate(-2.3,0)" />
- </marker>
- <marker
- inkscape:stockid="Arrow1Mend"
- orient="auto"
- refY="0.0"
- refX="0.0"
- id="Arrow1Mend"
- style="overflow:visible;">
- <path
- id="path3743"
- d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
- style="fill-rule:evenodd;stroke:#000000;stroke-width:1.0pt;marker-start:none;"
- transform="scale(0.4) rotate(180) translate(10,0)" />
- </marker>
- <inkscape:perspective
- sodipodi:type="inkscape:persp3d"
- inkscape:vp_x="0 : 526.18109 : 1"
- inkscape:vp_y="0 : 1000 : 0"
- inkscape:vp_z="744.09448 : 526.18109 : 1"
- inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
- id="perspective7" />
- <inkscape:perspective
- id="perspective2444"
- inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
- inkscape:vp_z="744.09448 : 526.18109 : 1"
- inkscape:vp_y="0 : 1000 : 0"
- inkscape:vp_x="0 : 526.18109 : 1"
- sodipodi:type="inkscape:persp3d" />
- <linearGradient
- inkscape:collect="always"
- xlink:href="#linearGradient6082"
- id="linearGradient6088"
- x1="107.60961"
- y1="139.88233"
- x2="263.68966"
- y2="139.88233"
- gradientUnits="userSpaceOnUse" />
- </defs>
- <sodipodi:namedview
- id="base"
- pagecolor="#ffffff"
- bordercolor="#666666"
- borderopacity="1.0"
- inkscape:pageopacity="0.0"
- inkscape:pageshadow="2"
- inkscape:zoom="1.979899"
- inkscape:cx="190.7442"
- inkscape:cy="893.09601"
- inkscape:document-units="px"
- inkscape:current-layer="layer1"
- gridtolerance="10000"
- inkscape:window-width="1287"
- inkscape:window-height="1025"
- inkscape:window-x="1667"
- inkscape:window-y="0"
- showgrid="false" />
- <metadata
- id="metadata1906">
- <rdf:RDF>
- <cc:Work
- rdf:about="">
- <dc:format>image/svg+xml</dc:format>
- <dc:type
- rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
- </cc:Work>
- </rdf:RDF>
- </metadata>
- <g
- inkscape:label="Taso 1"
- inkscape:groupmode="layer"
- id="layer1"
- style="opacity:1">
- <image
- y="10.247781"
- x="22.357979"
- id="image2446"
- height="250.80194"
- width="318.68155"
- sodipodi:absref="/home/magi/.encfs/plain/itmill/doc/manual/img/themes/eclipse-theme-created.png"
- xlink:href="/home/magi/.encfs/plain/itmill/doc/manual/img/themes/eclipse-theme-created.png" />
- <path
- style="fill:none;fill-rule:evenodd;stroke:url(#linearGradient6088);stroke-width:2.10000000000000009;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow2Mend);stroke-miterlimit:4;stroke-dasharray:none"
- d="M 262.63966,65.948222 L 109.60155,212.92542"
- id="path2450" />
- </g>
-</svg>
diff --git a/documentation/themes/original-drawings/theme-contents.svg b/documentation/themes/original-drawings/theme-contents.svg
deleted file mode 100644
index 169336beba..0000000000
--- a/documentation/themes/original-drawings/theme-contents.svg
+++ /dev/null
@@ -1,1857 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
- xmlns:dc="http://purl.org/dc/elements/1.1/"
- xmlns:cc="http://creativecommons.org/ns#"
- xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
- xmlns:svg="http://www.w3.org/2000/svg"
- xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink"
- xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
- xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
- width="210mm"
- height="297mm"
- id="svg1901"
- sodipodi:version="0.32"
- inkscape:version="0.48.4 r9939"
- sodipodi:docname="theme-contents.svg"
- inkscape:output_extension="org.inkscape.output.svg.inkscape"
- inkscape:export-filename="/Users/Shared/phoenix/dev/2832/manual/img/themes/theme-contents-hi.png"
- inkscape:export-xdpi="150.0585"
- inkscape:export-ydpi="150.0585"
- version="1.1">
- <defs
- id="defs1903">
- <inkscape:perspective
- sodipodi:type="inkscape:persp3d"
- inkscape:vp_x="0 : 526.18109 : 1"
- inkscape:vp_y="0 : 1000 : 0"
- inkscape:vp_z="744.09448 : 526.18109 : 1"
- inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
- id="perspective645" />
- <marker
- inkscape:stockid="TriangleOutL"
- orient="auto"
- refY="0.0"
- refX="0.0"
- id="TriangleOutL"
- style="overflow:visible">
- <path
- id="path3964"
- d="M 5.77,0.0 L -2.88,5.0 L -2.88,-5.0 L 5.77,0.0 z "
- style="fill-rule:evenodd;stroke:#000000;stroke-width:1.0pt;marker-start:none"
- transform="scale(0.8)" />
- </marker>
- <linearGradient
- id="linearGradient1699">
- <stop
- style="stop-color:#017eff;stop-opacity:1.0000000;"
- offset="0.0000000"
- id="stop1700" />
- <stop
- style="stop-color:#ecfaff;stop-opacity:1.0000000;"
- offset="1.0000000"
- id="stop1701" />
- </linearGradient>
- <linearGradient
- xlink:href="#linearGradient841"
- id="linearGradient1944" />
- <radialGradient
- xlink:href="#linearGradient841"
- r="0.54606670"
- id="radialGradient856"
- fy="3.5200000"
- fx="0.54117650"
- cy="0.89285713"
- cx="0.50000000" />
- <linearGradient
- y2="0.79687500"
- y1="-0.56250000"
- xlink:href="#linearGradient1507"
- x2="0.62222224"
- x1="0.31111112"
- id="linearGradient1556" />
- <linearGradient
- y2="383.7653"
- y1="843.20789"
- xlink:href="#linearGradient1507"
- x2="547.80806"
- x1="201.38964"
- id="linearGradient1506"
- gradientTransform="scale(0.9446888,1.0585496)"
- gradientUnits="userSpaceOnUse" />
- <linearGradient
- y2="418.53634"
- y1="236.12772"
- xlink:href="#linearGradient1501"
- x2="330.88033"
- x1="687.96373"
- id="linearGradient1499"
- gradientTransform="scale(0.9890091,1.011113)"
- gradientUnits="userSpaceOnUse" />
- <linearGradient
- y2="287.73826"
- y1="169.44361"
- xlink:href="#linearGradient1492"
- x2="622.33327"
- x1="741.63899"
- id="linearGradient1497"
- gradientTransform="scale(0.9552926,1.0467997)"
- gradientUnits="userSpaceOnUse" />
- <linearGradient
- y2="689.86002"
- y1="230.07422"
- xlink:href="#linearGradient1492"
- x2="351.7063"
- x1="728.96644"
- id="linearGradient1495"
- gradientTransform="scale(0.955425,1.0466546)"
- gradientUnits="userSpaceOnUse" />
- <linearGradient
- id="linearGradient1492">
- <stop
- style="stop-color:#dadada;stop-opacity:1.0000000;"
- offset="0.0000000"
- id="stop1493" />
- <stop
- style="stop-color:#f1f1f1;stop-opacity:1.0000000;"
- offset="0.34923077"
- id="stop1496" />
- <stop
- style="stop-color:#f0f0f0;stop-opacity:1.0000000;"
- offset="1.0000000"
- id="stop1494" />
- </linearGradient>
- <linearGradient
- id="linearGradient1501">
- <stop
- style="stop-color:#ffffff;stop-opacity:1.0000000;"
- offset="0.0000000"
- id="stop1502" />
- <stop
- style="stop-color:#ffffff;stop-opacity:0.0000000;"
- offset="1.0000000"
- id="stop1504" />
- </linearGradient>
- <linearGradient
- id="linearGradient1507">
- <stop
- style="stop-color:#000000;stop-opacity:0.095505618;"
- offset="0.0000000"
- id="stop1508" />
- <stop
- style="stop-color:#000000;stop-opacity:0.0000000;"
- offset="1.0000000"
- id="stop1510" />
- </linearGradient>
- <radialGradient
- xlink:href="#linearGradient853"
- r="0.50000000"
- id="radialGradient861"
- fy="0.29885057"
- fx="0.50704223"
- cy="0.50000000"
- cx="0.50000000" />
- <linearGradient
- id="linearGradient853">
- <stop
- style="stop-color:#000000;stop-opacity:0.29752067;"
- offset="0.00000000"
- id="stop854" />
- <stop
- style="stop-color:#000000;stop-opacity:0.00000000;"
- offset="1.0000000"
- id="stop855" />
- </linearGradient>
- <linearGradient
- y2="1.2905406"
- y1="-1.1486486"
- xlink:href="#linearGradient853"
- x2="0.26408452"
- x1="1.4647887"
- id="linearGradient859" />
- <linearGradient
- xlink:href="#linearGradient846"
- id="linearGradient850"
- gradientTransform="scale(0.9646355,1.036661)"
- x1="30.408737"
- y1="87.607189"
- x2="86.629186"
- y2="87.607189"
- gradientUnits="userSpaceOnUse" />
- <linearGradient
- id="linearGradient846">
- <stop
- style="stop-color:#e7e7e7;stop-opacity:1.0000000;"
- offset="0.00000000"
- id="stop847" />
- <stop
- style="stop-color:#a5a5a5;stop-opacity:1.0000000;"
- offset="1.0000000"
- id="stop848" />
- </linearGradient>
- <linearGradient
- y2="0.049019609"
- y1="1.2647059"
- xlink:href="#linearGradient846"
- x2="0.57142860"
- x1="0.64285713"
- id="linearGradient858" />
- <linearGradient
- y2="0.35555556"
- y1="0.32222223"
- xlink:href="#linearGradient846"
- x2="0.80985916"
- x1="0.39788732"
- id="linearGradient851" />
- <linearGradient
- y2="26.470001"
- y1="173.90754"
- xlink:href="#linearGradient1290"
- x2="-129.90755"
- x1="-132.24597"
- id="linearGradient860"
- gradientTransform="scale(0.8297524,1.2051788)"
- gradientUnits="userSpaceOnUse" />
- <linearGradient
- id="linearGradient1290">
- <stop
- style="stop-color:#b2a269;stop-opacity:1.0000000;"
- offset="0.0000000"
- id="stop1291" />
- <stop
- style="stop-color:#6d5b18;stop-opacity:1.0000000;"
- offset="1.0000000"
- id="stop1292" />
- </linearGradient>
- <linearGradient
- id="linearGradient841">
- <stop
- style="stop-color:#ffffff;stop-opacity:1.0000000;"
- offset="0.00000000"
- id="stop842" />
- <stop
- style="stop-color:#ffffff;stop-opacity:0.00000000;"
- offset="1.0000000"
- id="stop843" />
- </linearGradient>
- <radialGradient
- xlink:href="#linearGradient853"
- r="0.50000000"
- id="radialGradient864"
- fy="0.14942528"
- fx="0.50000000"
- cy="0.50000000"
- cx="0.50000000" />
- <linearGradient
- y2="85.416771"
- y1="83.615703"
- xlink:href="#linearGradient846"
- x2="102.17324"
- x1="31.956963"
- id="linearGradient849"
- gradientTransform="scale(0.9409737,1.062729)"
- gradientUnits="userSpaceOnUse" />
- <linearGradient
- y2="0.46568626"
- y1="0.38235295"
- xlink:href="#linearGradient853"
- x2="0.59469700"
- x1="-0.22348484"
- id="linearGradient840" />
- <linearGradient
- y2="0.50490195"
- y1="0.49019608"
- xlink:href="#linearGradient841"
- x2="0.10833333"
- x1="1.3833333"
- id="linearGradient845" />
- <linearGradient
- xlink:href="#linearGradient841"
- id="linearGradient844" />
- <linearGradient
- y2="0.50735295"
- y1="-1.0294118"
- xlink:href="#linearGradient841"
- x2="0.63483149"
- x1="0.56179774"
- id="linearGradient852" />
- <linearGradient
- inkscape:collect="always"
- xlink:href="#linearGradient1507"
- id="linearGradient227220"
- gradientUnits="userSpaceOnUse"
- gradientTransform="scale(0.9446888,1.0585496)"
- x1="201.38964"
- y1="843.20789"
- x2="547.80806"
- y2="383.7653" />
- <linearGradient
- inkscape:collect="always"
- xlink:href="#linearGradient1507"
- id="linearGradient227266"
- gradientUnits="userSpaceOnUse"
- gradientTransform="scale(0.9446888,1.0585496)"
- x1="201.38964"
- y1="843.20789"
- x2="547.80806"
- y2="383.7653" />
- <linearGradient
- xlink:href="#linearGradient1507"
- id="linearGradient233555" />
- <linearGradient
- y2="0.0078125000"
- y1="0.97656250"
- xlink:href="#linearGradient1507"
- x2="0.78260869"
- x1="0.052173913"
- id="linearGradient233553" />
- <linearGradient
- y2="0.54687500"
- y1="-0.54545456"
- xlink:href="#linearGradient1501"
- x2="0.062992126"
- x1="0.94656491"
- id="linearGradient233551" />
- <linearGradient
- y2="1.3281250"
- y1="0.32812500"
- xlink:href="#linearGradient1492"
- x2="-0.37606838"
- x1="0.63247865"
- id="linearGradient233549" />
- <linearGradient
- y2="1.1796875"
- y1="0.21093750"
- xlink:href="#linearGradient1492"
- x2="0.085470088"
- x1="0.88034189"
- id="linearGradient233547" />
- <linearGradient
- id="linearGradient233539">
- <stop
- style="stop-color:#c6c6c6;stop-opacity:1.0000000;"
- offset="0.0000000"
- id="stop233541" />
- <stop
- style="stop-color:#f1f1f1;stop-opacity:1.0000000;"
- offset="0.34923077"
- id="stop233543" />
- <stop
- style="stop-color:#f0f0f0;stop-opacity:1.0000000;"
- offset="1.0000000"
- id="stop233545" />
- </linearGradient>
- <linearGradient
- id="linearGradient233533">
- <stop
- style="stop-color:#000000;stop-opacity:0.095505618;"
- offset="0.0000000"
- id="stop233535" />
- <stop
- style="stop-color:#000000;stop-opacity:0.0000000;"
- offset="1.0000000"
- id="stop233537" />
- </linearGradient>
- <radialGradient
- xlink:href="#linearGradient1400"
- r="68.379425"
- id="radialGradient858"
- fy="77.944687"
- fx="79.895966"
- cy="77.944687"
- cx="79.895966"
- gradientUnits="userSpaceOnUse" />
- <radialGradient
- xlink:href="#linearGradient853"
- r="200.73203"
- id="radialGradient852"
- fy="325.76621"
- fx="240.38737"
- cy="477.83306"
- cx="227.0055"
- gradientUnits="userSpaceOnUse" />
- <linearGradient
- id="linearGradient233522">
- <stop
- style="stop-color:#e3f9ff;stop-opacity:1.0000000;"
- offset="0.0000000"
- id="stop233524" />
- <stop
- style="stop-color:#73bee7;stop-opacity:1.0000000;"
- offset="0.36194703"
- id="stop867" />
- <stop
- style="stop-color:#438ec5;stop-opacity:1.0000000;"
- offset="0.62534887"
- id="stop856" />
- <stop
- style="stop-color:#477daf;stop-opacity:1.0000000;"
- offset="0.72607356"
- id="stop1185" />
- <stop
- style="stop-color:#2b5798;stop-opacity:1.0000000;"
- offset="1.0000000"
- id="stop233529" />
- </linearGradient>
- <linearGradient
- y2="112.48578"
- y1="199.48993"
- xlink:href="#linearGradient865"
- x2="61.94431"
- x1="152.00712"
- id="linearGradient870"
- gradientTransform="scale(1.0693225,0.9351716)"
- gradientUnits="userSpaceOnUse" />
- <linearGradient
- y2="46.947097"
- y1="25.611177"
- xlink:href="#linearGradient865"
- x2="82.344438"
- x1="105.80702"
- id="linearGradient864"
- gradientTransform="scale(1.1084886,0.9021293)"
- gradientUnits="userSpaceOnUse" />
- <linearGradient
- y2="40.053987"
- y1="-53.39077"
- xlink:href="#linearGradient865"
- x2="38.977112"
- x1="43.397979"
- id="linearGradient1010"
- gradientUnits="userSpaceOnUse" />
- <linearGradient
- y2="24.174611"
- y1="180.92995"
- xlink:href="#linearGradient865"
- x2="53.211626"
- x1="77.291655"
- id="linearGradient1011"
- gradientUnits="userSpaceOnUse" />
- <linearGradient
- y2="89.232159"
- y1="483.82793"
- xlink:href="#linearGradient1400"
- x2="-127.58335"
- x1="-83.094155"
- id="linearGradient882"
- gradientTransform="scale(0.8280565,1.2076471)"
- gradientUnits="userSpaceOnUse" />
- <linearGradient
- y2="-0.079579733"
- y1="4.0796266"
- xlink:href="#linearGradient1400"
- x2="0.52828526"
- x1="0.99722022"
- id="linearGradient233515"
- gradientTransform="scale(1.001713,0.998290)" />
- <linearGradient
- y2="89.599754"
- y1="484.19555"
- xlink:href="#linearGradient1400"
- x2="-126.92083"
- x1="-82.431632"
- id="linearGradient842"
- gradientTransform="scale(0.8311735,1.2031182)"
- gradientUnits="userSpaceOnUse" />
- <linearGradient
- y2="0.092356689"
- y1="0.83121020"
- xlink:href="#linearGradient839"
- x2="0.35897437"
- x1="0.93772894"
- id="linearGradient233512" />
- <linearGradient
- id="linearGradient839">
- <stop
- style="stop-color:#4f4f4f;stop-opacity:1.0000000;"
- offset="0.0000000"
- id="stop840" />
- <stop
- style="stop-color:#bebebe;stop-opacity:1.0000000;"
- offset="0.27444443"
- id="stop233509" />
- <stop
- style="stop-color:#fff;stop-opacity:1;"
- offset="1"
- id="stop841" />
- </linearGradient>
- <linearGradient
- y2="0.41287878"
- y1="0.34090909"
- xlink:href="#linearGradient883"
- x2="0.70434785"
- x1="1.8869566"
- id="linearGradient233505" />
- <linearGradient
- id="linearGradient883">
- <stop
- style="stop-color:#1f1f1f;stop-opacity:0.55371898;"
- offset="0.0000000"
- id="stop884" />
- <stop
- style="stop-color:#000000;stop-opacity:0.0000000;"
- offset="1.0000000"
- id="stop885" />
- </linearGradient>
- <linearGradient
- y2="145.51297"
- y1="98.665952"
- xlink:href="#linearGradient899"
- x2="41.235089"
- x1="40.913932"
- id="linearGradient848"
- gradientTransform="scale(1.0773318,0.9282192)"
- gradientUnits="userSpaceOnUse" />
- <linearGradient
- id="linearGradient899">
- <stop
- style="stop-color:#ffffff;stop-opacity:0.0000000;"
- offset="0.0000000"
- id="stop900" />
- <stop
- style="stop-color:#ffffff;stop-opacity:1.0000000;"
- offset="1.0000000"
- id="stop901" />
- </linearGradient>
- <linearGradient
- y2="187.93358"
- y1="160.06661"
- xlink:href="#linearGradient1501"
- x2="38.546809"
- x1="35.646257"
- id="linearGradient1530"
- gradientTransform="scale(1.5213696,0.6573025)"
- gradientUnits="userSpaceOnUse" />
- <linearGradient
- id="linearGradient1527">
- <stop
- style="stop-color:#000;stop-opacity:1;"
- offset="0"
- id="stop1528" />
- <stop
- style="stop-color:#fff;stop-opacity:1;"
- offset="1"
- id="stop1529" />
- </linearGradient>
- <radialGradient
- xlink:href="#linearGradient1646"
- r="0.50000000"
- id="radialGradient1645"
- fy="0.67187500"
- fx="0.38759691"
- cy="0.50000000"
- cx="0.50000000" />
- <linearGradient
- id="linearGradient1646">
- <stop
- style="stop-color:#ff0000;stop-opacity:1.0000000;"
- offset="0.0000000"
- id="stop1647" />
- <stop
- style="stop-color:#a00000;stop-opacity:0.71372551;"
- offset="0.69372094"
- id="stop1649" />
- <stop
- style="stop-color:#960000;stop-opacity:0.0000000;"
- offset="1.0000000"
- id="stop1648" />
- </linearGradient>
- <linearGradient
- id="linearGradient865">
- <stop
- style="stop-color:#ffffff;stop-opacity:1.0000000;"
- offset="0.00000000"
- id="stop866" />
- <stop
- style="stop-color:#ffffff;stop-opacity:0.00000000;"
- offset="1.0000000"
- id="stop868" />
- </linearGradient>
- <linearGradient
- id="linearGradient1400">
- <stop
- style="stop-color:#000000;stop-opacity:0.67843139;"
- offset="0.0000000"
- id="stop1401" />
- <stop
- style="stop-color:#000000;stop-opacity:0.32941177;"
- offset="0.56999999"
- id="stop1403" />
- <stop
- style="stop-color:#000000;stop-opacity:0.00000000;"
- offset="1.0000000"
- id="stop1402" />
- </linearGradient>
- <linearGradient
- id="linearGradient233476">
- <stop
- style="stop-color:#ffffff;stop-opacity:1.0000000;"
- offset="0.0000000"
- id="stop233478" />
- <stop
- style="stop-color:#ffffff;stop-opacity:0.0000000;"
- offset="1.0000000"
- id="stop233480" />
- </linearGradient>
- <linearGradient
- inkscape:collect="always"
- xlink:href="#linearGradient1507"
- id="linearGradient233596"
- gradientUnits="userSpaceOnUse"
- gradientTransform="scale(0.9446888,1.0585496)"
- x1="201.38964"
- y1="843.20789"
- x2="547.80806"
- y2="383.7653" />
- <linearGradient
- inkscape:collect="always"
- xlink:href="#linearGradient1507"
- id="linearGradient233706"
- gradientUnits="userSpaceOnUse"
- gradientTransform="scale(0.9446888,1.0585496)"
- x1="201.38964"
- y1="843.20789"
- x2="547.80806"
- y2="383.7653" />
- <linearGradient
- y2="0.48113209"
- y1="0.83018869"
- xlink:href="#linearGradient882"
- x2="0.51764709"
- x1="0.24705882"
- id="linearGradient1063" />
- <linearGradient
- y2="-1.0859375"
- y1="0.51562500"
- xlink:href="#linearGradient832"
- x2="-0.40136054"
- x1="0.76870745"
- id="linearGradient2577" />
- <linearGradient
- y2="0.67187500"
- y1="0.23437500"
- xlink:href="#linearGradient838"
- x2="0.91729325"
- x1="0.48872182"
- id="linearGradient2516" />
- <linearGradient
- y2="0.71875000"
- y1="0.46093750"
- xlink:href="#linearGradient838"
- x2="0.42335767"
- x1="0.68613136"
- id="linearGradient2515" />
- <linearGradient
- y2="-0.77419353"
- y1="0.50806451"
- xlink:href="#linearGradient2387"
- x2="0.15686275"
- x1="0.56470591"
- id="linearGradient2407" />
- <linearGradient
- y2="0.44531250"
- y1="0.53906250"
- xlink:href="#linearGradient850"
- x2="0.51724136"
- x1="0.42068964"
- id="linearGradient239208" />
- <linearGradient
- y2="0.0078125000"
- y1="0.97656250"
- xlink:href="#linearGradient1507"
- x2="0.78260869"
- x1="0.052173913"
- id="linearGradient239206" />
- <linearGradient
- y2="0.54687500"
- y1="-0.55303031"
- xlink:href="#linearGradient1501"
- x2="0.062992126"
- x1="1.5572519"
- id="linearGradient239204" />
- <linearGradient
- y2="1.3281250"
- y1="0.32812500"
- xlink:href="#linearGradient1492"
- x2="-0.37606838"
- x1="0.63247865"
- id="linearGradient239202" />
- <linearGradient
- y2="1.1796875"
- y1="0.21093750"
- xlink:href="#linearGradient1492"
- x2="0.085470088"
- x1="0.88034189"
- id="linearGradient239200" />
- <linearGradient
- id="linearGradient239192">
- <stop
- style="stop-color:#dadada;stop-opacity:1.0000000;"
- offset="0.0000000"
- id="stop239194" />
- <stop
- style="stop-color:#f1f1f1;stop-opacity:1.0000000;"
- offset="0.34923077"
- id="stop239196" />
- <stop
- style="stop-color:#f0f0f0;stop-opacity:1.0000000;"
- offset="1.0000000"
- id="stop239198" />
- </linearGradient>
- <linearGradient
- id="linearGradient239186">
- <stop
- style="stop-color:#000000;stop-opacity:0.095505618;"
- offset="0.0000000"
- id="stop239188" />
- <stop
- style="stop-color:#000000;stop-opacity:0.0000000;"
- offset="1.0000000"
- id="stop239190" />
- </linearGradient>
- <linearGradient
- y2="-0.11480361"
- y1="3.3240275"
- xlink:href="#linearGradient882"
- x2="0.90986663"
- x1="-1.1108099"
- id="linearGradient1064" />
- <linearGradient
- y2="0.38461539"
- y1="0.47435898"
- xlink:href="#linearGradient850"
- x2="0.54577464"
- x1="0.63380283"
- id="linearGradient239183" />
- <linearGradient
- id="linearGradient239176">
- <stop
- style="stop-color:#071422;stop-opacity:1.0000000;"
- offset="0.00000000"
- id="stop851" />
- <stop
- style="stop-color:#2c528a;stop-opacity:1.0000000;"
- offset="0.50000000"
- id="stop853" />
- <stop
- style="stop-color:#a3bfdf;stop-opacity:1.0000000;"
- offset="0.75000000"
- id="stop239180" />
- <stop
- style="stop-color:#59708a;stop-opacity:1.0000000;"
- offset="1.0000000"
- id="stop852" />
- </linearGradient>
- <linearGradient
- y2="-6.6841485e-006"
- y1="2.0080366"
- xlink:href="#linearGradient882"
- x2="0.58098590"
- x1="0.58098590"
- id="linearGradient881" />
- <linearGradient
- y2="0.54166669"
- y1="0.22395833"
- xlink:href="#linearGradient838"
- x2="0.77464789"
- x1="0.50352114"
- id="linearGradient837" />
- <linearGradient
- id="linearGradient838">
- <stop
- style="stop-color:#a5a5a5;stop-opacity:1.0000000;"
- offset="0.00000000"
- id="stop839" />
- <stop
- style="stop-color:#dadada;stop-opacity:1.0000000;"
- offset="0.17875445"
- id="stop239166" />
- <stop
- style="stop-color:#656565;stop-opacity:1.0000000;"
- offset="0.48317710"
- id="stop239168" />
- <stop
- style="stop-color:#d5d5d5;stop-opacity:1.0000000;"
- offset="0.61641997"
- id="stop239170" />
- <stop
- style="stop-color:#454545;stop-opacity:1.0000000;"
- offset="1.0000000"
- id="stop239172" />
- </linearGradient>
- <linearGradient
- y2="0.80000001"
- y1="0.012500000"
- xlink:href="#linearGradient844"
- x2="0.57394367"
- x1="0.71830988"
- id="linearGradient843" />
- <linearGradient
- id="linearGradient239158">
- <stop
- style="stop-color:#ffffff;stop-opacity:1.0000000;"
- offset="0.00000000"
- id="stop845" />
- <stop
- style="stop-color:#ffffff;stop-opacity:0.00000000;"
- offset="1.0000000"
- id="stop239161" />
- </linearGradient>
- <linearGradient
- y2="1.1954023"
- y1="0.28160921"
- xlink:href="#linearGradient832"
- x2="1.1725352"
- x1="0.78521127"
- id="linearGradient835" />
- <linearGradient
- id="linearGradient832">
- <stop
- style="stop-color:#000;stop-opacity:1;"
- offset="0"
- id="stop833" />
- <stop
- style="stop-color:#fff;stop-opacity:1;"
- offset="1"
- id="stop834" />
- </linearGradient>
- <linearGradient
- y2="0.37869984"
- y1="0.73598528"
- xlink:href="#linearGradient832"
- x2="-0.055982146"
- x1="0.59630799"
- id="linearGradient921" />
- <linearGradient
- y2="0.43650794"
- y1="0.047619049"
- xlink:href="#linearGradient844"
- x2="0.46666667"
- x1="0.86538464"
- id="linearGradient880" />
- <linearGradient
- y2="0.33730158"
- y1="0.66666669"
- xlink:href="#linearGradient882"
- x2="0.52358490"
- x1="0.12264151"
- id="linearGradient889" />
- <linearGradient
- y2="0.51984125"
- y1="0.087301590"
- xlink:href="#linearGradient844"
- x2="0.44897959"
- x1="0.68877554"
- id="linearGradient890" />
- <linearGradient
- y2="-0.84883720"
- y1="0.40697673"
- xlink:href="#linearGradient2387"
- x2="0.65098041"
- x1="0.63529414"
- id="linearGradient836" />
- <linearGradient
- y2="-0.54651165"
- y1="0.74418604"
- xlink:href="#linearGradient2387"
- x2="0.56078434"
- x1="0.55686277"
- id="linearGradient2386" />
- <linearGradient
- id="linearGradient2387">
- <stop
- style="stop-color:#ffffff;stop-opacity:0.0000000;"
- offset="0.0000000"
- id="stop2388" />
- <stop
- style="stop-color:#fff;stop-opacity:1;"
- offset="1"
- id="stop2389" />
- </linearGradient>
- <linearGradient
- id="linearGradient239140">
- <stop
- style="stop-color:#000000;stop-opacity:0.33333334;"
- offset="0.00000000"
- id="stop883" />
- <stop
- style="stop-color:#000000;stop-opacity:0.00000000;"
- offset="1.0000000"
- id="stop239143" />
- </linearGradient>
- <linearGradient
- id="linearGradient239134">
- <stop
- style="stop-color:#ffffff;stop-opacity:1.0000000;"
- offset="0.0000000"
- id="stop239136" />
- <stop
- style="stop-color:#ffffff;stop-opacity:0.0000000;"
- offset="1.0000000"
- id="stop239138" />
- </linearGradient>
- <linearGradient
- inkscape:collect="always"
- xlink:href="#linearGradient1507"
- id="linearGradient239278"
- gradientUnits="userSpaceOnUse"
- gradientTransform="scale(0.9446888,1.0585496)"
- x1="201.38964"
- y1="843.20789"
- x2="547.80806"
- y2="383.7653" />
- <linearGradient
- inkscape:collect="always"
- xlink:href="#linearGradient1507"
- id="linearGradient2870"
- gradientUnits="userSpaceOnUse"
- gradientTransform="scale(0.9446888,1.0585496)"
- x1="201.38964"
- y1="843.20789"
- x2="547.80806"
- y2="383.7653" />
- <linearGradient
- y2="383.76529"
- y1="843.20789"
- xlink:href="#linearGradient1507-1"
- x2="547.80804"
- x1="201.38963"
- id="linearGradient1506-5"
- gradientTransform="scale(0.9446888,1.0585496)"
- gradientUnits="userSpaceOnUse" />
- <linearGradient
- id="linearGradient1507-1">
- <stop
- style="stop-color:#000000;stop-opacity:0.095505618;"
- offset="0.0000000"
- id="stop1508-1" />
- <stop
- style="stop-color:#000000;stop-opacity:0.0000000;"
- offset="1.0000000"
- id="stop1510-4" />
- </linearGradient>
- <linearGradient
- id="linearGradient3631">
- <stop
- style="stop-color:#000000;stop-opacity:0.095505618;"
- offset="0.0000000"
- id="stop3633" />
- <stop
- style="stop-color:#000000;stop-opacity:0.0000000;"
- offset="1.0000000"
- id="stop3635" />
- </linearGradient>
- <linearGradient
- id="linearGradient3638">
- <stop
- style="stop-color:#000000;stop-opacity:0.095505618;"
- offset="0.0000000"
- id="stop3640" />
- <stop
- style="stop-color:#000000;stop-opacity:0.0000000;"
- offset="1.0000000"
- id="stop3642" />
- </linearGradient>
- <linearGradient
- id="linearGradient3645">
- <stop
- style="stop-color:#000000;stop-opacity:0.095505618;"
- offset="0.0000000"
- id="stop3647" />
- <stop
- style="stop-color:#000000;stop-opacity:0.0000000;"
- offset="1.0000000"
- id="stop3649" />
- </linearGradient>
- <linearGradient
- y2="689.86005"
- y1="230.07422"
- xlink:href="#linearGradient1492-3"
- x2="351.7063"
- x1="728.96643"
- id="linearGradient1495-5"
- gradientTransform="scale(0.955425,1.0466546)"
- gradientUnits="userSpaceOnUse" />
- <linearGradient
- id="linearGradient1492-3">
- <stop
- style="stop-color:#dadada;stop-opacity:1.0000000;"
- offset="0.0000000"
- id="stop1493-4" />
- <stop
- style="stop-color:#f1f1f1;stop-opacity:1.0000000;"
- offset="0.34923077"
- id="stop1496-0" />
- <stop
- style="stop-color:#f0f0f0;stop-opacity:1.0000000;"
- offset="1.0000000"
- id="stop1494-6" />
- </linearGradient>
- <linearGradient
- y2="418.53635"
- y1="236.12772"
- xlink:href="#linearGradient1501-6"
- x2="330.88034"
- x1="687.96375"
- id="linearGradient1499-2"
- gradientTransform="scale(0.9890091,1.011113)"
- gradientUnits="userSpaceOnUse" />
- <linearGradient
- id="linearGradient1501-6">
- <stop
- style="stop-color:#ffffff;stop-opacity:1.0000000;"
- offset="0.0000000"
- id="stop1502-3" />
- <stop
- style="stop-color:#ffffff;stop-opacity:0.0000000;"
- offset="1.0000000"
- id="stop1504-4" />
- </linearGradient>
- <linearGradient
- y2="287.73825"
- y1="169.4436"
- xlink:href="#linearGradient1492-3"
- x2="622.33325"
- x1="741.63898"
- id="linearGradient1497-4"
- gradientTransform="scale(0.9552926,1.0467997)"
- gradientUnits="userSpaceOnUse" />
- <linearGradient
- id="linearGradient3661">
- <stop
- style="stop-color:#dadada;stop-opacity:1.0000000;"
- offset="0.0000000"
- id="stop3663" />
- <stop
- style="stop-color:#f1f1f1;stop-opacity:1.0000000;"
- offset="0.34923077"
- id="stop3665" />
- <stop
- style="stop-color:#f0f0f0;stop-opacity:1.0000000;"
- offset="1.0000000"
- id="stop3667" />
- </linearGradient>
- <marker
- inkscape:stockid="TriangleOutL"
- orient="auto"
- refY="0"
- refX="0"
- id="TriangleOutL-9"
- style="overflow:visible">
- <path
- inkscape:connector-curvature="0"
- id="path3964-4"
- d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
- style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;marker-start:none"
- transform="scale(0.8,0.8)" />
- </marker>
- <clipPath
- id="clipPath16-4"
- clipPathUnits="userSpaceOnUse">
- <path
- inkscape:connector-curvature="0"
- id="path18-3"
- d="M 0,512 512,512 512,0 0,0 0,512 z" />
- </clipPath>
- <clipPath
- id="clipPath16-7"
- clipPathUnits="userSpaceOnUse">
- <path
- inkscape:connector-curvature="0"
- id="path18-6"
- d="M 0,512 512,512 512,0 0,0 0,512 z" />
- </clipPath>
- <clipPath
- id="clipPath16"
- clipPathUnits="userSpaceOnUse">
- <path
- inkscape:connector-curvature="0"
- id="path18"
- d="M 0,512 512,512 512,0 0,0 0,512 z" />
- </clipPath>
- <clipPath
- id="clipPath16-5-7"
- clipPathUnits="userSpaceOnUse">
- <path
- inkscape:connector-curvature="0"
- id="path18-4-55"
- d="M 0,512 512,512 512,0 0,0 0,512 z" />
- </clipPath>
- <clipPath
- id="clipPath16-5"
- clipPathUnits="userSpaceOnUse">
- <path
- inkscape:connector-curvature="0"
- id="path18-4"
- d="M 0,512 512,512 512,0 0,0 0,512 z" />
- </clipPath>
- <clipPath
- id="clipPath16-4-6"
- clipPathUnits="userSpaceOnUse">
- <path
- inkscape:connector-curvature="0"
- id="path18-3-0"
- d="M 0,512 512,512 512,0 0,0 0,512 z" />
- </clipPath>
- <clipPath
- id="clipPath16-4-1"
- clipPathUnits="userSpaceOnUse">
- <path
- inkscape:connector-curvature="0"
- id="path18-3-4"
- d="M 0,512 512,512 512,0 0,0 0,512 z" />
- </clipPath>
- <marker
- id="marker44971"
- orient="auto"
- markerHeight="5.7450781"
- markerWidth="4.6297355">
- <g
- id="g18059"
- transform="matrix(0.5,0,0,0.5,-185.64299,-257.19655)">
- <path
- inkscape:connector-curvature="0"
- sodipodi:nodetypes="csccccccsccssssssssssssssccc"
- id="path18061"
- d="m 370,508.65625 c -0.86067,0.0587 -1.60944,0.6213 -1.90625,1.4375 -0.26976,0.74176 -0.0577,1.53493 0.4375,2.125 l -1.75,0 c -0.0424,-0.005 -0.0824,0.002 -0.125,0 l 0,4.375 0.125,0 1.75,0 c -0.67896,0.8597 -0.69701,2.11549 0.0937,2.90625 0.85091,0.85091 2.27409,0.85091 3.125,0 l 3.34375,-3.375 c 0.033,-0.0295 0.0643,-0.0608 0.0937,-0.0937 0.0322,-0.0193 0.0635,-0.0402 0.0937,-0.0625 3.7e-4,-3.6e-4 0.21851,-0.28079 0.21875,-0.28125 5e-5,-9e-5 -0.007,-0.0447 0,-0.0625 0.001,-0.003 0.03,0.003 0.0312,0 0.0391,-0.0521 0.051,-0.0518 0.0937,-0.125 0.13699,-0.23476 0.16684,-0.37191 0.15625,-0.34375 0.0368,-0.0915 0.0185,-0.11251 0.0312,-0.15625 0.0106,-0.0102 0.021,-0.0206 0.0312,-0.0312 0.06,-0.22398 0.0881,-0.51689 0.0625,-0.78125 -0.0136,-0.20363 -0.0589,-0.29765 -0.0625,-0.3125 1.4e-4,-0.0104 1.4e-4,-0.0208 0,-0.0312 0.026,0.097 0.0153,0.016 -0.0937,-0.25 -0.0525,-0.13039 -0.0899,-0.21936 -0.125,-0.28125 -0.0524,-0.0897 -0.13346,-0.26235 -0.34375,-0.46875 L 371.75,509.3125 c -0.45645,-0.48671 -1.08509,-0.71163 -1.75,-0.65625 z"
- style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none" />
- <path
- inkscape:connector-curvature="0"
- sodipodi:nodetypes="cccscccsssssssscccsccc"
- id="path18063"
- d="m 366.65625,515.40625 4.625,0 -1.8125,1.8125 c -0.39695,0.39695 -0.39695,1.04055 0,1.4375 0.39695,0.39695 1.04055,0.39695 1.4375,0 l 3.4375,-3.46875 0.0937,-0.0625 c 0.006,-0.006 -0.006,-0.0253 0,-0.0312 0.0554,-0.0572 0.1151,-0.11699 0.15625,-0.1875 0.0286,-0.0491 0.0429,-0.10409 0.0625,-0.15625 0.0124,-0.0307 0.0221,-0.0622 0.0312,-0.0937 0.0311,-0.1161 0.0427,-0.22493 0.0312,-0.34375 -0.004,-0.0578 -0.0174,-0.0996 -0.0312,-0.15625 -0.0109,-0.0407 -0.0151,-0.0857 -0.0312,-0.125 -0.0164,-0.0408 -0.0405,-0.0862 -0.0625,-0.125 -0.0455,-0.0779 -0.0936,-0.15726 -0.15625,-0.21875 l -3.53125,-3.53125 c -0.20891,-0.22276 -0.50816,-0.33785 -0.8125,-0.3125 -0.39478,0.0269 -0.73977,0.28438 -0.875,0.65625 -0.13524,0.37187 -0.0353,0.78826 0.25,1.0625 l 1.875,1.84375 -4.6875,0"
- style="fill:#bebeaa;fill-opacity:1;fill-rule:evenodd;stroke:none" />
- </g>
- </marker>
- <clipPath
- id="clipPath16-7-3"
- clipPathUnits="userSpaceOnUse">
- <path
- inkscape:connector-curvature="0"
- id="path18-6-7"
- d="M 0,512 512,512 512,0 0,0 0,512 z" />
- </clipPath>
- <clipPath
- id="clipPath16-1"
- clipPathUnits="userSpaceOnUse">
- <path
- inkscape:connector-curvature="0"
- id="path18-69"
- d="M 0,512 512,512 512,0 0,0 0,512 z" />
- </clipPath>
- <marker
- id="marker44971-1"
- orient="auto"
- markerHeight="5.7450781"
- markerWidth="4.6297355">
- <g
- id="g18059-4"
- transform="matrix(0.5,0,0,0.5,-185.64299,-257.19655)">
- <path
- inkscape:connector-curvature="0"
- sodipodi:nodetypes="csccccccsccssssssssssssssccc"
- id="path18061-5"
- d="m 370,508.65625 c -0.86067,0.0587 -1.60944,0.6213 -1.90625,1.4375 -0.26976,0.74176 -0.0577,1.53493 0.4375,2.125 l -1.75,0 c -0.0424,-0.005 -0.0824,0.002 -0.125,0 l 0,4.375 0.125,0 1.75,0 c -0.67896,0.8597 -0.69701,2.11549 0.0937,2.90625 0.85091,0.85091 2.27409,0.85091 3.125,0 l 3.34375,-3.375 c 0.033,-0.0295 0.0643,-0.0608 0.0937,-0.0937 0.0322,-0.0193 0.0635,-0.0402 0.0937,-0.0625 3.7e-4,-3.6e-4 0.21851,-0.28079 0.21875,-0.28125 5e-5,-9e-5 -0.007,-0.0447 0,-0.0625 0.001,-0.003 0.03,0.003 0.0312,0 0.0391,-0.0521 0.051,-0.0518 0.0937,-0.125 0.13699,-0.23476 0.16684,-0.37191 0.15625,-0.34375 0.0368,-0.0915 0.0185,-0.11251 0.0312,-0.15625 0.0106,-0.0102 0.021,-0.0206 0.0312,-0.0312 0.06,-0.22398 0.0881,-0.51689 0.0625,-0.78125 -0.0136,-0.20363 -0.0589,-0.29765 -0.0625,-0.3125 1.4e-4,-0.0104 1.4e-4,-0.0208 0,-0.0312 0.026,0.097 0.0153,0.016 -0.0937,-0.25 -0.0525,-0.13039 -0.0899,-0.21936 -0.125,-0.28125 -0.0524,-0.0897 -0.13346,-0.26235 -0.34375,-0.46875 L 371.75,509.3125 c -0.45645,-0.48671 -1.08509,-0.71163 -1.75,-0.65625 z"
- style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none" />
- <path
- inkscape:connector-curvature="0"
- sodipodi:nodetypes="cccscccsssssssscccsccc"
- id="path18063-9"
- d="m 366.65625,515.40625 4.625,0 -1.8125,1.8125 c -0.39695,0.39695 -0.39695,1.04055 0,1.4375 0.39695,0.39695 1.04055,0.39695 1.4375,0 l 3.4375,-3.46875 0.0937,-0.0625 c 0.006,-0.006 -0.006,-0.0253 0,-0.0312 0.0554,-0.0572 0.1151,-0.11699 0.15625,-0.1875 0.0286,-0.0491 0.0429,-0.10409 0.0625,-0.15625 0.0124,-0.0307 0.0221,-0.0622 0.0312,-0.0937 0.0311,-0.1161 0.0427,-0.22493 0.0312,-0.34375 -0.004,-0.0578 -0.0174,-0.0996 -0.0312,-0.15625 -0.0109,-0.0407 -0.0151,-0.0857 -0.0312,-0.125 -0.0164,-0.0408 -0.0405,-0.0862 -0.0625,-0.125 -0.0455,-0.0779 -0.0936,-0.15726 -0.15625,-0.21875 l -3.53125,-3.53125 c -0.20891,-0.22276 -0.50816,-0.33785 -0.8125,-0.3125 -0.39478,0.0269 -0.73977,0.28438 -0.875,0.65625 -0.13524,0.37187 -0.0353,0.78826 0.25,1.0625 l 1.875,1.84375 -4.6875,0"
- style="fill:#bebeaa;fill-opacity:1;fill-rule:evenodd;stroke:none" />
- </g>
- </marker>
- </defs>
- <sodipodi:namedview
- id="base"
- pagecolor="#ffffff"
- bordercolor="#666666"
- borderopacity="1.0"
- inkscape:pageopacity="0.0"
- inkscape:pageshadow="2"
- inkscape:zoom="1.6499158"
- inkscape:cx="450.53954"
- inkscape:cy="745.06706"
- inkscape:document-units="px"
- inkscape:current-layer="layer1"
- gridtolerance="10000"
- inkscape:window-width="1920"
- inkscape:window-height="1060"
- inkscape:window-x="-2"
- inkscape:window-y="-3"
- showgrid="true"
- inkscape:window-maximized="1"
- inkscape:snap-bbox="true">
- <inkscape:grid
- type="xygrid"
- id="grid9369"
- empspacing="4"
- visible="true"
- enabled="true"
- snapvisiblegridlinesonly="true"
- spacingx="10px"
- spacingy="10px" />
- </sodipodi:namedview>
- <metadata
- id="metadata1906">
- <rdf:RDF>
- <cc:Work
- rdf:about="">
- <dc:format>image/svg+xml</dc:format>
- <dc:type
- rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
- </cc:Work>
- </rdf:RDF>
- </metadata>
- <g
- inkscape:label="Taso 1"
- inkscape:groupmode="layer"
- id="layer1"
- style="opacity:1">
- <rect
- style="color:#000000;fill:#efefe9;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3.54330707;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
- id="rect18450-0-9"
- width="700"
- height="40"
- x="10"
- y="472.36218"
- ry="3.7880721" />
- <rect
- style="color:#000000;fill:#efefe9;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3.54330707;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
- id="rect18450-6"
- width="700"
- height="40"
- x="10"
- y="152.36218"
- ry="3.7880721" />
- <rect
- style="color:#000000;fill:#efefe9;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3.54330707;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
- id="rect18450-9"
- width="700"
- height="40"
- x="10"
- y="232.36218"
- ry="3.7880721" />
- <rect
- style="color:#000000;fill:#efefe9;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3.54330707;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
- id="rect18450-3"
- width="700"
- height="40"
- x="10"
- y="312.36218"
- ry="3.7880721" />
- <rect
- style="color:#000000;fill:#efefe9;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3.54330707;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
- id="rect18450-0"
- width="700"
- height="40"
- x="10"
- y="392.36218"
- ry="3.7880721" />
- <rect
- style="color:#000000;fill:#efefe9;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3.54330707;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
- id="rect18450"
- width="700"
- height="40"
- x="10"
- y="72.362183"
- ry="3.7880721" />
- <path
- style="fill:none;stroke:#bebeaa;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
- d="m 120,372.36218 0,39.99999 40,0"
- id="path2806-5-7-3-7"
- sodipodi:nodetypes="ccc"
- inkscape:connector-curvature="0" />
- <path
- style="fill:none;stroke:#bebeaa;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
- d="m 80,292.36218 40,0"
- id="path2806-0-2-6"
- sodipodi:nodetypes="cc"
- inkscape:connector-curvature="0" />
- <path
- style="fill:none;stroke:#bebeaa;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
- d="m 80,252.36218 40,0"
- id="path2806-0-2-8"
- sodipodi:nodetypes="cc"
- inkscape:connector-curvature="0" />
- <path
- style="fill:none;stroke:#bebeaa;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
- d="m 80,212.36218 0,240 40,0"
- id="path2806-5-7-34"
- sodipodi:nodetypes="ccc"
- inkscape:connector-curvature="0" />
- <path
- style="fill:none;stroke:#bebeaa;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
- d="m 40,92.362183 40,0"
- id="path2806-0-2"
- sodipodi:nodetypes="cc"
- inkscape:connector-curvature="0" />
- <flowRoot
- xml:space="preserve"
- id="flowRoot227292"
- style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch"
- transform="translate(14.607,151.77541)"><flowRegion
- id="flowRegion227294"><rect
- id="rect227296"
- width="134.49388"
- height="28.284271"
- x="135.36044"
- y="91.707115"
- style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch" /></flowRegion><flowPara
- id="flowPara227298">mytheme.scss</flowPara></flowRoot> <flowRoot
- xml:space="preserve"
- id="flowRoot227308"
- style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch"
- transform="translate(-26.655,110.84272)"><flowRegion
- id="flowRegion227310"><rect
- id="rect227312"
- width="120.20815"
- height="28.284271"
- x="135.36044"
- y="91.707115"
- style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch" /></flowRegion><flowPara
- id="flowPara227314">mytheme</flowPara></flowRoot> <flowRoot
- xml:space="preserve"
- id="flowRoot227316"
- style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch"
- transform="translate(13.149,272.14229)"><flowRegion
- id="flowRegion227318"><rect
- id="rect227320"
- width="120.20815"
- height="28.284271"
- x="135.36044"
- y="91.707115"
- style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch" /></flowRegion><flowPara
- id="flowPara227322">img</flowPara></flowRoot> <flowRoot
- xml:space="preserve"
- id="flowRoot233610"
- style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch"
- transform="translate(54.607,311.65513)"><flowRegion
- id="flowRegion233612"><rect
- id="rect233614"
- width="154.63956"
- height="25.655067"
- x="135.36044"
- y="91.707115"
- style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch" /></flowRegion><flowPara
- id="flowPara233616">myimage.png</flowPara></flowRoot> <flowRoot
- xml:space="preserve"
- id="flowRoot233630"
- style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch"
- transform="translate(12.969,351.77541)"><flowRegion
- id="flowRegion233632"><rect
- id="rect233634"
- width="120.20815"
- height="28.284271"
- x="135.36044"
- y="91.707115"
- style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch" /></flowRegion><flowPara
- id="flowPara233636">layouts</flowPara></flowRoot> <flowRoot
- xml:space="preserve"
- id="flowRoot233694"
- style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch"
- transform="translate(54.607,391.41827)"><flowRegion
- id="flowRegion233696"><rect
- id="rect233698"
- width="154.63956"
- height="25.655067"
- x="135.36044"
- y="91.707115"
- style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch" /></flowRegion><flowPara
- id="flowPara233700">mylayout.html</flowPara></flowRoot> <flowRoot
- xml:space="preserve"
- id="flowRoot233754"
- style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch"
- transform="translate(-65.519,-46.43028)"><flowRegion
- id="flowRegion233756"><rect
- id="rect233758"
- width="314.63956"
- height="30.655067"
- x="135.36044"
- y="91.707115"
- style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch" /></flowRegion><flowPara
- id="flowPara233760">VAADIN/themes</flowPara></flowRoot> <flowRoot
- xml:space="preserve"
- id="flowRoot2664"
- style="font-size:20px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"
- transform="translate(204.625,111.60034)"><flowRegion
- id="flowRegion2666"><rect
- id="rect2668"
- width="254.63956"
- height="25.655067"
- x="135.36044"
- y="91.707115"
- style="font-size:20px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light" /></flowRegion><flowPara
- id="flowPara2670">- a custom theme</flowPara></flowRoot> <flowRoot
- xml:space="preserve"
- id="flowRoot2672"
- style="font-size:20px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"
- transform="translate(204.625,150.4651)"><flowRegion
- id="flowRegion2674"><rect
- id="rect2676"
- width="327.4967"
- height="24.226496"
- x="135.36044"
- y="91.707115"
- style="font-size:20px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light" /></flowRegion><flowPara
- id="flowPara2678">- actual Sass style sheet</flowPara></flowRoot> <flowRoot
- xml:space="preserve"
- id="flowRoot2680"
- style="font-size:20px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"
- transform="translate(204.625,270.0851)"><flowRegion
- id="flowRegion2682"><rect
- id="rect2684"
- width="254.63956"
- height="25.655067"
- x="135.36044"
- y="91.707115"
- style="font-size:20px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light" /></flowRegion><flowPara
- id="flowPara2686">- image resources</flowPara></flowRoot> <flowRoot
- xml:space="preserve"
- id="flowRoot2688"
- style="font-size:20px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"
- transform="translate(204.625,351.09526)"><flowRegion
- id="flowRegion2690"><rect
- id="rect2692"
- width="254.63956"
- height="25.655067"
- x="135.36044"
- y="91.707115"
- style="font-size:20px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light" /></flowRegion><flowPara
- id="flowPara2694">- custom layouts</flowPara></flowRoot> <flowRoot
- xml:space="preserve"
- id="flowRoot2696"
- style="font-size:20px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"
- transform="translate(204.625,390.0851)"><flowRegion
- id="flowRegion2698"><rect
- id="rect2700"
- width="254.63956"
- height="25.655067"
- x="135.36044"
- y="91.707115"
- style="font-size:20px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light" /></flowRegion><flowPara
- id="flowPara2702">- layout template</flowPara></flowRoot> <flowRoot
- xml:space="preserve"
- id="flowRoot2834"
- style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch"
- transform="translate(13.671,33.440863)"><flowRegion
- id="flowRegion2836"><rect
- id="rect2838"
- width="161.51456"
- height="28.427111"
- x="135.36044"
- y="91.707115"
- style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch" /></flowRegion><flowPara
- id="flowPara2840">valo.scss</flowPara></flowRoot> <flowRoot
- xml:space="preserve"
- id="flowRoot2842"
- style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch"
- transform="translate(-26.329,-6.559138)"><flowRegion
- id="flowRegion2844"><rect
- id="rect2846"
- width="120.20815"
- height="28.284271"
- x="135.36044"
- y="91.707115"
- style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch" /></flowRegion><flowPara
- id="flowPara2848">valo</flowPara></flowRoot> <flowRoot
- xml:space="preserve"
- id="flowRoot2850"
- style="font-size:20px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"
- transform="translate(204.625,-9.9149007)"><flowRegion
- id="flowRegion2852"><rect
- id="rect2854"
- width="254.63956"
- height="25.655067"
- x="135.36044"
- y="91.707115"
- style="font-size:20px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light" /></flowRegion><flowPara
- id="flowPara2856">- a built-in theme</flowPara></flowRoot> <flowRoot
- xml:space="preserve"
- id="flowRoot2858"
- style="font-size:20px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"
- transform="translate(204.625,30.465099)"><flowRegion
- id="flowRegion2860"><rect
- id="rect2862"
- width="254.63956"
- height="25.655067"
- x="135.36044"
- y="91.707115"
- style="font-size:20px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light" /></flowRegion><flowPara
- id="flowPara2864">- theme Sass style sheet</flowPara></flowRoot> <g
- id="g10908"
- transform="translate(-35.714285,9.0968045)">
- <path
- transform="matrix(1.0999439,0,0,1,-24.007948,-85.924008)"
- d="m 165.66502,241.71477 c 0,1.39473 -1.01758,2.52538 -2.27284,2.52538 -1.25526,0 -2.27284,-1.13065 -2.27284,-2.52538 0,-1.39473 1.01758,-2.52538 2.27284,-2.52538 1.25526,0 2.27284,1.13065 2.27284,2.52538 z"
- sodipodi:ry="2.5253813"
- sodipodi:rx="2.2728431"
- sodipodi:cy="241.71477"
- sodipodi:cx="163.39218"
- id="path2886"
- style="fill:#000000;fill-opacity:1;stroke-width:1;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
- sodipodi:type="arc" />
- <path
- transform="matrix(1.0999439,0,0,1,-24.007948,-77.924008)"
- d="m 165.66502,241.71477 c 0,1.39473 -1.01758,2.52538 -2.27284,2.52538 -1.25526,0 -2.27284,-1.13065 -2.27284,-2.52538 0,-1.39473 1.01758,-2.52538 2.27284,-2.52538 1.25526,0 2.27284,1.13065 2.27284,2.52538 z"
- sodipodi:ry="2.5253813"
- sodipodi:rx="2.2728431"
- sodipodi:cy="241.71477"
- sodipodi:cx="163.39218"
- id="path2888"
- style="fill:#000000;fill-opacity:1;stroke-width:1;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
- sodipodi:type="arc" />
- <path
- transform="matrix(1.0999439,0,0,1,-24.007948,-69.924008)"
- d="m 165.66502,241.71477 c 0,1.39473 -1.01758,2.52538 -2.27284,2.52538 -1.25526,0 -2.27284,-1.13065 -2.27284,-2.52538 0,-1.39473 1.01758,-2.52538 2.27284,-2.52538 1.25526,0 2.27284,1.13065 2.27284,2.52538 z"
- sodipodi:ry="2.5253813"
- sodipodi:rx="2.2728431"
- sodipodi:cy="241.71477"
- sodipodi:cx="163.39218"
- id="path2890"
- style="fill:#000000;fill-opacity:1;stroke-width:1;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
- sodipodi:type="arc" />
- </g>
- <path
- style="fill:none;stroke:#bebeaa;stroke-width:4;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:4, 4;stroke-dashoffset:0;marker-end:url(#marker44971)"
- d="m 280,242.36218 30,0 0,-110 -10,0"
- id="path2892"
- sodipodi:nodetypes="cccc"
- inkscape:connector-curvature="0" />
- <flowRoot
- xml:space="preserve"
- id="flowRoot4061"
- style="font-size:16px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch"
- transform="translate(182.663,70.673465)"><flowRegion
- id="flowRegion4063"><rect
- id="rect4065"
- width="419.84824"
- height="29.678204"
- x="135.36044"
- y="91.707115"
- style="font-size:16px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch" /></flowRegion><flowPara
- id="flowPara4067">@import &quot;../valo/valo&quot;;</flowPara></flowRoot> <flowRoot
- xml:space="preserve"
- id="flowRoot227292-6"
- style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch"
- transform="translate(13.059,191.41827)"><flowRegion
- id="flowRegion227294-2"><rect
- id="rect227296-3"
- width="134.49388"
- height="28.284271"
- x="135.36044"
- y="91.707115"
- style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch" /></flowRegion><flowPara
- id="flowPara227298-4">styles.scss</flowPara></flowRoot> <flowRoot
- xml:space="preserve"
- id="flowRoot2672-3"
- style="font-size:20px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"
- transform="translate(204.625,190.4651)"><flowRegion
- id="flowRegion2674-8"><rect
- id="rect2676-9"
- width="327.4967"
- height="24.226496"
- x="135.36044"
- y="91.707115"
- style="font-size:20px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light" /></flowRegion><flowPara
- id="flowPara2678-8">- theme main Sass style sheet</flowPara></flowRoot> <path
- style="fill:none;stroke:#bebeaa;stroke-width:4;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:4,4;stroke-dashoffset:0;marker-end:url(#marker44971)"
- d="m 270,292.36218 40,0 0,-36.07143 -20,0.35715"
- id="path2892-3"
- sodipodi:nodetypes="cccc"
- inkscape:connector-curvature="0" />
- <flowRoot
- xml:space="preserve"
- id="flowRoot4061-1"
- style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch"
- transform="translate(182.663,166.65193)"><flowRegion
- id="flowRegion4063-4"><rect
- id="rect4065-2"
- width="382.49667"
- height="28.512213"
- x="135.36044"
- y="91.707115"
- style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch" /></flowRegion><flowPara
- id="flowPara4067-9">@import &quot;mytheme.scss&quot;;</flowPara></flowRoot> <g
- id="g9515"
- transform="translate(132.58904,217.84543)">
- <g
- id="g7747">
- <g
- transform="matrix(0.07998562,0,0,-0.07998562,6.9813187,215.10036)"
- inkscape:label="Picture"
- id="g10-5-8"
- style="fill:#ffffff">
- <g
- id="g12-4-6"
- style="fill:#ffffff">
- <g
- clip-path="url(#clipPath16-4-6)"
- id="g14-8-3"
- style="fill:#ffffff">
- <g
- transform="translate(433.8223,141.3848)"
- id="g20-83-8"
- style="fill:#ffffff">
- <path
- style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
- d="m -414.09375,-54.65625 c 0,113.520833 0,227.04167 0,340.5625 156.89583,0 313.79167,0 470.6875,0 0,-114.1875 0,-228.375 0,-342.5625 -156.89583,0 -313.79167,0 -470.6875,0 l 0,1 z"
- id="path22-5-2"
- inkscape:connector-curvature="0"
- sodipodi:nodetypes="scccccs" />
- </g>
- </g>
- </g>
- </g>
- </g>
- <g
- id="g10-5-6"
- inkscape:label="Picture"
- transform="matrix(0.07998562,0,0,-0.07998562,6.9813187,215.10036)">
- <g
- id="g12-4-9">
- <g
- id="g14-8-5"
- clip-path="url(#clipPath16-4-1)">
- <g
- id="g20-83-2"
- transform="translate(433.8223,141.3848)">
- <path
- inkscape:connector-curvature="0"
- d="m 0,0 -356.188,0 -0.015,228.033 354.928,0 0,-0.017 1.275,0 L 0,0 z m -396.082,-38.653 434.688,0 0,306.569 -434.688,0 0,-306.569 z m 309.26,178.483 c 16.061,0 29.073,13 29.073,29.059 0,16.04 -13.012,29.062 -29.073,29.062 -16.019,0 -29.038,-13.022 -29.038,-29.062 0,-16.059 13.019,-29.059 29.038,-29.059 m -100.514,-68.524 -85.603,91.047 -58.21,-107.66 0,-29.658 289.12,0 c -36.822,31.753 -114.476,99.682 -114.476,99.682 l -30.831,-53.411 z"
- style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
- id="path22-5-1" />
- </g>
- </g>
- </g>
- </g>
- </g>
- <path
- style="fill:none;stroke:#bebeaa;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
- d="m 40,52.362186 0,159.999994 40,0"
- id="path2806-5-7"
- sodipodi:nodetypes="ccc"
- inkscape:connector-curvature="0" />
- <g
- id="g3611"
- transform="translate(17.480984,-49.267494)">
- <g
- style="fill:#ffffff"
- id="g10-4-6"
- inkscape:label="Folder"
- transform="matrix(0.07998562,0,0,-0.07998562,1.9122928,122.28074)">
- <g
- style="fill:#ffffff"
- id="g12-1-3">
- <g
- style="fill:#ffffff"
- id="g14-3-3"
- clip-path="url(#clipPath16-5-7)">
- <g
- style="fill:#ffffff"
- id="g20-8-1"
- transform="translate(457.2109,384.8115)">
- <path
- inkscape:connector-curvature="0"
- id="path22-2-6"
- d="m -10.5,-331.25 c -131.67908,1.3418 -263.4169,-1.1568 -395.0625,1.46875 -18.88471,5.30331 -27.52917,27.22938 -24.73835,45.43731 -1.55601,77.91039 -6.95457,155.70331 -9.44915,233.56269 1.77368,10.078123 9.09422,18.689545 16.96875,24.3125 -7.92842,11.339555 -4.63436,26.46294945 -1.53125,38.90625 3.68504,11.473091 13.32222,21.527751 25.03125,23.90625 0.64926,16.281394 12.799,32.511879 29.125,35.84375 22.86963,4.535758 46.21236,-0.619376 69.28125,1.375 24.0007,0.11428 49.36546,3.030008 72.0903,-6.135877 9.90405,-6.591274 15.08127,-18.090353 17.75345,-29.301623 68.21593,-0.629281 136.557909,2.010461 204.6875,-1.625 25.807558,-4.763359 37.808461,-40.8363988 21.25,-60.8125 18.342476,-9.723258 25.076089,-33.322653 20.303985,-52.744757 -5.299272,-59.854233 -5.942784,-120.000983 -8.718706,-180.002273 -1.05619,-17.57576 -1.245293,-35.40606 -3.647779,-52.78422 C 17.916478,-323.16042 3.5572264,-331.96135 -10.5,-331.25 z"
- style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" />
- </g>
- </g>
- </g>
- </g>
- <g
- id="g10-4"
- inkscape:label="Folder"
- transform="matrix(0.07998562,0,0,-0.07998562,1.9122928,122.28074)">
- <g
- id="g12-1">
- <g
- id="g14-3"
- clip-path="url(#clipPath16-5)">
- <g
- id="g20-8"
- transform="translate(457.2109,384.8115)">
- <path
- inkscape:connector-curvature="0"
- d="m 0,0 c 0,8.98 -7.277,16.256 -16.258,16.256 l -205.648,0 c -6.429,0.161 -11.384,11.842 -11.384,16.31 l 0.003,1.903 c 0,9.546 -7.737,17.28 -17.28,17.28 l -109.476,0 c -9.544,0 -17.281,-7.734 -17.281,-17.28 l 0.004,-1.903 c 0,-4.5 -5.021,-16.322 -11.516,-16.322 l 0.154,0 C -397.525,16.087 -404.647,8.88 -404.647,0 l 0,-11.223 L 0,-11.223 0,0 z m 0,-42.313 0,0.316 -404.647,0 0,-0.327 c -7.956,-1.549 -13.959,-8.547 -13.959,-16.955 0,0 5.683,-86.463 6.726,-117.611 1.045,-31.147 3.844,-114.727 3.844,-114.727 0,-9.544 1.973,-17.281 11.514,-17.281 l 388.458,0 c 9.543,0 11.513,7.737 11.513,17.281 0,0 2.804,83.58 3.845,114.727 1.044,31.148 6.727,117.611 6.727,117.611 0,8.432 -6.035,15.441 -14.021,16.966"
- style="fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none"
- id="path22-2" />
- </g>
- </g>
- </g>
- </g>
- </g>
- <use
- x="0"
- y="0"
- xlink:href="#g3611"
- id="use10870"
- transform="translate(40.523025,159.91333)"
- width="744.09448"
- height="1052.3622" />
- <path
- style="fill:none;stroke:#bebeaa;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
- d="m 80,92.362183 0,39.999987 40,0"
- id="path2806-5-7-3"
- sodipodi:nodetypes="ccc"
- inkscape:connector-curvature="0" />
- <g
- id="g5070"
- transform="translate(102.99732,28.451556)">
- <g
- style="fill:#ffffff"
- id="g10-3"
- inkscape:label="Document"
- transform="matrix(0.07998562,0,0,-0.07998562,-3.457336,124.5086)">
- <g
- style="fill:#ffffff"
- id="g12-5">
- <g
- style="fill:#ffffff"
- id="g14-37"
- clip-path="url(#clipPath16-7)">
- <g
- style="fill:#ffffff"
- id="g20-5"
- transform="translate(130.7402,72.7832)">
- <path
- sodipodi:nodetypes="sccccccs"
- inkscape:connector-curvature="0"
- id="path22-1"
- d="m -45.03125,-43.03125 c 0,151.5625 0,303.125 0,454.6875 75.90625,0 151.8125,0 227.71875,0 36.68936,-36.8322 73.34869,-73.80705 110.34375,-110.21875 0,-115.48958 0,-230.979167 0,-346.46875 -112.6875,0 -225.375,0 -338.0625,0 l 0,1 z"
- style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" />
- </g>
- </g>
- </g>
- </g>
- <g
- id="g10"
- inkscape:label="Document"
- transform="matrix(0.07998562,0,0,-0.07998562,-3.454656,124.51136)">
- <g
- id="g12">
- <g
- id="g14"
- clip-path="url(#clipPath16)">
- <g
- id="g20"
- transform="translate(130.7402,72.7832)">
- <path
- inkscape:connector-curvature="0"
- d="m 0,0 0,366.626 141.613,0 c 37.201,0 19.275,-88.18 19.275,-88.18 0,0 86,20.901 87.104,-18.534 L 247.992,0 0,0 z m 265.701,300.338 -83.997,83.994 -7.331,7.333 -199.411,0 0,-416.701 298.071,0 0,318.039 -7.332,7.335 z"
- style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
- id="path22" />
- </g>
- </g>
- </g>
- </g>
- </g>
- <use
- x="0"
- y="0"
- xlink:href="#g3611"
- id="use10868"
- transform="translate(40.167297,39.622524)"
- width="744.09448"
- height="1052.3622" />
- <use
- x="0"
- y="0"
- xlink:href="#g5070"
- id="use10931"
- transform="translate(0.20270218,119.84969)"
- width="744.09448"
- height="1052.3622" />
- <use
- x="0"
- y="0"
- xlink:href="#g5070"
- id="use10933"
- transform="translate(-0.01158332,159.99253)"
- width="744.09448"
- height="1052.3622" />
- <path
- style="fill:none;stroke:#bebeaa;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
- d="m 80,372.36218 40,0"
- id="path2806-0-2-6-8"
- sodipodi:nodetypes="cc"
- inkscape:connector-curvature="0" />
- <use
- x="0"
- y="0"
- xlink:href="#g3611"
- id="use10980"
- transform="translate(80.017949,319.91333)"
- width="744.09448"
- height="1052.3622" />
- <path
- style="fill:none;stroke:#bebeaa;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
- d="m 80,332.36218 40,0"
- id="path2806-0-2-6-9"
- sodipodi:nodetypes="cc"
- inkscape:connector-curvature="0" />
- <flowRoot
- xml:space="preserve"
- id="flowRoot227292-6-5"
- style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch"
- transform="translate(13.059,231.41827)"><flowRegion
- id="flowRegion227294-2-8"><rect
- id="rect227296-3-2"
- width="134.49388"
- height="28.284271"
- x="135.36044"
- y="91.707115"
- style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch" /></flowRegion><flowPara
- id="flowPara227298-4-3">addons.scss</flowPara></flowRoot> <flowRoot
- xml:space="preserve"
- id="flowRoot2672-3-6"
- style="font-size:20px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"
- transform="translate(204.625,230.4651)"><flowRegion
- id="flowRegion2674-8-4"><rect
- id="rect2676-9-4"
- width="370.01456"
- height="20.189968"
- x="135.36044"
- y="91.707115"
- style="font-size:20px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light" /></flowRegion><flowPara
- id="flowPara2678-8-3">- autogenerated addon theme inclusions</flowPara></flowRoot> <use
- x="0"
- y="0"
- xlink:href="#g5070"
- id="use10933-7"
- transform="translate(-0.01158,199.99254)"
- width="744.09448"
- height="1052.3622" />
- <path
- style="fill:none;stroke:#bebeaa;stroke-width:4;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:4, 4;stroke-dashoffset:0;marker-end:url(#marker44971)"
- d="m 270,292.36218 40,0 0,40 -20,0"
- id="path2892-3-2"
- sodipodi:nodetypes="cccc"
- inkscape:connector-curvature="0" />
- <path
- style="fill:none;stroke:#bebeaa;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
- d="m 120,452.36218 0,39.99999 40,0"
- id="path2806-5-7-3-7-5"
- sodipodi:nodetypes="ccc"
- inkscape:connector-curvature="0" />
- <use
- x="0"
- y="0"
- xlink:href="#g3611"
- id="use10982"
- transform="translate(80.045224,399.60013)"
- width="744.09448"
- height="1052.3622" />
- <use
- x="0"
- y="0"
- xlink:href="#g5070"
- id="use10935"
- transform="translate(40.202703,359.49255)"
- width="744.09448"
- height="1052.3622" />
- </g>
-</svg>
diff --git a/documentation/themes/themes-compiling.asciidoc b/documentation/themes/themes-compiling.asciidoc
deleted file mode 100644
index 7c8501858a..0000000000
--- a/documentation/themes/themes-compiling.asciidoc
+++ /dev/null
@@ -1,223 +0,0 @@
----
-title: Compiling Sass Themes
-order: 4
-layout: page
----
-
-[[themes.compiling]]
-= Compiling Sass Themes
-
-Sass themes must be compiled to CSS understood by browsers. Compilation can be
-done with the Vaadin Sass Compiler, which you can run in Eclipse, Maven, or it
-can be run on-the-fly when the application is loaded in the browser. You can
-also use any other Sass compiler.
-
-[[themes.compiling.on-the-fly]]
-== Compiling On the Fly
-
-The easiest way to use Sass themes during theme development is to let the Vaadin
-servlet compile them on the run. In this case, the SCSS source files are placed
-in the theme folder. Compilation is done each time the [filename]#styles.css# is
-requested from the server.
-
-The on-the-fly compilation takes a bit time, so it is only available when the
-Vaadin servlet is in the development mode, as described in
-<<dummy/../../../framework/application/application-environment#application.environment.parameters,"Other
-Servlet Configuration Parameters">>. Also, it requires the theme compiler and
-all its dependencies to be in the class path of the servlet. At least for
-production, you must compile the theme to CSS, as described next.
-
-
-[[themes.compiling.eclipse]]
-== Compiling in Eclipse
-
-If using Eclipse and the Vaadin Plugin for Eclipse, its project wizard creates a
-Sass theme. It includes [menuchoice]#Compile Theme# command in the toolbar to
-compile the project theme to CSS. Another command compiles also the widget set.
-
-[[figure.themes.compiling.eclipse]]
-.Compiling Sass Theme
-image::img/eclipse-theme-compiler.png[]
-
-The [filename]#WebContent/VAADIN/mytheme/styles.scss# and any Sass sources
-included by it are compiled to [filename]#styles.css#.
-
-
-[[themes.compiling.maven]]
-== Compiling with Maven
-
-To compile the themes with Maven, you need to include the built-in themes as a
-dependency:
-
-
-[source, xml]
-----
- ...
- <dependencies>
- ...
- <dependency>
- <groupId>com.vaadin</groupId>
- <artifactId>vaadin-themes</artifactId>
- <version>${vaadin.version}</version>
- </dependency>
- </dependencies>
- ...
-----
-
-This is automatically included at least in the
-[literal]#++vaadin-archetype-application++# archetype for Vaadin applications.
-The actual theme compilation is most conveniently done by the Vaadin Maven
-Plugin with [literal]#++update-theme++# and [literal]#++compile-theme++# goals.
-
-
-[source, xml]
-----
- ...
- <plugin>
- <groupId>com.vaadin</groupId>
- <artifactId>vaadin-maven-plugin</artifactId>
- ...
- <executions>
- <execution>
- ...
- <goals>
- <goal>clean</goal>
- <goal>resources</goal>
- <goal>update-theme</goal>
- <goal>update-widgetset</goal>
- <goal>compile-theme</goal>
- <goal>compile</goal>
- </goals>
- </execution>
- </executions>
-----
-
-Once these are in place, the theme is compiled as part of relevant lifecycle
-phases, such as [literal]#++package++#.
-
-[subs="normal"]
-----
-[command]#mvn# [parameter]#package#
-----
-You can also compile just the theme with the [package]#compile-theme# goal:
-
-[subs="normal"]
-----
-[command]#mvn# [parameter]#vaadin:compile-theme#
-----
-
-ifdef::web[]
-[[themes.compiling.command-line]]
-== Compiling in Command-line
-
-You can compile Sass style sheets to CSS either with the Vaadin Sass compiler or
-the standard one. The [filename]#styles.css# of a custom theme should be the
-compilation target. When compiled before deployment, the source files do not
-need to be in the theme folder.
-
-You can run the Vaadin Sass compiler in a theme folder as follows:
-
-[subs="normal"]
-----
-[command]#java# [parameter]#-cp# [replaceable]#'../../../WEB-INF/lib/*'# com.vaadin.sass.SassCompiler styles.scss styles.css
-----
-The [parameter]#-cp# parameter should point to the class path where the Vaadin
-Sass Compiler and theme JARs are located. In the above example, they are assumed
-to be located in the [filename]#WEB-INF/lib# folder of the web application. If
-you have loaded the Vaadin libraries using Ivy, as is the case with projects
-created with the Vaadin Plugin for Eclipse, the Vaadin libraries are stored in
-Ivy's local repository. Its folder hierarchy is somewhat scattered, so we
-recommend that you retrieve the libraries to a single folder. We recommend using
-an Ant script as is described next.
-
-endif::web[]
-
-[[themes.compiling.ant]]
-== Compiling with Ant
-
-With Apache Ant, you can easily resolve the dependencies with Ivy and compile
-the theme with the Theme Compiler included in Vaadin as follows. This build step
-can be conveniently included in a WAR build script.
-
-Start with the following configuration:
-
-
-[source, xml]
-----
-<project xmlns:ivy="antlib:org.apache.ivy.ant"
- name="My Project" basedir="../"
- default="package-war">
-
- <target name="configure">
- <!-- Where project source files are located -->
- <property name="src-location" value="src" />
-
- ... other project build definitions ...
-
- <!-- Name of the theme -->
- <property name="theme" value="book-examples"/>
-
- <!-- Compilation result directory -->
- <property name="result" value="build/result"/>
- </target>
-
- <!-- Initialize build -->
- <target name="init" depends="configure">
- <!-- Construct and check classpath -->
- <path id="compile.classpath">
- <!-- Source code to be compiled -->
- <pathelement path="${src-location}" />
-
- <!-- Vaadin libraries and dependencies -->
- <fileset dir="${result}/lib">
- <include name="*.jar"/>
- </fileset>
- </path>
-
- <mkdir dir="${result}"/>
- </target>
-----
-
-You should first resolve all Vaadin libraries to a single directory, which you
-can use for deployment, but also for theme compilation.
-
-
-----
- <target name="resolve" depends="init">
- <ivy:retrieve
- pattern="${result}/lib/[module]-[type]-[artifact]-[revision].[ext]"/>
- </target>
-----
-
-Then, you can compile the theme as follows:
-
-
-----
- <!-- Compile theme -->
- <target name="compile-theme"
- depends="init, resolve">
- <delete dir="${result}/VAADIN/themes/${theme}"/>
- <mkdir dir="${result}/VAADIN/themes/${theme}"/>
-
- <java classname="com.vaadin.sass.SassCompiler"
- fork="true">
- <classpath>
- <path refid="compile.classpath"/>
- </classpath>
- <arg value="WebContent/VAADIN/themes/${theme}/styles.scss"/>
- <arg value="${result}/VAADIN/themes/${theme}/styles.css"/>
- </java>
-
- <!-- Copy theme resources -->
- <copy todir="${result}/VAADIN/themes/${theme}">
- <fileset dir="WebContent/VAADIN/themes/${theme}">
- <exclude name="**/*.scss"/>
- </fileset>
- </copy>
- </target>
-</project>
-----
-
-
-
-
diff --git a/documentation/themes/themes-creating.asciidoc b/documentation/themes/themes-creating.asciidoc
deleted file mode 100644
index dcd2c5034a..0000000000
--- a/documentation/themes/themes-creating.asciidoc
+++ /dev/null
@@ -1,283 +0,0 @@
----
-title: Creating and Using Themes
-order: 5
-layout: page
----
-
-[[themes.creating]]
-= Creating and Using Themes
-
-Custom themes are placed in the [filename]#VAADIN/themes# folder of the web
-application, in an Eclipse project under the [filename]#WebContent# folder or
-[filename]#src/main/webapp# in Maven projects, as was illustrated in
-<<dummy/../../../framework/themes/themes-overview#figure.themes.theme-contents,"Contents
-of a Theme">>. This location is fixed. You need to have a theme folder for each
-theme you use in your application, although applications rarely need more than a
-single theme.
-
-[[themes.creating.sass]]
-== Sass Themes
-
-You can use Sass themes in Vaadin in two ways, either by compiling them to CSS
-by yourself or by letting the Vaadin servlet compile them for you on-the-fly
-when the theme CSS is requested by the browser, as described in
-<<dummy/../../../framework/themes/themes-compiling#themes.compiling,"Compiling
-Sass Themes">>.
-
-To define a Sass theme with the name mytheme, you must place a file with name
-[filename]#styles.scss# in the theme folder [filename]#VAADIN/themes/mytheme#.
-If no [filename]#styles.css# exists in the folder, the Sass file is compiled
-on-the-fly when the theme is requested by a browser.
-
-We recommend that you organize the theme in at least two SCSS files so that you
-import the actual theme from a Sass file that is named more uniquely than the
-[filename]#styles.scss#, to make it distinquishable in the editor. This
-organization is how the Vaadin Plugin for Eclipse creates a new theme.
-
-If you use Vaadin add-ons that contain themes, Vaadin Plugin for Eclipse and
-Maven automatically add them to the [filename]#addons.scss# file.
-
-[[themes.creating.sass.scss]]
-=== Theme SCSS
-
-We recommend that the rules in a theme should be prefixed with a selector for
-the theme name. You can do the prefixing in Sass by enclosing the rules in a
-nested rule with a selector for the theme name.
-
-Themes are defined as Sass mixins, so after you import the mixin definitions,
-you can [literal]#++@include++# them in the theme rule as follows:
-
-
-[source, css]
-----
-@import "addons.scss";
-@import "mytheme.scss";
-
-.mytheme {
- @include addons;
- @include mytheme;
-}
-----
-
-However, this is mainly necessary if you use the UI in portlets, each of which
-can have its own theme, or in the special circumstance that the theme has rules
-that use empty parent selector [literal]#++&++# to refer to the theme name.
-
-Otherwise, you can safely leave the nested theme selector out as follows:
-
-
-[source, css]
-----
-@import "addons.scss";
-@import "mytheme.scss";
-
-@include addons;
-@include mytheme;
-----
-
-The actual theme should be defined as follows, as a mixin that includes the base
-theme.
-
-
-[source, css]
-----
-@import "../valo/valo.scss";
-
-@mixin mytheme {
- @include valo;
-
- /* An actual theme rule */
- .v-button {
- color: blue;
- }
-}
-
-----
-
-
-[[themes.creating.sass.addons]]
-=== Add-on Themes
-
-Some Vaadin add-ons include Sass styles that need to be compiled into the theme.
-These are managed in the [filename]#addons.scss# file in a theme, included from
-the [filename]#styles.scss#. The [filename]#addons.scss# file is automatically
-generated by the Vaadin Plugin for Eclipse or Maven.
-
-[subs="normal"]
-----
-/* This file is automatically managed and will be
- overwritten from time to time. */
-/* Do not manually edit this file. */
-
-**/++*++ Provided by vaadin-spreadsheet-1.0.0.beta1.jar ++*++/ @import "../../../VAADIN/addons/spreadsheet/spreadsheet.scss";**
-
-/* Import and include this mixin into your project
- theme to include the addon themes */
-@mixin addons {
- **@include spreadsheet;**
-}
-----
-
-
-[[themes.creating.css]]
-== Plain Old CSS Themes
-
-In addition to Sass themes, you can create plain old CSS themes. CSS theme are
-more restricted than Sass styles - you can't parameterize CSS themes in any way,
-unlike you can Valo, for example. Further, an application can only have one CSS
-theme while you can have multiple Sass themes.
-
-A CSS theme is defined in a [filename]#styles.css# file in the
-[filename]#VAADIN/themes/mytheme# folder. You need to import the
-[filename]#legacy-styles.css# of the built-in theme as follows:
-
-
-----
-@import "../reindeer/legacy-styles.css";
-
-.v-app {
- background: yellow;
-}
-----
-
-
-[[themes.creating.standard-components]]
-== Styling Standard Components
-
-Each user interface component in Vaadin has a CSS style class that you can use
-to control the appearance of the component. Many components have additional
-sub-elements that also allow styling. You can add context-specific stylenames
-with [methodname]#addStyleName()#. Notice that [methodname]#getStyleName()#
-returns only the custom stylenames, not the built-in stylenames for the
-component.
-
-Please see the section on each component for a description of its styles. Most
-of the stylenames are determined in the client-side widget of each component.
-The easiest way to find out the styles of the elements is to use a HTML
-inspector such as
-FireBug.////
-TODO reference to a Firebug section when
-available
-////
-
-Some client-side components or component styles can be shared by different
-server-side components. For example, [literal]#++v-textfield++# style is used
-for all text input boxes in components, in addition to [classname]#TextField#.
-
-
-[[themes.creating.builtin]]
-== Built-in Themes
-
-Vaadin currently includes the following built-in themes:
-
-* [literal]#++valo++#, the primary theme since Vaadin 7.3
-* [literal]#++reindeer++#, the primary theme in Vaadin 6 and 7
-* [literal]#++chameleon++#, an easily customizable theme
-* [literal]#++runo++#, the default theme in IT Mill Toolkit 5
-* [literal]#++liferay++#, for Liferay portlets
-
-In addition, there is the [literal]#++base++# theme, which should not be used
-directly, but is extended by the other built-in themes, except valo.
-
-The built-in themes are provided in the respective
-[filename]#VAADIN/themes/&lt;theme&gt;/styles.scss# stylesheets in the
-[filename]#vaadin-themes# JAR. Also the precompiled CSS files are included, in
-case you want to use the themes directly.
-
-Various constants related to the built-in themes are defined in the theme
-classes in [package]#com.vaadin.ui.themes# package. These are mostly special
-style names for specific components.
-
-
-----
-@Theme("runo")
-public class MyUI extends UI {
- @Override
- protected void init(VaadinRequest request) {
- ...
- Panel panel = new Panel("Regular Panel in the Runo Theme");
- panel.addComponent(new Button("Regular Runo Button"));
-
- // A button with the "small" style
- Button smallButton = new Button("Small Runo Button");
- smallButton.addStyleName(Runo.BUTTON_SMALL);
-
- Panel lightPanel = new Panel("Light Panel");
- lightPanel.addStyleName(Runo.PANEL_LIGHT);
- lightPanel.addComponent(
- new Label("With addStyleName(\"light\")"));
- ...
-----
-
-The example with the Runo theme is shown in
-<<figure.themes.creating.builtin.runo>>.
-
-[[figure.themes.creating.builtin.runo]]
-.Runo Theme
-image::img/builtin-runo.png[]
-
-The built-in themes come with a custom icon font, FontAwesome, which is used for
-icons in the theme, and which you can use as font icons, as described in
-<<dummy/../../../framework/themes/themes-fonticon#themes.fonticon,"Font
-Icons">>.
-
-ifdef::web[]
-
-[NOTE]
-.Serving Built-In Themes Statically
-====
-The built-in themes included in the Vaadin library JAR are served dynamically
-from the JAR by the servlet. Serving themes and widget sets statically by the
-web server is more efficient. To do so, you need to extract the
-[filename]#VAADIN/# directories from the JAR to the web content directory (
-[filename]#WebContent# in Eclipse or [filename]#src/main/webapp# in Maven
-projects).
-
-[subs="normal"]
-----
-[prompt]#$# [command]#cd# WebContent
-----
-[subs="normal"]
-----
-[prompt]#$# [command]#unzip# path-to/vaadin-server-7.x.x.jar 'VAADIN/*'
-----
-[subs="normal"]
-----
-[prompt]#$# [command]#unzip# path-to/vaadin-themes-7.x.x.jar 'VAADIN/*'
-----
-[subs="normal"]
-----
-[prompt]#$# [command]#unzip# path-to/vaadin-client-compiled-7.x.x.jar 'VAADIN/*'
-----
-You can also serve static content from a front-end caching server, which reduces
-the load of the application server. In portals, you install the themes globally
-in the portal in similar way, as described in
-<<dummy/../../../framework/portal/portal-liferay#portal.liferay.install,"Installing
-Vaadin Resources">>.
-
-Just make sure to update the static content when you upgrade to a newer version
-of Vaadin.
-
-====
-
-endif::web[]
-
-
-Creation of a default theme for custom GWT widgets is described in
-<<dummy/../../../framework/gwt/gwt-styling#gwt.styling,"Styling a Widget">>.
-
-
-[[themes.creating.addon]]
-== Add-on Themes
-
-You can find more themes as add-ons from the
-link:http://vaadin.com/directory[Vaadin Directory]. In addition, many component
-add-ons contain a theme for the components they provide.
-
-The add-on themes need to be included in the project theme. Vaadin Plugin for
-Eclipse and Maven automatically include them in the [filename]#addons.scss# file
-in the project theme folder. It should be included by the project theme.
-
-
-
-
diff --git a/documentation/themes/themes-css.asciidoc b/documentation/themes/themes-css.asciidoc
deleted file mode 100644
index 45229303dc..0000000000
--- a/documentation/themes/themes-css.asciidoc
+++ /dev/null
@@ -1,506 +0,0 @@
----
-title: Introduction to Cascading Style Sheets
-order: 2
-layout: page
----
-
-[[themes.css]]
-= Introduction to Cascading Style Sheets
-
-((("CSS", "introduction", id="term.themes.css", range="startofrange")))
-
-
-Cascading Style Sheets or CSS is the basic technique to separate the appearance
-of a web page from the content represented in HTML. In this section, we give an
-introduction to CSS and look how they are relevant to software development with
-Vaadin.
-
-As we can only give a short intruction in this book, we encourage you to refer
-to the rich literature on CSS and the many resources available in the web. You
-can find the authoratitative specifications of CSS standards from the
-link:http://www.w3.org/Style/CSS/[W3C
-website]
-ifdef::web[]
-and other literature, references, and tutorials from the
-link:http://www.dmoz.org/Computers/Data_Formats/Style_Sheets/CSS/[Open Directory
-Project page on CSS], as well as from other
-sources
-endif::web[]
-.
-
-[[themes.css.basics]]
-== Applying CSS to HTML
-
-Let us consider the following HTML document that contains various markup
-elements for formatting text. Vaadin UIs work in essentially similar documents,
-even though they use somewhat different elements to draw the user interface.
-
-[subs="normal"]
-----
-&lt;html&gt;
- &lt;head&gt;
- &lt;title&gt;My Page&lt;/title&gt;
- &lt;link rel="stylesheet" type="text/css"
- href="mystylesheet.css"/&gt;
- &lt;/head&gt;
- &lt;body&gt;
- **&lt;p&gt;**This is a paragraph**&lt;/p&gt;**
- **&lt;p&gt;**This is another paragraph**&lt;/p&gt;**
- &lt;table&gt;
- &lt;tr&gt;
- **&lt;td&gt;**This is a table cell**&lt;/td&gt;**
- **&lt;td&gt;**This is another table cell**&lt;/td&gt;**
- &lt;/tr&gt;
- &lt;/table&gt;
- &lt;/body&gt;
-&lt;/html&gt;
-----
-The HTML elements that will be styled later by matching CSS rules are emphasized
-above.
-
-The [literal]#++<link>++# element in the HTML header defines the used CSS
-stylesheet. The definition is automatically generated by Vaadin in the HTML page
-that loads the UI of the application. A stylesheet can also be embedded in the
-HTML document itself, as is done when optimizing their loading in Vaadin
-TouchKit, for example.
-
-
-[[themes.css.basics]]
-== Basic CSS Rules
-
-A stylesheet contains a set of __rules__ that can match the HTML elements in the
-page. Each rule consists of one or more __selectors__, separated with commas,
-and a __declaration block__ enclosed in curly braces. A declaration block
-contains a list of __property__ statements. Each property has a label and a
-value, separated with a colon. A property statement ends with a semicolon.
-
-Let us look at an example that matches certain elements in the simple HTML
-document given in the previous section:
-
-
-[source, css]
-----
-p, td {
- color: blue;
-}
-
-td {
- background: yellow;
- font-weight: bold;
-}
-----
-
-The [literal]#++p++# and [literal]#++td++# are element type selectors that match
-with [literal]#++<p>++# and [literal]#++<td>++# elements in HTML, respectively.
-The first rule matches with both elements, while the second matches only with
-[literal]#++<td>++# elements. Let us assume that you have saved the above style
-sheet with the name [filename]#mystylesheet.css# and consider the following HTML
-file located in the same folder.
-
-[[figure.themes.basic.1]]
-.Simple Styling by Element Type
-image::img/themes-css-match-1.png[]
-
-[[themes.css.basics.inheritance]]
-=== Style Inheritance in CSS
-
-CSS has __inheritance__ where contained elements inherit the properties of their
-parent elements. For example, let us change the above example and define it
-instead as follows:
-
-
-[source, css]
-----
-table {
- color: blue;
- background: yellow;
-}
-----
-
-All elements contained in the [literal]#++<table>++# element would have the same
-properties. For example, the text in the contained [literal]#++<td>++# elements
-would be in blue color.
-
-
-[[themes.css.basics.element-types]]
-=== HTML Element Types
-
-HTML has a number of element types, each of which accepts a specific set of
-properties. The [literal]#++<div>++# elements are generic elements that can be
-used to create almost any layout and formatting that can be created with a
-specific HTML element type. Vaadin uses [literal]#++<div>++# elements
-extensively to draw the UI, especially in layout components.
-
-((("Google Web Toolkit",
-"themeing")))
-Matching elements by their type as shown above is, however, rarely if ever used
-in style sheets for Vaadin applications. We used it above, because it is the
-normal way in regular HTML documents that use the various HTML elements for
-formatting text, but it is not applicable in Vaadin UIs that consist mostly of
-[literal]#++<div>++# elements. Instead, you need to match by element class, as
-described next.
-
-
-
-[[themes.css.matching-by-class]]
-== Matching by Element Class
-
-Matching HTML elements by the __class__ attribute is the most common form of
-matching in Vaadin stylesheets. It is also possible to match with the
-__identifier__ of a unique HTML element.
-
-The class of an HTML element is defined with the [parameter]#class# attribute as
-follows:
-
-[subs="normal"]
-----
-&lt;html&gt;
- &lt;body&gt;
- **&lt;p class="normal"&gt;**This is the first paragraph**&lt;/p&gt;**
-
- **&lt;p class="another"&gt;**This is the second paragraph**&lt;/p&gt;**
-
- &lt;table&gt;
- &lt;tr&gt;
- **&lt;td class="normal"&gt;**This is a table cell**&lt;/td&gt;**
- **&lt;td class="another"&gt;**This is another table cell**&lt;/td&gt;**
- &lt;/tr&gt;
- &lt;/table&gt;
- &lt;/body&gt;
-&lt;/html&gt;
-----
-The class attributes of HTML elements can be matched in CSS rules with a
-selector notation where the class name is written after a period following the
-element name. This gives us full control of matching elements by their type and
-class.
-
-
-[source, css]
-----
-p.normal {color: red;}
-p.another {color: blue;}
-td.normal {background: pink;}
-td.another {background: yellow;}
-----
-
-The page would look as shown below:
-
-.Matching HTML Element Type and Class
-image::img/themes-css-match-class-2.png[]
-
-We can also match solely by the class by using the universal selector
-[literal]#++*++# for the element name, for example [literal]#++*.normal++#. The
-universal selector can also be left out altogether so that we use just the class
-name following the period, for example [literal]#++.normal++#.
-
-
-[source, css]
-----
-.normal {
- color: red;
-}
-
-.another {
- blackground: yellow;
-}
-----
-
-In this case, the rule will match with all elements of the same class regardless
-of the element type. The result is shown in <<figure.themes.match.class>>. This
-example illustrates a technique to make style sheets compatible regardless of
-the exact HTML element used in drawing a component.
-
-[[figure.themes.match.class]]
-.Matching Only HTML Element Class
-image::img/themes-css-match-class-3.png[]
-
-To ensure future compatibility, we recommend that you use only matching based on
-the classes and __do not__ match for specific HTML element types in CSS rules,
-because Vaadin may change the exact HTML implementation how components are drawn
-in the future. For example, Vaadin earlier used [literal]#++<div>++# element to
-draw [classname]#Button# components, but later it was changed to use the
-special-purpose [literal]#++<button>++# element in HTML. Because of using the
-[literal]#++v-button++# style class in the CSS rules for the button, styling it
-has changed only very little.
-
-
-[[themes.css.matching-by-descendants]]
-== Matching by Descendant Relationship
-
-CSS allows matching HTML by their containment relationship. For example,
-consider the following HTML fragment:
-
-[subs="normal"]
-----
-&lt;body&gt;
- &lt;p class="mytext"&gt;Here is some text inside a
- paragraph element&lt;/p&gt;
- &lt;table class="**mytable**"&gt;
- &lt;tr&gt;
- &lt;td class="**mytext**"&gt;Here is text inside
- a table and inside a td element.&lt;/td&gt;
- &lt;/tr&gt;
- &lt;/table&gt;
-&lt;/body&gt;
-----
-Matching by the class name [literal]#++.mytext++# alone would match both the
-[literal]#++<p>++# and [literal]#++<td>++# elements. If we want to match only
-the table cell, we could use the following selector:
-
-
-[source, css]
-----
-.mytable .mytext {color: blue;}
-----
-
-To match, a class listed in a rule does not have to be an immediate descendant
-of the previous class, but just a descendant. For example, the selector "
-[literal]#++.v-panel .v-button++#" would match all elements with class
-[literal]#++.v-button++# somewhere inside an element with class
-[literal]#++.v-panel++#.
-
-
-[[themes.css.cascading]]
-== Importance of Cascading
-
-CSS or Cascading Stylesheets are, as the name implies, about __cascading__
-stylesheets, which means applying the stylesheet rules according to their
-origin, importance, scope, specifity, and order.
-
-For exact rules for cascading in CSS, see the section
-link:http://www.w3.org/TR/css3-cascade/#cascading[Cascading] in the CSS
-specification.
-
-[[themes.css.cascading.importance]]
-=== Importance
-
-Declarations in CSS rules can be made override declarations with otherwise
-higher priority by annotating them as [literal]#++!important++#. For example, an
-inline style setting made in the [literal]#++style++# attribute of an HTML
-element has a higher specificity than any rule in a CSS stylesheet.
-
-
-[source, css]
-----
-<div class="v-button" style="height: 20px;">...
-----
-
-You can override the higher specificity with the [literal]#++!important++#
-annotation as follows:
-
-
-[source, css]
-----
-.v-button {height: 30px !important;}
-----
-
-
-[[themes.css.cascading.specificity]]
-=== Specificity
-
-A rule that specifies an element with selectors more closely overrides ones that
-specify it less specifically. With respect to the element class selectors most
-commonly used in Vaadin themes, the specificity is determined by the number of
-class selectors in the selector.
-
-
-[source, css]
-----
-.v-button {}
-.v-verticallayout .v-button {}
-.v-app .v-verticallayout .v-button {}
-----
-
-In the above example, the last rule would have the highest specificity and would
-match.
-
-As noted earlier, style declarations given in the style attribute of a HTML
-element have higher specificity than declarations in a CSS rule, except if the
-[literal]#++!important++# annotation is given.
-
-See the CSS3 link:http://www.w3.org/TR/selectors/#specificity[selectors module
-specification] for details regarding how the specificity is computed.
-
-
-[[themes.css.cascading.order]]
-=== Order
-
-CSS rules given later have higher priority than ones given earlier. For example,
-in the following, the latter rule overrides the former and the color will be
-black:
-
-
-[source, css]
-----
-.v-button {color: white}
-.v-button {color: black}
-----
-
-As specificity has a higher cascading priority than order, you could make the
-first rule have higher priority by adding specificity as follows:
-
-
-[source, css]
-----
-.v-app .v-button {color: white}
-.v-button {color: black}
-----
-
-The order is important to notice in certain cases, because Vaadin does not
-guarantee the order in which CSS stylesheets are loaded in the browser, which
-can in fact be random and result in very unexpected behavior. This is not
-relevant for Sass stylesheets, which are compiled to a single stylesheet. For
-plain CSS stylesheets, such as add-on or TouchKit stylesheets, the order can be
-relevant.
-
-
-
-[[themes.css.hierarchy]]
-== Style Class Hierarchy of a Vaadin UI
-
-Let us give a real case in a Vaadin UI by considering a simple Vaadin UI with a
-label and a button inside a vertical layout:
-
-
-[source, java]
-----
-// UI has v-ui style class
-@Theme("mytheme")
-public class HelloWorld extends UI {
- @Override
- protected void init(VaadinRequest request) {
- // VerticalLayout has v-verticallayout style
- VerticalLayout content = new VerticalLayout();
- setContent(content);
-
- // Label has v-label style
- content.addComponent(new Label("Hello World!"));
-
- // Button has v-button style
- content.addComponent(new Button("Push Me!",
- new Button.ClickListener() {
- @Override
- public void buttonClick(ClickEvent event) {
- Notification.show("Pushed!");
- }
- }));
- }
-}
-----
-
-The UI will look by default as shown in <<figure.themes.css.hierarchy.initial>>.
-By using a HTML inspector such as Firebug, you can view the HTML tree and the
-element classes and applied styles for each element.
-
-[[figure.themes.css.hierarchy.initial]]
-.An Unthemed Vaadin UI
-image::img/example-ui-default.png[]
-
-Now, let us look at the HTML element class structure of the UI, as we can see it
-in the HTML inspector:
-
-[subs="normal"]
-----
-&lt;body class="**v-generated-body v-ff v-ff20 v-ff200 v-gecko v-lin**"
- scroll="auto"&gt;
- &lt;div id="bookexamplesvaadin7helloworld-447164942"
- class="**v-app mytheme**"&gt;
- &lt;div class="**v-ui v-scrollable**"
- tabindex="1" style="height: 100%; width: 100%;"&gt;
- &lt;div class="**v-loading-indicator first**"
- style="position: absolute; display: none;"&gt;&lt;/div&gt;
- &lt;div class="**v-verticallayout v-layout v-vertical v-widget v-has-width**"
- style="width: 100%;"&gt;
- &lt;div class="**v-slot**"&gt;
- &lt;div class="**v-label v-widget v-has-width**"
- style="width: 100%;"&gt;Hello World!&lt;/div&gt;
- &lt;/div&gt;
- &lt;div class="**v-slot**"&gt;
- &lt;div class="**v-button v-widget**"
- tabindex="0" role="button"&gt;
- &lt;span class="**v-button-wrap**"&gt;
- &lt;span class="**v-button-caption**"&gt;Push Me!&lt;/span&gt;
- &lt;/span&gt;
- &lt;/div&gt;
- &lt;/div&gt;
- &lt;/div&gt;
- &lt;/div&gt;
- &lt;/div&gt;
- ...
-&lt;body&gt;
-----
-Now, consider the following theme where we set the colors and margins of various
-elements. The theme is actually a Sass theme.
-
-
-[source, css]
-----
-@import "../valo/valo.scss";
-
-@mixin mytheme {
- @include valo;
-
- /* White background for the entire UI */
- .v-ui {
- background: white;
- }
-
- /* All labels have white text on black background */
- .v-label {
- background: black;
- color: white;
- font-size: 24pt;
- line-height: 24pt;
- padding: 5px;
- }
-
- /* All buttons have blue caption and some margin */
- .v-button {
- margin: 10px;
-
- /* A nested selector to increase specificity */
- .v-button-caption {
- color: blue;
- }
- }
-}
-----
-
-The look has changed as shown in <<figure.themes.css.hierarchy.themed>>.
-
-[[figure.themes.css.hierarchy.themed]]
-.Themed Vaadin UI
-image::img/example-ui-themed.png[]
-
-An element can have multiple classes separated with a space. With multiple
-classes, a CSS rule matches an element if any of the classes match. This feature
-is used in many Vaadin components to allow matching based on the state of the
-component. For example, when the mouse is over a [classname]#Link# component,
-[literal]#++over++# class is added to the component. Most of such styling is a
-feature of Google Web Toolkit.
-
-
-[[themes.css.compatibility]]
-== Notes on Compatibility
-
-((("CSS", "compatibility")))
-((("compatibility")))
-CSS is a standard continuously under development. It was first proposed in 1994.
-The specification of CSS is maintained by the CSS Working Group of World Wide
-Web Consortium (W3C). Versioned with backward-compatible "levels", CSS Level 1
-was published in 1996, Level 2 in 1998, and the ongoing development of CSS Level
-3 started in 1998. CSS3 is divided into a number of separate modules, each
-developed and progressing separately, and many of the modules are already Level
-4.
-
-While the support for CSS has been universal in all graphical web browsers since
-at least 1995, the support has been very incomplete at times and there still
-exists an unfortunate number of incompatibilities between browsers. While we
-have tried to take these incompatibilities into account in the built-in themes
-in Vaadin, you need to consider them while developing your own themes.
-Compatibility issues are detailed in various CSS handbooks.
-
-
-(((range="endofrange", startref="term.themes.css")))
-
-
diff --git a/documentation/themes/themes-eclipse.asciidoc b/documentation/themes/themes-eclipse.asciidoc
deleted file mode 100644
index bd35ce6fed..0000000000
--- a/documentation/themes/themes-eclipse.asciidoc
+++ /dev/null
@@ -1,75 +0,0 @@
----
-title: Creating a Theme in Eclipse
-order: 6
-layout: page
----
-
-[[themes.eclipse]]
-= Creating a Theme in Eclipse
-
-The Eclipse plugin automatically creates a theme stub for new Vaadin projects.
-It also includes a wizard for creating new custom themes. Do the following steps
-to create a new theme.
-
-. Select "File > New > Other..." in the main menu or right-click the
-[guilabel]#Project Explorer# and select "New > Other...". A window will open.
-
-. In the [guilabel]#Select a wizard# step, select the "Vaadin > Vaadin Theme"
-wizard.
-
-+
-image::img/eclipse-theme-new.png[]
-
-+
-Click [guibutton]#Next# to proceed to the next step.
-
-. In the [guilabel]#Create a new Vaadin theme# step, you have the following
-settings:
-
-[guilabel]#Project#(mandatory):: The project in which the theme should be created.
-
-[guilabel]#Theme name#(mandatory):: The theme name is used as the name of the theme folder and in a CSS tag
-(prefixed with " [literal]#++v-theme-++#"), so it must be a proper identifier.
-Only latin alphanumerics, underscore, and minus sign are allowed.
-
-[guilabel]#Modify application classes to use theme#(optional):: The setting allows the wizard to write a code statement that enables the theme
-in the constructor of the selected application (UI) class(es). If you need to
-control the theme with dynamic logic, you can leave the setting unchecked or
-change the generated line later.
-
-
-
-+
-image::img/eclipse-theme-settings.png[]
-
-+
-Click [guibutton]#Finish# to create the theme.
-
-
-The wizard creates the theme folder under the
-[filename]#WebContent/VAADIN/themes# folder and the actual style sheet as
-[filename]#mytheme.scss# and [filename]#styles.scss# files, as illustrated in
-<<figure.eclipse.theme.created>>.
-
-[[figure.eclipse.theme.created]]
-.Newly Created Theme
-image::img/eclipse-theme-created-annotated-hi.png[]
-
-The created theme extends a built-in base theme with an [literal]#++@import++#
-statement. See the explanation of theme inheritance in
-<<dummy/../../../framework/themes/themes-creating#themes.creating,"Creating and
-Using Themes">>. Notice that the [filename]#reindeer# theme is not located in
-the [filename]#widgetsets# folder, but in the Vaadin JAR. See
-<<dummy/../../../framework/themes/themes-creating#themes.creating.builtin,"Built-in
-Themes">> for information for serving the built-in themes.
-
-If you selected a UI class or classes in the [guilabel]#Modify application
-classes to use theme# in the theme wizard, the wizard will add the
-[literal]#++@Theme++# annotation to the UI class.
-
-If you later rename the theme in Eclipse, notice that changing the name of the
-folder will not automatically change the [literal]#++@Theme++# annotation. You
-need to change such references to theme names in the calls manually.
-
-
-
diff --git a/documentation/themes/themes-fonticon.asciidoc b/documentation/themes/themes-fonticon.asciidoc
deleted file mode 100644
index 624220fa05..0000000000
--- a/documentation/themes/themes-fonticon.asciidoc
+++ /dev/null
@@ -1,266 +0,0 @@
----
-title: Font Icons
-order: 8
-layout: page
----
-
-[[themes.fonticon]]
-= Font Icons
-
-Font icons are icons included in a font. Fonts have many advantages over bitmap
-images. Browsers are usually faster in rendering fonts than loading image files.
-Web fonts are vector graphics, so they are scalable. As font icons are text
-characters, you can define their color in CSS by the regular foreground color
-property.
-
-[[themes.fonticon.enabling]]
-== Loading Icon Fonts
-
-Vaadin currently comes with one custom icon font: FontAwesome. It is
-automatically enabled in the Valo theme. For other themes, you need to include
-it with the following line in your project theme, after importing the base
-theme:
-
-
-----
-@include fonticons;
-----
-
-If you use other icon fonts, as described in <<themes.fonticon.custom>>, and the
-font is not loaded by a base theme, you need to load it with a
-[literal]#++font++# mixin in Sass, as described in
-<<dummy/../../../framework/themes/themes-fonts#themes.fonts.loading,"Loading
-Local Fonts">>.
-
-
-[[themes.fonticon.using]]
-== Basic Use
-
-Font icons are resources of type [classname]#FontIcon#, which implements the
-[interfacename]#Resource# interface. You can use these special resources for
-component icons and such, but not as embedded images, for example.
-
-Each icon has a Unicode codepoint, by which you can use it. Vaadin includes an
-awesome icon font, [literal]#++FontAwesome++#, which comes with an enumeration
-of all the icons included in the font.
-
-Most typically, you set a component icon as follows:
-
-
-----
-TextField name = new TextField("Name");
-name.setIcon(FontAwesome.USER);
-layout.addComponent(name);
-
-// Button allows specifying icon resource in constructor
-Button ok = new Button("OK", FontAwesome.CHECK);
-layout.addComponent(ok);
-----
-See the http://demo.vaadin.com/book-examples-vaadin7/book#themes.fonticon.basic[on-line example, window="_blank"].
-
-The result is illustrated in <<figure.themes.fonticon.using>>, with the color
-styling described next.
-
-[[figure.themes.fonticon.using]]
-.Basic Use of Font Icons
-image::img/fonticons-basic.png[]
-
-[[themes.fonticon.using.css]]
-=== Styling the Icons
-
-As font icons are regular text, you can specify their color with the
-[literal]#++color++# attribute in CSS to specify the foreground text color. All
-HTML elements that display icons in Vaadin have the [literal]#++v-icon++# style
-name.
-
-
-----
-.v-icon {
- color: blue;
-}
-----
-
-If you use the font icon resources in other ways, such as in an
-[classname]#Image# component, the style name will be different.
-
-
-
-[[themes.fonticon.html]]
-== Using Font icons in HTML
-
-You can use font icons in HTML code, such as in a [classname]#Label#, by
-generating the HTML to display the icon with the [methodname]#getHtml()# method.
-
-
-----
-Label label = new Label("I " +
- FontAwesome.HEART.getHtml() + " Vaadin",
- ContentMode.HTML);
-label.addStyleName("redicon");
-layout.addComponent(label);
-----
-See the http://demo.vaadin.com/book-examples-vaadin7/book#themes.fonticon.html[on-line example, window="_blank"].
-
-The HTML code has the [literal]#++v-icon++# style, which you can modify in CSS:
-
-
-----
-.redicon .v-icon {
- color: red;
-}
-----
-See the http://demo.vaadin.com/book-examples-vaadin7/book#themes.fonticon.html[on-line example, window="_blank"].
-
-The result is illustrated in <<figure.themes.fonticon.html>>, with the color
-styling described next.
-
-[[figure.themes.fonticon.html]]
-.Using Font Icons in Label
-image::img/fonticons-html.png[]
-
-You could have set the font color in the label's HTML code as well, or for all
-icons in the UI.
-
-You can easily use font icons in HTML code in other ways as well. You just need
-to use the correct font family and then use the hex-formatted Unicode codepoint
-for the icon. See for example the implementation of the [methodname]#getHtml()#
-method in [classname]#FontAwesome#:
-
-
-----
-@Override
-public String getHtml() {
- return "<span class=\"v-icon\" style=\"font-family: " +
- getFontFamily() + ";\">&#x" +
- Integer.toHexString(codepoint) + ";</span>";
-}
-----
-See the http://demo.vaadin.com/book-examples-vaadin7/book#themes.fonticon.html[on-line example, window="_blank"].
-
-
-[[themes.fonticon.anywhere]]
-== Using Font Icons in Other Text
-
-You can include a font icon in any text by its Unicode codepoint, which you can
-get with the [methodname]#getCodePoint()# method. In such case, however, you
-need to use the same font for other text in the same string as well. The
-FontAwesome provided in Vaadin includes a basic character set.
-
-
-----
-TextField amount = new TextField("Amount (in " +
- new String(Character.toChars(
- FontAwesome.BTC.getCodepoint())) +
- ")");
-amount.addStyleName("awesomecaption");
-layout.addComponent(amount);
-----
-See the http://demo.vaadin.com/book-examples-vaadin7/book#themes.fonticon.intext[on-line example, window="_blank"].
-
-You need to set the font family in CSS.
-
-
-----
-.v-caption-awesomecaption .v-captiontext {
- font-family: FontAwesome;
-}
-----
-See the http://demo.vaadin.com/book-examples-vaadin7/book#themes.fonticon.intext[on-line example, window="_blank"].
-
-
-[[themes.fonticon.custom]]
-== Custom Font Icons
-
-You can easily use glyphs in existing fonts as icons, or create your own.
-
-[[themes.fonticon.custom.creating]]
-=== Creating New Icon Fonts With IcoMoon
-
-You are free to use any of the many ways to create icons and embed them into
-fonts. Here, we give basic instructions for using the
-link:http://icomoon.io/app/[IcoMoon] service, where you can pick icons from a
-large library of well-designed icons.
-
-Font Awesome is included in IcoMoon's selection of icon libraries. Note that the
-codepoints of the icons are not fixed, so the [classname]#FontAwesome# enum is
-not compatible with such custom icon fonts.
-
-After you have selected the icons that you want in your font, you can download
-them in a ZIP package. The package contains the icons in multiple formats,
-including WOFF, TTF, EOT, and SVG. Not all browsers support any one of them, so
-all are needed to support all the common browsers. Extract the [filename]#fonts#
-folder from the package to under your theme.
-
-See <<dummy/../../../framework/themes/themes-fonts#themes.fonts.loading,"Loading
-Local Fonts">> for instructions for loading a custom font.
-
-
-ifdef::web[]
-[[themes.fonticon.custom.implementing]]
-=== Implementing FontIcon
-
-You can define a font icon for any font available in the browser by implementing
-the [interfacename]#FontIcon# interface. The normal pattern for implementing it
-is to implement an enumeration for all the symbols available in the font. See
-the implementation of [classname]#FontAwesome# for more details.
-
-You need a FontIcon API for the icons. In the following, we define a font icon
-using a normal sans-serif font built-in in the browser.
-
-
-----
-// Font icon definition with a single symbol
-public enum MyFontIcon implements FontIcon {
- EURO(0x20AC);
-
- private int codepoint;
-
- MyFontIcon(int codepoint) {
- this.codepoint = codepoint;
- }
-
- @Override
- public String getMIMEType() {
- throw new UnsupportedOperationException(
- FontIcon.class.getSimpleName()
- + " should not be used where a MIME type is needed.");
- }
-
- @Override
- public String getFontFamily() {
- return "sans-serif";
- }
-
- @Override
- public int getCodepoint() {
- return codepoint;
- }
-
- @Override
- public String getHtml() {
- return "<span class=\"v-icon\" style=\"font-family: " +
- getFontFamily() + ";\">&#x" +
- Integer.toHexString(codepoint) + ";</span>";
- }
-}
-----
-See the http://demo.vaadin.com/book-examples-vaadin7/book#themes.fonticon.custom[on-line example, window="_blank"].
-
-Then you can use it as usual:
-
-
-----
-TextField name = new TextField("Amount");
-name.setIcon(MyFontIcon.EURO);
-layout.addComponent(name);
-----
-See the http://demo.vaadin.com/book-examples-vaadin7/book#themes.fonticon.custom[on-line example, window="_blank"].
-
-You could make the implementation a class as well, instead of an enumeration, to
-allow other ways to specify the icons.
-
-endif::web[]
-
-
-
-
diff --git a/documentation/themes/themes-fonts.asciidoc b/documentation/themes/themes-fonts.asciidoc
deleted file mode 100644
index 741fb00a72..0000000000
--- a/documentation/themes/themes-fonts.asciidoc
+++ /dev/null
@@ -1,85 +0,0 @@
----
-title: Custom Fonts
-order: 9
-layout: page
----
-
-[[themes.fonts]]
-= Custom Fonts
-
-In addition to using the built-in fonts of the browser and the web fonts
-included in the Vaadin themes, you can use custom web fonts.
-
-[[themes.fonts.loading]]
-== Loading Local Fonts
-
-You can load locally served web fonts with the [literal]#++font++# mixin as
-follows:
-
-
-----
-@include font(MyFontFamily,
- '../../mytheme/fonts/myfontfamily');
-----
-
-The statement must be given in the [filename]#styles.scss# file __outside__ the
-[literal]#++.mytheme {}++# block.
-
-The first parameter is the name of the font family, which is used to identify
-the font. If the font family name contains spaces, you need to use single or
-double quotes around the name.
-
-The second parameter is the base name of the font files without an extension,
-including a relative path. Notice that the path is relative to the base theme,
-where the mixin is defined, not the used theme. We recommend placing custom font
-files under a [filename]#fonts# folder in a theme.
-
-Not all browsers support any single font file format, so the base name is
-appended with [filename]#.ttf#, [filename]#.eot#, [filename]#.woff#, or
-[filename]#.svg# suffix for the font file suitable for a user's browser.
-
-
-[[themes.fonts.webfonts]]
-== Loading Web Fonts
-
-You can load externally served web fonts such as Google Fonts simply by
-specifying the loading stylesheet for the UI with the [classname]#@StyleSheet#
-annotation.
-
-For example, to load the "Cabin Sketch" font from Google Fonts:
-
-[subs="normal"]
-----
-@StyleSheet({"[replaceable]#http://fonts.googleapis.com/css?family=Cabin+Sketch#"})
-public class MyUI extends UI {
- ...
-----
-ifdef::web[]
-Note that such web fonts served from a domain different from the Vaadin
-application currently link:https://dev.vaadin.com/ticket/16249[do not work
-together with] responsive themes, as described in
-<<dummy/../../../framework/themes/themes-responsive#themes.responsive,"Responsive
-Themes">>. The problem occurs only in Firefox. A SecurityError is shown in the
-debug window.
-endif::web[]
-
-
-[[themes.fonts.using]]
-== Using Custom Fonts
-
-After loaded, you can use a custom font, or actually font family, by its name in
-CSS and otherwise.
-
-
-----
-.mystyle {
- font-family: MyFontFamily;
-}
-----
-
-Again, if the font family name contains spaces, you need to use single or double
-quotes around the name.
-
-
-
-
diff --git a/documentation/themes/themes-overview.asciidoc b/documentation/themes/themes-overview.asciidoc
deleted file mode 100644
index 05005ab83b..0000000000
--- a/documentation/themes/themes-overview.asciidoc
+++ /dev/null
@@ -1,77 +0,0 @@
----
-title: Overview
-order: 1
-layout: page
----
-
-[[themes.overview]]
-= Overview
-
-Vaadin separates the appearance of the user interface from its logic using
-__themes__. Themes can include Sass or CSS style sheets, custom HTML layouts,
-and any necessary graphics. Theme resources can also be accessed from
-application code as [classname]#ThemeResource# objects.
-
-Custom themes are placed under the [filename]#VAADIN/themes/# folder of the web
-application (under [filename]#WebContent# in Eclipse or
-[filename]#src/main/webapp# in Maven projects). This location is fixed -- the
-[filename]#VAADIN# folder contains static resources that are served by the
-Vaadin servlet. The servlet augments the files stored in the folder by resources
-found from corresponding [filename]#VAADIN# folders contained in JARs in the
-class path. For example, the built-in themes are stored in the
-[filename]#vaadin-themes.jar#.
-
-<<figure.themes.theme-contents>> illustrates the contents of a theme.
-
-[[figure.themes.theme-contents]]
-.Contents of a Theme
-image::img/theme-contents-hi.png[]
-
-The name of a theme folder defines the name of the theme. The name is used in
-the [literal]#++@Theme++# annotation that sets the theme. A theme must contain
-either a [filename]#styles.scss# for Sass themes, or [filename]#styles.css#
-stylesheet for plain CSS themes, but other contents have free naming. We
-recommend that you have the actual theme content in a SCSS file named after the
-theme, such as [filename]#mytheme.scss#, to make the names more unique.
-
-We also suggest a convention for naming the folders as [filename]#img# for
-images, [filename]#layouts# for custom layouts, and [filename]#css# for
-additional stylesheets.
-
-Custom themes need to extend a base theme, as described in
-<<dummy/../../../framework/themes/themes-creating#themes.creating,"Creating and
-Using Themes">>. Copying and modifying an existing theme is also possible, but
-it is not recommended, as it may need more work to maintain if the modifications
-are small.
-
-You use a theme by specifying it with the [literal]#++@Theme++# annotation for
-the UI class of the application as follows:
-
-
-[source, java]
-----
-@Theme("mytheme")
-public class MyUI extends UI {
- @Override
- protected void init(VaadinRequest request) {
- ...
- }
-}
-----
-
-A theme can contain alternate styles for user interface components, which can be
-changed as needed.
-
-In addition to style sheets, a theme can contain HTML templates for custom
-layouts used with [classname]#CustomLayout#. See
-<<dummy/../../../framework/layout/layout-customlayout#layout.customlayout,"Custom
-Layouts">> for details.
-
-Resources provided in a theme can also be accessed using the
-[classname]#ThemeResource# class, as described in
-<<dummy/../../../framework/application/application-resources#application.resources.theme,"Theme
-Resources">>. This allows displaying theme resources in component icons, in the
-[classname]#Image# component, and other such uses.
-
-
-
diff --git a/documentation/themes/themes-responsive.asciidoc b/documentation/themes/themes-responsive.asciidoc
deleted file mode 100644
index b4377f9b66..0000000000
--- a/documentation/themes/themes-responsive.asciidoc
+++ /dev/null
@@ -1,286 +0,0 @@
----
-title: Responsive Themes
-order: 10
-layout: page
----
-
-[[themes.responsive]]
-= Responsive Themes
-
-((("[classname]#responsive# extension", id="term.themes.responsive", range="startofrange")))
-
-
-((("CSS selections")))
-((("extension")))
-Vaadin includes support for responsive design which enables size range
-conditions in CSS selectors, allowing conditional CSS rules that respond to size
-changes in the browser window on the client-side.
-
-ifdef::web[]
-See the link:https://vaadin.com/blog/-/blogs/3126636[Vaadin Blog article on
-Responsive design] for some additional
-information.
-endif::web[]
-
-You can use the [classname]#Responsive# extension to extend either a component,
-typically a layout, or the entire UI. You specify the component by the static
-[methodname]#makeResponsive()# method.
-
-
-----
-// Have some component with an appropriate style name
-Label c = new Label("Here be text");
-c.addStyleName("myresponsive");
-content.addComponent(c);
-
-// Enable Responsive CSS selectors for the component
-Responsive.makeResponsive(c);
-----
-See the http://demo.vaadin.com/book-examples-vaadin7/book#themes.responsive.basic[on-line example, window="_blank"].
-
-You can now use [literal]#++width-range++# and [literal]#++height-range++#
-conditions in CSS selectors as follows:
-
-
-----
-/* Basic settings for all sizes */
-.myresponsive {
- padding: 5px;
- line-height: 36pt;
-}
-
-/* Small size */
-.myresponsive[width-range~="0-300px"] {
- background: orange;
- font-size: 16pt;
-}
-
-/* Medium size */
-.myresponsive[width-range~="301px-600px"] {
- background: azure;
- font-size: 24pt;
-}
-
-/* Anything bigger */
-.myresponsive[width-range~="601px-"] {
- background: palegreen;
- font-size: 36pt;
-}
-----
-See the http://demo.vaadin.com/book-examples-vaadin7/book#themes.responsive.basic[on-line example, window="_blank"].
-
-You can have overlapping size ranges, in which case all the selectors matching
-the current size are enabled.
-
-ifdef::web[]
-Note that responsive themes currently
-link:https://dev.vaadin.com/ticket/16249[do not work together with] stylesheets
-or widget sets loaded from a different domain than the Vaadin application. Such
-resources must be loaded from the same domain as the application. The problem
-occurs only in Firefox. A SecurityError is shown in the debug window. The
-limitation concerns stylesheets such as for web fonts served from external
-sites, as described in
-<<dummy/../../../framework/themes/themes-fonts#themes.fonts.webfonts,"Loading
-Web Fonts">>.
-endif::web[]
-
-ifdef::web[]
-[[themes.responsive.wrap]]
-== Flexible Wrapping
-
-You can use the [classname]#CssLayout# to have automatic wrap-around when the
-components in the layout would go off right side of the layout. Components that
-wrap must, however, have either undefined or fixed width, and thereby can not
-utilize the full area of the screen. With the [classname]#Responsive# extension,
-you can have more flexible wrap-around that gives the component tiles maximum
-width.
-
-In the following, we have a text and image box, which are laid out horizontally
-with 50-50 sizing if the screen is wide enough, but wrap to a vertical layout if
-the screen is narrow.
-
-
-----
-CssLayout layout = new CssLayout();
-layout.setWidth("100%");
-layout.addStyleName("flexwrap");
-content.addComponent(layout);
-
-// Enable Responsive CSS selectors for the layout
-Responsive.makeResponsive(layout);
-
-Label title = new Label("Space is big, really big");
-title.addStyleName("title");
-layout.addComponent(title);
-
-Label description = new Label("This is a " +
- "long description of the image shown " +
- "on the right or below, depending on the " +
- "screen width. The text here could continue long.");
-description.addStyleName("itembox");
-description.setSizeUndefined();
-layout.addComponent(description);
-
-Image image = new Image(null,
- new ThemeResource("img/planets/Earth.jpg"));
-image.addStyleName("itembox");
-layout.addComponent(image);
-----
-See the http://demo.vaadin.com/book-examples-vaadin7/book#themes.responsive.flexwrap[on-line example, window="_blank"].
-
-The SCSS could be as follows:
-
-
-----
-/* Various general settings */
-.flexwrap {
- background: black;
- color: white;
-
- .title {
- font-weight: bold;
- font-size: 20px;
- line-height: 30px;
- padding: 5px;
- }
-
- .itembox {
- white-space: normal;
- vertical-align: top;
- }
-
- .itembox.v-label {padding: 5px}
-}
-
-.flexwrap[width-range~="0-499px"] {
- .itembox {width: 100%}
-}
-
-.flexwrap[width-range~="500px-"] {
- .itembox {width: 50%}
-}
-----
-See the http://demo.vaadin.com/book-examples-vaadin7/book#themes.responsive.flexwrap[on-line example, window="_blank"].
-
-The layout in the wide mode is shown in <<figure.theme.responsive.flexwrap>>.
-
-[[figure.theme.responsive.flexwrap]]
-.Flexible Wrapping
-image::img/addon-responsive-flexwrap.png[]
-
-You could also play with the [literal]#++display: block++# vs
-[literal]#++display: inline-block++# properties.
-
-Notice that, while the [classname]#Responsive# extension makes it possible to do
-various CSS trickery with component sizes, the normal rules for component and
-layout sizes apply, as described in
-<<dummy/../../../framework/layout/layout-settings#layout.settings.size,"Layout
-Size">> and elsewhere, and you should always check the size behaviour of the
-components. In the above example, we set the label to have undefined width,
-which disables word wrap, so we had to re-enable it.
-
-endif::web[]
-
-ifdef::web[]
-[[themes.responsive.display]]
-== Toggling the Display Property
-
-((("display (CSS
-property)")))
-The [literal]#++display++# property allows especially powerful ways to offer
-radically different UIs for different screen sizes by enabling and disabling UI
-elements as needed. For example, you could disable some parts of the UI when the
-space gets too small, but bring forth navigation buttons that, when clicked, add
-component styles to switch to the hidden parts.
-
-In the following, we simply show alternative components based on screen width:
-
-
-----
-CssLayout layout = new CssLayout();
-layout.setWidth("100%");
-layout.addStyleName("toggledisplay");
-content.addComponent(layout);
-
-// Enable Responsive CSS selectors for the layout
-Responsive.makeResponsive(layout);
-
-Label enoughspace =
- new Label("This space is big, mindbogglingly big");
-enoughspace.addStyleName("enoughspace");
-layout.addComponent(enoughspace);
-
-Label notenoughspace = new Label("Quite small space");
-notenoughspace.addStyleName("notenoughspace");
-layout.addComponent(notenoughspace);
-----
-See the http://demo.vaadin.com/book-examples-vaadin7/book#themes.responsive.display[on-line example, window="_blank"].
-
-The SCSS could be as follows:
-
-
-----
-/* Common settings */
-.toggledisplay {
- .enoughspace, .notenoughspace {
- color: white;
- padding: 5px;
- }
-
- .notenoughspace { /* Really small */
- background: red;
- font-weight: normal;
- font-size: 10px;
- line-height: 15px;
- }
-
- .enoughspace { /* Really big */
- background: darkgreen;
- font-weight: bold;
- font-size: 20px;
- line-height: 30px;
- }
-}
-
-/* Quite little space */
-.toggledisplay[width-range~="0-499px"] {
- .enoughspace {display: none}
-}
-
-/* Plenty of space */
-.toggledisplay[width-range~="500px-"] {
- .notenoughspace {display: none}
-}
-----
-See the http://demo.vaadin.com/book-examples-vaadin7/book#themes.responsive.display[on-line example, window="_blank"].
-
-endif::web[]
-
-ifdef::web[]
-[[themes.responsive.demos]]
-== Responsive Demos
-
-You can find a simple responsive demo at
-link:http://demo.vaadin.com/responsive/[demo.vaadin.com/responsive]. It
-demonstrates the flexible wrapping technique described in
-<<themes.responsive.wrap>>.
-
-The
-link:http://demo.vaadin.com/book-examples-vaadin7/book/#themes.responsive.basic[Book
-Examples] demo provides the examples given in this chapter, as well as some
-others.
-
-((("Parking
-demo")))
-((("TouchKit", "Parking
-demo")))
-The Parking demo for TouchKit, mentioned in
-<<dummy/../../../mobile/mobile-overview.asciidoc#mobile.overview,"Mobile
-Applications with TouchKit">>, uses a responsive theme to adapt to mobile
-devices with different screen sizes and when the screen orientation changes.
-
-endif::web[]
-
-(((range="endofrange", startref="term.themes.responsive")))
-
-
diff --git a/documentation/themes/themes-sass.asciidoc b/documentation/themes/themes-sass.asciidoc
deleted file mode 100644
index 4b1f529de1..0000000000
--- a/documentation/themes/themes-sass.asciidoc
+++ /dev/null
@@ -1,156 +0,0 @@
----
-title: Syntactically Awesome Stylesheets (Sass)
-order: 3
-layout: page
----
-
-[[themes.sass]]
-= Syntactically Awesome Stylesheets (Sass)
-
-Vaadin uses Sass for stylesheets. Sass is an extension of CSS3 that adds nested
-rules, variables, mixins, selector inheritance, and other features to CSS. Sass
-supports two formats for stylesheet: Vaadin themes are written in SCSS (
-[filename]#.scss#), which is a superset of CSS3, but Sass also allows a more
-concise indented format ( [filename]#.sass#).
-
-Sass can be used in two basic ways in Vaadin applications, either by compiling
-SCSS files to CSS or by doing the compilation on the fly. The latter way is
-possible if the development mode is enabled for the Vaadin servlet, as described
-in
-<<dummy/../../../framework/application/application-environment#application.environment.parameters,"Other
-Servlet Configuration Parameters">>.
-
-[[themes.sass.overview]]
-== Sass Overview
-
-[[themes.sass.overview.variables]]
-=== Variables
-
-Sass allows defining variables that can be used in the rules.
-
-
-[source, css]
-----
-$textcolor: blue;
-
-.v-button-caption {
- color: $textcolor;
-}
-----
-
-The above rule would be compiled to CSS as:
-
-
-[source, css]
-----
-.v-button-caption {
- color: blue;
-}
-----
-
-Also mixins can have variables as parameters, as explained later.
-
-
-[[themes.sass.overview.nesting]]
-=== Nesting
-
-Sass supports nested rules, which are compiled into inside-selectors. For
-example:
-
-
-[source, css]
-----
-.v-app {
- background: yellow;
-
- .mybutton {
- font-style: italic;
-
- .v-button-caption {
- color: blue;
- }
- }
-}
-----
-
-is compiled as:
-
-
-[source, css]
-----
-.v-app {
- background: yellow;
-}
-
-.v-app .mybutton {
- font-style: italic;
-}
-
-.v-app .mybutton .v-button-caption {
- color: blue;
-}
-----
-
-
-[[themes.sass.overview.mixins]]
-=== Mixins
-
-Mixins are rules that can be included in other rules. You define a mixin rule by
-prefixing it with the [literal]#++@mixin++# keyword and the name of the mixin.
-You can then use [literal]#++@include++# to apply it to another rule. You can
-also pass parameters to it, which are handled as local variables in the mixin.
-
-For example:
-
-
-[source, css]
-----
-@mixin mymixin {
- background: yellow;
-}
-
-@mixin othermixin($param) {
- margin: $param;
-}
-
-.v-button-caption {
- @include mymixin;
- @include othermixin(10px);
-}
-----
-
-The above SCSS would translated to the following CSS:
-
-
-[source, css]
-----
-.v-button-caption {
- background: yellow;
- margin: 10px;
-}
-----
-
-You can also have nested rules in a mixin, which makes them especially powerful.
-Mixing in rules is used when extending Vaadin themes, as described in
-<<dummy/../../../framework/themes/themes-creating#themes.creating.sass,"Sass
-Themes">>.
-
-Vaadin themes are defined as mixins to allow for certain uses, such as different
-themes for different portlets in a portal.
-
-
-
-[[themes.sass.basic]]
-== Sass Basics with Vaadin
-
-We are not going to give in-depth documentation of Sass and refer you to its
-excellent documentation at http://sass-lang.com/. In the following, we give just
-basic introduction to using it with Vaadin.
-
-You can create a new Sass-based theme with the Eclipse plugin, as described in
-<<dummy/../../../framework/themes/themes-eclipse#themes.eclipse,"Creating a
-Theme in Eclipse">>.
-
-
-
-
diff --git a/documentation/themes/themes-valo.asciidoc b/documentation/themes/themes-valo.asciidoc
deleted file mode 100644
index 5ae5a1b37b..0000000000
--- a/documentation/themes/themes-valo.asciidoc
+++ /dev/null
@@ -1,440 +0,0 @@
----
-title: Valo Theme
-order: 7
-layout: page
----
-
-[[themes.valo]]
-= Valo Theme
-
-Valo is the word for light in Finnish. The Valo theme incorporates the use of
-light in its logic, in how it handles shades and highlights. It creates lines,
-borders, highlights, and shadows adaptively according to a background color,
-always with contrasts pleasant to human visual perception. Auxiliary colors are
-computed using an algorithmic color theory to blend gently with the background.
-The static art is complemented with responsive animations.
-
-The true power of Valo lies in its configurability with parameters, functions,
-and Sass mixins. You can use the built-in definitions in your own themes or
-override the defaults. Detailed documentation of the available mixins,
-functions, and variables can be found in the Valo API documentation available at
-http://vaadin.com/valo.
-
-[[themes.valo.use]]
-== Basic Use
-
-Valo is used just like other themes. Its optional parameters must be given
-before the [literal]#++@import++# statement.
-
-Your project theme file, such as [filename]#mytheme.scss#, included from the
-[filename]#styles.scss# file, could be as follows:
-
-
-----
-// Modify the base color of the theme
-$v-background-color: hsl(200, 50%, 50%);
-
-// Import valo after setting the parameters
-@import "../valo/valo";
-
-.mythemename {
- @include valo;
-
- // Your theme's rules go here
-}
-----
-
-If you need to override mixins or function definitions in the valo theme, you
-must do that after the import statement, but before including the valo mixin.
-Also, with some configuration parameters, you can use variables defined in the
-theme. In this case, they need to be overridden after the import statement.
-
-
-[[themes.valo.variables]]
-== Common Settings
-
-In the following, we describe the optional parameters that control the visual
-appearance of the Valo theme. In addition to the ones given here, component
-styles have their own parameters, listed in the sections describing the
-components in the other chapters.
-
-[[themes.valo.variables.general]]
-=== General Settings
-
-$v-background-color(default:[literal]#++hsl(210, 0%, 98%)++#):: The background color is the main control parameter for the Valo theme and it is
-used for computing all other colors in the theme. If the color is dark (has low
-luminance), light foreground colors that give high contrast with the background
-are automatically used.
-
-+
-You can specify the color in any way allowed in CSS: hexadecimal RGB color code,
-RGB/A value specified with [methodname]#rgb()# or [methodname]#rgba()#, HSL/A
-value specified with [methodname]#hsl()# or [methodname]#hsla()#. You can also
-use color names, but it should be avoided, as not all CSS color names are
-currently supported.
-
-$v-app-background-color(default:$v-background-color):: Background color of the UI's root element. You can specify the color in any way
-allowed in CSS.
-
-$v-app-loading-text(default:[literal]#++""++#):: A static text that is shown under the loading spinned while the client-side
-engine is being loaded and started. The text must be given in quotes. The text
-can not be localized currently.
-
-
-+
-----
-$v-app-loading-text: "Loading Resources...";
-----
-$v-line-height(default:[literal]#++1.55++#):: Base line height for all widgets. It must be given a unitless number.
-
-
-+
-----
-$v-line-height: 1.6;
-----
-
-
-
-[[themes.valo.variables.fonts]]
-=== Font Settings
-
-$v-font-size(default:[literal]#++16px++#):: Base font size. It should be specified in pixels.
-
-
-+
-----
-$v-font-size: 18px;
-----
-$v-font-weight(default:[literal]#++300++#):: Font weight for normal fonts. The size should be given as a numeric value, not
-symbolic.
-
-
-+
-----
-$v-font-weight: 400;
-----
-$v-font-color(default: computed):: Foreground text color, specified as any CSS color value. The default is computed
-from the background color so that it gives a high contrast with the background.
-
-$v-font-family(default:[literal]#++"Open Sans", sans-serif++#):: Font family and fallback fonts as a comma-separated list. Font names containing
-spaces must be quoted. The default font Open Sans is a web font included in the
-Valo theme. Other used Valo fonts must be specified in the list to enable them.
-See <<themes.valo.fonts>>.
-
-
-+
-----
-$v-font-family: "Source Sans Pro", sans-serif;
-----
-$v-caption-font-size(default:[literal]#++round($v-font-size * 0.9)++#):: Font size for component captions. The value should be a pixel value.
-
-$v-caption-font-weight(default:[literal]#++max(400, $v-font-weight)++#):: Font weight for captions. It should be defined with a numeric value instead of
-symbolic.
-
-
-
-
-[[themes.valo.variables.layout]]
-=== Layout Settings
-
-
-++++
-<variablelist xmlns="http://docbook.org/ns/docbook" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xl="http://www.w3.org/1999/xlink"><varlistentry><term><varname>$v-unit-size</varname> (default: <literal>round(2.3 * $v-font-size)</literal>)</term><listitem><para>
- This is the base size for various layout measures. It is
- directly used in some measures, such as button height and
- layout margins, while other measures are derived from
- it. The value must be specified in pixels, with a suitable
- range of 18-50.
- </para><programlisting>$v-unit-size: 40px;</programlisting></listitem></varlistentry><varlistentry><term><varname>$v-layout-margin-top</varname></term><term><varname>$v-layout-margin-right</varname></term><term><varname>$v-layout-margin-bottom</varname></term><term><varname>$v-layout-margin-left</varname> (default: <literal>$v-unit-size</literal>)</term><listitem><para>
- Layout margin sizes for all built-in layout components,
- when the margin is enabled with
- <methodname>setMargin()</methodname>, as described in
- <xref linkend="layout.settings.margins"/>.
- </para></listitem></varlistentry><varlistentry><term><varname>$v-layout-spacing-vertical</varname> and
- <varname>$v-layout-spacing-horizontal</varname> (default:
- <literal>round($v-unit-size/3)</literal>)</term><listitem><para>
- Amount of vertical or horizontal space when spacing is enabled
- for a layout with <methodname>setSpacing()</methodname>, as
- described in <xref linkend="layout.settings.spacing"/>.
- </para></listitem></varlistentry></variablelist>
-++++
-
-
-[[themes.valo.variables.component]]
-=== Component Features
-
-The following settings apply to various graphical features of some components.
-
-$v-border(default:[literal]#++1px solid (v-shade 0.7)++#):: Border specification for the components that have a border. The thickness
-measure must be specified in pixels. For the border color, you can specify any
-CSS color or one of the [literal]#++v-tint++#, [literal]#++v-shade++#, and
-[literal]#++v-tone++# keywords described later in this section.
-
-$v-border-radius(default:[literal]#++4px++#):: Corner radius for components that have a border. The measure must be specified
-in pixels.
-
-
-+
-----
-$v-border-radius: 8px;
-----
-$v-gradient(default:[literal]#++v-linear 8%++#):: Color gradient style for components that have a gradient. The gradient style may
-use the following keywords: [literal]#++v-linear++# and
-[literal]#++v-linear-reverse++#. The opacity must be given as percentage between
-0% and 100%.
-
-
-+
-----
-$v-gradient: v-linear 20%;
-----
-$v-bevel(default:[literal]#++inset 0 1px 0 v-tint, inset 0 -1px 0 v-shade++#):: Inset shadow style to define how some components are "raised" from the
-background. The value follows the syntax of CSS box-shadow, and should be a list
-of insets. For the bevel color, you can specify any CSS color or one of the
-[literal]#++v-tint++#, [literal]#++v-shade++#, and [literal]#++v-tone++#
-keywords described later in this section.
-
-+
-//TODO Check the meaning of v-tone
-$v-bevel-depth(default:[literal]#++30%++#):: Specifies the "depth" of the bevel shadow, as applied to one of the color
-keywords for the bevel style. The actual amount of tint, shade, or tone is
-computed from the depth.
-
-$v-shadow(default:[literal]#++0 2px 3px v-shade++#):: Default shadow style for all components. As with $v-bevel, the value follows the
-syntax of CSS box-shadow, but without the [literal]#++inset++#. For the shadow
-color, you can specify any CSS color or one of the [literal]#++v-tint++# or
-[literal]#++v-shade++# keywords described later in this section.
-
-$v-shadow-opacity(default:[literal]#++5%++#):: Specifies the opacity of the shadow, as applied to one of the color keywords for
-the shadow style. The actual amount of tint or shade is computed from the depth.
-
-$v-focus-style(default:[literal]#++0 0 0 2px rgba($v-focus-color, .5)++#):: Box-shadow specification for the field focus indicator. The space-separated
-values are the horizontal shadow position in pixels, vertical shadow position in
-pixels, blur distance in pixels, spread distance in pixels, and the color. The
-color can be any CSS color. You can only specify the color, in which case
-defaults for the position are used. [methodname]#rgba()# or [methodname]#hsla()#
-can be used to enable transparency.
-
-+
-For example, the following creates a 2 pixels wide orange outline around the
-field:
-
-
-+
-----
-$v-focus-style: 0 0 0 2px orange;
-----
-$v-focus-color(default:[literal]#++valo-focus-color()++#):: Color for the field focus indicator. The [methodname]#valo-focus-color()#
-function computes a high-contrast color from the context, which is usually the
-background color. The color can be any CSS color.
-
-$v-animations-enabled(default:[literal]#++true++#):: Specifies whether various CSS animations are used.
-
-$v-hover-styles-enabled(default:[literal]#++true++#):: Specifies whether various [literal]#++:hover++# styles are used for indicating
-that mouse pointer hovers over an element.
-
-$v-disabled-opacity(default:[literal]#++0.5++#):: Opacity of disabled components, as described in
-<<dummy/../../../framework/components/components-features#components.features.enabled,"Enabled">>.
-
-$v-selection-color(default:[literal]#++$v-focus-color++#):: Color for indicating selection in selection components.
-
-$v-default-field-width(default:[literal]#++$v-unit-size * 5++#):: Default width of certain field components, unless overridden with
-[methodname]#setWidth()#.
-
-$v-error-indicator-color(default:[literal]#++#ed473b++#):: Color of the component error indicator, as described in
-<<dummy/../../../framework/application/application-errors#application.errors.error-indicator,"Error
-Indicator and Message">>.
-
-$v-required-field-indicator-color(default:[literal]#++$v-error-indicator-color++#):: Color of the required indicator in field components, as described in
-<<dummy/../../../framework/components/components-fields#components.fields.field,"Field
-Interface">>.
-
-
-
-Color specifications for $v-border, $v-bevel, and $v-shadow may use, in addition
-to CSS colors, the following keywords:
-
-v-tint:: Lighter than the background color.
-
-v-shade:: Darker than the background color.
-
-v-tone:: Adaptive color specification: darker on light background and lighter on dark
-background. Not usable in $v-shadow.
-
-
-
-For example:
-
-
-----
-$v-border: 1px solid v-shade;
-----
-
-You can fine-tune the contrast by giving a weight parameter in parentheses:
-
-
-----
-$v-border: 1px solid (v-tint 2);
-----
-
-
-----
-$v-border: 1px solid (v-tone 0.5);
-----
-
-
-[[themes.valo.variables.optimization]]
-=== Theme Compilation and Optimization
-
-$v-relative-paths(default:[literal]#++true++#):: This flags specifies whether relative URL paths are relative to the currently
-parsed SCSS file or to the compilation root file, so that paths are correct for
-different resources. Vaadin theme compiler parses URL paths differently from the
-regular Sass compiler (Vaadin modifies relative URL paths). Use
-[literal]#++false++# for Ruby compiler and [literal]#++true++# for Vaadin Sass
-compiler.
-
-$v-included-components(default: component list):: Theme optimization parameter to specify the included component themes, as
-described in <<themes.valo.optimization>>.
-
-$v-included-additional-styles(default:[literal]#++$v-included-components++#):: Theme optimization parameter that lists the components for which the additional
-component stylenames should be included. See <<themes.valo.component>> for more
-details.
-
-
-
-
-
-[[themes.valo.mixins]]
-== Valo Mixins and Functions
-
-Valo uses Sass mixins and functions heavily to compute various theme features,
-such as colors and shades. Also, all component styles are mixins. You can use
-the built-in mixins or override them. For detailed documentation of the mixins
-and functions, please refer to the Valo API documentation available at
-http://vaadin.com/valo/api.
-
-
-[[themes.valo.fonts]]
-== Valo Fonts
-
-Valo includes the following custom fonts:
-
-* Open Sans
-* Source Sans Pro
-* Roboto
-* Lato
-* Lora
-
-The used fonts must be specified with the $v-font-family parameter for Valo, in
-a fallback order. A font family is used in decreasing order of preference, in
-case a font with higher preference is not available in the browser. You can
-specify any font families and generic families that browsers may support. In
-addition to the primary font family, you can use also others in your
-application. To enable using the fonts included in Valo, you need to list them
-in the variable.
-
-
-----
-$v-font-family: 'Open Sans', sans-serif, 'Source Sans Pro';
-----
-
-Above, we specify Open Sans as the preferred primary font, with any sans-serif
-font that the browser supports as a fallback. In addition, we include the Source
-Sans Pro as an auxiliary font that we can use in custom rules as follows:
-
-
-----
-.v-label pre {
- font-family: 'Source Sans Pro', monospace;
-}
-----
-
-This would specify using the font in any [classname]#Label# component with the
-[literal]#++PREFORMATTED++# content mode.
-
-
-[[themes.valo.component]]
-== Component Styles
-
-Many components have component-specific styles to make them smaller, bigger, and
-so forth. You can specify the component styles with [methodname]#addStyleName()#
-using the constants defined in the [classname]#ValoTheme# enum.
-
-
-----
-table.addStyleName(ValoTheme.TABLE_COMPACT);
-----
-
-For a complete up-to-date list of component-specific styles, please refer to
-Vaadin API documentation on the [classname]#ValoTheme# enum. Some are also
-described in the component-specific styling sections.
-
-[[themes.valo.component.disabling]]
-=== Disabling Component Styles
-
-Component styles are optional, but all are enabled by default. They can be
-enabled on per-component basis with the $v-included-additional-styles parameter.
-It defaults to $v-included-components and can be customized in the same way, as
-described in <<themes.valo.optimization>>.
-
-
-[[themes.valo.component.parameters]]
-=== Configuration Parameters
-
-The following variables control some common component styles:
-
-$v-scaling-factor--tiny(default:[literal]#++0.75++#):: A scaling multiplier for [literal]#++TINY++# component styles.
-
-$v-scaling-factor--small(default:[literal]#++0.85++#):: A scaling multiplier for [literal]#++SMALL++# component styles.
-
-$v-scaling-factor--large(default:[literal]#++1.2++#):: A scaling multiplier for [literal]#++LARGE++# component styles.
-
-$v-scaling-factor--huge(default:[literal]#++1.6++#):: A scaling multiplier for [literal]#++HUGE++# component styles.
-
-
-
-
-
-[[themes.valo.optimization]]
-== Theme Optimization
-
-Valo theme allows optimizing the size of the compiled theme CSS by including the
-rules for only the components actually used in the application. The included
-component styles can be specified in the [literal]#++$v-included-components++#
-variable, which by default includes all components. The variable should include
-a comma-separated list of component names in lower-case letters. Likewise, you
-can specify which additional component styles, as described in
-<<themes.valo.component>>, should be included using the
-$v-included-additional-styles parameter and the same format. The list of
-additional styles defaults to $v-included-components.
-
-For example, if your UI contains just [classname]#VerticalLayout#,
-[classname]#TextField#, and [classname]#Button# components, you could define the
-variable as follows:
-
-
-----
-$v-included-components:
- verticallayout,
- textfield,
- button;
-----
-
-You can use the [methodname]#remove()# function reversely to remove just some
-component themes from the standard selection.
-
-For example, with the following you can remove the theme definitions for the
-[classname]#Calendar# component:
-
-
-----
-$v-included-components: remove($v-included-components, calendar);
-----
-
-Note that in this case, you need to give the statement __after__ the
-[literal]#++@import++# statement for the Valo theme, because it overrides a
-variable by using its value that is defined in the theme.
-
-
-
-
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-23 20:32:19 +0000