-
Notifications
You must be signed in to change notification settings - Fork 16
/
Copy pathstyle-gutenburg.css
7902 lines (7901 loc) · 267 KB
/
style-gutenburg.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
@charset "UTF-8";
.edit-post-visual-editor {
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
/* normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
/**
* Add the correct font size in all browsers.
*/
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
/**
* Remove the inner border and padding in Firefox.
*/
/**
* Restore the focus styles unset by the previous rule.
*/
/**
* Correct the padding in Firefox.
*/
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
/**
* Remove the default vertical scrollbar in IE 10+.
*/
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
/*
* Add the correct display in all browsers.
*/
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
/**
* Add the correct display in IE 10.
*/
/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
/* With :not(.nhsuk-search__input), the search field is not affected */
/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/* Small menu. */
/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
/* Do not show the outline on the skip link target. */
/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
/* Make sure embeds and iframes fit their containers. */
/* Make sure logo link wraps around logo image. */
/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
/* stylelint-disable color-no-hex */
/* stylelint-enable color-no-hex */
/* stylelint-disable string-quotes, order/properties-alphabetical-order */
/* stylelint-disable indentation */
/* stylelint-disable color-no-hex */
/* ==========================================================================
GENERIC / #BOX-SIZING
========================================================================== */
/**
* Set the global `box-sizing` state to `border-box`.
*
* https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
* http://paulirish.com/2012/box-sizing-border-box-ftw
*/
/* ==========================================================================
ELEMENTS / #FORMS
========================================================================== */
/**
* Make sure our form elements don’t use any UA-specific font styles: we want
* them to use ours. This may need reverting as more design information becomes
* available, and we start putting together more complete forms.
*/
/* ==========================================================================
ELEMENTS / #LINKS
========================================================================== */
/**
* Our basic `<a>` elements only need very minimal styling.
* It uses the @mixin nhsuk-link-style-default within tools/links.
* Anything more opinionated (e.g. buttons, calls-to-action, etc.) will need a
* class defining in the Components layer.
*
* 1. Outputs full link URL for print.
* 2. Point unit used for print.
*/
/* ==========================================================================
ELEMENTS / #PAGE
========================================================================== */
/**
* High-level, page-level styling.
*
* 1. The reason for this is to prevent "centering jumps" when navigating back
* and forth between pages with enough content to have a vertical scroll bar
* and pages that do not.
* 2. Fonts on OSX will look more consistent with other systems that do not
* render text using sub-pixel anti-aliasing.
* 3. Override the user agent style margin of 8px.
* 4. Ensure the page always fills at least the entire height of the viewport.
*/
/* ==========================================================================
ELEMENTS / #TABLES
========================================================================== */
/**
* 1. Force `<table>`s to be full-width by default.
*/
/* ==========================================================================
OBJECTS / #GRID
========================================================================== */
/* ==========================================================================
OBJECTS / #MAIN-WRAPPER
========================================================================== */
/**
* Page wrapper for the grid system
*
* Usage:
* <div class="nhsuk-width-container">
* <div class="nhsuk-main-wrapper">
* <!-- Wrapper for the main content of your page which applies padding
* to the top / bottom -->
* </div>
* </div>
*
* Original code taken from GDS (Government Digital Service)
* https://github.com/alphagov/govuk-frontend
*
* 1. In IE11 the `main` element can be used, but is not recognized –
* meaning it's not defined in IE's default style sheet,
* so it uses CSS initial value, which is inline.
*/
/* ==========================================================================
OBJECTS / #WIDTH-CONTAINER
========================================================================== */
/**
* Page width for the grid system
*
* Original code taken from GDS (Government Digital Service)
* https://github.com/alphagov/govuk-frontend
*
* 1. On mobile, add half width gutters
* 2. Limit the width of the container to the page width
* 3. From desktop, add full width gutters
* 4. As soon as the viewport is greater than the width of the page plus the
* gutters, just centre the content instead of adding gutters.
* 5. Full width container, spanning the entire width of the viewport
*/
/* ==========================================================================
STYLES / #ICONS
========================================================================== */
/* ==========================================================================
STYLES / #LISTS
========================================================================== */
/**
* 1. 'Random number' used to align ul and ol left with content.
* 2. 'Random number' used to give sufficient spacing between text and icon.
* 3. 'Random number' used to align icon and text.
*/
/* ==========================================================================
STYLES / #SECTION-BREAK
========================================================================== */
/**
* 1. Extended the section-break--l code for usage of a semantic <hr> with
* no class name.
*
* Original code taken from GDS (Government Digital Service)
* https://github.com/alphagov/govuk-frontend
*/
/* ==========================================================================
STYLES / #TYPOGRAPHY
========================================================================== */
/* Headings */
/* Captions to be used inside headings */
/* Body (paragraphs) */
/**
* Lede text
*
* 1. Apply lede text styling to p and ul within the lede element
* 2. Reduces the spacing between the page heading and the lede text
*/
/* [2] */
/**
* Contextual adjustments
*
* Add top padding to headings that appear directly after paragraphs.
*
* 1. Removes the padding-top because of the lede-text's increased margin-bottom
*
* Original code taken from GDS (Government Digital Service)
* https://github.com/alphagov/nhsuk-frontend
*/
/* [1] */
/* Font weight for <strong> and <b> */
/* ==========================================================================
UTILITIES / #CLEARFIX
========================================================================== */
/**
* Automatically clear an elements
* child elements
*
* Usage: class="nhsuk-u-clear"
* See tools/mixins
*/
/* ==========================================================================
UTILITIES / #GRID
========================================================================== */
/**
* Force grid widths on all screen sizes
* By default all grid elements will go to 100% width
* on screen sizes below tablet, these utilities can force
* custom widths on all screen sizes
*
* Usage: class="nhsuk-u-one-half"
*/
/* stylelint-disable declaration-no-important */
/**
* Force grid widths on screen sizes on tablet
* and above
*
* By default all grid elements will go to 100% width
* on every screen size, these utilities can force
* custom widths on screen sizes on tablet
* and above
*
* Usage: class="nhsuk-u-one-half-tablet"
*/
/* ==========================================================================
UTILITIES / #LINK-NOWRAP
========================================================================== */
/**
* Prevent long anchor links from line breaking
* on smaller screens
*
* Usage: class="nhsuk-u-nowrap"
*/
/* ==========================================================================
UTILITIES / #READING-WIDTH
========================================================================== */
/**
* Reading width mixin, add a maximum width
* to large pieces of content
*
* Usage: class="nhsuk-u-reading-width"
* See tools/mixins
*/
/* ==========================================================================
UTILITIES / #TYPOGRAPHY
========================================================================== */
/**
* Font size and line height
*
* Generate typography override classes for each responsive font map in the
* typography scale eg .nhsuk-u-font-size-48
*
* Original code taken from GDS (Government Digital Service)
* https://github.com/alphagov/govuk-frontend
*/
/* Weights
========================================================================== */
/**
* Generate font weight override classes for normal and bold
* eg .nhsuk-u-font-weight-normal
*/
/* Colours
========================================================================== */
/**
* Secondary text colour $nhsuk-secondary-text-color
* eg <p class="nhsuk-u-secondary-text-color">Published on: 15 March 2018</p>
*/
/* ==========================================================================
UTILITIES / #VISUALLY-HIDDEN
========================================================================== */
/**
* Hide elements visually but keep it in the DOM
*
* Usage: class="nhsuk-u-visually-hidden"
* See tools/mixins
*/
/* ==========================================================================
UTILITIES / #WIDTH
========================================================================== */
/**
* Original code taken from GDS (Government Digital Service)
* https://github.com/alphagov/govuk-frontend
* Force element widths on all screen sizes
*
* Usage: class="nhsuk-u-width-full"
*/
/* stylelint-disable declaration-no-important */
/* ==========================================================================
COMPONENTS/ #ACTION-LINK
========================================================================== */
/**
* 1. Display is inline-block so the top and bottom margins/paddings are
* respected.
* 2. 'Random number' is used to properly have sufficient space between icon
* and text.
* 3. Position is relative so the arrow icon can display absolute.
* 4. Text decoration none used to override default <a> styling.
* 5. Box shadow 8px used instead of the default 4px.
* 6. Text decoration underline used to override default <a> styling.
*/
/* ==========================================================================
COMPONENTS/ #BACK-LINK
========================================================================== */
/**
* 1. Allow space for the arrow.
* 2. Align the icon with the start of the back link.
* 3. Align the icon with the middle of the text.
*/
/* ==========================================================================
COMPONENTS / #BREADCRUMB
========================================================================== */
/**
* 1. Hide the breadcrumb on print stylesheets.
* 2. Bespoke spacing numbers used as there is no 20px
* spacing mapped in settings/spacing.
* 3. Don't show the full breadcrumb below tablet size.
* 4. Typography sizing mixin, see core/tools/_typography
* 5. and core/settings/_typography for size maps.
* 5. .. but show a back to index page link.
*/
/* ==========================================================================
COMPONENTS/ #BUTTON
========================================================================== */
/**
* 1. Ensure that any global link styles are overridden.
* 2. Fix unwanted button padding in Firefox.
* 3. Use a pseudo element to expand the click target area to include the
* button's shadow as well, in case users try to click it.
*/
/**
* Button variations
*/
/**
* Button disabled states
*/
/* stylelint-disable string-quotes */
/* ==========================================================================
COMPONENTS / #CARD
========================================================================== */
/**
* 1. Is needed for the :active top positioning, and invisible clickable overlay.
* 2. Border is used to create a divider between the white content
* box and an image.
* 3. Creates the 'pressed down' effect when clicked.
* 4. Removes padding-top from headings directly after the card group.
* 5. Includes the border width to achieve the correct left alignment.
* 6. Stops the heading from spanning the full width of the card.
* 7. Removes padding top for the feature heading positioning.
* 8. Default care card colour set to blue (non-urgent care card) -
* using the @mixin care-card tools/_mixins.scss.
* The same mixin is used for each care card, setting the background
* colour,text colour and print border width with the variables.
* 9. 'Random number' for the heading triangle.
* 10. 'Random number' for the heading triangle positioning.
* 11. 'Random number' used for spacing to compensate for the triangle.
* 12. Needed to enable the triangle to show correctly in high contrast mode.
* 13. Prevent additional padding on headings
* 14. Give the action link icon sufficient contrast when used in the emergency variant
* 15. Reset the positioning to the default [1] to display heading triangle on a coloured background.
* 16. Emergency care card <a> needs to be white because the background colour is black.
* 17. Trick IE10 into rendering the invisible clickable area. Without this it does not.
*/
/* Clickable card
========================================================================== */
/* Card group
========================================================================== */
/**
* Card group allows you to have a row of cards.
*
* Flexbox is used to make each card in a row the same height.
*/
/* Card feature
========================================================================== */
/* Care card
========================================================================== */
/* Card primary
========================================================================== */
/* Card secondary
========================================================================== */
/* ==========================================================================
COMPONENTS/ #CHECKBOXES
========================================================================== */
/**
* 1. remove 300ms pause on mobile.
* 2. Fix bug in IE11 caused by transform rotate (-45deg).
*/
/*
* Focus state
*
* 1. Since box-shadows are removed when users customise their colours
* We set a transparent outline that is shown instead.
* https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/
*/
/* Selected state */
/* Disabled state */
/* Divider variant */
/*
* Conditional
*
* 1. Calculate the amount of padding needed to keep the border
* centered against the checkbox.
* 2. Move the border centered with the checkbox.
* 3. Move the contents of the conditional inline with the label.
*/
/* 1 */
/* 2 */
/* 3 */
/* ==========================================================================
COMPONENTS / #CONTENTS-LIST
========================================================================== */
/**
* 1. Creates a grey line before each list
* item using a ASCII number for the symbol.
*/
/* ==========================================================================
COMPONENTS/ #DATE-INPUT
========================================================================== */
/**
* 1. font-size: 0 removes whitespace caused by inline-block
*/
/* ==========================================================================
COMPONENTS / #DETAILS
========================================================================== */
/**
* Details component.
*
* Original code taken from GDS (Government Digital Service)
* https://github.com/alphagov/govuk-frontend
*
* 1. Style the summary to look like a link...
* 2. Make the focus outline shrink-wrap the text content of the summary
* 3. Absolutely position the marker against this element
* 3. Allow for absolutely positioned marker and align with disclosed text
* 4. Only underline the text, not the arrow
* 5. Remove the default details marker so we can style our own consistently and
* ensure it displays in Firefox
* 6. Custom padding to left align the details text with the summary
*/
/**
* Expander variation.
*
* 1. !important used because the icon is populated
* by the JavaScript polyfill
* 2. Remove the default hover, focus and active
* styles for this component.
* 3. -2px left margin to align the icon to the content.
* 4. When a group of details is used reduce the
* margin between them so they sit together.
*/
/* ==========================================================================
COMPONENTS / #DO-DONT-LIST
========================================================================== */
/**
* Do and Don't lists help users understand more easily what they should
* and shouldn't do.
*
* 1. Uses @mixin panel-with-label from tools/_mixins.
* 2. Uses @mixin heading-label from tools/_mixins.
*/
/* ==========================================================================
COMPONENTS/ #ERROR-MESSAGE
========================================================================== */
/* ==========================================================================
COMPONENTS/ #ERROR-SUMMARY
========================================================================== */
/**
* 1. Cross-component class - adjusts styling of list component.
* 2. Override default link styling to use error colour
*/
/* ==========================================================================
COMPONENTS/ #FIELDSET
========================================================================== */
/**
* 1. Fix legend text wrapping in Edge and IE versions:
* 2. IE9-11 & Edge 12-13
* 3. Hack to let legends or elements within legends have margins in webkit browsers.
* 4. When the legend contains an H1, we want the H1 to inherit all styles from
* the legend. Effectively we want to be able to treat the heading as if it is
* not there.
*/
/* Heading modifiers */
/* ==========================================================================
COMPONENTS / #HERO
========================================================================== */
/**
* Hero component shared styles.
*
* 1. Position relative to support the description
* appearing over the image.
* 2. Adds a border between the header and hero, if required
*/
/**
* Hero component image styles
*
* 3. Center the background image.
* 4. Stop the height affecting print stylesheets.
* 5. Show more of the image for larger screen sizes
* 6. Overlay must be min same height as .nhsuk-hero--image to cover the image.
* 7. Darken the background image with an overlay.
* 12. Remove any heights/min heights in Windows high contrast mode.
*/
/**
* Hero component description styles.
*
* 8. 'Random number' for the triangle.
* 9. 'Random number' for the triangle positioning.
* 10. Needed to enable the triangle to show correctly in high contrast mode.
* 11. Give the description box a max width.
* 13. Remove the arrow in Windows high contrast mode.
* 14. Reduce spacing and change positioning for Windows high contrast mode.
* 15. Prevent text breaking out of box on smaller sizes
*/
/* ==========================================================================
COMPONENTS/ #HINT
========================================================================== */
/* ==========================================================================
COMPONENTS / #IMAGES
========================================================================== */
/**
* 1. Overrides default browser margin values.
* 2. Makes the image width two thirds of its container for desktop.
* 3. Avoid image printing full width of a page.
* 4. Removes top margin from subsequent nhsuk-image.
*/
/* ==========================================================================
COMPONENTS/ #INPUT
========================================================================== */
/**
* 1. Disable inner shadow and remove rounded corners
* 2. setting any background-color makes text invisible when changing colours to dark
* backgrounds in Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=1335476)
* as background-color and color need to always be set together, color should
* not be set either.
*/
/* ==========================================================================
COMPONENTS / #INSET-TEXT
========================================================================== */
/**
* 1. Removes top margin from first element and bottom margin from last,
* to ensure correct spacing within the component.
* 2. Restricts the width of the text to optimise the line length for
* readability.
*/
/* ==========================================================================
COMPONENTS/ #LABEL
========================================================================== */
/* Modifiers that make labels look more like their equivalent headings */
/* ==========================================================================
COMPONENTS / #PAGINATION
========================================================================== */
/**
* 1. Padding to give the icon spacing.
* 2. Append the word 'page' after next and
* previous on print stylesheets to make it easier
* to understand in print context.
*/
/* ==========================================================================
COMPONENTS/ #RADIOS
========================================================================== */
/**
* 1. remove 300ms pause on mobile.
* 2. Fix bug in IE11 caused by transform rotate (-45deg).
*/
/**
* Focus state
*
* 1. Since box-shadows are removed when users customise their colours
* We set a transparent outline that is shown instead.
* https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/
*/
/* Selected state */
/* Disabled state */
/*
* Inline variant
*
* 1. Prevent inline modifier being used with conditional reveals
*/
/* Divider variant */
/* Conditional */
/* ==========================================================================
COMPONENTS/ #SELECT
========================================================================== */
/**
* Select input sizing
* 1. Uses rems so that safari input scales with font size
* 2. This min-width was chosen because:
* - it makes the Select wider than it is tall (which is what users expect)
* - 20ex + 3ex matches the 'width-10' variant of the input component
* - it fits comfortably on screens as narrow as 240px wide
*/
/* ==========================================================================
COMPONENTS / #SKIP-LINK
========================================================================== */
/**
* 1. Hides the skip link off the page,
* 2. until the link gains focus from keyboard tabbing.
*/
/* ==========================================================================
COMPONENTS/ #SUMMARY-LIST
========================================================================== */
/**
* Original code taken from GDS (Government Digital Service)
* https://github.com/alphagov/govuk-frontend
*
* 1. Required to allow us to wrap words that overflow.
* 2. Reset default user agent styles
* 3. Automatic wrapping for unbreakable text (e.g. URLs)
* 4. Fallback for older browsers only
*/
/* ==========================================================================
COMPONENTS / #TABLE
========================================================================== */
/**
* Table container is used to ensure the table does not break the container.
*
* 1. Margin is removed so there isn't double spacing.
*/
/* Table row hover
========================================================================== */
/**
* Table row hover is used to aid readability for users.
*/
/* Table panel with tab heading
========================================================================== */
/**
* 1. Margin is removed so there isn't double spacing.
*/
/* Responsive table
========================================================================== */
/**
* 1. Hiding the thead on mobile
* 2. Displaying the thead on desktop
* 3. Removing default screen reader behaviour
* 4. Assigning role of table-row on desktop to give default screen reader behaviour
* 5. Using justify content to space out elements in the row on mobile
* 6. Assigning a minimum width in case of black cell
* 7. Aligning content to the right on mobile
* 8. Aligning mobile header to left to split it from the data
* 9. Hiding mobile specific header from desktop view
* 10. Adding a display block value due to IE 11 not having full flex support
*/
/* Numeric tables
========================================================================== */
/**
* Right aligns table cells for numeric tables.
*/
/* ==========================================================================
#TAG
========================================================================== */
/* Colour variants
========================================================================== */
/* Remove tag border
========================================================================== */
/* ==========================================================================
COMPONENTS/ #TEXTAREA
========================================================================== */
/* ==========================================================================
COMPONENTS / #WARNING-CALLOUT
========================================================================== */
/**
* 1. Uses @mixin panel-with-label from tools/_mixins.
* 2. Uses @mixin heading-label from tools/_mixins.
*/
/* Reusable mixin for a focus element outline */
/* Add a focus indicator for keyboard nav on clickable cards */
/* add more obvious visual representation when dashboard elements are active on keyboard nav */
/* colour variable to be used with color-mixer.scss */
/* colour variable to be used with page-colour.scss & gutenberg-page-colour.scss */
/* Menu item right chevron (mobile): fix color when state is focus */
/*
// variations to styling required for gutenberg native blocks
// @author Tony Blacker, NHS Leadership Academy
// @version 1.1 12th October 2019
*/
/* login form customisation */
/* Extra Blog Styles */
/* Events Calendar Styles */
/* Events Tickets Styles - only applies if Events > Settings > Display > Enable New RSVP Experience is not selected */
/* Events Widgets */
/* embedded events */
/* Event datetime header */
background-color: #f0f4f5;
/* admin styles widget tweaks */
/*
Learn dash admin panel mitigation
*/
/* end LearnDash mitigation routine */
/* make the table cells more obvious when editing */
/* clearfix after grouped items to sort out some display wirdiness */
}
.edit-post-visual-editor html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
overflow-x: hidden;
}
.edit-post-visual-editor body {
margin: 0;
}
.edit-post-visual-editor h1, .edit-post-visual-editor .editor-post-title__input {
font-size: 2em;
margin: 0.67em 0;
}
.edit-post-visual-editor hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
.edit-post-visual-editor pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
.edit-post-visual-editor a {
background-color: transparent;
}
.edit-post-visual-editor abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
.edit-post-visual-editor b,
.edit-post-visual-editor strong {
font-weight: bolder;
}
.edit-post-visual-editor code,
.edit-post-visual-editor kbd,
.edit-post-visual-editor samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
.edit-post-visual-editor small {
font-size: 80%;
}
.edit-post-visual-editor sub,
.edit-post-visual-editor sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
.edit-post-visual-editor sub {
bottom: -0.25em;
}
.edit-post-visual-editor sup {
top: -0.5em;
}
.edit-post-visual-editor img {
border-style: none;
}
.edit-post-visual-editor button,
.edit-post-visual-editor input,
.edit-post-visual-editor optgroup,
.edit-post-visual-editor select {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
.edit-post-visual-editor button,
.edit-post-visual-editor select { /* 1 */
text-transform: none;
}
.edit-post-visual-editor button,
.edit-post-visual-editor [type=button],
.edit-post-visual-editor [type=reset],
.edit-post-visual-editor [type=submit] {
-webkit-appearance: button;
}
.edit-post-visual-editor button::-moz-focus-inner,
.edit-post-visual-editor [type=button]::-moz-focus-inner,
.edit-post-visual-editor [type=reset]::-moz-focus-inner,
.edit-post-visual-editor [type=submit]::-moz-focus-inner {
border-style: none;
padding: 0;
}
.edit-post-visual-editor button:-moz-focusring,
.edit-post-visual-editor [type=button]:-moz-focusring,
.edit-post-visual-editor [type=reset]:-moz-focusring,
.edit-post-visual-editor [type=submit]:-moz-focusring {
outline: 1px dotted ButtonText;
}
.edit-post-visual-editor fieldset {
padding: 0.35em 0.75em 0.625em;
}
.edit-post-visual-editor legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
.edit-post-visual-editor progress {
vertical-align: baseline;
}
.edit-post-visual-editor textarea {
overflow: auto;
}
.edit-post-visual-editor [type=checkbox],
.edit-post-visual-editor [type=radio] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
.edit-post-visual-editor [type=number]::-webkit-inner-spin-button,
.edit-post-visual-editor [type=number]::-webkit-outer-spin-button {
height: auto;
}
.edit-post-visual-editor [type=search] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
.edit-post-visual-editor [type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
.edit-post-visual-editor ::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
.edit-post-visual-editor details {
display: block;
}
.edit-post-visual-editor summary {
display: list-item;
}
.edit-post-visual-editor template {
display: none;
}
.edit-post-visual-editor [hidden] {
display: none;
}
.edit-post-visual-editor body,
.edit-post-visual-editor button,
.edit-post-visual-editor input,
.edit-post-visual-editor select,
.edit-post-visual-editor optgroup,
.edit-post-visual-editor textarea {
font-family: Frutiger W01, Arial, Sans-serif;
}
.edit-post-visual-editor h1, .edit-post-visual-editor .editor-post-title__input, .edit-post-visual-editor h2, .edit-post-visual-editor h3, .edit-post-visual-editor h4, .edit-post-visual-editor h5, .edit-post-visual-editor h6 {
clear: both;
}
.edit-post-visual-editor p {
margin-bottom: 1.5em;
}
.edit-post-visual-editor dfn, .edit-post-visual-editor cite, .edit-post-visual-editor em, .edit-post-visual-editor i {
font-style: italic;
}
.edit-post-visual-editor blockquote {
margin: 0 1.5em;
}
.edit-post-visual-editor address {
margin: 0 0 1.5em;
}
.edit-post-visual-editor pre {
background: #eee;
font-family: "Courier 10 Pitch", Courier, monospace;
font-size: 15px;
font-size: 0.9375rem;
line-height: 1.6;
margin-bottom: 1.6em;
max-width: 100%;
overflow: auto;
padding: 1.6em;
}
.edit-post-visual-editor code, .edit-post-visual-editor kbd, .edit-post-visual-editor tt, .edit-post-visual-editor var {
font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
font-size: 15px;
font-size: 0.9375rem;
}
.edit-post-visual-editor abbr, .edit-post-visual-editor acronym {
border-bottom: 1px dotted #666;
cursor: help;
}
.edit-post-visual-editor mark, .edit-post-visual-editor ins {
background: #fff9c0;