npm
/
editor
Watch 45
Star 0
Fork 1
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

styles: add styles

node 6 years ago
parent
ba4628f807
commit
66065ed8bb
2 changed files with 323 additions and 0 deletions
Split View Show Diff Stats
  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