Files
mostlymatter/webapp/sass/components/_search.scss
2017-07-11 01:27:35 +08:00

162 строки
2.6 KiB
SCSS

@charset 'UTF-8';
.search-bar__container {
@include flex(0 0 79px);
.channel-header__links {
.sidebar--right & {
line-height: 25px;
}
}
}
.icon--rotate {
@include animation(spin .7s infinite linear);
}
.search-item-snippet {
@include clearfix;
text-overflow: ellipsis;
ul,
ol {
padding-left: 20px;
}
}
.search__icon {
left: 10px;
position: absolute;
top: 8px;
}
.sidebar__search-clear {
@include opacity(.5);
color: $dark-gray;
cursor: pointer;
margin-right: 20px;
position: absolute;
right: 0;
top: 12px;
visibility: hidden;
width: 40px;
}
.search-form__container {
}
.search__form {
position: relative;
.search-bar__container & {
@include border-radius(50px);
border: 1px solid $light-gray;
margin: 16px 10px 0 0;
width: 229px;
}
.sidebar--right & {
width: 100%;
}
.search-bar {
background: transparent;
border: none;
box-shadow: none;
font-size: 14px;
height: 35px;
outline: none;
padding: 0 30px 0 40px;
width: 100%;
}
.icon--refresh {
@include opacity(0.5);
position: absolute;
right: 27px;
top: 27px;
.search-bar__container & {
right: 12px;
top: 11px;
}
}
}
.search-items-container {
@include flex(1 1 auto);
-webkit-overflow-scrolling: touch;
height: calc(100% - 56px);
overflow: auto;
padding-top: 10px;
position: relative;
}
.search-results-header {
border-bottom: $border-gray;
color: #999999;
font-size: 1em;
font-weight: 400;
height: 44px;
line-height: 44px;
padding: 0 10px;
text-transform: uppercase;
}
.search-item__container {
.post {
margin: 0;
padding: 0 1em 1em;
&:first-child {
border: none;
}
.search-channel__name {
font-weight: 600;
margin: 0 0 10px;
}
}
}
.col__controls {
font-size: 13px;
position: absolute;
right: 0;
top: 0;
a {
@include opacity(.8);
vertical-align: top;
&:hover {
@include opacity(1);
}
}
.search-item__jump {
font-size: 13px;
position: relative;
top: 1px;
}
.search-item__comment {
margin-right: 5px;
}
}
.search-item-time {
@include opacity(.7);
font-size: .9em;
}
.search-results-none {
padding: 10px;
}
.search-highlight {
background-color: $yellow;
}