Merge pull request #2212 from weseek/imprv/hexagonized-resize-button

Imprv/hexagonized resize button

src/client/js/components/Sidebar.jsx

@@ -7,7 +7,7 @@ import {
   withNavigationUIController,
   LayoutManager,
   NavigationProvider,
-  ThemeProvider, modeGenerator,
+  ThemeProvider,
 } from '@atlaskit/navigation-next';
 
 import { createSubscribedElement } from './UnstatedUtils';

src/client/styles/scss/_mixins.scss

@@ -108,3 +108,115 @@
     height: calc(100% - #{$margin});
   }
 }
+
+/*
+ * see: https://gist.github.com/bjmiller121/902745cbb38d88178882
+ *
+ * Makes a CSS hexagon! based off of http://csshexagon.com/
+ * Demo: http://sassmeister.com/gist/98fcf3ce163a97d2ef7e
+ */
+@mixin hexagonize($size, $color, $box-shadow: 0, $border: 0) {
+  width: $size;
+  height: ($size * 0.577);
+  margin: ($size * 0.288) 0;
+  background-color: $color;
+  border-right: $border;
+  border-left: $border;
+
+  @if $box-shadow != 0 {
+    box-shadow: $box-shadow;
+  }
+
+  &:before,
+  &:after {
+    position: absolute;
+    content: '';
+
+    @if $border == 0 and $box-shadow == 0 {
+      left: 0;
+      width: 0;
+      border-right: ($size/2) solid transparent;
+      border-left: ($size/2) solid transparent;
+    } @else {
+      left: ($size * 0.129);
+      z-index: 1;
+      width: ($size * 0.707);
+      height: ($size * 0.707);
+      background-color: inherit;
+      transform: scaleY(0.6) rotate(-45deg);
+    }
+
+    @if $box-shadow != 0 {
+      box-shadow: $box-shadow;
+    }
+  }
+
+  &:before {
+    @if $border == 0 and $box-shadow == 0 {
+      bottom: 99%;
+      border-bottom: ($size * 0.288) solid $color;
+    } @else {
+      top: -($size * 0.353);
+    }
+
+    @if $border != 0 {
+      border-top: $border;
+      border-right: $border;
+    }
+  }
+
+  &:after {
+    @if $border == 0 and $box-shadow == 0 {
+      top: 99%;
+      width: 0;
+      border-top: ($size * 0.288) solid $color;
+    } @else {
+      bottom: -($size * 0.353);
+    }
+
+    @if $border != 0 {
+      border-bottom: $border;
+      border-left: $border;
+    }
+  }
+
+  @if $box-shadow != 0 {
+    > span {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 2;
+
+      &:after {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: $size;
+        height: $size * 0.577;
+        content: '';
+        background-color: $color;
+      }
+    }
+  }
+}
+
+@mixin override-hexagon-color($color, $bgcolor) {
+  background-color: $bgcolor;
+  transition: background-color 200ms linear, color 100ms linear, opacity 300ms cubic-bezier(0.2, 0, 0, 1), transform 300ms cubic-bezier(0.2, 0, 0, 1);
+
+  &:before {
+    border-bottom-color: $bgcolor;
+    transition: border-bottom-color 200ms linear;
+  }
+  &:after {
+    border-top-color: $bgcolor;
+    transition: border-top-color 200ms linear;
+  }
+  > span:after {
+    background-color: $bgcolor;
+    transition: background-color 200ms linear;
+  }
+  svg path {
+    fill: $color;
+  }
+}

src/client/styles/scss/_sidebar.scss

@@ -1,6 +1,32 @@
 .grw-sidebar {
   .ak-navigation-resize-button {
+    // locate to the center of screen
     top: calc(50vh - 20px);
+
+    /*
+     * styles
+     */
+    // unset originalhover color
+    > div:hover {
+      background-color: unset;
+    }
+
+    $box-shadow: 0 1px 1px rgba(96, 96, 96, 0.75);
+    @include hexagonize(24px, white, $box-shadow);
+
+    // rotate 30deg
+    transform: translate(-50%) rotate(30deg);
+    > div,
+    > span svg {
+      transform: rotate(-30deg);
+    }
+
+    // centering icon
+    > span svg {
+      position: relative;
+      z-index: 1;
+      margin-top: -5.5px;
+    }
   }
 
   // override @atlaskit/navigation-next styles

src/client/styles/scss/theme/_apply-colors.scss

@@ -12,6 +12,7 @@ $input-focus-color: $color-global;
 @import '~bootstrap/scss/functions';
 @import '~bootstrap/scss/variables';
 @import '~bootstrap/scss/mixins';
+@import '../mixins';
 @import 'mixins-for-tables';
 @import 'reboot-bootstrap-colors';
 @import 'reboot-bootstrap-theme-colors';
@@ -115,6 +116,19 @@ $input-focus-color: $color-global;
 }
 
 .grw-sidebar {
+  .ak-navigation-resize-button {
+    $color-resize-button: $color-global !default;
+    $bgcolor-resize-button: white !default;
+    $color-resize-button-hover: $color-reversal !default;
+    $bgcolor-resize-button-hover: lighten($bgcolor-resize-button, 5%) !default;
+
+    @include override-hexagon-color($color-resize-button, $bgcolor-resize-button);
+
+    &:hover {
+      @include override-hexagon-color($color-resize-button-hover, $bgcolor-resize-button-hover);
+    }
+  }
+
   .grw-global-item-container.active {
     button:after {
       // fukidashi color

src/client/styles/scss/theme/default.scss

@@ -53,6 +53,11 @@ html[light] {
   $bgcolor-sidebar: #122c55;
   $color-sidebar-context: $color-global;
   $bgcolor-sidebar-context: #f4f6fc;
+  // Sidebar resize button
+  $color-resize-button: $color-reversal;
+  $bgcolor-resize-button: #5587ec;
+  $color-resize-button-hover: $color-reversal;
+  $bgcolor-resize-button-hover: lighten($bgcolor-resize-button, 5%);
 
   // Icon colors
   $color-editor-icons: $color-global;
@@ -121,6 +126,11 @@ html[dark] {
   $bgcolor-sidebar: $bgcolor-navbar;
   $color-sidebar-context: $color-global;
   $bgcolor-sidebar-context: lighten($bgcolor-navbar, 5%);
+  // Sidebar resize button
+  $color-resize-button: $color-global;
+  $bgcolor-resize-button: #5587ec;
+  $color-resize-button-hover: $color-global;
+  $bgcolor-resize-button-hover: lighten($bgcolor-resize-button, 5%);
 
   // Icon colors
   $color-editor-icons: $color-global;