bulma/docs/_sass/docs/examples.scss

@use "sass/utilities/extends";
@use "sass/utilities/controls";
@use "sass/utilities/mixins" as mx;

.bulma-arrow-mixin {
  @include mx.arrow(purple);
}

.bulma-burger-mixin {
  @include mx.burger(2.5rem);
}

.bulma-delete-mixin {
  @include mx.delete;
}

.bulma-loader-mixin {
  @include mx.loader;
}

.bulma-block-mixin {
  @include mx.block(1rem);
}

.bulma-fa-mixin {
  @include mx.fa(1rem, 2rem);
  background-color: lavender;
}

.bulma-overlay-mixin-parent {
  background-image: url(/assets/images/unsplash/La2kOu2dmH4.jpg);
  background-size: cover;
  border-radius: 0.5em;
  position: relative;
  height: 11.25rem;
  width: 20rem;
}

.bulma-overlay-mixin {
  @include mx.overlay(1.5rem);
  background-color: darkorange;
  border-radius: 0.25em;
  color: white;
  opacity: 0.9;
  padding: 1em;
}

.bulma-placeholder-mixin {
  @include mx.placeholder {
    color: lightblue;
  }

  border-color: hsl(195deg, 53%, 79%);

  &:hover {
    border-color: hsl(195deg, 83%, 66%);
  }

  &:focus,
  &:active {
    border-color: hsl(195deg, 100%, 56%) !important;
    box-shadow: 0 0 0 0.125em hsla(195deg, 100%, 56%, 0.25) !important;
  }
}

.bulma-clearfix-mixin {
  @include mx.clearfix;

  img {
    border-radius: 0.25em;
    margin-right: 0.5em;
  }
}

.bulma-center-mixin-parent {
  background-image: url(/assets/images/unsplash/La2kOu2dmH4.jpg);
  background-size: cover;
  border-radius: 0.5em;
  position: relative;
  height: 11.25rem;
  width: 20rem;
}

.bulma-center-mixin {
  @include mx.center(96px);
  border-radius: 8px;
  height: 96px;
  width: 96px;
}

.bulma-reset-mixin {
  @include mx.reset;
}

.bulma-unselectable-mixin {
  @include mx.unselectable;
}

.bulma-ltr-rtl-mixin {
  background-color: lightgreen;
  padding: 0.5em 1em;
  border: 1px solid seagreen;
  margin-right: -1px;

  &:first-child {
    @include mx.ltr {
      border-bottom-left-radius: 0.5em;
      border-top-left-radius: 0.5em;
    }

    @include mx.rtl {
      border-bottom-right-radius: 0.5em;
      border-top-right-radius: 0.5em;
    }
  }

  &:last-child {
    @include mx.ltr {
      border-bottom-right-radius: 0.5em;
      border-top-right-radius: 0.5em;
    }

    @include mx.rtl {
      border-bottom-left-radius: 0.5em;
      border-top-left-radius: 0.5em;
    }
  }
}

.bulma-ltr-position-mixin-parent {
  background-color: beige;
  border-radius: 0.5em;
  padding: 1rem;
  padding-left: 5rem;
  position: relative;

  p {
    margin-top: -0.25rem;
  }
}

.bulma-ltr-position-mixin {
  @include mx.ltr-position(1rem, false);
  border-radius: 0.25em;
  position: absolute;
  top: 1rem;
}

.bulma-ltr-property-mixin-parent {
  align-items: flex-start;
  background-color: midnightblue;
  border-radius: 0.5em;
  color: lightskyblue;
  display: flex;
  padding: 1.5rem;
  position: relative;

  p {
    margin-top: -0.25rem;
  }
}

.bulma-ltr-property-mixin {
  @include mx.ltr-property("margin", 1rem, false);
  border-radius: 0.25em;
}

.bulma-control-mixin {
  @include controls.control;
  background: deeppink;
  color: white;

  &.is-small {
    @include controls.control-small;
  }

  &.is-medium {
    @include controls.control-medium;
  }

  &.is-large {
    @include controls.control-large;
  }
}

.bulma-control-extend {
  @include controls.control;
  background: mediumblue;
  color: white;
}