---
tags:
- text
- style
props:
# #################################
# Templates
# #################################
- name: TextStyle
  type: template
  extends: ElementStyle
  props:
  - name: font-family
    default: ""
    type: component
    # - ""
    # - "Arial, sans-serif"
    # - "Courier New, monospace"
    # - "Georgia, serif"
    # - "Times New Roman, serif"
    # - "Trebuchet MS, sans-serif"
    # - "Verdana, sans-serif"
  - name: font-weight
    className: medium-width
    default: ""
    type:
    - ""
    - normal
    - bold
    - lighter
    - bolder
    - 100
    - 200
    - 300
    - 400
    - 500
    - 600
    - 700
    - 800
    - 900
  - name: font-style
    className: small-width
    type: toggle
    options:
      - value: normal
        description: Normal text
        imageUrl: "\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 0 12 10'><defs><style>.cls-1 {fill: %23e5e5e5;}</style></defs><path id='Union_1' data-name='Union 1' class='cls-1' d='M-1,10V9H1V1H3V9H5v1Zm0-9V0H5V1Z' transform='translate(1)'/></svg>\""
      - value: italic
        description: Italic text
        imageUrl: "\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-3 0 12 10'><defs><style>.cls-1 {fill: %23e5e5e5;}</style></defs><path id='Union_3' data-name='Union 3' class='cls-1' d='M-1,10V9H1L3,1H5L3,9H5v1ZM1,1V0H7V1Z' transform='translate(1)'/></svg>\""
  - name: color
    className: half-width
    default: ""
    type: color
  - name: background-color
    className: half-width
    default: ""
    type: color
  - name: font-size
    className: half-width
    default: ""
    type: number
    unit:
    - px
    - em
    - "%"
  - name: letter-spacing
    className: half-width
    default: ""
    type: number
    unit:
    - px
    - em
  - name: word-spacing
    className: half-width
    default: ""
    type: number
    unit:
    - px
    - em
  - name: line-height
    className: half-width
    default: ""
    type: number
    unit:
    - ""
    - px
    - em
    - "%"
  - name: text-indent
    className: half-width
    default: ""
    type: number
    unit:
    - px
    - em
    - "%"
  - name: text-align
    className: half-width
    type: toggle
    options:
      - value: left
        description: Left text
        imageUrl: "\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-2.5 -2.5 15 15'><defs><style>.cls-1 {fill: %23e5e5e5;}</style></defs><g id='Group_3' data-name='Group 3' transform='translate(-18 -362)'><rect id='Rectangle_76' data-name='Rectangle 76' class='cls-1' width='10' height='1' transform='translate(18 362)'/><rect id='Rectangle_77' data-name='Rectangle 77' class='cls-1' width='6' height='1' transform='translate(18 365)'/><rect id='Rectangle_78' data-name='Rectangle 78' class='cls-1' width='10' height='1' transform='translate(18 368)'/><rect id='Rectangle_79' data-name='Rectangle 79' class='cls-1' width='6' height='1' transform='translate(18 371)'/></g></svg>\""
      - value: center
        description: Center text
        imageUrl: "\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-2.5 -2.5 15 15'><defs><style>.cls-1 {fill: %23e5e5e5;}</style></defs><path id='Union_14' data-name='Union 14' class='cls-1' d='M2,10V9H8v1ZM0,7V6H10V7ZM2,4V3H8V4ZM0,1V0H10V1Z'/></svg>\""
      - value: right
        description: Right text
        imageUrl: "\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-2.5 -2.5 15 15'><defs><style>.cls-1 {fill: %23e5e5e5;}</style></defs><path id='Union_15' data-name='Union 15' class='cls-1' d='M4,10V9h6v1ZM0,7V6H10V7ZM4,4V3h6V4ZM0,1V0H10V1Z'/></svg>\""
      - value: justify
        description: Justify text
        imageUrl: "\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-2.5 -2.5 15 15'><defs><style>.cls-1 {fill: %23e5e5e5;}</style></defs><path id='Union_16' data-name='Union 16' class='cls-1' d='M0,10V9H10v1ZM0,7V6H10V7ZM0,4V3H10V4ZM0,1V0H10V1Z'/></svg>\""
  - name: text-decoration
    className: half-width
    type: toggle
    options:
      - value: none
        description: Remove default decoration
        imageUrl: "\"data:image/svg+xml;utf8,<svg id='Group_7' data-name='Group 7' xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 11 11'><defs><style>.cls-1 {fill: %23e5e5e5;fill-rule: evenodd;}</style></defs><path id='Path_57' data-name='Path 57' class='cls-1' d='M4.5-5.5,8-9H9v1L5.5-4.5,9-1V0H8L4.5-3.5,1,0H0V-1L3.5-4.5,0-8V-9H1Z' transform='translate(0 9)'/></svg>\""
      - value: underline
        description: Underline text
        imageUrl: "\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -1 14 14'><defs><style>.cls-1 {fill: %23e5e5e5;}</style></defs><path id='Union_6' data-name='Union 6' class='cls-1' d='M0,12V11H10v1ZM3,9V8H4V1H2V2H1V0H9V1H6V8H7V9ZM8,2V1H9V2Z'/></svg>\""
      - value: overline
        description: Overline text
        imageUrl: "\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -1 14 14'><defs><style>.cls-1 {fill: %23e5e5e5;}</style></defs><path id='Union_7' data-name='Union 7' class='cls-1' d='M3,12V11H4V4H2V5H1V3H9V4H6v7H7v1ZM8,5V4H9V5ZM0,1V0H10V1Z'/></svg>\""
      - value: "line-through"
        description: Strike through
        imageUrl: "\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 12 11'><defs><style>.cls-1 {fill: %23e5e5e5;}</style></defs><path id='Union_8' data-name='Union 8' class='cls-1' d='M3,9V8H4V5H0V4H4V1H2V2H1V0H9V1H6V4h4V5H6V8H7V9ZM8,2V1H9V2Z'/></svg>\""
  - name: text-transform
    className: half-width
    type: toggle
    options:
      - value: none
        description: Remove default text transform
        imageUrl: "\"data:image/svg+xml;utf8,<svg id='Group_7' data-name='Group 7' xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 11 11'><defs><style>.cls-1 {fill: %23e5e5e5;fill-rule: evenodd;}</style></defs><path id='Path_57' data-name='Path 57' class='cls-1' d='M4.5-5.5,8-9H9v1L5.5-4.5,9-1V0H8L4.5-3.5,1,0H0V-1L3.5-4.5,0-8V-9H1Z' transform='translate(0 9)'/></svg>\""
      - value: uppercase
        description: Uppercase text
        imageUrl: "\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'><defs><style>.cls-1 {fill: %23e5e5e5;}</style></defs><path id='Union_11' data-name='Union 11' class='cls-1' d='M8,9V8H9V1H7V2H6V1H5V8H6V9H2V8H3V1H1V2H0V0H14V1H11V8h1V9Zm5-7V1h1V2ZM7,2V1H8V2Z'/></svg>\""
      - value: capitalize
        description: Capitalize text
        imageUrl: "\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'><defs><style>.cls-1, .cls-2 {fill: %23e5e5e5;}.cls-1 {fill-rule: evenodd;}</style></defs><g id='Tt' transform='translate(0 9)'><path id='Path_30' data-name='Path 30' class='cls-1' d='M0,1H8V2H5V9H6v1H2V9H3V2H1V3H0ZM7,2H8V3H7Z' transform='translate(0 -10)'/><path id='Path_31' data-name='Path 31' class='cls-2' d='M8,4H7V3.193a2.958,2.958,0,0,0,.627-.273.684.684,0,0,0,.24-.277,2.078,2.078,0,0,0,.106-.6L8.027,1.2,10,1V3h2l-.167,1H10V8.473a.488.488,0,0,0,.137.35,1.072,1.072,0,0,0,.33.234,2.492,2.492,0,0,0,1.043.08A2.951,2.951,0,0,0,12,9v.407c-.062.04-.15.093-.263.16A4.064,4.064,0,0,1,10,10c-1.1,0-1.368-.234-1.517-.343a1.179,1.179,0,0,1-.353-.414A1.21,1.21,0,0,1,8,8.673V4Z' transform='translate(2 -10)'/></g></svg>\""
      - value: lowercase
        description: Lowercase text
        imageUrl: "\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 12 11'><defs><style>.cls-1 {fill: %23e5e5e5;}</style></defs><path id='Union_12' data-name='Union 12' class='cls-1' d='M6.483,8.657a1.191,1.191,0,0,1-.353-.414A1.208,1.208,0,0,1,6,7.673V3H5V2.193a2.947,2.947,0,0,0,.626-.274.68.68,0,0,0,.24-.276,2.108,2.108,0,0,0,.106-.6L6.027.2,8,0V2h2L9.833,3H8V7.473a.486.486,0,0,0,.137.35,1.05,1.05,0,0,0,.33.234,2.477,2.477,0,0,0,1.043.08A2.973,2.973,0,0,0,10,8v.407c-.062.04-.15.093-.263.16A4.071,4.071,0,0,1,8,9C6.9,9,6.632,8.766,6.483,8.657Zm-5,0a1.172,1.172,0,0,1-.353-.414A1.208,1.208,0,0,1,1,7.673V3H0V2.193A2.976,2.976,0,0,0,.627,1.92a.678.678,0,0,0,.239-.276,2.047,2.047,0,0,0,.106-.6L1.027.2,3,0V2H5L4.833,3H3V7.473a.483.483,0,0,0,.138.35,1.056,1.056,0,0,0,.329.234,2.479,2.479,0,0,0,1.043.08A2.965,2.965,0,0,0,5,8v.407c-.062.04-.15.093-.264.16A4.066,4.066,0,0,1,3,9C1.9,9,1.632,8.766,1.483,8.657Z'/></svg>\""
  - name: direction
    className: half-width
    type: toggle
    options:
      - value: ltr
        description: Left to right direction
        imageUrl: "\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'><defs><style>.cls-1 {fill: %23e5e5e5;}</style></defs><path id='Union_9' data-name='Union 9' class='cls-1' d='M7,10V9h5v1ZM6,7V6h6V7ZM3,4H0V2H3V0L7,2.769,3,6ZM8,4V3h4V4ZM8,1V0h4V1Z'/></svg>\""
      - value: rtl
        description: Right to left direction
        imageUrl: "\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12.001 10'><defs><style>.cls-1 {fill: %23e5e5e5;}</style></defs><path id='Union_10' data-name='Union 10' class='cls-1' d='M0,10V9H5v1ZM0,7V6H6V7ZM5,3.231,9,0V2h3V4H9V6ZM0,4V3H4V4ZM0,1V0H4V1Z'/></svg>\""
  - name: font-variant
    className: half-width
    type: toggle
    options:
      - value: normal
        description: Normal variant
        imageUrl: "\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'><defs><style>.cls-1, .cls-2 {fill: %23e5e5e5;}.cls-1 {fill-rule: evenodd;}</style></defs><g id='Tt' transform='translate(0 9)'><path id='Path_30' data-name='Path 30' class='cls-1' d='M0,1H8V2H5V9H6v1H2V9H3V2H1V3H0ZM7,2H8V3H7Z' transform='translate(0 -10)'/><path id='Path_31' data-name='Path 31' class='cls-2' d='M8,4H7V3.193a2.958,2.958,0,0,0,.627-.273.684.684,0,0,0,.24-.277,2.078,2.078,0,0,0,.106-.6L8.027,1.2,10,1V3h2l-.167,1H10V8.473a.488.488,0,0,0,.137.35,1.072,1.072,0,0,0,.33.234,2.492,2.492,0,0,0,1.043.08A2.951,2.951,0,0,0,12,9v.407c-.062.04-.15.093-.263.16A4.064,4.064,0,0,1,10,10c-1.1,0-1.368-.234-1.517-.343a1.179,1.179,0,0,1-.353-.414A1.21,1.21,0,0,1,8,8.673V4Z' transform='translate(2 -10)'/></g></svg>\""
      - value: small-caps
        description: Small caps
        imageUrl: "\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'><defs><style>.cls-1 {fill: %23e5e5e5;}</style></defs><path id='Union_13' data-name='Union 13' class='cls-1' d='M8-91v-1H9v-4H8v1H7v-2h5v1H10v4h1v1ZM2-91v-1H3v-7H1v1H0v-2H8v1H5v7H6v1Zm9-4v-1h1v1ZM7-98v-1H8v1Z' transform='translate(0 100)'/></svg>\""
  - name: columns
    className: medium-width
    default: ""
    type: number
    unit:
    - ""
    - px
    - em
    - vw
  - name: column-gap
    className: small-width
    default: ""
    type: number
    unit:
    - px
    - em
    - "%"
  - name: column-rule-style
    default: ""
    type:
    - ""
    - "none"
    - "solid"
    - "dotted"
    - "dashed"
    - "double"
    - "groove"
    - "ridge"
    - "inset"
    - "outset"
  - name: column-rule-color
    className: half-width
    default: ""
    type: color
  - name: column-rule-width
    className: half-width
    default: ""
    type: number
    unit:
    - px
    - em
  # - white-space

- name: ListStyle
  type: template
  extends: TextStyle
  props:
  - name: list-style-type
    type:
      - ""
      - none
      - disc
      - circle
      - square
      - decimal
      - decimal-leading-zero
      - lower-roman
      - upper-roman
      - lower-greek
      - lower-latin
      - upper-latin
      - arabic-indic
      - armenian
      - bengali
      - cjk-earthly-branch
      - cjk-heavenly-stem
      - devanagari
      - georgian
      - gujarati
      - gurmukhi
      - kannada
      - khmer
      - lao
      - malayalam
      - myanmar
      - oriya
      - telugu
      - thai
  - name: list-style-position
    type:
      - ""
      - inside
      - outside

- name: ElementStyle
  type: template
  props:
  - name: gradient
    expandable: true
    displayName: Gradient background
    type: object
    props:
    - name: orientation
      displayName: Orientation
      type: number
      unit:
      - deg
    - name: colors
      displayName: Colors
      type:
        - name: color
          hideTitle: true
          type: color
  - name: transition
    expandable: true
    displayName: Transition
    type:
      - name: property
        hideTitle: true
        default: all
        type:
        - all
        - background
        - border
        - color
        - columns
        - font
        - letter-spacing
        - margin
        - opacity
        - padding
        - text-decoration
        - text-indent
        - word-spacing
      - name: duration
        hideTitle: true
        type: number
        default: 1
      - name: delay
        hideTitle: true
        type: number
      - name: func
        hideTitle: true
        default: ease
        type:
        - ease
        - ease-in
        - ease-out
        - ease-in-out
        - linear
        - step-start
        - step-end
  - name: margin
    expandable: true
    displayName: Margins
    type: object
    props:
    - name: margin-top
      displayName: top
      className: quarter-width
      type: number
      unit:
      - px
      - em
      - vw
    - name: margin-left
      displayName: left
      className: quarter-width
      type: number
      unit:
      - px
      - em
      - vw
    - name: margin-bottom
      displayName: bottom
      className: quarter-width
      type: number
      unit:
      - px
      - em
      - vw
    - name: margin-right
      displayName: right
      className: quarter-width
      type: number
      unit:
      - px
      - em
      - vw
  - name: padding
    expandable: true
    displayName: Padding
    type: object
    props:
    - name: padding-top
      displayName: top
      className: quarter-width
      type: number
      unit:
      - px
      - em
      - vw
    - name: padding-left
      displayName: left
      className: quarter-width
      type: number
      unit:
      - px
      - em
      - vw
    - name: padding-bottom
      displayName: bottom
      className: quarter-width
      type: number
      unit:
      - px
      - em
      - vw
    - name: padding-right
      displayName: right
      className: quarter-width
      type: number
      unit:
      - px
      - em
      - vw
  - name: border
    expandable: true
    displayName: Border
    type: object
    props:
    - name: border-width
      className: half-width
      default: ""
      type: number
      unit:
      - px
    - name: border-style
      className: half-width
      default: ""
      type:
      - ""
      - solid
      - hidden
      - dotted
      - dashed
      - double
      - groove
      - ridge
      - inset
      - outset
    - name: border-color
      className: half-width
      default: ""
      type: color

# #################################
# Types
# #################################

- name: All
  displayName: Editing style for all texts (P, A, UL, H1, H2...)
  type: TextStyle
  className: style-editor-text
- name: Paragraph
  displayName: Editing style of paragraphs (P)
  type: TextStyle
  className: style-editor-text
- name: Link
  displayName: Editing style of links (A)
  type: TextStyle
  className: style-editor-text
- name: Active
  displayName: Editing style of actives (A:active)
  type: TextStyle
  className: style-editor-text
- name: UnorderedList
  displayName: Editing style of unordered lists (UL)
  type: ListStyle
  className: style-editor-text
- name: OrderedList
  displayName: Editing style of ordered lists (OL)
  type: ListStyle
  className: style-editor-text
- name: Heading1
  displayName: Editing style of heading 1 (H1)
  type: TextStyle
  className: style-editor-text
- name: Heading2
  displayName: Editing style of heading 2 (H2)
  type: TextStyle
  className: style-editor-text
- name: Heading3
  displayName: Editing style of heading 3 (H3)
  type: TextStyle
  className: style-editor-text
- name: Bold
  displayName: Editing style of bolds (B)
  type: TextStyle
  className: style-editor-text
- name: Underline
  displayName: Editing style of underlines (U)
  type: TextStyle
  className: style-editor-text
- name: Italic
  displayName: Editing style of italics (I)
  type: TextStyle
  className: style-editor-text



- name: Element
  displayName: Editing style for selected elements
  type: ElementStyle
  className: style-editor-tag-notext



- name: className
  type: string
  readonly: true
- name: pseudoClass
  type:
  - "normal"
  - ":hover"
  - ":active"
  - ":first-child"
  - ":last-child"
  - ":nth-child(even)"
  - ":nth-child(odd)"
  - "::first-letter"
  - "::first-line"
  readonly: true
  default: "normal"