You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

203 lines
4.0 KiB

.mobile-qr-scan {
width: 100vw;
max-width: 1250px;
margin: 0px auto;
padding: 0px 10px 40px;
direction: rtl;
padding-top: 70px;
overflow-x: hidden;
&__back {
justify-content: flex-end;
a {
display: inline;
font-family: numeralLight;
text-decoration: none;
padding: 5px 20px 3px;
background-color: #00cc69;
border-radius: 25px;
font-size: calc(100vw / 26);
color: white;
&:focus:enabled {
text-decoration: none;
}
}
}
&__header {
width: 100%;
h1 {
font-family: numeralBold;
color: #4ce1be;
font-size: calc(100vw / 13);
}
p {
text-align: justify;
font-family: numeralMedium;
color: #4ce1be;
font-size: calc(100vw / 28);
}
}
&__select {
select {
margin-top: 10px;
border-radius: 4px;
position: relative;
background-color: #efefef;
border: 1px solid #a5a5a5;
font-size: 16px;
color: black;
// maxWidth : 70;
min-width: 80;
height: 35px;
padding: 5px;
font-family: numeralLight;
&:focus {
border-radius: 4;
}
}
}
&__camera {
margin-top: 20px;
width: 100%;
border-radius: 10px;
margin: 30px auto;
position: relative;
&--shape {
position: absolute;
background-color: rgba(0, 0, 0, 0.8);
}
&--shapeTop {
width: calc(100% - 60px);
height: 30px;
left: 30px;
top: 0px;
}
&--shapeBottom {
width: calc(100% - 60px);
height: 30px;
left: 30px;
bottom: 0px;
}
&--shapeLeft {
width: 30px;
height: 100%;
left: 0px;
bottom: 0px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
&--shapeRight {
width: 30px;
height: 100%;
right: 0px;
bottom: 0px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
&--shapeCenter {
position: absolute;
width: calc(100% - 60px);
height: calc(100% - 60px);
right: 30px;
bottom: 30px;
border: 3px solid red;
}
}
&__text {
text-align: justify;
font-family: numeralMedium;
color: #4ce1be;
font-size: calc(100vw / 28);
}
&__lasts {
width: 100%;
margin: 30px 0px;
h2 {
font-family: numeralBold;
color: #02a255;
font-size: calc(100vw / 24);
margin-bottom: 20px;
}
}
}
.qr-scan {
width: 100vw;
max-width: 1250px;
min-height: calc(100vh - 288px);
margin: 0px auto;
padding: 0px 10px;
direction: rtl;
overflow-x: hidden;
padding-top: 80px;
&__back {
justify-content: flex-start;
a {
display: inline;
font-family: numeralLight;
text-decoration: none;
padding: 5px 20px 3px;
background-color: #00cc69;
border-radius: 25px;
font-size: calc(100vw / 70);
color: white;
&:focus:enabled {
text-decoration: none;
}
}
}
&__box {
width: 100%;
max-width: 700px;
&--header {
width: 100%;
h1 {
font-family: numeralBold;
color: #00cc69;
}
p {
font-family: numeralLight;
color: #4d4d4f;
}
}
&--select {
select {
margin-top: 10px;
border-radius: 4px;
position: relative;
background-color: #efefef;
border: 1px solid #a5a5a5;
font-size: 16px;
color: black;
// maxWidth : 70;
min-width: 80;
height: 35px;
padding: 5px;
font-family: numeralLight;
&:focus {
border-radius: 4;
}
}
}
&--camera {
margin-top: 20px;
width: 100%;
max-width: 300px;
margin: 0px auto 40px;
* {
border-radius: 10px;
}
}
&--text {
margin-top: 30px;
width: 100%;
p {
font-family: numeralLight;
color: #4d4d4f;
}
}
p {
font-family: numeralLight;
color: #4d4d4f;
}
}
}