Pony.fm/public/styles/components.less

@import 'base/bootstrap/bootstrap';
@import '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 {
	}
  }
}

.dropdowns {
  .clearfix();

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

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

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

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

	  li.selected {
		a {
		  #gradient>.vertical(@green, darken(@green, 5%));
		  color: #fff;
		  font-weight: bold;

		  &:hover {
			#gradient>.vertical(fadeout(@green, 20%), fadeout(darken(@green, 5%), 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;
  }
}