contrapunctus/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Fix small styling issue with tabbed component

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-10-01 00:23:44 +02:00
parent 03c16df41a
commit 04a2f91b36
2 changed files with 94 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

2
UI/Base/TabbedComponent.ts
View file

@ -31,7 +31,7 @@ export class TabbedComponent extends Combine {
tabs.push(tab)
}
const header = new Combine(tabs).SetClass("block tabs-header-bar")
const header = new Combine(tabs).SetClass("tabs-header-bar")
const actualContent = new VariableUiElement(
openedTabSrc.map(i => contentElements[i])
)

102
css/index-tailwind-output.css
View file

@ -1322,6 +1322,11 @@ video {
background-color: rgba(156, 163, 175, var(--tw-bg-opacity));
}
.bg-indigo-100 {
--tw-bg-opacity: 1;
background-color: rgba(224, 231, 255, var(--tw-bg-opacity));
}
.bg-gray-300 {
--tw-bg-opacity: 1;
background-color: rgba(209, 213, 219, var(--tw-bg-opacity));
@ -1337,11 +1342,6 @@ video {
background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
}
.bg-indigo-100 {
--tw-bg-opacity: 1;
background-color: rgba(224, 231, 255, var(--tw-bg-opacity));
}
.bg-gray-100 {
--tw-bg-opacity: 1;
background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
@ -1573,10 +1573,6 @@ video {
text-decoration: underline;
}
.line-through {
text-decoration: line-through;
}
.opacity-0 {
opacity: 0;
}
@ -1992,6 +1988,8 @@ li::marker {
}
@-webkit-keyframes slide {
/* This is the animation on the marker to add a new point - it slides through all the possible presets */
from {
transform: translateX(0%);
}
@ -2002,6 +2000,8 @@ li::marker {
}
@keyframes slide {
/* This is the animation on the marker to add a new point - it slides through all the possible presets */
from {
transform: translateX(0%);
}
@ -2011,6 +2011,90 @@ li::marker {
}
}
.hand-drag-animation {
-webkit-animation: hand-drag-animation 6s ease-in-out infinite;
animation: hand-drag-animation 6s ease-in-out infinite;
transform-origin: 50% 125%;
}
@-webkit-keyframes hand-drag-animation {
/* This is the animation on the little extra hand on the location input. If fades in, invites the user to interact/drag the map */
0% {
opacity: 0;
transform: rotate(-30deg);
}
6% {
opacity: 1;
transform: rotate(-30deg);
}
12% {
opacity: 1;
transform: rotate(-45deg);
}
24% {
opacity: 1;
transform: rotate(-00deg);
}
30% {
opacity: 1;
transform: rotate(-30deg);
}
36% {
opacity: 0;
transform: rotate(-30deg);
}
100% {
opacity: 0;
transform: rotate(-30deg);
}
}
@keyframes hand-drag-animation {
/* This is the animation on the little extra hand on the location input. If fades in, invites the user to interact/drag the map */
0% {
opacity: 0;
transform: rotate(-30deg);
}
6% {
opacity: 1;
transform: rotate(-30deg);
}
12% {
opacity: 1;
transform: rotate(-45deg);
}
24% {
opacity: 1;
transform: rotate(-00deg);
}
30% {
opacity: 1;
transform: rotate(-30deg);
}
36% {
opacity: 0;
transform: rotate(-30deg);
}
100% {
opacity: 0;
transform: rotate(-30deg);
}
}
/**************************************/
#topleft-tools {