Pony.fm/public/styles/components.less

@import-once 'base/bootstrap/bootstrap';
@import-once 'mixins';

.fade-hide, .fade-show {
  .transition(all cubic-bezier(0.250, 0.460, 0.450, 0.940) 350ms);
}

.fade-hide {
  opacity:1;
}

.fade-hide.fade-hide-active {
  opacity:0;
}

.fade-show {
  opacity:0;
}

.fade-show.fade-show-active {
  opacity:1;
}

html body {
  .ui-datepicker {
	.border-radius(0px);

	font-size: 9pt;
	padding: 3px;

	.ui-datepicker-header {
	  .border-radius(0px);
	  border: none;
	  border-bottom: 1px solid #777;
	  margin: -3px;
	}

	.ui-datepicker-calendar {
	}
  }
}

html .dropdown-menu {
  .border-radius(0px);
  padding: 0px;

  > li {
	margin: 0px;

	> a {
	  padding: 3px 10px;
	  font-size: 8pt;
	}

	> .dont-close {
	  float: right;
	  display: block;
	  width: 24px;
	  text-align: center;
	  padding: 3px 3px;
	}

	> .dont-close + a {
	  margin-right: 30px;
	  clear: none;
	}

	&.selected {
	  > .dont-close i:before {
		content: "\f068";
	  }
	}
  }
}

.dropdowns {
  .clearfix();

  list-style: none;
  padding: 0px;
  margin: 10px 0px;

  > li {
	margin: 0px;
	margin-right: 5px;
	padding: 0px;
	float: left;

	> a {
	  .border-radius(0px);
	  padding: 3px 10px;
	  font-size: 8pt;
	}

	ul {
	  .border-radius(0px);
	  padding: 0px;

	  li.selected {
		a {
		  background: @green;
		  color: #fff;

		  &:hover {
			background: fadeout(@green, 20%);
		  }
		}
	  }

	  a {
		padding: 3px 10px;
		font-size: 8pt;
	  }
	}
  }
}

.pfm-popup {
  .box-shadow(0 5px 10px rgba(0, 0, 0, 0.2));
  z-index: 1000;
  position: absolute;
  display: none;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: #fff;
  overflow-y: auto;

  &.open {
	display: block;
  }
}

.image-upload {
  overflow: hidden;

  .error {
	clear: left;
	margin-top: 14px;
  }

  input[type=file] {
	display: none;
  }

  .btn {
	.border-radius(0px) !important;
  }

  .preview {
	.img-polaroid();
	overflow: hidden;
	width: 46px;
	height: 46px;
	float: left;

	img {
	  position: relative;
	  display: block;
	  width: 100%;
	}

	&.canOpen {
	  cursor: pointer;

	  &:hover {
		border-color: @blue;
		border-style: solid;
	  }
	}
  }

  p, .btn-group {
	color: #555;
	margin-left: 60px;
	display: block;
	margin-bottom: 1px;
  }

  p {
	font-size: 9pt;
  }
}

.modal {
  form {
	margin: 0px;
  }

  .btn {
	.border-radius(0px);
  }
}

html {
  .pagination {
	border: none;

	&.pagination-right {
	  float: right;
	}

	li a {
	  .border-radius(0px);
	  border: none;
	  padding: 1px 10px;
	}

	li.active a {
	  background: #444;
	  color: #ddd;
	}
  }
}