Skip to content

Instantly share code, notes, and snippets.

@lccalluchi

lccalluchi/index.css

Created October 17, 2023 14:18
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save lccalluchi/5baef14e39d2ebfaddacf06d237efc5e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save lccalluchi/5baef14e39d2ebfaddacf06d237efc5e to your computer and use it in GitHub Desktop.
Download ZIP
Estilos para formulario - Payme “Pay-me flex”
Raw
index.css
div.flex-capture div.field>label {
display: block;
}
div.flex-capture form {
font-family: var(--font-upch);
}
div.flex-capture .submit>button:disabled {
background: #ced4da !important;
border: 1px solid #ced4da !important;
}
div.flex-capture .submit>button {
background: #B01333 !important;
border: 1px solid #B01333 !important;
color: white !important;
border-radius: 0.45rem !important;
transition: all 0.3s linear;
width: 100%;
padding-bottom: 5px;
padding-top: 5px;
}
div.flex-capture .error-message {
color: rgba(220, 53, 69, 1) !important;
}
div.flex-capture div.field>input {
color: #788087;
background-color: #ebebeb;
border: 2px solid transparent;
height: 55px;
padding-left: 20px;
vertical-align: middle;
border-radius: 10px;
display: block;
width: 100%;
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
&:focus {
color: #788087;
background-color: #ebebeb;
border: 2px solid transparent;
height: 55px;
padding-left: 20px;
vertical-align: middle;
border-radius: 10px;
}
}
div.flex-capture div.field {
margin-bottom: 1rem !important;
}
div.form-wrapper>h2 {
display: none !important;
}
div.flex-capture pre {
visibility: hidden !important;
}
.payment {
color: #686868;
}
.cabeceraPayment {
background: #AF1134;
height: 80px;
position: relative;
margin-bottom: 45px;
}
.tarjetaContent {
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #F8F8F8;
}
.tarjetaTitle {
font-size: 20px;
font-weight: 600;
text-align: center;
}
/* Estilo base del botón de radio */
.radio-button {
display: none;
/* Oculta el botón de radio original */
position: relative;
}
/* Estilo del indicador */
.radio-button+label::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid #ccc;
/* Color del borde del indicador */
border-radius: 50%;
margin-right: 5px;
vertical-align: middle;
}
/* Estilo del borde exterior */
/*
/* Estilo del indicador cuando está seleccionado */
.radio-button:checked+label::before {
background-color: #AF1134;
/* Cambia el color de fondo del indicador seleccionado */
border: 3px solid #e2e2e2;
/* Cambia el color del borde del indicador seleccionado */
}
.field.field-v_expirydate,
.field.field-v_cvv2 {
width: 49%;
/* Agrega un margen derecho para separar los campos */
}
@media (max-width:380px) {
.field.field-v_expirydate,
.field.field-v_cvv2 {
width: 100%;
}
}
.field.field-v_expirydate {
margin-right: 5px;
}
div.flex-capture pre {
display: none;
}
.field.field-v_pan {
width: 100%;
}
.iconoPayment {
background-image: url('./../../../assets/iconos/logopayme.png');
background-size: 200px auto;
/* Reduzca el ancho de la imagen al 50% y mantenga la altura automática */
background-position: center bottom;
/* Mueva la imagen al centro horizontal y al borde derecho vertical */
background-repeat: no-repeat;
/* Evita la repetición de la imagen de fondo */
}
@media (max-width:380px) {
.iconoPayment {
background-size: 100px auto;
}
}
/* Alineación de los campos horizontalmente */
.field {
display: inline-block;
vertical-align: top;
}
/* Estilo del botón (ajustar según tus necesidades) */
.submit button {
background-color: #007bff;
/* Color de fondo del botón */
color: #fff;
/* Color del texto del botón */
border: none;
/* Eliminar el borde del botón */
padding: 10px 20px;
/* Espaciado interno del botón */
cursor: pointer;
}
/* Estilo del botón cuando está deshabilitado */
.submit button:disabled {
background-color: #ccc;
/* Color de fondo del botón deshabilitado */
color: #888;
/* Color del texto del botón deshabilitado */
cursor: not-allowed;
}
.cabeceraPayment:after {
position: absolute;
content: "";
bottom: -90px;
height: 90px;
width: 90px;
background: red;
left: 50%;
/* Centra horizontalmente */
transform: translate(-50%, -50%);
border-radius: 50%;
border: 5px solid #fff;
/* background-image: url('https://s3.amazonaws.com/ecosistema.documentos.upch/logo/logo_oficial_upch.png'); */
background-image: url('https://s3.amazonaws.com/ecosistema.documentos.upch/logo/logo_escudo_upch.png');
background-size: cover;
}
/* Payment.css */
div.flex-capture div.field>label {
display: block;
font-size: 14px;
font-weight: 600;
color: #686868;
margin-bottom: 0.25rem !important;
}
div.flex-capture .submit>button:disabled {
background: #ced4da !important;
border: 1px solid #ced4da !important;
}
div.flex-capture .submit>button {
background: #B01333 !important;
border: 1px solid #B01333 !important;
color: white !important;
border-radius: 0.45rem !important;
transition: all 0.3s linear;
margin-top: 1rem;
width: 100%;
padding: 0 30px;
height: 60px;
}
div.flex-capture .error-message {
color: rgba(220, 53, 69, 1) !important;
}
div.flex-capture div.field>input {
color: #788087;
background-color: #ebebeb;
border: 2px solid transparent;
height: 55px;
padding-left: 20px;
vertical-align: middle;
border-radius: 10px;
display: block;
width: 100%;
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
}
div.flex-capture div.field {
margin-bottom: 12px;
}
div.form-wrapper>h2 {
display: none !important;
}
div.flex-capture pre {
visibility: hidden !important;
}
.cabeceraPayment {
background: #AF1134;
height: 80px;
position: relative;
margin-bottom: 45px;
}
.tarjetaContent {
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #F8F8F8;
}
.tarjetaTitle {
font-size: 20px;
font-weight: 600;
text-align: center;
}
/* Estilo base del botón de radio */
.radio-button {
display: none;
/* Oculta el botón de radio original */
position: relative;
}
/* Estilo del indicador */
.radio-button+label::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid #ccc;
/* Color del borde del indicador */
border-radius: 50%;
margin-right: 5px;
vertical-align: middle;
}
/* Estilo del borde exterior */
/*
/* Estilo del indicador cuando está seleccionado */
.radio-button:checked+label::before {
background-color: #AF1134;
/* Cambia el color de fondo del indicador seleccionado */
border: 3px solid #e2e2e2;
/* Cambia el color del borde del indicador seleccionado */
}
.field.field-v_expirydate,
.field.field-v_cvv2 {
width: 49%;
/* Agrega un margen derecho para separar los campos */
}
@media (max-width:380px) {
.field.field-v_expirydate,
.field.field-v_cvv2 {
width: 100%;
}
}
.field.field-v_expirydate {
margin-right: 5px;
}
div.flex-capture pre {
display: none;
}
.field.field-v_pan {
width: 100%;
}
.iconoPayment {
background-image: url('./../../../assets/iconos/logopayme.png');
background-size: 200px auto;
/* Reduzca el ancho de la imagen al 50% y mantenga la altura automática */
background-position: center bottom;
/* Mueva la imagen al centro horizontal y al borde derecho vertical */
background-repeat: no-repeat;
/* Evita la repetición de la imagen de fondo */
}
@media (max-width:380px) {
.iconoPayment {
background-size: 100px auto;
}
}
/* Alineación de los campos horizontalmente */
.field {
display: inline-block;
vertical-align: top;
}
/* Estilo del botón (ajustar según tus necesidades) */
.submit button {
background-color: #007bff;
/* Color de fondo del botón */
color: #fff;
/* Color del texto del botón */
border: none;
/* Eliminar el borde del botón */
padding: 10px 20px;
/* Espaciado interno del botón */
cursor: pointer;
}
/* Estilo del botón cuando está deshabilitado */
.submit button:disabled {
background-color: #ccc;
/* Color de fondo del botón deshabilitado */
color: #888;
/* Color del texto del botón deshabilitado */
cursor: not-allowed;
}
.cabeceraPayment:after {
position: absolute;
content: "";
bottom: -90px;
height: 90px;
width: 90px;
background: red;
left: 50%;
/* Centra horizontalmente */
transform: translate(-50%, -50%);
border-radius: 50%;
border: 5px solid #fff;
/* background-image: url('https://s3.amazonaws.com/ecosistema.documentos.upch/logo/logo_oficial_upch.png'); */
background-image: url('https://s3.amazonaws.com/ecosistema.documentos.upch/logo/logo_escudo_upch.png');
background-size: cover;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment