.dashboard-header { padding: #{24 / $base-font-size}rem #{66 / $base-font-size}rem; position: relative; flex: 1; overflow: hidden; display: flex; flex-direction:column; } .dashboard-header--no-vertical-padding { padding: 0 66px; } .dashboard-header--no-vertical-padding { padding: 0 66px; } .dashboard-header__tabs { display: flex; padding-top: #{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-bottom: #{4 / $base-font-size}rem solid transparent; padding: 0 0 #{8 / $base-font-size}rem 0; margin-right: #{26 / $base-font-size}rem; &:hover, &:focus, &.dashboard-header__tab--selected { color: getThemifyVariable('primary-text-color'); border-bottom-color: getThemifyVariable('nav-hover-color'); cursor: pointer; } } font-size: #{21 / $base-font-size}rem; } .dashboard-header__tab--selected { cursor: auto; } .dashboard-header__tab a { color: inherit; } .dashboard-header__tab__title { font-weight: bold; margin: 0; } .dashboard-header__nav { display: flex; justify-content: space-between; align-items: center; } .dashboard-header__actions { display: flex; align-items: center; } .dashboard-header__actions > * { margin-left: #{15 / $base-font-size}rem; } .dashboard__action-button { flex-grow: 0; @extend %button; }