Laura Eble CheetoMao
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
| <p>Here is a button, it has a box-shadow that shows up well on lighter colors but it doesn't show up well on darker colors. This is where we can use the reverse nested selector to make a tiny change, darkening the box-shadow, when it's contained in a darker colored container.</p> | |
| <div class="lite"> | |
| <button class="button-primary">I'm a button</button> | |
| </div> | |
| <div class="dark"> | |
| <button class="button-primary">I'm the same kind of button</button> | |
| </div> |
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
| <p>Normally buttons next to each other would double-up on the margin in between them. Using &+& allows you to remove that extra margin when a button is a directly adjacent sibling.</p> | |
| <button>First Button</button> | |
| <button>Following Button</button> |
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
| <button class="button">.button</button> | |
| <button class="button--yellow">.button--yellow</button> | |
| <button class="button_blue">.button_blue</button> | |
| <button class="button-green">.button-green</button> | |
| <button class="buttonPink">.buttonPink</button> |
CheetoMao
/ SassMeister-input-HTML.html
Created
September 19, 2014 00:21
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
| <body> | |
| <div class="base-color"></div> | |
| <div class="complement-color"></div> | |
| <div class="mix-color"></div> | |
| </body> |
CheetoMao
/ SassMeister-input-HTML.html
Created
September 19, 2014 00:02
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
| <body> | |
| <section class="Wrapper"> | |
| <h1>Lorem ipsum dolor sit amet</h1> | |
| <div class="Container"> | |
| <p>Consectetur adipiscing elit. Nulla tristique lorem consequat magna ultrices, eget lobortis erat elementum. Pellentesque gravida lacinia vehicula. Cras ut nibh eu elit maximus iaculis. Cras volutpat tortor eu ipsum bibendum pulvinar. Phasellus at scelerisque leo. Vestibulum ornare volutpat dictum.</p> | |
| <button class="base-color">Button</button> | |
| <button class="secondary-color">Secondary Button</button> | |
| </div> | |
| </section> | |
| </body> |
NewerOlder