amis/scss/helper/layout/_position.scss
吴多益 33686a375e
SCSS 基于 CSS custom properties 重构,支持通过配置来控制展现风格 (#1190)
* 使用自定义 css 属性初步,支持大部分组件的展现

* button 大部分可以看了

* cxd 和 dark 大部分正常

* 修复一些细节样式错误;补充 css 变量的文档

* 修复几个脚本发现的错误

* 完善一下注释

* 修复一些样式不一致问题

* 修复可能存在的 css xss

* 恢复 font-variant 功能

* 修复绝大部分 @if 相关的问题

* 恢复之前的注释

* 修复小错误,并将所有 background-color 改成 background,这样就能设置渐变色

* 修复 button group 在 cxd 下不一致问题

* 缩小查看配置和复制配置的宽度,留出更多空间

* 修复一些潜在的错误

* 恢复 utilities 中 label 背景色的设置

* 修复错误的 css 变量

* 补充 IE11 Variables Polyfill
2020-12-21 10:08:40 +08:00

56 lines
1.2 KiB
SCSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/*!markdown
---
title: Position
---
定位相关样式。
| Class | Properties |
| ----------- | ------------------------ |
| static | position: static; |
| fixed | position: fixed; |
| absolute | position: absolute; |
| relative | position: relative; |
| sticky | position: sticky; |
## 用法
请前往一下文档查看属性含义。
https://www.w3school.com.cn/cssref/pr_class_position.asp
# 响应式设计
支持通过添加设备前缀 `m:` 或者 `pc:` 来分别针对「手机端」或者「pc端」设置样式更多说明请前往[「响应式设计」](../../../docs/style/responsive-design.md)。
## 状态前缀
不支持[「状态前缀」](../../../docs/style/state.md),有需求请提 [issue](https://github.com/baidu/amis/issues)。
*/
@mixin make-position($prefix: '.') {
@each $name,
$value
in (
static: static,
fixed: fixed,
absolute: absolute,
relative: relative,
sticky: sticky
)
{
#{$prefix + $name} {
position: $value;
}
}
}
@include make-position();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-position('.' + selector-escape($deivce + ':'));
}
}