@zohodesk/dot/es/ChannelIcon/ChannelIcon.module.css

In this Library, we Provide Some Basic Components to Build Your Application

.varClass {
  --iconColor: var(--zdt_channelIcon_icon);
  --topIconBg: var(--zdt_channelIcon_topIcon_bg);
  --topIconColor: var(--zdt_channelIcon_topIcon_iconGreen);
  --topIconBorderColor: var(--zdt_channelIcon_topIcon_border);
}

.container {
  position: relative;
  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
  vertical-align: middle;
  composes: varClass;
}

.thread {
  composes: dflex alignVertical alignHorizontal rounded from '~@zohodesk/components/lib/common/common.module.css';
  position: absolute;
  top: calc( var(--zd_size4) * -1 ) ;
  height: var(--zd_size15) ;
  width: var(--zd_size15) ;
  /* css:theme-validation:ignore */
  background-color: var(--topIconBg);
}

[dir=ltr] .thread {
  right: calc( var(--zd_size1) * -1 ) ;
}

[dir=rtl] .thread {
  left: calc( var(--zd_size1) * -1 ) ;
}

.threadBorder {
  border: 1px solid var(--topIconBorderColor);
}

.iconStyle {
  position: relative;
  color: var(--iconColor);
}

/* Channel Icon Style */
/* path */
.email_incoming span:first-child:before,
.email_outgoing span:first-child:before,
.email_missed span:first-child:before,
.email_forward span:first-child:before,
.email_forwarddraft span:first-child:before,
.facebook_incoming span:first-child:before,
.facebook_outgoing span:first-child:before,
.facebook_missed span:first-child:before,
.facebook_forward span:first-child:before,
.facebook_forwarddraft span:first-child:before,
.facebook_dm_default span:first-child:before,
.facebook_dm_incoming span:first-child:before,
.facebook_dm_outgoing span:first-child:before,
.facebook_dm_draft span:first-child:before,
.facebook_dm_forward span:first-child:before,
.facebook_dm_forwarddraft span:first-child:before,
.twitter_incoming span:first-child:before,
.twitter_outgoing span:first-child:before,
.twitter_missed span:first-child:before,
.twitter_forward span:first-child:before,
.twitter_forwarddraft span:first-child:before,
.forums_incoming span:first-child:before,
.forums_outgoing span:first-child:before,
.forums_missed span:first-child:before,
.forums_forward span:first-child:before,
.forums_forwarddraft span:first-child:before,
.chat_incoming span:first-child:before,
.chat_outgoing span:first-child:before,
.chat_missed span:first-child:before,
.chat_forward span:first-child:before,
.chat_forwarddraft span:first-child:before,
.offline_chat_incoming span:first-child:before,
.offline_chat_outgoing span:first-child:before,
.offline_chat_missed span:first-child:before,
.offline_chat_forward span:first-child:before,
.offline_chat_forwarddraft span:first-child:before,
.online_chat_incoming span:first-child:before,
.online_chat_outgoing span:first-child:before,
.online_chat_missed span:first-child:before,
.online_chat_forward span:first-child:before,
.online_chat_forwarddraft span:first-child:before,
.phone_incoming span:first-child:before,
.phone_outgoing span:first-child:before,
.phone_missed span:first-child:before,
.phone_forward span:first-child:before,
.phone_forwarddraft span:first-child:before,
.web_incoming span:first-child:before,
.web_out span:first-child:before,
.web_missed span:first-child:before,
.web_forward span:first-child:before,
.web_forwarddraft span:first-child:before,
.customerportal_incoming span:first-child:before,
.customerportal_out span:first-child:before,
.customerportal_missed span:first-child:before,
.customerportal_forward span:first-child:before,
.customerportal_forwarddraft span:first-child:before,
.feedback_default span:first-child:before,
.feedback_incoming span:first-child:before,
.feedback_out span:first-child:before,
.feedback_missed span:first-child:before,
.feedback_forward span:first-child:before,
.feedback_forwarddraft span:first-child:before {
  color: inherit;
}

/* Email */
.email_incoming,
.email_missed,
.email_outgoing {
  bottom: var(--zd_size2) ;
}

/* twitter */
.twitter_incoming,
.twitter_outgoing,
.twitter_missed {
  bottom: var(--zd_size1) ;
}

/* facebook */
[dir=ltr] .facebook_incoming, [dir=ltr] .facebook_missed, [dir=ltr] .facebook_outgoing {
  right: var(--zd_size2) ;
}
[dir=rtl] .facebook_incoming, [dir=rtl] .facebook_missed, [dir=rtl] .facebook_outgoing {
  left: var(--zd_size2) ;
}

/* chat */
.chat_incoming,
.offline_chat_incoming,
.online_chat_incoming,
.chat_missed,
.offline_chat_missed,
.online_chat_missed,
.chat_outgoing,
.offline_chat_outgoing,
.online_chat_outgoing {
  bottom: var(--zd_size1) ;
}

/* forums */
.forums_default {
  top: var(--zd_size1) ;
}

/* feedback */
.feedback_incoming,
.feedback_missed,
.feedback_out {
  top: var(--zd_size1) ;
}
[dir=ltr] .feedback_incoming, [dir=ltr] .feedback_missed, [dir=ltr] .feedback_out {
  right: var(--zd_size1) ;
}
[dir=rtl] .feedback_incoming, [dir=rtl] .feedback_missed, [dir=rtl] .feedback_out {
  left: var(--zd_size1) ;
}

/* draft */
[dir=ltr] .email_draft, [dir=ltr] .facebook_draft, [dir=ltr] .twitter_draft, [dir=ltr] .forums_draft, [dir=ltr] .chat_draft, [dir=ltr] .offline_chat_draft, [dir=ltr] .online_chat_draft, [dir=ltr] .phone_draft, [dir=ltr] .web_draft, [dir=ltr] .customerportal_draft, [dir=ltr] .feedback_draft {
  left: var(--zd_size1) ;
}
[dir=rtl] .email_draft, [dir=rtl] .facebook_draft, [dir=rtl] .twitter_draft, [dir=rtl] .forums_draft, [dir=rtl] .chat_draft, [dir=rtl] .offline_chat_draft, [dir=rtl] .online_chat_draft, [dir=rtl] .phone_draft, [dir=rtl] .web_draft, [dir=rtl] .customerportal_draft, [dir=rtl] .feedback_draft {
  right: var(--zd_size1) ;
}

/* forward */
.email_forward,
.facebook_forward,
.facebook_dm_forward,
.twitter_forward,
.forums_forward,
.chat_forward,
.offline_chat_forward,
.online_chat_forward,
.phone_forward,
.web_forward,
.customerportal_forward,
.feedback_forward {
  bottom: var(--zd_size1) ;
}

/* forwarddraft */
.email_forwarddraft,
.facebook_forwarddraft,
.twitter_forwarddraft,
.forums_forwarddraft,
.chat_forwarddraft,
.offline_chat_forwarddraft,
.online_chat_forwarddraft,
.phone_forwarddraft,
.web_forwarddraft,
.customerportal_forwarddraft,
.feedback_forwarddraft {
  bottom: var(--zd_size1) ;
}
[dir=ltr] .email_forwarddraft, [dir=ltr] .facebook_forwarddraft, [dir=ltr] .twitter_forwarddraft, [dir=ltr] .forums_forwarddraft, [dir=ltr] .chat_forwarddraft, [dir=ltr] .offline_chat_forwarddraft, [dir=ltr] .online_chat_forwarddraft, [dir=ltr] .phone_forwarddraft, [dir=ltr] .web_forwarddraft, [dir=ltr] .customerportal_forwarddraft, [dir=ltr] .feedback_forwarddraft {
  left: var(--zd_size1) ;
}
[dir=rtl] .email_forwarddraft, [dir=rtl] .facebook_forwarddraft, [dir=rtl] .twitter_forwarddraft, [dir=rtl] .forums_forwarddraft, [dir=rtl] .chat_forwarddraft, [dir=rtl] .offline_chat_forwarddraft, [dir=rtl] .online_chat_forwarddraft, [dir=rtl] .phone_forwarddraft, [dir=rtl] .web_forwarddraft, [dir=rtl] .customerportal_forwarddraft, [dir=rtl] .feedback_forwarddraft {
  right: var(--zd_size1) ;
}

/* facebook_dm */
[dir=ltr] .facebook_dm_default, [dir=ltr] .facebook_dm_incoming, [dir=ltr] .facebook_dm_outgoing, [dir=ltr] .facebook_dm_missed {
  right: var(--zd_size2) ;
}
[dir=rtl] .facebook_dm_default, [dir=rtl] .facebook_dm_incoming, [dir=rtl] .facebook_dm_outgoing, [dir=rtl] .facebook_dm_missed {
  left: var(--zd_size2) ;
}

/*Topic Icon colors*/
.topic_olive {
  --topIconColor: var(--zdt_channelIcon_topIcon_iconGreen);
}

.topic_yellow3 {
  --topIconColor: var(--zdt_channelIcon_topIcon_iconYellow);
}

.topicIcon {
  color: var(--topIconColor);
}