diff options
Diffstat (limited to 'documentation/themes')
30 files changed, 4435 insertions, 0 deletions
diff --git a/documentation/themes/chapter-themes.asciidoc b/documentation/themes/chapter-themes.asciidoc new file mode 100644 index 0000000000..727e42b3e9 --- /dev/null +++ b/documentation/themes/chapter-themes.asciidoc @@ -0,0 +1,37 @@ +[[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 Binary files differnew file mode 100644 index 0000000000..e24df04a47 --- /dev/null +++ b/documentation/themes/img/addon-responsive-flexwrap.png diff --git a/documentation/themes/img/builtin-runo.png b/documentation/themes/img/builtin-runo.png Binary files differnew file mode 100644 index 0000000000..039a34137b --- /dev/null +++ b/documentation/themes/img/builtin-runo.png diff --git a/documentation/themes/img/eclipse-theme-compiler.png b/documentation/themes/img/eclipse-theme-compiler.png Binary files differnew file mode 100644 index 0000000000..a2886a4e68 --- /dev/null +++ b/documentation/themes/img/eclipse-theme-compiler.png diff --git a/documentation/themes/img/eclipse-theme-created-annotated-hi.png b/documentation/themes/img/eclipse-theme-created-annotated-hi.png Binary files differnew file mode 100644 index 0000000000..de8152c2da --- /dev/null +++ b/documentation/themes/img/eclipse-theme-created-annotated-hi.png diff --git a/documentation/themes/img/eclipse-theme-created-annotated-lo.png b/documentation/themes/img/eclipse-theme-created-annotated-lo.png Binary files differnew file mode 100644 index 0000000000..fe9fa560d7 --- /dev/null +++ b/documentation/themes/img/eclipse-theme-created-annotated-lo.png diff --git a/documentation/themes/img/eclipse-theme-created.png b/documentation/themes/img/eclipse-theme-created.png Binary files differnew file mode 100644 index 0000000000..db1970a461 --- /dev/null +++ b/documentation/themes/img/eclipse-theme-created.png diff --git a/documentation/themes/img/eclipse-theme-new.png b/documentation/themes/img/eclipse-theme-new.png Binary files differnew file mode 100644 index 0000000000..9374364298 --- /dev/null +++ b/documentation/themes/img/eclipse-theme-new.png diff --git a/documentation/themes/img/eclipse-theme-settings.png b/documentation/themes/img/eclipse-theme-settings.png Binary files differnew file mode 100644 index 0000000000..a7dfd78721 --- /dev/null +++ b/documentation/themes/img/eclipse-theme-settings.png diff --git a/documentation/themes/img/example-ui-default.png b/documentation/themes/img/example-ui-default.png Binary files differnew file mode 100644 index 0000000000..a0e9f9d1ea --- /dev/null +++ b/documentation/themes/img/example-ui-default.png diff --git a/documentation/themes/img/example-ui-themed.png b/documentation/themes/img/example-ui-themed.png Binary files differnew file mode 100644 index 0000000000..40ebb746cc --- /dev/null +++ b/documentation/themes/img/example-ui-themed.png diff --git a/documentation/themes/img/fonticons-basic.png b/documentation/themes/img/fonticons-basic.png Binary files differnew file mode 100644 index 0000000000..66ed207cf7 --- /dev/null +++ b/documentation/themes/img/fonticons-basic.png diff --git a/documentation/themes/img/fonticons-html.png b/documentation/themes/img/fonticons-html.png Binary files differnew file mode 100644 index 0000000000..b9d8a2a9c6 --- /dev/null +++ b/documentation/themes/img/fonticons-html.png diff --git a/documentation/themes/img/theme-contents-hi.png b/documentation/themes/img/theme-contents-hi.png Binary files differnew file mode 100644 index 0000000000..d04f7b2d32 --- /dev/null +++ b/documentation/themes/img/theme-contents-hi.png diff --git a/documentation/themes/img/theme-contents-lo.png b/documentation/themes/img/theme-contents-lo.png Binary files differnew file mode 100644 index 0000000000..cef64982e8 --- /dev/null +++ b/documentation/themes/img/theme-contents-lo.png diff --git a/documentation/themes/img/themes-css-match-1.png b/documentation/themes/img/themes-css-match-1.png Binary files differnew file mode 100644 index 0000000000..8f9cf1bd55 --- /dev/null +++ b/documentation/themes/img/themes-css-match-1.png diff --git a/documentation/themes/img/themes-css-match-class-2.png b/documentation/themes/img/themes-css-match-class-2.png Binary files differnew file mode 100644 index 0000000000..c1cab59bf9 --- /dev/null +++ b/documentation/themes/img/themes-css-match-class-2.png diff --git a/documentation/themes/img/themes-css-match-class-3.png b/documentation/themes/img/themes-css-match-class-3.png Binary files differnew file mode 100644 index 0000000000..7062b9abdb --- /dev/null +++ b/documentation/themes/img/themes-css-match-class-3.png diff --git a/documentation/themes/original-drawings/eclipse-theme-created-annotated.svg b/documentation/themes/original-drawings/eclipse-theme-created-annotated.svg new file mode 100644 index 0000000000..f6b902f45d --- /dev/null +++ b/documentation/themes/original-drawings/eclipse-theme-created-annotated.svg @@ -0,0 +1,144 @@ +<?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 new file mode 100644 index 0000000000..169336beba --- /dev/null +++ b/documentation/themes/original-drawings/theme-contents.svg @@ -0,0 +1,1857 @@ +<?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 "../valo/valo";</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 "mytheme.scss";</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 new file mode 100644 index 0000000000..7c8501858a --- /dev/null +++ b/documentation/themes/themes-compiling.asciidoc @@ -0,0 +1,223 @@ +--- +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 new file mode 100644 index 0000000000..dcd2c5034a --- /dev/null +++ b/documentation/themes/themes-creating.asciidoc @@ -0,0 +1,283 @@ +--- +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/<theme>/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 new file mode 100644 index 0000000000..45229303dc --- /dev/null +++ b/documentation/themes/themes-css.asciidoc @@ -0,0 +1,506 @@ +--- +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"] +---- +<html> + <head> + <title>My Page</title> + <link rel="stylesheet" type="text/css" + href="mystylesheet.css"/> + </head> + <body> + **<p>**This is a paragraph**</p>** + **<p>**This is another paragraph**</p>** + <table> + <tr> + **<td>**This is a table cell**</td>** + **<td>**This is another table cell**</td>** + </tr> + </table> + </body> +</html> +---- +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"] +---- +<html> + <body> + **<p class="normal">**This is the first paragraph**</p>** + + **<p class="another">**This is the second paragraph**</p>** + + <table> + <tr> + **<td class="normal">**This is a table cell**</td>** + **<td class="another">**This is another table cell**</td>** + </tr> + </table> + </body> +</html> +---- +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"] +---- +<body> + <p class="mytext">Here is some text inside a + paragraph element</p> + <table class="**mytable**"> + <tr> + <td class="**mytext**">Here is text inside + a table and inside a td element.</td> + </tr> + </table> +</body> +---- +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"] +---- +<body class="**v-generated-body v-ff v-ff20 v-ff200 v-gecko v-lin**" + scroll="auto"> + <div id="bookexamplesvaadin7helloworld-447164942" + class="**v-app mytheme**"> + <div class="**v-ui v-scrollable**" + tabindex="1" style="height: 100%; width: 100%;"> + <div class="**v-loading-indicator first**" + style="position: absolute; display: none;"></div> + <div class="**v-verticallayout v-layout v-vertical v-widget v-has-width**" + style="width: 100%;"> + <div class="**v-slot**"> + <div class="**v-label v-widget v-has-width**" + style="width: 100%;">Hello World!</div> + </div> + <div class="**v-slot**"> + <div class="**v-button v-widget**" + tabindex="0" role="button"> + <span class="**v-button-wrap**"> + <span class="**v-button-caption**">Push Me!</span> + </span> + </div> + </div> + </div> + </div> + </div> + ... +<body> +---- +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 new file mode 100644 index 0000000000..bd35ce6fed --- /dev/null +++ b/documentation/themes/themes-eclipse.asciidoc @@ -0,0 +1,75 @@ +--- +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 new file mode 100644 index 0000000000..624220fa05 --- /dev/null +++ b/documentation/themes/themes-fonticon.asciidoc @@ -0,0 +1,266 @@ +--- +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 new file mode 100644 index 0000000000..741fb00a72 --- /dev/null +++ b/documentation/themes/themes-fonts.asciidoc @@ -0,0 +1,85 @@ +--- +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 new file mode 100644 index 0000000000..05005ab83b --- /dev/null +++ b/documentation/themes/themes-overview.asciidoc @@ -0,0 +1,77 @@ +--- +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 new file mode 100644 index 0000000000..b4377f9b66 --- /dev/null +++ b/documentation/themes/themes-responsive.asciidoc @@ -0,0 +1,286 @@ +--- +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 new file mode 100644 index 0000000000..4b1f529de1 --- /dev/null +++ b/documentation/themes/themes-sass.asciidoc @@ -0,0 +1,156 @@ +--- +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 new file mode 100644 index 0000000000..5ae5a1b37b --- /dev/null +++ b/documentation/themes/themes-valo.asciidoc @@ -0,0 +1,440 @@ +--- +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. + + + + |
