Created
August 7, 2014 15:39
-
-
Save mechanicalduck/a6a94c9e5f29aaf4e466 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
| <!doctype html> | |
| <html class="no-js" lang="<%- title %>"> | |
| <head> | |
| <title>Test</title> | |
| </head> | |
| <body> | |
| <div class="colm"> | |
| <div class="button">Button left upper corner</div> | |
| <div class="button last">Button left lower corner</div> | |
| </div> | |
| <div class="middle">Middle part</div> | |
| <div class="colm last"> | |
| <div class="button">Button right upper corner</div> | |
| <div class="button last">Button right lower corner</div> | |
| </div> | |
| </body> | |
| </html> |
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.3.14) | |
| // Compass (v1.0.0.rc.1) | |
| // Susy (v2.1.3) | |
| // ---- | |
| @import "susy"; | |
| // Configuring Susy Defaults | |
| $susy: ( | |
| flow: ltr, | |
| math: fluid, | |
| output: inside, | |
| gutter-position: first, | |
| container: auto, | |
| container-position: center, | |
| columns: 12, | |
| gutters: 0, | |
| column-width: false, | |
| global-box-sizing: content-box, | |
| last-flow: to, | |
| debug: ( | |
| image: show, | |
| color: rgba(#66f, .25), | |
| output: background, | |
| toggle: top right, | |
| ), | |
| use-custom: ( | |
| background-image: true, | |
| background-options: false, | |
| box-sizing: true, | |
| clearfix: true, | |
| rem: true, | |
| ) | |
| ); | |
| body { | |
| @include container(show overlay); | |
| } | |
| div.colm { | |
| @include span(1 of 3); | |
| @include container(1 2 show overlay); | |
| } | |
| div.colm.last { | |
| @include span(last 1 of 3); | |
| } | |
| div.middle { | |
| background-color: lightblue; | |
| @include span(1 of 3); | |
| } | |
| div.button { | |
| background-color: grey; | |
| @include span(last 1 of 1); | |
| } |
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
| body { | |
| max-width: 100%; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| body:after { | |
| content: " "; | |
| display: block; | |
| clear: both; | |
| } | |
| head { | |
| display: block; | |
| position: fixed; | |
| right: 10px; | |
| top: 10px; | |
| z-index: 999; | |
| color: #333; | |
| background: rgba(255, 255, 255, 0.25); | |
| } | |
| head:before { | |
| content: "|||"; | |
| display: block; | |
| padding: 5px 10px; | |
| font-family: sans-serif; | |
| font-size: 16px; | |
| font-weight: bold; | |
| } | |
| head:hover { | |
| background: rgba(255, 255, 255, 0.5); | |
| color: red; | |
| } | |
| head:hover ~ body, head:hover ~ body body { | |
| position: relative; | |
| } | |
| head:hover ~ body:before, head:hover ~ body body:before { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| right: 0; | |
| content: " "; | |
| z-index: 998; | |
| background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 100%, transparent 100%); | |
| background-size: 8.33333%; | |
| background-origin: content-box; | |
| background-clip: content-box; | |
| background-position: left top; | |
| } | |
| div.colm { | |
| width: 33.33333%; | |
| float: left; | |
| max-width: 100%; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| div.colm:after { | |
| content: " "; | |
| display: block; | |
| clear: both; | |
| } | |
| head:hover ~ div.colm, head:hover ~ body div.colm { | |
| position: relative; | |
| } | |
| head:hover ~ div.colm:before, head:hover ~ body div.colm:before { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| right: 0; | |
| content: " "; | |
| z-index: 998; | |
| background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 33.33333%, transparent 33.33333%); | |
| background-size: 300%; | |
| background-origin: content-box; | |
| background-clip: content-box; | |
| background-position: left top; | |
| } | |
| div.colm.last { | |
| width: 33.33333%; | |
| float: right; | |
| } | |
| div.middle { | |
| background-color: lightblue; | |
| width: 33.33333%; | |
| float: left; | |
| } | |
| div.button { | |
| background-color: grey; | |
| width: 100%; | |
| float: right; | |
| } |
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
| <!doctype html> | |
| <html class="no-js" lang="<%- title %>"> | |
| <head> | |
| <title>Test</title> | |
| </head> | |
| <body> | |
| <div class="colm"> | |
| <div class="button">Button left upper corner</div> | |
| <div class="button last">Button left lower corner</div> | |
| </div> | |
| <div class="middle">Middle part</div> | |
| <div class="colm last"> | |
| <div class="button">Button right upper corner</div> | |
| <div class="button last">Button right lower corner</div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment