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

Merge pull request #123 from kirillarutyunov/codeclimate-70-issue-emojiinput-scss

Browse source 
Fix #70 issue codeclimate in _emojiinput.scss

@kirillarutyunov Thanks 🎉
This commit is contained in:
Nithin David Thomas 2019-10-07 20:28:14 +05:30 committed by GitHub
commit d9b97bc92e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 71 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/javascript/src/assets/scss/_variables.scss
View file

@ -55,6 +55,8 @@ $color-white: #FFF;
$color-body: #3C4858;
$color-heading: #1F2D3D;
$color-modal-header: #f1f1f1;
$color-extra-light-blue: #F5F7F9;
// Thumbnail
$thumbnail-radius: 4rem;

138
app/javascript/src/assets/scss/widgets/_emojiinput.scss
View file

@ -1,20 +1,20 @@
.emoji-dialog {
width: 28.6rem;
height: 20rem;
background: $color-white;
box-sizing: content-box;
border-radius: 2px;
position: absolute;
top: -22rem;
right: 0;
padding-bottom: $space-two;
@include elegant-card;
background: $color-white;
border-radius: 2px;
box-sizing: content-box;
height: 20rem;
padding-bottom: $space-two;
position: absolute;
right: 0;
top: -22rem;
width: 28.6rem;
&:before {
position: absolute;
bottom: -$space-slab;
right: $space-two;
&::before {
@include arrow(bottom, $color-white, $space-slab);
bottom: -$space-slab;
position: absolute;
right: $space-two;
}
.emojione {
@ -23,84 +23,84 @@
}
.emoji-row {
box-sizing: border-box;
overflow-y: scroll;
height: 180px;
@include padding($space-small);
box-sizing: border-box;
height: 180px;
overflow-y: scroll;
padding-bottom: 0;
.emoji {
border-radius: 4px;
display: inline-block;
padding: 5px;
border-radius: 4px;
}
.emojione{
margin: 0.6rem;
float:left;
.emojione {
cursor: pointer;
}
}
.emoji-dialog-header {
@include padding($zero $space-smaller);
background-color: $light-gray;
border-top-left-radius: $space-small;
border-top-right-radius: $space-small;
ul {
padding: 0;
margin: 0;
list-style: none;
padding-top: $space-smaller;
li {
display: inline-block;
box-sizing: border-box;
height: 3.4rem;
text-align: center;
@include padding($space-small $space-small);
cursor: pointer;
img, svg {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
&.active {
background: #fff;
border-top-left-radius: $space-small;
border-top-right-radius: $space-small;
img,
svg {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
}
}
float: left;
margin: .6rem;
}
}
.emoji-category-title {
color: $color-heading;
font-size: $font-size-small;
font-weight: $font-weight-medium;
color: $color-heading;
text-transform: capitalize;
margin: 0;
text-transform: capitalize;
}
.emoji-category-heading-decoration {
text-align: right;
}
}
.emoji-dialog .emoji-category-header > * {
display: table-cell;
vertical-align: middle;
.emoji-dialog-header {
@include padding($zero $space-smaller);
background-color: $light-gray;
border-top-left-radius: $space-small;
border-top-right-radius: $space-small;
ul {
list-style: none;
margin: 0;
padding: $space-smaller 0 0;
> li {
@include padding($space-small $space-small);
box-sizing: border-box;
cursor: pointer;
display: inline-block;
height: 3.4rem;
text-align: center;
}
> .active {
background: $white;
border-top-left-radius: $space-small;
border-top-right-radius: $space-small;
}
img,
svg {
filter: grayscale(100%);
}
}
.active {
img,
svg {
filter: grayscale(0);
}
}
> * {
display: table-cell;
vertical-align: middle;
}
}
.emoji-dialog .emoji-row
.emoji-dialog .emoji-row,
.emoji-dialog .emoji-row .emoji:hover {
background: #F5F7F9;
background: $color-extra-light-blue;
}