Upgraded milligram

fadado · Nov 15, 2018 · f09c0be · f09c0be
1 parent 66f506d
commit f09c0be
Show file tree

Hide file tree

Showing 15 changed files with 114 additions and 58 deletions.
diff --git 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
@@ -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
@@ -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,25 +78,25 @@
 
 &_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},
 &_buttons_active{.button_clear[disabled]} {
   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
@@ -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
@@ -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
@@ -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
@@ -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,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="%23d1d1d1" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>') 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,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="%239b4dca" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>')
 }
 
 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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