asda2432es

✏️ Editing: dashboard.less

// Import Complianz LESS Variables
@import 'variables.less';
#cmplz_selected_region {
  font-size:13px;
}
.cmplz-plusone {
  border-radius: 50%;
  background-color: @color-warning;
  color: #fff;
  padding: 2px 6px;
  font-size: 10px;
}
.cmplz-bullet {
  height: 13px;
  width: 13px;
  border-radius: 50%;
  background-color: lightgrey;
  text-decoration: none;
}

.cmplz-other-plugins .cmplz-bullet {
  background-color: @rsp-black;
}

.plugin-color, .cmplz-trick {
  .cmplz-bullet {
	margin-right: 10px;
  }
}
#complianz {
  .dashicons, .dashicons-before:before {
	font-size: 15px;
	width: 15px;
	height: 15px;
  }
}

#cmplz-dashboard {

/*
	Progress labels
   */
  .cmplz-progress-warning-container {
	display:grid;
	grid-template-columns: 126px auto 50px;
	>div {
	  padding: 10px 0;
	}
	>div:nth-child(3) {
	  padding:0;
	}

button {
	  margin-top:10px;
	  border: 0;
	  background-color: transparent;
	  cursor:pointer;
	  .cmplz-close-warning-x {
		color: #ccc;
		font-size: 0.9em;
	  }
	}
  }
  .cmplz-scroll-container {
	height: 260px;
	margin-top: 20px;
  }
 .cmplz-progress-status-container {
   margin-right:40px;
 }

.cmplz-progress-status {
	display: block;
	min-width: 60px;
	text-align: center;
	border-radius: 15px;
	padding: 4px 8px 4px 8px;
	font-size: 0.8em;
	font-weight: 600;
	height: 17px;
	line-height:17px;

&.cmplz-completed {
	  background-color: @color-success;
	  color: white;
	}

&.cmplz-open {
	  background-color: @color-open;
	}

&.cmplz-urgent {
	  background-color: @color-warning;
	  color: white;
	}
  }

//progress bar
  .cmplz-progress-bar, .cmplz-sync-progress-bar {
	border-radius:5px;
	background: @grey-light;
	justify-content: flex-start;
	align-items: center;
	position: relative;
	display: flex;
	height: 20px;
	width: 100%;
	.cmplz-progress-bar-value {
	  border-radius:5px;
	  animation: cmplz-load-progress-bar 3s normal forwards;
	  box-shadow: 0 10px 40px -10px #fff;
	  background: @color-success;
	  height: 20px;
	  width: 0;
	}
  }

.cmplz-progress-percentage, .cmplz-progress-description {
	float:left;
	margin-top: 20px;
	font-weight: 600;
	font-size: 18px;
  }

.cmplz-progress-percentage{
	margin-right: 6px;
	font-size: 32px;
  }

.cmplz-grid-progress {
	display: grid;
	grid-template-columns: 125px auto;
  }

.cmplz-task {
	margin-left:10px;
	&.active {
	  color:#333;
	  text-decoration:underline;

}
  }

.cmplz-support {
	textarea {
	  width: 100%;
	  height: 75px;
	  border-color: #cecece;
	  font-size: 13px;
	}
  }

// Dashboard Documents
  .cmplz-document {
	.cmplz-icon {
	  margin-top:2px;
	  margin-right:5px;
	  &.bullet {
		margin-top:4px;
	  }
	}
	display: grid;
	grid-template-columns: 160px 20px 20px 20px auto;
	&.compact {
	  grid-template-columns: 190px auto;

}
	margin:10px 0;
	h3 {
	  margin-bottom:5px;
	}
	>div:nth-child(2),>div:nth-child(3),>div:nth-child(4) {
	  margin-left: auto;
	}
	>div:last-child {
	  margin-left: auto;
	}
	select {
	  width:200px;
	  font-size:13px;
	}
  }

.button {
	min-width:100px;
	text-align:center;
  }
  .item-footer {
	a.button + a.button {
	  margin-left:10px;
	}
  }

// Dashboard Tools
  .cmplz-tools-row {
	display: grid;
	grid-template-columns: 190px auto;
	margin:10px 0;
	>div:last-child {
	  margin-left: auto;
	}
	.cmplz-last-updated-poc {
	  white-space: nowrap;
	  font-size:13px;
	}
  }

}

// break points
@grid-margin:10px;
@break-xs: 400px;
@break-s: 600px;
@break-m: 768px;
@break-l: 992px;
@break-xl: 1555px;
// Code below should be integrated in to the code above.
.cmplz-grid {
  position: relative;
  .cmplz-grid-item {
	padding:10px;
	.item-container {
	  width: 100% !important;
	}

@media only screen and (min-width: @break-xs) {
	  width: calc(100% - 2 *  @grid-margin );
	}

@media only screen and (min-width: @break-s) {
	  width: calc(100% - 2 *  @grid-margin );
	}

@media only screen and (min-width: @break-m) {
	  width: calc(100% - 2 *  @grid-margin );
	}

@media only screen and (min-width: @break-l) {
	  width: calc(100% - 2 *  @grid-margin );
	}

@media only screen and (min-width: @break-xl) {
	  width: calc(50% - 2 *  @grid-margin );
	}

&.small {
	  width: calc(100% - 2 *  @grid-margin);

@media only screen and (min-width: @break-xs) {
		width: calc(100% - 2 * @grid-margin);
	  }

@media only screen and (min-width: @break-s) {
		width: calc(100% - 2 * @grid-margin);
	  }

@media only screen and (min-width: @break-m) {
		width: calc(50% - 2 *  @grid-margin);
	  }

@media only screen and (min-width: @break-l) {
		width: calc(50% - 2 *  @grid-margin);
	  }

@media only screen and (min-width: @break-xl) {
		width: calc(25% - 2 *  @grid-margin);
	  }
	}
  }
}

Ubuntu

Sid Gifari From Gifari Industries - BD Cyber Security Team