diff options
author | 2020-01-07 13:23:25 +0000 | |
---|---|---|
committer | 2020-01-07 13:23:25 +0000 | |
commit | 5e5718c9191f125ad65bd9ab15334147bedd79cc (patch) | |
tree | f5a77366761455043fbc0a4604337e7de81aa010 | |
parent | 11072c92de3aec370e93c21134621ac993f601bc (diff) | |
parent | ba3756e38e5b22fccd08e68f4ecc4cc95f9440c2 (diff) |
Merge "adding design of first two tabs in creation package component"
-rw-r--r-- | cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts | 36 | ||||
-rw-r--r-- | cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html | 345 | ||||
-rw-r--r-- | cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts | 35 | ||||
-rwxr-xr-x | cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot | bin | 0 -> 3112 bytes | |||
-rwxr-xr-x | cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg | 17 | ||||
-rwxr-xr-x | cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf | bin | 0 -> 2948 bytes | |||
-rwxr-xr-x | cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff | bin | 0 -> 3024 bytes | |||
-rwxr-xr-x | cds-ui/designer-client/src/assets/icomoon/style.css | 48 | ||||
-rw-r--r-- | cds-ui/designer-client/src/assets/img/arrow.svg | 19 | ||||
-rw-r--r-- | cds-ui/designer-client/src/index.html | 22 | ||||
-rw-r--r-- | cds-ui/designer-client/src/styles.css | 1791 |
11 files changed, 1448 insertions, 865 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts index 8aa9d5e6d..9b65885a5 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts @@ -1,6 +1,8 @@ import {Component, OnInit} from '@angular/core'; import {NgxFileDropEntry, FileSystemFileEntry, FileSystemDirectoryEntry} from 'ngx-file-drop'; import {PackageCreationStore} from '../package-creation.store'; +import {Observable} from 'rxjs'; +import {HttpClient} from '@angular/common/http'; @Component({ @@ -9,7 +11,10 @@ import {PackageCreationStore} from '../package-creation.store'; styleUrls: ['./imports-tab.component.css'] }) export class ImportsTabComponent { - constructor(private packageCreationStore: PackageCreationStore) { + + fileContent: string | ArrayBuffer = ''; + + constructor(private packageCreationStore: PackageCreationStore, private http: HttpClient) { } public files: NgxFileDropEntry[] = []; @@ -21,16 +26,28 @@ export class ImportsTabComponent { // Is it a file? if (droppedFile.fileEntry.isFile) { const fileEntry = droppedFile.fileEntry as FileSystemFileEntry; + fileEntry.file((file: File) => { console.log(droppedFile.relativePath, file); - this.packageCreationStore.addDefinition(droppedFile.relativePath, ''); + + const formData = new FormData(); + formData.append('logo', file, droppedFile.relativePath); + console.log(formData); + + this.packageCreationStore.addDefinition(droppedFile.relativePath, this.getContent(droppedFile.relativePath)); }); } else { // It was a directory (empty directories are added, otherwise only files) const fileEntry = droppedFile.fileEntry as FileSystemDirectoryEntry; console.log(droppedFile.relativePath, fileEntry); - this.packageCreationStore.addDefinition(droppedFile.relativePath, ''); + + + /* const formData = new FormData(); + formData.append('logo', droppedFile, droppedFile.relativePath); + console.log(formData);*/ + + this.packageCreationStore.addDefinition(droppedFile.relativePath, this.getContent(droppedFile.relativePath)); } } @@ -43,4 +60,17 @@ export class ImportsTabComponent { public fileLeave(event) { console.log(event); } + + + getContent(filePath: string) { + let content = ''; + this.getJSON(filePath).subscribe(data => { + content = data; + }); + return content; + } + + public getJSON(filePath: string): Observable<any> { + return this.http.get(filePath); + } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html index 1f5245222..3cc8707c5 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html @@ -1,48 +1,309 @@ <app-header></app-header> -<div class="alert-dark" style="padding: 100px"> - <div> - <label>mode</label> - <label name="trst" *ngFor="let mode of modes; let i = index"> - <input type="checkbox" value={{mode}} [(ngModel)]="metaDataTab.mode"> - {{mode}} - </label> - <br> - <label>dictionary Library Instances</label> - <label> - <select name="cars"> - <option value="audi" - *ngFor="let dictionaryLibraryInstance of dictionaryLibraryInstances; let i = index">{{dictionaryLibraryInstance}}</option> - </select> - </label> - </div> - <div> - <label>Name</label> - <label> - <input type="input" (input)="searchPackages($event)" [(ngModel)]="metaDataTab.name"> - </label> - <br> - <label>Description</label> - <label> - <input type="input"> - </label> - <br> - <label>Version</label> - <label> - <input type="input"> - </label> - <br> - <label>tags</label> - <label> - <input type="input"> - </label> - <br> + +<div class="new-wrapper"> + <header class="page-title"> + <div class="row"> + <h2 class="col m-0">CBA Packages + <span>({{numberOfPackages}} packages)</span> + </h2> + <div class="col"> + </div> + </div> + </header> + + <div class="main-container"> + + <div class="container-fluid body-container creat-container-all"> + + <div class="creat-container"> + <div class="creat-action-container"> + <a href="#" class="action-button"> + <i class="icon-clone" aria-hidden="true"></i> + <span>Clone</span> + </a> + + <a href="#" class="action-button"> + <i class="icon-archive" aria-hidden="true"></i> + <span>Archive</span> + </a> + + <a href="#" class="action-button"> + <i class="icon-delete" aria-hidden="true"></i> + <span>Delete</span> + </a> + </div> + <nav class="row"> + <div class="col pr-0"> + <button class="float btn btn-sm btn-primary">Save</button> + <button class="float btn btn-sm btn-outline-secondary" disabled>Cancel</button> + </div> + </nav> + <nav class="row"> + <!--Nav Tabs--> + <div class="col pr-0"> + <div class="nav nav-tabs " id="nav-tab" role="tablist"> + <a class="nav-item nav-link active" id="nav-metadata-tab" data-toggle="tab" + href="#nav-metadata" + role="tab" aria-controls="nav-metadata" + aria-selected="true">METADATA</a> + <a class="nav-item nav-link" id="nav-imports-tab" data-toggle="tab" href="#nav-imports" + role="tab" aria-controls="nav-imports" + aria-selected="false">IMPORTS</a> + <a class="nav-item nav-link" id="nav-authentication-tab" data-toggle="tab" + href="#nav-authentication" + role="tab" aria-controls="nav-authentication" + aria-selected="false">EXTERNAL SYSTEM AUTHENTICATION PROPERTIES</a> + <a class="nav-item nav-link" id="nav-template-tab" data-toggle="tab" href="#nav-template" + role="tab" aria-controls="nav-template" + aria-selected="false">TEMPLATE & MAPPING</a> + <a class="nav-item nav-link" id="nav-scripts-tab" data-toggle="tab" href="#nav-scripts" + role="tab" aria-controls="nav-scripts" + aria-selected="false">SCRIPTS</a> + </div> + </div> + + </nav> + <div class="row mt-4"> + <div class="col"> + <div class="tab-content" id="nav-tabContent"> + <div class="tab-pane fade show active" id="nav-metadata" role="tabpanel" + aria-labelledby="nav-metadata-tab"> + <div class="card creat-card"> + <div class="single-line"> + <label class="label-name">Mode</label> + <label name="trst" *ngFor="let mode of modes; let i = index"> + <input class="form-check-input" [(ngModel)]="metaDataTab.mode" type="radio" + name="exampleRadios" id="exampleRadios1" value={{mode}}> + + <span> + <i [className]="mode.style" aria-hidden="true"></i> + <!-- <i class="mode-icon green icon-scripting-mode" aria-hidden="true"></i> --> + {{mode.name}} + </span> + </label> + </div> + <!-- <div class="single-line"> + <label class="label-name">Dictionary Library Instances</label> + <div class="label-input"> + <select name="cars"> + <option class="select-placeholder">Select library</option> + <option value="audi" + *ngFor="let dictionaryLibraryInstance of dictionaryLibraryInstances; let i = index">{{dictionaryLibraryInstance}}</option> + </select> + </div> + </div>--> + + </div> + <div class="card creat-card"> + <div class="single-line"> + <label class="label-name">Name</label> + <div class="label-input"> + <input type="input" (input)="searchPackages($event)" + [(ngModel)]="metaDataTab.name" placeholder="Topology name.vLB.CDS"> + </div> + </div> + <hr/> + <div class="single-line"> + <label class="label-name">Description</label> + <div class="label-input"> + <input type="input" placeholder="Descripe the package"> + </div> + </div> + <hr/> + <div class="single-line"> + <label class="label-name">Version</label> + <div class="label-input"> + <input type="input" placeholder="Example: 1.0.0"> + </div> + </div> + <hr/> + <div class="single-line"> + <label class="label-name">tags</label> + <div class="label-input"> + <input type="input" placeholder="Ex., vDNS-CDS"> + </div> + </div> + </div> + <div id="container"> + <div id="target"> + <div class="card creat-card"> + <div class="single-line"> + <h5 class="label-name"> + Custom key <a class="delete-key" (click)="deleteCustomKey($event)" >Delete</a> + </h5> + + </div> + <div class="single-line"> + <label class="label-name">Name</label> + <div class="label-input"> + <input type="input" placeholder="Enter Name"> + </div> + </div> + <hr/> + <div class="single-line"> + <label class="label-name">Value</label> + <div class="label-input"> + <input type="input" placeholder="Enter Value"> + </div> + </div> + + </div> + </div> + </div> + <div class="card creat-card"> + <div class="single-line"> + <div name="custom key"> + <button class="custom-key" (click)="createAnotherCustomKeyDiv()"><i + class="fa fa-plus" aria-hidden="true"></i> Add a custom key + </button> + + + </div> + </div> + </div> + + </div> + <div class="tab-pane fade" id="nav-imports" role="tabpanel" + aria-labelledby="nav-imports-tab"> + <div class="import-container-all"> + <div class="import-container"> + <div class="import-container-input"> + <input placeholder="Enter file URL" type="input" + class="ng-pristine ng-valid ng-touched"> + <a class="enter-link" href="#"><i class="icon-enter"></i></a> + </div> + <span class="import-container-span">Or you can also <a href="#" + data-toggle="modal" + data-target="#exampleModal">Import File</a></span> + + </div> + + <div class="accordion"> + <div class="card creat-card"> + <div class="single-line"> + <label class="label-name">File</label> + </div> + </div> + <div id="accordion"> + <div class="card"> + <div class="card-header" id="headingOne"> + <h5 class="mb-0 d-flex justify-content-between"> + <button class="btn btn-link" data-toggle="collapse" + data-target="#collapseOne" aria-expanded="true" + aria-controls="collapseOne"> + <i class="icon-file-code"></i> Definitions/data_types.json + </button> + <a class="accordion-delete" href="#"><i class="icon-delete"></i></a> + </h5> + </div> + + <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" + data-parent="#accordion"> + <div class="card-body"> + Anim pariatur cliche reprehenderit, enim eiusmod high life + accusamus terry richardson ad squid. 3 wolf moon officia aute, + non cupidatat skateboard dolor brunch. Food truck quinoa + nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua + put a bird on it squid single-origin coffee nulla assumenda + shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore + wes anderson cred nesciunt sapiente ea proident. Ad vegan + excepteur butcher vice lomo. Leggings occaecat craft beer + farm-to-table, raw denim aesthetic synth nesciunt you probably + haven't heard of them accusamus labore sustainable VHS. + </div> + </div> + </div> + <div class="card"> + <div class="card-header" id="headingTwo"> + <h5 class="mb-0"> + <button class="btn btn-link collapsed" data-toggle="collapse" + data-target="#collapseTwo" aria-expanded="false" + aria-controls="collapseTwo"> + Definitions/relationship_types.json + </button> + </h5> + </div> + <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" + data-parent="#accordion"> + <div class="card-body"> + Anim pariatur cliche reprehenderit, enim eiusmod high life + accusamus terry richardson ad squid. 3 wolf moon officia aute, + non cupidatat skateboard dolor brunch. Food truck quinoa + nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua + put a bird on it squid single-origin coffee nulla assumenda + shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore + wes anderson cred nesciunt sapiente ea proident. Ad vegan + excepteur butcher vice lomo. Leggings occaecat craft beer + farm-to-table, raw denim aesthetic synth nesciunt you probably + haven't heard of them accusamus labore sustainable VHS. + </div> + </div> + </div> + <div class="card"> + <div class="card-header" id="headingThree"> + <h5 class="mb-0"> + <button class="btn btn-link collapsed" data-toggle="collapse" + data-target="#collapseThree" aria-expanded="false" + aria-controls="collapseThree"> + Definitions/artifact_types.json + </button> + </h5> + </div> + <div id="collapseThree" class="collapse" aria-labelledby="headingThree" + data-parent="#accordion"> + <div class="card-body"> + Anim pariatur cliche reprehenderit, enim eiusmod high life + accusamus terry richardson ad squid. 3 wolf moon officia aute, + non cupidatat skateboard dolor brunch. Food truck quinoa + nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua + put a bird on it squid single-origin coffee nulla assumenda + shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore + wes anderson cred nesciunt sapiente ea proident. Ad vegan + excepteur butcher vice lomo. Leggings occaecat craft beer + farm-to-table, raw denim aesthetic synth nesciunt you probably + haven't heard of them accusamus labore sustainable VHS. + </div> + </div> + </div> + </div> + </div> + + </div> + </div> + <div class="tab-pane fade" id="nav-authentication" role="tabpanel" + aria-labelledby="nav-authentication-tab">... + </div> + <div class="tab-pane fade" id="nav-template" role="tabpanel" + aria-labelledby="nav-template-tab">... + </div> + <div class="tab-pane fade" id="nav-scripts" role="tabpanel" + aria-labelledby="nav-scripts-tab">... + </div> + </div> + </div> + </div> + </div> + </div> </div> - <div> - <div name="custom key"> - <button (click)="createAnotherCustomKeyDiv()"></button> - <div id="target"></div> +</div> +<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" + aria-hidden="true"> + <div class="modal-dialog" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title" id="exampleModalLabel">Import File</h5> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <span aria-hidden="true">×</span> + </button> + </div> + <div class="modal-body"> + ... + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> + <button type="button" class="btn btn-primary">Import</button> + </div> </div> </div> </div> -<app-imports-tab></app-imports-tab> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts index 440f2e23b..60fccebc8 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts @@ -39,9 +39,13 @@ import {PackageCreationUtils} from './package-creation.utils'; }) export class PackageCreationComponent implements OnInit { - modes: string[] = ['Designer Mode', 'Scripting Mode']; + modes: object[] = [ + {name: 'Designer Mode', style: 'mode-icon icon-designer-mode'}, + {name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode'}]; + dictionaryLibraryInstances: string[] = ['x', 'y']; - private target: HTMLElement; + private container: HTMLElement; + private elements: HTMLCollection; private newElement: HTMLElement; private metaDataTab: MetaDataTab = new MetaDataTab(); @@ -61,11 +65,13 @@ export class PackageCreationComponent implements OnInit { createAnotherCustomKeyDiv() { console.log(this.metaDataTab); - this.newElement = document.createElement('div'); - this.newElement.setAttribute('class', 'alert-dark'); - this.target = document.getElementById('target'); - this.target.appendChild(this.newElement); - this.metaDataTab = new MetaDataTab(); + this.newElement = document.getElementById('target'); + const copiedElement = this.newElement.cloneNode(true); + /* this.newElement.setAttribute('class', 'alert-dark');*/ + this.container = document.getElementById('container'); + this.container.appendChild(copiedElement); + this.elements = this.container.children; + /*this.metaDataTab = new MetaDataTab(); this.metaDataTab.name = 'klfdj'; this.metaDataTab.entryFileName = 'Definitions/vLB_CDS.json'; this.metaDataTab.description = 'rere'; @@ -74,7 +80,7 @@ export class PackageCreationComponent implements OnInit { this.metaDataTab.templateName = 'test'; - this.saveToFileSystem(MetaDataFile.getObjectInstance(this.metaDataTab)); + this.saveToFileSystem(MetaDataFile.getObjectInstance(this.metaDataTab));*/ } validatePacakgeName() { @@ -160,8 +166,15 @@ export class PackageCreationComponent implements OnInit { searchPackages($event: Event) { - /* const searchQuery = event.target.value; - searchQuery = searchQuery.trim(); - this.packagesStore.search(searchQuery);*/ + /* const searchQuery = event.target.value; + searchQuery = searchQuery.trim(); + this.packagesStore.search(searchQuery);*/ + } + + deleteCustomKey(event) { + this.container = document.getElementById('container'); + const element = event.parentElement.parentElement.parentElement; + this.container.removeChild(element); + console.log('removed'); } } diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot Binary files differnew file mode 100755 index 000000000..0022fbff6 --- /dev/null +++ b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg new file mode 100755 index 000000000..f30402d39 --- /dev/null +++ b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg @@ -0,0 +1,17 @@ +<?xml version="1.0" standalone="no"?> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" > +<svg xmlns="http://www.w3.org/2000/svg"> +<metadata>Generated by IcoMoon</metadata> +<defs> +<font id="icomoon" horiz-adv-x="1024"> +<font-face units-per-em="1024" ascent="960" descent="-64" /> +<missing-glyph horiz-adv-x="1024" /> +<glyph unicode=" " horiz-adv-x="0" d="" /> +<glyph unicode="" glyph-name="clone" horiz-adv-x="830" d="M205.943 684.214c16.494 0 29.864 13.274 29.864 29.652v202.771h249.198c16.494 0 29.871-13.274 29.871-29.659v-136.986h-81.325c-8.034 0-15.633-3.229-21.148-8.698l-234.083-232.43c-5.253-5.209-8.761-12.739-8.761-20.953v-367.34h-137.965c-16.502 0-29.871 13.282-29.871 29.659v533.986h204.219zM176.072 874.7v-131.175h-132.112zM463.4 487.909v202.771h249.176c16.502 0 29.871-13.282 29.871-29.659v-690.013c0-16.385-13.369-29.659-29.871-29.659h-453.41c-16.494 0-29.871 13.274-29.871 29.659v487.242h204.242c16.487 0 29.864 13.267 29.864 29.659zM403.665 517.568h-132.112l132.112 131.153zM685.427 892.834v67.166l-90.194-89.555 90.194-89.555v67.166c49.734 0 90.194-40.174 90.194-89.555v-44.777h45.097v44.777c0 74.072-60.693 134.332-135.292 134.332z" /> +<glyph unicode="" glyph-name="delete" d="M170.667 49.778c0-62.578 51.2-113.778 113.778-113.778h455.111c62.578 0 113.778 51.2 113.778 113.778v682.667h-682.667v-682.667zM910.222 903.111h-199.111l-56.889 56.889h-284.444l-56.889-56.889h-199.111v-113.778h796.444v113.778z" /> +<glyph unicode="" glyph-name="designer-mode" d="M1024 793.672c0 71.312-58.064 129.328-129.434 129.328h-765.132c-71.37 0-129.434-58.016-129.434-129.328v-530.574c0-32.88 12.344-62.934 32.646-85.778-19.814-14.932-32.646-38.648-32.646-65.302 0-76.654 62.414-139.018 139.132-139.018h745.734c76.718 0 139.132 62.364 139.132 139.018 0 26.654-12.832 50.37-32.646 65.302 20.304 22.844 32.648 52.898 32.648 85.778zM60 793.672c0 38.228 31.148 69.328 69.434 69.328h765.132c38.286 0 69.434-31.1 69.434-69.328v-530.574c0-38.228-31.148-69.328-69.434-69.328h-203.372c-27.154 0-49.246-22.084-49.246-49.226 0-8.080-6.596-14.654-14.702-14.654h-230.492c-8.106 0-14.702 6.574-14.702 14.654 0 27.142-22.092 49.226-49.246 49.226h-203.372c-38.286 0-69.434 31.1-69.434 69.328zM884.868 33h-745.736c-43.634 0-79.132 35.448-79.132 79.018 0 11.994 9.784 21.752 21.806 21.752h241.022c5.242-36.078 36.396-63.878 73.926-63.878h230.492c37.53 0 68.684 27.802 73.926 63.878h241.022c12.024 0 21.806-9.758 21.806-21.752 0-43.57-35.498-79.018-79.132-79.018zM597.9 290.358c2.062-8.968 8.128-16.494 16.456-20.416 4.050-1.908 8.416-2.86 12.782-2.86 4.608 0 9.21 1.060 13.438 3.178l95.882 48.032c6.012 3.012 10.838 7.956 13.704 14.040l152.756 324.352c22.62 48.028 1.948 105.504-46.082 128.124h0.002c-23.268 10.958-49.408 12.2-73.606 3.496-24.202-8.704-43.562-26.31-54.52-49.576l-152.758-324.352c-2.866-6.084-3.604-12.954-2.096-19.508zM803.536 731.846c9.118 3.278 18.97 2.812 27.734-1.318h0.002c18.096-8.524 25.886-30.18 17.364-48.278l-14.16-30.064-65.642 30.916 14.16 30.064c4.128 8.766 11.422 15.4 20.542 18.68zM743.268 628.82l65.644-30.914-108.612-230.616-52.482-26.292-13.16 57.208zM161.846 267.084h290.574c16.568 0 30 13.432 30 30v234.358c0 16.568-13.432 30-30 30h-290.574c-16.568 0-30-13.432-30-30v-234.358c0-16.568 13.432-30 30-30zM191.846 501.442h230.574v-174.358h-230.574zM161.846 730.892h371.668c16.568 0 30 13.432 30 30s-13.432 30-30 30h-371.668c-16.568 0-30-13.432-30-30s13.432-30 30-30zM161.846 630.892h281.668c16.568 0 30 13.432 30 30s-13.432 30-30 30h-281.668c-16.568 0-30-13.432-30-30s13.432-30 30-30z" /> +<glyph unicode="" glyph-name="scripting-mode" d="M407.383 250.611c-0.418 2.89-1.966 5.494-4.302 7.243l-118.568 88.668 118.568 88.668c2.337 1.749 3.884 4.353 4.302 7.243 0.415 2.89-0.33 5.825-2.082 8.168l-18.836 25.185c-3.645 4.869-10.539 5.866-15.408 2.22l-164.036-122.669c-2.777-2.076-4.416-5.343-4.416-8.816s1.639-6.74 4.416-8.816l164.036-122.669c1.975-1.481 4.29-2.192 6.583-2.192 3.353 0 6.664 1.522 8.825 4.412l18.836 25.185c1.749 2.343 2.497 5.277 2.082 8.168zM816.975 355.338l-164.030 122.669c-4.869 3.642-11.762 2.645-15.404-2.22l-18.836-25.185c-1.749-2.34-2.497-5.277-2.082-8.168 0.418-2.887 1.963-5.494 4.302-7.243l118.565-88.668-118.565-88.668c-2.34-1.749-3.884-4.356-4.302-7.243-0.415-2.89 0.33-5.828 2.082-8.168l18.836-25.185c2.164-2.89 5.472-4.412 8.825-4.412 2.293 0 4.604 0.714 6.583 2.192l164.030 122.669c2.777 2.076 4.416 5.343 4.416 8.816s-1.642 6.74-4.419 8.816zM617.258 543.483l-28.969 12.25c-2.686 1.139-5.718 1.157-8.426 0.063-2.705-1.098-4.865-3.224-6.001-5.913l-172.977-409.119c-2.368-5.598 0.252-12.058 5.853-14.426l28.969-12.25c1.368-0.582 2.827-0.868 4.287-0.868 1.406 0 2.812 0.27 4.139 0.808 2.705 1.098 4.862 3.224 6.001 5.913l172.977 409.119c2.365 5.598-0.255 12.055-5.853 14.423zM968.962 933.384h-913.924c-30.346 0-55.038-24.692-55.038-55.038v-860.691c0-30.346 24.692-55.038 55.038-55.038h913.924c30.346 0 55.038 24.692 55.038 55.038v860.691c0 30.35-24.692 55.038-55.038 55.038zM860.058 848.993c25.145 0 45.603-20.458 45.603-45.603s-20.458-45.603-45.603-45.603c-25.145 0-45.603 20.458-45.603 45.603s20.458 45.603 45.603 45.603zM705.414 848.993c25.145 0 45.603-20.458 45.603-45.603s-20.458-45.603-45.603-45.603c-25.145 0-45.603 20.458-45.603 45.603s20.458 45.603 45.603 45.603zM139.637 826.977h183.985c13.027 0 23.588-10.558 23.588-23.588s-10.561-23.588-23.588-23.588h-183.985c-13.027 0-23.588 10.558-23.588 23.588s10.561 23.588 23.588 23.588zM936.58 57.984c0-3.956-3.221-7.18-7.183-7.18h-834.794c-3.96 0-7.183 3.224-7.183 7.18v592.746h849.161v-592.746z" /> +<glyph unicode="" glyph-name="archive" d="M945.238 644.924h-866.463c-10.674 0-19.905-3.895-27.697-11.691-7.796-7.792-11.691-17.024-11.691-27.691v-590.772c0-10.665 3.895-19.901 11.691-27.691 7.792-7.796 17.024-11.7 27.697-11.7h866.463c10.667 0 19.893 3.904 27.691 11.7 7.79 7.788 11.685 17.024 11.685 27.691v590.772c0 10.674-3.88 19.897-11.685 27.691-7.79 7.796-17.024 11.691-27.691 11.691zM618.454 459.694c-7.788-7.794-17.024-11.691-27.691-11.691h-157.539c-10.661 0-19.893 3.899-27.691 11.691-7.792 7.796-11.691 17.024-11.691 27.697 0 10.665 3.899 19.897 11.691 27.691 7.796 7.796 17.028 11.695 27.691 11.695h157.554c10.659 0 19.888-3.899 27.691-11.695 7.79-7.792 11.685-17.024 11.685-27.691 0-10.672-3.904-19.901-11.7-27.697zM1012.32 908.927c-7.798 7.796-17.024 11.691-27.693 11.691h-945.242c-10.665 0-19.897-3.895-27.691-11.691-7.794-7.792-11.693-17.024-11.693-27.691v-157.539c0-10.665 3.899-19.893 11.695-27.691 7.794-7.796 17.024-11.691 27.691-11.691h945.227c10.665 0 19.901 3.895 27.706 11.691 7.788 7.796 11.682 17.024 11.682 27.691v157.539c0 10.674-3.895 19.899-11.682 27.691z" /> +<glyph unicode="" glyph-name="enter" d="M677.571 437.241h-644.248c-18.395 0-33.323 14.929-33.323 33.323s14.929 33.323 33.323 33.323h644.248c18.395 0 33.323-14.929 33.323-33.323s-14.929-33.323-33.323-33.323zM499.849 259.519c-8.534 0-17.060 3.238-23.552 9.771-13.017 13.017-13.017 34.121 0 47.146l154.177 154.169-154.177 154.177c-13.017 13.017-13.017 34.129 0 47.146 13.025 13.017 34.129 13.017 47.146 0l177.722-177.73c13.017-13.017 13.017-34.121 0-47.137l-177.722-177.722c-6.533-6.582-15.059-9.82-23.593-9.82v0zM533.173-18.18c-202.21 0-380.728 121.651-454.884 309.957-6.753 17.060 1.684 36.431 18.793 43.184 17.060 6.663 36.48-1.643 43.232-18.842 64.027-162.573 218.245-267.652 392.859-267.652 232.726 0 422.098 189.372 422.098 422.098s-189.372 422.098-422.098 422.098c-174.614 0-328.832-105.079-392.859-267.652-6.801-17.199-26.172-25.505-43.232-18.842-17.109 6.753-25.546 26.123-18.793 43.184 74.156 188.306 252.675 309.957 454.884 309.957 269.475 0 488.744-219.27 488.744-488.744s-219.27-488.744-488.744-488.744z" /> +<glyph unicode="" glyph-name="file-code" horiz-adv-x="768" d="M512 960h-512v-1024h768v768l-256 256zM448 640h256v-640h-640v896h384v-256zM512 704v192l192-192h-192zM268.8 128h-44.8l-128 160 128 160h44.8l-128-160zM499.2 128h44.8l128 160-128 160h-44.8l128-160zM300.8 64h38.4l134.4 448h-51.2z" /> +</font></defs></svg>
\ No newline at end of file diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf Binary files differnew file mode 100755 index 000000000..f16e62216 --- /dev/null +++ b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff Binary files differnew file mode 100755 index 000000000..a763911c0 --- /dev/null +++ b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff diff --git a/cds-ui/designer-client/src/assets/icomoon/style.css b/cds-ui/designer-client/src/assets/icomoon/style.css new file mode 100755 index 000000000..f48119ce8 --- /dev/null +++ b/cds-ui/designer-client/src/assets/icomoon/style.css @@ -0,0 +1,48 @@ +@font-face { + font-family: 'icomoon'; + src: url('fonts/icomoon.eot?wg9fpe'); + src: url('fonts/icomoon.eot?wg9fpe#iefix') format('embedded-opentype'), + url('fonts/icomoon.ttf?wg9fpe') format('truetype'), + url('fonts/icomoon.woff?wg9fpe') format('woff'), + url('fonts/icomoon.svg?wg9fpe#icomoon') format('svg'); + font-weight: normal; + font-style: normal; + font-display: block; +} + +[class^="icon-"], [class*=" icon-"] { + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: 'icomoon' !important; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-file-code:before { + content: "\e906"; +} +.icon-enter:before { + content: "\e905"; +} +.icon-clone:before { + content: "\e900"; +} +.icon-delete:before { + content: "\e901"; +} +.icon-designer-mode:before { + content: "\e902"; +} +.icon-scripting-mode:before { + content: "\e903"; +} +.icon-archive:before { + content: "\e904"; +} diff --git a/cds-ui/designer-client/src/assets/img/arrow.svg b/cds-ui/designer-client/src/assets/img/arrow.svg new file mode 100644 index 000000000..1db0d0a16 --- /dev/null +++ b/cds-ui/designer-client/src/assets/img/arrow.svg @@ -0,0 +1,19 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg width="9px" height="5px" viewBox="0 0 9 5" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <!-- Generator: Sketch 61 (89581) - https://sketch.com --> + <title>Path</title> + <desc>Created with Sketch.</desc> + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="2.1.1-MetaData---Create" transform="translate(-668.000000, -332.000000)" fill="#1E4171" fill-rule="nonzero"> + <g id="TABS" transform="translate(150.000000, 182.000000)"> + <g id="tab-content" transform="translate(0.000000, 62.000000)"> + <g id="1"> + <g id="mapping" transform="translate(0.000000, 81.000000)"> + <path d="M524.622177,9.18203373 L520.237097,5.03647696 C520.190675,4.99274134 520.130494,4.98818123 520.080897,5.02362574 C520.031149,5.0594848 520,5.12995927 520,5.20706662 L520,13.4981802 C520,13.5752875 520.031149,13.6459693 520.080897,13.6818283 C520.102974,13.6975814 520.127167,13.705458 520.15121,13.705458 C520.1813,13.705458 520.21124,13.6930213 520.237097,13.6687698 L524.622177,9.52321305 C524.663155,9.4844521 524.6875,9.4208178 524.6875,9.35262339 C524.6875,9.28442898 524.663004,9.22079469 524.622177,9.18203373 Z" id="Path" transform="translate(522.343750, 9.352729) rotate(90.000000) translate(-522.343750, -9.352729) "></path> + </g> + </g> + </g> + </g> + </g> + </g> +</svg>
\ No newline at end of file diff --git a/cds-ui/designer-client/src/index.html b/cds-ui/designer-client/src/index.html index a5898512a..537d26d57 100644 --- a/cds-ui/designer-client/src/index.html +++ b/cds-ui/designer-client/src/index.html @@ -16,23 +16,23 @@ <meta name="msapplication-TileColor" content="#da532c"> <meta name="theme-color" content="#ffffff"> - + <link rel="stylesheet" href="/assets/icomoon/style.css"> <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700,800,900" rel="stylesheet"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <!-- <link rel="shortcut icon" href="https://www.onap.org/wp-content/uploads/sites/20/2018/01/favicon.png" /> --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" - crossorigin="anonymous"> + crossorigin="anonymous"> </head> <body> - <app-root></app-root> - <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" - crossorigin="anonymous"></script> - <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" - crossorigin="anonymous"></script> - <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" - crossorigin="anonymous"></script> - <!-- <script src="https://code.jquery.com/jquery-3.4.1.js"></script> --> +<app-root></app-root> +<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" + crossorigin="anonymous"></script> +<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" + crossorigin="anonymous"></script> +<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" + crossorigin="anonymous"></script> +<!-- <script src="https://code.jquery.com/jquery-3.4.1.js"></script> --> </body> -</html>
\ No newline at end of file +</html> diff --git a/cds-ui/designer-client/src/styles.css b/cds-ui/designer-client/src/styles.css index 838adeb69..0e6a7f3e7 100644 --- a/cds-ui/designer-client/src/styles.css +++ b/cds-ui/designer-client/src/styles.css @@ -1,13 +1,12 @@ html, body{ height: 100%; } -body{ +body{ background: #FAFAFA !important; /* background-image: linear-gradient(-45deg, #000 10%, #fff 0); background-size: 6px 6px; */ margin: 0; - /* font-family: 'Nunito' !important; */ - font-family: Arial, Helvetica, sans-serif !important; + font-family: 'Nunito' !important; color: #1B3E6F !important; } *:focus{ @@ -21,7 +20,7 @@ body{ .custom-control-input:checked ~ .custom-control-label::before{ background: #1B3E6F !important; } - + /*Components*/ /* Menu Styles */ .primary-nav{ @@ -69,7 +68,7 @@ body{ text-align: center; } .menu .icon .fa{ -vertical-align: middle; + vertical-align: middle; } .menu, .menu a, @@ -92,7 +91,7 @@ vertical-align: middle; } .menu-dropdown li .icon{ padding: 2px 6px; - color: #fff; + color: #fff; } .menu-dropdown li.active .icon{ color: #fff; @@ -217,7 +216,7 @@ background-color: #333; } } @keyframes grow{ - + 0% { display: none; opacity: 0; @@ -228,11 +227,11 @@ background-color: #333; } 100% { opacity: 1 - } + } } /*User Profile*/ .userProfile .dropdown{ - width: 100%; + width: 99.5%; } .userProfile .dropdown:hover{ background: #172B4D !important; @@ -244,10 +243,65 @@ background-color: #333; font-size: 13px; line-height: 40px; } +.import-container-all{ + width: 100%; +} +.import-container{ + width: 100%; + background: #E0E8F2; + padding:30px ; +} +.import-container-input{ + width: 40%; + position: relative; + display: inline-block; + margin-right: 20px; +} +.import-container-input input{ + width: 100%; + height: 40px; + padding: 5px 20px; + border: 0px; + -webkit-box-shadow: 0px 0px 42px -27px rgba(0,0,0,0.75); + -moz-box-shadow: 0px 0px 42px -27px rgba(0,0,0,0.75); + box-shadow: 0px 0px 42px -27px rgba(0,0,0,0.75); +} +.enter-link{ + position: absolute; + right: 18px; + font-size: 23px; + top: 6px; + color: #1273EB; +} +.enter-link:hover{ + text-decoration: none; +} +.import-container-input input::placeholder{ + color: #CFD7E5; +} +.import-container-span{ + font-size: 12px; +} +.accordion .card{ + margin-bottom: 0px !important; + background-color: #FAFAFA !important; + border: 0px; +} +.accordion-delete{ + color: #FF6469; + font-size: 18px; + margin-top: 11px; +} +.accordion-delete:hover{ + text-decoration: none; +} +.card-header{ + background-color: #DEE8F3 !important; +} /* .userProfile .dropdown-toggle{ height: 40px; } */ -.userProfile .dropdown-toggle:hover ~ .dropdown-text, +.userProfile .dropdown-toggle:hover ~ .dropdown-text, .userProfile .dropdown-toggle:focus ~ .dropdown-text{ background: transparent !important; border-radius: 0 !important; @@ -255,12 +309,12 @@ height: 40px; } .userProfile .dropdown-text::after { - right: 14px; - top: 8px; - width: 24px; - height: 24px; - background: url(/assets/img/img-userProfile.png) center center no-repeat; - } + right: 14px; + top: 8px; + width: 24px; + height: 24px; + background: url(/assets/img/img-userProfile.png) center center no-repeat; +} .packagesFilter .custom-checkbox{ margin-left: 8px; } @@ -268,7 +322,7 @@ height: 40px; line-height: 28px !important; font-size: 14px !important; text-indent: 6px !important; -} +} /**Packages Sort**/ .sort-packages{ font-size: 12px; @@ -290,12 +344,12 @@ height: 40px; .sort-packages .dropdown-toggle:focus ~ .dropdown-text::after{ border-color: transparent transparent #1B3E6F transparent; } -.sort-packages .dropdown-toggle:hover ~ .dropdown-text, +.sort-packages .dropdown-toggle:hover ~ .dropdown-text, .sort-packages .dropdown-toggle:focus ~ .dropdown-text{ box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15); background: #fff; } -.sort-packages .dropdown-content:hover, +.sort-packages .dropdown-content:hover, .sort-packages .dropdown-toggle:focus ~ .dropdown-content{ top: 30px; } @@ -410,7 +464,7 @@ height: 40px; border: 0; border-radius: 50%; -} +} /* .userProfile .dropdown-content{ bottom: 40px !important; top: unset !important; @@ -428,429 +482,429 @@ height: 40px; color: #C3CDDB !important; border: none !important; } -.nav-tabs .nav-link:focus, +.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover{ border: 0 !important; } - .nav-tabs .nav-link:hover{ - color: #1B3E6F !important; - } - .nav-tabs .nav-link.active{ - color: #1B3E6F !important; - background: transparent !important; - border: 0 !important; - border-bottom: solid 2px #1B3E6F !important; - } - .nav-tabs .nav-link::before{ - content: "|"; - padding-right: 20px !important; - color: #C3CDDB; - font-weight: normal; - } - .nav-tabs .nav-link:first-child::before{ - content: none; - } - .nav-tabs .nav-link:first-child{ - padding-left: 20px !important; - } - /**Sliding Search Input**/ - .searchBox{ - position: absolute; - top: 0%; - right: 0%; - transform: translate(0%,-0%); - height: 40px; - } - .searchButton{ - float: right; - margin-top: 14px; - padding-left: 0 !important; - padding-right: 24px !important; - width: 60px; - height: 24px; - background: url(../src/assets/img/icon-search.svg) center center no-repeat; - background-size: 28%; - border: 0 !important; - border-right: solid 1px #1B3E6F !important; - display: flex; - justify-content: center; - align-items: center; - transition: 0.4s; - } - .searchBox:hover > .searchInput{ - width: 240px; - border-bottom: solid 1px #C3CDDB; - } - .searchBox:hover > .searchButton{ - color: #1B3E6F; - } - .searchInput{ - border: none; - background: none; - outline: none; - float: left; - padding: 0; - color: #1B3E6F; - font-size: 14px; - transition: 0.4s; - line-height: 40px; - width: 0px; - } - .searchInput::placeholder{ - color: #BABBC3; - } - .searchBox-expanded{ - width: 240px; - border-bottom: solid 1px #C3CDDB; - } - /**Drop Down Menu**/ - .dropdown{ - position: relative; - display: inline-block; - text-align: left; - width: 132px; - z-index: 200; - } - .dropdown-text{ - cursor: pointer; - position: relative; - text-indent: 10px; - line-height: 32px; - background-color: #eee; - border: 1px solid #ccc; - border-radius: 3px; - box-shadow: 0 1px 0 rgba(255,255,255, .9) inset, 0 1px 3px rgba(0,0,0, .1); - width: 100%; - } - .dropdown-text:after{ - position: absolute; - right: 6px; - top: 15px; - content: ''; - width: 0px; - height: 0px; - border-style: solid; - border-width: 5px 4px 0 4px; - border-color: #555 transparent transparent transparent; - } - .dropdown-toggle{ - font-size: 0; - z-index: 1; - cursor: pointer; - position: absolute; - top: 0; - border: none; - padding: 0; - margin: 0 0 0 1px; - background: transparent; - text-indent: -10px; - height: 34px; - width: 100%; - } - .dropdown-toggle:focus{ - outline: 0; - } - .dropdown-content{ - position: absolute; - top: 32px; - width: 140px; - margin: 0; - padding: 0; - opacity: 0; - visibility:hidden; - -webkit-transition: all .25s ease; - -moz-transition: all .25s ease; - -ms-transition: all .25s ease; - -o-transition: all .25s ease; - transition: all .25s ease; - list-style-type: none; - border-radius: 3px; - text-indent: 10px; - line-height: 32px; - background-color: #eee; - border: 1px solid #ccc; - } - .dropdown-content a{ - display: block; - } - .dropdown-content a:hover{ - background: #e8e8e8; - } - .dropdown-toggle:hover ~ .dropdown-text, - .dropdown-toggle:focus ~ .dropdown-text{ - background-color: #e8e8e8; - } - .dropdown-toggle:focus ~ .dropdown-text{ - box-shadow: 0 1px 3px rgba(0,0,0, .2) inset, 0 1px 0 rgba(255,255,255, 0.8); - z-index: 2; - } - .dropdown-toggle:focus ~ .dropdown-text:after{ - border-width: 0 4px 5px 4px; - border-color: transparent transparent #555 transparent; - } - .dropdown-content:hover, - .dropdown-toggle:focus ~ .dropdown-content{ - opacity: 1; - visibility:visible; - top: 42px; - } - /**Card**/ - /* Hover Shadow */ - @keyframes hover { - 50% { - transform: translateY(-3px); - } - 100% { - transform: translateY(-6px); - } - } - @keyframes card { - 0% { - transform: translateY(6px); - opacity: .3; - } - 50% { - transform: translateY(3px); - opacity: .8; - } - 100% { - transform: translateY(6px); - opacity: .3; - } - } - .card { - /* display: inline-block; - position: relative; - transition-duration: 0.2s; - transition-property: transform; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - transform: translateZ(0); */ - margin-bottom: 25px !important; - box-shadow: 0 0 1px rgba(0, 0, 0, 0); - } - /* .card:before { - pointer-events: none; - position: absolute; - z-index: -1; - content: ''; - top: 100%; - left: 5%; - height: 10px; - width: 90%; - opacity: 0; - background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 70%); - transition-duration: 0.2s; - transition-property: transform opacity; - } */ - /* .card:hover { +.nav-tabs .nav-link:hover{ + color: #1B3E6F !important; +} +.nav-tabs .nav-link.active{ + color: #1B3E6F !important; + background: transparent !important; + border: 0 !important; + border-bottom: solid 2px #1B3E6F !important; +} +.nav-tabs .nav-link::before{ + content: "|"; + padding-right: 20px !important; + color: #C3CDDB; + font-weight: normal; +} +.nav-tabs .nav-link:first-child::before{ + content: none; +} +.nav-tabs .nav-link:first-child{ + padding-left: 20px !important; +} +/**Sliding Search Input**/ +.searchBox{ + position: absolute; + top: 0%; + right: 0%; + transform: translate(0%,-0%); + height: 40px; +} +.searchButton{ + float: right; + margin-top: 14px; + padding-left: 0 !important; + padding-right: 24px !important; + width: 60px; + height: 24px; + background: url(../src/assets/img/icon-search.svg) center center no-repeat; + background-size: 28%; + border: 0 !important; + border-right: solid 1px #1B3E6F !important; + display: flex; + justify-content: center; + align-items: center; + transition: 0.4s; +} +.searchBox:hover > .searchInput{ + width: 240px; + border-bottom: solid 1px #C3CDDB; +} +.searchBox:hover > .searchButton{ + color: #1B3E6F; +} +.searchInput{ + border: none; + background: none; + outline: none; + float: left; + padding: 0; + color: #1B3E6F; + font-size: 14px; + transition: 0.4s; + line-height: 40px; + width: 0px; +} +.searchInput::placeholder{ + color: #BABBC3; +} +.searchBox-expanded{ + width: 240px; + border-bottom: solid 1px #C3CDDB; +} +/**Drop Down Menu**/ +.dropdown{ + position: relative; + display: inline-block; + text-align: left; + width: 132px; + z-index: 200; +} +.dropdown-text{ + cursor: pointer; + position: relative; + text-indent: 10px; + line-height: 32px; + background-color: #eee; + border: 1px solid #ccc; + border-radius: 3px; + box-shadow: 0 1px 0 rgba(255,255,255, .9) inset, 0 1px 3px rgba(0,0,0, .1); + width: 100%; +} +.dropdown-text:after{ + position: absolute; + right: 6px; + top: 15px; + content: ''; + width: 0px; + height: 0px; + border-style: solid; + border-width: 5px 4px 0 4px; + border-color: #555 transparent transparent transparent; +} +.dropdown-toggle{ + font-size: 0; + z-index: 1; + cursor: pointer; + position: absolute; + top: 0; + border: none; + padding: 0; + margin: 0 0 0 1px; + background: transparent; + text-indent: -10px; + height: 34px; + width: 100%; +} +.dropdown-toggle:focus{ + outline: 0; +} +.dropdown-content{ + position: absolute; + top: 32px; + width: 140px; + margin: 0; + padding: 0; + opacity: 0; + visibility:hidden; + -webkit-transition: all .25s ease; + -moz-transition: all .25s ease; + -ms-transition: all .25s ease; + -o-transition: all .25s ease; + transition: all .25s ease; + list-style-type: none; + border-radius: 3px; + text-indent: 10px; + line-height: 32px; + background-color: #eee; + border: 1px solid #ccc; +} +.dropdown-content a{ + display: block; +} +.dropdown-content a:hover{ + background: #e8e8e8; +} +.dropdown-toggle:hover ~ .dropdown-text, +.dropdown-toggle:focus ~ .dropdown-text{ + background-color: #e8e8e8; +} +.dropdown-toggle:focus ~ .dropdown-text{ + box-shadow: 0 1px 3px rgba(0,0,0, .2) inset, 0 1px 0 rgba(255,255,255, 0.8); + z-index: 2; +} +.dropdown-toggle:focus ~ .dropdown-text:after{ + border-width: 0 4px 5px 4px; + border-color: transparent transparent #555 transparent; +} +.dropdown-content:hover, +.dropdown-toggle:focus ~ .dropdown-content{ + opacity: 1; + visibility:visible; + top: 42px; +} +/**Card**/ +/* Hover Shadow */ +@keyframes hover { + 50% { transform: translateY(-3px); - animation-name: hover; - animation-duration: 1s; - animation-delay: 0.2s; - animation-timing-function: linear; - animation-iteration-count: 1; - animation-direction: alternate; - } - .card:hover:before { - opacity: .4; - transform: translateY(3px); - animation-name: card; - animation-duration: 1s; - animation-delay: .2s; - animation-timing-function: linear; - animation-iteration-count: 1; - animation-direction: alternate; - } */ - .card-body{ - padding: 20px !important; - } - - /*Main Container*/ - .main-container{ - padding: 0 !important; - } - /*Page Title*/ - .page-title{ - padding: 21px 30px; - background:#fff; - border-left: solid 1px #FAFAFA; - margin-bottom: 21px; - -webkit-box-shadow: 0 4px 10px 0 #eef0f5; - box-shadow: 0 4px 10px 0 #eef0f5; - position: relative; - z-index: 8; - } - .page-title h2{ - font-size: 16px; - font-weight: bold; - } - .page-title h2 span{ - color: #BABBC3; - font-size: 14px; - } - /*Content*/ - .body-container{ - padding: 0 30px !important; - } - .search-filter-col{ - padding-right: 0 !important; - border-bottom: solid 1px #ECEDF2 !important; - } - /**Packages Filter**/ - .packagesFilter{ - margin-top: 12px; - margin-bottom: 7px; - } - .packagesFilter .dropdown-toggle{ - height: 36px !important; - } - .packagesFilter .dropdown-toggle:focus ~ .dropdown-text::after{ - border-color: transparent transparent #1B3E6F transparent; - } - .packagesFilter .dropdown-text{ - background: transparent; - border: 0; - box-shadow: none; - text-indent: 14px; - line-height: 30px; - font-size: 12px; - } - .packagesFilter .dropdown-text::after{ - right: 12px; - border-color: #1B3E6F transparent transparent transparent; - } - .packagesFilter .dropdown-toggle:hover ~ .dropdown-text, - .packagesFilter .dropdown-toggle:focus ~ .dropdown-text{ - background-color: transparent; - box-shadow: none; - border-radius: 0; - } - .packagesFilter .dropdown-toggle:focus ~ .dropdown-text{ - background: #fff; - box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15); - } - .packagesFilter .dropdown-text::after{ - top: 12px; - } - .packagesFilter .dropdown-content{ - padding: 6px 0 15px; - background: #fff; - box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15); - border: 0; - border-top-left-radius: 0; - border-top-right-radius: 0; - border-bottom-left-radius: 2px; - border-bottom-right-radius: 2px; - } - .packagesFilter .dropdown-content:hover, - .packagesFilter .dropdown-toggle:focus ~ .dropdown-content{ - top: 30px; - } - .packagesFilter .form-control{ - padding: 12px 9px 12px 38px !important; - border: 0 !important; - border-bottom: solid 1px #D7E7F9 !important; - background: url(../src/assets/img/icon-search.svg) 15px center no-repeat; - background-size: 4%; - border-radius: 0 !important; - color: #1B3E6F; - font-size: 13px; - } - .packagesFilter .form-control::placeholder{ - color: #BABBC3; - } - .packagesFilter .form-control:focus{ - box-shadow: none !important; - border-bottom: solid 1px #1B3E6F !important; - } - .packagesFilter .custom-checkbox{ - margin-left: 8px; - } - .packagesFilter .custom-control-label{ - line-height: 28px !important; - font-size: 13px !important; - text-indent: 6px !important; - } - /**Packages Sort**/ - .sort-packages{ - font-size: 12px; - font-weight: bold; - color: #C3CDDB; - } - .sort-packages .dropdown{ - width: 88px; } - .sort-packages .dropdown-text{ - background: transparent; - border: 0; - box-shadow: none; - color: #1B3E6F; - } - .sort-packages .dropdown-text::after{ - border-color: #1B3E6F transparent transparent transparent; - } - .sort-packages .dropdown-toggle:focus ~ .dropdown-text::after{ - border-color: transparent transparent #1B3E6F transparent; - } - .sort-packages .dropdown-toggle:hover ~ .dropdown-text, - .sort-packages .dropdown-toggle:focus ~ .dropdown-text{ - box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15); - background: #fff; - } - .sort-packages .dropdown-content:hover, - .sort-packages .dropdown-toggle:focus ~ .dropdown-content{ - top: 30px; - } - .sort-packages .dropdown-content{ - width: 88px; - padding: 6px 0; - background: #fff; - border-radius: 2px; - border: 0; - box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15); - } - .sort-packages .dropdown-content a{ - color: #1B3E6F; - font-size: 12px; - } - .sort-packages .dropdown-content a:hover{ - background-color: #F4F9FE; - text-decoration: unset; - } - /**Pagination**/ - .page-item .page-link, - .page-item.disabled .page-link{ - background: transparent !important; - border: 0; - color: #1B3E6F !important; - font-size: 14px; - } - .page-link:hover{ - color: #fff !important; - background-color: #C3CDDB !important; - border-radius: 100%; - } - /**Packages Cards***/ - /***Package Info Card***/ - .packages-card .card{ - margin: 0; - border-radius: 2px; - border: 0; - box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1); + 100% { + transform: translateY(-6px); } - .packages-card .card:hover{ - box-shadow: 0 2px 13px 6px rgba(47, 83, 151, .15); - transition: all 0.5s ease; +} +@keyframes card { + 0% { + transform: translateY(6px); + opacity: .3; } - .packages-card .card-title{ - margin-bottom: 0 !important; - font-size: 15px; - font-weight: bold; + 50% { + transform: translateY(3px); + opacity: .8; } - .packages-card p{ - font-size: 14px; - color: #D0D7E4; + 100% { + transform: translateY(6px); + opacity: .3; } +} +.card { + /* display: inline-block; + position: relative; + transition-duration: 0.2s; + transition-property: transform; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + transform: translateZ(0); */ + margin-bottom: 25px !important; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} +/* .card:before { + pointer-events: none; + position: absolute; + z-index: -1; + content: ''; + top: 100%; + left: 5%; + height: 10px; + width: 90%; + opacity: 0; + background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 70%); + transition-duration: 0.2s; + transition-property: transform opacity; +} */ +/* .card:hover { + transform: translateY(-3px); + animation-name: hover; + animation-duration: 1s; + animation-delay: 0.2s; + animation-timing-function: linear; + animation-iteration-count: 1; + animation-direction: alternate; +} +.card:hover:before { + opacity: .4; + transform: translateY(3px); + animation-name: card; + animation-duration: 1s; + animation-delay: .2s; + animation-timing-function: linear; + animation-iteration-count: 1; + animation-direction: alternate; +} */ +.card-body{ + padding: 20px !important; +} + +/*Main Container*/ +.main-container{ + padding: 0 !important; +} +/*Page Title*/ +.page-title{ + padding: 21px 30px; + background:#fff; + border-left: solid 1px #FAFAFA; + margin-bottom: 21px; + -webkit-box-shadow: 0 4px 10px 0 #eef0f5; + box-shadow: 0 4px 10px 0 #eef0f5; + position: relative; + z-index: 8; +} +.page-title h2{ + font-size: 16px; + font-weight: bold; +} +.page-title h2 span{ + color: #BABBC3; + font-size: 14px; +} +/*Content*/ +.body-container{ + padding: 0 30px !important; +} +.search-filter-col{ + padding-right: 0 !important; + border-bottom: solid 1px #ECEDF2 !important; +} +/**Packages Filter**/ +.packagesFilter{ + margin-top: 12px; + margin-bottom: 7px; +} +.packagesFilter .dropdown-toggle{ + height: 36px !important; +} +.packagesFilter .dropdown-toggle:focus ~ .dropdown-text::after{ + border-color: transparent transparent #1B3E6F transparent; +} +.packagesFilter .dropdown-text{ + background: transparent; + border: 0; + box-shadow: none; + text-indent: 14px; + line-height: 30px; + font-size: 12px; +} +.packagesFilter .dropdown-text::after{ + right: 12px; + border-color: #1B3E6F transparent transparent transparent; +} +.packagesFilter .dropdown-toggle:hover ~ .dropdown-text, +.packagesFilter .dropdown-toggle:focus ~ .dropdown-text{ + background-color: transparent; + box-shadow: none; + border-radius: 0; +} +.packagesFilter .dropdown-toggle:focus ~ .dropdown-text{ + background: #fff; + box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15); +} +.packagesFilter .dropdown-text::after{ + top: 12px; +} +.packagesFilter .dropdown-content{ + padding: 6px 0 15px; + background: #fff; + box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15); + border: 0; + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 2px; + border-bottom-right-radius: 2px; +} +.packagesFilter .dropdown-content:hover, +.packagesFilter .dropdown-toggle:focus ~ .dropdown-content{ + top: 30px; +} +.packagesFilter .form-control{ + padding: 12px 9px 12px 38px !important; + border: 0 !important; + border-bottom: solid 1px #D7E7F9 !important; + background: url(../src/assets/img/icon-search.svg) 15px center no-repeat; + background-size: 4%; + border-radius: 0 !important; + color: #1B3E6F; + font-size: 13px; +} +.packagesFilter .form-control::placeholder{ + color: #BABBC3; +} +.packagesFilter .form-control:focus{ + box-shadow: none !important; + border-bottom: solid 1px #1B3E6F !important; +} +.packagesFilter .custom-checkbox{ + margin-left: 8px; +} +.packagesFilter .custom-control-label{ + line-height: 28px !important; + font-size: 13px !important; + text-indent: 6px !important; +} +/**Packages Sort**/ +.sort-packages{ + font-size: 12px; + font-weight: bold; + color: #C3CDDB; +} +.sort-packages .dropdown{ + width: 88px; +} +.sort-packages .dropdown-text{ + background: transparent; + border: 0; + box-shadow: none; + color: #1B3E6F; +} +.sort-packages .dropdown-text::after{ + border-color: #1B3E6F transparent transparent transparent; +} +.sort-packages .dropdown-toggle:focus ~ .dropdown-text::after{ + border-color: transparent transparent #1B3E6F transparent; +} +.sort-packages .dropdown-toggle:hover ~ .dropdown-text, +.sort-packages .dropdown-toggle:focus ~ .dropdown-text{ + box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15); + background: #fff; +} +.sort-packages .dropdown-content:hover, +.sort-packages .dropdown-toggle:focus ~ .dropdown-content{ + top: 30px; +} +.sort-packages .dropdown-content{ + width: 88px; + padding: 6px 0; + background: #fff; + border-radius: 2px; + border: 0; + box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15); +} +.sort-packages .dropdown-content a{ + color: #1B3E6F; + font-size: 12px; +} +.sort-packages .dropdown-content a:hover{ + background-color: #F4F9FE; + text-decoration: unset; +} +/**Pagination**/ +.page-item .page-link, +.page-item.disabled .page-link{ + background: transparent !important; + border: 0; + color: #1B3E6F !important; + font-size: 14px; +} +.page-link:hover{ + color: #fff !important; + background-color: #C3CDDB !important; + border-radius: 100%; +} +/**Packages Cards***/ +/***Package Info Card***/ +.packages-card .card{ + margin: 0; + border-radius: 2px; + border: 0; + box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1); +} +.packages-card .card:hover{ + box-shadow: 0 2px 13px 6px rgba(47, 83, 151, .15); + transition: all 0.5s ease; +} +.packages-card .card-title{ + margin-bottom: 0 !important; + font-size: 15px; + font-weight: bold; +} +.packages-card p{ + font-size: 14px; + color: #D0D7E4; +} .packages-card .card-body{ padding-bottom: 0 !important; } @@ -861,327 +915,327 @@ height: 40px; .packages-card .card-footer .col:last-child{ padding-left: 20px; } - /***Add Package Card***/ - .addPaackage-card{ - background: #F4F9FE !important; - border: solid 1px #D7E7F9 !important; - } - .addPaackage-card:hover{ - box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1) !important; - } - .addPaackage-card img{ - margin-bottom: 33px; - margin-top: 8px; - } - .addPaackage-card a{ - margin: 0 0 14px; - padding: 10px 10px 10px 32px; - font-weight: bold; - font-size: 10px; - text-transform: uppercase; - border-radius: 2px; - border-width: .5px; - border-style: solid; - background-position: 10px center; - background-repeat: no-repeat; - text-align: left; - } - .addPaackage-card a:hover{ - text-decoration: unset; - } - .addPaackage-card .card-footer .col{ - padding: 0; - text-align: right; - } - .addPaackage-card .card-footer .col:last-child{ - text-align: left; - } - .btn-create-package, - .btn-create-package:hover{ - background-color: #1B3E6F; - border-color: #1B3E6F; - color: #fff; - background-image: url(../src/assets/img/icon-create-white.svg); - background-repeat: no-repeat; - } - .btn-import-package, - .btn-import-package:hover{ - color: #1B3E6F; - background-image: url(../src/assets/img/icon-import-blue.svg); - } - /***Actions Menu***/ - .packages-card .dropdown{ - width: auto; - float: right; - } - .packages-card .dropdown-text{ - background: transparent; - border: 0; - box-shadow: none; - text-indent: 0; - line-height: unset; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - opacity: .6; - } - .packages-card .dropdown-text::after{ - display: none; - } - .packages-card .dropdown-text img{ - padding: 9px 7px; - } - .packages-card .dropdown-content{ - right: 0; - width: 120px; - padding: 6px 0; - border: 0; - text-indent: 0; - border-radius: 2px; - border-top-left-radius: 0; - border-top-right-radius: 0; - background: #1B3E6F; - } - .packages-card .dropdown-content a{ - padding-left: 45px; - color: #fff; - font-size: 13px; - background-position: 20px center; - background-size: 10%; - background-repeat: no-repeat; - } - .packages-card .dropdown-content a:hover{ - background-color: #172B4D; - text-decoration: unset; - } - .packages-card .action-clone a, - .packages-card .action-clone a:hover{ - background-image: url(../src/assets/img/icon-clone-sm.svg); - } - .packages-card .action-archive a, - .packages-card .action-archive a:hover{ - background-image: url(../src/assets/img/icon-archive-sm.svg); - } - .packages-card .action-delete a, - .packages-card .action-delete a:hover{ - background-image: url(../src/assets/img/icon-delete-sm.svg); - } - .packages-card .dropdown-content:hover, - .packages-card .dropdown-toggle:focus ~ .dropdown-content{ - top: 24px; - } - .packages-card .dropdown-toggle:hover ~ .dropdown-text{ - background: transparent; - opacity: 1; - } - .packages-card .dropdown-toggle:focus ~ .dropdown-text{ - opacity: 1; - background: #1B3E6F; - box-shadow: none; - } - /***Contributers***/ - ul.package-contributers{ - /*margin-bottom: 0 !important;*/ - padding-left: 0 !important; - } - .package-contributers li{ - list-style: none; - display: inline-block; - } - .package-contributers li{ - margin-left: -5px; - } - .package-contributers li:first-child{ - margin-left: 0; - } - .package-contributers li:last-child{ - margin-left: 9px; - } - .package-modifier, - .package-contributers button{ - padding: 0 !important; - border-radius: 100%; - border: 0 !important; - /*Hover Effect*/ - -webkit-transition: box-shadow 0.2s ease; - -moz-transition: box-shadow 0.2s ease; - transition: box-shadow 0.2s ease; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - display: inline-block; - position: relative; - } - .package-modifier:before, - .package-contributers button:before{ - -webkit-transition: all 0.2s ease; - -moz-transition: all 0.2s ease; - transition: all 0.2s ease; - border-radius: 50%; - bottom: 0; - box-shadow: 0 0 0 2px #fff; - content: ""; - left: 0; - position: absolute; - right: 0; - top: 0; - } - .package-modifier:hover, - .package-contributers button:hover{ - box-shadow: 0 0 0 2px #D7E7F9; - text-decoration: none; - } - .package-modifier:hover:before, - .package-contributers button:hover:before{ - -webkit-transform: scale(0.925); - -moz-transform: scale(0.925); - -ms-transform: scale(0.925); - -o-transform: scale(0.925); - transform: scale(0.925); - box-shadow: 0 0 0 1px #D7E7F9; - opacity: 0.5; - } - .package-modifier img, - .package-contributers button img{ - width: 28px; - height: 28px; - object-fit: cover; - vertical-align: top; - border-radius: 100%; - } - .package-contributers a{ - font-size: 12px; - color: #1273EB; - } - .package-contributers a:hover{ - text-decoration: unset; - } - /***Package Footer***/ - .packages-card .card-footer{ - padding: 0 20px !important; - background: transparent !important; - border-top-color: #F7F6F6 !important; - } - .packages-card .card-footer .col:first-child{ - border-right: solid 1px #F7F6F6; - } - .packages-card .card-footer .btn{ - background-color: transparent !important; - color: #C3CDDB !important; - border: 0; - font-size: 13px; - opacity: .7; - } - .packages-card .card-footer .btn:hover{ - opacity: 1; - } - .btn-card-config, - .btn-card-topology{ - padding: 15px 0 15px 28px !important; - background-size: 16%; - background-position: left center; - background-repeat: no-repeat; - } - .btn-card-config{ - background-image: url(../src/assets/img/icon-btn-card-config.svg); - } - .btn-card-topology{ - background-image: url(../src/assets/img/icon-btn-card-topology.svg); - } - .icon-deployed{ - margin-right: 5px; - display: inline; - background: url(../src/assets/img/icon-deploy.svg) center center no-repeat; - } - - - - - - - - - - - /* Border Fade */ - .border-fade { - display: inline-block; - transition-duration: 0.3s; - transition-property: box-shadow; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - transform: translateZ(0); - box-shadow: inset 0 0 0 4px #ececec, 0 0 1px rgba(0, 0, 0, 0); - /* Hack to improve aliasing on mobile/tablet devices */ - } - .border-fade:hover { - box-shadow: inset 0 0 0 4px #666, 0 0 1px rgba(0, 0, 0, 0); - /* Hack to improve aliasing on mobile/tablet devices */ - } - /*Content*/ - - /**Title Action Buttons**/ - .page-title-actions li{ - display: inline-block; - text-align: center; - } - .title-action{ - -webkit-transition: box-shadow 0.2s ease; - -moz-transition: box-shadow 0.2s ease; - transition: box-shadow 0.2s ease; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - border-radius: 50%; - color: #6a75eb; - display: inline-block; - font-size: 0.889em; - height: 4em; - margin: 0 1em 1em; - position: relative; - text-align: center; - text-transform: lowercase; - width: 4em; - line-height: 4em; - } - - .title-action:before{ - -webkit-transition: all 0.2s ease; - -moz-transition: all 0.2s ease; - transition: all 0.2s ease; - border-radius: 50%; - bottom: 0; - box-shadow: 0 0 0 1px #000; - content: ""; - left: 0; - position: absolute; - right: 0; - top: 0; - } - .title-action:hover{ - box-shadow: 0 0 0 7px #07819b; - text-decoration: none; - } - .title-action:hover:before{ - -webkit-transform: scale(0.925); - -moz-transform: scale(0.925); - -ms-transform: scale(0.925); - -o-transform: scale(0.925); - transform: scale(0.925); - box-shadow: 0 0 0 1px #07819b; - opacity: 0.5; - } - - /*Animation Button*/ - /**Float**/ - .float { - display: inline-block; - transition-duration: 0.3s; - transition-property: transform; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - transform: translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); - } - .float:hover { - transform: translateY(-5px); - } - +/***Add Package Card***/ +.addPaackage-card{ + background: #F4F9FE !important; + border: solid 1px #D7E7F9 !important; +} +.addPaackage-card:hover{ + box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1) !important; +} +.addPaackage-card img{ + margin-bottom: 33px; + margin-top: 8px; +} +.addPaackage-card a{ + margin: 0 0 14px; + padding: 10px 10px 10px 32px; + font-weight: bold; + font-size: 10px; + text-transform: uppercase; + border-radius: 2px; + border-width: .5px; + border-style: solid; + background-position: 10px center; + background-repeat: no-repeat; + text-align: left; +} +.addPaackage-card a:hover{ + text-decoration: unset; +} +.addPaackage-card .card-footer .col{ + padding: 0; + text-align: right; +} +.addPaackage-card .card-footer .col:last-child{ + text-align: left; +} +.btn-create-package, +.btn-create-package:hover{ + background-color: #1B3E6F; + border-color: #1B3E6F; + color: #fff; + background-image: url(../src/assets/img/icon-create-white.svg); + background-repeat: no-repeat; +} +.btn-import-package, +.btn-import-package:hover{ + color: #1B3E6F; + background-image: url(../src/assets/img/icon-import-blue.svg); +} +/***Actions Menu***/ +.packages-card .dropdown{ + width: auto; + float: right; +} +.packages-card .dropdown-text{ + background: transparent; + border: 0; + box-shadow: none; + text-indent: 0; + line-height: unset; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + opacity: .6; +} +.packages-card .dropdown-text::after{ + display: none; +} +.packages-card .dropdown-text img{ + padding: 9px 7px; +} +.packages-card .dropdown-content{ + right: 0; + width: 120px; + padding: 6px 0; + border: 0; + text-indent: 0; + border-radius: 2px; + border-top-left-radius: 0; + border-top-right-radius: 0; + background: #1B3E6F; +} +.packages-card .dropdown-content a{ + padding-left: 45px; + color: #fff; + font-size: 13px; + background-position: 20px center; + background-size: 10%; + background-repeat: no-repeat; +} +.packages-card .dropdown-content a:hover{ + background-color: #172B4D; + text-decoration: unset; +} +.packages-card .action-clone a, +.packages-card .action-clone a:hover{ + background-image: url(../src/assets/img/icon-clone-sm.svg); +} +.packages-card .action-archive a, +.packages-card .action-archive a:hover{ + background-image: url(../src/assets/img/icon-archive-sm.svg); +} +.packages-card .action-delete a, +.packages-card .action-delete a:hover{ + background-image: url(../src/assets/img/icon-delete-sm.svg); +} +.packages-card .dropdown-content:hover, +.packages-card .dropdown-toggle:focus ~ .dropdown-content{ + top: 24px; +} +.packages-card .dropdown-toggle:hover ~ .dropdown-text{ + background: transparent; + opacity: 1; +} +.packages-card .dropdown-toggle:focus ~ .dropdown-text{ + opacity: 1; + background: #1B3E6F; + box-shadow: none; +} +/***Contributers***/ +ul.package-contributers{ + /*margin-bottom: 0 !important;*/ + padding-left: 0 !important; +} +.package-contributers li{ + list-style: none; + display: inline-block; +} +.package-contributers li{ + margin-left: -5px; +} +.package-contributers li:first-child{ + margin-left: 0; +} +.package-contributers li:last-child{ + margin-left: 9px; +} +.package-modifier, +.package-contributers button{ + padding: 0 !important; + border-radius: 100%; + border: 0 !important; + /*Hover Effect*/ + -webkit-transition: box-shadow 0.2s ease; + -moz-transition: box-shadow 0.2s ease; + transition: box-shadow 0.2s ease; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + display: inline-block; + position: relative; +} +.package-modifier:before, +.package-contributers button:before{ + -webkit-transition: all 0.2s ease; + -moz-transition: all 0.2s ease; + transition: all 0.2s ease; + border-radius: 50%; + bottom: 0; + box-shadow: 0 0 0 2px #fff; + content: ""; + left: 0; + position: absolute; + right: 0; + top: 0; +} +.package-modifier:hover, +.package-contributers button:hover{ + box-shadow: 0 0 0 2px #D7E7F9; + text-decoration: none; +} +.package-modifier:hover:before, +.package-contributers button:hover:before{ + -webkit-transform: scale(0.925); + -moz-transform: scale(0.925); + -ms-transform: scale(0.925); + -o-transform: scale(0.925); + transform: scale(0.925); + box-shadow: 0 0 0 1px #D7E7F9; + opacity: 0.5; +} +.package-modifier img, +.package-contributers button img{ + width: 28px; + height: 28px; + object-fit: cover; + vertical-align: top; + border-radius: 100%; +} +.package-contributers a{ + font-size: 12px; + color: #1273EB; +} +.package-contributers a:hover{ + text-decoration: unset; +} +/***Package Footer***/ +.packages-card .card-footer{ + padding: 0 20px !important; + background: transparent !important; + border-top-color: #F7F6F6 !important; +} +.packages-card .card-footer .col:first-child{ + border-right: solid 1px #F7F6F6; +} +.packages-card .card-footer .btn{ + background-color: transparent !important; + color: #C3CDDB !important; + border: 0; + font-size: 13px; + opacity: .7; +} +.packages-card .card-footer .btn:hover{ + opacity: 1; +} +.btn-card-config, +.btn-card-topology{ + padding: 15px 0 15px 28px !important; + background-size: 16%; + background-position: left center; + background-repeat: no-repeat; +} +.btn-card-config{ + background-image: url(../src/assets/img/icon-btn-card-config.svg); +} +.btn-card-topology{ + background-image: url(../src/assets/img/icon-btn-card-topology.svg); +} +.icon-deployed{ + margin-right: 5px; + display: inline; + background: url(../src/assets/img/icon-deploy.svg) center center no-repeat; +} + + + + + + + + + + +/* Border Fade */ +.border-fade { + display: inline-block; + transition-duration: 0.3s; + transition-property: box-shadow; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + transform: translateZ(0); + box-shadow: inset 0 0 0 4px #ececec, 0 0 1px rgba(0, 0, 0, 0); + /* Hack to improve aliasing on mobile/tablet devices */ +} +.border-fade:hover { + box-shadow: inset 0 0 0 4px #666, 0 0 1px rgba(0, 0, 0, 0); + /* Hack to improve aliasing on mobile/tablet devices */ +} +/*Content*/ + +/**Title Action Buttons**/ +.page-title-actions li{ + display: inline-block; + text-align: center; +} +.title-action{ + -webkit-transition: box-shadow 0.2s ease; + -moz-transition: box-shadow 0.2s ease; + transition: box-shadow 0.2s ease; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + border-radius: 50%; + color: #6a75eb; + display: inline-block; + font-size: 0.889em; + height: 4em; + margin: 0 1em 1em; + position: relative; + text-align: center; + text-transform: lowercase; + width: 4em; + line-height: 4em; +} + +.title-action:before{ + -webkit-transition: all 0.2s ease; + -moz-transition: all 0.2s ease; + transition: all 0.2s ease; + border-radius: 50%; + bottom: 0; + box-shadow: 0 0 0 1px #000; + content: ""; + left: 0; + position: absolute; + right: 0; + top: 0; +} +.title-action:hover{ + box-shadow: 0 0 0 7px #07819b; + text-decoration: none; +} +.title-action:hover:before{ + -webkit-transform: scale(0.925); + -moz-transform: scale(0.925); + -ms-transform: scale(0.925); + -o-transform: scale(0.925); + transform: scale(0.925); + box-shadow: 0 0 0 1px #07819b; + opacity: 0.5; +} + +/*Animation Button*/ +/**Float**/ +.float { + display: inline-block; + transition-duration: 0.3s; + transition-property: transform; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} +.float:hover { + transform: translateY(-5px); +} + /*TOOLTIP*/ /* Base styles for the element that has a tooltip */ [data-tooltip], @@ -1201,18 +1255,18 @@ height: 40px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; - -webkit-transition: - opacity 0.2s ease-in-out, - visibility 0.2s ease-in-out, - -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); - -moz-transition: - opacity 0.2s ease-in-out, - visibility 0.2s ease-in-out, - -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); - transition: - opacity 0.2s ease-in-out, - visibility 0.2s ease-in-out, - transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); + -webkit-transition: + opacity 0.2s ease-in-out, + visibility 0.2s ease-in-out, + -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); + -moz-transition: + opacity 0.2s ease-in-out, + visibility 0.2s ease-in-out, + -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); + transition: + opacity 0.2s ease-in-out, + visibility 0.2s ease-in-out, + transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); @@ -1276,7 +1330,7 @@ height: 40px; .tooltip-top:before { margin-left: 0; margin-bottom: -12px; - + border-bottom-color: #DEE8F3; border-bottom-color: rgba(222, 232, 243, 1.0); } @@ -1302,7 +1356,7 @@ height: 40px; .tooltip-top:focus:after { -webkit-transform: translateY(-12px); -moz-transform: translateY(-12px); - transform: translateY(-12px); + transform: translateY(-12px); } /* Left */ @@ -1328,7 +1382,7 @@ height: 40px; .tooltip-left:focus:after { -webkit-transform: translateX(-12px); -moz-transform: translateX(-12px); - transform: translateX(-12px); + transform: translateX(-12px); } /* Bottom */ @@ -1353,7 +1407,7 @@ height: 40px; .tooltip-bottom:focus:after { -webkit-transform: translateY(12px); -moz-transform: translateY(12px); - transform: translateY(12px); + transform: translateY(12px); } /* Right */ @@ -1377,7 +1431,7 @@ height: 40px; .tooltip-right:focus:after { -webkit-transform: translateX(12px); -moz-transform: translateX(12px); - transform: translateX(12px); + transform: translateX(12px); } /* Move directional arrows down a bit for left/right tooltips */ @@ -1392,11 +1446,152 @@ height: 40px; margin-left: 0; margin-bottom: -16px; } +.btn{ + padding-right: 20px !important; + padding-left: 20px !important; + border-radius: 15px !important; +} +.btn-primary{ + background-color: #1273EB !important; + border-color: #1273EB !important; +} +.btn-primary:hover { + background-color: #0069d9 !important; + border-color: #0062cc !important; +} +.btn + .btn{ + margin-left: 10px; +} +.card.creat-card{ + margin: 0; + border-radius: 2px; + border: 0; + box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1); +} +.card.creat-card .single-line{ + padding: 15px 70px 15px; +} +.single-line label{ + margin-bottom: 0px; +} +.label-name{ + width: 300px; + display: inline-block; + margin-bottom: 0px; +} +.delete-key{ + color: #FF6469; + font-size: 10px; + background: #FFE6E7; + border: 1px solid #FFC9CB; + padding: 3px 10px 2px; + margin-left: 10px; + border-radius: 5px; +} +.delete-key:hover{ + color: #C94448; + background: #FFC9CB; + border: 1px solid #FF6469; + text-decoration: none; +} +.label-input{ + width: calc(100% - 300px); + display: inline-block; +} +.form-check-input{ + margin-left: 0px !important; + margin-top: 2px !important; +} +.form-check-input+span{ + margin-left: 20px; + margin-right: 50px; +} +.label-input input{ + margin-bottom: 0px; + outline: 0px; + border: 0px; + font-size: 12px; + width: 100%; +} +.single-line select{ + margin-bottom: 0px; + outline: 0px; + border: 0px; + background: none; + background: url(/assets/img/arrow.svg) center right no-repeat; + background-size: 10spx; + width: 100%; + -webkit-appearance: none; + -moz-appearance: none; + text-indent: 1px; + text-overflow: ''; -/*JOINT JS*/ -/* .joint-paper.joint-theme-default{ */ - /* background-color: transparent !important; */ -/* } */ +} +.single-line select option:first-child{ + color: #C3CDDB; +} +.single-line input::placeholder{ + font-size: 14px; + color: #C3CDDB; +} +.single-line .custom-key{ + background: none; + border: 0px; + color:#1273EB ; + font-size: 15px; +} +.single-line .custom-key:focus{ + outline: none; +} +.creat-container{ + padding:70px 100px 70px 70px; + position: relative; +} +hr { + margin-top: 0rem !important; + margin-bottom: 0rem !important; + border-top: 1px solid #efefef !important; +} +.creat-action-container{ + position: fixed; + right: 0px; + top: 160px; + width: 130px; + text-align: center; +} +.action-button{ + color: #BABBC3; + font-size: 10px; + font-weight: bold; + display: inline-block; + margin-bottom: 12px; +} +.action-button:hover{ + text-decoration: none; +} +.action-button i{ + background: #fff; + box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1); + width: 40px; + height: 40px; + text-align: center; + line-height: 40px; + border-radius: 40px; + color: #1B3E6F; + font-size: 17px; + display: inline-block; +} +.mode-icon{ + font-size: 20px; +} +.mode-icon.green{ + color: #5DBDBA; +} +.action-button span{ + width: 100%; + display: inline-block; + margin-top: 5px; +} /* Extra small devices (portrait phones, less than 576px) */ @media (max-width: 575.98px) { .page-title{ @@ -1411,7 +1606,7 @@ height: 40px; /* Medium devices (tablets, 768px and up) */ @media (min-width: 768px) and (max-width: 991.98px) { - + } /* Large devices (desktops, 992px and up) */ @@ -1424,24 +1619,24 @@ height: 40px; } - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + |