CSS: Cleanup and simplification
Mainly to rely more on bootstrap styling
This commit is contained in:
@@ -453,12 +453,17 @@ $comments-width-max: 710px
|
||||
transition: background-color 150ms ease-in-out, color 150ms ease-in-out
|
||||
width: 100px
|
||||
|
||||
// The actual button for submitting the comment.
|
||||
button.comment-action-submit
|
||||
align-items: center
|
||||
background: transparent
|
||||
border: none
|
||||
border-top-left-radius: 0
|
||||
border-bottom-left-radius: 0
|
||||
color: $color-success
|
||||
cursor: pointer
|
||||
display: flex
|
||||
justify-content: center
|
||||
flex-direction: column
|
||||
height: 100%
|
||||
position: relative
|
||||
@@ -466,8 +471,12 @@ $comments-width-max: 710px
|
||||
white-space: nowrap
|
||||
width: 100%
|
||||
|
||||
&:hover
|
||||
background: rgba($color-success, .1)
|
||||
|
||||
&:focus
|
||||
background: lighten($color-success, 10%)
|
||||
color: $white
|
||||
|
||||
&.submitting
|
||||
color: $color-info
|
||||
|
||||
@@ -132,7 +132,7 @@ $btn-border-radius: $border-radius
|
||||
|
||||
$primary: $color-primary
|
||||
|
||||
$body-bg: $color-background
|
||||
$body-bg: $white
|
||||
$body-color: $color-text
|
||||
|
||||
$color-background-nav: #fff
|
||||
|
||||
@@ -5,9 +5,6 @@ body.organizations
|
||||
|
||||
li.result
|
||||
padding: 10px 20px
|
||||
li.create
|
||||
margin-left: auto
|
||||
|
||||
|
||||
.dashboard-secondary
|
||||
.box
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
$project-sidebar-background: lighten($color-background, 5%)
|
||||
$node-latest-thumbnail-size: 160px
|
||||
|
||||
body.open-projects,
|
||||
@@ -68,11 +67,6 @@ body.blog
|
||||
width: 100%
|
||||
|
||||
ul.project-tabs
|
||||
background-color: $color-background-nav
|
||||
margin: 0
|
||||
padding: 0
|
||||
list-style: none
|
||||
|
||||
position: fixed
|
||||
width: $project-sidebar-width
|
||||
top: $project_header-height
|
||||
@@ -85,16 +79,9 @@ body.blog
|
||||
width: 100%
|
||||
|
||||
li
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
width: $project-sidebar-width
|
||||
height: $project-sidebar-width
|
||||
position: relative
|
||||
color: white
|
||||
background-color: $color-background-nav
|
||||
border-left: 2px solid transparent
|
||||
transition: all 100ms ease-in-out
|
||||
|
||||
+media-xs
|
||||
border-bottom: 2px solid transparent
|
||||
@@ -109,77 +96,41 @@ body.blog
|
||||
border-top: thin solid transparent
|
||||
|
||||
&:hover
|
||||
background-color: $color-background-nav-light
|
||||
background-color: $primary
|
||||
cursor: pointer
|
||||
|
||||
+media-xs
|
||||
border-bottom: 2px solid $color-background-nav-light
|
||||
+media-sm
|
||||
border-bottom: 2px solid $color-background-nav-light
|
||||
+media-md
|
||||
border-left: 2px solid $color-background-nav-light
|
||||
+media-lg
|
||||
border-left: 2px solid $color-background-nav-light
|
||||
a
|
||||
color: $white
|
||||
|
||||
a
|
||||
width: $project-sidebar-width
|
||||
height: $project-sidebar-width
|
||||
display: flex
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: center
|
||||
color: $color-text-light-primary
|
||||
height: $project-sidebar-width
|
||||
width: $project-sidebar-width
|
||||
|
||||
i
|
||||
font-size: 1.1em
|
||||
|
||||
&.active
|
||||
background-color: $color-background-nav-light
|
||||
|
||||
// The tiny triangle
|
||||
&:after
|
||||
+media-xs
|
||||
border-top-color: $project-sidebar-background
|
||||
border-right-color: transparent
|
||||
left: 50%
|
||||
right: initial
|
||||
transform: translateX(-50%)
|
||||
top: 0
|
||||
|
||||
border: 7px solid transparent
|
||||
border-right-color: $project-sidebar-background
|
||||
content: ''
|
||||
display: block
|
||||
position: absolute
|
||||
right: 0
|
||||
top: 50%
|
||||
transform: translateY(-50%)
|
||||
background-color: $primary
|
||||
color: $white
|
||||
|
||||
a
|
||||
color: white
|
||||
color: $white
|
||||
|
||||
&.tabs-thumbnail
|
||||
height: $project-sidebar-width
|
||||
border-bottom: 2px solid $color-background-nav-light
|
||||
|
||||
img
|
||||
width: $project-sidebar-width
|
||||
height: $project-sidebar-width
|
||||
|
||||
&.image
|
||||
border-left: none
|
||||
width: $project-sidebar-width
|
||||
|
||||
#project-loading
|
||||
position: absolute
|
||||
width: $project-sidebar-width
|
||||
height: $project-sidebar-width
|
||||
display: flex
|
||||
align-items: center
|
||||
display: flex
|
||||
height: $project-sidebar-width
|
||||
justify-content: center
|
||||
i
|
||||
position: relative
|
||||
top: -1px
|
||||
font-size: 1em
|
||||
color: white
|
||||
width: $project-sidebar-width
|
||||
|
||||
|
||||
#search-container #project_sidebar ul.project-tabs li.tabs-thumbnail
|
||||
background-color: $color-background-nav-dark
|
||||
@@ -199,7 +150,6 @@ body.blog
|
||||
+media-xs
|
||||
width: initial
|
||||
|
||||
background-color: $project-sidebar-background
|
||||
display: block
|
||||
left: 0
|
||||
position: relative
|
||||
@@ -221,10 +171,6 @@ body.blog
|
||||
|
||||
#project_context-header
|
||||
align-items: center
|
||||
background-color: white
|
||||
background-color: $color-background-light
|
||||
border-bottom: thin solid lighten($color-text-dark-hint, 10%)
|
||||
box-shadow: none
|
||||
color: $color-text-dark-secondary
|
||||
display: flex
|
||||
height: $project_header-height
|
||||
@@ -232,42 +178,24 @@ body.blog
|
||||
position: fixed
|
||||
top: $project_header-height
|
||||
transition: box-shadow 250ms ease-in-out
|
||||
width: auto
|
||||
z-index: $z-index-base + 3
|
||||
|
||||
&.is-offset
|
||||
box-shadow: 0 0 25px rgba(black, .2)
|
||||
|
||||
#project_nav-header
|
||||
z-index: $z-index-base + 3
|
||||
left: 0
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
height: $project_header-height
|
||||
min-height: $project_header-height
|
||||
width: 100%
|
||||
background-color: $color-background-light
|
||||
border-bottom: thin solid $color-background-dark
|
||||
z-index: $z-index-base + 3
|
||||
|
||||
/* Name of the project */
|
||||
.project-title
|
||||
width: 100%
|
||||
max-width: 100%
|
||||
+text-overflow-ellipsis
|
||||
height: 100%
|
||||
transition: background-color 150ms ease-in-out
|
||||
|
||||
a
|
||||
display: block
|
||||
width: 100%
|
||||
color: $color-text-dark
|
||||
padding: 15px
|
||||
font-size: 1.1em
|
||||
+text-overflow-ellipsis
|
||||
|
||||
&:hover, &:active
|
||||
color: $color-primary
|
||||
text-decoration: none
|
||||
outline: none
|
||||
max-width: 100%
|
||||
width: 100%
|
||||
|
||||
span#status-bar
|
||||
position: absolute
|
||||
@@ -278,7 +206,6 @@ span#status-bar
|
||||
color: $color-text-dark
|
||||
opacity: 0
|
||||
z-index: 1
|
||||
background-color: $color-background-light
|
||||
font-weight: 400
|
||||
white-space: nowrap
|
||||
transition: all 250ms ease-in-out
|
||||
@@ -293,7 +220,7 @@ span#status-bar
|
||||
&.info
|
||||
color: $color-info
|
||||
&.error
|
||||
color: $color-danger
|
||||
color: $danger
|
||||
&.warning
|
||||
color: $color-warning
|
||||
&.success
|
||||
@@ -320,71 +247,29 @@ span#project-edit-title
|
||||
display: none
|
||||
|
||||
ul.project-edit-tools
|
||||
display: flex
|
||||
align-items: center
|
||||
height: 100%
|
||||
padding: 0
|
||||
margin:
|
||||
top: 0
|
||||
left: auto
|
||||
right: 5px
|
||||
bottom: 0
|
||||
color: $color-text-dark-hint
|
||||
|
||||
display: flex
|
||||
list-style-type: none
|
||||
font-size: .9em
|
||||
margin: 0 0 0 auto
|
||||
padding: 0
|
||||
|
||||
+media-xs
|
||||
width: 100%
|
||||
margin: 0 auto
|
||||
justify-content: space-around
|
||||
|
||||
/* Bottons at the end of a form, like Save Changes */
|
||||
&.bottom
|
||||
+clearfix
|
||||
padding: 20px 0 25px 0
|
||||
border-top: thin solid $color-text-dark-hint
|
||||
justify-content: flex-end
|
||||
width: 100%
|
||||
height: initial
|
||||
|
||||
li
|
||||
margin: 0
|
||||
padding: 0
|
||||
position: relative
|
||||
float: left
|
||||
user-select: none
|
||||
a, button
|
||||
padding: $dropdown-item-padding-y ($dropdown-item-padding-x / 2)
|
||||
|
||||
a
|
||||
min-width: 110px
|
||||
user-select: none
|
||||
|
||||
&:focus, &:active
|
||||
text-decoration: none
|
||||
outline: none
|
||||
i
|
||||
padding-right: 10px
|
||||
|
||||
&.button-save
|
||||
|
||||
&.disabled
|
||||
border-bottom: none
|
||||
|
||||
a
|
||||
color: white
|
||||
border-color: darken($color-success, 10%)
|
||||
|
||||
a
|
||||
border-color: $color-success
|
||||
background-color: $color-success
|
||||
color: white
|
||||
margin-right: 10px
|
||||
|
||||
&:hover
|
||||
background-color: lighten($color-success, 5%)
|
||||
|
||||
&.field-error
|
||||
a
|
||||
background-color: $color-danger
|
||||
border-color: $color-danger
|
||||
background-color: $danger
|
||||
border-color: $danger
|
||||
color: white
|
||||
|
||||
&.saving
|
||||
@@ -411,31 +296,6 @@ ul.project-edit-tools
|
||||
&.button-edit
|
||||
min-width: 80px
|
||||
|
||||
|
||||
&.button-dropdown
|
||||
min-width: 50px
|
||||
cursor: pointer
|
||||
i
|
||||
margin: auto
|
||||
padding: 0
|
||||
|
||||
&.button-add-icon
|
||||
margin-right: 5px
|
||||
|
||||
a.dropdown-toggle
|
||||
display: inline-block
|
||||
min-width: auto
|
||||
|
||||
&.open
|
||||
a.dropdown-toggle
|
||||
color: $color-text-light
|
||||
background-color: $color-primary
|
||||
border-color: darken($color-primary, 5%)
|
||||
|
||||
li.button-delete:hover
|
||||
a
|
||||
color: $color-danger
|
||||
|
||||
&.featured
|
||||
a
|
||||
color: $color-warning
|
||||
@@ -445,132 +305,44 @@ ul.project-edit-tools
|
||||
background-color: rgba($color-warning, .1)
|
||||
|
||||
&.disabled
|
||||
cursor: not-allowed
|
||||
border-bottom: thin solid $color-text-dark-hint
|
||||
+disabled-stripes
|
||||
|
||||
a
|
||||
pointer-events: none
|
||||
background: repeating-linear-gradient(-45deg, lighten($color-text-dark-hint, 15%), lighten($color-text-dark-hint, 15%) 10px, lighten($color-text-dark-hint, 5%) 10px, lighten($color-text-dark-hint, 5%) 20px)
|
||||
border-color: darken($color-text-dark-hint, 5%)
|
||||
opacity: .6
|
||||
color: $color-text-dark
|
||||
+disabled-stripes
|
||||
|
||||
&.button-dropdown.disabled
|
||||
border-bottom: none
|
||||
|
||||
a
|
||||
margin: 5px
|
||||
padding: 5px 15px
|
||||
color: $color-text-dark-primary
|
||||
border-radius: 3px
|
||||
border: thin solid $color-text-dark-primary
|
||||
text-align: center
|
||||
text-transform: uppercase
|
||||
transition: background-color 150ms ease-in-out
|
||||
background-color: $color-background-light
|
||||
|
||||
i
|
||||
margin-right: 5px
|
||||
|
||||
&:hover
|
||||
background-color: $color-background-active-dark
|
||||
border-color: darken($color-background-active-dark, 5%)
|
||||
color: $color-text-light
|
||||
text-decoration: none
|
||||
|
||||
&:focus, &:active
|
||||
text-decoration: none
|
||||
outline: none
|
||||
|
||||
|
||||
&#item_save,
|
||||
&#item_cancel
|
||||
i
|
||||
font-size: 1em
|
||||
|
||||
&#item_add,
|
||||
&#item_edit,
|
||||
&#item_move,
|
||||
&#item_featured
|
||||
&.dropdown
|
||||
li
|
||||
i
|
||||
margin-right: 10px
|
||||
padding: 0
|
||||
|
||||
&#item_delete
|
||||
li i
|
||||
margin-right: 0
|
||||
// &:not(:last-of-type)
|
||||
// border-right: thin solid darken($color-background, 50%)
|
||||
a
|
||||
color: $body-color
|
||||
display: block
|
||||
padding: $dropdown-item-padding-y $dropdown-item-padding-x
|
||||
padding-left: 15px
|
||||
user-select: none
|
||||
|
||||
/* ul.project-edit-tools */
|
||||
&:hover
|
||||
color: $primary
|
||||
text-decoration: none
|
||||
|
||||
/* Extra asset tools in dropdown */
|
||||
ul.dropdown-menu
|
||||
width: auto
|
||||
min-width: 180px
|
||||
padding: 0
|
||||
margin: 0
|
||||
top: 44px
|
||||
left: initial
|
||||
right: 10px
|
||||
bottom: initial
|
||||
border: thin solid $color-text-dark-hint
|
||||
border-bottom-left-radius: 3px
|
||||
border-bottom-right-radius: 3px
|
||||
border-top-left-radius: 0
|
||||
border-top-right-radius: 0
|
||||
background-color: white
|
||||
color: $color-text-dark-primary
|
||||
box-shadow: 1px 1px 25px rgba(black, .2)
|
||||
|
||||
li
|
||||
padding: 0
|
||||
clear: both
|
||||
display: flex
|
||||
align-items: center
|
||||
width: 100%
|
||||
|
||||
a
|
||||
margin: 0
|
||||
padding: 10px 15px
|
||||
width: 100%
|
||||
border: 0
|
||||
font-size: .9em
|
||||
width: 100%
|
||||
text-align: left
|
||||
|
||||
&:hover
|
||||
color: $color-primary
|
||||
background-color: transparent
|
||||
&:active, &:focus
|
||||
color: $color-primary
|
||||
background-color: transparent
|
||||
|
||||
i
|
||||
display: inline-block
|
||||
margin: 0 15px 0 0
|
||||
|
||||
&.icon-group:after
|
||||
content: '\e80d'
|
||||
&.icon-group_texture:after,
|
||||
&.icon-group_hdri:after
|
||||
content: '\e80b'
|
||||
font-size: 1.1em
|
||||
&.icon-asset:after
|
||||
content: '\e825'
|
||||
&.icon-page:after
|
||||
content: '\e824'
|
||||
&.icon-texture:after
|
||||
content: '\e80a'
|
||||
&.icon-hdri:after
|
||||
content: '\f019'
|
||||
/* Icons per asset type. */
|
||||
i
|
||||
&.icon-group:after
|
||||
content: '\e80d'
|
||||
&.icon-group_texture:after,
|
||||
&.icon-group_hdri:after
|
||||
content: '\e80b'
|
||||
font-size: 1.1em
|
||||
&.icon-asset:after
|
||||
content: '\e825'
|
||||
&.icon-page:after
|
||||
content: '\e824'
|
||||
&.icon-texture:after
|
||||
content: '\e80a'
|
||||
&.icon-hdri:after
|
||||
content: '\f019'
|
||||
|
||||
/* // Extra asset tools in dropdown */
|
||||
|
||||
&.open
|
||||
button
|
||||
box-shadow: none
|
||||
|
||||
/* // Edit Asset buttons */
|
||||
|
||||
#project-loading
|
||||
@@ -661,7 +433,6 @@ ul.project_nav-edit-list
|
||||
|
||||
#node-container
|
||||
flex: 1
|
||||
color: $color-text-dark
|
||||
background-color: white
|
||||
|
||||
/* For error messages (403) and other overlaid text*/
|
||||
@@ -684,8 +455,6 @@ ul.project_nav-edit-list
|
||||
/* Project context on the right of the navigation */
|
||||
/* Contains #project_context */
|
||||
#project_context-container
|
||||
background-color: $color-background-nav
|
||||
|
||||
iframe#server_error
|
||||
width: 100%
|
||||
min-height: 800px
|
||||
@@ -697,11 +466,10 @@ ul.project_nav-edit-list
|
||||
+media-xs
|
||||
margin-top: 0
|
||||
|
||||
background-color: $project-sidebar-background
|
||||
border-right: thin solid $color-background
|
||||
margin-top: $project_header-height
|
||||
overflow-y: auto
|
||||
padding: 0 0 5px 0// some padding on top/bottom of jstree
|
||||
margin-top: $project_header-height //so it's right below the project title.
|
||||
overflow-y: auto // show vertical scrollbars when needed.
|
||||
padding: 0 0 5px 0 // some padding on top/bottom of jstree.
|
||||
position: relative
|
||||
|
||||
&.edit
|
||||
@@ -820,7 +588,7 @@ $node-preview-max-height-lg: 700px
|
||||
margin-left: auto
|
||||
|
||||
&.pending
|
||||
color: $color-danger
|
||||
color: $danger
|
||||
|
||||
section.node-preview.texture
|
||||
overflow: hidden
|
||||
@@ -1069,13 +837,6 @@ section.node-preview-forbidden
|
||||
span
|
||||
display: block
|
||||
|
||||
a
|
||||
color: $color-text-light
|
||||
|
||||
&.btn
|
||||
border-color: white
|
||||
color: white
|
||||
|
||||
hr
|
||||
opacity: .5
|
||||
|
||||
@@ -1122,9 +883,6 @@ section.node-preview.group
|
||||
padding: 0
|
||||
margin: 0
|
||||
|
||||
&.project
|
||||
.node-details-title
|
||||
padding: 10px 20px 0 20px
|
||||
|
||||
.node-details-description
|
||||
+node-details-description
|
||||
@@ -1158,7 +916,7 @@ section.node-preview.group
|
||||
padding-left: 0
|
||||
|
||||
&.status-pending
|
||||
color: $color-danger
|
||||
color: $danger
|
||||
|
||||
&.public
|
||||
color: $color-success
|
||||
@@ -1348,7 +1106,7 @@ section.node-details-container
|
||||
opacity: 1
|
||||
|
||||
.error-node-type-not-found
|
||||
color: $color-danger
|
||||
color: $danger
|
||||
clear: both
|
||||
|
||||
a.learn-more
|
||||
@@ -2093,15 +1851,15 @@ section.node-children
|
||||
text-transform: capitalize
|
||||
|
||||
&.error
|
||||
color: $color-danger
|
||||
color: $danger
|
||||
background-color: $color-background-light
|
||||
padding: 10px 15px
|
||||
border: thin solid lighten($color-danger, 10%)
|
||||
border-top: 2px solid $color-danger
|
||||
border: thin solid lighten($danger, 10%)
|
||||
border-top: 2px solid $danger
|
||||
border-bottom-left-radius: 3px
|
||||
border-bottom-right-radius: 3px
|
||||
label
|
||||
color: $color-danger
|
||||
color: $danger
|
||||
font-weight: 500
|
||||
|
||||
&.file
|
||||
@@ -2168,7 +1926,7 @@ section.node-children
|
||||
outline: none
|
||||
|
||||
&.field-error
|
||||
border-color: $color-danger
|
||||
border-color: $danger
|
||||
|
||||
.md-preview-loading
|
||||
position: absolute
|
||||
@@ -2415,7 +2173,7 @@ section.node-children
|
||||
.cancel
|
||||
+button($color-warning, 3px)
|
||||
.delete
|
||||
+button($color-danger, 3px)
|
||||
+button($danger, 3px)
|
||||
.toggle
|
||||
margin: 0 20px
|
||||
|
||||
@@ -2426,7 +2184,7 @@ section.node-children
|
||||
&.cancel
|
||||
+button($color-warning, 3px)
|
||||
&.delete
|
||||
+button($color-danger, 3px)
|
||||
+button($danger, 3px)
|
||||
|
||||
&.create
|
||||
+button($color-success, 3px)
|
||||
|
||||
@@ -68,13 +68,6 @@
|
||||
background-color: lighten($provider-color-google, 7%)
|
||||
|
||||
#settings
|
||||
+media-xs
|
||||
flex-direction: column
|
||||
|
||||
align-items: stretch
|
||||
display: flex
|
||||
margin: 25px auto
|
||||
|
||||
#settings-sidebar
|
||||
+media-xs
|
||||
width: 100%
|
||||
|
||||
@@ -82,6 +82,15 @@
|
||||
text-shadow: none
|
||||
|
||||
|
||||
=disabled-stripes
|
||||
color: $color-text-dark
|
||||
cursor: not-allowed
|
||||
background: repeating-linear-gradient(-45deg, lighten($color-text-dark-hint, 15%), lighten($color-text-dark-hint, 15%) 10px, lighten($color-text-dark-hint, 5%) 10px, lighten($color-text-dark-hint, 5%) 20px)
|
||||
border-color: darken($color-text-dark-hint, 5%)
|
||||
pointer-events: none
|
||||
opacity: .6
|
||||
|
||||
|
||||
@mixin overlay($from-color, $from-percentage, $to-color, $to-percentage)
|
||||
position: absolute
|
||||
top: 0
|
||||
@@ -121,23 +130,17 @@
|
||||
transform: translate(-50%, -50%)
|
||||
|
||||
=input-generic
|
||||
padding: 5px 5px 5px 0
|
||||
// padding: 5px 5px 5px 0
|
||||
color: $color-text-dark
|
||||
box-shadow: none
|
||||
border: thin solid transparent
|
||||
border-radius: 0
|
||||
border-bottom-color: $color-background-dark
|
||||
background-color: transparent
|
||||
transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out
|
||||
|
||||
&:hover
|
||||
border-bottom-color: $color-background
|
||||
|
||||
&:focus
|
||||
outline: 0
|
||||
border: thin solid transparent
|
||||
border-bottom-color: $color-primary
|
||||
box-shadow: 0 1px 0 0 $color-primary
|
||||
border-color: $primary
|
||||
box-shadow: none
|
||||
|
||||
=label-generic
|
||||
color: $color-text-dark-primary
|
||||
|
||||
@@ -94,9 +94,6 @@
|
||||
+media-xs
|
||||
flex-direction: column
|
||||
padding-top: 0
|
||||
display: flex
|
||||
padding:
|
||||
bottom: 15px
|
||||
|
||||
video
|
||||
max-width: 100%
|
||||
@@ -278,14 +275,7 @@
|
||||
width: 100%
|
||||
|
||||
.blog_index-item
|
||||
+media-lg
|
||||
max-width: 780px
|
||||
+media-md
|
||||
max-width: 780px
|
||||
+media-sm
|
||||
max-width: 780px
|
||||
|
||||
margin: 15px auto
|
||||
max-width: 780px
|
||||
|
||||
&:hover
|
||||
.item-info a
|
||||
@@ -317,13 +307,6 @@
|
||||
+media-lg
|
||||
min-height: 250px
|
||||
|
||||
.item-title
|
||||
color: $color-text-dark
|
||||
display: block
|
||||
font-size: 1.8em
|
||||
|
||||
padding: 10px 25px 10px
|
||||
|
||||
ul.meta
|
||||
+list-meta
|
||||
font-size: .9em
|
||||
@@ -585,7 +568,7 @@
|
||||
margin: 0 auto
|
||||
padding: 15px 0
|
||||
margin: 0 auto
|
||||
border-bottom: thin solid $color-background
|
||||
border-bottom: thin solid $color-background-dark
|
||||
|
||||
&:last-child
|
||||
border-bottom: none
|
||||
@@ -616,7 +599,7 @@
|
||||
position: absolute
|
||||
top: 20px
|
||||
border-radius: 3px
|
||||
background-color: $color-background
|
||||
background-color: $color-background-dark
|
||||
overflow: hidden
|
||||
|
||||
img
|
||||
|
||||
@@ -22,12 +22,8 @@ body
|
||||
&.box
|
||||
+container-box
|
||||
|
||||
.container-page
|
||||
background-color: white
|
||||
|
||||
.page-content
|
||||
position: relative
|
||||
flex: 1
|
||||
background-color: $white
|
||||
|
||||
.container-box
|
||||
+container-box
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
// Global, we want all menus to look like this.
|
||||
.dropdown-menu
|
||||
box-shadow: $dropdown-box-shadow
|
||||
top: 95% // So there is less gap between the dropdown and the item.
|
||||
|
||||
> li
|
||||
> a
|
||||
|
||||
@@ -1,15 +1,24 @@
|
||||
/* FOOTER */
|
||||
#footer-container
|
||||
.footer-wrapper
|
||||
background-color: $color-background
|
||||
position: relative
|
||||
|
||||
.row
|
||||
+media-xs
|
||||
margin: 0
|
||||
&:after
|
||||
background-color: $color-background
|
||||
bottom: 0
|
||||
content: ''
|
||||
position: fixed
|
||||
left: 0
|
||||
right: 0
|
||||
top: 0
|
||||
pointer-events: none
|
||||
z-index: -1
|
||||
|
||||
/* Footer Navigation */
|
||||
footer
|
||||
font-size: .75em
|
||||
padding: 0 0 10px 0
|
||||
|
||||
a
|
||||
color: $color-text-dark-primary
|
||||
|
||||
@@ -58,7 +67,7 @@ footer
|
||||
transform: scale(1)
|
||||
|
||||
|
||||
#footer-navigation
|
||||
.footer-navigation
|
||||
font-size: .85em
|
||||
margin-bottom: 5px
|
||||
color: lighten($color-text, 30%)
|
||||
|
||||
@@ -24,23 +24,7 @@ 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
|
||||
|
||||
@@ -1,43 +1,8 @@
|
||||
// Navigation.
|
||||
.navbar-overlay
|
||||
+media-lg
|
||||
display: block
|
||||
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
|
||||
|
||||
&.is-active
|
||||
background-color: $color-background-nav
|
||||
text-shadow: none
|
||||
|
||||
.navbar-brand
|
||||
padding-left: 10px
|
||||
color: $color-text
|
||||
width: 120px // Blender Cloud logo width
|
||||
|
||||
&:hover
|
||||
color: $color-text-dark-primary
|
||||
|
||||
|
||||
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
|
||||
border: none
|
||||
display: flex
|
||||
color: $color-text-dark-secondary
|
||||
padding: 0
|
||||
z-index: $z-index-base + 5 /* Flowplayer seems to take up to 11, project container is 12 */
|
||||
|
||||
@@ -53,30 +18,26 @@ nav.sidebar
|
||||
|
||||
.navbar-item
|
||||
align-items: center
|
||||
color: $color-text
|
||||
display: flex
|
||||
user-select: none
|
||||
transition: color 150ms ease-in-out, box-shadow 100ms ease-in-out
|
||||
color: inherit
|
||||
|
||||
+media-sm
|
||||
padding-left: 10px
|
||||
padding-right: 10px
|
||||
|
||||
&:hover, &:focus
|
||||
color: $color-primary
|
||||
color: $primary
|
||||
background-color: transparent
|
||||
box-shadow: inset 0 -3px 0 $color-primary
|
||||
box-shadow: inset 0 -3px 0 $primary
|
||||
text-decoration: none
|
||||
|
||||
&:focus
|
||||
box-shadow: inset 0 -3px 0 $color-primary
|
||||
box-shadow: inset 0 -3px 0 $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%)
|
||||
color: $primary
|
||||
box-shadow: inset 0 -3px 0 $primary
|
||||
|
||||
.pi-angle-down
|
||||
position: relative
|
||||
@@ -86,11 +47,6 @@ nav.sidebar
|
||||
user-select: none
|
||||
position: relative
|
||||
|
||||
&.nav-item-sign-in
|
||||
i
|
||||
padding-right: 6px
|
||||
font-size: 1.1em
|
||||
|
||||
img.gravatar
|
||||
border-radius: 999em
|
||||
height: 32px
|
||||
@@ -130,11 +86,6 @@ nav.sidebar
|
||||
.dropdown
|
||||
min-width: 60px // navbar avatar size
|
||||
|
||||
// Removes angle-down icon from bootstrap,
|
||||
// since we use a nicer chevron.
|
||||
a:after
|
||||
display: none
|
||||
|
||||
span.fa-stack
|
||||
position: absolute
|
||||
top: 50%
|
||||
@@ -176,9 +127,51 @@ nav.sidebar
|
||||
font-size: .9em
|
||||
|
||||
|
||||
nav.sidebar
|
||||
ul li.nav-item-sign-in a.navbar-item
|
||||
font-size: .8em
|
||||
// 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 $primary
|
||||
|
||||
|
||||
.navbar-overlay
|
||||
+media-lg
|
||||
display: block
|
||||
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
|
||||
|
||||
&.is-active
|
||||
background-color: $color-background-nav
|
||||
text-shadow: none
|
||||
|
||||
.navbar-brand
|
||||
padding-left: 10px
|
||||
color: inherit
|
||||
width: 120px // Blender Cloud logo width
|
||||
|
||||
&:hover
|
||||
color: $primary
|
||||
|
||||
nav.navbar
|
||||
.navbar-collapse
|
||||
> ul > li > .navbar-item
|
||||
padding: $navbar-nav-link-padding-x
|
||||
height: $nav-link-height
|
||||
|
||||
|
||||
.navbar-backdrop-container
|
||||
@@ -206,20 +199,3 @@ nav.sidebar
|
||||
|
||||
.navbar+.page-content
|
||||
padding-top: $nav-link-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
|
||||
|
||||
@@ -35,30 +35,25 @@
|
||||
padding: 0
|
||||
margin: 0
|
||||
|
||||
|
||||
.search-icon
|
||||
position: absolute
|
||||
color: white
|
||||
top: 4px
|
||||
left: 10px
|
||||
cursor: pointer
|
||||
|
||||
&:after
|
||||
opacity: 0
|
||||
@extend .tooltip-inner
|
||||
|
||||
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
|
||||
font-style: normal
|
||||
left: -10px
|
||||
width: 150px
|
||||
position: absolute
|
||||
transition: top 150ms ease-in-out, opacity 150ms ease-in-out
|
||||
opacity: 0
|
||||
pointer-events: none
|
||||
position: absolute
|
||||
top: 30px
|
||||
transition: top 150ms ease-in-out, opacity 150ms ease-in-out
|
||||
width: 150px
|
||||
|
||||
&:hover
|
||||
&:after
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
/* jsTree overrides */
|
||||
|
||||
$tree-color-text: $color-text-dark-primary
|
||||
$tree-color-highlight: hsl(hue($color-background-active), 40%, 50%)
|
||||
$tree-color-highlight-background: hsl(hue($color-background-active), 40%, 50%)
|
||||
$tree-color-highlight-background-text: white
|
||||
$tree-color-highlight: $color-primary-accent
|
||||
$tree-color-highlight-background: $color-primary-accent
|
||||
$tree-color-highlight-background-text: $white
|
||||
|
||||
.jstree-default
|
||||
/* list item */
|
||||
@@ -104,8 +103,7 @@ $tree-color-highlight-background-text: white
|
||||
padding-left: 28px
|
||||
padding-right: 10px
|
||||
text-overflow: ellipsis
|
||||
transition: none
|
||||
transition: color 50ms ease-in-out, background-color 100ms ease-in-out
|
||||
transition: background-color 100ms ease-in-out
|
||||
white-space: nowrap
|
||||
width: 100%
|
||||
|
||||
|
||||
@@ -7,8 +7,7 @@ $color-theatre-background-dark: darken($color-theatre-background, 5%)
|
||||
|
||||
$theatre-width: 350px
|
||||
|
||||
body.theatre,
|
||||
body.theatre .container-page
|
||||
body.theatre
|
||||
background-color: $color-theatre-background
|
||||
nav.navbar
|
||||
+media-lg
|
||||
|
||||
Reference in New Issue
Block a user