summaryrefslogtreecommitdiff
path: root/app/assets/stylesheets/framework/layout.scss
blob: 20c7bc93c2800f379e2f1bc4f9e33cd4dbef0791 (plain)
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
html {
  overflow-y: scroll;

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

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

  &.card-content {
    background-color: $gray-darker;

    .content-wrapper {
      padding: 0;

      .container-fluid,
      .container-limited {
        background-color: $gray-darker;
      }
    }
  }
}

.content-wrapper {
  padding-bottom: 100px;
}

.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: $orange-500;
    border-color: $orange-500;
  }

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

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

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

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


/* 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;
}