75 lines
2.5 KiB
SCSS
75 lines
2.5 KiB
SCSS
|
/*!markdown
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
title: Box Shadow
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
| Class | Properties |
|
|||
|
|
| ----------- | ------------------------ |
|
|||
|
|
| shadow-sm | box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) |
|
|||
|
|
| shadow | box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) |
|
|||
|
|
| shadow-md | box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) |
|
|||
|
|
| shadow-lg | box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) |
|
|||
|
|
| shadow-xl | box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1) , 0 10px 10px -5px rgba(0, 0, 0, 0.04) |
|
|||
|
|
| shadow-2xl | box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) |
|
|||
|
|
| shadow-inner | box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) |
|
|||
|
|
| shadow-none | box-shadow: none |
|
|||
|
|
|
|||
|
|
还有 hover、active、focus 扩展，比如 `hover:shadow-sm`
|
|||
|
|
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
@mixin make-box-shadow($prefix: '.', $suffix: '') {
|
|||
|
|
@each $name, $value in $boxShadows {
|
|||
|
|
@if $suffix == '.is-active' {
|
|||
|
|
#{$prefix}shadow#{suffixName($name)}.is-active,
|
|||
|
|
#{$prefix}shadow#{suffixName($name)}:active {
|
|||
|
|
box-shadow: #{$value};
|
|||
|
|
}
|
|||
|
|
} @else if $suffix == '.is-disabled' {
|
|||
|
|
#{$prefix}shadow#{suffixName($name)}.is-disabled,
|
|||
|
|
#{$prefix}shadow#{suffixName($name)}:disabled {
|
|||
|
|
box-shadow: #{$value};
|
|||
|
|
}
|
|||
|
|
} @else {
|
|||
|
|
#{$prefix}shadow#{suffixName($name)}#{$suffix} {
|
|||
|
|
box-shadow: #{$value};
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@include make-box-shadow();
|
|||
|
|
@include make-box-shadow('.' + selector-escape('hover:'), ':hover');
|
|||
|
|
@include make-box-shadow('.' + selector-escape('active:'), '.is-active');
|
|||
|
|
@include make-box-shadow('.' + selector-escape('focus:'), ':focus');
|
|||
|
|
@include make-box-shadow('.' + selector-escape('disabled:'), '.is-disabled');
|
|||
|
|
@include make-box-shadow('.group:hover .' + selector-escape('group-hover:'));
|
|||
|
|
|
|||
|
|
@each $deivce in map-keys($devices) {
|
|||
|
|
@include media-device($deivce) {
|
|||
|
|
@include make-box-shadow('.' + selector-escape($deivce + ':'));
|
|||
|
|
|
|||
|
|
@include make-box-shadow(
|
|||
|
|
'.' + selector-escape($deivce + ':') + selector-escape('hover:'),
|
|||
|
|
':hover'
|
|||
|
|
);
|
|||
|
|
@include make-box-shadow(
|
|||
|
|
'.' + selector-escape($deivce + ':') + selector-escape('active:'),
|
|||
|
|
'.is-active'
|
|||
|
|
);
|
|||
|
|
@include make-box-shadow(
|
|||
|
|
'.' + selector-escape($deivce + ':') + selector-escape('focus:'),
|
|||
|
|
':focus'
|
|||
|
|
);
|
|||
|
|
@include make-box-shadow(
|
|||
|
|
'.' + selector-escape($deivce + ':') + selector-escape('disabled:'),
|
|||
|
|
'.is-disabled'
|
|||
|
|
);
|
|||
|
|
@include make-box-shadow(
|
|||
|
|
'.group:hover .' + selector-escape($deivce + ':') +
|
|||
|
|
selector-escape('group-hover:')
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|