public/js/views/app/collaboratorsView.less

   1 @collaborator-padding: 0.625em;
   2 @collaborator-img-width: 30px;
   3
   4 .collaborators-container {
   5   flex-shrink: 0;
   6 }
   7
   8 .welcome-modal__close {
   9   cursor: pointer;
  10   transition: opacity 300ms ease-in-out;
  11   float: right;
  12   opacity: 0.2;
  13   margin: 10px 18px;
  14   &:hover {
  15     opacity: 0.4;
  16   }
  17 }
  18
  19 .welcome-modal__header {
  20   padding: 10px;
  21   border-bottom: 1px solid rgba(200,200,200,0.3);
  22   text-align: left;
  23   img {
  24     vertical-align: middle;
  25     height: 48px;
  26     width: 48px;
  27   }
  28 }
  29
  30 .welcome-modal__explain {
  31   padding: 20px 0 0 20px;
  32   p {
  33     display: none;
  34   }
  35 }
  36
  37 .welcome-modal__container {
  38   display: flex;
  39   flex-wrap: wrap;
  40   justify-content: flex-start;
  41   max-height: 400px;
  42   max-height: 40vh;
  43   overflow-y: scroll;
  44 }
  45
  46 .welcome-modal__collaborators {
  47   text-align: left;
  48   background: #f4f5f6;
  49   border-radius: 5px;
  50   margin: 20px 25px;
  51
  52   ul {
  53     list-style: none;
  54     margin: 0;
  55     max-height: 250px;
  56     overflow-x: hidden;
  57     overflow-y: auto;
  58     background-color: rgba(255,255,255,0.6);
  59     padding: 10px 0px 10px 20px;
  60   }
  61 }
  62
  63 .welcome-modal__collaborator {
  64
  65   * {
  66     box-sizing: border-box;
  67   }
  68
  69   overflow: hidden;
  70   display: flex;
  71   align-items: center;
  72
  73   width: 21rem;
  74   max-width: 350px;
  75   max-height: 40px;
  76   margin: @collaborator-padding;
  77   padding: 0.825em;
  78
  79   background-color: #eee;
  80   border-radius: 4px;
  81
  82   cursor: default;
  83
  84   &:hover {
  85     background-color: #ccc;
  86   }
  87
  88   img {
  89     border-radius: 4px;
  90     width: @collaborator-img-width;
  91     height: @collaborator-img-width;
  92     flex-shrink: 0;
  93   }
  94
  95   .content {
  96     margin: 0 0.625em;
  97     overflow: hidden;
  98     flex-grow: 1;
  99
 100     form {
 101       margin: 0;
 102     }
 103
 104     p {
 105       margin: 0;
 106       overflow: hidden;
 107       text-overflow: ellipsis;
 108       white-space: nowrap;
 109     }
 110
 111     span {
 112       white-space: nowrap;
 113       display: inline-block;
 114       overflow: hidden;
 115       text-overflow: ellipsis;
 116       &.limit {
 117         max-width: 100px;
 118         &:hover {
 119           max-width: 100%;
 120           transition: all 0.25s ease;
 121         }
 122       }
 123     }
 124
 125     input[type='email'] {
 126       margin-bottom: 4px;
 127       padding: 0px 4px;
 128       width: 70%;
 129     }
 130
 131     input[type='submit'] {
 132       margin-top: 5px;
 133       float: right;
 134     }
 135   }
 136
 137   .action {
 138     flex-shrink: 0;
 139     a {
 140       float: right;
 141     }
 142   }
 143 }
 144
 145 .welcome-modal__no-suggestions {
 146   width: 100%;
 147   padding: 20px 0;
 148   text-align: center;
 149
 150   a {
 151     text-decoration: underline;
 152   }
 153 }
 154
 155 .welcome-modal__footer {
 156   padding: 20px 0 20px 20px;
 157 }
 158
 159 .welcome-modal__footer-button {
 160   display: inline-block;
 161   margin-right: 10px;
 162 }
 163
 164 #activity-tip {
 165   color: #666;
 166   margin: 14px;
 167   a {
 168     color: #333;
 169   }
 170  }
 171
 172 .welcome-modal__share {
 173   display: flex;
 174   flex-wrap: wrap;
 175   justify-content: space-between;
 176   align-items: center;
 177   padding: 10px 10px 10px 20px;
 178 }
 179
 180 a.share-button {
 181   margin-right: 5px;
 182 }