hux 0.0.0 → 0.0.1

data/core/components/_level.scss

@@ -0,0 +1,119 @@
+.level {
+  @include block;
+
+  align-items: center;
+  justify-content: space-between;
+
+  code {
+    border-radius: $radius;
+  }
+
+  img {
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  // Modifiers
+  &.is-mobile {
+    display: flex;
+
+    .level-left,
+    .level-right {
+      display: flex;
+    }
+
+    .level-left + .level-right {
+      margin-top: 0;
+    }
+
+    .level-item {
+      &:not(:last-child) {
+        margin-bottom: 0;
+      }
+
+      &:not(.is-narrow) {
+        flex-grow: 1;
+      }
+    }
+  }
+
+  // Responsiveness
+  @include tablet {
+    display: flex;
+
+    & > .level-item {
+      &:not(.is-narrow) {
+        flex-grow: 1;
+      }
+    }
+  }
+}
+
+.level-item {
+  align-items: center;
+  display: flex;
+  flex-basis: auto;
+  flex-grow: 0;
+  flex-shrink: 0;
+  justify-content: center;
+
+  .title,
+  .subtitle {
+    margin-bottom: 0;
+  }
+
+  // Responsiveness
+  @include mobile {
+    &:not(:last-child) {
+      margin-bottom: 0.75rem;
+    }
+  }
+}
+
+.level-left,
+.level-right {
+  flex-basis: auto;
+  flex-grow: 0;
+  flex-shrink: 0;
+
+  .level-item {
+    // Modifiers
+    &.is-flexible {
+      flex-grow: 1;
+    }
+
+    // Responsiveness
+    @include tablet {
+      &:not(:last-child) {
+        margin-right: 0.75rem;
+      }
+    }
+  }
+}
+
+.level-left {
+  align-items: center;
+  justify-content: flex-start;
+
+  // Responsiveness
+  @include mobile {
+    & + .level-right {
+      margin-top: 1.5rem;
+    }
+  }
+
+
+  @include tablet {
+    display: flex;
+  }
+}
+
+.level-right {
+  align-items: center;
+  justify-content: flex-end;
+
+  // Responsiveness
+  @include tablet {
+    display: flex;
+  }
+}

data/core/components/_media.scss

@@ -0,0 +1,64 @@
+.media {
+  align-items: flex-start;
+  display: flex;
+  text-align: left;
+
+  .content:not(:last-child) {
+    margin-bottom: 0.75rem;
+  }
+
+  .media {
+    border-top: 1px solid rgba($border, 0.5);
+    display: flex;
+    padding-top: 0.75rem;
+
+    .content:not(:last-child),
+    .control:not(:last-child) {
+      margin-bottom: 0.5rem;
+    }
+
+    .media {
+      padding-top: 0.5rem;
+
+      & + .media {
+        margin-top: 0.5rem;
+      }
+    }
+  }
+
+  & + .media {
+    border-top: 1px solid rgba($border, 0.5);
+    margin-top: 1rem;
+    padding-top: 1rem;
+  }
+
+  // Sizes
+  &.is-large {
+    & + .media {
+      margin-top: 1.5rem;
+      padding-top: 1.5rem;
+    }
+  }
+}
+
+.media-left,
+.media-right {
+  flex-basis: auto;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.media-left {
+  margin-right: 1rem;
+}
+
+.media-right {
+  margin-left: 1rem;
+}
+
+.media-content {
+  flex-basis: auto;
+  flex-grow: 1;
+  flex-shrink: 1;
+  text-align: left;
+}

data/core/components/_menu.scss

@@ -0,0 +1,72 @@
+$menu-item-color: $text !default;
+$menu-item-radius: $radius-small !default;
+$menu-item-hover-color: $text-strong !default;
+$menu-item-hover-background-color: $background !default;
+$menu-item-active-color: $link-invert !default;
+$menu-item-active-background-color: $link !default;
+
+$menu-list-border-left: 1px solid $border !default;
+
+$menu-label-color: $text-light !default;
+
+.menu {
+  font-size: $size-normal;
+
+  // Sizes
+  &.is-small {
+    font-size: $size-small;
+  }
+
+  &.is-medium {
+    font-size: $size-medium;
+  }
+
+  &.is-large {
+    font-size: $size-large;
+  }
+}
+
+.menu-list {
+  line-height: 1.25;
+
+  a {
+    border-radius: $menu-item-radius;
+    color: $menu-item-color;
+    display: block;
+    padding: 0.5em 0.75em;
+
+    &:hover {
+      background-color: $menu-item-hover-background-color;
+      color: $menu-item-hover-color;
+    }
+
+    // Modifiers
+    &.is-active {
+      background-color: $menu-item-active-background-color;
+      color: $menu-item-active-color;
+    }
+  }
+
+  li {
+    ul {
+      border-left: $menu-list-border-left;
+      margin: 0.75em;
+      padding-left: 0.75em;
+    }
+  }
+}
+
+.menu-label {
+  color: $menu-label-color;
+  font-size: 0.75em;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+
+  &:not(:first-child) {
+    margin-top: 1em;
+  }
+
+  &:not(:last-child) {
+    margin-bottom: 1em;
+  }
+}

data/core/components/_message.scss

@@ -0,0 +1,118 @@
+$message-background-color: $background !default;
+$message-radius: $radius !default;
+
+$message-header-background-color: $text !default;
+$message-header-color: $text-invert !default;
+$message-header-padding: 0.5em 0.75em !default;
+$message-header-radius: $radius !default;
+
+$message-body-border: 1px solid $border !default;
+$message-body-color: $text !default;
+$message-body-padding: 1em 1.25em !default;
+$message-body-radius: $radius !default;
+
+$message-body-pre-background-color: $white !default;
+$message-body-pre-code-background-color: transparent !default;
+
+.message {
+  @include block;
+
+  background-color: $message-background-color;
+  border-radius: $message-radius;
+  font-size: $size-normal;
+
+  // Sizes
+  &.is-small {
+    font-size: $size-small;
+  }
+
+  &.is-medium {
+    font-size: $size-medium;
+  }
+
+  &.is-large {
+    font-size: $size-large;
+  }
+
+  // Colors
+  @each $name, $pair in $colors {
+    $color: nth($pair, 1);
+    $color-invert: nth($pair, 2);
+    $color-lightning: max(100% - lightness($color) - 2%, 0%);
+    $color-luminance: colorLuminance($color);
+    $darken-percentage: $color-luminance * 70%;
+    $desaturate-percentage: $color-luminance * 30%;
+
+    &.is-#{$name} {
+      background-color: lighten($color, $color-lightning);
+
+      .message-header {
+        background-color: $color;
+        color: $color-invert;
+      }
+
+      .message-body {
+        border-color: $color;
+        color: desaturate(darken($color, $darken-percentage), $desaturate-percentage);
+      }
+    }
+  }
+}
+
+.message-header {
+  align-items: center;
+  background-color: $message-header-background-color;
+  border-radius: $message-header-radius $message-header-radius 0 0;
+  color: $message-header-color;
+  display: flex;
+  justify-content: space-between;
+  line-height: 1.25;
+  padding: $message-header-padding;
+  position: relative;
+
+  a:not(.button),
+  strong {
+    color: currentColor;
+  }
+
+  a:not(.button) {
+    text-decoration: underline;
+  }
+
+  .delete {
+    flex-grow: 0;
+    flex-shrink: 0;
+    margin-left: 0.75em;
+  }
+
+  & + .message-body {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-top: none;
+  }
+}
+
+.message-body {
+  border: $message-body-border;
+  border-radius: $message-body-radius;
+  color: $message-body-color;
+  padding: $message-body-padding;
+
+  a:not(.button),
+  strong {
+    color: currentColor;
+  }
+
+  a:not(.button) {
+    text-decoration: underline;
+  }
+
+  code,
+  pre {
+    background-color: $message-body-pre-background-color;
+  }
+
+  pre code {
+    background-color: $message-body-pre-code-background-color;
+  }
+}

data/core/components/_modal.scss

@@ -0,0 +1,132 @@
+$modal-z: 20 !default;
+
+$modal-background-background-color: rgba($black, 0.86) !default;
+
+$modal-content-width: 640px !default;
+$modal-content-margin-mobile: 20px !default;
+$modal-content-spacing-mobile: 160px !default;
+$modal-content-spacing-tablet: 40px !default;
+
+$modal-close-dimensions: 40px !default;
+$modal-close-right: 20px !default;
+$modal-close-top: 20px !default;
+
+$modal-card-spacing: 40px !default;
+
+$modal-card-head-background-color: $background !default;
+$modal-card-head-border-bottom: 1px solid $border !default;
+$modal-card-head-padding: 20px !default;
+$modal-card-head-radius: $radius-large !default;
+
+$modal-card-title-color: $text-strong !default;
+$modal-card-title-line-height: 1 !default;
+$modal-card-title-size: $size-4 !default;
+
+$modal-card-foot-radius: $radius-large !default;
+$modal-card-foot-border-top: 1px solid $border !default;
+
+$modal-card-body-background-color: $white !default;
+$modal-card-body-padding: 20px !default;
+
+.modal {
+  @include overlay;
+
+  align-items: center;
+  display: none;
+  justify-content: center;
+  overflow: hidden;
+  position: fixed;
+  z-index: $modal-z;
+
+  // Modifiers
+  &.is-active {
+    display: flex;
+  }
+}
+
+.modal-background {
+  @include overlay;
+
+  background-color: $modal-background-background-color;
+}
+
+.modal-content,
+.modal-card {
+  margin: 0 $modal-content-margin-mobile;
+  max-height: calc(100vh - #{$modal-content-spacing-mobile});
+  overflow: auto;
+  position: relative;
+  width: 100%;
+
+  // Responsiveness
+  @include tablet {
+    margin: 0 auto;
+    max-height: calc(100vh - #{$modal-content-spacing-tablet});
+    width: $modal-content-width;
+  }
+}
+
+.modal-close {
+  @include delete;
+
+  background: none;
+  height: $modal-close-dimensions;
+  position: fixed;
+  right: $modal-close-right;
+  top: $modal-close-top;
+  width: $modal-close-dimensions;
+}
+
+.modal-card {
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - #{$modal-card-spacing});
+  overflow: hidden;
+}
+
+.modal-card-head,
+.modal-card-foot {
+  align-items: center;
+  background-color: $modal-card-head-background-color;
+  display: flex;
+  flex-shrink: 0;
+  justify-content: flex-start;
+  padding: $modal-card-head-padding;
+  position: relative;
+}
+
+.modal-card-head {
+  border-bottom: $modal-card-head-border-bottom;
+  border-top-left-radius: $modal-card-head-radius;
+  border-top-right-radius: $modal-card-head-radius;
+}
+
+.modal-card-title {
+  color: $modal-card-title-color;
+  flex-grow: 1;
+  flex-shrink: 0;
+  font-size: $modal-card-title-size;
+  line-height: $modal-card-title-line-height;
+}
+
+.modal-card-foot {
+  border-bottom-left-radius: $modal-card-foot-radius;
+  border-bottom-right-radius: $modal-card-foot-radius;
+  border-top: $modal-card-foot-border-top;
+
+  .button {
+    &:not(:last-child) {
+      margin-right: 10px;
+    }
+  }
+}
+
+.modal-card-body {
+  @include overflow-touch;
+
+  background-color: $modal-card-body-background-color;
+  flex-grow: 1;
+  flex-shrink: 1;
+  overflow: auto;
+  padding: $modal-card-body-padding;
+}

data/core/components/_nav.scss

@@ -0,0 +1,173 @@
+$nav-height: 3.25rem !default;
+
+// Components
+
+.nav-toggle {
+  @include hamburger($nav-height);
+
+  // Responsiveness
+  @include tablet {
+    display: none;
+  }
+}
+
+.nav-item {
+  align-items: center;
+  display: flex;
+  flex-grow: 0;
+  flex-shrink: 0;
+  font-size: $size-normal;
+  justify-content: center;
+  line-height: 1.5;
+  padding: 0.5rem 0.75rem;
+
+  a {
+    flex-grow: 1;
+    flex-shrink: 0;
+  }
+
+  img {
+    max-height: 1.75rem;
+  }
+
+  .tag {
+    &:first-child:not(:last-child) {
+      margin-right: 0.5rem;
+    }
+
+    &:last-child:not(:first-child) {
+      margin-left: 0.5rem;
+    }
+  }
+
+  // Responsiveness
+  @include mobile {
+    justify-content: flex-start;
+  }
+}
+
+.nav-item a:not(.button),
+a.nav-item:not(.button) {
+  color: $text-light;
+
+  &:hover {
+    color: $link-hover;
+  }
+
+  // Modifiers
+  &.is-active {
+    color: $link-active;
+  }
+
+  &.is-tab {
+    border-bottom: 1px solid transparent;
+    border-top: 1px solid transparent;
+    padding-bottom: calc(0.75rem - 1px);
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: calc(0.75rem - 1px);
+
+    &:hover {
+      border-bottom-color: $primary;
+      border-top-color: transparent;
+    }
+
+    &.is-active {
+      border-bottom: 3px solid $primary;
+      color: $primary;
+      padding-bottom: calc(0.75rem - 3px);
+    }
+  }
+
+  // Responsiveness
+  @include desktop {
+    &.is-brand {
+      padding-left: 0;
+    }
+  }
+}
+
+// Containers
+
+.nav-left,
+.nav-right {
+  @include overflow-touch;
+
+  align-items: stretch;
+  display: flex;
+  flex-grow: 1;
+  flex-shrink: 0;
+  max-width: 100%;
+  overflow: auto;
+
+  @include widescreen {
+    flex-basis: 0;
+  }
+}
+
+.nav-left {
+  justify-content: flex-start;
+  white-space: nowrap;
+}
+
+.nav-right {
+  justify-content: flex-end;
+}
+
+.nav-center {
+  align-items: stretch;
+  display: flex;
+  flex-grow: 0;
+  flex-shrink: 0;
+  justify-content: center;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.nav-menu {
+  // Responsiveness
+  @include mobile {
+    &.nav-right {
+      background-color: $white;
+      box-shadow: 0 4px 7px rgba($black, 0.1);
+      left: 0;
+      display: none;
+      right: 0;
+      top: 100%;
+      position: absolute;
+
+      .nav-item {
+        border-top: 1px solid rgba($border, 0.5);
+        padding: 0.75rem;
+      }
+
+      &.is-active {
+        display: block;
+      }
+    }
+  }
+}
+
+// Main container
+
+.nav {
+  align-items: stretch;
+  background-color: $white;
+  display: flex;
+  height: $nav-height;
+  position: relative;
+  text-align: center;
+  z-index: 10;
+
+  & > .container {
+    align-items: stretch;
+    display: flex;
+    min-height: $nav-height;
+    width: 100%;
+  }
+
+  // Modifiers
+  &.has-shadow {
+    box-shadow: 0 2px 3px rgba($black, 0.1);
+  }
+}