141 lines
3.2 KiB
SCSS
141 lines
3.2 KiB
SCSS
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100&display=swap');
|
|
.tinder-container {
|
|
height: 85vh;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.noselect {
|
|
-webkit-touch-callout: none; /* iOS Safari */
|
|
-webkit-user-select: none; /* Safari */
|
|
-khtml-user-select: none; /* Konqueror HTML */
|
|
-moz-user-select: none; /* Old versions of Firefox */
|
|
-ms-user-select: none; /* Internet Explorer/Edge */
|
|
user-select: none; /* Non-prefixed version, currently
|
|
supported by Chrome, Edge, Opera and Firefox */
|
|
}
|
|
|
|
.card-container {
|
|
position: relative;
|
|
display: flex;
|
|
height: 100%;
|
|
width: 300px;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.text {
|
|
font-family: 'Raleway';
|
|
font-weight: bold;
|
|
text-align: center;
|
|
color: black;
|
|
font-size: 20px;
|
|
margin: 0;
|
|
}
|
|
|
|
|
|
.swipe {
|
|
margin-top: 15%;
|
|
display: flex;
|
|
gap: 5px;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: absolute;
|
|
width: 100%;
|
|
/* max-width: 300px; */
|
|
/* max-height: 400px; */
|
|
cursor: pointer;
|
|
border-radius: 10px;
|
|
background-color: #fff;
|
|
transition: transform 0.05s ease-in-out, opacity 0.05s ease-in-out;
|
|
}
|
|
|
|
.swipe-left {
|
|
transform: translateX(-10%) rotate(-20deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
.swipe-right {
|
|
transform: translateX(10%) rotate(20deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
|
|
.card {
|
|
height: 500px;
|
|
width: 100%;
|
|
max-width: 300px;
|
|
max-height: 500px;
|
|
border-radius: 10px;
|
|
background-size: cover;
|
|
background-position: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
align-items: flex-end;
|
|
align-content: center;
|
|
flex-wrap: wrap;
|
|
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
|
|
background-color: #fff;
|
|
&__choise_img {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
&__img {
|
|
height: 300px;
|
|
width: 245px;
|
|
border-radius: 10px;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
&__description_container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 150px;
|
|
}
|
|
}
|
|
|
|
.card-content {
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 300px;
|
|
height: 500px;
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.infoText {
|
|
margin-top: 16px;
|
|
}
|
|
.tinder__flex {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
background: linear-gradient(180deg, #7EAFE7 0.27%, rgba(41, 134, 242, 0.38) 27.08%, rgba(41, 134, 242, 0.35) 31.77%, rgba(152, 198, 253, 0.28) 46.35%, rgba(41, 134, 242, 0.00) 100%);
|
|
|
|
}
|
|
.btn__container_tinder {
|
|
width: 150px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
margin: 0 14px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.btn__tinder {
|
|
height: 69px;
|
|
width: 69px;
|
|
background-color: #fff;
|
|
border: none;
|
|
} |