365 lines
6.1 KiB
Sass
365 lines
6.1 KiB
Sass
|
/* Navigation */
|
||
|
|
.navbar-overlay
|
||
|
|
bottom: 0
|
||
|
|
display: none
|
||
|
|
left: 0
|
||
|
|
height: 100%
|
||
|
|
position: absolute
|
||
|
|
right: 0
|
||
|
|
top: 0
|
||
|
|
transition: background-color 350ms ease-in-out
|
||
|
|
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.sidebar
|
||
|
|
align-items: center
|
||
|
|
background-color: $color-background-nav
|
||
|
|
border: none
|
||
|
|
display: flex
|
||
|
|
padding: 0
|
||
|
|
z-index: $z-index-base + 5 /* Flowplayer seems to take up to 11, project container is 12 */
|
||
|
|
|
||
|
|
nav
|
||
|
|
margin-left: auto
|
||
|
|
margin-right: 0
|
||
|
|
|
||
|
|
.navbar-nav
|
||
|
|
margin-right: 0
|
||
|
|
+media-xs
|
||
|
|
margin: 0
|
||
|
|
width: 100%
|
||
|
|
|
||
|
|
li
|
||
|
|
user-select: none
|
||
|
|
position: relative
|
||
|
|
|
||
|
|
a.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
|
||
|
|
padding-left: 10px
|
||
|
|
padding-right: 10px
|
||
|
|
|
||
|
|
&:hover, &:focus
|
||
|
|
color: $color-primary
|
||
|
|
background-color: transparent
|
||
|
|
box-shadow: inset 0 -3px 0 $color-primary
|
||
|
|
text-decoration: none
|
||
|
|
|
||
|
|
&:focus
|
||
|
|
box-shadow: inset 0 -3px 0 $color-primary
|
||
|
|
|
||
|
|
&.active
|
||
|
|
color: $color-primary
|
||
|
|
box-shadow: inset 0 -3px 0 lighten($color-secondary, 10%)
|
||
|
|
|
||
|
|
&:hover
|
||
|
|
box-shadow: inset 0 -3px 0 lighten($color-secondary, 20%)
|
||
|
|
|
||
|
|
.pi-angle-down
|
||
|
|
position: relative
|
||
|
|
left: 5px
|
||
|
|
|
||
|
|
&.nav-item-sign-in
|
||
|
|
i
|
||
|
|
padding-right: 6px
|
||
|
|
font-size: 1.1em
|
||
|
|
|
||
|
|
img.gravatar
|
||
|
|
border-radius: 999em
|
||
|
|
height: 32px
|
||
|
|
width: 32px
|
||
|
|
box-shadow: 1px 1px 0 rgba(black, .2)
|
||
|
|
position: relative
|
||
|
|
|
||
|
|
|
||
|
|
.special
|
||
|
|
width: 18px
|
||
|
|
height: 18px
|
||
|
|
border-radius: 999em
|
||
|
|
position: absolute
|
||
|
|
background-color: white
|
||
|
|
z-index: 2
|
||
|
|
display: inline-block
|
||
|
|
top: 10px
|
||
|
|
left: 38px
|
||
|
|
font-size: 1.2em
|
||
|
|
box-shadow: 1px 1px 1px rgba(black, .2)
|
||
|
|
|
||
|
|
&.subscriber
|
||
|
|
background-color: $color-success
|
||
|
|
color: white
|
||
|
|
font-size: .6em
|
||
|
|
|
||
|
|
&.demo
|
||
|
|
background-color: $color-info
|
||
|
|
color: white
|
||
|
|
font-size: .6em
|
||
|
|
|
||
|
|
&.none
|
||
|
|
color: $color-danger
|
||
|
|
|
||
|
|
i
|
||
|
|
+position-center-translate
|
||
|
|
|
||
|
|
.dropdown
|
||
|
|
position: relative
|
||
|
|
min-width: 60px
|
||
|
|
|
||
|
|
// Removes angle-down icon from bootstrap,
|
||
|
|
// since we use a nicer chevron.
|
||
|
|
a:after
|
||
|
|
display: none
|
||
|
|
|
||
|
|
span.fa-stack
|
||
|
|
position: absolute
|
||
|
|
top: 50%
|
||
|
|
left: 50%
|
||
|
|
transform: translate(-50%, -50%)
|
||
|
|
|
||
|
|
ul.dropdown-menu
|
||
|
|
padding: 0
|
||
|
|
|
||
|
|
li
|
||
|
|
a
|
||
|
|
padding: 5px 15px 5px 5px
|
||
|
|
|
||
|
|
&:hover
|
||
|
|
color: $color-primary
|
||
|
|
box-shadow: none
|
||
|
|
|
||
|
|
&.subitem
|
||
|
|
font-size: .8em
|
||
|
|
padding-top: 0
|
||
|
|
text-transform: initial
|
||
|
|
|
||
|
|
i
|
||
|
|
width: 35px
|
||
|
|
text-align: center
|
||
|
|
|
||
|
|
&.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
|
||
|
|
|
||
|
|
&.demo a
|
||
|
|
color: $color-info
|
||
|
|
|
||
|
|
span.info
|
||
|
|
display: block
|
||
|
|
|
||
|
|
span.renew
|
||
|
|
display: block
|
||
|
|
color: $color-text-dark-primary
|
||
|
|
font-size: .9em
|
||
|
|
|
||
|
|
|
||
|
|
nav.sidebar
|
||
|
|
ul li.nav-item-sign-in a.navbar-item
|
||
|
|
font-size: .8em
|
||
|
|
|
||
|
|
|
||
|
|
.navbar-backdrop-container
|
||
|
|
width: 100%
|
||
|
|
height: 100%
|
||
|
|
position: absolute
|
||
|
|
top: 0
|
||
|
|
left: 0
|
||
|
|
right: 0
|
||
|
|
bottom: 0
|
||
|
|
|
||
|
|
img
|
||
|
|
display: none
|
||
|
|
position: fixed
|
||
|
|
width: 100%
|
||
|
|
align-self: flex-start
|
||
|
|
+media-md
|
||
|
|
display: block
|
||
|
|
+media-lg
|
||
|
|
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
|
||
|
|
|
||
|
|
|
||
|
|
// Secondary navigation for
|
||
|
|
.nav-secondary
|
||
|
|
align-items: center
|
||
|
|
box-shadow: 0 2px 0 0 $color-background
|
||
|
|
|
||
|
|
.nav-link
|
||
|
|
color: $color-text
|
||
|
|
transition: box-shadow 150ms ease-in-out
|
||
|
|
|
||
|
|
&:hover,
|
||
|
|
&.active
|
||
|
|
box-shadow: 0 2px 0 0 $color-primary
|
||
|
|
|
||
|
|
.nav-title
|
||
|
|
font-weight: bold
|
||
|
|
padding-right: 20px
|