Breaking changes.

src/_h5ai/public/css/lib/mixins.less

@@ -0,0 +1,66 @@
+.card {
+    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
+}
+
+.raised {
+    box-shadow: 0 1px 10px 0 rgba(0,0,0,0.5);
+}
+
+.popup {
+    box-shadow: 0 1px 20px 0 rgba(0,0,0,0.5);
+}
+
+.rounded {
+    border-radius: 2px;
+}
+
+.clear-appearance {
+    -moz-appearance: none;
+    -ms-appearance: none;
+    -webkit-appearance: none;
+}
+
+.eased-transition {
+    transition: all 0.2s ease-in-out;
+}
+
+.flex-base {
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-content: flex-start;
+    align-items: stretch;
+}
+
+.flex-column {
+    .flex-base;
+    flex-direction: column;
+}
+
+.flex-row {
+    .flex-base;
+    flex-direction: row;
+}
+
+.el-button {
+    .card;
+    .rounded;
+    .eased-transition;
+    color: @col-text-primary-white;
+    background: @col-blue-400;
+    cursor: pointer;
+    text-decoration: none;
+
+    &:hover {
+        .raised;
+    }
+}
+
+.el-input {
+    .card;
+    .rounded;
+    .clear-appearance;
+    background: @col-back-paper;
+    border: none;
+    outline: none;
+}