/*——————–
VARIABLES COMPARTIDAS
——————–*/
$red: #E91E63;
$azul: #3F51B5;
$grey: #EAE8E9;
$grey2: #f3f3f3;
$blanco: #FFF;
/*——————–
GENERAL
——————–*/
*,
*:antes de,
*:después {
tamaño de caja: heredar;
}
html {
tamaño de caja: caja de borde;
altura: 100%;
desbordamiento: oculto;
}
cuerpo {
fondo: #f2f2f2;
familia de fuentes: 'Roboto', verdana, sans-serif;
altura: 100%;
}
h1 {
tamaño de fuente: 1.5em;
peso de fuente: 100;
}
#cardForm {
altura: 100%;
pantalla: flex;
justificar-contenido: centro;
alinear-elementos: centro;
}
/*——————–
FORMA DE PANEL
——————–*/
.panel {
fondo: $white;
ancho: 80%;
caja-sombra: 0 2px 2px 0 rgba (0, 0, 0, .16), 0 0 2px 0 rgba (0, 0, 0, .12);
}
.panel__header {
fondo: $blue;
color: $white;
}
.panel__header,
.panel__footer {
acolchado: 1em 2em;
}
.panel__footer {
fondo: $grey2;
}
.panel__content {
acolchado: 1em 2em;
desbordamiento: oculto;
}
.textfield – float-label {
ancho: 50%;
flotador izquierdo;
pantalla: bloque en línea;
padding-right: 5px;
}
.hosted-field-label {
transformar: translateY (0.4em);
tamaño de fuente: 1.125em;
altura de línea: 32px;
transición: todos los .15s de fácil salida;
bloqueo de pantalla;
ancho: 100%;
peso de fuente: 400;
desbordamiento: oculto;
margen inferior: 0.5em;
& .label-float {
desbordamiento de texto: puntos suspensivos;
color: #2196F3;
transición: todos los .15s de salida fácil
}
&. fill {
@extend .label-float;
color: rgba (0, 0, 0, .54);
}
& .invalid {
@extend .label-float;
color: #F44336;
}
}
span.icon {
posición: relativa;
superior: 0.2em;
margen derecho: 0.2em;
}
svg {
llenar: #333;
}
.hosted-field {
altura: 32px;
margen inferior: 1em;
bloqueo de pantalla;
color de fondo: transparente;
color: rgba (0, 0, 0, .87);
borde: ninguno;
borde inferior: 1px rgba sólido (0, 0, 0, .26);
contorno: 0;
ancho: 100%;
tamaño de fuente: 16px;
acolchado: 0;
sombra de caja: ninguna;
radio de borde: 0;
posición: relativa;
}
.pay-button {
fondo: #E91E63;
color: #fff;
margen: 0 automático;
borde: 0;
radio del borde: 3px;
acolchado: 1em 3em;
tamaño de fuente: 1em;
text-transform: mayúsculas;
caja-sombra: 0 0 2px rgba (0, 0, 0, .12), 0 2px 2px rgba (0, 0, 0, .2);
}
/*——————–
BT ESPECÍFICO DE CAMPOS ALOJADOS
——————–*/
.braintree-alojado-campos-centrado {
borde inferior: 2px sólido $blue;
transición: todos los 200ms de facilidad;
}
.braintree-hosts-fields-invalid {
borde inferior: 2px sólido $red;
transición: todos los 200ms de facilidad;
}
/*———————
Preguntas de los medios
———————-*/
@media (ancho máximo: 600 px) {
html {
desbordamiento: automático;
}
#cardForm {
altura: auto;
margen: 2em;
tamaño de fuente: 13px;
}
.panel {
ancho: 100%;
}
.textfield – float-label {
ancho: 100%;
flotar: ninguno;
pantalla: bloque en línea;
}
.pay-button {
ancho: 100%;
}
}