@jari-ace/element-plus-component 0.1.0 → 0.1.1

package/theme-style/styles/theme-var.scss

@@ -1,72 +1,72 @@
-@use 'sass:map';
-
-/* 本文件参照element-plus 的变量文件(element-plus/theme-chalk/src/common/var.scss)编写 ，必要时可以替换或定制element-plus主题 */
-@import '../../node_modules/element-plus/theme-chalk/src/common/var.scss';
-
-
-/**
-可在 vite.config.ts 中加入
- css: {
-    preprocessorOptions: {
-        scss: {
-            additionalData: `@import "@jari-ace/element-plus-component/theme-style/style/theme-var.scss";`
-        }
-    }
-}
-加入以上配置后在全局都可以使用本文件里定义的变量
-**/
-// $ace-colors:(color1:#253858,color2:#505F79,color3:#7A869A,color4:#A5ADBA,color5:#DFE1E6,color6:#F4F5F7);
-
-// :root{
-//     @each $name,$color in $ace-colors {
-//         --ace-install-system-#{$name}:#{$color};
-//     }
-// }
-
-
-/***************************************************************************************
-    定义一个自己的变量空间
-    可以将其添加到自定义命名空间，默认值为'el'
-**/
-// @forward "element-plus/theme-chalk/src/mixins/config.scss" with (
-//   $namespace: "ep"
-// );
-/**************************************** END ***********************************************/
-
-
-/***************************************************************************************
-    覆盖 element-plus 部分变量
-    你应该在scss中使用它们，因为我们用sass来计算。
-**/
-// 注释下一行以使用默认颜色
-// @forward "element-plus/theme-chalk/src/common/var.scss" with (
-//   // 变量命名必须相同，它将覆盖element-plus的样式变量。
-//   $colors: $--colors,
-//   $button-padding-horizontal: ("default": 50px)
-// );
-/**************************************** END ***********************************************/
-
-
-/***************************************************************************************
-    如果要导入所有element-plus变量
-**/
-// @use "element-plus/theme-chalk/src/index.scss" as *;
-
-// 您可以对其进行注释以隐藏调试信息.
-// @debug $--colors;
-/**************************************** END ***********************************************/
-
-
-/***************************************************************************************
-    自定义暗色主题变量
-**/
-// custom dark variables
-// $--colors: (
-//   "primary": (
-//     "base": #589ef8,
-//   ),
-// );
-// @forward "element-plus/theme-chalk/src/dark/var.scss" with (
-//   $colors: $--colors
-// );
-/**************************************** END ***********************************************/
+@use 'sass:map';
+
+/* 本文件参照element-plus 的变量文件(element-plus/theme-chalk/src/common/var.scss)编写 ，必要时可以替换或定制element-plus主题 */
+@import '../../node_modules/element-plus/theme-chalk/src/common/var.scss';
+
+
+/**
+可在 vite.config.ts 中加入
+ css: {
+    preprocessorOptions: {
+        scss: {
+            additionalData: `@import "@jari-ace/element-plus-component/theme-style/style/theme-var.scss";`
+        }
+    }
+}
+加入以上配置后在全局都可以使用本文件里定义的变量
+**/
+// $ace-colors:(color1:#253858,color2:#505F79,color3:#7A869A,color4:#A5ADBA,color5:#DFE1E6,color6:#F4F5F7);
+
+// :root{
+//     @each $name,$color in $ace-colors {
+//         --ace-install-system-#{$name}:#{$color};
+//     }
+// }
+
+
+/***************************************************************************************
+    定义一个自己的变量空间
+    可以将其添加到自定义命名空间，默认值为'el'
+**/
+// @forward "element-plus/theme-chalk/src/mixins/config.scss" with (
+//   $namespace: "ep"
+// );
+/**************************************** END ***********************************************/
+
+
+/***************************************************************************************
+    覆盖 element-plus 部分变量
+    你应该在scss中使用它们，因为我们用sass来计算。
+**/
+// 注释下一行以使用默认颜色
+// @forward "element-plus/theme-chalk/src/common/var.scss" with (
+//   // 变量命名必须相同，它将覆盖element-plus的样式变量。
+//   $colors: $--colors,
+//   $button-padding-horizontal: ("default": 50px)
+// );
+/**************************************** END ***********************************************/
+
+
+/***************************************************************************************
+    如果要导入所有element-plus变量
+**/
+// @use "element-plus/theme-chalk/src/index.scss" as *;
+
+// 您可以对其进行注释以隐藏调试信息.
+// @debug $--colors;
+/**************************************** END ***********************************************/
+
+
+/***************************************************************************************
+    自定义暗色主题变量
+**/
+// custom dark variables
+// $--colors: (
+//   "primary": (
+//     "base": #589ef8,
+//   ),
+// );
+// @forward "element-plus/theme-chalk/src/dark/var.scss" with (
+//   $colors: $--colors
+// );
+/**************************************** END ***********************************************/

package/theme-style/styles/transition.scss

@@ -1,122 +1,122 @@
-@use '../mixins/config' as *;
-@use '../mixins/mixins' as *;
-
-.fade-in-linear-enter-active,
-.fade-in-linear-leave-active {
-  transition: getCssVar('transition-fade', 'linear');
-}
-
-.fade-in-linear-enter-from,
-.fade-in-linear-leave-to {
-  opacity: 0;
-}
-
-.#{$namespace}-fade-in-linear-enter-active,
-.#{$namespace}-fade-in-linear-leave-active {
-  transition: getCssVar('transition-fade', 'linear');
-}
-.#{$namespace}-fade-in-linear-enter-from,
-.#{$namespace}-fade-in-linear-leave-to {
-  opacity: 0;
-}
-
-.#{$namespace}-fade-in-enter-active,
-.#{$namespace}-fade-in-leave-active {
-  transition: all getCssVar('transition-duration') cubic-bezier(0.55, 0, 0.1, 1);
-}
-.#{$namespace}-fade-in-enter-from,
-.#{$namespace}-fade-in-leave-active {
-  opacity: 0;
-}
-
-.#{$namespace}-zoom-in-center-enter-active,
-.#{$namespace}-zoom-in-center-leave-active {
-  transition: all getCssVar('transition-duration') cubic-bezier(0.55, 0, 0.1, 1);
-}
-.#{$namespace}-zoom-in-center-enter-from,
-.#{$namespace}-zoom-in-center-leave-active {
-  opacity: 0;
-  transform: scaleX(0);
-}
-
-.#{$namespace}-zoom-in-top-enter-active,
-.#{$namespace}-zoom-in-top-leave-active {
-  opacity: 1;
-  transform: scaleY(1);
-  transition: getCssVar('transition-md-fade');
-  transform-origin: center top;
-
-  &[data-popper-placement^='top'] {
-    transform-origin: center bottom;
-  }
-}
-.#{$namespace}-zoom-in-top-enter-from,
-.#{$namespace}-zoom-in-top-leave-active {
-  opacity: 0;
-  transform: scaleY(0);
-}
-
-.#{$namespace}-zoom-in-bottom-enter-active,
-.#{$namespace}-zoom-in-bottom-leave-active {
-  opacity: 1;
-  transform: scaleY(1);
-  transition: getCssVar('transition-md-fade');
-  transform-origin: center bottom;
-}
-.#{$namespace}-zoom-in-bottom-enter-from,
-.#{$namespace}-zoom-in-bottom-leave-active {
-  opacity: 0;
-  transform: scaleY(0);
-}
-
-.#{$namespace}-zoom-in-left-enter-active,
-.#{$namespace}-zoom-in-left-leave-active {
-  opacity: 1;
-  transform: scale(1, 1);
-  transition: getCssVar('transition-md-fade');
-  transform-origin: top left;
-}
-.#{$namespace}-zoom-in-left-enter-from,
-.#{$namespace}-zoom-in-left-leave-active {
-  opacity: 0;
-  transform: scale(0.45, 0.45);
-}
-
-.collapse-transition {
-  transition: getCssVar('transition-duration') height ease-in-out,
-    getCssVar('transition-duration') padding-top ease-in-out,
-    getCssVar('transition-duration') padding-bottom ease-in-out;
-}
-
-.#{$namespace}-collapse-transition-leave-active,
-.#{$namespace}-collapse-transition-enter-active {
-  transition: getCssVar('transition-duration') max-height ease-in-out,
-    getCssVar('transition-duration') padding-top ease-in-out,
-    getCssVar('transition-duration') padding-bottom ease-in-out;
-}
-
-.horizontal-collapse-transition {
-  transition: getCssVar('transition-duration') width ease-in-out,
-    getCssVar('transition-duration') padding-left ease-in-out,
-    getCssVar('transition-duration') padding-right ease-in-out;
-}
-
-.#{$namespace}-list-enter-active,
-.#{$namespace}-list-leave-active {
-  transition: all 1s;
-}
-
-.#{$namespace}-list-enter-from,
-.#{$namespace}-list-leave-to {
-  opacity: 0;
-  transform: translateY(-30px);
-}
-
-.#{$namespace}-list-leave-active {
-  position: absolute !important;
-}
-
-.#{$namespace}-opacity-transition {
-  transition: opacity getCssVar('transition-duration')
-    cubic-bezier(0.55, 0, 0.1, 1);
-}
+@use '../mixins/config' as *;
+@use '../mixins/mixins' as *;
+
+.fade-in-linear-enter-active,
+.fade-in-linear-leave-active {
+  transition: getCssVar('transition-fade', 'linear');
+}
+
+.fade-in-linear-enter-from,
+.fade-in-linear-leave-to {
+  opacity: 0;
+}
+
+.#{$namespace}-fade-in-linear-enter-active,
+.#{$namespace}-fade-in-linear-leave-active {
+  transition: getCssVar('transition-fade', 'linear');
+}
+.#{$namespace}-fade-in-linear-enter-from,
+.#{$namespace}-fade-in-linear-leave-to {
+  opacity: 0;
+}
+
+.#{$namespace}-fade-in-enter-active,
+.#{$namespace}-fade-in-leave-active {
+  transition: all getCssVar('transition-duration') cubic-bezier(0.55, 0, 0.1, 1);
+}
+.#{$namespace}-fade-in-enter-from,
+.#{$namespace}-fade-in-leave-active {
+  opacity: 0;
+}
+
+.#{$namespace}-zoom-in-center-enter-active,
+.#{$namespace}-zoom-in-center-leave-active {
+  transition: all getCssVar('transition-duration') cubic-bezier(0.55, 0, 0.1, 1);
+}
+.#{$namespace}-zoom-in-center-enter-from,
+.#{$namespace}-zoom-in-center-leave-active {
+  opacity: 0;
+  transform: scaleX(0);
+}
+
+.#{$namespace}-zoom-in-top-enter-active,
+.#{$namespace}-zoom-in-top-leave-active {
+  opacity: 1;
+  transform: scaleY(1);
+  transition: getCssVar('transition-md-fade');
+  transform-origin: center top;
+
+  &[data-popper-placement^='top'] {
+    transform-origin: center bottom;
+  }
+}
+.#{$namespace}-zoom-in-top-enter-from,
+.#{$namespace}-zoom-in-top-leave-active {
+  opacity: 0;
+  transform: scaleY(0);
+}
+
+.#{$namespace}-zoom-in-bottom-enter-active,
+.#{$namespace}-zoom-in-bottom-leave-active {
+  opacity: 1;
+  transform: scaleY(1);
+  transition: getCssVar('transition-md-fade');
+  transform-origin: center bottom;
+}
+.#{$namespace}-zoom-in-bottom-enter-from,
+.#{$namespace}-zoom-in-bottom-leave-active {
+  opacity: 0;
+  transform: scaleY(0);
+}
+
+.#{$namespace}-zoom-in-left-enter-active,
+.#{$namespace}-zoom-in-left-leave-active {
+  opacity: 1;
+  transform: scale(1, 1);
+  transition: getCssVar('transition-md-fade');
+  transform-origin: top left;
+}
+.#{$namespace}-zoom-in-left-enter-from,
+.#{$namespace}-zoom-in-left-leave-active {
+  opacity: 0;
+  transform: scale(0.45, 0.45);
+}
+
+.collapse-transition {
+  transition: getCssVar('transition-duration') height ease-in-out,
+    getCssVar('transition-duration') padding-top ease-in-out,
+    getCssVar('transition-duration') padding-bottom ease-in-out;
+}
+
+.#{$namespace}-collapse-transition-leave-active,
+.#{$namespace}-collapse-transition-enter-active {
+  transition: getCssVar('transition-duration') max-height ease-in-out,
+    getCssVar('transition-duration') padding-top ease-in-out,
+    getCssVar('transition-duration') padding-bottom ease-in-out;
+}
+
+.horizontal-collapse-transition {
+  transition: getCssVar('transition-duration') width ease-in-out,
+    getCssVar('transition-duration') padding-left ease-in-out,
+    getCssVar('transition-duration') padding-right ease-in-out;
+}
+
+.#{$namespace}-list-enter-active,
+.#{$namespace}-list-leave-active {
+  transition: all 1s;
+}
+
+.#{$namespace}-list-enter-from,
+.#{$namespace}-list-leave-to {
+  opacity: 0;
+  transform: translateY(-30px);
+}
+
+.#{$namespace}-list-leave-active {
+  position: absolute !important;
+}
+
+.#{$namespace}-opacity-transition {
+  transition: opacity getCssVar('transition-duration')
+    cubic-bezier(0.55, 0, 0.1, 1);
+}