navbar.sass 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443
  1. $navbar-background-color: $white !default
  2. $navbar-box-shadow-size: 0 2px 0 0 !default
  3. $navbar-box-shadow-color: $background !default
  4. $navbar-height: 3.25rem !default
  5. $navbar-padding-vertical: 1rem !default
  6. $navbar-padding-horizontal: 2rem !default
  7. $navbar-z: 30 !default
  8. $navbar-fixed-z: 30 !default
  9. $navbar-item-color: $grey-dark !default
  10. $navbar-item-hover-color: $link !default
  11. $navbar-item-hover-background-color: $white-bis !default
  12. $navbar-item-active-color: $black !default
  13. $navbar-item-active-background-color: transparent !default
  14. $navbar-item-img-max-height: 1.75rem !default
  15. $navbar-burger-color: $navbar-item-color !default
  16. $navbar-tab-hover-background-color: transparent !default
  17. $navbar-tab-hover-border-bottom-color: $link !default
  18. $navbar-tab-active-color: $link !default
  19. $navbar-tab-active-background-color: transparent !default
  20. $navbar-tab-active-border-bottom-color: $link !default
  21. $navbar-tab-active-border-bottom-style: solid !default
  22. $navbar-tab-active-border-bottom-width: 3px !default
  23. $navbar-dropdown-background-color: $white !default
  24. $navbar-dropdown-border-top: 2px solid $border !default
  25. $navbar-dropdown-offset: -4px !default
  26. $navbar-dropdown-arrow: $link !default
  27. $navbar-dropdown-radius: $radius-large !default
  28. $navbar-dropdown-z: 20 !default
  29. $navbar-dropdown-boxed-radius: $radius-large !default
  30. $navbar-dropdown-boxed-shadow: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
  31. $navbar-dropdown-item-hover-color: $black !default
  32. $navbar-dropdown-item-hover-background-color: $background !default
  33. $navbar-dropdown-item-active-color: $link !default
  34. $navbar-dropdown-item-active-background-color: $background !default
  35. $navbar-divider-background-color: $background !default
  36. $navbar-divider-height: 2px !default
  37. $navbar-bottom-box-shadow-size: 0 -2px 0 0 !default
  38. $navbar-breakpoint: $desktop !default
  39. =navbar-fixed
  40. left: 0
  41. position: fixed
  42. right: 0
  43. z-index: $navbar-fixed-z
  44. .navbar
  45. background-color: $navbar-background-color
  46. min-height: $navbar-height
  47. position: relative
  48. z-index: $navbar-z
  49. @each $name, $pair in $colors
  50. $color: nth($pair, 1)
  51. $color-invert: nth($pair, 2)
  52. &.is-#{$name}
  53. background-color: $color
  54. color: $color-invert
  55. .navbar-brand
  56. & > .navbar-item,
  57. .navbar-link
  58. color: $color-invert
  59. & > a.navbar-item,
  60. .navbar-link
  61. &:focus,
  62. &:hover,
  63. &.is-active
  64. background-color: darken($color, 5%)
  65. color: $color-invert
  66. .navbar-link
  67. &::after
  68. border-color: $color-invert
  69. .navbar-burger
  70. color: $color-invert
  71. +from($navbar-breakpoint)
  72. .navbar-start,
  73. .navbar-end
  74. & > .navbar-item,
  75. .navbar-link
  76. color: $color-invert
  77. & > a.navbar-item,
  78. .navbar-link
  79. &:focus,
  80. &:hover,
  81. &.is-active
  82. background-color: darken($color, 5%)
  83. color: $color-invert
  84. .navbar-link
  85. &::after
  86. border-color: $color-invert
  87. .navbar-item.has-dropdown:focus .navbar-link,
  88. .navbar-item.has-dropdown:hover .navbar-link,
  89. .navbar-item.has-dropdown.is-active .navbar-link
  90. background-color: darken($color, 5%)
  91. color: $color-invert
  92. .navbar-dropdown
  93. a.navbar-item
  94. &.is-active
  95. background-color: $color
  96. color: $color-invert
  97. & > .container
  98. align-items: stretch
  99. display: flex
  100. min-height: $navbar-height
  101. width: 100%
  102. &.has-shadow
  103. box-shadow: $navbar-box-shadow-size $navbar-box-shadow-color
  104. &.is-fixed-bottom,
  105. &.is-fixed-top
  106. +navbar-fixed
  107. &.is-fixed-bottom
  108. bottom: 0
  109. &.has-shadow
  110. box-shadow: $navbar-bottom-box-shadow-size $navbar-box-shadow-color
  111. &.is-fixed-top
  112. top: 0
  113. html,
  114. body
  115. &.has-navbar-fixed-top
  116. padding-top: $navbar-height
  117. &.has-navbar-fixed-bottom
  118. padding-bottom: $navbar-height
  119. .navbar-brand,
  120. .navbar-tabs
  121. align-items: stretch
  122. display: flex
  123. flex-shrink: 0
  124. min-height: $navbar-height
  125. .navbar-brand
  126. a.navbar-item
  127. &:focus,
  128. &:hover
  129. background-color: transparent
  130. .navbar-tabs
  131. +overflow-touch
  132. max-width: 100vw
  133. overflow-x: auto
  134. overflow-y: hidden
  135. .navbar-burger
  136. color: $navbar-burger-color
  137. +hamburger($navbar-height)
  138. margin-left: auto
  139. .navbar-menu
  140. display: none
  141. .navbar-item,
  142. .navbar-link
  143. color: $navbar-item-color
  144. display: block
  145. line-height: 1.5
  146. padding: 0.5rem 0.75rem
  147. position: relative
  148. .icon
  149. &:only-child
  150. margin-left: -0.25rem
  151. margin-right: -0.25rem
  152. a.navbar-item,
  153. .navbar-link
  154. cursor: pointer
  155. &:focus,
  156. &:focus-within,
  157. &:hover,
  158. &.is-active
  159. background-color: $navbar-item-hover-background-color
  160. color: $navbar-item-hover-color
  161. .navbar-item
  162. display: block
  163. flex-grow: 0
  164. flex-shrink: 0
  165. img
  166. max-height: $navbar-item-img-max-height
  167. &.has-dropdown
  168. padding: 0
  169. &.is-expanded
  170. flex-grow: 1
  171. flex-shrink: 1
  172. &.is-tab
  173. border-bottom: 1px solid transparent
  174. min-height: $navbar-height
  175. padding-bottom: calc(0.5rem - 1px)
  176. &:focus,
  177. &:hover
  178. background-color: $navbar-tab-hover-background-color
  179. border-bottom-color: $navbar-tab-hover-border-bottom-color
  180. &.is-active
  181. background-color: $navbar-tab-active-background-color
  182. border-bottom-color: $navbar-tab-active-border-bottom-color
  183. border-bottom-style: $navbar-tab-active-border-bottom-style
  184. border-bottom-width: $navbar-tab-active-border-bottom-width
  185. color: $navbar-tab-active-color
  186. padding-bottom: calc(0.5rem - #{$navbar-tab-active-border-bottom-width})
  187. .navbar-content
  188. flex-grow: 1
  189. flex-shrink: 1
  190. .navbar-link:not(.is-arrowless)
  191. padding-right: 2.5em
  192. &::after
  193. @extend %arrow
  194. border-color: $navbar-dropdown-arrow
  195. margin-top: -0.375em
  196. right: 1.125em
  197. .navbar-dropdown
  198. font-size: 0.875rem
  199. padding-bottom: 0.5rem
  200. padding-top: 0.5rem
  201. .navbar-item
  202. padding-left: 1.5rem
  203. padding-right: 1.5rem
  204. .navbar-divider
  205. background-color: $navbar-divider-background-color
  206. border: none
  207. display: none
  208. height: $navbar-divider-height
  209. margin: 0.5rem 0
  210. +until($navbar-breakpoint)
  211. .navbar > .container
  212. display: block
  213. .navbar-brand,
  214. .navbar-tabs
  215. .navbar-item
  216. align-items: center
  217. display: flex
  218. .navbar-link
  219. &::after
  220. display: none
  221. .navbar-menu
  222. background-color: $navbar-background-color
  223. box-shadow: 0 8px 16px rgba($black, 0.1)
  224. padding: 0.5rem 0
  225. &.is-active
  226. display: block
  227. // Fixed navbar
  228. .navbar
  229. &.is-fixed-bottom-touch,
  230. &.is-fixed-top-touch
  231. +navbar-fixed
  232. &.is-fixed-bottom-touch
  233. bottom: 0
  234. &.has-shadow
  235. box-shadow: 0 -2px 3px rgba($black, 0.1)
  236. &.is-fixed-top-touch
  237. top: 0
  238. &.is-fixed-top,
  239. &.is-fixed-top-touch
  240. .navbar-menu
  241. +overflow-touch
  242. max-height: calc(100vh - #{$navbar-height})
  243. overflow: auto
  244. html,
  245. body
  246. &.has-navbar-fixed-top-touch
  247. padding-top: $navbar-height
  248. &.has-navbar-fixed-bottom-touch
  249. padding-bottom: $navbar-height
  250. +from($navbar-breakpoint)
  251. .navbar,
  252. .navbar-menu,
  253. .navbar-start,
  254. .navbar-end
  255. align-items: stretch
  256. display: flex
  257. .navbar
  258. min-height: $navbar-height
  259. &.is-spaced
  260. padding: $navbar-padding-vertical $navbar-padding-horizontal
  261. .navbar-start,
  262. .navbar-end
  263. align-items: center
  264. a.navbar-item,
  265. .navbar-link
  266. border-radius: $radius
  267. &.is-transparent
  268. a.navbar-item,
  269. .navbar-link
  270. &:focus,
  271. &:hover,
  272. &.is-active
  273. background-color: transparent !important
  274. .navbar-item.has-dropdown
  275. &.is-active,
  276. &.is-hoverable:focus,
  277. &.is-hoverable:focus-within,
  278. &.is-hoverable:hover
  279. .navbar-link
  280. background-color: transparent !important
  281. .navbar-dropdown
  282. a.navbar-item
  283. &:focus,
  284. &:hover
  285. background-color: $navbar-dropdown-item-hover-background-color
  286. color: $navbar-dropdown-item-hover-color
  287. &.is-active
  288. background-color: $navbar-dropdown-item-active-background-color
  289. color: $navbar-dropdown-item-active-color
  290. .navbar-burger
  291. display: none
  292. .navbar-item,
  293. .navbar-link
  294. align-items: center
  295. display: flex
  296. .navbar-item
  297. display: flex
  298. &.has-dropdown
  299. align-items: stretch
  300. &.has-dropdown-up
  301. .navbar-link::after
  302. transform: rotate(135deg) translate(0.25em, -0.25em)
  303. .navbar-dropdown
  304. border-bottom: $navbar-dropdown-border-top
  305. border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
  306. border-top: none
  307. bottom: 100%
  308. box-shadow: 0 -8px 8px rgba($black, 0.1)
  309. top: auto
  310. &.is-active,
  311. &.is-hoverable:focus,
  312. &.is-hoverable:focus-within,
  313. &.is-hoverable:hover
  314. .navbar-dropdown
  315. display: block
  316. .navbar.is-spaced &,
  317. &.is-boxed
  318. opacity: 1
  319. pointer-events: auto
  320. transform: translateY(0)
  321. .navbar-menu
  322. flex-grow: 1
  323. flex-shrink: 0
  324. .navbar-start
  325. justify-content: flex-start
  326. margin-right: auto
  327. .navbar-end
  328. justify-content: flex-end
  329. margin-left: auto
  330. .navbar-dropdown
  331. background-color: $navbar-dropdown-background-color
  332. border-bottom-left-radius: $navbar-dropdown-radius
  333. border-bottom-right-radius: $navbar-dropdown-radius
  334. border-top: $navbar-dropdown-border-top
  335. box-shadow: 0 8px 8px rgba($black, 0.1)
  336. display: none
  337. font-size: 0.875rem
  338. left: 0
  339. min-width: 100%
  340. position: absolute
  341. top: 100%
  342. z-index: $navbar-dropdown-z
  343. .navbar-item
  344. padding: 0.375rem 1rem
  345. white-space: nowrap
  346. a.navbar-item
  347. padding-right: 3rem
  348. &:focus,
  349. &:hover
  350. background-color: $navbar-dropdown-item-hover-background-color
  351. color: $navbar-dropdown-item-hover-color
  352. &.is-active
  353. background-color: $navbar-dropdown-item-active-background-color
  354. color: $navbar-dropdown-item-active-color
  355. .navbar.is-spaced &,
  356. &.is-boxed
  357. border-radius: $navbar-dropdown-boxed-radius
  358. border-top: none
  359. box-shadow: $navbar-dropdown-boxed-shadow
  360. display: block
  361. opacity: 0
  362. pointer-events: none
  363. top: calc(100% + (#{$navbar-dropdown-offset}))
  364. transform: translateY(-5px)
  365. transition-duration: $speed
  366. transition-property: opacity, transform
  367. &.is-right
  368. left: auto
  369. right: 0
  370. .navbar-divider
  371. display: block
  372. .navbar > .container,
  373. .container > .navbar
  374. .navbar-brand
  375. margin-left: -.75rem
  376. .navbar-menu
  377. margin-right: -.75rem
  378. // Fixed navbar
  379. .navbar
  380. &.is-fixed-bottom-desktop,
  381. &.is-fixed-top-desktop
  382. +navbar-fixed
  383. &.is-fixed-bottom-desktop
  384. bottom: 0
  385. &.has-shadow
  386. box-shadow: 0 -2px 3px rgba($black, 0.1)
  387. &.is-fixed-top-desktop
  388. top: 0
  389. html,
  390. body
  391. &.has-navbar-fixed-top-desktop
  392. padding-top: $navbar-height
  393. &.has-navbar-fixed-bottom-desktop
  394. padding-bottom: $navbar-height
  395. &.has-spaced-navbar-fixed-top
  396. padding-top: $navbar-height + ($navbar-padding-vertical * 2)
  397. &.has-spaced-navbar-fixed-bottom
  398. padding-bottom: $navbar-height + ($navbar-padding-vertical * 2)
  399. // Hover/Active states
  400. a.navbar-item,
  401. .navbar-link
  402. &.is-active
  403. color: $navbar-item-active-color
  404. &.is-active:not(:focus):not(:hover)
  405. background-color: $navbar-item-active-background-color
  406. .navbar-item.has-dropdown
  407. &:focus,
  408. &:hover,
  409. &.is-active
  410. .navbar-link
  411. background-color: $navbar-item-hover-background-color
  412. // Combination
  413. .hero
  414. &.is-fullheight-with-navbar
  415. min-height: calc(100vh - #{$navbar-height})