Files
openfoodnetwork/app/assets/stylesheets/darkswarm/tabs.css.sass
summerscope 427f535026 Redesign big chunk of work:
> setting up pages for Shops, and shops signup, producers signup
> setting up routes for new pages
> changing fonts to Google Oswald & Roboto
> setting up homepage partials and removing partials no longer required
> changing menu links and labels
2015-04-30 18:20:17 +10:00

111 lines
2.4 KiB
Sass

@import typography
@import mixins
@import branding
// Foundation overrides
#tabs .tabs-content > .content p
max-width: 100% !important
.tabs-content > .content
padding-top: 0 !important
// Tabs styling
#tabs
background: url("/assets/gray_jean.png") top left repeat
@include box-shadow(inset 0 2px 3px 0 rgba(0,0,0,0.15))
display: block
color: $dark-grey
.header
text-align: center
text-transform: uppercase
color: $dark-grey
border-bottom: 1px solid $disabled-dark
margin-top: 0.75rem
margin-bottom: 0.75rem
padding-bottom: 0.25rem
font-size: 0.875rem
.panel
border-color: $clr-brick-bright
background-color: rgba(255, 255, 255, 0)
dl dd
text-align: center
@media all and (max-width: 640px)
text-align: left
a
@include headingFont
background: transparent
text-transform: uppercase
line-height: 1
font-size: 0.875em
text-shadow: 0 -1px 1px #ffffff
padding: 1em
border: none
&:hover, &:focus, &:active
color: $clr-brick-bright
&, &:hover
background: none
@media all and (max-width: 640px)
padding: 0.35em 0 0.65em 0
text-shadow: none
// inactive nav link
dl
dd
border-top: 4px solid transparent
a:after
padding-left: 8px
content: "\e633"
visibility: hidden
@include icon-font
@media all and (max-width: 640px)
content: "\e633"
dd:hover
a:after
visibility: visible
// active nav link
dl
dd.active
border-top: 4px solid $clr-brick
@media all and (max-width: 640px)
border-top: 4px solid transparent
background-color: $clr-brick
a
color: $clr-brick
@media all and (max-width: 640px)
color: white
a:after
content: "\e634"
visibility: visible
@include icon-font
@media all and (max-width: 640px)
content: "\e633"
// content revealed in accordion
.tabs-content
margin-bottom: 0
& > .content
background: none
border: none
img
margin: 0px 0px 0px 40px
p
max-width: 555px
@media all and (max-width: 768px)
height: auto !important
ul
list-style-type: none
padding-left: none
.panel
padding-bottom: 1.25em