From 728f8da84127c46cd07d532e25a9436561523a4c Mon Sep 17 00:00:00 2001 From: DominikNoga Date: Mon, 9 Sep 2024 15:01:46 +0200 Subject: [PATCH] OIS-24: applied mixins in order to support RTL --- .../AdminBuqForm/_admin-buq-form.scss | 6 +- .../AdminBuqPage/_admin-buq-page.scss | 25 +- src/admin-buq/components/Modal/_modal.scss | 14 +- src/admin-data-import/_admin-data-import.scss | 5 +- src/admin-role-form/_type-form.scss | 2 +- src/admin-user-form/_user-password-modal.scss | 2 +- src/buq/_buq.scss | 8 +- .../_createAuthorizeForecasting.scss | 2 +- .../prepareBuq/_prepare-buq-page.scss | 20 +- src/openlmis-header/_header.scss | 250 +++++++++--------- src/openlmis-home/_home.scss | 4 +- 11 files changed, 171 insertions(+), 167 deletions(-) diff --git a/src/admin-buq/components/AdminBuqForm/_admin-buq-form.scss b/src/admin-buq/components/AdminBuqForm/_admin-buq-form.scss index 9e1e44a7..77129ea8 100644 --- a/src/admin-buq/components/AdminBuqForm/_admin-buq-form.scss +++ b/src/admin-buq/components/AdminBuqForm/_admin-buq-form.scss @@ -1,3 +1,5 @@ +@import '../../../common/mixins'; + $accent-color: #49baeb; $light-grey: #bebebe; @@ -77,10 +79,10 @@ $light-grey: #bebebe; content: "\f06a"; font-family: FontAwesome; display: inline-block; - margin-left: -2em; + @include margin-left(-2em); margin-top: 0.5em; position: fixed; - text-align: right; + @include text-align(right); } } diff --git a/src/admin-buq/components/AdminBuqPage/_admin-buq-page.scss b/src/admin-buq/components/AdminBuqPage/_admin-buq-page.scss index ed9da4e4..cbec6c31 100644 --- a/src/admin-buq/components/AdminBuqPage/_admin-buq-page.scss +++ b/src/admin-buq/components/AdminBuqPage/_admin-buq-page.scss @@ -1,5 +1,4 @@ .admin-buq { - .admin-buq-row { display: flex; flex-direction: row; @@ -9,7 +8,7 @@ margin-right: 0px; } - .admin-buq-main { + .admin-buq-main { overflow: auto; display: flex; flex-direction: column; @@ -27,9 +26,9 @@ padding: 1em 2em; .breadcrumb { - padding-left: 0; - padding-top: 0; - font-size: 14px; + @include padding-left(0); + padding-top: 0; + font-size: 14px; } } @@ -40,23 +39,23 @@ } .admin-buq-navigation { - border-bottom: #D9D9D9 1px solid; + border-bottom: #d9d9d9 1px solid; margin-bottom: 1em; list-style: none; display: flex; - padding-left: 0; + @include padding-left(0); .admin-buq-link { - background-color: #E4E4E4; + background-color: #e4e4e4; padding: 10px 15px; border-radius: 4px 4px 0 0; - margin-right: 2px; + @include margin-right(2px); cursor: pointer; } .admin-buq-link.active { - background-color: #FFFFFF; - border: #D9D9D9 1px solid; + background-color: #ffffff; + border: #d9d9d9 1px solid; border-bottom: none; color: $link-color; } @@ -84,8 +83,8 @@ } .admin-buq-table-add-button { - margin-right: 5px; - margin-left: auto; + @include margin-right(5px); + @include margin-left(auto); } } diff --git a/src/admin-buq/components/Modal/_modal.scss b/src/admin-buq/components/Modal/_modal.scss index 29f3d09c..a44f994e 100644 --- a/src/admin-buq/components/Modal/_modal.scss +++ b/src/admin-buq/components/Modal/_modal.scss @@ -1,28 +1,28 @@ .modal { position: fixed; top: 0; - left: 0; + @include left(0); width:100%; height: 100%; background: rgba(0, 0, 0, 0.6); } - + .modal-main { position:fixed; background: white; height: auto; top:50%; - left:50%; - transform: translate(-50%,-50%); + @include left(50%); + //TODO: apply here a mixin once the ui-components is merged translate-xy(-50%,-50%); + transform: translate(-50%, -50%); width: 600px; margin: 30px auto; } - + .display-block { display: block; } - + .display-none { display: none; } - \ No newline at end of file diff --git a/src/admin-data-import/_admin-data-import.scss b/src/admin-data-import/_admin-data-import.scss index 67671631..63b4bfdb 100644 --- a/src/admin-data-import/_admin-data-import.scss +++ b/src/admin-data-import/_admin-data-import.scss @@ -69,10 +69,7 @@ input::file-selector-button { display: block; padding: 8px 16px; border-radius: 4px; - border-top: #e4e4e4 1px solid; - border-right: #e4e4e4 1px solid; - border-left: #e4e4e4 1px solid; - border-bottom: #e4e4e4 1px solid; + border: #e4e4e4 1px solid; color: #333333; text-shadow: 0 0 0.1em #ffffff; background: #e4e4e4 linear-gradient(to bottom, #fefefe, #f1f1f1 10%, #e4e4e4); diff --git a/src/admin-role-form/_type-form.scss b/src/admin-role-form/_type-form.scss index cda602f8..fce0f7e4 100644 --- a/src/admin-role-form/_type-form.scss +++ b/src/admin-role-form/_type-form.scss @@ -14,7 +14,7 @@ dl.type-form { dd { flex: 1 1 calc(100% - 200px - 1em); - margin-left: 1em; + @include margin-left(1em); } & > dt:not(:first-of-type), diff --git a/src/admin-user-form/_user-password-modal.scss b/src/admin-user-form/_user-password-modal.scss index ca4b4821..5fe7e713 100644 --- a/src/admin-user-form/_user-password-modal.scss +++ b/src/admin-user-form/_user-password-modal.scss @@ -2,7 +2,7 @@ //Hack to bypass classes set by the ngModel validation input[type=password].number { - text-align: left; + @include text-align(left); } } diff --git a/src/buq/_buq.scss b/src/buq/_buq.scss index e0549e4d..563ce420 100644 --- a/src/buq/_buq.scss +++ b/src/buq/_buq.scss @@ -10,7 +10,7 @@ padding: 1em 2em; .breadcrumb { - padding-left: 0; + @include padding-left(0); font-size: 14px; } } @@ -42,7 +42,7 @@ .suggestions-results { z-index: 1; position: absolute; - left: 0; + @include left(0); max-height: 7em; } } @@ -66,13 +66,13 @@ white-space: break-spaces; transform: translate(-30%, 115%); bottom: 0; - padding: 8px 15px 8px 8px; + @include padding(8px, 15px, 8px, 8px); height: fit-content; width: 200px; &:before { top: -25%; - left: 28%; + @include left(28%); border-width: 8px; border-color: transparent transparent #fff transparent; } diff --git a/src/buq/components/createAuthorizeForecasting/_createAuthorizeForecasting.scss b/src/buq/components/createAuthorizeForecasting/_createAuthorizeForecasting.scss index 45752717..58a251e7 100644 --- a/src/buq/components/createAuthorizeForecasting/_createAuthorizeForecasting.scss +++ b/src/buq/components/createAuthorizeForecasting/_createAuthorizeForecasting.scss @@ -14,7 +14,7 @@ margin-top: 16px; th { - padding-right: 48px; + @include padding-right(48px); } .proceed { diff --git a/src/buq/components/prepareBuq/_prepare-buq-page.scss b/src/buq/components/prepareBuq/_prepare-buq-page.scss index d9f54f76..f9e3b701 100644 --- a/src/buq/components/prepareBuq/_prepare-buq-page.scss +++ b/src/buq/components/prepareBuq/_prepare-buq-page.scss @@ -28,10 +28,10 @@ &.is-required:after { color: $brand-danger; content: '*'; - margin-left: 0.25em; + @include margin-left(0.25em); } } - + .prepare-buq-button { width: 100%; display: flex; @@ -56,19 +56,19 @@ border: 0; background: #ffffff; padding: 1em 2em; - + .breadcrumb { padding-top: 1.5em; - padding-left: 0; + @include padding-left(0); font-size: 14px; } } - + .prepare-buq-page-title { border-bottom: #bebebe 1px solid; padding: 3.2px 0em; } - + .prepare-buq-table-actions { display: flex; justify-content: center; @@ -107,7 +107,7 @@ .comments-input-title { margin-bottom: 3px; - margin-left: 5px; + @include margin-left(5px); } } @@ -135,7 +135,7 @@ .react-table{ th{ white-space: nowrap; - padding-right: 8px; + @include padding-right(8px); } } } @@ -219,10 +219,10 @@ &.is-required:after { color: $brand-danger; content: '*'; - margin-left: 0.25em; + @include margin-left(0.25em); } } - + .approve-buq-button { width: 100%; display: flex; diff --git a/src/openlmis-header/_header.scss b/src/openlmis-header/_header.scss index 821c5007..c9379210 100644 --- a/src/openlmis-header/_header.scss +++ b/src/openlmis-header/_header.scss @@ -1,174 +1,180 @@ $font-size-openlmis-header-title: $font-size-extra-large !default; body > header { - border: 0px; - padding: 0px; - > * { - width: 100%; - margin: 0px; - } + border: 0px; + padding: 0px; + > * { + width: 100%; + margin: 0px; + } } .openlmis-header { + align-items: flex-end; + background: linear-gradient( + to top, + $light-gray 0%, + lighten($light-gray, 40%) 80%, + $white 100% + ); + display: flex; + flex-wrap: nowrap; + padding: 1em 2em; + z-index: 1; // to be above navbar + @media screen and (max-width: $res-xs) { + padding: 1em 0.5em; + } + > * { + flex: 0 0 auto; align-items: flex-end; - background: linear-gradient(to top, $light-gray 0%, lighten($light-gray, 40%) 80%, $white 100%); - display: flex; - flex-wrap: nowrap; - padding: 1em 2em; - z-index: 1; // to be above navbar - @media screen and (max-width: $res-xs) { - padding: 1em 0.5em; - } - > * { - flex: 0 0 auto; - align-items: flex-end; - } + } - > .title { - display: block; - text-indent: -30000em; - overflow: hidden; - background-image: url('../assets/common/openlmis-logo.svg'); - background-repeat: no-repeat; - background-size: auto $font-size-openlmis-header-title; - flex-grow: 1; - font-size: $font-size-openlmis-header-title; - height: $font-size-openlmis-header-title; - @media screen and (max-width: $res-sm) { - background-size: auto 24px; - } - @media screen and (max-width: $res-xs) { - background-size: auto 20px; - } + > .title { + display: block; + text-indent: -30000em; + overflow: hidden; + background-image: url('../assets/common/openlmis-logo.svg'); + background-repeat: no-repeat; + background-size: auto $font-size-openlmis-header-title; + @include background-position(left); + flex-grow: 1; + font-size: $font-size-openlmis-header-title; + height: $font-size-openlmis-header-title; + @media screen and (max-width: $res-sm) { + background-size: auto 24px; } + @media screen and (max-width: $res-xs) { + background-size: auto 20px; + } + } } .openlmis-header.is-offline { - background: transparent; - color: $light-gray; - > .title { - background-image: url('../assets/common/openlmis-logo-white.svg'); - } + background: transparent; + color: $light-gray; + > .title { + background-image: url('../assets/common/openlmis-logo-white.svg'); + } } .openlmis-header-actions { + > * { + display: flex; + justify-content: flex-end; > * { - display: flex; - justify-content: flex-end; - > * { - flex: 0 0 auto; - margin: 0px; - margin-right: 1em; - &:last-child{ - margin-right: 0em; - } - } + flex: 0 0 auto; + margin: 0px; + @include margin-right(1em); + &:last-child { + @include margin-right(0em); + } } + } - a { - @media screen and (max-width: $res-sm) { - margin-right: 0em; - } + a { + @media screen and (max-width: $res-sm) { + @include margin-right(0em); } + } } .status-offline { - @extend a.is-offline; - margin-right: 0; - span { - @media screen and (max-width: $res-sm) { - display: none; - } + @extend a.is-offline; + @include margin-right(0em); + span { + @media screen and (max-width: $res-sm) { + display: none; } + } } .openlmis-header-info { - display: flex; - flex-direction: row; - > * { - flex: 0 0 auto; - } - .openlmis-app-cache{ - @media screen and (max-width: $res-sm) { - display: none; - } - } + display: flex; + flex-direction: row; + > * { + flex: 0 0 auto; + } + .openlmis-app-cache { + @media screen and (max-width: $res-sm) { + display: none; + } + } } .navbar { - width: 100%; + width: 100%; + display: flex; + flex-direction: row; + flex-wrap: wrap; - .navbar-right { - float: right !important; + @media screen and (max-width: $res-xs) { + @include padding-x(1%); + } - @media screen and (max-width: $res-md) { - margin-left: auto !important; - } - } + @media screen and (max-width: $res-md) { + flex-direction: column; + } - .nav.navbar-nav { - flex-direction: row; - } - -} + .nav.navbar-nav { + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin: 0; -header > .navbar { - @media screen and (max-width: $res-xs) { - padding: 0% 1% !important; + @media screen and (max-width: $res-md) { + flex-direction: column; } - @media screen and (max-width: $res-xs) { - padding: 0% 1% !important; - } - -} + } -header > .navbar.display-in-browser { - display: block; - @media screen and (max-width: ($res-md)) { - display: none; - } + .navbar-right-group { + display: flex; + flex-direction: row-reverse; + align-items: center; + @include margin-left(auto); + } } -header > .navbar.display-in-browser { - display: block; - @media screen and (max-width: ($res-md)) { - display: none !important; - } +header > .navbar { + @media screen and (max-width: $res-md) { + display: none; + } } header > .navbar.display-in-mobile { - display: none; - @media screen and (max-width: ($res-md)) { - display: flex; - } -} + display: none; -.navbar { - margin: 0em; + @media screen and (max-width: $res-md) { + display: flex; + } } .navbar-header { - display: flex; - padding: 10px 0px; + display: flex; + width: 100%; + padding: 10px 0px; - .locale-container { - @media screen and (max-width: $res-md) { - margin: 10px; - margin-bottom: 7.5px; - } + .locale-container { + @media screen and (max-width: $res-md) { + margin: 10px; + margin-bottom: 7.5px; } + } - .openlmis-button-group { - display: flex; - margin-left: auto; - } + .openlmis-button-group { + display: flex; + @include margin-left(auto); + } - .navbar-toggler { - padding: 0px 20px; - } + .navbar-toggler { + padding: 0px 20px; + } } header > .navbar .navbar-nav > li > a { - color: $white; - font-weight: bold; + color: $white; + font-weight: bold; + + @media screen and (max-width: $res-md) { + color: $black; + } } diff --git a/src/openlmis-home/_home.scss b/src/openlmis-home/_home.scss index 6a3ffdd4..e96ba440 100644 --- a/src/openlmis-home/_home.scss +++ b/src/openlmis-home/_home.scss @@ -13,7 +13,7 @@ $image-height: 136px; height: $image-height; position: absolute; bottom: 0.5em; - left: 0em; + @include left(0em); background: url('../assets/openlmis-home/home-background.png') no-repeat right bottom; @media screen and (max-width: $res-sm) { height: 100%; @@ -40,7 +40,7 @@ $image-height: 136px; .scroll { width: 100%; - float:left; + @include float(left); overflow-y: auto; max-height: 60vh; padding-bottom: 1em;