Skip to content
This repository has been archived by the owner on Feb 22, 2023. It is now read-only.

Add hover styles to the tabs and close button #1899

Merged
merged 2 commits into from
Oct 18, 2022
Merged

Add hover styles to the tabs and close button #1899

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fde5c5d
Add hover styles to the tabs and close button
obulat Oct 11, 2022
9156b10
lint
obulat Oct 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/VHeader/VHeaderMobile/VContentSettingsModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
$t('filters.title')
}}</VTab>
<VIconButton
class="self-center ms-auto"
class="self-center ms-auto hover:bg-dark-charcoal hover:text-white"
size="search-medium"
:icon-props="{ iconPath: closeIcon }"
:aria-label="$t('browse-page.aria.close')"
Expand Down
8 changes: 4 additions & 4 deletions src/components/VHeader/VSearchBar/VSearchBar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,10 @@
:placeholder="placeholder || $t('hero.search.placeholder')"
class="search-field flex-grow focus:border-pink"
:class="[
route === 'home'
? 'border-tx'
: 'border-tx bg-dark-charcoal-10 text-dark-charcoal-70 focus-within:bg-white group-hover:bg-dark-charcoal-10 group-hover:text-dark-charcoal group-hover:focus-within:bg-white',
]"
route === 'home'
? 'border-tx'
: 'border-tx bg-dark-charcoal-10 text-dark-charcoal-70 focus-within:bg-white group-hover:bg-dark-charcoal-10 group-hover:text-dark-charcoal group-hover:focus-within:bg-white',
]"
:label-text="
$t('search.search-bar-label', { openverse: 'Openverse' }).toString()
"
Expand Down
8 changes: 4 additions & 4 deletions src/components/VTabs/VTab.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
size="disabled"
variant="plain--avoid"
v-bind="tabProps"
class="label-bold md:description-bold rounded-none border-0 bg-white focus-visible:shadow-[0_0_0_1.5px_#c52b9b_inset]"
class="rounded-none border-0 bg-white focus-visible:shadow-[0_0_0_1.5px_#c52b9b_inset]"
:class="[
$style[variant],
$style[`size-${size}`],
Expand Down Expand Up @@ -197,16 +197,16 @@ export default defineComponent({

<style module>
.bordered {
@apply rounded-t-sm border-x border-t border-tx;
@apply rounded-t-sm border-x border-t border-tx text-sm font-semibold md:text-base md:font-semibold md:leading-snug;
}
.plain {
@apply border-tx;
@apply rounded-sm border-tx bg-tx text-sr font-semibold uppercase hover:bg-dark-charcoal-10;
}
.bordered-selected {
@apply -mb-[1px] border border-x-dark-charcoal-20 border-t-dark-charcoal-20 border-b-white bg-white;
}
.plain-selected {
@apply relative rounded-none after:absolute after:right-1/2 after:h-0.5 after:w-full after:translate-x-1/2 after:translate-y-[-50%] after:bg-dark-charcoal after:transition-all after:duration-200;
@apply relative after:absolute after:right-1/2 after:h-0.5 after:w-full after:translate-x-1/2 after:translate-y-[-50%] after:bg-dark-charcoal after:transition-all after:duration-200;
}
.plain-selected.size-default {
@apply after:bottom-[-0.125rem];
Expand Down