BookStack Code Mirror - bookstack/blob - resources/assets/sass/

1 /**

2 * Includes the main navigation header and the faded toolbar.

3 */

5 header {

6 display: block;

7 z-index: 2;

8 top: 0;

9 background-color: $primary-dark;

10 color: #fff;

11 .padded {

12 padding: $-m;

13 }

14 border-bottom: 1px solid #DDD;

15 //margin-bottom: $-l;

16 .links {

17 display: inline-block;

18 vertical-align: top;

19 margin-right: $-xl;

20 @include smaller-than($screen-md) {

21 margin-right: $-m;

22 }

23 }

24 .links a {

25 display: inline-block;

26 padding: $-l;

27 color: #FFF;

28 &:last-child {

29 padding-right: 0;

30 }

31 @include smaller-than($screen-md) {

32 padding: $-l $-s;

33 }

34 }

35 .avatar, .user-name {

36 display: inline-block;

37 }

38 .avatar {

39 //margin-top: (45px/2);

40 width: 30px;

41 height: 30px;

42 }

43 .user-name {

44 vertical-align: top;

45 padding-top: $-l;

46 display: inline-block;

47 cursor: pointer;

48 > * {

49 vertical-align: top;

50 }

51 > span, > i {

52 padding-left: $-xs;

53 display: inline-block;

54 }

55 > span {

56 padding-top: $-xxs;

57 }

58 > i {

59 padding-top: $-xs*1.2;

60 }

61 @include smaller-than($screen-md) {

62 padding-left: $-xs;

63 .name {

64 display: none;

65 }

66 i {

67 font-size: 2em;

68 padding-left: 0;

69 padding-top: 0;

70 }

71 }

72 }

73 @include smaller-than($screen-md) {

74 text-align: center;

75 .float.right {

76 float: none;

77 }

78 }

79 @include smaller-than($screen-sm) {

80 .links a {

81 padding: $-s;

82 }

83 form.search-box {

84 margin-top: 0;

85 }

86 .user-name {

87 padding-top: $-s;

88 }

89 }

90 }

92 form.search-box {

93 margin-top: $-l *0.9;

94 display: inline-block;

95 position: relative;

96 text-align: left;

97 input {

98 background-color: transparent;

99 border-radius: 24px;

100 border: 2px solid #EEE;

101 color: #EEE;

102 padding-left: $-m;

103 padding-right: $-l;

104 outline: 0;

105 }

106 button {

107 vertical-align: top;

108 margin-left: -$-l;

109 color: #FFF;

110 top: 6px;

111 right: 4px;

112 display: inline-block;

113 position: absolute;

114 &:hover {

115 color: #FFF;

116 }

117 }

118 }

119

120 .logo {

121 display: inline-block;

122 &:hover {

123 color: #FFF;

124 text-decoration: none;

125 }

126 }

127 .logo-text {

128 display: inline-block;

129 font-size: 1.8em;

130 color: #fff;

131 font-weight: 400;

132 padding: $-l $-l $-l 0;

133 vertical-align: top;

134 line-height: 1;

135 }

136 .logo-image {

137 margin: $-m $-s $-m 0;

138 vertical-align: top;

139 height: 43px;

140 }

141

142 .dropdown-container {

143 display: inline-block;

144 vertical-align: top;

145 position: relative;

146 }

147

148 .dropdown-container ul {

149 display: none;

150 position: absolute;

151 z-index: 999;

152 top: 0;

153 list-style: none;

154 right: 0;

155 margin: $-m 0;

156 background-color: #FFFFFF;

157 box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);

158 border-radius: 1px;

159 border: 1px solid #EEE;

160 min-width: 180px;

161 padding: $-xs 0;

162 color: #555;

163 text-align: left !important;

164 &.wide {

165 min-width: 220px;

166 }

167 .text-muted {

168 color: #999;

169 }

170 a {

171 display: block;

172 padding: $-xs $-m;

173 color: #555;

174 &:hover {

175 text-decoration: none;

176 background-color: #EEE;

177 }

178 i {

179 margin-right: $-m;

180 padding-right: 0;

181 display: inline;

182 width: 22px;

183 }

184 }

185 li.border-bottom {

186 border-bottom: 1px solid #DDD;

187 }

188 }

189

190 .breadcrumbs span.sep {

191 color: #aaa;

192 padding: 0 $-xs;

193 }

194

195 .faded {

196 a, button, span, span > div {

197 color: #666;

198 }

199 .text-button {

200 opacity: 0.5;

201 transition: all ease-in-out 120ms;

202 &:hover {

203 opacity: 1;

204 text-decoration: none;

205 }

206 }

207 }

208

209 .faded-small {

210 color: #000;

211 font-size: 0.9em;

212 background-color: $primary-faded;

213 }

214

215 .breadcrumbs .text-button, .action-buttons .text-button {

216 display: inline-block;

217 padding: $-s;

218 &:last-child {

219 padding-right: 0;

220 }

221 }

222 .action-buttons {

223 text-align: right;

224 &.text-left {

225 text-align: left;

226 .text-button {

227 padding-right: $-m;

228 padding-left: 0;

229 }

230 }

231 }

232

233 .setting-nav {

234 text-align: center;

235 a {

236 padding: $-m;

237 display: inline-block;

238 color: #666;

239 &.selected {

240 border-bottom: 2px solid $primary;

241 }

242 }

243 }