Context Navigation

← Previous Revision
Latest Revision
Next Revision →
Normal
Revision Log

form-checkbox.less @ 752

Last change on this file since 752 was 313, checked in by dungnv, 11 years ago

File size: 8.6 KB

Rev	Line
[313]	1	//some checkbox & switch variables
	2	@checkbox-color:#32A3CE;
	3	@checkbox-border-color:#C8C8C8;
	4	@checkbox-checked-border:#ADB8C0;
	5	@checkbox-hover-border:#FF893C;
	6	@checkbox2-bg:#F9A021;
	7
	8	@switch-checked-bg:#8AB2C9;
	9	@switch-checked-border:#468FCC;
	10	@switch4-bg:#8B9AA3;
	11	@switch4-color:#5B6A73;
	12	@switch4-checked-bg:#468FCC;
	13
	14	@switch6-checked-border:#B7D3E5;
	15	@switch6-checked-bg:#FF893C;
	16
	17	@switch7-checked-bg:#468FCC;
	18	@switch7-checked-border:#6FB3E0;
	19
	20
	21	@switch-1-text:"ON\a0\a0\a0\a0\a0\a0\a0\a0\a0OFF";
	22	@switch-2-text:"YES\a0\a0\a0\a0\a0\a0\a0\a0NO";
	23	@switch-4-text:"ON\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0OFF";
	24	@switch-5-text:"YES\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0NO";
	25	@switch-7-text:"OFF\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0ON";
	26
	27
	28
	29
	30	/* Checkbox & Radio */
	31	input[type=checkbox].ace , input[type=radio].ace {
	32	opacity:0;
	33	position:absolute;
	34	z-index:12;
	35	width:18px; height:18px;
	36	cursor:pointer;
	37
	38	&:checked, &:focus {
	39	outline:none !important;
	40	}
	41
	42	+ .lbl {
	43	position: relative; z-index:11;
	44	display:inline-block;
	45	margin:0;
	46	line-height:20px;
	47
	48	min-height:18px;
	49	min-width:18px;
	50	font-weight:normal;
	51
	52
	53	.checkbox-paddings() {// a little paddings for .lbl
	54	.checkbox-paddingX (@index) when (@index >= 0) {
	55	&.padding-@{index}::before {
	56	margin-right:unit(@index,px);
	57	}
	58	.checkbox-paddingX(@index - 4);
	59	}
	60	.checkbox-paddingX(16);
	61	}
	62	.checkbox-paddings();
	63
	64
	65	&::before {
	66	font-family:fontAwesome; font-weight:normal;
	67	font-size: 12px; color:@checkbox-color;
	68	content:"\a0";
	69	display:inline-block;
	70	background-color: #FAFAFA;
	71	border: 1px solid @checkbox-border-color;
	72	box-shadow: 0 1px 2px rgba(0,0,0,0.05);/, inset 0px -15px 10px -12px rgba(0,0,0,0.05);/
	73	border-radius: 0;
	74	display: inline-block;
	75	text-align:center;
	76
	77	vertical-align:middle;
	78
	79	height:16px; line-height:14px;
	80	min-width:16px;
	81
	82	margin-right:1px;
	83	}
	84	}//.lbl
	85
	86	&:checked + .lbl::before ,
	87	{
	88	display:inline-block;
	89	content: '\f00c';
	90	background-color: #F5F8FC;
	91	border-color:@checkbox-checked-border;
	92	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
	93	}
	94	&:hover + .lbl::before , + .lbl:hover::before {
	95	border-color:@checkbox-hover-border;
	96	}
	97
	98
	99	&:active , &:checked:active {
	100	+ .lbl::before {
	101	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
	102	}
	103	}
	104
	105
	106	&.ace-checkbox-2 + .lbl::before {
	107	box-shadow: none;
	108	}
	109	&.ace-checkbox-2:checked + .lbl::before {
	110	background-color: @checkbox2-bg;
	111	border-color: @checkbox2-bg;
	112	color: #FFF;
	113	}
	114
	115	&:disabled + .lbl::before ,
	116	&[disabled] + .lbl::before ,
	117	&.disabled + .lbl::before {
	118	background-color:#DDD !important;
	119	border-color:#CCC !important;
	120	box-shadow:none !important;
	121	color:#BBB;
	122	}
	123	}
	124
	125
	126
	127	/**
	128	input[type=radio].ace + .lbl::before {
	129	border-radius:100%;
	130	font-size:34px;
	131	font-family: Helvetica, Arial, "Sans-Serif";//looks better but incosistent
	132	line-height:13px;
	133	}
	134	*/
	135	input[type=radio].ace + .lbl::before {
	136	border-radius: 100%;
	137	font-size: 11px;
	138	font-family: FontAwesome;//let's use a fonts that's available everywhere
	139	text-shadow: 0 0 1px @checkbox-color;
	140
	141	line-height: 15px;
	142	height: 17px;
	143	min-width: 17px;
	144	}
	145	input[type=radio].ace:checked + .lbl::before {
	146	content:"\f111";
	147	}
	148
	149
	150
	151
	152
	153
	154
	155	/* CSS3 on/off switches */
	156	//use like <input type="checkbox" class="ace ace-switch" /> <span class="lbl"></span>
	157	input[type=checkbox].ace.ace-switch {
	158	width:55px;
	159	height:25px;
	160
	161	+ .lbl {
	162	margin:0 4px;
	163	min-height:24px;
	164
	165	&::before {
	166	font-family:Arial, Helvetica, sans-serif;
	167	content:@switch-1-text;
	168
	169	color:#999;
	170	font-weight:bold;
	171	font-size:11px;
	172
	173	line-height:18px; line-height:21px\9;/ie9/
	174	height:20px;
	175	overflow:hidden;
	176
	177	border-radius:12px;
	178
	179	background-color: #F5F5F5;
	180	.box-shadow(~"inset 0px 2px 2px 0px rgba(0,0,0,.2)");
	181
	182	border: 1px solid #CCC;
	183
	184	text-align:left;
	185	float:left;
	186	padding:0;
	187	width:52px;
	188	text-indent:-19px; text-indent:~"-21px\9";
	189	margin-right:0;
	190
	191	.transition(~"text-indent .4s ease");
	192	}
	193
	194	&::after {
	195	font-family:Arial, Helvetica, sans-serif;
	196	content: '\|\|\|';
	197	font-size: 10px;
	198	font-weight:lighter;
	199	color:#D5D5D5;
	200	background-color:#FFF;
	201
	202	text-shadow:-1px 0px 0 rgba(0, 0, 0, 0.15);
	203	text-align:center;
	204	border-radius:100%;
	205
	206	width:22px; height:22px; line-height:20px;
	207	position: absolute;
	208	top: -2px; left: -3px;
	209	padding:0;
	210
	211	.box-shadow(~"0px 1px 1px 1px rgba(0,0,0,.3)");
	212	//text-shadow:0px 1px 1px rgba(0,0,0,0.3) inset;
	213
	214	.transition(~"left .4s ease");
	215	}
	216	}
	217
	218	&:checked + .lbl {
	219	&::before {
	220	text-indent:9px;
	221
	222	color:#FFF;
	223	background-color:@switch-checked-bg;
	224	border-color:@switch-checked-border;
	225	}
	226	&::after {
	227	left:34px;
	228	background-color:#FFF;
	229	color:@switch-checked-bg;
	230	}
	231	}
	232
	233
	234	&.ace-switch-2 + .lbl::before {
	235	content:@switch-2-text;
	236	}
	237
	238	&.ace-switch-3 + .lbl::after {
	239	font-family:FontAwesome;
	240	font-size:13px; line-height:23px;
	241	content:"\f00d";
	242	top:-1px;
	243	}
	244	&.ace-switch-3:checked + .lbl::after {
	245	content:"\f00c";
	246	}
	247
	248	/* switch style 4 & 5 */
	249	&.ace-switch-4 , &.ace-switch-5 {
	250	+ .lbl::before {
	251	content:@switch-4-text;
	252	font-family:Arial, Helvetica, sans-serif;
	253	font-weight:bolder;
	254	font-size:12px;
	255	line-height:23px; height:24px; overflow:hidden;
	256	line-height:25px\9;
	257
	258	border-radius:12px;
	259
	260	display:inline-block;
	261	background-color: @switch4-bg;
	262	border: 1px solid @switch4-bg;
	263
	264	color:#FFF;
	265	width:56px;
	266	text-indent:-25px; text-indent:~"-28px\9";
	267
	268	display: inline-block;
	269	position: relative;
	270
	271	//margin-right:8px;
	272
	273	box-shadow:none;
	274
	275	.transition(~"all .4s ease");
	276	}
	277
	278	+ .lbl::after {
	279	font-family:Helvetica, Arial, sans-serif;
	280	content: '\|\|\|'; text-shadow:-1px 0px 0 rgba(0, 0, 0, 0.2);
	281	font-size: 8px; font-weight:lighter;
	282	color:@switch4-bg;
	283	text-align:center;
	284	position: absolute;
	285	border-radius:12px;
	286
	287	color:@switch4-color;
	288	top: 2px; left: 2px;
	289	width:20px; height:20px; line-height:18px;
	290	background-color:#FFF;
	291
	292	.transition(~"all .4s ease");
	293	}
	294
	295
	296	&:checked + .lbl {
	297	&::before {
	298	text-indent:9px;
	299	background-color:@switch4-checked-bg;
	300	border-color:#468FCC;
	301	}
	302	&::after {
	303	left:34px;
	304	background-color:#FFF;
	305	}
	306	}
	307
	308
	309	}
	310	&.ace-switch-5 + .lbl::before {
	311	content:@switch-5-text;
	312	}
	313	&.ace-switch-5:checked + .lbl::before {
	314	text-indent:8px;
	315	}
	316
	317
	318	/* switch style 6 */
	319	&.ace-switch-6 {
	320	+ .lbl {
	321	position: relative;
	322	&::before {
	323	font-family:FontAwesome;
	324	content:"\f00d";
	325	text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);
	326	box-shadow:none;
	327	border:none;
	328
	329	font-weight:lighter;
	330	font-size:16px;
	331
	332
	333	border-radius:12px;
	334
	335	display:inline-block;
	336	background-color: #888;
	337
	338	color:#F2F2F2;
	339
	340	width:52px; height:22px; line-height:20px;
	341	text-indent:32px;
	342
	343	.transition(~"background 0.1s ease");
	344	}
	345	&::after {
	346	content: ''; text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);
	347
	348	position: absolute;
	349	top: 2px; left: 3px;
	350
	351	border-radius:12px;
	352	box-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);
	353
	354	width:18px; height:18px;
	355	text-align:center;
	356
	357	background-color:#F2F2F2;
	358	border:4px solid #F2F2F2;
	359
	360	.transition(~"left 0.2s ease");
	361	}
	362	}
	363
	364	&:checked + .lbl {
	365	&::before {
	366	content: "\f00c";
	367	text-indent:6px;
	368
	369	color:#FFF;
	370	border-color:@switch6-checked-border;
	371	background-color:@switch6-checked-bg;
	372	}
	373	&::after {
	374	left:32px;
	375
	376	background-color:#FFF;
	377	border:4px solid #FFF;
	378	text-shadow:0 -1px 0 rgba(0, 200, 0, 0.25);
	379	}
	380	}
	381	}
	382
	383
	384	&.ace-switch-7 {
	385	width:75px;
	386
	387	+ .lbl {
	388	position: relative;
	389	&::before {
	390	content:@switch-7-text;
	391
	392	font-weight:bolder;
	393	font-size:14px;
	394	line-height:20px;
	395
	396	display:inline-block;
	397	background-color: #FFF;
	398	border: 2px solid #AAA;
	399	border-radius:0;
	400	box-shadow:none;
	401
	402	color:#aaa;
	403
	404	width:74px; height:26px; line-height:22px; overflow:hidden;
	405	text-indent:4px;
	406
	407	display: inline-block;
	408	position: relative;
	409
	410	//margin-right:8px;
	411
	412	.transition(~"all 0.2s ease");
	413	}
	414
	415	&::after {
	416	content: '\f00d';
	417	font-family:FontAwesome;
	418	font-size: 16px;
	419
	420	position: absolute;
	421	top: 3px;
	422	left: 39px;
	423	width:32px; height:20px; line-height:18px;
	424
	425	text-align:center;
	426
	427	background-color:#aaa;
	428	color:#FFF;
	429	border-radius:0;
	430	box-shadow:none;
	431
	432	.transition(~"all 0.2s ease-in-out");
	433	}
	434	}
	435
	436	&:checked + .lbl {
	437	&::before {
	438	color:@switch7-checked-bg;
	439	background-color: #FFF;
	440	text-indent:-33px;
	441	border-color:@switch7-checked-border;
	442	}
	443	&::after {
	444	left:3px;
	445	content:'\f00c';
	446	background-color:@switch7-checked-bg;
	447	color: #FFF;
	448	}
	449	}
	450
	451	}
	452	}

Note: See TracBrowser for help on using the repository browser.

Download in other formats:

Original Format