├── .gitignore ├── .prettierrc ├── .stylelintrc ├── LICENSE ├── README.md ├── com.mendix.charts.json ├── components.json ├── index-rtl.html ├── index.html ├── login-with-sso.html ├── login.html ├── logo.png ├── manifest-overrides.webmanifest ├── package-lock.json ├── package.json ├── resources └── work-do-more.jpeg ├── robots.txt ├── scripts ├── bump-major.js ├── bump-minor.js ├── bump-patch.js └── lib │ ├── readFile.js │ └── writeFile.js ├── settings-native.json ├── settings.json ├── styles.js ├── styles ├── native │ ├── js │ │ ├── app │ │ │ ├── custom-variables.js │ │ │ └── custom.js │ │ ├── core │ │ │ ├── base │ │ │ │ ├── flex.js │ │ │ │ └── spacing.js │ │ │ ├── helpers │ │ │ │ ├── _functions │ │ │ │ │ ├── adjustfont.js │ │ │ │ │ ├── colorwords.js │ │ │ │ │ ├── convertcolors.js │ │ │ │ │ ├── device.js │ │ │ │ │ ├── mergeobjects.js │ │ │ │ │ └── shadeblendconvert.js │ │ │ │ ├── activityindicator.js │ │ │ │ ├── badge.js │ │ │ │ ├── barchart.js │ │ │ │ ├── buttons.js │ │ │ │ ├── floatingactionbutton.js │ │ │ │ ├── helperclasses.js │ │ │ │ ├── images.js │ │ │ │ ├── linechart.js │ │ │ │ ├── listviews.js │ │ │ │ ├── listviewswipe.js │ │ │ │ ├── maps.js │ │ │ │ ├── progressbar.js │ │ │ │ ├── progresscircle.js │ │ │ │ ├── rangeslider.js │ │ │ │ ├── slider.js │ │ │ │ ├── tabcontainer.js │ │ │ │ ├── textbox.js │ │ │ │ └── typography.js │ │ │ ├── manifest.json │ │ │ ├── variables.js │ │ │ └── widgets │ │ │ │ ├── activityindicator.js │ │ │ │ ├── animation.js │ │ │ │ ├── backgroundimage.js │ │ │ │ ├── badge.js │ │ │ │ ├── barchart.js │ │ │ │ ├── bottomsheet.js │ │ │ │ ├── buttons.js │ │ │ │ ├── carousel.js │ │ │ │ ├── checkbox.js │ │ │ │ ├── colorpicker.js │ │ │ │ ├── container.js │ │ │ │ ├── datepicker.js │ │ │ │ ├── dropdown.js │ │ │ │ ├── feedback.js │ │ │ │ ├── floatingactionbutton.js │ │ │ │ ├── images.js │ │ │ │ ├── introscreen.js │ │ │ │ ├── layoutgrid.js │ │ │ │ ├── linechart.js │ │ │ │ ├── listviews.js │ │ │ │ ├── listviewswipe.js │ │ │ │ ├── maps.js │ │ │ │ ├── navigation.js │ │ │ │ ├── pagetitle.js │ │ │ │ ├── popupmenu.js │ │ │ │ ├── progressbar.js │ │ │ │ ├── progresscircle.js │ │ │ │ ├── qrcode.js │ │ │ │ ├── rangeslider.js │ │ │ │ ├── rating.js │ │ │ │ ├── referenceselector.js │ │ │ │ ├── safeareaview.js │ │ │ │ ├── slider.js │ │ │ │ ├── tabcontainer.js │ │ │ │ ├── textarea.js │ │ │ │ ├── textbox.js │ │ │ │ ├── togglebuttons.js │ │ │ │ ├── typography.js │ │ │ │ ├── videoplayer.js │ │ │ │ └── webview.js │ │ ├── main.js │ │ └── ui_resources │ │ │ └── atlas_ui_resources │ │ │ ├── buildingblocks │ │ │ ├── card.js │ │ │ └── header.js │ │ │ ├── layouts │ │ │ └── layout.js │ │ │ └── pagetemplates │ │ │ ├── inspectiondetails.js │ │ │ ├── maps.js │ │ │ └── page.js │ └── ts │ │ ├── app │ │ ├── custom-variables.ts │ │ └── custom.ts │ │ ├── core │ │ ├── base │ │ │ ├── flex.ts │ │ │ └── spacing.ts │ │ ├── helpers │ │ │ ├── _functions │ │ │ │ ├── adjustfont.ts │ │ │ │ ├── colorwords.ts │ │ │ │ ├── convertcolors.ts │ │ │ │ ├── device.ts │ │ │ │ ├── mergeobjects.ts │ │ │ │ └── shadeblendconvert.ts │ │ │ ├── activityindicator.ts │ │ │ ├── badge.ts │ │ │ ├── barchart.ts │ │ │ ├── buttons.ts │ │ │ ├── floatingactionbutton.ts │ │ │ ├── helperclasses.ts │ │ │ ├── images.ts │ │ │ ├── linechart.ts │ │ │ ├── listviews.ts │ │ │ ├── listviewswipe.ts │ │ │ ├── maps.ts │ │ │ ├── progressbar.ts │ │ │ ├── progresscircle.ts │ │ │ ├── rangeslider.ts │ │ │ ├── slider.ts │ │ │ ├── tabcontainer.ts │ │ │ ├── textbox.ts │ │ │ └── typography.ts │ │ ├── manifest.json │ │ ├── variables.ts │ │ └── widgets │ │ │ ├── activityindicator.ts │ │ │ ├── animation.ts │ │ │ ├── backgroundimage.ts │ │ │ ├── badge.ts │ │ │ ├── barchart.ts │ │ │ ├── bottomsheet.ts │ │ │ ├── buttons.ts │ │ │ ├── carousel.ts │ │ │ ├── checkbox.ts │ │ │ ├── colorpicker.ts │ │ │ ├── container.ts │ │ │ ├── datepicker.ts │ │ │ ├── dropdown.ts │ │ │ ├── feedback.ts │ │ │ ├── floatingactionbutton.ts │ │ │ ├── images.ts │ │ │ ├── introscreen.ts │ │ │ ├── layoutgrid.ts │ │ │ ├── linechart.ts │ │ │ ├── listviews.ts │ │ │ ├── listviewswipe.ts │ │ │ ├── maps.ts │ │ │ ├── navigation.ts │ │ │ ├── pagetitle.ts │ │ │ ├── popupmenu.ts │ │ │ ├── progressbar.ts │ │ │ ├── progresscircle.ts │ │ │ ├── qrcode.ts │ │ │ ├── rangeslider.ts │ │ │ ├── rating.ts │ │ │ ├── referenceselector.ts │ │ │ ├── safeareaview.ts │ │ │ ├── slider.ts │ │ │ ├── tabcontainer.ts │ │ │ ├── textarea.ts │ │ │ ├── textbox.ts │ │ │ ├── togglebuttons.ts │ │ │ ├── typography.ts │ │ │ ├── videoplayer.ts │ │ │ └── webview.ts │ │ ├── main.ts │ │ ├── types │ │ ├── custom-variables.d.ts │ │ ├── helperclass.d.ts │ │ ├── rn.d.ts │ │ ├── variables.d.ts │ │ └── widgets.d.ts │ │ └── ui_resources │ │ └── atlas_ui_resources │ │ ├── buildingblocks │ │ ├── card.ts │ │ └── header.ts │ │ ├── layouts │ │ └── layout.ts │ │ └── pagetemplates │ │ ├── inspectiondetails.ts │ │ ├── maps.ts │ │ └── page.ts └── web │ ├── css │ ├── fonts │ │ ├── glyphicons-halflings-regular.woff │ │ └── glyphicons-halflings-regular.woff2 │ ├── main.css │ └── main.css.map │ └── sass │ ├── app │ ├── _custom-variables.scss │ └── _custom.scss │ ├── core │ ├── _legacy │ │ ├── _mxui.scss │ │ └── bootstrap │ │ │ ├── _bootstrap-rtl.scss │ │ │ ├── _bootstrap.scss │ │ │ └── fonts │ │ │ ├── glyphicons-halflings-regular.woff │ │ │ └── glyphicons-halflings-regular.woff2 │ ├── _variables.scss │ ├── base │ │ ├── _animation.scss │ │ ├── _base.scss │ │ ├── _flex.scss │ │ ├── _login.scss │ │ ├── _reset.scss │ │ ├── _spacing.scss │ │ └── mixins │ │ │ ├── _animations.scss │ │ │ ├── _buttons.scss │ │ │ ├── _groupbox.scss │ │ │ ├── _layout-spacing.scss │ │ │ └── _spacing.scss │ ├── helpers │ │ ├── _alerts.scss │ │ ├── _backgrounds.scss │ │ ├── _buttons.scss │ │ ├── _datagrids.scss │ │ ├── _groupbox.scss │ │ ├── _helperclasses.scss │ │ ├── _images.scss │ │ ├── _labels.scss │ │ ├── _listview.scss │ │ ├── _navigationbar.scss │ │ ├── _navigationtree.scss │ │ ├── _simplemenubar.scss │ │ ├── _tabcontainer.scss │ │ ├── _tables.scss │ │ ├── _templategrids.scss │ │ └── _typography.scss │ ├── manifest.json │ ├── widgets │ │ ├── _alerts.scss │ │ ├── _buttons.scss │ │ ├── _checkbox.scss │ │ ├── _datagrids.scss │ │ ├── _dataview.scss │ │ ├── _datepicker.scss │ │ ├── _glyphicons.scss │ │ ├── _grid.scss │ │ ├── _groupbox.scss │ │ ├── _header.scss │ │ ├── _inputs.scss │ │ ├── _labels.scss │ │ ├── _layoutgrid.scss │ │ ├── _listview.scss │ │ ├── _modals.scss │ │ ├── _navigationbar.scss │ │ ├── _navigationlist.scss │ │ ├── _navigationtree.scss │ │ ├── _popupmenu.scss │ │ ├── _progress.scss │ │ ├── _radiobuttons.scss │ │ ├── _simplemenubar.scss │ │ ├── _tabcontainer.scss │ │ ├── _tables.scss │ │ ├── _templategrids.scss │ │ ├── _timeline.scss │ │ └── _typography.scss │ └── widgetscustom │ │ ├── _dijit-widgets.scss │ │ ├── _progress-bar-theme.scss │ │ ├── _progress-circle-theme.scss │ │ ├── _range-slider-theme.scss │ │ ├── _slider-theme.scss │ │ ├── _star-rating-theme.scss │ │ └── _switchwidget.scss │ ├── main.scss │ └── ui_resources │ └── atlas_ui_resources │ ├── buildingblocks │ ├── _breadcrumb.scss │ ├── _card.scss │ ├── _chat.scss │ ├── _controlgroup.scss │ ├── _formblock.scss │ ├── _heroheader.scss │ ├── _master-detail.scss │ ├── _pageblocks.scss │ ├── _pageheader.scss │ ├── _timeline.scss │ ├── _userprofile.scss │ └── _wizard.scss │ └── layouts │ ├── _layout-atlas-phone.scss │ ├── _layout-atlas-responsive.scss │ ├── _layout-atlas-tablet.scss │ └── _layout-atlas.scss └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | # SASS cache 2 | **/.sass-cache 3 | **/.sass-cache/* 4 | 5 | **/directoryList*.md 6 | 7 | # Mac OS file 8 | .DS_Store 9 | 10 | # Windows File 11 | .thumb 12 | 13 | # VS Code 14 | .vscode/ 15 | 16 | # Git 17 | .gitlab/ 18 | .github/ 19 | 20 | # Zips 21 | **/*.zip 22 | 23 | # Modules 24 | node_modules 25 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": false, 3 | "printWidth": 120, 4 | "proseWrap": "always", 5 | "tabWidth": 4, 6 | "useTabs": false, 7 | "trailingComma": "all", 8 | "bracketSpacing": true, 9 | "semi": true, 10 | "arrowParens": "avoid" 11 | } 12 | -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "stylelint-config-standard", 3 | "rules": { 4 | "indentation": 4, 5 | "string-quotes": "double", 6 | "no-duplicate-selectors": true, 7 | "color-hex-case": "upper", 8 | "color-hex-length": "short", 9 | "selector-combinator-space-after": "always", 10 | "selector-attribute-operator-space-before": "always", 11 | "selector-attribute-operator-space-after": "always", 12 | "selector-attribute-brackets-space-inside": "always", 13 | "declaration-block-trailing-semicolon": "always", 14 | "declaration-colon-space-before": "never", 15 | "declaration-colon-space-after": "always", 16 | "number-leading-zero": "never", 17 | "function-url-quotes": "always", 18 | "font-family-name-quotes": "always-unless-keyword", 19 | "comment-whitespace-inside": "always", 20 | "comment-empty-line-before": "always", 21 | "rule-empty-line-before": "always-multi-line", 22 | "selector-pseudo-element-colon-notation": "single", 23 | "media-feature-range-operator-space-after": "always", 24 | "media-feature-colon-space-after": "always", 25 | "no-descending-specificity": null, 26 | "declaration-colon-newline-after": null, 27 | "value-list-comma-newline-after": null, 28 | "at-rule-no-unknown": [true, { 29 | "ignoreAtRules": ["function", "if", "each", "include", "mixin"] 30 | }] 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Mendix 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /com.mendix.charts.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": { 3 | "css": ["styles/web/css/main.css"], 4 | "js": ["mxclientsystem/mxui/mxui.js"] 5 | }, 6 | "cachebust": "{{cachebust}}" 7 | } 8 | -------------------------------------------------------------------------------- /index-rtl.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Mendix 7 | 8 | 9 | 10 | {{themecss}} 11 | {{appicons}} 12 | {{manifest}} 13 | {{startupimages}} 14 | 15 | 16 | 17 |
18 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Mendix 7 | 8 | 9 | 10 | {{themecss}} 11 | {{appicons}} 12 | {{manifest}} 13 | {{startupimages}} 14 | 15 | 16 | 17 | 18 |
19 | 26 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mendix/Atlas-UI-Framework/7f747180572ea9c0f0321f1659ffdd3bb287b974/logo.png -------------------------------------------------------------------------------- /manifest-overrides.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "background_color": "#FFFFFF" 3 | } 4 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "atlas-ui-framework", 3 | "version": "2.7.2", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "@types/prop-types": { 8 | "version": "15.7.3", 9 | "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz", 10 | "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==", 11 | "dev": true 12 | }, 13 | "@types/react": { 14 | "version": "16.9.50", 15 | "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.50.tgz", 16 | "integrity": "sha512-kPx5YsNnKDJejTk1P+lqThwxN2PczrocwsvqXnjvVvKpFescoY62ZiM3TV7dH1T8lFhlHZF+PE5xUyimUwqEGA==", 17 | "dev": true, 18 | "requires": { 19 | "@types/prop-types": "*", 20 | "csstype": "^3.0.2" 21 | } 22 | }, 23 | "@types/react-native": { 24 | "version": "0.61.23", 25 | "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.61.23.tgz", 26 | "integrity": "sha512-upHmySsrVBDBokWWhYIKkKnpvadsHdioSjbBTu4xl7fjN0yb94KR5ngUOBXsyqAYqQzF+hP6qpvobG9M7Jr6hw==", 27 | "dev": true, 28 | "requires": { 29 | "@types/react": "*" 30 | } 31 | }, 32 | "csstype": { 33 | "version": "3.0.3", 34 | "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.3.tgz", 35 | "integrity": "sha512-jPl+wbWPOWJ7SXsWyqGRk3lGecbar0Cb0OvZF/r/ZU011R4YqiRehgkQ9p4eQfo9DSDLqLL3wHwfxeJiuIsNag==", 36 | "dev": true 37 | }, 38 | "react-native-device-info": { 39 | "version": "5.6.5", 40 | "resolved": "https://registry.npmjs.org/react-native-device-info/-/react-native-device-info-5.6.5.tgz", 41 | "integrity": "sha512-l457wv7gYXSRnm38AH+NpCgKYa1zxxfN0EL8mTBxo+TnasXtk0FZ86zWDLhm4eqpcSH8xpT/+z2MQrATfqCaoA==", 42 | "dev": true 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "atlas-ui-framework", 3 | "version": "2.7.3", 4 | "description": "Mendix Atlas UI is the foundation of making beautiful apps with Mendix. For more information about the framework go to https://atlas.mendix.com.", 5 | "main": "", 6 | "scripts": { 7 | "bump:patch": "node ./scripts/bump-patch.js", 8 | "bump:minor": "node ./scripts/bump-minor.js", 9 | "bump:major": "node ./scripts/bump-major.js" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/mendix/Atlas-UI-Framework.git" 14 | }, 15 | "author": "Mendix", 16 | "license": "MIT", 17 | "bugs": { 18 | "url": "https://github.com/mendix/Atlas-UI-Framework/issues" 19 | }, 20 | "homepage": "https://github.com/mendix/Atlas-UI-Framework#readme", 21 | "devDependencies": { 22 | "@types/react-native": "^0.61.19", 23 | "react-native-device-info": "^5.5.3" 24 | }, 25 | "dependencies": {} 26 | } 27 | -------------------------------------------------------------------------------- /resources/work-do-more.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mendix/Atlas-UI-Framework/7f747180572ea9c0f0321f1659ffdd3bb287b974/resources/work-do-more.jpeg -------------------------------------------------------------------------------- /robots.txt: -------------------------------------------------------------------------------- 1 | # For more information, see https://support.google.com/webmasters/answer/6062608?hl=en&ref_topic=6061961 2 | 3 | User-agent: * 4 | Disallow: 5 | -------------------------------------------------------------------------------- /scripts/bump-major.js: -------------------------------------------------------------------------------- 1 | const { getVersionFilePaths, readVersionFiles } = require("./lib/readFile.js"); 2 | const { writeVersionFiles } = require("./lib/writeFile.js"); 3 | 4 | (() => { 5 | const paths = getVersionFilePaths(); 6 | const files = readVersionFiles(paths); 7 | const versionNumbers = files.pkg.version.split("."); 8 | const majorNumber = Number(versionNumbers[1]) + 1; 9 | const majorVersion = majorNumber + "." + 0 + "." + 0; 10 | files.pkg.version = files.manifest.ts.version = files.manifest.js.version = files.manifest.sass.version = majorVersion; 11 | writeVersionFiles(files, paths); 12 | })(); 13 | -------------------------------------------------------------------------------- /scripts/bump-minor.js: -------------------------------------------------------------------------------- 1 | const { getVersionFilePaths, readVersionFiles } = require("./lib/readFile.js"); 2 | const { writeVersionFiles } = require("./lib/writeFile.js"); 3 | 4 | (() => { 5 | const paths = getVersionFilePaths(); 6 | const files = readVersionFiles(paths); 7 | const versionNumbers = files.pkg.version.split("."); 8 | const minorNumber = Number(versionNumbers[1]) + 1; 9 | const minorVersion = versionNumbers[0] + "." + minorNumber + "." + 0; 10 | files.pkg.version = files.manifest.ts.version = files.manifest.js.version = files.manifest.sass.version = minorVersion; 11 | writeVersionFiles(files, paths); 12 | })(); 13 | -------------------------------------------------------------------------------- /scripts/bump-patch.js: -------------------------------------------------------------------------------- 1 | const { getVersionFilePaths, readVersionFiles } = require("./lib/readFile.js"); 2 | const { writeVersionFiles } = require("./lib/writeFile.js"); 3 | 4 | (() => { 5 | const paths = getVersionFilePaths(); 6 | const files = readVersionFiles(paths); 7 | const versionNumbers = files.pkg.version.split("."); 8 | const patchedNumber = Number(versionNumbers[2]) + 1; 9 | const patchedVersion = versionNumbers[0] + "." + versionNumbers[1] + "." + patchedNumber; 10 | files.pkg.version = files.manifest.ts.version = files.manifest.js.version = files.manifest.sass.version = patchedVersion; 11 | writeVersionFiles(files, paths); 12 | })(); 13 | -------------------------------------------------------------------------------- /scripts/lib/readFile.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | 3 | module.exports.getVersionFilePaths = () => ({ 4 | pkg: path.join(process.cwd(), "package.json"), 5 | manifest: { 6 | ts: path.join(process.cwd(), "styles", "native", "ts", "core", "manifest.json"), 7 | js: path.join(process.cwd(), "styles", "native", "js", "core", "manifest.json"), 8 | sass: path.join(process.cwd(), "styles", "web", "sass", "core", "manifest.json"), 9 | }, 10 | }); 11 | 12 | module.exports.readVersionFiles = paths => ({ 13 | pkg: require(paths.pkg), 14 | manifest: { 15 | ts: require(paths.manifest.ts), 16 | js: require(paths.manifest.js), 17 | sass: require(paths.manifest.sass), 18 | }, 19 | }); 20 | 21 | -------------------------------------------------------------------------------- /scripts/lib/writeFile.js: -------------------------------------------------------------------------------- 1 | const fs = require("fs"); 2 | 3 | module.exports.writeVersionFiles = (files, paths) => { 4 | fs.writeFileSync(paths.pkg, JSON.stringify(files.pkg, null, 4)); 5 | fs.writeFileSync(paths.manifest.js, JSON.stringify(files.manifest.js, null, 4)); 6 | fs.writeFileSync(paths.manifest.ts, JSON.stringify(files.manifest.ts, null, 4)); 7 | fs.writeFileSync(paths.manifest.sass, JSON.stringify(files.manifest.sass, null, 4)); 8 | }; 9 | -------------------------------------------------------------------------------- /styles.js: -------------------------------------------------------------------------------- 1 | import * as custom from "./styles/native/js/app/custom"; 2 | import mergeobjects from "./styles/native/js/core/helpers/_functions/mergeobjects"; 3 | import * as main from "./styles/native/js/main"; 4 | 5 | Object.keys(custom).forEach(key => { 6 | if (main[key]) { 7 | Object.assign(main[key], mergeobjects(main[key], custom[key])); 8 | delete custom[key]; 9 | } 10 | }); 11 | 12 | module.exports = { ...main, ...custom }; 13 | -------------------------------------------------------------------------------- /styles/native/js/app/custom.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mendix/Atlas-UI-Framework/7f747180572ea9c0f0321f1659ffdd3bb287b974/styles/native/js/app/custom.js -------------------------------------------------------------------------------- /styles/native/js/core/helpers/_functions/adjustfont.js: -------------------------------------------------------------------------------- 1 | import { Dimensions, PixelRatio } from "react-native"; 2 | const { height, width } = Dimensions.get("window"); 3 | const pixelRatio = PixelRatio.get(); 4 | /** 5 | * 6 | * Adjust the font size based on the screen size 7 | * 8 | * @param {number} size Font size 9 | * 10 | * @return {number} Returns adjusted font size 11 | */ 12 | function adjustFont(size) { 13 | if (pixelRatio === 2) { 14 | // iphone 5s and older Androids 15 | if (width < 360) 16 | return size * 0.95; 17 | // iphone 5 18 | if (height < 667) 19 | return size; 20 | // iphone 6-6s 21 | else if (height >= 667 && height <= 735) 22 | return size * 1.15; 23 | // older phablets 24 | return size * 1.25; 25 | } 26 | if (pixelRatio === 3) { 27 | // catch Android font scaling on small machines 28 | // where pixel ratio / font scale ratio => 3:3 29 | if (width <= 360) 30 | return size; 31 | // Catch other weird android width sizings 32 | if (height < 667) 33 | return size * 1.15; 34 | // catch in-between size Androids and scale font up 35 | if (height >= 667 && height <= 735) 36 | return size * 1.2; 37 | // catch larger devices 38 | // ie iphone 6s plus / 7 plus / mi note 39 | return size * 1.27; 40 | } 41 | if (pixelRatio === 3.5) { 42 | // catch Android font scaling on small machines 43 | // where pixel ratio / font scale ratio => 3:3 44 | if (width <= 360) 45 | return size; 46 | // Catch other smaller android height sizings 47 | if (height < 667) 48 | return size * 1.2; 49 | // catch in-between size Androids and scale font up 50 | if (height >= 667 && height <= 735) 51 | return size * 1.25; 52 | // catch larger phablet devices 53 | return size * 1.4; 54 | } 55 | // if older device ie pixelRatio !== 2 || 3 || 3.5 56 | return size; 57 | } 58 | // 59 | export { adjustFont as default, height, width }; 60 | -------------------------------------------------------------------------------- /styles/native/js/core/helpers/_functions/device.js: -------------------------------------------------------------------------------- 1 | import { Platform } from "react-native"; 2 | import DeviceInfo from "react-native-device-info"; 3 | // 4 | const isiPhoneModelWithNotch = () => { 5 | const model = DeviceInfo.getDeviceId(); 6 | if (model.includes("iPhone")) { 7 | switch (model) { 8 | case "iPhone10,6": // iPhone X GSM 9 | case "iPhone11,2": // iPhone XS 10 | case "iPhone11,4": // iPhone XS Max 11 | case "iPhone11,6": // iPhone XS Max Global 12 | case "iPhone11,8": // Iphone XR 13 | case "iPhone12,1": // Iphone 11 14 | case "iPhone12,3": // Iphone 11 Pro 15 | case "iPhone12,5": // Iphone 11 Pro Max 16 | return true; 17 | default: 18 | return false; 19 | } 20 | } 21 | return false; 22 | }; 23 | // 24 | export const isIphoneWithNotch = DeviceInfo.hasNotch() || (Platform.OS === "ios" && isiPhoneModelWithNotch()); 25 | -------------------------------------------------------------------------------- /styles/native/js/core/helpers/_functions/mergeobjects.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Merge 2 objects 3 | * This function will look at every object property of the second object and will override the matching property in the first object 4 | * 5 | * @param {object[]} sources Array of 2 objects 6 | * 7 | * @return {object} Returns merged object 8 | * 9 | */ 10 | export default function (...sources) { 11 | function mergeDeep(target, ...sources) { 12 | function isObject(item) { 13 | return item && typeof item === "object" && !Array.isArray(item); 14 | } 15 | if (!sources.length) 16 | return target; 17 | const source = sources.shift(); 18 | if (isObject(target) && isObject(source)) { 19 | Object.keys(source).forEach((key) => { 20 | if (isObject(source[key])) { 21 | if (!target[key]) 22 | Object.assign(target, { [key]: {} }); 23 | mergeDeep(target[key], source[key]); 24 | } 25 | else { 26 | Object.assign(target, { [key]: source[key] }); 27 | } 28 | }); 29 | } 30 | return mergeDeep(target, ...sources); 31 | } 32 | return mergeDeep({}, ...sources); 33 | } 34 | -------------------------------------------------------------------------------- /styles/native/js/core/helpers/activityindicator.js: -------------------------------------------------------------------------------- 1 | import { brand } from "../variables"; 2 | /* 3 | 4 | DISCLAIMER: 5 | Do not change this file because it is core styling. 6 | Customizing core files will make updating Atlas much more difficult in the future. 7 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 8 | 9 | ========================================================================== 10 | Activity Indicator 11 | 12 | //== Design Properties 13 | //## Helper classes to change the look and feel of the widget 14 | ========================================================================== */ 15 | // Activity indicator Colors 16 | export const activityIndicatorSuccess = { 17 | indicator: { 18 | color: brand.success, 19 | }, 20 | }; 21 | export const activityIndicatorWarning = { 22 | indicator: { 23 | color: brand.warning, 24 | }, 25 | }; 26 | export const activityIndicatorDanger = { 27 | indicator: { 28 | color: brand.danger, 29 | }, 30 | }; 31 | -------------------------------------------------------------------------------- /styles/native/js/core/helpers/badge.js: -------------------------------------------------------------------------------- 1 | import { badge } from "../variables"; 2 | /* 3 | 4 | DISCLAIMER: 5 | Do not change this file because it is core styling. 6 | Customizing core files will make updating Atlas much more difficult in the future. 7 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 8 | 9 | ========================================================================== 10 | Badge 11 | 12 | //== Design Properties 13 | //## Helper classes to change the look and feel of the widget 14 | ========================================================================== */ 15 | // Badge Colors 16 | export const badgePrimary = { 17 | container: { 18 | backgroundColor: badge.primary.backgroundColor, 19 | }, 20 | caption: { 21 | color: badge.primary.color, 22 | }, 23 | }; 24 | export const badgeSuccess = { 25 | container: { 26 | backgroundColor: badge.success.backgroundColor, 27 | }, 28 | caption: { 29 | color: badge.success.color, 30 | }, 31 | }; 32 | export const badgeWarning = { 33 | container: { 34 | backgroundColor: badge.warning.backgroundColor, 35 | }, 36 | caption: { 37 | color: badge.warning.color, 38 | }, 39 | }; 40 | export const badgeDanger = { 41 | container: { 42 | backgroundColor: badge.danger.backgroundColor, 43 | }, 44 | caption: { 45 | color: badge.danger.color, 46 | }, 47 | }; 48 | -------------------------------------------------------------------------------- /styles/native/js/core/helpers/barchart.js: -------------------------------------------------------------------------------- 1 | export const barChartSquare = { 2 | chart: { 3 | aspectRatio: 1 4 | } 5 | }; 6 | export const barChartMaxSpace = { 7 | chart: { 8 | flex: 1, 9 | aspectRatio: undefined 10 | } 11 | }; 12 | -------------------------------------------------------------------------------- /styles/native/js/core/helpers/floatingactionbutton.js: -------------------------------------------------------------------------------- 1 | import { brand } from "../variables"; 2 | /* 3 | 4 | DISCLAIMER: 5 | Do not change this file because it is core styling. 6 | Customizing core files will make updating Atlas much more difficult in the future. 7 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 8 | 9 | ========================================================================== 10 | Floating Action Button 11 | 12 | //== Design Properties 13 | //## Helper classes to change the look and feel of the widget 14 | ========================================================================== */ 15 | // Floating Action Button Colors 16 | export const floatingActionButtonSuccess = { 17 | button: { 18 | backgroundColor: brand.success, 19 | }, 20 | }; 21 | export const floatingActionButtonWarning = { 22 | button: { 23 | backgroundColor: brand.warning, 24 | }, 25 | }; 26 | export const floatingActionButtonDanger = { 27 | button: { 28 | backgroundColor: brand.danger, 29 | }, 30 | }; 31 | -------------------------------------------------------------------------------- /styles/native/js/core/helpers/helperclasses.js: -------------------------------------------------------------------------------- 1 | import { Platform } from "react-native"; 2 | import { background, border } from "../variables"; 3 | /* 4 | 5 | DISCLAIMER: 6 | Do not change this file because it is core styling. 7 | Customizing core files will make updating Atlas much more difficult in the future. 8 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 9 | 10 | */ 11 | // Hide on Android 12 | export const hideOnAndroid = { 13 | container: { 14 | display: Platform.select({ ios: "flex", android: "none" }), 15 | }, 16 | }; 17 | // Hide on iOS 18 | export const hideOnIos = { 19 | container: { 20 | display: Platform.select({ ios: "none", android: "flex" }), 21 | }, 22 | }; 23 | // 24 | //== Background Colors 25 | export const backgroundPrimary = { 26 | container: { 27 | backgroundColor: background.primary, 28 | }, 29 | }; 30 | export const backgroundSecondary = { 31 | container: { 32 | backgroundColor: background.secondary, 33 | }, 34 | }; 35 | export const backgroundBrandPrimary = { 36 | container: { 37 | backgroundColor: background.brandPrimary, 38 | }, 39 | }; 40 | export const backgroundBrandSuccess = { 41 | container: { 42 | backgroundColor: background.brandSuccess, 43 | }, 44 | }; 45 | export const backgroundBrandWarning = { 46 | container: { 47 | backgroundColor: background.brandWarning, 48 | }, 49 | }; 50 | export const backgroundBrandDanger = { 51 | container: { 52 | backgroundColor: background.brandDanger, 53 | }, 54 | }; 55 | export const backgroundGray = { 56 | container: { 57 | backgroundColor: background.gray, 58 | }, 59 | }; 60 | // 61 | // borders 62 | export const borderTop = { 63 | container: { 64 | borderColor: border.color, 65 | borderTopWidth: border.width, 66 | }, 67 | }; 68 | export const borderBottom = { 69 | container: { 70 | borderColor: border.color, 71 | borderBottomWidth: border.width, 72 | }, 73 | }; 74 | -------------------------------------------------------------------------------- /styles/native/js/core/helpers/images.js: -------------------------------------------------------------------------------- 1 | import { border } from "../variables"; 2 | /* 3 | 4 | DISCLAIMER: 5 | Do not change this file because it is core styling. 6 | Customizing core files will make updating Atlas much more difficult in the future. 7 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 8 | 9 | ========================================================================== 10 | Image 11 | 12 | //== Design Properties 13 | //## Helper classes to change the look and feel of the widget 14 | ========================================================================== */ 15 | // 16 | // 17 | //== Extra Classes 18 | //## Helper classes to change the look and feel of the widget 19 | //-------------------------------------------------------------------------------------------------------------------// 20 | // Image Sizes 21 | export const thumbnail = { 22 | image: { 23 | width: "100%", 24 | height: "auto", 25 | aspectRatio: 1, 26 | borderRadius: border.radius, 27 | }, 28 | }; 29 | export const avatarSmall = { 30 | image: { 31 | width: 60, 32 | height: 60, 33 | borderRadius: 30, 34 | }, 35 | }; 36 | export const avatarMedium = { 37 | image: { 38 | width: 80, 39 | height: 80, 40 | borderRadius: 40, 41 | }, 42 | }; 43 | export const avatarLarge = { 44 | image: { 45 | width: 120, 46 | height: 120, 47 | borderRadius: 60, 48 | }, 49 | }; 50 | export const inputIcon = { 51 | image: { 52 | width: 30, 53 | height: 30, 54 | }, 55 | }; 56 | -------------------------------------------------------------------------------- /styles/native/js/core/helpers/linechart.js: -------------------------------------------------------------------------------- 1 | export const lineChartSquare = { 2 | chart: { 3 | aspectRatio: 1 4 | } 5 | }; 6 | export const lineChartMaxSpace = { 7 | chart: { 8 | flex: 1, 9 | aspectRatio: undefined 10 | } 11 | }; 12 | -------------------------------------------------------------------------------- /styles/native/js/core/helpers/listviews.js: -------------------------------------------------------------------------------- 1 | import { listView } from "../variables"; 2 | /* 3 | 4 | DISCLAIMER: 5 | Do not change this file because it is core styling. 6 | Customizing core files will make updating Atlas much more difficult in the future. 7 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 8 | 9 | ========================================================================== 10 | List View 11 | 12 | //== Design Properties 13 | //## Helper classes to change the look and feel of the widget 14 | ========================================================================== */ 15 | // List item dividers 16 | export const listItemBorderBottom = { 17 | listItem: { 18 | borderColor: listView.border.color, 19 | borderBottomWidth: listView.border.width, 20 | }, 21 | }; 22 | export const listItemBorderRight = { 23 | listItem: { 24 | borderColor: listView.border.color, 25 | borderRightWidth: listView.border.width, 26 | }, 27 | }; 28 | // 29 | //== Extra Classes 30 | //## Helper classes to change the look and feel of the widget 31 | //-------------------------------------------------------------------------------------------------------------------// 32 | export const listItemIconSmall = { 33 | icon: { 34 | size: 16, 35 | }, 36 | }; 37 | export const listItemIconLarge = { 38 | icon: { 39 | size: 24, 40 | }, 41 | }; 42 | -------------------------------------------------------------------------------- /styles/native/js/core/helpers/listviewswipe.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | DISCLAIMER: 4 | Do not change this file because it is core styling. 5 | Customizing core files will make updating Atlas much more difficult in the future. 6 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 7 | 8 | ========================================================================== 9 | List View Swipe 10 | 11 | //== Design Properties 12 | //## Helper classes to change the look and feel of the widget 13 | ========================================================================== */ 14 | export const listViewSwipeSmallPanels = { 15 | leftAction: { 16 | // PanelSize & All ViewStyle properties are allowed 17 | panelSize: 150, 18 | }, 19 | rightAction: { 20 | // PanelSize & All ViewStyle properties are allowed 21 | panelSize: 150, 22 | }, 23 | }; 24 | export const listViewSwipeLargePanels = { 25 | leftAction: { 26 | // PanelSize & All ViewStyle properties are allowed 27 | panelSize: 250, 28 | }, 29 | rightAction: { 30 | // PanelSize & All ViewStyle properties are allowed 31 | panelSize: 250, 32 | }, 33 | }; 34 | // 35 | //== Extra Classes 36 | //## Helper classes to change the look and feel of the widget 37 | //-------------------------------------------------------------------------------------------------------------------// 38 | -------------------------------------------------------------------------------- /styles/native/js/core/helpers/maps.js: -------------------------------------------------------------------------------- 1 | import { border, brand } from "../variables"; 2 | /* 3 | 4 | DISCLAIMER: 5 | Do not change this file because it is core styling. 6 | Customizing core files will make updating Atlas much more difficult in the future. 7 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 8 | 9 | ========================================================================== 10 | Maps 11 | 12 | //== Design Properties 13 | //## Helper classes to change the look and feel of the widget 14 | ========================================================================== */ 15 | // Maps Colors 16 | export const mapsSuccess = { 17 | marker: { 18 | color: brand.success, 19 | }, 20 | }; 21 | export const mapsWarning = { 22 | marker: { 23 | color: brand.warning, 24 | }, 25 | }; 26 | export const mapsDanger = { 27 | marker: { 28 | color: brand.danger, 29 | }, 30 | }; 31 | // 32 | // Maps Size 33 | export const mapsSquare = { 34 | container: { 35 | aspectRatio: 1 / 1, 36 | }, 37 | }; 38 | export const mapsMaxSpace = { 39 | container: { 40 | flex: 1, 41 | aspectRatio: undefined, 42 | }, 43 | }; 44 | // 45 | //== Extra Classes 46 | //## Helper classes to change the look and feel of the widget 47 | //-------------------------------------------------------------------------------------------------------------------// 48 | // Maps Shape 49 | export const mapsRounded = { 50 | container: { 51 | borderRadius: border.radius, 52 | overflow: "hidden", 53 | }, 54 | }; 55 | -------------------------------------------------------------------------------- /styles/native/js/core/helpers/progressbar.js: -------------------------------------------------------------------------------- 1 | import { Platform } from "react-native"; 2 | import { anyColorToRgbString } from "./_functions/convertcolors"; 3 | import { brand } from "../variables"; 4 | /* 5 | 6 | DISCLAIMER: 7 | Do not change this file because it is core styling. 8 | Customizing core files will make updating Atlas much more difficult in the future. 9 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 10 | 11 | ========================================================================== 12 | Progress Bar 13 | 14 | //== Design Properties 15 | //## Helper classes to change the look and feel of the widget 16 | ========================================================================== */ 17 | // Progress Bar Color 18 | export const progressBarSuccess = { 19 | bar: { 20 | borderColor: Platform.select({ ios: brand.success }), 21 | backgroundColor: Platform.select({ android: `rgba(${anyColorToRgbString(brand.success)},0.2)` }), 22 | }, 23 | fill: { 24 | backgroundColor: brand.success, 25 | }, 26 | }; 27 | export const progressBarWarning = { 28 | bar: { 29 | borderColor: Platform.select({ ios: brand.warning }), 30 | backgroundColor: Platform.select({ android: `rgba(${anyColorToRgbString(brand.warning)},0.2)` }), 31 | }, 32 | fill: { 33 | backgroundColor: brand.warning, 34 | }, 35 | }; 36 | export const progressBarDanger = { 37 | bar: { 38 | borderColor: Platform.select({ ios: brand.danger }), 39 | backgroundColor: Platform.select({ android: `rgba(${anyColorToRgbString(brand.danger)},0.2)` }), 40 | }, 41 | fill: { 42 | backgroundColor: brand.danger, 43 | }, 44 | }; 45 | // 46 | // Progress Bar Size 47 | export const progressBarSmall = { 48 | bar: { 49 | height: 3, 50 | borderRadius: Platform.select({ ios: 2 }), 51 | }, 52 | }; 53 | export const progressBarLarge = { 54 | bar: { 55 | height: 10, 56 | borderRadius: Platform.select({ ios: 8 }), 57 | }, 58 | }; 59 | -------------------------------------------------------------------------------- /styles/native/js/core/helpers/progresscircle.js: -------------------------------------------------------------------------------- 1 | import { brand, contrast, font } from "../variables"; 2 | /* 3 | 4 | DISCLAIMER: 5 | Do not change this file because it is core styling. 6 | Customizing core files will make updating Atlas much more difficult in the future. 7 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 8 | 9 | ========================================================================== 10 | Progress Circle 11 | 12 | //== Design Properties 13 | //## Helper classes to change the look and feel of the widget 14 | ========================================================================== */ 15 | // Progress Circle Color 16 | export const progressCircleSuccess = { 17 | fill: { 18 | backgroundColor: brand.success, 19 | }, 20 | text: { 21 | color: contrast.regular, 22 | }, 23 | }; 24 | export const progressCircleWarning = { 25 | fill: { 26 | backgroundColor: brand.warning, 27 | }, 28 | text: { 29 | color: contrast.regular, 30 | }, 31 | }; 32 | export const progressCircleDanger = { 33 | fill: { 34 | backgroundColor: brand.danger, 35 | }, 36 | text: { 37 | color: contrast.regular, 38 | }, 39 | }; 40 | export const progressCircleGray = { 41 | fill: { 42 | backgroundColor: contrast.regular, 43 | }, 44 | text: { 45 | color: contrast.regular, 46 | }, 47 | }; 48 | // 49 | // Sizes 50 | export const progressCircleSmall = { 51 | circle: { 52 | size: 50, 53 | }, 54 | fill: { 55 | width: 3, 56 | }, 57 | text: { 58 | fontSize: font.sizeSmall, 59 | }, 60 | }; 61 | -------------------------------------------------------------------------------- /styles/native/js/core/helpers/rangeslider.js: -------------------------------------------------------------------------------- 1 | import { sliderDanger, sliderSuccess, sliderWarning } from "./slider"; 2 | /* 3 | 4 | DISCLAIMER: 5 | Do not change this file because it is core styling. 6 | Customizing core files will make updating Atlas much more difficult in the future. 7 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 8 | 9 | ========================================================================== 10 | Range Slider 11 | 12 | //== Design Properties 13 | //## Helper classes to change the look and feel of the widget 14 | ========================================================================== */ 15 | // Range Slider Color 16 | export const rangeSliderSuccess = sliderSuccess; 17 | export const rangeSliderWarning = sliderWarning; 18 | export const rangeSliderDanger = sliderDanger; 19 | -------------------------------------------------------------------------------- /styles/native/js/core/helpers/slider.js: -------------------------------------------------------------------------------- 1 | import { Platform } from "react-native"; 2 | import { brand, contrast } from "../variables"; 3 | /* 4 | 5 | DISCLAIMER: 6 | Do not change this file because it is core styling. 7 | Customizing core files will make updating Atlas much more difficult in the future. 8 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 9 | 10 | ========================================================================== 11 | Slider 12 | 13 | //== Design Properties 14 | //## Helper classes to change the look and feel of the widget 15 | ========================================================================== */ 16 | // Slider Color 17 | export const sliderSuccess = { 18 | highlight: { 19 | backgroundColor: brand.success, 20 | }, 21 | highlightDisabled: { 22 | backgroundColor: Platform.select({ ios: brand.success, android: contrast.low }), 23 | }, 24 | }; 25 | export const sliderWarning = { 26 | highlight: { 27 | backgroundColor: brand.warning, 28 | }, 29 | highlightDisabled: { 30 | backgroundColor: Platform.select({ ios: brand.warning, android: contrast.low }), 31 | }, 32 | }; 33 | export const sliderDanger = { 34 | highlight: { 35 | backgroundColor: brand.danger, 36 | }, 37 | highlightDisabled: { 38 | backgroundColor: Platform.select({ ios: brand.danger, android: contrast.low }), 39 | }, 40 | }; 41 | -------------------------------------------------------------------------------- /styles/native/js/core/helpers/tabcontainer.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | DISCLAIMER: 4 | Do not change this file because it is core styling. 5 | Customizing core files will make updating Atlas much more difficult in the future. 6 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 7 | 8 | ========================================================================== 9 | Tab Container 10 | 11 | //== Design Properties 12 | //## Helper classes to change the look and feel of the widget 13 | ========================================================================== */ 14 | // Enable scroll for the tab bar 15 | export const tabContainerScroll = { 16 | tabBar: { 17 | scrollEnabled: true, 18 | }, 19 | }; 20 | // 21 | //== Extra Classes 22 | //## Helper classes to change the look and feel of the widget 23 | //-------------------------------------------------------------------------------------------------------------------// 24 | // Tab container as content of page 25 | export const tabContainerMinimal = { 26 | container: { 27 | backgroundColor: "transparent", 28 | }, 29 | tabBar: { 30 | backgroundColor: "transparent", 31 | elevation: 0, 32 | }, 33 | }; 34 | -------------------------------------------------------------------------------- /styles/native/js/core/helpers/textbox.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | DISCLAIMER: 4 | Do not change this file because it is core styling. 5 | Customizing core files will make updating Atlas much more difficult in the future. 6 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 7 | 8 | ========================================================================== 9 | Text Box 10 | 11 | //== Design Properties 12 | //## Helper classes to change the look and feel of the widget 13 | ========================================================================== */ 14 | // Text Box Color 15 | export const textInputCapitalizeNone = { 16 | input: { 17 | autoCapitalize: "none", 18 | }, 19 | }; 20 | export const textInputCapitalizeCharacters = { 21 | input: { 22 | autoCapitalize: "characters", 23 | }, 24 | }; 25 | export const textInputCapitalizeWords = { 26 | input: { 27 | autoCapitalize: "words", 28 | }, 29 | }; 30 | export const textInputCapitalizeSentences = { 31 | input: { 32 | autoCapitalize: "sentences", 33 | }, 34 | }; 35 | -------------------------------------------------------------------------------- /styles/native/js/core/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Atlas-UI-Framework", 3 | "version": "2.6.7" 4 | } -------------------------------------------------------------------------------- /styles/native/js/core/widgets/activityindicator.js: -------------------------------------------------------------------------------- 1 | import { brand } from "../variables"; 2 | /* 3 | 4 | DISCLAIMER: 5 | Do not change this file because it is core styling. 6 | Customizing core files will make updating Atlas much more difficult in the future. 7 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 8 | 9 | ========================================================================== 10 | Activity Indicator 11 | 12 | Default Class For Mendix Activity Indicator Widget 13 | ========================================================================== */ 14 | export const com_mendix_widget_native_activityindicator_ActivityIndicator = { 15 | container: { 16 | // All ViewStyle properties are allowed 17 | }, 18 | indicator: { 19 | // Color and size are allowed 20 | color: brand.primary, 21 | size: "large", 22 | }, 23 | }; 24 | -------------------------------------------------------------------------------- /styles/native/js/core/widgets/animation.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | DISCLAIMER: 4 | Do not change this file because it is core styling. 5 | Customizing core files will make updating Atlas much more difficult in the future. 6 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 7 | 8 | ========================================================================== 9 | Animation 10 | 11 | Default Class For Mendix Animation Widget 12 | ========================================================================== */ 13 | export const com_mendix_widget_native_animation_Animation = { 14 | container: {}, 15 | }; 16 | -------------------------------------------------------------------------------- /styles/native/js/core/widgets/backgroundimage.js: -------------------------------------------------------------------------------- 1 | // 2 | // DISCLAIMER: 3 | // Do not change this file because it is core styling. 4 | // Customizing core files will make updating Atlas much more difficult in the future. 5 | // To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 6 | // 7 | /* ========================================================================== 8 | Background Image 9 | 10 | Default Class For Mendix Background Image Widget 11 | ========================================================================== */ 12 | export const com_mendix_widget_native_backgroundimage_BackgroundImage = { 13 | container: { 14 | // All ViewStyle properties are allowed 15 | }, 16 | image: { 17 | // svgColor and all ImageStyle properties are allowed 18 | }, 19 | }; 20 | -------------------------------------------------------------------------------- /styles/native/js/core/widgets/badge.js: -------------------------------------------------------------------------------- 1 | import { badge, font } from "../variables"; 2 | /* 3 | 4 | DISCLAIMER: 5 | Do not change this file because it is core styling. 6 | Customizing core files will make updating Atlas much more difficult in the future. 7 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 8 | 9 | ========================================================================== 10 | Badge 11 | 12 | Default Class For Mendix Badge Widget 13 | ========================================================================== */ 14 | export const com_mendix_widget_native_badge_Badge = { 15 | container: { 16 | // All ViewStyle properties are allowed 17 | borderRadius: badge.borderRadius, 18 | backgroundColor: badge.default.backgroundColor, 19 | paddingVertical: badge.paddingVertical, 20 | paddingHorizontal: badge.paddingHorizontal, 21 | }, 22 | caption: { 23 | // All TextStyle properties are allowed 24 | color: badge.default.color, 25 | fontFamily: font.family, 26 | fontWeight: badge.fontWeight, 27 | marginTop: -1, 28 | }, 29 | }; 30 | -------------------------------------------------------------------------------- /styles/native/js/core/widgets/bottomsheet.js: -------------------------------------------------------------------------------- 1 | import { background, border, brand, contrast, font } from "../variables"; 2 | // 3 | // DISCLAIMER: 4 | // Do not change this file because it is core styling. 5 | // Customizing core files will make updating Atlas much more difficult in the future. 6 | // To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 7 | // 8 | /* ========================================================================== 9 | Bottom Sheet 10 | 11 | Default Class For Mendix Bottom Sheet Widget 12 | ========================================================================== */ 13 | export const com_mendix_widget_native_bottomsheet_BottomSheet = { 14 | container: { 15 | // All ViewStyle properties are allowed 16 | backgroundColor: background.primary, 17 | borderRadius: border.radius, 18 | elevation: 20, 19 | shadowColor: "#000", 20 | shadowOpacity: 0.1, 21 | shadowRadius: 6, 22 | shadowOffset: { 23 | width: 0, 24 | height: -4, 25 | }, 26 | }, 27 | containerWhenExpandedFullscreen: { 28 | // All ViewStyle properties are allowed 29 | height: "100%", 30 | alignSelf: "stretch", 31 | backgroundColor: background.primary, 32 | }, 33 | modal: { 34 | // All ViewStyle properties are allowed 35 | margin: 0, 36 | justifyContent: "flex-end", 37 | }, 38 | modalItems: { 39 | container: { 40 | // rippleColor & All TextStyle properties are allowed 41 | height: 50, 42 | marginTop: 0, 43 | rippleColor: contrast.lower, 44 | backgroundColor: background.primary, 45 | }, 46 | defaultStyle: { 47 | // All TextStyle properties are allowed 48 | fontSize: 16, 49 | color: font.color, 50 | }, 51 | primaryStyle: { 52 | // All TextStyle properties are allowed 53 | fontSize: 16, 54 | color: brand.primary, 55 | }, 56 | dangerStyle: { 57 | // All TextStyle properties are allowed 58 | fontSize: 16, 59 | color: brand.danger, 60 | }, 61 | customStyle: { 62 | // All TextStyle properties are allowed 63 | fontSize: 16, 64 | color: font.color, 65 | }, 66 | }, 67 | }; 68 | -------------------------------------------------------------------------------- /styles/native/js/core/widgets/buttons.js: -------------------------------------------------------------------------------- 1 | import { button, contrast, font } from "../variables"; 2 | /* 3 | 4 | DISCLAIMER: 5 | Do not change this file because it is core styling. 6 | Customizing core files will make updating Atlas much more difficult in the future. 7 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 8 | 9 | ========================================================================== 10 | Button 11 | 12 | Default Class For Mendix Button Widget 13 | ========================================================================== */ 14 | export const ActionButton = { 15 | container: { 16 | // Ripplecolor and all ViewStyle properties are allowed 17 | borderWidth: 1, 18 | borderStyle: "solid", 19 | rippleColor: contrast.lowest, 20 | borderColor: button.primary.borderColor, 21 | backgroundColor: button.primary.backgroundColor, 22 | alignItems: "center", 23 | justifyContent: "center", 24 | borderRadius: button.borderRadius, 25 | paddingVertical: button.paddingVertical, 26 | paddingHorizontal: button.paddingHorizontal, 27 | }, 28 | containerDisabled: { 29 | // All ViewStyle properties are allowed 30 | borderColor: button.primary.borderColorDisabled, 31 | backgroundColor: button.primary.backgroundColorDisabled, 32 | }, 33 | icon: { 34 | // size and color are allowed 35 | color: button.primary.color, 36 | size: button.fontSizeIcon, 37 | }, 38 | iconDisabled: { 39 | // size and color are allowed 40 | color: button.primary.colorDisabled, 41 | }, 42 | caption: { 43 | // All TextStyle properties are allowed 44 | color: button.primary.color, 45 | fontSize: button.fontSize, 46 | fontFamily: font.family, 47 | fontWeight: button.fontWeight, 48 | }, 49 | captionDisabled: { 50 | // All TextStyle properties are allowed 51 | color: button.primary.colorDisabled, 52 | }, 53 | }; 54 | // 55 | // Default style for button inside a header 56 | export const ActionButtonHeader = { 57 | container: { 58 | borderColor: button.header.borderColor, 59 | backgroundColor: button.header.backgroundColor, 60 | paddingLeft: button.header.paddingLeft, 61 | paddingRight: button.header.paddingRight, 62 | }, 63 | icon: { 64 | color: button.header.color, 65 | size: button.header.fontSizeIcon, 66 | }, 67 | caption: { 68 | color: button.header.color, 69 | fontSize: button.header.fontSize, 70 | fontFamily: font.family, 71 | }, 72 | }; 73 | -------------------------------------------------------------------------------- /styles/native/js/core/widgets/colorpicker.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | DISCLAIMER: 4 | Do not change this file because it is core styling. 5 | Customizing core files will make updating Atlas much more difficult in the future. 6 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 7 | 8 | ========================================================================== 9 | Color Picker 10 | 11 | Default Class For Mendix Color Picker Widget 12 | ========================================================================== */ 13 | export const com_mendix_widget_native_colorpicker_ColorPicker = { 14 | container: { 15 | // All ViewStyle properties are allowed 16 | }, 17 | thumbnail: { 18 | // All ViewStyle properties are allowed 19 | }, 20 | }; 21 | -------------------------------------------------------------------------------- /styles/native/js/core/widgets/container.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | DISCLAIMER: 4 | Do not change this file because it is core styling. 5 | Customizing core files will make updating Atlas much more difficult in the future. 6 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 7 | 8 | ========================================================================== 9 | Container 10 | 11 | Default Class For Mendix Container Widget 12 | ========================================================================== */ 13 | export const Container = { 14 | container: { 15 | // rippleColor & all ViewStyle properties are allowed 16 | }, 17 | containerDisabled: { 18 | // All ViewStyle properties are allowed 19 | opacity: 0.6 20 | } 21 | }; 22 | export const ScrollContainer = { 23 | container: { 24 | // All ViewStyle properties are allowed 25 | }, 26 | }; 27 | -------------------------------------------------------------------------------- /styles/native/js/core/widgets/floatingactionbutton.js: -------------------------------------------------------------------------------- 1 | import { background, brand, contrast, font } from "../variables"; 2 | /* 3 | 4 | DISCLAIMER: 5 | Do not change this file because it is core styling. 6 | Customizing core files will make updating Atlas much more difficult in the future. 7 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 8 | 9 | ========================================================================== 10 | Floating Action Button 11 | 12 | Default Class For Mendix Floating Action Button Widget 13 | ========================================================================== */ 14 | export const com_mendix_widget_native_floatingactionbutton_FloatingActionButton = { 15 | container: { 16 | // All ViewStyle properties are allowed 17 | margin: 30, 18 | }, 19 | button: { 20 | // Size, ripplecolor and all ViewStyle properties are allowed 21 | size: 50, 22 | height: 50, 23 | width: 50, 24 | rippleColor: contrast.lowest, 25 | backgroundColor: brand.primary, 26 | borderRadius: 25, 27 | elevation: 2, 28 | shadowColor: "#000", 29 | shadowOpacity: 0.3, 30 | shadowRadius: 4, 31 | shadowOffset: { 32 | width: 0, 33 | height: 2, 34 | }, 35 | }, 36 | buttonIcon: { 37 | // Size and color are allowed 38 | size: font.sizeLarge, 39 | color: contrast.lowest, 40 | }, 41 | secondaryButton: { 42 | // Size and all ViewStyle properties are allowed 43 | size: 30, 44 | backgroundColor: background.secondary, 45 | elevation: 2, 46 | shadowColor: "#000", 47 | shadowOpacity: 0.3, 48 | shadowRadius: 4, 49 | shadowOffset: { 50 | width: 0, 51 | height: 2, 52 | }, 53 | }, 54 | secondaryButtonIcon: { 55 | // Size and color are allowed 56 | size: font.sizeSmall, 57 | color: contrast.high, 58 | }, 59 | secondaryButtonCaption: { 60 | // All TextStyle properties are allowed 61 | color: font.color, 62 | fontSize: font.size, 63 | lineHeight: font.size, 64 | fontFamily: font.family, 65 | }, 66 | secondaryButtonCaptionContainer: { 67 | // All ViewStyle properties are allowed 68 | marginHorizontal: 5, 69 | elevation: 2, 70 | shadowOpacity: 0.3, 71 | shadowRadius: 4, 72 | shadowOffset: { 73 | width: 0, 74 | height: 2, 75 | }, 76 | }, 77 | }; 78 | -------------------------------------------------------------------------------- /styles/native/js/core/widgets/images.js: -------------------------------------------------------------------------------- 1 | import { contrast } from "../variables"; 2 | /* 3 | 4 | DISCLAIMER: 5 | Do not change this file because it is core styling. 6 | Customizing core files will make updating Atlas much more difficult in the future. 7 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 8 | 9 | ========================================================================== 10 | Image 11 | 12 | Default Class For Mendix Image Widgets 13 | ========================================================================== */ 14 | export const Image = { 15 | container: { 16 | // rippleColor & all ViewStyle properties are allowed 17 | rippleColor: contrast.lowest, 18 | }, 19 | containerDisabled: { 20 | // All ViewStyle properties are allowed 21 | }, 22 | image: { 23 | // All ImageStyle properties are allowed 24 | maxWidth: "100%", 25 | maxHeight: "100%", 26 | resizeMode: "cover", 27 | }, 28 | imageDisabled: { 29 | // All ImageStyle properties are allowed 30 | opacity: 0.6 31 | } 32 | }; 33 | export const ImageViewer = { 34 | container: { 35 | // RippleColor & All ViewStyle properties are allowed 36 | rippleColor: contrast.lowest, 37 | }, 38 | containerDisabled: { 39 | // All ViewStyle properties are allowed 40 | }, 41 | image: { 42 | // All ImageStyle properties are allowed 43 | maxWidth: "100%", 44 | maxHeight: "100%", 45 | resizeMode: "cover", 46 | }, 47 | imageDisabled: { 48 | // All ImageStyle properties are allowed 49 | opacity: 0.6 50 | } 51 | }; 52 | -------------------------------------------------------------------------------- /styles/native/js/core/widgets/listviews.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | DISCLAIMER: 4 | Do not change this file because it is core styling. 5 | Customizing core files will make updating Atlas much more difficult in the future. 6 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 7 | 8 | ========================================================================== 9 | List View 10 | 11 | Default Class For Mendix List View Widget 12 | ========================================================================== */ 13 | export const ListView = { 14 | container: { 15 | // numColumns & all ViewStyle properties are allowed 16 | }, 17 | listItem: { 18 | // All ViewStyle properties are allowed 19 | }, 20 | listItemDisabled: { 21 | // All ViewStyle properties are allowed 22 | opacity: 0.6 23 | }, 24 | }; 25 | -------------------------------------------------------------------------------- /styles/native/js/core/widgets/listviewswipe.js: -------------------------------------------------------------------------------- 1 | import { background } from "../variables"; 2 | /* 3 | 4 | DISCLAIMER: 5 | Do not change this file because it is core styling. 6 | Customizing core files will make updating Atlas much more difficult in the future. 7 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 8 | 9 | ========================================================================== 10 | List View Swipe 11 | 12 | Default Class For Mendix List View Swipe Widget 13 | ========================================================================== */ 14 | export const com_mendix_widget_native_listviewswipe_ListViewSwipe = { 15 | container: { 16 | // All ViewStyle properties are allowed 17 | flex: 1, 18 | alignItems: "stretch", 19 | justifyContent: "space-between", 20 | backgroundColor: background.primary, 21 | }, 22 | leftAction: { 23 | // PanelSize & All ViewStyle properties are allowed 24 | panelSize: 200, 25 | flex: 1, 26 | flexDirection: "row", 27 | alignItems: "stretch", 28 | backgroundColor: background.primary, 29 | }, 30 | rightAction: { 31 | // PanelSize & All ViewStyle properties are allowed 32 | panelSize: 200, 33 | flex: 1, 34 | flexDirection: "row", 35 | alignItems: "stretch", 36 | backgroundColor: background.primary, 37 | }, 38 | }; 39 | -------------------------------------------------------------------------------- /styles/native/js/core/widgets/maps.js: -------------------------------------------------------------------------------- 1 | import { brand } from "../variables"; 2 | /* 3 | 4 | DISCLAIMER: 5 | Do not change this file because it is core styling. 6 | Customizing core files will make updating Atlas much more difficult in the future. 7 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 8 | 9 | ========================================================================== 10 | Maps 11 | 12 | Default Class For Mendix Maps Widget 13 | ========================================================================== */ 14 | export const com_mendix_widget_native_maps_Maps = { 15 | container: { 16 | // All ViewStyle properties are allowed 17 | flex: 1, 18 | maxWidth: "100%", 19 | aspectRatio: 4 / 2, 20 | }, 21 | loadingOverlay: { 22 | // All ViewStyle properties are allowed 23 | }, 24 | loadingIndicator: { 25 | // Only color is allowed 26 | color: brand.primary, 27 | }, 28 | marker: { 29 | // Only color & opacity are allowed 30 | color: brand.primary, 31 | opacity: 1, 32 | }, 33 | }; 34 | -------------------------------------------------------------------------------- /styles/native/js/core/widgets/pagetitle.js: -------------------------------------------------------------------------------- 1 | import { font } from "../variables"; 2 | import { TextHeading1 } from "./typography"; 3 | /* 4 | 5 | DISCLAIMER: 6 | Do not change this file because it is core styling. 7 | Customizing core files will make updating Atlas much more difficult in the future. 8 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 9 | 10 | ========================================================================== 11 | Page Title 12 | 13 | Default Class For Mendix Page Title Widget 14 | ========================================================================== */ 15 | export const PageTitle = { 16 | container: { 17 | // All ViewStyle properties are allowed 18 | }, 19 | text: { 20 | // All TextStyle properties are allowed 21 | ...TextHeading1.text, 22 | color: font.color, 23 | }, 24 | }; 25 | -------------------------------------------------------------------------------- /styles/native/js/core/widgets/popupmenu.js: -------------------------------------------------------------------------------- 1 | import { background, brand, contrast, font } from "../variables"; 2 | /* 3 | 4 | DISCLAIMER: 5 | Do not change this file because it is core styling. 6 | Customizing core files will make updating Atlas much more difficult in the future. 7 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 8 | 9 | ========================================================================== 10 | Popup Menu 11 | 12 | Default Class For Mendix Popup Menu Widget 13 | ========================================================================== */ 14 | export const com_mendix_widget_native_popupmenu_PopupMenu = { 15 | container: { 16 | // All ViewStyle properties are allowed 17 | borderRadius: 10, 18 | shadowColor: "#000", 19 | shadowOpacity: 0.2, 20 | shadowRadius: 10, 21 | elevation: 16, 22 | backgroundColor: background.primary, 23 | }, 24 | custom: { 25 | container: { 26 | // All ViewStyle properties are allowed 27 | }, 28 | itemStyle: { 29 | rippleColor: contrast.lower, 30 | }, 31 | }, 32 | basic: { 33 | dividerColor: font.color, 34 | container: { 35 | // All ViewStyle properties are allowed 36 | height: 40, 37 | }, 38 | itemStyle: { 39 | ellipsizeMode: "tail", 40 | rippleColor: contrast.lower, 41 | defaultStyle: { 42 | // All TextStyle properties are allowed 43 | color: font.color, 44 | }, 45 | primaryStyle: { 46 | // All TextStyle properties are allowed 47 | color: brand.primary, 48 | }, 49 | dangerStyle: { 50 | // All TextStyle properties are allowed 51 | color: brand.danger, 52 | }, 53 | customStyle: { 54 | // All TextStyle properties are allowed 55 | }, 56 | }, 57 | }, 58 | }; 59 | -------------------------------------------------------------------------------- /styles/native/js/core/widgets/progressbar.js: -------------------------------------------------------------------------------- 1 | import { Platform } from "react-native"; 2 | import { anyColorToRgbString } from "../helpers/_functions/convertcolors"; 3 | import { brand, font, input } from "../variables"; 4 | /* 5 | 6 | DISCLAIMER: 7 | Do not change this file because it is core styling. 8 | Customizing core files will make updating Atlas much more difficult in the future. 9 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 10 | 11 | ========================================================================== 12 | Progress Bar 13 | 14 | Default Class For Mendix Progress Bar Widget 15 | ========================================================================== */ 16 | export const com_mendix_widget_native_progressbar_ProgressBar = { 17 | container: { 18 | // All ViewStyle properties are allowed 19 | alignSelf: "stretch", 20 | }, 21 | bar: { 22 | // All ViewStyle properties are allowed 23 | ...Platform.select({ 24 | ios: { 25 | borderColor: brand.primary, 26 | }, 27 | android: { 28 | borderRadius: 0, 29 | borderWidth: 0, 30 | backgroundColor: `rgba(${anyColorToRgbString(brand.primary)},0.2)`, 31 | }, 32 | }), 33 | }, 34 | fill: { 35 | //Only the backgroundColor property is allowed 36 | backgroundColor: brand.primary, 37 | }, 38 | validationMessage: { 39 | // All TextStyle properties are allowed 40 | color: input.errorColor, 41 | fontSize: font.size, 42 | fontFamily: font.family, 43 | }, 44 | }; 45 | -------------------------------------------------------------------------------- /styles/native/js/core/widgets/progresscircle.js: -------------------------------------------------------------------------------- 1 | import { brand, contrast, font, input } from "../variables"; 2 | /* 3 | 4 | DISCLAIMER: 5 | Do not change this file because it is core styling. 6 | Customizing core files will make updating Atlas much more difficult in the future. 7 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 8 | 9 | ========================================================================== 10 | Progress Circle 11 | 12 | Default Class For Mendix Progress Circle Widget 13 | ========================================================================== */ 14 | export const com_mendix_widget_native_progresscircle_ProgressCircle = { 15 | container: { 16 | // All ViewStyle properties are allowed 17 | }, 18 | circle: { 19 | // Only the size & borderWidth & borderColor properties are allowed 20 | size: 80, 21 | borderWidth: 0, 22 | }, 23 | fill: { 24 | // Only the width & backgroundColor & lineCapRounded properties are allowed 25 | backgroundColor: brand.primary, 26 | width: 5, 27 | lineCapRounded: true, 28 | }, 29 | text: { 30 | // All TextStyle properties are allowed 31 | color: contrast.regular, 32 | fontSize: font.size, 33 | fontWeight: font.weightSemiBold, 34 | fontFamily: font.family, 35 | }, 36 | validationMessage: { 37 | // All TextStyle properties are allowed 38 | color: input.errorColor, 39 | fontSize: font.size, 40 | fontFamily: font.family, 41 | }, 42 | }; 43 | -------------------------------------------------------------------------------- /styles/native/js/core/widgets/qrcode.js: -------------------------------------------------------------------------------- 1 | import { background, contrast } from "../variables"; 2 | /* 3 | 4 | DISCLAIMER: 5 | Do not change this file because it is core styling. 6 | Customizing core files will make updating Atlas much more difficult in the future. 7 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 8 | 9 | ========================================================================== 10 | QR Code 11 | 12 | Default Class For Mendix QR Code Widget 13 | ========================================================================== */ 14 | export const com_mendix_widget_native_qrcode_QRCode = { 15 | container: { 16 | // All ViewStyle properties are allowed 17 | }, 18 | qrcode: { 19 | // Only size, color and backgroundColor are allowed 20 | size: 100, 21 | color: contrast.highest, 22 | backgroundColor: background.primary, 23 | }, 24 | }; 25 | -------------------------------------------------------------------------------- /styles/native/js/core/widgets/rangeslider.js: -------------------------------------------------------------------------------- 1 | import { com_mendix_widget_native_slider_Slider as Slider } from "./slider"; 2 | /* 3 | 4 | DISCLAIMER: 5 | Do not change this file because it is core styling. 6 | Customizing core files will make updating Atlas much more difficult in the future. 7 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 8 | 9 | ========================================================================== 10 | Range Slider 11 | 12 | Default Class For Mendix Range Slider Widget 13 | ========================================================================== */ 14 | export const com_mendix_widget_native_rangeslider_RangeSlider = Slider; 15 | -------------------------------------------------------------------------------- /styles/native/js/core/widgets/rating.js: -------------------------------------------------------------------------------- 1 | import { spacing } from "../variables"; 2 | /* 3 | 4 | DISCLAIMER: 5 | Do not change this file because it is core styling. 6 | Customizing core files will make updating Atlas much more difficult in the future. 7 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 8 | 9 | ========================================================================== 10 | Rating 11 | 12 | Default Class For Mendix Rating Widget 13 | ========================================================================== */ 14 | export const com_mendix_widget_native_rating_Rating = { 15 | container: { 16 | // All ViewStyle properties are allowed 17 | }, 18 | containerDisabled: { 19 | // All ViewStyle properties are allowed 20 | opacity: 0.5, 21 | }, 22 | icon: { 23 | // Size, color, selectedColor & all ViewStyle properties are allowed 24 | size: 30, 25 | marginRight: spacing.smaller, 26 | }, 27 | }; 28 | -------------------------------------------------------------------------------- /styles/native/js/core/widgets/safeareaview.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | DISCLAIMER: 4 | Do not change this file because it is core styling. 5 | Customizing core files will make updating Atlas much more difficult in the future. 6 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 7 | 8 | ========================================================================== 9 | Container 10 | 11 | Default Class For Mendix Safe Area View Widget 12 | ========================================================================== */ 13 | export const com_mendix_widget_native_safeareaview_SafeAreaView = { 14 | container: { 15 | // All ViewStyle properties are allowed 16 | }, 17 | }; 18 | -------------------------------------------------------------------------------- /styles/native/js/core/widgets/togglebuttons.js: -------------------------------------------------------------------------------- 1 | import { Platform } from "react-native"; 2 | import { background, brand, contrast, font, input } from "../variables"; 3 | /* 4 | 5 | DISCLAIMER: 6 | Do not change this file because it is core styling. 7 | Customizing core files will make updating Atlas much more difficult in the future. 8 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 9 | 10 | ========================================================================== 11 | Segmented Controls 12 | 13 | Default Class For Mendix Segmented Controls Widget 14 | ========================================================================== */ 15 | export const com_mendix_widget_native_togglebuttons_ToggleButtons = { 16 | container: { 17 | // All ViewStyle properties are allowed 18 | alignSelf: "stretch", 19 | }, 20 | containerDisabled: { 21 | opacity: 0.6, 22 | alignSelf: "stretch", 23 | }, 24 | button: { 25 | // All ViewStyle properties are allowed 26 | backgroundColor: background.primary, 27 | borderColor: Platform.select({ ios: brand.primary, android: contrast.lower }), 28 | }, 29 | text: { 30 | // All TextStyle properties are allowed 31 | color: Platform.select({ ios: brand.primary, android: contrast.high }), 32 | fontSize: font.size, 33 | fontFamily: font.family, 34 | }, 35 | activeButton: { 36 | // All ViewStyle properties are allowed 37 | ...Platform.select({ 38 | ios: { 39 | backgroundColor: brand.primary, 40 | borderColor: brand.primary, 41 | }, 42 | android: { 43 | backgroundColor: brand.primary, 44 | borderColor: brand.primary, 45 | }, 46 | }), 47 | }, 48 | activeButtonText: { 49 | // All TextStyle properties are allowed 50 | fontSize: font.size, 51 | fontFamily: font.family, 52 | }, 53 | validationMessage: { 54 | // All TextStyle properties are allowed 55 | color: input.errorColor, 56 | fontSize: font.size, 57 | fontFamily: font.family, 58 | }, 59 | }; 60 | -------------------------------------------------------------------------------- /styles/native/js/core/widgets/typography.js: -------------------------------------------------------------------------------- 1 | import { font } from "../variables"; 2 | /* 3 | 4 | DISCLAIMER: 5 | Do not change this file because it is core styling. 6 | Customizing core files will make updating Atlas much more difficult in the future. 7 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 8 | 9 | ========================================================================== 10 | Text 11 | 12 | Default Class For Mendix Text Widget 13 | ========================================================================== */ 14 | export const Text = { 15 | container: { 16 | // All ViewStyle properties are allowed 17 | }, 18 | text: { 19 | // numberOfLines & All TextStyle properties are allowed 20 | color: font.color, 21 | fontSize: font.size, 22 | fontFamily: font.family, 23 | lineHeight: font.size + 2, 24 | }, 25 | }; 26 | export const TextHeading1 = { 27 | container: {}, 28 | text: { 29 | fontWeight: font.weightSemiBold, 30 | fontSize: font.sizeH1, 31 | fontFamily: font.family, 32 | lineHeight: font.sizeH1, 33 | }, 34 | }; 35 | export const TextHeading2 = { 36 | container: {}, 37 | text: { 38 | fontWeight: font.weightSemiBold, 39 | fontSize: font.sizeH2, 40 | fontFamily: font.family, 41 | lineHeight: font.sizeH2, 42 | }, 43 | }; 44 | export const TextHeading3 = { 45 | container: {}, 46 | text: { 47 | fontWeight: font.weightSemiBold, 48 | fontSize: font.sizeH3, 49 | fontFamily: font.family, 50 | lineHeight: font.sizeH3, 51 | }, 52 | }; 53 | export const TextHeading4 = { 54 | container: {}, 55 | text: { 56 | fontWeight: font.weightSemiBold, 57 | fontSize: font.sizeH4, 58 | fontFamily: font.family, 59 | lineHeight: font.sizeH4, 60 | }, 61 | }; 62 | export const TextHeading5 = { 63 | container: {}, 64 | text: { 65 | fontWeight: font.weightSemiBold, 66 | fontSize: font.sizeH5, 67 | fontFamily: font.family, 68 | lineHeight: font.sizeH5, 69 | }, 70 | }; 71 | export const TextHeading6 = { 72 | container: {}, 73 | text: { 74 | fontWeight: font.weightSemiBold, 75 | fontSize: font.sizeH6, 76 | fontFamily: font.family, 77 | lineHeight: font.sizeH6, 78 | }, 79 | }; 80 | -------------------------------------------------------------------------------- /styles/native/js/core/widgets/videoplayer.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | DISCLAIMER: 4 | Do not change this file because it is core styling. 5 | Customizing core files will make updating Atlas much more difficult in the future. 6 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 7 | 8 | ========================================================================== 9 | Video Player 10 | 11 | Default Class For Mendix Video Player Widget 12 | ========================================================================== */ 13 | export const com_mendix_widget_native_videoplayer_VideoPlayer = { 14 | container: { 15 | // All ViewStyle properties are allowed 16 | }, 17 | indicator: { 18 | // Only the backgroundColor property is allowed 19 | }, 20 | video: { 21 | // All ViewStyle properties are allowed 22 | }, 23 | }; 24 | -------------------------------------------------------------------------------- /styles/native/js/core/widgets/webview.js: -------------------------------------------------------------------------------- 1 | import { font } from "../variables"; 2 | /* 3 | 4 | DISCLAIMER: 5 | Do not change this file because it is core styling. 6 | Customizing core files will make updating Atlas much more difficult in the future. 7 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 8 | 9 | ========================================================================== 10 | Web View 11 | 12 | Default Class For Mendix Web View Widget 13 | ========================================================================== */ 14 | export const com_mendix_widget_native_webview_WebView = { 15 | container: { 16 | // All ViewStyle properties are allowed 17 | }, 18 | errorContainer: { 19 | // All ViewStyle properties are allowed 20 | }, 21 | errorText: { 22 | // All TextStyle properties are allowed 23 | fontSize: font.size, 24 | fontFamily: font.family, 25 | }, 26 | }; 27 | -------------------------------------------------------------------------------- /styles/native/js/ui_resources/atlas_ui_resources/buildingblocks/header.js: -------------------------------------------------------------------------------- 1 | import { Platform } from "react-native"; 2 | import { background, border, contrast, spacing } from "../../../core/variables"; 3 | /* 4 | ========================================================================== 5 | Cards 6 | 7 | ========================================================================== 8 | */ 9 | export const header = { 10 | container: { 11 | borderRadius: border.radius, 12 | backgroundColor: background.primary, 13 | marginBottom: spacing.regular, 14 | ...Platform.select({ 15 | android: { 16 | borderWidth: 1, 17 | borderColor: contrast.lowest, 18 | }, 19 | }), 20 | }, 21 | }; 22 | // 23 | //== Elements 24 | //-------------------------------------------------------------------------------------------------------------------// 25 | export const headerImageFull = { 26 | container: { 27 | overflow: "hidden", 28 | }, 29 | image: { 30 | width: "100%", 31 | height: 250, 32 | resizeMode: "cover", 33 | }, 34 | }; 35 | export const headerImageOverlay = { 36 | container: { 37 | zIndex: 10, 38 | width: "100%", 39 | height: "100%", 40 | position: "absolute", 41 | backgroundColor: "rgba(0,0,0,0.4)", 42 | }, 43 | }; 44 | export const headerBody = { 45 | container: { 46 | bottom: 0, 47 | zIndex: 11, 48 | width: "100%", 49 | position: "absolute", 50 | backgroundColor: "transparent", 51 | }, 52 | }; 53 | // 54 | //== Variations 55 | //-------------------------------------------------------------------------------------------------------------------// 56 | -------------------------------------------------------------------------------- /styles/native/js/ui_resources/atlas_ui_resources/layouts/layout.js: -------------------------------------------------------------------------------- 1 | import { NativeModules } from "react-native"; 2 | import { darkMode } from "../../../app/custom-variables.js"; 3 | import { background, font, navigation } from "../../../core/variables"; 4 | /* 5 | ========================================================================== 6 | TopBar / BottomBar / ProgressOverlay 7 | 8 | Default Class For Mendix TopBar, BottomBar and ProgressOverlay 9 | ========================================================================== 10 | */ 11 | // backgroundColor of the native iOS statusbar can not be changed. 12 | // To fix this we change the barStyle of the statusbar if OS theme is dark and app theme is light (And the other way around). 13 | const isOSDarkMode = NativeModules && NativeModules.RNDarkMode && NativeModules.RNDarkMode.initialMode && NativeModules.RNDarkMode.initialMode === "dark"; 14 | const statusBarStyle = !darkMode && isOSDarkMode ? 15 | "dark-content" : 16 | darkMode && !isOSDarkMode ? "light-content" : navigation.statusBar.barStyle; 17 | // 18 | export const Layout = { 19 | sidebar: { 20 | // All ViewStyle properties are allowed 21 | }, 22 | statusBar: { 23 | // Only backgroundColor and barStyle are allowed 24 | backgroundColor: navigation.statusBar.backgroundColor, 25 | barStyle: statusBarStyle, 26 | }, 27 | header: { 28 | container: { 29 | // All ViewStyle properties are allowed 30 | backgroundColor: navigation.topBar.backgroundColor, 31 | borderBottomWidth: undefined, 32 | }, 33 | title: { 34 | // All TextStyle properties are allowed 35 | color: navigation.topBar.titleColor, 36 | fontSize: navigation.topBar.titleFontSize, 37 | fontFamily: font.family, 38 | fontWeight: font.weightBold, 39 | }, 40 | backButtonText: { 41 | // All TextStyle properties are allowed 42 | color: navigation.topBar.backButtonColor, 43 | fontFamily: font.family, 44 | }, 45 | backButtonIcon: { 46 | // All ImageStyle properties are allowed 47 | tintColor: navigation.topBar.backButtonColor, 48 | }, 49 | }, 50 | container: { 51 | // All ViewStyle properties are allowed 52 | backgroundColor: background.primary, 53 | }, 54 | }; 55 | // 56 | export const Page = Layout; 57 | -------------------------------------------------------------------------------- /styles/native/js/ui_resources/atlas_ui_resources/pagetemplates/inspectiondetails.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================================== 3 | Inspection details 4 | 5 | ========================================================================== 6 | */ 7 | //== Elements 8 | //-------------------------------------------------------------------------------------------------------------------// 9 | export const carouselCardImage = { 10 | container: { 11 | borderRadius: 10, 12 | overflow: "hidden", 13 | }, 14 | image: { 15 | width: "100%", 16 | height: "100%", 17 | }, 18 | }; 19 | export const carouselFullWidthImage = { 20 | container: {}, 21 | image: { 22 | width: "100%", 23 | height: "100%", 24 | }, 25 | }; 26 | // 27 | //== Variations 28 | //-------------------------------------------------------------------------------------------------------------------// 29 | // 30 | -------------------------------------------------------------------------------- /styles/native/js/ui_resources/atlas_ui_resources/pagetemplates/maps.js: -------------------------------------------------------------------------------- 1 | import { background, border, contrast, spacing } from "../../../core/variables.js"; 2 | /* 3 | ========================================================================== 4 | Maps 5 | 6 | ========================================================================== 7 | */ 8 | // 9 | //== Elements 10 | //-------------------------------------------------------------------------------------------------------------------// 11 | export const mapsBackground = { 12 | container: { 13 | position: "absolute", 14 | height: "100%", 15 | width: "100%", 16 | zIndex: 0, 17 | }, 18 | }; 19 | export const mapsFooter = { 20 | container: { 21 | bottom: 0, 22 | position: "absolute", 23 | }, 24 | }; 25 | export const mapsFooterSendLocation = { 26 | container: { 27 | flex: 1, 28 | alignSelf: "flex-end", 29 | backgroundColor: background.primary, 30 | padding: spacing.regular, 31 | margin: spacing.regular, 32 | borderRadius: border.radius, 33 | elevation: 4, 34 | shadowColor: contrast.lower, 35 | shadowOpacity: 0.8, 36 | shadowRadius: 8, 37 | shadowOffset: { 38 | width: 0, 39 | height: 2, 40 | }, 41 | }, 42 | }; 43 | export const mapsList = { 44 | container: { 45 | paddingHorizontal: spacing.regular, 46 | }, 47 | }; 48 | export const mapsListItemImage = { 49 | container: { 50 | backgroundColor: background.primary, 51 | borderRadius: border.radius, 52 | marginVertical: spacing.regular, 53 | marginLeft: spacing.smallest, 54 | marginRight: spacing.regular, 55 | elevation: 4, 56 | shadowColor: contrast.lower, 57 | shadowOpacity: 0.8, 58 | shadowRadius: 8, 59 | shadowOffset: { 60 | width: 0, 61 | height: 2, 62 | }, 63 | }, 64 | image: { 65 | borderRadius: border.radius, 66 | }, 67 | }; 68 | // 69 | //== Variations 70 | //-------------------------------------------------------------------------------------------------------------------// 71 | // 72 | -------------------------------------------------------------------------------- /styles/native/js/ui_resources/atlas_ui_resources/pagetemplates/page.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================================== 3 | Page 4 | 5 | ========================================================================== 6 | */ 7 | //== Elements 8 | //-------------------------------------------------------------------------------------------------------------------// 9 | // 10 | //== Variations 11 | //-------------------------------------------------------------------------------------------------------------------// 12 | // 13 | export const pageHeaderBorderNone = { 14 | sidebar: { 15 | // All ViewStyle properties are allowed 16 | }, 17 | statusBar: { 18 | // Only backgroundColor and barStyle are allowed 19 | }, 20 | header: { 21 | container: { 22 | // All ViewStyle properties are allowed 23 | elevation: 0, 24 | borderBottomWidth: undefined, 25 | }, 26 | title: { 27 | // All TextStyle properties are allowed 28 | }, 29 | backButtonText: { 30 | // All TextStyle properties are allowed 31 | }, 32 | backButtonIcon: { 33 | // All ImageStyle properties are allowed 34 | }, 35 | }, 36 | container: { 37 | // All ViewStyle properties are allowed 38 | }, 39 | }; 40 | -------------------------------------------------------------------------------- /styles/native/ts/app/custom.ts: -------------------------------------------------------------------------------- 1 | import { } from "../core/variables"; 2 | -------------------------------------------------------------------------------- /styles/native/ts/core/helpers/_functions/adjustfont.ts: -------------------------------------------------------------------------------- 1 | import { Dimensions, PixelRatio } from "react-native"; 2 | const {height, width} = Dimensions.get("window"); 3 | const pixelRatio = PixelRatio.get(); 4 | /** 5 | * 6 | * Adjust the font size based on the screen size 7 | * 8 | * @param {number} size Font size 9 | * 10 | * @return {number} Returns adjusted font size 11 | */ 12 | function adjustFont(size: number) { 13 | if (pixelRatio === 2) { 14 | // iphone 5s and older Androids 15 | if (width < 360) return size * 0.95; 16 | // iphone 5 17 | if (height < 667) return size; 18 | // iphone 6-6s 19 | else if (height >= 667 && height <= 735) return size * 1.15; 20 | // older phablets 21 | return size * 1.25; 22 | } 23 | if (pixelRatio === 3) { 24 | // catch Android font scaling on small machines 25 | // where pixel ratio / font scale ratio => 3:3 26 | if (width <= 360) return size; 27 | // Catch other weird android width sizings 28 | if (height < 667) return size * 1.15; 29 | // catch in-between size Androids and scale font up 30 | if (height >= 667 && height <= 735) return size * 1.2; 31 | // catch larger devices 32 | // ie iphone 6s plus / 7 plus / mi note 33 | return size * 1.27; 34 | } 35 | if (pixelRatio === 3.5) { 36 | // catch Android font scaling on small machines 37 | // where pixel ratio / font scale ratio => 3:3 38 | if (width <= 360) return size; 39 | // Catch other smaller android height sizings 40 | if (height < 667) return size * 1.2; 41 | // catch in-between size Androids and scale font up 42 | if (height >= 667 && height <= 735) return size * 1.25; 43 | // catch larger phablet devices 44 | return size * 1.4; 45 | } 46 | // if older device ie pixelRatio !== 2 || 3 || 3.5 47 | return size; 48 | } 49 | // 50 | export { adjustFont as default, height, width }; 51 | -------------------------------------------------------------------------------- /styles/native/ts/core/helpers/_functions/device.ts: -------------------------------------------------------------------------------- 1 | import { Platform } from "react-native"; 2 | import DeviceInfo from "react-native-device-info"; 3 | // 4 | const isiPhoneModelWithNotch = () => { 5 | const model = DeviceInfo.getDeviceId(); 6 | if (model.includes("iPhone")) { 7 | switch (model) { 8 | case "iPhone10,6": // iPhone X GSM 9 | case "iPhone11,2": // iPhone XS 10 | case "iPhone11,4": // iPhone XS Max 11 | case "iPhone11,6": // iPhone XS Max Global 12 | case "iPhone11,8": // Iphone XR 13 | case "iPhone12,1": // Iphone 11 14 | case "iPhone12,3": // Iphone 11 Pro 15 | case "iPhone12,5": // Iphone 11 Pro Max 16 | return true; 17 | default: 18 | return false; 19 | } 20 | } 21 | return false; 22 | }; 23 | // 24 | export const isIphoneWithNotch = DeviceInfo.hasNotch() || (Platform.OS === "ios" && isiPhoneModelWithNotch()); 25 | -------------------------------------------------------------------------------- /styles/native/ts/core/helpers/_functions/mergeobjects.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Merge 2 objects 3 | * This function will look at every object property of the second object and will override the matching property in the first object 4 | * 5 | * @param {object[]} sources Array of 2 objects 6 | * 7 | * @return {object} Returns merged object 8 | * 9 | */ 10 | export default function (...sources: T[]): T { 11 | function mergeDeep(target: T, ...sources: T[]): T { 12 | function isObject(item: T): boolean { 13 | return item && typeof item === "object" && !Array.isArray(item); 14 | } 15 | 16 | if (!sources.length) return target; 17 | const source: T = sources.shift()!; 18 | 19 | if (isObject(target) && isObject(source)) { 20 | Object.keys(source).forEach((key) => { 21 | if (isObject(source[key] as T)) { 22 | if (!target[key]) Object.assign(target, {[key]: {}}); 23 | mergeDeep(target[key] as T, source[key] as T); 24 | } else { 25 | Object.assign(target, {[key]: source[key]}); 26 | } 27 | }); 28 | } 29 | return mergeDeep(target, ...sources); 30 | } 31 | 32 | return mergeDeep({} as T, ...sources); 33 | } 34 | -------------------------------------------------------------------------------- /styles/native/ts/core/helpers/activityindicator.ts: -------------------------------------------------------------------------------- 1 | import { brand } from "../variables"; 2 | /* 3 | 4 | DISCLAIMER: 5 | Do not change this file because it is core styling. 6 | Customizing core files will make updating Atlas much more difficult in the future. 7 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 8 | 9 | ========================================================================== 10 | Activity Indicator 11 | 12 | //== Design Properties 13 | //## Helper classes to change the look and feel of the widget 14 | ========================================================================== */ 15 | // Activity indicator Colors 16 | 17 | export const activityIndicatorSuccess = { 18 | indicator: { 19 | color: brand.success, 20 | }, 21 | }; 22 | 23 | export const activityIndicatorWarning = { 24 | indicator: { 25 | color: brand.warning, 26 | }, 27 | }; 28 | 29 | export const activityIndicatorDanger = { 30 | indicator: { 31 | color: brand.danger, 32 | }, 33 | }; 34 | -------------------------------------------------------------------------------- /styles/native/ts/core/helpers/badge.ts: -------------------------------------------------------------------------------- 1 | import { badge } from "../variables"; 2 | /* 3 | 4 | DISCLAIMER: 5 | Do not change this file because it is core styling. 6 | Customizing core files will make updating Atlas much more difficult in the future. 7 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 8 | 9 | ========================================================================== 10 | Badge 11 | 12 | //== Design Properties 13 | //## Helper classes to change the look and feel of the widget 14 | ========================================================================== */ 15 | // Badge Colors 16 | export const badgePrimary = { 17 | container: { 18 | backgroundColor: badge.primary.backgroundColor, 19 | }, 20 | caption: { 21 | color: badge.primary.color, 22 | }, 23 | }; 24 | export const badgeSuccess = { 25 | container: { 26 | backgroundColor: badge.success.backgroundColor, 27 | }, 28 | caption: { 29 | color: badge.success.color, 30 | }, 31 | }; 32 | export const badgeWarning = { 33 | container: { 34 | backgroundColor: badge.warning.backgroundColor, 35 | }, 36 | caption: { 37 | color: badge.warning.color, 38 | }, 39 | }; 40 | export const badgeDanger = { 41 | container: { 42 | backgroundColor: badge.danger.backgroundColor, 43 | }, 44 | caption: { 45 | color: badge.danger.color, 46 | }, 47 | }; 48 | -------------------------------------------------------------------------------- /styles/native/ts/core/helpers/barchart.ts: -------------------------------------------------------------------------------- 1 | export const barChartSquare = { 2 | chart: { 3 | aspectRatio: 1 4 | } 5 | }; 6 | 7 | export const barChartMaxSpace = { 8 | chart: { 9 | flex: 1, 10 | aspectRatio: undefined 11 | } 12 | }; 13 | -------------------------------------------------------------------------------- /styles/native/ts/core/helpers/floatingactionbutton.ts: -------------------------------------------------------------------------------- 1 | import { brand } from "../variables"; 2 | /* 3 | 4 | DISCLAIMER: 5 | Do not change this file because it is core styling. 6 | Customizing core files will make updating Atlas much more difficult in the future. 7 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 8 | 9 | ========================================================================== 10 | Floating Action Button 11 | 12 | //== Design Properties 13 | //## Helper classes to change the look and feel of the widget 14 | ========================================================================== */ 15 | // Floating Action Button Colors 16 | export const floatingActionButtonSuccess = { 17 | button: { 18 | backgroundColor: brand.success, 19 | }, 20 | }; 21 | 22 | export const floatingActionButtonWarning = { 23 | button: { 24 | backgroundColor: brand.warning, 25 | }, 26 | }; 27 | 28 | export const floatingActionButtonDanger = { 29 | button: { 30 | backgroundColor: brand.danger, 31 | }, 32 | }; 33 | -------------------------------------------------------------------------------- /styles/native/ts/core/helpers/helperclasses.ts: -------------------------------------------------------------------------------- 1 | import { Platform } from "react-native"; 2 | import { background, border } from "../variables"; 3 | import { Helperclass } from "../../types/helperclass"; 4 | /* 5 | 6 | DISCLAIMER: 7 | Do not change this file because it is core styling. 8 | Customizing core files will make updating Atlas much more difficult in the future. 9 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 10 | 11 | */ 12 | // Hide on Android 13 | export const hideOnAndroid: Helperclass = { 14 | container: { 15 | display: Platform.select({ios: "flex", android: "none"}), 16 | }, 17 | }; 18 | // Hide on iOS 19 | export const hideOnIos: Helperclass = { 20 | container: { 21 | display: Platform.select({ios: "none", android: "flex"}), 22 | }, 23 | }; 24 | // 25 | //== Background Colors 26 | export const backgroundPrimary: Helperclass = { 27 | container: { 28 | backgroundColor: background.primary, 29 | }, 30 | }; 31 | export const backgroundSecondary: Helperclass = { 32 | container: { 33 | backgroundColor: background.secondary, 34 | }, 35 | }; 36 | export const backgroundBrandPrimary: Helperclass = { 37 | container: { 38 | backgroundColor: background.brandPrimary, 39 | }, 40 | }; 41 | export const backgroundBrandSuccess: Helperclass = { 42 | container: { 43 | backgroundColor: background.brandSuccess, 44 | }, 45 | }; 46 | export const backgroundBrandWarning: Helperclass = { 47 | container: { 48 | backgroundColor: background.brandWarning, 49 | }, 50 | }; 51 | export const backgroundBrandDanger: Helperclass = { 52 | container: { 53 | backgroundColor: background.brandDanger, 54 | }, 55 | }; 56 | export const backgroundGray: Helperclass = { 57 | container: { 58 | backgroundColor: background.gray, 59 | }, 60 | }; 61 | // 62 | // borders 63 | export const borderTop: Helperclass = { 64 | container: { 65 | borderColor: border.color, 66 | borderTopWidth: border.width, 67 | }, 68 | }; 69 | export const borderBottom: Helperclass = { 70 | container: { 71 | borderColor: border.color, 72 | borderBottomWidth: border.width, 73 | }, 74 | }; 75 | -------------------------------------------------------------------------------- /styles/native/ts/core/helpers/images.ts: -------------------------------------------------------------------------------- 1 | import { border } from "../variables"; 2 | /* 3 | 4 | DISCLAIMER: 5 | Do not change this file because it is core styling. 6 | Customizing core files will make updating Atlas much more difficult in the future. 7 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 8 | 9 | ========================================================================== 10 | Image 11 | 12 | //== Design Properties 13 | //## Helper classes to change the look and feel of the widget 14 | ========================================================================== */ 15 | // 16 | // 17 | //== Extra Classes 18 | //## Helper classes to change the look and feel of the widget 19 | //-------------------------------------------------------------------------------------------------------------------// 20 | // Image Sizes 21 | export const thumbnail = { 22 | image: { 23 | width: "100%", 24 | height: "auto", 25 | aspectRatio: 1, 26 | borderRadius: border.radius, 27 | }, 28 | }; 29 | export const avatarSmall = { 30 | image: { 31 | width: 60, 32 | height: 60, 33 | borderRadius: 30, 34 | }, 35 | }; 36 | export const avatarMedium = { 37 | image: { 38 | width: 80, 39 | height: 80, 40 | borderRadius: 40, 41 | }, 42 | }; 43 | export const avatarLarge = { 44 | image: { 45 | width: 120, 46 | height: 120, 47 | borderRadius: 60, 48 | }, 49 | }; 50 | export const inputIcon = { 51 | image: { 52 | width: 30, 53 | height: 30, 54 | }, 55 | }; 56 | -------------------------------------------------------------------------------- /styles/native/ts/core/helpers/linechart.ts: -------------------------------------------------------------------------------- 1 | export const lineChartSquare = { 2 | chart: { 3 | aspectRatio: 1 4 | } 5 | }; 6 | 7 | export const lineChartMaxSpace = { 8 | chart: { 9 | flex: 1, 10 | aspectRatio: undefined 11 | } 12 | }; 13 | -------------------------------------------------------------------------------- /styles/native/ts/core/helpers/listviews.ts: -------------------------------------------------------------------------------- 1 | import { listView } from "../variables"; 2 | /* 3 | 4 | DISCLAIMER: 5 | Do not change this file because it is core styling. 6 | Customizing core files will make updating Atlas much more difficult in the future. 7 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 8 | 9 | ========================================================================== 10 | List View 11 | 12 | //== Design Properties 13 | //## Helper classes to change the look and feel of the widget 14 | ========================================================================== */ 15 | // List item dividers 16 | export const listItemBorderBottom = { 17 | listItem: { 18 | borderColor: listView.border.color, 19 | borderBottomWidth: listView.border.width, 20 | }, 21 | }; 22 | export const listItemBorderRight = { 23 | listItem: { 24 | borderColor: listView.border.color, 25 | borderRightWidth: listView.border.width, 26 | }, 27 | }; 28 | // 29 | //== Extra Classes 30 | //## Helper classes to change the look and feel of the widget 31 | //-------------------------------------------------------------------------------------------------------------------// 32 | 33 | export const listItemIconSmall = { 34 | icon: { 35 | size: 16, 36 | }, 37 | }; 38 | export const listItemIconLarge = { 39 | icon: { 40 | size: 24, 41 | }, 42 | }; 43 | -------------------------------------------------------------------------------- /styles/native/ts/core/helpers/listviewswipe.ts: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | DISCLAIMER: 4 | Do not change this file because it is core styling. 5 | Customizing core files will make updating Atlas much more difficult in the future. 6 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 7 | 8 | ========================================================================== 9 | List View Swipe 10 | 11 | //== Design Properties 12 | //## Helper classes to change the look and feel of the widget 13 | ========================================================================== */ 14 | export const listViewSwipeSmallPanels = { 15 | leftAction: { 16 | // PanelSize & All ViewStyle properties are allowed 17 | panelSize: 150, 18 | }, 19 | rightAction: { 20 | // PanelSize & All ViewStyle properties are allowed 21 | panelSize: 150, 22 | }, 23 | }; 24 | export const listViewSwipeLargePanels = { 25 | leftAction: { 26 | // PanelSize & All ViewStyle properties are allowed 27 | panelSize: 250, 28 | }, 29 | rightAction: { 30 | // PanelSize & All ViewStyle properties are allowed 31 | panelSize: 250, 32 | }, 33 | }; 34 | // 35 | //== Extra Classes 36 | //## Helper classes to change the look and feel of the widget 37 | //-------------------------------------------------------------------------------------------------------------------// 38 | -------------------------------------------------------------------------------- /styles/native/ts/core/helpers/maps.ts: -------------------------------------------------------------------------------- 1 | import { border, brand } from "../variables"; 2 | /* 3 | 4 | DISCLAIMER: 5 | Do not change this file because it is core styling. 6 | Customizing core files will make updating Atlas much more difficult in the future. 7 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 8 | 9 | ========================================================================== 10 | Maps 11 | 12 | //== Design Properties 13 | //## Helper classes to change the look and feel of the widget 14 | ========================================================================== */ 15 | // Maps Colors 16 | export const mapsSuccess = { 17 | marker: { 18 | color: brand.success, 19 | }, 20 | }; 21 | export const mapsWarning = { 22 | marker: { 23 | color: brand.warning, 24 | }, 25 | }; 26 | export const mapsDanger = { 27 | marker: { 28 | color: brand.danger, 29 | }, 30 | }; 31 | // 32 | // Maps Size 33 | export const mapsSquare = { 34 | container: { 35 | aspectRatio: 1 / 1, 36 | }, 37 | }; 38 | export const mapsMaxSpace = { 39 | container: { 40 | flex: 1, 41 | aspectRatio: undefined, 42 | }, 43 | }; 44 | // 45 | //== Extra Classes 46 | //## Helper classes to change the look and feel of the widget 47 | //-------------------------------------------------------------------------------------------------------------------// 48 | // Maps Shape 49 | export const mapsRounded = { 50 | container: { 51 | borderRadius: border.radius, 52 | overflow: "hidden", 53 | }, 54 | }; 55 | -------------------------------------------------------------------------------- /styles/native/ts/core/helpers/progressbar.ts: -------------------------------------------------------------------------------- 1 | import { Platform } from "react-native"; 2 | import { anyColorToRgbString } from "./_functions/convertcolors"; 3 | import { brand } from "../variables"; 4 | /* 5 | 6 | DISCLAIMER: 7 | Do not change this file because it is core styling. 8 | Customizing core files will make updating Atlas much more difficult in the future. 9 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 10 | 11 | ========================================================================== 12 | Progress Bar 13 | 14 | //== Design Properties 15 | //## Helper classes to change the look and feel of the widget 16 | ========================================================================== */ 17 | // Progress Bar Color 18 | export const progressBarSuccess = { 19 | bar: { 20 | borderColor: Platform.select({ ios: brand.success }), 21 | backgroundColor: Platform.select({ android: `rgba(${anyColorToRgbString(brand.success)},0.2)` }), 22 | }, 23 | fill: { 24 | backgroundColor: brand.success, 25 | }, 26 | }; 27 | export const progressBarWarning = { 28 | bar: { 29 | borderColor: Platform.select({ ios: brand.warning }), 30 | backgroundColor: Platform.select({ android: `rgba(${anyColorToRgbString(brand.warning)},0.2)` }), 31 | }, 32 | fill: { 33 | backgroundColor: brand.warning, 34 | }, 35 | }; 36 | export const progressBarDanger = { 37 | bar: { 38 | borderColor: Platform.select({ ios: brand.danger }), 39 | backgroundColor: Platform.select({ android: `rgba(${anyColorToRgbString(brand.danger)},0.2)` }), 40 | }, 41 | fill: { 42 | backgroundColor: brand.danger, 43 | }, 44 | }; 45 | // 46 | // Progress Bar Size 47 | export const progressBarSmall = { 48 | bar: { 49 | height: 3, 50 | borderRadius: Platform.select({ ios: 2 }), 51 | }, 52 | }; 53 | export const progressBarLarge = { 54 | bar: { 55 | height: 10, 56 | borderRadius: Platform.select({ ios: 8 }), 57 | }, 58 | }; 59 | -------------------------------------------------------------------------------- /styles/native/ts/core/helpers/progresscircle.ts: -------------------------------------------------------------------------------- 1 | import { brand, contrast, font } from "../variables"; 2 | /* 3 | 4 | DISCLAIMER: 5 | Do not change this file because it is core styling. 6 | Customizing core files will make updating Atlas much more difficult in the future. 7 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 8 | 9 | ========================================================================== 10 | Progress Circle 11 | 12 | //== Design Properties 13 | //## Helper classes to change the look and feel of the widget 14 | ========================================================================== */ 15 | // Progress Circle Color 16 | export const progressCircleSuccess = { 17 | fill: { 18 | backgroundColor: brand.success, 19 | }, 20 | text: { 21 | color: contrast.regular, 22 | }, 23 | }; 24 | export const progressCircleWarning = { 25 | fill: { 26 | backgroundColor: brand.warning, 27 | }, 28 | text: { 29 | color: contrast.regular, 30 | }, 31 | }; 32 | export const progressCircleDanger = { 33 | fill: { 34 | backgroundColor: brand.danger, 35 | }, 36 | text: { 37 | color: contrast.regular, 38 | }, 39 | }; 40 | export const progressCircleGray = { 41 | fill: { 42 | backgroundColor: contrast.regular, 43 | }, 44 | text: { 45 | color: contrast.regular, 46 | }, 47 | }; 48 | // 49 | // Sizes 50 | export const progressCircleSmall = { 51 | circle: { 52 | size: 50, 53 | }, 54 | fill: { 55 | width: 3, 56 | }, 57 | text: { 58 | fontSize: font.sizeSmall, 59 | }, 60 | }; 61 | -------------------------------------------------------------------------------- /styles/native/ts/core/helpers/rangeslider.ts: -------------------------------------------------------------------------------- 1 | import { sliderDanger, sliderSuccess, sliderWarning } from "./slider"; 2 | /* 3 | 4 | DISCLAIMER: 5 | Do not change this file because it is core styling. 6 | Customizing core files will make updating Atlas much more difficult in the future. 7 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 8 | 9 | ========================================================================== 10 | Range Slider 11 | 12 | //== Design Properties 13 | //## Helper classes to change the look and feel of the widget 14 | ========================================================================== */ 15 | // Range Slider Color 16 | export const rangeSliderSuccess = sliderSuccess; 17 | export const rangeSliderWarning = sliderWarning; 18 | export const rangeSliderDanger = sliderDanger; 19 | -------------------------------------------------------------------------------- /styles/native/ts/core/helpers/slider.ts: -------------------------------------------------------------------------------- 1 | import { Platform } from "react-native"; 2 | import { brand, contrast } from "../variables"; 3 | /* 4 | 5 | DISCLAIMER: 6 | Do not change this file because it is core styling. 7 | Customizing core files will make updating Atlas much more difficult in the future. 8 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 9 | 10 | ========================================================================== 11 | Slider 12 | 13 | //== Design Properties 14 | //## Helper classes to change the look and feel of the widget 15 | ========================================================================== */ 16 | // Slider Color 17 | export const sliderSuccess = { 18 | highlight: { 19 | backgroundColor: brand.success, 20 | }, 21 | highlightDisabled: { 22 | backgroundColor: Platform.select({ ios: brand.success, android: contrast.low }), 23 | }, 24 | }; 25 | export const sliderWarning = { 26 | highlight: { 27 | backgroundColor: brand.warning, 28 | }, 29 | highlightDisabled: { 30 | backgroundColor: Platform.select({ ios: brand.warning, android: contrast.low }), 31 | }, 32 | }; 33 | export const sliderDanger = { 34 | highlight: { 35 | backgroundColor: brand.danger, 36 | }, 37 | highlightDisabled: { 38 | backgroundColor: Platform.select({ ios: brand.danger, android: contrast.low }), 39 | }, 40 | }; 41 | -------------------------------------------------------------------------------- /styles/native/ts/core/helpers/tabcontainer.ts: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | DISCLAIMER: 4 | Do not change this file because it is core styling. 5 | Customizing core files will make updating Atlas much more difficult in the future. 6 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 7 | 8 | ========================================================================== 9 | Tab Container 10 | 11 | //== Design Properties 12 | //## Helper classes to change the look and feel of the widget 13 | ========================================================================== */ 14 | // Enable scroll for the tab bar 15 | export const tabContainerScroll = { 16 | tabBar: { 17 | scrollEnabled: true, 18 | }, 19 | }; 20 | // 21 | //== Extra Classes 22 | //## Helper classes to change the look and feel of the widget 23 | //-------------------------------------------------------------------------------------------------------------------// 24 | // Tab container as content of page 25 | export const tabContainerMinimal = { 26 | container: { 27 | backgroundColor: "transparent", 28 | }, 29 | tabBar: { 30 | backgroundColor: "transparent", 31 | elevation: 0, 32 | }, 33 | }; 34 | -------------------------------------------------------------------------------- /styles/native/ts/core/helpers/textbox.ts: -------------------------------------------------------------------------------- 1 | import { TextBoxType } from "../../types/widgets"; 2 | /* 3 | 4 | DISCLAIMER: 5 | Do not change this file because it is core styling. 6 | Customizing core files will make updating Atlas much more difficult in the future. 7 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 8 | 9 | ========================================================================== 10 | Text Box 11 | 12 | //== Design Properties 13 | //## Helper classes to change the look and feel of the widget 14 | ========================================================================== */ 15 | // Text Box Color 16 | export const textInputCapitalizeNone: TextBoxType = { 17 | input: { 18 | autoCapitalize: "none", 19 | }, 20 | }; 21 | export const textInputCapitalizeCharacters: TextBoxType = { 22 | input: { 23 | autoCapitalize: "characters", 24 | }, 25 | }; 26 | export const textInputCapitalizeWords: TextBoxType = { 27 | input: { 28 | autoCapitalize: "words", 29 | }, 30 | }; 31 | export const textInputCapitalizeSentences: TextBoxType = { 32 | input: { 33 | autoCapitalize: "sentences", 34 | }, 35 | }; 36 | -------------------------------------------------------------------------------- /styles/native/ts/core/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Atlas-UI-Framework", 3 | "version": "2.6.7" 4 | } -------------------------------------------------------------------------------- /styles/native/ts/core/widgets/activityindicator.ts: -------------------------------------------------------------------------------- 1 | import { brand } from "../variables"; 2 | import { ActivityIndicatorType } from "../../types/widgets"; 3 | /* 4 | 5 | DISCLAIMER: 6 | Do not change this file because it is core styling. 7 | Customizing core files will make updating Atlas much more difficult in the future. 8 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 9 | 10 | ========================================================================== 11 | Activity Indicator 12 | 13 | Default Class For Mendix Activity Indicator Widget 14 | ========================================================================== */ 15 | export const com_mendix_widget_native_activityindicator_ActivityIndicator: ActivityIndicatorType = { 16 | container: { 17 | // All ViewStyle properties are allowed 18 | }, 19 | indicator: { 20 | // Color and size are allowed 21 | color: brand.primary, 22 | size: "large", 23 | }, 24 | }; 25 | -------------------------------------------------------------------------------- /styles/native/ts/core/widgets/animation.ts: -------------------------------------------------------------------------------- 1 | import { AnimationType } from "../../types/widgets"; 2 | /* 3 | 4 | DISCLAIMER: 5 | Do not change this file because it is core styling. 6 | Customizing core files will make updating Atlas much more difficult in the future. 7 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 8 | 9 | ========================================================================== 10 | Animation 11 | 12 | Default Class For Mendix Animation Widget 13 | ========================================================================== */ 14 | export const com_mendix_widget_native_animation_Animation: AnimationType = { 15 | container: {}, 16 | }; 17 | -------------------------------------------------------------------------------- /styles/native/ts/core/widgets/backgroundimage.ts: -------------------------------------------------------------------------------- 1 | import { BackgroundImageType } from "../../types/widgets"; 2 | // 3 | // DISCLAIMER: 4 | // Do not change this file because it is core styling. 5 | // Customizing core files will make updating Atlas much more difficult in the future. 6 | // To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 7 | // 8 | 9 | /* ========================================================================== 10 | Background Image 11 | 12 | Default Class For Mendix Background Image Widget 13 | ========================================================================== */ 14 | 15 | 16 | export const com_mendix_widget_native_backgroundimage_BackgroundImage: BackgroundImageType = { 17 | container: { 18 | // All ViewStyle properties are allowed 19 | }, 20 | image: { 21 | // svgColor and all ImageStyle properties are allowed 22 | }, 23 | }; 24 | 25 | -------------------------------------------------------------------------------- /styles/native/ts/core/widgets/badge.ts: -------------------------------------------------------------------------------- 1 | import { badge, font } from "../variables"; 2 | import { BadgeType } from "../../types/widgets"; 3 | /* 4 | 5 | DISCLAIMER: 6 | Do not change this file because it is core styling. 7 | Customizing core files will make updating Atlas much more difficult in the future. 8 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 9 | 10 | ========================================================================== 11 | Badge 12 | 13 | Default Class For Mendix Badge Widget 14 | ========================================================================== */ 15 | export const com_mendix_widget_native_badge_Badge: BadgeType = { 16 | container: { 17 | // All ViewStyle properties are allowed 18 | borderRadius: badge.borderRadius, 19 | backgroundColor: badge.default.backgroundColor, 20 | paddingVertical: badge.paddingVertical, 21 | paddingHorizontal: badge.paddingHorizontal, 22 | }, 23 | caption: { 24 | // All TextStyle properties are allowed 25 | color: badge.default.color, 26 | fontFamily: font.family, 27 | fontWeight: badge.fontWeight, 28 | marginTop: -1, 29 | }, 30 | }; 31 | -------------------------------------------------------------------------------- /styles/native/ts/core/widgets/bottomsheet.ts: -------------------------------------------------------------------------------- 1 | import { background, border, brand, contrast, font } from "../variables"; 2 | import { BottomSheetType } from "../../types/widgets"; 3 | 4 | // 5 | // DISCLAIMER: 6 | // Do not change this file because it is core styling. 7 | // Customizing core files will make updating Atlas much more difficult in the future. 8 | // To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 9 | // 10 | 11 | /* ========================================================================== 12 | Bottom Sheet 13 | 14 | Default Class For Mendix Bottom Sheet Widget 15 | ========================================================================== */ 16 | 17 | 18 | export const com_mendix_widget_native_bottomsheet_BottomSheet: BottomSheetType = { 19 | container: { 20 | // All ViewStyle properties are allowed 21 | backgroundColor: background.primary, 22 | borderRadius: border.radius, 23 | elevation: 20, 24 | shadowColor: "#000", 25 | shadowOpacity: 0.1, 26 | shadowRadius: 6, 27 | shadowOffset: { 28 | width: 0, 29 | height: -4, 30 | }, 31 | }, 32 | containerWhenExpandedFullscreen: { 33 | // All ViewStyle properties are allowed 34 | height: "100%", 35 | alignSelf: "stretch", 36 | backgroundColor: background.primary, 37 | }, 38 | modal: { 39 | // All ViewStyle properties are allowed 40 | margin: 0, 41 | justifyContent: "flex-end", 42 | }, 43 | modalItems: { 44 | container: { 45 | // rippleColor & All TextStyle properties are allowed 46 | height: 50, 47 | marginTop: 0, 48 | rippleColor: contrast.lower, 49 | backgroundColor: background.primary, 50 | }, 51 | defaultStyle: { 52 | // All TextStyle properties are allowed 53 | fontSize: 16, 54 | color: font.color, 55 | }, 56 | primaryStyle: { 57 | // All TextStyle properties are allowed 58 | fontSize: 16, 59 | color: brand.primary, 60 | }, 61 | dangerStyle: { 62 | // All TextStyle properties are allowed 63 | fontSize: 16, 64 | color: brand.danger, 65 | }, 66 | customStyle: { 67 | // All TextStyle properties are allowed 68 | fontSize: 16, 69 | color: font.color, 70 | }, 71 | }, 72 | }; 73 | 74 | -------------------------------------------------------------------------------- /styles/native/ts/core/widgets/buttons.ts: -------------------------------------------------------------------------------- 1 | import { button, contrast, font } from "../variables"; 2 | import { ActionButtonType } from "../../types/widgets"; 3 | /* 4 | 5 | DISCLAIMER: 6 | Do not change this file because it is core styling. 7 | Customizing core files will make updating Atlas much more difficult in the future. 8 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 9 | 10 | ========================================================================== 11 | Button 12 | 13 | Default Class For Mendix Button Widget 14 | ========================================================================== */ 15 | export const ActionButton: ActionButtonType = { 16 | container: { 17 | // Ripplecolor and all ViewStyle properties are allowed 18 | borderWidth: 1, 19 | borderStyle: "solid", 20 | rippleColor: contrast.lowest, 21 | borderColor: button.primary.borderColor, 22 | backgroundColor: button.primary.backgroundColor, 23 | alignItems: "center", 24 | justifyContent: "center", 25 | borderRadius: button.borderRadius, 26 | paddingVertical: button.paddingVertical, 27 | paddingHorizontal: button.paddingHorizontal, 28 | }, 29 | containerDisabled: { 30 | // All ViewStyle properties are allowed 31 | borderColor: button.primary.borderColorDisabled, 32 | backgroundColor: button.primary.backgroundColorDisabled, 33 | }, 34 | icon: { 35 | // size and color are allowed 36 | color: button.primary.color, 37 | size: button.fontSizeIcon, 38 | }, 39 | iconDisabled: { 40 | // size and color are allowed 41 | color: button.primary.colorDisabled, 42 | }, 43 | caption: { 44 | // All TextStyle properties are allowed 45 | color: button.primary.color, 46 | fontSize: button.fontSize, 47 | fontFamily: font.family, 48 | fontWeight: button.fontWeight, 49 | }, 50 | captionDisabled: { 51 | // All TextStyle properties are allowed 52 | color: button.primary.colorDisabled, 53 | }, 54 | }; 55 | // 56 | // Default style for button inside a header 57 | export const ActionButtonHeader: ActionButtonType = { 58 | container: { 59 | borderColor: button.header.borderColor, 60 | backgroundColor: button.header.backgroundColor, 61 | paddingLeft: button.header.paddingLeft, 62 | paddingRight: button.header.paddingRight, 63 | }, 64 | icon: { 65 | color: button.header.color, 66 | size: button.header.fontSizeIcon, 67 | }, 68 | caption: { 69 | color: button.header.color, 70 | fontSize: button.header.fontSize, 71 | fontFamily: font.family, 72 | }, 73 | }; 74 | -------------------------------------------------------------------------------- /styles/native/ts/core/widgets/colorpicker.ts: -------------------------------------------------------------------------------- 1 | import { ColorPickerType } from "../../types/widgets"; 2 | /* 3 | 4 | DISCLAIMER: 5 | Do not change this file because it is core styling. 6 | Customizing core files will make updating Atlas much more difficult in the future. 7 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 8 | 9 | ========================================================================== 10 | Color Picker 11 | 12 | Default Class For Mendix Color Picker Widget 13 | ========================================================================== */ 14 | export const com_mendix_widget_native_colorpicker_ColorPicker: ColorPickerType = { 15 | container: { 16 | // All ViewStyle properties are allowed 17 | }, 18 | thumbnail: { 19 | // All ViewStyle properties are allowed 20 | }, 21 | }; 22 | -------------------------------------------------------------------------------- /styles/native/ts/core/widgets/container.ts: -------------------------------------------------------------------------------- 1 | import {ContainerType} from "../../types/widgets"; 2 | /* 3 | 4 | DISCLAIMER: 5 | Do not change this file because it is core styling. 6 | Customizing core files will make updating Atlas much more difficult in the future. 7 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 8 | 9 | ========================================================================== 10 | Container 11 | 12 | Default Class For Mendix Container Widget 13 | ========================================================================== */ 14 | export const Container: ContainerType = { 15 | container: { 16 | // rippleColor & all ViewStyle properties are allowed 17 | }, 18 | containerDisabled: { 19 | // All ViewStyle properties are allowed 20 | opacity: 0.6 21 | } 22 | }; 23 | 24 | export const ScrollContainer: ContainerType = { 25 | container: { 26 | // All ViewStyle properties are allowed 27 | }, 28 | }; 29 | -------------------------------------------------------------------------------- /styles/native/ts/core/widgets/images.ts: -------------------------------------------------------------------------------- 1 | import { contrast } from "../variables"; 2 | import { ImageType } from "../../types/widgets"; 3 | /* 4 | 5 | DISCLAIMER: 6 | Do not change this file because it is core styling. 7 | Customizing core files will make updating Atlas much more difficult in the future. 8 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 9 | 10 | ========================================================================== 11 | Image 12 | 13 | Default Class For Mendix Image Widgets 14 | ========================================================================== */ 15 | export const Image: ImageType = { 16 | container: { 17 | // rippleColor & all ViewStyle properties are allowed 18 | rippleColor: contrast.lowest, 19 | }, 20 | containerDisabled: { 21 | // All ViewStyle properties are allowed 22 | }, 23 | image: { 24 | // All ImageStyle properties are allowed 25 | maxWidth: "100%", 26 | maxHeight: "100%", 27 | resizeMode: "cover", 28 | }, 29 | imageDisabled: { 30 | // All ImageStyle properties are allowed 31 | opacity: 0.6 32 | } 33 | }; 34 | export const ImageViewer: ImageType = { 35 | container: { 36 | // RippleColor & All ViewStyle properties are allowed 37 | rippleColor: contrast.lowest, 38 | }, 39 | containerDisabled: { 40 | // All ViewStyle properties are allowed 41 | }, 42 | image: { 43 | // All ImageStyle properties are allowed 44 | maxWidth: "100%", 45 | maxHeight: "100%", 46 | resizeMode: "cover", 47 | }, 48 | imageDisabled: { 49 | // All ImageStyle properties are allowed 50 | opacity: 0.6 51 | } 52 | }; 53 | -------------------------------------------------------------------------------- /styles/native/ts/core/widgets/listviews.ts: -------------------------------------------------------------------------------- 1 | import { ListViewType } from "../../types/widgets"; 2 | /* 3 | 4 | DISCLAIMER: 5 | Do not change this file because it is core styling. 6 | Customizing core files will make updating Atlas much more difficult in the future. 7 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 8 | 9 | ========================================================================== 10 | List View 11 | 12 | Default Class For Mendix List View Widget 13 | ========================================================================== */ 14 | export const ListView: ListViewType = { 15 | container: { 16 | // numColumns & all ViewStyle properties are allowed 17 | }, 18 | listItem: { 19 | // All ViewStyle properties are allowed 20 | }, 21 | listItemDisabled: { 22 | // All ViewStyle properties are allowed 23 | opacity: 0.6 24 | }, 25 | }; 26 | -------------------------------------------------------------------------------- /styles/native/ts/core/widgets/listviewswipe.ts: -------------------------------------------------------------------------------- 1 | import { background } from "../variables"; 2 | import { ListViewSwipeType } from "../../types/widgets"; 3 | /* 4 | 5 | DISCLAIMER: 6 | Do not change this file because it is core styling. 7 | Customizing core files will make updating Atlas much more difficult in the future. 8 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 9 | 10 | ========================================================================== 11 | List View Swipe 12 | 13 | Default Class For Mendix List View Swipe Widget 14 | ========================================================================== */ 15 | export const com_mendix_widget_native_listviewswipe_ListViewSwipe: ListViewSwipeType = { 16 | container: { 17 | // All ViewStyle properties are allowed 18 | flex: 1, 19 | alignItems: "stretch", 20 | justifyContent: "space-between", 21 | backgroundColor: background.primary, 22 | }, 23 | leftAction: { 24 | // PanelSize & All ViewStyle properties are allowed 25 | panelSize: 200, 26 | flex: 1, 27 | flexDirection: "row", 28 | alignItems: "stretch", 29 | backgroundColor: background.primary, 30 | }, 31 | rightAction: { 32 | // PanelSize & All ViewStyle properties are allowed 33 | panelSize: 200, 34 | flex: 1, 35 | flexDirection: "row", 36 | alignItems: "stretch", 37 | backgroundColor: background.primary, 38 | }, 39 | }; 40 | -------------------------------------------------------------------------------- /styles/native/ts/core/widgets/maps.ts: -------------------------------------------------------------------------------- 1 | import { brand } from "../variables"; 2 | import { MapsType } from "../../types/widgets"; 3 | /* 4 | 5 | DISCLAIMER: 6 | Do not change this file because it is core styling. 7 | Customizing core files will make updating Atlas much more difficult in the future. 8 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 9 | 10 | ========================================================================== 11 | Maps 12 | 13 | Default Class For Mendix Maps Widget 14 | ========================================================================== */ 15 | export const com_mendix_widget_native_maps_Maps: MapsType = { 16 | container: { 17 | // All ViewStyle properties are allowed 18 | flex: 1, 19 | maxWidth: "100%", 20 | aspectRatio: 4 / 2, 21 | }, 22 | loadingOverlay: { 23 | // All ViewStyle properties are allowed 24 | }, 25 | loadingIndicator: { 26 | // Only color is allowed 27 | color: brand.primary, 28 | }, 29 | marker: { 30 | // Only color & opacity are allowed 31 | color: brand.primary, 32 | opacity: 1, 33 | }, 34 | }; 35 | -------------------------------------------------------------------------------- /styles/native/ts/core/widgets/pagetitle.ts: -------------------------------------------------------------------------------- 1 | import { font } from "../variables"; 2 | import { TextHeading1 } from "./typography"; 3 | import { PageTitleType } from "../../types/widgets"; 4 | /* 5 | 6 | DISCLAIMER: 7 | Do not change this file because it is core styling. 8 | Customizing core files will make updating Atlas much more difficult in the future. 9 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 10 | 11 | ========================================================================== 12 | Page Title 13 | 14 | Default Class For Mendix Page Title Widget 15 | ========================================================================== */ 16 | export const PageTitle: PageTitleType = { 17 | container: { 18 | // All ViewStyle properties are allowed 19 | }, 20 | text: { 21 | // All TextStyle properties are allowed 22 | ...TextHeading1.text, 23 | color: font.color, 24 | }, 25 | }; 26 | -------------------------------------------------------------------------------- /styles/native/ts/core/widgets/popupmenu.ts: -------------------------------------------------------------------------------- 1 | import { background, brand, contrast, font } from "../variables"; 2 | import { PopupMenuType } from "../../types/widgets"; 3 | /* 4 | 5 | DISCLAIMER: 6 | Do not change this file because it is core styling. 7 | Customizing core files will make updating Atlas much more difficult in the future. 8 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 9 | 10 | ========================================================================== 11 | Popup Menu 12 | 13 | Default Class For Mendix Popup Menu Widget 14 | ========================================================================== */ 15 | export const com_mendix_widget_native_popupmenu_PopupMenu: PopupMenuType = { 16 | container: { 17 | // All ViewStyle properties are allowed 18 | borderRadius: 10, 19 | shadowColor: "#000", 20 | shadowOpacity: 0.2, 21 | shadowRadius: 10, 22 | elevation: 16, 23 | backgroundColor: background.primary, 24 | }, 25 | custom: { 26 | container: { 27 | // All ViewStyle properties are allowed 28 | }, 29 | itemStyle: { 30 | rippleColor: contrast.lower, 31 | }, 32 | }, 33 | basic: { 34 | dividerColor: font.color, 35 | container: { 36 | // All ViewStyle properties are allowed 37 | height: 40, 38 | }, 39 | itemStyle: { 40 | ellipsizeMode: "tail", // 'head' | 'middle' | 'tail' | 'clip'; 41 | rippleColor: contrast.lower, 42 | defaultStyle: { 43 | // All TextStyle properties are allowed 44 | color: font.color, 45 | }, 46 | primaryStyle: { 47 | // All TextStyle properties are allowed 48 | color: brand.primary, 49 | }, 50 | dangerStyle: { 51 | // All TextStyle properties are allowed 52 | color: brand.danger, 53 | }, 54 | customStyle: { 55 | // All TextStyle properties are allowed 56 | }, 57 | }, 58 | }, 59 | }; 60 | -------------------------------------------------------------------------------- /styles/native/ts/core/widgets/progressbar.ts: -------------------------------------------------------------------------------- 1 | import { Platform } from "react-native"; 2 | import { anyColorToRgbString } from "../helpers/_functions/convertcolors"; 3 | import { brand, font, input } from "../variables"; 4 | import { ProgressBarType } from "../../types/widgets"; 5 | /* 6 | 7 | DISCLAIMER: 8 | Do not change this file because it is core styling. 9 | Customizing core files will make updating Atlas much more difficult in the future. 10 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 11 | 12 | ========================================================================== 13 | Progress Bar 14 | 15 | Default Class For Mendix Progress Bar Widget 16 | ========================================================================== */ 17 | export const com_mendix_widget_native_progressbar_ProgressBar: ProgressBarType = { 18 | container: { 19 | // All ViewStyle properties are allowed 20 | alignSelf: "stretch", 21 | }, 22 | bar: { 23 | // All ViewStyle properties are allowed 24 | ...Platform.select({ 25 | ios: { 26 | borderColor: brand.primary, 27 | }, 28 | android: { 29 | borderRadius: 0, 30 | borderWidth: 0, 31 | backgroundColor: `rgba(${anyColorToRgbString(brand.primary)},0.2)`, 32 | }, 33 | }), 34 | }, 35 | fill: { 36 | //Only the backgroundColor property is allowed 37 | backgroundColor: brand.primary, 38 | }, 39 | validationMessage: { 40 | // All TextStyle properties are allowed 41 | color: input.errorColor, 42 | fontSize: font.size, 43 | fontFamily: font.family, 44 | }, 45 | }; 46 | -------------------------------------------------------------------------------- /styles/native/ts/core/widgets/progresscircle.ts: -------------------------------------------------------------------------------- 1 | import { brand, contrast, font, input } from "../variables"; 2 | import { ProgressCircleType } from "../../types/widgets"; 3 | /* 4 | 5 | DISCLAIMER: 6 | Do not change this file because it is core styling. 7 | Customizing core files will make updating Atlas much more difficult in the future. 8 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 9 | 10 | ========================================================================== 11 | Progress Circle 12 | 13 | Default Class For Mendix Progress Circle Widget 14 | ========================================================================== */ 15 | export const com_mendix_widget_native_progresscircle_ProgressCircle: ProgressCircleType = { 16 | container: { 17 | // All ViewStyle properties are allowed 18 | }, 19 | circle: { 20 | // Only the size & borderWidth & borderColor properties are allowed 21 | size: 80, 22 | borderWidth: 0, 23 | }, 24 | fill: { 25 | // Only the width & backgroundColor & lineCapRounded properties are allowed 26 | backgroundColor: brand.primary, 27 | width: 5, // Thickness, 28 | lineCapRounded: true, 29 | }, 30 | text: { 31 | // All TextStyle properties are allowed 32 | color: contrast.regular, 33 | fontSize: font.size, 34 | fontWeight: font.weightSemiBold, 35 | fontFamily: font.family, 36 | }, 37 | validationMessage: { 38 | // All TextStyle properties are allowed 39 | color: input.errorColor, 40 | fontSize: font.size, 41 | fontFamily: font.family, 42 | }, 43 | }; 44 | -------------------------------------------------------------------------------- /styles/native/ts/core/widgets/qrcode.ts: -------------------------------------------------------------------------------- 1 | import { background, contrast } from "../variables"; 2 | import { QRCodeType } from "../../types/widgets"; 3 | /* 4 | 5 | DISCLAIMER: 6 | Do not change this file because it is core styling. 7 | Customizing core files will make updating Atlas much more difficult in the future. 8 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 9 | 10 | ========================================================================== 11 | QR Code 12 | 13 | Default Class For Mendix QR Code Widget 14 | ========================================================================== */ 15 | export const com_mendix_widget_native_qrcode_QRCode: QRCodeType = { 16 | container: { 17 | // All ViewStyle properties are allowed 18 | }, 19 | qrcode: { 20 | // Only size, color and backgroundColor are allowed 21 | size: 100, 22 | color: contrast.highest, 23 | backgroundColor: background.primary, 24 | }, 25 | }; 26 | -------------------------------------------------------------------------------- /styles/native/ts/core/widgets/rangeslider.ts: -------------------------------------------------------------------------------- 1 | import { com_mendix_widget_native_slider_Slider as Slider } from "./slider"; 2 | import { SliderType } from "../../types/widgets"; 3 | /* 4 | 5 | DISCLAIMER: 6 | Do not change this file because it is core styling. 7 | Customizing core files will make updating Atlas much more difficult in the future. 8 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 9 | 10 | ========================================================================== 11 | Range Slider 12 | 13 | Default Class For Mendix Range Slider Widget 14 | ========================================================================== */ 15 | 16 | export const com_mendix_widget_native_rangeslider_RangeSlider: SliderType = Slider; 17 | -------------------------------------------------------------------------------- /styles/native/ts/core/widgets/rating.ts: -------------------------------------------------------------------------------- 1 | import { spacing } from "../variables"; 2 | import { RatingType } from "../../types/widgets"; 3 | /* 4 | 5 | DISCLAIMER: 6 | Do not change this file because it is core styling. 7 | Customizing core files will make updating Atlas much more difficult in the future. 8 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 9 | 10 | ========================================================================== 11 | Rating 12 | 13 | Default Class For Mendix Rating Widget 14 | ========================================================================== */ 15 | export const com_mendix_widget_native_rating_Rating: RatingType = { 16 | container: { 17 | // All ViewStyle properties are allowed 18 | }, 19 | containerDisabled: { 20 | // All ViewStyle properties are allowed 21 | opacity: 0.5, 22 | }, 23 | icon: { 24 | // Size, color, selectedColor & all ViewStyle properties are allowed 25 | size: 30, 26 | marginRight: spacing.smaller, 27 | }, 28 | }; 29 | -------------------------------------------------------------------------------- /styles/native/ts/core/widgets/safeareaview.ts: -------------------------------------------------------------------------------- 1 | import { SafeAreaViewType } from "../../types/widgets"; 2 | /* 3 | 4 | DISCLAIMER: 5 | Do not change this file because it is core styling. 6 | Customizing core files will make updating Atlas much more difficult in the future. 7 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 8 | 9 | ========================================================================== 10 | Container 11 | 12 | Default Class For Mendix Safe Area View Widget 13 | ========================================================================== */ 14 | export const com_mendix_widget_native_safeareaview_SafeAreaView: SafeAreaViewType = { 15 | container: { 16 | // All ViewStyle properties are allowed 17 | }, 18 | }; 19 | -------------------------------------------------------------------------------- /styles/native/ts/core/widgets/togglebuttons.ts: -------------------------------------------------------------------------------- 1 | import { Platform } from "react-native"; 2 | import { background, brand, contrast, font, input } from "../variables"; 3 | import { ToggleButtonsType } from "../../types/widgets"; 4 | /* 5 | 6 | DISCLAIMER: 7 | Do not change this file because it is core styling. 8 | Customizing core files will make updating Atlas much more difficult in the future. 9 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 10 | 11 | ========================================================================== 12 | Segmented Controls 13 | 14 | Default Class For Mendix Segmented Controls Widget 15 | ========================================================================== */ 16 | export const com_mendix_widget_native_togglebuttons_ToggleButtons: ToggleButtonsType = { 17 | container: { 18 | // All ViewStyle properties are allowed 19 | alignSelf: "stretch", 20 | }, 21 | containerDisabled: { 22 | opacity: 0.6, 23 | alignSelf: "stretch", 24 | }, 25 | button: { 26 | // All ViewStyle properties are allowed 27 | backgroundColor: background.primary, 28 | borderColor: Platform.select({ios: brand.primary, android: contrast.lower}), 29 | }, 30 | text: { 31 | // All TextStyle properties are allowed 32 | color: Platform.select({ios: brand.primary, android: contrast.high}), 33 | fontSize: font.size, 34 | fontFamily: font.family, 35 | }, 36 | activeButton: { 37 | // All ViewStyle properties are allowed 38 | ...Platform.select({ 39 | ios: { 40 | backgroundColor: brand.primary, 41 | borderColor: brand.primary, 42 | }, 43 | android: { 44 | backgroundColor: brand.primary, 45 | borderColor: brand.primary, 46 | }, 47 | }), 48 | }, 49 | activeButtonText: { 50 | // All TextStyle properties are allowed 51 | fontSize: font.size, 52 | fontFamily: font.family, 53 | }, 54 | validationMessage: { 55 | // All TextStyle properties are allowed 56 | color: input.errorColor, 57 | fontSize: font.size, 58 | fontFamily: font.family, 59 | }, 60 | }; 61 | -------------------------------------------------------------------------------- /styles/native/ts/core/widgets/typography.ts: -------------------------------------------------------------------------------- 1 | import { font } from "../variables"; 2 | import { TextType } from "../../types/widgets"; 3 | /* 4 | 5 | DISCLAIMER: 6 | Do not change this file because it is core styling. 7 | Customizing core files will make updating Atlas much more difficult in the future. 8 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 9 | 10 | ========================================================================== 11 | Text 12 | 13 | Default Class For Mendix Text Widget 14 | ========================================================================== */ 15 | export const Text: TextType = { 16 | container: { 17 | // All ViewStyle properties are allowed 18 | }, 19 | text: { 20 | // numberOfLines & All TextStyle properties are allowed 21 | color: font.color, 22 | fontSize: font.size, 23 | fontFamily: font.family, 24 | lineHeight: font.size + 2, 25 | }, 26 | }; 27 | 28 | export const TextHeading1: TextType = { 29 | container: {}, 30 | text: { 31 | fontWeight: font.weightSemiBold, 32 | fontSize: font.sizeH1, 33 | fontFamily: font.family, 34 | lineHeight: font.sizeH1, 35 | }, 36 | }; 37 | export const TextHeading2: TextType = { 38 | container: {}, 39 | text: { 40 | fontWeight: font.weightSemiBold, 41 | fontSize: font.sizeH2, 42 | fontFamily: font.family, 43 | lineHeight: font.sizeH2, 44 | }, 45 | }; 46 | export const TextHeading3: TextType = { 47 | container: {}, 48 | text: { 49 | fontWeight: font.weightSemiBold, 50 | fontSize: font.sizeH3, 51 | fontFamily: font.family, 52 | lineHeight: font.sizeH3, 53 | }, 54 | }; 55 | export const TextHeading4: TextType = { 56 | container: {}, 57 | text: { 58 | fontWeight: font.weightSemiBold, 59 | fontSize: font.sizeH4, 60 | fontFamily: font.family, 61 | lineHeight: font.sizeH4, 62 | }, 63 | }; 64 | export const TextHeading5: TextType = { 65 | container: {}, 66 | text: { 67 | fontWeight: font.weightSemiBold, 68 | fontSize: font.sizeH5, 69 | fontFamily: font.family, 70 | lineHeight: font.sizeH5, 71 | }, 72 | }; 73 | export const TextHeading6: TextType = { 74 | container: {}, 75 | text: { 76 | fontWeight: font.weightSemiBold, 77 | fontSize: font.sizeH6, 78 | fontFamily: font.family, 79 | lineHeight: font.sizeH6, 80 | }, 81 | }; 82 | -------------------------------------------------------------------------------- /styles/native/ts/core/widgets/videoplayer.ts: -------------------------------------------------------------------------------- 1 | import { VideoPlayerType } from "../../types/widgets"; 2 | /* 3 | 4 | DISCLAIMER: 5 | Do not change this file because it is core styling. 6 | Customizing core files will make updating Atlas much more difficult in the future. 7 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 8 | 9 | ========================================================================== 10 | Video Player 11 | 12 | Default Class For Mendix Video Player Widget 13 | ========================================================================== */ 14 | export const com_mendix_widget_native_videoplayer_VideoPlayer: VideoPlayerType = { 15 | container: { 16 | // All ViewStyle properties are allowed 17 | }, 18 | indicator: { 19 | // Only the backgroundColor property is allowed 20 | }, 21 | video: { 22 | // All ViewStyle properties are allowed 23 | }, 24 | fullScreenVideoPlayer: { 25 | // All ViewStyle properties are allowed 26 | }, 27 | controlBtnContainerStyle: { 28 | // All ViewStyle properties are allowed 29 | }, 30 | fullScreenVideoStyle: { 31 | // All ViewStyle properties are allowed 32 | }, 33 | fullScreenActivityIndicatorStyle: { 34 | // All ViewStyle properties are allowed 35 | }, 36 | }; 37 | -------------------------------------------------------------------------------- /styles/native/ts/core/widgets/webview.ts: -------------------------------------------------------------------------------- 1 | import { font } from "../variables"; 2 | import { WebViewType } from "../../types/widgets"; 3 | /* 4 | 5 | DISCLAIMER: 6 | Do not change this file because it is core styling. 7 | Customizing core files will make updating Atlas much more difficult in the future. 8 | To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. 9 | 10 | ========================================================================== 11 | Web View 12 | 13 | Default Class For Mendix Web View Widget 14 | ========================================================================== */ 15 | export const com_mendix_widget_native_webview_WebView: WebViewType = { 16 | container: { 17 | // All ViewStyle properties are allowed 18 | }, 19 | errorContainer: { 20 | // All ViewStyle properties are allowed 21 | }, 22 | errorText: { 23 | // All TextStyle properties are allowed 24 | fontSize: font.size, 25 | fontFamily: font.family, 26 | }, 27 | }; 28 | -------------------------------------------------------------------------------- /styles/native/ts/types/helperclass.d.ts: -------------------------------------------------------------------------------- 1 | import { ViewStyle } from "react-native"; 2 | 3 | export interface Helperclass { 4 | container: ViewStyle 5 | } 6 | 7 | -------------------------------------------------------------------------------- /styles/native/ts/ui_resources/atlas_ui_resources/buildingblocks/header.ts: -------------------------------------------------------------------------------- 1 | import { Platform } from "react-native"; 2 | import { background, border, contrast, spacing } from "../../../core/variables"; 3 | /* 4 | ========================================================================== 5 | Cards 6 | 7 | ========================================================================== 8 | */ 9 | export const header = { 10 | container: { 11 | borderRadius: border.radius, 12 | backgroundColor: background.primary, 13 | marginBottom: spacing.regular, 14 | 15 | ...Platform.select({ 16 | android: { 17 | borderWidth: 1, 18 | borderColor: contrast.lowest, 19 | }, 20 | }), 21 | }, 22 | }; 23 | // 24 | //== Elements 25 | //-------------------------------------------------------------------------------------------------------------------// 26 | export const headerImageFull = { 27 | container: { 28 | overflow: "hidden", 29 | }, 30 | image: { 31 | width: "100%", 32 | height: 250, 33 | resizeMode: "cover", 34 | }, 35 | }; 36 | export const headerImageOverlay = { 37 | container: { 38 | zIndex: 10, 39 | width: "100%", 40 | height: "100%", 41 | position: "absolute", 42 | backgroundColor: "rgba(0,0,0,0.4)", 43 | }, 44 | }; 45 | export const headerBody = { 46 | container: { 47 | bottom: 0, 48 | zIndex: 11, 49 | width: "100%", 50 | position: "absolute", 51 | backgroundColor: "transparent", 52 | }, 53 | }; 54 | // 55 | //== Variations 56 | //-------------------------------------------------------------------------------------------------------------------// 57 | 58 | -------------------------------------------------------------------------------- /styles/native/ts/ui_resources/atlas_ui_resources/layouts/layout.ts: -------------------------------------------------------------------------------- 1 | import { NativeModules } from "react-native"; 2 | import { darkMode } from "../../../app/custom-variables.js"; 3 | import { background, font, navigation } from "../../../core/variables"; 4 | /* 5 | ========================================================================== 6 | TopBar / BottomBar / ProgressOverlay 7 | 8 | Default Class For Mendix TopBar, BottomBar and ProgressOverlay 9 | ========================================================================== 10 | */ 11 | // backgroundColor of the native iOS statusbar can not be changed. 12 | // To fix this we change the barStyle of the statusbar if OS theme is dark and app theme is light (And the other way around). 13 | const isOSDarkMode = NativeModules && NativeModules.RNDarkMode && NativeModules.RNDarkMode.initialMode && NativeModules.RNDarkMode.initialMode === "dark"; 14 | const statusBarStyle = !darkMode && isOSDarkMode ? 15 | "dark-content" : 16 | darkMode && !isOSDarkMode ? "light-content" : navigation.statusBar.barStyle; 17 | // 18 | export const Layout = { 19 | sidebar: { 20 | // All ViewStyle properties are allowed 21 | }, 22 | statusBar: { 23 | // Only backgroundColor and barStyle are allowed 24 | backgroundColor: navigation.statusBar.backgroundColor, // Android only 25 | barStyle: statusBarStyle, 26 | }, 27 | header: { 28 | container: { 29 | // All ViewStyle properties are allowed 30 | backgroundColor: navigation.topBar.backgroundColor, 31 | borderBottomWidth: undefined, 32 | }, 33 | title: { 34 | // All TextStyle properties are allowed 35 | color: navigation.topBar.titleColor, 36 | fontSize: navigation.topBar.titleFontSize, 37 | fontFamily: font.family, 38 | fontWeight: font.weightBold, 39 | }, 40 | backButtonText: { 41 | // All TextStyle properties are allowed 42 | color: navigation.topBar.backButtonColor, 43 | fontFamily: font.family, 44 | }, 45 | backButtonIcon: { 46 | // All ImageStyle properties are allowed 47 | tintColor: navigation.topBar.backButtonColor, 48 | }, 49 | }, 50 | container: { 51 | // All ViewStyle properties are allowed 52 | backgroundColor: background.primary, 53 | }, 54 | }; 55 | // 56 | export const Page = Layout; 57 | -------------------------------------------------------------------------------- /styles/native/ts/ui_resources/atlas_ui_resources/pagetemplates/inspectiondetails.ts: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================================== 3 | Inspection details 4 | 5 | ========================================================================== 6 | */ 7 | //== Elements 8 | //-------------------------------------------------------------------------------------------------------------------// 9 | export const carouselCardImage = { 10 | container: { 11 | borderRadius: 10, 12 | overflow: "hidden", 13 | }, 14 | image: { 15 | width: "100%", 16 | height: "100%", 17 | }, 18 | }; 19 | 20 | export const carouselFullWidthImage = { 21 | container: {}, 22 | image: { 23 | width: "100%", 24 | height: "100%", 25 | }, 26 | }; 27 | // 28 | //== Variations 29 | //-------------------------------------------------------------------------------------------------------------------// 30 | // 31 | -------------------------------------------------------------------------------- /styles/native/ts/ui_resources/atlas_ui_resources/pagetemplates/maps.ts: -------------------------------------------------------------------------------- 1 | import { background, border, contrast, spacing } from "../../../core/variables.js"; 2 | /* 3 | ========================================================================== 4 | Maps 5 | 6 | ========================================================================== 7 | */ 8 | // 9 | //== Elements 10 | //-------------------------------------------------------------------------------------------------------------------// 11 | export const mapsBackground = { 12 | container: { 13 | position: "absolute", 14 | height: "100%", 15 | width: "100%", 16 | zIndex: 0, 17 | }, 18 | }; 19 | export const mapsFooter = { 20 | container: { 21 | bottom: 0, 22 | position: "absolute", 23 | }, 24 | }; 25 | export const mapsFooterSendLocation = { 26 | container: { 27 | flex: 1, 28 | alignSelf: "flex-end", 29 | backgroundColor: background.primary, 30 | padding: spacing.regular, 31 | margin: spacing.regular, 32 | borderRadius: border.radius, 33 | elevation: 4, 34 | shadowColor: contrast.lower, 35 | shadowOpacity: 0.8, 36 | shadowRadius: 8, 37 | shadowOffset: { 38 | width: 0, 39 | height: 2, 40 | }, 41 | }, 42 | }; 43 | export const mapsList = { 44 | container: { 45 | paddingHorizontal: spacing.regular, 46 | }, 47 | }; 48 | export const mapsListItemImage = { 49 | container: { 50 | backgroundColor: background.primary, 51 | borderRadius: border.radius, 52 | marginVertical: spacing.regular, 53 | marginLeft: spacing.smallest, 54 | marginRight: spacing.regular, 55 | elevation: 4, 56 | shadowColor: contrast.lower, 57 | shadowOpacity: 0.8, 58 | shadowRadius: 8, 59 | shadowOffset: { 60 | width: 0, 61 | height: 2, 62 | }, 63 | }, 64 | image: { 65 | borderRadius: border.radius, 66 | }, 67 | }; 68 | // 69 | //== Variations 70 | //-------------------------------------------------------------------------------------------------------------------// 71 | // 72 | 73 | -------------------------------------------------------------------------------- /styles/native/ts/ui_resources/atlas_ui_resources/pagetemplates/page.ts: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================================== 3 | Page 4 | 5 | ========================================================================== 6 | */ 7 | //== Elements 8 | //-------------------------------------------------------------------------------------------------------------------// 9 | // 10 | //== Variations 11 | //-------------------------------------------------------------------------------------------------------------------// 12 | // 13 | export const pageHeaderBorderNone = { 14 | sidebar: { 15 | // All ViewStyle properties are allowed 16 | }, 17 | statusBar: { 18 | // Only backgroundColor and barStyle are allowed 19 | }, 20 | header: { 21 | container: { 22 | // All ViewStyle properties are allowed 23 | elevation: 0, 24 | borderBottomWidth: undefined, 25 | }, 26 | title: { 27 | // All TextStyle properties are allowed 28 | }, 29 | backButtonText: { 30 | // All TextStyle properties are allowed 31 | }, 32 | backButtonIcon: { 33 | // All ImageStyle properties are allowed 34 | }, 35 | }, 36 | container: { 37 | // All ViewStyle properties are allowed 38 | }, 39 | }; 40 | -------------------------------------------------------------------------------- /styles/web/css/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mendix/Atlas-UI-Framework/7f747180572ea9c0f0321f1659ffdd3bb287b974/styles/web/css/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /styles/web/css/fonts/glyphicons-halflings-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mendix/Atlas-UI-Framework/7f747180572ea9c0f0321f1659ffdd3bb287b974/styles/web/css/fonts/glyphicons-halflings-regular.woff2 -------------------------------------------------------------------------------- /styles/web/sass/app/_custom.scss: -------------------------------------------------------------------------------- 1 | @import "custom-variables"; 2 | -------------------------------------------------------------------------------- /styles/web/sass/core/_legacy/bootstrap/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mendix/Atlas-UI-Framework/7f747180572ea9c0f0321f1659ffdd3bb287b974/styles/web/sass/core/_legacy/bootstrap/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /styles/web/sass/core/_legacy/bootstrap/fonts/glyphicons-halflings-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mendix/Atlas-UI-Framework/7f747180572ea9c0f0321f1659ffdd3bb287b974/styles/web/sass/core/_legacy/bootstrap/fonts/glyphicons-halflings-regular.woff2 -------------------------------------------------------------------------------- /styles/web/sass/core/base/_animation.scss: -------------------------------------------------------------------------------- 1 | // 2 | // DISCLAIMER: 3 | // Do not change this file because it is core styling. 4 | // Customizing core files will make updating Atlas much more difficult in the future. 5 | // To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten. 6 | // 7 | 8 | @keyframes slideInUp { 9 | from { 10 | visibility: visible; 11 | transform: translate3d(0, 100%, 0); 12 | } 13 | 14 | to { 15 | transform: translate3d(0, 0, 0); 16 | } 17 | } 18 | 19 | .animated { 20 | animation-duration: 0.4s; 21 | animation-fill-mode: both; 22 | } 23 | 24 | .slideInUp { 25 | animation-name: slideInUp; 26 | } 27 | 28 | @keyframes slideInDown { 29 | from { 30 | visibility: visible; 31 | transform: translate3d(0, -100%, 0); 32 | } 33 | 34 | to { 35 | transform: translate3d(0, 0, 0); 36 | } 37 | } 38 | 39 | .slideInDown { 40 | animation-name: slideInDown; 41 | } 42 | 43 | @keyframes fadeIn { 44 | from { 45 | opacity: 0; 46 | } 47 | 48 | to { 49 | opacity: 1; 50 | } 51 | } 52 | 53 | .fadeIn { 54 | animation-name: fadeIn; 55 | } 56 | -------------------------------------------------------------------------------- /styles/web/sass/core/base/_base.scss: -------------------------------------------------------------------------------- 1 | // 2 | // DISCLAIMER: 3 | // Do not change this file because it is core styling. 4 | // Customizing core files will make updating Atlas much more difficult in the future. 5 | // To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten. 6 | // 7 | /* ========================================================================== 8 | Base 9 | 10 | Default settings 11 | ========================================================================== */ 12 | html { 13 | height: 100%; 14 | } 15 | 16 | body { 17 | min-height: 100%; 18 | color: $font-color-default; 19 | background-color: $bg-color; 20 | font-family: $font-family-base; 21 | font-size: $font-size-default; 22 | font-weight: $font-weight-normal; 23 | line-height: $line-height-base; 24 | } 25 | 26 | a { 27 | -moz-transition: 0.25s; 28 | -o-transition: 0.25s; 29 | -webkit-transition: 0.25s; 30 | transition: 0.25s; 31 | color: $link-color; 32 | -webkit-backface-visibility: hidden; 33 | } 34 | 35 | a:hover { 36 | text-decoration: underline; 37 | color: $link-hover-color; 38 | } 39 | 40 | // Address `outline` inconsistency between Chrome and other browsers. 41 | a:focus { 42 | outline: thin dotted; 43 | } 44 | 45 | // Improve readability when focused and also mouse hovered in all browsers 46 | a:active, 47 | a:hover { 48 | outline: 0; 49 | } 50 | 51 | // Removes large blue border in chrome on focus and active states 52 | input:focus, 53 | button:focus, 54 | .mx-link:focus { 55 | outline: 0; 56 | } 57 | 58 | // Removes large blue border for tabindexes from widgets 59 | div[tabindex] { 60 | outline: 0; 61 | } 62 | 63 | // Disabled State 64 | .disabled, 65 | [disabled] { 66 | cursor: not-allowed; 67 | // opacity: 0.65; 68 | -webkit-box-shadow: none; 69 | box-shadow: none; 70 | filter: alpha(opacity=65); 71 | } 72 | -------------------------------------------------------------------------------- /styles/web/sass/core/base/_reset.scss: -------------------------------------------------------------------------------- 1 | // 2 | // DISCLAIMER: 3 | // Do not change this file because it is core styling. 4 | // Customizing core files will make updating Atlas much more difficult in the future. 5 | // To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten. 6 | // 7 | 8 | // Basic styling Scroll container 9 | // .mx-scrollcontainer { 10 | // .mx-scrollcontainer-wrapper { 11 | // padding: 0; 12 | // // Convert width to max-width when in scroll container to make sure you dont get scrollbars 13 | // .mx-layoutgrid-fixed { 14 | // width: 100%; 15 | // margin: auto; 16 | // @media (min-width: $screen-md) { 17 | // max-width: 750px; 18 | // } 19 | // @media (min-width: $screen-lg) { 20 | // max-width: 970px; 21 | // } 22 | // @media (min-width: $screen-xl) { 23 | // max-width: 1170px; 24 | // } 25 | // } 26 | // } 27 | // } 28 | 29 | .mx-scrollcontainer .mx-placeholder { 30 | width: 100%; 31 | height: 100%; 32 | .mx-layoutgrid, 33 | .mx-layoutgrid-fluid { 34 | @include layout-spacing($type: padding, $direction: all, $device: responsive); 35 | .mx-layoutgrid, 36 | .mx-layoutgrid-fluid { 37 | padding: 0; 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /styles/web/sass/core/base/mixins/_animations.scss: -------------------------------------------------------------------------------- 1 | // 2 | // DISCLAIMER: 3 | // Do not change this file because it is core styling. 4 | // Customizing core files will make updating Atlas much more difficult in the future. 5 | // To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten. 6 | // 7 | 8 | @mixin transition( 9 | $style: initial, 10 | $delay: 0s, 11 | $duration: 0.3s, 12 | $property: all, 13 | $timing-fucntion: cubic-bezier(0.4, 0, 0.2, 1) 14 | ) { 15 | -webkit-transition: $property $duration $delay $timing-fucntion; 16 | -moz-transition: $property $duration $delay $timing-fucntion; 17 | -o-transition: $property $duration $delay $timing-fucntion; 18 | transition: $property $duration $delay $timing-fucntion; 19 | transform-style: $style; 20 | } 21 | 22 | @mixin ripple($color: #000, $transparency: 10%, $scale: 10) { 23 | position: relative; 24 | overflow: hidden; 25 | transform: translate3d(0, 0, 0); 26 | 27 | &:after { 28 | content: ''; 29 | display: block; 30 | position: absolute; 31 | width: 100%; 32 | height: 100%; 33 | top: 0; 34 | left: 0; 35 | pointer-events: none; 36 | background-image: radial-gradient(circle, $color $transparency, transparent $transparency); 37 | background-repeat: no-repeat; 38 | background-position: 50%; 39 | -webkit-transform: scale($scale, $scale); 40 | transform: scale($scale, $scale); 41 | opacity: 0; 42 | -webkit-transition: transform 0.5s, opacity 1s; 43 | -moz-transition: transform 0.5s, opacity 1s; 44 | -o-transition: transform 0.5s, opacity 1s; 45 | transition: transform 0.5s, opacity 1s; 46 | } 47 | 48 | &:active:after { 49 | -webkit-transform: scale(0, 0); 50 | transform: scale(0, 0); 51 | opacity: 0.1; 52 | transition: 0s; 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /styles/web/sass/core/base/mixins/_buttons.scss: -------------------------------------------------------------------------------- 1 | // 2 | // DISCLAIMER: 3 | // Do not change this file because it is core styling. 4 | // Customizing core files will make updating Atlas much more difficult in the future. 5 | // To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten. 6 | // 7 | 8 | @mixin button-variant($color, $background, $border, $hover) { 9 | color: $color; 10 | border-color: $border; 11 | background-color: $background; 12 | 13 | &:hover, 14 | &:focus, 15 | &:active, 16 | &.active, 17 | .open > &.dropdown-toggle { 18 | color: $color; 19 | border-color: $hover; 20 | background-color: $hover; 21 | } 22 | &:active, 23 | &.active, 24 | .open > &.dropdown-toggle { 25 | background-image: none; 26 | } 27 | &.disabled, 28 | &[disabled], 29 | &[aria-disabled], 30 | fieldset[disabled] { 31 | &, 32 | &:hover, 33 | &:focus, 34 | &:active, 35 | &.active { 36 | border-color: $border; 37 | background-color: $background; 38 | } 39 | } 40 | // Button bordered 41 | &.btn-bordered { 42 | background-color: transparent; 43 | @if $color != $btn-default-color { 44 | color: $border; 45 | } 46 | 47 | &:hover, 48 | &:focus, 49 | &:active, 50 | &.active, 51 | .open > &.dropdown-toggle { 52 | color: $color; 53 | border-color: $border; 54 | background-color: $border; 55 | } 56 | } 57 | // Button as link 58 | &.btn-link { 59 | text-decoration: none; 60 | border-color: transparent; 61 | background-color: transparent; 62 | @if $color != $btn-default-color { 63 | color: $background; 64 | } 65 | 66 | &:hover { 67 | border-color: $btn-link-bg-hover; 68 | background-color: $btn-link-bg-hover; 69 | } 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /styles/web/sass/core/base/mixins/_groupbox.scss: -------------------------------------------------------------------------------- 1 | // 2 | // DISCLAIMER: 3 | // Do not change this file because it is core styling. 4 | // Customizing core files will make updating Atlas much more difficult in the future. 5 | // To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten. 6 | // 7 | 8 | @mixin groupbox-variant($color, $background) { 9 | > .mx-groupbox-header { 10 | color: $color; 11 | border-color: $background; 12 | background: $background; 13 | } 14 | > .mx-groupbox-body { 15 | border-color: $background; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /styles/web/sass/core/base/mixins/_spacing.scss: -------------------------------------------------------------------------------- 1 | // 2 | // DISCLAIMER: 3 | // Do not change this file because it is core styling. 4 | // Customizing core files will make updating Atlas much more difficult in the future. 5 | // To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten. 6 | // 7 | 8 | @mixin get-responsive-spacing-large($type: padding, $direction: all, $is_important: false) { 9 | $suffix: ''; 10 | $dash: '-'; // Otherwise it will be interpreted as a minus symbol. Needed for the Gonzales PE version: 3.4.7 compiler (used by the Webmodeler) 11 | 12 | @if $is_important != false { 13 | $suffix: ' !important'; 14 | } 15 | @if $direction==all { 16 | @media (max-width: $screen-sm-max) { 17 | #{$type}: #{$m-spacing-large}#{$suffix}; 18 | } 19 | @media (min-width: $screen-md) { 20 | #{$type}: #{$t-spacing-large}#{$suffix}; 21 | } 22 | @media (min-width: $screen-lg) { 23 | #{$type}: #{$spacing-large}#{$suffix}; 24 | } 25 | } @else { 26 | @media (max-width: $screen-sm-max) { 27 | #{$type}#{$dash}#{$direction}: #{$m-spacing-large}#{$suffix}; 28 | } 29 | @media (min-width: $screen-md) { 30 | #{$type}#{$dash}#{$direction}: #{$t-spacing-large}#{$suffix}; 31 | } 32 | @media (min-width: $screen-lg) { 33 | #{$type}#{$dash}#{$direction}: #{$spacing-large}#{$suffix}; 34 | } 35 | } 36 | } 37 | 38 | @mixin get-responsive-spacing-medium($type: padding, $direction: all, $is_important: false) { 39 | $suffix: ''; 40 | $dash: '-'; // Otherwise it will be interpreted as a minus symbol. Needed for the Gonzales PE version: 3.4.7 compiler (used by the Webmodeler) 41 | 42 | @if $is_important != false { 43 | $suffix: ' !important'; 44 | } 45 | @if $direction==all { 46 | @media (max-width: $screen-sm-max) { 47 | #{$type}: #{$m-spacing-medium}#{$suffix}; 48 | } 49 | @media (min-width: $screen-md) { 50 | #{$type}: #{$t-spacing-medium}#{$suffix}; 51 | } 52 | @media (min-width: $screen-lg) { 53 | #{$type}: #{$spacing-medium}#{$suffix}; 54 | } 55 | } @else { 56 | @media (max-width: $screen-sm-max) { 57 | #{$type}#{$dash}#{$direction}: #{$m-spacing-medium}#{$suffix}; 58 | } 59 | @media (min-width: $screen-md) { 60 | #{$type}#{$dash}#{$direction}: #{$t-spacing-medium}#{$suffix}; 61 | } 62 | @media (min-width: $screen-lg) { 63 | #{$type}#{$dash}#{$direction}: #{$spacing-medium}#{$suffix}; 64 | } 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /styles/web/sass/core/helpers/_alerts.scss: -------------------------------------------------------------------------------- 1 | // 2 | // DISCLAIMER: 3 | // Do not change this file because it is core styling. 4 | // Customizing core files will make updating Atlas much more difficult in the future. 5 | // To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten. 6 | // 7 | 8 | /* ========================================================================== 9 | Alerts 10 | 11 | //== Design Properties 12 | //## Helper classes to change the look and feel of the component 13 | ========================================================================== */ 14 | .alert-bordered { 15 | border: 1px solid; 16 | } 17 | 18 | // Color variations 19 | .alert-success { 20 | color: $alert-success-color; 21 | border-color: $alert-success-border-color; 22 | background-color: $alert-success-bg; 23 | } 24 | 25 | .alert-info { 26 | color: $alert-info-color; 27 | border-color: $alert-info-border-color; 28 | background-color: $alert-info-bg; 29 | } 30 | 31 | .alert-warning { 32 | color: $alert-warning-color; 33 | border-color: $alert-warning-border-color; 34 | background-color: $alert-warning-bg; 35 | } 36 | 37 | .alert-danger { 38 | color: $alert-danger-color; 39 | border-color: $alert-danger-border-color; 40 | background-color: $alert-danger-bg; 41 | } 42 | 43 | //== State 44 | //## Styling when component is in certain state 45 | //-------------------------------------------------------------------------------------------------------------------// 46 | .has-error .alert { 47 | margin-top: 8px; 48 | margin-bottom: 0; 49 | } 50 | -------------------------------------------------------------------------------- /styles/web/sass/core/helpers/_images.scss: -------------------------------------------------------------------------------- 1 | // 2 | // DISCLAIMER: 3 | // Do not change this file because it is core styling. 4 | // Customizing core files will make updating Atlas much more difficult in the future. 5 | // To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten. 6 | // 7 | 8 | /* ========================================================================== 9 | Images 10 | 11 | Default Mendix Image Widgets 12 | ========================================================================== */ 13 | 14 | img.img-rounded, 15 | .img-rounded img { 16 | border-radius: 6px; 17 | } 18 | 19 | img.img-thumbnail, 20 | .img-thumbnail img { 21 | display: inline-block; 22 | max-width: 100%; 23 | height: auto; 24 | padding: 4px; 25 | -webkit-transition: all 0.2s ease-in-out; 26 | -moz-transition: all 0.2s ease-in-out; 27 | -o-transition: all 0.2s ease-in-out; 28 | transition: all 0.2s ease-in-out; 29 | border: 1px solid $brand-default; 30 | border-radius: 4px; 31 | background-color: #FFFFFF; 32 | line-height: $line-height-base; 33 | } 34 | 35 | img.img-circle, 36 | .img-circle img { 37 | border-radius: 50%; 38 | } 39 | 40 | img.img-auto, 41 | .img-auto img { 42 | width: auto !important; 43 | max-width: 100% !important; 44 | height: auto !important; 45 | max-height: 100% !important; 46 | } 47 | 48 | img.img-center, 49 | .img-center img { 50 | margin-right: auto !important; 51 | margin-left: auto !important; 52 | } 53 | -------------------------------------------------------------------------------- /styles/web/sass/core/helpers/_labels.scss: -------------------------------------------------------------------------------- 1 | // 2 | // DISCLAIMER: 3 | // Do not change this file because it is core styling. 4 | // Customizing core files will make updating Atlas much more difficult in the future. 5 | // To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten. 6 | // 7 | 8 | /* ========================================================================== 9 | Labels 10 | 11 | //== Design Properties 12 | //## Helper classes to change the look and feel of the component 13 | ========================================================================== */ 14 | // Color variations 15 | .label-default { 16 | color: $label-default-color; 17 | background-color: $label-default-bg; 18 | } 19 | 20 | .label-primary { 21 | color: $label-primary-color; 22 | background-color: $label-primary-bg; 23 | } 24 | 25 | .label-success { 26 | color: $label-success-color; 27 | background-color: $label-success-bg; 28 | } 29 | 30 | .label-inverse { 31 | color: $label-inverse-color; 32 | background-color: $label-inverse-bg; 33 | } 34 | 35 | .label-info { 36 | color: $label-info-color; 37 | background-color: $label-info-bg; 38 | } 39 | 40 | .label-warning { 41 | color: $label-warning-color; 42 | background-color: $label-warning-bg; 43 | } 44 | 45 | .label-danger { 46 | color: $label-danger-color; 47 | background-color: $label-danger-bg; 48 | } 49 | -------------------------------------------------------------------------------- /styles/web/sass/core/helpers/_simplemenubar.scss: -------------------------------------------------------------------------------- 1 | // 2 | // DISCLAIMER: 3 | // Do not change this file because it is core styling. 4 | // Customizing core files will make updating Atlas much more difficult in the future. 5 | // To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten. 6 | // 7 | 8 | /* ========================================================================== 9 | Navigation 10 | 11 | //== Design Properties 12 | //## Helper classes to change the look and feel of the component 13 | ========================================================================== */ 14 | // Center text and icons 15 | .bottom-nav-text-icons.mx-menubar { 16 | ul.mx-menubar-list { 17 | li.mx-menubar-item { 18 | a { 19 | flex-direction: column; 20 | padding: 8px 8px 6px 8px; 21 | line-height: normal; 22 | font-size: 11px; 23 | .glyphicon { 24 | display: block; 25 | margin: 0 0 5px 0; 26 | font-size: 18px; 27 | } 28 | img { 29 | display: block; 30 | height: 18px; 31 | margin: 0 0 5px 0; 32 | } 33 | } 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /styles/web/sass/core/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Atlas-UI-Framework", 3 | "version": "2.6.7" 4 | } -------------------------------------------------------------------------------- /styles/web/sass/core/widgets/_alerts.scss: -------------------------------------------------------------------------------- 1 | // 2 | // DISCLAIMER: 3 | // Do not change this file because it is core styling. 4 | // Customizing core files will make updating Atlas much more difficult in the future. 5 | // To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten. 6 | // 7 | 8 | /* ========================================================================== 9 | Alerts 10 | 11 | Default Bootstrap Alert boxes. Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages 12 | ========================================================================== */ 13 | 14 | .alert { 15 | margin-top: 0; // want to align it with padding of a page 16 | padding: 15px; 17 | border: 0; 18 | border-radius: 4px; 19 | } 20 | -------------------------------------------------------------------------------- /styles/web/sass/core/widgets/_dataview.scss: -------------------------------------------------------------------------------- 1 | // 2 | // DISCLAIMER: 3 | // Do not change this file because it is core styling. 4 | // Customizing core files will make updating Atlas much more difficult in the future. 5 | // To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten. 6 | // 7 | 8 | /* ========================================================================== 9 | Dataview 10 | 11 | Default Mendix Dataview Widget. The data view is used for showing the contents of exactly one object 12 | ========================================================================== */ 13 | 14 | .mx-dataview { 15 | /* Control bar */ 16 | .mx-dataview-controls { 17 | // Needed to clear the bootstrap columns (get float: left) 18 | clear: both; 19 | margin-top: 10px; 20 | padding: 8px 0; 21 | border-top: 1px solid $dataview-controls-border-color; 22 | border-radius: 0; 23 | background-color: $dataview-controls-bg; 24 | /* Buttons */ 25 | .mx-button { 26 | margin-right: 0.3em; 27 | margin-bottom: 0; 28 | &:last-child { 29 | margin-right: 0; 30 | } 31 | } 32 | } 33 | /* Dataview-content gives problems for nexted layout grid containers */ 34 | > .mx-dataview-content > .mx-container-nested { 35 | > .row { 36 | margin-right: 0; 37 | margin-left: 0; 38 | } 39 | } 40 | /* Dataview empty message */ 41 | .mx-dataview-message { 42 | color: $dataview-emptymessage-color; 43 | background: $dataview-emptymessage-bg; 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /styles/web/sass/core/widgets/_glyphicons.scss: -------------------------------------------------------------------------------- 1 | // 2 | // DISCLAIMER: 3 | // Do not change this file because it is core styling. 4 | // Customizing core files will make updating Atlas much more difficult in the future. 5 | // To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten. 6 | // 7 | 8 | /* ========================================================================== 9 | Glyphicons 10 | 11 | Default Mendix Glyphicons 12 | ========================================================================== */ 13 | 14 | .mx-glyphicon { 15 | &:before { 16 | display: inline-block; 17 | margin-top: -0.2em; 18 | margin-right: 0.4555555em; 19 | vertical-align: middle; 20 | font-family: "Glyphicons Halflings"; 21 | font-weight: $font-weight-normal; 22 | font-style: normal; 23 | line-height: inherit; 24 | -webkit-font-smoothing: antialiased; 25 | -moz-osx-font-smoothing: grayscale; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /styles/web/sass/core/widgets/_grid.scss: -------------------------------------------------------------------------------- 1 | // 2 | // DISCLAIMER: 3 | // Do not change this file because it is core styling. 4 | // Customizing core files will make updating Atlas much more difficult in the future. 5 | // To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten. 6 | // 7 | 8 | /* ========================================================================== 9 | Grid 10 | 11 | Default Mendix Grid (used for Mendix Datagrid) 12 | ========================================================================== */ 13 | 14 | .mx-grid { 15 | padding: 0px; 16 | border: 0; 17 | border-radius: 0; 18 | .mx-grid-controlbar { 19 | margin: 10px 0; 20 | /* Paging */ 21 | .mx-grid-pagingbar { 22 | /* Buttons */ 23 | .mx-button { 24 | padding: 6px; 25 | color: $grid-paging-color; 26 | border-color: $grid-paging-border-color; 27 | background-color: $grid-paging-bg; 28 | &:hover { 29 | color: $grid-paging-color-hover; 30 | border-color: $grid-paging-border-color-hover; 31 | background-color: $grid-paging-bg-hover; 32 | } 33 | } 34 | /* Text Paging .. to .. to .. */ 35 | .mx-grid-paging-status { 36 | padding: 0 8px 8px; 37 | } 38 | } 39 | } 40 | .mx-grid-searchbar { 41 | margin: 10px 0; 42 | .mx-grid-search-item { 43 | .mx-grid-search-label { 44 | vertical-align: middle; 45 | label { 46 | padding-top: 5px; 47 | } 48 | } 49 | .mx-grid-search-input { 50 | display: inline-flex; 51 | .form-control { 52 | height: 28px; 53 | font-size: 11px; 54 | } 55 | select.form-control { 56 | padding: 3px; 57 | vertical-align: middle; 58 | } 59 | .mx-button { 60 | height: 28px; 61 | padding-top: 2px; 62 | padding-bottom: 2px; 63 | } 64 | } 65 | } 66 | } 67 | } 68 | 69 | // Remove default border from grid inside a Mendix Dataview 70 | .mx-dataview .mx-grid { 71 | border: 0; 72 | } 73 | -------------------------------------------------------------------------------- /styles/web/sass/core/widgets/_groupbox.scss: -------------------------------------------------------------------------------- 1 | // 2 | // DISCLAIMER: 3 | // Do not change this file because it is core styling. 4 | // Customizing core files will make updating Atlas much more difficult in the future. 5 | // To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten. 6 | // 7 | 8 | /* ========================================================================== 9 | Groupbox 10 | 11 | Default Mendix Groupboxes 12 | ========================================================================== */ 13 | 14 | .mx-groupbox { 15 | margin: 0; 16 | > .mx-groupbox-header { 17 | margin: 0; 18 | color: $groupbox-default-color; 19 | border-width: 1px 1px 0 1px; 20 | border-style: solid; 21 | border-color: $groupbox-default-bg; 22 | background: $groupbox-default-bg; 23 | font-size: $font-size-h5; 24 | .mx-groupbox-collapse-icon { 25 | margin-top: 0.1em; 26 | } 27 | } 28 | > .mx-groupbox-body { 29 | padding: 10px 15px; 30 | border-width: 1px; 31 | border-style: solid; 32 | border-color: $groupbox-default-bg; 33 | background-color: #FFFFFF; 34 | } 35 | .mx-groupbox-header + .mx-groupbox-body { 36 | border-top: none; 37 | } 38 | &.collapsed > .mx-groupbox-header { 39 | } 40 | } -------------------------------------------------------------------------------- /styles/web/sass/core/widgets/_labels.scss: -------------------------------------------------------------------------------- 1 | // 2 | // DISCLAIMER: 3 | // Do not change this file because it is core styling. 4 | // Customizing core files will make updating Atlas much more difficult in the future. 5 | // To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten. 6 | // 7 | 8 | /* ========================================================================== 9 | Labels 10 | 11 | Default labels combined with Bootstrap labels 12 | ========================================================================== */ 13 | 14 | .label { 15 | display: inline-block; 16 | padding: 0.2em 0.6em 0.3em; 17 | text-align: center; 18 | vertical-align: baseline; 19 | white-space: nowrap; 20 | color: #ffffff; 21 | border-radius: 0.25em; 22 | font-size: 100%; 23 | line-height: 1; 24 | margin: 0; 25 | 26 | .form-control-static { 27 | all: unset; 28 | font-weight: $font-weight-normal; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /styles/web/sass/core/widgets/_navigationlist.scss: -------------------------------------------------------------------------------- 1 | // 2 | // DISCLAIMER: 3 | // Do not change this file because it is core styling. 4 | // Customizing core files will make updating Atlas much more difficult in the future. 5 | // To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten. 6 | // 7 | /* ========================================================================== 8 | Navigation List 9 | 10 | Default Mendix Navigation List Widget. A navigation list can be used to attach an action to an entire row. Such a row is called a navigation list item 11 | ========================================================================== */ 12 | .mx-navigationlist { 13 | margin: 0; 14 | padding: 0; 15 | list-style: none; 16 | 17 | li.mx-navigationlist-item { 18 | @include transition(); 19 | padding: $grid-padding-top $grid-padding-right $grid-padding-bottom $grid-padding-left; 20 | border-width: 1px; 21 | border-style: none none solid none; 22 | border-color: $grid-border-color; 23 | border-radius: 0; 24 | background-color: $grid-bg; 25 | 26 | &:hover, 27 | &:focus { 28 | color: inherit; 29 | background-color: $grid-bg-hover; 30 | } 31 | 32 | &.active { 33 | color: inherit; 34 | background-color: $grid-bg-selected; 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /styles/web/sass/core/widgets/_progress.scss: -------------------------------------------------------------------------------- 1 | // 2 | // DISCLAIMER: 3 | // Do not change this file because it is core styling. 4 | // Customizing core files will make updating Atlas much more difficult in the future. 5 | // To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten. 6 | // 7 | 8 | /* ========================================================================== 9 | Progress 10 | 11 | Default Mendix Progress Widget. 12 | ========================================================================== */ 13 | 14 | .mx-progress { 15 | color: $font-color-default; 16 | background: $bg-color-secondary; 17 | 18 | .mx-progress-message { 19 | color: $font-color-default; 20 | } 21 | 22 | .mx-progress-indicator { 23 | position: relative; 24 | overflow: hidden; 25 | width: 100%; 26 | max-width: 100%; 27 | height: 2px; 28 | margin: auto; 29 | padding: 0; 30 | border-radius: 0; 31 | background: $gray-lighter; 32 | 33 | &:before, 34 | &:after { 35 | position: absolute; 36 | top: 0; 37 | left: 0; 38 | display: block; 39 | width: 50%; 40 | height: 2px; 41 | content: ""; 42 | transform: translate3d(-100%, 0, 0); 43 | background: $brand-primary; 44 | } 45 | 46 | &::before { 47 | animation: loader 2s infinite; 48 | } 49 | 50 | &::after { 51 | animation: loader 2s -2s infinite; 52 | } 53 | } 54 | } 55 | 56 | 57 | @keyframes loader { 58 | 0% { 59 | transform: translate3d(-100%, 0, 0); 60 | } 61 | 100% { 62 | transform: translate3d(200%, 0, 0); 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /styles/web/sass/core/widgets/_templategrids.scss: -------------------------------------------------------------------------------- 1 | // 2 | // DISCLAIMER: 3 | // Do not change this file because it is core styling. 4 | // Customizing core files will make updating Atlas much more difficult in the future. 5 | // To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten. 6 | // 7 | 8 | /* ========================================================================== 9 | Templategrid 10 | 11 | Default Mendix Templategrid Widget. The template grid shows a list of objects in a tile view. For example, a template grid can show a list of products. The template grid has a lot in common with the data grid. The main difference is that the objects are shown in templates (a sort of small data view) instead of rows 12 | ========================================================================== */ 13 | 14 | .mx-templategrid { 15 | .mx-templategrid-content-wrapper { 16 | table-layout: fixed; 17 | } 18 | .mx-templategrid-item { 19 | padding: $grid-padding-top $grid-padding-right $grid-padding-bottom $grid-padding-left; 20 | cursor: default; 21 | background-color: $grid-bg; 22 | &:hover { 23 | background-color: transparent; 24 | } 25 | &.selected { 26 | background-color: $grid-bg-selected !important; 27 | } 28 | } 29 | .mx-layoutgrid { 30 | padding-top: 0 !important; 31 | padding-bottom: 0 !important; 32 | } 33 | } -------------------------------------------------------------------------------- /styles/web/sass/core/widgets/_timeline.scss: -------------------------------------------------------------------------------- 1 | .widget-timeline-date-header { 2 | display: inline-block; 3 | width: 110px; 4 | overflow-wrap: break-word; 5 | padding: 8px; 6 | text-align: center; 7 | border: 1px solid $timeline-border-color; 8 | border-radius: 30px; 9 | } 10 | 11 | .widget-timeline-events-wrapper { 12 | display: flex; 13 | flex: 1; 14 | margin-left: 55px; 15 | padding-top: 35px; 16 | 17 | ul { 18 | padding: 0; 19 | list-style: none; 20 | margin-bottom: 0; 21 | } 22 | } 23 | 24 | .widget-timeline-title { 25 | color: $timeline-color-header; 26 | font-weight: 600; 27 | margin: 0 0 10px 0; 28 | } 29 | 30 | .widget-timeline-description { 31 | color: $timeline-color-detail; 32 | } 33 | 34 | .widget-timeline-event { 35 | position: relative; 36 | margin-left: $timeline-icon-size / 2; 37 | padding-left: $spacing-large; 38 | padding-bottom: 20px; 39 | 40 | &:not(:last-of-type) { 41 | border-left: 1px solid $timeline-border-color; 42 | } 43 | 44 | &.clickable { 45 | cursor: pointer; 46 | transition: background 0.8s; 47 | 48 | &:hover { 49 | .widget-timeline-title { 50 | color: #dadcde; 51 | } 52 | } 53 | } 54 | } 55 | 56 | .widget-timeline-icon-wrapper { 57 | position: absolute; 58 | top: 0; 59 | left: 0; 60 | display: flex; 61 | justify-content: center; 62 | align-items: center; 63 | width: $timeline-icon-size; 64 | height: $timeline-icon-size; 65 | transform: translateX(-50%); 66 | 67 | .glyphicon { 68 | font-size: $timeline-icon-size; 69 | } 70 | 71 | img { 72 | max-width: $timeline-icon-size; 73 | max-height: $timeline-icon-size; 74 | } 75 | } 76 | 77 | .widget-timeline-content-wrapper { 78 | .widget-timeline-date-time-wrapper { 79 | margin-right: 15px; 80 | } 81 | 82 | .widget-timeline-info-wrapper { 83 | flex-direction: column; 84 | } 85 | } 86 | 87 | .widget-timeline-icon-circle { 88 | width: 18px; 89 | height: 18px; 90 | border-radius: 50%; 91 | background-color: $timeline-icon-color; 92 | } 93 | 94 | .widget-timeline-no-divider { 95 | padding-bottom: 0; 96 | padding-top: 0; 97 | margin-left: 0; 98 | } 99 | 100 | .widget-timeline-flex-container { 101 | display: flex; 102 | } 103 | -------------------------------------------------------------------------------- /styles/web/sass/core/widgets/_typography.scss: -------------------------------------------------------------------------------- 1 | // 2 | // DISCLAIMER: 3 | // Do not change this file because it is core styling. 4 | // Customizing core files will make updating Atlas much more difficult in the future. 5 | // To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten. 6 | // 7 | 8 | /* ========================================================================== 9 | Typography 10 | ========================================================================== */ 11 | 12 | p { 13 | line-height: $line-height-base * 1.25; 14 | } 15 | 16 | label { 17 | padding-top: 0; 18 | } 19 | 20 | .mx-title { 21 | margin: $font-header-margin; 22 | color: $font-color-header; 23 | font-size: $font-size-h1; 24 | font-weight: $font-weight-header; 25 | } 26 | 27 | h1, 28 | .h1, 29 | .h1 > * { 30 | font-size: $font-size-h1; 31 | } 32 | 33 | h2, 34 | .h2, 35 | .h2 > * { 36 | font-size: $font-size-h2; 37 | } 38 | 39 | h3, 40 | .h3, 41 | .h3 > * { 42 | font-size: $font-size-h3; 43 | } 44 | 45 | h4, 46 | .h4, 47 | .h4 > * { 48 | font-size: $font-size-h4; 49 | } 50 | 51 | h5, 52 | .h5, 53 | .h5 > * { 54 | font-size: $font-size-h5; 55 | } 56 | 57 | h6, 58 | .h6, 59 | .h6 > * { 60 | font-size: $font-size-h6; 61 | } 62 | 63 | h1, 64 | h2, 65 | h3, 66 | h4, 67 | h5, 68 | h6, 69 | .h1, 70 | .h2, 71 | .h3, 72 | .h4, 73 | .h5, 74 | .h6 { 75 | margin: $font-header-margin; 76 | color: $font-color-header; 77 | font-weight: $font-weight-header; 78 | line-height: 1.3; 79 | } -------------------------------------------------------------------------------- /styles/web/sass/core/widgetscustom/_progress-bar-theme.scss: -------------------------------------------------------------------------------- 1 | // 2 | // DISCLAIMER: 3 | // Do not change this file because it is core styling. 4 | // Customizing core files will make updating Atlas much more difficult in the future. 5 | // To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten. 6 | // 7 | 8 | /* Based on https://github.com/mendixlabs/star-rating/blob/v1.1.1/src/ui/StarRating.scss */ 9 | div.widget-progress-bar .progress-bar-default { 10 | background-color: $brand-default; 11 | } 12 | 13 | div.widget-progress-bar .progress-bar-primary { 14 | background-color: $brand-primary; 15 | } 16 | 17 | div.widget-progress-bar .progress-bar-success { 18 | background-color: $brand-success; 19 | } 20 | 21 | div.widget-progress-bar .progress-bar-info { 22 | background-color: $brand-info; 23 | } 24 | 25 | div.widget-progress-bar .progress-bar-warning { 26 | background-color: $brand-warning; 27 | } 28 | 29 | div.widget-progress-bar .progress-bar-danger { 30 | background-color: $brand-danger; 31 | } 32 | 33 | div.widget-progress-bar .progress-bar-inverse { 34 | background-color: $brand-inverse; 35 | } 36 | 37 | div.widget-progress-bar-alert.widget-progress-bar-text-contrast .progress-bar { 38 | color: $color-danger-darker; 39 | } 40 | 41 | div.widget-progress-bar-text-contrast .progress-bar { 42 | color: $font-color-default; 43 | } 44 | -------------------------------------------------------------------------------- /styles/web/sass/core/widgetscustom/_progress-circle-theme.scss: -------------------------------------------------------------------------------- 1 | // 2 | // DISCLAIMER: 3 | // Do not change this file because it is core styling. 4 | // Customizing core files will make updating Atlas much more difficult in the future. 5 | // To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten. 6 | // 7 | 8 | /* Based on https://github.com/mendixlabs/progress-circle/tree/master/src/ui/_progress-circle-theme.scss */ 9 | path.widget-progress-circle-path { 10 | stroke: $brand-primary; 11 | } 12 | 13 | .widget-progress-circle-primary { 14 | path.widget-progress-circle-path { 15 | stroke: $brand-primary; 16 | } 17 | .progressbar-text { 18 | color: $brand-primary !important; 19 | } 20 | } 21 | 22 | .widget-progress-circle-info { 23 | path.widget-progress-circle-path { 24 | stroke: $brand-info; 25 | } 26 | .progressbar-text { 27 | color: $brand-info !important; 28 | } 29 | } 30 | 31 | .widget-progress-circle-success { 32 | path.widget-progress-circle-path { 33 | stroke: $brand-success; 34 | } 35 | .progressbar-text { 36 | color: $brand-success !important; 37 | } 38 | } 39 | 40 | .widget-progress-circle-warning { 41 | path.widget-progress-circle-path { 42 | stroke: $brand-warning; 43 | } 44 | .progressbar-text { 45 | color: $brand-warning !important; 46 | } 47 | } 48 | 49 | .widget-progress-circle-danger { 50 | path.widget-progress-circle-path { 51 | stroke: $brand-danger; 52 | } 53 | .progressbar-text { 54 | color: $brand-danger !important; 55 | } 56 | } 57 | 58 | .widget-progress-circle-inverse { 59 | path.widget-progress-circle-path { 60 | stroke: $brand-inverse; 61 | } 62 | .progressbar-text { 63 | color: $brand-inverse !important; 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /styles/web/sass/core/widgetscustom/_range-slider-theme.scss: -------------------------------------------------------------------------------- 1 | // 2 | // DISCLAIMER: 3 | // Do not change this file because it is core styling. 4 | // Customizing core files will make updating Atlas much more difficult in the future. 5 | // To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten. 6 | // 7 | 8 | // Based on https://github.com/mendixlabs/range-slider/tree/master/src/ui/_range-slider-theme.scss 9 | 10 | div.widget-range-slider { 11 | .rc-slider-handle, 12 | .rc-slider-dot-active { 13 | border-color: $brand-default; 14 | 15 | &:active { 16 | border-color: $brand-default; 17 | box-shadow: none; 18 | } 19 | 20 | &:hover { 21 | border-color: $brand-default; 22 | } 23 | } 24 | 25 | &.has-error { 26 | .rc-slider-track, 27 | .rc-slider-rail { 28 | background-color: $brand-danger; 29 | } 30 | } 31 | } 32 | 33 | div.widget-range-slider-primary .rc-slider-track { 34 | background-color: $brand-primary; 35 | } 36 | 37 | div.widget-range-slider-info .rc-slider-track { 38 | background-color: $brand-info; 39 | } 40 | 41 | div.widget-range-slider-success .rc-slider-track { 42 | background-color: $brand-success; 43 | } 44 | 45 | div.widget-range-slider-warning .rc-slider-track { 46 | background-color: $brand-warning; 47 | } 48 | 49 | div.widget-range-slider-danger .rc-slider-track { 50 | background-color: $brand-danger; 51 | } 52 | 53 | div.widget-range-slider-inverse .rc-slider-track { 54 | background-color: $brand-inverse; 55 | } 56 | 57 | .rc-slider-tooltip { 58 | z-index: 999; 59 | } -------------------------------------------------------------------------------- /styles/web/sass/core/widgetscustom/_slider-theme.scss: -------------------------------------------------------------------------------- 1 | // 2 | // DISCLAIMER: 3 | // Do not change this file because it is core styling. 4 | // Customizing core files will make updating Atlas much more difficult in the future. 5 | // To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten. 6 | // 7 | 8 | // Based on https://github.com/mendixlabs/slider/tree/master/src/ui/_slider-theme.scss 9 | 10 | div.widget-slider { 11 | .rc-slider-handle, 12 | .rc-slider-dot-active { 13 | border-color: $brand-default; 14 | &:active { 15 | border-color: $brand-default; 16 | } 17 | &:hover { 18 | border-color: $brand-default; 19 | } 20 | } 21 | 22 | &.has-error { 23 | .rc-slider-track, 24 | .rc-slider-rail { 25 | background-color: $brand-danger; 26 | } 27 | } 28 | } 29 | 30 | div.widget-slider-primary .rc-slider-track { 31 | background-color: $brand-primary; 32 | } 33 | 34 | div.widget-slider-info .rc-slider-track { 35 | background-color: $brand-info; 36 | } 37 | 38 | div.widget-slider-success .rc-slider-track { 39 | background-color: $brand-success; 40 | } 41 | 42 | div.widget-slider-warning .rc-slider-track { 43 | background-color: $brand-warning; 44 | } 45 | 46 | div.widget-slider-danger .rc-slider-track { 47 | background-color: $brand-danger; 48 | } 49 | 50 | div.widget-slider-inverse .rc-slider-track { 51 | background-color: $brand-inverse; 52 | } 53 | -------------------------------------------------------------------------------- /styles/web/sass/core/widgetscustom/_star-rating-theme.scss: -------------------------------------------------------------------------------- 1 | // 2 | // DISCLAIMER: 3 | // Do not change this file because it is core styling. 4 | // Customizing core files will make updating Atlas much more difficult in the future. 5 | // To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten. 6 | // 7 | 8 | /* Based on https://github.com/mendixlabs/star-rating/blob/v1.1.1/src/ui/StarRating.scss */ 9 | span.widget-star-rating-full-default { 10 | color: $brand-default; 11 | } 12 | 13 | span.widget-star-rating-full-primary { 14 | color: $brand-primary; 15 | } 16 | 17 | span.widget-star-rating-full-success { 18 | color: $brand-success; 19 | } 20 | 21 | span.widget-star-rating-full-info { 22 | color: $brand-info; 23 | } 24 | 25 | span.widget-star-rating-full-warning { 26 | color: $brand-warning; 27 | } 28 | 29 | span.widget-star-rating-full-danger { 30 | color: $brand-danger; 31 | } 32 | 33 | span.widget-star-rating-full-inverse { 34 | color: $brand-inverse; 35 | } 36 | -------------------------------------------------------------------------------- /styles/web/sass/ui_resources/atlas_ui_resources/buildingblocks/_breadcrumb.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Breadcrumbs 3 | 4 | ========================================================================== */ 5 | .breadcrumb { 6 | //reset 7 | margin: 0; 8 | padding: 0; 9 | border-radius: 0; 10 | background-color: transparent; 11 | font-size: $font-size-default; 12 | } 13 | 14 | //== Elements 15 | //-------------------------------------------------------------------------------------------------------------------// 16 | .breadcrumb-item { 17 | display: inline-block; 18 | margin: 0; 19 | &:last-child { 20 | color: $font-color-default; 21 | a { 22 | text-decoration: none; 23 | } 24 | } 25 | } 26 | .breadcrumb-item + .breadcrumb-item { 27 | &::before { 28 | display: inline-block; 29 | padding-right: 10px; 30 | padding-left: 10px; 31 | content: "/"; 32 | color: $gray-light; 33 | } 34 | } 35 | 36 | //== Variations 37 | //-------------------------------------------------------------------------------------------------------------------// 38 | .breadcrumb-large { 39 | font-size: $font-size-h3; 40 | } 41 | .breadcrumb-underline { 42 | padding-bottom: $gutter-size; 43 | border-bottom: 1px solid $border-color-default; 44 | } 45 | -------------------------------------------------------------------------------- /styles/web/sass/ui_resources/atlas_ui_resources/buildingblocks/_controlgroup.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Control Group 3 | 4 | A group of buttons next to eachother 5 | ========================================================================== */ 6 | .controlgroup { 7 | .btn, 8 | .btn-group { 9 | margin-right: $spacing-small; 10 | margin-bottom: $spacing-small; 11 | 12 | &:last-child { 13 | margin-right: 0; 14 | } 15 | .btn { 16 | margin-right: 0; 17 | margin-bottom: 0; 18 | } 19 | } 20 | .btn-group { 21 | .btn + .btn { 22 | margin-left: -1px; 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /styles/web/sass/ui_resources/atlas_ui_resources/buildingblocks/_formblock.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Form Block 3 | 4 | Used in default forms 5 | ========================================================================== */ 6 | .formblock { 7 | } 8 | 9 | //== Elements 10 | //-------------------------------------------------------------------------------------------------------------------// 11 | .formblock-title { 12 | margin-bottom: $gutter-size; 13 | padding-bottom: $gutter-size; 14 | border-bottom: 1px solid $border-color-default; 15 | } 16 | -------------------------------------------------------------------------------- /styles/web/sass/ui_resources/atlas_ui_resources/buildingblocks/_heroheader.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Pageheader 3 | 4 | ========================================================================== */ 5 | .heroheader { 6 | border-bottom: 1px solid $border-color-default; 7 | background: $header-bg-color; 8 | } 9 | 10 | //== Elements 11 | //-------------------------------------------------------------------------------------------------------------------// 12 | .heroheader-title { 13 | margin: 0 0 10px 0; 14 | } 15 | 16 | .heroheader-subtitle { 17 | margin: 0; 18 | padding: 0 15px; 19 | 20 | &::before { 21 | display: block; 22 | max-width: 330px; 23 | height: 1px; 24 | margin: auto auto 10px auto; 25 | content: ""; 26 | background-color: lighten($border-color-default, 4); 27 | } 28 | } 29 | 30 | //== Variations 31 | //-------------------------------------------------------------------------------------------------------------------// 32 | .heroheader1 { 33 | background-image: $brand-gradient; 34 | 35 | .heroheader-title { 36 | margin-bottom: 10px; 37 | color: #FFFFFF; 38 | } 39 | 40 | .heroheader-subtitle { 41 | padding: 0; 42 | color: #FFFFFF; 43 | 44 | &::before { 45 | display: none; 46 | } 47 | } 48 | } 49 | 50 | .heroheadermap { 51 | padding: 0 !important; 52 | } 53 | 54 | .heroheadermap-controls { 55 | padding: $spacing-large; 56 | background: $header-bg-color; 57 | } 58 | 59 | .heroheaderproduct { 60 | position: relative; 61 | overflow: hidden; 62 | height: 300px; 63 | background-color: #000000; 64 | 65 | .heroheaderproduct-backgroundimage { 66 | position: absolute; 67 | z-index: 0; 68 | top: 0; 69 | width: 100%; 70 | opacity: 0.7; 71 | filter: blur(5px); 72 | } 73 | 74 | .heroheaderproduct-overlay { 75 | position: absolute; 76 | z-index: 1; 77 | top: 50%; 78 | left: 50%; 79 | transform: translate(-50%, -50%); 80 | } 81 | } 82 | 83 | .heroheaderexpense { 84 | .heroheaderexpense-title { 85 | font-size: 72px; 86 | } 87 | 88 | .heroheaderexpense-type { 89 | align-items: center; 90 | 91 | &::before { 92 | flex-grow: 1; 93 | height: 1px; 94 | margin-right: 10px; 95 | content: ""; 96 | background-color: #D2D2D2; 97 | } 98 | } 99 | } 100 | -------------------------------------------------------------------------------- /styles/web/sass/ui_resources/atlas_ui_resources/buildingblocks/_master-detail.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Master Detail 3 | 4 | A list with a listening dataview 5 | ========================================================================== */ 6 | .masterdetail { 7 | .masterdetail-master { 8 | .controlgroup { 9 | margin-bottom: $gutter-size; 10 | } 11 | 12 | @media (max-width: $screen-lg) { 13 | @include layout-spacing($type: margin, $direction: bottom, $device: responsive); 14 | } 15 | 16 | @media (min-width: $screen-lg) { 17 | border-right: 1px solid $border-color-default; 18 | 19 | .mx-listview-searchbar { 20 | margin: $gutter-size; 21 | } 22 | .controlgroup { 23 | padding: $gutter-size; 24 | border-bottom: 1px solid $border-color-default; 25 | } 26 | } 27 | } 28 | 29 | .masterdetail-detail { 30 | @media (min-width: $screen-lg) { 31 | @include layout-spacing($type: padding, $direction: all, $device: responsive); 32 | } 33 | } 34 | } 35 | 36 | //== Variations 37 | //-------------------------------------------------------------------------------------------------------------------// 38 | .masterdetailvertical { 39 | .masterdetail-master { 40 | @include layout-spacing($type: margin, $direction: bottom, $device: responsive); 41 | } 42 | 43 | .masterdetail-detail { 44 | @include layout-spacing($type: padding, $direction: top, $device: responsive); 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /styles/web/sass/ui_resources/atlas_ui_resources/buildingblocks/_pageblocks.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Full page blocks 3 | 4 | Blocks that take up the full width and height 5 | ========================================================================== */ 6 | 7 | .fullpageblock { 8 | position: relative; 9 | height: 100%; 10 | min-height: 100%; 11 | 12 | // Helper to make it fullheight 13 | .fullheight { 14 | height: 100% !important; 15 | 16 | & > .mx-dataview-content { 17 | height: inherit !important; 18 | } 19 | } 20 | 21 | .fullpage-overlay { 22 | position: absolute; 23 | z-index: 10; 24 | bottom: 0; 25 | left: 0; 26 | width: 100%; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /styles/web/sass/ui_resources/atlas_ui_resources/buildingblocks/_pageheader.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Pageheader 3 | ========================================================================== */ 4 | 5 | //== Default 6 | //-------------------------------------------------------------------------------------------------------------------// 7 | .pageheader { 8 | border-bottom: 1px solid $border-color-default; 9 | background: $header-bg-color; 10 | } 11 | 12 | // Check if it is part of a inner layoutgrid 13 | .mx-scrollcontainer .mx-placeholder .mx-layoutgrid .pageheader { 14 | @include get-responsive-spacing-large($type: margin, $direction: bottom); 15 | @include get-responsive-spacing-large($type: padding, $direction: bottom); 16 | background: transparent; 17 | } 18 | 19 | //== Elements 20 | //-------------------------------------------------------------------------------------------------------------------// 21 | .pageheader-type { 22 | margin: 0; 23 | } 24 | 25 | .pageheader-title { 26 | margin: 0; 27 | } 28 | 29 | .pageheader-subtitle { 30 | margin: 0; 31 | } 32 | 33 | //== Variations 34 | //-------------------------------------------------------------------------------------------------------------------// 35 | .pageheaderwithcontrols { 36 | .controlgroup { 37 | } 38 | } 39 | 40 | .pageheaderwithimage { 41 | .pageheader-image { 42 | } 43 | .figurecontent { 44 | } 45 | } 46 | 47 | .pageheaderwithimageandcontrols { 48 | } 49 | 50 | .pageheaderwithsearch { 51 | .pageheader-title { 52 | margin-bottom: 1em; 53 | } 54 | } 55 | 56 | .pageheaderwithbreadcrumb { 57 | .breadcrumb { 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /styles/web/sass/ui_resources/atlas_ui_resources/buildingblocks/_timeline.scss: -------------------------------------------------------------------------------- 1 | // Timeline 2 | .timeline { 3 | .timeline-header { 4 | display: inline-block; 5 | width: 110px; 6 | padding: 8px; 7 | text-align: center; 8 | border: 1px solid $border-color-default; 9 | border-radius: 30px; 10 | } 11 | } 12 | .timeline-itemwrapper.mx-listview { 13 | margin-bottom: 0; 14 | margin-left: 55px; 15 | padding: $spacing-large 0; 16 | border-left: 1px solid $border-color-default; 17 | & > ul > li { 18 | position: relative; 19 | padding-left: ($gutter-size * 2); 20 | 21 | &::before { 22 | position: absolute; 23 | top: 5px; 24 | left: -5px; 25 | display: block; 26 | width: 10px; 27 | height: 10px; 28 | content: ''; 29 | border-radius: 50%; 30 | background-color: $brand-primary; 31 | } 32 | } 33 | li + li { 34 | margin-top: $spacing-large; 35 | } 36 | } 37 | 38 | //== Variations 39 | //-------------------------------------------------------------------------------------------------------------------// 40 | .timeline2 { 41 | .timeline-itemwrapper.mx-listview { 42 | & > ul > li { 43 | padding-left: $gutter-size; 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /styles/web/sass/ui_resources/atlas_ui_resources/buildingblocks/_userprofile.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | User profile blocks 3 | - 4 | ========================================================================== */ 5 | .userprofile { 6 | .userprofile-img { 7 | } 8 | .userprofile-title { 9 | } 10 | .userprofile-subtitle { 11 | } 12 | } -------------------------------------------------------------------------------- /styles/web/sass/ui_resources/atlas_ui_resources/layouts/_layout-atlas-phone.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Atlas layout 3 | 4 | Extra styling for phone layouts 5 | ========================================================================== */ 6 | .layout-atlas-phone { 7 | .region-topbar { 8 | min-height: $m-header-height; 9 | border-style: none; 10 | background-color: $m-header-bg; 11 | 12 | &::before { 13 | display: none; 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /styles/web/sass/ui_resources/atlas_ui_resources/layouts/_layout-atlas-tablet.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Atlas layout 3 | 4 | Extra styling for tablet layouts 5 | ========================================================================== */ 6 | .layout-atlas-tablet { 7 | // tablet 8 | } 9 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "./", 4 | "module": "es2015", 5 | "target": "esnext", 6 | "typeRoots": [ 7 | "./node_modules/@types" 8 | ], 9 | "types": [ 10 | "react-native", 11 | "react-native-device-info" 12 | ], 13 | "paths": { 14 | "react-native": [ 15 | "./node_modules/@types/react-native" 16 | ], 17 | "react-native-device-info": [ 18 | "./node_modules/react-native-device-info/lib/typescript" 19 | ] 20 | }, 21 | "lib": [ 22 | "es2017" 23 | ], 24 | "noEmitOnError": true, 25 | "sourceMap": false, 26 | "allowSyntheticDefaultImports": true, 27 | "esModuleInterop": true, 28 | "removeComments": false, 29 | "allowJs": true, 30 | "checkJs": true, 31 | "declaration": false, 32 | "noLib": false, 33 | "watch": false, 34 | "forceConsistentCasingInFileNames": true, 35 | "noFallthroughCasesInSwitch": true, 36 | "strict": true, 37 | "strictFunctionTypes": false, 38 | "skipLibCheck": true, 39 | "noUnusedLocals": true, 40 | "noUnusedParameters": true, 41 | "moduleResolution": "node", 42 | "outDir": "./styles/native/js", 43 | "newLine": "CRLF" 44 | }, 45 | "include": [ 46 | "./styles/native/**/*.ts" 47 | ] 48 | } 49 | --------------------------------------------------------------------------------