@pnp/spfx-controls-react 3.26.0-beta.3440848 → 3.26.0-beta.3446661

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/jest-output/JUnit.xml +114 -104
  2. package/lib/common/telemetry/version.js +1 -1
  3. package/lib/controls/richText/RichText.d.ts +12 -0
  4. package/lib/controls/richText/RichText.d.ts.map +1 -1
  5. package/lib/controls/richText/RichText.js +216 -41
  6. package/lib/controls/richText/RichText.js.map +1 -1
  7. package/lib/controls/richText/RichText.module.scss.css +55 -38
  8. package/lib/controls/richText/RichText.module.scss.css.map +1 -1
  9. package/lib/controls/richText/RichText.types.d.ts +17 -1
  10. package/lib/controls/richText/RichText.types.d.ts.map +1 -1
  11. package/lib/controls/richText/RichTextPropertyPane.d.ts +45 -0
  12. package/lib/controls/richText/RichTextPropertyPane.d.ts.map +1 -1
  13. package/lib/controls/richText/RichTextPropertyPane.js +290 -21
  14. package/lib/controls/richText/RichTextPropertyPane.js.map +1 -1
  15. package/lib/controls/richText/RichTextPropertyPane.types.d.ts +3 -1
  16. package/lib/controls/richText/RichTextPropertyPane.types.d.ts.map +1 -1
  17. package/lib/controls/richText/RteColorPicker.module.scss.css +4 -3
  18. package/lib/controls/richText/RteColorPicker.module.scss.css.map +1 -1
  19. package/lib-commonjs/common/telemetry/version.js +1 -1
  20. package/lib-commonjs/controls/richText/RichText.js +216 -41
  21. package/lib-commonjs/controls/richText/RichText.js.map +1 -1
  22. package/lib-commonjs/controls/richText/RichText.module.scss.css +55 -38
  23. package/lib-commonjs/controls/richText/RichText.module.scss.css.map +1 -1
  24. package/lib-commonjs/controls/richText/RichTextPropertyPane.js +289 -20
  25. package/lib-commonjs/controls/richText/RichTextPropertyPane.js.map +1 -1
  26. package/lib-commonjs/controls/richText/RteColorPicker.module.scss.css +4 -3
  27. package/lib-commonjs/controls/richText/RteColorPicker.module.scss.css.map +1 -1
  28. package/lib-commonjs/webparts/controlsTest/components/ControlsTest.js +87 -2
  29. package/lib-commonjs/webparts/controlsTest/components/ControlsTest.js.map +1 -1
  30. package/lib-commonjs/webparts/controlsTest/components/ControlsTest.module.scss.css +13 -0
  31. package/lib-commonjs/webparts/controlsTest/components/ControlsTest.module.scss.css.map +1 -1
  32. package/package.json +1 -1
  33. package/release/analysis-logs/lint.sarif +392 -340
  34. package/release/manifests/45165954-80f9-44c1-9967-cd38ae92a33b.manifest.json +1 -1
  35. package/release/manifests/57ebd944-98ed-43f9-b722-e959d6dac6ad.manifest.json +1 -1
  36. package/release/manifests/f9c6b930-8d5d-4550-bfd9-ed5f6ca443a8.manifest.json +1 -1
package/lib-commonjs/controls/richText/RichText.module.scss.css CHANGED
@@ -1,6 +1,17 @@
1
1
  /*
2
2
  Your use of the content in the files referenced here is subject to the terms of the license at http://aka.ms/fabric-assets-license
3
3
  */
4
+ :export {
5
+ NeutralLighterAlt: "[theme:neutralLighterAlt, default:#faf9f8]";
6
+ NeutralPrimary: "[theme:neutralPrimary, default:#323130]";
7
+ NeutralTertiary: "[theme:neutralTertiary, default:#a19f9d]";
8
+ ThemePrimary: "[theme:themePrimary, default:#0078d4]";
9
+ NeutralLighter: "[theme:neutralLighter, default:#f3f2f1]";
10
+ NeutralDark: "[theme:neutralDark, default:#201f1e]";
11
+ ThemeDarker: "[theme:themeDarker, default:#004578]";
12
+ White: "[theme:white, default:#ffffff]";
13
+ }
14
+
4
15
  .richtext {
5
16
  color: inherit;
6
17
  }
@@ -83,18 +94,21 @@
83
94
  font-style: normal;
84
95
  font-weight: normal;
85
96
  font-size: 8px;
86
- speak: none;
87
97
  top: 50%;
88
- color: "[theme:neutralLighterAlt, default:#faf9f8]";
98
+ color: var(--rt-neutralLighterAlt, #f8f8f8);
89
99
  }
90
100
 
91
101
  .toolbarSubmenuDisplayButton {
92
102
  width: 100%;
93
103
  }
94
104
 
105
+ .editorShell {
106
+ position: relative;
107
+ }
108
+
95
109
  :global .pnp-richtext-quill-container .ql-toolbar {
96
110
  background-color: transparent;
97
- color: "[theme:neutralLighterAlt, default:#faf9f8]";
111
+ color: var(--rt-neutralLighterAlt, #f8f8f8);
98
112
  border: none;
99
113
  display: none;
100
114
  }
@@ -105,27 +119,27 @@
105
119
  display: inline-block !important;
106
120
  }
107
121
  :global .pnp-richtext-quill-container .ql-toolbar .ms-Button {
108
- background-color: "[theme:neutralPrimary, default:#323130]";
109
- color: "[theme:neutralLighterAlt, default:#faf9f8]" !important;
122
+ background-color: var(--rt-neutralPrimary, #323130);
123
+ color: var(--rt-neutralLighterAlt, #f8f8f8) !important;
110
124
  }
111
125
  :global .pnp-richtext-quill-container .ql-toolbar .ms-Button:hover {
112
- background-color: "[theme:neutralTertiary, default:#a19f9d]";
113
- color: "[theme:neutralLighterAlt, default:#faf9f8]";
126
+ background-color: var(--rt-neutralTertiary, #a19f9d);
127
+ color: var(--rt-neutralLighterAlt, #f8f8f8);
114
128
  }
115
129
  :global .pnp-richtext-quill-container .ql-toolbar .ms-Button:focus {
116
- border: 1px solid "[theme:neutralLighterAlt, default:#faf9f8]";
130
+ border: 1px solid var(--rt-neutralLighterAlt, #f8f8f8);
117
131
  outline: 0;
118
- color: "[theme:neutralLighterAlt, default:#faf9f8]";
132
+ color: var(--rt-neutralLighterAlt, #f8f8f8);
119
133
  }
120
134
  :global .pnp-richtext-quill-container .ql-toolbar .ms-Button:active {
121
- color: "[theme:neutralLighterAlt, default:#faf9f8]";
135
+ color: var(--rt-neutralLighterAlt, #f8f8f8);
122
136
  }
123
137
  :global .pnp-richtext-quill-container .ql-toolbar .ms-Button.is-checked {
124
- background-color: "[theme:themePrimary, default:#0078d4]" !important;
138
+ background-color: var(--rt-themePrimary, #0078d4) !important;
125
139
  }
126
140
  :global .pnp-richtext-quill-container .ql-toolbar .ms-Dropdown-title {
127
- background-color: "[theme:neutralPrimary, default:#323130]";
128
- color: "[theme:neutralLighterAlt, default:#faf9f8]" !important;
141
+ background-color: var(--rt-neutralPrimary, #323130);
142
+ color: var(--rt-neutralLighterAlt, #f8f8f8) !important;
129
143
  border: none;
130
144
  min-height: 34px;
131
145
  padding-bottom: 0px;
@@ -135,19 +149,20 @@
135
149
  -webkit-transition: all 0.3s;
136
150
  transition: all 0.3s;
137
151
  -webkit-transition-property: background-color, color;
152
+ transition-property: background-color, color;
138
153
  border-radius: 0;
139
154
  }
140
155
  :global .pnp-richtext-quill-container .ql-toolbar .ms-Dropdown-title:hover {
141
- background-color: "[theme:neutralTertiary, default:#a19f9d]";
142
- color: "[theme:neutralLighterAlt, default:#faf9f8]";
156
+ background-color: var(--rt-neutralTertiary, #a19f9d);
157
+ color: var(--rt-neutralLighterAlt, #f8f8f8);
143
158
  }
144
159
  :global .pnp-richtext-quill-container .ql-toolbar .ms-Dropdown-title:focus {
145
- border: 1px solid "[theme:neutralLighterAlt, default:#faf9f8]";
160
+ border: 1px solid var(--rt-neutralLighterAlt, #f8f8f8);
146
161
  outline: 0;
147
- color: "[theme:neutralLighterAlt, default:#faf9f8]";
162
+ color: var(--rt-neutralLighterAlt, #f8f8f8);
148
163
  }
149
164
  :global .pnp-richtext-quill-container .ql-toolbar .ms-Dropdown-title:active {
150
- color: "[theme:neutralLighterAlt, default:#faf9f8]";
165
+ color: var(--rt-neutralLighterAlt, #f8f8f8);
151
166
  }
152
167
  :global .pnp-richtext-quill-container .ql-toolbar .ms-Dropdown-caretDownWrapper {
153
168
  right: 4px;
@@ -155,8 +170,8 @@
155
170
  }
156
171
  :global .pnp-richtext-quill-container .ql-snow.ql-toolbar button,
157
172
  :global .pnp-richtext-quill-container .ql-snow .ql-toolbar button {
158
- background-color: "[theme:neutralPrimary, default:#323130]";
159
- color: "[theme:neutralLighterAlt, default:#faf9f8]";
173
+ background-color: var(--rt-neutralPrimary, #323130);
174
+ color: var(--rt-neutralLighterAlt, #f8f8f8);
160
175
  font-size: 16px;
161
176
  min-width: 34px;
162
177
  height: 34px;
@@ -169,7 +184,7 @@
169
184
  padding: 0px;
170
185
  font-family: "Segoe UI Web (West European)", Segoe UI, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif;
171
186
  border: none;
172
- margin-bottom: 2px;
187
+ margin-bottom: 0;
173
188
  z-index: 3;
174
189
  -webkit-animation-name: ms-fadeIn, ms-slideUpIn10;
175
190
  animation-name: ms-fadeIn, ms-slideUpIn10;
@@ -194,19 +209,20 @@
194
209
  :global .pnp-richtext-quill-container .ql-active .ql-editor:hover {
195
210
  border-width: 1px;
196
211
  border-style: solid;
197
- border-color: "[theme:neutralTertiary, default:#a19f9d]";
212
+ border-color: var(--rt-neutralTertiary, #a19f9d);
198
213
  }
199
214
  :global .pnp-richtext-quill-container .ql-active .ql-editor:focus,
200
215
  :global .pnp-richtext-quill-container .ql-active .ql-editor:active,
201
216
  :global .pnp-richtext-quill-container .ql-active .ql-editor:active:hover {
202
217
  border-width: 1px;
203
218
  border-style: solid;
204
- border-color: "[theme:themePrimary, default:#0078d4]";
219
+ border-color: var(--rt-themePrimary, #0078d4);
205
220
  }
206
221
  :global .pnp-richtext-quill-container .ql-active .ql-toolbar {
207
222
  display: inline-flex;
208
223
  position: absolute;
209
- top: -28px;
224
+ bottom: 100%;
225
+ left: 0;
210
226
  opacity: 1;
211
227
  height: 34px;
212
228
  -webkit-box-shadow: 0 0 5px 0 #c8c8c8;
@@ -253,7 +269,7 @@
253
269
  word-wrap: break-word;
254
270
  }
255
271
  :global .pnp-richtext-quill-container .ql-snow .ql-editor blockquote, :global .pnp-richtext-quill-container .ql-editor blockquote {
256
- border-bottom-color: "[theme:neutralLighter, default:#f3f2f1]";
272
+ border-bottom-color: var(--rt-neutralLighter, #edebe9);
257
273
  border-bottom-style: solid;
258
274
  border-bottom-width: 1px;
259
275
  border-left-style: none;
@@ -262,7 +278,7 @@
262
278
  border-right-style: none;
263
279
  border-right-width: 0;
264
280
  border-right-color: transparent;
265
- border-top-color: "[theme:neutralLighter, default:#f3f2f1]";
281
+ border-top-color: var(--rt-neutralLighter, #edebe9);
266
282
  border-top-style: solid;
267
283
  border-top-width: 1px;
268
284
  font-size: 20px;
@@ -333,7 +349,7 @@
333
349
  }
334
350
  :global .pnp-richtext-quill-container .ql-editor.ql-blank::before {
335
351
  font-style: normal;
336
- color: "[theme:neutralTertiary, default:#a19f9d]";
352
+ color: var(--rt-neutralTertiary, #a19f9d);
337
353
  font-size: 18px;
338
354
  font-weight: 400;
339
355
  line-height: 1.3;
@@ -341,10 +357,10 @@
341
357
  :global .pnp-richtext-quill-container .quill .ql-editor {
342
358
  border-width: 1px;
343
359
  border-style: solid;
344
- border-color: "[theme:neutralTertiary, default:#a19f9d]";
360
+ border-color: var(--rt-neutralTertiary, #a19f9d);
345
361
  }
346
362
  :global .pnp-richtext-quill-container .quill .ql-editor:hover {
347
- border-color: "[theme:neutralDark, default:#201f1e]";
363
+ border-color: var(--rt-neutralDark, #201f1e);
348
364
  }
349
365
  :global .pnp-richtext-quill-container .quill .ql-editor:active::after, :global .pnp-richtext-quill-container .quill .ql-editor:active:focus::after, :global .pnp-richtext-quill-container .quill .ql-editor:active:hover::after, :global .pnp-richtext-quill-container .quill .ql-editor:focus::after {
350
366
  content: "";
@@ -353,36 +369,37 @@
353
369
  border-style: solid;
354
370
  border-width: 2px;
355
371
  inset: -1px;
356
- border-color: "[theme:themePrimary, default:#0078d4]";
372
+ border-color: var(--rt-themePrimary, #0078d4);
357
373
  border-radius: 2px;
358
374
  }
359
375
  :global .pnp-richtext-quill-container .ql-editor a {
360
- color: "[theme:themePrimary, default: #0078d4]";
376
+ color: var(--rt-themePrimary, #0078d4);
361
377
  }
362
378
  :global .pnp-richtext-quill-container .ql-editor a:hover {
363
- color: "[theme:themeDarker, default: #004578]";
379
+ color: var(--rt-themeDarker, #004578);
364
380
  }
365
381
  :global .pnp-richtext-quill-container .ql-editor ol li:not(.ql-direction-rtl),
366
382
  :global .pnp-richtext-quill-container .ql-editor ul li:not(.ql-direction-rtl) {
367
383
  padding-left: 0;
368
384
  }
369
385
  :global .pnp-richtext-quill-container div#DropDownStyles-list .ms-Dropdown-item, :global .pnp-richtext-quill-container div#DropDownAlign-list .ms-Dropdown-item, :global .pnp-richtext-quill-container div#DropDownLists-list .ms-Dropdown-item {
370
- background-color: "[theme:neutralPrimary, default:#323130]" !important;
371
- color: "[theme:neutralLighterAlt, default:#faf9f8]" !important;
386
+ background-color: var(--rt-neutralPrimary, #323130) !important;
387
+ color: var(--rt-neutralLighterAlt, #f8f8f8) !important;
372
388
  -webkit-transition: all 0.3s;
373
389
  transition: all 0.3s;
374
390
  -webkit-transition-property: background-color, color;
391
+ transition-property: background-color, color;
375
392
  }
376
393
  :global .pnp-richtext-quill-container div#DropDownStyles-list .ms-Dropdown-item:hover, :global .pnp-richtext-quill-container div#DropDownAlign-list .ms-Dropdown-item:hover, :global .pnp-richtext-quill-container div#DropDownLists-list .ms-Dropdown-item:hover {
377
- background-color: "[theme:neutralTertiary, default:#a19f9d]" !important;
378
- color: "[theme:neutralLighterAlt, default:#faf9f8]" !important;
394
+ background-color: var(--rt-neutralTertiary, #a19f9d) !important;
395
+ color: var(--rt-neutralLighterAlt, #f8f8f8) !important;
379
396
  cursor: pointer;
380
397
  }
381
398
  :global .pnp-richtext-quill-container div#DropDownStyles-list .ms-Dropdown-item.is-selected,
382
399
  :global .pnp-richtext-quill-container div#DropDownStyles-list .ms-Dropdown-item.is-selected:hover, :global .pnp-richtext-quill-container div#DropDownAlign-list .ms-Dropdown-item.is-selected,
383
400
  :global .pnp-richtext-quill-container div#DropDownAlign-list .ms-Dropdown-item.is-selected:hover, :global .pnp-richtext-quill-container div#DropDownLists-list .ms-Dropdown-item.is-selected,
384
401
  :global .pnp-richtext-quill-container div#DropDownLists-list .ms-Dropdown-item.is-selected:hover {
385
- background-color: "[theme:themePrimary, default:#0078d4]" !important;
386
- color: "[theme:neutralLighterAlt, default:#faf9f8]" !important;
402
+ background-color: var(--rt-themePrimary, #0078d4) !important;
403
+ color: var(--rt-neutralLighterAlt, #f8f8f8) !important;
387
404
  }
388
405
  /*# sourceMappingURL=RichText.module.scss.css.map */
package/lib-commonjs/controls/richText/RichText.module.scss.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../node_modules/@fluentui/react/dist/sass/mixins/_Font.Mixins.scss","../../../src/controls/richText/RichText.module.scss"],"names":[],"mappings":"AAKA;AAAA;AAAA;ACHA;EACE;;;AAKE;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAMR;EACE;;;AAGF;EACE;;;AAEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAKA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAKE;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAIJ;EACE;EACA;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA;;AAEF;EACE;;AAGF;EACE;EACA;EACA;;AAGF;AAAA;AAAA;EAGE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEE;EACA;EACA;EACA;EACA;EACA;EAEA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQE;EACA;EAEA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;AAAA;AAAA;AAAA;IAIE;IACA;IACA;;;AAIJ;EAEE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAKA;EACE;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAOJ;EACE;;AACA;EACE;;AAKN;AAAA;EAEE;;AAIA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA","sourcesContent":["// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.\r\n\r\n//== Font definitions.\r\n//\r\n\r\n/*\r\n Your use of the content in the files referenced here is subject to the terms of the license at http://aka.ms/fabric-assets-license\r\n*/\r\n\r\n// Produce @font-face definitions for the web fonts.\r\n@mixin ms-font-face($font-family-name, $cdn-folder, $cdn-font-name: \"segoeui\") {\r\n @font-face {\r\n font-family: $font-family-name;\r\n src: url(\"#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-light.woff2\")\r\n format(\"woff2\"),\r\n url(\"#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-light.woff\")\r\n format(\"woff\");\r\n font-weight: $ms-font-weight-light;\r\n font-style: normal;\r\n }\r\n\r\n @font-face {\r\n font-family: $font-family-name;\r\n src: url(\"#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-semilight.woff2\")\r\n format(\"woff2\"),\r\n url(\"#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-semilight.woff\")\r\n format(\"woff\");\r\n font-weight: $ms-font-weight-semilight;\r\n font-style: normal;\r\n }\r\n\r\n @font-face {\r\n font-family: $font-family-name;\r\n src: url(\"#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-regular.woff2\")\r\n format(\"woff2\"),\r\n url(\"#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-regular.woff\")\r\n format(\"woff\");\r\n font-weight: $ms-font-weight-regular;\r\n font-style: normal;\r\n }\r\n\r\n @font-face {\r\n font-family: $font-family-name;\r\n src: url(\"#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-semibold.woff2\")\r\n format(\"woff2\"),\r\n url(\"#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-semibold.woff\")\r\n format(\"woff\");\r\n font-weight: $ms-font-weight-semibold;\r\n font-style: normal;\r\n }\r\n\r\n @font-face {\r\n font-family: $font-family-name;\r\n src: url(\"#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-bold.woff2\")\r\n format(\"woff2\"),\r\n url(\"#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-bold.woff\")\r\n format(\"woff\");\r\n font-weight: $ms-font-weight-bold;\r\n font-style: normal;\r\n }\r\n}\r\n\r\n// Generate overrides to set font-family based on the lang attribute.\r\n@mixin ms-font-family-language-override($language-code, $font-family) {\r\n *[lang^=\"#{$language-code}\"] .ms-Fabric,\r\n .ms-Fabric *[lang^=\"#{$language-code}\"],\r\n .ms-Fabric[lang^=\"#{$language-code}\"] {\r\n font-family: $font-family;\r\n }\r\n}\r\n\r\n//== Font weight.\r\n//\r\n\r\n@mixin ms-fontWeight-regular {\r\n font-weight: $ms-font-weight-regular;\r\n}\r\n@mixin ms-fontWeight-semibold {\r\n font-weight: $ms-font-weight-semibold;\r\n}\r\n@mixin ms-fontWeight-bold {\r\n font-weight: $ms-font-weight-bold;\r\n}\r\n\r\n//== Font size.\r\n//\r\n\r\n@mixin ms-fontSize-68 {\r\n font-size: $ms-font-size-68;\r\n}\r\n@mixin ms-fontSize-42 {\r\n font-size: $ms-font-size-42;\r\n}\r\n@mixin ms-fontSize-32 {\r\n font-size: $ms-font-size-32;\r\n}\r\n@mixin ms-fontSize-28 {\r\n font-size: $ms-font-size-28;\r\n}\r\n@mixin ms-fontSize-24 {\r\n font-size: $ms-font-size-24;\r\n}\r\n@mixin ms-fontSize-20 {\r\n font-size: $ms-font-size-20;\r\n}\r\n@mixin ms-fontSize-18 {\r\n font-size: $ms-font-size-18;\r\n}\r\n@mixin ms-fontSize-16 {\r\n font-size: $ms-font-size-16;\r\n}\r\n@mixin ms-fontSize-14 {\r\n font-size: $ms-font-size-14;\r\n}\r\n@mixin ms-fontSize-12 {\r\n font-size: $ms-font-size-12;\r\n}\r\n@mixin ms-fontSize-10 {\r\n font-size: $ms-font-size-10;\r\n}\r\n\r\n// Deprecated MDL2 font mixins.\r\n@import \"./Font.Mixins.MDL2\";\r\n","@import 'pkg:@fluentui/react/dist/sass/References.scss';\n\n.richtext {\n color: inherit;\n}\n\n.insertLinkDialog {\n :global {\n .ms-Dialog-main {\n max-width: 540px;\n width: 540px;\n }\n }\n\n .actions {\n position: relative;\n width: 100%;\n min-height: 24px;\n line-height: 24px;\n margin-top: 20px;\n margin-right: 0px;\n margin-bottom: 0px;\n margin-left: 0px;\n font-size: 0px;\n\n .actionsRight {\n text-align: right;\n margin-right: -4px;\n font-size: 0px;\n\n .action {\n margin-top: 0px;\n margin-right: 4px;\n margin-bottom: 0px;\n margin-left: 4px;\n }\n\n .unlinkButton {\n margin-top: 4px;\n font-size: 14px;\n float: left;\n }\n }\n }\n}\n\n.headerDropDown {\n width: 160px;\n}\n\n.toolbarDropDown {\n height: 34px;\n}\n.toolbarDropDownTitleIcon {\n margin-top: -2px;\n margin-right: 0px;\n}\n\n.toolbarDropDownIcon {\n margin-top: -2px;\n margin-right: 0px;\n margin-left: -4px;\n}\n\n.toolbarDropDownOption {\n\n &.toolbarButtonH2 {\n font-size: 20px;\n font-weight: 600;\n }\n\n &.toolbarButtonH3 {\n font-size: 18px;\n font-weight: 600;\n }\n\n &.toolbarButtonH4 {\n font-size: 16px;\n font-weight: 600;\n }\n\n &.toolbarButtonBlockQuote {\n font-size: 16px;\n font-style: italic;\n }\n\n &.toolbarButtonNormal {\n font-size: 16px;\n }\n}\n\n.toolbarSubmenuCaret {\n display: inline-block;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-style: normal;\n font-weight: normal;\n font-size: 8px;\n speak: none;\n top: 50%;\n color: \"[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]\";\n}\n\n.toolbarSubmenuDisplayButton {\n width: 100%;\n}\n\n:global {\n .pnp-richtext-quill-container {\n .ql-toolbar {\n background-color: transparent;\n color: \"[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]\";\n border: none;\n display: none;\n\n .ms-TooltipHost {\n display: inline-block !important;\n }\n\n .ms-Dropdown-container {\n display: inline-block !important;\n }\n\n .ms-Button {\n background-color: \"[theme:neutralPrimary, default:#{$ms-color-neutralPrimary}]\";\n color: \"[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]\" !important;\n\n &:hover {\n background-color: \"[theme:neutralTertiary, default:#{$ms-color-neutralTertiary}]\";\n color: \"[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]\";\n }\n\n &:focus {\n border: 1px solid \"[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]\";\n outline: 0;\n color: \"[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]\";\n }\n\n &:active {\n color: \"[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]\";\n }\n\n &.is-checked {\n background-color: \"[theme:themePrimary, default:#{$ms-color-themePrimary}]\" !important;\n }\n }\n .ms-Dropdown-title {\n background-color: \"[theme:neutralPrimary, default:#{$ms-color-neutralPrimary}]\";\n color: \"[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]\" !important;\n border: none;\n min-height: 34px;\n padding-bottom: 0px;\n padding-left: 9px;\n padding-right: 20px;\n padding-top: 2px;\n -webkit-transition: all 0.3s;\n transition: all 0.3s;\n -webkit-transition-property: background-color, color;\n border-radius: 0;\n\n &:hover {\n background-color: \"[theme:neutralTertiary, default:#{$ms-color-neutralTertiary}]\";\n color: \"[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]\";\n }\n\n &:focus {\n border: 1px solid \"[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]\";\n outline: 0;\n color: \"[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]\";\n }\n\n &:active {\n color: \"[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]\";\n }\n }\n\n .ms-Dropdown-caretDownWrapper {\n right: 4px;\n margin-top: -1px;\n }\n }\n\n .ql-snow.ql-toolbar button,\n .ql-snow .ql-toolbar button {\n background-color: \"[theme:neutralPrimary, default:#{$ms-color-neutralPrimary}]\";\n color: \"[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]\";\n font-size: 16px;\n min-width: 34px;\n height: 34px;\n padding-top: 4px;\n padding-left: 8px;\n padding-right: 8px;\n border-radius: 0;\n }\n\n .ql-toolbar.ql-snow {\n padding: 0px;\n font-family: \"Segoe UI Web (West European)\", Segoe UI, -apple-system,\n BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif;\n border: none;\n margin-bottom: 2px;\n z-index: 3;\n -webkit-animation-name: ms-fadeIn, ms-slideUpIn10;\n animation-name: ms-fadeIn, ms-slideUpIn10;\n -webkit-animation-duration: 167ms;\n animation-duration: 167ms;\n -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);\n animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n -webkit-transition: all 367ms cubic-bezier(0.1, 0.9, 0.2, 1);\n transition: all 367ms cubic-bezier(0.1, 0.9, 0.2, 1);\n }\n\n .ql-snow.ql-toolbar:after,\n .ql-snow .ql-toolbar:after {\n clear: both;\n content: \"\";\n display: table;\n }\n .ql-container.ql-snow {\n border: none;\n }\n\n .ql-active .ql-editor:hover {\n border-width: 1px;\n border-style: solid;\n border-color: \"[theme:neutralTertiary, default:#{$ms-color-neutralTertiary}]\";\n }\n\n .ql-active .ql-editor:focus,\n .ql-active .ql-editor:active,\n .ql-active .ql-editor:active:hover {\n border-width: 1px;\n border-style: solid;\n border-color: \"[theme:themePrimary, default:#{$ms-color-themePrimary}]\";\n }\n\n .ql-active .ql-toolbar {\n display: inline-flex;\n position: absolute;\n top: -28px;\n opacity: 1;\n height: 34px;\n -webkit-box-shadow: 0 0 5px 0 #c8c8c8;\n box-shadow: 0px 0px 5px 0px #c8c8c8;\n }\n\n .ql-snow .ql-editor, .ql-editor{\n // border: 1px solid transparent;\n padding-left: 10px;\n padding-right: 10px;\n padding-top: 8px;\n padding-bottom: 8px;\n min-height: 68px;\n font-family: \"Segoe UI Web (West European)\", Segoe UI, -apple-system,\n BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif;\n font-size: 18px;\n\n h2 {\n font-weight: 600 !important;\n font-size: 28px;\n }\n\n h3 {\n font-size: 24px;\n font-weight: 600 !important;\n }\n\n h4 {\n font-size: 20px;\n font-weight: 600 !important;\n }\n\n blockquote,\n div,\n h2,\n h3,\n h4,\n ol,\n p,\n ul {\n -webkit-font-smoothing: antialiased;\n line-height: 1.3;\n // margin: 0 0 16px;\n word-wrap: break-word;\n }\n\n blockquote {\n border-bottom-color: \"[theme:neutralLighter, default:#{$ms-color-neutralLighter}]\";\n border-bottom-style: solid;\n border-bottom-width: 1px;\n border-left-style: none;\n border-left-width: 0;\n border-left-color: transparent;\n border-right-style: none;\n border-right-width: 0;\n border-right-color: transparent;\n border-top-color: \"[theme:neutralLighter, default:#{$ms-color-neutralLighter}]\";\n border-top-style: solid;\n border-top-width: 1px;\n font-size: 20px;\n font-style: italic;\n font-weight: 600;\n line-height: 1.3;\n margin-bottom: 28px;\n padding-bottom: 32px;\n margin-top: 28px;\n margin-right: 0px;\n margin-left: 0px;\n padding-left: 32px;\n padding-right: 32px;\n padding-top: 32px;\n text-align: center;\n }\n\n .ql-size-xsmall {\n font-size: 10px;\n }\n\n .ql-size-small {\n font-size: 12px;\n }\n\n .ql-size-medium {\n font-size: 14px;\n }\n\n .ql-size-mediumplus {\n font-size: 16px;\n }\n\n .ql-size-large {\n font-size: 18px;\n }\n\n .ql-size-xlarge {\n font-size: 20px;\n }\n\n .ql-size-xlargeplus {\n font-size: 24px;\n }\n\n .ql-size-xxlarge {\n font-size: 28px;\n }\n\n .ql-size-xxxlarge {\n font-size: 32px;\n }\n\n .ql-size-xxlargeplus {\n font-size: 36px;\n }\n\n .ql-size-super {\n font-size: 42px;\n }\n\n .ql-size-superlarge {\n font-size: 68px;\n }\n }\n\n @media screen and (min-width: 1024px) {\n .ql-editor div,\n .ql-editor ol,\n .ql-editor p,\n .ql-editor ul {\n font-size: 18px;\n font-weight: 400;\n line-height: 1.3;\n }\n }\n\n .ql-active .ql-editor {\n // background-color: red;\n color: inherit;\n }\n\n .ql-tooltip {\n display: none !important;\n }\n\n .ql-editor.ql-blank::before {\n font-style: normal;\n color: \"[theme:neutralTertiary, default:#{$ms-color-neutralTertiary}]\";\n font-size: 18px;\n font-weight: 400;\n line-height: 1.3;\n }\n\n // correct border/hover/active border, same as with other controls, no jumping\n .quill {\n .ql-editor {\n border-width: 1px;\n border-style: solid;\n border-color: \"[theme:neutralTertiary, default:#{$ms-color-neutralTertiary}]\";\n &:hover {\n border-color: \"[theme:neutralDark, default:#{$ms-color-neutralDark}]\";\n }\n &:active::after, &:active:focus::after, &:active:hover::after, &:focus::after {\n content: \"\";\n pointer-events: none;\n position: absolute;\n border-style: solid;\n border-width: 2px;\n inset: -1px;\n border-color: \"[theme:themePrimary, default:#{$ms-color-themePrimary}]\";\n border-radius: 2px;\n }\n }\n }\n\n // hyperlink color on dark theme\n .ql-editor {\n a {\n color: \"[theme:themePrimary, default: #{$ms-color-themePrimary}]\";\n &:hover {\n color: \"[theme:themeDarker, default: #{$ms-color-themeDarker}]\";\n }\n }\n }\n\n .ql-editor ol li:not(.ql-direction-rtl),\n .ql-editor ul li:not(.ql-direction-rtl) {\n padding-left: 0;\n }\n\n div#DropDownStyles-list, div#DropDownAlign-list, div#DropDownLists-list {\n .ms-Dropdown-item {\n background-color: \"[theme:neutralPrimary, default:#{$ms-color-neutralPrimary}]\" !important;\n color: \"[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]\" !important;\n -webkit-transition: all 0.3s;\n transition: all 0.3s;\n -webkit-transition-property: background-color, color;\n }\n\n .ms-Dropdown-item:hover {\n background-color: \"[theme:neutralTertiary, default:#{$ms-color-neutralTertiary}]\" !important;\n color: \"[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]\" !important;\n cursor: pointer;\n }\n\n .ms-Dropdown-item.is-selected,\n .ms-Dropdown-item.is-selected:hover {\n background-color: \"[theme:themePrimary, default:#{$ms-color-themePrimary}]\" !important;\n color: \"[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]\" !important;\n }\n }\n }\n}\n"],"file":"RichText.module.scss.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../node_modules/@fluentui/react/dist/sass/mixins/_Font.Mixins.scss","../../../src/controls/richText/RichText.module.scss"],"names":[],"mappings":"AAKA;AAAA;AAAA;ACHA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAKE;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAMR;EACE;;;AAGF;EACE;;;AAEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAKA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAKE;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAIJ;EACE;EACA;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA;;AAEF;EACE;;AAGF;EACE;EACA;EACA;;AAGF;AAAA;AAAA;EAGE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEE;EACA;EACA;EACA;EACA;EACA;EAEA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;AAAA;AAAA;AAAA;IAIE;IACA;IACA;;;AAIJ;EAEE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAKA;EACE;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAOJ;EACE;;AACA;EACE;;AAKN;AAAA;EAEE;;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA","sourcesContent":["// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.\r\n\r\n//== Font definitions.\r\n//\r\n\r\n/*\r\n Your use of the content in the files referenced here is subject to the terms of the license at http://aka.ms/fabric-assets-license\r\n*/\r\n\r\n// Produce @font-face definitions for the web fonts.\r\n@mixin ms-font-face($font-family-name, $cdn-folder, $cdn-font-name: \"segoeui\") {\r\n @font-face {\r\n font-family: $font-family-name;\r\n src: url(\"#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-light.woff2\")\r\n format(\"woff2\"),\r\n url(\"#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-light.woff\")\r\n format(\"woff\");\r\n font-weight: $ms-font-weight-light;\r\n font-style: normal;\r\n }\r\n\r\n @font-face {\r\n font-family: $font-family-name;\r\n src: url(\"#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-semilight.woff2\")\r\n format(\"woff2\"),\r\n url(\"#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-semilight.woff\")\r\n format(\"woff\");\r\n font-weight: $ms-font-weight-semilight;\r\n font-style: normal;\r\n }\r\n\r\n @font-face {\r\n font-family: $font-family-name;\r\n src: url(\"#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-regular.woff2\")\r\n format(\"woff2\"),\r\n url(\"#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-regular.woff\")\r\n format(\"woff\");\r\n font-weight: $ms-font-weight-regular;\r\n font-style: normal;\r\n }\r\n\r\n @font-face {\r\n font-family: $font-family-name;\r\n src: url(\"#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-semibold.woff2\")\r\n format(\"woff2\"),\r\n url(\"#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-semibold.woff\")\r\n format(\"woff\");\r\n font-weight: $ms-font-weight-semibold;\r\n font-style: normal;\r\n }\r\n\r\n @font-face {\r\n font-family: $font-family-name;\r\n src: url(\"#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-bold.woff2\")\r\n format(\"woff2\"),\r\n url(\"#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-bold.woff\")\r\n format(\"woff\");\r\n font-weight: $ms-font-weight-bold;\r\n font-style: normal;\r\n }\r\n}\r\n\r\n// Generate overrides to set font-family based on the lang attribute.\r\n@mixin ms-font-family-language-override($language-code, $font-family) {\r\n *[lang^=\"#{$language-code}\"] .ms-Fabric,\r\n .ms-Fabric *[lang^=\"#{$language-code}\"],\r\n .ms-Fabric[lang^=\"#{$language-code}\"] {\r\n font-family: $font-family;\r\n }\r\n}\r\n\r\n//== Font weight.\r\n//\r\n\r\n@mixin ms-fontWeight-regular {\r\n font-weight: $ms-font-weight-regular;\r\n}\r\n@mixin ms-fontWeight-semibold {\r\n font-weight: $ms-font-weight-semibold;\r\n}\r\n@mixin ms-fontWeight-bold {\r\n font-weight: $ms-font-weight-bold;\r\n}\r\n\r\n//== Font size.\r\n//\r\n\r\n@mixin ms-fontSize-68 {\r\n font-size: $ms-font-size-68;\r\n}\r\n@mixin ms-fontSize-42 {\r\n font-size: $ms-font-size-42;\r\n}\r\n@mixin ms-fontSize-32 {\r\n font-size: $ms-font-size-32;\r\n}\r\n@mixin ms-fontSize-28 {\r\n font-size: $ms-font-size-28;\r\n}\r\n@mixin ms-fontSize-24 {\r\n font-size: $ms-font-size-24;\r\n}\r\n@mixin ms-fontSize-20 {\r\n font-size: $ms-font-size-20;\r\n}\r\n@mixin ms-fontSize-18 {\r\n font-size: $ms-font-size-18;\r\n}\r\n@mixin ms-fontSize-16 {\r\n font-size: $ms-font-size-16;\r\n}\r\n@mixin ms-fontSize-14 {\r\n font-size: $ms-font-size-14;\r\n}\r\n@mixin ms-fontSize-12 {\r\n font-size: $ms-font-size-12;\r\n}\r\n@mixin ms-fontSize-10 {\r\n font-size: $ms-font-size-10;\r\n}\r\n\r\n// Deprecated MDL2 font mixins.\r\n@import \"./Font.Mixins.MDL2\";\r\n","@import 'pkg:@fluentui/react/dist/sass/References.scss';\n\n:export {\n NeutralLighterAlt: \"[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]\";\n NeutralPrimary: \"[theme:neutralPrimary, default:#{$ms-color-neutralPrimary}]\";\n NeutralTertiary: \"[theme:neutralTertiary, default:#{$ms-color-neutralTertiary}]\";\n ThemePrimary: \"[theme:themePrimary, default:#{$ms-color-themePrimary}]\";\n NeutralLighter: \"[theme:neutralLighter, default:#{$ms-color-neutralLighter}]\";\n NeutralDark: \"[theme:neutralDark, default:#{$ms-color-neutralDark}]\";\n ThemeDarker: \"[theme:themeDarker, default:#{$ms-color-themeDarker}]\";\n White: \"[theme:white, default:#{$ms-color-white}]\";\n}\n\n.richtext {\n color: inherit;\n}\n\n.insertLinkDialog {\n :global {\n .ms-Dialog-main {\n max-width: 540px;\n width: 540px;\n }\n }\n\n .actions {\n position: relative;\n width: 100%;\n min-height: 24px;\n line-height: 24px;\n margin-top: 20px;\n margin-right: 0px;\n margin-bottom: 0px;\n margin-left: 0px;\n font-size: 0px;\n\n .actionsRight {\n text-align: right;\n margin-right: -4px;\n font-size: 0px;\n\n .action {\n margin-top: 0px;\n margin-right: 4px;\n margin-bottom: 0px;\n margin-left: 4px;\n }\n\n .unlinkButton {\n margin-top: 4px;\n font-size: 14px;\n float: left;\n }\n }\n }\n}\n\n.headerDropDown {\n width: 160px;\n}\n\n.toolbarDropDown {\n height: 34px;\n}\n.toolbarDropDownTitleIcon {\n margin-top: -2px;\n margin-right: 0px;\n}\n\n.toolbarDropDownIcon {\n margin-top: -2px;\n margin-right: 0px;\n margin-left: -4px;\n}\n\n.toolbarDropDownOption {\n\n &.toolbarButtonH2 {\n font-size: 20px;\n font-weight: 600;\n }\n\n &.toolbarButtonH3 {\n font-size: 18px;\n font-weight: 600;\n }\n\n &.toolbarButtonH4 {\n font-size: 16px;\n font-weight: 600;\n }\n\n &.toolbarButtonBlockQuote {\n font-size: 16px;\n font-style: italic;\n }\n\n &.toolbarButtonNormal {\n font-size: 16px;\n }\n}\n\n.toolbarSubmenuCaret {\n display: inline-block;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-style: normal;\n font-weight: normal;\n font-size: 8px;\n top: 50%;\n color: var(--rt-neutralLighterAlt, #f8f8f8);\n}\n\n.toolbarSubmenuDisplayButton {\n width: 100%;\n}\n\n.editorShell {\n position: relative;\n}\n\n:global {\n .pnp-richtext-quill-container {\n .ql-toolbar {\n background-color: transparent;\n color: var(--rt-neutralLighterAlt, #f8f8f8);\n border: none;\n display: none;\n\n .ms-TooltipHost {\n display: inline-block !important;\n }\n\n .ms-Dropdown-container {\n display: inline-block !important;\n }\n\n .ms-Button {\n background-color: var(--rt-neutralPrimary, #323130);\n color: var(--rt-neutralLighterAlt, #f8f8f8) !important;\n\n &:hover {\n background-color: var(--rt-neutralTertiary, #a19f9d);\n color: var(--rt-neutralLighterAlt, #f8f8f8);\n }\n\n &:focus {\n border: 1px solid var(--rt-neutralLighterAlt, #f8f8f8);\n outline: 0;\n color: var(--rt-neutralLighterAlt, #f8f8f8);\n }\n\n &:active {\n color: var(--rt-neutralLighterAlt, #f8f8f8);\n }\n\n &.is-checked {\n background-color: var(--rt-themePrimary, #0078d4) !important;\n }\n }\n .ms-Dropdown-title {\n background-color: var(--rt-neutralPrimary, #323130);\n color: var(--rt-neutralLighterAlt, #f8f8f8) !important;\n border: none;\n min-height: 34px;\n padding-bottom: 0px;\n padding-left: 9px;\n padding-right: 20px;\n padding-top: 2px;\n -webkit-transition: all 0.3s;\n transition: all 0.3s;\n -webkit-transition-property: background-color, color;\n transition-property: background-color, color;\n border-radius: 0;\n\n &:hover {\n background-color: var(--rt-neutralTertiary, #a19f9d);\n color: var(--rt-neutralLighterAlt, #f8f8f8);\n }\n\n &:focus {\n border: 1px solid var(--rt-neutralLighterAlt, #f8f8f8);\n outline: 0;\n color: var(--rt-neutralLighterAlt, #f8f8f8);\n }\n\n &:active {\n color: var(--rt-neutralLighterAlt, #f8f8f8);\n }\n }\n\n .ms-Dropdown-caretDownWrapper {\n right: 4px;\n margin-top: -1px;\n }\n }\n\n .ql-snow.ql-toolbar button,\n .ql-snow .ql-toolbar button {\n background-color: var(--rt-neutralPrimary, #323130);\n color: var(--rt-neutralLighterAlt, #f8f8f8);\n font-size: 16px;\n min-width: 34px;\n height: 34px;\n padding-top: 4px;\n padding-left: 8px;\n padding-right: 8px;\n border-radius: 0;\n }\n\n .ql-toolbar.ql-snow {\n padding: 0px;\n font-family: \"Segoe UI Web (West European)\", Segoe UI, -apple-system,\n BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif;\n border: none;\n margin-bottom: 0;\n z-index: 3;\n -webkit-animation-name: ms-fadeIn, ms-slideUpIn10;\n animation-name: ms-fadeIn, ms-slideUpIn10;\n -webkit-animation-duration: 167ms;\n animation-duration: 167ms;\n -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);\n animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n -webkit-transition: all 367ms cubic-bezier(0.1, 0.9, 0.2, 1);\n transition: all 367ms cubic-bezier(0.1, 0.9, 0.2, 1);\n }\n\n .ql-snow.ql-toolbar:after,\n .ql-snow .ql-toolbar:after {\n clear: both;\n content: \"\";\n display: table;\n }\n .ql-container.ql-snow {\n border: none;\n }\n\n .ql-active .ql-editor:hover {\n border-width: 1px;\n border-style: solid;\n border-color: var(--rt-neutralTertiary, #a19f9d);\n }\n\n .ql-active .ql-editor:focus,\n .ql-active .ql-editor:active,\n .ql-active .ql-editor:active:hover {\n border-width: 1px;\n border-style: solid;\n border-color: var(--rt-themePrimary, #0078d4);\n }\n\n .ql-active .ql-toolbar {\n display: inline-flex;\n position: absolute;\n bottom: 100%;\n left: 0;\n opacity: 1;\n height: 34px;\n -webkit-box-shadow: 0 0 5px 0 #c8c8c8;\n box-shadow: 0px 0px 5px 0px #c8c8c8;\n }\n\n .ql-snow .ql-editor, .ql-editor{\n // border: 1px solid transparent;\n padding-left: 10px;\n padding-right: 10px;\n padding-top: 8px;\n padding-bottom: 8px;\n min-height: 68px;\n font-family: \"Segoe UI Web (West European)\", Segoe UI, -apple-system,\n BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif;\n font-size: 18px;\n\n h2 {\n font-weight: 600 !important;\n font-size: 28px;\n }\n\n h3 {\n font-size: 24px;\n font-weight: 600 !important;\n }\n\n h4 {\n font-size: 20px;\n font-weight: 600 !important;\n }\n\n blockquote,\n div,\n h2,\n h3,\n h4,\n ol,\n p,\n ul {\n -webkit-font-smoothing: antialiased;\n line-height: 1.3;\n word-wrap: break-word;\n }\n\n blockquote {\n border-bottom-color: var(--rt-neutralLighter, #edebe9);\n border-bottom-style: solid;\n border-bottom-width: 1px;\n border-left-style: none;\n border-left-width: 0;\n border-left-color: transparent;\n border-right-style: none;\n border-right-width: 0;\n border-right-color: transparent;\n border-top-color: var(--rt-neutralLighter, #edebe9);\n border-top-style: solid;\n border-top-width: 1px;\n font-size: 20px;\n font-style: italic;\n font-weight: 600;\n line-height: 1.3;\n margin-bottom: 28px;\n padding-bottom: 32px;\n margin-top: 28px;\n margin-right: 0px;\n margin-left: 0px;\n padding-left: 32px;\n padding-right: 32px;\n padding-top: 32px;\n text-align: center;\n }\n\n .ql-size-xsmall {\n font-size: 10px;\n }\n\n .ql-size-small {\n font-size: 12px;\n }\n\n .ql-size-medium {\n font-size: 14px;\n }\n\n .ql-size-mediumplus {\n font-size: 16px;\n }\n\n .ql-size-large {\n font-size: 18px;\n }\n\n .ql-size-xlarge {\n font-size: 20px;\n }\n\n .ql-size-xlargeplus {\n font-size: 24px;\n }\n\n .ql-size-xxlarge {\n font-size: 28px;\n }\n\n .ql-size-xxxlarge {\n font-size: 32px;\n }\n\n .ql-size-xxlargeplus {\n font-size: 36px;\n }\n\n .ql-size-super {\n font-size: 42px;\n }\n\n .ql-size-superlarge {\n font-size: 68px;\n }\n }\n\n @media screen and (min-width: 1024px) {\n .ql-editor div,\n .ql-editor ol,\n .ql-editor p,\n .ql-editor ul {\n font-size: 18px;\n font-weight: 400;\n line-height: 1.3;\n }\n }\n\n .ql-active .ql-editor {\n // background-color: red;\n color: inherit;\n }\n\n .ql-tooltip {\n display: none !important;\n }\n\n .ql-editor.ql-blank::before {\n font-style: normal;\n color: var(--rt-neutralTertiary, #a19f9d);\n font-size: 18px;\n font-weight: 400;\n line-height: 1.3;\n }\n\n // correct border/hover/active border, same as with other controls, no jumping\n .quill {\n .ql-editor {\n border-width: 1px;\n border-style: solid;\n border-color: var(--rt-neutralTertiary, #a19f9d);\n &:hover {\n border-color: var(--rt-neutralDark, #201f1e);\n }\n &:active::after, &:active:focus::after, &:active:hover::after, &:focus::after {\n content: \"\";\n pointer-events: none;\n position: absolute;\n border-style: solid;\n border-width: 2px;\n inset: -1px;\n border-color: var(--rt-themePrimary, #0078d4);\n border-radius: 2px;\n }\n }\n }\n\n // hyperlink color on dark theme\n .ql-editor {\n a {\n color: var(--rt-themePrimary, #0078d4);\n &:hover {\n color: var(--rt-themeDarker, #004578);\n }\n }\n }\n\n .ql-editor ol li:not(.ql-direction-rtl),\n .ql-editor ul li:not(.ql-direction-rtl) {\n padding-left: 0;\n }\n\n div#DropDownStyles-list, div#DropDownAlign-list, div#DropDownLists-list {\n .ms-Dropdown-item {\n background-color: var(--rt-neutralPrimary, #323130) !important;\n color: var(--rt-neutralLighterAlt, #f8f8f8) !important;\n -webkit-transition: all 0.3s;\n transition: all 0.3s;\n -webkit-transition-property: background-color, color;\n transition-property: background-color, color;\n }\n\n .ms-Dropdown-item:hover {\n background-color: var(--rt-neutralTertiary, #a19f9d) !important;\n color: var(--rt-neutralLighterAlt, #f8f8f8) !important;\n cursor: pointer;\n }\n\n .ms-Dropdown-item.is-selected,\n .ms-Dropdown-item.is-selected:hover {\n background-color: var(--rt-themePrimary, #0078d4) !important;\n color: var(--rt-neutralLighterAlt, #f8f8f8) !important;\n }\n }\n }\n}\n"],"file":"RichText.module.scss.css"}