Commit 9dd81f8d authored by Martin Wortschack's avatar Martin Wortschack Committed by Phil Hughes

Add styles and animations for onboarding helper

- Add styles for popover
- Add $accepting-mr-label-color to color variables
parent 3868a8f0
......@@ -39,6 +39,25 @@
}
}
.onboarding-popover {
box-shadow: 0 2px 4px $dropdown-shadow-color;
.popover-body {
font-size: $gl-font-size;
line-height: $gl-line-height;
padding: $gl-padding;
}
.popover-header {
display: none;
}
.accept-mr-label {
background-color: $accepting-mr-label-color;
color: $white-light;
}
}
.onboarding-welcome-page {
.popover {
min-width: auto;
......
......@@ -268,3 +268,27 @@ $skeleton-line-widths: (
@include webkit-prefix(animation-duration, 1s);
transform-origin: 50% 50%;
}
/* ----------------------------------------------
* Generated by Animista on 2019-4-26 17:40:41
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
@keyframes slide-in-fwd-bottom {
0% {
transform: translateZ(-1400px) translateY(800px);
opacity: 0;
}
100% {
transform: translateZ(0) translateY(0);
opacity: 1;
}
}
.slide-in-fwd-bottom-enter-active {
animation: slide-in-fwd-bottom 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.slide-in-fwd-bottom-leave-active {
animation: slide-in-fwd-bottom 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both reverse;
}
......@@ -501,3 +501,38 @@ img.emoji {
}
}
}
.onboarding-helper-container {
bottom: 40px;
right: 40px;
font-size: $gl-font-size-small;
background: $gray-100;
width: 200px;
border-radius: 24px;
box-shadow: 0 2px 4px $issue-boards-card-shadow;
z-index: 10000;
.collapsible {
max-height: 0;
transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
}
&.expanded {
border-bottom-right-radius: $border-radius-default;
border-bottom-left-radius: $border-radius-default;
.collapsible {
max-height: 1000px;
transition: max-height 1s ease-in-out;
}
}
.avatar {
border-color: darken($gray-normal, 10%);
img {
width: 32px;
height: 32px;
}
}
}
......@@ -641,6 +641,7 @@ $input-lg-width: 320px;
*/
$document-index-color: #888;
$help-shortcut-header-color: #333;
$accepting-mr-label-color: #69d100;
/*
* Issues
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment