3 files changed, 91 insertions, 0 deletions
diff --git a/asset/css/mixin/card.less b/asset/css/mixin/card.less
new file mode 100644
index 0000000..3823ba2
--- /dev/null
+++ b/asset/css/mixin/card.less
@@ -0,0 +1,23 @@
+.card() {
+  &.card {
+    .rounded-corners(.5em);
+    border: 1px solid var(--card-border-color, @card-border-color);
+
+    .card-header {
+      display: flex;
+      align-items: baseline;
+      justify-content: space-between;
+      padding: .5em;
+
+      border-bottom: 1px solid var(--card-border-color, @card-border-color);
+
+      .meta span {
+        font-size: 11/12em;
+      }
+    }
+
+    .card-body {
+      padding: .5em;
+    }
+  }
+}
diff --git a/asset/css/mixin/mixins.less b/asset/css/mixin/mixins.less
new file mode 100644
index 0000000..ca30dd0
--- /dev/null
+++ b/asset/css/mixin/mixins.less
@@ -0,0 +1,37 @@
+.rounded-corners(@border-radius: 0.4em) {
+  border-radius: @border-radius;
+
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+}
+
+.appearance(@appearance) {
+  -webkit-appearance: @appearance;
+  -moz-appearance: @appearance;
+  -ms-appearance: @appearance;
+  appearance: @appearance;
+}
+
+.box-shadow(@x: 0.2em; @y: 0.2em; @blur: 0.2em; @spread: 0; @color: rgba(83, 83, 83, 0.25)) {
+  -webkit-box-shadow: @arguments;
+  -moz-box-shadow: @arguments;
+  box-shadow: @arguments;
+}
+
+.line-clamp(@numOfLines: 2) when (@numOfLines > 1) {
+  display: -webkit-box;
+  -webkit-line-clamp: @numOfLines;
+  -webkit-box-orient: vertical;
+}
+.line-clamp(@numOfLines: 2) when (@numOfLines = "reset") {
+  display: revert;
+  -webkit-line-clamp: initial;
+  -webkit-box-orient: initial;
+}
+
+.text-ellipsis() {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
diff --git a/asset/css/mixin/state-badges.less b/asset/css/mixin/state-badges.less
new file mode 100644
index 0000000..4be2d07
--- /dev/null
+++ b/asset/css/mixin/state-badges.less
@@ -0,0 +1,31 @@
+.state-badges() {
+  &.state-badges {
+    padding: 0;
+
+    ul {
+      padding: 0;
+    }
+
+    li {
+      display: inline-block;
+    }
+
+    li > ul > li:first-child:not(:last-child) .state-badge {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+    }
+
+    li > ul > li:last-child:not(:first-child) .state-badge {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+    }
+
+    > li:not(:last-child) {
+      margin-right: .25em;
+    }
+
+    li > ul > li + li {
+      margin-left: 1px;
+    }
+  }
+}