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

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

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 0px;
}

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

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

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

// transition
a,
.badge,
.ui-menu .ui-menu-item {
	.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;
}

/* the element that this class is applied to, should have a max width for this to work*/
.text-ellipsis,
.ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	vertical-align: middle;
}

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

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

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

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

// dropdowns
.dropdown-menu > li > a {
	padding: 14px;
}

.dropdown-menu {
	min-width: 200px;
	padding: 0px;
	font-size: @text-medium;

	// only rounded bottoms
	border-radius: 0px 0px 4px 4px;
}

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

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

.msgprint {
	text-align: center;

	pre {
		text-align: left;
	}
}

.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;
}

.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: 0px;
	opacity: 0;
	background-color: @light-bg;

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

	.freeze-message {
		.full-center;
		text-align: center;
		// color: #fff !important;
		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;
}

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

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