You are here

Home » API reference » Drupal 10

header-buttons-mobile.css in Drupal 10

Same filename and directory in other branches
  1. 9 core/themes/olivero/css/components/header-buttons-mobile.css

Header Mobile Buttons.

File

core/themes/olivero/css/components/header-buttons-mobile.css
View source 
  1. /*

  2.  * DO NOT EDIT THIS FILE.

  3.  * See the following change record for more information,

  4.  * https://www.drupal.org/node/3084859

  5.  * @preserve

  6.  */

  7. 

  8. /**

  9.  * @file

  10.  * Header Mobile Buttons.

  11.  */

  12. 

  13. /*

  14.  * Media query breakpoints.

  15.  * Processed by postcss/postcss-custom-media.

  16.  */

  17. 

  18. /* Navigation related breakpoints */

  19. 

  20. /* Grid related breakpoints */

  21. 

  22. /* Grid shifts from 6 to 14 columns. */

  23. 

  24. /* Width of the entire grid maxes out. */

  25. 

  26. [dir="ltr"] .mobile-buttons {

  27.   margin-left: auto

  28. }

  29. 

  30. [dir="rtl"] .mobile-buttons {

  31.   margin-right: auto

  32. }

  33. 

  34. .mobile-buttons {

  35.   margin-top: var(--sp0-5)

  36. }

  37. 

  38. @media (min-width: 31.25rem) {

  39. 

  40. .mobile-buttons {

  41.     margin-top: var(--sp2)

  42. }

  43.   }

  44. 

  45. @media (min-width: 43.75rem) {

  46. 

  47. .mobile-buttons {

  48.     margin-top: var(--sp4)

  49. }

  50.   }

  51. 

  52. @media (min-width: 75rem) {

  53. 

  54. .mobile-buttons {

  55.     margin-top: var(--sp6)

  56. }

  57.   }

  58. 

  59. @media (min-width: 75rem) {

  60.   body:not(.is-always-mobile-nav) .mobile-buttons {

  61.     display: none;

  62.   }

  63. }