两个文件视为主题的默认设计文件:design.json
和 design.css
。
design.json
指定组件的样式
design.css
提供类值的定义(例如颜色和字体)
这些文件位于主题结构中的 /designs/default/
目录中。
design.json 文件
design.json
文件具有以下结构:
{ "componentStyles": { "scs-image": { "styles": [] }, "scs-map": { "styles": [] }, "scs-title": { "styles": [] }, "scs-paragraph": { "styles": [] }, "scs-divider": { "styles": [] }, "scs-button": { "styles": [] }, "scs-app": { "styles": [] }, "scs-spacer": { }, "scs-gallery": { "styles": [] }, "scs-youtube": { "styles": [] }, "scs-socialbar": { "styles": [] }, "scs-document": { "styles": [] } } }
每个 "styles":[]
条目都可以包含特定组件的样式列表。例如,标题组件提供以下默认样式:
"styles": [{ "name": "COMP_STYLE_FLAT", "class": "scs-title-default-style" }, { "name": "COMP_STYLE_HIGHLIGHT", "class": "scs-title-style-2" }, { "name": "COMP_STYLE_DIVIDER", "class": "scs-title-style-3" } ]
注:
如果为组件创建定制样式并将其映射到design.json
中的样式,则无需像随系统提供的那些样式那样使用完整名称。只需指定要使用的字符串。例如,名称不使用 "COMP_STYLE_BOX"
,仅使用 "Box"
。这意味着仅名称 "Box"
(而不是 "COMP_STYLE_BOX"
)将显示在该组件“设置”面板的样式选项卡的列表中。名称值映射到要在用户界面中显示的实际词语,例如:
"COMP_STYLE_FLAT": "Flat", "COMP_STYLE_HIGHLIGHT": "Highlight", "COMP_STYLE_DIVIDER": "Divider",
design.css 文件
design.css
文件提供类值的定义。这里有几个示例。
.scs-title-default-style { color: #333333; display: block; font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-size: 24px; font-weight: normal; }
.scs-title-style-2 { background-color: #DEF300; color: #333333; font-family: adobe-clean, sans-serif; padding-top: 2em; padding-bottom: 2em; }
.scs-button-default-style .scs-button-button:hover { background: #f7f8f9; border: 1px solid #c4ced7; color: #0572ce; box-shadow: inset 0 1px 0 #f7f8f9; text-shadow: 0 1px 0 #f7f8f9; }
.scs-button-default-style .scs-button-button:active { background: #0572ce; border: 1px solid #0572ce; color: #fff; box-shadow: inset 0 1px 0 #0572ce; text-shadow: 0 1px 0 #0572ce; }