xmeter/css/src/__tool.border-radius.less

A default stylesheet with a set of tools that make designing with vertical rhythm easy.

/*################################*\
    xmeter  |  __tool.border-radius.less
\*################################*/


// Shortcuts for setting `border-radius` on two corners of the same side of a box.
// Also supports two values, for horizontal/vertical components.
//
// Examples:
// - `.border-left-radius(5%)` will do:
//   - `border-top-left-radius: 5%;`
//   - `border-bottom-left-radius: 5%;`
// - `.border-left-radius(5px 10px)` will do:
//   - `border-top-left-radius: 5px 10px;`
//   - `border-bottom-left-radius: 5px 10px;`
//
// ^params
// @radius - (default: 0) the value of the border radius
//         - one-value syntax: the horizontal and vertical value
//         - two-value syntax, space-separated: the horizontal value, then vertical value
// ^author
// : Chris Harvey
// ^updated
// : 2017-11-28

.border-left-radius(@radius: 0) {
  border-top-left-radius:    @radius;
  border-bottom-left-radius: @radius;
}

.border-right-radius(@radius: 0) {
  border-top-right-radius:    @radius;
  border-bottom-right-radius: @radius;
}

.border-top-radius(@radius: 0) {
  border-top-left-radius:  @radius;
  border-top-right-radius: @radius;
}

.border-bottom-radius(@radius: 0) {
  border-bottom-right-radius: @radius;
  border-bottom-left-radius:  @radius;
}

// Logical Properties below

.border-block-start-radius(@radius: 0) {
  border-start-start-radius: @radius;
  border-start-end-radius:   @radius;
}

.border-block-end-radius(@radius: 0) {
  border-end-start-radius: @radius;
  border-end-end-radius:   @radius;
}

.border-inline-start-radius(@radius: 0) {
  border-start-start-radius: @radius;
  border-end-start-radius:   @radius;
}

.border-inline-end-radius(@radius: 0) {
  border-start-end-radius: @radius;
  border-end-end-radius:   @radius;
}