onsenui/css/css-components-src/components/button-bar.css

HTML5 Mobile Framework & UI Components

:root {
  --button-bar-active-color: var(--button-bar-active-text-color);
  --button-bar-border-top: 1px solid var(--button-bar-color);
  --button-bar-border-bottom: 1px solid var(--button-bar-color);
  --button-bar-border: 0 solid var(--button-bar-color);
  --button-bar-border-radius: 4px;
}

/*~
  name: Button Bar
  category: Segment
  markup: |
    <div class="button-bar" style="width:280px;">
      <div class="button-bar__item">
        <button class="button-bar__button">One</button>
      </div>
      <div class="button-bar__item">
        <button class="button-bar__button">Two</button>
      </div>
      <div class="button-bar__item">
        <button class="button-bar__button">Three</button>
      </div>
    </div>
*/

.button-bar {
  /* mixin: reset-font */
  font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: var(--font-weight);

  display: inline-flex;
  align-items: stretch;
  align-content: stretch;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  border: none;
}

.button-bar__item {
  /* mixin: reset-font */
  font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: var(--font-weight);

  border-radius: 0;
  width: 100%;
  padding: 0;
  margin: 0;

  /* mixin: hide-input-parent */
  position: relative;

  overflow: hidden;
  box-sizing: border-box;
}

.button-bar__button {
  /* mixin: reset-font */
  font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  border-radius: 0;
  background-color: transparent;
  color: var(--button-bar-color);
  border: 1px solid var(--button-bar-color);
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-right-width: 1px;
  border-left-width: 0;
  font-weight: var(--font-weight);
  padding: 0;
  font-size: 13px;
  height: 27px;
  line-height: 27px;
  width: 100%;
  transition: background-color 0.2s linear, color 0.2s linear;
  box-sizing: border-box;
}

.button-bar__button:disabled {
  /* mixin: disabled */
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.button-bar__button:hover {
  transition: none;
}

.button-bar__button:focus {
  outline: 0;
}

:checked + .button-bar__button {
  background-color: var(--button-bar-color);
  color: var(--button-bar-active-color);
  transition: none;
}

.button-bar__button:active,
:active + .button-bar__button {
  background-color: var(--button-bar-active-background-color);
  border: var(--button-bar-border);
  border-top: var(--button-bar-border-top);
  border-bottom: var(--button-bar-border-bottom);
  border-right: 1px solid var(--button-bar-color);
  font-size: 13px;
  width: 100%;
  transition: none;
}

/* Hack to replicate blend from the deprecated color-mod function. */
.button-bar__button:active:before,
:active + .button-bar__button:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  --blend-background-color__base: var(--button-bar-color);
  --blend-background-color__color: var(--button-bar-active-background-color-default-blend-color);
  /* stylelint-disable-next-line no-unknown-animations */
  animation: blend-background-color 1s var(--button-bar-active-background-color-default-blend-time) linear forwards paused;
}

.button-bar__item:first-child > .button-bar__button {
  border-left-width: 1px;
  border-radius: var(--button-bar-border-radius) 0 0 var(--button-bar-border-radius);
}

.button-bar__item:last-child > .button-bar__button {
  border-right-width: 1px;
  border-radius: 0 var(--button-bar-border-radius) var(--button-bar-border-radius) 0;
}