mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-01-29 21:17:17 +00:00
141 lines
4.1 KiB
Sass
141 lines
4.1 KiB
Sass
@import branding
|
|
@import mixins
|
|
|
|
.hubs
|
|
.active_table .active_table_node
|
|
|
|
//Prevents ugly overflows on hub title
|
|
.columns.skinny-head
|
|
white-space: nowrap
|
|
overflow-x: hidden
|
|
overflow-y: visible
|
|
|
|
//Generic text link style
|
|
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
|
|
font-size: 2rem
|
|
display: inline-block
|
|
margin-right: 0.25rem
|
|
float: left
|
|
|
|
//Closed & Open column
|
|
.open_closed
|
|
i
|
|
font-size: 2rem
|
|
float: right
|
|
margin-left: 0.5rem
|
|
|
|
//Hub Name
|
|
span.hub-name-listing
|
|
font-weight: 700
|
|
|
|
//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
|
|
label
|
|
margin-top: 1rem
|
|
|
|
//Padding second row
|
|
&.open
|
|
.active_table_row:nth-child(2)
|
|
padding-bottom: 0.75rem
|
|
|
|
//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: $clr-brick-light-trans
|
|
opacity: 1
|
|
&:hover, &:focus, &:active
|
|
opacity: 0.9
|
|
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-med
|
|
a, a *
|
|
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
|
|
&, &:hover, &:active, &:focus
|
|
border-color: $disabled-bright
|
|
|
|
&.closed, &.open
|
|
|
|
// & Current hub
|
|
&.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-bright
|
|
opacity: 0.85
|
|
.active_table_row:first-child .skinny-head
|
|
background-color: $disabled-light
|
|
|
|
//Is Profile - profile node
|
|
&.inactive.is_profile
|
|
&.closed, &.open
|
|
.active_table_row
|
|
&:hover, &:active, &:focus
|
|
border-color: transparent
|
|
cursor: auto
|
|
@media all and (max-width: 640px)
|
|
border-color: transparent
|
|
|