shift-ui-kit 0.0.40

data/assets/images/section-heading-icons/user-profile.svg

@@ -0,0 +1,8 @@
+<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
+  <g stroke="#666" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd">
+    <path fill="#fff" d="M3 10h54v40H3z" />
+    <path fill="#e2d5a9" stroke="#695924" d="M27.98 29L27 30.91h-2.335c-1.198 0-2.165.915-2.165 2.045V35h15v-2.045c0-1.128-.97-2.046-2.165-2.046h-2.623l-.98-1.91" />
+    <path fill="#e2d5a9" stroke="#695924" d="M24.248 20.366C24.448 17.37 26.954 15 30 15h5.765v5.368c.698.1 1.235.705 1.235 1.42v.424c0 .728-.54 1.33-1.248 1.422C35.552 26.63 33.046 29 30 29c-3.052 0-5.55-2.375-5.752-5.366-.704-.095-1.248-.702-1.248-1.422v-.424c0-.728.54-1.33 1.248-1.422z" />
+    <path d="M17 40h26m-22 4h18" stroke-linecap="square" />
+  </g>
+</svg>

data/assets/images/section-heading-icons/users.svg

@@ -0,0 +1,7 @@
+<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
+  <g transform="translate(3 4)" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-rule="evenodd">
+    <circle cx="27" cy="27" r="27" />
+    <path d="M23 33l-2.244 5.455H16.07c-2.806 0-5.07 2.136-5.07 4.772V48.5m32 0v-5.273c0-2.63-2.27-4.772-5.07-4.772h-5.362L30 33" />
+    <path fill="#d69090" stroke="#571111" d="M17.156 19.182c0 4.12-2.156 12.363-2.156 12.363S20.03 33 26.5 33 38 31.545 38 31.545s-2.156-8.242-2.156-12.363v-2.324c0-4.34-3.515-7.858-7.858-7.858h-2.972c-4.34 0-7.858 3.526-7.858 7.858v2.324z" />
+  </g>
+</svg>

data/assets/images/section-heading-icons/variants.svg

@@ -0,0 +1,7 @@
+<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
+  <g transform="rotate(45 24.42 48.713)" stroke="#223446" fill="none" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd">
+    <path fill="#a9b3bd" d="M6.938 0h16.124C23.022.328 23 .66 23 1c0 4.08 3.054 7.446 7 7.938V56H0V8.938C3.946 8.446 7 5.08 7 1c0-.34-.02-.672-.062-1z"/>
+    <circle fill="#ddd" cx="15" cy="9" r="3" />
+    <path d="M7 18v26.173M15 27v17.173M23 22v22.173" stroke-linecap="square" />
+  </g>
+</svg>

data/assets/itcss/1-settings/_breakpoints.scss

@@ -0,0 +1 @@
+$breakpoints: (sm: 480px, md: 640px, lg: 960px);

data/assets/itcss/1-settings/_colors.scss

@@ -0,0 +1,16 @@
+$colors: (
+  brand: #43678B,
+  info: #43678B,
+  unsafe: #AD2121,
+  warning: #D1B147,
+  accept: #21AD34,
+  highlight: #F6F0DB
+);
+
+// deprecated, replaced by color(brand) etc.
+$color-brand: map-get($colors, brand);
+$color-info: map-get($colors, info);
+$color-unsafe: map-get($colors, unsafe);
+$color-warning: map-get($colors, warning);
+$color-accept: map-get($colors, accept);
+$color-highlight: map-get($colors, highlight);

data/assets/itcss/1-settings/_index.scss

@@ -0,0 +1,9 @@
+@import 'colors';
+@import 'breakpoints';
+@import 'spacing';
+
+$baseFontSize: 1.3em;
+$h1FontSize: 2.4em;
+$h2FontSize: 2em;
+$h3FontSize: 1.6em;
+$DBbaseline: 23px;

data/assets/itcss/1-settings/_spacing.scss

@@ -0,0 +1,2 @@
+$default-spacing: 20px;
+$tight-spacing: $default-spacing / 2;

data/assets/itcss/2-tools/_color.scss

@@ -0,0 +1,17 @@
+@function color($key, $tone: base, $swatches: $colors) {
+
+  @if map-has-key($colors, $key) {
+    $color: map-get($colors, $key);
+    @if $tone == base {
+      @return $color;
+    } @else if $tone == muted {
+      @return desaturate(mix(#fff, $color), 10%);
+    } @else {
+      @warn "Unknown tone `#{$tone}` use for color function";
+    }
+  }
+
+  @warn "Unknown `#{$key}` in `#{$swatches}`.";
+  @return null;
+
+}

data/assets/itcss/2-tools/_index.scss

@@ -0,0 +1 @@
+@import 'color';

data/assets/itcss/3-generic/_animations.scss

@@ -0,0 +1,4 @@
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}

data/assets/itcss/3-generic/_clearfix.scss

@@ -0,0 +1,26 @@
+/**
+ * For modern browsers
+ * 1. The space content is one way to avoid an Opera bug when the
+ *    contenteditable attribute is included anywhere else in the document.
+ *    Otherwise it causes space to appear at the top and bottom of elements
+ *    that are clearfixed.
+ * 2. The use of `table` rather than `block` is only necessary if using
+ *    `:before` to contain the top-margins of child elements.
+ */
+.clearfix:before,
+.clearfix:after {
+    content: " "; /* 1 */
+    display: table; /* 2 */
+}
+
+.clearfix:after {
+    clear: both;
+}
+
+/**
+ * For IE 6/7 only
+ * Include this rule to trigger hasLayout and contain floats.
+ */
+.clearfix {
+    *zoom: 1;
+}

data/assets/itcss/3-generic/_fonts.scss

@@ -0,0 +1,31 @@
+@font-face {
+  font-family: 'DIN Next';
+  font-style: normal;
+  font-weight: normal;
+  src: url("/assets/fonts/din_next_regular.woff2") format("woff2"),
+       url("/assets/fonts/din_next_regular.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'DIN Next';
+  font-style: normal;
+  font-weight: bold;
+  src: url("/assets/fonts/din_next_medium.woff2") format("woff2"),
+       url("/assets/fonts/din_next_medium.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'DIN Next';
+  font-style: normal;
+  font-weight: lighter;
+  src: url("/assets/fonts/din_next_light.woff2") format("woff2"),
+       url("/assets/fonts/din_next_light.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'DIN Next';
+  font-style: italic;
+  font-weight: normal;
+  src: url("/assets/fonts/din_next_light_italic.woff2") format("woff2"),
+       url("/assets/fonts/din_next_light_italic.woff") format("woff");
+}

data/assets/itcss/3-generic/_index.scss

@@ -0,0 +1,4 @@
+@import 'reset';
+@import 'clearfix';
+@import 'animations';
+@import 'fonts';

data/assets/itcss/3-generic/_reset.scss

@@ -0,0 +1,40 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline; }
+
+/* HTML5 display-role reset for older browsers */
+
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+  display: block; }
+
+body {
+  line-height: 1; }
+
+ol, ul {
+  list-style: none; }
+
+blockquote, q {
+  quotes: none; }
+
+blockquote {
+  &:before, &:after {
+    content: '';
+    content: none; } }
+
+q {
+  &:before, &:after {
+    content: '';
+    content: none; } }
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0; }

data/assets/itcss/4-elements/_index.scss

@@ -0,0 +1,45 @@
+*, *:after, *:before {
+  font: inherit;
+  box-sizing: inherit;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+html, body {
+  height: 100%;
+  box-sizing: border-box;
+  font: 16px/1 "DIN Next", "Helvetica Neue Condensed", helvetica, sans-serif;
+}
+
+body {
+  background: #eee;
+}
+
+a, button, input { -webkit-tap-highlight-color: transparent }
+a, a:hover { text-decoration: none }
+button { color: inherit; border: 0; cursor: pointer }
+input { border-radius: 0 }
+input:-webkit-autofill { box-shadow: 0 0 0px 1000px white inset }
+table { table-layout: fixed }
+td, th { vertical-align: middle }
+
+h1 {
+  font-size: 1.5em;
+  margin-top: $default-spacing;
+  margin-bottom: $default-spacing;
+}
+
+h2 {
+  font-size: 1.25em;
+  margin-top: $default-spacing;
+  margin-bottom: $default-spacing;
+}
+
+h3 {
+  font-weight: bold;
+  margin-top: $tight-spacing;
+  margin-bottom: $tight-spacing;
+}

data/assets/itcss/5-objects/_index.scss

@@ -0,0 +1,5 @@
+@import 'o-breadcrumb';
+@import 'o-flash-message';
+@import 'o-grid';
+@import 'o-password-strength-meter';
+@import 'o-btn';

data/assets/itcss/5-objects/_o-breadcrumb.scss

@@ -0,0 +1,11 @@
+.o-breadcrumb {
+  display: inline-flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: center;
+  align-content: center;
+
+  &__item, &__separator {
+    margin-right: $tight-spacing;
+  }
+}

data/assets/itcss/5-objects/_o-btn.scss

@@ -0,0 +1,3 @@
+.o-btn {
+  display: inline-block;
+}

data/assets/itcss/5-objects/_o-flash-message.scss

@@ -0,0 +1,17 @@
+.o-flash-message {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  &--fixed {
+    position: fixed;
+    top: 15px;
+    left: 15px;
+    right: 15px;
+    z-index: 9999;
+  }
+
+  &--inline {
+    width: 100%;
+  }
+}

data/assets/itcss/5-objects/_o-grid.scss

@@ -0,0 +1,33 @@
+.o-grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: stretch;
+
+  &__cell {
+    min-width: 100%;
+    max-width: 100%;
+    flex: 1 1 100%;
+
+    @mixin grid-size($numerator, $denominator) {
+      $min-width: (100% / (($denominator + 1) / $numerator)) + 1%;
+      $max-width: 100% / ($denominator / $numerator);
+      min-width: $min-width;
+      max-width: $max-width;
+      flex-basis: $min-width;
+    }
+
+    $fractions: (1,2), (1,3), (2, 3), (3, 4), (1,4);
+    @each $numerator, $denominator in $fractions {
+      &--#{$numerator}\/#{$denominator} {
+        @include grid-size($numerator, $denominator);
+
+        @each $key, $size in $breakpoints {
+          @media (min-width: $size) {
+            &\@#{$key} { @include grid-size($numerator, $denominator); }
+          }
+        }
+      }
+    }
+  }
+}

data/assets/itcss/5-objects/_o-password-strength-meter.scss

@@ -0,0 +1,43 @@
+.o-password-strength-meter {
+  &__meter, &__label {
+    width: 100%;
+    display: block;
+  }
+
+  &__meter {
+    height: 3px;
+    appearance: none;
+
+    &, &::-webkit-meter-bar {
+      background: none;
+      background-color: rgba(0, 0, 0, 0.1);
+    }
+
+    &, &[value="0"], &[value="1"] {
+      &::-webkit-meter-optimum-value { background: $color-unsafe }
+      &::-moz-meter-bar { background: $color-unsafe }
+    }
+
+    &[value="2"] {
+      &::-webkit-meter-optimum-value { background: mix($color-warning, $color-unsafe) }
+      &::-moz-meter-bar { background: mix($color-warning, $color-unsafe) }
+    }
+
+    &[value="3"] {
+      &::-webkit-meter-optimum-value { background: $color-warning }
+      &::-moz-meter-bar { background: $color-warning }
+    }
+
+    &[value="4"] {
+      &::-webkit-meter-optimum-value { background: $color-accept }
+      &::-moz-meter-bar { background: $color-accept }
+    }
+  }
+
+  &__label {
+    margin-top: 5px;
+    &__feedback {
+      margin-left: 10px;
+    }
+  }
+}

data/assets/itcss/6-components/_c-action-bar.scss

@@ -0,0 +1,22 @@
+.c-action-bar {
+  position: relative;
+  text-align: center;
+
+  &__left-group {
+    position: absolute;
+    top: 0;
+    left: 0;
+    text-align: left;
+  }
+
+  &__middle-group {
+    display: inline-block;
+  }
+
+  &__right-group {
+    top: 0;
+    position: absolute;
+    right: 0;
+    text-align: right;
+  }
+}

data/assets/itcss/6-components/_c-app-loading.scss

@@ -0,0 +1,30 @@
+.c-app-loading {
+  min-width: 100vw;
+  min-height: 100vh;
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  &__icon {
+    width: 60px;
+    height: 60px;
+
+    display: block;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -30px;
+    margin-left: -30px;
+
+    background: url("/assets/images/app-loading.svg") center center no-repeat;
+    background-size: contain;
+
+    will-change: transform;
+    transform: rotate(0deg);
+
+    animation: spin 3s linear infinite;
+  }
+}

data/assets/itcss/6-components/_c-app.scss

@@ -0,0 +1,3 @@
+.c-app {
+  height: 100%;
+}

data/assets/itcss/6-components/_c-btn-default.scss

@@ -0,0 +1,62 @@
+.c-btn-default {
+  font-weight: bold;
+  border-width: 2px;
+  border-style: solid;
+  padding: 8px 10px;
+  border-radius: 3px;
+  background: none;
+  transition: border-color 0.2s ease, color 0.2s ease;
+
+  $base-color: $color-info;
+  border-color: desaturate(mix($base-color, #fff), 10%);
+  color: $base-color;
+  &:hover, &:active, &.is-loading {
+    border-color: $base-color;
+    color: darken($base-color, 10%);
+  }
+
+  &--accept {
+    $base-color: $color-accept;
+    border-color: desaturate(mix($base-color, #fff), 10%);
+    color: $base-color;
+    &:hover, &:active, &.is-loading {
+      border-color: $base-color;
+      color: darken($base-color, 10%);
+    }
+  }
+
+  &--unsafe {
+    $base-color: $color-unsafe;
+    border-color: desaturate(mix($base-color, #fff), 10%);
+    color: $base-color;
+    &:hover, &:active, &.is-loading {
+      border-color: $base-color;
+      color: darken($base-color, 10%);
+    }
+  }
+
+  &--wide {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
+  &--small {
+    font-size: 0.8rem;
+    padding: 6px 8px;
+  }
+
+  &--disabled {
+    &, &:hover, &:active {
+      border-color: #ccc;
+      color: #ccc;
+      cursor: not-allowed;
+    }
+  }
+
+  &.is-loading {
+    opacity: 0.5;
+    cursor: wait;
+  }
+
+  & + & { margin-left: 10px; }
+}