amis-rpc-design/libs/amis/packages/amis-ui/scss/helper/layout/_overflow.scss
2023-10-07 19:42:30 +08:00

86 lines
2.0 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: Overflow
---
内容超出相关样式。
| Class | Properties |
| ----------- | ------------------------ |
| overflow-auto | overflow: auto; |
| overflow-hidden | overflow: hidden; |
| overflow-visible | overflow: visible; |
| overflow-scroll | overflow: scroll; |
| overflow-x-auto | overflow-x: auto; |
| overflow-y-auto | overflow-y: auto; |
| overflow-x-hidden | overflow-x: hidden; |
| overflow-y-hidden | overflow-y: hidden; |
| overflow-x-visible | overflow-x: visible; |
| overflow-y-visible | overflow-y: visible; |
| overflow-x-scroll | overflow-x: scroll; |
| overflow-y-scroll | overflow-y: scroll; |
## 用法
请前往一下文档查看属性含义。
https://www.w3school.com.cn/cssref/pr_pos_overflow.asp
# 响应式设计
支持通过添加设备前缀 `m:` 或者 `pc:` 来分别针对「手机端」或者「pc端」设置样式更多说明请前往[「响应式设计」](../../../docs/style/responsive-design.md)。
## 状态前缀
不支持[「状态前缀」](../../../docs/style/state.md),有需求请提 [issue](https://github.com/baidu/amis/issues)。
*/
@mixin make-overflow($prefix: '.') {
#{$prefix}overflow-auto {
overflow: auto;
}
#{$prefix}overflow-hidden {
overflow: hidden;
}
#{$prefix}overflow-visible {
overflow: visible;
}
#{$prefix}overflow-scroll {
overflow: scroll;
}
#{$prefix}overflow-x-auto {
overflow-x: auto;
}
#{$prefix}overflow-y-auto {
overflow-y: auto;
}
#{$prefix}overflow-x-hidden {
overflow-x: hidden;
}
#{$prefix}overflow-y-hidden {
overflow-y: hidden;
}
#{$prefix}overflow-x-visible {
overflow-x: visible;
}
#{$prefix}overflow-y-visible {
overflow-y: visible;
}
#{$prefix}overflow-x-scroll {
overflow-x: scroll;
}
#{$prefix}overflow-y-scroll {
overflow-y: scroll;
}
}
@include make-overflow();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-overflow('.' + selector-escape($deivce + ':'));
}
}