1 | // Copyright 2015 Palantir Technologies, Inc. All rights reserved.
|
2 | // Licensed under the Apache License, Version 2.0.
|
3 |
|
4 | @import "../../common/variables";
|
5 |
|
6 | /*
|
7 | Navbars
|
8 |
|
9 | Markup:
|
10 | <nav class="#{$ns}-navbar {{.modifier}}">
|
11 | <div class="#{$ns}-navbar-group #{$ns}-align-left">
|
12 | <div class="#{$ns}-navbar-heading">Blueprint</div>
|
13 | <input class="#{$ns}-input" placeholder="Search files..." type="text" />
|
14 | </div>
|
15 | <div class="#{$ns}-navbar-group #{$ns}-align-right">
|
16 | <button class="#{$ns}-button #{$ns}-minimal #{$ns}-icon-home">Home</button>
|
17 | <button class="#{$ns}-button #{$ns}-minimal #{$ns}-icon-document">Files</button>
|
18 | <span class="#{$ns}-navbar-divider"></span>
|
19 | <button class="#{$ns}-button #{$ns}-minimal #{$ns}-icon-user"></button>
|
20 | <button class="#{$ns}-button #{$ns}-minimal #{$ns}-icon-notifications"></button>
|
21 | <button class="#{$ns}-button #{$ns}-minimal #{$ns}-icon-cog"></button>
|
22 | </div>
|
23 | </nav>
|
24 |
|
25 | .#{$ns}-dark - Dark theme
|
26 |
|
27 | Styleguide navbar
|
28 | */
|
29 |
|
30 | $navbar-padding: $pt-grid-size * 1.5 !default;
|
31 |
|
32 | $navbar-background-color: $white !default;
|
33 | $dark-navbar-background-color: $dark-gray5 !default;
|
34 |
|
35 | .#{$ns}-navbar {
|
36 | background-color: $navbar-background-color;
|
37 | box-shadow: $pt-elevation-shadow-1;
|
38 | height: $pt-navbar-height;
|
39 | padding: 0 $navbar-padding;
|
40 | position: relative;
|
41 | width: 100%;
|
42 | z-index: $pt-z-index-content;
|
43 |
|
44 | &.#{$ns}-dark,
|
45 | .#{$ns}-dark & {
|
46 | background-color: $dark-navbar-background-color;
|
47 | }
|
48 |
|
49 | // shadow for dark navbar in light theme apps
|
50 | &.#{$ns}-dark {
|
51 | box-shadow: inset $pt-dark-elevation-shadow-1;
|
52 | }
|
53 |
|
54 | // shadow for dark navbar in dark theme apps
|
55 | .#{$ns}-dark & {
|
56 | box-shadow: $pt-dark-elevation-shadow-1;
|
57 | }
|
58 |
|
59 | &.#{$ns}-fixed-top {
|
60 | left: 0;
|
61 | position: fixed;
|
62 | right: 0;
|
63 | top: 0;
|
64 | }
|
65 | }
|
66 |
|
67 | .#{$ns}-navbar-heading {
|
68 | font-size: $pt-font-size-large;
|
69 | margin-right: $navbar-padding;
|
70 | }
|
71 |
|
72 | .#{$ns}-navbar-group {
|
73 | align-items: center;
|
74 | display: flex;
|
75 | height: $pt-navbar-height;
|
76 |
|
77 | &.#{$ns}-align-left {
|
78 | float: left;
|
79 | }
|
80 |
|
81 | &.#{$ns}-align-right {
|
82 | float: right;
|
83 | }
|
84 | }
|
85 |
|
86 | .#{$ns}-navbar-divider {
|
87 | border-left: 1px solid $pt-divider-black;
|
88 | height: $pt-navbar-height - $pt-grid-size * 3;
|
89 | margin: 0 $pt-grid-size;
|
90 |
|
91 | .#{$ns}-dark & {
|
92 | border-left-color: $pt-dark-divider-white;
|
93 | }
|
94 | }
|
95 |
|
96 | /*
|
97 | Fixed width
|
98 |
|
99 | Markup:
|
100 | <nav class="#{$ns}-navbar #{$ns}-dark">
|
101 | <div style="margin: 0 auto; width: 480px;"> <!-- ADD ME -->
|
102 | <div class="#{$ns}-navbar-group #{$ns}-align-left">
|
103 | <div class="#{$ns}-navbar-heading">Blueprint</div>
|
104 | </div>
|
105 | <div class="#{$ns}-navbar-group #{$ns}-align-right">
|
106 | <button class="#{$ns}-button #{$ns}-minimal #{$ns}-icon-home">Home</button>
|
107 | <button class="#{$ns}-button #{$ns}-minimal #{$ns}-icon-document">Files</button>
|
108 | <span class="#{$ns}-navbar-divider"></span>
|
109 | <button class="#{$ns}-button #{$ns}-minimal #{$ns}-icon-user"></button>
|
110 | <button class="#{$ns}-button #{$ns}-minimal #{$ns}-icon-notifications"></button>
|
111 | <button class="#{$ns}-button #{$ns}-minimal #{$ns}-icon-cog"></button>
|
112 | </div>
|
113 | </div>
|
114 | </nav>
|
115 |
|
116 | Styleguide navbar-container
|
117 | */
|