1 files changed, 98 insertions, 0 deletions
diff --git a/WebContent/VAADIN/themes/valo/components/_richtextarea.scss b/WebContent/VAADIN/themes/valo/components/_richtextarea.scss
new file mode 100644
index 0000000000..702bda2ac4
--- /dev/null
+++ b/WebContent/VAADIN/themes/valo/components/_richtextarea.scss
@@ -0,0 +1,98 @@
+$valo-richtextarea-use-font-awesome: true !default;
+
+@mixin valo-richtextarea ($primary-stylename: v-richtextarea) {
+  .#{$primary-stylename} {
+    @include valo-textfield-style($states: normal, $padding: 0);
+    height: auto;
+    overflow: hidden;
+  }
+
+  .#{$primary-stylename} .gwt-RichTextToolbar {
+    @include valo-gradient($color: $v-background-color);
+    @include box-shadow(valo-bevel-and-shadow($bevel: $v-bevel, $background-color: $v-background-color, $gradient: $v-gradient));
+    border-bottom: valo-border();
+    color: valo-font-color($v-background-color);
+  }
+
+  .#{$primary-stylename} .gwt-ToggleButton,
+  .#{$primary-stylename} .gwt-PushButton {
+    display: inline-block;
+    line-height: $v-unit-size;
+    width: $v-unit-size;
+    text-align: center;
+    outline: none;
+
+    &:hover {
+      color: valo-font-color($v-background-color, 1);
+    }
+  }
+
+  .#{$primary-stylename} .gwt-ToggleButton-down,
+  .#{$primary-stylename} .gwt-ToggleButton-down-hovering {
+    $grad: valo-gradient-style($v-gradient) valo-gradient-opacity($v-gradient)/4;
+    //box-shadow: none;
+    @include valo-gradient($color: darken($v-background-color, 10%), $gradient: $grad, $direction: to top);
+  }
+
+  @if $valo-richtextarea-use-font-awesome {
+
+    // List of title attribute values and Font Awesome icons for the formatting buttons
+    $icons:  "Toggle Bold" "\f032",
+              "Toggle Italic" "\f033",
+              "Toggle Underline" "\f0cd",
+              "Toggle Subscript" "\f12c",
+              "Toggle Superscript" "\f12b",
+              "Left Justify" "\f036",
+              "Center" "\f037",
+              "Right Justify" "\f038",
+              "Toggle Strikethrough" "\f0cc",
+              "Indent Right" "\f03c",
+              "Indent Left" "\f03b",
+              "Insert Horizontal Rule" "—",
+              "Insert Ordered List" "\f0cb",
+              "Insert Unordered List" "\f0ca",
+              "Insert Image" "\f03e",
+              "Create Link" "\f0c1",
+              "Remove Link" "\f127",
+              "Remove Formatting" "\f12d";
+
+    .#{$primary-stylename} .gwt-RichTextToolbar-top {
+      img {
+        display: none;
+      }
+
+      div:before {
+        font-family: FontAwesome;
+      }
+
+      @each $pair in $icons {
+        $first-of-pair: first($pair);
+        $last-of-pair: last($pair);
+        div[title="#{$first-of-pair}"]:before {
+          content: "#{$last-of-pair}";
+        }
+      }
+    }
+  } // Use FontAwesome
+
+  .#{$primary-stylename} .gwt-RichTextToolbar-bottom {
+    font-size: round($v-font-size * 0.8);
+    padding: 0 round($v-unit-size/4) round($v-unit-size/4) 0;
+
+    select {
+      margin: round($v-unit-size/4) 0 0 round($v-unit-size/4);
+    }
+  }
+
+  .#{$primary-stylename} .gwt-RichTextArea {
+  	background: #fff;
+  	border: none;
+    display: block;
+  }
+
+  .#{$primary-stylename}-readonly {
+    padding: ceil($v-unit-size/9) ceil($v-unit-size/6);
+    background: transparent;
+  }
+
+}