thang
/
notes
mirror of https://github.com/thangisme/notes.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Added transition-duration scss variable

This commit is contained in:
Silvio Giebl 2019-12-18 21:02:07 +01:00
parent b5c13965a7
commit 0b4ed96f58
2 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
_sass/search.scss
View File

@ -8,7 +8,7 @@
flex-grow: 1; flex-grow: 1;
height: $sp-10; height: $sp-10;
padding: $sp-2; padding: $sp-2;
transition: padding linear 100ms; transition: padding linear #{$transition-duration / 2};
@include mq(md) { @include mq(md) {
position: relative !important; position: relative !important;
@ -22,7 +22,7 @@
.search-input-wrap { .search-input-wrap {
position: relative; position: relative;
height: $sp-8; height: $sp-8;
transition: height linear 100ms; transition: height linear #{$transition-duration / 2};
@include mq(md) { @include mq(md) {
height: 100% !important; height: 100% !important;
@ -55,7 +55,7 @@
background-color: $body-background-color; background-color: $body-background-color;
border-radius: 0; border-radius: 0;
box-shadow: none; box-shadow: none;
transition: width ease 200ms; transition: width ease $transition-duration;
@include fs-3; @include fs-3;
} }
@ -207,7 +207,7 @@
height: 0; height: 0;
background-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.2);
opacity: 0; 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 { .search-active {
@ -242,7 +242,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
opacity: 1; opacity: 1;
transition: opacity ease 200ms, width 0s, height 0s; transition: opacity ease $transition-duration, width 0s, height 0s;
} }
// stylelint-disable selector-max-type // stylelint-disable selector-max-type

1
_sass/support/_variables.scss
View File

@ -119,6 +119,7 @@ $nav-list-expander-right: true;
$content-width: 800px !default; $content-width: 800px !default;
$header-height: 60px !default; $header-height: 60px !default;
$search-results-width: $content-width - $nav-width !default; $search-results-width: $content-width - $nav-width !default;
$transition-duration: 400ms;
// //
// Media queries in pixels // Media queries in pixels