search.scss in fni-docs-theme-0.6.2

- old
+ new

@@ -6,11 +6,11 @@
   position: relative;
   z-index: 2;
   flex-grow: 1;
   height: $sp-10;
   padding: $sp-2;
-  transition: padding linear #{$transition-duration / 2};
+  transition: padding linear calc($transition-duration / 2);
 
   @include mq(md) {
     position: relative !important;
     width: auto !important;
     height: 100% !important;
@@ -24,11 +24,11 @@
   z-index: 1;
   height: $sp-8;
   overflow: hidden;
   border-radius: $border-radius;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
-  transition: height linear #{$transition-duration / 2};
+  transition: height linear calc($transition-duration / 2);
 
   @include mq(md) {
     position: absolute;
     width: 100%;
     max-width: $search-results-width;
@@ -60,11 +60,11 @@
     padding-top: $gutter-spacing-sm;
     padding-bottom: $gutter-spacing-sm;
     padding-left: #{$gutter-spacing + $sp-5};
     font-size: 14px;
     background-color: $body-background-color;
-    transition: padding-left linear #{$transition-duration / 2};
+    transition: padding-left linear calc($transition-duration / 2);
   }
 
   &:focus {
     outline: 0;
 
@@ -80,11 +80,11 @@
   height: 100%;
   padding-left: $gutter-spacing-sm;
 
   @include mq(md) {
     padding-left: $gutter-spacing;
-    transition: padding-left linear #{$transition-duration / 2};
+    transition: padding-left linear calc($transition-duration / 2);
   }
 
   .search-icon {
     width: #{$sp-4 * 1.2};
     height: #{$sp-4 * 1.2};
@@ -239,10 +239,10 @@
   display: flex;
   width: $sp-9;
   height: $sp-9;
   background-color: $search-background-color;
   border: 1px solid rgba($link-color, 0.3);
-  border-radius: #{$sp-9 / 2};
+  border-radius: calc($sp-9 / 2);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
   align-items: center;
   justify-content: center;
 }
 