You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
446 lines
9.2 KiB
446 lines
9.2 KiB
/*!
|
|
* # Semantic UI - Search
|
|
* http://github.com/semantic-org/semantic-ui/
|
|
*
|
|
*
|
|
* Released under the MIT license
|
|
* http://opensource.org/licenses/MIT
|
|
*
|
|
*/
|
|
|
|
|
|
/*******************************
|
|
Theme
|
|
*******************************/
|
|
|
|
@type : 'module';
|
|
@element : 'search';
|
|
|
|
@import (multiple) '../../theme.config';
|
|
|
|
/*******************************
|
|
Search
|
|
*******************************/
|
|
|
|
.ui.search {
|
|
position: relative;
|
|
}
|
|
|
|
.ui.search > .prompt {
|
|
margin: 0em;
|
|
outline: none;
|
|
-webkit-appearance: none;
|
|
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
|
|
|
|
text-shadow: none;
|
|
font-style: normal;
|
|
font-weight: @normal;
|
|
|
|
line-height: @promptLineHeight;
|
|
padding: @promptPadding;
|
|
font-size: @promptFontSize;
|
|
|
|
background: @promptBackground;
|
|
border: @promptBorder;
|
|
color: @promptColor;
|
|
box-shadow: @promptBoxShadow;
|
|
transition: @promptTransition;
|
|
}
|
|
|
|
.ui.search .prompt {
|
|
border-radius: @promptBorderRadius;
|
|
}
|
|
|
|
|
|
/*--------------
|
|
Icon
|
|
---------------*/
|
|
|
|
.ui.search .prompt ~ .search.icon {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/*--------------
|
|
Results
|
|
---------------*/
|
|
|
|
.ui.search > .results {
|
|
display: none;
|
|
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0%;
|
|
transform-origin: center top;
|
|
white-space: normal;
|
|
|
|
background: @resultsBackground;
|
|
|
|
margin-top: @resultsDistance;
|
|
width: @resultsWidth;
|
|
|
|
border-radius: @resultsBorderRadius;
|
|
box-shadow: @resultsBoxShadow;
|
|
border: @resultsBorder;
|
|
z-index: @resultsZIndex;
|
|
}
|
|
.ui.search > .results > :first-child {
|
|
border-radius: @resultsBorderRadius @resultsBorderRadius 0em 0em;
|
|
}
|
|
.ui.search > .results > :last-child {
|
|
border-radius: 0em 0em @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;
|
|
}
|
|
.ui.search > .results .result:last-child {
|
|
border-bottom: @resultLastDivider !important;
|
|
}
|
|
|
|
/* Image */
|
|
.ui.search > .results .result .image {
|
|
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%;
|
|
}
|
|
|
|
/*--------------
|
|
Info
|
|
---------------*/
|
|
|
|
.ui.search > .results .result .image + .content {
|
|
margin: @resultImageMargin;
|
|
}
|
|
|
|
.ui.search > .results .result .title {
|
|
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;
|
|
}
|
|
.ui.search > .results .result .price {
|
|
float: @resultPriceFloat;
|
|
color: @resultPriceColor;
|
|
}
|
|
|
|
/*--------------
|
|
Message
|
|
---------------*/
|
|
|
|
.ui.search > .results > .message {
|
|
padding: @messageVerticalPadding @messageHorizontalPadding;
|
|
}
|
|
.ui.search > .results > .message .header {
|
|
font-family: @headerFont;
|
|
font-size: @messageHeaderFontSize;
|
|
font-weight: @messageHeaderFontWeight;
|
|
color: @messageHeaderColor;
|
|
}
|
|
.ui.search > .results > .message .description {
|
|
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;
|
|
}
|
|
|
|
|
|
/*******************************
|
|
States
|
|
*******************************/
|
|
|
|
/*--------------------
|
|
Focus
|
|
---------------------*/
|
|
|
|
.ui.search > .prompt:focus {
|
|
border-color: @promptFocusBorderColor;
|
|
background: @promptFocusBackground;
|
|
color: @promptFocusColor;
|
|
}
|
|
|
|
/*--------------------
|
|
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;
|
|
|
|
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 > .results .result:hover,
|
|
.ui.category.search > .results .category .result:hover {
|
|
background: @resultHoverBackground;
|
|
}
|
|
.ui.search .action:hover {
|
|
background: @actionHoverBackground;
|
|
}
|
|
|
|
/*--------------
|
|
Active
|
|
---------------*/
|
|
|
|
.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;
|
|
}
|
|
.ui.search > .results .result.active .title {
|
|
color: @resultActiveTitleColor;
|
|
}
|
|
.ui.search > .results .result.active .description {
|
|
color: @resultActiveDescriptionColor;
|
|
}
|
|
|
|
/*--------------------
|
|
Disabled
|
|
----------------------*/
|
|
|
|
/* Disabled */
|
|
.ui.disabled.search {
|
|
cursor: default;
|
|
pointer-events: none;
|
|
opacity: @disabledOpacity;
|
|
}
|
|
|
|
|
|
/*******************************
|
|
Types
|
|
*******************************/
|
|
|
|
/*--------------
|
|
Selection
|
|
---------------*/
|
|
|
|
.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;
|
|
}
|
|
|
|
|
|
/*--------------
|
|
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: 0em @resultsBorderRadius 0em 0em;
|
|
}
|
|
.ui.category.search > .results .category:last-child .result:last-child {
|
|
border-radius: 0em 0em @resultsBorderRadius 0em;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/*******************************
|
|
Variations
|
|
*******************************/
|
|
|
|
/*-------------------
|
|
Left / Right
|
|
--------------------*/
|
|
|
|
.ui[class*="left aligned"].search > .results {
|
|
right: auto;
|
|
left: 0%;
|
|
}
|
|
.ui[class*="right aligned"].search > .results {
|
|
right: 0%;
|
|
left: auto;
|
|
}
|
|
|
|
/*--------------
|
|
Fluid
|
|
---------------*/
|
|
|
|
.ui.fluid.search .results {
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
/*--------------
|
|
Sizes
|
|
---------------*/
|
|
|
|
.ui.mini.search {
|
|
font-size: @relativeMini;
|
|
}
|
|
.ui.small.search {
|
|
font-size: @relativeSmall;
|
|
}
|
|
.ui.search {
|
|
font-size: @relativeMedium;
|
|
}
|
|
.ui.large.search {
|
|
font-size: @relativeLarge;
|
|
}
|
|
.ui.big.search {
|
|
font-size: @relativeBig;
|
|
}
|
|
.ui.huge.search {
|
|
font-size: @relativeHuge;
|
|
}
|
|
.ui.massive.search {
|
|
font-size: @relativeMassive;
|
|
}
|
|
|
|
/*--------------
|
|
Mobile
|
|
---------------*/
|
|
|
|
@media only screen and (max-width: @largestMobileScreen) {
|
|
.ui.search .results {
|
|
max-width: @mobileMaxWidth;
|
|
}
|
|
}
|
|
|
|
.loadUIOverrides();
|