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