diff --git a/client/styles/components/_dashboard-header.scss b/client/styles/components/_dashboard-header.scss index 96e4de22..6737e672 100644 --- a/client/styles/components/_dashboard-header.scss +++ b/client/styles/components/_dashboard-header.scss @@ -1,26 +1,27 @@ .dashboard-header { - padding: 24px 66px; + padding: #{24 / $base-font-size}rem #{66 / $base-font-size}rem; } .dashboard-header__tabs { display: flex; 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 { @include themify() { 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 { - color: getThemifyVariable('primary-text-color'); - cursor: pointer; - } - &:focus { + &:hover, &:focus, &.dashboard-header__tab--selected { color: getThemifyVariable('primary-text-color'); + border-bottom-color: getThemifyVariable('nav-hover-color'); cursor: pointer; } } @@ -28,19 +29,7 @@ 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 { - @include themify() { - color: getThemifyVariable('primary-text-color'); - } cursor: auto; } @@ -49,5 +38,6 @@ } .dashboard-header__tab__title { + font-weight: bold; margin: 0; }