Lepton X SCSS Files
The LeptonX scss file structure is divided into different bundles. The purpose of this is to exclude unnecessary styles (for example, the top menu layer styles when using side menu layout) in the project. To reload only relevant files on theme changes.
Bundle Files
Folders containing bundle files in source files do not contain underscores. Those containing underscores are files used by the bundle files.
Theme bundle files: dim.scss dark.scss light.scss placed under themes directory.
Bootstrap bundle files: dark/booststrap-dark.scss, light/booststrap-light.scss and dim/booststrap-dim.scss placed under the frameworks/bootstrap directory.
Layout bundle files: side-menu/layout-bundle.scss and top-menu/layout-bundle.scss placed under the pro directory
Ui spescific bundles: The Angular UI bundle is pro/libraries/ng-bundle.scss, the Blazor UI bundle is pro/libraries/blazor-bundle.scss, the MVC UI bundle is pro/libraries/js-bundle.scss
ABP bundle file: Styles of ABP UI elements is pro/abp/abp-bundle.scss
Font bundle: pro/libraries/font-bundle.scss
Theme Map
Theme maps are defined in theme color files. The position of the files is listed as following: dark: _colors/dark/colors.scss light: _colors/light/colors.scss dim: _colors/dim/colors.scss
Possible properties are listed below
border-color,
brand,
brand-text,
card-bg,
card-title-text-color,
container-active-text,
content-bg,
content-text,
danger,
dark
info,
light
logo,
logo-icon,
logo-reverse,
navbar-active-bg-color
navbar-active-text-color
navbar-color
navbar-text-color
primary,
radius
secondary,
shadow,
success,
text-white,
warning
Theme Builder
The build-theme mixin reads the theme-map and writes its values to the :root selector as CSS variables by using defined builder functions.
The global-theme-builder converts the rgb colors of specific property values in the theme map
Compiling to CSS
Please make sure that the dependencies are installed. You can install with the
yarn install
ornpm install
command.
For building source files please run the command below
yarn build
CSS files will be created in the built folder.
Adding new theme bundle to source file
Create a new file under _colors/your-theme/colors.scss and replace the content below
$theme-map: (
light: #f0f4f7,
dark: #062a44,
navbar-color: #fff,
navbar-text-color: #445f72,
navbar-active-text-color: #124163,
navbar-active-bg-color: #f3f6f9,
);
Create a new file _colors/your-theme/index.scss and paste content below in it
@import "colors";
@import "../common";
Create a new file frameworks/bootstrap/your-theme/bootstrap-your-theme.scss and paste content below in it
@import "_colors/your-theme";
@import "../common";
Finally create a new file themes/your-theme.scss and paste content below in it
@import "_colors/your-theme";
@import "builders/_builder";
Other Files
- build.js: Builds scss bundle files to css files.Also creates rtl.css files.
- package.json: Includes dependencies and build command
- postcss.config.js: Used by postcss, needed for ltr to rtl