SimenB/stylint

// .birth-control
//   // $TODO excessive specificity?
//   div.summary-viz
//     padding: 50px
//     text-align: center // $TODO uh, typo here

//     // $TODO excessive specificity?
//     span.filters
//       float: left


//     // $TODO excessive specificity?
//     span.chart
//       float: right
//       margin-left: 30px



//   // $TODO excessive specificity?
//   div.methods-without-rles
//     p
//       float: left



//   .sort-options
//     // $TODO use shorthands here?
//     padding-bottom: 10px
//     padding-top: 10px
//     text-align: center


//   .header
//     color: $color-purple
//     padding-bottom: 1.5ex
//     padding-top: 1.5ex

//     h2
//       font-size: 2.4em
//       line-height: .86
//       margin: 0


//     h3
//       font-size: 1.6em
//       font-weight: lighter
//       margin: 1ex 0 0
//       padding: 0


//     h4
//       font-size: 1.3em
//       font-weight: lighter
//       margin: 1ex 0 0
//       padding: 0



//   .filter-area
//     height: 155px // height of symptom-bar which will be taken out of flow
//     margin: 0 0 15px

//     .affix
//       .shadow-m
//       background $color-white
//       position: fixed
//       top: 52px // .iodine-bar[height]
//       z-index: 11
//       transition: box-shadow .2s ease-out,
//                   height .1s ease-in-out

//       @media(max-width: $screen-md)
//         width: 100%


//       @media (min-width: $screen-md) and (max-width: $screen-lg-min)
//         width: 968px


//       @media (min-width: $screen-lg) and (max-width: $screen-xl-min)
//         width: 1168px


//       @media (min-width: $screen-xl)
//         width: 1468px



//     .filters-bar
//       margin: 0
//       padding: .5em 0 .3em
//       z-index: 1

//       .filter-buttons
//         line-height: 40px
//         text-align: center

//         button
//           // $TODO .animated and pulse should be an extend
//           .animated
//           .loop(3)
//           .pulse
//           background: none
//           border: 1px dashed $color-green
//           color: $color-green
//           font-size: 1em
//           height: 40px
//           margin: 0 .25em !important

//           &.btn

//             &:focus,
//             &:hover
//               outline: 0 !important


//             &:hover
//               border: 1px solid $color-green

//               i
//                 color: $color-green
//                 text-shadow: none




//           &.active
//             // $TODO should be an extend
//             .button-green

//             i
//               color: $color-white


//             &:hover
//               i
//                 text-shadow: none
//                 color: $color-white




//           i
//             bottom: -2px
//             color: rgba(27,166,175,.2)
//             font-weight: 100
//             padding-right: .3em
//             position: relative


//           @media(max-width: $screen-lg)
//             font-size: .8em


//           @media(max-width: $screen-md)
//             font-size: .6em
//             padding: 6px






//   // $TODO too specific
//   div.birth-control-table
//     margin: 0 auto
//     width: 70%

//     // $TODO too specific / too nested
//     > div
//       > span
//         > section
//           // $TODO should be an extend
//           .make-row()

//           > div
//             .make-md-column(6)

//             &.dimension
//               .make-md-column(2)




//         .upper-section
//           border-style: solid
//           border-width: 1px 0 0 0

//           h3
//             color: $color-gray-xl
//             font-size: 2em
//             font-weight: lighter

//           h4
//             color: $color-gray-xxl
//             font-size: $font-small
//             margin-bottom: 0
//             margin-top: 1.5em



//         .lower-section

//           // $TODO too specific?
//           div.filters

//             // $TODO too specific?
//             ul.filters-list
//               font-size: $font-small
//               list-style-type: none

//               li
//                 // $TODO too specific?
//                 div.highlight
//                   background: $color-green-l
//                   border-radius: 2px
//                   color: $color-white
//                   padding: 2px 6px