💄

Author: nanarino

docs/pages/menu/form/checkbox.mdx

@@ -13,13 +13,13 @@ export {components}
 
 # checkbox
 
-<Checkbox id="world" checked style="--indent-checkbox: 2em">world</Checkbox>
+<Checkbox id="world" checked style="--indent-checkbox: 2em; line-height: 2">world</Checkbox>
 
 全局变量 `--indent-checkbox` 改变label文字左内边距    
 这原本是用 `text-indent` 属性实现。但在Safari中使用 `::before` 的元素不支持 `text-indent`，遂改用 `padding-left` 来实现。默认值是1.4em
 
 ```pug
-span.☘-checkbox(style="--indent-checkbox: 2em")
+span.☘-checkbox(style="--indent-checkbox: 2em; line-height: 2")
     input#hello.☘-input(type="checkbox" title="world")
     label.☘-checkbox-label(for="hello") world
 ```

docs/pages/menu/form/index.mdx

@@ -46,17 +46,17 @@ outline 2px solid transparent // 覆盖暗黑模式情况下白色优先
 
 - `button`
     - <T tag="button" class="☘-button sm">按钮</T>
-      支援：<kbd class="na-kbd">Tab</kbd> <kbd class="na-kbd">Enter</kbd>
+      支援：<kbd class="na-kbd">Tab</kbd> <kbd class="na-kbd">Enter</kbd> <kbd class="na-kbd">Shift</kbd>
 - `a`
     - <T tag="a" class="☘-link" href="#focus-visible">链接</T>
-      支援：<kbd class="na-kbd">Tab</kbd> <kbd class="na-kbd">Enter</kbd>
+      支援：<kbd class="na-kbd">Tab</kbd> <kbd class="na-kbd">Enter</kbd> <kbd class="na-kbd">Shift</kbd>
 - `input`
     - <T tag="input" class="☘-input sm" title="input" placeholder='请输入' />
       支援：<kbd class="na-kbd">Tab</kbd>
     - <Switch id="switch" class="sm" checked />
-      支援：<kbd class="na-kbd">Tab</kbd> <kbd class="na-kbd">Space</kbd>
+      支援：<kbd class="na-kbd">Tab</kbd> <kbd class="na-kbd">Space</kbd> <kbd class="na-kbd">Shift</kbd>
     - <Radio name="lang" id="A" checked>A</Radio> <Radio name="lang" id="B">B</Radio>
-      支援：<kbd class="na-kbd">Tab</kbd> <kbd class="na-kbd">&larr;</kbd><kbd class="na-kbd">&rarr;</kbd> <kbd class="na-kbd">&uarr;</kbd><kbd class="na-kbd">&darr;</kbd>
+      支援：<kbd class="na-kbd">Tab</kbd> <kbd class="na-kbd">&larr;</kbd><kbd class="na-kbd">&rarr;</kbd> <kbd class="na-kbd">&uarr;</kbd><kbd class="na-kbd">&darr;</kbd> <kbd class="na-kbd">Shift</kbd>
 - `textarea`
     - <T tag="textarea" class="☘-textarea ☘-font-mono" title="textarea" placeholder='请输入' />
       支援：<kbd class="na-kbd">Tab</kbd>
@@ -66,7 +66,7 @@ outline 2px solid transparent // 覆盖暗黑模式情况下白色优先
         <option value="2">2</option>
         <option value="3">3</option>
       </T> 
-      支援：<kbd class="na-kbd">Tab</kbd> <kbd class="na-kbd">Space</kbd> <kbd class="na-kbd">Enter</kbd> <kbd class="na-kbd">&larr;</kbd><kbd class="na-kbd">&rarr;</kbd> <kbd class="na-kbd">&uarr;</kbd><kbd class="na-kbd">&darr;</kbd>
+      支援：<kbd class="na-kbd">Tab</kbd> <kbd class="na-kbd">Space</kbd> <kbd class="na-kbd">Enter</kbd> <kbd class="na-kbd">&larr;</kbd><kbd class="na-kbd">&rarr;</kbd> <kbd class="na-kbd">&uarr;</kbd><kbd class="na-kbd">&darr;</kbd> <kbd class="na-kbd">Shift</kbd>
 
 
 ## `form-item`
@@ -114,4 +114,4 @@ form#formitems-kanban(onsubmit=function(){console.log(this.elements);return fals
     input.☘-button(type="submit" value="查找" data-primary)
 ```
 
-这里使用 `:invalid` 來自定义校验样式，你也可以使用如 `vue` 等响应式库来控制
+`[data-validate]` 使用 `:invalid` 來自定义校验样式，你也可以使用如 `vue` 等响应式库来控制

lib/components/button.styl

@@ -49,7 +49,8 @@ button_background_color_init(background_color)
     align-items center
     padding var(--padding-vertical-button, 5px) var(--padding-horizonal-button, 12px)
     font-size var(--font-size-body)
-    // line-height var(--line-height-body)
+    height fit-content
+    line-height var(--line-height-body)
     min-height var(--line-height-body)
     outline 2px solid transparent
     box-sizing content-box

lib/components/menu.styl

@@ -85,6 +85,7 @@
     &-item
         position relative
         height calc(var(--line-height-body) + 2 * var(--padding-vertical-menu-item, .5em))
+        line-height var(--line-height-body)
         text-indent var(--padding-horizonal-menu-item, 1em)
         display flex
         align-items center

package.json

@@ -1,7 +1,7 @@
 {
     "name": "nanarinostyl",
     "description": "style lib",
-    "version": "0.10.2",
+    "version": "0.10.3",
     "main": "./dist/style.min.css",
     "scripts": {
         "dev": "astro dev --host",