diff --git a/CHANGELOG.md b/CHANGELOG.md index 3e372506f8..ddd601b6c6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,11 +16,12 @@ Our versioning strategy is as follows: ### 🎉 New Features & Improvements * `[create-sitecore-jss]` Introduced "node-xmcloud-proxy" addon ([#1863](https://github.com/Sitecore/jss/pull/1863)) -* `[create-sitecore-jss]` `[template/angular]` `[template/angular-sxp]` `[template/angular-xmcloud]` Introduced "angular-sxp", "angular-xmcloud" addons ([#1838](https://github.com/Sitecore/jss/pull/1838))([#1845](https://github.com/Sitecore/jss/pull/1845)): +* `[create-sitecore-jss]` `[template/angular]` `[template/angular-sxp]` `[template/angular-xmcloud]` Introduced "angular-sxp", "angular-xmcloud" addons ([#1838](https://github.com/Sitecore/jss/pull/1838))([#1845](https://github.com/Sitecore/jss/pull/1845))([#1858](https://github.com/Sitecore/jss/pull/1858))([#1865](https://github.com/Sitecore/jss/pull/1865)): * The Angular app should now be initialized by providing both templates (or using CLI prompts): * SXP-based: 'angular,angular-sxp' * XMCloud-based: 'angular,angular-xmcloud' * Rework Angular initializer to support XMCloud and SXP journeys; + * Add SXA styles to xmcloud addon * `[create-sitecore-jss]` Rework Angular initializer to support XMCloud and SXP journeys ([#1845](https://github.com/Sitecore/jss/pull/1845))([#1858](https://github.com/Sitecore/jss/pull/1858)) * `[create-sitecore-jss]` Allows proxy apps to be installed alongside main apps ([#1858](https://github.com/Sitecore/jss/pull/1858)) diff --git a/packages/create-sitecore-jss/src/common/index.ts b/packages/create-sitecore-jss/src/common/index.ts index 6374f32ca6..d5b18b5e2d 100644 --- a/packages/create-sitecore-jss/src/common/index.ts +++ b/packages/create-sitecore-jss/src/common/index.ts @@ -12,8 +12,8 @@ export { StyleguideAnswer, styleguidePrompts } from './prompts/styleguide'; export { isDevEnvironment, - openPackageJson, - writePackageJson, + openJsonFile, + writeJsonFile, getAllTemplates, getBaseTemplates, saveConfiguration, diff --git a/packages/create-sitecore-jss/src/common/processes/install.test.ts b/packages/create-sitecore-jss/src/common/processes/install.test.ts index 6bf316b66d..108dbd200c 100644 --- a/packages/create-sitecore-jss/src/common/processes/install.test.ts +++ b/packages/create-sitecore-jss/src/common/processes/install.test.ts @@ -10,7 +10,7 @@ import * as helpers from '../utils/helpers'; describe('install', () => { let run: SinonStub; let isDevEnvironment: SinonStub; - let openPackageJson: SinonStub; + let openJsonFile: SinonStub; let log: SinonStub; beforeEach(() => { @@ -21,7 +21,7 @@ describe('install', () => { afterEach(() => { run?.restore(); isDevEnvironment?.restore(); - openPackageJson?.restore(); + openJsonFile?.restore(); log?.restore(); }); @@ -94,7 +94,7 @@ describe('install', () => { describe('lintFix', () => { it('should run lint script', () => { const projectFolder = './some/path'; - openPackageJson = sinon.stub(helpers, 'openPackageJson').returns({ + openJsonFile = sinon.stub(helpers, 'openJsonFile').returns({ scripts: { lint: 'lint', }, @@ -116,7 +116,7 @@ describe('install', () => { it('should skip if lint script not defined', () => { const projectFolder = './some/path'; - openPackageJson = sinon.stub(helpers, 'openPackageJson').returns({ + openJsonFile = sinon.stub(helpers, 'openJsonFile').returns({ scripts: {}, }); @@ -129,7 +129,7 @@ describe('install', () => { it('should respect silent', () => { const projectFolder = './some/path'; const silent = true; - openPackageJson = sinon.stub(helpers, 'openPackageJson').returns({ + openJsonFile = sinon.stub(helpers, 'openJsonFile').returns({ scripts: { lint: 'lint', }, @@ -162,7 +162,7 @@ describe('install', () => { it('should run exec function', () => { const destination = './some/path'; - openPackageJson = sinon.stub(helpers, 'openPackageJson').returns({ + openJsonFile = sinon.stub(helpers, 'openJsonFile').returns({ scripts: { 'install-pre-push-hook': 'stub', }, @@ -178,7 +178,7 @@ describe('install', () => { it('should respect silent', () => { const destination = './some/path'; const silent = true; - openPackageJson = sinon.stub(helpers, 'openPackageJson').returns({ + openJsonFile = sinon.stub(helpers, 'openJsonFile').returns({ scripts: { 'install-pre-push-hook': 'stub', }, @@ -193,7 +193,7 @@ describe('install', () => { it('should skip if installPrePushHook script not defined', () => { const destination = './some/path'; - openPackageJson = sinon.stub(helpers, 'openPackageJson').returns({ + openJsonFile = sinon.stub(helpers, 'openJsonFile').returns({ scripts: {}, }); @@ -207,7 +207,7 @@ describe('install', () => { const destination = './some/path'; const error = new Error('some error'); execStub.yields(error); - openPackageJson = sinon.stub(helpers, 'openPackageJson').returns({ + openJsonFile = sinon.stub(helpers, 'openJsonFile').returns({ scripts: { 'install-pre-push-hook': 'stub', }, diff --git a/packages/create-sitecore-jss/src/common/processes/install.ts b/packages/create-sitecore-jss/src/common/processes/install.ts index 17fcc27789..d063c3c263 100644 --- a/packages/create-sitecore-jss/src/common/processes/install.ts +++ b/packages/create-sitecore-jss/src/common/processes/install.ts @@ -2,7 +2,7 @@ import { exec } from 'child_process'; import path from 'path'; import chalk from 'chalk'; import { run } from '../utils/cmd'; -import { isDevEnvironment, openPackageJson } from '../utils/helpers'; +import { isDevEnvironment, openJsonFile } from '../utils/helpers'; /** * Executes packages installation, depending on the environment @@ -87,5 +87,5 @@ export const installPrePushHook = async (destination: string, silent?: boolean) const getPackageJson = (projectFolder: string) => { const packagePath = path.join(projectFolder, 'package.json'); - return openPackageJson(packagePath); + return openJsonFile(packagePath); }; diff --git a/packages/create-sitecore-jss/src/common/processes/transform.test.ts b/packages/create-sitecore-jss/src/common/processes/transform.test.ts index 6b91bef4f0..cd95c6ae26 100644 --- a/packages/create-sitecore-jss/src/common/processes/transform.test.ts +++ b/packages/create-sitecore-jss/src/common/processes/transform.test.ts @@ -1,6 +1,6 @@ /* eslint-disable no-unused-expressions */ import fs from 'fs-extra'; -import path from 'path'; +import path, { sep } from 'path'; import chalk from 'chalk'; import inquirer from 'inquirer'; import ejs from 'ejs'; @@ -476,7 +476,7 @@ describe('transform', () => { let diffAndWriteFilesStub: SinonStub; let writeFileToPathStub: SinonStub; let transformFilenameStub: SinonStub; - let openPackageJsonStub: SinonStub; + let openJsonFileStub: SinonStub; let log: SinonStub; beforeEach(() => { @@ -495,7 +495,7 @@ describe('transform', () => { diffAndWriteFilesStub?.restore(); writeFileToPathStub?.restore(); transformFilenameStub?.restore(); - openPackageJsonStub?.restore(); + openJsonFileStub?.restore(); log?.restore(); }); @@ -663,7 +663,7 @@ describe('transform', () => { globSyncStub = sinon.stub(glob, 'sync').returns([file]); fsExistsSyncStub = sinon.stub(fs, 'existsSync').returns(true); - openPackageJsonStub = sinon.stub(helpers, 'openPackageJson').returns(currentPkg); + openJsonFileStub = sinon.stub(helpers, 'openJsonFile').returns(currentPkg); ejsRenderFileStub = sinon.stub(ejs, 'renderFile').returns(Promise.resolve(renderFileOutput)); mergeStub = sinon.stub(transform, 'merge').returns(mergedPkg); diffAndWriteFilesStub = sinon.stub(transform, 'diffAndWriteFiles'); @@ -693,6 +693,48 @@ describe('transform', () => { }); }); + it('should merge json file', async () => { + const templatePath = path.resolve('templates/next'); + const destinationPath = path.resolve('samples/next'); + const file = 'test.json'; + const renderFileOutput = '{ "one": 1, "two": 2}'; + const currentJson = { three: 3, four: 4 }; + const templateJson = JSON.parse(renderFileOutput); + const mergedPkg = { merged: true }; + + globSyncStub = sinon.stub(glob, 'sync').returns([file]); + fsExistsSyncStub = sinon.stub(fs, 'existsSync').returns(true); + openJsonFileStub = sinon.stub(helpers, 'openJsonFile').returns(currentJson); + ejsRenderFileStub = sinon.stub(ejs, 'renderFile').returns(Promise.resolve(renderFileOutput)); + mergeStub = sinon.stub(transform, 'merge').returns(mergedPkg); + diffAndWriteFilesStub = sinon.stub(transform, 'diffAndWriteFiles'); + + const answers = { + destination: destinationPath, + templates: [], + appPrefix: false, + force: false, + }; + + await transformFunc(templatePath, answers); + + expect(ejsRenderFileStub).to.have.been.calledOnceWith(path.join(templatePath, file), { + ...answers, + helper: { + isDev: false, + getPascalCaseName: helpers.getPascalCaseName, + getAppPrefix: helpers.getAppPrefix, + }, + }); + expect(mergeStub).to.have.been.calledOnceWith(currentJson, templateJson); + expect(openJsonFileStub).to.have.been.calledOnceWith(`${destinationPath}${sep}${file}`); + expect(diffAndWriteFilesStub).to.have.been.calledOnceWith({ + rendered: JSON.stringify(mergedPkg, null, 2), + pathToNewFile: path.join(destinationPath, file), + answers, + }); + }); + it('should concatenate .env file', async () => { const templatePath = path.resolve('templates/next'); const destinationPath = path.resolve('samples/next'); diff --git a/packages/create-sitecore-jss/src/common/processes/transform.ts b/packages/create-sitecore-jss/src/common/processes/transform.ts index f8034dc631..47fbf7eef8 100644 --- a/packages/create-sitecore-jss/src/common/processes/transform.ts +++ b/packages/create-sitecore-jss/src/common/processes/transform.ts @@ -8,7 +8,7 @@ import inquirer from 'inquirer'; import { getPascalCaseName, getAppPrefix, - openPackageJson, + openJsonFile, sortKeys, writeFileToPath, isDevEnvironment, @@ -282,13 +282,13 @@ export const transform = async ( continue; } - if (file.endsWith('package.json') && fs.existsSync(pathToNewFile)) { - // we treat package.json a bit differently - // read the current package.json and the template package.json (rendered with ejs) - const currentPkg = openPackageJson(pathToNewFile); - const templatePkg = JSON.parse(await renderFile(path.resolve(pathToTemplate), ejsData)); + if (file.endsWith('.json') && fs.existsSync(pathToNewFile)) { + // we treat a .json a bit differently + // read the current .json and the template .json (rendered with ejs) + const currentJson = openJsonFile(pathToNewFile); + const templateJson = JSON.parse(await renderFile(path.resolve(pathToTemplate), ejsData)); // merge them and set the result to str which will then go through diff - const merged = merge(currentPkg, templatePkg); + const merged = merge(currentJson, templateJson); str = JSON.stringify(merged, null, 2); } diff --git a/packages/create-sitecore-jss/src/common/test-data/test.json b/packages/create-sitecore-jss/src/common/test-data/test.json new file mode 100644 index 0000000000..e0a534276f --- /dev/null +++ b/packages/create-sitecore-jss/src/common/test-data/test.json @@ -0,0 +1,9 @@ +{ + "first": "test first", + "second": "test second", + "description": "Test package.json", + "third": { + "thirdOne": "tests third one" + }, + "array": ["one", "two"] +} \ No newline at end of file diff --git a/packages/create-sitecore-jss/src/common/utils/helpers.test.ts b/packages/create-sitecore-jss/src/common/utils/helpers.test.ts index 5621f4c651..5305fe2db6 100644 --- a/packages/create-sitecore-jss/src/common/utils/helpers.test.ts +++ b/packages/create-sitecore-jss/src/common/utils/helpers.test.ts @@ -6,8 +6,8 @@ import chalk from 'chalk'; import sinon, { SinonStub } from 'sinon'; import { getPascalCaseName, - openPackageJson, - writePackageJson, + openJsonFile, + writeJsonFile, sortKeys, getAllTemplates, getBaseTemplates, @@ -16,7 +16,7 @@ import { } from './helpers'; import { JsonObjectType } from '../processes/transform'; import testPackage from '../test-data/test.package.json'; -import rootPackage from '../../../package.json'; +import testJson from '../test-data/test.json'; import { Initializer } from '../Initializer'; import { InitializerFactory } from '../../InitializerFactory'; @@ -41,7 +41,7 @@ describe('helpers', () => { }); }); - describe('openPackageJson', () => { + describe('openJsonFile', () => { let log: SinonStub; afterEach(() => log?.restore()); @@ -49,7 +49,7 @@ describe('helpers', () => { it('should return package.json data using provided path', () => { const filePath = path.resolve('src', 'common', 'test-data', 'test.package.json'); - const result = openPackageJson(filePath); + const result = openJsonFile(filePath); expect(result).to.deep.equal(testPackage); }); @@ -59,7 +59,7 @@ describe('helpers', () => { const filePath = path.resolve('not', 'existing', 'path', 'package.json'); - const result = openPackageJson(filePath); + const result = openJsonFile(filePath); expect(result).to.equal(undefined); expect(log.calledTwice).to.equal(true); @@ -73,14 +73,35 @@ describe('helpers', () => { log.restore(); }); - it('should return package.json data from the root when path is not provided', () => { - const result = openPackageJson(); + it('should return json data using provided path', () => { + const filePath = path.resolve('src', 'common', 'test-data', 'test.json'); - expect(result).to.deep.equal(rootPackage); + const result = openJsonFile(filePath); + + expect(result).to.deep.equal(testJson); + }); + + it('should throw an error when the path to the package does not exist', () => { + log = sinon.stub(console, 'log'); + + const filePath = path.resolve('not', 'existing', 'path', 'package.json'); + + const result = openJsonFile(filePath); + + expect(result).to.equal(undefined); + expect(log.calledTwice).to.equal(true); + expect(log.getCall(0).args[0]).to.equal( + chalk.red(`The following error occurred while trying to read ${filePath}:`) + ); + expect(log.getCall(1).args[0]).to.equal( + chalk.red(`Error: ENOENT: no such file or directory, open '${filePath}'`) + ); + + log.restore(); }); }); - describe('writePackageJson', () => { + describe('writeJsonFile', () => { let log: SinonStub; let writeFileSync: SinonStub; @@ -97,19 +118,12 @@ describe('helpers', () => { bar: { baz: 'baz' }, }; - writePackageJson(data); - - expect(writeFileSync.calledOnce).to.equal(true); - expect(writeFileSync.getCall(0).args[1]).to.equal(JSON.stringify(data, null, 2)); - }); - - it('should use default path when path is not provided', () => { - writeFileSync = sinon.stub(fs, 'writeFileSync'); + const filePath = path.resolve('src', 'common', 'test-data', 'test.package.json'); - writePackageJson({}); + writeJsonFile(data, filePath); expect(writeFileSync.calledOnce).to.equal(true); - expect(writeFileSync.getCall(0).args[0]).to.equal(path.resolve('./package.json')); + expect(writeFileSync.getCall(0).args[1]).to.equal(JSON.stringify(data, null, 2)); }); it('should use provided path', () => { @@ -117,7 +131,7 @@ describe('helpers', () => { const filePath = path.resolve('src', 'common', 'test-data', 'test.package.json'); - writePackageJson({}, filePath); + writeJsonFile({}, filePath); expect(writeFileSync.calledOnce).to.equal(true); expect(writeFileSync.getCall(0).args[0]).to.equal(filePath); @@ -128,7 +142,7 @@ describe('helpers', () => { const filePath = path.resolve('not', 'existing', 'path', 'package.json'); - writePackageJson({}, filePath); + writeJsonFile({}, filePath); expect(log.calledTwice).to.equal(true); expect(log.getCall(0).args[0]).to.equal( @@ -154,7 +168,7 @@ describe('helpers', () => { it('should save configuration', () => { writeFileSync = sinon.stub(fs, 'writeFileSync'); const pkgPath = path.resolve('src', 'common', 'test-data', 'test.package.json'); - const pkg = openPackageJson(pkgPath); + const pkg = openJsonFile(pkgPath); const templates = ['nextjs', 'nextjs-styleguide']; saveConfiguration(templates, pkgPath); diff --git a/packages/create-sitecore-jss/src/common/utils/helpers.ts b/packages/create-sitecore-jss/src/common/utils/helpers.ts index f0521304e4..2c99f0cf60 100644 --- a/packages/create-sitecore-jss/src/common/utils/helpers.ts +++ b/packages/create-sitecore-jss/src/common/utils/helpers.ts @@ -1,6 +1,6 @@ import chalk from 'chalk'; import fs from 'fs'; -import path, { sep } from 'path'; +import path from 'path'; import { InitializerFactory } from '../../InitializerFactory'; import { JsonObjectType } from '../processes/transform'; @@ -26,32 +26,30 @@ export const getPascalCaseName = (name: string): string => { }; /** - * Provides `package.json` data - * @param {string} [pkgPath] path to `package.json`. Default is './package.json'. - * @returns `package.json` data + * Provides json data from a file + * @param {string} jsonFilePath path to the .json file. + * @returns json data */ -export const openPackageJson = (pkgPath?: string) => { - const filePath = path.resolve(pkgPath ?? `.${sep}package.json`); +export const openJsonFile = (jsonFilePath: string) => { try { - const data = fs.readFileSync(filePath, 'utf8'); + const data = fs.readFileSync(jsonFilePath, 'utf8'); return data ? JSON.parse(data) : undefined; } catch (error) { - console.log(chalk.red(`The following error occurred while trying to read ${filePath}:`)); + console.log(chalk.red(`The following error occurred while trying to read ${jsonFilePath}:`)); console.log(chalk.red(error)); } }; /** - * Creates `package.json` file and inserts provided data - * @param {Object} data data to be written into package.json - * @param {string} [pkgPath] a path to a file. Default is './package.json'. + * Creates a .json file and inserts provided data + * @param {Object} data data to be written into the .json file + * @param {string} jsonFilePath a path to a file. */ -export const writePackageJson = (data: { [key: string]: unknown }, pkgPath?: string) => { - const filePath = path.resolve(pkgPath ?? `.${sep}package.json`); +export const writeJsonFile = (data: { [key: string]: unknown }, jsonFilePath: string) => { try { - fs.writeFileSync(filePath, JSON.stringify(data, null, 2), { encoding: 'utf8' }); + fs.writeFileSync(jsonFilePath, JSON.stringify(data, null, 2), { encoding: 'utf8' }); } catch (error) { - console.log(chalk.red(`The following error occurred while trying to write ${filePath}:`)); + console.log(chalk.red(`The following error occurred while trying to write ${jsonFilePath}:`)); console.log(chalk.red(error)); } }; @@ -61,10 +59,10 @@ export const writePackageJson = (data: { [key: string]: unknown }, pkgPath?: str * @param {string[]} templates templates applied to the sample * @param {string} [pkgPath] path to the package.json */ -export const saveConfiguration = (templates: string[], pkgPath?: string) => { - const pkg = openPackageJson(pkgPath); +export const saveConfiguration = (templates: string[], pkgPath: string) => { + const pkg = openJsonFile(pkgPath); - writePackageJson({ ...pkg, config: { ...pkg.config, templates } }, pkgPath); + writeJsonFile({ ...pkg, config: { ...pkg.config, templates } }, pkgPath); }; export const sortKeys = (obj: JsonObjectType) => { diff --git a/packages/create-sitecore-jss/src/initializers/angular-sxp/index.ts b/packages/create-sitecore-jss/src/initializers/angular-sxp/index.ts index 72ff3de906..939515edd3 100644 --- a/packages/create-sitecore-jss/src/initializers/angular-sxp/index.ts +++ b/packages/create-sitecore-jss/src/initializers/angular-sxp/index.ts @@ -1,11 +1,5 @@ import path, { sep } from 'path'; -import { - Initializer, - openPackageJson, - transform, - DEFAULT_APPNAME, - ClientAppArgs, -} from '../../common'; +import { Initializer, openJsonFile, transform, DEFAULT_APPNAME, ClientAppArgs } from '../../common'; import { InitializerResults } from '../../common/Initializer'; export default class AngularSxpInitializer implements Initializer { @@ -14,7 +8,7 @@ export default class AngularSxpInitializer implements Initializer { } async init(args: ClientAppArgs) { - const pkg = openPackageJson(`${args.destination}${sep}package.json`); + const pkg = openJsonFile(`${args.destination}${sep}package.json`); const mergedArgs = { ...args, diff --git a/packages/create-sitecore-jss/src/initializers/angular-xmcloud/index.ts b/packages/create-sitecore-jss/src/initializers/angular-xmcloud/index.ts index 9335c3683f..9e2a1e3a13 100644 --- a/packages/create-sitecore-jss/src/initializers/angular-xmcloud/index.ts +++ b/packages/create-sitecore-jss/src/initializers/angular-xmcloud/index.ts @@ -1,11 +1,5 @@ import path, { sep } from 'path'; -import { - ClientAppArgs, - DEFAULT_APPNAME, - Initializer, - transform, - openPackageJson, -} from '../../common'; +import { ClientAppArgs, DEFAULT_APPNAME, Initializer, transform, openJsonFile } from '../../common'; import { InitializerResults } from '../../common/Initializer'; export default class AngularXmCloudInitializer implements Initializer { @@ -14,7 +8,7 @@ export default class AngularXmCloudInitializer implements Initializer { } async init(args: ClientAppArgs) { - const pkg = openPackageJson(`${args.destination}${sep}package.json`); + const pkg = openJsonFile(`${args.destination}${sep}package.json`); const mergedArgs = { ...args, diff --git a/packages/create-sitecore-jss/src/initializers/nextjs-multisite/index.ts b/packages/create-sitecore-jss/src/initializers/nextjs-multisite/index.ts index af33060871..cdd516875a 100644 --- a/packages/create-sitecore-jss/src/initializers/nextjs-multisite/index.ts +++ b/packages/create-sitecore-jss/src/initializers/nextjs-multisite/index.ts @@ -1,11 +1,5 @@ import path, { sep } from 'path'; -import { - Initializer, - openPackageJson, - transform, - DEFAULT_APPNAME, - ClientAppArgs, -} from '../../common'; +import { Initializer, openJsonFile, transform, DEFAULT_APPNAME, ClientAppArgs } from '../../common'; export default class NextjsMultisiteInitializer implements Initializer { get isBase(): boolean { @@ -13,7 +7,7 @@ export default class NextjsMultisiteInitializer implements Initializer { } async init(args: ClientAppArgs) { - const pkg = openPackageJson(`${args.destination}${sep}package.json`); + const pkg = openJsonFile(`${args.destination}${sep}package.json`); const mergedArgs = { ...args, diff --git a/packages/create-sitecore-jss/src/initializers/nextjs-styleguide-tracking/index.ts b/packages/create-sitecore-jss/src/initializers/nextjs-styleguide-tracking/index.ts index 81fe0dd663..a7cbc8cfea 100644 --- a/packages/create-sitecore-jss/src/initializers/nextjs-styleguide-tracking/index.ts +++ b/packages/create-sitecore-jss/src/initializers/nextjs-styleguide-tracking/index.ts @@ -1,7 +1,7 @@ import path, { sep } from 'path'; import { Initializer, - openPackageJson, + openJsonFile, transform, DEFAULT_APPNAME, ClientAppArgs, @@ -15,7 +15,7 @@ export default class NextjsStyleguideInitializer implements Initializer { } async init(args: ClientAppArgs) { - const pkg = openPackageJson(`${args.destination}${sep}package.json`); + const pkg = openJsonFile(`${args.destination}${sep}package.json`); const mergedArgs = { ...args, diff --git a/packages/create-sitecore-jss/src/initializers/nextjs-styleguide/index.ts b/packages/create-sitecore-jss/src/initializers/nextjs-styleguide/index.ts index ae607d10fc..6171fc69a4 100644 --- a/packages/create-sitecore-jss/src/initializers/nextjs-styleguide/index.ts +++ b/packages/create-sitecore-jss/src/initializers/nextjs-styleguide/index.ts @@ -3,7 +3,7 @@ import path, { sep } from 'path'; import inquirer from 'inquirer'; import { Initializer, - openPackageJson, + openJsonFile, transform, DEFAULT_APPNAME, styleguidePrompts, @@ -20,7 +20,7 @@ export default class NextjsStyleguideInitializer implements Initializer { } async init(args: NextjsStyleguideArgs) { - const pkg = openPackageJson(`${args.destination}${sep}package.json`); + const pkg = openJsonFile(`${args.destination}${sep}package.json`); const answers = await inquirer.prompt(styleguidePrompts, args); diff --git a/packages/create-sitecore-jss/src/initializers/nextjs-sxa/index.ts b/packages/create-sitecore-jss/src/initializers/nextjs-sxa/index.ts index 7a7d6cad64..bf8b897364 100644 --- a/packages/create-sitecore-jss/src/initializers/nextjs-sxa/index.ts +++ b/packages/create-sitecore-jss/src/initializers/nextjs-sxa/index.ts @@ -1,7 +1,7 @@ import path, { sep } from 'path'; import { Initializer, - openPackageJson, + openJsonFile, transform, DEFAULT_APPNAME, ClientAppArgs, @@ -14,7 +14,7 @@ export default class NextjsSxaInitializer implements Initializer { } async init(args: ClientAppArgs) { - const pkg = openPackageJson(`${args.destination}${sep}package.json`); + const pkg = openJsonFile(`${args.destination}${sep}package.json`); // TODO: prompts for SXA // const answers = await prompt(styleguidePrompts, args); diff --git a/packages/create-sitecore-jss/src/initializers/nextjs-xmcloud/index.ts b/packages/create-sitecore-jss/src/initializers/nextjs-xmcloud/index.ts index 35a9c71406..52307e8a26 100644 --- a/packages/create-sitecore-jss/src/initializers/nextjs-xmcloud/index.ts +++ b/packages/create-sitecore-jss/src/initializers/nextjs-xmcloud/index.ts @@ -1,7 +1,7 @@ import path, { sep } from 'path'; import { Initializer, - openPackageJson, + openJsonFile, transform, isDevEnvironment, DEFAULT_APPNAME, @@ -16,7 +16,7 @@ export default class NextjsXMCloudInitializer implements Initializer { } async init(args: ClientAppArgs) { - const pkg = openPackageJson(`${args.destination}${sep}package.json`); + const pkg = openJsonFile(`${args.destination}${sep}package.json`); const mergedArgs = { ...args, diff --git a/packages/create-sitecore-jss/src/initializers/nextjs/index.ts b/packages/create-sitecore-jss/src/initializers/nextjs/index.ts index ad9fe98826..18144fa083 100644 --- a/packages/create-sitecore-jss/src/initializers/nextjs/index.ts +++ b/packages/create-sitecore-jss/src/initializers/nextjs/index.ts @@ -6,8 +6,8 @@ import { Initializer, transform, isDevEnvironment, - openPackageJson, - writePackageJson, + openJsonFile, + writeJsonFile, } from '../../common'; import { removeDevDependencies } from './remove-dev-dependencies'; import { NextjsArgs } from './args'; @@ -90,11 +90,11 @@ export default class NextjsInitializer implements Initializer { !addInitializers.includes('nextjs-styleguide') && !args.templates.includes('nextjs-styleguide') ) { - const pkg = openPackageJson(pkgPath); + const pkg = openJsonFile(pkgPath); pkg.scripts.bootstrap = pkg.scripts.bootstrap.replace(' && graphql-let', ''); - writePackageJson(pkg, pkgPath); + writeJsonFile(pkg, pkgPath); } const response = { diff --git a/packages/create-sitecore-jss/src/initializers/nextjs/remove-dev-dependencies.ts b/packages/create-sitecore-jss/src/initializers/nextjs/remove-dev-dependencies.ts index 0f5e3f0751..fe9bc0cba0 100644 --- a/packages/create-sitecore-jss/src/initializers/nextjs/remove-dev-dependencies.ts +++ b/packages/create-sitecore-jss/src/initializers/nextjs/remove-dev-dependencies.ts @@ -1,14 +1,14 @@ import fs from 'fs'; import path from 'path'; -import { openPackageJson, writePackageJson } from '../../common'; +import { openJsonFile, writeJsonFile } from '../../common'; export const removeDevDependencies = (projectPath: string) => { // remove `next-transpile-modules` dependency const packagePath = path.join(projectPath, 'package.json'); - const pkg = openPackageJson(packagePath); + const pkg = openJsonFile(packagePath); if (pkg?.devDependencies['next-transpile-modules']) { delete pkg.devDependencies['next-transpile-modules']; - writePackageJson(pkg, packagePath); + writeJsonFile(pkg, packagePath); } // remove monorepo next.config.js plugin diff --git a/packages/create-sitecore-jss/src/initializers/react/index.ts b/packages/create-sitecore-jss/src/initializers/react/index.ts index 75a93caf88..9eba8e4ef5 100644 --- a/packages/create-sitecore-jss/src/initializers/react/index.ts +++ b/packages/create-sitecore-jss/src/initializers/react/index.ts @@ -4,9 +4,9 @@ import inquirer from 'inquirer'; import { Initializer, isDevEnvironment, - openPackageJson, + openJsonFile, transform, - writePackageJson, + writeJsonFile, removeFile, } from '../../common'; import { prompts, ReactAnswer } from './prompts'; @@ -30,7 +30,7 @@ export default class ReactInitializer implements Initializer { const isDev = isDevEnvironment(args.destination); const pkgPath = path.resolve(`${args.destination}${sep}package.json`); - const pkg = openPackageJson(pkgPath); + const pkg = openJsonFile(pkgPath); if (isDev) { Object.entries(pkg.scripts).forEach(([key, value]) => { @@ -41,7 +41,7 @@ export default class ReactInitializer implements Initializer { pkg.scripts[key] = value.replace('react-scripts', 'react-app-rewired'); }); - writePackageJson(pkg, pkgPath); + writeJsonFile(pkg, pkgPath); } else { // Don't need to rewire anything if we are not in the dev env delete pkg.devDependencies['react-app-rewired']; @@ -49,7 +49,7 @@ export default class ReactInitializer implements Initializer { // Remove webpack overrides removeFile(path.resolve(`${args.destination}${sep}config-overrides.js`)); - writePackageJson(pkg, pkgPath); + writeJsonFile(pkg, pkgPath); } const response = { diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/angular.json b/packages/create-sitecore-jss/src/templates/angular-xmcloud/angular.json new file mode 100644 index 0000000000..3c46830d1a --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/angular.json @@ -0,0 +1,34 @@ +{ + "projects": { + "<%- appName %>": { + "architect": { + "build": { + "options": { + "styles": [ + "node_modules/bootstrap/dist/css/bootstrap.min.css", + "src/styles.css", + "src/assets/styles/main.scss" + ], + "stylePreprocessorOptions": { + "includePaths": ["src/assets/styles", "node_modules"] + } + } + }, + "test": { + "options": { + "styles": ["src/styles.css", "src/assets/styles/main.scss"], + "stylePreprocessorOptions": { + "includePaths": ["src/assets/styles", "node_modules"] + } + } + } + } + } + }, + "schematics": { + "@schematics/angular:component": { + "prefix": "app", + "style": "scss" + } + } +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/package.json b/packages/create-sitecore-jss/src/templates/angular-xmcloud/package.json index 7f82988dd5..2f01f8b4fd 100644 --- a/packages/create-sitecore-jss/src/templates/angular-xmcloud/package.json +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/package.json @@ -1,10 +1,15 @@ -{ - "config": { - "sitecoreDistPath": "/dist" - }, - "scripts": { - "postbuild:server": "npm-run-all --serial prepare:build prepare:proxy-build", - "prepare:build": "move-cli ./dist/main.js ./dist/server.bundle.js", - "prepare:proxy-build": "ts-node --project src/tsconfig.webpack-server.json ./scripts/proxy-build.ts" - } -} +{ + "config": { + "sitecoreDistPath": "/dist" + }, + "scripts": { + "postbuild:server": "npm-run-all --serial prepare:build prepare:proxy-build", + "prepare:build": "move-cli ./dist/main.js ./dist/server.bundle.js", + "prepare:proxy-build": "ts-node --project src/tsconfig.webpack-server.json ./scripts/proxy-build.ts" + }, + "dependencies": { + "font-awesome": "^4.7.0", + "sass": "^1.52.3", + "sass-alias": "^1.0.5" + } +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/basic/_component.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/basic/_component.scss new file mode 100644 index 0000000000..6565ab3cb8 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/basic/_component.scss @@ -0,0 +1,48 @@ +.component-content { + @include respond-to(mobile-large) { + .row { + padding: 0; + margin: 0; + } + } +} +@include respond-to(mobile-large) { + .row { + margin: 0; + padding: 0; + > * { + padding: 0; + margin: 0; + } + } +} + +.hero-banner { + .component-content { + background-position: center; + background-repeat: no-repeat; + background-size: cover; + height: 800px; + + @include respond-to(mobile-large) { + height: 300px; + } + } + .sc-image-wrapper { + opacity: 0; + } + &.scEnabledChrome { + &.hero-banner-empty { + .sc-image-wrapper { + display: block; + width: 100%; + + .scEmptyImage { + max-height: 800px; + max-width: 100%; + width: 100%; + } + } + } + } +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/basic/_container.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/basic/_container.scss new file mode 100644 index 0000000000..5f32933671 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/basic/_container.scss @@ -0,0 +1,64 @@ +@import "sass/abstracts/mixins"; +@import "variables"; + +body { + font-family: Roboto; + color: $main-color; +} + + +@media (min-width: 1400px) { + .container { + max-width: 1250px; + } +} + +main { + .main-header { + margin-top: 55px; + margin-bottom: 30px; + + @include respond-to(mobile-large) { + margin-bottom: 0; + } + + h4 { + font-size: $text-size-50; + font-weight: 500; + line-height: 70px; + } + } + + .main-news-header { + margin-top: 60px; + + h2 { + font-size: $text-size-36; + line-height: 43px; + } + } + + @include respond-to(mobile-large) { + padding-top: 0; + margin-bottom: 0; + + .main-header { + margin-top: 10px; + + h4 { + font-size: $text-size-24; + line-height: 32px; + } + } + + .main-news-header { + padding-bottom: 35px; + + h2 { + margin-top: 0; + font-size: $text-size-18; + line-height: 22px; + } + } + } +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/basic/_fonts.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/basic/_fonts.scss new file mode 100644 index 0000000000..94199ec98a --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/basic/_fonts.scss @@ -0,0 +1,3 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap'); +/* FontAwesome */ +@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'); diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/basic/_footer.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/basic/_footer.scss new file mode 100644 index 0000000000..179cc20de3 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/basic/_footer.scss @@ -0,0 +1,31 @@ +@import "sass/abstracts/mixins"; +@import "variables"; + +footer { + @include respond-to(mobile-large) { + padding-top: 0; + } + .container-dark-background { + background-color: #262626; + } + + .contacts { + font-size: $text-size-14; + + a { + color: $text-white; + } + + p, span { + color: $text-white; + } + } + + .indent-inner { + padding: 65px; + + @include respond-to(mobile-large) { + padding: 40px 0; + } + } +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/basic/_header.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/basic/_header.scss new file mode 100644 index 0000000000..e4d86c107b --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/basic/_header.scss @@ -0,0 +1,49 @@ +@import "sass/abstracts/vars/colors"; +@import "sass/abstracts/mixins"; +@import "variables"; + +.prod-mode { + #header { + display: flex; + + @include respond-to(mobile-large) { + padding-bottom: 0; + flex-direction: column-reverse; + } + } +} + +header { + #header { + .bs-title { + padding-left: 50px; + + h1 { + font-size: $text-size-24; + font-weight: 600; + line-height: 18px; + padding-top: 40px; + margin: 0; + } + } + + @include respond-to(mobile-large) { + padding-bottom: 0; + padding-top: 0; + flex-direction: column-reverse; + + .bs-title { + padding-left: 0; + text-align: center; + margin-top: -5px; + + h1 { + font-weight: 500; + line-height: 29px; + padding-top: 0; + margin-bottom: 10px; + } + } + } + } +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/basic/_navigation.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/basic/_navigation.scss new file mode 100644 index 0000000000..acda014f5a --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/basic/_navigation.scss @@ -0,0 +1,150 @@ +@import "sass/abstracts/vars"; +@import "variables"; + +$hamburger-width: 28px; +$hamburger-height: 18px; +$border-size: 6px; +$hamburger-margin: 18px; + +.navigation { + .menu-mobile-navigate-wrapper { + width: 100%; + } +} + +.navigation.navigation-horizontal { + width: 100%; + padding-right: 70px; + margin-top: -15px; + + .menu-mobile-navigate { + display: none; + } + + @include respond-to(mobile-large) { + padding-right: 0; + } + + .component-content { + display: inline-block; + + @include respond-to(mobile-large) { + display: none; + } + + ul.clearfix { + list-style: none; + } + .level0 { + display: flex; + } + + .level0, .level1 { + float: left; + margin-left: 30px; + + >.navigation-title { + >a { + border-width: 0; + font-size: $text-size-14; + font-weight: 400; + } + } + } + } + + @include respond-to(mobile-large) { + .component-content { + display: none; + position: fixed; + top: 0; + bottom: 0; + right: 0; + left: 0; + background-color: $bg-black-active; + z-index: 1; + + * { + text-align: center !important; + } + + nav { + padding-top: 110px; + + .level0 { + display: block; + } + } + + ul { + margin: 0; + padding: 0; + } + + .level0, .level1 { + float: unset; + margin-left: 0; + >.navigation-title { + >a { + font-size: $text-size-30; + line-height: 90px; + >span { + color: $text-white; + } + } + } + } + } + + .menu-mobile-navigate-wrapper { + .menu-mobile-navigate { + display: inline-block; + z-index: 2; + position: absolute; + right: $hamburger-margin; + top: $hamburger-margin; + height: $hamburger-width; + width: $hamburger-width; + opacity: 0; + + &:checked ~ { + .menu-humburger { + &::before { + content: "\00d7"; + color: $text-basic-active; + font-size: $text-size-48; + position: fixed; + top: 0; + right: 0; + margin-top: calc($hamburger-margin + ($hamburger-margin / 2)); + margin-right: $hamburger-margin; + line-height: 0; + border: 0; + } + } + + .component-content { + position: fixed; + display: inline-block; + } + } + } + + .menu-humburger { + &::before { + content: ""; + width: $hamburger-width; + height: $hamburger-height; + margin-right: $hamburger-margin; + margin-top: calc($hamburger-margin + ($hamburger-margin / 2)) + 8px; + display: block; + border-top: 6px solid $bg-black; + border-bottom: 6px solid $bg-black; + float: right; + z-index: 99; + cursor: pointer; + } + } + } + } +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/basic/_promo.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/basic/_promo.scss new file mode 100644 index 0000000000..d13160a2dd --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/basic/_promo.scss @@ -0,0 +1,58 @@ +@import "sass/abstracts/vars"; +@import "sass/abstracts/mixins"; +/**PROMO**/ + +.promo { + &.main-promo-no-border { + padding-left: 0; + padding-right: 0; + padding-bottom: 0; + margin-bottom: 80px; + + @include respond-to(mobile-large) { + margin-bottom: 0; + } + + >.component-content { + border: 0; + max-width: 583px; + margin-right: 50px; + + > div { + padding-bottom: 0; + } + + @include respond-to(mobile-large) { + max-width: 100%; + margin-right: 0; + } + + .promo-text { + .field-promotext { + font-size: 14px; + + h3 { + font-size: $text-size-18; + margin: 15px 0; + + @include respond-to(mobile-large) { + margin: 10px 0; + } + } + p { + margin: 10px 0; + } + } + } + @include respond-to(mobile-large) { + > div { + padding: 0; + } + + .promo-text { + padding: 15px 30px 5px 30px; + } + } + } + } +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/basic/_rich-text.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/basic/_rich-text.scss new file mode 100644 index 0000000000..df8a5894b6 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/basic/_rich-text.scss @@ -0,0 +1,11 @@ +@import "sass/abstracts/vars"; +@import "variables"; + +.rich-text { + font-size: $text-size-16; + + @include respond-to(mobile-large) { + padding: 0 30px 10px 30px; + font-size: $text-size-14; + } +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/basic/_variables.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/basic/_variables.scss new file mode 100644 index 0000000000..2bff4a88ee --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/basic/_variables.scss @@ -0,0 +1,10 @@ +$text-size-14: 14px; +$text-size-16: 16px; +$text-size-18: 18px; +$text-size-24: 24px; +$text-size-30: 30px; +$text-size-36: 36px; +$text-size-48: 48px; +$text-size-50: 50px; + +$main-color: #27272A; \ No newline at end of file diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/basic/main.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/basic/main.scss new file mode 100644 index 0000000000..37318b8ce1 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/basic/main.scss @@ -0,0 +1,8 @@ +@import "fonts"; +@import "container"; +@import "header"; +@import "promo"; +@import "navigation"; +@import "component"; +@import "rich-text"; +@import "footer"; diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/main.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/main.scss new file mode 100644 index 0000000000..67333e3fcd --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/main.scss @@ -0,0 +1,4 @@ +@import "basic/fonts"; +@import "bootstrap/scss/bootstrap"; +@import "sass/main.scss"; +@import "basic/main.scss"; diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/_app.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/_app.scss new file mode 100644 index 0000000000..2d80a9616f --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/_app.scss @@ -0,0 +1,103 @@ +html { + font-size: 62.5%; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + margin-bottom: 0px; + height: auto !important; +} + +body { + @include opensans-font-stack(); + position: relative; + overflow: auto; + color: $text-basic; + font-size: 16px; + line-height: 1.5; + background: $page-bg; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + height: auto !important; + &.on-page-editor { + background: $page-bg-editor !important; + } +} + +a { + color: $text-basic; + cursor: pointer; + font-size: 0.85em; + &:hover { + color: $text-basic-active; + } +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: bold; +} + +h1 { + font-size: 2em; +} + +h2 { + font-size: 1.5em; +} + +h3 { + font-size: 1.2em; +} + +h4 { + font-size: 1em; +} + +h5 { + font-size: 0.83em; +} + +h6 { + font-size: 0.67em; +} + +ul li { + list-style-type: none; +} + +.xa-variable { + border: 0px; + padding: 1px; + margin: 0px; + background-color: #ebebe4; + color: #545454; + user-select: none; + pointer-events: none; +} + +//Navigation Bar fix +#breadcrumbMenuSubcontrol_context_menu * { + box-sizing: initial; +} + +//End navigation bar fix +.menu-mobile-navigate { + display: none; +} + +#header, #content, #footer, .sc-jss-empty-placeholder { + width: 100%; + display: flex; + flex-wrap: wrap; + position: relative; +} + +.sc-jss-placeholder-error { + background: #ff0000; + outline: 5px solid #e36565; + padding: 10px; + color:#fff; + max-width: 500px; +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/abstracts/_functions.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/abstracts/_functions.scss new file mode 100644 index 0000000000..9c094af710 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/abstracts/_functions.scss @@ -0,0 +1,8 @@ +@function headings($from:1, $to:6) { + @if $from==$to { + @return 'h#{$from}'; + } + @else { + @return 'h#{$from},'+headings($from+1, $to); + } +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/abstracts/_mixins.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/abstracts/_mixins.scss new file mode 100644 index 0000000000..83670c8a56 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/abstracts/_mixins.scss @@ -0,0 +1,121 @@ +@import "vars"; + +/* breakpoints */ + +$break-desktop: 1024px; +$break-mobile: 380px; +$break-mobile-horizontal: 640px; +$break-mobile-large: 992px; +@mixin wrapper() { + max-width: 960px; + margin: 0 auto !important; +} +@mixin clearfix { + &:after { + content: ""; + display: table; + clear: both; + } +} +@mixin headings($from: 1, $to: 6) { + @for $i from $from through $to { + h#{$i} { + @content + } + } +} +@mixin font-size($sizeValue: 1.6) { + font-size: ($sizeValue * 10) + px; + font-size: $sizeValue + rem; +} + @mixin proxima-font($weight:semibold) { + @if($weight==semibold) { + font-family: "ProximaNova-Semibold", arial, helvetica, sans-serif; + } + @else if($weight==light) { + font-family: "ProximaNova-Light", arial, helvetica, sans-serif; + } + } +@mixin opensans-font-stack() { + font-family: "Open Sans", Helvetica, Verdana, Tahoma, sans-serif; +} +@mixin loading-gif() { + background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiBmaWxsPSJibGFjayI+DQogIDxwYXRoICBvcGFjaXR5PSIuMjUiIGQ9Ik0xNiAwIEExNiAxNiAwIDAgMCAxNiAzMiBBMTYgMTYgMCAwIDAgMTYgMCBNMTYgNCBBMTIgMTIgMCAwIDEgMTYgMjggQTEyIDEyIDAgMCAxIDE2IDQiLz4NCiAgPHBhdGggZmlsbD0nIzFhODBiNicgZD0iTTE2IDAgQTE2IDE2IDAgMCAxIDMyIDE2IEwyOCAxNiBBMTIgMTIgMCAwIDAgMTYgNHoiPg0KICAgIDxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0icm90YXRlIiBmcm9tPSIwIDE2IDE2IiB0bz0iMzYwIDE2IDE2IiBkdXI9IjAuOHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICA8L3BhdGg+DQo8L3N2Zz4NCg==); + background-position: center center; + background-repeat: no-repeat; +} +@mixin respond-to($media) { + @if $media==mobile { + @media only screen and (max-width: $break-mobile) { + @content; + } + } + @else if $media==mobile-horizontal { + @media only screen and (max-width: $break-mobile-horizontal - 1) { + @content; + } + } + @else if $media==mobile-large { + @media only screen and (max-width: $break-mobile-large) { + @content; + } + } + @else if $media==tablet { + @media only screen and (min-width: $break-mobile + 1) and (max-width: $break-desktop - 1) { + @content; + } + } + @else if $media==all-mobile { + @media only screen and (max-width: $break-desktop - 1) { + @content; + } + } + @else if $media==desktop { + @media only screen and (min-width: $break-desktop) { + @content; + } + } +} +@mixin border-basic($position:all, $border-color:$border-gray, $border-width:1px) { + @if($position!=all) { + border-#{$position}-width: $border-width; + border-#{$position}-style: solid; + border-#{$position}-color: $border-color; + } + @else { + border-width: $border-width; + border-style: solid; + border-color: $border-color; + } +} +@mixin fixed-bg($pos, $min-height:240px) { + background-position: $pos; + background-attachment: fixed; + min-height: $min-height; +} +@mixin linear-gradient($direction, $color-stops...) { + // Direction has been omitted and happens to be a color-stop + @if is-direction($direction)==false { + $color-stops: $direction, $color-stops; + $direction: 180deg; + } + background: nth(nth($color-stops, 1), 1); + background: -webkit-linear-gradient(legacy-direction($direction), $color-stops); + background: linear-gradient($direction, $color-stops); +} +@mixin default-link-button { + @include border-basic(); + @include font-size(1.2); + display: inline-block; + vertical-align: middle; + box-sizing: border-box; + margin: 5px 0; + padding: 10px 15px; + text-align: center; + text-decoration: none; + font-weight: bold; + &:hover { + color: $text-basic; + background: $bg-light-gray; + } +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/abstracts/_vars.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/abstracts/_vars.scss new file mode 100644 index 0000000000..8d3e66eec4 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/abstracts/_vars.scss @@ -0,0 +1,3 @@ +@import "vars/colors"; +@import "vars/margins"; +@import "vars/fontSizes"; diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/abstracts/vars/_colors.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/abstracts/vars/_colors.scss new file mode 100644 index 0000000000..b08847d7b0 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/abstracts/vars/_colors.scss @@ -0,0 +1,283 @@ +//Backgrounds colors +$bg-transparent:transparent !default; +$bg-basic-color:#FFFFFF !default; +$bg-basic-color-active: #cccccc !default; +$bg-light-gray: #f7f7f7 !default; +$bg-light-gray-active: #dadada !default; +$bg-blue:#89C6CC; +$bg-blue-active: #15909c !default; +$bg-submenu:#edebeb !default; +$bg-submenu-active:#f6f6f6 !default; +$bg-black:#000; +$bg-black-active:#3d3d3d; +$bg-dark-gray: #262626; +//Text colors +$text-white:#fff !default; +$text-heading-color: #222 !default; +$text-basic:#747474 !default; +$text-basic-active:#878787 !default; +$text-blue:#89C6CC !default; +$text-blue-active:#15909c !default; +$text-submenu-active: #222 !default; +$text-disabled: #aaa !default; +$text-black: #000 !default; +$text-red:#de232f; +$text-gray: #262626; +//Border colors +$border-gray: #d2d2d2 !default; +$border-white: #ffffff !default; +$border-basic-color: #89C6CC !default; +$border-basic-active:#15909c !default; +$border-nav-submenu:#e1e1e1; +//Styles for each component separately +//Accordion +$accordion-header-bg: transparent; +$accordion-header-bg-active: transparent; +$accordion-toggled-bg: transparent; +$accordion-header-border: $border-gray; +//Breadcrumb +$breadcrumb-dropdown-bg:$bg-basic-color; +$breadcrumb-dropdown-bg-active:$bg-blue; +$breadcrumb-dropdown-text-active:$text-white; +$breadcrumb-bg:transparent; +$breadcrumb-color:$text-basic; +$breadcrumb-color-active:$text-blue-active; +//Buttons colors +$btn-green-light: #a0ce4e; +$btn-green: #92be43; +$btn-red-active: #c34e30; +$btn-red: #bc4526; +//Carousel +$carousel-bg:$bg-basic-color; +$carousel-nav:$text-black; +$carousel-nav-active:$text-basic-active; +$carousel-nav-border:$border-basic-color; +//Container component +$container-title-row-bg: $bg-light-gray; +//Event List +$event-list-bg:transparent; +$event-list-item-bg:$bg-basic-color; +$event-list-item-color:$text-basic; +$event-list-title-border:$border-basic-color; +//Calendar +$calendar-bg:$bg-basic-color; +$calendar-header-bg:$bg-basic-color-active; +$calendar-day-color-active:$text-white; +$calendar-title-color:$text-white; +//Feed +$feed-bg:transparent; +$feed-item-bg:transparent; +//Field Editor +$field-editor-bg:transparent; +$field-editor-table-border:$bg-light-gray; +$field-editor-text-header:$text-black; +$field-editor-text-header-active:$text-red; +$field-editor-text:$text-basic; +//File List +$file-list-bg:transparent; +$file-list-item-bg:transparent; +$file-list-title-color:$text-basic; +$file-list-title-border:transparent; +$file-list-item-color:$text-basic; +$file-list-item-color-active:$text-basic-active; +$file-list-item-size:$text-basic; +$file-list-item-borer:$border-basic-color; +$file-list-link-btn-color-active:$text-white; +$file-list-link-btn-color:$text-basic; +$file-list-link-btn-bg:$bg-blue-active; +$file-list-link-btn-bg-active:$bg-blue; +//Flip +$flip-bg:transparent; +$flip-slides-bg:$bg-basic-color; +$flip-slides0-bg:#f6f6f6; +$flip-slides1-bg:$bg-blue-active; +$flip-slides1-color:$text-white; +$flip-border:$border-gray; +//Gallery +$galleria-container-bg:transparent; +$gallery-info-bg:$bg-basic-color; +$gallery-info-border:$border-gray; +$gallery-info-text:$text-basic; +$gallery-nav-active:$text-white; +$gallery-nav:$text-basic; +$gallery-counter-color:$text-white; +//Language selector +$lang-selector-bg:$bg-basic-color; +$lang-selector-border:$border-basic-color; +$lang-selector-item-bg-active:$bg-basic-color; +$lang-selector-item-border:$border-white; +$lang-selector-item-border-active:$border-basic-active; +//Site selector +$site-selector-color:$text-basic; +//Link List +$link-list-bg:transparent; +$link-list-header-border:$border-basic-color; +$link-list-items-bg:transparent; +$link-list-item-bg:transparent; +$link-list-item-color:$text-basic; +$link-list-item-color-active:$text-basic-active; +$link-list-item-border-active:$border-basic-color; +//Login +$login-bg:transparent; +//Logout +$logout-bg:transparent; +$logout-link-text-color:$text-basic; +$logout-link-text-color-active:$text-basic-active; +$logout-link-border:$border-basic-color; +//Map +$map-bg:transparent; +$map-border:none; +//Page List +$page-list-bg:$bg-transparent; +$page-list-item-bg:$bg-transparent; +$page-list-item-title-text:$text-black; +$page-list-item-border:$border-basic-color; +//Pagination +$list-pagination-bg:transparent; +$list-pagination-active-bg:$bg-blue; +$list-pagination-active-color:$text-white; +$list-pagination-active-color:$text-blue; +$list-pagination-active-bg:$bg-submenu-active; +$list-pagination-active-border:$border-basic-active; +//Play list +$play-list-bg:transparent; +$play-list-item-bg:transparent; +$play-list-item-color:$text-basic; +$play-list-item-color-active:$text-white; +$play-list-nav-active:$text-blue; +$play-list-item-bg:$bg-light-gray; +$play-list-item-active-bg:$bg-blue; +$play-list-border:$border-basic-color; +$play-list-title-border:$border-basic-color; +//Promo +$promo-bg:$bg-basic-color; +$promo-bg-hero:rgba(0, 0, 0, 0.5); +$promo-border:$border-gray; +$promo-hero-text-color:$text-white; +$promo-shadow-border:$border-basic-color; +//Rich Text Content +$rich-content-bg:transparent; +$rich-content-color:$text-basic; +$rich-content-border:transparent; +$rich-content-link-color:$text-red; +$rich-content-link-color-active:$text-basic-active; +//Search +$search-filter:$text-basic; +$search-filter-border:$border-basic-color; +//Menu colors +$menu-hover-color:#1b809e; +$menu-active-color:#176f89; +//Navigation +$nav-bg:transparent; +$nav-color-root:$text-basic; +$nav-color-root-active:$text-basic; +$nav-border-root:$border-basic-color; +$nav-border-root-active:$border-basic-color; +$nav-color-submenu:$text-submenu-active; +$nav-color-submenu-active:$text-submenu-active; +$nav-bg-root:$bg-submenu-active; +$nav-bg-submenu:$bg-submenu-active; +$nav-bg-submenu-active:$bg-submenu-active; +$nav-border-submenu:$border-basic-color; +$nav-submenu-item-border:$border-gray; +$nav-submenu-border-active:$border-basic-color; +//Social Media Share +$social-media-share-bg:transparent; +//Tabs +$tab-heading-bg:$bg-light-gray; +$tab-heading-active-bg:$bg-basic-color; +$tab-heading-color:$text-heading-color; +$tab-heading-active-color:$text-black; +$tab-container-bg:transparent; +$tab-container-border:$border-basic-color; +//Title +$title-bg:transparent; +$title-color:$text-basic; +$title-color-active:$text-basic-active; +//Toggle +$toggle-header-bg:$bg-basic-color; +$toggle-content-bg:$bg-basic-color; +$toggle-show-color:$text-basic-active; +//Search Components +$search-btn-bg:transparent; +$search-btn-active-bg:#e0e0e0; +$search-btn-active-border:#adadad; +//Image component +$image-caption-color:$text-basic; +//Media Link Component +$media-link-bg:transparent; +$media-link-border:$border-basic-color; +$media-link-color:$text-basic; +$media-link-color-active:$text-basic-active; +//Tag Component +$tag-color:$text-basic; +$tag-color-active:$text-basic-active; +$tag-border-active:$border-basic-active; +$tag-link-bg :$bg-blue; +$tag-link-bg-active :$bg-blue-active; +$tag-link-color :$text-white; +//Link Component +$link-bg:transparent; +$link-text-color:$text-basic; +$link-text-color-active:$text-basic-active; +$link-border:$border-basic-color; +//Overlay +$overlay-bg:$bg-light-gray; +//Search Components +$search-title-border:$border-basic-color; +$search-title-color:$text-basic; +$search-item-color:$text-basic; +$search-item-color-active:$text-basic; +$search-item-border:$border-basic-color; +$search-item-border-active:$border-basic-active; +// +//Search Facet Summary +$search-facet-summary-border:transparent; +$search-facet-summary-background:transparent; +$search-facet-summary-item-color:$text-basic; +$search-facet-summary-item-color-horizontal:$text-basic; +$search-facet-summary-item-border:$border-gray; +$search-facet-summary-item-border-horizontal:$border-basic-color; +$search-facet-summary-item-shadow:$border-gray; +$search-facet-summary-clear-border-horizontal:$btn-red; +$search-facet-summary-clear-color:$text-red; +$search-facet-summary-clear-color-horizontal:$text-blue; +// +$search-filter-radius-active:$text-blue; +$search-filter-radius-border:$border-gray; +$search-filter-radius-bg:$border-gray; +// +$search-filter-slider-border-active:$border-basic-color; +$search-filter-slider-bg-active:$bg-blue; +$search-filter-slider-btn-border:$border-gray; +$search-filter-slider-btn-bg:$bg-light-gray; +$search-filter-slider-btn-bg-active:$bg-light-gray-active; +//Serach Pagination +$search-pagination-bg:transparent; +$search-pagination-active-bg:$bg-blue; +$search-pagination-active-color:$text-white; +$search-pagination-hover-color:$text-blue; +$search-pagination-hover-bg:$bg-submenu-active; +$search-pagination-hover-border:$border-basic-active; +//Search selector +$serach-selector-variant-color-active: $text-blue-active; +//Typehead +$tt-color:$text-basic; +$tt-color-active:$text-blue; +$tt-price-color:$text-blue; +$tt-dropdown-bg:$bg-light-gray; +$tt-suggestion-bg-active:$bg-light-gray-active; +$tt-dropdown-border:$border-gray; +//Video +$video-control-bg:$bg-basic-color; +$video-time-color:$text-basic; +$video-time-total-bg:$bg-black; +$video-time-handle-border:$border-gray; +$video-time-handle-bg:$bg-black; +//Form component +$form-bg: transparent; +$form-border: transparent; +$form-color: $text-basic; +//Main +$page-bg: $bg-basic-color; +$page-bg-editor:none; diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/abstracts/vars/_fontSizes.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/abstracts/vars/_fontSizes.scss new file mode 100644 index 0000000000..fd8ed4b3a4 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/abstracts/vars/_fontSizes.scss @@ -0,0 +1,16 @@ +$font-small:11px; +$font-normal:13px; +$font-medium:16px; +$font-big:20px; +$font-extrabig:24px; +//Navigation +$navigation-font-basic:18px; +$navigation-font-basic-submenu:14px; +//Tabs +$tab-font-header:16px; +//Accordion +$accordion-header:16px; +//Breadcrumb +$breadcrumb-font:15px; +// Link List +$link-list-title-font:15px; diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/abstracts/vars/_margins.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/abstracts/vars/_margins.scss new file mode 100644 index 0000000000..d03c751776 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/abstracts/vars/_margins.scss @@ -0,0 +1,11 @@ +$default-padding:5px; +$default-inputs-padding:12px 10px; + +$extrasmall-margin-bottom: 2px; +$extrasmall-margin:5px; +$small-margin:10px; +$middle-margin:20px; +$large-margin:30px; +$extralarge-margin:40px; + +$small-padding:10px; \ No newline at end of file diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/base/fonts/_fonts.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/base/fonts/_fonts.scss new file mode 100644 index 0000000000..49d54e9f19 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/base/fonts/_fonts.scss @@ -0,0 +1 @@ +@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese'); diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/base/fonts/index.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/base/fonts/index.scss new file mode 100644 index 0000000000..dd68bcb81c --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/base/fonts/index.scss @@ -0,0 +1 @@ +@import "fonts"; diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/base/index.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/base/index.scss new file mode 100644 index 0000000000..aa58842dee --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/base/index.scss @@ -0,0 +1,3 @@ +@import "fonts"; +@import "links"; +@import "reset/ui-datepicker"; diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/base/links/_link-button.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/base/links/_link-button.scss new file mode 100644 index 0000000000..f46d2cf3d0 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/base/links/_link-button.scss @@ -0,0 +1,26 @@ +@import "sass/abstracts/vars/colors"; +@import "sass/abstracts/mixins"; + +.button-default, .default { + @include default-link-button(); + background: #f6f6f6; + color: $text-basic; +} +.button-success, .success { + @include default-link-button(); + background: $btn-green-light; + color: $text-white; + &:hover { + color: $text-white; + background: $btn-green; + } +} +.button-warning, .warning { + @include default-link-button(); + background: $btn-red; + color: $text-white; + &:hover { + color: $text-white; + background: $btn-red-active; + } +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/base/links/index.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/base/links/index.scss new file mode 100644 index 0000000000..56627622c1 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/base/links/index.scss @@ -0,0 +1 @@ +@import "link-button"; diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/base/reset/_inputs.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/base/reset/_inputs.scss new file mode 100644 index 0000000000..da11dc1577 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/base/reset/_inputs.scss @@ -0,0 +1,58 @@ +@import "sass/abstracts/mixins"; +@import "sass/abstracts/vars"; + +label { + background: transparent; + color: $text-basic; +} +input, button { + display: inline-block; + box-sizing: border-box; + background: $bg-basic-color !important; + border: 1px solid $border-gray; + border-radius: 0 !important; + color: $text-basic; + font-weight: normal; + padding: 8px 2%; + clear: both; + height: auto; + font-size: $font-normal; +} +input:focus { + border: 1px solid $border-gray; +} +input[type="submit"], input[type="reset"], input[type="button"], button { + border: 1px solid $border-basic-color; + padding: 5px 20px; + &:hover { + background: $bg-light-gray !important; + } +} +input::-moz-focus-inner, button::-moz-focus-inner { + border: 0; + padding: 0; +} +input[type="text"] { + font-size: 13px; +} +input[type="text"], input[type="email"], input[type="password"], textarea, select { + box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1); + color: $text-basic; + width: 100%; + background: #fff; + border: 1px solid $border-gray; +} + +select { + display: inline-block; + vertical-align: middle; + *vertical-align: auto; + *zoom: 1; + *display: inline; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + outline: none; + cursor: pointer; + padding: 5px; +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/base/reset/_links.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/base/reset/_links.scss new file mode 100644 index 0000000000..a3901b5d33 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/base/reset/_links.scss @@ -0,0 +1,14 @@ +@import "sass/abstracts/mixins"; +@import "sass/abstracts/vars"; + +a { + background-color: transparent; + text-decoration: none; + font-size: 1em; + color: $text-basic; + border-bottom: 1px solid $border-basic-color; + &:hover { + color: $text-basic-active; + text-decoration: none; + } +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/base/reset/_ui-datepicker.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/base/reset/_ui-datepicker.scss new file mode 100644 index 0000000000..ce8ecc651b --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/base/reset/_ui-datepicker.scss @@ -0,0 +1,7 @@ +@import 'sass/abstracts/vars'; + +.ui-datepicker-title { + select { + color: $text-basic; + } +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/base/richtext/_richtext-files-icons.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/base/richtext/_richtext-files-icons.scss new file mode 100644 index 0000000000..23b1c07c3b --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/base/richtext/_richtext-files-icons.scss @@ -0,0 +1,86 @@ +@import 'font-awesome/scss/mixins'; +@import 'font-awesome/scss/variables'; +@import "sass/abstracts/mixins"; + +//files icons +.field-filetypeicon>a>span, .pdf, .xls, .xlsx, .pptx, .ppt, .docx, .doc, .bmp, .png, .jpg, .jpeg, .psd, .gif, .avi, .mp4, .wmv, .mov, .mp3, .wma, .txt, .zip { + display: inline-block; + box-sizing: border-box; + font-weight: normal; + width: 15px; + height: 21px; + margin: 0; + padding: 0; + position: relative; + &:before { + @include fa-icon(); + font-size: 16px !important; + position: absolute; + display: block; + top: 50%; + margin: 0; + padding: 0; + transform: translateY(-50%); + } +} +.field-filetypeicon span:before { + content: $fa-var-file-o; +} +.field-filetypeicon { + .pdf:before { + content: $fa-var-file-pdf-o; + } + .xlsx, .xls { + &:before { + content: $fa-var-file-excel-o; + } + } + .pptx, .ppt { + &:before { + content: $fa-var-file-powerpoint-o; + } + } + .docx, .doc { + &:before { + content: $fa-var-file-word-o; + } + } + .bmp, .png, .jpg, .jpeg, .psd, .gif, .tif { + &:before { + content: $fa-var-file-image-o; + } + } + .avi, .mp4, .wmv, .mov, .mpg, .mkv, .vp6, .vid, .rv, .webm, .swf, .flv, .m4v, .h264, .mk3d, .gifv, .oggv, .movie, .divx { + &:before { + content: $fa-var-file-video-o; + } + } + .mp3, .wma, .wav, .fla, .flac, .ra, .rma, .aif, .aiff, .aa, .aac, .mid, .midi, .aax, .ac3, .au, .ogg, .avr, .m4a, .mp4a, .amz, .mka, .asx, .pcm, .m3u, .xwma { + &:before { + content: $fa-var-file-audio-o; + } + } + .txt:before { + content: $fa-var-file-text-o; + } + .zip, .zipx, .rar, .tar, .gz, .dmg, .iso { + &:before { + content: $fa-var-file-archive-o; + } + } + .css, .js, .py, .git, .py, .cpp, .h, .ini, .config { + &:before { + content: $fa-var-file-code-o; + } + } + .exe, .jar, .dll, .bat, .pl, .scr, .msi, .app, .deb, .apk, .jar, .vb, .prg, .sh { + &:before { + content: $fa-var-cogs; + } + } + .com, .net, .org, .edu, .gov, .mil, .html, .htm, .xhtml, .jhtml, .php, .php3, .php4, .php5, .phtmle, .asp, .aspx, .cfm { + &:before { + content: $fa-var-link; + } + } +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/base/richtext/_richtext.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/base/richtext/_richtext.scss new file mode 100644 index 0000000000..7d5ec31386 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/base/richtext/_richtext.scss @@ -0,0 +1,101 @@ +h1, +h2, +h3, +h4, +h5, +h6 { + color: $text-heading-color; +} +h1, +h2 { + margin: $small-margin 0; +} +h3, +h4, +p { + margin: $extrasmall-margin 0; +} +h5, +h6 { + margin: $extrasmall-margin 0 0; +} +strong { + font-weight: 700; +} +ul, +ol { + padding-bottom: $extrasmall-margin; + padding-top: $extrasmall-margin; + margin-left: $small-margin; +} +li { + font-size: $font-normal; + margin-left: 15px; +} +ul { + li { + list-style: disc; + list-style-position: inside; + } +} +ol { + li { + list-style: decimal; + list-style-position: inside; + } +} +a { + color: $rich-content-link-color; + text-decoration: underline; + font-size: 1em; + &:hover { + color: $rich-content-link-color-active; + } +} +table { + height: auto !important; + border: 2px solid $border-gray; + &, + tr, + th, + td { + border: solid 2px $border-gray; + background: $bg-basic-color; + border-collapse: collapse; + vertical-align: middle; + } + tr, + th, + td { + padding: 5px; + } + caption { + background-color: $bg-light-gray; + overflow: hidden; + padding: 10px; + font-size: $font-big; + font-weight: bold; + margin-left: 0; + } + tr { + border: none; + } + th, + td { + border-width: 2px 0 0 2px; + } + th { + background-color: lighten($bg-light-gray, 5%); + font-size: $font-normal; + font-weight: bold; + padding: 7px; + &:first-child { + border-left: 0; + } + } + td { + &:first-child { + border-left: 0; + } + } +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/base/richtext/index.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/base/richtext/index.scss new file mode 100644 index 0000000000..f3d8b32b4b --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/base/richtext/index.scss @@ -0,0 +1,2 @@ +@import "richtext"; +@import "richtext-files-icons"; diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/base/typehead/_typehead.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/base/typehead/_typehead.scss new file mode 100644 index 0000000000..f9cc44951e --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/base/typehead/_typehead.scss @@ -0,0 +1,95 @@ +@import 'sass/abstracts/vars'; +@import 'sass/abstracts/mixins'; + +.twitter-typeahead { + display: inline-block; + vertical-align: middle; + max-width: 100%; + width: 100%; +} +.tt-menu { + background: $bg-basic-color; + width: 100%; + border: 1px solid $border-gray; +} +.tt-hint { + color: $tt-color; +} +.tt-dropdown-menu { + width: 250px; + margin-top: 5px; + background-color: $tt-dropdown-bg; + border: 1px solid $tt-dropdown-border; + max-height: 300px; + overflow-y: auto; + box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.08); +} +.tt-suggestion { + padding: 4px 10px; + color: $tt-color; + overflow: hidden; + a { + text-decoration: none; + } + &:last-child { + border: none; + } + .field-image { + width: 100px; + float: left; + margin-right: 10px; + } + .field-make { + font-size: 15px; + float: left; + margin-right: 5px; + } + .field-model { + margin-left: 4px; + font-size: 15px; + font-weight: bold; + width: 100%; + } + .field-priceformatted { + float: right; + font-size: 15px; + color: $tt-price-color; + margin-top: -20px; + } +} +.tt-suggestion.tt-cursor { + color: $tt-color-active; + background-color: $tt-suggestion-bg-active; + cursor: pointer; +} +.loading-in-progress { + .tt-dropdown-menu { + display: block !important; + min-height: 50px; + position: relative; + &:after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + margin-top: -20px; + margin-left: -20px; + height: 40px; + width: 50px; + display: block; + @include loading-gif(); + z-index: 11; + } + &:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: $tt-dropdown-bg; + opacity: 0.8; + z-index: 10; + } + } +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/base/typehead/index.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/base/typehead/index.scss new file mode 100644 index 0000000000..dc8dc6ba07 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/base/typehead/index.scss @@ -0,0 +1 @@ +@import "typehead"; diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/_component-column-splitter.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/_component-column-splitter.scss new file mode 100644 index 0000000000..255a08a1a3 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/_component-column-splitter.scss @@ -0,0 +1,14 @@ +@import 'sass/abstracts/vars'; + +.row.column-splitter { + margin-left: 0; + margin-right: 0; + padding-left: calc($default-padding / 2); + padding-right: calc($default-padding / 2); + max-width: none; + + > div { + padding-left: $default-padding; + padding-right: $default-padding; + } +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/_component-container.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/_component-container.scss new file mode 100644 index 0000000000..20ba9cffda --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/_component-container.scss @@ -0,0 +1,27 @@ +@import 'sass/abstracts/mixins'; + +$size-padding: 8px; +.container-wrapper { + width: 100%; +} + +.component { + position: relative; + padding: 0 $size-padding; + + @include respond-to(all-mobile) { + padding: 0; + } +} + +.container { + padding: 0; + + &.fullwidth-container { + max-width: unset; + } + + .component-content { + @include clearfix(); + } +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/_component-image.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/_component-image.scss new file mode 100644 index 0000000000..f37254504b --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/_component-image.scss @@ -0,0 +1,18 @@ +@import "sass/abstracts/vars"; + +.image { + img { + max-width: 100%; + height: auto; + } + a { + display: inline-block; + max-width: 100%; + } + .image-caption { + display: block; + font-style: italic; + font-size: $font-small; + color: $image-caption-color; + } +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/_component-navigation.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/_component-navigation.scss new file mode 100644 index 0000000000..c07beb6100 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/_component-navigation.scss @@ -0,0 +1,51 @@ +@import "sass/abstracts/mixins"; +@import "sass/abstracts/vars"; + +.navigation { + background: $nav-bg; + ul { + padding-left: 0; + } + .level0, .level1 { + >.navigation-title>a { + font-size: $navigation-font-basic; + border-color: $nav-border-root; + border-style: solid; + border-width: 0 0 2px 0; + padding-right: 10px; + margin-right: 5px; + &:hover { + text-decoration: none; + } + } + } + a { + color: $nav-color-root; + .lt-ie9 &, .lt-ie9 & span { + color: $nav-color-root; + } + &:focus, &:hover { + color: $nav-color-root-active; + } + } + li { + &.submenu { + margin-bottom: 0; + } + >.navigation-title { + >a { + padding: 3px 5px 3px 0; + display: block; + color: $nav-color-root; + text-decoration: none; + } + } + >ul a { + font-size: $navigation-font-basic-submenu; + } + } + .submenu>ul { + padding-left: 10px; + } +} +@import "sass/components/navigation/"; diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/_component-promo.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/_component-promo.scss new file mode 100644 index 0000000000..6c694859d6 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/_component-promo.scss @@ -0,0 +1,42 @@ +@import "sass/abstracts/vars"; +@import "sass/abstracts/mixins"; + +.promo { + background: $promo-bg; + padding: 15px; + overflow: hidden; + box-sizing: border-box; + >.component-content { + position: relative; + @include clearfix(); + @include border-basic(all, $promo-border); + + >div { + padding: 5px; + } + } + .zg-height-fix { + .field-promoicon { + margin-top: 100px; + } + } + .field-promoicon { + overflow: hidden; + width: 100%; + img { + width: 100%; + height: auto; + } + } + .field-promolink { + margin-top: 5px; + padding-bottom: 10px; + } + &.image-full-size { + img { + margin-bottom: 10px; + } + } + @import "sass/variants/promo"; + @import "sass/base/richtext/richtext"; +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/_component-richtext-content.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/_component-richtext-content.scss new file mode 100644 index 0000000000..b642d17abd --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/_component-richtext-content.scss @@ -0,0 +1,19 @@ +@import "sass/abstracts/vars"; +@import "sass/abstracts/mixins"; + +.content, .rich-text { + border: $rich-content-border; + line-height: 1.5; + font-size: 12px; + overflow: hidden; + * { + max-width: 100%; + } + @import "sass/base/richtext"; +} +.rich-text { + @import "sass/variants/rich-text"; +} +.content { + @import "sass/variants/page-content"; +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/common/_alignment.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/common/_alignment.scss new file mode 100644 index 0000000000..7ecc31b308 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/common/_alignment.scss @@ -0,0 +1,26 @@ +.position-left, +.position-left * { + text-align: left !important; +} + +.position-right, +.position-right * { + text-align: right !important; +} + +.position-center, +.position-center * { + text-align: center !important; +} + +.position-left select { + direction: ltr !important; +} + +.position-right select { + direction: rtl !important; +} + +.position-center select { + text-align-last: center !important; +} \ No newline at end of file diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/common/_boxed.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/common/_boxed.scss new file mode 100644 index 0000000000..9f5c578c29 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/common/_boxed.scss @@ -0,0 +1,16 @@ +@import "sass/abstracts/vars"; +@import "sass/abstracts/mixins"; + +.boxed { + box-sizing: border-box; + margin: 20px 0; + @include respond-to(tablet) { + padding: 10px; + } + @include respond-to(mobile) { + padding: 10px; + } + >div { + @include wrapper(); + } +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/common/_clearfix.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/common/_clearfix.scss new file mode 100644 index 0000000000..9cfccae130 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/common/_clearfix.scss @@ -0,0 +1,11 @@ +@import "sass/abstracts/vars"; +@import "sass/abstracts/mixins"; + +.component-content-clearfix { + .component-content { + @include clearfix; + } +} +.component-clearfix { + @include clearfix; +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/common/_highlighted.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/common/_highlighted.scss new file mode 100644 index 0000000000..9a2ae545b0 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/common/_highlighted.scss @@ -0,0 +1,63 @@ +.highlighted-top { + background: #ffffff; + border-top-width: 3px; + border-top-color: #15909c; + border-style: solid; + padding: 25px; + margin: 0; +} + +.highlighted-top h1, +.highlighted-top h2, +.highlighted-top h3, +.highlighted-top h4 { + margin: 0 0 10px 0; +} + +.highlighted-bottom { + background: #ffffff; + border-bottom-width: 3px; + border-bottom-color: #15909c; + border-style: solid; + padding: 25px; + margin: 0; +} + +.highlighted-bottom h1, +.highlighted-bottom h2, +.highlighted-bottom h3, +.highlighted-bottom h4 { + margin: 0 0 10px 0; +} + +.highlighted-left { + background: #ffffff; + border-left-width: 3px; + border-left-color: #15909c; + border-style: solid; + padding: 25px; + margin: 0; +} + +.highlighted-left h1, +.highlighted-left h2, +.highlighted-left h3, +.highlighted-left h4 { + margin: 0 0 10px 0; +} + +.highlighted-right { + background: #ffffff; + border-right-width: 3px; + border-right-color: #15909c; + border-style: solid; + padding: 25px; + margin: 0; +} + +.highlighted-right h1, +.highlighted-right h2, +.highlighted-right h3, +.highlighted-right h4 { + margin: 0 0 10px 0; +} \ No newline at end of file diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/common/_link-button.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/common/_link-button.scss new file mode 100644 index 0000000000..dc083ea603 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/common/_link-button.scss @@ -0,0 +1,16 @@ +@import "sass/abstracts/mixins"; + +.link-button { + @import "sass/base/links/"; +} +// Promo button +.promo.link-button { + a { + @extend .button-default; + } +} +.link.link-button { + .is-empty-hint, .field-link span, a { + @include default-link-button(); + } +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/common/_promoted-box.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/common/_promoted-box.scss new file mode 100644 index 0000000000..b8773f4af4 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/common/_promoted-box.scss @@ -0,0 +1,3 @@ +.promoted-box { + border: none !important; +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/common/index.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/common/index.scss new file mode 100644 index 0000000000..132ec2ee77 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/common/index.scss @@ -0,0 +1,6 @@ +@import "alignment"; +@import "boxed"; +@import "clearfix"; +@import "highlighted"; +@import "link-button"; +@import "promoted-box"; \ No newline at end of file diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/container/_bordered.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/container/_bordered.scss new file mode 100644 index 0000000000..82d6494ab3 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/container/_bordered.scss @@ -0,0 +1,24 @@ +@import "sass/abstracts/vars"; +@import "sass/abstracts/mixins"; + +.sxa-bordered { + box-sizing: border-box; + >.component-content { + padding: 0; + @include border-basic(); + border-radius: 5px; + } +} + +.column-splitter, +.row-splitter { + box-sizing: border-box; + .sxa-bordered { + padding: $default-padding !important; + >.component, + .scEmptyPlaceholder { + @include border-basic(); + border-radius: 5px; + } + } +} \ No newline at end of file diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/container/_title-row-box.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/container/_title-row-box.scss new file mode 100644 index 0000000000..b73f113bf2 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/container/_title-row-box.scss @@ -0,0 +1,66 @@ +@import "sass/abstracts/vars"; +@import "sass/abstracts/mixins"; + +.title-row-box { + @include border-basic(); + box-sizing: border-box; + width: 100%; + height: 87px; + margin: 0; + padding: 0; + background: $container-title-row-bg; + >.component-content { + @include wrapper(); + .title { + display: inline-block; + vertical-align: middle; + box-sizing: border-box; + margin: 23px 0 0 0; + padding: 0; + h1 { + @include font-size(2.2); + border: none; + } + @include respond-to(all-mobile) { + margin: 23px 0 0 20px; + } + } + .rich-text { + margin: 0; + h1, h2, h3, h4 { + margin: 0; + padding: 0; + } + } + .breadcrumb { + display: inline-block; + vertical-align: middle; + box-sizing: border-box; + @include font-size(1.4); + margin: 23px 0 0 0; + padding: 0; + float: right; + clear: both; + @include respond-to(tablet) { + margin: 23px 20px 0 0; + } + @include respond-to(mobile) { + display: none; + } + } + } + @include respond-to(all-mobile) { + .alpha { + vertical-align: middle; + box-sizing: border-box; + width: auto !important; //overrides grid + float: left; + } + .omega { + vertical-align: middle; + box-sizing: border-box; + width: auto !important; //overrides grid + float: right; + } + } +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/container/index.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/container/index.scss new file mode 100644 index 0000000000..3feb29f6bc --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/container/index.scss @@ -0,0 +1 @@ +@import "bordered"; diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/image-alignment/_image-left.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/image-alignment/_image-left.scss new file mode 100644 index 0000000000..dec94f0a88 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/image-alignment/_image-left.scss @@ -0,0 +1,3 @@ +.image-left .component-content>div>img { + float: left; +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/image-alignment/_image-right.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/image-alignment/_image-right.scss new file mode 100644 index 0000000000..bbdfabe4a9 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/image-alignment/_image-right.scss @@ -0,0 +1,3 @@ +.image-right .component-content>div>img { + float: right; +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/image/_image-default-size.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/image/_image-default-size.scss new file mode 100644 index 0000000000..0c77894832 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/image/_image-default-size.scss @@ -0,0 +1,6 @@ +.image-default-size { + img { + max-width: none; + width: auto !important; + } +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/image/index.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/image/index.scss new file mode 100644 index 0000000000..60a0f25666 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/image/index.scss @@ -0,0 +1 @@ +@import "image-default-size"; diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/index.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/index.scss new file mode 100644 index 0000000000..76f359e5b9 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/index.scss @@ -0,0 +1,17 @@ +@import "component-column-splitter"; +@import "component-container"; +@import "component-image"; +@import "component-navigation"; +@import "component-promo"; +@import "_component-richtext-content"; + +@import "common"; +@import "container"; +@import "layout"; +@import "spacing"; +@import "promo"; +@import "spacing"; +@import "title"; +@import "image"; +@import "link-list"; +@import "rich-text"; diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/layout/_acaindent.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/layout/_acaindent.scss new file mode 100644 index 0000000000..fb704b4f4c --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/layout/_acaindent.scss @@ -0,0 +1,5 @@ +@import "sass/abstracts/vars"; + +.alan-indent { + margin: 0 $extralarge-margin; +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/layout/_background.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/layout/_background.scss new file mode 100644 index 0000000000..aca4f176ce --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/layout/_background.scss @@ -0,0 +1,27 @@ +@import "sass/abstracts/vars"; +@import "sass/abstracts/mixins"; + +%cover-bg { + background-repeat: no-repeat; + background-size: cover; +} +.cover-background { + >.component-content { + @extend %cover-bg; + } +} +.fix-background { + >.component-content { + @extend %cover-bg; + @include fixed-bg(left top); + } +} +.parallax-background { + >.component-content { + @extend %cover-bg; + @include fixed-bg(50% 0); + @include respond-to(mobile-large) { + background-attachment: scroll; + } + } +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/layout/index.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/layout/index.scss new file mode 100644 index 0000000000..a7477ec3c9 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/layout/index.scss @@ -0,0 +1 @@ +@import "background"; diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/link-list/_component-link-list.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/link-list/_component-link-list.scss new file mode 100644 index 0000000000..2cd58467b1 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/link-list/_component-link-list.scss @@ -0,0 +1,45 @@ +@import "sass/abstracts/mixins"; +@import "sass/abstracts/vars"; +@import 'font-awesome/scss/mixins'; +@import "font-awesome/scss/variables"; + +.link-list { + background: $link-list-bg; + h1, h2, h3, h4, h5, h6 { + @include border-basic(bottom, $link-list-header-border); + } + >.component-content { + ul { + background: $link-list-items-bg; + } + li { + background: $link-list-item-bg; + display: block; + font-size: $font-normal; + a { + display: inline; + color: $link-list-item-color; + position: relative; + padding-left: 10px; + font-size: 1em; + text-decoration: none; + &:before { + @include fa-icon(); + content: $fa-var-chevron-right; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + font-size: 10px; + } + &:hover { + color: $link-list-item-color-active; + text-decoration: none; + border-bottom: 1px solid $link-list-item-border-active; + } + } + } + } + @import "../../base/links"; + @import "../../variants/link-list"; +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/link-list/_list-vertical.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/link-list/_list-vertical.scss new file mode 100644 index 0000000000..525da3e3f1 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/link-list/_list-vertical.scss @@ -0,0 +1,20 @@ +@import 'sass/abstracts/vars'; +@import 'sass/abstracts/mixins'; + +.link-list.list-vertical { + h3 { + background: $bg-basic-color; + width: 100%; + display: inline-block; + padding: 3px 5px; + @include border-basic(); + } + a { + border: none; + } + li { + display: block; + margin-left: $middle-margin; + } +} + diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/link-list/index.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/link-list/index.scss new file mode 100644 index 0000000000..85cbda239a --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/link-list/index.scss @@ -0,0 +1,2 @@ +@import "component-link-list"; +@import "list-vertical"; diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/navigation/_navigation-fat.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/navigation/_navigation-fat.scss new file mode 100644 index 0000000000..2397bdd7f1 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/navigation/_navigation-fat.scss @@ -0,0 +1,58 @@ +@import 'sass/abstracts/vars'; +@import 'sass/abstracts/mixins'; +@import 'font-awesome/scss/mixins'; +@import 'font-awesome/scss/variables'; + +.navigation.navigation-fat { + background: $bg-basic-color; + @include border-basic(); + + a { + text-decoration: none; + } + + nav > ul { + list-style: none; + padding: 10px 0; + overflow: hidden; + } + + .rel-level1 { + margin: $small-margin; + padding: 0; + display: inline-block; + vertical-align: top; + + &.submenu ul a { + position: relative; + &:before { + @include fa-icon(); + transform: translateY(-50%); + position: absolute; + content: $fa-var-chevron-right; + top: 50%; + left: -9px; + font-size: 10px; + } + } + > .navigation-title > a { + @include border-basic(top, $border-basic-color, 2px); + border-bottom: 0; + background: $nav-bg-root; + padding: 5px 10px; + display: block; + width: auto; + &:hover { + border-color: $menu-hover-color; + } + } + > ul { + padding: 0; + } + } + .rel-level2 { + padding-left: $small-margin; + display: block; + } +} + diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/navigation/_navigation-main-horizontal-vertical.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/navigation/_navigation-main-horizontal-vertical.scss new file mode 100644 index 0000000000..3b320dcbfb --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/navigation/_navigation-main-horizontal-vertical.scss @@ -0,0 +1,176 @@ +@import 'sass/abstracts/vars'; +@import 'sass/abstracts/mixins'; +@import 'font-awesome/scss/mixins'; +@import 'font-awesome/scss/variables'; + +$borderSize: 2px; + +//Drop Down Navigation Common Part +.navigation.navigation-main { + .component-content > nav { + position: relative; + ul { + @include clearfix(); + } + } + .rel-level1 { + float: left; + &.active { + > .navigation-title > a { + border-color: $nav-border-root; + } + } + > .navigation-title > a { + border-width: 2px 0 0 0; + border-color: transparent; + &:hover { + border-color: $nav-border-root; + } + } + &.submenu { + > .navigation-title a { + position: relative; + padding-right: 15px; + &:after { + @include fa-icon(); + font-size: 10px; + content: $fa-var-chevron-down; + position: absolute; + transform: translateY(-50%); + top: 50%; + right: 0; + } + } + } + //submenu + > ul { + overflow: hidden; + display: none; + z-index: 10; + position: absolute; + top: 100%; + background: $nav-bg-submenu; + margin-left: 0; + margin-top: -$borderSize; + border-top: $borderSize solid $nav-border-submenu; + border-left: 1px solid $nav-submenu-item-border; + border-bottom: 1px solid $nav-submenu-item-border; + } + &:active, + &:hover { + > a { + & + ul { + display: block !important; + } + } + > ul { + display: block !important; + min-width: 60px; + } + } + &.active { + > .navigation-title > a:link, + > .navigation-title > a:visited { + color: $text-basic-active; + } + > span { + display: block; + padding: 10px 20px; + color: $text-white; + } + } + &.submenu.active { + border-color: $menu-active-color; + } + } + .rel-level2 { + &:hover, + &:focus { + transition: background 0.2s ease-in; + background: $nav-bg-submenu-active; + } + div > a { + display: block; + font-weight: normal; + font-size: $navigation-font-basic-submenu; + text-align: center; + &:hover, + &:focus { + color: $nav-color-submenu; + } + } + &.submenu { + box-sizing: border-box; + &.navigation-image { + text-align: center; + > a, + .field-navigationtext { + text-align: left; + } + } + } + } + // Additional styles fot drop down horizontal navigation + &.navigation-main-horizontal { + .submenu > ul { + padding-left: 0; + } + .rel-level1 { + &:active, + &:hover { + > a { + & + ul { + display: inline-flex !important; + flex-wrap: wrap; + } + } + > ul { + display: inline-flex !important; + flex-wrap: wrap; + } + } + > ul { + width: 100%; + clear: both; + left: 0; + } + } + .rel-level2 { + float: left; + padding: 10px; + @include border-basic(right, $nav-submenu-item-border, 1px); + flex-grow: 1; + flex-basis: 23%; + } + } + // Additional styles fot drop down vertical navigation + &.navigation-main-vertical { + .rel-level1 > ul { + padding-left: 0; + width: auto; + left: auto; + @include border-basic(right, $nav-submenu-item-border, 1px); + > li { + padding: 5px 10px; + } + } + .submenu { + ul { + li { + a:before { + @include fa-icon(); + content: $fa-var-chevron-right; + display: block; + position: absolute; + left: 0; + font-size: 10px; + top: 18px; + transform: translateY(-50%); + padding-left: 7px; + } + } + } + } + } +} + diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/navigation/_navigation-mobile.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/navigation/_navigation-mobile.scss new file mode 100644 index 0000000000..f3998fe5bd --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/navigation/_navigation-mobile.scss @@ -0,0 +1,85 @@ +@import 'sass/abstracts/vars'; +@import 'sass/abstracts/mixins'; +@import 'font-awesome/scss/mixins'; +@import 'font-awesome/scss/variables'; + +.navigation.navigation-mobile { + nav > ul { + border: none; + @include border-basic(); + } + .rel-level1 { + cursor: pointer; + margin: 0; + background: $bg-basic-color; + > .navigation-title { + border-bottom: 1px solid $border-basic-color; + margin: 0; + &:last-child { + border-bottom: none; + } + } + .navigation-title { + padding: 10px; + > a { + text-decoration: none; + color: $text-basic; + display: inline; + } + } + } + .rel-level2 { + display: list-item; + .navigation-title > a { + font-weight: 500; + } + } + .submenu { + > ul { + li { + position: relative; + a:before { + @include fa-icon(); + content: $fa-var-chevron-right; + display: block; + position: absolute; + left: 0; + font-size: 10px; + top: 20px; + transform: translateY(-50%); + } + } + padding-left: 25px; + background: $nav-bg-submenu; + } + > ul { + display: none; + } + &.active{ + > .navigation-title:before { + transform: rotate(180deg); + transition: 0.6s; + transform-style: preserve-3d; + } + > ul { + display: block; + } + } + > .navigation-title { + position: relative; + &:before { + @include fa-icon(); + content: $fa-var-chevron-down; + display: block; + position: absolute; + right: 10px; + font-size: 10px; + top: 20px; + transform: translateY(-50%); + transform: rotate(0); + transition: 0.6s; + transform-style: preserve-3d; + } + } + } +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/navigation/_navigation-sidebar.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/navigation/_navigation-sidebar.scss new file mode 100644 index 0000000000..a95cf6c900 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/navigation/_navigation-sidebar.scss @@ -0,0 +1,29 @@ +@import "sass/abstracts/vars"; +@import "sass/abstracts/mixins"; + +.navigation.navigation-sidebar { + a { + text-decoration: none; + } + nav>ul { + .rel-level1 { + >.navigation-title { + margin-bottom: 0; + >a { + padding: 5px 10px; + display: block; + position: relative; + z-index: 1; + margin-right: 0; + } + } + >ul { + margin-left: $small-margin; + margin-top: $extrasmall-margin; + } + } + .rel-level2 { + display: block; + } + } +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/navigation/_sitemap-navigation.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/navigation/_sitemap-navigation.scss new file mode 100644 index 0000000000..b23b2d348f --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/navigation/_sitemap-navigation.scss @@ -0,0 +1,20 @@ +@import 'sass/abstracts/vars'; +@import 'sass/abstracts/mixins'; +@import 'font-awesome/scss/mixins'; +@import 'font-awesome/scss/variables'; + +.navigation.sitemap-navigation { + .level2 a { + position: relative; + padding-left: 10px; + &:before { + @include font-size(1.4); + @include fa-icon(); + transform: translateY(-50%) scale(1, -1); + position: absolute; + content: $fa-var-share; + top: 50%; + left: -8px; + } + } +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/navigation/index.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/navigation/index.scss new file mode 100644 index 0000000000..abd702aa65 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/navigation/index.scss @@ -0,0 +1,5 @@ +@import "navigation-main-horizontal-vertical"; +@import "navigation-mobile"; +@import "navigation-sidebar"; +@import "sitemap-navigation"; +@import "navigation-fat"; diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/promo/_absolute-bottom-link.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/promo/_absolute-bottom-link.scss new file mode 100644 index 0000000000..9d6fec1b4c --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/promo/_absolute-bottom-link.scss @@ -0,0 +1,8 @@ +.promo.absolute-bottom-link { + position: relative; + .field-promolink { + position: absolute; + bottom: 10px; + right: 10px; + } +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/promo/_promo-hero.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/promo/_promo-hero.scss new file mode 100644 index 0000000000..b9f9168739 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/promo/_promo-hero.scss @@ -0,0 +1,40 @@ +@import "sass/abstracts/vars"; +@import "sass/abstracts/mixins"; + +.promo.promo-hero { + position: relative; + text-align: center; + &.promo-hero-half { + float: left; + width: 50%; + @include respond-to(all-mobile) { + float: none; + width: 100%; + } + } + .field-promotext { + display: inline-block; + transform: translateY(-50%); + position: absolute; + top: 50%; + left: 0; + right: 0; + padding: 20px; + color: $promo-hero-text-color; + background: $promo-bg-hero; + >a { + color: inherit; + text-decoration: none; + } + @include respond-to(all-mobile) { + width: 100%; + margin: 0; + h1 { + @include font-size(2.4); + } + h2, h3, h4 { + @include font-size(2.0); + } + } + } +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/promo/_promo-shadow.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/promo/_promo-shadow.scss new file mode 100644 index 0000000000..d128d6d708 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/promo/_promo-shadow.scss @@ -0,0 +1,42 @@ +@import "sass/abstracts/vars"; +@import "sass/abstracts/mixins"; + +.promo-shadow { + max-width: 960px; + padding: 0; + border-top-width: 3px; + border-top-color: $promo-shadow-border; + border-style: solid; + overflow: visible; + position: relative; + &.promo { + float: left; + } + >.component-content { + @include respond-to(all-mobile) { + margin: 0 10px 30px 10px; + } + padding: 15px; + margin: 0 0 30px 0; + &:before, &:after { + opacity: 0.7; + box-shadow: 0 17px 10px rgba(0, 0, 0, 0.7); + position: absolute; + z-index: -1; + height: 20%; + max-height: 100px; + max-width: 460px; + width: 47%; + content: ""; + bottom: 10px; + } + &:before { + left: 2%; + transform: rotate(-3deg); + } + &:after { + right: 2%; + transform: rotate(3deg); + } + } +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/promo/index.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/promo/index.scss new file mode 100644 index 0000000000..337235b99a --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/promo/index.scss @@ -0,0 +1,3 @@ +@import "absolute-bottom-link"; +@import "promo-hero"; +@import "promo-shadow"; diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/rich-text/_rich-text-lists.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/rich-text/_rich-text-lists.scss new file mode 100644 index 0000000000..0ec53f1f49 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/rich-text/_rich-text-lists.scss @@ -0,0 +1,63 @@ +@import 'sass/abstracts/vars'; +@import 'sass/abstracts/mixins'; + +.rich-text-lists, +.field-featurelist { + ul { + box-sizing: border-box; + margin: 0; + padding: 0; + li { + @include font-size(1.3); + position: relative; + line-height: 21px; + list-style: none; + margin: 0; + padding: 5px 0 5px 25px; + &:before { + display: inline-block; + vertical-align: middle; + @include font-size(1.2); + font-family: 'FontAwesome', sans-serif; + position: absolute; + top: 3px; + left: 0; + color: $text-basic; + text-align: center; + content: '\f00c'; + width: 20px; + margin: 0 5px 0 0; + padding: 0; + } + } + } +} +.field-featurelist { + ul { + li { + &:before { + display: inline-block; + vertical-align: middle; + @include font-size(1.2); + font-family: 'FontAwesome', sans-serif; + position: absolute; + top: 3px; + left: 0; + color: $text-basic; + text-align: center; + content: '\f046'; + width: 20px; + margin: 0 5px 0 0; + padding: 0; + } + } + } +} +.media-link { + &.file-type-icon-media-link { + float: left; + .field-filetypeicon { + text-align: center; + } + } +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/rich-text/index.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/rich-text/index.scss new file mode 100644 index 0000000000..767bfc1cd6 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/rich-text/index.scss @@ -0,0 +1 @@ +@import "rich-text-lists"; diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/spacing/_background-colors.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/spacing/_background-colors.scss new file mode 100644 index 0000000000..1349afd544 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/spacing/_background-colors.scss @@ -0,0 +1,14 @@ +@import 'sass/abstracts/vars'; + +.container-gray-background { + background: $bg-light-gray; +} +.container-clean-background { + background: $bg-basic-color; +} +.container-dark-background { + background: $bg-black-active; +} +.container-color-background { + background: $bg-blue; +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/spacing/_indent.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/spacing/_indent.scss new file mode 100644 index 0000000000..c098a792c9 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/spacing/_indent.scss @@ -0,0 +1,13 @@ +@import 'sass/abstracts/vars'; +.indent { + margin: 0 $extralarge-margin; + &.col-xxl-12, &.col-xl-12, &.col-lg-12, &.col-md-12, &.col-12 { + width: calc(100% - ($extralarge-margin * 2)); + } +} +.indent-top { + margin-top: $middle-margin; +} +.indent-bottom { + margin-bottom: $middle-margin; +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/spacing/index.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/spacing/index.scss new file mode 100644 index 0000000000..c8292402bb --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/spacing/index.scss @@ -0,0 +1,2 @@ +@import "background-colors"; +@import "indent"; diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/title/_component-title.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/title/_component-title.scss new file mode 100644 index 0000000000..0b06bbb9b1 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/title/_component-title.scss @@ -0,0 +1,30 @@ +@import 'sass/abstracts/vars'; +@import 'sass/abstracts/mixins'; + +.title { + background: $title-bg; + + h1, + .field-title { + @include border-basic(bottom, $border-basic-color); + font-size: $font-extrabig; + margin-bottom: $small-margin; + color: $title-color; + line-height: normal; + padding-bottom: 10px; + display: block; + text-decoration: none; + cursor: pointer; + + &:hover { + color: $title-color-active; + } + + > a, + > span { + text-decoration: none; + } + } + + @import 'sass/variants/title'; +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/title/index.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/title/index.scss new file mode 100644 index 0000000000..6045d0642d --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/components/title/index.scss @@ -0,0 +1 @@ +@import "component-title"; diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/main.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/main.scss new file mode 100644 index 0000000000..ee7d1dfc81 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/main.scss @@ -0,0 +1,4 @@ +@import "base"; +@import "components"; +@import "variants"; +@import "app"; diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/variants/index.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/variants/index.scss new file mode 100644 index 0000000000..32b1028843 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/variants/index.scss @@ -0,0 +1,6 @@ +@import "link-list"; +@import "navigation"; +@import "page-content"; +@import "promo"; +@import "rich-text"; +@import "title"; \ No newline at end of file diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/variants/link-list/index.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/variants/link-list/index.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/variants/navigation/index.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/variants/navigation/index.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/variants/page-content/index.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/variants/page-content/index.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/variants/promo/index.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/variants/promo/index.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/variants/rich-text/index.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/variants/rich-text/index.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/variants/title/index.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/sass/variants/title/index.scss new file mode 100644 index 0000000000..e69de29bb2