From f09c0be418707ad51951e890eea5ce3fc8521a0e Mon Sep 17 00:00:00 2001 From: Joan Josep Ordinas Rosa Date: Thu, 15 Nov 2018 18:52:03 +0100 Subject: [PATCH] Upgraded milligram --- docs/styles/milligram/base.css | 18 +++++----- docs/styles/milligram/blockquote.css | 4 +-- docs/styles/milligram/button.css | 10 +++--- docs/styles/milligram/code.css | 5 +-- docs/styles/milligram/color.css | 6 ++-- docs/styles/milligram/divider.css | 4 +-- docs/styles/milligram/form.css | 19 +++++++---- docs/styles/milligram/grid.css | 12 +++---- docs/styles/milligram/image.css | 4 +-- docs/styles/milligram/link.css | 8 ++--- docs/styles/milligram/list.css | 4 +-- docs/styles/milligram/spacing.css | 4 +-- docs/styles/milligram/table.css | 50 ++++++++++++++++++++++++++-- docs/styles/milligram/typography.css | 18 ++++++---- docs/styles/milligram/utility.css | 6 ++-- 15 files changed, 114 insertions(+), 58 deletions(-) diff --git a/docs/styles/milligram/base.css b/docs/styles/milligram/base.css index adaee6e..64aeb4c 100644 --- a/docs/styles/milligram/base.css +++ b/docs/styles/milligram/base.css @@ -1,6 +1,6 @@ // Adapted from: /*! - * Milligram v1.1.0 + * Milligram v1.3.0 * http://milligram.github.io * * Copyright (c) 2016 CJ Patoilo @@ -10,6 +10,13 @@ // Base // –––––––––––––––––––––––––––––––––––––––––––––––––– +// Set box-sizing globally to handle padding and border widths +*, +*::after, // JJOR: use :: for pseudo-elements +*::before { + box-sizing: inherit; +} + // 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 html { @@ -27,11 +34,4 @@ body { line-height: 1.6; } -// Set box-sizing globally to handle padding and border widths -*, -*::after, // JJOR: use :: for pseudo-elements -*::before { - box-sizing: inherit; -} - -// vim:ts=2:sw=2:ai:et:fileencoding=utf-8:syntax=css +// vim:ts=2:sw=2:ai:et:fileencoding=utf-8:syntax=scss diff --git a/docs/styles/milligram/blockquote.css b/docs/styles/milligram/blockquote.css index 86060a4..4c0b143 100644 --- a/docs/styles/milligram/blockquote.css +++ b/docs/styles/milligram/blockquote.css @@ -1,6 +1,6 @@ // Adapted from: /*! - * Milligram v1.1.0 + * Milligram v1.3.0 * http://milligram.github.io * * Copyright (c) 2016 CJ Patoilo @@ -21,4 +21,4 @@ blockquote *:last-child { margin-bottom: 0; } -// vim:ts=2:sw=2:ai:et:fileencoding=utf-8:syntax=css +// vim:ts=2:sw=2:ai:et:fileencoding=utf-8:syntax=scss diff --git a/docs/styles/milligram/button.css b/docs/styles/milligram/button.css index 266e0f3..465f1ed 100644 --- a/docs/styles/milligram/button.css +++ b/docs/styles/milligram/button.css @@ -1,6 +1,6 @@ // Adapted (with some renaming experiments) from: /*! - * Milligram v1.1.0 + * Milligram v1.3.0 * http://milligram.github.io * * Copyright (c) 2016 CJ Patoilo @@ -78,20 +78,20 @@ &_buttons_active{.button_outline.button_disabled}, &_buttons_active{.button_outline[disabled]} { - color: &ColorPrimary; border-color: inherit; + color: &ColorPrimary; } &_buttons{.button_clear} { - color: &ColorPrimary; background-color: transparent; border-color: transparent; + color: &ColorPrimary; } &_buttons_active{.button_clear} { - color: &ColorSecondary; background-color: transparent; border-color: transparent; + color: &ColorSecondary; } &_buttons_active{.button_clear.button_disabled}, @@ -99,4 +99,4 @@ color: &ColorPrimary; } -// vim:ts=2:sw=2:ai:et:fileencoding=utf-8:syntax=css +// vim:ts=2:sw=2:ai:et:fileencoding=utf-8:syntax=scss diff --git a/docs/styles/milligram/code.css b/docs/styles/milligram/code.css index 07373bd..9a8ccf7 100644 --- a/docs/styles/milligram/code.css +++ b/docs/styles/milligram/code.css @@ -1,6 +1,6 @@ // Adapted from: /*! - * Milligram v1.1.0 + * Milligram v1.3.0 * http://milligram.github.io * * Copyright (c) 2016 CJ Patoilo @@ -22,6 +22,7 @@ code { pre { background: &ColorTertiary; border-left: 0.3rem solid &ColorPrimary; + overflow-y: hidden; } pre > code { @@ -31,4 +32,4 @@ pre > code { white-space: pre; } -// vim:ts=2:sw=2:ai:et:fileencoding=utf-8:syntax=css +// vim:ts=2:sw=2:ai:et:fileencoding=utf-8:syntax=scss diff --git a/docs/styles/milligram/color.css b/docs/styles/milligram/color.css index c6e4569..c16b08e 100644 --- a/docs/styles/milligram/color.css +++ b/docs/styles/milligram/color.css @@ -1,6 +1,6 @@ // Adapted from: /*! - * Milligram v1.1.0 + * Milligram v1.3.0 * http://milligram.github.io * * Copyright (c) 2016 CJ Patoilo @@ -10,6 +10,8 @@ // Color // –––––––––––––––––––––––––––––––––––––––––––––––––– +// TODO: add `!default`? + &ifndef{ColorInitial} &define{ColorInitial}{#FFFFFF} &endif @@ -34,4 +36,4 @@ &define{ColorQuinary}{#E1E1E1} &endif -// vim:ts=2:sw=2:ai:et:fileencoding=utf-8:syntax=css +// vim:ts=2:sw=2:ai:et:fileencoding=utf-8:syntax=scss diff --git a/docs/styles/milligram/divider.css b/docs/styles/milligram/divider.css index 26588d9..69abd34 100644 --- a/docs/styles/milligram/divider.css +++ b/docs/styles/milligram/divider.css @@ -1,6 +1,6 @@ // Adapted from: /*! - * Milligram v1.1.0 + * Milligram v1.3.0 * http://milligram.github.io * * Copyright (c) 2016 CJ Patoilo @@ -16,4 +16,4 @@ hr { margin: calc(&SpacingScale * 3.0rem) 0; } -// vim:ts=2:sw=2:ai:et:fileencoding=utf-8:syntax=css +// vim:ts=2:sw=2:ai:et:fileencoding=utf-8:syntax=scss diff --git a/docs/styles/milligram/form.css b/docs/styles/milligram/form.css index e694441..eb09490 100644 --- a/docs/styles/milligram/form.css +++ b/docs/styles/milligram/form.css @@ -1,6 +1,6 @@ // Adapted (with some renaming experiments) from: /*! - * Milligram v1.1.0 + * Milligram v1.3.0 * http://milligram.github.io * * Copyright (c) 2016 CJ Patoilo @@ -18,14 +18,19 @@ input[type='tel']$1, input[type='text']$1, input[type='url']$1, + input[type='color']$1, + input[type='date']$1, + input[type='month']$1, + input[type='week']$1, + input[type='datetime']$1, + input[type='datetime-local']$1, + input:not([type])$1, textarea, select } &_input{} { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; + appearance: none // Removes awkward default styles on some inputs for iOS background-color: transparent; border: 0.1rem solid &ColorQuaternary; border-radius: .4rem; @@ -42,12 +47,12 @@ } select { + background: url('data:image/svg+xml;utf8,') center right no-repeat; padding-right: 3rem; - background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAyOSAxNCIgd2lkdGg9IjI5Ij48cGF0aCBmaWxsPSIjZDFkMWQxIiBkPSJNOS40IDMuNmw1IDcgNS4yLTciLz48L3N2Zz4=) center right no-repeat; } select:focus { - background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAyOSAxNCIgd2lkdGg9IjI5Ij48cGF0aCBmaWxsPSIjOWI0ZGNmIiBkPSJNMTkuNiAzLjZIOS40bDUgNyIvPjwvc3ZnPg==); + background-image: url('data:image/svg+xml;utf8,') } textarea { @@ -78,4 +83,4 @@ input[type='radio'] { margin-left: .5rem; } -// vim:ts=2:sw=2:ai:et:fileencoding=utf-8:syntax=css +// vim:ts=2:sw=2:ai:et:fileencoding=utf-8:syntax=scss diff --git a/docs/styles/milligram/grid.css b/docs/styles/milligram/grid.css index 30c31c2..d4a9455 100644 --- a/docs/styles/milligram/grid.css +++ b/docs/styles/milligram/grid.css @@ -1,6 +1,6 @@ // Adapted (with some renaming experiments) from: /*! - * Milligram v1.1.0 + * Milligram v1.3.0 * http://milligram.github.io * * Copyright (c) 2016 CJ Patoilo @@ -46,34 +46,30 @@ // Vertically Align Columns // .row-align-* vertically aligns every .column in the .row &BEM{#row}{}{align-top} { - -ms-grid-row-align: flex-start; align-items: flex-start; } &BEM{#row}{}{align-bottom} { - -ms-grid-row-align: flex-end; align-items: flex-end; } &BEM{#row}{}{align-center} { - -ms-grid-row-align: center; align-items: center; } &BEM{#row}{}{align-stretch} { - -ms-grid-row-align: stretch; align-items: stretch; } &BEM{#row}{}{align-baseline} { - -ms-grid-row-align: baseline; align-items: baseline; } // JJOR: original = .row .col..., removed .row &BEM{#column} { display: block; - flex: 1; + // IE 11 required specifying the flex-basis otherwise it breaks mobile + flex: 1 1 auto; margin-left: 0; max-width: 100%; width: 100%; @@ -152,4 +148,4 @@ } } -// vim:ts=2:sw=2:ai:et:fileencoding=utf-8:syntax=css +// vim:ts=2:sw=2:ai:et:fileencoding=utf-8:syntax=scss diff --git a/docs/styles/milligram/image.css b/docs/styles/milligram/image.css index 898a89a..32dc10c 100644 --- a/docs/styles/milligram/image.css +++ b/docs/styles/milligram/image.css @@ -1,6 +1,6 @@ // Adapted from: /*! - * Milligram v1.1.0 + * Milligram v1.3.0 * http://milligram.github.io * * Copyright (c) 2016 CJ Patoilo @@ -14,4 +14,4 @@ img { max-width: 100%; } -// vim:ts=2:sw=2:ai:et:fileencoding=utf-8:syntax=css +// vim:ts=2:sw=2:ai:et:fileencoding=utf-8:syntax=scss diff --git a/docs/styles/milligram/link.css b/docs/styles/milligram/link.css index f9088f1..aa2cb4c 100644 --- a/docs/styles/milligram/link.css +++ b/docs/styles/milligram/link.css @@ -1,6 +1,6 @@ // Adapted from: /*! - * Milligram v1.1.0 + * Milligram v1.3.0 * http://milligram.github.io * * Copyright (c) 2016 CJ Patoilo @@ -15,9 +15,9 @@ a { text-decoration: none; } -a:hover, -a:focus { +a:focus, +a:hover { color: &ColorSecondary; } -// vim:ts=2:sw=2:ai:et:fileencoding=utf-8:syntax=css +// vim:ts=2:sw=2:ai:et:fileencoding=utf-8:syntax=scss diff --git a/docs/styles/milligram/list.css b/docs/styles/milligram/list.css index 55ab628..4a33435 100644 --- a/docs/styles/milligram/list.css +++ b/docs/styles/milligram/list.css @@ -1,6 +1,6 @@ // Adapted from: /*! - * Milligram v1.1.0 + * Milligram v1.3.0 * http://milligram.github.io * * Copyright (c) 2016 CJ Patoilo @@ -33,4 +33,4 @@ ul { list-style: circle inside; } -// vim:ts=2:sw=2:ai:et:fileencoding=utf-8:syntax=css +// vim:ts=2:sw=2:ai:et:fileencoding=utf-8:syntax=scss diff --git a/docs/styles/milligram/spacing.css b/docs/styles/milligram/spacing.css index e0a7e4b..696d1bc 100644 --- a/docs/styles/milligram/spacing.css +++ b/docs/styles/milligram/spacing.css @@ -1,6 +1,6 @@ // Adapted (with some renaming experiments) from: /*! - * Milligram v1.1.0 + * Milligram v1.3.0 * http://milligram.github.io * * Copyright (c) 2016 CJ Patoilo @@ -47,4 +47,4 @@ ul { margin-bottom: calc(&SpacingScale * 2.5rem); } -// vim:ts=2:sw=2:ai:et:fileencoding=utf-8:syntax=css +// vim:ts=2:sw=2:ai:et:fileencoding=utf-8:syntax=scss diff --git a/docs/styles/milligram/table.css b/docs/styles/milligram/table.css index c837830..438912c 100644 --- a/docs/styles/milligram/table.css +++ b/docs/styles/milligram/table.css @@ -1,6 +1,6 @@ // Adapted from: /*! - * Milligram v1.1.0 + * Milligram v1.3.0 * http://milligram.github.io * * Copyright (c) 2016 CJ Patoilo @@ -11,6 +11,7 @@ // –––––––––––––––––––––––––––––––––––––––––––––––––– table { + border-spacing: 0; width: 100%; } @@ -30,4 +31,49 @@ table { padding-right: 0; } -// vim:ts=2:sw=2:ai:et:fileencoding=utf-8:syntax=css +//@media screen and (max-width: 40rem) { +//} + +/* TODO: import? +@media screen and (max-width: 40.0rem) + table + border-spacing: 0 + display: flex + width: 100% + + thead + border-right: solid .1rem $color-quinary + + td, + th + padding-left: 0 + + &:first-child + padding-left: 0 + + &:last-child + padding-right: 1.2rem + + tbody + display: flex + overflow-x: auto + white-space: nowrap + + tr + border-right: solid .1rem $color-quinary + + &:last-child + border-right: none + + td, + th + display: block + + &:first-child + padding-left: 1.2rem + + &:last-child + padding-right: 1.2rem +*/ + +// vim:ts=2:sw=2:ai:et:fileencoding=utf-8:syntax=scss diff --git a/docs/styles/milligram/typography.css b/docs/styles/milligram/typography.css index 398425a..419ebf9 100644 --- a/docs/styles/milligram/typography.css +++ b/docs/styles/milligram/typography.css @@ -1,6 +1,6 @@ // Adapted from: /*! - * Milligram v1.1.0 + * Milligram v1.3.0 * http://milligram.github.io * * Copyright (c) 2016 CJ Patoilo @@ -18,6 +18,10 @@ // Typography // –––––––––––––––––––––––––––––––––––––––––––––––––– +b, strong { + font-weight: bold; +} + p { margin-top: 0; } @@ -29,7 +33,7 @@ h4, h5, h6 { font-weight: 300; - letter-spacing: -.1rem; + letter-spacing: -.1rem; // JJOR: set again in _heading margin-bottom: calc(&TypographyScale * 2.0rem); margin-top: 0; // calc(&TypographyScale * 0) } @@ -42,13 +46,14 @@ h6 { } } -&_heading{h1}{4.0rem}{-0.1rem}{ 1.2} +&_heading{h1}{4.6rem}{-0.1rem}{ 1.2} &_heading{h2}{3.6rem}{-0.1rem}{ 1.25} -&_heading{h3}{3.0rem}{-0.1rem}{ 1.3} -&_heading{h4}{2.4rem}{-0.08rem}{1.35} +&_heading{h3}{2.8rem}{-0.1rem}{ 1.3} +&_heading{h4}{2.2rem}{-0.08rem}{1.35} &_heading{h5}{1.8rem}{-0.5rem}{ 1.5} &_heading{h6}{1.6rem}{ 0.0rem}{ 1.4} +/* JJOR: Moved? Deleted? // Larger than mobile screen @media (min-width: 40rem) { // Safari desktop has a bug using `rem`, but Safari mobile works h1 { font-size: calc(&TypographyScale * 5.0rem); } @@ -58,8 +63,9 @@ h6 { h5 { font-size: calc(&TypographyScale * 2.4rem); } h6 { font-size: calc(&TypographyScale * 1.5rem); } } +*/ // JJOR q { quotes: "“" "”" "‘" "’"; } -// vim:ts=2:sw=2:ai:et:fileencoding=utf-8:syntax=css +// vim:ts=2:sw=2:ai:et:fileencoding=utf-8:syntax=scss diff --git a/docs/styles/milligram/utility.css b/docs/styles/milligram/utility.css index 43b4ba1..74f4c69 100644 --- a/docs/styles/milligram/utility.css +++ b/docs/styles/milligram/utility.css @@ -1,6 +1,6 @@ // Adapted from: /*! - * Milligram v1.1.0 + * Milligram v1.3.0 * http://milligram.github.io * * Copyright (c) 2016 CJ Patoilo @@ -19,7 +19,7 @@ } // Float either direction -// JJOR: prefixed +// JJOR: prefixed with % &SEL{%float-right} { float: right; } @@ -28,4 +28,4 @@ float: left; } -// vim:ts=2:sw=2:ai:et:fileencoding=utf-8:syntax=css +// vim:ts=2:sw=2:ai:et:fileencoding=utf-8:syntax=scss