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

CSS: Cleanup and simplification

Browse Source 
Mainly to rely more on bootstrap styling
This commit is contained in:
Pablo Vazquez
2018-08-31 19:32:17 +02:00
parent b4acfb89fa
commit 9c2ded79dd
15 changed files with 177 additions and 476 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/styles/components/_base.sass
View File

@@ -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
src/styles/components/_dropdown.sass
View File

@@ -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

19
src/styles/components/_footer.sass
View File

@@ -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%)

16
src/styles/components/_inputs.sass
View File

@@ -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

128
src/styles/components/_navbar.sass
View File

@@ -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

21
src/styles/components/_search.sass
View File

@@ -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