Merge branch 'hotfix/v1.2.0-rc6' into develop
This commit is contained in:
CJ Patoilo
commit
f3db0b346f
74
.sasslintrc
Normal file
74
.sasslintrc
Normal file
@ -0,0 +1,74 @@
|
||||
#########################
|
||||
## Sass Lint File
|
||||
## See rules https://github.com/sasstools/sass-lint/tree/master/docs/rules
|
||||
#########################
|
||||
# Linter Options
|
||||
options:
|
||||
# Don't merge default rules
|
||||
merge-default-rules: false
|
||||
# File Options
|
||||
files:
|
||||
include: 'src/**/*.s+(a|c)ss'
|
||||
ignore:
|
||||
- 'node_modules/**/*.*'
|
||||
# Rule Configuration
|
||||
rules:
|
||||
attribute-quotes:
|
||||
- 2
|
||||
-
|
||||
include: true
|
||||
extends-before-mixins: 2
|
||||
extends-before-declarations: 2
|
||||
placeholder-in-extend: 2
|
||||
mixins-before-declarations:
|
||||
- 2
|
||||
-
|
||||
exclude:
|
||||
- breakpoint
|
||||
- mq
|
||||
nesting-depth:
|
||||
- 1
|
||||
-
|
||||
max-depth: 2
|
||||
no-warn: 1
|
||||
no-debug: 1
|
||||
no-ids: 2
|
||||
no-duplicate-properties: 1
|
||||
no-trailing-whitespace: 2
|
||||
|
||||
leading-zero:
|
||||
- 2
|
||||
-
|
||||
include: false
|
||||
no-vendor-prefixes:
|
||||
- 2
|
||||
-
|
||||
ignore-non-standard: true
|
||||
no-important: 2
|
||||
hex-notation:
|
||||
- 2
|
||||
-
|
||||
style: lowercase
|
||||
indentation:
|
||||
- 2
|
||||
-
|
||||
size: 'tab'
|
||||
property-sort-order:
|
||||
- 1
|
||||
-
|
||||
order: 'alphabetical'
|
||||
ignore-custom-properties: true
|
||||
property-units:
|
||||
- 1
|
||||
-
|
||||
global: ['em', 'rem', '%']
|
||||
quotes: 2
|
||||
space-after-colon: 2
|
||||
space-after-comma: 2
|
||||
single-line-per-selector: 2
|
||||
variable-for-property:
|
||||
- 2
|
||||
-
|
||||
properties:
|
||||
- color
|
||||
zero-unit: 2
|
||||
82
dist/milligram.css
vendored
82
dist/milligram.css
vendored
@ -80,8 +80,8 @@ button[disabled],
|
||||
input[type='button'][disabled],
|
||||
input[type='reset'][disabled],
|
||||
input[type='submit'][disabled] {
|
||||
opacity: .5;
|
||||
cursor: default;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.button[disabled]:focus, .button[disabled]:hover,
|
||||
@ -102,8 +102,8 @@ button.button-outline,
|
||||
input[type='button'].button-outline,
|
||||
input[type='reset'].button-outline,
|
||||
input[type='submit'].button-outline {
|
||||
color: #9b4dca;
|
||||
background-color: transparent;
|
||||
color: #9b4dca;
|
||||
}
|
||||
|
||||
.button.button-outline:focus, .button.button-outline:hover,
|
||||
@ -115,9 +115,9 @@ input[type='reset'].button-outline:focus,
|
||||
input[type='reset'].button-outline:hover,
|
||||
input[type='submit'].button-outline:focus,
|
||||
input[type='submit'].button-outline:hover {
|
||||
color: #606c76;
|
||||
background-color: transparent;
|
||||
border-color: #606c76;
|
||||
color: #606c76;
|
||||
}
|
||||
|
||||
.button.button-outline[disabled]:focus, .button.button-outline[disabled]:hover,
|
||||
@ -129,8 +129,8 @@ input[type='reset'].button-outline[disabled]:focus,
|
||||
input[type='reset'].button-outline[disabled]:hover,
|
||||
input[type='submit'].button-outline[disabled]:focus,
|
||||
input[type='submit'].button-outline[disabled]:hover {
|
||||
color: #9b4dca;
|
||||
border-color: inherit;
|
||||
color: #9b4dca;
|
||||
}
|
||||
|
||||
.button.button-clear,
|
||||
@ -138,9 +138,9 @@ button.button-clear,
|
||||
input[type='button'].button-clear,
|
||||
input[type='reset'].button-clear,
|
||||
input[type='submit'].button-clear {
|
||||
color: #9b4dca;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
color: #9b4dca;
|
||||
}
|
||||
|
||||
.button.button-clear:focus, .button.button-clear:hover,
|
||||
@ -152,9 +152,9 @@ input[type='reset'].button-clear:focus,
|
||||
input[type='reset'].button-clear:hover,
|
||||
input[type='submit'].button-clear:focus,
|
||||
input[type='submit'].button-clear:hover {
|
||||
color: #606c76;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
color: #606c76;
|
||||
}
|
||||
|
||||
.button.button-clear[disabled]:focus, .button.button-clear[disabled]:hover,
|
||||
@ -181,11 +181,9 @@ code {
|
||||
pre {
|
||||
background: #f4f5f6;
|
||||
border-left: 0.3rem solid #9b4dca;
|
||||
font-family: 'Menlo', 'Consolas', 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', 'Monaco', monospace;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
display: block;
|
||||
padding: 1rem 1.5rem;
|
||||
@ -215,6 +213,7 @@ select {
|
||||
border: 0.1rem solid #d1d1d1;
|
||||
border-radius: .4rem;
|
||||
box-shadow: none;
|
||||
box-sizing: inherit;
|
||||
height: 3.8rem;
|
||||
padding: .6rem 1.0rem;
|
||||
width: 100%;
|
||||
@ -229,7 +228,7 @@ input[type='text']:focus,
|
||||
input[type='url']:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
border: 0.1rem solid #9b4dca;
|
||||
border-color: #9b4dca;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
@ -244,8 +243,6 @@ select:focus {
|
||||
|
||||
textarea {
|
||||
min-height: 6.5rem;
|
||||
padding-bottom: .6rem;
|
||||
padding-top: .6rem;
|
||||
}
|
||||
|
||||
label,
|
||||
@ -324,6 +321,14 @@ input[type='radio'] {
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.row.row-no-padding {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.row.row-no-padding > .column {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.row .column {
|
||||
display: block;
|
||||
flex: 1;
|
||||
@ -332,18 +337,6 @@ input[type='radio'] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row .column .col-top {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.row .column .col-bottom {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.row .column .col-center {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.row .column.column-offset-10 {
|
||||
margin-left: 10%;
|
||||
}
|
||||
@ -435,7 +428,19 @@ input[type='radio'] {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.row .column .column-top {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.row .column .column-bottom {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.row .column .column-center {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
@media (min-width: 40rem) {
|
||||
.row {
|
||||
flex-direction: row;
|
||||
margin-left: -1.0rem;
|
||||
@ -452,13 +457,14 @@ a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
a:hover, a:focus {
|
||||
color: #606c76;
|
||||
}
|
||||
|
||||
dl,
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
margin-top: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
@ -476,10 +482,6 @@ ul ul {
|
||||
margin: 1.5rem 0 1.5rem 3.0rem;
|
||||
}
|
||||
|
||||
dl {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style: decimal inside;
|
||||
}
|
||||
@ -488,17 +490,14 @@ ul {
|
||||
list-style: circle inside;
|
||||
}
|
||||
|
||||
.button,
|
||||
button,
|
||||
dd,
|
||||
dt,
|
||||
li {
|
||||
margin-bottom: 1.0rem;
|
||||
}
|
||||
|
||||
button,
|
||||
.button {
|
||||
margin-bottom: 1.0rem;
|
||||
}
|
||||
|
||||
fieldset,
|
||||
input,
|
||||
select,
|
||||
@ -524,7 +523,7 @@ table {
|
||||
|
||||
td,
|
||||
th {
|
||||
border-bottom: 0.1rem solid #f4f5f6;
|
||||
border-bottom: 0.1rem solid #e1e1e1;
|
||||
padding: 1.2rem 1.5rem;
|
||||
text-align: left;
|
||||
}
|
||||
@ -550,25 +549,23 @@ h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 300;
|
||||
letter-spacing: -.1rem;
|
||||
margin-bottom: 2.0rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 4.0rem;
|
||||
letter-spacing: -.1rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 3.6rem;
|
||||
letter-spacing: -.1rem;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 3.0rem;
|
||||
letter-spacing: -.1rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
@ -590,7 +587,7 @@ h6 {
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
@media (min-width: 40rem) {
|
||||
h1 {
|
||||
font-size: 5.0rem;
|
||||
}
|
||||
@ -615,15 +612,8 @@ img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.clearfix:after, .clearfix:before {
|
||||
content: ' ';
|
||||
display: table;
|
||||
}
|
||||
|
||||
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,15 +53,17 @@
|
||||
"node-sass": "^3.7.0",
|
||||
"npm-run-all": "^2.1.1",
|
||||
"onchange": "^2.4.0",
|
||||
"postcss-cli": "^2.5.2"
|
||||
"postcss-cli": "^2.5.2",
|
||||
"sass-lint": "^1.8.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^6.0.0"
|
||||
},
|
||||
"scripts": {
|
||||
"banner": "for m in dist/*.css; do echo '/*!\n * Milligram v1.1.0\n * http://milligram.github.io\n *\n * Copyright (c) 2016 CJ Patoilo\n * Licensed under the MIT license\n*/\n' | cat - $m > temp && mv temp $m; done",
|
||||
"sass": "node-sass --output-style expanded src/milligram.sass dist/milligram.css && node-sass --output-style compressed src/milligram.sass dist/milligram.min.css",
|
||||
"autoprefixer": "postcss -u autoprefixer --no-map.inline --autoprefixer.browsers 'last 1 versions' -r dist/*.css",
|
||||
"sass": "node-sass --output-style expanded src/milligram.sass dist/milligram.css && node-sass --output-style compressed src/milligram.sass dist/milligram.min.css",
|
||||
"lint": "sass-lint -c .sasslintrc 'src/*.sass' --verbose --no-exit",
|
||||
"build": "npm-run-all sass autoprefixer banner",
|
||||
"watch": "onchange src -- npm run build",
|
||||
"serve": "browser-sync start -s test --ss dist -f dist",
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
// The base font-size is set at 62.5% for having the convenience
|
||||
// of sizing rems in a way that is similar to using px. 1.6rem=16px
|
||||
// of sizing rems in a way that is similar to using px: 1.6rem = 16px
|
||||
html
|
||||
box-sizing: border-box
|
||||
font-size: 62.5%
|
||||
|
||||
@ -32,8 +32,8 @@ input[type='submit']
|
||||
outline: 0
|
||||
|
||||
&[disabled]
|
||||
opacity: .5
|
||||
cursor: default
|
||||
opacity: .5
|
||||
|
||||
&:focus,
|
||||
&:hover
|
||||
@ -41,32 +41,32 @@ input[type='submit']
|
||||
border-color: $color-primary
|
||||
|
||||
&.button-outline
|
||||
color: $color-primary
|
||||
background-color: transparent
|
||||
color: $color-primary
|
||||
|
||||
&:focus,
|
||||
&:hover
|
||||
color: $color-secondary
|
||||
background-color: transparent
|
||||
border-color: $color-secondary
|
||||
color: $color-secondary
|
||||
|
||||
&[disabled]
|
||||
|
||||
&:focus,
|
||||
&:hover
|
||||
color: $color-primary
|
||||
border-color: inherit
|
||||
color: $color-primary
|
||||
|
||||
&.button-clear
|
||||
color: $color-primary
|
||||
background-color: transparent
|
||||
border-color: transparent
|
||||
color: $color-primary
|
||||
|
||||
&:focus,
|
||||
&:hover
|
||||
color: $color-secondary
|
||||
background-color: transparent
|
||||
border-color: transparent
|
||||
color: $color-secondary
|
||||
|
||||
&[disabled]
|
||||
|
||||
|
||||
@ -13,10 +13,8 @@ code
|
||||
pre
|
||||
background: $color-tertiary
|
||||
border-left: .3rem solid $color-primary
|
||||
font-family: 'Menlo', 'Consolas', 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', 'Monaco', monospace
|
||||
|
||||
& > code
|
||||
background: transparent
|
||||
border-radius: 0
|
||||
display: block
|
||||
padding: 1rem 1.5rem
|
||||
|
||||
@ -7,3 +7,4 @@ $color-primary: #9b4dca !default
|
||||
$color-secondary: #606c76 !default
|
||||
$color-tertiary: #f4f5f6 !default
|
||||
$color-quaternary: #d1d1d1 !default
|
||||
$color-quinary: #e1e1e1 !default
|
||||
|
||||
@ -16,12 +16,13 @@ select
|
||||
border: .1rem solid $color-quaternary
|
||||
border-radius: .4rem
|
||||
box-shadow: none
|
||||
box-sizing: inherit // Forced to replace inherit values of the normalize.css
|
||||
height: 3.8rem
|
||||
padding: .6rem 1.0rem // The .6rem vertically centers text on FF, ignored by Webkit
|
||||
width: 100%
|
||||
|
||||
&:focus
|
||||
border: .1rem solid $color-primary
|
||||
border-color: $color-primary
|
||||
outline: 0
|
||||
|
||||
select
|
||||
@ -33,8 +34,6 @@ select
|
||||
|
||||
textarea
|
||||
min-height: 6.5rem
|
||||
padding-bottom: .6rem
|
||||
padding-top: .6rem
|
||||
|
||||
label,
|
||||
legend
|
||||
|
||||
@ -47,6 +47,12 @@
|
||||
&.row-baseline
|
||||
align-items: baseline
|
||||
|
||||
&.row-no-padding
|
||||
padding: 0
|
||||
|
||||
&> .column
|
||||
padding: 0
|
||||
|
||||
.column
|
||||
display: block
|
||||
flex: 1
|
||||
@ -54,16 +60,6 @@
|
||||
max-width: 100%
|
||||
width: 100%
|
||||
|
||||
// .column-* vertically aligns an individual .column
|
||||
.col-top
|
||||
align-self: flex-start
|
||||
|
||||
.col-bottom
|
||||
align-self: flex-end
|
||||
|
||||
.col-center
|
||||
align-self: center
|
||||
|
||||
// Column Offsets
|
||||
&.column-offset-10
|
||||
margin-left: 10%
|
||||
@ -144,8 +140,18 @@
|
||||
flex: 0 0 90%
|
||||
max-width: 90%
|
||||
|
||||
// .column-* vertically aligns an individual .column
|
||||
.column-top
|
||||
align-self: flex-start
|
||||
|
||||
.column-bottom
|
||||
align-self: flex-end
|
||||
|
||||
.column-center
|
||||
align-self: center
|
||||
|
||||
// Larger than mobile screen
|
||||
@media (min-width: 640px)
|
||||
@media (min-width: 40.0rem) // Safari desktop has a bug using `rem`, but Safari mobile works
|
||||
|
||||
.row
|
||||
flex-direction: row
|
||||
|
||||
@ -6,5 +6,6 @@ a
|
||||
color: $color-primary
|
||||
text-decoration: none
|
||||
|
||||
&:hover
|
||||
&:hover,
|
||||
&:focus
|
||||
color: $color-secondary
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
dl,
|
||||
ol,
|
||||
ul
|
||||
list-style: none
|
||||
margin-top: 0
|
||||
padding-left: 0
|
||||
|
||||
@ -14,16 +15,8 @@ ul
|
||||
font-size: 90%
|
||||
margin: 1.5rem 0 1.5rem 3.0rem
|
||||
|
||||
dl
|
||||
list-style: none
|
||||
|
||||
ol
|
||||
list-style: decimal inside
|
||||
|
||||
ul
|
||||
list-style: circle inside
|
||||
|
||||
dd,
|
||||
dt,
|
||||
li
|
||||
margin-bottom: 1.0rem
|
||||
|
||||
@ -2,8 +2,11 @@
|
||||
// Spacing
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
.button,
|
||||
button,
|
||||
.button
|
||||
dd,
|
||||
dt,
|
||||
li
|
||||
margin-bottom: 1.0rem
|
||||
|
||||
fieldset,
|
||||
|
||||
@ -7,7 +7,7 @@ table
|
||||
|
||||
td,
|
||||
th
|
||||
border-bottom: .1rem solid $color-tertiary
|
||||
border-bottom: .1rem solid $color-quinary
|
||||
padding: 1.2rem 1.5rem
|
||||
text-align: left
|
||||
|
||||
|
||||
@ -12,22 +12,20 @@ h4,
|
||||
h5,
|
||||
h6
|
||||
font-weight: 300
|
||||
letter-spacing: -.1rem
|
||||
margin-bottom: 2.0rem
|
||||
margin-top: 0
|
||||
|
||||
h1
|
||||
font-size: 4.0rem
|
||||
letter-spacing: -.1rem
|
||||
line-height: 1.2
|
||||
|
||||
h2
|
||||
font-size: 3.6rem
|
||||
letter-spacing: -.1rem
|
||||
line-height: 1.25
|
||||
|
||||
h3
|
||||
font-size: 3.0rem
|
||||
letter-spacing: -.1rem
|
||||
line-height: 1.3
|
||||
|
||||
h4
|
||||
@ -46,7 +44,7 @@ h6
|
||||
line-height: 1.4
|
||||
|
||||
// Larger than mobile screen
|
||||
@media (min-width: 640px)
|
||||
@media (min-width: 40.0rem) // Safari desktop has a bug using `rem`, but Safari mobile works
|
||||
|
||||
h1
|
||||
font-size: 5.0rem
|
||||
|
||||
@ -4,14 +4,10 @@
|
||||
|
||||
// Clear a float with .clearfix
|
||||
.clearfix
|
||||
*zoom: 1
|
||||
|
||||
&:after
|
||||
clear: both
|
||||
|
||||
&:after,
|
||||
&:before
|
||||
content: ''
|
||||
content: ' ' // The space content is one way to avoid an Opera bug.
|
||||
display: table
|
||||
|
||||
// Float either direction
|
||||
|
||||
@ -123,52 +123,42 @@
|
||||
<ul>
|
||||
<li>Unordered list item 1</li>
|
||||
<li>Unordered list item 2</li>
|
||||
<li>
|
||||
<li>Unordered list item 3
|
||||
<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>
|
||||
<li>Unordered list item 3.1</li>
|
||||
<li>Unordered list item 3.2</li>
|
||||
<li>Unordered list item 3.3</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Unordered list item 3</li>
|
||||
<li>Unordered list item 4</li>
|
||||
<li>Unordered list item 5</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="column">
|
||||
<ol>
|
||||
<li>Ordered list item 1</li>
|
||||
<li>Ordered list item 2</li>
|
||||
<li>
|
||||
<li>Ordered list item 3
|
||||
<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>
|
||||
<li>Ordered list item 3.1</li>
|
||||
<li>Ordered list item 3.2</li>
|
||||
<li>Ordered list item 3.3</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>Ordered list item 3</li>
|
||||
<li>Ordered list item 4</li>
|
||||
<li>Ordered list item 5</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="column">
|
||||
<dl>
|
||||
<dt>Description list item 1</dt>
|
||||
<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>
|
||||
<dd>Description list item 3.2</dd>
|
||||
<dd>Description list item 3.3</dd>
|
||||
<dt>Description list item 4</dt>
|
||||
<dt>Description list item 5</dt>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user