src/components/Form/Telephone/Telephone.scss
.telephone {
display: inline-block;
.telephone-number-fields {
display: table-row;
}
.telephone-number-fields-main,
.telephone-number-fields-extension,
.telephone-number-fields-na {
display: inline-block;
}
.numbers {
> label {
font-weight: bold;
}
}
.number {
position: relative;
&.three {
width: 8rem;
}
&.four {
width: 9rem;
}
&.six {
width: 10rem;
}
&.ten {
width: 30rem;
}
label {
position: absolute;
top: -27px;
min-height: 2.7rem;
}
}
.separator {
font-size: 2rem;
line-height: 2rem;
}
.separator.extension {
padding-left: 1rem;
padding-right: 1rem;
}
.separator.pound {
padding-left: 1rem;
}
.number,
.nonumber,
.separator {
display: table-cell;
vertical-align: middle;
padding-right: 0.3rem;
}
.nonumber .checkbox {
margin: 0;
}
.type {
margin-bottom: 2rem;
span {
margin-left: 1rem;
margin-right: 1.5rem;
}
a {
font-weight: 600;
}
}
.timeofday {
margin-bottom: 2rem;
margin-left: 1.5rem;
z-index: 1;
.time {
display: inline-block;
margin-right: 2rem;
}
}
.phonetype-option.block label {
height: auto !important;
width: 8.7rem !important;
}
}
@media only screen and (max-width: 1000px) {
.teleohone .telephone-number-fields-main,
.telephone .telephone-number-fields-extension {
display: block;
}
.telephone-number-fields-main {
margin-bottom: 3rem;
}
.telephone-number-fields-extension {
margin-bottom: 2rem;
}
.telephone-number-fields-extension .separator.pound {
padding-left: 0;
}
.telephone .timeofday .time {
margin-right: 1.5rem;
}
.phonetype .phonetype-option {
display: block;
}
}