Skip to content

Commit

Permalink
fix: add rtl support for mobile mode (#382)
Browse files Browse the repository at this point in the history 
* fix: add rtl support for mobile mode

* added empty line to trigger the build again

* added empty line to trigger the build again
  • Loading branch information
@InnaAtanasova
InnaAtanasova committed Oct 24, 2019
1 parent 1c92f1f commit 707b989
Show file tree
Hide file tree
Showing 2 changed files with 118 additions and 0 deletions.
107 changes: 107 additions & 0 deletions docs/pages/components/product-switch.md
View file
Expand Up @@ -388,3 +388,110 @@ Add the modifier class `fd-product-switch__body--mobile` for a list layout.
</div>
{% endcapture %}
{% include display-component.html component=product-switch-body-mobile %}


<br>

## Product Switch - Smallest Screen, RTL

{% capture product-switch-body-mobile %}
<div style="width:450px;" dir="rtl">
<div class="fd-product-switch__body fd-product-switch__body--mobile">
<ul class="fd-product-switch__list">
<li class="fd-product-switch__item" tabindex="0">
<div class="fd-product-switch__icon sap-icon--home"></div>
<div class="fd-product-switch__text">
<div class="fd-product-switch__title">Home</div>
<div class="fd-product-switch__subtitle">Central Home</div>
</div>
</li>
<li class="fd-product-switch__item selected" tabindex="0">
<div class="fd-product-switch__icon sap-icon--business-objects-experience"></div>
<div class="fd-product-switch__text">
<div class="fd-product-switch__title">Analytics Cloud</div>
<div class="fd-product-switch__subtitle">Analytics Cloud</div>
</div>
</li>
<li class="fd-product-switch__item" tabindex="0">
<div class="fd-product-switch__icon sap-icon--contacts"></div>
<div class="fd-product-switch__text">
<div class="fd-product-switch__title">Catalog</div>
<div class="fd-product-switch__subtitle">Ariba</div>
</div>
</li>
<li class="fd-product-switch__item" tabindex="0">
<div class="fd-product-switch__icon sap-icon--credit-card"></div>
<div class="fd-product-switch__text">
<div class="fd-product-switch__title">Guided Buying</div>
</div>
</li>
<li class="fd-product-switch__item" tabindex="0">
<div class="fd-product-switch__icon sap-icon--cart-3"></div>
<div class="fd-product-switch__text">
<div class="fd-product-switch__title">Strategic Procurement</div>
</div>
</li>
<li class="fd-product-switch__item" tabindex="0">
<div class="fd-product-switch__icon sap-icon--flight"></div>
<div class="fd-product-switch__text">
<div class="fd-product-switch__title">Travel & Expense</div>
<div class="fd-product-switch__subtitle">Concur</div>
</div>
</li>
<li class="fd-product-switch__item" tabindex="0">
<div class="fd-product-switch__icon sap-icon--shipping-status"></div>
<div class="fd-product-switch__text">
<div class="fd-product-switch__title">Vendor Management</div>
<div class="fd-product-switch__subtitle">Fieldglass</div>
</div>
</li>
<li class="fd-product-switch__item" tabindex="0">
<div class="fd-product-switch__icon sap-icon--customer"></div>
<div class="fd-product-switch__text">
<div class="fd-product-switch__title">Human Capital Management</div>
</div>
</li>
<li class="fd-product-switch__item" tabindex="0">
<div class="fd-product-switch__icon sap-icon--sales-notification"></div>
<div class="fd-product-switch__text">
<div class="fd-product-switch__title">Sales Cloud</div>
<div class="fd-product-switch__subtitle">Sales Cloud</div>
</div>
</li>
<li class="fd-product-switch__item" tabindex="0">
<div class="fd-product-switch__icon sap-icon--retail-store"></div>
<div class="fd-product-switch__text">
<div class="fd-product-switch__title">Commerce Cloud</div>
<div class="fd-product-switch__subtitle">Commerce Cloud</div>
</div>
</li>
<li class="fd-product-switch__item" tabindex="0">
<div class="fd-product-switch__icon sap-icon--marketing-campaign"></div>
<div class="fd-product-switch__text">
<div class="fd-product-switch__title">Marketing Cloud</div>
<div class="fd-product-switch__subtitle">Marketing Cloud</div>
</div>
</li>
<li class="fd-product-switch__item" tabindex="0">
<div class="fd-product-switch__icon sap-icon--family-care"></div>
<div class="fd-product-switch__text">
<div class="fd-product-switch__title">Service Cloud</div>
</div>
</li>
<li class="fd-product-switch__item" tabindex="0">
<div class="fd-product-switch__icon sap-icon--customer-briefing"></div>
<div class="fd-product-switch__text">
<div class="fd-product-switch__title">Customer Data Cloud</div>
</div>
</li>
<li class="fd-product-switch__item" tabindex="0">
<div class="fd-product-switch__icon sap-icon--batch-payments"></div>
<div class="fd-product-switch__text">
<div class="fd-product-switch__title">S/4HANA</div>
</div>
</li>
</ul>
</div>
</div>
{% endcapture %}
{% include display-component.html component=product-switch-body-mobile %}
11 changes: 11 additions & 0 deletions src/product-switch.scss
View file
Expand Up @@ -104,6 +104,17 @@ $block: #{$fd-namespace}-product-switch;
margin-bottom: 0;
margin-right: 0.75rem;
}

@include fd-rtl() {
.#{$block}__icon {
margin-right: 0;
margin-left: 0.75rem;
}

.#{$block}__text {
align-items: flex-start;
}
}
}

&__list {
Expand Down

0 comments on commit 707b989

Please sign in to comment.