SAP Spartacus元素被选中后，focus颜色的css实现

如下图，当按下tab键，让Spartacus元素处于被选中状态后，显示的蓝色border：

这个border的颜色通过变量–cx-color-visual-focus定义：

我们点击storefronstyles的root.scss，发现里面并没有–cx-color-visual-focus这个变量：

奥妙在root.scss的这行@import ‘theme’：

单击进去：

在_variables.scss里有变量theme−colors，里面定义了color名称：visual−focus,值为theme-colors，里面定义了color名称：visual-focus, 值为theme−colors，里面定义了color名称：visual−focus,值为visual-focus:

这些颜色通过root.scss里的下列代码展开：

@each $color, $value in $theme-colors {--cx-color-#{$color}: #{$value};}

更多Jerry的原创文章，尽在：“汪子熙”:

SAP Spartacus元素被选中后，focus颜色的css实现相关推荐

C# tabcontrol当标签页被选中后改变颜色
C# tabcontrol当标签页被选中后改变颜色 private TabControl tabsControl = new TabControl(); tabsControl.DrawMode = ...
SAP Spartacus cxFocus增添了refresh Focus功能后的一些考虑
ngAfterViewInit Hook: 负责视图渲染完毕后,执行handleFocus来使元素得到focus nOnChanges: 当配置的refreshFocus指向的Component 属性 ...
SAP Spartacus里几个和Focus相关的directive的继承关系以及元素focus是如何实现的
cx-table施加的是focus directive: Focusdirective继承自LockFocusdirective: TrapFocusdirective继承自TabFocusdirec ...
SAP Spartacus 关于列表点击focus Accessibility的需求
需求如下: 不管选择左边的view里列表行项目的哪一条,右边页面第一个可以被focus的元素,即Edit按钮,需要自动被focus: 如果像上图这样,将cxFocus直接施加到a标签页上,一个side ...
element饿了么ui表格选中后高亮颜色修改
element表格单选选中状态下背景色太浅,为了让选中的数据更突出一些,只能自定义颜色去覆盖默认的颜色,我的表格是斑马纹的,可能非斑马的还不适用 .el-table--striped .el-tabl ...
SAP Spartacus cxFocus Directive施加后导致tabindex为-1的副作用研究
我第一次看到下图第44行代码时,以为仅仅是一个简单的赋值操作,把requiredTabindex的值赋成-1: 后来发现,这个requiredTabindex不是一个字段的值,而是一个set函数的名称 ...
CSS实现checkbox radio 选中后文本颜色改变
HTML: <input type="checkbox" name="gloss" value="feature"/> < ...
SAP Spartacus 用户登录成功后，Access Token 持久化到浏览器 local storage 的执行原理
下图第1487行代码,调用Angular HTTP library,往this.tokenEndpoint指向的API发送HTTP post请求,参数为用户在login form里输入的用户名和密码: ...
SAP Spartacus TypeScript和编译后的JavaScript命名规范
文件名的命名规范:以连接线(hyphen)连接名称片段: 对应的Spartacus-core.js: 要获取更多Jerry的原创文章,请关注公众号"汪子熙":

SAP Spartacus元素被选中后，focus颜色的css实现

SAP Spartacus元素被选中后，focus颜色的css实现相关推荐

最新文章

热门文章