BigW Consortium Gitlab

boards.scss 8.51 KB
Newer Older
1 2 3 4
[v-cloak] {
  display: none;
}

5 6 7 8 9
.user-can-drag {
  cursor: -webkit-grab;
  cursor: grab;
}

10
.is-dragging {
11 12
  // Important because plugin sets inline CSS
  opacity: 1!important;
13

14
  * {
15 16 17 18
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
19 20 21
    // !important to make sure no style can override this when dragging
    cursor: -webkit-grabbing!important;
    cursor: grabbing!important;
22 23 24
  }
}

25 26 27 28
.is-ghost {
  opacity: 0.3;
}

Phil Hughes committed
29 30
.dropdown-menu-issues-board-new {
  width: 320px;
31

Phil Hughes committed
32
  .dropdown-content {
33
    max-height: 150px;
34
  }
Phil Hughes committed
35 36 37
}

.issue-board-dropdown-content {
Phil Hughes committed
38 39 40
  margin: 0 8px 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid $dropdown-divider-color;
Phil Hughes committed
41 42 43

  > p {
    margin: 0;
Phil Hughes committed
44
    font-size: 14px;
Phil Hughes committed
45 46 47
  }
}

Phil Hughes committed
48
.issue-boards-page {
49
  .content-wrapper {
50
    padding-bottom: 0;
Phil Hughes committed
51
  }
52 53 54 55
}

.boards-app {
  position: relative;
Phil Hughes committed
56 57
}

58 59 60 61 62
.boards-app-loading {
  width: 100%;
  font-size: 34px;
}

Phil Hughes committed
63
.boards-list {
64
  height: calc(100vh - 152px);
65
  width: 100%;
Phil Hughes committed
66
  padding-top: 25px;
67
  padding-bottom: 25px;
Phil Hughes committed
68 69 70
  padding-right: ($gl-padding / 2);
  padding-left: ($gl-padding / 2);
  overflow-x: scroll;
71
  white-space: nowrap;
Phil Hughes committed
72 73

  @media (min-width: $screen-sm-min) {
74
    height: 475px; // Needed for PhantomJS
75
    height: calc(100vh - 222px);
76
    min-height: 475px;
77
    transition: width .2s;
78 79 80 81

    &.is-compact {
      width: calc(100% - 290px);
    }
Phil Hughes committed
82
  }
Phil Hughes committed
83 84 85
}

.board {
86 87 88
  display: inline-block;
  width: calc(85vw - 15px);
  height: 100%;
Phil Hughes committed
89 90
  padding-right: ($gl-padding / 2);
  padding-left: ($gl-padding / 2);
91
  white-space: normal;
Phil Hughes committed
92
  vertical-align: top;
Phil Hughes committed
93 94

  @media (min-width: $screen-sm-min) {
95
    width: 400px;
Phil Hughes committed
96
  }
Phil Hughes committed
97 98 99
}

.board-inner {
100
  height: 100%;
Phil Hughes committed
101
  font-size: $issue-boards-font-size;
102
  background: $gray-light;
Phil Hughes committed
103 104 105 106
  border: 1px solid $border-color;
  border-radius: $border-radius-default;
}

107 108 109 110 111 112
.board-header {
  border-top-left-radius: $border-radius-default;
  border-top-right-radius: $border-radius-default;

  &.has-border {
    border-top: 3px solid;
113 114 115 116 117 118
    margin-top: -1px;
    margin-right: -1px;
    margin-left: -1px;
    padding-top: 1px;
    padding-right: 1px;
    padding-left: 1px;
119 120 121 122

    .board-title {
      padding-top: ($gl-padding - 3px);
    }
123 124 125
  }
}

Phil Hughes committed
126 127 128 129 130 131
.board-inner-container {
  border-bottom: 1px solid $border-color;
  padding: $gl-padding;
}

.board-title {
Phil Hughes committed
132
  position: relative;
Phil Hughes committed
133
  margin: 0;
134
  padding: $gl-padding;
Phil Hughes committed
135
  font-size: 1em;
136
  border-bottom: 1px solid $border-color;
Phil Hughes committed
137 138
}

139 140 141 142 143 144
.board-delete {
  margin-right: 10px;
  padding: 0;
  color: $gray-darkest;
  background-color: transparent;
  border: 0;
Phil Hughes committed
145
  outline: 0;
146 147 148 149 150 151

  &:hover {
    color: $gl-link-color;
  }
}

Phil Hughes committed
152
.board-blank-state {
153
  height: calc(100% - 49px);
Phil Hughes committed
154
  padding: $gl-padding;
155
  background-color: $white-light;
Phil Hughes committed
156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175
}

.board-blank-state-list {
  list-style: none;

  > li:not(:last-child) {
    margin-bottom: 8px;
  }

  .label-color {
    position: relative;
    top: 2px;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 3px;
    border-radius: $border-radius-default;
  }
}

176
.board-list-component {
Phil Hughes committed
177
  height: calc(100% - 49px);
178 179 180 181
}

.board-list {
  height: 100%;
182
  margin-bottom: 0;
Phil Hughes committed
183
  padding: 5px;
184
  list-style: none;
185 186
  overflow-y: scroll;
  overflow-x: hidden;
187 188

  &.is-smaller {
189
    height: calc(100% - 136px);
190
  }
Phil Hughes committed
191 192
}

Phil Hughes committed
193 194
.board-list-loading {
  margin-top: 10px;
195
  font-size: (26px / $issue-boards-font-size) * 1em;
196 197
}

Phil Hughes committed
198
.card {
Phil Hughes committed
199
  position: relative;
Phil Hughes committed
200
  padding: 10px $gl-padding;
201
  background: $white-light;
Phil Hughes committed
202
  border-radius: $border-radius-default;
203
  box-shadow: 0 1px 2px $issue-boards-card-shadow;
204
  list-style: none;
Phil Hughes committed
205 206 207 208

  &:not(:last-child) {
    margin-bottom: 5px;
  }
209

210 211 212 213
  &.is-active {
    background-color: $row-hover;
  }

214 215 216 217
  .label {
    border: 0;
    outline: 0;
  }
218 219 220 221

  .confidential-icon {
    margin-right: 5px;
  }
Phil Hughes committed
222 223 224 225 226
}

.card-title {
  margin: 0;
  font-size: 1em;
227 228 229

  a {
    color: inherit;
230
    word-wrap: break-word;
231
  }
Phil Hughes committed
232 233 234 235
}

.card-footer {
  margin-top: 5px;
236
  line-height: 25px;
Phil Hughes committed
237 238

  .label {
239
    margin-right: 5px;
240
    font-size: (14px / $issue-boards-font-size) * 1em;
Phil Hughes committed
241
  }
242

243 244 245 246
  .card-assignee {
    margin-right: 5px;
  }

247 248
  .avatar {
    margin-left: 0;
249
    margin-right: 0;
250
  }
Phil Hughes committed
251 252 253
}

.card-number {
254
  margin-right: 5px;
Phil Hughes committed
255
}
256 257

.issue-boards-search {
258
  width: 395px;
259 260 261 262 263 264

  .form-control {
    display: inline-block;
    width: 210px;
  }
}
265 266 267

.board-list-count {
  padding: 10px 0;
268
  color: $gl-text-color-secondary;
269 270 271 272 273 274
  font-size: 13px;

  > .fa {
    margin-right: 5px;
  }
}
275

276 277 278 279
.board-new-issue-form {
  margin: 5px;
}

280 281 282 283 284 285 286 287 288 289 290 291 292 293 294
.board-issue-count-holder {
  margin-top: -3px;

  .btn {
    line-height: 12px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}

.board-issue-count {
  padding-right: 10px;
  padding-left: 10px;
  line-height: 21px;
  border-radius: $border-radius-base;
295
  border: 1px solid $border-color;
296 297 298 299 300 301 302

  &.has-btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-width: 1px 0 1px 1px;
  }
}
303

304
.page-with-layout-nav.page-with-sub-nav .issue-boards-sidebar {
305
  &.right-sidebar {
306
    top: 0;
307 308 309 310 311 312 313 314 315 316
    bottom: 0;
  }

  .issuable-sidebar-header {
    position: relative;
  }

  .gutter-toggle {
    position: absolute;
    top: 0;
317
    bottom: 15px;
318 319 320 321
    right: 0;
    width: 22px;
    color: $gray-darkest;

322
    svg {
323 324
      position: absolute;
      top: 50%;
325 326 327 328 329 330 331
      margin-top: (-11px / 2);
    }

    &:hover {
      path {
        fill: $gray-darkest;
      }
332 333 334 335 336 337 338 339 340 341
    }
  }

  .issuable-header-text {
    padding-right: 35px;

    > strong {
      font-weight: 600;
    }
  }
342
}
343 344 345 346

.right-sidebar.right-sidebar-expanded {
  &.boards-sidebar-slide-enter-active,
  &.boards-sidebar-slide-leave-active {
347 348
    transition: width .2s,
                padding .2s;
349 350 351 352 353 354 355 356 357
  }

  &.boards-sidebar-slide-enter,
  &.boards-sidebar-slide-leave-active {
    width: 0;
    padding-left: 0;
    padding-right: 0;
  }
}
358 359

.add-issues-modal {
360
  display: -webkit-flex;
361 362 363 364 365 366 367 368 369 370 371
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba($black, .3);
  z-index: 9999;
}

.add-issues-container {
372
  display: -webkit-flex;
373
  display: flex;
374
  -webkit-flex-direction: column;
375 376 377
  flex-direction: column;
  width: 90vw;
  height: 85vh;
Phil Hughes committed
378
  max-width: 1100px;
Phil Hughes committed
379
  min-height: 500px;
Phil Hughes committed
380
  margin: auto;
381 382 383 384
  padding: 25px 15px 0;
  background-color: $white-light;
  border-radius: $border-radius-default;
  box-shadow: 0 2px 12px rgba($black, .5);
Phil Hughes committed
385 386

  .empty-state {
387
    display: -webkit-flex;
Phil Hughes committed
388
    display: flex;
389
    -webkit-flex: 1;
Phil Hughes committed
390 391 392
    flex: 1;
    margin-top: 0;

393 394 395
    &.add-issues-empty-state-filter {
      -webkit-flex-direction: column;
      flex-direction: column;
Phil Hughes committed
396 397
      -webkit-justify-content: center;
      justify-content: center;
398 399
    }

Phil Hughes committed
400 401
    > .row {
      width: 100%;
Phil Hughes committed
402 403 404 405 406
      margin: auto 0;
    }

    .svg-content {
      margin-top: -40px;
Phil Hughes committed
407 408
    }
  }
409 410 411
}

.add-issues-header {
412 413 414
  margin: -25px -15px -5px;
  border-top: 0;
  border-bottom: 1px solid $border-color;
Phil Hughes committed
415 416
  border-top-right-radius: $border-radius-default;
  border-top-left-radius: $border-radius-default;
417

418 419 420 421
  > h2 {
    margin: 0;
    font-size: 18px;
  }
422
}
Phil Hughes committed
423

424
.add-issues-search {
425
  display: -webkit-flex;
426
  display: flex;
427

428
  .issues-filters {
Phil Hughes committed
429 430
    -webkit-flex: 1;
    flex: 1;
431
  }
432 433
}

434 435 436 437 438 439 440 441 442 443 444 445
.add-issues-list-column {
  width: 100%;

  @media (min-width: $screen-sm-min) {
    width: 50%;
  }

  @media (min-width: $screen-md-min) {
    width: (100% / 3);
  }
}

446
.add-issues-list {
447
  display: -webkit-flex;
448
  display: flex;
449
  -webkit-flex: 1;
450
  flex: 1;
Phil Hughes committed
451
  padding-top: 3px;
Phil Hughes committed
452 453
  margin-left: -$gl-vert-padding;
  margin-right: -$gl-vert-padding;
454
  overflow-y: scroll;
455

Phil Hughes committed
456
  .card-parent {
Phil Hughes committed
457
    padding: 0 5px 5px;
Phil Hughes committed
458 459 460
  }

  .card {
Phil Hughes committed
461
    border: 1px solid $border-gray-dark;
Phil Hughes committed
462
    box-shadow: 0 1px 2px rgba($issue-boards-card-shadow, .3);
Phil Hughes committed
463 464
    cursor: pointer;
  }
Phil Hughes committed
465
}
466

Phil Hughes committed
467
.add-issues-list-loading {
468
  -webkit-align-self: center;
469
  align-self: center;
Phil Hughes committed
470 471 472 473 474 475 476
  width: 100%;
  padding-left: $gl-vert-padding;
  padding-right: $gl-vert-padding;
  font-size: 35px;
}

.add-issues-footer {
Phil Hughes committed
477
  margin: auto -15px 0;
Phil Hughes committed
478 479
  padding-left: 15px;
  padding-right: 15px;
Phil Hughes committed
480 481
  border-bottom-right-radius: $border-radius-default;
  border-bottom-left-radius: $border-radius-default;
Phil Hughes committed
482 483 484 485 486 487
}

.add-issues-footer-to-list {
  padding-left: $gl-vert-padding;
  padding-right: $gl-vert-padding;
  line-height: 34px;
488 489 490 491 492 493
}

.issue-card-selected {
  position: absolute;
  right: -3px;
  top: -3px;
Phil Hughes committed
494
  width: 17px;
495
  background-color: $blue-500;
496
  color: $white-light;
497
  border: 1px solid $blue-600;
Phil Hughes committed
498
  font-size: 9px;
499
  line-height: 15px;
500 501
  border-radius: 50%;
}
502 503 504 505 506

.modal-filters {
  display: flex;

  > .dropdown {
507
    display: none;
508
    margin-right: 10px;
509 510 511 512

    @media (min-width: $screen-sm-min) {
      display: block;
    }
513 514 515
  }

  .dropdown-menu-toggle {
516 517 518 519 520
    width: 100px;

    @media (min-width: $screen-md-min) {
      width: 140px;
    }
521 522
  }
}