summaryrefslogtreecommitdiff
path: root/app/assets/stylesheets/components/content_editor.scss
blob: 44429b439d9485c71ab84b812aae73637a15a408 (plain)
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
.ProseMirror {
  min-height: 128px;
  max-height: 55vh;
  overflow-y: auto;

  ::selection {
    background-color: transparent;
  }

  &:not(.ProseMirror-hideselection) .content-editor-selection {
    background-color: $blue-100;
    box-shadow: 0 2px 0 $blue-100,  0 -2px 0 $blue-100;
  }

  td,
  th,
  li,
  dd,
  dt,
  summary {
    :first-child {
      margin-bottom: 0 !important;
    }
  }

  img.ProseMirror-selectednode {
    outline: 3px solid rgba($blue-400, 0.48);
    outline-offset: -3px;
  }

  ul[data-type='taskList'] {
    list-style: none;
    padding: 0;

    li {
      margin: 0 !important;
    }
  }

  [data-type='taskList'] {
    p {
      margin-bottom: 0;
    }

    li {
      > label,
      > div {
        display: inline-block;
        vertical-align: top;
      }

      > label {
        padding: $gl-spacing-scale-1 $gl-spacing-scale-3 0 0;
        margin: 0;
      }
    }
  }


  .dl-content {
    width: 100%;

    > li {
      list-style-type: none;
      margin-left: $gl-spacing-scale-5;

      &.dl-term {
        margin: 0;
        font-weight: 600;
      }
    }
  }

  .details-toggle-icon {
    cursor: pointer;
    z-index: 1;

    &::before {
      content: '▶';
      display: inline-block;
      width: $gl-spacing-scale-4;
    }

    &.is-open::before {
      content: '▼';
    }
  }

  .details-content {
    width: calc(100% - #{$gl-spacing-scale-4});

    > li {
      list-style-type: none;
      margin-left: $gl-spacing-scale-2;
    }

    > :not(:first-child) {
      display: none;
    }

    &.is-open > :not(:first-child) {
      display: inherit;
    }
  }
}

.table-creator-grid-item {
  box-shadow: inset 0 0 0 $gl-spacing-scale-2 $white,
    inset $gl-spacing-scale-1 $gl-spacing-scale-1 0 #{$gl-spacing-scale-2 * 3 / 4} $gray-100,
    inset #{-$gl-spacing-scale-1} #{-$gl-spacing-scale-1} 0 #{$gl-spacing-scale-2 * 3 / 4} $gray-100 !important;

  &.active {
    box-shadow: inset 0 0 0 $gl-spacing-scale-2 $white,
      inset $gl-spacing-scale-1 $gl-spacing-scale-1 0 $gl-spacing-scale-2 $blue-500,
      inset #{-$gl-spacing-scale-1} #{-$gl-spacing-scale-1} 0 $gl-spacing-scale-2 $blue-500 !important;
  }
}

.content-editor-dropdown .dropdown-menu {
  width: auto !important;

  @include gl-min-w-0;

  button {
    @include gl-white-space-nowrap;
  }
}


.content-editor-color-chip::after {
  content: ' ';
  display: inline-block;
  align-items: center;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  margin-left: 4px;
  margin-top: -2px;
  border: 1px solid $black-transparent;
  background-color: var(--gl-color-chip-color);
}

.content-editor-comment {
  &::before {
    content: '<!--';
  }

  &::after {
    content: '-->';
  }
}



.bubble-menu-form {
  width: 320px;
}