raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-02-27 01:43:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Hub node styling for different use cases of active / inactive / current / open / closed

Browse Source
This commit is contained in:
summerscope
2014-09-11 15:42:37 +10:00
parent af064a3fc7
commit 1eef483c44
1 changed files with 72 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
app/assets/stylesheets/darkswarm/hub_node.css.sass
View File

@@ -11,8 +11,10 @@
overflow-y: visible
//Generic text link style
a:hover, a:active, a:focus
color: $clr-brick-bright
a, a *
color: $clr-brick
&:hover, &:active, &:focus
color: $clr-brick-bright
//Hub and Producer icons
i.ofn-i_063-hub, i.ofn-i_064-hub-reversed, i.ofn-i_059-producer, i.ofn-i_060-producer-reversed
@@ -33,72 +35,90 @@
float: left
font-weight: 700
@media all and (max-width: 640px)
&.closed, &.open
//CLOSED row
&.closed
.active_table_row
border: 1px solid transparent
@media all and (max-width: 640px)
border-color: $clr-brick-light
&:hover, &:active, &:focus
border-color: $clr-brick-light-bright
//OPEN row
&.open
.active_table_row, .active_table_row:first-child, .active_table_row:last-child
border-color: $clr-brick-light-bright
&.open, &.closed
@media all and (max-width: 640px)
.active_table_row:first-child .skinny-head
background-color: $clr-brick-light
@include border-radius-mixed(0.5em, 0.5em, 0, 0)
margin-top: -1rem
margin-bottom: 1rem
padding-top: 1rem
padding-bottom: 1rem
&.inactive
&.closed, &.open
.active_table_row:first-child .skinny-head
background-color: white
&.current
&.closed, &.open
.active_table_row:first-child .skinny-head
background-color: $clr-brick-bright
&.current
&.inactive
&.closed, &.open
.active_table_row:first-child .skinny-head
background-color: #555
//Inactive row
&.inactive, &.inactive strong
color: $disabled-dark
&, & *
color: $disabled-dark
a i.ofn-i_040-hub
color: $disabled-dark
&.current
&.inactive
&.closed, &.open
.active_table_row:first-child
background-color: $disabled-dark
&, & *
color: white
&.closed
&:hover, &:active, &:focus
border: none
color: $disabled-dark
label
margin-top: 1rem
//Padding second row
&.open
.active_table_row:nth-child(2)
padding-bottom: 0.75rem
//Current selected row
//CURRENT hub (shows selected hub)
&.current
//overwrites active_table
&.closed, &.open
a, a *
color: $clr-brick
.active_table_row
border-color: $clr-brick
.active_table_row:first-child, .active_table_row:last-child
background-color: rgba(245, 230, 231, 0.95)
background-color: $clr-brick-light-trans
opacity: 1
&:hover, &:focus, &:active
opacity: 0.9
&.closed
a, a *
color: $clr-brick
&:hover, &:active, &:focus
color: $clr-brick-bright
&.open, &.closed
.active_table_row
border-color: $clr-brick
&.inactive
&.open, &.closed
.active_table_row
border-color: $disabled-dark
border-color: $clr-brick-bright
@media all and (max-width: 640px)
.active_table_row:first-child .skinny-head
background-color: rgba(255,255,255,0.85)
//INACTIVE - closed hub
&.inactive
&.closed, &.open
&, & *
color: $disabled-dark
&.closed
.active_table_row, .active_table_row:first-child, .active_table_row:last-child
&:hover, &:active, &:focus
border-color: $disabled-bright
&.open
.active_table_row, .active_table_row:first-child, .active_table_row:last-child
border-color: $disabled-bright
// & Current hub
&.closed, &.open
&.current
.active_table_row, .active_table_row:first-child, .active_table_row:last-child
a, a *
color: $med-grey
border-color: $disabled-dark
background-color: rgba(220,220,220,0.5)
&:hover, &:focus, &:active
border-color: $disabled-dark
// Small devices
@media all and (max-width: 640px)
.active_table_row:first-child .skinny-head
background-color: $disabled-bright
// Small devices
@media all and (max-width: 640px)
.active_table_row, .active_table_row:first-child, .active_table_row:last-child
border-color: $disabled-bright
background-color: transparent
&:hover, &:focus, &:active
border-color: $disabled-dark
.active_table_row:first-child .skinny-head
background-color: $disabled-light