在 2.0.3 中合并 badges.less 和 labels.less
出于某种原因,在 2.0.2 中,我们让徽章拥有独立的 LESS 文件。CSS 代码 95% 相同,但我们知道有些人可能需要其中一个或两个,甚至两者都需要。在 2.0.3 中,我们将简化其中一些样式,并将它们合并到一个 .less 文件中,并将 :hover
状态限定为仅锚点。
展望未来,我们将拥有以下作为一组共享的基本样式。如您所见,当组合在一起时,对于那些只想要徽章或标签的人来说,并没有增加多少额外重量。
.label,
.badge {
font-size: @baseFontSize * .846;
font-weight: bold;
line-height: 13px; // ensure proper line-height if floated
color: @white;
vertical-align: middle;
white-space: nowrap;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
background-color: @grayLight;
}
一个文件,多个组件。我们之前在多种导航类型中已经做过类似的事情,所以对于熟悉 Bootstrap 的人来说这并不陌生。
相关地,我们改变了处理徽章和标签悬停状态的方式。我们不再对本质上是静态元素(例如使用 `span` 创建的元素)设置默认悬停状态,而是将悬停状态(光标和背景变化)仅限于锚点。
a {
&.label:hover,
&.badge:hover {
color: @white;
text-decoration: none;
cursor: pointer;
}
}
对于徽章和标签的备用颜色,我们也将其样式仅限于锚点(具有 `href` 属性的锚点)。