fix performance issues and glitches on older browsers
content: "";
height: 1em;
width: 2em;
- transition: all 0.2s;
}
+
+/* Newer browsers */
@supports (mask: url('/folded.svg') no-repeat) {
.ExplorerView ul > li.category .opener {
mask: url('/folded.svg') no-repeat;
background-color: #000000;
+ transition: all 0.2s;
}
.ExplorerView ul li.selected > span.item > .opener,
.ExplorerView ul li > span.item > .opener:focus {
background-color: #00BCD4;
}
+ /* Animations on component creation / destruction */
+ .ExplorerViewTransition-enter {
+ transition: all .2s ease-in-out;
+ opacity: 0;
+ transform-origin: left top;
+ transform: translateX(-20px) scale(0);
+ }
+ .ExplorerViewTransition-enter-active {
+ opacity: 1;
+ transform: translateX(0px) scale(1);
+ }
+ .ExplorerViewTransition-leave {
+ transition: all .2s ease-in-out;
+ transform-origin: left top;
+ }
+ .ExplorerViewTransition-leave-active {
+ opacity: 0;
+ transform: translateX(-20px) scale(0);
+ }
}
+
+/* Older browsers, e.g. Firefox ESR */
@supports not (mask: url('/folded.svg') no-repeat) {
.ExplorerView ul > li.category .opener {
background-image: url('/folded.svg');
.ExplorerView li.dragover > span.item {}
.ExplorerView li.nodrop {}
.ExplorerView li.nodrop > span.item {}
-
-/* Animations on component creation / destruction */
-.ExplorerViewTransition-enter {
- transition: all .2s ease-in-out;
- opacity: 0;
- transform-origin: left top;
- transform: translateX(-20px) scale(0);
-}
-.ExplorerViewTransition-enter-active {
- opacity: 1;
- transform: translateX(0px) scale(1);
-}
-.ExplorerViewTransition-leave {
- transition: all .2s ease-in-out;
- transform-origin: left top;
-}
-.ExplorerViewTransition-leave-active {
- opacity: 0;
- transform: translateX(-20px) scale(0);
-}
