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-dark: darken($color-background, 5%)
$color-background-nav: hsl(hue($color-background), 20%, 25%) $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-nav-dark: hsl(hue($color-background), 20%, 15%)
$color-background-active: #dff5f6 // background colour for active items. $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 &.active
background-color: $color-background-nav-light background-color: $color-background-nav-light
+media-xs &:after
border-bottom: 2px solid $color-primary content: ''
+media-sm border: 7px solid $color-background
border-bottom: 2px solid $color-primary border-left-color: transparent
+media-md border-top-color: transparent
border-left: 2px solid $color-primary border-bottom-color: transparent
+media-lg display: block
border-left: 2px solid $color-primary position: absolute
top: 50%
right: 0
transform: translateY(-50%)
a a
color: white color: white

34
src/styles/_search.sass
View File

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