search-results.pcss.css
Same filename in other branches
Search results specific styles.
File
-
core/
themes/ olivero/ css/ components/ search-results.pcss.css
View source
- /**
- * @file
- * Search results specific styles.
- */
-
- @import "../base/media-queries.pcss.css";
-
- .search-results {
- margin-block-end: var(--sp2);
- padding-block: 0;
- padding-inline-start: 0;
- padding-inline-end: 0;
- list-style: none;
-
- @media (--md) {
- margin-block-end: var(--sp3);
- }
- }
-
- .search-result__title {
- margin-block: 0;
- margin-inline-start: 0;
- margin-inline-end: 0;
- color: var(--color-text-neutral-loud);
- font-size: 20px;
- line-height: var(--line-height-base);
-
- & a {
- padding-block-end: 3px;
- transition:
- background-size 0.2s,
- color 0.2s;
- text-decoration: none;
- background-color: transparent;
- background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */
- background-repeat: no-repeat;
- background-position: bottom left; /* LTR */
- background-size: 0 3px;
-
- &:hover {
- color: var(--color-text-primary-medium);
- }
- }
-
- @media (--lg) {
- margin-block-end: var(--sp1);
- font-size: 30px;
- line-height: var(--sp3);
- }
- }
-
- [dir="rtl"] .search-result__title a {
- background-position: bottom right;
- }
-
- .search-result__snippet {
- padding-block-end: calc(var(--sp1-5) - 2px);
-
- @media (--lg) {
- padding-block-end: var(--sp3);
- }
- }
-
- .search-result__meta {
- display: flex;
- align-items: center;
- margin-block-end: var(--sp1);
- color: var(--color-text-neutral-soft);
- font-size: 14px;
- line-height: var(--sp);
-
- & a {
- color: var(--color-text-primary-medium);
- font-weight: bold;
- }
- }
-
- .search-results__item {
- position: relative; /* Anchor after pseudo-element. */
- margin-block-end: var(--sp1-5);
-
- &::after {
- position: absolute;
- inset-block-end: 0;
- width: var(--sp3);
- height: 0;
- content: "";
- /* Intentionally not using CSS logical properties. */
- border-top: solid 2px var(--color--gray-95);
- }
-
- &:last-child {
- margin-block-end: 0;
- }
-
- @media (--lg) {
- margin-block-end: var(--sp3);
- }
- }
-
- .empty-search-results-text {
- color: var(--color-text-neutral-loud);
- font-family: var(--font-sans);
- font-size: 20px;
- font-weight: bold;
- font-style: normal;
- line-height: var(--sp1-5);
- margin-block: var(--sp);
-
- @media (--md) {
- margin-block: var(--sp2);
- font-size: 24px;
- line-height: var(--sp2);
- }
- }
Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.