button(paper-button): stylize

[nazartokar]

Description

Stylize paper-button: try it, hide/show toggle.

Live Demo

Example

Screenshots

[jarrodek]

To style all buttons we need following mixins and variables:

--paper-button: {
    @apply(--anypoint-font-body);
    border-radius: 0;
    box-shadow: none;
    padding: 10px 16px;
    box-sizing: border-box;
    text-transform: none;
  };
--paper-button-ink-color: transparent;

We don't need to create our own paper-button nor we should define one. Elements require paper-button and will download and register it. This will case an error when trying to register an element that already exists.

[jarrodek]

To previous code I forgot about:

html {
  font-size: 65%;
}

For now it is necessary because font sizes in the typography are defined in rem units. That was the only font definitions I have found earlier in our UX pages. However this should be changed to pixels.

[jarrodek]

The toggle view button will require a change to raml-docs-resource-viewer because there's no CSS mixin applied to toggle buttons to add a border.

Where's an example of this button in Anypoint platform components? I couldn't find it. Also I believe it at most should be a holo ActionButton with border only.

[jarrodek]

About previous comment: I was mistaken the section toggle button with type schema toggle button. You are right. It should be with border and label. Toggle button for the code section should be an action button.