From c5ee116d81fb1f984ad5e6be68388419630d28b1 Mon Sep 17 00:00:00 2001 From: Lokesh Dhakar Date: Fri, 14 Nov 2025 21:57:34 -0800 Subject: [PATCH 1/2] refactor: remove mixins.less. flex browser-prefixes not needed --- static/css/components/buttonCta.less | 4 +++- static/css/components/carousel.less | 2 +- static/css/components/footer.less | 6 +++--- .../fulltext-search-suggestion-item.less | 2 +- .../components/fulltext-search-suggestion.less | 2 +- static/css/components/generic-dropper.less | 2 +- static/css/components/header-bar--desktop.less | 2 +- static/css/components/header-bar.less | 16 ++++++++-------- static/css/components/home.less | 4 ++-- static/css/components/iaBar.less | 2 +- static/css/components/listLists.less | 2 +- static/css/components/search-result-item.less | 4 ++-- .../css/components/search-results-container.less | 2 +- static/css/components/shareLinks.less | 2 +- static/css/legacy.less | 9 ++++----- static/css/less/index.less | 1 - static/css/less/mixins.less | 13 ------------- static/css/page-admin.less | 1 - static/css/page-design.less | 3 +-- static/css/page-edit.less | 1 - static/css/page-form.less | 1 - static/css/page-list-edit.less | 1 - static/css/page-plain.less | 1 - static/css/page-user.less | 1 - 24 files changed, 32 insertions(+), 52 deletions(-) delete mode 100644 static/css/less/mixins.less diff --git a/static/css/components/buttonCta.less b/static/css/components/buttonCta.less index 76eaed82d35..77eb0177ae7 100644 --- 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 index b83d8f31f0f..7b1f6deca6c 100644 --- 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 index 2c1f4e5993c..393d4275d22 100644 --- 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 index 2aadeb4fc29..5c98260623b 100644 --- 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 index 0e8765d4ce6..36cda846585 100644 --- 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 index b884376fa33..d6788d3dc2b 100644 --- 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 index d27a7e02f06..f4a704d0ae0 100644 --- 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 index 529e97d3da3..015bd78c31e 100644 --- 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 index db721a59b9f..7f4ead79499 100644 --- 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 index 4ae910f301f..a59dd150da1 100644 --- 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 index 602e8335941..24d5082a62c 100644 --- 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/search-result-item.less b/static/css/components/search-result-item.less index 96ccbd62928..4be754561bb 100644 --- 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 index ab7c19e8d56..f449c6f4972 100644 --- 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 index d790adab9c8..81a86ba7578 100644 --- a/static/css/components/shareLinks.less +++ b/static/css/components/shareLinks.less @@ -9,7 +9,7 @@ */ .shareLinks-list { - .display-flex(); + display: flex; word-break: keep-all; margin: 0; padding: 0; diff --git a/static/css/legacy.less b/static/css/legacy.less index 13f916266f1..c7a182242a1 100644 --- 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"; @@ -276,7 +275,7 @@ q { .pagination { font-size: 0.75em; margin: 0 15px; - .display-flex(); + display: flex; justify-content: flex-end; flex-wrap: wrap; a { @@ -1360,7 +1359,7 @@ span.actions { // openlibrary/macros/FulltextResults.html ul.list-books { > li { - .display-flex(); + display: flex; } // openlibrary/macros/SearchResultsWork.html // openlibrary/templates/books/check.html @@ -1609,7 +1608,7 @@ div#subjectLists { font-family: @body-family; padding-bottom: 10px; padding-top: 0; - .display-flex(); + display: flex; .image { display: block; float: left; @@ -1680,7 +1679,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 index 3159f51de4f..caccacad182 100644 --- 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 deleted file mode 100644 index 52bca5e9b74..00000000000 --- a/static/css/less/mixins.less +++ /dev/null @@ -1,13 +0,0 @@ -// stylelint-disable declaration-block-no-duplicate-properties -.display-flex() { - display: -webkit-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; -} -.shell-btn--active() { - background-color: @white; - border: 2px solid @primary-blue; - color: @primary-blue; -} -// stylelint-enable declaration-block-no-duplicate-properties diff --git a/static/css/page-admin.less b/static/css/page-admin.less index 505b289ca76..ffb8b246787 100644 --- 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 index e7802cfacb4..d967fa84be8 100644 --- 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 index 40da1fb3a11..bdc82748bd2 100644 --- 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 index eebbdb58435..a6420e8d8df 100644 --- 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 index e85d57eabec..396971968e9 100644 --- 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 index 2e01026b53f..58af40e9581 100644 --- 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 index d20b4206103..7bbad4c0623 100644 --- 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"; From a2bdb2671e5b840ff55d7d6a43b0aefb71a41989 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Sat, 15 Nov 2025 06:09:42 +0000 Subject: [PATCH 2/2] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- static/css/components/shareLinks.less | 1 - static/css/legacy.less | 1 - 2 files changed, 2 deletions(-) diff --git a/static/css/components/shareLinks.less b/static/css/components/shareLinks.less index 81a86ba7578..16e32f796f4 100644 --- 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 index c7a182242a1..5729e0eb992 100644 --- a/static/css/legacy.less +++ b/static/css/legacy.less @@ -1602,7 +1602,6 @@ div#subjectLists { padding: 0; li { list-style-type: none; - display: block; float: left; width: 282px; font-family: @body-family;