added eye.css and deleted empty telegram.css

README.md

@@ -13,3 +13,8 @@ more real and complex:
 ```HTML
 <button style="display: flex; gap: 1rem;"><i class="icon shopping cart"></i>Cart: 0</button>
 ```
+
+## Demonstration
+<img src="assets/1.png" alt="Demonstration image" height="200"/>
+<img src="assets/2.png" alt="Demonstration image" height="200"/><br/>
+<img src="assets/3.png" alt="Demonstration image" height="200"/>

close.css

@@ -1,31 +0,0 @@
-@charset "UTF-8";
-
-i.icon.close {
-	--diameter: 22px;
-	box-sizing: border-box;
-	position: relative;
-	display: block;
-	width: var(--diameter);
-	height: var(--diameter);
-	border: 2px solid transparent;
-	border-radius: 40px;
-}
-
-i.icon.close::after,
-i.icon.close::before {
-	content: "";
-	display: block;
-	box-sizing: border-box;
-	position: absolute;
-	width: 16px;
-	height: 2px;
-	background: currentColor;
-	transform: rotate(45deg);
-	border-radius: 5px;
-	top: 8px;
-	left: 1px;
-}
-
-i.icon.close::after {
-	transform: rotate(-45deg);
-}

css/check.css

@@ -0,0 +1,30 @@
+@charset "UTF-8";
+
+i.icon.check {
+	--width: 2em;
+	--height: 1.5em;
+	--up: 10px;
+	--down: 6px;
+	position: relative;
+	width: var(--width);
+	height: var(--height);
+	box-sizing: border-box;
+	display: block;
+	border-radius: 100px;
+	border: 2px solid transparent;
+
+	&::after {
+		position: absolute;
+		content: "";
+		top: -0.3em;
+		left: 0.4em;
+		width: var(--down);
+		height: var(--up);
+		box-sizing: border-box;
+		display: block;
+		border-width: 0 2px 2px 0;
+		border-style: solid;
+		transform-origin: bottom left;
+		transform: rotate(45deg);
+	}
+}

css/close.css

@@ -0,0 +1,36 @@
+@charset "UTF-8";
+
+i.icon.close {
+	--diameter: 2em;
+	--size: 1.5em;
+	position: relative;
+	width: var(--diameter);
+	height: var(--diameter);
+	box-sizing: border-box;
+	display: block;
+	border-radius: 40px;
+	border: 0.2em solid transparent;
+
+	&:is(.small) {
+		--size: 1.2em;
+	}
+
+	&::after,
+	&::before {
+		top: 0.7em;
+		left: 0.2em;
+		position: absolute;
+		content: "";
+		width: var(--size, 1.5em);
+		height: 2px;
+		box-sizing: border-box;
+		display: block;
+		border-radius: 5px;
+		background-color: currentColor;
+		transform: rotate(45deg);
+	}
+
+	&::after {
+		transform: rotate(-45deg);
+	}
+}

css/code_slash.css

@@ -0,0 +1,36 @@
+@charset "UTF-8";
+
+i.icon.code.slash {
+	position: relative;
+	width: 2px;
+	height: 16px;
+	box-sizing: border-box;
+	display: block;
+	transform: rotate(15deg);
+	background: currentColor;
+
+	&::after,
+	&::before {
+		position: absolute;
+		content: "";
+		width: 8px;
+		height: 8px;
+		box-sizing: border-box;
+		display: block;
+		transform: rotate(-60deg);
+	}
+
+	&::before {
+		top: 5px;
+		left: -8px;
+		border-top: 2px solid;
+		border-left: 2px solid;
+	}
+
+	&::after {
+		top: 3px;
+		right: -8px;
+		border-right: 2px solid;
+		border-bottom: 2px solid;
+	}
+}

css/coffe.css

@@ -0,0 +1,46 @@
+@charset "UTF-8";
+
+i.icon.coffe {
+	position: relative;
+	margin-top: 3px;
+	margin-left: -4px;
+	width: 18px;
+	height: 14px;
+	box-sizing: border-box;
+	display: block;
+	border-radius: 6px;
+	border-top-left-radius: 0;
+	border-top-right-radius: 0;
+	border: 2px solid;
+
+	&::after,
+	&::before {
+		content: "";
+		position: absolute;
+		box-sizing: border-box;
+		display: block;
+	}
+
+	&::before {
+		top: -7px;
+		left: 2px;
+		width: 2px;
+		height: 4px;
+		border-radius: 3px;
+		background: currentColor;
+		box-shadow:
+			4px 0 0,
+			8px 0 0;
+	}
+
+	&::after {
+		top: -1px;
+		right: -6px;
+		width: 6px;
+		height: 8px;
+		border-radius: 100px;
+		border-top-left-radius: 0;
+		border-bottom-left-radius: 0;
+		border: 2px solid;
+	}
+}

css/eye.css

@@ -0,0 +1,59 @@
+@charset "UTF-8";
+
+i.icon.eye {
+	position: relative;
+	width: 24px;
+	height: 18px;
+	display: block;
+	box-sizing: border-box;
+	overflow: hidden;
+	border-bottom-right-radius: 100px;
+	border-bottom-left-radius: 100px;
+
+	:is(.small) {
+		width: 21px;
+		height: 15px;
+		border-bottom-right-radius: 70px;
+		border-bottom-left-radius: 70px;
+
+		&::before {
+			left: var(--left, 7px);
+			bottom: var(--bottom, 3px);
+			width: 7px;
+			height: 7px;
+		}
+
+		&::after {
+			width: 21px;
+			height: 21px;
+		}
+	}
+
+	&::before,
+	&::after {
+		content: "";
+		position: absolute;
+		display: block;
+		box-sizing: border-box;
+		border-radius: 100px;
+	}
+
+	&::before {
+		left: var(--left, 8px);
+		bottom: var(--bottom, 4px);
+		width: 8px;
+		height: 8px;
+		border: 2px solid var(--text-color-active, #000);
+		transition: var(--transition, 0) ease-out;
+		transform: rotateX(var(--offset-x, 0)) rotateY(var(--offset-y, 0));
+	}
+
+	&::after {
+		top: 2px;
+		width: 24px;
+		height: 24px;
+		box-shadow:
+			inset 0 -8px 0 2px,
+			inset 0 0 0 2px;
+	}
+}