From d60ccbe4584873810c55d1183aabd65faef939af Mon Sep 17 00:00:00 2001
From: slavamuravey <slavamuravey@mail.ru>
Date: Fri, 2 Aug 2024 18:14:39 +0700
Subject: [PATCH] Fix example style

---
 example/_example.scss   | 64 +++++++++++++++++++++++++++++++++++++++
 example/style-dark.scss |  3 +-
 example/style.scss      | 66 ++---------------------------------------
 3 files changed, 68 insertions(+), 65 deletions(-)
 create mode 100644 example/_example.scss

diff --git a/example/_example.scss b/example/_example.scss
new file mode 100644
index 00000000..863843b5
--- /dev/null
+++ b/example/_example.scss
@@ -0,0 +1,64 @@
+@mixin style-common($background-color, $text-color, $component-background, $disabled-color) {
+  body {
+    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    height: 100%;
+    margin: 0;
+    background: $background-color;
+    color: $text-color;
+  }
+
+  .dock-tabpane > div {
+    padding: 20px;
+  }
+
+  .top-panel {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    padding: 0 20px;
+  }
+
+  .btn {
+    display: inline-block;
+    margin: 5px;
+    font-weight: 400;
+    text-align: center;
+    vertical-align: middle;
+    user-select: none;
+    -webkit-user-select: none;
+    color: #212529;
+    background-color: $component-background;
+    border: 1px solid #e9ecef;
+    padding: 3px 10px;
+    font-size: 1rem;
+    line-height: 1.5;
+    border-radius: 0.25rem;
+    cursor: pointer;
+  }
+
+
+  .btn:hover {
+    color: #000;
+    background-color: #f8f8f8;
+    border-color: #cbd3da;
+    text-decoration: none;
+  }
+
+  .btn:focus {
+    outline: 0;
+  }
+
+  .btn.disabled {
+    color: $disabled-color;
+    background-color: #f8f8f8;
+    border-color: #e9ecef;
+    opacity: 0.65;
+  }
+
+  iframe {
+    box-sizing: border-box;
+    border: none;
+    width: 100%;
+    height: 100%;
+  }
+}
diff --git a/example/style-dark.scss b/example/style-dark.scss
index ae88faae..1ff11389 100644
--- a/example/style-dark.scss
+++ b/example/style-dark.scss
@@ -1,2 +1,3 @@
-@import "./style";
+@use "./example";
 @import "../style/index-dark";
+@include example.style-common($background-color, $text-color, $component-background, $disabled-color);
diff --git a/example/style.scss b/example/style.scss
index f3a1c6d6..38625e04 100644
--- a/example/style.scss
+++ b/example/style.scss
@@ -1,65 +1,3 @@
+@use "./example";
 @import "../style/index-light";
-
-body {
-  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  height: 100%;
-  margin: 0;
-  background: $background-color;
-  color: $text-color;
-}
-
-.dock-tabpane > div {
-  padding: 20px;
-}
-
-.top-panel {
-  position: absolute;
-  display: flex;
-  align-items: center;
-  padding: 0 20px;
-}
-
-.btn {
-  display: inline-block;
-  margin: 5px;
-  font-weight: 400;
-  text-align: center;
-  vertical-align: middle;
-  user-select: none;
-  -webkit-user-select: none;
-  color: #212529;
-  background-color: $component-background;
-  border: 1px solid #e9ecef;
-  padding: 3px 10px;
-  font-size: 1rem;
-  line-height: 1.5;
-  border-radius: 0.25rem;
-  cursor: pointer;
-}
-
-
-.btn:hover {
-  color: #000;
-  background-color: #f8f8f8;
-  border-color: #cbd3da;
-  text-decoration: none;
-}
-
-.btn:focus {
-  outline: 0;
-}
-
-.btn.disabled {
-  color: $disabled-color;
-  background-color: #f8f8f8;
-  border-color: #e9ecef;
-  opacity: 0.65;
-}
-
-iframe {
-  box-sizing: border-box;
-  border: none;
-  width: 100%;
-  height: 100%;
-}
-
+@include example.style-common($background-color, $text-color, $component-background, $disabled-color);
\ No newline at end of file