@davidsouther/jiffies 1.0.0-beta.1 → 1.0.0

package/src/pico/layout/_flex.scss

@@ -0,0 +1,46 @@
+.flex {
+  display: flex;
+  flex-direction: column;
+
+  &.row {
+    flex-direction: row;
+
+    &.inline > * {
+      display: inline-block;
+    }
+  }
+
+  &.justify-around {
+    justify-content: space-around;
+  }
+
+  &.justify-between {
+    justify-content: space-between;
+  }
+
+  &.justify-center {
+    justify-content: center;
+  }
+
+  &.align-baseline {
+    align-items: baseline;
+  }
+
+  &.align-center {
+    align-items: center;
+  }
+
+  &.align-stretch {
+    align-items: stretch;
+  }
+
+  &.align-end {
+    align-items: end;
+  }
+
+  @for $i from 1 through 4 {
+    & > .flex-#{$i} {
+      flex: $i;
+    }
+  }
+}

package/src/pico/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
+    }
+  }
+}

package/src/pico/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);
+  }
+}

package/src/pico/layout/_section.scss

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

package/src/pico/layout/_sectioning.scss

@@ -0,0 +1,53 @@
+/**
+ * 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 v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+// ––––––––––––––––––––
+
+// Render the `main` element consistently in IE
+main {
+  display: block;
+}
+
+// Pico
+// ––––––––––––––––––––
+
+// 1. Remove the margin in all browsers (opinionated)
+// 2. Body should be at least the height of the viewport (opinionated)
+body {
+  width: 100%;
+  min-height: 100vh; // 2
+  margin: 0; // 1
+
+  @if $enable-viewport == all {
+    > header,
+    > main,
+    > footer {
+      @include centered-viewport();
+    }
+  } @else if $enable-viewport == main {
+    > header,
+    > footer {
+      width: 100%;
+      margin: 0 auto;
+      padding: 0 var(--spacing);
+    }
+    > main {
+      // Semantic container
+      padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
+      @include centered-viewport();
+    }
+  } @else {
+    > header,
+    > main,
+    > footer {
+      width: 100%;
+      margin: 0 auto;
+      padding: 0 var(--spacing);
+    }
+  }
+}

package/src/pico/pico.scss

@@ -0,0 +1,60 @@
+// Config
+@import "variables";
+
+@layer reset, theme, layout, content, component, utility, user;
+
+@layer reset {
+  @import "reset/document";
+  @import "reset/typography";
+  @import "reset/embedded";
+  @import "reset/button";
+  @import "reset/form";
+  @import "reset/table";
+  @import "reset/misc";
+  @import "reset/nav";
+  @import "reset/progress";
+}
+
+@layer theme {
+  @import "themes/default";
+}
+
+@layer layout {
+  @import "layout/document"; // html
+  @import "layout/sectioning"; // body, header, main, footer
+  @import "layout/container"; // .container, .container-fluid
+  @import "layout/section"; // section
+  @import "layout/flex"; // .flex-*
+  @import "layout/grid"; // .grid
+  @import "layout/scroller"; // figure
+}
+
+@layer content {
+  @import "content/typography"; // a, headings, p, ul, blockquote, ...
+  @import "content/embedded"; // audio, canvas, iframe, img, svg, video
+  @import "content/button"; // button, a[role=button], type=button, type=submit ...
+  @import "content/form"; // input, select, textarea, label, fieldset, legend
+  @import "content/toggle"; // type=checkbox, type=radio, role=switch
+  @import "content/form-alt"; // type=color, type=date, type=file, type=search, ...
+  @import "content/table"; // table, tr, td, ...
+  @import "content/code"; // pre, code, ...
+}
+
+@layer component {
+  @import "components/accordion"; // details, summary
+  @import "components/card"; // article
+  @import "components/modal"; // dialog
+  @import "components/nav"; // nav
+  @import "components/progress"; // progress
+  @import "components/dropdown"; // details[role="list"], li[role="list"]
+  @import "components/property"; // dl, dt, dd
+  @import "components/button-group"; // .input-group, .button-group, fieldset
+}
+
+// Utilities
+@layer utility {
+  @import "utilities/loading"; // aria-busy=true
+  @import "utilities/tooltip"; // data-tooltip
+  @import "utilities/accessibility"; // -ms-touch-action, aria-*
+  @import "utilities/reduce-motion"; // prefers-reduced-motion
+}

package/src/pico/reset/_accessibility.scss

@@ -0,0 +1,34 @@
+// Change the cursor on control elements in all browsers (opinionated)
+[aria-controls] {
+  cursor: pointer;
+}
+
+// Change the cursor on disabled, not-editable, or otherwise inoperable elements in all browsers (opinionated)
+[aria-disabled="true"],
+[disabled] {
+  cursor: not-allowed;
+}
+
+// Change the display on visually hidden accessible elements in all browsers (opinionated)
+[aria-hidden="false"][hidden] {
+  display: initial;
+}
+
+[aria-hidden="false"][hidden]:not(:focus) {
+  clip: rect(0, 0, 0, 0);
+  position: absolute;
+}
+
+// User interaction
+// Remove the tapping delay in IE 10
+a,
+area,
+button,
+input,
+label,
+select,
+summary,
+textarea,
+[tabindex] {
+  -ms-touch-action: manipulation;
+}

package/src/pico/reset/_button.scss

@@ -0,0 +1,17 @@
+// 1. Change the font styles in all browsers
+// 2. Remove the margin on controls in Safari
+// 3. Show the overflow in Edge
+button {
+  margin: 0; // 2
+  overflow: visible; // 3
+  font-family: inherit; // 1
+  text-transform: none; // 1
+}
+
+// Correct the inability to style buttons in iOS and Safari
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}

package/src/pico/reset/_code.scss

@@ -0,0 +1,15 @@
+// 1. Correct the inheritance and scaling of font size in all browsers
+// 2. Correct the odd `em` font sizing in all browsers
+pre,
+code,
+kbd,
+samp {
+  font-size: 0.875em; // 2
+  font-family: var(--font-family); // 1
+}
+
+// Prevent overflow of the container in all browsers (opinionated)
+pre {
+  -ms-overflow-style: scrollbar;
+  overflow: auto;
+}

package/src/pico/reset/_document.scss

@@ -0,0 +1,48 @@
+/**
+ * Document
+ * Content-box & Responsive typography
+ */
+
+// Reboot based on :
+// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+// ––––––––––––––––––––
+
+// 1. Add border box sizing in all browsers (opinionated)
+// 2. Backgrounds do not repeat by default (opinionated)
+*,
+*::before,
+*::after {
+  box-sizing: border-box; // 1
+  background-repeat: no-repeat; // 2
+}
+
+// 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. Use the default cursor in all browsers (opinionated)
+// 2. Change the line height in all browsers (opinionated)
+// 3. Breaks words to prevent overflow in all browsers (opinionated)
+// 4. Use a 4-space tab width in all browsers (opinionated)
+// 5. Remove the grey highlight on links in iOS (opinionated)
+// 6. Prevent adjustments of font size after orientation changes in iOS
+:where(:root) {
+  // -webkit-tap-highlight-color: transparent; // 5
+  -webkit-text-size-adjust: 100%; // 6
+  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); // 2
+  font-family: var(--font-family);
+  overflow-wrap: break-word; // 3
+  cursor: default; // 1
+  tab-size: 4; // 4
+}

package/src/pico/reset/_embedded.scss

@@ -0,0 +1,39 @@
+// Change the alignment on media elements in all browsers (opinionated)
+:where(audio, canvas, iframe, img, svg, video) {
+  vertical-align: middle;
+}
+
+// Add the correct display in IE 9-
+audio,
+video {
+  display: inline-block;
+}
+
+// Add the correct display in iOS 4-7
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+// Remove the border on iframes in all browsers (opinionated)
+:where(iframe) {
+  border-style: none;
+}
+
+// 1. Remove the border on images inside links in IE 10.
+// 2. Responsive by default
+img {
+  max-width: 100%; // 2
+  height: auto; // 2
+  border-style: none; // 1
+}
+
+// Change the fill color to match the text color in all browsers (opinionated)
+:where(svg:not([fill])) {
+  fill: currentColor;
+}
+
+// Hide the overflow in IE
+svg:not(:root) {
+  overflow: hidden;
+}

package/src/pico/reset/_form.scss

@@ -0,0 +1,97 @@
+// 1. Change the font styles in all browsers
+// 2. Remove the margin in Firefox and Safari
+input,
+optgroup,
+select,
+textarea {
+  margin: 0; // 2
+  font-size: 1rem; // 1
+  line-height: var(--line-height); // 1
+  font-family: inherit; // 1
+  letter-spacing: inherit; // 2
+}
+
+// Show the overflow in IE.
+input {
+  overflow: visible;
+}
+
+// Remove the inheritance of text transform in Edge, Firefox, and IE
+select {
+  text-transform: none;
+}
+
+// 1. Correct the text wrapping in Edge and IE
+// 2. Correct the color inheritance from `fieldset` elements in IE
+// 3. Remove the padding so developers are not caught out when they zero out
+// `fieldset` elements in all browsers
+legend {
+  max-width: 100%; // 1
+  padding: 0; // 3
+  color: inherit; // 2
+  white-space: normal; // 1
+}
+
+// 1. Remove the default vertical scrollbar in IE
+textarea {
+  overflow: auto; // 1
+}
+
+// Remove the padding in IE 10
+[type="checkbox"],
+[type="radio"] {
+  padding: 0;
+}
+
+// Correct the cursor style of increment and decrement buttons in Safari
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+// 1. Correct the odd appearance in Chrome and Safari
+// 2. Correct the outline style in Safari
+[type="search"] {
+  -webkit-appearance: textfield; // 1
+  outline-offset: -2px; // 2
+}
+
+// Remove the inner padding in Chrome and Safari on macOS
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+// 1. Correct the inability to style clickable types in iOS and Safari
+// 2. Change font properties to `inherit` in Safari
+::-webkit-file-upload-button {
+  -webkit-appearance: button; // 1
+  font: inherit; // 2
+}
+
+// Remove the inner border and padding of focus outlines in Firefox
+::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+//  Remove the focus outline in Firefox
+:-moz-focusring {
+  outline: none;
+}
+
+// Remove the additional :invalid styles in Firefox
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+// Change the inconsistent appearance in IE (opinionated)
+::-ms-expand {
+  display: none;
+}
+
+// Remove the border and padding in all browsers (opinionated)
+[type="file"],
+[type="range"] {
+  padding: 0;
+  border-width: 0;
+}

package/src/pico/reset/_misc.scss

@@ -0,0 +1,23 @@
+// 1. Correct the inheritance of border color in Firefox
+// 2. Add the correct box sizing in Firefox
+hr {
+  height: 0; // 2
+  border: 0;
+  border-top: 1px solid var(--muted-border-color);
+  color: inherit; // 1
+}
+
+// Add the correct display in IE 10+
+[hidden],
+template {
+  @if $enable-important {
+    display: none !important;
+  } @else {
+    display: none;
+  }
+}
+
+// Add the correct display in IE 9-
+canvas {
+  display: inline-block;
+}

package/src/pico/reset/_nav.scss

@@ -0,0 +1,5 @@
+// Prevent VoiceOver from ignoring list semantics in Safari (opinionated)
+:where(nav li)::before {
+  float: left;
+  content: "\200B";
+}

package/src/pico/reset/_progress.scss

@@ -0,0 +1,4 @@
+progress {
+  display: inline-block; // 1
+  vertical-align: baseline; // 2
+}

package/src/pico/reset/_table.scss

@@ -0,0 +1,8 @@
+// 1. Collapse border spacing in all browsers (opinionated)
+// 2. Remove text indentation from table contents in Chrome, Edge, and Safari
+:where(table) {
+  width: 100%;
+  border-collapse: collapse; // 1
+  border-spacing: 0;
+  text-indent: 0; // 2
+}

package/src/pico/reset/_typography.scss

@@ -0,0 +1,25 @@
+// reboot based on :
+// - normalize.css v8.0.1 | mit license | github.com/necolas/normalize.css
+// - sanitize.css v13.0.0 | 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;
+}

package/src/pico/themes/default/_colors.scss

@@ -0,0 +1,65 @@
+// Black & White
+$black: #000 !default;
+$white: #fff !default;
+
+// 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;
+
+// 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;