lib/scss/6_components/_conversations.scss
/*
CONVERSATIONS
========================================================================
$conversation-vote-circle-size: 18px !default;
$conversation-toast-image-border: $spacing-unit-tiny / 3;
$conversation-button-size: $spacing-unit-small + $spacing-unit-tiny !default;
$icon-arrow-down: url("/static/img/icons/arrow-down.svg") !default;
$conversation-card-font-size-small: 12px !default;
$conversation-card-border-arrow-size: $spacing-unit;
$profile-label-clear-color: #30BFD3 !default;
$modalities-content-width-max: ($page-content-width-max / 2) - 29 !default;
$color-for-unfolding: rgba(2, 16.9, 27.8, 0.6);
$color-background-button-modalities: rgba(255, 255, 255, 0.3);
.ConversationList {
@extend .container-1;
max-width: 100%;
p {
padding: 0 $spacing-unit / 3;
}
&-title {
text-align: center;
margin-top: $spacing-unit;
h1 {
font-size: $font-size-h2;
color: $color-accent;;
}
.topic {
display: none;
}
}
&-urls {
font-size: $font-size-tiny;
a, i {
color: $color-content;
}
i {
font-size: $font-size-tiny * 0.8;
}
.public {
float: left;
margin-left: $spacing-unit-tiny;
}
.my-conversations {
float: right;
margin-right: $spacing-unit-tiny;
}
margin-bottom: $spacing-unit-large;
}
&-cardList {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: center;
padding-bottom: $spacing-unit;
> * {
margin: $spacing-unit;
}
.slick-list {
margin: 0;
width: 100vw;
}
.slick-track {
> * {
margin: $spacing-unit-small;
position: relative;
width: 100vw;
}
}
}
&-link {
text-align: center;
}
img {
max-width: 245px;
width: 100%;
max-height: 60px;
}
}
.ConversationFooter {
background-color: #D4F7F5;
height: 180px;
width: 100vw;
align-items: center;
justify-content: center;
display: flex;
flex-direction: column;
p {
text-align: center;
}
}
.ConversationTags {
font-weight: bold;
text-align: center;
padding: $spacing-unit-small + $spacing-unit-tiny $spacing-unit-small $spacing-unit-small $spacing-unit-small;
}
.ConversationCard {
align-self: stretch;
box-sizing: border-box;
border: 0;
border-radius: $border-radius-round;
flex-grow: 1;
margin: 0;
margin-bottom: $spacing-unit;
text-align: center;
width: 100%;
max-width: 320px;
height: 320px;
overflow: hidden;
position: relative;
padding: 0;
h1 {
font-size: $font-size-h4;
font-family: $font-stack-paragraph;
font-weight: 600;
text-transform: none;
}
&-container {
align-self: stretch;
text-align: center;
width: 100%;
max-width: 320px;
box-sizing: border-box;
}
&-moderation {
text-transform: uppercase;
display: block;
font-weight: bold;
color: $color-content;
font-size: $font-size-tiny;
margin: $spacing-unit / 2 0;
}
&-cover {
display: flex;
flex-flow: column;
flex-grow: 1;
margin: 0;
padding: 0 $spacing-unit;
position: relative;
z-index: 2;
overflow: hidden;
max-height: 86px;
h1 {
display: flex;
flex-flow: column;
margin: 0;
vertical-align: middle;
a {
color: white;
}
}
dl {
font-size: $font-size-tiny;
margin: $spacing-unit-tiny 0;
dt {
display: inline;
}
dd {
display: inline;
margin: 0;
}
}
}
&-cover + .ConversationCard-actions {
padding: 0 $spacing-unit-small $spacing-unit-small $spacing-unit-small;
background-size: 30px;
margin-top: $spacing-unit;
bottom: 0;
position: absolute;
box-sizing: border-box;
width: 100%;
}
&-actions {
.button.is-primary {
padding: $spacing-unit-small + $spacing-unit-tiny;
background: $color-content;
font-size: $font-size-small;
padding-top: $font-size-small;
padding-bottom: $font-size-small;
i {
margin-left: $spacing-unit-tiny;
}
}
}
&-statistics {
color: $color-hint;
display: flex;
justify-content: center;
padding: $spacing-unit-small;
margin: $spacing-unit-tiny $spacing-unit;
li {
list-style: none;
display: inline-block;
margin: 0 $spacing-unit / 2;
}
}
@include breakpoint('sm') {
margin: $spacing-unit-tiny;
}
}
.Modalities {
display: none;
align-content: center;
flex-direction: column;
align-items: center;
align-self: center;
background-color: $color-for-unfolding;
padding-right: 0;
position: absolute;
z-index: 4;
top: 0;
right: 0;
bottom: 0;
left: 0;
outline: 0;
//Modalities slider
.swiper-container {
margin: auto auto;
max-width: $spacing-unit-huge * 4;
}
.swiper-wrapper {
align-items: center;
@include breakpoint('sm') {
margin: auto 0 auto $spacing-unit - $spacing-unit-tiny;
}
@include breakpoint('sm') {
margin: auto 0 auto $spacing-unit + $spacing-unit-small;
}
}
.style-slide-center {
margin: auto auto;
align-items: center;
margin: auto $spacing-unit-small + $spacing-unit;
}
.swiper-slide {
@include breakpoint('sm') {
margin: 0px $spacing-unit + $spacing-unit-small 0px 0px;
}
@include breakpoint('sm') {
margin: 0px $spacing-unit-large + $spacing-unit 0px 0px;
}
display: flex;
width: $spacing-unit-huge * 3 - $spacing-unit-small;
line-height: 1.2;
bottom: auto;
background-color: $color-background;
text-align: center;
border-radius: $spacing-unit-small;
position: relative;
border: 1px solid $color-accent;
padding: $spacing-unit-tiny * 2;
flex-direction: column;
align-items: center;
-webkit-justify-content: center;
.append-buttons {
padding: $spacing-unit-small + $spacing-unit-tiny 0px $spacing-unit-tiny 0px;
a {
color: color('primary');
font-weight: bold;
font-size: $font-size-default;
}
}
p {
padding: $spacing-unit 0 $spacing-unit-tiny 0;
margin: 0;
font-size: $spacing-unit-small;
color: $color-content;
}
h3 {
padding: $spacing-unit-small 0 $spacing-unit 0;
margin: 0;
font-family: $font-stack-raleway;
font-weight: bold;
font-size: $font-size-larger;
color: $color-accent;
}
.swiper-pagination {
position: relative;
}
.swiper-pagination-bullet {
margin: 0px $font-size-tiny-tiny;
background: $color-hint;
}
.swiper-pagination-bullet-active {
background: $color-content;
}
}
.swiper-button-next {
@include breakpoint('sm') {
margin: -($spacing-unit-small + $spacing-unit-tiny) (-$spacing-unit-small - $spacing-unit-tiny) 0px 0px;
}
@include breakpoint('sm') {
margin: -($spacing-unit-small + $spacing-unit-tiny) 0px 0px 0px;
}
width: $spacing-unit;
color: color('primary');
border: 1px solid;
height: $spacing-unit-large - $spacing-unit-tiny;
padding: 0px $spacing-unit-tiny 0px $spacing-unit-small;
background-color: $color-background-button-modalities;
border-radius: $spacing-unit-large;
font-size: $spacing-unit + $spacing-unit-tiny;
background-size: $spacing-unit ($spacing-unit + $spacing-unit-tiny);
}
.swiper-button-prev {
@include breakpoint('sm') {
margin: -($spacing-unit-small + $spacing-unit-tiny) $spacing-unit-tiny 0px $spacing-unit-tiny - $spacing-unit;
}
@include breakpoint('sm') {
margin: -($spacing-unit-small + $spacing-unit-tiny) $spacing-unit-tiny 0px (-$spacing-unit-tiny);
}
width: $spacing-unit;
color: color('primary');
left: $spacing-unit-small;
border: 1px solid;
height: $spacing-unit-large - $spacing-unit-tiny;
padding: 0px $spacing-unit-tiny 0px $spacing-unit-small;
background-color: $color-background-button-modalities;
border-radius: $spacing-unit-large;
font-size: $spacing-unit + $spacing-unit-tiny;
background-size: $spacing-unit $spacing-unit + $spacing-unit-tiny;
}
.modalities-slider.show {
visibility: visible;
}
@include breakpoint('md') {
.swiper-container {
max-width: $spacing-unit-huge * 3 - $spacing-unit-small - $spacing-unit-tiny;
}
.swiper-slide {
max-width: ($spacing-unit-huge * 2) + $spacing-unit-tiny;
}
img {
padding: 0px $spacing-unit - $spacing-unit-tiny;
max-width: 25%;
}
.imgpart {
padding: 0px $spacing-unit-small;
max-width: 90%;
}
.imgponte {
padding: 0px $spacing-unit - $spacing-unit-tiny;
max-width: 70%;
}
.imgopn {
padding: 0px $spacing-unit - $spacing-unit-tiny;
max-width: 70%;
}
.button {
font-weight: bold;
font-size: $spacing-unit-small;
margin: $spacing-unit + $spacing-unit-tiny 0px $spacing-unit-tiny 0px;
background-color: #30BFD3;
}
.fa-times {
padding: 0px $spacing-unit - $spacing-unit-tiny;
font-size: $spacing-unit - $spacing-unit-tiny;
color: $color-accent;
}
.fa-arrow-right {
padding: 0px $spacing-unit - $spacing-unit-tiny;
font-size: $spacing-unit - $spacing-unit-tiny;
color: color('primary');
}
.fa-check {
padding: 0px $spacing-unit - $spacing-unit-tiny;
font-size: $spacing-unit - $spacing-unit-tiny;
color: $color-content;
}
}
@include breakpoint('sm') {
.swiper-container {
max-width: $spacing-unit-huge * 4;
}
.swiper-slide {
max-width: $modalities-content-width-max;
.button {
font-weight: bold;
font-size: 17px;
}
}
img {
padding: 0px $spacing-unit - $spacing-unit-tiny;
max-width: 20%;
}
.imgpart {
padding: 0px $spacing-unit - $spacing-unit-tiny;
max-width: 77%;
}
.imgponte {
padding: 0px $spacing-unit - $spacing-unit-tiny;
max-width: 77%;
}
.imgopn {
padding: 0px $spacing-unit - $spacing-unit-tiny;
max-width: 77%;
}
.fa-times {
padding: 0px $spacing-unit - $spacing-unit-tiny;
font-size: $spacing-unit - $spacing-unit-tiny;
color: $color-accent;
}
.fa-arrow-right {
padding: 0px $spacing-unit - $spacing-unit-tiny;
font-size: $spacing-unit - $spacing-unit-tiny;
color: color('primary');
}
.fa-check {
padding: 0px $spacing-unit - $spacing-unit-tiny;
font-size: $spacing-unit - $spacing-unit-tiny;
color: $color-content;
}
}
//Modalities static
.style-slide {
margin: 0px;
width: $spacing-unit-huge * 3;
line-height: 1.2;
bottom: auto;
background-color: $color-background;
text-align: center;
border-radius: $spacing-unit-tiny;
position: relative;
border: 1px solid $color-accent;
padding: $spacing-unit-tiny * 2;
flex-direction: row;
align-items: center;
-webkit-justify-content: center;
.append-buttons {
padding: $spacing-unit-tiny 0px;
a {
color: color('primary');
font-weight: bold;
}
}
p {
padding: $spacing-unit-small 0 $spacing-unit-tiny 0;
margin: 0;
font-size: $font-size-default;
color: $color-content;
}
h3 {
padding: $spacing-unit-tiny 0 $spacing-unit-small 0;
margin: 0;
font-family: $font-stack-raleway;
font-weight: bold;
font-size: $font-size-large;
color: $color-accent;
}
.button-closer {
background-color: $color-content;
border: none;
border-radius: $spacing-unit-large;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
font-weight: bold;
padding: 0px;
text-align: center;
text-transform: uppercase;
transition: all 200ms ease-in-out;
vertical-align: middle;
.fa-times {
font-size: $spacing-unit-tiny;
color: $color-background;
}
}
}
// Imagens do modal com especificações diferentes
@include breakpoint('sm') {
.style-slide {
max-width: $spacing-unit-huge * 2 - $spacing-unit-small;
}
.imgponte {
margin: -($spacing-unit * 2 + $spacing-unit-tiny) ($spacing-unit-huge - $spacing-unit-tiny) 0px (-$spacing-unit-huge + $spacing-unit - $spacing-unit-tiny);
max-width: 16%;
}
.button-closer {
margin: 0px 0px (-$spacing-unit-tiny) ($spacing-unit-huge * 2 - $spacing-unit);
.fa-times {
padding: $spacing-unit-tiny $spacing-unit-tiny;
}
}
}
@include breakpoint('sm') {
.style-slide {
max-width: $modalities-content-width-max;
}
.imgponte {
margin: -($spacing-unit * 2 + $spacing-unit-tiny) ($spacing-unit-huge * 2 + $spacing-unit-tiny) 0px 0px;
}
.button-closer {
margin: 0px 0px (-$spacing-unit) $spacing-unit-huge * 2.5;
.fa-times {
padding: $spacing-unit-tiny;
}
}
}
}
.ConversationDetail-content {
position: relative;
.Comment {
position: relative;
min-height: 340px !important;
width: 100% !important;
display: inline-block;
float: left;
max-width: $header-wrapper-max-width;
margin: 0 auto;
display: flex;
flex-direction: column;
.CommentCard {
word-wrap: break-word;
flex: 1;
flex-basis: auto;
left: 0;
right: 0;
margin: auto;
box-sizing: border-box;
border-radius: $border-radius-large;
font-size: $font-size-h3;
max-width: $page-content-width-max;
min-height: 340px !important;
width: 100% !important;
z-index: 3;
padding: ($spacing-unit-large - $spacing-unit-tiny) ($spacing-unit-large - $spacing-unit-small);
//background-color: color('primary');
color: $color-content-text;
&-counter {
text-align: center;
p {
margin: 0;
}
}
img {
background: color('primary', contrast);
border: 1px solid #fff;
border-radius: $spacing-unit-large;
padding: 4px $spacing-unit-tiny;
}
i.fa {
background: color('primary', contrast);
border: 2px solid #fff;
border-radius: $spacing-unit-large;
padding: $spacing-unit-tiny;
}
}
#commentform {
flex: 1;
flex-basis: auto;
position: absolute;
left: 0;
right: 0;
margin: auto;
visibility: hidden;
max-width: $page-content-width-max;
min-height: 340px !important;
height: 100% !important;
width: 100% !important;
box-sizing: border-box;
text-align: center;
//background: $color-hint;
border-radius: $border-radius-large;
padding: (3 * $spacing-unit-tiny) ($spacing-unit-large - $spacing-unit-small);
z-index: 5;
p {
margin: $spacing-unit-small ($spacing-unit + $spacing-unit-tiny);
color: $color-content;
}
textarea {
width: 100%;
margin: 0 0 0 0;
min-height: 3 * $font-size;
outline: none;
//border: 2px solid color('primary');
border: 2px solid;
background: $color-content-text;
//color: #333;
box-shadow: none;
}
#characters-count {
display: block;
text-align: right;
@include breakpoint('sm') {
padding: 0px;
}
@include breakpoint('sm') {
padding: 0px ($spacing-unit + $spacing-unit-tiny) 0px 0px;
}
}
&-fakeButton,
input[type=submit] {
border-radius: $border-radius;
color: #fff;
//background: color('primary');
padding: $spacing-unit-small $spacing-unit;
font-size: $spacing-unit / 2;
box-shadow: none;
text-transform: uppercase;
font-weight: bold;
}
}
#commentform.show {
visibility: visible;
-webkit-animation: fadeInUp 500ms ease-in-out;
animation: fadeInUp 500ms ease-in-out;
}
@-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(40px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
#commentform.hideanimation {
visibility: visible;
-webkit-animation: fadeOutDown 500ms ease-in-out;
animation: fadeOutDown 500ms ease-in-out;
}
&-fakeButton,
input[type=submit] {
border-radius: $border-radius;
color: #fff;
background: $color-accent;
border: 0;
padding: $spacing-unit-small $spacing-unit;
font-size: $spacing-unit / 2;
box-shadow: none;
text-transform: uppercase;
font-weight: bold;
margin-top: $spacing-unit-small;
}
@-webkit-keyframes fadeOutDown {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(40px);
}
}
#toast {
line-height: 1.2;
visibility: hidden;
background-color: $color-hint;
text-align: left;
border-radius: $spacing-unit-tiny;
position: fixed;
z-index: 3;
width: 100vw;
left: 0;
bottom: 0; //$header-top-nav-height;
> div {
padding: $spacing-unit-tiny;
max-width: 660px;
margin: 0 auto;
p {
padding: 0 0 $spacing-unit-tiny 0;
margin: 0;
font-size: $font-size-small;
color: $color-content;
}
h3 {
padding: $spacing-unit-tiny 0 0 0;
margin: 0;
font-family: $font-stack-raleway;
font-weight: bold;
font-size: $font-size-default;
color: color('primary');
}
img {
@include breakpoint('sm') {
max-width: $spacing-unit;
margin: $spacing-unit-tiny $spacing-unit-small auto 0;
background-color: #fff;
border: ($border-radius-tiny * 4) / 3 solid color('primary');
border-radius: $spacing-unit-large;
padding: $spacing-unit-tiny;
}
@include breakpoint('sm') {
max-width: $spacing-unit;
//margin-right: $spacing-unit-small;
margin: auto $spacing-unit-small auto 0;
background-color: #fff;
border: $border-radius-tiny solid color('primary');
border-radius: $spacing-unit-large;
padding: $spacing-unit-tiny;
}
}
}
}
#toast.show {
visibility: visible;
// -webkit-animation: fade 8s;
animation: fade 8s both;
}
@keyframes fade {
0% {
opacity: 0;
bottom: 0;
}
20% {
opacity: 1;
bottom: 45px;
}
70% {
opacity: 1;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
}
.Comment-create {
position: relative;
justify-content: center;
button {
padding: $spacing-unit 0px 0px 0px;
color: $color-accent;
background: transparent no-repeat;
border: none;
cursor: pointer;
overflow: hidden;
outline: none;
font-weight: bold;
}
p {
text-align: center;
}
}
}
.CircleButton {
@include color('content');
cursor: pointer;
display: inline-block;
border-radius: 100%;
font-size: $font-size-h2;
height: $conversation-button-size;
padding: $spacing-unit-tiny;
text-align: center;
vertical-align: middle;
width: $conversation-button-size;
&-leftConversationSlider,
&-rightConversationSlider {
margin: 0;
position: absolute;
top: (8 * $line-height + $conversation-button-size) - ($spacing-unit-large - $spacing-unit-small);
z-index: 10;
@include breakpoint('sm') {
visibility: hidden;
z-index: -1;
}
}
&-leftConversationSlider {
left: $spacing-unit-tiny;
z-index: 3;
}
&-rightConversationSlider {
right: $spacing-unit-tiny;
z-index: 3;
}
}
.Link {
display: flex;
flex-direction: row;
}
.Link-new {
text-align: center;
display: block;
width: 100%;
text-transform: uppercase;
font-size: $spacing-unit / 2;
font-weight: bold;
border-bottom: 1px solid $color-hint;
margin: 0;
padding: $spacing-unit-small 0;
color: $color-accent;
i {
color: $color-accent;
}
}
.Link-edit {
text-align: center;
display: block;
width: 100%;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
border-bottom: 1px solid $color-hint;
margin: 0;
padding: $spacing-unit-small 0;
color: $color-content;
i {
color: $color-content;
}
}
.view-board {
text-align: center;
display: block;
width: 100%;
font-size: $font-size-tiny;
// #TODO: box-shadow: $header-box-shadow-upper;
margin: 0;
padding: $spacing-unit-small 0;
select {
width: 50%;
border: none;
font-weight: bold;
-webkit-appearance: none;
background: url($icon-arrow-down) no-repeat right;
background-size: 16px 16px;
padding: 0;
margin: 0 10px;
}
}
.Moderate {
.ConversationDetail-banner h1 {
font-family: "Raleway", sans-serif;
color: $color-content;
}
&-comments-tabs {
padding: 0;
background: $color-hint;
display: flex;
flex-wrap: wrap;
li {
list-style: none;
flex-grow: 1;
flex-basis: 0;
font-size: $spacing-unit / 2;
font-weight: bold;
text-align: center;
a {
color: color('primary');
opacity: 0.5;
border-bottom: 2px solid transparent;
padding: 5px 0;
display: inline-block;
&.active {
opacity: 1;
border-bottom: 2px solid color('primary');
}
}
}
}
&-comments {
h1 {
text-align: center;
color: $color-accent;;
}
.Comment {
background: #fff;
color: $color-content;
font-family: "Raleway", sans-serif;
font-size: $spacing-unit / 2;
border: 0;
border-radius: 0;
border-bottom: 1px solid $color-hint;
min-height: 0 !important;
padding: $spacing-unit;
p {
text-align: center;
font-size: $spacing-unit / 2;
font-weight: 600;
}
&-metadata {
color: $color-hint;
font-size: $spacing-unit / 2;
display: flex;
justify-content: space-between;
}
}
}
.ConversationComment-actions {
padding: 0;
display: flex;
justify-content: space-between;
li {
list-style: none;
&:before {
content: "\f00c";
font-family: 'Font Awesome\ 5 Free';
font-weight: 900;
display: inline-block;
//color: $color-green-dark;
padding: 2px 4px;
font-size: 11px;
//border: 2px solid $color-green-dark;
border-radius: 50%;
}
}
li + li:before {
content: "\f00d";
color: #9c2715;
border-color: #9c2715;
padding: 2px 6px;
}
li span {
display: none;
}
.button {
border: 0;
border-radius: 0;
background: #fff;
font-weight: bold;
font-size: $spacing-unit / 2;
color: $color-content;
box-shadow: none;
padding-left: 0;
outline: 0;
margin: 0;
}
}
.Comment-status-approved .ConversationComment-actions li {
opacity: 1;
}
.Comment-status-approved .ConversationComment-actions li + li {
opacity: 0.3;
}
.Comment-status-rejected .ConversationComment-actions li {
opacity: 0.3;
}
.Comment-status-rejected .ConversationComment-actions li + li {
opacity: 1;
}
.Comment-status-approved .ConversationComment-actions li:hover,
.Comment-status-rejected .ConversationComment-actions li:hover {
opacity: 1;
}
.Comment-status-rejected .CommentListItem-footer {
text-align: center;
}
.Comment-rejection {
background: $color-hint;
border-top: 1px solid $color-hint;
border-bottom: 1px solid $color-hint;
text-align: center;
p {
font-weight: lighter;
font-size: $spacing-unit / 2;
}
textarea {
outline: 0;
border-style: solid;
box-shadow: inset 0 0 0 0 black;
border-color: $color-hint;
}
.button {
box-shadow: none;
box-sizing: border-box;
width: 90%;
background: $color-accent;
}
}
.Conversation-edit-field {
@extend .container-1;
outline: 0;
background-color: rgba(255, 255, 255, 0.5);
border: 0;
font-family: "Raleway", sans-serif;
color: $color-content;
padding: $spacing-unit;
text-align: center;
font-weight: 200 !important;
font-size: $spacing-unit - $spacing-unit-tiny !important;
box-shadow: none;
border: 1px solid color('primary');
border-radius: $border-radius-small;
resize: none;
overflow: hidden;
min-height: 50px;
max-height: 300px;
max-width: none;
width: 100%;
&::placeholder {
color: $color-content;
opacity: 1;
}
@include breakpoint('lg') {
padding: $spacing-unit;
}
}
.ConversationEdit-actions {
display: flex;
padding: $spacing-unit / 2 0;
span {
flex: 1;
text-align: center;
i {
border-radius: 50%;
border: 3px solid $color-content;
display: inline-block;
width: 16px;
height: 16px;
padding: 4px 2px 0 2px;
font-size: 11px;
color: $color-content;
background: $color-background;
}
}
input {
border: 0;
background: #fff;
padding: $spacing-unit 0;
box-shadow: none;
font-family: "Raleway", sans-serif;
font-size: $spacing-unit / 2;
color: $color-content;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
width: auto;
&:before {
font-weight: lighter;
}
}
span + span i {
color: $color-content;
border-color: $color-content;
background: $color-background;
&.create-conversation-icon {
color: $color-accent;
border-color: $color-accent;
}
}
}
}
.ConversationField {
display: flex;
justify-content: center;
i {
padding: 0 $spacing-unit * 2;
align-self: center;
color: color('primary');
}
input, select {
border: 1px solid color('primary');
border-radius: $border-radius-small;
background-color: rgba(255, 255, 255, 0.5);
box-shadow: none;
outline: 0;
padding-top: 8px;
font-size: $spacing-unit / 2;
color: $color-content;
flex-grow: 1;
margin-right: $spacing-unit;
max-width: none;
&::placeholder {
color: $color-content;
opacity: 1;
}
}
input + i, select + i {
color: $color-content;
font-weight: lighter;
display: none;
}
}
.ConversationEdit-attributes {
padding: $spacing-unit;
i {
color: $color-accent;
margin-right: $spacing-unit;
}
span {
color: $color-content;
opacity: 0.5;
font-size: $spacing-unit / 2;
}
p {
text-align: left;
}
}
.ConversationEdit-promote {
padding: $spacing-unit;
input {
width: auto;
box-shadow: none;
border: 1px solid $color-content;
background: white;
}
label {
color: $color-content;
font-size: $spacing-unit / 2;
font-weight: bold;
display: inline;
}
}
.Conversation-AddComment {
text-align: center;
cursor: pointer;
text-transform: uppercase;
font-weight: bold;
font-size: $spacing-unit / 2;
}
*/