默认主题色

以下是默认类型按钮的SCSS样式定义,这些样式构成了按钮的基本外观和行为。

1.b-button {
2    display: inline-flex; // 盒模型,弹性布局
3    align-items: center; // 子元素垂直居中
4    justify-content: center; // 子元素水平居中
5    height: 32px; // 高度
6    min-width: 80px; // 最小宽度
7    padding: 0 16px; // 上下内边距为0
8    background-color: #fff; // 默认为白色背景
9    border-radius: 5px; // 圆角
10    border: 1px solid #e3e5f1; // 2像素,实线边框
11    box-sizing: border-box; // 忽略 padding 和 border 的计算
12    line-height: 1; // 根据该元素本身的字体大小设置行高
13    color: #4e5158; // 字体颜色
14    text-align: center; // 文字居中
15    font-size: 14px; // 字体大小为14
16    white-space: nowrap; // 强制不换行
17    transition: .3s; // 过渡时间为0.3秒
18    outline: none; // 去除外轮廓
19    cursor: pointer; // 鼠标样式为手型
20    user-select: none; // 禁止选中文本内容
21    vertical-align: middle; // 当前元素的垂直中心点和父元素的基线上
22    span {
23        line-height: 1; // 根据该元素本身的字体大小设置行高
24        display: inline-flex; // 盒模型,弹性布局
25        align-items: center; // 子元素垂直居中
26    }
27}

1@use "./button.scss"

:::

默认主题色#

默认主题色