API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Feb 22nd, 2019
68
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.32 KB | None | 0 0
raw download clone embed print report
  1. @import "variables";
  2.  
  3. /*** OVERRIDE - START ***/
  4. /*** OVERRIDE - END ***/
  5.  
  6. /*** INITIAL CUSTOMISATION - START ***/
  7. /*** RIGHT SIDE - START ***/
  8. .right-side {
  9. float: left;
  10. display: block;
  11. //width: calc(100% - 440px - 360px);
  12. width: 38%;
  13. height: calc(100vh - 148px);
  14. margin-left: 4px;
  15. }
  16. .right-side .right-side-wrapper {
  17. float: left;
  18. width: 100%;
  19. height: calc(100vh - 148px);
  20. background: $global-white-color;
  21. padding: 30px 0px;
  22. margin-left: 4px;
  23. border-radius: 4px;
  24. -webkit-box-shadow: 0 2px 8px 0 rgba(49, 65, 91, 0.04);
  25. box-shadow: 0 2px 8px 0 rgba(49, 65, 91, 0.04);
  26. }
  27. /*** TOP AREA - START ***/
  28. .right-side .right-side-wrapper .top-area {
  29. float: inherit;
  30. width: inherit;
  31. padding-left: 24px;
  32. padding-right: 24px;
  33. }
  34. .right-side .right-side-wrapper .top-area .top-area-header {
  35. float: inherit;
  36. width: inherit;
  37. }
  38. .right-side .right-side-wrapper .top-area .top-area-header .area-elements {
  39. float: inherit;
  40. width: inherit;
  41. }
  42. .right-side
  43. .right-side-wrapper
  44. .top-area
  45. .top-area-header
  46. .area-elements
  47. .inner-left-elements {
  48. display: inline-block;
  49. float: none;
  50. max-width: calc(100% - 220px);
  51. width: 100%;
  52. }
  53. .right-side
  54. .right-side-wrapper
  55. .top-area
  56. .top-area-header
  57. .area-elements
  58. .inner-left-elements
  59. .first-element {
  60. display: inline-block;
  61. max-width: 150px;
  62. height: 24px;
  63. font-size: 18px;
  64. white-space: nowrap;
  65. overflow: hidden;
  66. text-overflow: ellipsis;
  67. }
  68. .right-side
  69. .right-side-wrapper
  70. .top-area
  71. .top-area-header
  72. .area-elements
  73. .inner-left-elements
  74. .second-element {
  75. display: inline-block;
  76. position: relative;
  77. top: 0px;
  78. font-size: 13px;
  79. color: $secondary-text-color;
  80. font-weight: 600;
  81. margin-left: 10px;
  82. max-width: 180px;
  83. white-space: nowrap;
  84. overflow: hidden;
  85. text-overflow: ellipsis;
  86. }
  87. /*** IF GOOGLE CHROME - START ***/
  88. @media screen and (-webkit-min-device-pixel-ratio: 0) {
  89. .right-side
  90. .right-side-wrapper
  91. .top-area
  92. .top-area-header
  93. .area-elements
  94. .inner-left-elements
  95. .second-element {
  96. top: -1px;
  97. }
  98. }
  99. /*** IF GOOGLE CHROME - END ***/
  100. /*** IF IE10&11 - START ***/
  101. @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  102. /* IE10 & IE11 CSS styles go here */
  103. .right-side
  104. .right-side-wrapper
  105. .top-area
  106. .top-area-header
  107. .area-elements
  108. .inner-left-elements
  109. .second-element {
  110. top: -1px;
  111. }
  112. }
  113. /*** IF IE10&11 - END ***/
  114. .right-side
  115. .right-side-wrapper
  116. .top-area
  117. .top-area-header
  118. .area-elements
  119. .inner-left-elements
  120. .second-element
  121. .element-two:before {
  122. content: "(";
  123. }
  124. .right-side
  125. .right-side-wrapper
  126. .top-area
  127. .top-area-header
  128. .area-elements
  129. .inner-left-elements
  130. .second-element
  131. .element-two:after {
  132. content: ")";
  133. }
  134. .right-side
  135. .right-side-wrapper
  136. .top-area
  137. .top-area-header
  138. .area-elements
  139. .inner-right-elements {
  140. display: inline-block;
  141. float: right;
  142. position: relative;
  143. top: -4px;
  144. }
  145. /*** IF GOOGLE CHROME - START ***/
  146. @media screen and (-webkit-min-device-pixel-ratio: 0) {
  147. .right-side
  148. .right-side-wrapper
  149. .top-area
  150. .top-area-header
  151. .area-elements
  152. .inner-right-elements {
  153. top: 2px;
  154. float: right;
  155. }
  156. }
  157. /*** IF GOOGLE CHROME - END ***/
  158. /*** IF IE10&11 - START ***/
  159. @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  160. /* IE10 & IE11 CSS styles go here */
  161. .right-side
  162. .right-side-wrapper
  163. .top-area
  164. .top-area-header
  165. .area-elements
  166. .inner-right-elements {
  167. top: 2px;
  168. float: right;
  169. }
  170. }
  171. /*** IF IE10&11 - END ***/
  172. .right-side
  173. .right-side-wrapper
  174. .top-area
  175. .top-area-header
  176. .area-elements
  177. .inner-right-elements
  178. .first-element {
  179. display: inline-block;
  180. }
  181. .right-side
  182. .right-side-wrapper
  183. .top-area
  184. .top-area-header
  185. .area-elements
  186. .inner-right-elements
  187. .first-element
  188. .button.link {
  189. display: inline-block;
  190. position: relative;
  191. font-weight: 600;
  192. text-transform: uppercase;
  193. font-size: 13px;
  194. padding: 0;
  195. }
  196. .right-side
  197. .right-side-wrapper
  198. .top-area
  199. .top-area-header
  200. .area-elements
  201. .inner-right-elements
  202. .second-element {
  203. display: inline-block;
  204. position: relative;
  205. top: 2px;
  206. margin-left: 8px;
  207. }
  208. .right-side
  209. .right-side-wrapper
  210. .top-area
  211. .top-area-header
  212. .area-elements
  213. .inner-right-elements
  214. .second-element
  215. .button.link {
  216. padding: 0;
  217. margin-left: 10px;
  218. }
  219. .right-side
  220. .right-side-wrapper
  221. .top-area
  222. .top-area-header
  223. .area-elements
  224. .inner-right-elements
  225. .second-element
  226. .icon {
  227. font-size: 18px;
  228. }
  229. /*** TOP AREA - END ***/
  230. /*** MIDDLE AREA - START ***/
  231. .right-side .right-side-wrapper .middle-area {
  232. float: inherit;
  233. width: inherit;
  234. margin-top: 16px;
  235. }
  236. .right-side .right-side-wrapper .middle-area .middle-area-wrapper {
  237. float: inherit;
  238. width: inherit;
  239. //min-height: 500px;
  240. max-height: calc(100vh - 240px - 56px);
  241. padding-bottom: 16px;
  242. overflow: hidden;
  243. }
  244. .right-side
  245. .right-side-wrapper
  246. .middle-area
  247. .middle-area-wrapper
  248. .middle-area-content {
  249. float: inherit;
  250. width: inherit;
  251. //max-height: 500px;
  252. max-height: calc(100vh - 250px - 56px);
  253. padding-bottom: 16px;
  254. overflow: hidden;
  255. overflow-y: auto;
  256. }
  257. /*** MIDDLE AREA - END ***/
  258. /*** BOTTOM AREA - START ***/
  259. .right-side .right-side-wrapper .bottom-area {
  260. float: inherit;
  261. width: 100%;
  262. padding-top: 32px;
  263. padding-bottom: 32px;
  264. background: white;
  265. position: fixed;
  266. bottom: 0;
  267. border-top: 1px solid $senary-custom-text-color;
  268. //margin-left: -20px;
  269. }
  270. .right-side .right-side-wrapper .bottom-area .bottom-area-wrapper {
  271. float: inherit;
  272. width: inherit;
  273. width: 100%;
  274. padding: 0 24px;
  275. }
  276. .right-side
  277. .right-side-wrapper
  278. .bottom-area
  279. .bottom-area-wrapper
  280. .bottom-area-elements {
  281. float: inherit;
  282. width: inherit;
  283. }
  284. .right-side
  285. .right-side-wrapper
  286. .bottom-area
  287. .bottom-area-wrapper
  288. .bottom-area-elements
  289. .area-elements {
  290. float: inherit;
  291. width: inherit;
  292. }
  293. .right-side
  294. .right-side-wrapper
  295. .bottom-area
  296. .bottom-area-wrapper
  297. .bottom-area-elements
  298. .area-elements
  299. .inner-elements {
  300. position: relative;
  301. float: inherit;
  302. width: 100%;
  303. padding-right: 100px;
  304. }
  305. .right-side
  306. .right-side-wrapper
  307. .bottom-area
  308. .bottom-area-wrapper
  309. .bottom-area-elements
  310. .area-elements
  311. .inner-elements
  312. .first-element {
  313. float: inherit;
  314. width: inherit;
  315. }
  316. .right-side
  317. .right-side-wrapper
  318. .bottom-area
  319. .bottom-area-wrapper
  320. .bottom-area-elements
  321. .area-elements
  322. .inner-elements
  323. .first-element
  324. .text-input {
  325. display: block;
  326. width: 100%;
  327. max-height: 240px;
  328. padding: 0;
  329. margin: 0;
  330. font-size: 14px;
  331. overflow: hidden;
  332. overflow-y: auto;
  333. border: none;
  334. resize: none;
  335. outline: none;
  336. line-height: 1.3;
  337. background-color: transparent;
  338. }
  339. .right-side
  340. .right-side-wrapper
  341. .bottom-area
  342. .bottom-area-wrapper
  343. .bottom-area-elements
  344. .area-elements
  345. .inner-elements
  346. .second-element {
  347. display: block;
  348. position: absolute;
  349. right: 0;
  350. top: 50%;
  351. -webkit-transform: translate(0, -50%);
  352. transform: translate(0, -50%);
  353. }
  354. .right-side
  355. .right-side-wrapper
  356. .bottom-area
  357. .bottom-area-wrapper
  358. .bottom-area-elements
  359. .area-elements
  360. .inner-elements
  361. .second-element
  362. .icon {
  363. font-size: 22px;
  364. }
  365. .right-side
  366. .right-side-wrapper
  367. .bottom-area
  368. .bottom-area-wrapper
  369. .bottom-area-elements
  370. .area-elements
  371. .inner-elements
  372. .third-element {
  373. display: block;
  374. position: absolute;
  375. right: 50px;
  376. top: 50%;
  377. -webkit-transform: translate(0, -50%);
  378. transform: translate(0, -50%);
  379. }
  380. .right-side
  381. .right-side-wrapper
  382. .bottom-area
  383. .bottom-area-wrapper
  384. .bottom-area-elements
  385. .area-elements
  386. .inner-elements
  387. .third-element
  388. .icon {
  389. font-size: 22px;
  390. }
  391. /*** BOTTOM AREA - END ***/
  392. /*** RIGHT SIDE - END ***/
  393. .typing {
  394. position: relative;
  395. width: 200px;
  396. margin: 0;
  397. text-align: left;
  398. }
  399. .typing.left {
  400. background: $chat-area-conversation-left-element-background-color;
  401. float: left;
  402. }
  403. .typing.right {
  404. float: right;
  405. margin-right: 7px;
  406. margin-bottom: 5px;
  407. }
  408. .dots-wrapper {
  409. position: relative;
  410. display: block;
  411. max-width: calc(100% - 52px);
  412. width: auto;
  413. border-radius: 2px;
  414. padding: 10px 20px;
  415. margin-left: 47px;
  416. margin-bottom: 5px;
  417. word-break: break-all;
  418. }
  419. .typing.left .dots-wrapper {
  420. float: left;
  421. background: $primary-text-color;
  422. }
  423. .typing.right .dots-wrapper {
  424. float: right;
  425. background: $global-green-color;
  426. }
  427. .typing .dots-wrapper:after {
  428. content: "";
  429. position: absolute;
  430. top: 0%;
  431. width: 0;
  432. height: 0;
  433. border: 8px solid transparent;
  434. }
  435. .typing.left .dots-wrapper:after {
  436. left: 0;
  437. border-right-color: $primary-text-color;
  438. border-left: 0;
  439. border-top: 0;
  440. margin-top: 12px;
  441. margin-left: -7px;
  442. }
  443. .typing.right .dots-wrapper:after {
  444. right: 0;
  445. border-left-color: $global-green-color;
  446. border-right: 0;
  447. border-top: 0;
  448. margin-top: 12px;
  449. margin-right: -7px;
  450. }
  451. .typing .dots-wrapper.no-arrow:after {
  452. display: none;
  453. }
  454. .typing .dots-wrapper .dots {
  455. display: inline-block;
  456. font-size: 14px;
  457. font-weight: 600;
  458. color: $global-white-color;
  459. padding-right: 60px;
  460. width: 21px;
  461. padding-right: 0;
  462. }
  463. .typing .dots-wrapper .dots .dots-blink {
  464. margin: 0;
  465. }
  466.  
  467. .send-file-section {
  468. position: relative;
  469. top: 2px;
  470. left: -8px;
  471. }
  472. #send-file {
  473. display: none;
  474. }
  475.  
  476. #file-icon {
  477. display: inline-block;
  478. transition: transform 1s, box-shadow .3s;
  479. width: 36px;
  480. height: 36px;
  481. border-radius: 50%;
  482. // -ms-transform: rotate(20deg);
  483. // -webkit-transform: rotate(20deg);
  484. // transform: rotate(20deg);
  485. #circle { transition: .3s; fill: $base-background-color; }
  486. #icon { transition: .3s; fill: $primary-link-color }
  487.  
  488.  
  489. &:hover {
  490. cursor: pointer;
  491. box-shadow: 0 4px 12px 0 rgba($primary-link-color, .5);
  492. #circle { fill: $primary-link-color; }
  493. #icon { fill: white; }
  494. }
  495. }
  496.  
  497. .send-button {
  498. svg {
  499. display: inline-block;
  500. width: 36px;
  501. height: 36px;
  502. border-radius: 50%;
  503. transition: transform 1s, box-shadow 0.3s;
  504. -ms-transform: rotate(20deg);
  505. -webkit-transform: rotate(20deg);
  506. transform: rotate(20deg);
  507. #circle { transition: .3s; fill: $primary-link-color; }
  508. #icon { transition: .3s; fill: white }
  509.  
  510. &:hover {
  511. box-shadow: 0 4px 12px 0 rgba($primary-link-color, .5);
  512. }
  513. }
  514.  
  515. &.no-send {
  516. svg {
  517. -ms-transform: rotate(0deg);
  518. -webkit-transform: rotate(0deg);
  519. transform: rotate(0deg);
  520. #circle { fill: $base-background-color; }
  521. #icon { fill: #BFC1C4; }
  522.  
  523. &:hover {
  524. box-shadow: none;
  525. }
  526. }
  527. }
  528. }
  529.  
  530. /*** INITIAL CUSTOMISATION - END ***/
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!