Merge branch 'valo' to master

Updated release notes to the form previously used in master.
The ticket list link needs to be updated separately in the
7.3 branch.

Change-Id: I7b7d09a1281261d3a1b8793cfff9ba8951a07798

1 files changed, 84 insertions, 0 deletions

diff --git a/WebContent/VAADIN/themes/valo/components/_optiongroup.scss b/WebContent/VAADIN/themes/valo/components/_optiongroup.scss
new file mode 100644
index 0000000000..71c67cd9d8
--- /dev/null
+++ b/WebContent/VAADIN/themes/valo/components/_optiongroup.scss
@@ -0,0 +1,84 @@
+@mixin valo-optiongroup ($primary-stylename: v-optiongroup) {
+
+  .v-radiobutton {
+    @include valo-radiobutton-style;
+  }
+
+  .v-select-optiongroup {
+    @include valo-optiongroup-style;
+  }
+
+}
+
+
+@mixin valo-radiobutton-style ($background-color: $v-background-color, $unit-size: $v-unit-size, $selection-color: $v-selection-color) {
+  @include valo-checkbox-style($background-color: $background-color, $unit-size: $unit-size, $selection-color: $selection-color);
+
+  :root & > input {
+    &:checked ~ label:after {
+      $size: ceil($unit-size/6);
+      $offset: round($unit-size/6);
+      width: $size;
+      height: $size;
+      top: $offset;
+      left: $offset;
+      background: $selection-color;
+    }
+
+    & ~ label:before,
+    & ~ label:after {
+      border-radius: 50%;
+      content: "";
+    }
+  }
+}
+
+
+
+@mixin valo-optiongroup-style ($unit-size: $v-unit-size, $font-size: $v-font-size) {
+
+  @if $unit-size != $v-unit-size {
+    .v-checkbox {
+      @include valo-checkbox-style($unit-size: $unit-size);
+    }
+    .v-radiobutton {
+      @include valo-radiobutton-style($unit-size: $unit-size);
+    }
+  }
+
+  .v-radiobutton,
+  .v-checkbox {
+    display: block;
+    margin: round($unit-size/4) $font-size 0 0;
+
+    &:first-child {
+      margin-top: round($unit-size/6);
+    }
+
+    &:last-child {
+      margin-bottom: round($unit-size/6);
+    }
+  }
+
+  &.v-has-width label {
+    white-space: normal;
+  }
+}
+
+
+@mixin valo-optiongroup-horizontal {
+  white-space: nowrap;
+
+  .v-radiobutton,
+  .v-checkbox {
+    display: inline-block;
+  }
+
+  &.v-has-width {
+    white-space: normal;
+
+    label {
+      white-space: nowrap;
+    }
+  }
+}