app/static/sass/styles.sass
@import "../bower_components/bourbon/app/assets/stylesheets/bourbon"
@import "../bower_components/neat/app/assets/stylesheets/neat"
/* Variables */
$white: #FFFFFF
$black: #1C1D21
$red-primary: #F60A20
$red-secondary: #D9042B
$green-primary: #9AC836
$green-secondary: #8CB202
$blue-primary: #0C9BE5
$blue-secondary: #0A81BF
$blue-tertiary: #445878
$gray-primary: #ECECEC
$gray-secondary: #f7f7f7
$gray-tertiary: #31353D
$gray-quaternary: #777777
$max-width: 840px
$max-width-xs: 600px
$tablet: new-breakpoint(min-width 768px)
@mixin min-height()
margin-bottom: -102px
@include calc(min-height, "100% - 80px")
&:after
content: ''
display: block
height: 102px
html,
body
height: 100%
body
font-family: 'Hind Vadodara', sans-serif
color: $black
min-width: 320px
// Forms
#{$all-text-inputs}
background-color: white
width: 100%
padding: .375rem .75rem
font-size: 1rem
line-height: 1.5
color: #55595c
background-color: #fff
background-image: none
border: 1px solid #ccc
border-radius: .25rem
label
display: inline-block
margin-bottom: .5rem
.form-group
margin-bottom: 15px
.form-control
display: block
header
height: 80px
background-color: $gray-secondary
color: #445878
.btn
float: right
margin: 25px 0px
.logo
float: left
width: 150px
height: 60px
margin: 10px 0px
overflow: hidden
img
width: 100%
footer
text-align: center
margin-top: 40px
padding: 20px 0px
font-size: 14px
height: 62px
background-color: $gray-secondary
border-top: solid 1px $gray-primary
.container
max-width: $max-width
margin: auto
padding: 0px 20px
@include clearfix
article
img
max-width: 100%
.videoWrap
position: relative
padding-bottom: 56.25%
padding-top: 25px
height: 0
iframe
@include size(100%)
@include position(absolute, 0px null null 0px)
.container-xs
max-width: $max-width-xs
margin: auto
padding: 0px 20px
@include clearfix
.btn
padding: 10px 20px
color: $white
text-decoration: none
text-transform: uppercase
font-weight: 700
font-size: 12px
min-width: 80px
text-align: center
line-height: 9px
border: none
cursor: pointer
@include border-top-radius(50px)
@include border-bottom-radius(50px)
@include transition(all 0.3s ease-in-out)
&.blue
background-color: $blue-primary
&:hover
color: $white
background-color: $blue-secondary
&.green
background-color: $green-primary
&:hover
color: $white
background-color: $green-secondary
&.red
background-color: $red-primary
&:hover
color: $white
background-color: $red-secondary
&.gray
background-color: $gray-primary
color: $gray-tertiary
&:hover
color: $white
background-color: $gray-tertiary
&.disabled
opacity: .7
cursor: default
outline: none
a
color: $blue-primary
text-decoration: none
@include transition(all 0.3s ease-in-out)
&:hover
color: $blue-secondary
&.title
color: $black
&:hover
color: $gray-tertiary
.search-box-container
input
border: none
padding: 5px 25px
border: 1px solid #BDC3C7
@include calc(width, "100% - 121px")
@include appearance(none)
@include border-left-radius(50px)
&:focus
outline: none
button
padding: 13.5px 35px
border: none
background-color: $blue-primary
margin-left: -5px
color: $white
text-transform: uppercase
font-weight: 700
font-size: 12px
vertical-align: top
line-height: 9px
cursor: pointer
@include border-right-radius(50px)
&:hover
background-color: $blue-secondary
.search-box-container
text-align: center
padding: 60px 0px
background-color: $gray-secondary
border-bottom: solid 1px $gray-primary
form
max-width: 600px
margin: auto
label
display: none
input
padding: 13px 25px
button
padding: 21.5px 35px
.breadcrumbs
padding: 10px
border-bottom: solid 1px $gray-primary
font-size: 13px
color: $blue-tertiary
.view-all-btn
display: inline-block
margin-top: 5px
.info-container
padding: 40px 0px
.article-detail
@include min-height()
h1
margin: 0px
h6
text-align: center
font-size: 14px
margin-bottom: 0px
border-top: 1px solid $gray-primary
padding-top: 20px
.last-update
color: $blue-tertiary
padding-bottom: 10px
.vote-buttons
ul
list-style: none
padding: 0px
text-align: center
li
display: inline-block
margin-bottom: 20px
&:first-child
margin-right: 15px
.thank-you
text-align: center
.home
.categories-container
@include display(flex)
@include flex-wrap(wrap)
.category
width: 100%
padding: 60px 0px
border-bottom: 1px solid $gray-primary
@include media($tablet)
width: 40%
margin-right: 5%
margin-left: 5%
.home,
.category-detail,
.login,
.article-search
@include min-height()
h1, h2
margin: 0px 0px 10px
ul
list-style: none
padding: 0px
margin: 0px
li
margin-bottom: 5px
.login
.info-container
text-align: center
label
display: none
form
margin: auto
max-width: 400px
input
border: none
padding: 5px 25px
border: 1px solid #BDC3C7
@include calc(width, "100% - 121px")
@include appearance(none)
@include border-left-radius(50px)
&:focus
outline: none
.article-search
p
margin: 0px
.article-search-container
margin-bottom: 30px
padding-bottom: 30px
border-bottom: 1px solid $gray-primary
.no-articles
text-align: center
margin-top: 50px
width: 100%
p
color: $gray-quaternary
.feedback
max-width: 500px
margin-left: auto
margin-right: auto
// Messages.
.msg-container
color: white
text-align: center
padding: 15px 0
&.success
background-color: #9AC836
// Utilities.
.hide
display: none !important
.errorlist
li
color: $red-primary
.error
text-align: center
padding: 50px 0px
@include min-height()
img
width: 100%
max-width: 600px
margin-bottom: 20px