Revert "[Search] Update CSS"

This reverts commit e05f16d780.
This commit is contained in:
slhale
2015-08-03 13:39:22 -07:00
parent e05f16d780
commit 5569ef8b2d
3 changed files with 218 additions and 202 deletions

View File

@@ -30,128 +30,136 @@
padding-right: $rightPadding;
top: 23px;
// Align with the top of the divider bar, below create button
margin-top: 10px;
.search {
//height: auto;
//overflow: auto;
.search-input {
// Align with the top of the divider bar, below create button
margin-top: 10px;
width: 100%;
}
.results {
// Spacing away from the search input
margin-top: 10px;
.search-scroll {
height: 100%;
overflow: auto;
.results {
// Spacing away from the search input
margin-top: 10px;
.search-result-item {
// Include transitions (for the highlights)
@include single-transition(background-color, 0.25s);
.search-result-item {
// Include transitions (for the highlights)
@include single-transition(background-color, 0.25s);
// Space the results from each other
margin-bottom: 2px;
// Space the results from each other
margin-bottom: 2px;
// Make the highlights the right color and shape.
// Attempting to match the style in the tree, but
// while having these be compact.
border-radius: 2px;
padding-top: 4px;
padding-bottom: 2px;
// Make the highlights the right color and shape.
// Attempting to match the style in the tree, but
// while having these be compact.
border-radius: 2px;
padding-top: 4px;
padding-bottom: 2px;
.label {
// Give some padding away from the left side
.label {
// Give some padding away from the left side
margin-left: $leftMargin;
.title-label {
display: inline-block;
position: absolute;
// Give some padding away from the left side
left: $leftMargin + 3px + $iconWidth;
// and the right side
right: $rightPadding;
// Size and position the text
font-size: .8em;
line-height: 17px;
// Hide overflow text
width: auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
// Change styling when it's selected
&.selected {
$c: #fff;
background: $colorKeySelectedBg;
color: $c;
.view-control {
color: $colorItemTreeIcon;
}
.label .type-icon {
color: #fff;
}
}
// Change styling when it's being hovered over
&:not(.selected) {
&:hover {
background: lighten($colorBodyBg, 5%);
color: lighten($colorBodyFg, 20%);
.context-trigger {
display: block;
}
.icon {
color: $colorItemTreeIconHover;
}
}
}
}
}
.load-icon {
position: relative;
&.loading {
pointer-events: none;
margin-left: $leftMargin;
.title-label {
display: inline-block;
position: absolute;
// Text styling
font-style: italic;
font-size: .9em;
opacity: 0.5;
// Give some padding away from the left side
left: $leftMargin + 3px + $iconWidth;
// and the right side
right: $rightPadding;
// Size and position the text
font-size: .8em;
line-height: 17px;
// Hide overflow text
width: auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
// Text positioning
margin-left: $iconWidth + $leftMargin;
line-height: 24px;
}
.wait-spinner {
margin-left: $leftMargin;
}
}
// Change styling when it's selected
&.selected {
$c: #fff;
background: $colorKeySelectedBg;
color: $c;
.view-control {
color: $colorItemTreeIcon;
}
.label .type-icon {
color: #fff;
}
}
// Change styling when it's being hovered over
&:not(.selected) {
&:hover {
background: lighten($colorBodyBg, 5%);
color: lighten($colorBodyFg, 20%);
.context-trigger {
display: block;
}
.icon {
color: $colorItemTreeIconHover;
}
}
}
}
}
.load-icon {
position: relative;
&.loading {
pointer-events: none;
margin-left: $leftMargin;
.title-label {
// Text styling
font-style: italic;
font-size: .9em;
opacity: 0.5;
// Text positioning
margin-left: $iconWidth + $leftMargin;
line-height: 24px;
}
.wait-spinner {
margin-left: $leftMargin;
&:not(.loading) {
cursor: pointer;
}
}
&:not(.loading) {
cursor: pointer;
.load-more-button {
// Space away form the results list
margin-top: 5px;
margin-bottom: 5px;
// Center it
position: relative;
left: 25%;
width: 50%;
// Make smallish button
height: 20px;
line-height: 11px;
font-size: 0.7em;
}
}
.load-more-button {
// Space away form the results list
margin-top: 5px;
margin-bottom: 5px;
// Center it
position: relative;
left: 25%;
width: 50%;
white-space: nowrap;
// Make smallish button
height: 20px;
line-height: 11px;
font-size: 0.7em;
// temp
//margin-bottom: 30px;
}
}
}