gaf-mobile/app/styles/modules/PaymentMethod.less

GAF mobile Web site

@import (reference) '../themes/variables';

@PaymentMethod-breakpoint: 345px;

.PaymentMethod {
	@this: PaymentMethod;

	.flex();
	.flex-align-items(center);
	padding: 16px 20px;
	border: 1px solid @quaternary-color-xxxxlight;
	border-radius: @border-radius;

	&-tick {
		.flex-basis(26px);
	}

	&-details {
		padding-left: 8px;
	}

	&-icon {
		.flex-basis(40px);
		.flex-shrink(0);
		padding-left: 16px;

		@media (max-width: @PaymentMethod-breakpoint) {
			padding-left: 8px;
		}

		svg {
			width: 40px;
			vertical-align: middle;
		}
	}

	&-title,
	&-desc {
		display: block;
	}

	&-title {
		font-weight: @type-weight-bold;
		letter-spacing: 2px;

		@media (max-width: @PaymentMethod-breakpoint) {
			font-size: @type-size-sml;
		}
	}

	&-desc {
		font-size: @type-size-sml;
		font-weight: @type-weight-regular;
	}

	&--simple {
		padding-left: 25px;
		padding-right: 25px;
		border: none;

		.@{this}-desc {
			color: @quaternary-color-xlight;
		}
	}
}