hux 0.0.0 → 0.0.1

data/core/elements/_icon.scss

@@ -0,0 +1,28 @@
+$icon-dimensions: 1.5rem !default;
+$icon-dimensions-small: 1rem !default;
+$icon-dimensions-medium: 2rem !default;
+$icon-dimensions-large: 3rem !default;
+
+.icon {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+  height: $icon-dimensions;
+  width: $icon-dimensions;
+
+  // Sizes
+  &.is-small {
+    height: $icon-dimensions-small;
+    width: $icon-dimensions-small;
+  }
+
+  &.is-medium {
+    height: $icon-dimensions-medium;
+    width: $icon-dimensions-medium;
+  }
+
+  &.is-large {
+    height: $icon-dimensions-large;
+    width: $icon-dimensions-large;
+  }
+}

data/core/elements/_image.scss

@@ -0,0 +1,56 @@
+$dimensions: 16 24 32 48 64 96 128 !default;
+
+.image {
+  display: block;
+  position: relative;
+
+  img {
+    display: block;
+    height: auto;
+    width: 100%;
+  }
+
+  // Ratio
+  &.is-square,
+  &.is-1by1,
+  &.is-4by3,
+  &.is-3by2,
+  &.is-16by9,
+  &.is-2by1 {
+    img {
+      @include overlay;
+
+      height: 100%;
+      width: 100%;
+    }
+  }
+
+  &.is-square,
+  &.is-1by1 {
+    padding-top: 100%;
+  }
+
+  &.is-4by3 {
+    padding-top: 75%;
+  }
+
+  &.is-3by2 {
+    padding-top: 66.6666%;
+  }
+
+  &.is-16by9 {
+    padding-top: 56.25%;
+  }
+
+  &.is-2by1 {
+    padding-top: 50%;
+  }
+
+  // Sizes
+  @each $dimension in $dimensions {
+    &.is-#{$dimension}x#{$dimension} {
+      height: $dimension * 1px;
+      width: $dimension * 1px;
+    }
+  }
+}

data/core/elements/_notification.scss

@@ -0,0 +1,53 @@
+$notification-background-color: $background !default;
+$notification-radius: $radius !default;
+$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default;
+
+.notification {
+  @include block;
+
+  background-color: $notification-background-color;
+  border-radius: $notification-radius;
+  padding: $notification-padding;
+  position: relative;
+
+  a:not(.button) {
+    color: currentColor;
+    text-decoration: underline;
+  }
+
+  strong {
+    color: currentColor;
+  }
+
+  code,
+  pre {
+    background: $white;
+  }
+
+  pre code {
+    background: transparent;
+  }
+
+  & > .delete {
+    position: absolute;
+    right: 0.5em;
+    top: 0.5em;
+  }
+
+  .title,
+  .subtitle,
+  .content {
+    color: currentColor;
+  }
+
+  // Colors
+  @each $name, $pair in $colors {
+    $color: nth($pair, 1);
+    $color-invert: nth($pair, 2);
+
+    &.is-#{$name} {
+      background-color: $color;
+      color: $color-invert;
+    }
+  }
+}

data/core/elements/_other.scss

@@ -0,0 +1,48 @@
+.block {
+  @include block;
+}
+
+.delete {
+  @include delete;
+}
+
+.heading {
+  display: block;
+  font-size: 11px;
+  letter-spacing: 1px;
+  margin-bottom: 5px;
+  text-transform: uppercase;
+}
+
+.highlight {
+  @include block;
+
+  font-weight: $weight-normal;
+  max-width: 100%;
+  overflow: hidden;
+  padding: 0;
+
+  pre {
+    overflow: auto;
+    max-width: 100%;
+  }
+}
+
+.loader {
+  @include loader;
+}
+
+.number {
+  align-items: center;
+  background-color: $background;
+  border-radius: 290486px;
+  display: inline-flex;
+  font-size: $size-medium;
+  height: 2em;
+  justify-content: center;
+  margin-right: 1.5rem;
+  min-width: 2.5em;
+  padding: 0.25rem 0.5rem;
+  text-align: center;
+  vertical-align: top;
+}

data/core/elements/_progress.scss

@@ -0,0 +1,56 @@
+$progress-bar-background-color: $border !default;
+$progress-value-background-color: $text !default;
+
+.progress {
+  @include block;
+
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  border: none;
+  border-radius: 290486px;
+  display: block;
+  height: $size-normal;
+  overflow: hidden;
+  padding: 0;
+  width: 100%;
+
+  &::-webkit-progress-bar {
+    background-color: $progress-bar-background-color;
+  }
+
+  &::-webkit-progress-value {
+    background-color: $progress-value-background-color;
+  }
+
+  &::-moz-progress-bar {
+    background-color: $progress-value-background-color;
+  }
+
+  // Colors
+  @each $name, $pair in $colors {
+    $color: nth($pair, 1);
+
+    &.is-#{$name} {
+      &::-webkit-progress-value {
+        background-color: $color;
+      }
+
+      &::-moz-progress-bar {
+        background-color: $color;
+      }
+    }
+  }
+
+  // Sizes
+  &.is-small {
+    height: $size-small;
+  }
+
+  &.is-medium {
+    height: $size-medium;
+  }
+
+  &.is-large {
+    height: $size-large;
+  }
+}

data/core/elements/_table.scss

@@ -0,0 +1,148 @@
+$table-color: $grey-darker !default;
+$table-background-color: $white !default;
+
+$table-cell-border: 1px solid $grey-lighter !default;
+$table-cell-border-width: 0 0 1px !default;
+$table-cell-padding: 0.5em 0.75em !default;
+$table-cell-heading-color: $text-strong !default;
+
+$table-head-cell-border-width: 0 0 2px !default;
+$table-head-cell-color: $text-strong !default;
+$table-foot-cell-border-width: 2px 0 0 !default;
+$table-foot-cell-color: $text-strong !default;
+
+$table-row-hover-background-color: $white-bis !default;
+
+$table-row-active-background-color: $primary !default;
+$table-row-active-color: $primary-invert !default;
+
+$table-striped-row-even-background-color: $white-bis !default;
+$table-striped-row-even-hover-background-color: $white-ter !default;
+
+.table {
+  background-color: $table-background-color;
+  color: $table-color;
+  margin-bottom: 1.5rem;
+
+  td,
+  th {
+    border: $table-cell-border;
+    border-width: $table-cell-border-width;
+    padding: $table-cell-padding;
+    vertical-align: top;
+
+    // Colors
+    @each $name, $pair in $colors {
+      $color: nth($pair, 1);
+      $color-invert: nth($pair, 2);
+
+      &.is-#{$name} {
+        background-color: $color;
+        border-color: $color;
+        color: $color-invert;
+      }
+    }
+
+    // Modifiers
+    &.is-narrow {
+      white-space: nowrap;
+      width: 1%;
+    }
+  }
+
+  th {
+    color: $table-cell-heading-color;
+    text-align: left;
+  }
+
+  tr {
+    &:hover {
+      background-color: $table-row-hover-background-color;
+    }
+
+    &.is-selected {
+      background-color: $table-row-active-background-color;
+      color: $table-row-active-color;
+
+      a,
+      strong {
+        color: currentColor;
+      }
+
+      td,
+      th {
+        border-color: $table-row-active-color;
+        color: currentColor;
+      }
+    }
+  }
+
+  thead {
+    td,
+    th {
+      border-width: $table-head-cell-border-width;
+      color: $table-head-cell-color;
+    }
+  }
+
+  tfoot {
+    td,
+    th {
+      border-width: $table-foot-cell-border-width;
+      color: $table-foot-cell-color;
+    }
+  }
+
+  tbody {
+    tr {
+      &:last-child {
+        td,
+        th {
+          border-bottom-width: 0;
+        }
+      }
+    }
+  }
+
+  // Modifiers
+  &.is-bordered {
+    td,
+    th {
+      border-width: 1px;
+    }
+
+    tr {
+      &:last-child {
+        td,
+        th {
+          border-bottom-width: 1px;
+        }
+      }
+    }
+  }
+
+  &.is-fullwidth {
+    width: 100%;
+  }
+
+  &.is-narrow {
+    td,
+    th {
+      padding: 0.25em 0.5em;
+    }
+  }
+
+  &.is-striped {
+    tbody {
+      tr:not(.is-selected) {
+        &:nth-child(even) {
+          background-color: $table-striped-row-even-background-color;
+
+          &:hover {
+            background-color: $table-striped-row-even-hover-background-color;
+          }
+        }
+      }
+    }
+  }
+}

data/core/elements/_tag.scss

@@ -0,0 +1,132 @@
+$tag-background-color: $background !default;
+$tag-color: $text !default;
+$tag-radius: $radius !default;
+$tag-delete-margin: 1px !default;
+
+.tags {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+
+  .tag {
+    margin-bottom: 0.5rem;
+
+    &:not(:last-child) {
+      margin-right: 0.5rem;
+    }
+  }
+
+  &:last-child {
+    margin-bottom: -0.5rem;
+  }
+
+  &:not(:last-child) {
+    margin-bottom: 1rem;
+  }
+
+  &.has-addons {
+    .tag {
+      margin-right: 0;
+
+      &:not(:first-child) {
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0;
+      }
+
+      &:not(:last-child) {
+        border-bottom-right-radius: 0;
+        border-top-right-radius: 0;
+      }
+    }
+  }
+}
+
+.tag:not(body) {
+  align-items: center;
+  background-color: $tag-background-color;
+  border-radius: $tag-radius;
+  color: $tag-color;
+  display: inline-flex;
+  font-size: $size-small;
+  height: 2em;
+  justify-content: center;
+  line-height: 1.5;
+  padding-left: 0.75em;
+  padding-right: 0.75em;
+  white-space: nowrap;
+
+  .delete {
+    margin-left: 0.25em;
+    margin-right: -0.375em;
+  }
+
+  // Colors
+  @each $name, $pair in $colors {
+    $color: nth($pair, 1);
+    $color-invert: nth($pair, 2);
+
+    &.is-#{$name} {
+      background-color: $color;
+      color: $color-invert;
+    }
+  }
+
+  // Sizes
+  &.is-medium {
+    font-size: $size-normal;
+  }
+
+  &.is-large {
+    font-size: $size-medium;
+  }
+
+  // Modifiers
+  &.is-delete {
+    margin-left: $tag-delete-margin;
+    padding: 0;
+    position: relative;
+    width: 2em;
+
+    &:before,
+    &:after {
+      background-color: currentColor;
+      content: "";
+      display: block;
+      left: 50%;
+      position: absolute;
+      top: 50%;
+      transform: translateX(-50%) translateY(-50%) rotate(45deg);
+      transform-origin: center center;
+    }
+
+    &:before {
+      height: 1px;
+      width: 50%;
+    }
+
+    &:after {
+      height: 50%;
+      width: 1px;
+    }
+
+    &:hover,
+    &:focus {
+      background-color: darken($tag-background-color, 5%);
+    }
+
+    &:active {
+      background-color: darken($tag-background-color, 10%);
+    }
+  }
+
+  &.is-rounded {
+    border-radius: 290486px;
+  }
+}
+
+a.tag {
+  &:hover {
+    text-decoration: underline;
+  }
+}

data/core/elements/_title.scss

@@ -0,0 +1,81 @@
+$title-color: $grey-darker !default;
+$title-size: $size-3 !default;
+$title-weight: $weight-semibold !default;
+$title-strong-color: inherit !default;
+$title-strong-weight: inherit !default;
+
+$subtitle-color: $grey-dark !default;
+$subtitle-size: $size-5 !default;
+$subtitle-weight: $weight-normal !default;
+$subtitle-strong-color: $grey-darker !default;
+$subtitle-strong-weight: $weight-semibold !default;
+
+.title,
+.subtitle {
+  @include block;
+
+  word-break: break-word;
+
+  em,
+  span {
+    font-weight: inherit;
+  }
+
+  .tag {
+    vertical-align: middle;
+  }
+}
+
+.title {
+  color: $title-color;
+  font-size: $title-size;
+  font-weight: $title-weight;
+  line-height: 1.125;
+
+  strong {
+    color: $title-strong-color;
+    font-weight: $title-strong-weight;
+  }
+
+  & + .highlight {
+    margin-top: -0.75rem;
+  }
+
+  &:not(.is-spaced) + .subtitle {
+    margin-top: -1.5rem;
+  }
+
+  // Sizes
+  @each $size in $sizes {
+    $i: index($sizes, $size);
+
+    &.is-#{$i} {
+      font-size: $size;
+    }
+  }
+}
+
+.subtitle {
+  color: $subtitle-color;
+  font-size: $subtitle-size;
+  font-weight: $subtitle-weight;
+  line-height: 1.25;
+
+  strong {
+    color: $subtitle-strong-color;
+    font-weight: $subtitle-strong-weight;
+  }
+
+  &:not(.is-spaced) + .title {
+    margin-top: -1.5rem;
+  }
+
+  // Sizes
+  @each $size in $sizes {
+    $i: index($sizes, $size);
+
+    &.is-#{$i} {
+      font-size: $size;
+    }
+  }
+}

data/core/grid/_all.scss

@@ -0,0 +1,2 @@
+@import "columns";
+@import "tiles";