gitlab-org--gitlab-foss/app/assets/stylesheets/framework/layout.scss
Connor Smallman f68a715366 Removed hidden-xs class from alerts
Centered alert text and prevented alert actions links from floating
right for viewports below medium width (992px)

Centered alert text stopped alert actions from floating right for viewports below medium width (992px)

Update styles to use correct screen width variable for max-width media query

Added unreleased changelog

Added class to alert links wrapper
Updated styles for new class, float alert links on larger screens
2017-01-11 07:12:38 +00:00

97 lines
2.1 KiB
SCSS

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