size and align icons for url-widgets

api/js/etemplate/Et2Url/Et2InvokerMixin.ts

@@ -39,6 +39,7 @@ export const Et2InvokerMixin = dedupeMixin((superclass) =>
 				}
 			};
 		}
+
 		static get styles()
 		{
 			return [
@@ -58,6 +59,7 @@ export const Et2InvokerMixin = dedupeMixin((superclass) =>
 					align-items: center
 				}
 				::slotted([slot="suffix"]) {
+					width: 12px;
 					border: none !important;
 					background-color: transparent !important;
 				}
@@ -68,6 +70,7 @@ export const Et2InvokerMixin = dedupeMixin((superclass) =>
 			`,
 			];
 		}
+
 		get slots()
 		{
 			return {

api/js/etemplate/Et2Url/Et2Url.ts

@@ -11,6 +11,8 @@
 import {Et2InvokerMixin} from "./Et2InvokerMixin";
 import {IsEmail} from "../Validators/IsEmail";
 import {Et2Textbox} from "../Et2Textbox/Et2Textbox";
+import {colorsDefStyles} from "../Styles/colorsDefStyles";
+import {css} from "@lion/core";
 
 /**
  * @customElement et2-url
@@ -39,6 +41,21 @@ export class Et2Url extends Et2InvokerMixin(Et2Textbox)
 		};
 	}
 
+	static get styles()
+	{
+		return [
+			...super.styles,
+			colorsDefStyles,
+			css`
+				::slotted([slot="suffix"]) {
+					font-size: 133% !important;
+					position: relative;
+					left: -2px;
+				}
+			`,
+		];
+	}
+
 	constructor()
 	{
 		super();

api/js/etemplate/Et2Url/Et2UrlEmail.ts

@@ -11,12 +11,27 @@
 import {Et2InvokerMixin} from "./Et2InvokerMixin";
 import {IsEmail} from "../Validators/IsEmail";
 import {Et2Textbox} from "../Et2Textbox/Et2Textbox";
+import {colorsDefStyles} from "../Styles/colorsDefStyles";
+import {css} from "@lion/core";
 
 /**
  * @customElement et2-url-email
  */
 export class Et2UrlEmail extends Et2InvokerMixin(Et2Textbox)
 {
+	static get styles()
+	{
+		return [
+			...super.styles,
+			colorsDefStyles,
+			css`
+				::slotted([slot="suffix"]) {
+					font-size: 90% !important;
+				}
+			`,
+		];
+	}
+
 	constructor()
 	{
 		super();

api/js/etemplate/Et2Url/Et2UrlFax.ts

@@ -10,12 +10,29 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import {Et2UrlPhone} from "./Et2UrlPhone";
 import {Et2UrlEmail} from "./Et2UrlEmail";
+import {colorsDefStyles} from "../Styles/colorsDefStyles";
+import {css} from "@lion/core";
 
 /**
  * @customElement et2-url-phone
  */
 export class Et2UrlFax extends Et2UrlPhone
 {
+	static get styles()
+	{
+		return [
+			...super.styles,
+			colorsDefStyles,
+			css`
+				::slotted([slot="suffix"]) {
+					font-size: 90% !important;
+					position: relative;
+					left: -2px;
+				}
+			`,
+		];
+	}
+
 	constructor()
 	{
 		super();

api/js/etemplate/Et2Url/Et2UrlPhone.ts

@@ -10,12 +10,27 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import {Et2InvokerMixin} from "./Et2InvokerMixin";
 import {Et2Textbox} from "../Et2Textbox/Et2Textbox";
+import {colorsDefStyles} from "../Styles/colorsDefStyles";
+import {css} from "@lion/core";
 
 /**
  * @customElement et2-url-phone
  */
 export class Et2UrlPhone extends Et2InvokerMixin(Et2Textbox)
 {
+	static get styles()
+	{
+		return [
+			...super.styles,
+			colorsDefStyles,
+			css`
+				::slotted([slot="suffix"]) {
+					font-size: 133% !important;
+				}
+			`,
+		];
+	}
+
 	constructor()
 	{
 		super();