kj
/
lms-app
1
0
포크 0
코드 이슈 0 풀 리퀘스트 0 릴리즈 0 위키 활동
Angular LMS app
25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This repo is archived. You can view files and clone it, but cannot push or open issues/pull-requests.
103 커밋
1 브렌치
605 KiB
 
 
 
 
트리: 2359d23ab0
브랜치 태그
${ item.name }
${ searchTerm } 브랜치 생성
from '2359d23ab0'
${ noResults }
lms-app/src/app/chat-page/chat-window/chat-window.component.scss

138 lines
2.5 KiB
Raw Blame 히스토리 

  1. header {

  2.     display: flex;

  3.     align-items: center;

  4.     justify-content: space-between;

  5.     width: 100%;

  6.     padding: 0 5%;

  7.     margin: 0 auto 20px;

  8.     background-color: white;

  9. 

  10.     h5 {

  11.         font-weight: 500;

  12.         letter-spacing: 1px;

  13.         font-size: 18px;

  14.         color: var(--ash-black);

  15.         width: calc(100% - 90px);

  16. 

  17.         span {

  18.             color: var(--dark-grey);

  19.             font-size: 14px;

  20.         }

  21.     }

  22. 

  23.     button {

  24.         width: 30px;

  25.         height: 30px;

  26.         border-radius: 50%;

  27.         background-color: var(--light-grey);

  28.         border: 0px;

  29. 

  30.         &.edit-button {

  31.             background-color: var(--teal-green);

  32. 

  33.             .icon {

  34.                 fill: white;

  35.                 width: 15px;

  36.                 height: 15px;

  37.             }

  38.         }

  39. 

  40.         .icon {

  41.             width: 12px;

  42.             height: 12px;

  43.             fill: white;

  44.         }

  45.     }

  46. }

  47. 

  48. ul {

  49.     width: 100%;

  50.     margin: 0 auto;

  51.     list-style: none;

  52.     max-height: calc(100% - 175px);

  53.     overflow: auto;

  54.     position: absolute;

  55.     left: 0px;

  56.     bottom: 95px;

  57.     padding: 0 5%;

  58. 

  59.     li {

  60.         width: 55%;

  61.     }

  62. 

  63.     .message {

  64.         border-radius: 10px;

  65.         padding: 10px;

  66.         font-size: 14px;

  67.     }

  68. 

  69.     .sent {

  70.         margin-left: auto;

  71. 

  72.         .time-stamp {

  73.             text-align: right;

  74.         }

  75. 

  76.         .message {

  77.             color: white;

  78.             background-color: var(--teal);

  79.             border-bottom-right-radius: 0px;

  80.         }

  81.     }

  82. 

  83.     .received {

  84.         margin-right: auto;

  85. 

  86.         .message {

  87.             color: var(--dark-grey);

  88.             background-color: rgba(#cecece, 0.4);

  89.             border-bottom-left-radius: 0px;

  90.         }

  91.     }

  92. 

  93.     .time-stamp {

  94.         font-size: 12px;

  95.         color: var(--dark-grey);

  96.         margin: 5px;

  97.     }

  98. }

  99. 

  100. .input-holder {

  101.     display: flex;

  102.     align-items: stretch;

  103.     width: 90%;

  104.     margin: 0 auto;

  105.     position: absolute;

  106.     bottom: 20px;

  107.     left: 5%;

  108.     border-radius: 30px;

  109.     background-color: rgba(#cecece, 0.4);

  110.     overflow: hidden;

  111.     padding: 5px;

  112. 

  113.     .icon {

  114.         fill: white;

  115.         width: 15px;

  116.         height: 15px;

  117.     }

  118. 

  119.     input {

  120.         border: 0px;

  121.         background-color: transparent;

  122.         flex-grow: 1;

  123.         padding-left: 10px;

  124.     }

  125. 

  126.     button {

  127.         width: 40px;

  128.         border-radius: 50%;

  129.         border: 0px;

  130.         height: 40px;

  131.         background-color: var(--teal-green);

  132.         display: flex;

  133.         align-items: center;

  134.         justify-content: center;

  135.         box-shadow: 0px 0px 5px var(--light-grey);

  136.     }

  137. }