mod-base 1.0.65-beta.1 → 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
@@ -2,7 +2,7 @@
2
2
 
3
3
  ## 1.0.65
4
4
 
5
- - Updated dark mode color for checkbox disclaimer
5
+ - Updated dark mode colors for review cards
6
6
 
7
7
  ## 1.0.64
8
8
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mod-base",
3
- "version": "1.0.65-beta.1",
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){
@@ -128,15 +167,11 @@ $contact-us-blue-light: #8498E7;
128
167
  color: $checkbox-label-color;
129
168
  }
130
169
 
131
- .checkbox__disclaimer {
132
- color: $color-grey-500;
133
- }
134
-
135
170
  .checkbox--multi-select-options {
136
171
  .checkbox__label-text {
137
172
  color: $color-grey-300;
138
173
  }
139
-
174
+
140
175
  label {
141
176
  input[type="checkbox"] {
142
177
  &:not(:checked) {
@@ -201,10 +236,10 @@ $contact-us-blue-light: #8498E7;
201
236
  .secure-text,
202
237
  .step__secure-text,
203
238
  .modal-subtitle {
204
- color: $color-grey-500;
239
+ color: $color-grey-300;
205
240
 
206
241
  svg {
207
- fill: $color-grey-500;
242
+ fill: $color-grey-300;
208
243
  }
209
244
  }
210
245
 
@@ -490,6 +525,38 @@ $contact-us-blue-light: #8498E7;
490
525
  }
491
526
  }
492
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
+
493
560
  .matched,
494
561
  .unmatched {
495
562
  border-color: $color-grey-700;
@@ -959,6 +1026,34 @@ $contact-us-blue-light: #8498E7;
959
1026
  }
960
1027
  }
961
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
+ }
962
1057
  // To load additional site-level style blocks
963
1058
  @content;
964
1059
  }