@cagovweb/state-template 6.5.1 → 6.5.2

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.
@@ -1,4 +1,4 @@
1
- /*! State Web Template Version 6.5.1 */
1
+ /*! State Web Template Version 6.5.2 */
2
2
  @charset "UTF-8";
3
3
  /*!
4
4
  * Bootstrap v5.3.3 (https://getbootstrap.com/)
@@ -15630,10 +15630,7 @@ h2 {
15630
15630
  SITE SEARCH - /src/css/cagov/search.css
15631
15631
  ----------------------------------------- */
15632
15632
 
15633
- /* stylelint-disable no-descending-specificity */
15634
-
15635
- .search-container,
15636
- .featured-search.active {
15633
+ .search-container {
15637
15634
  overflow: hidden;
15638
15635
  z-index: 7;
15639
15636
  position: relative;
@@ -15648,14 +15645,61 @@ h2 {
15648
15645
 
15649
15646
  @media (min-width: 992px) {
15650
15647
 
15651
- .search-container,
15652
- .featured-search.active {
15648
+ .search-container {
15653
15649
  position: absolute;
15654
15650
  top: 96px
15655
15651
  }
15656
15652
  }
15657
15653
 
15658
- .search-container .search-textfield, .featured-search.active .search-textfield {
15654
+ .search-container #Search {
15655
+ display: flex;
15656
+ }
15657
+
15658
+ .search-container #Search .gsc-search-button {
15659
+ right: 50px;
15660
+ background-color: var(--gray-600, #72717c);
15661
+ border-color: var(--gray-600, #72717c);
15662
+ color: var(--white, #fff);
15663
+ }
15664
+
15665
+ .search-container #Search .gsc-search-button:focus {
15666
+ outline: 2px solid var(--outline-dark-mode-color);
15667
+ outline-offset: -4px;
15668
+ }
15669
+
15670
+ .search-container #Search .gsc-search-button:hover,
15671
+ .search-container #Search .gsc-search-button:focus {
15672
+ background-color: var(--gray-800, #4a4958);
15673
+ border-color: var(--gray-800, #4a4958);
15674
+ }
15675
+
15676
+ .search-container #Search .gsc-search-button .ca-gov-icon-search {
15677
+ color: var(--white, #fff);
15678
+ }
15679
+
15680
+ @media (max-width: 991px) {
15681
+
15682
+ .search-container #Search .gsc-search-button {
15683
+ background-color: var(--white, #fff);
15684
+ border-color: var(--white, #fff)
15685
+ }
15686
+
15687
+ .search-container #Search .gsc-search-button .ca-gov-icon-search {
15688
+ color: var(--gray-700, #5e5e6a);
15689
+ }
15690
+
15691
+ .search-container #Search .gsc-search-button:hover,
15692
+ .search-container #Search .gsc-search-button:focus {
15693
+ background-color: var(--gray-50, #fafafa);
15694
+ border-color: var(--gray-50, #fafafa);
15695
+ }
15696
+
15697
+ .search-container #Search .gsc-search-button:hover .ca-gov-icon-search, .search-container #Search .gsc-search-button:focus .ca-gov-icon-search {
15698
+ color: var(--gray-900, #3b3a48);
15699
+ }
15700
+ }
15701
+
15702
+ .search-container .search-textfield {
15659
15703
  font-size: 1.1rem;
15660
15704
  width: 100%;
15661
15705
  max-height: 38px;
@@ -15663,30 +15707,30 @@ h2 {
15663
15707
  transition: border 0.4s;
15664
15708
  }
15665
15709
 
15666
- .search-container .search-textfield::placeholder, .featured-search.active .search-textfield::placeholder {
15710
+ .search-container .search-textfield::placeholder {
15667
15711
  color: var(--black, #000);
15668
15712
  opacity: 1;
15669
15713
  }
15670
15714
 
15671
15715
  /* stylelint-disable-next-line selector-pseudo-element-no-unknown */
15672
15716
 
15673
- .search-container .search-textfield::input-placeholder, .featured-search.active .search-textfield::input-placeholder {
15717
+ .search-container .search-textfield::input-placeholder {
15674
15718
  color: var(--black, #000);
15675
15719
  }
15676
15720
 
15677
- .search-container .search-textfield:focus, .featured-search.active .search-textfield:focus {
15721
+ .search-container .search-textfield:focus {
15678
15722
  outline: 2px solid var(--outline-default-color);
15679
15723
  outline-offset: -2px;
15680
15724
  }
15681
15725
 
15682
- .search-container .submit-container, .featured-search.active .submit-container {
15726
+ .search-container .submit-container {
15683
15727
  float: left;
15684
15728
  height: auto;
15685
15729
  height: 40px;
15686
15730
  transition: all 0.5s 0.1s;
15687
15731
  }
15688
15732
 
15689
- .search-container .submit-container button, .featured-search.active .submit-container button {
15733
+ .search-container .submit-container button {
15690
15734
  float: left;
15691
15735
  transition: all 0.5s 0.1s;
15692
15736
  background: none;
@@ -15701,7 +15745,7 @@ h2 {
15701
15745
  padding: 0;
15702
15746
  }
15703
15747
 
15704
- .search-container .submit-container button > span, .featured-search.active .submit-container button > span {
15748
+ .search-container .submit-container button > span {
15705
15749
  position: relative;
15706
15750
  top: 0;
15707
15751
  font-size: 1.87rem;
@@ -15710,55 +15754,19 @@ h2 {
15710
15754
 
15711
15755
  @media (max-width: 991px) {
15712
15756
 
15713
- .search-container .submit-container button, .featured-search.active .submit-container button {
15757
+ .search-container .submit-container button {
15714
15758
  font-size: 2rem;
15715
15759
  line-height: 1em;
15716
15760
  padding-top: 0
15717
15761
  }
15718
15762
  }
15719
15763
 
15720
- .search-container .textfield-container, .featured-search.active .textfield-container {
15764
+ .search-container .textfield-container {
15721
15765
  float: left;
15722
15766
  width: 100%;
15723
15767
  }
15724
15768
 
15725
- .search-container .close-search, .featured-search.active .close-search {
15726
- display: none;
15727
- position: absolute;
15728
- right: -10px;
15729
- cursor: pointer;
15730
- }
15731
-
15732
- .search-container .close-search .sr-only, .featured-search.active .close-search .sr-only {
15733
- height: unset !important;
15734
- width: unset !important;
15735
- position: relative !important;
15736
- clip: unset !important;
15737
- background: none !important;
15738
- margin: 0 !important;
15739
- font-size: 1.125rem !important;
15740
- color: var(--color-p2, #046b99);
15741
- text-decoration: underline;
15742
- }
15743
-
15744
- .search-container .close-search .sr-only:hover,
15745
- .search-container .close-search .sr-only:focus,
15746
- .featured-search.active .close-search .sr-only:hover,
15747
- .featured-search.active .close-search .sr-only:focus {
15748
- color: var(--color-p2-darker, #214a68);
15749
- text-decoration: none;
15750
- }
15751
-
15752
- @media (max-width: 991px) {
15753
-
15754
- .search-container .close-search, .featured-search.active .close-search {
15755
- right: 0;
15756
- display: none
15757
- }
15758
- }
15759
-
15760
15769
  input[type="search"].search-textfield {
15761
- padding-left: 10px;
15762
15770
  -webkit-appearance: none;
15763
15771
  background-color: canvas;
15764
15772
  border: 1px solid #72717c;
@@ -15766,15 +15774,14 @@ input[type="search"].search-textfield {
15766
15774
  }
15767
15775
 
15768
15776
  @media (max-width: 991px) {
15769
-
15770
- input[type="search"].search-textfield .search-container {
15771
- border-color: var(--white, #fff)
15777
+ input[type="search"].search-textfield {
15778
+ border-color: var(--white, #fff);
15772
15779
  }
15773
15780
 
15774
- input[type="search"].search-textfield .search-container:focus {
15775
- outline-offset: -4px;
15776
- }
15781
+ input[type="search"].search-textfield:focus {
15782
+ outline-offset: -4px;
15777
15783
  }
15784
+ }
15778
15785
 
15779
15786
  #local_form {
15780
15787
  position: relative;
@@ -15791,30 +15798,12 @@ input[type="search"].search-textfield .search-container {
15791
15798
  .featured-search {
15792
15799
  display: block;
15793
15800
  position: absolute;
15794
- top: 240px;
15795
15801
  padding: 0;
15796
15802
  max-height: 100%;
15797
15803
  border-radius: 0;
15798
- width: 60%;
15799
- left: 20%;
15800
15804
  }
15801
15805
 
15802
- .featured-search .flexbox {
15803
- left: 0;
15804
- right: 0;
15805
- margin: 0 auto;
15806
- width: 60%;
15807
- max-width: 630px;
15808
- }
15809
-
15810
- .featured-search.play-animation {
15811
- animation-duration: 1s;
15812
- animation-fill-mode: both;
15813
- animation-name: pulse;
15814
- }
15815
-
15816
15806
  .featured-search .search-textfield {
15817
- padding: 14px;
15818
15807
  border-color: var(--gray-600, #72717c) !important;
15819
15808
  font-size: 1.1rem;
15820
15809
  height: 38px;
@@ -15837,53 +15826,6 @@ input[type="search"].search-textfield .search-container {
15837
15826
  font-size: 2.8125rem;
15838
15827
  line-height: 2.8125rem;
15839
15828
  }
15840
-
15841
- .featured-search.active {
15842
- position: relative;
15843
- visibility: visible;
15844
- opacity: 1;
15845
- }
15846
-
15847
- @media (min-width: 992px) {
15848
-
15849
- .featured-search.active {
15850
- position: absolute
15851
- }
15852
- }
15853
-
15854
- .featured-search.active{
15855
-
15856
- transition:
15857
- top 0.4s,
15858
- left 0.2s 0.4s,
15859
- width 0.2s 0.4s,
15860
- background-color 0.4s + 0.2s,
15861
- border 0.4s,
15862
- padding 0.2s 0.4s;
15863
- top: 96px;
15864
- left: 0;
15865
- padding: 20px 0;
15866
- border-radius: 0;
15867
- padding-right: 15%;
15868
- padding-left: 15%;
15869
- border-bottom: none;
15870
- width: 100%;
15871
- max-width: 100%;
15872
- }
15873
-
15874
- .featured-search.active .close-search {
15875
- display: none;
15876
- }
15877
-
15878
- .featured-search.active .search-textfield {
15879
- font-size: 1.1rem;
15880
- height: 40px;
15881
- width: 100%;
15882
- border-radius: var(--border-radius-base);
15883
- border: 3px solid transparent;
15884
- padding: 0 4px;
15885
- transition: border 0.4s;
15886
- }
15887
15829
  }
15888
15830
 
15889
15831
  /* Resize search bar to look better on tablet size screens */
@@ -15892,147 +15834,8 @@ input[type="search"].search-textfield .search-container {
15892
15834
  left: 10%;
15893
15835
  width: 80%;
15894
15836
  }
15895
-
15896
- .flexbox .featured-search {
15897
- left: 0;
15898
- width: 100%;
15899
- }
15900
-
15901
- .featured-search.active {
15902
- width: 100%;
15903
- }
15904
- }
15905
-
15906
- .agency-form {
15907
- margin-top: var(--spacer, 1rem) !important;
15908
- margin-bottom: var(--spacer, 1rem) !important;
15909
15837
  }
15910
15838
 
15911
- .agency-form .textfield-container {
15912
- float: left;
15913
- padding-right: 44px;
15914
- margin-right: -44px;
15915
- width: 100%;
15916
- }
15917
-
15918
- .agency-form .search-textfield {
15919
- width: 100%;
15920
- }
15921
-
15922
- .agency-form .submit-container {
15923
- float: left;
15924
- height: 40px;
15925
- }
15926
-
15927
- .agency-form .submit-container button {
15928
- color: #fff;
15929
- border: none;
15930
- width: 44px;
15931
- height: 100%;
15932
- float: left;
15933
- font-size: 1.5rem;
15934
- line-height: 0.9375rem;
15935
- padding: 0;
15936
- -webkit-appearance: none;
15937
- }
15938
-
15939
- .agency-form .submit-container button > span {
15940
- position: relative;
15941
- top: 0;
15942
- font-size: 1.87rem;
15943
- line-height: 1.875rem;
15944
- }
15945
-
15946
- @media (max-width: 991px) {
15947
-
15948
- .agency-form .submit-container button {
15949
- font-size: 2rem;
15950
- line-height: 1em;
15951
- padding-top: 0
15952
- }
15953
- }
15954
-
15955
- .agency-form input,
15956
- .agency-form button {
15957
- height: 40px;
15958
- line-height: 2.5rem;
15959
- }
15960
-
15961
- .agency-form button {
15962
- background: var(--gray-600, #72717c);
15963
- }
15964
-
15965
- .agency-form button > span {
15966
- top: 0;
15967
- font-size: 1.8rem;
15968
- }
15969
-
15970
- .search-container .textfield-container, .search-container.featured-search.active .textfield-container {
15971
- /* Desktop Search Button Padding */
15972
- margin-right: -80px;
15973
- padding-right: 80px;
15974
- }
15975
-
15976
- /* Mobile Search button padding */
15977
-
15978
- @media (max-width: 991px) {
15979
-
15980
- .search-container .textfield-container, .search-container.featured-search.active .textfield-container {
15981
- margin-right: -48px;
15982
- padding-right: 44px
15983
- }
15984
- }
15985
-
15986
- .search-container .submit-container, .search-container.featured-search.active .submit-container {
15987
- width: auto;
15988
- }
15989
-
15990
- .search-container .search-locator, .search-container.featured-search.active .search-locator {
15991
- color: var(--gray-900, #3b3a48);
15992
- float: left;
15993
- text-align: center;
15994
- width: 100px;
15995
- position: relative;
15996
- display: none;
15997
- line-height: inherit !important;
15998
- cursor: pointer;
15999
- }
16000
-
16001
- .search-container .search-locator [class^="ca-gov-icon-"], .search-container.featured-search.active .search-locator [class^="ca-gov-icon-"] {
16002
- font-size: 1.4rem;
16003
- padding: 0 !important;
16004
- position: absolute;
16005
- top: 0;
16006
- width: 100%;
16007
- left: 0;
16008
- }
16009
-
16010
- .search-container .search-locator small, .search-container.featured-search.active .search-locator small {
16011
- position: absolute;
16012
- top: 1.7em;
16013
- left: 0;
16014
- width: 100%;
16015
- text-align: center;
16016
- display: block;
16017
- overflow: hidden;
16018
- white-space: nowrap;
16019
- text-overflow: ellipsis;
16020
- }
16021
-
16022
- /* Active on mobile */
16023
-
16024
- @media (max-width: 991px) {
16025
-
16026
- .search-container .search-locator, .search-container.featured-search.active .search-locator {
16027
- width: 75px;
16028
- margin-left: 5px
16029
- }
16030
- }
16031
-
16032
- .search-container.active .search-locator, .search-container.featured-search.active.active .search-locator {
16033
- display: block;
16034
- }
16035
-
16036
15839
  @media (max-width: 991px) {
16037
15840
 
16038
15841
  .search-container.featured-search {
@@ -16046,52 +15849,17 @@ input[type="search"].search-textfield .search-container {
16046
15849
  background: none;
16047
15850
  }
16048
15851
 
16049
- .search-container.featured-search.active {
16050
- background-color: var(--gray-100, #f3f3f4);
16051
- border-top: 1px solid var(--gray-300, #bcbbc1);
16052
- }
16053
-
16054
15852
  @media (min-width: 992px) {
16055
15853
  .fixed.compact .search-container {
16056
15854
  opacity: 0;
16057
15855
  }
16058
15856
 
16059
- .active-search .fixed.compact .search-container,
16060
- .fixed.compact .search-container.active {
15857
+ .active-search .fixed.compact .search-container {
16061
15858
  opacity: 1;
16062
15859
  top: 55px;
16063
15860
  }
16064
15861
  }
16065
15862
 
16066
- /* full width navigation search container */
16067
- @media (min-width: 992px) {
16068
- .nav-full-width + .search-container,
16069
- .nav-full-width + .featured-search.active {
16070
- top: 35px;
16071
- }
16072
-
16073
- .active-search .fixed.compact .nav-full-width + .search-container,
16074
- .fixed.compact .nav-full-width + .search-container.active {
16075
- opacity: 1;
16076
- top: 35px;
16077
- }
16078
- }
16079
-
16080
- @media (min-width: 992px) and (max-width: 1200px) {
16081
- .nav-full-width + .search-container,
16082
- .nav-full-width + .featured-search.active {
16083
- top: 32px;
16084
- }
16085
-
16086
- .active-search .fixed.compact .nav-full-width + .search-container,
16087
- .fixed.compact .nav-full-width + .search-container.active {
16088
- opacity: 1;
16089
- top: 32px;
16090
- }
16091
- }
16092
-
16093
- /* Search Button */
16094
-
16095
15863
  button.gsc-search-button {
16096
15864
  border-radius: 0 5px 5px 0;
16097
15865
  padding: 0 12px;
@@ -16101,126 +15869,6 @@ button.gsc-search-button {
16101
15869
  }
16102
15870
 
16103
15871
  /* ------------- Custom search box (not google) -------------- */
16104
- .search-container #Search {
16105
- display: flex;
16106
- }
16107
- .search-container #Search .gsc-search-button {
16108
- right: 50px;
16109
- background-color: var(--gray-600, #72717c);
16110
- border-color: var(--gray-600, #72717c);
16111
- color: var(--white, #fff);
16112
- }
16113
- .search-container #Search .gsc-search-button:focus {
16114
- outline: 2px solid var(--outline-dark-mode-color);
16115
- outline-offset: -4px;
16116
- }
16117
- .search-container #Search .gsc-search-button:hover,
16118
- .search-container #Search .gsc-search-button:focus {
16119
- background-color: var(--gray-800, #4a4958);
16120
- border-color: var(--gray-800, #4a4958);
16121
- }
16122
- .search-container #Search .gsc-search-button .ca-gov-icon-search {
16123
- color: var(--white, #fff);
16124
- }
16125
- @media (max-width: 991px) {
16126
- .search-container #Search .gsc-search-button {
16127
- background-color: var(--white, #fff);
16128
- border-color: var(--white, #fff)
16129
- }
16130
-
16131
- .search-container #Search .gsc-search-button .ca-gov-icon-search {
16132
- color: var(--gray-700, #5e5e6a);
16133
- }
16134
-
16135
- .search-container #Search .gsc-search-button:hover,
16136
- .search-container #Search .gsc-search-button:focus {
16137
- background-color: var(--gray-50, #fafafa);
16138
- border-color: var(--gray-50, #fafafa);
16139
- }
16140
-
16141
- .search-container #Search .gsc-search-button:hover .ca-gov-icon-search, .search-container #Search .gsc-search-button:focus .ca-gov-icon-search {
16142
- color: var(--gray-900, #3b3a48);
16143
- }
16144
- }
16145
- .search-container #Search .close-search-btn {
16146
- display: block;
16147
- }
16148
- .search-container #Search .close-search-btn .sr-only {
16149
- color: var(--color-p2, #046b99);
16150
- text-decoration: underline;
16151
- }
16152
- .search-container #Search .close-search-btn .sr-only:hover,
16153
- .search-container #Search .close-search-btn .sr-only:focus {
16154
- color: var(--color-p2-darker, #214a68);
16155
- text-decoration: none;
16156
- }
16157
- .search-container #Search .close-search {
16158
- display: block;
16159
- right: 0;
16160
- }
16161
- @media (max-width: 991px) {
16162
- .search-container #Search .close-search {
16163
- display: block;
16164
- cursor: pointer;
16165
- min-height: 38px
16166
- }
16167
-
16168
- .search-container #Search .close-search .sr-only {
16169
- height: unset !important;
16170
- width: unset !important;
16171
- position: relative !important;
16172
- clip: unset !important;
16173
- background: none !important;
16174
- margin: 0 !important;
16175
- font-size: 1.125rem !important;
16176
- }
16177
- }
16178
- .search-container:hover .search-textfield, .search-container:focus .search-textfield, .search-container.active .search-textfield {
16179
- background-color: #fff;
16180
- }
16181
- .search-container:hover .submit-container button, .search-container:focus .submit-container button, .search-container.active .submit-container button {
16182
- border-color: #fff;
16183
- }
16184
- .search-container.active {
16185
- max-height: 300px;
16186
- padding: 20px 15%;
16187
- }
16188
- /* Active on mobile 991px */
16189
- @media (max-width: 991px) {
16190
- .search-container.active {
16191
- padding-top: 1.125rem;
16192
- padding-bottom: 1.125rem
16193
- }
16194
- }
16195
- .search-container.active .close-search {
16196
- display: block;
16197
- }
16198
- @media (max-width: 991px) {
16199
- .search-container.active .close-search {
16200
- display: none
16201
- }
16202
- }
16203
- .search-container.active div.gsc-clear-button {
16204
- width: 40px;
16205
- }
16206
- .search-container.active div.gsc-clear-button::before {
16207
- content: "\4d";
16208
- font-family: CaGov;
16209
- font-size: 2rem;
16210
- width: 100%;
16211
- color: var(--gray-100, #ededef);
16212
- display: block;
16213
- margin-top: 12px;
16214
- margin-left: 2px;
16215
- }
16216
- .search-container.active{
16217
-
16218
- background-color: var(--gray-100, #f3f3f4);
16219
- }
16220
- .search-container.active .submit-container button {
16221
- border-color: var(--gray-200, #d4d4d7);
16222
- background: var(--gray-700, #5e5e6a);
16223
- }
16224
15872
 
16225
15873
  .featured-search div.gsc-clear-button {
16226
15874
  width: 0;
@@ -16247,19 +15895,6 @@ button.gsc-search-button {
16247
15895
  display: none;
16248
15896
  }
16249
15897
 
16250
- .featured-search.active .search-locator {
16251
- display: block;
16252
- }
16253
-
16254
- .featured-search.active .container #Search .gsc-search-button {
16255
- right: 50px;
16256
- outline-offset: -2px;
16257
- }
16258
-
16259
- .featured-search.active .container #Search .close-search-btn {
16260
- display: block;
16261
- }
16262
-
16263
15898
  /* -----------------------------------------
16264
15899
  GOOGLE CUSTOM SEARCH CUSTOMIZATION OVERRIDES
16265
15900
  /src/css/cagov/search.css
@@ -16399,67 +16034,6 @@ table.gsc-search-box td {
16399
16034
  .full-width-nav .featured-search input.search-textfield {
16400
16035
  padding: 0 8px;
16401
16036
  }
16402
-
16403
- /* full width featured search hack for IE */
16404
- @media all and (-ms-high-contrast: none) {
16405
- .full-width-nav .featured-search {
16406
- width: 100%;
16407
- max-width: 100%;
16408
- padding-right: 15px;
16409
- }
16410
-
16411
- .full-width-nav .featured-search .container {
16412
- width: 40%;
16413
- float: right;
16414
- }
16415
-
16416
- *::-ms-backdrop,
16417
- .full-width-nav .featured-search {
16418
- width: 100%;
16419
- max-width: 100%;
16420
- padding-right: 15px;
16421
- }
16422
-
16423
- *::-ms-backdrop .container, .full-width-nav .featured-search .container {
16424
- width: 40%;
16425
- float: right;
16426
- }
16427
- }
16428
- }
16429
-
16430
- @media (min-width: 992px) and (max-width: 1200px) {
16431
- /* full width featured search hack for IE */
16432
- @media all and (-ms-high-contrast: none) {
16433
- .full-width-nav .featured-search {
16434
- width: 100%;
16435
- max-width: 100%;
16436
- padding-right: 15px;
16437
- }
16438
-
16439
- .full-width-nav .featured-search .container {
16440
- width: 40%;
16441
- float: right;
16442
- }
16443
-
16444
- *::-ms-backdrop,
16445
- .full-width-nav .featured-search {
16446
- width: 100%;
16447
- max-width: 100%;
16448
- padding-right: 15px;
16449
- }
16450
-
16451
- *::-ms-backdrop .container, .full-width-nav .featured-search .container {
16452
- width: 40%;
16453
- float: right;
16454
- }
16455
- }
16456
- }
16457
-
16458
- /* search box icons for mobile */
16459
- @media (max-width: 991px) {
16460
- .search-container #Search .close-search {
16461
- padding-left: 10px;
16462
- }
16463
16037
  }
16464
16038
 
16465
16039
  /* clears the ‘X’ from Internet Explorer */
@@ -17307,10 +16881,24 @@ input[type="search"]::-webkit-search-results-decoration {
17307
16881
  }
17308
16882
  .full-width-nav .main-navigation .top-level-nav .first-level-btn.has-sub .carrot {
17309
16883
  position: absolute;
17310
- right: 0.75rem;
16884
+ right: 1.2rem;
17311
16885
  top: 0.35rem;
17312
16886
  transition: all 0.5s cubic-bezier(0.57, 0.2, 0.21, 0.89);
17313
16887
  }
16888
+
16889
+ .full-width-nav .main-navigation .top-level-nav .first-level-btn.has-sub .carrot::after {
16890
+ content: "";
16891
+ display: inline-block;
16892
+ text-decoration: none;
16893
+ position: relative;
16894
+ width: 0.55rem;
16895
+ height: 0.55rem;
16896
+ border-top: 2px solid var(--color-p2, #046b99);
16897
+ border-left: 2px solid var(--color-p2, #046b99);
16898
+ transform: rotate(225deg);
16899
+ vertical-align: middle;
16900
+ top: -2px;
16901
+ }
17314
16902
  .full-width-nav .main-navigation .top-level-nav .first-level-btn[aria-expanded="true"] .carrot {
17315
16903
  transform: rotate(180deg);
17316
16904
  top: 0.6rem;
@@ -17385,35 +16973,40 @@ input[type="search"]::-webkit-search-results-decoration {
17385
16973
  }
17386
16974
 
17387
16975
  /* button carrot */
17388
- .first-level-btn[aria-expanded="false"] .rotate {
17389
- display: block;
17390
- position: absolute;
17391
- top: 0;
17392
- right: 0;
17393
- font-size: 1.5rem !important;
17394
- line-height: 3.2rem !important;
17395
- width: 55px !important;
17396
- height: 55px !important;
17397
- text-align: center;
17398
- cursor: pointer;
17399
- border: none;
17400
- transition: all 0.2s ease !important;
17401
- color: var(--white, #fff) !important;
17402
- }
16976
+ .first-level-btn[aria-expanded="false"] .rotate,
16977
+ .first-level-btn[aria-expanded="true"] .rotate {
16978
+ display: block;
16979
+ position: absolute;
16980
+ top: 0;
16981
+ right: 0;
16982
+ width: 55px !important;
16983
+ height: 55px !important;
16984
+ text-align: center;
16985
+ cursor: pointer;
16986
+ border: none;
16987
+ transition: all 0.2s ease !important;
16988
+ color: var(--white, #fff) !important;
16989
+ }
17403
16990
 
17404
- .first-level-btn[aria-expanded="true"] .rotate {
17405
- transform: rotate(90deg) !important;
17406
- position: absolute;
17407
- width: 55px !important;
17408
- height: 55px !important;
17409
- line-height: 3rem !important;
17410
- font-size: 1.5rem !important;
17411
- top: 0;
17412
- right: 0;
17413
- text-align: center;
17414
- transition: all 0.2s ease !important;
17415
- color: var(--white, #fff) !important;
17416
- }
16991
+ .first-level-btn[aria-expanded="false"] .rotate::after, .first-level-btn[aria-expanded="true"] .rotate::after {
16992
+ content: "";
16993
+ display: inline-block;
16994
+ text-decoration: none;
16995
+ position: absolute;
16996
+ width: 0.55rem;
16997
+ height: 0.55rem;
16998
+ border-top: 2px solid #fff;
16999
+ border-left: 2px solid #fff;
17000
+ vertical-align: middle;
17001
+ top: 50%;
17002
+ transform: translateY(-50%) rotate(135deg);
17003
+ right: 1.5rem;
17004
+ margin-left: 0.5rem;
17005
+ }
17006
+
17007
+ .first-level-btn[aria-expanded="true"] .rotate {
17008
+ transform: rotate(90deg) !important;
17009
+ }
17417
17010
 
17418
17011
  /* Side nav second level active styles */
17419
17012
  aside.mobile-sidenav .side-navigation ul.list-navigation li ul li a.active {
@@ -20499,13 +20092,13 @@ html {
20499
20092
  /* accordion component specific classes */
20500
20093
 
20501
20094
  /* initial styles */
20502
- cagov-accordion details {
20095
+ cagov-accordion > details {
20503
20096
  margin-bottom: 0;
20504
20097
  min-height: 3rem;
20505
20098
  margin-top: 1rem;
20506
20099
  overflow: visible;
20507
20100
  }
20508
- cagov-accordion details summary {
20101
+ cagov-accordion > details > summary {
20509
20102
  cursor: pointer;
20510
20103
  padding: 0.5rem 3rem 0.5rem 3.75rem;
20511
20104
  background-color: var(--gray-50, #fafafa);
@@ -20517,7 +20110,7 @@ cagov-accordion details summary {
20517
20110
  font-weight: bold;
20518
20111
  border: 1px solid var(--gray-200, #d4d4d7);
20519
20112
  }
20520
- cagov-accordion details summary::before {
20113
+ cagov-accordion > details > summary::before {
20521
20114
  position: absolute;
20522
20115
  height: 100%;
20523
20116
  width: 2.75rem;
@@ -20528,7 +20121,7 @@ cagov-accordion details summary::before {
20528
20121
  border-radius: 3px 0 0 3px;
20529
20122
  content: "";
20530
20123
  }
20531
- cagov-accordion details summary::after {
20124
+ cagov-accordion > details > summary::after {
20532
20125
  content: "";
20533
20126
  position: absolute;
20534
20127
  top: 0;
@@ -20538,27 +20131,27 @@ cagov-accordion details summary::after {
20538
20131
  width: 100%;
20539
20132
  border-radius: 3px;
20540
20133
  }
20541
- cagov-accordion details summary .cagov-open-indicator {
20134
+ cagov-accordion > details > summary .cagov-open-indicator {
20542
20135
  position: absolute;
20543
20136
  left: 0.5rem;
20544
20137
  top: 0.4rem;
20545
20138
  width: 0;
20546
20139
  height: 0;
20547
20140
  }
20548
- cagov-accordion details summary .cagov-open-indicator::before {
20141
+ cagov-accordion > details > summary .cagov-open-indicator::before {
20549
20142
  font-family: CaGov;
20550
20143
  content: "5";
20551
20144
  position: absolute;
20552
20145
  font-size: 1.6rem;
20553
20146
  transition: transform 0.2s;
20554
20147
  }
20555
- cagov-accordion details summary:hover {
20148
+ cagov-accordion > details > summary:hover {
20556
20149
  color: black;
20557
20150
  }
20558
- cagov-accordion details summary:hover::before {
20151
+ cagov-accordion > details > summary:hover::before {
20559
20152
  background-color: var(--gray-100, #f3f3f4);
20560
20153
  }
20561
- cagov-accordion details .accordion-body {
20154
+ cagov-accordion > details .accordion-body {
20562
20155
  padding: 1rem;
20563
20156
  border-radius: 0 0 4px 4px;
20564
20157
  border: 1px solid var(--gray-200, #d4d4d7);
@@ -20566,41 +20159,41 @@ cagov-accordion details .accordion-body {
20566
20159
  }
20567
20160
 
20568
20161
  /* styles applied after custom element javascript runs */
20569
- cagov-accordion:defined details {
20162
+ cagov-accordion:defined > details {
20570
20163
  transition: height 0.2s;
20571
20164
  height: 3rem;
20572
20165
  overflow: visible;
20573
20166
  }
20574
- cagov-accordion:defined summary::-webkit-details-marker {
20575
- display: none;
20576
- }
20577
- cagov-accordion:defined details summary {
20578
- list-style: none;
20579
- border-radius: 4px;
20580
- }
20581
- cagov-accordion:defined details summary:focus::before {
20582
- background-color: var(--gray-100, #f3f3f4);
20583
- }
20584
- cagov-accordion:defined details summary:focus::after {
20585
- outline: 2px solid var(--outline-default-color);
20586
- outline-offset: -2px;
20587
- }
20588
- cagov-accordion:defined details[open] {
20589
- height: auto;
20590
- }
20591
- cagov-accordion:defined details[open] .cagov-open-indicator::before {
20592
- transform: rotate(90deg) translateY(-0.2rem);
20167
+ cagov-accordion:defined > details > summary {
20168
+ list-style: none;
20169
+ border-radius: 4px;
20170
+ }
20171
+ cagov-accordion:defined > details > summary::-webkit-details-marker {
20172
+ display: none;
20593
20173
  }
20594
- cagov-accordion:defined details[open] summary {
20595
- border-radius: 4px 4px 0 0;
20174
+ cagov-accordion:defined > details > summary:focus::before {
20175
+ background-color: var(--gray-100, #f3f3f4);
20176
+ }
20177
+ cagov-accordion:defined > details > summary:focus::after {
20178
+ outline: 2px solid var(--outline-default-color);
20179
+ outline-offset: -2px;
20180
+ }
20181
+ cagov-accordion:defined > details[open] {
20182
+ height: auto;
20596
20183
  }
20597
- cagov-accordion:defined details[open] summary::before {
20598
- border-radius: 3px 0 0;
20599
- background-color: var(--gray-100, #f3f3f4);
20184
+ cagov-accordion:defined > details[open] .cagov-open-indicator::before {
20185
+ transform: rotate(90deg) translateY(-0.2rem);
20186
+ }
20187
+ cagov-accordion:defined > details[open] > summary {
20188
+ border-radius: 4px 4px 0 0;
20600
20189
  }
20601
- cagov-accordion:defined details[open] summary:focus::after {
20602
- border-radius: 3px 3px 0 0;
20190
+ cagov-accordion:defined > details[open] > summary::before {
20191
+ border-radius: 3px 0 0;
20192
+ background-color: var(--gray-100, #f3f3f4);
20603
20193
  }
20194
+ cagov-accordion:defined > details[open] > summary:focus::after {
20195
+ border-radius: 3px 3px 0 0;
20196
+ }
20604
20197
  /* -----------------------------------------
20605
20198
  ACCORDIONS LIST
20606
20199
  /src/css/cagov/accordion-list.css
@@ -20922,13 +20515,13 @@ cagov-accordion:defined details[open] summary:focus::after {
20922
20515
  background-color: var(--gray-100, #f3f3f4);
20923
20516
  }
20924
20517
 
20925
- cagov-accordion.sidenav details {
20518
+ cagov-accordion.sidenav > details {
20926
20519
  border: none;
20927
20520
  min-height: 2rem;
20928
20521
  margin-top: 0;
20929
20522
  }
20930
20523
 
20931
- cagov-accordion.sidenav details summary {
20524
+ cagov-accordion.sidenav > details > summary {
20932
20525
  border: none;
20933
20526
  background: var(--white, #fff);
20934
20527
  padding: 0.7rem 2rem 0.7rem 1rem;
@@ -20939,93 +20532,93 @@ cagov-accordion.sidenav details summary {
20939
20532
  color: var(--gray-700, #5e5e6a);
20940
20533
  }
20941
20534
 
20942
- cagov-accordion.sidenav details summary::before {
20535
+ cagov-accordion.sidenav > details > summary::before {
20943
20536
  border: none !important;
20944
20537
  width: 3px;
20945
20538
  background-color: transparent !important;
20946
20539
  }
20947
20540
 
20948
- cagov-accordion.sidenav details summary::after {
20541
+ cagov-accordion.sidenav > details > summary::after {
20949
20542
  display: none;
20950
20543
  }
20951
20544
 
20952
- cagov-accordion.sidenav details summary:hover,
20953
- cagov-accordion.sidenav details summary:focus {
20545
+ cagov-accordion.sidenav > details > summary:hover,
20546
+ cagov-accordion.sidenav > details > summary:focus {
20954
20547
  text-decoration: none;
20955
20548
  background-color: var(--gray-50, #fafafa);
20956
20549
  color: var(--gray-700, #5e5e6a);
20957
20550
  }
20958
20551
 
20959
- cagov-accordion.sidenav details summary:hover::before, cagov-accordion.sidenav details summary:focus::before {
20552
+ cagov-accordion.sidenav > details > summary:hover::before, cagov-accordion.sidenav > details > summary:focus::before {
20960
20553
  border: none;
20961
20554
  background-color: transparent;
20962
20555
  }
20963
20556
 
20964
- cagov-accordion.sidenav details summary:focus {
20557
+ cagov-accordion.sidenav > details > summary:focus {
20965
20558
  outline: 2px solid var(--outline-default-color);
20966
20559
  outline-offset: -2px;
20967
20560
  }
20968
20561
 
20969
- cagov-accordion.sidenav details summary.active {
20562
+ cagov-accordion.sidenav > details > summary.active {
20970
20563
  color: var(--gray-700, #5e5e6a) !important;
20971
20564
  text-decoration: none;
20972
20565
  background-color: var(--gray-75, #f3f3f4);
20973
20566
  font-weight: 400;
20974
20567
  }
20975
20568
 
20976
- cagov-accordion.sidenav details summary.active::before {
20569
+ cagov-accordion.sidenav > details > summary.active::before {
20977
20570
  border: none;
20978
20571
  width: 3px;
20979
20572
  border-radius: 0;
20980
20573
  background-color: var(--color-p1, #fdb81e) !important;
20981
20574
  }
20982
20575
 
20983
- cagov-accordion.sidenav details summary.active:hover,
20984
- cagov-accordion.sidenav details summary.active:focus {
20576
+ cagov-accordion.sidenav > details > summary.active:hover,
20577
+ cagov-accordion.sidenav > details > summary.active:focus {
20985
20578
  color: var(--black, #000) !important;
20986
20579
  text-decoration: none;
20987
20580
  background-color: var(--gray-100, #f3f3f4);
20988
20581
  }
20989
20582
 
20990
- cagov-accordion.sidenav details summary.active:focus {
20583
+ cagov-accordion.sidenav > details > summary.active:focus {
20991
20584
  outline: 2px solid var(--outline-default-color);
20992
20585
  outline-offset: -2px;
20993
20586
  }
20994
20587
 
20995
- cagov-accordion.sidenav details summary[open] summary {
20588
+ cagov-accordion.sidenav > details > summary[open] > summary {
20996
20589
  color: var(--black, #000);
20997
20590
  }
20998
20591
 
20999
- cagov-accordion.sidenav details summary[open] summary::after {
20592
+ cagov-accordion.sidenav > details > summary[open] > summary::after {
21000
20593
  display: none;
21001
20594
  }
21002
20595
 
21003
- cagov-accordion.sidenav details summary .cagov-open-indicator {
20596
+ cagov-accordion.sidenav > details > summary .cagov-open-indicator {
21004
20597
  left: unset !important;
21005
20598
  right: 2.7rem;
21006
20599
  top: 0.6rem !important;
21007
20600
  }
21008
20601
 
21009
- cagov-accordion.sidenav details summary .cagov-open-indicator::before {
20602
+ cagov-accordion.sidenav > details > summary .cagov-open-indicator::before {
21010
20603
  font-size: 2.4rem;
21011
20604
  }
21012
20605
 
21013
- cagov-accordion.sidenav details .accordion-body {
20606
+ cagov-accordion.sidenav > details .accordion-body {
21014
20607
  padding: 0;
21015
20608
  border: none;
21016
20609
  outline: none;
21017
20610
  }
21018
20611
 
21019
- cagov-accordion.sidenav details .accordion-body .side-subnav {
20612
+ cagov-accordion.sidenav > details .accordion-body .side-subnav {
21020
20613
  margin-bottom: 0;
21021
20614
  margin-left: 0;
21022
20615
  }
21023
20616
 
21024
- cagov-accordion.sidenav details .accordion-body .side-subnav li:first-child {
20617
+ cagov-accordion.sidenav > details .accordion-body .side-subnav li:first-child {
21025
20618
  margin-top: 0;
21026
20619
  }
21027
20620
 
21028
- cagov-accordion.sidenav details .accordion-body .side-subnav li:last-child {
20621
+ cagov-accordion.sidenav > details .accordion-body .side-subnav li:last-child {
21029
20622
  margin-bottom: 0;
21030
20623
  }
21031
20624
  .breadcrumbs ul,
@@ -25201,12 +24794,19 @@ a.sidenav.back::after {
25201
24794
  }
25202
24795
 
25203
24796
  .link-grid::after {
25204
- font-family: CaGov;
25205
- content: "5";
25206
24797
  position: absolute;
25207
- top: 0.8rem;
25208
- right: 0.7rem;
25209
- font-size: 1.6rem;
24798
+ content: "";
24799
+ display: inline-block;
24800
+ text-decoration: none;
24801
+ width: 0.55rem;
24802
+ height: 0.55rem;
24803
+ border-top: 2px solid var(--color-p2, #046b99);
24804
+ border-left: 2px solid var(--color-p2, #046b99);
24805
+ vertical-align: middle;
24806
+ top: 50%;
24807
+ transform: translateY(-50%) rotate(135deg);
24808
+ right: 1.5rem;
24809
+ margin-left: 0.5rem;
25210
24810
  }
25211
24811
 
25212
24812
  .link-before::before {
@@ -25222,6 +24822,10 @@ a.sidenav.back::after {
25222
24822
  .section-overstated .link-grid, .section-standout .link-grid, .section-impact .link-grid, .section-primary .link-grid, .section-inverted .link-grid, .bg-primary .link-grid, .bg-standout .link-grid, .bg-p2 .link-grid, .bg-p3 .link-grid {
25223
24823
  border-color: var(--white, #fff);
25224
24824
  }
24825
+ .section-overstated .link-grid::after, .section-standout .link-grid::after, .section-impact .link-grid::after, .section-primary .link-grid::after, .section-inverted .link-grid::after, .bg-primary .link-grid::after, .bg-standout .link-grid::after, .bg-p2 .link-grid::after, .bg-p3 .link-grid::after {
24826
+ border-top-color: var(--white, #fff);
24827
+ border-left-color: var(--white, #fff);
24828
+ }
25225
24829
 
25226
24830
  .bg-primary .link-grid:hover,
25227
24831
  .bg-primary .link-grid:focus,
@@ -25420,6 +25024,22 @@ a.sidenav.back::after {
25420
25024
  display: block;
25421
25025
  }
25422
25026
 
25027
+ .outline-offset-2:focus {
25028
+ outline-offset: -2px !important;
25029
+ }
25030
+
25031
+ .outline-offset-3:focus {
25032
+ outline-offset: -3px !important;
25033
+ }
25034
+
25035
+ .outline-offset-4:focus {
25036
+ outline-offset: -4px !important;
25037
+ }
25038
+
25039
+ .outline-offset-5:focus {
25040
+ outline-offset: -5px !important;
25041
+ }
25042
+
25423
25043
  .cursor-pointer {
25424
25044
  cursor: pointer;
25425
25045
  }