BigW Consortium Gitlab

nav.scss 3.44 KB
Newer Older
1 2 3 4
.nav-links {
  padding: 0;
  margin: 0;
  list-style: none;
5
  height: auto;
6 7 8 9 10 11 12
  border-bottom: 1px solid $border-color;

  li {
    display: inline-block;

    a {
      display: inline-block;
13
      padding: 14px;
14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
      padding-top: $gl-padding;
      padding-bottom: 11px;
      margin-bottom: -1px;
      font-size: 15px;
      line-height: 28px;
      color: #959494;
      border-bottom: 2px solid transparent;

      &:hover, &:active, &:focus {
        text-decoration: none;
        outline: none;
      }
    }

    &.active a {
29
      color: #000;
30 31 32 33 34 35 36 37 38 39
      border-bottom: 2px solid #4688f1;
    }

    .badge {
      font-weight: normal;
      background-color: #eee;
      color: #78a;
    }
  }
}
40 41

.top-area {
42 43
  @include clearfix;

44
  border-bottom: 1px solid #eee;
45 46 47 48 49 50 51

  .nav-text {
    padding-top: 16px;
    padding-bottom: 11px;
    display: inline-block;
    width: 50%;
    line-height: 28px;
52 53 54 55 56

    /* Small devices (phones, tablets, 768px and lower) */
    @media (max-width: $screen-sm-min) {
      width: 100%;
    }
57 58
  }

59 60 61 62 63 64 65 66 67 68 69
  .nav-search {
    display: inline-block;
    width: 50%;
    padding: 11px 0;

    /* Small devices (phones, tablets, 768px and lower) */
    @media (max-width: $screen-sm-min) {
      width: 100%;
    }
  }

70 71 72
  .nav-links {
    display: inline-block;
    width: 50%;
73
    margin-bottom: 0;
74
    border-bottom: none;
75 76

    /* Small devices (phones, tablets, 768px and lower) */
77
    @media (max-width: $screen-sm-max) {
78 79
      width: 100%;
    }
80 81 82 83 84 85 86 87
  }

  .nav-controls {
    width: 50%;
    display: inline-block;
    float: right;
    text-align: right;
    padding: 11px 0;
88
    margin-bottom: 0;
89 90

    > .dropdown {
91
      margin-right: $gl-padding-top;
92
      display: inline-block;
93 94 95 96

      &:last-child {
        margin-right: 0;
      }
97 98
    }

99
    > .btn {
100
      margin-right: $gl-padding-top;
101
      display: inline-block;
102 103 104 105 106 107 108 109

      &:last-child {
        margin-right: 0;
      }
    }

    > .btn-grouped {
      float: none;
110
    }
111

112 113
    > form {
      display: inline-block;
114
      margin-top: -1px;
115 116
    }

117 118 119 120
    .icon-label {
      display: none;
    }

121
    input {
122
      height: 34px;
123
      display: inline-block;
124
      position: relative;
125
      top: 2px;
126
      margin-right: $gl-padding-top;
127 128 129 130 131

      /* Medium devices (desktops, 992px and up) */
      @media (min-width: $screen-md-min) { width: 200px; }

      /* Large devices (large desktops, 1200px and up) */
132
      @media (min-width: $screen-lg-min) { width: 250px; }
133

134 135 136 137 138 139 140
      &.input-short {
        /* Medium devices (desktops, 992px and up) */
        @media (min-width: $screen-md-min) { width: 170px; }

        /* Large devices (large desktops, 1200px and up) */
        @media (min-width: $screen-lg-min) { width: 210px; }
      }
141 142
    }

143 144 145 146
    @media (max-width: $screen-xs-max) {
      padding-bottom: 0;

      .btn, form, .dropdown, .dropdown-menu-toggle, .form-control {
147
        margin: 0 0 10px;
148
        display: block;
149
        width: 100%;
150 151 152 153 154
      }

      form {
        display: block;
        height: auto;
155 156 157

        input {
          width: 100%;
Alfredo Sumaran committed
158
          margin: 0 0 10px;
159
        }
160 161
      }

Alfredo Sumaran committed
162
      .input-short {
163 164 165 166 167 168
        width: 100%;
      }

      .icon-label {
        display: inline-block;
      }
169 170 171 172 173 174

      // Applies on /dashboard/issues
      .project-item-select-holder {
        display: block;
        margin: 0;
      }
175 176 177 178 179 180 181 182 183 184
    }

    /* Small devices (tablets, 768px and lower) */
    @media (max-width: $screen-sm-max) {
      width: 100%;
      text-align: left;

      input {
        width: 300px;
      }
185 186 187
    }
  }
}