p5.js-web-editor/client/styles/components/_dashboard-header.scss

90 lines
1.8 KiB
SCSS
Raw Normal View History

2019-08-11 09:08:17 +00:00
.dashboard-header {
padding: #{24 / $base-font-size}rem #{66 / $base-font-size}rem;
position: relative;
flex: 1;
overflow: hidden;
display: flex;
flex-direction:column;
2019-08-11 09:08:17 +00:00
}
2019-09-08 16:54:49 +00:00
.dashboard-header--no-vertical-padding {
padding: 0 66px;
}
2019-09-08 16:54:49 +00:00
.dashboard-header--no-vertical-padding {
padding: 0 66px;
}
.dashboard-header__switcher {
flex: 1;
}
2019-08-11 09:08:17 +00:00
.dashboard-header__tabs {
display: flex;
padding-top: #{24 / $base-font-size}rem;
2019-11-04 19:30:24 +00:00
@include themify() {
border-bottom: 1px solid getThemifyVariable('inactive-text-color');
}
2019-08-11 09:08:17 +00:00
}
.dashboard-header__tab {
@include themify() {
color: getThemifyVariable('inactive-text-color');
border-bottom: #{4 / $base-font-size}rem solid transparent;
2019-08-11 09:08:17 +00:00
padding: 0;
margin-right: #{26 / $base-font-size}rem;
2019-08-11 09:08:17 +00:00
&:hover, &:focus, &.dashboard-header__tab--selected {
2019-08-11 09:08:17 +00:00
color: getThemifyVariable('primary-text-color');
border-bottom-color: getThemifyVariable('nav-hover-color');
2019-08-11 09:08:17 +00:00
cursor: pointer;
}
}
font-size: #{12 / $base-font-size}rem;
2019-08-11 09:08:17 +00:00
}
.dashboard-header__tab--selected {
cursor: auto;
}
.dashboard-header__tab a {
color: inherit;
}
.dashboard-header__tab__title {
margin: 0;
padding: 0;
}
.dashboard-header__tab__title > * {
display: inline-block;
padding: 0 #{5 /$base-font-size}rem #{5 /$base-font-size}rem;
2019-08-11 09:08:17 +00:00
}
2019-10-02 15:17:52 +00:00
.dashboard-header__nav {
}
2019-10-02 15:17:52 +00:00
.dashboard-header__actions {
display: flex;
align-items: center;
2019-11-04 19:30:24 +00:00
margin-bottom: #{24 / $base-font-size}rem;
padding: #{24 / $base-font-size}rem #{10 / $base-font-size}rem;
@include themify() {
background-color: getThemifyVariable('modal-background-color');
border-bottom: 1px dotted getThemifyVariable('modal-border-color');
}
2019-10-02 15:17:52 +00:00
}
2019-11-04 19:30:24 +00:00
.dashboard-header__actions > *:not(:first-child) {
2019-10-02 15:17:52 +00:00
margin-left: #{15 / $base-font-size}rem;
}
.dashboard__action-button {
flex-grow: 0;
@extend %button;
}