123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109 |
- /**
- *
- * @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: ThemeIcons;
- }
-
- @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 ThemeIcons
-
- .#{$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;
- }
-
- }
|