nav.scss 2.91 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
  }

  .nav-links {
    display: inline-block;
    width: 50%;
62
    margin-bottom: 0;
63
    border-bottom: none;
64 65

    /* Small devices (phones, tablets, 768px and lower) */
66
    @media (max-width: $screen-sm-max) {
67 68
      width: 100%;
    }
69 70 71 72 73 74 75 76
  }

  .nav-controls {
    width: 50%;
    display: inline-block;
    float: right;
    text-align: right;
    padding: 11px 0;
77
    margin-bottom: 0;
78 79

    > .dropdown {
80
      margin-right: $gl-padding-top;
81
      display: inline-block;
82 83 84 85

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

88
    > .btn {
89
      margin-right: $gl-padding-top;
90
      display: inline-block;
91 92 93 94 95 96 97 98

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

    > .btn-grouped {
      float: none;
99
    }
100

101 102 103 104
    > form {
      display: inline-block;
    }

105 106 107 108
    .icon-label {
      display: none;
    }

109
    input {
110
      height: 34px;
111
      display: inline-block;
112 113
      position: relative;
      top: 1px;
114
      margin-right: $gl-padding-top;
115 116 117 118 119

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

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

122 123 124 125 126 127 128
      &.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; }
      }
129 130
    }

131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148
    @media (max-width: 600px) {
      .btn, form {
        margin: 0 0 10px 0;
        display: block;
      }

      form {
        display: block;
        height: auto;
      }

      input.input-short {
        width: 100%;
      }

      .icon-label {
        display: inline-block;
      }
149 150 151 152 153 154 155 156 157 158
    }

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

      input {
        width: 300px;
      }
159 160 161
    }
  }
}