hux 0.0.0 → 0.0.1

data/core/components/_panel.scss

@@ -0,0 +1,135 @@
+$panel-item-border: 1px solid $border !default;
+
+$panel-heading-background-color: $background !default;
+$panel-heading-color: $text-strong !default;
+$panel-heading-line-height: 1.25 !default;
+$panel-heading-padding: 0.5em 0.75em !default;
+$panel-heading-radius: $radius !default;
+$panel-heading-size: 1.25em !default;
+$panel-heading-weight: $weight-light !default;
+
+$panel-tab-border-bottom: 1px solid $border !default;
+$panel-tab-active-border-bottom-color: $link-active-border !default;
+$panel-tab-active-color: $link-active !default;
+
+$panel-list-item-color: $text !default;
+$panel-list-item-hover-color: $link !default;
+
+$panel-block-color: $text-strong !default;
+$panel-block-hover-background-color: $background !default;
+$panel-block-active-border-left-color: $link !default;
+$panel-block-active-color: $link-active !default;
+$panel-block-active-icon-color: $link !default;
+
+$panel-icon-color: $text-light !default;
+
+.panel {
+  font-size: $size-normal;
+
+  &:not(:last-child) {
+    margin-bottom: 1.5rem;
+  }
+}
+
+.panel-heading,
+.panel-tabs,
+.panel-block {
+  border-bottom: $panel-item-border;
+  border-left: $panel-item-border;
+  border-right: $panel-item-border;
+
+  &:first-child {
+    border-top: $panel-item-border;
+  }
+}
+
+.panel-heading {
+  background-color: $panel-heading-background-color;
+  border-radius: $panel-heading-radius $panel-heading-radius 0 0;
+  color: $panel-heading-color;
+  font-size: $panel-heading-size;
+  font-weight: $panel-heading-weight;
+  line-height: $panel-heading-line-height;
+  padding: $panel-heading-padding;
+}
+
+.panel-tabs {
+  align-items: flex-end;
+  display: flex;
+  font-size: 0.875em;
+  justify-content: center;
+
+  a {
+    border-bottom: $panel-tab-border-bottom;
+    margin-bottom: -1px;
+    padding: 0.5em;
+
+    // Modifiers
+    &.is-active {
+      border-bottom-color: $panel-tab-active-border-bottom-color;
+      color: $panel-tab-active-color;
+    }
+  }
+}
+
+.panel-list {
+  a {
+    color: $panel-list-item-color;
+
+    &:hover {
+      color: $panel-list-item-hover-color;
+    }
+  }
+}
+
+.panel-block {
+  align-items: center;
+  color: $panel-block-color;
+  display: flex;
+  justify-content: flex-start;
+  padding: 0.5em 0.75em;
+
+  input[type="checkbox"] {
+    margin-right: 0.75em;
+  }
+
+  & > .control {
+    flex-grow: 1;
+    flex-shrink: 1;
+    width: 100%;
+  }
+
+  &.is-wrapped {
+    flex-wrap: wrap;
+  }
+
+  &.is-active {
+    border-left-color: $panel-block-active-border-left-color;
+    color: $panel-block-active-color;
+
+    .panel-icon {
+      color: $panel-block-active-icon-color;
+    }
+  }
+}
+
+a.panel-block,
+label.panel-block {
+  cursor: pointer;
+
+  &:hover {
+    background-color: $panel-block-hover-background-color;
+  }
+}
+
+.panel-icon {
+  @include fa(14px, 1em);
+
+  color: $panel-icon-color;
+  margin-right: 0.75em;
+
+  .fa {
+    font-size: inherit;
+    line-height: inherit;
+  }
+}

data/core/components/_tabs.scss

@@ -0,0 +1,206 @@
+$tabs-border-bottom-color: $border !default;
+$tabs-border-bottom-style: solid !default;
+$tabs-border-bottom-width: 1px !default;
+$tabs-link-color: $text !default;
+$tabs-link-hover-border-bottom-color: $text-strong !default;
+$tabs-link-hover-color: $text-strong !default;
+$tabs-link-active-border-bottom-color: $primary !default;
+$tabs-link-active-color: $primary !default;
+$tabs-link-padding: 0.5em 1em !default;
+
+$tabs-boxed-link-radius: $radius !default;
+$tabs-boxed-link-hover-background-color: $background !default;
+$tabs-boxed-link-hover-border-bottom-color: $border !default;
+
+$tabs-boxed-link-active-background-color: $white !default;
+$tabs-boxed-link-active-border-color: $border !default;
+$tabs-boxed-link-active-border-bottom-color: transparent !default;
+
+$tabs-toggle-link-border-color: $border !default;
+$tabs-toggle-link-border-style: solid !default;
+$tabs-toggle-link-border-width: 1px !default;
+$tabs-toggle-link-hover-background-color: $background !default;
+$tabs-toggle-link-hover-border-color: $border-hover !default;
+$tabs-toggle-link-radius: $radius !default;
+$tabs-toggle-link-active-background-color: $primary !default;
+$tabs-toggle-link-active-border-color: $primary !default;
+$tabs-toggle-link-active-color: $primary-invert !default;
+
+.tabs {
+  @include block;
+  @include overflow-touch;
+  @include unselectable;
+
+  align-items: stretch;
+  display: flex;
+  font-size: $size-normal;
+  justify-content: space-between;
+  overflow: hidden;
+  overflow-x: auto;
+  white-space: nowrap;
+
+  a {
+    align-items: center;
+    border-bottom-color: $tabs-border-bottom-color;
+    border-bottom-style: $tabs-border-bottom-style;
+    border-bottom-width: $tabs-border-bottom-width;
+    color: $tabs-link-color;
+    display: flex;
+    justify-content: center;
+    margin-bottom: -#{$tabs-border-bottom-width};
+    padding: $tabs-link-padding;
+    vertical-align: top;
+
+    &:hover {
+      border-bottom-color: $tabs-link-hover-border-bottom-color;
+      color: $tabs-link-hover-color;
+    }
+  }
+
+  li {
+    display: block;
+
+    &.is-active {
+      a {
+        border-bottom-color: $tabs-link-active-border-bottom-color;
+        color: $tabs-link-active-color;
+      }
+    }
+  }
+
+  ul {
+    align-items: center;
+    border-bottom-color: $tabs-border-bottom-color;
+    border-bottom-style: $tabs-border-bottom-style;
+    border-bottom-width: $tabs-border-bottom-width;
+    display: flex;
+    flex-grow: 1;
+    flex-shrink: 0;
+    justify-content: flex-start;
+
+    &.is-left {
+      padding-right: 0.75em;
+    }
+
+    &.is-center {
+      flex: none;
+      justify-content: center;
+      padding-left: 0.75em;
+      padding-right: 0.75em;
+    }
+
+    &.is-right {
+      justify-content: flex-end;
+      padding-left: 0.75em;
+    }
+  }
+
+  .icon {
+    &:first-child {
+      margin-right: 0.5em;
+    }
+
+    &:last-child {
+      margin-left: 0.5em;
+    }
+  }
+
+  // Alignment
+  &.is-centered {
+    ul {
+      justify-content: center;
+    }
+  }
+
+  &.is-right {
+    ul {
+      justify-content: flex-end;
+    }
+  }
+
+  // Styles
+  &.is-boxed {
+    a {
+      border: 1px solid transparent;
+      border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0;
+
+      &:hover {
+        background-color: $tabs-boxed-link-hover-background-color;
+        border-bottom-color: $tabs-boxed-link-hover-border-bottom-color;
+      }
+    }
+
+    li {
+      &.is-active {
+        a {
+          background-color: $tabs-boxed-link-active-background-color;
+          border-color: $tabs-boxed-link-active-border-color;
+          border-bottom-color: $tabs-boxed-link-active-border-bottom-color !important;
+        }
+      }
+    }
+  }
+
+  &.is-fullwidth {
+    li {
+      flex-grow: 1;
+      flex-shrink: 0;
+    }
+  }
+
+  &.is-toggle {
+    a {
+      border-color: $tabs-toggle-link-border-color;
+      border-style: $tabs-toggle-link-border-style;
+      border-width: $tabs-toggle-link-border-width;
+      margin-bottom: 0;
+      position: relative;
+
+      &:hover {
+        background-color: $tabs-toggle-link-hover-background-color;
+        border-color: $tabs-toggle-link-hover-border-color;
+        z-index: 2;
+      }
+    }
+
+    li {
+      & + li {
+        margin-left: -#{$tabs-toggle-link-border-width};
+      }
+
+      &:first-child a {
+        border-radius: $tabs-toggle-link-radius 0 0 $tabs-toggle-link-radius;
+      }
+
+      &:last-child a {
+        border-radius: 0 $tabs-toggle-link-radius $tabs-toggle-link-radius 0;
+      }
+
+      &.is-active {
+        a {
+          background-color: $tabs-toggle-link-active-background-color;
+          border-color: $tabs-toggle-link-active-border-color;
+          color: $tabs-toggle-link-active-color;
+          z-index: 1;
+        }
+      }
+    }
+
+    ul {
+      border-bottom: none;
+    }
+  }
+
+  // Sizes
+  &.is-small {
+    font-size: $size-small;
+  }
+
+  &.is-medium {
+    font-size: $size-medium;
+  }
+
+  &.is-large {
+    font-size: $size-large;
+  }
+}

data/core/elements/_all.scss

@@ -0,0 +1,14 @@
+@import "box";
+@import "button";
+@import "container";
+@import "content";
+@import "form";
+@import "icon";
+@import "image";
+@import "notification";
+@import "progress";
+@import "table";
+@import "tag";
+@import "title";
+
+@import "other";

data/core/elements/_box.scss

@@ -0,0 +1,30 @@
+$box-color: $text !default;
+$box-background-color: $white !default;
+$box-radius: $radius-large !default;
+$box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default;
+$box-padding: 1.25rem !default;
+
+$box-link-hover-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link !default;
+$box-link-active-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link !default;
+
+.box {
+  @include block;
+
+  background-color: $box-background-color;
+  border-radius: $box-radius;
+  box-shadow: $box-shadow;
+  color: $box-color;
+  display: block;
+  padding: $box-padding;
+}
+
+a.box {
+  &:hover,
+  &:focus {
+    box-shadow: $box-link-hover-shadow;
+  }
+
+  &:active {
+    box-shadow: $box-link-active-shadow;
+  }
+}

data/core/elements/_button.scss

@@ -0,0 +1,290 @@
+$button-color: $grey-darker !default;
+$button-background-color: $white !default;
+$button-border-color: $grey-lighter !default;
+
+$button-hover-color: $link-hover !default;
+$button-hover-border-color: $link-hover-border !default;
+
+$button-focus-color: $link-focus !default;
+$button-focus-border-color: $link-focus-border !default;
+$button-focus-box-shadow-size: 0 0 0 0.125em !default;
+$button-focus-box-shadow-color: rgba($link, 0.25) !default;
+
+$button-active-color: $link-active !default;
+$button-active-border-color: $link-active-border !default;
+
+$button-link-color: $text !default;
+$button-link-hover-background-color: $background !default;
+$button-link-hover-color: $text-strong !default;
+
+$button-disabled-background-color: $white !default;
+$button-disabled-border-color: $grey-lighter !default;
+$button-disabled-shadow: none !default;
+$button-disabled-opacity: 0.5 !default;
+
+$button-static-color: $grey !default;
+$button-static-background-color: $white-ter !default;
+$button-static-border-color: $grey-lighter !default;
+
+// The button sizes use mixins so they can be used at different breakpoints
+@mixin button-small {
+  border-radius: $radius-small;
+  font-size: $size-small;
+}
+
+@mixin button-medium {
+  font-size: $size-medium;
+}
+
+@mixin button-large {
+  font-size: $size-large;
+}
+
+.button {
+  @include control;
+  @include unselectable;
+
+  background-color: $button-background-color;
+  border-color: $button-border-color;
+  color: $button-color;
+  cursor: pointer;
+  justify-content: center;
+  padding-left: 0.75em;
+  padding-right: 0.75em;
+  text-align: center;
+  white-space: nowrap;
+
+  strong {
+    color: inherit;
+  }
+
+  .icon {
+    &,
+    &.is-small,
+    &.is-medium,
+    &.is-large {
+      height: 1.5em;
+      width: 1.5em;
+    }
+
+    &:first-child:not(:last-child) {
+      margin-left: calc(-0.375em - 1px);
+      margin-right: 0.1875em;
+    }
+
+    &:last-child:not(:first-child) {
+      margin-left: 0.1875em;
+      margin-right: calc(-0.375em - 1px);
+    }
+
+    &:first-child:last-child {
+      margin-left: calc(-0.375em - 1px);
+      margin-right: calc(-0.375em - 1px);
+    }
+  }
+
+  // States
+  &:hover,
+  &.is-hovered {
+    border-color: $button-hover-border-color;
+    color: $button-hover-color;
+  }
+
+  &:focus,
+  &.is-focused {
+    border-color: $button-focus-border-color;
+    color: $button-focus-color;
+
+    &:not(:active) {
+      box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color;
+    }
+  }
+
+  &:active,
+  &.is-active {
+    border-color: $button-active-border-color;
+    color: $button-active-color;
+  }
+
+  // Colors
+  &.is-link {
+    background-color: transparent;
+    border-color: transparent;
+    color: $button-link-color;
+    text-decoration: underline;
+
+    &:hover,
+    &.is-hovered,
+    &:focus,
+    &.is-focused {
+      background-color: $button-link-hover-background-color;
+      color: $button-link-hover-color;
+    }
+
+    &:active,
+    &.is-active {
+      background-color: darken($button-link-hover-background-color, 5%);
+      color: $button-link-hover-color;
+    }
+
+    &[disabled] {
+      background-color: transparent;
+      border-color: transparent;
+      box-shadow: none;
+    }
+  }
+
+  @each $name, $pair in $colors {
+    $color: nth($pair, 1);
+    $color-invert: nth($pair, 2);
+
+    &.is-#{$name} {
+      background-color: $color;
+      border-color: transparent;
+      color: $color-invert;
+
+      &:hover,
+      &.is-hovered {
+        background-color: darken($color, 2.5%);
+        border-color: transparent;
+        color: $color-invert;
+      }
+
+      &:focus,
+      &.is-focused {
+        border-color: transparent;
+        color: $color-invert;
+
+        &:not(:active) {
+          box-shadow: $button-focus-box-shadow-size rgba($color, 0.25);
+        }
+      }
+
+      &:active,
+      &.is-active {
+        background-color: darken($color, 5%);
+        border-color: transparent;
+        color: $color-invert;
+      }
+
+      &[disabled] {
+        background-color: $color;
+        border-color: transparent;
+        box-shadow: none;
+      }
+
+      &.is-inverted {
+        background-color: $color-invert;
+        color: $color;
+
+        &:hover {
+          background-color: darken($color-invert, 5%);
+        }
+
+        &[disabled] {
+          background-color: $color-invert;
+          border-color: transparent;
+          box-shadow: none;
+          color: $color;
+        }
+      }
+
+      &.is-loading {
+        &:after {
+          border-color: transparent transparent $color-invert $color-invert !important;
+        }
+      }
+
+      &.is-outlined {
+        background-color: transparent;
+        border-color: $color;
+        color: $color;
+
+        &:hover,
+        &:focus {
+          background-color: $color;
+          border-color: $color;
+          color: $color-invert;
+        }
+
+        &.is-loading {
+          &:after {
+            border-color: transparent transparent $color $color !important;
+          }
+        }
+
+        &[disabled] {
+          background-color: transparent;
+          border-color: $color;
+          box-shadow: none;
+          color: $color;
+        }
+      }
+
+      &.is-inverted.is-outlined {
+        background-color: transparent;
+        border-color: $color-invert;
+        color: $color-invert;
+
+        &:hover,
+        &:focus {
+          background-color: $color-invert;
+          color: $color;
+        }
+
+        &[disabled] {
+          background-color: transparent;
+          border-color: $color-invert;
+          box-shadow: none;
+          color: $color-invert;
+        }
+      }
+    }
+  }
+
+  // Sizes
+  &.is-small {
+    @include button-small;
+  }
+
+  &.is-medium {
+    @include button-medium;
+  }
+
+  &.is-large {
+    @include button-large;
+  }
+
+  // Modifiers
+  &[disabled] {
+    background-color: $button-disabled-background-color;
+    border-color: $button-disabled-border-color;
+    box-shadow: $button-disabled-shadow;
+    opacity: $button-disabled-opacity;
+  }
+
+  &.is-fullwidth {
+    display: flex;
+    width: 100%;
+  }
+
+  &.is-loading {
+    color: transparent !important;
+    pointer-events: none;
+
+    &:after {
+      @include loader;
+      @include center(1em);
+
+      position: absolute !important;
+    }
+  }
+
+  &.is-static {
+    background-color: $button-static-background-color;
+    border-color: $button-static-border-color;
+    color: $button-static-color;
+    box-shadow: none;
+    pointer-events: none;
+  }
+}

data/core/elements/_container.scss

@@ -0,0 +1,44 @@
+.container {
+  margin: 0 auto;
+  position: relative;
+
+  @include from($desktop) {
+    max-width: $desktop - 2 * $gap;
+    width: $desktop - 2 * $gap;
+
+    &.is-fluid {
+      margin-left: $gap;
+      margin-right: $gap;
+      max-width: none;
+      width: auto;
+    }
+  }
+
+
+  @include until($widescreen) {
+    &.is-widescreen {
+      max-width: $widescreen - 2 * $gap;
+      width: auto;
+    }
+  }
+
+
+  @include until($fullhd) {
+    &.is-fullhd {
+      max-width: $fullhd - 2 * $gap;
+      width: auto;
+    }
+  }
+
+
+  @include from($widescreen) {
+    max-width: $widescreen - 2 * $gap;
+    width: $widescreen - 2 * $gap;
+  }
+
+
+  @include from($fullhd) {
+    max-width: $fullhd - 2 * $gap;
+    width: $fullhd - 2 * $gap;
+  }
+}