juplo.de Git - demos/kafka/chat/blob - src/app/chatrooms/chatrooms.component.less

   1 .chatrooms {
   2   margin: 0 0 2em 0;
   3   list-style-type: none;
   4   padding: 0;
   5   width: 15em;
   6 }
   7
   8 .chatrooms li {
   9   display: flex;
  10 }
  11
  12 .chatrooms button {
  13   flex: 1;
  14   cursor: pointer;
  15   position: relative;
  16   left: 0;
  17   background-color: #EEE;
  18   margin: .5em;
  19   padding: 0;
  20   border-radius: 4px;
  21   display: flex;
  22   align-items: stretch;
  23   height: 1.8em;
  24 }
  25
  26 .chatrooms button:hover {
  27   color: #2c3a41;
  28   background-color: #e6e6e6;
  29   left: .1em;
  30 }
  31
  32 .chatrooms button:active {
  33   background-color: #525252;
  34   color: #fafafa;
  35 }
  36
  37 .chatrooms button.selected {
  38   background-color: black;
  39   color: white;
  40 }
  41
  42 .chatrooms button.selected:hover {
  43   background-color: #505050;
  44   color: white;
  45 }
  46
  47 .chatrooms button.selected:active {
  48   background-color: black;
  49   color: white;
  50 }
  51
  52 .chatrooms .badge {
  53   display: inline-block;
  54   font-size: small;
  55   color: white;
  56   padding: 0.8em 0.7em 0 0.7em;
  57   background-color: #405061;
  58   line-height: 1em;
  59   margin-right: .8em;
  60   border-radius: 4px 0 0 4px;
  61 }
  62
  63 .chatrooms .name {
  64   align-self: center;
  65 }