У всех встроенных компонентов сайтов одинаковая структура класса CSS.
Каждый компонент имеет следующие три класса CSS, примененные к крайнему элементу <div>:
scs-component scs-type design-style
type — это тип компонента (например, image, gallery или divider). design-style — это выбранный класс стиля компонента, как определено в файле темы.
Основы стилей темы
В файле design.json темы перечисляются все стили (frame, shadow, highlighted и т. д.), которые можно применить к компонентам всех типов (таким как button или image). У каждого стиля есть display name и class name. Отображаемое имя отображается на вкладке Стиль панели Настройки. Имя класса указывает на селектор CSS в файле design.css темы. Например, запись для компонента button выглядит следующим образом:
"scs-button": {
"styles": [{
"name": "COMP_STYLE_ALTA_SMALL",
"class": "scs-button-default-style"
},
{
"name": "COMP_STYLE_ALTA_LARGE",
"class": "scs-button-style-2"
},
{
"name": "COMP_STYLE_SIMPLE",
"class": "scs-button-style-3"
}
]
},
Имена встроенных компонентов переводятся, поэтому отображается ключ для получения имени стиля из пакета ресурсов. Если добавить на страницу компонент button, а затем выбрать Простой стиль на панели Настройки > Стиль, файл design.json связывает отображаемое имя Простой (ключ COMP_STYLE_SIMPLE) с именем класса scs-button-style-3. Элемент button визуализируется со следующими классами:
scs-component scs-button scs-button-style-3
Если для заданного компонента стиль не выбран, используется стиль по умолчанию scs-type-default-style. В предыдущем примере кнопка визуализируется со следующими классами:
scs-component scs-button scs-button-default-style
Стиль scs-component-content
Для каждого встроенного компонента, в элементе scs-component <div>, упомянутом ранее, существует элемент <div> с CSS-классом scs-component-content. Другими словами:
scs-component scs-type design-style scs-component-content
В файле design.css класс scs-component-content часто используется для стилизации "рамки" вокруг компонента (например, для применения границы или тени).
Следует отметить, что во встроенном файле comp.css общий класс scs-component-content определяется со свойствами position:relative и display:inline-block помимо других свойств CSS .
Хотя стиль scs-component-content полезен для стилизации "рамки" вокруг каждого компонента, для полного определения стиля компонента необходимы классы, характерные от компонента. См. Стили для компонентов.