ohayolibs/packages/theme/system/utils/_display.less

Ohayo is a set of essential modules for ohayojp.

/**
 * 隐藏元素
 * Turns off the display of an element
 */
.d-none {
  display: none !important;
}

/**
 * 块级元素，此元素前后会带有换行符
 * The element generates a block element box, generating line breaks both before and after the element when in the normal flow.
 */
.d-block {
  display: block !important;
}

/**
 * 内联元素，元素前后没有换行符
 * The element generates one or more inline element boxes that do not generate line breaks before or after themselves
 */
.d-inline-block {
  display: inline-block !important;
}

/**
 * 设置弹性盒模型 `flex`
 * The element behaves like a block element and lays out its content according to the flexbox model
 */
.d-flex {
  display: flex !important;
}

/**
 * 设置弹性盒模型 `flex`，并使用内联元素
 * The element behaves like an inline element and lays out its content according to the flexbox model
 */
.d-inline-flex {
  display: inline-flex !important;
}

.justify-content-start {
  justify-content: flex-start !important;
}
.justify-content-end {
  justify-content: flex-end !important;
}
.justify-content-center {
  justify-content: center !important;
}
.justify-content-between {
  justify-content: space-between !important;
}
.justify-content-around {
  justify-content: space-around !important;
}

.align-items-start {
  align-items: flex-start !important;
}
.align-items-end {
  align-items: flex-end !important;
}
.align-items-center {
  align-items: center !important;
}
.align-items-baseline {
  align-items: baseline !important;
}
.align-items-stretch {
  align-items: stretch !important;
}

.align-content-start {
  align-content: flex-start !important;
}
.align-content-end {
  align-content: flex-end !important;
}
.align-content-center {
  align-content: center !important;
}
.align-content-between {
  align-content: space-between !important;
}
.align-content-around {
  align-content: space-around !important;
}
.align-content-stretch {
  align-content: stretch !important;
}

.align-self-auto {
  align-self: auto !important;
}
.align-self-start {
  align-self: flex-start !important;
}
.align-self-end {
  align-self: flex-end !important;
}
.align-self-center {
  align-self: center !important;
}
.align-self-baseline {
  align-self: baseline !important;
}
.align-self-stretch {
  align-self: stretch !important;
}

.flex-1 {
  flex: 1 !important;
}
.flex-column {
  flex-direction: column !important;
}
.flex-column-reverse {
  flex-direction: column-reverse !important;
}
.flex-wrap {
  flex-wrap: wrap !important;
}
.flex-nowrap {
  flex-wrap: nowrap !important;
}
.flex-shrink-0 {
  flex-shrink: 0 !important;
}
.flex-shrink-1 {
  flex-shrink: 1 !important;
}
.flex-grow-0 {
  flex-grow: 0 !important;
}
.flex-grow-1 {
  flex-grow: 1 !important;
}

/**
 * 垂直并居中
 * Vertical and centered
 */
.flex-center {
  display: flex !important;
  align-items: center !important;
}

/**
 * 垂直并居中，且主轴元素之间留有空白（例如：两个元素分别在左右两边，中间留空）
 * Vertical and centered, and there is a space between the main axis elements (for example: the two elements are on the left and right sides, and the middle is left blank)
 */
.flex-center-between {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}