芝麻web文件管理V1.00

编辑当前文件:/home/digitalh/tricomgroupbd.com/assets/sass/component/_checkout.scss

/*-------------------------------------------------------
20. Checkout css
---------------------------------------------------------*/

.checkout-wrapper {
    display: flex;
    justify-content: center;
    animation: slideUp 2000ms ease;
}

@keyframes slideUp {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
        visibility: visible;
    }

100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

.checkout {
	h2 {
		align-self: center;
	}
}

.checkout {
	background-color: var(--clr-def);
    -webkit-box-shadow: 9px 13px 25px 0px rgba(0, 0, 0, 0.18);
    -moz-box-shadow: 9px 13px 25px 0px rgba(0, 0, 0, 0.18);
    box-shadow: 9px 13px 25px 0px rgba(0, 0, 0, 0.18);
	border-radius: 1rem;
    padding: 6rem 4rem;
	input {
		width: 100%;
		min-height: 25px;
		border: 0;
		font-size: 1.5rem;
		letter-spacing: .15rem;
		color: var(--clr-heading);
		border-radius: 10px;
		margin-bottom: 2rem;
	}

label {
		text-transform: uppercase;
		font-size: 15px;
		letter-spacing: 2px;
		color: var(--clr-white);
		margin-bottom: 1rem;
	}

h2 {
		font-size: 24px;
		line-height: 1;
		color: var(--clr-white);
		letter-spacing: 1px;
	}
}

.name {
    justify-content: space-between;
    display: flex;
    width: 100%;
    div {
        width: 45%;
    }
}

.address-info {
    display: flex;
    justify-content: space-between;

div {
        width: 30%;
    }
}

.cc-info {
    display: flex;
    justify-content: space-between;

div {
        width: 45%;
    }
}

.btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
	margin-top: 2rem;
    button {
		margin: 0;
		color: var(--clr-def);
		background-color: var(--clr-white);
		text-transform: uppercase;
		border: 0;
		border-radius: 1rem;
		letter-spacing: -1px;
		font-weight: 600;
		padding: 1.2rem 3rem;
		line-height: 1;
        &:hover {
            animation-name: btn-hov;
            animation-duration: 550ms;
            animation-fill-mode: forwards;
        }
    }
}

@keyframes btn-hov {
    100% {
        background-color: #cfc9e1;
        color: #4a3b76;
        transform: scale(1.05)
    }
}

input:focus,
button:focus {
    outline: none;
	box-shadow: none;
}

.p-info {
	font-size: 24px;
    line-height: 1;
    color: var(--clr-white);
    letter-spacing: 1px;
    margin-top: 3rem;
    margin-bottom: 2rem;
}

@media (max-width: 736px) {
    .checkout-wrapper {
        width: 100%;
    }

.btns {
        flex-direction: column;
        button {
            width: 100%;
        }
    }

.checkout h2 {
        text-align: center;
		line-height: 1.4;
    }

.name,
    .address-info,
    .cc-info {
        flex-direction: column;
        width: 100%;
        justify-content: space-between;
        div {
            align-items: center;
            flex-direction: column;
            width: 100%;
            display: flex;
        }
    }

.street,
    .cc-num {
        text-align: center;
    }

.checkout input {
        margin: 5px 0;
        min-height: 30px;
    }
}

芝麻web文件管理V1.00

Oops! Page not found.