@oinone/kunlun-vue-ui-el 6.2.0

package/src/style/mixin.scss

@@ -0,0 +1,86 @@
+@import './global-parameters.scss';
+
+/**
+ * 外貌（背景色、边框、边框圆角、阴影、字体色、轮廓）
+ */
+@mixin oio-appearance($prefix: $parameterPrefix) {
+  background-color: var($prefix + -background);
+  border: var($prefix + -border-width) var($prefix + -border-style) var($prefix + -border-color);
+  border-radius: var($prefix + -border-radius);
+  box-shadow: var($prefix + -shadow);
+  color: var($prefix + -text-color);
+  outline: var($prefix + -outline);
+}
+
+/**
+ * 激活
+ */
+@mixin oio-active($prefix: $parameterPrefix) {
+  background-color: var($prefix + -background-active);
+  border: var($prefix + -border-width-active) var($prefix + -border-style-active) var($prefix + -border-color-active);
+  border-radius: var($prefix + -border-radius-active);
+  box-shadow: var($prefix + -shadow);
+  color: var($prefix + -text-color-active);
+  outline: var($prefix + -outline-active);
+}
+
+/**
+ * 悬停
+ */
+@mixin oio-hover($prefix: $parameterPrefix) {
+  background-color: var($prefix + -background-hover);
+  border: var($prefix + -border-width-hover) var($prefix + -border-style-hover) var($prefix + -border-color-hover);
+  border-radius: var($prefix + -border-radius-hover);
+  box-shadow: var($prefix + -shadow-hover);
+  color: var($prefix + -text-color-hover);
+  outline: var($prefix + -outline-hover);
+}
+
+/**
+ * 聚焦
+ */
+@mixin oio-focus($prefix: $parameterPrefix) {
+  background-color: var($prefix + -background-focus);
+  border: var($prefix + -border-width-focus) var($prefix + -border-style-focus) var($prefix + -border-color-focus);
+  border-radius: var($prefix + -border-radius-focus);
+  box-shadow: var($prefix + -shadow-focus);
+  color: var($prefix + -text-color-focus);
+  outline: var($prefix + -outline-focus);
+}
+
+/**
+ * 被访问
+ */
+@mixin oio-visited($prefix: $parameterPrefix) {
+  background-color: var($prefix + -background-visited);
+  border: var($prefix + -border-width-visited) var($prefix + -border-style-visited) var($prefix + -border-color-visited);
+  border-radius: var($prefix + -border-radius-visited);
+  box-shadow: var($prefix + -shadow);
+  color: var($prefix + -text-color-visited);
+  outline: var($prefix + -outline-visited);
+}
+
+/**
+ * 只读样式
+ * @param hasBorder 是否处理边框样式
+ * @param borderPrefix 边框样式前缀
+ */
+@mixin oio-readonly($hasBorder: false, $borderPrefix: $parameterPrefix) {
+  background-color: var($parameterPrefix + -disabled-bg);
+  @if $hasBorder {
+    border-color: var($borderPrefix + -border-color);
+  }
+}
+
+/**
+ * 禁用样式
+ * @param hasBorder 是否处理边框样式
+ * @param borderPrefix 边框样式前缀
+ */
+@mixin oio-disabled($hasBorder: false, $borderPrefix: $parameterPrefix) {
+  background-color: var($parameterPrefix + -disabled-bg);
+  color: var($parameterPrefix + -disabled-color);
+  @if $hasBorder {
+    border-color: var($borderPrefix + -border-color);
+  }
+}

package/src/theme/index.ts

@@ -0,0 +1 @@
+export const DEFAULT_PREFIX = 'oio';