Bulma LTR Property
Last Updated :
19 Oct, 2022
In this article, we will learn about the Bulma LTR property. The LTR property is a direction mixin that is used not only to quickly switch between left and right CSS properties. But also allows users to set the positioning CSS property.
Bulma LTR Property class: For creating a mixin, no specific class is provided by Bulma, instead we can create our class and then style the element with the help of SASS mixins.
Syntax:
<div class="bulma-ltr-property-mixin">
//statement
</div>
.bulma-ltr-property-mixin
{
@include ltr-property($property, $spacing, $right);
}
Parameters: This mixin accepts three parameters which are defined as follows:
- $spacing: This parameter of the LTR property is used to define the value of the offset.
- $right: This parameter of the LTR property is used to define if the property outputs right (default) or left.
Note: You must know the implementation of SASS mixins for the below examples. Please see the pre-requisite given on the link and then implement the below code.
Example 1: Below example illustrates the Bulma LTR property mixin.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< link rel = "stylesheet" href =
< script src =
</ script >
< link rel = "stylesheet" href = "style.css" >
</ head >
< body class = "content container has-text-centered" >
< div >
< h1 class = "title is-1 has-text-success" >
GeekforGeeks
</ h1 >
< h1 class = "subtitle" >Bulma LTR Position Mixins</ h1 >
</ div >
< div class = "bulma-ltr-position-mixin-parent" >
< img class = "bulma-ltr-position-mixin"
height = "120"
width = "120"
src =
< p >GeeksforGeeks | A computer science portal for geeks.</ p >
</ div >
</ body >
</ html >
|
CSS code:
CSS
$rtl: false;
$ltr: true;
@mixin ltr-property($property, $spacing, $ right : true) {
$normal: if($ right , "right" , "left" );
$opposite: if($ right , "left" , "right" );
@if $ rtl {
#{$property}-#{$opposite}: $spacing
}
@else
{
#{$property}-#{$ normal }: $spacing
}
}
.bulma-ltr-property-mixin
{
@include ltr-property( "margin" , 10px , false);
border-radius: 0.25em ;
position : absolute ;
}
|
Output:
Example 2: Below is another example that illustrates the Bulma LTR Position mixin.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< link rel = "stylesheet" href =
< script src =
</ script >
< link rel = "stylesheet" href = "style.css" >
</ head >
< body class = "content container has-text-centered" >
< div >
< h1 class = "title is-1 has-text-success" >
GeekforGeeks
</ h1 >
< h1 class = "subtitle" >Bulma LTR Position Mixins</ h1 >
</ div >
< div class = "bulma-ltr-position-mixin-parent" >
< img class = "bulma-ltr-position-mixin"
height = "120"
width = "120"
src =
< p >GeeksforGeeks | A computer science portal for geeks.</ p >
</ div >
</ body >
</ html >
|
CSS code:
CSS
$rtl: true;
$ltr: false;
@mixin ltr-position($spacing, $ right : true)
{
$normal: if($ right , "right" , "left" );
$opposite: if($ right , "left" , "right" );
@if $ rtl {
#{$opposite}: $spacing;
}
@else {
#{$ normal }: $spacing;
}
}
.bulma-ltr-position-mixin
{
@include ltr-position( 1 rem, false);
border-radius: 0.25em ;
position : absolute ;
top : 1 rem;
}
|
Output:
Reference: https://bulma.io/documentation/utilities/mixins/#ltr-property
Share your thoughts in the comments
Please Login to comment...