Browse Source

Calibrated checkbox animation

master
morethanwords 4 years ago
parent
commit
5850e1594d
  1. 12
      src/scss/partials/_avatar.scss
  2. 6
      src/scss/partials/_chatBubble.scss
  3. 4
      src/scss/partials/_checkbox.scss

12
src/scss/partials/_avatar.scss

@ -46,6 +46,14 @@ avatar-element { @@ -46,6 +46,14 @@ avatar-element {
--color-bottom: var(--peer-avatar-pink-bottom);
}
&.tgico:before {
font-size: calc(32px / var(--multiplier));
}
&.tgico-calendarfilter:before {
font-size: calc(36px / var(--multiplier));
}
&.tgico-savedmessages:before {
font-size: calc(25px / var(--multiplier));
}
@ -54,10 +62,6 @@ avatar-element { @@ -54,10 +62,6 @@ avatar-element {
font-size: calc(54px / var(--multiplier));
}
&.tgico-calendarfilter:before {
font-size: calc(36px / var(--multiplier));
}
&:before {
line-height: inherit !important;
}

6
src/scss/partials/_chatBubble.scss

@ -191,6 +191,12 @@ $bubble-margin: .25rem; @@ -191,6 +191,12 @@ $bubble-margin: .25rem;
.checkbox-box-background {
background-color: #61c642;
}
.checkbox-box-check {
use {
stroke-width: 3.5;
}
}
}
& > &-select-checkbox {

4
src/scss/partials/_checkbox.scss

@ -65,7 +65,7 @@ @@ -65,7 +65,7 @@
stroke-linecap: round;
stroke-dasharray: 24.19, 24.19;
stroke-dashoffset: 0;
transition: stroke-dasharray .1s .2s ease-in-out, visibility 0s .2s;
transition: stroke-dasharray .1s .15s ease-in-out, visibility 0s .15s;
}
}
}
@ -208,7 +208,7 @@ @@ -208,7 +208,7 @@
}
.checkbox-box-background {
transition: transform .2s .1s ease-in-out;
transition: transform .2s .05s ease-in-out;
transform: scale(0);
}
}

Loading…
Cancel
Save