Use web components for SVG icons

2019-08-30 16:04:28 +09:00
parent b32005cdee
commit d974156d68
13 changed files with 113 additions and 61 deletions
--- a/styles/icons.scarlet
+++ b/styles/icons.scarlet
@ -1,16 +1,7 @@
-.icon
-	width 1em
-	height 1em
-	min-width 1em
+.padded-icon
 	margin-right 0.5em
 	vertical-align text-bottom
-	fill currentColor

-.raw-icon
-	width 1em
-	height 1em
-	min-width 1em
-	fill currentColor
-
-.icon-headphones
-	transform translateY(2px)
+svg-icon
+	[name="headphones"]
+		transform translateY(2px)
--- a/styles/social-media.scarlet
+++ b/styles/social-media.scarlet
@ -13,8 +13,9 @@
 		transform scale(1.1)
 		opacity 1

-.icon-discord
-	transform scale(1.1)
+svg-icon
+	[name="discord"]
+		transform scale(1.1)

 // .sidebar-social-media
 // 	position relative
--- a/styles/tabs.scarlet
+++ b/styles/tabs.scarlet
@ -1,4 +1,6 @@
 .tab
+	horizontal
+	align-items center
 	color text-color
 	padding 0.5rem 1rem
 	background-color tab-background