|
|
@ -44,7 +44,6 @@ |
|
|
|
border: @promptBorder; |
|
|
|
color: @promptColor; |
|
|
|
box-shadow: @promptBoxShadow; |
|
|
|
box-sizing: border-box; |
|
|
|
transition: @promptTransition; |
|
|
|
} |
|
|
|
|
|
|
@ -65,7 +64,7 @@ |
|
|
|
Results |
|
|
|
---------------*/ |
|
|
|
|
|
|
|
.ui.search .results { |
|
|
|
.ui.search > .results { |
|
|
|
display: none; |
|
|
|
|
|
|
|
position: absolute; |
|
|
@ -87,7 +86,7 @@ |
|
|
|
Result |
|
|
|
---------------*/ |
|
|
|
|
|
|
|
.ui.search .result { |
|
|
|
.ui.search > .results .result { |
|
|
|
font-family: @pageFont; |
|
|
|
cursor: pointer; |
|
|
|
overflow: hidden; |
|
|
@ -96,12 +95,12 @@ |
|
|
|
color: @resultTextColor; |
|
|
|
line-height: @resultLineHeight; |
|
|
|
} |
|
|
|
.ui.search .result:first-child { |
|
|
|
.ui.search > .results .result:first-child { |
|
|
|
border-top: none; |
|
|
|
} |
|
|
|
|
|
|
|
/* Image */ |
|
|
|
.ui.search .result .image { |
|
|
|
.ui.search > .results .result .image { |
|
|
|
float: @resultImageFloat; |
|
|
|
overflow: hidden; |
|
|
|
background: @resultImageBackground; |
|
|
@ -109,7 +108,7 @@ |
|
|
|
height: @resultImageHeight; |
|
|
|
border-radius: @resultImageBorderRadius; |
|
|
|
} |
|
|
|
.ui.search .result .image img { |
|
|
|
.ui.search > .results .result .image img { |
|
|
|
display: block; |
|
|
|
width: auto; |
|
|
|
height: 100%; |
|
|
@ -119,19 +118,21 @@ |
|
|
|
Info |
|
|
|
---------------*/ |
|
|
|
|
|
|
|
.ui.search .result .image + .content { |
|
|
|
.ui.search > .results .result .image + .content { |
|
|
|
margin: @resultImageMargin; |
|
|
|
} |
|
|
|
|
|
|
|
.ui.search .result .title { |
|
|
|
.ui.search > .results .result .title { |
|
|
|
font-family: @resultTitleFont; |
|
|
|
font-weight: @resultTitleFontWeight; |
|
|
|
font-size: @resultTitleFontSize; |
|
|
|
color: @resultTitleColor; |
|
|
|
} |
|
|
|
.ui.search .result .description { |
|
|
|
.ui.search > .results .result .description { |
|
|
|
margin-top: @resultDescriptionDistance; |
|
|
|
color: @resultDescriptionColor; |
|
|
|
} |
|
|
|
.ui.search .result .price { |
|
|
|
.ui.search > .results .result .price { |
|
|
|
float: @resultPriceFloat; |
|
|
|
color: @resultPriceColor; |
|
|
|
} |
|
|
@ -140,31 +141,31 @@ |
|
|
|
Message |
|
|
|
---------------*/ |
|
|
|
|
|
|
|
.ui.search .message { |
|
|
|
.ui.search > .results > .message { |
|
|
|
padding: @messageVerticalPadding @messageHorizontalPadding; |
|
|
|
} |
|
|
|
.ui.search .message .header { |
|
|
|
.ui.search > .results > .message .header { |
|
|
|
font-family: @headerFont; |
|
|
|
font-size: @messageHeaderFontSize; |
|
|
|
font-weight: @messageHeaderFontWeight; |
|
|
|
color: @messageHeaderColor; |
|
|
|
} |
|
|
|
.ui.search .message .description { |
|
|
|
.ui.search > .results > .message .description { |
|
|
|
margin-top: @messageDescriptionDistance; |
|
|
|
font-size: @messageDescriptionFontSize; |
|
|
|
color: @messageDescriptionColor; |
|
|
|
} |
|
|
|
|
|
|
|
/* View All Results */ |
|
|
|
.ui.search .all { |
|
|
|
.ui.search > .results > .action { |
|
|
|
display: block; |
|
|
|
border-top: @allResultsBorder; |
|
|
|
background-color: @allResultsBackground; |
|
|
|
height: @allResultsHeight; |
|
|
|
line-height: @allResultsHeight; |
|
|
|
color: @allResultsColor; |
|
|
|
font-weight: @allResultsFontWeight; |
|
|
|
text-align: @allResultsAlign; |
|
|
|
border-top: @actionBorder; |
|
|
|
background: @actionBackground; |
|
|
|
height: @actionHeight; |
|
|
|
line-height: @actionHeight; |
|
|
|
color: @actionColor; |
|
|
|
font-weight: @actionFontWeight; |
|
|
|
text-align: @actionAlign; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
@ -173,39 +174,80 @@ |
|
|
|
States |
|
|
|
*******************************/ |
|
|
|
|
|
|
|
/*-------------------- |
|
|
|
Loading |
|
|
|
---------------------*/ |
|
|
|
|
|
|
|
.ui.loading.search .input > .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 > .icon:after { |
|
|
|
position: absolute; |
|
|
|
content: ''; |
|
|
|
top: 50%; |
|
|
|
left: 50%; |
|
|
|
|
|
|
|
margin: @loaderMargin; |
|
|
|
width: @loaderSize; |
|
|
|
height: @loaderSize; |
|
|
|
|
|
|
|
animation: button-spin @loaderSpeed linear; |
|
|
|
animation-iteration-count: infinite; |
|
|
|
|
|
|
|
border-radius: @circularRadius; |
|
|
|
|
|
|
|
border-color: @loaderLineColor transparent transparent; |
|
|
|
border-style: solid; |
|
|
|
border-width: @loaderLineWidth; |
|
|
|
|
|
|
|
box-shadow: 0px 0px 0px 1px transparent; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/*-------------- |
|
|
|
Hover |
|
|
|
---------------*/ |
|
|
|
|
|
|
|
.ui.search .result:hover, |
|
|
|
.ui.search .results .category .result:hover { |
|
|
|
.ui.search > .results .result:hover, |
|
|
|
.ui.search > .results .category .result:hover { |
|
|
|
background: @resultHoverBackground; |
|
|
|
} |
|
|
|
.ui.search .all:hover { |
|
|
|
background: @allResultsHoverBackground; |
|
|
|
background: @actionHoverBackground; |
|
|
|
} |
|
|
|
|
|
|
|
/*-------------- |
|
|
|
Active |
|
|
|
---------------*/ |
|
|
|
|
|
|
|
.ui.search .results .category.active { |
|
|
|
background-color: @categoryActiveBackground; |
|
|
|
.ui.search > .results .category.active { |
|
|
|
background: @categoryActiveBackground; |
|
|
|
} |
|
|
|
.ui.search .results .category.active > .name { |
|
|
|
.ui.search > .results .category.active > .name { |
|
|
|
color: @categoryNameActiveColor; |
|
|
|
} |
|
|
|
|
|
|
|
.ui.search .result.active, |
|
|
|
.ui.search .results .category .result.active { |
|
|
|
.ui.search > .results .result.active, |
|
|
|
.ui.search > .results .category .result.active { |
|
|
|
position: relative; |
|
|
|
border-left-color: @resultActiveBorderLeft; |
|
|
|
background-color: @resultActiveBackground; |
|
|
|
background: @resultActiveBackground; |
|
|
|
box-shadow: @resultActiveBoxShadow; |
|
|
|
} |
|
|
|
.ui.search .result.active .title { |
|
|
|
.ui.search > .results .result.active .title { |
|
|
|
color: @resultActiveTitleColor; |
|
|
|
} |
|
|
|
.ui.search .result.active .description { |
|
|
|
.ui.search > .results .result.active .description { |
|
|
|
color: @resultActiveDescriptionColor; |
|
|
|
} |
|
|
|
|
|
|
@ -218,7 +260,11 @@ |
|
|
|
Left / Right |
|
|
|
--------------------*/ |
|
|
|
|
|
|
|
.ui.right.aligned.search .results { |
|
|
|
.ui[class*="left aligned"].search > .results { |
|
|
|
right: auto; |
|
|
|
left: 0%; |
|
|
|
} |
|
|
|
.ui[class*="right aligned"].search > .results { |
|
|
|
right: 0%; |
|
|
|
left: auto; |
|
|
|
} |
|
|
@ -227,34 +273,40 @@ |
|
|
|
Categories |
|
|
|
---------------*/ |
|
|
|
|
|
|
|
.ui.search .results .category { |
|
|
|
/* Category */ |
|
|
|
.ui.search > .results .category { |
|
|
|
background: @categoryBackground; |
|
|
|
box-shadow: @categoryBoxShadow; |
|
|
|
border-bottom: @categoryDivider; |
|
|
|
transition: @categoryTransition; |
|
|
|
} |
|
|
|
.ui.search .results .category, |
|
|
|
.ui.search .results .category .result { |
|
|
|
position: relative; |
|
|
|
.ui.search > .results .category:last-child { |
|
|
|
border-bottom: none; |
|
|
|
} |
|
|
|
|
|
|
|
/* Category Result */ |
|
|
|
.ui.search > .results .category .result { |
|
|
|
background: @categoryResultBackground; |
|
|
|
margin-left: @categoryNameWidth; |
|
|
|
border-left: @categoryResultLeftBorder; |
|
|
|
border-bottom: @categoryResultDivider; |
|
|
|
transition: @categoryResultTransition; |
|
|
|
} |
|
|
|
.ui.search .results .category:first-child { |
|
|
|
box-shadow: none; |
|
|
|
.ui.search > .results .category .result:last-child { |
|
|
|
border-bottom: @categoryResultLastDivider; |
|
|
|
} |
|
|
|
|
|
|
|
.ui.search .results .category > .name { |
|
|
|
/* Category Result Name */ |
|
|
|
.ui.search > .results .category > .name { |
|
|
|
background: @categoryNameBackground; |
|
|
|
font-family: @categoryNameFont; |
|
|
|
width: @categoryNameWidth; |
|
|
|
float: @categoryNameFontSize; |
|
|
|
float: @categoryNameFloat; |
|
|
|
padding: @categoryNamePadding; |
|
|
|
font-weight: @categoryNameFontWeight; |
|
|
|
color: @categoryNameColor; |
|
|
|
} |
|
|
|
.ui.search .results .category .result { |
|
|
|
background-color: @categoryResultBackground; |
|
|
|
margin-left: @categoryNameWidth; |
|
|
|
border-left: @categoryResultLeftBorder; |
|
|
|
border-bottom: @categoryResultTopBorder; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/******************************* |
|
|
|
Variations |
|
|
|