fuhlig
fuhlig
/ SassMeister-input.scss
Last active
September 6, 2015 22:01
Sass Basics: Variables (Scoping)
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
| // ---- | |
| // libsass (v3.2.5) | |
| // ---- | |
| $width: 20px; | |
| .component-one { | |
| $height: 30px !global; | |
| width: $width; | |
| } |
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.4.14) | |
| // Compass (v1.0.3) | |
| // ---- | |
| /// Find Opposite Direction (compass helper) | |
| /// | |
| /// --- | |
| /// @param {String} $dir - direction | |
| /// @return {String} - opposite direction |
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
| // ---- | |
| // libsass (v3.2.5) | |
| // ---- | |
| $phone-width: 320px; | |
| $tablet-width: 768px; | |
| $desktop-width: 1024px; | |
| @mixin phone { | |
| @media (min-width: #{$phone-width}) and (max-width: #{$tablet-width - 1px}) { |
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
| // ---- | |
| // libsass (v3.2.5) | |
| // ---- | |
| @mixin box-shadow($h-offset: 5px, $v-offset: 5px, $blur: 5px, $spread: 2px, $color: rgba(0, 0 , 0, 0.5)) { | |
| box-shadow: $h-offset $v-offset $blur $spread $color; | |
| } | |
| .box-shadow { | |
| @include box-shadow(); |
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
| // ---- | |
| // libsass (v3.2.5) | |
| // ---- | |
| nav { | |
| ul { | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| } |
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
| // ---- | |
| // libsass (v3.2.5) | |
| // ---- | |
| nav { | |
| ul { | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| } |
fuhlig
/ SassMeister-input-HTML.html
Last active
August 31, 2015 21:04
— forked from anonymous/SassMeister-input-HTML.html
Sass Basics: Variables (Colors)
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
| <div class="[ demo ] [ color-primary ]"></div> | |
| <div class="[ demo ] [ color-primary-dark ]"></div> | |
| <div class="[ demo ] [ color-primary-light ]"></div> | |
| <div class="[ demo ] [ color-primary-text ]"></div> | |
| <div class="[ demo ] [ color-accent ]"></div> | |
| <div class="[ demo ] [ color-secondary-text ]"></div> | |
| <div class="[ demo ] [ color-divider ]"></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
| <div class="[ demo ] [ color-primary ]"></div> | |
| <div class="[ demo ] [ color-primary-dark ]"></div> | |
| <div class="[ demo ] [ color-primary-light ]"></div> | |
| <div class="[ demo ] [ color-primary-text ]"></div> | |
| <div class="[ demo ] [ color-accent ]"></div> | |
| <div class="[ demo ] [ color-secondary-text ]"></div> | |
| <div class="[ demo ] [ color-divider ]"></div> |
fuhlig
/ md-input-container-select.css
Last active
August 29, 2015 14:13
— forked from yarl/md-input-container-select.css
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
| /* | |
| CSS styling for <input> | |
| https://github.com/angular/material/issues/276 | |
| JS: | |
| $scope.select = "foo"; | |
| $scope.list = ["foo", "bar"]; | |
| Front: |
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
| <div> | |
| <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, earum.</h1> | |
| <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, laborum.</h2> | |
| <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, nulla.</h3> | |
| </div> |