@talentsoft-opensource/hylia/utilities/helpers.less

The Hylia design systems. Contains all the building blocks style rules for Talentsoft.

/**
Helpers for size
 */
.w-100 {
    width: 100%;
}

.w-50 {
    width: 50%;
}

/**
Helpers for Margin
 */
.mt-20 {
    margin-top: @gutter;
}

.ml-20 {
    margin-left: @gutter;
}

.mr-20 {
    margin-right: @gutter;
}

.mb-20 {
    margin-bottom: @gutter;
}

/**
Helpers for Padding
 */
.pt-20 {
    padding-top: @gutter;
}

.pl-20 {
    padding-left: @gutter;
}

.pr-20 {
    padding-right: @gutter;
}

.pb-20 {
    padding-bottom: @gutter;
}

/**
Delete margin  & Padding
 */
.no-padding {
    padding: 0;
}

.no-margin {
    margin: 0;
}

/**
Border
 */
.border {
    border: .1rem solid @apprentice;

    &--top-none{
        border-top: none;
    }

    &--bottom-none{
        border-bottom: none;
    }

    &--left-none{
        border-left: none;
    }

    &--right-none{
        border-right: none;
    }
}

.border-radius {
    border-radius: @radius;

    &--tl-none{
        border-top-left-radius: none;
    }

    &--tr-none{
        border-top-right-radius: none;
    }

    &--bl-none{
        border-bottom-left-radius: none;
    }

    &--br-none{
        border-bottom-right-radius: none;
    }

    &--top{
        border-top-right-radius: @radius;
        border-top-left-radius: @radius;
    }

    &--bottom{
        border-bottom-right-radius: @radius;
        border-bottom-left-radius: @radius;
    }
}

/**
Helpers for grid
 */
.d-flex {
    display: flex;
}

.d-inline-flex {
    display: inline-flex;
}

.flex-row {
    flex-direction: row;
}

.flex-column {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.justify-content-start {
    justify-content: flex-start;
}

.justify-content-end {
    justify-content: flex-end;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-between {
    justify-content: space-between;
}

.justify-content-around {
    justify-content: space-around;
}

.align-items-start {
    align-items: flex-start;
}

.align-items-end {
    align-items: flex-end;
}

.align-items-center {
    align-items: center;
}

.align-items-baseline {
    align-items: baseline;
}

.align-items-stretch {
    align-items: stretch;
}

.align-content-start {
    align-content: flex-start;
}

.align-content-end {
    align-content: flex-end;
}

.align-content-center {
    align-content: center;
}

.align-content-between {
    align-content: space-between;
}

.align-content-around {
    align-content: space-around;
}

.align-content-stretch {
    align-content: stretch;
}

.align-self-auto {
    align-self: auto;
}

.align-self-start {
    align-self: flex-start;
}

.align-self-end {
    align-self: flex-end;
}

.align-self-center {
    align-self: center;
}

.align-self-baseline {
    align-self: baseline;
}

.align-self-stretch {
    align-self: stretch;
}

/**
Helpers alignment
 */
.text {
    &--center {
        text-align: center;
    }

    &--left {
        text-align: left;
    }

    &--right {
        text-align: right;
    }
}