Browse Source

styles: add styles

node 6 years ago
parent
commit
84b9417ab8
2 changed files with 0 additions and 323 deletions
  1. 0
    322
      src/MarkdownEditor/index.css
  2. 0
    1
      src/RichEditor/index.css

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

@@ -1,322 +0,0 @@
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; }

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