From 0b4ed96f585555ef1e034d3dc2e1169dc2a45a70 Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@hivemq.com>
Date: Wed, 18 Dec 2019 21:02:07 +0100
Subject: [PATCH] Added transition-duration scss variable
---
_sass/search.scss | 10 +++++-----
_sass/support/_variables.scss | 1 +
2 files changed, 6 insertions(+), 5 deletions(-)
diff --git a/_sass/search.scss b/_sass/search.scss
index 7315e264..3d75b9d4 100644
--- a/_sass/search.scss
+++ b/_sass/search.scss
@@ -8,7 +8,7 @@
flex-grow: 1;
height: $sp-10;
padding: $sp-2;
- transition: padding linear 100ms;
+ transition: padding linear #{$transition-duration / 2};
@include mq(md) {
position: relative !important;
@@ -22,7 +22,7 @@
.search-input-wrap {
position: relative;
height: $sp-8;
- transition: height linear 100ms;
+ transition: height linear #{$transition-duration / 2};
@include mq(md) {
height: 100% !important;
@@ -55,7 +55,7 @@
background-color: $body-background-color;
border-radius: 0;
box-shadow: none;
- transition: width ease 200ms;
+ transition: width ease $transition-duration;
@include fs-3;
}
@@ -207,7 +207,7 @@
height: 0;
background-color: rgba(0, 0, 0, 0.2);
opacity: 0;
- transition: opacity ease 200ms, width 0s 200ms, height 0s 200ms;
+ transition: opacity ease $transition-duration, width 0s $transition-duration, height 0s $transition-duration;
}
.search-active {
@@ -242,7 +242,7 @@
width: 100%;
height: 100%;
opacity: 1;
- transition: opacity ease 200ms, width 0s, height 0s;
+ transition: opacity ease $transition-duration, width 0s, height 0s;
}
// stylelint-disable selector-max-type
diff --git a/_sass/support/_variables.scss b/_sass/support/_variables.scss
index ef14a181..96dcccb2 100644
--- a/_sass/support/_variables.scss
+++ b/_sass/support/_variables.scss
@@ -119,6 +119,7 @@ $nav-list-expander-right: true;
$content-width: 800px !default;
$header-height: 60px !default;
$search-results-width: $content-width - $nav-width !default;
+$transition-duration: 400ms;
//
// Media queries in pixels
--
GitLab