test-styl/_ads.styl
/**
* Styling for various ad types
*/
$gray = #CCC
$bgColor = #337ab7
$white = #FFF
body
margin 0
.splash
margin 10% 0
.test
margin 0
@require 'animate'
@require 'nib'
$extendable
margin: 0
:root {
--test: '#990000'
}
$color-black = #000
$color-white = #fff;
.biz
@extend$placeholderconst
margin: 0
// &:-ms-input-placeholder
// color: var( --test )
// margin: 0
// /.is-biz
// margin: 0
// ../../ .bar
// margin: 0
.test-extend
@extends $extendable !optional
background-image: url('http://something.com')
content: 'http://something.com'
madeUpProperty: 0
.test-semi-always
@extends .biz !optional, $extendable !optional
// background: $colors.bg
// color: #fff
// @stylint off
.baz
&::-moz-placeholder
margin: 0
~/:hover
margin: 5px
.foo
&:-ms-input-placeholder
color blue
&::-moz-placeholder
color red
.type
font-size: 1.1em
width 10.25%
width 0.25rem
opacity: .8
content: '()'
content: ','
content: ","
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
// @stylint off
input
display block
border 1px solid #000
position absolute
div#my-id #another-id
color: #999
.test
content: ",";
div:not([style="display: block;"]) {
display: none;
}
// border 0
// border 0
// border: 0;
// border : 0;
// border 0
// border 1px solid red
// border: 1px solid red
// border : 1px solid red
// border none
// border none
// border: none;
// border: none;
// border none
// outline 0
// outline 0
// outline: 0;
// outline : 0;
// outline 0
// outline 1px solid red
// outline: 1px solid red
// outline : 1px solid red
// outline none
// outline none
// outline: none;
// outline: none;
// outline none
// @stylint off
// &,
// &:hover,
// &:before,
// &.some-class,
// &__something,
// {some_var},
// margin 0
.module-class {
&__anything {
padding: 20px;
}
}
body
border: none;
border: none;
border: 1px solid red;
border: 0;
border: 0;
div:not([style="display: block;"]) {
display: none;
}
div#my-id #another-id {
// ...
}
.hero {
padding-top: rem(380);
min-height: rem(670);
position: absolute;
}
.my-class {
input {
height: 80px;
width :200px;
}
}
.test
border: 1px solid red;
$foo-color ?= #0976b5;
$x += $i;
$x -= $i;
.svg {
background: $background;
path,
rect,
polygon,
circle {
fill: $foreground;
}
}
.svg {
background: $background;
path,
circle,
polygon,
rect {
fill: $foreground;
}
}
.module-class
&__anything
padding: 20px;
__anything
margin: 0;
$icon-selector = '.icon'
// warn: trailing white space
.label, {$icon-selector}
font-size: 12px;
button
.label
font-size: 11px;
{$icon-selector} // warn: duplicate property or selector
font-size: 10px;
// warn: property is not valid
{$icon-selector}-user {
color: blue;
}
// @stylint off
div:not([style="display: block;"]) {
display: none;
}
test-mixin()
margin 0
mixin2()
margin 5px
.ExtendBug
test-mixin: $param $param2
mixin: $param
@extend .List
margin: 15px
.ParentReferenceBug
max-width: 100px
.ie9 &
max-width: 80px
.ChildBug1
.parent > .child
float: left
.ChildBug2
> .child
padding: 4px
.ChildBug3
.parent .child
margin-left: 0
.foo
margin 0 !important // @stylint ignore
padding 0 !important
$b = {
"bar": "baz",
whatever: whatevs
}
$black = #000;
.disabled {
content: ":";
zoom: 1;
ms-opacity(0.6); // <- gives false epositive
}
.abcdefghi {
.active { // @stylint ignore
color: red;
}
}
.abcdefghij {
.active {
color: red;
}
}
.abcdefghi {
.active {
color: red;
}
}
$foo = {
bar: {
baz: raz
}
}
// html, body {
// font-weight: 0;
// }
// { 'foo' }
// width: 50px
// {foo() + 'bar'}
// width: 0
// table&,
// &[disabled],
// + a,
// + span
// pointer-events none
// -khtml-user-select none
// -webkit-touch-callout none
// body.main
// margin 1em
// pointer-events none
// .margin
// margin 0px
// $b = { "bar": "baz" }
// @media screen and (max-width: 1183px)
// .test
// margin: 100%
// html, body {
// height: 100%;
// }
// foo()
// return 'bar'
// .test
// width foo()
// foo()
// if $bar
// width 10px
// foo()
// $bar = $baz
// // just testing
// .a {
// .b {
// font-size: 1.1em
// margin: 0 auto
// }
// }
// :root
// margin 0
// :selection
// margin 0
// .foo {
// color: red;
// }
// .a {
// &:b {
// font-size: 1.1em;
// }
// }
// .page {
// &__header,
// &__footer {
// }
// }
// test
// .foo {
// .bar {
// text-transform: something;
// z-index: 0;
// display: block;
// color: red;
// }
// }
// .foo {
// position: absolute; //test
// color: red;
// }
// this class is added if a billboard-sized ad is served in the top leaderboard div. This will scale the iframe down so that the sides are not cut off on tablet portrait
// .billboard-container
// height 188px
// min-width 985px
// overflow hidden
// padding 0 // consider just using a helper no-pad to overwrite
// iframe
// transitionMixin()
// @extends $transition-stuff
// border 0 // helper for this too
// height 250px
// transform scale( .75 )
// transform-origin 0 0
// width 970px
// z-index 0 // testing something heree
// // This class is added if a billboard ad is served in an incopy ad placement. This will center the billboard ad.
// .billboard-incopy
// width 970px !important
// iframe
// margin-bottom 10px !important
// min-height 270px !important
// // this class is added if a billboard-sized ad is served in an incopy ad position. This will scale the iframe down so that the sides are not cut off on tablet portrait
// .billboard-incopy-scale
// height 210px
// min-width 985px
// overflow hidden
// padding-left 10px
// padding-bottom 10px
// iframe
// border 0 // helper for this too
// height 270px
// transform scale( .75 )
// transform-origin 0 0
// width 970px
// padding-top 0
// // CM ad
// .cm
// // Get our newsletter
// &.cm-newsletter
// absolute top 107px bottom 0
// input:focus, a:focus
// outline-width 0
// outline none
// #newsletter-msg
// background $white-2
// cursor pointer
// display none
// line-height 85px
// z-index 5
// &.success
// cursor default
// span
// display inline-block
// line-height 20px
// vertical-align middle
// // Prefooter tweets
// &.cm-twitter
// ul
// border 0
// border-bottom $border-micro
// min-height 106px
// width 100%
// img
// height 43px
// p
// @extends $exchange-sm
// min-height 53px
// .sub-box
// h5
// width 40%
// a
// width 60%
// .cm-footer
// .newsletter-col
// min-height 271px
// // importants needed to center google ad (cause inline styles)
// ins
// display block !important
// margin 0 auto !important
// // 728 x 90
// .leaderboard
// @media $med-plus
// div,
// iframe
// margin 0 auto
// // Email field for cm units
// // @TODO why the caps? we don't use caps anywhere else in the css, as a rule
// #mce-EMAIL
// border 0
// border-bottom $border-micro
// width 100%
// .mid-banner-wrap
// margin 100px auto
// width 100vw
// iframe
// display inline
// margin-bottom -43px
// margin-top 0
// min-height 120px
// padding-top 15px
// .mobile-mid-banner-wrap
// margin 50px auto
// width 100vw
// .middle-banner-ad
// iframe
// // for specificity
// .content &
// margin 0 auto
// @media $mob-plus
// margin 0 auto
// // keeps incopy iframe centered
// width 728px
// // base ad class
// .rad
// margin-left auto
// margin-right auto
// // center ad content
// div,
// img,
// iframe
// @extends $center
// // box ad 300x250
// &.box
// max-width 320px
// min-width 300px
// @media $mob-plus
// max-width 300px
// // tall ad 300x600 (combine with box)
// &.tall
// height 600px
// /**
// * slideshow ads (the slide itself)
// * so this prolly doesnt need to exist @TODO
// */
// &.slide
// height 437px
// // this verticallly centers the ad, dont hardcode @FIXME
// .rad
// padding-top 107px
// // leaderboard, billboard, pushdown
// .rad-top
// transition( margin-top, $fast, true )
// @media $mob-plus
// // min-height here so that page does not jump once ad loads in.
// min-height 122px
// // ad sizes will vary by breakpoint
// @media $med-plus
// // if at top and nav open, keep ad visible
// &.hr-top.nav-active
// margin-top 158px
// // Move out of the way if admin bar is on
// .admin-bar &
// margin-top $gutter-big
// // this class is added when browser width is less tahn 340 in order for mobile ads to be centered on homepage and section fronts
// .mobile-ad-center
// left -16px
// position relative
// width 100vw
// // BuzzFeed Widget
// #BF_WIDGET_1
// @extends $visually-hidden