Side by Side Diff: includes/styleguide/style.html
Issue 29491561:
Issue 5413 - Create basic style guide for website-defaults (Closed)
Patch Set:
Created July 18, 2017, 6:53 a.m.
| Left: | ||
| Right: |
Use n/p to move between diff chunks;
N/P to move between comments.
« includes/styleguide/media/images.md ('K')
|
« includes/styleguide/misc/tables.md ('k')
|
includes/styleguide/typography/blockquotes.md » ('j')
|
pages/styleguide.html » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <style> | |
| 2 | |
| 3 .sg-body | |
| 4 { | |
| 5 margin: 70px auto; | |
| 6 padding: 0 60px; | |
| 7 max-width: 700px; | |
| 8 } | |
| 9 | |
| 10 .sg-section | |
| 11 { | |
| 12 margin-bottom: 100px; | |
| 13 } | |
| 14 | |
| 15 .sg-section .sg-section | |
| 16 { | |
| 17 margin-bottom: 50px; | |
| 18 } | |
| 19 | |
| 20 [class^=sg-h], | |
| 21 .sg-p | |
| 22 { | |
| 23 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen" , "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue" !important; | |
| 24 text-transform: none !important; | |
| 25 margin: 0 !important; | |
| 26 padding: 0 !important; | |
| 27 color: slategray !important; | |
| 28 position: relative !important; | |
| 29 } | |
| 30 | |
| 31 [class^=sg-h] | |
| 32 { | |
| 33 font-weight: 700 !important; | |
| 34 } | |
| 35 | |
| 36 [class^=sg-h]:before | |
| 37 { | |
| 38 position: absolute !important; | |
| 39 top: 0 !important; | |
| 40 } | |
| 41 | |
| 42 .sg-h1:before | |
| 43 { | |
| 44 content: "#" !important; | |
| 45 left: -30px !important; | |
| 46 } | |
| 47 | |
| 48 .sg-h2:before | |
| 49 { | |
| 50 content: "##" !important; | |
| 51 left: -40px !important; | |
| 52 } | |
| 53 | |
| 54 .sg-h3:before | |
| 55 { | |
| 56 content: "###" !important; | |
| 57 left: -50px !important; | |
| 58 } | |
| 59 | |
| 60 .sg-h1 | |
| 61 { | |
| 62 margin-bottom: 20px !important; | |
| 63 font-size: 30px !important; | |
| 64 } | |
| 65 | |
| 66 .sg-h2 | |
| 67 { | |
| 68 margin-bottom: 50px !important; | |
| 69 font-size: 26px !important; | |
| 70 } | |
| 71 | |
| 72 .sg-h3 | |
| 73 { | |
| 74 margin-bottom: 20px !important; | |
| 75 font-size: 22px !important; | |
| 76 } | |
| 77 | |
| 78 .sg-p | |
| 79 { | |
| 80 font-size: 16px !important; | |
| 81 font-weight: 300 !important; | |
| 82 } | |
| 83 | |
| 84 .sg-input-group | |
| 85 { | |
| 86 max-width: 50%; | |
| 87 } | |
| 88 | |
| 89 [dir="rtl"] .sg-h1:before | |
| 90 { | |
| 91 right: -30px !important; | |
| 92 } | |
| 93 | |
| 94 [dir="rtl"] .sg-h2:before | |
| 95 { | |
| 96 right: -40px !important; | |
| 97 } | |
| 98 | |
| 99 [dir="rtl"] .sg-h3:before | |
| 100 { | |
| 101 right: -50px !important; | |
| 102 } | |
| 103 | |
| 104 </style> | |
| OLD | NEW |
