diff --git a/styles/components/sidebar.css b/styles/components/sidebar.css index 4c9dd72..ceafb88 100644 --- a/styles/components/sidebar.css +++ b/styles/components/sidebar.css @@ -1,28 +1,162 @@ /* Sidebar styles */ .sidebar{ - .widget { - /* Widget styles */ - @apply mb-8; + @apply pt-1; - h3 { - /* Widget title styles */ - @apply m-0 mb-2 font-semibold; - } + .widget { + @apply mb-10; - ul { - /* List styles */ - @apply list-none m-0 p-0 pl-3 border-l-3 border-secondary-400; + &:last-child { @apply mb-0; } - li { - /* List item styles */ - @apply text-balance; + h2, + h3, + .wp-block-heading { + @apply m-0 mb-4 pb-0; - &:first-of-type { - /* First list item styles */ - @apply leading-none mb-1; + color: var(--color-cwc-blue-01); + font-family: var(--font-sans); + font-size: var(--text-14px); + font-weight: 600; + letter-spacing: 0.11em; + line-height: 1; + text-transform: uppercase; + } + + ul { + @apply list-none m-0 p-0; + + li { + @apply m-0 leading-none!; + + &:not(:last-child) { @apply mb-4; } + + a { + color: var(--color-dark); + font-size: var(--text-16px); + font-weight: 300; + + &:hover { color: var(--color-cwc-blue-01); } + } + } + } + + select { + @apply px-5 py-3 rounded-sm border-2 border-cwc-blue-03; + + background-color: color-mix(in oklch, var(--color-cwc-blue-03) 40%, white); + color: var(--color-dark); + font-size: var(--text-16px); + font-weight: 300; + line-height: 1.1; + + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg width='12' height='7' viewBox='0 0 12 7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.25L6 5.75L11 1.25' stroke='%23F26B53' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); + background-position: right 1rem center; + background-repeat: no-repeat; + background-size: 0.75rem auto; + padding-right: 2.75rem; + + &:focus-visible { + border-color: var(--color-cwc-blue-01); + outline-offset: 2px; + } + } + + .wp-block-search__label, + .screen-reader-text { + @apply absolute left-5 top-1/2 pointer-events-none; + + color: var(--color-dark); + font-size: var(--text-16px); + font-weight: 300; + line-height: 1; + transform: translateY(-50%); + z-index: 2; + + &::before { + content: ""; + display: inline-block; + width: 1rem; + height: 1rem; + margin-right: 0.6rem; + transform: translateY(1px); + background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.25 12.25C13.4167 11.0833 14 9.66667 14 8C14 6.33333 13.4167 4.91667 12.25 3.75C11.0833 2.58333 9.66667 2 8 2C6.33333 2 4.91667 2.58333 3.75 3.75C2.58333 4.91667 2 6.33333 2 8C2 9.66667 2.58333 11.0833 3.75 12.25C4.91667 13.4167 6.33333 14 8 14C9.66667 14 11.0833 13.4167 12.25 12.25ZM8 16C5.76667 16 3.875 15.225 2.325 13.675C0.775 12.125 0 10.2333 0 8C0 5.76667 0.775 3.875 2.325 2.325C3.875 0.775 5.76667 0 8 0C10.2333 0 12.125 0.775 13.675 2.325C15.225 3.875 16 5.76667 16 8C16 8.93333 15.8542 9.8125 15.5625 10.6375C15.2708 11.4625 14.8583 12.2167 14.325 12.9L20 18.6L18.6 20L12.9 14.325C12.2167 14.8583 11.4625 15.2708 10.6375 15.5625C9.8125 15.8542 8.93333 16 8 16Z' fill='%23F26B53'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-size: contain; + } + } + + .wp-block-search { + @apply relative; + + &:focus-within { + .wp-block-search__label { opacity: 0; } + } + + .wp-block-search__inside-wrapper { @apply relative; } + + .wp-block-search__input { + @apply rounded-sm border-2 border-cwc-blue-03 px-5 py-3; + + background-color: color-mix(in oklch, var(--color-cwc-blue-03) 40%, white); + color: var(--color-dark); + font-size: var(--text-16px); + font-weight: 300; + line-height: 1.1; + padding-left: 8.8rem; + } + + .wp-block-search__button { @apply hidden; } + + &:has(.wp-block-search__input:not(:placeholder-shown)) { .wp-block-search__label { opacity: 0; } } + } + + &.widget_search { + @apply mb-9; + + .wp-block-search__input { + &:focus-visible { + border-color: var(--color-cwc-blue-01); + outline-offset: 2px; + } + } + } + + &:has(ul) { + h2, + h3, + .wp-block-heading { + @apply mb-2; + + &::after { + @apply block mt-2; + + content: ""; + height: 2px; + width: 100%; + background: var(--color-secondary); + } + } + } + + .wp-block-archives__label { + @apply sr-only; + } + } + + @media (max-width: 1023px) { + .widget { + ul a { font-size: var(--text-16px); } + + .wp-block-search__label, + .screen-reader-text { + font-size: var(--text-16px); + } + + .wp-block-search .wp-block-search__input { + font-size: var(--text-16px); + padding-left: 7.7rem; + } } - } } - } } diff --git a/views/icons/search.php b/views/icons/search.php index 412f072..16a505a 100644 --- a/views/icons/search.php +++ b/views/icons/search.php @@ -1,6 +1,3 @@ - - - - - + +