quasar/ui/src/components/editor/QEditor.styl at v1 · hipertracker/quasar · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
.q-editor
  border: 1px solid $editor-border-color
  border-radius: $generic-border-radius
  background-color: #fff

  &.disabled
    border-style: dashed

  &.fullscreen
    max-height: 100%

  > div:first-child,
  &__toolbars-container,
  &__toolbars-container > div:first-child
    border-top-left-radius: inherit
    border-top-right-radius: inherit

  &__toolbars-container
    max-width: 100%

  &__content
    outline: 0
    padding: $editor-content-padding
    min-height: $editor-content-min-height
    border-bottom-left-radius: inherit
    border-bottom-right-radius: inherit
    overflow: auto
    max-width: 100%

    pre
      white-space: pre-wrap

    hr
      border: 0
      outline: 0
      margin: 1px
      height: 1px
      background: $editor-hr-color

    &:empty:not(:focus):before
      content: attr(placeholder)
      opacity: .7

  &__toolbar
    border-bottom: 1px solid $editor-border-color
    min-height: 32px

  .q-btn
    margin: $editor-button-gutter

  &__toolbar-group
    position: relative
    margin: 0 $editor-button-gutter
    & + &
      &:before
        content: ''
        position: absolute
        left: (- $editor-button-gutter)
        top: $editor-button-gutter
        bottom: $editor-button-gutter
        width: 1px
        background: $editor-border-color

  &__link-input
    color: inherit
    text-decoration: none
    text-transform: none
    border: none
    border-radius: 0
    background: none
    outline: 0

  &--flat
    &, .q-editor__toolbar
      border: 0

  &--dense
    .q-editor__toolbar-group
      display: flex
      align-items: center
      flex-wrap: nowrap

  &--dark
    border-color: $editor-border-dark-color

    .q-editor

      &__content hr
        background: $editor-hr-dark-color

      &__toolbar
        border-color: $editor-border-dark-color

    .q-editor__toolbar-group + .q-editor__toolbar-group:before
      background: $editor-border-dark-color