public/js/views/righttoolbar/rightToolbarView.less

   1 @import (reference) 'trp3Vars';
   2 @import (reference) 'trp3';
   3 @import '../../../less/colors';
   4
   5 // Base
   6 @import '../../../less/base-avatar.less';
   7
   8 @import '../../../less/components/right-toolbar.less';
   9
  10 // Required views
  11 @import '../people/peopleCollectionView';
  12 @import 'activity.less';
  13
  14 .right-toolbar-region {
  15   .right-toolbar-position();
  16   box-sizing: border-box;
  17   flex-shrink: 0;
  18   color: @trpDarkGrey;
  19   text-align: left;
  20
  21   & > .right-toolbar {
  22     box-sizing: inherit;
  23     position: relative;
  24     color: @trpDarkGrey;
  25     display: inline-block;
  26     flex-shrink: 0;
  27     order: 2;
  28     width: @right-toolbar-full-width;
  29     text-align: left;
  30     vertical-align: top;
  31     right: 0;
  32     top: 0;
  33     bottom: 0;
  34     background-color: @main-application-bg-color;
  35     border-left: 1px solid @menu-border-color;
  36
  37     transition: width 200ms ease-in-out;
  38
  39     body.mobile & {
  40       display: none;
  41     }
  42
  43     &.collapsed {
  44       .collapsed-breakpoint();
  45     }
  46
  47     // Used to hide the toolbar when the thread message feed is open
  48     &.hidden {
  49       display: none;
  50     }
  51
  52     .trpToolbarHeader {
  53       margin-top: 8px;
  54       margin-left: 14px;
  55       margin-bottom: 8px;
  56       text-transform: uppercase;
  57       cursor: pointer;
  58     }
  59
  60     .trpToolbarList {
  61       min-height: 40px;
  62
  63       ul {
  64         list-style: none;
  65         margin: 0px;
  66       }
  67     }
  68
  69     .oneToOne {
  70       max-height: 300px;
  71     }
  72
  73     .trpRepoInfoContainer {
  74       padding-left: 5px;
  75
  76       & li {
  77         width: 100%;
  78         overflow-x: hidden;
  79         text-overflow: ellipsis;
  80         list-style: none;
  81       }
  82
  83       .vcard-stats {
  84         border-top: 1px solid fade(@trpGrey, 20%);
  85         border-bottom: 1px solid fade(@trpGrey, 20%);
  86         padding: 4px 0;
  87         margin: 8px 0;
  88       }
  89
  90       h1 {
  91         word-wrap: break-word;
  92       }
  93
  94       p {
  95         margin: 0px 0px 5px;
  96       }
  97
  98       ul {
  99         display: inline-block;
 100         border: 1px 0 solid @trpGrey;
 101       }
 102     }
 103   }
 104
 105   // this is bad, but until the margins/padding is done properly
 106   // for all <h1>, <p> etc tags in the toolbar, we have to style
 107   // the individual elements :(
 108   #activity-header {
 109     margin-top: 30px;
 110   }
 111
 112   .right-toolbar {
 113     display: flex;
 114     flex-direction: column;
 115     user-select: none;
 116   }
 117
 118   .right-toolbar__pinned-toggle-button {
 119     display: flex;
 120     justify-content: center;
 121     align-items: center;
 122     height: @chat-frame-desktop-header-height;
 123     padding: 0 2rem;
 124
 125     background-color: transparent;
 126     border: 0;
 127
 128     transition: background-color 0.2s ease;
 129
 130     &:hover,
 131     &:focus {
 132       background-color: rgba(0, 0, 0, 0.05);
 133       outline: none;
 134     }
 135   }
 136
 137   .right-toolbar__search-header {
 138     height: 74px;
 139     border-bottom: 1px solid rgb(240, 240, 240);
 140     flex-shrink: 0;
 141     display: flex;
 142     align-items: stretch;
 143   }
 144
 145   .right-toolbar__body {
 146     .scroller();
 147     overflow-x: hidden;
 148     overflow-y: auto;
 149     flex: 1;
 150     padding-top: 10px;
 151   }
 152
 153   .remaining-region {
 154     margin-top: 1rem;
 155   }
 156
 157   .remaining-view {
 158   }
 159
 160   .remaining-view-button,
 161   .remaining-view-secondary-button {
 162   }
 163   .remaining-view-secondary-button {
 164     color: darken(@caribbean, 10%);
 165   }
 166
 167   .remaining-view-button-secondary-text {
 168     color: rgba(51, 51, 51, 0.5);
 169   }
 170
 171   .right-toolbar-activity-area {
 172   }
 173
 174   .right-toolbar-activity-area-inner {
 175   }
 176
 177   .right-toolbar-activity-list {
 178     min-width: 230px;
 179     margin: 0;
 180     list-style-type: none;
 181   }
 182
 183   .right-toolbar__footer {
 184     display: flex;
 185     justify-content: flex-end;
 186     flex-shrink: 0;
 187     width: 100%;
 188   }
 189 }
 190
 191 .collapsed-breakpoint() {
 192   width: @right-toolbar-collapsed-width;
 193   padding-right: 0px;
 194
 195   #activity-header {
 196     opacity: 0;
 197   }
 198
 199   #people-header,
 200   #top-header,
 201   #repo-info,
 202   #activity-tip {
 203     display: none;
 204   }
 205
 206   #people-list .trpToolbarListContent {
 207     margin-left: 6px;
 208     padding-top: 16px;
 209     padding-right: 20px;
 210     padding-left: 14px;
 211   }
 212
 213   .right-toolbar {
 214     .trpToolbarList {
 215       max-height: 40%;
 216     }
 217   }
 218
 219   .remaining-view {
 220     display: none;
 221   }
 222
 223   .right-toolbar-activity-area {
 224     display: none;
 225
 226     &.visible {
 227       width: 240px;
 228       border-left: 4px solid rgba(211, 223, 211, 0.6);
 229       background-clip: padding-box;
 230     }
 231   }
 232 }
 233
 234 .right-toolbar-region__footer {
 235   box-sizing: border-box;
 236   position: absolute;
 237   bottom: 0;
 238   width: 100%;
 239   height: 70px;
 240   padding-top: 21px;
 241   padding-right: 21px;
 242
 243   background: linear-gradient(top, rgba(255, 255, 255, 0), @main-application-bg-color 35%);
 244
 245   text-align: right;
 246
 247   .menu-toggle-icon {
 248     display: inline-block;
 249     vertical-align: middle;
 250     margin: auto;
 251
 252     fill: none;
 253     stroke: #8d8d8d;
 254     stroke-width: 2;
 255     cursor: pointer;
 256     transition: stroke 0.2s ease;
 257
 258     &:hover,
 259     .menu-toggle-button:hover > & {
 260       stroke: black;
 261     }
 262   }
 263 }