style.way-boleto.less Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of boleto Show documentation
Geração de boletos. Simples.
The newest version!
.way-boleto {
	color: @grayDarker;
	
	.border-b(@px) {
		border-bottom: @px solid @black;
	}
	.border-l(@px) {
		border-left: @px solid @black;
	}
	.border-r(@px) {
		border-right: @px solid @black;
	}
	
	.bol {
		.clearfix();
		
		&.bol-hd {
			.border-b(3px);
			
			@col00: 17.8%;
			@col01: 10.9%;
			@col02: 100% - @col00 - @col01;
			@height: 35px;

			.cwrap {
				height: @height;
				position: relative;
			}
			
			.col00 {
				width: @col00;
				
				> .cwrap {
					.border-r(3px);
				}
				
				span {
					#font > .size(1.4);
					.tac;
					line-height: @height;
				} 
			}
			
			.col01 {
				width: @col01;
				
				> .cwrap { 
					.border-r(3px);
				}
				
				span {
					#font > .size(2.4);
					font-weight: bold;
					.tac;
				}
			}
			
			.col02 {
				width: @col02;
				
				span {
					bottom: 0;
					padding: 0 0 0 1.8%;

					#font > .size(1.6);
				}
			}
			
			span {
				position: absolute;
				width: 100%;
			}
		}
		
		&.bol-bd {
			@bdlt: 73%;
			@bdrt: 100% - @bdlt;
			@bol: 32px;
			@bolLarge: 51px;
			@bolXlarge: 160px;
		
			.bd-lt {
				width: @bdlt;

				.bol00, .bol04 {
					.col {
						float: none;
					}
				}
				
				.bol01 {
					@col00: 75%;
					@col01: 25%;
					
					.col00 {
						width: @col00;
						float: left;
						> .cwrap { 
							.border-r(0px);
						}
					}
					.col01 {
						width: @col01;
					}
					.col02 {
						width: 100%;
					}
				}
				
				.bol02 {
					@col00: 21%;
					@col01: 28%;
					@col02: 15%;
					@col03: 9%;
					
					.col00 {
						width: @col00;
					}
					.col01 {
						width: @col01;
					}
					.col02 {
						width: @col02;
					}
					.col03 {
						width: @col03;
					}
					.col04 {
						width: 100% - @col00 - @col01 - @col02 - @col03;
					}
				}

				.bol03 {
					@col00: 21%;
					@col01: 19%;
					@col02: 9%;
					@col03: 24%;
					
					.col00 {
						width: @col00;
					}
					.col01 {
						width: @col01;
					}
					.col02 {
						width: @col02;
					}
					.col03 {
						width: @col03;
					}
					.col04 {
						width: 100% - @col00 - @col01 - @col02 - @col03;
					}
				}
				
				.bol04 {
					.bol-info-ad {
						position: absolute;
						bottom: 0;
					}
				
					.cwrap {
						position: relative;
					}
				}
				
				.cwrap {
					.border-r(1px);
				}
			}
			
			.bd-rt {
				width: @bdrt;
				
				span.bol-field {
					.tar;
					padding-right: 28px; 
				}
				
				.col {
					float: none;
				}
			}
			
			.bol {
				&.bol-large {
					span.bol-field {
						font-size: 17px;
						line-height: 30px;
					}
					
					p.bol-field {
						font-size: 17px;
						line-height: 30px;
						padding: 0 0 0 7px
					}
					
					
					.col {
						.col-height(@bolLarge);
					}
				}

				&.bol-xlarge {
					.col {
						.col-height(@bolXlarge);
					}
				}
				
				.col {
					.col-height(@bol);
				}
			}
		}
		
		&.bol-ft00 {
			@height: 62px;
			height: @height;
			@col00: 69%;
			@col01: 31%;

			.col00 {
				.col-height(@height, 0px);
				float: left;
				width: @col00;
			}
			
			.col01 {
				.col-height(@height, 0px);
			}
			
			span.bol-field {
				font-size: 12px;
				line-height: 16px;
			}
		}

		&.bol-ft01 {
			@height: 14px;
			height: @height;
			@col00: 63%;

			.col {
				.col-height(@height);
			}
			
			.col00 {
				width: @col00;

				.cwrap {
					position: relative;
				}
				
				span.bol-field {
					position: absolute;
					left: 86px;
					
					font-size: 11px;
					line-height: 11px;
				}
			}
			.col01 {
				width: 100% - @col00;
			}
		}

		&.bol-ft02 {
			@height: 62px;
			height: @height;
			@heightBar: 50px;
			@width: 1px;
			@col00: 61%;

			.barcode {
				.clearfix();
				padding: 10px 0 0 10px;
				
				.bar {
					float: left;
					height: @heightBar;
				}

				.bc-black {
					background-color: @black;
					-webkit-print-color-adjust: exact;
				}
				.bc-white {
				}
				
				.bc-narrow {
					width: @width;
				}
				.bc-wide {
					width: @width * 3;
				}
			}
	
			.col {
				.col-height(@height, 0px);
			}
			
			.col00 {
				width: @col00;
			}
			.col01 {
				width: 100% - @col00;
			}
		}
		
		span {
			display: block;

			&.bol-field {
				font-size: 13px;
				line-height: 18px;
				padding: 0 0 0 6px;
			}

			&.bol-label {
				font-size: 10px;
				line-height: 10px;
				color: darken(@blue, 20%);
				padding: 1px 0 0 6px;
			}
		}		
	}

	.col-height(@px, @brd: 1px) {
		height: @px;
		
		> .cwrap {
			.border-b(@brd);
			height: @px - @brd;
		}
	}

	.col {
		float: left;
	}
}