fix(collapse): modify border style

varletjs · Nov 15, 2021 · 9e0f2f3 · 9e0f2f3
1 parent 17893df
commit 9e0f2f3
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 3 deletions.
diff --git a/packages/varlet-ui/src/collapse-item/collapseItem.less b/packages/varlet-ui/src/collapse-item/collapseItem.less
@@ -6,6 +6,7 @@
 @collapse-content-padding: 0 16px 10px;
 @collapse-item-margin-top: 16px;
 @collapse-disable-color: #bdbdbd;
+@collapse-border-top: thin solid rgba(0, 0, 0, 0.12);
 
 :root {
   --collapse-background: @collapse-background;
@@ -16,6 +17,7 @@
   --collapse-content-padding: @collapse-content-padding;
   --collapse-item-margin-top: @collapse-item-margin-top;
   --collapse-disable-color: @collapse-disable-color;
+  --collapse-border-top: @collapse-border-top;
 }
 
 .var-collapse-item {
@@ -39,7 +41,7 @@
   }
 
   &:not(:first-child)::after {
-    border-top: thin solid rgba(0, 0, 0, 0.12);
+    border-top: var(--collapse-border-top);
     content: '';
     left: 0;
     position: absolute;
@@ -90,6 +92,10 @@
   &__active + &,
   &__active:not(:first-child) {
     margin-top: var(--collapse-item-margin-top);
+
+    &::after {
+      border-top: none;
+    }
   }
 
   &__disable {

diff --git a/packages/varlet-ui/src/date-picker/__tests__/index.spec.js b/packages/varlet-ui/src/date-picker/__tests__/index.spec.js
@@ -7,7 +7,7 @@ import dayjs from 'dayjs/esm'
 
 const [currentYear ,currentMonth] = dayjs().format('YYYY-MM').split('-')
 
-test('test datePicker plugin', () => { 
+test('test datePicker plugin', () => {
   const app = createApp({}).use(DatePicker)
   expect(app.component(DatePicker.name)).toBeTruthy()
 })

diff --git a/packages/varlet-ui/src/themes/dark/collapse.ts b/packages/varlet-ui/src/themes/dark/collapse.ts
@@ -1,4 +1,5 @@
 export default {
   '--collapse-background': '#272727',
   '--collapse-text-color': '#fff',
+  '--collapse-border-top': 'thin solid rgba(255, 255, 255, 0.12)',
 }
diff --git a/packages/varlet-ui/src/themes/dark/index.ts b/packages/varlet-ui/src/themes/dark/index.ts
@@ -15,7 +15,7 @@ import pullRefresh from './pullRefresh'
 import switchThemes from './switch'
 import steps from './steps'
 import pagination from './pagination'
-import table from './talble'
+import table from './table'
 import { StyleVars } from '../../style-provider'
 
 export default {

diff --git a/packages/varlet-ui/src/themes/dark/talble.ts → packages/varlet-ui/src/themes/dark/table.ts b/packages/varlet-ui/src/themes/dark/talble.ts → packages/varlet-ui/src/themes/dark/table.ts