Skip to content

Commit

Permalink
Rework tab design to be more modern
Browse files Browse the repository at this point in the history
  • Loading branch information
iloveitaly committed May 17, 2021
1 parent 27ceb5c commit cd838c6
Showing 1 changed file with 18 additions and 14 deletions.
32 changes: 18 additions & 14 deletions src/views/activity/Activity.vue
Expand Up @@ -34,7 +34,7 @@ div

aw-periodusage(:periodusage_arr="periodusage", @update="setDate")

ul.row.nav.nav-tabs.mt-3.px-3
ul.row.nav.nav-tabs.mt-4
li.nav-item(v-for="view in views")
router-link.nav-link(:to="{ name: 'activity-view', params: {...$route.params, view_id: view.id}}" :class="{'router-link-exact-active': currentView.id == view.id}")
h6 {{view.name}}
Expand Down Expand Up @@ -78,31 +78,35 @@ div

<style lang="scss" scoped>
$buttoncolor: #ddd;
$bordercolor: #ddd;
$bordercolor: rgb(235, 237, 243);
.nav {
border-bottom: 2px solid $bordercolor;
border-bottom: 1px solid $bordercolor;
.nav-item {
margin-bottom: -2px;
margin-bottom: 0px;
&:first-child {
margin-left: 0;
}
.nav-link {
background-color: $buttoncolor;
margin: 0 0.2em 0 0.2em;
padding: 0.4em 0.5em 0.1em 0.5em;
border: 2px solid $bordercolor;
border-bottom: none;
border-radius: 0.5rem 0.5rem 0 0;
color: #111 !important;
// default bootstrap vertical padding was too high
padding: 0.25rem 1rem;
color: lighten(black, 40%);
cursor: pointer;
border: none;
&:hover {
background-color: #f8f8f8;
color: black;
}
&.router-link-exact-active {
background-color: #fff;
color: #333 !important;
color: rgb(84, 105, 212);
font-weight: bold;
border-bottom: 3px solid darken($bordercolor, 20%);
border-radius: 0;
&:hover {
background-color: #fff;
Expand Down

0 comments on commit cd838c6

Please sign in to comment.