Web Toolkit

image/svg+xml GitHub

Button: Default 

<ul>
    <li class="u-padding-all-s">
        <button type="button" class="Button Button--default u-text-r-xs">Button default</button>
    </li>
    <li class="u-padding-all-s">
        <button type="button" class="Button Button--default u-text-r-xs is-pressed">Button default pressed</button>
    </li>
    <li class="u-padding-all-s">
        <button type="button" class="Button Button--default u-text-r-xs is-disabled" disabled>Button default disabled</button>
    </li>
    <li class="u-padding-all-s">
        <button type="button" class="Button Button--default Button--shadow u-text-r-xs">Button default shadow</button>
    </li>
    <li class="u-padding-all-s">
        <button type="button" class="Button Button--default Button--round u-text-r-xs">Button default round</button>
    </li>
    <li class="u-padding-all-s">
        <button type="button" class="Button Button--default Button--shadow Button--round u-text-r-xs">Button default round shadow</button>
    </li>
    <li class="u-padding-all-s">
        <a role="button" class="Button Button--default Button--shadow Button--round u-text-r-xs">Link button default round shadow</a>
    </li>
</ul>
  • Content: 
    /** @define Button; */

:root {
  --Button-default-bg: #65dde0;
  --Button-default-color: #004a4d;
  --Button-default-border: #50d8dc;
  --Button-danger-bg: #b50000;
  --Button-danger-color: #fff;
  --Button-danger-border: #f00;
  --Button-info-bg: #fff;
  --Button-info-color: #003e54;
  --Button-info-border: #ccc;
}

.Button {
  font-weight: 600;
  padding: 0.6em 1.2em;
  text-transform: uppercase;
  touch-action: manipulation;
  vertical-align: middle;
  white-space: nowrap;
}

.Button:active,
.Button.is-pressed {
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.Button--shadow {
  box-shadow: 0 2px 4px 0 #bdbdbd;
}

.Button--round {
  border-radius: 0.1em;
}

/**
 * Modifier: default buttons
 * =========================
 */

.Button--default {
  background-color: var(--Button-default-bg);
  border-color: var(--Button-default-border);
  color: var(--Button-default-color);
}

.Button--default[disabled],
.Button--default.is-disabled {
  background-color: var(--Button-default-bg) !important;
  border-color: var(--Button-default-border) !important;
  color: var(--Button-default-color) !important;
}

.Button--default:focus,
.Button--default:hover {
  background-color: color(var(--Button-default-bg) l(-10%));
  border-color: color(var(--Button-default-border) l(-10%));
}

.Button--default:active,
.Button--default.is-pressed {
  background-color: var(--Button-default-color);
  border-color: color(var(--Button-default-color) l(-25%));
  color: var(--Button-default-bg);
}

/**
 * Modifier: danger buttons
 * =========================
 */

.Button--danger {
  background-color: var(--Button-danger-bg);
  border-color: var(--Button-danger-border);
  color: var(--Button-danger-color);
}

.Button--danger[disabled],
.Button--danger.is-disabled {
  background-color: var(--Button-danger-bg) !important;
  border-color: var(--Button-danger-border) !important;
  color: var(--Button-danger-color) !important;
}

.Button--danger:focus,
.Button--danger:hover {
  background-color: color(var(--Button-danger-bg) l(-10%));
  border-color: color(var(--Button-danger-border) l(-10%));
}

.Button--danger:active,
.Button--danger.is-pressed {
  background-color: var(--Button-danger-color);
  border-color: color(var(--Button-danger-color) l(-25%));
  color: var(--Button-danger-bg);
}

/**
 * Modifier: info buttons
 * =========================
 */

.Button--info {
  background-color: var(--Button-info-bg);
  border-color: var(--Button-info-border);
  color: var(--Button-info-color);
}

.Button--info[disabled],
.Button--info.is-disabled {
  background-color: var(--Button-info-bg) !important;
  border-color: var(--Button-info-border) !important;
  color: var(--Button-info-color) !important;
}

.Button--info:focus,
.Button--info:hover {
  background-color: color(var(--Button-info-bg) l(-10%));
  border-color: color(var(--Button-info-border) l(-10%));
}

.Button--info:active,
.Button--info.is-pressed {
  background-color: var(--Button-info-color);
  border-color: color(var(--Button-info-color) l(-25%));
  color: var(--Button-info-bg);
}
  • URL: /components/raw/button/index.css
  • Filesystem Path: src/components/button/index.css
  • Size: 3.1 KB

There are no notes for this item.