redesign 2023

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

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

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

@@ -0,0 +1,107 @@
+@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;
+  -ms-transform: $value;
+  -o-transform: $value;
+  transform: $value;
+}
+
+@mixin filter($value) {
+  -webkit-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 object-fit($value) {
+  -o-object-fit: $value;
+  object-fit: $value;
+  font-family: 'object-fit: #{$value};';
+}
+
+@mixin user-select($value) {
+  -webkit-user-select: $value !important;
+  -moz-user-select: $value !important;
+  user-select: $value !important;
+}

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

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

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

@@ -0,0 +1,5 @@
+@import '_compatibility';
+@import '_link';
+@import '_blur';
+@import '_details';
+@import '_z-index';

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

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

themes/FixIt/assets/css/_mixin/_z-index.scss

@@ -0,0 +1,3 @@
+@mixin z-index($level, $diff: 0) {
+  z-index: ($level * 100) + $diff;
+}