No notes defined.
<details class="tile__actionDropdown">
<summary class="tile__action tile__action--theme" title="Change tile theme" aria-label="Change tile theme">
<span class="visually-hidden">Change tile theme</span>
<i class="icon" aria-hidden="true">
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.3538 12.9795L14.9012 9.39618V9.32727L8.64509 3.68811V2.26397C8.6429 2.03616 8.59543 1.81055 8.50493 1.59784C8.40581 1.3887 8.26113 1.19963 8.07948 1.04181C7.89782 0.883985 7.68288 0.760625 7.44737 0.679032C7.21264 0.594648 6.96089 0.555524 6.70836 0.564182C6.46024 0.562655 6.21426 0.605579 5.98471 0.690461C5.75515 0.775342 5.54659 0.90049 5.37115 1.05863C5.1957 1.21678 5.05686 1.40477 4.96269 1.61169C4.86852 1.8186 4.8209 2.04032 4.82259 2.26397V6.00809L0.923651 9.4536C0.571843 9.77951 0.375 10.2163 0.375 10.671C0.375 11.1257 0.571843 11.5625 0.923651 11.8884L5.54887 16.0575C5.72725 16.2194 5.94004 16.3481 6.17321 16.4365C6.63931 16.6052 7.15965 16.6052 7.62576 16.4365C7.85952 16.3485 8.0717 16.2197 8.2501 16.0575L14.5317 10.4069L13.6908 12.9336C13.6527 13.108 13.6527 13.2875 13.6908 13.4619C13.7328 13.6365 13.8156 13.8018 13.9329 13.9443C14.0577 14.0832 14.2081 14.2004 14.3788 14.2888C14.5572 14.3692 14.7534 14.4151 14.9522 14.4266C15.1624 14.4383 15.3725 14.4027 15.5638 14.3233C15.7541 14.2457 15.9236 14.1321 16.0607 13.9902C16.2003 13.846 16.2968 13.672 16.341 13.4849C16.3818 13.3183 16.3856 13.1472 16.3538 12.9795ZM6.16047 2.26397C6.14178 2.18833 6.14178 2.10991 6.16047 2.03427C6.19632 1.96056 6.24833 1.89415 6.31337 1.83902C6.38244 1.78983 6.45989 1.75105 6.54272 1.72417C6.6309 1.7071 6.7221 1.7071 6.81029 1.72417C6.96494 1.73494 7.10991 1.7962 7.21802 1.89645C7.31815 2.00197 7.37247 2.13661 7.37092 2.27545V3.72257L6.09676 4.87107L6.16047 2.26397ZM7.43463 15.2995C7.38079 15.3576 7.31027 15.4013 7.23076 15.4258C7.15451 15.4562 7.07205 15.4719 6.98867 15.4719C6.9053 15.4719 6.82284 15.4562 6.74658 15.4258C6.6671 15.4013 6.5966 15.3576 6.54272 15.2995L1.9175 11.1419C1.85779 11.0885 1.81039 11.025 1.77805 10.955C1.7457 10.885 1.72905 10.81 1.72905 10.7342C1.72905 10.6584 1.7457 10.5833 1.77805 10.5133C1.81039 10.4434 1.85779 10.3798 1.9175 10.3265L7.46011 5.33047V8.60371C7.36303 8.68391 7.28566 8.78156 7.23299 8.89035C7.18032 8.99915 7.15352 9.11668 7.15432 9.23539C7.13878 9.38654 7.16783 9.53872 7.23854 9.67649C7.30924 9.81427 7.41909 9.93276 7.55695 10.02C7.6948 10.1072 7.85578 10.16 8.02357 10.173C8.19135 10.1861 8.36 10.159 8.51241 10.0944C8.66482 10.0298 8.79559 9.93008 8.89148 9.80528C8.98736 9.68048 9.04496 9.53506 9.05842 9.38374C9.07189 9.23242 9.04076 9.08059 8.96817 8.94361C8.89559 8.80662 8.78413 8.68937 8.64509 8.60371V5.35344L13.5506 9.79815L7.43463 15.2995Z" fill="#999999" />
</svg>
</i>
</summary>
<div class="themePicker">
<ul class="themePicker__list">
<li class="themePicker__item">
<button title="Blue" aria-label="Set blue theme" class="themePicker__option" data-theme="blue">
<span class="visually-hidden">Set blue theme</span>
</button>
</li>
<li class="themePicker__item">
<button title="Navy" aria-label="Set navy theme" class="themePicker__option" data-theme="navy">
<span class="visually-hidden">Set navy theme</span>
</button>
</li>
<li class="themePicker__item">
<button title="Yellow" aria-label="Set yellow theme" class="themePicker__option" data-theme="yellow">
<span class="visually-hidden">Set yellow theme</span>
</button>
</li>
<li class="themePicker__item">
<button title="Pink" aria-label="Set pink theme" class="themePicker__option" data-theme="pink">
<span class="visually-hidden">Set pink theme</span>
</button>
</li>
<li class="themePicker__item">
<button title="Grey" aria-label="Set grey theme" class="themePicker__option" data-theme="grey">
<span class="visually-hidden">Set grey theme</span>
</button>
</li>
</ul>
</div>
</details>
<details class="tile__actionDropdown">
<summary class="tile__action tile__action--theme" title="Change tile theme" aria-label="Change tile theme">
<span class="visually-hidden">Change tile theme</span>
<i class="icon" aria-hidden="true">
{% include '@icon--paint-bucket' %}
</i>
</summary>
{% include '@theme-picker' %}
</details>
.themePicker {
&__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
&__item {
margin: 0;
}
input[type='radio'] {
@include visually-hidden;
}
&__option {
// either button, or label for radio (like view-mode-switcher)
border: 1px solid rgba(white, 0.5);
width: 2rem;
height: 2rem;
background: var(--accent, $yellow);
box-sizing: border-box;
cursor: pointer;
&:where([data-theme="blue"]) {
--accent: #{$blue};
}
&:where([data-theme="navy"]) {
--accent: #{$navy};
}
&:where([data-theme="yellow"]) {
--accent: #{$yellow};
}
&:where([data-theme="pink"]) {
--accent: #{$pink};
}
&:where([data-theme="grey"]) {
--accent: #{$grey};
}
&:hover,
&:focus {
border-width: 2px;
border-color: rgba(white, 0.8);
}
&[checked],
&[disabled] {
border: 2px solid rgba(white, 0.8);
cursor: not-allowed;
}
}
}