CSS: Split into modules
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:
parent
5238e2c26d
commit
3965061bde
1241
src/styles/base.sass
1241
src/styles/base.sass
File diff suppressed because it is too large
Load Diff
@ -2,10 +2,27 @@
|
||||
@import _config
|
||||
@import _utils
|
||||
|
||||
@import _apps_base
|
||||
@import _comments
|
||||
@import _error
|
||||
@import _search
|
||||
|
||||
@import components/base
|
||||
@import components/alerts
|
||||
@import components/navbar
|
||||
@import components/footer
|
||||
@import components/shortcode
|
||||
@import components/statusbar
|
||||
@import components/search
|
||||
@import components/flyout
|
||||
@import components/forms
|
||||
@import components/inputs
|
||||
@import components/buttons
|
||||
@import components/popover
|
||||
@import components/tooltip
|
||||
@import components/checkbox
|
||||
@import components/overlay
|
||||
|
||||
.container-fluid.blog
|
||||
padding: 0
|
||||
|
||||
|
||||
72
src/styles/components/_alerts.sass
Normal file
72
src/styles/components/_alerts.sass
Normal file
@ -0,0 +1,72 @@
|
||||
.alert
|
||||
margin-bottom: 0
|
||||
text-align: center
|
||||
padding: 10px 20px
|
||||
z-index: 16
|
||||
|
||||
// overriden by alert types
|
||||
color: $color-text-dark
|
||||
background-color: $color-background
|
||||
|
||||
&.alert-danger,
|
||||
&.alert-error
|
||||
background-color: lighten($color-danger, 35%)
|
||||
color: $color-danger
|
||||
.alert-icon, .close
|
||||
color: $color-danger
|
||||
|
||||
&.alert-warning
|
||||
background-color: lighten($color-warning, 20%)
|
||||
color: darken($color-warning, 20%)
|
||||
.alert-icon, .close
|
||||
color: darken($color-warning, 20%)
|
||||
|
||||
&.alert-success
|
||||
background-color: lighten($color-success, 45%)
|
||||
color: $color-success
|
||||
|
||||
.alert-icon, .close
|
||||
color: $color-success
|
||||
|
||||
&.alert-info
|
||||
background-color: lighten($color-info, 30%)
|
||||
color: darken($color-info, 10%)
|
||||
.alert-icon, .close
|
||||
color: darken($color-info, 10%)
|
||||
|
||||
button.close
|
||||
position: absolute
|
||||
right: 10px
|
||||
|
||||
i
|
||||
font-size: .8em
|
||||
|
||||
i.alert-icon
|
||||
&:before
|
||||
font-family: "pillar-font"
|
||||
padding-right: 10px
|
||||
|
||||
&.success:before
|
||||
content: '\e801'
|
||||
&.info:before
|
||||
content: "\e80c"
|
||||
&.warning:before
|
||||
content: "\e80b"
|
||||
&.danger:before,
|
||||
&.error:before
|
||||
content: "\e83d"
|
||||
|
||||
|
||||
/* When there's an alert, disable the fixed top */
|
||||
.alert+.navbar-fixed-top
|
||||
position: relative
|
||||
margin-bottom: 0
|
||||
|
||||
&+.container
|
||||
padding-top: 0
|
||||
|
||||
.alert+.navbar
|
||||
position: relative
|
||||
|
||||
.alert+.navbar+.page-content
|
||||
padding-top: 0
|
||||
32
src/styles/components/_base.sass
Normal file
32
src/styles/components/_base.sass
Normal file
@ -0,0 +1,32 @@
|
||||
body
|
||||
height: 100%
|
||||
|
||||
+media-sm
|
||||
width: 100%
|
||||
max-width: 100%
|
||||
min-width: auto
|
||||
|
||||
+media-xs
|
||||
width: 100%
|
||||
max-width: 100%
|
||||
min-width: auto
|
||||
|
||||
.container
|
||||
+media-xs
|
||||
max-width: 100%
|
||||
min-width: auto
|
||||
padding:
|
||||
left: 0
|
||||
right: 0
|
||||
|
||||
&.box
|
||||
+container-box
|
||||
|
||||
.container-page
|
||||
background-color: white
|
||||
|
||||
.page-content
|
||||
position: relative
|
||||
flex: 1
|
||||
.container-box
|
||||
+container-box
|
||||
14
src/styles/components/_buttons.sass
Normal file
14
src/styles/components/_buttons.sass
Normal file
@ -0,0 +1,14 @@
|
||||
.btn-outline
|
||||
background-color: transparent
|
||||
border-width: 1px
|
||||
transition: background-color .1s
|
||||
|
||||
&:focus, &:active
|
||||
box-shadow: none
|
||||
|
||||
.btn-empty
|
||||
background-color: transparent
|
||||
border-color: transparent
|
||||
|
||||
&:focus, &:active
|
||||
box-shadow: none
|
||||
23
src/styles/components/_card.sass
Normal file
23
src/styles/components/_card.sass
Normal file
@ -0,0 +1,23 @@
|
||||
.card-deck
|
||||
// Custom, as of bootstrap 4.1.3 there is no way to do this.
|
||||
&.card-3-columns
|
||||
.card
|
||||
min-width: 30%
|
||||
max-width: 30%
|
||||
|
||||
|
||||
.card-padless
|
||||
.card
|
||||
border: none
|
||||
|
||||
.card-body
|
||||
padding: 20px 0
|
||||
|
||||
.card-fade
|
||||
img
|
||||
opacity: .8
|
||||
transition: opacity ease-in-out 150ms
|
||||
|
||||
&:hover
|
||||
img
|
||||
opacity: 1
|
||||
8
src/styles/components/_checkbox.sass
Normal file
8
src/styles/components/_checkbox.sass
Normal file
@ -0,0 +1,8 @@
|
||||
.checkbox label label
|
||||
padding-left: 0
|
||||
|
||||
.checkbox label input[type=checkbox] + label
|
||||
transition: color 100ms ease-in-out
|
||||
|
||||
.checkbox label input[type=checkbox]:checked + label
|
||||
color: $color-success !important
|
||||
25
src/styles/components/_flyout.sass
Normal file
25
src/styles/components/_flyout.sass
Normal file
@ -0,0 +1,25 @@
|
||||
/* Flyouts (only used on notifications for now) */
|
||||
.flyout
|
||||
background-color: $color-background
|
||||
border-radius: 3px
|
||||
border: thin solid darken($color-background, 3%)
|
||||
box-shadow: 1px 2px 2px rgba(black, .2)
|
||||
display: block
|
||||
font-size: .9em
|
||||
|
||||
& .flyout-title
|
||||
cursor: default
|
||||
display: block
|
||||
float: left
|
||||
font-size: 1.1em
|
||||
font-weight: 600
|
||||
padding: 8px 10px 5px 10px
|
||||
|
||||
&.notifications
|
||||
max-height: 1000%
|
||||
overflow-x: hidden
|
||||
position: absolute
|
||||
right: 0
|
||||
top: 60px
|
||||
width: 420px
|
||||
z-index: 9999
|
||||
108
src/styles/components/_footer.sass
Normal file
108
src/styles/components/_footer.sass
Normal file
@ -0,0 +1,108 @@
|
||||
/* FOOTER */
|
||||
#footer-container
|
||||
position: relative
|
||||
|
||||
.row
|
||||
+media-xs
|
||||
margin: 0
|
||||
|
||||
/* Footer Navigation */
|
||||
footer
|
||||
font-size: .75em
|
||||
padding: 0 0 10px 0
|
||||
a
|
||||
color: $color-text-dark-primary
|
||||
|
||||
&:hover
|
||||
color: $color-primary
|
||||
|
||||
ul.links
|
||||
float: left
|
||||
padding: 0
|
||||
margin: 0
|
||||
list-style-type: none
|
||||
|
||||
li
|
||||
padding: 0 15px 0 0
|
||||
margin: 0
|
||||
float: left
|
||||
|
||||
#hop
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
visibility: hidden
|
||||
position: fixed
|
||||
right: 25px
|
||||
bottom: 25px
|
||||
z-index: 999
|
||||
cursor: pointer
|
||||
opacity: 0
|
||||
background: $color-background-light
|
||||
width: 32px
|
||||
height: 32px
|
||||
border-radius: 50%
|
||||
color: $color-text-dark-secondary
|
||||
font-size: 2em
|
||||
box-shadow: 0 0 15px rgba(black, .2)
|
||||
transform: scale(0.5)
|
||||
transition: all 150ms ease-in-out
|
||||
|
||||
&:hover
|
||||
transform: scale(1.2)
|
||||
background-color: $color-background-nav
|
||||
|
||||
&.active
|
||||
visibility: visible
|
||||
opacity: 1
|
||||
transform: scale(1)
|
||||
|
||||
|
||||
#footer-navigation
|
||||
font-size: .85em
|
||||
margin-bottom: 5px
|
||||
color: lighten($color-text, 30%)
|
||||
border-top: thick solid lighten($color-text, 60%)
|
||||
padding:
|
||||
top: 15px
|
||||
bottom: 15px
|
||||
|
||||
a
|
||||
color: lighten($color-text, 35%)
|
||||
|
||||
&:hover
|
||||
color: $color-primary
|
||||
|
||||
.footer-links
|
||||
i
|
||||
font-size: 80%
|
||||
position: absolute
|
||||
left: -14px
|
||||
top: 20%
|
||||
|
||||
.special
|
||||
padding:
|
||||
top: 10px
|
||||
bottom: 15px
|
||||
font-size: .9em
|
||||
border-left: thin solid darken($color-background, 20%)
|
||||
|
||||
|
||||
img
|
||||
max-width: 100%
|
||||
opacity: .6
|
||||
|
||||
ul.footer-social
|
||||
width: 100%
|
||||
text-align:center
|
||||
margin: 0 auto
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: space-around
|
||||
|
||||
li
|
||||
display: inline-block
|
||||
padding: 30px 0
|
||||
|
||||
i
|
||||
font-size: 3em
|
||||
132
src/styles/components/_forms.sass
Normal file
132
src/styles/components/_forms.sass
Normal file
@ -0,0 +1,132 @@
|
||||
/* File Upload forms */
|
||||
.fieldlist
|
||||
list-style: none
|
||||
padding: 0
|
||||
margin: 10px 0 0 0
|
||||
|
||||
li.fieldlist-item
|
||||
background-color: $color-background-light
|
||||
border: thin solid $color-background
|
||||
border-left: 3px solid $color-primary
|
||||
border-top-right-radius: 3px
|
||||
border-bottom-right-radius: 3px
|
||||
|
||||
margin-bottom: 10px
|
||||
padding: 10px
|
||||
+clearfix
|
||||
|
||||
.form-group
|
||||
margin-bottom: 0 !important // override bs
|
||||
width: 100%
|
||||
|
||||
input.form-control
|
||||
background-color: white !important
|
||||
padding: 0 10px !important
|
||||
border: thin solid $color-background-dark !important
|
||||
|
||||
div[class$="slug"]
|
||||
width: 50%
|
||||
float: left
|
||||
display: flex
|
||||
align-items: center
|
||||
|
||||
label
|
||||
margin-right: 10px
|
||||
|
||||
.fieldlist-action-button
|
||||
+button($color-success, 3px)
|
||||
margin: 0 0 0 10px
|
||||
padding: 5px 10px
|
||||
text-transform: initial
|
||||
|
||||
.form-upload-file
|
||||
margin-bottom: 10px
|
||||
display: flex
|
||||
flex-direction: column
|
||||
|
||||
.form-upload-progress
|
||||
margin-top: 10px
|
||||
|
||||
.form-upload-progress-bar
|
||||
margin-top: 5px
|
||||
background-color: $color-success
|
||||
height: 5px
|
||||
min-width: 0
|
||||
border-radius: 3px
|
||||
|
||||
&.progress-uploading
|
||||
background-color: hsl(hue($color-success), 80%, 65%) !important
|
||||
|
||||
&.progress-processing
|
||||
+stripes($color-success, lighten($color-success, 15%), -45deg, 25px)
|
||||
+stripes-animate
|
||||
animation-duration: 1s
|
||||
|
||||
&.progress-error
|
||||
background-color: $color-danger !important
|
||||
|
||||
.preview-thumbnail
|
||||
width: 50px
|
||||
height: 50px
|
||||
min-width: 50px
|
||||
min-height: 50px
|
||||
margin-right: 10px
|
||||
margin-top: 5px
|
||||
border-radius: 3px
|
||||
background-color: $color-background
|
||||
|
||||
.form-upload-file-meta-container
|
||||
display: flex
|
||||
|
||||
.form-upload-file-meta
|
||||
list-style: none
|
||||
padding: 0
|
||||
margin: 0
|
||||
width: 100%
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
flex: 1
|
||||
|
||||
li
|
||||
display: inline-block
|
||||
padding: 5px 10px
|
||||
|
||||
&:first-child
|
||||
padding-left: 0
|
||||
|
||||
&.dimensions, &.size
|
||||
color: $color-text-dark-secondary
|
||||
|
||||
&.delete
|
||||
margin-left: auto
|
||||
|
||||
&.name
|
||||
+text-overflow-ellipsis
|
||||
|
||||
.file_delete
|
||||
color: $color-danger
|
||||
|
||||
.form-upload-file-actions
|
||||
list-style: none
|
||||
padding: 0
|
||||
margin: 0
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
|
||||
li
|
||||
display: inline-block
|
||||
padding: 5px 10px
|
||||
|
||||
.file_delete
|
||||
color: $color-danger
|
||||
|
||||
.form-group
|
||||
&.error
|
||||
.form-control, input
|
||||
border-color: $color-danger !important
|
||||
|
||||
ul.error
|
||||
padding: 5px 0 0 0
|
||||
margin: 0
|
||||
color: $color-danger
|
||||
list-style-type: none
|
||||
54
src/styles/components/_inputs.sass
Normal file
54
src/styles/components/_inputs.sass
Normal file
@ -0,0 +1,54 @@
|
||||
/* Inputs */
|
||||
input, input.form-control,
|
||||
textarea, textarea.form-control,
|
||||
select, select.form-control
|
||||
+input-generic
|
||||
|
||||
label, label.control-label
|
||||
+label-generic
|
||||
|
||||
select, select.form-control
|
||||
border-top-left-radius: 3px
|
||||
border-top-right-radius: 3px
|
||||
background-color: $color-background-light
|
||||
|
||||
option
|
||||
background-color: white
|
||||
|
||||
input.fileupload
|
||||
background-color: transparent
|
||||
display: block
|
||||
margin-top: 10px
|
||||
|
||||
textarea
|
||||
resize: vertical
|
||||
|
||||
button, .btn
|
||||
+button($color-text-dark-secondary, $color-background, false)
|
||||
|
||||
&-success
|
||||
+button($color-success, $color-success, false)
|
||||
&-warning
|
||||
+button($color-warning, $color-warning, false)
|
||||
&-danger
|
||||
+button($color-danger, $color-danger, false)
|
||||
&-info
|
||||
+button($color-info, $color-info, false)
|
||||
|
||||
|
||||
&.disabled
|
||||
+button($color-background-dark, $color-background, false)
|
||||
background-color: $color-background-light !important
|
||||
border-color: $color-background-dark !important
|
||||
color: $color-text !important
|
||||
opacity: .5 !important
|
||||
pointer-events: none !important
|
||||
text-shadow: none !important
|
||||
user-select: none !important
|
||||
|
||||
.input-group-flex
|
||||
display: flex
|
||||
|
||||
.input-group-separator
|
||||
margin: 10px 0
|
||||
border-top: thin solid $color-background
|
||||
25
src/styles/components/_jumbotron.sass
Normal file
25
src/styles/components/_jumbotron.sass
Normal file
@ -0,0 +1,25 @@
|
||||
// Mainly overrides bootstrap jumbotron settings
|
||||
.jumbotron
|
||||
background-size: cover
|
||||
border-radius: 0
|
||||
padding-top: 12em
|
||||
padding-bottom: 12em
|
||||
|
||||
// Black-transparent gradient from left to right to better read the overlay text.
|
||||
&.jumbotron-overlay
|
||||
position: relative
|
||||
|
||||
&:after
|
||||
background-image: linear-gradient(45deg, rgba(black, .5) 25%, transparent 50%)
|
||||
bottom: 0
|
||||
content: ''
|
||||
left: 0
|
||||
position: absolute
|
||||
right: 0
|
||||
top: 0
|
||||
|
||||
*
|
||||
z-index: 1
|
||||
|
||||
h2, p
|
||||
text-shadow: 1px 1px rgba(black, .2), 1px 1px 25px rgba(black, .5)
|
||||
364
src/styles/components/_navbar.sass
Normal file
364
src/styles/components/_navbar.sass
Normal 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
|
||||
75
src/styles/components/_overlay.sass
Normal file
75
src/styles/components/_overlay.sass
Normal file
@ -0,0 +1,75 @@
|
||||
#page-overlay
|
||||
background-color: rgba(black, .8)
|
||||
position: fixed
|
||||
top: 0
|
||||
bottom: 0
|
||||
right: 0
|
||||
left: 0
|
||||
z-index: $z-index-base + 15
|
||||
visibility: hidden
|
||||
opacity: 0
|
||||
transition: opacity 150ms ease-in-out
|
||||
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
|
||||
img
|
||||
user-select: none
|
||||
display: block
|
||||
max-height: 96%
|
||||
max-width: 96%
|
||||
z-index: 0
|
||||
|
||||
box-shadow: 0 0 15px rgba(black, .2), 0 0 100px rgba(black, .5)
|
||||
p.caption
|
||||
position: absolute
|
||||
bottom: 1%
|
||||
|
||||
&.active
|
||||
visibility: visible
|
||||
opacity: 1
|
||||
|
||||
.no-preview
|
||||
user-select: none
|
||||
z-index: 0
|
||||
color: $color-text-light-secondary
|
||||
|
||||
.nav-prev, .nav-next
|
||||
display: block
|
||||
font:
|
||||
family: 'pillar-font'
|
||||
size: 2em
|
||||
height: 80%
|
||||
width: 50px
|
||||
cursor: pointer
|
||||
color: $color-text-light-secondary
|
||||
z-index: 1
|
||||
+position-center-translate
|
||||
|
||||
&:hover
|
||||
color: $color-text-light
|
||||
|
||||
&:before, &:after
|
||||
+position-center-translate
|
||||
|
||||
.nav-prev
|
||||
left: 50px
|
||||
&:before
|
||||
content: '\e839'
|
||||
|
||||
.nav-next
|
||||
left: initial
|
||||
right: 0
|
||||
&:before
|
||||
content: '\e83a'
|
||||
|
||||
|
||||
&.video
|
||||
.video-embed
|
||||
+position-center-translate
|
||||
position: fixed
|
||||
|
||||
iframe
|
||||
width: 853px
|
||||
height: 480px
|
||||
26
src/styles/components/_popover.sass
Normal file
26
src/styles/components/_popover.sass
Normal file
@ -0,0 +1,26 @@
|
||||
.popover
|
||||
background-color: lighten($color-background-nav, 5%)
|
||||
border-radius: 3px
|
||||
box-shadow: 1px 1px 2px rgba(black, .2)
|
||||
border: thin solid lighten($color-background-nav, 10%)
|
||||
|
||||
&.in
|
||||
opacity: 1
|
||||
|
||||
.popover-title
|
||||
background-color: lighten($color-background-nav, 10%)
|
||||
border-bottom: thin solid lighten($color-background-nav, 3%)
|
||||
color: $color-text-light-primary
|
||||
|
||||
.popover-content
|
||||
color: $color-text-light
|
||||
font-size: .9em
|
||||
|
||||
&.top .arrow:after
|
||||
border-top-color: lighten($color-background-nav, 5%)
|
||||
&.bottom .arrow:after
|
||||
border-bottom-color: lighten($color-background-nav, 5%)
|
||||
&.left .arrow:after
|
||||
border-left-color: lighten($color-background-nav, 5%)
|
||||
&.right .arrow:after
|
||||
border-right-color: lighten($color-background-nav, 5%)
|
||||
92
src/styles/components/_search.sass
Normal file
92
src/styles/components/_search.sass
Normal file
@ -0,0 +1,92 @@
|
||||
#search-overlay
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
right: 0
|
||||
bottom: 0
|
||||
width: 100%
|
||||
height: 100%
|
||||
pointer-events: none
|
||||
visibility: hidden
|
||||
opacity: 0
|
||||
z-index: $z-index-base + 4
|
||||
transition: opacity 150ms ease-in-out
|
||||
|
||||
&.active
|
||||
opacity: 1
|
||||
visibility: visible
|
||||
background-color: rgba($color-background-nav, .7)
|
||||
|
||||
.search-input
|
||||
+media-lg
|
||||
max-width: 350px
|
||||
+media-md
|
||||
max-width: 350px
|
||||
+media-sm
|
||||
max-width: 120px
|
||||
+media-xs
|
||||
display: block
|
||||
margin: 0 10px
|
||||
position: absolute
|
||||
z-index: $z-index-base
|
||||
right: 5px
|
||||
position: relative
|
||||
float: left
|
||||
padding: 0
|
||||
margin: 0
|
||||
|
||||
|
||||
.search-icon
|
||||
position: absolute
|
||||
color: white
|
||||
top: 4px
|
||||
left: 10px
|
||||
cursor: pointer
|
||||
|
||||
&:after
|
||||
opacity: 0
|
||||
content: 'Use advanced search...'
|
||||
font-style: normal
|
||||
background: darken($color-background-nav, 5%)
|
||||
color: $color-text-light-primary
|
||||
box-shadow: 1px 1px 3px rgba(black, .4)
|
||||
padding: 3px 10px
|
||||
font-size: .85em
|
||||
border-radius: 3px
|
||||
top: 30px
|
||||
left: -10px
|
||||
width: 150px
|
||||
position: absolute
|
||||
transition: top 150ms ease-in-out, opacity 150ms ease-in-out
|
||||
pointer-events: none
|
||||
|
||||
&:hover
|
||||
&:after
|
||||
opacity: 1
|
||||
top: 35px
|
||||
|
||||
|
||||
#cloud-search, .tt-hint
|
||||
+text-overflow-ellipsis
|
||||
border: thin solid $color-background
|
||||
border-radius: 3px
|
||||
font:
|
||||
size: 1em
|
||||
weight: 400
|
||||
margin: 0
|
||||
min-height: 32px
|
||||
outline: none
|
||||
padding: 0 20px 0 40px
|
||||
transition: border 100ms ease-in-out
|
||||
|
||||
&:focus
|
||||
box-shadow: none
|
||||
border: none
|
||||
|
||||
&::placeholder
|
||||
color: rgba($color-text, .5)
|
||||
transition: color 150ms ease-in-out
|
||||
|
||||
&:hover
|
||||
&::placeholder
|
||||
color: rgba($color-text, .6)
|
||||
6
src/styles/components/_shortcode.sass
Normal file
6
src/styles/components/_shortcode.sass
Normal file
@ -0,0 +1,6 @@
|
||||
p.shortcode.nocap
|
||||
padding: 0.6em 3em
|
||||
font-size: .8em
|
||||
color: $color-text-dark-primary
|
||||
background-color: $color-background-dark
|
||||
border-radius: 3px
|
||||
21
src/styles/components/_statusbar.sass
Normal file
21
src/styles/components/_statusbar.sass
Normal file
@ -0,0 +1,21 @@
|
||||
#status-bar
|
||||
opacity: 0
|
||||
transition: all 250ms ease-in-out
|
||||
|
||||
i
|
||||
margin-right: 5px
|
||||
|
||||
&.info
|
||||
color: $color-info
|
||||
&.error
|
||||
color: $color-danger
|
||||
&.warning
|
||||
color: $color-warning
|
||||
&.success
|
||||
color: $color-success
|
||||
&.default
|
||||
color: $color-text-light
|
||||
|
||||
&.active
|
||||
opacity: 1
|
||||
|
||||
20
src/styles/components/_tooltip.sass
Normal file
20
src/styles/components/_tooltip.sass
Normal file
@ -0,0 +1,20 @@
|
||||
.tooltip
|
||||
transition: opacity 50ms ease-in-out
|
||||
&.in
|
||||
opacity: 1
|
||||
|
||||
.tooltip-inner
|
||||
max-width: auto
|
||||
white-space: nowrap
|
||||
background-color: $color-background-nav-light
|
||||
color: $color-text-light-primary
|
||||
border-radius: 3px
|
||||
|
||||
&.top .tooltip-arrow
|
||||
border-top-color: $color-background-nav-light
|
||||
&.bottom .tooltip-arrow
|
||||
border-bottom-color: $color-background-nav-light
|
||||
&.left .tooltip-arrow
|
||||
border-left-color: $color-background-nav-light
|
||||
&.right .tooltip-arrow
|
||||
border-right-color: $color-background-nav-light
|
||||
Loading…
x
Reference in New Issue
Block a user