Aha guide milestone2

client/assets/styles/scss/components/aha-guide.scss

@@ -1,15 +1,58 @@
 .aha-guide {
   color: $gray;
   overflow: hidden;
+  position: relative;
+
+  &.padding-md {
+    @include media(xxs) {
+      padding: 30px 15px;
+    }
+  }
+
+  > .grid-block {
+    overflow: visible;
+  }
 
   // anchor image
+  .spinner-wrapper,
+  .aha-meter {
+    height: $input-md;
+    left: 15px;
+    position: absolute;
+    top: 16px;
+    transition: opacity .15s ease-in-out, transform .15s ease-in-out;
+    width: $input-md;
+
+    &.ng-leave {
+      opacity: 1;
+      transform: scale3d(1,1,1);
+    }
+
+    &.ng-leave-active {
+      opacity: 0;
+      transform: scale3d(.8,.8,1);
+    }
+
+    &.ng-enter {
+      opacity: 0;
+      transform: scale3d(.8,.8,1);
+    }
+
+    &.ng-enter-active {
+      opacity: 1;
+      transform: scale3d(1,1,1);
+    }
+  }
+
+  .spinner-wrapper {
+    overflow: hidden;
+  }
+
   .aha-meter {
     background-image: linear-gradient(90deg, $gray-lightest 50%, transparent 50%, transparent), linear-gradient(0deg, $gray-lightest 50%, $gray-lightest 50%, $gray-lightest);
     border-radius: 50%;
     height: $input-md;
-    margin-right: 15px;
     padding: $input-border;
-    position: relative;
     width: $input-md;
 
     $step: 1; // step of % for created classes
@@ -27,6 +70,16 @@
           background-image: linear-gradient($nextdeg, $green 50%, transparent 50%, transparent), linear-gradient(270deg, $green 50%, $gray-lightest 50%, $gray-lightest);
         }
       }
+
+      &.aha-error.aha-meter-#{$i * $step} {
+        @if $i < $half {
+          $nextdeg: 90deg + ($increment * $i);
+          background-image: linear-gradient(90deg, $gray-lightest 50%, transparent 50%, transparent), linear-gradient($nextdeg, $orange 50%, $gray-lightest 50%, $gray-lightest);
+        } @else {
+          $nextdeg: -90deg + ($increment * ($i - $half));
+          background-image: linear-gradient($nextdeg, $orange 50%, transparent 50%, transparent), linear-gradient(270deg, $orange 50%, $gray-lightest 50%, $gray-lightest);
+        }
+      }
     }
 
     &.aha-meter-100 .iconnables {
@@ -40,6 +93,68 @@
       padding: 6px;
       width: 100%;
     }
+
+    .icons-alert {
+      color: $orange;
+      overflow: visible;
+      padding: 10px 11px 11px;
+    }
+  }
+
+  .aha-text {
+    margin-left: $input-md + 15;
+    min-height: $input-md;
+    overflow: visible;
+    position: relative;
+  }
+
+  .p-slide {
+    position: absolute;
+    top: 18px;
+    transition: opacity .15s ease-in-out, transform .3s ease-in-out;
+
+    &.ng-enter {
+      opacity: 0;
+      transform: translate3d(25%,0,0);
+    }
+
+    &.ng-enter-active {
+      opacity: 1;
+      transform: translate3d(0,0,0);
+    }
+
+    &.ng-leave {
+      opacity: 1;
+      transform: translate3d(0,0,0);
+    }
+
+    &.ng-leave-active {
+      opacity: 0;
+      transform: translate3d(-25%,0,0);
+    }
+
+    &.reverse {
+
+      &.ng-enter {
+        opacity: 0;
+        transform: translate3d(-25%,0,0);
+      }
+
+      &.ng-enter-active {
+        opacity: 1;
+        transform: translate3d(0,0,0);
+      }
+
+      &.ng-leave {
+        opacity: 1;
+        transform: translate3d(0,0,0);
+      }
+
+      &.ng-leave-active {
+        opacity: 0;
+        transform: translate3d(25%,0,0);
+      }
+    }
   }
 
   // menu
@@ -50,9 +165,17 @@
     margin-left: 30px;
     min-width: 30px;
 
+    @include media(xxs) {
+      margin-left: 9px;
+    }
+
     .iconnables {
       height: 100%;
       width: 15px;
     }
   }
 }
+
+.aha-tips > .iconnables {
+  margin-left: 6px;
+}

client/assets/styles/scss/components/aha-modals.scss

@@ -1,10 +1,8 @@
 .modal-backdrop > .aha-guide {
   animation: fade .15s ease-in-out;
-  background: $gray-lighterest;
-  border: 1px solid $gray-lighter;
-  border-radius: $input-border-radius-lg;
   height: 105px;
   left: 0;
+  margin: 0 auto;
   max-width: calc(100vw - 30px);
   position: absolute;
   right: 0;
@@ -15,6 +13,10 @@
     height: 90px;
   }
 
+  @include media(xxxs) {
+    top: 0;
+  }
+
   &.fixed {
     position: fixed;
     z-index: $z-modal;
@@ -31,8 +33,26 @@
       margin-top: 105px;
     }
   }
+
+  .spinner-wrapper,
+  .aha-meter {
+    top: 24px;
+  }
 }
 
 .modal-dialog > .aha-guide {
   border-bottom: 1px solid $gray-lighter;
+
+  &:only-child {
+    border-bottom: 0;
+  }
+
+  > .grid-block {
+    position: relative;
+  }
+
+  .aha-meter {
+    left: 0;
+    top: 0;
+  }
 }

client/assets/styles/scss/components/aha-popover.scss

@@ -0,0 +1,27 @@
+.popover.popover-aha {
+  left: 75px;
+  max-width: none;
+  top: 66px;
+  width: 450px;
+
+  @include media(xxs) {
+    left: 15px;
+    right: 15px;
+    top: 60px;
+    width: calc(100vw - 30px);
+
+    &.right {
+      margin-left: 0;
+    }
+  }
+
+  .arrow {
+    @include media(xxs) {
+      display: none;
+    }
+  }
+
+  .popover-content {
+    @extend %padding-sm;
+  }
+}

client/assets/styles/scss/components/aha-sidebar.scss

@@ -12,6 +12,11 @@
   width: 390px;
   z-index: $z-popover;
 
+  @include media(xxxs) {
+    left: 12px;
+    width: auto;
+  }
+
   &.ng-enter {
     transform: translate3d(100%,0,0);
   }

client/assets/styles/scss/components/buttons/buttons-debug.scss

@@ -11,7 +11,7 @@
 
     // override
     &:last-child {
-      margin-left: -$input-border;
+      margin-left: -1px;
     }
   }
 

client/assets/styles/scss/components/buttons/buttons-group.scss

@@ -134,21 +134,21 @@
   > .btn:active {
 
     &:not(:first-child):not(:last-child) {
-      border-radius: $input-border-radius-xxs;
+      border-radius: $input-border-radius;
     }
 
     &:first-child:not(:last-child) {
-      border-bottom-right-radius: $input-border-radius-xxs;
-      border-top-right-radius: $input-border-radius-xxs;
+      border-bottom-right-radius: $input-border-radius;
+      border-top-right-radius: $input-border-radius;
 
       &.btn-xs {
         padding-left: 9px;
       }
     }
 
     &:last-child:not(:first-child) {
-      border-bottom-left-radius: $input-border-radius-xxs;
-      border-top-left-radius: $input-border-radius-xxs;
+      border-bottom-left-radius: $input-border-radius;
+      border-top-left-radius: $input-border-radius;
 
       &.btn-xs {
         padding-right: 9px;

client/assets/styles/scss/components/buttons/buttons-toolbar.scss

@@ -1,20 +1,14 @@
 // buttons
 .btn-toolbar {
-  border: $input-border solid;
+  border: 1px solid;
   flex: 0 0 auto;
-  font-size: 15px;
+  font-family: $sans-serif; // override monospace fonts inside log header
+  font-size: 14px;
   font-weight: $weight-bold;
-  height: 30px;
-  line-height: 30px - ($input-border * 2);
+  height: $input-xs;
+  line-height: $input-xs - 2px;
   padding: 0 9px;
 
-  .build-log-header & {
-    font-family: $sans-serif; // override monospace fonts inside log header
-    font-size: 13px;
-    height: $input-xs;
-    line-height: $input-xs - ($input-border * 2);
-  }
-
   &.purple {
     @extend %toolbar-btn-purple;
   }

client/assets/styles/scss/components/buttons/buttons.scss

@@ -3,7 +3,6 @@
   border: 0;
   border-radius: $input-border-radius;
   cursor: pointer;
-  display: inline-block;
   font-size: 18px;
   font-weight: $weight-normal;
   padding: 0 15px;
@@ -12,6 +11,10 @@
   user-select: none;
   white-space: nowrap;
 
+  &:not(.grid-block) {
+    display: inline-block;
+  }
+
   // for <a> elemnts
   &:hover,
   &:active {
@@ -110,7 +113,6 @@
 // only for inline buttons
 %btn-xxs,
 .btn-xxs {
-  border-radius: $input-border-radius-xxs;
   font-size: 12px;
   height: $input-xxs;
   line-height: $input-line-height-xxs;
@@ -229,6 +231,10 @@
   &.reversed {
     letter-spacing: 0;
   }
+
+  &.btn-xxs {
+    border-width: 1px;
+  }
 }
 
 .blue,

client/assets/styles/scss/components/cards.scss

@@ -71,10 +71,10 @@
 
     .iconnables {
       cursor: pointer;
-      height: 48px;
-      margin: 0 auto 15px;
+      height: 36px;
+      margin: 0 auto 24px;
       pointer-events: auto;
-      width: 48px;
+      width: 36px;
     }
 
     .h4 {

client/assets/styles/scss/components/help.scss

@@ -18,8 +18,10 @@
   border: 0;
   color: $gray-light;
   left: 0;
+  overflow: visible;
   padding: 0 12px;
   position: absolute;
+  top: 0;
 
   &:hover {
     color: lighten($blue,10%);
@@ -38,6 +40,7 @@
   max-width: none; // overwrites max-width set in popover.scss
   padding-bottom: 26px;
   position: absolute;
+  top: 0;
   transition: none;
   width: 400px;
   z-index: $z-modal-backdrop; // we want these to stay under modals...since they do not get dismissed on modal open