Integration to Requarks Core

2016-11-20 20:09:50 -05:00
parent 6744190859
commit 985761556c
52 changed files with 1129 additions and 1048 deletions
--- a/client/scss/libs/bulma/components/nav.scss
+++ b/client/scss/libs/bulma/components/nav.scss
@@ -0,0 +1,197 @@
+// Components
+
+.nav-toggle {
+  @extend .hamburger;
+
+  // Responsiveness
+  @include tablet {
+    display: none;
+  }
+}
+
+.nav-item {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  padding: 10px;
+
+  a {
+    flex-grow: 1;
+  }
+
+  img {
+    max-height: 24px;
+  }
+
+  .button + .button {
+    margin-left: 10px;
+  }
+
+  .tag {
+    &:first-child {
+      margin-right: 5px;
+    }
+
+    &:last-child {
+      margin-left: 5px;
+    }
+  }
+
+  // Responsiveness
+  @include mobile {
+    justify-content: flex-start;
+  }
+}
+
+.nav-item a,
+a.nav-item {
+  color: $text;
+
+  &:hover {
+    color: $link-hover;
+  }
+
+  // Modifiers
+  &.is-active {
+    color: $link-active;
+  }
+
+  &.is-tab {
+    border-bottom: 1px solid transparent;
+    border-top: 1px solid transparent;
+    padding-left: 12px;
+    padding-right: 12px;
+
+    &:hover {
+      border-bottom: 1px solid $link;
+      border-top: 1px solid transparent;
+    }
+
+    &.is-active {
+      border-bottom: 3px solid $link;
+      border-top: 3px solid transparent;
+      color: $link;
+    }
+  }
+}
+
+// Containers
+
+.nav-menu {
+  // Responsiveness
+  @include mobile {
+    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: 10px;
+    }
+
+    &.is-active {
+      display: block;
+    }
+  }
+
+
+  @include tablet-only {
+    padding-right: 20px;
+  }
+}
+
+.nav-left {
+  align-items: stretch;
+  display: flex;
+  flex-basis: 0;
+  flex-grow: 1;
+  justify-content: flex-start;
+  overflow: hidden;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+.nav-center {
+  align-items: stretch;
+  display: flex;
+  justify-content: center;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.nav-right {
+  // Responsiveness
+  @include tablet {
+    align-items: stretch;
+    display: flex;
+    flex-basis: 0;
+    flex-grow: 1;
+    justify-content: flex-end;
+  }
+}
+
+// Main container
+
+.nav {
+  align-items: stretch;
+  background-color: $white;
+  display: flex;
+  min-height: $nav-height;
+  position: relative;
+  text-align: center;
+  z-index: 2;
+
+  & > .container {
+    align-items: stretch;
+    display: flex;
+    min-height: $nav-height;
+    width: 100%;
+
+    & > .nav-left {
+      & > .nav-item:first-child:not(.is-tab) {
+        padding-left: 0;
+      }
+    }
+
+    & > .nav-right {
+      & > .nav-item:last-child:not(.is-tab) {
+        padding-right: 0;
+      }
+    }
+  }
+
+  .container > & {
+    & > .nav-left {
+      & > .nav-item:first-child:not(.is-tab) {
+        padding-left: 0;
+      }
+    }
+
+    & > .nav-right {
+      & > .nav-item:last-child:not(.is-tab) {
+        padding-right: 0;
+      }
+    }
+  }
+
+  // Modifiers
+  &.has-shadow {
+    box-shadow: 0 2px 3px rgba($black, 0.1);
+  }
+
+  // Responsiveness
+  @include touch {
+    & > .container,
+    .container > & {
+      & > .nav-left {
+        & > .nav-item.is-brand:first-child {
+          padding-left: 20px;
+        }
+      }
+    }
+  }
+}