Skip to content

Commit

Permalink
#6: RTL styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@robinpoort
robinpoort committed Jun 15, 2018
1 parent e13b0d9 commit f8e2eca
Show file tree
Hide file tree
Showing 8 changed files with 147 additions and 2 deletions.
2 changes: 2 additions & 0 deletions demo/gallery/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,6 +164,8 @@
<!-- Component -->
<form class="k-component k-js-component k-js-grid">

<div class="k-alert k-alert--success k-alert--fixed"> <button type="button" class="k-alert__close k-js-alert-close" title="Close" aria-label="Close">Close</button>You successfully read this important message</div>

<!-- Scopebar -->
<div class="k-scopebar k-js-scopebar">
<div class="k-dynamic-content-holder">
Expand Down
90 changes: 88 additions & 2 deletions demo/onepageapp/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -312,7 +312,7 @@
<div class="k-form-group k-form-group--large">
<div class="k-input-group k-input-group--large">
<label for="input-form-1" class="k-input-group__addon">Name</label>
<input id="input-form-1" class="k-form-control" type="text" placeholder="Title" value="Joomlatools" />
<input id="input-form-1" class="k-form-control" type="text" placeholder="Title" value="Form" />
</div>
</div>
</fieldset>
Expand Down Expand Up @@ -383,7 +383,93 @@

</div><!-- .k-subcontent__child -->

<div class="k-subcontent__child" id="form2">Form 2</div>
<!-- Sub content child -->
<div class="k-subcontent__child" id="form2">

<!-- Component wrapper -->
<div class="k-component-wrapper">

<!-- Component -->
<form class="k-component k-js-component">

<!-- Container -->
<div class="k-container">
<div class="k-container__full">
<fieldset>
<div class="k-form-group k-form-group--large">
<div class="k-input-group k-input-group--large">
<label for="input-form-2" class="k-input-group__addon">Name</label>
<input id="input-form-2" class="k-form-control" type="text" placeholder="Title" value="Another form" />
</div>
</div>
</fieldset>
</div>
</div><!-- .k-container -->

<!-- Tabs -->
<div class="k-tabs-container">
<div class="k-tabs-wrapper k-js-tabs-wrapper">
<div class="k-tabs-scroller k-js-tabs-scroller">
<ul class="k-tabs">
<li class="k-is-active">
<a href="#tab1" data-k-toggle="tab">Tab 1</a>
</li>
<li>
<a href="#tab2" data-k-toggle="tab">Tab 2</a>
</li>
<li class="k-is-disabled">
<a href="#tab3" data-k-toggle="tab">Tab 3 (disabled)</a>
</li>
</ul>
</div>
</div>
<div class="k-tabs-content">
<div id="tab1" class="k-tab k-is-active">
<div class="k-container">
<div class="k-container__main">
<fieldset>
<div class="k-form-group k-form-group--large">
<input class="k-form-control" type="text" placeholder="Title">
</div>
</fieldset>
</div>
<div class="k-container__sub">
<fieldset class="k-form-block">
<div class="k-form-block__header">
Publish
</div>
<div class="k-form-block__content">
<div class="k-form-group">
<div class="k-optionlist k-optionlist--boolean">
<div class="k-optionlist__content">
<input type="radio" name="group-[2.17.1]-1-" id="input-form-a" value="1">
<label for="input-form-a">True</label>
<input type="radio" name="group-[2.17.1]-1-" id="input-form-b" value="0" checked="checked">
<label for="input-form-b">False</label>
<div class="k-optionlist__focus"></div>
</div>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
<div id="tab2" class="k-tab">
Content tab 2
</div>
<div id="tab3" class="k-tab">
Content tab 3
</div>
</div>
</div><!-- .k-tabs-container -->

</form><!-- .k-component -->

</div><!-- .k-component-wrapper -->

</div><!-- .k-subcontent__child -->

<div class="k-subcontent__child" id="form3">Form 3</div>
<div class="k-subcontent__child" id="form4">Form 4</div>
<div class="k-subcontent__child" id="form5">Form 5</div>
Expand Down
5 changes: 5 additions & 0 deletions src/scss/site/molecules/_label.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,11 @@
border-radius: $k-site-label-border-radius;
text-decoration: $k-site-label-text-decoration;

@include rtl {
margin-left: 0;
margin-right: $k-site-label-margin-left;
}


/* Empty tags collapse automatically */

Expand Down
10 changes: 10 additions & 0 deletions src/scss/site/molecules/_list.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,10 +88,20 @@
right: 0;
height: 1px;
background: $k-site-list-bordered-pseudo-background;

@include rtl {
left: 0;
right: -999px;
}
}

.k-list__item {
padding-left: 1.5em;

@include rtl {
padding-left: 0.5em;
padding-right: 1.5em;
}
}
}
}
Expand Down
7 changes: 7 additions & 0 deletions src/scss/site/molecules/_table.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,13 @@
text-align: left;
}

@include rtl {
th,
td {
text-align: right;
}
}

thead th {
vertical-align: bottom;
border-bottom: (2 * $k-site-table-border-width) solid $k-site-table-border-color;
Expand Down
26 changes: 26 additions & 0 deletions src/scss/site/molecules/_toglr.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,11 @@
left: 0;
transition: transform .3s ease-in-out;
transform: rotate(-90deg);

@include rtl {
left: auto;
right: 0;
}
}

@include pseudo(after, false, $content: $k-site-toglr-togglers-after-content) {
Expand All @@ -29,6 +34,11 @@
transition: all .3s ease-in-out;
transform: translate(0, -200%);
opacity: 0;

@include rtl {
right: auto;
left: 0;
}
}

.k-toglr-label,
Expand All @@ -44,6 +54,14 @@
text-decoration: $k-site-toglr-togglers-hover-text-decoration;
}
}

@include rtl {
.k-toglr-label,
.k-toglr-open,
.k-toglr-close {
padding: 0 ($k-site-toglr-togglers-before-caret-size * 3) 0 ($k-site-toglr-togglers-after-font-size * 2);
}
}
}


Expand Down Expand Up @@ -97,6 +115,14 @@
padding: $k-site-section-border-padding calc(#{($k-site-toglr-togglers-after-font-size * 2)} + #{$k-site-section-border-padding}) $k-site-section-border-padding calc(#{($k-site-toglr-togglers-before-caret-size * 3)} + #{$k-site-section-border-padding});
}

@include rtl {
.k-toglr-label,
.k-toglr-open,
.k-toglr-close {
padding: $k-site-section-border-padding calc(#{($k-site-toglr-togglers-before-caret-size * 3)} + #{$k-site-section-border-padding}) $k-site-section-border-padding calc(#{($k-site-toglr-togglers-after-font-size * 2)} + #{$k-site-section-border-padding});
}
}

.k-toglr-body {
padding-top: $k-site-section-border-padding * 2;
}
Expand Down
4 changes: 4 additions & 0 deletions src/scss/site/molecules/_tree.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,10 @@

> .jqtree-tree > .jqtree_common > .jqtree-element {
padding-left: 0;

@include rtl {
padding-right: 0;
}
}

.jqtree-toggler {
Expand Down
5 changes: 5 additions & 0 deletions src/scss/site/utilities/_link-coverleft.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,11 @@
left: -100%;
bottom: 0;
background: transparent;

@include rtl {
right: -100%;
left: 100%;
}
}
}
}

0 comments on commit f8e2eca

Please sign in to comment.