BigW Consortium Gitlab

gitlab-theme.scss 1.95 KB
Newer Older
1 2 3 4 5 6 7 8
/**
 * Styles the GitLab application with a specific color theme
 *
 * $color-light  -
 * $color        -
 * $color-darker -
 * $color-dark   -
 */
9
@mixin gitlab-theme($color-light, $color, $color-darker, $color-dark) {
10
  .page-with-sidebar {
11 12
    .toggle-nav-collapse,
    .pin-nav-btn {
13
      color: $color-light;
14 15 16 17

      &:hover {
        color: $white-light;
      }
18 19 20 21 22 23 24 25 26 27 28 29
    }

    .sidebar-wrapper {
      background: $color-darker;
    }

    .nav-sidebar li {
      a {
        color: $color-light;

        &:hover, &:focus, &:active {
          background: $color-dark;
30 31
        }

32 33
        i {
          color: $color-light;
34 35
        }

36 37 38 39 40
        path,
        polygon {
          fill: $color-light;
        }

41
        .count {
42
          color: $color-light;
43
          background: $color-dark;
44
        }
45 46 47 48 49

        svg {
          position: relative;
          top: 3px;
        }
50
      }
51

52 53 54 55 56
      &.separate-item {
        border-top: 1px solid $color;
      }

      &.active a {
57
        color: $white-light;
58
        background: $color-dark;
59 60 61

        &.no-highlight {
          border: none;
62 63
        }

64
        i {
65 66 67 68 69 70
          color: $white-light
        }

        path,
        polygon {
          fill: $white-light;
71 72 73 74 75
        }
      }
    }
  }
}
76

77
$theme-charcoal: #3d454d;
78 79 80 81
$theme-charcoal-dark: #383f45;
$theme-charcoal-text: #b9bbbe;

$theme-blue: #2980b9;
82
$theme-graphite: #666;
83 84
$theme-gray: #373737;
$theme-green: #019875;
85
$theme-violet: #548;
86 87 88

body {
  &.ui_blue {
89
    @include gitlab-theme(#becde9, $theme-blue, #1970a9, #096099);
90 91 92
  }

  &.ui_charcoal {
93
    @include gitlab-theme($theme-charcoal-text, #485157, $theme-charcoal, $theme-charcoal-dark);
94 95 96
  }

  &.ui_graphite {
97
    @include gitlab-theme(#ccc, #777, $theme-graphite, #555);
98 99 100
  }

  &.ui_gray {
101
    @include gitlab-theme(#979797, $theme-gray, #272727, #222);
102 103 104
  }

  &.ui_green {
105
    @include gitlab-theme(#adc, $theme-green, #018865, #017855);
106 107 108
  }

  &.ui_violet {
109
    @include gitlab-theme(#98c, $theme-violet, #436, #325);
110
  }
111
}