Skip to content

Instantly share code, notes, and snippets.

@kylefiedler
Created October 27, 2014 15:23
Show Gist options
  • Save kylefiedler/374928d982b576135084 to your computer and use it in GitHub Desktop.
Save kylefiedler/374928d982b576135084 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<h3>%default Ordered List</h3>
<ol class='default'>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
<h3>%default Unordered List</h3>
<ul class='default'>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
// ----
// Sass (v3.4.6)
// Compass (v1.0.1)
// Bitters (v0.10.0)
// Bourbon (v4.0.2)
// Neat (v1.6.0)
// ----
@import "bourbon/bourbon";
@import "neat/neat";
@import "bitters/bitters";
$base-spacing: 200;
ul {
@extend %default-ul;
}
ol {
@extend %default-ol;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
button,
input[type="submit"] {
-webkit-font-smoothing: antialiased;
background-color: #477DCA;
border-radius: 0.1875em;
color: white;
display: inline-block;
font-size: 1em;
font-weight: bold;
line-height: 1;
padding: .75em 1em;
text-decoration: none;
}
button:hover,
input[type="submit"]:hover {
background-color: #2c5999;
color: white;
}
body {
-webkit-font-smoothing: antialiased;
background-color: white;
color: #333;
font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-size: 1em;
line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
line-height: 1.25em;
margin: 0;
text-rendering: optimizeLegibility;
}
h1 {
font-size: 2.25em;
}
h2 {
font-size: 2em;
}
h3 {
font-size: 1.75em;
}
h4 {
font-size: 1.5em;
}
h5 {
font-size: 1.25em;
}
h6 {
font-size: 1em;
}
p {
margin: 0 0 0.75em;
}
a {
-webkit-transition: color 0.1s linear;
-moz-transition: color 0.1s linear;
transition: color 0.1s linear;
color: #477DCA;
text-decoration: none;
}
a:hover {
color: #2c5999;
}
a:active, a:focus {
color: #2c5999;
outline: none;
}
hr {
border-bottom: 1px solid #DDD;
border-left: none;
border-right: none;
border-top: none;
margin: 1.5em 0;
}
img {
margin: 0;
max-width: 100%;
}
blockquote {
border-left: 2px solid #DDD;
color: #595959;
margin: 1.5em 0;
padding-left: 0.75em;
}
cite {
color: #737373;
font-style: italic;
}
cite:before {
content: '\2014 \00A0';
}
fieldset {
background: #f7f7f7;
border: 1px solid #DDD;
margin: 0 0 0.75em 0;
padding: 1.5em;
}
input,
label,
select {
display: block;
font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-size: 1em;
}
label {
font-weight: bold;
margin-bottom: 0.375em;
}
label.required:after {
content: "*";
}
label abbr {
display: none;
}
textarea,
input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"],
select[multiple=multiple] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: border-color;
-moz-transition: border-color;
transition: border-color;
background-color: white;
border-radius: 0.1875em;
border: 1px solid #DDD;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-size: 1em;
margin-bottom: 0.75em;
padding: 0.5em 0.5em;
width: 100%;
}
textarea:hover,
input[type="email"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="text"]:hover, input[type="url"]:hover, input[type="color"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="month"]:hover, input[type="time"]:hover, input[type="week"]:hover,
select[multiple=multiple]:hover {
border-color: #c4c4c4;
}
textarea:focus,
input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus,
select[multiple=multiple]:focus {
border-color: #477DCA;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 5px rgba(55, 112, 192, 0.7);
outline: none;
}
textarea {
resize: vertical;
}
input[type="search"] {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
input[type="checkbox"], input[type="radio"] {
display: inline;
margin-right: 0.375em;
}
input[type="file"] {
margin-bottom: 0.75em;
padding-bottom: 0.5em;
width: 100%;
}
select {
width: auto;
max-width: 100%;
margin-bottom: 1.5em;
}
table {
border-collapse: collapse;
margin: 0.75em 0;
table-layout: fixed;
width: 100%;
}
th {
border-bottom: 1px solid #b7b7b7;
font-weight: bold;
padding: 0.75em 0;
text-align: left;
}
td {
border-bottom: 1px solid #DDD;
padding: 0.75em 0;
}
tr, td, th {
vertical-align: middle;
}
ul, ol {
margin: 0;
padding: 0;
list-style-type: none;
}
ul {
list-style-type: disc;
margin-bottom: 0.75em;
padding-left: 1.5em;
}
ol {
list-style-type: decimal;
margin-bottom: 0.75em;
padding-left: 1.5em;
}
dl {
margin-bottom: 0.75em;
}
dl dt {
font-weight: bold;
margin-top: 0.75em;
}
dl dd {
margin: 0;
}
button,
input[type="submit"] {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
border: none;
cursor: pointer;
user-select: none;
vertical-align: middle;
white-space: nowrap;
}
<h3>%default Ordered List</h3>
<ol class='default'>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
<h3>%default Unordered List</h3>
<ul class='default'>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment