[Monitor Dashboard | Trunk]: Clarify css of login button. Add section title.
git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@57978 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
parent
54f03f4c98
commit
0142ebb9ec
|
@ -17,7 +17,7 @@
|
|||
<ul class="uk-navbar-nav user_actions">
|
||||
<li>
|
||||
<user-mini *ngIf="properties"
|
||||
[user]="user" [dashboard]="true" [colors]="'light'"
|
||||
[user]="user" [dashboard]="true"
|
||||
[redirectUrl]="properties.afterLoginRedirectLink"
|
||||
[logInUrl]=properties.loginUrl [logOutUrl]=properties.logoutUrl
|
||||
[cookieDomain]=properties.cookieDomain
|
||||
|
|
|
@ -31,7 +31,7 @@
|
|||
<div [class.uk-child-width-1-4@m]="grid"
|
||||
[class.uk-child-width-1-3@s]="grid"
|
||||
[class.uk-child-width-1-1]="!grid"
|
||||
[class.max-width-large]="!grid"
|
||||
[class.list-view]="!grid"
|
||||
class="uk-grid-match uk-grid-small"
|
||||
uk-grid>
|
||||
<loading *ngIf="loading"></loading>
|
||||
|
@ -115,7 +115,7 @@
|
|||
<div [class.uk-child-width-1-4@m]="grid"
|
||||
[class.uk-child-width-1-3@s]="grid"
|
||||
[class.uk-child-width-1-1]="!grid"
|
||||
[class.max-width-large]="!grid"
|
||||
[class.list-view]="!grid"
|
||||
class="uk-grid-match uk-grid-small"
|
||||
uk-grid>
|
||||
<loading *ngIf="loading"></loading>
|
||||
|
|
|
@ -28,7 +28,7 @@
|
|||
<ul class="uk-navbar-nav user_actions uk-padding uk-padding-remove-vertical">
|
||||
<li>
|
||||
<user-mini *ngIf="properties"
|
||||
[user]="user" [dashboard]="true" [colors]="'dark'"
|
||||
[user]="user" [dashboard]="true"
|
||||
[logInUrl]=properties.loginUrl [logOutUrl]=properties.logoutUrl
|
||||
[cookieDomain]=properties.cookieDomain
|
||||
[userMenuItems]=userMenuItems>
|
||||
|
|
|
@ -55,18 +55,38 @@
|
|||
<div #element uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
|
||||
class="uk-padding-remove-horizontal">
|
||||
<ul class="uk-nav uk-dropdown-nav">
|
||||
<li><a target="_blank" [routerLink]="preview" [queryParams]="{view: 'public'}" (click)="hide(element)">Public</a></li>
|
||||
<li><a target="_blank" [routerLink]="preview" [queryParams]="{view: 'private'}" (click)="hide(element)">Private</a></li>
|
||||
<li><a target="_blank" [routerLink]="preview" [queryParams]="{view: 'public'}" (click)="hide(element)">Public</a>
|
||||
</li>
|
||||
<li><a target="_blank" [routerLink]="preview" [queryParams]="{view: 'private'}" (click)="hide(element)">Private</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="uk-text-bold">Number Indicators</h4>
|
||||
<div [class.max-width-large]="!grid" [id]="number._id"
|
||||
class="uk-grid-match section uk-grid-small"
|
||||
*ngFor="let number of displayNumbers; let i = index"
|
||||
uk-sortable="group: number" uk-grid>
|
||||
<div class="uk-width-1-1 disable-sortable uk-sortable-nodrag">
|
||||
<div [class.list-view]="!grid" [id]="number._id"
|
||||
class="uk-grid-match section uk-grid-small"
|
||||
*ngFor="let number of displayNumbers; let i = index"
|
||||
uk-sortable="group: number" uk-grid>
|
||||
<div *ngIf="grid" class="tools disable-sortable uk-sortable-nodrag">
|
||||
<div class="md-btn-group">
|
||||
<button class="md-btn md-btn-mini"><i class="material-icons">add</i></button>
|
||||
<button class="md-btn md-btn-mini"><i class="material-icons rotate-90">drag_indicator</i></button>
|
||||
<button class="md-btn md-btn-mini"><i class="material-icons">clear</i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="false"
|
||||
class="uk-form-row uk-width-1-1 uk-grid-medium uk-flex uk-flex-middle disable-sortable uk-sortable-nodrag"
|
||||
uk-grid>
|
||||
<div dashboard-input class="uk-width-2-3 uk-width-1-3@m" [formInput]="null"
|
||||
label="Add a section title"></div>
|
||||
<div class="uk-width-expand">
|
||||
<button class="md-btn md-btn-small">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="!grid && number.title" class="uk-width-1-1 disable-sortable uk-sortable-nodrag">
|
||||
<h4>{{number.title}}</h4>
|
||||
</div>
|
||||
<ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
|
||||
|
@ -80,15 +100,15 @@
|
|||
<div class="md-card-toolbar">
|
||||
<div class="md-card-toolbar-actions" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
|
||||
<ng-template [ngIf]="!grid">
|
||||
<div class="uk-margin-medium-right uk-flex uk-flex-middle">
|
||||
<i class="material-icons md-24 uk-margin-small-right">{{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}</i>
|
||||
{{(indicator.isPublic) ? 'Public' : 'Private'}}
|
||||
</div>
|
||||
<div class="uk-margin-medium-right uk-flex uk-flex-middle">
|
||||
<i class="material-icons md-24 uk-margin-small-right"
|
||||
[class.md-color-green-300]="indicator.isActive">{{indicatorUtils.isActiveIcon}}</i>
|
||||
{{(indicator.isActive) ? 'Active' : 'Inactive'}}
|
||||
</div>
|
||||
<div class="uk-margin-medium-right uk-flex uk-flex-middle">
|
||||
<i class="material-icons md-24 uk-margin-small-right">{{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}</i>
|
||||
{{(indicator.isPublic) ? 'Public' : 'Private'}}
|
||||
</div>
|
||||
<div class="uk-margin-medium-right uk-flex uk-flex-middle">
|
||||
<i class="material-icons md-24 uk-margin-small-right"
|
||||
[class.md-color-green-300]="indicator.isActive">{{indicatorUtils.isActiveIcon}}</i>
|
||||
{{(indicator.isActive) ? 'Active' : 'Inactive'}}
|
||||
</div>
|
||||
</ng-template>
|
||||
<div class="md-card-dropdown uk-inline">
|
||||
<i class="md-icon material-icons">more_vert</i>
|
||||
|
@ -134,26 +154,32 @@
|
|||
</ng-template>
|
||||
</div>
|
||||
<h4 class="uk-text-bold">Chart Indicators</h4>
|
||||
<div>
|
||||
<div *ngIf="chartSections">
|
||||
<ng-template ngFor [ngForOf]="displayCharts" let-chart let-i="index">
|
||||
<div [class.max-width-large]="!grid" [id]="'chart-' + chart._id"
|
||||
class="uk-grid-match section uk-grid-small uk-grid"
|
||||
uk-sortable="group: chart" uk-grid>
|
||||
<div class="tools disable-sortable uk-sortable-nodrag">
|
||||
<div [class.list-view]="!grid" [id]="'chart-' + chart._id"
|
||||
class="uk-grid-match section uk-grid-small uk-grid uk-margin-top"
|
||||
uk-sortable="group: chart" uk-grid>
|
||||
<div *ngIf="grid" class="tools disable-sortable uk-sortable-nodrag">
|
||||
<div class="md-btn-group">
|
||||
<button class="md-btn md-btn-mini"><i class="material-icons">add</i></button>
|
||||
<button class="md-btn md-btn-mini"><i class="material-icons">drag_indicator</i></button>
|
||||
<button class="md-btn md-btn-mini"><i class="material-icons rotate-90">drag_indicator</i></button>
|
||||
<button class="md-btn md-btn-mini"><i class="material-icons">clear</i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-form-row uk-width-1-1 uk-grid-medium uk-flex uk-flex-middle disable-sortable uk-sortable-nodrag" uk-grid>
|
||||
<div dashboard-input class="uk-width-2-3 uk-width-1-3@m" [formInput]="null" label="Add a section title"></div>
|
||||
<div *ngIf="grid && chartSections.at(i)"
|
||||
class="uk-form-row uk-width-1-1 uk-grid-medium uk-flex uk-flex-middle uk-margin-bottom disable-sortable uk-sortable-nodrag"
|
||||
uk-grid>
|
||||
<div dashboard-input class="uk-width-2-3 uk-width-1-3@m" [formInput]="chartSections.at(i).get('title')"
|
||||
label="Add a section title"></div>
|
||||
<div class="uk-width-expand">
|
||||
<button class="md-btn md-btn-small md-btn-primary">
|
||||
<button *ngIf="chartSections.at(i).dirty" class="md-btn">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="!grid && chart.title" class="uk-width-1-1 disable-sortable uk-sortable-nodrag">
|
||||
<h4>{{chart.title}}</h4>
|
||||
</div>
|
||||
<ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
|
||||
<div *ngIf="indicator" [id]="indicator._id"
|
||||
[class.uk-width-1-3@m]="grid && indicator.width === 'small'"
|
||||
|
@ -267,6 +293,14 @@
|
|||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
<div *ngIf="grid" class="new-section uk-margin-top">
|
||||
<div class="tools uk-flex uk-flex-middle">
|
||||
<button class="md-btn add uk-margin-small-right">
|
||||
<i class="material-icons md-24 md-color-white">add</i>
|
||||
</button>
|
||||
<span>Create a new section</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -34,7 +34,8 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
|
|||
public preview: string;
|
||||
public indicatorUtils: IndicatorUtils = new IndicatorUtils();
|
||||
public indicatorFb: FormGroup;
|
||||
public sectionFbs: FormArray;
|
||||
public chartSections: FormArray;
|
||||
public numberSections: FormArray;
|
||||
/**
|
||||
* Editable indicator
|
||||
*/
|
||||
|
@ -73,6 +74,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
|
|||
|
||||
ngOnInit(): void {
|
||||
this.buildFilters();
|
||||
this.buildSections();
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
|
@ -172,6 +174,31 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
|
|||
}));
|
||||
}
|
||||
|
||||
private buildSections() {
|
||||
this.numberSections = this.fb.array([]);
|
||||
this.numbers.forEach(section => {
|
||||
this.numberSections.push(this.fb.group({
|
||||
_id: this.fb.control(section._id),
|
||||
title: this.fb.control(section.title),
|
||||
stakeholderAlias: this.fb.control(section.stakeholderAlias),
|
||||
defaultId: this.fb.control(section.defaultId),
|
||||
type: this.fb.control(section.type),
|
||||
indicators: this.fb.control(section.indicators)
|
||||
}));
|
||||
});
|
||||
this.chartSections = this.fb.array([]);
|
||||
this.charts.forEach(section => {
|
||||
this.chartSections.push(this.fb.group({
|
||||
_id: this.fb.control(section._id),
|
||||
title: this.fb.control(section.title),
|
||||
stakeholderAlias: this.fb.control(section.stakeholderAlias),
|
||||
defaultId: this.fb.control(section.defaultId),
|
||||
type: this.fb.control(section.type),
|
||||
indicators: this.fb.control(section.indicators)
|
||||
}));
|
||||
});
|
||||
}
|
||||
|
||||
filterCharts() {
|
||||
this.displayCharts = this.filterChartType(this.filterPrivacy(
|
||||
this.filterStatus(this.filterByKeyword(HelperFunctions.copy(this.charts), this.filters.value.keyword),
|
||||
|
@ -508,4 +535,8 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
|
|||
indicator.isPublic = isPublic;
|
||||
});
|
||||
}
|
||||
|
||||
createSection(index: number = -1) {
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
@ -37,9 +37,9 @@
|
|||
|
||||
"piwikBaseUrl" :"https://analytics.openaire.eu/piwik.php?idsite=",
|
||||
"piwikSiteId" : "80",
|
||||
"loginUrl" :"http://scoobydoo.di.uoa.gr:8080/dnet-openaire-users-1.0.0-SNAPSHOT/openid_connect_login",
|
||||
"loginUrl" :"http://rudie.di.uoa.gr:8080/dnet-openaire-users-1.0.0-SNAPSHOT/openid_connect_login",
|
||||
|
||||
"userInfoUrl" : "http://scoobydoo.di.uoa.gr:8080/dnet-openaire-users-1.0.0-SNAPSHOT/api/users/getUserInfo?accessToken=",
|
||||
"userInfoUrl" : "http://rudie.di.uoa.gr:8080/dnet-openaire-users-1.0.0-SNAPSHOT/api/users/getUserInfo?accessToken=",
|
||||
|
||||
"logoutUrl" :"https://aai.openaire.eu/proxy/saml2/idp/SingleLogoutService.php?ReturnTo=",
|
||||
|
||||
|
|
|
@ -19,9 +19,13 @@
|
|||
--connect-portal-lower-tone: #b48536;
|
||||
--develop-portal-lower-tone: #9f4e7e;
|
||||
|
||||
|
||||
/* Dashboard variables*/
|
||||
--sidebar-width: 320px;
|
||||
--sidebar-font-size: 16px;
|
||||
--header-height: 70px;
|
||||
--primary-color: #0d47a1;
|
||||
--secondary-color: #1CA9D5;
|
||||
|
||||
--monitor-header-menu-height: 100px;
|
||||
}
|
||||
|
@ -44,6 +48,12 @@
|
|||
|
||||
/*}*/
|
||||
|
||||
.double-header #header_menu a {
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
.double-header #header_main .uk-navbar-nav > li > a {
|
||||
font-size: 20px;
|
||||
font-family: 'Open Sans';
|
||||
|
@ -94,15 +104,15 @@
|
|||
.double-header #header_main{
|
||||
top: var(--monitor-header-menu-height);
|
||||
}
|
||||
.double-header #header_menu{
|
||||
.double-header #header_menu {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height:var(--monitor-header-menu-height);
|
||||
background:white;
|
||||
z-index: 1215;
|
||||
|
||||
}
|
||||
|
||||
.double-header #header_menu .uk-navbar-nav > li.uk-active a span {
|
||||
-webkit-box-shadow: inset 0 -2px 0 #333;
|
||||
box-shadow: inset 0 -2px 0 #333;
|
||||
|
@ -128,46 +138,24 @@
|
|||
max-height: 80px;
|
||||
}
|
||||
|
||||
.stakeholderPage #style_switcher{
|
||||
.stakeholderPage #style_switcher {
|
||||
top:200px;
|
||||
}
|
||||
|
||||
.loginLink.light{
|
||||
color: white !important;
|
||||
|
||||
/* Login Box*/
|
||||
.dashboard .double-header .login {
|
||||
color: rgba(0,0,0,.54);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
circle.userBox.light{
|
||||
stroke: white;
|
||||
fill: white;
|
||||
}
|
||||
|
||||
text.userBox.light {
|
||||
stroke: #0d47a1;
|
||||
fill: #0d47a1;
|
||||
}
|
||||
|
||||
svg .icon.userBox.light{
|
||||
stroke: #0d47a1;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
svg .loginLink.userBox.light{
|
||||
stroke: white;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.loginLink.dark{
|
||||
color: rgba(0,0,0,.54) !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
circle.userBox.dark, svg .icon.userBox.dark, svg .loginLink.userBox.dark{
|
||||
.dashboard .double-header circle, .dashboard .double-header .login svg,
|
||||
.dashboard .double-header svg svg *, .dashboard .double-header .login svg * {
|
||||
stroke: rgba(0,0,0,.54);
|
||||
fill: none;
|
||||
}
|
||||
|
||||
text.userBox.dark {
|
||||
.dashboard .double-header text {
|
||||
stroke: rgba(0,0,0,.54);
|
||||
fill: rgba(0,0,0,.54);
|
||||
}
|
||||
|
|
|
@ -4,6 +4,8 @@
|
|||
--sidebar-font-size: 16px;
|
||||
--header-height: 70px;
|
||||
--list-card-max-width: 1220px;
|
||||
--primary-color: #0d47a1;
|
||||
--secondary-color: #1CA9D5;
|
||||
*/
|
||||
|
||||
/* Global css*/
|
||||
|
@ -15,6 +17,12 @@ html .dashboard {
|
|||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
.dashboard #hide_controls #toggle *, .dashboard #header_main a, .dashboard #sidebar_main a {
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
/* On link hover, his items with this class will be displayed*/
|
||||
.dashboard li > a .onHover {
|
||||
display: none;
|
||||
|
@ -25,7 +33,7 @@ html .dashboard {
|
|||
display: block;
|
||||
}
|
||||
|
||||
/* Custom height of header, change var: header-height*/
|
||||
/* Sidebar with hide controls*/
|
||||
.dashboard #sidebar_main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
@ -76,19 +84,13 @@ html .dashboard {
|
|||
}
|
||||
|
||||
.dashboard #hide_controls #toggle:hover, .dashboard #hide_controls #toggle:not(.sidebar_main_open) {
|
||||
color: #0d47a1;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.dashboard #hide_controls:hover #toggle:hover .material-icons,
|
||||
.dashboard #hide_controls #toggle:not(.sidebar_main_open) .material-icons {
|
||||
color: #0d47a1;
|
||||
border: #0d47a1 solid 1px;
|
||||
}
|
||||
|
||||
.dashboard #hide_controls #toggle * {
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
color: var(--primary-color);
|
||||
border: var(--primary-color) solid 1px;
|
||||
}
|
||||
|
||||
.dashboard #hide_controls #toggle .material-icons {
|
||||
|
@ -177,6 +179,7 @@ html .dashboard {
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
body.dashboard {
|
||||
padding-top: var(--header-height);
|
||||
}
|
||||
|
@ -201,7 +204,36 @@ body.dashboard {
|
|||
margin: calc(var(--header-height) - 48px) 0;
|
||||
}
|
||||
|
||||
/* Custom card*/
|
||||
.dashboard #header_main .material-icons {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dashboard #header_main .login {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dashboard #header_main circle, .dashboard #header_main .login svg {
|
||||
stroke: white;
|
||||
fill: white;
|
||||
}
|
||||
|
||||
.dashboard #header_main text {
|
||||
stroke: var(--primary-color);
|
||||
fill: var(--primary-color);
|
||||
}
|
||||
|
||||
.dashboard #header_main svg svg *{
|
||||
stroke: var(--primary-color);
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.dashboard #header_main .login svg *{
|
||||
stroke: white;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
/* Card */
|
||||
.dashboard .md-card .md-card-content {
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
@ -210,21 +242,11 @@ body.dashboard {
|
|||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
.dashboard .md-card .md-card-toolbar .md-card-toolbar-actions span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard .md-card .md-card-toolbar .md-card-toolbar-heading-text {
|
||||
font-weight: 700;
|
||||
float: none;
|
||||
}
|
||||
|
||||
.dashboard .max-width-large {
|
||||
max-width: 1220px;
|
||||
}
|
||||
|
||||
/* Breadcrumb*/
|
||||
.dashboard #breadcrumbs {
|
||||
background: inherit;
|
||||
|
@ -245,7 +267,7 @@ body.dashboard {
|
|||
}
|
||||
|
||||
/* Notification */
|
||||
/* Change z-index, because of sidebar and header z-index is bigger that default */
|
||||
/* Change z-index, because of sidebar's and header's z-index are bigger that default */
|
||||
.dashboard .uk-notification {
|
||||
z-index: 2000;
|
||||
}
|
||||
|
@ -269,7 +291,6 @@ body.dashboard {
|
|||
font-size: 16px;
|
||||
}
|
||||
|
||||
|
||||
.dashboard .uk-notification-close.uk-icon.uk-close svg {
|
||||
display: none;
|
||||
}
|
||||
|
@ -288,6 +309,7 @@ body.dashboard {
|
|||
}
|
||||
|
||||
/* Modal*/
|
||||
|
||||
.dashboard .uk-modal .large-modal {
|
||||
width: 800px;
|
||||
}
|
||||
|
@ -318,6 +340,11 @@ body.dashboard {
|
|||
cursor: default;
|
||||
}
|
||||
|
||||
/* List view*/
|
||||
.dashboard .list-view {
|
||||
max-width: 1220px;
|
||||
}
|
||||
|
||||
/* Section Tools*/
|
||||
|
||||
.dashboard .section {
|
||||
|
@ -336,21 +363,34 @@ body.dashboard {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.dashboard .section:hover {
|
||||
border: rgb(28, 169, 213) solid 1px;
|
||||
.dashboard .section:not(.list-view):hover {
|
||||
border: var(--secondary-color) solid 1px;
|
||||
}
|
||||
|
||||
.dashboard .section:hover .tools {
|
||||
.dashboard .section:not(.list-view):hover .tools {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dashboard .section:hover .tools .md-btn-group .md-btn-mini {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
padding: 0;
|
||||
background-color: rgb(28, 169, 213);
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
margin-left: -1px !important;
|
||||
}
|
||||
|
||||
.dashboard .section:hover .tools .md-btn-group .md-btn-mini:first-child {
|
||||
border-top-left-radius: 5px;
|
||||
}
|
||||
|
||||
.dashboard .section:hover .tools .md-btn-group .md-btn-mini:last-child {
|
||||
border-top-right-radius: 5px;
|
||||
}
|
||||
|
||||
.dashboard .section .md-btn {
|
||||
background-color: var(--secondary-color);
|
||||
width: 20px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dashboard .section:hover .tools .md-btn-group .md-btn-mini * {
|
||||
|
@ -359,16 +399,46 @@ body.dashboard {
|
|||
|
||||
.dashboard .section:hover .tools .md-btn-group::before {
|
||||
content: "";
|
||||
border-bottom: 25px solid rgb(28, 169, 213);
|
||||
border-bottom: 25px solid var(--secondary-color);
|
||||
border-left:solid 12px transparent;
|
||||
width: 0;
|
||||
margin-left: -1px;
|
||||
border-top-right-radius: 5px;
|
||||
}
|
||||
|
||||
.dashboard .section:hover .tools .md-btn-group::after {
|
||||
content: "";
|
||||
border-bottom: 25px solid rgb(28, 169, 213);
|
||||
border-right:solid 12px transparent;
|
||||
border-bottom: 25px solid var(--secondary-color);
|
||||
border-right: solid 12px transparent;
|
||||
width: 0;
|
||||
margin-left: -1px;
|
||||
border-top-left-radius: 5px;
|
||||
}
|
||||
|
||||
/* New section*/
|
||||
.dashboard .new-section {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
padding-right: 10px;
|
||||
border: #cecece dashed 2px;
|
||||
background-color: white;
|
||||
min-height: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dashboard .new-section .tools {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.dashboard .new-section .tools .md-btn.add {
|
||||
background-color: var(--secondary-color);
|
||||
min-width: 40px;
|
||||
min-height: 40px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* Dropdown*/
|
||||
|
@ -385,7 +455,7 @@ body.dashboard {
|
|||
}
|
||||
|
||||
/* Badge */
|
||||
.badge {
|
||||
.dashboard .badge {
|
||||
height: 75px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
@ -393,15 +463,31 @@ body.dashboard {
|
|||
z-index: 1;
|
||||
}
|
||||
|
||||
.small-badge {
|
||||
.dashboard .badge.small-badge {
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.right-badge{
|
||||
.dashboard .badge.right-badge {
|
||||
top: 0;
|
||||
left: auto;
|
||||
left: auto;
|
||||
transform: rotate(90deg);
|
||||
right: 0;
|
||||
|
||||
}
|
||||
|
||||
/* Login Icon*/
|
||||
|
||||
.loginLink.dark{
|
||||
color: rgba(0,0,0,.54) !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
circle.userBox.dark, svg .icon.userBox.dark, svg .loginLink.userBox.dark{
|
||||
stroke: rgba(0,0,0,.54);
|
||||
fill: none;
|
||||
}
|
||||
|
||||
text.userBox.dark {
|
||||
stroke: rgba(0,0,0,.54);
|
||||
fill: rgba(0,0,0,.54);
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue