diff --git a/src/app/client/src/assets/styles/_variables.scss b/src/app/client/src/assets/styles/_variables.scss
index aa66ba818ddf428bae08f6addf1e2ce3a975f67c..494ff6730e5fb22e0a52c85b46a60fcfcbf8bd11 100644
--- a/src/app/client/src/assets/styles/_variables.scss
+++ b/src/app/client/src/assets/styles/_variables.scss
@@ -3,199 +3,180 @@
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
// 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
// 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
-$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;
-
-/* 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
-
+$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);
// 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: $primary-color;
-$link-decoration: none;
-$link-hover-color: $primary-800;
-$link-hover-decoration: underline;
-
+$link-color: theme-color("primary");
+$link-decoration: none;
+//$link-hover-color: darken($link-color, 15%);
+$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-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;
// spaces
-$base-block-padding: 16px;
-$block-padding-x-y: ($base-block-padding * 0.5) ($base-block-padding * 1); // any block default spacing
-$block-padding-xy: ($base-block-padding * 1); // top right bottom left spacing
-$block-padding-x: ($base-block-padding * 1); // left right spacing
-$block-padding-y: ($base-block-padding * 0.5); // top bottom spacing
-
-
+$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-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
+$base-btn-small-height: ($base-block-space * 3);
+$base-btn-normal-height: ($base-block-space * 4);
+$base-btn-big-height: ($base-block-space * 5);
+$base-btn-fluid: 100%;
// To clean
$text-lightDark: #666;
$text-gray: rgb(180, 171, 171);
-
$signup-btn-bg-not-active-color: #9b9b9b;
$signup-thankyou-text-color: #4a4a4a;
$signup-btn-bg-active-color: #2ca58d;
-
$form-input-border-color: #979797;
$form-input-border-active-color: #4a90e2;
-
$menuitem-color: #212121;
-
$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;
diff --git a/src/app/client/src/assets/styles/component/_buttons.scss b/src/app/client/src/assets/styles/component/_buttons.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..a0f416a564c48b3817a9dab0ddbc3e460c12b957 100644
--- a/src/app/client/src/assets/styles/component/_buttons.scss
+++ b/src/app/client/src/assets/styles/component/_buttons.scss
@@ -0,0 +1,144 @@
+// buttons
+// Specificity overrides
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+ &.btn-block {
+ width: 100%;
+ }
+}
+
+.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;
+ }
+}
+
+// button lin
+.sb-btn-link {
+ 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);
+}
+
+.sb-btn-normal {
+ 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;
+ padding: $block-padding-y-x;
+ 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;
+}
+
+.sb-btn-outline-disabled {
+ background-color: $white-color;
+ color: $gray-100;
+ border: 1px solid $gray-100;
+}
+
+// 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-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);
+}
+
+// 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);
+}
diff --git a/src/app/client/src/assets/styles/component/_modal.scss b/src/app/client/src/assets/styles/component/_modal.scss
index 4c69e679a1667590cd49493bfedba742407ce31f..d79d11655b270174e795e6712f04988f9e91df84 100644
--- a/src/app/client/src/assets/styles/component/_modal.scss
+++ b/src/app/client/src/assets/styles/component/_modal.scss
@@ -1,74 +1,102 @@
// modal
-.sb-modal{
-
+.sb-modal {
.ui.modal {
margin: 0 auto;
- left:0px;
- right:0px;
- @include size(100%,auto); //bourbon
-
+ left: 0px;
+ right: 0px;
+ @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;
- padding:$block-padding-x-y;
- border-bottom:0px solid $gray-100;
- @include size(auto,2.5rem); //bourbon
+ padding: $block-padding-y-x;
+ border-bottom: 0px solid $gray-100;
+ @include size(auto, 2.5rem); //bourbon
}
-
+
&>.sb-modal-content {
min-height: 100px;
- padding:$block-padding-xy;
+ padding: $block-padding-xy;
}
-
+
&>.close {
color: $white-color;
- top: 10px;
- right: 0px;
- font-size: $font-size-base;
- padding: 0;
- margin: 0;
+ 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;
}
-
+
&>.sb-modal-actions {
- padding:$block-padding-x-y;
+ padding: $block-padding-y-x;
background: $white-color;
border-top: 1px solid $gray-100;
+ min-height: ($base-block-space * 7);
}
-
+
.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);
}
}
}
-
}
.modals.dimmer .ui.scrolling.modal {
- position: absolute!important;
- margin: 0!important;
-}
\ No newline at end of file
+ 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 .scrolling.content {
+ max-height: calc(100vh - 10rem);
+ overflow: auto;
+ }
+
+ .ui.page.dimmer {
+ display: flex !important;
+ align-items: center;
+ justify-content: center;
+ }
+ }
+}
diff --git a/src/app/client/src/assets/styles/global.scss b/src/app/client/src/assets/styles/global.scss
index fd29bc852b7d3f44e90e18a55cb73579bdb820ae..ed258ac06a26e6d404820489382e481b2c875bb3 100644
--- a/src/app/client/src/assets/styles/global.scss
+++ b/src/app/client/src/assets/styles/global.scss
@@ -1,19 +1,21 @@
// global styles
-*{
- transition: all 300ms ease-in-out
- }
-html, body {
- height:100%;
- font-size:$font-size-base;
+// *{
+// transition: all 300ms ease-in-out
+// }
+html,
+body {
+ height: 100%;
+ // font-size:$font-size-base;
+}
+
+body {
+ // background:$bg-body;
+ position: relative;
+ font-family: $font-stack-en;
+ letter-spacing: 0.2px;
+ height: auto;
}
- body {
- background:$bg-body;
- position: relative;
-font-family: $font-stack-en;
-letter-spacing: 0.2px;
-height: auto;
- }
*[lang="en"] body {
font-family: $font-stack-en;
@@ -26,6 +28,7 @@ height: auto;
*[lang="ur"] body {
font-family: $font-stack-ur;
}
+
*[lang="ur"] {
font-size: ($font-size-base * .525);
}
@@ -78,7 +81,7 @@ h5,
.ui.form input[type=url],
.ui.menu,
.ui.dropdown,
-.ui.category.search> .results .category> .name {
+.ui.category.search>.results .category>.name {
font-family: inherit;
}
@@ -108,4 +111,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/mixins/_button.scss b/src/app/client/src/assets/styles/mixins/_button.scss
new file mode 100644
index 0000000000000000000000000000000000000000..938057fdcc2cbf7fe619039c25d5d7a8c059db80
--- /dev/null
+++ b/src/app/client/src/assets/styles/mixins/_button.scss
@@ -0,0 +1,29 @@
+@mixin btn-theme($btn-color) {
+ border-color:($btn-color);
+ background-color: $btn-color;
+ &:hover {
+ background-color: darken($btn-color, 6%);
+ }
+ &:active {
+ background-color: darken($btn-color, 15%);
+ }
+}
+
+@mixin btn-theme-bgwhite($btn-color) {
+ border-color: darken($btn-color, 2%);
+ background-color: $white;
+ color:($btn-color);
+ &:hover {
+ font-weight: bold;
+ border-color: darken($btn-color, 2%);
+ }
+ &:active {
+ border-color: darken($btn-color, 8%);
+ }
+}
+@mixin trans($val...) {
+ -webkit-transition: $val;
+ -moz-transition: $val;
+ -o-transition: $val;
+ transition: $val;
+}
\ No newline at end of file
diff --git a/src/app/client/src/assets/styles/mixins/_mixins.scss b/src/app/client/src/assets/styles/mixins/_mixins.scss
index 2aadddfd9c5800f4158b36c3573b4c1fa44d1934..7dc9dcbf4d7f60032f4797dacad59eb6e6d6569d 100644
--- a/src/app/client/src/assets/styles/mixins/_mixins.scss
+++ b/src/app/client/src/assets/styles/mixins/_mixins.scss
@@ -1,2 +1,3 @@
@import "media-queries";
-@import "radius-shadow-gradient";
\ No newline at end of file
+@import "radius-shadow-gradient";
+@import "button";
\ No newline at end of file