2 files changed, 64 insertions, 0 deletions
diff --git a/css/component/component.css b/css/component/component.css
new file mode 100644
index 00000000..dd96ae94
--- /dev/null
+++ b/css/component/component.css
@@ -0,0 +1,42 @@
+.h-line-primary {
+  background-color: $color-text-primary;
+  height: $line-third;
+}
+.h-line-secondary {
+  background-color: $color-text-secondary;
+  height: $line-third;
+}
+hr {
+  background-color: $color-text-third;
+  height: $line-third;
+  border: 0;
+}
+.tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: $margin-m-0;
+}
+.tag-title {
+  margin: $margin-m-1 0;
+  color: $color-text-secondary;
+  font-size: $font-size-header;
+}
+.tag-title a {
+  color: $color-text-secondary;
+}
+.post-tag {
+  border: $line-third solid $color-text-primary;
+  margin-right: $margin-s-2;
+  margin-bottom: $margin-s-2;
+  padding: $margin-s-2 $margin-m-0 $margin-s-2 $margin-m-0;
+  border-radius: $margin-m-2;
+}
+.post-tag a {
+  background-image: none !important;
+}
+.post-tag:hover {
+  background-color: $color-text-primary;
+}
+.post-tag:hover a {
+  color: $color-background;
+}
diff --git a/css/component/icon.css b/css/component/icon.css
new file mode 100644
index 00000000..c7dbd0ab
--- /dev/null
+++ b/css/component/icon.css
@@ -0,0 +1,22 @@
+.icon {
+  display: block;
+  background-color: $color-text-primary;
+  width: $icon-size;
+  height: $icon-size;
+}
+.arrow-up {
+  -webkit-mask-image: url("../icon/arrow-up.svg");
+  mask-image: url("../icon/arrow-up.svg");
+}
+.arrow-left {
+  -webkit-mask-image: url("../icon/arrow-left.svg");
+  mask-image: url("../icon/arrow-left.svg");
+}
+.arrow-right {
+  -webkit-mask-image: url("../icon/arrow-right.svg");
+  mask-image: url("../icon/arrow-right.svg");
+}
+.close-btn {
+  -webkit-mask-image: url("../icon/close-btn.svg");
+  mask-image: url("../icon/close-btn.svg");
+}