vaadin-framework/WebContent/VAADIN/themes/valo/components/_richtextarea.scss

/**
 *
 * @group richtextarea
 */
$valo-richtextarea-use-valo-icons: true !default;

/**
 *
 *
 * @param {string} $primary-stylename (v-richtextarea) - 
 *
 * @group richtextarea
 */
@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-valo-icons {

    // List of title attribute values and Valo 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" "\2014",
              "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: ValoIcons;
      }

      @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 ValoIcons

  .#{$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;
  }

}