├── src ├── assets │ ├── .gitkeep │ └── images │ │ └── logo.png ├── styles.css ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── resources │ └── sap │ │ └── ui │ │ └── webcomponents │ │ └── main │ │ ├── 4954f2f3d3c66cd6.woff │ │ ├── b4b3072255b9125b.ttf │ │ ├── 04525a240d4d16db.woff2 │ │ ├── themes │ │ ├── sap_belize │ │ │ ├── ToolbarSpacer.json │ │ │ ├── ToolbarSpacer.css │ │ │ ├── CalendarCustom.json │ │ │ ├── CalendarCustom.css │ │ │ ├── CalendarHeader.json │ │ │ ├── Table.json │ │ │ ├── CalendarHeader.css │ │ │ ├── Table.css │ │ │ ├── DatePicker.json │ │ │ ├── TableColumn.json │ │ │ ├── TableCell.json │ │ │ ├── DatePicker.css │ │ │ ├── InputIcon.json │ │ │ ├── TableColumn.css │ │ │ ├── TableCell.css │ │ │ ├── Dialog.json │ │ │ ├── InputIcon.css │ │ │ ├── TableRow.json │ │ │ ├── Dialog.css │ │ │ ├── GroupHeaderListItem.json │ │ │ ├── TableRow.css │ │ │ ├── GroupHeaderListItem.css │ │ │ ├── ListItem.json │ │ │ ├── Popup.json │ │ │ ├── ListItem.css │ │ │ ├── Label.json │ │ │ ├── Popover.json │ │ │ ├── Title.json │ │ │ ├── ToggleButton.json │ │ │ ├── Label.css │ │ │ ├── Popup.css │ │ │ ├── List.json │ │ │ ├── TextArea.json │ │ │ ├── Popover.css │ │ │ ├── ToggleButton.css │ │ │ ├── Title.css │ │ │ ├── ListItemBase.json │ │ │ ├── Card.json │ │ │ ├── List.css │ │ │ └── TextArea.css │ │ └── sap_fiori_3 │ │ │ ├── ToolbarSpacer.json │ │ │ ├── ToolbarSpacer.css │ │ │ ├── CalendarCustom.json │ │ │ ├── CalendarCustom.css │ │ │ ├── CalendarHeader.json │ │ │ ├── Table.json │ │ │ ├── CalendarHeader.css │ │ │ ├── DatePicker.json │ │ │ ├── Table.css │ │ │ ├── TableColumn.json │ │ │ ├── TableCell.json │ │ │ ├── DatePicker.css │ │ │ ├── InputIcon.json │ │ │ ├── TableColumn.css │ │ │ ├── TableCell.css │ │ │ ├── Dialog.json │ │ │ ├── InputIcon.css │ │ │ ├── TableRow.json │ │ │ ├── Dialog.css │ │ │ ├── GroupHeaderListItem.json │ │ │ ├── TableRow.css │ │ │ ├── GroupHeaderListItem.css │ │ │ ├── ListItem.json │ │ │ ├── Popup.json │ │ │ ├── ListItem.css │ │ │ ├── Label.json │ │ │ ├── Popover.json │ │ │ ├── Title.json │ │ │ ├── ToggleButton.json │ │ │ ├── Popup.css │ │ │ ├── Label.css │ │ │ ├── List.json │ │ │ ├── TextArea.json │ │ │ ├── Popover.css │ │ │ ├── ToggleButton.css │ │ │ ├── Title.css │ │ │ ├── ListItemBase.json │ │ │ ├── Card.json │ │ │ └── List.css │ │ └── .library ├── tsconfig.app.json ├── tsconfig.spec.json ├── tslint.json ├── app │ ├── list │ │ ├── list.component.css │ │ ├── list.component.spec.ts │ │ ├── list.component.html │ │ └── list.component.ts │ ├── user-input │ │ ├── user-input.component.html │ │ ├── user-input.component.css │ │ ├── user-input.component.ts │ │ └── user-input.component.spec.ts │ ├── header │ │ ├── header.component.spec.ts │ │ ├── header.component.css │ │ └── header.component.ts │ ├── app.component.css │ ├── app.component.spec.ts │ ├── app.component.html │ ├── app.module.ts │ └── app.component.ts ├── main.ts ├── index.html ├── test.ts ├── karma.conf.js └── polyfills.ts ├── .commitlintrc.json ├── .husky └── pre-push ├── docs └── images │ ├── UI5_logo_wide.png │ └── openui5-logo.png ├── e2e ├── src │ ├── app.po.ts │ └── app.e2e-spec.ts ├── tsconfig.e2e.json └── protractor.conf.js ├── .editorconfig ├── webpack.partial.js ├── .github └── workflows │ ├── lint.yml │ ├── ci.yml │ ├── deploy.yml │ └── codeql-analysis.yml ├── tsconfig.json ├── .gitignore ├── .reuse └── dep5 ├── package.json └── tslint.json /src/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.commitlintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["@commitlint/config-conventional"] 3 | } -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /.husky/pre-push: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | npm run hooks:pre-push 5 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-samples/ui5-webcomponents-sample-angular/HEAD/src/favicon.ico -------------------------------------------------------------------------------- /src/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-samples/ui5-webcomponents-sample-angular/HEAD/src/assets/images/logo.png -------------------------------------------------------------------------------- /docs/images/UI5_logo_wide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-samples/ui5-webcomponents-sample-angular/HEAD/docs/images/UI5_logo_wide.png -------------------------------------------------------------------------------- /docs/images/openui5-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-samples/ui5-webcomponents-sample-angular/HEAD/docs/images/openui5-logo.png -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/4954f2f3d3c66cd6.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-samples/ui5-webcomponents-sample-angular/HEAD/src/resources/sap/ui/webcomponents/main/4954f2f3d3c66cd6.woff -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/b4b3072255b9125b.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-samples/ui5-webcomponents-sample-angular/HEAD/src/resources/sap/ui/webcomponents/main/b4b3072255b9125b.ttf -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/04525a240d4d16db.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-samples/ui5-webcomponents-sample-angular/HEAD/src/resources/sap/ui/webcomponents/main/04525a240d4d16db.woff2 -------------------------------------------------------------------------------- /src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "types": [] 6 | }, 7 | "exclude": [ 8 | "test.ts", 9 | "**/*.spec.ts" 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getTitleText() { 9 | return element(by.css('app-root h1')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /webpack.partial.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | // module: { 3 | // rules: [ 4 | // { 5 | // test: [/cldr\/.*\.json$/, /i18n\/.*\.json$/], 6 | // loader: 'file-loader', 7 | // options: { 8 | // name: 'static/media/[name].[hash:8].[ext]', 9 | // }, 10 | // type: 'javascript/auto' 11 | // } 12 | // ] 13 | // } 14 | }; 15 | -------------------------------------------------------------------------------- /src/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "test.ts", 12 | "polyfills.ts" 13 | ], 14 | "include": [ 15 | "**/*.spec.ts", 16 | "**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_belize/ToolbarSpacer.json: -------------------------------------------------------------------------------- 1 | {"_":".sapMTBSpacer {\n /* should never have padding/margin/border */\n margin: 0 !important;\n padding: 0 !important;\n border: 0 !important;\n /* without height chrome ignores the element */\n height: 1px;\n}\n.sapMTBSpacerFlex {\n -webkit-flex-grow: 1;\n -webkit-box-flex: 1;\n flex: auto;\n}\n"} -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_fiori_3/ToolbarSpacer.json: -------------------------------------------------------------------------------- 1 | {"_":".sapMTBSpacer {\n /* should never have padding/margin/border */\n margin: 0 !important;\n padding: 0 !important;\n border: 0 !important;\n /* without height chrome ignores the element */\n height: 1px;\n}\n.sapMTBSpacerFlex {\n -webkit-flex-grow: 1;\n -webkit-box-flex: 1;\n flex: auto;\n}\n"} -------------------------------------------------------------------------------- /e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('workspace-project App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | it('should display welcome message', () => { 11 | page.navigateTo(); 12 | expect(page.getTitleText()).toEqual('Welcome to UI5/sample-webcomponents-angular!'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /src/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "app", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "app", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_belize/ToolbarSpacer.css: -------------------------------------------------------------------------------- 1 | .sapMTBSpacer { 2 | /* should never have padding/margin/border */ 3 | margin: 0 !important; 4 | padding: 0 !important; 5 | border: 0 !important; 6 | /* without height chrome ignores the element */ 7 | height: 1px; 8 | } 9 | .sapMTBSpacerFlex { 10 | -webkit-flex-grow: 1; 11 | -webkit-box-flex: 1; 12 | flex: auto; 13 | } 14 | -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_fiori_3/ToolbarSpacer.css: -------------------------------------------------------------------------------- 1 | .sapMTBSpacer { 2 | /* should never have padding/margin/border */ 3 | margin: 0 !important; 4 | padding: 0 !important; 5 | border: 0 !important; 6 | /* without height chrome ignores the element */ 7 | height: 1px; 8 | } 9 | .sapMTBSpacerFlex { 10 | -webkit-flex-grow: 1; 11 | -webkit-box-flex: 1; 12 | flex: auto; 13 | } 14 | -------------------------------------------------------------------------------- /src/app/list/list.component.css: -------------------------------------------------------------------------------- 1 | .li-content { 2 | display: flex; 3 | width: 100%; 4 | justify-content: space-between; 5 | align-items: center; 6 | } 7 | 8 | .li-content-text { 9 | overflow: hidden; 10 | text-overflow: ellipsis; 11 | white-space: nowrap; 12 | } 13 | 14 | .li-content-actions { 15 | display: flex; 16 | } 17 | 18 | .edit-btn { 19 | margin-right: 1rem; 20 | } 21 | 22 | .full-width { 23 | width: 100%; 24 | } -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /src/app/user-input/user-input.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | Add Todo 6 |
7 | -------------------------------------------------------------------------------- /.github/workflows/lint.yml: -------------------------------------------------------------------------------- 1 | name: Lint 2 | on: 3 | push: 4 | branches: 5 | - main 6 | pull_request: 7 | branches: 8 | - main 9 | jobs: 10 | check: 11 | runs-on: ubuntu-latest 12 | steps: 13 | - name: Check out repository code 14 | uses: actions/checkout@v2.4.0 15 | - name: Setup Node.js environment 16 | uses: actions/setup-node@v2.4.1 17 | with: 18 | node-version: 14.x 19 | - name: Lint 20 | run: | 21 | npm install 22 | npm run lint 23 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "module": "es2015", 9 | "moduleResolution": "node", 10 | "emitDecoratorMetadata": true, 11 | "experimentalDecorators": true, 12 | "importHelpers": true, 13 | "target": "es5", 14 | "typeRoots": [ 15 | "node_modules/@types" 16 | ], 17 | "lib": [ 18 | "es2018", 19 | "dom" 20 | ] 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | on: 3 | push: 4 | branches: 5 | - main 6 | pull_request: 7 | branches: 8 | - main 9 | jobs: 10 | Test-and-Build: 11 | runs-on: ubuntu-latest 12 | steps: 13 | - name: Check out repository code 14 | uses: actions/checkout@v2.4.0 15 | - name: Setup Node.js environment 16 | uses: actions/setup-node@v2.4.1 17 | with: 18 | node-version: 14.x 19 | - name: Install and Build 20 | run: | 21 | npm install 22 | npm run build -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/.library: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | sap.ui.webcomponents.main 5 | SAP SE 6 | ${copyright} 7 | ${version} 8 | 9 | SAPUI5 library with main web components. 10 | 11 | 12 | 13 | sap.ui.webcomponents.base 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | UI5 Web Components Angular Sample Application 6 | 7 | 8 | 9 | 10 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_belize/CalendarCustom.json: -------------------------------------------------------------------------------- 1 | {"_":"[data-sap-ui-wc-root].sap-desktop .sapMBtn.sapUiCalHeadPrev:focus > .sapMFocusable,\n[data-sap-ui-wc-root].sap-desktop .sapMBtn.sapUiCalHeadNext:focus > .sapMFocusable {\n outline: none;\n}\n.sapMBtn:not(.sapMBtnActive).sapUiCalHeadPrev:hover > .sapMBtnTransparent.sapMBtnHoverable,\n.sapMBtn.sapUiCalHeadNext:hover > .sapMBtnTransparent.sapMBtnHoverable {\n background-color: transparent;\n border-color: transparent;\n}\n.sapUiCalMonthView {\n outline: none;\n}\n.sapUiCalItems {\n outline: none;\n}\n"} -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_fiori_3/CalendarCustom.json: -------------------------------------------------------------------------------- 1 | {"_":"[data-sap-ui-wc-root].sap-desktop .sapMBtn.sapUiCalHeadPrev:focus > .sapMFocusable,\n[data-sap-ui-wc-root].sap-desktop .sapMBtn.sapUiCalHeadNext:focus > .sapMFocusable {\n outline: none;\n}\n.sapMBtn:not(.sapMBtnActive).sapUiCalHeadPrev:hover > .sapMBtnTransparent.sapMBtnHoverable,\n.sapMBtn.sapUiCalHeadNext:hover > .sapMBtnTransparent.sapMBtnHoverable {\n background-color: transparent;\n border-color: transparent;\n}\n.sapUiCalMonthView {\n outline: none;\n}\n.sapUiCalItems {\n outline: none;\n}\n"} -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_belize/CalendarCustom.css: -------------------------------------------------------------------------------- 1 | [data-sap-ui-wc-root].sap-desktop .sapMBtn.sapUiCalHeadPrev:focus > .sapMFocusable, 2 | [data-sap-ui-wc-root].sap-desktop .sapMBtn.sapUiCalHeadNext:focus > .sapMFocusable { 3 | outline: none; 4 | } 5 | .sapMBtn:not(.sapMBtnActive).sapUiCalHeadPrev:hover > .sapMBtnTransparent.sapMBtnHoverable, 6 | .sapMBtn.sapUiCalHeadNext:hover > .sapMBtnTransparent.sapMBtnHoverable { 7 | background-color: transparent; 8 | border-color: transparent; 9 | } 10 | .sapUiCalMonthView { 11 | outline: none; 12 | } 13 | .sapUiCalItems { 14 | outline: none; 15 | } 16 | -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_fiori_3/CalendarCustom.css: -------------------------------------------------------------------------------- 1 | [data-sap-ui-wc-root].sap-desktop .sapMBtn.sapUiCalHeadPrev:focus > .sapMFocusable, 2 | [data-sap-ui-wc-root].sap-desktop .sapMBtn.sapUiCalHeadNext:focus > .sapMFocusable { 3 | outline: none; 4 | } 5 | .sapMBtn:not(.sapMBtnActive).sapUiCalHeadPrev:hover > .sapMBtnTransparent.sapMBtnHoverable, 6 | .sapMBtn.sapUiCalHeadNext:hover > .sapMBtnTransparent.sapMBtnHoverable { 7 | background-color: transparent; 8 | border-color: transparent; 9 | } 10 | .sapUiCalMonthView { 11 | outline: none; 12 | } 13 | .sapUiCalItems { 14 | outline: none; 15 | } 16 | -------------------------------------------------------------------------------- /.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | name: Deploy 2 | 3 | on: 4 | push: 5 | branches: [ main ] 6 | jobs: 7 | deploy: 8 | runs-on: ubuntu-latest 9 | 10 | steps: 11 | - uses: actions/checkout@v3 12 | - uses: actions/setup-node@v3 13 | with: 14 | node-version: 14 15 | cache: 'npm' 16 | 17 | - name: Build 18 | run: | 19 | npm install 20 | npm run build 21 | - name: Deploy 22 | uses: JamesIves/github-pages-deploy-action@v4.3.3 23 | with: 24 | branch: gh-pages # The branch the action should deploy to. 25 | folder: dist # The folder the action should deploy. 26 | target-folder: ./ 27 | clean: true -------------------------------------------------------------------------------- /src/app/user-input/user-input.component.css: -------------------------------------------------------------------------------- 1 | .create-todo-wrapper { 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | padding: 2rem 1rem; 6 | margin: 2rem 0; 7 | box-sizing: border-box; 8 | background-color: var(--sapObjectHeader_Background); 9 | } 10 | 11 | .add-todo-element-width { 12 | width: auto; 13 | } 14 | 15 | #add-input { 16 | flex: auto; 17 | } 18 | 19 | #date-picker { 20 | margin: 0 0.5rem 0 0.5rem; 21 | } 22 | 23 | @media(max-width: 600px) { 24 | .create-todo-wrapper { 25 | flex-direction: column; 26 | } 27 | 28 | .add-todo-element-width { 29 | width: 100%; 30 | } 31 | 32 | #date-picker { 33 | margin: 0.5rem 0 0.5rem 0; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/app/user-input/user-input.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, ViewChild, ElementRef, Output, EventEmitter } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-user-input', 5 | templateUrl: './user-input.component.html', 6 | styleUrls: ['./user-input.component.css'] 7 | }) 8 | export class UserInputComponent implements OnInit { 9 | @ViewChild('textInput') text: ElementRef; 10 | @ViewChild('dateInput') date: ElementRef; 11 | 12 | @Output() addTodo = new EventEmitter(); 13 | 14 | constructor() { } 15 | ngOnInit() { 16 | } 17 | 18 | handleAddTodo() { 19 | this.addTodo.emit({ 20 | text: this.text.nativeElement.value, 21 | date: this.date.nativeElement.value 22 | }); 23 | } 24 | 25 | } 26 | -------------------------------------------------------------------------------- /src/app/list/list.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ListComponent } from './list.component'; 4 | 5 | describe('ListComponent', () => { 6 | let component: ListComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ ListComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ListComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /src/app/header/header.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { HeaderComponent } from './header.component'; 4 | 5 | describe('HeaderComponent', () => { 6 | let component: HeaderComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ HeaderComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(HeaderComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /src/app/user-input/user-input.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { UserInputComponent } from './user-input.component'; 4 | 5 | describe('UserInputComponent', () => { 6 | let component: UserInputComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ UserInputComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(UserInputComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | 8 | # dependencies 9 | /node_modules 10 | 11 | # profiling files 12 | chrome-profiler-events.json 13 | speed-measure-plugin.json 14 | 15 | # IDEs and editors 16 | /.idea 17 | .project 18 | .classpath 19 | .c9/ 20 | *.launch 21 | .settings/ 22 | *.sublime-workspace 23 | 24 | # IDE - VSCode 25 | .vscode/* 26 | !.vscode/settings.json 27 | !.vscode/tasks.json 28 | !.vscode/launch.json 29 | !.vscode/extensions.json 30 | 31 | # misc 32 | /.sass-cache 33 | /connect.lock 34 | /coverage 35 | /libpeerconnection.log 36 | npm-debug.log 37 | yarn-error.log 38 | testem.log 39 | /typings 40 | 41 | # System Files 42 | .DS_Store 43 | Thumbs.db 44 | -------------------------------------------------------------------------------- /src/app/list/list.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 10 | 11 |
12 | {{todo.text}} - finish before: {{todo.deadline}} 13 |
14 | Edit 15 | Delete 16 |
17 |
18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/app/list/list.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, Output, Input, EventEmitter } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-list', 5 | templateUrl: './list.component.html', 6 | styleUrls: ['./list.component.css'] 7 | }) 8 | export class ListComponent implements OnInit { 9 | 10 | @Input() todos; 11 | @Output() deletedItem = new EventEmitter(); 12 | @Output() changeSelection = new EventEmitter(); 13 | @Output() editPressed = new EventEmitter(); 14 | 15 | constructor() { } 16 | 17 | ngOnInit() { 18 | } 19 | 20 | handleEdit(event) { 21 | this.editPressed.emit({ 22 | id: event 23 | }); 24 | } 25 | 26 | handleDeleteItem(itemId) { 27 | this.deletedItem.emit(itemId); 28 | } 29 | 30 | handleChangeSelection($event) { 31 | this.changeSelection.emit({ 32 | selected: $event.detail.selectedItems 33 | }); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // Protractor configuration file, see link for more information 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts 3 | 4 | const { SpecReporter } = require('jasmine-spec-reporter'); 5 | 6 | exports.config = { 7 | allScriptsTimeout: 11000, 8 | specs: [ 9 | './src/**/*.e2e-spec.ts' 10 | ], 11 | capabilities: { 12 | 'browserName': 'chrome' 13 | }, 14 | directConnect: true, 15 | baseUrl: 'http://localhost:4200/', 16 | framework: 'jasmine', 17 | jasmineNodeOpts: { 18 | showColors: true, 19 | defaultTimeoutInterval: 30000, 20 | print: function() {} 21 | }, 22 | onPrepare() { 23 | require('ts-node').register({ 24 | project: require('path').join(__dirname, './tsconfig.e2e.json') 25 | }); 26 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 27 | } 28 | }; -------------------------------------------------------------------------------- /src/app/app.component.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | padding: 0; 3 | margin: 0; 4 | height: 100%; 5 | background: var(--sapBackgroundColor); 6 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 7 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 8 | sans-serif; 9 | } 10 | 11 | .app-content { 12 | height: 100%; 13 | padding: 0 1rem; 14 | } 15 | 16 | .list-todos-wrapper { 17 | margin: 2rem 0; 18 | } 19 | 20 | .list-todos-panel { 21 | margin: 2rem 0; 22 | } 23 | 24 | .dialog-content { 25 | max-width: 320px; 26 | padding: 2rem; 27 | } 28 | 29 | .title-textarea { 30 | height: 100px; 31 | display: inline-block; 32 | width: 100%; 33 | } 34 | 35 | .date-edit-fields { 36 | display: flex; 37 | flex-direction: column; 38 | margin-top: 1rem; 39 | } 40 | 41 | .dialog-footer { 42 | padding: 0.25rem 0.25rem 0 0.25rem; 43 | border-top: 1px solid #d9d9d9; 44 | display: flex; 45 | justify-content: flex-end; 46 | } 47 | 48 | .dialog-footer-btn--cancel { 49 | margin-inline-end: 0.25rem; 50 | } -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_belize/CalendarHeader.json: -------------------------------------------------------------------------------- 1 | {"_":"/* ============================= */\n/* Base theme */\n/* ============================= */\n/* ============================= */\n/* Global Base parameters */\n/* ============================= */\n/* =========================== */\n/* Global CSS for 'base' theme */\n/* =========================== */\n.sapUiCalHead {\n width: 100%;\n display: flex;\n justify-content: space-between;\n}\n/* ============================= */\n/* Global Belize parameters */\n/* ============================= */\n/* ===================================== */\n/* Quick Theming */\n/* ===================================== */\n/*\n UX COLOR SET\n*/\n/* PRIMARY COLORS */\n/* ACCENT COLORS */\n/* Semantic Background Colors */\n/* Semantic Border Colors */\n/* Semantic Foreground Elements */\n/* Semantic Text */\n/* Semantic Foreground Colors */\n/* ===================================== */\n/* Expert Theming */\n/* ===================================== */\n"} -------------------------------------------------------------------------------- /src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async } from '@angular/core/testing'; 2 | import { AppComponent } from './app.component'; 3 | describe('AppComponent', () => { 4 | beforeEach(async(() => { 5 | TestBed.configureTestingModule({ 6 | declarations: [ 7 | AppComponent 8 | ], 9 | }).compileComponents(); 10 | })); 11 | it('should create the app', async(() => { 12 | const fixture = TestBed.createComponent(AppComponent); 13 | const app = fixture.debugElement.componentInstance; 14 | expect(app).toBeTruthy(); 15 | })); 16 | it(`should have as title 'app'`, async(() => { 17 | const fixture = TestBed.createComponent(AppComponent); 18 | const app = fixture.debugElement.componentInstance; 19 | expect(app.title).toEqual('app'); 20 | })); 21 | it('should render title in a h1 tag', async(() => { 22 | const fixture = TestBed.createComponent(AppComponent); 23 | fixture.detectChanges(); 24 | const compiled = fixture.debugElement.nativeElement; 25 | expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!'); 26 | })); 27 | }); 28 | -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_belize/Table.json: -------------------------------------------------------------------------------- 1 | {"_":"/* ============================= */\n/* Base theme */\n/* ============================= */\n.sapWCTableHeader {\n width: 100%;\n display: grid;\n border-bottom: 1px solid #cccccc;\n}\n.sapWCTableColumnWrapper {\n background: #f7f7f7;\n border-bottom: 1px solid #e5e5e5;\n height: 100%;\n font-family: \"72\", Arial, Helvetica, sans-serif;\n font-size: 0.875rem;\n font-weight: normal;\n color: #333333;\n}\n/* ============================= */\n/* Global Belize parameters */\n/* ============================= */\n/* ===================================== */\n/* Quick Theming */\n/* ===================================== */\n/*\n UX COLOR SET\n*/\n/* PRIMARY COLORS */\n/* ACCENT COLORS */\n/* Semantic Background Colors */\n/* Semantic Border Colors */\n/* Semantic Foreground Elements */\n/* Semantic Text */\n/* Semantic Foreground Colors */\n/* ===================================== */\n/* Expert Theming */\n/* ===================================== */\n"} -------------------------------------------------------------------------------- /src/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, '../coverage'), 20 | reports: ['html', 'lcovonly', 'text-summary'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false 30 | }); 31 | }; 32 | -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_belize/CalendarHeader.css: -------------------------------------------------------------------------------- 1 | /* ============================= */ 2 | /* Base theme */ 3 | /* ============================= */ 4 | /* ============================= */ 5 | /* Global Base parameters */ 6 | /* ============================= */ 7 | /* =========================== */ 8 | /* Global CSS for 'base' theme */ 9 | /* =========================== */ 10 | .sapUiCalHead { 11 | width: 100%; 12 | display: flex; 13 | justify-content: space-between; 14 | } 15 | /* ============================= */ 16 | /* Global Belize parameters */ 17 | /* ============================= */ 18 | /* ===================================== */ 19 | /* Quick Theming */ 20 | /* ===================================== */ 21 | /* 22 | UX COLOR SET 23 | */ 24 | /* PRIMARY COLORS */ 25 | /* ACCENT COLORS */ 26 | /* Semantic Background Colors */ 27 | /* Semantic Border Colors */ 28 | /* Semantic Foreground Elements */ 29 | /* Semantic Text */ 30 | /* Semantic Foreground Colors */ 31 | /* ===================================== */ 32 | /* Expert Theming */ 33 | /* ===================================== */ 34 | -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_belize/Table.css: -------------------------------------------------------------------------------- 1 | /* ============================= */ 2 | /* Base theme */ 3 | /* ============================= */ 4 | .sapWCTableHeader { 5 | width: 100%; 6 | display: grid; 7 | border-bottom: 1px solid #cccccc; 8 | } 9 | .sapWCTableColumnWrapper { 10 | background: #f7f7f7; 11 | border-bottom: 1px solid #e5e5e5; 12 | height: 100%; 13 | font-family: "72", Arial, Helvetica, sans-serif; 14 | font-size: 0.875rem; 15 | font-weight: normal; 16 | color: #333333; 17 | } 18 | /* ============================= */ 19 | /* Global Belize parameters */ 20 | /* ============================= */ 21 | /* ===================================== */ 22 | /* Quick Theming */ 23 | /* ===================================== */ 24 | /* 25 | UX COLOR SET 26 | */ 27 | /* PRIMARY COLORS */ 28 | /* ACCENT COLORS */ 29 | /* Semantic Background Colors */ 30 | /* Semantic Border Colors */ 31 | /* Semantic Foreground Elements */ 32 | /* Semantic Text */ 33 | /* Semantic Foreground Colors */ 34 | /* ===================================== */ 35 | /* Expert Theming */ 36 | /* ===================================== */ 37 | -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_belize/DatePicker.json: -------------------------------------------------------------------------------- 1 | {"_":"/* ============================= */\n/* Base theme */\n/* ============================= */\n/* ============================= */\n/* Global Base parameters */\n/* ============================= */\n/* =========================== */\n/* Global CSS for 'base' theme */\n/* =========================== */\n/* ============================= */\n/* Base theme */\n/* ============================= */\n:host(ui5-datepicker) {\n display: inline-block;\n width: 100%;\n}\nui5-datepicker {\n display: inline-block;\n width: 100%;\n}\n/* ============================= */\n/* Global Belize parameters */\n/* ============================= */\n/* ===================================== */\n/* Quick Theming */\n/* ===================================== */\n/*\n UX COLOR SET\n*/\n/* PRIMARY COLORS */\n/* ACCENT COLORS */\n/* Semantic Background Colors */\n/* Semantic Border Colors */\n/* Semantic Foreground Elements */\n/* Semantic Text */\n/* Semantic Foreground Colors */\n/* ===================================== */\n/* Expert Theming */\n/* ===================================== */\n"} -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_belize/TableColumn.json: -------------------------------------------------------------------------------- 1 | {"_":"/* ============================= */\n/* Base theme */\n/* ============================= */\n/* ============================= */\n/* Global Base parameters */\n/* ============================= */\n/* =========================== */\n/* Global CSS for 'base' theme */\n/* =========================== */\n/* ============================= */\n/* Global Belize parameters */\n/* ============================= */\n/* ===================================== */\n/* Quick Theming */\n/* ===================================== */\n/*\n UX COLOR SET\n*/\n/* PRIMARY COLORS */\n/* ACCENT COLORS */\n/* Semantic Background Colors */\n/* Semantic Border Colors */\n/* Semantic Foreground Elements */\n/* Semantic Text */\n/* Semantic Foreground Colors */\n/* ===================================== */\n/* Expert Theming */\n/* ===================================== */\n.sapWCTableColumn {\n padding: 0.25rem;\n font-family: \"72\", Arial, Helvetica, sans-serif;\n font-size: 0.875rem;\n height: 100%;\n box-sizing: border-box;\n}\n.sapWCTableColumnFirst {\n padding-left: 1rem;\n}\n.sapWCTableColumnLast {\n padding-right: 1rem;\n}\n"} -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_belize/TableCell.json: -------------------------------------------------------------------------------- 1 | {"_":"/* ============================= */\n/* Base theme */\n/* ============================= */\n/* ============================= */\n/* Global Base parameters */\n/* ============================= */\n/* =========================== */\n/* Global CSS for 'base' theme */\n/* =========================== */\n/* ============================= */\n/* Global Belize parameters */\n/* ============================= */\n/* ===================================== */\n/* Quick Theming */\n/* ===================================== */\n/*\n UX COLOR SET\n*/\n/* PRIMARY COLORS */\n/* ACCENT COLORS */\n/* Semantic Background Colors */\n/* Semantic Border Colors */\n/* Semantic Foreground Elements */\n/* Semantic Text */\n/* Semantic Foreground Colors */\n/* ===================================== */\n/* Expert Theming */\n/* ===================================== */\n.sapWCTableCell {\n overflow: hidden;\n padding: .25rem .0625rem;\n font-family: \"72\", Arial, Helvetica, sans-serif;\n font-size: 0.875rem;\n height: 100%;\n box-sizing: border-box;\n}\n.sapWCTableCellWithBorder {\n border-bottom: 1px solid #E5E5E5;\n}\n.sapWCTableCellFirst {\n padding-left: 1rem;\n}\n.sapWCTableCellLast {\n padding-right: 1rem;\n}\n"} -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_belize/DatePicker.css: -------------------------------------------------------------------------------- 1 | /* ============================= */ 2 | /* Base theme */ 3 | /* ============================= */ 4 | /* ============================= */ 5 | /* Global Base parameters */ 6 | /* ============================= */ 7 | /* =========================== */ 8 | /* Global CSS for 'base' theme */ 9 | /* =========================== */ 10 | /* ============================= */ 11 | /* Base theme */ 12 | /* ============================= */ 13 | :host(ui5-datepicker) { 14 | display: inline-block; 15 | width: 100%; 16 | } 17 | ui5-datepicker { 18 | display: inline-block; 19 | width: 100%; 20 | } 21 | /* ============================= */ 22 | /* Global Belize parameters */ 23 | /* ============================= */ 24 | /* ===================================== */ 25 | /* Quick Theming */ 26 | /* ===================================== */ 27 | /* 28 | UX COLOR SET 29 | */ 30 | /* PRIMARY COLORS */ 31 | /* ACCENT COLORS */ 32 | /* Semantic Background Colors */ 33 | /* Semantic Border Colors */ 34 | /* Semantic Foreground Elements */ 35 | /* Semantic Text */ 36 | /* Semantic Foreground Colors */ 37 | /* ===================================== */ 38 | /* Expert Theming */ 39 | /* ===================================== */ 40 | -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_belize/InputIcon.json: -------------------------------------------------------------------------------- 1 | {"_":"/* ============================= */\n/* Base theme */\n/* ============================= */\n/* ============================= */\n/* Global Base parameters */\n/* ============================= */\n/* =========================== */\n/* Global CSS for 'base' theme */\n/* =========================== */\n/* ============================= */\n/* Base theme */\n/* ============================= */\n.sapUiIcon.sapMInputBaseIcon {\n width: 2.375rem;\n min-width: 2.375rem;\n height: 100%;\n line-height: 2.375rem;\n vertical-align: middle;\n cursor: pointer;\n background: transparent;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n/* ============================= */\n/* Global Belize parameters */\n/* ============================= */\n/* ===================================== */\n/* Quick Theming */\n/* ===================================== */\n/*\n UX COLOR SET\n*/\n/* PRIMARY COLORS */\n/* ACCENT COLORS */\n/* Semantic Background Colors */\n/* Semantic Border Colors */\n/* Semantic Foreground Elements */\n/* Semantic Text */\n/* Semantic Foreground Colors */\n/* ===================================== */\n/* Expert Theming */\n/* ===================================== */\n"} -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_fiori_3/CalendarHeader.json: -------------------------------------------------------------------------------- 1 | {"_":"/* ============================= */\n/* Base theme */\n/* ============================= */\n/* ============================= */\n/* Global Base parameters */\n/* ============================= */\n/* =========================== */\n/* Global CSS for 'base' theme */\n/* =========================== */\n.sapUiCalHead {\n width: 100%;\n display: flex;\n justify-content: space-between;\n}\n/* ============================= */\n/* Global Belize parameters */\n/* ============================= */\n/* ===================================== */\n/* Quick Theming */\n/* ===================================== */\n/*\n UX COLOR SET\n*/\n/* PRIMARY COLORS */\n/* ACCENT COLORS */\n/* Semantic Background Colors */\n/* Semantic Border Colors */\n/* Semantic Foreground Elements */\n/* Semantic Text */\n/* Semantic Foreground Colors */\n/* ===================================== */\n/* Expert Theming */\n/* ===================================== */\n/*darken(@sapBrandColor, 10); // no contrast function allowed because background can be gradient*/\n/* darken(@sapButton_Background, 30); //should be #ababab */\n/* contrast(@sapButton_Background, darken(@sapHighlightColor, 10), @sapContent_ContrastTextColor, @sapContent_ContrastTextThreshold); //should be #346187 */\n"} -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_belize/TableColumn.css: -------------------------------------------------------------------------------- 1 | /* ============================= */ 2 | /* Base theme */ 3 | /* ============================= */ 4 | /* ============================= */ 5 | /* Global Base parameters */ 6 | /* ============================= */ 7 | /* =========================== */ 8 | /* Global CSS for 'base' theme */ 9 | /* =========================== */ 10 | /* ============================= */ 11 | /* Global Belize parameters */ 12 | /* ============================= */ 13 | /* ===================================== */ 14 | /* Quick Theming */ 15 | /* ===================================== */ 16 | /* 17 | UX COLOR SET 18 | */ 19 | /* PRIMARY COLORS */ 20 | /* ACCENT COLORS */ 21 | /* Semantic Background Colors */ 22 | /* Semantic Border Colors */ 23 | /* Semantic Foreground Elements */ 24 | /* Semantic Text */ 25 | /* Semantic Foreground Colors */ 26 | /* ===================================== */ 27 | /* Expert Theming */ 28 | /* ===================================== */ 29 | .sapWCTableColumn { 30 | padding: 0.25rem; 31 | font-family: "72", Arial, Helvetica, sans-serif; 32 | font-size: 0.875rem; 33 | height: 100%; 34 | box-sizing: border-box; 35 | } 36 | .sapWCTableColumnFirst { 37 | padding-left: 1rem; 38 | } 39 | .sapWCTableColumnLast { 40 | padding-right: 1rem; 41 | } 42 | -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_fiori_3/Table.json: -------------------------------------------------------------------------------- 1 | {"_":"/* ============================= */\n/* Base theme */\n/* ============================= */\n.sapWCTableHeader {\n width: 100%;\n display: grid;\n border-bottom: 1px solid #ededed;\n}\n.sapWCTableColumnWrapper {\n background: #fafafa;\n border-bottom: 1px solid #ededed;\n height: 100%;\n font-family: \"72\", Arial, Helvetica, sans-serif;\n font-size: 0.875rem;\n font-weight: normal;\n color: #32363a;\n}\n/* ============================= */\n/* Global Belize parameters */\n/* ============================= */\n/* ===================================== */\n/* Quick Theming */\n/* ===================================== */\n/*\n UX COLOR SET\n*/\n/* PRIMARY COLORS */\n/* ACCENT COLORS */\n/* Semantic Background Colors */\n/* Semantic Border Colors */\n/* Semantic Foreground Elements */\n/* Semantic Text */\n/* Semantic Foreground Colors */\n/* ===================================== */\n/* Expert Theming */\n/* ===================================== */\n/*darken(@sapBrandColor, 10); // no contrast function allowed because background can be gradient*/\n/* darken(@sapButton_Background, 30); //should be #ababab */\n/* contrast(@sapButton_Background, darken(@sapHighlightColor, 10), @sapContent_ContrastTextColor, @sapContent_ContrastTextThreshold); //should be #346187 */\n"} -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_belize/TableCell.css: -------------------------------------------------------------------------------- 1 | /* ============================= */ 2 | /* Base theme */ 3 | /* ============================= */ 4 | /* ============================= */ 5 | /* Global Base parameters */ 6 | /* ============================= */ 7 | /* =========================== */ 8 | /* Global CSS for 'base' theme */ 9 | /* =========================== */ 10 | /* ============================= */ 11 | /* Global Belize parameters */ 12 | /* ============================= */ 13 | /* ===================================== */ 14 | /* Quick Theming */ 15 | /* ===================================== */ 16 | /* 17 | UX COLOR SET 18 | */ 19 | /* PRIMARY COLORS */ 20 | /* ACCENT COLORS */ 21 | /* Semantic Background Colors */ 22 | /* Semantic Border Colors */ 23 | /* Semantic Foreground Elements */ 24 | /* Semantic Text */ 25 | /* Semantic Foreground Colors */ 26 | /* ===================================== */ 27 | /* Expert Theming */ 28 | /* ===================================== */ 29 | .sapWCTableCell { 30 | overflow: hidden; 31 | padding: .25rem .0625rem; 32 | font-family: "72", Arial, Helvetica, sans-serif; 33 | font-size: 0.875rem; 34 | height: 100%; 35 | box-sizing: border-box; 36 | } 37 | .sapWCTableCellWithBorder { 38 | border-bottom: 1px solid #E5E5E5; 39 | } 40 | .sapWCTableCellFirst { 41 | padding-left: 1rem; 42 | } 43 | .sapWCTableCellLast { 44 | padding-right: 1rem; 45 | } 46 | -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_fiori_3/CalendarHeader.css: -------------------------------------------------------------------------------- 1 | /* ============================= */ 2 | /* Base theme */ 3 | /* ============================= */ 4 | /* ============================= */ 5 | /* Global Base parameters */ 6 | /* ============================= */ 7 | /* =========================== */ 8 | /* Global CSS for 'base' theme */ 9 | /* =========================== */ 10 | .sapUiCalHead { 11 | width: 100%; 12 | display: flex; 13 | justify-content: space-between; 14 | } 15 | /* ============================= */ 16 | /* Global Belize parameters */ 17 | /* ============================= */ 18 | /* ===================================== */ 19 | /* Quick Theming */ 20 | /* ===================================== */ 21 | /* 22 | UX COLOR SET 23 | */ 24 | /* PRIMARY COLORS */ 25 | /* ACCENT COLORS */ 26 | /* Semantic Background Colors */ 27 | /* Semantic Border Colors */ 28 | /* Semantic Foreground Elements */ 29 | /* Semantic Text */ 30 | /* Semantic Foreground Colors */ 31 | /* ===================================== */ 32 | /* Expert Theming */ 33 | /* ===================================== */ 34 | /*darken(@sapBrandColor, 10); // no contrast function allowed because background can be gradient*/ 35 | /* darken(@sapButton_Background, 30); //should be #ababab */ 36 | /* contrast(@sapButton_Background, darken(@sapHighlightColor, 10), @sapContent_ContrastTextColor, @sapContent_ContrastTextThreshold); //should be #346187 */ 37 | -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_belize/Dialog.json: -------------------------------------------------------------------------------- 1 | {"_":"/* ============================= */\n/* Base theme */\n/* ============================= */\n/* ============================= */\n/* Global Base parameters */\n/* ============================= */\n/* =========================== */\n/* Global CSS for 'base' theme */\n/* =========================== */\n.sapMDialogParent {\n position: fixed;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.sapMDialog {\n display: flex;\n flex-direction: column;\n}\n.sapMDialogSection {\n flex-grow: 1;\n display: flex;\n}\n.sapMDialog.sapMDialogStretched {\n top: 5%;\n bottom: 5%;\n left: 3.5%;\n right: 3.5%;\n min-width: 0;\n min-height: 0;\n}\n.sap-phone .sapMDialog.sapMDialogStretched {\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n box-shadow: none;\n border-radius: 0;\n}\n/* ============================= */\n/* Global Belize parameters */\n/* ============================= */\n/* ===================================== */\n/* Quick Theming */\n/* ===================================== */\n/*\n UX COLOR SET\n*/\n/* PRIMARY COLORS */\n/* ACCENT COLORS */\n/* Semantic Background Colors */\n/* Semantic Border Colors */\n/* Semantic Foreground Elements */\n/* Semantic Text */\n/* Semantic Foreground Colors */\n/* ===================================== */\n/* Expert Theming */\n/* ===================================== */\n"} -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_fiori_3/DatePicker.json: -------------------------------------------------------------------------------- 1 | {"_":"/* ============================= */\n/* Base theme */\n/* ============================= */\n/* ============================= */\n/* Global Base parameters */\n/* ============================= */\n/* =========================== */\n/* Global CSS for 'base' theme */\n/* =========================== */\n/* ============================= */\n/* Base theme */\n/* ============================= */\n:host(ui5-datepicker) {\n display: inline-block;\n width: 100%;\n}\nui5-datepicker {\n display: inline-block;\n width: 100%;\n}\n/* ============================= */\n/* Global Belize parameters */\n/* ============================= */\n/* ===================================== */\n/* Quick Theming */\n/* ===================================== */\n/*\n UX COLOR SET\n*/\n/* PRIMARY COLORS */\n/* ACCENT COLORS */\n/* Semantic Background Colors */\n/* Semantic Border Colors */\n/* Semantic Foreground Elements */\n/* Semantic Text */\n/* Semantic Foreground Colors */\n/* ===================================== */\n/* Expert Theming */\n/* ===================================== */\n/*darken(@sapBrandColor, 10); // no contrast function allowed because background can be gradient*/\n/* darken(@sapButton_Background, 30); //should be #ababab */\n/* contrast(@sapButton_Background, darken(@sapHighlightColor, 10), @sapContent_ContrastTextColor, @sapContent_ContrastTextThreshold); //should be #346187 */\n"} -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_fiori_3/Table.css: -------------------------------------------------------------------------------- 1 | /* ============================= */ 2 | /* Base theme */ 3 | /* ============================= */ 4 | .sapWCTableHeader { 5 | width: 100%; 6 | display: grid; 7 | border-bottom: 1px solid #ededed; 8 | } 9 | .sapWCTableColumnWrapper { 10 | background: #fafafa; 11 | border-bottom: 1px solid #ededed; 12 | height: 100%; 13 | font-family: "72", Arial, Helvetica, sans-serif; 14 | font-size: 0.875rem; 15 | font-weight: normal; 16 | color: #32363a; 17 | } 18 | /* ============================= */ 19 | /* Global Belize parameters */ 20 | /* ============================= */ 21 | /* ===================================== */ 22 | /* Quick Theming */ 23 | /* ===================================== */ 24 | /* 25 | UX COLOR SET 26 | */ 27 | /* PRIMARY COLORS */ 28 | /* ACCENT COLORS */ 29 | /* Semantic Background Colors */ 30 | /* Semantic Border Colors */ 31 | /* Semantic Foreground Elements */ 32 | /* Semantic Text */ 33 | /* Semantic Foreground Colors */ 34 | /* ===================================== */ 35 | /* Expert Theming */ 36 | /* ===================================== */ 37 | /*darken(@sapBrandColor, 10); // no contrast function allowed because background can be gradient*/ 38 | /* darken(@sapButton_Background, 30); //should be #ababab */ 39 | /* contrast(@sapButton_Background, darken(@sapHighlightColor, 10), @sapContent_ContrastTextColor, @sapContent_ContrastTextThreshold); //should be #346187 */ 40 | -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_belize/InputIcon.css: -------------------------------------------------------------------------------- 1 | /* ============================= */ 2 | /* Base theme */ 3 | /* ============================= */ 4 | /* ============================= */ 5 | /* Global Base parameters */ 6 | /* ============================= */ 7 | /* =========================== */ 8 | /* Global CSS for 'base' theme */ 9 | /* =========================== */ 10 | /* ============================= */ 11 | /* Base theme */ 12 | /* ============================= */ 13 | .sapUiIcon.sapMInputBaseIcon { 14 | width: 2.375rem; 15 | min-width: 2.375rem; 16 | height: 100%; 17 | line-height: 2.375rem; 18 | vertical-align: middle; 19 | cursor: pointer; 20 | background: transparent; 21 | -webkit-user-select: none; 22 | -moz-user-select: none; 23 | -ms-user-select: none; 24 | user-select: none; 25 | } 26 | /* ============================= */ 27 | /* Global Belize parameters */ 28 | /* ============================= */ 29 | /* ===================================== */ 30 | /* Quick Theming */ 31 | /* ===================================== */ 32 | /* 33 | UX COLOR SET 34 | */ 35 | /* PRIMARY COLORS */ 36 | /* ACCENT COLORS */ 37 | /* Semantic Background Colors */ 38 | /* Semantic Border Colors */ 39 | /* Semantic Foreground Elements */ 40 | /* Semantic Text */ 41 | /* Semantic Foreground Colors */ 42 | /* ===================================== */ 43 | /* Expert Theming */ 44 | /* ===================================== */ 45 | -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_fiori_3/TableColumn.json: -------------------------------------------------------------------------------- 1 | {"_":"/* ============================= */\n/* Base theme */\n/* ============================= */\n/* ============================= */\n/* Global Base parameters */\n/* ============================= */\n/* =========================== */\n/* Global CSS for 'base' theme */\n/* =========================== */\n/* ============================= */\n/* Global Belize parameters */\n/* ============================= */\n/* ===================================== */\n/* Quick Theming */\n/* ===================================== */\n/*\n UX COLOR SET\n*/\n/* PRIMARY COLORS */\n/* ACCENT COLORS */\n/* Semantic Background Colors */\n/* Semantic Border Colors */\n/* Semantic Foreground Elements */\n/* Semantic Text */\n/* Semantic Foreground Colors */\n/* ===================================== */\n/* Expert Theming */\n/* ===================================== */\n/*darken(@sapBrandColor, 10); // no contrast function allowed because background can be gradient*/\n/* darken(@sapButton_Background, 30); //should be #ababab */\n/* contrast(@sapButton_Background, darken(@sapHighlightColor, 10), @sapContent_ContrastTextColor, @sapContent_ContrastTextThreshold); //should be #346187 */\n.sapWCTableColumn {\n padding: 0.25rem;\n font-family: \"72\", Arial, Helvetica, sans-serif;\n font-size: 0.875rem;\n height: 100%;\n box-sizing: border-box;\n}\n.sapWCTableColumnFirst {\n padding-left: 1rem;\n}\n.sapWCTableColumnLast {\n padding-right: 1rem;\n}\n"} -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_belize/TableRow.json: -------------------------------------------------------------------------------- 1 | {"_":"/* ============================= */\n/* Base theme */\n/* ============================= */\n/* ============================= */\n/* Global Base parameters */\n/* ============================= */\n/* =========================== */\n/* Global CSS for 'base' theme */\n/* =========================== */\n/* ============================= */\n/* Base theme */\n/* ============================= */\n.sapWCTableRow {\n display: grid;\n align-items: center;\n background-color: #ffffff;\n box-sizing: border-box;\n}\n.sapWCTableRow:focus {\n outline: 1px solid #000;\n outline-offset: -3px;\n outline-style: dotted;\n}\n.sapWCTablePopinRow {\n padding: 0.25rem 1rem;\n grid-column-start: 1;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n}\n.sapWCTablePopinTitle {\n color: #333333;\n}\n.sapMWCTableRowCellContainer {\n height: 100%;\n}\n.sapWCTableRowWithBorder {\n border-bottom: 1px solid #e5e5e5;\n}\n/* ============================= */\n/* Global Belize parameters */\n/* ============================= */\n/* ===================================== */\n/* Quick Theming */\n/* ===================================== */\n/*\n UX COLOR SET\n*/\n/* PRIMARY COLORS */\n/* ACCENT COLORS */\n/* Semantic Background Colors */\n/* Semantic Border Colors */\n/* Semantic Foreground Elements */\n/* Semantic Text */\n/* Semantic Foreground Colors */\n/* ===================================== */\n/* Expert Theming */\n/* ===================================== */\n"} -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_fiori_3/TableCell.json: -------------------------------------------------------------------------------- 1 | {"_":"/* ============================= */\n/* Base theme */\n/* ============================= */\n/* ============================= */\n/* Global Base parameters */\n/* ============================= */\n/* =========================== */\n/* Global CSS for 'base' theme */\n/* =========================== */\n/* ============================= */\n/* Global Belize parameters */\n/* ============================= */\n/* ===================================== */\n/* Quick Theming */\n/* ===================================== */\n/*\n UX COLOR SET\n*/\n/* PRIMARY COLORS */\n/* ACCENT COLORS */\n/* Semantic Background Colors */\n/* Semantic Border Colors */\n/* Semantic Foreground Elements */\n/* Semantic Text */\n/* Semantic Foreground Colors */\n/* ===================================== */\n/* Expert Theming */\n/* ===================================== */\n/*darken(@sapBrandColor, 10); // no contrast function allowed because background can be gradient*/\n/* darken(@sapButton_Background, 30); //should be #ababab */\n/* contrast(@sapButton_Background, darken(@sapHighlightColor, 10), @sapContent_ContrastTextColor, @sapContent_ContrastTextThreshold); //should be #346187 */\n.sapWCTableCell {\n overflow: hidden;\n padding: .25rem .0625rem;\n font-family: \"72\", Arial, Helvetica, sans-serif;\n font-size: 0.875rem;\n height: 100%;\n box-sizing: border-box;\n}\n.sapWCTableCellWithBorder {\n border-bottom: 1px solid #E5E5E5;\n}\n.sapWCTableCellFirst {\n padding-left: 1rem;\n}\n.sapWCTableCellLast {\n padding-right: 1rem;\n}\n"} -------------------------------------------------------------------------------- /src/app/header/header.component.css: -------------------------------------------------------------------------------- 1 | .app-bar-theming-popover { 2 | width: 250px; 3 | } 4 | 5 | .header-toolbar { 6 | position:sticky; 7 | z-index: 42; 8 | background-color: rgba(255, 255, 255, 0.6); 9 | box-shadow: 0 4px 5px -5px #0a6ed1; 10 | } 11 | 12 | .ui5-logo { 13 | height: 2rem; 14 | margin-right: 1rem; 15 | margin-left: 2rem; 16 | } 17 | 18 | .app-bar-profile-popover { 19 | width: 250px; 20 | } 21 | 22 | #settings-dialog { 23 | max-width: 300px; 24 | } 25 | 26 | .dialog-button { 27 | display: flex; 28 | justify-content: flex-end; 29 | margin-top: 0.625rem; 30 | margin-bottom: -0.425rem; 31 | } 32 | 33 | .profile-settings, .help-header { 34 | display: flex; 35 | flex-direction: row; 36 | justify-content: flex-start; 37 | -webkit-box-orient: horizontal; 38 | -webkit-box-direction: normal; 39 | -ms-flex-direction: row; 40 | -webkit-box-pack: start; 41 | -ms-flex-pack: start; 42 | } 43 | 44 | .profile-text { 45 | display: flex; 46 | flex-direction: column; 47 | justify-content: center; 48 | margin-left: 1rem; 49 | } 50 | 51 | .app-header-logo { 52 | height: 2rem; 53 | } 54 | 55 | .profile-settings-list { 56 | margin-top: 1.25rem; 57 | } 58 | 59 | .help-dialog-text { 60 | font-size: 0.875rem; 61 | } 62 | 63 | .profile-rtl-switch { 64 | width: 100%; 65 | display: flex; 66 | align-items: center; 67 | justify-content: space-between; 68 | } 69 | 70 | #header-title-align{ 71 | margin: 1rem 0; 72 | gap: 0.225rem; 73 | } 74 | 75 | #header-logo-align { 76 | margin: 0.225rem 3.225rem 0.225rem 0; 77 | align-items: center; 78 | gap: 0.435rem; 79 | } 80 | 81 | #help-dialog::part(header){ 82 | justify-content: flex-start; 83 | } -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | 5 | 9 | 13 | 14 | 15 | 16 | 20 | 24 | 25 | 26 |
27 | 28 | 47 | -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_fiori_3/DatePicker.css: -------------------------------------------------------------------------------- 1 | /* ============================= */ 2 | /* Base theme */ 3 | /* ============================= */ 4 | /* ============================= */ 5 | /* Global Base parameters */ 6 | /* ============================= */ 7 | /* =========================== */ 8 | /* Global CSS for 'base' theme */ 9 | /* =========================== */ 10 | /* ============================= */ 11 | /* Base theme */ 12 | /* ============================= */ 13 | :host(ui5-datepicker) { 14 | display: inline-block; 15 | width: 100%; 16 | } 17 | ui5-datepicker { 18 | display: inline-block; 19 | width: 100%; 20 | } 21 | /* ============================= */ 22 | /* Global Belize parameters */ 23 | /* ============================= */ 24 | /* ===================================== */ 25 | /* Quick Theming */ 26 | /* ===================================== */ 27 | /* 28 | UX COLOR SET 29 | */ 30 | /* PRIMARY COLORS */ 31 | /* ACCENT COLORS */ 32 | /* Semantic Background Colors */ 33 | /* Semantic Border Colors */ 34 | /* Semantic Foreground Elements */ 35 | /* Semantic Text */ 36 | /* Semantic Foreground Colors */ 37 | /* ===================================== */ 38 | /* Expert Theming */ 39 | /* ===================================== */ 40 | /*darken(@sapBrandColor, 10); // no contrast function allowed because background can be gradient*/ 41 | /* darken(@sapButton_Background, 30); //should be #ababab */ 42 | /* contrast(@sapButton_Background, darken(@sapHighlightColor, 10), @sapContent_ContrastTextColor, @sapContent_ContrastTextThreshold); //should be #346187 */ 43 | -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_fiori_3/InputIcon.json: -------------------------------------------------------------------------------- 1 | {"_":"/* ============================= */\n/* Base theme */\n/* ============================= */\n/* ============================= */\n/* Global Base parameters */\n/* ============================= */\n/* =========================== */\n/* Global CSS for 'base' theme */\n/* =========================== */\n/* ============================= */\n/* Base theme */\n/* ============================= */\n.sapUiIcon.sapMInputBaseIcon {\n width: 2.375rem;\n min-width: 2.375rem;\n height: 100%;\n line-height: 2.375rem;\n vertical-align: middle;\n cursor: pointer;\n background: transparent;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n/* ============================= */\n/* Global Belize parameters */\n/* ============================= */\n/* ===================================== */\n/* Quick Theming */\n/* ===================================== */\n/*\n UX COLOR SET\n*/\n/* PRIMARY COLORS */\n/* ACCENT COLORS */\n/* Semantic Background Colors */\n/* Semantic Border Colors */\n/* Semantic Foreground Elements */\n/* Semantic Text */\n/* Semantic Foreground Colors */\n/* ===================================== */\n/* Expert Theming */\n/* ===================================== */\n/*darken(@sapBrandColor, 10); // no contrast function allowed because background can be gradient*/\n/* darken(@sapButton_Background, 30); //should be #ababab */\n/* contrast(@sapButton_Background, darken(@sapHighlightColor, 10), @sapContent_ContrastTextColor, @sapContent_ContrastTextThreshold); //should be #346187 */\n"} -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_fiori_3/TableColumn.css: -------------------------------------------------------------------------------- 1 | /* ============================= */ 2 | /* Base theme */ 3 | /* ============================= */ 4 | /* ============================= */ 5 | /* Global Base parameters */ 6 | /* ============================= */ 7 | /* =========================== */ 8 | /* Global CSS for 'base' theme */ 9 | /* =========================== */ 10 | /* ============================= */ 11 | /* Global Belize parameters */ 12 | /* ============================= */ 13 | /* ===================================== */ 14 | /* Quick Theming */ 15 | /* ===================================== */ 16 | /* 17 | UX COLOR SET 18 | */ 19 | /* PRIMARY COLORS */ 20 | /* ACCENT COLORS */ 21 | /* Semantic Background Colors */ 22 | /* Semantic Border Colors */ 23 | /* Semantic Foreground Elements */ 24 | /* Semantic Text */ 25 | /* Semantic Foreground Colors */ 26 | /* ===================================== */ 27 | /* Expert Theming */ 28 | /* ===================================== */ 29 | /*darken(@sapBrandColor, 10); // no contrast function allowed because background can be gradient*/ 30 | /* darken(@sapButton_Background, 30); //should be #ababab */ 31 | /* contrast(@sapButton_Background, darken(@sapHighlightColor, 10), @sapContent_ContrastTextColor, @sapContent_ContrastTextThreshold); //should be #346187 */ 32 | .sapWCTableColumn { 33 | padding: 0.25rem; 34 | font-family: "72", Arial, Helvetica, sans-serif; 35 | font-size: 0.875rem; 36 | height: 100%; 37 | box-sizing: border-box; 38 | } 39 | .sapWCTableColumnFirst { 40 | padding-left: 1rem; 41 | } 42 | .sapWCTableColumnLast { 43 | padding-right: 1rem; 44 | } 45 | -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_belize/Dialog.css: -------------------------------------------------------------------------------- 1 | /* ============================= */ 2 | /* Base theme */ 3 | /* ============================= */ 4 | /* ============================= */ 5 | /* Global Base parameters */ 6 | /* ============================= */ 7 | /* =========================== */ 8 | /* Global CSS for 'base' theme */ 9 | /* =========================== */ 10 | .sapMDialogParent { 11 | position: fixed; 12 | left: 0; 13 | right: 0; 14 | top: 0; 15 | bottom: 0; 16 | display: flex; 17 | justify-content: center; 18 | align-items: center; 19 | } 20 | .sapMDialog { 21 | display: flex; 22 | flex-direction: column; 23 | } 24 | .sapMDialogSection { 25 | flex-grow: 1; 26 | display: flex; 27 | } 28 | .sapMDialog.sapMDialogStretched { 29 | top: 5%; 30 | bottom: 5%; 31 | left: 3.5%; 32 | right: 3.5%; 33 | min-width: 0; 34 | min-height: 0; 35 | } 36 | .sap-phone .sapMDialog.sapMDialogStretched { 37 | top: 0; 38 | bottom: 0; 39 | left: 0; 40 | right: 0; 41 | box-shadow: none; 42 | border-radius: 0; 43 | } 44 | /* ============================= */ 45 | /* Global Belize parameters */ 46 | /* ============================= */ 47 | /* ===================================== */ 48 | /* Quick Theming */ 49 | /* ===================================== */ 50 | /* 51 | UX COLOR SET 52 | */ 53 | /* PRIMARY COLORS */ 54 | /* ACCENT COLORS */ 55 | /* Semantic Background Colors */ 56 | /* Semantic Border Colors */ 57 | /* Semantic Foreground Elements */ 58 | /* Semantic Text */ 59 | /* Semantic Foreground Colors */ 60 | /* ===================================== */ 61 | /* Expert Theming */ 62 | /* ===================================== */ 63 | -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_belize/GroupHeaderListItem.json: -------------------------------------------------------------------------------- 1 | {"_":"/* ============================= */\n/* Base theme */\n/* ============================= */\n/* ========================================== */\n/* CSS for control sap.m/GroupHeaderListItem */\n/* Base theme */\n/* ========================================== */\n.sapMLIB.sapMGHLI {\n padding-top: 1rem;\n height: 3rem;\n line-height: 2rem;\n font-size: 0.875rem;\n font-weight: normal;\n color: #147575;\n background: #ffffff;\n border-bottom: 1px solid #cccccc;\n -webkit-align-items: flex-end;\n align-items: flex-end;\n}\n.sapMLIB.sapMLIBTransparent.sapMGHLI {\n background: rgba(255, 255, 255, 0);\n}\n.sapMGHLI .sapMLIBUnread {\n display: none;\n}\n.sapMGHLIUpperCase {\n text-transform: uppercase;\n}\n.sapMGHLI > .sapMLIBContent {\n display: -webkit-box;\n display: flex;\n -webkit-box-align: center;\n align-items: center;\n}\n.sapMGHLITitle {\n display: block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.sapMGHLI.sapMLIBActive.sapMLIB {\n color: #fff;\n background: #427cac;\n}\n/* Compact size */\n.sapUiSizeCompact .sapMGHLI {\n height: 2rem;\n}\n/* ============================= */\n/* Global Belize parameters */\n/* ============================= */\n/* ===================================== */\n/* Quick Theming */\n/* ===================================== */\n/*\n UX COLOR SET\n*/\n/* PRIMARY COLORS */\n/* ACCENT COLORS */\n/* Semantic Background Colors */\n/* Semantic Border Colors */\n/* Semantic Foreground Elements */\n/* Semantic Text */\n/* Semantic Foreground Colors */\n/* ===================================== */\n/* Expert Theming */\n/* ===================================== */\n"} -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_fiori_3/TableCell.css: -------------------------------------------------------------------------------- 1 | /* ============================= */ 2 | /* Base theme */ 3 | /* ============================= */ 4 | /* ============================= */ 5 | /* Global Base parameters */ 6 | /* ============================= */ 7 | /* =========================== */ 8 | /* Global CSS for 'base' theme */ 9 | /* =========================== */ 10 | /* ============================= */ 11 | /* Global Belize parameters */ 12 | /* ============================= */ 13 | /* ===================================== */ 14 | /* Quick Theming */ 15 | /* ===================================== */ 16 | /* 17 | UX COLOR SET 18 | */ 19 | /* PRIMARY COLORS */ 20 | /* ACCENT COLORS */ 21 | /* Semantic Background Colors */ 22 | /* Semantic Border Colors */ 23 | /* Semantic Foreground Elements */ 24 | /* Semantic Text */ 25 | /* Semantic Foreground Colors */ 26 | /* ===================================== */ 27 | /* Expert Theming */ 28 | /* ===================================== */ 29 | /*darken(@sapBrandColor, 10); // no contrast function allowed because background can be gradient*/ 30 | /* darken(@sapButton_Background, 30); //should be #ababab */ 31 | /* contrast(@sapButton_Background, darken(@sapHighlightColor, 10), @sapContent_ContrastTextColor, @sapContent_ContrastTextThreshold); //should be #346187 */ 32 | .sapWCTableCell { 33 | overflow: hidden; 34 | padding: .25rem .0625rem; 35 | font-family: "72", Arial, Helvetica, sans-serif; 36 | font-size: 0.875rem; 37 | height: 100%; 38 | box-sizing: border-box; 39 | } 40 | .sapWCTableCellWithBorder { 41 | border-bottom: 1px solid #E5E5E5; 42 | } 43 | .sapWCTableCellFirst { 44 | padding-left: 1rem; 45 | } 46 | .sapWCTableCellLast { 47 | padding-right: 1rem; 48 | } 49 | -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_belize/TableRow.css: -------------------------------------------------------------------------------- 1 | /* ============================= */ 2 | /* Base theme */ 3 | /* ============================= */ 4 | /* ============================= */ 5 | /* Global Base parameters */ 6 | /* ============================= */ 7 | /* =========================== */ 8 | /* Global CSS for 'base' theme */ 9 | /* =========================== */ 10 | /* ============================= */ 11 | /* Base theme */ 12 | /* ============================= */ 13 | .sapWCTableRow { 14 | display: grid; 15 | align-items: center; 16 | background-color: #ffffff; 17 | box-sizing: border-box; 18 | } 19 | .sapWCTableRow:focus { 20 | outline: 1px solid #000; 21 | outline-offset: -3px; 22 | outline-style: dotted; 23 | } 24 | .sapWCTablePopinRow { 25 | padding: 0.25rem 1rem; 26 | grid-column-start: 1; 27 | display: flex; 28 | flex-direction: column; 29 | align-items: flex-start; 30 | } 31 | .sapWCTablePopinTitle { 32 | color: #333333; 33 | } 34 | .sapMWCTableRowCellContainer { 35 | height: 100%; 36 | } 37 | .sapWCTableRowWithBorder { 38 | border-bottom: 1px solid #e5e5e5; 39 | } 40 | /* ============================= */ 41 | /* Global Belize parameters */ 42 | /* ============================= */ 43 | /* ===================================== */ 44 | /* Quick Theming */ 45 | /* ===================================== */ 46 | /* 47 | UX COLOR SET 48 | */ 49 | /* PRIMARY COLORS */ 50 | /* ACCENT COLORS */ 51 | /* Semantic Background Colors */ 52 | /* Semantic Border Colors */ 53 | /* Semantic Foreground Elements */ 54 | /* Semantic Text */ 55 | /* Semantic Foreground Colors */ 56 | /* ===================================== */ 57 | /* Expert Theming */ 58 | /* ===================================== */ 59 | -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_fiori_3/Dialog.json: -------------------------------------------------------------------------------- 1 | {"_":"/* ============================= */\n/* Base theme */\n/* ============================= */\n/* ============================= */\n/* Global Base parameters */\n/* ============================= */\n/* =========================== */\n/* Global CSS for 'base' theme */\n/* =========================== */\n.sapMDialogParent {\n position: fixed;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.sapMDialog {\n display: flex;\n flex-direction: column;\n}\n.sapMDialogSection {\n flex-grow: 1;\n display: flex;\n}\n.sapMDialog.sapMDialogStretched {\n top: 5%;\n bottom: 5%;\n left: 3.5%;\n right: 3.5%;\n min-width: 0;\n min-height: 0;\n}\n.sap-phone .sapMDialog.sapMDialogStretched {\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n box-shadow: none;\n border-radius: 0;\n}\n/* ============================= */\n/* Global Belize parameters */\n/* ============================= */\n/* ===================================== */\n/* Quick Theming */\n/* ===================================== */\n/*\n UX COLOR SET\n*/\n/* PRIMARY COLORS */\n/* ACCENT COLORS */\n/* Semantic Background Colors */\n/* Semantic Border Colors */\n/* Semantic Foreground Elements */\n/* Semantic Text */\n/* Semantic Foreground Colors */\n/* ===================================== */\n/* Expert Theming */\n/* ===================================== */\n/*darken(@sapBrandColor, 10); // no contrast function allowed because background can be gradient*/\n/* darken(@sapButton_Background, 30); //should be #ababab */\n/* contrast(@sapButton_Background, darken(@sapHighlightColor, 10), @sapContent_ContrastTextColor, @sapContent_ContrastTextThreshold); //should be #346187 */\n"} -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_fiori_3/InputIcon.css: -------------------------------------------------------------------------------- 1 | /* ============================= */ 2 | /* Base theme */ 3 | /* ============================= */ 4 | /* ============================= */ 5 | /* Global Base parameters */ 6 | /* ============================= */ 7 | /* =========================== */ 8 | /* Global CSS for 'base' theme */ 9 | /* =========================== */ 10 | /* ============================= */ 11 | /* Base theme */ 12 | /* ============================= */ 13 | .sapUiIcon.sapMInputBaseIcon { 14 | width: 2.375rem; 15 | min-width: 2.375rem; 16 | height: 100%; 17 | line-height: 2.375rem; 18 | vertical-align: middle; 19 | cursor: pointer; 20 | background: transparent; 21 | -webkit-user-select: none; 22 | -moz-user-select: none; 23 | -ms-user-select: none; 24 | user-select: none; 25 | } 26 | /* ============================= */ 27 | /* Global Belize parameters */ 28 | /* ============================= */ 29 | /* ===================================== */ 30 | /* Quick Theming */ 31 | /* ===================================== */ 32 | /* 33 | UX COLOR SET 34 | */ 35 | /* PRIMARY COLORS */ 36 | /* ACCENT COLORS */ 37 | /* Semantic Background Colors */ 38 | /* Semantic Border Colors */ 39 | /* Semantic Foreground Elements */ 40 | /* Semantic Text */ 41 | /* Semantic Foreground Colors */ 42 | /* ===================================== */ 43 | /* Expert Theming */ 44 | /* ===================================== */ 45 | /*darken(@sapBrandColor, 10); // no contrast function allowed because background can be gradient*/ 46 | /* darken(@sapButton_Background, 30); //should be #ababab */ 47 | /* contrast(@sapButton_Background, darken(@sapHighlightColor, 10), @sapContent_ContrastTextColor, @sapContent_ContrastTextThreshold); //should be #346187 */ 48 | -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_fiori_3/TableRow.json: -------------------------------------------------------------------------------- 1 | {"_":"/* ============================= */\n/* Base theme */\n/* ============================= */\n/* ============================= */\n/* Global Base parameters */\n/* ============================= */\n/* =========================== */\n/* Global CSS for 'base' theme */\n/* =========================== */\n/* ============================= */\n/* Base theme */\n/* ============================= */\n.sapWCTableRow {\n display: grid;\n align-items: center;\n background-color: #fff;\n box-sizing: border-box;\n}\n.sapWCTableRow:focus {\n outline: 1px solid #000;\n outline-offset: -3px;\n outline-style: dotted;\n}\n.sapWCTablePopinRow {\n padding: 0.25rem 1rem;\n grid-column-start: 1;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n}\n.sapWCTablePopinTitle {\n color: #32363a;\n}\n.sapMWCTableRowCellContainer {\n height: 100%;\n}\n.sapWCTableRowWithBorder {\n border-bottom: 1px solid #ededed;\n}\n/* ============================= */\n/* Global Belize parameters */\n/* ============================= */\n/* ===================================== */\n/* Quick Theming */\n/* ===================================== */\n/*\n UX COLOR SET\n*/\n/* PRIMARY COLORS */\n/* ACCENT COLORS */\n/* Semantic Background Colors */\n/* Semantic Border Colors */\n/* Semantic Foreground Elements */\n/* Semantic Text */\n/* Semantic Foreground Colors */\n/* ===================================== */\n/* Expert Theming */\n/* ===================================== */\n/*darken(@sapBrandColor, 10); // no contrast function allowed because background can be gradient*/\n/* darken(@sapButton_Background, 30); //should be #ababab */\n/* contrast(@sapButton_Background, darken(@sapHighlightColor, 10), @sapContent_ContrastTextColor, @sapContent_ContrastTextThreshold); //should be #346187 */\n"} -------------------------------------------------------------------------------- /src/app/header/header.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, ViewChild, ElementRef, Input } from '@angular/core'; 2 | import {setTheme } from '@ui5/webcomponents-base/dist/config/Theme'; 3 | 4 | 5 | @Component({ 6 | selector: 'app-header', 7 | templateUrl: './header.component.html', 8 | styleUrls: ['./header.component.css'] 9 | }) 10 | 11 | export class HeaderComponent implements OnInit { 12 | @Input() selectionChange; 13 | @ViewChild('themeSettingsPopover') themeSettingsPopover: ElementRef; 14 | @ViewChild('profileSettingsPopover') profileSettingsPopover: ElementRef; 15 | 16 | constructor() { } 17 | 18 | ngOnInit() { 19 | } 20 | 21 | handleThemeSettingsToggle(event) { 22 | this.themeSettingsPopover.nativeElement.showAt(event.detail.targetRef); 23 | } 24 | 25 | handleThemeChange(event) { 26 | setTheme(event.detail.selectedItems[0].getAttribute('data-theme')); 27 | this.themeSettingsPopover.nativeElement.close(); 28 | } 29 | 30 | handleProfileClick(event) { 31 | this.profileSettingsPopover.nativeElement.showAt(event.detail.targetRef); 32 | } 33 | 34 | handleProfileSettingsSelect(event) { 35 | const selectedKey = event.detail.item.getAttribute('data-key'); 36 | if (selectedKey === 'settings') { 37 | window['settings-dialog'].show(event.detail.targetRef); 38 | } else if (selectedKey === 'help') { 39 | window['help-dialog'].show(event.detail.targetRef); 40 | } 41 | } 42 | 43 | handleRtlSwitchChange(event) { 44 | document.body.dir = event.target.checked ? 'rtl' : 'ltr'; 45 | } 46 | 47 | handleContentDensitySwitchChange(event) { 48 | if (event.target.checked) { 49 | document.body.classList.add('ui5-content-density-compact'); 50 | } else { 51 | document.body.classList.remove('ui5-content-density-compact'); 52 | } 53 | } 54 | 55 | handleSettingsDialogCloseButtonClick(event) { 56 | window['settings-dialog'].close(); 57 | } 58 | 59 | handleHelpDialogCloseButtonClick(event) { 60 | window['help-dialog'].close(); 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_belize/GroupHeaderListItem.css: -------------------------------------------------------------------------------- 1 | /* ============================= */ 2 | /* Base theme */ 3 | /* ============================= */ 4 | /* ========================================== */ 5 | /* CSS for control sap.m/GroupHeaderListItem */ 6 | /* Base theme */ 7 | /* ========================================== */ 8 | .sapMLIB.sapMGHLI { 9 | padding-top: 1rem; 10 | height: 3rem; 11 | line-height: 2rem; 12 | font-size: 0.875rem; 13 | font-weight: normal; 14 | color: #147575; 15 | background: #ffffff; 16 | border-bottom: 1px solid #cccccc; 17 | -webkit-align-items: flex-end; 18 | align-items: flex-end; 19 | } 20 | .sapMLIB.sapMLIBTransparent.sapMGHLI { 21 | background: rgba(255, 255, 255, 0); 22 | } 23 | .sapMGHLI .sapMLIBUnread { 24 | display: none; 25 | } 26 | .sapMGHLIUpperCase { 27 | text-transform: uppercase; 28 | } 29 | .sapMGHLI > .sapMLIBContent { 30 | display: -webkit-box; 31 | display: flex; 32 | -webkit-box-align: center; 33 | align-items: center; 34 | } 35 | .sapMGHLITitle { 36 | display: block; 37 | overflow: hidden; 38 | text-overflow: ellipsis; 39 | white-space: nowrap; 40 | } 41 | .sapMGHLI.sapMLIBActive.sapMLIB { 42 | color: #fff; 43 | background: #427cac; 44 | } 45 | /* Compact size */ 46 | .sapUiSizeCompact .sapMGHLI { 47 | height: 2rem; 48 | } 49 | /* ============================= */ 50 | /* Global Belize parameters */ 51 | /* ============================= */ 52 | /* ===================================== */ 53 | /* Quick Theming */ 54 | /* ===================================== */ 55 | /* 56 | UX COLOR SET 57 | */ 58 | /* PRIMARY COLORS */ 59 | /* ACCENT COLORS */ 60 | /* Semantic Background Colors */ 61 | /* Semantic Border Colors */ 62 | /* Semantic Foreground Elements */ 63 | /* Semantic Text */ 64 | /* Semantic Foreground Colors */ 65 | /* ===================================== */ 66 | /* Expert Theming */ 67 | /* ===================================== */ 68 | -------------------------------------------------------------------------------- /.reuse/dep5: -------------------------------------------------------------------------------- 1 | Format: https://www.debian.org/doc/packaging-manuals/copyright-format/1.0/ 2 | Upstream-Name: UI5 WebComponents Sample with Angular 3 | Upstream-Contact: SAP OpenUI5 4 | Source: https://github.com/UI5/sample-webcomponents-angular 5 | Disclaimer: The code in this project may include calls to APIs (“API Calls”) of 6 | SAP or third-party products or services developed outside of this project 7 | (“External Products”). 8 | “APIs” means application programming interfaces, as well as their respective 9 | specifications and implementing code that allows software to communicate with 10 | other software. 11 | API Calls to External Products are not licensed under the open source license 12 | that governs this project. The use of such API Calls and related External 13 | Products are subject to applicable additional agreements with the relevant 14 | provider of the External Products. In no event shall the open source license 15 | that governs this project grant any rights in or to any External Products,or 16 | alter, expand or supersede any terms of the applicable additional agreements. 17 | If you have a valid license agreement with SAP for the use of a particular SAP 18 | External Product, then you may make use of any API Calls included in this 19 | project’s code for that SAP External Product, subject to the terms of such 20 | license agreement. If you do not have a valid license agreement for the use of 21 | a particular SAP External Product, then you may only make use of any API Calls 22 | in this project for that SAP External Product for your internal, non-productive 23 | and non-commercial test and evaluation of such API Calls. Nothing herein grants 24 | you any rights to use or access any SAP External Product, or provide any third 25 | parties the right to use of access any SAP External Product, through API Calls. 26 | 27 | 28 | Files: * 29 | Copyright: 2020 SAP SE or an SAP affiliate company and OpenUI5 contributors 30 | License: Apache-2.0 31 | 32 | Files: /deploy/deploy.sh 33 | Copyright: 2018 Domenic Denicola 34 | License: MIT -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_fiori_3/Dialog.css: -------------------------------------------------------------------------------- 1 | /* ============================= */ 2 | /* Base theme */ 3 | /* ============================= */ 4 | /* ============================= */ 5 | /* Global Base parameters */ 6 | /* ============================= */ 7 | /* =========================== */ 8 | /* Global CSS for 'base' theme */ 9 | /* =========================== */ 10 | .sapMDialogParent { 11 | position: fixed; 12 | left: 0; 13 | right: 0; 14 | top: 0; 15 | bottom: 0; 16 | display: flex; 17 | justify-content: center; 18 | align-items: center; 19 | } 20 | .sapMDialog { 21 | display: flex; 22 | flex-direction: column; 23 | } 24 | .sapMDialogSection { 25 | flex-grow: 1; 26 | display: flex; 27 | } 28 | .sapMDialog.sapMDialogStretched { 29 | top: 5%; 30 | bottom: 5%; 31 | left: 3.5%; 32 | right: 3.5%; 33 | min-width: 0; 34 | min-height: 0; 35 | } 36 | .sap-phone .sapMDialog.sapMDialogStretched { 37 | top: 0; 38 | bottom: 0; 39 | left: 0; 40 | right: 0; 41 | box-shadow: none; 42 | border-radius: 0; 43 | } 44 | /* ============================= */ 45 | /* Global Belize parameters */ 46 | /* ============================= */ 47 | /* ===================================== */ 48 | /* Quick Theming */ 49 | /* ===================================== */ 50 | /* 51 | UX COLOR SET 52 | */ 53 | /* PRIMARY COLORS */ 54 | /* ACCENT COLORS */ 55 | /* Semantic Background Colors */ 56 | /* Semantic Border Colors */ 57 | /* Semantic Foreground Elements */ 58 | /* Semantic Text */ 59 | /* Semantic Foreground Colors */ 60 | /* ===================================== */ 61 | /* Expert Theming */ 62 | /* ===================================== */ 63 | /*darken(@sapBrandColor, 10); // no contrast function allowed because background can be gradient*/ 64 | /* darken(@sapButton_Background, 30); //should be #ababab */ 65 | /* contrast(@sapButton_Background, darken(@sapHighlightColor, 10), @sapContent_ContrastTextColor, @sapContent_ContrastTextThreshold); //should be #346187 */ 66 | -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_fiori_3/GroupHeaderListItem.json: -------------------------------------------------------------------------------- 1 | {"_":"/* ============================= */\n/* Base theme */\n/* ============================= */\n/* ========================================== */\n/* CSS for control sap.m/GroupHeaderListItem */\n/* Base theme */\n/* ========================================== */\n.sapMLIB.sapMGHLI {\n padding-top: 1rem;\n height: 3rem;\n line-height: 2rem;\n font-size: 0.875rem;\n font-weight: normal;\n color: #32363a;\n background: #fff;\n border-bottom: 1px solid #ededed;\n -webkit-align-items: flex-end;\n align-items: flex-end;\n}\n.sapMLIB.sapMLIBTransparent.sapMGHLI {\n background: rgba(255, 255, 255, 0);\n}\n.sapMGHLI .sapMLIBUnread {\n display: none;\n}\n.sapMGHLIUpperCase {\n text-transform: uppercase;\n}\n.sapMGHLI > .sapMLIBContent {\n display: -webkit-box;\n display: flex;\n -webkit-box-align: center;\n align-items: center;\n}\n.sapMGHLITitle {\n display: block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.sapMGHLI.sapMLIBActive.sapMLIB {\n color: #fff;\n background: #0854a0;\n}\n/* Compact size */\n.sapUiSizeCompact .sapMGHLI {\n height: 2rem;\n}\n/* ============================= */\n/* Global Belize parameters */\n/* ============================= */\n/* ===================================== */\n/* Quick Theming */\n/* ===================================== */\n/*\n UX COLOR SET\n*/\n/* PRIMARY COLORS */\n/* ACCENT COLORS */\n/* Semantic Background Colors */\n/* Semantic Border Colors */\n/* Semantic Foreground Elements */\n/* Semantic Text */\n/* Semantic Foreground Colors */\n/* ===================================== */\n/* Expert Theming */\n/* ===================================== */\n/*darken(@sapBrandColor, 10); // no contrast function allowed because background can be gradient*/\n/* darken(@sapButton_Background, 30); //should be #ababab */\n/* contrast(@sapButton_Background, darken(@sapHighlightColor, 10), @sapContent_ContrastTextColor, @sapContent_ContrastTextThreshold); //should be #346187 */\n"} -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_fiori_3/TableRow.css: -------------------------------------------------------------------------------- 1 | /* ============================= */ 2 | /* Base theme */ 3 | /* ============================= */ 4 | /* ============================= */ 5 | /* Global Base parameters */ 6 | /* ============================= */ 7 | /* =========================== */ 8 | /* Global CSS for 'base' theme */ 9 | /* =========================== */ 10 | /* ============================= */ 11 | /* Base theme */ 12 | /* ============================= */ 13 | .sapWCTableRow { 14 | display: grid; 15 | align-items: center; 16 | background-color: #fff; 17 | box-sizing: border-box; 18 | } 19 | .sapWCTableRow:focus { 20 | outline: 1px solid #000; 21 | outline-offset: -3px; 22 | outline-style: dotted; 23 | } 24 | .sapWCTablePopinRow { 25 | padding: 0.25rem 1rem; 26 | grid-column-start: 1; 27 | display: flex; 28 | flex-direction: column; 29 | align-items: flex-start; 30 | } 31 | .sapWCTablePopinTitle { 32 | color: #32363a; 33 | } 34 | .sapMWCTableRowCellContainer { 35 | height: 100%; 36 | } 37 | .sapWCTableRowWithBorder { 38 | border-bottom: 1px solid #ededed; 39 | } 40 | /* ============================= */ 41 | /* Global Belize parameters */ 42 | /* ============================= */ 43 | /* ===================================== */ 44 | /* Quick Theming */ 45 | /* ===================================== */ 46 | /* 47 | UX COLOR SET 48 | */ 49 | /* PRIMARY COLORS */ 50 | /* ACCENT COLORS */ 51 | /* Semantic Background Colors */ 52 | /* Semantic Border Colors */ 53 | /* Semantic Foreground Elements */ 54 | /* Semantic Text */ 55 | /* Semantic Foreground Colors */ 56 | /* ===================================== */ 57 | /* Expert Theming */ 58 | /* ===================================== */ 59 | /*darken(@sapBrandColor, 10); // no contrast function allowed because background can be gradient*/ 60 | /* darken(@sapButton_Background, 30); //should be #ababab */ 61 | /* contrast(@sapButton_Background, darken(@sapHighlightColor, 10), @sapContent_ContrastTextColor, @sapContent_ContrastTextThreshold); //should be #346187 */ 62 | -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_belize/ListItem.json: -------------------------------------------------------------------------------- 1 | {"_":"/* ============================= */\n/* Base theme */\n/* ============================= */\n/* ============================= */\n/* Global Base parameters */\n/* ============================= */\n/* =========================== */\n/* Global CSS for 'base' theme */\n/* =========================== */\n/* ======================================= */\n/* CSS for ListItem */\n/* Base theme */\n/* ======================================= */\n.sapMSLI.sapMLIBActive .sapMSLITitle {\n color: #fff;\n}\n.sapMSLI .sapMSLITitle {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: 1rem;\n height: 3rem;\n line-height: 3rem;\n color: #333333;\n}\n.sapMSLI .sapMSLIImg {\n margin: 0.5rem 0.75rem 0.5rem 0rem;\n height: 2rem;\n width: 2rem;\n}\n.sapMSLI .sapMLIBContent {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-box-flex: 1;\n flex: auto;\n display: -webkit-box;\n display: flex;\n -webkit-box-align: center;\n align-items: center;\n}\n/* Compact size */\n.sapUiSizeCompact .sapMSLI {\n height: 2rem;\n}\n.sapUiSizeCompact .sapMSLI .sapMSLITitle {\n height: 2rem;\n line-height: 2rem;\n font-size: 0.875rem;\n}\n.sapUiSizeCompact .sapMSLI .sapMSLIImg {\n margin-top: 0.55rem;\n height: 1.75rem;\n width: 1.75rem;\n}\n/* ============================= */\n/* Global Belize parameters */\n/* ============================= */\n/* ===================================== */\n/* Quick Theming */\n/* ===================================== */\n/*\n UX COLOR SET\n*/\n/* PRIMARY COLORS */\n/* ACCENT COLORS */\n/* Semantic Background Colors */\n/* Semantic Border Colors */\n/* Semantic Foreground Elements */\n/* Semantic Text */\n/* Semantic Foreground Colors */\n/* ===================================== */\n/* Expert Theming */\n/* ===================================== */\n/* ======================================= */\n/* CSS for ListItem */\n/* Belize theme */\n/* ======================================= */\n"} -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; 3 | 4 | import { AppComponent } from './app.component'; 5 | import { HeaderComponent } from './header/header.component'; 6 | import { UserInputComponent } from './user-input/user-input.component'; 7 | import { ListComponent } from './list/list.component'; 8 | 9 | // UI5 Web Components used 10 | import {setTheme } from '@ui5/webcomponents-base/dist/config/Theme'; 11 | import '@ui5/webcomponents-base/dist/features/F6Navigation'; 12 | import '@ui5/webcomponents/dist/Button'; 13 | import '@ui5/webcomponents/dist/Title'; 14 | import '@ui5/webcomponents/dist/Input'; 15 | import '@ui5/webcomponents/dist/DatePicker'; 16 | import '@ui5/webcomponents/dist/List'; 17 | import '@ui5/webcomponents/dist/CustomListItem'; 18 | import '@ui5/webcomponents/dist/Panel'; 19 | import '@ui5/webcomponents/dist/Dialog'; 20 | import '@ui5/webcomponents/dist/Label'; 21 | import '@ui5/webcomponents/dist/Popover'; 22 | import '@ui5/webcomponents/dist/TextArea'; 23 | import '@ui5/webcomponents/dist/StandardListItem'; 24 | import '@ui5/webcomponents/dist/Tab'; 25 | import '@ui5/webcomponents/dist/TabContainer'; 26 | import '@ui5/webcomponents-fiori/dist/ShellBar'; 27 | import '@ui5/webcomponents-fiori/dist/ShellBarItem'; 28 | import '@ui5/webcomponents/dist/Switch'; 29 | import '@ui5/webcomponents-icons/dist/palette.js'; 30 | import '@ui5/webcomponents-fiori/dist/Assets'; 31 | import '@ui5/webcomponents-icons/dist/settings.js'; 32 | import '@ui5/webcomponents-icons/dist/sys-help.js'; 33 | import '@ui5/webcomponents-icons/dist/log.js'; 34 | import '@ui5/webcomponents-icons/dist/account.js'; 35 | import '@ui5/webcomponents-icons/dist/private.js'; 36 | import '@ui5/webcomponents-icons/dist/loan.js'; 37 | import '@ui5/webcomponents-icons/dist/globe.js'; 38 | setTheme('sap_horizon'); 39 | @NgModule({ 40 | declarations: [ 41 | AppComponent, 42 | HeaderComponent, 43 | ListComponent, 44 | UserInputComponent 45 | ], 46 | schemas: [ CUSTOM_ELEMENTS_SCHEMA ], 47 | imports: [ 48 | BrowserModule 49 | ], 50 | providers: [], 51 | bootstrap: [AppComponent] 52 | }) 53 | export class AppModule { } 54 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ui5-webcomponents-sample-angular", 3 | "version": "0.7.0", 4 | "browserslist": [ 5 | "defaults", 6 | "not IE 11" 7 | ], 8 | "scripts": { 9 | "ng": "ng", 10 | "start": "ng serve --extra-webpack-config webpack.partial.js", 11 | "build": "ng build --extra-webpack-config webpack.partial.js", 12 | "test": "ng test", 13 | "lint": "ng lint", 14 | "lint:commit": "commitlint -e", 15 | "e2e": "ng e2e", 16 | "hooks:pre-push": "npm run lint:commit", 17 | "prepare": "husky install" 18 | }, 19 | "private": true, 20 | "dependencies": { 21 | "@angular/animations": "~12.2.6", 22 | "@angular/common": "~12.2.6", 23 | "@angular/compiler": "~12.2.6", 24 | "@angular/core": "~12.2.6", 25 | "@angular/forms": "~12.2.6", 26 | "@angular/platform-browser": "~12.2.6", 27 | "@angular/platform-browser-dynamic": "~12.2.6", 28 | "@angular/router": "~12.2.6", 29 | "@ui5/webcomponents": "^1.4.0", 30 | "@ui5/webcomponents-base": "^1.4.0", 31 | "@ui5/webcomponents-fiori": "^1.4.0", 32 | "@ui5/webcomponents-icons": "^1.4.0", 33 | "core-js": "^2.5.4", 34 | "ngx-build-plus": "^12.2.0", 35 | "rxjs": "~6.3.3", 36 | "tslib": "^1.9.0", 37 | "webpack-dev-server": "^4.2.1", 38 | "zone.js": "^0.11.4" 39 | }, 40 | "devDependencies": { 41 | "@angular-builders/dev-server": "^7.3.1", 42 | "@angular-devkit/build-angular": "^12.2.6", 43 | "@angular/cli": "~12.2.6", 44 | "@angular/compiler-cli": "~12.2.6", 45 | "@angular/language-service": "~12.2.6", 46 | "@commitlint/cli": "^17.0.2", 47 | "@commitlint/config-conventional": "^17.0.2", 48 | "@types/jasmine": "~3.3.7", 49 | "@types/jasminewd2": "~2.0.3", 50 | "@types/node": "~10.12.18", 51 | "codelyzer": "~4.5.0", 52 | "husky": "^8.0.0", 53 | "jasmine-core": "~3.3.0", 54 | "jasmine-spec-reporter": "~4.2.1", 55 | "karma": "~6.3.4", 56 | "karma-chrome-launcher": "~2.2.0", 57 | "karma-coverage-istanbul-reporter": "~2.0.1", 58 | "karma-jasmine": "~2.0.1", 59 | "karma-jasmine-html-reporter": "^1.4.0", 60 | "protractor": "~7.0.0", 61 | "ts-node": "~7.0.0", 62 | "tslint": "~6.1.3", 63 | "typescript": "~4.3.5" 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_fiori_3/GroupHeaderListItem.css: -------------------------------------------------------------------------------- 1 | /* ============================= */ 2 | /* Base theme */ 3 | /* ============================= */ 4 | /* ========================================== */ 5 | /* CSS for control sap.m/GroupHeaderListItem */ 6 | /* Base theme */ 7 | /* ========================================== */ 8 | .sapMLIB.sapMGHLI { 9 | padding-top: 1rem; 10 | height: 3rem; 11 | line-height: 2rem; 12 | font-size: 0.875rem; 13 | font-weight: normal; 14 | color: #32363a; 15 | background: #fff; 16 | border-bottom: 1px solid #ededed; 17 | -webkit-align-items: flex-end; 18 | align-items: flex-end; 19 | } 20 | .sapMLIB.sapMLIBTransparent.sapMGHLI { 21 | background: rgba(255, 255, 255, 0); 22 | } 23 | .sapMGHLI .sapMLIBUnread { 24 | display: none; 25 | } 26 | .sapMGHLIUpperCase { 27 | text-transform: uppercase; 28 | } 29 | .sapMGHLI > .sapMLIBContent { 30 | display: -webkit-box; 31 | display: flex; 32 | -webkit-box-align: center; 33 | align-items: center; 34 | } 35 | .sapMGHLITitle { 36 | display: block; 37 | overflow: hidden; 38 | text-overflow: ellipsis; 39 | white-space: nowrap; 40 | } 41 | .sapMGHLI.sapMLIBActive.sapMLIB { 42 | color: #fff; 43 | background: #0854a0; 44 | } 45 | /* Compact size */ 46 | .sapUiSizeCompact .sapMGHLI { 47 | height: 2rem; 48 | } 49 | /* ============================= */ 50 | /* Global Belize parameters */ 51 | /* ============================= */ 52 | /* ===================================== */ 53 | /* Quick Theming */ 54 | /* ===================================== */ 55 | /* 56 | UX COLOR SET 57 | */ 58 | /* PRIMARY COLORS */ 59 | /* ACCENT COLORS */ 60 | /* Semantic Background Colors */ 61 | /* Semantic Border Colors */ 62 | /* Semantic Foreground Elements */ 63 | /* Semantic Text */ 64 | /* Semantic Foreground Colors */ 65 | /* ===================================== */ 66 | /* Expert Theming */ 67 | /* ===================================== */ 68 | /*darken(@sapBrandColor, 10); // no contrast function allowed because background can be gradient*/ 69 | /* darken(@sapButton_Background, 30); //should be #ababab */ 70 | /* contrast(@sapButton_Background, darken(@sapHighlightColor, 10), @sapContent_ContrastTextColor, @sapContent_ContrastTextThreshold); //should be #346187 */ 71 | -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_belize/Popup.json: -------------------------------------------------------------------------------- 1 | {"_":"/* ============================= */\n/* Base theme */\n/* ============================= */\n/* ============================= */\n/* Global Base parameters */\n/* ============================= */\n/* =========================== */\n/* Global CSS for 'base' theme */\n/* =========================== */\n.sapMPopupFrame {\n width: 0;\n height: 0;\n display: none;\n visibility: visible;\n}\n.sapMPopupFrameOpen {\n display: inline;\n}\n.sapMPopup {\n color: #333333;\n min-width: 6.25rem;\n box-sizing: border-box;\n outline: none;\n max-width: 100%;\n max-height: 100%;\n background: #ffffff;\n border: none;\n box-shadow: 0 0.625rem 1.875rem 0 rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.15);\n border-radius: 0.25rem;\n min-height: 2rem;\n}\n.sapMPopup .sapMPopupHeader {\n margin: 0;\n color: #666666;\n font-size: 1rem;\n font-weight: 400;\n font-family: \"72\", Arial, Helvetica, sans-serif;\n border-bottom: 1px solid #ebebeb;\n}\n.sapMPopup .sapMPopupHeaderText {\n padding: 0 0.25rem;\n text-align: center;\n height: 3rem;\n line-height: 3rem;\n}\n.sapMPopup .sapMPopupFooter {\n font-size: 1rem;\n font-weight: 400;\n font-family: \"72\", Arial, Helvetica, sans-serif;\n background: #ffffff;\n border-top: 1px solid #ebebeb;\n color: #333333;\n}\n.sapMPopup .sapMPopupContent {\n overflow: auto;\n position: relative;\n box-sizing: border-box;\n background-color: #ffffff;\n}\n.sapMPopup .sapMPopupScroll {\n vertical-align: middle;\n box-sizing: border-box;\n padding: 0.4375em;\n}\n.sapUiBLy {\n background-color: #000000;\n opacity: 0.6;\n filter: alpha(opacity=60);\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n position: fixed;\n outline: 0 none;\n}\n.sapMPopupBlockLayer {\n visibility: visible;\n}\n.sapMPopupBlockLayerHidden {\n display: none;\n}\n/* ============================= */\n/* Global Belize parameters */\n/* ============================= */\n/* ===================================== */\n/* Quick Theming */\n/* ===================================== */\n/*\n UX COLOR SET\n*/\n/* PRIMARY COLORS */\n/* ACCENT COLORS */\n/* Semantic Background Colors */\n/* Semantic Border Colors */\n/* Semantic Foreground Elements */\n/* Semantic Text */\n/* Semantic Foreground Colors */\n/* ===================================== */\n/* Expert Theming */\n/* ===================================== */\n"} -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_belize/ListItem.css: -------------------------------------------------------------------------------- 1 | /* ============================= */ 2 | /* Base theme */ 3 | /* ============================= */ 4 | /* ============================= */ 5 | /* Global Base parameters */ 6 | /* ============================= */ 7 | /* =========================== */ 8 | /* Global CSS for 'base' theme */ 9 | /* =========================== */ 10 | /* ======================================= */ 11 | /* CSS for ListItem */ 12 | /* Base theme */ 13 | /* ======================================= */ 14 | .sapMSLI.sapMLIBActive .sapMSLITitle { 15 | color: #fff; 16 | } 17 | .sapMSLI .sapMSLITitle { 18 | white-space: nowrap; 19 | overflow: hidden; 20 | text-overflow: ellipsis; 21 | font-size: 1rem; 22 | height: 3rem; 23 | line-height: 3rem; 24 | color: #333333; 25 | } 26 | .sapMSLI .sapMSLIImg { 27 | margin: 0.5rem 0.75rem 0.5rem 0rem; 28 | height: 2rem; 29 | width: 2rem; 30 | } 31 | .sapMSLI .sapMLIBContent { 32 | white-space: nowrap; 33 | overflow: hidden; 34 | text-overflow: ellipsis; 35 | -webkit-box-flex: 1; 36 | flex: auto; 37 | display: -webkit-box; 38 | display: flex; 39 | -webkit-box-align: center; 40 | align-items: center; 41 | } 42 | /* Compact size */ 43 | .sapUiSizeCompact .sapMSLI { 44 | height: 2rem; 45 | } 46 | .sapUiSizeCompact .sapMSLI .sapMSLITitle { 47 | height: 2rem; 48 | line-height: 2rem; 49 | font-size: 0.875rem; 50 | } 51 | .sapUiSizeCompact .sapMSLI .sapMSLIImg { 52 | margin-top: 0.55rem; 53 | height: 1.75rem; 54 | width: 1.75rem; 55 | } 56 | /* ============================= */ 57 | /* Global Belize parameters */ 58 | /* ============================= */ 59 | /* ===================================== */ 60 | /* Quick Theming */ 61 | /* ===================================== */ 62 | /* 63 | UX COLOR SET 64 | */ 65 | /* PRIMARY COLORS */ 66 | /* ACCENT COLORS */ 67 | /* Semantic Background Colors */ 68 | /* Semantic Border Colors */ 69 | /* Semantic Foreground Elements */ 70 | /* Semantic Text */ 71 | /* Semantic Foreground Colors */ 72 | /* ===================================== */ 73 | /* Expert Theming */ 74 | /* ===================================== */ 75 | /* ======================================= */ 76 | /* CSS for ListItem */ 77 | /* Belize theme */ 78 | /* ======================================= */ 79 | -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_fiori_3/ListItem.json: -------------------------------------------------------------------------------- 1 | {"_":"/* ============================= */\n/* Base theme */\n/* ============================= */\n/* ============================= */\n/* Global Base parameters */\n/* ============================= */\n/* =========================== */\n/* Global CSS for 'base' theme */\n/* =========================== */\n/* ======================================= */\n/* CSS for ListItem */\n/* Base theme */\n/* ======================================= */\n.sapMSLI.sapMLIBActive .sapMSLITitle {\n color: #fff;\n}\n.sapMSLI .sapMSLITitle {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: 1rem;\n height: 3rem;\n line-height: 3rem;\n color: #32363a;\n}\n.sapMSLI .sapMSLIImg {\n margin: 0.5rem 0.75rem 0.5rem 0rem;\n height: 2rem;\n width: 2rem;\n}\n.sapMSLI .sapMLIBContent {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-box-flex: 1;\n flex: auto;\n display: -webkit-box;\n display: flex;\n -webkit-box-align: center;\n align-items: center;\n}\n/* Compact size */\n.sapUiSizeCompact .sapMSLI {\n height: 2rem;\n}\n.sapUiSizeCompact .sapMSLI .sapMSLITitle {\n height: 2rem;\n line-height: 2rem;\n font-size: 0.875rem;\n}\n.sapUiSizeCompact .sapMSLI .sapMSLIImg {\n margin-top: 0.55rem;\n height: 1.75rem;\n width: 1.75rem;\n}\n/* ============================= */\n/* Global Belize parameters */\n/* ============================= */\n/* ===================================== */\n/* Quick Theming */\n/* ===================================== */\n/*\n UX COLOR SET\n*/\n/* PRIMARY COLORS */\n/* ACCENT COLORS */\n/* Semantic Background Colors */\n/* Semantic Border Colors */\n/* Semantic Foreground Elements */\n/* Semantic Text */\n/* Semantic Foreground Colors */\n/* ===================================== */\n/* Expert Theming */\n/* ===================================== */\n/*darken(@sapBrandColor, 10); // no contrast function allowed because background can be gradient*/\n/* darken(@sapButton_Background, 30); //should be #ababab */\n/* contrast(@sapButton_Background, darken(@sapHighlightColor, 10), @sapContent_ContrastTextColor, @sapContent_ContrastTextThreshold); //should be #346187 */\n/* ======================================= */\n/* CSS for control sap.m/StandardListItem */\n/* Belize theme */\n/* ======================================= */\n"} -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_belize/Label.json: -------------------------------------------------------------------------------- 1 | {"_":"/* ============================= */\n/* Base theme */\n/* ============================= */\n/* ============================= */\n/* Global Base parameters */\n/* ============================= */\n/* =========================== */\n/* Global CSS for 'base' theme */\n/* =========================== */\n/* ============================ */\n/* CSS for control ui5-label */\n/* Base theme */\n/* ============================ */\n:host(ui5-label) {\n display: inline-block;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n max-width: 100%;\n}\n.sapMLabel {\n color: #666666;\n font-size: 0.875rem;\n font-family: \"72\", Arial, Helvetica, sans-serif;\n font-weight: normal;\n display: inline-block;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n cursor: text;\n}\n.sapMLabelBold,\n.sapMLabel.sapMLabelBold {\n font-weight: bold;\n}\n.sapMLabelMaxWidth {\n max-width: 100%;\n}\n.sapMLabelRequired:before {\n content: \"*\";\n color: #c14646;\n font-size: 1.25rem;\n font-weight: bold;\n position: relative;\n vertical-align: middle;\n line-height: 0;\n}\n.sapMLabel.sapMLabelMaxWidth.sapMLabelWrapped {\n margin: 0.875rem 0;\n line-height: 1.4rem;\n}\n/* Label Wrapping */\n.sapMLabel.sapMLabelWrapped {\n white-space: pre-line;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n/* Label as ui5-checkbox and ui5-radiobutton text */\n:host(ui5-label.labelInCheckbox) .sapMLabel,\n:host(ui5-label.labelInRadioButton) .sapMLabel {\n cursor: default;\n}\n:host(ui5-label.labelInCheckbox) .sapMLabel.sapMLabelMaxWidth.sapMLabelWrapped.sapMLabelWrapped {\n margin: 0.675rem 0;\n}\n:host(ui5-label.labelInCheckbox) .sapUiSizeCompact .sapMLabel.sapMLabelMaxWidth.sapMLabelWrapped.sapMLabelWrapped {\n margin: 0.25rem 0;\n}\n/* ============================= */\n/* Global Belize parameters */\n/* ============================= */\n/* ===================================== */\n/* Quick Theming */\n/* ===================================== */\n/*\n UX COLOR SET\n*/\n/* PRIMARY COLORS */\n/* ACCENT COLORS */\n/* Semantic Background Colors */\n/* Semantic Border Colors */\n/* Semantic Foreground Elements */\n/* Semantic Text */\n/* Semantic Foreground Colors */\n/* ===================================== */\n/* Expert Theming */\n/* ===================================== */\n/* ============================ */\n/* CSS for control sap.m/Label */\n/* Belize theme */\n/* ============================ */\n"} -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_belize/Popover.json: -------------------------------------------------------------------------------- 1 | {"_":"/* ============================= */\n/* Base theme */\n/* ============================= */\n/* ============================= */\n/* Global Base parameters */\n/* ============================= */\n/* =========================== */\n/* Global CSS for 'base' theme */\n/* =========================== */\n/* shared mixin for arrow shadow*/\n.sapMPopover {\n position: fixed;\n z-index: 10;\n}\n.sapMPopoverArr {\n pointer-events: none;\n display: block;\n width: 1rem;\n height: 1rem;\n position: absolute;\n overflow: hidden;\n}\n.sapMPopoverArr:after {\n content: \" \";\n display: block;\n width: 0.7rem;\n height: 0.7rem;\n background-color: #ffffff;\n transform: rotate(-45deg);\n}\n/* pointing upward arrow */\n.sapMPopoverArrUp {\n /* offset */\n left: calc(50% - 0.5625rem);\n /* position */\n top: -0.5rem;\n height: 0.5625rem;\n}\n.sapMPopoverArrUp:after {\n margin: 0.1875rem 0 0 0.1875rem;\n box-shadow: -0.375rem 0.375rem 0.75rem 0 rgba(0, 0, 0, 0.3), 0 0 0.125rem 0 rgba(0, 0, 0, 0.3);\n}\n/* pointing right arrow */\n.sapMPopoverArrRight {\n /* offset */\n top: calc(50% - 0.5625rem);\n /* position */\n right: -0.5625rem;\n width: 0.5625rem;\n}\n.sapMPopoverArrRight:after {\n margin: 0.1875rem 0 0 -0.375rem;\n box-shadow: -0.375rem -0.375rem 0.75rem 0 rgba(0, 0, 0, 0.3), 0 0 0.125rem 0 rgba(0, 0, 0, 0.3);\n}\n/* pointing downward arrow */\n.sapMPopoverArrDown {\n /* offset */\n left: calc(50% - 0.5625rem);\n /* position */\n height: 0.5625rem;\n}\n.sapMPopoverArrDown:after {\n margin: -0.375rem 0 0 0.125rem;\n box-shadow: 0.375rem -0.375rem 0.75rem 0 rgba(0, 0, 0, 0.3), 0 0 0.125rem 0 rgba(0, 0, 0, 0.3);\n}\n/* pointing left arrow */\n.sapMPopoverArrLeft {\n /* position */\n left: -0.5625rem;\n top: calc(50% - 0.5625rem);\n width: 0.5625rem;\n height: 1rem;\n}\n.sapMPopoverArrLeft:after {\n margin: 0.125rem 0 0 0.25rem;\n box-shadow: 0.375rem 0.375rem 0.75rem 0 rgba(0, 0, 0, 0.3), 0 0 0.125rem 0 rgba(0, 0, 0, 0.3);\n}\n.sapMPopoverArr.sapMPopoverArrHidden {\n display: none;\n}\n/* ============================= */\n/* Global Belize parameters */\n/* ============================= */\n/* ===================================== */\n/* Quick Theming */\n/* ===================================== */\n/*\n UX COLOR SET\n*/\n/* PRIMARY COLORS */\n/* ACCENT COLORS */\n/* Semantic Background Colors */\n/* Semantic Border Colors */\n/* Semantic Foreground Elements */\n/* Semantic Text */\n/* Semantic Foreground Colors */\n/* ===================================== */\n/* Expert Theming */\n/* ===================================== */\n"} -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_fiori_3/Popup.json: -------------------------------------------------------------------------------- 1 | {"_":"/* ============================= */\n/* Base theme */\n/* ============================= */\n/* ============================= */\n/* Global Base parameters */\n/* ============================= */\n/* =========================== */\n/* Global CSS for 'base' theme */\n/* =========================== */\n.sapMPopupFrame {\n width: 0;\n height: 0;\n display: none;\n visibility: visible;\n}\n.sapMPopupFrameOpen {\n display: inline;\n}\n.sapMPopup {\n color: #fff;\n min-width: 6.25rem;\n box-sizing: border-box;\n outline: none;\n max-width: 100%;\n max-height: 100%;\n background: #fff;\n border: none;\n box-shadow: 0 0.625rem 1.875rem 0 rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.15);\n border-radius: 0.25rem;\n min-height: 2rem;\n}\n.sapMPopup .sapMPopupHeader {\n margin: 0;\n color: #505559;\n font-size: 1rem;\n font-weight: 400;\n font-family: \"72\", Arial, Helvetica, sans-serif;\n border-bottom: 1px solid #ebebeb;\n}\n.sapMPopup .sapMPopupHeaderText {\n padding: 0 0.25rem;\n text-align: center;\n height: 3rem;\n line-height: 3rem;\n}\n.sapMPopup .sapMPopupFooter {\n font-size: 1rem;\n font-weight: 400;\n font-family: \"72\", Arial, Helvetica, sans-serif;\n background: #fff;\n border-top: 1px solid #ebebeb;\n color: #505559;\n}\n.sapMPopup .sapMPopupContent {\n overflow: auto;\n position: relative;\n box-sizing: border-box;\n background-color: #fff;\n}\n.sapMPopup .sapMPopupScroll {\n vertical-align: middle;\n box-sizing: border-box;\n padding: 0.4375em;\n}\n.sapUiBLy {\n background-color: #000000;\n opacity: 0.6;\n filter: alpha(opacity=60);\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n position: fixed;\n outline: 0 none;\n}\n.sapMPopupBlockLayer {\n visibility: visible;\n}\n.sapMPopupBlockLayerHidden {\n display: none;\n}\n/* ============================= */\n/* Global Belize parameters */\n/* ============================= */\n/* ===================================== */\n/* Quick Theming */\n/* ===================================== */\n/*\n UX COLOR SET\n*/\n/* PRIMARY COLORS */\n/* ACCENT COLORS */\n/* Semantic Background Colors */\n/* Semantic Border Colors */\n/* Semantic Foreground Elements */\n/* Semantic Text */\n/* Semantic Foreground Colors */\n/* ===================================== */\n/* Expert Theming */\n/* ===================================== */\n/*darken(@sapBrandColor, 10); // no contrast function allowed because background can be gradient*/\n/* darken(@sapButton_Background, 30); //should be #ababab */\n/* contrast(@sapButton_Background, darken(@sapHighlightColor, 10), @sapContent_ContrastTextColor, @sapContent_ContrastTextThreshold); //should be #346187 */\n"} -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_belize/Title.json: -------------------------------------------------------------------------------- 1 | {"_":"/* ============================= */\n/* Base theme */\n/* ============================= */\n/* ============================= */\n/* Global Base parameters */\n/* ============================= */\n/* =========================== */\n/* Global CSS for 'base' theme */\n/* =========================== */\n/* ============================ */\n/* CSS for control sap.m/Title */\n/* Base theme */\n/* ============================ */\n:host(ui5-title) {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.sapMTitle {\n display: inline-block;\n position: relative;\n max-width: 100%;\n min-width: 1px;\n font-weight: normal;\n font-family: \"72\", Arial, Helvetica, sans-serif;\n color: #333333;\n overflow: hidden;\n text-overflow: ellipsis;\n text-shadow: 0 0 0.125rem #fff;\n white-space: nowrap;\n vertical-align: bottom;\n margin: 0;\n -webkit-margin-before: 0;\n -webkit-margin-after: 0;\n -webkit-margin-start: 0;\n -webkit-margin-end: 0;\n box-sizing: border-box;\n cursor: text;\n}\n.sapMTitle.sapMTitleWrap {\n white-space: pre-line;\n}\n/* Alignments */\n.sapMTitleAlignBegin {\n text-align: left;\n text-align: start;\n}\n[data-sap-ui-wc-root][dir=rtl][data-sap-ui-browser^=\"ie\"] .sapMTitleAlignBegin,\n[data-sap-ui-wc-root][dir=rtl][data-sap-ui-browser^=\"ed\"] .sapMTitleAlignBegin {\n text-align: right;\n}\n.sapMTitleAlignLeft {\n text-align: left;\n}\n.sapMTitleAlignEnd {\n text-align: right;\n text-align: end;\n}\n[data-sap-ui-wc-root][dir=rtl][data-sap-ui-browser^=\"ie\"] .sapMTitleAlignEnd,\n[data-sap-ui-wc-root][dir=rtl][data-sap-ui-browser^=\"ed\"] .sapMTitleAlignEnd {\n text-align: left;\n}\n.sapMTitleAlignRight {\n text-align: right;\n}\n.sapMTitleAlignCenter {\n text-align: center;\n}\n/* Title levels */\n/* Level H1 */\n.sapMTitleStyleH1 {\n font-size: 1.625rem;\n}\n/* Level H2 */\n.sapMTitleStyleH2 {\n font-size: 1.375rem;\n}\n/* Level H3 */\n.sapMTitleStyleH3 {\n font-size: 1.25rem;\n}\n/* Level H4 */\n.sapMTitleStyleH4 {\n font-size: 1.125rem;\n}\n/* Level H5 */\n.sapMTitleStyleH5 {\n font-size: 1rem;\n}\n/* Level H6 */\n.sapMTitleStyleH6 {\n font-size: 0.875rem;\n}\n/* ============================= */\n/* Global Belize parameters */\n/* ============================= */\n/* ===================================== */\n/* Quick Theming */\n/* ===================================== */\n/*\n UX COLOR SET\n*/\n/* PRIMARY COLORS */\n/* ACCENT COLORS */\n/* Semantic Background Colors */\n/* Semantic Border Colors */\n/* Semantic Foreground Elements */\n/* Semantic Text */\n/* Semantic Foreground Colors */\n/* ===================================== */\n/* Expert Theming */\n/* ===================================== */\n"} -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_fiori_3/ListItem.css: -------------------------------------------------------------------------------- 1 | /* ============================= */ 2 | /* Base theme */ 3 | /* ============================= */ 4 | /* ============================= */ 5 | /* Global Base parameters */ 6 | /* ============================= */ 7 | /* =========================== */ 8 | /* Global CSS for 'base' theme */ 9 | /* =========================== */ 10 | /* ======================================= */ 11 | /* CSS for ListItem */ 12 | /* Base theme */ 13 | /* ======================================= */ 14 | .sapMSLI.sapMLIBActive .sapMSLITitle { 15 | color: #fff; 16 | } 17 | .sapMSLI .sapMSLITitle { 18 | white-space: nowrap; 19 | overflow: hidden; 20 | text-overflow: ellipsis; 21 | font-size: 1rem; 22 | height: 3rem; 23 | line-height: 3rem; 24 | color: #32363a; 25 | } 26 | .sapMSLI .sapMSLIImg { 27 | margin: 0.5rem 0.75rem 0.5rem 0rem; 28 | height: 2rem; 29 | width: 2rem; 30 | } 31 | .sapMSLI .sapMLIBContent { 32 | white-space: nowrap; 33 | overflow: hidden; 34 | text-overflow: ellipsis; 35 | -webkit-box-flex: 1; 36 | flex: auto; 37 | display: -webkit-box; 38 | display: flex; 39 | -webkit-box-align: center; 40 | align-items: center; 41 | } 42 | /* Compact size */ 43 | .sapUiSizeCompact .sapMSLI { 44 | height: 2rem; 45 | } 46 | .sapUiSizeCompact .sapMSLI .sapMSLITitle { 47 | height: 2rem; 48 | line-height: 2rem; 49 | font-size: 0.875rem; 50 | } 51 | .sapUiSizeCompact .sapMSLI .sapMSLIImg { 52 | margin-top: 0.55rem; 53 | height: 1.75rem; 54 | width: 1.75rem; 55 | } 56 | /* ============================= */ 57 | /* Global Belize parameters */ 58 | /* ============================= */ 59 | /* ===================================== */ 60 | /* Quick Theming */ 61 | /* ===================================== */ 62 | /* 63 | UX COLOR SET 64 | */ 65 | /* PRIMARY COLORS */ 66 | /* ACCENT COLORS */ 67 | /* Semantic Background Colors */ 68 | /* Semantic Border Colors */ 69 | /* Semantic Foreground Elements */ 70 | /* Semantic Text */ 71 | /* Semantic Foreground Colors */ 72 | /* ===================================== */ 73 | /* Expert Theming */ 74 | /* ===================================== */ 75 | /*darken(@sapBrandColor, 10); // no contrast function allowed because background can be gradient*/ 76 | /* darken(@sapButton_Background, 30); //should be #ababab */ 77 | /* contrast(@sapButton_Background, darken(@sapHighlightColor, 10), @sapContent_ContrastTextColor, @sapContent_ContrastTextThreshold); //should be #346187 */ 78 | /* ======================================= */ 79 | /* CSS for control sap.m/StandardListItem */ 80 | /* Belize theme */ 81 | /* ======================================= */ 82 | -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_belize/ToggleButton.json: -------------------------------------------------------------------------------- 1 | {"_":"/* ============================= */\n/* Base theme */\n/* ============================= */\n/* ============================= */\n/* Global Base parameters */\n/* ============================= */\n/* =========================== */\n/* Global CSS for 'base' theme */\n/* =========================== */\n:host(ui5-toggle-button) {\n display: inline-block;\n min-width: 2.5rem;\n height: 2.5rem;\n}\nui5-toggle-button {\n display: inline-block;\n width: auto;\n height: 2.5rem;\n}\n:host(ui5-toggle-button.sapUiSizeCompact) {\n height: 1.625rem;\n min-width: 2rem;\n}\n:host(ui5-toggle-button.sapUiSizeCompact) .sapWCIconInButton {\n font-size: 1rem;\n}\nui5-toggle-button.sapUiSizeCompact {\n height: 1.625rem;\n min-width: 2rem;\n}\nui5-toggle-button.sapUiSizeCompact .sapWCIconInButton {\n font-size: 1rem;\n}\n.sapMBtn.sapMToggleBtnPressed.sapMBtnReject {\n background-color: #bb0000;\n border-color: #bb0000;\n color: #fff;\n}\n.sapMBtn.sapMToggleBtnPressed.sapMBtnReject:active,\n.sapMBtn.sapMToggleBtnPressed.sapMBtnReject:hover {\n background-color: #a20000;\n border-color: #bb0000;\n}\n.sapMBtn.sapMToggleBtnPressed.sapMBtnAccept {\n background-color: #2b7c2b;\n border-color: #2b7c2b;\n color: #fff;\n}\n.sapMBtn.sapMToggleBtnPressed.sapMBtnAccept:active,\n.sapMBtn.sapMToggleBtnPressed.sapMBtnAccept:hover {\n background-color: #246924;\n border-color: #2b7c2b;\n}\n.sapMBtn.sapMToggleBtnPressed,\n.sapMBtn.sapMToggleBtnPressed.sapMBtnEmphasized,\n.sapMBtn.sapMToggleBtnPressed.sapMBtnTransparent {\n text-shadow: none;\n background-color: #346187;\n border-color: #2d5475;\n color: #fff;\n}\n.sapMBtn.sapMToggleBtnPressed:focus::after,\n.sapMBtn.sapMToggleBtnPressed.sapMBtnEmphasized:focus::after,\n.sapMBtn.sapMToggleBtnPressed.sapMBtnTransparent:focus::after {\n border-color: #fff;\n}\n.sapMBtn.sapMToggleBtnPressed:active,\n.sapMBtn.sapMToggleBtnPressed.sapMBtnEmphasized:active,\n.sapMBtn.sapMToggleBtnPressed.sapMBtnTransparent:active,\n.sapMBtn.sapMToggleBtnPressed:hover,\n.sapMBtn.sapMToggleBtnPressed.sapMBtnEmphasized:hover,\n.sapMBtn.sapMToggleBtnPressed.sapMBtnTransparent:hover {\n background-color: #427cac;\n border-color: #427cac;\n}\n/* ============================= */\n/* Global Belize parameters */\n/* ============================= */\n/* ===================================== */\n/* Quick Theming */\n/* ===================================== */\n/*\n UX COLOR SET\n*/\n/* PRIMARY COLORS */\n/* ACCENT COLORS */\n/* Semantic Background Colors */\n/* Semantic Border Colors */\n/* Semantic Foreground Elements */\n/* Semantic Text */\n/* Semantic Foreground Colors */\n/* ===================================== */\n/* Expert Theming */\n/* ===================================== */\n"} -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_fiori_3/Label.json: -------------------------------------------------------------------------------- 1 | {"_":"/* ============================= */\n/* Base theme */\n/* ============================= */\n/* ============================= */\n/* Global Base parameters */\n/* ============================= */\n/* =========================== */\n/* Global CSS for 'base' theme */\n/* =========================== */\n/* ============================ */\n/* CSS for control ui5-label */\n/* Base theme */\n/* ============================ */\n:host(ui5-label) {\n display: inline-block;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n max-width: 100%;\n}\n.sapMLabel {\n color: #6a6d70;\n font-size: 0.875rem;\n font-family: \"72\", Arial, Helvetica, sans-serif;\n font-weight: normal;\n display: inline-block;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n cursor: text;\n}\n.sapMLabelBold,\n.sapMLabel.sapMLabelBold {\n font-weight: bold;\n}\n.sapMLabelMaxWidth {\n max-width: 100%;\n}\n.sapMLabelRequired:before {\n content: \"*\";\n color: #a5175a;\n font-size: 1.25rem;\n font-weight: bold;\n position: relative;\n vertical-align: middle;\n line-height: 0;\n}\n.sapMLabel.sapMLabelMaxWidth.sapMLabelWrapped {\n margin: 0.875rem 0;\n line-height: 1.4rem;\n}\n/* Label Wrapping */\n.sapMLabel.sapMLabelWrapped {\n white-space: pre-line;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n/* Label as ui5-checkbox and ui5-radiobutton text */\n:host(ui5-label.labelInCheckbox) .sapMLabel,\n:host(ui5-label.labelInRadioButton) .sapMLabel {\n cursor: default;\n}\n:host(ui5-label.labelInCheckbox) .sapMLabel.sapMLabelMaxWidth.sapMLabelWrapped.sapMLabelWrapped {\n margin: 0.675rem 0;\n}\n:host(ui5-label.labelInCheckbox) .sapUiSizeCompact .sapMLabel.sapMLabelMaxWidth.sapMLabelWrapped.sapMLabelWrapped {\n margin: 0.25rem 0;\n}\n/* ============================= */\n/* Global Belize parameters */\n/* ============================= */\n/* ===================================== */\n/* Quick Theming */\n/* ===================================== */\n/*\n UX COLOR SET\n*/\n/* PRIMARY COLORS */\n/* ACCENT COLORS */\n/* Semantic Background Colors */\n/* Semantic Border Colors */\n/* Semantic Foreground Elements */\n/* Semantic Text */\n/* Semantic Foreground Colors */\n/* ===================================== */\n/* Expert Theming */\n/* ===================================== */\n/*darken(@sapBrandColor, 10); // no contrast function allowed because background can be gradient*/\n/* darken(@sapButton_Background, 30); //should be #ababab */\n/* contrast(@sapButton_Background, darken(@sapHighlightColor, 10), @sapContent_ContrastTextColor, @sapContent_ContrastTextThreshold); //should be #346187 */\n/* ============================ */\n/* CSS for control sap.m/Label */\n/* Belize theme */\n/* ============================ */\n"} -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_belize/Label.css: -------------------------------------------------------------------------------- 1 | /* ============================= */ 2 | /* Base theme */ 3 | /* ============================= */ 4 | /* ============================= */ 5 | /* Global Base parameters */ 6 | /* ============================= */ 7 | /* =========================== */ 8 | /* Global CSS for 'base' theme */ 9 | /* =========================== */ 10 | /* ============================ */ 11 | /* CSS for control ui5-label */ 12 | /* Base theme */ 13 | /* ============================ */ 14 | :host(ui5-label) { 15 | display: inline-block; 16 | text-overflow: ellipsis; 17 | overflow: hidden; 18 | white-space: nowrap; 19 | max-width: 100%; 20 | } 21 | .sapMLabel { 22 | color: #666666; 23 | font-size: 0.875rem; 24 | font-family: "72", Arial, Helvetica, sans-serif; 25 | font-weight: normal; 26 | display: inline-block; 27 | text-overflow: ellipsis; 28 | overflow: hidden; 29 | white-space: nowrap; 30 | cursor: text; 31 | } 32 | .sapMLabelBold, 33 | .sapMLabel.sapMLabelBold { 34 | font-weight: bold; 35 | } 36 | .sapMLabelMaxWidth { 37 | max-width: 100%; 38 | } 39 | .sapMLabelRequired:before { 40 | content: "*"; 41 | color: #c14646; 42 | font-size: 1.25rem; 43 | font-weight: bold; 44 | position: relative; 45 | vertical-align: middle; 46 | line-height: 0; 47 | } 48 | .sapMLabel.sapMLabelMaxWidth.sapMLabelWrapped { 49 | margin: 0.875rem 0; 50 | line-height: 1.4rem; 51 | } 52 | /* Label Wrapping */ 53 | .sapMLabel.sapMLabelWrapped { 54 | white-space: pre-line; 55 | overflow: hidden; 56 | text-overflow: ellipsis; 57 | } 58 | /* Label as ui5-checkbox and ui5-radiobutton text */ 59 | :host(ui5-label.labelInCheckbox) .sapMLabel, 60 | :host(ui5-label.labelInRadioButton) .sapMLabel { 61 | cursor: default; 62 | } 63 | :host(ui5-label.labelInCheckbox) .sapMLabel.sapMLabelMaxWidth.sapMLabelWrapped.sapMLabelWrapped { 64 | margin: 0.675rem 0; 65 | } 66 | :host(ui5-label.labelInCheckbox) .sapUiSizeCompact .sapMLabel.sapMLabelMaxWidth.sapMLabelWrapped.sapMLabelWrapped { 67 | margin: 0.25rem 0; 68 | } 69 | /* ============================= */ 70 | /* Global Belize parameters */ 71 | /* ============================= */ 72 | /* ===================================== */ 73 | /* Quick Theming */ 74 | /* ===================================== */ 75 | /* 76 | UX COLOR SET 77 | */ 78 | /* PRIMARY COLORS */ 79 | /* ACCENT COLORS */ 80 | /* Semantic Background Colors */ 81 | /* Semantic Border Colors */ 82 | /* Semantic Foreground Elements */ 83 | /* Semantic Text */ 84 | /* Semantic Foreground Colors */ 85 | /* ===================================== */ 86 | /* Expert Theming */ 87 | /* ===================================== */ 88 | /* ============================ */ 89 | /* CSS for control sap.m/Label */ 90 | /* Belize theme */ 91 | /* ============================ */ 92 | -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_belize/Popup.css: -------------------------------------------------------------------------------- 1 | /* ============================= */ 2 | /* Base theme */ 3 | /* ============================= */ 4 | /* ============================= */ 5 | /* Global Base parameters */ 6 | /* ============================= */ 7 | /* =========================== */ 8 | /* Global CSS for 'base' theme */ 9 | /* =========================== */ 10 | .sapMPopupFrame { 11 | width: 0; 12 | height: 0; 13 | display: none; 14 | visibility: visible; 15 | } 16 | .sapMPopupFrameOpen { 17 | display: inline; 18 | } 19 | .sapMPopup { 20 | color: #333333; 21 | min-width: 6.25rem; 22 | box-sizing: border-box; 23 | outline: none; 24 | max-width: 100%; 25 | max-height: 100%; 26 | background: #ffffff; 27 | border: none; 28 | box-shadow: 0 0.625rem 1.875rem 0 rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.15); 29 | border-radius: 0.25rem; 30 | min-height: 2rem; 31 | } 32 | .sapMPopup .sapMPopupHeader { 33 | margin: 0; 34 | color: #666666; 35 | font-size: 1rem; 36 | font-weight: 400; 37 | font-family: "72", Arial, Helvetica, sans-serif; 38 | border-bottom: 1px solid #ebebeb; 39 | } 40 | .sapMPopup .sapMPopupHeaderText { 41 | padding: 0 0.25rem; 42 | text-align: center; 43 | height: 3rem; 44 | line-height: 3rem; 45 | } 46 | .sapMPopup .sapMPopupFooter { 47 | font-size: 1rem; 48 | font-weight: 400; 49 | font-family: "72", Arial, Helvetica, sans-serif; 50 | background: #ffffff; 51 | border-top: 1px solid #ebebeb; 52 | color: #333333; 53 | } 54 | .sapMPopup .sapMPopupContent { 55 | overflow: auto; 56 | position: relative; 57 | box-sizing: border-box; 58 | background-color: #ffffff; 59 | } 60 | .sapMPopup .sapMPopupScroll { 61 | vertical-align: middle; 62 | box-sizing: border-box; 63 | padding: 0.4375em; 64 | } 65 | .sapUiBLy { 66 | background-color: #000000; 67 | opacity: 0.6; 68 | filter: alpha(opacity=60); 69 | top: 0; 70 | left: 0; 71 | right: 0; 72 | bottom: 0; 73 | position: fixed; 74 | outline: 0 none; 75 | } 76 | .sapMPopupBlockLayer { 77 | visibility: visible; 78 | } 79 | .sapMPopupBlockLayerHidden { 80 | display: none; 81 | } 82 | /* ============================= */ 83 | /* Global Belize parameters */ 84 | /* ============================= */ 85 | /* ===================================== */ 86 | /* Quick Theming */ 87 | /* ===================================== */ 88 | /* 89 | UX COLOR SET 90 | */ 91 | /* PRIMARY COLORS */ 92 | /* ACCENT COLORS */ 93 | /* Semantic Background Colors */ 94 | /* Semantic Border Colors */ 95 | /* Semantic Foreground Elements */ 96 | /* Semantic Text */ 97 | /* Semantic Foreground Colors */ 98 | /* ===================================== */ 99 | /* Expert Theming */ 100 | /* ===================================== */ 101 | -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_belize/List.json: -------------------------------------------------------------------------------- 1 | {"_":"/* ============================= */\n/* Base theme */\n/* ============================= */\n/* ============================= */\n/* Global Base parameters */\n/* ============================= */\n/* =========================== */\n/* Global CSS for 'base' theme */\n/* =========================== */\n/* =============================== */\n/* CSS for ui5-list */\n/* Base theme */\n/* =============================== */\nui5-list,\n:host(ui5-list) {\n display: block;\n max-width: 100%;\n}\n.sapMList {\n width: 100%;\n height: 100%;\n position: relative;\n box-sizing: border-box;\n}\n.sapMList.sapMListInsetBG {\n padding: 2rem;\n}\n.sapMList .sapMListUl {\n list-style-type: none;\n padding: 0;\n margin: 0;\n}\n.sapMList .sapMListUl:focus {\n outline: none;\n}\n.sapMList .sapMListDummyArea {\n position: fixed;\n /* keep it in the visible viewport, so that IE does not scroll on focus */\n}\n.sapMList .sapMListNoData {\n list-style-type: none;\n display: -webkit-box;\n display: flex;\n -webkit-box-align: center;\n align-items: center;\n -webkit-box-pack: center;\n justify-content: center;\n color: #333333;\n background-color: #ffffff;\n border-bottom: 1px solid #e5e5e5;\n padding: 0 1rem !important;\n height: 3rem;\n}\n.sapMList .sapMListHdrText {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n box-sizing: border-box;\n font-size: 1.125rem;\n font-family: \"72\", Arial, Helvetica, sans-serif;\n color: #333333;\n height: 3rem;\n line-height: 3rem;\n padding: 0 1rem;\n background-color: transparent;\n border-bottom: 1px solid #cccccc;\n}\n.sapMList .sapMListFtr {\n height: 2rem;\n box-sizing: border-box;\n -webkit-text-size-adjust: none;\n /* To improve readability Mobile Safari automatically increases the size of small text so let's disable this */\n font-size: 0.875rem;\n line-height: 2rem;\n background-color: #ceddec;\n color: #333333;\n padding: 0 1rem;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.sapMList .sapMListShowSeparatorsNone .sapMListNoData {\n border-bottom: 0px;\n}\n.sapMList .sapMListNoDataText {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n/* Compact size */\n.sapUiSizeCompact .sapMList .sapMListNoData {\n height: 2rem;\n font-size: 0.875rem;\n}\n/* ============================= */\n/* Global Belize parameters */\n/* ============================= */\n/* ===================================== */\n/* Quick Theming */\n/* ===================================== */\n/*\n UX COLOR SET\n*/\n/* PRIMARY COLORS */\n/* ACCENT COLORS */\n/* Semantic Background Colors */\n/* Semantic Border Colors */\n/* Semantic Foreground Elements */\n/* Semantic Text */\n/* Semantic Foreground Colors */\n/* ===================================== */\n/* Expert Theming */\n/* ===================================== */\n"} -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_fiori_3/Popover.json: -------------------------------------------------------------------------------- 1 | {"_":"/* ============================= */\n/* Base theme */\n/* ============================= */\n/* ============================= */\n/* Global Base parameters */\n/* ============================= */\n/* =========================== */\n/* Global CSS for 'base' theme */\n/* =========================== */\n/* shared mixin for arrow shadow*/\n.sapMPopover {\n position: fixed;\n z-index: 10;\n}\n.sapMPopoverArr {\n pointer-events: none;\n display: block;\n width: 1rem;\n height: 1rem;\n position: absolute;\n overflow: hidden;\n}\n.sapMPopoverArr:after {\n content: \" \";\n display: block;\n width: 0.7rem;\n height: 0.7rem;\n background-color: #fff;\n transform: rotate(-45deg);\n}\n/* pointing upward arrow */\n.sapMPopoverArrUp {\n /* offset */\n left: calc(50% - 0.5625rem);\n /* position */\n top: -0.5rem;\n height: 0.5625rem;\n}\n.sapMPopoverArrUp:after {\n margin: 0.1875rem 0 0 0.1875rem;\n box-shadow: -0.375rem 0.375rem 0.75rem 0 rgba(0, 0, 0, 0.3), 0 0 0.125rem 0 rgba(0, 0, 0, 0.3);\n}\n/* pointing right arrow */\n.sapMPopoverArrRight {\n /* offset */\n top: calc(50% - 0.5625rem);\n /* position */\n right: -0.5625rem;\n width: 0.5625rem;\n}\n.sapMPopoverArrRight:after {\n margin: 0.1875rem 0 0 -0.375rem;\n box-shadow: -0.375rem -0.375rem 0.75rem 0 rgba(0, 0, 0, 0.3), 0 0 0.125rem 0 rgba(0, 0, 0, 0.3);\n}\n/* pointing downward arrow */\n.sapMPopoverArrDown {\n /* offset */\n left: calc(50% - 0.5625rem);\n /* position */\n height: 0.5625rem;\n}\n.sapMPopoverArrDown:after {\n margin: -0.375rem 0 0 0.125rem;\n box-shadow: 0.375rem -0.375rem 0.75rem 0 rgba(0, 0, 0, 0.3), 0 0 0.125rem 0 rgba(0, 0, 0, 0.3);\n}\n/* pointing left arrow */\n.sapMPopoverArrLeft {\n /* position */\n left: -0.5625rem;\n top: calc(50% - 0.5625rem);\n width: 0.5625rem;\n height: 1rem;\n}\n.sapMPopoverArrLeft:after {\n margin: 0.125rem 0 0 0.25rem;\n box-shadow: 0.375rem 0.375rem 0.75rem 0 rgba(0, 0, 0, 0.3), 0 0 0.125rem 0 rgba(0, 0, 0, 0.3);\n}\n.sapMPopoverArr.sapMPopoverArrHidden {\n display: none;\n}\n/* ============================= */\n/* Global Belize parameters */\n/* ============================= */\n/* ===================================== */\n/* Quick Theming */\n/* ===================================== */\n/*\n UX COLOR SET\n*/\n/* PRIMARY COLORS */\n/* ACCENT COLORS */\n/* Semantic Background Colors */\n/* Semantic Border Colors */\n/* Semantic Foreground Elements */\n/* Semantic Text */\n/* Semantic Foreground Colors */\n/* ===================================== */\n/* Expert Theming */\n/* ===================================== */\n/*darken(@sapBrandColor, 10); // no contrast function allowed because background can be gradient*/\n/* darken(@sapButton_Background, 30); //should be #ababab */\n/* contrast(@sapButton_Background, darken(@sapHighlightColor, 10), @sapContent_ContrastTextColor, @sapContent_ContrastTextThreshold); //should be #346187 */\n"} -------------------------------------------------------------------------------- /.github/workflows/codeql-analysis.yml: -------------------------------------------------------------------------------- 1 | # For most projects, this workflow file will not need changing; you simply need 2 | # to commit it to your repository. 3 | # 4 | # You may wish to alter this file to override the set of languages analyzed, 5 | # or to provide custom queries or build logic. 6 | # 7 | # ******** NOTE ******** 8 | # We have attempted to detect the languages in your repository. Please check 9 | # the `language` matrix defined below to confirm you have the correct set of 10 | # supported CodeQL languages. 11 | # 12 | name: "CodeQL" 13 | 14 | on: 15 | push: 16 | branches: [ "main" ] 17 | pull_request: 18 | # The branches below must be a subset of the branches above 19 | branches: [ "main" ] 20 | schedule: 21 | - cron: '41 8 * * 6' 22 | 23 | jobs: 24 | analyze: 25 | name: Analyze 26 | runs-on: ubuntu-latest 27 | permissions: 28 | actions: read 29 | contents: read 30 | security-events: write 31 | 32 | strategy: 33 | fail-fast: false 34 | matrix: 35 | language: [ 'javascript' ] 36 | # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ] 37 | # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support 38 | 39 | steps: 40 | - name: Checkout repository 41 | uses: actions/checkout@v3 42 | 43 | # Initializes the CodeQL tools for scanning. 44 | - name: Initialize CodeQL 45 | uses: github/codeql-action/init@v2 46 | with: 47 | languages: ${{ matrix.language }} 48 | # If you wish to specify custom queries, you can do so here or in a config file. 49 | # By default, queries listed here will override any specified in a config file. 50 | # Prefix the list here with "+" to use these queries and those in the config file. 51 | 52 | # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs 53 | # queries: security-extended,security-and-quality 54 | 55 | 56 | # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). 57 | # If this step fails, then you should remove it and run the build manually (see below) 58 | - name: Autobuild 59 | uses: github/codeql-action/autobuild@v2 60 | 61 | # ℹ️ Command-line programs to run using the OS shell. 62 | # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun 63 | 64 | # If the Autobuild fails above, remove it and uncomment the following three lines. 65 | # modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance. 66 | 67 | # - run: | 68 | # echo "Run, Build Application using script" 69 | # ./location_of_script_within_repo/buildscript.sh 70 | 71 | - name: Perform CodeQL Analysis 72 | uses: github/codeql-action/analyze@v2 73 | -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_fiori_3/Title.json: -------------------------------------------------------------------------------- 1 | {"_":"/* ============================= */\n/* Base theme */\n/* ============================= */\n/* ============================= */\n/* Global Base parameters */\n/* ============================= */\n/* =========================== */\n/* Global CSS for 'base' theme */\n/* =========================== */\n/* ============================ */\n/* CSS for control sap.m/Title */\n/* Base theme */\n/* ============================ */\n:host(ui5-title) {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.sapMTitle {\n display: inline-block;\n position: relative;\n max-width: 100%;\n min-width: 1px;\n font-weight: normal;\n font-family: \"72\", Arial, Helvetica, sans-serif;\n color: #32363a;\n overflow: hidden;\n text-overflow: ellipsis;\n text-shadow: 0 0 0.125rem #fff;\n white-space: nowrap;\n vertical-align: bottom;\n margin: 0;\n -webkit-margin-before: 0;\n -webkit-margin-after: 0;\n -webkit-margin-start: 0;\n -webkit-margin-end: 0;\n box-sizing: border-box;\n cursor: text;\n}\n.sapMTitle.sapMTitleWrap {\n white-space: pre-line;\n}\n/* Alignments */\n.sapMTitleAlignBegin {\n text-align: left;\n text-align: start;\n}\n[data-sap-ui-wc-root][dir=rtl][data-sap-ui-browser^=\"ie\"] .sapMTitleAlignBegin,\n[data-sap-ui-wc-root][dir=rtl][data-sap-ui-browser^=\"ed\"] .sapMTitleAlignBegin {\n text-align: right;\n}\n.sapMTitleAlignLeft {\n text-align: left;\n}\n.sapMTitleAlignEnd {\n text-align: right;\n text-align: end;\n}\n[data-sap-ui-wc-root][dir=rtl][data-sap-ui-browser^=\"ie\"] .sapMTitleAlignEnd,\n[data-sap-ui-wc-root][dir=rtl][data-sap-ui-browser^=\"ed\"] .sapMTitleAlignEnd {\n text-align: left;\n}\n.sapMTitleAlignRight {\n text-align: right;\n}\n.sapMTitleAlignCenter {\n text-align: center;\n}\n/* Title levels */\n/* Level H1 */\n.sapMTitleStyleH1 {\n font-size: 2.25rem;\n}\n/* Level H2 */\n.sapMTitleStyleH2 {\n font-size: 1.5rem;\n}\n/* Level H3 */\n.sapMTitleStyleH3 {\n font-size: 1.25rem;\n}\n/* Level H4 */\n.sapMTitleStyleH4 {\n font-size: 1.125rem;\n}\n/* Level H5 */\n.sapMTitleStyleH5 {\n font-size: 1rem;\n}\n/* Level H6 */\n.sapMTitleStyleH6 {\n font-size: 0.875rem;\n}\n/* ============================= */\n/* Global Belize parameters */\n/* ============================= */\n/* ===================================== */\n/* Quick Theming */\n/* ===================================== */\n/*\n UX COLOR SET\n*/\n/* PRIMARY COLORS */\n/* ACCENT COLORS */\n/* Semantic Background Colors */\n/* Semantic Border Colors */\n/* Semantic Foreground Elements */\n/* Semantic Text */\n/* Semantic Foreground Colors */\n/* ===================================== */\n/* Expert Theming */\n/* ===================================== */\n/*darken(@sapBrandColor, 10); // no contrast function allowed because background can be gradient*/\n/* darken(@sapButton_Background, 30); //should be #ababab */\n/* contrast(@sapButton_Background, darken(@sapHighlightColor, 10), @sapContent_ContrastTextColor, @sapContent_ContrastTextThreshold); //should be #346187 */\n"} -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_belize/TextArea.json: -------------------------------------------------------------------------------- 1 | {"_":"/* ============================= */\n/* Base theme */\n/* ============================= */\n/* ============================= */\n/* Global Base parameters */\n/* ============================= */\n/* =========================== */\n/* Global CSS for 'base' theme */\n/* =========================== */\n.sapWCTextArea {\n height: 3rem;\n background: transparent;\n display: inline-block;\n vertical-align: top;\n outline: none;\n position: relative;\n overflow: hidden;\n}\n.sapWCTextAreaMirror ~ .sapWCTextAreaInner {\n height: 100%;\n width: 100%;\n top: 0;\n position: absolute;\n}\n.sapWCTextAreaGrowing.sapWCTextAreaNoMaxLines .sapWCTextAreaInner,\n.sapWCTextAreaGrowing.sapWCTextAreaNoMaxLines .sapWCTextAreaMirror {\n overflow: hidden;\n}\n.sapWCTextAreaMirror {\n line-height: 1.4;\n visibility: hidden;\n width: 100%;\n word-break: break-all;\n padding: 0.5625rem 0.6875rem;\n font-size: 0.875rem;\n font-family: \"72\", Arial, Helvetica, sans-serif;\n white-space: pre-wrap;\n}\n.sapWCTextAreaInner {\n width: 100%;\n margin: 0;\n padding: 0.5625rem 0.6875rem;\n line-height: 1.4;\n box-sizing: border-box;\n color: #000;\n background: #ffffff;\n border: 1px solid #bfbfbf;\n outline: none;\n font-size: 0.875rem;\n font-family: \"72\", Arial, Helvetica, sans-serif;\n -webkit-appearance: none;\n -moz-appearance: textfield;\n overflow: auto;\n resize: none;\n}\n.sapWCTextAreaInner:focus::after {\n content: \"\";\n width: 10px;\n height: 10px;\n background-color: red;\n}\n.sapWCTextAreaGrowing.sapWCTextAreaNoCols .sapWCTextAreaInner {\n overflow: hidden;\n width: 100%;\n}\n.sapWCTextAreaInner::-webkit-input-placeholder {\n font-size: 0.875rem;\n font-style: italic;\n}\n.sapWCTextAreaInner::-moz-placeholder {\n font-size: 0.875rem;\n font-style: italic;\n}\n.sapWCTextAreaInner:-ms-input-placeholder {\n font-size: 0.875rem;\n font-style: italic;\n}\n.sapWCTextAreaWithCounter .sapWCTextAreaInner {\n height: calc(100% - 16px);\n}\n.sapWCTextAreaCounter {\n text-align: right;\n font-size: 0.875rem;\n font-family: \"72\", Arial, Helvetica, sans-serif;\n}\n.sapCustomTextAreaWarningInner {\n border: 1px solid;\n background: #ffffff;\n border-color: #f9a429;\n}\n.sapWCTextAreaContent {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n.sapWCTextAreaExceededText {\n float: right;\n overflow: hidden;\n padding: 0.125rem 0.125rem 0.5rem;\n font-family: \"72\", Arial, Helvetica, sans-serif;\n font-size: 0.75rem;\n}\n/* ============================= */\n/* Global Belize parameters */\n/* ============================= */\n/* ===================================== */\n/* Quick Theming */\n/* ===================================== */\n/*\n UX COLOR SET\n*/\n/* PRIMARY COLORS */\n/* ACCENT COLORS */\n/* Semantic Background Colors */\n/* Semantic Border Colors */\n/* Semantic Foreground Elements */\n/* Semantic Text */\n/* Semantic Foreground Colors */\n/* ===================================== */\n/* Expert Theming */\n/* ===================================== */\n"} -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_fiori_3/ToggleButton.json: -------------------------------------------------------------------------------- 1 | {"_":"/* ============================= */\n/* Base theme */\n/* ============================= */\n/* ============================= */\n/* Global Base parameters */\n/* ============================= */\n/* =========================== */\n/* Global CSS for 'base' theme */\n/* =========================== */\n:host(ui5-toggle-button) {\n display: inline-block;\n min-width: 2.25rem;\n height: 2.25rem;\n}\nui5-toggle-button {\n display: inline-block;\n width: auto;\n height: 2.5rem;\n}\n:host(ui5-toggle-button.sapUiSizeCompact) {\n height: 1.625rem;\n min-width: 2rem;\n}\n:host(ui5-toggle-button.sapUiSizeCompact) .sapWCIconInButton {\n font-size: 1rem;\n}\nui5-toggle-button.sapUiSizeCompact {\n height: 1.625rem;\n min-width: 2rem;\n}\nui5-toggle-button.sapUiSizeCompact .sapWCIconInButton {\n font-size: 1rem;\n}\n.sapMBtn.sapMToggleBtnPressed.sapMBtnReject {\n background-color: #a20000;\n border-color: #a20000;\n color: #fff;\n}\n.sapMBtn.sapMToggleBtnPressed.sapMBtnReject:active,\n.sapMBtn.sapMToggleBtnPressed.sapMBtnReject:hover {\n background-color: #880000;\n border-color: #a20000;\n}\n.sapMBtn.sapMToggleBtnPressed.sapMBtnAccept {\n background-color: #0d6733;\n border-color: #0d6733;\n color: #fff;\n}\n.sapMBtn.sapMToggleBtnPressed.sapMBtnAccept:active,\n.sapMBtn.sapMToggleBtnPressed.sapMBtnAccept:hover {\n background-color: #0a5128;\n border-color: #0d6733;\n}\n.sapMBtn.sapMToggleBtnPressed,\n.sapMBtn.sapMToggleBtnPressed.sapMBtnEmphasized,\n.sapMBtn.sapMToggleBtnPressed.sapMBtnTransparent {\n text-shadow: none;\n background-color: #0854a0;\n border-color: #0854a0;\n color: #fff;\n}\n.sapMBtn.sapMToggleBtnPressed:focus::after,\n.sapMBtn.sapMToggleBtnPressed.sapMBtnEmphasized:focus::after,\n.sapMBtn.sapMToggleBtnPressed.sapMBtnTransparent:focus::after {\n border-color: #fff;\n}\n.sapMBtn.sapMToggleBtnPressed:active,\n.sapMBtn.sapMToggleBtnPressed.sapMBtnEmphasized:active,\n.sapMBtn.sapMToggleBtnPressed.sapMBtnTransparent:active,\n.sapMBtn.sapMToggleBtnPressed:hover,\n.sapMBtn.sapMToggleBtnPressed.sapMBtnEmphasized:hover,\n.sapMBtn.sapMToggleBtnPressed.sapMBtnTransparent:hover {\n background-color: #085caf;\n border-color: #085caf;\n}\n/* ============================= */\n/* Global Belize parameters */\n/* ============================= */\n/* ===================================== */\n/* Quick Theming */\n/* ===================================== */\n/*\n UX COLOR SET\n*/\n/* PRIMARY COLORS */\n/* ACCENT COLORS */\n/* Semantic Background Colors */\n/* Semantic Border Colors */\n/* Semantic Foreground Elements */\n/* Semantic Text */\n/* Semantic Foreground Colors */\n/* ===================================== */\n/* Expert Theming */\n/* ===================================== */\n/*darken(@sapBrandColor, 10); // no contrast function allowed because background can be gradient*/\n/* darken(@sapButton_Background, 30); //should be #ababab */\n/* contrast(@sapButton_Background, darken(@sapHighlightColor, 10), @sapContent_ContrastTextColor, @sapContent_ContrastTextThreshold); //should be #346187 */\n"} -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_belize/Popover.css: -------------------------------------------------------------------------------- 1 | /* ============================= */ 2 | /* Base theme */ 3 | /* ============================= */ 4 | /* ============================= */ 5 | /* Global Base parameters */ 6 | /* ============================= */ 7 | /* =========================== */ 8 | /* Global CSS for 'base' theme */ 9 | /* =========================== */ 10 | /* shared mixin for arrow shadow*/ 11 | .sapMPopover { 12 | position: fixed; 13 | z-index: 10; 14 | } 15 | .sapMPopoverArr { 16 | pointer-events: none; 17 | display: block; 18 | width: 1rem; 19 | height: 1rem; 20 | position: absolute; 21 | overflow: hidden; 22 | } 23 | .sapMPopoverArr:after { 24 | content: " "; 25 | display: block; 26 | width: 0.7rem; 27 | height: 0.7rem; 28 | background-color: #ffffff; 29 | transform: rotate(-45deg); 30 | } 31 | /* pointing upward arrow */ 32 | .sapMPopoverArrUp { 33 | /* offset */ 34 | left: calc(50% - 0.5625rem); 35 | /* position */ 36 | top: -0.5rem; 37 | height: 0.5625rem; 38 | } 39 | .sapMPopoverArrUp:after { 40 | margin: 0.1875rem 0 0 0.1875rem; 41 | box-shadow: -0.375rem 0.375rem 0.75rem 0 rgba(0, 0, 0, 0.3), 0 0 0.125rem 0 rgba(0, 0, 0, 0.3); 42 | } 43 | /* pointing right arrow */ 44 | .sapMPopoverArrRight { 45 | /* offset */ 46 | top: calc(50% - 0.5625rem); 47 | /* position */ 48 | right: -0.5625rem; 49 | width: 0.5625rem; 50 | } 51 | .sapMPopoverArrRight:after { 52 | margin: 0.1875rem 0 0 -0.375rem; 53 | box-shadow: -0.375rem -0.375rem 0.75rem 0 rgba(0, 0, 0, 0.3), 0 0 0.125rem 0 rgba(0, 0, 0, 0.3); 54 | } 55 | /* pointing downward arrow */ 56 | .sapMPopoverArrDown { 57 | /* offset */ 58 | left: calc(50% - 0.5625rem); 59 | /* position */ 60 | height: 0.5625rem; 61 | } 62 | .sapMPopoverArrDown:after { 63 | margin: -0.375rem 0 0 0.125rem; 64 | box-shadow: 0.375rem -0.375rem 0.75rem 0 rgba(0, 0, 0, 0.3), 0 0 0.125rem 0 rgba(0, 0, 0, 0.3); 65 | } 66 | /* pointing left arrow */ 67 | .sapMPopoverArrLeft { 68 | /* position */ 69 | left: -0.5625rem; 70 | top: calc(50% - 0.5625rem); 71 | width: 0.5625rem; 72 | height: 1rem; 73 | } 74 | .sapMPopoverArrLeft:after { 75 | margin: 0.125rem 0 0 0.25rem; 76 | box-shadow: 0.375rem 0.375rem 0.75rem 0 rgba(0, 0, 0, 0.3), 0 0 0.125rem 0 rgba(0, 0, 0, 0.3); 77 | } 78 | .sapMPopoverArr.sapMPopoverArrHidden { 79 | display: none; 80 | } 81 | /* ============================= */ 82 | /* Global Belize parameters */ 83 | /* ============================= */ 84 | /* ===================================== */ 85 | /* Quick Theming */ 86 | /* ===================================== */ 87 | /* 88 | UX COLOR SET 89 | */ 90 | /* PRIMARY COLORS */ 91 | /* ACCENT COLORS */ 92 | /* Semantic Background Colors */ 93 | /* Semantic Border Colors */ 94 | /* Semantic Foreground Elements */ 95 | /* Semantic Text */ 96 | /* Semantic Foreground Colors */ 97 | /* ===================================== */ 98 | /* Expert Theming */ 99 | /* ===================================== */ 100 | -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_belize/ToggleButton.css: -------------------------------------------------------------------------------- 1 | /* ============================= */ 2 | /* Base theme */ 3 | /* ============================= */ 4 | /* ============================= */ 5 | /* Global Base parameters */ 6 | /* ============================= */ 7 | /* =========================== */ 8 | /* Global CSS for 'base' theme */ 9 | /* =========================== */ 10 | :host(ui5-toggle-button) { 11 | display: inline-block; 12 | min-width: 2.5rem; 13 | height: 2.5rem; 14 | } 15 | ui5-toggle-button { 16 | display: inline-block; 17 | width: auto; 18 | height: 2.5rem; 19 | } 20 | :host(ui5-toggle-button.sapUiSizeCompact) { 21 | height: 1.625rem; 22 | min-width: 2rem; 23 | } 24 | :host(ui5-toggle-button.sapUiSizeCompact) .sapWCIconInButton { 25 | font-size: 1rem; 26 | } 27 | ui5-toggle-button.sapUiSizeCompact { 28 | height: 1.625rem; 29 | min-width: 2rem; 30 | } 31 | ui5-toggle-button.sapUiSizeCompact .sapWCIconInButton { 32 | font-size: 1rem; 33 | } 34 | .sapMBtn.sapMToggleBtnPressed.sapMBtnReject { 35 | background-color: #bb0000; 36 | border-color: #bb0000; 37 | color: #fff; 38 | } 39 | .sapMBtn.sapMToggleBtnPressed.sapMBtnReject:active, 40 | .sapMBtn.sapMToggleBtnPressed.sapMBtnReject:hover { 41 | background-color: #a20000; 42 | border-color: #bb0000; 43 | } 44 | .sapMBtn.sapMToggleBtnPressed.sapMBtnAccept { 45 | background-color: #2b7c2b; 46 | border-color: #2b7c2b; 47 | color: #fff; 48 | } 49 | .sapMBtn.sapMToggleBtnPressed.sapMBtnAccept:active, 50 | .sapMBtn.sapMToggleBtnPressed.sapMBtnAccept:hover { 51 | background-color: #246924; 52 | border-color: #2b7c2b; 53 | } 54 | .sapMBtn.sapMToggleBtnPressed, 55 | .sapMBtn.sapMToggleBtnPressed.sapMBtnEmphasized, 56 | .sapMBtn.sapMToggleBtnPressed.sapMBtnTransparent { 57 | text-shadow: none; 58 | background-color: #346187; 59 | border-color: #2d5475; 60 | color: #fff; 61 | } 62 | .sapMBtn.sapMToggleBtnPressed:focus::after, 63 | .sapMBtn.sapMToggleBtnPressed.sapMBtnEmphasized:focus::after, 64 | .sapMBtn.sapMToggleBtnPressed.sapMBtnTransparent:focus::after { 65 | border-color: #fff; 66 | } 67 | .sapMBtn.sapMToggleBtnPressed:active, 68 | .sapMBtn.sapMToggleBtnPressed.sapMBtnEmphasized:active, 69 | .sapMBtn.sapMToggleBtnPressed.sapMBtnTransparent:active, 70 | .sapMBtn.sapMToggleBtnPressed:hover, 71 | .sapMBtn.sapMToggleBtnPressed.sapMBtnEmphasized:hover, 72 | .sapMBtn.sapMToggleBtnPressed.sapMBtnTransparent:hover { 73 | background-color: #427cac; 74 | border-color: #427cac; 75 | } 76 | /* ============================= */ 77 | /* Global Belize parameters */ 78 | /* ============================= */ 79 | /* ===================================== */ 80 | /* Quick Theming */ 81 | /* ===================================== */ 82 | /* 83 | UX COLOR SET 84 | */ 85 | /* PRIMARY COLORS */ 86 | /* ACCENT COLORS */ 87 | /* Semantic Background Colors */ 88 | /* Semantic Border Colors */ 89 | /* Semantic Foreground Elements */ 90 | /* Semantic Text */ 91 | /* Semantic Foreground Colors */ 92 | /* ===================================== */ 93 | /* Expert Theming */ 94 | /* ===================================== */ 95 | -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_fiori_3/Popup.css: -------------------------------------------------------------------------------- 1 | /* ============================= */ 2 | /* Base theme */ 3 | /* ============================= */ 4 | /* ============================= */ 5 | /* Global Base parameters */ 6 | /* ============================= */ 7 | /* =========================== */ 8 | /* Global CSS for 'base' theme */ 9 | /* =========================== */ 10 | .sapMPopupFrame { 11 | width: 0; 12 | height: 0; 13 | display: none; 14 | visibility: visible; 15 | } 16 | .sapMPopupFrameOpen { 17 | display: inline; 18 | } 19 | .sapMPopup { 20 | color: #fff; 21 | min-width: 6.25rem; 22 | box-sizing: border-box; 23 | outline: none; 24 | max-width: 100%; 25 | max-height: 100%; 26 | background: #fff; 27 | border: none; 28 | box-shadow: 0 0.625rem 1.875rem 0 rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.15); 29 | border-radius: 0.25rem; 30 | min-height: 2rem; 31 | } 32 | .sapMPopup .sapMPopupHeader { 33 | margin: 0; 34 | color: #505559; 35 | font-size: 1rem; 36 | font-weight: 400; 37 | font-family: "72", Arial, Helvetica, sans-serif; 38 | border-bottom: 1px solid #ebebeb; 39 | } 40 | .sapMPopup .sapMPopupHeaderText { 41 | padding: 0 0.25rem; 42 | text-align: center; 43 | height: 3rem; 44 | line-height: 3rem; 45 | } 46 | .sapMPopup .sapMPopupFooter { 47 | font-size: 1rem; 48 | font-weight: 400; 49 | font-family: "72", Arial, Helvetica, sans-serif; 50 | background: #fff; 51 | border-top: 1px solid #ebebeb; 52 | color: #505559; 53 | } 54 | .sapMPopup .sapMPopupContent { 55 | overflow: auto; 56 | position: relative; 57 | box-sizing: border-box; 58 | background-color: #fff; 59 | } 60 | .sapMPopup .sapMPopupScroll { 61 | vertical-align: middle; 62 | box-sizing: border-box; 63 | padding: 0.4375em; 64 | } 65 | .sapUiBLy { 66 | background-color: #000000; 67 | opacity: 0.6; 68 | filter: alpha(opacity=60); 69 | top: 0; 70 | left: 0; 71 | right: 0; 72 | bottom: 0; 73 | position: fixed; 74 | outline: 0 none; 75 | } 76 | .sapMPopupBlockLayer { 77 | visibility: visible; 78 | } 79 | .sapMPopupBlockLayerHidden { 80 | display: none; 81 | } 82 | /* ============================= */ 83 | /* Global Belize parameters */ 84 | /* ============================= */ 85 | /* ===================================== */ 86 | /* Quick Theming */ 87 | /* ===================================== */ 88 | /* 89 | UX COLOR SET 90 | */ 91 | /* PRIMARY COLORS */ 92 | /* ACCENT COLORS */ 93 | /* Semantic Background Colors */ 94 | /* Semantic Border Colors */ 95 | /* Semantic Foreground Elements */ 96 | /* Semantic Text */ 97 | /* Semantic Foreground Colors */ 98 | /* ===================================== */ 99 | /* Expert Theming */ 100 | /* ===================================== */ 101 | /*darken(@sapBrandColor, 10); // no contrast function allowed because background can be gradient*/ 102 | /* darken(@sapButton_Background, 30); //should be #ababab */ 103 | /* contrast(@sapButton_Background, darken(@sapHighlightColor, 10), @sapContent_ContrastTextColor, @sapContent_ContrastTextThreshold); //should be #346187 */ 104 | -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_fiori_3/Label.css: -------------------------------------------------------------------------------- 1 | /* ============================= */ 2 | /* Base theme */ 3 | /* ============================= */ 4 | /* ============================= */ 5 | /* Global Base parameters */ 6 | /* ============================= */ 7 | /* =========================== */ 8 | /* Global CSS for 'base' theme */ 9 | /* =========================== */ 10 | /* ============================ */ 11 | /* CSS for control ui5-label */ 12 | /* Base theme */ 13 | /* ============================ */ 14 | :host(ui5-label) { 15 | display: inline-block; 16 | text-overflow: ellipsis; 17 | overflow: hidden; 18 | white-space: nowrap; 19 | max-width: 100%; 20 | } 21 | .sapMLabel { 22 | color: #6a6d70; 23 | font-size: 0.875rem; 24 | font-family: "72", Arial, Helvetica, sans-serif; 25 | font-weight: normal; 26 | display: inline-block; 27 | text-overflow: ellipsis; 28 | overflow: hidden; 29 | white-space: nowrap; 30 | cursor: text; 31 | } 32 | .sapMLabelBold, 33 | .sapMLabel.sapMLabelBold { 34 | font-weight: bold; 35 | } 36 | .sapMLabelMaxWidth { 37 | max-width: 100%; 38 | } 39 | .sapMLabelRequired:before { 40 | content: "*"; 41 | color: #a5175a; 42 | font-size: 1.25rem; 43 | font-weight: bold; 44 | position: relative; 45 | vertical-align: middle; 46 | line-height: 0; 47 | } 48 | .sapMLabel.sapMLabelMaxWidth.sapMLabelWrapped { 49 | margin: 0.875rem 0; 50 | line-height: 1.4rem; 51 | } 52 | /* Label Wrapping */ 53 | .sapMLabel.sapMLabelWrapped { 54 | white-space: pre-line; 55 | overflow: hidden; 56 | text-overflow: ellipsis; 57 | } 58 | /* Label as ui5-checkbox and ui5-radiobutton text */ 59 | :host(ui5-label.labelInCheckbox) .sapMLabel, 60 | :host(ui5-label.labelInRadioButton) .sapMLabel { 61 | cursor: default; 62 | } 63 | :host(ui5-label.labelInCheckbox) .sapMLabel.sapMLabelMaxWidth.sapMLabelWrapped.sapMLabelWrapped { 64 | margin: 0.675rem 0; 65 | } 66 | :host(ui5-label.labelInCheckbox) .sapUiSizeCompact .sapMLabel.sapMLabelMaxWidth.sapMLabelWrapped.sapMLabelWrapped { 67 | margin: 0.25rem 0; 68 | } 69 | /* ============================= */ 70 | /* Global Belize parameters */ 71 | /* ============================= */ 72 | /* ===================================== */ 73 | /* Quick Theming */ 74 | /* ===================================== */ 75 | /* 76 | UX COLOR SET 77 | */ 78 | /* PRIMARY COLORS */ 79 | /* ACCENT COLORS */ 80 | /* Semantic Background Colors */ 81 | /* Semantic Border Colors */ 82 | /* Semantic Foreground Elements */ 83 | /* Semantic Text */ 84 | /* Semantic Foreground Colors */ 85 | /* ===================================== */ 86 | /* Expert Theming */ 87 | /* ===================================== */ 88 | /*darken(@sapBrandColor, 10); // no contrast function allowed because background can be gradient*/ 89 | /* darken(@sapButton_Background, 30); //should be #ababab */ 90 | /* contrast(@sapButton_Background, darken(@sapHighlightColor, 10), @sapContent_ContrastTextColor, @sapContent_ContrastTextThreshold); //should be #346187 */ 91 | /* ============================ */ 92 | /* CSS for control sap.m/Label */ 93 | /* Belize theme */ 94 | /* ============================ */ 95 | -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_fiori_3/List.json: -------------------------------------------------------------------------------- 1 | {"_":"/* ============================= */\n/* Base theme */\n/* ============================= */\n/* ============================= */\n/* Global Base parameters */\n/* ============================= */\n/* =========================== */\n/* Global CSS for 'base' theme */\n/* =========================== */\n/* =============================== */\n/* CSS for ui5-list */\n/* Base theme */\n/* =============================== */\nui5-list,\n:host(ui5-list) {\n display: block;\n max-width: 100%;\n}\n.sapMList {\n width: 100%;\n height: 100%;\n position: relative;\n box-sizing: border-box;\n}\n.sapMList.sapMListInsetBG {\n padding: 2rem;\n}\n.sapMList .sapMListUl {\n list-style-type: none;\n padding: 0;\n margin: 0;\n}\n.sapMList .sapMListUl:focus {\n outline: none;\n}\n.sapMList .sapMListDummyArea {\n position: fixed;\n /* keep it in the visible viewport, so that IE does not scroll on focus */\n}\n.sapMList .sapMListNoData {\n list-style-type: none;\n display: -webkit-box;\n display: flex;\n -webkit-box-align: center;\n align-items: center;\n -webkit-box-pack: center;\n justify-content: center;\n color: #32363a;\n background-color: #fff;\n border-bottom: 1px solid #ededed;\n padding: 0 1rem !important;\n height: 3rem;\n}\n.sapMList .sapMListHdrText {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n box-sizing: border-box;\n font-size: 1.125rem;\n font-family: \"72\", Arial, Helvetica, sans-serif;\n color: #32363a;\n height: 3rem;\n line-height: 3rem;\n padding: 0 1rem;\n background-color: transparent;\n border-bottom: 1px solid #d9d9d9;\n}\n.sapMList .sapMListFtr {\n height: 2rem;\n box-sizing: border-box;\n -webkit-text-size-adjust: none;\n /* To improve readability Mobile Safari automatically increases the size of small text so let's disable this */\n font-size: 0.875rem;\n line-height: 2rem;\n background-color: #fafafa;\n color: #32363a;\n padding: 0 1rem;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.sapMList .sapMListShowSeparatorsNone .sapMListNoData {\n border-bottom: 0px;\n}\n.sapMList .sapMListNoDataText {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n/* Compact size */\n.sapUiSizeCompact .sapMList .sapMListNoData {\n height: 2rem;\n font-size: 0.875rem;\n}\n/* ============================= */\n/* Global Fiori3 parameters */\n/* ============================= */\n/* ===================================== */\n/* Quick Theming */\n/* ===================================== */\n/*\n UX COLOR SET\n*/\n/* PRIMARY COLORS */\n/* ACCENT COLORS */\n/* Semantic Background Colors */\n/* Semantic Border Colors */\n/* Semantic Foreground Elements */\n/* Semantic Text */\n/* Semantic Foreground Colors */\n/* ===================================== */\n/* Expert Theming */\n/* ===================================== */\n/*darken(@sapBrandColor, 10); // no contrast function allowed because background can be gradient*/\n/* darken(@sapButton_Background, 30); //should be #ababab */\n/* contrast(@sapButton_Background, darken(@sapHighlightColor, 10), @sapContent_ContrastTextColor, @sapContent_ContrastTextThreshold); //should be #346187 */\n"} -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_belize/Title.css: -------------------------------------------------------------------------------- 1 | /* ============================= */ 2 | /* Base theme */ 3 | /* ============================= */ 4 | /* ============================= */ 5 | /* Global Base parameters */ 6 | /* ============================= */ 7 | /* =========================== */ 8 | /* Global CSS for 'base' theme */ 9 | /* =========================== */ 10 | /* ============================ */ 11 | /* CSS for control sap.m/Title */ 12 | /* Base theme */ 13 | /* ============================ */ 14 | :host(ui5-title) { 15 | white-space: nowrap; 16 | overflow: hidden; 17 | text-overflow: ellipsis; 18 | } 19 | .sapMTitle { 20 | display: inline-block; 21 | position: relative; 22 | max-width: 100%; 23 | min-width: 1px; 24 | font-weight: normal; 25 | font-family: "72", Arial, Helvetica, sans-serif; 26 | color: #333333; 27 | overflow: hidden; 28 | text-overflow: ellipsis; 29 | text-shadow: 0 0 0.125rem #fff; 30 | white-space: nowrap; 31 | vertical-align: bottom; 32 | margin: 0; 33 | -webkit-margin-before: 0; 34 | -webkit-margin-after: 0; 35 | -webkit-margin-start: 0; 36 | -webkit-margin-end: 0; 37 | box-sizing: border-box; 38 | cursor: text; 39 | } 40 | .sapMTitle.sapMTitleWrap { 41 | white-space: pre-line; 42 | } 43 | /* Alignments */ 44 | .sapMTitleAlignBegin { 45 | text-align: left; 46 | text-align: start; 47 | } 48 | [data-sap-ui-wc-root][dir=rtl][data-sap-ui-browser^="ie"] .sapMTitleAlignBegin, 49 | [data-sap-ui-wc-root][dir=rtl][data-sap-ui-browser^="ed"] .sapMTitleAlignBegin { 50 | text-align: right; 51 | } 52 | .sapMTitleAlignLeft { 53 | text-align: left; 54 | } 55 | .sapMTitleAlignEnd { 56 | text-align: right; 57 | text-align: end; 58 | } 59 | [data-sap-ui-wc-root][dir=rtl][data-sap-ui-browser^="ie"] .sapMTitleAlignEnd, 60 | [data-sap-ui-wc-root][dir=rtl][data-sap-ui-browser^="ed"] .sapMTitleAlignEnd { 61 | text-align: left; 62 | } 63 | .sapMTitleAlignRight { 64 | text-align: right; 65 | } 66 | .sapMTitleAlignCenter { 67 | text-align: center; 68 | } 69 | /* Title levels */ 70 | /* Level H1 */ 71 | .sapMTitleStyleH1 { 72 | font-size: 1.625rem; 73 | } 74 | /* Level H2 */ 75 | .sapMTitleStyleH2 { 76 | font-size: 1.375rem; 77 | } 78 | /* Level H3 */ 79 | .sapMTitleStyleH3 { 80 | font-size: 1.25rem; 81 | } 82 | /* Level H4 */ 83 | .sapMTitleStyleH4 { 84 | font-size: 1.125rem; 85 | } 86 | /* Level H5 */ 87 | .sapMTitleStyleH5 { 88 | font-size: 1rem; 89 | } 90 | /* Level H6 */ 91 | .sapMTitleStyleH6 { 92 | font-size: 0.875rem; 93 | } 94 | /* ============================= */ 95 | /* Global Belize parameters */ 96 | /* ============================= */ 97 | /* ===================================== */ 98 | /* Quick Theming */ 99 | /* ===================================== */ 100 | /* 101 | UX COLOR SET 102 | */ 103 | /* PRIMARY COLORS */ 104 | /* ACCENT COLORS */ 105 | /* Semantic Background Colors */ 106 | /* Semantic Border Colors */ 107 | /* Semantic Foreground Elements */ 108 | /* Semantic Text */ 109 | /* Semantic Foreground Colors */ 110 | /* ===================================== */ 111 | /* Expert Theming */ 112 | /* ===================================== */ 113 | -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_belize/ListItemBase.json: -------------------------------------------------------------------------------- 1 | {"_":"/* ============================= */\n/* Base theme */\n/* ============================= */\n/* ============================= */\n/* Global Base parameters */\n/* ============================= */\n/* =========================== */\n/* Global CSS for 'base' theme */\n/* =========================== */\n/* =================================== */\n/* CSS for control sap.m/ListItemBase */\n/* Base theme */\n/* =================================== */\n:host(ui5-li),\n:host(ui5-li-custom) {\n display: block;\n}\n.sapMLIB {\n display: -webkit-box;\n display: flex;\n height: 3rem;\n -webkit-box-align: center;\n align-items: center;\n position: relative;\n background: #ffffff;\n padding: 0 1rem 0 1rem;\n box-sizing: border-box;\n}\n.sapMLIBHoverable:hover {\n background: #f0f0f0;\n}\n.sapMLIB.sapMLIBSelected {\n background: #e8eff6;\n}\n.sapMLIB.sapMLIBActive {\n color: #fff;\n background: #427cac;\n}\n.sapMLIB.sapMLIBHoverable.sapMLIBSelected:hover {\n background: #dde8f1;\n}\n.sapMLIB.sapMLIBHoverable.sapMLIBSelected.sapMLIBActive:hover {\n background: #427cac;\n}\n.sapMLIB.sapMLIBFocusable:focus {\n outline: none;\n}\n.sapMLIB.sapMLIBFocusable:focus:after,\n.sapMLIB.sapMLIBFocusable .sapMLIBContent:focus:after {\n content: \"\";\n border: 1px dotted #000;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n pointer-events: none;\n}\n.sapMLIB.sapMLIBActive.sapMLIBFocusable:focus,\n.sapMLIB.sapMLIBActive.sapMLIBFocusable .sapMLIBContent:focus {\n outline-color: #fff;\n}\n.sapMLIB.sapMLIBTransparent {\n background: rgba(255, 255, 255, 0);\n}\n.sapMLIB.sapMLIBBorder {\n border-bottom: 1px solid #e5e5e5;\n}\n.sapMLIB.sapMLIBActive .sapMLIBImgNav {\n color: #fff;\n}\n.sapMLIBImgNav {\n -webkit-box-flex: 0;\n flex: none;\n width: 3rem;\n font-size: 0.75rem;\n color: #878787;\n text-align: center;\n box-sizing: border-box;\n}\n.sapMLIBContent {\n max-width: 100%;\n min-height: 100%;\n font-family: \"72\", Arial, Helvetica, sans-serif;\n}\n/* IE ignores outline-offset. Use an overlay: */\n.sapMLIBLegacyOutline:focus {\n outline: none;\n position: relative;\n}\n.sapMLIBLegacyOutline:focus::before {\n content: \"\";\n border: 0;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n pointer-events: none;\n border: 1px dotted #000;\n}\n.sapMLIBActionable,\n.sapMLIBActionable > .sapMLIBImgNav {\n cursor: pointer;\n}\n.sapMLIBFocusable.sapMLIBLegacyOutline:focus {\n outline: none;\n}\n:not(.sapMListModeDelete) > .sapMLIB.sapMLIBTypeNavigation {\n padding-right: 0;\n}\n/* ============================= */\n/* Global Belize parameters */\n/* ============================= */\n/* ===================================== */\n/* Quick Theming */\n/* ===================================== */\n/*\n UX COLOR SET\n*/\n/* PRIMARY COLORS */\n/* ACCENT COLORS */\n/* Semantic Background Colors */\n/* Semantic Border Colors */\n/* Semantic Foreground Elements */\n/* Semantic Text */\n/* Semantic Foreground Colors */\n/* ===================================== */\n/* Expert Theming */\n/* ===================================== */\n/* =================================== */\n/* CSS for control sap.m/ListItemBase */\n/* Belize theme */\n/* =================================== */\n"} -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_fiori_3/TextArea.json: -------------------------------------------------------------------------------- 1 | {"_":"/* ============================= */\n/* Base theme */\n/* ============================= */\n/* ============================= */\n/* Global Base parameters */\n/* ============================= */\n/* =========================== */\n/* Global CSS for 'base' theme */\n/* =========================== */\n.sapWCTextArea {\n height: 3rem;\n background: transparent;\n display: inline-block;\n vertical-align: top;\n outline: none;\n position: relative;\n overflow: hidden;\n}\n.sapWCTextAreaMirror ~ .sapWCTextAreaInner {\n height: 100%;\n width: 100%;\n top: 0;\n position: absolute;\n}\n.sapWCTextAreaGrowing.sapWCTextAreaNoMaxLines .sapWCTextAreaInner,\n.sapWCTextAreaGrowing.sapWCTextAreaNoMaxLines .sapWCTextAreaMirror {\n overflow: hidden;\n}\n.sapWCTextAreaMirror {\n line-height: 1.4;\n visibility: hidden;\n width: 100%;\n word-break: break-all;\n padding: 0.5625rem 0.6875rem;\n font-size: 0.875rem;\n font-family: \"72\", Arial, Helvetica, sans-serif;\n white-space: pre-wrap;\n}\n.sapWCTextAreaInner {\n width: 100%;\n margin: 0;\n padding: 0.5625rem 0.6875rem;\n line-height: 1.4;\n box-sizing: border-box;\n color: #32363a;\n background: #fff;\n border: 1px solid #89919a;\n outline: none;\n font-size: 0.875rem;\n font-family: \"72\", Arial, Helvetica, sans-serif;\n -webkit-appearance: none;\n -moz-appearance: textfield;\n overflow: auto;\n resize: none;\n}\n.sapWCTextAreaInner:focus::after {\n content: \"\";\n width: 10px;\n height: 10px;\n background-color: red;\n}\n.sapWCTextAreaGrowing.sapWCTextAreaNoCols .sapWCTextAreaInner {\n overflow: hidden;\n width: 100%;\n}\n.sapWCTextAreaInner::-webkit-input-placeholder {\n font-size: 0.875rem;\n font-style: italic;\n}\n.sapWCTextAreaInner::-moz-placeholder {\n font-size: 0.875rem;\n font-style: italic;\n}\n.sapWCTextAreaInner:-ms-input-placeholder {\n font-size: 0.875rem;\n font-style: italic;\n}\n.sapWCTextAreaWithCounter .sapWCTextAreaInner {\n height: calc(100% - 16px);\n}\n.sapWCTextAreaCounter {\n text-align: right;\n font-size: 0.875rem;\n font-family: \"72\", Arial, Helvetica, sans-serif;\n}\n.sapCustomTextAreaWarningInner {\n border: 1px solid;\n background: #fff;\n border-color: #e9730c;\n}\n.sapWCTextAreaContent {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n.sapWCTextAreaExceededText {\n float: right;\n overflow: hidden;\n padding: 0.125rem 0.125rem 0.5rem;\n font-family: \"72\", Arial, Helvetica, sans-serif;\n font-size: 0.75rem;\n}\n/* ============================= */\n/* Global Belize parameters */\n/* ============================= */\n/* ===================================== */\n/* Quick Theming */\n/* ===================================== */\n/*\n UX COLOR SET\n*/\n/* PRIMARY COLORS */\n/* ACCENT COLORS */\n/* Semantic Background Colors */\n/* Semantic Border Colors */\n/* Semantic Foreground Elements */\n/* Semantic Text */\n/* Semantic Foreground Colors */\n/* ===================================== */\n/* Expert Theming */\n/* ===================================== */\n/*darken(@sapBrandColor, 10); // no contrast function allowed because background can be gradient*/\n/* darken(@sapButton_Background, 30); //should be #ababab */\n/* contrast(@sapButton_Background, darken(@sapHighlightColor, 10), @sapContent_ContrastTextColor, @sapContent_ContrastTextThreshold); //should be #346187 */\n"} -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_fiori_3/Popover.css: -------------------------------------------------------------------------------- 1 | /* ============================= */ 2 | /* Base theme */ 3 | /* ============================= */ 4 | /* ============================= */ 5 | /* Global Base parameters */ 6 | /* ============================= */ 7 | /* =========================== */ 8 | /* Global CSS for 'base' theme */ 9 | /* =========================== */ 10 | /* shared mixin for arrow shadow*/ 11 | .sapMPopover { 12 | position: fixed; 13 | z-index: 10; 14 | } 15 | .sapMPopoverArr { 16 | pointer-events: none; 17 | display: block; 18 | width: 1rem; 19 | height: 1rem; 20 | position: absolute; 21 | overflow: hidden; 22 | } 23 | .sapMPopoverArr:after { 24 | content: " "; 25 | display: block; 26 | width: 0.7rem; 27 | height: 0.7rem; 28 | background-color: #fff; 29 | transform: rotate(-45deg); 30 | } 31 | /* pointing upward arrow */ 32 | .sapMPopoverArrUp { 33 | /* offset */ 34 | left: calc(50% - 0.5625rem); 35 | /* position */ 36 | top: -0.5rem; 37 | height: 0.5625rem; 38 | } 39 | .sapMPopoverArrUp:after { 40 | margin: 0.1875rem 0 0 0.1875rem; 41 | box-shadow: -0.375rem 0.375rem 0.75rem 0 rgba(0, 0, 0, 0.3), 0 0 0.125rem 0 rgba(0, 0, 0, 0.3); 42 | } 43 | /* pointing right arrow */ 44 | .sapMPopoverArrRight { 45 | /* offset */ 46 | top: calc(50% - 0.5625rem); 47 | /* position */ 48 | right: -0.5625rem; 49 | width: 0.5625rem; 50 | } 51 | .sapMPopoverArrRight:after { 52 | margin: 0.1875rem 0 0 -0.375rem; 53 | box-shadow: -0.375rem -0.375rem 0.75rem 0 rgba(0, 0, 0, 0.3), 0 0 0.125rem 0 rgba(0, 0, 0, 0.3); 54 | } 55 | /* pointing downward arrow */ 56 | .sapMPopoverArrDown { 57 | /* offset */ 58 | left: calc(50% - 0.5625rem); 59 | /* position */ 60 | height: 0.5625rem; 61 | } 62 | .sapMPopoverArrDown:after { 63 | margin: -0.375rem 0 0 0.125rem; 64 | box-shadow: 0.375rem -0.375rem 0.75rem 0 rgba(0, 0, 0, 0.3), 0 0 0.125rem 0 rgba(0, 0, 0, 0.3); 65 | } 66 | /* pointing left arrow */ 67 | .sapMPopoverArrLeft { 68 | /* position */ 69 | left: -0.5625rem; 70 | top: calc(50% - 0.5625rem); 71 | width: 0.5625rem; 72 | height: 1rem; 73 | } 74 | .sapMPopoverArrLeft:after { 75 | margin: 0.125rem 0 0 0.25rem; 76 | box-shadow: 0.375rem 0.375rem 0.75rem 0 rgba(0, 0, 0, 0.3), 0 0 0.125rem 0 rgba(0, 0, 0, 0.3); 77 | } 78 | .sapMPopoverArr.sapMPopoverArrHidden { 79 | display: none; 80 | } 81 | /* ============================= */ 82 | /* Global Belize parameters */ 83 | /* ============================= */ 84 | /* ===================================== */ 85 | /* Quick Theming */ 86 | /* ===================================== */ 87 | /* 88 | UX COLOR SET 89 | */ 90 | /* PRIMARY COLORS */ 91 | /* ACCENT COLORS */ 92 | /* Semantic Background Colors */ 93 | /* Semantic Border Colors */ 94 | /* Semantic Foreground Elements */ 95 | /* Semantic Text */ 96 | /* Semantic Foreground Colors */ 97 | /* ===================================== */ 98 | /* Expert Theming */ 99 | /* ===================================== */ 100 | /*darken(@sapBrandColor, 10); // no contrast function allowed because background can be gradient*/ 101 | /* darken(@sapButton_Background, 30); //should be #ababab */ 102 | /* contrast(@sapButton_Background, darken(@sapHighlightColor, 10), @sapContent_ContrastTextColor, @sapContent_ContrastTextThreshold); //should be #346187 */ 103 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, ViewChild, ElementRef, ViewEncapsulation } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'], 7 | encapsulation: ViewEncapsulation.None 8 | }) 9 | 10 | export class AppComponent { 11 | @Input() selectionChange; 12 | 13 | @ViewChild('dialog') oDialog: ElementRef; 14 | @ViewChild('dialogInput') oDialogInput: ElementRef; 15 | @ViewChild('dialogDatePicker') oDialogDatePicker: ElementRef; 16 | dialogText: string; 17 | dialogDate: string; 18 | 19 | title = 'app'; 20 | todos: Array = [ 21 | { 22 | text: 'Get some carrots', 23 | id: 1, 24 | deadline: '27/7/2018', 25 | done: false 26 | }, 27 | { 28 | text: 'Do some magic', 29 | id: 2, 30 | deadline: '22/7/2018', 31 | done: false 32 | }, 33 | { 34 | text: 'Go to the gym', 35 | id: 3, 36 | deadline: '24/7/2018', 37 | done: false 38 | }, 39 | { 40 | text: 'Buy milk', 41 | id: 4, 42 | deadline: '30/7/2018', 43 | done: false 44 | }, 45 | { 46 | text: 'Eat some fruits', 47 | id: 5, 48 | deadline: '29/7/2018', 49 | done: true 50 | } 51 | ]; 52 | id = 5; 53 | done = []; 54 | unDone = []; 55 | oItemToEdit: Todo = this.todos[0]; 56 | 57 | constructor() { 58 | this.syncTodos(); 59 | } 60 | 61 | handleAddTodo($event) { 62 | const newTodo: Todo = { 63 | text: $event.text, 64 | id: ++this.id, 65 | deadline: $event.date, 66 | done: false 67 | }; 68 | 69 | this.todos.push(newTodo); 70 | this.syncTodos(); 71 | } 72 | 73 | syncTodos() { 74 | this.done = this.todos.filter(todo => todo.done); 75 | this.unDone = this.todos.filter(todo => !todo.done); 76 | } 77 | 78 | editItem($event) { 79 | this.oItemToEdit = this.todos.find((oTodo) => { 80 | return oTodo.id === $event.id; 81 | }); 82 | this.oDialog.nativeElement.show(); 83 | } 84 | 85 | handleUndone($event) { 86 | const oCheckedIds = new Set(this.done.map(todo => todo.id)); 87 | 88 | $event.selected.map((todo => { 89 | oCheckedIds.add(parseInt(todo.id, 10)); 90 | })); 91 | 92 | this.todos.map((todo) => { 93 | todo.done = oCheckedIds.has(todo.id); 94 | }); 95 | 96 | this.syncTodos(); 97 | } 98 | 99 | handleDone($event) { 100 | const oCheckedIds = new Set($event.selected.map(todo => parseInt(todo.id, 10))); 101 | const oToUncheck = new Set(); 102 | 103 | this.done.forEach((todo => { 104 | if (!oCheckedIds.has(todo.id)) { 105 | oToUncheck.add(todo.id); 106 | } 107 | })); 108 | 109 | this.todos.forEach((todo) => { 110 | todo.done = !oToUncheck.has(todo.id) && todo.done; 111 | }); 112 | this.syncTodos(); 113 | } 114 | 115 | removeItem($event) { 116 | this.todos = this.todos.filter(todo => todo.id !== $event); 117 | this.syncTodos(); 118 | } 119 | 120 | closeDialog() { 121 | this.oDialog.nativeElement.close(); 122 | } 123 | 124 | saveDialog() { 125 | this.todos.map((oTodo) => { 126 | if (oTodo.id === this.oItemToEdit.id) { 127 | oTodo.text = this.oDialogInput.nativeElement.value; 128 | oTodo.deadline = this.oDialogDatePicker.nativeElement.value; 129 | return; 130 | } 131 | }); 132 | 133 | this.closeDialog(); 134 | } 135 | } 136 | 137 | 138 | interface Todo { 139 | text: string; 140 | id: number; 141 | deadline: string; 142 | done: boolean; 143 | } 144 | -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_belize/Card.json: -------------------------------------------------------------------------------- 1 | {"_":"/* ============================= */\n/* Base theme */\n/* ============================= */\n/* ============================= */\n/* Global Base parameters */\n/* ============================= */\n/* =========================== */\n/* Global CSS for 'base' theme */\n/* =========================== */\n:host(ui5-card) {\n display: inline-block;\n}\nui5-card,\n:host(ui5-card) {\n display: inline-block;\n width: 100%;\n}\n.sapFCard {\n background: #ffffff;\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);\n border-radius: 0.25rem;\n border: 1px solid #cccccc;\n width: 100%;\n height: 100%;\n overflow: hidden;\n font-family: \"72\", Arial, Helvetica, sans-serif;\n font-size: 16px;\n color: #333333;\n}\n.sapFCard .sapFCardHeader {\n background: #ffffff;\n border-bottom: 1px solid #cccccc;\n padding: 1rem;\n display: flex;\n align-items: flex-start;\n}\n.sapFCard .sapFCardHeader:hover {\n background: #fafafa;\n}\n.sapFCard .sapFCardHeader:active {\n background: #f0f0f0;\n}\n.sapFCard .sapFCardHeader .sapFCardAvatar {\n height: 3rem;\n width: 3rem;\n margin-right: 0.75rem;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.sapFCard .sapFCardHeader .sapFCardAvatar .sapFCardHeaderIcon {\n font-size: 1.5rem;\n color: #93b7d6;\n}\n.sapFCard .sapFCardHeader .sapFCardHeaderText {\n flex: 1;\n}\n.sapFCard .sapFCardHeader .sapFCardHeaderText .sapFCardTitle {\n font-family: \"72\", Arial, Helvetica, sans-serif;\n font-size: 1rem;\n font-weight: normal;\n color: #333333;\n white-space: normal;\n word-wrap: break-word;\n overflow: hidden;\n text-align: left;\n text-overflow: ellipsis;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n max-width: 100%;\n max-height: 3.5rem;\n}\n.sapFCard .sapFCardHeader .sapFCardHeaderText .sapFCardSubtitle {\n font-family: \"72\", Arial, Helvetica, sans-serif;\n font-size: 0.875rem;\n font-weight: normal;\n color: #666666;\n white-space: normal;\n word-wrap: break-word;\n overflow: hidden;\n text-align: left;\n text-overflow: ellipsis;\n margin-top: 0.5rem;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n max-width: 100%;\n max-height: 2.1rem;\n}\n.sapFCard .sapFCardHeader .sapFCardStatus {\n font-family: \"72\", Arial, Helvetica, sans-serif;\n font-size: 0.75rem;\n color: #666666;\n text-align: left;\n line-height: 1.125rem;\n padding-left: 1rem;\n margin-left: auto;\n text-wrap: avoid;\n display: inline-block;\n}\n.sapFCard .sapFCardContent .sapFCardListItem {\n width: 100%;\n}\n.sapFCard .sapFCardContent .sapFCardListItemTitle {\n overflow: hidden;\n text-overflow: ellipsis;\n color: #333333;\n font-size: 1rem;\n}\n.sapFCard .sapFCardContent .sapFCardListItemDescription {\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: 0.875rem;\n color: #666666;\n}\n/* ============================= */\n/* Global Belize parameters */\n/* ============================= */\n/* ===================================== */\n/* Quick Theming */\n/* ===================================== */\n/*\n UX COLOR SET\n*/\n/* PRIMARY COLORS */\n/* ACCENT COLORS */\n/* Semantic Background Colors */\n/* Semantic Border Colors */\n/* Semantic Foreground Elements */\n/* Semantic Text */\n/* Semantic Foreground Colors */\n/* ===================================== */\n/* Expert Theming */\n/* ===================================== */\n"} -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_fiori_3/ToggleButton.css: -------------------------------------------------------------------------------- 1 | /* ============================= */ 2 | /* Base theme */ 3 | /* ============================= */ 4 | /* ============================= */ 5 | /* Global Base parameters */ 6 | /* ============================= */ 7 | /* =========================== */ 8 | /* Global CSS for 'base' theme */ 9 | /* =========================== */ 10 | :host(ui5-toggle-button) { 11 | display: inline-block; 12 | min-width: 2.25rem; 13 | height: 2.25rem; 14 | } 15 | ui5-toggle-button { 16 | display: inline-block; 17 | width: auto; 18 | height: 2.5rem; 19 | } 20 | :host(ui5-toggle-button.sapUiSizeCompact) { 21 | height: 1.625rem; 22 | min-width: 2rem; 23 | } 24 | :host(ui5-toggle-button.sapUiSizeCompact) .sapWCIconInButton { 25 | font-size: 1rem; 26 | } 27 | ui5-toggle-button.sapUiSizeCompact { 28 | height: 1.625rem; 29 | min-width: 2rem; 30 | } 31 | ui5-toggle-button.sapUiSizeCompact .sapWCIconInButton { 32 | font-size: 1rem; 33 | } 34 | .sapMBtn.sapMToggleBtnPressed.sapMBtnReject { 35 | background-color: #a20000; 36 | border-color: #a20000; 37 | color: #fff; 38 | } 39 | .sapMBtn.sapMToggleBtnPressed.sapMBtnReject:active, 40 | .sapMBtn.sapMToggleBtnPressed.sapMBtnReject:hover { 41 | background-color: #880000; 42 | border-color: #a20000; 43 | } 44 | .sapMBtn.sapMToggleBtnPressed.sapMBtnAccept { 45 | background-color: #0d6733; 46 | border-color: #0d6733; 47 | color: #fff; 48 | } 49 | .sapMBtn.sapMToggleBtnPressed.sapMBtnAccept:active, 50 | .sapMBtn.sapMToggleBtnPressed.sapMBtnAccept:hover { 51 | background-color: #0a5128; 52 | border-color: #0d6733; 53 | } 54 | .sapMBtn.sapMToggleBtnPressed, 55 | .sapMBtn.sapMToggleBtnPressed.sapMBtnEmphasized, 56 | .sapMBtn.sapMToggleBtnPressed.sapMBtnTransparent { 57 | text-shadow: none; 58 | background-color: #0854a0; 59 | border-color: #0854a0; 60 | color: #fff; 61 | } 62 | .sapMBtn.sapMToggleBtnPressed:focus::after, 63 | .sapMBtn.sapMToggleBtnPressed.sapMBtnEmphasized:focus::after, 64 | .sapMBtn.sapMToggleBtnPressed.sapMBtnTransparent:focus::after { 65 | border-color: #fff; 66 | } 67 | .sapMBtn.sapMToggleBtnPressed:active, 68 | .sapMBtn.sapMToggleBtnPressed.sapMBtnEmphasized:active, 69 | .sapMBtn.sapMToggleBtnPressed.sapMBtnTransparent:active, 70 | .sapMBtn.sapMToggleBtnPressed:hover, 71 | .sapMBtn.sapMToggleBtnPressed.sapMBtnEmphasized:hover, 72 | .sapMBtn.sapMToggleBtnPressed.sapMBtnTransparent:hover { 73 | background-color: #085caf; 74 | border-color: #085caf; 75 | } 76 | /* ============================= */ 77 | /* Global Belize parameters */ 78 | /* ============================= */ 79 | /* ===================================== */ 80 | /* Quick Theming */ 81 | /* ===================================== */ 82 | /* 83 | UX COLOR SET 84 | */ 85 | /* PRIMARY COLORS */ 86 | /* ACCENT COLORS */ 87 | /* Semantic Background Colors */ 88 | /* Semantic Border Colors */ 89 | /* Semantic Foreground Elements */ 90 | /* Semantic Text */ 91 | /* Semantic Foreground Colors */ 92 | /* ===================================== */ 93 | /* Expert Theming */ 94 | /* ===================================== */ 95 | /*darken(@sapBrandColor, 10); // no contrast function allowed because background can be gradient*/ 96 | /* darken(@sapButton_Background, 30); //should be #ababab */ 97 | /* contrast(@sapButton_Background, darken(@sapHighlightColor, 10), @sapContent_ContrastTextColor, @sapContent_ContrastTextThreshold); //should be #346187 */ 98 | -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_belize/List.css: -------------------------------------------------------------------------------- 1 | /* ============================= */ 2 | /* Base theme */ 3 | /* ============================= */ 4 | /* ============================= */ 5 | /* Global Base parameters */ 6 | /* ============================= */ 7 | /* =========================== */ 8 | /* Global CSS for 'base' theme */ 9 | /* =========================== */ 10 | /* =============================== */ 11 | /* CSS for ui5-list */ 12 | /* Base theme */ 13 | /* =============================== */ 14 | ui5-list, 15 | :host(ui5-list) { 16 | display: block; 17 | max-width: 100%; 18 | } 19 | .sapMList { 20 | width: 100%; 21 | height: 100%; 22 | position: relative; 23 | box-sizing: border-box; 24 | } 25 | .sapMList.sapMListInsetBG { 26 | padding: 2rem; 27 | } 28 | .sapMList .sapMListUl { 29 | list-style-type: none; 30 | padding: 0; 31 | margin: 0; 32 | } 33 | .sapMList .sapMListUl:focus { 34 | outline: none; 35 | } 36 | .sapMList .sapMListDummyArea { 37 | position: fixed; 38 | /* keep it in the visible viewport, so that IE does not scroll on focus */ 39 | } 40 | .sapMList .sapMListNoData { 41 | list-style-type: none; 42 | display: -webkit-box; 43 | display: flex; 44 | -webkit-box-align: center; 45 | align-items: center; 46 | -webkit-box-pack: center; 47 | justify-content: center; 48 | color: #333333; 49 | background-color: #ffffff; 50 | border-bottom: 1px solid #e5e5e5; 51 | padding: 0 1rem !important; 52 | height: 3rem; 53 | } 54 | .sapMList .sapMListHdrText { 55 | overflow: hidden; 56 | white-space: nowrap; 57 | text-overflow: ellipsis; 58 | box-sizing: border-box; 59 | font-size: 1.125rem; 60 | font-family: "72", Arial, Helvetica, sans-serif; 61 | color: #333333; 62 | height: 3rem; 63 | line-height: 3rem; 64 | padding: 0 1rem; 65 | background-color: transparent; 66 | border-bottom: 1px solid #cccccc; 67 | } 68 | .sapMList .sapMListFtr { 69 | height: 2rem; 70 | box-sizing: border-box; 71 | -webkit-text-size-adjust: none; 72 | /* To improve readability Mobile Safari automatically increases the size of small text so let's disable this */ 73 | font-size: 0.875rem; 74 | line-height: 2rem; 75 | background-color: #ceddec; 76 | color: #333333; 77 | padding: 0 1rem; 78 | white-space: nowrap; 79 | overflow: hidden; 80 | text-overflow: ellipsis; 81 | } 82 | .sapMList .sapMListShowSeparatorsNone .sapMListNoData { 83 | border-bottom: 0px; 84 | } 85 | .sapMList .sapMListNoDataText { 86 | overflow: hidden; 87 | text-overflow: ellipsis; 88 | white-space: nowrap; 89 | } 90 | /* Compact size */ 91 | .sapUiSizeCompact .sapMList .sapMListNoData { 92 | height: 2rem; 93 | font-size: 0.875rem; 94 | } 95 | /* ============================= */ 96 | /* Global Belize parameters */ 97 | /* ============================= */ 98 | /* ===================================== */ 99 | /* Quick Theming */ 100 | /* ===================================== */ 101 | /* 102 | UX COLOR SET 103 | */ 104 | /* PRIMARY COLORS */ 105 | /* ACCENT COLORS */ 106 | /* Semantic Background Colors */ 107 | /* Semantic Border Colors */ 108 | /* Semantic Foreground Elements */ 109 | /* Semantic Text */ 110 | /* Semantic Foreground Colors */ 111 | /* ===================================== */ 112 | /* Expert Theming */ 113 | /* ===================================== */ 114 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rulesDirectory": [ 3 | "codelyzer" 4 | ], 5 | "rules": { 6 | "arrow-return-shorthand": true, 7 | "callable-types": true, 8 | "class-name": true, 9 | "comment-format": [ 10 | true, 11 | "check-space" 12 | ], 13 | "curly": true, 14 | "deprecation": { 15 | "severity": "warn" 16 | }, 17 | "eofline": true, 18 | "forin": true, 19 | "import-blacklist": [ 20 | true, 21 | "rxjs/Rx" 22 | ], 23 | "import-spacing": true, 24 | "indent": [ 25 | true, 26 | "tabs", 27 | 4 28 | ], 29 | "interface-over-type-literal": true, 30 | "label-position": true, 31 | "max-line-length": [ 32 | true, 33 | 140 34 | ], 35 | "member-access": false, 36 | "member-ordering": [ 37 | true, 38 | { 39 | "order": [ 40 | "static-field", 41 | "instance-field", 42 | "static-method", 43 | "instance-method" 44 | ] 45 | } 46 | ], 47 | "no-arg": true, 48 | "no-bitwise": true, 49 | "no-console": [ 50 | true, 51 | "debug", 52 | "info", 53 | "time", 54 | "timeEnd", 55 | "trace" 56 | ], 57 | "no-construct": true, 58 | "no-debugger": true, 59 | "no-duplicate-super": true, 60 | "no-empty": false, 61 | "no-empty-interface": true, 62 | "no-eval": true, 63 | "no-inferrable-types": [ 64 | true, 65 | "ignore-params" 66 | ], 67 | "no-misused-new": true, 68 | "no-non-null-assertion": true, 69 | "no-redundant-jsdoc": true, 70 | "no-shadowed-variable": true, 71 | "no-string-literal": false, 72 | "no-string-throw": true, 73 | "no-switch-case-fall-through": true, 74 | "no-trailing-whitespace": true, 75 | "no-unnecessary-initializer": true, 76 | "no-unused-expression": true, 77 | "no-use-before-declare": true, 78 | "no-var-keyword": true, 79 | "object-literal-sort-keys": false, 80 | "one-line": [ 81 | true, 82 | "check-open-brace", 83 | "check-catch", 84 | "check-else", 85 | "check-whitespace" 86 | ], 87 | "prefer-const": true, 88 | "quotemark": [ 89 | true, 90 | "single" 91 | ], 92 | "radix": true, 93 | "semicolon": [ 94 | true, 95 | "always" 96 | ], 97 | "triple-equals": [ 98 | true, 99 | "allow-null-check" 100 | ], 101 | "typedef-whitespace": [ 102 | true, 103 | { 104 | "call-signature": "nospace", 105 | "index-signature": "nospace", 106 | "parameter": "nospace", 107 | "property-declaration": "nospace", 108 | "variable-declaration": "nospace" 109 | } 110 | ], 111 | "unified-signatures": true, 112 | "variable-name": false, 113 | "whitespace": [ 114 | true, 115 | "check-branch", 116 | "check-decl", 117 | "check-operator", 118 | "check-separator", 119 | "check-type" 120 | ], 121 | "no-output-on-prefix": true, 122 | "use-input-property-decorator": true, 123 | "use-output-property-decorator": true, 124 | "use-host-property-decorator": true, 125 | "no-input-rename": true, 126 | "no-output-rename": true, 127 | "use-life-cycle-interface": true, 128 | "use-pipe-transform-interface": true, 129 | "component-class-suffix": true, 130 | "directive-class-suffix": true 131 | } 132 | } 133 | -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_fiori_3/Title.css: -------------------------------------------------------------------------------- 1 | /* ============================= */ 2 | /* Base theme */ 3 | /* ============================= */ 4 | /* ============================= */ 5 | /* Global Base parameters */ 6 | /* ============================= */ 7 | /* =========================== */ 8 | /* Global CSS for 'base' theme */ 9 | /* =========================== */ 10 | /* ============================ */ 11 | /* CSS for control sap.m/Title */ 12 | /* Base theme */ 13 | /* ============================ */ 14 | :host(ui5-title) { 15 | white-space: nowrap; 16 | overflow: hidden; 17 | text-overflow: ellipsis; 18 | } 19 | .sapMTitle { 20 | display: inline-block; 21 | position: relative; 22 | max-width: 100%; 23 | min-width: 1px; 24 | font-weight: normal; 25 | font-family: "72", Arial, Helvetica, sans-serif; 26 | color: #32363a; 27 | overflow: hidden; 28 | text-overflow: ellipsis; 29 | text-shadow: 0 0 0.125rem #fff; 30 | white-space: nowrap; 31 | vertical-align: bottom; 32 | margin: 0; 33 | -webkit-margin-before: 0; 34 | -webkit-margin-after: 0; 35 | -webkit-margin-start: 0; 36 | -webkit-margin-end: 0; 37 | box-sizing: border-box; 38 | cursor: text; 39 | } 40 | .sapMTitle.sapMTitleWrap { 41 | white-space: pre-line; 42 | } 43 | /* Alignments */ 44 | .sapMTitleAlignBegin { 45 | text-align: left; 46 | text-align: start; 47 | } 48 | [data-sap-ui-wc-root][dir=rtl][data-sap-ui-browser^="ie"] .sapMTitleAlignBegin, 49 | [data-sap-ui-wc-root][dir=rtl][data-sap-ui-browser^="ed"] .sapMTitleAlignBegin { 50 | text-align: right; 51 | } 52 | .sapMTitleAlignLeft { 53 | text-align: left; 54 | } 55 | .sapMTitleAlignEnd { 56 | text-align: right; 57 | text-align: end; 58 | } 59 | [data-sap-ui-wc-root][dir=rtl][data-sap-ui-browser^="ie"] .sapMTitleAlignEnd, 60 | [data-sap-ui-wc-root][dir=rtl][data-sap-ui-browser^="ed"] .sapMTitleAlignEnd { 61 | text-align: left; 62 | } 63 | .sapMTitleAlignRight { 64 | text-align: right; 65 | } 66 | .sapMTitleAlignCenter { 67 | text-align: center; 68 | } 69 | /* Title levels */ 70 | /* Level H1 */ 71 | .sapMTitleStyleH1 { 72 | font-size: 2.25rem; 73 | } 74 | /* Level H2 */ 75 | .sapMTitleStyleH2 { 76 | font-size: 1.5rem; 77 | } 78 | /* Level H3 */ 79 | .sapMTitleStyleH3 { 80 | font-size: 1.25rem; 81 | } 82 | /* Level H4 */ 83 | .sapMTitleStyleH4 { 84 | font-size: 1.125rem; 85 | } 86 | /* Level H5 */ 87 | .sapMTitleStyleH5 { 88 | font-size: 1rem; 89 | } 90 | /* Level H6 */ 91 | .sapMTitleStyleH6 { 92 | font-size: 0.875rem; 93 | } 94 | /* ============================= */ 95 | /* Global Belize parameters */ 96 | /* ============================= */ 97 | /* ===================================== */ 98 | /* Quick Theming */ 99 | /* ===================================== */ 100 | /* 101 | UX COLOR SET 102 | */ 103 | /* PRIMARY COLORS */ 104 | /* ACCENT COLORS */ 105 | /* Semantic Background Colors */ 106 | /* Semantic Border Colors */ 107 | /* Semantic Foreground Elements */ 108 | /* Semantic Text */ 109 | /* Semantic Foreground Colors */ 110 | /* ===================================== */ 111 | /* Expert Theming */ 112 | /* ===================================== */ 113 | /*darken(@sapBrandColor, 10); // no contrast function allowed because background can be gradient*/ 114 | /* darken(@sapButton_Background, 30); //should be #ababab */ 115 | /* contrast(@sapButton_Background, darken(@sapHighlightColor, 10), @sapContent_ContrastTextColor, @sapContent_ContrastTextThreshold); //should be #346187 */ 116 | -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_belize/TextArea.css: -------------------------------------------------------------------------------- 1 | /* ============================= */ 2 | /* Base theme */ 3 | /* ============================= */ 4 | /* ============================= */ 5 | /* Global Base parameters */ 6 | /* ============================= */ 7 | /* =========================== */ 8 | /* Global CSS for 'base' theme */ 9 | /* =========================== */ 10 | .sapWCTextArea { 11 | height: 3rem; 12 | background: transparent; 13 | display: inline-block; 14 | vertical-align: top; 15 | outline: none; 16 | position: relative; 17 | overflow: hidden; 18 | } 19 | .sapWCTextAreaMirror ~ .sapWCTextAreaInner { 20 | height: 100%; 21 | width: 100%; 22 | top: 0; 23 | position: absolute; 24 | } 25 | .sapWCTextAreaGrowing.sapWCTextAreaNoMaxLines .sapWCTextAreaInner, 26 | .sapWCTextAreaGrowing.sapWCTextAreaNoMaxLines .sapWCTextAreaMirror { 27 | overflow: hidden; 28 | } 29 | .sapWCTextAreaMirror { 30 | line-height: 1.4; 31 | visibility: hidden; 32 | width: 100%; 33 | word-break: break-all; 34 | padding: 0.5625rem 0.6875rem; 35 | font-size: 0.875rem; 36 | font-family: "72", Arial, Helvetica, sans-serif; 37 | white-space: pre-wrap; 38 | } 39 | .sapWCTextAreaInner { 40 | width: 100%; 41 | margin: 0; 42 | padding: 0.5625rem 0.6875rem; 43 | line-height: 1.4; 44 | box-sizing: border-box; 45 | color: #000; 46 | background: #ffffff; 47 | border: 1px solid #bfbfbf; 48 | outline: none; 49 | font-size: 0.875rem; 50 | font-family: "72", Arial, Helvetica, sans-serif; 51 | -webkit-appearance: none; 52 | -moz-appearance: textfield; 53 | overflow: auto; 54 | resize: none; 55 | } 56 | .sapWCTextAreaInner:focus::after { 57 | content: ""; 58 | width: 10px; 59 | height: 10px; 60 | background-color: red; 61 | } 62 | .sapWCTextAreaGrowing.sapWCTextAreaNoCols .sapWCTextAreaInner { 63 | overflow: hidden; 64 | width: 100%; 65 | } 66 | .sapWCTextAreaInner::-webkit-input-placeholder { 67 | font-size: 0.875rem; 68 | font-style: italic; 69 | } 70 | .sapWCTextAreaInner::-moz-placeholder { 71 | font-size: 0.875rem; 72 | font-style: italic; 73 | } 74 | .sapWCTextAreaInner:-ms-input-placeholder { 75 | font-size: 0.875rem; 76 | font-style: italic; 77 | } 78 | .sapWCTextAreaWithCounter .sapWCTextAreaInner { 79 | height: calc(100% - 16px); 80 | } 81 | .sapWCTextAreaCounter { 82 | text-align: right; 83 | font-size: 0.875rem; 84 | font-family: "72", Arial, Helvetica, sans-serif; 85 | } 86 | .sapCustomTextAreaWarningInner { 87 | border: 1px solid; 88 | background: #ffffff; 89 | border-color: #f9a429; 90 | } 91 | .sapWCTextAreaContent { 92 | display: flex; 93 | flex-direction: column; 94 | height: 100%; 95 | } 96 | .sapWCTextAreaExceededText { 97 | float: right; 98 | overflow: hidden; 99 | padding: 0.125rem 0.125rem 0.5rem; 100 | font-family: "72", Arial, Helvetica, sans-serif; 101 | font-size: 0.75rem; 102 | } 103 | /* ============================= */ 104 | /* Global Belize parameters */ 105 | /* ============================= */ 106 | /* ===================================== */ 107 | /* Quick Theming */ 108 | /* ===================================== */ 109 | /* 110 | UX COLOR SET 111 | */ 112 | /* PRIMARY COLORS */ 113 | /* ACCENT COLORS */ 114 | /* Semantic Background Colors */ 115 | /* Semantic Border Colors */ 116 | /* Semantic Foreground Elements */ 117 | /* Semantic Text */ 118 | /* Semantic Foreground Colors */ 119 | /* ===================================== */ 120 | /* Expert Theming */ 121 | /* ===================================== */ 122 | -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_fiori_3/ListItemBase.json: -------------------------------------------------------------------------------- 1 | {"_":"/* ============================= */\n/* Base theme */\n/* ============================= */\n/* ============================= */\n/* Global Base parameters */\n/* ============================= */\n/* =========================== */\n/* Global CSS for 'base' theme */\n/* =========================== */\n/* =================================== */\n/* CSS for control sap.m/ListItemBase */\n/* Base theme */\n/* =================================== */\n:host(ui5-li),\n:host(ui5-li-custom) {\n display: block;\n}\n.sapMLIB {\n display: -webkit-box;\n display: flex;\n height: 3rem;\n -webkit-box-align: center;\n align-items: center;\n position: relative;\n background: #fff;\n padding: 0 1rem 0 1rem;\n box-sizing: border-box;\n}\n.sapMLIBHoverable:hover {\n background: #fafafa;\n}\n.sapMLIB.sapMLIBSelected {\n background: #e5f0fa;\n}\n.sapMLIB.sapMLIBActive {\n color: #fff;\n background: #0854a0;\n}\n.sapMLIB.sapMLIBHoverable.sapMLIBSelected:hover {\n background: #d8e8f7;\n}\n.sapMLIB.sapMLIBHoverable.sapMLIBSelected.sapMLIBActive:hover {\n background: #0854a0;\n}\n.sapMLIB.sapMLIBFocusable:focus {\n outline: none;\n}\n.sapMLIB.sapMLIBFocusable:focus:after,\n.sapMLIB.sapMLIBFocusable .sapMLIBContent:focus:after {\n content: \"\";\n border: 1px dotted #000;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n pointer-events: none;\n}\n.sapMLIB.sapMLIBActive.sapMLIBFocusable:focus,\n.sapMLIB.sapMLIBActive.sapMLIBFocusable .sapMLIBContent:focus {\n outline-color: #fff;\n}\n.sapMLIB.sapMLIBTransparent {\n background: rgba(255, 255, 255, 0);\n}\n.sapMLIB.sapMLIBBorder {\n border-bottom: 1px solid #ededed;\n}\n.sapMLIB.sapMLIBActive .sapMLIBImgNav {\n color: #fff;\n}\n.sapMLIBImgNav {\n -webkit-box-flex: 0;\n flex: none;\n width: 3rem;\n font-size: 0.75rem;\n color: #6a6d70;\n text-align: center;\n box-sizing: border-box;\n}\n.sapMLIBContent {\n max-width: 100%;\n min-height: 100%;\n font-family: \"72\", Arial, Helvetica, sans-serif;\n}\n/* IE ignores outline-offset. Use an overlay: */\n.sapMLIBLegacyOutline:focus {\n outline: none;\n position: relative;\n}\n.sapMLIBLegacyOutline:focus::before {\n content: \"\";\n border: 0;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n pointer-events: none;\n border: 1px dotted #000;\n}\n.sapMLIBActionable,\n.sapMLIBActionable > .sapMLIBImgNav {\n cursor: pointer;\n}\n.sapMLIBFocusable.sapMLIBLegacyOutline:focus {\n outline: none;\n}\n:not(.sapMListModeDelete) > .sapMLIB.sapMLIBTypeNavigation {\n padding-right: 0;\n}\n/* ============================= */\n/* Global Belize parameters */\n/* ============================= */\n/* ===================================== */\n/* Quick Theming */\n/* ===================================== */\n/*\n UX COLOR SET\n*/\n/* PRIMARY COLORS */\n/* ACCENT COLORS */\n/* Semantic Background Colors */\n/* Semantic Border Colors */\n/* Semantic Foreground Elements */\n/* Semantic Text */\n/* Semantic Foreground Colors */\n/* ===================================== */\n/* Expert Theming */\n/* ===================================== */\n/*darken(@sapBrandColor, 10); // no contrast function allowed because background can be gradient*/\n/* darken(@sapButton_Background, 30); //should be #ababab */\n/* contrast(@sapButton_Background, darken(@sapHighlightColor, 10), @sapContent_ContrastTextColor, @sapContent_ContrastTextThreshold); //should be #346187 */\n/* =================================== */\n/* CSS for control sap.m/ListItemBase */\n/* Belize theme */\n/* =================================== */\n"} -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_fiori_3/Card.json: -------------------------------------------------------------------------------- 1 | {"_":"/* ============================= */\n/* Base theme */\n/* ============================= */\n/* ============================= */\n/* Global Base parameters */\n/* ============================= */\n/* =========================== */\n/* Global CSS for 'base' theme */\n/* =========================== */\n:host(ui5-card) {\n display: inline-block;\n}\nui5-card,\n:host(ui5-card) {\n display: inline-block;\n width: 100%;\n}\n.sapFCard {\n background: #fff;\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);\n border-radius: 0.25rem;\n border: 1px solid #cccccc;\n width: 100%;\n height: 100%;\n overflow: hidden;\n font-family: \"72\", Arial, Helvetica, sans-serif;\n font-size: 16px;\n color: #32363a;\n}\n.sapFCard .sapFCardHeader {\n background: #fff;\n border-bottom: 1px solid #cccccc;\n padding: 1rem;\n display: flex;\n align-items: flex-start;\n}\n.sapFCard .sapFCardHeader:hover {\n background: #fafafa;\n}\n.sapFCard .sapFCardHeader:active {\n background: #f0f0f0;\n}\n.sapFCard .sapFCardHeader .sapFCardAvatar {\n height: 3rem;\n width: 3rem;\n margin-right: 0.75rem;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.sapFCard .sapFCardHeader .sapFCardAvatar .sapFCardHeaderIcon {\n font-size: 1.5rem;\n color: #6a6d70;\n}\n.sapFCard .sapFCardHeader .sapFCardHeaderText {\n flex: 1;\n}\n.sapFCard .sapFCardHeader .sapFCardHeaderText .sapFCardTitle {\n font-family: \"72\", Arial, Helvetica, sans-serif;\n font-size: 1rem;\n font-weight: normal;\n color: #32363a;\n white-space: normal;\n word-wrap: break-word;\n overflow: hidden;\n text-align: left;\n text-overflow: ellipsis;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n max-width: 100%;\n max-height: 3.5rem;\n}\n.sapFCard .sapFCardHeader .sapFCardHeaderText .sapFCardSubtitle {\n font-family: \"72\", Arial, Helvetica, sans-serif;\n font-size: 0.875rem;\n font-weight: normal;\n color: #6a6d70;\n white-space: normal;\n word-wrap: break-word;\n overflow: hidden;\n text-align: left;\n text-overflow: ellipsis;\n margin-top: 0.5rem;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n max-width: 100%;\n max-height: 2.1rem;\n}\n.sapFCard .sapFCardHeader .sapFCardStatus {\n font-family: \"72\", Arial, Helvetica, sans-serif;\n font-size: 0.75rem;\n color: #6a6d70;\n text-align: left;\n line-height: 1.125rem;\n padding-left: 1rem;\n margin-left: auto;\n text-wrap: avoid;\n display: inline-block;\n}\n.sapFCard .sapFCardContent .sapFCardListItem {\n width: 100%;\n}\n.sapFCard .sapFCardContent .sapFCardListItemTitle {\n overflow: hidden;\n text-overflow: ellipsis;\n color: #32363a;\n font-size: 1rem;\n}\n.sapFCard .sapFCardContent .sapFCardListItemDescription {\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: 0.875rem;\n color: #6a6d70;\n}\n/* ============================= */\n/* Global Belize parameters */\n/* ============================= */\n/* ===================================== */\n/* Quick Theming */\n/* ===================================== */\n/*\n UX COLOR SET\n*/\n/* PRIMARY COLORS */\n/* ACCENT COLORS */\n/* Semantic Background Colors */\n/* Semantic Border Colors */\n/* Semantic Foreground Elements */\n/* Semantic Text */\n/* Semantic Foreground Colors */\n/* ===================================== */\n/* Expert Theming */\n/* ===================================== */\n/*darken(@sapBrandColor, 10); // no contrast function allowed because background can be gradient*/\n/* darken(@sapButton_Background, 30); //should be #ababab */\n/* contrast(@sapButton_Background, darken(@sapHighlightColor, 10), @sapContent_ContrastTextColor, @sapContent_ContrastTextThreshold); //should be #346187 */\n"} -------------------------------------------------------------------------------- /src/resources/sap/ui/webcomponents/main/themes/sap_fiori_3/List.css: -------------------------------------------------------------------------------- 1 | /* ============================= */ 2 | /* Base theme */ 3 | /* ============================= */ 4 | /* ============================= */ 5 | /* Global Base parameters */ 6 | /* ============================= */ 7 | /* =========================== */ 8 | /* Global CSS for 'base' theme */ 9 | /* =========================== */ 10 | /* =============================== */ 11 | /* CSS for ui5-list */ 12 | /* Base theme */ 13 | /* =============================== */ 14 | ui5-list, 15 | :host(ui5-list) { 16 | display: block; 17 | max-width: 100%; 18 | } 19 | .sapMList { 20 | width: 100%; 21 | height: 100%; 22 | position: relative; 23 | box-sizing: border-box; 24 | } 25 | .sapMList.sapMListInsetBG { 26 | padding: 2rem; 27 | } 28 | .sapMList .sapMListUl { 29 | list-style-type: none; 30 | padding: 0; 31 | margin: 0; 32 | } 33 | .sapMList .sapMListUl:focus { 34 | outline: none; 35 | } 36 | .sapMList .sapMListDummyArea { 37 | position: fixed; 38 | /* keep it in the visible viewport, so that IE does not scroll on focus */ 39 | } 40 | .sapMList .sapMListNoData { 41 | list-style-type: none; 42 | display: -webkit-box; 43 | display: flex; 44 | -webkit-box-align: center; 45 | align-items: center; 46 | -webkit-box-pack: center; 47 | justify-content: center; 48 | color: #32363a; 49 | background-color: #fff; 50 | border-bottom: 1px solid #ededed; 51 | padding: 0 1rem !important; 52 | height: 3rem; 53 | } 54 | .sapMList .sapMListHdrText { 55 | overflow: hidden; 56 | white-space: nowrap; 57 | text-overflow: ellipsis; 58 | box-sizing: border-box; 59 | font-size: 1.125rem; 60 | font-family: "72", Arial, Helvetica, sans-serif; 61 | color: #32363a; 62 | height: 3rem; 63 | line-height: 3rem; 64 | padding: 0 1rem; 65 | background-color: transparent; 66 | border-bottom: 1px solid #d9d9d9; 67 | } 68 | .sapMList .sapMListFtr { 69 | height: 2rem; 70 | box-sizing: border-box; 71 | -webkit-text-size-adjust: none; 72 | /* To improve readability Mobile Safari automatically increases the size of small text so let's disable this */ 73 | font-size: 0.875rem; 74 | line-height: 2rem; 75 | background-color: #fafafa; 76 | color: #32363a; 77 | padding: 0 1rem; 78 | white-space: nowrap; 79 | overflow: hidden; 80 | text-overflow: ellipsis; 81 | } 82 | .sapMList .sapMListShowSeparatorsNone .sapMListNoData { 83 | border-bottom: 0px; 84 | } 85 | .sapMList .sapMListNoDataText { 86 | overflow: hidden; 87 | text-overflow: ellipsis; 88 | white-space: nowrap; 89 | } 90 | /* Compact size */ 91 | .sapUiSizeCompact .sapMList .sapMListNoData { 92 | height: 2rem; 93 | font-size: 0.875rem; 94 | } 95 | /* ============================= */ 96 | /* Global Fiori3 parameters */ 97 | /* ============================= */ 98 | /* ===================================== */ 99 | /* Quick Theming */ 100 | /* ===================================== */ 101 | /* 102 | UX COLOR SET 103 | */ 104 | /* PRIMARY COLORS */ 105 | /* ACCENT COLORS */ 106 | /* Semantic Background Colors */ 107 | /* Semantic Border Colors */ 108 | /* Semantic Foreground Elements */ 109 | /* Semantic Text */ 110 | /* Semantic Foreground Colors */ 111 | /* ===================================== */ 112 | /* Expert Theming */ 113 | /* ===================================== */ 114 | /*darken(@sapBrandColor, 10); // no contrast function allowed because background can be gradient*/ 115 | /* darken(@sapButton_Background, 30); //should be #ababab */ 116 | /* contrast(@sapButton_Background, darken(@sapHighlightColor, 10), @sapContent_ContrastTextColor, @sapContent_ContrastTextThreshold); //should be #346187 */ 117 | -------------------------------------------------------------------------------- /src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/guide/browser-support 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE9, IE10, IE11, and Chrome <55 requires all of the following polyfills. 22 | * This also includes Android Emulators with older versions of Chrome and Google Search/Googlebot 23 | */ 24 | 25 | // import 'core-js/es6/symbol'; 26 | // import 'core-js/es6/object'; 27 | // import 'core-js/es6/function'; 28 | // import 'core-js/es6/parse-int'; 29 | // import 'core-js/es6/parse-float'; 30 | // import 'core-js/es6/number'; 31 | // import 'core-js/es6/math'; 32 | // import 'core-js/es6/string'; 33 | // import 'core-js/es6/date'; 34 | // import 'core-js/es6/array'; 35 | // import 'core-js/es6/regexp'; 36 | // import 'core-js/es6/map'; 37 | // import 'core-js/es6/weak-map'; 38 | // import 'core-js/es6/set'; 39 | 40 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 41 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 42 | 43 | /** IE10 and IE11 requires the following for the Reflect API. */ 44 | // import 'core-js/es6/reflect'; 45 | 46 | /** 47 | * Web Animations `@angular/platform-browser/animations` 48 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. 49 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). 50 | */ 51 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 52 | 53 | /** 54 | * By default, zone.js will patch all possible macroTask and DomEvents 55 | * user can disable parts of macroTask/DomEvents patch by setting following flags 56 | * because those flags need to be set before `zone.js` being loaded, and webpack 57 | * will put import in the top of bundle, so user need to create a separate file 58 | * in this directory (for example: zone-flags.ts), and put the following flags 59 | * into that file, and then add the following code before importing zone.js. 60 | * import './zone-flags.ts'; 61 | * 62 | * The flags allowed in zone-flags.ts are listed here. 63 | * 64 | * The following flags will work for all browsers. 65 | * 66 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 67 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 68 | * (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 69 | * 70 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 71 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 72 | * 73 | * (window as any).__Zone_enable_cross_context_check = true; 74 | * 75 | */ 76 | 77 | /*************************************************************************************************** 78 | * Zone JS is required by default for Angular itself. 79 | */ 80 | import 'zone.js/dist/zone'; // Included with Angular CLI. 81 | 82 | 83 | /*************************************************************************************************** 84 | * APPLICATION IMPORTS 85 | */ 86 | --------------------------------------------------------------------------------