Created
August 20, 2013 22:25
-
-
Save scottkellum/6288151 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // Sass (v3.2.10) | |
| // Compass (v0.13.alpha.4) | |
| // ---- | |
| @import "toolkit-no-css"; | |
| $orange: #fa4b2a; | |
| $team-list: 3; | |
| $nav-scale: 1%; | |
| $img-cap-height: 45px; | |
| .page-body.entry-content { | |
| #team-nav { | |
| position: absolute; | |
| height: 300px + 45px; | |
| width: 660px - 20px; | |
| button { | |
| font-size: 40px; | |
| display: block; | |
| position: absolute; | |
| top: 50%; | |
| margin-top: -.5em; | |
| width: 1em; | |
| height: 1em; | |
| z-index: 1; | |
| @include transition(all .2s); | |
| background-color: $orange; | |
| border-radius: .5em; | |
| border: 2px solid white; | |
| background-image: url('http://assets.sbnation.com/assets/3048623/arrows.png'); | |
| @include background-size(200%); | |
| } | |
| #team-prev { | |
| left: -20px; | |
| } | |
| #team-next { | |
| right: -20px; | |
| background-position: right; | |
| } | |
| } | |
| .team-img { | |
| padding-bottom: 300px; | |
| padding-top: $img-cap-height; | |
| position: relative; | |
| background-color: black; | |
| overflow: hidden; | |
| @include perspective(800px); | |
| @include transform-style(preserve-3d); | |
| list-style: none; | |
| > li { | |
| opacity: 0; | |
| padding: 0; | |
| margin: 0 0 0 -20px; | |
| position: absolute; | |
| top: 0; | |
| width: 100%; | |
| @include transition(all 1s); | |
| // 3D | |
| @include transform(rotateY(-180deg)); | |
| @include backface-visibility(hidden); | |
| &.active { | |
| @include transform(rotateY(0)); | |
| opacity: 1; | |
| ~ li { | |
| @include transform(rotateY(180deg)); | |
| } | |
| } | |
| } | |
| img { | |
| width: 640px; | |
| } | |
| table { | |
| height: $img-cap-height; | |
| width: 640px; | |
| margin: -4px 0 0 10px; | |
| padding: 0; | |
| text-align: center; | |
| background: black; | |
| color: white; | |
| td { | |
| padding: 0 1em; | |
| font-family: ff-din-web-condensed,helvetica,sans-serif; | |
| text-transform: uppercase; | |
| font-size: 1.2em; | |
| line-height: 1; | |
| font-style: italic; | |
| font-weight: normal; | |
| text-align: center; | |
| } | |
| } | |
| } | |
| .team-list { | |
| width: 100%; | |
| display: table; | |
| margin: 0 0 1px 0; | |
| padding: 0; | |
| li { | |
| width: 100% / $team-list; | |
| display: table-cell; | |
| background: black; | |
| padding: .5em; | |
| line-height: 1; | |
| font-family: ff-din-web-condensed,helvetica,sans-serif; | |
| text-transform: uppercase; | |
| border-left: 1px solid white; | |
| text-align: center; | |
| font-weight: normal; | |
| color: white; | |
| @include transition(all .5s); | |
| cursor: pointer; | |
| &.active { | |
| background: $orange; | |
| } | |
| &:first-child { | |
| border-left: none; | |
| } | |
| } | |
| &:hover li { | |
| width: 100% / $team-list - $nav-scale; | |
| &:hover { | |
| background: $orange; | |
| width: 100% / $team-list + $nav-scale * ($team-list - 1); | |
| } | |
| } | |
| } | |
| h2 { | |
| border-top: 3px solid $orange; | |
| padding-top: .3em; | |
| } | |
| h4 { | |
| font-family: ff-din-web-condensed,helvetica,sans-serif; | |
| text-transform: uppercase; | |
| //font-size: 14px; | |
| margin: 0; | |
| font-weight: bold; | |
| } | |
| .editorial { | |
| .columns { | |
| @include column-count(2); | |
| @include column-gap(20px); | |
| } | |
| ul { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0 5% 2em 0; | |
| } | |
| li { | |
| display: inline-block; | |
| width: 100%; | |
| margin: 0 0 .5em 0; | |
| font-weight: bold; | |
| font-size: 12px; | |
| line-height: 1.3; | |
| } | |
| .role-title { | |
| display: block; | |
| font-weight: normal; | |
| } | |
| } | |
| section { | |
| clear: both; | |
| } | |
| } | |
| @mixin fill-page {.column.grid_8.content-container.column-border-right {border-right: none;width: auto;}.column.grid_4.content-container.rightcol {display: none;}} | |
| //@include fill-page; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .page-body.entry-content #team-nav{position:absolute;height:345px;width:640px}.page-body.entry-content #team-nav button{font-size:40px;display:block;position:absolute;top:50%;margin-top:-.5em;width:1em;height:1em;z-index:1;-webkit-transition:all 0.2s;-moz-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s;background-color:#fa4b2a;border-radius:.5em;border:2px solid white;background-image:url("http://assets.sbnation.com/assets/3048623/arrows.png");-webkit-background-size:200%;-moz-background-size:200%;-o-background-size:200%;background-size:200%}.page-body.entry-content #team-nav #team-prev{left:-20px}.page-body.entry-content #team-nav #team-next{right:-20px;background-position:right}.page-body.entry-content .team-img{padding-bottom:300px;padding-top:45px;position:relative;background-color:black;overflow:hidden;-webkit-perspective:800px;-moz-perspective:800px;-ms-perspective:800px;-o-perspective:800px;perspective:800px;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d;list-style:none}.page-body.entry-content .team-img>li{opacity:0;padding:0;margin:0 0 0 -20px;position:absolute;top:0;width:100%;-webkit-transition:all 1s;-moz-transition:all 1s;-o-transition:all 1s;transition:all 1s;-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);-ms-transform:rotateY(-180deg);-o-transform:rotateY(-180deg);transform:rotateY(-180deg);-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden}.page-body.entry-content .team-img>li.active{-webkit-transform:rotateY(0);-moz-transform:rotateY(0);-ms-transform:rotateY(0);-o-transform:rotateY(0);transform:rotateY(0);opacity:1}.page-body.entry-content .team-img>li.active ~ li{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg)}.page-body.entry-content .team-img img{width:640px}.page-body.entry-content .team-img table{height:45px;width:640px;margin:-4px 0 0 10px;padding:0;text-align:center;background:black;color:white}.page-body.entry-content .team-img table td{padding:0 1em;font-family:ff-din-web-condensed,helvetica,sans-serif;text-transform:uppercase;font-size:1.2em;line-height:1;font-style:italic;font-weight:normal;text-align:center}.page-body.entry-content .team-list{width:100%;display:table;margin:0 0 1px 0;padding:0}.page-body.entry-content .team-list li{width:33.33333%;display:table-cell;background:black;padding:.5em;line-height:1;font-family:ff-din-web-condensed,helvetica,sans-serif;text-transform:uppercase;border-left:1px solid white;text-align:center;font-weight:normal;color:white;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;transition:all 0.5s;cursor:pointer}.page-body.entry-content .team-list li.active{background:#fa4b2a}.page-body.entry-content .team-list li:first-child{border-left:none}.page-body.entry-content .team-list:hover li{width:32.33333%}.page-body.entry-content .team-list:hover li:hover{background:#fa4b2a;width:35.33333%}.page-body.entry-content h2{border-top:3px solid #fa4b2a;padding-top:.3em}.page-body.entry-content h4{font-family:ff-din-web-condensed,helvetica,sans-serif;text-transform:uppercase;margin:0;font-weight:bold}.page-body.entry-content .editorial .columns{-webkit-column-count:2;-moz-column-count:2;column-count:2;-webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px}.page-body.entry-content .editorial ul{list-style:none;padding:0;margin:0 5% 2em 0}.page-body.entry-content .editorial li{display:inline-block;width:100%;margin:0 0 .5em 0;font-weight:bold;font-size:12px;line-height:1.3}.page-body.entry-content .editorial .role-title{display:block;font-weight:normal}.page-body.entry-content section{clear:both} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment