lib/scss/components/conversations/_detail.scss
//------------------------------------------------------------------------------
// CONVERSATION DETAIL (balloon / comment card / comment form / extra / progress bar)
//------------------------------------------------------------------------------
@import '../../../node_modules/mendeleev.css/src/components/mixins/arrow';
$component-border-radius: size(config('ej.style.border-radius'));
@mixin themed($prop, $value: null) {
@if $value == light {
#{$prop}: color('brand-lighter');
#{$prop}: var(--theme-light-color);
} @else {
#{$prop}: color('brand');
#{$prop}: var(--theme-color);
}
}
.conversation-balloon {
@extend .center;
margin-bottom: .75rem;
article {
@include utilities('pad-y3 pad-x3');
@include themed('background', light);
text-align: left;
border-radius: 0 0 $component-border-radius $component-border-radius;
span {
@include themed('color');
font-family: 'roboto', sans-serif;
i {
margin-left: 0;
}
}
}
h1 {
@include utilities('sans-serif margin-y3');
@extend .h2;
font-family: 'roboto', sans-serif;
}
&__arrow {
@include create-arrow(down, 4rem, color('brand-lighter'));
border-left: 4rem solid transparent;
border-right: 4rem solid transparent;
border-top: 2.75rem solid;
margin-left: 2rem;
bottom: 1px;
color: var(--theme-light-color);
position: relative;
}
&__social {
@include utilities('row pad-x4');
bottom: 1.5rem;
position: relative;
i {
color: color('accent');
}
}
// For forms
input,
textarea {
background: rgba(255, 255, 255, 0.25);
border-radius: 0.375rem;
height: 2rem;
line-height: 2rem;
max-width: 100%;
min-width: 9em;
}
textarea {
height: 4.5rem;
font-size: 1.5rem;
line-height: 2.25rem;
text-align: center;
}
}
.side-space {
padding: 0 1.5em;
}
.comment-card, .comment-form {
@include utilities('pad-3p margin-x2 measure width-full');
border-radius: $component-border-radius;
}
.comment-card {
@include utilities('bold');
@include themed('background');
color: color('white');
display: flex;
flex-direction: column;
&__author-img {
@include utilities('margin-r1');
align-items: center;
display: inline-flex;
background-color: color('white');
border-radius: 50%;
border: 2px solid color('white');
height: 1.5rem;
justify-content: center;
vertical-align: middle;
width: 1.5rem;
.fa, .fas, .far {
margin: 0 !important;
}
}
> article {
@include utilities('margin-y2 text-4');
font-weight: 600;
min-height: 7rem;
}
> form {
max-width: 20rem;
margin: 0 auto;
}
&__button {
@include utilities('col items-center');
button {
@include utilities('flex-center');
background: transparent;
border: none;
height: initial;
margin: 0;
padding: 0;
&:hover {
box-shadow: none;
}
}
i {
background: rgba(255, 255, 255, 0.75);
border-radius: 50em;
border: none;
display: block;
font-size: 1.5rem;
height: 3rem;
line-height: 3rem;
padding: 0;
width: 3rem;
&:hover {
@include utilities('shadow-2');
}
}
span {
@include utilities('uppercase text-7');
}
}
&__message {
strong {
@include utilities('uppercase color-accent pad-1 rounded-2');
}
}
}
.comment-form {
@include utilities('center text-black');
@include themed('background', light);
label {
@include utilities('regular margin-b2 text-black');
text-transform: none;
}
textarea {
background-color: color('white');
margin: size(1) 0 0 0;
min-height: 10em;
width: 100%;
}
form {
margin: 0;
}
&__count {
@include utilities('text-7');
bottom: 2rem;
color: color('black', $alpha: 0.5);
float: right;
position: relative;
right: 0.5rem;
}
input[type=submit] {
@include themed('background');
border-color: css-var(--theme-color, color('brand'));
margin-bottom: 0;
}
}
.extra-content {
@include utilities('center');
margin: 2rem auto;
width: 75%;
h1 {
@include utilities('text-4 uppercase text-brand sans-serif bold');
}
}
.progress-bar {
@include utilities('row flex-center items-center margin-y1');
margin: 0 auto;
max-width: 18em;
&__progress {
@include margin-scale((x: 1));
display: flex;
border: 1px solid color('brand');
border-radius: 50rem;
height: 0.5rem;
width: 100%;
}
}