@vue/ui/src/style/mixins.styl

UI components used in the vuejs organization apps

ellipsis() {
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}

bounds($distance) {
  top: $distance;
  bottom: $distance;
  right: $distance;
  left: $distance;
}

overlay() {
  position: absolute;
  bounds(0);
}

flex-box() {
  display: flex;

  & > * {
    flex: auto 0 0;
  }
}

h-box() {
  flex-box();
  flex-direction: row;
}

v-box() {
  flex-box();
  flex-direction: column;
}

flex-control() {
  width: 0 !important;
}

box-center() {
  align-items: center;
  justify-content: center;
}

space-between-x($margin) {
  margin-right: $margin;

  &:last-child {
    margin-right: 0;
  }
}

space-between-y($margin) {
  margin-bottom: $margin;

  &:last-child {
    margin-bottom: 0;
  }
}

// Disable noisy browser styles
disable-focus-styles()
  outline none
  -webkit-tap-highlight-color rgba(255, 255, 255, 0)
  &::-moz-focus-inner
    border 0

// Buttons

button-colors($foreground, $background)
  color $foreground
  background $background
  &:not(.ghost)
    &:hover,
    .vue-ui-dropdown.open .dropdown-trigger &
      background lighten($background, 25%)
    .vue-ui-dark-mode .vue-ui-dropdown.open .dropdown-trigger &
      background $vue-ui-gray-600
      color $vue-ui-white
      > .content
        > .button-icon
          svg
            fill $vue-ui-white

    &:hover
      .vue-ui-dark-mode .popover &
        background $vue-ui-gray-800 !important
    &:active
      background darken($background, 8%)
  > .content
    > .button-icon
      svg
        fill $foreground
  > .vue-ui-loading-indicator,
  > .content > .loading-secondary
    .animation
      border-right-color $foreground
  > .content > .tag-wrapper > .tag
    background $foreground
    color $background
    if $background is transparent
      color $vue-ui-white
      .vue-ui-dark-mode &
        color $vue-ui-gray-800 !important
    .vue-ui-high-contrast &
      background black !important
      color white !important
  &::before
    background $background

  &.vue-ui-dropdown-button
    background transparent
    &:not(:hover)
      color $vue-ui-gray-800
      .vue-ui-dark-mode &
        color $vue-ui-white !important
      > .content
        > .button-icon
          svg
            fill @color
            .vue-ui-dark-mode &
              fill $vue-ui-white !important

button-transitions()
  transition background .1s, color .1s
  > .content
    > .button-icon
      svg
        transition fill .1s

// Vue text

vue-ui-text-colors($c)
  color $c
  .vue-ui-icon
    svg
      fill $c !important
  &.banner
    background lighten($c, 90%)
    .vue-ui-dark-mode &
      background darken($c, 60%)