@hsu-react/ui 2.2.5 → 2.2.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/es/layout/NavTabBar/index.module.scss +10 -5
  2. package/lib/layout/NavTabBar/index.module.scss +10 -5
  3. package/package.json +1 -1
  4. package/src/layout/NavTabBar/index.module.scss +10 -5
package/es/layout/NavTabBar/index.module.scss CHANGED
@@ -1,8 +1,12 @@
1
1
  // 注意：这是 CSS Module，文件里的每个类名都会被哈希。antd 的类名必须写在 :global() 里，
2
2
  // 否则 `.ant-tabs-nav` 会被编译成一串哈希，永远匹配不到 antd 渲染出的 DOM —— 规则不会报错，
3
3
  // 只是静悄悄地全部失效。本库其余组件的样式都遵循这个写法。
4
+
5
+ // 栏的左右内边距。刷新按钮与首个页签之间也按它留，两处共用一个值，改了不会走形。
6
+ $gutter: 8px;
7
+
4
8
  .NavTabBar {
5
- padding: 6px 8px 0px;
9
+ padding: 6px $gutter 0px;
6
10
 
7
11
  // Modern look: keep the white strip; the active tab is a light teal pill
8
12
  background: var(--vita-surface);
@@ -113,10 +117,11 @@
113
117
  align-items: center;
114
118
  align-self: stretch;
115
119
 
116
- // 竖线两侧各留 5px（按钮右缘到首个页签共 11px）。两边取同一个值，竖线才落在正中；
117
- // 一边宽一边窄会看起来像是竖线属于其中一侧
118
- margin-right: 5px;
119
- padding-right: 5px;
120
+ // 按钮右缘到首个页签正好留 $gutter，与栏的左内边距一样宽：按钮左边留多少，右边就留
121
+ // 多少，刷新按钮才像是和页签同属一排、而不是被推开的另一件东西。
122
+ // 竖线自己占 1px，剩下的两侧对半分，它才落在正中
123
+ margin-right: calc((#{$gutter} - 1px) / 2);
124
+ padding-right: calc((#{$gutter} - 1px) / 2);
120
125
 
121
126
  border-right: 1px solid var(--vita-border-weak);
122
127
  }
package/lib/layout/NavTabBar/index.module.scss CHANGED
@@ -1,8 +1,12 @@
1
1
  // 注意：这是 CSS Module，文件里的每个类名都会被哈希。antd 的类名必须写在 :global() 里，
2
2
  // 否则 `.ant-tabs-nav` 会被编译成一串哈希，永远匹配不到 antd 渲染出的 DOM —— 规则不会报错，
3
3
  // 只是静悄悄地全部失效。本库其余组件的样式都遵循这个写法。
4
+
5
+ // 栏的左右内边距。刷新按钮与首个页签之间也按它留，两处共用一个值，改了不会走形。
6
+ $gutter: 8px;
7
+
4
8
  .NavTabBar {
5
- padding: 6px 8px 0px;
9
+ padding: 6px $gutter 0px;
6
10
 
7
11
  // Modern look: keep the white strip; the active tab is a light teal pill
8
12
  background: var(--vita-surface);
@@ -113,10 +117,11 @@
113
117
  align-items: center;
114
118
  align-self: stretch;
115
119
 
116
- // 竖线两侧各留 5px（按钮右缘到首个页签共 11px）。两边取同一个值，竖线才落在正中；
117
- // 一边宽一边窄会看起来像是竖线属于其中一侧
118
- margin-right: 5px;
119
- padding-right: 5px;
120
+ // 按钮右缘到首个页签正好留 $gutter，与栏的左内边距一样宽：按钮左边留多少，右边就留
121
+ // 多少，刷新按钮才像是和页签同属一排、而不是被推开的另一件东西。
122
+ // 竖线自己占 1px，剩下的两侧对半分，它才落在正中
123
+ margin-right: calc((#{$gutter} - 1px) / 2);
124
+ padding-right: calc((#{$gutter} - 1px) / 2);
120
125
 
121
126
  border-right: 1px solid var(--vita-border-weak);
122
127
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hsu-react/ui",
3
- "version": "2.2.5",
3
+ "version": "2.2.6",
4
4
  "description": "一套基于 React + Ant Design 的中后台业务组件库",
5
5
  "license": "MIT",
6
6
  "type": "module",
package/src/layout/NavTabBar/index.module.scss CHANGED
@@ -1,8 +1,12 @@
1
1
  // 注意：这是 CSS Module，文件里的每个类名都会被哈希。antd 的类名必须写在 :global() 里，
2
2
  // 否则 `.ant-tabs-nav` 会被编译成一串哈希，永远匹配不到 antd 渲染出的 DOM —— 规则不会报错，
3
3
  // 只是静悄悄地全部失效。本库其余组件的样式都遵循这个写法。
4
+
5
+ // 栏的左右内边距。刷新按钮与首个页签之间也按它留，两处共用一个值，改了不会走形。
6
+ $gutter: 8px;
7
+
4
8
  .NavTabBar {
5
- padding: 6px 8px 0px;
9
+ padding: 6px $gutter 0px;
6
10
 
7
11
  // Modern look: keep the white strip; the active tab is a light teal pill
8
12
  background: var(--vita-surface);
@@ -113,10 +117,11 @@
113
117
  align-items: center;
114
118
  align-self: stretch;
115
119
 
116
- // 竖线两侧各留 5px（按钮右缘到首个页签共 11px）。两边取同一个值，竖线才落在正中；
117
- // 一边宽一边窄会看起来像是竖线属于其中一侧
118
- margin-right: 5px;
119
- padding-right: 5px;
120
+ // 按钮右缘到首个页签正好留 $gutter，与栏的左内边距一样宽：按钮左边留多少，右边就留
121
+ // 多少，刷新按钮才像是和页签同属一排、而不是被推开的另一件东西。
122
+ // 竖线自己占 1px，剩下的两侧对半分，它才落在正中
123
+ margin-right: calc((#{$gutter} - 1px) / 2);
124
+ padding-right: calc((#{$gutter} - 1px) / 2);
120
125
 
121
126
  border-right: 1px solid var(--vita-border-weak);
122
127
  }