diff --git a/_site/templates/column-charts.njk b/_site/templates/column-charts.njk index 0282848..47bf30d 100644 --- a/_site/templates/column-charts.njk +++ b/_site/templates/column-charts.njk @@ -63,8 +63,12 @@ — its background color also depending on its value;
  • - and finally its text value — wrapped in a <span> element — - is positioned at the top of the column using the same trick as in the bar chart. + its text value — wrapped in a <span> element — + is positioned at the top of the column using the same trick as in the bar chart; +
  • +
  • + and finally <colgroup> and <col> elements are used to display + a light background for each column, which becomes more visible on :hover.
  • @@ -146,7 +150,7 @@
  • remember to add colspan="2" on the first row's header cell - to match the new table layout; + to match the new table layout— and a span="2" on <col>s;
  • and finally add an identifier to each header cell @@ -169,7 +173,7 @@
  • but no! Thus, a --span custom property is added on <table>, - and must match the colspan attributes values mentionned earlier: + and must match the colspan attributes values mentioned earlier: it is therefore used to extend the first level headers to the appropriate number of columns.
  • diff --git a/_site/templates/includes/_bar-markup.njk b/_site/templates/includes/_bar-markup.njk index 3394510..c3f46df 100644 --- a/_site/templates/includes/_bar-markup.njk +++ b/_site/templates/includes/_bar-markup.njk @@ -1,18 +1,18 @@
    <table class="chaarts bar" style="--scale: 3000">
    -  <caption id="caption-1">[…]</caption>
    -  <thead class="sr-only">
    -    <tr>
    -      <td></td>
    -      <th scope="col">[…]</th>
    -    </tr>
    -  </thead>
    -  <tbody>
    -    <tr>
    -      <th scope="row">[…]</th>
    -      <td style="--value: 4">
    -        <span>[…]</span>
    -      </td>
    -    </tr>
    -    <tr>[…]</tr>
    -  </tbody>
    +	<caption id="caption-1">[…]</caption>
    +	<thead class="sr-only">
    +		<tr>
    +			<td></td>
    +			<th scope="col">[…]</th>
    +		</tr>
    +	</thead>
    +	<tbody>
    +		<tr>
    +			<th scope="row">[…]</th>
    +			<td style="--value: 4">
    +				<span>[…]</span>
    +			</td>
    +		</tr>
    +		<tr>[…]</tr>
    +	</tbody>
     </table>
    diff --git a/_site/templates/includes/_column-markup.njk b/_site/templates/includes/_column-markup.njk index 052a43c..4254592 100644 --- a/_site/templates/includes/_column-markup.njk +++ b/_site/templates/includes/_column-markup.njk @@ -1,17 +1,26 @@
    <table class="chaarts column" id="column" style="--y: 7;">
    -  <caption id="caption-7">[…]</caption>
    -  <thead>
    -    <tr>
    -      <th scope="row">[…]</th>
    -      <th scope="col" style="--value: 62;">Chrome</th>
    -      <th scope="col" style="--value: 15;">Firefox</th>
    -    </tr>
    -  </thead>
    -  <tbody>
    -    <tr>
    -      <th scope="row">[…]</th>
    -      <td style="--value: 62;"><span>62%</span></td>
    -      <td style="--value: 15;"><span>15%</span></td>
    -    </tr>
    -  </tbody>
    +	<caption id="caption-7">[…]</caption>
    +	<colgroup>
    +		<col>
    +		<col>
    +		<col>
    +		<col>
    +		<col>
    +		<col>
    +		<col>
    +	</colgroup>
    +	<thead>
    +		<tr>
    +			<th scope="row">[…]</th>
    +			<th scope="col" style="--value: 62;">Chrome</th>
    +			<th scope="col" style="--value: 15;">Firefox</th>
    +		</tr>
    +	</thead>
    +	<tbody>
    +		<tr>
    +			<th scope="row">[…]</th>
    +			<td style="--value: 62;"><span>62%</span></td>
    +			<td style="--value: 15;"><span>15%</span></td>
    +		</tr>
    +	</tbody>
     </table>
    diff --git a/_site/templates/includes/_columns-markup.njk b/_site/templates/includes/_columns-markup.njk index 08d4ab3..3ae3ad5 100644 --- a/_site/templates/includes/_columns-markup.njk +++ b/_site/templates/includes/_columns-markup.njk @@ -1,21 +1,28 @@
    <table class="chaarts column-multiple" id="column-multiple" style="--y: 11; --span: 2;">
    -  <caption id="caption-8">[…]</caption>
    -  <thead>
    -    <tr>
    -      <th scope="row" id="browser">[…]</th>
    -      <th scope="col" colspan="2" id="chrome">Chrome</th>
    -    </tr>
    -    <tr>
    -      <th scope="row" id="year">[…]</th>
    -      <th scope="col" id="chrome-2018">2018</th>
    -      <th scope="col" id="chrome-2019">2019</th>
    -    </tr>
    -  </thead>
    -  <tbody>
    -    <tr>
    -      <th scope="row" id="parts">[…]</th>
    -      <td style="--value: 50;" headers="browser chrome year chrome-2018"><span>49.6%</span></td>
    -      <td style="--value: 57;" headers="browser chrome year chrome-2019"><span>57%</span></td>
    -    </tr>
    -  </tbody>
    +	<caption id="caption-8">[…]</caption><colgroup>
    +		<col>
    +		<col span="2">
    +		<col span="2">
    +		<col span="2">
    +		<col span="2">
    +		<col span="2">
    +	</colgroup>
    +	<thead>
    +		<tr>
    +			<th scope="row" id="browser">[…]</th>
    +			<th scope="col" colspan="2" id="chrome">Chrome</th>
    +		</tr>
    +		<tr>
    +			<th scope="row" id="year">[…]</th>
    +			<th scope="col" id="chrome-2018">2018</th>
    +			<th scope="col" id="chrome-2019">2019</th>
    +		</tr>
    +	</thead>
    +	<tbody>
    +		<tr>
    +			<th scope="row" id="parts">[…]</th>
    +			<td style="--value: 50;" headers="browser chrome year chrome-2018"><span>49.6%</span></td>
    +			<td style="--value: 57;" headers="browser chrome year chrome-2019"><span>57%</span></td>
    +		</tr>
    +	</tbody>
     </table>
    diff --git a/_site/templates/includes/_inclusive-toggle.njk b/_site/templates/includes/_inclusive-toggle.njk index ce31aae..7d67a29 100644 --- a/_site/templates/includes/_inclusive-toggle.njk +++ b/_site/templates/includes/_inclusive-toggle.njk @@ -1,13 +1,13 @@
    document.addEventListener("DOMContentLoaded", function() {
    -  var switches = document.querySelectorAll('[role="switch"]');
    +	var switches = document.querySelectorAll('[role="switch"]');
     
    -  Array.prototype.forEach.call(switches, function(el, i) {
    -    el.addEventListener('click', function() {
    -      var checked = this.getAttribute('aria-checked') == 'true' || false;
    -      this.setAttribute('aria-checked', !checked);
    +	Array.prototype.forEach.call(switches, function(el, i) {
    +		el.addEventListener('click', function() {
    +			var checked = this.getAttribute('aria-checked') == 'true' || false;
    +			this.setAttribute('aria-checked', !checked);
     
    -      var chart = this.parentNode.nextElementSibling;
    -      chart.classList.toggle('table-charts');
    -    });
    -  });
    +			var chart = this.parentNode.nextElementSibling;
    +			chart.classList.toggle('table-charts');
    +		});
    +	});
     });
    diff --git a/_site/templates/includes/_line-markup.njk b/_site/templates/includes/_line-markup.njk index ca88cda..54b13c1 100644 --- a/_site/templates/includes/_line-markup.njk +++ b/_site/templates/includes/_line-markup.njk @@ -1,17 +1,17 @@
    <table class="chaarts line" style="--y: 32; --x: 13; --t-1: 'Jan.'; --t-2: 'Feb.'; […]">
    -  <caption id="caption-3">[…]</caption>
    -  <thead>
    -    <tr>
    -      <th scope="col">[…]</th>
    -      <th scope="col">Jan.</th>
    -      <th scope="col">[…]</th>
    -    </tr>
    -  </thead>
    -  <tbody>
    -    <tr style="--year: '2017'; --1: 8; --2: 6; --3: 9; --4: 12; --5: 15; --6: 21; --7: 24; --8: 25; --9: 22; --10: 19; --11: 14; --12: 9;">
    -      <th scope="row">2017</th>
    -      <td>8 °C</td>
    -      <td>[…]</td>
    -    </tr>
    -  </tbody>
    +	<caption id="caption-3">[…]</caption>
    +	<thead>
    +		<tr>
    +			<th scope="col">[…]</th>
    +			<th scope="col">Jan.</th>
    +			<th scope="col">[…]</th>
    +		</tr>
    +	</thead>
    +	<tbody>
    +		<tr style="--year: '2017'; --1: 8; --2: 6; --3: 9; --4: 12; --5: 15; --6: 21; --7: 24; --8: 25; --9: 22; --10: 19; --11: 14; --12: 9;">
    +			<th scope="row">2017</th>
    +			<td>8 °C</td>
    +			<td>[…]</td>
    +		</tr>
    +	</tbody>
     </table>
    diff --git a/_site/templates/includes/_pie-markup.njk b/_site/templates/includes/_pie-markup.njk index 7d862e9..ff59cae 100644 --- a/_site/templates/includes/_pie-markup.njk +++ b/_site/templates/includes/_pie-markup.njk @@ -1,16 +1,16 @@
    <table class="chaarts pie">
    -  <caption id="caption-5">[…]</caption>
    -  <thead class="sr-only">
    -    <tr>
    -      <th scope="col">[…]</th>
    -      <th scope="col">[…]</th>
    -    </tr>
    -  </thead>
    -  <tbody>
    -    <tr style="--color: var(--chaarts-purple); --term: 'HTML';">
    -      <th scope="row">HTML</th>
    -      <td style="--value: 2; --start: 0;">2 %</td>
    -    </tr>
    -    <tr>[…]</tr>
    -  </tbody>
    +	<caption id="caption-5">[…]</caption>
    +	<thead class="sr-only">
    +		<tr>
    +			<th scope="col">[…]</th>
    +			<th scope="col">[…]</th>
    +		</tr>
    +	</thead>
    +	<tbody>
    +		<tr style="--color: var(--chaarts-purple); --term: 'HTML';">
    +			<th scope="row">HTML</th>
    +			<td style="--value: 2; --start: 0;">2 %</td>
    +		</tr>
    +		<tr>[…]</tr>
    +	</tbody>
     </table>
    diff --git a/_site/templates/includes/_pie-styles:44.njk b/_site/templates/includes/_pie-styles:44.njk index 0ff0111..4be5b53 100644 --- a/_site/templates/includes/_pie-styles:44.njk +++ b/_site/templates/includes/_pie-styles:44.njk @@ -1,15 +1,15 @@
    td[style*="--value: 44;"]::before {
    -  clip-path: polygon(
    -    50% 50%,
    -    50% 0%,
    -    100% 0%,
    -    100% 50%,
    -    100% 100%,
    -    95.2413525% 71.2889645%,
    -    50% 50%,
    -    50% 50%,
    -    50% 50%,
    -    50% 50%,
    -    50% 50%
    -  );
    +	clip-path: polygon(
    +		50% 50%,
    +		50% 0%,
    +		100% 0%,
    +		100% 50%,
    +		100% 100%,
    +		95.2413525% 71.2889645%,
    +		50% 50%,
    +		50% 50%,
    +		50% 50%,
    +		50% 50%,
    +		50% 50%
    +	);
     }
    diff --git a/_site/templates/includes/_pie-styles:64.njk b/_site/templates/includes/_pie-styles:64.njk index 81ca46f..660b243 100644 --- a/_site/templates/includes/_pie-styles:64.njk +++ b/_site/templates/includes/_pie-styles:64.njk @@ -1,15 +1,15 @@
    td[style*="--value: 64;"]::before {
    -  clip-path: polygon(
    -    50% 50%,
    -    50% 0%,
    -    100% 0%,
    -    100% 50%,
    -    100% 100%,
    -    100% 100%,
    -    0% 100%,
    -    11.474338% 81.8711995%,
    -    50% 50%,
    -    50% 50%,
    -    50% 50%
    -  );
    +	clip-path: polygon(
    +		50% 50%,
    +		50% 0%,
    +		100% 0%,
    +		100% 50%,
    +		100% 100%,
    +		100% 100%,
    +		0% 100%,
    +		11.474338% 81.8711995%,
    +		50% 50%,
    +		50% 50%,
    +		50% 50%
    +	);
     }
    diff --git a/_site/templates/includes/_pie-styles:88.njk b/_site/templates/includes/_pie-styles:88.njk index 2e25b50..1d909d3 100644 --- a/_site/templates/includes/_pie-styles:88.njk +++ b/_site/templates/includes/_pie-styles:88.njk @@ -1,15 +1,15 @@
    td[style*="--value: 88;"]::before {
    -  clip-path: polygon(
    -    50% 50%,
    -    50% 0%,
    -    100% 0%,
    -    100% 50%,
    -    100% 100%,
    -    100% 100%,
    -    0% 100%,
    -    0% 50%,
    -    0% 0%,
    -    15.7726445% 13.5515685%,
    -    50% 50%
    -  );
    +	clip-path: polygon(
    +		50% 50%,
    +		50% 0%,
    +		100% 0%,
    +		100% 50%,
    +		100% 100%,
    +		100% 100%,
    +		0% 100%,
    +		0% 50%,
    +		0% 0%,
    +		15.7726445% 13.5515685%,
    +		50% 50%
    +	);
     }
    diff --git a/_site/templates/includes/_radar-markup.njk b/_site/templates/includes/_radar-markup.njk index 7785d9e..018ba0b 100644 --- a/_site/templates/includes/_radar-markup.njk +++ b/_site/templates/includes/_radar-markup.njk @@ -1,15 +1,15 @@
    <table class="chaarts radar" id="radar" style="--scale: 20; --step: 5; --items: 7; --1: 14; --2: 11; --3: 13; --4: 16; --5: 10; --6: 12; --7: 4; --8: var(--1);">
    -  <caption id="caption-9">[…]</caption>
    -  <thead>
    -    <tr>
    -      <th scope="col">[…]</th>
    -      <th scope="col">[…]</th>
    -    </tr>
    -  </thead>
    -  <tbody>
    -    <tr>
    -      <td><span>14</span></td>
    -      <td><span>11</span></td>
    -    </tr>
    -  </tbody>
    +	<caption id="caption-9">[…]</caption>
    +	<thead>
    +		<tr>
    +			<th scope="col">[…]</th>
    +			<th scope="col">[…]</th>
    +		</tr>
    +	</thead>
    +	<tbody>
    +		<tr>
    +			<td><span>14</span></td>
    +			<td><span>11</span></td>
    +		</tr>
    +	</tbody>
     </table>
    diff --git a/_site/templates/includes/_radars-markup.njk b/_site/templates/includes/_radars-markup.njk index 64db93d..3f7f1b2 100644 --- a/_site/templates/includes/_radars-markup.njk +++ b/_site/templates/includes/_radars-markup.njk @@ -1,19 +1,19 @@
    <table class="chaarts radar-multiple" id="radar-multiple" style="--scale: 20; --step: 5; --items: 7; --areas: 2;">
    -  <caption id="caption-9">[…]</caption>
    -  <thead>
    -    <tr>
    -      <th scope="col">[…]</th>
    -      <th scope="col">[…]</th>
    -    </tr>
    -  </thead>
    -  <tbody>
    -    <tr style="--color: var(--chaarts-purple); --1: 14; --2: 11; --3: 13; --4: 16; --5: 14; --6: 10; --7: 4; --8: var(--1);">
    -      <th scope="row">Gaël</th>
    -      <td><span>14</span></td>
    -    </tr>
    -    <tr style="-color: var(--chaarts-pink); --1: 18; --2: 10; --3: 11; --4: 16; --5: 10; --6: 12; --7: 11; --8: var(--1);">
    -      <th scope="row">Luc</th>
    -      <td><span>18</span></td>
    -    </tr>
    -  </tbody>
    +	<caption id="caption-9">[…]</caption>
    +	<thead>
    +		<tr>
    +			<th scope="col">[…]</th>
    +			<th scope="col">[…]</th>
    +		</tr>
    +	</thead>
    +	<tbody>
    +		<tr style="--color: var(--chaarts-purple); --1: 14; --2: 11; --3: 13; --4: 16; --5: 14; --6: 10; --7: 4; --8: var(--1);">
    +			<th scope="row">Gaël</th>
    +			<td><span>14</span></td>
    +		</tr>
    +		<tr style="-color: var(--chaarts-pink); --1: 18; --2: 10; --3: 11; --4: 16; --5: 10; --6: 12; --7: 11; --8: var(--1);">
    +			<th scope="row">Luc</th>
    +			<td><span>18</span></td>
    +		</tr>
    +	</tbody>
     </table>
    diff --git a/_site/templates/includes/_svg-encoding.njk b/_site/templates/includes/_svg-encoding.njk index 848a264..1728231 100644 --- a/_site/templates/includes/_svg-encoding.njk +++ b/_site/templates/includes/_svg-encoding.njk @@ -1,16 +1,16 @@
    .chaarts {
    -  --stripes: url("data:image/svg+xml,<svg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'><g fill='%23fff9' fill-rule='evenodd'><path d='M5 0h1L0 6V5zM6 5v1H5z'/></g></svg>");
    +	--stripes: url("data:image/svg+xml,<svg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'><g fill='%23fff9' fill-rule='evenodd'><path d='M5 0h1L0 6V5zM6 5v1H5z'/></g></svg>");
     }
     
     .chaarts tr:nth-child(2n + 2) {
    -  --background: var(--stripes);
    +	--background: var(--stripes);
     }
     
     .chaarts td {
    -  --size: calc( var(--scale, 100) * 100% );
    -  --position: calc( var(--value, 0) / var(--scale, 100) * 100% );
    -  background:
    -    linear-gradient( right, Window, ButtonFace, ButtonText, Highlight ) var(--position) 0% / var(--size) 100%,
    -    var(--background) center / contain;
    -  background-blend-mode: hard-light;
    +	--size: calc( var(--scale, 100) * 100% );
    +	--position: calc( var(--value, 0) / var(--scale, 100) * 100% );
    +	background:
    +		linear-gradient( right, Window, ButtonFace, ButtonText, Highlight ) var(--position) 0% / var(--size) 100%,
    +		var(--background) center / contain;
    +	background-blend-mode: hard-light;
     }
    diff --git a/docs/bar-charts.html b/docs/bar-charts.html index 442bc15..93ba7cc 100644 --- a/docs/bar-charts.html +++ b/docs/bar-charts.html @@ -224,22 +224,22 @@

    Bar charts

    HTML
    <table class="chaarts bar" style="--scale: 3000">
    -  <caption id="caption-1">[…]</caption>
    -  <thead class="sr-only">
    -    <tr>
    -      <td></td>
    -      <th scope="col">[…]</th>
    -    </tr>
    -  </thead>
    -  <tbody>
    -    <tr>
    -      <th scope="row">[…]</th>
    -      <td style="--value: 4">
    -        <span>[…]</span>
    -      </td>
    -    </tr>
    -    <tr>[…]</tr>
    -  </tbody>
    +	<caption id="caption-1">[…]</caption>
    +	<thead class="sr-only">
    +		<tr>
    +			<td></td>
    +			<th scope="col">[…]</th>
    +		</tr>
    +	</thead>
    +	<tbody>
    +		<tr>
    +			<th scope="row">[…]</th>
    +			<td style="--value: 4">
    +				<span>[…]</span>
    +			</td>
    +		</tr>
    +		<tr>[…]</tr>
    +	</tbody>
     </table>
    diff --git a/docs/column-charts.html b/docs/column-charts.html index 5fe65a4..320dd17 100644 --- a/docs/column-charts.html +++ b/docs/column-charts.html @@ -97,8 +97,12 @@

    Column charts

    — its background color also depending on its value;
  • - and finally its text value — wrapped in a <span> element — - is positioned at the top of the column using the same trick as in the bar chart. + its text value — wrapped in a <span> element — + is positioned at the top of the column using the same trick as in the bar chart; +
  • +
  • + and finally <colgroup> and <col> elements are used to display + a light background for each column, which becomes more visible on :hover.
  • @@ -155,21 +159,30 @@

    Column charts

    HTML
    <table class="chaarts column" id="column" style="--y: 7;">
    -  <caption id="caption-7">[…]</caption>
    -  <thead>
    -    <tr>
    -      <th scope="row">[…]</th>
    -      <th scope="col" style="--value: 62;">Chrome</th>
    -      <th scope="col" style="--value: 15;">Firefox</th>
    -    </tr>
    -  </thead>
    -  <tbody>
    -    <tr>
    -      <th scope="row">[…]</th>
    -      <td style="--value: 62;"><span>62%</span></td>
    -      <td style="--value: 15;"><span>15%</span></td>
    -    </tr>
    -  </tbody>
    +	<caption id="caption-7">[…]</caption>
    +	<colgroup>
    +		<col>
    +		<col>
    +		<col>
    +		<col>
    +		<col>
    +		<col>
    +		<col>
    +	</colgroup>
    +	<thead>
    +		<tr>
    +			<th scope="row">[…]</th>
    +			<th scope="col" style="--value: 62;">Chrome</th>
    +			<th scope="col" style="--value: 15;">Firefox</th>
    +		</tr>
    +	</thead>
    +	<tbody>
    +		<tr>
    +			<th scope="row">[…]</th>
    +			<td style="--value: 62;"><span>62%</span></td>
    +			<td style="--value: 15;"><span>15%</span></td>
    +		</tr>
    +	</tbody>
     </table>
    @@ -409,7 +422,7 @@

    Multiple columns

  • remember to add colspan="2" on the first row's header cell - to match the new table layout; + to match the new table layout— and a span="2" on <col>s;
  • and finally add an identifier to each header cell @@ -432,7 +445,7 @@

    Multiple columns

  • but no! Thus, a --span custom property is added on <table>, - and must match the colspan attributes values mentionned earlier: + and must match the colspan attributes values mentioned earlier: it is therefore used to extend the first level headers to the appropriate number of columns.
  • @@ -516,25 +529,32 @@

    Multiple columns

    HTML
    <table class="chaarts column-multiple" id="column-multiple" style="--y: 11; --span: 2;">
    -  <caption id="caption-8">[…]</caption>
    -  <thead>
    -    <tr>
    -      <th scope="row" id="browser">[…]</th>
    -      <th scope="col" colspan="2" id="chrome">Chrome</th>
    -    </tr>
    -    <tr>
    -      <th scope="row" id="year">[…]</th>
    -      <th scope="col" id="chrome-2018">2018</th>
    -      <th scope="col" id="chrome-2019">2019</th>
    -    </tr>
    -  </thead>
    -  <tbody>
    -    <tr>
    -      <th scope="row" id="parts">[…]</th>
    -      <td style="--value: 50;" headers="browser chrome year chrome-2018"><span>49.6%</span></td>
    -      <td style="--value: 57;" headers="browser chrome year chrome-2019"><span>57%</span></td>
    -    </tr>
    -  </tbody>
    +	<caption id="caption-8">[…]</caption><colgroup>
    +		<col>
    +		<col span="2">
    +		<col span="2">
    +		<col span="2">
    +		<col span="2">
    +		<col span="2">
    +	</colgroup>
    +	<thead>
    +		<tr>
    +			<th scope="row" id="browser">[…]</th>
    +			<th scope="col" colspan="2" id="chrome">Chrome</th>
    +		</tr>
    +		<tr>
    +			<th scope="row" id="year">[…]</th>
    +			<th scope="col" id="chrome-2018">2018</th>
    +			<th scope="col" id="chrome-2019">2019</th>
    +		</tr>
    +	</thead>
    +	<tbody>
    +		<tr>
    +			<th scope="row" id="parts">[…]</th>
    +			<td style="--value: 50;" headers="browser chrome year chrome-2018"><span>49.6%</span></td>
    +			<td style="--value: 57;" headers="browser chrome year chrome-2019"><span>57%</span></td>
    +		</tr>
    +	</tbody>
     </table>
    diff --git a/docs/index.html b/docs/index.html index 58954b1..cba7332 100644 --- a/docs/index.html +++ b/docs/index.html @@ -161,20 +161,20 @@

    What to encode?

    .chaarts {
    -  --stripes: url("data:image/svg+xml,<svg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'><g fill='%23fff9' fill-rule='evenodd'><path d='M5 0h1L0 6V5zM6 5v1H5z'/></g></svg>");
    +	--stripes: url("data:image/svg+xml,<svg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'><g fill='%23fff9' fill-rule='evenodd'><path d='M5 0h1L0 6V5zM6 5v1H5z'/></g></svg>");
     }
     
     .chaarts tr:nth-child(2n + 2) {
    -  --background: var(--stripes);
    +	--background: var(--stripes);
     }
     
     .chaarts td {
    -  --size: calc( var(--scale, 100) * 100% );
    -  --position: calc( var(--value, 0) / var(--scale, 100) * 100% );
    -  background:
    -    linear-gradient( right, Window, ButtonFace, ButtonText, Highlight ) var(--position) 0% / var(--size) 100%,
    -    var(--background) center / contain;
    -  background-blend-mode: hard-light;
    +	--size: calc( var(--scale, 100) * 100% );
    +	--position: calc( var(--value, 0) / var(--scale, 100) * 100% );
    +	background:
    +		linear-gradient( right, Window, ButtonFace, ButtonText, Highlight ) var(--position) 0% / var(--size) 100%,
    +		var(--background) center / contain;
    +	background-blend-mode: hard-light;
     }

    User preferences

    @@ -221,17 +221,17 @@

    display and semantics

    document.addEventListener("DOMContentLoaded", function() {
    -  var switches = document.querySelectorAll('[role="switch"]');
    +	var switches = document.querySelectorAll('[role="switch"]');
     
    -  Array.prototype.forEach.call(switches, function(el, i) {
    -    el.addEventListener('click', function() {
    -      var checked = this.getAttribute('aria-checked') == 'true' || false;
    -      this.setAttribute('aria-checked', !checked);
    +	Array.prototype.forEach.call(switches, function(el, i) {
    +		el.addEventListener('click', function() {
    +			var checked = this.getAttribute('aria-checked') == 'true' || false;
    +			this.setAttribute('aria-checked', !checked);
     
    -      var chart = this.parentNode.nextElementSibling;
    -      chart.classList.toggle('table-charts');
    -    });
    -  });
    +			var chart = this.parentNode.nextElementSibling;
    +			chart.classList.toggle('table-charts');
    +		});
    +	});
     });

    diff --git a/docs/line-charts.html b/docs/line-charts.html index 680b923..0c332a8 100644 --- a/docs/line-charts.html +++ b/docs/line-charts.html @@ -252,21 +252,21 @@

    Area charts

    HTML
    <table class="chaarts line" style="--y: 32; --x: 13; --t-1: 'Jan.'; --t-2: 'Feb.'; […]">
    -  <caption id="caption-3">[…]</caption>
    -  <thead>
    -    <tr>
    -      <th scope="col">[…]</th>
    -      <th scope="col">Jan.</th>
    -      <th scope="col">[…]</th>
    -    </tr>
    -  </thead>
    -  <tbody>
    -    <tr style="--year: '2017'; --1: 8; --2: 6; --3: 9; --4: 12; --5: 15; --6: 21; --7: 24; --8: 25; --9: 22; --10: 19; --11: 14; --12: 9;">
    -      <th scope="row">2017</th>
    -      <td>8 °C</td>
    -      <td>[…]</td>
    -    </tr>
    -  </tbody>
    +	<caption id="caption-3">[…]</caption>
    +	<thead>
    +		<tr>
    +			<th scope="col">[…]</th>
    +			<th scope="col">Jan.</th>
    +			<th scope="col">[…]</th>
    +		</tr>
    +	</thead>
    +	<tbody>
    +		<tr style="--year: '2017'; --1: 8; --2: 6; --3: 9; --4: 12; --5: 15; --6: 21; --7: 24; --8: 25; --9: 22; --10: 19; --11: 14; --12: 9;">
    +			<th scope="row">2017</th>
    +			<td>8 °C</td>
    +			<td>[…]</td>
    +		</tr>
    +	</tbody>
     </table>
    diff --git a/docs/pie-charts.html b/docs/pie-charts.html index 98509ec..efa6abf 100644 --- a/docs/pie-charts.html +++ b/docs/pie-charts.html @@ -260,20 +260,20 @@

    Law of sines

    HTML
    <table class="chaarts pie">
    -  <caption id="caption-5">[…]</caption>
    -  <thead class="sr-only">
    -    <tr>
    -      <th scope="col">[…]</th>
    -      <th scope="col">[…]</th>
    -    </tr>
    -  </thead>
    -  <tbody>
    -    <tr style="--color: var(--chaarts-purple); --term: 'HTML';">
    -      <th scope="row">HTML</th>
    -      <td style="--value: 2; --start: 0;">2 %</td>
    -    </tr>
    -    <tr>[…]</tr>
    -  </tbody>
    +	<caption id="caption-5">[…]</caption>
    +	<thead class="sr-only">
    +		<tr>
    +			<th scope="col">[…]</th>
    +			<th scope="col">[…]</th>
    +		</tr>
    +	</thead>
    +	<tbody>
    +		<tr style="--color: var(--chaarts-purple); --term: 'HTML';">
    +			<th scope="row">HTML</th>
    +			<td style="--value: 2; --start: 0;">2 %</td>
    +		</tr>
    +		<tr>[…]</tr>
    +	</tbody>
     </table>
    @@ -512,19 +512,19 @@

    The positions illustrated

    td[style*="--value: 44;"]::before {
    -  clip-path: polygon(
    -    50% 50%,
    -    50% 0%,
    -    100% 0%,
    -    100% 50%,
    -    100% 100%,
    -    95.2413525% 71.2889645%,
    -    50% 50%,
    -    50% 50%,
    -    50% 50%,
    -    50% 50%,
    -    50% 50%
    -  );
    +	clip-path: polygon(
    +		50% 50%,
    +		50% 0%,
    +		100% 0%,
    +		100% 50%,
    +		100% 100%,
    +		95.2413525% 71.2889645%,
    +		50% 50%,
    +		50% 50%,
    +		50% 50%,
    +		50% 50%,
    +		50% 50%
    +	);
     }
    Code generated for 44%.
    @@ -542,19 +542,19 @@

    The positions illustrated

    td[style*="--value: 64;"]::before {
    -  clip-path: polygon(
    -    50% 50%,
    -    50% 0%,
    -    100% 0%,
    -    100% 50%,
    -    100% 100%,
    -    100% 100%,
    -    0% 100%,
    -    11.474338% 81.8711995%,
    -    50% 50%,
    -    50% 50%,
    -    50% 50%
    -  );
    +	clip-path: polygon(
    +		50% 50%,
    +		50% 0%,
    +		100% 0%,
    +		100% 50%,
    +		100% 100%,
    +		100% 100%,
    +		0% 100%,
    +		11.474338% 81.8711995%,
    +		50% 50%,
    +		50% 50%,
    +		50% 50%
    +	);
     }
    Code generated for 64%.
    @@ -572,19 +572,19 @@

    The positions illustrated

    td[style*="--value: 88;"]::before {
    -  clip-path: polygon(
    -    50% 50%,
    -    50% 0%,
    -    100% 0%,
    -    100% 50%,
    -    100% 100%,
    -    100% 100%,
    -    0% 100%,
    -    0% 50%,
    -    0% 0%,
    -    15.7726445% 13.5515685%,
    -    50% 50%
    -  );
    +	clip-path: polygon(
    +		50% 50%,
    +		50% 0%,
    +		100% 0%,
    +		100% 50%,
    +		100% 100%,
    +		100% 100%,
    +		0% 100%,
    +		0% 50%,
    +		0% 0%,
    +		15.7726445% 13.5515685%,
    +		50% 50%
    +	);
     }
    Code generated for 88%.
    diff --git a/docs/radar-charts.html b/docs/radar-charts.html index eccdff5..68b19c9 100644 --- a/docs/radar-charts.html +++ b/docs/radar-charts.html @@ -202,19 +202,19 @@

    Radar charts

    HTML
    <table class="chaarts radar" id="radar" style="--scale: 20; --step: 5; --items: 7; --1: 14; --2: 11; --3: 13; --4: 16; --5: 10; --6: 12; --7: 4; --8: var(--1);">
    -  <caption id="caption-9">[…]</caption>
    -  <thead>
    -    <tr>
    -      <th scope="col">[…]</th>
    -      <th scope="col">[…]</th>
    -    </tr>
    -  </thead>
    -  <tbody>
    -    <tr>
    -      <td><span>14</span></td>
    -      <td><span>11</span></td>
    -    </tr>
    -  </tbody>
    +	<caption id="caption-9">[…]</caption>
    +	<thead>
    +		<tr>
    +			<th scope="col">[…]</th>
    +			<th scope="col">[…]</th>
    +		</tr>
    +	</thead>
    +	<tbody>
    +		<tr>
    +			<td><span>14</span></td>
    +			<td><span>11</span></td>
    +		</tr>
    +	</tbody>
     </table>
    @@ -572,23 +572,23 @@

    Overlapping radars

    HTML
    <table class="chaarts radar-multiple" id="radar-multiple" style="--scale: 20; --step: 5; --items: 7; --areas: 2;">
    -  <caption id="caption-9">[…]</caption>
    -  <thead>
    -    <tr>
    -      <th scope="col">[…]</th>
    -      <th scope="col">[…]</th>
    -    </tr>
    -  </thead>
    -  <tbody>
    -    <tr style="--color: var(--chaarts-purple); --1: 14; --2: 11; --3: 13; --4: 16; --5: 14; --6: 10; --7: 4; --8: var(--1);">
    -      <th scope="row">Gaël</th>
    -      <td><span>14</span></td>
    -    </tr>
    -    <tr style="-color: var(--chaarts-pink); --1: 18; --2: 10; --3: 11; --4: 16; --5: 10; --6: 12; --7: 11; --8: var(--1);">
    -      <th scope="row">Luc</th>
    -      <td><span>18</span></td>
    -    </tr>
    -  </tbody>
    +	<caption id="caption-9">[…]</caption>
    +	<thead>
    +		<tr>
    +			<th scope="col">[…]</th>
    +			<th scope="col">[…]</th>
    +		</tr>
    +	</thead>
    +	<tbody>
    +		<tr style="--color: var(--chaarts-purple); --1: 14; --2: 11; --3: 13; --4: 16; --5: 14; --6: 10; --7: 4; --8: var(--1);">
    +			<th scope="row">Gaël</th>
    +			<td><span>14</span></td>
    +		</tr>
    +		<tr style="-color: var(--chaarts-pink); --1: 18; --2: 10; --3: 11; --4: 16; --5: 10; --6: 12; --7: 11; --8: var(--1);">
    +			<th scope="row">Luc</th>
    +			<td><span>18</span></td>
    +		</tr>
    +	</tbody>
     </table>
    diff --git a/src/abstracts/_variables.scss b/src/abstracts/_variables.scss index 2fa6887..14b946b 100644 --- a/src/abstracts/_variables.scss +++ b/src/abstracts/_variables.scss @@ -5,7 +5,8 @@ // ==================== $width: math.div(1024em, 16) !default; $gutter: 1rem !default; -// Scale: 0.25, 0.5, 1, 1.5, 2, 2.5, 4, 6, 8, 10, 12 + +// Scale values: 0.25, 0.5, 1, 1.5, 2, 2.5, 4, 6, 8, 10, 12 // ==================== // == Patterns