123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190 |
- @import "function";
- @import "../common/var";
- /* Break-points
- -------------------------- */
- @mixin res($key, $map: $--breakpoints) {
- // 循环断点Map,如果存在则返回
- @if map-has-key($map, $key) {
- @media only screen and #{inspect(map-get($map, $key))} {
- @content;
- }
- } @else {
- @warn "Undefeined points: `#{$map}`";
- }
- }
- /* Scrollbar
- -------------------------- */
- @mixin scroll-bar {
- $--scrollbar-thumb-background: #b4bccc;
- $--scrollbar-track-background: #fff;
- &::-webkit-scrollbar {
- z-index: 11;
- width: 6px;
- &:horizontal {
- height: 6px;
- }
- &-thumb {
- border-radius: 5px;
- width: 6px;
- background: $--scrollbar-thumb-background;
- }
- &-corner {
- background: $--scrollbar-track-background;
- }
- &-track {
- background: $--scrollbar-track-background;
- &-piece {
- background: $--scrollbar-track-background;
- width: 6px;
- }
- }
- }
- }
- /* Placeholder
- -------------------------- */
- @mixin placeholder {
- &::-webkit-input-placeholder {
- @content
- }
- &::-moz-placeholder {
- @content
- }
- &:-ms-input-placeholder {
- @content
- }
- }
- /* BEM
- -------------------------- */
- @mixin b($block) {
- $B: $namespace+'-'+$block !global;
- .#{$B} {
- @content;
- }
- }
- @mixin e($element) {
- $E: $element !global;
- $selector: &;
- $currentSelector: "";
- @each $unit in $element {
- $currentSelector: #{$currentSelector + "." + $B + $element-separator + $unit + ","};
- }
- @if hitAllSpecialNestRule($selector) {
- @at-root {
- #{$selector} {
- #{$currentSelector} {
- @content;
- }
- }
- }
- } @else {
- @at-root {
- #{$currentSelector} {
- @content;
- }
- }
- }
- }
- @mixin m($modifier) {
- $selector: &;
- $currentSelector: "";
- @each $unit in $modifier {
- $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","};
- }
- @at-root {
- #{$currentSelector} {
- @content;
- }
- }
- }
- @mixin configurable-m($modifier, $E-flag: false) {
- $selector: &;
- $interpolation: '';
- @if $E-flag {
- $interpolation: $element-separator + $E-flag;
- }
- @at-root {
- #{$selector} {
- .#{$B+$interpolation+$modifier-separator+$modifier} {
- @content;
- }
- }
- }
- }
- @mixin spec-selector($specSelector: '', $element: $E, $modifier: false, $block: $B) {
- $modifierCombo: '';
- @if $modifier {
- $modifierCombo: $modifier-separator + $modifier;
- }
- @at-root {
- #{&}#{$specSelector}.#{$block+$element-separator+$element+$modifierCombo} {
- @content
- }
- }
- }
- @mixin meb($modifier: false, $element: $E, $block: $B) {
- $selector: &;
- $modifierCombo: '';
- @if $modifier {
- $modifierCombo: $modifier-separator + $modifier;
- }
- @at-root {
- #{$selector} {
- .#{$block+$element-separator+$element+$modifierCombo} {
- @content
- }
- }
- }
- }
- @mixin when($state) {
- @at-root {
- &.#{$state-prefix + $state} {
- @content;
- }
- }
- }
- @mixin extend-rule($name) {
- @extend #{'%shared-'+$name};
- }
- @mixin share-rule($name) {
- $rule-name: '%shared-'+$name;
- @at-root #{$rule-name} {
- @content
- }
- }
- @mixin pseudo($pseudo) {
- @at-root #{&}#{':#{$pseudo}'} {
- @content
- }
- }
|