amber/css/moka.less

@import "reset.css";
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,latin-ext);


	    // Mixins
	    .gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) {
		background: @color;
		background: -webkit-gradient(linear,
					     left bottom,
					     left top,
					     color-stop(0, @start),
					     color-stop(1, @stop));
		background: -ms-linear-gradient(bottom,
						@start,
						@stop);
		background: -moz-linear-gradient(center bottom,
						 @start 0%,
						 @stop 100%);
		background: -o-linear-gradient(@stop,
					       @start);
		filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start));
	    }
	    .bordered(@top-color: #EEE, @right-color: #EEE, @bottom-color: #EEE, @left-color: #EEE) {
		border-top: solid 1px @top-color;
		border-left: solid 1px @left-color;
		border-right: solid 1px @right-color;
		border-bottom: solid 1px @bottom-color;
	    }
	    .drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) {
		-webkit-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
		-moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
		box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
	    }
	    .rounded(@radius: 3px) {
		-webkit-border-radius: @radius;
		-moz-border-radius: @radius;
		border-radius: @radius;
	    }
	    .inner-shadow(@horizontal:0, @vertical:1px, @blur:2px, @alpha: 0.4) {
		-webkit-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
		-moz-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
		box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
	    }
	    .box-shadow(@arguments) {
		-webkit-box-shadow: @arguments;
		-moz-box-shadow: @arguments;
		box-shadow: @arguments;
	    }
	    .transition(@property: all, @duration:0.2s, @ease:ease-out) {
		-webkit-transition: @property @duration @ease;
		-moz-transition: @property @duration @ease;
		-o-transition: @property @duration @ease;
		transition: @property @duration @ease;
	    }
	    .no-select {
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	    }

	    // Moka definitions

	    // TEMP
	    body {
		background: #f1f1f1;
	    }

	    .moka_view {    

		display: inline-block;

		.mk_default {
		    // Generic fonts
		    font-size: 12px;
		    font-family: "Open Sans";
		    color: #555;
		    text-shadow: 0 1px 0 white;

		}

		// Labels

		span {
		    .mk_default;
		    color: #333;
		    padding: 4px;
		}

		// Controls
		
		.mk_control, .mk_control:active, .mk_control:focus {
		    .mk_default;

		    margin: 4px;
		    padding: 3px 10px;
		    .rounded();
		    .bordered(#999, #999, #999, #999);
		    .box-shadow(0 0 3px 0 #ccc);
		    background: white;

		    &:focus {
			outline: 0;
		    }
		}

		button {
		    .mk_control;
		    .no-select;
		    .gradient(#fafafa, #dedede, white);

		    &:focus {
			border-color: #08c;
		    }

		    &:active {
			background: #ccc;
			.box-shadow(inset 0 0 3px 0 #888);
			border-color: #999;
		    }
		}
		
		input, textarea {
		    .mk_control;
		    text-shadow: 0 0 0;

		    &:focus {
			.box-shadow(inset 0 0 3px 0 #999);
			border-color: #08c;
		    }
		}
		
		textarea {
		    width: 200px;
		    height: 100px;
		}

		input[type="checkbox"] {
		    position: absolute;
		    left: -999999px;
		}

		.mk_checkbox + label {
		    .no-select;
		    padding: 0 6px;
		    margin: 4px;
		    background: url('../images/moka/check.png') 50% 50% no-repeat;
		    height: 16px;
		    width: 16px;
		}

		.mk_checkbox:focus + label {
		    background-image: url('../images/moka/check-focus.png');
		    .box-shadow(0 0 2px #08c);
		}

		.mk_checkbox:checked + label {
		    background-image: url('../images/moka/check-active.png');
		}

		.mk_switch + label {
		    .no-select;
		    .rounded(20px);
		    margin: 4px;
		    vertical-align: middle;
		    display: inline-block;
		    height: 20px;
		    width: 59px;
		    border: 1px solid #999;
		    background: url('../images/moka/switch.png') 100% 50% no-repeat;
		    .transition(background, .3s);
		}

		.mk_switch:focus + label {
		    border-color: #08c;
		}

		.mk_switch:checked + label {
		    background-position: 0% 50%;
		}
	    }