src/wolnelektury/static/2022/styles/components/_search.scss

   1 .c-search-result-fragment {
   2     display: block;
   3     padding: 21px;
   4     margin-top: 20px;
   5     border: 1px solid #D9D9D9;
   6     border-radius: 10px;
   7
   8     .c-search-result-fragment-title {
   9         display: block;
  10         font-size: 21.5px;
  11         line-height: 1.4em;
  12         color: #474747;
  13     }
  14
  15     .c-search-result-fragment-author {
  16         display: block;
  17         font-size: 15px;
  18         line-height: 1.2em;
  19         color: #808080;
  20     }
  21
  22     .c-search-result-fragment-text {
  23         margin-top: 16px;
  24         padding: 6px 12px;
  25         display: block;
  26         color: #474747;
  27         background: #F2F2F2;
  28         border-radius: 4px;
  29         font-size: 18px;
  30         line-height: 1.5em;
  31
  32         &:hover {
  33             text-decoration: none;
  34             background-color: #d2d2d2;
  35         }
  36
  37         strong {
  38             font-weight: normal;
  39             background: #FFEA00;
  40         }
  41     }
  42 }
  43
  44
  45 .c-search-result {
  46     margin: 20px 0;
  47     padding: 0;
  48     list-style: none;
  49     font-size: 18px;
  50     line-height: 27px;
  51
  52     &.c-search-result-author {
  53         li {
  54             padding-left: 52px;
  55             figure {
  56                 font-size: 0;
  57                 display: flex;
  58                 align-items: center;
  59                 justify-content: center;
  60                 width: 40px;
  61                 height: 40px;
  62                 margin-left: -52px;
  63                 margin-right: 12px;
  64                 overflow: hidden;
  65                 border-radius: 50%;
  66                 img {
  67                     width: 100%;
  68                 }
  69             }
  70         }
  71     }
  72
  73     li {
  74         margin-bottom: 5px;
  75         a {
  76             display: flex;
  77             align-items: center;
  78         }
  79     }
  80 }
  81
  82
  83 .c-search-result-collection {
  84     display: flex;
  85     margin-top: 20px;
  86     gap: 20px;
  87     flex-wrap: wrap;
  88 }
  89
  90
  91
  92 .c-search-result-pd {
  93     margin-top: 64px;
  94     padding: 34px;
  95     font-size: 18px;
  96     line-height: 24px;
  97     background: #E1F1F2;
  98     border-radius: 10px;
  99
 100     h2 {
 101         color: #007880;
 102         font-size: 21px;
 103         line-height: 30px;
 104         font-weight: bold;
 105         margin: 0;
 106     }
 107
 108     p {
 109         font-size: 18px;
 110         line-height: 27px;
 111     }
 112
 113     > div {
 114         display: flex;
 115         flex-wrap: wrap;
 116         gap: 20px;
 117         margin-top: 26px;
 118         > div {
 119             background: white;
 120             padding: 21px;
 121             border-radius: 10px;
 122             width: 343px;
 123             a {
 124                 color: #474747;
 125                 line-height: 28px;
 126             }
 127
 128             strong {
 129                 display: block;
 130                 margin-bottom: 10px;
 131                 color: #083F4D;
 132                 font-size: 25px;
 133                 line-height: 30px;
 134             }
 135
 136             em {
 137                 font-style: normal;
 138                 font-weight: bold;
 139             }
 140         }
 141     }
 142 }
 143
 144
 145 .ui-autocomplete {
 146     .ui-menu-item {
 147         &:before {
 148         }
 149
 150         span {
 151             border-radius: 18px;
 152             padding: 0px 10px;
 153         }
 154
 155         &.type-info {
 156             &:before {
 157                 content: '\1f6c8';
 158                 position: absolute;
 159                 left: 0;
 160                 width:36px;
 161                 line-height: 36px;
 162                 text-align: center;
 163             }
 164         }
 165         &.type-theme {
 166             &:before {
 167                 content: '☆';
 168                 position: absolute;
 169                 left: 0;
 170                 width:36px;
 171                 line-height: 36px;
 172                 text-align: center;
 173             }
 174         }
 175         &.type-genre {
 176             a, a:hover {
 177                 span {
 178                     color: black;
 179                     background: $wl-green;
 180                 }
 181             }
 182         }
 183         &.type-epoch {
 184             a, a:hover {
 185                 span {
 186                     background: $wl-teal;
 187                     color: white;
 188                 }
 189             }
 190         }
 191         &.type-kind {
 192             a, a:hover {
 193                 span {
 194                     color: black;
 195                     background: $wl-red;
 196                 }
 197             }
 198         }
 199         &.type-author {
 200             img {
 201                 border-radius: 18px;
 202             }
 203         }
 204         &.type-set {
 205             &:before {
 206                 content: '';
 207                 position: absolute;
 208                 left: 0;
 209                 width:36px;
 210                 line-height: 36px;
 211                 text-align: center;
 212                 font-family: 'wl' !important;
 213                 color: $wl-red;
 214             }
 215         }
 216
 217         a.ui-menu-item-wrapper {
 218             display: flex;
 219             transition: none;
 220             padding: 0;
 221             align-items: center;
 222
 223             &:hover {
 224                 text-decoration: none;
 225             }
 226
 227             div {
 228                 width: 36px;
 229                 height: 36px;
 230                 display: flex;
 231                 align-items: center;
 232                 justify-content: center;
 233                 margin-right: 5px;
 234                 img {
 235                     max-height: 36px;
 236                     max-width: 36px;
 237                 }
 238             }
 239         }
 240     }
 241 }
 242