| Index: packages/csslib/test/examples/skeleton.css
|
| diff --git a/packages/csslib/test/examples/skeleton.css b/packages/csslib/test/examples/skeleton.css
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..f28bf6c596e70b5adc60595fd61f99d9b08cdecf
|
| --- /dev/null
|
| +++ b/packages/csslib/test/examples/skeleton.css
|
| @@ -0,0 +1,418 @@
|
| +/*
|
| +* Skeleton V2.0.4
|
| +* Copyright 2014, Dave Gamache
|
| +* www.getskeleton.com
|
| +* Free to use under the MIT license.
|
| +* http://www.opensource.org/licenses/mit-license.php
|
| +* 12/29/2014
|
| +*/
|
| +
|
| +
|
| +/* Table of contents
|
| +––––––––––––––––––––––––––––––––––––––––––––––––––
|
| +- Grid
|
| +- Base Styles
|
| +- Typography
|
| +- Links
|
| +- Buttons
|
| +- Forms
|
| +- Lists
|
| +- Code
|
| +- Tables
|
| +- Spacing
|
| +- Utilities
|
| +- Clearing
|
| +- Media Queries
|
| +*/
|
| +
|
| +
|
| +/* Grid
|
| +–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
| +.container {
|
| + position: relative;
|
| + width: 100%;
|
| + max-width: 960px;
|
| + margin: 0 auto;
|
| + padding: 0 20px;
|
| + box-sizing: border-box; }
|
| +.column,
|
| +.columns {
|
| + width: 100%;
|
| + float: left;
|
| + box-sizing: border-box; }
|
| +
|
| +/* For devices larger than 400px */
|
| +@media (min-width: 400px) {
|
| + .container {
|
| + width: 85%;
|
| + padding: 0; }
|
| +}
|
| +
|
| +/* For devices larger than 550px */
|
| +@media (min-width: 550px) {
|
| + .container {
|
| + width: 80%; }
|
| + .column,
|
| + .columns {
|
| + margin-left: 4%; }
|
| + .column:first-child,
|
| + .columns:first-child {
|
| + margin-left: 0; }
|
| +
|
| + .one.column,
|
| + .one.columns { width: 4.66666666667%; }
|
| + .two.columns { width: 13.3333333333%; }
|
| + .three.columns { width: 22%; }
|
| + .four.columns { width: 30.6666666667%; }
|
| + .five.columns { width: 39.3333333333%; }
|
| + .six.columns { width: 48%; }
|
| + .seven.columns { width: 56.6666666667%; }
|
| + .eight.columns { width: 65.3333333333%; }
|
| + .nine.columns { width: 74.0%; }
|
| + .ten.columns { width: 82.6666666667%; }
|
| + .eleven.columns { width: 91.3333333333%; }
|
| + .twelve.columns { width: 100%; margin-left: 0; }
|
| +
|
| + .one-third.column { width: 30.6666666667%; }
|
| + .two-thirds.column { width: 65.3333333333%; }
|
| +
|
| + .one-half.column { width: 48%; }
|
| +
|
| + /* Offsets */
|
| + .offset-by-one.column,
|
| + .offset-by-one.columns { margin-left: 8.66666666667%; }
|
| + .offset-by-two.column,
|
| + .offset-by-two.columns { margin-left: 17.3333333333%; }
|
| + .offset-by-three.column,
|
| + .offset-by-three.columns { margin-left: 26%; }
|
| + .offset-by-four.column,
|
| + .offset-by-four.columns { margin-left: 34.6666666667%; }
|
| + .offset-by-five.column,
|
| + .offset-by-five.columns { margin-left: 43.3333333333%; }
|
| + .offset-by-six.column,
|
| + .offset-by-six.columns { margin-left: 52%; }
|
| + .offset-by-seven.column,
|
| + .offset-by-seven.columns { margin-left: 60.6666666667%; }
|
| + .offset-by-eight.column,
|
| + .offset-by-eight.columns { margin-left: 69.3333333333%; }
|
| + .offset-by-nine.column,
|
| + .offset-by-nine.columns { margin-left: 78.0%; }
|
| + .offset-by-ten.column,
|
| + .offset-by-ten.columns { margin-left: 86.6666666667%; }
|
| + .offset-by-eleven.column,
|
| + .offset-by-eleven.columns { margin-left: 95.3333333333%; }
|
| +
|
| + .offset-by-one-third.column,
|
| + .offset-by-one-third.columns { margin-left: 34.6666666667%; }
|
| + .offset-by-two-thirds.column,
|
| + .offset-by-two-thirds.columns { margin-left: 69.3333333333%; }
|
| +
|
| + .offset-by-one-half.column,
|
| + .offset-by-one-half.columns { margin-left: 52%; }
|
| +
|
| +}
|
| +
|
| +
|
| +/* Base Styles
|
| +–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
| +/* NOTE
|
| +html is set to 62.5% so that all the REM measurements throughout Skeleton
|
| +are based on 10px sizing. So basically 1.5rem = 15px :) */
|
| +html {
|
| + font-size: 62.5%; }
|
| +body {
|
| + font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
|
| + line-height: 1.6;
|
| + font-weight: 400;
|
| + font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
| + color: #222; }
|
| +
|
| +
|
| +/* Typography
|
| +–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
| +h1, h2, h3, h4, h5, h6 {
|
| + margin-top: 0;
|
| + margin-bottom: 2rem;
|
| + font-weight: 300; }
|
| +h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;}
|
| +h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
|
| +h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; }
|
| +h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
|
| +h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; }
|
| +h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; }
|
| +
|
| +/* Larger than phablet */
|
| +@media (min-width: 550px) {
|
| + h1 { font-size: 5.0rem; }
|
| + h2 { font-size: 4.2rem; }
|
| + h3 { font-size: 3.6rem; }
|
| + h4 { font-size: 3.0rem; }
|
| + h5 { font-size: 2.4rem; }
|
| + h6 { font-size: 1.5rem; }
|
| +}
|
| +
|
| +p {
|
| + margin-top: 0; }
|
| +
|
| +
|
| +/* Links
|
| +–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
| +a {
|
| + color: #1EAEDB; }
|
| +a:hover {
|
| + color: #0FA0CE; }
|
| +
|
| +
|
| +/* Buttons
|
| +–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
| +.button,
|
| +button,
|
| +input[type="submit"],
|
| +input[type="reset"],
|
| +input[type="button"] {
|
| + display: inline-block;
|
| + height: 38px;
|
| + padding: 0 30px;
|
| + color: #555;
|
| + text-align: center;
|
| + font-size: 11px;
|
| + font-weight: 600;
|
| + line-height: 38px;
|
| + letter-spacing: .1rem;
|
| + text-transform: uppercase;
|
| + text-decoration: none;
|
| + white-space: nowrap;
|
| + background-color: transparent;
|
| + border-radius: 4px;
|
| + border: 1px solid #bbb;
|
| + cursor: pointer;
|
| + box-sizing: border-box; }
|
| +.button:hover,
|
| +button:hover,
|
| +input[type="submit"]:hover,
|
| +input[type="reset"]:hover,
|
| +input[type="button"]:hover,
|
| +.button:focus,
|
| +button:focus,
|
| +input[type="submit"]:focus,
|
| +input[type="reset"]:focus,
|
| +input[type="button"]:focus {
|
| + color: #333;
|
| + border-color: #888;
|
| + outline: 0; }
|
| +.button.button-primary,
|
| +button.button-primary,
|
| +input[type="submit"].button-primary,
|
| +input[type="reset"].button-primary,
|
| +input[type="button"].button-primary {
|
| + color: #FFF;
|
| + background-color: #33C3F0;
|
| + border-color: #33C3F0; }
|
| +.button.button-primary:hover,
|
| +button.button-primary:hover,
|
| +input[type="submit"].button-primary:hover,
|
| +input[type="reset"].button-primary:hover,
|
| +input[type="button"].button-primary:hover,
|
| +.button.button-primary:focus,
|
| +button.button-primary:focus,
|
| +input[type="submit"].button-primary:focus,
|
| +input[type="reset"].button-primary:focus,
|
| +input[type="button"].button-primary:focus {
|
| + color: #FFF;
|
| + background-color: #1EAEDB;
|
| + border-color: #1EAEDB; }
|
| +
|
| +
|
| +/* Forms
|
| +–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
| +input[type="email"],
|
| +input[type="number"],
|
| +input[type="search"],
|
| +input[type="text"],
|
| +input[type="tel"],
|
| +input[type="url"],
|
| +input[type="password"],
|
| +textarea,
|
| +select {
|
| + height: 38px;
|
| + padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
|
| + background-color: #fff;
|
| + border: 1px solid #D1D1D1;
|
| + border-radius: 4px;
|
| + box-shadow: none;
|
| + box-sizing: border-box; }
|
| +/* Removes awkward default styles on some inputs for iOS */
|
| +input[type="email"],
|
| +input[type="number"],
|
| +input[type="search"],
|
| +input[type="text"],
|
| +input[type="tel"],
|
| +input[type="url"],
|
| +input[type="password"],
|
| +textarea {
|
| + -webkit-appearance: none;
|
| + -moz-appearance: none;
|
| + appearance: none; }
|
| +textarea {
|
| + min-height: 65px;
|
| + padding-top: 6px;
|
| + padding-bottom: 6px; }
|
| +input[type="email"]:focus,
|
| +input[type="number"]:focus,
|
| +input[type="search"]:focus,
|
| +input[type="text"]:focus,
|
| +input[type="tel"]:focus,
|
| +input[type="url"]:focus,
|
| +input[type="password"]:focus,
|
| +textarea:focus,
|
| +select:focus {
|
| + border: 1px solid #33C3F0;
|
| + outline: 0; }
|
| +label,
|
| +legend {
|
| + display: block;
|
| + margin-bottom: .5rem;
|
| + font-weight: 600; }
|
| +fieldset {
|
| + padding: 0;
|
| + border-width: 0; }
|
| +input[type="checkbox"],
|
| +input[type="radio"] {
|
| + display: inline; }
|
| +label > .label-body {
|
| + display: inline-block;
|
| + margin-left: .5rem;
|
| + font-weight: normal; }
|
| +
|
| +
|
| +/* Lists
|
| +–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
| +ul {
|
| + list-style: circle inside; }
|
| +ol {
|
| + list-style: decimal inside; }
|
| +ol, ul {
|
| + padding-left: 0;
|
| + margin-top: 0; }
|
| +ul ul,
|
| +ul ol,
|
| +ol ol,
|
| +ol ul {
|
| + margin: 1.5rem 0 1.5rem 3rem;
|
| + font-size: 90%; }
|
| +li {
|
| + margin-bottom: 1rem; }
|
| +
|
| +
|
| +/* Code
|
| +–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
| +code {
|
| + padding: .2rem .5rem;
|
| + margin: 0 .2rem;
|
| + font-size: 90%;
|
| + white-space: nowrap;
|
| + background: #F1F1F1;
|
| + border: 1px solid #E1E1E1;
|
| + border-radius: 4px; }
|
| +pre > code {
|
| + display: block;
|
| + padding: 1rem 1.5rem;
|
| + white-space: pre; }
|
| +
|
| +
|
| +/* Tables
|
| +–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
| +th,
|
| +td {
|
| + padding: 12px 15px;
|
| + text-align: left;
|
| + border-bottom: 1px solid #E1E1E1; }
|
| +th:first-child,
|
| +td:first-child {
|
| + padding-left: 0; }
|
| +th:last-child,
|
| +td:last-child {
|
| + padding-right: 0; }
|
| +
|
| +
|
| +/* Spacing
|
| +–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
| +button,
|
| +.button {
|
| + margin-bottom: 1rem; }
|
| +input,
|
| +textarea,
|
| +select,
|
| +fieldset {
|
| + margin-bottom: 1.5rem; }
|
| +pre,
|
| +blockquote,
|
| +dl,
|
| +figure,
|
| +table,
|
| +p,
|
| +ul,
|
| +ol,
|
| +form {
|
| + margin-bottom: 2.5rem; }
|
| +
|
| +
|
| +/* Utilities
|
| +–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
| +.u-full-width {
|
| + width: 100%;
|
| + box-sizing: border-box; }
|
| +.u-max-full-width {
|
| + max-width: 100%;
|
| + box-sizing: border-box; }
|
| +.u-pull-right {
|
| + float: right; }
|
| +.u-pull-left {
|
| + float: left; }
|
| +
|
| +
|
| +/* Misc
|
| +–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
| +hr {
|
| + margin-top: 3rem;
|
| + margin-bottom: 3.5rem;
|
| + border-width: 0;
|
| + border-top: 1px solid #E1E1E1; }
|
| +
|
| +
|
| +/* Clearing
|
| +–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
| +
|
| +/* Self Clearing Goodness */
|
| +.container:after,
|
| +.row:after,
|
| +.u-cf {
|
| + content: "";
|
| + display: table;
|
| + clear: both; }
|
| +
|
| +
|
| +/* Media Queries
|
| +–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
| +/*
|
| +Note: The best way to structure the use of media queries is to create the queries
|
| +near the relevant code. For example, if you wanted to change the styles for buttons
|
| +on small devices, paste the mobile query code up in the buttons section and style it
|
| +there.
|
| +*/
|
| +
|
| +
|
| +/* Larger than mobile */
|
| +@media (min-width: 400px) {}
|
| +
|
| +/* Larger than phablet (also point when grid becomes active) */
|
| +@media (min-width: 550px) {}
|
| +
|
| +/* Larger than tablet */
|
| +@media (min-width: 750px) {}
|
| +
|
| +/* Larger than desktop */
|
| +@media (min-width: 1000px) {}
|
| +
|
| +/* Larger than Desktop HD */
|
| +@media (min-width: 1200px) {}
|
|
|