public/js/views/chat/chatInputView.less

   1 @import (reference) "../../../less/colors.less";
   2 @import (reference) "../../../less/trp3Vars.less";
   3
   4 .chat-input {
   5   position: relative;
   6
   7   box-sizing: border-box;
   8
   9   background-color: @main-application-bg-color;
  10
  11   min-height: 70px;
  12   flex-shrink: 0;
  13   border-top: 1px solid rgba(0, 0, 0, 0.05);
  14 }
  15
  16 .progress {
  17   position: absolute;
  18   // top: -2px;
  19   right: 0;
  20   left: 0;
  21   background-color: transparent;
  22   width: 100%;
  23   height: 2px;
  24   overflow: hidden;
  25 }
  26
  27 .progress__bar {
  28   background-color: @trpGreen;
  29   box-shadow: 0px 0px 1px 1px @trpGreen;
  30   overflow: hidden;
  31   width: 0%;
  32   display: none;
  33   transition: width 1s;
  34   transition-timing-function: ease;
  35 }
  36
  37 .chat-input__container {
  38   box-sizing: border-box;
  39   margin-top: 10px;
  40   margin-left: 34px;
  41   margin-bottom: 10px;
  42 }
  43
  44 body.embedded .chat-input__container {
  45   margin-left: 28px;
  46 }
  47
  48 body.mobile .chat-input__container {
  49   margin-left: 12px;
  50 }
  51
  52 .chat-input__area {
  53   position: relative;
  54 }
  55
  56 .chat-input__buttons {
  57   position: absolute;
  58   right: 0;
  59   top: 0;
  60   height: 50px;
  61   user-select: none;
  62 }
  63
  64 body.mobile .chat-input__buttons {
  65   display: none;
  66 }
  67
  68 .chat-input__button {
  69   display: block;
  70   height: 25px;
  71   padding: 0 10px;
  72   background-color: transparent;
  73   border: none;
  74
  75   font-size: inherit;
  76   line-height: 25px;
  77   cursor: pointer;
  78
  79   transition: background-color 0.2s ease;
  80
  81   &:hover,
  82   &:focus {
  83     background-color: rgba(0, 0, 0, 0.05);
  84     outline: none;
  85   }
  86
  87   &[data-compose-mode="true"] {
  88     & > .chat-input__button-icon--chat {
  89       display: none;
  90     }
  91   }
  92   &[data-compose-mode="false"] {
  93     & > .chat-input__button-icon--compose {
  94       display: none;
  95     }
  96   }
  97 }
  98
  99 .chat-input__button-icon {
 100   line-height: 1.2;
 101   opacity: 0.5;
 102   transition: opacity 0.3s;
 103
 104   &.octicon-markdown {
 105     // thick lines on the markdown icon need to be less intense,
 106     // so opacity is lower
 107     opacity: 0.4;
 108   }
 109
 110   &:hover,
 111   &:focus {
 112     opacity: 0.9;
 113   }
 114
 115   &:before {
 116     margin: 0;
 117     width: 21px;
 118     font-size: 21px;
 119   }
 120 }
 121
 122 .chat-input__button-icon--chat:before {
 123   // .icon-chat-alt is a wide-ass 21px by default, this
 124   // makes all the other icons wide-ass too
 125   font-size: inherit;
 126 }
 127
 128
 129 .chat-input__avatar {
 130   float: left;
 131 }
 132
 133 @avatarWidth: 30px;
 134
 135 .chat-input__box {
 136   margin-left: @avatarWidth + 22px;
 137   margin-right: 52px;
 138   margin-bottom: 0;
 139   vertical-align: top;
 140 }
 141
 142 body.embedded .chat-input__box {
 143   margin-left: 0px;
 144 }
 145
 146 body.embedded .chat-input-box__region {
 147   margin-left: 50px;
 148 }
 149
 150 body.mobile .chat-input__box {
 151   margin-left: @avatarWidth + 12px;
 152   margin-right: 12px;
 153 }
 154
 155 .textcomplete-wrapper {
 156   /* In IE, this element gets the following inline styles that we have to combat:
 157    * `display: inline-block; position: relative;` */
 158   width: 100%;
 159 }
 160
 161 .chat-input__text-area {
 162   display: block;
 163   width: 100%;
 164   min-height: 44px;
 165   margin: 0px;
 166   padding: 0px;
 167
 168   background-color: #ffffff;
 169   box-shadow: none;
 170   border: 0px;
 171   outline: none;
 172
 173   color: black;
 174   font-size: 1em;
 175   line-height: 1.38em;
 176
 177   resize: none;
 178
 179   &:focus {
 180     outline: none;
 181   }
 182 }
 183
 184 .selected {
 185   opacity: 1 !important;
 186 }
 187
 188 // SPLIT TEST CSS START
 189 .chat-input-nli {
 190   display: flex;
 191   flex-grow: 0;
 192   flex-shrink: 0;
 193   align-items: center;
 194   justify-content: row-start;
 195
 196   padding: 0px 33px;
 197 }
 198
 199 .chat-input__placeholder {
 200   margin: 0px 10px;
 201   color: #999;
 202 }
 203
 204 .chat-input__disabledtext {
 205   font-weight: 600;
 206   color: #999;
 207   margin: 23px 0;
 208   margin-left: -52px;
 209 }
 210 .mobile .chat-input__disabledtext {
 211   margin-left: 0;
 212 }
 213
 214 .chat-input__btn {
 215   font-family: @font-base;
 216   font-size: 12px;
 217   letter-spacing: 2px;
 218
 219   position: relative;
 220   display: inline-block;
 221
 222   padding: 1.1em 3em;
 223   margin-top: 4px;
 224   margin-right: 1em;
 225
 226   text-transform: uppercase;
 227   text-decoration: none;
 228
 229   border: none;
 230   border-radius: 6px;
 231
 232   background: @homepage-orange;
 233   color: #fff;
 234
 235   flex-shrink: 0;
 236 }
 237
 238 .chat-input__btn--matrix {
 239   background: @thunder;
 240 }
 241
 242 .chat-input__btn  img {
 243   height: 18px;
 244   margin: -1px 12px 0 -3px;
 245   vertical-align: middle;
 246 }
 247
 248 .chat-input__btn:hover {
 249   box-shadow: inset 0 0 0 250px rgba(0,0,0,.05);
 250   text-decoration: none;
 251 }
 252
 253 .chat-input__btn:active {
 254   box-shadow: inset 0 0 0 250px rgba(0,0,0,.05), inset 0 2px 4px rgba(0,0,0,.15);
 255   text-decoration: none;
 256 }
 257
 258 // SPLIT TEST CSS END