From ba3756e38e5b22fccd08e68f4ecc4cc95f9440c2 Mon Sep 17 00:00:00 2001 From: shaaban Altanany Date: Tue, 7 Jan 2020 12:08:44 +0200 Subject: adding design of first two tabs in creation package component Issue-ID: CCSDK-2014 Signed-off-by: shaaban Altanany Change-Id: Ib4cf67f38511fbabc9d69313e9e88edadd7b6c4a --- .../imports-tab/imports-tab.component.ts | 36 +- .../package-creation.component.html | 345 +++- .../package-creation/package-creation.component.ts | 35 +- .../src/assets/icomoon/fonts/icomoon.eot | Bin 0 -> 3112 bytes .../src/assets/icomoon/fonts/icomoon.svg | 17 + .../src/assets/icomoon/fonts/icomoon.ttf | Bin 0 -> 2948 bytes .../src/assets/icomoon/fonts/icomoon.woff | Bin 0 -> 3024 bytes .../designer-client/src/assets/icomoon/style.css | 48 + cds-ui/designer-client/src/assets/img/arrow.svg | 19 + cds-ui/designer-client/src/index.html | 22 +- cds-ui/designer-client/src/styles.css | 1867 +++++++++++--------- 11 files changed, 1486 insertions(+), 903 deletions(-) create mode 100755 cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot create mode 100755 cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg create mode 100755 cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf create mode 100755 cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff create mode 100755 cds-ui/designer-client/src/assets/icomoon/style.css create mode 100644 cds-ui/designer-client/src/assets/img/arrow.svg (limited to 'cds-ui/designer-client') 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 { + 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 @@ -
-
- - -
- - -
-
- - -
- - -
- - -
- - -
+ +
+
+
+

CBA Packages + ({{numberOfPackages}} packages) +

+
+
+
+
+ +
+ +
+ +
+
+ + + Clone + + + + + Archive + + + + + Delete + +
+ + +
+
+
+ + + + + +
+
+
+
+
-
-
- -
+
+ - 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 new file mode 100755 index 000000000..0022fbff6 Binary files /dev/null and b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot differ 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 @@ + + + +Generated by IcoMoon + + + + + + + + + + + + + \ 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 new file mode 100755 index 000000000..f16e62216 Binary files /dev/null and b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf differ diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff new file mode 100755 index 000000000..a763911c0 Binary files /dev/null and b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff differ 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 @@ + + + + Path + Created with Sketch. + + + + + + + + + + + + + + \ 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 @@ - + + crossorigin="anonymous"> - - - - - + + + + + - \ No newline at end of file + 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,808 +482,808 @@ 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 { - 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; +.nav-tabs .nav-link:hover{ + color: #1B3E6F !important; } -.packages-card .card-footer .col{ +.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; - text-align: center; + color: #1B3E6F; + font-size: 14px; + transition: 0.4s; + line-height: 40px; + width: 0px; } -.packages-card .card-footer .col:last-child{ - padding-left: 20px; +.searchInput::placeholder{ + color: #BABBC3; } - /***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; +.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); } - .title-action:hover{ - box-shadow: 0 0 0 7px #07819b; - text-decoration: none; + 100% { + transform: translateY(-6px); } - .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; +} +@keyframes card { + 0% { + transform: translateY(6px); + opacity: .3; } - - /*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); + 50% { + transform: translateY(3px); + opacity: .8; } - .float:hover { - transform: translateY(-5px); + 100% { + transform: translateY(6px); + opacity: .3; } - -/*TOOLTIP*/ -/* Base styles for the element that has a tooltip */ -[data-tooltip], -.tooltip { - position: relative; - cursor: pointer; - text-align: center; } - -/* Base styles for the entire tooltip */ -[data-tooltip]:before, -[data-tooltip]:after, -.tooltip:before, -.tooltip:after { +.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; - visibility: hidden; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; - filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); + z-index: -1; + content: ''; + top: 100%; + left: 5%; + height: 10px; + width: 90%; 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-transform: translate3d(0, 0, 0); - -moz-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - pointer-events: none; + 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; } -/* Show the entire tooltip on hover and focus */ -[data-tooltip]:hover:before, -[data-tooltip]:hover:after, -[data-tooltip]:focus:before, -[data-tooltip]:focus:after, -.tooltip:hover:before, -.tooltip:hover:after, -.tooltip:focus:before, -.tooltip:focus:after { - visibility: visible; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; +/*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; +} +.packages-card .card-footer .col{ + padding: 0; + text-align: center; +} +.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); +} + +/*TOOLTIP*/ +/* Base styles for the element that has a tooltip */ +[data-tooltip], +.tooltip { + position: relative; + cursor: pointer; + text-align: center; +} + +/* Base styles for the entire tooltip */ +[data-tooltip]:before, +[data-tooltip]:after, +.tooltip:before, +.tooltip:after { + position: absolute; + visibility: hidden; + -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-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + pointer-events: none; +} + +/* Show the entire tooltip on hover and focus */ +[data-tooltip]:hover:before, +[data-tooltip]:hover:after, +[data-tooltip]:focus:before, +[data-tooltip]:focus:after, +.tooltip:hover:before, +.tooltip:hover:after, +.tooltip:focus:before, +.tooltip:focus:after { + visibility: visible; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } @@ -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; } - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + -- cgit 1.2.3-korg