Remove px-link

pull/5507/head
Cagatay Civici 2024-03-28 17:34:15 +03:00
parent c61840859f
commit 6b05b69c13
5 changed files with 23 additions and 25 deletions

View File

@ -75,23 +75,6 @@ p {
top: 7rem; top: 7rem;
} }
.px-link {
font-size: 1rem;
border-radius: 6px;
text-align: left;
background-color: transparent;
margin: 0;
padding: 0;
border: none;
cursor: pointer;
user-select: none;
@include focus-visible();
}
.px-link:disabled {
cursor: default;
}
button { button {
font-family: inherit; font-family: inherit;
font-feature-settings: inherit; font-feature-settings: inherit;

View File

@ -178,9 +178,14 @@
> .navbar-item-content { > .navbar-item-content {
display: flex; display: flex;
.px-link { button {
font-size: 1rem;
text-align: left;
background: transparent;
margin: 0;
border: 0 none;
padding: 0.25rem 1rem 0.25rem 1rem; padding: 0.25rem 1rem 0.25rem 1rem;
color: var(--text-color); color: var(--text-secondary-color);
font-weight: 400; font-weight: 400;
white-space: nowrap; white-space: nowrap;
min-width: 0; min-width: 0;
@ -188,12 +193,14 @@
text-overflow: ellipsis; text-overflow: ellipsis;
transition: outline-color 0.2s, border-color .2s; transition: outline-color 0.2s, border-color .2s;
outline-color: transparent; outline-color: transparent;
cursor: pointer;
user-select: none;
@include focus-visible(); @include focus-visible();
--focus-ring-offset: -1px; --focus-ring-offset: -1px;
} }
&:hover { &:hover {
.px-link { button {
color: var(--text-color); color: var(--text-color);
} }
} }
@ -203,7 +210,7 @@
> .navbar-item-content { > .navbar-item-content {
border-color: var(--primary-text-color); border-color: var(--primary-text-color);
.px-link { button {
color: var(--primary-text-color); color: var(--primary-text-color);
} }
} }

View File

@ -31,7 +31,7 @@
> li { > li {
margin-bottom: .25rem; margin-bottom: .25rem;
> button, > button,
> a { > a {
display: flex; display: flex;
width: 100%; width: 100%;
@ -42,6 +42,14 @@
transition: outline-color 0.2s; transition: outline-color 0.2s;
outline-color: transparent; outline-color: transparent;
position: relative; position: relative;
background: transparent;
font-size: 1rem;
border: 0 none;
margin: 0;
text-align: left;
cursor: pointer;
user-select: none;
@include focus-visible();
.menu-icon { .menu-icon {
width: 2rem; width: 2rem;

View File

@ -2,14 +2,14 @@
<ul ref="nav" class="doc-section-nav"> <ul ref="nav" class="doc-section-nav">
<li v-for="doc of docs" :key="doc.label" :class="['navbar-item', { 'active-navbar-item': activeId === doc.id }]"> <li v-for="doc of docs" :key="doc.label" :class="['navbar-item', { 'active-navbar-item': activeId === doc.id }]">
<div class="navbar-item-content"> <div class="navbar-item-content">
<button class="px-link" @click="onButtonClick(doc)">{{ doc.label }}</button> <button @click="onButtonClick(doc)">{{ doc.label }}</button>
</div> </div>
<template v-if="doc.children"> <template v-if="doc.children">
<ul> <ul>
<li v-for="child of doc.children" :key="child.label" :class="['navbar-item', { 'active-navbar-item': activeId === child.id }]"> <li v-for="child of doc.children" :key="child.label" :class="['navbar-item', { 'active-navbar-item': activeId === child.id }]">
<div class="navbar-item-content"> <div class="navbar-item-content">
<button class="px-link" @click="onButtonClick(child)"> <button @click="onButtonClick(child)">
{{ child.label }} {{ child.label }}
</button> </button>
</div> </div>

View File

@ -1,6 +1,6 @@
<template> <template>
<li v-for="(menuitem, index) in menu" :key="`_root${index}`"> <li v-for="(menuitem, index) in menu" :key="`_root${index}`">
<button v-if="menuitem.children && root" v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'slidedown', leaveToClass: 'hidden', leaveActiveClass: 'slideup' }" type="button" class="px-link"> <button v-if="menuitem.children && root" v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'slidedown', leaveToClass: 'hidden', leaveActiveClass: 'slideup' }" type="button">
<span class="menu-icon"> <span class="menu-icon">
<i :class="menuitem.icon"></i> <i :class="menuitem.icon"></i>
</span> </span>