Skip to content

Commit

Permalink
Styling improvements.
Browse files Browse the repository at this point in the history
  • Loading branch information
andreasbm committed Apr 2, 2019
1 parent 5d3531e commit fcb8056
Show file tree
Hide file tree
Showing 50 changed files with 770 additions and 215 deletions.
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -78,8 +78,8 @@
"devDependencies": {
"@a11y/skip-navigation": "0.0.7",
"@appnest/readme": "^1.2.3",
"@appnest/web-config": "0.4.12",
"@appnest/web-router": "^1.2.15",
"@appnest/web-config": "0.4.14",
"@appnest/web-router": "^1.2.18",
"@types/puppeteer": "^1.12.3",
"code-prettify": "^0.1.0",
"fs-extra": "^7.0.1",
Expand Down
9 changes: 9 additions & 0 deletions src/demo/elements/code-example/code-example-element.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,14 @@ import { customElement, html, LitElement, property, query } from "lit-element";
import { ifDefined } from "lit-html/directives/if-defined";
import "../../../lib/button";
import "../../../lib/icon";
import { queueSnackbar } from "../../../lib/snackbar/queue-snackbar";
import { cssResult } from "../../../lib/util/css";
import { openCodepen } from "../../codepen";
import { GOOGLE_FONT_URL, MATERIAL_ICONS_URL, UNPGK_URL } from "../../constants";
import { copyToClipboard } from "../../copy-to-clipboard";
import { HighlightElement } from "../highlight/highlight-element";
import "../highlight/highlight-element";
import "../../../lib/snackbar";

/**
* Highlights the initial HTML in the slot.
Expand Down Expand Up @@ -49,6 +51,13 @@ export class CodeExampleElement extends LitElement {

copyToClipboard () {
copyToClipboard(this.$highlighter.cleanedText);
queueSnackbar({
fixed: true,
container: document.body,
template: html`<span>The code was copied to your clipboard</span>`,
hideDelay: 2000,
backdrop: true
}).then();
}

/**
Expand Down
2 changes: 1 addition & 1 deletion src/demo/pages/elements/elements/banner-page.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@ export default class BannerPage extends LitElement {
<code-example-element>
<wl-banner>
<wl-icon slot="icon">account_box</wl-icon>
<span slot="text">Your password was updated on your other device. Please sign in again.</span>
<wl-button slot="action" flat inverted>Continue as guest</wl-button>
<wl-button slot="action" flat inverted>Sign in</wl-button>
<span>Your password was updated on your other device. Please sign in again.</span>
</wl-banner>
</code-example-element>
</demo-element>
Expand Down
8 changes: 4 additions & 4 deletions src/demo/pages/elements/elements/popover-page.ts
Original file line number Diff line number Diff line change
Expand Up @@ -238,12 +238,12 @@ export default class PopoverPage extends LitElement {
template: html\`<wl-popover-card><p>This is a template!</p></wl-popover-card>\`
});
`}"></highlight-element>
</demo-element>
<wl-title level="3">Nested popovers</wl-title>
<demo-element>
<code-example-element>
<div id="toucharea" @contextmenu="${this.showContextMenu}"></div>
</code-example-element>
<p>Right-click on the grey area below.</p>
<div id="toucharea" @contextmenu="${this.showContextMenu}"></div>
</demo-element>
`;
Expand Down
6 changes: 3 additions & 3 deletions src/demo/pages/elements/elements/snackbar-page.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@ async function showTemplateSnackbar ({text, buttonText, queue}: {text: string, b
const ref = await (queue ? queueSnackbar : showSnackbar)({
container: document.body,
template: html`
<span slot="text">${text}</span>
<wl-button slot="action" flat inverted @click="${() => ref.overlay.hide()}">${buttonText}</wl-button>
<span>${text}</span>
`,
...config
});
Expand Down Expand Up @@ -58,8 +58,8 @@ export default class SnackbarPage extends LitElement {
<code-example-element>
<wl-snackbar open>
<wl-icon slot="icon">photo</wl-icon>
<span slot="text">Can't send photo. Retry in 5 seconds.</span>
<wl-button slot="action" flat inverted>Retry</wl-button>
<span>Can't send photo. Retry in 5 seconds.</span>
</wl-snackbar>
</code-example-element>
</demo-element>
Expand All @@ -70,8 +70,8 @@ export default class SnackbarPage extends LitElement {
<wl-button id="open-snackbar" @click="${() => this.showDeclarativeSnackbar()}">Open</wl-button>
<wl-snackbar id="snackbar" fixed backdrop>
<wl-icon slot="icon">photo</wl-icon>
<span slot="text">Can't send photo. Retry in 5 seconds.</span>
<wl-button slot="action" flat inverted>Retry</wl-button>
<span>Can't send photo. Retry in 5 seconds.</span>
</wl-snackbar>
</code-example-element>
</demo-element>
Expand Down
1 change: 1 addition & 0 deletions src/lib/backdrop/backdrop-vars.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@import "../style/base";

/* Background */
$backdrop-bg: var(--backdrop-bg, rgba(0, 0, 0, 0.6));
15 changes: 13 additions & 2 deletions src/lib/banner/banner-vars.scss
Original file line number Diff line number Diff line change
@@ -1,9 +1,20 @@
@import "../style/base";

/* Margin of the icon slot */
$banner-icon-margin: var(--banner-icon-margin, 0 #{$spacing-m} 0 0);
$banner-icon-color: var(--banner-icon-color, #{color("primary")});

/* Padding */
$banner-padding: var(--banner-padding, #{$spacing-s});

/* Padding of the content slot */
$banner-content-padding: var(--banner-content-padding, #{$spacing-s} #{$spacing-m});

/* Color of the icon */
$banner-icon-color: var(--banner-icon-color, #{color("primary")});

/* Color */
$banner-color: var(--banner-color, #{$foreground});

/* Background */
$banner-bg: var(--banner-bg, #{$background});
$banner-content-padding: var(--banner-content-padding, #{$spacing-s} #{$spacing-m});

2 changes: 1 addition & 1 deletion src/lib/banner/banner.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@ describe("wl-banner", () => {
$container.innerHTML = `
<wl-banner>
<wl-icon slot="icon">account_box</wl-icon>
<span slot="text">Your password was updated on your other device. Please sign in again.</span>
<wl-button slot="action" flat inverted>Continue as guest</wl-button>
<wl-button slot="action" flat inverted>Sign in</wl-button>
<span>Your password was updated on your other device. Please sign in again.</span>
</wl-banner>`;

await waitForElement("wl-banner");
Expand Down
4 changes: 3 additions & 1 deletion src/lib/behavior/button/button-behavior.ts
Original file line number Diff line number Diff line change
Expand Up @@ -53,8 +53,10 @@ export abstract class ButtonBehavior extends FormElementBehavior implements IBut
* @param e
*/
protected onKeyDown (e: KeyboardEvent) {

if (e.code === ENTER || e.code === SPACE) {
// We want to have a position sent through the simulated click
// (document.elementFromPoint(left, top) as HTMLElement).click();

this.click();
stopEvent(e);

Expand Down
50 changes: 48 additions & 2 deletions src/lib/behavior/input/input-vars.scss
Original file line number Diff line number Diff line change
@@ -1,37 +1,83 @@
@import "../../style/base";

/* Inactive state color */
$input-state-color-inactive: var(--input-state-color-inactive, #{color("shade", $light-hue)});

/* Active state color */
$input-state-color-active: var(--input-state-color-active, #{color("primary")});

/* Hover state color */
$input-state-color-hover: var(--input-state-border-color-hover, #{color("shade", $dark-hue)});

/* Invalid state color */
$input-state-color-invalid: var(--input-state-color-invalid, #{color("error")});

/* Disabled state color */
$input-state-color-disabled: var(--input-state-color-disabled, #{color("shade", 300)});

/* Default color */
$input-color: var(--input-color, #{$foreground});
$input-color-disabled: var(--input-color-disabled, #{color("shade", $light-hue)});
$input-transition: var(--input-transition, border-color #{$transition-duration-medium} #{$transition-ease}, background #{$transition-duration-medium} #{$transition-ease});

/* Default background */
$input-bg: var(--input-bg, transparent);

/* Color when disabled */
$input-color-disabled: var(--input-color-disabled, #{color("shade", $light-hue)});

/* Background when filled */
$input-bg-filled: var(--input-bg, #{color("shade", 200)});

/* Background when filled and hover */
$input-bg-filled-hover: var(--input-bg-filled-hover, #{color("shade", 200, 0.5)});

/* Transition */
$input-transition: var(--input-transition, border-color #{$transition-duration-medium} #{$transition-ease}, background #{$transition-duration-medium} #{$transition-ease});

/* Border width */
$input-border-width: var(--input-border-width, #{size(1)});

/* Border style */
$input-border-style: var(--input-border-style, solid);

/* Border style when disabled */
$input-border-style-disabled: var(--input-border-style-disabled, dashed);

/* Color of the before and after slots */
$input-before-after-color: var(--input-before-after-color, #{color("shade", $default-hue)});

/* Font size */
$input-font-size: var(--input-font-size, #{$font-size-m});

/* Left and right padding */
$input-padding-left-right: var(--input-padding-left-right, 0);

/* Top and bottom padding */
$input-padding-top-bottom: var(--input-padding-top-bottom, #{size(8)});

/* Left and right padding when outlined */
$input-padding-left-right-outlined: var(--input-padding-left-right-outlined, #{$spacing-m});

/* Border radius when filled */
$input-border-radius-filled: var(--input-border-radius-outlined, #{$border-radius-m} #{$border-radius-m} 0 0);

/* Border radius when outlined */
$input-border-radius-outlined: var(--input-border-radius-outlined, #{$border-radius-m});

/* Font family */
$input-font-family: var(--input-font-family, #{$font-family-serif});

/* Color of the label */
$input-label-color: var(--input-label-color, #{color("shade", $dark-hue)});

/* Color of the label when disabled */
$input-label-color-disabled: var(--input-label-color-disabled, #{color("shade", $light-hue)});

/* Font size of the label */
$input-label-font-size: var(--input-label-font-size, #{$font-size-s});

/* Transition of the label */
$input-label-transition: var(--input-label-transition, top #{$transition-duration-fast} #{$transition-linear}, font-size #{$transition-duration-fast} #{$transition-linear}, transform #{$transition-duration-fast} #{$transition-linear});

/* Space between label and input */
$input-label-space: var(--input-label-space, #{size(14)});

70 changes: 23 additions & 47 deletions src/lib/behavior/radio/radio-behavior.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
import { property } from "lit-element";
import { AriaRole, updateTabindex } from "../../util/aria";
import { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP } from "../../util/constant/keycode";

import { cssResult } from "../../util/css";
import { queryParentRoots } from "../../util/dom";
import { stopEvent } from "../../util/event";
import { IRowing, row } from "../../util/rowing";
import { ISwitchBehaviorProperties, SwitchBehavior } from "../switch/switch-behavior";

import styles from "./radio-behavior.scss";
Expand All @@ -15,7 +13,7 @@ export interface IRadioBehaviorProperties extends ISwitchBehaviorProperties {
/**
* Radio behavior.
*/
export abstract class RadioBehavior extends SwitchBehavior implements IRadioBehaviorProperties {
export abstract class RadioBehavior extends SwitchBehavior implements IRadioBehaviorProperties, IRowing<RadioBehavior> {
static styles = [...SwitchBehavior.styles, cssResult(styles)];

/**
Expand All @@ -29,6 +27,26 @@ export abstract class RadioBehavior extends SwitchBehavior implements IRadioBeha
*/
protected formElementType = "radio";

/**
* Query the group.
*/
queryGroup (): RadioBehavior[] {
if (this.name != null) {
return queryParentRoots<RadioBehavior>(this, `${this.nodeName.toLowerCase()}[name=${this.name}]:not([disabled])`);
}

return [];
}

/**
* Checks and focuses a grouped element.
* @param elem
*/
rowToElement (elem: RadioBehavior) {
elem.click();
elem.focus();
}

/**
* Checks and unchecks the component.
*/
Expand All @@ -53,16 +71,6 @@ export abstract class RadioBehavior extends SwitchBehavior implements IRadioBeha
}
}

/**
* Query the group.
*/
protected queryGroup (): RadioBehavior[] {
if (this.name != null) {
return queryParentRoots<RadioBehavior>(this, `${this.nodeName.toLowerCase()}[name=${this.name}]:not([disabled])`);
}

return [];
}

/**
* Returns whether at least one radio from the group is checked.
Expand Down Expand Up @@ -91,39 +99,7 @@ export abstract class RadioBehavior extends SwitchBehavior implements IRadioBeha
*/
protected onKeyDown (e: KeyboardEvent) {
super.onKeyDown(e);
const group = this.queryGroup();
const currentIndex = group.indexOf(this);
let newIndex: number | null = null;

switch (e.code) {
// Next
case ARROW_RIGHT:
case ARROW_DOWN:
newIndex = currentIndex + 1 > group.length - 1 ? 0 : currentIndex + 1;
break;

// Previous
case ARROW_LEFT:
case ARROW_UP:
newIndex = currentIndex - 1 < 0 ? group.length - 1 : currentIndex - 1;
break;
}

// Focus on the new radio if necessary
if (newIndex != null && group.length > 0) {
const newCheckedRadio = group[newIndex];
this.rowToElement(newCheckedRadio);
stopEvent(e);
}
}

/**
* Checks and focuses a grouped element.
* @param elem
*/
protected rowToElement (elem: RadioBehavior) {
elem.click();
elem.focus();
row(this, e);
}
}

36 changes: 18 additions & 18 deletions src/lib/button/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,25 +32,25 @@ Allow users to take actions, and make choices, with a single tap.

| Property | Description |
|-------------------------------|--------------------------------------------------|
| `--button-bg` | Default background. |
| `--button-bg-active` | Background on :active. |
| `--button-bg-active-flat` | Background on :active when flat attribute is present. |
| `--button-bg-disabled` | Background when disabled. |
| `--button-bg-hover` | Background on :hover. |
| `--button-border-outlined` | Border when outline attribute is present. |
| `--button-border-radius` | Border radius. |
| `--button-color` | Default color. |
| `--button-color-active` | Color on :active. |
| `--button-color-disabled` | Color when disabled. |
| `--button-color-hover` | Color on :hover. |
| `--button-bg` | Default background |
| `--button-bg-active` | Background when :active |
| `--button-bg-active-flat` | Background when :active and flat attribute is present. |
| `--button-bg-disabled` | Background when disabled |
| `--button-bg-hover` | Background when :hover or :focus |
| `--button-border-outlined` | Border when outlined attribute is present |
| `--button-border-radius` | Border radius |
| `--button-color` | Default color |
| `--button-color-active` | Button color when :active |
| `--button-color-disabled` | Color when disabled |
| `--button-color-hover` | Color when :hover or :focus |
| `--button-fab-size` | Size of the button when fab attribute is present. |
| `--button-font-family` | Font family. |
| `--button-font-size` | Font size. |
| `--button-letter-spacing` | Letter spacing. |
| `--button-padding` | Padding. |
| `--button-shadow-color` | Default shadow color. |
| `--button-shadow-color-hover` | Shadow color on hover. |
| `--button-transition` | Transition. |
| `--button-font-family` | Font family |
| `--button-font-size` | Font size |
| `--button-letter-spacing` | Letter spacing |
| `--button-padding` | Padding |
| `--button-shadow-color` | Default shadow color |
| `--button-shadow-color-hover` | Shadow color when :hover or :focus |
| `--button-transition` | Transition |


[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#slots)
Expand Down
Loading

0 comments on commit fcb8056

Please sign in to comment.