AverageMarcus/milligram
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Arranging the order of selectors and properties

Browse Source
This commit is contained in:
CJ Patoilo 2016-09-09 21:33:20 -03:00
parent 7a6fe6399b
commit 35410848f4
11 changed files with 123 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

200
dist/milligram.css vendored
View File

@ -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
View File

File diff suppressed because one or more lines are too long

2
dist/milligram.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/milligram.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
src/_Code.sass
View File

@ -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

6
src/_Form.sass
View File

@ -32,15 +32,15 @@ select
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>') 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

11
src/_Grid.sass
View File

@ -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%

12
src/_List.sass
View File

@ -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

18
src/_Spacing.sass
View File

@ -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

4
src/_Table.sass
View File

@ -5,8 +5,8 @@
table table
width: 100% width: 100%
th, td,
td th
border-bottom: .1rem solid $color-tertiary border-bottom: .1rem solid $color-tertiary
padding: 1.2rem 1.5rem padding: 1.2rem 1.5rem
text-align: left text-align: left

18
src/_Utility.sass
View File

@ -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