app/assets/stylesheets/framework/layout.scss


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

html {
  overflow-y: scroll;

  &.touch .tooltip { display: none !important; }
}

body {
  &.navless {
    background-color: $white-light !important;
  }
}

.container {
  padding-top: 0;
  z-index: 5;
}

.container .content {
  margin: 0;
}

.navless-container {
  margin-top: $header-height;
  padding-top: $gl-padding * 2;
}

.container-limited {
  max-width: $fixed-layout-width;

  &.limit-container-width {
    max-width: $limited-layout-width;
  }
}

.alert-wrapper {
  .alert {
    margin-bottom: 0;

    &:last-child {
      margin-bottom: $gl-padding;
    }
  }

  .alert-link-group {
    float: right;
  }

  /* Center alert text and alert action links on smaller screens */
  @media (max-width: $screen-sm-max) {
    .alert {
      text-align: center;
    }

    .alert-link-group {
      float: none;
    }
  }

  /* Stripe the background colors so that adjacent alert-warnings are distinct from one another */
  .alert-warning {
    transition: background-color 0.15s, border-color 0.15s;
    background-color: lighten($gl-warning, 4%);
    border-color: lighten($gl-warning, 4%);
  }

  .alert-warning + .alert-warning {
    background-color: $gl-warning;
    border-color: $gl-warning;
  }

  .alert-warning + .alert-warning + .alert-warning {
    background-color: darken($gl-warning, 4%);
    border-color: darken($gl-warning, 4%);
  }

  .alert-warning + .alert-warning + .alert-warning + .alert-warning {
    background-color: darken($gl-warning, 8%);
    border-color: darken($gl-warning, 8%);
  }

  .alert-warning:only-of-type {
    background-color: $gl-warning;
    border-color: $gl-warning;
  }
}


/* The following prevents side effects related to iOS Safari's implementation of -webkit-overflow-scrolling: touch,
which is applied to the body by jquery.nicescroling plugin to force hardware acceleration for momentum scrolling. Side
effects are commonly related to inconsisent z-index behavior (e.g. tooltips). By applying the following to direct children
of the body element here, we negate cascading side effects but allow momentum scrolling to be applied to the body  */

.navbar,
.page-gutter,
.page-with-sidebar {
  -webkit-overflow-scrolling: auto;
}