Navbar cleanup
This commit is contained in:
parent
b569829343
commit
819300f954
@ -1,5 +1,7 @@
|
||||
/* Navigation */
|
||||
// Navigation.
|
||||
.navbar-overlay
|
||||
+media-lg
|
||||
display: block
|
||||
bottom: 0
|
||||
display: none
|
||||
left: 0
|
||||
@ -11,87 +13,26 @@
|
||||
width: 100%
|
||||
z-index: 0
|
||||
|
||||
&+.navbar-container
|
||||
.search-input
|
||||
+media-lg
|
||||
border: thin solid rgba(white, .2)
|
||||
|
||||
#cloud-search, .tt-hint
|
||||
&::placeholder
|
||||
color: rgba(white, .8)
|
||||
|
||||
border: thin solid transparent
|
||||
border-radius: 3px
|
||||
margin: 8px 0
|
||||
|
||||
&.is-active
|
||||
background-color: $color-background-nav
|
||||
text-shadow: none
|
||||
|
||||
&+.navbar-container
|
||||
.search-input
|
||||
+media-sm
|
||||
background-color: darken($color-background-nav, 6%)
|
||||
+media-md
|
||||
background-color: darken($color-background-nav, 6%)
|
||||
+media-lg
|
||||
border: thin solid transparent
|
||||
background-color: darken($color-background-nav, 6%)
|
||||
|
||||
#cloud-search, .tt-hint
|
||||
&::placeholder
|
||||
color: rgba(white, .5)
|
||||
|
||||
+media-lg
|
||||
display: block
|
||||
|
||||
|
||||
.navbar-container
|
||||
align-items: center
|
||||
display: flex
|
||||
width: 100%
|
||||
|
||||
.navbar-collapse
|
||||
+media-xs
|
||||
padding: 0
|
||||
width: 100%
|
||||
max-height: initial // overrides bs, we don't have many items
|
||||
|
||||
&.show-notifications
|
||||
display: block
|
||||
|
||||
li
|
||||
display: none
|
||||
&.nav-notifications
|
||||
display: block
|
||||
position: absolute
|
||||
top: 7px
|
||||
left: 0
|
||||
width: 100%
|
||||
z-index: $z-index-base
|
||||
|
||||
#notifications
|
||||
padding: 0 10px
|
||||
|
||||
|
||||
nav
|
||||
&.navbar
|
||||
border-radius: 0
|
||||
left: 0
|
||||
position: fixed
|
||||
right: 0
|
||||
top: 0
|
||||
|
||||
.navbar-brand
|
||||
padding-left: 10px
|
||||
color: $color-text
|
||||
|
||||
width: 120px // Blender Cloud logo width
|
||||
|
||||
&:hover
|
||||
color: $color-text-dark-primary
|
||||
|
||||
nav.navbar,
|
||||
|
||||
nav.navbar
|
||||
.navbar-collapse
|
||||
> ul > li > .navbar-item
|
||||
padding: $navbar-nav-link-padding-x
|
||||
height: $nav-link-height
|
||||
|
||||
.navbar,
|
||||
nav.sidebar
|
||||
align-items: center
|
||||
background-color: $color-background-nav
|
||||
@ -110,17 +51,11 @@ nav.sidebar
|
||||
margin: 0
|
||||
width: 100%
|
||||
|
||||
li
|
||||
user-select: none
|
||||
position: relative
|
||||
|
||||
a.navbar-item
|
||||
.navbar-item
|
||||
align-items: center
|
||||
color: $color-text
|
||||
display: flex
|
||||
user-select: none
|
||||
padding: $navbar-brand-padding-y
|
||||
height: 100%
|
||||
transition: color 150ms ease-in-out, box-shadow 100ms ease-in-out
|
||||
|
||||
+media-sm
|
||||
@ -147,6 +82,10 @@ nav.sidebar
|
||||
position: relative
|
||||
left: 5px
|
||||
|
||||
li
|
||||
user-select: none
|
||||
position: relative
|
||||
|
||||
&.nav-item-sign-in
|
||||
i
|
||||
padding-right: 6px
|
||||
@ -159,7 +98,6 @@ nav.sidebar
|
||||
box-shadow: 1px 1px 0 rgba(black, .2)
|
||||
position: relative
|
||||
|
||||
|
||||
.special
|
||||
width: 18px
|
||||
height: 18px
|
||||
@ -190,8 +128,7 @@ nav.sidebar
|
||||
+position-center-translate
|
||||
|
||||
.dropdown
|
||||
position: relative
|
||||
min-width: 60px
|
||||
min-width: 60px // navbar avatar size
|
||||
|
||||
// Removes angle-down icon from bootstrap,
|
||||
// since we use a nicer chevron.
|
||||
@ -205,41 +142,25 @@ nav.sidebar
|
||||
transform: translate(-50%, -50%)
|
||||
|
||||
ul.dropdown-menu
|
||||
padding: 0
|
||||
|
||||
li
|
||||
a
|
||||
padding: 5px 15px 5px 5px
|
||||
white-space: nowrap
|
||||
|
||||
&:hover
|
||||
color: $color-primary
|
||||
box-shadow: none
|
||||
box-shadow: none // removes underline
|
||||
|
||||
&.subitem
|
||||
&.subitem // e.g. "Not Sintel? Log out"
|
||||
font-size: .8em
|
||||
padding-top: 0
|
||||
text-transform: initial
|
||||
|
||||
i
|
||||
width: 35px
|
||||
text-align: center
|
||||
width: 30px
|
||||
|
||||
&.subscription-status
|
||||
padding:
|
||||
top: 10px
|
||||
bottom: 10px
|
||||
|
||||
transition: opacity 150ms ease-in-out
|
||||
opacity: 1
|
||||
|
||||
&:hover
|
||||
opacity: .8
|
||||
|
||||
a
|
||||
text-transform: initial
|
||||
|
||||
&.none a
|
||||
color: $color-danger
|
||||
|
||||
&.subscriber a
|
||||
color: $color-success
|
||||
|
||||
@ -280,71 +201,11 @@ nav.sidebar
|
||||
display: block
|
||||
|
||||
|
||||
.navbar-backdrop
|
||||
z-index: 0
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
right: 0
|
||||
bottom: 0
|
||||
|
||||
width: 100%
|
||||
height: 100%
|
||||
background:
|
||||
size: 100%
|
||||
position: 0 0
|
||||
repeat: no-repeat
|
||||
color: transparent
|
||||
image: url(https://cloud.blender.org/static/assets/img/backgrounds/pattern_02_blur.jpg)
|
||||
|
||||
filter: none
|
||||
|
||||
&.project
|
||||
display: none
|
||||
+media-lg
|
||||
display: block
|
||||
left: -10px
|
||||
width: 105%
|
||||
&.blog
|
||||
display: none
|
||||
+media-lg
|
||||
display: block
|
||||
left: -10px
|
||||
width: 105%
|
||||
+media-md
|
||||
display: block
|
||||
left: -10px
|
||||
width: 105%
|
||||
|
||||
|
||||
.navbar-backdrop-overlay
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
width: 100%
|
||||
height: $navbar-backdrop-height
|
||||
background: linear-gradient(to bottom, rgba($color-background, 0) 25%, rgba($color-background,0.5) 50%, rgba($color-background,1) 100%)
|
||||
|
||||
|
||||
/* Global, we want all menus to look like this */
|
||||
ul.dropdown-menu
|
||||
background-color: $color-background-light
|
||||
border: none
|
||||
box-shadow: 0 10px 25px rgba(black, .1)
|
||||
user-select: none
|
||||
|
||||
.divider
|
||||
background-color: rgba(black, .1)
|
||||
|
||||
nav .dropdown:hover ul.dropdown-menu
|
||||
display: block
|
||||
|
||||
.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu
|
||||
margin-top: 0
|
||||
|
||||
.navbar+.page-content
|
||||
padding-top: $navbar-height
|
||||
|
||||
padding-top: $nav-link-height
|
||||
|
||||
// Secondary navigation for
|
||||
.nav-secondary
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user