@import “vars.scss”; @import “components.scss”;
body {
margin:0;
}
*, *:before, *:after {
box-sizing: inherit;
}
.sk-layout {
box-sizing: border-box; background: $sk-layout-background; font-family: $sk-font-family; &__top-bar { background: $sk-primary-theme-color; height:60px; position: fixed; top: 0; left:0; right:0; width: 100%; padding:10px 0; z-index:100; display:flex; box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28); } &__body { display:flex; margin:60px auto 0; min-width:600px; } &__filters { background:$sk-layout-panel-background; padding:15px; margin:15px 0 15px 15px; flex:0 0 246px; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.08); .sk-refinement-list, .sk-range-filter, .sk-hierarchical-menu-list, .sk-numeric-refinement-list, .sk-hierarchical-refinement-list { margin-bottom:20px; } .sk-select { width:100%; } .sk-range-input { margin-top:10px; } // .sk-selected-filters { // flex-flow: column nowrap; // &-option { // margin-right:0; // margin-bottom:10px; // } // } } &__results { background:$sk-layout-panel-background; margin:15px 15px 15px 15px; flex:auto; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.08); min-height:600px; }
}
.sk-top-bar {
&__content { display:flex; margin:0 auto; padding:0 15px; width:100%; }
}
.sk-layout {
&__size-l { .sk-top-bar__content { width:1280px; } .sk-layout__body { max-width:1280px; } } &__size-m { .sk-top-bar__content { width:960px; } .sk-layout__body { max-width:960px; } }
}
.sk-action-bar {
display:flex; flex-flow: column wrap; margin:0 15px 15px; &-row { display:flex; flex-flow: row wrap; margin:0px 0 10px; &:last-child { margin:0; } } .sk-hits-stats { line-height: 30px; }
}
.sk-results-list {
padding:15px 0;
}
// components
.sk-search-box {
background: rgba(255,255,255,.15); border-radius: $sk-border-radius; position: relative; display: flex; flex:1; &.is-focused { background:white; } &.is-focused &__text { color:$sk-text-color; } &.is-focused &__text::-webkit-input-placeholder { color:$sk-text-color; font-weight:$sk-light-weight; } form { width:100%; } &__text { background:transparent; color:#fff; font-size:16px; padding-left:10px; &::-webkit-input-placeholder { color:rgba(255,255,255,1); font-weight:100; } } &__icon { margin:10px 0 0 15px; } &__action { display:none; }
}
.sk-hits-stats {
align-self: flex-start; flex:1;
}
.sk-sorting-selector {
flex:200px 0 0; select { width:200px; }
}
.sk-range-filter {
.rc-slider-handle { border-color: $sk-primary-theme-color; } .rc-slider-track { background-color: rgba(156, 162, 153, 0.5); }
}
.sk-reset-filters {
border:none; display:flex; font-size:14px; margin:0; padding-left:0;
}
.sk-pagination-navigation {
width:300px; margin:10px auto; &.is-numbered { width:600px; }
}
.sk-pagination-select {
margin: 10px auto; text-align:center;
}
.sk-hits-grid, .sk-hits-list {
margin:0 15px 20px;
}
.sk-hits-grid {
display:flex; flex-flow: row wrap; align-items: flex-start; &__no-results { text-align:center; margin-top:60px; } &__item { flex:1 1 250px; display:flex; margin-bottom:20px; }
}
.sk-hits-grid-hit {
padding:10px; max-width:250px; flex-flow: column nowrap; align-content: center; align-items: center; flex: 190px 0 0; em { background:yellow; } a { text-decoration: none; color: $sk-action-text-color; } &__title { margin-top:10px; font-size:14px; }
}
.sk-hits-list {
display:flex; flex-flow: column wrap; align-items: flex-start; em { background:yellow; } a { text-decoration: none; color: $sk-action-text-color; } &__no-results { text-align:center; margin-top:60px; } &__item { display:flex; margin-bottom:20px; }
}
.sk-hits-list-hit {
display:flex; &__poster { width:200px; flex:0 0 200px; padding:0px 20px; img { max-width:100%; margin:0 auto; } } &__details { flex:1 0 0; padding:10px; } &__title { line-height:20px; margin:0 0 5px; font-size:18px; } &__subtitle { line-height:20px; margin:0 0 5px; font-size:14px; color:#666; font-weight:300; } &__tags { line-height: 20px; margin:0; font-size: 14px; color: #666; font-weight: 300; list-style: none; padding:0; margin-bottom:10px; .sk-tag-filter { &:hover { color: $sk-action-text-color; } &:active { color: black; } } } &__text { line-height:22px; max-width:800px; }
}
.sk-action-bar {
.sk-select, .sk-toggle { margin-left:15px; }
}
.sk-layout__filters {
.sk-select select { width: 100% }
}