Contents

.drop_down_button {
  display: inline-block;
  position: relative;

  > button.has_icon_and_text {
    @include icon-button;
  }

  > button.has_icon_only {
    @include icon-only-button;
  }

  > button.ellipsis_icon {
    @include fa-ellipsis-v-icon;
    width: 31px;
  }

  &.full_width {
    width: 100%;

    > button {
      width: 100%;
    }
  }
}

.drop_down_button_menu {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  @include transition(visibility 100ms, opacity 100ms);

  position: absolute;
  z-index: 6;
  padding: 1px;
  border: solid 1px var(--ui-on-surface-color-lighter);
  border-radius: rounded(sm);
  box-shadow: var(--ui-box-shadow);
  background-color: var(--ui-surface-color);
  box-sizing: border-box;

  &.is_visible {
    @include transition(visibility 0ms, opacity 100ms);
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
  }
}

.drop_down_button_item {
  a,
  .label {
    padding: 7px 15px;
  }

  a {
    display: none;
    cursor: pointer;

    &:hover {
      background-color: var(--ui-selection-color-light);
    }
  }

  .label {
    cursor: default;
  }

  &.is_selectable {
    a {
      display: block;
    }

    .label {
      display: none;
    }
  }

  &.is_disabled a {
    opacity: 0.5;

    &:hover {
      background-color: inherit;
    }
  }

  &.is_checked a {
    @include background-icon-left($left: 15px, $font-size: 15px);
    @include fa-check-icon;
  }

  .drop_down_button_item a {
    padding-left: 39px;
  }

  ul {
    border-bottom: solid 1px var(--ui-on-surface-color-lighter);
    padding-bottom: 1px;
    margin-bottom: 1px;
  }
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
pageflow-16.1.0	app/assets/stylesheets/pageflow/editor/drop_down_button.scss