From bf566c138c513af95f01657cec75d97bc442777b Mon Sep 17 00:00:00 2001 From: AhmedEldeeb50 Date: Thu, 7 May 2020 16:10:33 +0200 Subject: update template&mapping create view. add alert messages for success and error Issue-ID: CCSDK-2323 Signed-off-by: AhmedEldeeb50 Change-Id: Id05c73abad2342685971e2e57409b4a471f9242f --- .../scripts-tab/scripts-tab.component.html | 3 +- .../templ-mapp-creation.component.css | 5 + .../templ-mapp-creation.component.html | 19 +- .../templ-mapp-creation.component.ts | 40 +- .../templ-mapp-listing.component.html | 7 +- .../templ-mapp-listing.component.ts | 14 +- .../template-mapping.component.html | 8 +- .../template-mapping/template-mapping.component.ts | 11 +- cds-ui/designer-client/src/styles.css | 1699 ++++++++++++-------- 9 files changed, 1135 insertions(+), 671 deletions(-) (limited to 'cds-ui/designer-client/src') diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html index 159f7aec4..1ecf2985e 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html @@ -116,8 +116,7 @@ - diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.css index 7273b9c27..3a0d9461c 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.css +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.css @@ -1,4 +1,9 @@ .accordian-title { color: #a09e9e; font-size: .9em; +} + +.mapping-source-load { + background-color: white; + border: 0 } \ No newline at end of file diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html index e6149c883..4f9b2709a 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html @@ -6,7 +6,8 @@
- +
@@ -79,11 +80,13 @@

Select a source to load config parameters

- + @@ -199,8 +202,9 @@
- - + +
@@ -253,8 +257,9 @@ - diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts index 7d4705d69..4601880f8 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts @@ -1,4 +1,4 @@ -import { Component, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'; +import { Component, EventEmitter, OnDestroy, OnInit, Output, ViewChild, AfterViewInit, ElementRef } from '@angular/core'; import { FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop'; import { PackageCreationStore } from '../../package-creation.store'; import { TemplateInfo, TemplateStore } from '../../template.store'; @@ -17,14 +17,14 @@ import { ToastrService } from 'ngx-toastr'; }) export class TemplMappCreationComponent implements OnInit, OnDestroy { @Output() showListViewParent = new EventEmitter(); - + @Output() openList = new EventEmitter(); public uploadedFiles: FileSystemFileEntry[] = []; private fileNames: Set = new Set(); private jsonConvert = new JsonConvert(); public files: NgxFileDropEntry[] = []; fileName: any; templateInfo = new TemplateInfo(); - private variables: string[] = []; + variables: string[] = []; dtOptions: DataTables.Settings = {}; // We use this trigger because fetching the list of persons can be quite long, // thus we ensure the data is fetched before rendering @@ -44,8 +44,6 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { currentTemplate: any; currentMapping: any; - - constructor( private packageCreationStore: PackageCreationStore, private templateStore: TemplateStore, @@ -56,6 +54,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { ngOnInit() { this.templateStore.state$.subscribe(templateInfo => { + // init Template&mapping vars console.log('----------'); console.log(templateInfo); this.templateInfo = templateInfo; @@ -63,21 +62,29 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { if (this.fileName) { this.fileName = this.fileName.split('-')[0]; } - if (templateInfo.type === 'mapping') { + if (templateInfo.type === 'mapping' || templateInfo.type.includes('mapping')) { this.mappingRes = templateInfo.mapping; - this.currentMapping = templateInfo; + this.currentMapping = Object.assign({}, templateInfo); this.resourceDictionaryRes = []; this.resTableDtTrigger.next(); } else { + this.mappingRes = []; + this.currentMapping = Any; + } + this.templateFileContent = templateInfo.fileContent; + this.currentTemplate = Object.assign({}, templateInfo); - this.templateFileContent = templateInfo.fileContent; - this.currentTemplate = templateInfo; + if (templateInfo.type === 'template' || templateInfo.type.includes('template')) { + this.currentTemplate.fileName = 'Templates/' + this.fileName + '-template.vtl'; + } else { + this.currentTemplate = Any; } + }); this.dtOptions = { pagingType: 'full_numbers', - pageLength: 10, + pageLength: 25, destroy: true, retrieve: true, }; @@ -211,7 +218,12 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { this.showListViewParent.emit('tell parent to open create views'); } + closeCreationForm() { + this.openList.emit('close create form and open list'); + } + getMappingTableFromTemplate(e) { + console.log('-' + this.templateFileContent + '-'); this.resourceDictionaryRes = []; if (e) { e.preventDefault(); @@ -219,10 +231,17 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { if (this.variables && this.variables.length > 0) { console.log('base'); this.packageCreationStore.getTemplateAndMapping(this.variables).subscribe(res => { + let message = 'Attributes are Fetched'; this.mappingRes = []; this.resourceDictionaryRes = res; console.log(this.resourceDictionaryRes); this.rerender(); + if (this.resourceDictionaryRes && this.resourceDictionaryRes.length <= 0) { + message = 'No values for those attributes'; + } + this.toastr.success(message, 'Success'); + }, err => { + this.toastr.error('Error'); }); } } @@ -261,6 +280,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { } this.fileName = ''; this.toastr.success('File is created', 'success'); + this.closeCreationForm(); } else { console.log('this file already exist'); this.toastr.error('File name already exist', 'Error'); diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html index a47963a72..8c92f0dc2 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html @@ -1,9 +1,9 @@ - + Create -
+
@@ -21,7 +21,8 @@
- {{file}} + {{file}} Mapping Template diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts index 448899019..ed9f3eeb3 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts @@ -13,6 +13,7 @@ import { ActivatedRoute } from '@angular/router'; }) export class TemplMappListingComponent implements OnInit { @Output() showCreationViewParentNotification = new EventEmitter(); + @Output() showFullView = new EventEmitter(); private templateAndMappingMap = new Map(); private templates: Template; private mapping: Mapping; @@ -71,6 +72,9 @@ export class TemplMappListingComponent implements OnInit { openCreationView() { this.showCreationViewParentNotification.emit('tell parent to open create views'); } + FullView() { + this.showFullView.emit('show full view'); + } setSourceCodeEditor(key: string) { this.currentFile = key; @@ -80,23 +84,23 @@ export class TemplMappListingComponent implements OnInit { console.log(cba); console.log(key); console.log(this.templateAndMappingMap); + const templateInfo = new TemplateInfo(); if (cba.templates && cba.templates.files.has(templateKey)) { const fileContent = cba.templates.getValue(templateKey.trim()); console.log(fileContent); - const templateInfo = new TemplateInfo(); templateInfo.fileContent = fileContent; templateInfo.fileName = templateKey; - this.templateStore.changeTemplateInfo(templateInfo); + templateInfo.type = 'template'; } const mappingKey = 'Templates/' + key + '-mapping.json'; if (cba.mapping && cba.mapping.files.has(mappingKey)) { const obj = JSON.parse(cba.mapping.getValue(mappingKey)); - const templateInfo = new TemplateInfo(); templateInfo.mapping = obj; templateInfo.fileName = mappingKey; - templateInfo.type = 'mapping'; - this.templateStore.changeTemplateInfo(templateInfo); + templateInfo.type += 'mapping'; } + this.templateStore.changeTemplateInfo(templateInfo); + this.FullView(); }); } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.html index f8cfe7a6a..8fd97d71d 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.html @@ -1,9 +1,9 @@
- +
- -
+ + +
\ No newline at end of file diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.ts index 106765834..d2e25ef6f 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.ts @@ -8,8 +8,8 @@ import { PackageCreationStore } from '../package-creation.store'; styleUrls: ['./template-mapping.component.css'] }) export class TemplateMappingComponent implements OnInit { - creationView = true; - listView = false; + creationView = false; + listView = true; constructor(private route: ActivatedRoute, private pakcageStore: PackageCreationStore) { } @@ -17,7 +17,7 @@ export class TemplateMappingComponent implements OnInit { ngOnInit() { if (this.route.snapshot.paramMap.has('id')) { console.log('Edit mode'); - this.creationView = false; + this.creationView = true; this.listView = false; } else { console.log('Create mode'); @@ -34,4 +34,9 @@ export class TemplateMappingComponent implements OnInit { this.creationView = false; } + closeCreationView() { + this.creationView = true; + this.listView = false; + } + } diff --git a/cds-ui/designer-client/src/styles.css b/cds-ui/designer-client/src/styles.css index 3c0a049bf..adbedd849 100644 --- a/cds-ui/designer-client/src/styles.css +++ b/cds-ui/designer-client/src/styles.css @@ -1,7 +1,9 @@ -html, body{ +html, +body { height: 100%; } -body{ + +body { background: #FAFAFA !important; /* background-image: linear-gradient(-45deg, #000 10%, #fff 0); background-size: 6px 6px; */ @@ -11,67 +13,83 @@ body{ color: #1B3E6F !important; font-size: 14px; } -*:focus{ + +*:focus { outline: none; } -:hover{ + +:hover { transition: 0.3s !important; } + /*Bootstrap*/ -.custom-control-label::before{ +.custom-control-label::before { border: solid 1px #C3CDDB !important; border-radius: 0 !important; } -.custom-control-input:checked ~ .custom-control-label::before{ + +.custom-control-input:checked~.custom-control-label::before { background: #1B3E6F !important; } -.custom-radio .custom-control-label::before{ + +.custom-radio .custom-control-label::before { border-radius: 50% !important; } -.custom-control-label{ + +.custom-control-label { font-size: 13px; line-height: 24px; } -.form-check-input + span{ + +.form-check-input+span { display: inline-flex !important; } -.form-check-input + span i{ + +.form-check-input+span i { margin-right: 9px !important; } -.form-control:focus{ + +.form-control:focus { background-color: #F4F9FE !important; } -.label-input input[type="radio"]{ + +.label-input input[type="radio"] { width: 14px !important; height: 14px; } + /*ICONS*/ -.icon-menuDots{ +.icon-menuDots { font-size: 3px !important; color: #1B3E6F; vertical-align: middle; } + /*Components*/ /* Menu Styles */ -.primary-nav{ +.primary-nav { /* left: 0; */ position: fixed; z-index: 999; } -.menu{ + +.menu { position: relative; } -.menu ul{ + +.menu ul { margin: 0; padding: 0; list-style: none; } -.open-panel{ + +.open-panel { border: none; - background-color:#fff; + background-color: #fff; padding: 0; } -.logo-icon{ + +.logo-icon { background: #fff; position: relative; display: block; @@ -84,10 +102,12 @@ body{ z-index: 1000; cursor: pointer; } -.primary-nav .menu li{ + +.primary-nav .menu li { position: relative; } -.menu .icon{ + +.menu .icon { position: absolute; top: 12px; right: 10px; @@ -97,17 +117,20 @@ body{ color: #fff; text-align: center; } -.menu .icon .fa{ + +.menu .icon .fa { vertical-align: middle; } + .menu, .menu a, -.menu a:visited{ +.menu a:visited { color: #fff; - text-decoration: none!important; + text-decoration: none !important; position: relative; } -.menu a{ + +.menu a { display: block; white-space: nowrap; padding: 10px 1em; @@ -116,66 +139,81 @@ body{ height: 52px; line-height: 30px; } -.menu a:hover{ + +.menu a:hover { color: #fff; } -.menu-dropdown li .icon{ + +.menu-dropdown li .icon { text-align: center; font-size: 16px; color: #fff; line-height: 33px; } -.menu-dropdown a{ + +.menu-dropdown a { cursor: pointer; } -.menu-dropdown li.active .icon{ + +.menu-dropdown li.active .icon { color: #fff; background: #265699; border-radius: 50%; } -.menu-dropdown li:hover{ + +.menu-dropdown li:hover { background: #172B4D; } -.menu label{ + +.menu label { margin-bottom: 0; display: block; } -.menu label:hover{ + +.menu label:hover { cursor: pointer; } -.menu input[type="checkbox"]{ + +.menu input[type="checkbox"] { display: none; } -input#menu[type="checkbox"]{ + +input#menu[type="checkbox"] { display: none; } -.sub-menu-dropdown{ + +.sub-menu-dropdown { display: none; } -.new-wrapper{ + +.new-wrapper { position: absolute; left: 50px; width: calc(100% - 50px); transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1); } -#menu:checked + ul.menu-dropdown{ + +#menu:checked+ul.menu-dropdown { left: 0; -webkit-animation: all .45s cubic-bezier(0.77, 0, 0.175, 1); animation: all .45s cubic-bezier(0.77, 0, 0.175, 1); } -.sub-menu-checkbox:checked + ul.sub-menu-dropdown{ - display: block!important; + +.sub-menu-checkbox:checked+ul.sub-menu-dropdown { + display: block !important; -webkit-animation: grow .45s cubic-bezier(0.77, 0, 0.175, 1); animation: grow .45s cubic-bezier(0.77, 0, 0.175, 1); border-top: solid 2px #1B3E6F; } -.openNav .new-wrapper{ + +.openNav .new-wrapper { position: absolute; transform: translate3d(200px, 0, 0); width: calc(100% - 250px); transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1); } -.downarrow{ + +.downarrow { background: transparent; position: absolute; right: 50px; @@ -186,10 +224,12 @@ input#menu[type="checkbox"]{ text-align: center; display: block; } -.downarrow:hover{ + +.downarrow:hover { color: #fff; } -.menu{ + +.menu { position: absolute; display: block; left: -200px; @@ -200,161 +240,192 @@ input#menu[type="checkbox"]{ background-color: #1B3E6F; z-index: 999; } -.menu-dropdown{ + +.menu-dropdown { top: 0; overflow-y: auto; } -.overflow-container{ + +.overflow-container { position: relative; - height: calc(100vh - 50px)!important; + height: calc(100vh - 50px) !important; overflow-y: auto; border-top: 60px solid #fff; z-index: -1; - display:block; + display: block; } -.menu .logotype{ +.menu .logotype { position: absolute !important; top: 16px; left: 55px; display: block; } + /* .sub-menu-dropdown{ background-color: #333; } */ -.menu:hover{ +.menu:hover { position: absolute; left: 0; top: 0; } -.openNav .menu:hover{ + +.openNav .menu:hover { position: absolute; left: -200px; top: 60px; } -.openNav .menu{ + +.openNav .menu { top: 60px; transform: translate3d(200px, 0, 0); transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1); } -@-webkit-keyframes grow{ + +@-webkit-keyframes grow { 0% { display: none; opacity: 0; } + 50% { display: block; opacity: 0.5; } + 100% { opacity: 1; } } -@keyframes grow{ + +@keyframes grow { 0% { display: none; opacity: 0; } + 50% { display: block; opacity: 0.5; } + 100% { opacity: 1 } } + /*User Profile*/ -.userProfile .dropdown{ +.userProfile .dropdown { width: 99.5%; } -.userProfile .dropdown:hover{ + +.userProfile .dropdown:hover { background: #172B4D !important; } -.userProfile .dropdown-text{ + +.userProfile .dropdown-text { background: transparent; border: 0; box-shadow: none; font-size: 13px; line-height: 40px; } -.import-container-all{ + +.import-container-all { width: 100%; padding-bottom: 20px; } -.import-container{ + +.import-container { width: 100%; background: #E7F1FC; margin-bottom: 20px; padding: 9px 18px; border: solid 1px #EEF4F9; } -.import-container-input{ + +.import-container-input { width: 40%; position: relative; display: inline-block; margin-right: 20px; } -.import-container-input input{ + +.import-container-input input { width: 100%; height: 36px; padding: 5px 40px 5px 12px; border: 0px; border-radius: 2px; - -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); + -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); font-size: 13px; color: #172B4D; } -.import-container-input input:focus{ + +.import-container-input input:focus { box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.18); } -.import-container-input input::placeholder{ + +.import-container-input input::placeholder { color: #959DA8 !important; } -.enter-link{ + +.enter-link { position: absolute; right: 12px; font-size: 20px; top: 6px; color: #1273EB; } -.enter-link:hover{ + +.enter-link:hover { text-decoration: none; } -.import-container-input input::placeholder{ + +.import-container-input input::placeholder { color: #CFD7E5; } -.import-container-span{ + +.import-container-span { font-size: 12px; } -.import-container-all .accordion .card-header{ + +.import-container-all .accordion .card-header { background: #fff !important; border-bottom: 0 !important; } -.import-container-all .collapse.show{ + +.import-container-all .collapse.show { border-top: solid 1px #ECEDF2; } -.import-container-all .card-header .accordion-delete{ + +.import-container-all .card-header .accordion-delete { display: none; } -.import-container-all .card-header:hover .accordion-delete{ + +.import-container-all .card-header:hover .accordion-delete { display: inline; } -.accordion-delete{ + +.accordion-delete { color: #FF6469; font-size: 18px; margin-top: 11px; } -.accordion-delete:hover{ + +.accordion-delete:hover { text-decoration: none; } + /* .userProfile .dropdown-toggle{ height: 40px; } */ -.userProfile .dropdown-toggle:hover ~ .dropdown-text, -.userProfile .dropdown-toggle:focus ~ .dropdown-text{ +.userProfile .dropdown-toggle:hover~.dropdown-text, +.userProfile .dropdown-toggle:focus~.dropdown-text { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; @@ -367,60 +438,72 @@ height: 40px; height: 24px; background: url(/assets/img/img-userProfile.png) center center no-repeat; } -.packagesFilter .custom-checkbox{ + +.packagesFilter .custom-checkbox { margin-left: 8px; } -.packagesFilter .custom-control-label{ + +.packagesFilter .custom-control-label { line-height: 28px !important; font-size: 14px !important; text-indent: 6px !important; } -.packagesFilter .reset-filter{ + +.packagesFilter .reset-filter { margin-top: 6px; padding-top: 6px; padding-left: 9px; border-top: solid 1px #ECEDF2; font-size: 13px; } -.packagesFilter .reset-filter a:hover{ + +.packagesFilter .reset-filter a:hover { background: none !important; text-decoration: none; color: #1B3E6F; } + /**Packages Sort**/ -.sort-packages{ +.sort-packages { font-size: 12px; font-weight: bold; color: #C3CDDB; } -.sort-packages .dropdown{ + +.sort-packages .dropdown { width: 88px; } -.sort-packages .dropdown-text{ + +.sort-packages .dropdown-text { background: transparent; border: 0; box-shadow: none; color: #1B3E6F; } -.sort-packages .dropdown-text::after{ + +.sort-packages .dropdown-text::after { right: 18px !important; border: solid !important; border-color: #1B3E6F transparent transparent transparent !important; } -.sort-packages .dropdown-toggle:focus ~ .dropdown-text::after{ + +.sort-packages .dropdown-toggle:focus~.dropdown-text::after { top: 12px !important; border-color: transparent transparent #1B3E6F transparent !important; } -.sort-packages .dropdown-toggle:hover ~ .dropdown-text, -.sort-packages .dropdown-toggle:focus ~ .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-toggle:focus ~ .dropdown-content{ +.sort-packages .dropdown-toggle:focus~.dropdown-content { top: 30px; } -.sort-packages .dropdown-content{ + +.sort-packages .dropdown-content { width: 88px; padding: 6px 0; background: #fff; @@ -428,22 +511,26 @@ height: 40px; border: 0; box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15); } -.sort-packages .dropdown-content a{ + +.sort-packages .dropdown-content a { color: #1B3E6F; font-size: 12px; } -.sort-packages .dropdown-content a:hover{ + +.sort-packages .dropdown-content a:hover { color: #1B3E6F; background-color: #F4F9FE; text-decoration: unset; cursor: pointer; } + /**Pagination**/ -.page-item{ +.page-item { margin: 3px 2px 0; } + .page-item .page-link, -.page-item.disabled .page-link{ +.page-item.disabled .page-link { padding: 5px 9px; background: transparent !important; border: 0; @@ -451,72 +538,82 @@ height: 40px; font-size: 13px; font-weight: bold; } + .page-item.active .page-link, -.page-link:hover{ +.page-link:hover { color: #1B3E6F !important; background-color: #fff !important; border-radius: 100% !important; box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1); outline: 0; } + /**Packages Cards***/ /***Package Info Card***/ -.packages-card .card{ +.packages-card .card { width: 100%; margin: 0; border-radius: 2px; border: 0; box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1); } -.packages-card .card-title{ + +.packages-card .card-title { margin-bottom: 0 !important; font-size: 13px; font-weight: bold; color: #1B3E6F; } -.packages-card .card-title span{ + +.packages-card .card-title span { color: #1B3E6F; font-size: 11px; vertical-align: bottom; } -.packages-card p{ + +.packages-card p { font-size: 12px; color: #D0D7E4; } -.packages-card p.package-desc{ + +.packages-card p.package-desc { font-size: 13px; text-align: left; - display: -webkit-box; - -webkit-line-clamp: 1; - -webkit-box-orient: vertical; + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; overflow: hidden; } -.packages-card p.package-desc:hover{ + +.packages-card p.package-desc:hover { color: #1B3E6F !important; text-decoration: underline; } .packages-card [data-tooltip]::before, -.packages-card .tooltip::before{ +.packages-card .tooltip::before { border: 0 !important; } + .packages-card .tooltip:after, .packages-card [data-tooltip]:after { padding: 9px; font-size: 11px; background: #F4F9FE; border: solid 1px #E6EDF5; - box-shadow: 0 0 12 rgba(0,0,0,0.8); + box-shadow: 0 0 12 rgba(0, 0, 0, 0.8); border-radius: 3px; } + /***Add Package Card***/ -.addPaackage-card{ +.addPaackage-card { padding: 10px 0; background: #F4F9FE !important; border: solid 1px #D7E7F9 !important; box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.18) !important; } -.addPaackage-card a{ + +.addPaackage-card a { margin: 0; padding: 8px 15px; font-weight: bold; @@ -528,31 +625,37 @@ height: 40px; background-repeat: no-repeat; text-align: left; } -.addPaackage-card a:hover{ + +.addPaackage-card a:hover { text-decoration: unset; } + .btn-create-package i, -.btn-import-package i{ +.btn-import-package i { margin-right: 9px; font-size: 14px; vertical-align: middle; } + .btn-create-package, -.btn-create-package:hover{ +.btn-create-package:hover { background-color: #1B3E6F; color: #fff; } + .btn-import-package, -.btn-import-package:hover{ +.btn-import-package:hover { background: #C3CDDB; color: #1B3E6F; } + /***Actions Menu***/ -.packages-card .dropdown{ +.packages-card .dropdown { width: auto; float: right; } -.packages-card .dropdown-text{ + +.packages-card .dropdown-text { background: transparent; border: 0; box-shadow: none; @@ -562,32 +665,38 @@ height: 40px; border-bottom-right-radius: 0; opacity: .6; } -.packages-card .dropdown-text:hover{ + +.packages-card .dropdown-text:hover { opacity: 1; } -.packages-card .dropdown-text::after{ + +.packages-card .dropdown-text::after { display: none; } -.packages-card .dropdown-text img{ + +.packages-card .dropdown-text img { padding: 9px 7px; } -.packages-card .dropdown-content{ + +.packages-card .dropdown-content { right: 0; width: 120px; padding: 6px 0; border: 0; border-radius: 50%; } + /* .userProfile .dropdown-content{ bottom: 40px !important; top: unset !important; width: 100%; } */ /**Tab Nav**/ -.nav-tabs{ +.nav-tabs { border-bottom-color: #ECEDF2 !important; } -.nav-link{ + +.nav-link { padding: 15px 20px 15px 20px !important; text-transform: uppercase !important; font-size: 12px; @@ -595,21 +704,25 @@ height: 40px; color: #C3CDDB !important; border: none !important; } + .nav-tabs .nav-link:focus, -.nav-tabs .nav-link:hover{ +.nav-tabs .nav-link:hover { border: 0 !important; transition: 0.3s; } -.nav-tabs .nav-link:hover{ + +.nav-tabs .nav-link:hover { color: #1B3E6F !important; } -.nav-tabs .nav-link.active{ + +.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{ + +.nav-tabs .nav-link::before { content: "|"; padding-right: 20px !important; color: #C3CDDB; @@ -617,26 +730,31 @@ height: 40px; position: absolute; left: 0px; } -.nav-tabs .nav-link:first-child::before{ + +.nav-tabs .nav-link:first-child::before { content: none; } -.nav-tabs .nav-link:first-child{ + +.nav-tabs .nav-link:first-child { padding-left: 20px !important; } + .nav-item.nav-link.complete, -.nav-item.active.complete{ +.nav-item.active.complete { padding: 15px 20px 15px 44px !important; background: url(/assets/img/icon-required-yes.svg) 20px center no-repeat !important; } + /**Sliding Search Input**/ -.searchBox{ +.searchBox { position: absolute; top: 0%; right: 0%; - transform: translate(0%,-0%); + transform: translate(0%, -0%); height: 40px; } -.searchButton{ + +.searchButton { float: right; margin-top: 18px; padding-left: 0 !important; @@ -652,17 +770,21 @@ height: 40px; align-items: center; transition: 0.4s; } -.searchBox:hover > .searchInput{ + +.searchBox:hover>.searchInput { width: 240px; border-bottom: solid 1px #C3CDDB; } -.searchBox > .searchInput:focus{ + +.searchBox>.searchInput:focus { border-bottom: solid 1px #1B3E6F !important; } -.searchBox:hover > .searchButton{ + +.searchBox:hover>.searchButton { color: #1B3E6F; } -.searchInput{ + +.searchInput { border: none; background: none; outline: none; @@ -674,22 +796,26 @@ height: 40px; line-height: 49px; width: 0px; } -.searchInput::placeholder{ + +.searchInput::placeholder { color: #BABBC3; } -.searchBox-expanded{ + +.searchBox-expanded { width: 240px; border-bottom: solid 1px #C3CDDB; } + /**Drop Down Menu**/ -.dropdown{ +.dropdown { position: relative; display: inline-block; text-align: left; width: 132px; z-index: 200; } -.dropdown-text{ + +.dropdown-text { cursor: pointer; position: relative; text-indent: 10px; @@ -697,10 +823,11 @@ height: 40px; 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); + box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 1px 3px rgba(0, 0, 0, .1); width: 100%; } -.dropdown-text:after{ + +.dropdown-text:after { position: absolute; right: 6px; top: 15px; @@ -710,9 +837,10 @@ height: 40px; border-style: solid; /* border-width: 5px 4px 0 4px; border-color: #555 transparent transparent transparent; */ - border:0px + border: 0px } -.dropdown-toggle{ + +.dropdown-toggle { font-size: 0; z-index: 1; cursor: pointer; @@ -726,17 +854,19 @@ height: 40px; height: 34px; width: 100%; } -.dropdown-toggle:focus{ + +.dropdown-toggle:focus { outline: 0; } -.dropdown-content{ + +.dropdown-content { position: absolute; top: 32px; width: 140px; margin: 0; padding: 0; opacity: 0; - visibility:hidden; + visibility: hidden; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; @@ -749,54 +879,66 @@ height: 40px; background-color: #eee; border: 1px solid #ccc; } -.dropdown-content a{ + +.dropdown-content a { display: block; } -.dropdown-content a:hover{ + +.dropdown-content a:hover { background: #e8e8e8; } -.dropdown-toggle:hover ~ .dropdown-text, -.dropdown-toggle:focus ~ .dropdown-text{ + +.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); + +.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{ + +.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{ +.dropdown-toggle:focus~.dropdown-content { opacity: 1; - visibility:visible; + 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; @@ -807,6 +949,7 @@ height: 40px; margin-bottom: 25px !important; box-shadow: 0 0 1px rgba(0, 0, 0, 0); } + /* .card:before { pointer-events: none; position: absolute; @@ -840,21 +983,23 @@ height: 40px; animation-iteration-count: 1; animation-direction: alternate; } */ -.card-body{ +.card-body { padding: 20px !important; } /*Main Container*/ -.main-container{ +.main-container { padding: 0 !important; } -.header-button-save button{ + +.header-button-save button { border-radius: 50px; } + /*Page Title*/ -.page-title{ +.page-title { padding: 20px 30px; - background:#fff; + background: #fff; border-left: solid 1px #FAFAFA; margin-bottom: 21px; -webkit-box-shadow: 0 4px 10px 0 #eef0f5; @@ -864,39 +1009,48 @@ height: 40px; /* position: fixed; width: calc(100% - 50px); */ } -.page-title h2{ + +.page-title h2 { font-size: 16px; font-weight: bold; padding-top: 1px; } -.page-title h2 span{ + +.page-title h2 span { color: #C3CDDB; font-size: 14px; } + /*Content*/ -.body-container{ +.body-container { padding: 0 30px !important; } -.body-container > .container{ + +.body-container>.container { padding: 0; } -.search-filter-col{ + +.search-filter-col { padding-right: 0 !important; border-bottom: solid 1px #ECEDF2 !important; } + /**Packages Filter**/ -.packagesFilter{ +.packagesFilter { margin-top: 12px; margin-bottom: 7px; z-index: 220 !important; } -.packagesFilter .dropdown-toggle{ + +.packagesFilter .dropdown-toggle { height: 36px !important; } -.packagesFilter .dropdown-toggle:focus ~ .dropdown-text::after{ + +.packagesFilter .dropdown-toggle:focus~.dropdown-text::after { border-color: transparent transparent #1B3E6F transparent; } -.packagesFilter .dropdown-text{ + +.packagesFilter .dropdown-text { background: transparent; border: 0; box-shadow: none; @@ -904,26 +1058,31 @@ height: 40px; line-height: 30px; font-size: 12px; } -.packagesFilter .dropdown-text::after{ + +.packagesFilter .dropdown-text::after { right: 12px; border: solid !important; border-width: 5px 4px 0 4px !important; border-color: #1B3E6F transparent transparent transparent !important; } -.packagesFilter .dropdown-toggle:hover ~ .dropdown-text, -.packagesFilter .dropdown-toggle:focus ~ .dropdown-text{ + +.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{ + +.packagesFilter .dropdown-toggle:focus~.dropdown-text { background: #fff; box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15); } -.packagesFilter .dropdown-text::after{ + +.packagesFilter .dropdown-text::after { top: 12px; } -.packagesFilter .dropdown-content{ + +.packagesFilter .dropdown-content { padding: 6px 0; background: #fff; box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15); @@ -933,14 +1092,17 @@ height: 40px; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; } -.packagesFilter .dropdown-content li:hover .custom-checkbox{ + +.packagesFilter .dropdown-content li:hover .custom-checkbox { cursor: pointer; } + .packagesFilter .dropdown-content:hover, -.packagesFilter .dropdown-toggle:focus ~ .dropdown-content{ +.packagesFilter .dropdown-toggle:focus~.dropdown-content { top: 30px; } -.packagesFilter .form-control{ + +.packagesFilter .form-control { padding: 12px 9px 12px 38px !important; border: 0 !important; border-bottom: solid 1px #D7E7F9 !important; @@ -950,55 +1112,68 @@ height: 40px; color: #1B3E6F; font-size: 13px; } -.packagesFilter .form-control::placeholder{ + +.packagesFilter .form-control::placeholder { color: #BABBC3; } -.packagesFilter .form-control:focus{ + +.packagesFilter .form-control:focus { box-shadow: none !important; border-bottom: solid 1px #1B3E6F !important; } -.packagesFilter .custom-checkbox{ + +.packagesFilter .custom-checkbox { margin-left: 8px; } -.packagesFilter .custom-control-input{ + +.packagesFilter .custom-control-input { left: 10px; } -.packagesFilter .custom-control-label{ + +.packagesFilter .custom-control-label { line-height: 28px !important; font-size: 13px !important; text-indent: 6px !important; } + /**Packages Sort**/ -.sort-packages{ +.sort-packages { font-size: 12px; font-weight: bold; color: #C3CDDB; } -.sort-packages .dropdown{ + +.sort-packages .dropdown { width: 88px; } -.sort-packages .dropdown-text{ + +.sort-packages .dropdown-text { background: transparent; border: 0; box-shadow: none; color: #1B3E6F; } -.sort-packages .dropdown-text::after{ + +.sort-packages .dropdown-text::after { border-color: #1B3E6F transparent transparent transparent; } -.sort-packages .dropdown-toggle:focus ~ .dropdown-text::after{ + +.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{ + +.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{ +.sort-packages .dropdown-toggle:focus~.dropdown-content { top: 30px; } -.sort-packages .dropdown-content{ + +.sort-packages .dropdown-content { width: 88px; padding: 6px 0; background: #fff; @@ -1006,55 +1181,65 @@ height: 40px; border: 0; box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15); } -.sort-packages .dropdown-content a{ + +.sort-packages .dropdown-content a { color: #1B3E6F; font-size: 12px; } -.sort-packages .dropdown-content a:hover{ + +.sort-packages .dropdown-content a:hover { background-color: #F4F9FE; text-decoration: unset; } + /**Pagination**/ .page-item .page-link, -.page-item.disabled .page-link{ +.page-item.disabled .page-link { background: transparent !important; border: 0; color: #1B3E6F !important; font-size: 14px; } -.page-link:hover{ + +.page-link:hover { color: #1B3E6F !important; background-color: #fff !important; border-radius: 100%; transition: 0.3s; box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.12); } -.page-item.disabled{ + +.page-item.disabled { opacity: .3; } + /**Packages Cards***/ /***Package Info Card***/ -.packages-card .card{ +.packages-card .card { margin: 0; border-radius: 2px; border: 0; box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.12); } -.packages-card .card:hover{ + +.packages-card .card:hover { box-shadow: 0 2px 13px 6px rgba(47, 83, 151, .17); transition: all 0.5s ease; cursor: pointer; } + .packages-card .card:hover .card-title, -.packages-card .card:hover .card-title span{ +.packages-card .card:hover .card-title span { color: #1273EB !important; } -.packages-card .card-title{ + +.packages-card .card-title { margin-bottom: 0 !important; font-size: 14px; font-weight: bold; } -.packages-card .card-title .packageName{ + +.packages-card .card-title .packageName { margin-bottom: 0; display: inline-block; width: auto; @@ -1066,57 +1251,68 @@ height: 40px; vertical-align: bottom; color: #1B3E6F; } + .packages-card .card-title:hover, -.packages-card .card-title:hover .packageName{ +.packages-card .card-title:hover .packageName { text-decoration: none; color: #1273EB; } -.packages-card .card-body{ + +.packages-card .card-body { padding-bottom: 0 !important; } -.packages-card .card-footer .col{ + +.packages-card .card-footer .col { text-align: left; } /***Add Package Card***/ -.addPaackage-card{ +.addPaackage-card { background: #F4F9FE !important; border: solid 1px #D7E7F9 !important; } -.addPaackage-card:hover{ + +.addPaackage-card:hover { box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1) !important; } -.addPaackage-card a:hover{ +.addPaackage-card a:hover { text-decoration: unset; } -.addPaackage-card .card-footer .col{ + +.addPaackage-card .card-footer .col { padding: 0; text-align: right; } -.addPaackage-card .card-footer .col:last-child{ + +.addPaackage-card .card-footer .col:last-child { text-align: left; } + .btn-create-package, -.btn-import-package{ +.btn-import-package { margin-bottom: 9px !important; } + .btn-create-package, -.btn-create-package:hover{ +.btn-create-package:hover { background-color: #1B3E6F; border-color: #1B3E6F; color: #fff; } + .btn-import-package, -.btn-import-package:hover{ +.btn-import-package:hover { color: #1B3E6F; } + /***Actions Menu***/ -.packages-card .dropdown{ +.packages-card .dropdown { width: auto; float: right; } -.packages-card .dropdown-text{ + +.packages-card .dropdown-text { background: transparent; border: 0; box-shadow: none; @@ -1126,13 +1322,16 @@ height: 40px; border-bottom-right-radius: 0; opacity: .6; } -.packages-card .dropdown-text::after{ + +.packages-card .dropdown-text::after { display: none; } -.packages-card .dropdown-text img{ + +.packages-card .dropdown-text img { padding: 9px 7px; } -.packages-card .dropdown-content{ + +.packages-card .dropdown-content { right: 0; width: 120px; padding: 6px 0; @@ -1142,7 +1341,8 @@ height: 40px; border-top-right-radius: 0; background: #1B3E6F; } -.packages-card .dropdown-content a{ + +.packages-card .dropdown-content a { padding-left: 12px; color: #fff; font-size: 12px; @@ -1150,35 +1350,43 @@ height: 40px; background-size: 10%; background-repeat: no-repeat; */ } -.packages-card .dropdown-content a i{ + +.packages-card .dropdown-content a i { margin-right: 4px; } -.packages-card .dropdown-content a:hover{ + +.packages-card .dropdown-content a:hover { background-color: #172B4D; text-decoration: unset; } + .packages-card .dropdown-content:hover, -.packages-card .dropdown-toggle:focus ~ .dropdown-content{ +.packages-card .dropdown-toggle:focus~.dropdown-content { top: 22px; } -.packages-card .dropdown-toggle:focus ~ .dropdown-text .icon-menuDots{ + +.packages-card .dropdown-toggle:focus~.dropdown-text .icon-menuDots { color: #D0D7E4; } -.packages-card .dropdown-toggle:hover ~ .dropdown-text{ + +.packages-card .dropdown-toggle:hover~.dropdown-text { background: transparent; opacity: 1; } -.packages-card .dropdown-toggle:focus ~ .dropdown-text{ + +.packages-card .dropdown-toggle:focus~.dropdown-text { width: 27px; text-align: center; opacity: 1; background: #1B3E6F; box-shadow: none; } -.package-version{ + +.package-version { color: #C3CDDB !important; } -.package-version::before{ + +.package-version::before { content: "|"; margin-left: 8px; margin-right: 6px; @@ -1186,25 +1394,30 @@ height: 40px; } /***Contributers***/ -ul.package-contributers{ +ul.package-contributers { /*margin-bottom: 0 !important;*/ padding-left: 0 !important; } -.package-contributers li{ + +.package-contributers li { list-style: none; display: inline-block; } -.package-contributers li{ + +.package-contributers li { margin-left: -5px; } -.package-contributers li:first-child{ + +.package-contributers li:first-child { margin-left: 0; } -.package-contributers li:last-child{ + +.package-contributers li:last-child { margin-left: 9px; } + .package-modifier, -.package-contributers button{ +.package-contributers button { height: 20px !important; padding: 0 !important; border-radius: 100%; @@ -1218,8 +1431,9 @@ ul.package-contributers{ display: inline-block; position: relative; } + .package-modifier:before, -.package-contributers button:before{ +.package-contributers button:before { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; @@ -1232,13 +1446,15 @@ ul.package-contributers{ right: 0; top: 0; } + .package-modifier:hover, -.package-contributers button:hover{ +.package-contributers button:hover { box-shadow: 0 0 0 2px #D7E7F9; text-decoration: none; } + .package-modifier:hover:before, -.package-contributers button:hover:before{ +.package-contributers button:hover:before { -webkit-transform: scale(0.925); -moz-transform: scale(0.925); -ms-transform: scale(0.925); @@ -1247,34 +1463,41 @@ ul.package-contributers{ box-shadow: 0 0 0 1px #D7E7F9; opacity: 0.5; } + .package-modifier img, -.package-contributers button img{ +.package-contributers button img { width: 20px; height: 20px; object-fit: cover; vertical-align: top; border-radius: 100%; } -.package-contributers a{ + +.package-contributers a { font-size: 12px; color: #1273EB; } -.package-contributers a:hover{ + +.package-contributers a:hover { text-decoration: unset; } + /***Package Footer***/ -.packages-card .card-footer{ +.packages-card .card-footer { padding: 0 !important; background: transparent !important; border-top-color: #F7F6F6 !important; } -.packages-card .card-footer .col{ + +.packages-card .card-footer .col { text-align: center; } -.packages-card .card-footer .col:first-child{ + +.packages-card .card-footer .col:first-child { border-right: solid 1px #F7F6F6; } -.packages-card .card-footer .btn{ + +.packages-card .card-footer .btn { padding: 10px 0 10px 0 !important; background-color: transparent !important; color: #1B3E6F !important; @@ -1283,14 +1506,17 @@ ul.package-contributers{ text-align: left; opacity: .4; } -.packages-card .card-footer .btn:hover{ + +.packages-card .card-footer .btn:hover { opacity: 1; } -.packages-card .card-footer i{ + +.packages-card .card-footer i { margin-right: 6px; } + .icon-deployed-active, -.icon-deploy-inactive{ +.icon-deploy-inactive { margin-right: 9px; display: inline; background-image: url(/assets/img/icon-deploy-active.svg); @@ -1298,7 +1524,8 @@ ul.package-contributers{ background-repeat: no-repeat; vertical-align: baseline; } -.icon-deploy-inactive{ + +.icon-deploy-inactive { background-image: url(/assets/img/icon-deploy-inactive.svg); } @@ -1320,18 +1547,21 @@ ul.package-contributers{ 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{ +.page-title-actions li { display: inline-block; text-align: center; } -.title-action{ + +.title-action { -webkit-transition: box-shadow 0.2s ease; -moz-transition: box-shadow 0.2s ease; transition: box-shadow 0.2s ease; @@ -1349,7 +1579,8 @@ ul.package-contributers{ width: 4em; line-height: 4em; } -.title-action:before{ + +.title-action:before { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; @@ -1362,11 +1593,13 @@ ul.package-contributers{ right: 0; top: 0; } -.title-action:hover{ + +.title-action:hover { box-shadow: 0 0 0 7px #07819b; text-decoration: none; } -.title-action:hover:before{ + +.title-action:hover:before { -webkit-transform: scale(0.925); -moz-transform: scale(0.925); -ms-transform: scale(0.925); @@ -1386,6 +1619,7 @@ ul.package-contributers{ transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } + .float:hover { transform: translateY(-5px); } @@ -1410,20 +1644,20 @@ ul.package-contributers{ 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); + 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); + 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); + 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); + -moz-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); pointer-events: none; } @@ -1509,8 +1743,8 @@ ul.package-contributers{ .tooltip-top:focus:before, .tooltip-top:focus:after { -webkit-transform: translateY(-12px); - -moz-transform: translateY(-12px); - transform: translateY(-12px); + -moz-transform: translateY(-12px); + transform: translateY(-12px); } /* Left */ @@ -1535,8 +1769,8 @@ ul.package-contributers{ .tooltip-left:focus:before, .tooltip-left:focus:after { -webkit-transform: translateX(-12px); - -moz-transform: translateX(-12px); - transform: translateX(-12px); + -moz-transform: translateX(-12px); + transform: translateX(-12px); } /* Bottom */ @@ -1560,8 +1794,8 @@ ul.package-contributers{ .tooltip-bottom:focus:before, .tooltip-bottom:focus:after { -webkit-transform: translateY(12px); - -moz-transform: translateY(12px); - transform: translateY(12px); + -moz-transform: translateY(12px); + transform: translateY(12px); } /* Right */ @@ -1584,8 +1818,8 @@ ul.package-contributers{ .tooltip-right:focus:before, .tooltip-right:focus:after { -webkit-transform: translateX(12px); - -moz-transform: translateX(12px); - transform: translateX(12px); + -moz-transform: translateX(12px); + transform: translateX(12px); } /* Move directional arrows down a bit for left/right tooltips */ @@ -1603,74 +1837,88 @@ ul.package-contributers{ /*TooltipModule - Shady*/ .tooltip:before, -.tooltip:after{ +.tooltip:after { width: 100% !important; } -.tooltip .tooltip-inner{ + +.tooltip .tooltip-inner { max-width: 280px !important; width: 100% !important; - text-align: left!important; - color:#1B3E6F; + text-align: left !important; + color: #1B3E6F; background-color: #F4F9FE; border: solid 1px #E6EDF5; border-radius: 3px !important; font-size: 11px; -} -.bs-tooltip-bottom .arrow::before{ - border-bottom-color: #E6EDF5 !important; -}
 -.bs-tooltip-top .arrow::before{ - border-top-color: #E6EDF5 !important; -}
 - +} + +.bs-tooltip-bottom .arrow::before { + border-bottom-color: #E6EDF5 !important; +} + +.bs-tooltip-top .arrow::before { + border-top-color: #E6EDF5 !important; +} + -.btn{ -padding-right: 20px !important; -padding-left: 20px !important; - +.btn { + padding-right: 20px !important; + padding-left: 20px !important; + } -.btn.border-radius{ + +.btn.border-radius { border-radius: 20px !important; } -.btn-primary{ - background-color: #1273EB !important; - border-color: #1273EB !important; + +.btn-primary { + background-color: #1273EB !important; + border-color: #1273EB !important; } + .btn-primary:hover { background-color: #0069d9 !important; border-color: #0062cc !important; } -.btn + .btn{ + +.btn+.btn { margin-left: 10px; - } - .package-view-button button{ - width: 150px; - float: right; - } -.package-view-button{ +} + +.package-view-button button { + width: 150px; + float: right; +} + +.package-view-button { margin-top: 6px; } -.package-view-button .btn{ + +.package-view-button .btn { padding: 6px 12px; border-radius: 2px; font-weight: bold; } -.package-view-button .btn:hover{ + +.package-view-button .btn:hover { opacity: .9; } -.package-view-button .btn-primary{ + +.package-view-button .btn-primary { background-color: #1B3E6F !important; border-color: #1B3E6F !important; - + /* margin-bottom: 10px; */ } -.package-view-button .btn-outline-secondary{ + +.package-view-button .btn-outline-secondary { background-color: #fff !important; border-color: #D0DFF1 !important; color: #1B3E6F !important; } + .package-view-title { font-size: 11px; color: #1B3E6F; @@ -1678,134 +1926,162 @@ padding-left: 20px !important; margin-bottom: 5px; margin-top: 20px; } -.package-view-title+p{ + +.package-view-title+p { font-size: 11px; margin-bottom: 0px; } -.package-view-title+ul{ + +.package-view-title+ul { margin-bottom: 0px; } -.package-view-button .btn-outline-secondary i{ + +.package-view-button .btn-outline-secondary i { font-size: 18px; margin-right: 4px; } -.card.creat-card{ + +.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{ + +.card.creat-card .single-line { padding: 15px 25px 15px; } -.card.creat-card .single-line-model{ + +.card.creat-card .single-line-model { padding: 0px; } -.card.creat-card .editor-container{ + +.card.creat-card .editor-container { padding: 25px; } -.single-line label{ + +.single-line label { margin-bottom: 0px; } -.single-line-model label{ + +.single-line-model label { margin-bottom: 0px; border-bottom: 1px solid #FAFAFA; padding: 15px 25px; } -.single-line-model .label-name{ + +.single-line-model .label-name { width: 325px; } -.single-line-model .label-input{ + +.single-line-model .label-input { width: calc(100% - 325px); } -.single-line-model input{ + +.single-line-model input { border-bottom: 1px solid #FAFAFA !important; padding: 15px 25px 15px 0px; } -.customKeyTitle span{ + +.customKeyTitle span { color: #C3CDDB !important; font-size: 11px; } + .single-line-model input:focus, -.single-line-custom-key input:focus{ +.single-line-custom-key input:focus { border-bottom-color: #1B3E6F !important; } -.model-note-container{ + +.model-note-container { width: calc(100% - 325px); - padding: 0px 25px 0px 0px ; + padding: 0px 25px 0px 0px; margin-left: 325px; } -.error-message{ - font-size:11px ; + +.error-message { + font-size: 11px; color: #FF6469; } -.tages-container{ + +.tages-container { margin-bottom: 25px; } -.tag-notes{ + +.tag-notes { font-size: 11px; color: #C3CDDB; padding: 5px 25px 5px 0px; margin-bottom: 5px; } - .single-tage{ - background: #E0E8F2; - font-size: 13px; - color: #1B3E6F; - border-radius: 50px; - padding: 5px 10px; - margin-right:10px; - margin-bottom: 10px; - } - .single-tage a{ - color: #1B3E6F; - font-size: 14px; - } - .label-name{ - width: 300px; - display: inline-block; - margin-bottom: 0px; - font-size: 13px; - font-weight: bold; - } - .label-name span{ - color:#FF6469 ; - } - .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{ + +.single-tage { + background: #E0E8F2; + font-size: 13px; + color: #1B3E6F; + border-radius: 50px; + padding: 5px 10px; + margin-right: 10px; + margin-bottom: 10px; +} + +.single-tage a { + color: #1B3E6F; + font-size: 14px; +} + +.label-name { + width: 300px; + display: inline-block; + margin-bottom: 0px; + font-size: 13px; + font-weight: bold; +} + +.label-name span { + color: #FF6469; +} + +.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{ + +.form-check-input+span { margin-left: 20px; margin-right: 50px; font-size: 13px; display: flex; } -.form-check-input+span i{ + +.form-check-input+span i { margin-right: 5px; margin-left: 5px; } -.label-input input{ +.label-input input { margin-bottom: 0px; outline: 0px; border: 0px; @@ -1814,15 +2090,18 @@ padding-left: 20px !important; color: #1B3E6F; transition: all 250ms ease-out; } -.label-input input[type=radio]{ + +.label-input input[type=radio] { width: auto; } -.label-input input[type=radio]+span{ + +.label-input input[type=radio]+span { font-size: 12px; display: block; margin-right: 100px; } -.single-line select{ + +.single-line select { margin-bottom: 0px; padding-left: 10px; padding-right: 50px; @@ -1839,94 +2118,115 @@ padding-left: 20px !important; font-size: 13px; color: #1B3E6F; } - .single-line select:focus{ - box-shadow: 0 0 0 0; - } - .single-line select option:first-child{ - color: #C3CDDB; - } - .single-line-model input::placeholder{ - font-size: 14px; - color: #C3CDDB; - } - .single-line-model.error{ - color:#FF6469; - } - .single-line-model.error input{ - color:#FF6469; - border-bottom: 1px solid #FF6469 !important; - } - .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; + +.single-line select:focus { + box-shadow: 0 0 0 0; +} + +.single-line select option:first-child { + color: #C3CDDB; +} + +.single-line-model input::placeholder { + font-size: 14px; + color: #C3CDDB; +} + +.single-line-model.error { + color: #FF6469; +} + +.single-line-model.error input { + color: #FF6469; + border-bottom: 1px solid #FF6469 !important; +} + +.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; } -.single-custom-key{ + +.single-custom-key { width: 100%; margin-bottom: 21px; } -.single-line-custom-key{ + +.single-line-custom-key { width: 45%; display: inline-block; } -.single-line-custom-key-delete{ + +.single-line-custom-key-delete { width: 10%; display: inline-block; border-bottom: 1px solid #FAFAFA; padding: 13px 12px 14px; } -.single-line-custom-key label{ + +.single-line-custom-key label { width: 150px; margin-bottom: 0px; border-bottom: 1px solid #FAFAFA; padding: 15px 25px; } -.single-line-custom-key input{ + +.single-line-custom-key input { border-bottom: 1px solid #FAFAFA !important; padding: 15px 25px 15px 0; } -.single-line-custom-key input::placeholder{ + +.single-line-custom-key input::placeholder { font-size: 14px; color: #C3CDDB; } -.single-line-custom-key .label-input{ + +.single-line-custom-key .label-input { width: calc(100% - 150px); } -.single-line-custom-key .label-name span{ + +.single-line-custom-key .label-name span { color: #C3CDDB !important; margin-right: 20px; } -.custom-key-delete{ + +.custom-key-delete { background: transparent; color: #FF6469; outline: 0px; border: 0px; } -.custom-key-delete:focus{ + +.custom-key-delete:focus { outline: 0px; border: 0px; } -hr{ + +hr { margin-top: 0rem !important; margin-bottom: 0rem !important; border-top: 1px solid #efefef !important; } -.creat-action-container{ + +.creat-action-container { position: fixed; right: 0px; top: 104px; width: 130px; text-align: center; } -.action-button{ + +.action-button { margin-bottom: 12px; padding: 3px 30px; color: #BABBC3; @@ -1934,10 +2234,12 @@ hr{ font-weight: bold; display: inline-block; } -.action-button:hover{ + +.action-button:hover { text-decoration: none; } -.action-button i{ + +.action-button i { background: #fff; box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1); width: 40px; @@ -1949,186 +2251,232 @@ hr{ font-size: 17px; display: inline-block; } -.action-button i.icon-save-sm{ + +.action-button i.icon-save-sm { background: #1273EB; color: #fff; font-size: 11px; } -.action-button i.icon-discard-sm{ + +.action-button i.icon-discard-sm { font-size: 11px; color: #C3CDDB; } -.action-button.save{ + +.action-button.save { color: #1273EB; } -.action-button.delete{ + +.action-button.delete { color: #BABBC3; } -.action-button.delete i{ + +.action-button.delete i { color: #BABBC3; } -.action-button.delete:hover{ + +.action-button.delete:hover { color: #FF6469; } -.mode-icon{ + +.mode-icon { font-size: 20px; } /*MODAL*/ -.modal-dialog{ +.modal-dialog { margin-top: 60px !important; } -.modal{ + +.modal { z-index: 11000000 !important; background: rgba(27, 62, 111, 0.10) !important; } -.modal-content{ + +.modal-content { border-radius: 2px !important; border: 0 !important; - box-shadow: 0 2px 6px rgba(47, 83, 151, .10);; + box-shadow: 0 2px 6px rgba(47, 83, 151, .10); + ; } -.modal-title{ + +.modal-title { font-size: 14px !important; } -.modal-body{ + +.modal-body { padding: 1.5rem 1.5rem 1rem !important; } -.modal-body p{ + +.modal-body p { font-size: 14px; } -.modal-body p span{ + +.modal-body p span { color: #FF6469; } -.modal-header{ + +.modal-header { border-bottom-color: #ECEDF2 !important; padding: .7rem 1.5rem !important; } -.modal-footer{ + +.modal-footer { border-top: 0 !important; } -.modal-footer .btn{ + +.modal-footer .btn { padding: 8px 15px; font-weight: bold; font-size: 12px; border: 0 !important; } -.modal-footer .btn-primary{ + +.modal-footer .btn-primary { background-color: #1B3E6F !important; } + .modal-footer .btn-secondary, -.modal-footer .btn-secondary:hover{ +.modal-footer .btn-secondary:hover { background-color: transparent; color: #1273EB; opacity: .8; } -.modal-footer .btn-secondary:hover{ + +.modal-footer .btn-secondary:hover { opacity: 1; } -.modal-footer .btn-secondary:active{ + +.modal-footer .btn-secondary:active { background-color: #E7F1FC !important; color: #1B3E6F !important; } -.action-button span{ + +.action-button span { width: 100%; display: inline-block; margin-top: 5px; } -.creat-action-container hr{ + +.creat-action-container hr { margin: 0 46px; padding-bottom: 18px; } -.btn-link:hover, .btn-link:focus{ + +.btn-link:hover, +.btn-link:focus { text-decoration: none !important; } -.btn-link::before{ + +.btn-link::before { content: "\f107"; - font-family:'FontAwesome'; + font-family: 'FontAwesome'; position: relative; margin-right: 20px; } -.btn-link.collapsed::before{ + +.btn-link.collapsed::before { content: "\f105"; - font-family:'FontAwesome'; + font-family: 'FontAwesome'; position: relative; margin-right: 25px; } -.btn-link i{ + +.btn-link i { margin-right: 10px; } -.ngx-file-drop__content{ + +.ngx-file-drop__content { background: #F4F9FE; padding: 20px; height: auto !important; display: inline-block !important; width: 100%; } -.ngx-file-drop__drop-zone{ + +.ngx-file-drop__drop-zone { border: 1px dashed #D7E7F9 !important; border-radius: 0px !important; height: auto !important; } -.folder-upload{ + +.folder-upload { width: 100%; margin: 15px auto 18px; display: inline-block; text-align: center; } -.btn-group-sm>.btn, .btn-sm{ + +.btn-group-sm>.btn, +.btn-sm { font-size: 12px; } -.create-title{ + +.create-title { margin-bottom: 15px; font-size: 14px; font-weight: bold; } -.folder-upload-text{ + +.folder-upload-text { margin-top: 10px; width: 100%; display: inline-block; text-align: center; - color:#242424 ; + color: #242424; font-size: 14px; } -.folder-upload-text button{ + +.folder-upload-text button { margin-left: 10px; font-size: 12px; } -.folder-upload-type{ - color:#A4B2C6 ; + +.folder-upload-type { + color: #A4B2C6; font-size: 10px; font-weight: bold; width: 100%; display: inline-block; text-align: center; } -.upload-table{ + +.upload-table { margin: 15px 0 0; } -.upload-table tr{ - border: dashed 1px #D7E7F9; + +.upload-table tr { + border: dashed 1px #D7E7F9; } -.upload-table tr th{ + +.upload-table tr th { border-bottom: solid 1px #F4F9FE !important; } -.upload-table .table thead th{ + +.upload-table .table thead th { padding: 6px 9px; border-top: 0px !important; font-weight: normal; font-size: 13px; } -.upload-table tr:last-child th{ + +.upload-table tr:last-child th { border-bottom: 0 !important; } -.upload-table .table{ + +.upload-table .table { margin-bottom: 0px !important; } -.nav-tabs .nav-link{ + +.nav-tabs .nav-link { position: relative; } -.nav-tabs .nav-link.tab-done{ + +.nav-tabs .nav-link.tab-done { padding-left: 40px !important; } -.nav-tabs .nav-link.tab-done::after{ + +.nav-tabs .nav-link.tab-done::after { content: "\f058"; position: absolute; font-family: 'FontAwesome'; @@ -2137,21 +2485,24 @@ hr{ top: 11px; color: #66BB00; } -.authentication-container-all{ + +.authentication-container-all { background: #F4F9FE; - border:1px solid #D0DFF1 ; + border: 1px solid #D0DFF1; flex: 1; width: 100%; } -.authentication-header{ + +.authentication-header { width: 100%; background: #fff; font-size: 12px; color: #C3CDDB; font-weight: bold; - padding: 10px 20px ; + padding: 10px 20px; } -.authentication-search{ + +.authentication-search { width: 100%; background: #fff; font-size: 12px; @@ -2159,14 +2510,16 @@ hr{ font-weight: bold; position: relative; } -.authentication-search::after{ + +.authentication-search::after { content: "\f002"; - font-family: 'FontAwesome'; - position: absolute; - left: 20px; - top: 11px; + font-family: 'FontAwesome'; + position: absolute; + left: 20px; + top: 11px; } -.authentication-search input{ + +.authentication-search input { width: 100%; background: #fff; font-size: 12px; @@ -2176,29 +2529,34 @@ hr{ border: 0px; border-top: 1px solid #D7E7F9; } -.authentication-search input::placeholder{ + +.authentication-search input::placeholder { color: #D0D7E4; font-size: 10px; - font-weight:100; + font-weight: 100; } -.authentication-accordion{ - width: 100%; + +.authentication-accordion { + width: 100%; padding: 20px; max-height: 300px; overflow: auto; } -.authentication-accordion .card{ + +.authentication-accordion .card { border-radius: 0px !important; margin-bottom: 10px !important; } -.authentication-accordion .card-header{ + +.authentication-accordion .card-header { padding: 0px !important; background: #fff !important; border-radius: 0px !important; font-size: 18px; font-weight: bold; } -.authentication-accordion .card-header .btn-link{ + +.authentication-accordion .card-header .btn-link { color: #1B3E6F; width: 100%; text-align: left; @@ -2206,35 +2564,43 @@ hr{ font-size: 13px; font-weight: bold; } -.authentication-accordion .custom-control{ + +.authentication-accordion .custom-control { display: inline-block; } -.authentication-accordion .btn-link::before{ + +.authentication-accordion .btn-link::before { margin-right: 10px; } -.authentication-accordion .btn-link.collapsed::before{ + +.authentication-accordion .btn-link.collapsed::before { margin-right: 14px; } -.template-mapping-accordion{ + +.template-mapping-accordion { width: 100%; } -.card{ + +.card { border-radius: 2px; border: 0; box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1); border: 0px !important; } -.card-header{ + +.card-header { padding: 0px 25px !important; background: #F4F9FE !important; border-radius: 0px !important; border-bottom: 1px solid #ECEDF2 !important; } -.template-mapping-accordion .card-body{ + +.template-mapping-accordion .card-body { padding: 20px 26px 0 !important; font-size: 14px; } -.card-header .btn-link{ + +.card-header .btn-link { color: #1B3E6F; width: 100%; text-align: left; @@ -2242,33 +2608,41 @@ hr{ font-size: 13px; font-weight: bold; } -.accordion .card{ + +.accordion .card { margin-bottom: 0px !important; border-top: 1px solid #ECEDF2 !important; } -.template-mapping-accordion .card{ + +.template-mapping-accordion .card { margin-bottom: 25px !important; } -.custom-control{ + +.custom-control { display: inline-block; } -.btn-link::before{ + +.btn-link::before { margin-right: 10px; } -.btn-link.collapsed::before{ + +.btn-link.collapsed::before { margin-right: 14px; } -.drap-drop-action{ + +.drap-drop-action { padding: 12px 20px 9px 20px; color: #C3CDDB; - cursor:move; + cursor: move; font-size: 15px; } + .modal-title { font-size: 13px; font-weight: bold; } -.select-type{ + +.select-type { background: #F4F9FE; border: 1px solid #D7E7F9; padding: 10px; @@ -2278,16 +2652,20 @@ hr{ width: 100%; position: relative; } -.select-type:hover, .select-type.active{ + +.select-type:hover, +.select-type.active { background: #1B3E6F; border: 1px solid #D7E7F9; - color: #fff; + color: #fff; text-decoration: none; } -.select-type-icon{ + +.select-type-icon { font-size: 35px; } -.select-type::before{ + +.select-type::before { content: ''; border: 1px solid #1273EB; width: 18px; @@ -2297,10 +2675,13 @@ hr{ left: 10px; position: absolute; } -.select-type:hover::before, .select-type.active::before{ + +.select-type:hover::before, +.select-type.active::before { border: 1px solid #fff; } -.select-type.active::after{ + +.select-type.active::after { content: ''; background: #fff; width: 12px; @@ -2311,90 +2692,105 @@ hr{ position: absolute; top: 13px; } -.ace-tomorrow-night-bright .ace_print-margin{ + +.ace-tomorrow-night-bright .ace_print-margin { left: 100% !important; background: #eee !important; } -.ace_content{ + +.ace_content { width: 100%; } + .ace_line, -.ace-eclipse .ace_print-margin{ +.ace-eclipse .ace_print-margin { background: #fff; } -.ace_editor{ + +.ace_editor { height: 55vh !important; line-height: 25px; border: 1px solid #ECEDF2; background-color: #fff; color: #1B3E6F; } + .ace-tomorrow-night-bright .ace_gutter, -.ace-eclipse .ace_gutter{ +.ace-eclipse .ace_gutter { background: #E0E8F2 !important; border-right: 0px !important; color: #1B3E6F !important; } + .ace-tomorrow-night-bright .ace_gutter-active-line, -.ace-eclipse .ace_gutter-active-line{ +.ace-eclipse .ace_gutter-active-line { background-color: #265699; color: #fff; } -.ace-tomorrow-night-bright .ace_cursor{ + +.ace-tomorrow-night-bright .ace_cursor { color: #265699; } + .ace-tomorrow-night-bright .ace_marker-layer .ace_active-line { background: #eee; } -.breadcrumb-header{ + +.breadcrumb-header { padding: 0px; margin: 0px; } -.breadcrumb-header li{ + +.breadcrumb-header li { list-style: none; display: inline-block; font-size: 12px; } -.breadcrumb-header li:last-child::after{ +.breadcrumb-header li:last-child::after { display: none; } -.breadcrumb-header li:last-child{ -/* background: #F4F9FE; */ -border-radius: 50px; -color: #C3CDDB; -padding: 0 10px 0 0; +.breadcrumb-header li:last-child { + /* background: #F4F9FE; */ + border-radius: 50px; + color: #C3CDDB; + padding: 0 10px 0 0; } -.breadcrumb-header li:first-child, -.breadcrumb-header li:first-child a{ + +.breadcrumb-header li:first-child, +.breadcrumb-header li:first-child a { font-size: 16px; font-weight: bold; - padding: 0px; + padding: 0px; color: #1B3E6F !important; border-radius: 0px; background: transparent; } -.create-template-import{ + +.create-template-import { width: 100%; - margin: 30px 0px 10px ; + margin: 30px 0px 10px; } -.create-template-import a:hover{ +.create-template-import a:hover { text-decoration: none; } -.mapping-source-load{ + +.mapping-source-load { color: #1B3E6F; font-size: 10px; font-weight: bold; display: inline-table; margin-top: 20px; margin-bottom: 10px; - margin:15px 30px 20px; + margin: 15px 30px 20px; } -.mapping-source-load:hover{ + +.mapping-source-load:hover { text-decoration: none; } + .mapping-source-load i { color: #1B3E6F; font-size: 36px; @@ -2406,17 +2802,25 @@ padding: 0 10px 0 0; line-height: 52px; margin-bottom: 20px; } -.mapping-source-load:hover i{ + +.mapping-source-load:hover i { background: #F4F9FE; } -.mapping-source-load:hover span{ + +.hover-enable:hover span { color: #1273EB; } -.source-load-note{ - color:#C3CDDB ; + +.hover-disable span { + color: gray; +} + +.source-load-note { + color: #C3CDDB; font-size: 8px; } -.template-mapping-list{ + +.template-mapping-list { background: #F4F9FE; border: 1px solid #E9F3FF; padding: 5px 10px; @@ -2426,18 +2830,21 @@ padding: 0 10px 0 0; margin-bottom: 20px; color: #1B3E6F; } -.template-mapping-list:hover, .template-mapping-list.active { - background: #1B3E6F; + +.template-mapping-list:hover, +.template-mapping-list.active { + background: #1B3E6F; text-decoration: none; color: #fff !important; border-radius: 4px; - + } -.template-mapping-list:hover{ + +.template-mapping-list:hover { opacity: .9; } -.template-mapping-list span{ +.template-mapping-list span { background: #fff; color: #2A81ED; font-size: 8px; @@ -2447,27 +2854,32 @@ padding: 0 10px 0 0; margin-left: 5px; } -.max-height-list{ + +.max-height-list { max-height: 232px; padding-bottom: 5px !important; overflow: auto; } -.create-template-mapping-button{ -background: #C3CDDB; -border-radius: 50px; -font-size: 12px; -padding: 10px 20px; -margin-bottom: 20px; - display: inline-block; - cursor: pointer; -} -.create-template-mapping-button i{ -margin-right: 5px; - } -.view-package-container{ + +.create-template-mapping-button { + background: #C3CDDB; + border-radius: 50px; + font-size: 12px; + padding: 10px 20px; + margin-bottom: 20px; + display: inline-block; + cursor: pointer; +} + +.create-template-mapping-button i { + margin-right: 5px; +} + +.view-package-container { padding: 20px 56px; } -.package-type-icon{ + +.package-type-icon { color: #1B3E6F; background: #C1CDDD; width: 48px; @@ -2479,91 +2891,113 @@ margin-right: 5px; font-size: 20px; /* margin-right: 20px; */ } -.defintionsNote{ + +.defintionsNote { padding-left: 0; } -.defintionsNote li{ + +.defintionsNote li { line-height: 24px; list-style: none; font-size: 13px; } -.package-name-container{ + +.package-name-container { width: calc(100% - 60px); display: inline-block; } -.package-name{ + +.package-name { font-size: 16px; color: #1B3E6F; font-weight: bold; margin-top: 3px; } -.package-name span{ + +.package-name span { font-size: 11px; } -.package-name i{ + +.package-name i { font-size: 12px; color: #C3CDDB; margin-left: 5px; } -.deply-status-icon{ + +.deply-status-icon { margin-left: 6px; width: 1.6%; vertical-align: baseline; } -.package-description{ + +.package-description { color: #D0D7E4; font-size: 12px; font-weight: normal; } -.package-auth-info{ + +.package-auth-info { font-size: 11px; } -.package-auth-info p{ + +.package-auth-info p { margin-bottom: 5px; } -.package-auth-info div{ + +.package-auth-info div { padding-left: 25px; border-right: solid 1px #F4F9FE; } -.package-auth-info div:first-child{ + +.package-auth-info div:first-child { padding-left: 15px; } -.package-auth-info .col-4:first-child{ + +.package-auth-info .col-4:first-child { padding-left: 15px; } -.package-auth-info div:last-child{ + +.package-auth-info div:last-child { border-right: 0; } -.package-auth-info .package-contributers{ + +.package-auth-info .package-contributers { margin-bottom: 0 !important; } -.package-auth-info .package-contributers button img{ + +.package-auth-info .package-contributers button img { width: 20px; height: 20px; } -.template-mapping-action{ + +.template-mapping-action { width: 100%; text-align: center; margin-bottom: 30px; } -.template-mapping-action button{ + +.template-mapping-action button { border-radius: 50px; padding: 6px 20px; font-size: 14px; } -.template-mapping-action .btn-primary{ - background:#5DBDBA !important ; - border-color:#5DBDBA !important ; - color: #fff !important ; + +.template-mapping-action .btn-primary { + background: #5DBDBA !important; + border-color: #5DBDBA !important; + color: #fff !important; } -.template-mapping-action .btn-outline-secondary{ - background:#fff !important ; - border-color:#ECEDF2 !important ; - color: #C3CDDB !important ; + +.template-mapping-action .btn-outline-secondary { + background: #fff !important; + border-color: #ECEDF2 !important; + color: #C3CDDB !important; } -.table-container{ + +.table-container { width: 100%; } + /* server-side-angular-way.component.css */ @@ -2577,75 +3011,88 @@ margin-right: 5px; .dataTables_empty { display: none; } + .dataTables_length, -.dataTables_filter{ +.dataTables_filter { margin-bottom: 6px; color: #1B3E6F !important; font-size: 13px; font-weight: bold; } -.dataTables_filter input{ +.dataTables_filter input { color: #1B3E6F; background: url(../src/assets/img/icon-search.svg) 9px center no-repeat; padding: 4px 9px 4px 24px; border: solid 1px #ECEDF2; border-radius: 4px; } -.dataTables_filter input:focus{ + +.dataTables_filter input:focus { box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1); } + #mapping-table th, -#mapping-table td{ +#mapping-table td { width: auto !important; padding: 7px 20px 7px 0; border-bottom: solid 1px #ECEDF2; font-size: 13px; } + #mapping-table th:first-child, -#mapping-table td:first-child{ +#mapping-table td:first-child { padding-left: 20px; } -#mapping-table tbody tr:hover{ + +#mapping-table tbody tr:hover { background-color: #F4F9FE; } -#mapping-table th{ + +#mapping-table th { padding-top: 10px; padding-bottom: 10px; background: #F4F9FE; } -#mapping-table td{ + +#mapping-table td { border-top: 0; } -table.dataTable.no-footer{ + +table.dataTable.no-footer { margin-bottom: 9px; border-bottom: solid 1px #ECEDF2 !important; } -.dataTables_info{ + +.dataTables_info { padding-top: 12px; color: #1B3E6F !important; font-size: 13px; font-weight: bold; } + .dataTables_wrapper .dataTables_paginate, .dataTables_wrapper .dataTables_paginate a.paginate_button, .dataTables_wrapper .dataTables_paginate a.paginate_button.current, -.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled{ +.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled { margin-bottom: 3px; color: #1B3E6F !important; font-size: 13px; font-weight: bold; border: 0 !important; } -.dataTables_wrapper .dataTables_paginate a.paginate_button:hover{ + +.dataTables_wrapper .dataTables_paginate a.paginate_button:hover { border: 0; color: #1B3E6F !important; background: none !important; } -.dataTables_wrapper .dataTables_paginate a.paginate_button{ + +.dataTables_wrapper .dataTables_paginate a.paginate_button { padding: 0.4em .9em !important; } -.dataTables_wrapper .dataTables_paginate a.paginate_button.current{ + +.dataTables_wrapper .dataTables_paginate a.paginate_button.current { color: #1B3E6F !important; background: #F4F9FE !important; border: solid 1px #EEF4F9 !important; @@ -2653,85 +3100,63 @@ table.dataTable.no-footer{ box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1); outline: 0; } -.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled{ + +.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled { opacity: .6; } -.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled:hover{ + +.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled:hover { cursor: default; background: none !important; border: 0 !important; } + #mapping-table .form-control, -#mapping-table .custom-select{ +#mapping-table .custom-select { padding: 10px 6px; border-color: #EEF4F9; font-size: 14px; line-height: 12px; color: #1B3E6F; } -#mapping-table .form-control{ - box-shadow: 0 2px 4px rgba(47,83,151,0.1); + +#mapping-table .form-control { + box-shadow: 0 2px 4px rgba(47, 83, 151, 0.1); } + #mapping-table tbody tr:hover .form-control:focus, -#mapping-table tbody tr:hover .custom-select{ +#mapping-table tbody tr:hover .custom-select { background-color: #fff !important; } -#mapping-table .custom-select{ + +#mapping-table .custom-select { background-color: #F4F9FE; color: #1B3E6F; } -#mapping-table .form-control:disabled{ + +#mapping-table .form-control:disabled { padding-left: 0; box-shadow: none; border: 0; background: transparent; color: #1B3E6F; } + /* Extra small devices (portrait phones, less than 576px) */ @media (max-width: 575.98px) { - .page-title{ + .page-title { padding: 18px; } } /* Small devices (landscape phones, 576px and up) */ -@media (min-width: 576px) and (max-width: 767.98px) { - -} +@media (min-width: 576px) and (max-width: 767.98px) {} /* Medium devices (tablets, 768px and up) */ -@media (min-width: 768px) and (max-width: 991.98px) { - -} +@media (min-width: 768px) and (max-width: 991.98px) {} /* Large devices (desktops, 992px and up) */ -@media (min-width: 992px) and (max-width: 1199.98px) { - -} +@media (min-width: 992px) and (max-width: 1199.98px) {} /* Extra large devices (large desktops, 1200px and up) */ -@media (min-width: 1200px) { - -} - - - - - - - - - - - - - - - - - - - - - - +@media (min-width: 1200px) {} \ No newline at end of file -- cgit 1.2.3-korg