This commit is contained in:
Víctor Losada Hernández
2026-09-28 17:37:35 +02:00
parent 8a372c1454
commit 38f6eb000f
37 changed files with 3025 additions and 5622 deletions
+11 -11
View File
@@ -104,7 +104,7 @@
from { @from(); }
to { @to(); }
};
@-webkit-keyframes @name {@frames();}
@-webkit-keyframes @name {@frames();}
@-moz-keyframes @name {@frames();}
@-ms-keyframes @name {@frames();}
@-o-keyframes @name {@frames();}
@@ -136,7 +136,7 @@
.createAnimation(fadeIn; @duration; @easing);
.createFrames(fadeIn,
{ opacity : 0; },
{ opacity : 1; }
{ opacity : 1; }
);
}
@@ -144,7 +144,7 @@
.createAnimation(fadeInDown; @duration; @easing);
.createFrames(fadeInDown,
{ opacity : 0; .transform(translateY(20px));},
{ opacity : 1; .transform(translateY(0px));}
{ opacity : 1; .transform(translateY(0px));}
);
}
@@ -152,7 +152,7 @@
.createAnimation(fadeInTop; @duration; @easing);
.createFrames(fadeInTop,
{ opacity : 0; .transform(translateY(-20px)); },
{ opacity : 1; .transform(translateY(0px));}
{ opacity : 1; .transform(translateY(0px));}
);
}
@@ -160,7 +160,7 @@
.createAnimation(fadeInLeft; @duration; @easing);
.createFrames(fadeInLeft,
{ opacity: 0; .transform(translateX(-20px));},
{ opacity: 1; .transform(translateX(0));}
{ opacity: 1; .transform(translateX(0));}
);
}
@@ -168,7 +168,7 @@
.createAnimation(fadeInRight; @duration; @easing);
.createFrames(fadeInRight,
{ opacity: 0; .transform(translateX(20px));},
{ opacity: 1; .transform(translateX(0));}
{ opacity: 1; .transform(translateX(0));}
);
}
@@ -176,7 +176,7 @@
.createAnimation(fadeOut; @duration; @easing);
.createFrames(fadeOut,
{ opacity : 1; },
{ opacity : 0; }
{ opacity : 0; }
);
}
@@ -184,7 +184,7 @@
.createAnimation(fadeOutDown; @duration; @easing);
.createFrames(fadeOutDown,
{ opacity : 1; .transform(translateY(0)); visibility: visible;},
{ opacity : 0; .transform(translateY(20px)); visibility: hidden;}
{ opacity : 0; .transform(translateY(20px)); visibility: hidden;}
);
}
@@ -192,7 +192,7 @@
.createAnimation(fadeOutTop; @duration; @easing);
.createFrames(fadeOutTop,
{ opacity : 1; .transform(translateY(0)); },
{ opacity : 0; .transform(translateY(-20px)); }
{ opacity : 0; .transform(translateY(-20px)); }
);
}
@@ -200,7 +200,7 @@
.createAnimation(fadeOutLeft; @duration; @easing);
.createFrames(fadeOutLeft,
{ opacity : 1; .transform(translateX(0));},
{ opacity : 0; .transform(translateX(-20px));}
{ opacity : 0; .transform(translateX(-20px));}
);
}
@@ -208,7 +208,7 @@
.createAnimation(fadeOutRight; @duration; @easing);
.createFrames(fadeOutRight,
{ opacity : 1; .transform(translateX(0));},
{ opacity : 0; .transform(translateX(20px));}
{ opacity : 0; .transform(translateX(20px));}
);
}
+2 -2
View File
@@ -40,7 +40,7 @@ p {
color : @copyGrey;
}
code {
font-family : 'Courier', "mono";
font-family : 'Courier', 'mono';
color : black;
white-space : pre;
background-color : #F8F8F8;
@@ -54,7 +54,7 @@ button {
.animate(background-color);
display : inline-block;
padding : 0.6em 1.2em;
font-family : 'Lato', "Helvetica", "Arial", sans-serif;
font-family : 'Lato', 'Helvetica', 'Arial', sans-serif;
font-size : 15px;
color : white;
text-decoration : none;
+1 -1
View File
@@ -22,4 +22,4 @@
background-color : unset;
}
:where(i){ text-box-trim: trim-both }
:where(i) { text-box-trim : trim-both; }
+26 -26
View File
@@ -3,23 +3,23 @@
@arrowSize : 6px;
@arrowPosition : 18px;
[data-tooltip] {
position:relative;
position : relative;
.tooltip(attr(data-tooltip));
}
[data-tooltip-top] {
position:relative;
position : relative;
.tooltipTop(attr(data-tooltip-top));
}
[data-tooltip-bottom] {
position:relative;
position : relative;
.tooltipBottom(attr(data-tooltip-bottom));
}
[data-tooltip-left] {
position:relative;
position : relative;
.tooltipLeft(attr(data-tooltip-left));
}
[data-tooltip-right] {
position:relative;
position : relative;
.tooltipRight(attr(data-tooltip-right));
}
.tooltip(@content) {
@@ -33,9 +33,9 @@
}
&::after { margin-left : -18px; }
&::before, &::after {
bottom : 100%;
left : 50%;
translate: -50% 0;
bottom : 100%;
left : 50%;
translate : -50% 0;
}
&:hover::after, &:hover::before, &:focus::after, &:focus::before {
.transform(translateY(-(@arrowSize + 2)));
@@ -49,9 +49,9 @@
}
&::after { margin-left : -18px; }
&::before, &::after {
top : 100%;
left : 50%;
translate: -50% 0;
top : 100%;
left : 50%;
translate : -50% 0;
}
&:hover::after, &:hover::before, &:focus::after, &:focus::before {
.transform(translateY(@arrowSize + 2));
@@ -65,8 +65,8 @@
border-left-color : @tooltipColor;
}
&::after {
max-width : 50ch;
margin-bottom : -14px;
max-width : 50ch;
}
&::before, &::after {
right : 100%;
@@ -84,13 +84,13 @@
border-right-color : @tooltipColor;
}
&::after {
max-width : 50ch;
margin-bottom : -14px;
max-width : 50ch;
}
&::before, &::after {
top : 50%;
left : 100%;
translate:0 -50%;
top : 50%;
left : 100%;
translate : 0 -50%;
}
&:hover::after, &:hover::before, &:focus::after, &:focus::before {
.transform(translateX(@arrowSize + 2));
@@ -115,17 +115,17 @@
}
//Box
&::after {
visibility : hidden;
padding : 8px 10px;
font-size : 12px;
line-height : 12px;
color : white;
content : @content;
background : @tooltipColor;
max-width : 60ch;
width :max-content;
word-break : break-word;
visibility : hidden;
width : max-content;
max-width : 60ch;
padding : 8px 10px;
font-size : 12px;
line-height : 12px;
color : white;
word-break : break-word;
overflow-wrap : break-word;
content : @content;
background : @tooltipColor;
}
&:hover::before, &:hover::after {
visibility : visible;