shift-ui-kit 0.0.40

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

@@ -0,0 +1,16 @@
+.c-default-breadcrumb {
+  color: #999;
+
+  &__separator::after {
+    content: "»";
+    color: inherit;
+  }
+
+  &__item {
+    color: inherit;
+
+    &:hover, &:active {
+      color: #333;
+    }
+  }
+}

data/assets/itcss/6-components/_c-display-layers.scss

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

data/assets/itcss/6-components/_c-dropdown-group.scss

@@ -0,0 +1,3 @@
+.c-dropdown-group {
+  position: relative;
+}

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

@@ -0,0 +1,183 @@
+.c-dropdown {
+  display: inline-block;
+  position: relative;
+
+  &__label {
+    height: inherit;
+    padding: 8px 40px 8px 10px;
+    border: 0;
+    outline: 0;
+    position: relative;
+    cursor: pointer;
+    background-color: $color-info;
+    color: white;
+    transition: background-color 0.2s ease;
+
+    &::after {
+      width: 14px;
+      display: block;
+      content: " ";
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: 15px;
+      background: url("/assets/images/dropdown-arrow.svg") center center no-repeat;
+      background-size: 14px auto;
+      opacity: 0.3;
+      transition: opacity 0.2s ease;
+    }
+
+    &:hover, &:focus {
+      background-color: lighten($color-info, 10%);
+      &::after {
+        opacity: 1;
+      }
+    }
+  }
+
+  &__options {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 2;
+    background: #fff;
+    box-shadow: rgba(#000, 0.3) 0 1px 1px;
+    min-width: 100%;
+
+    &__option {
+      padding: 10px;
+      display: block;
+      cursor: pointer;
+      background: #fff;
+      color: #666;
+      transition: background-color 0.2s ease, color 0.2s ease;
+      font-weight: bold;
+      white-space: nowrap;
+      & + & {
+        border-top: 1px solid #eee;
+      }
+      &:hover, &:focus {
+        background-color: #eee;
+        color: #000;
+      }
+    }
+  }
+
+  &--open &__label {
+
+    &::after {
+      opacity: 1;
+    }
+  }
+
+  &--open &__options {
+    display: block;
+  }
+}
+
+
+// .c-dropdown {
+//   position: static;
+//   flex-grow: 1;
+//
+//   @media (min-width: 450px) {
+//     position: relative;
+//   }
+//
+//   &__label {
+//     width: 100%;
+//     height: inherit;
+//     padding-left: 10px;
+//     padding-right: 30px;
+//     border: 0;
+//     outline: 0;
+//     position: relative;
+//     line-height: 50px;
+//     cursor: pointer;
+//     background: transparent;
+//     transition: background-color 0.2s ease;
+//
+//     &::after {
+//       width: 14px;
+//       display: block;
+//       content: " ";
+//       position: absolute;
+//       top: 0;
+//       bottom: 0;
+//       right: 10px;
+//       background: url("/assets/images/dropdown-arrow.svg") center center no-repeat;
+//       background-size: 14px auto;
+//       opacity: 0.3;
+//       transition: opacity 0.2s ease;
+//     }
+//
+//     @media (min-width: 450px) {
+//       padding-left: 15px;
+//       padding-right: 40px;
+//       &::after { right: 15px }
+//     }
+//
+//     &:hover, &:focus {
+//       background-color: rgba(#000, 0.1);
+//       &::after {
+//         opacity: 1;
+//       }
+//     }
+//   }
+//
+//   &__options {
+//     display: none;
+//     position: absolute;
+//     top: 100%;
+//     left: 0;
+//     right: 0;
+//     z-index: 2;
+//     background: #fff;
+//     box-shadow: rgba(#000, 0.3) 0 1px 1px;
+//
+//     @media (min-width: 450px) {
+//       width: 50vw;
+//     }
+//
+//     @media (min-width: 640px) {
+//       width: 200px;
+//       right: auto;
+//     }
+//
+//     &__option {
+//       padding: 10px;
+//       display: block;
+//       cursor: pointer;
+//       background: #fff;
+//       color: #666;
+//       transition: background-color 0.2s ease, color 0.2s ease;
+//       font-weight: bold;
+//       & + & {
+//         border-top: 1px solid #eee;
+//       }
+//       &:hover, &:focus {
+//         background-color: #eee;
+//         color: #000;
+//       }
+//     }
+//   }
+//
+//   @media (min-width: 450px) {
+//     &:last-child &__options {
+//       left: auto;
+//       right: 0;
+//     }
+//   }
+//
+//   &--open &__label {
+//     background-color: rgba(#000, 0.1);
+//     &::after {
+//       opacity: 1;
+//     }
+//   }
+//
+//   &--open &__options {
+//     display: block;
+//   }
+// }

data/assets/itcss/6-components/_c-examples-nav.scss

@@ -0,0 +1,21 @@
+.c-examples-nav {
+  background: #444;
+  width: 200px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+
+  &__item {
+    &__link {
+      display: block;
+      color: #FFF;
+      line-height: 30px;
+      padding: 10px;
+    }
+
+    &--active {
+      background: #555;
+    }
+  }
+}

data/assets/itcss/6-components/_c-flash-message.scss

@@ -0,0 +1,40 @@
+.c-flash-message {
+  margin-bottom: 20px;
+  padding: 15px;
+
+  &--success {
+    $color: $color-accept;
+    color: mix(#000, $color);
+    background: desaturate(mix(#fff, $color), 10%);
+  }
+
+  &--info {
+    $color: $color-info;
+    color: mix(#000, $color);
+    background: desaturate(mix(#fff, $color), 10%);
+  }
+
+  &--warning {
+    $color: $color-warning;
+    color: mix(#000, $color);
+    background: desaturate(mix(#fff, $color), 10%);
+  }
+
+  &--error {
+    $color: $color-unsafe;
+    font-weight: bold;
+    color: mix(#000, $color);
+    background: mix(#fff, $color);
+  }
+
+  &--fixed {
+    box-shadow: rgba(#000, 0.3) 0 1px 1px;
+  }
+
+  &__dismiss_button {
+    background-color: rgba(#000, 0.1);
+    &:hover, &:active {
+      background-color: rgba(#000, 0.2);
+    }
+  }
+}

data/assets/itcss/6-components/_c-form-field.scss

@@ -0,0 +1,40 @@
+.c-form-field {
+  background: #fff;
+  display: block;
+
+  & + & {
+    margin-top: 1px;
+    @media (min-width: 640px) {
+      margin-top: 0;
+      margin-left: 1px;
+    }
+  }
+
+  &__label, &__validation_message {
+    font-size: 13px;
+    padding-top: 15px;
+    padding-left: 15px;
+    padding-right: 15px;
+    display: inline-block;
+    font-weight: bold;
+    text-transform: uppercase;
+    color: #666;
+  }
+
+  &__validation_message {
+    margin-left: -25px;
+    color: #ccc;
+    &--success { color: #21AD34 }
+    &--failure { color: #FC6D6D }
+  }
+
+  &__input {
+    width: 100%;
+    padding: 5px 15px 10px;
+    border: 0;
+    outline: 0;
+    display: block;
+    line-height: 1.5;
+  }
+
+}

data/assets/itcss/6-components/_c-form-message.scss

@@ -0,0 +1,15 @@
+.c-form-message {
+  padding: 15px;
+
+  &--info {
+    color: #D1B147;
+  }
+
+  &--success {
+    color: #21AD34;
+  }
+
+  &--failure {
+    color: #AD2121;
+  }
+}

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

@@ -0,0 +1,43 @@
+.c-loader {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: #000;
+  opacity: 0.1;
+  z-index: 1;
+
+  &__inner {
+    position: absolute;
+    width: 50px;
+    height: 50px;
+    top: calc(50% - 25px);
+    left: calc(50% - 25px);
+    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;
+  }
+}
+
+.c-loader--enter {
+  opacity: 0.01;
+}
+
+.c-loader--enter.c-loader--enter-active {
+  opacity: 0.1;
+  transition: opacity 100ms ease-in;
+}
+
+.c-loader--leave {
+  opacity: 0.1;
+}
+
+.c-loader--leave.c-loader--leave-active {
+  opacity: 0.01;
+  transition: opacity 100ms ease-in;
+}

data/assets/itcss/6-components/_c-main-view-wrapper.scss

@@ -0,0 +1,9 @@
+.c-main-view-wrapper {
+  height: auto;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  overflow: auto;
+}

data/assets/itcss/6-components/_c-main-view.scss

@@ -0,0 +1,6 @@
+.c-main-view {
+  height: auto;
+  position: relative;
+  margin: 20px;
+  min-height: calc(100% - 40px);
+}

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

@@ -0,0 +1,38 @@
+.c-nav-bar {
+  width: 100%;
+  min-height: 50px;
+  background: $color-brand;
+  color: #fff;
+  display: flex;
+  justify-content: space-between;
+  align-items: stretch;
+  flex-wrap: wrap;
+
+  &__logo {
+    width: 50px;
+    flex-grow: 0;
+    flex-shrink: 0;
+    background: url("/assets/images/logo.svg") center center no-repeat;
+    background-size: 60% auto;
+    opacity: 0.6;
+  }
+
+  &__heading {
+    width: auto;
+    min-height: inherit;
+    position: relative;
+    flex-grow: 100;
+    flex-basis: 250px;
+    line-height: 50px;
+    padding-right: 15px;
+  }
+
+  &__text {
+    width: auto;
+    min-height: inherit;
+    line-height: 50px;
+    padding-left: 15px;
+    padding-right: 15px;
+    color: mix(#fff, $color-brand);
+  }
+}

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

@@ -0,0 +1,60 @@
+.c-pagination {
+  margin: 0;
+  padding: 0;
+  display: inline-flex;
+  justify-content: space-between;
+
+  &__item {
+    $border-radius: 3px;
+    $section-margin: 10px;
+    padding: 8px 10px;
+    color: #000;
+
+    &--next, &--prev, &--page {
+      background: #fff;
+      border: 1px solid #ccc;
+    }
+
+    &--next, &--prev { border-radius: $border-radius }
+    &--next { margin-left: $section-margin }
+    &--prev { margin-right: $section-margin }
+
+    &--page {
+      margin-left: -1px;
+      min-width: 40px;
+      text-align: center;
+    }
+
+    &--start {
+      border-top-left-radius: $border-radius;
+      border-bottom-left-radius: $border-radius;
+      margin-left: 0;
+    }
+
+    &--end {
+      border-top-right-radius: $border-radius;
+      border-bottom-right-radius: $border-radius;
+    }
+
+    &--current {
+      $background-color: color(info, $tone: muted);
+      border-color: darken($background-color, 10%);
+      background-color: $background-color;
+    }
+
+    &--current + &--page {
+      margin-left: 0;
+      border-left: 0;
+    }
+
+    &--separator {
+      color: #999;
+    }
+
+    &--disabled {
+      background-color: transparent;
+      color: #ccc;
+      cursor: default;
+    }
+  }
+}