Ois 24 test rtl

config.json

@@ -15,5 +15,6 @@
   "applicationTitle": "SIGECA",
   "defaultLanguage": "pt",
   "showRequisitionLessOrder": "true",
-  "PRODUCTION_INSTANCE":false
+  "PRODUCTION_INSTANCE":false,
+  "supportedRTLLanguages": ["pt"]
 }

src/common/_breadcrumbs.scss

@@ -0,0 +1,55 @@
+/*
+Breadcrumbs
+
+Every OpenLMIS page should have breadcrumbs at the top, allowing the user to
+understand where they are in the application, and go back to a previous page.
+
+markup:
+<ol class="breadcrumb">
+  <li><a href="#">Administration</a></li>
+  <li><a href="#">Programs</a></li>
+  <li class="active">Maternal and Child Health</li>
+</ol>
+
+
+Styleguide 2.1
+*/
+@mixin breadcrumb-no-before() {
+    [dir="ltr"] & {
+        > li:first-child {
+			&::before {
+				display: none;
+			}
+		}
+    }
+    [dir="rtl"] & {
+        > li:first-child {
+			&::before {
+				display: none;
+			}
+		}
+    }
+}
+
+@mixin breadcrumb-before-content() {
+    [dir="ltr"] & {
+        content: '/ ';
+    }
+    [dir="rtl"] & {
+        content: '\\ ';
+    }
+}
+
+.breadcrumb {
+	background-color: transparent;
+	padding: $space-size/4 0px;
+	margin-bottom: 0px;
+	> li {
+		&::before{
+			@include breadcrumb-before-content();
+			padding: 0px 0.5em;
+		}
+	}
+
+	@include breadcrumb-no-before();
+}

src/common/_buttons.scss

@@ -0,0 +1,182 @@
+@import './mixins';
+
+/*
+Buttons
+
+Buttons represent taking an action in OpenLMIS, juxoposed to a link which
+represents navigating through OpenLMIS. Most of the buttons should be the
+default color presented in section 1.1, with the exception of an edit action,
+cancel, warning and disabled buttons. Disabled buttons are a little bit faded
+in comparison with their enabled equivalents. They usually contain text, but
+may also consist of the image and text.
+
+Buttons should marked up using semantic HTML, where the HTML element is button.
+
+*Note:* `<input type="submit" />` and `<input type="button" />` elements will also be styled as buttons.
+
+### Button Groups
+Buttons that change the state of an object or screen in the UI should always be
+on the right side of the screen. All other buttons should be pulled to the left.
+There should only be a single primary button per screen or pane.
+
+<div class="button-group">
+  <button type="button">Default Button</button>
+  <button disabled="true" type="button">Default Button</button>
+  <button class="primary" type="button">Default Button</button>
+  <button class="danger" type="button">Remove Button</button>
+  <button class="add" type="button">Add Button</button>
+</div>
+
+Button groups are semantic grouping of actions for a specific task or item, if
+buttons don't act on the same object, they should not be grouped together.
+Unless marked as part of a button group, all buttons are block level and take
+up their own vertical space.
+
+<div class="button-group">
+  <div class="button-group primary">
+    <button class="primary">Primary Button</button>
+    <button class="danger">Delete Button</button>
+  </div>
+  <div class="button-group">
+    <button>Cancel Button</button>
+    <a>Inline Link</a>
+  </div>
+  <div class="button-group primary">
+    <button>Another Action</button>
+  </div>
+</div>
+
+### Close Button
+<aside>
+  <button class="close">Close</button>
+  The only exception to these rules is the close button that must always be shown
+  in the right hand corner of popovers and modal windows (if they are closable).
+</aside>
+
+### Button Icons
+Only add icons to buttons through CSS. All buttons must have text that is
+accessiable by a screen reader, see button grammar guidelines for rules about
+how button text should be phrased. See `button.close` for an example.
+
+### Toggle Button
+Toggle can be used to give user an option of seeing certain elements in different ways.
+<div class="button-toggle" ng-init="selected = 'one';">
+    <label ng-class="{'selected': selected === 'one'}">
+        <input ng-model="selected" value="one" type="radio">Option one
+    </label>
+    <label ng-class="{'selected': selected === 'two'}">
+        <input ng-model="selected" value="two" type="radio">Option two
+    </label>
+    <label ng-class="{'selected': selected === 'three'}">
+        <input ng-model="selected" value="three" type="radio">Option three
+    </label>
+</div>
+
+Styleguide 1.3
+*/
+
+$button-color-default: $light-gray !default;
+$button-color-primary: $link-color !default;
+$button-color-danger: $brand-danger !default;
+
+button {
+    @include button($button-color-default);
+
+    &.primary {
+        @include button($button-color-primary);
+    }
+
+    &.danger {
+        @extend button.primary;
+        @include button($button-color-danger);
+    }
+
+    &.add {
+        @extend button.primary;
+        @include button($button-color-default);
+        @include button-icon('plus');
+    }
+
+    &.edit {
+        @extend button.primary;
+        @include button-icon('pencil-square-o');
+        display: flex !important;
+    }
+}
+
+button.close {
+    @include button-icon-only("times");
+    background: transparent;
+    color: $text-color;
+}
+
+.button-group {
+    @extend .clearfix;
+    margin-left: -0.5em;
+    margin-right: -0.5em;
+
+    > *,
+    > button {
+        display: block;
+        margin: 0px 0.5em;
+        @include float(left);
+    }
+
+    > .is-primary,
+    > .button-group.primary,
+    > button.primary {
+        @include float(right);
+    }
+
+    > a {
+        padding: 0.5em 0em;
+    }
+
+    > .button-group {
+        margin: 0px;
+    }
+}
+
+.button-toggle {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+
+    > label {
+        @include button($button-color-default);
+
+        &:hover {
+            cursor: pointer;
+        }
+
+        > input {
+            display: none;
+        };
+
+        &.selected {
+            @include button($button-color-primary);
+        }
+
+        &:not(:first-child) {
+          @include border-left-radius(0);
+        }
+        &:not(:last-child) {
+          @include border-right-radius(0);
+        }
+    }
+}
+
+.btn,
+input[type=button] {
+    @extend button;
+}
+
+.btn-primary,
+input[type=submit] {
+    @extend button.primary;
+}
+
+.btn-add,
+input[type=submit].add {
+    @extend button.add;
+}

src/common/_icon.mixins.scss

@@ -0,0 +1,44 @@
+
+@mixin icon($icon) {
+    @extend .fa-#{$icon};
+    font-family: $font-family;
+    &::before {
+        font-family: FontAwesome;
+        display: inline-block;
+    }
+}
+
+@mixin icon-only($icon) {
+    @include icon($icon);
+    overflow: hidden;
+    display: inline-block;
+    position: relative;
+    font-size: 1em;
+    width: 1.2em;
+    height: 1.2em;
+    text-indent: -20000em;
+    &::before {
+        position: absolute;
+        top: 50%;
+        @include left(50%);
+        text-indent: 0em;
+        @include translate-xy(-50%, -50%);
+    }
+}
+
+@mixin button-icon-only($icon) {
+    @include icon-only($icon);
+    width: 2em;
+    height: 2em;
+    line-height: 2em;
+    &::before {
+        line-height: 2em;
+    }
+}
+
+@mixin button-icon($icon) {
+    @include icon($icon);
+    &::before {
+        @include margin-right(.5em);
+    }
+}

src/common/_layout.scss

@@ -7,6 +7,9 @@ navigation and readability.
 Styleguide 2.0
 */
 
+* {
+    @include direction();
+}
 
 html {
     height: 100%;
@@ -99,8 +102,8 @@ body {
 
     .sidebar {
         width: $sidebar-width;
-        float: left;
-        margin-right: $margin;
+        @include float(left);
+        @include margin-right($margin);
 
         .select2 {
             // sidebar width minus right margin