diff --git a/.codecov.yml b/.codecov.yml index 7dadeb38bed..bf67e6c3490 100644 --- a/.codecov.yml +++ b/.codecov.yml @@ -12,7 +12,7 @@ coverage: informational: true patch: front-end: - informational: true + informational: true changes: no parsers: diff --git a/.gitignore b/.gitignore index 3a8695b4049..53370825ba2 100644 --- a/.gitignore +++ b/.gitignore @@ -11,6 +11,7 @@ /build/* !/build/.storybook !/build/entries +/build/entries/dynamic !/build/scripts !/build/tsconfig.json !/build/.htaccess @@ -122,8 +123,10 @@ phpcs-diff.json yarn-error.log .pnp.* .yarn/* +/bin/scripts/.yarn !.yarn/patches !.yarn/plugins !.yarn/releases !.yarn/sdks !.yarn/versions +applications/dashboard/.yarn/* diff --git a/.prettierignore b/.prettierignore index c5eba0a2934..8433c047aa4 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,9 +1,80 @@ +# vendor files bower_components node_modules +vendor +.yarn + +# App writeable directories +uploads cache -.idea -*.min.js -cgi-bin +conf + +# Generally a totally separate repo +locales + +# Build directory dist +storyshots + +# IDE Config +.vscode +.idea + +# Legacy Frontend files +design +js +resources + +# Test output .phpunit.result.cache -.htaccess.dist \ No newline at end of file +.htaccess.dist +.coverage +coverage +.storybookAppPages +**/*.png +**/*.jpg +**/*.jpeg +**/*.lock +tests/fixtures/formats +tests/fixtures/**/*.html +tests/fixtures/**/*.htm + +# Plain JS Files (es5) +**/js/** + +# Legacy Design directories (coming soon?) +**/design/** +applications/dashboard/scss/vendors + +# PHP files with mixed HTML +**/views/** + +# These classes have mixed HTML. +./applications/dashboard/models/class.attachmentmodel.php +./cloud/applications/groups/modules/class.groupinfomodule.php +./cloud/applications/groups/modules/class.groupleadersmodule.php +./cloud/applications/groups/modules/class.groupmembersmodule.php +./cloud/plugins/CustomProfileFields/class.customprofilefields.plugin.php +./cloud/plugins/NoCaps/class.nocaps.plugin.php +./cloud/plugins/Online/modules/class.onlinecountmodule.php +./cloud/plugins/Online/modules/class.onlinemodule.php +./cloud/plugins/TwitterFeeds/default.php +./cloud/plugins/gigya/GSSDK.php +./cloud/plugins/github/class.github.plugin.php +./cloud/plugins/ideation/IdeaConterModule.php +./cloud/plugins/samlsso/saml/Metadata.php +./cloud/utility/invoiceparse/simple_html_dom.php +./cloud/utility/sendup/library/class.rackspace.php +./library/Vanilla/Formatting/FormatUtil.php +./library/Vanilla/Formatting/Formats/HtmlFormat.php +./library/Vanilla/Formatting/Formats/TextFormat.php +./library/Vanilla/Formatting/Html/HtmlPlainTextConverter.php +./library/Vanilla/PageScraper.php +./library/core/class.configurationsource.php +./library/core/class.controller.php +./library/core/class.markdownvanilla.php +./library/deprecated/functions.deprecated.php +./plugins/OpenID/class.lightopenid.php +./plugins/Quotes/class.quotes.plugin.php +./plugins/Reactions/ReactionsPlugin.php +./plugins/VanillaInThisDiscussion/class.inthisdiscussionmodule.php diff --git a/.swcrc b/.swcrc new file mode 100644 index 00000000000..3f11aa7d7cf --- /dev/null +++ b/.swcrc @@ -0,0 +1,27 @@ +{ + "jsc": { + "parser": { + "syntax": "typescript", + "tsx": true, + "dynamicImport": false, + "privateMethod": false, + "functionBind": false, + "exportDefaultFrom": false, + "exportNamespaceFrom": false, + "decorators": false, + "decoratorsBeforeExport": false, + "topLevelAwait": false, + "importMeta": false + }, + "transform": { + "react": { + "useBuiltins": true + } + }, + "target": "es2016", + "loose": false, + "externalHelpers": false, + // Requires v1.2.50 or upper and requires target to be es2016 or upper. + "keepClassNames": true + } +} diff --git a/.vscode/launch.json b/.vscode/launch.json index 4ecaca00800..488ea1de32b 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -4,6 +4,21 @@ // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ + { + "name": "Debug Production Build Process", + "request": "launch", + "runtimeArgs": [ + "run-script", + "build:assets", + "--sections layouts" + ], + "runtimeExecutable": "npm", + "skipFiles": [ + "/**" + ], + "type": "node" + }, + { // Execute "yarn test:browser:debug" prior to attaching. "type": "chrome", diff --git a/.vscode/settings.json b/.vscode/settings.json index 18b1ddc4e8a..607fa65acf4 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -22,6 +22,7 @@ "**/.hg": true, "**/CVS": true, "**/.DS_Store": true, + "**/.yarn": true, "cloud/plugins": true, "cloud/applications": true, "cloud/themes": true, @@ -36,7 +37,8 @@ "yarn.lock": true, "composer.lock": true, "**/node_modules": true, - "dist": true + "dist": true, + "coverage": true }, "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" @@ -72,6 +74,9 @@ }, "emmet.excludeLanguages": ["ts", "tsx", "js", "jsx"], "editor.wordWrapColumn": 120, + "typescript.preferences.autoImportFileExcludePatterns": [ + "jquery*" + ], // Inteliphense instead. "php.suggest.basic": false, diff --git a/patches/@emotion+css++@emotion+serialize+1.0.2.patch b/.yarn/patches/@emotion-serialize-npm-1.0.3-2a28e46c06.patch similarity index 77% rename from patches/@emotion+css++@emotion+serialize+1.0.2.patch rename to .yarn/patches/@emotion-serialize-npm-1.0.3-2a28e46c06.patch index 71629f94482..3e7e36732ec 100644 --- a/patches/@emotion+css++@emotion+serialize+1.0.2.patch +++ b/.yarn/patches/@emotion-serialize-npm-1.0.3-2a28e46c06.patch @@ -1,7 +1,7 @@ -diff --git a/node_modules/@emotion/css/node_modules/@emotion/serialize/types/index.d.ts b/node_modules/@emotion/css/node_modules/@emotion/serialize/types/index.d.ts -index 9d32022..f1d83cd 100644 ---- a/node_modules/@emotion/css/node_modules/@emotion/serialize/types/index.d.ts -+++ b/node_modules/@emotion/css/node_modules/@emotion/serialize/types/index.d.ts +diff --git a/types/index.d.ts b/types/index.d.ts +index 9d32022d203c1de72a1a001aa7542feaa1acc047..f1d83cd3177afb5f08838d4ba718011d9d92d0b0 100644 +--- a/types/index.d.ts ++++ b/types/index.d.ts @@ -10,12 +10,12 @@ export type CSSProperties = CSS.PropertiesFallback export type CSSPropertiesWithMultiValues = { [K in keyof CSSProperties]: diff --git a/.yarnrc.yml b/.yarnrc.yml index 04e07131c23..95208cef2b3 100644 --- a/.yarnrc.yml +++ b/.yarnrc.yml @@ -1,9 +1,9 @@ nodeLinker: node-modules plugins: - - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs - spec: "@yarnpkg/plugin-interactive-tools" - - path: .yarn/plugins/@yarnpkg/plugin-licenses.cjs - spec: "https://raw.githubusercontent.com/mhassan1/yarn-plugin-licenses/v0.7.2/bundles/@yarnpkg/plugin-licenses.js" + - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs + spec: "@yarnpkg/plugin-interactive-tools" + - path: .yarn/plugins/@yarnpkg/plugin-licenses.cjs + spec: "https://raw.githubusercontent.com/mhassan1/yarn-plugin-licenses/v0.7.2/bundles/@yarnpkg/plugin-licenses.js" yarnPath: .yarn/releases/yarn-3.1.1.cjs diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index b478618dd81..4af9e11a4ca 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -8,19 +8,19 @@ In the interest of fostering an open and welcoming environment, we as contributo Examples of behavior that contributes to creating a positive environment include: -* Using welcoming and inclusive language -* Being respectful of differing viewpoints and experiences -* Gracefully accepting constructive criticism -* Focusing on what is best for the community -* Showing empathy towards other community members +- Using welcoming and inclusive language +- Being respectful of differing viewpoints and experiences +- Gracefully accepting constructive criticism +- Focusing on what is best for the community +- Showing empathy towards other community members Examples of unacceptable behavior by participants include: -* The use of sexualized language or imagery and unwelcome sexual attention or advances -* Trolling, insulting/derogatory comments, and personal or political attacks -* Public or private harassment -* Publishing others' private information, such as a physical or electronic address, without explicit permission -* Other conduct which could reasonably be considered inappropriate in a professional setting +- The use of sexualized language or imagery and unwelcome sexual attention or advances +- Trolling, insulting/derogatory comments, and personal or political attacks +- Public or private harassment +- Publishing others' private information, such as a physical or electronic address, without explicit permission +- Other conduct which could reasonably be considered inappropriate in a professional setting ## Our Responsibilities diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 82ef0d81c18..ecf27a88b26 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -2,14 +2,14 @@ Here are some quick and easy ways to get involved in the Vanilla Forums project. -* Troubleshoot issues you run into on the [community forum](https://open.vanillaforums.com/discussions) so everyone can help & reference it later. -* Improve our [public documentation](https://docs.vanillaforums.com/) by sending us suggested [edits as pull requests](https://github.com/vanilla/docs). -* File detailed [issues](https://github.com/vanilla/vanilla/issues) on GitHub (version number, what you did, and actual vs expected outcomes). -* Sign the [Contributors' Agreement](https://cla-assistant.io/vanilla/vanilla) to send us code. -* Create new pull requests against the `master` branch. -* Keep our to-do list fresh by reviewing our open issues for resolved or duplicated items. -* Got an idea or suggestion? Use the [community forum](https://open.vanillaforums.com/discussions) to discuss it. -* Identify broken addons in the [community directory](https://open.vanillaforums.com/addons). -* Improve our custom features on the community forum by helping in the [community repo](https://github.com/vanilla/community). +- Troubleshoot issues you run into on the [community forum](https://open.vanillaforums.com/discussions) so everyone can help & reference it later. +- Improve our [public documentation](https://docs.vanillaforums.com/) by sending us suggested [edits as pull requests](https://github.com/vanilla/docs). +- File detailed [issues](https://github.com/vanilla/vanilla/issues) on GitHub (version number, what you did, and actual vs expected outcomes). +- Sign the [Contributors' Agreement](https://cla-assistant.io/vanilla/vanilla) to send us code. +- Create new pull requests against the `master` branch. +- Keep our to-do list fresh by reviewing our open issues for resolved or duplicated items. +- Got an idea or suggestion? Use the [community forum](https://open.vanillaforums.com/discussions) to discuss it. +- Identify broken addons in the [community directory](https://open.vanillaforums.com/addons). +- Improve our custom features on the community forum by helping in the [community repo](https://github.com/vanilla/community). And add to and improve this list! diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md index 0609b1d6a5e..5cde3d32369 100644 --- a/PULL_REQUEST_TEMPLATE.md +++ b/PULL_REQUEST_TEMPLATE.md @@ -1,8 +1,8 @@ Please make sure these points are completed: -* [ ] Title is formatted in present imperative (ex: "Fix X by doing Y"). -* [ ] Title makes sense as a release note, not a literal technical description. -* [ ] An issue was filed, and this links to it. -* [ ] Any related PRs are cross-referenced via link. -* [ ] Your description tells the story of why _this_ is the right change. -* [ ] You list QA steps or testing criteria if appropriate. +- [ ] Title is formatted in present imperative (ex: "Fix X by doing Y"). +- [ ] Title makes sense as a release note, not a literal technical description. +- [ ] An issue was filed, and this links to it. +- [ ] Any related PRs are cross-referenced via link. +- [ ] Your description tells the story of why _this_ is the right change. +- [ ] You list QA steps or testing criteria if appropriate. diff --git a/addons/themes/keystone/KeystoneThemeHooks.php b/addons/themes/keystone/KeystoneThemeHooks.php index 8e3e4c70848..ef7c4d8fc11 100644 --- a/addons/themes/keystone/KeystoneThemeHooks.php +++ b/addons/themes/keystone/KeystoneThemeHooks.php @@ -15,8 +15,8 @@ /** * Class KeystoneThemeHooks */ -class KeystoneThemeHooks extends \Gdn_Plugin { - +class KeystoneThemeHooks extends \Gdn_Plugin +{ use TwigRenderTrait; /** @@ -24,8 +24,9 @@ class KeystoneThemeHooks extends \Gdn_Plugin { * * @return void */ - public function setup() { - saveToConfig([ 'Garden.MobileTheme' => 'keystone' ]); + public function setup() + { + saveToConfig(["Garden.MobileTheme" => "keystone"]); } /** @@ -35,25 +36,26 @@ public function setup() { * * @return void */ - public function base_render_before($sender) { - if (inSection('Dashboard')) { + public function base_render_before($sender) + { + if (inSection("Dashboard")) { return; } - $hasAdvancedSearch = class_exists('AdvancedSearchPlugin'); + $hasAdvancedSearch = class_exists("AdvancedSearchPlugin"); //set "hasAdvancedSearch" to smarty - $sender->setData('hasAdvancedSearch', $hasAdvancedSearch); + $sender->setData("hasAdvancedSearch", $hasAdvancedSearch); // For backwards compatibility in CustomizeTheme $imageUrl = BannerImageModel::getCurrentBannerImageLink(); - $sender->setData('heroImageUrl', $imageUrl); + $sender->setData("heroImageUrl", $imageUrl); //set ThemeOptions to smarty $themeOptions = c("Garden.ThemeOptions"); foreach ($themeOptions as $key => &$value) { - $sender->setData("ThemeOptions.".$key, $value); + $sender->setData("ThemeOptions." . $key, $value); } } @@ -62,7 +64,8 @@ public function base_render_before($sender) { * * @param \DiscussionsController $sender */ - public function discussionsController_render_before($sender) { + public function discussionsController_render_before($sender) + { $this->setSanitizedDescription($sender); } @@ -71,7 +74,8 @@ public function discussionsController_render_before($sender) { * * @param \CategoriesController $sender */ - public function categoriesController_render_before($sender) { + public function categoriesController_render_before($sender) + { $this->setSanitizedDescription($sender); } @@ -80,13 +84,14 @@ public function categoriesController_render_before($sender) { * * @param \Gdn_Controller $sender */ - private function setSanitizedDescription($sender) { - if ($sender->Data['_Description']) { + private function setSanitizedDescription($sender) + { + if ($sender->Data["_Description"]) { /** @var $htmlSanitizer */ $htmlSanitizer = \Gdn::getContainer()->get(\Vanilla\Formatting\Html\HtmlSanitizer::class); - $description = $htmlSanitizer->filter($sender->Data['_Description']); + $description = $htmlSanitizer->filter($sender->Data["_Description"]); } - $sender->setData('sanitizedDescription', $description); + $sender->setData("sanitizedDescription", $description); } /** @@ -96,9 +101,10 @@ private function setSanitizedDescription($sender) { * * @return void */ - public function settingsController_afterCustomStyles_handler($sender) { + public function settingsController_afterCustomStyles_handler($sender) + { $form = $sender->Form; - echo $this->renderTwig("@keystone/customStyles.twig", ['form' => new TwigFormWrapper($form)]); + echo $this->renderTwig("@keystone/customStyles.twig", ["form" => new TwigFormWrapper($form)]); } /** @@ -106,35 +112,37 @@ public function settingsController_afterCustomStyles_handler($sender) { * * @param \SettingsController $sender */ - public function settingsController_themeOptions_create($sender) { - $sender->permission('Garden.Settings.Manage'); + public function settingsController_themeOptions_create($sender) + { + $sender->permission("Garden.Settings.Manage"); $form = $sender->Form; - $sender->addJsFile('addons.js'); - $sender->setHighlightRoute('dashboard/settings/themeoptions'); + $sender->addJsFile("addons.js"); + $sender->setHighlightRoute("dashboard/settings/themeoptions"); $themeManager = \Gdn::themeManager(); - $sender->setData('ThemeInfo', $themeManager->enabledThemeInfo()); - $sender->setData('hasAdvancedSearch', class_exists('AdvancedSearchPlugin')); + $sender->setData("ThemeInfo", $themeManager->enabledThemeInfo()); + $sender->setData("hasAdvancedSearch", class_exists("AdvancedSearchPlugin")); //get toggle values from config $checkboxes = c("Garden.ThemeOptions.Options"); foreach ($checkboxes as $key => $value) { - $form->setValue("ThemeOptions.Options.".$key, $value); + $form->setValue("ThemeOptions.Options." . $key, $value); } if ($form->authenticatedPostBack()) { // Save the styles to the config. - $styleKey = $form->getFormValue('StyleKey'); + $styleKey = $form->getFormValue("StyleKey"); $configSaveData = [ - 'Garden.ThemeOptions.Styles.Key' => $styleKey, - 'Garden.ThemeOptions.Styles.Value' => $sender->data("ThemeInfo.Options.Styles.$styleKey.Basename")]; + "Garden.ThemeOptions.Styles.Key" => $styleKey, + "Garden.ThemeOptions.Styles.Value" => $sender->data("ThemeInfo.Options.Styles.$styleKey.Basename"), + ]; // Save the text to the locale. - foreach ($sender->data('ThemeInfo.Options.Text', []) as $key => $default) { - $value = $form->getFormValue($form->escapeFieldName('Text_'.$key)); + foreach ($sender->data("ThemeInfo.Options.Text", []) as $key => $default) { + $value = $form->getFormValue($form->escapeFieldName("Text_" . $key)); $configSaveData["ThemeOption.{$key}"] = $value; } @@ -147,24 +155,24 @@ public function settingsController_themeOptions_create($sender) { $sender->informMessage(t("Your changes have been saved.")); } - $sender->setData('ThemeOptions', c('Garden.ThemeOptions')); - $styleKey = $sender->data('ThemeOptions.Styles.Key'); + $sender->setData("ThemeOptions", c("Garden.ThemeOptions")); + $styleKey = $sender->data("ThemeOptions.Styles.Key"); if (!$form->isPostBack()) { - foreach ($sender->data('ThemeInfo.Options.Text', []) as $key => $options) { - $default = val('Default', $options, ''); - $value = c("ThemeOption.{$key}", '#DEFAULT#'); - if ($value === '#DEFAULT#') { + foreach ($sender->data("ThemeInfo.Options.Text", []) as $key => $options) { + $default = val("Default", $options, ""); + $value = c("ThemeOption.{$key}", "#DEFAULT#"); + if ($value === "#DEFAULT#") { $value = $default; } - $form->setValue($form->escapeFieldName('Text_'.$key), $value); + $form->setValue($form->escapeFieldName("Text_" . $key), $value); } } - $sender->setData('ThemeFolder', $themeManager->getEnabledDesktopThemeKey()); - $sender->title(t('Theme Options')); - $form->addHidden('StyleKey', $styleKey); + $sender->setData("ThemeFolder", $themeManager->getEnabledDesktopThemeKey()); + $sender->title(t("Theme Options")); + $form->addHidden("StyleKey", $styleKey); $sender->render(); } diff --git a/addons/themes/keystone/README.md b/addons/themes/keystone/README.md index 44faa9422e5..5d30130f71d 100644 --- a/addons/themes/keystone/README.md +++ b/addons/themes/keystone/README.md @@ -1,28 +1,30 @@ # Keystone - ## Description A responsive Vanilla theme with customization options. - ## Customizations -- Javascript to animate the open and close of the mobile navigation menu. -- Sets its own flyout open/close listeners. -- Dependency on the [theme-boilerplate](https://www.npmjs.com/package/@vanillaforums/theme-boilerplate). -- Overwrites the `themeOptions_create` to support `hasHeroBanner`, `hasFeatureSearchbox` and `panelToLeft` customized options. -- Custom options `hasHeroBanner`, `hasFeatureSearchbox` are dependent on the Hero Image Plugin. -- If Advanced Search Plugin is enabled, the theme will render advanced search module, otherwise, it will render the search module. +- Javascript to animate the open and close of the mobile navigation menu. +- Sets its own flyout open/close listeners. +- Dependency on the [theme-boilerplate](https://www.npmjs.com/package/@vanillaforums/theme-boilerplate). +- Overwrites the `themeOptions_create` to support `hasHeroBanner`, `hasFeatureSearchbox` and `panelToLeft` customized options. +- Custom options `hasHeroBanner`, `hasFeatureSearchbox` are dependent on the Hero Image Plugin. +- If Advanced Search Plugin is enabled, the theme will render advanced search module, otherwise, it will render the search module. ## Building Styles / Javascript / Images This theme is built with the [Vanilla Cli](https://docs.vanillaforums.com/developer/vanilla-cli/) and does not come with its own build toolchain. With that installed you can simply run: + ```bash vanilla build ``` + or + ```bash vanilla build --watch ``` + to build your styles/js/images. Documentation for the CLI can be found [here](https://docs.vanillaforums.com/developer/vanilla-cli/#build-tools). diff --git a/addons/themes/keystone/settings/configuration.php b/addons/themes/keystone/settings/configuration.php index 795a0242ff3..0586f39b424 100644 --- a/addons/themes/keystone/settings/configuration.php +++ b/addons/themes/keystone/settings/configuration.php @@ -5,12 +5,12 @@ * @license GPL-2.0-only */ -$Configuration['Garden']['MobileTheme'] = 'keystone'; -$Configuration['Badges']['BadgesModule']['Target'] = 'AfterUserInfo'; -$Configuration['Feature']['NewFlyouts']['Enabled'] = true; -$Configuration['Garden']['ThemeOptions']['Styles']['Key'] = 'Default'; -$Configuration['Garden']['ThemeOptions']['Styles']['Value'] = '%s_default'; -$Configuration['Garden']['ThemeOptions']['Options']['hasHeroBanner'] = false; -$Configuration['Garden']['ThemeOptions']['Options']['hasFeatureSearchbox'] = false; -$Configuration['Garden']['ThemeOptions']['Options']['panelToLeft'] = false; -$Configuration['Feature']['DataDrivenTitleBar']['Enabled'] = false; +$Configuration["Garden"]["MobileTheme"] = "keystone"; +$Configuration["Badges"]["BadgesModule"]["Target"] = "AfterUserInfo"; +$Configuration["Feature"]["NewFlyouts"]["Enabled"] = true; +$Configuration["Garden"]["ThemeOptions"]["Styles"]["Key"] = "Default"; +$Configuration["Garden"]["ThemeOptions"]["Styles"]["Value"] = "%s_default"; +$Configuration["Garden"]["ThemeOptions"]["Options"]["hasHeroBanner"] = false; +$Configuration["Garden"]["ThemeOptions"]["Options"]["hasFeatureSearchbox"] = false; +$Configuration["Garden"]["ThemeOptions"]["Options"]["panelToLeft"] = false; +$Configuration["Feature"]["DataDrivenTitleBar"]["Enabled"] = false; diff --git a/addons/themes/keystone/src/scss/base/_variables.scss b/addons/themes/keystone/src/scss/base/_variables.scss index 2fb91098237..cf9d47e8a71 100644 --- a/addons/themes/keystone/src/scss/base/_variables.scss +++ b/addons/themes/keystone/src/scss/base/_variables.scss @@ -8,395 +8,401 @@ Brand Colors \* -------------------------------------------------------------- */ -$global-color_vanillaBlue: #0291DB; -$global-color_pink: #D0021B; -$global-color_grey: #555A62; -$global-color_whitesmoke: #BCBEC1; +@use "sass:math"; -$global-color_black: #000; -$global-color_white: #fff; -$global-color_transparent: transparent; +$global-color_vanillaBlue: #0291db; +$global-color_pink: #d0021b; +$global-color_grey: #555a62; +$global-color_whitesmoke: #bcbec1; + +$global-color_black: #000; +$global-color_white: #fff; +$global-color_transparent: transparent; /* -------------------------------------------------------------- *\ Utility Variables \* -------------------------------------------------------------- */ -$utility-baseUnit: 6px; -$utility-baseUnitHalf: $utility-baseUnit / 2; // Derived -$utility-baseUnitDouble: $utility-baseUnit * 2; // Derived -$utility-baseUnitTriple: $utility-baseUnit * 3; // Derived -$utility-percentage_third: (100% / 3); -$utility-percentage_nineSixteenths: (9 / 16 * 100%); -$utility-SVGEncoding: "data:image/svg+xml,"; +$utility-baseUnit: 6px; +$utility-baseUnitHalf: $utility-baseUnit * 0.5; // Derived +$utility-baseUnitDouble: $utility-baseUnit * 2; // Derived +$utility-baseUnitTriple: $utility-baseUnit * 3; // Derived +$utility-percentage_third: math.div(100%, 3); +$utility-percentage_nineSixteenths: (math.div(9, 16) * 100%); +$utility-SVGEncoding: "data:image/svg+xml,"; /* -------------------------------------------------------------- *\ Global Font \* -------------------------------------------------------------- */ -$global-normal_fontWeight: 400 !default; -$global-semibold_fontWeight: 600 !default; -$global-bold_fontWeight: 700 !default; +$global-normal_fontWeight: 400 !default; +$global-semibold_fontWeight: 600 !default; +$global-bold_fontWeight: 700 !default; -$global-heading_fontFamily: "Open Sans", HelveticaNeue-Light, "Segoe UI", "Helvetica Neue", Helvetica, Raleway, Arial, sans-serif !default; -$global-heading_fontWeight: $global-bold_fontWeight !default; +$global-heading_fontFamily: "Open Sans", HelveticaNeue-Light, "Segoe UI", "Helvetica Neue", Helvetica, Raleway, Arial, + sans-serif !default; +$global-heading_fontWeight: $global-bold_fontWeight !default; -$global-body_fontFamily: "Open Sans", "Segoe UI", "Helvetica Neue", Helvetica, Raleway, Arial, sans-serif !default; -$global-body_fontWeight: $global-normal_fontWeight !default; +$global-body_fontFamily: "Open Sans", "Segoe UI", "Helvetica Neue", Helvetica, Raleway, Arial, sans-serif !default; +$global-body_fontWeight: $global-normal_fontWeight !default; -$global-large_fontSize: 16px !default; -$global-medium_fontSize: 14px !default; -$global-small_fontSize: 12px !default; +$global-large_fontSize: 16px !default; +$global-medium_fontSize: 14px !default; +$global-small_fontSize: 12px !default; -$global-title_fontSize: 32px !default; -$global-smallTitle_fontSize: 20px !default; -$global-title_mobile_fontSize: 26px !default; -$global-subTitle_fontSize: 18px !default; +$global-title_fontSize: 32px !default; +$global-smallTitle_fontSize: 20px !default; +$global-title_mobile_fontSize: 26px !default; +$global-subTitle_fontSize: 18px !default; -$global-base_lineHeight: 1.5 !default; -$global-condensed_lineHeight: 1.25 !default; +$global-base_lineHeight: 1.5 !default; +$global-condensed_lineHeight: 1.25 !default; /* -------------------------------------------------------------- *\ User Content \* -------------------------------------------------------------- */ -$userContent_fontSize: $global-medium_fontSize !default; // 14 for forums, but 16 for KB +$userContent_fontSize: $global-medium_fontSize !default; // 14 for forums, but 16 for KB -$userContent-fontSizeH1: 2em !default; -$userContent-fontSizeH2: 1.5em !default; -$userContent-fontSizeH3: 1.25em !default; -$userContent-fontSizeH4: 1em !default; -$userContent-fontSizeH5: .875em !default; -$userContent-fontSizeH6: .85em !default; +$userContent-fontSizeH1: 2em !default; +$userContent-fontSizeH2: 1.5em !default; +$userContent-fontSizeH3: 1.25em !default; +$userContent-fontSizeH4: 1em !default; +$userContent-fontSizeH5: 0.875em !default; +$userContent-fontSizeH6: 0.85em !default; /* -------------------------------------------------------------- *\ Global Overwrites \* -------------------------------------------------------------- */ -$global-heading_topMargin: 1.5 * $global-medium_fontSize; -$global-block_margin: $userContent_fontSize !default; - -$global_spacer: $userContent_fontSize * $global-base_lineHeight !default; -$global-default_timing: 0.35s !default; +$global-heading_topMargin: 1.5 * $global-medium_fontSize; +$global-block_margin: $userContent_fontSize !default; -$global-color_primary: $global-color_vanillaBlue !default; -$global-color_primaryAlt: darken($global-color_primary, 8%) !default; -$global-color_secondary: $global-color_pink !default; +$global_spacer: $userContent_fontSize * $global-base_lineHeight !default; +$global-default_timing: 0.35s !default; -$global-color_bg: $global-color_white !default; -$global-color_fg: $global-color_grey !default; // text color | should have high contrast between $global-color_bg +$global-color_primary: $global-color_vanillaBlue !default; +$global-color_primaryAlt: darken($global-color_primary, 8%) !default; +$global-color_secondary: $global-color_pink !default; -$global-border_color: mix($global-color_fg, $global-color_bg, 24%) !default; // Note it's off by default due to the border width -$global-border-width: 1px; -$global-border-style: solid; -$global_borderRadius: 6px !default; +$global-color_bg: $global-color_white !default; +$global-color_fg: $global-color_grey !default; // text color | should have high contrast between $global-color_bg -$global-body_bg: $global-color_bg !default; +$global-border_color: mix( + $global-color_fg, + $global-color_bg, + 24% +) !default; // Note it's off by default due to the border width +$global-border-width: 1px; +$global-border-style: solid; +$global_borderRadius: 6px !default; -$link-default_color: $global-color_primary !default; -$link-default-hover_color: $global-color_primary !default; -$link-default_visited_color: $global-color_primary !default; +$global-body_bg: $global-color_bg !default; +$link-default_color: $global-color_primary !default; +$link-default-hover_color: $global-color_primary !default; +$link-default_visited_color: $global-color_primary !default; /* -------------------------------------------------------------- *\ Theme Colors \* -------------------------------------------------------------- */ -$theme-border_color: mix($global-color_fg, $global-color_bg, 24%) !default; -$theme-hover_color: mix($global-color_fg, $global-color_bg, 6%) !default; +$theme-border_color: mix($global-color_fg, $global-color_bg, 24%) !default; +$theme-hover_color: mix($global-color_fg, $global-color_bg, 6%) !default; -$theme-link-hover_textDecoration: none !default; +$theme-link-hover_textDecoration: none !default; -$theme-heading_color: $global-color_primary !default; -$theme-heading-hover_color: $global-color_primary !default; +$theme-heading_color: $global-color_primary !default; +$theme-heading-hover_color: $global-color_primary !default; /* -------------------------------------------------------------- *\ Buttons Colors \* -------------------------------------------------------------- */ -$button-basic_fg: $global-color_grey !default; -$button-basic_bg: transparent !default; -$button-basic_border: $global-color_whitesmoke !default; +$button-basic_fg: $global-color_grey !default; +$button-basic_bg: transparent !default; +$button-basic_border: $global-color_whitesmoke !default; -$button-basic-hover_fg: $global-color_primary !default; -$button-basic-hover_bg: transparent !default; -$button-basic-hover_border: $global-color_primary !default; +$button-basic-hover_fg: $global-color_primary !default; +$button-basic-hover_bg: transparent !default; +$button-basic-hover_border: $global-color_primary !default; -$button-primary_fg: $global-color_white !default; -$button-primary_bg: $global-color_primary !default; -$button-primary_border: $global-color_primary !default; +$button-primary_fg: $global-color_white !default; +$button-primary_bg: $global-color_primary !default; +$button-primary_border: $global-color_primary !default; -$button-primary-hover_fg: $global-color_white !default; -$button-primary-hover_bg: $global-color_primaryAlt !default; -$button-primary-hover_border: $global-color_primaryAlt !default; +$button-primary-hover_fg: $global-color_white !default; +$button-primary-hover_bg: $global-color_primaryAlt !default; +$button-primary-hover_border: $global-color_primaryAlt !default; /* -------------------------------------------------------------- *\ Icons \* -------------------------------------------------------------- */ -$icon-large_size: 32px !default; -$icon-default_size: 20px !default; -$icon-small_size: 16px !default; +$icon-large_size: 32px !default; +$icon-default_size: 20px !default; +$icon-small_size: 16px !default; /* -------------------------------------------------------------- *\ Theme User Photos \* -------------------------------------------------------------- */ -$theme-photo_size: 42px !default; -$theme-photo-small_size: 38px !default; -$theme-photo_round: true !default; -$theme-photo_borderRadius: $global_borderRadius !default; +$theme-photo_size: 42px !default; +$theme-photo-small_size: 38px !default; +$theme-photo_round: true !default; +$theme-photo_borderRadius: $global_borderRadius !default; -$theme_stickFooter: true !default; +$theme_stickFooter: true !default; /* -------------------------------------------------------------- *\ Links \* -------------------------------------------------------------- */ -$link-body_fontFamily: $global-body_fontFamily !default; -$link-body_fontWeight: $global-normal_fontWeight !default; -$link-body_fontSize: $global-medium_fontSize !default; +$link-body_fontFamily: $global-body_fontFamily !default; +$link-body_fontWeight: $global-normal_fontWeight !default; +$link-body_fontSize: $global-medium_fontSize !default; -$link-heading_fontFamily: $global-body_fontFamily !default; -$link-heading_fontWeight: $global-bold_fontWeight !default; -$link-heading_fontSize: $global-large_fontSize !default; +$link-heading_fontFamily: $global-body_fontFamily !default; +$link-heading_fontWeight: $global-bold_fontWeight !default; +$link-heading_fontSize: $global-large_fontSize !default; /* -------------------------------------------------------------- *\ Layout \* -------------------------------------------------------------- */ -$global-gutter_size: $global_spacer; -$global-gutter_halfSize: $global-gutter_size / 2; -$global-gutter_quarterSize: $global-gutter_size / 4; +$global-gutter_size: $global_spacer; +$global-gutter_halfSize: $global-gutter_size * 0.5; +$global-gutter_quarterSize: $global-gutter_size * 0.25; /* -------------------------------------------------------------- *\ Body \* -------------------------------------------------------------- */ -$body_bg: $global-body_bg !default; -$body_backgroundImage: "" !default; -$body_backgroundRepeat: no-repeat !default; -$body_backgroundSize: cover !default; -$body_backgroundPosition: center center !default; +$body_bg: $global-body_bg !default; +$body_backgroundImage: "" !default; +$body_backgroundRepeat: no-repeat !default; +$body_backgroundSize: cover !default; +$body_backgroundPosition: center center !default; /* -------------------------------------------------------------- *\ Frame \* -------------------------------------------------------------- */ -$count_borderRadius: 20px !default; -$frame_bg: transparent !default; -$frame_border: none !default; -$frame_boxShadow: none !default; -$frame_padding: $utility-baseUnitTriple !default; -$frame-mobile_padding: $utility-baseUnitDouble !default; +$count_borderRadius: 20px !default; +$frame_bg: transparent !default; +$frame_border: none !default; +$frame_boxShadow: none !default; +$frame_padding: $utility-baseUnitTriple !default; +$frame-mobile_padding: $utility-baseUnitDouble !default; /* -------------------------------------------------------------- *\ Header \* -------------------------------------------------------------- */ -$header_minHeight: 48px !default; -$header_bg: $global-color_primary !default; -$header_fg: $global-color_white !default; -$header-link_color: $global-color_white !default; -$header-link-hover_color: $global-color_white !default; -$header_border: 0 !default; -$header_boxShadow: none !default; +$header_minHeight: 48px !default; +$header_bg: $global-color_primary !default; +$header_fg: $global-color_white !default; +$header-link_color: $global-color_white !default; +$header-link-hover_color: $global-color_white !default; +$header_border: 0 !default; +$header_boxShadow: none !default; -$headerButton_bg: transparent !default; -$headerButton_fg: $header-link_color !default; -$headerButton_borderColor: $header-link_color !default; +$headerButton_bg: transparent !default; +$headerButton_fg: $header-link_color !default; +$headerButton_borderColor: $header-link_color !default; -$headerButton-hover_bg: mix($header-link_color, $header_bg, 12%) !default; -$headerButton-hover_fg: $header-link_color !default; -$headerButton-hover_borderColor: $header-link_color !default; +$headerButton-hover_bg: mix($header-link_color, $header_bg, 12%) !default; +$headerButton-hover_fg: $header-link_color !default; +$headerButton-hover_borderColor: $header-link_color !default; -$headerMebutton_bg: transparent !default; -$headerMebutton_fg: $header-link_color !default; -$headerMebutton-hover_fg: $header-link_color !default; -$headerMebutton-hover_bg: mix($global-color_fg, $header_bg, 26%) !default; -$headerMebutton-active_bg: mix($headerMebutton_fg, $header_bg, 12%) !default; +$headerMebutton_bg: transparent !default; +$headerMebutton_fg: $header-link_color !default; +$headerMebutton-hover_fg: $header-link_color !default; +$headerMebutton-hover_bg: mix($global-color_fg, $header_bg, 26%) !default; +$headerMebutton-active_bg: mix($headerMebutton_fg, $header_bg, 12%) !default; -$headerMeBoxAlert_fg: $headerMebutton_fg !default; -$headerMeBoxAlert_bg: $global-color_secondary !default; -$headerMeBoxAlert_borderColor: $global-color_secondary !default; +$headerMeBoxAlert_fg: $headerMebutton_fg !default; +$headerMeBoxAlert_bg: $global-color_secondary !default; +$headerMeBoxAlert_borderColor: $global-color_secondary !default; /* -------------------------------------------------------------- *\ Navigation \* -------------------------------------------------------------- */ -$navigation_bg: $global-color_bg !default; -$navigation_fg: $global-color_fg !default; -$navigation-boxShadow: 0 5px 10px 0 rgba(0,0,0,0.30); -$navigation-hover_fg: $global-color_primary !default; -$navigation_border: darken($navigation_bg, 8%)!default; -$navigation_borderRadius: $global_borderRadius !default; -$navigation_fontSize: $global-large_fontSize !default; -$navigation_paddingSide: $utility-baseUnitDouble !default; -$navigation_vertical_paddingSide: 0 !default; -$navigation-item_height: 32px !default; -$navigation-item_fontWeight: $global-normal_fontWeight !default; -$navigation-easing-transition: cubic-bezier(0, 1, 0, 1) !default; - -$navigationButton_bg: $button-primary_bg !default; -$navigationButton_fg: $button-primary_fg !default; -$navigationButton_border: $button-primary_border !default; - -$navigationButton-hover_bg: $button-primary-hover_bg !default; -$navigationButton-hover_fg: $button-primary-hover_fg !default; -$navigationButton-hover_border: $button-primary-hover_border !default; +$navigation_bg: $global-color_bg !default; +$navigation_fg: $global-color_fg !default; +$navigation-boxShadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3); +$navigation-hover_fg: $global-color_primary !default; +$navigation_border: darken($navigation_bg, 8%) !default; +$navigation_borderRadius: $global_borderRadius !default; +$navigation_fontSize: $global-large_fontSize !default; +$navigation_paddingSide: $utility-baseUnitDouble !default; +$navigation_vertical_paddingSide: 0 !default; +$navigation-item_height: 32px !default; +$navigation-item_fontWeight: $global-normal_fontWeight !default; +$navigation-easing-transition: cubic-bezier(0, 1, 0, 1) !default; + +$navigationButton_bg: $button-primary_bg !default; +$navigationButton_fg: $button-primary_fg !default; +$navigationButton_border: $button-primary_border !default; + +$navigationButton-hover_bg: $button-primary-hover_bg !default; +$navigationButton-hover_fg: $button-primary-hover_fg !default; +$navigationButton-hover_border: $button-primary-hover_border !default; /* -------------------------------------------------------------- *\ Mobile Mebox \* -------------------------------------------------------------- */ -$MobileMeBox_bg: mix($global-color_white, $header_bg, 12%) !default; -$MobileMeBox_fg: $header-link_color !default; -$MobileMeBox-hover_fg: $header-link-hover_color !default; +$MobileMeBox_bg: mix($global-color_white, $header_bg, 12%) !default; +$MobileMeBox_fg: $header-link_color !default; +$MobileMeBox-hover_fg: $header-link-hover_color !default; -$MobileMeBoxAlert_fg: $MobileMeBox_fg !default; -$MobileMeBoxAlert_bg: $global-color_secondary !default; -$MobileMeBoxAlert_borderColor: $global-color_secondary !default; +$MobileMeBoxAlert_fg: $MobileMeBox_fg !default; +$MobileMeBoxAlert_bg: $global-color_secondary !default; +$MobileMeBoxAlert_borderColor: $global-color_secondary !default; /* -------------------------------------------------------------- *\ Content \* -------------------------------------------------------------- */ -$content_bg: transparent !default; -$content_border: none !default; -$content_padding: 0 !default; -$content_borderRadius: 0 !default; +$content_bg: transparent !default; +$content_border: none !default; +$content_padding: 0 !default; +$content_borderRadius: 0 !default; /* -------------------------------------------------------------- *\ Panel \* -------------------------------------------------------------- */ -$panel_toLeft: false !default; -$panel_width: 220px !default; -$panel_gap: 40px !default; -$panel_bg: $content_bg !default; -$panel_fg: $global-color_fg !default; -$panel_padding: $content_padding !default; -$panel-border: $content_border !default; -$panel_borderRadius: $content_borderRadius !default; +$panel_toLeft: false !default; +$panel_width: 220px !default; +$panel_gap: 40px !default; +$panel_bg: $content_bg !default; +$panel_fg: $global-color_fg !default; +$panel_padding: $content_padding !default; +$panel-border: $content_border !default; +$panel_borderRadius: $content_borderRadius !default; -$panel-item-showIcons: false !default; -$panel-item_spacing: 0 !default; -$panel-item_borderRadius: $global_borderRadius !default; -$panel-item_padding: 5px !default; +$panel-item-showIcons: false !default; +$panel-item_spacing: 0 !default; +$panel-item_borderRadius: $global_borderRadius !default; +$panel-item_padding: 5px !default; -$panel-item_bg: transparent !default; -$panel-item_fg: $link-default_color !default; -$panel-item_border: none !default; +$panel-item_bg: transparent !default; +$panel-item_fg: $link-default_color !default; +$panel-item_border: none !default; -$panel-item-hover_bg: transparent !default; -$panel-item-hover_fg: $global-color_primary !default; -$panel-item-hover_border: $panel-item_border !default; +$panel-item-hover_bg: transparent !default; +$panel-item-hover_fg: $global-color_primary !default; +$panel-item-hover_border: $panel-item_border !default; /* -------------------------------------------------------------- *\ Footer \* -------------------------------------------------------------- */ -$footer_bg: $theme-hover_color !default; -$footer_color: $global-color_fg !default; -$footer-link_color: $global-color_primary !default; -$footer-link-hover_color: $global-color_primaryAlt !default; -$footer-base_fontSize: $global-medium_fontSize !default; -$footer-base_lineHeight: $global-base_lineHeight !default; +$footer_bg: $theme-hover_color !default; +$footer_color: $global-color_fg !default; +$footer-link_color: $global-color_primary !default; +$footer-link-hover_color: $global-color_primaryAlt !default; +$footer-base_fontSize: $global-medium_fontSize !default; +$footer-base_lineHeight: $global-base_lineHeight !default; /* -------------------------------------------------------------- *\ Components \* -------------------------------------------------------------- */ -$component-item_spacing: 0 !default; -$component-vertical_padding: 16px !default; -$component-horizontal_padding: 8px !default; -$component-base_padding: #{$component-vertical_padding} #{$component-horizontal_padding} !default; -$component_bg: $content_bg !default; -$component_borderWidth: 1px !default; -$component_lateralBorder: false !default; -$component_borderColor: $theme-border_color !default; -$component_border: #{$theme-border_color} #{$component_borderWidth} solid !default; -$component_boxShadow: none !default; -$component_borderRadius: 0 !default; - -$component-header_bg: transparent !default; - -$component-base_color: $global-color_fg !default; -$component-base_fontSize: $global-medium_fontSize !default; -$component-base_fontWeight: $global-normal_fontWeight !default; -$component-base_lineHeight: $global-base_lineHeight !default; - -$component-title_color: $global-color_fg !default; -$component-title-hover_color: $global-color_primary !default; -$component-title_fontSize: $global-large_fontSize !default; -$component-title_fontWeight: $global-semibold_fontWeight !default; -$component-title_lineHeight: $global-base_lineHeight !default; - -$component-meta_color: mix($global-color_bg, $global-color_fg, 12%) !default; -$component-meta-link_color: $component-meta_color !default; -$component-meta-link-hover_color: $theme-heading-hover_color !default; -$component-meta_fontSize: $global-small_fontSize !default; -$component-meta_fontWeight: $global-normal_fontWeight !default; -$component-meta_lineHeight: $global-base_lineHeight !default; +$component-item_spacing: 0 !default; +$component-vertical_padding: 16px !default; +$component-horizontal_padding: 8px !default; +$component-base_padding: #{$component-vertical_padding} #{$component-horizontal_padding} !default; +$component_bg: $content_bg !default; +$component_borderWidth: 1px !default; +$component_lateralBorder: false !default; +$component_borderColor: $theme-border_color !default; +$component_border: #{$theme-border_color} #{$component_borderWidth} solid !default; +$component_boxShadow: none !default; +$component_borderRadius: 0 !default; + +$component-header_bg: transparent !default; + +$component-base_color: $global-color_fg !default; +$component-base_fontSize: $global-medium_fontSize !default; +$component-base_fontWeight: $global-normal_fontWeight !default; +$component-base_lineHeight: $global-base_lineHeight !default; + +$component-title_color: $global-color_fg !default; +$component-title-hover_color: $global-color_primary !default; +$component-title_fontSize: $global-large_fontSize !default; +$component-title_fontWeight: $global-semibold_fontWeight !default; +$component-title_lineHeight: $global-base_lineHeight !default; + +$component-meta_color: mix($global-color_bg, $global-color_fg, 12%) !default; +$component-meta-link_color: $component-meta_color !default; +$component-meta-link-hover_color: $theme-heading-hover_color !default; +$component-meta_fontSize: $global-small_fontSize !default; +$component-meta_fontWeight: $global-normal_fontWeight !default; +$component-meta_lineHeight: $global-base_lineHeight !default; /* -------------------------------------------------------------- *\ Form Elements \* -------------------------------------------------------------- */ -$formElement_height: $utility-baseUnit * 6; -$formElement_paddingVertical: $utility-baseUnitHalf !default; -$formElement_paddingHorizontal: $utility-baseUnitDouble !default; -$formElement_color: $global-color_black !default; -$formElement_borderColor: lighten($global-color_black, 60%) !default; -$formElement_placeholderColor: $formElement_borderColor !default; -$formElement_border: 1px solid $formElement_borderColor !default; -$formElement_fontSize: $global-medium_fontSize !default; -$formElement_fontWeight: $global-medium_fontSize !default; -$formElement_borderRadius: $global_borderRadius !default; +$formElement_height: $utility-baseUnit * 6; +$formElement_paddingVertical: $utility-baseUnitHalf !default; +$formElement_paddingHorizontal: $utility-baseUnitDouble !default; +$formElement_color: $global-color_black !default; +$formElement_borderColor: lighten($global-color_black, 60%) !default; +$formElement_placeholderColor: $formElement_borderColor !default; +$formElement_border: 1px solid $formElement_borderColor !default; +$formElement_fontSize: $global-medium_fontSize !default; +$formElement_fontWeight: $global-medium_fontSize !default; +$formElement_borderRadius: $global_borderRadius !default; /* -------------------------------------------------------------- *\ Form Buttons \* -------------------------------------------------------------- */ -$formButton_bg: $button-primary_bg !default; -$formButton-hover_bg: $button-primary_hover_fg !default; -$formButton_color: $button-primary_fg !default; -$formButton_fontFamily: $global-body_fontFamily !default; -$formButton_fontWeight: $global-normal_fontWeight !default; -$formButton_fontSize: $global-medium_fontSize !default; -$formButton_maxWidth: 360px !default; -$formButton_padding: $utility-baseUnitDouble !default; -$formButton_height: $formElement_height !default; -$formButton_borderRadius: $formElement_borderRadius !default; -$formButton_border: 1px solid !default; +$formButton_bg: $button-primary_bg !default; +$formButton-hover_bg: $button-primary_hover_fg !default; +$formButton_color: $button-primary_fg !default; +$formButton_fontFamily: $global-body_fontFamily !default; +$formButton_fontWeight: $global-normal_fontWeight !default; +$formButton_fontSize: $global-medium_fontSize !default; +$formButton_maxWidth: 360px !default; +$formButton_padding: $utility-baseUnitDouble !default; +$formButton_height: $formElement_height !default; +$formButton_borderRadius: $formElement_borderRadius !default; +$formButton_border: 1px solid !default; /* -------------------------------------------------------------- *\ HeroBanner \* -------------------------------------------------------------- */ -$herobanner_height: 370px !default; -$herobanner_bg: #3F3E46 !default; -$herobanner_fg: $global-color_white !default; -$herobanner_dropShadow: 0 0 1px $global-color_fg !default; -$herobanner_bgFilter: 0.75 !default; -$herobanner_fontSize: 48px !default; +$herobanner_height: 370px !default; +$herobanner_bg: #3f3e46 !default; +$herobanner_fg: $global-color_white !default; +$herobanner_dropShadow: 0 0 1px $global-color_fg !default; +$herobanner_bgFilter: 0.75 !default; +$herobanner_fontSize: 48px !default; /* -------------------------------------------------------------- *\ Searchbox Featured \* -------------------------------------------------------------- */ -$SearchboxFeaturedBtn_fg: $global-color_white !default; -$SearchboxFeaturedBtn_bg: transparent !default; -$SearchboxFeatured_height: 40px !default; -$SearchboxFeatured_width: 673px !default; -$SearchboxFeatured_border: 1px solid $global-color_white !default; +$SearchboxFeaturedBtn_fg: $global-color_white !default; +$SearchboxFeaturedBtn_bg: transparent !default; +$SearchboxFeatured_height: 40px !default; +$SearchboxFeatured_width: 673px !default; +$SearchboxFeatured_border: 1px solid $global-color_white !default; /* -------------------------------------------------------------- *\ Breakpoints \* -------------------------------------------------------------- */ -$theme-breakpoint_smallMobile: 350px !default; -$theme-breakpoint_mobile: 410px !default; -$theme-breakpoint_smallTable: 768px !default; -$theme-breakpoint_tablet: 992px !default; +$theme-breakpoint_smallMobile: 350px !default; +$theme-breakpoint_mobile: 410px !default; +$theme-breakpoint_smallTable: 768px !default; +$theme-breakpoint_tablet: 992px !default; -$theme-breakpoint_base: $theme-breakpoint_smallTable !default; +$theme-breakpoint_base: $theme-breakpoint_smallTable !default; diff --git a/addons/themes/keystone/src/scss/base/_variables_cerulean.scss b/addons/themes/keystone/src/scss/base/_variables_cerulean.scss index 10ec4ece544..ed81aa409bf 100644 --- a/addons/themes/keystone/src/scss/base/_variables_cerulean.scss +++ b/addons/themes/keystone/src/scss/base/_variables_cerulean.scss @@ -8,111 +8,116 @@ Utility Variables \* -------------------------------------------------------------- */ -$utility-baseUnit: 6px; -$utility-baseUnitHalf: $utility-baseUnit / 2; // Derived -$utility-baseUnitDouble: $utility-baseUnit * 2; // Derived -$utility-baseUnitTriple: $utility-baseUnit * 3; // Derived -$utility-percentage_third: (100% / 3); -$utility-percentage_nineSixteenths: (9 / 16 * 100%); -$utility-SVGEncoding: "data:image/svg+xml,"; +@use "sass:math"; + +$utility-baseUnit: 6px; +$utility-baseUnitHalf: $utility-baseUnit * 0.5; // Derived +$utility-baseUnitDouble: $utility-baseUnit * 2; // Derived +$utility-baseUnitTriple: $utility-baseUnit * 3; // Derived +$utility-percentage_third: math.div(100%, 3); +$utility-percentage_nineSixteenths: (math.div(9, 16) * 100%); +$utility-SVGEncoding: "data:image/svg+xml,"; /* -------------------------------------------------------------- *\ Global Overwrites \* -------------------------------------------------------------- */ -$global_borderRadius: 4px !default; +$global_borderRadius: 4px !default; -$global-color_black: #000; -$global-color_white: #FFF; -$global-color_transparent: transparent; +$global-color_black: #000; +$global-color_white: #fff; +$global-color_transparent: transparent; -$global-color_cerulean: #6B7A8F; -$global-color_apricot: #E77A2F; -$global-color_powderblue: #3d8ac1; +$global-color_cerulean: #6b7a8f; +$global-color_apricot: #e77a2f; +$global-color_powderblue: #3d8ac1; -$global-color_primary: $global-color_powderblue !default; -$global-color_primaryAlt: darken($global-color_primary, 8%) !default; -$global-color_secondary: $global-color_apricot !default; +$global-color_primary: $global-color_powderblue !default; +$global-color_primaryAlt: darken($global-color_primary, 8%) !default; +$global-color_secondary: $global-color_apricot !default; -$global-color_bg: $global-color_white !default; -$global-color_fg: darken(desaturate($global-color_cerulean, 1%), 10%) !default; // text color | should have high contrast between $global-color_bg -$global-medium_fontSize: 14px !default; -$global-block_margin: $global-medium_fontSize !default; +$global-color_bg: $global-color_white !default; +$global-color_fg: darken( + desaturate($global-color_cerulean, 1%), + 10% +) !default; // text color | should have high contrast between $global-color_bg +$global-medium_fontSize: 14px !default; +$global-block_margin: $global-medium_fontSize !default; /* -------------------------------------------------------------- *\ Theme \* -------------------------------------------------------------- */ -$theme-border_color: mix($global-color_fg, $global-color_bg, 24%) !default; +$theme-border_color: mix($global-color_fg, $global-color_bg, 24%) !default; -$theme-link-hover_textDecoration: underline !default; -$theme-photo_size: 52px !default; +$theme-link-hover_textDecoration: underline !default; +$theme-photo_size: 52px !default; /* -------------------------------------------------------------- *\ Header \* -------------------------------------------------------------- */ -$header_minHeight: 50px !default; -$header_bg: $global-color_cerulean !default; -$header_color: $global-color_white !default; -$header-hover_color: $global-color_white !default; -$header_border: 1px solid rgba($header_bg, .3) !default; +$header_minHeight: 50px !default; +$header_bg: $global-color_cerulean !default; +$header_color: $global-color_white !default; +$header-hover_color: $global-color_white !default; +$header_border: 1px solid rgba($header_bg, 0.3) !default; /* -------------------------------------------------------------- *\ Navigation \* -------------------------------------------------------------- */ -$navigation_fg: $global-color_white !default; +$navigation_fg: $global-color_white !default; /* -------------------------------------------------------------- *\ Panel \* -------------------------------------------------------------- */ -$panel-hover_bg: transparent !default; +$panel-hover_bg: transparent !default; -$panel_item-spacing: $utility-baseUnit !default; -$panel-item_padding: $utility-baseUnit !default; -$panel_item-borderRadius: $global_borderRadius !default; +$panel_item-spacing: $utility-baseUnit !default; +$panel-item_padding: $utility-baseUnit !default; +$panel_item-borderRadius: $global_borderRadius !default; /* -------------------------------------------------------------- *\ Footer \* -------------------------------------------------------------- */ -$footer_bg: $global-color_white !default; -$footer_color: $global-color_fg !default; -$footer-link_color: $global-color_secondary !default; -$footer-link-hover_color: darken($global-color_secondary, 8%) !default; +$footer_bg: $global-color_white !default; +$footer_color: $global-color_fg !default; +$footer-link_color: $global-color_secondary !default; +$footer-link-hover_color: darken($global-color_secondary, 8%) !default; /* -------------------------------------------------------------- *\ Navigation \* -------------------------------------------------------------- */ -$navigation_bg: darken($global-color_cerulean, 8%) !default; -$navigation_color: $global-color_white !default; -$navigation_button-bg: $global-color_primary !default; -$navigation_button-hover-bg: $global-color_primaryAlt !default; +$navigation_bg: darken($global-color_cerulean, 8%) !default; +$navigation_color: $global-color_white !default; +$navigation_button-bg: $global-color_primary !default; +$navigation_button-hover-bg: $global-color_primaryAlt !default; /* -------------------------------------------------------------- *\ Hamburger \* -------------------------------------------------------------- */ -$hamburger_color: $global-color_white !default; +$hamburger_color: $global-color_white !default; /* -------------------------------------------------------------- *\ Components \* -------------------------------------------------------------- */ -$component-vertical_padding: $global-block_margin !default; -$component-horizontal_padding: $global-block_margin !default; -$component_lateralBorder: true !default; -$component-item_spacing: $utility-baseUnitDouble !default; -$component_borderWidth: 0 !default; -$component_borderRadius: $global_borderRadius !default; -$component_borderColor: $theme-border_color !default; -$component_boxShadow: 0 1px 4px 0 rgba(0,0,0, .3) !default; +$component-vertical_padding: $global-block_margin !default; +$component-horizontal_padding: $global-block_margin !default; +$component_lateralBorder: true !default; +$component-item_spacing: $utility-baseUnitDouble !default; +$component_borderWidth: 0 !default; +$component_borderRadius: $global_borderRadius !default; +$component_borderColor: $theme-border_color !default; +$component_boxShadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3) !default; /* -------------------------------------------------------------- *\ Pager \* -------------------------------------------------------------- */ -$pager_border: 1px solid $component_borderColor !default; +$pager_border: 1px solid $component_borderColor !default; diff --git a/addons/themes/keystone/src/scss/base/_variables_classic.scss b/addons/themes/keystone/src/scss/base/_variables_classic.scss index ddd8901fa2b..263a301bb7e 100644 --- a/addons/themes/keystone/src/scss/base/_variables_classic.scss +++ b/addons/themes/keystone/src/scss/base/_variables_classic.scss @@ -8,143 +8,147 @@ Global Overwrites \* -------------------------------------------------------------- */ -$global-color_black: #000; -$global-color_white: #FFF; -$global-color_transparent: transparent; +$global-color_black: #000; +$global-color_white: #fff; +$global-color_transparent: transparent; -$global-color_classic: #008cba; -$global-color_coal: #333; -$global-color_steel: #969fa8; -$global-color_grey: #e8e8e8; -$global-color_whitesmoke: #fafafa; +$global-color_classic: #008cba; +$global-color_coal: #333; +$global-color_steel: #969fa8; +$global-color_grey: #e8e8e8; +$global-color_whitesmoke: #fafafa; /* -------------------------------------------------------------- *\ Global Overwrites \* -------------------------------------------------------------- */ -$global-color_primary: $global-color_classic !default; -$global-color_primaryAlt: darken($global-color_primary, 6%) !default; -$global-color_secondary: $global-color_steel !default; +$global-color_primary: $global-color_classic !default; +$global-color_primaryAlt: darken($global-color_primary, 6%) !default; +$global-color_secondary: $global-color_steel !default; -$global-color_bg: $global-color_white !default; -$global-color_fg: $global-color_coal !default; // text color | should have high contrast between $global-color_bg +$global-color_bg: $global-color_white !default; +$global-color_fg: $global-color_coal !default; // text color | should have high contrast between $global-color_bg -$global-border_color: mix($global-color_fg, $global-color_bg, 24%) !default; // Note it's off by default due to the border width -$global-border-width: 1px; -$global-border-style: solid; -$global_borderRadius: 3px !default; +$global-border_color: mix( + $global-color_fg, + $global-color_bg, + 24% +) !default; // Note it's off by default due to the border width +$global-border-width: 1px; +$global-border-style: solid; +$global_borderRadius: 3px !default; -$global-body_bg: $global-color_bg !default; +$global-body_bg: $global-color_bg !default; -$link-default_color: $global-color_primary !default; -$link-default-hover_color: $global-color_primaryAlt !default; -$link-default_visited_color: $global-color_primary !default; +$link-default_color: $global-color_primary !default; +$link-default-hover_color: $global-color_primaryAlt !default; +$link-default_visited_color: $global-color_primary !default; -$theme-link-hover_textDecoration: underline !default; +$theme-link-hover_textDecoration: underline !default; -$theme-border_color: mix($global-color_fg, $global-color_bg, 24%) !default; -$theme-hover_color: mix($global-color_fg, $global-color_bg, 6%) !default; +$theme-border_color: mix($global-color_fg, $global-color_bg, 24%) !default; +$theme-hover_color: mix($global-color_fg, $global-color_bg, 6%) !default; /* -------------------------------------------------------------- *\ Buttons Colors \* -------------------------------------------------------------- */ -$button-basic_fg: $global-color_steel !default; -$button-basic_bg: transparent !default; -$button-basic_border: $global-color_steel !default; +$button-basic_fg: $global-color_steel !default; +$button-basic_bg: transparent !default; +$button-basic_border: $global-color_steel !default; -$button-basic-hover_fg: $global-color_primary !default; -$button-basic-hover_bg: transparent !default; -$button-basic-hover_border: $global-color_primary !default; +$button-basic-hover_fg: $global-color_primary !default; +$button-basic-hover_bg: transparent !default; +$button-basic-hover_border: $global-color_primary !default; -$button-primary_fg: $global-color_white !default; -$button-primary_bg: $global-color_primary !default; -$button-primary_border: $global-color_primary !default; +$button-primary_fg: $global-color_white !default; +$button-primary_bg: $global-color_primary !default; +$button-primary_border: $global-color_primary !default; -$button-primary-hover_fg: $global-color_white !default; -$button-primary-hover_bg: $global-color_primaryAlt !default; -$button-primary-hover_border: $global-color_primaryAlt !default; +$button-primary-hover_fg: $global-color_white !default; +$button-primary-hover_bg: $global-color_primaryAlt !default; +$button-primary-hover_border: $global-color_primaryAlt !default; /* -------------------------------------------------------------- *\ Header \* -------------------------------------------------------------- */ -$header_bg: $global-color_coal !default; -$header_fg: $global-color_white !default; -$header-link_color: $global-color_white !default; -$header-link-hover_color: $global-color_white !default; -$header_border: 0 !default; -$header_boxShadow: none !default; +$header_bg: $global-color_coal !default; +$header_fg: $global-color_white !default; +$header-link_color: $global-color_white !default; +$header-link-hover_color: $global-color_white !default; +$header_border: 0 !default; +$header_boxShadow: none !default; -$headerButton_bg: transparent !default; -$headerButton_fg: $header-link_color !default; -$headerButton_borderColor: $header-link_color !default; +$headerButton_bg: transparent !default; +$headerButton_fg: $header-link_color !default; +$headerButton_borderColor: $header-link_color !default; -$headerButton-hover_bg: mix($header-link_color, $header_bg, 12%) !default; -$headerButton-hover_fg: $header-link_color !default; -$headerButton-hover_borderColor: $header-link_color !default; +$headerButton-hover_bg: mix($header-link_color, $header_bg, 12%) !default; +$headerButton-hover_fg: $header-link_color !default; +$headerButton-hover_borderColor: $header-link_color !default; -$headerMebutton_bg: transparent !default; -$headerMebutton_fg: $header-link_color !default; -$headerMebutton-hover_fg: $header-link_color !default; -$headerMebutton-hover_bg: mix($global-color_white, $header_bg, 12%) !default; -$headerMebutton-active_bg: mix($headerMebutton_fg, $header_bg, 12%) !default; +$headerMebutton_bg: transparent !default; +$headerMebutton_fg: $header-link_color !default; +$headerMebutton-hover_fg: $header-link_color !default; +$headerMebutton-hover_bg: mix($global-color_white, $header_bg, 12%) !default; +$headerMebutton-active_bg: mix($headerMebutton_fg, $header_bg, 12%) !default; -$headerMeBoxAlert_bg: $global-color_primary !default; -$headerMeBoxAlert_borderColor: $global-color_primary !default; +$headerMeBoxAlert_bg: $global-color_primary !default; +$headerMeBoxAlert_borderColor: $global-color_primary !default; /* -------------------------------------------------------------- *\ Navigation \* -------------------------------------------------------------- */ -$navigation_borderRadius: 0 !default; -$navigation_bg: $header_bg !default; -$navigation_fg: $global-color_white !default; -$navigation_border: mix($global-color_white, $header_bg, 8%) !default; +$navigation_borderRadius: 0 !default; +$navigation_bg: $header_bg !default; +$navigation_fg: $global-color_white !default; +$navigation_border: mix($global-color_white, $header_bg, 8%) !default; /* -------------------------------------------------------------- *\ Mebox \* -------------------------------------------------------------- */ -$meboxCount_bg: $global-color_primary !default; -$meboxCount_fg: $global-color_white !default; -$meboxCount_borderColor: $global-color_primary !default; +$meboxCount_bg: $global-color_primary !default; +$meboxCount_fg: $global-color_white !default; +$meboxCount_borderColor: $global-color_primary !default; -$MobileMeBox_bg: mix($global-color_black, $header_bg, 10%) !default; +$MobileMeBox_bg: mix($global-color_black, $header_bg, 10%) !default; -$MobileMeBoxAlert_bg: $global-color_primary !default; -$MobileMeBoxAlert_borderColor: $global-color_primary !default; +$MobileMeBoxAlert_bg: $global-color_primary !default; +$MobileMeBoxAlert_borderColor: $global-color_primary !default; /* -------------------------------------------------------------- *\ Panel \* -------------------------------------------------------------- */ -$panel-item-showIcons: false !default; -$panel-item_spacing: 0 !default; -$panel-item_borderRadius: 0 !default; -$panel-item_border: 1px solid $theme-border_color !default; +$panel-item-showIcons: false !default; +$panel-item_spacing: 0 !default; +$panel-item_borderRadius: 0 !default; +$panel-item_border: 1px solid $theme-border_color !default; -$panel-item_bg: transparent !default; -$panel-item_fg: $global-color_fg !default; -$panel-item_border: none !default; +$panel-item_bg: transparent !default; +$panel-item_fg: $global-color_fg !default; +$panel-item_border: none !default; -$panel-item-hover_bg: $theme-hover_color !default; -$panel-item-hover_fg: $panel-item_fg !default; +$panel-item-hover_bg: $theme-hover_color !default; +$panel-item-hover_fg: $panel-item_fg !default; /* -------------------------------------------------------------- *\ Tags \* -------------------------------------------------------------- */ -$tag_bg: $button-basic_bg !default; -$tag_fg: $button-basic_fg !default; -$tag_borderColor: $button-basic_border !default; -$tag-hover_bg: $button-basic-hover_bg !default; -$tag-hover_fg: $global-color_primary !default; -$tag-hover_borderColor: $global-color_primary !default; +$tag_bg: $button-basic_bg !default; +$tag_fg: $button-basic_fg !default; +$tag_borderColor: $button-basic_border !default; +$tag-hover_bg: $button-basic-hover_bg !default; +$tag-hover_fg: $global-color_primary !default; +$tag-hover_borderColor: $global-color_primary !default; /* -------------------------------------------------------------- *\ Components \* -------------------------------------------------------------- */ -$component_lateralBorder: true !default; -$component_borderRadius: $global_borderRadius !default; +$component_lateralBorder: true !default; +$component_borderRadius: $global_borderRadius !default; diff --git a/addons/themes/keystone/src/scss/base/_variables_coral.scss b/addons/themes/keystone/src/scss/base/_variables_coral.scss index bc2cd762052..9703b436ddd 100644 --- a/addons/themes/keystone/src/scss/base/_variables_coral.scss +++ b/addons/themes/keystone/src/scss/base/_variables_coral.scss @@ -8,124 +8,128 @@ Utility Variables \* -------------------------------------------------------------- */ -$utility-baseUnit: 6px; -$utility-baseUnitHalf: $utility-baseUnit / 2; // Derived -$utility-baseUnitDouble: $utility-baseUnit * 2; // Derived -$utility-baseUnitTriple: $utility-baseUnit * 3; // Derived -$utility-percentage_third: (100% / 3); -$utility-percentage_nineSixteenths: (9 / 16 * 100%); -$utility-SVGEncoding: "data:image/svg+xml,"; +@use "sass:math"; + +$utility-baseUnit: 6px; +$utility-baseUnitHalf: $utility-baseUnit * 0.5; // Derived +$utility-baseUnitDouble: $utility-baseUnit * 2; // Derived +$utility-baseUnitTriple: $utility-baseUnit * 3; // Derived +$utility-percentage_third: math.div(100%, 3); +$utility-percentage_nineSixteenths: (math.div(9, 16) * 100%); +$utility-SVGEncoding: "data:image/svg+xml,"; /* -------------------------------------------------------------- *\ Global Overwrites \* -------------------------------------------------------------- */ -$global_borderRadius: 4px !default; +$global_borderRadius: 4px !default; -$global-color_black: #000; -$global-color_white: #fff; -$global-color_transparent: transparent; +$global-color_black: #000; +$global-color_white: #fff; +$global-color_transparent: transparent; -$global-color_navy: #22252C; -$global-color_butter: #E9B000; -$global-color_coral: #E14658; +$global-color_navy: #22252c; +$global-color_butter: #e9b000; +$global-color_coral: #e14658; -$global-color_primary: $global-color_coral !default; -$global-color_primaryAlt: darken($global-color_primary, 8%) !default; -$global-color_secondary: $global-color_navy !default; +$global-color_primary: $global-color_coral !default; +$global-color_primaryAlt: darken($global-color_primary, 8%) !default; +$global-color_secondary: $global-color_navy !default; -$global-color_bg: $global-color_white !default; -$global-color_fg: darken(desaturate($global-color_primary, 70%), 12%) !default; // text color | should have high contrast between $global-color_bg +$global-color_bg: $global-color_white !default; +$global-color_fg: darken( + desaturate($global-color_primary, 70%), + 12% +) !default; // text color | should have high contrast between $global-color_bg -$global-body_bg: $global-color_bg !default; +$global-body_bg: $global-color_bg !default; /* -------------------------------------------------------------- *\ Theme Colors \* -------------------------------------------------------------- */ -$theme-border_color: rgba(mix($global-color_fg, $global-color_secondary, 34%), .2) !default; -$theme-hover_color: rgba(mix($global-color_fg, $global-color_primary, 12%), .2) !default; +$theme-border_color: rgba(mix($global-color_fg, $global-color_secondary, 34%), 0.2) !default; +$theme-hover_color: rgba(mix($global-color_fg, $global-color_primary, 12%), 0.2) !default; -$theme-link-hover_textDecoration: underline !default; +$theme-link-hover_textDecoration: underline !default; -$theme-heading_color: $global-color_primary !default; -$theme-heading-hover_color: $global-color_primary !default; +$theme-heading_color: $global-color_primary !default; +$theme-heading-hover_color: $global-color_primary !default; /* -------------------------------------------------------------- *\ Header \* -------------------------------------------------------------- */ -$header_minHeight: 48px !default; -$header_bg: $global-color_navy !default; +$header_minHeight: 48px !default; +$header_bg: $global-color_navy !default; /* -------------------------------------------------------------- *\ Navigation \* -------------------------------------------------------------- */ -$navigation_button-bg: $global-color_butter !default; +$navigation_button-bg: $global-color_butter !default; /* -------------------------------------------------------------- *\ Panel \* -------------------------------------------------------------- */ -$panel-item_height: 2.5em !default; -$panel_item-borderRadius: $panel-item_height !default; +$panel-item_height: 2.5em !default; +$panel_item-borderRadius: $panel-item_height !default; /* -------------------------------------------------------------- *\ Footer \* -------------------------------------------------------------- */ -$footer_bg: rgba($global-color_secondary, .2) !default; +$footer_bg: rgba($global-color_secondary, 0.2) !default; /* -------------------------------------------------------------- *\ Navigation \* -------------------------------------------------------------- */ -$navigation_bg: lighten($header_bg, 10%) !default; -$navigation_fg: $global-color_white !default; +$navigation_bg: lighten($header_bg, 10%) !default; +$navigation_fg: $global-color_white !default; -$navigation-hover_fg: $navigation_fg !default; +$navigation-hover_fg: $navigation_fg !default; -$headerMeBoxAlert_fg: $navigation_fg !default; -$headerMeBoxAlert_bg: $global-color_butter !default; -$headerMeBoxAlert_borderColor: $global-color_butter !default; +$headerMeBoxAlert_fg: $navigation_fg !default; +$headerMeBoxAlert_bg: $global-color_butter !default; +$headerMeBoxAlert_borderColor: $global-color_butter !default; /* -------------------------------------------------------------- *\ Components \* -------------------------------------------------------------- */ -$component-item_spacing: 0 !default; - -$component-title_color: $global-color_secondary !default; -$component-title-hover_color: darken($global-color_secondary, 8%) !default; -$component-meta-link-hover_color: darken($global-color_secondary, 8%) !default; +$component-item_spacing: 0 !default; -$component-casual-message_bg: #f3f3f3; -$component-casual-message_borderColor: #c3c3c3; -$component-casual-message_link-color: #676767; +$component-title_color: $global-color_secondary !default; +$component-title-hover_color: darken($global-color_secondary, 8%) !default; +$component-meta-link-hover_color: darken($global-color_secondary, 8%) !default; +$component-casual-message_bg: #f3f3f3; +$component-casual-message_borderColor: #c3c3c3; +$component-casual-message_link-color: #676767; /* -------------------------------------------------------------- *\ Mebox \* -------------------------------------------------------------- */ -$mebox_hover_bg: mix($global-color_black, $header-bg, 12%) !default; +$mebox_hover_bg: mix($global-color_black, $header-bg, 12%) !default; -$MobileMeBox_bg: $navigation_bg !default; +$MobileMeBox_bg: $navigation_bg !default; -$MobileMeBoxAlert_bg: $global-color_primary !default; -$MobileMeBoxAlert_borderColor: $global-color_primary !default; +$MobileMeBoxAlert_bg: $global-color_primary !default; +$MobileMeBoxAlert_borderColor: $global-color_primary !default; /* -------------------------------------------------------------- *\ Form Elements \* -------------------------------------------------------------- */ -$formElement_height: $utility-baseUnit * 6 !default; -$formElement_borderRadius: 18px !default; // $formElement_height / 2 +$formElement_height: $utility-baseUnit * 6 !default; +$formElement_borderRadius: 18px !default; // $formElement_height / 2 /* -------------------------------------------------------------- *\ Buttons \* -------------------------------------------------------------- */ -$formButton_height: $formElement_height !default; -$formButton_borderRadius: 18px !default; // $formButton_height / 2 +$formButton_height: $formElement_height !default; +$formButton_borderRadius: 18px !default; // $formButton_height / 2 diff --git a/addons/themes/keystone/src/scss/base/_variables_dark.scss b/addons/themes/keystone/src/scss/base/_variables_dark.scss index 03fd8604f6f..ab6dcbc419d 100644 --- a/addons/themes/keystone/src/scss/base/_variables_dark.scss +++ b/addons/themes/keystone/src/scss/base/_variables_dark.scss @@ -8,150 +8,147 @@ Global Overwrites \* -------------------------------------------------------------- */ -$global-color_black: #000; -$global-color_white: #fff; -$global-color_transparent: transparent; +$global-color_black: #000; +$global-color_white: #fff; +$global-color_transparent: transparent; -$global-color_void: #1f201f; -$global-color_darkgrey: #202020; -$global-color_grey: #a3a3a3; -$global-color_dijon: #f2ae09; -$global-color_rust: #984B43; +$global-color_void: #1f201f; +$global-color_darkgrey: #202020; +$global-color_grey: #a3a3a3; +$global-color_dijon: #f2ae09; +$global-color_rust: #984b43; -$global-color_primary: $global-color_dijon; -$global-color_primaryAlt: lighten($global-color_primary, 8%); -$global-color_secondary: $global-color_rust !default; +$global-color_primary: $global-color_dijon; +$global-color_primaryAlt: lighten($global-color_primary, 8%); +$global-color_secondary: $global-color_rust !default; -$global-color_bg: $global-color_black !default; -$global-color_fg: $global-color_white !default; // text color | should have high contrast between $global-color_bg +$global-color_bg: $global-color_black !default; +$global-color_fg: $global-color_white !default; // text color | should have high contrast between $global-color_bg -$global-body_bg: $global-color_bg !default; +$global-body_bg: $global-color_bg !default; -$global_borderRadius: 6px !default; +$global_borderRadius: 6px !default; /* -------------------------------------------------------------- *\ Theme Colors \* -------------------------------------------------------------- */ -$theme-border_color: mix($global-color_fg, $global-color_bg, 14%) !default; +$theme-border_color: mix($global-color_fg, $global-color_bg, 14%) !default; -$theme-link-hover_textDecoration: none !default; -$theme-photo_round: false !default; +$theme-link-hover_textDecoration: none !default; +$theme-photo_round: false !default; -$theme-heading_color: $global-color_secondary !default; -$theme-heading-hover_color: $global-color_primaryAlt !default; +$theme-heading_color: $global-color_secondary !default; +$theme-heading-hover_color: $global-color_primaryAlt !default; -$link-default_color: $global-color_fg !default; -$link-default-hover_color: $global-color_primary !default; +$link-default_color: $global-color_fg !default; +$link-default-hover_color: $global-color_primary !default; /* -------------------------------------------------------------- *\ Frame \* -------------------------------------------------------------- */ -$frame_backgroundColor: $global-color_black !default; +$frame_backgroundColor: $global-color_black !default; /* -------------------------------------------------------------- *\ Header \* -------------------------------------------------------------- */ -$header_bg: $global-color_void !default; -$header_color: $global-color_white !default; -$header-hover_color: $global-color_white !default; +$header_bg: $global-color_void !default; +$header_color: $global-color_white !default; +$header-hover_color: $global-color_white !default; /* -------------------------------------------------------------- *\ Panel \* -------------------------------------------------------------- */ -$panel-item_height: 2.5em !default; -$panel_item-borderRadius: $panel-item_height !default; +$panel-item_height: 2.5em !default; +$panel_item-borderRadius: $panel-item_height !default; /* -------------------------------------------------------------- *\ Footer \* -------------------------------------------------------------- */ -$footer_bg: mix($global-color_bg, $global-color_fg, 90%) !default; -$footer_color: $global-color_fg !default; -$footer-link_color: $global-color_primary !default; -$footer-link-hover_color: $global-color_primaryAlt !default; +$footer_bg: mix($global-color_bg, $global-color_fg, 90%) !default; +$footer_color: $global-color_fg !default; +$footer-link_color: $global-color_primary !default; +$footer-link-hover_color: $global-color_primaryAlt !default; /* -------------------------------------------------------------- *\ Navigation \* -------------------------------------------------------------- */ -$navigation_backgroundColor: mix($global-color_black, $header-bg, 12%) !default; - +$navigation_backgroundColor: mix($global-color_black, $header-bg, 12%) !default; /* -------------------------------------------------------------- *\ Buttons \* -------------------------------------------------------------- */ -$button-basic_fg: $global-color_primary !default; -$button-basic_bg: transparent !default; -$button-basic_border: $global-color_primary !default; +$button-basic_fg: $global-color_primary !default; +$button-basic_bg: transparent !default; +$button-basic_border: $global-color_primary !default; -$button-basic-hover_fg: $global-color_white !default; -$button-basic-hover_bg: transparent !default; -$button-basic-hover_border: $global-color_white !default; +$button-basic-hover_fg: $global-color_white !default; +$button-basic-hover_bg: transparent !default; +$button-basic-hover_border: $global-color_white !default; -$button-primary_fg: $global-color_white !default; -$button-primary_bg: $global-color_primary !default; -$button-primary_border: $global-color_primary !default; +$button-primary_fg: $global-color_white !default; +$button-primary_bg: $global-color_primary !default; +$button-primary_border: $global-color_primary !default; -$button-primary-hover_fg: $global-color_white !default; -$button-primary-hover_bg: $global-color_primaryAlt !default; -$button-primary-hover_border: $global-color_primaryAlt !default; +$button-primary-hover_fg: $global-color_white !default; +$button-primary-hover_bg: $global-color_primaryAlt !default; +$button-primary-hover_border: $global-color_primaryAlt !default; /* -------------------------------------------------------------- *\ Components \* -------------------------------------------------------------- */ -$component_bg: mix($global-color_bg, $global-color_fg, 97%) !default; -$component-title_color: $global-color_fg !default; -$component-meta-link-hover_color: $global-color_primaryAlt !default; +$component_bg: mix($global-color_bg, $global-color_fg, 97%) !default; +$component-title_color: $global-color_fg !default; +$component-meta-link-hover_color: $global-color_primaryAlt !default; -$component_lateralBorder: true !default; +$component_lateralBorder: true !default; /* -------------------------------------------------------------- *\ Tags \* -------------------------------------------------------------- */ -$tag_borderColor: $button-basic_border !default; -$tag_fg: $button-basic_fg !default; -$tag-hover_bg: $button-basic-hover_bg !default; -$tag-hover_fg: $global-color_primary !default; -$tag-hover_borderColor: $global-color_primary !default; +$tag_borderColor: $button-basic_border !default; +$tag_fg: $button-basic_fg !default; +$tag-hover_bg: $button-basic-hover_bg !default; +$tag-hover_fg: $global-color_primary !default; +$tag-hover_borderColor: $global-color_primary !default; /* -------------------------------------------------------------- *\ Form Elements \* -------------------------------------------------------------- */ -$formElement_height: 36px !default; -$formElement_borderRadius: $global_borderRadius !default; +$formElement_height: 36px !default; +$formElement_borderRadius: $global_borderRadius !default; /* -------------------------------------------------------------- *\ Buttons \* -------------------------------------------------------------- */ -$formButton_height: $formElement_height !default; -$formButton_borderRadius: $global_borderRadius !default; +$formButton_height: $formElement_height !default; +$formButton_borderRadius: $global_borderRadius !default; /* -------------------------------------------------------------- *\ Navigation \* -------------------------------------------------------------- */ -$navigation_bg: $header_bg !default; -$navigation_border: mix($header_bg, $global-color_black, 12%) !default; +$navigation_bg: $header_bg !default; +$navigation_border: mix($header_bg, $global-color_black, 12%) !default; /* -------------------------------------------------------------- *\ Mebox \* -------------------------------------------------------------- */ -$mebox_hover_bg: $frame_backgroundColor !default; +$mebox_hover_bg: $frame_backgroundColor !default; /* -------------------------------------------------------------- *\ Searchbox \* -------------------------------------------------------------- */ -$searchbox-button_color: $global-color_primary !default; - - +$searchbox-button_color: $global-color_primary !default; diff --git a/addons/themes/keystone/src/scss/base/_variables_dusk.scss b/addons/themes/keystone/src/scss/base/_variables_dusk.scss index 3afc532bcf4..97a4831efc6 100644 --- a/addons/themes/keystone/src/scss/base/_variables_dusk.scss +++ b/addons/themes/keystone/src/scss/base/_variables_dusk.scss @@ -8,161 +8,163 @@ Utility Variables \* -------------------------------------------------------------- */ -$utility-baseUnit: 6px; -$utility-baseUnitHalf: $utility-baseUnit / 2; // Derived -$utility-baseUnitDouble: $utility-baseUnit * 2; // Derived -$utility-baseUnitTriple: $utility-baseUnit * 3; // Derived -$utility-percentage_third: (100% / 3); -$utility-percentage_nineSixteenths: (9 / 16 * 100%); -$utility-SVGEncoding: "data:image/svg+xml,"; +@use "sass:math"; + +$utility-baseUnit: 6px; +$utility-baseUnitHalf: $utility-baseUnit * 0.5; // Derived +$utility-baseUnitDouble: $utility-baseUnit * 2; // Derived +$utility-baseUnitTriple: $utility-baseUnit * 3; // Derived +$utility-percentage_third: math.div(100%, 3); +$utility-percentage_nineSixteenths: (math.div(9, 16) * 100%); +$utility-SVGEncoding: "data:image/svg+xml,"; /* -------------------------------------------------------------- *\ Global Overwrites \* -------------------------------------------------------------- */ -$global-color_black: #000; -$global-color_white: #fff; -$global-color_transparent: transparent; +$global-color_black: #000; +$global-color_white: #fff; +$global-color_transparent: transparent; -$global-color_dusk: #111423; -$global-color_evening: #192231; -$global-color_grey: #a3a3a3; -$global-color_cloud: #49648b; -$global-color_sunset: #985E6D; +$global-color_dusk: #111423; +$global-color_evening: #192231; +$global-color_grey: #a3a3a3; +$global-color_cloud: #49648b; +$global-color_sunset: #985e6d; -$global-color_primary: $global-color_sunset !default; -$global-color_primaryAlt: darken($global-color_primary, 8%) !default; -$global-color_secondary: $global-color_cloud !default; +$global-color_primary: $global-color_sunset !default; +$global-color_primaryAlt: darken($global-color_primary, 8%) !default; +$global-color_secondary: $global-color_cloud !default; -$global-color_bg: $global-color_dusk !default; -$global-color_fg: $global-color_white !default; // text color | should have high contrast between $global-color_bg +$global-color_bg: $global-color_dusk !default; +$global-color_fg: $global-color_white !default; // text color | should have high contrast between $global-color_bg -$global_borderRadius: 6px !default; +$global_borderRadius: 6px !default; -$theme-border_color: mix($global-color_fg, $global-color_bg, 12%) !default; +$theme-border_color: mix($global-color_fg, $global-color_bg, 12%) !default; /* -------------------------------------------------------------- *\ Global Overwrites \* -------------------------------------------------------------- */ -$link-default_color: $global-color_grey !default; -$link-default-hover_color: $global-color_primary !default; -$link-default_visited_color: $global-color_primary !default; +$link-default_color: $global-color_grey !default; +$link-default-hover_color: $global-color_primary !default; +$link-default_visited_color: $global-color_primary !default; -$theme-link-hover_textDecoration: underline !default; +$theme-link-hover_textDecoration: underline !default; /* -------------------------------------------------------------- *\ Buttons Colors \* -------------------------------------------------------------- */ -$button-basic_fg: $global-color_white !default; -$button-basic_bg: mix($global-color_white, transparent, 8%) !default; -$button-basic_border: $global-color_white !default; +$button-basic_fg: $global-color_white !default; +$button-basic_bg: mix($global-color_white, transparent, 8%) !default; +$button-basic_border: $global-color_white !default; -$button-basic-hover_fg: $global-color_primary !default; -$button-basic-hover_bg: $button-basic_bg !default; -$button-basic-hover_border: $global-color_primary !default; +$button-basic-hover_fg: $global-color_primary !default; +$button-basic-hover_bg: $button-basic_bg !default; +$button-basic-hover_border: $global-color_primary !default; -$button-primary_fg: $global-color_white !default; -$button-primary_bg: $global-color_primary !default; -$button-primary_border: $global-color_primary !default; +$button-primary_fg: $global-color_white !default; +$button-primary_bg: $global-color_primary !default; +$button-primary_border: $global-color_primary !default; -$button-primary-hover_fg: $global-color_white !default; -$button-primary-hover_bg: $global-color_primaryAlt !default; -$button-primary-hover_border: $global-color_primaryAlt !default; +$button-primary-hover_fg: $global-color_white !default; +$button-primary-hover_bg: $global-color_primaryAlt !default; +$button-primary-hover_border: $global-color_primaryAlt !default; /* -------------------------------------------------------------- *\ Frame \* -------------------------------------------------------------- */ -$frame_bg: $global-color_evening !default; +$frame_bg: $global-color_evening !default; /* -------------------------------------------------------------- *\ Header \* -------------------------------------------------------------- */ -$header_bg: $global-color_bg !default; -$headerMebutton-hover_bg: $frame_bg !default; -$headerMebutton-active_bg: lighten($frame_bg, 8%) !default; +$header_bg: $global-color_bg !default; +$headerMebutton-hover_bg: $frame_bg !default; +$headerMebutton-active_bg: lighten($frame_bg, 8%) !default; /* -------------------------------------------------------------- *\ Footer \* -------------------------------------------------------------- */ -$footer_bg: darken($global-color_evening, 2%) !default; +$footer_bg: darken($global-color_evening, 2%) !default; /* -------------------------------------------------------------- *\ Navigation \* -------------------------------------------------------------- */ -$navigation_bg: mix($global-color_white, $header_bg, 12%) !default; -$navigation_fg: $global-color_fg !default; -$navigation-boxShadow: 0 5px 10px 0 rgba(255,255,255,255.30); -$navigation-hover_fg: $navigation_fg !default; -$navigation_border: darken($navigation_bg, 8%)!default; +$navigation_bg: mix($global-color_white, $header_bg, 12%) !default; +$navigation_fg: $global-color_fg !default; +$navigation-boxShadow: 0 5px 10px 0 rgba(255, 255, 255, 255.3); +$navigation-hover_fg: $navigation_fg !default; +$navigation_border: darken($navigation_bg, 8%) !default; -$navigationButton_bg: $global-color_secondary !default; -$navigationButton_fg: $button-primary_fg !default; -$navigationButton_border: $global-color_secondary !default; +$navigationButton_bg: $global-color_secondary !default; +$navigationButton_fg: $button-primary_fg !default; +$navigationButton_border: $global-color_secondary !default; -$navigationButton-hover_bg: lighten($global-color_secondary, 8%) !default; -$navigationButton-hover_fg: $button-primary-hover_fg !default; -$navigationButton-hover_border: $navigationButton-hover_bg !default; +$navigationButton-hover_bg: lighten($global-color_secondary, 8%) !default; +$navigationButton-hover_fg: $button-primary-hover_fg !default; +$navigationButton-hover_border: $navigationButton-hover_bg !default; /* -------------------------------------------------------------- *\ Mobile Mebox \* -------------------------------------------------------------- */ -$MobileMeBox_bg: mix($global-color_white, $header_bg, 12%) !default; -$MobileMeBox_fg: $global-color_fg !default; +$MobileMeBox_bg: mix($global-color_white, $header_bg, 12%) !default; +$MobileMeBox_fg: $global-color_fg !default; -$MobileMeBoxAlert_fg: $MobileMeBox_fg !default; -$MobileMeBoxAlert_bg: $global-color_secondary !default; -$MobileMeBoxAlert_borderColor: $global-color_secondary !default; +$MobileMeBoxAlert_fg: $MobileMeBox_fg !default; +$MobileMeBoxAlert_bg: $global-color_secondary !default; +$MobileMeBoxAlert_borderColor: $global-color_secondary !default; /* -------------------------------------------------------------- *\ Components \* -------------------------------------------------------------- */ -$component-item_spacing: 0 !default; -$component_bg: $global-color_bg !default; -$component_lateralBorder: true !default; -$component_borderRadius: $global_borderRadius !default; -$component_borderWidth: 1px !default; -$component_borderColor: $theme-border_color !default; +$component-item_spacing: 0 !default; +$component_bg: $global-color_bg !default; +$component_lateralBorder: true !default; +$component_borderRadius: $global_borderRadius !default; +$component_borderWidth: 1px !default; +$component_borderColor: $theme-border_color !default; /* -------------------------------------------------------------- *\ Tags \* -------------------------------------------------------------- */ -$tag_borderRadius: 20px !default; -$tag_bg: transparent !default; -$tag_fg: $global-color_grey !default; -$tag_borderColor: $global-color_grey !default; -$tag-hover_bg: $global-color_primary !default; -$tag-hover_fg: $global-color_white !default; -$tag-hover_borderColor: $global-color_primary !default; +$tag_borderRadius: 20px !default; +$tag_bg: transparent !default; +$tag_fg: $global-color_grey !default; +$tag_borderColor: $global-color_grey !default; +$tag-hover_bg: $global-color_primary !default; +$tag-hover_fg: $global-color_white !default; +$tag-hover_borderColor: $global-color_primary !default; /* -------------------------------------------------------------- *\ Count \* -------------------------------------------------------------- */ -$count_bg: $frame_bg !default; -$count_border: 1px solid transparent !default; -$count_color: $global-color_grey !default; +$count_bg: $frame_bg !default; +$count_border: 1px solid transparent !default; +$count_color: $global-color_grey !default; -$count-hover_bg: $global-color_primary !default; -$count-hover_borderColor: $global-color_primary !default; -$count-hover_color: $global-color_white !default; +$count-hover_bg: $global-color_primary !default; +$count-hover_borderColor: $global-color_primary !default; +$count-hover_color: $global-color_white !default; /* -------------------------------------------------------------- *\ Form Elements \* -------------------------------------------------------------- */ -$formElement_borderRadius: 20px !default; +$formElement_borderRadius: 20px !default; /* -------------------------------------------------------------- *\ Form Buttons \* -------------------------------------------------------------- */ -$formButton_borderRadius: 20px !default; +$formButton_borderRadius: 20px !default; diff --git a/addons/themes/keystone/src/scss/components/_kbicons.scss b/addons/themes/keystone/src/scss/components/_kbicons.scss index 63444ff9fd1..24a222d6278 100644 --- a/addons/themes/keystone/src/scss/components/_kbicons.scss +++ b/addons/themes/keystone/src/scss/components/_kbicons.scss @@ -6,12 +6,12 @@ //kb Icons @font-face { - font-family: 'kbicons'; - src: url('./fonts/kbicons/kbicons.eot?cwtzhl'); - src: url('./fonts/kbicons/kbicons.eot?cwtzhl#iefix') format('embedded-opentype'), - url('./fonts/kbicons/kbicons.ttf?cwtzhl') format('truetype'), - url('./fonts/kbicons/kbicons.woff?cwtzhl') format('woff'), - url('./fonts/kbicons/kbicons.svg?cwtzhl#icomoon') format('svg'); + font-family: "kbicons"; + src: url("./fonts/kbicons/kbicons.eot?cwtzhl"); + src: url("./fonts/kbicons/kbicons.eot?cwtzhl#iefix") format("embedded-opentype"), + url("./fonts/kbicons/kbicons.ttf?cwtzhl") format("truetype"), + url("./fonts/kbicons/kbicons.woff?cwtzhl") format("woff"), + url("./fonts/kbicons/kbicons.svg?cwtzhl#icomoon") format("svg"); font-weight: normal; font-style: normal; } @@ -37,14 +37,14 @@ Variables \* -------------------------------------------------------------- */ -$kbicon-compose: "\e900"; -$kbicon-gear: "\e901"; -$kbicon-message-empty: "\e902"; -$kbicon-message: "\e903"; -$kbicon-notifications-empty: "\e904"; -$kbicon-notifications: "\e905"; -$kbicon-settings: "\e906"; -$kbicon-star-empty: "\e907"; -$kbicon-star: "\e908"; -$kbicon-user-empty: "\e909"; -$kbicon-user: "\e90a"; +$kbicon-compose: "\e900"; +$kbicon-gear: "\e901"; +$kbicon-message-empty: "\e902"; +$kbicon-message: "\e903"; +$kbicon-notifications-empty: "\e904"; +$kbicon-notifications: "\e905"; +$kbicon-settings: "\e906"; +$kbicon-star-empty: "\e907"; +$kbicon-star: "\e908"; +$kbicon-user-empty: "\e909"; +$kbicon-user: "\e90a"; diff --git a/addons/themes/keystone/src/scss/components/_lists_cerulean.scss b/addons/themes/keystone/src/scss/components/_lists_cerulean.scss index c780d2db8c6..1b9f5a65de7 100644 --- a/addons/themes/keystone/src/scss/components/_lists_cerulean.scss +++ b/addons/themes/keystone/src/scss/components/_lists_cerulean.scss @@ -26,8 +26,8 @@ } &::after { - border-right: $arrow-size solid $global-color_white; - left: -#{$arrow-size * 2 - 1px}; + border-right: $arrow-size solid $global-color_white; + left: -#{$arrow-size * 2 - 1px}; } .Item-Header { @@ -62,7 +62,6 @@ } .Item-Header { - .PhotoWrap { top: $component-vertical_padding; left: $component-horizontal_padding; diff --git a/addons/themes/keystone/src/scss/components/_modmessage_coral.scss b/addons/themes/keystone/src/scss/components/_modmessage_coral.scss index 6a0ac134c44..fd7e0f9941f 100644 --- a/addons/themes/keystone/src/scss/components/_modmessage_coral.scss +++ b/addons/themes/keystone/src/scss/components/_modmessage_coral.scss @@ -6,7 +6,6 @@ .CasualMessage, .AlertMessage, .WarningMessage { - a { color: $global-color_fg; } diff --git a/addons/themes/keystone/src/scss/components/_modmessage_dark.scss b/addons/themes/keystone/src/scss/components/_modmessage_dark.scss index e36bf1bd502..27588c3dbd9 100644 --- a/addons/themes/keystone/src/scss/components/_modmessage_dark.scss +++ b/addons/themes/keystone/src/scss/components/_modmessage_dark.scss @@ -1,7 +1,6 @@ .CasualMessage, .AlertMessage, .WarningMessage { - a { color: $global-color_fg; } diff --git a/addons/themes/keystone/src/scss/components/_modmessage_dusk.scss b/addons/themes/keystone/src/scss/components/_modmessage_dusk.scss index e36bf1bd502..27588c3dbd9 100644 --- a/addons/themes/keystone/src/scss/components/_modmessage_dusk.scss +++ b/addons/themes/keystone/src/scss/components/_modmessage_dusk.scss @@ -1,7 +1,6 @@ .CasualMessage, .AlertMessage, .WarningMessage { - a { color: $global-color_fg; } diff --git a/addons/themes/keystone/src/scss/components/_popup_dark.scss b/addons/themes/keystone/src/scss/components/_popup_dark.scss index 159d19a918c..3aace529d9b 100644 --- a/addons/themes/keystone/src/scss/components/_popup_dark.scss +++ b/addons/themes/keystone/src/scss/components/_popup_dark.scss @@ -3,12 +3,12 @@ div.Popup { .Buttons .btn-primary.Close, #Form_Cancel { @include Button( - $global-color_white, - $global-color_primary, - $global-color_primary, - $global-color_primary, - $global-color_white, - $global-color_primary + $global-color_white, + $global-color_primary, + $global-color_primary, + $global-color_primary, + $global-color_white, + $global-color_primary ); } @@ -21,12 +21,12 @@ div.Popup { .groupToolbar .Button.Primary, .BoxButtons .Button.Primary { @include Button( - $global-color_primary, - $global-color_white, - $global-color_primary, - $global-color_primaryAlt, - $global-color_white, - $global-color_primaryAlt + $global-color_primary, + $global-color_white, + $global-color_primary, + $global-color_primaryAlt, + $global-color_white, + $global-color_primaryAlt ); } } diff --git a/addons/themes/keystone/src/scss/components/_popup_dusk.scss b/addons/themes/keystone/src/scss/components/_popup_dusk.scss index 159d19a918c..3aace529d9b 100644 --- a/addons/themes/keystone/src/scss/components/_popup_dusk.scss +++ b/addons/themes/keystone/src/scss/components/_popup_dusk.scss @@ -3,12 +3,12 @@ div.Popup { .Buttons .btn-primary.Close, #Form_Cancel { @include Button( - $global-color_white, - $global-color_primary, - $global-color_primary, - $global-color_primary, - $global-color_white, - $global-color_primary + $global-color_white, + $global-color_primary, + $global-color_primary, + $global-color_primary, + $global-color_white, + $global-color_primary ); } @@ -21,12 +21,12 @@ div.Popup { .groupToolbar .Button.Primary, .BoxButtons .Button.Primary { @include Button( - $global-color_primary, - $global-color_white, - $global-color_primary, - $global-color_primaryAlt, - $global-color_white, - $global-color_primaryAlt + $global-color_primary, + $global-color_white, + $global-color_primary, + $global-color_primaryAlt, + $global-color_white, + $global-color_primaryAlt ); } } diff --git a/addons/themes/keystone/src/scss/components/_searchbox_dark.scss b/addons/themes/keystone/src/scss/components/_searchbox_dark.scss index af7d8fa6c2b..a21f660ed68 100644 --- a/addons/themes/keystone/src/scss/components/_searchbox_dark.scss +++ b/addons/themes/keystone/src/scss/components/_searchbox_dark.scss @@ -24,7 +24,6 @@ .Herobanner .SearchBox { .InputBox.BigInput, #Form_Search { - @include maxWidth { background-color: $global-color_bg; color: $global-color_white; diff --git a/addons/themes/keystone/src/scss/components/_searchbox_dusk.scss b/addons/themes/keystone/src/scss/components/_searchbox_dusk.scss index a6751a2c7b5..35fd5c3580b 100644 --- a/addons/themes/keystone/src/scss/components/_searchbox_dusk.scss +++ b/addons/themes/keystone/src/scss/components/_searchbox_dusk.scss @@ -24,7 +24,6 @@ .Herobanner .SearchBox { .InputBox.BigInput, #Form_Search { - @include maxWidth { background-color: $global-color_bg; color: $global-color_white; diff --git a/addons/themes/keystone/src/scss/sections/_footer_cerulean.scss b/addons/themes/keystone/src/scss/sections/_footer_cerulean.scss index 4b1b4827175..c9b81b72220 100644 --- a/addons/themes/keystone/src/scss/sections/_footer_cerulean.scss +++ b/addons/themes/keystone/src/scss/sections/_footer_cerulean.scss @@ -5,7 +5,6 @@ */ .Footer { - .row:first-child { padding-top: $utility-baseUnitTriple; border-top: 1px solid #{$theme-border_color}; diff --git a/addons/themes/keystone/src/scss/sections/_header_cerulean.scss b/addons/themes/keystone/src/scss/sections/_header_cerulean.scss index 66c4d37fcc3..4140828fe14 100644 --- a/addons/themes/keystone/src/scss/sections/_header_cerulean.scss +++ b/addons/themes/keystone/src/scss/sections/_header_cerulean.scss @@ -5,7 +5,6 @@ */ .MeBox--header .SignInLinks { - .SignInPopup { background-color: $global-color_secondary; border-color: $global-color_secondary; diff --git a/addons/themes/keystone/src/scss/sections/_header_coral.scss b/addons/themes/keystone/src/scss/sections/_header_coral.scss index da8e3714779..e40d91ed99e 100644 --- a/addons/themes/keystone/src/scss/sections/_header_coral.scss +++ b/addons/themes/keystone/src/scss/sections/_header_coral.scss @@ -5,7 +5,6 @@ */ .MeBox--header .SignInLinks { - .SignInPopup { background-color: $global-color_butter; border-color: $global-color_butter; diff --git a/addons/themes/keystone/src/scss/sections/_header_default.scss b/addons/themes/keystone/src/scss/sections/_header_default.scss index 872bdd20d7d..581687a3ae6 100644 --- a/addons/themes/keystone/src/scss/sections/_header_default.scss +++ b/addons/themes/keystone/src/scss/sections/_header_default.scss @@ -32,4 +32,3 @@ // } // } //} - diff --git a/addons/themes/keystone/src/scss/sections/_navigation_dark.scss b/addons/themes/keystone/src/scss/sections/_navigation_dark.scss index ad56966d45b..863e62ee130 100644 --- a/addons/themes/keystone/src/scss/sections/_navigation_dark.scss +++ b/addons/themes/keystone/src/scss/sections/_navigation_dark.scss @@ -5,10 +5,8 @@ */ .Navigation-linkContainer { - &::after { width: calc(100% - (#{$utility-baseUnitTriple} * 2)); margin: 0 auto; } } - diff --git a/addons/themes/keystone/src/scss/sections/_panel_cerulean.scss b/addons/themes/keystone/src/scss/sections/_panel_cerulean.scss index 3a3f19758ba..d8a35dcaefb 100644 --- a/addons/themes/keystone/src/scss/sections/_panel_cerulean.scss +++ b/addons/themes/keystone/src/scss/sections/_panel_cerulean.scss @@ -7,9 +7,7 @@ body.Section-EditProfile .Box, .BoxFilter, .BoxCategories { - .Active { - a { border: $component_border; box-shadow: $component_boxShadow; diff --git a/addons/themes/keystone/src/scss/sections/_panel_classic.scss b/addons/themes/keystone/src/scss/sections/_panel_classic.scss index 61f8da7ddec..032c4b7ac70 100644 --- a/addons/themes/keystone/src/scss/sections/_panel_classic.scss +++ b/addons/themes/keystone/src/scss/sections/_panel_classic.scss @@ -5,10 +5,8 @@ */ .Panel-main { - .BoxFilter.BoxFilter, .Box.Box { - a::before { content: none; } diff --git a/addons/themes/keystone/src/scss/sections/_themeoptions.scss b/addons/themes/keystone/src/scss/sections/_themeoptions.scss index e4c9b716b80..9fd7f42c252 100644 --- a/addons/themes/keystone/src/scss/sections/_themeoptions.scss +++ b/addons/themes/keystone/src/scss/sections/_themeoptions.scss @@ -5,7 +5,6 @@ */ .ThemeOptions-panelToLeft { - .Panel-main { margin-left: 0; } @@ -25,11 +24,11 @@ margin-left: auto; width: calc(100% - #{$panel_width + 50px}); - @include maxWidth($theme-breakpoint_tablet) { - order: initial; - margin-left: 0; - width: auto; - } + @include maxWidth($theme-breakpoint_tablet) { + order: initial; + margin-left: 0; + width: auto; + } } .SearchBox { @@ -42,9 +41,7 @@ } .hideHomepageTitle { - .MainContent { - .HomepageTitle, .PageDescription { display: none; @@ -53,9 +50,7 @@ } .hideContentDescription { - .MainContent { - .PageDescription { display: none; } @@ -70,7 +65,6 @@ } .ThemeOptions-hasHeroBanner.ThemeOptions-hasFeatureSearchbox .Panel { - .SearchBox { display: none; } diff --git a/addons/themes/lavendermoon/README.md b/addons/themes/lavendermoon/README.md index 6ea7528ec54..99103193c7c 100644 --- a/addons/themes/lavendermoon/README.md +++ b/addons/themes/lavendermoon/README.md @@ -73,9 +73,10 @@ yarn build ``` ### Config + Requires the following config: `$Configuration['Garden']['CurrentTheme'] = 'theme-foundation';` `$Configuration['themeFeatures']['DataDrivenTheme'] = true;` -Note that the `DataDrivenTheme` config will use the React based header. +Note that the `DataDrivenTheme` config will use the React based header. diff --git a/addons/themes/lavendermoon/assets/styles.css b/addons/themes/lavendermoon/assets/styles.css index be17d96ab3d..2571b1baee2 100644 --- a/addons/themes/lavendermoon/assets/styles.css +++ b/addons/themes/lavendermoon/assets/styles.css @@ -1,90 +1,90 @@ * { - padding: 0; - margin: 0; - box-sizing: border-box; + padding: 0; + margin: 0; + box-sizing: border-box; } .footer { - background: #f5f5f6; - color: #555A62; - font-size: 14px; - line-height: 1.5; - padding: 18px 0; + background: #f5f5f6; + color: #555a62; + font-size: 14px; + line-height: 1.5; + padding: 18px 0; } .footer-wrap { - padding-left: 18px; - padding-right: 18px; - max-width: 1236px; - margin: 0 auto; + padding-left: 18px; + padding-right: 18px; + max-width: 1236px; + margin: 0 auto; } .footer a { - color: #0291DB; + color: #0291db; } .footer a:hover { - color: #0276b3; + color: #0276b3; } .footer-row { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - align-items: center; - margin: -3px; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + margin: -3px; } .footer-col { - padding: 0 3px; + padding: 0 3px; } .footer-col-copyRight { - justify-content: flex-start; + justify-content: flex-start; } .footer-col-logo { - justify-content: flex-end; + justify-content: flex-end; } .footer-col-copyRight, .footer-col-logo { - flex: 1; - display: flex; + flex: 1; + display: flex; } .logo { - width: 120px; - height: 28px; - opacity: 0.6; + width: 120px; + height: 28px; + opacity: 0.6; } @media screen and (max-width: 768px) { - .footer-row { - display: block; - } - - .footer-col { - width: 100%; - text-align: center; - margin: 6px 0; - } - - .footer-col:first-child { - margin-top: 0; - } - - .footer-col:last-child { - margin-bottom: 0; - } - - .footer-col-copyRight, -.footer-col-logo { - justify-content: center; - } - - .logo { - margin: 0 auto; - } + .footer-row { + display: block; + } + + .footer-col { + width: 100%; + text-align: center; + margin: 6px 0; + } + + .footer-col:first-child { + margin-top: 0; + } + + .footer-col:last-child { + margin-bottom: 0; + } + + .footer-col-copyRight, + .footer-col-logo { + justify-content: center; + } + + .logo { + margin: 0 auto; + } } /*# sourceMappingURL=styles.css.map */ diff --git a/addons/themes/lavendermoon/assets/styles.scss b/addons/themes/lavendermoon/assets/styles.scss index 55ff3604f2a..6c31893aff2 100644 --- a/addons/themes/lavendermoon/assets/styles.scss +++ b/addons/themes/lavendermoon/assets/styles.scss @@ -1,6 +1,6 @@ $color_bg: #f5f5f6; -$color_fg: #555A62; -$color_link: #0291DB; +$color_fg: #555a62; +$color_link: #0291db; $color_link-hover: #0276b3; * { @@ -61,11 +61,10 @@ $color_link-hover: #0276b3; .logo { width: 120px; height: 28px; - opacity: .6; + opacity: 0.6; } @media screen and (max-width: 768px) { - .footer-row { display: block; } diff --git a/addons/themes/lavendermoon/src/scss/custom.scss b/addons/themes/lavendermoon/src/scss/custom.scss index 82152302b55..af16a6aecb4 100644 --- a/addons/themes/lavendermoon/src/scss/custom.scss +++ b/addons/themes/lavendermoon/src/scss/custom.scss @@ -7,4 +7,3 @@ /* --------------- Boilerplate --------------- */ @import "~@vanilla/theme-core/scss/dynamic"; - diff --git a/addons/themes/lavendersun/README.md b/addons/themes/lavendersun/README.md index 6ea7528ec54..99103193c7c 100644 --- a/addons/themes/lavendersun/README.md +++ b/addons/themes/lavendersun/README.md @@ -73,9 +73,10 @@ yarn build ``` ### Config + Requires the following config: `$Configuration['Garden']['CurrentTheme'] = 'theme-foundation';` `$Configuration['themeFeatures']['DataDrivenTheme'] = true;` -Note that the `DataDrivenTheme` config will use the React based header. +Note that the `DataDrivenTheme` config will use the React based header. diff --git a/addons/themes/lavendersun/assets/styles.css b/addons/themes/lavendersun/assets/styles.css index be17d96ab3d..2571b1baee2 100644 --- a/addons/themes/lavendersun/assets/styles.css +++ b/addons/themes/lavendersun/assets/styles.css @@ -1,90 +1,90 @@ * { - padding: 0; - margin: 0; - box-sizing: border-box; + padding: 0; + margin: 0; + box-sizing: border-box; } .footer { - background: #f5f5f6; - color: #555A62; - font-size: 14px; - line-height: 1.5; - padding: 18px 0; + background: #f5f5f6; + color: #555a62; + font-size: 14px; + line-height: 1.5; + padding: 18px 0; } .footer-wrap { - padding-left: 18px; - padding-right: 18px; - max-width: 1236px; - margin: 0 auto; + padding-left: 18px; + padding-right: 18px; + max-width: 1236px; + margin: 0 auto; } .footer a { - color: #0291DB; + color: #0291db; } .footer a:hover { - color: #0276b3; + color: #0276b3; } .footer-row { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - align-items: center; - margin: -3px; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + margin: -3px; } .footer-col { - padding: 0 3px; + padding: 0 3px; } .footer-col-copyRight { - justify-content: flex-start; + justify-content: flex-start; } .footer-col-logo { - justify-content: flex-end; + justify-content: flex-end; } .footer-col-copyRight, .footer-col-logo { - flex: 1; - display: flex; + flex: 1; + display: flex; } .logo { - width: 120px; - height: 28px; - opacity: 0.6; + width: 120px; + height: 28px; + opacity: 0.6; } @media screen and (max-width: 768px) { - .footer-row { - display: block; - } - - .footer-col { - width: 100%; - text-align: center; - margin: 6px 0; - } - - .footer-col:first-child { - margin-top: 0; - } - - .footer-col:last-child { - margin-bottom: 0; - } - - .footer-col-copyRight, -.footer-col-logo { - justify-content: center; - } - - .logo { - margin: 0 auto; - } + .footer-row { + display: block; + } + + .footer-col { + width: 100%; + text-align: center; + margin: 6px 0; + } + + .footer-col:first-child { + margin-top: 0; + } + + .footer-col:last-child { + margin-bottom: 0; + } + + .footer-col-copyRight, + .footer-col-logo { + justify-content: center; + } + + .logo { + margin: 0 auto; + } } /*# sourceMappingURL=styles.css.map */ diff --git a/addons/themes/lavendersun/assets/styles.scss b/addons/themes/lavendersun/assets/styles.scss index 55ff3604f2a..6c31893aff2 100644 --- a/addons/themes/lavendersun/assets/styles.scss +++ b/addons/themes/lavendersun/assets/styles.scss @@ -1,6 +1,6 @@ $color_bg: #f5f5f6; -$color_fg: #555A62; -$color_link: #0291DB; +$color_fg: #555a62; +$color_link: #0291db; $color_link-hover: #0276b3; * { @@ -61,11 +61,10 @@ $color_link-hover: #0276b3; .logo { width: 120px; height: 28px; - opacity: .6; + opacity: 0.6; } @media screen and (max-width: 768px) { - .footer-row { display: block; } diff --git a/addons/themes/theme-boilerplate/README.md b/addons/themes/theme-boilerplate/README.md index 2bae34e4224..c30506320b2 100644 --- a/addons/themes/theme-boilerplate/README.md +++ b/addons/themes/theme-boilerplate/README.md @@ -1,9 +1,8 @@ # Theme Boilerplate - ## Description -It's a starter's kit to build Vanilla Forums custom themes. It contains all files necessary for a theme with customizable styles. +It's a starter's kit to build Vanilla Forums custom themes. It contains all files necessary for a theme with customizable styles. ## Getting Started @@ -11,29 +10,27 @@ Node and Yarn are prerequisites to use this tool. Please download and install th > **Notice**: It is important that you install Node in a way that does not require you to `sudo`. - - 1. Navigate to your theme folder and add the boilerplate package: - ``` - yarn add @vanillaforums/theme-boilerplate - ``` +``` +yarn add @vanillaforums/theme-boilerplate +``` 2. Run the installation command: - ``` - yarn run boilerplate-install my-pretty-theme "My Pretty Theme" - ``` +``` +yarn run boilerplate-install my-pretty-theme "My Pretty Theme" +``` - - Replace `my-pretty-theme` with your theme key. This should be unique and **must exactly match** the folder name, including capitalization. It should also follow the `dashed-lower-case` naming convention. - - Replace `My Pretty Theme` with your theme name (keep the double quotes). This is the name that appears on the dashboard. +- Replace `my-pretty-theme` with your theme key. This should be unique and **must exactly match** the folder name, including capitalization. It should also follow the `dashed-lower-case` naming convention. +- Replace `My Pretty Theme` with your theme name (keep the double quotes). This is the name that appears on the dashboard. 3. This tool also has a build step, provided by the [Vanilla CLI](https://docs.vanillaforums.com/developer/vanilla-cli/). This step is necessary to generate scripts and stylesheets that run in the browser. [Make sure the Vanilla CLI is installed](https://docs.vanillaforums.com/developer/vanilla-cli/installation), then run the following command on the theme folder to build: - ``` - vanilla build - ``` +``` +vanilla build +``` 4. Your theme is ready to be enabled. On your localhost navigate to **Dashboard > Appearance > Themes** and enable your theme. @@ -41,7 +38,7 @@ Node and Yarn are prerequisites to use this tool. Please download and install th You might want to start taking a look at `src/scss/_variables.scss`. There you can find most of the variables you need to customize your theme. -A good starting point is to create variables containing your brand values on the top of the `_variables.scss`, like colors, font family, sizes, etc. Make sure to use the `$theme-` namespace to keep things organized. +A good starting point is to create variables containing your brand values on the top of the `_variables.scss`, like colors, font family, sizes, etc. Make sure to use the `$theme-` namespace to keep things organized. Once your variables are set, you may start customizing! diff --git a/addons/themes/theme-boilerplate/package.json b/addons/themes/theme-boilerplate/package.json index 0f5db9996b7..9a38b5da939 100644 --- a/addons/themes/theme-boilerplate/package.json +++ b/addons/themes/theme-boilerplate/package.json @@ -16,7 +16,7 @@ "boilerplate" ], "author": "Isis Graziatto (https://vanilaforums.com)", - "license": "GPL-2.0-only", + "license": "MIT", "repository": { "type": "git", "url": "git+ssh://git@github.com/vanilla/vanilla-cloud.git" diff --git a/addons/themes/theme-boilerplate/settings/configuration.php b/addons/themes/theme-boilerplate/settings/configuration.php index d7cd01a15f9..cadad8f5bac 100644 --- a/addons/themes/theme-boilerplate/settings/configuration.php +++ b/addons/themes/theme-boilerplate/settings/configuration.php @@ -5,7 +5,7 @@ * @license GPL-2.0-only */ -$Configuration['Garden']['MobileTheme'] = 'keystone'; -$Configuration['Badges']['BadgesModule']['Target'] = 'AfterUserInfo'; -$Configuration['Feature']['NewFlyouts']['Enabled'] = true; -$Configuration['Feature']['DataDrivenTitleBar']['Enabled'] = false; +$Configuration["Garden"]["MobileTheme"] = "keystone"; +$Configuration["Badges"]["BadgesModule"]["Target"] = "AfterUserInfo"; +$Configuration["Feature"]["NewFlyouts"]["Enabled"] = true; +$Configuration["Feature"]["DataDrivenTitleBar"]["Enabled"] = false; diff --git a/addons/themes/theme-boilerplate/setup/boilerplateInstall.js b/addons/themes/theme-boilerplate/setup/boilerplateInstall.js index 56ff8804002..058f45108d2 100755 --- a/addons/themes/theme-boilerplate/setup/boilerplateInstall.js +++ b/addons/themes/theme-boilerplate/setup/boilerplateInstall.js @@ -24,8 +24,7 @@ if (!utils.validateArgs(themeKey, themeName)) { try { //copy addon.json fse.copyFileSync(path.resolve(TOOL_ROOT, "addon.json"), path.resolve(DEST, "addon.json")); - fse.readFile(path.resolve(DEST, "addon.json"), 'utf8', function (err,data) { - + fse.readFile(path.resolve(DEST, "addon.json"), "utf8", function (err, data) { data = data.replace(/theme-boilerplate/g, themeKey); data = data.replace(/Theme Boilerplate/g, themeName); @@ -34,8 +33,7 @@ try { //copy README.md and swap theme name fse.copyFileSync(path.resolve(TOOL_ROOT, "setup/src/README.md"), path.resolve(DEST, "README.md")); - fse.readFile(path.resolve(DEST, "README.md"), 'utf8', function (err,data) { - + fse.readFile(path.resolve(DEST, "README.md"), "utf8", function (err, data) { data = data.replace(/Vanilla Theme Boilerplate/g, themeName); fse.writeFileSync(path.resolve(DEST, "README.md"), data); @@ -52,7 +50,6 @@ try { //create src/ dir fse.mkdir(path.resolve(DEST, "src"), function (err) { - //create scss folder sctructure fse.mkdirSync(path.resolve(DEST, "src/scss")); fse.mkdirSync(path.resolve(DEST, "src/scss/base")); @@ -64,7 +61,10 @@ try { fse.copyFileSync(path.resolve(TOOL_ROOT, "setup/src/custom.scss"), path.resolve(DEST, "src/scss/custom.scss")); //copy _variables.scss - fse.copyFileSync(path.resolve(TOOL_ROOT, "src/scss/base/_variables.scss"), path.resolve(DEST, "src/scss/base/_variables.scss")); + fse.copyFileSync( + path.resolve(TOOL_ROOT, "src/scss/base/_variables.scss"), + path.resolve(DEST, "src/scss/base/_variables.scss"), + ); //create js folder fse.mkdirSync(path.resolve(DEST, "src/js")); @@ -80,7 +80,6 @@ try { fse.copySync(path.resolve(TOOL_ROOT, "settings"), path.resolve(DEST, "settings")); console.log("Boilerplate successfully installed!"); - } catch (err) { console.error(err.message); } diff --git a/addons/themes/theme-boilerplate/setup/src/README.md b/addons/themes/theme-boilerplate/setup/src/README.md index 0f5ce4b0b29..aab43f864ad 100644 --- a/addons/themes/theme-boilerplate/setup/src/README.md +++ b/addons/themes/theme-boilerplate/setup/src/README.md @@ -1,14 +1,12 @@ # Vanilla Theme Boilerplate - ## Description Custom theme for Vanilla Theme Boilerplate. - ## Notes -- This theme needs the `Feature.NewFlyouts.Enabled` config set as `true` for the flyouts to work properly. +- This theme needs the `Feature.NewFlyouts.Enabled` config set as `true` for the flyouts to work properly. ## Building Styles / Javascript / Images @@ -26,6 +24,4 @@ vanilla build --watch to build your styles/js/images. - - Documentation for the CLI can be found [here](https://docs.vanillaforums.com/developer/vanilla-cli/#build-tools). diff --git a/addons/themes/theme-boilerplate/setup/utils.js b/addons/themes/theme-boilerplate/setup/utils.js index 420d54ff132..6040455919a 100644 --- a/addons/themes/theme-boilerplate/setup/utils.js +++ b/addons/themes/theme-boilerplate/setup/utils.js @@ -6,33 +6,32 @@ module.exports = { convertToDashedCase: function (str) { - if(str === undefined){ + if (str === undefined) { console.error('Execute installation command followed by the theme-key and "Theme Name"'); return; } - return str.toLowerCase().replace(/-/g, ''); + return str.toLowerCase().replace(/-/g, ""); }, convertToPascalCase: function (str) { - if(str === undefined){ + if (str === undefined) { console.error('Execute installation command followed by the theme-key and "Theme Name"'); return; } - var splitStr = str.toLowerCase().split('-'); + var splitStr = str.toLowerCase().split("-"); for (var i = 0; i < splitStr.length; i++) { // assign it back to the array splitStr[i] = splitStr[i].charAt(0).toUpperCase() + splitStr[i].substring(1); } //remove special characters and return the joined string - splitStr = splitStr.join(''); - return splitStr.replace(/[^\w\s]/gi, ''); + splitStr = splitStr.join(""); + return splitStr.replace(/[^\w\s]/gi, ""); }, validateArgs: function (themeKey, themeName) { var valid = true; - if(themeKey === undefined || themeName === undefined){ - valid = false; + if (themeKey === undefined || themeName === undefined) { + valid = false; } return valid; - } + }, }; - diff --git a/addons/themes/theme-boilerplate/structure-variables.md b/addons/themes/theme-boilerplate/structure-variables.md index f0a627cdec4..4ec45851f89 100644 --- a/addons/themes/theme-boilerplate/structure-variables.md +++ b/addons/themes/theme-boilerplate/structure-variables.md @@ -53,7 +53,7 @@ What about more abstract styles that are applied to multiple blocks? Use the blo $global-button_paddingTop ``` -What about states? Append "_hover" after the sub element. +What about states? Append "\_hover" after the sub element. ``` $vanillaBox-icon_hover_paddingTop @@ -63,75 +63,73 @@ $vanillaBox-icon_hover_paddingTop ### Global -- **$global-body_fontFamily**: Main font family. Used pretty much for every text on the theme. -- **$global-body_fontWeight**: Same as above but for font weight. -- **$global-medium_fontSize**: Same as above but for font size. -- **$global-color_primary**: Your brand's primary color. (Recommended to have good contrast with `$global-color_bg`) -- **$global-color_primaryAlt**: A variation of the primary color, usually used on hover state (it might be a darker version of the same color like for example). -- **$global-color_secondary**: Your brand's secondary color. generally used for important call to actions, or hover/focus color. Recommended to have good contrast with `$global-color_bg`) -- **$global-color_bg**: Main color used for background. Adding a dark color to this variable will transform your theme into a dark theme, so make sure the `$global-color_fg` has high contrast with the color declared here. -- **$global-color_fg**: Main color used for foreground elements like text, icons, etc. Should have high contrast between `$global-color_bg`. +- **$global-body_fontFamily**: Main font family. Used pretty much for every text on the theme. +- **$global-body_fontWeight**: Same as above but for font weight. +- **$global-medium_fontSize**: Same as above but for font size. +- **$global-color_primary**: Your brand's primary color. (Recommended to have good contrast with `$global-color_bg`) +- **$global-color_primaryAlt**: A variation of the primary color, usually used on hover state (it might be a darker version of the same color like for example). +- **$global-color_secondary**: Your brand's secondary color. generally used for important call to actions, or hover/focus color. Recommended to have good contrast with `$global-color_bg`) +- **$global-color_bg**: Main color used for background. Adding a dark color to this variable will transform your theme into a dark theme, so make sure the `$global-color_fg` has high contrast with the color declared here. +- **$global-color_fg**: Main color used for foreground elements like text, icons, etc. Should have high contrast between `$global-color_bg`. ### Utility -- **$utility-baseUnitDouble**: Utility variables are heavily inherited through the theme. Editing those variables may break your layout, please do not edit them. -- **$utility-baseUnitHalf**: Utility variables are heavily inherited through the theme. Editing those variables may break your layout, please do not edit them. -- **$utility-baseUnitHalf**: Utility variables are heavily inherited through the theme. Editing those variables may break your layout, please do not edit them. -- **$utility-baseUnitTriple**: Utility variables are heavily inherited through the theme. Editing those variables may break your layout, please do not edit them. -- **$utility-xLarge_padding**: Utility variables are heavily inherited through the theme. Editing those variables may break your layout, please do not edit them. +- **$utility-baseUnitDouble**: Utility variables are heavily inherited through the theme. Editing those variables may break your layout, please do not edit them. +- **$utility-baseUnitHalf**: Utility variables are heavily inherited through the theme. Editing those variables may break your layout, please do not edit them. +- **$utility-baseUnitHalf**: Utility variables are heavily inherited through the theme. Editing those variables may break your layout, please do not edit them. +- **$utility-baseUnitTriple**: Utility variables are heavily inherited through the theme. Editing those variables may break your layout, please do not edit them. +- **$utility-xLarge_padding**: Utility variables are heavily inherited through the theme. Editing those variables may break your layout, please do not edit them. ### Theme -- **$theme-link_color**: Color used on links. -- **$theme-link-hover_color**: Color used on links, but on hover state. -- **$theme-link-hover_textDecoration**: Value to be used to decorate links on hover state. Usually it's set to `none` or `underline`. +- **$theme-link_color**: Color used on links. +- **$theme-link-hover_color**: Color used on links, but on hover state. +- **$theme-link-hover_textDecoration**: Value to be used to decorate links on hover state. Usually it's set to `none` or `underline`. ### Frame -- **$frame_backgroundColor**: Color used for background inside the theme frame. -- **$frame_backgroundImage**: Main background image. You can use this value to blend with `$frame_backgroundColor`. +- **$frame_backgroundColor**: Color used for background inside the theme frame. +- **$frame_backgroundImage**: Main background image. You can use this value to blend with `$frame_backgroundColor`. ### Header -- **$header_bg**: Background color for the header section. -- **$header_border**: Bottom border for the header section. To remove the border set this value to `none`. +- **$header_bg**: Background color for the header section. +- **$header_border**: Bottom border for the header section. To remove the border set this value to `none`. ### Panel -- **$panel_toLeft**: Set `true` on this variable if you want the panel to be on the left. -- **$panel_width**: Width for the panel section. -- **$panel_bg**: Background color for the panel section. -- **$panel_item-border**: Border for each item on the panel. -- **$panel_item-spacing**: Spacing between items on the panel. If the value of this field is `0`, item's borders will colapse. -- **$panel_item-borderRadius**: Border radius for each item on the panel. +- **$panel_toLeft**: Set `true` on this variable if you want the panel to be on the left. +- **$panel_width**: Width for the panel section. +- **$panel_bg**: Background color for the panel section. +- **$panel_item-border**: Border for each item on the panel. +- **$panel_item-spacing**: Spacing between items on the panel. If the value of this field is `0`, item's borders will colapse. +- **$panel_item-borderRadius**: Border radius for each item on the panel. ### Footer -- **$footer_bg**: Background color for the footer section. -- **$footer_color**: Text color for the footer section. -- **footer-link_color**: Color used in links on the footer section. -- **$footer-link-hover_color**: Color used in links on the footer section, but on hover state. +- **$footer_bg**: Background color for the footer section. +- **$footer_color**: Text color for the footer section. +- **footer-link_color**: Color used in links on the footer section. +- **$footer-link-hover_color**: Color used in links on the footer section, but on hover state. ### Component -- **$component-item_spacing**: Space between items. Generally used on categories and discussions lists. If the value of this variable is `0`, the items will collapse. -- **$component_bg**: Background color used on items. -- **$component_borderWidth**: Border width used on items. Border's will always be solid. Seti this value to `0` to remove the border. -- **$component_borderColor**: Color used on items borders. -- **$component_boxShadow**: Box shadow used on items. If `$component-item_spacing` value is `0`, this variable will be used on the list, not on the items. -- **$component_borderRadius**: Box radius used on items. If `$component-item_spacing` value is `0`, this variable will be used on the list, not on the items. +- **$component-item_spacing**: Space between items. Generally used on categories and discussions lists. If the value of this variable is `0`, the items will collapse. +- **$component_bg**: Background color used on items. +- **$component_borderWidth**: Border width used on items. Border's will always be solid. Seti this value to `0` to remove the border. +- **$component_borderColor**: Color used on items borders. +- **$component_boxShadow**: Box shadow used on items. If `$component-item_spacing` value is `0`, this variable will be used on the list, not on the items. +- **$component_borderRadius**: Box radius used on items. If `$component-item_spacing` value is `0`, this variable will be used on the list, not on the items. ### Form Element -- **$formElement_borderColor**: Border color for form inputs and textarea. -- **$formElement_borderRadius**: Border radius for form inputs and textarea. +- **$formElement_borderColor**: Border color for form inputs and textarea. +- **$formElement_borderRadius**: Border radius for form inputs and textarea. ### Form Button -- **$formButton_bg**: Background color used on buttons. -- **$formButton_color**: Text color used on buttons. -- **$formButton_borderRadius**: Border radius used on buttons. If you set this value to the `$formButton_height` , buttons will be round. +- **$formButton_bg**: Background color used on buttons. +- **$formButton_color**: Text color used on buttons. +- **$formButton_borderRadius**: Border radius used on buttons. If you set this value to the `$formButton_height` , buttons will be round. - - -> **Notice:** Some variables relative to specific components are not inside the `_variables.scss` file, those you can find inside the component `.scss` itself. Fell free to dig inside `src/scss/components` to find out more. +> **Notice:** Some variables relative to specific components are not inside the `_variables.scss` file, those you can find inside the component `.scss` itself. Fell free to dig inside `src/scss/components` to find out more. diff --git a/addons/themes/theme-dashboard/views/admin.master.twig b/addons/themes/theme-dashboard/views/admin.master.twig index 91b27e5232e..6fd3f1b71ff 100644 --- a/addons/themes/theme-dashboard/views/admin.master.twig +++ b/addons/themes/theme-dashboard/views/admin.master.twig @@ -7,7 +7,9 @@ {{ renderControllerAsset("Head") }}