KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Feature: Update design for web widget (#408)

Browse source
This commit is contained in:
Nithin David Thomas 2020-01-13 12:10:40 +05:30 • committed by Pranav Raj S
parent 655c585358
commit 7cf19e0b52
11 changed files with 184 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

34
app/javascript/widget/components/ChatHeaderExpanded.vue
View file

@ -1,6 +1,10 @@
<template>
<header class="header-expanded" :style="{ background: widgetColor }">
<header class="header-expanded">
<div>
<!-- <img
class="logo"
src="http://www.hennigcompany.com/wp-content/uploads/2014/06/starbucks-logo.png"
/> -->
<h2 class="title">
{{ introHeading }}
</h2>
@ -39,21 +43,35 @@ export default {
@import '~widget/assets/scss/variables.scss';
.header-expanded {
background: $color-woot;
padding: $space-large;
background: $color-white;
padding: $space-larger $space-medium $space-large;
width: 100%;
box-sizing: border-box;
color: $color-white;
border-radius: 1.6rem;
box-shadow: 0 10px 15px -16px rgba(0, 0, 0, 0.1),
0 4px 6px -8px rgba(0, 0, 0, 0.05) !important;
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
border-radius: 0;
}
.logo {
width: 64px;
height: 64px;
}
.title {
color: $color-heading;
font-size: $font-size-mega;
font-weight: $font-weight-medium;
margin-bottom: $space-two;
font-weight: $font-weight-normal;
margin-bottom: $space-slab;
margin-top: $space-large;
}
.body {
font-size: $font-size-medium;
line-height: 1.5;
color: $color-body;
font-size: 1.8rem;
line-height: 1.6;
}
}
</style>