amis-rpc-design/libs/amis/packages/amis-ui/scss/helper/layout/_overflow.scss

86 lines
2.0 KiB
SCSS
Raw Normal View History

2023-10-07 19:42:30 +08:00
/*!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 + ':'));
}
}