scottk/chatwoot
1
0
Fork 0
mirror of https://github.com/lingble/chatwoot.git synced 2025-11-20 04:54:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix #70 issue codeclimate in app/javascript/src/assets/scss/widgets/_emojiinput.scss

Browse Source
This commit is contained in:
Kirill Arutyunov
2019-10-06 16:08:17 +03:00
parent 9b9aee4657
commit 942f47fa2d
2 changed files with 71 additions and 69 deletions
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-body: #3C4858;
$color-heading: #1F2D3D; $color-heading: #1F2D3D;
$color-modal-header: #f1f1f1; $color-modal-header: #f1f1f1;
$color-extra-light-blue: #F5F7F9;
// Thumbnail // Thumbnail
$thumbnail-radius: 4rem; $thumbnail-radius: 4rem;

108
app/javascript/src/assets/scss/widgets/_emojiinput.scss
View File

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