pico-rails 1.4.4

data/app/assets/stylesheets/scss/content/_typography.scss

@@ -0,0 +1,292 @@
+/**
+ * Typography
+ */
+
+// Reboot based on :
+// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+// ––––––––––––––––––––
+
+// Add the correct font weight in Chrome, Edge, and Safari
+b,
+strong {
+  font-weight: bolder;
+}
+
+// Prevent `sub` and `sup` elements from affecting the line height in all browsers
+sub,
+sup {
+  position: relative;
+  font-size: 0.75em;
+  line-height: 0;
+  vertical-align: baseline;
+}
+sub {
+  bottom: -0.25em;
+}
+sup {
+  top: -0.5em;
+}
+
+// Remove the margin on nested lists in Chrome, Edge, IE, and Safari
+dl dl,
+dl ol,
+dl ul,
+ol dl,
+ul dl {
+  margin: 0;
+}
+
+// Remove the margin on nested lists in Edge 18- and IE
+ol ol,
+ol ul,
+ul ol,
+ul ul {
+  margin: 0;
+}
+
+// Pico
+// ––––––––––––––––––––
+
+address,
+blockquote,
+dl,
+figure,
+form,
+ol,
+p,
+pre,
+table,
+ul {
+  margin-top: 0;
+  margin-bottom: var(--typography-spacing-vertical);
+  color: var(--color);
+  font-style: normal;
+  font-weight: var(--font-weight);
+  font-size: var(--font-size);
+}
+
+// Links
+// 1. Remove the gray background on active links in IE 10
+a {
+  --color: var(--primary);
+  --background-color: transparent;
+  outline: none;
+  background-color: var(--background-color); // 1
+  color: var(--color);
+  text-decoration: var(--text-decoration);
+
+  @if $enable-transitions {
+    transition: background-color var(--transition), color var(--transition),
+      text-decoration var(--transition), box-shadow var(--transition);
+  }
+
+  &:hover,
+  &:active,
+  &:focus {
+    --color: var(--primary-hover);
+    --text-decoration: underline;
+  }
+
+  &:focus {
+    --background-color: var(--primary-focus);
+  }
+
+  @if $enable-classes {
+    // Secondary
+    &.secondary {
+      --color: var(--secondary);
+
+      &:hover,
+      &:active,
+      &:focus {
+        --color: var(--secondary-hover);
+      }
+
+      &:focus {
+        --background-color: var(--secondary-focus);
+      }
+    }
+
+    // Contrast
+    &.contrast {
+      --color: var(--contrast);
+
+      &:hover,
+      &:active,
+      &:focus {
+        --color: var(--contrast-hover);
+      }
+
+      &:focus {
+        --background-color: var(--contrast-focus);
+      }
+    }
+  }
+}
+
+// Headings
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 0;
+  margin-bottom: var(--typography-spacing-vertical);
+  color: var(--color);
+  font-weight: var(--font-weight);
+  font-size: var(--font-size);
+  font-family: var(--font-family);
+}
+
+h1 {
+  --color: var(--h1-color);
+}
+h2 {
+  --color: var(--h2-color);
+}
+h3 {
+  --color: var(--h3-color);
+}
+h4 {
+  --color: var(--h4-color);
+}
+h5 {
+  --color: var(--h5-color);
+}
+h6 {
+  --color: var(--h6-color);
+}
+
+// Margin-top for headings after a typography block
+address,
+blockquote,
+dl,
+figure,
+form,
+ol,
+p,
+pre,
+table,
+ul {
+  & ~ h1,
+  & ~ h2,
+  & ~ h3,
+  & ~ h4,
+  & ~ h5,
+  & ~ h6 {
+    margin-top: var(--typography-spacing-vertical);
+  }
+}
+
+// Heading group
+@if $enable-classes == false {
+  hgroup {
+    margin-bottom: var(--typography-spacing-vertical);
+
+    > * {
+      margin-bottom: 0;
+    }
+
+    > *:last-child {
+      --color: var(--muted-color);
+      --font-weight: unset;
+      font-size: 1rem;
+      font-family: unset;
+    }
+  }
+}
+
+@if $enable-classes {
+  hgroup,
+  .headings {
+    margin-bottom: var(--typography-spacing-vertical);
+
+    > * {
+      margin-bottom: 0;
+    }
+
+    > *:last-child {
+      --color: var(--muted-color);
+      --font-weight: unset;
+      font-size: 1rem;
+      font-family: unset;
+    }
+  }
+}
+
+// Paragraphs
+p {
+  margin-bottom: var(--typography-spacing-vertical);
+}
+
+// Small
+small {
+  font-size: var(--font-size);
+}
+
+// Lists
+ul,
+ol {
+  padding-right: 0;
+  padding-left: var(--spacing);
+  padding-inline-start: var(--spacing);
+  padding-inline-end: 0;
+
+  li {
+    margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
+  }
+}
+
+ul li {
+  list-style: square;
+}
+
+// Highlighted text
+mark {
+  padding: 0.125rem 0.25rem;
+  background-color: var(--mark-background-color);
+  color: var(--mark-color);
+  vertical-align: baseline;
+}
+
+// Blockquote
+blockquote {
+  display: block;
+  margin: var(--typography-spacing-vertical) 0;
+  padding: var(--spacing);
+  border-right: none;
+  border-left: 0.25rem solid var(--blockquote-border-color);
+  border-inline-start: 0.25rem solid var(--blockquote-border-color);
+  border-inline-end: none;
+
+  footer {
+    margin-top: calc(var(--typography-spacing-vertical) * 0.5);
+    color: var(--blockquote-footer-color);
+  }
+}
+
+// Abbreviations
+// 1. Remove underline decoration in Chrome, Edge, IE, Opera, and Safari
+abbr[title] {
+  border-bottom: 1px dotted;
+  text-decoration: none; // 1
+  cursor: help;
+}
+
+// Ins
+ins {
+  color: var(--ins-color);
+  text-decoration: none;
+}
+
+// del
+del {
+  color: var(--del-color);
+}
+
+// selection
+::selection {
+  background-color: var(--primary-focus);
+}

data/app/assets/stylesheets/scss/layout/_container.scss

@@ -0,0 +1,42 @@
+@if ($enable-class-container and $enable-classes) {
+  /**
+ * Container
+ */
+
+  .container,
+  .container-fluid {
+    width: 100%;
+    margin-right: auto;
+    margin-left: auto;
+    padding-right: var(--spacing);
+    padding-left: var(--spacing);
+  }
+
+  .container {
+    @if map-get($breakpoints, "sm") {
+      @media (min-width: map-get($breakpoints, "sm")) {
+        max-width: map-get($viewports, "sm");
+        padding-right: 0;
+        padding-left: 0;
+      }
+    }
+
+    @if map-get($breakpoints, "md") {
+      @media (min-width: map-get($breakpoints, "md")) {
+        max-width: map-get($viewports, "md");
+      }
+    }
+
+    @if map-get($breakpoints, "lg") {
+      @media (min-width: map-get($breakpoints, "lg")) {
+        max-width: map-get($viewports, "lg");
+      }
+    }
+
+    @if map-get($breakpoints, "xl") {
+      @media (min-width: map-get($breakpoints, "xl")) {
+        max-width: map-get($viewports, "xl");
+      }
+    }
+  }
+}

data/app/assets/stylesheets/scss/layout/_document.scss

@@ -0,0 +1,45 @@
+/**
+ * Document
+ * Content-box & Responsive typography
+ */
+
+// Reboot based on :
+// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+// ––––––––––––––––––––
+
+// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`
+*,
+*::before,
+*::after {
+  box-sizing: border-box; // 1
+}
+
+// 1. Add text decoration inheritance in all browsers (opinionated)
+// 2. Add vertical alignment inheritance in all browsers (opinionated)
+::before,
+::after {
+  text-decoration: inherit; // 1
+  vertical-align: inherit; // 2
+}
+
+// 1. Correct the line height in all browsers
+// 2. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS
+// 3. Change the default tap highlight to be completely transparent in iOS
+// 4. Use the default cursor in all browsers (opinionated)
+// 5. Use a 4-space tab width in all browsers (opinionated)
+// 6. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS
+html {
+  -webkit-text-size-adjust: 100%; // 2
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 3
+  -ms-text-size-adjust: 100%; // 6
+  text-rendering: optimizeLegibility;
+  background-color: var(--background-color);
+  color: var(--color);
+  font-weight: var(--font-weight);
+  font-size: var(--font-size);
+  line-height: var(--line-height); // 1
+  font-family: var(--font-family);
+  cursor: default; // 4
+  tab-size: 4; // 5
+}

data/app/assets/stylesheets/scss/layout/_grid.scss

@@ -0,0 +1,24 @@
+@if ($enable-classes and $enable-grid) {
+  /**
+ * Grid
+ * Minimal grid system with auto-layout columns
+ */
+
+  .grid {
+    grid-column-gap: var(--grid-spacing-horizontal);
+    grid-row-gap: var(--grid-spacing-vertical);
+    display: grid;
+    grid-template-columns: 1fr;
+    margin: 0;
+
+    @if map-get($breakpoints, "lg") {
+      @media (min-width: map-get($breakpoints, "lg")) {
+        grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
+      }
+    }
+
+    & > * {
+      min-width: 0; // HACK for childs in overflow
+    }
+  }
+}

data/app/assets/stylesheets/scss/layout/_scroller.scss

@@ -0,0 +1,16 @@
+/**
+ * Horizontal scroller (<figure>)
+ */
+
+// Wrapper to make any content responsive across all viewports
+figure {
+  display: block;
+  margin: 0;
+  padding: 0;
+  overflow-x: auto;
+
+  figcaption {
+    padding: calc(var(--spacing) * 0.5) 0;
+    color: var(--muted-color);
+  }
+}

data/app/assets/stylesheets/scss/layout/_section.scss

@@ -0,0 +1,8 @@
+/**
+ * Section
+ * Responsive spacings for section
+ */
+
+section {
+  margin-bottom: var(--block-spacing-vertical);
+}

data/app/assets/stylesheets/scss/layout/_sectioning.scss

@@ -0,0 +1,69 @@
+/**
+ * Sectioning
+ * Container and responsive spacings for header, main, footer
+ */
+
+// Reboot based on :
+// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+// ––––––––––––––––––––
+
+// Render the `main` element consistently in IE
+main {
+  display: block;
+}
+
+// Pico
+// ––––––––––––––––––––
+
+body {
+  width: 100%;
+  margin: 0;
+
+  > header,
+  > main,
+  > footer {
+    width: 100%;
+    margin-right: auto;
+    margin-left: auto;
+
+    // Semantic container
+    @if $enable-semantic-container {
+      padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
+
+      // Centered viewport
+      @if $enable-viewport {
+        @if map-get($breakpoints, "sm") and $enable-viewport {
+          @media (min-width: map-get($breakpoints, "sm")) {
+            max-width: map-get($viewports, "sm");
+            padding-right: 0;
+            padding-left: 0;
+          }
+        }
+
+        @if map-get($breakpoints, "md") and $enable-viewport {
+          @media (min-width: map-get($breakpoints, "md")) {
+            max-width: map-get($viewports, "md");
+          }
+        }
+
+        @if map-get($breakpoints, "lg") and $enable-viewport {
+          @media (min-width: map-get($breakpoints, "lg")) {
+            max-width: map-get($viewports, "lg");
+          }
+        }
+
+        @if map-get($breakpoints, "xl") and $enable-viewport {
+          @media (min-width: map-get($breakpoints, "xl")) {
+            max-width: map-get($viewports, "xl");
+          }
+        }
+      }
+    }
+
+    // Semantic container
+    @else {
+      padding: var(--block-spacing-vertical) 0;
+    }
+  }
+}

data/app/assets/stylesheets/scss/themes/default/_colors.scss

@@ -0,0 +1,65 @@
+// Navy-Grey
+$grey-hue: 205 !default;
+$grey-50: hsl($grey-hue, 20%, 94%) !default;
+$grey-100: hsl($grey-hue, 18%, 86%) !default;
+$grey-200: hsl($grey-hue, 16%, 77%) !default;
+$grey-300: hsl($grey-hue, 14%, 68%) !default;
+$grey-400: hsl($grey-hue, 12%, 59%) !default;
+$grey-500: hsl($grey-hue, 10%, 50%) !default;
+$grey-600: hsl($grey-hue, 15%, 41%) !default;
+$grey-700: hsl($grey-hue, 20%, 32%) !default;
+$grey-800: hsl($grey-hue, 25%, 23%) !default;
+$grey-900: hsl($grey-hue, 30%, 15%) !default;
+
+// Light Blue
+$primary-hue: 195 !default;
+$primary-50: hsl($primary-hue, 90%, 94%) !default;
+$primary-100: hsl($primary-hue, 88%, 86%) !default;
+$primary-200: hsl($primary-hue, 86%, 77%) !default;
+$primary-300: hsl($primary-hue, 84%, 68%) !default;
+$primary-400: hsl($primary-hue, 82%, 59%) !default;
+$primary-500: hsl($primary-hue, 80%, 50%) !default;
+$primary-600: hsl($primary-hue, 85%, 41%) !default;
+$primary-700: hsl($primary-hue, 90%, 32%) !default;
+$primary-800: hsl($primary-hue, 95%, 23%) !default;
+$primary-900: hsl($primary-hue, 100%, 15%) !default;
+
+// Black & White
+$black: #000 !default;
+$white: #fff !default;
+
+// Amber
+$amber-50: #fff8e1 !default;
+$amber-100: #ffecb3 !default;
+$amber-200: #ffe082 !default;
+$amber-300: #ffd54f !default;
+$amber-400: #ffca28 !default;
+$amber-500: #ffc107 !default;
+$amber-600: #ffb300 !default;
+$amber-700: #ffa000 !default;
+$amber-800: #ff8f00 !default;
+$amber-900: #ff6f00 !default;
+
+// Green
+$green-50: #e8f5e9 !default;
+$green-100: #c8e6c9 !default;
+$green-200: #a5d6a7 !default;
+$green-300: #81c784 !default;
+$green-400: #66bb6a !default;
+$green-500: #4caf50 !default;
+$green-600: #43a047 !default;
+$green-700: #388e3c !default;
+$green-800: #2e7d32 !default;
+$green-900: #1b5e20 !default;
+
+// Red
+$red-50: #ffebee !default;
+$red-100: #ffcdd2 !default;
+$red-200: #ef9a9a !default;
+$red-300: #e57373 !default;
+$red-400: #ef5350 !default;
+$red-500: #f44336 !default;
+$red-600: #e53935 !default;
+$red-700: #d32f2f !default;
+$red-800: #c62828 !default;
+$red-900: #b71c1c !default;