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
66065ed8bb
commit
84b9417ab8
2 changed files with 0 additions and 323 deletions
Split View Show Diff Stats
  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