public/js/views/app/addPeopleView.less

   1 @import "../../../less/base-avatar.less";
   2 @import "../../../less/pulse-animations.less";
   3 @import (reference) "../../../less/colors.less";
   4
   5 @import "../controls/dropdown";
   6 @import "../controls/typeahead";
   7
   8 .gtrPeopleAddRoster {
   9   &__adding {
  10     p { margin: 0; }
  11     margin-left: 10px;
  12     padding-bottom: 15px;
  13   }
  14
  15   /*
  16    * Keep the invitee list from growing indefinitely so the modal doesn't become
  17    * too long and push the user/email input offscreen
  18    */
  19   max-height: 250px;
  20   overflow-y: auto;
  21 }
  22
  23 .gtrPeopleRosterItem__form {
  24   padding: 0;
  25   margin: 0;
  26 }
  27
  28 .gtrPeopleRosterItem {
  29   width: 100%;
  30   cursor: default;
  31   margin-bottom: 8px;
  32   overflow: hidden;
  33
  34   &__avatar {
  35     float: left;
  36   }
  37
  38   &__content {
  39     display: flex;
  40
  41     /* Give the avatar some space to the right */
  42     .trpDisplayPicture {
  43       margin-right: 8px;
  44     }
  45
  46     > * {
  47       align-self: center;
  48     }
  49   }
  50
  51   &__input {
  52     flex-grow: 1;
  53     margin-right: 8px;
  54     margin-top: 8px;
  55     padding: 9px;
  56   }
  57
  58   &:last-child {
  59     margin-bottom: 10px;
  60   }
  61
  62   .username {
  63     color: #999;
  64   }
  65
  66   &:hover .remove {
  67     opacity: 1;
  68   }
  69
  70   .remove {
  71     float: right;
  72     cursor: pointer;
  73     opacity: 0.6;
  74     transition: opacity 300ms;
  75   }
  76
  77   .remove:before {
  78     position: inherit;
  79   }
  80
  81   .remove:hover {
  82     color: @trpRed;
  83   }
  84
  85
  86 }