|
|
// Mixins
|
|
|
// --------------------------
|
|
|
|
|
|
// 定义一个名为 fa-icon 的混合器（mixin）
|
|
|
@mixin fa-icon() {
|
|
|
// 将元素显示为内联块级元素
|
|
|
display: inline-block;
|
|
|
// 设置字体为'FontAwesome'，字体大小为变量 #{$fa-font-size-base} 除以变量 #{$fa-line-height-base}，
|
|
|
// 字体粗细、风格和变体为 normal，通过缩短字体声明的方式设置。
|
|
|
font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome;
|
|
|
// 设置字体大小继承父元素的字体大小。因为上一行的字体声明不能同时包含继承，所以这里单独设置。
|
|
|
font-size: inherit;
|
|
|
// 设置文本渲染方式为自动，这样可以优化文本的显示效果。
|
|
|
// 注意：'optimizelegibility'可能会导致一些问题，如 #1094 所描述的情况。
|
|
|
text-rendering: auto;
|
|
|
// 在 WebKit 浏览器内核中使用抗锯齿效果以提高字体的显示质量。
|
|
|
-webkit-font-smoothing: antialiased;
|
|
|
// 在 Mozilla 浏览器内核中使用灰度平滑效果以提高字体的显示质量。
|
|
|
-moz-osx-font-smoothing: grayscale;
|
|
|
}
|
|
|
|
|
|
// 定义一个名为 fa-icon-rotate 的混合器，接收两个参数 $degrees（旋转角度）和 $rotation（用于 IE 的旋转值）
|
|
|
@mixin fa-icon-rotate($degrees, $rotation) {
|
|
|
// 在 Internet Explorer 中设置旋转角度
|
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})";
|
|
|
// 在 WebKit 浏览器内核中设置旋转角度
|
|
|
-webkit-transform: rotate($degrees);
|
|
|
// 在 Internet Explorer 中设置旋转角度
|
|
|
-ms-transform: rotate($degrees);
|
|
|
// 在标准 CSS 环境中设置旋转角度
|
|
|
transform: rotate($degrees);
|
|
|
}
|
|
|
|
|
|
// 定义一个名为 fa-icon-flip 的混合器，接收三个参数 $horiz（水平缩放值）、$vert（垂直缩放值）和 $rotation（用于 IE 的旋转值）
|
|
|
@mixin fa-icon-flip($horiz, $vert, $rotation) {
|
|
|
// 在 Internet Explorer 中设置翻转效果
|
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}, mirror=1)";
|
|
|
// 在 WebKit 浏览器内核中设置缩放效果以实现翻转
|
|
|
-webkit-transform: scale($horiz, $vert);
|
|
|
// 在 Internet Explorer 中设置缩放效果以实现翻转
|
|
|
-ms-transform: scale($horiz, $vert);
|
|
|
// 在标准 CSS 环境中设置缩放效果以实现翻转
|
|
|
transform: scale($horiz, $vert);
|
|
|
}
|
|
|
|
|
|
// 仅将内容显示给屏幕阅读器。类似于 Bootstrap 4 的做法。
|
|
|
//
|
|
|
// 参考：http://a11yproject.com/posts/how-to-hide-content/
|
|
|
@mixin sr-only {
|
|
|
// 将元素设置为绝对定位
|
|
|
position: absolute;
|
|
|
// 设置宽度为 1 像素
|
|
|
width: 1px;
|
|
|
// 设置高度为 1 像素
|
|
|
height: 1px;
|
|
|
// 清除内边距
|
|
|
padding: 0;
|
|
|
// 设置外边距为 -1 像素
|
|
|
margin: -1px;
|
|
|
// 设置内容溢出时隐藏
|
|
|
overflow: hidden;
|
|
|
// 使用裁剪矩形将内容隐藏
|
|
|
clip: rect(0,0,0,0);
|
|
|
// 清除边框
|
|
|
border: 0;
|
|
|
}
|
|
|
|
|
|
// 与.sr-only 结合使用，仅在元素获得焦点时显示内容。
|
|
|
//
|
|
|
// 对于“跳转到主要内容”链接很有用；参考 http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
|
|
|
//
|
|
|
// 来源：HTML5 Boilerplate
|
|
|
@mixin sr-only-focusable {
|
|
|
// 当元素处于激活状态或获得焦点时应用以下样式
|
|
|
&:active,
|
|
|
&:focus {
|
|
|
// 将元素设置为静态定位
|
|
|
position: static;
|
|
|
// 设置宽度为自动
|
|
|
width: auto;
|
|
|
// 设置高度为自动
|
|
|
height: auto;
|
|
|
// 清除外边距
|
|
|
margin: 0;
|
|
|
// 使内容溢出时可见
|
|
|
overflow: visible;
|
|
|
// 清除裁剪矩形
|
|
|
clip: auto;
|
|
|
}
|
|
|
} |
