r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

Style Dashboard tabs to match visual style of other tabs in app

Browse source
This commit is contained in:
Andrew Nicolaou 2019-09-11 19:33:12 +02:00
parent 125051ccb1
commit 41636642c9
1 changed files with 11 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
client/styles/components/_dashboard-header.scss
View file

@ -1,26 +1,27 @@
.dashboard-header { .dashboard-header {
padding: 24px 66px; padding: #{24 / $base-font-size}rem #{66 / $base-font-size}rem;
} }
.dashboard-header__tabs { .dashboard-header__tabs {
display: flex; display: flex;
padding-top: #{24 / $base-font-size}rem; padding-top: #{24 / $base-font-size}rem;
padding-bottom: #{24 / $base-font-size}rem; margin-bottom: #{24 / $base-font-size}rem;
@include themify() {
border-bottom: 1px solid getThemifyVariable('inactive-text-color');
}
} }
.dashboard-header__tab { .dashboard-header__tab {
@include themify() { @include themify() {
color: getThemifyVariable('inactive-text-color'); color: getThemifyVariable('inactive-text-color');
border-right: 2px solid getThemifyVariable('inactive-text-color'); border-bottom: #{4 / $base-font-size}rem solid transparent;
padding: 0 13px; padding: 0 0 #{8 / $base-font-size}rem 0;
margin-right: #{26 / $base-font-size}rem;
&:hover, &:focus { &:hover, &:focus, &.dashboard-header__tab--selected {
color: getThemifyVariable('primary-text-color');
cursor: pointer;
}
&:focus {
color: getThemifyVariable('primary-text-color'); color: getThemifyVariable('primary-text-color');
border-bottom-color: getThemifyVariable('nav-hover-color');
cursor: pointer; cursor: pointer;
} }
} }
@ -28,19 +29,7 @@
font-size: #{21 / $base-font-size}rem; font-size: #{21 / $base-font-size}rem;
} }
.dashboard-header__tab:first-child {
padding-left: 0;
}
.dashboard-header__tab:last-child {
border-right: none;
}
.dashboard-header__tab--selected { .dashboard-header__tab--selected {
@include themify() {
color: getThemifyVariable('primary-text-color');
}
cursor: auto; cursor: auto;
} }
@ -49,5 +38,6 @@
} }
.dashboard-header__tab__title { .dashboard-header__tab__title {
font-weight: bold;
margin: 0; margin: 0;
} }