Fossil SCM
Use SVG icons to indicate the status and available actions for the accordion.
Commit
6126a54132f73f086f34f9f0b0d8424c95fcdc674ea3a88a127f9adc4d09f1c6
Parent
04bbb05df762a82…
1 file changed
+9
-6
+9
-6
| --- src/default_css.txt | ||
| +++ src/default_css.txt | ||
| @@ -811,18 +811,21 @@ | ||
| 811 | 811 | } |
| 812 | 812 | .nobr { |
| 813 | 813 | white-space: nowrap; |
| 814 | 814 | } |
| 815 | 815 | .accordion { |
| 816 | + padding-left: 30px; | |
| 817 | +//Note: the mkcss utility does not support line breaks in data URIs. | |
| 818 | + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath style='fill:black;opacity:0' d='M16,16H0V0h16v16z'/%3E%3Cpath style='fill:rgb(240,240,240)' d='M14,14H2V2h12v12z'/%3E%3Cpath style='fill:rgb(64,64,64)' d='M13,13H3V3h10v10z'/%3E%3Cpath style='fill:rgb(248,248,248)' d='M12,12H4V4h8v8z'/%3E%3Cpath style='fill:rgb(80,128,208)' d='M11,9H5V7h6v6z'/%3E%3C/svg%3E"); | |
| 819 | + background-repeat: no-repeat; | |
| 820 | + background-position: 10px center; | |
| 821 | + background-size: 16px 16px; | |
| 816 | 822 | cursor: pointer; |
| 817 | 823 | } |
| 818 | -.accordion:after { | |
| 819 | - content: '\02796'; | |
| 820 | - margin-left: 1em; | |
| 821 | -} | |
| 822 | -.accordion_closed:after { | |
| 823 | - content: '\02795'; | |
| 824 | +.accordion_closed { | |
| 825 | +//Note: the mkcss utility does not support line breaks in data URIs. | |
| 826 | + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath style='fill:black;opacity:0' d='M16,16H0V0h16v16z'/%3E%3Cpath style='fill:rgb(240,240,240)' d='M14,14H2V2h12v12z'/%3E%3Cpath style='fill:rgb(64,64,64)' d='M13,13H3V3h10v10z'/%3E%3Cpath style='fill:rgb(248,248,248)' d='M12,12H4V4h8v8z'/%3E%3Cpath style='fill:rgb(80,128,208)' d='M5,7h2v-2h2v2h2v2h-2v2h-2v-2h-2z'/%3E%3C/svg%3E"); | |
| 824 | 827 | } |
| 825 | 828 | .accordion_panel { |
| 826 | 829 | overflow: hidden; |
| 827 | 830 | transition: max-height 0.25s ease-out; |
| 828 | 831 | } |
| 829 | 832 |
| --- src/default_css.txt | |
| +++ src/default_css.txt | |
| @@ -811,18 +811,21 @@ | |
| 811 | } |
| 812 | .nobr { |
| 813 | white-space: nowrap; |
| 814 | } |
| 815 | .accordion { |
| 816 | cursor: pointer; |
| 817 | } |
| 818 | .accordion:after { |
| 819 | content: '\02796'; |
| 820 | margin-left: 1em; |
| 821 | } |
| 822 | .accordion_closed:after { |
| 823 | content: '\02795'; |
| 824 | } |
| 825 | .accordion_panel { |
| 826 | overflow: hidden; |
| 827 | transition: max-height 0.25s ease-out; |
| 828 | } |
| 829 |
| --- src/default_css.txt | |
| +++ src/default_css.txt | |
| @@ -811,18 +811,21 @@ | |
| 811 | } |
| 812 | .nobr { |
| 813 | white-space: nowrap; |
| 814 | } |
| 815 | .accordion { |
| 816 | padding-left: 30px; |
| 817 | //Note: the mkcss utility does not support line breaks in data URIs. |
| 818 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath style='fill:black;opacity:0' d='M16,16H0V0h16v16z'/%3E%3Cpath style='fill:rgb(240,240,240)' d='M14,14H2V2h12v12z'/%3E%3Cpath style='fill:rgb(64,64,64)' d='M13,13H3V3h10v10z'/%3E%3Cpath style='fill:rgb(248,248,248)' d='M12,12H4V4h8v8z'/%3E%3Cpath style='fill:rgb(80,128,208)' d='M11,9H5V7h6v6z'/%3E%3C/svg%3E"); |
| 819 | background-repeat: no-repeat; |
| 820 | background-position: 10px center; |
| 821 | background-size: 16px 16px; |
| 822 | cursor: pointer; |
| 823 | } |
| 824 | .accordion_closed { |
| 825 | //Note: the mkcss utility does not support line breaks in data URIs. |
| 826 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath style='fill:black;opacity:0' d='M16,16H0V0h16v16z'/%3E%3Cpath style='fill:rgb(240,240,240)' d='M14,14H2V2h12v12z'/%3E%3Cpath style='fill:rgb(64,64,64)' d='M13,13H3V3h10v10z'/%3E%3Cpath style='fill:rgb(248,248,248)' d='M12,12H4V4h8v8z'/%3E%3Cpath style='fill:rgb(80,128,208)' d='M5,7h2v-2h2v2h2v2h-2v2h-2v-2h-2z'/%3E%3C/svg%3E"); |
| 827 | } |
| 828 | .accordion_panel { |
| 829 | overflow: hidden; |
| 830 | transition: max-height 0.25s ease-out; |
| 831 | } |
| 832 |