New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Design10 #979
Design10 #979
Conversation
#jp-main-dock-panel { | ||
padding: 4px; | ||
padding: 5px; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I thought we wanted dimensions to be a multiple of 4?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In general I am trying to do that, but tried it at 4px for a long time and it just felt too crowded...there are a few other places in the notebook where we are using 5px increments because of this as well...
} | ||
|
||
.p-TabBar.p-mod-top .p-TabBar-tab.p-mod-current, | ||
.p-TabBar.p-mod-bottom .p-TabBar-tab.p-mod-current { | ||
min-height: calc(var(--jp-private-horizontal-tab-height) - var(--jp-border-width)); | ||
overflow: visible; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The overflow rule should probably be set the same for all tabs, not just the current tab.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
|----------------------------------------------------------------------------*/ | ||
|
||
|
||
#jp-main-dock-panel .p-TabBar-tab.jp-mod-current:before { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this rule will select all tab bar tabs which are descendant from the dock panel (even ones used by ipywidgets for example). We probably want to selected only the tab bars created by the main dock panel. .p-DockPanel-tabPanel > .p-TabBar .p-TabBar-tab
would get you there, albeit it's a bit long.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
fixed
} | ||
|
||
|
||
.p-CommandPalette-input:-ms-input-placeholder { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
::
instead of :
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Got the exact syntax from here: https://css-tricks.com/snippets/css/style-placeholder-text/
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
don't have IE to test...and we use CSS variables...
} | ||
|
||
|
||
.jp-Inspector .p-TabBar .p-TabBar-tab { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
the .p-TabBar
part of this selector is redundant. a .p-TabBar-tab
is always a descendant of a .p-TabBar
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Needed for specificiy to override default styling
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is now merged, but the cheaper way to increase specificity would be to do something like .jp-Inspector.p-Widget .p-TabBar-tab
. Descendant selectors are the most expensive for the browser to match, so should be used as little as possible.
} | ||
|
||
|
||
.jp-Inspector .p-TabBar .p-TabBar-tab.p-mod-current { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ditto
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same specificity issue
OK @sccolbert I think I have addressed all your comments. |
LGTM |
Lots of design changes across all of JupyterLab.