seitime-frappe/frappe/public/less/common.less

@import "variables.less";
@import "mixins.less";

body {
	font-family: @font-stack;
}

a {
	cursor: pointer;
}

a,
a:hover,
a:active,
a:focus,
.btn,
.btn:hover,
.btn:active,
.btn:focus {
	outline: 0;
}

img {
	max-width: 100%;
}

p {
	margin: 10px 0;
}

details > summary {
	cursor: pointer;
}

details > summary:focus {
	outline: none;
}

.text-color {
	color: @text-color !important;
}

.text-muted {
	color: #8D99A6 !important;
}

.text-extra-muted {
	color: @border-color !important;
}

// transition
a,
.badge {
	.transition(.2s);
}

.btn {
	.transition(background-color .2s);
}

a.disabled,
a.disabled:hover {
	color: #888;
	cursor: default;
	text-decoration: none;
}

a.grey,
.sidebar-section a,
.control-value a,
.data-row a {
	text-decoration: none;
}

a.grey:hover,
.sidebar-section a:hover,
.control-value a:hover,
.data-row a:hover,
a.grey:focus,
.sidebar-section a:focus,
.control-value a:focus,
.data-row a:focus {
	text-decoration: underline;
}

a.text-muted,
a.text-extra-muted {
	text-decoration: none;
}

.underline {
	text-decoration: underline;
}

.inline-block {
	display: inline-block;
}

.bold,
.strong {
	font-weight: bold;
}

kbd {
	color: inherit;
	background-color: @btn-bg;
}

.btn [class^="fa fa-"],
.nav [class^="fa fa-"],
.btn [class*="fa fa-"],
.nav [class*="fa fa-"] {
	display: inline-block;
}

/* dropdowns */

.dropdown-backdrop {
	display: none;
}

.dropdown-menu > li > a {
	padding: 14px;
	white-space: normal;
}

.dropdown-menu {
	min-width: 200px;
	padding: 0px;
	font-size: @text-medium;
	max-height: 500px;
	overflow: auto;
	// only rounded bottoms
	border-radius: 0px 0px 4px 4px;
}

.dropdown-menu .dropdown-header {
	padding: 3px 14px;
	font-size: 11px;
	font-weight: 200;
	padding-top: 12px;
}

.dropdown-menu .divider {
	margin: 0px;
}

a.badge-hover& {
	&:hover .badge,
	&:focus .badge,
	&:active .badge {
		background-color: #d8dfe5;
	}
}

.msgprint-dialog {
	max-width: 400px;

	.modal-content {
		min-height: 110px;
	}
}

.msgprint-scroll {
	max-height: 36em;
	overflow: scroll;
}

.msgprint {
	// margin: 15px 0px;
	// text-align: center;
	word-wrap: break-word;

	pre {
		text-align: left;
	}

	a:not(.btn) {
		text-decoration: underline;
	}
}

.centered {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
}

.border-(@position) {
	.border-@{position} {
		border-@{position}: 1px solid @border-color;
	}
}

.border-(top);
.border-(bottom);
.border-(left);
.border-(right);

.border {
	border: 1px solid @border-color;
}

.rounded {
	border-radius: 4px;
}

.close-inline {
	font-size: 120%;
	font-weight: bold;
	line-height: 1;
	cursor: pointer;
	color: inherit;
	display: inline-block;
}

.close-inline:hover,
.close-inline:focus {
	text-decoration: none;
}

.middle {
	vertical-align: middle;
}

.full-center-container {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.full-center {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
}

#freeze {
	z-index: 1020;
	bottom: 0;
	opacity: 0;
	background-color: @light-bg;

	.freeze-message-container {
		.full-center-container;
	}

	.freeze-message {
		.full-center;
		text-align: center;
		color: @text-color !important;
	}
}

#freeze.dark {
	// same as modal backdrop;
	background-color: #334143;
}

#freeze.in {
	opacity: 0.5;
}

a.no-decoration& {
	text-decoration: none;
	color: inherit;

	&:hover,
	&:focus,
	&:active {
		text-decoration: none;
		color: inherit;
	}
}

.padding {
	padding: 15px;
}

.margin {
	margin: 15px;
}

.margin-(@position) {
	.margin-@{position} {
		margin-@{position}: 15px;
	}
}

.margin-(top);
.margin-(bottom);
.margin-(left);
.margin-(right);

@media (max-width: 767px) {
	.text-center-xs {
		text-align: center;
	}
}

.grayscale {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}

.uppercase {
	.text-uppercase();
}

.ellipsis {
	.text-ellipsis();
}

/* Given that the element that text-ellipsis is applied to,
	should have a max width for it to work */
.ellipsis-width {
	max-width: 200px;
}

/* Font size utilities */

.text-regular {
	font-size: @text-regular;
}

.text-medium {
	font-size: @text-medium;
}

.text-small {
	font-size: @text-small;
}

.text-large {
	font-size: @text-large;
}

.disable-click {
	pointer-events: none;
}

.popover-title {
	display: none;
}