feat: bem.scss
This commit is contained in:
FairyEver
parent
e6dfed0d28
commit
532dfb9738
|
|
@ -1,11 +1,13 @@
|
|||
@import './var.scss';
|
||||
@import './function.scss';
|
||||
$bem-namespace: 'd2' !default;
|
||||
$bem-element-separator: '__' !default;
|
||||
$bem-modifier-separator: '--' !default;
|
||||
$bem-state-prefix: 'is-' !default;
|
||||
|
||||
// ------------------------------
|
||||
// => BEM from ElementUI
|
||||
// ------------------------------
|
||||
@mixin b($block) {
|
||||
$B: $namespace+'-'+$block !global;
|
||||
$B: $bem-namespace+'-'+$block !global;
|
||||
|
||||
.#{$B} {
|
||||
@content;
|
||||
|
|
@ -76,3 +78,40 @@
|
|||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@function selectorToString($selector) {
|
||||
$selector: inspect($selector);
|
||||
$selector: str-slice($selector, 2, -2);
|
||||
@return $selector;
|
||||
}
|
||||
|
||||
@function containsModifier($selector) {
|
||||
$selector: selectorToString($selector);
|
||||
@if str-index($selector, $bem-modifier-separator) {
|
||||
@return true;
|
||||
} @else {
|
||||
@return false;
|
||||
}
|
||||
}
|
||||
|
||||
@function containWhenFlag($selector) {
|
||||
$selector: selectorToString($selector);
|
||||
@if str-index($selector, '.' + $bem-state-prefix) {
|
||||
@return true
|
||||
} @else {
|
||||
@return false
|
||||
}
|
||||
}
|
||||
|
||||
@function containPseudoClass($selector) {
|
||||
$selector: selectorToString($selector);
|
||||
@if str-index($selector, ':') {
|
||||
@return true
|
||||
} @else {
|
||||
@return false
|
||||
}
|
||||
}
|
||||
|
||||
@function hitAllSpecialNestRule($selector) {
|
||||
@return containsModifier($selector) or containWhenFlag($selector) or containPseudoClass($selector);
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@import 'd2-projects/d2-utils/sass/bem.scss';
|
||||
@import 'd2-admin/assets/style/utils/bem.scss';
|
||||
|
||||
@include b(flex) {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import 'd2-projects/d2-utils/sass/bem.scss';
|
||||
@import 'd2-admin/assets/style/utils/bem.scss';
|
||||
|
||||
@include b(icon) {
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -1,53 +0,0 @@
|
|||
@import './bem.scss';
|
||||
|
||||
@include b(animate-spin) {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@include b(animate-ping) {
|
||||
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
|
||||
}
|
||||
|
||||
@keyframes ping {
|
||||
75%, 100% {
|
||||
transform: scale(2);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include b(animate-pulse) {
|
||||
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
|
||||
@include b(animate-bounce) {
|
||||
animation: bounce 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 100% {
|
||||
transform: translateY(-25%);
|
||||
animationTimingFunction: cubic-bezier(0.8, 0, 1, 1);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(0);
|
||||
animationTimingFunction: cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
// --------+---------------------
|
||||
// => BEM
|
||||
// --------+---------------------
|
||||
@function selectorToString($selector) {
|
||||
$selector: inspect($selector);
|
||||
$selector: str-slice($selector, 2, -2);
|
||||
@return $selector;
|
||||
}
|
||||
|
||||
@function containsModifier($selector) {
|
||||
$selector: selectorToString($selector);
|
||||
@if str-index($selector, $bem-modifier-separator) {
|
||||
@return true;
|
||||
} @else {
|
||||
@return false;
|
||||
}
|
||||
}
|
||||
|
||||
@function containWhenFlag($selector) {
|
||||
$selector: selectorToString($selector);
|
||||
@if str-index($selector, '.' + $bem-state-prefix) {
|
||||
@return true
|
||||
} @else {
|
||||
@return false
|
||||
}
|
||||
}
|
||||
|
||||
@function containPseudoClass($selector) {
|
||||
$selector: selectorToString($selector);
|
||||
@if str-index($selector, ':') {
|
||||
@return true
|
||||
} @else {
|
||||
@return false
|
||||
}
|
||||
}
|
||||
|
||||
@function hitAllSpecialNestRule($selector) {
|
||||
@return containsModifier($selector) or containWhenFlag($selector) or containPseudoClass($selector);
|
||||
}
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
// ------------------------------
|
||||
// => helper
|
||||
// ------------------------------
|
||||
|
||||
// clear float
|
||||
@mixin clearfix {
|
||||
$selector: &;
|
||||
@at-root {
|
||||
#{$selector}::before,
|
||||
#{$selector}::after {
|
||||
display: table;
|
||||
content: '';
|
||||
}
|
||||
#{$selector}::after {
|
||||
clear: both
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// turn on gpu
|
||||
@mixin gpu {
|
||||
perspective: 1000px;
|
||||
backface-visibility: hidden;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
// text
|
||||
@mixin text-ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
$namespace: 'd2' !default;
|
||||
|
||||
$bem-element-separator: '__' !default;
|
||||
$bem-modifier-separator: '--' !default;
|
||||
$bem-state-prefix: 'is-' !default;
|
||||
Loading…
Reference in New Issue