mod-base 1.0.65-beta.2 → 1.0.65-beta.4

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.2",
3
+ "version": "1.0.65-beta.4",
4
4
  "description": "Base Styles for S3 Sites",
5
5
  "author": "",
6
6
  "license": "ISC"
@@ -71,6 +71,16 @@ $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-author-border-color: null,
76
+ $reviews-card-active-star-color: null,
77
+ $reviews-card-active-verified-color: #54ADFF,
78
+ // Reviews — Inactive card
79
+ $reviews-card-inactive-author-border-color: null,
80
+ $reviews-card-inactive-background: #272627,
81
+ $reviews-card-inactive-star-color: null,
82
+ $reviews-card-inactive-text-color: rgba($foreground, .3),
83
+ $reviews-card-inactive-verified-color: null,
74
84
  $tcpa-color: lighten($color-grey-500, 2%),
75
85
  $value-props-background: null
76
86
  ) {
@@ -96,6 +106,34 @@ $contact-us-blue-light: #8498E7;
96
106
  $theme: $base-color !global;
97
107
  }
98
108
 
109
+ @if $reviews-card-active-star-color == null {
110
+ @if $theme != null {
111
+ $reviews-card-active-star-color: $theme;
112
+ } @else {
113
+ $reviews-card-active-star-color: $color-grey-900;
114
+ }
115
+ }
116
+
117
+ @if $reviews-card-active-author-border-color == null {
118
+ @if $theme != null {
119
+ $reviews-card-active-author-border-color: $theme;
120
+ } @else {
121
+ $reviews-card-active-author-border-color: $color-grey-900;
122
+ }
123
+ }
124
+
125
+ @if $reviews-card-inactive-star-color == null {
126
+ $reviews-card-inactive-star-color: rgba($reviews-card-active-star-color, .3);
127
+ }
128
+
129
+ @if $reviews-card-inactive-verified-color == null {
130
+ $reviews-card-inactive-verified-color: rgba($reviews-card-active-verified-color, .3);
131
+ }
132
+
133
+ @if $reviews-card-inactive-author-border-color == null {
134
+ $reviews-card-inactive-author-border-color: rgba($reviews-card-active-author-border-color, .3);
135
+ }
136
+
99
137
  @if ($checkbox-label-color == null) {
100
138
  $checkbox-label-color: $text-color;
101
139
  }
@@ -105,7 +143,7 @@ $contact-us-blue-light: #8498E7;
105
143
  }
106
144
 
107
145
  // 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';
146
+ $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
147
  $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
148
 
111
149
  @media (prefers-color-scheme: dark){
@@ -128,54 +166,35 @@ $contact-us-blue-light: #8498E7;
128
166
  color: $checkbox-label-color;
129
167
  }
130
168
 
131
- .checkbox__disclaimer {
132
- color: $color-grey-500;
133
- }
134
-
135
169
  .checkbox--multi-select-options {
136
170
  .checkbox__label-text {
137
171
  color: $color-grey-300;
138
172
  }
139
-
173
+
140
174
  label {
141
175
  input[type="checkbox"] {
142
- &::before {
143
- background: transparent;
144
- border: 1px solid $radio-btn-border-color;
176
+ &:not(:checked) {
177
+ &::before {
178
+ background: transparent;
179
+ border: 1px solid $color-grey-500;
180
+ }
145
181
  }
146
-
182
+
147
183
  ~ .checkbox__label-text {
148
184
  &::before {
149
- border: 1px solid $radio-btn-border-color;
185
+ border: 1px solid $color-grey-500;
150
186
  }
151
187
  }
152
-
188
+
153
189
  &:active,
190
+ &:focus,
154
191
  &:hover,
155
- &:focus-visible {
156
- &::before {
157
- background: $radio-btn-standard-hover-select-background-color;
158
- border: 1px solid $radio-btn-standard-hover-select-background-color;
159
- }
160
-
161
- ~ .checkbox__label-text {
162
- &::before {
163
- border: 1px solid $radio-btn-border-color;
164
- }
165
- }
166
- }
167
-
168
192
  &:checked {
169
193
  ~ .checkbox__label-text {
170
194
  &::before {
171
- border: 1px solid $radio-btn-checked-border-color;
195
+ border: 1px solid $radio-btn-standard-hover-select-background-color;
172
196
  }
173
197
  }
174
-
175
- &::before {
176
- background: $radio-btn-checked-border-color;
177
- border: 1px solid $radio-btn-checked-border-color;
178
- }
179
198
  }
180
199
  }
181
200
  }
@@ -481,7 +500,7 @@ $contact-us-blue-light: #8498E7;
481
500
  .reviews-card {
482
501
  background-color: $background;
483
502
  border-color: $color-grey-700;
484
- box-shadow: 0px 8px 16px 0px rgba($color-grey-500, 10%);
503
+ box-shadow: none;
485
504
  color: $text-color;
486
505
 
487
506
  &__avatar img {
@@ -489,7 +508,7 @@ $contact-us-blue-light: #8498E7;
489
508
  }
490
509
 
491
510
  &__author-name {
492
- border-color: $color-grey-600;
511
+ border-color: $reviews-card-active-author-border-color;
493
512
  }
494
513
 
495
514
  &__review,
@@ -498,11 +517,29 @@ $contact-us-blue-light: #8498E7;
498
517
  color: $text-color;
499
518
  }
500
519
 
520
+ .star-rating__icons {
521
+ .stars-filled {
522
+ color: $reviews-card-active-star-color;
523
+ }
524
+ }
525
+
501
526
  .star-rating__stars {
502
527
  &::before {
503
528
  color: $color-grey-800;
504
529
  }
505
530
  }
531
+
532
+ &__verified {
533
+ color: $reviews-card-active-verified-color;
534
+ }
535
+ }
536
+
537
+ @if $color-btn != null {
538
+ .swiper-controls {
539
+ .icon {
540
+ @include btnStyles($color-btn, $color-btn-text);
541
+ }
542
+ }
506
543
  }
507
544
 
508
545
  .matched,
@@ -974,6 +1011,30 @@ $contact-us-blue-light: #8498E7;
974
1011
  }
975
1012
  }
976
1013
  }
1014
+
1015
+ @include breakpoint-lg {
1016
+ .reviews-card {
1017
+ &:not(.swiper-slide-active) {
1018
+ background-color: $reviews-card-inactive-background;
1019
+ .reviews-card {
1020
+ &__review,
1021
+ &__author {
1022
+ color: $reviews-card-inactive-text-color;
1023
+ }
1024
+ &__author-name {
1025
+ border-color: $reviews-card-inactive-author-border-color;
1026
+ }
1027
+ &__verified {
1028
+ color: $reviews-card-inactive-verified-color;
1029
+ }
1030
+ }
1031
+ .star-rating__text,
1032
+ .stars-filled {
1033
+ color: $reviews-card-inactive-star-color;
1034
+ }
1035
+ }
1036
+ }
1037
+ }
977
1038
  // To load additional site-level style blocks
978
1039
  @content;
979
1040
  }