Browse Source

styles: add styles

node 6 years ago
parent
commit
66065ed8bb
2 changed files with 323 additions and 0 deletions
  1. 322
    0
      lib/MarkdownEditor/index.css
  2. 1
    0
      lib/RichEditor/index.css

+ 322
- 0
lib/MarkdownEditor/index.css View File

@@ -0,0 +1,322 @@
1
+.mde-header {
2
+  flex-shrink: 0;
3
+  display: flex;
4
+  flex-wrap: wrap;
5
+  align-items: stretch;
6
+  border-bottom: 1px solid #c8ccd0;
7
+  border-radius: 2px 2px 0 0;
8
+  background: #f9f9f9; }
9
+  .mde-header .mde-toolbar-children {
10
+    flex-grow: 1;
11
+    display: flex;
12
+    justify-content: flex-end;
13
+    align-items: stretch; }
14
+  .mde-header button:focus {
15
+    outline: 0; }
16
+  .mde-header ul.mde-header-group {
17
+    margin: 0;
18
+    padding: 10px;
19
+    list-style: none;
20
+    display: flex;
21
+    flex-wrap: nowrap; }
22
+    .mde-header ul.mde-header-group li.mde-header-item {
23
+      display: inline-block;
24
+      position: relative;
25
+      margin: 0 4px; }
26
+      .mde-header ul.mde-header-group li.mde-header-item button {
27
+        text-align: left;
28
+        cursor: pointer;
29
+        height: 22px;
30
+        padding: 4px;
31
+        margin: 0;
32
+        border: none;
33
+        background: none;
34
+        color: #242729; }
35
+
36
+@keyframes tooltip-appear {
37
+  from {
38
+    opacity: 0; }
39
+  to {
40
+    opacity: 1; } }
41
+        .mde-header ul.mde-header-group li.mde-header-item button.tooltipped:hover::before {
42
+          animation-name: tooltip-appear;
43
+          animation-duration: 0.2s;
44
+          animation-delay: 0.5s;
45
+          animation-fill-mode: forwards;
46
+          opacity: 0;
47
+          position: absolute;
48
+          z-index: 1000001;
49
+          width: 0;
50
+          height: 0;
51
+          color: rgba(0, 0, 0, 0.8);
52
+          pointer-events: none;
53
+          content: "";
54
+          border: 5px solid transparent;
55
+          top: -5px;
56
+          right: 50%;
57
+          bottom: auto;
58
+          margin-right: -5px;
59
+          border-top-color: rgba(0, 0, 0, 0.8); }
60
+        .mde-header ul.mde-header-group li.mde-header-item button.tooltipped:hover::after {
61
+          animation-name: tooltip-appear;
62
+          animation-duration: 0.2s;
63
+          animation-delay: 0.5s;
64
+          animation-fill-mode: forwards;
65
+          font-size: 11px;
66
+          opacity: 0;
67
+          position: absolute;
68
+          z-index: 1000000;
69
+          padding: 5px 8px;
70
+          color: #fff;
71
+          pointer-events: none;
72
+          content: attr(aria-label);
73
+          background: rgba(0, 0, 0, 0.8);
74
+          border-radius: 3px;
75
+          right: 50%;
76
+          bottom: 100%;
77
+          transform: translateX(50%);
78
+          margin-bottom: 5px;
79
+          white-space: nowrap; }
80
+      .mde-header ul.mde-header-group li.mde-header-item ul.react-mde-dropdown {
81
+        position: absolute;
82
+        left: 0;
83
+        top: 30px;
84
+        background-color: white;
85
+        border: 1px solid #c8ccd0;
86
+        padding: 5px;
87
+        z-index: 2;
88
+        transform: translateX(-9px); }
89
+        .mde-header ul.mde-header-group li.mde-header-item ul.react-mde-dropdown li {
90
+          margin: 0;
91
+          white-space: nowrap;
92
+          list-style: none;
93
+          display: block; }
94
+          .mde-header ul.mde-header-group li.mde-header-item ul.react-mde-dropdown li button {
95
+            display: block;
96
+            height: auto; }
97
+            .mde-header ul.mde-header-group li.mde-header-item ul.react-mde-dropdown li button p {
98
+              display: block;
99
+              margin: 0;
100
+              padding: 0;
101
+              font-weight: bold;
102
+              line-height: 1em;
103
+              background: none;
104
+              border: 0;
105
+              text-align: left; }
106
+              .mde-header ul.mde-header-group li.mde-header-item ul.react-mde-dropdown li button p:hover {
107
+                color: #4078c0; }
108
+              .mde-header ul.mde-header-group li.mde-header-item ul.react-mde-dropdown li button p.header-1 {
109
+                font-size: 20px; }
110
+              .mde-header ul.mde-header-group li.mde-header-item ul.react-mde-dropdown li button p.header-2 {
111
+                font-size: 18px; }
112
+              .mde-header ul.mde-header-group li.mde-header-item ul.react-mde-dropdown li button p.header-3 {
113
+                font-size: 14px; }
114
+              .mde-header ul.mde-header-group li.mde-header-item ul.react-mde-dropdown li button p.header-4 {
115
+                font-size: 12px; }
116
+        .mde-header ul.mde-header-group li.mde-header-item ul.react-mde-dropdown::before {
117
+          position: absolute;
118
+          content: "";
119
+          width: 0;
120
+          height: 0;
121
+          border: 8px solid transparent;
122
+          border-bottom-color: rgba(0, 0, 0, 0.15);
123
+          top: -16px;
124
+          left: 3px;
125
+          transform: translateX(50%); }
126
+        .mde-header ul.mde-header-group li.mde-header-item ul.react-mde-dropdown::after {
127
+          position: absolute;
128
+          content: "";
129
+          width: 0;
130
+          height: 0;
131
+          border: 7px solid transparent;
132
+          border-bottom-color: white;
133
+          top: -14px;
134
+          left: 5px;
135
+          transform: translateX(50%); }
136
+
137
+.mde-text .public-DraftEditor-content {
138
+  width: 100%;
139
+  min-height: 200px;
140
+  padding: 10px; }
141
+
142
+.mde-preview {
143
+  min-height: 200px; }
144
+  .mde-preview .mde-preview-content {
145
+    padding: 10px; }
146
+    .mde-preview .mde-preview-content p, .mde-preview .mde-preview-content blockquote, .mde-preview .mde-preview-content ul, .mde-preview .mde-preview-content ol, .mde-preview .mde-preview-content dl, .mde-preview .mde-preview-content table, .mde-preview .mde-preview-content pre {
147
+      margin-top: 0;
148
+      margin-bottom: 16px; }
149
+    .mde-preview .mde-preview-content h1, .mde-preview .mde-preview-content h2, .mde-preview .mde-preview-content h3 {
150
+      margin-top: 24px;
151
+      margin-bottom: 16px;
152
+      font-weight: 600;
153
+      line-height: 1.25;
154
+      border-bottom: 1px solid #eee;
155
+      padding-bottom: 0.3em; }
156
+    .mde-preview .mde-preview-content h1 {
157
+      font-size: 1.6em; }
158
+    .mde-preview .mde-preview-content h2 {
159
+      font-size: 1.4em; }
160
+    .mde-preview .mde-preview-content h3 {
161
+      font-size: 1.2em; }
162
+    .mde-preview .mde-preview-content ul, .mde-preview .mde-preview-content ol {
163
+      padding-left: 2em; }
164
+    .mde-preview .mde-preview-content blockquote {
165
+      margin-left: 0;
166
+      padding: 0 1em;
167
+      color: #777;
168
+      border-left: 0.25em solid #ddd; }
169
+      .mde-preview .mde-preview-content blockquote > :first-child {
170
+        margin-top: 0; }
171
+      .mde-preview .mde-preview-content blockquote > :last-child {
172
+        margin-bottom: 0; }
173
+    .mde-preview .mde-preview-content code {
174
+      padding: 0.2em 0 0.2em 0;
175
+      margin: 0;
176
+      font-size: 90%;
177
+      background-color: rgba(0, 0, 0, 0.04);
178
+      border-radius: 3px; }
179
+      .mde-preview .mde-preview-content code::before, .mde-preview .mde-preview-content code::after {
180
+        letter-spacing: -0.2em;
181
+        content: "\00a0"; }
182
+    .mde-preview .mde-preview-content pre {
183
+      padding: 16px;
184
+      overflow: auto;
185
+      font-size: 85%;
186
+      line-height: 1.45;
187
+      background-color: #f7f7f7;
188
+      border-radius: 3px; }
189
+      .mde-preview .mde-preview-content pre code {
190
+        display: inline;
191
+        padding: 0;
192
+        margin: 0;
193
+        overflow: visible;
194
+        line-height: inherit;
195
+        word-wrap: normal;
196
+        background-color: transparent;
197
+        border: 0; }
198
+        .mde-preview .mde-preview-content pre code::before, .mde-preview .mde-preview-content pre code::after {
199
+          content: none; }
200
+      .mde-preview .mde-preview-content pre > code {
201
+        padding: 0;
202
+        margin: 0;
203
+        font-size: 100%;
204
+        word-break: normal;
205
+        white-space: pre;
206
+        background: transparent;
207
+        border: 0; }
208
+    .mde-preview .mde-preview-content a {
209
+      color: #4078c0;
210
+      text-decoration: none; }
211
+      .mde-preview .mde-preview-content a:hover {
212
+        text-decoration: underline; }
213
+    .mde-preview .mde-preview-content > *:first-child {
214
+      margin-top: 0 !important; }
215
+    .mde-preview .mde-preview-content > *:last-child {
216
+      margin-bottom: 0 !important; }
217
+    .mde-preview .mde-preview-content::after {
218
+      display: table;
219
+      clear: both;
220
+      content: ""; }
221
+    .mde-preview .mde-preview-content table {
222
+      display: block;
223
+      width: 100%;
224
+      border-spacing: 0;
225
+      border-collapse: collapse; }
226
+      .mde-preview .mde-preview-content table thead th {
227
+        font-weight: bold; }
228
+      .mde-preview .mde-preview-content table th, .mde-preview .mde-preview-content table td {
229
+        padding: 6px 13px;
230
+        border: 1px solid #c8ccd0; }
231
+
232
+* {
233
+  box-sizing: border-box; }
234
+
235
+.react-mde {
236
+  border: 1px solid #c8ccd0;
237
+  border-radius: 2px; }
238
+
239
+.react-mde-vertical-layout {
240
+  display: flex;
241
+  flex-direction: column; }
242
+  .react-mde-vertical-layout .mde-tabs {
243
+    display: flex;
244
+    align-items: stretch; }
245
+    .react-mde-vertical-layout .mde-tabs .mde-tab {
246
+      border: none;
247
+      border-left: 1px solid #c8ccd0;
248
+      padding: 10px;
249
+      background: none; }
250
+  .react-mde-vertical-layout .react-mde-content {
251
+    display: flex;
252
+    flex-direction: column; }
253
+    .react-mde-vertical-layout .react-mde-content .mde-text {
254
+      min-height: 200px;
255
+      height: auto;
256
+      overflow-y: auto; }
257
+    .react-mde-vertical-layout .react-mde-content .mde-preview {
258
+      min-height: 0;
259
+      height: auto;
260
+      overflow-y: auto;
261
+      border-top: 1px solid #c8ccd0; }
262
+
263
+.react-mde-no-preview-layout {
264
+  height: 100%;
265
+  display: flex;
266
+  flex-direction: column; }
267
+  .react-mde-no-preview-layout .mde-text {
268
+    overflow-y: auto; }
269
+
270
+.react-mde-horizontal-layout {
271
+  height: 100%;
272
+  display: flex;
273
+  flex-direction: column; }
274
+  .react-mde-horizontal-layout .mde-tabs {
275
+    display: flex;
276
+    align-items: stretch; }
277
+    .react-mde-horizontal-layout .mde-tabs .mde-tab {
278
+      border: none;
279
+      border-left: 1px solid #c8ccd0;
280
+      padding: 10px;
281
+      background: none; }
282
+    .react-mde-horizontal-layout .mde-tabs .mde-tab:hover {
283
+      cursor: pointer; }
284
+  .react-mde-horizontal-layout .mde-content {
285
+    display: flex;
286
+    height: 100%; }
287
+    .react-mde-horizontal-layout .mde-content .mde-text {
288
+      min-width: 50%;
289
+      overflow-y: auto;
290
+      border-radius: 0; }
291
+    .react-mde-horizontal-layout .mde-content .mde-preview {
292
+      min-width: 50%;
293
+      border-left: 1px solid #c8ccd0;
294
+      overflow-y: auto; }
295
+
296
+.react-mde-tabbed-layout {
297
+  height: 100%;
298
+  display: flex;
299
+  flex-direction: column; }
300
+  .react-mde-tabbed-layout .mde-tabs {
301
+    display: flex;
302
+    align-items: flex-end; }
303
+    .react-mde-tabbed-layout .mde-tabs .mde-tab {
304
+      position: relative;
305
+      top: 1px;
306
+      border: 1px solid #f9f9f9;
307
+      border-bottom: none;
308
+      border-top-left-radius: 2px;
309
+      border-top-right-radius: 2px;
310
+      margin-right: 10px;
311
+      padding: 10px;
312
+      background: none; }
313
+    .react-mde-tabbed-layout .mde-tabs .mde-tab:hover {
314
+      border-color: #c8ccd0;
315
+      cursor: pointer; }
316
+    .react-mde-tabbed-layout .mde-tabs .mde-tab-activated {
317
+      border-color: #c8ccd0;
318
+      background: white; }
319
+  .react-mde-tabbed-layout .mde-text {
320
+    overflow-y: auto; }
321
+  .react-mde-tabbed-layout .mde-preview {
322
+    overflow-y: auto; }

+ 1
- 0
lib/RichEditor/index.css
File diff suppressed because it is too large
View File