2017-09-11 11:44:42 -04:00
|
|
|
/**
|
|
|
|
* Styles the GitLab application with a specific color theme
|
|
|
|
*/
|
|
|
|
|
2018-03-23 10:58:00 -04:00
|
|
|
@mixin gitlab-theme(
|
2018-06-07 03:37:02 -04:00
|
|
|
$location-badge-color,
|
|
|
|
$search-and-nav-links,
|
|
|
|
$active-tab-border,
|
|
|
|
$border-and-box-shadow,
|
|
|
|
$sidebar-text,
|
|
|
|
$nav-svg-color,
|
2018-03-23 10:58:00 -04:00
|
|
|
$color-alternate
|
|
|
|
) {
|
2017-09-11 11:44:42 -04:00
|
|
|
// Header
|
|
|
|
|
2017-10-06 19:44:54 -04:00
|
|
|
.navbar-gitlab {
|
2018-06-07 03:37:02 -04:00
|
|
|
background-color: $nav-svg-color;
|
2017-09-11 11:44:42 -04:00
|
|
|
|
|
|
|
.navbar-collapse {
|
2018-06-07 03:37:02 -04:00
|
|
|
color: $search-and-nav-links;
|
2017-09-11 11:44:42 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
.container-fluid {
|
2018-04-10 14:10:52 -04:00
|
|
|
.navbar-toggler {
|
2018-06-07 03:37:02 -04:00
|
|
|
border-left: 1px solid lighten($border-and-box-shadow, 10%);
|
2017-09-11 11:44:42 -04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.navbar-sub-nav,
|
|
|
|
.navbar-nav {
|
|
|
|
> li {
|
|
|
|
> a:hover,
|
|
|
|
> a:focus {
|
2018-06-07 03:37:02 -04:00
|
|
|
background-color: rgba($search-and-nav-links, 0.2);
|
2017-09-11 11:44:42 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
&.active > a,
|
2018-06-04 19:27:31 -04:00
|
|
|
&.dropdown.show > a {
|
2018-06-07 03:37:02 -04:00
|
|
|
color: $nav-svg-color;
|
2017-09-11 11:44:42 -04:00
|
|
|
background-color: $color-alternate;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.line-separator {
|
2018-06-07 03:37:02 -04:00
|
|
|
border-left: 1px solid rgba($search-and-nav-links, 0.2);
|
2017-09-11 11:44:42 -04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.navbar-sub-nav {
|
2018-06-07 03:37:02 -04:00
|
|
|
color: $search-and-nav-links;
|
2017-09-11 11:44:42 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
.nav {
|
|
|
|
> li {
|
2018-06-07 03:37:02 -04:00
|
|
|
color: $search-and-nav-links;
|
2017-09-11 11:44:42 -04:00
|
|
|
|
|
|
|
> a {
|
|
|
|
&.header-user-dropdown-toggle {
|
|
|
|
.header-user-avatar {
|
2018-06-07 03:37:02 -04:00
|
|
|
border-color: $search-and-nav-links;
|
2017-09-11 11:44:42 -04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover,
|
|
|
|
&:focus {
|
2018-04-09 11:26:28 -04:00
|
|
|
@include media-breakpoint-up(sm) {
|
2018-06-07 03:37:02 -04:00
|
|
|
background-color: rgba($search-and-nav-links, 0.2);
|
2017-09-11 11:44:42 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
svg {
|
|
|
|
fill: currentColor;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.active > a,
|
2018-06-04 19:27:31 -04:00
|
|
|
&.dropdown.show > a {
|
2018-06-07 03:37:02 -04:00
|
|
|
color: $nav-svg-color;
|
2017-09-11 11:44:42 -04:00
|
|
|
background-color: $color-alternate;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
svg {
|
2018-06-07 03:37:02 -04:00
|
|
|
fill: $nav-svg-color;
|
2017-09-11 11:44:42 -04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.impersonated-user,
|
|
|
|
.impersonated-user:hover {
|
|
|
|
svg {
|
2018-06-07 03:37:02 -04:00
|
|
|
fill: $nav-svg-color;
|
2017-09-11 11:44:42 -04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-10-05 09:12:23 -04:00
|
|
|
.navbar .title {
|
2017-09-11 11:44:42 -04:00
|
|
|
> a {
|
|
|
|
&:hover,
|
|
|
|
&:focus {
|
2018-06-07 03:37:02 -04:00
|
|
|
background-color: rgba($search-and-nav-links, 0.2);
|
2017-09-11 11:44:42 -04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.search {
|
|
|
|
form {
|
2018-06-07 03:37:02 -04:00
|
|
|
background-color: rgba($search-and-nav-links, 0.2);
|
2017-09-11 11:44:42 -04:00
|
|
|
|
|
|
|
&:hover {
|
2018-06-07 03:37:02 -04:00
|
|
|
background-color: rgba($search-and-nav-links, 0.3);
|
2017-09-11 11:44:42 -04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.location-badge {
|
2018-06-07 03:37:02 -04:00
|
|
|
color: $location-badge-color;
|
|
|
|
background-color: rgba($search-and-nav-links, 0.1);
|
|
|
|
border-right: 1px solid $sidebar-text;
|
2017-09-11 11:44:42 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
.search-input::placeholder {
|
2018-06-07 03:37:02 -04:00
|
|
|
color: rgba($search-and-nav-links, 0.8);
|
2017-09-11 11:44:42 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
.search-input-wrap {
|
|
|
|
.search-icon,
|
|
|
|
.clear-icon {
|
2018-06-07 03:37:02 -04:00
|
|
|
fill: rgba($search-and-nav-links, 0.8);
|
2017-09-11 11:44:42 -04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.search-active {
|
|
|
|
form {
|
|
|
|
background-color: $white-light;
|
|
|
|
}
|
|
|
|
|
|
|
|
.location-badge {
|
|
|
|
color: $gl-text-color;
|
|
|
|
}
|
|
|
|
|
|
|
|
.search-input-wrap {
|
|
|
|
.search-icon {
|
2018-06-07 03:37:02 -04:00
|
|
|
fill: rgba($search-and-nav-links, 0.8);
|
2017-09-11 11:44:42 -04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// Sidebar
|
|
|
|
.nav-sidebar li.active {
|
2018-06-07 03:37:02 -04:00
|
|
|
box-shadow: inset 4px 0 0 $border-and-box-shadow;
|
2017-09-11 11:44:42 -04:00
|
|
|
|
|
|
|
> a {
|
2018-06-07 03:37:02 -04:00
|
|
|
color: $sidebar-text;
|
2017-09-11 11:44:42 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
svg {
|
2018-06-07 03:37:02 -04:00
|
|
|
fill: $sidebar-text;
|
2017-09-14 04:54:33 -04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-04-09 11:26:28 -04:00
|
|
|
.sidebar-top-level-items > li.active .badge.badge-pill {
|
2018-06-07 03:37:02 -04:00
|
|
|
color: $sidebar-text;
|
2017-09-14 04:54:33 -04:00
|
|
|
}
|
|
|
|
|
2018-05-31 10:23:49 -04:00
|
|
|
.nav-links li {
|
|
|
|
&.active a,
|
|
|
|
a.active {
|
2018-06-07 03:37:02 -04:00
|
|
|
border-bottom: 2px solid $active-tab-border;
|
2017-09-14 04:54:33 -04:00
|
|
|
|
2018-05-31 10:23:49 -04:00
|
|
|
.badge.badge-pill {
|
|
|
|
font-weight: $gl-font-weight-bold;
|
|
|
|
}
|
2017-09-11 11:44:42 -04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-03-23 10:58:00 -04:00
|
|
|
.branch-header-title {
|
2018-06-07 03:37:02 -04:00
|
|
|
color: $border-and-box-shadow;
|
2018-03-23 10:58:00 -04:00
|
|
|
}
|
2018-03-27 10:25:42 -04:00
|
|
|
|
|
|
|
.ide-file-list .file.file-active {
|
2018-06-07 03:37:02 -04:00
|
|
|
color: $border-and-box-shadow;
|
2018-03-27 10:25:42 -04:00
|
|
|
}
|
2018-04-16 11:29:34 -04:00
|
|
|
|
|
|
|
.ide-sidebar-link {
|
|
|
|
&.active {
|
2018-06-07 03:37:02 -04:00
|
|
|
color: $border-and-box-shadow;
|
|
|
|
box-shadow: inset 3px 0 $border-and-box-shadow;
|
2018-05-23 10:29:34 -04:00
|
|
|
|
|
|
|
&.is-right {
|
2018-06-07 03:37:02 -04:00
|
|
|
box-shadow: inset -3px 0 $border-and-box-shadow;
|
2018-05-23 10:29:34 -04:00
|
|
|
}
|
2018-04-16 11:29:34 -04:00
|
|
|
}
|
|
|
|
}
|
2018-03-23 10:58:00 -04:00
|
|
|
}
|
2017-09-11 11:44:42 -04:00
|
|
|
|
|
|
|
body {
|
2018-06-07 03:37:02 -04:00
|
|
|
&.ui-indigo {
|
2018-03-23 10:58:00 -04:00
|
|
|
@include gitlab-theme(
|
|
|
|
$indigo-100,
|
|
|
|
$indigo-200,
|
|
|
|
$indigo-500,
|
|
|
|
$indigo-700,
|
|
|
|
$indigo-800,
|
|
|
|
$indigo-900,
|
|
|
|
$white-light
|
|
|
|
);
|
2017-09-11 11:44:42 -04:00
|
|
|
}
|
|
|
|
|
2018-06-07 03:37:02 -04:00
|
|
|
&.ui-light-indigo {
|
2018-03-23 10:58:00 -04:00
|
|
|
@include gitlab-theme(
|
2018-06-07 03:37:02 -04:00
|
|
|
$indigo-100,
|
|
|
|
$indigo-200,
|
|
|
|
$indigo-500,
|
|
|
|
$indigo-500,
|
|
|
|
$indigo-700,
|
|
|
|
$indigo-700,
|
2018-03-23 10:58:00 -04:00
|
|
|
$white-light
|
|
|
|
);
|
2017-09-11 11:44:42 -04:00
|
|
|
}
|
|
|
|
|
2018-06-07 03:37:02 -04:00
|
|
|
&.ui-blue {
|
2018-03-23 10:58:00 -04:00
|
|
|
@include gitlab-theme(
|
|
|
|
$theme-blue-100,
|
|
|
|
$theme-blue-200,
|
|
|
|
$theme-blue-500,
|
|
|
|
$theme-blue-700,
|
|
|
|
$theme-blue-800,
|
|
|
|
$theme-blue-900,
|
|
|
|
$white-light
|
|
|
|
);
|
2017-09-11 11:44:42 -04:00
|
|
|
}
|
|
|
|
|
2018-06-07 03:37:02 -04:00
|
|
|
&.ui-light-blue {
|
|
|
|
@include gitlab-theme(
|
|
|
|
$theme-light-blue-100,
|
|
|
|
$theme-light-blue-200,
|
|
|
|
$theme-light-blue-500,
|
|
|
|
$theme-light-blue-500,
|
|
|
|
$theme-light-blue-700,
|
|
|
|
$theme-light-blue-700,
|
|
|
|
$white-light
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
&.ui-green {
|
2018-03-23 10:58:00 -04:00
|
|
|
@include gitlab-theme(
|
|
|
|
$theme-green-100,
|
|
|
|
$theme-green-200,
|
|
|
|
$theme-green-500,
|
|
|
|
$theme-green-700,
|
|
|
|
$theme-green-800,
|
|
|
|
$theme-green-900,
|
|
|
|
$white-light
|
|
|
|
);
|
2017-09-11 11:44:42 -04:00
|
|
|
}
|
|
|
|
|
2018-06-07 03:37:02 -04:00
|
|
|
&.ui-light-green {
|
|
|
|
@include gitlab-theme(
|
|
|
|
$theme-green-100,
|
|
|
|
$theme-green-200,
|
|
|
|
$theme-green-500,
|
|
|
|
$theme-green-500,
|
|
|
|
$theme-light-green-700,
|
|
|
|
$theme-light-green-700,
|
|
|
|
$white-light
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
&.ui-red {
|
|
|
|
@include gitlab-theme(
|
|
|
|
$theme-red-100,
|
|
|
|
$theme-red-200,
|
|
|
|
$theme-red-500,
|
|
|
|
$theme-red-700,
|
|
|
|
$theme-red-800,
|
|
|
|
$theme-red-900,
|
|
|
|
$white-light
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
&.ui-light-red {
|
|
|
|
@include gitlab-theme(
|
|
|
|
$theme-light-red-100,
|
|
|
|
$theme-light-red-200,
|
|
|
|
$theme-light-red-500,
|
|
|
|
$theme-light-red-500,
|
|
|
|
$theme-light-red-700,
|
|
|
|
$theme-light-red-700,
|
|
|
|
$white-light
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
&.ui-dark {
|
|
|
|
@include gitlab-theme(
|
|
|
|
$theme-gray-100,
|
|
|
|
$theme-gray-200,
|
|
|
|
$theme-gray-500,
|
|
|
|
$theme-gray-700,
|
|
|
|
$theme-gray-800,
|
|
|
|
$theme-gray-900,
|
|
|
|
$white-light
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
&.ui-light {
|
2018-03-23 10:58:00 -04:00
|
|
|
@include gitlab-theme(
|
|
|
|
$theme-gray-900,
|
|
|
|
$theme-gray-700,
|
|
|
|
$theme-gray-800,
|
|
|
|
$theme-gray-700,
|
|
|
|
$theme-gray-700,
|
|
|
|
$theme-gray-100,
|
|
|
|
$theme-gray-700
|
|
|
|
);
|
2017-09-11 11:44:42 -04:00
|
|
|
|
2017-10-06 19:44:54 -04:00
|
|
|
.navbar-gitlab {
|
2017-09-22 15:06:13 -04:00
|
|
|
background-color: $theme-gray-100;
|
2017-10-06 19:44:54 -04:00
|
|
|
box-shadow: 0 1px 0 0 $border-color;
|
2017-09-11 11:44:42 -04:00
|
|
|
|
|
|
|
.logo-text svg {
|
|
|
|
fill: $theme-gray-900;
|
|
|
|
}
|
|
|
|
|
|
|
|
.navbar-sub-nav,
|
|
|
|
.navbar-nav {
|
|
|
|
> li {
|
|
|
|
> a:hover,
|
|
|
|
> a:focus {
|
|
|
|
color: $theme-gray-900;
|
|
|
|
}
|
|
|
|
|
2017-10-29 11:24:11 -04:00
|
|
|
&.active > a,
|
|
|
|
&.active > a:hover {
|
2017-09-11 11:44:42 -04:00
|
|
|
color: $white-light;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.container-fluid {
|
2018-04-10 14:10:52 -04:00
|
|
|
.navbar-toggler,
|
|
|
|
.navbar-toggler:hover {
|
2017-09-11 11:44:42 -04:00
|
|
|
color: $theme-gray-700;
|
|
|
|
border-left: 1px solid $theme-gray-200;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.search {
|
|
|
|
form {
|
|
|
|
background-color: $white-light;
|
|
|
|
box-shadow: inset 0 0 0 1px $border-color;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
background-color: $white-light;
|
2017-09-22 20:06:18 -04:00
|
|
|
box-shadow: inset 0 0 0 1px $blue-200;
|
2017-09-11 11:44:42 -04:00
|
|
|
|
|
|
|
.location-badge {
|
2017-09-22 20:06:18 -04:00
|
|
|
box-shadow: inset 0 0 0 1px $blue-200;
|
2017-09-11 11:44:42 -04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.search-input-wrap {
|
|
|
|
.search-icon {
|
2017-09-28 09:43:52 -04:00
|
|
|
fill: $theme-gray-200;
|
2017-09-11 11:44:42 -04:00
|
|
|
}
|
2017-09-21 18:13:20 -04:00
|
|
|
|
|
|
|
.search-input {
|
|
|
|
color: $gl-text-color;
|
|
|
|
}
|
2017-09-11 11:44:42 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
.location-badge {
|
|
|
|
color: $theme-gray-700;
|
|
|
|
box-shadow: inset 0 0 0 1px $border-color;
|
|
|
|
background-color: $nav-badge-bg;
|
|
|
|
border-right: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.nav-sidebar li.active {
|
|
|
|
> a {
|
|
|
|
color: $theme-gray-900;
|
|
|
|
}
|
|
|
|
|
|
|
|
svg {
|
|
|
|
fill: $theme-gray-900;
|
|
|
|
}
|
|
|
|
}
|
2017-09-14 04:54:33 -04:00
|
|
|
|
2018-04-09 11:26:28 -04:00
|
|
|
.sidebar-top-level-items > li.active .badge.badge-pill {
|
2017-09-14 04:54:33 -04:00
|
|
|
color: $theme-gray-900;
|
|
|
|
}
|
2017-09-11 11:44:42 -04:00
|
|
|
}
|
|
|
|
}
|