Merge remote-tracking branch 'upstream/release-1.14-SP-2' into SB-10436

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;

src/app/client/src/assets/styles/component/_buttons.scss

+// 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);
+}

src/app/client/src/assets/styles/component/_modal.scss

 // 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;
+    }
+  }
+}

src/app/client/src/assets/styles/global.scss

 // 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
+}

src/app/client/src/assets/styles/mixins/_button.scss

+@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

src/app/client/src/assets/styles/mixins/_mixins.scss

 @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