fomantic-ui 2.9.1-beta.2 → 2.9.1-beta.20

package/src/definitions/modules/search.less

@@ -8,12 +8,11 @@
  *
  */
 
-
 /*******************************
             Theme
 *******************************/
 
-@type    : 'module';
+@type : 'module';
 @element : 'search';
 
 @import (multiple) '../../theme.config';
@@ -23,367 +22,363 @@
 *******************************/
 
 .ui.search {
-  position: relative;
+    position: relative;
 }
 
 .ui.search > .prompt {
-  margin: 0;
-  outline: none;
-  -webkit-appearance: none;
-  -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
+    margin: 0;
+    outline: none;
+    -webkit-appearance: none;
+    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
 
-  text-shadow: none;
-  font-style: normal;
-  font-weight: @normal;
+    text-shadow: none;
+    font-style: normal;
+    font-weight: @normal;
 
-  line-height: @promptLineHeight;
-  padding: @promptPadding;
-  font-size: @promptFontSize;
+    line-height: @promptLineHeight;
+    padding: @promptPadding;
+    font-size: @promptFontSize;
 
-  background: @promptBackground;
-  border: @promptBorder;
-  color: @promptColor;
-  box-shadow: @promptBoxShadow;
-  transition: @promptTransition;
+    background: @promptBackground;
+    border: @promptBorder;
+    color: @promptColor;
+    box-shadow: @promptBoxShadow;
+    transition: @promptTransition;
 }
 
 .ui.search .prompt {
-  border-radius: @promptBorderRadius;
+    border-radius: @promptBorderRadius;
 }
 
-
-/*--------------
+/* --------------
      Icon
----------------*/
+--------------- */
 
 .ui.search .prompt ~ .search.icon {
-  cursor: pointer;
+    cursor: pointer;
 }
 
-/*--------------
+/* --------------
     Results
----------------*/
+--------------- */
 
 .ui.search > .results {
-  display: none;
+    display: none;
 
-  position: absolute;
-  top: 100%;
-  left: 0;
-  transform-origin: center top;
-  white-space: normal;
-  text-align: left;
-  text-transform: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    transform-origin: center top;
+    white-space: normal;
+    text-align: left;
+    text-transform: none;
 
-  background: @resultsBackground;
+    background: @resultsBackground;
 
-  margin-top: @resultsDistance;
-  width: @resultsWidth;
+    margin-top: @resultsDistance;
+    width: @resultsWidth;
 
-  border-radius: @resultsBorderRadius;
-  box-shadow: @resultsBoxShadow;
-  border: @resultsBorder;
-  z-index: @resultsZIndex;
+    border-radius: @resultsBorderRadius;
+    box-shadow: @resultsBoxShadow;
+    border: @resultsBorder;
+    z-index: @resultsZIndex;
 }
 .ui.search > .results > :first-child {
-  border-radius: @resultsBorderRadius @resultsBorderRadius 0 0;
+    border-radius: @resultsBorderRadius @resultsBorderRadius 0 0;
 }
 .ui.search > .results > :last-child {
-  border-radius: 0 0 @resultsBorderRadius @resultsBorderRadius;
+    border-radius: 0 0 @resultsBorderRadius @resultsBorderRadius;
 }
 
-/*--------------
+/* --------------
     Result
----------------*/
+--------------- */
 
 .ui.search > .results .result {
-  cursor: pointer;
-  display: block;
-  overflow: hidden;
-  font-size: @resultFontSize;
-  padding: @resultPadding;
-  color: @resultTextColor;
-  line-height: @resultLineHeight;
-  border-bottom: @resultDivider;
+    cursor: pointer;
+    display: block;
+    overflow: hidden;
+    font-size: @resultFontSize;
+    padding: @resultPadding;
+    color: @resultTextColor;
+    line-height: @resultLineHeight;
+    border-bottom: @resultDivider;
 }
 .ui.search > .results .result:last-child {
-  border-bottom: @resultLastDivider !important;
+    border-bottom: @resultLastDivider !important;
 }
 
 /* Image */
 .ui.search > .results .result .image {
-  float: @resultImageFloat;
-  overflow: hidden;
-  background: @resultImageBackground;
-  width: @resultImageWidth;
-  height: @resultImageHeight;
-  border-radius: @resultImageBorderRadius;
+    float: @resultImageFloat;
+    overflow: hidden;
+    background: @resultImageBackground;
+    width: @resultImageWidth;
+    height: @resultImageHeight;
+    border-radius: @resultImageBorderRadius;
 }
 .ui.search > .results .result .image img {
-  display: block;
-  width: auto;
-  height: 100%;
+    display: block;
+    width: auto;
+    height: 100%;
 }
 
-/*--------------
+/* --------------
       Info
----------------*/
+--------------- */
 
 .ui.search > .results .result .image + .content {
-  margin: @resultImageMargin;
+    margin: @resultImageMargin;
 }
 
 .ui.search > .results .result .title {
-  margin: @resultTitleMargin;
-  font-family: @resultTitleFont;
-  font-weight: @resultTitleFontWeight;
-  font-size: @resultTitleFontSize;
-  color: @resultTitleColor;
+    margin: @resultTitleMargin;
+    font-family: @resultTitleFont;
+    font-weight: @resultTitleFontWeight;
+    font-size: @resultTitleFontSize;
+    color: @resultTitleColor;
 }
 .ui.search > .results .result .description {
-  margin-top: @resultDescriptionDistance;
-  font-size: @resultDescriptionFontSize;
-  color: @resultDescriptionColor;
+    margin-top: @resultDescriptionDistance;
+    font-size: @resultDescriptionFontSize;
+    color: @resultDescriptionColor;
 }
 .ui.search > .results .result .price {
-  float: @resultPriceFloat;
-  color: @resultPriceColor;
+    float: @resultPriceFloat;
+    color: @resultPriceColor;
 }
 
-/*--------------
+/* --------------
     Message
----------------*/
+--------------- */
 
 .ui.search > .results > .message {
-  padding: @messageVerticalPadding @messageHorizontalPadding;
+    padding: @messageVerticalPadding @messageHorizontalPadding;
 }
 .ui.search > .results > .message .header {
-  font-family: @headerFont;
-  font-size: @messageHeaderFontSize;
-  font-weight: @messageHeaderFontWeight;
-  color: @messageHeaderColor;
+    font-family: @headerFont;
+    font-size: @messageHeaderFontSize;
+    font-weight: @messageHeaderFontWeight;
+    color: @messageHeaderColor;
 }
 .ui.search > .results > .message .description {
-  margin-top: @messageDescriptionDistance;
-  font-size: @messageDescriptionFontSize;
-  color: @messageDescriptionColor;
+    margin-top: @messageDescriptionDistance;
+    font-size: @messageDescriptionFontSize;
+    color: @messageDescriptionColor;
 }
 
 /* View All Results */
 .ui.search > .results > .action {
-  display: block;
-  border-top: @actionBorder;
-  background: @actionBackground;
-  padding: @actionPadding;
-  color: @actionColor;
-  font-weight: @actionFontWeight;
-  text-align: @actionAlign;
+    display: block;
+    border-top: @actionBorder;
+    background: @actionBackground;
+    padding: @actionPadding;
+    color: @actionColor;
+    font-weight: @actionFontWeight;
+    text-align: @actionAlign;
 }
 
-
 /*******************************
             States
 *******************************/
 
-/*--------------------
+/* --------------------
        Focus
----------------------*/
+--------------------- */
 
 .ui.search > .prompt:focus {
-  border-color: @promptFocusBorderColor;
-  background: @promptFocusBackground;
-  color: @promptFocusColor;
+    border-color: @promptFocusBorderColor;
+    background: @promptFocusBackground;
+    color: @promptFocusColor;
 }
 
 & when (@variationSearchLoading) {
-  /*--------------------
-         Loading
-  ---------------------*/
-
-  .ui.loading.search .input > i.icon::before {
-    position: absolute;
-    content: '';
-    top: 50%;
-    left: 50%;
-
-    margin: @loaderMargin;
-    width: @loaderSize;
-    height: @loaderSize;
-
-    border-radius: @circularRadius;
-    border: @loaderLineWidth solid @loaderFillColor;
-  }
-  .ui.loading.search .input > i.icon::after {
-    position: absolute;
-    content: '';
-    top: 50%;
-    left: 50%;
+    /* --------------------
+           Loading
+    --------------------- */
+
+    .ui.loading.search .input > i.icon::before {
+        position: absolute;
+        content: '';
+        top: 50%;
+        left: 50%;
+
+        margin: @loaderMargin;
+        width: @loaderSize;
+        height: @loaderSize;
+
+        border-radius: @circularRadius;
+        border: @loaderLineWidth solid @loaderFillColor;
+    }
+    .ui.loading.search .input > i.icon::after {
+        position: absolute;
+        content: '';
+        top: 50%;
+        left: 50%;
 
-    margin: @loaderMargin;
-    width: @loaderSize;
-    height: @loaderSize;
+        margin: @loaderMargin;
+        width: @loaderSize;
+        height: @loaderSize;
 
-    animation: loader @loaderSpeed infinite linear;
-    border: @loaderLineWidth solid @loaderLineColor;
-    border-radius: @circularRadius;
+        animation: loader @loaderSpeed infinite linear;
+        border: @loaderLineWidth solid @loaderLineColor;
+        border-radius: @circularRadius;
 
-    box-shadow: 0 0 0 1px transparent;
-  }
+        box-shadow: 0 0 0 1px transparent;
+    }
 }
 
-
-/*--------------
+/* --------------
       Hover
----------------*/
+--------------- */
 
 .ui.search > .results .result:hover,
 .ui.category.search > .results .category .result:hover {
-  background: @resultHoverBackground;
+    background: @resultHoverBackground;
 }
 .ui.search .action:hover:not(div) {
-  background: @actionHoverBackground;
+    background: @actionHoverBackground;
 }
 
-/*--------------
+/* --------------
       Active
----------------*/
+--------------- */
 & when (@variationSearchCategory) {
-  .ui.category.search > .results .category.active {
-    background: @categoryActiveBackground;
-  }
-  .ui.category.search > .results .category.active > .name {
-    color: @categoryNameActiveColor;
-  }
+    .ui.category.search > .results .category.active {
+        background: @categoryActiveBackground;
+    }
+    .ui.category.search > .results .category.active > .name {
+        color: @categoryNameActiveColor;
+    }
 }
 
 .ui.search > .results .result.active,
 .ui.category.search > .results .category .result.active {
-  position: relative;
-  border-left-color: @resultActiveBorderLeft;
-  background: @resultActiveBackground;
-  box-shadow: @resultActiveBoxShadow;
+    position: relative;
+    border-left-color: @resultActiveBorderLeft;
+    background: @resultActiveBackground;
+    box-shadow: @resultActiveBoxShadow;
 }
 .ui.search > .results .result.active .title {
-  color: @resultActiveTitleColor;
+    color: @resultActiveTitleColor;
 }
 .ui.search > .results .result.active .description {
-  color: @resultActiveDescriptionColor;
+    color: @resultActiveDescriptionColor;
 }
 
 & when (@variationSearchDisabled) {
-  /*--------------------
-          Disabled
-  ----------------------*/
-
-  /* Disabled */
-  .ui.disabled.search {
-    cursor: default;
-    pointer-events: none;
-    opacity: @disabledOpacity;
-  }
+    /* --------------------
+            Disabled
+    ---------------------- */
+
+    /* Disabled */
+    .ui.disabled.search {
+        cursor: default;
+        pointer-events: none;
+        opacity: @disabledOpacity;
+    }
 }
 
-
 /*******************************
            Types
 *******************************/
 
 & when (@variationSearchSelection) {
-  /*--------------
-      Selection
-  ---------------*/
+    /* --------------
+        Selection
+    --------------- */
 
-  .ui.search.selection .prompt {
-    border-radius: @selectionPromptBorderRadius;
-  }
+    .ui.search.selection .prompt {
+        border-radius: @selectionPromptBorderRadius;
+    }
 
-  /* Remove input */
-  .ui.search.selection > .icon.input > .remove.icon {
-    pointer-events: none;
-    position: absolute;
-    left: auto;
-    opacity: 0;
-    color: @selectionCloseIconColor;
-    top: @selectionCloseTop;
-    right: @selectionCloseRight;
-    transition: @selectionCloseTransition;
-  }
-  .ui.search.selection > .icon.input > .active.remove.icon {
-    cursor: pointer;
-    opacity: @selectionCloseIconOpacity;
-    pointer-events: auto;
-  }
-  .ui.search.selection > .icon.input:not([class*="left icon"]) > .icon ~ .remove.icon {
-    right: @selectionCloseIconInputRight;
-  }
-  .ui.search.selection > .icon.input > .remove.icon:hover {
-    opacity: @selectionCloseIconHoverOpacity;
-    color: @selectionCloseIconHoverColor;
-  }
+    /* Remove input */
+    .ui.search.selection > .icon.input > .remove.icon {
+        pointer-events: none;
+        position: absolute;
+        left: auto;
+        opacity: 0;
+        color: @selectionCloseIconColor;
+        top: @selectionCloseTop;
+        right: @selectionCloseRight;
+        transition: @selectionCloseTransition;
+    }
+    .ui.search.selection > .icon.input > .active.remove.icon {
+        cursor: pointer;
+        opacity: @selectionCloseIconOpacity;
+        pointer-events: auto;
+    }
+    .ui.search.selection > .icon.input:not([class*="left icon"]) > .icon ~ .remove.icon {
+        right: @selectionCloseIconInputRight;
+    }
+    .ui.search.selection > .icon.input > .remove.icon:hover {
+        opacity: @selectionCloseIconHoverOpacity;
+        color: @selectionCloseIconHoverColor;
+    }
 }
 
 & when (@variationSearchCategory) {
-  /*--------------
-      Category
-  ---------------*/
-
-  .ui.category.search .results {
-    width: @categoryResultsWidth;
-  }
-
-  .ui.category.search .results.animating,
-  .ui.category.search .results.visible {
-    display: table;
-  }
-
-  /* Category */
-  .ui.category.search > .results .category {
-    display: table-row;
-    background: @categoryBackground;
-    box-shadow: @categoryBoxShadow;
-    transition: @categoryTransition;
-  }
-
-  /* Last Category */
-  .ui.category.search > .results .category:last-child {
-    border-bottom: none;
-  }
-
-  /* First / Last */
-  .ui.category.search > .results .category:first-child .name + .result {
-    border-radius: 0 @resultsBorderRadius 0 0;
-  }
-  .ui.category.search > .results .category:last-child .result:last-child {
-    border-radius: 0 0 @resultsBorderRadius 0;
-  }
-
-  /* Category Result Name */
-  .ui.category.search > .results .category > .name {
-    display: table-cell;
-    text-overflow: ellipsis;
-    width: @categoryNameWidth;
-    white-space: @categoryNameWhitespace;
-    background: @categoryNameBackground;
-    font-family: @categoryNameFont;
-    font-size: @categoryNameFontSize;
-    padding: @categoryNamePadding;
-    font-weight: @categoryNameFontWeight;
-    color: @categoryNameColor;
-    border-bottom: @categoryDivider;
-  }
-
-  /* Category Result */
-  .ui.category.search > .results .category .results {
-    display: table-cell;
-    background: @categoryResultBackground;
-    border-left: @categoryResultLeftBorder;
-    border-bottom: @categoryDivider;
-  }
-  .ui.category.search > .results .category .result {
-    border-bottom: @categoryResultDivider;
-    transition: @categoryResultTransition;
-    padding: @categoryResultPadding;
-  }
+    /* --------------
+        Category
+    --------------- */
+
+    .ui.category.search .results {
+        width: @categoryResultsWidth;
+    }
+
+    .ui.category.search .results.animating,
+    .ui.category.search .results.visible {
+        display: table;
+    }
+
+    /* Category */
+    .ui.category.search > .results .category {
+        display: table-row;
+        background: @categoryBackground;
+        box-shadow: @categoryBoxShadow;
+        transition: @categoryTransition;
+    }
+
+    /* Last Category */
+    .ui.category.search > .results .category:last-child {
+        border-bottom: none;
+    }
+
+    /* First / Last */
+    .ui.category.search > .results .category:first-child .name + .result {
+        border-radius: 0 @resultsBorderRadius 0 0;
+    }
+    .ui.category.search > .results .category:last-child .result:last-child {
+        border-radius: 0 0 @resultsBorderRadius 0;
+    }
+
+    /* Category Result Name */
+    .ui.category.search > .results .category > .name {
+        display: table-cell;
+        text-overflow: ellipsis;
+        width: @categoryNameWidth;
+        white-space: @categoryNameWhitespace;
+        background: @categoryNameBackground;
+        font-family: @categoryNameFont;
+        font-size: @categoryNameFontSize;
+        padding: @categoryNamePadding;
+        font-weight: @categoryNameFontWeight;
+        color: @categoryNameColor;
+        border-bottom: @categoryDivider;
+    }
+
+    /* Category Result */
+    .ui.category.search > .results .category .results {
+        display: table-cell;
+        background: @categoryResultBackground;
+        border-left: @categoryResultLeftBorder;
+        border-bottom: @categoryDivider;
+    }
+    .ui.category.search > .results .category .result {
+        border-bottom: @categoryResultDivider;
+        transition: @categoryResultTransition;
+        padding: @categoryResultPadding;
+    }
 }
 
 /*******************************
@@ -391,186 +386,184 @@
 *******************************/
 
 & when (@variationSearchScrolling),
-  (@variationSearchShort),
-  (@variationSearchLong) {
+(@variationSearchShort),
+(@variationSearchLong) {
+    /* -------------------
+         Scrolling
+    -------------------- */
 
-  /*-------------------
-       Scrolling
-  --------------------*/
-
-  .ui.scrolling.search > .results,
+    .ui.scrolling.search > .results,
     .ui.search.long > .results,
-      .ui.search.short > .results {
-    overflow-x: hidden;
-    overflow-y: auto;
-    backface-visibility: hidden;
-    -webkit-overflow-scrolling: touch;
-  }
+    .ui.search.short > .results {
+        overflow-x: hidden;
+        overflow-y: auto;
+        overscroll-behavior: @overscrollBehavior;
+        backface-visibility: hidden;
+        -webkit-overflow-scrolling: touch;
+    }
 }
 
-
 & when (@variationSearchScrolling) {
-  @media only screen and (max-width : @largestMobileScreen) {
-    .ui.scrolling.search > .results {
-      max-height: @scrollingMobileMaxResultsHeight;
+    @media only screen and (max-width: @largestMobileScreen) {
+        .ui.scrolling.search > .results {
+            max-height: @scrollingMobileMaxResultsHeight;
+        }
     }
-  }
-  @media only screen and (min-width: @tabletBreakpoint) {
-    .ui.scrolling.search > .results {
-      max-height: @scrollingTabletMaxResultsHeight;
+    @media only screen and (min-width: @tabletBreakpoint) {
+        .ui.scrolling.search > .results {
+            max-height: @scrollingTabletMaxResultsHeight;
+        }
     }
-  }
-  @media only screen and (min-width: @computerBreakpoint) {
-    .ui.scrolling.search > .results {
-      max-height: @scrollingComputerMaxResultsHeight;
+    @media only screen and (min-width: @computerBreakpoint) {
+        .ui.scrolling.search > .results {
+            max-height: @scrollingComputerMaxResultsHeight;
+        }
     }
-  }
-  @media only screen and (min-width: @widescreenMonitorBreakpoint) {
-    .ui.scrolling.search > .results {
-      max-height: @scrollingWidescreenMaxResultsHeight;
+    @media only screen and (min-width: @widescreenMonitorBreakpoint) {
+        .ui.scrolling.search > .results {
+            max-height: @scrollingWidescreenMaxResultsHeight;
+        }
     }
-  }
 }
 
-@media only screen and (max-width : @largestMobileScreen) {
-  & when (@variationSearchShort) {
-    .ui.search.short > .results {
-      max-height: @scrollingMobileMaxResultsHeight;
-    }
-    & when (@variationSearchVeryShort) {
-      .ui.search[class*="very short"] > .results {
-        max-height: @scrollingMobileMaxResultsHeight * 0.75;
-      }
-    }
-  }
-  & when (@variationSearchLong) {
-    .ui.search.long > .results {
-      max-height: @scrollingMobileMaxResultsHeight * 2;
+@media only screen and (max-width: @largestMobileScreen) {
+    & when (@variationSearchShort) {
+        .ui.search.short > .results {
+            max-height: @scrollingMobileMaxResultsHeight;
+        }
+        & when (@variationSearchVeryShort) {
+            .ui.search[class*="very short"] > .results {
+                max-height: @scrollingMobileMaxResultsHeight * 0.75;
+            }
+        }
     }
-    & when (@variationSearchVeryLong) {
-      .ui.search[class*="very long"] > .results {
-        max-height: @scrollingMobileMaxResultsHeight * 3;
-      }
+    & when (@variationSearchLong) {
+        .ui.search.long > .results {
+            max-height: @scrollingMobileMaxResultsHeight * 2;
+        }
+        & when (@variationSearchVeryLong) {
+            .ui.search[class*="very long"] > .results {
+                max-height: @scrollingMobileMaxResultsHeight * 3;
+            }
+        }
     }
-  }
 }
 @media only screen and (min-width: @tabletBreakpoint) {
-  & when (@variationSearchShort) {
-    .ui.search.short > .results {
-      max-height: @scrollingTabletMaxResultsHeight;
-    }
-    & when (@variationSearchVeryShort) {
-      .ui.search[class*="very short"] > .results {
-        max-height: @scrollingTabletMaxResultsHeight * 0.75;
-      }
+    & when (@variationSearchShort) {
+        .ui.search.short > .results {
+            max-height: @scrollingTabletMaxResultsHeight;
+        }
+        & when (@variationSearchVeryShort) {
+            .ui.search[class*="very short"] > .results {
+                max-height: @scrollingTabletMaxResultsHeight * 0.75;
+            }
+        }
     }
-  }
-  & when (@variationSearchLong) {
-    .ui.search.long > .results {
-      max-height: @scrollingTabletMaxResultsHeight * 2;
+    & when (@variationSearchLong) {
+        .ui.search.long > .results {
+            max-height: @scrollingTabletMaxResultsHeight * 2;
+        }
+        & when (@variationSearchVeryLong) {
+            .ui.search[class*="very long"] > .results {
+                max-height: @scrollingTabletMaxResultsHeight * 3;
+            }
+        }
     }
-    & when (@variationSearchVeryLong) {
-      .ui.search[class*="very long"] > .results {
-        max-height: @scrollingTabletMaxResultsHeight * 3;
-      }
-    }
-  }
 }
 @media only screen and (min-width: @computerBreakpoint) {
-  & when (@variationSearchShort) {
-    .ui.search.short > .results {
-      max-height: @scrollingComputerMaxResultsHeight;
+    & when (@variationSearchShort) {
+        .ui.search.short > .results {
+            max-height: @scrollingComputerMaxResultsHeight;
+        }
+        & when (@variationSearchVeryShort) {
+            .ui.search[class*="very short"] > .results {
+                max-height: @scrollingComputerMaxResultsHeight * 0.75;
+            }
+        }
     }
-    & when (@variationSearchVeryShort) {
-      .ui.search[class*="very short"] > .results {
-        max-height: @scrollingComputerMaxResultsHeight * 0.75;
-      }
+    & when (@variationSearchLong) {
+        .ui.search.long > .results {
+            max-height: @scrollingComputerMaxResultsHeight * 2;
+        }
+        & when (@variationSearchVeryLong) {
+            .ui.search[class*="very long"] > .results {
+                max-height: @scrollingComputerMaxResultsHeight * 3;
+            }
+        }
     }
-  }
-  & when (@variationSearchLong) {
-    .ui.search.long > .results {
-      max-height: @scrollingComputerMaxResultsHeight * 2;
-    }
-    & when (@variationSearchVeryLong) {
-      .ui.search[class*="very long"] > .results {
-        max-height: @scrollingComputerMaxResultsHeight * 3;
-      }
-    }
-  }
 }
 @media only screen and (min-width: @widescreenMonitorBreakpoint) {
-  & when (@variationSearchShort) {
-    .ui.search.short > .results {
-      max-height: @scrollingWidescreenMaxResultsHeight;
-    }
-    & when (@variationSearchVeryShort) {
-      .ui.search[class*="very short"] > .results {
-        max-height: @scrollingWidescreenMaxResultsHeight * 0.75;
-      }
+    & when (@variationSearchShort) {
+        .ui.search.short > .results {
+            max-height: @scrollingWidescreenMaxResultsHeight;
+        }
+        & when (@variationSearchVeryShort) {
+            .ui.search[class*="very short"] > .results {
+                max-height: @scrollingWidescreenMaxResultsHeight * 0.75;
+            }
+        }
     }
-  }
-  & when (@variationSearchLong) {
-    .ui.search.long > .results {
-      max-height: @scrollingWidescreenMaxResultsHeight * 2;
+    & when (@variationSearchLong) {
+        .ui.search.long > .results {
+            max-height: @scrollingWidescreenMaxResultsHeight * 2;
+        }
+        & when (@variationSearchVeryLong) {
+            .ui.search[class*="very long"] > .results {
+                max-height: @scrollingWidescreenMaxResultsHeight * 3;
+            }
+        }
     }
-    & when (@variationSearchVeryLong) {
-      .ui.search[class*="very long"] > .results {
-        max-height: @scrollingWidescreenMaxResultsHeight * 3;
-      }
-    }
-  }
 }
 
 & when (@variationSearchAligned) {
-  /*-------------------
-       Left / Right
-  --------------------*/
+    /* -------------------
+         Left / Right
+    -------------------- */
 
-  .ui[class*="left aligned"].search > .results {
-    right: auto;
-    left: 0;
-  }
-  .ui[class*="right aligned"].search > .results {
-    right: 0;
-    left: auto;
-  }
+    .ui[class*="left aligned"].search > .results {
+        right: auto;
+        left: 0;
+    }
+    .ui[class*="right aligned"].search > .results {
+        right: 0;
+        left: auto;
+    }
 }
 
-/*--------------
+/* --------------
     Fluid
----------------*/
+--------------- */
 
 & when (@variationSearchFluid) {
-  .ui.fluid.search .results {
-    width: 100%;
-  }
+    .ui.fluid.search .results {
+        width: 100%;
+    }
 }
 
-
-/*--------------
+/* --------------
       Sizes
----------------*/
+--------------- */
 
 .ui.search {
-  font-size: @relativeMedium;
+    font-size: @relativeMedium;
 }
 & when not (@variationFeedSizes = false) {
-  each(@variationFeedSizes, {
-    @s: @{value}SearchSize;
-    .ui.@{value}.search  {
-      font-size: @@s;
-    }
-  })
+    each(@variationFeedSizes, {
+        @s: @{value}SearchSize;
+        .ui.@{value}.search  {
+            font-size: @@s;
+        }
+    })
 }
 
-/*--------------
+/* --------------
       Mobile
----------------*/
+--------------- */
 
 @media only screen and (max-width: @largestMobileScreen) {
-  .ui.search .results {
-    max-width: @mobileMaxWidth;
-  }
+    .ui.search .results {
+        max-width: @mobileMaxWidth;
+    }
 }
 
 .loadUIOverrides();