Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on May 7th, 2012  |  syntax: None  |  size: 18.01 KB  |  hits: 17  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. @import "base"
  2.  
  3. body
  4.   +base-font-family
  5.   background: fixed #151515 url(/assets/bg-map-dotted.png) no-repeat 50% 0
  6.   font-size: $base-font-size
  7.  
  8. // Base classes to extend
  9. .dark
  10.   color: #8a8a8a
  11.   a
  12.     color: #8a8a8a
  13.     &:hover
  14.       color: lighten(#8a8a8a,10)
  15.  
  16. =layout-nav-hover($color:$pure-blue,$opacity:1.0)
  17.   +border-top-radius(6px)
  18.   background: rgba($color,$opacity)
  19.   color: #fff
  20.  
  21. // -----------------------------------------------------------------
  22. // Layout header
  23. // -----------------------------------------------------------------
  24. // The Layout's header styles
  25. .top-bar
  26.   +helvetica-font-stack
  27.   @extend .white-translucent
  28.   border-bottom: 1px solid $white-translucent
  29.   .contrained
  30.     $line-height: 50px
  31.     @extend .grid-container
  32.     position: relative
  33.     p
  34.       @extend .grid-full
  35.       color: $grey
  36.       font-size: 13px
  37.       font-weight: 100
  38.       line-height: $line-height
  39.       margin-bottom: 0
  40.     .sessions-nav
  41.       position: absolute
  42.       top: 0
  43.       right: 0
  44.       ul
  45.         li
  46.           position: relative
  47.           color: $grey
  48.           display: inline-block
  49.           line-height: $line-height
  50.           margin-right: 8px
  51.           &:first-of-type
  52.             padding-right: 22px
  53.             &:after
  54.               content: "or"
  55.               font-size: 13px
  56.               position: absolute
  57.               right: 0
  58.           &:last-of-type
  59.             margin-right: 0
  60.           a
  61.             +button($border-size: 1px, $color: #000, $color-1: #ffdd25, $color-2: #ffad04, $font-size: 12px, $padding: 3px 8px)
  62.  
  63. #header-main
  64.   @extend .grid-container
  65.   +helvetica-font-stack
  66.   padding: 30px 0
  67.   .logo
  68.     @extend .grid-prefix-1
  69.     @extend .grid-2
  70.     @extend .grid-suffix-1
  71.     img
  72.       margin: 0 auto
  73.       width: 135px
  74.   .tagline
  75.     @extend .grid-7
  76.     @extend .grid-suffix-1
  77.     color: #fff
  78.     h1
  79.       font-size: 30px
  80.       font-weight: 400
  81.       line-height: 1
  82.       margin-bottom: 20px
  83.       sup
  84.         font-weight: normal
  85.         font-size: 12px
  86.         position: relative
  87.         top: -14px
  88.         left: 1px
  89.     h2
  90.       font-size: 18px
  91.       font-weight: 100
  92.       line-height: 1.5
  93.  
  94. body > header
  95.   @extend .grid-container
  96.   +background-image(linear-gradient(rgba(#000101,.0), rgba(#000101,.5) 70%))
  97.   +box-shadow(rgba(#000,.5) 0 0 10px)
  98.   border-bottom: 5px solid $pure-blue
  99.   & > section:first-of-type
  100.     @extend .grid-2
  101.     img
  102.       display: block
  103.       margin: 10px auto
  104.       width: 70px
  105.  
  106.   // Main nav
  107.   & > nav
  108.     @extend .grid-7
  109.     position: relative
  110.     @extend .PFCentroSerifPro-Regular
  111.     font-size: 16px
  112.     line-height: 36px
  113.     height: 92px
  114.     ul
  115.       position: absolute
  116.       bottom: 0
  117.       left: 0
  118.       +legacy-pie-clearfix
  119.       li, a
  120.         +float-left
  121.       a
  122.         color: $pure-blue
  123.         display: block
  124.         padding: 0 10px
  125.         text-decoration: none
  126.         &:hover
  127.           +layout-nav-hover(#fff,.1)
  128.       li.highlighted a
  129.         +layout-nav-hover
  130.  
  131.   // User profile
  132.   & > section:last-of-type
  133.     $user-avatar-width: 50px
  134.     @extend .grid-3
  135.     +pie-clearfix
  136.     padding-top: 10px
  137.     padding-bottom: 10px
  138.     .user-avatar
  139.       +box-sizing(border-box)
  140.       background: #fff
  141.       +float-left
  142.       padding: 2px
  143.       width: $user-avatar-width
  144.     .user-profile-details
  145.       color: #8a8a8a
  146.       padding-left: $user-avatar-width + 10px
  147.       .user-full-name, .user-impact
  148.         @extend .PFCentroSerifPro-Regular
  149.       .user-full-name
  150.         color: #8a8a8a
  151.         margin-bottom: 8px
  152.       .user-impact
  153.         color: $pure-yellow
  154.         font-size: 16px
  155.         margin-bottom: 10px
  156.         .user-impact-count
  157.           color: #fff
  158.       ul
  159.         font-size: 11px
  160.         li
  161.           position: relative
  162.           display: inline-block
  163.           padding-right: 10px
  164.           &:after
  165.             position: absolute
  166.             right: 2px
  167.             content: "\2219"
  168.           &:last-of-type
  169.             padding-right: 0
  170.             &:after
  171.               content: ""
  172.         a
  173.           +link-styles($color:$grey)
  174.  
  175. // -----------------------------------------------------------------
  176. // Layout footer
  177. // -----------------------------------------------------------------
  178. // Usage: The layout's footer styles
  179. body > footer
  180.   @extend .white-translucent
  181.   border-top: 1px solid $white-translucent
  182.   color: $grey
  183.   margin-top: 30px
  184.   padding: 20px 0
  185.   a
  186.     color: $pure-blue
  187.     &.signup
  188.       color: $pure-yellow
  189.   .cite, .cya-links, .contact-links
  190.     font-size: 11px
  191.   ul.social-links, ul.social-links li
  192.     display: inline-block
  193.     height: 20px
  194.   .social-links
  195.     li
  196.       margin-right: 10px
  197.     a
  198.       +sprite-background("/images/social-20.png", 20px, 20px)
  199.       display: inline-block
  200.       text-indent: -99999px
  201.       width: 20px
  202.       &.facebook
  203.         +sprite-row(1, 20px)
  204.       &.twitter
  205.         +sprite-row(2, 20px)
  206.       &.vimeo
  207.         +sprite-row(3, 20px)
  208.       &.rss
  209.         +sprite-row(4, 20px)
  210.   .cya-links, .contact-links
  211.     +delimited-list(" |")
  212.     color: $grey
  213.     a
  214.       color: inherit
  215.   .cite, ul.cya-links, ul.contact-links
  216.     display: block
  217.     margin-top: 10px
  218.   .link-lists
  219.     header
  220.       @extend .PFCentroSerifPro-Regular
  221.       color: $light-grey
  222.       font-size: 18px
  223.       margin-bottom: 8px
  224.     ul li
  225.       font-size: 13px
  226.       line-height: 1.5
  227.     a:before
  228.       content: "+ "
  229.     ul.columned
  230.       +pie-clearfix
  231.       li
  232.         +box-sizing(border-box)
  233.         +float-left
  234.         white-space: nowrap
  235.         width: 50%
  236.  
  237. // -----------------------------------------------------------------
  238. // Main container, role set to "main"
  239. // -----------------------------------------------------------------
  240. // Usage: Wraps the main content area of the site.
  241. [role="main"]
  242.   @extend .grid-container
  243.  
  244. // Homepage and page styles
  245. .core-message
  246.   @extend .white-translucent
  247.   @extend .three-cols
  248.   & > section
  249.     p:first-of-type
  250.       font-weight: bold
  251.  
  252. .extended-message
  253.   @extend .grid-container
  254.   @extend .content
  255.  
  256. .marketing-users, .marketing-field-partners, .marketing-affiliates
  257.   @extend .two-cols-left-padding
  258.   @extend .white-translucent
  259.  
  260. .featured-projects
  261.   @extend .grid-container
  262.   margin-top: 20px
  263.   & > header
  264.     @extend .grid-full
  265.   h3
  266.     +heading($font-size:22px)
  267.     padding-bottom: 12px
  268.  
  269. // -----------------------------------------------------------------
  270. // Typography test
  271. // -----------------------------------------------------------------
  272. // Usage: This is a simple typography test mixin
  273. .typography-test
  274.   +typography-test
  275.   padding: 50px 0
  276.  
  277. // -----------------------------------------------------------------
  278. // Project Page
  279. // -----------------------------------------------------------------
  280. // Usage: Project Page styles
  281. section.projects
  282.   color: #fff
  283.   padding-top: 75px
  284.   margin-bottom: 30px
  285.   > header
  286.     +box-sizing(border-box)
  287.     @extend .grid-container
  288.     position: relative
  289.     padding: 20px 0
  290.     h1, h2
  291.       @extend .PFCentroSerifPro-Regular
  292.       display: inline-block
  293.     h1
  294.       color: $pure-yellow
  295.       font-size: 32px
  296.       margin-right: 15px
  297.       margin-left: 10px
  298.     h2
  299.       color: $light-grey
  300.       font-size: 16px
  301.      
  302.  
  303. // Projects layout
  304. .project-index
  305.   @extend .grid-container
  306.  
  307.   // Default
  308.   .project-search-sidebar
  309.     display: none
  310.   .project-list
  311.     @extend .grid-full
  312.     &.grid .inner
  313.       @extend .nested-grid-container
  314.       .project-thumb
  315.         @extend .grid-3
  316.  
  317.   // Search Filter
  318.   &.search-filter
  319.     .project-search-sidebar
  320.       @extend .grid-3
  321.     .project-list
  322.       @extend .grid-9
  323.  
  324. .project-search
  325.   display: inline-block
  326.   font-size: 12px
  327.   form
  328.     display: inline-block
  329.   input
  330.     +box-sizing(border)
  331.     width: 200px
  332.   a
  333.     margin-left: 10px
  334.  
  335. // Main breadcrumbs styles. They don't need to be
  336. // scoped to #project but they are for now
  337. .breadcrumbs
  338.   color: $dark-grey
  339.   display: block
  340.   margin-left: 10px
  341.   a
  342.     color: inherit
  343.   li
  344.     position: relative
  345.     display: inline-block
  346.     margin-right: 20px
  347.     &:after
  348.       position: absolute
  349.       right: -15px
  350.       top: 0
  351.       content: "/"
  352.     &:last-of-type
  353.       margin-right: 0
  354.       &:after
  355.         position: absolute
  356.         right: 0
  357.         top: 0
  358.         content: ""
  359.  
  360. // Social shares options built into the main layout
  361. .social-share
  362.   position: absolute
  363.   bottom: 10px
  364.   right: 0
  365.   +pie-clearfix
  366.   li
  367.     +float-left
  368.     +border-radius(3px)
  369.     background: rgba(#fff,.05)
  370.     height: 48px
  371.     margin-left: 5px
  372.     width: 48px
  373.     &:first-child:before
  374.       @extend .PFCentroSerifPro-Regular
  375.       color: $light-grey
  376.       font-size: 16px
  377.       position: absolute
  378.       bottom: 14px
  379.       left: -48px
  380.       content: "Share"
  381.     a
  382.       +sprite-background("/images/social-48.png", 48px, 48px)
  383.       display: inline-block
  384.       text-indent: -99999px
  385.       width: 48px
  386.       &.facebook
  387.         +sprite-row(1, 48px)
  388.       &.twitter
  389.         +sprite-row(2, 48px)
  390.  
  391. // View switcher
  392. .view-switcher
  393.   position: absolute
  394.   bottom: 10px
  395.   right: 0
  396.   +pie-clearfix
  397.   li
  398.     +float-left
  399.     +border-radius(3px)
  400.     background: rgba(#fff,.05)
  401.     height: 48px
  402.     margin-left: 5px
  403.     width: 48px
  404.     &:first-child:before
  405.       @extend .PFCentroSerifPro-Regular
  406.       color: $light-grey
  407.       font-size: 16px
  408.       position: absolute
  409.       bottom: 14px
  410.       left: -100px
  411.       content: "Change View"
  412.     a
  413.       +sprite-background("/images/switcher-48.png", 48px, 48px)
  414.       display: inline-block
  415.       text-indent: -99999px
  416.       width: 48px
  417.       &.map
  418.         +sprite-row(1,48px)
  419.         &:hover
  420.           +sprite-row(2,48px)
  421.       &.list
  422.         +sprite-row(3,48px)
  423.         &:hover
  424.           +sprite-row(4,48px)
  425.       &.grid
  426.         +sprite-row(5,48px)
  427.         &:hover
  428.           +sprite-row(6,48px)
  429.  
  430. // Project Show
  431. // Usage: Project show view
  432. .project-snapshot
  433.   @extend .grid-container
  434.   background: #fff
  435.   padding: 10px 0
  436.    
  437.   .project-images-wrapper
  438.     @extend .grid-7
  439.     position: relative
  440.     overflow: visible
  441.     &:after
  442.       position: absolute
  443.       right: -40px
  444.       top: -18px
  445.       content: url(/images/shadow-vertical-350.png)
  446.       height: 350px
  447.       overflow: hidden
  448.       width: 30px
  449.     img
  450.       display: none
  451.       &:first-of-type
  452.         display: block
  453.  
  454.   .project-funding
  455.     @extend .grid-5
  456.     color: $dark-grey
  457.     padding-top: 20px
  458.     h2
  459.       +heading($color:#454545,$font-size:28px)
  460.       text-align: center
  461.     .project-funding-actions
  462.       margin-top: 15px
  463.       text-align: center
  464.       li
  465.         display: inline-block
  466.         ul
  467.           display: none
  468.       a
  469.         @extend .button
  470.     .project-funding-progress
  471.       background: url(/images/shadow-horizontal-300.png) no-repeat 50% 0
  472.       margin-top: 20px
  473.       padding-top: 20px
  474.       .progress-meter
  475.         margin: 0 auto
  476.         width: 85%
  477.       p
  478.         margin-top: 5px
  479.         text-align: center
  480.     .project-social
  481.       background: url(/images/shadow-horizontal-300.png) no-repeat 50% 0
  482.       margin-top: 20px
  483.       padding-top: 30px
  484.       text-align: center
  485.       a
  486.         @extend .button
  487.  
  488. .project-info
  489.   position: relative
  490.   background: #222
  491.   margin-top: 20px
  492.   h2
  493.     +heading($font-size: 24px)
  494.     border-bottom: 4px solid #151515
  495.     font-size: 24px
  496.     padding: 15px 10px
  497.   .project-info-tabs
  498.     position: absolute
  499.     top: 10px
  500.     right: 10px
  501.     +clearfix
  502.     li
  503.       float: left
  504.       &:first-of-type a
  505.         +border-left-radius(5px)
  506.       &:last-of-type a
  507.         +border-right-radius(5px)
  508.       a
  509.         +text-shadow(rgba(#000,.5),1px, 1px, 1px)
  510.         +background(linear-gradient(#888 50%, #666 52%))
  511.         +box-shadow(rgba(#fff,.5) 0 0 2px inset)
  512.         border: 1px solid #000
  513.         color: #fff
  514.         display: inline-block
  515.         padding: 10px 20px
  516.         &.pressed
  517.           text-decoration: none
  518.           +background(linear-gradient(#444 50%, #222 52%))
  519.           +box-shadow(rgba(#ccc,.5) 0 0 2px inset)
  520.           &:hover
  521.             text-decoration: none
  522.             +background(linear-gradient(#666 50%, #444 52%))
  523.             +box-shadow(rgba(#ccc,.5) 0 0 2px inset)
  524.         &:hover
  525.           text-decoration: none
  526.           +background(linear-gradient(#aaa 50%, #888 52%))
  527.           +box-shadow(rgba(#fff,.5) 0 0 1px inset)
  528.      
  529.   h3
  530.     +heading($color: $light-grey, $font-size: 18px)
  531.     margin-bottom: 10px
  532.   p
  533.     color: $dark-grey
  534.     font-size: 14px
  535.     line-height: 1.5
  536.     margin-bottom: 10px
  537.     &:last-of-type
  538.       margin-bottom: 0
  539.   .project-tabbed
  540.     @extend .grid-container
  541.     padding: 20px 0
  542.   .project-tab-summary
  543.     // na
  544.   .project-tab-updates
  545.     display: none
  546.   .project-summary
  547.     @extend .grid-6
  548.   .project-field-partners
  549.     @extend .grid-3
  550.   .project-region
  551.     @extend .grid-3
  552.   .project-video-updates
  553.     @extend .grid-6
  554.   .project-post-updates
  555.     @extend .grid-4
  556.   .project-archives
  557.     @extend .grid-2
  558.  
  559. .field-partner
  560.   +clearfix
  561.   font-size: 12px
  562.   img
  563.     +float-right
  564.   h4
  565.     font-size: 14px
  566.     font-weight: bold
  567.     margin-bottom: 10px
  568.   dl
  569.     margin-bottom: 10px
  570.     dt
  571.       color: $light-grey
  572.       margin-bottom: 10px
  573.     dd
  574.       ul
  575.         +clearfix
  576.         li
  577.           +float-left
  578.           margin-right: 5px
  579.           &:last-of-type a
  580.             background: image-url("star-ratings-15.png") -15px top no-repeat
  581.             &:hover
  582.               background: image-url("star-ratings-15.png") left top no-repeat
  583.           a
  584.             background: image-url("star-ratings-15.png") left top no-repeat
  585.             display: inline-block
  586.             +squared(15px)
  587.             text-indent: -99999px
  588.  
  589. .other-projects
  590.   margin-top: 30px
  591.   ul
  592.     +clearfix
  593.     li
  594.       +float-left
  595.       margin-right: 7%
  596.       margin-bottom: 7%
  597.       width: 40%
  598.       img
  599.         display: block
  600.         width: 100%
  601.   a
  602.     font-size: 12px
  603.  
  604. // Project Thumb
  605. // Usage: Reusable part for the project "thumbs" view
  606. .project-thumb
  607.   +border-radius(5px)
  608.   background: #fff
  609.   margin-bottom: 30px !important
  610.   .project-details
  611.     padding: 8px
  612.     padding-bottom: 0
  613.   img
  614.     width: 100%
  615.     margin-bottom: 10px
  616.   h2
  617.     +heading($color: #000, $font-size: 18px)
  618.   p
  619.     color: $dark-grey
  620.     font-size: 12px
  621.     line-height: 1.4
  622.     &:first-of-type
  623.       margin-top: 10px
  624.  
  625. .project-location
  626.   color: $darkest-grey
  627.   font-size: 12px
  628.   line-height: 1.4
  629.   padding: 8px
  630.   &:before
  631.     content: "Location: "
  632.  
  633. // Project actions
  634. // Usage: Action menus at the bottom of the project thumbs
  635. .project-actions
  636.   border-top: 1px solid $light-grey
  637.   +display-box
  638.   width: 100%
  639.   li
  640.     +box-flex(2)
  641.     &:last-of-type a
  642.       border-right: none
  643.     &:first-of-type a
  644.       +border-bottom-left-radius(5px)
  645.     &:last-of-type a
  646.       +border-bottom-right-radius(5px)
  647.     a
  648.       +background(linear-gradient($lighter-grey,#fff 30%))
  649.       border-right: 1px solid $lighter-grey
  650.       color: $darkest-grey
  651.       display: block
  652.       font-size: 10px
  653.       line-height: 34px
  654.       text-align: center
  655.       text-transform: uppercase
  656.       &:hover
  657.         background: #fff
  658.         text-decoration: none
  659.  
  660. // -----------------------------------------------------------------
  661. // Progress meter
  662. // -----------------------------------------------------------------
  663. // Usage: Shows the amount of funding on the project
  664. .progress-meter
  665.   +box-sizing(border-box)
  666.   cursor: default
  667.   margin-top: 5px
  668.   padding: 0 8px 4px 8px
  669.   -webkit-user-select: none
  670.   -khtml-user-select: none
  671.   -moz-user-select: none
  672.   -o-user-select: none
  673.   user-select: none
  674.   width: 100%
  675.   .meter
  676.     +border-radius(8px)
  677.     +box-shadow(rgba(#000,.4) 0 0 3px)
  678.     +box-sizing(border-box)
  679.     background: #fff
  680.     padding: 2px
  681.     width: 100%
  682.     .meter-bg
  683.       +border-radius(8px)
  684.       +background(linear-gradient(#000,#373737 85%))
  685.       padding: 2px
  686.       .progress
  687.         +border-radius(5px)
  688.         +background(linear-gradient(#ffdd25,#ffad04 75%))
  689.         +transition-property(width)
  690.         +transition-duration(1s)
  691.         +transition-delay(.5s)
  692.         +transition-timing-function(ease)
  693.         color: #000
  694.         font-weight: bold
  695.         height: 25px
  696.         line-height: 25px
  697.         text-align: center
  698.         max-width: 100%
  699.         width: 0
  700.         &.below-18
  701.           position: relative
  702.           color: #fff
  703.           text-shadow: 1px 1px 0px rgba(0,0,0,.7)
  704.           &:after
  705.             position: absolute
  706.             right: -35px
  707.         &:after
  708.           content: attr(data-complete)
  709.  
  710. // -----------------------------------------------------------------
  711. // Project search
  712. // -----------------------------------------------------------------
  713. // Usage: Search sidebar in the project list
  714. .project-search-sidebar
  715.   h2
  716.     display: none
  717.   .search-group
  718.     +border-radius(8px)
  719.     background: #fff
  720.     background: rgba(#fff,0.05)
  721.     margin-bottom: 6px
  722.     padding: 12px
  723.     h3
  724.       @extend .PFCentroSerifPro-Regular
  725.       color: $pure-yellow
  726.       font-size: 18px
  727.     ul
  728.       margin-top: 5px
  729.       li
  730.         color: #c4c4c4
  731.         display: block
  732.         font-size: 12px
  733.         line-height: 1.8
  734.          
  735. // -----------------------------------------------------------------
  736. // Sessions forms
  737. // -----------------------------------------------------------------
  738. // Usage: Layout and styles for the various session related forms
  739. body.sessions, body.registrations
  740.   > section
  741.     @extend .grid-container
  742.     background: #fff
  743.     background: rgba(#fff,0.05)
  744.   .sessions-form, .comms
  745.     +box-sizing(border-box)
  746.     padding: 30px
  747.   .sessions-form
  748.     +grid(8)
  749.     padding-right: 0
  750.   .comms
  751.     +grid(4)
  752.     padding-left: 0
  753.    
  754.   .comms
  755.     @extend .dark
  756.     h2
  757.       @extend .PFCentroSerifPro-Regular
  758.       color: #fff
  759.       font-size: 20px
  760.       margin-top: 40px
  761.       margin-bottom: 20px
  762.       &:first-of-type
  763.         margin-top: 0
  764.     p, li
  765.       line-height: 1.5
  766.     .trade-mark
  767.       position: relative
  768.       top: -7px
  769.       left: 1px
  770.     a
  771.       +link-styles(#fff,darken(#fff,15))
  772.  
  773. body.passwords
  774.   > section
  775.     @extend .grid-container
  776.     background: #fff
  777.     background: rgba(#fff,0.05)
  778.   .sessions-form
  779.     +grid(8)
  780.     padding-top: 30px
  781.     padding-bottom: 30px
  782.     +grid-prefix(2)
  783.     +grid-suffix(2)
  784.   .comms
  785.     display: none
  786.      
  787.  
  788. #error_explanation
  789.   background: #fff
  790.   background: rgba(#fff,0.05)
  791.   border: 1px solid rgba(#fff,.1)
  792.   padding: 15px
  793.   h2
  794.     color: #fff
  795.     font-weight: bold
  796.     margin-bottom: 12px
  797.   ul
  798.     list-style: disc
  799.     padding-left: 15px
  800.     li
  801.       line-height: 1.5
  802.  
  803. #flash
  804.   .alert
  805.     +opacity(1.0)
  806.     background: rgba(red,.4)
  807.     color: #fff
  808.     font-size: 1.1em
  809.     padding: 20px 40px
create a new version of this paste RAW Paste Data