apostrophe/lib/modules/apostrophe-ui/public/css/mixins/utils.less

The Apostrophe Content Management System.

.apos-add-font(@name, @url, @style: normal, @weight: normal)
{
  @font-face
  {
    font-family: @name;
    font-weight: @weight;
    font-style: @style;
    src: url('@{url}.eot');
    src: url('@{url}.eot?#iefix') format('embedded-opentype'),
         url('@{url}.woff') format('woff'),
         url('@{url}.ttf')  format('truetype'),
         url('@{url}.svg#svgFontName') format('svg');
  }

  @selector: ~'.@{name}';

  @{selector}
  {
    font-family: @name;
  }
}

.apos-inline-block(@align: top)
{
  vertical-align: @align;
  display: inline-block;
}

.apos-transition(@what: all, @duration:0.15s, @ease: ease-in-out)
{
  -webkit-transition: @what @duration @ease;
  -moz-transition: @what @duration @ease;
  -o-transition: @what @duration @ease;
  transition: @what @duration @ease;
}
.apos-transitions(@transitions)
{
  -webkit-transition: ~'@{transitions}';
  -moz-transition: ~'@{transitions}';
  -o-transition: ~'@{transitions}';
  transition: ~'@{transitions}';
}

.apos-transition--bounce
{
  .apos-transition(@ease: cubic-bezier(0.13, 0.63, 0.34, 1.58))
}

.apos-transform(@string)
{
  -webkit-transform:   ~'@{string}';
  -moz-transform:      ~'@{string}';
  -ms-transform:       ~'@{string}';
  -o-transform:        ~'@{string}';
}

.apos-animation(@props)
{
	-webkit-animation: ~'@{props}';
	-moz-animation:    ~'@{props}';
	animation:         ~'@{props}';
}
.apos-keyframes(@name; @arguments)
{
	@-moz-keyframes @name { @arguments(); }
	@-webkit-keyframes @name { @arguments(); }
	@keyframes @name { @arguments(); }
}

// No Text Selection ===================================
.apos-no-select
{
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

// Center vertical ====================================
.apos-center-vertical(@position: relative)
{
  position: @position;
  top: 50%;
  -webkit-transform: translate3d(0,-50%,0);
  -ms-transform: translate3d(0,-50%,0);
  transform: translate3d(0,-50%,0);
}

.apos-visually-hide
{
  // Per https://allyjs.io/tutorials/hiding-elements.html#how-to-hide-elements-visually
  // Hide it visually, taking up no space and not being clickable, but
  // don't hide it for accessibility purposes. -Tom, Alex B. and Austin

  visibility: visible;
  position: absolute;

  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;

  white-space: nowrap;

  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;    
}