Skip to content
Snippets Groups Projects
Commit e7fb5802 authored by Rajab Natshah's avatar Rajab Natshah
Browse files

Issue #3357698: Change SCSS files to be inline with Vartheme BS5, which speed...

Issue #3357698: Change SCSS files to be inline with Vartheme BS5, which speed up the copy/custom/ components:build process with Global Varbase Components defaults
parent 23283588
No related branches found
No related tags found
No related merge requests found
// Global Varbase Components defaults.
// -----------------------------------------------------------
// Custom default path for the location of the node_modules
// Custom default path for the location of custom SCSS source files
// from within "./components/{component_type}/{component_name}".
@import "../scss/bootstrap-variables"; // Override Bootstrap 5 variables.
@import "../scss/vartheme-variables"; // Vartheme custom variables.
@import "../scss/vartheme-mixins"; // Vartheme custom mixins.
@import "../node_modules/bootstrap/scss/functions"; // Bootstrap functions.
@import "../node_modules/bootstrap/scss/variables"; // Bootstrap variables.
@import "../node_modules/bootstrap/scss/maps"; // Bootstrap maps.
@import "../node_modules/bootstrap/scss/mixins"; // Bootstrap mixins.
@import "../node_modules/bootstrap/scss/utilities"; // Bootstrap utilities.
......@@ -62,14 +62,9 @@ $theme-colors: (
);
// scss-docs-end theme-colors-map
// scss-docs-start import-stack
// Configuration
@import "../../../node_modules/bootstrap/scss/functions";
@import "../../../styles/base/variables";
@import "../../../node_modules/bootstrap/scss/variables";
@import "../../../node_modules/bootstrap/scss/maps";
@import "../../../node_modules/bootstrap/scss/mixins";
@import "../../../node_modules/bootstrap/scss/utilities";
@import "../../defaults"; // Global component defaults.
// scss-docs-start import-stack
// Import the alert style from the Bootstrap 5 package to be compiled with
// Restricted style and colors in most websites.
@import "../../../node_modules/bootstrap/scss/alert";
@import "../../../node_modules/bootstrap/scss/functions";
@import "../../../styles/base/variables";
@import "../../../node_modules/bootstrap/scss/variables";
@import "../../../node_modules/bootstrap/scss/maps";
@import "../../../node_modules/bootstrap/scss/mixins";
@import "../../../node_modules/bootstrap/scss/utilities";
@import "../../defaults"; // Global component defaults.
.vb-tags {
padding-left: 0;
......
@import "../../defaults"; // Global component defaults.
.page {
min-height: 100vh;
}
......@@ -8,6 +8,7 @@
"node": ">= 16.0"
},
"scripts": {
"components:build": "webpack --progress --config webpack.config.build.js",
"theme:watch": "webpack --progress --config webpack.config.dev.js --watch",
"theme:build": "webpack --progress --config webpack.config.build.js"
},
......
// Override bootstrap 5 variables
// ----------------------------------------------------------------
// See more about override Bootstrap 5 variables here:
// https://getbootstrap.com/docs/5.0/customize/sass
// https://github.com/twbs/bootstrap/blob/v5.2.3/scss/_variables.scss
// Override aspect ratios array to add more ratios.
$aspect-ratios: (
......
// Vartheme custom mixins
// -----------------------------------------------------------------------------
// Vartheme custom variables
// -----------------------------------------------------------------------------
// View Mode Inventory (VMI).
// -----------------------------------------------------------------------------
$grid-gutter-width: 30px;
$view-modes-padding: math.div($grid-gutter-width, 2);
// Custom Varbase Hero slider media variables.
// -----------------------------------------------------------------------------
// Text color.
$hero-title-text-color: #fff;
$hero-brief-text-color: #fff;
$hero-link-text-color: #fff;
// Font sizes with responsive sizes.
$hero-xlarge-title-font-size-xs: 3.3rem;
$hero-xlarge-title-font-size-sm: 3.3rem;
$hero-xlarge-title-font-size-md: 57px;
$hero-xlarge-title-font-size-lg: 57px;
$hero-xlarge-title-font-size-xl: 57px;
// Hero content style.
$hero-content-hover-opacity: 0.7;
$hero-content-background-color1: rgb(0,0,0);
$hero-content-background-color2: rgba(0,0,0,0.3);
// Empty hero background color.
$hero-empty-view-background: #e0e0e0;
// Gutter for arrow of navigation.
$hero-arrow-gutter: 0.63rem;
// Height for screen size and less.
$hero-min-height: 300px;
$hero-max-height: 300px;
// For screen size sm and more.
$hero-min-height-sm: 400px;
$hero-max-height-sm: 400px;
// For screen size md and more.
$hero-min-height-md: 600px;
$hero-max-height-md: 600px;
$hero-container-v-padding: 60px;
$hero-container-h-padding-sm: 150px;
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment