Adjust internal tab spacing #115
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Make the spacing between the edge of the tab scroll area and the first tab the same as the space between individual tabs. Adjust the spacing for the `icon-on-top` theme variant, so that it’s visually more balanced (equal space between the text and icon as well as text and the selection indicator).
|
These changes make the tabs work nicely together with the upcoming app-layout component. |
platosha
added a commit
to vaadin/vaadin-app-layout
that referenced
this pull request
Sep 14, 2018
See also: vaadin/vaadin-tabs#115 Changes in core styles: - Change CSS navbar layout from brute-force absolute to flex - Change default navbar height to `auto` - Remove unnecessary branding constrains, fixes #30 - Expose navbar background custom CSS property, use default value - Support inheriting custom CSS properties, fixes #28 Lumo theme: - Remove host font and color reset - Apply background color on navbar to match the original mockups - Refine spacing for navbar and its contents - Decrease font size for tabs in the menu part on mobile Material theme: - Remove host font and color reset - Apply background color on navbar - Add drop shadow for navbar from the Material Design Guide - Refine spacing for navbar and its contents Demos: - Use icon-on-top tabs in the first example - Remove `theme="minimal"` to restore the proper selected tab indication - Use explicit branding image size - Use explicit global content styles - Increase content padding to match the navbar default - Use `max-width` for mobile demo, fixes overflow with narrow viewport size
web-padawan
force-pushed
the
adjust-spacing
branch
from
bce4eb0
to
bd6f9fc
Compare
platosha
added a commit
to vaadin/vaadin-app-layout
that referenced
this pull request
Sep 17, 2018
See also: vaadin/vaadin-tabs#115 Changes in core styles: - Change CSS navbar layout from brute-force absolute to flex - Change default navbar height to `auto` - Remove unnecessary branding constrains, fixes #30 - Expose navbar background custom CSS property, use default value - Support inheriting custom CSS properties, fixes #28 Lumo theme: - Remove host font and color reset - Apply background color on navbar to match the original mockups - Refine spacing for navbar and its contents - Decrease font size for tabs in the menu part on mobile Material theme: - Remove host font and color reset - Apply background color on navbar - Add drop shadow for navbar from the Material Design Guide - Refine spacing for navbar and its contents Demos: - Use icon-on-top tabs in the first example - Remove `theme="minimal"` to restore the proper selected tab indication - Use explicit branding image size - Use explicit global content styles - Increase content padding to match the navbar default - Use `max-width` for mobile demo, fixes overflow with narrow viewport size
limonte
approved these changes
Sep 18, 2018
limonte
pushed a commit
that referenced
this pull request
Sep 18, 2018
* Adjust internal tab spacing Make the spacing between the edge of the tab scroll area and the first tab the same as the space between individual tabs. Adjust the spacing for the `icon-on-top` theme variant, so that it’s visually more balanced (equal space between the text and icon as well as text and the selection indicator). * Restore the vertical orientation padding inside the tabs * Update visual tests for Lumo tabs * Fix equal-width-tabs test regression caused by theme change * Add istanbul-ignore comments for old workaround
DiegoCardoso
pushed a commit
to vaadin/vaadin-app-layout
that referenced
this pull request
Sep 18, 2018
* UI design fixes See also: vaadin/vaadin-tabs#115 Changes in core styles: - Change CSS navbar layout from brute-force absolute to flex - Change default navbar height to `auto` - Remove unnecessary branding constrains, fixes #30 - Expose navbar background custom CSS property, use default value - Support inheriting custom CSS properties, fixes #28 Lumo theme: - Remove host font and color reset - Apply background color on navbar to match the original mockups - Refine spacing for navbar and its contents - Decrease font size for tabs in the menu part on mobile Material theme: - Remove host font and color reset - Apply background color on navbar - Add drop shadow for navbar from the Material Design Guide - Refine spacing for navbar and its contents Demos: - Use icon-on-top tabs in the first example - Remove `theme="minimal"` to restore the proper selected tab indication - Use explicit branding image size - Use explicit global content styles - Increase content padding to match the navbar default - Use `max-width` for mobile demo, fixes overflow with narrow viewport size
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Make the spacing between the edge of the tab scroll area and the first tab the same as the space between individual tabs.
Adjust the spacing for the
icon-on-toptheme variant, so that it’s visually more balanced (equal space between the text and icon as well as text and the selection indicator).Before/after:
This change is