move sample files

2024-03-05 15:03:53 +08:00
parent baec3a3959
commit 6fb7c3c769
9 changed files with 396 additions and 78 deletions
--- a/sample/style.scss
+++ b/sample/style.scss
@ -0,0 +1,234 @@
+@import './lib/ui/css/variables/definition.scss';
+@import './lib/ui/css/common.scss';
+@import './lib/ui/css/checkbox.scss';
+@import './lib/ui/css/dropdown.scss';
+@import './lib/ui/css/grid.scss';
+@import './lib/ui/css/popup.scss';
+@import './lib/ui/css/tooltip.scss';
+
+:root {
+  font-family: var(--serif-font-family);
+  font-size: 1.125rem;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: var(--color);
+  background-color: var(--bg-color);
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+
+  --split-border-color: #ccc;
+  --hover-color: #666;
+  --serif-font-family: 'Segoe UI Variable Display', Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  --mono-font-family: 'FantasqueSansMono NFM', 'Cascadia Code', 'PT Mono', Consolas, 'Courier New', monospace;
+}
+
+input {
+  font-family: var(--serif-font-family);
+}
+
+code,
+kbd,
+pre,
+samp {
+  font-family: var(--mono-font-family);
+  background-color: var(--hover-color);
+  padding: 0 10px;
+}
+
+code {
+  display: inline-block;
+}
+
+pre,
+samp {
+  font-size: .875em;
+}
+
+h2+code {
+  margin-left: 70px;
+  position: relative;
+
+  &::before {
+    content: '签名：';
+    position: absolute;
+    margin-left: -70px;
+  }
+}
+
+h3,
+h4 {
+  font-family: var(--mono-font-family);
+  font-size: 1em;
+  margin-left: 10px;
+  /* font-weight: bold; */
+}
+
+h3~p {
+  margin-left: 10px;
+}
+
+h4 {
+  font-size: .9em;
+  margin-block-end: .4em;
+
+  +code {
+    font-size: .9rem;
+  }
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+
+  &:hover {
+    color: #535bf2;
+  }
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  // font-size: 1em;
+  // font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+
+  &:hover {
+    border-color: #646cff;
+  }
+
+  &:focus,
+  &:focus-visible {
+    outline: 4px auto -webkit-focus-ring-color;
+  }
+}
+
+body {
+  margin: 0;
+  display: flex;
+  height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+  margin: 20px 0;
+}
+
+#directory {
+  width: 200px;
+  padding: 2rem;
+  border-right: 1px solid var(--split-border-color);
+  flex: 0 0 auto;
+
+  >ul {
+    padding: 0;
+    line-height: 1.6em;
+
+    >li {
+      list-style: none;
+      user-select: none;
+
+      &.title {
+        margin: 20px 0 6px;
+        font-weight: bold;
+        font-size: 1.25em;
+      }
+    }
+  }
+
+  ol {
+    padding-left: 10px;
+
+    >li {
+      padding: 0 6px;
+      list-style-position: inside;
+      cursor: pointer;
+
+      &:hover {
+        background-color: var(--hover-color);
+      }
+    }
+  }
+}
+
+#container {
+  // flex: 1 1 auto;
+  width: 600px;
+  overflow: auto;
+  padding: 20px;
+
+  >div {
+    margin-right: 20px;
+  }
+}
+
+.app-module {
+  margin: 8px 0;
+}
+
+#create-icon {
+  display: flex;
+  justify-content: center;
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+}
+
+#create-checkbox {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.ui-check-wrapper {
+  .ui-check-inner {
+    width: 14px;
+    height: 14px;
+  }
+
+  >span {
+    font-size: 1em;
+  }
+}
+
+.icon-col {
+  cursor: pointer;
+  color: rgb(123, 28, 33);
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: pre;
+  text-align: center;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --split-border-color: #666;
+    --hover-color: #eee;
+  }
+
+  a:hover {
+    color: #747bff;
+  }
+
+  button {
+    background-color: #f9f9f9;
+  }
+}