Merge branch 'feature/improvements' into develop
This commit is contained in:
CJ Patoilo
commit
c5ee472409
200
dist/milligram.css
vendored
200
dist/milligram.css
vendored
@ -34,7 +34,7 @@ blockquote {
|
|||||||
}
|
}
|
||||||
|
|
||||||
blockquote *:last-child {
|
blockquote *:last-child {
|
||||||
margin: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button,
|
.button,
|
||||||
@ -60,51 +60,39 @@ input[type='submit'] {
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button:hover, .button:focus,
|
.button:focus, .button:hover,
|
||||||
button:hover,
|
|
||||||
button:focus,
|
button:focus,
|
||||||
input[type='button']:hover,
|
button:hover,
|
||||||
input[type='button']:focus,
|
input[type='button']:focus,
|
||||||
input[type='reset']:hover,
|
input[type='button']:hover,
|
||||||
input[type='reset']:focus,
|
input[type='reset']:focus,
|
||||||
input[type='submit']:hover,
|
input[type='reset']:hover,
|
||||||
input[type='submit']:focus {
|
input[type='submit']:focus,
|
||||||
|
input[type='submit']:hover {
|
||||||
background-color: #606c76;
|
background-color: #606c76;
|
||||||
border-color: #606c76;
|
border-color: #606c76;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button.button-disabled, .button[disabled],
|
.button[disabled],
|
||||||
button.button-disabled,
|
|
||||||
button[disabled],
|
button[disabled],
|
||||||
input[type='button'].button-disabled,
|
|
||||||
input[type='button'][disabled],
|
input[type='button'][disabled],
|
||||||
input[type='reset'].button-disabled,
|
|
||||||
input[type='reset'][disabled],
|
input[type='reset'][disabled],
|
||||||
input[type='submit'].button-disabled,
|
|
||||||
input[type='submit'][disabled] {
|
input[type='submit'][disabled] {
|
||||||
opacity: .5;
|
opacity: .5;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button.button-disabled:hover, .button.button-disabled:focus, .button[disabled]:hover, .button[disabled]:focus,
|
.button[disabled]:focus, .button[disabled]:hover,
|
||||||
button.button-disabled:hover,
|
|
||||||
button.button-disabled:focus,
|
|
||||||
button[disabled]:hover,
|
|
||||||
button[disabled]:focus,
|
button[disabled]:focus,
|
||||||
input[type='button'].button-disabled:hover,
|
button[disabled]:hover,
|
||||||
input[type='button'].button-disabled:focus,
|
|
||||||
input[type='button'][disabled]:hover,
|
|
||||||
input[type='button'][disabled]:focus,
|
input[type='button'][disabled]:focus,
|
||||||
input[type='reset'].button-disabled:hover,
|
input[type='button'][disabled]:hover,
|
||||||
input[type='reset'].button-disabled:focus,
|
|
||||||
input[type='reset'][disabled]:hover,
|
|
||||||
input[type='reset'][disabled]:focus,
|
input[type='reset'][disabled]:focus,
|
||||||
input[type='submit'].button-disabled:hover,
|
input[type='reset'][disabled]:hover,
|
||||||
input[type='submit'].button-disabled:focus,
|
input[type='submit'][disabled]:focus,
|
||||||
input[type='submit'][disabled]:hover,
|
input[type='submit'][disabled]:hover {
|
||||||
input[type='submit'][disabled]:focus {
|
|
||||||
background-color: #9b4dca;
|
background-color: #9b4dca;
|
||||||
border-color: #9b4dca;
|
border-color: #9b4dca;
|
||||||
}
|
}
|
||||||
@ -118,37 +106,29 @@ input[type='submit'].button-outline {
|
|||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button.button-outline:hover, .button.button-outline:focus,
|
.button.button-outline:focus, .button.button-outline:hover,
|
||||||
button.button-outline:hover,
|
|
||||||
button.button-outline:focus,
|
button.button-outline:focus,
|
||||||
input[type='button'].button-outline:hover,
|
button.button-outline:hover,
|
||||||
input[type='button'].button-outline:focus,
|
input[type='button'].button-outline:focus,
|
||||||
input[type='reset'].button-outline:hover,
|
input[type='button'].button-outline:hover,
|
||||||
input[type='reset'].button-outline:focus,
|
input[type='reset'].button-outline:focus,
|
||||||
input[type='submit'].button-outline:hover,
|
input[type='reset'].button-outline:hover,
|
||||||
input[type='submit'].button-outline:focus {
|
input[type='submit'].button-outline:focus,
|
||||||
|
input[type='submit'].button-outline:hover {
|
||||||
color: #606c76;
|
color: #606c76;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border-color: #606c76;
|
border-color: #606c76;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button.button-outline.button-disabled:hover, .button.button-outline.button-disabled:focus, .button.button-outline[disabled]:hover, .button.button-outline[disabled]:focus,
|
.button.button-outline[disabled]:focus, .button.button-outline[disabled]:hover,
|
||||||
button.button-outline.button-disabled:hover,
|
|
||||||
button.button-outline.button-disabled:focus,
|
|
||||||
button.button-outline[disabled]:hover,
|
|
||||||
button.button-outline[disabled]:focus,
|
button.button-outline[disabled]:focus,
|
||||||
input[type='button'].button-outline.button-disabled:hover,
|
button.button-outline[disabled]:hover,
|
||||||
input[type='button'].button-outline.button-disabled:focus,
|
|
||||||
input[type='button'].button-outline[disabled]:hover,
|
|
||||||
input[type='button'].button-outline[disabled]:focus,
|
input[type='button'].button-outline[disabled]:focus,
|
||||||
input[type='reset'].button-outline.button-disabled:hover,
|
input[type='button'].button-outline[disabled]:hover,
|
||||||
input[type='reset'].button-outline.button-disabled:focus,
|
|
||||||
input[type='reset'].button-outline[disabled]:hover,
|
|
||||||
input[type='reset'].button-outline[disabled]:focus,
|
input[type='reset'].button-outline[disabled]:focus,
|
||||||
input[type='submit'].button-outline.button-disabled:hover,
|
input[type='reset'].button-outline[disabled]:hover,
|
||||||
input[type='submit'].button-outline.button-disabled:focus,
|
input[type='submit'].button-outline[disabled]:focus,
|
||||||
input[type='submit'].button-outline[disabled]:hover,
|
input[type='submit'].button-outline[disabled]:hover {
|
||||||
input[type='submit'].button-outline[disabled]:focus {
|
|
||||||
color: #9b4dca;
|
color: #9b4dca;
|
||||||
border-color: inherit;
|
border-color: inherit;
|
||||||
}
|
}
|
||||||
@ -163,37 +143,29 @@ input[type='submit'].button-clear {
|
|||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button.button-clear:hover, .button.button-clear:focus,
|
.button.button-clear:focus, .button.button-clear:hover,
|
||||||
button.button-clear:hover,
|
|
||||||
button.button-clear:focus,
|
button.button-clear:focus,
|
||||||
input[type='button'].button-clear:hover,
|
button.button-clear:hover,
|
||||||
input[type='button'].button-clear:focus,
|
input[type='button'].button-clear:focus,
|
||||||
input[type='reset'].button-clear:hover,
|
input[type='button'].button-clear:hover,
|
||||||
input[type='reset'].button-clear:focus,
|
input[type='reset'].button-clear:focus,
|
||||||
input[type='submit'].button-clear:hover,
|
input[type='reset'].button-clear:hover,
|
||||||
input[type='submit'].button-clear:focus {
|
input[type='submit'].button-clear:focus,
|
||||||
|
input[type='submit'].button-clear:hover {
|
||||||
color: #606c76;
|
color: #606c76;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button.button-clear.button-disabled:hover, .button.button-clear.button-disabled:focus, .button.button-clear[disabled]:hover, .button.button-clear[disabled]:focus,
|
.button.button-clear[disabled]:focus, .button.button-clear[disabled]:hover,
|
||||||
button.button-clear.button-disabled:hover,
|
|
||||||
button.button-clear.button-disabled:focus,
|
|
||||||
button.button-clear[disabled]:hover,
|
|
||||||
button.button-clear[disabled]:focus,
|
button.button-clear[disabled]:focus,
|
||||||
input[type='button'].button-clear.button-disabled:hover,
|
button.button-clear[disabled]:hover,
|
||||||
input[type='button'].button-clear.button-disabled:focus,
|
|
||||||
input[type='button'].button-clear[disabled]:hover,
|
|
||||||
input[type='button'].button-clear[disabled]:focus,
|
input[type='button'].button-clear[disabled]:focus,
|
||||||
input[type='reset'].button-clear.button-disabled:hover,
|
input[type='button'].button-clear[disabled]:hover,
|
||||||
input[type='reset'].button-clear.button-disabled:focus,
|
|
||||||
input[type='reset'].button-clear[disabled]:hover,
|
|
||||||
input[type='reset'].button-clear[disabled]:focus,
|
input[type='reset'].button-clear[disabled]:focus,
|
||||||
input[type='submit'].button-clear.button-disabled:hover,
|
input[type='reset'].button-clear[disabled]:hover,
|
||||||
input[type='submit'].button-clear.button-disabled:focus,
|
input[type='submit'].button-clear[disabled]:focus,
|
||||||
input[type='submit'].button-clear[disabled]:hover,
|
input[type='submit'].button-clear[disabled]:hover {
|
||||||
input[type='submit'].button-clear[disabled]:focus {
|
|
||||||
color: #9b4dca;
|
color: #9b4dca;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -201,8 +173,8 @@ code {
|
|||||||
background: #f4f5f6;
|
background: #f4f5f6;
|
||||||
border-radius: .4rem;
|
border-radius: .4rem;
|
||||||
font-size: 86%;
|
font-size: 86%;
|
||||||
padding: .2rem .5rem;
|
|
||||||
margin: 0 .2rem;
|
margin: 0 .2rem;
|
||||||
|
padding: .2rem .5rem;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -262,25 +234,25 @@ select:focus {
|
|||||||
}
|
}
|
||||||
|
|
||||||
select {
|
select {
|
||||||
padding: 0.6rem 3rem 0.6rem 1rem;
|
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="#d1d1d1" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>') center right no-repeat;
|
||||||
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAyOSAxNCIgd2lkdGg9IjI5Ij48cGF0aCBmaWxsPSIjZDFkMWQxIiBkPSJNOS40IDMuNmw1IDcgNS4yLTciLz48L3N2Zz4=) center right no-repeat;
|
padding-right: 3.0rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
select:focus {
|
select:focus {
|
||||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAyOSAxNCIgd2lkdGg9IjI5Ij48cGF0aCBmaWxsPSIjOWI0ZGNmIiBkPSJNMTkuNiAzLjZIOS40bDUgNyIvPjwvc3ZnPg==);
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="#9b4dca" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>');
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
|
min-height: 6.5rem;
|
||||||
padding-bottom: .6rem;
|
padding-bottom: .6rem;
|
||||||
padding-top: .6rem;
|
padding-top: .6rem;
|
||||||
min-height: 6.5rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
label,
|
label,
|
||||||
legend {
|
legend {
|
||||||
|
display: block;
|
||||||
font-size: 1.6rem;
|
font-size: 1.6rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
display: block;
|
|
||||||
margin-bottom: .5rem;
|
margin-bottom: .5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -295,8 +267,8 @@ input[type='radio'] {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.label-inline {
|
.label-inline {
|
||||||
font-weight: normal;
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
font-weight: normal;
|
||||||
margin-left: .5rem;
|
margin-left: .5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -315,10 +287,6 @@ input[type='radio'] {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row.row-wrap {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row.row-no-padding {
|
.row.row-no-padding {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
@ -327,6 +295,10 @@ input[type='radio'] {
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.row.row-wrap {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
.row.row-top {
|
.row.row-top {
|
||||||
-ms-grid-row-align: flex-start;
|
-ms-grid-row-align: flex-start;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
@ -463,7 +435,7 @@ input[type='radio'] {
|
|||||||
max-width: 90%;
|
max-width: 90%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 40rem) {
|
@media (min-width: 640px) {
|
||||||
.row {
|
.row {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
margin-left: -1.0rem;
|
margin-left: -1.0rem;
|
||||||
@ -492,14 +464,14 @@ ul {
|
|||||||
}
|
}
|
||||||
|
|
||||||
dl dl,
|
dl dl,
|
||||||
dl ul,
|
|
||||||
dl ol,
|
dl ol,
|
||||||
|
dl ul,
|
||||||
ol dl,
|
ol dl,
|
||||||
ol ul,
|
|
||||||
ol ol,
|
ol ol,
|
||||||
|
ol ul,
|
||||||
ul dl,
|
ul dl,
|
||||||
ul ul,
|
ul ol,
|
||||||
ul ol {
|
ul ul {
|
||||||
font-size: 90%;
|
font-size: 90%;
|
||||||
margin: 1.5rem 0 1.5rem 3.0rem;
|
margin: 1.5rem 0 1.5rem 3.0rem;
|
||||||
}
|
}
|
||||||
@ -508,41 +480,41 @@ dl {
|
|||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style: circle inside;
|
|
||||||
}
|
|
||||||
|
|
||||||
ol {
|
ol {
|
||||||
list-style: decimal inside;
|
list-style: decimal inside;
|
||||||
}
|
}
|
||||||
|
|
||||||
dt,
|
ul {
|
||||||
|
list-style: circle inside;
|
||||||
|
}
|
||||||
|
|
||||||
dd,
|
dd,
|
||||||
|
dt,
|
||||||
li {
|
li {
|
||||||
margin-bottom: 1.0rem;
|
margin-bottom: 1.0rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button,
|
button,
|
||||||
button {
|
.button {
|
||||||
margin-bottom: 1.0rem;
|
margin-bottom: 1.0rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
fieldset,
|
||||||
input,
|
input,
|
||||||
textarea,
|
|
||||||
select,
|
select,
|
||||||
fieldset {
|
textarea {
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre,
|
|
||||||
blockquote,
|
blockquote,
|
||||||
dl,
|
dl,
|
||||||
figure,
|
figure,
|
||||||
table,
|
form,
|
||||||
p,
|
|
||||||
ul,
|
|
||||||
ol,
|
ol,
|
||||||
form {
|
p,
|
||||||
|
pre,
|
||||||
|
table,
|
||||||
|
ul {
|
||||||
margin-bottom: 2.5rem;
|
margin-bottom: 2.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -550,20 +522,20 @@ table {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
th,
|
td,
|
||||||
td {
|
th {
|
||||||
border-bottom: .1rem solid #e1e1e1;
|
border-bottom: 0.1rem solid #f4f5f6;
|
||||||
padding: 1.2rem 1.5rem;
|
padding: 1.2rem 1.5rem;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
th:first-child,
|
td:first-child,
|
||||||
td:first-child {
|
th:first-child {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
th:last-child,
|
td:last-child,
|
||||||
td:last-child {
|
th:last-child {
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -618,7 +590,7 @@ h6 {
|
|||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 40rem) {
|
@media (min-width: 640px) {
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 5.0rem;
|
font-size: 5.0rem;
|
||||||
}
|
}
|
||||||
@ -643,25 +615,25 @@ img {
|
|||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.float-right {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.float-left {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.clearfix {
|
.clearfix {
|
||||||
*zoom: 1;
|
*zoom: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.clearfix:after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
.clearfix:after, .clearfix:before {
|
.clearfix:after, .clearfix:before {
|
||||||
content: '';
|
content: '';
|
||||||
display: table;
|
display: table;
|
||||||
}
|
}
|
||||||
|
|
||||||
.clearfix:after {
|
.float-left {
|
||||||
clear: both;
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.float-right {
|
||||||
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*# sourceMappingURL=milligram.css.map */
|
/*# sourceMappingURL=milligram.css.map */
|
||||||
2
dist/milligram.css.map
vendored
2
dist/milligram.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/milligram.min.css
vendored
2
dist/milligram.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/milligram.min.css.map
vendored
2
dist/milligram.min.css.map
vendored
File diff suppressed because one or more lines are too long
@ -53,8 +53,7 @@
|
|||||||
"node-sass": "^3.7.0",
|
"node-sass": "^3.7.0",
|
||||||
"npm-run-all": "^2.1.1",
|
"npm-run-all": "^2.1.1",
|
||||||
"onchange": "^2.4.0",
|
"onchange": "^2.4.0",
|
||||||
"postcss-cli": "^2.5.2",
|
"postcss-cli": "^2.5.2"
|
||||||
"slimerjs": "^0.906.2"
|
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": "^6.0.0"
|
"node": "^6.0.0"
|
||||||
|
|||||||
@ -12,7 +12,7 @@ html
|
|||||||
body
|
body
|
||||||
color: $color-secondary
|
color: $color-secondary
|
||||||
font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif
|
font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif
|
||||||
font-size: 1.6em // currently ems cause chrome bug misinterpreting rems on body element
|
font-size: 1.6em // Currently ems cause chrome bug misinterpreting rems on body element
|
||||||
font-weight: 300
|
font-weight: 300
|
||||||
letter-spacing: .01em
|
letter-spacing: .01em
|
||||||
line-height: 1.6
|
line-height: 1.6
|
||||||
|
|||||||
@ -3,10 +3,10 @@
|
|||||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||||
|
|
||||||
blockquote
|
blockquote
|
||||||
border-left: 0.3rem solid $color-quaternary
|
border-left: .3rem solid $color-quaternary
|
||||||
margin-left: 0
|
margin-left: 0
|
||||||
margin-right: 0
|
margin-right: 0
|
||||||
padding: 1rem 1.5rem
|
padding: 1rem 1.5rem
|
||||||
|
|
||||||
& *:last-child
|
*:last-child
|
||||||
margin: 0
|
margin-bottom: 0
|
||||||
|
|||||||
@ -24,20 +24,19 @@ input[type='submit']
|
|||||||
text-transform: uppercase
|
text-transform: uppercase
|
||||||
white-space: nowrap
|
white-space: nowrap
|
||||||
|
|
||||||
&:hover,
|
&:focus,
|
||||||
&:focus
|
&:hover
|
||||||
background-color: $color-secondary
|
background-color: $color-secondary
|
||||||
border-color: $color-secondary
|
border-color: $color-secondary
|
||||||
color: $color-initial
|
color: $color-initial
|
||||||
outline: 0
|
outline: 0
|
||||||
|
|
||||||
&.button-disabled,
|
|
||||||
&[disabled]
|
&[disabled]
|
||||||
opacity: .5
|
opacity: .5
|
||||||
cursor: default
|
cursor: default
|
||||||
|
|
||||||
&:hover,
|
&:focus,
|
||||||
&:focus
|
&:hover
|
||||||
background-color: $color-primary
|
background-color: $color-primary
|
||||||
border-color: $color-primary
|
border-color: $color-primary
|
||||||
|
|
||||||
@ -45,17 +44,16 @@ input[type='submit']
|
|||||||
color: $color-primary
|
color: $color-primary
|
||||||
background-color: transparent
|
background-color: transparent
|
||||||
|
|
||||||
&:hover,
|
&:focus,
|
||||||
&:focus
|
&:hover
|
||||||
color: $color-secondary
|
color: $color-secondary
|
||||||
background-color: transparent
|
background-color: transparent
|
||||||
border-color: $color-secondary
|
border-color: $color-secondary
|
||||||
|
|
||||||
&.button-disabled,
|
|
||||||
&[disabled]
|
&[disabled]
|
||||||
|
|
||||||
&:hover,
|
&:focus,
|
||||||
&:focus
|
&:hover
|
||||||
color: $color-primary
|
color: $color-primary
|
||||||
border-color: inherit
|
border-color: inherit
|
||||||
|
|
||||||
@ -64,15 +62,14 @@ input[type='submit']
|
|||||||
background-color: transparent
|
background-color: transparent
|
||||||
border-color: transparent
|
border-color: transparent
|
||||||
|
|
||||||
&:hover,
|
&:focus,
|
||||||
&:focus
|
&:hover
|
||||||
color: $color-secondary
|
color: $color-secondary
|
||||||
background-color: transparent
|
background-color: transparent
|
||||||
border-color: transparent
|
border-color: transparent
|
||||||
|
|
||||||
&.button-disabled,
|
|
||||||
&[disabled]
|
&[disabled]
|
||||||
|
|
||||||
&:hover,
|
&:focus,
|
||||||
&:focus
|
&:hover
|
||||||
color: $color-primary
|
color: $color-primary
|
||||||
|
|||||||
@ -6,8 +6,8 @@ code
|
|||||||
background: $color-tertiary
|
background: $color-tertiary
|
||||||
border-radius: .4rem
|
border-radius: .4rem
|
||||||
font-size: 86%
|
font-size: 86%
|
||||||
padding: .2rem .5rem
|
|
||||||
margin: 0 .2rem
|
margin: 0 .2rem
|
||||||
|
padding: .2rem .5rem
|
||||||
white-space: nowrap
|
white-space: nowrap
|
||||||
|
|
||||||
pre
|
pre
|
||||||
|
|||||||
@ -25,22 +25,22 @@ select
|
|||||||
outline: 0
|
outline: 0
|
||||||
|
|
||||||
select
|
select
|
||||||
padding: 0.6rem 3rem 0.6rem 1rem
|
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="#d1d1d1" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>') center right no-repeat
|
||||||
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAyOSAxNCIgd2lkdGg9IjI5Ij48cGF0aCBmaWxsPSIjZDFkMWQxIiBkPSJNOS40IDMuNmw1IDcgNS4yLTciLz48L3N2Zz4=) center right no-repeat
|
padding-right: 3.0rem
|
||||||
|
|
||||||
&:focus
|
&:focus
|
||||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAyOSAxNCIgd2lkdGg9IjI5Ij48cGF0aCBmaWxsPSIjOWI0ZGNmIiBkPSJNMTkuNiAzLjZIOS40bDUgNyIvPjwvc3ZnPg==)
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="#9b4dca" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>')
|
||||||
|
|
||||||
textarea
|
textarea
|
||||||
|
min-height: 6.5rem
|
||||||
padding-bottom: .6rem
|
padding-bottom: .6rem
|
||||||
padding-top: .6rem
|
padding-top: .6rem
|
||||||
min-height: 6.5rem
|
|
||||||
|
|
||||||
label,
|
label,
|
||||||
legend
|
legend
|
||||||
|
display: block
|
||||||
font-size: 1.6rem
|
font-size: 1.6rem
|
||||||
font-weight: 700
|
font-weight: 700
|
||||||
display: block
|
|
||||||
margin-bottom: .5rem
|
margin-bottom: .5rem
|
||||||
|
|
||||||
fieldset
|
fieldset
|
||||||
@ -52,6 +52,6 @@ input[type='radio']
|
|||||||
display: inline
|
display: inline
|
||||||
|
|
||||||
.label-inline
|
.label-inline
|
||||||
font-weight: normal
|
|
||||||
display: inline-block
|
display: inline-block
|
||||||
|
font-weight: normal
|
||||||
margin-left: .5rem
|
margin-left: .5rem
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
// Grid
|
// Grid
|
||||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||||
|
|
||||||
// .container is main centered wrapper with a max width of 1120rem (1120px)
|
// .container is main centered wrapper with a max width of 112.0rem (1120px)
|
||||||
.container
|
.container
|
||||||
margin: 0 auto
|
margin: 0 auto
|
||||||
max-width: 112.0rem
|
max-width: 112.0rem
|
||||||
@ -21,18 +21,14 @@
|
|||||||
padding: 0
|
padding: 0
|
||||||
width: 100%
|
width: 100%
|
||||||
|
|
||||||
&.row-wrap
|
|
||||||
flex-wrap: wrap
|
|
||||||
|
|
||||||
&.row-no-padding
|
&.row-no-padding
|
||||||
padding: 0
|
padding: 0
|
||||||
|
|
||||||
&> .column
|
&> .column
|
||||||
padding: 0
|
padding: 0
|
||||||
|
|
||||||
// & + .row
|
&.row-wrap
|
||||||
// margin-top: -.5rem
|
flex-wrap: wrap
|
||||||
// padding-top: 0
|
|
||||||
|
|
||||||
// Vertically Align Columns
|
// Vertically Align Columns
|
||||||
// .row-* vertically aligns every .col in the .row
|
// .row-* vertically aligns every .col in the .row
|
||||||
@ -131,7 +127,8 @@
|
|||||||
flex: 0 0 60%
|
flex: 0 0 60%
|
||||||
max-width: 60%
|
max-width: 60%
|
||||||
|
|
||||||
&.column-66, &.column-67
|
&.column-66,
|
||||||
|
&.column-67
|
||||||
flex: 0 0 66.6666%
|
flex: 0 0 66.6666%
|
||||||
max-width: 66.6666%
|
max-width: 66.6666%
|
||||||
|
|
||||||
@ -148,7 +145,7 @@
|
|||||||
max-width: 90%
|
max-width: 90%
|
||||||
|
|
||||||
// Larger than mobile screen
|
// Larger than mobile screen
|
||||||
@media (min-width: 40.0rem)
|
@media (min-width: 640px)
|
||||||
|
|
||||||
.row
|
.row
|
||||||
flex-direction: row
|
flex-direction: row
|
||||||
|
|||||||
@ -9,21 +9,21 @@ ul
|
|||||||
padding-left: 0
|
padding-left: 0
|
||||||
|
|
||||||
dl,
|
dl,
|
||||||
ul,
|
ol,
|
||||||
ol
|
ul
|
||||||
font-size: 90%
|
font-size: 90%
|
||||||
margin: 1.5rem 0 1.5rem 3.0rem
|
margin: 1.5rem 0 1.5rem 3.0rem
|
||||||
|
|
||||||
dl
|
dl
|
||||||
list-style: none
|
list-style: none
|
||||||
|
|
||||||
ul
|
|
||||||
list-style: circle inside
|
|
||||||
|
|
||||||
ol
|
ol
|
||||||
list-style: decimal inside
|
list-style: decimal inside
|
||||||
|
|
||||||
dt,
|
ul
|
||||||
|
list-style: circle inside
|
||||||
|
|
||||||
dd,
|
dd,
|
||||||
|
dt,
|
||||||
li
|
li
|
||||||
margin-bottom: 1.0rem
|
margin-bottom: 1.0rem
|
||||||
|
|||||||
@ -2,23 +2,23 @@
|
|||||||
// Spacing
|
// Spacing
|
||||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||||
|
|
||||||
.button,
|
button,
|
||||||
button
|
.button
|
||||||
margin-bottom: 1.0rem
|
margin-bottom: 1.0rem
|
||||||
|
|
||||||
|
fieldset,
|
||||||
input,
|
input,
|
||||||
textarea,
|
|
||||||
select,
|
select,
|
||||||
fieldset
|
textarea
|
||||||
margin-bottom: 1.5rem
|
margin-bottom: 1.5rem
|
||||||
|
|
||||||
pre,
|
|
||||||
blockquote,
|
blockquote,
|
||||||
dl,
|
dl,
|
||||||
figure,
|
figure,
|
||||||
table,
|
form,
|
||||||
p,
|
|
||||||
ul,
|
|
||||||
ol,
|
ol,
|
||||||
form
|
p,
|
||||||
|
pre,
|
||||||
|
table,
|
||||||
|
ul
|
||||||
margin-bottom: 2.5rem
|
margin-bottom: 2.5rem
|
||||||
|
|||||||
@ -5,9 +5,9 @@
|
|||||||
table
|
table
|
||||||
width: 100%
|
width: 100%
|
||||||
|
|
||||||
th,
|
td,
|
||||||
td
|
th
|
||||||
border-bottom: .1rem solid #e1e1e1
|
border-bottom: .1rem solid $color-tertiary
|
||||||
padding: 1.2rem 1.5rem
|
padding: 1.2rem 1.5rem
|
||||||
text-align: left
|
text-align: left
|
||||||
|
|
||||||
|
|||||||
@ -46,7 +46,7 @@ h6
|
|||||||
line-height: 1.4
|
line-height: 1.4
|
||||||
|
|
||||||
// Larger than mobile screen
|
// Larger than mobile screen
|
||||||
@media (min-width: 40.0rem)
|
@media (min-width: 640px)
|
||||||
|
|
||||||
h1
|
h1
|
||||||
font-size: 5.0rem
|
font-size: 5.0rem
|
||||||
|
|||||||
@ -2,21 +2,21 @@
|
|||||||
// Utility
|
// Utility
|
||||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||||
|
|
||||||
// Float either direction
|
|
||||||
.float-right
|
|
||||||
float: right
|
|
||||||
|
|
||||||
.float-left
|
|
||||||
float: left
|
|
||||||
|
|
||||||
// Clear a float with .clearfix
|
// Clear a float with .clearfix
|
||||||
.clearfix
|
.clearfix
|
||||||
*zoom: 1
|
*zoom: 1
|
||||||
|
|
||||||
|
&:after
|
||||||
|
clear: both
|
||||||
|
|
||||||
&:after,
|
&:after,
|
||||||
&:before
|
&:before
|
||||||
content: ''
|
content: ''
|
||||||
display: table
|
display: table
|
||||||
|
|
||||||
&:after
|
// Float either direction
|
||||||
clear: both
|
.float-left
|
||||||
|
float: left
|
||||||
|
|
||||||
|
.float-right
|
||||||
|
float: right
|
||||||
|
|||||||
458
test/index.html
458
test/index.html
@ -16,9 +16,15 @@
|
|||||||
|
|
||||||
<main class="wrapper">
|
<main class="wrapper">
|
||||||
|
|
||||||
|
<section class="container" id="image">
|
||||||
|
<img src="https://raw.githubusercontent.com/milligram/milligram.github.io/master/img/thumbnail.jpg" alt="Image">
|
||||||
|
</section>
|
||||||
|
|
||||||
<section class="container" id="typography">
|
<section class="container" id="typography">
|
||||||
<h5 class="title">Typography</h5>
|
<h5 class="title">Typography</h5>
|
||||||
<div class="example">
|
<div class="example">
|
||||||
|
<div class="row">
|
||||||
|
<div class="column">
|
||||||
<h1>Heading<span class="heading-font-size"> <code><h1></code> 5.0rem (50px)</span></h1>
|
<h1>Heading<span class="heading-font-size"> <code><h1></code> 5.0rem (50px)</span></h1>
|
||||||
<h2>Heading<span class="heading-font-size"> <code><h2></code> 4.2rem (42px)</span></h2>
|
<h2>Heading<span class="heading-font-size"> <code><h2></code> 4.2rem (42px)</span></h2>
|
||||||
<h3>Heading<span class="heading-font-size"> <code><h3></code> 3.6rem (36px)</span></h3>
|
<h3>Heading<span class="heading-font-size"> <code><h3></code> 3.6rem (36px)</span></h3>
|
||||||
@ -26,27 +32,87 @@
|
|||||||
<h5>Heading<span class="heading-font-size"> <code><h5></code> 2.4rem (24px)</span></h5>
|
<h5>Heading<span class="heading-font-size"> <code><h5></code> 2.4rem (24px)</span></h5>
|
||||||
<h6>Heading<span class="heading-font-size"> <code><h6></code> 1.5rem (15px)</span></h6>
|
<h6>Heading<span class="heading-font-size"> <code><h6></code> 1.5rem (15px)</span></h6>
|
||||||
</div>
|
</div>
|
||||||
<p>See more examples of <strong>typography</strong> <a href="typography.html" title="Examples about typography">here</a>.</p>
|
<div class="column">
|
||||||
|
<p>Lorem ipsum dolor sit amet, <u>consectetur adipisicing elit</u>.</p>
|
||||||
|
<p>Obcaecati <s>error</s> a, quas fugit hic, <a href="#">accusantium</a> autem <i>necessitatibus praesentium</i> placeat, iusto et <b>soluta expedita</b>! Quisquam repellendus <small>voluptatem</small>, <mark>tempora iste culpa fuga</mark>, <time>on April 29</time>!</p>
|
||||||
|
<p>Quisquam nobis, ad. Iusto, <strong>repudiandae</strong>. Autem ipsa blanditiis, quae, fugit nobis <em>perspiciatis in beatae vitae</em> numquam illo, architecto hic dolor <q>molestiae aliquid</q>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="container" id="blockquotes">
|
<section class="container" id="blockquotes">
|
||||||
<h5 class="title">Blockquotes</h5>
|
<h5 class="title">Blockquotes</h5>
|
||||||
<div class="example">
|
<div class="example">
|
||||||
|
<div class="row">
|
||||||
|
<div class="column">
|
||||||
|
<p><q>Yeah!! Milligram is amazing.</q></p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
<blockquote>
|
<blockquote>
|
||||||
<p><em>Yeah!! Milligram is amazing.</em></p>
|
<p><em>Yeah!! Milligram is amazing.</em></p>
|
||||||
</blockquote>
|
</blockquote>
|
||||||
</div>
|
</div>
|
||||||
<p>See more examples of <strong>blockquotes</strong> <a href="blockquotes.html" title="Examples about blockquotes">here</a>.</p>
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="container" id="buttons">
|
<section class="container" id="buttons">
|
||||||
<h5 class="title">Buttons</h5>
|
<h5 class="title">Buttons</h5>
|
||||||
<div class="example">
|
<div class="example">
|
||||||
|
<div class="row">
|
||||||
|
<div class="column">
|
||||||
<a class="button" href="javascript: void(0)">Default Button</a>
|
<a class="button" href="javascript: void(0)">Default Button</a>
|
||||||
<button class="button button-outline">Outlined Button</button>
|
<a class="button button-outline" href="javascript: void(0)">Outlined Button</a>
|
||||||
<input class="button button-clear" type="submit" value="Clear Button">
|
<a class="button button-clear" href="javascript: void(0)">Clear Button</a>
|
||||||
|
<a class="button" disabled href="javascript: void(0)">Default Button</a>
|
||||||
|
<a class="button button-outline" disabled href="javascript: void(0)">Outlined Button</a>
|
||||||
|
<a class="button button-clear" disabled href="javascript: void(0)">Clear Button</a>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<button class="button">Default Button</button>
|
||||||
|
<button class="button button-outline">Outlined Button</button>
|
||||||
|
<button class="button button-clear">Clear Button</button>
|
||||||
|
<button class="button" disabled>Default Button</button>
|
||||||
|
<button class="button button-outline" disabled>Outlined Button</button>
|
||||||
|
<button class="button button-clear" disabled>Clear Button</button>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<input class="button" type="submit" value="Default Button">
|
||||||
|
<input class="button button-outline" type="submit" value="Outlined Button">
|
||||||
|
<input class="button button-clear" type="submit" value="Clear Button">
|
||||||
|
<input class="button" disabled type="submit" value="Default Button">
|
||||||
|
<input class="button button-outline" disabled type="submit" value="Outlined Button">
|
||||||
|
<input class="button button-clear" disabled type="submit" value="Clear Button">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column">
|
||||||
|
<input class="button" type="reset" value="Default Button">
|
||||||
|
<input class="button button-outline" type="reset" value="Outlined Button">
|
||||||
|
<input class="button button-clear" type="reset" value="Clear Button">
|
||||||
|
<input class="button" disabled type="reset" value="Default Button">
|
||||||
|
<input class="button button-outline" disabled type="reset" value="Outlined Button">
|
||||||
|
<input class="button button-clear" disabled type="reset" value="Clear Button">
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<input class="button" type="button" value="Default Button">
|
||||||
|
<input class="button button-outline" type="button" value="Outlined Button">
|
||||||
|
<input class="button button-clear" type="button" value="Clear Button">
|
||||||
|
<input class="button" disabled type="button" value="Default Button">
|
||||||
|
<input class="button button-outline" disabled type="button" value="Outlined Button">
|
||||||
|
<input class="button button-clear" disabled type="button" value="Clear Button">
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<div class="button">Default Button</div>
|
||||||
|
<div class="button button-outline">Outlined Button</div>
|
||||||
|
<div class="button button-clear">Clear Button</div>
|
||||||
|
<div class="button" disabled>Default Button</div>
|
||||||
|
<div class="button button-outline" disabled>Outlined Button</div>
|
||||||
|
<div class="button button-clear" disabled>Clear Button</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p>See more examples of <strong>buttons</strong> <a href="buttons.html" title="Examples about buttons">here</a>.</p>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="container" id="lists">
|
<section class="container" id="lists">
|
||||||
@ -57,43 +123,120 @@
|
|||||||
<ul>
|
<ul>
|
||||||
<li>Unordered list item 1</li>
|
<li>Unordered list item 1</li>
|
||||||
<li>Unordered list item 2</li>
|
<li>Unordered list item 2</li>
|
||||||
|
<li>
|
||||||
|
<ul>
|
||||||
|
<li>Unordered list item 1</li>
|
||||||
|
<li>Unordered list item 2</li>
|
||||||
|
<li>
|
||||||
|
<ul>
|
||||||
|
<li>Unordered list item 1</li>
|
||||||
|
<li>Unordered list item 2</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>Unordered list item 3</li>
|
||||||
|
<li>Unordered list item 4</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<ol>
|
<ol>
|
||||||
<li>Ordered list item 1</li>
|
<li>Ordered list item 1</li>
|
||||||
<li>Ordered list item 2</li>
|
<li>Ordered list item 2</li>
|
||||||
|
<li>
|
||||||
|
<ol>
|
||||||
|
<li>Ordered list item 1</li>
|
||||||
|
<li>Ordered list item 2</li>
|
||||||
|
<li>
|
||||||
|
<ol>
|
||||||
|
<li>Ordered list item 1</li>
|
||||||
|
<li>Ordered list item 2</li>
|
||||||
|
</ol>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</li>
|
||||||
|
<li>Ordered list item 3</li>
|
||||||
|
<li>Ordered list item 4</li>
|
||||||
</ol>
|
</ol>
|
||||||
</div>
|
</div>
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<dl>
|
<dl>
|
||||||
<dt>Description list item 1</dt>
|
<dt>Description list item 1</dt>
|
||||||
<dd>Description list item 1.1</dd>
|
<dd>Description list item 1.1</dd>
|
||||||
|
<dd>Description list item 1.2</dd>
|
||||||
|
<dd>Description list item 1.3</dd>
|
||||||
|
<dt>Description list item 2</dt>
|
||||||
|
<dd>Description list item 2.1</dd>
|
||||||
|
<dt>Description list item 3</dt>
|
||||||
|
<dd>Description list item 3.1</dd>
|
||||||
</dl>
|
</dl>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p>See more examples of <strong>lists</strong> <a href="lists.html" title="Examples about lists">here</a>.</p>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="container" id="forms">
|
<section class="container" id="forms">
|
||||||
<h5 class="title">Forms</h5>
|
<h5 class="title">Forms</h5>
|
||||||
<div class="example">
|
<div class="example">
|
||||||
<form action="javascript: void(0)">
|
<form>
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<label for="nameField">Name</label>
|
<legend>Legend</legend>
|
||||||
<input type="text" placeholder="CJ Patoilo" id="nameField">
|
<div class="row">
|
||||||
<label for="commentField">Comment</label>
|
<div class="column">
|
||||||
<textarea placeholder="Hi CJ …" id="commentField"></textarea>
|
<label for="textField">Text field</label>
|
||||||
<div class="example-send-yourself-copy">
|
<input type="text" placeholder="Text field" id="textField">
|
||||||
<input type="checkbox" id="confirmField">
|
<label for="emailField">Email field</label>
|
||||||
<label class="label-inline" for="confirmField">Send a copy to yourself</label>
|
<input type="email" id="emailField" placeholder="Email field">
|
||||||
|
<label for="numberField">Number field</label>
|
||||||
|
<input type="number" id="numberField" placeholder="Number field">
|
||||||
|
<label for="passwordField">Password field</label>
|
||||||
|
<input type="password" id="passwordField" placeholder="Password field">
|
||||||
|
<label for="selectField">Select field</label>
|
||||||
|
<select id="selectField">
|
||||||
|
<option value="selectField1">Select field 1</option>
|
||||||
|
<option value="selectField2">Select field 2</option>
|
||||||
|
<option value="selectField3">Select field 3</option>
|
||||||
|
<option value="selectField4">Select field 4</option>
|
||||||
|
</select>
|
||||||
|
<label for="searchField">Search field</label>
|
||||||
|
<input type="search" id="searchField" placeholder="Search field">
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<label for="telField">Tel field</label>
|
||||||
|
<input type="tel" id="telField" placeholder="Tel field">
|
||||||
|
<label for="urlField">URL field</label>
|
||||||
|
<input type="url" id="urlField" placeholder="URL field">
|
||||||
|
<label for="radioField">Radio field</label>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column">
|
||||||
|
<input type="radio" id="radioField1" name="radioField">
|
||||||
|
<label class="label-inline" for="radioField1">Radio field 1</label>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<input type="radio" id="radioField2" name="radioField">
|
||||||
|
<label class="label-inline" for="radioField2">Radio field 2</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<label for="radioField">Checkbox field</label>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column">
|
||||||
|
<input type="checkbox" id="checkboxField1">
|
||||||
|
<label class="label-inline" for="checkboxField1">Checkbox field 1</label>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<input type="checkbox" id="checkboxField2">
|
||||||
|
<label class="label-inline" for="checkboxField2">Checkbox field 2</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<label for="textareaField">Textarea field</label>
|
||||||
|
<textarea placeholder="Textarea field" id="textareaField"></textarea>
|
||||||
|
<input type="submit">
|
||||||
|
<input type="reset" class="button-clear">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<input class="button-primary" type="submit" value="Send">
|
|
||||||
</fieldset>
|
</fieldset>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<p>See more examples of <strong>forms</strong> <a href="forms.html" title="Examples about forms">here</a>.</p>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="container" id="tables">
|
<section class="container" id="tables">
|
||||||
@ -109,6 +252,12 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Kevin Durant</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2.06</td>
|
||||||
|
<td> Washington, DC</td>
|
||||||
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Stephen Curry</td>
|
<td>Stephen Curry</td>
|
||||||
<td>27</td>
|
<td>27</td>
|
||||||
@ -121,29 +270,273 @@
|
|||||||
<td>2,01</td>
|
<td>2,01</td>
|
||||||
<td>Los Angeles, CA</td>
|
<td>Los Angeles, CA</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Draymond Green</td>
|
||||||
|
<td>26</td>
|
||||||
|
<td>2,01</td>
|
||||||
|
<td>Saginaw, MI</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Andre Iguodala</td>
|
||||||
|
<td>32</td>
|
||||||
|
<td>1,98</td>
|
||||||
|
<td>Springfield, IL</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Anderson Varejão</td>
|
||||||
|
<td>33</td>
|
||||||
|
<td>2,08</td>
|
||||||
|
<td>Colatina, ES</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shaun Livingston</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2,01</td>
|
||||||
|
<td>Peoria, CA</td>
|
||||||
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<p>See more examples of <strong>tables</strong> <a href="tables.html" title="Examples about tables">here</a>.</p>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="container" id="grids">
|
<section class="container" id="grids">
|
||||||
<h5 class="title">Grids</h5>
|
<h5 class="title">Grids</h5>
|
||||||
<div class="example">
|
<div class="example">
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="column"><span class="column-demo">.column</span></div>
|
<div class="column"><span class="column-demo">100%</span></div>
|
||||||
<div class="column"><span class="column-demo">.column</span></div>
|
|
||||||
<div class="column"><span class="column-demo">.column</span></div>
|
|
||||||
<div class="column"><span class="column-demo">.column</span></div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="column"><span class="column-demo">.column</span></div>
|
<div class="column column-10"><span class="column-demo">10%</span></div>
|
||||||
<div class="column column-50 column-offset-25"><span class="column-demo">.column-50.column-offset-25</span></div>
|
<div class="column column-90"><span class="column-demo">90%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column column-20"><span class="column-demo">20%</span></div>
|
||||||
|
<div class="column column-80"><span class="column-demo">80%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column column-25"><span class="column-demo">25%</span></div>
|
||||||
|
<div class="column column-75"><span class="column-demo">75%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column column-33"><span class="column-demo">33%</span></div>
|
||||||
|
<div class="column column-67"><span class="column-demo">67%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column column-40"><span class="column-demo">40%</span></div>
|
||||||
|
<div class="column column-60"><span class="column-demo">60%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column column-50"><span class="column-demo">50%</span></div>
|
||||||
|
<div class="column column-50"><span class="column-demo">50%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column column-60"><span class="column-demo">60%</span></div>
|
||||||
|
<div class="column column-40"><span class="column-demo">40%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column column-67"><span class="column-demo">67%</span></div>
|
||||||
|
<div class="column column-33"><span class="column-demo">33%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column column-75"><span class="column-demo">75%</span></div>
|
||||||
|
<div class="column column-25"><span class="column-demo">25%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column column-80"><span class="column-demo">80%</span></div>
|
||||||
|
<div class="column column-20"><span class="column-demo">20%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column column-90"><span class="column-demo">90%</span></div>
|
||||||
|
<div class="column column-10"><span class="column-demo">10%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column"><span class="column-demo">100%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column column-90"><span class="column-demo">90%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">10%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column column-80"><span class="column-demo">80%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">20%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column column-75"><span class="column-demo">75%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">25%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column column-67"><span class="column-demo">67%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">33%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column column-60"><span class="column-demo">60%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">40%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column column-50"><span class="column-demo">50%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">50%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column column-40"><span class="column-demo">40%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">60%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column column-33"><span class="column-demo">33%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">67%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column column-25"><span class="column-demo">25%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">75%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column column-20"><span class="column-demo">20%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">80%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column column-10"><span class="column-demo">10%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">90%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column"><span class="column-demo">100%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column"><span class="column-demo">50%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">50%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column"><span class="column-demo">33.3%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">33.3%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">33.3%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column"><span class="column-demo">25%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">25%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">25%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">25%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column"><span class="column-demo">20%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">20%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">20%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">20%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">20%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column"><span class="column-demo">16.6%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">16.6%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">16.6%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">16.6%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">16.6%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">16.6%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column"><span class="column-demo">14.28%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">14.28%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">14.28%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">14.28%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">14.28%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">14.28%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">14.28%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column"><span class="column-demo">12.5%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">12.5%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">12.5%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">12.5%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">12.5%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">12.5%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">12.5%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">12.5%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column"><span class="column-demo">11.11%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">11.11%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">11.11%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">11.11%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">11.11%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">11.11%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">11.11%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">11.11%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">11.11%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column"><span class="column-demo">10%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">10%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">10%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">10%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">10%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">10%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">10%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">10%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">10%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">10%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column"><span class="column-demo">9.09%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">9.09%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">9.09%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">9.09%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">9.09%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">9.09%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">9.09%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">9.09%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">9.09%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">9.09%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">9.09%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column"><span class="column-demo">8.3%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">8.3%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">8.3%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">8.3%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">8.3%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">8.3%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">8.3%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">8.3%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">8.3%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">8.3%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">8.3%</span></div>
|
||||||
|
<div class="column"><span class="column-demo">8.3%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column column-50 column-offset-25"><span class="column-demo">50%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column column-50 column-offset-50"><span class="column-demo">50%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column column-25 column-offset-75"><span class="column-demo">25%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column column-25 column-offset-50"><span class="column-demo">25%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column column-25 column-offset-25"><span class="column-demo">25%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column column-25 column-offset-25"><span class="column-demo">25%</span></div>
|
||||||
|
<div class="column column-25 column-offset-25"><span class="column-demo">25%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column column-25"><span class="column-demo">25%</span></div>
|
||||||
|
<div class="column column-25 column-offset-50"><span class="column-demo">25%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column"><span class="column-demo">25%</span></div>
|
||||||
|
<div class="column column-50 column-offset-25"><span class="column-demo">50%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column column-50"><span class="column-demo">50%</span></div>
|
||||||
|
<div class="column column-25 column-offset-25"><span class="column-demo">25%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column column-25"><span class="column-demo">25%</span></div>
|
||||||
|
<div class="column column-25 column-offset-25"><span class="column-demo">25%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column column-75 column-offset-25"><span class="column-demo">75%</span></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<p>See more examples of <strong>grids</strong> <a href="grids.html" title="Examples about grids">here</a>.</p>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="container" id="codes">
|
<section class="container" id="codes">
|
||||||
@ -151,25 +544,18 @@
|
|||||||
<div class="example">
|
<div class="example">
|
||||||
<pre><code>.milligram {
|
<pre><code>.milligram {
|
||||||
color: #9b4dca;
|
color: #9b4dca;
|
||||||
}
|
}</code></pre>
|
||||||
</code></pre>
|
|
||||||
</div>
|
</div>
|
||||||
<p>See more examples of <strong>codes</strong> <a href="codes.html" title="Examples about codes">here</a>.</p>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="container" id="utilities">
|
<section class="container" id="utilities">
|
||||||
<h5 class="title">Utilities</h5>
|
<h5 class="title">Utilities</h5>
|
||||||
<div class="example">
|
<div class="example">
|
||||||
<div class="clearfix">
|
<div class="clearfix">
|
||||||
<div class="float-left">
|
<img class="float-left" src="http://placehold.it/320/d1d1d1/?text=float+to+left" alt="float to left">
|
||||||
<h6>Float to left</h6>
|
<img class="float-right" src="http://placehold.it/320/d1d1d1/?text=float+to+right" alt="float to right">
|
||||||
</div>
|
|
||||||
<div class="float-right">
|
|
||||||
<h6>Float to right</h6>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<p>See more examples of <strong>utilities</strong> <a href="utilities.html" title="Examples about utilities">here</a>.</p>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="container" id="examples">
|
<section class="container" id="examples">
|
||||||
|
|||||||
@ -1,18 +1,104 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
viewports: [
|
viewports: [
|
||||||
{ name: 'phone_v', width: 320, height: 480 },
|
{ name: 'phone', width: 320, height: 480 },
|
||||||
{ name: 'phone_h', width: 480, height: 320 },
|
{ name: 'tablet', width: 768, height: 1024 },
|
||||||
{ name: 'tablet_v', width: 768, height: 1024 },
|
|
||||||
{ name: 'tablet_h', width: 1024, height: 768 },
|
|
||||||
{ name: 'laptop', width: 1280, height: 800 },
|
{ name: 'laptop', width: 1280, height: 800 },
|
||||||
{ name: 'desktop', width: 1920, height: 1080 }
|
{ name: 'desktop', width: 1920, height: 1080 }
|
||||||
],
|
],
|
||||||
scenarios: [{
|
scenarios: [{
|
||||||
label: 'Milligram | A minimalist CSS framework.',
|
label: 'Typography',
|
||||||
url: 'http://localhost:3000',
|
url: 'http://localhost:3000',
|
||||||
hideSelectors: [],
|
hideSelectors: [],
|
||||||
removeSelectors: ['.__bs_notify__'],
|
removeSelectors: ['#__bs_notify__'],
|
||||||
selectors: ['body'],
|
selectors: ['#typography'],
|
||||||
|
readyEvent: null,
|
||||||
|
delay: 500,
|
||||||
|
misMatchThreshold: 0.1,
|
||||||
|
onBeforeScript: 'onBefore.js',
|
||||||
|
onReadyScript: 'onReady.js'
|
||||||
|
},{
|
||||||
|
label: 'Blockquotes',
|
||||||
|
url: 'http://localhost:3000',
|
||||||
|
hideSelectors: [],
|
||||||
|
removeSelectors: ['#__bs_notify__'],
|
||||||
|
selectors: ['#blockquotes'],
|
||||||
|
readyEvent: null,
|
||||||
|
delay: 500,
|
||||||
|
misMatchThreshold: 0.1,
|
||||||
|
onBeforeScript: 'onBefore.js',
|
||||||
|
onReadyScript: 'onReady.js'
|
||||||
|
}, {
|
||||||
|
label: 'Buttons',
|
||||||
|
url: 'http://localhost:3000',
|
||||||
|
hideSelectors: [],
|
||||||
|
removeSelectors: ['#__bs_notify__'],
|
||||||
|
selectors: ['#buttons'],
|
||||||
|
readyEvent: null,
|
||||||
|
delay: 500,
|
||||||
|
misMatchThreshold: 0.1,
|
||||||
|
onBeforeScript: 'onBefore.js',
|
||||||
|
onReadyScript: 'onReady.js'
|
||||||
|
}, {
|
||||||
|
label: 'Lists',
|
||||||
|
url: 'http://localhost:3000',
|
||||||
|
hideSelectors: [],
|
||||||
|
removeSelectors: ['#__bs_notify__'],
|
||||||
|
selectors: ['#lists'],
|
||||||
|
readyEvent: null,
|
||||||
|
delay: 500,
|
||||||
|
misMatchThreshold: 0.1,
|
||||||
|
onBeforeScript: 'onBefore.js',
|
||||||
|
onReadyScript: 'onReady.js'
|
||||||
|
}, {
|
||||||
|
label: 'Forms',
|
||||||
|
url: 'http://localhost:3000',
|
||||||
|
hideSelectors: [],
|
||||||
|
removeSelectors: ['#__bs_notify__'],
|
||||||
|
selectors: ['#forms'],
|
||||||
|
readyEvent: null,
|
||||||
|
delay: 500,
|
||||||
|
misMatchThreshold: 0.1,
|
||||||
|
onBeforeScript: 'onBefore.js',
|
||||||
|
onReadyScript: 'onReady.js'
|
||||||
|
}, {
|
||||||
|
label: 'Tables',
|
||||||
|
url: 'http://localhost:3000',
|
||||||
|
hideSelectors: [],
|
||||||
|
removeSelectors: ['#__bs_notify__'],
|
||||||
|
selectors: ['#tables'],
|
||||||
|
readyEvent: null,
|
||||||
|
delay: 500,
|
||||||
|
misMatchThreshold: 0.1,
|
||||||
|
onBeforeScript: 'onBefore.js',
|
||||||
|
onReadyScript: 'onReady.js'
|
||||||
|
}, {
|
||||||
|
label: 'Grids',
|
||||||
|
url: 'http://localhost:3000',
|
||||||
|
hideSelectors: [],
|
||||||
|
removeSelectors: ['#__bs_notify__'],
|
||||||
|
selectors: ['#grids'],
|
||||||
|
readyEvent: null,
|
||||||
|
delay: 500,
|
||||||
|
misMatchThreshold: 0.1,
|
||||||
|
onBeforeScript: 'onBefore.js',
|
||||||
|
onReadyScript: 'onReady.js'
|
||||||
|
}, {
|
||||||
|
label: 'Codes',
|
||||||
|
url: 'http://localhost:3000',
|
||||||
|
hideSelectors: [],
|
||||||
|
removeSelectors: ['#__bs_notify__'],
|
||||||
|
selectors: ['#codes'],
|
||||||
|
readyEvent: null,
|
||||||
|
delay: 500,
|
||||||
|
misMatchThreshold: 0.1,
|
||||||
|
onBeforeScript: 'onBefore.js',
|
||||||
|
onReadyScript: 'onReady.js'
|
||||||
|
}, {
|
||||||
|
label: 'Utilities',
|
||||||
|
url: 'http://localhost:3000',
|
||||||
|
hideSelectors: [],
|
||||||
|
removeSelectors: ['#__bs_notify__'],
|
||||||
|
selectors: ['#utilities'],
|
||||||
readyEvent: null,
|
readyEvent: null,
|
||||||
delay: 500,
|
delay: 500,
|
||||||
misMatchThreshold: 0.1,
|
misMatchThreshold: 0.1,
|
||||||
@ -25,8 +111,8 @@ module.exports = {
|
|||||||
casper_scripts: '../../test/visual/fixtures',
|
casper_scripts: '../../test/visual/fixtures',
|
||||||
compare_data: '.tmp/compare.json'
|
compare_data: '.tmp/compare.json'
|
||||||
},
|
},
|
||||||
engine: 'slimerjs',
|
engine: 'phantomjs',
|
||||||
report: ['browser'],
|
report: ['browser', 'CLI'],
|
||||||
casperFlags: [],
|
casperFlags: [],
|
||||||
debug: false,
|
debug: false,
|
||||||
port: 3002
|
port: 3002
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 144 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 148 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 153 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 162 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 167 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 180 KiB |
BIN
test/visual/reference/0_0_typography_0_phone.png
Normal file
BIN
test/visual/reference/0_0_typography_0_phone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
BIN
test/visual/reference/0_0_typography_1_tablet.png
Normal file
BIN
test/visual/reference/0_0_typography_1_tablet.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
BIN
test/visual/reference/0_0_typography_2_laptop.png
Normal file
BIN
test/visual/reference/0_0_typography_2_laptop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
BIN
test/visual/reference/0_0_typography_3_desktop.png
Normal file
BIN
test/visual/reference/0_0_typography_3_desktop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
BIN
test/visual/reference/1_0_blockquotes_0_phone.png
Normal file
BIN
test/visual/reference/1_0_blockquotes_0_phone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
test/visual/reference/1_0_blockquotes_1_tablet.png
Normal file
BIN
test/visual/reference/1_0_blockquotes_1_tablet.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
test/visual/reference/1_0_blockquotes_2_laptop.png
Normal file
BIN
test/visual/reference/1_0_blockquotes_2_laptop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
test/visual/reference/1_0_blockquotes_3_desktop.png
Normal file
BIN
test/visual/reference/1_0_blockquotes_3_desktop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
test/visual/reference/2_0_buttons_0_phone.png
Normal file
BIN
test/visual/reference/2_0_buttons_0_phone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
BIN
test/visual/reference/2_0_buttons_1_tablet.png
Normal file
BIN
test/visual/reference/2_0_buttons_1_tablet.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
BIN
test/visual/reference/2_0_buttons_2_laptop.png
Normal file
BIN
test/visual/reference/2_0_buttons_2_laptop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
BIN
test/visual/reference/2_0_buttons_3_desktop.png
Normal file
BIN
test/visual/reference/2_0_buttons_3_desktop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
BIN
test/visual/reference/3_0_lists_0_phone.png
Normal file
BIN
test/visual/reference/3_0_lists_0_phone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
BIN
test/visual/reference/3_0_lists_1_tablet.png
Normal file
BIN
test/visual/reference/3_0_lists_1_tablet.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
BIN
test/visual/reference/3_0_lists_2_laptop.png
Normal file
BIN
test/visual/reference/3_0_lists_2_laptop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
BIN
test/visual/reference/3_0_lists_3_desktop.png
Normal file
BIN
test/visual/reference/3_0_lists_3_desktop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
BIN
test/visual/reference/4_0_forms_0_phone.png
Normal file
BIN
test/visual/reference/4_0_forms_0_phone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
BIN
test/visual/reference/4_0_forms_1_tablet.png
Normal file
BIN
test/visual/reference/4_0_forms_1_tablet.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
BIN
test/visual/reference/4_0_forms_2_laptop.png
Normal file
BIN
test/visual/reference/4_0_forms_2_laptop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
BIN
test/visual/reference/4_0_forms_3_desktop.png
Normal file
BIN
test/visual/reference/4_0_forms_3_desktop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
BIN
test/visual/reference/5_0_tables_0_phone.png
Normal file
BIN
test/visual/reference/5_0_tables_0_phone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
BIN
test/visual/reference/5_0_tables_1_tablet.png
Normal file
BIN
test/visual/reference/5_0_tables_1_tablet.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
BIN
test/visual/reference/5_0_tables_2_laptop.png
Normal file
BIN
test/visual/reference/5_0_tables_2_laptop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
BIN
test/visual/reference/5_0_tables_3_desktop.png
Normal file
BIN
test/visual/reference/5_0_tables_3_desktop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
BIN
test/visual/reference/6_0_grids_0_phone.png
Normal file
BIN
test/visual/reference/6_0_grids_0_phone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
BIN
test/visual/reference/6_0_grids_1_tablet.png
Normal file
BIN
test/visual/reference/6_0_grids_1_tablet.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
BIN
test/visual/reference/6_0_grids_2_laptop.png
Normal file
BIN
test/visual/reference/6_0_grids_2_laptop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
BIN
test/visual/reference/6_0_grids_3_desktop.png
Normal file
BIN
test/visual/reference/6_0_grids_3_desktop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
BIN
test/visual/reference/7_0_codes_0_phone.png
Normal file
BIN
test/visual/reference/7_0_codes_0_phone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
BIN
test/visual/reference/7_0_codes_1_tablet.png
Normal file
BIN
test/visual/reference/7_0_codes_1_tablet.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
BIN
test/visual/reference/7_0_codes_2_laptop.png
Normal file
BIN
test/visual/reference/7_0_codes_2_laptop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
BIN
test/visual/reference/7_0_codes_3_desktop.png
Normal file
BIN
test/visual/reference/7_0_codes_3_desktop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
BIN
test/visual/reference/8_0_utilities_0_phone.png
Normal file
BIN
test/visual/reference/8_0_utilities_0_phone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
BIN
test/visual/reference/8_0_utilities_1_tablet.png
Normal file
BIN
test/visual/reference/8_0_utilities_1_tablet.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
BIN
test/visual/reference/8_0_utilities_2_laptop.png
Normal file
BIN
test/visual/reference/8_0_utilities_2_laptop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
BIN
test/visual/reference/8_0_utilities_3_desktop.png
Normal file
BIN
test/visual/reference/8_0_utilities_3_desktop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
Loading…
Reference in New Issue
Block a user