Tune version and language selector styles (#1603)

* Tuning on select width and icon placement * Use better cursor * Add a max width to selects so that they can't overflow * Only add after pseudo element if select exists * Lint
readthedocs · Sep 20, 2024 · dbd7fd3 · dbd7fd3
1 parent 7b63004
commit dbd7fd3
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 14 deletions.
diff --git a/sphinx_rtd_theme/layout.html b/sphinx_rtd_theme/layout.html
@@ -126,10 +126,10 @@
 
           {%- if READTHEDOCS %}
             {%- if theme_version_selector or theme_language_selector %}
-            <div class="switch-menus">
-              <div class="version-switch"></div>
-              <div class="language-switch"></div>
-            </div>
+              <div class="switch-menus">
+                <div class="version-switch"></div>
+                <div class="language-switch"></div>
+              </div>
             {%- endif %}
           {%- endif %}
 

diff --git a/sphinx_rtd_theme/static/css/theme.css b/sphinx_rtd_theme/static/css/theme.css
diff --git a/src/sass/_theme_layout.sass b/src/sass/_theme_layout.sass
@@ -239,12 +239,15 @@ html
     font-weight: normal
     color: rgba(255, 255,255, 0.3)
     > div.version-switch, > div.language-switch
+      display: inline-block
       padding: .2em
       select
+        // Provide room for dropdown icon
         display: inline-block
-        min-width: 10em
-        max-width: 10em
-        padding: .1em 1.5em .1em .5em
+        margin-right: -2rem
+        padding-right: 2rem
+        max-width: $nav-desktop-width * .8
+        // Alter base select styles
         text-align-last: center
         background: none
         border: none
@@ -254,24 +257,24 @@ html
         font-size: 1em
         font-weight: normal
         color: rgba(255, 255, 255, .3)
+        cursor: pointer
         // Allow for padding
         appearance: none
         -webkit-appearance: none
         -moz-appearance: none
         &:hover, &:active, &:focus
           background: rgba(255, 255, 255, .1)
           color: rgba(255, 255, 255, .5)
-      &:after
+      &:has(> select):after
+        display: inline-block
+        width: 1.5em
+        height: 100%
+        padding: .1em
         content: "\f0d7"
         font-size: 1em
         line-height: 1.2em
         font-family: FontAwesome
         text-align: center
-        width: 1.5em
-        height: 100%
-        padding: .1em
-        position: absolute
-        right: 3.5em
         pointer-events: none
         box-sizing: border-box