contentoh-components-library 21.6.16 → 21.6.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -32,11 +32,16 @@ var logoToWhite = "grayscale(1) brightness(0) invert(1)";
|
|
|
32
32
|
anterior, lo que ensancha el trazo de forma pareja sin desenfocarlo (blur 0).
|
|
33
33
|
Va DESPUÉS de logoToWhite a propósito: antes del invert(1) estas sombras
|
|
34
34
|
blancas se voltearían a negro.
|
|
35
|
+
|
|
36
|
+
El peso se dosifica con el alfa, no con el offset: a 0.15px el desplazamiento
|
|
37
|
+
ya es sub-pixel, así que reducirlo cae en el mismo píxel al rasterizar y no se
|
|
38
|
+
distingue. Medio blanco (0.5) deja el trazo a mitad de camino entre el
|
|
39
|
+
original y el engrosado opaco, conservando las cuatro cardinales.
|
|
35
40
|
*/
|
|
36
41
|
|
|
37
|
-
var logoThicken = "\n drop-shadow(0.15px 0 0
|
|
42
|
+
var logoThicken = "\n drop-shadow(0.15px 0 0 rgba(255, 255, 255, 0.5))\n drop-shadow(-0.15px 0 0 rgba(255, 255, 255, 0.5))\n drop-shadow(0 0.15px 0 rgba(255, 255, 255, 0.5))\n drop-shadow(0 -0.15px 0 rgba(255, 255, 255, 0.5))\n";
|
|
38
43
|
|
|
39
|
-
var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n height: 100%;\n box-sizing: border-box;\n padding: 23px 0 26px 0;\n flex-direction: column;\n justify-content: space-between;\n overflow: none;\n width: ", ";\n background: linear-gradient(180deg, #e33aa9 0%, #3b1366 100%);\n scrollbar-width: none;\n display: flex;\n text-align: center;\n transition: width 0.3s linear;\n margin: 0;\n & + * {\n margin-left: 30px;\n }\n .logo-footer {\n /*\n Ambos logotipos son anchos (6:1 el del pie, 7.6:1 el de arriba), as\xED que\n el ancho es lo que decide si se ven parejos: 26px de alto dan ~156px,\n cerca de los ~167px del logotipo superior a 22px.\n */\n height:
|
|
44
|
+
var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n height: 100%;\n box-sizing: border-box;\n padding: 23px 0 26px 0;\n flex-direction: column;\n justify-content: space-between;\n overflow: none;\n width: ", ";\n background: linear-gradient(180deg, #e33aa9 0%, #3b1366 100%);\n scrollbar-width: none;\n display: flex;\n text-align: center;\n transition: width 0.3s linear;\n margin: 0;\n & + * {\n margin-left: 30px;\n }\n .logo-footer {\n /*\n Ambos logotipos son anchos (6:1 el del pie, 7.6:1 el de arriba), as\xED que\n el ancho es lo que decide si se ven parejos: 26px de alto dan ~156px,\n cerca de los ~167px del logotipo superior a 22px.\n */\n height: 29px;\n align-self: center;\n flex-shrink: 0;\n opacity: 0.9;\n filter: ", ";\n /* Firma anclada al pie: el space-between la baja hasta el padding. */\n margin-top: auto;\n }\n .navbar-top {\n /*\n Caja de alto fijo: el isotipo animado \"respira\" (sus frames crecen de\n 156px a 192px de contenido) y sin este slot cada latido empujar\xEDa el men\xFA\n hacia abajo. Tambi\xE9n absorbe el cambio de alto entre logotipo e isotipo.\n */\n .logo-slot {\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .logo {\n width: auto;\n filter: ", ";\n }\n .logo-wordmark {\n height: 22px;\n filter: ", " ", ";\n }\n /*\n El GIF trae ~20% de lienzo transparente por eje (contenido \xFAtil de 240x192\n dentro de 300x320), as\xED que necesita m\xE1s alto declarado que el SVG que\n sustituye para leerse del mismo tama\xF1o: 40px de caja \u2248 24px de glifo.\n */\n .logo-isotype {\n height: 40px;\n }\n .option {\n .option-div {\n width: 100%;\n white-space: nowrap;\n }\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-top: 50px;\n .active {\n text-decoration: none;\n background: rgba(255, 255, 255, 0.1);\n }\n .sub-option {\n display: flex;\n flex-direction: column;\n padding-left: 32px;\n height: auto;\n width: auto;\n &:last-child {\n margin-bottom: 10px;\n }\n }\n }\n }\n"])), function (_ref) {
|
|
40
45
|
var bar = _ref.bar;
|
|
41
46
|
return bar ? "240px" : "66px";
|
|
42
47
|
}, logoToWhite, logoToWhite, logoToWhite, logoThicken);
|
package/package.json
CHANGED
|
@@ -18,10 +18,17 @@ const logoToWhite = "grayscale(1) brightness(0) invert(1)";
|
|
|
18
18
|
anterior, lo que ensancha el trazo de forma pareja sin desenfocarlo (blur 0).
|
|
19
19
|
Va DESPUÉS de logoToWhite a propósito: antes del invert(1) estas sombras
|
|
20
20
|
blancas se voltearían a negro.
|
|
21
|
+
|
|
22
|
+
El peso se dosifica con el alfa, no con el offset: a 0.15px el desplazamiento
|
|
23
|
+
ya es sub-pixel, así que reducirlo cae en el mismo píxel al rasterizar y no se
|
|
24
|
+
distingue. Medio blanco (0.5) deja el trazo a mitad de camino entre el
|
|
25
|
+
original y el engrosado opaco, conservando las cuatro cardinales.
|
|
21
26
|
*/
|
|
22
27
|
const logoThicken = `
|
|
23
|
-
drop-shadow(0.15px 0 0
|
|
24
|
-
drop-shadow(0
|
|
28
|
+
drop-shadow(0.15px 0 0 rgba(255, 255, 255, 0.5))
|
|
29
|
+
drop-shadow(-0.15px 0 0 rgba(255, 255, 255, 0.5))
|
|
30
|
+
drop-shadow(0 0.15px 0 rgba(255, 255, 255, 0.5))
|
|
31
|
+
drop-shadow(0 -0.15px 0 rgba(255, 255, 255, 0.5))
|
|
25
32
|
`;
|
|
26
33
|
|
|
27
34
|
export const Container = styled.div`
|
|
@@ -47,7 +54,7 @@ export const Container = styled.div`
|
|
|
47
54
|
el ancho es lo que decide si se ven parejos: 26px de alto dan ~156px,
|
|
48
55
|
cerca de los ~167px del logotipo superior a 22px.
|
|
49
56
|
*/
|
|
50
|
-
height:
|
|
57
|
+
height: 29px;
|
|
51
58
|
align-self: center;
|
|
52
59
|
flex-shrink: 0;
|
|
53
60
|
opacity: 0.9;
|