chrome/common/extensions/docs/static/sass/_navbar.scss

   1 $nav-item-shaded-bg: $gray-light url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAyCAMAAABI+VrBAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAALFQTFRF/////f39/v7+/Pz8+/v7+fn56+vr+vr69PT09vb28/Pz9fX1xcXF9/f3+Pj45+fn8PDwycnJ7+/v6enpzc3N19fX8fHx8vLy7u7u6Ojo7Ozs3Nzc5OTk7e3t4uLi2dnZ39/fxsbG29vb0dHR3d3d4ODg4+Pj6urqyMjI09PT5eXl0NDQ1dXV2NjYysrKx8fH5ubmzs7O3t7exMTE4eHh2tray8vLz8/PzMzM1NTU1tbWhgtdWwAAAOFJREFUeNok0NWSxCAURdFDhCQkMx3tuLe7jP//h829NC+rqIKNAK8hhGEQjmUyrm+ziVTs50O6jkA6b+J3gSCqpWfiGZxL1yKyhbIQEDQLxj7xTYy7SXoCY1RXbwLXy6OgfdevIbYFdulHaBuI7t3SIY5Nbhm4zAdF/Ow5gvTEEaR/W49Ov2eSIvjuW+Y4tdTCXHML+1XI/A7cwmmdM1nHLZwbl+kPPj9lunELq5LuRWy5hUFyC+uKI+hazabgCJpYcws5gsXS5F8qc02i9C9Jn9ejelHoMkJdhrJ5xb8AAwBmihB0TS21nQAAAABJRU5ErkJggg==) no-repeat right 0;
   2 $nav-border-color: rgb(232, 232, 232);
   3 $nav-font-size: 0.9em;
   4 $z-index-nav-hover: 1001;
   5 $nav-hover-gradient: linear-gradient(205deg,rgba(229,229,229,.7) 0,rgba(233,233,233,.7) 20%, rgba(244,244,244,.7) 100%);
   6 $nav-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.12);
   7
   8 #topnav {
   9   @include display-flex();
  10   @include align-items(center);
  11   height: $top-nav-height;
  12   position: relative;
  13   //margin-bottom: $main-content-top-margin;
  14 }
  15
  16 #logo {
  17   @include display-flex();
  18   @include align-items(center);
  19   @include user-select(none);
  20
  21   a {
  22     @include display-flex();
  23     @include align-items(center);
  24     color: $gray-dark;
  25
  26     font-size: 2em;
  27     font-weight: 400;
  28     letter-spacing: -1px;
  29
  30     img {
  31       margin-bottom: -4px;
  32       height: 40px;
  33       width: 123px;
  34     }
  35   }
  36
  37   .collase-icon {
  38     display: none;
  39     background: url("../../images/burger-icon.png") 50% 100% no-repeat;
  40     background-size: cover;
  41     width: 20px;
  42     height: 20px;
  43
  44     &.active {
  45       background-position: 50% 0;
  46     }
  47   }
  48 }
  49
  50 #fatnav {
  51   height: 100%;
  52   @include display-flex();
  53   @include justify-content(flex-end);
  54   @include flex(1);
  55   white-space: nowrap;
  56
  57   li {
  58     list-style: none;
  59   }
  60
  61   > ul {
  62     @include display-flex();
  63     padding: 0;
  64     margin: 0;
  65   }
  66
  67   .toplevel {
  68     color: $gray-medium;
  69     font-weight: 600;
  70     text-transform: uppercase;
  71     @include user-select(none);
  72
  73     &::after {
  74       content: '';
  75       background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNpiyc/Pn8XAwDATiM8yEAaMQBwBxHxMQMIdiE8D8Vog1sGjyQGqbhkQK4A0PoKaFATEF4F4MRCrImnQBuJtQLwfiI2hYk9AGl2AuB2I/wAxiB8DxNeAeA4QzwXiS0DsCdXwHIj9gHgqSOFPIK4CYksgvgJVwALEyUCcBDWMAeoSkO2bGZAEQeAM1CmtUNth4BkQ+wJxHBC/hwkyoQXALyCuAWILIL4MxIugAbYFI3iNZ54BR4fNtcXo0QEy9B+ywBGtWMzoAAquBWLk6EDXhBIdLNDokINGRwBQAUiiCYhvI0VHN1LIjpjoAAgwAMoSTlKlzAY4AAAAAElFTkSuQmCC) no-repeat;
  76       background-size: 9px;
  77       display: inline-block;
  78       height: 5px;
  79       width: 14px;
  80       margin-left: 10px;
  81       margin-bottom: 2px;
  82     }
  83   }
  84
  85   .pillar {
  86     @include display-flex();
  87     @include align-items(center);
  88     padding: 0 $default-padding;
  89     cursor: pointer;
  90     z-index: $z-index-nav-hover + 1; // ensure on top of expandee
  91   }
  92
  93   .expandee {
  94     display: none;
  95
  96 // @include display-flex();
  97 // @include flex-direction(row);
  98 // //visibility: hidden;
  99 // pointer-events: none;
 100 // transition: opacity 300ms ease-in-out 200ms;
 101 // opacity: 0;
 102 // height: 0;
 103
 104     position: absolute;
 105     z-index: $z-index-nav-hover;
 106     left: 0;
 107     width: 100%;
 108     @include box-sizing(border-box);
 109     background-color: $gray-light;
 110     padding: $default-padding 0;
 111     cursor: initial;
 112     margin: 0;
 113
 114     a {
 115       font-weight: 600;
 116       padding: 0.5em 0;
 117       display: block;
 118       color: $gray-dark;
 119
 120       &:hover {
 121         background-image: $nav-hover-gradient;
 122       }
 123       &.highlight {
 124         color: $black;
 125         background-image: $nav-hover-gradient;
 126       }
 127     }
 128
 129     li {
 130       white-space: nowrap;
 131
 132       &.submenu {
 133         color: #333;;
 134         font-size: 1.1em;
 135         font-weight: bold;
 136         @include flex(1);
 137
 138         &.active {
 139           background-image: $nav-hover-gradient;
 140         }
 141
 142         > ul {
 143           font-size: $nav-font-size - 0.1;
 144           padding: $default-padding - 5 0 0 0;
 145           margin: 0;
 146         }
 147
 148         .category {
 149           border-bottom: 1px solid $nav-border-color;
 150
 151           &:last-child {
 152             border: none;
 153           }
 154
 155           a {
 156             overflow: hidden;
 157             text-overflow: ellipsis;
 158           }
 159
 160           // Hide 3rd level articles.
 161           > ul {
 162             display: none;
 163           }
 164
 165           ul {
 166             padding: 0;
 167           }
 168         }
 169       }
 170     }
 171   }
 172 }
 173
 174 #search {
 175   @include display-inline-flex();
 176   @include align-self(stretch);
 177   @include align-items(center);
 178   width: auto;
 179   padding: 0 $default-padding;
 180   cursor: pointer;
 181
 182   img {
 183     height: 16px;
 184     width: 16px;
 185     @include user-select(none);
 186   }
 187
 188   .expandee {
 189     padding: $default-padding;
 190
 191     input[type="search"] {
 192       width: 100%;
 193       @include box-sizing(border-box);
 194       background: url("../../images/search.png") no-repeat 15px 55%;
 195       background-size: 20px;
 196       background-color: white;
 197       border: $default-border;
 198       //border-color: $gray-light-dark;
 199       padding: 10px 10px 10px 40px;
 200       font-size: 1.4em;
 201       @include flex(1);
 202       font-family: inherit;
 203       font-weight: 300;
 204     }
 205   }
 206 }
 207
 208 @media only screen and (min-width: $break-small)  {
 209
 210   #topnav {
 211     padding: 15px 0 0;
 212   }
 213
 214   #fatnav {
 215     .pillar {
 216       &.highlight .toplevel {
 217         color: $black;
 218       }
 219       &.active {
 220         background: $nav-item-shaded-bg;
 221
 222         .toplevel {
 223           &::after {
 224             background-position: 0% -5px;
 225           }
 226         }
 227
 228         .expandee {
 229           @include display-flex();
 230           @include flex-direction(row);
 231
 232 // pointer-events: all;
 233 // opacity: 1;
 234 // //visibility: visible;
 235
 236           &::after {
 237             position: absolute;
 238             background-image: linear-gradient(bottom,rgba(255, 255, 255, 0) 0,rgba(211, 211, 211, 0.5) 25%,rgb(211, 211, 211) 50%,rgba(211, 211, 211, 0.5) 75%,rgba(255, 255, 255, 0) 100%);
 239             right: 0;
 240             top: 0;
 241             content: '';
 242             width: 1px !important;
 243             height: 100%;
 244           }
 245         }
 246       }
 247
 248       .expandee {
 249         min-height: 400px;
 250         font-size: $nav-font-size;
 251         box-shadow: $nav-box-shadow;
 252         top: $top-nav-height;
 253
 254         .submenu {
 255           padding: 0 $default-padding;
 256           border-right: 1px solid $nav-border-color;
 257           &:last-child {
 258             border: none;
 259           }
 260         }
 261       }
 262     }
 263   }
 264
 265   #search {
 266     margin-right: -4px;
 267
 268     &.active {
 269       background: $nav-item-shaded-bg;
 270
 271       .expandee {
 272         display: block;
 273         top: $top-nav-height;
 274       }
 275     }
 276   }
 277
 278 }
 279
 280 // Phone
 281 @media only screen and (max-width: $break-small)  {
 282   #topnav {
 283     @include flex-direction(column);
 284     height: auto;
 285   }
 286
 287   #fatnav {
 288     width: 100%;
 289     max-height: 0;
 290     //@include transition(all 1s); // TODO(ericbidelman): janky on close
 291     overflow: hidden;
 292     background: $gray-light;
 293
 294     &.active {
 295       max-height: 5000px; // TODO(ericbidelman): Hack. Make nav bigger than we'll ever need.
 296     }
 297
 298     > ul {
 299       @include flex(1);
 300       @include flex-direction(column);
 301     }
 302
 303     .toplevel {
 304       width: 100%;
 305       height: 50px;
 306       @include align-items(center);
 307       @include justify-content(center);
 308       @include display-inline-flex();
 309     }
 310
 311     .pillar {
 312       @include flex-direction(column);
 313       padding: 0;
 314       border-bottom: $default-border;
 315       //border-color: $gray-medium;
 316
 317       &.active {
 318         .expandee {
 319           display: initial;
 320         }
 321       }
 322
 323     }
 324
 325     .expandee {
 326       position: relative;
 327       padding: 0;
 328       background-color: rgba(229,229,229,.7);
 329
 330       li {
 331         &.submenu {
 332           padding: $default-padding / 2 $default-padding - 5;
 333           //border-bottom: none;
 334
 335           &:not(:last-child) {
 336             border-color: #ccc;//$gray-light-dark;
 337           }
 338
 339           > ul {
 340             background-color: inherit;;
 341           }
 342         }
 343       }
 344     }
 345
 346   }
 347
 348   #logo {
 349     height: 50px;
 350     width: 90%;
 351
 352     a {
 353       @include flex(1);
 354     }
 355
 356     .collase-icon {
 357       display: initial;
 358     }
 359   }
 360
 361   #search {
 362     @include display-flex();
 363     @include align-items(center);
 364     @include order(-1);
 365     padding: 15px 15px 0 15px;
 366
 367     img {
 368       display: none;
 369     }
 370
 371     .expandee {
 372       display: block;
 373     }
 374   }
 375 }
 376