Make sponsors detail styles own (legacy) component

Signed-off-by: Alex Coles <[email protected]>

source/2015/components-legacy.html.lsg

@@ -15,4 +15,5 @@ Those components need to be updated to the style guide API. For now, copy’n’
 @import components-legacy/guide
 @import components-legacy/concept-page
 @import components-legacy/team-page
+@import components-legacy/sponsors-detail-page
 @import components-legacy/schedule

source/2015/components-legacy/_sponsors-detail-page.sass

@@ -0,0 +1,261 @@
+.sponsors-detail
+  display: block
+
+
+.sponsors-detail--container
+  @extend %container
+  padding-bottom: 0px
+  margin-bottom: 0px
+
+
+.sponsors-detail--title
+  @extend %headline
+
+  &:before
+    content: inline-svg("sponsors--icon.svg")
+    display: block
+    margin: auto
+    width: 20px
+
+
+.sponsors-detail--section-title
+  @extend %pie-clearfix
+  font-size: 1.5rem
+  text-transform: uppercase
+  @include grid(12, 8, 6)
+  text-align: center
+  font-weight: bold
+  color: $red
+  padding-bottom: 50px
+
+.sponsors-detail--list
+  display: block
+  margin-top: 100px
+  @media all and (max-width: 800px)
+    margin-top: 100px
+
+.sponsors-detail--list-item-label, .sponsors-detail--page-list-item-label
+  display: block
+  background: $red
+  color: $white
+  opacity: 1
+  text-align: right
+  padding-right: 1%
+  padding-top: 3px
+  margin: -1% 65% 0 130%
+  margin-top: -0%
+  margin-left: -20%
+  font-weight: bold
+  text-transform: uppercase
+  @include transform(rotate(-90deg))
+
+.sponsors-detail--list-item-label
+  margin: -1% 70% 0 70%
+  margin-top: -30%
+  margin-left: -20%
+
+.-nickel
+  .sponsors-detail--page-list-item-label
+    margin-top: -30%
+
+.sponsors-detail--list-item
+  @include grid(4, 4, 6)
+  margin-top: 0px
+  margin-bottom: 50px
+  height: 200px
+  max-width: 350px
+
+
+.sponsors-detail--list-item-image
+  padding: 0 20px 0 20px
+  display: inline-block
+  width: 100%
+
+.sponsors-detail--buttons
+  @extend %pie-clearfix
+
+
+.sponsors-detail--show-more
+  @extend %show-more
+  background: $dark-red
+  &:hover
+    background: $red
+
+.sponsors-detail.-home
+  padding-bottom: 50px
+
+
+.sponsors-detail-page
+  @extend %page
+  background: #212C2B
+  color: $white
+
+.sponsors-detail-page--container
+  @extend %page--container
+
+.sponsors-detail-page--title
+  @extend %page--title
+  font-size: 6rem
+  margin: 170px
+  color: white
+  @include transform-origin(100px, 250px)
+  @media all and (max-width: 600px)
+    font-size: 4rem
+    @include transform-origin(150px, 150px)
+    margin: 40px
+
+.sponsors-detail-page--companies
+  .sponsors-detail--section
+    @extend %page--section
+
+  .sponsors-detail--section-title
+    @extend %page--section-title
+    color: $white
+    margin-top: 200px
+    margin-left: 200px
+    margin-bottom: -200px
+    &:before
+      background: $white
+    @media all and (max-width: 800px)
+      color: $black
+      margin-top: 100px
+      margin-left: 0px
+      text-align: left
+      margin-bottom: -50px
+  .sponsors-detail--list
+    @extend %pie-clearfix
+
+  .sponsors-detail--section.-gold
+    margin-top: 200px
+    .sponsors-detail--section-title:before
+      background: #c4af70
+    .sponsors-detail--section-title
+      @media all and (max-width: 800px)
+        margin-top: 300px
+        margin-bottom: 10px
+      @media all and (max-width: 600px)
+        margin-top: 150px
+
+    .sponsors-detail--list-item
+      @include grid(12, 8, 6)
+      height: 100%
+      max-width: 100%
+      margin-top: 100px
+      margin-bottom: 0
+      padding-bottom: 100px
+      img
+        max-height: 100%
+        padding: 0 10% 0 10%
+      @media all and (max-width: 800px)
+        margin-top: 100px
+        margin-bottom: 0
+    .sponsors-detail--list-item-name
+      @include grid(8, 4, 6)
+    .sponsors-detail--section-item-text
+      color: white
+      @include grid(4, 4, 6)
+      @media all and (max-width: 600px)
+        padding: 30px 10% 30px 10%
+        font-size: 18px
+
+  .sponsors-detail--section.-silver
+    margin-top: -100px
+    .sponsors-detail--section-title:before
+      background: $gray
+    .sponsors-detail--section-title
+      @media all and (max-width: 800px)
+        margin-top: 300px
+        margin-bottom: 10px
+      @media all and (max-width: 600px)
+        margin-top: 150px
+
+    .sponsors-detail--list-item
+      @include grid(12, 8, 6)
+      height: 100%
+      max-width: 100%
+      margin-top: 100px
+      margin-bottom: 0
+      img
+        max-height: 100%
+        padding: 0 10% 0 10%
+      @media all and (max-width: 800px)
+        margin-top: 100px
+        margin-bottom: 0
+    .sponsors-detail--list-item-name
+      @include grid(6, 4, 6)
+    .sponsors-detail--section-item-text
+      @include grid(6, 4, 6)
+      @media all and (max-width: 600px)
+        padding: 30px 10% 30px 10%
+        font-size: 18px
+
+  .sponsors-detail--section.-nickel
+    margin-top: 150px
+    margin-bottom: 100px
+    .sponsors-detail--section-title:before
+      background: #c49570
+    .sponsors-detail--section-title
+      @media all and (max-width: 800px)
+        margin-bottom: 10px
+    .sponsors-detail--list
+      @include grid(12, 8, 6)
+    .sponsors-detail--list-item
+      @include grid(4, 4, 6)
+      height: 150px
+      margin-top: 25px
+      @media all and (max-width: 800px)
+        margin-top: 25px
+        margin-bottom: 0
+    .sponsors-detail--list-item-name
+      //@include grid(12, 8, 6)
+    .sponsors-detail--section-item-text
+      display: none
+
+.sponsors-detail--section-item-text
+  font-size: 17px
+  a
+    color: $red
+
+
+.sponsors-detail-page--info
+  .sponsors-detail--section
+    @extend %page--section
+  .sponsors-detail--section-title
+    @extend %page--section-title
+    color: $white
+    margin-top: 200px
+    margin-left: 200px
+    margin-bottom: -200px
+    &:before
+      background: $fuchsia
+    @media all and (max-width: 800px)
+      color: $black
+      margin-top: 100px
+      margin-left: 0px
+      text-align: left
+      margin-bottom: 50px
+    @media all and (max-width: 600px)
+      margin-bottom: -50px
+
+.sponsors-detail-page--info-text
+  @extend %pie-clearfix
+  @include grid(6, 4, 4)
+  color: white
+  margin-left: 33%
+  margin-top: 100px
+  font-size: 1.5rem
+  @media all and (max-width: 800px)
+    margin-top: 150px
+    margin-left: 10%
+
+.sponsors-detail-page--buttons
+  @extend %pie-clearfix
+  @include grid(6, 4, 6)
+  margin-top: 50px
+  text-align: center
+
+.sponsors-detail-page--show-more
+  @extend %show-more
+  background: $dark-red
+  &:hover
+    background: $red