Created
August 7, 2014 15:34
-
-
Save mechanicalduck/d6db249fcb45cafa1199 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="button">Button left upper corner</div> | |
| <div class="button last">Button left lower corner</div> | |
| <div class="middle">Middle part</div> | |
| <div class="button">Button right upper corner</div> | |
| <div class="button last">Button right lower corner</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.button { | |
| background-color: grey; | |
| } | |
| div.middle { | |
| background-color: lightblue; | |
| } | |
| div.button { | |
| @include span(1 of 3) | |
| } | |
| div.button.last { | |
| @include span(last 1 of 3) | |
| } |
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.button { | |
| background-color: grey; | |
| } | |
| div.middle { | |
| background-color: lightblue; | |
| } | |
| div.button { | |
| width: 33.33333%; | |
| float: left; | |
| } | |
| div.button.last { | |
| width: 33.33333%; | |
| 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="button">Button left upper corner</div> | |
| <div class="button last">Button left lower corner</div> | |
| <div class="middle">Middle part</div> | |
| <div class="button">Button right upper corner</div> | |
| <div class="button last">Button right lower corner</div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment