tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] Fix transition: all

Browse Source 
Port 7aa749ab46 to glitch-soc
This commit is contained in:
ThibG
2019-05-04 17:39:53 +02:00
committed by Thibaut Girka
parent b7f69beebe
commit 8e221cd22b
4 changed files with 10 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/flavours/glitch/styles/admin.scss
View File

@@ -50,6 +50,7 @@ $content-width: 840px;
color: $darker-text-color; color: $darker-text-color;
text-decoration: none; text-decoration: none;
transition: all 200ms linear; transition: all 200ms linear;
transition-property: color, background-color;
border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;
i.fa { i.fa {
@@ -60,6 +61,7 @@ $content-width: 840px;
color: $primary-text-color; color: $primary-text-color;
background-color: darken($ui-base-color, 5%); background-color: darken($ui-base-color, 5%);
transition: all 100ms linear; transition: all 100ms linear;
transition-property: color, background-color;
} }
&.selected { &.selected {

1
app/javascript/flavours/glitch/styles/components/drawer.scss
View File

@@ -125,6 +125,7 @@
cursor: default; cursor: default;
pointer-events: none; pointer-events: none;
transition: all 100ms linear; transition: all 100ms linear;
transition-property: color, transform, opacity;
} }
.fa-search { .fa-search {

8
app/javascript/flavours/glitch/styles/components/index.scss
View File

@@ -25,6 +25,7 @@
text-decoration: none; text-decoration: none;
text-overflow: ellipsis; text-overflow: ellipsis;
transition: all 100ms ease-in; transition: all 100ms ease-in;
transition-property: background-color;
white-space: nowrap; white-space: nowrap;
width: auto; width: auto;
@@ -33,6 +34,7 @@
&:hover { &:hover {
background-color: lighten($ui-highlight-color, 7%); background-color: lighten($ui-highlight-color, 7%);
transition: all 200ms ease-out; transition: all 200ms ease-out;
transition-property: background-color;
} }
&--destructive { &--destructive {
@@ -564,6 +566,7 @@
font-weight: 500; font-weight: 500;
border-bottom: 2px solid lighten($ui-base-color, 8%); border-bottom: 2px solid lighten($ui-base-color, 8%);
transition: all 200ms linear; transition: all 200ms linear;
transition-property: background;
.fa { .fa {
font-weight: 400; font-weight: 400;
@@ -581,6 +584,7 @@
@include multi-columns('screen and (min-width: 631px)') { @include multi-columns('screen and (min-width: 631px)') {
background: lighten($ui-base-color, 14%); background: lighten($ui-base-color, 14%);
transition: all 100ms linear; transition: all 100ms linear;
transition-property: background;
} }
} }
@@ -664,7 +668,7 @@
padding: 0; padding: 0;
border-radius: 30px; border-radius: 30px;
background-color: $ui-base-color; background-color: $ui-base-color;
transition: all 0.2s ease; transition: background-color 0.2s ease;
} }
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
@@ -717,7 +721,6 @@
} }
.react-toggle-thumb { .react-toggle-thumb {
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
position: absolute; position: absolute;
top: 1px; top: 1px;
left: 1px; left: 1px;
@@ -728,6 +731,7 @@
background-color: darken($simple-background-color, 2%); background-color: darken($simple-background-color, 2%);
box-sizing: border-box; box-sizing: border-box;
transition: all 0.25s ease; transition: all 0.25s ease;
transition-property: border-color, left;
} }
.react-toggle--checked .react-toggle-thumb { .react-toggle--checked .react-toggle-thumb {

1
app/javascript/flavours/glitch/styles/components/search.scss
View File

@@ -18,6 +18,7 @@
display: inline-block; display: inline-block;
opacity: 0; opacity: 0;
transition: all 100ms linear; transition: all 100ms linear;
transition-property: transform, opacity;
font-size: 18px; font-size: 18px;
width: 18px; width: 18px;
height: 18px; height: 18px;