67 lines
1.6 KiB
SCSS
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:'));
|