Описание внутреннего механизма тем оформления

Устройство тем оформления

В ember-flexberry за стилизацию тем отвечает css фреймворк Semantic-UI, он находится в папке /bower_components/semantic-ui. Эта папка содержит непосредственно сами папки с темами в /src/themes, в них отдельно для каждого элемента разметки есть файл element.variables в котором задаются переменные less, содержащие различные свойства стилей. Также там есть файлы такие как element.overrides в них можно записывать полноценные селекторы со свойствами.

button.variables

screenshoot

button.overides

screenshoot

Помимо папки с темами есть папка /src/definitions в ней также для каждого элемента есть свой файл element.less, в нём размещены все селекторы с переменными, которые берутся из файлов .variables.

button.less

screenshoot

За выбор тем отвечает конфигурационный файл /src/theme.config.example, в нем можно указать для каждого елемента свою тему, можно задать элементам разные стили от любых имеющихся тем.

theme.config.example

screenshoot

Также в папке /src находятся semantic.less и theme.less отвечающие за импорт элементов тем.

semantic.less

screenshoot

theme.less

screenshoot