Language And Currency¶
Use .language-and-currency element to style elements related to the language_and_currency module.
Structurally .language-and-currency contains following elements:
.language-and-currency__title.language-and-currency__description.language-and-currency__modal.language-and-currency__modal-body.language-and-currency__modal-opener.language-and-currency__label.language-and-currency__flag.language-and-currency__icon
And following modifiers:
.language-and-currency__modal-opener_horizontal
Example¶
Here is an example of language and currency element usage. We also used the language-and-currency webcomponent for presentation purposes.
HTML
<div class="language-and-currency">
<language-and-currency class="language-and-currency__modal-form">
<div class="language-and-currency__modal-form-opener">
<img src="/libraries/flags/pl_PL.png" alt="Flag" class="language-and-currency__flag" />
<div class="language-and-currency__label">polish / zł</div>
</div>
<div slot="languages">
<p class="font_size-s">Languages</p>
<div class="radio-box-group">
<div class="radio-box radio-box-group__radio-box">
<input
type="radio"
id="language-radio-box-1"
name="language-and-currency-language"
value="/pl/index"
class="radio-box__input"
checked
>
<label class="radio-box__label" for="language-radio-box-1">
<img
src="/libraries/flags/pl_PL.png"
alt="Flag"
class="language-and-currency__flag"
>
Polish / Poland
</label>
</div>
<div class="radio-box radio-box-group__radio-box">
<input
type="radio"
id="language-radio-box-2"
name="language-and-currency-language"
value="/en_US/index"
class="radio-box__input"
>
<label class="radio-box__label" for="language-radio-box-2">
<img
src="/libraries/flags/en_US.png"
alt="Flag"
class="language-and-currency__flag"
>
English / United States
</label>
</div>
</div>
</div>
<div slot="currencies">
<p class="font_size-s">Currencies</p>
<div class="radio-box-group">
<div class="radio-box radio-box-group__radio-box">
<input
type="radio"
id="currency-radio-box-1"
name="language-and-currency-currency"
value="PLN"
class="radio-box__input"
checked
>
<label class="radio-box__label" for="currency-radio-box-1">
PLN - Polish Zloty (zł)
</label>
</div>
<div class="radio-box radio-box-group__radio-box">
<input
type="radio"
id="currency-radio-box-2"
name="language-and-currency-currency"
value="USD"
class="radio-box__input"
>
<label class="radio-box__label" for="currency-radio-box-2">
USD - US Dollar ($)
</label>
</div>
</div>
</div>
</language-and-currency>
</div>
Language and currency tags¶
The .language-and-currency classes were designed to be used with block elements like <div>. However, you can use them with any other element and customize it to your own needs.
LESS¶
You can modify any language and currency less variable in your User Less section to change language and currency styles.
Language and currency variables¶
Variables used to style language and currency.
@languageAndCurrencyMaxWidth: 640px;
@languageAndCurrencyModalBodyRowGap: 40;
@languageAndCurrencyModalBodyPaddingBottom: 2;
@languageAndCurrencyModalFormOpenerHorizontalColumnGap: @globalSpacing / 2;
@languageAndCurrencyFlagWidth: 26;
@languageAndCurrencyFlagHeight: 16;
@languageAndCurrencyFlagBorderRadius: 2px;
@languageAndCurrencyIconStroke: @globalFontColorSecondary;
@languageAndCurrencyModalHeaderFontSize: @fontSizeInPxL;
If you want to change language and currency styles, you can just change the variables. To change a default max-width just modify @languageAndCurrencyMaxWidth variable.
Language and currency standard styles¶
Here are standard language and currency styles.
.language-and-currency {
width: fit-content;
max-width: @languageAndCurrencyMaxWidth;
&__modal {
&-body {
display: flex;
flex-direction: column;
.pixel-to-rem(row-gap, @languageAndCurrencyModalBodyRowGap);
.pixel-to-rem(padding-bottom, @languageAndCurrencyModalBodyPaddingBottom);
}
&-opener {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
&_horizontal {
column-gap: @languageAndCurrencyModalFormOpenerHorizontalColumnGap;
flex-direction: row;
}
}
}
&__label {
display: flex;
}
&__flag {
.pixel-to-rem(width, @languageAndCurrencyFlagWidth);
.pixel-to-rem(height, @languageAndCurrencyFlagHeight);
border-radius: @languageAndCurrencyFlagBorderRadius;
}
&__icon {
stroke: @languageAndCurrencyIconStroke;
}
}
@media (min-width: @breakPointXs) {
.language-and-currency {
&__modal {
&-header {
.font-size(@languageAndCurrencyModalHeaderFontSize);
}
}
}
}