ACS自定义模块
暂时不支持次要分级。如需使用自定义主要分级+次要分级,请引入Peppo的ACS分割器。
由于不可抗原因,请务必填满模块中所有变量。
/* 自定义项目等级 */ .anom-bar-container.{$container-class} .text-part > .main-class::before { background-color: {$container-color}; background-image: url("{$container-icon}"); } .anom-bar-container.{$container-class} .danger-diamond > .top-icon::before { background-image: url("{$container-icon}"); } .anom-bar-container.{$container-class} .text-part > .main-class::before { background-color: {$container-color}; background-image: url("{$container-icon}"); } .anom-bar-container.{$disruption-class} .text-part .disrupt-class::before { content: "{$disruption-level}"; color: #FFF; color: {$disrlevel-color}; } .anom-bar-container.{$risk-class} .text-part .risk-class::before { content: "{$risk-level}"; color: #FFF; color: {$risklevel-color}; } .anom-bar-container.{$disruption-class} .text-part .disrupt-class::after { background-color: {$disruption-color}; } .anom-bar-container.{$risk-class} .text-part .risk-class::after { background-color: {$risk-color}; } .anom-bar-container.{$disruption-class} .text-part .disrupt-class::after { background-image: url("{$disruption-icon}"); } .anom-bar-container.{$risk-class} .text-part .risk-class::after { background-image: url("{$risk-icon}"); } .anom-bar-container.{$disruption-class} .danger-diamond > .left-icon::before { background-image: url("{$disruption-icon}"); } .anom-bar-container.{$risk-class} .danger-diamond > .right-icon::before { background-image: url("{$risk-icon}"); } .anom-bar-container.{$container-class} .text-part .main-class { background-color: {$container-color}; border-left: {$container-border} solid {$container-border-color}; } .anom-bar-container.{$disruption-class}.text-part .disrupt-class { background-color: {$disruption-color}; border-left: {$disruption-border} solid {$disruption-border-color}; } .anom-bar-container.{$risk-class} .text-part .risk-class { background-color: {$risk-color}; border-left: {$risk-border} solid {$risk-border-color}; } .anom-bar-container.{$container-class} .danger-diamond > .quadrants > .top-quad { background-color: {$container-color-b}; } .anom-bar-container.{$disruption-class} .danger-diamond > .quadrants > .left-quad { background-color: {$disruption-color-b}; } .anom-bar-container.{$risk-class} .danger-diamond > .quadrants > .right-quad { background-color: {$risk-color-b}; } .anom-bar-container.{$container-class} .danger-diamond > .top-icon::before { background-color: {$risk-color}; } .anom-bar-container.{$disruption-class} .danger-diamond > .left-icon::before { background-color: {$disruption-color}; } .anom-bar-container.{$risk-class} .danger-diamond > .right-icon::before { background-color: {$risk-color}; }