Integration to Requarks Core

client/scss/libs/bulma/base/classes.scss

@@ -0,0 +1,31 @@
+.block {
+  &:not(:last-child) {
+    margin-bottom: 20px;
+  }
+}
+
+.container {
+  position: relative;
+
+  @include desktop {
+    margin: 0 auto;
+    max-width: 960px;
+
+    // Modifiers
+    &.is-fluid {
+      margin: 0 20px;
+      max-width: none;
+    }
+  }
+
+
+  @include widescreen {
+    max-width: 1200px;
+  }
+}
+
+.fa {
+  font-size: 21px;
+  text-align: center;
+  vertical-align: top;
+}

client/scss/libs/bulma/base/helpers.scss

@@ -0,0 +1,153 @@
+// Display
+
+$displays: "block" "flex" "inline" "inline-block" "inline-flex";
+
+@each $display in $displays {
+  .is-#{$display} {
+    display: #{$display};
+  }
+
+  .is-#{$display}-mobile {
+    @include mobile {
+      display: #{$display} !important;
+    }
+  }
+
+  .is-#{$display}-tablet {
+    @include tablet {
+      display: #{$display} !important;
+    }
+  }
+
+  .is-#{$display}-tablet-only {
+    @include tablet-only {
+      display: #{$display} !important;
+    }
+  }
+
+  .is-#{$display}-touch {
+    @include touch {
+      display: #{$display} !important;
+    }
+  }
+
+  .is-#{$display}-desktop {
+    @include desktop {
+      display: #{$display} !important;
+    }
+  }
+
+  .is-#{$display}-desktop-only {
+    @include desktop-only {
+      display: #{$display} !important;
+    }
+  }
+
+  .is-#{$display}-widescreen {
+    @include widescreen {
+      display: #{$display} !important;
+    }
+  }
+}
+
+// Float
+
+.is-clearfix {
+  @include clearfix;
+}
+
+.is-pulled-left {
+  float: left;
+}
+
+.is-pulled-right {
+  float: right;
+}
+
+// Overflow
+
+.is-clipped {
+  overflow: hidden !important;
+}
+
+// Overlay
+
+.is-overlay {
+  @include overlay;
+}
+
+// Text
+
+.has-text-centered {
+  text-align: center;
+}
+
+.has-text-left {
+  text-align: left;
+}
+
+.has-text-right {
+  text-align: right;
+}
+
+// Visibility
+
+.is-hidden {
+  display: none !important;
+}
+
+.is-hidden-mobile {
+  @include mobile {
+    display: none !important;
+  }
+}
+
+.is-hidden-tablet {
+  @include tablet {
+    display: none !important;
+  }
+}
+
+.is-hidden-tablet-only {
+  @include tablet-only {
+    display: none !important;
+  }
+}
+
+.is-hidden-touch {
+  @include touch {
+    display: none !important;
+  }
+}
+
+.is-hidden-desktop {
+  @include desktop {
+    display: none !important;
+  }
+}
+
+.is-hidden-desktop-only {
+  @include desktop-only {
+    display: none !important;
+  }
+}
+
+.is-hidden-widescreen {
+  @include widescreen {
+    display: none !important;
+  }
+}
+
+// Other
+
+.is-disabled {
+  pointer-events: none;
+}
+
+.is-marginless {
+  margin: 0 !important;
+}
+
+.is-unselectable {
+  @extend .unselectable;
+}

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;
+        }
+      }
+    }
+  }
+}

client/scss/libs/bulma/utilities/mixins.scss

@@ -0,0 +1,123 @@
+@mixin arrow($color) {
+  border: 1px solid $color;
+  border-right: 0;
+  border-top: 0;
+  content: " ";
+  display: block;
+  height: 7px;
+  pointer-events: none;
+  position: absolute;
+  transform: rotate(-45deg);
+  width: 7px;
+}
+
+@mixin clearfix {
+  &:after {
+    clear: both;
+    content: " ";
+    display: table;
+  }
+}
+
+@mixin center($size) {
+  left: 50%;
+  margin-left: -($size / 2);
+  margin-top: -($size / 2);
+  position: absolute;
+  top: 50%;
+}
+
+@mixin fa($size, $dimensions) {
+  display: inline-block;
+  font-size: $size;
+  height: $dimensions;
+  line-height: $dimensions;
+  text-align: center;
+  vertical-align: top;
+  width: $dimensions;
+}
+
+@mixin overlay($offset: 0) {
+  bottom: $offset;
+  left: $offset;
+  position: absolute;
+  right: $offset;
+  top: $offset;
+}
+
+@mixin placeholder {
+  $placeholders: ":-moz" ":-webkit-input" "-moz" "-ms-input";
+
+  @each $placeholder in $placeholders {
+    &:#{$placeholder}-placeholder {
+      @content;
+    }
+  }
+}
+
+@mixin replace($background, $width, $height) {
+  background-color: $background;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: $width $height;
+  display: block;
+  height: $height;
+  outline: none;
+  overflow: hidden;
+  text-indent: -290486px;
+  width: $width;
+}
+
+@mixin from($device) {
+  @media screen and (min-width: $device) {
+    @content;
+  }
+}
+
+@mixin until($device) {
+  @media screen and (max-width: $device - 1px) {
+    @content;
+  }
+}
+
+@mixin mobile {
+  @media screen and (max-width: $tablet - 1px) {
+    @content;
+  }
+}
+
+@mixin tablet {
+  @media screen and (min-width: $tablet) {
+    @content;
+  }
+}
+
+@mixin tablet-only {
+  @media screen and (min-width: $tablet) and (max-width: $desktop - 1px) {
+    @content;
+  }
+}
+
+@mixin touch {
+  @media screen and (max-width: $desktop - 1px) {
+    @content;
+  }
+}
+
+@mixin desktop {
+  @media screen and (min-width: $desktop) {
+    @content;
+  }
+}
+
+@mixin desktop-only {
+  @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px) {
+    @content;
+  }
+}
+
+@mixin widescreen {
+  @media screen and (min-width: $widescreen) {
+    @content;
+  }
+}

client/scss/libs/jquery-contextmenu.scss

@@ -29,7 +29,7 @@
   font-style: normal;
   font-weight: normal;
   line-height: 1;
-  color: $primary;
+  color: mc('blue', '500');
   text-align: center;
   -webkit-transform: translateY(-50%);
       -ms-transform: translateY(-50%);
@@ -57,7 +57,7 @@
   font-size: 14px;
   list-style-type: none;
   background: #fff;
-  border: 1px solid $primary;
+  border: 1px solid mc('blue', '500');
   border-radius: .2em;
   -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
           box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
@@ -85,7 +85,7 @@
 .context-menu-item.context-menu-hover {
   color: #fff;
   cursor: pointer; 
-  background-color: $primary;
+  background-color: mc('blue', '500');
 }
 
 .context-menu-item.context-menu-disabled {