use maintained theme

themes/CodeIT/assets/css/_mixin/_blur.scss

@@ -0,0 +1,5 @@
+@mixin blur {
+  .blur & {
+    @include filter(blur(1.5px));
+  }
+}

themes/CodeIT/assets/css/_mixin/_compatibility.scss

@@ -0,0 +1,110 @@
+@mixin border-radius($value) {
+  -webkit-border-radius: $value;
+  -moz-border-radius: $value;
+  border-radius: $value;
+}
+
+@mixin box-shadow($values...) {
+  -webkit-box-shadow: $values;
+  box-shadow: $values;
+}
+
+@mixin transition($values...) {
+  -webkit-transition: $values;
+  -moz-transition: $values;
+  -o-transition: $values;
+  transition: $values;
+}
+
+@mixin transform($value) {
+  -webkit-transform: $value;
+  -moz-transform: $value;
+  -ms-transform: $value;
+  -o-transform: $value;
+  transform: $value;
+}
+
+@mixin filter($value) {
+  -webkit-filter: $value;
+  -moz-filter: $value;
+  -ms-filter: $value;
+  filter: $value;
+}
+
+@mixin flex($value) {
+  -webkit-flex: $value;
+  flex: $value;
+}
+
+@mixin box($orient) {
+  display: -moz-box;
+  display: -webkit-box;
+  display: box;
+
+  -webkit-box-orient: $orient;
+  -moz-box-orient: $orient;
+  box-orient: $orient;
+}
+
+@mixin placeholder($color) {
+  input::-webkit-input-placeholder {
+    color: $color;
+  }
+
+  input:-moz-placeholder {
+    color: $color;
+  }
+
+  input::-moz-placeholder {
+    color: $color;
+  }
+
+  input:-ms-input-placeholder {
+    color: $color;
+  }
+
+  input::placeholder {
+    color: $color;
+  }
+}
+
+@mixin max-content($property) {
+  #{$property}: -webkit-max-content;
+  #{$property}: -moz-max-content;
+  #{$property}: intrinsic;
+  #{$property}: max-content;
+}
+
+@mixin tab-size($value) {
+  -moz-tab-size: $value;
+  -o-tab-size: $value;
+  tab-size: $value;
+}
+
+@mixin appearance($value) {
+  -moz-appearance: $value;
+  -webkit-appearance: $value;
+}
+
+@mixin overflow-wrap($value) {
+  word-wrap: $value;
+  overflow-wrap: $value;
+}
+
+@mixin line-break($value) {
+  -webkit-line-break: $value;
+  -ms-line-break: $value;
+  line-break: $value;
+}
+
+@mixin ms {
+  input::-ms-clear {
+    display: none;
+  }
+}
+
+@mixin object-fit($value) {
+  -o-object-fit: $value;
+  object-fit: $value;
+  font-family: "object-fit: #{$value};";
+}

themes/CodeIT/assets/css/_mixin/_details.scss

@@ -0,0 +1,7 @@
+@mixin details-transition-open {
+  @include transition(max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s);
+}
+
+@mixin details-transition-close {
+  @include transition(max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s);
+}

themes/CodeIT/assets/css/_mixin/_index.scss

@@ -0,0 +1,4 @@
+@import "_compatibility";
+@import "_link";
+@import "_blur";
+@import "_details";

themes/CodeIT/assets/css/_mixin/_link.scss

@@ -0,0 +1,26 @@
+@mixin link($light, $dark) {
+  a,
+  a::before,
+  a::after {
+    text-decoration: none;
+
+    color: if($light, $global-link-color, $single-link-color);
+
+    [theme="dark"] & {
+      color: if($dark, $global-link-color-dark, $single-link-color-dark);
+    }
+  }
+
+  a:active,
+  a:hover {
+    color: if($light, $global-link-hover-color, $single-link-hover-color);
+
+    [theme="dark"] & {
+      color: if(
+        $dark,
+        $global-link-hover-color-dark,
+        $single-link-hover-color-dark
+      );
+    }
+  }
+}