diff --git a/_includes/wins-page/wins-filter-template.html b/_includes/wins-page/wins-filter-template.html
index f9773d3ab2..737f09bbda 100644
--- a/_includes/wins-page/wins-filter-template.html
+++ b/_includes/wins-page/wins-filter-template.html
@@ -1,17 +1,17 @@
-
- -
- Role ∟
-
+
-
-
+
diff --git a/_sass/components/_projects-page.scss b/_sass/components/_projects-page.scss
index 7266839b83..c026939ff4 100644
--- a/_sass/components/_projects-page.scss
+++ b/_sass/components/_projects-page.scss
@@ -6,7 +6,7 @@
.projects-inner {
display: flex;
flex-direction: column;
-
+
@media #{$bp-mobile-up} {
flex-direction: row;
flex-wrap: wrap;
diff --git a/_sass/components/_wins-page.scss b/_sass/components/_wins-page.scss
index 282ac305f6..913eefd091 100644
--- a/_sass/components/_wins-page.scss
+++ b/_sass/components/_wins-page.scss
@@ -473,12 +473,12 @@
width: 100%;
}
-@media #{$bp-below-desktop}{
- .wins-page-contain > ul.wins-filter{
- width: 100%;
- grid-template-rows: none;
- }
+.wins-page-contain > ul.wins-filter{
+ width: 100%;
+ grid-template-rows: none;
+}
+@media #{$bp-below-desktop}{
.wins-tablet{
margin-left: 0em;
diff --git a/_sass/elements/_old_dropdown_filters.scss b/_sass/elements/_old_dropdown_filters.scss
new file mode 100644
index 0000000000..19c320909f
--- /dev/null
+++ b/_sass/elements/_old_dropdown_filters.scss
@@ -0,0 +1,196 @@
+a.old-filter-item {
+ text-decoration: none;
+}
+.old-project-list {
+ margin-top: 0.5rem;
+}
+//filter container
+ul.old-filter-list {
+ background: $color-pink;
+ display: grid;
+ list-style: none;
+ padding-left: 0;
+ grid-auto-flow: column;
+ grid-column-gap: 20px;
+ // grid-template-columns: repeat(4, 1fr);
+ // ^ See issue #1997 for more info on why this is commented out and changed to 3
+ grid-template-columns: repeat(3, 1fr);
+}
+
+//category boxes
+li.old-filter-item {
+ border: 1px solid rgba(0, 0, 0, 0.24);
+ border-radius: 5px;
+ color: black;
+ background: white;
+ display: flex;
+ padding: 10px 15px;
+ position: relative;
+ transition-duration: 0.5s;
+ cursor: pointer;
+}
+
+//category names
+li.old-filter-item a {
+ color: black;
+ text-transform: capitalize;
+}
+
+li.old-filter-item:hover,
+li.old-filter-item:focus-within {
+ background: white;
+}
+
+li.old-filter-item:focus-within a {
+ outline: none;
+}
+
+//dropdown
+ul.old-filter-list li ul {
+ background: white;
+ border: 1px solid rgba(0, 0, 0, 0.24);
+ visibility: hidden;
+ opacity: 0;
+ transition: all 0.5s ease;
+ z-index: 99;
+ list-style: none;
+ width: 115%;
+ padding: 15px 20px;
+ line-height: 2em;
+ font-size: 0.9em;
+ position: absolute;
+ left: 0;
+ top: 100%;
+ cursor: default;
+}
+
+ul.old-filter-list li:hover > ul,
+ul.old-filter-list li:focus-within > ul,
+ul.old-filter-list li ul:hover,
+ul.old-filter-list li ul:focus {
+ visibility: visible;
+ opacity: 1;
+ display: block;
+}
+
+ul.old-filter-list li ul li {
+ clear: both;
+ width: 100%;
+ text-align: left;
+}
+
+.old-hidden-project {
+ display: none;
+}
+
+.old-dropdown label {
+ cursor: pointer;
+ vertical-align: middle;
+}
+
+.old-filter-checkbox {
+ border: 1px solid #000000;
+ border-radius: 4px;
+ margin: 0px 5px;
+ cursor: pointer;
+ vertical-align: middle;
+}
+
+.old-labelArrow {
+ transform: rotate(-45deg);
+ font-size: 24px;
+ position: absolute;
+ top: 2%;
+ right: 10%;
+}
+
+.old-filter-tag-container {
+ display: flex;
+ flex-wrap: wrap;
+ list-style: none;
+}
+
+.old-filter-tag {
+ align-self: flex-start;
+ height: 24px;
+ box-sizing: border-box;
+ max-width: fit-content;
+
+ margin: 0em 0.5em 1em;
+ padding: 0.15em 1em;
+ background: $color-red;
+ border: none;
+ border-radius: 5px;
+ color: $color-white;
+ font-weight: 500;
+ font-size: 15px;
+ text-transform: capitalize;
+
+ &::after {
+ content: "\00d7";
+ padding-left: 0.5em;
+ }
+
+ &:hover,
+ &:active,
+ &:focus {
+ background: darken($color-red, 10%);
+ color: $color-white;
+ text-decoration: none;
+ cursor: pointer;
+ }
+}
+
+.old-filter-tag span {
+ margin: 0 0 0 5px;
+ min-height: 20px;
+}
+
+a.old-clear-filter-tags {
+ margin-left: 1em;
+ text-decoration: underline;
+ color: $color-cement;
+
+ &:hover {
+ cursor: pointer;
+ }
+}
+
+.old-number-of-checked-boxes {
+ color: $color-red;
+}
+
+@media #{$bp-below-tablet} {
+ //resize dropdown on tablet and mobile view
+ ul.old-filter-list li ul {
+ width: 105%;
+ padding: 15px;
+ }
+}
+
+@media (max-width: 659px) {
+ //creating 2 rows and 2 columns to display categories on mobile
+ ul.old-filter-list {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-template-rows: repeat(2, 1fr);
+ grid-auto-flow: row;
+ grid-gap: 10px;
+ }
+
+ //resize category labels
+ li.old-filter-item {
+ padding: 5px 10px;
+ }
+
+ //resize and reposition label arrow
+ .old-labelArrow {
+ top: -8%;
+ right: 5%;
+ font-size: 20px;
+ }
+
+ .old-clear-filter-tags {
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/_sass/main.scss b/_sass/main.scss
index 136666f27d..28e61c771f 100644
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -34,6 +34,7 @@
@import 'elements/cards';
@import 'elements/color-styles';
@import 'elements/dropdown_filters';
+@import 'elements/old_dropdown_filters';
// /**
// * Components