amis2/packages/amis-ui/scss/helper/effect/_opacity.scss
2022-06-01 15:06:00 +08:00

67 lines
1.6 KiB
SCSS

/*!markdown
---
title: Opacity
---
| Class | Properties |
| ----------- | ------------------------ |
| opacity-0 | opacity: 0 |
| opacity-5 | opacity: 0.05 |
| opacity-10 | opacity: 0.1 |
| opacity-20 | opacity: 0.2 |
| opacity-25 | opacity: 0.25 |
| opacity-30 | opacity: 0.3 |
| opacity-40 | opacity: 0.4 |
| opacity-50 | opacity: 0.5 |
| opacity-60 | opacity: 0.6 |
| opacity-70 | opacity: 0.7 |
| opacity-75 | opacity: 0.75 |
| opacity-80 | opacity: 0.8 |
| opacity-90 | opacity: 0.9 |
| opacity-95 | opacity: 0.95 |
| opacity-100 | opacity: 1 |
*/
@mixin make-opacity($prefix: '.', $suffix: '') {
@each $name,
$value
in (
'0': 0,
'5': 0.05,
'10': 0.1,
'20': 0.2,
'25': 0.25,
'30': 0.3,
'40': 0.4,
'50': 0.5,
'60': 0.6,
'70': 0.7,
'75': 0.75,
'80': 0.8,
'90': 0.9,
'95': 0.95,
'100': 1
)
{
#{$prefix}opacity#{suffixName($name)}#{$suffix} {
opacity: $value;
}
}
}
@include make-opacity();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-opacity('.' + selector-escape($deivce + ':'));
}
}
// @include border-radius('.' + selector-escape('hover:'), ':hover');
// @include border-radius('.' + selector-escape('active:'), '.is-active');
// @include border-radius('.' + selector-escape('focus:'), ':focus');
// @include border-radius('.' + selector-escape('disabled:'), '.is-disabled');
// @include border-radius('.group:hover .' + selector-escape('group-hover:'));