ratchet/lib/sass/segmented-controllers.scss

//
// Segmented controllers
// --------------------------------------------------

.segmented-controller {
  display: -webkit-box;
  display: box;
  padding: 0;
  margin-bottom: 10px;
  overflow: hidden;
  font-size: 12px;
  font-weight: $font-weight-light;
  list-style: none;
  background-color: transparent;
  border: 1px solid $primary-color;
  border-radius: 4px;
  -webkit-box-orient: horizontal;
          box-orient: horizontal;

  // Section within controller
  li {
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
    border-left: 1px solid $primary-color;
    -webkit-box-flex: 1;
            box-flex: 1;
    
    // Link that fills each section
    > a {
      display: block;
      padding: 7px 16px;
      overflow: hidden;
      line-height: 1;
      color: $primary-color;
      text-overflow: ellipsis;
    }

    // Remove border-left and shadow from first section
    &:first-child {
      border-left-width: 0;
    }

    // Active segment of controller
    &.active {
      background-color: $primary-color;
      transition: background-color .2s linear;

      // Set color of links to white
      > a {
        color: #fff;
      }
    }
  }
}

.segmented-controller-item {
  display: none;

  &.active {
    display: block;
  }
}


// Segmented controller in all bars
// --------------------------------------------------

// Remove standard segmented bottom margin
[class*="bar-"] .segmented-controller {
  margin-top: 9px; // Optically center the controller
  margin-bottom: 8px;
  -webkit-box-flex: 1;
          box-flex: 1;
}

// Add margins between segmented controllers and buttons
[class*="bar-"] .segmented-controller + [class*="button"],
[class*="bar-"] [class*="button"] + .segmented-controller {
  margin-left: $bar-side-spacing; // Equal to the right and left padding on buttons & icons
}