mod-base 1.0.65-beta.3 → 1.0.65-beta.5

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.3",
3
+ "version": "1.0.65-beta.5",
4
4
  "description": "Base Styles for S3 Sites",
5
5
  "author": "",
6
6
  "license": "ISC"
@@ -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,54 +167,33 @@ $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
- &::before {
143
- background: transparent;
144
- border: 1px solid $radio-btn-border-color;
177
+ &:not(:checked) {
178
+ &::before {
179
+ background: transparent;
180
+ border: 1px solid $color-grey-500;
181
+ }
145
182
  }
146
-
183
+
147
184
  ~ .checkbox__label-text {
148
185
  &::before {
149
- border: 1px solid $radio-btn-border-color;
186
+ border: 1px solid $color-grey-500;
150
187
  }
151
188
  }
152
-
189
+
153
190
  &:active,
191
+ &:focus,
154
192
  &: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
-
162
193
  &:checked {
163
194
  ~ .checkbox__label-text {
164
195
  &::before {
165
- border: 1px solid $radio-btn-checked-border-color;
166
- }
167
- }
168
-
169
- &::before {
170
- background: $radio-btn-checked-border-color;
171
- border: 1px solid $radio-btn-checked-border-color;
172
- }
173
- }
174
-
175
- &:focus-visible {
176
- ~ .checkbox__label-text {
177
- &::before {
178
- border: 1px solid $radio-btn-checked-border-color;
196
+ border: 1px solid $radio-btn-standard-hover-select-background-color;
179
197
  }
180
198
  }
181
199
  }
@@ -481,9 +499,9 @@ $contact-us-blue-light: #8498E7;
481
499
  }
482
500
 
483
501
  .reviews-card {
484
- background-color: $background;
485
- border-color: $color-grey-700;
486
- box-shadow: 0px 8px 16px 0px rgba($color-grey-500, 10%);
502
+ background-color: $reviews-card-active-background;
503
+ border-color: $reviews-card-active-background;
504
+ box-shadow: none;
487
505
  color: $text-color;
488
506
 
489
507
  &__avatar img {
@@ -491,7 +509,7 @@ $contact-us-blue-light: #8498E7;
491
509
  }
492
510
 
493
511
  &__author-name {
494
- border-color: $color-grey-600;
512
+ border-color: $reviews-card-active-author-border-color;
495
513
  }
496
514
 
497
515
  &__review,
@@ -500,11 +518,29 @@ $contact-us-blue-light: #8498E7;
500
518
  color: $text-color;
501
519
  }
502
520
 
521
+ .star-rating__icons {
522
+ .stars-filled {
523
+ color: $reviews-card-active-star-color;
524
+ }
525
+ }
526
+
503
527
  .star-rating__stars {
504
528
  &::before {
505
529
  color: $color-grey-800;
506
530
  }
507
531
  }
532
+
533
+ &__verified {
534
+ color: $reviews-card-active-verified-color;
535
+ }
536
+ }
537
+
538
+ @if $color-btn != null {
539
+ .swiper--reviews .swiper-controls {
540
+ .icon {
541
+ @include btnStyles($color-btn, $color-btn-text);
542
+ }
543
+ }
508
544
  }
509
545
 
510
546
  .matched,
@@ -976,6 +1012,30 @@ $contact-us-blue-light: #8498E7;
976
1012
  }
977
1013
  }
978
1014
  }
1015
+
1016
+ @include breakpoint-lg {
1017
+ .reviews-card {
1018
+ &:not(.swiper-slide-active) {
1019
+ background-color: $reviews-card-inactive-background;
1020
+ .reviews-card {
1021
+ &__review,
1022
+ &__author {
1023
+ color: $reviews-card-inactive-text-color;
1024
+ }
1025
+ &__author-name {
1026
+ border-color: $reviews-card-inactive-author-border-color;
1027
+ }
1028
+ &__verified {
1029
+ color: $reviews-card-inactive-verified-color;
1030
+ }
1031
+ }
1032
+ .star-rating__text,
1033
+ .star-rating__icons .stars .stars-filled {
1034
+ color: $reviews-card-inactive-star-color;
1035
+ }
1036
+ }
1037
+ }
1038
+ }
979
1039
  // To load additional site-level style blocks
980
1040
  @content;
981
1041
  }