archive/pillar
0
0
Fork 0
Code Issues 42 Pull Requests Projects Releases Wiki Activity

CSS: Split into modules

Browse Source 
Don't place pure styling on top-level files (those that don't begin with underscore).
Instead, import them as individual files.
This commit is contained in:
Pablo Vazquez
2018-08-27 17:01:08 +02:00
parent 5238e2c26d
commit 3965061bde
19 changed files with 1135 additions and 1220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

364
src/styles/components/_navbar.sass Normal file
View File

@@ -0,0 +1,364 @@
/* 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