[SCSS] common.scss

PC

/****************************************************************************
    common                                  https://getbootstrap.com 참고함
****************************************************************************/
/* display */
.d-flex  {display:flex}
.d-block  {display:block}

/* flex */
.flex-column {flex-direction:column}
.justify-content-between {justify-content:space-between}
.justify-content-center {justify-content:center}
.align-items-center {align-items:center}

/* float */
.float-start {float:left !important}
.float-end {float:right !important}
.float-none {float:none !important}
.clear-start {clear:left !important}
.clear-end {clear:right !important}
.clear-both {clear:both !important}

/* position */
.position-relative {position:relative}
.position-absolute {position:absolute}
.position-fixed {position:fixed}

/* Text alignment */
.text-left {text-align:left !important}
.text-center {text-align:center !important}
.text-right {text-align:right !important}

/* margin */
.m {
    $value: t top, r right, b bottom, l left;
    @each $class, $name in $value {
        @for $i from 0 through 100 {
            $margin : $i * 5;
            &#{$class+"-"+$margin} {
                #{"margin-"+$name}:#{$margin}px !important;
            }
        }
    }
}
.mx-auto {margin:0 auto}

/* padding */
.p {
    $value: t top, r right, b bottom, l left;
    @each $class, $name in $value {
        @for $i from 0 through 100 {
            $margin : $i * 5;
            &#{$class+"-"+$margin} {
                #{"padding-"+$name}:#{$margin}px !important;
            }
        }
    }
}

/* Text alignment */
.text-left {text-align:left !important}
.text-center {text-align:center !important}
.text-right {text-align:right !important}

/* color */
.color {
    $value: #ffffff, #ff0000, #ff6815, #f47557, #ffd200, #212e50;
    @each $hexCode in $value {
        $class: str-slice(#{$hexCode}, 2, 7);
        &#{"-"+$class} {
            color:#{$hexCode};
        }
    }
}

/* line-height */ 
.lh {    
    @for $i from 0 through 100 {        
        &#{"-"+$i} {
            line-height:#{$i * 0.1}em !important;
        }
    }    
}

/* images */
.img-fluid {max-width:100%;height:auto;vertical-align:middle}

/* cursor & pointer-event */ 
.pointer-none {pointer-events:none !important}

 

MOBILE

/****************************************************************************
    common                                  https://getbootstrap.com 참고함
****************************************************************************/
/* display */
.d-flex  {display:flex}
.d-block  {display:block}

/* flex */
.flex-column {flex-direction:column}
.justify-content-between {justify-content:space-between}
.justify-content-center {justify-content:center}
.align-items-center {align-items:center}

/* float & clear */
.float-start {float:left !important}
.float-end {float:right !important}
.float-none {float:none !important}
.clear-start {clear:left !important}
.clear-end {clear:right !important}
.clear-both {clear:both !important}

/* position */
.position-relative {position:relative}
.position-absolute {position:absolute}
.position-fixed {position:fixed}

/* margin */
.m {
    $value: t top, r right, b bottom, l left;
    @each $class, $name in $value {
        @for $i from 0 through 100 {
            $margin : $i * 0.1;
            &#{$class+"-"+$i} {
                #{"margin-"+$name}:#{$margin}vw !important;
            }
        }
    }
}
.mx-auto {margin:0 auto}

/* padding */
.p {
    $value: t top, r right, b bottom, l left;
    @each $class, $name in $value {
        @for $i from 0 through 100 {
            $margin : $i * 0.1;
            &#{$class+"-"+$i} {
                #{"padding-"+$name}:#{$margin}vw !important;
            }
        }
    }
}

/* Text alignment */
.text-left {text-align:left !important}
.text-center {text-align:center !important}
.text-right {text-align:right !important}

/* color */
.color {
    $value: #ffffff, #000000, #008ed4,;
    @each $hexCode in $value {
        $class: str-slice(#{$hexCode}, 2, 7);
        &#{"-"+$class} {
            color:#{$hexCode};
        }
    }
}

/* line-height */ 
.lh {    
    @for $i from 0 through 100 {        
        &#{"-"+$i} {
            line-height:#{$i * 0.1}em !important;
        }
    }    
}

/* images */
.img-fluid {max-width:100%;height:auto;vertical-align:middle}