debian-mirror-gitlab/app/assets/stylesheets/framework/gitlab_theme.scss

375 lines
6.6 KiB
SCSS
Raw Normal View History

2018-03-17 18:26:18 +05:30
/**
* Styles the GitLab application with a specific color theme
*/
2018-05-09 12:01:36 +05:30
@mixin gitlab-theme(
2018-11-08 19:23:39 +05:30
$search-and-nav-links,
$active-tab-border,
$border-and-box-shadow,
$sidebar-text,
$nav-svg-color,
2018-05-09 12:01:36 +05:30
$color-alternate
) {
2018-03-17 18:26:18 +05:30
// Header
.navbar-gitlab {
2018-11-08 19:23:39 +05:30
background-color: $nav-svg-color;
2018-03-17 18:26:18 +05:30
.navbar-collapse {
2018-11-08 19:23:39 +05:30
color: $search-and-nav-links;
2018-03-17 18:26:18 +05:30
}
.container-fluid {
2018-11-08 19:23:39 +05:30
.navbar-toggler {
border-left: 1px solid lighten($border-and-box-shadow, 10%);
2019-02-15 15:39:39 +05:30
svg {
fill: $search-and-nav-links;
}
2018-03-17 18:26:18 +05:30
}
}
.navbar-sub-nav,
.navbar-nav {
> li {
2018-11-08 19:23:39 +05:30
> a,
> button {
&:hover,
&:focus {
background-color: rgba($search-and-nav-links, 0.2);
}
2018-03-17 18:26:18 +05:30
}
2018-11-08 19:23:39 +05:30
&.active,
&.dropdown.show {
> a,
> button {
color: $nav-svg-color;
background-color: $color-alternate;
}
2018-03-17 18:26:18 +05:30
}
&.line-separator {
2018-11-08 19:23:39 +05:30
border-left: 1px solid rgba($search-and-nav-links, 0.2);
2018-03-17 18:26:18 +05:30
}
}
}
.navbar-sub-nav {
2018-11-08 19:23:39 +05:30
color: $search-and-nav-links;
2018-03-17 18:26:18 +05:30
}
.nav {
> li {
2018-11-08 19:23:39 +05:30
color: $search-and-nav-links;
2018-03-17 18:26:18 +05:30
> a {
&.header-user-dropdown-toggle {
.header-user-avatar {
2018-11-08 19:23:39 +05:30
border-color: $search-and-nav-links;
2018-03-17 18:26:18 +05:30
}
}
&:hover,
&:focus {
2018-11-08 19:23:39 +05:30
@include media-breakpoint-up(sm) {
background-color: rgba($search-and-nav-links, 0.2);
2018-03-17 18:26:18 +05:30
}
svg {
fill: currentColor;
}
}
}
&.active > a,
2018-11-08 19:23:39 +05:30
&.dropdown.show > a {
color: $nav-svg-color;
2018-03-17 18:26:18 +05:30
background-color: $color-alternate;
&:hover {
svg {
2018-11-08 19:23:39 +05:30
fill: $nav-svg-color;
2018-03-17 18:26:18 +05:30
}
}
}
.impersonated-user,
.impersonated-user:hover {
svg {
2018-11-08 19:23:39 +05:30
fill: $nav-svg-color;
2018-03-17 18:26:18 +05:30
}
}
}
}
}
.navbar .title {
> a {
&:hover,
&:focus {
2018-11-08 19:23:39 +05:30
background-color: rgba($search-and-nav-links, 0.2);
2018-03-17 18:26:18 +05:30
}
}
}
.search {
form {
2018-11-08 19:23:39 +05:30
background-color: rgba($search-and-nav-links, 0.2);
2018-03-17 18:26:18 +05:30
&:hover {
2018-11-08 19:23:39 +05:30
background-color: rgba($search-and-nav-links, 0.3);
2018-03-17 18:26:18 +05:30
}
}
.search-input::placeholder {
2018-11-08 19:23:39 +05:30
color: rgba($search-and-nav-links, 0.8);
2018-03-17 18:26:18 +05:30
}
.search-input-wrap {
.search-icon,
.clear-icon {
2018-11-08 19:23:39 +05:30
fill: rgba($search-and-nav-links, 0.8);
2018-03-17 18:26:18 +05:30
}
}
&.search-active {
form {
background-color: $white-light;
}
.search-input-wrap {
.search-icon {
2018-11-08 19:23:39 +05:30
fill: rgba($search-and-nav-links, 0.8);
2018-03-17 18:26:18 +05:30
}
}
}
}
// Sidebar
.nav-sidebar li.active {
2018-11-08 19:23:39 +05:30
box-shadow: inset 4px 0 0 $border-and-box-shadow;
2018-03-17 18:26:18 +05:30
> a {
2018-11-08 19:23:39 +05:30
color: $sidebar-text;
2018-03-17 18:26:18 +05:30
}
svg {
2018-11-08 19:23:39 +05:30
fill: $sidebar-text;
2018-03-17 18:26:18 +05:30
}
}
2018-11-08 19:23:39 +05:30
.sidebar-top-level-items > li.active .badge.badge-pill {
color: $sidebar-text;
2018-03-17 18:26:18 +05:30
}
2018-11-08 19:23:39 +05:30
.nav-links li {
&.active a,
2018-12-13 13:39:08 +05:30
&.md-header-tab.active button,
2018-11-08 19:23:39 +05:30
a.active {
border-bottom: 2px solid $active-tab-border;
2018-03-17 18:26:18 +05:30
2018-11-08 19:23:39 +05:30
.badge.badge-pill {
font-weight: $gl-font-weight-bold;
}
2018-03-17 18:26:18 +05:30
}
}
2018-05-09 12:01:36 +05:30
.branch-header-title {
2018-11-08 19:23:39 +05:30
color: $border-and-box-shadow;
2018-05-09 12:01:36 +05:30
}
2018-10-15 14:42:47 +05:30
.ide-sidebar-link {
&.active {
2018-11-08 19:23:39 +05:30
color: $border-and-box-shadow;
box-shadow: inset 3px 0 $border-and-box-shadow;
&.is-right {
box-shadow: inset -3px 0 $border-and-box-shadow;
}
2018-10-15 14:42:47 +05:30
}
}
2018-05-09 12:01:36 +05:30
}
2018-03-17 18:26:18 +05:30
body {
2018-11-08 19:23:39 +05:30
&.ui-indigo {
2018-05-09 12:01:36 +05:30
@include gitlab-theme(
$indigo-200,
$indigo-500,
$indigo-700,
$indigo-800,
$indigo-900,
$white-light
);
2018-03-17 18:26:18 +05:30
}
2018-11-08 19:23:39 +05:30
&.ui-light-indigo {
2018-05-09 12:01:36 +05:30
@include gitlab-theme(
2018-11-08 19:23:39 +05:30
$indigo-200,
$indigo-500,
$indigo-500,
$indigo-700,
$indigo-700,
2018-05-09 12:01:36 +05:30
$white-light
);
2018-03-17 18:26:18 +05:30
}
2018-11-08 19:23:39 +05:30
&.ui-blue {
2018-05-09 12:01:36 +05:30
@include gitlab-theme(
$theme-blue-200,
$theme-blue-500,
$theme-blue-700,
$theme-blue-800,
$theme-blue-900,
$white-light
);
2018-03-17 18:26:18 +05:30
}
2018-11-08 19:23:39 +05:30
&.ui-light-blue {
@include gitlab-theme(
$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-05-09 12:01:36 +05:30
@include gitlab-theme(
$theme-green-200,
$theme-green-500,
$theme-green-700,
$theme-green-800,
$theme-green-900,
$white-light
);
2018-03-17 18:26:18 +05:30
}
2018-11-08 19:23:39 +05:30
&.ui-light-green {
@include gitlab-theme(
$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-200,
$theme-red-500,
$theme-red-700,
$theme-red-800,
$theme-red-900,
$white-light
);
}
&.ui-light-red {
@include gitlab-theme(
$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(
2019-03-02 22:35:43 +05:30
$gray-200,
$gray-500,
$gray-700,
$gray-800,
$gray-900,
2018-11-08 19:23:39 +05:30
$white-light
);
}
&.ui-light {
2018-05-09 12:01:36 +05:30
@include gitlab-theme(
2019-03-02 22:35:43 +05:30
$gray-700,
$gray-800,
$gray-700,
$gray-700,
$gray-100,
$gray-700
2018-05-09 12:01:36 +05:30
);
2018-03-17 18:26:18 +05:30
.navbar-gitlab {
2019-03-02 22:35:43 +05:30
background-color: $gray-100;
2018-03-17 18:26:18 +05:30
box-shadow: 0 1px 0 0 $border-color;
.logo-text svg {
2019-03-02 22:35:43 +05:30
fill: $gray-900;
2018-03-17 18:26:18 +05:30
}
.navbar-sub-nav,
.navbar-nav {
> li {
> a:hover,
2019-02-15 15:39:39 +05:30
> a:focus,
> button:hover {
2019-03-02 22:35:43 +05:30
color: $gray-900;
2018-03-17 18:26:18 +05:30
}
&.active > a,
2019-02-15 15:39:39 +05:30
&.active > a:hover,
&.active > button {
2018-03-17 18:26:18 +05:30
color: $white-light;
}
}
}
.container-fluid {
2018-11-08 19:23:39 +05:30
.navbar-toggler,
.navbar-toggler:hover {
2019-03-02 22:35:43 +05:30
color: $gray-700;
border-left: 1px solid $gray-200;
2018-03-17 18:26:18 +05:30
}
}
}
.search {
form {
background-color: $white-light;
box-shadow: inset 0 0 0 1px $border-color;
&:hover {
background-color: $white-light;
box-shadow: inset 0 0 0 1px $blue-200;
}
}
.search-input-wrap {
.search-icon {
2019-03-02 22:35:43 +05:30
fill: $gray-200;
2018-03-17 18:26:18 +05:30
}
.search-input {
color: $gl-text-color;
}
}
}
.nav-sidebar li.active {
> a {
2019-03-02 22:35:43 +05:30
color: $gray-900;
2018-03-17 18:26:18 +05:30
}
svg {
2019-03-02 22:35:43 +05:30
fill: $gray-900;
2018-03-17 18:26:18 +05:30
}
}
2018-11-08 19:23:39 +05:30
.sidebar-top-level-items > li.active .badge.badge-pill {
2019-03-02 22:35:43 +05:30
color: $gray-900;
2018-03-17 18:26:18 +05:30
}
}
}