From f9548ee978defbaa27817409dfccce47d3fc92c3 Mon Sep 17 00:00:00 2001 From: Erik Lumme Date: Wed, 13 Sep 2017 09:47:26 +0300 Subject: [PATCH] Migrate ValoExamples --- documentation/articles/ValoExamples.asciidoc | 237 +++++++++++++++++++ documentation/articles/contents.asciidoc | 1 + 2 files changed, 238 insertions(+) create mode 100644 documentation/articles/ValoExamples.asciidoc diff --git a/documentation/articles/ValoExamples.asciidoc b/documentation/articles/ValoExamples.asciidoc new file mode 100644 index 0000000000..d8eaa78a2c --- /dev/null +++ b/documentation/articles/ValoExamples.asciidoc @@ -0,0 +1,237 @@ +[[valo-examples]] +Valo examples +------------- + +These are some sample looks for the Valo theme. You can use these as-is, +as a starting point, or while learning Valo. + +[[blueprint]] +Blueprint +--------- + +[source,scss] +.... +$v-app-loading-text: "Blueprint Valo"; +$v-background-color: #1a61b7; +$v-focus-color: #fff; +$v-panel-background-color: $v-background-color; +$v-overlay-background-color: $v-background-color; +$valo-menu-background-color: $v-background-color; +$v-overlay-shadow: 0 0 0 1px rgba(#fff, .5); +$v-window-shadow: $v-overlay-shadow; +$v-window-modality-curtain-background-color: $v-background-color; +$v-bevel: false; +$v-gradient: false; +$v-shadow: false; +$v-textfield-bevel: false; +$v-textfield-shadow: false; +$v-border: 1px solid (v-tint 1.5); +$v-textfield-background-color: $v-background-color; +$v-font-family: sans-serif; +$v-font-size: 18px; + +@import "../valo/valo"; +.... + +[[dark]] +Dark +---- + +[source,scss] +.... +$v-app-loading-text: "Dark Valo"; +$v-background-color: #444d50; +$v-focus-color: #07a9ca; +$v-focus-style: 0 0 3px 2px $v-focus-color; +$v-bevel-depth: 40%; +$v-gradient: v-linear 12%; +$v-border-radius: 10px; +$v-font-family: Roboto, sans-serif; +$v-font-weight: 400; +$v-font-weight--header: 400; +$v-bevel: inset 0 1px 2px v-tint, inset 0 0 1px (v-tint 0.1); +$v-shadow: 0 0 0 3px rgba(0,0,0,0.32), 0 1px 0 3px rgba(255,255,255,0.14); +$v-textfield-bevel: inset 0 2px 2px v-shade; +$v-textfield-shadow: $v-shadow; +$v-unit-size: 40px; +$v-overlay-shadow: 0 0 0 3px (v-shade 8), 0 5px 10px (v-shade 4); +$v-component-group-spacing: 6px; + +@import "../valo/valo"; +.... + +[[facebook]] +Facebook +-------- + +[source,scss] +.... +$v-app-loading-text: "Facebook Valo"; +$v-background-color: #fafafa; +$v-app-background-color: #e7ebf2; +$v-panel-background-color: #fff; +$v-focus-color: #3b5998; +$v-focus-style: 0 0 1px 1px rgba($v-focus-color, .5); +$v-border-radius: 3px; +$v-textfield-border-radius: 0; +$v-font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif; +$v-font-size: 14px; +$v-font-color: #37404E; +$v-font-weight: 400; +$v-link-text-decoration: none; +$v-shadow: 0 1px 0 (v-shade 0.2); +$v-bevel: inset 0 1px 0 v-tint; +$v-unit-size: 30px; +$v-gradient: v-linear 12%; +$v-overlay-shadow: 0 3px 8px v-shade, 0 0 0 1px (v-shade 0.7); +$v-shadow-opacity: 20%; +$v-selection-overlay-padding-horizontal: 0; +$v-selection-overlay-padding-vertical: 6px; +$v-selection-item-border-radius: 0; + +@import "../valo/valo"; +.... + +[[flat]] +Flat +---- + +[source,scss] +.... +$v-app-loading-text: "Flat Valo"; + +$v-font-family: "Roboto", sans-serif; +$v-font-weight: 400; +$v-font-weight--header: 400; +$v-background-color: #fff; +$v-focus-color: rgb(150,190,90); +$v-luminance-threshold: 180; +$v-border: 2px solid v-shade; +$v-border-radius: 6px; +$v-bevel: false; +$v-gradient: false; +$v-shadow: false; +$v-textfield-bevel: false; +$v-textfield-shadow: false; +$v-link-text-decoration: false; +$v-selection-overlay-padding-horizontal: 0; +$v-selection-overlay-padding-vertical: 6px; +$v-selection-item-height: 30px; +$v-selection-item-border-radius: 0; +$valo-menu-background-color: #eee; + +@import "../valo/valo"; + +.valo-test { + .v-button-primary.v-button-primary { + background: #fff; + border-color: $v-focus-color; + color: $v-focus-color; + } + + .v-button-danger.v-button-danger { + background: #fff; + border-color: $v-error-indicator-color; + color: $v-error-indicator-color; + } + + .v-slider-base:before, + .v-slider-base:after { + border: none !important; + } +} +.... + +[[flat-dark]] +Flat Dark +--------- + +[source,scss] +.... +$v-app-loading-text: "Dark & Flat Valo"; + +$v-background-color: #000; +$v-focus-color: #ffa500; +$v-font-size: 15px; +$v-font-weight: 600; +$v-unit-size: 42px; +$v-bevel: false; +$v-shadow: false; +$v-gradient: false; +$v-textfield-bevel: false; +$v-textfield-shadow: false; +$v-border-radius: 0; +$v-border: 2px solid v-tone; +$v-overlay-shadow: 0 0 0 2px (v-tint 10); +$v-focus-style: $v-focus-color; +$v-font-family: "Lato", sans-serif; +$v-font-weight--header: 600; + +@import "../valo/valo"; +.... + +[[light]] +Light +----- + +[source,scss] +.... +$v-app-loading-text: "Light Valo"; + +$v-background-color: hsl(0, 0, 99.5%); +$v-app-background-color: #fff; +$v-focus-color: hsl(218, 80%, 60%); +$v-border: 1px solid (v-shade 0.6); +$v-border-radius: 3px; +$v-bevel: inset 0 1px 0 v-tint; +$v-textfield-bevel: false; +$v-gradient: v-linear 3%; +$v-shadow: false; +$valo-menu-background-color: hsl(218, 20%, 98%); +$v-friendly-color: hsl(163, 61%, 41%); +$v-error-indicator-color: hsl(349, 66%, 56%); + + +@import "../valo/valo"; + +.tests-valo-light .valo-menu .valo-menu-title { + background: $v-app-background-color; + color: $v-selection-color; + text-shadow: none; + border-color: first-color(valo-border($color: $v-app-background-color, $strength: 0.5)); +} +.... + +[[metro]] +Metro +----- + +[source,scss] +.... +$v-app-loading-text: "Metro Valo"; + +$v-font-family: "Source Sans Pro", sans-serif; +$v-app-background-color: #fff; +$v-background-color: #eee; +$v-focus-color: #0072C6; +$v-focus-style: 0 0 0 1px $v-focus-color; +$valo-menu-background-color: darken($v-focus-color, 10%); +$v-border: 0 solid v-shade; +$v-border-radius: 0px; +$v-bevel: false; +$v-gradient: false; +$v-shadow: false; +$v-textfield-bevel: false; +$v-textfield-shadow: false; +$v-textfield-border: 1px solid v-shade; +$v-link-text-decoration: none; +$v-overlay-shadow: 0 0 0 2px #000; +$v-overlay-border-width: 2px; // For IE8 +$v-window-shadow: $v-overlay-shadow; +$v-selection-overlay-background-color: #fff; +$v-selection-overlay-padding-horizontal: 0; +$v-selection-overlay-padding-vertical: 6px; +$v-panel-border: 2px solid v-shade; + +@import "../valo/valo"; +.... diff --git a/documentation/articles/contents.asciidoc b/documentation/articles/contents.asciidoc index 60a555f848..57630cb914 100644 --- a/documentation/articles/contents.asciidoc +++ b/documentation/articles/contents.asciidoc @@ -61,4 +61,5 @@ are great, too. - link:VaadinScalabilityTestingWithAmazonWebServices.asciidoc[Vaadin scalability testing with Amazon Web Services] - link:UsingFontIcons.asciidoc[Using font icons in Vaadin 7.2] - link:DynamicallyInjectingCSS.asciidoc[Dynamically injecting CSS] +- link:ValoExamples.asciidoc[Valo examples] - link:CreatingAUIExtension.asciidoc[Creating a UI extension] -- 2.39.5