mod-base 1.0.64 → 1.0.65-beta.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,9 @@
1
1
  # Changelog
2
2
 
3
+ ## 1.0.65
4
+
5
+ - Updated dark mode colors for review cards
6
+
3
7
  ## 1.0.64
4
8
 
5
9
  - Updated dark mode styles for checkbox used in multi select questions
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mod-base",
3
- "version": "1.0.64",
3
+ "version": "1.0.65-beta.10",
4
4
  "description": "Base Styles for S3 Sites",
5
5
  "author": "",
6
6
  "license": "ISC"
@@ -61,7 +61,7 @@ $contact-us-blue-light: #8498E7;
61
61
  $radio-btn-checked-border-color: null,
62
62
  $radio-btn-checked-icon-background-color: null,
63
63
  $radio-btn-checked-icon-color: $color-grey-300,
64
- $radio-btn-checked-text-color: $color-grey-300,
64
+ $radio-btn-checked-text-color: $color-white,
65
65
  $radio-btn-hover-background-color: $radio-btn-background-color,
66
66
  $radio-btn-hover-border-color: $radio-btn-border-color,
67
67
  $radio-btn-hover-icon-background-color: null,
@@ -71,6 +71,17 @@ $contact-us-blue-light: #8498E7;
71
71
  $radio-btn-text-color: $color-grey-300,
72
72
  $radio-btn-standard-checked-background-color: $background,
73
73
  $radio-btn-standard-hover-select-background-color: null,
74
+ // Reviews — Active card
75
+ $reviews-card-active-background: #353535,
76
+ $reviews-card-active-author-border-color: null,
77
+ $reviews-card-active-star-color: null,
78
+ $reviews-card-active-verified-color: #54ADFF,
79
+ // Reviews — Inactive card
80
+ $reviews-card-inactive-author-border-color: null,
81
+ $reviews-card-inactive-background: #272627,
82
+ $reviews-card-inactive-star-color: null,
83
+ $reviews-card-inactive-text-color: rgba($foreground, .3),
84
+ $reviews-card-inactive-verified-color: null,
74
85
  $tcpa-color: lighten($color-grey-500, 2%),
75
86
  $value-props-background: null
76
87
  ) {
@@ -96,6 +107,34 @@ $contact-us-blue-light: #8498E7;
96
107
  $theme: $base-color !global;
97
108
  }
98
109
 
110
+ @if $reviews-card-active-star-color == null {
111
+ @if $theme != null {
112
+ $reviews-card-active-star-color: $theme;
113
+ } @else {
114
+ $reviews-card-active-star-color: $color-grey-900;
115
+ }
116
+ }
117
+
118
+ @if $reviews-card-active-author-border-color == null {
119
+ @if $theme != null {
120
+ $reviews-card-active-author-border-color: $theme;
121
+ } @else {
122
+ $reviews-card-active-author-border-color: $color-grey-900;
123
+ }
124
+ }
125
+
126
+ @if $reviews-card-inactive-star-color == null {
127
+ $reviews-card-inactive-star-color: rgba($reviews-card-active-star-color, .3);
128
+ }
129
+
130
+ @if $reviews-card-inactive-verified-color == null {
131
+ $reviews-card-inactive-verified-color: rgba($reviews-card-active-verified-color, .3);
132
+ }
133
+
134
+ @if $reviews-card-inactive-author-border-color == null {
135
+ $reviews-card-inactive-author-border-color: rgba($reviews-card-active-author-border-color, .3);
136
+ }
137
+
99
138
  @if ($checkbox-label-color == null) {
100
139
  $checkbox-label-color: $text-color;
101
140
  }
@@ -105,7 +144,7 @@ $contact-us-blue-light: #8498E7;
105
144
  }
106
145
 
107
146
  // Most common selectors list
108
- $content-selectors: '.hero__title,.hero__subtitle,input,.toggle-wrapper,.step__title,[class^="information__"],[class^="featured-block__"],[class^="partners__"],.form-group__label,[class^="abandonment__"],.modal-header--close,.modal-phone,.modal-body p,legend,[class^="loader__"],table tr,.tile__text,.select,.hiw-block__title,.hiw-card__title,.hiw-card__description,.banner__title,.banner__description,.accordion__title,.reviews__title,.accordion .expand-collapse__toggle,.accordion__content p,.result__title,.result__subtitle,.result__call-text';
147
+ $content-selectors: '.hero__title,.hero__subtitle,input,.toggle-wrapper,.step__title,[class^="information__"],[class^="featured-block__"],[class^="partners__"],.form-group__label,[class^="abandonment__"],.modal-header--close,.modal-phone,.modal-body p,legend,[class^="loader__"],table tr,.tile__text,.select,.hiw-block__title,.hiw-card__title,.hiw-card__description,.banner__title,.banner__description,.accordion__title,.reviews__title,.accordion .expand-collapse__toggle,.accordion__content p,.accordion__content li,.result__title,.result__subtitle,.result__call-text';
109
148
  $background-selectors: '.form,.header,.guarantee,.information,.modal-content,.matched-steps,.loader,.information__header,.hero__background,.hero__content,&.form-in-progress:not(.fixed-width-desktop) .hero__content,.form-input,.form-input:focus,.expand-collapse__icon,.featured-block,table tr,.form-control,.accordion,.hiw-block,.reviews';
110
149
 
111
150
  @media (prefers-color-scheme: dark){
@@ -132,7 +171,7 @@ $contact-us-blue-light: #8498E7;
132
171
  .checkbox__label-text {
133
172
  color: $color-grey-300;
134
173
  }
135
-
174
+
136
175
  label {
137
176
  input[type="checkbox"] {
138
177
  &:not(:checked) {
@@ -197,10 +236,10 @@ $contact-us-blue-light: #8498E7;
197
236
  .secure-text,
198
237
  .step__secure-text,
199
238
  .modal-subtitle {
200
- color: $color-grey-500;
239
+ color: $color-grey-300;
201
240
 
202
241
  svg {
203
- fill: $color-grey-500;
242
+ fill: $color-grey-300;
204
243
  }
205
244
  }
206
245
 
@@ -486,6 +525,38 @@ $contact-us-blue-light: #8498E7;
486
525
  }
487
526
  }
488
527
 
528
+ .review-stacked-card {
529
+ .reviews-card {
530
+ &.swiper-slide-active {
531
+ background-color: $reviews-card-active-background;
532
+ border-color: $reviews-card-active-background;
533
+ box-shadow: none;
534
+
535
+ &__author-name {
536
+ border-color: $reviews-card-active-author-border-color;
537
+ }
538
+
539
+ .star-rating__icons {
540
+ .stars-filled {
541
+ color: $reviews-card-active-star-color;
542
+ }
543
+ }
544
+
545
+ &__verified {
546
+ color: $reviews-card-active-verified-color;
547
+ }
548
+ }
549
+ }
550
+ }
551
+
552
+ @if $color-btn != null {
553
+ .swiper--reviews .swiper-controls {
554
+ .icon {
555
+ @include btnStyles($color-btn, $color-btn-text);
556
+ }
557
+ }
558
+ }
559
+
489
560
  .matched,
490
561
  .unmatched {
491
562
  border-color: $color-grey-700;
@@ -955,6 +1026,34 @@ $contact-us-blue-light: #8498E7;
955
1026
  }
956
1027
  }
957
1028
  }
1029
+
1030
+ @include breakpoint-lg {
1031
+ .review-stacked-card {
1032
+ .reviews-card {
1033
+ &:not(.swiper-slide-active) {
1034
+ background-color: $reviews-card-inactive-background;
1035
+
1036
+ &__review,
1037
+ &__author {
1038
+ color: $reviews-card-inactive-text-color;
1039
+ }
1040
+
1041
+ &__author-name {
1042
+ border-color: $reviews-card-inactive-author-border-color;
1043
+ }
1044
+
1045
+ &__verified {
1046
+ color: $reviews-card-inactive-verified-color;
1047
+ }
1048
+
1049
+ .star-rating__text,
1050
+ .star-rating__icons .stars .stars-filled {
1051
+ color: $reviews-card-inactive-star-color;
1052
+ }
1053
+ }
1054
+ }
1055
+ }
1056
+ }
958
1057
  // To load additional site-level style blocks
959
1058
  @content;
960
1059
  }