diff --git a/src/app/client/src/assets/styles/_variables.scss b/src/app/client/src/assets/styles/_variables.scss
index 494ff6730e5fb22e0a52c85b46a60fcfcbf8bd11..027bd0b37892f033d86fa8fdb0f79d9b1e8a7da9 100644
--- a/src/app/client/src/assets/styles/_variables.scss
+++ b/src/app/client/src/assets/styles/_variables.scss
@@ -4,161 +4,166 @@
// Color system
// stylelint-disable
// Fonts
-$font-stack-en: 'Noto Sans',
-'Noto Sans Devanagari',
-'Noto Sans Tamil',
-'Noto Sans Bengali',
-'Noto Sans Malayalam',
-'Noto Sans Gurmukhi',
-'Noto Sans Gujarati',
-'Noto Sans Telugu',
-'Noto Sans Kannada',
-'Noto Sans Oriya',
-'Noto Nastaliq Urdu',
--apple-system,
-BlinkMacSystemFont,
-'Segoe UI',
-Roboto,
-Oxygen-Sans,
-Ubuntu,
-Cantarell,
-'Helvetica Neue',
-sans-serif;
-$font-stack-hi: 'Noto Sans Devanagari',
-'Noto Sans',
-'Noto Sans Tamil',
-'Noto Sans Bengali',
-'Noto Sans Malayalam',
-'Noto Sans Gurmukhi',
-'Noto Sans Gujarati',
-'Noto Sans Telugu',
-'Noto Sans Kannada',
-'Noto Sans Oriya',
-'Noto Nastaliq Urdu',
--apple-system,
-BlinkMacSystemFont,
-'Segoe UI',
-Roboto,
-Oxygen-Sans,
-Ubuntu,
-Cantarell,
-'Helvetica Neue',
-sans-serif;
-$font-stack-ur: 'Noto Sans',
-'Noto Nastaliq Urdu',
-'Noto Sans Devanagari',
-'Noto Sans Tamil',
-'Noto Sans Bengali',
-'Noto Sans Malayalam',
-'Noto Sans Gurmukhi',
-'Noto Sans Gujarati',
-'Noto Sans Telugu',
-'Noto Sans Kannada',
-'Noto Sans Oriya',
--apple-system,
-BlinkMacSystemFont,
-'Segoe UI',
-Roboto,
-Oxygen-Sans,
-Ubuntu,
-Cantarell,
-'Helvetica Neue',
-sans-serif;
+$font-stack-en:
+ 'Noto Sans',
+ 'Noto Sans Devanagari',
+ 'Noto Sans Tamil',
+ 'Noto Sans Bengali',
+ 'Noto Sans Malayalam',
+ 'Noto Sans Gurmukhi',
+ 'Noto Sans Gujarati',
+ 'Noto Sans Telugu',
+ 'Noto Sans Kannada',
+ 'Noto Sans Oriya',
+ 'Noto Nastaliq Urdu',
+ -apple-system,
+ BlinkMacSystemFont,
+ 'Segoe UI',
+ Roboto,
+ Oxygen-Sans,
+ Ubuntu,
+ Cantarell,
+ 'Helvetica Neue',
+ sans-serif;
+$font-stack-hi:
+ 'Noto Sans Devanagari',
+ 'Noto Sans',
+ 'Noto Sans Tamil',
+ 'Noto Sans Bengali',
+ 'Noto Sans Malayalam',
+ 'Noto Sans Gurmukhi',
+ 'Noto Sans Gujarati',
+ 'Noto Sans Telugu',
+ 'Noto Sans Kannada',
+ 'Noto Sans Oriya',
+ 'Noto Nastaliq Urdu',
+ -apple-system,
+ BlinkMacSystemFont,
+ 'Segoe UI',
+ Roboto,
+ Oxygen-Sans,
+ Ubuntu,
+ Cantarell,
+ 'Helvetica Neue',
+ sans-serif;
+$font-stack-ur:
+ 'Noto Sans',
+ 'Noto Nastaliq Urdu',
+ 'Noto Sans Devanagari',
+ 'Noto Sans Tamil',
+ 'Noto Sans Bengali',
+ 'Noto Sans Malayalam',
+ 'Noto Sans Gurmukhi',
+ 'Noto Sans Gujarati',
+ 'Noto Sans Telugu',
+ 'Noto Sans Kannada',
+ 'Noto Sans Oriya',
+ -apple-system,
+ BlinkMacSystemFont,
+ 'Segoe UI',
+ Roboto,
+ Oxygen-Sans,
+ Ubuntu,
+ Cantarell,
+ 'Helvetica Neue',
+ sans-serif;
/* gray colors */
-$gray-0: #f3f3f3; // place holder active bg
-$gray-100: #cccccc; // disable btn bg, icon color
-$gray-200: #979797; // disable text, place holder text
-$gray-300: #999999; // sub heading 2
-$gray-400: #666666; // sub heading
-$gray-800: #333333; // text color
+$gray-0: #f3f3f3; // place holder active bg
+$gray-100: #cccccc; // disable btn bg, icon color
+$gray-200: #979797; // disable text, place holder text
+$gray-300: #999999; // sub heading 2
+$gray-400: #666666; // sub heading
+$gray-800: #333333; // text color
// Base Colors
-$blue: #024f9d;
-$green: #008840;
-$orange: #e55a28;
-$red: #ff4558;
-$white: #fff;
-$indigo: #6610f2;
-$purple: #6f42c1;
-$pink: #e83e8c;
-$yellow: #ffc107;
-$teal: #20c997;
-$cyan: #17a2b8;
+$blue: #024f9d;
+$green: #008840;
+$orange: #e55a28;
+$red: #ff4558;
+$white: #fff;
+$indigo: #6610f2;
+$purple: #6f42c1;
+$pink: #e83e8c;
+$yellow: #ffc107;
+$teal: #20c997;
+$cyan: #17a2b8;
// brand Colors
-$primary-color: $blue;
+$primary-color: $blue;
$secondary-color: $green;
-$tertiary-color: $orange;
+$tertiary-color: $orange;
// Status Colors
-$info-color: $blue;
-$success-color: $green;
-$warning-color: $orange;
-$danger-color: $red;
+$info-color: $blue;
+$success-color: $green;
+$warning-color: $orange;
+$danger-color: $red;
// Nuetral Colors
-$white-color: $white;
+$white-color: $white;
$theme-colors: () !default;
-$theme-colors: map-merge(("primary": $primary-color,
-"secondary": $secondary-color,
-"tertiary": $tertiary-color,
-"success": $success-color,
-"info": $info-color,
-"warning": $warning-color,
-"danger": $danger-color,
-"light": $gray-100,
-"dark": $gray-800), $theme-colors);
+$theme-colors: map-merge((
+ "primary": $primary-color,
+ "secondary": $secondary-color,
+ "tertiary": $tertiary-color,
+ "success": $success-color,
+ "info": $info-color,
+ "warning": $warning-color,
+ "danger": $danger-color,
+ "light": $gray-100,
+ "dark": $gray-800
+), $theme-colors);
// primary colors shades
-$primary-0: lighten($primary-color, 65%); // bg
-$primary-100: lighten($primary-color, 15%); // default button bg
-$primary-200: lighten($primary-color, 10%); // divider
-$primary-300: lighten($primary-color, 5%); // outline, focus fields
+$primary-0: lighten($primary-color,65%); // bg
+$primary-100: lighten($primary-color,15%); // default button bg
+$primary-200: lighten($primary-color,10%); // divider
+$primary-300: lighten($primary-color,5%); // outline, focus fields
$primary-400: $primary-color; // button bg, heading, table titles, links, toggles
-$primary-600: darken($primary-color, 15%); // on press
-$primary-800: darken($primary-color, 30%); // hover
+$primary-600: darken($primary-color,15%); // on press
+$primary-800: darken($primary-color,30%); // hover
// secondary colors shades
-$secondary-0: lighten($secondary-color, 50%); // toast bg
-$secondary-100: lighten($secondary-color, 15%); // buttong bg, toast
-$secondary-200: lighten($secondary-color, 10%); // button hover
-$secondary-400: $secondary-color; // icon
+$secondary-0: lighten($secondary-color,50%); // toast bg
+$secondary-100: lighten($secondary-color,15%); // buttong bg, toast
+$secondary-200: lighten($secondary-color,10%); // button hover
+$secondary-400: $secondary-color; // icon
// tertiary colors shades
-$tertiary-0: lighten($tertiary-color, 50%); // toast bg
-$tertiary-100: lighten($tertiary-color, 15%); // buttong bg, toast
+$tertiary-0: lighten($tertiary-color,50%); // toast bg
+$tertiary-100: lighten($tertiary-color,15%); // buttong bg, toast
$tertiary-400: $tertiary-color; // icon, label, notification bg
// red colors shades
-$red-0: lighten($red, 50%); // toast bg
-$red-100: lighten($red, 15%); // buttong bg, toast
+$red-0: lighten($red,50%); // toast bg
+$red-100: lighten($red,15%); // buttong bg, toast
$red-400: $red; // icon color, lable, notification bg
// Settings for the `<body>` element.
-$bg-body: $primary-0;
-$body-color: $gray-800;
+$bg-body: $primary-0;
+$body-color: $gray-800;
// Style anchor elements.
-$link-color: theme-color("primary");
-$link-decoration: none;
+$link-color: theme-color("primary");
+$link-decoration: none;
//$link-hover-color: darken($link-color, 15%);
-$link-hover-decoration: underline;
+$link-hover-decoration: underline;
// Fonts
// $font-default-size: 14px;
-$font-size-base: 1rem; // Assumes the browser default, typically `16px`
-$font-weight-light: 300;
-$font-weight-normal: 400;
-$font-weight-bold: 700;
-$font-weight-base: $font-weight-normal;
-$line-height-base: $font-size-base * .25;
-$h1-font-size: $font-size-base * 2.5; // 40px
-$h2-font-size: $font-size-base * 2; // 32px
-$h3-font-size: $font-size-base * 1.75; // 28px
-$h4-font-size: $font-size-base * 1.5; // 24px
-$h5-font-size: $font-size-base * 1.25; // 20px
-$h6-font-size: $font-size-base; // 16px
-$font-size-lg: ($h4-font-size); //24px
-$font-size-normal: ($h6-font-size); // 16px
-$font-size-md: ($font-size-base * .825); // 14px
-$font-size-sm: ($font-size-base * .75); // 12px
-$font-size-xs: ($font-size-base * .625); // 10px
-$p-font-size: $font-size-md;
+$font-size-base: 14px; // Assumes the browser default, typically `16px`
+$font-weight-light: 300;
+$font-weight-normal: 400;
+$font-weight-bold: 700;
+$font-weight-base: $font-weight-normal;
+$line-height-base: ($font-size-base + 8);
+$h1-font-size: $font-size-base * 2.286; // 32px
+$h2-font-size: $font-size-base * 2; // 28px
+$h3-font-size: $font-size-base * 1.714; // 24px
+$h4-font-size: $font-size-base * 1.429; // 20px
+$h5-font-size: $font-size-base * 1.143; // 16px
+$h6-font-size: $font-size-base * 1; // 14px
+$font-size-lg: ($h3-font-size); //24px
+$font-size-normal: ($h5-font-size); // 16px
+$font-size-md: ($font-size-base * 1); // 14px
+$font-size-sm: ($font-size-base * 0.8571); // 12px
+$font-size-xs: ($font-size-base * 0.7143); // 10px
+$p-font-size: $font-size-md;
// spaces
$base-block-space: 8px;
$block-padding-y-x: ($base-block-space * 1) ($base-block-space * 3); // any block default spacing
-$block-padding-xy: ($base-block-space * 3); // top right bottom left spacing
-$block-padding-x: ($base-block-space * 3); // left right spacing
-$block-padding-y: ($base-block-space * 1); // top bottom spacing
+$block-padding-xy: ($base-block-space * 3); // top right bottom left spacing
+$block-padding-x: ($base-block-space * 3); // left right spacing
+$block-padding-y: ($base-block-space * 1); // top bottom spacing
$block-margin-xl-minus: -($base-block-space * 3); // minus margin 24px left
$block-margin-xr-minus: -($base-block-space * 3); // minus margin 24px right
// width heights
@@ -179,4 +184,4 @@ $primary-border: 0.5px solid rgba(216, 216, 216, 0.5);
$primary-background: rgba(216, 216, 216, 0.5);
$card-label-border-color: rgba(2, 79, 157, 0.5);
$dull-color: #b7d8f1;
-$qr-btn: #edf4f9;
+$qr-btn: #edf4f9;
\ No newline at end of file
diff --git a/src/app/client/src/assets/styles/component/_buttons.scss b/src/app/client/src/assets/styles/component/_buttons.scss
index a0f416a564c48b3817a9dab0ddbc3e460c12b957..639b59e5e7b7cb1868950895372ff2d0dc7e73ca 100644
--- a/src/app/client/src/assets/styles/component/_buttons.scss
+++ b/src/app/client/src/assets/styles/component/_buttons.scss
@@ -8,137 +8,111 @@ input[type="button"] {
}
}
-.d-flex-btns {
- display: flex;
- align-items: center;
- justify-content: space-between;
-}
-
// base button styles
.sb-btn {
- -webkit-tap-highlight-color: transparent;
- -webkit-appearance: button;
- user-select: none;
- outline: 0;
- display: inline-block;
- margin-left: 0.25rem;
- border: 1px solid;
- color: #fff;
- cursor: pointer;
- margin: 0px 0px 0px 8px;
-
- text: {
- transform: capitalize;
- decoration: none;
- }
+ -webkit-tap-highlight-color: transparent;
+ -webkit-appearance: button;
+ user-select: none;
+ outline: 0;
+ display: inline-block;
+ margin-left: 0.25rem;
+ border: 1px solid;
+ color:#fff;
+ cursor:pointer;
+ margin:0px 0px 0px 8px;
+ min-width:($base-block-space * 8);
+ text: {
+ transform: capitalize;
+ decoration: none;
+ }
}
-
// button lin
.sb-btn-link {
- background: none;
- border: 0;
- text-decoration: underline;
-
- &:hover {
- font-weight: $font-weight-bold;
- }
-
+ background:none;
+ border:0;
+ text-decoration: underline;
+ &:hover {
+ font-weight:$font-weight-bold;
+ }
+
}
-
// button sizes
.sb-btn-small {
- height: $base-btn-small-height;
- padding: ($base-block-space * .5) ($base-block-space * 2);
- font-size: $font-size-xs;
- @include border-radius(2px);
+ height:$base-btn-small-height;
+ padding: ($base-block-space * .5) ($base-block-space * 2);
+ font-size:$font-size-xs;
+ @include border-radius(2px);
}
-
.sb-btn-normal {
- height: $base-btn-normal-height;
- padding: $block-padding-y-x;
- font-size: $font-size-sm;
- @include border-radius(4px);
+ height:$base-btn-normal-height;
+ padding: $block-padding-y-x;
+ font-size:$font-size-sm;
+ @include border-radius(4px);
}
-
.sb-btn-big {
- height: $base-btn-big-height;
+ height:$base-btn-big-height;
padding: $block-padding-y-x;
- font-size: $font-size-normal;
+ font-size:$font-size-normal;
@include border-radius(6px);
}
-
// disabled button
.sb-btn-disabled {
- background-color: $gray-100;
- color: $gray-200;
- border: 1px solid $gray-100;
+ background-color: $gray-100;
+ color:$gray-200;
+ border:1px solid $gray-100;
+ cursor: not-allowed;
}
-
.sb-btn-outline-disabled {
- background-color: $white-color;
- color: $gray-100;
- border: 1px solid $gray-100;
+ background-color: $white-color;
+ color:$gray-100;
+ border:1px solid $gray-100;
+ cursor: not-allowed;
}
-
// default outline colored btns
-.sb-btn-outline-primary {
- @include btn-theme-bgwhite($primary-color);
-}
-
-.sb-btn-outline-secondary {
- @include btn-theme-bgwhite($secondary-color);
+.sb-btn-outline-primary{
+ @include btn-theme-bgwhite($primary-color);
+}
+.sb-btn-outline-secondary{
+ @include btn-theme-bgwhite($secondary-color);
+}
+.sb-btn-outline-tertiary{
+ @include btn-theme-bgwhite($tertiary-color);
}
-
-.sb-btn-outline-tertiary {
- @include btn-theme-bgwhite($tertiary-color);
-}
-
// status outline buttons
-.sb-btn-outline-info {
- @include btn-theme-bgwhite($primary-color);
-}
-
-.sb-btn-outline-success {
- @include btn-theme-bgwhite($secondary-color);
-}
-
-.sb-btn-outline-warning {
- @include btn-theme-bgwhite($tertiary-color);
-}
-
-.sb-btn-outline-error {
- @include btn-theme-bgwhite($red);
-}
-
-.sb-btn-outline-gray {
- @include btn-theme-bgwhite($gray-800);
-}
-
+.sb-btn-outline-info{
+ @include btn-theme-bgwhite($primary-color);
+}
+.sb-btn-outline-success{
+ @include btn-theme-bgwhite($secondary-color);
+}
+.sb-btn-outline-warning{
+ @include btn-theme-bgwhite($tertiary-color);
+}
+.sb-btn-outline-error{
+ @include btn-theme-bgwhite($red);
+}
+.sb-btn-outline-gray{
+ @include btn-theme-bgwhite($gray-800);
+}
// default colored btns
-.sb-btn-primary {
- @include btn-theme($primary-color);
-}
-
-.sb-btn-secondary {
- @include btn-theme($secondary-color);
-}
-
-.sb-btn-tertiary {
- @include btn-theme($tertiary-color);
-}
-
-.sb-btn-success {
- @include btn-theme($success-color);
-}
-
-.sb-btn-info {
- @include btn-theme($info-color);
-}
-
-.sb-btn-warning {
- @include btn-theme($warning-color);
-}
-
-.sb-btn-error {
- @include btn-theme($danger-color);
-}
+.sb-btn-primary{
+ @include btn-theme($primary-color);
+}
+.sb-btn-secondary{
+ @include btn-theme($secondary-color);
+}
+.sb-btn-tertiary{
+ @include btn-theme($tertiary-color);
+}
+.sb-btn-success{
+ @include btn-theme($success-color);
+}
+.sb-btn-info{
+ @include btn-theme($info-color);
+}
+.sb-btn-warning{
+ @include btn-theme($warning-color);
+}
+.sb-btn-error{
+ @include btn-theme($danger-color);
+}
\ No newline at end of file
diff --git a/src/app/client/src/assets/styles/component/_modal.scss b/src/app/client/src/assets/styles/component/_modal.scss
index d79d11655b270174e795e6712f04988f9e91df84..00fe21afc65e58af058499686e8a87872e3d18d5 100644
--- a/src/app/client/src/assets/styles/component/_modal.scss
+++ b/src/app/client/src/assets/styles/component/_modal.scss
@@ -1,70 +1,94 @@
// modal
-.sb-modal {
+.sb-modal{
.ui.modal {
margin: 0 auto;
- left: 0px;
- right: 0px;
- @include size(100%, auto); //bourbon
+ left: 0;
+ right: 0;
+ @include size(100%,auto); //bourbon
&>.sb-modal-header {
background-color: $primary-color;
color: $white-color;
font-weight: $font-weight-bold;
- font-size: $h6-font-size;
+ font-size: $h5-font-size;
padding: $block-padding-y-x;
- border-bottom: 0px solid $gray-100;
- @include size(auto, 2.5rem); //bourbon
+ border-bottom: 0 solid $gray-100;
+ //@include size(auto,($base-block-space * 5)); //bourbon
+ min-height: ($base-block-space * 5);
+ line-height: ($h5-font-size + 8);
}
-
+
&>.sb-modal-content {
min-height: 100px;
- padding: $block-padding-xy;
+ padding:$block-padding-xy;
}
-
+
&>.close {
- color: $white-color;
- top: 8px;
- right: 8px;
- font-size: $font-size-base;
- padding: 0;
- margin: 0;
- @include size(($base-block-space * 3), ($base-block-space * 3)); //bourbon
- display: flex;
- align-items: center;
- justify-content: center;
+ color: $white-color;
+ top: 0;
+ right: 0;
+ font-size: $font-size-base;
+ padding: 0;
+ margin: 0;
+ @include size(($base-block-space * 5),($base-block-space * 5)); //bourbon
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
-
+
&>.sb-modal-actions {
- padding: $block-padding-y-x;
+ padding:$block-padding-y-x;
background: $white-color;
border-top: 1px solid $gray-100;
min-height: ($base-block-space * 7);
+ display: flex;
+ flex-direction: row-reverse;
+ align-items: center;
}
+
+ &.sb-modal-fullscreen {
+ top: 0;
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ width: 100%;
+ margin: 0;
+ overflow-y: auto;
+ overflow-x: hidden;
+
+ &>.sb-modal-header {
+ height: 4rem;
+ width: auto;
+ border-radius: 0px;
+ display: flex;
+ justify-content: space-between;
+ }
+ &>.sb-modal-content {
+ height: calc(100vh - 120px);
+ }
+ }
.small {
color: $text-lightDark;
}
-
- &.scroll {
- margin: 0 !important;
- }
-
+
+
&.small {
max-width: 300px;
}
-
+
&.normal {
max-width: 720px;
-
.content {
max-height: 380px;
}
}
-
+
&.large {
max-width: 100%;
top: 0 !important;
-
+
.content {
height: calc(100vh - 100px);
}
@@ -72,31 +96,40 @@
}
}
+[dir="rtl"] .sb-modal .ui.modal > .close{
+ right: auto;
+ left: 0;
+}
+
.modals.dimmer .ui.scrolling.modal {
- position: absolute !important;
+ position: absolute!important;
margin: 0 !important;
}
-
@include respond-below(sm) {
.sb-modal {
- .ui.modal {
- position: absolute;
- width: 95%;
- margin: 0 auto !important;
- top: 50%;
- transform: translate(0%, -50%);
- height: inherit;
+ .ui.modal {
+ position: absolute;
+ width: 95%;
+ margin: 0 auto !important;
+ top:50%;
+ transform: translate(0, -50%);
+ height:inherit;
+ &>.close {
+ top: 0 !important;
+ right: 0 !important;
}
-
- .ui.modal .scrolling.content {
- max-height: calc(100vh - 10rem);
- overflow: auto;
+ &>.sb-modal-actions{
+ padding:$block-padding-y-x;
}
-
- .ui.page.dimmer {
- display: flex !important;
- align-items: center;
- justify-content: center;
+ }
+ .ui.modal .scrolling.content {
+ max-height: calc(100vh - 10rem);
+ overflow: auto;
+ }
+ .ui.page.dimmer {
+ display: flex !important;
+ align-items: center;
+ justify-content: center;
+ }
}
- }
-}
+ }
\ No newline at end of file
diff --git a/src/app/client/src/assets/styles/global.scss b/src/app/client/src/assets/styles/global.scss
index ed258ac06a26e6d404820489382e481b2c875bb3..bb55aca5113632955a28359df6bd6b849ec4ed2d 100644
--- a/src/app/client/src/assets/styles/global.scss
+++ b/src/app/client/src/assets/styles/global.scss
@@ -6,7 +6,7 @@
html,
body {
height: 100%;
- // font-size:$font-size-base;
+ font-size:$font-size-base;
}
body {
@@ -29,9 +29,6 @@ body {
font-family: $font-stack-ur;
}
-*[lang="ur"] {
- font-size: ($font-size-base * .525);
-}
button,
input,
@@ -111,4 +108,4 @@ input[type=number]::-webkit-outer-spin-button {
.ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 1);
-}
+}
\ No newline at end of file
diff --git a/src/app/client/src/assets/styles/reusables/displays.scss b/src/app/client/src/assets/styles/reusables/displays.scss
index 4daed3ba527021aab33968f0ec688d2292439ab4..0c85dae20c2974df13887d848983150cf20b3b58 100644
--- a/src/app/client/src/assets/styles/reusables/displays.scss
+++ b/src/app/client/src/assets/styles/reusables/displays.scss
@@ -7,6 +7,10 @@
.d-flex{
display: flex !important;
}
+
+.d-inline-flex {
+ display: inline-flex !important;
+}
.d-inline{
display: inline !important;
}