You are here

Home » API reference » Drupal 10

menu-sidebar.css in Drupal 10

Same filename and directory in other branches
  1. 9 core/themes/olivero/css/components/navigation/menu-sidebar.css

Styles for menu placed in sidebar region.

File

core/themes/olivero/css/components/navigation/menu-sidebar.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.  * Styles for menu placed in sidebar region.

  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. .menu--sidebar {

  27.   list-style: none

  28. }

  29. 

  30. .menu--sidebar .menu {

  31.     list-style: none;

  32.   }

  33. 

  34. .menu--sidebar .menu--level-1 {

  35.     margin: 0;

  36.   }

  37. 

  38. [dir="ltr"] .menu--sidebar .menu__link {

  39.     padding-left: 0

  40. }

  41. 

  42. [dir="rtl"] .menu--sidebar .menu__link {

  43.     padding-right: 0

  44. }

  45. 

  46. [dir="ltr"] .menu--sidebar .menu__link {

  47.     padding-right: 0

  48. }

  49. 

  50. [dir="rtl"] .menu--sidebar .menu__link {

  51.     padding-left: 0

  52. }

  53. 

  54. .menu--sidebar .menu__link {

  55.     position: relative;

  56.     display: block;

  57.     padding-top: var(--sp0-75);

  58.     padding-bottom: var(--sp0-75);

  59.     font-family: var(--font-serif);

  60.     font-size: 1.125rem

  61. 

  62.     /* Bottom divider line. */

  63.   }

  64. 

  65. [dir="ltr"] .menu--sidebar .menu__link:after {

  66.       left: 0

  67. }

  68. 

  69. [dir="rtl"] .menu--sidebar .menu__link:after {

  70.       right: 0

  71. }

  72. 

  73. .menu--sidebar .menu__link:after {

  74.       position: absolute;

  75.       bottom: 0;

  76.       width: var(--sp4);

  77.       height: 0;

  78.       content: "";

  79.       border-top: solid 2px var(--color--gray-95);

  80.     }

  81. 

  82. .menu--sidebar .menu__link--link {

  83.     text-decoration: none;

  84.     color: var(--color-text-neutral-loud);

  85.     font-weight: 600

  86.   }

  87. 

  88. .menu--sidebar .menu__link--link:hover {

  89.       color: var(--color--primary-50);

  90.     }

  91. 

  92. .menu--sidebar {

  93. 

  94.   /* No bottom divider line for last menu item. */

  95. }

  96. 

  97. .menu--sidebar .menu__item--level-1:last-child > .menu__link:last-child:after, .menu--sidebar .menu__item--level-1:last-child > .menu__item--level-2:last-child > .menu__link:last-child:after {

  98.       content: none;

  99.     }