A mobile chat interface. You can write, send image and... switch user! Hope you'll enjoy :)
A Pen by Simone Giannangeli on CodePen.
Created
March 16, 2020 23:36
-
-
Save Nemra1/1bf823741ba19ff4551549378e8bfed9 to your computer and use it in GitHub Desktop.
Mobile chat interface (switchable users!)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| main | |
| .change.firstView | |
| .Avatar | |
| img.second(src="http://davidsclassiccars.com/images/full/rare-1964-chevelle-malibu-ss-4-speed-convertible-true-supersport-7.jpg") | |
| img.first(src="https://pbs.twimg.com/profile_images/456212657553432576/wlvb6fuq.jpeg") | |
| .Name | |
| span.second Vincent Vega | |
| span.first Jules Winnfield | |
| .btnChange Switch! | |
| .chat.start.firstView | |
| .Contact | |
| .btnBack | |
| svg(width="30px" height="60px" viewBox="0 0 30 60") | |
| polyline(class="" points="13.9,38 6.5,30 13.9,22") | |
| .contactInfo | |
| .Avatar.active | |
| img.second(src="http://davidsclassiccars.com/images/full/rare-1964-chevelle-malibu-ss-4-speed-convertible-true-supersport-7.jpg") | |
| img.first(src="https://pbs.twimg.com/profile_images/456212657553432576/wlvb6fuq.jpeg") | |
| .Name | |
| span.second Vincent Vega | |
| span.first Jules Winnfield | |
| .Status Active now | |
| .btnOptions | |
| svg(width="30px" height="60px" viewBox="0 0 30 60") | |
| path(class="" d="M13,22.6c0-1.1,0.9-2,2-2s2,0.9,2,2c0,1.1-0.9,2-2,2S13,23.8,13,22.6z M15,28c-1.1,0-2,0.9-2,2c0,1.1,0.9,2,2,2s2-0.9,2-2 C17,28.9,16.1,28,15,28z M15,35.4c-1.1,0-2,0.9-2,2c0,1.1,0.9,2,2,2s2-0.9,2-2C17,36.2,16.1,35.4,15,35.4z") | |
| .modalAttachment | |
| .preview | |
| .msgSpace | |
| div | |
| ul.msg | |
| li.date | |
| span yesterday | |
| li.first | |
| div Okay so, tell me again about the hash bars? | |
| time 07:12 AM | |
| li.second | |
| div Okay what d'you want to know? | |
| time 07:12 AM | |
| li.first | |
| div Hash is legal there, right? | |
| time 07:12 AM | |
| li.second | |
| div Yeah, it's legal, but is ain't a hundred percent legal 🤓 | |
| time 07:12 AM | |
| li.second | |
| div I mean you can't walk into a restaurant, roll a joint, and start puffin' away. I mean they want you to smoke in your home or certain designated places... | |
| time 07:13 AM | |
| li.first | |
| div Those are hash bars? 😍 | |
| time 07:13 AM | |
| li.second | |
| div Yeah, it breaks down like this, okay: it's legal to buy it, it's legal to own it and, if you're the proprietor of a hash bar, it's legal to sell it. it's legal to carry it, but that doesn't matter 'cause... | |
| time 07:14 AM | |
| li.second | |
| div ...get a load of this, alright... | |
| time 07:14 AM | |
| li.second | |
| div ...if you get stopped by a cop in Amsterdam, it's illegal for them to search you. I mean that's a right that the cops in Amsterdam don't have 👮🏻🖕 | |
| time 07:14 AM | |
| li.first | |
| div Oh, man... I'm goin', that's all there is to it | |
| time 07:14 AM | |
| li.first | |
| div I'm fuckin' goin' 🤪🤪🤪 | |
| time 07:15 AM | |
| li.second | |
| div You'll dig it the most. But you know what the funniest thing about Europe is? | |
| time 07:15 AM | |
| li.first | |
| div What? | |
| time 07:15 AM | |
| li.second | |
| div It's the little differences. I mean they got the same shit over there, we got here, but it's just there's a little difference ❤️ | |
| time 07:15 AM | |
| li.first | |
| div Examples? | |
| time 07:16 AM | |
| li.second | |
| div Alright, well you can walk into a movie theatre in Amsterdam and buy a beer. And I don't mean in a paper cup. I'm talkin' about a glass of beer. | |
| time 07:16 AM | |
| li.second | |
| div And in Paris, you can buy a beer at MacDonald's. | |
| time 07:16 AM | |
| li.second | |
| div You know what they call a Quarter Pounder with Cheese in Paris? | |
| time 07:16 AM | |
| li.first | |
| div They don't call it a Quarter Pounder with Cheese? | |
| time 07:17 AM | |
| li.second | |
| div No, man, they got the metric system there, they wouldn't know what the fuck a Quarter Pounder is. | |
| time 07:17 AM | |
| li.first | |
| div What'd they call it? | |
| time 07:17 AM | |
| li.second | |
| div They call it Royale with Cheese 👑 | |
| time 07:17 AM | |
| li.first | |
| div 🤯 | |
| time 07:17 AM | |
| li.first | |
| div What'd they call a Big Mac? | |
| time 07:17 AM | |
| li.second | |
| div Big Mac's a Big Mac, but they call it Le Big Mac. | |
| time 07:17 AM | |
| li.first | |
| div 😂😂😂 | |
| time 07:17 AM | |
| li.first | |
| div What do they call a Whopper? | |
| time 07:18 AM | |
| li.second | |
| div I dunno, I didn't go into a Burger King 🤔 | |
| time 07:18 AM | |
| li.second | |
| div You know what they put on french fries in Holland instead of ketchup? | |
| time 07:18 AM | |
| li.first | |
| div What? | |
| time 07:18 AM | |
| li.second | |
| div Mayonnaise! 😱 | |
| time 07:18 AM | |
| li.first | |
| div Goddamn! 🤢 | |
| time 07:18 AM | |
| li.second.img | |
| div | |
| img(src="https://www.rtl.be/info/GED/00900000/907700/907767.jpg") | |
| span.caption I seen 'em do it, man. They fuckin' drown 'em in this shit. | |
| time 07:18 AM | |
| li.first | |
| div 🤮🤮🤮 | |
| time 07:19 AM | |
| .input | |
| .btnAttach | |
| input(type="file" id="attachment" accept=".png, .jpg, .jpeg") | |
| label(for="attachment") | |
| svg(width="48px" height="48px" viewBox="0 0 48 48") | |
| path(class="" d="M22,17.5v11c0,1.1,0.9,2,2,2h0c1.1,0,2-0.9,2-2v-11c0-2.2-1.8-4-4-4h0c-2.2,0-4,1.8-4,4v11c0,3.3,2.7,6,6,6h0 c3.3,0,6-2.7,6-6v-9.2") | |
| input(type="text" id="msgInput" placeholder="Type here") | |
| button.send(disabled="true") | |
| svg(width="48px" height="48px" viewBox="0 0 48 48") | |
| path(class="" d="M34.6,22.6l-16.3-8.4c-1.1-0.6-2.5,0.4-2.3,1.6l0.8,6.1c0.1,0.7,0.7,1.3,1.5,1.4l9.8,0.7l-9.8,0.7 c-0.7,0.1-1.4,0.6-1.5,1.4L16,32.1c-0.2,1.3,1.1,2.2,2.3,1.6l16.3-8.4C35.7,24.8,35.7,23.2,34.6,22.6z") |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // change chat | |
| $(".change").click(function(){ | |
| if ($(".chat").hasClass("firstView")) { | |
| $(".chat").addClass("changeScreen"); | |
| $(".change").addClass("changeScreen"); | |
| setTimeout(function(){ | |
| $(".chat").removeClass("firstView"); | |
| $(".chat").addClass("secondView"); | |
| $(".change").removeClass("firstView"); | |
| $(".change").addClass("secondView"); | |
| }, 500); | |
| setTimeout(function(){ | |
| $(".chat").removeClass("changeScreen"); | |
| $(".change").removeClass("changeScreen"); | |
| }, 1000); | |
| } else { | |
| $(".chat").addClass("changeScreen"); | |
| $(".change").addClass("changeScreen"); | |
| setTimeout(function(){ | |
| $(".chat").removeClass("secondView"); | |
| $(".chat").addClass("firstView"); | |
| $(".change").removeClass("secondView"); | |
| $(".change").addClass("firstView"); | |
| }, 500); | |
| setTimeout(function(){ | |
| $(".chat").removeClass("changeScreen"); | |
| $(".change").removeClass("changeScreen"); | |
| }, 1000); | |
| } | |
| }); | |
| // send button | |
| $("#msgInput").keyup(function(){ | |
| if($(this).val() != "") { | |
| $("button.send").prop("disabled", false); | |
| } else { | |
| $("button.send").prop("disabled", true); | |
| } | |
| }); | |
| $(".send").click(function(){ | |
| if ($(".chat").hasClass("attachment")) { | |
| sendImg(); | |
| } else { | |
| sendMsg(); | |
| } | |
| }); | |
| $("#attachment").change(function() { | |
| attachment(this); | |
| $("button.send").prop("disabled", false); | |
| }); | |
| $("#msgInput").on('keypress',function(e) { | |
| if($(".chat").hasClass("attachment")) { | |
| if(e.which == 13) { | |
| sendImg(); | |
| } | |
| } else if($(this).val() != "" && !$(".chat").hasClass("attachment")) { | |
| if(e.which == 13) { | |
| sendMsg(); | |
| } | |
| } | |
| }); | |
| // send text | |
| function sendMsg() { | |
| var message = $("#msgInput").val(); | |
| if ($(".chat").hasClass("start")) { | |
| if ($(".chat").hasClass("firstView")) { | |
| $(".msg").append("<li class=\"date\"><span>today</span></li><li class=\"first\"><div>"+message+"</div><time>"+time(new Date)+"</time></li>"); | |
| } else if ($(".chat").hasClass("secondView")) { | |
| $(".msg").append("<li class=\"date\"><span>today</span></li><li class=\"second\"><div>"+message+"</div><time>"+time(new Date)+"</time></li>"); | |
| } | |
| $(".chat").removeClass("start"); | |
| } else if (!$(".chat").hasClass("start")) { | |
| if ($(".chat").hasClass("firstView")) { | |
| $(".msg").append("<li class=\"first\"><div>"+message+"</div><time>"+time(new Date)+"</time></li>"); | |
| } else if ($(".chat").hasClass("secondView")) { | |
| $(".msg").append("<li class=\"second\"><div>"+message+"</div><time>"+time(new Date)+"</time></li>"); | |
| } | |
| } | |
| $(".msgSpace div").scrollTop($(".msg").height()); | |
| $("#msgInput").val(""); | |
| $("button.send").prop("disabled", true); | |
| $("#msgInput").focus(); | |
| } | |
| //attach | |
| function attachment(input) { | |
| if (input.files && input.files[0]) { | |
| var reader = new FileReader(); | |
| reader.onload = function(e) { | |
| $(".chat").addClass("attachment"); | |
| var preview = e.target.result; | |
| $(".modalAttachment").html("<div class=\"preview\"><img src=\""+preview+"\" /></div>"); | |
| } | |
| reader.readAsDataURL(input.files[0]); | |
| } | |
| } | |
| // send img + text | |
| function sendImg() { | |
| $(".chat").removeClass("attachment"); | |
| if ($("#msgInput").val() != "" ) { | |
| var message = "<span class=\"caption\">" + $("#msgInput").val() + "</span>"; | |
| } else { | |
| var message = "" | |
| } | |
| var attach = $(".preview").html(); | |
| if ($(".chat").hasClass("start")) { | |
| if ($(".chat").hasClass("firstView")) { | |
| $(".msg").append("<li class=\"date\"><span>today</span></li><li class=\"first img\"><div>"+attach + message+"</div><time>"+time(new Date)+"</time></li>"); | |
| } else if ($(".chat").hasClass("secondView")) { | |
| $(".msg").append("<li class=\"date\"><span>today</span></li><li class=\"second img\"><div>"+attach + message+"</div><time>"+time(new Date)+"</time></li>"); | |
| } | |
| $(".chat").removeClass("start"); | |
| } else if (!$(".chat").hasClass("start")) { | |
| if ($(".chat").hasClass("firstView")) { | |
| $(".msg").append("<li class=\"first img\"><div>"+attach + message+"</div><time>"+time(new Date)+"</time></li>"); | |
| } else if ($(".chat").hasClass("secondView")) { | |
| $(".msg").append("<li class=\"second img\"><div>"+attach + message+"</div><time>"+time(new Date)+"</time></li>"); | |
| } | |
| } | |
| $(".msgSpace div").scrollTop($(".msg").height()); | |
| $("#msgInput").val(""); | |
| $("button.send").prop("disabled", true); | |
| $("#msgInput").focus(); | |
| } | |
| // time | |
| function time(date) { | |
| var hours = date.getHours(); | |
| var minutes = date.getMinutes(); | |
| var ampm = hours >= 12 ? 'pm' : 'am'; | |
| hours = hours % 12; | |
| hours = hours ? hours : 12; // the hour '0' should be '12' | |
| hours = hours < 10 ? '0'+hours : hours; | |
| minutes = minutes < 10 ? '0'+minutes : minutes; | |
| var strTime = hours + ':' + minutes + ' ' + ampm; | |
| return strTime; | |
| } | |
| // start | |
| $(".msgSpace div").scrollTop($(".msg").height()); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $bkgMain: #ddd; | |
| $bkgChat: #f1f3f6; | |
| $textDark: #353b47; | |
| $text: #717a90; | |
| $greyLight: #c4c7d0; | |
| $white: #fff; | |
| $statusOk: #19d0c5; | |
| $greyChange :#7b808b; | |
| $bkgDark: #353b47; | |
| $topColor01: #4f89c4; | |
| $me01: #a4c4e1; | |
| $send01: #46cc7c; | |
| $topColor02: #333; | |
| $me02: #e58091; | |
| $send02: #fb963c; | |
| *{letter-spacing: -0.02px;-webkit-font-smoothing: antialiased; width: 100% ;font-family: "Montserrat"; font-size:14px; line-height: 24px; font-weight: 500; box-sizing: border-box; color: $text;} | |
| ::-webkit-scrollbar { | |
| display: none; | |
| } | |
| main { | |
| display: block; | |
| position:absolute; | |
| width: calc(100% - 40px); | |
| height: calc(100% - 40px); | |
| top: 20px; | |
| left: 20px; | |
| bottom: 20px; | |
| right: 20px; | |
| border-radius: 20px; | |
| background: $bkgMain; | |
| } | |
| .change { | |
| display: block; | |
| position: absolute; | |
| bottom: 0px; | |
| right: 0px; | |
| width: 200px; | |
| height: auto; | |
| padding: 40px; | |
| transform-origin: bottom right; | |
| border-radius: 8px; | |
| opacity: 0.7; | |
| cursor: pointer; | |
| transition: all 500ms; | |
| &:hover { | |
| opacity: 1; | |
| } | |
| &:before { | |
| content: "You are:"; | |
| display: block; | |
| width: auto; | |
| height: 30px; | |
| text-align: center; | |
| font-size: 10px; | |
| line-height: 28px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| color: $greyChange; | |
| opacity: 0.5; | |
| } | |
| .Avatar { | |
| display: block; | |
| position: relative; | |
| width: 40px; | |
| height: 40px; | |
| margin: 0px auto; | |
| border-radius: 24px; | |
| img {border-radius: 24px;} | |
| } | |
| .Name { | |
| display: block; | |
| width: auto; | |
| height: auto; | |
| text-align: center; | |
| span{ | |
| display: block; | |
| margin: 6px 0px 12px 0px; | |
| color: $greyChange; | |
| font-size: 12px; | |
| line-height: 20px; | |
| font-weight: 600; | |
| } | |
| } | |
| .btnChange { | |
| display: block; | |
| position: relative; | |
| width: auto; | |
| height: 30px; | |
| font-size: 18px; | |
| color: $white; | |
| font-size: 12px; | |
| line-height: 30px; | |
| font-weight: 600; | |
| text-align: center; | |
| border-radius: 8px; | |
| background: $send01; | |
| } | |
| } | |
| .change.firstView { | |
| .Avatar { | |
| img.second {display: none;} | |
| } | |
| .Name { | |
| span.second {display: none;} | |
| } | |
| } | |
| .change.secondView { | |
| .Avatar { | |
| img.first {display: none;} | |
| } | |
| .Name { | |
| span.first {display: none;} | |
| } | |
| } | |
| // basic | |
| .chat { | |
| display: block; | |
| position:absolute; | |
| top: calc(50% - 360px); | |
| left: calc(50% - 187.5px); | |
| width: 375px; | |
| height: 720px; | |
| border-radius: 30px 30px 70px 70px; | |
| background: $topColor01; | |
| .Contact { | |
| display: block; | |
| position: absolute; | |
| top: 0px; | |
| left: 0px; | |
| z-index: 100; | |
| width: 100%; | |
| height: 100px; | |
| padding: 20px; | |
| .btnBack { | |
| display: block; | |
| float: left; | |
| width: 30px; | |
| height: 100%; | |
| svg { | |
| fill: none; | |
| stroke: rgba($white, 0.5); | |
| stroke-width: 2; | |
| stroke-linecap: round; | |
| stroke-linejoin: round; | |
| } | |
| } | |
| .btnOptions { | |
| display: block; | |
| float: right; | |
| width: 30px; | |
| height: 100%; | |
| svg { | |
| fill: rgba($white, 0.5); | |
| stroke: none; | |
| } | |
| } | |
| .contactInfo { | |
| display: block; | |
| float: left; | |
| width: auto; | |
| height: 60px; | |
| padding: 6px; | |
| .Avatar { | |
| display: block; | |
| position: relative; | |
| float: left; | |
| width: 48px; | |
| height: 48px; | |
| margin: 0px 20px 0px 0px; | |
| border-radius: 24px; | |
| img { | |
| border-radius: 24px; | |
| } | |
| &:after { | |
| content:""; | |
| display: block; | |
| position: absolute; | |
| bottom: -1px; | |
| right: -1px; | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 24px; | |
| border: 2px solid $topColor01; | |
| background: $statusOk; | |
| } | |
| } | |
| .Name { | |
| display: block; | |
| float: left; | |
| width: auto; | |
| height: 48px; | |
| span{ | |
| display: block; | |
| margin: 5px 0px 4px 0px; | |
| color: $white; | |
| font-size: 18px; | |
| line-height: 20px; | |
| font-weight: 600; | |
| } | |
| .Status{ | |
| display: block; | |
| font-size: 12px; | |
| line-height: 14px; | |
| font-weight: 500; | |
| color: rgba($white, 0.5); | |
| } | |
| } | |
| } | |
| } | |
| .modalAttachment { | |
| display: block; | |
| visibility: hidden; | |
| position: absolute; | |
| top: 0px; | |
| left: 0px; | |
| z-index: 10; | |
| width: 100%; | |
| height: 100%; | |
| padding: 20px; | |
| background: $bkgDark; | |
| border-radius: 30px 30px 50px 50px; | |
| opacity: 0; | |
| .preview{ | |
| display: block; | |
| position: absolute; | |
| z-index: 1; | |
| width: 100%; | |
| height: auto; | |
| top: 50%; | |
| left: 0px; | |
| padding: 40px; | |
| transform: translate(0%, -50%); | |
| img{ | |
| display: block; | |
| max-width: 100%; | |
| height: auto; | |
| border-radius: 10px; | |
| } | |
| } | |
| } | |
| .input { | |
| display: flex; | |
| justify-content: space-between; | |
| position:absolute; | |
| bottom: 20px; | |
| left: 20px; | |
| z-index: 10; | |
| width: 335px; | |
| height: 60px; | |
| padding: 6px; | |
| border-radius: 30px; | |
| box-shadow: 0px 8px 20px rgba($greyLight, 0.4); | |
| background: $white; | |
| button { | |
| display: block; | |
| width: 48px; | |
| height: 48px; | |
| padding: 0px; | |
| border-radius: 30px; | |
| border: 0px; | |
| outline: 0px; | |
| background: $send01; | |
| cursor: pointer; | |
| &:disabled{ | |
| opacity: 0.5; | |
| cursor: default; | |
| } | |
| svg { | |
| fill: $white; | |
| stroke: none; | |
| } | |
| } | |
| input { | |
| display: block; | |
| width: 200px; | |
| height: 48px; | |
| font-size: 14px; | |
| font-weight: 500; | |
| color: $text; | |
| border: 0px; | |
| background: transparent; | |
| outline: 0px; | |
| } | |
| .btnAttach { | |
| display: block; | |
| width: 48px; | |
| height: 48px; | |
| input {display: none;} | |
| label { | |
| display: block; | |
| width: 48px; | |
| height: 48px; | |
| border-radius: 30px; | |
| border: 0px; | |
| outline: 0px; | |
| cursor: pointer; | |
| background: rgba($greyLight,0.05); | |
| svg { | |
| fill: none; | |
| stroke: $greyLight; | |
| stroke-width: 2; | |
| stroke-linecap: round; | |
| stroke-linejoin: round; | |
| } | |
| } | |
| } | |
| } | |
| &.attachment .btnAttach { | |
| label { | |
| display: none; | |
| } | |
| } | |
| .msgSpace{ | |
| display: block; | |
| position:absolute; | |
| top: 100px; | |
| z-index: 1; | |
| width: 375px; | |
| height: calc(100% - 100px); | |
| overflow: hidden; | |
| border-radius: 30px 30px 50px 50px; | |
| background: $bkgChat; | |
| & > div{ | |
| display: block; | |
| width: 100%; | |
| height: calc(100% - 90px); | |
| overflow-y: scroll; | |
| } | |
| &:before{ | |
| content:""; | |
| display: block; | |
| position:absolute; | |
| top: 0px; | |
| left: 0px; | |
| z-index: 1; | |
| width: 375px; | |
| height: 40px; | |
| background: linear-gradient(180deg, rgba($bkgChat,0.6) 0%, rgba($bkgChat,0) 100%); | |
| } | |
| &:after{ | |
| content:""; | |
| display: block; | |
| position:absolute; | |
| bottom: 90px; | |
| left: 0px; | |
| z-index: 1; | |
| width: 375px; | |
| height: 20px; | |
| background: linear-gradient(180deg, rgba($bkgChat,0) 0%, rgba($bkgChat,1) 100%); | |
| } | |
| } | |
| .msg { | |
| display: block; | |
| float: left; | |
| width: 375px; | |
| //max-height: calc(100% - 110px); | |
| padding: 0px 30px 20px 30px; | |
| margin: 0px; | |
| list-style: none; | |
| li { | |
| display: block; | |
| position: relative; | |
| float: right; | |
| width: 100%; | |
| height: auto; | |
| margin: 20px 0px 0px 0px; | |
| &.date { | |
| display: block; | |
| position: relative; | |
| float: left; | |
| width: 100%; | |
| height: 26px; | |
| text-align: center; | |
| margin: 40px auto 0px auto; | |
| span { | |
| display: inline-block; | |
| width: auto!important; | |
| height: 26px; | |
| text-align: center; | |
| margin: 0px auto; | |
| padding: 0px 10px 0px 10px; | |
| font-size: 10px; | |
| line-height: 28px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| color: $bkgChat; | |
| background: $greyLight; | |
| border-radius: 8px; | |
| } | |
| } | |
| div { | |
| display: block; | |
| width: auto; | |
| max-width: 240px; | |
| height: auto; | |
| padding: 10px 20px 10px 20px; | |
| overflow-wrap: break-word; | |
| } | |
| time { | |
| display: block; | |
| position: absolute; | |
| top: calc(50% - 16px); | |
| width: auto; | |
| height: 32px; | |
| font-size: 10px; | |
| line-height: 32px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| color: $greyLight; | |
| } | |
| } | |
| } | |
| } | |
| // first view | |
| .chat.firstView { | |
| background: $topColor01; | |
| .Contact { | |
| .contactInfo { | |
| .Avatar { | |
| img.first { | |
| display: none; | |
| } | |
| &:after { | |
| border: 2px solid $topColor01; | |
| } | |
| } | |
| .Name { | |
| span.first{ | |
| display: none; | |
| } | |
| } | |
| } | |
| } | |
| .input { | |
| box-shadow: 0px 8px 20px rgba($greyLight, 0.4); | |
| button { | |
| background: $send01; | |
| } | |
| input { | |
| color: $text; | |
| } | |
| } | |
| .msgSpace{ | |
| background: $bkgChat; | |
| &:before{ | |
| background: linear-gradient(180deg, rgba($bkgChat,0.6) 0%, rgba($bkgChat,0) 100%); | |
| } | |
| &:after{ | |
| background: linear-gradient(180deg, rgba($bkgChat,0) 0%, rgba($bkgChat,1) 100%); | |
| } | |
| } | |
| .msg { | |
| li { | |
| &.first div { | |
| float: right; | |
| border-radius: 22px 22px 8px 22px; | |
| color: $white; | |
| background: $me01; | |
| } | |
| &.first ~ li.first + li.first, &.first + li.first { | |
| margin: 6px 0px 0px 0px; | |
| } | |
| &.first ~ li.first + li.first div, &.first + li.first div{ | |
| border-radius: 22px 8px 8px 22px; | |
| } | |
| &.second div { | |
| float: left; | |
| border-radius: 22px 22px 22px 8px; | |
| background: $white; | |
| } | |
| &.second ~ li.second + li.second, &.second + li.second { | |
| margin: 6px 0px 0px 0px; | |
| } | |
| &.second ~ li.second + li.second div, &.second + li.second div { | |
| border-radius: 8px 22px 22px 8px; | |
| } | |
| &.img div { | |
| padding: 6px 6px 0px 6px; | |
| } | |
| &.first.img .caption { | |
| float: left; | |
| padding: 0px 6px 10px 14px; | |
| color: $white; | |
| } | |
| &.second.img .caption { | |
| float: left; | |
| padding: 0px 14px 10px 6px; | |
| color: $text; | |
| } | |
| &.first img { | |
| border-radius: 16px 16px 4px 16px; | |
| } | |
| &.first ~ li.first + li.first img, &.first + li.first img { | |
| border-radius: 16px 4px 4px 16px; | |
| } | |
| &.second img { | |
| border-radius: 16px 16px 16px 4px; | |
| } | |
| &.second ~ li.second + li.second img, &.second + li.second img { | |
| border-radius: 4px 16px 16px 4px; | |
| } | |
| time { | |
| color: $greyLight; | |
| } | |
| &.first time { | |
| left: 0px; | |
| } | |
| &.second time { | |
| right: 0px; | |
| } | |
| } | |
| } | |
| } | |
| // second view | |
| .chat.secondView { | |
| background: $topColor02; | |
| .Contact { | |
| .contactInfo { | |
| .Avatar { | |
| img.second { | |
| display: none; | |
| } | |
| &:after { | |
| border: 2px solid $topColor02; | |
| } | |
| } | |
| .Name { | |
| span.second{ | |
| display: none; | |
| } | |
| } | |
| } | |
| } | |
| .input { | |
| box-shadow: 0px 8px 20px rgba($greyLight, 0.4); | |
| button { | |
| background: $send02; | |
| } | |
| input { | |
| color: $text; | |
| } | |
| } | |
| .msgSpace{ | |
| background: $bkgChat; | |
| &:before{ | |
| background: linear-gradient(180deg, rgba($bkgChat,0.6) 0%, rgba($bkgChat,0) 100%); | |
| } | |
| &:after{ | |
| background: linear-gradient(180deg, rgba($bkgChat,0) 0%, rgba($bkgChat,1) 100%); | |
| } | |
| } | |
| .msg { | |
| li { | |
| &.first div { | |
| float: left; | |
| border-radius: 22px 22px 22px 8px; | |
| background: $white; | |
| } | |
| &.first ~ li.first + li.first, &.first + li.first { | |
| margin: 6px 0px 0px 0px; | |
| } | |
| &.first ~ li.first + li.first div, &.first + li.first div{ | |
| border-radius: 8px 22px 22px 8px; | |
| } | |
| &.second div { | |
| float: right; | |
| border-radius: 22px 22px 8px 22px; | |
| color: $white; | |
| background: $me02; | |
| } | |
| &.second ~ li.second + li.second, &.second + li.second { | |
| margin: 6px 0px 0px 0px; | |
| } | |
| &.second ~ li.second + li.second div, &.second + li.second div { | |
| border-radius: 22px 8px 8px 22px; | |
| } | |
| &.img div { | |
| padding: 6px 6px 0px 6px; | |
| } | |
| &.first.img .caption { | |
| float: left; | |
| padding: 0px 14px 10px 6px; | |
| color: $text; | |
| } | |
| &.second.img .caption { | |
| float: left; | |
| padding: 0px 6px 10px 14px; | |
| color: $white; | |
| } | |
| &.first img { | |
| border-radius: 16px 16px 16px 4px; | |
| } | |
| &.first ~ li.first + li.first img, &.first + li.first img { | |
| border-radius: 4px 16px 16px 4px; | |
| } | |
| &.second img { | |
| border-radius: 16px 16px 4px 16px; | |
| } | |
| &.second ~ li.second + li.second img, &.second + li.second img { | |
| border-radius: 16px 4px 4px 16px; | |
| } | |
| time { | |
| color: $greyLight; | |
| } | |
| &.first time { | |
| right: 0px; | |
| } | |
| &.second time { | |
| left: 0px; | |
| } | |
| } | |
| } | |
| } | |
| //attachment | |
| .chat.attachment { | |
| .Contact { | |
| .btnBack { | |
| svg { | |
| stroke: rgba($white, 1); | |
| } | |
| } | |
| .btnOptions { | |
| opacity: 0; | |
| } | |
| .contactInfo { | |
| .Avatar { | |
| &:after { | |
| border: 2px solid $bkgDark; | |
| } | |
| } | |
| .Name { | |
| span{ | |
| line-height: 38px; | |
| } | |
| .Status{ | |
| display: none; | |
| opacity: 0; | |
| } | |
| } | |
| } | |
| } | |
| .modalAttachment { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| .input { | |
| box-shadow: 0px 8px 20px #1f2127; | |
| background: #485061; | |
| input { | |
| display: block; | |
| width: 220px; | |
| margin: 0px 0px 0px 20px; | |
| color: $white; | |
| } | |
| .btnAttach { | |
| display: none; | |
| } | |
| } | |
| } | |
| .send, .input, .modalAttachment{ | |
| transition: .5s ease-out all; | |
| -moz-transition: .5s ease-out all; | |
| -webkit-transition: .5s ease-out all; | |
| } | |
| .chat.changeScreen{ | |
| animation-name: changeScreen; | |
| animation-duration: 1s; | |
| animation-iteration-count: 1; | |
| animation-delay: 0s; | |
| } | |
| @keyframes changeScreen { | |
| 0% {transform: scale(1); opacity: 1;} | |
| 50% {transform: scale(0.8); opacity: 0;} | |
| 100% {transform: scale(1); opacity: 1;} | |
| } | |
| .change.changeScreen{ | |
| animation-name: switch; | |
| animation-duration: 1s; | |
| animation-iteration-count: 1; | |
| animation-delay: 0s; | |
| } | |
| @keyframes switch { | |
| 50% {opacity: 0;} | |
| } | |
| /* | |
| @media screen and (max-height: 800px) { | |
| .chat, .change {transform: scale(0.8)} | |
| @keyframes changeScreen { | |
| 0% {transform: scale(0.8); opacity: 1;} | |
| 50% {transform: scale(0.6); opacity: 0;} | |
| 100% {transform: scale(0.8); opacity: 1;} | |
| } | |
| } | |
| @media screen and (max-height: 650px) { | |
| .chat, .change {transform: scale(0.6)} | |
| @keyframes changeScreen { | |
| 0% {transform: scale(0.6); opacity: 1;} | |
| 50% {transform: scale(0.4); opacity: 0;} | |
| 100% {transform: scale(0.6); opacity: 1;} | |
| } | |
| } | |
| @media screen and (max-width: 800px) { | |
| .chat, .change {transform: scale(0.8)} | |
| @keyframes changeScreen { | |
| 0% {transform: scale(0.8); opacity: 1;} | |
| 50% {transform: scale(0.6); opacity: 0;} | |
| 100% {transform: scale(0.8); opacity: 1;} | |
| } | |
| } | |
| @media screen and (max-width: 650px) { | |
| .chat, .change {transform: scale(0.6)} | |
| @keyframes changeScreen { | |
| 0% {transform: scale(0.6); opacity: 1;} | |
| 50% {transform: scale(0.4); opacity: 0;} | |
| 100% {transform: scale(0.6); opacity: 1;} | |
| } | |
| } | |
| */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment