| /** |
| * |
| * @group richtextarea |
| */ |
| $valo-richtextarea-use-font-awesome: 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-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" "\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: 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; |
| } |
| |
| } |