New checkbox & animation

src/components/appSelectPeers.ts

@@ -8,6 +8,7 @@ import rootScope from "../lib/rootScope";
 import { cancelEvent, findUpAttribute, findUpClassName } from "../helpers/dom";
 import Scrollable from "./scrollable";
 import { FocusDirection } from "../helpers/fastSmoothScroll";
+import CheckboxField from "./checkbox";
 
 type PeerType = 'contacts' | 'dialogs';
 
@@ -46,6 +47,7 @@ export default class AppSelectPeers {
   private renderResultsFunc?: (peerIds: number[]) => void;
   private chatRightsAction?: ChatRights;
   private multiSelect = true;
+  private rippleEnabled = true;
   
   constructor(options: {
     appendTo: AppSelectPeers['appendTo'], 
@@ -54,7 +56,8 @@ export default class AppSelectPeers {
     onFirstRender?: () => void, 
     renderResultsFunc?: AppSelectPeers['renderResultsFunc'], 
     chatRightsAction?: AppSelectPeers['chatRightsAction'], 
-    multiSelect?: AppSelectPeers['multiSelect']
+    multiSelect?: AppSelectPeers['multiSelect'],
+    rippleEnabled?: boolean
   }) {
     for(let i in options) {
       // @ts-ignore
@@ -341,14 +344,20 @@ export default class AppSelectPeers {
         dialog: peerId,
         container: this.scrollable,
         drawStatus: false,
-        rippleEnabled: false,
+        rippleEnabled: true,
         avatarSize: 48
       });
 
       if(this.multiSelect) {
         const selected = this.selected.has(peerId);
-        dom.containerEl.insertAdjacentHTML('afterbegin', `<div class="checkbox"><label class="checkbox-field"><input type="checkbox" ${selected ? 'checked' : ''}><span></span></label></div>`);
-        if(selected) dom.listEl.classList.add('active');
+        const checkboxField = CheckboxField();
+
+        if(selected) {
+          dom.listEl.classList.add('active');
+          checkboxField.input.checked = true;
+        }
+
+        dom.containerEl.prepend(checkboxField.label);
       }
 
       let subtitle = '';

src/components/checkbox.ts

@@ -1,13 +1,19 @@
 import appStateManager from "../lib/appManagers/appStateManager";
 import { getDeepProperty } from "../helpers/object";
 
-const CheckboxField = (text: string, name: string, round = false, stateKey?: string) => {
+const CheckboxField = (text?: string, name?: string, round = false, stateKey?: string) => {
   const label = document.createElement('label');
-  label.classList.add(round ? 'checkbox-field-round' : 'checkbox-field');
+  label.classList.add('checkbox-field');
+
+  if(round) {
+    label.classList.add('checkbox-field-round');
+  }
 
   const input = document.createElement('input');
   input.type = 'checkbox';
-  input.id = 'input-' + name;
+  if(name) {
+    input.id = 'input-' + name;
+  }
 
   if(stateKey) {
     appStateManager.getState().then(state => {
@@ -19,14 +25,42 @@ const CheckboxField = (text: string, name: string, round = false, stateKey?: str
     });
   }
 
-  const span = document.createElement('span');
-  span.classList.add('checkbox-caption');
-  if(round) span.classList.add('tgico-check');
+  let span: HTMLSpanElement;
   if(text) {
-    span.innerText = text;
+    span = document.createElement('span');
+    span.classList.add('checkbox-caption');
+
+    if(text) {
+      span.innerText = text;
+    }
+  } else {
+    label.classList.add('checkbox-without-caption');
   }
 
-  label.append(input, span);
+  const box = document.createElement('div');
+  box.classList.add('checkbox-box');
+
+  const checkSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  checkSvg.classList.add('checkbox-box-check');
+  checkSvg.setAttributeNS(null, 'viewBox', '0 0 24 24');
+  const use = document.createElementNS("http://www.w3.org/2000/svg", "use");
+  use.setAttributeNS(null, 'href', '#check');
+  use.setAttributeNS(null, 'x', '-1');
+  checkSvg.append(use);
+
+  const bg = document.createElement('div');
+  bg.classList.add('checkbox-box-background');
+
+  const border = document.createElement('div');
+  border.classList.add('checkbox-box-border');
+
+  box.append(border, bg, checkSvg);
+
+  label.append(input, box);
+
+  if(span) {
+    label.append(span);
+  }
 
   return {label, input, span};
 };

src/components/popups/forward.ts

@@ -35,7 +35,8 @@ export default class PopupForward extends PopupElement {
         }
       }, 
       chatRightsAction: 'send', 
-      multiSelect: false
+      multiSelect: false,
+      rippleEnabled: false
     });
 
     //this.scrollable = new Scrollable(this.body);

src/components/sidebarLeft/tabs/includedChats.ts

@@ -10,6 +10,8 @@ import { copy } from "../../../helpers/object";
 import ButtonIcon from "../../buttonIcon";
 import { FocusDirection } from "../../../helpers/fastSmoothScroll";
 import { fastRaf } from "../../../helpers/schedulers";
+import CheckboxField from "../../checkbox";
+import Button from "../../button";
 
 export default class AppIncludedChatsTab extends SliderSuperTab {
   private confirmBtn: HTMLElement;
@@ -97,7 +99,12 @@ export default class AppIncludedChatsTab extends SliderSuperTab {
   }
 
   checkbox(selected?: boolean) {
-    return `<div class="checkbox"><label class="checkbox-field"><input type="checkbox" ${selected ? 'checked' : ''}><span></span></label></div>`;
+    const checkboxField = CheckboxField('', '', true);
+    if(selected) {
+      checkboxField.input.checked = selected;
+    }
+
+    return checkboxField.label;
   }
 
   renderResults = async(peerIds: number[]) => {
@@ -111,12 +118,12 @@ export default class AppIncludedChatsTab extends SliderSuperTab {
         dialog: peerId,
         container: this.selector.scrollable,
         drawStatus: false,
-        rippleEnabled: false,
+        rippleEnabled: true,
         avatarSize: 46
       });
 
       const selected = this.selector.selected.has(peerId);
-      dom.containerEl.insertAdjacentHTML('beforeend', this.checkbox(selected));
+      dom.containerEl.append(this.checkbox(selected));
       if(selected) dom.listEl.classList.add('active');
 
       let subtitle = '';
@@ -173,11 +180,14 @@ export default class AppIncludedChatsTab extends SliderSuperTab {
       };
     }
 
-    let html = '';
+    const f = document.createDocumentFragment();
     for(const key in details) {
-      html += `<button class="folder-category-button btn-primary btn-transparent tgico-${details[key].ico}" data-peer-id="${key}">${details[key].text}${this.checkbox()}</button>`;
+      const button = Button('btn-primary btn-transparent folder-category-button', {icon: details[key].ico, text: details[key].text});
+      button.dataset.peerId = key;
+      button.append(this.checkbox());
+      f.append(button);
     }
-    categories.innerHTML = html;
+    categories.append(f);
 
     const hr = document.createElement('hr');
     hr.style.margin = '7px 0 9px';

src/components/sidebarRight/tabs/sharedMedia.ts

@@ -1,5 +1,5 @@
 import appImManager from "../../../lib/appManagers/appImManager";
-import appMessagesManager, { MyInputMessagesFilter, MyMessage } from "../../../lib/appManagers/appMessagesManager";
+import appMessagesManager from "../../../lib/appManagers/appMessagesManager";
 import appPeersManager from "../../../lib/appManagers/appPeersManager";
 import appProfileManager from "../../../lib/appManagers/appProfileManager";
 import appUsersManager from "../../../lib/appManagers/appUsersManager";
@@ -10,6 +10,7 @@ import AppSearchSuper, { SearchSuperType } from "../../appSearchSuper.";
 import AvatarElement from "../../avatar";
 import Scrollable from "../../scrollable";
 import { SliderTab } from "../../slider";
+import CheckboxField from "../../checkbox";
 
 let setText = (text: string, el: HTMLDivElement) => {
   window.requestAnimationFrame(() => {
@@ -72,10 +73,15 @@ export default class AppSharedMediaTab implements SliderTab {
       username: this.profileContentEl.querySelector('.profile-row-username'),
       phone: this.profileContentEl.querySelector('.profile-row-phone'),
       notificationsRow: this.profileContentEl.querySelector('.profile-row-notifications'),
-      notificationsCheckbox: this.profileContentEl.querySelector('#profile-notifications'),
+      notificationsCheckbox: null,
       notificationsStatus: this.profileContentEl.querySelector('.profile-row-notifications > p')
     };
 
+    const checkboxField = CheckboxField('Notifications', 'notifications');
+    this.profileElements.notificationsCheckbox = checkboxField.input;
+    this.profileElements.notificationsCheckbox.checked = true;
+    this.profileElements.notificationsRow.prepend(checkboxField.label);
+
     this.scroll = new Scrollable(this.container, 'SR', 400);
     
     this.profileElements.notificationsCheckbox.addEventListener('change', () => {

src/index.hbs

@@ -89,6 +89,7 @@
         <path id="message-tail" d="M1.00002881,1.03679295e-14 L7,0 L7,17 C6.8069969,14.1607017 6.12380234,11.2332513 4.95041634,8.21764872 C4.04604748,5.89342034 2.50413132,3.73337411 0.324667862,1.73751004 L0.324652538,1.73752677 C-0.0826597201,1.36452676 -0.110475289,0.731958677 0.262524727,0.324646419 C0.451952959,0.117792698 0.719544377,1.0985861e-14 1.00002881,1.04360964e-14 Z"></path>
         <path id="logo" fill="#50A2E9" fill-rule="evenodd" d="M80,0 C124.18278,0 160,35.81722 160,80 C160,124.18278 124.18278,160 80,160 C35.81722,160 0,124.18278 0,80 C0,35.81722 35.81722,0 80,0 Z M114.262551,46.4516129 L114.123923,46.4516129 C111.089589,46.5056249 106.482806,48.0771432 85.1289541,56.93769 L81.4133571,58.4849956 C72.8664779,62.0684477 57.2607933,68.7965125 34.5963033,78.66919 C30.6591745,80.2345564 28.5967328,81.765936 28.4089783,83.2633288 C28.0626453,86.0254269 31.8703852,86.959903 36.7890378,88.5302703 L38.2642674,89.0045258 C42.3926354,90.314406 47.5534685,91.7248852 50.3250916,91.7847532 C52.9151948,91.8407003 55.7944784,90.8162976 58.9629426,88.7115451 L70.5121776,80.9327422 C85.6657026,70.7535853 93.6285785,65.5352892 94.4008055,65.277854 L94.6777873,65.216416 C95.1594319,65.1213105 95.7366278,65.0717596 96.1481181,65.4374337 C96.6344248,65.8695939 96.5866185,66.6880224 96.5351057,66.9075859 C96.127514,68.6448691 75.2839361,87.6143392 73.6629144,89.2417998 L73.312196,89.6016896 C68.7645143,94.2254793 63.9030972,97.1721503 71.5637945,102.355193 L73.3593638,103.544598 C79.0660342,107.334968 82.9483395,110.083813 88.8107882,113.958377 L90.3875424,114.996094 C95.0654739,118.061953 98.7330313,121.697601 103.562866,121.253237 C105.740839,121.052855 107.989107,119.042224 109.175465,113.09692 L109.246762,112.727987 C112.002037,98.0012935 117.417883,66.09303 118.669527,52.9443975 C118.779187,51.7924073 118.641237,50.318088 118.530455,49.6708963 L118.474159,49.3781963 C118.341081,48.7651315 118.067967,48.0040758 117.346762,47.4189793 C116.412565,46.6610871 115.002114,46.4638844 114.262551,46.4516129 Z"/>
         <path id="poll-line" d="M4.47,5.33v13.6c0,4.97,4.03,9,9,9h458.16"/>
+        <path id="check" fill="none" d="M 4.7071 12.2929 l 5 5 c 0.3905 0.3905 1.0237 0.3905 1.4142 0 l 11 -11" />
       </defs>
     </svg>
     <div id="main-columns" class="tabs-container">
@@ -193,10 +194,6 @@
                   <p class="profile-row-label">Phone</p>
                 </div>
                 <div class="profile-row profile-row-notifications">
-                  <label class="checkbox-field">
-                    <input type="checkbox" id="profile-notifications" checked="checked">
-                    <span>Notifications</span>
-                  </label>
                   <p class="profile-row-label">Enabled</p>
                 </div>
               </div>

src/pages/pageSignIn.ts

@@ -147,7 +147,7 @@ let onFirstMount = () => {
     void selectWrapper.offsetWidth; // reflow
     selectWrapper.classList.add('active');
 
-    if(countryInput.value) {
+    if(countryInput.value) { // * avoid selecting whole empty field on iOS devices
       countryInput.select(); // * select text
     }
 

src/scss/partials/_chatBubble.scss

@@ -186,13 +186,10 @@ $bubble-margin: .25rem;
     position: absolute;
     left: 0;
     display: flex;
+    margin: 0;
 
-    [type="checkbox"] {
-      &:checked + .checkbox-caption {
-        &:after {
-          background-color: #61c642;
-        }
-      }
+    .checkbox-box-background {
+      background-color: #61c642;
     }
   }
 
@@ -202,6 +199,9 @@ $bubble-margin: .25rem;
     /* left: 0;
     top: 50%;
     transform: translateY(-50%); */
+    .checkbox-box {
+      box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .4);
+    }
   }
 
   .bubbles.is-selecting &:not(.is-album) {
@@ -1050,22 +1050,6 @@ $bubble-margin: .25rem;
           border: 2px solid #c4c9cc;
           border-radius: inherit;
         }
-
-        /* [type="checkbox"]:not(:checked) + .checkbox-caption {
-          &:after {
-            width: 1.25rem;
-            height: 1.25rem;
-            left: .125rem;
-            top: .125rem;
-            border-color: #c4c9cc;
-          }
-        } */
-
-        .checkbox-caption {
-          &:after {
-            box-shadow: none;
-          }
-        }
       }
 
       &:first-of-type {
@@ -1986,7 +1970,7 @@ $bubble-margin: .25rem;
           border-color: #9ed695;
         }
 
-        .checkbox-caption:after {
+        .checkbox-box-border {
           border-color: #eeffde;
         }
       }

src/scss/partials/_chatlist.scss

@@ -58,7 +58,7 @@
     max-height: 72px;
     border-radius: $border-radius-medium;
     display: flex;
-    align-items: flex-start;
+    align-items: flex-start; // TODO: проверить разницу в производительности с align-items: center;
     flex-direction: row;
     position: relative;
     cursor: pointer;
@@ -71,7 +71,7 @@
     } */
 
     @include respond-to(handhelds) {
-      padding: 9px 12px 0 9px !important;
+      padding: 9px 12px 9px 9px !important;
       border-radius: 0;
       margin: 0;
       overflow: hidden;
@@ -90,6 +90,15 @@
       //margin: .1rem 0;
       line-height: 27px;
     }
+
+    p {
+      margin: 0;
+      display: flex;
+      justify-content: space-between;
+      flex-direction: row;
+      align-items: flex-start;
+      height: 27px;
+    }
   }
 
   li.menu-open {
@@ -104,15 +113,6 @@
     }
   }
 
-  p {
-    margin: 0;
-    display: flex;
-    justify-content: space-between;
-    flex-direction: row;
-    align-items: flex-start;
-    height: 27px;
-  }
-
   .dialog {
     &-title {
       &-details {
@@ -188,7 +188,7 @@
       font-size: 1.2rem;
       margin: 0 .125rem;
       overflow: visible;
-      margin-top: -1.5px;
+      //margin-top: -1.5px;
     }
   }
 

src/scss/partials/_checkbox.scss

@@ -1,63 +1,104 @@
 .checkbox-field {
-  margin: 1.5rem 0;
+  --size: 18px;
+  margin: 1.5rem 1.1875rem;
   display: block;
   text-align: left;
-  padding: 0 1.1875rem;
-  /* font-weight: 500; */
   position: relative;
   cursor: pointer;
+  min-width: var(--size);
+  min-height: var(--size);
 
   @include respond-to(handhelds) {
     margin-bottom: 27px;
   }
-}
 
-.checkbox-field-round {
-  .checkbox-caption {
-    min-width: 1.5rem;
-    min-height: 1.5rem;
-
-    &:before {
-      color: #fff;
-      font-size: 1rem;
-      line-height: 1.5rem;
-      margin-left: .25rem;
-      transition: opacity .2s ease-in-out;
-      opacity: 0;
+  .checkbox-box {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: var(--size);
+    height: var(--size);
+    border-radius: 3px;
+    overflow: hidden;
+
+    html.is-safari & {
+      -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); // fix safari overflow
+    }
+
+    &-check, &-background, &-border {
       position: absolute;
-      font-weight: bold;
-      z-index: 1;
+      top: 0;
+      left: 0;
+    }
 
-      body.animation-level-0 & {
-        transition: none;
-      }
+    &-border {
+      right: 0;
+      bottom: 0;
+      border-radius: inherit;
+      border: 2px solid #8d969c;
+      //border-color: #000;
     }
 
-    &:after {
-      content: '';
-      position: absolute;
+    &-background {
+      top: -15%;
+      right: -15%;
+      bottom: -15%;
+      left: -15%;
+      background-color: $button-primary-background;
+      transform: scale(1);
+      transition: transform .2s 0s ease-in-out;
       border-radius: 50%;
-      height: 1.5rem;
-      width: 1.5rem;
-      box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .4);
-      border: 2px solid #fff;
-      //left: 0;
-      background-color: transparent;
-      transition: background-color .2s ease-in-out;
+    }
 
-      body.animation-level-0 & {
-        transition: none;
+    &-check {
+      --offset: 1px;
+      width: calc(var(--size) - var(--offset));
+      height: calc(var(--size) - var(--offset));
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+  
+      use {
+        stroke: #fff;
+        stroke-width: 2.75;
+        stroke-linecap: round;
+        stroke-dasharray: 24.19, 24.19;
+        stroke-dashoffset: 0;
+        transition: stroke-dasharray .1s .2s ease-in-out, visibility 0s .2s;
       }
     }
   }
 
-  [type="checkbox"]:checked + .checkbox-caption {
-    &:before {
-      opacity: 1;
+  .checkbox-caption {
+    position: relative;
+    padding-left: 3.3125rem;
+    cursor: pointer;
+    display: inline-block;
+    height: 24px;
+    line-height: 26px;
+    user-select: none;
+    transition: .2s opacity;
+
+    body.animation-level-0 & {
+      transition: none;
     }
+  }
+}
 
-    &:after {
-      background-color: $button-primary-background;
+.checkbox-field-round {
+  --size: 1.5rem;
+
+  .checkbox-box {
+    border-radius: 50%;
+
+    &-border {
+      border: 2px solid #fff;
+      z-index: 1;
+    }
+
+    &-check {
+      --offset: 10px;
     }
   }
 }
@@ -157,80 +198,26 @@
 }
 
 .checkbox-field [type="checkbox"] {
-  & + span {
-    position: relative;
-    padding-left: 3.3125rem;
-    cursor: pointer;
-    display: inline-block;
-    height: 24px;
-    line-height: 26px;
-    user-select: none;
-    transition: .2s opacity;
-
-    body.animation-level-0 & {
-      transition: none;
-    }
-
-    &:before, &:after {
-      content: '';
-      left: 0;
-      position: absolute;
-      transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;
-
-      body.animation-level-0 & {
-        transition: none;
+  &:not(:checked) + .checkbox-box {
+    .checkbox-box-check {
+      use {
+        stroke-dasharray: 0, 24.19;
+        visibility: hidden;
+        transition: stroke-dasharray .1s ease-in-out, visibility 0s .1s;
       }
     }
-    
-    &:before {
-      border-radius: 2px;
-      z-index: 1;
-    }
-    
-    &:after {
-      height: 18px;
-      width: 18px;
-      z-index: 0;
-      border: 2px solid $button-primary-background;
-      border-radius: 3px;
-      top: 50%;
-      transform: translateY(-50%);
+
+    .checkbox-box-background {
+      transition: transform .2s .1s ease-in-out;
+      transform: scale(0);
     }
   }
   
-  &:not(:checked) + span:before {
-    width: 0;
-    height: 0;
-    border: 2px solid transparent;
-    left: 6px;
-    top: 10px;
-    transform: rotateZ(45deg);
-    transform-origin: 100% 100%;
-  }
-  
-  &:checked + span:before {
-    top: 4px;
-    left: -1px;
-    width: 8px;
-    height: 14px;
-    border-top: 2px solid transparent;
-    border-left: 2px solid transparent;
-    border-right: 2px solid #fff;
-    border-bottom: 2px solid #fff;
-    transform: rotateZ(45deg);
-    transform-origin: 100% 100%;
-  }
-  
-  &:not(:checked) + span:after {
-    background-color: transparent;
-    border-color: #8d969c;
-  }
-  
-  &:checked + span:after {
-    background-color: $button-primary-background;
+  &:checked + .checkbox-box {
+    
   }
 
-  &:disabled + span {
+  &:disabled + .checkbox-box, &:disabled ~ .checkbox-caption {
     cursor: default;
     opacity: .25;
   }

src/scss/partials/_leftSidebar.scss

@@ -610,6 +610,7 @@
     p {
       height: unset;
       justify-content: flex-start;
+      margin: 0;
     }
 
     p:last-child {
@@ -684,24 +685,14 @@
 .folder-categories {
   width: 100%;
 
-  .checkbox {
-    margin-top: 0 !important;
+  .checkbox-field {
     position: absolute;
-    right: 0;
-
-    [type="checkbox"] + span {
-      padding-left: 46px;
+    right: 1.625rem !important;
 
-      @include respond-to(handhelds) {
-        padding-left: 38px;
-      }
+    @include respond-to(handhelds) {
+      right: 1rem !important;
     }
   }
-
-  .checkbox-field {
-    margin: 0;
-    padding: 0;
-  }
 }
 
 .folder-category-button {
@@ -712,7 +703,7 @@
   border-radius: 0;
 
   @include respond-to(handhelds) {
-    padding: 0 1rem;
+    padding: 0 1.125rem;
   }
 
   &:before {
@@ -729,8 +720,9 @@
     ul {
       li > .rp {
         margin: 0 .5rem;
-        padding: .5rem .75rem;
+        padding: 7px .75rem !important;
         height: 3.875rem;
+        max-height: 3.875rem;
 
         @include respond-to(handhelds) {
           margin: 0;

src/scss/partials/_rightSidebar.scss

@@ -89,11 +89,11 @@
     .checkbox-field {
       margin: 0;
       padding: 0;
+      margin-left: -54px;
     }
 
-    [type="checkbox"] + span {
+    .checkbox-caption {
       padding-left: 54px;
-      margin-left: -54px;
     }
 
     &-wrapper {

src/scss/partials/_selector.scss

@@ -24,10 +24,6 @@
       position: relative;
       max-height: inherit; // fix safari
     }
-
-    avatar-element:before {
-      font-size: 18px;
-    }
   }
 
   &-search {
@@ -123,6 +119,10 @@
   .chatlist-container {
     height: 100%;
     flex: 1 1 auto;
+
+    .scrollable > :first-child {
+      margin-top: .5rem;
+    }
   }
 
   ul {
@@ -131,11 +131,11 @@
     }
 
     p {
-      height: 24px;
+      height: 24px !important;
     }
     
     span.user-last-message {
-        font-size: 14px;
+      font-size: 14px;
     }
 
     li {
@@ -146,6 +146,8 @@
         padding: 12px 8.5px;
 
         @include respond-to(handhelds) {
+          height: 66px;
+          max-height: 66px;
           margin: 0;
         }
 
@@ -157,11 +159,8 @@
   }
 
   hr {
-    margin: 0 0 8px;
-  }
-
-  [type="checkbox"] + span {
-    padding-left: calc(9px + 2.25rem);
+    margin: 0;
+    padding: 0;
   }
 
   .checkbox {
@@ -172,5 +171,27 @@
   .checkbox-field {
     margin: 0;
     padding: 0;
+    transform: translateY(-50%);
+    top: 50%;
+
+    &:first-child {
+      margin-right: 1.6875rem;
+      margin-left: .6875rem;
+    }
+  }
+
+  .checkbox-field-round {
+    position: absolute;
+    right: 1.125rem;
+    --size: 1.25rem;
+
+    .checkbox-box-border {
+      border-color: #dadbdc;
+      z-index: unset;
+    }
+
+    .checkbox-box-check {
+      --offset: 6px;
+    }
   }
 }

src/scss/style.scss

@@ -565,7 +565,7 @@ hr {
     
     text-align: left;
     display: grid;
-    grid-template-columns: calc(26px + 2rem) 1fr 50px;
+    grid-template-columns: calc(26px + 2rem) 1fr 80px;
     
     html.no-touch &:hover {
       background-color: var(--color-gray-hover);