added messages section
This commit is contained in:
andmironov
parent
c2c99ed933
commit
71e6aaf371
300
src/css/main.css
300
src/css/main.css
|
|
@ -2077,6 +2077,24 @@ input.email-form__input--email:disabled {
|
|||
top: 0;
|
||||
margin: 0 0 0 -407px; }
|
||||
|
||||
.slide__bg-area {
|
||||
position: absolute;
|
||||
background-color: white;
|
||||
opacity: 0;
|
||||
left: 50%;
|
||||
top: -88px;
|
||||
margin: 0 0 0 -200px;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
border-radius: 50%;
|
||||
-ms-transform: scale(0.1);
|
||||
transform: scale(0.1);
|
||||
animation-timing-function: ease;
|
||||
animation-name: pulsateArea;
|
||||
animation-duration: 3.4s;
|
||||
animation-delay: 2.3s;
|
||||
animation-iteration-count: infinite; }
|
||||
|
||||
.slide.slide--five .slide__bg-icon {
|
||||
position: absolute;
|
||||
top: 86px;
|
||||
|
|
@ -2088,6 +2106,7 @@ input.email-form__input--email:disabled {
|
|||
background: #68C0F8;
|
||||
box-shadow: 0 2px 9px 0 rgba(57, 80, 164, 0.69);
|
||||
position: relative;
|
||||
animation-timing-function: cubic-bezier(0.685, 0, 0.025, 1.185);
|
||||
animation-name: pulsate;
|
||||
animation-duration: 3.4s;
|
||||
animation-iteration-count: infinite; }
|
||||
|
|
@ -2183,6 +2202,14 @@ input.email-form__input--email:disabled {
|
|||
transform: scale(1);
|
||||
box-shadow: 0 2px 9px 0 rgba(57, 80, 164, 0.69); } }
|
||||
|
||||
@keyframes pulsateArea {
|
||||
0% {
|
||||
transform: scale(0.1);
|
||||
opacity: .1; }
|
||||
100% {
|
||||
transform: scale(1.4);
|
||||
opacity: 0; } }
|
||||
|
||||
@media (max-width: 1140px) {
|
||||
.slide.slide--five .slide__inner {
|
||||
width: 860px;
|
||||
|
|
@ -2221,6 +2248,279 @@ input.email-form__input--email:disabled {
|
|||
width: 100%;
|
||||
border-radius: 0; } }
|
||||
|
||||
.slide.slide--six {
|
||||
padding: 40px 0 40px 0;
|
||||
margin: 0 0 0 0; }
|
||||
|
||||
.slide--shown {
|
||||
-ms-transform: scale(1);
|
||||
transform: scale(1);
|
||||
opacity: 1; }
|
||||
|
||||
.slide.slide--six .slide__footer {
|
||||
width: 450px; }
|
||||
|
||||
.messages {
|
||||
margin: 50px auto 30px;
|
||||
width: 880px;
|
||||
height: 600px;
|
||||
position: relative;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
-ms-flex-line-pack: start;
|
||||
align-content: flex-start;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between; }
|
||||
|
||||
.message {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
-ms-flex-line-pack: start;
|
||||
align-content: flex-start;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
transition: transform .6s ease, opacity .4s ease;
|
||||
transition-delay: .1s; }
|
||||
|
||||
.message.message--outcoming {
|
||||
-ms-flex-direction: row-reverse;
|
||||
flex-direction: row-reverse;
|
||||
transform: translate3d(10px, 20px, 0) scale(0.9) rotate(0); }
|
||||
|
||||
.message.message--incoming {
|
||||
transform: translate3d(-10px, 20px, 0) scale(0.9) rotate(0); }
|
||||
|
||||
.message.message--one {
|
||||
top: 120px;
|
||||
left: 0;
|
||||
transition-delay: .2s; }
|
||||
|
||||
.message.message--two {
|
||||
top: 0;
|
||||
left: 200px;
|
||||
transition-delay: .3s; }
|
||||
|
||||
.message.message--three {
|
||||
top: 135px;
|
||||
right: 140px;
|
||||
transition-delay: .4s; }
|
||||
|
||||
.message.message--four {
|
||||
top: 220px;
|
||||
left: 160px;
|
||||
transition-delay: .5s; }
|
||||
|
||||
.message.message--five {
|
||||
top: 355px;
|
||||
left: 0px;
|
||||
transition-delay: .6s; }
|
||||
|
||||
.message.message--six {
|
||||
top: 365px;
|
||||
right: 0;
|
||||
transition-delay: .7s; }
|
||||
|
||||
.message.message--seven {
|
||||
top: 365px;
|
||||
right: 320px;
|
||||
transition-delay: .8s; }
|
||||
|
||||
.slide--shown .message.message--outcoming,
|
||||
.slide--shown .message.message--incoming {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
|
||||
|
||||
.message__avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 4px 18px 0 rgba(189, 208, 223, 0.26);
|
||||
background-color: white;
|
||||
background-size: 36px;
|
||||
margin: 0 8px; }
|
||||
|
||||
.message--one .message__avatar {
|
||||
background-image: url(../img/new-site/face1@2x.png); }
|
||||
|
||||
.message--two .message__avatar {
|
||||
background-image: url(../img/new-site/face2@2x.png); }
|
||||
|
||||
.message--three .message__avatar {
|
||||
background-image: url(../img/new-site/face3@2x.png); }
|
||||
|
||||
.message--four .message__avatar {
|
||||
background-image: url(../img/new-site/face4@2x.png); }
|
||||
|
||||
.message--five .message__avatar {
|
||||
background-image: url(../img/new-site/face5@2x.png); }
|
||||
|
||||
.message--six .message__avatar {
|
||||
background-image: url(../img/new-site/face6@2x.png); }
|
||||
|
||||
.message--seven .message__avatar {
|
||||
background-image: url(../img/new-site/face7@2x.png); }
|
||||
|
||||
.message__bubble {
|
||||
background-color: white;
|
||||
box-shadow: 0 4px 18px 0 rgba(189, 208, 223, 0.26);
|
||||
border-radius: 8px;
|
||||
max-width: 204px; }
|
||||
|
||||
.message__name {
|
||||
font-size: 14px;
|
||||
color: #939BA1;
|
||||
padding: 12px 12px 2px 12px; }
|
||||
|
||||
.message__text {
|
||||
padding: 0 12px 8px 12px;
|
||||
font-size: 15px;
|
||||
color: #000; }
|
||||
|
||||
.message__location {
|
||||
width: 180px;
|
||||
height: 60px;
|
||||
background-size: cover;
|
||||
background-image: url(../img/new-site/location@2x.png);
|
||||
margin: 0 12px 12px 12px; }
|
||||
|
||||
.message__player {
|
||||
width: 162px;
|
||||
height: 52px;
|
||||
background-size: cover;
|
||||
background-image: url(../img/new-site/player@2x.png);
|
||||
margin: 0 12px 12px 12px; }
|
||||
|
||||
.message__transaction {
|
||||
width: 180px;
|
||||
padding: 0 12px 12px 12px; }
|
||||
|
||||
.message__transaction__amount {
|
||||
font-size: 25px;
|
||||
font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
|
||||
|
||||
.message__transaction__amount .currency {
|
||||
color: #C2C4CB;
|
||||
letter-spacing: 2px; }
|
||||
|
||||
.message__transaction__details {
|
||||
padding: 8px 0 0 0; }
|
||||
|
||||
.message__transaction__details .text-gray {
|
||||
display: inline-block;
|
||||
color: #C2C4CB;
|
||||
width: 44px; }
|
||||
|
||||
.message__custom {
|
||||
margin: 0 12px 12px 12px;
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
border: 1px dashed #6E97E9;
|
||||
border-radius: 8px;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center; }
|
||||
|
||||
.message__custom__icon-wrap {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
background-color: #E0E9F9;
|
||||
border-radius: 50%;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center; }
|
||||
|
||||
.message__custom__icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-image: url(../img/new-site/icon-plus.svg);
|
||||
background-size: 24px; }
|
||||
|
||||
.message__custom__text {
|
||||
text-align: center;
|
||||
color: #95A3AD;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
padding: 4px 16px 0; }
|
||||
|
||||
.message__bubble-footer {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center; }
|
||||
|
||||
.message__bubble-footer.message__bubble-footer--button {
|
||||
color: white;
|
||||
background-color: #6E97E9;
|
||||
border-radius: 0px 0px 8px 8px; }
|
||||
|
||||
.message__bubble-footer.message__bubble-footer--status {
|
||||
border-top: 1px solid #E8EBEC;
|
||||
color: #6E97E9;
|
||||
border-radius: 0px 0px 8px 8px; }
|
||||
|
||||
@media (max-width: 922px) {
|
||||
.messages {
|
||||
margin: 50px auto 30px;
|
||||
width: 748px;
|
||||
height: 620px; }
|
||||
.message.message--three {
|
||||
right: 30px;
|
||||
top: 55px; }
|
||||
.message.message--four {
|
||||
left: 170px;
|
||||
top: 225px; }
|
||||
.message.message--five {
|
||||
left: 0;
|
||||
top: 355px; }
|
||||
.message.message--six {
|
||||
top: 255px; }
|
||||
.message.message--seven {
|
||||
right: 210px;
|
||||
top: 405px; } }
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.slide.slide--six {
|
||||
padding: 0; }
|
||||
.messages {
|
||||
margin: 20px auto 10px;
|
||||
width: 375px;
|
||||
padding: 0 10px; }
|
||||
.message.message--one {
|
||||
left: 0;
|
||||
top: 0; }
|
||||
.message.message--two {
|
||||
display: none; }
|
||||
.message.message--three {
|
||||
right: 0;
|
||||
top: 88px; }
|
||||
.message.message--four {
|
||||
display: none; }
|
||||
.message.message--five {
|
||||
left: 0;
|
||||
top: 278px; }
|
||||
.message.message--six {
|
||||
display: none; }
|
||||
.message.message--seven {
|
||||
right: 0px;
|
||||
top: 406px; } }
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.messages {
|
||||
width: auto; } }
|
||||
|
||||
.footer {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
|
|
@ -1 +1 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>icon_yt</title><path d="M10.142 14.356l-.001-5.057 4.864 2.537-4.863 2.52zM20.82 8.422s-.176-1.24-.715-1.786c-.685-.717-1.452-.72-1.804-.763-2.519-.182-6.297-.182-6.297-.182h-.008s-3.778 0-6.297.182c-.352.042-1.119.046-1.804.763-.54.546-.715 1.786-.715 1.786S3 9.88 3 11.336V12.7c0 1.457.18 2.913.18 2.913s.176 1.24.715 1.787c.685.717 1.584.694 1.985.77 1.44.138 6.12.18 6.12.18s3.782-.005 6.301-.187c.352-.042 1.12-.046 1.804-.763.54-.546.715-1.787.715-1.787s.18-1.456.18-2.913v-1.365c0-1.457-.18-2.914-.18-2.914z" fill="#FFF" fill-rule="evenodd"/></svg>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>icon_yt</title><path d="M10.142 14.356l-.001-5.057 4.864 2.537-4.863 2.52zM20.82 8.422s-.176-1.24-.715-1.786c-.685-.717-1.452-.72-1.804-.763-2.519-.182-6.297-.182-6.297-.182h-.008s-3.778 0-6.297.182c-.352.042-1.119.046-1.804.763-.54.546-.715 1.786-.715 1.786S3 9.88 3 11.336V12.7c0 1.457.18 2.913.18 2.913s.176 1.24.715 1.787c.685.717 1.584.694 1.985.77 1.44.138 6.12.18 6.12.18s3.782-.005 6.301-.187c.352-.042 1.12-.046 1.804-.763.54-.546.715-1.787.715-1.787S21 14.157 21 12.7v-1.365c0-1.457-.18-2.914-.18-2.914z" fill="#FFF" fill-rule="evenodd"/></svg>
|
||||
|
Before Width: | Height: | Size: 645 B After Width: | Height: | Size: 644 B |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
|
|
@ -404,6 +404,95 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slide slide--six">
|
||||
<div class="slide__inner">
|
||||
<div class="slide__header">
|
||||
<h2 class="slide__title">Smarter private messaging</h2>
|
||||
<p class="slide__description">Status is more than a messenger. Send payments and smart contracts to friends from within chats, and enjoy end-to-end encryption by default using a peer-to-peer protocol that doesn’t rely
|
||||
on centralized servers</p>
|
||||
</div>
|
||||
|
||||
<div class="messages">
|
||||
|
||||
<div class="message message--text message--incoming message--one">
|
||||
<div class="message__avatar"></div>
|
||||
<div class="message__bubble">
|
||||
<div class="message__name">Alex</div>
|
||||
<div class="message__text">Thanks, guys!</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message message--location message--incoming message--two">
|
||||
<div class="message__avatar"></div>
|
||||
<div class="message__bubble">
|
||||
<div class="message__name">Justas</div>
|
||||
<div class="message__text">17 Washington Street, Noank, MA</div>
|
||||
<div class="message__location"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message message--transaction message--outcoming message--three">
|
||||
<div class="message__avatar"></div>
|
||||
<div class="message__bubble">
|
||||
<div class="message__name">Andrei</div>
|
||||
<div class="message__transaction">
|
||||
<div class="message__transaction__amount">0.2323 <span class="currency">ETH</span></div>
|
||||
<div class="message__transaction__details">
|
||||
<div class="message__transaction__details-row"><span class="text-gray">To</span><span>justas777</span></div>
|
||||
<div class="message__transaction__details-row"><span class="text-gray">From</span><span>andmironov</span></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="message__bubble-footer message__bubble-footer--status">
|
||||
<span class="status-icon status-icon--ok"></span>
|
||||
<span class="status-text">Confirmed</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message message--audio message--incoming message--four">
|
||||
<div class="message__avatar"></div>
|
||||
<div class="message__bubble">
|
||||
<div class="message__name">Lina</div>
|
||||
<div class="message__player"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message message--request message--incoming message--five">
|
||||
<div class="message__avatar"></div>
|
||||
<div class="message__bubble">
|
||||
<div class="message__name">Daniel</div>
|
||||
<div class="message__text">Confirm with password</div>
|
||||
<div class="message__bubble-footer message__bubble-footer--button">
|
||||
<span class="button-text">Enter password</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message message--request message--outcoming message--six">
|
||||
<div class="message__avatar"></div>
|
||||
<div class="message__bubble">
|
||||
<div class="message__name">Gene</div>
|
||||
<div class="message__text">That would be 3.55 ETH</div>
|
||||
<div class="message__bubble-footer message__bubble-footer--button">
|
||||
<span class="button-text">Send 3.55 ETH</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message message--custom message--outcoming message--seven">
|
||||
<div class="message__avatar"></div>
|
||||
<div class="message__bubble">
|
||||
<div class="message__name">Felix</div>
|
||||
<div class="message__custom">
|
||||
<div class="message__custom__icon-wrap"><div class="message__custom__icon"></div></div>
|
||||
<div class="message__custom__text">Design custom messages for your DApp</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="slide__footer">
|
||||
With Status, you can use smart contracts in your daily life, converse with chatbots, and help to preserve our collective human right to privacy
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slide slide--five">
|
||||
<div class="slide__inner">
|
||||
<div class="slide__header slide__header--inversed">
|
||||
|
|
@ -411,6 +500,7 @@
|
|||
<p class="slide__description">Status is built together with its users. We’re completely open source and anyone is free to contribute. Together we can shape the future of Status, and facilitate the transition to a more open internet.</p>
|
||||
</div>
|
||||
<div class="slide__bg-image">
|
||||
<div class="slide__bg-area"></div>
|
||||
<div class="slide__bg-icon">
|
||||
<div class="slide__bg-icon-inner"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9959,6 +9959,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
|
|||
features = document.querySelectorAll(".features-wrap")[0],
|
||||
slideTwo = document.querySelectorAll(".slide--two")[0],
|
||||
slideThree = document.querySelectorAll(".slide--three")[0],
|
||||
slideSix = document.querySelectorAll(".slide--six")[0],
|
||||
cookieButton = document.querySelectorAll(".cookie-popup-button")[0];
|
||||
|
||||
setTimeout(function () {
|
||||
|
|
@ -10034,6 +10035,12 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
|
|||
when: 1400,
|
||||
className: "slide--shown"
|
||||
}
|
||||
}, {
|
||||
element: slideSix,
|
||||
reveal: {
|
||||
when: 2200,
|
||||
className: "slide--shown"
|
||||
}
|
||||
}]
|
||||
}).init();
|
||||
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ let iphone = document.querySelectorAll(".phone-wrap--iphone")[0],
|
|||
features = document.querySelectorAll(".features-wrap")[0],
|
||||
slideTwo = document.querySelectorAll(".slide--two")[0],
|
||||
slideThree = document.querySelectorAll(".slide--three")[0],
|
||||
slideSix = document.querySelectorAll(".slide--six")[0],
|
||||
cookieButton = document.querySelectorAll(".cookie-popup-button")[0]
|
||||
|
||||
setTimeout(() => body.classList.add("shown"), 400)
|
||||
|
|
@ -96,6 +97,14 @@ new ScrollOver({
|
|||
when : 1400,
|
||||
className: "slide--shown"
|
||||
}
|
||||
},
|
||||
{
|
||||
element : slideSix,
|
||||
reveal:
|
||||
{
|
||||
when : 2200,
|
||||
className: "slide--shown"
|
||||
}
|
||||
}
|
||||
]
|
||||
}).init()
|
||||
|
|
|
|||
|
|
@ -13,5 +13,6 @@
|
|||
@import "slide--three";
|
||||
@import "slide--four";
|
||||
@import "slide--five";
|
||||
@import "slide--six";
|
||||
|
||||
@import "footer";
|
||||
|
|
|
|||
|
|
@ -27,6 +27,25 @@
|
|||
margin: 0 0 0 -407px;
|
||||
}
|
||||
|
||||
.slide__bg-area {
|
||||
position: absolute;
|
||||
background-color: $colorWhite;
|
||||
opacity: 0;
|
||||
left: 50%;
|
||||
top: -88px;
|
||||
margin: 0 0 0 -200px;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
border-radius: 50%;
|
||||
|
||||
transform: scale(.1);
|
||||
animation-timing-function: ease;
|
||||
animation-name: pulsateArea;
|
||||
animation-duration: 3.4s;
|
||||
animation-delay: 2.3s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.slide.slide--five .slide__bg-icon {
|
||||
position: absolute;
|
||||
top: 86px;
|
||||
|
|
@ -39,7 +58,7 @@
|
|||
|
||||
box-shadow: 0 2px 9px 0 rgba(57,80,164,0.69);
|
||||
position: relative;
|
||||
|
||||
animation-timing-function: cubic-bezier(0.685, 0.000, 0.025, 1.185);
|
||||
animation-name: pulsate;
|
||||
animation-duration: 3.4s;
|
||||
animation-iteration-count: infinite;
|
||||
|
|
@ -129,6 +148,17 @@
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes pulsateArea {
|
||||
0% {
|
||||
transform: scale(.1);
|
||||
opacity: .1
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.4);
|
||||
opacity: 0
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1140px) {
|
||||
|
||||
.slide.slide--five .slide__inner {
|
||||
|
|
@ -197,7 +227,3 @@
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,234 @@
|
|||
.slide.slide--six {
|
||||
padding: 40px 0 40px 0;
|
||||
margin: 0 0 0 0;
|
||||
}
|
||||
|
||||
.slide--shown {
|
||||
transform: scale(1);
|
||||
opacity:1
|
||||
}
|
||||
|
||||
.slide.slide--six .slide__footer {
|
||||
width: 450px;
|
||||
}
|
||||
|
||||
.messages {
|
||||
margin: 50px auto 30px;
|
||||
width: 880px;
|
||||
height: 600px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content:flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.message {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
align-content: flex-start;
|
||||
flex-direction: row;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
transition: transform .6s ease, opacity .4s ease;
|
||||
transition-delay: .1s;
|
||||
}
|
||||
|
||||
.message.message--outcoming {
|
||||
flex-direction: row-reverse;
|
||||
transform: translate3d(10px, 20px, 0) scale(.9) rotate(0);
|
||||
}
|
||||
.message.message--incoming {
|
||||
transform: translate3d(-10px, 20px, 0) scale(.9) rotate(0);
|
||||
}
|
||||
|
||||
.message.message--one { top: 120px; left: 0; transition-delay: .2s;}
|
||||
.message.message--two { top: 0; left: 200px; transition-delay: .3s;}
|
||||
.message.message--three { top: 135px; right: 140px; transition-delay: .4s;}
|
||||
.message.message--four { top: 220px; left: 160px; transition-delay: .5s;}
|
||||
.message.message--five { top: 355px; left: 0px; transition-delay: .6s;}
|
||||
.message.message--six { top: 365px; right: 0; transition-delay: .7s;}
|
||||
.message.message--seven { top: 365px; right: 320px; transition-delay: .8s;}
|
||||
|
||||
.slide--shown .message.message--outcoming,
|
||||
.slide--shown .message.message--incoming {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.message__avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 4px 18px 0 rgba(189,208,223,0.26);
|
||||
background-color: $colorWhite;
|
||||
background-size: 36px;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.message--one .message__avatar { background-image: url(../img/new-site/face1@2x.png) }
|
||||
.message--two .message__avatar { background-image: url(../img/new-site/face2@2x.png) }
|
||||
.message--three .message__avatar { background-image: url(../img/new-site/face3@2x.png) }
|
||||
.message--four .message__avatar { background-image: url(../img/new-site/face4@2x.png) }
|
||||
.message--five .message__avatar { background-image: url(../img/new-site/face5@2x.png) }
|
||||
.message--six .message__avatar { background-image: url(../img/new-site/face6@2x.png) }
|
||||
.message--seven .message__avatar { background-image: url(../img/new-site/face7@2x.png) }
|
||||
|
||||
.message__bubble {
|
||||
background-color: $colorWhite;
|
||||
box-shadow: 0 4px 18px 0 rgba(189,208,223,0.26);
|
||||
border-radius: 8px;
|
||||
max-width: 204px;
|
||||
}
|
||||
|
||||
.message__name {
|
||||
font-size: 14px;
|
||||
color: #939BA1;
|
||||
padding: 12px 12px 2px 12px;
|
||||
}
|
||||
|
||||
.message__text {
|
||||
padding: 0 12px 8px 12px;
|
||||
font-size: 15px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.message__location {
|
||||
width: 180px;
|
||||
height: 60px;
|
||||
background-size: cover;
|
||||
background-image: url(../img/new-site/location@2x.png);
|
||||
margin: 0 12px 12px 12px;
|
||||
}
|
||||
|
||||
.message__player {
|
||||
width: 162px;
|
||||
height: 52px;
|
||||
background-size: cover;
|
||||
background-image: url(../img/new-site/player@2x.png);
|
||||
margin: 0 12px 12px 12px;
|
||||
}
|
||||
|
||||
.message__transaction {
|
||||
width: 180px;
|
||||
padding: 0 12px 12px 12px;
|
||||
}
|
||||
|
||||
.message__transaction__amount {
|
||||
font-size: 25px;
|
||||
font-family:$PostGroteskMedium;
|
||||
}
|
||||
|
||||
.message__transaction__amount .currency {
|
||||
color: #C2C4CB;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.message__transaction__details {
|
||||
padding: 8px 0 0 0;
|
||||
}
|
||||
|
||||
.message__transaction__details .text-gray {
|
||||
display: inline-block;
|
||||
color: #C2C4CB;
|
||||
width: 44px;
|
||||
}
|
||||
|
||||
.message__custom {
|
||||
margin: 0 12px 12px 12px;
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
border: 1px dashed #6E97E9;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.message__custom__icon-wrap {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
background-color: #E0E9F9;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.message__custom__icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-image: url(../img/new-site/icon-plus.svg);
|
||||
background-size: 24px;
|
||||
}
|
||||
|
||||
.message__custom__text {
|
||||
text-align: center;
|
||||
color: #95A3AD;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
padding: 4px 16px 0;
|
||||
}
|
||||
|
||||
.message__bubble-footer {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.message__bubble-footer.message__bubble-footer--button {
|
||||
color: $colorWhite;
|
||||
background-color: #6E97E9;
|
||||
border-radius: 0px 0px 8px 8px;
|
||||
}
|
||||
|
||||
.message__bubble-footer.message__bubble-footer--status {
|
||||
border-top: 1px solid #E8EBEC;
|
||||
color: #6E97E9;
|
||||
border-radius: 0px 0px 8px 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 922px) {
|
||||
|
||||
.messages {
|
||||
margin: 50px auto 30px;
|
||||
width: 748px;
|
||||
height: 620px;
|
||||
}
|
||||
.message.message--three {right: 30px; top: 55px; }
|
||||
.message.message--four { left:170px; top: 225px; }
|
||||
.message.message--five { left:0; top: 355px; }
|
||||
.message.message--six {top: 255px; }
|
||||
.message.message--seven { right:210px; top: 405px;}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
|
||||
.slide.slide--six {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.messages {
|
||||
margin: 20px auto 10px;
|
||||
width: 375px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.message.message--one {left: 0; top: 0;}
|
||||
.message.message--two {display: none;}
|
||||
.message.message--three {right: 0; top: 88px;}
|
||||
.message.message--four { display: none; }
|
||||
.message.message--five { left:0; top: 278px;}
|
||||
.message.message--six {display: none; }
|
||||
.message.message--seven { right:0px; top: 406px;}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.messages {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue