amazeui/less/utility.less

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

// Name:              Utility
//
// Description:       Useful classes
//
// Component:
//                    `.am-cf`
//                    `.am-f*`
//                    `.am-vertical-align`
//                    `.am-display-*`
//                    `.am-visible-*`
//                    `.am-hidden-*`
//
// =============================================================================


/* ==========================================================================
   Component: Utility
 ============================================================================ */

.@{ns}scrollable-horizontal {
  width: 100%;
  overflow-y: hidden;
  overflow-x: auto;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  -webkit-overflow-scrolling: touch;
}

.@{ns}scrollable-vertical {
  height: @utility-scrollable-height;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  resize: vertical;
}


/* Border-radius*/

.@{ns}square {
  border-radius: 0;
}

.@{ns}radius {
  border-radius: @radius-normal;
}

.@{ns}round {
  border-radius: @global-rounded;
}

.@{ns}circle {
  border-radius: 50%;
}


/* Float blocks*/

.@{ns}cf {
  .clearfix();
}

.@{ns}fl {
  float: left;
}

.@{ns}fr {
  float: right;
}

.@{ns}nbfc {
  overflow: hidden;
}


.@{ns}center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}


/* Display */

.@{ns}block {
  display: block !important;
}

.@{ns}inline {
  display: inline !important;
}

.@{ns}inline-block {
  display: inline-block !important;
}

.@{ns}hide {
  display: none !important;
  visibility: hidden !important;
}


// Vertical alignment
// =============================================================================

/*
* Remove whitespace between child elements when using `inline-block`
*/

.@{ns}vertical-align {
  font-size: 0.001px;
}

/*
* The `@{ns}vertical-align` container needs a specific height
*/

.@{ns}vertical-align:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

/*
* Sub-object which can have any height
* 1. Reset whitespace hack
*/

.@{ns}vertical-align-middle,
.@{ns}vertical-align-bottom {
  display: inline-block;
  font-size: @global-font-size; /* 1 */
  max-width: 100%;
}

.@{ns}vertical-align-middle {
  vertical-align: middle;
}

.@{ns}vertical-align-bottom {
  vertical-align: bottom;
}


// Responsive width
// =============================================================================

.@{ns}responsive-width {
  box-sizing: border-box;
  max-width: 100%;
  height: auto;
}


// =============================================================================
// Margin & Padding
// =============================================================================

// margin mixin

.spacing-variant(@type, @dimension) {
  .@{ns}@{type}@{dimension} {
    @{type}@{dimension}: @global-margin;
  }

  .@{ns}@{type}@{dimension}-0 {
    @{type}@{dimension}: 0!important;
  }

  .@{ns}@{type}@{dimension}-xs {
    @{type}@{dimension}: @global-margin-xs;
  }

  .@{ns}@{type}@{dimension}-sm {
    @{type}@{dimension}: @global-margin-sm;
  }

  .@{ns}@{type}@{dimension}-lg {
    @{type}@{dimension}: @global-margin-lg;
  }

  .@{ns}@{type}@{dimension}-xl {
    @{type}@{dimension}: @global-margin-xl;
  }
}

.spacing-all-variant(@type) {
  .@{ns}@{type} {
    @{type}: @global-margin;
  }

  .@{ns}@{type}-0 {
    @{type}: 0!important;
  }

  .@{ns}@{type}-xs {
    @{type}: @global-margin-xs;
  }

  .@{ns}@{type}-sm {
    @{type}: @global-margin-sm;
  }

  .@{ns}@{type}-lg {
    @{type}: @global-margin-lg;
  }

  .@{ns}@{type}-xl {
    @{type}: @global-margin-xl;
  }
}

.spacing-hv-variant (@type, @dimension, @dimension1, @dimension2) {
  .@{ns}@{type}@{dimension} {
    @{type}@{dimension1}: @global-margin;
    @{type}@{dimension2}: @global-margin;
  }

  .@{ns}@{type}@{dimension}-0 {
    @{type}@{dimension1}: 0!important;
    @{type}@{dimension2}: 0!important;
  }

  .@{ns}@{type}@{dimension}-xs {
    @{type}@{dimension1}: @global-margin-xs;
    @{type}@{dimension2}: @global-margin-xs;
  }

  .@{ns}@{type}@{dimension}-sm {
    @{type}@{dimension1}: @global-margin-sm;
    @{type}@{dimension2}: @global-margin-sm;
  }

  .@{ns}@{type}@{dimension}-lg {
    @{type}@{dimension1}: @global-margin-lg;
    @{type}@{dimension2}: @global-margin-lg;
  }

  .@{ns}@{type}@{dimension}-xl {
    @{type}@{dimension1}: @global-margin-xl;
    @{type}@{dimension2}: @global-margin-xl;
  }
}


/* Margin helpers */

.spacing-all-variant(margin);
.spacing-hv-variant(margin, -horizontal, -left, -right);
.spacing-hv-variant(margin, -vertical, -top, -bottom);
.spacing-variant(margin, -top);
.spacing-variant(margin, -bottom);
.spacing-variant(margin, -left);
.spacing-variant(margin, -right);

/* Padding helpers */

.spacing-all-variant(padding);
.spacing-hv-variant(padding, -horizontal, -left, -right);
.spacing-hv-variant(padding, -vertical, -top, -bottom);
.spacing-variant(padding, -top);
.spacing-variant(padding, -bottom);
.spacing-variant(padding, -left);
.spacing-variant(padding, -right);


// =============================================================================
// Foundation Visibility HTML Classes
// =============================================================================

/* small displays */

@media @screen {
  .@{ns}show-sm-only,
  .@{ns}show-sm-up,
  .@{ns}show-sm,
  .@{ns}show-sm-down,
  .@{ns}hide-md-only,
  .@{ns}hide-md-up,
  .@{ns}hide-md,
  .@{ns}show-md-down,
  .@{ns}hide-lg-only,
  .@{ns}hide-lg-up,
  .@{ns}hide-lg,
  .@{ns}show-lg-down {
    display: inherit !important;
  }

  .@{ns}hide-sm-only,
  .@{ns}hide-sm-up,
  .@{ns}hide-sm,
  .@{ns}hide-sm-down,
  .@{ns}show-md-only,
  .@{ns}show-md-up,
  .@{ns}show-md,
  .@{ns}hide-md-down,
  .@{ns}show-lg-only,
  .@{ns}show-lg-up,
  .@{ns}show-lg,
  .@{ns}hide-lg-down {
    display: none !important;
  }

  /* table */
  table.@{ns}show-sm-only,
  table.@{ns}show-sm-up,
  table.@{ns}show-sm,
  table.@{ns}show-sm-down,
  table.@{ns}hide-md-only,
  table.@{ns}hide-md-up,
  table.@{ns}hide-md,
  table.@{ns}show-md-down,
  table.@{ns}hide-lg-only,
  table.@{ns}hide-lg-up,
  table.@{ns}hide-lg,
  table.@{ns}show-lg-down {
    display: table !important;
  }

  thead.@{ns}show-sm-only,
  thead.@{ns}show-sm-up,
  thead.@{ns}show-sm,
  thead.@{ns}show-sm-down,
  thead.@{ns}hide-md-only,
  thead.@{ns}hide-md-up,
  thead.@{ns}hide-md,
  thead.@{ns}show-md-down,
  thead.@{ns}hide-lg-only,
  thead.@{ns}hide-lg-up,
  thead.@{ns}hide-lg,
  thead.@{ns}show-lg-down {
    display: table-header-group !important; }

  tbody.@{ns}show-sm-only,
  tbody.@{ns}show-sm-up,
  tbody.@{ns}show-sm,
  tbody.@{ns}show-sm-down,
  tbody.@{ns}hide-md-only,
  tbody.@{ns}hide-md-up,
  tbody.@{ns}hide-md,
  tbody.@{ns}show-md-down,
  tbody.@{ns}hide-lg-only,
  tbody.@{ns}hide-lg-up,
  tbody.@{ns}hide-lg,
  tbody.@{ns}show-lg-down {
    display: table-row-group !important;
  }

  tr.@{ns}show-sm-only,
  tr.@{ns}show-sm-up,
  tr.@{ns}show-sm,
  tr.@{ns}show-sm-down,
  tr.@{ns}hide-md-only,
  tr.@{ns}hide-md-up,
  tr.@{ns}hide-md,
  tr.@{ns}show-md-down,
  tr.@{ns}hide-lg-only,
  tr.@{ns}hide-lg-up,
  tr.@{ns}hide-lg,
  tr.@{ns}show-lg-down {
    display: table-row !important;
  }

  th.@{ns}show-sm-only,
  td.@{ns}show-sm-only,
  th.@{ns}show-sm-up,
  td.@{ns}show-sm-up,
  th.@{ns}show-sm,
  td.@{ns}show-sm,
  th.@{ns}show-sm-down,
  td.@{ns}show-sm-down,
  th.@{ns}hide-md-only,
  td.@{ns}hide-md-only,
  th.@{ns}hide-md-up,
  td.@{ns}hide-md-up,
  th.@{ns}hide-md,
  td.@{ns}hide-md,
  th.@{ns}show-md-down,
  td.@{ns}show-md-down,
  th.@{ns}hide-lg-only,
  td.@{ns}hide-lg-only,
  th.@{ns}hide-lg-up,
  td.@{ns}hide-lg-up,
  th.@{ns}hide-lg,
  td.@{ns}hide-lg,
  th.@{ns}show-lg-down,
  td.@{ns}show-lg-down {
    display: table-cell !important;
  }
}

/* medium displays */
@media @medium-up {
  .@{ns}hide-sm-only,
  .@{ns}show-sm-up,
  .@{ns}hide-sm,
  .@{ns}hide-sm-down,
  .@{ns}show-md-only,
  .@{ns}show-md-up,
  .@{ns}show-md,
  .@{ns}show-md-down,
  .@{ns}hide-lg-only,
  .@{ns}hide-lg-up,
  .@{ns}hide-lg,
  .@{ns}show-lg-down {
    display: inherit !important;
  }

  .@{ns}show-sm-only,
  .@{ns}hide-sm-up,
  .@{ns}show-sm,
  .@{ns}show-sm-down,
  .@{ns}hide-md-only,
  .@{ns}hide-md-up,
  .@{ns}hide-md,
  .@{ns}hide-md-down,
  .@{ns}show-lg-only,
  .@{ns}show-lg-up,
  .@{ns}show-lg,
  .@{ns}hide-lg-down {
    display: none !important;
  }

  table.@{ns}hide-sm-only,
  table.@{ns}show-sm-up,
  table.@{ns}hide-sm,
  table.@{ns}hide-sm-down,
  table.@{ns}show-md-only,
  table.@{ns}show-md-up,
  table.@{ns}show-md,
  table.@{ns}show-md-down,
  table.@{ns}hide-lg-only,
  table.@{ns}hide-lg-up,
  table.@{ns}hide-lg,
  table.@{ns}show-lg-down {
    display: table !important;
  }

  thead.@{ns}hide-sm-only,
  thead.@{ns}show-sm-up,
  thead.@{ns}hide-sm,
  thead.@{ns}hide-sm-down,
  thead.@{ns}show-md-only,
  thead.@{ns}show-md-up,
  thead.@{ns}show-md,
  thead.@{ns}show-md-down,
  thead.@{ns}hide-lg-only,
  thead.@{ns}hide-lg-up,
  thead.@{ns}hide-lg,
  thead.@{ns}show-lg-down {
    display: table-header-group !important;
  }

  tbody.@{ns}hide-sm-only,
  tbody.@{ns}show-sm-up,
  tbody.@{ns}hide-sm,
  tbody.@{ns}hide-sm-down,
  tbody.@{ns}show-md-only,
  tbody.@{ns}show-md-up,
  tbody.@{ns}show-md,
  tbody.@{ns}show-md-down,
  tbody.@{ns}hide-lg-only,
  tbody.@{ns}hide-lg-up,
  tbody.@{ns}hide-lg,
  tbody.@{ns}show-lg-down {
    display: table-row-group !important;
  }

  tr.@{ns}hide-sm-only,
  tr.@{ns}show-sm-up,
  tr.@{ns}hide-sm,
  tr.@{ns}hide-sm-down,
  tr.@{ns}show-md-only,
  tr.@{ns}show-md-up,
  tr.@{ns}show-md,
  tr.@{ns}show-md-down,
  tr.@{ns}hide-lg-only,
  tr.@{ns}hide-lg-up,
  tr.@{ns}hide-lg,
  tr.@{ns}show-lg-down {
    display: table-row !important;
  }

  th.@{ns}hide-sm-only,
  td.@{ns}hide-sm-only,
  th.@{ns}show-sm-up,
  td.@{ns}show-sm-up,
  th.@{ns}hide-sm,
  td.@{ns}hide-sm,
  th.@{ns}hide-sm-down,
  td.@{ns}hide-sm-down,
  th.@{ns}show-md-only,
  td.@{ns}show-md-only,
  th.@{ns}show-md-up,
  td.@{ns}show-md-up,
  th.@{ns}show-md,
  td.@{ns}show-md,
  th.@{ns}show-md-down,
  td.@{ns}show-md-down,
  th.@{ns}hide-lg-only,
  td.@{ns}hide-lg-only,
  th.@{ns}hide-lg-up,
  td.@{ns}hide-lg-up,
  th.@{ns}hide-lg,
  td.@{ns}hide-lg,
  th.@{ns}show-lg-down,
  td.@{ns}show-lg-down {
    display: table-cell !important;
  }
}

/* large displays */
@media @large-up {
  .@{ns}hide-sm-only,
  .@{ns}show-sm-up,
  .@{ns}hide-sm,
  .@{ns}hide-sm-down,
  .@{ns}hide-md-only,
  .@{ns}show-md-up,
  .@{ns}hide-md,
  .@{ns}hide-md-down,
  .@{ns}show-lg-only,
  .@{ns}show-lg-up,
  .@{ns}show-lg,
  .@{ns}show-lg-down {
    display: inherit !important;
  }

  .@{ns}show-sm-only,
  .@{ns}hide-sm-up,
  .@{ns}show-sm,
  .@{ns}show-sm-down,
  .@{ns}show-md-only,
  .@{ns}hide-md-up,
  .@{ns}show-md,
  .@{ns}show-md-down,
  .@{ns}hide-lg-only,
  .@{ns}hide-lg-up,
  .@{ns}hide-lg,
  .@{ns}hide-lg-down {
    display: none !important;
  }

  table.@{ns}hide-sm-only,
  table.@{ns}show-sm-up,
  table.@{ns}hide-sm,
  table.@{ns}hide-sm-down,
  table.@{ns}hide-md-only,
  table.@{ns}show-md-up,
  table.@{ns}hide-md,
  table.@{ns}hide-md-down,
  table.@{ns}show-lg-only,
  table.@{ns}show-lg-up,
  table.@{ns}show-lg,
  table.@{ns}show-lg-down{
    display: table !important;
  }

  thead.@{ns}hide-sm-only,
  thead.@{ns}show-sm-up,
  thead.@{ns}hide-sm,
  thead.@{ns}hide-sm-down,
  thead.@{ns}hide-md-only,
  thead.@{ns}show-md-up,
  thead.@{ns}hide-md,
  thead.@{ns}hide-md-down,
  thead.@{ns}show-lg-only,
  thead.@{ns}show-lg-up,
  thead.@{ns}show-lg,
  thead.@{ns}show-lg-down {
    display: table-header-group !important;
  }

  tbody.@{ns}hide-sm-only,
  tbody.@{ns}show-sm-up,
  tbody.@{ns}hide-sm,
  tbody.@{ns}hide-sm-down,
  tbody.@{ns}hide-md-only,
  tbody.@{ns}show-md-up,
  tbody.@{ns}hide-md,
  tbody.@{ns}hide-md-down,
  tbody.@{ns}show-lg-only,
  tbody.@{ns}show-lg-up,
  tbody.@{ns}show-lg,
  tbody.@{ns}show-lg-down {
    display: table-row-group !important;
  }

  tr.@{ns}hide-sm-only,
  tr.@{ns}show-sm-up,
  tr.@{ns}hide-sm,
  tr.@{ns}hide-sm-down,
  tr.@{ns}hide-md-only,
  tr.@{ns}show-md-up,
  tr.@{ns}hide-md,
  tr.@{ns}hide-md-down,
  tr.@{ns}show-lg-only,
  tr.@{ns}show-lg-up,
  tr.@{ns}show-lg,
  tr.@{ns}show-lg-down {
    display: table-row !important;
  }

  th.@{ns}hide-sm-only,
  td.@{ns}hide-sm-only,
  th.@{ns}show-sm-up,
  td.@{ns}show-sm-up,
  th.@{ns}hide-sm,
  td.@{ns}hide-sm,
  th.@{ns}hide-sm-down,
  td.@{ns}hide-sm-down,
  th.@{ns}hide-md-only,
  td.@{ns}hide-md-only,
  th.@{ns}show-md-up,
  td.@{ns}show-md-up,
  th.@{ns}hide-md,
  td.@{ns}hide-md,
  th.@{ns}hide-md-down,
  td.@{ns}hide-md-down,
  th.@{ns}show-lg-only,
  td.@{ns}show-lg-only,
  th.@{ns}show-lg-up,
  td.@{ns}show-lg-up,
  th.@{ns}show-lg,
  td.@{ns}show-lg,
  th.@{ns}show-lg-down,
  td.@{ns}show-lg-down {
    display: table-cell !important;
  }
}

@media @landscape {
  .@{ns}show-landscape,
  .@{ns}hide-portrait {
    display: inherit !important;
  }

  .@{ns}hide-landscape,
  .@{ns}show-portrait {
    display: none !important;
  }
}

@media @portrait {
  .@{ns}show-portrait,
  .@{ns}hide-landscape {
    display: inherit !important;
  }

  .@{ns}hide-portrait,
  .@{ns}show-landscape {
    display: none !important;
  }
}


// =============================================================================
// Text Utility
// =============================================================================

// Font family
// -----------------------------------------------------------------------------

.@{ns}sans-serif {
  font-family: @font-family-sans-serif;
}

.@{ns}serif {
  font-family: @font-family-serif;
}

.@{ns}kai {
  font-family: @font-family-kai;
}

.@{ns}monospace {
  font-family: @font-family-monospace;
}


// Text color
// -----------------------------------------------------------------------------

.@{ns}text-primary {
  color: @global-primary;
}

.@{ns}text-secondary {
  color: @global-secondary;
}

.@{ns}text-success {
  color: @global-success;
}

.@{ns}text-warning {
  color: @global-warning;
}

.@{ns}text-danger {
  color: @global-danger;
}

.@{ns}link-muted {
  color: #666;
  a {
    color: #666;
  }

  &:hover,
  & a:hover {
    color: #555;
  }
}


// Text size
// -----------------------------------------------------------------------------

.@{ns}text-default {
  font-size: @base-font-size;
}

/*
.@{ns}text-xxs {
  font-size: @font-size-xxs;
}
*/

.@{ns}text-xs {
  font-size: @font-size-xs;
}

.@{ns}text-sm {
  font-size: @font-size-sm;
}

.@{ns}text-lg {
  font-size: @font-size-lg;
}

.@{ns}text-xl {
  font-size: @font-size-xl;
}

.@{ns}text-xxl {
  font-size: @font-size-xxl;
}

.@{ns}text-xxxl {
  font-size: @font-size-xxxl;
}


// Text overflow
// Requires inline-block or block for proper styling
// =============================================================================

.@{ns}ellipsis,
.@{ns}text-truncate {
  word-wrap: normal; /* for IE */
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.@{ns}text-break {
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

.@{ns}text-nowrap {
  white-space: nowrap;
}


[class*='@{ns}align-'] {
  margin-bottom: 1rem;
}

.@{ns}align-left {
  margin-right: 1rem;
  float: left;
}

.@{ns}align-right {
  margin-left: 1rem;
  float: right;
}


/** Only display content to screen readers
 * See: http://a11yproject.com/posts/how-to-hide-content/
 */

.@{ns}sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}


/* Text Image Replacement */

.@{ns}text-ir {
  .text-hide();
}


/* Text align */

// Text align mixin
.text-align-variant(@point) {
  .@{ns}@{point}text-left {
    text-align: left !important;
  }

  .@{ns}@{point}text-right {
    text-align: right !important;
  }

  .@{ns}@{point}text-center {
    text-align: center !important;
  }

  .@{ns}@{point}text-justify {
    text-align: justify !important;
  }
}

@media @screen {
  .text-align-variant(~"");
}

@media @small-only {
  .text-align-variant(sm-only-);
}

@media @medium-only {
  .text-align-variant(md-only-);
}

@media @medium-up {
  .text-align-variant(md-);
}

@media @large-up {
  .text-align-variant(lg-);
}

.@{ns}text-top {
  vertical-align: top !important;
}

.@{ns}text-middle {
  vertical-align: middle !important;
}

.@{ns}text-bottom {
  vertical-align: bottom !important;
}


// angle
// ========================================================================

.@{ns}angle {
  position: absolute;
  .angle-base;
}

.@{ns}angle-up {
  top: 0;
  .angle-up-variant();
}

.@{ns}angle-down {
  .angle-down-variant();
}

.@{ns}angle-left {
  .angle-left-variant();
}

.@{ns}angle-right {
  .angle-right-variant();
}