fix(ui/app-bar): fix app-bar style

affects: @varlet/cli, @varlet/ui
varletjs · Oct 14, 2021 · 9da67b6 · 9da67b6
1 parent 11621df
commit 9da67b6
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 10 deletions.
diff --git a/packages/varlet-cli/site/components/app-bar/appBar.less b/packages/varlet-cli/site/components/app-bar/appBar.less
@@ -1,7 +1,6 @@
 @site-app-bar-color: var(--site-color-primary);
 @site-app-bar-height: 54px;
 @site-app-bar-text-color: #fff;
-@site-app-bar-title-line-height: 54px;
 @site-app-bar-title-padding: 0 12px;
 @site-app-bar-left-gap: 6px;
 @site-app-bar-right-gap: 6px;
@@ -11,7 +10,6 @@
   --site-app-bar-title-padding: @site-app-bar-title-padding;
   --site-app-bar-text-color: #fff;
   --site-app-bar-height: @site-app-bar-height;
-  --site-app-bar-title-line-height: @site-app-bar-title-line-height;
   --site-app-bar-left-gap: @site-app-bar-left-gap;
   --site-app-bar-right-gap: @site-app-bar-right-gap;
 }
@@ -32,7 +30,6 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
-    line-height: var(--site-app-bar-title-line-height);
     padding: var(--site-app-bar-title-padding);
   }
 

diff --git a/packages/varlet-cli/site/mobile/App.vue b/packages/varlet-cli/site/mobile/App.vue
@@ -7,8 +7,14 @@
         title-position="center"
       >
         <template #left v-if="showBackIcon">
-          <var-site-button round @click="back" color="transparent" text-color="#fff" text>
-            <var-site-icon name="chevron-left" :size="28" />
+          <var-site-button
+            text
+            round
+            @click="back"
+            color="transparent"
+            text-color="#fff"
+          >
+            <var-site-icon name="chevron-left" :size="28" style="margin-top: 1px;" />
           </var-site-button>
         </template>
         <template #right>

diff --git a/packages/varlet-ui/src/app-bar/appBar.less b/packages/varlet-ui/src/app-bar/appBar.less
@@ -1,7 +1,6 @@
 @app-bar-color: var(--color-primary);
 @app-bar-height: 54px;
 @app-bar-text-color: #fff;
-@app-bar-title-line-height: 54px;
 @app-bar-title-padding: 0 12px;
 @app-bar-left-gap: 6px;
 @app-bar-right-gap: 6px;
@@ -11,7 +10,6 @@
   --app-bar-title-padding: @app-bar-title-padding;
   --app-bar-text-color: #fff;
   --app-bar-height: @app-bar-height;
-  --app-bar-title-line-height: @app-bar-title-line-height;
   --app-bar-left-gap: @app-bar-left-gap;
   --app-bar-right-gap: @app-bar-right-gap;
 }
@@ -32,7 +30,6 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
-    line-height: var(--app-bar-title-line-height);
     padding: var(--app-bar-title-padding);
   }
 

diff --git a/packages/varlet-ui/src/app-bar/docs/en-US.md b/packages/varlet-ui/src/app-bar/docs/en-US.md
@@ -226,6 +226,5 @@ Here are the CSS variables used by the component, Styles can be customized using
 | `--app-bar-text-color` | `#fff` |
 | `--app-bar-height` | `54px` |
 | `--app-bar-title-padding` | `0 12px` |
-| `--app-bar-title-line-height` | `54px` |
 | `--app-bar-left-gap` | `6px` |
 | `--app-bar-right-gap` | `6px` |
diff --git a/packages/varlet-ui/src/app-bar/docs/zh-CN.md b/packages/varlet-ui/src/app-bar/docs/zh-CN.md
@@ -225,7 +225,6 @@ export default {
 | `--app-bar-text-color` | `#fff` |
 | `--app-bar-height` | `54px` |
 | `--app-bar-title-padding` | `0 12px` |
-| `--app-bar-title-line-height` | `54px` |
 | `--app-bar-left-gap` | `6px` |
 | `--app-bar-right-gap` | `6px` |