Merge pull request #11473 from lokesh/refactor/remove-mixins-less

jimchamp · web-flow · commit 1a6a3fe6e983 · 2025-12-03T14:22:52.000-08:00
refactor: remove mixins.less. flex browser-prefixes not needed
diff --git a/static/css/components/buttonCta.less b/static/css/components/buttonCta.less
@@ -95,7 +95,9 @@ a.cta-btn {
   &--shell,
   &--shell:link,
   &--shell:visited {
-    .shell-btn--active();
+    background-color: @white;
+    border: 2px solid @primary-blue;
+    color: @primary-blue;
   }
   &--shell:disabled {
     border: 2px solid @light-grey;
diff --git a/static/css/components/carousel.less b/static/css/components/carousel.less
@@ -22,7 +22,7 @@
 }
 
 .carousel {
-  .display-flex();
+  display: flex;
   margin-bottom: 15px;
   overflow-x: scroll;
   padding: 10px 20px;
diff --git a/static/css/components/footer.less b/static/css/components/footer.less
@@ -8,7 +8,7 @@ div#footer-content {
 }
 
 div#footer-links {
-  .display-flex();
+  display: flex;
   margin-left: 10px;
   line-height: 1.5em;
 }
@@ -23,13 +23,13 @@ div#footer-links {
 }
 
 footer {
-  .display-flex();
+  display: flex;
   width: 100%;
   bottom: 0;
   font-size: 0.8em;
   #footer-details {
     color: @dark-grey;
-    .display-flex();
+    display: flex;
     width: 100%;
   }
   h2 {
diff --git a/static/css/components/fulltext-search-suggestion-item.less b/static/css/components/fulltext-search-suggestion-item.less
@@ -1,6 +1,6 @@
 .fsi {
   &__main {
-    .display-flex();
+    display: flex;
     flex-direction: row;
     background-color: @white;
     padding: 5px;
diff --git a/static/css/components/fulltext-search-suggestion.less b/static/css/components/fulltext-search-suggestion.less
@@ -11,7 +11,7 @@
   padding: 5px;
   margin-bottom: 3px;
   border-bottom: 1px solid @light-beige;
-  .display-flex();
+  display: flex;
   flex-direction: column;
 
   &__header {
diff --git a/static/css/components/generic-dropper.less b/static/css/components/generic-dropper.less
@@ -52,7 +52,7 @@
       height: inherit;
       width: 32px;
 
-      .display-flex();
+      display: flex;
       justify-content: center;
       align-items: center;
 
diff --git a/static/css/components/header-bar--desktop.less b/static/css/components/header-bar--desktop.less
@@ -18,7 +18,7 @@
   }
 
   .navigation-component {
-    .display-flex();
+    display: flex;
     -webkit-box-ordinal-group: 3;
     -ms-flex-order: 2;
     order: 2;
diff --git a/static/css/components/header-bar.less b/static/css/components/header-bar.less
@@ -14,7 +14,7 @@
   max-width: 1060px;
   min-width: 300px;
   margin: 0 auto;
-  .display-flex();
+  display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-flow: row wrap;
@@ -343,7 +343,7 @@
   }
 
   .navigation-component.mobile {
-    .display-flex();
+    display: flex;
   }
 
   .navigation-component {
@@ -425,7 +425,7 @@
         width: auto;
 
         .search-bar-input {
-          .display-flex();
+          display: flex;
         }
       }
 
@@ -517,7 +517,7 @@
         }
 
         a {
-          .display-flex();
+          display: flex;
           text-decoration: none;
           color: @dark-grey;
 
@@ -609,7 +609,7 @@ div.search-facet:focus-within {
 
 .hamburger-component {
   summary {
-    .display-flex();
+    display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
@@ -683,12 +683,12 @@ div.search-facet:focus-within {
     -webkit-box-flex: 1;
     -ms-flex: 1 0 0%;
     flex: 1;
-    .display-flex();
+    display: flex;
   }
   .search-bar-input {
     min-width: 50px;
     width: 100%;
-    .display-flex();
+    display: flex;
 
     /* stylelint-disable selector-max-specificity */
     input[type="text"] {
@@ -839,7 +839,7 @@ div.search-facet:focus-within {
         width: 207px;
       }
       .search-bar-input {
-        .display-flex();
+        display: flex;
 
         /* stylelint-disable selector-max-specificity */
         input[type="text"] {
diff --git a/static/css/components/home.less b/static/css/components/home.less
@@ -45,7 +45,7 @@ div.chartHome a:hover,
 }
 #home {
   &-stats-charts {
-    .display-flex();
+    display: flex;
     flex-wrap: wrap;
     .statschart {
       flex: 1;
@@ -90,7 +90,7 @@ div.chartHome a:hover,
     text-align: left;
   }
   &-about {
-    .display-flex();
+    display: flex;
     flex-wrap: wrap;
     font-size: 13px;
   }
diff --git a/static/css/components/iaBar.less b/static/css/components/iaBar.less
@@ -3,7 +3,7 @@
 @import "components/buttonGhost.less";
 
 .iaBar {
-  .display-flex();
+  display: flex;
   max-width: 1060px;
   margin: 0 auto;
   -webkit-box-align: center;
diff --git a/static/css/components/listLists.less b/static/css/components/listLists.less
@@ -22,7 +22,7 @@ ul.listLists {
     list-style: none !important;
     border-radius: 3px;
     padding: 5px;
-    .display-flex();
+    display: flex;
     background-color: @white;
     border-bottom: 1px solid @lightest-grey;
     .image {
diff --git a/static/css/components/pagination.less b/static/css/components/pagination.less
@@ -4,7 +4,7 @@
 .pagination {
   font-size: 0.75em;
   margin: 0 15px;
-  .display-flex();
+  display: flex;
   justify-content: flex-end;
   flex-wrap: wrap;
   a {
diff --git a/static/css/components/search-result-item.less b/static/css/components/search-result-item.less
@@ -59,7 +59,7 @@
 
   &,
   .sri__main {
-    .display-flex();
+    display: flex;
     align-items: center;
     flex-direction: column;
 
@@ -201,7 +201,7 @@
   white-space: nowrap;
   max-width: 150px;
   line-height: 28px;
-  .display-flex();
+  display: flex;
   margin-bottom: 5px;
   a {
     span {
diff --git a/static/css/components/search-results-container.less b/static/css/components/search-results-container.less
@@ -7,6 +7,6 @@
 
 @media only screen and (min-width: @width-breakpoint-desktop) {
   .resultsContainer {
-    .display-flex();
+    display: flex;
   }
 }
diff --git a/static/css/components/shareLinks.less b/static/css/components/shareLinks.less
@@ -9,7 +9,6 @@
  */
 
 .shareLinks-list {
-  .display-flex();
   word-break: keep-all;
   margin: 0;
   padding: 0;
diff --git a/static/css/legacy.less b/static/css/legacy.less
@@ -21,7 +21,6 @@
  */
 @import (less) "less/colors.less";
 @import (less) "less/breakpoints.less";
-@import (less) "less/mixins.less";
 @import (less) "less/z-index.less";
 
 @import (less) "legacy-header.less";
@@ -1299,7 +1298,7 @@ span.actions {
 // openlibrary/macros/FulltextResults.html
 ul.list-books {
   > li {
-    .display-flex();
+    display: flex;
   }
   // openlibrary/macros/SearchResultsWork.html
   // openlibrary/templates/books/check.html
@@ -1542,13 +1541,12 @@ div#subjectLists {
     padding: 0;
     li {
       list-style-type: none;
-      display: block;
       float: left;
       width: 282px;
       font-family: @body-family;
       padding-bottom: 10px;
       padding-top: 0;
-      .display-flex();
+      display: flex;
       .image {
         display: block;
         float: left;
@@ -1619,7 +1617,7 @@ div#subjectLists {
 // openlibrary/templates/account/books.html
 .list-books {
   .book {
-    .display-flex();
+    display: flex;
   }
 }
 
diff --git a/static/css/less/index.less b/static/css/less/index.less
@@ -1,5 +1,4 @@
 @import (less) "breakpoints.less";
 @import (less) "colors.less";
 @import (less) "font-families.less";
-@import (less) "mixins.less";
 @import (less) "z-index.less";
diff --git a/static/css/less/mixins.less b/static/css/less/mixins.less
diff --git a/static/css/page-admin.less b/static/css/page-admin.less
@@ -9,7 +9,6 @@
  */
 @import (less) "less/colors.less";
 @import (less) "less/breakpoints.less";
-@import (less) "less/mixins.less";
 @import (less) "less/font-families.less";
 
 @import (less) "components/admin-table.less";
diff --git a/static/css/page-design.less b/static/css/page-design.less
@@ -5,7 +5,6 @@
  */
 
 @import (less) "less/colors.less";
-@import (less) "less/mixins.less";
 @import (less) "less/font-families.less";
 
 html {
@@ -63,7 +62,7 @@ article.design-pattern section {
 }
 
 ul.color-swatch li {
-  .display-flex();
+  display: flex;
 }
 
 ul.color-swatch li span.color-block {
diff --git a/static/css/page-edit.less b/static/css/page-edit.less
@@ -19,7 +19,6 @@
  */
 @import (less) "less/colors.less";
 @import (less) "less/breakpoints.less";
-@import (less) "less/mixins.less";
 @import (less) "less/font-families.less";
 @import (less) "legacy.less";
 
diff --git a/static/css/page-form.less b/static/css/page-form.less
@@ -9,7 +9,6 @@
  */
 @import (less) "less/colors.less";
 @import (less) "less/breakpoints.less";
-@import (less) "less/mixins.less";
 // TODO: Only formElement and a few common styles are actually needed in this file
 // to render this simple page. We should list them explicitly once that's possible.
 @import (less) "legacy.less";
diff --git a/static/css/page-list-edit.less b/static/css/page-list-edit.less
@@ -8,7 +8,6 @@
  */
 @import (less) "less/colors.less";
 @import (less) "less/breakpoints.less";
-@import (less) "less/mixins.less";
 @import (less) "less/font-families.less";
 @import (less) "legacy.less";
 
diff --git a/static/css/page-plain.less b/static/css/page-plain.less
@@ -7,7 +7,6 @@
  */
 @import (less) "less/colors.less";
 @import (less) "less/breakpoints.less";
-@import (less) "less/mixins.less";
 @import (less) "less/font-families.less";
 
 div#header,
diff --git a/static/css/page-user.less b/static/css/page-user.less
@@ -38,7 +38,6 @@
  */
 @import (less) "less/colors.less";
 @import (less) "less/breakpoints.less";
-@import (less) "less/mixins.less";
 @import (less) "less/font-families.less";
 @import (less) "components/flash-messages.less";
 @import (less) "less/z-index.less";

Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@`
`22`	`22`	`}`
`23`	`23`
`24`	`24`	`.carousel {`
`25`		`- .display-flex();`
	`25`	`+ display: flex;`
`26`	`26`	`margin-bottom: 15px;`
`27`	`27`	`overflow-x: scroll;`
`28`	`28`	`padding: 10px 20px;`
Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@ div#footer-content {`
`8`	`8`	`}`
`9`	`9`
`10`	`10`	`div#footer-links {`
`11`		`- .display-flex();`
	`11`	`+ display: flex;`
`12`	`12`	`margin-left: 10px;`
`13`	`13`	`line-height: 1.5em;`
`14`	`14`	`}`
`@@ -23,13 +23,13 @@ div#footer-links {`
`23`	`23`	`}`
`24`	`24`
`25`	`25`	`footer {`
`26`		`- .display-flex();`
	`26`	`+ display: flex;`
`27`	`27`	`width: 100%;`
`28`	`28`	`bottom: 0;`
`29`	`29`	`font-size: 0.8em;`
`30`	`30`	`#footer-details {`
`31`	`31`	`color: @dark-grey;`
`32`		`- .display-flex();`
	`32`	`+ display: flex;`
`33`	`33`	`width: 100%;`
`34`	`34`	`}`
`35`	`35`	`h2 {`
Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@`
`18`	`18`	`}`
`19`	`19`
`20`	`20`	`.navigation-component {`
`21`		`- .display-flex();`
	`21`	`+ display: flex;`
`22`	`22`	`-webkit-box-ordinal-group: 3;`
`23`	`23`	`-ms-flex-order: 2;`
`24`	`24`	`order: 2;`
Original file line number	Diff line number	Diff line change
`@@ -45,7 +45,7 @@ div.chartHome a:hover,`
`45`	`45`	`}`
`46`	`46`	`#home {`
`47`	`47`	`&-stats-charts {`
`48`		`- .display-flex();`
	`48`	`+ display: flex;`
`49`	`49`	`flex-wrap: wrap;`
`50`	`50`	`.statschart {`
`51`	`51`	`flex: 1;`
`@@ -90,7 +90,7 @@ div.chartHome a:hover,`
`90`	`90`	`text-align: left;`
`91`	`91`	`}`
`92`	`92`	`&-about {`
`93`		`- .display-flex();`
	`93`	`+ display: flex;`
`94`	`94`	`flex-wrap: wrap;`
`95`	`95`	`font-size: 13px;`
`96`	`96`	`}`