Unverified Commit 9e456fa0 authored by ggrund-tsi's avatar ggrund-tsi Committed by GitHub
Browse files

update style (#64)


Co-authored-by: default avatarGordon Grund <gordon.grund@outlook.de>
parent 244bba5d
...@@ -148,6 +148,9 @@ hr { ...@@ -148,6 +148,9 @@ hr {
font-size: 20px; font-size: 20px;
align-self: center; align-self: center;
text-align: center; text-align: center;
@include media-breakpoint-up(sm) {
justify-content: flex-end;
}
} }
#qr-code-container { #qr-code-container {
...@@ -176,7 +179,7 @@ hr { ...@@ -176,7 +179,7 @@ hr {
outline: 3px solid $info; outline: 3px solid $info;
} }
.qt-input:hover:not(:focus){ .qt-input:hover:not(:focus){
border: 1px solid $info; border: 1px solid $primary;
} }
.btn-primary:focus{ .btn-primary:focus{
border: 1px solid $info; border: 1px solid $info;
...@@ -184,22 +187,27 @@ hr { ...@@ -184,22 +187,27 @@ hr {
// box-shadow: 3px 3px px $info; // box-shadow: 3px 3px px $info;
outline: 4px solid $info!important; outline: 4px solid $info!important;
} }
.btn-primary:hover:not(:focus){ // .btn-primary:hover:not(:focus){
border: 1px solid $info; // border: 1px solid $info;
outline: 3px solid $info; // outline: 3px solid $info;
} // }
.btn-info{ .btn-info{
border: 1px solid $info; border: 1px solid $info;
color: black;
@include media-breakpoint-down(xs) {
padding-right: 15%;
}
} }
.btn-info:focus{ .btn-info:focus{
border: 1px solid $dark; border: 1px solid black;
box-shadow:none !important; box-shadow:none !important;
// box-shadow: 3px 3px px $info; // box-shadow: 3px 3px px $info;
outline: 3px solid $dark!important; outline: 3px solid $dark!important;
} }
.btn-info:hover:not(:focus){ .btn-info:hover:not(:focus){
border: 1px solid $dark; border: 1px solid black;
outline: 3px solid $dark; outline: 3px solid black;
} }
.btn-info::after{ .btn-info::after{
position: absolute; position: absolute;
...@@ -208,7 +216,7 @@ hr { ...@@ -208,7 +216,7 @@ hr {
right:8%; right:8%;
width: 0; width: 0;
height: 0; height: 0;
border: solid $dark; border: solid black;
border-width: 0 3px 3px 0; border-width: 0 3px 3px 0;
display: inline-block; display: inline-block;
padding: 4px; padding: 4px;
...@@ -284,18 +292,16 @@ hr { ...@@ -284,18 +292,16 @@ hr {
font-size: 22px; font-size: 22px;
} }
.data-label { .data-label {
font-size: 18px; font-size: 16px;
line-height: 22px;
} }
.input-label { .input-label {
font-size: 20px; font-size: 16px;
@include media-breakpoint-up(md) {
font-size: 20px;
}
} }
.txt-no-wrap{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.first-col-item { .first-col-item {
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
padding-left: 15px; padding-left: 15px;
...@@ -319,6 +325,14 @@ hr { ...@@ -319,6 +325,14 @@ hr {
justify-content: flex-start; justify-content: flex-start;
} }
} }
.jcc-xs-jcfe-md {
display: flex;
justify-content: center;
@include media-breakpoint-up(md) {
justify-content: flex-end;
}
}
.tac-xs-tal-md { .tac-xs-tal-md {
text-align: center; text-align: center;
......
...@@ -13,7 +13,7 @@ const CardFooter = (props: any) => { ...@@ -13,7 +13,7 @@ const CardFooter = (props: any) => {
<Row> <Row>
<Col xs='6' md='3' className='pl-0 pr-2'> <Col xs='6' md='3' className='pl-0 pr-2'>
<Button <Button
className='my-1 my-md-0' className=''
block block
onClick={props.handleCancel} onClick={props.handleCancel}
> >
...@@ -22,7 +22,7 @@ const CardFooter = (props: any) => { ...@@ -22,7 +22,7 @@ const CardFooter = (props: any) => {
</Col> </Col>
<Col xs='6' md='3' className='pr-0 pl-2'> <Col xs='6' md='3' className='pr-0 pl-2'>
<Button <Button
className='my-1 my-md-0 text-dark' className=''
variant='info' variant='info'
block block
type='submit' type='submit'
......
...@@ -11,10 +11,10 @@ const CardHeader = (props: any) => { ...@@ -11,10 +11,10 @@ const CardHeader = (props: any) => {
return (!props ? <></> : return (!props ? <></> :
<Card.Header id='data-header' className='p-3'> <Card.Header id='data-header' className='p-3'>
<Row> <Row>
<Col md='6' className='pl-0'> <Col md='6' className='px-0'>
<Card.Title className='m-md-0 tac-xs-tal-md jcc-xs-jcfs-md' as={'h3'} >{props.title}</Card.Title> <Card.Title className='m-md-0 tac-xs-tal-md jcc-xs-jcfs-md' as={'h3'} >{props.title}</Card.Title>
</Col> </Col>
<Col md='6' className='d-flex pr-0 justify-content-end'> <Col md='6' className='d-flex px-0 jcc-xs-jcfe-md'>
<Card.Text id='id-query-text'>{t('translation:query-id-card')}</Card.Text> <Card.Text id='id-query-text'>{t('translation:query-id-card')}</Card.Text>
</Col> </Col>
</Row> </Row>
......
...@@ -243,7 +243,7 @@ export const PersonInputs = (props: any) => { ...@@ -243,7 +243,7 @@ export const PersonInputs = (props: any) => {
{/* date of birth input */} {/* date of birth input */}
<Form.Group as={Row} controlId='formDateOfBirthInput' className='pb-3 mb-0'> <Form.Group as={Row} controlId='formDateOfBirthInput' className='pb-3 mb-0'>
<Form.Label className='input-label txt-no-wrap' column xs='5' sm='3'>{t('translation:date-of-birth') + '*'}</Form.Label> <Form.Label className='input-label ' column xs='5' sm='3'>{t('translation:date-of-birth') + '*'}</Form.Label>
<Col xs='7' sm='9' className='d-flex'> <Col xs='7' sm='9' className='d-flex'>
<DatePicker <DatePicker
......
...@@ -207,7 +207,7 @@ const RecordRecoveryCertData = (props: any) => { ...@@ -207,7 +207,7 @@ const RecordRecoveryCertData = (props: any) => {
{/* Date of First Positive Test Result */} {/* Date of First Positive Test Result */}
<Form.Group as={Row} controlId='formLastDateInput'className='pb-3 mb-0'> <Form.Group as={Row} controlId='formLastDateInput'className='pb-3 mb-0'>
<Form.Label className='input-label txt-no-wrap' column xs='5' sm='3'>{t('translation:first-positive-test-date') + '*'}</Form.Label> <Form.Label className='input-label ' column xs='5' sm='3'>{t('translation:first-positive-test-date') + '*'}</Form.Label>
<Col xs='7' sm='9' className='d-flex'> <Col xs='7' sm='9' className='d-flex'>
<DatePicker <DatePicker
...@@ -248,7 +248,7 @@ const RecordRecoveryCertData = (props: any) => { ...@@ -248,7 +248,7 @@ const RecordRecoveryCertData = (props: any) => {
{/* Date: Certificate Valid From - To */} {/* Date: Certificate Valid From - To */}
<Form.Group as={Row} controlId='formDateOfBirthInput'className='pb-3 mb-0'> <Form.Group as={Row} controlId='formDateOfBirthInput'className='pb-3 mb-0'>
<Form.Label className='input-label txt-no-wrap' column xs='5' sm='3'>{t('translation:cert-valid-from-to') + '*'}</Form.Label> <Form.Label className='input-label ' column xs='5' sm='3'>{t('translation:cert-valid-from-to') + '*'}</Form.Label>
<Col xs='7' sm='9' className='d-flex'> <Col xs='7' sm='9' className='d-flex'>
<DatePicker <DatePicker
......
...@@ -248,7 +248,7 @@ const RecordTestCertData = (props: any) => { ...@@ -248,7 +248,7 @@ const RecordTestCertData = (props: any) => {
{/* sampleDateTime */} {/* sampleDateTime */}
<Form.Group as={Row} controlId='formSampleDateTimeInput'className='pb-3 mb-0'> <Form.Group as={Row} controlId='formSampleDateTimeInput'className='pb-3 mb-0'>
<Form.Label className='input-label txt-no-wrap' column xs='5' sm='3'>{t('translation:sampleDateTime') + '*'}</Form.Label> <Form.Label className='input-label ' column xs='5' sm='3'>{t('translation:sampleDateTime') + '*'}</Form.Label>
<Col xs='7' sm='9' className='d-flex'> <Col xs='7' sm='9' className='d-flex'>
<DatePicker <DatePicker
...@@ -271,7 +271,7 @@ const RecordTestCertData = (props: any) => { ...@@ -271,7 +271,7 @@ const RecordTestCertData = (props: any) => {
{/* testDateTime */} {/* testDateTime */}
<Form.Group as={Row} controlId='formTestDateTimeInput'className='pb-3 mb-0'> <Form.Group as={Row} controlId='formTestDateTimeInput'className='pb-3 mb-0'>
<Form.Label className='input-label txt-no-wrap' column xs='5' sm='3'>{t('translation:testDateTime')}</Form.Label> <Form.Label className='input-label ' column xs='5' sm='3'>{t('translation:testDateTime')}</Form.Label>
<Col xs='7' sm='9' className='d-flex'> <Col xs='7' sm='9' className='d-flex'>
<DatePicker <DatePicker
......
...@@ -255,7 +255,7 @@ const RecordVaccinationCertData = (props: any) => { ...@@ -255,7 +255,7 @@ const RecordVaccinationCertData = (props: any) => {
{/* vacLastDate */} {/* vacLastDate */}
<Form.Group as={Row} controlId='formLastDateInput'className='pb-3 mb-0'> <Form.Group as={Row} controlId='formLastDateInput'className='pb-3 mb-0'>
<Form.Label className='input-label txt-no-wrap' column xs='5' sm='3'>{t('translation:vac-last-date') + '*'}</Form.Label> <Form.Label className='input-label ' column xs='5' sm='3'>{t('translation:vac-last-date') + '*'}</Form.Label>
<Col xs='7' sm='9' className='d-flex'> <Col xs='7' sm='9' className='d-flex'>
<DatePicker <DatePicker
......
...@@ -151,7 +151,7 @@ const ShowCertificate = (props: any) => { ...@@ -151,7 +151,7 @@ const ShowCertificate = (props: any) => {
<Row> <Row>
<Col xs='6' md='4' className='pl-0 pr-2'> <Col xs='6' md='4' className='pl-0 pr-2'>
<Button <Button
className='my-1 my-md-0' className=''
block block
onClick={handleBack} onClick={handleBack}
> >
...@@ -160,7 +160,7 @@ const ShowCertificate = (props: any) => { ...@@ -160,7 +160,7 @@ const ShowCertificate = (props: any) => {
</Col> </Col>
<Col xs='6' md='3' className='pr-0 pl-2'> <Col xs='6' md='3' className='pr-0 pl-2'>
<Button <Button
className='my-1 my-md-0 text-dark' className=''
variant='info' variant='info'
block block
onClick={finishProcess} onClick={finishProcess}
......
$primary: #004494;
.loader, .loader,
.loader:before, .loader:before,
.loader:after { .loader:after {
border-radius: 50%; border-radius: 50%;
} }
.loader { .loader {
color: #e91dca; color: $primary;
font-size: 11px; font-size: 11px;
text-indent: -99999em; text-indent: -99999em;
margin: 55px auto; margin: 55px auto;
......
...@@ -191,7 +191,7 @@ export const ShowCertificateData = (props: any) => { ...@@ -191,7 +191,7 @@ export const ShowCertificateData = (props: any) => {
<Card.Text className='data-header-title jcc-xs-jcfs-sm' >{dataSet.title}</Card.Text> <Card.Text className='data-header-title jcc-xs-jcfs-sm' >{dataSet.title}</Card.Text>
{dataSet.entries.map((entry) => { {dataSet.entries.map((entry) => {
return entry.data return entry.data
? <Card.Text key={JSON.stringify(entry)} className='data-label jcc-xs-jcfs-sm mb-1' >{`${entry.label}: ${entry.data}`}</Card.Text> ? <Card.Text key={JSON.stringify(entry)} className='data-label jcc-xs-jcfs-sm mb-2' >{`${entry.label}: ${entry.data}`}</Card.Text>
: <React.Fragment key={JSON.stringify(entry)} /> : <React.Fragment key={JSON.stringify(entry)} />
})} })}
</div> </div>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment