seitime-frappe/frappe/public/less/desktop.less

@import "variables.less";

.desk-container {
	margin-top: 20px;

	.desk-sidebar {
		width: 24rem;
		display: block;
		position: fixed;
		z-index: 1;
		min-height: 1px;
		padding-right: 15px;
		scroll-behavior: auto;
		overflow-y: scroll;
		top: 40px;
		scrollbar-width: none;
		bottom: 0;
		float: left;

		&::-webkit-scrollbar {
			display: none;
		}

		.sidebar-item {
			font-size: 12px;
			font-weight: bold;
			margin-bottom: 1px;
			display: flex;
			padding: 10px 15px;
			border-radius: 4px;
			text-decoration: none;
			cursor: pointer;
			text-rendering: optimizelegibility;

			&:focus {
				background-color: @panel-bg;
				outline: 0;
			}

			&:hover {
				background-color: @panel-bg;
			}

			&.selected {
				background-color: @panel-bg;
			}

			&:last-child {
				margin-bottom: 30px;
			}

			.icon {
				color: @text-muted;
				padding-right: 1rem;
				align-self: center;
			}
		}

		.sidebar-group-title {
			margin-top: 30px;
			padding: 0px 15px;
			text-rendering: optimizelegibility;

			&:first-child {
				// To compensate for top value in desk-sidebar
				margin-top: 30px;
			}
		}
	}

	.desk-body {
		padding-left: calc(24rem + 15px);
		display: flex;
		flex-direction: column;
  		height: 100%;
		position: relative;
		min-height: 1px;
		padding-right: 15px;

		.desk-page.allow-customization {
			.customize-options {
				text-align: right;
				margin-top: 7px;
				color: @text-muted;
				z-index: 99;

				.save-customization {
					cursor: pointer;
					color: @text-color;
				}

				.discard-customization {
					cursor: pointer;
				}
			}
		}
	}

	@media (max-width: 768px) {
		.desk-sidebar {
			display: none;
		}
		.desk-body {
			padding-left: 15px !important;
		}
	}
}

.widget-group {
	margin-bottom: 25px;
	// -webkit-animation-name: slideInUp;
	// animation-name: slideInUp;
	// animation-duration: 0.4s;

	.widget-group-head {
		display: flex;
		justify-content: space-between;

		.widget-group-title {
			align-self: center;
		}

		.widget-group-control {
			align-self: center;
		}
	}

	.legend {
		display: flex;
		padding: 15px;

		.legend-item {
			margin-right: 20px;
		}
	}

	.grid-col-3 {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
		// grid-auto-rows: minmax(62px, 1fr);
		column-gap: 15px;
		row-gap: 15px;
		align-items: center;
	}

	.grid-col-2 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		// grid-auto-rows: minmax(62px, 1fr);
		column-gap: 15px;
		row-gap: 15px;
		align-items: center;

		.full-width {
			grid-column-start: 1;
			grid-column-end: 3;
		}
	}

	.grid-col-1 {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(550px, 1fr));
		// grid-auto-rows: minmax(62px, 1fr);
		column-gap: 15px;
		row-gap: 15px;
		align-items: center;
	}

	@media (max-width: 768px) {
		.legend {
			display: flex;
			flex-direction: column;

			.legend-item {
				margin-right: 20px;
			}
		}

		.grid-col-2 {
			grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
			.full-width {
				grid-column-start: 1;
				grid-column-end: 2;
			}
		}

		.grid-col-1 {
			grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
		}
	}
}

.widget {
	display: flex;
	flex-direction: column;
	min-height: 1px;
	padding: 15px;
	border-radius: 5px;
	border: 1px solid @border-color;
	height: 100%;

	.widget-head {
		display: flex;
		justify-content: space-between;

		.widget-title {
			align-self: center;
			font-size: 16px;
			font-family: inherit;
			font-weight: 500;
			line-height: 1.3em;
			color: inherit;
		}
		.widget-control {
			align-self: center;
			display: flex;
			flex-direction: row-reverse;

			// Any immidiate child
			>* {
				align-self: center;
				margin-left: 5px;
			}

			.drag-handle {
				cursor: all-scroll;
				cursor: -webkit-grabbing;

				&:active {
				    cursor: grabbing;
				    cursor: -moz-grabbing;
				    cursor: -webkit-grabbing;
				}
			}

			.dashboard-date-field {
				.clearfix,
				.help-box {
					display: none;
				}

				.frappe-control,
				.form-group {
					margin-bottom: 0px !important;
				}
			}
		}
	}

	&.sortable-ghost {
		background-color: @disabled-background;
		border-color: @disabled-background
	}

	&.new-widget {
		min-height: 65px;
		background-color: @disabled-background;
		color: @text-muted;
		display: flex;
		align-content: center;
		justify-content: center;
		cursor: pointer;
	}

	// Overrides for each widgets
	&.dashboard-widget-box {
		padding: 10px 15px !important;
		min-height: 260px;

		.chart-column-container {
			padding-right: 0px !important;
			padding-left: 0px !important;
		}

		.widget-footer {
			font-size: 85%;
			color: @text-muted;
		}

		.chart-loading-state {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.report-summary {
			grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
			border: none;

			.summary-value {
				font-size: 20px;
			}
		}
	}

	&.onboarding-widget-box {
		.widget-head {
			display: block;

			.widget-title {
				font-size: 20px;
			}

			.widget-subtitle {
				font-size: 16px;
				margin-top: 5px;
				color: @text-muted;
			}
		}

		.widget-body {
			margin-top: 20px;

			.onboarding-step {
				margin-bottom: 8px;
				font-size: 16px;
				letter-spacing: 0.015em;
			}

			i {
				padding-left: 5px;
				padding-right: 12px;

				&.complete {
					color: @brand-primary;
				}

				&.incomplete {
					color: @text-muted;
				}
			}
		}
	}

	&.shortcut-widget-box {
		cursor: pointer;

		&:hover {
			border-color: @text-muted;
		}

		.widget-head {
			margin-top: 5px;
			margin-bottom: 5px;

			.widget-title {
				i {
					color: @text-muted;
					font-size: 18px;
					margin-right: 6px;
				}
			}
		}
	}

	&.links-widget-box {
		.link-item {
			position: relative;
			margin: 10px 0px;
			cursor: default;

			&:first-child {
				margin-top: 15px;
			}

			&:last-child {
				margin-bottom: 0px !important;
			}

			.link-content {
				flex: 1;
			}

			.disabled-link {
				color: @text-muted;
			}

			.popover {
				display: block;
				top: -60px;
				max-width: 220px;

				&.top > .arrow {
					left: 20%;
				}
			}

			.indicator {
				margin-right: 5px;
				color: inherit;
				font-weight: inherit;
			}
		}
	}
}

.pill {
	position: relative;
	left: 2px;
	// font-weight: bold;
	display: inline-block;
	background:	@text-muted;
	font-size: 12px;
	line-height: 20px;
	padding: 0 8px;
	color: #fff;
	border-radius: 10px;
}

@-webkit-keyframes smallBounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -12px, 0);
    transform: translate3d(0, -12px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -6px, 0);
    transform: translate3d(0, -6px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

@keyframes smallBounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -12px, 0);
    transform: translate3d(0, -12px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -6px, 0);
    transform: translate3d(0, -6px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

.small-bounce {
  -webkit-animation-name: smallBounce;
  animation-name: smallBounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
  animation-duration: 1s;
}

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slide-in-up {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
  animation-duration: 1s;
}


@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.zoomOutDelete {
  // -webkit-animation-name: zoomOut;
  // animation-name: zoomOut;
  // animation-duration: 1s;
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  transform: scale3d(0.5, 0.5, 0.5);
  opacity: 0;
  visibility: hidden;
}