Merge branch 'hotfix/v1.2.0-rc6' into develop
This commit is contained in:
CJ Patoilo
commit
f3db0b346f
|
|
@ -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
|
||||
|
|
@ -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,16 +612,9 @@ img {
|
|||
max-width: 100%;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.clearfix:after, .clearfix:before {
|
||||
content: '';
|
||||
content: ' ';
|
||||
display: table;
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
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>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Unordered list item 3.1</li>
|
||||
<li>Unordered list item 3.2</li>
|
||||
<li>Unordered list item 3.3</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>
|
||||
</ol>
|
||||
</li>
|
||||
<li>Ordered list item 3.1</li>
|
||||
<li>Ordered list item 3.2</li>
|
||||
<li>Ordered list item 3.3</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