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

Project sidebar: tweak to active item state

Browse Source
This commit is contained in:
Pablo Vazquez 2017-07-13 15:44:00 +02:00
parent c9af6fe44f
commit 8a8f654657
3 changed files with 29 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/styles/_config.sass
View File

@ -3,7 +3,7 @@ $color-background-light: lighten($color-background, 5%)
$color-background-dark: darken($color-background, 5%)
$color-background-nav: hsl(hue($color-background), 20%, 25%)
$color-background-nav-light: hsl(hue($color-background), 20%, 35%)
$color-background-nav-light: hsl(hue($color-background), 20%, 40%)
$color-background-nav-dark: hsl(hue($color-background), 20%, 15%)
$color-background-active: #dff5f6 // background colour for active items.

19
src/styles/_project.sass
View File

@ -116,14 +116,17 @@ $project-sidebar-background: lighten($color-background, 5%)
&.active
background-color: $color-background-nav-light
+media-xs
border-bottom: 2px solid $color-primary
+media-sm
border-bottom: 2px solid $color-primary
+media-md
border-left: 2px solid $color-primary
+media-lg
border-left: 2px solid $color-primary
&:after
content: ''
border: 7px solid $color-background
border-left-color: transparent
border-top-color: transparent
border-bottom-color: transparent
display: block
position: absolute
top: 50%
right: 0
transform: translateY(-50%)
a
color: white

34
src/styles/_search.sass
View File

@ -62,7 +62,7 @@ $search-hit-width_grid: 100px
.twitter-typeahead
.tt-hint
color: $color-text-light-hint
color: $color-text-dark-hint
.tt-menu
top: 47px !important
@ -109,8 +109,7 @@ $search-hit-width_grid: 100px
#search-sidebar
width: 20%
background-color: $color-background-nav
border-right: thick solid $color-background-nav-dark
background-color: $color-background-light
+media-lg
border-top-left-radius: 3px
@ -129,7 +128,7 @@ $search-hit-width_grid: 100px
transition: border 100ms ease-in-out
&::placeholder
color: $color-text-light-secondary
color: $color-text-dark-secondary
&:placeholder-shown
border-bottom-color: $color-primary
@ -147,7 +146,8 @@ $search-hit-width_grid: 100px
margin-bottom: 10px
border-radius: 3px
border: none
background-color: lighten($color-background-nav, 5%)
background-color: white
box-shadow: 1px 1px 0 rgba(black, .1)
a
text-decoration: none
@ -155,7 +155,7 @@ $search-hit-width_grid: 100px
.toggleRefine
display: block
padding-left: 7px
color: $color-text-light-primary
color: $color-text-dark
text-transform: capitalize
&:hover
@ -191,11 +191,11 @@ $search-hit-width_grid: 100px
left: -7px
font-size: .9em
.facet_count
color: $color-text-light-secondary
color: $color-text-dark-secondary
.panel-title, .panel-heading
color: $color-text-light-secondary
color: $color-text-dark-secondary
font:
size: 1em
weight: 500
@ -210,7 +210,7 @@ $search-hit-width_grid: 100px
font-family: 'pillar-font'
position: absolute
right: 0
color: $color-background-nav-dark
color: $color-text-dark-primary
.collapsed
.panel-title:after
@ -218,7 +218,7 @@ $search-hit-width_grid: 100px
.search-list-stats
color: lighten($color-background-nav, 30%)
color: $color-text-dark-hint
padding: 10px 15px 0 15px
text-align: center
font-size: .9em
@ -244,10 +244,10 @@ $search-hit-width_grid: 100px
a
font-weight: 500
padding: 5px 4px
color: $color-text-light-secondary
color: $color-text-dark-secondary
&:hover
color: $color-text-light-primary
color: $color-text-dark-primary
&.disabled
opacity: .6
@ -757,7 +757,6 @@ $search-hit-width_grid: 100px
.filter-list
width: 100%
color: $color-text-light-secondary
padding: 5px 0
margin-bottom: 10px
display: flex
@ -766,10 +765,8 @@ $search-hit-width_grid: 100px
ul
margin: 0 0 0 auto
align-self: flex-end
display: inline-block
width: auto
list-style: none
color: white
border-radius: 3px
overflow: hidden
padding: 0
@ -778,8 +775,11 @@ $search-hit-width_grid: 100px
display: inline-block
padding: 3px 10px
cursor: pointer
background-color: $color-background-nav-light
background-color: $color-background-dark
border: thin solid $color-text-dark-hint
&.active
background-color: $color-background-nav-dark
color: white
background-color: $color-primary
border-color: transparent